/* ═══ TOKENS ═══ */
:root{
  --neutral:#F6F1EA; --z-taupe:#EDE6DD; --z-choco:#4A3226; --z-champ:#DDC59A; --z-caramel:#B9784A;
  --e-cream:#F2EDE6; --e-ink:#1A1714; --e-ink-soft:#2A2622; --e-gold:#C9A36B; --e-gold-deep:#A87E47;
  --mute:#857A6F; --paper:#FAF7F2;
  --fg:#1A1714;
  --e1:cubic-bezier(.16,1,.3,1); --e2:cubic-bezier(.22,1,.36,1);
  --e3:cubic-bezier(.65,0,.35,1); --door:cubic-bezier(.76,0,.24,1);
  --back:cubic-bezier(.34,1.56,.64,1);
  --gut:clamp(16px,2.5vw,32px); --pad:clamp(20px,5vw,72px);
  --sec:clamp(72px,11vw,168px);
  --hdr-h:68px;
  --disp:"Fraunces","PP Editorial New",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  --body:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media(max-width:1023px){:root{--hdr-h:58px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--neutral);color:var(--fg);
  font-family:var(--body);font-size:17px;line-height:1.5;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  hyphens:auto;overflow-wrap:anywhere;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--e-gold);color:var(--e-ink)}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}

.bg{position:fixed;inset:0;z-index:0;background:var(--neutral);pointer-events:none}
main,.hdr{position:relative;z-index:1}

/* ═══ TYPE ═══ */
.d-xl,.d-huge,.d-lg{font-family:var(--disp);font-weight:300;letter-spacing:-.035em;line-height:.92;margin:0}
.d-xl{font-size:clamp(46px,8.4vw,132px)}
.d-huge{font-size:clamp(52px,12vw,190px);line-height:.88}
.d-lg{font-size:clamp(34px,5.4vw,88px);line-height:.95}
.d-xl em,.d-huge em,.d-lg em{font-style:normal;color:var(--mute)}
.lbl{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;line-height:1.4;margin:0;color:var(--e-ink-soft)}
.mark{color:var(--mute)}
.mark::first-letter{color:var(--e-gold)}
.mark--z::first-letter{color:var(--z-caramel)}
.mark--e::first-letter{color:var(--e-gold)}
/* etiqueta con chincheta: el icono en oro, como antes el asterisco */
.pin{display:inline-flex;align-items:center;gap:7px;color:var(--mute)}
.pin__ico{width:13px;height:13px;flex:none;color:var(--e-gold);transform:translateY(-1px)}

/* ═══ SECTIONS ═══ */
.sec{position:relative;background:transparent;padding:var(--sec) var(--pad)}
.sec--mq{padding-block:0}
/* Las secciones oscuras pintan SU propio fondo y no dependen de #bg:
   si esperasen al tween, el texto claro aparecería sobre fondo claro
   durante unos cientos de ms. El contraste no puede depender del scroll. */
#zVoice{color:var(--z-champ);background:var(--z-choco)}
#eVoice{color:var(--e-gold); background:var(--e-ink)}

/* ═══ HEADER ═══ */
.hdr{position:fixed;top:0;left:0;right:0;height:var(--hdr-h);z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);color:var(--e-ink);mix-blend-mode:normal;will-change:transform}
/* Fondo de la cabecera: velo translúcido pero casi opaco, con borde neto y
   una línea fina abajo. Sin desenfoque ni máscara: el usuario lo quiere nítido. */
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(246,241,234,.88);border-bottom:1px solid rgba(26,23,20,.1);
  transition:background .3s var(--e2),border-color .3s var(--e2)}
.hdr[data-tone="dark"]::before{background:rgba(26,23,20,.86);border-bottom-color:rgba(242,237,230,.12)}

/* Lockup eeyd. × ZANOURI. Los logos son PNG de color fijo: sobre las secciones
   oscuras se invierten (data-tone="dark"), si no el eeyd. en ink desaparecería. */
.hdr__brand{display:flex;align-items:center;gap:clamp(10px,1.2vw,16px)}
.hdr__logo{width:auto;display:block;transition:filter .28s var(--e2)}
.hdr__logo--e{height:clamp(25px,2.4vw,32px)}
.hdr__logo--z{height:clamp(22px,2.15vw,28px)}
.hdr__x{font-family:var(--disp);font-weight:300;font-size:clamp(20px,2vw,27px);
  line-height:1;color:var(--mute);transform:translateY(-1px)}
.hdr[data-tone="dark"] .hdr__logo{filter:brightness(0) invert(1)}
.hdr[data-tone="dark"] .hdr__x{color:currentColor;opacity:.6}
.hdr__right{display:flex;align-items:center;gap:clamp(12px,2vw,26px)}
/* ═══ SELECTOR DE IDIOMA ═══ (mismo patrón que la landing del CRM) */
.lsel{position:relative}
.lsel__btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;
  border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:999px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  transition:border-color .2s var(--e2),background .2s var(--e2)}
.lsel__btn:hover,.lsel.is-open .lsel__btn{border-color:currentColor}
.lsel__ico{width:14px;height:14px}
.lsel__chev{width:12px;height:12px;stroke-width:2.5;transition:transform .2s var(--e2)}
.lsel.is-open .lsel__chev{transform:rotate(180deg)}
/* el panel crece desde la esquina del botón (origen en la esquina, no en el centro) */
.lsel__menu{position:absolute;top:100%;right:0;margin-top:8px;min-width:170px;padding:6px;z-index:70;
  border-radius:16px;border:1px solid rgba(26,23,20,.08);
  background:rgba(250,247,242,.96);color:var(--e-ink);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 12px 30px -12px rgba(17,17,17,.35);
  transform-origin:top right;opacity:0;visibility:hidden;transform:translateY(-4px) scale(.98);
  transition:opacity .16s var(--e2),transform .16s var(--e2),visibility 0s linear .16s}
.lsel.is-open .lsel__menu{opacity:1;visibility:visible;transform:none;
  transition:opacity .16s var(--e2),transform .16s var(--e2),visibility 0s}
.lsel__opt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:8px 12px;border-radius:12px;text-align:left;color:inherit;opacity:.62;
  font-family:var(--disp);font-weight:400;font-size:15px;letter-spacing:-.01em;
  transition:background .15s var(--e2),opacity .15s var(--e2)}
.lsel__opt:hover{background:rgba(26,23,20,.05);opacity:1}
.lsel__opt[aria-checked="true"]{background:rgba(26,23,20,.07);opacity:1}
.lsel__lbl{display:flex;align-items:center;gap:8px}
.lsel__code{font-family:var(--mono);font-size:10px;font-weight:500;text-transform:uppercase;opacity:.5}
.lsel__check{width:14px;height:14px;stroke-width:2.5;visibility:hidden}
.lsel__opt[aria-checked="true"] .lsel__check{visibility:visible}
/* sobre fondo oscuro el panel también se oscurece */
.hdr[data-tone="dark"] .lsel__menu{background:rgba(26,23,20,.94);color:var(--e-cream);border-color:rgba(242,237,230,.1)}
.hdr[data-tone="dark"] .lsel__opt:hover{background:rgba(242,237,230,.07)}
.hdr[data-tone="dark"] .lsel__opt[aria-checked="true"]{background:rgba(242,237,230,.1)}
@media(prefers-reduced-motion:reduce){.lsel__menu,.lsel__chev{transition:none}}

/* ═══ HERO ═══ */
.hero{min-height:100svh;display:flex;align-items:center;padding-top:calc(var(--hdr-h) + 24px)}
.hero__grid{width:100%;display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:center}
.stage{margin:0}
/* El ancho SE DERIVA de la altura para que el 4:5 sea exacto: si dejo
   width:100% y max-height peleando, el ratio deriva y cover recorta. */
.stage__img{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:2px;
  height:auto;width:min(100%,calc(min(78svh,900px) * 0.8))}
.stage__img picture img{width:100%;height:100%;object-fit:cover}
.stage__cap{margin-top:12px;color:var(--mute)}
.halo{position:absolute;pointer-events:none;mix-blend-mode:screen;opacity:0;
  height:auto;will-change:opacity}
@supports not (mix-blend-mode:screen){.halo{mix-blend-mode:normal}}
.halo--z{left:.86%;top:2.74%;width:29.97%}
.halo--e{left:62.07%;top:2.74%;width:27.82%}

.hero__type{min-width:0}
.hero__lead{max-width:38ch;margin:clamp(18px,2.4vw,30px) 0 0;color:var(--e-ink-soft)}
/* enlace a las tarjetas: subrayado fino que se llena al apuntar */
.hero__more{color:var(--e-ink);padding-bottom:1px;
  background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat;
  transition:background-size .35s var(--e2)}
@media(hover:hover) and (pointer:fine){ .hero__more:hover{background-size:0 1px;background-position:right bottom} }
.hero__doors{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.6vw,34px)}

/* ═══ BUTTONS ═══ */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:0 26px;border-radius:999px;border:1px solid var(--e-ink);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;transition:transform .12s var(--e2),background .22s var(--e2),color .22s var(--e2)}
.btn:active{transform:scale(.97)}
.btn--ink{background:var(--e-ink);color:var(--neutral)}
.btn--ink:hover{background:var(--e-ink-soft)}
.btn--ghost{border-color:currentColor}
/* Cada puerta lleva el color de su isla: LOCKS & BRAIDS taupe, CUTS & BEARDS ink. */
.btn--z{background:var(--z-taupe);border-color:var(--z-taupe);color:var(--e-ink)}
/* eeyd.: el relleno vive en ::before para poder vaciarlo con un barrido;
   al apuntar, pulsar o enfocar queda solo el contorno. */
.btn--e{--fill:var(--e-ink);--on:var(--e-cream);--off:var(--e-ink);
  background:transparent;border-color:var(--fill);color:var(--on);isolation:isolate;
  transition:transform .12s var(--e2),color .45s var(--e3)}
.btn--e::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--fill);clip-path:inset(0 0 0 0 round 999px);
  transition:clip-path .45s var(--e3)}
.btn--e:active,.btn--e:focus-visible{color:var(--off)}
.btn--e:active::before,.btn--e:focus-visible::before{clip-path:inset(0 0 0 100% round 999px)}
@media(hover:hover) and (pointer:fine){
  .btn--e:hover{color:var(--off)}
  .btn--e:hover::before{clip-path:inset(0 0 0 100% round 999px)}
}
@media(prefers-reduced-motion:reduce){.btn--e,.btn--e::before{transition:none}}
.btn--z:hover{background:var(--z-champ);border-color:var(--z-champ)}
.btn--wide{width:100%;margin-top:14px}
.door__u{position:absolute;left:26px;right:26px;bottom:14px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--e2)}
.only-m{display:none}

/* ═══ MARQUEE ═══ */
.mq{overflow:hidden;width:100%;padding-block:clamp(14px,2vw,26px)}
.mq__t{display:flex;width:max-content;font-family:var(--disp);font-weight:300;
  font-size:clamp(46px,9vw,150px);line-height:1;letter-spacing:-.03em;will-change:transform}
.mq__t span,.mq__t i{padding-inline:.18em;font-style:normal}
.mq__t i{opacity:.35}
.mq--sm .mq__t{font-size:clamp(28px,5vw,74px);opacity:.22}
.mq--foot .mq__t{font-size:clamp(40px,8vw,128px);opacity:.14}


/* ═══ INTRO ═══ */
.sec--intro{padding-top:clamp(28px,3.5vw,56px)}
.intro__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:clamp(20px,3vw,56px);margin-top:clamp(24px,4vw,56px)}
.intro__p{font-size:clamp(18px,1.5vw,23px);line-height:1.45;max-width:52ch;margin:0}

/* ═══ BIG TITLE ═══ */
.sec--big{min-height:78svh;display:flex;flex-direction:column;justify-content:center}
.d-huge--r{text-align:right}
.big__sub{font-size:clamp(17px,1.4vw,21px);color:var(--mute);margin:clamp(16px,2vw,28px) 0 0;max-width:46ch}
.d-huge--r+.big__sub{margin-left:auto;text-align:right}
.nm{text-transform:none}
.dot{color:var(--e-gold);font-weight:300;display:inline-block}

/* ═══ LIST + PEEK ═══ */
.sec--list{position:relative;display:flex;flex-direction:column}
.list__head{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  padding-bottom:14px;border-bottom:1px solid rgba(26,23,20,.16)}
.list__note{color:var(--z-caramel)}
.sec--list-r .list__note{color:var(--e-gold)}
.list{list-style:none;margin:0;padding:0}
.row{position:relative;display:grid;grid-template-columns:52px 1fr auto;align-items:baseline;gap:16px;
  padding:clamp(14px,1.8vw,26px) 0;border-bottom:1px solid rgba(26,23,20,.16);cursor:default}
.row__n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--mute);transition:color .3s}
.row__t{font-family:var(--disp);font-weight:300;font-size:clamp(26px,3.6vw,56px);
  line-height:1;letter-spacing:-.03em;transition:transform .3s var(--e2)}
.row__m{color:var(--mute)}
/* PARIDAD: Zanouri tiene 7 servicios y eeyd. 3. Para que los dos bloques midan
   lo mismo (regla de DESIGN.md, ≤8px), las tres filas de eeyd. respiran más.
   No es relleno: es la compensación que hace que tres pesen como siete. */
#eBlock .list{flex:1 0 auto;display:flex;flex-direction:column;justify-content:space-around}
#eBlock .row{padding-block:clamp(26px,3.2vw,58px)}
@media(hover:hover) and (pointer:fine){
  .row:hover .row__t{transform:translateX(10px)}
  .sec--list-r .row:hover .row__t{transform:translateX(-10px)}
  .row:hover .row__n{color:var(--z-caramel)}
  .sec--list-r .row:hover .row__n{color:var(--e-gold)}
}
.peek{position:fixed;top:0;left:0;width:clamp(200px,20vw,300px);aspect-ratio:4/5;
  pointer-events:none;z-index:40;opacity:0;will-change:transform}
.peek .ph{position:absolute;inset:0;opacity:0}
.ph{display:grid;place-items:center;background:
  repeating-linear-gradient(45deg,rgba(26,23,20,.045) 0 10px,transparent 10px 20px),var(--paper);
  border:1px solid rgba(26,23,20,.18);border-radius:2px}
.ph span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--mute)}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(20px,3vw,36px)}
.chip{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;
  border:1px solid rgba(26,23,20,.28);font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--e-ink-soft)}
.who{margin-top:clamp(28px,4vw,56px);max-width:56ch}
.sec--list-r .who{margin-left:auto}
.who__p{font-size:clamp(17px,1.3vw,20px);margin:0}
.who__todo{margin:12px 0 0;color:var(--z-caramel);opacity:.85}
.sec--list-r .who__todo{color:var(--e-gold-deep)}
.who__ln{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em}
.who__ln a{border-bottom:1px solid transparent;transition:border-color .2s}
.who__ln a:hover{border-color:currentColor}

/* ═══ VOICE ═══ */
.sec--voice{display:flex;flex-direction:column;align-items:flex-start;min-height:88svh;justify-content:center}
#eVoice{align-items:flex-end;text-align:right}
.quote{font-family:var(--disp);font-weight:300;font-size:clamp(30px,4.6vw,76px);
  line-height:1.02;letter-spacing:-.03em;max-width:22ch;margin:0}
.quote--e{margin-left:auto}
.sign{margin-top:20px;opacity:.6;color:inherit}
.sec--voice .lbl{color:inherit}
.panel{width:100%;margin-top:clamp(32px,5vw,72px);overflow:hidden;border-radius:16px;
  height:clamp(280px,54vh,560px)}
.panel img{width:100%;height:100%;object-fit:cover}

/* ═══ PORTALES · LOCKS & BRAIDS / CUTS & BEARDS ═══
   Cada tarjeta es un elemento a pantalla completa recortado por un polígono
   de 4 puntos: así GSAP puede interpolar del recorte en isla al rectángulo
   completo. Los bordes interiores comparten la misma diagonal: el hueco
   entre las dos islas dibuja el slash. */
.portal{height:100svh;padding:0;overflow:hidden}
.portal__eyebrow{position:absolute;left:var(--pad);top:calc(var(--hdr-h) + 18px);z-index:3}
.card{position:absolute;inset:0;will-change:clip-path}
.card--her{background:var(--z-taupe);color:var(--e-ink);
  clip-path:polygon(6% 16%, 52% 16%, 46% 88%, 6% 88%)}
.card--him{background:var(--e-ink);color:var(--e-cream);
  clip-path:polygon(54% 16%, 94% 16%, 94% 88%, 48% 88%)}
.card__face{position:absolute;top:16%;bottom:12%;width:38%;z-index:2;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(20px,2.6vw,40px)}
.card--her .card__face{left:6%}
.card--him .card__face{right:6%;align-items:flex-end;text-align:right}
.card__big{font-family:var(--disp);font-weight:300;font-size:clamp(46px,7.4vw,124px);
  line-height:.86;letter-spacing:-.04em}
.card__lbl,.card__sub{color:inherit}
.card--her .card__lbl,.card--her .card__sub{color:var(--z-caramel)}
.card--him .card__lbl,.card--him .card__sub{color:var(--e-gold)}
.card__hit{position:absolute;inset:0;z-index:4}
.portal.is-open .card__hit{pointer-events:none}

/* lo que hay DENTRO de la puerta: la casa a pantalla completa */
.card__inner{position:absolute;inset:0;z-index:1;opacity:0;
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(24px,4vw,64px);
  padding:calc(var(--hdr-h) + 36px) var(--pad) clamp(96px,11vw,128px)}
.card--her .card__inner{color:var(--z-taupe)}
.card--him .card__inner{color:var(--e-cream)}
.card__inner .mark,.card__inner .big__sub{color:inherit;opacity:.72}
.card--her .card__inner .d-huge em{color:var(--z-champ)}
.card--him .card__inner .d-huge em{color:var(--e-gold)}
.card__inner .big__sub{max-width:40ch}
.card__img{margin:0;height:min(60svh,600px);overflow:hidden;border-radius:16px}
.card__img picture{display:block;width:100%;height:100%}
.card__img img{width:100%;height:100%;object-fit:cover}
/* retrato de Grace (3:4): el encuadre guarda el rótulo y su cara */
.card__photo--grace{object-position:50% 38%}
/* retrato de Abdoulaye (2:3): cara y manos en el cajón dentro del encuadre */
.card__photo--abdou{object-position:55% 25%}
/* espejo en eeyd.: imagen a la izquierda, texto a la derecha */
.portal--e .card__inner{grid-template-columns:.95fr 1.05fr}
.portal--e .card__text{order:2;text-align:right}
.portal--e .card__inner .big__sub{margin-left:auto}

/* Los titulares NUNCA parten una palabra: el overflow-wrap:anywhere del body
   (necesario para el aleman en texto corrido) rompia nombres de marca en dos. */
.d-xl,.d-huge,.d-lg,.card__big,.quote{overflow-wrap:normal;word-break:normal;hyphens:manual}
/* dentro del portal el titulo comparte fila con la foto: cabe a este tamano */
.card__inner .d-huge{font-size:clamp(46px,7.2vw,122px)}

/* ═══ MUNDOS · cada casa pinta su propio fondo ═══ */
.world--z{background:var(--z-choco);color:var(--z-taupe)}
.world--e{background:var(--e-ink);color:var(--e-cream)}
.world .lbl,.world .chip{color:inherit}
.world--z .svc__note,.world--z .sign{color:var(--z-champ)}
.world--e .svc__note,.world--e .sign{color:var(--e-gold)}
.world--z .quote,.world--z .mq{color:var(--z-champ)}
.world--e .quote,.world--e .mq{color:var(--e-gold)}
.world .quote{margin-top:clamp(72px,10vw,150px)}
.world .chip{border-color:color-mix(in srgb,currentColor 32%,transparent)}
.world .who{margin-top:clamp(40px,5vw,72px)}
.world .who__todo{color:inherit;opacity:.55}
/* en ink, un botón ink desaparecería: la puerta de eeyd. pasa a oro */
.world--e .btn--e{--fill:var(--e-gold);--on:var(--e-ink);--off:var(--e-gold)}
.world .btn--ghost{color:inherit}

/* ═══ SERVICIOS · tarjetas de imagen ═══ */
.svc__head{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:baseline;
  padding-bottom:14px;border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.svc__grid{list-style:none;margin:clamp(22px,3vw,40px) 0 0;padding:0;display:grid;gap:clamp(12px,1.6vw,24px)}
.svc__grid--z{grid-template-columns:repeat(4,minmax(0,1fr))}
.svc__grid--e{grid-template-columns:repeat(3,minmax(0,1fr))}
.svc__media{aspect-ratio:4/5;overflow:hidden;border-radius:6px}
.svc__grid--e .svc__media{aspect-ratio:3/4}
.svc__media > *{width:100%;height:100%}
.svc__media img{object-fit:cover;transition:transform .8s var(--e2)}
.svc__meta{display:flex;align-items:baseline;gap:12px;margin:12px 0 0}
.svc__n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;opacity:.55}
.svc__t{font-family:var(--disp);font-weight:300;font-size:clamp(20px,1.9vw,30px);line-height:1;letter-spacing:-.02em}
.svc__tag{margin-left:auto;opacity:.6}
.ph--dark{background:repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 10px,transparent 10px 20px),rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.14)}
.ph--dark span{color:inherit;opacity:.55}
@media(hover:hover) and (pointer:fine){
  .svc__card:hover .svc__media img{transform:scale(1.04)}
}
.js .svc__card{opacity:0}

/* ═══ GALERÍA · unas pocas fotos por casa ═══
   Una grande a toda altura y dos apiladas; en eeyd. en espejo. */
.gal{list-style:none;margin:clamp(22px,3vw,40px) 0 0;padding:0;display:grid;
  grid-template-columns:1.25fr 1fr;gap:clamp(12px,1.6vw,22px)}
.gal--e{grid-template-columns:1fr 1.25fr}
.gal__i{display:flex;flex-direction:column;min-height:0}
.gal__i--a{grid-row:1 / 3}
.gal--e .gal__i--a{grid-column:2}
.gal--e .gal__i--b{grid-column:1;grid-row:1}
.gal--e .gal__i--c{grid-column:1;grid-row:2}
.gal__media{overflow:hidden;border-radius:6px;aspect-ratio:4/3}
.gal__i--a .gal__media{flex:1;aspect-ratio:auto;min-height:260px}
.gal__media > *{width:100%;height:100%}
.gal__media img{object-fit:cover;transition:transform .8s var(--e2)}
.gal__t{font-family:var(--disp);font-weight:300;font-size:clamp(20px,1.9vw,30px);
  line-height:1;letter-spacing:-.02em;margin:12px 0 0}
.gal--e .gal__i{text-align:right}
@media(hover:hover) and (pointer:fine){ .gal__i:hover .gal__media img{transform:scale(1.04)} }
.js .gal__i{opacity:0}
/* la frase de cada casa, en primera persona, con voz de titular */
.world .who__p{font-family:var(--disp);font-weight:300;font-size:clamp(24px,2.6vw,38px);
  line-height:1.1;letter-spacing:-.02em}
@media(max-width:1023px){
  .gal,.gal--e{grid-template-columns:1fr 1fr}
  .gal__i--a,.gal--e .gal__i--a{grid-column:1 / 3;grid-row:auto}
  .gal__i--a .gal__media{aspect-ratio:4/5;min-height:0}
  .gal--e .gal__i--b,.gal--e .gal__i--c{grid-column:auto;grid-row:auto}
}
@media(prefers-reduced-motion:reduce){ .js .gal__i{opacity:1} }
/* reels: portadas verticales. En escritorio tres columnas iguales; en móvil
   la primera a todo el ancho y las otras dos debajo (reglas de móvil de .gal). */
.gal__link{display:flex;flex-direction:column;flex:1;min-height:0;color:inherit}
.gal--reels .gal__media{position:relative}
.gal--reels .gal__media picture img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
/* insignia pequeña de Instagram: dice a dónde lleva la casilla */
.gal--reels .gal__media > .gal__badge{position:absolute;left:10px;bottom:10px;width:28px;height:28px;
  display:grid;place-items:center;border-radius:50%;color:var(--z-taupe);
  background:rgba(74,50,38,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .3s var(--e2)}
.gal__badge svg{width:15px;height:15px}
.gal__ig{margin-top:6px;opacity:.6;color:inherit}
@media(hover:hover) and (pointer:fine){ .gal__link:hover .gal__badge{transform:scale(1.1)} }
/* eeyd.: insignia a la derecha, en oro sobre tinta */
.gal--e.gal--reels .gal__media > .gal__badge{left:auto;right:10px;color:var(--e-gold);background:rgba(26,23,20,.55)}
@media(min-width:1024px){
  .gal--reels{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gal--reels.gal--e .gal__i{grid-column:auto;grid-row:auto}
  .gal--reels .gal__i--a{grid-row:auto}
  .gal--reels .gal__media,.gal--reels .gal__i--a .gal__media{flex:none;aspect-ratio:4/5;min-height:0}
}
@media(max-width:1023px){ .gal--reels .gal__media{aspect-ratio:4/5} }

/* sin JS, o con movimiento reducido, cada portal se muestra ya abierto */
.no-js .card--ghost{display:none}
.no-js .card--grow{clip-path:none}
.no-js .card--grow .card__face,.no-js .card--grow .card__hit{display:none}
.no-js .card__inner{opacity:1}
.no-js .portal--z .card--grow{background:var(--z-choco)}
@media(prefers-reduced-motion:reduce){
  .card--ghost{display:none}
  .card--grow{clip-path:none!important}
  .card--grow .card__face,.card--grow .card__hit{display:none}
  .card__inner{opacity:1!important}
  .portal--z .card--grow{background:var(--z-choco)!important}
  .js .svc__card{opacity:1}
}

/* ═══ PORTALES Y SERVICIOS EN MÓVIL: las islas se apilan ═══ */
@media(max-width:1023px){
  .card--her{clip-path:polygon(5% 17%, 95% 17%, 95% 50%, 5% 56%)}
  .card--him{clip-path:polygon(5% 59%, 95% 53%, 95% 88%, 5% 88%)}
  .card__face{left:5%!important;right:5%!important;width:auto}
  .card--her .card__face{top:17%;bottom:45%}
  .card--him .card__face{top:57%;bottom:12%}
  .card__big{font-size:clamp(40px,12vw,64px)}
  .card__inner{grid-template-columns:1fr!important;align-content:center;gap:18px;
    padding-bottom:clamp(96px,24vw,120px)}
  .portal--e .card__text{order:0;text-align:left}
  .portal--e .card__inner .big__sub{margin-left:0}
  .card__img{height:40svh}
  .svc__grid--z,.svc__grid--e{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc__tag{display:none}
}

/* ═══ HOURS ═══ */
/* una sola tabla: el horario es el del local */
.hgrid{margin-top:clamp(28px,4vw,56px);max-width:480px}
.hcol{border-top:1px solid rgba(26,23,20,.18);padding-top:18px}
.hcol__state{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin:10px 0 0}
.hours{margin:14px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  display:grid;grid-template-columns:auto 1fr;gap:6px 18px}
.hours dt{color:var(--mute)}
.hours dd{margin:0;font-variant-numeric:tabular-nums;text-align:right}
.hours .is-today dt,.hours .is-today dd{color:var(--fg);font-weight:500}
.hours>div{display:contents}

/* ═══ FOOTER ═══ */
.sec--foot{padding-bottom:0}
.foot__room{margin-top:18px;color:var(--mute)}
.foot__geo{margin-top:6px;color:var(--mute);font-variant-numeric:tabular-nums}
.map{width:min(520px,100%);height:auto;margin-top:clamp(24px,4vw,48px);color:var(--e-ink)}
.map__cap{margin-top:8px;color:var(--mute)}
.foot__links{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,3vw,36px)}
.mq--foot{margin-top:clamp(40px,6vw,88px)}

/* ═══ BANDA FINAL ═══
   Dos capas a ancho completo recortadas por --split, que oscila 44% <-> 56%
   sin parar. Se anima con clip-path y transform; nada de flex-basis, que
   recalcula el layout en cada fotograma. @property deja interpolar la variable. */
@property --split{syntax:'<percentage>';inherits:true;initial-value:50%}
@keyframes band-sway{from{--split:44%}to{--split:56%}}
.band{position:relative;margin:clamp(24px,4vw,56px) calc(var(--pad)*-1) 0;min-height:180px;overflow:hidden;
  --split:50%;animation:band-sway 2.6s cubic-bezier(.45,0,.55,1) infinite alternate}
/* al apuntar se detiene: nadie hace clic en un objetivo que se mueve */
.band:hover{animation-play-state:paused}
.band__h{position:absolute;inset:0;display:flex;align-items:center;padding:32px var(--pad);overflow:hidden}
.band__h--z{background:var(--z-taupe);clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.band__h--e{background:var(--e-cream);clip-path:inset(0 0 0 var(--split));justify-content:flex-end;text-align:right}
.band__t{position:relative;z-index:1;max-width:36%}
/* marca de agua: el logo grande, cortado a la mitad por el borde inferior */
.band__wm{position:absolute;bottom:0;height:auto;pointer-events:none;transform:translateY(50%);opacity:.14}
.band__h--z .band__wm{left:calc(var(--pad) * -.4);width:min(62%,780px)}
.band__h--e .band__wm{right:calc(var(--pad) * -.4);width:min(44%,560px);opacity:.1}
.band__ax{position:absolute;inset:0;pointer-events:none;
  border-left:1px solid rgba(26,23,20,.24);transform:translateX(var(--split))}
@media(prefers-reduced-motion:reduce){.band{animation:none}}
.foot__legal a{border-bottom:1px solid currentColor;padding-bottom:1px}
.foot__end{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  align-items:center;padding:22px 0 26px;color:var(--mute)}
.foot__top{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase}


/* ═══ CTA FLOTANTE · LOCKS & BRAIDS / CUTS & BEARDS ═══
   Dos islas en una sola línea, separadas por un slash. Los bordes interiores
   comparten la misma diagonal (15px) y la segunda se solapa 10px: el hueco
   queda como una "/" de 5px. Mismo ángulo que en la versión alta.
   Centrado con margin:auto y no con translate, para que GSAP solo mueva la Y. */
.fb{position:fixed;left:0;right:0;margin-inline:auto;bottom:clamp(12px,1.8vw,22px);z-index:55;
  display:flex;width:min(460px,calc(100% - 2*var(--gut)));height:44px;
  filter:drop-shadow(0 8px 20px rgba(26,23,20,.22));will-change:transform}
.fb__i{flex:1 1 50%;display:flex;align-items:center;gap:10px;white-space:nowrap;
  transition:background .25s var(--e2),transform .12s var(--e2)}
.fb__i--her{background:var(--z-taupe);color:var(--e-ink);border-radius:999px 0 0 999px;
  clip-path:polygon(0 0,100% 0,calc(100% - 15px) 100%,0 100%);
  padding:0 26px 0 clamp(18px,2.6vw,24px)}
/* espejo: en CUTS & BEARDS la etiqueta va primero y el nombre queda pegado al borde */
.fb__i--him{background:var(--e-ink);color:var(--e-cream);border-radius:0 999px 999px 0;
  margin-left:-10px;clip-path:polygon(15px 0,100% 0,100% 100%,0 100%);
  flex-direction:row-reverse;padding:0 clamp(18px,2.6vw,24px) 0 26px}
.fb__big{font-family:var(--disp);font-weight:300;font-size:clamp(15px,1.4vw,17px);
  line-height:1;letter-spacing:-.01em}
.fb__sm{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase}
.fb__i--her .fb__sm{color:var(--z-caramel)}
.fb__i--him .fb__sm{color:var(--e-gold)}
@media(hover:hover) and (pointer:fine){
  .fb__i--her:hover{background:var(--z-champ)}
  .fb__i--him:hover{background:var(--e-ink-soft)}
}
.fb__i:active{transform:scale(.97)}
/* Sobre fondo oscuro, CUTS & BEARDS en ink se fundiria con el fondo: pasa a oro. */
.fb.on-dark .fb__i--him{background:var(--e-gold);color:var(--e-ink)}
.fb.on-dark .fb__i--him .fb__sm{color:var(--e-ink);opacity:.7}
@media(hover:hover) and (pointer:fine){.fb.on-dark .fb__i--him:hover{background:var(--e-cream)}}
/* En móvil el oficio y la marca no caben en fila: se apilan en dos líneas
   dentro de cada isla, sin engordar el banner. */
@media(max-width:479px){
  .fb__i{min-width:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px}
  .fb__i--him{flex-direction:column;align-items:flex-end}
}
/* solo con JS arranca escondido: sin JS el CTA está siempre a la vista */
.js .fb{transform:translateY(180%)}
/* el pie deja sitio para que el banner no tape lo último de la página */
.sec--foot{padding-bottom:clamp(76px,8vw,96px)}

/* ═══ JS INITIAL STATES ═══ */
.js [data-rise],.js .hero__lead,.js .hero__doors,
.js .chips,.js .who,.js .list__head,.js .foot__links,.js .map__cap{opacity:0}
.js .row{opacity:0}
.js .panel{transform:scale(.82);border-radius:64px}
.js .map path,.js .map circle{opacity:0}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1023px){
  .hero{min-height:auto;padding-top:calc(var(--hdr-h) + 12px);padding-bottom:36px}
  .hero__grid{grid-template-columns:1fr;gap:20px}
  .stage__img{max-height:none}
  .hdr{gap:10px}
  .hdr__right{gap:10px}
  /* La foto cede altura para que las DOS puertas y los DOS estados queden
     por encima del pliegue. Regla de la spec: se recorta la foto, no los botones. */
  /* mismo principio que en escritorio: el ancho se deriva de la altura,
     nunca width:auto (estiraría la caja y cover recortaría los rotulos) */
  .stage__img{height:auto;width:min(100%,calc(70svh * 0.8));margin-inline:auto}
  .d-xl{font-size:clamp(38px,10.5vw,56px)}
  .hero__lead{font-size:15px;margin-top:12px}
  .stage__cap{margin-top:8px;font-size:9px}
    .only-m{display:inline-flex}
  .hero__doors{flex-direction:column;gap:8px;margin-top:14px}
  .hero__doors .btn{width:100%}
  .d-huge--r,.d-huge--r+.big__sub{text-align:left;margin-left:0}
  #eVoice{align-items:flex-start;text-align:left}
  .quote--e{margin-left:0}
  .sec--list-r .who{margin-left:0}
  .band{min-height:150px}
  .band__h{padding:20px var(--gut)}
  .band__t{max-width:40%}
  .peek{display:none}
}
@media(max-width:560px){
  .row{grid-template-columns:40px 1fr;gap:10px}
  .row__m{display:none}
}

/* ═══ REDUCED MOTION ═══ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.15s!important;scroll-behavior:auto!important}
  .js [data-rise],.js .hero__lead,.js .hero__doors,.js .chips,.js .who,
  .js .list__head,.js .foot__links,.js .map__cap,.js .row{opacity:1}
  .js .panel{transform:none;border-radius:16px}
  .js .map path,.js .map circle{opacity:1}
  .halo{opacity:.62}
  .js .fb{transform:none}
  .peek{display:none}
}