/* ========================================================================
   Grupo Alaia · Base shared by 3 mockups
   Jerarquía oficial brandbook:
   - Calmius (display serif) → titulares editorial
   - Engravers Gothic (sans condensed mayúsculas) → titulares con peso/impacto
   - Bickham Script Pro → categorizaciones cortas, acentos aislados (NO en H1 con cuerpo extenso)
   - Baskerville (serif clásica) → cuerpo extenso, párrafos
   ======================================================================== */

@font-face{font-family:'Calmius';src:url('../assets/brand/fonts/Calmius-ExtraLight.ttf') format('truetype');font-weight:200;font-display:swap}
@font-face{font-family:'Bickham';src:url('../assets/brand/fonts/Bickham-Script.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Engravers';src:url('../assets/brand/fonts/Engravers-Gothic.ttf') format('truetype');font-weight:400;font-display:swap}

:root{
  --navy:#1A2D5B;
  --navy-deep:#101A36;
  --navy-darker:#0A1230;
  --silver:#B5B5B3;
  --silver-d:#8E8E8C;
  --silver-soft:#D6D5D2;
  --bone:#F5F3EE;
  --bone-warm:#EAE6DC;
  --black:#1C1C1C;
  --white:#FFFFFF;

  /* Type stacks oficiales (brandbook) */
  --serif:'Calmius','Cormorant Garamond',Georgia,serif;       /* Display serif elegante */
  --script:'Bickham','Allura',cursive;                         /* Categorizaciones cortas */
  --gothic:'Engravers','Cinzel','Trajan Pro',serif;           /* Mayúsculas impacto */
  --body:'Libre Baskerville','Baskerville',Georgia,serif;     /* Cuerpo extenso */

  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html{scroll-behavior:auto}
body{font-family:var(--body);font-weight:400;font-size:16px;line-height:1.75;overflow-x:hidden}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:var(--navy);color:var(--bone)}

/* Utility classes (use these directly) */
.t-display{font-family:var(--serif);font-weight:300;letter-spacing:-.005em}
.t-impact{font-family:var(--gothic);text-transform:uppercase;letter-spacing:.4em;font-weight:400}
.t-script{font-family:var(--script);font-weight:400}
.t-body{font-family:var(--body);font-weight:400;line-height:1.75}
.eyebrow{font-family:var(--gothic);font-size:11px;letter-spacing:.5em;text-transform:uppercase;font-weight:400}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}