/* ============================================================
   PLANTILLA MAESTRA — BOOKING SYSTEMS US
   Un solo mundo visual, claro. Un sitio de negocio no cambia de
   look segun el sistema operativo del visitante.
   Todo lo per-cliente vive en DATA (al inicio del <script>).
   Tokens = custom properties -> mapean 1:1 a un theme de Tailwind.
   ============================================================ */
:root{
  --ground:#F2EBE0;   /* base */
  --raised:#FDFAF5;   /* tarjetas y campos: se despega de la base */
  --recess:#E7DCCC;   /* bandas hundidas: rompe el ritmo sin otro crema */
  --surface:var(--raised);
  --sunken:var(--recess);
  --ink:#241D16;
  --ink-2:#6B6055;
  /* El tercer tono del ramo fallaba AA en toda la plantilla: #9C9082
     daba 2.64:1 sobre el fondo hueso, y de el cuelgan todas las
     micro-etiquetas mono de las tres paginas. Contradecia al propio
     sistema, que ya autocorrige el color de marca hasta AA. */
  --ink-3:#6F6456;
  --line:#E0D5C5;
  --line-soft:#EBE2D5;

  /* ── SISTEMA DE TEMPERATURA ──────────────────────────────────
     El negocio vende contraste. Durante mucho tiempo el eje termico
     vivio en una barra de 3px y un lavado al hover: el sitio vendia
     contraste y no tenia ni una gota de contraste. Ahora el eje es
     el principio que organiza la pagina, y no hace falta inventar
     ningun color para lograrlo — los dos extremos ya estaban aqui. */
  --hot:#B85834;
  --cold:#3B686E;
  /* Los polos termicos estan calibrados para pintar fondos y fotos,
     no para poner texto de 11px sobre crema: --hot ahi da 3.96:1.
     Estas son sus versiones aptas para tipografia, que es lo que
     necesita la etiqueta de contraindicaciones ("Skip it if"). */
  --hot-ink:#9C4424;

  /* los extremos llevados a superficie: la pagina deja de oscilar
     crema→marron→crema y pasa a oscilar crema→hielo→crema→brasa */
  --ice:#0E2028;        /* frio profundo: la banda que argumenta   */
  --ice-2:#16303A;
  --ice-ink:#D8E6EA;    /* texto sobre hielo, tintado del propio tono */
  --ember:#2A1109;      /* brasa profunda: el cierre y el contraste */
  --ember-ink:#F2DFD2;
  --ice-lift:#7FB0BC;   /* acentos legibles sobre cada extremo      */
  --ember-lift:#E8875C;

  /* color del cliente, inyectado desde DATA */
  --brand:#2F5D57;
  --on-brand:#FFFCF8;
  --brand-soft:rgba(47,93,87,.10);

  --sh-sm:0 1px 2px rgba(36,29,22,.05), 0 2px 6px rgba(36,29,22,.04);
  --sh-md:0 2px 4px rgba(36,29,22,.05), 0 10px 28px rgba(36,29,22,.07);
  --sh-lg:0 4px 8px rgba(36,29,22,.06), 0 24px 56px rgba(36,29,22,.12);

  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:38px;

  --serif:"Newsreader", ui-serif, Georgia, serif;
  --sans:"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── ESCALA TIPOGRAFICA ──────────────────────────────────────
     Ocho pasos. Antes habia 38 tamaños ad-hoc, nueve de ellos
     apretados entre .72 y 1.35rem separados por uno o dos pixeles:
     eso es acumulacion, no sistema, y es la razon por la que algo
     se lee ensamblado en vez de diseñado.
     Cada paso es un clamp con minimo y maximo propios, asi que la
     tipografia escala de forma continua y no a saltos de breakpoint. */
  --t-3xs:0.6875rem;                              /* etiquetas mono   */
  --t-2xs:0.8125rem;                              /* pies, legales    */
  --t-xs:clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --t-sm:clamp(0.9375rem, 0.91rem + 0.15vw, 1.0625rem);
  --t-md:clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);  /* cuerpo destacado */
  --t-lg:clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem); /* subtitulos      */
  --t-xl:clamp(1.75rem, 1.35rem + 2vw, 3rem);      /* titulos seccion */
  --t-2xl:clamp(2.5rem, 1.6rem + 4.4vw, 5.25rem);  /* display         */
  --t-3xl:clamp(3rem, 1.4rem + 8vw, 8rem);         /* hero            */

  /* ── ESPACIADO ───────────────────────────────────────────────
     Un solo ritmo, tambien fluido. */
  --s-1:0.375rem;
  --s-2:0.625rem;
  --s-3:1rem;
  --s-4:1.5rem;
  --s-5:clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --s-6:clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  --s-7:clamp(3.5rem, 2.2rem + 6vw, 7.5rem);
  --s-8:clamp(5rem, 2.8rem + 10vw, 11rem);

  /* ── CURVAS CON INTENCION ────────────────────────────────────
     Antes todo compartia las mismas dos. */
  --ease:cubic-bezier(.22,.61,.36,1);         /* general            */
  --ease-out:cubic-bezier(.16,1,.3,1);        /* entradas           */
  --ease-in:cubic-bezier(.55,0,.9,.35);       /* salidas            */
  --ease-tap:cubic-bezier(.16,.84,.28,1);     /* micro-tactil       */
  --ease-slow:cubic-bezier(.65,0,.35,1);      /* recorridos largos  */

  --nav-h:64px;

  /* posicion termica de la seccion: 0 = hielo, 1 = brasa.
     La sobreescribe cada seccion; el acento la sigue. */
  --heat:0.5;
  --heat-tint:color-mix(in oklab, var(--cold), var(--hot) calc(var(--heat) * 100%));
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
section[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:16.5px;line-height:1.55;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:5px}

/* grano de papel: lo que separa una paleta plana calida de una cara */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   RETICULA DE CARRILES
   Una sola rejilla de pagina con carriles nombrados. Antes todo
   vivia dentro de un contenedor centrado de 1160px y salirse
   requeria margenes negativos; ahora cualquier hijo elige su
   ancho declarando su carril, y el sangrado es de primera clase.
   ============================================================ */
.grid{
  display:grid;
  --pad:clamp(20px,5vw,52px);
  --content:min(1100px, 100% - var(--pad) * 2);
  --wide:min(1440px, 100% - var(--pad) * 2);
  grid-template-columns:
    [full-start] minmax(var(--pad), 1fr)
      [wide-start] minmax(0, calc((var(--wide) - var(--content)) / 2))
        [content-start] var(--content) [content-end]
      minmax(0, calc((var(--wide) - var(--content)) / 2)) [wide-end]
    minmax(var(--pad), 1fr) [full-end];
}
.grid > *{grid-column:content}
.grid > .u-wide{grid-column:wide}
.grid > .u-full{grid-column:full}
/* la mitad izquierda o derecha del contenido, para composicion asimetrica */
.grid > .u-bleed-r{grid-column:content-start / full-end}
.grid > .u-bleed-l{grid-column:full-start / content-end}

/* .shell se conserva: es el contenedor de las secciones que no
   necesitan carriles, y sigue usandose en decenas de sitios. */
.shell{
  --shell-pad:clamp(20px,5vw,52px);
  --shell-inset:max(calc((100vw - 1100px) / 2), 0px);
  --shell-bleed:calc(var(--shell-inset) + var(--shell-pad));
  max-width:1100px;margin-inline:auto;padding-inline:var(--shell-pad);
}
.prose{max-width:56ch}
.band{padding-block:var(--s-7)}
.band--tight{padding-block:var(--s-6)}

/* ---- tipografia ---- */
.display{
  font-family:var(--serif);font-weight:300;font-variation-settings:"opsz" 60;
  letter-spacing:-.024em;line-height:1.02;text-wrap:balance;margin:0;
}
.h2{
  font-family:var(--serif);font-weight:300;font-variation-settings:"opsz" 40;
  font-size:var(--t-xl);line-height:1.08;letter-spacing:-.022em;
  margin:0;text-wrap:balance;
}
.h2--xl{font-size:var(--t-2xl);line-height:1.02;letter-spacing:-.03em}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ── APERTURAS DE SECCION ────────────────────────────────────
   Antes las nueve secciones abrian identicas: eyebrow mono en
   versalitas, titulo serif, contenido. Nueve veces la misma
   forma es lo que hace que una pagina se lea ensamblada en vez
   de compuesta, y el rotulo no cargaba informacion que el
   titular no diera ya. Ahora hay tres formas y se alternan. */
.open{margin-bottom:clamp(26px,3.4vw,48px)}

/* A — titular grande contra un contrapunto alineado a la base */
.open--count{display:grid;gap:14px clamp(24px,4vw,64px);align-items:end}
@media (min-width:820px){
  .open--count{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}
}
.open__aside{
  margin:0;color:var(--ink-2);font-size:var(--t-sm);line-height:1.5;
  padding-bottom:.5em;
}
@media (min-width:820px){
  .open__aside{
    padding-left:clamp(16px,1.6vw,22px);
    border-left:1px solid var(--line);
  }
}

/* B — titular sobre una regla, con la nota al otro extremo */
.open--rule{
  display:flex;align-items:baseline;gap:16px clamp(18px,2.5vw,32px);flex-wrap:wrap;
}
.open--rule::after{
  content:"";flex:1 1 60px;height:1px;background:var(--line);
  transform:translateY(-.35em);order:2;
}
.open--rule .h2{order:1}
.open__note{
  order:3;font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}

/* C — rail lateral: el titular vive en su propia columna */
.rail .h2{text-wrap:balance}
.rail__s{margin:14px 0 0;color:var(--ink-2);font-size:var(--t-sm);line-height:1.55;max-width:30ch}
/* El sticky solo tiene sentido donde hay una segunda columna que
   scrollee al lado. En las paginas interiores el rail cae dentro de
   un .shell plano, y ahi fijarlo no sostiene nada. */
@media (min-width:860px){.faq__grid > .rail{position:sticky;top:calc(var(--nav-h) + 28px)}}

/* cabecera de seccion: titulo izquierda, accion derecha */
.head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,40px);
}

/* ---- botones ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 26px;border-radius:var(--r-sm);
  font-weight:600;font-size:var(--t-sm);letter-spacing:-.005em;
  background:var(--brand);color:var(--on-brand);box-shadow:var(--sh-sm);
  transition:transform .12s var(--ease), filter .2s var(--ease), box-shadow .2s var(--ease);
  -webkit-tap-highlight-color:transparent;white-space:nowrap;
}
.btn:active{transform:scale(.978)}
@media (hover:hover){.btn:hover{filter:brightness(1.08);box-shadow:var(--sh-md)}}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
@media (hover:hover){.btn--ghost:hover{background:var(--surface);filter:none}}
.btn--block{width:100%}
.btn--sm{min-height:44px;padding:0 20px;font-size:var(--t-sm)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:40;height:var(--nav-h);
  background:rgba(244,238,229,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.nav.is-stuck{border-bottom-color:var(--line-soft)}
.nav__in{display:flex;align-items:center;gap:24px;height:100%}
.nav__mark{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0;min-height:44px}
.mark{
  width:30px;height:30px;flex:none;border-radius:9px;background:var(--brand);
  color:var(--on-brand);display:grid;place-items:center;
  font-family:var(--serif);font-size:var(--t-sm);
}
.nav__name{
  font-family:var(--serif);font-size:var(--t-md);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav__links{display:none;gap:28px;font-size:var(--t-sm);color:var(--ink-2)}
.nav__links a{transition:color .18s var(--ease)}
@media (hover:hover){.nav__links a:hover{color:var(--ink)}}
@media (min-width:860px){.nav__links{display:flex}}
.nav .btn{display:none}
@media (min-width:600px){.nav .btn{display:inline-flex}}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;overflow:hidden;background:var(--sunken)}
#heroCanvas{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.8) contrast(1.03);
}
/* La imagen es la protagonista, no un fondo aplanado a degradado.
   El velo solo protege la legibilidad detras del texto. */
/* En movil el texto cae sobre la mitad inferior de la foto: ahi el
   velo tiene que ser un lavado solido, no un radial que no alcanza. */
.hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      rgba(242,235,224,.30) 0%,
      rgba(242,235,224,.04) 22%,
      rgba(242,235,224,.62) 48%,
      rgba(242,235,224,.93) 74%,
      var(--ground) 100%);
}
@media (min-width:900px){
  .hero__veil{
    background:
      linear-gradient(180deg, rgba(244,238,229,.18) 0%, transparent 26%,
                              rgba(244,238,229,.4) 82%, var(--ground) 100%),
      radial-gradient(76% 112% at 4% 62%, rgba(244,238,229,.92) 0%, rgba(244,238,229,.44) 48%, transparent 76%);
  }
}
.hero__in{
  position:relative;
  padding-block:clamp(56px,11vw,150px) clamp(38px,7vw,110px);
  display:flex;align-items:flex-end;
  min-height:min(60svh,540px);   /* en movil se alargaba de mas */
}
@media (min-width:640px){.hero__in{min-height:min(72svh,640px)}}
@media (min-width:900px){.hero__in{min-height:min(84vh,780px)}}
.hero__copy{max-width:34rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,3vw,34px)}
@media (max-width:400px){.hero__cta .btn{width:100%}}
.hero__title{font-size:var(--t-3xl)}
.hero__title em{font-style:italic;font-weight:200;font-variation-settings:"opsz" 72}
.hero__sub{margin:18px 0 0;color:var(--ink-2);max-width:30ch;font-size:var(--t-md)}
/* ink-3 desaparece sobre la imagen del hero; ink-2 y una sombra
   minima lo sostienen sin ensuciar la tipografia */
/* El lugar caia en la franja transparente del velo, sobre madera
   oscura, y desaparecia. Va como chip, igual que el estado. */
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:22px}
.chips .status{margin-bottom:0}   /* la regla base la define despues; hace falta la especificidad */
.hero__place{
  display:inline-flex;align-items:center;margin:0;
  font-family:var(--mono);font-size:var(--t-3xs);line-height:1;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);
  min-height:34px;padding:0 14px;border-radius:99px;background:rgba(255,252,248,.82);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px var(--line-soft);
}
.hero__title,.hero__sub{text-shadow:0 1px 16px rgba(244,238,229,.55)}
.status{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;
  font-family:var(--mono);font-size:var(--t-3xs);line-height:1;letter-spacing:.05em;color:var(--ink-2);
  min-height:34px;padding:0 14px 0 11px;border-radius:99px;background:rgba(255,252,248,.82);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px var(--line-soft);
}
.status__dot{width:7px;height:7px;border-radius:99px;flex:none;background:var(--ink-3)}
.status.is-open .status__dot{background:var(--brand);animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 var(--brand-soft)}
  70%{box-shadow:0 0 0 8px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* Franja de proximos huecos. Vive despues de servicios, no en el
   hero: la primera pantalla es la marca, no un widget de reservas. */
.nextbar{
  display:flex;align-items:center;gap:clamp(12px,2vw,24px);flex-wrap:wrap;
  background:var(--surface);border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--line-soft);
  padding:clamp(14px,1.8vw,18px) clamp(16px,2vw,22px);
}
.nextbar__l{flex:1 1 auto;min-width:150px;line-height:1.25}
.nextbar__t{font-family:var(--serif);font-size:var(--t-md);font-variation-settings:"opsz" 20;display:block}
.nextbar__d{font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.next__slots{display:flex;gap:8px;flex:0 1 auto}
.next__slot{
  min-height:46px;padding:0 14px;border-radius:var(--r-sm);background:var(--ground);
  box-shadow:inset 0 0 0 1px var(--line-soft);
  font-size:var(--t-sm);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;
  transition:box-shadow .18s var(--ease), background .18s var(--ease), transform .12s var(--ease);
}
.next__slot:active{transform:scale(.96)}
@media (hover:hover){.next__slot:hover{background:var(--brand);color:var(--on-brand);box-shadow:none}}
@media (max-width:560px){
  .nextbar{gap:14px}
  .next__slots{flex:1 1 100%}
  .next__slot{flex:1}
  .nextbar .btn{flex:1 1 100%}
}

/* ============================================================
   BANDAS DE IMAGEN — el ritmo foto/texto/foto. Nunca tres
   bloques de texto seguidos.
   ============================================================ */
.imgband{position:relative;overflow:hidden;background:var(--sunken);aspect-ratio:21/9}
@media (max-width:760px){.imgband{aspect-ratio:3/2}}
.imgband canvas,.imgband img{width:100%;height:100%;object-fit:cover;display:block}
.imgband::after{
  content:"";position:absolute;inset:auto 0 0;height:88%;
  /* El pie paso de 1.75rem a escala de display, asi que ahora ocupa
     hasta cuatro lineas y sube a una zona donde el degradado viejo
     ya era casi transparente. Sobre una foto clara — hielo, nieve,
     una pared blanca del prospecto — el texto blanco desaparecia.
     Tres paradas en vez de dos: oscurece antes y sin borde visible. */
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(24,17,12,.30) 42%,
    rgba(20,14,10,.68) 78%,
    rgba(18,12,8,.80) 100%);
}
.imgband__c{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  margin:0;padding:clamp(20px,3vw,44px) clamp(20px,5vw,52px);
  color:#fff;font-family:var(--serif);font-weight:300;
  font-size:var(--t-lg);font-variation-settings:"opsz" 32;
  line-height:1.2;letter-spacing:-.02em;max-width:22ch;
  text-shadow:0 2px 20px rgba(0,0,0,.45);
}

/* ============================================================
   BARRA DE PRUEBA
   ============================================================ */
.proof{background:var(--surface);border-block:1px solid var(--line-soft)}
.proof__row{display:grid;grid-template-columns:repeat(2,1fr)}
.proof__row>*{padding:18px 6px;border-bottom:1px solid var(--line-soft)}
.proof__row>*:nth-child(odd){border-right:1px solid var(--line-soft)}
.proof__row>*:nth-last-child(-n+2){border-bottom:0}
@media (min-width:640px){
  .proof__row{grid-template-columns:repeat(4,1fr)}
  .proof__row>*{border-bottom:0!important}
  .proof__row>*:nth-child(odd){border-right:0}
  .proof__row>*:not(:last-child){border-right:1px solid var(--line-soft)}
}
.proof__v{
  font-family:var(--serif);font-weight:400;font-size:var(--t-lg);
  font-variation-settings:"opsz" 26;line-height:1.05;
  display:flex;align-items:center;gap:5px;
}
.proof__k{
  font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-top:4px;
}
.star{color:var(--hot-ink);font-size:var(--t-xs);line-height:1}

/* ============================================================
   SERVICIOS — el centro visual de la pagina. Tarjetas con imagen,
   no lista de texto. La paleta de cada imagen la manda el `kind`
   del servicio: frios en agua, calientes en brasa.
   ============================================================ */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.3vw,16px)}
@media (min-width:820px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  position:relative;display:flex;flex-direction:column;text-align:left;width:100%;
  border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  box-shadow:var(--sh-sm), inset 0 0 0 1px var(--line-soft);
  transition:transform .32s var(--ease-out), box-shadow .32s var(--ease);
}
.card:first-child{grid-column:span 2}
@media (hover:hover){.card:hover{transform:translateY(-3px);box-shadow:var(--sh-md), inset 0 0 0 1px var(--line)}}
.card:active{transform:scale(.99)}
.card__img{position:relative;aspect-ratio:3/4;background:var(--sunken);overflow:hidden}
.card:first-child .card__img{aspect-ratio:16/11}
.card__img canvas,.card__img img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .8s var(--ease-out)}
@media (hover:hover){.card:hover .card__img canvas,.card:hover .card__img img{transform:scale(1.05)}}
.card__spec{
  position:absolute;top:11px;left:11px;z-index:4;
  font-family:var(--mono);font-size:var(--t-3xs);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);
  background:rgba(255,252,248,.88);padding:5px 10px;border-radius:99px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.card__b{
  padding:14px clamp(13px,1.6vw,18px) clamp(14px,1.6vw,18px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex:1;
}
.card__n{
  font-family:var(--serif);font-size:var(--t-md);
  font-variation-settings:"opsz" 20;line-height:1.15;letter-spacing:-.014em;
}
.card__m{font-family:var(--mono);font-size:var(--t-3xs);color:var(--ink-3);letter-spacing:.06em;margin-top:6px}
.card__p{
  font-family:var(--serif);font-weight:300;font-size:var(--t-lg);
  font-variation-settings:"opsz" 28;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.card__p sup{font-size:.5em;vertical-align:.9em;color:var(--ink-3);margin-right:1px}

/* ---- tira compacta del equipo: presente, pero por debajo ---- */
.crew{
  display:flex;flex-wrap:wrap;gap:16px 30px;
  margin-top:28px;padding-top:24px;border-top:1px solid var(--line-soft);
}
.crew__p{display:flex;align-items:center;gap:11px}
.crew__a{
  width:46px;height:46px;border-radius:99px;overflow:hidden;flex:none;
  background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--line-soft);
  display:grid;place-items:center;
  font-family:var(--serif);font-size:var(--t-sm);font-weight:300;color:var(--brand);
}
.crew__a img,.crew__a canvas{width:100%;height:100%;object-fit:cover;display:block}
.crew__n{font-weight:600;font-size:var(--t-sm);line-height:1.2;letter-spacing:-.008em}
.crew__r{font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}

/* ============================================================
   MEMBRESIAS
   ============================================================ */
/* Superficies por lo que la seccion ES, no por herencia de otra */
.band--raised{background:var(--raised);border-block:1px solid var(--line-soft)}
.band--recess{background:var(--recess);border-block:1px solid var(--line);--ink-3:#6B6055}
.mem__grid{display:grid;gap:clamp(20px,3vw,40px)}
@media (min-width:940px){.mem__grid{grid-template-columns:minmax(300px,.85fr) minmax(0,1.3fr);align-items:start}}

.calc{
  background:var(--ground);border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px var(--line-soft);padding:clamp(22px,2.6vw,30px);
}
@media (min-width:940px){.calc{position:sticky;top:calc(var(--nav-h) + 24px)}}
.calc__q{font-size:var(--t-sm);color:var(--ink-2);margin:0 0 14px}
.calc__count{
  display:block;font-family:var(--serif);font-weight:300;font-size:var(--t-2xl);
  font-variation-settings:"opsz" 52;line-height:1;letter-spacing:-.035em;color:var(--brand);
}
.calc__count small{
  display:block;font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-top:8px;
}
.slider{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:12px 0 20px}
.slider::-webkit-slider-runnable-track{
  height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--brand) var(--fill,33%),var(--line) var(--fill,33%));
}
.slider::-moz-range-track{height:4px;border-radius:99px;background:var(--line)}
.slider::-moz-range-progress{height:4px;border-radius:99px;background:var(--brand)}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:99px;
  margin-top:-12px;background:var(--surface);
  box-shadow:0 1px 4px rgba(36,29,22,.24), inset 0 0 0 2px var(--brand);
  transition:transform .15s var(--ease);
}
.slider:active::-webkit-slider-thumb{transform:scale(1.14)}
.slider::-moz-range-thumb{
  width:28px;height:28px;border:0;border-radius:99px;background:var(--surface);
  box-shadow:0 1px 4px rgba(36,29,22,.24), inset 0 0 0 2px var(--brand);
}
.calc__out{display:grid;gap:1px;background:var(--line-soft);border-radius:var(--r-sm);overflow:hidden}
.calc__line{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:13px 15px;background:var(--ground);font-size:var(--t-sm);
}
.calc__line span{color:var(--ink-2)}
.calc__line b{font-weight:500;font-variant-numeric:tabular-nums}
.calc__line--save{background:var(--brand-soft)}
.calc__line--save span{color:var(--ink)}
.calc__line--save b{
  color:var(--brand);font-family:var(--serif);font-weight:400;
  font-size:var(--t-lg);font-variation-settings:"opsz" 24;
}

.tiers{display:grid;gap:12px}
@media (min-width:620px){.tiers{grid-template-columns:repeat(3,1fr);gap:14px}}
.tier{
  position:relative;background:var(--ground);border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--line-soft);
  padding:22px 20px;display:flex;flex-direction:column;
  transition:box-shadow .3s var(--ease);
}
.tier.is-best{box-shadow:inset 0 0 0 2px var(--brand)}
.tier__flag{
  position:absolute;top:-9px;left:20px;
  font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.1em;text-transform:uppercase;
  background:var(--brand);color:var(--on-brand);padding:3px 9px;border-radius:99px;
  opacity:0;transition:opacity .3s var(--ease);
}
.tier.is-best .tier__flag{opacity:1}
.tier__name{
  font-family:var(--serif);font-size:var(--t-lg);font-variation-settings:"opsz" 20;
  letter-spacing:-.012em;
}
.tier__price{
  font-family:var(--serif);font-weight:300;font-size:var(--t-xl);
  font-variation-settings:"opsz" 34;letter-spacing:-.03em;line-height:1.15;
  font-variant-numeric:tabular-nums;margin:2px 0 16px;
}
.tier__price small{font-family:var(--mono);font-size:var(--t-3xs);color:var(--ink-3);letter-spacing:.06em}
.tier__perks{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px;flex:1}
.tier__perks li{display:flex;gap:10px;font-size:var(--t-sm);color:var(--ink-2);line-height:1.4}
.tier__perks li::before{
  content:"";flex:none;width:5px;height:5px;border-radius:99px;
  background:var(--brand);margin-top:8px;
}

/* ============================================================
   PROTOCOLO — secuencia real, por eso va numerada
   ============================================================ */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:2px}
@media (min-width:820px){.steps{grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border-radius:var(--r-md);overflow:hidden}}
.step{display:flex;gap:16px;align-items:flex-start;padding:16px 0}
@media (min-width:820px){.step{flex-direction:column;gap:14px;background:var(--ground);padding:24px 22px}}
.step__n{
  flex:none;width:34px;height:34px;border-radius:99px;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;
  font-family:var(--mono);font-size:var(--t-3xs);color:var(--ink-2);
}
.step__t{font-weight:600;margin:5px 0 4px;letter-spacing:-.008em}
@media (min-width:820px){.step__t{margin-top:0}}
.step__d{margin:0;color:var(--ink-2);font-size:var(--t-sm);line-height:1.45}

/* ============================================================
   GALERIA
   ============================================================ */
/* ============================================================
   RESENAS
   ============================================================ */
.quotes{display:grid;gap:12px}
@media (min-width:760px){.quotes{grid-template-columns:repeat(3,1fr);gap:16px}}
.quote{
  background:var(--surface);border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--line-soft);padding:22px;
  display:flex;flex-direction:column;margin:0;
}
.quote__s{color:var(--hot-ink);font-size:var(--t-2xs);letter-spacing:.14em;margin-bottom:12px}
.quote__q{
  font-family:var(--serif);font-weight:300;font-size:var(--t-md);
  font-variation-settings:"opsz" 18;line-height:1.42;margin:0 0 16px;flex:1;text-wrap:pretty;
}
.quote__b{font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase}

/* ============================================================
   FAQ  ·  editorial: titulo izquierda, preguntas derecha
   ============================================================ */
.faq__grid{display:grid;gap:clamp(18px,3vw,48px)}
@media (min-width:860px){.faq__grid{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);align-items:start}}
.faq{display:grid;gap:1px;background:var(--line-soft);border-radius:var(--r-md);overflow:hidden}
.qa{background:var(--ground)}
.qa__q{
  width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:19px 20px;min-height:58px;font-weight:500;letter-spacing:-.005em;
}
.qa__i{flex:none;width:18px;height:18px;position:relative;color:var(--ink-3);transition:transform .35s var(--ease-out), color .2s var(--ease)}
.qa__i::before,.qa__i::after{content:"";position:absolute;inset:50% 0 auto;height:1.5px;background:currentColor;border-radius:2px}
.qa__i::after{transform:rotate(90deg);transition:transform .35s var(--ease-out)}
.qa.is-open .qa__i{transform:rotate(90deg);color:var(--brand)}
.qa.is-open .qa__i::after{transform:rotate(90deg) scaleX(0)}
.qa__a{overflow:hidden;display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease-out)}
.qa.is-open .qa__a{grid-template-rows:1fr}
.qa__a>div{min-height:0}
.qa__a p{margin:0;padding:0 20px 20px;color:var(--ink-2);font-size:var(--t-sm);line-height:1.55;max-width:56ch}

/* ============================================================
   VISITA
   ============================================================ */
.visit__grid{display:grid;gap:clamp(20px,3vw,44px)}
@media (min-width:820px){.visit__grid{grid-template-columns:1fr 1fr;align-items:start}}
.hours__row{
  display:flex;justify-content:space-between;gap:16px;padding:11px 13px;
  border-radius:var(--r-xs);font-size:var(--t-sm);font-variant-numeric:tabular-nums;
}
.hours__row span:first-child{color:var(--ink-2)}
.hours__row.is-today{background:var(--brand-soft);font-weight:500}
.hours__row.is-today span:first-child{color:var(--ink)}
.hours__row.is-today span:first-child::after{
  content:"today";font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand);margin-left:9px;
}
.map{
  position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/11;
  box-shadow:inset 0 0 0 1px var(--line-soft);background:var(--sunken);margin-bottom:16px;
}
.map canvas{width:100%;height:100%;display:block}
.map__pin{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-100%) rotate(-45deg);
  width:19px;height:19px;border-radius:99px 99px 99px 2px;background:var(--brand);
  box-shadow:0 3px 11px rgba(0,0,0,.28);
}
.map__pin::after{content:"";position:absolute;inset:5px;border-radius:99px;background:var(--on-brand)}
.addr{font-size:var(--t-sm);color:var(--ink-2);margin:0 0 16px;line-height:1.5}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ============================================================
   CONTACTO
   ============================================================ */
.form__grid{display:grid;gap:0 14px}
@media (min-width:620px){.form__grid{grid-template-columns:1fr 1fr}.form__grid .field--wide{grid-column:1 / -1}}
.field{display:block;margin-bottom:14px}
.field__l{
  display:block;font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:7px;
}
.field input,.field textarea{
  width:100%;background:var(--surface);border:0;box-shadow:inset 0 0 0 1px var(--line);
  border-radius:var(--r-sm);padding:14px 15px;min-height:52px;font-size:var(--t-sm);
  transition:box-shadow .2s var(--ease);
}
.field textarea{min-height:104px;resize:vertical;line-height:1.5}
.field input:focus,.field textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--brand)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.privacy{font-size:var(--t-2xs);color:var(--ink-3);margin:12px 0 0;line-height:1.5;display:flex;gap:9px}
.privacy svg{flex:none;margin-top:2px}

/* ============================================================
   CIERRE + FOOTER
   ============================================================ */
.closer{background:var(--brand);color:var(--on-brand);text-align:center}
.closer .display{font-size:var(--t-2xl)}
.closer p{color:rgba(255,252,248,.76);margin:16px auto 28px;max-width:32ch}
.closer .btn{background:var(--on-brand);color:var(--brand)}
.footer{padding-top:36px;padding-bottom:calc(96px + env(safe-area-inset-bottom));font-size:var(--t-xs);color:var(--ink-3)}
@media (min-width:600px){.footer{padding-bottom:40px}}
/* En un negocio local el pie es lo que la gente de verdad lee:
   es parte de la presencia, no una linea de creditos. */
.footer__g{display:grid;gap:30px 40px;grid-template-columns:1fr}
@media (min-width:560px){.footer__g{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.footer__g{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer__mark{font-family:var(--serif);font-size:var(--t-lg);color:var(--ink);letter-spacing:-.012em}
.footer__h{
  font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 12px;
}
.footer__st{margin:10px 0 0;font-size:var(--t-2xs)}
.footer__hr{display:flex;justify-content:space-between;gap:14px;font-variant-numeric:tabular-nums;padding:2px 0}
.footer__hr b{font-weight:400;color:var(--ink-2)}
.footer a{color:var(--ink-2)}
@media (hover:hover){.footer a:hover{color:var(--ink)}}
.footer__l{
  margin-top:26px;padding-top:18px;border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.05em;
  display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between;
}

/* ---- barra inferior: solo movil, donde no hay nav visible ---- */
.bookbar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  padding:10px 18px calc(10px + env(safe-area-inset-bottom));
  background:rgba(244,238,229,.93);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--line-soft);
  display:flex;align-items:center;gap:14px;
  transform:translateY(120%);transition:transform .42s var(--ease-out);
}
.bookbar.is-visible{transform:translateY(0)}
@media (min-width:600px){.bookbar{display:none}}
.bookbar__f{flex:1;min-width:0;line-height:1.2}
.bookbar__f small{
  display:block;font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}
.bookbar__f b{font-family:var(--serif);font-weight:400;font-size:var(--t-lg);font-variation-settings:"opsz" 20}

/* ============================================================
   OVERLAY DE BOOKING
   ============================================================ */
.sheet{
  position:fixed;inset:0;z-index:70;background:var(--ground);
  display:flex;flex-direction:column;visibility:hidden;
  transform:translateY(100%);transition:transform .46s var(--ease-out), visibility .46s;
}
.sheet.is-open{transform:translateY(0);visibility:visible}
@media (min-width:760px){
  .sheet{
    inset:auto;left:50%;top:50%;width:min(560px,92vw);max-height:min(88vh,780px);
    height:auto;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);
    transform:translate(-50%,-46%) scale(.97);opacity:0;
    transition:transform .34s var(--ease-out), opacity .28s var(--ease), visibility .34s;
  }
  .sheet.is-open{transform:translate(-50%,-50%) scale(1);opacity:1}
  .scrim{
    position:fixed;inset:0;z-index:69;background:rgba(36,29,22,.42);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;visibility:hidden;transition:opacity .3s var(--ease), visibility .3s;
  }
  .scrim.is-open{opacity:1;visibility:visible}
}
.scrim{display:none}
@media (min-width:760px){.scrim{display:block}}

.sheet__top{
  flex:none;padding:14px 20px;padding-top:calc(14px + env(safe-area-inset-top));
  border-bottom:1px solid var(--line-soft);background:var(--surface);
}
@media (min-width:760px){.sheet__top{padding-top:14px}}
.sheet__bar{display:flex;align-items:center;justify-content:space-between;gap:14px}
.sheet__t{font-family:var(--serif);font-size:var(--t-md);font-variation-settings:"opsz" 18;letter-spacing:-.01em}
.ib{width:44px;height:44px;border-radius:99px;flex:none;display:grid;place-items:center;color:var(--ink-2);transition:background .2s var(--ease)}
@media (hover:hover){.ib:hover{background:var(--sunken);color:var(--ink)}}
.prog{display:flex;gap:5px;margin-top:12px}
.prog__s{flex:1;height:3px;border-radius:99px;background:var(--line);overflow:hidden}
.prog__s::after{
  content:"";display:block;height:100%;width:100%;background:var(--brand);
  transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--ease-out);
}
.prog__s.is-done::after{transform:scaleX(1)}
.summary{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-height:16px;margin-top:11px;
  font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.05em;color:var(--ink-3);
}
.summary b{color:var(--ink-2);font-weight:400}
.summary i{font-style:normal;color:var(--line)}
.sheet__scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pane{padding:24px 20px 30px}
.sheet__foot{
  flex:none;padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-soft);background:var(--surface);
}
@media (min-width:760px){.sheet__foot{padding-bottom:14px}}
.pane__t{
  font-family:var(--serif);font-weight:300;font-size:var(--t-lg);
  font-variation-settings:"opsz" 28;letter-spacing:-.022em;line-height:1.14;margin:0 0 6px;
}
.pane__s{color:var(--ink-2);font-size:var(--t-sm);margin:0 0 20px}

.pick{display:grid;gap:9px}
.pick__o{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--surface);border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--line-soft);padding:15px 16px;min-height:64px;
  transition:box-shadow .2s var(--ease), transform .12s var(--ease);
}
.pick__o:active{transform:scale(.99)}
.pick__o.is-sel{box-shadow:inset 0 0 0 2px var(--brand)}
@media (hover:hover){.pick__o:hover{box-shadow:inset 0 0 0 1px var(--ink-3)}.pick__o.is-sel:hover{box-shadow:inset 0 0 0 2px var(--brand)}}
.pick__b{width:3px;align-self:stretch;border-radius:99px;flex:none}
.pick__m{flex:1;min-width:0}
.pick__n{display:block;font-weight:500;letter-spacing:-.008em}
.pick__x{display:block;font-family:var(--mono);font-size:var(--t-3xs);color:var(--ink-3);letter-spacing:.06em;margin-top:3px}
.pick__p{font-family:var(--serif);font-size:var(--t-lg);font-variation-settings:"opsz" 22;font-variant-numeric:tabular-nums}

.dates{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 20px 10px;margin-inline:-20px;scroll-snap-type:x proximity}
.dates::-webkit-scrollbar{display:none}
.date{
  scroll-snap-align:center;flex:0 0 62px;padding:12px 0;border-radius:var(--r-sm);
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-soft);text-align:center;
  transition:box-shadow .2s var(--ease), background .2s var(--ease);
}
.date.is-sel{background:var(--brand);color:var(--on-brand);box-shadow:none}
.date__w{font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.1em;text-transform:uppercase;opacity:.62}
.date__d{font-family:var(--serif);font-size:var(--t-lg);font-variation-settings:"opsz" 22;line-height:1.25}
.date__m{font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.1em;text-transform:uppercase;opacity:.62}

.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (min-width:480px){.slots{grid-template-columns:repeat(4,1fr)}}
.slot{
  min-height:50px;border-radius:var(--r-sm);background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line-soft);font-variant-numeric:tabular-nums;
  font-size:var(--t-sm);font-weight:500;
  transition:box-shadow .2s var(--ease), background .2s var(--ease), transform .12s var(--ease);
}
.slot:active{transform:scale(.96)}
.slot.is-sel{background:var(--brand);color:var(--on-brand);box-shadow:none}
@media (hover:hover){.slot:not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--ink-3)}}
.slot:disabled{
  color:var(--ink-3);background:transparent;box-shadow:inset 0 0 0 1px var(--line-soft);
  cursor:not-allowed;text-decoration:line-through;opacity:.5;
}
.note{font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.05em;color:var(--ink-3);margin:16px 0 0}

.done{text-align:center;padding-top:10px}
.seal{width:74px;height:74px;border-radius:99px;margin:0 auto 20px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center}
.seal svg{stroke-dasharray:34;stroke-dashoffset:34;animation:draw .5s .16s var(--ease-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.ticket{text-align:left;background:var(--surface);border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line-soft);margin:22px 0 16px;overflow:hidden}
.ticket__r{display:flex;justify-content:space-between;gap:14px;padding:13px 17px;font-size:var(--t-sm);border-bottom:1px dashed var(--line-soft)}
.ticket__r:last-child{border-bottom:0}
.ticket__r span{color:var(--ink-2)}
.ticket__r b{font-weight:500;text-align:right}
.ref{font-family:var(--mono);letter-spacing:.08em}
.sms{background:var(--sunken);border-radius:var(--r-md);padding:16px;text-align:left;margin-bottom:18px}
.sms__h{font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:11px}
.sms__b{background:var(--surface);border-radius:16px 16px 16px 5px;padding:12px 15px;font-size:var(--t-xs);line-height:1.5;color:var(--ink-2);box-shadow:var(--sh-sm);max-width:90%}

/* ============================================================
   LA DIFERENCIA — banda a sangre. Rompe la alternancia
   hueso/blanco y es donde el sistema de temperatura argumenta.
   ============================================================ */
/* La banda que argumenta ya no es marron calido — era el cuarto
   crema de una pagina de cremas y no producia ninguna tension. Va
   al extremo frio del propio eje del negocio: la pagina oscila
   crema → hielo → crema → brasa en vez de quedarse en un solo
   registro tibio. El color no es nuevo; es --cold llevado al fondo. */
.band--dark{
  background:var(--ice);color:var(--ice-ink);
  --line-on:rgba(216,230,234,.15);
}
.band--dark .h2{color:#EFF7F9}
.band--dark .rail__s{color:rgba(216,230,234,.62)}
.diff{display:grid;gap:0;margin-top:clamp(22px,3vw,38px)}
.diff__c{padding:24px 0;border-top:1px solid var(--line-on,rgba(216,230,234,.15))}
.diff__c:first-child{border-top:0;padding-top:6px}
@media (min-width:760px){
  .diff{
    grid-template-columns:repeat(3,1fr);gap:1px;
    background:var(--line-on,rgba(216,230,234,.15));
  }
  /* hereda el fondo de la banda en vez de repetir el hex: la misma
     rejilla sirve sobre hielo y sobre cualquier superficie futura */
  .diff__c{background:var(--ice);padding:30px 28px;border-top:0}
  .diff__c:first-child{padding-top:30px}
}
.diff__m{
  font-family:var(--serif);font-weight:300;font-size:var(--t-2xl);
  font-variation-settings:"opsz" 60;line-height:.92;letter-spacing:-.042em;
  color:var(--ice-lift);margin-bottom:16px;
}
.diff__k{font-weight:600;margin:0 0 6px;letter-spacing:-.008em}
.diff__d{margin:0;font-size:var(--t-sm);line-height:1.5;color:rgba(216,230,234,.62)}

/* ============================================================
   HISTORIA — el centro emocional, y la seccion que mas halaga
   al dueno que recibe el demo.
   ============================================================ */
.story__grid{display:grid;gap:clamp(24px,4vw,56px);align-items:center}
@media (min-width:820px){.story__grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}}
.portrait{
  position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;
  background:var(--sunken);box-shadow:var(--sh-md);
}
.portrait canvas,.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.story__body{font-size:var(--t-md);color:var(--ink-2);line-height:1.6;max-width:46ch;margin:14px 0 24px}
.story__sig{font-family:var(--serif);font-style:italic;font-weight:300;font-size:var(--t-lg);font-variation-settings:"opsz" 22;margin:0}
.story__sig small{
  display:block;font-family:var(--mono);font-style:normal;font-size:var(--t-3xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:8px;
}
/* Degradacion: muchos prospectos no tienen retrato en su feed.
   Sin foto la seccion se vuelve una cita grande, no un hueco. */
.story--noface .story__grid{grid-template-columns:1fr;max-width:44rem}
.story__pull{
  font-family:var(--serif);font-weight:300;font-size:var(--t-xl);
  font-variation-settings:"opsz" 40;line-height:1.22;letter-spacing:-.022em;
  margin:0 0 20px;max-width:24ch;text-wrap:balance;
}

/* ============================================================
   EQUIPO
   ============================================================ */
/* ---- alianzas ---- */
.partners{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 28px;
  padding-top:26px;margin-top:30px;border-top:1px solid var(--line-soft);
}
.partners__l{font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.partners__n{font-family:var(--serif);font-size:var(--t-md);color:var(--ink-2)}

/* ---- acceso ---- */
.access{display:grid;gap:11px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line-soft)}
.access__r{display:flex;gap:14px;font-size:var(--t-sm)}
.access__k{
  font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);flex:0 0 88px;padding-top:3px;
}
.access__v{color:var(--ink-2)}

/* ---- oferta ---- */
.closer__terms{
  font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,252,248,.5);margin:22px 0 0;
}

/* ---- reveal ----
   El contenido primario nunca depende de la animacion: si el JS no
   corre o el observer no dispara, todo se ve igual. Solo cuando el
   script confirma soporte se activa el ocultamiento. */
.rv{opacity:1;transform:none}
html.js-rv .rv{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
html.js-rv .rv.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  html.js-rv .rv{opacity:1;transform:none}
}


/* ============================================================
   HUECOS DE IMAGEN
   El lienzo procedural vive debajo de la foto. Si la foto no carga
   — sin red, ID caido, prospecto sin material — queda a la vista y
   la pagina nunca muestra un agujero.
   ============================================================ */
.ph{position:absolute;inset:0;display:block;overflow:hidden;background:var(--recess);isolation:isolate}
.ph canvas,.ph img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.ph img{opacity:0;transition:opacity .6s var(--ease-out)}
.ph.is-loaded img{opacity:1}
@media (prefers-reduced-motion: reduce){.ph img{transition:none}}

/* el hero cambia el lienzo animado por la foto cuando llega */
/* el hero inserta su <img> directo, no por hueco .ph: recibe el
   mismo gradeo para que no sea la unica foto sin tratar */
.hero__photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--focus, 50% 45%);
  filter:saturate(.88) contrast(1.06) brightness(1.02) sepia(.06);
}
/* grano y viñeta del hero, sobre la foto y bajo el velo */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 88% at 50% 38%, transparent 46%, rgba(28,20,14,.30) 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.14;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}
.hero__veil{z-index:2}
.hero__in{z-index:3}

/* las tarjetas escalan la foto igual que escalaban el lienzo */
.card__img .ph img,.card__img .ph canvas{transition:transform .8s var(--ease-out), opacity .6s var(--ease-out)}
@media (hover:hover){.card:hover .card__img .ph img,.card:hover .card__img .ph canvas{transform:scale(1.05)}}

/* ============================================================
   HERO DE PAGINA INTERIOR — mas bajo que el del home, sin foto
   ============================================================ */
.phero{padding-block:clamp(78px,12vw,132px) clamp(30px,4vw,50px);background:var(--ground)}
.phero__t{font-size:var(--t-2xl)}
.phero__t em{font-style:italic;font-weight:200;font-variation-settings:"opsz" 72}
.phero__s{margin:22px 0 0;color:var(--ink-2);max-width:46ch;font-size:var(--t-md)}

/* ============================================================
   services.html — cada servicio en detalle, alternando lado
   ============================================================ */
.detail{display:grid;gap:clamp(38px,6vw,86px)}
.det{display:grid;gap:clamp(20px,3vw,44px);align-items:center;margin:0}
@media (min-width:900px){
  .det{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .det--flip .det__img{order:2}
}
.det__img{position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md)}
@media (min-width:900px){.det__img{aspect-ratio:1}}
.det__spec{
  font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 10px;
}
.det__n{
  font-family:var(--serif);font-weight:300;font-size:var(--t-xl);
  font-variation-settings:"opsz" 36;letter-spacing:-.022em;line-height:1.08;margin:0;
}
.det__lead{margin:14px 0 26px;color:var(--ink-2);font-size:var(--t-md);max-width:42ch}
.det__h{
  font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 10px;
}
.det__h--warn{color:var(--hot-ink)}
.det__list{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:9px}
.det__list li{display:flex;gap:11px;font-size:var(--t-sm);color:var(--ink-2);line-height:1.45}
.det__list li::before{content:"";flex:none;width:5px;height:5px;border-radius:99px;background:var(--brand);margin-top:8px}
.det__split{display:grid;gap:20px;margin-bottom:28px}
@media (min-width:520px){.det__split{grid-template-columns:1fr 1fr;gap:26px}}
.det__t{margin:0;font-size:var(--t-sm);color:var(--ink-2);line-height:1.45}
.det__foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.det__p{
  font-family:var(--serif);font-weight:300;font-size:var(--t-xl);font-variation-settings:"opsz" 40;
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;
}
.det__p sup{font-size:.42em;vertical-align:.95em;color:var(--ink-3);margin-right:2px}

/* ============================================================
   about.html — equipo completo y galeria
   ============================================================ */
.faces{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,30px)}
@media (min-width:760px){.faces{grid-template-columns:repeat(4,1fr)}}
.face__img{
  position:relative;aspect-ratio:4/5;border-radius:var(--r-md);
  overflow:hidden;margin-bottom:14px;box-shadow:var(--sh-sm);
}
.face__n{font-weight:600;margin:0;letter-spacing:-.008em}
.face__r{font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:4px 0 0}
.face__c{margin:8px 0 0;font-size:var(--t-xs);color:var(--ink-2);line-height:1.4}

.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(8px,1.2vw,16px)}
@media (min-width:760px){.gal{grid-template-columns:repeat(3,1fr)}}
.gal__i{position:relative;margin:0;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden}
/* sin span: 6 fotos llenan dos filas exactas, sin huerfana */
.gal__c{
  position:absolute;left:0;right:0;bottom:0;z-index:4;padding:14px 16px;color:#fff;
  font-size:var(--t-2xs);font-weight:500;
  background:linear-gradient(180deg,transparent,rgba(24,17,12,.68));
  padding-top:40px;
}

/* ============================================================
   BOOKING — que se vea lo que estas reservando
   ============================================================ */
.sheetHero{display:flex;align-items:center;gap:13px;margin-top:12px}
.sheetHero .ph{
  position:relative;inset:auto;flex:none;width:56px;height:56px;
  border-radius:var(--r-sm);overflow:hidden;
}
.sheetHero__t{min-width:0;line-height:1.3}
.sheetHero__t b{display:block;font-weight:600;font-size:var(--t-sm);letter-spacing:-.008em}
.sheetHero__t span{
  display:block;font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.06em;
  color:var(--ink-3);margin-top:3px;
}
.pick__th{
  position:relative;flex:none;width:52px;height:52px;
  border-radius:var(--r-xs);overflow:hidden;
}
.ticket__img{position:relative;aspect-ratio:5/2;overflow:hidden}

/* ============================================================
   TRATAMIENTO SISTEMATICO DE IMAGEN
   Esta es la decision de mas impacto en el negocio. Hoy el sitio
   se ve bien con fotos de Unsplash; los 300 prospectos traeran
   fotos de IG mal iluminadas, saturadas y en formatos raros.
   El tratamiento va en el sistema, no en la foto: cualquier
   imagen entra y sale art-dirigida.
   ============================================================ */
.ph img{
  /* gradeo hacia la paleta calida: baja la saturacion chillona de
     un feed de IG, sube el contraste, y calienta las sombras */
  filter:saturate(.88) contrast(1.06) brightness(1.02) sepia(.06);
}
/* capa de color: unifica fotos de temperaturas de color dispares */
.ph::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(120% 100% at 50% 0%, transparent 42%, rgba(28,20,14,.18) 100%),
    linear-gradient(180deg, rgba(196,150,96,.07), rgba(40,60,68,.09));
  mix-blend-mode:multiply;
}
/* Levantamiento de sombras. Una foto de IG mal iluminada llega casi
   negra y el multiply la hunde mas; esto le devuelve rango sin
   lavar las buenas, porque `screen` apenas toca los tonos altos. */
.ph .lift{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg, rgba(120,96,72,.16), rgba(90,80,70,.10));
  mix-blend-mode:screen;
}
/* grano sobre la foto, no solo sobre la pagina: es lo que iguala
   una foto de celular con una de camara */
.ph::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
/* una foto vertical de IG no debe romper el layout: el encuadre lo
   fija el contenedor, no la imagen */
.ph img{object-position:var(--focus, 50% 45%)}

/* ============================================================
   MOVIMIENTO CON FIRMA
   ============================================================ */
/* Transiciones entre paginas. Con tres paginas esto convierte un
   sitio en algo que se siente aplicacion. Donde no hay soporte,
   simplemente navega normal. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .28s var(--ease-in) both}
::view-transition-new(root){animation:vtIn .42s var(--ease-out) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-8px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px)}}

/* Parallax ligado al scroll en las bandas de imagen: es el gesto
   que mas profundidad da por menos codigo. Sin soporte, no pasa nada. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .imgband .ph img{
      will-change:transform;
      animation:drift linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    @keyframes drift{
      from{transform:scale(1.16) translateY(-3.5%)}
      to{transform:scale(1.16) translateY(3.5%)}
    }
    /* el titular de la banda entra a otro ritmo que la foto */
    .imgband__c{
      animation:capIn linear both;
      animation-timeline:view();
      animation-range:cover 6% cover 46%;
    }
    @keyframes capIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  }
}

/* Lavado termico en las tarjetas: el color del `kind` entra sobre
   la foto. El sistema de temperatura deja de ser una barra de 3px. */
.card__img .ph::after{transition:background .5s var(--ease)}
@media (hover:hover){
  .card:hover .card__img .ph::after{
    background:
      radial-gradient(120% 100% at 50% 0%, transparent 30%, rgba(28,20,14,.26) 100%),
      linear-gradient(180deg, transparent, var(--card-heat, transparent));
  }
}

/* Entrada orquestada del hero: escalonada de verdad, no el mismo
   fade-up que reciben otros 22 elementos. */
@media (prefers-reduced-motion: no-preference){
  .hero__copy > *{animation:heroIn .9s var(--ease-out) both}
  .hero__copy > :nth-child(1){animation-delay:.05s}
  .hero__copy > :nth-child(2){animation-delay:.14s}
  .hero__copy > :nth-child(3){animation-delay:.23s}
  .hero__copy > :nth-child(4){animation-delay:.34s}
  .hero__copy > :nth-child(5){animation-delay:.45s}
  @keyframes heroIn{from{opacity:0;transform:translateY(18px)}}
  /* la foto del hero respira, muy lento — el sujeto es breathwork */
  .hero__photo{animation:breathe 26s var(--ease-slow) infinite alternate}
  @keyframes breathe{from{transform:scale(1.03)}to{transform:scale(1.09)}}
}


/* ============================================================
   COMPOSICION EDITORIAL
   19 de 26 rejillas eran columnas iguales dentro de un contenedor
   centrado. Columna centrada + rejillas simetricas + apilado
   vertical *es* la forma de una plantilla. Aqui se rompe.
   ============================================================ */

/* --- asimetria por defecto en las secciones de dos columnas --- */
@media (min-width:900px){
  .story__grid{grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:var(--s-6)}
  .mem__grid{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
  .faq__grid{grid-template-columns:minmax(0,.55fr) minmax(0,1fr)}
  .visit__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.24fr);gap:var(--s-6)}
}

/* --- el retrato sale del contenedor por la izquierda --- */
@media (min-width:1100px){
  .story{overflow:hidden}
  .story__grid .portrait{
    /* -padding solo cancelaba el padding y lo dejaba a ras del
       contenedor; el sangrado real necesita tambien el margen auto */
    margin-left:calc(-1 * var(--shell-bleed));
    border-radius:0 var(--r-xl) var(--r-xl) 0;
    aspect-ratio:4/4.6;
  }
}

/* --- las tarjetas de servicio dejan de ser una rejilla pareja --- */
@media (min-width:820px){
  .cards{grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.2vw,18px)}
  .card{grid-column:span 2}
  .card:first-child{grid-column:span 4}
  .card:nth-child(2){grid-column:span 2}
  .card:nth-child(3){grid-column:span 2}
  .card:nth-child(4){grid-column:span 2}
  .card:nth-child(5){grid-column:span 2}
  .card:first-child .card__img{aspect-ratio:16/10}
}

/* --- el titular del hero invade la foto y crece de verdad --- */
.hero__title{font-size:var(--t-3xl);letter-spacing:-.035em;line-height:.94}
.hero__copy{max-width:min(20ch, 100%)}
@media (min-width:900px){
  .hero__copy{max-width:none;width:min(58ch,72%)}
  /* el tipo se desborda ligeramente del carril: gesto deliberado,
     en un solo lugar, para que siga siendo un gesto */
  .hero__title{margin-left:-.055em}
}

/* --- la banda oscura ocupa todo el ancho y respira mas --- */
.band--dark{padding-block:var(--s-7)}
.diff__m{font-size:var(--t-2xl);letter-spacing:-.04em}

/* --- el pie de la banda de imagen, mas grande y editorial --- */
.imgband__c{font-size:var(--t-xl);max-width:18ch}

/* --- specs como display de datos, no como texto pequeño --- */
.det__spec, .card__spec, .row__m{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.det__spec{
  font-size:var(--t-3xs);letter-spacing:.16em;
  color:var(--heat-tint);
}
.card__spec{color:var(--ink);font-weight:500}

/* --- foco visible y consistente en todo lo interactivo --- */
:focus-visible{outline:2px solid var(--heat-tint);outline-offset:3px}

/* --- fisica del tacto: presion real, no solo un scale --- */
.btn:active{transform:scale(.97) translateY(1px)}
.btn{transition:transform .16s var(--ease-tap), filter .2s var(--ease), box-shadow .25s var(--ease)}
.card:active{transform:scale(.992) translateY(0)}

/* Los pseudo-elementos de view-transition viven fuera del arbol del
   documento, asi que el reset general con `*` no los alcanza. Necesitan
   su propio guard o seguirian animando con movimiento reducido. */
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){animation:none!important}
  .hero__photo{animation:none!important}
}


/* Las caras necesitan menos tratamiento que el resto. El gradeo y la
   viñeta que hacen atmosferica una foto de espacio dejan un retrato
   apagado, y un equipo tiene que verse cercano, no sombrio. */
.face__img .ph img,.crew__a img,.portrait .ph img{
  filter:saturate(.94) contrast(1.03) brightness(1.06) sepia(.03);
}
.face__img .ph::after,.portrait .ph::after{
  background:
    radial-gradient(130% 110% at 50% 25%, transparent 62%, rgba(28,20,14,.12) 100%),
    linear-gradient(180deg, rgba(196,150,96,.04), rgba(40,60,68,.05));
}
.face__img .ph::before,.portrait .ph::before{opacity:.09}
.face__img .ph .lift,.portrait .ph .lift{
  background:linear-gradient(180deg, rgba(140,116,92,.20), rgba(110,100,88,.12));
}


/* ════════════════════════════════════════════════════════════
   ░░ EL ACTO TERMICO ░░
   El unico momento de firma de la pagina, y la unica seccion que
   no comparte forma con ninguna otra: sin contenedor, sin apertura,
   sin rejilla. Dos temperaturas partidas por una costura diagonal
   que se desplaza con el scroll — el frio gana terreno, despues el
   calor. Es literalmente el producto: terapia de contraste.
   Nada de esto usa un color nuevo. --cold y --hot ya estaban en el
   sistema desde el principio, viviendo en una barra de 3px.
   ════════════════════════════════════════════════════════════ */
@property --seam{syntax:"<percentage>";inherits:true;initial-value:50%}

.act{background:var(--ice);color:var(--ice-ink)}
.split{
  --seam:50%;
  --skew:4.5vw;          /* la diagonal: 0 seria una particion tibia */
  position:relative;display:grid;isolation:isolate;
  height:min(94svh,880px);overflow:hidden;background:var(--ice);
}
.split__side{grid-area:1/1;position:relative;overflow:hidden;display:grid}
.split__ph{position:absolute;inset:0}
.split__ph .ph{position:absolute;inset:0}

/* Los dos lados ocupan la misma celda y se recortan complementarios,
   asi que la costura es una sola arista compartida y nunca deja un
   hilo de fondo entre ambos. */
.split__side--cold{
  clip-path:polygon(0 0, calc(var(--seam) + var(--skew)) 0,
                    calc(var(--seam) - var(--skew)) 100%, 0 100%);
}
.split__side--hot{
  clip-path:polygon(calc(var(--seam) + var(--skew)) 0, 100% 0,
                    100% 100%, calc(var(--seam) - var(--skew)) 100%);
}
.split__seam{
  grid-area:1/1;position:relative;z-index:6;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,251,244,.14),rgba(255,251,244,.72),rgba(255,251,244,.14));
  clip-path:polygon(
    calc(var(--seam) + var(--skew)) 0, calc(var(--seam) + var(--skew) + 1.5px) 0,
    calc(var(--seam) - var(--skew) + 1.5px) 100%, calc(var(--seam) - var(--skew)) 100%);
}

/* Duotono por temperatura. Aqui el tratamiento deja de ser sutil:
   una foto de plunge tiene que leerse helada y una de sauna tiene
   que quemar. Tambien es el seguro contra la foto mala del prospecto
   — cualquier imagen que entre sale en la temperatura correcta. */
.split__side--cold .ph img{filter:saturate(.32) contrast(1.22) brightness(.82)}
.split__side--hot  .ph img{filter:saturate(.38) contrast(1.18) brightness(.86)}
.split__side::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
}
.split__side--cold::after{
  background:linear-gradient(200deg,rgba(12,42,58,.82),rgba(20,86,104,.58) 55%,rgba(8,26,34,.9));
  mix-blend-mode:multiply;
}
.split__side--hot::after{
  background:linear-gradient(200deg,rgba(70,18,6,.86),rgba(168,66,22,.52) 52%,rgba(38,10,4,.92));
  mix-blend-mode:multiply;
}
/* devuelve rango a las luces que el multiply hundio */
.split__side--cold .split__ph::after,
.split__side--hot  .split__ph::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen;
}
.split__side--cold .split__ph::after{background:linear-gradient(200deg,rgba(96,168,196,.30),transparent 62%)}
.split__side--hot  .split__ph::after{background:linear-gradient(200deg,rgba(226,132,66,.32),transparent 62%)}

/* El instante tipografico enorme. Una cifra por lado, en diagonal
   entre si, siguiendo la inclinacion de la costura. */
.split__fig{
  position:relative;z-index:5;margin:0;
  padding:clamp(22px,4.5vw,64px);
  display:flex;align-items:baseline;flex-wrap:wrap;
  line-height:.82;
}
.split__side--cold .split__fig{align-self:start;justify-self:start;color:#CFE8F0}
.split__side--hot  .split__fig{align-self:end;justify-self:end;color:#FBD9C2;text-align:right}
.split__n{
  font-family:var(--serif);font-weight:200;font-variation-settings:"opsz" 72;
  font-size:clamp(4.5rem,15vw,13rem);letter-spacing:-.055em;
  text-shadow:0 4px 60px rgba(0,0,0,.4);
}
.split__d{
  font-family:var(--serif);font-weight:200;font-variation-settings:"opsz" 40;
  font-size:clamp(1.5rem,4vw,3.4rem);letter-spacing:-.03em;opacity:.72;
  margin-left:.06em;
}
.split__k{
  flex:1 0 100%;margin-top:clamp(10px,1.4vw,18px);
  font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.17em;
  text-transform:uppercase;opacity:.78;
}
.split__legend{
  position:absolute;z-index:7;left:50%;bottom:clamp(18px,3vw,34px);
  transform:translateX(-50%);margin:0;white-space:nowrap;
  font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.19em;
  text-transform:uppercase;color:rgba(255,251,244,.82);
  text-shadow:0 2px 18px rgba(0,0,0,.6);
}

/* En movil la particion vertical dejaria 170px por lado y una cifra
   de tres digitos no cabe. Se vuelve horizontal, misma diagonal. */
@media (max-width:720px){
  .split{height:min(88svh,720px);--skew:9vh}
  .split__side--cold{
    clip-path:polygon(0 0, 100% 0, 100% calc(var(--seam) - var(--skew)),
                      0 calc(var(--seam) + var(--skew)));
  }
  .split__side--hot{
    clip-path:polygon(0 calc(var(--seam) + var(--skew)), 100% calc(var(--seam) - var(--skew)),
                      100% 100%, 0 100%);
  }
  .split__seam{
    clip-path:polygon(
      0 calc(var(--seam) + var(--skew)), 100% calc(var(--seam) - var(--skew)),
      100% calc(var(--seam) - var(--skew) + 1.5px), 0 calc(var(--seam) + var(--skew) + 1.5px));
  }
  .split__side--hot .split__fig{text-align:left;justify-self:start}
  .split__legend{bottom:auto;top:50%;transform:translate(-50%,-50%)}
}

/* La costura se mueve con el scroll: el frio gana terreno y despues
   lo cede. Es la interaccion memorable, y no pide que nadie haga
   nada. Sin soporte, la particion se queda quieta al 50% y la
   seccion se ve exactamente igual de compuesta. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .split{animation:seam linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes seam{from{--seam:34%}to{--seam:66%}}
  }
}

/* El argumento cae sobre el hielo, sin apertura propia: sigue siendo
   el mismo acto, no una seccion nueva. */
.act__arg{padding-block:clamp(52px,7vw,104px)}
.act__arg .h2{color:#EFF7F9;max-width:16ch}
.act .diff{margin-top:clamp(30px,4vw,52px)}
.act .diff__c{border-top-color:rgba(216,230,234,.15)}
@media (min-width:760px){
  .act .diff{background:rgba(216,230,234,.15)}
  .act .diff__c{background:var(--ice)}
}


/* ════════════════════════════════════════════════════════════
   ░░ TIPOGRAFIA QUE INVADE LA IMAGEN ░░
   Tres lugares deliberados, no uno. El texto deja de posarse
   sobre la foto en una esquina segura y empieza a ocuparla.
   ════════════════════════════════════════════════════════════ */

/* 1 — El pie de la banda de imagen deja de ser un pie. Entra a
   escala de display y arranca antes del borde del carril, asi que
   la primera letra la recorta la ventana. */
.imgband{overflow:visible}          /* el .ph ya se recorta solo */
.imgband .ph{border-radius:inherit}
.imgband__c{
  font-size:clamp(2.1rem,7.2vw,5.6rem);
  font-weight:200;font-variation-settings:"opsz" 72;
  line-height:.94;letter-spacing:-.045em;
  max-width:14ch;padding-block:0 clamp(16px,2.6vw,40px);
  padding-inline:clamp(20px,5vw,52px);
  margin-left:-.055em;              /* la invasion: sale del carril */
  text-shadow:0 3px 44px rgba(0,0,0,.5);
}

/* 2 — El titular del hero rompe su propia caja. La segunda linea
   arranca mas a la izquierda que la primera y se sale del carril:
   un solo gesto, dos veces, para que siga siendo un gesto. */
.hero__title{display:grid;justify-items:start}
.hero__l1{display:block}
.hero__l2{display:block;margin-left:-.085em}
@media (min-width:900px){
  .hero__l2{margin-left:-.13em}
}

/* 3 — El nombre del servicio se monta sobre su foto en vez de
   sentarse en una barra debajo. Elimina la barra, y con ella la
   forma de tarjeta-catalogo que tenian las cinco. */
.card__b{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  align-items:flex-end;color:#FFF9F0;
  padding:clamp(30px,3vw,44px) clamp(14px,1.6vw,20px) clamp(13px,1.5vw,17px);
  background:linear-gradient(180deg,transparent,rgba(14,10,7,.78));
}
.card{background:var(--sunken)}
.card__img{flex:1}
.card__n{
  font-weight:300;font-variation-settings:"opsz" 34;
  font-size:var(--t-lg);letter-spacing:-.022em;
  text-shadow:0 2px 18px rgba(0,0,0,.5);
}
.card__m{color:rgba(255,249,240,.7)}
.card__p{
  color:#FFF9F0;font-size:var(--t-lg);
  text-shadow:0 2px 18px rgba(0,0,0,.5);
}
.card__p sup{color:rgba(255,249,240,.6)}
.card__spec{
  background:rgba(14,10,7,.42);color:#FFF9F0;
  -webkit-backdrop-filter:blur(7px) saturate(1.2);backdrop-filter:blur(7px) saturate(1.2);
  box-shadow:inset 0 0 0 1px rgba(255,249,240,.22);
}


/* ════════════════════════════════════════════════════════════
   ░░ LAS FOTOS DEJAN DE SER TODAS EL MISMO RECTANGULO ░░
   Cinco tarjetas identicas en proporcion y radio son una rejilla
   de catalogo. Aqui cada una tiene su propio peso, y el retrato
   toma una forma que ningun otro bloque de la pagina repite.
   ════════════════════════════════════════════════════════════ */
@media (min-width:820px){
  .cards{grid-auto-rows:minmax(0,auto)}
  .card:first-child .card__img{aspect-ratio:16/13}
  .card:nth-child(2) .card__img,
  .card:nth-child(3) .card__img{aspect-ratio:3/4}
  .card:nth-child(4) .card__img,
  .card:nth-child(5) .card__img{aspect-ratio:4/5}
  /* la primera es un bloque de otra escala, no una tarjeta grande */
  .card:first-child{border-radius:var(--r-xl)}
  .card:first-child .card__n{font-size:var(--t-xl);font-variation-settings:"opsz" 48}
  .card:first-child .card__p{font-size:var(--t-xl)}
}

/* El retrato toma forma de arco. Es la unica silueta no rectangular
   de la pagina, y por eso funciona: si se repitiera seria un estilo,
   una sola vez es una decision. */
.portrait{border-radius:calc(var(--r-xl) * 5) calc(var(--r-xl) * 5) var(--r-md) var(--r-md)}
@media (min-width:1100px){
  .story__grid .portrait{
    border-radius:0 calc(var(--r-xl) * 5) var(--r-md) 0;
    aspect-ratio:4/5;
  }
}


/* ════════════════════════════════════════════════════════════
   ░░ EL CIERRE VA A LA BRASA ░░
   Era el color de marca plano de borde a borde. Ahora cierra en el
   extremo caliente del eje, que es donde termina una sesion de
   contraste — y le da a la pagina su ultimo golpe de temperatura.
   ════════════════════════════════════════════════════════════ */
.closer{
  background:var(--ember);color:var(--ember-ink);
  position:relative;overflow:hidden;text-align:left;
}
.closer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(78% 120% at 12% 108%, rgba(232,135,92,.34), transparent 62%);
}
.closer .shell{position:relative}
.closer .display{font-size:var(--t-2xl);max-width:15ch;color:#FBEEE4}
.closer p{color:rgba(242,223,210,.74);margin:20px 0 30px;max-width:34ch}
.closer .btn{background:var(--ember-lift);color:#26100A}
.closer__terms{color:rgba(242,223,210,.48);margin-top:26px}


/* ════════════════════════════════════════════════════════════
   ░░ SUPERFICIES DEL NAVEGADOR ░░
   Seleccion, cursor, barra de scroll y anclas llegan con defaults
   que no pertenecen a ningun sistema de diseno. Vestirlas es la
   senal mas barata de que una pagina se construyo y no se armo.
   ════════════════════════════════════════════════════════════ */
::selection{background:var(--brand);color:var(--on-brand)}
.act ::selection,.closer ::selection{background:var(--ember-lift);color:#26100A}
.split ::selection{background:rgba(255,251,244,.9);color:var(--ice)}
input,textarea{caret-color:var(--brand)}
html{scrollbar-color:var(--ink-3) var(--ground);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--ground)}
::-webkit-scrollbar-thumb{
  background:var(--line);border-radius:99px;
  border:3px solid var(--ground);background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3);background-clip:content-box}


/* ════════════════════════════════════════════════════════════
   ░░ PIEZAS NUEVAS DE LA APERTURA DEL HERO ░░
   ════════════════════════════════════════════════════════════ */
/* Una sola linea de meta en vez de dos chips que envolvian */
.meta{
  display:inline-flex;align-items:center;gap:11px;margin-bottom:clamp(20px,2.4vw,28px);
  min-height:34px;padding:0 15px 0 12px;border-radius:99px;
  background:rgba(255,252,248,.8);
  -webkit-backdrop-filter:blur(9px) saturate(1.3);backdrop-filter:blur(9px) saturate(1.3);
  box-shadow:inset 0 0 0 1px rgba(224,213,197,.9);
  max-width:100%;
}
.meta .status{
  margin:0;padding:0;min-height:0;background:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.meta__x{width:1px;height:13px;background:var(--line);flex:none}
.meta__p{
  font-family:var(--mono);font-size:var(--t-3xs);line-height:1;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap;
}

/* Un boton solido y un enlace, no dos botones apilados: en 390px
   eran dos bloques mas de los seis que alargaban el hero. */
.btn--lg{min-height:58px;padding:0 32px;font-size:var(--t-md)}
.link{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-size:var(--t-sm);font-weight:500;color:var(--ink);
  box-shadow:inset 0 -1px 0 var(--ink-3);
  transition:box-shadow .2s var(--ease), color .2s var(--ease);
}
.link::after{
  content:"";width:5px;height:5px;flex:none;
  border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .22s var(--ease-tap);
}
@media (hover:hover){
  .link:hover{box-shadow:inset 0 -1px 0 var(--ink)}
  .link:hover::after{transform:rotate(45deg) translate(2px,-2px)}
}
.hero__cta{align-items:center;gap:12px clamp(16px,2.4vw,28px)}


/* ════════════════════════════════════════════════════════════
   ░░ CORRECCIONES DE LA PASADA DE REVISION ░░
   ════════════════════════════════════════════════════════════ */

/* El hero movil no se alargaba por la altura del contenedor: la
   columna de copy media 211px dentro de un carril de 379px, asi que
   el titular caia en tres lineas y la tagline en tres mas. Ajustar
   la altura nunca lo iba a arreglar — el ancho era el problema. */
.hero__copy{max-width:100%}
@media (min-width:640px){.hero__copy{max-width:34rem}}

/* El nombre del servicio y su duracion se leian corridos */
.card__m{display:block}
.card__b > span{min-width:0}

/* El subrayado colgaba al fondo de los 44px de area tactil en vez
   de pegarse al texto */
.link{
  box-shadow:none;
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:5px;text-decoration-color:var(--ink-3);
}
@media (hover:hover){
  .link:hover{box-shadow:none;text-decoration-color:var(--ink)}
}

/* La cifra fria arrancaba debajo del nav pegajoso */
.split__side--cold .split__fig{padding-top:calc(var(--nav-h) + clamp(14px,2vw,28px))}

/* El lado caliente se leia marron, no brasa: sin saturacion no hay
   eje termico, solo dos fotos oscuras. */
.split__side--hot::after{
  background:linear-gradient(200deg,rgba(96,22,4,.80),rgba(196,74,18,.60) 50%,rgba(44,10,3,.92));
}
.split__side--hot .split__ph::after{background:linear-gradient(200deg,rgba(255,148,68,.40),transparent 64%)}
.split__side--hot .ph img{filter:saturate(.55) contrast(1.2) brightness(.88)}
.split__side--cold .ph img{filter:saturate(.42) contrast(1.24) brightness(.8)}
/* la costura tiene que leerse como una arista, no como un borde */
.split__seam{
  background:linear-gradient(180deg,rgba(255,251,244,.2),rgba(255,251,244,.95),rgba(255,251,244,.2));
  filter:drop-shadow(0 0 12px rgba(255,240,220,.35));
}

/* El cierre dejaba media banda vacia a la derecha */
.closer__in{display:grid;gap:clamp(26px,4vw,64px);align-items:end}
@media (min-width:820px){
  .closer__in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .closer__act{padding-bottom:.4em}
}
.closer .display{max-width:18ch}
.closer__act .btn{white-space:nowrap}
.closer__terms{margin:18px 0 0;max-width:30ch}
.closer::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(62% 100% at 88% 0%, rgba(184,88,52,.26), transparent 60%);
}

/* "Mon–Thu" partia en dos lineas y arrastraba la hora con el */
.footer__hr{gap:18px}
.footer__hr span:first-child{flex:0 0 auto;white-space:nowrap}
.footer__hr b{text-align:right;white-space:nowrap}

/* Tinte termico permanente sobre la foto de cada tarjeta */
.card__img .ph::after{
  background:
    radial-gradient(120% 100% at 50% 0%, transparent 42%, rgba(28,20,14,.20) 100%),
    linear-gradient(175deg, transparent 30%, var(--card-tint, transparent));
}