:root{--tinta:#2a1f2d;--suave:#65566a;--fondo:#faf6f3;--papel:#ffffff;--linea:#eadfe0;--acento:#8a3b5c;--acento_suave:#f5e8ee;--boton:#8a3b5c;--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:20px;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 12px;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:12px;right:12px;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:1180px){.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:14px;font-weight:700;letter-spacing:.09em;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:14px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--acento);line-height:1.35}
.trio-aqui{display:inline-block;background:var(--acento);color:#fff;font-size:14px;letter-spacing:.02em;text-transform:none;padding:2px 10px;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,720px) 320px;justify-content:space-between;padding-top:52px}}
.articulo{max-width:720px;min-width:0;counter-reset:sec}
@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:700 15px/1 "Source Sans 3",system-ui,sans-serif;letter-spacing:.14em;color:var(--acento);padding:0 0 10px;margin:0 0 16px;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}
/* 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:14px;font-weight:700;letter-spacing:.07em;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:14px;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:block}
.lateral>div{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px;max-height:calc(100vh - 116px);max-height:calc(100dvh - 116px)}
.lateral .indice{display:flex;flex-direction:column;flex:0 1 auto;min-height:170px}
.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 2px 10px;margin:0 -6px 0 -10px}
.lateral .tarjeta-cta{flex:0 0 auto;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:14px;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{display:none}}

/* 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:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--acento);margin:0 0 14px}
.resumen ul{padding-left:1.1em}

/* Llamadas a nota: pegadas a la palabra */
sup.cita{font-size:.7em;line-height:0;margin:0;vertical-align:super}
sup.cita a{text-decoration:none;font-weight:700;padding:0 1px}
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:14px;letter-spacing:.04em;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:14px;font-weight:700;letter-spacing:.07em;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:14px;font-weight:700;letter-spacing:.08em;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 auto}
.sencilla .cuerpo{grid-template-columns:minmax(0,760px);justify-content:center}
.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:14px;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 planbeconomico.es */
/* PLAN B ECONÓMICO · el desvío. Un camino que sigue recto (el plan A, el trabajo de siempre) y otro que se abre y sube
   (el plan B). Ese trazo es la marca, el adorno de los antetítulos, la marca de agua de la tarjeta de la sesión y el
   dibujo de la banda final. Cabeceras de color plano (arena), acabadas en recto; fotos de mujeres reales a sangre;
   serifa ligera y grande para los titulares; tarjetas de esquina corta, de revista, no de aplicación. */
:root{--arena:#f3eae3;--radio:8px;--ramal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 16'%3E%3Cpath d='M1 13h24M7 13c6 0 6-9 13-9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='21.5' cy='4' r='2.6'/%3E%3C/svg%3E")}

/* Titulares: serifa ligera, grande y apretada */
h1{font-weight:500;font-size:clamp(32px,2.4vw + 22px,56px);line-height:1.05;letter-spacing:-.022em}
h2{font-weight:500;letter-spacing:-.015em}
.trio-texto b{text-wrap:balance}
.trio-texto b,.rutas .ruta-tit,.tarjeta-blog h2,.indice b,.autora b,.tarjeta-cta b{font-weight:600}

/* Marca: el desvío y «Plan B / económico» en dos pisos */
.marca{gap:12px}
.marca svg{width:38px;height:38px}
.marca b{display:flex;flex-direction:column;font:600 23px/1 "Newsreader",Georgia,serif;letter-spacing:-.01em}
.marca i{font:italic 500 16px/1.15 "Newsreader",Georgia,serif;letter-spacing:.01em;margin-top:2px}
.menu a[aria-current=page]::after{-webkit-mask:none;mask:none;height:2px;bottom:3px;border-radius:2px}

/* Cabecera en el móvil: marca, botón de la sesión y el menú como icono */
@media(max-width:1180px){
.cabecera .envoltura>.boton{display:inline-flex;margin-left:auto;padding:8px 18px;min-height:44px;font-size:16px}
.menu-movil{margin-left:0}
}
@media(max-width:600px){
.cabecera .envoltura{gap:10px;min-height:66px}
.marca{gap:10px}
.marca svg{width:34px;height:34px}
.marca b{font-size:21px}
.marca i{font-size:15px}
.cabecera .envoltura>.boton{padding:8px 15px;font-size:15.5px}
.menu-movil summary{width:46px;height:46px;min-height:46px;padding:0;justify-content:center;gap:0}
.menu-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}
@media(max-width:359px){.cabecera .envoltura>.boton{display:none}.menu-movil{margin-left:auto}}

/* Cabeza de página: arena plana, acabada en recto */
.cabeza{background:var(--arena);border-bottom:1px solid var(--linea);padding:44px 0 56px}
@media(min-width:960px){
.cabeza{padding:72px 0 84px}
.cabeza.con-foto{padding:0}
.cabeza.con-foto .cabeza-rejilla{min-height:clamp(480px,calc(100vh - 260px),600px);padding-top:56px;padding-bottom:64px}
.con-foto .cabeza-foto{width:46vw}
.con-foto .cabeza-texto{max-width:calc(54vw - (100vw - 100%) / 2 - 64px)}
.cabeza:has(.cabeza-cta) .cabeza-rejilla{min-height:clamp(560px,calc(100vh - 150px),700px)}
}
@media(min-width:1440px){.con-foto .cabeza-texto{max-width:620px}}
@media(min-width:960px){.con-foto h1{font-size:clamp(40px,1.6vw + 26px,52px)}}
.cabeza-foto img{background:var(--linea)}
.antetitulo{font-size:15px;letter-spacing:.12em}
.antetitulo::before{flex:0 0 26px;height:16px;-webkit-mask:var(--ramal) no-repeat center/contain;mask:var(--ramal) no-repeat center/contain}
.cabeza .entradilla{max-width:640px}
.cabeza-cta{margin:4px 0 32px}
.cabeza-cta .boton{font-size:18px;padding:16px 28px;min-height:56px}
.firma img{border-color:var(--arena)}
.retrato-autora figcaption{border-radius:var(--radio)}
@media(max-width:600px){.cabeza{padding:28px 0 40px}.cabeza.con-foto{padding-top:0}.cabeza-cta .boton{width:100%}}

/* Portada: los cuatro caminos */
.trio{padding:72px 0 12px}
.trio-lema{font:italic 500 clamp(26px,1.5vw + 20px,40px)/1.2 "Newsreader",Georgia,serif;max-width:780px;margin:0 0 32px;color:var(--tinta)}
.trio-lista a{border-radius:var(--radio)}
.trio-lista img,.trio-vacio{border-radius:6px}
.trio-tag{font-size:15px;letter-spacing:.1em}
.trio-aqui{font-size:15px}
@media(min-width:760px){
.trio-lista{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.trio-lista img,.trio-vacio{border-radius:0;aspect-ratio:16/10}
.trio-texto{padding:20px 22px 24px}
.trio-texto b{font-size:23px}
}
@media(min-width:1100px){
.trio-lista{grid-template-columns:repeat(4,minmax(0,1fr))}
.trio-lista img,.trio-vacio{aspect-ratio:4/5}
.trio-texto b{font-size:22px}
}
@media(max-width:600px){.trio{padding:48px 0 4px}.trio-lema{font-size:25px;margin-bottom:22px}}

/* El artículo */
.cuerpo{padding-top:56px}
.sec>h2::before{font:italic 500 22px/1 "Newsreader",Georgia,serif;letter-spacing:.02em;border-bottom:0;padding:0 0 0 50px;margin:0 0 14px;background:linear-gradient(var(--acento),var(--acento)) 0 62%/36px 1.5px no-repeat}
.resumen,.indice,.indice-movil,.preguntas details,.autora,.evidencia>div,.articulo ul.tarjetas>li{border-radius:var(--radio)}
.resumen>b{font-size:15px;letter-spacing:.12em}
.indice li::before,.indice-movil li::before{font-size:15px}
.fuentes .tipo{font-size:15px}
.articulo li>.d{display:block}
.articulo li>.d::first-letter{text-transform:uppercase}
.articulo li>strong.t{display:block;font:600 22px/1.25 "Newsreader",Georgia,serif;color:var(--tinta);margin:0 0 8px}
.articulo ul.tarjetas>li>strong:first-child:not(.t){display:inline;font:inherit;font-weight:700;margin:0}
.sec>ol>li>strong.t{font-size:21px;margin:4px 0 6px}
.sec>ol>li::before{background:var(--acento);color:#fff;font-weight:500}

/* Tablas: sin partir palabras; en el móvil, cada fila es una ficha */
.articulo table{border-radius:var(--radio)}
.articulo th,.articulo td{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word}
.articulo thead th{background:var(--arena)}
@media(max-width:640px){
.articulo table.apilable{background:none;box-shadow:none;border-radius:0;overflow:visible;font-size:17px}
table.apilable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
table.apilable,table.apilable tbody,table.apilable tr,table.apilable td{display:block;width:100%}
table.apilable tr{background:var(--papel);border:1px solid var(--linea);border-left:4px solid var(--acento);border-radius:var(--radio);padding:4px 18px 10px;margin:0 0 12px}
table.apilable td{border:0;padding:8px 0}
table.apilable td::before{content:attr(data-label);display:block;font-size:15px;font-weight:700;letter-spacing:.04em;color:var(--acento);margin:0 0 2px}
table.apilable td:first-child{font:600 21px/1.3 "Newsreader",Georgia,serif;padding:12px 0 10px;border-bottom:1px solid var(--linea);margin:0 0 4px}
table.apilable td:first-child::before{content:none}
}
@media(min-width:360px) and (max-width:640px){
table.apilable td:not(:first-child){display:grid;grid-template-columns:minmax(0,8.4em) minmax(0,1fr);gap:4px 14px;align-items:baseline}
table.apilable td:not(:first-child)::before{margin:0}
}

/* Columna lateral: el índice entero arriba; la tarjeta de la sesión es la que acompaña al bajar */
@media(min-width:1100px){
.lateral>div{position:static;max-height:none;height:100%}
.lateral .indice{display:block;min-height:0}
.lateral .indice ol{overflow:visible;max-height:none;padding:0;margin:0}
.lateral .tarjeta-cta{position:sticky;top:96px}
}

/* Tarjeta de la sesión: limpia, sin adornos que rocen el texto */
.tarjeta-cta{border-radius:var(--radio)}
.tarjeta-cta::after{display:none}
.tarjeta-cta>*{position:relative;z-index:1}

/* Sigue leyendo: banda blanca de lado a lado */
.rutas{background:var(--papel);border-top:1px solid var(--linea);margin-top:64px;padding:64px 0 80px}
.rutas .envoltura::before{display:none}
.rutas a{border-radius:var(--radio);background:var(--fondo)}
.ruta-tag{font-size:15px;letter-spacing:.1em}
.guia:has(.rutas)+.banda{margin-top:0}

/* Banda final: ciruela casi negro y los caminos que se abren */
.banda{padding:96px 0 88px;margin-top:80px}
.banda .ramales{position:absolute;right:0;top:0;height:100%;width:min(30%,440px);color:#c98aa6;opacity:.34;pointer-events:none}
.banda .envoltura{z-index:1}
.banda h2{font-weight:500}
@media(max-width:859px){.banda .ramales{width:62%;height:150px;opacity:.3}}
@media(max-width:520px){.banda{padding:64px 0 56px}}

/* Blog: rejilla de dos, la última nunca sola */
.tb-cat{font-size:15px;letter-spacing:.1em}
.tarjeta-blog{border-radius:var(--radio)}
@media(min-width:860px){
.blog-rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;padding-top:56px}
.tarjeta-blog:not(.destacada):last-child:nth-child(even){grid-column:1/-1;flex-direction:row-reverse}
.tarjeta-blog:not(.destacada):last-child:nth-child(even) img{flex:0 0 46%;width:46%;aspect-ratio:auto;height:auto;min-height:340px}
.tarjeta-blog:not(.destacada):last-child:nth-child(even) .tb-texto{justify-content:center;padding:40px 44px}
.tarjeta-blog:not(.destacada):last-child:nth-child(even) h2{font-size:clamp(26px,2.4vw,32px)}
}

/* Pie */
.pie-grupos b{font-size:15px}


/* ── Ronda 2 ─────────────────────────────────────────────────────────────────────────────────────────────── */

/* Gris de los textos secundarios, más oscuro: se lee a los 60 años */
:root{--gris:#4f4253}

/* Titulares de sección con más cuerpo (el h1 grande se queda ligero) */
h2,h3,.banda h2{font-weight:600}
.articulo h3{font-size:24px}

/* Índice lateral y tablas a 17 px */
.indice ol,.indice-movil ol{font-size:18px}
.lateral .indice ol{font-size:17.5px;line-height:1.38}
.indice b{font-size:22px}
@media(min-width:641px){.articulo table{font-size:18px}.articulo th,.articulo td{padding:14px 16px}}

/* Portada inmersiva: la foto ocupa toda la cabecera y el titular va encima, sobre un velo ciruela */
@media(min-width:960px){
.cabeza.inmersiva{background:var(--tinta);border-bottom:0}
.cabeza.inmersiva .cabeza-rejilla{min-height:clamp(600px,calc(100vh - 72px),760px);padding-top:72px;padding-bottom:84px}
.inmersiva .cabeza-foto{position:absolute;inset:0;width:auto;z-index:0}
.inmersiva .cabeza-foto img{width:100%;height:100%;object-fit:cover;object-position:72% 45%}
.inmersiva .cabeza-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(36,23,38,.93) 0%,rgba(36,23,38,.86) 33%,rgba(36,23,38,.5) 54%,rgba(36,23,38,0) 74%)}
.inmersiva .cabeza-foto::before{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--acento);z-index:2}
.inmersiva .cabeza-texto{max-width:620px;z-index:1}
.inmersiva h1{color:#fff}
.inmersiva .entradilla{color:rgba(255,255,255,.93)}
.inmersiva .antetitulo{color:#f2c9d9}
.inmersiva .cabeza-cta .boton{background:#fff;color:var(--tinta)!important}
.inmersiva .firma p,.inmersiva .firma .por,.inmersiva .firma .cred,.inmersiva .firma .sep{color:rgba(255,255,255,.9)}
.inmersiva .firma .meta a{color:#fff}
.inmersiva .firma img{border-color:rgba(255,255,255,.85)}
.inmersiva :focus-visible{outline-color:#fff}
}
@media(max-width:959px){
.inmersiva .cabeza-foto img{aspect-ratio:4/3;object-position:84% 40%}
}

/* Páginas interiores: el filete ciruela entre el texto y la foto */
@media(min-width:960px){
.con-foto:not(.inmersiva) .cabeza-foto::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--acento);z-index:2}
}

/* En el móvil, la foto de cabecera guarda las caras: recorte desde arriba */
@media(max-width:959px){
.con-foto:not(.inmersiva) .cabeza-foto img{object-position:50% 28%}
}

/* La banda final, más discreta: los caminos son un adorno, no una gráfica */
.banda .ramales{opacity:.2}

/* ── Ronda 3 ─────────────────────────────────────────────────────────────────────────────────────────────── */
/* Portada (ordenador): velo más corto y que se abre antes; la foto ya trae la sombra a la izquierda */
@media(min-width:960px){
.inmersiva .cabeza-foto::after{background:linear-gradient(90deg,rgba(36,23,38,.9) 0%,rgba(36,23,38,.78) 30%,rgba(36,23,38,.4) 47%,rgba(36,23,38,0) 62%)}
.inmersiva .cabeza-foto img{object-position:78% 40%}
}

/* Portada (móvil): también inmersiva. Foto de 300 px con el titular encima; entradilla, botón y firma sobre ciruela */
@media(max-width:959px){
.cabeza.inmersiva{position:relative;background:var(--tinta);border-bottom:0;padding:0 0 40px}
.inmersiva .cabeza-rejilla{display:block;position:static}
.inmersiva .cabeza-foto{position:absolute;top:0;left:0;right:0;height:300px;margin:0;z-index:0}
.inmersiva .cabeza-foto img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:82% 30%;transform:none}
.inmersiva .cabeza-foto::before{display:none}
.inmersiva .cabeza-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,23,38,0) 30%,rgba(36,23,38,.62) 58%,rgba(36,23,38,.94) 84%,var(--tinta) 100%)}
.inmersiva .cabeza-texto{position:relative;z-index:1;padding-top:188px}
.inmersiva h1{color:#fff;text-shadow:0 1px 18px rgba(36,23,38,.55)}
.inmersiva .antetitulo{color:#f2c9d9}
.inmersiva .entradilla{color:rgba(255,255,255,.93);font-size:18px;line-height:1.5;margin-bottom:22px}
.inmersiva .cabeza-cta{margin:0 0 26px}
.inmersiva .cabeza-cta .boton{background:#fff;color:var(--tinta)!important}
.inmersiva .firma p,.inmersiva .firma .por,.inmersiva .firma .cred,.inmersiva .firma .sep{color:rgba(255,255,255,.9)}
.inmersiva .firma .meta a{color:#fff}
.inmersiva .firma img{border-color:rgba(255,255,255,.85)}
.inmersiva :focus-visible{outline-color:#fff}
}
@media(max-width:600px){.inmersiva .cabeza-foto{height:280px}.inmersiva .cabeza-texto{padding-top:172px}}

/* El filete, solo para «En 30 segundos». Las listas de «término + explicación» son una relación numerada en serif */
.articulo ul.tarjetas{counter-reset:tj;gap:0;margin:18px 0 36px;border-top:1px solid var(--linea)}
.articulo ul.tarjetas>li{counter-increment:tj;background:none;border:0;border-bottom:1px solid var(--linea);border-radius:0;box-shadow:none;padding:24px 0 22px 68px}
.articulo ul.tarjetas>li::before{content:counter(tj);content:counter(tj)/"";left:0;top:20px;bottom:auto;width:44px;height:auto;background:none;font:italic 500 42px/1 "Newsreader",Georgia,serif;color:var(--acento);text-align:center}
@media(max-width:600px){.articulo ul.tarjetas>li{padding-left:50px}.articulo ul.tarjetas>li::before{width:32px;font-size:34px;top:22px}}

/* Los cuatro caminos: foto y título, sin caja */
.trio-lista a{background:none;border:0;border-radius:0;box-shadow:none;padding:0}
.trio-lista a:hover,.trio-lista a[aria-current]{transform:none;box-shadow:none;border:0}
.trio-lista a:hover b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@media(max-width:759px){.trio-lista{gap:0}.trio-lista li{padding:14px 0;border-top:1px solid var(--linea)}.trio-lista li:last-child{border-bottom:1px solid var(--linea)}.trio-lista a{min-height:72px}}
@media(min-width:760px){.trio-lista img,.trio-vacio{border-radius:var(--radio)}.trio-texto{padding:18px 2px 0}}

/* Cajas tintadas en lugar de tarjetas con borde */
.lateral .indice{background:var(--arena);border-color:transparent}
.autora{background:var(--arena);border-color:transparent}
.rutas a{background:var(--arena);border-color:transparent}
.rutas a:hover{border-color:var(--acento)}
@media(max-width:640px){table.apilable tr{border-left:1px solid var(--linea)}}

/* Preguntas: franja de lado a lado (cambia el ritmo de la página) y lista con filetes finos, sin cajas */
.preguntas{margin-top:72px;padding:8px 0 36px;box-shadow:0 0 0 100vmax var(--arena);clip-path:inset(-44px -100vmax 0 -100vmax);background:var(--arena)}
.preguntas h2{margin-top:28px}
.preguntas details{background:none;border:0;border-bottom:1px solid color-mix(in srgb,var(--acento) 22%,var(--linea));border-radius:0;margin:0}
.preguntas details[open]{border-color:color-mix(in srgb,var(--acento) 22%,var(--linea))}
.preguntas summary{padding-left:0}
.preguntas details>div{padding:0 0 8px}
.preguntas+.autora{margin-top:56px}

/* Blog: cabecera con foto y el título grande en cursiva, sin vacío */
@media(min-width:960px){
.blog .cabeza.con-foto .cabeza-rejilla{min-height:440px}
.blog .cabeza h1{font-size:clamp(72px,5.4vw,104px);font-style:italic;font-weight:500;letter-spacing:-.03em;margin-bottom:18px}
}
.preguntas+.autora{background:var(--papel);border-color:transparent}


/* ── Ronda 4 ─────────────────────────────────────────────────────────────────────────────────────────────── */

/* Portada en el móvil: foto limpia arriba y texto oscuro sobre arena, como las páginas interiores.
   La firma sube justo debajo del titular (la confianza en la primera pantalla) y el botón, relleno, entra en ella. */
@media(max-width:959px){
.cabeza.inmersiva{background:var(--arena);border-bottom:1px solid var(--linea);padding:0 0 34px}
.inmersiva .cabeza-rejilla{display:block;position:static}
.inmersiva .cabeza-foto{position:relative;top:auto;left:auto;right:auto;height:210px;margin:0 calc(-1 * var(--pad)) 0;overflow:hidden;z-index:0}
.inmersiva .cabeza-foto img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:88% 30%;transform:scale(1.42);transform-origin:90% 36%}
.inmersiva .cabeza-foto::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--acento);inset:auto 0 0 0}
.inmersiva .cabeza-texto{position:relative;z-index:1;padding-top:22px;display:flex;flex-direction:column}
.inmersiva .antetitulo{order:0;color:var(--acento);margin-bottom:10px}
.inmersiva h1{order:1;color:var(--tinta);text-shadow:none;margin-bottom:16px}
.inmersiva .firma{order:2;margin:0 0 18px}
.inmersiva .entradilla{order:3;color:var(--tinta);font-size:18px;line-height:1.5;margin-bottom:22px}
.inmersiva .cabeza-cta{order:4;margin:0}
.inmersiva .cabeza-cta .boton{background:var(--boton);color:var(--boton_texto)!important}
.inmersiva .firma img{width:48px;height:48px;border-color:var(--papel)}
.inmersiva .firma .cred{display:none}
.inmersiva .firma p,.inmersiva .firma .por,.inmersiva .firma .sep{color:var(--gris)}
.inmersiva .firma .por{color:var(--tinta)}
.inmersiva .firma .meta a{color:var(--acento)}
.inmersiva :focus-visible{outline-color:var(--acento)}
}
@media(min-width:600px) and (max-width:959px){.inmersiva .cabeza-foto{height:340px}}
@media(max-width:600px){.inmersiva .cabeza-foto{height:210px}.inmersiva .cabeza-texto{padding-top:22px}}

/* Portada: después de los cuatro temas, una banda a sangre con el lema sobre el camino que se bifurca (el desvío) */
.trio{overflow-x:clip;padding-bottom:0}
.trio .envoltura{display:flex;flex-direction:column}
.trio-lista{order:1}
.trio-lema{order:2;position:relative;margin:72px calc(50% - 50vw) 0;max-width:none;min-height:clamp(340px,32vw,470px);display:flex;align-items:center;justify-content:center;text-align:center;padding:64px max(var(--pad),calc(50vw - 500px));color:#fff;font-size:clamp(30px,2.4vw + 16px,54px);line-height:1.18;text-wrap:balance;background:radial-gradient(ellipse 70% 60% at 50% 55%,rgba(36,23,38,.5),rgba(36,23,38,.28)),url(/recursos/pb-desvio-olivos.webp) center 62%/cover var(--tinta);text-shadow:0 2px 22px rgba(20,12,22,.45)}
.trio-lema::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--acento)}
@media(max-width:759px){
.trio{padding-top:40px}
.trio-lema{margin-top:48px;min-height:300px;padding:48px var(--pad);font-size:28px;background-image:linear-gradient(rgba(36,23,38,.4),rgba(36,23,38,.52)),url(/recursos/pb-desvio-olivos-m.webp)}
}
.trio+.envoltura .cuerpo{padding-top:64px}

/* La tabla de opciones: de hoja de cálculo a tabla de revista (opción en serif, filas con aire, sin caja) */
@media(min-width:641px){
.articulo table{background:none;box-shadow:none;border-radius:0;border-top:2px solid var(--tinta);border-bottom:1px solid var(--linea)}
.articulo thead th{background:none;font-size:15px;letter-spacing:.07em;text-transform:uppercase;color:var(--acento);border-bottom:1px solid var(--tinta);padding:14px 16px 12px}
.articulo tbody td{padding:18px 16px}
.articulo tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--arena) 60%,transparent)}
.articulo tbody td:first-child{font:600 19px/1.3 "Newsreader",Georgia,serif;color:var(--tinta)}
}

/* «En 30 segundos» sin borde: el filete basta */
.resumen{border-color:transparent;box-shadow:0 1px 2px rgba(42,31,45,.05)}

/* Menú y tarjeta de la sesión más grandes */
.menu a{font-size:17px;padding:10px 10px}
.lateral .tarjeta-cta p{font-size:17.5px;line-height:1.6}
.lateral .tarjeta-cta b{font-size:21.5px}

/* Blog: «Blog» en redonda, como el resto de titulares */
@media(min-width:960px){.blog .cabeza h1{font-style:normal;font-weight:500;font-size:clamp(60px,4.6vw,84px);letter-spacing:-.025em}}