/* Mayahuel · sistema compartido
   Cada página es una "casa" con su propia identidad (data-casa en <body>):
   portal  · noche y pan de oro          · Bodoni Moda + Jost
   tequila · papel mineral y tinta añil  · Ibarra Real Nova + Albert Sans (Ibarra: el impresor español del s. XVIII)
   mezcal  · ceniza, ocre y brasa        · Bricolage Grotesque + Newsreader
   mito    · grana cochinilla y negro    · IM Fell DW Pica + EB Garamond (la letra de las crónicas coloniales)
   Todas comparten la misma retícula, la barra y el pie legal. */

@view-transition { navigation: auto; }

:root{
  --fondo:#0a0a09; --fondo-2:#121210; --tinta:#efe9dc; --tinta-2:#a39d90; --filo:#2a2824;
  --acento:#c9a96a; --acento-2:#8a7448; --sobre-acento:#0a0a09;
  --f-display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --f-texto:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --f-dato:"Jost","Futura",system-ui,sans-serif;
  --tracking-display:.02em;
  --curva:cubic-bezier(.16,.84,.24,1);
  --s-2:.7rem; --s-1:clamp(.8rem,.77rem + .15vw,.88rem); --s0:clamp(1.02rem,.98rem + .2vw,1.12rem);
  --s1:clamp(1.35rem,1.12rem + .8vw,1.9rem); --s2:clamp(2.1rem,1.4rem + 2.8vw,4rem); --s3:clamp(3.6rem,1.4rem + 10vw,12rem);
  color-scheme:dark;
}
body[data-casa="tequila"]{
  --fondo:#e9ebe6; --fondo-2:#dfe3dc; --tinta:#14213a; --tinta-2:#4c5869; --filo:#c3c9c2;
  --acento:#2d4f86; --acento-2:#7d97b6; --sobre-acento:#f4f5f1;
  --f-display:"Ibarra Real Nova","Baskerville",Georgia,serif;
  --f-texto:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-dato:"Albert Sans",system-ui,sans-serif;
  --tracking-display:0;
  color-scheme:light;
}
body[data-casa="anejo"]{
  --fondo:#100c09; --fondo-2:#17120d; --tinta:#efe6d6; --tinta-2:#a8987f; --filo:#2c231a;
  --acento:#c99a5b; --acento-2:#7d5d38; --sobre-acento:#100c09;
  --f-display:"Ibarra Real Nova","Baskerville",Georgia,serif;
  --f-texto:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-dato:"Albert Sans",system-ui,sans-serif;
  --tracking-display:0;
  color-scheme:dark;
}
body[data-casa="mezcal"]{
  --fondo:#171412; --fondo-2:#201c19; --tinta:#ece2d2; --tinta-2:#a79a88; --filo:#3a332d;
  --acento:#d0743c; --acento-2:#8c6a4a; --sobre-acento:#171412;
  --f-display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --f-texto:"Newsreader",Georgia,serif;
  --f-dato:"Bricolage Grotesque",system-ui,sans-serif;
  --tracking-display:-.02em;
  color-scheme:dark;
}
body[data-casa="mito"]{
  --fondo:#120707; --fondo-2:#1c0b0b; --tinta:#f1e4cf; --tinta-2:#b49c84; --filo:#3c1d1a;
  --acento:#e0574a; --acento-2:#d4af6a; --sobre-acento:#120707;
  --f-display:"IM Fell DW Pica","IM Fell English",Georgia,serif;
  --f-texto:"EB Garamond",Garamond,Georgia,serif;
  --f-dato:"EB Garamond",Georgia,serif;
  --tracking-display:0;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font:400 var(--s0)/1.7 var(--f-texto);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-kerning:normal}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body[data-casa="tequila"]::after{opacity:.12;mix-blend-mode:multiply}
::selection{background:var(--acento);color:var(--sobre-acento)}
img,video,canvas{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:1px solid var(--acento);outline-offset:4px}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1;letter-spacing:var(--tracking-display);text-wrap:balance;margin:0}
p{margin:0;max-width:60ch;text-wrap:pretty}
.marco{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.ancho{max-width:1280px;margin-inline:auto}
.estrecho{max-width:660px;margin-inline:auto}
.ceja{font:500 var(--s-2)/1.5 var(--f-dato);letter-spacing:.26em;text-transform:uppercase;color:var(--acento)}
.dato{font-variant-numeric:tabular-nums lining-nums}
.versal{font-variant:small-caps;letter-spacing:.06em}
.pend{font:500 .64rem/1 var(--f-dato);letter-spacing:.14em;text-transform:uppercase;color:var(--acento);border:1px dashed currentColor;padding:4px 7px;border-radius:1px;white-space:nowrap;vertical-align:middle}

/* barra común */
.barra{position:fixed;top:0;left:0;right:0;z-index:40;padding-top:env(safe-area-inset-top,0px);transition:background .6s var(--curva),border-color .6s}
.barra.solida{background:color-mix(in srgb,var(--fondo) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--filo)}
.barra .ancho{display:flex;align-items:center;justify-content:space-between;gap:14px;height:68px}
.marca{font:400 .95rem/1 "Bodoni Moda",Didot,Georgia,serif;letter-spacing:.5em;text-decoration:none;padding-left:.5em;white-space:nowrap}
.casas{display:flex;list-style:none;margin:0;padding:0;gap:2px}
.casas a{display:block;font:500 var(--s-2)/1 var(--f-dato);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--tinta-2);padding:14px 12px;position:relative;transition:color .4s}
.casas a::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:1px;background:var(--acento);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--curva)}
.casas a:hover,.casas a[aria-current="page"]{color:var(--tinta)}
.casas a:hover::after,.casas a[aria-current="page"]::after{transform:scaleX(1)}
.boton{display:inline-block;font:500 var(--s-2)/1 var(--f-dato);letter-spacing:.24em;text-transform:uppercase;text-decoration:none;background:var(--acento);color:var(--sobre-acento);border:1px solid var(--acento);border-radius:1px;padding:18px 24px;cursor:pointer;transition:background .5s var(--curva),color .5s var(--curva)}
.boton:hover{background:transparent;color:var(--acento)}
.boton.fino{background:transparent;color:var(--tinta);border-color:var(--filo)}
.boton.fino:hover{border-color:var(--acento);color:var(--acento)}
.progreso{position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--acento);transform-origin:left;transform:scaleX(var(--p,0))}
.menu-btn{display:none;background:none;border:1px solid var(--filo);color:var(--tinta);font:500 var(--s-2)/1 var(--f-dato);letter-spacing:.2em;text-transform:uppercase;padding:13px 14px;border-radius:1px;cursor:pointer}
@media (max-width:860px){
  .menu-btn{display:block}
  .barra .boton{display:none}
}

/* lámina fotográfica */
.lamina{position:relative;margin:0;overflow:hidden;background:var(--fondo-2)}
.lamina img,.lamina video{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 2.2s var(--curva)}
.lamina.vista img,.lamina.vista video{transform:scale(1)}
.lamina figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:48px 18px 14px;font:500 var(--s-2)/1.4 var(--f-dato);letter-spacing:.18em;text-transform:uppercase;color:#efe9dc;background:linear-gradient(180deg,transparent,rgba(0,0,0,.6))}
.esquinas{position:relative}
.esquinas::before,.esquinas::after{content:"";position:absolute;width:16px;height:16px;border:1px solid var(--acento);pointer-events:none}
.esquinas::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.esquinas::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* siguiente casa */
.siguiente{display:block;text-decoration:none;border-top:1px solid var(--filo);padding-block:clamp(56px,9vw,120px)}
.siguiente .ancho{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.siguiente h2{font-size:var(--s2);transition:letter-spacing .9s var(--curva)}
.siguiente:hover h2{letter-spacing:.04em}
.siguiente .flecha{font:400 var(--s2)/1 var(--f-display);color:var(--acento);transition:transform .7s var(--curva)}
.siguiente:hover .flecha{transform:translateX(12px)}

/* pie legal común */
.pie-legal{border-top:1px solid var(--filo);padding-block:44px 130px}
.pie-legal .ancho{display:grid;gap:22px}
.leyenda{font:600 clamp(.72rem,.64rem + .5vw,1rem)/1.45 var(--f-dato);letter-spacing:.1em;color:var(--tinta);border:1px solid var(--tinta);padding:14px 16px;text-align:center;margin:0;max-width:none}
.pie-legal .fila{display:flex;flex-wrap:wrap;gap:10px 30px;font-size:var(--s-1);color:var(--tinta-2)}

/* aviso de edad */
.edad{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--fondo-2);border-top:1px solid var(--filo);padding-top:14px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
.edad .ancho{display:flex;gap:12px 20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.edad p{font-size:var(--s-1)}
.edad .botones{display:flex;gap:8px}
.edad button{font:500 var(--s-2)/1 var(--f-dato);letter-spacing:.18em;text-transform:uppercase;border-radius:1px;padding:14px 16px;cursor:pointer;border:1px solid var(--filo);background:transparent;color:var(--tinta)}
@media (max-width:600px){
  .edad .ancho{flex-wrap:nowrap;gap:12px}
  .edad p{font-size:.78rem;line-height:1.4}
  .edad .botones{flex-direction:column;gap:6px;flex:none}
  .edad button{padding:11px 12px;white-space:nowrap}
}
.edad button.si{background:var(--acento);color:var(--sobre-acento);border-color:var(--acento)}

/* entrada suave: el contenido es visible en reposo; solo se mueve un poco */
.sube{transition:transform 1.2s var(--curva)}
.js .sube:not(.vista){transform:translateY(14px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
  .lamina img,.lamina video{transform:none}
  .js .sube:not(.vista){transform:none;opacity:1}
  @view-transition{navigation:none}
}