:root{--tinta:#0f2a36;--suave:#4a6270;--fondo:#f6f9f9;--papel:#ffffff;--linea:#d6e3e6;--acento:#0b6e8a;--acento_suave:#e2f1f5;--boton:#0b6e8a;--boton_texto:#ffffff}
/* WEBS PROPIAS DE FRAN: una publicación de lectura, clara para alguien de 60 años, en el móvil y en el ordenador.
   Los colores llegan como variables (--tinta, --acento…). Nada se sale de su caja: los titulares parten por palabras y bajan
   de tamaño con el ancho; dos textos distintos nunca van pegados. Gesto propio: la línea de flotación (una onda que cierra
   cada cabecera y abre la banda final). Las fotos de cabecera van a sangre, sin marcos. Ninguna letra por debajo de 14 px. */
:root{--pad:20px;--onda:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 12'%3E%3Cpath d='M0 6q9-8 18 0t18 0' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");--sombra:0 1px 2px rgba(15,42,54,.05),0 10px 30px rgba(15,42,54,.08);--gris:var(--suave)}
@supports (color:color-mix(in srgb,red 50%,blue)){:root{--gris:color-mix(in srgb,var(--tinta) 68%,var(--suave))}}
@media(max-width:600px){:root{--pad:16px}}
@media(max-width:360px){:root{--pad:14px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:92px;scroll-behavior:smooth}
@media(max-width:1099px){html{scroll-padding-bottom:88px}}
body{margin:0;background:var(--fondo);color:var(--tinta);font:18px/1.65 "Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;font-kerning:normal}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:var(--acento);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--acento);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:"Newsreader",Georgia,"Times New Roman",serif;font-optical-sizing:auto;font-weight:600;line-height:1.16;color:var(--tinta);text-wrap:balance;overflow-wrap:normal;hyphens:manual}
h1{font-size:clamp(30px,2.2vw + 22px,52px);line-height:1.08;margin:0 0 20px;letter-spacing:-.015em}
h2{font-size:clamp(27px,1.4vw + 22px,38px);margin:64px 0 18px;letter-spacing:-.01em}
h3{font-size:23px;margin:36px 0 12px}
p{margin:0 0 20px;text-wrap:pretty}
ul,ol{margin:0 0 22px;padding-left:1.3em}
li{margin:0 0 10px}
li::marker{color:var(--acento)}
strong{font-weight:700}
.nw{white-space:nowrap}
.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.salto{position:absolute;left:-999px;top:8px;background:var(--papel);padding:10px 14px;border-radius:8px;z-index:60}
.salto:focus{left:16px}
.envoltura{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--pad)}

/* Cabecera */
.cabecera{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--papel) 94%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linea)}
.cabecera .envoltura{display:flex;align-items:center;gap:18px;min-height:72px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta);flex:0 0 auto;min-height:44px}
.marca svg{width:34px;height:34px;flex:0 0 auto}
.marca b{font:600 22px/1.1 "Newsreader",Georgia,serif;letter-spacing:-.01em;white-space:nowrap}
.marca i{font-style:italic;font-weight:500;color:var(--acento)}
.menu{display:flex;gap:2px;margin-left:auto;align-items:center}
.menu a{color:var(--tinta);text-decoration:none;font-size:16.5px;padding:10px 9px;border-radius:10px;white-space:nowrap;position:relative}
.menu a:hover{background:var(--acento_suave)}
.menu a[aria-current=page]{color:var(--acento);font-weight:600}
.menu a[aria-current=page]::after{content:"";position:absolute;left:9px;right:9px;bottom:2px;height:6px;background:currentColor;-webkit-mask:var(--onda) repeat-x 0 0/18px 6px;mask:var(--onda) repeat-x 0 0/18px 6px}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--boton);color:var(--boton_texto)!important;text-decoration:none!important;font-weight:600;font-size:17px;line-height:1.2;padding:14px 24px;border-radius:999px;min-height:50px;text-align:center;box-shadow:0 1px 0 rgba(0,0,0,.06);transition:transform .15s ease,box-shadow .15s ease}
.boton:hover{transform:translateY(-1px);box-shadow:0 8px 22px color-mix(in srgb,var(--boton) 32%,transparent)}
.boton svg{width:18px;height:18px;flex:0 0 auto}
.cabecera .boton{padding:10px 20px;min-height:44px;font-size:16px;margin-left:8px;white-space:nowrap}
.menu-movil{display:none;margin-left:auto}
.menu-movil summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--linea);border-radius:999px;font-size:17px;font-weight:600;min-height:46px;background:var(--papel)}
.menu-movil summary::-webkit-details-marker{display:none}
.menu-movil[open] summary{background:var(--acento_suave);border-color:var(--acento)}
.menu-movil nav{position:absolute;left:0;right:0;top:100%;background:var(--papel);border-bottom:1px solid var(--linea);padding:12px var(--pad) 22px;display:flex;flex-direction:column;gap:2px;box-shadow:0 16px 30px rgba(15,42,54,.12);max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow:auto}
.menu-movil nav a{color:var(--tinta);text-decoration:none;padding:13px 4px;border-bottom:1px solid var(--linea);font-size:18px;min-height:48px}
.menu-movil nav a[aria-current=page]{color:var(--acento);font-weight:600}
.menu-movil nav .boton{margin-top:16px;border:0;color:var(--boton_texto)!important}
@media(max-width:1259px){.menu,.cabecera .envoltura>.boton{display:none}.menu-movil{display:block}}
@media(max-width:360px){.cabecera .envoltura{gap:10px}.marca svg{width:28px;height:28px}.marca b{font-size:18px}.menu-movil summary{padding:8px 12px;font-size:16px}}

/* La línea de flotación */
.flotacion{position:absolute;left:0;bottom:-1px;width:100%;height:18px;display:block;z-index:3;pointer-events:none}
.flotacion .agua{fill:var(--fondo)}
.flotacion .linea{fill:none;stroke:var(--acento);stroke-width:1.6;opacity:.6}
@media(max-width:600px){.flotacion{height:12px}}

/* Cabeza de la página */
.cabeza{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--acento_suave) 0%,var(--fondo) 92%);padding:32px 0 52px}
.cabeza-rejilla{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.cabeza-texto{min-width:0;position:relative;z-index:1}
.cabeza-foto{min-width:0;position:relative}
.cabeza-foto img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--acento_suave)}
/* Migas: completas en ordenador, «‹ padre» en el móvil */
.migas{font-size:16px;color:var(--gris);margin:0 0 14px;display:flex;flex-wrap:wrap;gap:0 10px;align-items:center;line-height:1.4}
.migas a{color:var(--gris);display:inline-flex;align-items:center;padding:6px 0;min-height:36px}
@media(max-width:600px){
.migas{margin:0 0 10px;font-size:16.5px}
.migas>:not(.padre){display:none}
.migas .padre{min-height:44px;padding:8px 0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.migas .padre::before{content:"‹";content:"‹"/"";font-size:22px;line-height:1;margin:-2px 8px 0 0;text-decoration:none;display:inline-block}
}
.antetitulo{display:flex;align-items:center;gap:12px;font-size:15.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--acento);margin:0 0 14px;line-height:1.3}
.antetitulo::before{content:"";flex:0 0 36px;height:10px;background:currentColor;-webkit-mask:var(--onda) repeat-x 0 0/18px 10px;mask:var(--onda) repeat-x 0 0/18px 10px}
.cabeza .entradilla{font-size:clamp(19px,.4vw + 17.5px,21px);line-height:1.55;color:var(--tinta);max-width:700px;margin:0 0 28px}
/* Firma: nombre, cargo en tinta y «Revisado el…» con las fuentes, todo legible */
.firma{display:flex;align-items:center;gap:16px;margin:0}
.firma img{width:60px;height:60px;flex:0 0 auto;border-radius:50%;object-fit:cover;object-position:50% 20%;border:3px solid var(--papel);box-shadow:0 2px 8px rgba(15,42,54,.14)}
.firma p{margin:0;display:flex;flex-direction:column;gap:3px;font-size:17px;line-height:1.4;color:var(--gris);min-width:0}
.firma .por{font-size:18px;color:var(--tinta)}
.firma .por b{font-weight:600}
.firma .por a{color:inherit}
.firma .cred{color:var(--tinta)}
.firma .meta{display:block}
.firma .citadas{white-space:nowrap}
.firma .sep{color:var(--gris)}
.firma .meta a{color:var(--acento);font-weight:600;display:inline-block;padding:2px 0}
.firma.sin-foto{padding-left:16px;border-left:3px solid var(--acento)}
@media(max-width:600px){
.firma{align-items:flex-start;gap:14px}
.firma p{font-size:16.5px}
.firma .por{font-size:17.5px}
.firma .citadas{display:block;margin-top:2px}
.firma .sep{display:none}
.firma .meta a{padding:6px 0}
}
@media(max-width:959px){
.cabeza.con-foto{padding-top:0}
.con-foto .cabeza-foto{order:-1;margin:0 calc(-1 * var(--pad)) 4px}
.con-foto .cabeza-foto img{aspect-ratio:21/9}
.con-foto .retrato-autora img{aspect-ratio:4/3;object-position:50% 22%}
.retrato-autora figcaption{display:flex;flex-direction:column;gap:2px;padding:14px var(--pad) 0;font-size:16px;line-height:1.4;color:var(--gris)}
.retrato-autora figcaption b{font:600 21px/1.2 "Newsreader",Georgia,serif;color:var(--tinta)}
}
@media(max-width:600px){.con-foto .cabeza-foto img{aspect-ratio:16/9}.con-foto .retrato-autora img{aspect-ratio:4/3}}
@media(min-width:960px){
.cabeza{padding:56px 0 76px}
.cabeza.con-foto .cabeza-rejilla{position:static;display:flex;align-items:center;min-height:clamp(420px,calc(100vh - 300px),560px)}
.con-foto .cabeza-texto{max-width:calc(50% + 6vw - 56px)}
.con-foto .cabeza-foto{position:absolute;top:0;right:0;bottom:0;width:44vw;z-index:1}
.con-foto .cabeza-foto img{height:100%;aspect-ratio:auto}
.retrato-autora img{object-position:50% 25%}
.retrato-autora figcaption{position:absolute;left:28px;bottom:44px;max-width:calc(100% - 56px);display:flex;flex-direction:column;gap:2px;padding:12px 18px;border-radius:12px;background:color-mix(in srgb,var(--papel) 94%,transparent);font-size:16px;line-height:1.4;color:var(--gris)}
.retrato-autora figcaption b{font:600 21px/1.2 "Newsreader",Georgia,serif;color:var(--tinta)}
}

/* Portada: las tres propiedades */
.trio{padding:40px 0 4px}
.trio-lema{font:500 clamp(24px,1.4vw + 19px,36px)/1.25 "Newsreader",Georgia,serif;color:var(--tinta);max-width:860px;margin:0 0 24px;text-wrap:balance}
.trio-lista{list-style:none;padding:0;margin:0;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.trio-lista li{margin:0}
.trio-lista a{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:center;height:100%;background:var(--papel);border:1px solid var(--linea);border-radius:16px;padding:8px 14px 8px 8px;text-decoration:none;color:var(--tinta);min-height:88px;transition:border-color .15s,box-shadow .15s,transform .15s}
.trio-lista a:hover{border-color:var(--acento);box-shadow:var(--sombra);transform:translateY(-2px)}
.trio-lista a[aria-current]{border-color:var(--acento);box-shadow:inset 0 0 0 1px var(--acento)}
.trio-lista img,.trio-vacio{width:72px;height:72px;object-fit:cover;border-radius:10px;background:var(--acento_suave)}
.trio-vacio{display:block;overflow:hidden;color:var(--acento)}
.trio-vacio svg{width:100%;height:100%;opacity:.4}
.trio-texto{display:flex;flex-direction:column;gap:4px;min-width:0}
.trio-tag{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--acento);line-height:1.35}
.trio-aqui{display:inline-flex;align-items:center;background:var(--acento);color:#fff;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;line-height:1.2;padding:5px 12px;border-radius:999px}
.trio-texto b{font:600 21px/1.2 "Newsreader",Georgia,serif}
@media(min-width:760px){
.trio{padding:52px 0 4px}
.trio-lista{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.trio-lista a{grid-template-columns:minmax(0,1fr);align-items:start;padding:0;overflow:hidden;gap:0}
.trio-lista img,.trio-vacio{width:100%;height:auto;aspect-ratio:3/2;border-radius:0}
.trio-texto{padding:18px 22px 22px;gap:6px}
.trio-texto b{font-size:24px}
}

/* Cuerpo: artículo y columna lateral */
.cuerpo{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;padding:44px 0 24px}
@media(min-width:1100px){.cuerpo{grid-template-columns:minmax(0,640px) 330px;justify-content:space-between;padding-top:52px}}
@media(min-width:1240px){.cuerpo{grid-template-columns:minmax(0,640px) 340px;justify-content:space-between}}
.articulo{max-width:720px;min-width:0;counter-reset:sec}
@media(min-width:1100px){.articulo{max-width:640px}}
@media(min-width:960px){.articulo{font-size:19px;line-height:1.66}}
.articulo>section:first-of-type>h2{margin-top:44px}
.sec{counter-increment:sec}
.sec>h2::before{content:counter(sec,decimal-leading-zero);content:counter(sec,decimal-leading-zero)/"";display:block;width:max-content;font:500 italic 46px/1 "Newsreader",Georgia,serif;letter-spacing:0;color:var(--acento);padding:0 0 12px;margin:0 0 14px;border-bottom:2px solid var(--acento)}
.articulo h3{font-size:24px}
/* Listas de «negrita + explicación»: tarjetas */
.articulo ul.tarjetas{list-style:none;padding:0;display:grid;gap:14px;margin:10px 0 30px}
.articulo ul.tarjetas>li{position:relative;background:var(--papel);border:1px solid var(--linea);border-radius:16px;padding:20px 22px 20px 28px;margin:0;font-size:17.5px;line-height:1.6;box-shadow:0 1px 2px rgba(15,42,54,.04)}
.articulo ul.tarjetas>li::before{content:"";position:absolute;left:-1px;top:22px;bottom:22px;width:4px;background:var(--acento)}
.articulo ul.tarjetas>li>strong:first-child{display:block;font:600 22px/1.25 "Newsreader",Georgia,serif;color:var(--tinta);margin:0 0 8px}
@media(min-width:960px){.articulo ul.tarjetas>li{font-size:18px}}
/* Listas numeradas de pasos */
.sec>ol{list-style:none;padding:0;counter-reset:paso;margin:10px 0 28px}
.sec>ol>li{counter-increment:paso;position:relative;padding-left:54px;min-height:38px;margin:0 0 16px}
.sec>ol>li::before{content:counter(paso);position:absolute;left:0;top:-2px;width:38px;height:38px;border-radius:50%;background:var(--acento_suave);color:var(--acento);font:600 18px/38px "Newsreader",Georgia,serif;text-align:center}
.articulo blockquote{margin:36px 0;padding:6px 0 6px 26px;border-left:3px solid var(--acento);font:500 italic clamp(21px,2.4vw,25px)/1.45 "Newsreader",Georgia,serif;color:var(--tinta)}
.articulo blockquote p:last-child{margin:0}
/* Apertura de capítulo: foto a sangre, número y titular grandes encima, entre dos líneas de agua */
.previo{padding-top:30px}
.previo .indice-movil{margin-top:22px}
.previo-col{max-width:760px}
.capitulo{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;min-height:clamp(420px,34vw,500px);margin:36px 0 0;background:#0a3a48;color:#fff}
.capitulo-foto{position:absolute;inset:0;z-index:-1;background:var(--foto) 62% 50%/cover no-repeat}
@media(max-width:800px){.capitulo-foto{background-image:var(--foto-m)}}
.capitulo-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,32,44,.88) 0%,rgba(5,32,44,.6) 30%,rgba(5,32,44,.12) 62%,rgba(5,32,44,0) 80%),linear-gradient(90deg,rgba(5,32,44,.45) 0%,rgba(5,32,44,0) 60%)}
.capitulo-texto{position:relative;padding-top:120px;padding-bottom:72px}
.capitulo-num{display:flex;align-items:center;gap:20px;font:500 italic clamp(60px,5vw + 20px,112px)/.9 "Newsreader",Georgia,serif;color:#d3f0f7}
.capitulo-num::after{content:"";flex:0 0 72px;height:14px;background:currentColor;-webkit-mask:var(--onda) repeat-x 0 0/24px 14px;mask:var(--onda) repeat-x 0 0/24px 14px}
.capitulo h2{color:#fff;font-size:clamp(34px,3.4vw + 14px,68px);line-height:1.04;letter-spacing:-.02em;max-width:940px;margin:18px 0 0;text-shadow:0 2px 26px rgba(0,0,0,.25);scroll-margin-top:96px}
.capitulo .flotacion .linea{stroke:#9fdcec;opacity:.9}
.cuerpo.tras-capitulo{padding-top:36px}
.sec-tras-capitulo>p:first-child{font-size:1.12em;line-height:1.6}
@media(max-width:600px){.previo{padding-top:32px}.capitulo{min-height:440px;margin-top:40px}.capitulo-texto{padding-top:120px;padding-bottom:60px}.capitulo-num{font-size:64px;gap:14px}.capitulo-num::after{flex-basis:48px}.capitulo h2{font-size:clamp(30px,8vw,40px)}}
/* Foto a mitad del texto: rompe la columna y da aire; en el móvil va a sangre */
.intermedia{margin:52px 0 12px}
.intermedia img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:6px;background:var(--acento_suave)}
@media(max-width:600px){.intermedia{margin:44px calc(-1 * var(--pad)) 8px}.intermedia img{border-radius:0}}
/* Tablas: siempre dentro del ancho */
.articulo table{width:100%;max-width:100%;border-collapse:collapse;margin:10px 0 30px;font-size:16.5px;line-height:1.5;background:var(--papel);border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--linea)}
.articulo th,.articulo td{padding:12px 14px;border-bottom:1px solid var(--linea);text-align:left;vertical-align:top;overflow-wrap:anywhere;hyphens:auto}
.articulo thead th{background:var(--acento_suave);font-weight:700;border-bottom:2px solid color-mix(in srgb,var(--acento) 35%,transparent)}
.articulo tbody tr:last-child td{border-bottom:0}
@media(max-width:640px){.articulo table{font-size:15px}.articulo th,.articulo td{padding:10px 8px}}

/* Escala de pH */
.escala-ph{margin:30px 0 34px;padding:22px 24px 18px;background:var(--papel);border:1px solid var(--linea);border-radius:18px}
.escala-barra{position:relative;height:16px;border-radius:999px;background:linear-gradient(90deg,#b5591a 0%,#dca24e 28%,#eef2f1 50%,#6fb6c8 72%,#0b6e8a 100%)}
.escala-barra::after{content:"";position:absolute;left:50%;top:-6px;bottom:-6px;width:2px;margin-left:-1px;background:var(--tinta);border-radius:2px}
.escala-marcas,.escala-zonas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.escala-marcas span{font:600 26px/1 "Newsreader",Georgia,serif;padding-top:12px}
.escala-zonas span{font-size:15px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gris);padding-top:6px}
.escala-marcas span:nth-child(2),.escala-zonas span:nth-child(2){text-align:center}
.escala-marcas span:last-child,.escala-zonas span:last-child{text-align:right}

/* Columna lateral: el índice cede altura y hace scroll propio; el encuentro siempre se ve entero */
.lateral{display:none}
.indice{background:var(--papel);border:1px solid var(--linea);border-radius:16px;padding:22px 20px 14px}
.indice b{display:block;font:600 21px/1.25 "Newsreader",Georgia,serif;color:var(--tinta);margin:0 0 12px;flex:0 0 auto}
.indice ol{list-style:none;margin:0;padding:0;counter-reset:i;font-size:17px;line-height:1.4}
.indice li{counter-increment:i;display:grid;grid-template-columns:32px minmax(0,1fr);margin:0 0 2px}
.indice li::before{content:counter(i,decimal-leading-zero);font-size:15px;font-weight:700;color:var(--acento);padding-top:8px;letter-spacing:.04em}
.indice a{color:var(--tinta);text-decoration:none;padding:6px 8px;margin-left:-8px;border-radius:8px;display:block}
.indice a:hover{color:var(--acento);text-decoration:underline}
.indice a:focus-visible{outline-offset:-3px}
.indice a[aria-current]{background:var(--acento_suave);color:var(--acento);font-weight:600}
@media(min-width:1100px){
.lateral{display:flex;flex-direction:column;gap:24px}
.lateral .indice{position:sticky;top:96px;display:flex;flex-direction:column;max-height:calc(100vh - 116px);max-height:calc(100dvh - 116px)}
.lateral .indice ol{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--linea) transparent;padding:2px 6px 6px 10px;margin:0 -6px 0 -10px;font-size:16.5px;line-height:1.35}
.lateral .indice a{padding:5px 8px}
.lateral .tarjeta-cta{padding:22px}
.lateral .tarjeta-cta p{font-size:16.5px;margin-bottom:16px}
}
.indice-movil{background:var(--papel);border:1px solid var(--linea);border-radius:16px;margin:0 0 8px}
.indice-movil summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 20px;font-weight:600;font-size:18px}
.indice-movil summary::-webkit-details-marker{display:none}
.indice-movil summary::after{content:"";flex:0 0 10px;width:10px;height:10px;border-right:2px solid var(--acento);border-bottom:2px solid var(--acento);transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.indice-movil[open] summary::after{transform:translateY(3px) rotate(-135deg)}
.indice-movil .cuenta{color:var(--gris);font-weight:400}
.indice-movil ol{list-style:none;counter-reset:i;margin:0;padding:0 20px 12px;font-size:17px;line-height:1.4}
.indice-movil li{counter-increment:i;display:grid;grid-template-columns:36px minmax(0,1fr);margin:0;border-top:1px solid var(--linea)}
.indice-movil li::before{content:counter(i,decimal-leading-zero);font-size:15px;font-weight:700;color:var(--acento);padding-top:14px}
.indice-movil a{display:block;padding:11px 0;color:var(--tinta);text-decoration:none;min-height:44px}
@media(min-width:1100px){.indice-movil{display:none}}

/* Tarjeta del encuentro (lateral y en mitad del texto) */
.tarjeta-cta{position:relative;overflow:hidden;background:var(--tinta);color:#fff;border-radius:20px;padding:24px}
.tarjeta-cta::after{content:"";position:absolute;right:-20px;bottom:-14px;width:180px;height:14px;background:var(--acento);opacity:.7;-webkit-mask:var(--onda) repeat-x 0 0/36px 14px;mask:var(--onda) repeat-x 0 0/36px 14px;pointer-events:none}
.cta-cabeza{display:flex;align-items:center;gap:14px;margin:0 0 12px}
.cta-cabeza img{width:56px;height:56px;flex:0 0 auto;border-radius:50%;object-fit:cover;object-position:50% 20%;border:2px solid rgba(255,255,255,.75)}
.tarjeta-cta b{display:block;font:600 22px/1.25 "Newsreader",Georgia,serif;color:#fff}
.tarjeta-cta p{font-size:17px;line-height:1.55;margin:0 0 18px;color:rgba(255,255,255,.92)}
.tarjeta-cta .boton{width:100%;background:#fff;color:var(--tinta)!important;position:relative;z-index:1}
.tarjeta-cta :focus-visible,.banda :focus-visible{outline-color:#fff}
.en-linea{margin:44px 0 8px;padding:26px}
.en-linea b{font-size:24px}
@media(min-width:1100px){.en-linea{margin:52px 0 8px}}

/* Resumen «En 30 segundos»: filete interior recto, nunca un borde que se curve */
.resumen{position:relative;background:var(--papel);border:1px solid var(--linea);border-radius:16px;padding:24px 26px 8px 30px;margin:0 0 16px}
.resumen::before{content:"";position:absolute;left:-1px;top:24px;bottom:24px;width:4px;background:var(--acento)}
.resumen>b{display:block;font-size:15.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--acento);margin:0 0 14px}
.resumen ul{padding-left:1.1em}

/* Llamadas a nota: pegadas a la palabra */
/* Llamada a nota: superíndice pegado a la palabra y al punto, de 15 px, con zona de toque invisible alrededor */
sup.cita{font-size:15px;line-height:0;margin:0;vertical-align:.45em}
sup.cita a{position:relative;text-decoration:none;font-weight:700;padding:0 1px}
sup.cita a::after{content:"";position:absolute;left:-8px;right:-8px;top:-14px;bottom:-12px}
sup.cita a+a{margin-left:2px}
sup.cita a:hover{text-decoration:underline}

/* Lo demostrado y lo que no */
.evidencia{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:56px 0 8px;scroll-margin-top:96px}
@media(min-width:700px){.evidencia{grid-template-columns:1fr 1fr}}
.evidencia>div{background:var(--papel);border:1px solid var(--linea);border-radius:18px;padding:24px 24px 8px}
.evidencia h2{font-size:22px;margin:0 0 16px;display:flex;align-items:flex-start;gap:12px;line-height:1.25}
.evidencia h2 svg{width:28px;height:28px;flex:0 0 auto}
.evidencia ul{list-style:none;padding:0;font-size:17px;line-height:1.55}
.evidencia li{padding:0 0 12px;margin:0 0 12px;border-bottom:1px solid var(--linea)}
.evidencia li:last-child{border-bottom:0}
.evidencia .si{border-top:5px solid #1d7a4f}
.evidencia .no{border-top:5px solid #b06a12}

/* Preguntas */
.preguntas details{background:var(--papel);border:1px solid var(--linea);border-radius:14px;margin:0 0 10px}
.preguntas details[open]{border-color:color-mix(in srgb,var(--acento) 40%,var(--linea))}
.preguntas summary{cursor:pointer;padding:17px 52px 17px 20px;font-weight:600;font-size:18px;position:relative;list-style:none;min-height:56px;line-height:1.4}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;border-right:2px solid var(--acento);border-bottom:2px solid var(--acento);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.preguntas details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.preguntas details>div{padding:0 20px 6px}

/* Avisos, autora y fuentes */
.aviso{display:flex;gap:12px;align-items:flex-start;background:var(--acento_suave);border-radius:12px;padding:16px 18px;font-size:16px;line-height:1.5;margin:40px 0 0}
.aviso svg{width:22px;height:22px;flex:0 0 auto;margin-top:2px;color:var(--acento)}
.aviso p{margin:0}
.autora{display:grid;grid-template-columns:112px minmax(0,1fr);gap:22px;align-items:center;background:var(--papel);border:1px solid var(--linea);border-radius:18px;padding:24px;margin:32px 0 0}
.autora img{width:112px;height:112px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.autora b{display:block;font:600 24px/1.2 "Newsreader",Georgia,serif;margin:0 0 4px}
.autora span{display:block;color:var(--gris);font-size:16.5px;margin:0 0 10px}
.autora p{font-size:17px;line-height:1.55;margin:0}
@media(max-width:520px){.autora{grid-template-columns:72px minmax(0,1fr);gap:16px;padding:20px;align-items:start}.autora img{width:72px;height:72px}}
.fuentes{font-size:16px;line-height:1.55;color:var(--gris)}
.fuentes ol{padding-left:1.7em}
.fuentes li{margin:0 0 12px;scroll-margin-top:96px;overflow-wrap:anywhere}
.fuentes li:target{background:var(--acento_suave);border-radius:6px;box-shadow:0 0 0 6px var(--acento_suave)}
.fuentes .tipo{display:inline-block;font-size:15px;letter-spacing:.03em;text-transform:uppercase;color:var(--acento);margin-left:6px}
.revisado{font-size:16px;color:var(--gris);margin:24px 0 0}

/* Sigue leyendo / guías prácticas */
.rutas{padding:24px 0 8px}
.rutas .envoltura::before{content:"";display:block;height:12px;background:var(--acento);opacity:.35;-webkit-mask:var(--onda) repeat-x 0 0/36px 12px;mask:var(--onda) repeat-x 0 0/36px 12px;margin:0 0 40px}
.rutas h2{margin:0 0 22px}
.rutas ul{list-style:none;padding:0;margin:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.rutas li{margin:0}
.rutas a{display:grid;grid-template-columns:minmax(0,1fr) 20px;grid-template-areas:"tag flecha" "tit flecha";align-items:center;gap:6px 16px;height:100%;min-height:64px;padding:18px 20px;background:var(--papel);border:1px solid var(--linea);border-radius:16px;text-decoration:none;color:var(--tinta);transition:border-color .15s,transform .15s,box-shadow .15s}
.rutas a:hover{border-color:var(--acento);transform:translateY(-2px);box-shadow:var(--sombra)}
.ruta-tag{grid-area:tag;font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--acento)}
.ruta-tit{grid-area:tit;font:600 20px/1.3 "Newsreader",Georgia,serif}
.rutas a svg{grid-area:flecha;width:20px;height:20px;color:var(--acento)}

/* Banda final del encuentro: se entra en ella por la superficie del agua */
.banda{position:relative;overflow:hidden;background:var(--tinta);color:#fff;margin:64px 0 0;padding:76px 0 64px}
.flotacion.arriba{top:-1px;bottom:auto;transform:scaleY(-1)}
.banda .flotacion .linea{stroke:#7fc3d6;opacity:.7}
.banda .envoltura{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:center}
@media(min-width:860px){.banda .envoltura{grid-template-columns:auto minmax(0,1fr) auto;gap:32px}}
.banda-foto{width:88px;height:88px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:3px solid rgba(255,255,255,.85)}
.banda h2{color:#fff;margin:0 0 10px}
.banda p{color:rgba(255,255,255,.92);margin:0;max-width:640px;font-size:19px}
.banda .boton{background:#fff;color:var(--tinta)!important;font-size:18px;padding:16px 28px;justify-self:start}
@media(max-width:520px){.banda{padding:60px 0 48px}.banda .boton{width:100%}}

/* Barra inferior del móvil: aparece al pasar la cabecera, se retira al llegar a la banda. Índice + encuentro. */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;align-items:center;gap:12px;padding:8px var(--pad) calc(8px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--papel) 96%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--linea);box-shadow:0 -8px 24px rgba(15,42,54,.08);transition:transform .25s ease,visibility .25s}
.js .barra:not(.ver){transform:translateY(110%);visibility:hidden}
.barra img{width:40px;height:40px;flex:0 0 auto;border-radius:50%;object-fit:cover;object-position:50% 20%}
.barra-titulo{display:none}
.barra-indice{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:48px;min-height:48px;padding:0 16px;border:1px solid var(--linea);border-radius:999px;background:var(--papel);color:var(--tinta);text-decoration:none;font-weight:600;font-size:17px}
.barra-indice svg{width:20px;height:20px;flex:0 0 auto;color:var(--acento)}
.barra-indice:hover{border-color:var(--acento)}
.barra .boton{flex:1 1 auto;min-width:0;min-height:48px;padding:10px 18px;font-size:17px;white-space:nowrap}
@media(max-width:600px){.barra-indice{padding:0;width:48px}.barra-indice .bi-texto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}}
@media(max-width:379px){.barra img{display:none}}
@media(max-width:340px){.barra .boton{font-size:16px;padding:10px 12px}}
@media(min-width:601px){.barra-titulo{display:block;flex:1 1 auto;min-width:0;font:600 18px/1.25 "Newsreader",Georgia,serif;color:var(--tinta)}.barra .boton{flex:0 0 auto}}
@media(min-width:1100px){.barra{display:none}}

/* Pie: en móvil deja sitio a la barra para que nada quede tapado */
.pie{background:var(--papel);border-top:1px solid var(--linea);padding:48px 0 32px;font-size:16px;color:var(--gris)}
@media(max-width:1099px){body:has(.barra) .pie{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}
.pie-marca{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 32px;padding:0 0 28px;margin:0 0 32px;border-bottom:1px solid var(--linea)}
.pie-marca p{margin:0;max-width:520px;font:500 italic 19px/1.4 "Newsreader",Georgia,serif;color:var(--tinta)}
.pie-grupos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:28px;margin:0 0 32px}
.pie-grupos b{display:block;color:var(--tinta);font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px}
.pie-grupos ul{list-style:none;padding:0;margin:0}
.pie-grupos li{margin:0 0 2px}
.pie-grupos a{color:var(--gris);text-decoration:none;display:inline-block;padding:6px 0}
.pie-grupos a:hover{color:var(--acento);text-decoration:underline}
.pie-legal{border-top:1px solid var(--linea);padding-top:20px;display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;align-items:center}
.pie-legal p{margin:0;max-width:720px}
.pie-legal nav{display:flex;flex-wrap:wrap;gap:4px 20px}
.pie-legal a{color:var(--gris);display:inline-block;padding:10px 0}

/* Índice del blog */
.blog-rejilla{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));padding:44px 0 16px}
.tarjeta-blog{position:relative;display:flex;flex-direction:column;background:var(--papel);border:1px solid var(--linea);border-radius:20px;overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s}
.tarjeta-blog:hover{transform:translateY(-3px);box-shadow:var(--sombra);border-color:color-mix(in srgb,var(--acento) 40%,var(--linea))}
.tarjeta-blog:focus-within{outline:3px solid var(--acento);outline-offset:3px}
.tarjeta-blog img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--acento_suave)}
.tb-texto{display:flex;flex-direction:column;gap:12px;flex:1;padding:22px 24px 24px;min-width:0}
.tb-cat{font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--acento);margin:0}
.tarjeta-blog h2{font-size:23px;line-height:1.24;margin:0}
.tarjeta-blog h2 a{color:var(--tinta);text-decoration:none}
.tarjeta-blog h2 a::after{content:"";position:absolute;inset:0}
.tarjeta-blog h2 a:focus-visible{outline:none}
.tarjeta-blog:hover h2 a,.tarjeta-blog h2 a:focus-visible{text-decoration:underline;text-decoration-thickness:2px}
.tb-entradilla{font-size:17px;line-height:1.55;color:var(--gris);margin:0}
.tb-fecha{font-size:15px;color:var(--gris);margin:auto 0 0;padding-top:6px}
@media(min-width:860px){
.destacada{grid-column:1/-1;flex-direction:row}
.destacada img{flex:0 0 54%;width:54%;aspect-ratio:auto;height:auto;min-height:380px}
.destacada .tb-texto{justify-content:center;padding:40px 44px}
.destacada h2{font-size:clamp(28px,3vw,38px)}
.destacada .tb-entradilla{font-size:18px;color:var(--tinta)}
}

/* Páginas organizativas y legales */
.sencilla .articulo{margin:0}
.sencilla .cuerpo{grid-template-columns:minmax(0,760px);justify-content:start}
.sencilla .cabeza:not(.con-foto) .cabeza-texto{max-width:820px}
.cabeza-404{padding:72px 0 92px}
.retrato{float:right;width:min(42%,260px);margin:4px 0 18px 24px;border-radius:16px}

@media(max-width:600px){
.cabeza{padding:24px 0 40px}
h2{margin-top:52px}
.firma img{width:56px;height:56px}
.en-linea{padding:22px}
.escala-ph{padding:18px 16px 14px}
.escala-zonas span{letter-spacing:.03em}
}
@media(max-width:360px){h1{font-size:29px}.cabeza .entradilla{font-size:18.5px}.trio-lista a{grid-template-columns:60px minmax(0,1fr);gap:12px}.trio-lista img,.trio-vacio{width:60px;height:60px}.trio-texto b{font-size:19px}.trio-tag{font-size:15px;letter-spacing:.03em}.escala-zonas span{letter-spacing:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
@media print{.cabecera,.lateral,.banda,.menu-movil,.barra,.en-linea,.rutas,.flotacion{display:none}}
/* Propio de elaguaquebebes.es */
/* EL AGUA QUE BEBES. Idea: una revista sobre el agua que se lee como se mira el agua, con la luz que la atraviesa.
   La portada es una CUBIERTA (la poza a sangre, el titular en blanco y el lema de la web como antetítulo); los artículos
   abren con el texto arriba y una PANORÁMICA a todo lo ancho que corta la línea de agua; Ana, en un retrato con forma
   de arco. Una sola llamada a la acción, con un solo texto y un solo botón. */

/* ── Botón único: petróleo, texto blanco, flecha. En superficies oscuras lleva un filo claro para que se recorte. ── */
.boton{border:1.5px solid transparent}
.cubierta .boton{border-color:rgba(255,255,255,.7);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.cubierta .boton:hover{border-color:#fff}

/* ── La cubierta de la portada ── */
.cubierta{position:relative;overflow:hidden;isolation:isolate;background:#0a3a48;padding:0;color:#fff}
.cubierta-foto{position:absolute;inset:0;z-index:-1}
.cubierta-foto img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:58% 50%}
.cubierta-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,32,44,.9) 0%,rgba(5,32,44,.78) 34%,rgba(5,32,44,.34) 60%,rgba(5,32,44,.04) 82%),linear-gradient(0deg,rgba(5,32,44,.4) 0%,rgba(5,32,44,0) 36%)}
.cubierta-rejilla{display:flex;align-items:center;min-height:clamp(580px,calc(100vh - 150px),760px);padding-top:64px;padding-bottom:112px}
.cubierta .cabeza-texto{max-width:760px}
.cubierta-lema{display:flex;align-items:center;gap:16px;font:500 italic clamp(19px,.45vw + 16.5px,23px)/1.4 "Newsreader",Georgia,serif;color:#d3f0f7;margin:0 0 24px;max-width:640px;text-wrap:balance}
.cubierta-lema::before{content:"";flex:0 0 44px;align-self:center;height:10px;background:currentColor;-webkit-mask:var(--onda) repeat-x 0 0/22px 10px;mask:var(--onda) repeat-x 0 0/22px 10px}
.cubierta h1{color:#fff;font-size:clamp(36px,3.3vw + 16px,66px);line-height:1.04;letter-spacing:-.02em;margin:0 0 36px;text-shadow:0 2px 28px rgba(0,0,0,.22)}
.cubierta-pie{display:flex;flex-wrap:wrap;align-items:center;gap:24px 40px}
.cubierta-accion{margin:0}
.cubierta .boton{font-size:18px;padding:16px 30px;min-height:56px}
.cubierta .firma p{color:rgba(255,255,255,.86)}
.cubierta .firma .por,.cubierta .firma .cred{color:#fff}
.cubierta .firma .meta a,.cubierta .firma .sep{color:#bfeaf4}
.cubierta .firma img{border-color:rgba(255,255,255,.9)}
.cubierta :focus-visible{outline-color:#fff}
.cubierta .flotacion .linea{stroke:#9fdcec;opacity:.9}
@media(max-width:959px){
.cubierta-foto img{object-position:62% 50%}
.cubierta-foto::after{background:linear-gradient(180deg,rgba(5,32,44,.05) 0%,rgba(5,32,44,.35) 18%,rgba(5,32,44,.82) 36%,rgba(5,32,44,.9) 100%)}
.cubierta-rejilla{min-height:0;padding-top:clamp(150px,34vw,260px);padding-bottom:80px}
.cubierta h1{margin-bottom:28px}
.cubierta-pie{flex-direction:column;align-items:stretch;gap:26px}
.cubierta .boton{width:100%}
}
@media(max-width:600px){.cubierta-lema{gap:12px;margin-bottom:18px}.cubierta-lema::before{flex-basis:30px}}

/* ── La apertura de la portada: la entradilla como entrada de revista y el sumario de las tres propiedades ── */
.apertura{padding:56px 0 0}
.apertura-rejilla{display:grid;grid-template-columns:minmax(0,1fr);gap:36px}
.apertura .entradilla{font:500 clamp(20px,.5vw + 18px,23px)/1.56 "Newsreader",Georgia,serif;color:var(--tinta);margin:0;max-width:640px}
.apertura .entradilla::first-letter{float:left;font:600 clamp(64px,4vw + 30px,88px)/.8 "Newsreader",Georgia,serif;color:var(--acento);margin:8px 4px 0 0}
@supports (initial-letter:3) or (-webkit-initial-letter:3){.apertura .entradilla::first-letter{float:none;font:600 1em/1 "Newsreader",Georgia,serif;-webkit-initial-letter:3;initial-letter:3;margin:0 .06em 0 0}}
.sumario ol{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.sumario li{margin:0}
.sumario a{display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;align-items:center;height:100%;min-height:128px;padding:8px 16px 8px 8px;background:var(--papel);border:1px solid var(--linea);border-radius:16px;color:var(--tinta);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.sumario a:hover{border-color:var(--acento);box-shadow:var(--sombra);transform:translateY(-2px)}
.sumario a[aria-current]{border-color:var(--acento);box-shadow:inset 0 0 0 1px var(--acento)}
.sum-foto{position:relative;display:block;overflow:hidden;border-radius:10px;background:var(--acento_suave)}
.sum-foto img{width:112px;height:112px;object-fit:cover}
/* «Estás aquí» va sobre la foto, como una etiqueta: no mueve el título ni cambia la altura de la tarjeta */
.sum-foto .trio-aqui{position:absolute;left:6px;right:6px;bottom:6px;text-align:center;font-size:15px;font-weight:700;line-height:1.3;padding:3px 6px;border-radius:999px;background:var(--acento);color:#fff;letter-spacing:0;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.sum-texto{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"num tag" "num tit";column-gap:14px;row-gap:4px;align-items:center;min-width:0}
.sum-num{grid-area:num;align-self:start;font:500 italic 36px/1 "Newsreader",Georgia,serif;color:var(--acento)}
.sum-tag{grid-area:tag;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--acento);line-height:1.3}
.sum-texto b{grid-area:tit;font:600 21px/1.2 "Newsreader",Georgia,serif;overflow-wrap:normal;word-break:normal;hyphens:manual;text-wrap:balance}
@media(max-width:600px){.apertura .entradilla{font-size:21px;line-height:1.55}}
@media(min-width:1100px){
.apertura{padding-top:80px}
.apertura-rejilla{gap:48px}
.apertura .entradilla{max-width:860px;font-size:23.5px;line-height:1.55}
.sumario ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.sumario a{grid-template-columns:minmax(0,1fr);align-items:start;gap:0;padding:0;overflow:hidden;border-radius:18px}
.sum-foto{border-radius:0}
.sum-foto img{width:100%;height:auto;aspect-ratio:3/2;transition:transform .5s ease}
.sumario a:hover .sum-foto img{transform:scale(1.03)}
.sum-foto .trio-aqui{left:14px;top:14px;right:auto;bottom:auto;padding:4px 14px}
.sum-texto{padding:20px 24px 24px;grid-template-areas:"num tag" "num tit";row-gap:4px;column-gap:16px}
.sum-num{align-self:center;font-size:44px}
.sum-texto b{font-size:24px}
}
.guia .apertura+.trio+.envoltura .cuerpo,.guia .apertura+.envoltura .cuerpo{padding-top:60px}

/* ── Apertura de los artículos: texto arriba y la panorámica a todo lo ancho, cortada por la línea de agua ── */
.cabeza.panorama{padding:44px 0 0;background:linear-gradient(180deg,var(--acento_suave) 0%,var(--fondo) 78%)}
.panorama .cabeza-texto{max-width:none}
.panorama h1{max-width:980px;font-size:clamp(32px,2.5vw + 20px,58px)}
.panorama-linea{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.panorama .entradilla{margin:0;max-width:720px}
.panorama-foto{margin:44px 0 0;overflow:hidden}
.panorama-foto img[src*="serie-hidrogeno"]{transform:scale(1.16)}
.panorama-foto img{width:100%;height:clamp(280px,34vw,520px);aspect-ratio:auto;object-fit:cover;background:var(--acento_suave)}
@media(min-width:960px){
.panorama-linea{grid-template-columns:minmax(0,1fr) 310px;gap:64px;align-items:end}
.panorama .firma{padding-left:28px;border-left:1px solid color-mix(in srgb,var(--acento) 30%,var(--linea))}
.panorama .firma img{width:56px;height:56px}
}
@media(max-width:959px){
.cabeza.panorama{display:flex;flex-direction:column;padding:0 0 44px}
.panorama-foto{order:-1;margin:0 0 26px}
.panorama-foto img{height:auto;aspect-ratio:16/9}
}

/* ── Quién escribe: el retrato en arco, entero y nítido, sin estirarlo ── */
@media(min-width:960px){
.cabeza.con-foto.es-autora .cabeza-rejilla{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:88px;align-items:center;min-height:0;position:relative}
.es-autora.con-foto .cabeza-texto{max-width:none;order:1}
.es-autora.con-foto .cabeza-foto{position:relative;top:auto;right:auto;bottom:auto;width:auto;order:2;z-index:1}
.es-autora.con-foto .cabeza-foto::before{content:"";position:absolute;top:44px;left:-44px;width:100%;height:475px;border-radius:200px 200px 22px 22px;background:linear-gradient(160deg,#bfe2ec 0%,#e2f1f5 100%);z-index:-1}
.es-autora.con-foto .retrato-autora figcaption{padding-top:58px}
.es-autora.con-foto .retrato-autora img{height:auto;aspect-ratio:4/5;border-radius:200px 200px 22px 22px;object-position:50% 22%;box-shadow:0 24px 48px rgba(15,42,54,.16)}
.es-autora .retrato-autora figcaption{position:static;max-width:none;padding:16px 4px 0;background:none;border-radius:0}
}

/* ── La tarjeta del encuentro y la banda final, claras, con el mismo botón ── */
.tarjeta-cta{background:var(--acento_suave);color:var(--tinta);border:1px solid color-mix(in srgb,var(--acento) 22%,var(--linea))}
.tarjeta-cta b{color:var(--tinta)}
.tarjeta-cta p{color:var(--tinta)}
.tarjeta-cta .boton{background:var(--boton);color:var(--boton_texto)!important}
.tarjeta-cta::after{opacity:.4}
.cta-cabeza img{border-color:#fff}
.tarjeta-cta :focus-visible{outline-color:var(--acento)}
.banda{background:linear-gradient(180deg,var(--acento_suave) 0%,color-mix(in srgb,var(--acento_suave) 60%,var(--fondo)) 100%);color:var(--tinta)}
.banda .flotacion .linea{stroke:var(--acento);opacity:.6}
.banda h2{color:var(--tinta)}
.banda p{color:var(--tinta)}
.banda .boton{background:var(--boton);color:var(--boton_texto)!important}
.banda-foto{width:120px;height:120px;border-color:#fff;box-shadow:0 8px 24px rgba(15,42,54,.14)}
.banda :focus-visible{outline-color:var(--acento)}

/* ── El pie, oscuro: cierra la página con peso ── */
.pie{background:var(--tinta);color:#c9dbe1;border-top:0}
.pie .marca{color:#fff}
.pie .marca i{color:#9fdcec}
.pie-marca p{color:#fff}
.pie-grupos b{color:#fff}
.pie-grupos a,.pie-legal a{color:#c9dbe1}
.pie-grupos a:hover,.pie-legal a:hover{color:#fff}
.pie-marca,.pie-legal{border-color:rgba(255,255,255,.16)}
.pie :focus-visible{outline-color:#fff}

/* ── Blog: la cabecera, más recogida, para que los artículos suban ── */
.blog .cabeza{padding:40px 0 60px}
@media(min-width:960px){.blog .cabeza{padding:52px 0 72px}.blog h1{font-size:clamp(48px,3vw + 20px,72px);margin-bottom:14px}}

/* ── Blog: abre como las guías, con el lema en cursiva y una banda de agua cortada por la línea de agua ── */
.blog-lema{color:var(--acento)}
.blog .blog-cabeza{padding:44px 0 0}
.blog-cabeza .panorama-foto{margin-top:36px}
.blog-cabeza .panorama-foto img{height:clamp(200px,20vw,300px)}
.blog-cabeza .entradilla{max-width:720px;margin:0}
@media(max-width:959px){.blog .blog-cabeza{padding:0 0 40px}.blog-cabeza .panorama-foto{margin:0 0 24px}.blog-cabeza .panorama-foto img{height:auto;aspect-ratio:21/9}}
@media(max-width:380px){.sumario a{grid-template-columns:92px minmax(0,1fr);gap:12px;padding-right:12px}.sum-foto img{width:92px;height:92px}.sum-texto{column-gap:10px}.sum-num{font-size:28px}.sum-texto b{font-size:20px}.sum-foto .trio-aqui{left:3px;right:3px;bottom:4px;padding:3px 0}}
/* En el móvil y la tableta el título de cada propiedad usa todo el ancho de la tarjeta: el número va en la línea de la etiqueta */
@media(max-width:1099px){.sum-texto{grid-template-areas:"num tag" "tit tit";row-gap:6px;column-gap:10px}.sum-num{align-self:center;font-size:30px}.sum-foto .trio-aqui{text-align:center}}

/* ── Menos cajas de plantilla: filetes de revista para el resumen, el índice, las listas y las preguntas ── */
.resumen{background:none;border:0;border-top:3px solid var(--tinta);border-bottom:1px solid var(--linea);border-radius:0;padding:18px 0 6px;margin:0 0 8px}
.resumen::before{display:none}
.resumen>b{color:var(--tinta)}
.resumen ul{padding-left:1.15em}
.resumen li{font-size:1.04em}
.lateral .indice{background:none;border:0;border-top:3px solid var(--tinta);border-radius:0;padding:16px 0 0}
.articulo ul.tarjetas{gap:0;margin:14px 0 30px}
.articulo ul.tarjetas>li{background:none;border:0;border-top:1px solid var(--linea);border-radius:0;box-shadow:none;padding:20px 0 18px}
.articulo ul.tarjetas>li:last-child{border-bottom:1px solid var(--linea)}
.articulo ul.tarjetas>li::before{left:0;top:-1px;bottom:auto;width:44px;height:3px}
.preguntas details{background:none;border:0;border-top:1px solid var(--linea);border-radius:0;margin:0}
.preguntas details:last-of-type{border-bottom:1px solid var(--linea)}
.preguntas details[open]{border-color:var(--linea)}
.preguntas summary{padding-left:0}
.preguntas details>div{padding:0 0 6px}