/* ==========================================================================
   Encarni Hernández · Clínica de Estética
   Concepto «Manos que alivian» · Lino / Azul Noche / Oro
   ========================================================================== */

@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces.woff2") format("woff2"); font-weight: 280 560; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-italic.woff2") format("woff2"); font-weight: 280 560; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../fonts/dm-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../fonts/dm-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* Paleta del brand book */
  --lino: #F5F0E8;      /* fondo 60 % */
  --noche: #1E2B45;     /* texto, bloques, CTA 25 % */
  --arena: #E6DACB;     /* superficies 5 % */
  --salvia: #8FA69A;    /* solo bebés */
  --salvia-25: #DCE3DC;
  --oro: #B8925A;       /* líneas, iconos, titulares sobre noche */
  --oro-claro: #D2B07A; /* texto oro sobre noche (6,9:1) */
  --oro-tinta: #7D5E2C; /* texto oro sobre lino (5,3:1) */
  --tinta: #22252B;
  --gris: #585C65;      /* etiquetas (≥ 4,5:1 sobre lino y arena) */
  --linea: rgba(30, 43, 69, .16);
  --linea-clara: rgba(245, 240, 232, .18);

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Escala fluida */
  --fs-h1: clamp(3.4rem, 1.6rem + 7.6vw, 8.6rem);
  --fs-h2: clamp(2rem, 1.35rem + 2.6vw, 3.6rem);
  --fs-h3: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
  --fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --fs-body: clamp(1rem, .96rem + .2vw, 1.125rem);
  --fs-label: clamp(.6875rem, .66rem + .1vw, .75rem);

  /* Espaciado (base 8) */
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem; --s6: 4rem; --s7: 6rem; --s8: 8rem;
  --section: clamp(5rem, 3rem + 8vw, 10rem);
  --gutter: clamp(1rem, .5rem + 2.5vw, 3rem);
  --max: 1320px;

  --radio: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t: 500ms;
  --nav-h: 72px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
  margin: 0; background: var(--lino); color: var(--tinta);
  font: 400 var(--fs-body)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
::selection { background: var(--noche); color: var(--lino); }

:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 200; background: var(--noche); color: var(--lino); padding: .75rem 1rem; border-radius: 8px; transition: top .2s; }
.skip:focus { top: 1rem; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Tipografía ---------- */
.h2 {
  font-family: var(--serif); font-weight: 380; font-size: var(--fs-h2); line-height: 1.05;
  letter-spacing: -.015em; color: var(--noche); text-wrap: balance;
  font-variation-settings: "SOFT" 30;
}
.h3, h3 { font-family: var(--serif); font-weight: 420; font-size: var(--fs-h3); line-height: 1.15; color: var(--noche); letter-spacing: -.01em; }
em, .gold { font-style: italic; }
.gold { color: var(--oro-tinta); font-weight: 340; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--tinta); max-width: 38ch; }
.kicker, .mono {
  font-family: var(--mono); font-weight: 500; font-size: var(--fs-label);
  letter-spacing: .16em; text-transform: uppercase; line-height: 1.3;
}
.kicker { color: var(--gris); margin-bottom: var(--s3); display: flex; align-items: center; gap: .75em; }
.kicker::before { content: ""; width: 2.25rem; height: 1px; background: var(--oro); flex: none; }
.kicker--light { color: rgba(245, 240, 232, .78); }
.fineprint { font-size: .8125rem; color: var(--gris); max-width: 70ch; margin-top: var(--s3); }
.fineprint--light { color: rgba(245, 240, 232, .72); }
.fineprint a { color: inherit; }

/* ---------- Botones ---------- */
.btn {
  --bg: var(--noche); --fg: var(--lino); --bd: var(--noche);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: .85rem 1.5rem; border-radius: 999px; border: 1px solid var(--bd);
  background: var(--bg); color: var(--fg); text-decoration: none; cursor: pointer;
  font: 500 .975rem/1.2 var(--sans); letter-spacing: .01em; overflow: hidden; isolation: isolate;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), transform .2s var(--ease);
}
/* Relleno que «sube» como una ola al pasar el ratón */
.btn::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; background: var(--fill, var(--oro));
  transform: translateY(101%); border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  transition: transform 600ms var(--ease), border-radius 600ms var(--ease);
}
.btn:hover::before { transform: translateY(0); border-radius: 0; }
.btn:active { transform: scale(.98); }
.btn--dark { --fill: #2C3D5E; }
.btn--line { --bg: transparent; --fg: var(--noche); --bd: var(--noche); --fill: var(--noche); }
.btn--line:hover { color: var(--lino); }
.btn--gold { --bg: var(--oro-claro); --fg: var(--noche); --bd: var(--oro-claro); --fill: var(--lino); }
.btn--light { --bg: var(--lino); --fg: var(--noche); --bd: var(--lino); --fill: var(--arena); }
.btn--sm { min-height: 44px; padding: .6rem 1.1rem; font-size: .9rem; }
.btn--block { width: 100%; }
.i { width: 1.25em; height: 1.25em; flex: none; }
.flip { transform: scaleX(-1); }
.link { display: inline-flex; align-items: center; gap: .5em; color: var(--noche); font-weight: 500; text-decoration: none; padding-block: .5rem; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size var(--t) var(--ease); }
.link:hover { background-size: 0 1px; background-position: 100% 100%; }
.link .i { transition: transform var(--t) var(--ease); }
.link:hover .i { transform: translateX(4px); }
.link--light { color: var(--lino); }
.round { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--linea-clara); background: transparent; color: var(--lino); display: grid; place-items: center; cursor: pointer; transition: background .3s, color .3s; }
.round:hover { background: var(--lino); color: var(--noche); }

/* Píldoras y chips */
.pill { display: inline-block; font: 500 var(--fs-label)/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; padding: .55em 1em; border-radius: 999px; }
.pill--salvia { background: var(--salvia); color: var(--noche); }
.pill--noche-line { border: 1px solid var(--noche); color: var(--noche); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: var(--s3); }
.chips li { font: 400 .6875rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 999px; padding: .6em .9em; color: var(--gris); }

/* ---------- Barra de progreso ---------- */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 120; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--oro); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ---------- Navegación ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 100; transition: background .4s var(--ease), border-color .4s, transform .5s var(--ease); border-bottom: 1px solid transparent; }
.nav.is-scrolled { background: rgba(245, 240, 232, .82); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); border-color: var(--linea); }
.nav.is-hidden { transform: translateY(-100%); }
.nav__inner { height: var(--nav-h); max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.logo { display: grid; text-decoration: none; color: var(--noche); line-height: 1; min-height: 44px; align-content: center; }
.logo__name { font: italic 400 1.35rem/1 var(--serif); letter-spacing: -.01em; font-variation-settings: "SOFT" 100; }
.logo__desc { font: 500 .5625rem/1 var(--mono); letter-spacing: .32em; text-transform: uppercase; color: var(--oro-tinta); margin-top: .35rem; }
.nav__links { display: none; gap: clamp(1rem, 2vw, 2rem); }
.nav__links a { position: relative; text-decoration: none; font-size: .9375rem; color: var(--noche); padding-block: .75rem; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .45rem; height: 1px; background: var(--oro); transform: scaleX(0); transform-origin: right; transition: transform var(--t) var(--ease); }
.nav__links a:hover::after, .nav__links a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
.nav__end { display: flex; align-items: center; gap: var(--s2); }
.nav__end .btn { display: none; }
.status { display: none; align-items: center; gap: .5rem; font: 500 .6875rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gris); flex: none; }
.status.is-open .status__dot { background: #3E8E5E; box-shadow: 0 0 0 0 rgba(62, 142, 94, .5); animation: pulse 2.4s infinite; }
.status--block { display: flex; margin-bottom: var(--s2); line-height: 1.4; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(62, 142, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(62, 142, 94, 0); } }

.burger { width: 48px; height: 48px; border: 1px solid var(--linea); border-radius: 50%; background: transparent; display: grid; place-content: center; gap: 6px; cursor: pointer; }
.burger__l { width: 20px; height: 1.5px; background: var(--noche); transition: transform .4s var(--ease); }
.burger[aria-expanded="true"] .burger__l:nth-child(2) { transform: translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__l:nth-child(3) { transform: translateY(-3.75px) rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 90; background: var(--noche); color: var(--lino); padding: calc(var(--nav-h) + 2rem) var(--gutter) calc(2rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; clip-path: circle(0% at calc(100% - 44px) 36px); transition: clip-path .7s var(--ease); }
.menu.is-open { clip-path: circle(150% at calc(100% - 44px) 36px); }
.menu__list { list-style: none; padding: 0; }
.menu__list a { display: flex; align-items: baseline; gap: 1rem; padding-block: .35rem; font: 340 clamp(2.2rem, 9vw, 3.2rem)/1.15 var(--serif); text-decoration: none; font-variation-settings: "SOFT" 100; }
.menu__list a span { font: 500 .75rem/1 var(--mono); color: var(--oro-claro); letter-spacing: .14em; }
.menu__foot { display: grid; gap: 1rem; margin-top: 2rem; }
.menu__foot .mono { color: rgba(245, 240, 232, .7); }
body.menu-open .nav { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.menu-open .logo, body.menu-open .burger { color: var(--lino); }
body.menu-open .logo__desc { color: var(--oro-claro); }
body.menu-open .burger { border-color: var(--linea-clara); }
body.menu-open .burger__l { background: var(--lino); }
body.menu-open .nav__end .btn, body.menu-open .status { visibility: hidden; }

/* ---------- Trazo de drenaje (SVG) ---------- */
.drain { position: absolute; left: 0; width: 100%; pointer-events: none; overflow: visible; }
.drain path { fill: none; stroke: var(--oro); stroke-width: 1.2; opacity: .8; vector-effect: non-scaling-stroke; stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); transition: stroke-dashoffset 2.4s var(--ease); }
.drain path:nth-child(2) { transition-delay: .15s; }
.drain path:nth-child(3) { transition-delay: .3s; }
.drain.is-drawn path { stroke-dashoffset: 0; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; padding: calc(var(--nav-h) + 1.5rem) 0 var(--s6); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.drain--hero { bottom: 6%; height: 52%; }
.hero__grid { position: relative; width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: var(--s5); align-items: center; }
.hero__copy { position: relative; z-index: 3; }
.hero__title { font-family: var(--serif); font-weight: 340; font-size: var(--fs-h1); line-height: .98; letter-spacing: -.035em; color: var(--noche); margin-bottom: var(--s4); }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__title .line:last-child { padding-left: .9em; }
.hero__title em { color: var(--oro-tinta); }
.hero__lead { font-size: var(--fs-lead); max-width: 34ch; margin-bottom: var(--s4); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: var(--s4); }
.rating { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; font-size: .9375rem; color: var(--noche); padding-block: .5rem; }
.rating .stars { color: var(--oro); letter-spacing: .12em; font-size: 1rem; }
.rating:hover span:last-of-type { text-decoration: underline; }
.rating--light { color: var(--lino); }
.rating--light .stars { color: var(--oro-claro); }

.hero__visual { position: relative; justify-self: center; width: min(82vw, 440px); }
.hero__caption { position: absolute; right: -.25rem; bottom: -2rem; color: var(--gris); writing-mode: horizontal-tb; }

/* Arco: las manos que envuelven */
.arch { position: relative; aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; }
.arch::after { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--oro); border-radius: inherit; pointer-events: none; z-index: 3; transform: translate(14px, 14px); }
.arch__light { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: radial-gradient(circle at 30% 40%, #fff 0, var(--arena) 60%, #d8c6b1 100%); }
.arch__pop { position: absolute; inset: 0; z-index: 2; border-radius: inherit; overflow: hidden; }
.arch__pop img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* La foto recortada (fondo transparente) «sale» del arco por arriba */

.seal { position: absolute; left: -10%; bottom: 8%; width: clamp(104px, 26vw, 148px); aspect-ratio: 1; z-index: 4; color: var(--noche); background: var(--lino); border-radius: 50%; box-shadow: 0 10px 30px -12px rgba(30, 43, 69, .25); }
.seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 28s linear infinite; }
.seal__ring text { font: 500 11.5px var(--mono); letter-spacing: .22em; fill: var(--noche); }
.seal__mono { position: absolute; inset: 27%; color: var(--noche); }
@keyframes spin { to { transform: rotate(360deg); } }

.scroll-cue { position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: .6rem; text-decoration: none; color: var(--gris); padding: .5rem; }
.scroll-cue__line { width: 1px; height: 44px; background: var(--linea); position: relative; overflow: hidden; }
.scroll-cue__line::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--oro); animation: drip 2.2s var(--ease) infinite; }
@keyframes drip { to { top: 100%; } }

/* Tipografía que se relaja: Fraunces cambia su eje SOFT y su peso con la cercanía del cursor */
.relax .ch { display: inline-block; font-variation-settings: "SOFT" var(--soft, 0); font-weight: var(--wg, inherit); transform: translateY(var(--ty, 0)); transition: font-variation-settings .5s var(--ease), font-weight .5s var(--ease), transform .5s var(--ease); will-change: font-variation-settings; }
.relax .sp { display: inline; }

/* Entrada del hero */
.js .hero__title .line > * { transform: translateY(110%); }
.js.is-loaded .hero__title .line > * { transform: none; transition: transform 1.1s var(--ease); }
.js.is-loaded .hero__title .line:nth-child(2) > * { transition-delay: .12s; }
.js .hero .reveal { opacity: 0; transform: translateY(16px); }
.js.is-loaded .hero .reveal { opacity: 1; transform: none; transition: opacity .9s var(--ease) .35s, transform .9s var(--ease) .35s; }
.js.is-loaded .hero .reveal:nth-of-type(3) { transition-delay: .45s; }
.js.is-loaded .hero .reveal:nth-of-type(4) { transition-delay: .55s; }
.js .hero__visual .arch { clip-path: inset(38% 0 0 0 round 999px 999px 0 0); }
.js.is-loaded .hero__visual .arch { clip-path: inset(-20% -10% 0 -10% round 999px 999px 0 0); transition: clip-path 1.2s var(--ease) .05s; }
.js .seal { opacity: 0; transform: scale(.8) rotate(-30deg); }
.js.is-loaded .seal { opacity: 1; transform: none; transition: opacity .8s var(--ease) .9s, transform 1s var(--ease) .9s; }

/* Revelados al hacer scroll */
.js .reveal-img > * { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--ease); }
.js .reveal-img.is-in > * { clip-path: inset(0 0 0 0); }
.js .fade-up { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .fade-up.is-in { opacity: 1; transform: none; }

/* ---------- Manifiesto ---------- */
.manifesto { padding: var(--section) var(--gutter); max-width: var(--max); margin-inline: auto; }
.manifesto__text { font: 340 clamp(1.75rem, 1rem + 3.4vw, 3.9rem)/1.12 var(--serif); letter-spacing: -.02em; color: var(--noche); max-width: 22ch; text-wrap: balance; font-variation-settings: "SOFT" 60; }
.manifesto__text .w { opacity: var(--o, 1); transition: opacity .3s linear; }
.js .manifesto__text .w { --o: .22; }
.facts { display: grid; gap: var(--s3); margin-top: var(--s6); border-top: 1px solid var(--linea); padding-top: var(--s4); }
.facts li { display: grid; grid-template-columns: 5.5rem 1fr; align-items: baseline; gap: var(--s2); }
.facts strong { font: italic 300 clamp(2.5rem, 2rem + 2vw, 3.5rem)/1 var(--serif); color: var(--oro-tinta); font-variation-settings: "SOFT" 100; }
.facts span { color: var(--gris); font-size: .9375rem; max-width: 26ch; }

/* ---------- Tres puertas ---------- */
.doors { position: relative; padding-bottom: var(--section); }
.doors .h2 { margin-bottom: var(--s5); max-width: 18ch; }
.doors__list { border-top: 1px solid var(--linea); max-width: var(--max); margin-inline: auto; }
.door a { --c: var(--noche); position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "n t a" ". d a"; column-gap: var(--s3); row-gap: .35rem; align-items: center; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem) var(--gutter); border-bottom: 1px solid var(--linea); text-decoration: none; color: var(--noche); overflow: hidden; isolation: isolate; }
.door a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--door-bg); transform: scaleY(0); transform-origin: bottom; transition: transform .7s var(--ease); }
.door--salvia { --door-bg: var(--salvia-25); }
.door--noche { --door-bg: var(--noche); }
.door--arena { --door-bg: var(--arena); }
.door a:hover::before, .door a:focus-visible::before { transform: scaleY(1); }
.door--noche a:hover, .door--noche a:focus-visible { color: var(--lino); }
.door--noche a:hover em, .door--noche a:focus-visible em { color: var(--oro-claro); }
.door__n { grid-area: n; color: var(--gris); align-self: start; padding-top: .6em; }
.door--noche a:hover .door__n, .door--noche a:hover .door__d { color: rgba(245, 240, 232, .75); }
.door__t { grid-area: t; font: 340 clamp(1.75rem, 1.1rem + 3vw, 4rem)/1.05 var(--serif); letter-spacing: -.02em; transition: transform .7s var(--ease); }
.door__t em { color: var(--oro-tinta); }
.door a:hover .door__t { transform: translateX(.35em); }
.door__d { grid-area: d; color: var(--gris); font-size: .9375rem; }
.door__a { grid-area: a; width: 2.75rem; height: 2.75rem; padding: .7rem; border: 1px solid currentColor; border-radius: 50%; transition: transform .7s var(--ease), background .4s; }
.door a:hover .door__a { transform: rotate(-45deg); }
.door-peek { position: fixed; left: 0; top: 0; z-index: 50; width: 220px; aspect-ratio: 3 / 4; pointer-events: none; border-radius: 999px 999px 0 0; overflow: hidden; opacity: 0; transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(.85) rotate(var(--r, 0deg)); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.door-peek.is-on { opacity: 1; transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(1) rotate(var(--r, 0deg)); }
.door-peek img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Bebés ---------- */
.babies { position: relative; background: linear-gradient(var(--lino), var(--salvia-25) 18%, var(--salvia-25) 82%, var(--lino)); padding-block: var(--section); overflow: hidden; }
.drain--section { top: 2%; height: 220px; opacity: .7; }
.babies__grid { position: relative; display: grid; gap: var(--s5); }
.babies__media { position: relative; width: min(86vw, 420px); justify-self: center; }
.arch--soft { overflow: hidden; }
.arch--soft::after { transform: none; inset: 10px; }
.arch--soft img { width: 100%; height: 100%; object-fit: cover; }
.babies__media .pill { position: absolute; left: -.5rem; top: 2rem; }
.babies .h2 { margin-bottom: var(--s3); }
.babies .lead { margin-bottom: var(--s4); }
.steps { display: grid; gap: 0; border-top: 1px solid var(--linea); }
.steps li { display: grid; grid-template-columns: 3rem 1fr; gap: var(--s2); padding-block: var(--s3); border-bottom: 1px solid var(--linea); }
.steps .mono { color: var(--oro-tinta); padding-top: .35em; }
.steps h3 { font-size: 1.375rem; margin-bottom: .25rem; }
.steps p { color: var(--tinta); max-width: 44ch; }
.notice { display: flex; gap: .75rem; align-items: flex-start; background: var(--lino); border: 1px solid var(--salvia); border-radius: var(--radio); padding: 1rem 1.25rem; margin-bottom: var(--s4); font-size: .9375rem; max-width: 56ch; }
.notice .i { color: var(--noche); margin-top: .15em; }
.quotes { display: grid; gap: var(--s4); margin-top: var(--s6); }
.quote { position: relative; padding-top: var(--s3); border-top: 1px solid var(--noche); }
.quote p { font: italic 340 clamp(1.25rem, 1.05rem + .8vw, 1.6rem)/1.3 var(--serif); color: var(--noche); font-variation-settings: "SOFT" 100; }
.quote cite { display: block; margin-top: var(--s2); font: 500 var(--fs-label)/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: var(--gris); }
.quote cite a { color: inherit; }

/* ---------- Postoperatorio ---------- */
.postop { position: relative; background: var(--noche); color: var(--lino); padding-block: calc(var(--section) + 3rem) var(--section); border-radius: clamp(48px, 12vw, 200px) clamp(48px, 12vw, 200px) 0 0; margin-top: -1px; }
.postop .h2 { color: var(--lino); margin-bottom: var(--s3); }
.postop .gold { color: var(--oro-claro); }
.postop .lead { color: rgba(245, 240, 232, .88); max-width: 46ch; }
.postop__head { max-width: 900px; margin-bottom: var(--s6); }
.phases { position: relative; display: grid; gap: var(--s4); counter-reset: f; }
.phases::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--linea-clara); }
.phase { position: relative; padding-left: 2.75rem; }
.phase::before { content: ""; position: absolute; left: 0; top: .2rem; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--oro); background: var(--noche); }
.phase.is-in::before { background: var(--oro); transition: background .6s var(--ease); }
.phase__n { color: var(--oro-claro); }
.phase h3 { color: var(--lino); margin: .5rem 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.phase p { color: rgba(245, 240, 232, .82); max-width: 34ch; }
.postop__note { margin-top: var(--s5); color: rgba(245, 240, 232, .72); padding-top: var(--s3); border-top: 1px solid var(--linea-clara); }
.postop__foot { display: grid; gap: var(--s6); margin-top: var(--s7); }
.pullquote blockquote p { font: italic 300 clamp(1.6rem, 1.1rem + 2vw, 2.6rem)/1.2 var(--serif); color: var(--lino); font-variation-settings: "SOFT" 100; letter-spacing: -.01em; }
.pullquote figcaption { margin-top: var(--s3); font: 500 var(--fs-label)/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(245, 240, 232, .72); }
.pullquote a { color: var(--oro-claro); }
.tick-list { margin-bottom: var(--s4); }
.tick-list li { padding: .85rem 0; border-bottom: 1px solid var(--linea-clara); display: flex; gap: .75rem; align-items: center; font-size: 1.0625rem; }
.tick-list li::before { content: ""; width: 18px; height: 1px; background: var(--oro); flex: none; }

/* ---------- Piel ---------- */
.skin { padding-block: var(--section); }
.skin__head { max-width: 880px; margin-bottom: var(--s6); }
.skin .h2 { margin-bottom: var(--s3); }
.lab { display: grid; gap: var(--s4); }
.lab__tabs { display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) .5rem; scrollbar-width: none; }
.lab__tabs::-webkit-scrollbar { display: none; }
.lab__tabs button { scroll-snap-align: start; flex: none; display: inline-flex; gap: .6rem; align-items: center; min-height: 48px; padding: .6rem 1rem; border-radius: 999px; border: 1px solid var(--linea); background: transparent; cursor: pointer; font-size: .9375rem; color: var(--noche); transition: background .3s, color .3s, border-color .3s; }
.lab__tabs button .mono { color: var(--gris); }
.lab__tabs button[aria-selected="true"] { background: var(--noche); color: var(--lino); border-color: var(--noche); }
.lab__tabs button[aria-selected="true"] .mono { color: var(--oro-claro); }
.panel { background: var(--arena); border-radius: var(--radio); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.panel h3 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.6rem); margin-bottom: var(--s2); }
.panel__what { font-size: var(--fs-lead); max-width: 40ch; margin-bottom: var(--s3); }
.panel__meta { display: grid; gap: var(--s2); }
.panel__meta div { border-top: 1px solid var(--linea); padding-top: .85rem; }
.panel__meta dt { font: 500 var(--fs-label)/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin-bottom: .35rem; }
.panel__meta dd { margin: 0; }
.panel .chips li { color: var(--noche); }
.panel:not([hidden]) { animation: panelIn .6s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } }
.lab__media { position: relative; width: min(100%, 360px); justify-self: center; }
.lab__video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 999px 999px var(--radio) var(--radio); background: #0d1a3a; }
.lab__media figcaption { margin-top: .75rem; color: var(--gris); }
.skin__cta { margin-top: var(--s5); }

.gaze { display: grid; gap: var(--s4); align-items: center; margin-top: var(--section); }
.gaze__img { width: min(100%, 420px); border-radius: var(--radio); overflow: hidden; }
.gaze__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.gaze__copy .pill { margin-bottom: var(--s3); }
.gaze__copy .h3 { font-size: var(--fs-h2); line-height: 1.05; margin-bottom: var(--s2); }
.gaze__copy p { max-width: 40ch; margin-bottom: var(--s2); }

/* ---------- Encarni ---------- */
.about { background: var(--arena); padding-block: var(--section); overflow: hidden; }
.about__grid { display: grid; gap: var(--s6); align-items: center; }
.about__visual { position: relative; width: min(78vw, 400px); justify-self: center; margin-top: var(--s4); }
.arch--about .arch__light { background: radial-gradient(circle at 30% 40%, #fff 0, var(--lino) 55%, #d8c6b1 100%); }
.mono3d { position: absolute; right: -12%; top: 6%; width: clamp(84px, 22vw, 128px); color: var(--noche); background: var(--lino); border-radius: 50%; z-index: 4; transform: perspective(600px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform .4s var(--ease); box-shadow: 0 10px 30px -12px rgba(30, 43, 69, .25); }
.about .h2 { margin-bottom: var(--s3); }
.about .lead { margin-bottom: var(--s2); max-width: 44ch; }
.about__copy > p:not(.kicker):not(.lead) { max-width: 44ch; }
.training { margin-top: var(--s4); }
.training li { padding: .65rem 0; border-bottom: 1px solid var(--linea); }
.training li span { color: var(--gris); font-size: .875rem; }
.signature { width: min(240px, 64%); margin-top: var(--s5); }

/* ---------- Galería ---------- */
.gallery { padding-block: var(--section) calc(var(--section) - 2rem); }
.gallery__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s5); }
.gallery__head .kicker { width: 100%; margin-bottom: 0; }
.gallery__hint { color: var(--gris); }
.strip { display: flex; gap: clamp(1rem, .5rem + 1.5vw, 2rem); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 1.5rem; scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--oro) transparent; cursor: grab; }
.strip.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.strip__item { flex: none; scroll-snap-align: start; }
.strip__item picture { overflow: hidden; border-radius: var(--radio); }
.strip__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); pointer-events: none; }
.strip__item:hover img { transform: scale(1.04); }
.strip__item--tall { width: clamp(220px, 60vw, 340px); }
.strip__item--tall picture { aspect-ratio: 3 / 4.4; display: block; }
.strip__item--square { width: clamp(240px, 66vw, 400px); align-self: center; }
.strip__item--square picture { aspect-ratio: 1; display: block; }
.strip__item--wide { width: clamp(280px, 80vw, 520px); align-self: end; }
.strip__item--wide picture { aspect-ratio: 3 / 2; display: block; }
.strip__item:nth-child(even) { margin-top: var(--s5); }
.strip__item .mono { margin-top: .75rem; color: var(--gris); }

/* ---------- Opiniones ---------- */
.reviews { background: var(--noche); color: var(--lino); padding-block: var(--section); overflow: hidden; }
.reviews .h2 { color: var(--lino); margin-bottom: var(--s3); max-width: 20ch; }
.reviews .gold { color: var(--oro-claro); }
.reviews__head { display: grid; gap: var(--s3); align-items: end; margin-bottom: var(--s6); }
.reviews__big { font: italic 300 clamp(6rem, 4rem + 14vw, 16rem)/.8 var(--serif); color: var(--oro); letter-spacing: -.05em; font-variation-settings: "SOFT" 100; }
.carousel__track { display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .5rem; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track .quote { flex: 0 0 min(86%, 440px); scroll-snap-align: start; border-top-color: var(--oro); }
.carousel__track .quote p { color: var(--lino); }
.carousel__track .quote cite { color: rgba(245, 240, 232, .72); }
.quote__tag { display: inline-block; margin-bottom: var(--s2); font: 500 .625rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--oro-claro); }
.carousel__ui { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.carousel__count { color: rgba(245, 240, 232, .72); min-width: 4.5rem; text-align: center; }
.carousel__ui .link { margin-left: auto; }

/* ---------- Carta ---------- */
.menu-list { padding-block: var(--section); }
.menu-list .h2 { margin-bottom: var(--s3); }
.menu-list .lead { margin-bottom: var(--s5); }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--s5); }
.filters button { min-height: 44px; padding: .55rem 1.1rem; border-radius: 999px; cursor: pointer; font: 500 var(--fs-label)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--linea); background: transparent; color: var(--noche); transition: background .3s, color .3s, border-color .3s; }
.filters button[data-f="bebes"] { border-color: var(--salvia); }
.filters button[data-f="postoperatorio"] { border-color: var(--noche); }
.filters button[data-f="facial"] { border-color: var(--oro); }
.filters button[data-f="corporal"] { border-color: #cdbca6; }
.filters button[data-f="basicos"] { border-color: var(--gris); }
.filters button[aria-pressed="true"] { background: var(--noche); color: var(--lino); border-color: var(--noche); }
.filters button[aria-pressed="true"][data-f="bebes"] { background: var(--salvia); color: var(--noche); border-color: var(--salvia); }
.carta { display: grid; gap: var(--s5); }
.carta__cat h3 { display: flex; align-items: baseline; gap: .75rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: var(--s2); }
.carta__cat h3 .mono { color: var(--gris); }
.carta__row { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--linea); align-items: baseline; }
.carta__row:first-of-type { border-top: 1px solid var(--noche); }
.carta__name { font-weight: 500; color: var(--noche); }
.carta__note { grid-column: 1; color: var(--gris); font-size: .875rem; }
.carta__price { grid-row: 1; grid-column: 2; font: 500 .8125rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--noche); white-space: nowrap; }
.carta__price small { display: block; margin-top: .35rem; color: var(--gris); font-size: .6875rem; text-align: right; }
.carta__cat { animation: panelIn .5s var(--ease); }

/* ---------- Reserva ---------- */
.book { background: var(--noche); color: var(--lino); padding-block: var(--section); border-radius: clamp(28px, 6vw, 80px); margin-inline: clamp(.5rem, 1.5vw, 1.5rem); }
.book .h2 { color: var(--lino); margin-bottom: var(--s4); max-width: 14ch; }
.book .gold { color: var(--oro-claro); }
.book__grid { display: grid; gap: var(--s6); }
.mini-steps li { display: grid; grid-template-columns: 3rem 1fr; padding: .9rem 0; border-top: 1px solid var(--linea-clara); font-size: 1.0625rem; }
.mini-steps .mono { color: var(--oro-claro); padding-top: .3em; }
.book__alt { margin-top: var(--s4); color: rgba(245, 240, 232, .85); }
.book__alt a { color: var(--oro-claro); }
.composer { display: grid; gap: var(--s3); background: rgba(245, 240, 232, .04); border: 1px solid var(--linea-clara); border-radius: calc(var(--radio) * 1.5); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.composer fieldset { border: 0; padding: 0; margin: 0; }
.composer legend, .composer label:not(.radios label) { display: block; font-weight: 500; margin-bottom: .6rem; }
.composer .opt, .composer .req { font-weight: 400; color: rgba(245, 240, 232, .65); font-size: .875rem; }
.radios { display: flex; flex-wrap: wrap; gap: .5rem; }
.radios label { position: relative; margin: 0; cursor: pointer; }
.radios input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.radios span { display: inline-flex; align-items: center; min-height: 46px; padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--linea-clara); transition: background .3s, color .3s, border-color .3s; }
.radios input:checked + span { background: var(--oro-claro); color: var(--noche); border-color: var(--oro-claro); }
.radios input:focus-visible + span { outline: 2px solid var(--oro-claro); outline-offset: 3px; }
.radios label:hover span { border-color: var(--oro-claro); }
.field input, .field textarea { width: 100%; min-height: 48px; padding: .75rem 1rem; border-radius: 10px; border: 1px solid var(--linea-clara); background: rgba(245, 240, 232, .06); color: var(--lino); resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--oro-claro); outline-offset: 1px; }
.field textarea::placeholder { color: rgba(245, 240, 232, .55); }
.error { margin-top: .6rem; color: #F2C2B6; font-size: .9375rem; display: flex; gap: .4rem; }
.error::before { content: "!"; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #F2C2B6; color: var(--noche); font-weight: 600; font-size: .75rem; flex: none; }
.preview { border-left: 2px solid var(--oro); padding: .75rem 1rem; background: rgba(245, 240, 232, .06); border-radius: 0 10px 10px 0; }
.preview .mono { color: rgba(245, 240, 232, .65); margin-bottom: .4rem; }
.preview [data-preview] { font-size: .9375rem; color: var(--lino); }

/* ---------- Contacto ---------- */
.contact { padding-block: var(--section); }
.contact__grid { display: grid; gap: var(--s6); }
.contact .h2 { margin-bottom: var(--s5); }
.contact__data { display: grid; margin-bottom: var(--s5); }
.contact__data div { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--s2); padding: .9rem 0; border-bottom: 1px solid var(--linea); }
.contact__data dt { font: 500 var(--fs-label)/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.contact__data dd { margin: 0; }
.contact__data a { color: var(--noche); font-weight: 500; }
.hours { margin-bottom: var(--s4); }
.hours table { width: 100%; border-collapse: collapse; }
.hours th, .hours td { text-align: left; padding: .65rem 0; border-bottom: 1px solid var(--linea); font-weight: 400; }
.hours td { text-align: right; font-family: var(--mono); font-size: .875rem; letter-spacing: .06em; }
.hours tr.is-today th, .hours tr.is-today td { color: var(--noche); font-weight: 600; }
.hours tr.is-today th::after { content: " · hoy"; color: var(--oro-tinta); font-weight: 500; }
.contact__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.map { position: relative; border-radius: 999px 999px var(--radio) var(--radio); overflow: hidden; aspect-ratio: 4 / 5; background: var(--arena); }
.map img, .map iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
.map__overlay { position: absolute; inset: auto 0 0 0; padding: 4rem 1.25rem 1.25rem; background: linear-gradient(transparent, rgba(30, 43, 69, .92) 45%); color: var(--lino); display: grid; gap: .75rem; justify-items: start; }
.map__overlay .mono { color: var(--oro-claro); }
.map__legal { font-size: .8125rem; color: rgba(245, 240, 232, .85); max-width: 40ch; }
.map__legal a { color: inherit; }
.map.is-live .map__overlay { display: none; }

/* ---------- Pie ---------- */
.footer { background: var(--noche); color: var(--lino); padding: var(--section) 0 calc(var(--s5) + 84px); margin-top: var(--section); border-radius: clamp(48px, 12vw, 200px) clamp(48px, 12vw, 200px) 0 0; }
.footer__cta { display: grid; gap: var(--s4); justify-items: start; padding-bottom: var(--s6); border-bottom: 1px solid var(--linea-clara); }
.footer__big { font: 300 clamp(2.75rem, 1.5rem + 6vw, 7rem)/1 var(--serif); letter-spacing: -.03em; }
.footer__big .gold { color: var(--oro-claro); }
.footer__grid { display: grid; gap: var(--s5); padding-block: var(--s6); }
.footer__brand { display: grid; color: var(--lino); margin-bottom: var(--s2); }
.footer__brand .logo__name { font-size: 1.75rem; }
.footer__brand .logo__desc { color: var(--oro-claro); }
.footer__logo { width: 200px; margin-bottom: var(--s2); opacity: .9; }
.footer__tag { font: italic 340 1.25rem/1.3 var(--serif); color: var(--oro-claro); }
.footer ul li { padding-block: .3rem; }
.footer a { color: var(--lino); text-decoration-color: rgba(245, 240, 232, .4); }
.footer p { margin-bottom: .5rem; color: rgba(245, 240, 232, .85); }
.footer__social { display: flex; gap: 1.25rem; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--linea-clara); font-size: .875rem; }
.footer__legal ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.footer__legal a { display: inline-block; padding-block: .35rem; }

/* ---------- Dock móvil ---------- */
.dock { position: fixed; z-index: 80; left: .5rem; right: .5rem; bottom: calc(.5rem + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 4px; padding: 4px; background: var(--noche); border-radius: 999px; box-shadow: 0 10px 30px -12px rgba(30, 43, 69, .45); transform: translateY(150%); transition: transform .5s var(--ease); }
.dock.is-visible { transform: none; }
.dock a { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 52px; border-radius: 999px; text-decoration: none; color: var(--lino); font-size: .875rem; font-weight: 500; }
.dock .dock__main { background: var(--oro-claro); color: var(--noche); }

/* ---------- Páginas legales ---------- */
.legal { padding: calc(var(--nav-h) + var(--s6)) 0 var(--section); }
.legal .wrap { max-width: 820px; }
.legal h1 { font: 340 clamp(2.4rem, 1.6rem + 3vw, 4rem)/1.05 var(--serif); color: var(--noche); letter-spacing: -.02em; margin-bottom: var(--s2); }
.legal h2 { font: 420 1.5rem/1.2 var(--serif); color: var(--noche); margin: var(--s5) 0 var(--s2); }
.legal p, .legal ul, .legal table { margin-bottom: var(--s2); }
.legal ul { padding-left: 1.25rem; }
.legal table { width: 100%; border-collapse: collapse; font-size: .9375rem; display: block; overflow-x: auto; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: .65rem .75rem; border-bottom: 1px solid var(--linea); }
.legal th { font: 500 .6875rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.legal .updated { color: var(--gris); font-size: .875rem; margin-bottom: var(--s5); }
.legal .back { display: inline-flex; margin-bottom: var(--s4); }
.pending { background: #FBE9C8; color: #5a3d00; padding: 0 .25em; border-radius: 3px; }
.legal-nav { padding-top: 0 !important; }

/* ==================== Breakpoints (mobile-first) ==================== */
@media (min-width: 600px) {
  .facts { grid-template-columns: repeat(3, 1fr); }
  .facts li { grid-template-columns: 1fr; }
  .quotes--babies { grid-template-columns: repeat(3, 1fr); }
  .phases { grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
  .phases::before { left: 0; right: 0; top: 7px; bottom: auto; width: auto; height: 1px; }
  .phase { padding: 2.5rem 0 0; }
  .phase::before { top: 0; }
  .carta { grid-template-columns: repeat(2, 1fr); column-gap: var(--s6); }
  .reviews__head { grid-template-columns: auto 1fr; gap: var(--s5); }
}

@media (min-width: 769px) {
  .dock { display: none; }
  .footer { padding-bottom: var(--s5); }
  .nav__end .btn { display: inline-flex; }
  .scroll-cue { display: flex; }
}

@media (min-width: 1024px) {
  :root { --nav-h: 84px; }
  .nav__links { display: flex; }
  .burger { display: none; }
  .status { display: inline-flex; }
  .menu { display: none; }

  .hero__grid { grid-template-columns: 1.15fr .85fr; gap: var(--s4); }
  .hero__title { margin-right: -18%; }
  .hero__visual { width: 100%; max-width: 460px; justify-self: end; margin-right: 4%; }

  .doors .wrap { display: grid; grid-template-columns: 1fr; }
  .door a { grid-template-columns: 6rem 1fr 22rem auto; grid-template-areas: "n t d a"; padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }

  .babies__grid { grid-template-columns: .8fr 1.2fr; gap: var(--s7); align-items: start; }
  .babies__media { position: sticky; top: calc(var(--nav-h) + 2rem); width: 100%; }

  .postop__foot { grid-template-columns: 1.4fr 1fr; gap: var(--s7); align-items: start; }

  .lab { grid-template-columns: 15rem 1fr 18rem; gap: var(--s5); align-items: start; }
  .lab__tabs { flex-direction: column; overflow: visible; margin: 0; padding: 0; gap: 0; border-top: 1px solid var(--linea); }
  .lab__tabs button { border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; justify-content: flex-start; min-height: 56px; padding: .9rem .5rem; position: relative; }
  .lab__tabs button::after { content: ""; position: absolute; right: .5rem; width: 6px; height: 6px; border-radius: 50%; background: var(--oro); opacity: 0; transition: opacity .3s; }
  .lab__tabs button[aria-selected="true"] { background: transparent; color: var(--noche); font-weight: 600; padding-left: 1rem; }
  .lab__tabs button[aria-selected="true"] .mono { color: var(--oro-tinta); }
  .lab__tabs button[aria-selected="true"]::after { opacity: 1; }
  .lab__tabs button:hover { padding-left: 1rem; }
  .lab__tabs button { transition: padding .4s var(--ease), color .3s; }
  .lab__media { margin-top: -6rem; }

  .gaze { grid-template-columns: .7fr 1fr; gap: var(--s7); padding-left: 8%; }

  .about__grid { grid-template-columns: .9fr 1.1fr; gap: var(--s7); }
  .about__visual { width: 100%; max-width: 420px; }

  .reviews__head { align-items: center; }

  .carta { grid-template-columns: repeat(3, 1fr); }

  .book__grid { grid-template-columns: .9fr 1.1fr; gap: var(--s7); align-items: start; }

  .contact__grid { grid-template-columns: 1.1fr .9fr; gap: var(--s7); align-items: center; }

  .footer__cta { grid-template-columns: 1fr auto; align-items: end; }
  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; }
}

@media (min-width: 1600px) {
  :root { --max: 1440px; }
}

/* En pantallas bajas no forzamos 100svh */
@media (max-height: 640px) and (min-width: 1024px) { .hero { min-height: auto; } }

/* Movimiento reducido: todo quieto, trazos dibujados */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .drain path { stroke-dashoffset: 0; }
  .js .hero__title .line > *, .js .hero .reveal, .js .seal, .js .reveal-img > *, .js .fade-up { transform: none !important; opacity: 1 !important; clip-path: none !important; }
  .js .hero__visual .arch { clip-path: none; }
  .js .manifesto__text .w { --o: 1; }
}

@media print {
  .nav, .dock, .progress, .menu, .scroll-cue, .door-peek, .drain { display: none !important; }
  .postop, .reviews, .book, .footer { background: #fff; color: #000; }
}

/* Pie reducido de las páginas legales */
.footer--legal { margin-top: 0; padding: var(--s4) 0 calc(var(--s4) + env(safe-area-inset-bottom)); border-radius: 0; }
.footer--legal .footer__legal { border-top: 0; padding-top: 0; }