/* La casa de Natalia Briseño: rosa, platino y negro. Los cuatro sitios comparten paleta y letra;
   cada uno se distingue por su material, su 3D y su manera de moverse.
   Archivo (ancho variable) es la voz que se estira y empuja; Instrument Serif en itálica es la elegancia;
   JetBrains Mono es el dato. */
@font-face{font-family:Archivo;src:url('fonts/archivo.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url('fonts/instrument-serif-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url('fonts/instrument-serif-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url('fonts/jetbrains-mono.woff2') format('woff2');font-weight:100 800;font-display:swap}
:root{
 --negro:#050506;--negro-2:#0d0c10;--negro-3:#17161b;--humo:#2a2830;
 --platino:#d9d7dc;--platino-claro:#f3f2f5;--platino-medio:#b4b1b9;--platino-oscuro:#77747d;
 --rosa:#ff2e88;--rosa-claro:#ff8cc0;--rosa-hondo:#c3006a;
 --sans:Archivo,"Helvetica Neue",Arial,sans-serif;--serif:"Instrument Serif","Didot",Georgia,serif;--mono:"JetBrains Mono",ui-monospace,monospace;
 --g:max(16px,env(safe-area-inset-left,0px));--gd:max(16px,env(safe-area-inset-right,0px));
 --ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.76,0,.24,1);
}
*{box-sizing:border-box}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
img{max-width:100%;display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:2px solid var(--rosa);outline-offset:4px}

/* Platino líquido: el texto refleja una luz que se mueve con el cursor o con el scroll */
.cromo{background:linear-gradient(105deg,#6f6c75 0%,#f6f5f8 16%,#a7a4ad 30%,#ffffff 44%,#8c8992 58%,#e9e7ec 74%,#7b7881 88%,#d6d4da 100%);background-size:220% 100%;background-position:var(--brillo,40%) 50%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.rosa-luz{color:var(--rosa);text-shadow:0 0 28px rgb(255 46 136/.55)}

/* Revelados con máscara: cada palabra sube desde abajo de su propia línea */
.pal{display:inline-block;overflow:hidden;vertical-align:top;padding:.16em .02em .08em;margin:-.16em -.02em -.08em}
.pal>i{display:inline-block;font-style:inherit;transform:translateY(110%);transition:transform 1.1s var(--ease) calc(var(--k,0) * 45ms)}
.en .pal>i,.pal.en>i{transform:none}
.js [data-revela]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease) var(--d,0s),transform 1.1s var(--ease) var(--d,0s)}
.js [data-revela].en{opacity:1;transform:none}

/* Etiquetas de dato */
.dato{font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}

/* Lienzo 3D detrás del contenido */
.lienzo{position:absolute;inset:0;width:100%;height:100%;display:block}
.sin-3d .lienzo{display:none}

/* Pie común: las cuatro puertas de la casa */
.casa-pie{position:relative;padding:72px var(--gd) calc(env(safe-area-inset-bottom,0px) + 40px) var(--g);background:var(--negro);color:var(--platino);display:grid;grid-template-columns:minmax(0,1fr);gap:28px;border-top:1px solid var(--humo)}
.casa-pie .firma{font:400 clamp(44px,12vw,120px)/.9 var(--serif);font-style:italic;letter-spacing:-.02em}
.casa-pie nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1px;background:var(--humo);border:1px solid var(--humo)}
.casa-pie nav a{display:grid;gap:6px;min-height:96px;padding:16px;background:var(--negro);text-decoration:none;transition:background .4s var(--ease)}
.casa-pie nav a:hover{background:var(--negro-3)}
.casa-pie nav b{font:800 22px/1 var(--sans);font-stretch:80%;letter-spacing:-.01em;text-transform:uppercase;color:var(--platino-claro)}
.casa-pie nav span{font-size:13px;color:var(--platino-oscuro)}
.casa-pie nav a[aria-current] b{color:var(--rosa)}
.casa-pie .nota{font:400 13px/1.5 var(--sans);color:var(--platino-oscuro);max-width:62ch}

@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
 .pal>i{transform:none}
 .js [data-revela]{opacity:1;transform:none}
}