/* noon Clinic · v2 editorial — oscuro cálido, imagen a pantalla completa, texto mínimo.
   Paleta del brandbook: Ivory · Bone · Taupe · Espresso · Burgundy · Champagne (solo detalle). */
:root {
  --negro: #120d0a; --cafe: #1b1411; --ivory: #F2EFE8; --bone: #D8D0C3; --taupe: #A69A8B; --espresso: #28231F; --burgundy: #6D2835; --champagne: #BDA47B;
  --txt: var(--ivory); --tenue: rgba(242, 239, 232, .62); --linea: rgba(242, 239, 232, .14);
  --display: Futura, "Futura PT", "Jost", "Century Gothic", sans-serif;
  --texto: "Avenir Next", "Nunito Sans", Avenir, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --lado: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--negro); color: var(--txt); font: 300 16.5px/1.7 var(--texto); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 300; }
::selection { background: var(--champagne); color: var(--negro); }
:focus-visible { outline: 1px solid var(--champagne); outline-offset: 4px; }

/* Ceja: la "Noon line" — un eje fino que ordena la jerarquía */
.ceja { font: 400 11px/1.4 var(--display); letter-spacing: .34em; text-transform: uppercase; color: var(--tenue); margin: 0 0 26px; display: flex; align-items: center; gap: 16px; }
.ceja::before { content: ""; width: 36px; height: 1px; background: currentColor; opacity: .7; flex: none; }
.sub { color: var(--tenue); font-size: clamp(16px, 1.3vw, 18.5px); max-width: 560px; line-height: 1.65; }

/* Botones: finos, en mayúscula espaciada */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 34px; border: 1px solid currentColor; font: 400 11.5px/1 var(--display); letter-spacing: .26em; text-transform: uppercase; text-decoration: none; background: transparent; color: inherit; cursor: pointer; transition: background .4s var(--ease), color .4s var(--ease), border-color .4s; }
.boton:hover { background: var(--ivory); color: var(--negro); border-color: var(--ivory); }
.boton.lleno { background: var(--ivory); color: var(--negro); border-color: var(--ivory); }
.boton.lleno:hover { background: transparent; color: var(--ivory); }
.boton.champan { color: var(--champagne); border-color: var(--champagne); }
.boton.champan:hover { background: var(--champagne); color: var(--negro); }
.enlace { display: inline-block; margin-top: 28px; font: 400 11.5px/1 var(--display); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; padding-bottom: 8px; border-bottom: 1px solid currentColor; }
.enlace::after { content: " →"; }

/* ---------- cabecera ---------- */
.cab { position: fixed; inset: 0 0 auto; z-index: 60; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 22px var(--lado); transition: background .5s, padding .5s, backdrop-filter .5s; }
.cab.solida { background: rgba(18, 13, 10, .82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding-block: 14px; }
.cab .logo img { height: 30px; width: auto; }
.menu-btn { justify-self: start; display: flex; align-items: center; gap: 14px; background: none; border: 0; color: var(--ivory); cursor: pointer; padding: 10px 0; font: 400 11px var(--display); letter-spacing: .3em; text-transform: uppercase; }
.rayas { width: 26px; height: 7px; border-block: 1px solid currentColor; transition: transform .4s var(--ease); }
.menu-abierto .rayas { transform: scaleX(.6); }
.agendar { justify-self: end; font: 400 11px var(--display); letter-spacing: .3em; text-transform: uppercase; text-decoration: none; padding: 10px 0; border-bottom: 1px solid transparent; transition: border-color .3s; }
.agendar:hover { border-color: currentColor; }

/* menú a pantalla completa */
.menu { position: fixed; inset: 0; z-index: 55; background: var(--negro) url(noon/seda-oscura.jpg) center / cover; overflow-y: auto; }
.menu::before { content: ""; position: fixed; inset: 0; background: rgba(18, 13, 10, .78); }
.menu[hidden] { display: none; }
.menu-in { position: relative; min-height: 100%; display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: center; padding: 130px var(--lado) 60px; }
.menu nav { display: grid; gap: 4px; }
.menu nav a { text-decoration: none; color: var(--tenue); font: 300 18px/1.9 var(--texto); transition: color .3s; }
.menu nav.grande a { font: 300 clamp(30px, 4.4vw, 58px)/1.25 var(--display); color: var(--ivory); letter-spacing: -.005em; }
.menu nav a:hover { color: var(--champagne); }
.menu .boton { margin-top: 36px; }
.menu-abierto { overflow: hidden; }

/* ---------- hero ---------- */
.hero { position: relative; display: flex; align-items: flex-end; padding: 0 var(--lado) clamp(56px, 9vh, 110px); background: var(--negro) center / cover no-repeat; overflow: hidden; isolation: isolate; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 13, 10, .45) 0%, rgba(18, 13, 10, 0) 30%, rgba(18, 13, 10, .15) 55%, rgba(18, 13, 10, .72) 100%); }
.hero.completo { min-height: 100svh; }
.hero.alto { min-height: 88svh; }
.hero.medio { min-height: 72svh; }
.hero-in { max-width: 1100px; }
.hero h1 { font-size: clamp(44px, 7.4vw, 112px); line-height: 1.02; letter-spacing: -.01em; }
.hero .sub { margin-top: 26px; color: rgba(242, 239, 232, .78); }
.hero.sobre-claro { color: var(--espresso); --tenue: rgba(40, 35, 31, .66); }
.hero.sobre-claro::after { background: linear-gradient(180deg, rgba(18, 13, 10, .38) 0%, rgba(18, 13, 10, 0) 22%, rgba(242, 239, 232, 0) 55%, rgba(242, 239, 232, .35) 100%); }
.hero.sobre-claro .sub { color: rgba(40, 35, 31, .75); }
/* portada: logo centrado sobre la seda, como los referentes */
.portada { align-items: center; justify-content: center; text-align: center; padding-bottom: 0; }
.portada::after { background: radial-gradient(ellipse at center, rgba(18, 13, 10, .35), rgba(18, 13, 10, .1) 60%), linear-gradient(180deg, rgba(18, 13, 10, .5), transparent 25%, transparent 75%, rgba(18, 13, 10, .6)); }
.portada .hero-in { display: flex; flex-direction: column; align-items: center; }
.logo-hero { width: min(560px, 74vw); height: auto; margin-bottom: 42px; }
.portada .ceja { justify-content: center; color: var(--ivory); margin-bottom: 18px; }
.portada .ceja::before { display: none; }
.portada .sub { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; max-width: none; margin: 0; }
.bajar { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); font: 400 10.5px var(--display); letter-spacing: .34em; text-transform: uppercase; text-decoration: none; color: rgba(242, 239, 232, .7); padding-bottom: 46px; }
.bajar::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 34px; background: currentColor; animation: caer 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes caer { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- frase grande ---------- */
.frase { padding: clamp(110px, 16vw, 230px) var(--lado); }
.frase .caja { max-width: 1180px; }
.frase .grande { font: 300 clamp(32px, 4.6vw, 70px)/1.14 var(--display); letter-spacing: -.01em; margin: 0; }
.frase .sub { margin-top: 34px; }

/* ---------- secciones ---------- */
.sec { padding: clamp(90px, 12vw, 170px) var(--lado); }
.sec-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 120px); max-width: 1400px; margin: 0 auto; border-top: 1px solid var(--linea); padding-top: 40px; }
.sec.sin-borde .sec-in, .sec .sec-in.solo { border-top: 0; padding-top: 0; }
.sec.sin-borde .sec-in { grid-template-columns: 1fr; gap: 50px; }
.sec-in.solo { display: block; max-width: 900px; }
.sec-cab h2 { font-size: clamp(32px, 3.8vw, 54px); line-height: 1.1; letter-spacing: -.01em; }
.sec-cab .sub { margin-top: 24px; }
.sec-cab { align-self: start; position: sticky; top: 120px; }
.sin-borde .sec-cab { position: static; }
.pista { color: var(--tenue); font-size: 14.5px; margin-top: 26px; max-width: 560px; }

/* lista de líneas finas */
.lineas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.lineas li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px 40px; padding: 22px 0; border-bottom: 1px solid var(--linea); align-items: baseline; }
.lineas li:not(:has(span)) { grid-template-columns: 1fr; }
.lineas b { font: 300 clamp(18px, 1.6vw, 22px)/1.35 var(--display); }
.lineas span { color: var(--tenue); font-size: 15.5px; line-height: 1.6; }
.lineas.num li { grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1.3fr); }
.lineas.num li:not(:has(span:not(.n))) { grid-template-columns: 54px 1fr; }
.lineas .n { font: 400 11px var(--display); letter-spacing: .2em; color: var(--champagne); }
.lineas .enlace { margin: 10px 0 0; display: table; font-size: 10.5px; }

/* pasos I · II · III */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--linea); }
.pasos li { padding: 36px 32px 10px 0; display: grid; gap: 14px; align-content: start; }
.pasos li + li { padding-left: 32px; border-left: 1px solid var(--linea); }
.pasos .n { font: 300 44px/1 var(--display); color: var(--champagne); }
.pasos b { font: 300 22px/1.3 var(--display); }
.pasos span:last-child { color: var(--tenue); font-size: 15.5px; }

/* línea de tiempo */
.tiempo { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); counter-reset: t; }
.tiempo li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 8px 40px; padding: 24px 0; border-bottom: 1px solid var(--linea); }
.tiempo b { font: 300 20px/1.35 var(--display); }
.tiempo span { color: var(--tenue); font-size: 15.5px; }
.tiempo.num li { grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1.6fr); }
.tiempo.num li::before { counter-increment: t; content: counter(t, decimal-leading-zero); font: 400 11px/2.4 var(--display); letter-spacing: .2em; color: var(--champagne); }

/* imagen + texto */
.dividir { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 92svh; }
.dividir.inv figure { order: 2; }
.dividir figure { margin: 0; overflow: hidden; }
.dividir figure img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.8s var(--ease); }
.dividir figure.on img { transform: scale(1); }
.dividir .texto { padding: clamp(60px, 9vw, 140px) var(--lado); align-self: center; max-width: 720px; }
.dividir h2 { font-size: clamp(34px, 4vw, 58px); line-height: 1.08; margin-bottom: 26px; }
.dividir .texto > p:not(.ceja):not(.sub):not(.pista) { color: var(--tenue); }
.dividir .lineas { margin-top: 30px; }

/* foto a pantalla completa con frase */
.foto-frase { min-height: 96svh; display: flex; align-items: center; padding: 0 var(--lado); background: center / cover no-repeat; position: relative; isolation: isolate; }
.foto-frase::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18, 13, 10, .82), rgba(18, 13, 10, .35) 60%, rgba(18, 13, 10, .15)); }
.foto-frase .grande { font: 300 clamp(34px, 5vw, 76px)/1.1 var(--display); max-width: 900px; margin-bottom: 44px; }

/* procedimientos: tarjetas de imagen */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
.tile { position: relative; display: block; aspect-ratio: 4 / 5; max-height: 86svh; width: 100%; overflow: hidden; text-decoration: none; isolation: isolate; }
.tile-img { position: absolute; inset: 0; z-index: -2; background-position: center; background-size: cover; transition: transform 1.6s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgba(18, 13, 10, .7)); }
.tile.sobre-claro::after { background: linear-gradient(180deg, transparent 40%, rgba(18, 13, 10, .62)); }
.tile:hover .tile-img { transform: scale(1.05); }
.tile-txt { position: absolute; left: clamp(24px, 3vw, 44px); right: clamp(24px, 3vw, 44px); bottom: clamp(26px, 3vw, 44px); display: grid; gap: 10px; }
.tile .ceja { margin: 0; color: rgba(242, 239, 232, .7); }
.tile .nom { font: 300 clamp(30px, 3.4vw, 50px)/1.08 var(--display); }
.tile .desde { font-size: 14px; color: rgba(242, 239, 232, .75); }
.tile .ir { margin-top: 12px; justify-self: start; font: 400 10.5px var(--display); letter-spacing: .28em; text-transform: uppercase; padding-bottom: 7px; border-bottom: 1px solid rgba(242, 239, 232, .5); transition: border-color .3s; }
.tile:hover .ir { border-color: var(--ivory); }

/* datos del procedimiento */
.datos { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--linea); }
.datos div { padding: 34px var(--lado) 38px; display: grid; gap: 4px; }
.datos div + div { border-left: 1px solid var(--linea); padding-left: 32px; }
.datos .ceja { margin: 0 0 8px; font-size: 10px; }
.datos .ceja::before { display: none; }
.datos b { font: 300 clamp(20px, 1.9vw, 27px)/1.2 var(--display); }
.datos div:last-child b { color: var(--champagne); }

/* sección clara (marfil) para lectura larga */
.marfil { background: var(--ivory); color: var(--espresso); --txt: var(--espresso); --tenue: rgba(40, 35, 31, .66); --linea: rgba(40, 35, 31, .16); }
.marfil .boton.champan { color: #8a7040; border-color: #b39a68; }
.marfil .boton.champan:hover { background: #b39a68; color: var(--ivory); }

/* preguntas */
.preguntas { border-top: 1px solid var(--linea); }
.preg { border-bottom: 1px solid var(--linea); }
.preg summary { list-style: none; cursor: pointer; padding: 24px 50px 24px 0; position: relative; font: 300 clamp(17px, 1.5vw, 20px)/1.45 var(--display); }
.preg summary::-webkit-details-marker { display: none; }
.preg summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 13px; height: 13px; background: linear-gradient(currentColor, currentColor) center / 13px 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 13px no-repeat; transition: transform .4s var(--ease); }
.preg[open] summary::after { transform: rotate(45deg); }
.resp p { color: var(--tenue); font-size: 16px; max-width: 680px; padding-bottom: 12px; }
.plegable { margin-top: 30px; }
.plegable summary { cursor: pointer; list-style: none; font: 400 11px var(--display); letter-spacing: .26em; text-transform: uppercase; color: var(--tenue); padding: 10px 0; }
.plegable summary::after { content: "  +"; }
.plegable[open] summary::after { content: "  –"; }
.plegable summary::-webkit-details-marker { display: none; }
.plegable .lineas { margin-top: 14px; }
.buscador { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--linea); padding: 16px 0; font: 300 22px var(--display); color: inherit; outline: none; }
.buscador::placeholder { color: var(--tenue); }
.buscador:focus { border-color: currentColor; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 40px; }
.filtro { background: none; border: 0; padding: 8px 0; cursor: pointer; font: 400 11px var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--tenue); border-bottom: 1px solid transparent; }
.filtro.on { color: var(--txt); border-color: currentColor; }
.vacio { color: var(--tenue); margin-top: 30px; }

/* tabla comparativa */
.tabla-caja { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 14.5px; }
th, td { text-align: left; padding: 18px 14px; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { font: 400 11px var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--tenue); }
th a { text-decoration: none; }
td:first-child { color: var(--tenue); }
tr.total td { font: 300 19px var(--display); color: var(--champagne); border-bottom: 0; }
tr.total td:first-child { font: 400 11px var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--tenue); }

/* aviso de términos: champagne, discreto pero visible */
.nota-tc { margin-top: 44px; padding: 26px 0 0; border-top: 1px solid rgba(189, 164, 123, .5); display: grid; gap: 14px; max-width: 640px; }
.nota-tc p { margin: 0; font-size: 14.5px; color: var(--tenue); }
.nota-tc a { justify-self: start; font: 400 11px var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--champagne); text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid var(--champagne); }
.marfil .nota-tc a, .sobre-claro .nota-tc a { color: #8a7040; border-color: #b39a68; }

/* cierre */
.cierre { min-height: 90svh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 120px var(--lado); background: var(--negro) center / cover; position: relative; isolation: isolate; }
.cierre::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(18, 13, 10, .35); }
.cierre.sobre-claro { color: var(--espresso); --tenue: rgba(40, 35, 31, .7); }
.cierre.sobre-claro::after { background: rgba(242, 239, 232, .18); }
.cierre .caja { max-width: 760px; display: flex; flex-direction: column; align-items: center; }
.cierre .ceja { justify-content: center; }
.cierre .ceja::before { display: none; }
.cierre h2 { font-size: clamp(42px, 6.4vw, 96px); line-height: 1.02; }
.cierre .sub { margin: 26px auto 0; }
.botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 44px; }
.cierre.sobre-claro .boton.lleno { background: var(--espresso); border-color: var(--espresso); color: var(--ivory); }
.cierre.sobre-claro .boton.lleno:hover { background: transparent; color: var(--espresso); }
.cierre.sobre-claro .boton:hover { background: var(--espresso); color: var(--ivory); border-color: var(--espresso); }
.cierre .nota-tc { text-align: left; margin-inline: auto; }

/* valoración */
.valoracion { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 8vw, 130px); padding: clamp(90px, 12vw, 160px) var(--lado); max-width: 1400px; margin: 0 auto; }
.valoracion .precio { font: 300 clamp(48px, 6vw, 84px)/1 var(--display); margin: 0 0 44px; }
.form { display: grid; gap: 26px; align-content: start; }
.form h2 { font-size: clamp(34px, 3.6vw, 50px); }
.form .sub { margin: -8px 0 6px; }
.form label { display: grid; gap: 8px; font: 400 10.5px var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--tenue); }
.form input, .form select { background: transparent; border: 0; border-bottom: 1px solid var(--linea); padding: 12px 0; font: 300 19px var(--texto); color: var(--ivory); outline: none; border-radius: 0; letter-spacing: 0; text-transform: none; }
.form select option { color: #111; }
.form input:focus, .form select:focus { border-color: var(--ivory); }
.form .boton { justify-self: start; margin-top: 8px; }
.legal { font-size: 12.5px; color: var(--tenue); }
.legal a { color: var(--champagne); }

/* términos */
.terminos h3 { font: 300 clamp(22px, 2.4vw, 28px)/1.3 var(--display); margin: 60px 0 18px; scroll-margin-top: 110px; }
.termino { scroll-margin-top: 110px; }
.terminos p, .terminos li { font-size: 17px; line-height: 1.75; color: rgba(40, 35, 31, .82); }
.terminos ul { padding-left: 22px; }
.terminos li { margin-bottom: 8px; }
.terminos .clave { margin-top: 60px; padding: 8px 32px 24px; background: #EAE3D6; border-left: 0; }
.resumen-tc { padding: 34px 36px; background: #EAE3D6; margin-bottom: 44px; }
.resumen-tc ul { margin: 0 0 26px; padding-left: 20px; }
.resumen-tc li { font-size: 17.5px; margin-bottom: 8px; }
.indice { display: flex; flex-wrap: wrap; gap: 6px 20px; padding-bottom: 20px; border-bottom: 1px solid var(--linea); }
.indice a { font-size: 13.5px; color: var(--tenue); text-decoration: none; padding: 4px 0; }
.indice a:hover, .indice a.clave { color: var(--espresso); text-decoration: underline; text-underline-offset: 4px; }

/* pie */
.pie { background: var(--negro); border-top: 1px solid var(--linea); padding: clamp(80px, 10vw, 130px) var(--lado) 50px; }
.pie-in { max-width: 1400px; margin: 0 auto; }
.pie .logo img { height: 52px; width: auto; }
.lema { font: 300 clamp(26px, 3vw, 40px) var(--display); margin: 34px 0 60px; color: var(--tenue); }
.pie-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 40px 0 60px; border-top: 1px solid var(--linea); }
.pie-cols a { display: block; text-decoration: none; color: var(--tenue); font-size: 15px; padding: 5px 0; transition: color .3s; }
.pie-cols a:hover { color: var(--ivory); }
.pie .legal { margin-top: 44px; max-width: 700px; }

/* aparición suave al bajar */
.js .rev { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js .rev.on { opacity: 1; transform: none; }
.js .dividir figure.rev { transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rev { opacity: 1; transform: none; transition: none; } .bajar::after { animation: none; } html { scroll-behavior: auto; } }

/* ---------- tablet / celular ---------- */
@media (max-width: 960px) {
  .sec-in { grid-template-columns: 1fr; gap: 40px; }
  .sec-cab { position: static; }
  .dividir { grid-template-columns: 1fr; min-height: 0; }
  .dividir.inv figure { order: 0; }
  .dividir figure { aspect-ratio: 4 / 5; max-height: 80svh; }
  .menu-in { grid-template-columns: 1fr; align-items: start; gap: 44px; }
  .valoracion { grid-template-columns: 1fr; }
  .datos { grid-template-columns: 1fr 1fr; }
  .datos div:nth-child(3) { border-left: 0; padding-left: var(--lado); }
  .datos div:nth-child(n+3) { border-top: 1px solid var(--linea); }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .cab { padding: 16px 20px; }
  .cab .logo img { height: 24px; }
  .menu-btn .txt { display: none; }
  .tiles { grid-template-columns: 1fr; }
  .tile { aspect-ratio: 4 / 5; }
  .pasos { grid-template-columns: 1fr; }
  .pasos li, .pasos li + li { padding: 28px 0; border-left: 0; }
  .pasos li + li { border-top: 1px solid var(--linea); }
  .lineas li, .tiempo li { grid-template-columns: 1fr; gap: 6px; }
  .lineas.num li, .tiempo.num li { grid-template-columns: 40px 1fr; }
  .lineas.num li > span:not(.n), .tiempo.num li > span { grid-column: 2; }
  .datos div { padding: 24px 20px; }
  .datos div + div { padding-left: 20px; }
  .datos div:nth-child(3) { padding-left: 20px; }
  .foto-frase::after { background: linear-gradient(180deg, rgba(18, 13, 10, .3), rgba(18, 13, 10, .82)); }
  .foto-frase { align-items: flex-end; padding-bottom: 70px; }
  .pie-cols { grid-template-columns: 1fr; gap: 26px; }
  .botones .boton { width: 100%; }
  .terminos .clave { padding: 6px 18px 18px; margin-inline: -8px; }
  .resumen-tc { padding: 26px 22px; }
  .hero h1 { font-size: clamp(40px, 11.5vw, 60px); }
}

/* modo captura (?captura): solo para revisar páginas completas con capturas */
.captura .rev { opacity: 1 !important; transform: none !important; transition: none !important; }
.captura .hero.completo { min-height: 900px; } .captura .hero.alto { min-height: 790px; } .captura .hero.medio { min-height: 650px; }
.captura .dividir { min-height: 830px; } .captura .foto-frase { min-height: 860px; } .captura .cierre { min-height: 800px; }
.captura .tile, .captura .dividir figure { max-height: 780px; } .captura .cab { position: absolute; }

/* ajustes de lectura: textos secundarios más legibles */
:root { --tenue: rgba(242, 239, 232, .74); }
body { font-weight: 400; }
.sub, .lineas span, .tiempo span, .pasos span:last-child, .resp p, .pie-cols a, .nota-tc p, .pista { font-weight: 400; }
.marfil { --tenue: rgba(40, 35, 31, .74); }
.portada .sub { color: rgba(242, 239, 232, .85); font-size: 11.5px; }
.tile::after { background: linear-gradient(180deg, transparent 38%, rgba(18, 13, 10, .82)); }
.tile.sobre-claro::after { background: linear-gradient(180deg, transparent 32%, rgba(18, 13, 10, .8)); }
.tile .desde { color: rgba(242, 239, 232, .9); }
.cierre.sobre-claro::after { background: radial-gradient(ellipse at center, rgba(242, 239, 232, .62), rgba(242, 239, 232, .25) 70%); }
.cierre.sobre-claro { --tenue: rgba(40, 35, 31, .82); }
.hero.sobre-claro .sub { color: rgba(40, 35, 31, .85); }
.hero.sobre-claro::after { background: linear-gradient(180deg, rgba(18, 13, 10, .62) 0%, rgba(18, 13, 10, .18) 16%, rgba(242, 239, 232, 0) 40%, rgba(242, 239, 232, .4) 100%); }
.marfil .nota-tc a, .sobre-claro .nota-tc a { color: #6d5530; border-color: #6d5530; }
.cierre.sobre-claro .nota-tc { border-color: rgba(40, 35, 31, .25); }
.sec-in > * { min-width: 0; }
@media (max-width: 720px) {
  .ceja, .datos .ceja, .tile .ir, .enlace, .filtro, .plegable summary, .nota-tc a, .bajar, .lineas .n, th { font-size: 12px; }
  .filtro, .plegable summary { padding: 12px 0; }
}
.datos .ceja, .tile .ir, .bajar, .lineas .enlace { font-size: 11.5px; }