/* Tokens de elosoviajes.com.ar: una sola fuente de verdad para todo el sitio.
   Salen del boceto B aprobado (_bocetos/hero-b.html) y de la Guia de Marca 2026 v3.0
   (_marca/). Los valores de espaciado se derivaron del codigo del boceto: son los que se usan,
   no una escala impuesta. Cambiar un valor aca lo cambia en todas las paginas. */

@font-face{font-family:"Barlow";font-weight:500;font-display:swap;src:url(../fonts/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-display:swap;src:url(../fonts/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:700;font-display:swap;src:url(../fonts/barlow-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Bebas Neue";font-weight:400;font-display:swap;src:url(../fonts/bebas-neue-latin-400-normal.woff2) format("woff2")}

:root{
  /* Color: marca */
  --magenta:#9B1B6E;        /* guia de marca; solo la puerta (WhatsApp) y la pestaña activa */
  --magenta-lit:#B3237F;    /* hover de la puerta */
  --maroon:#3B0A0A;         /* texto oscuro y fondos oscuros de seccion */
  --night:#240606;          /* hero, barras sobre foto, pie */
  --bordo:#780B4A;          /* fondo del logo circular; fondo de favicon */
  --cream:#F5F0E8;          /* fondo base */
  --gold:#D4A017;           /* guia de marca; solo detalles sobre oscuro; sobre crema da 2,1:1, no se usa */
  --gold-lit:#EDBE45;       /* derivado para texto sobre foto y sobre oscuro (contraste) */
  --wa:#18A04A;             /* verde de WhatsApp para el boton flotante; blanco encima da 3,4:1 (el 25D366 de marca da 2:1) */
  --wa-lit:#1FAF52;         /* hover del boton flotante */
  --grafito:#1B1A1A;        /* franja inferior del pie: gris muy oscuro, pedido de Juan */

  /* Color: superficies y texto (derivados de los de marca) */
  --cream-2:#FBF8F3;        /* seccion clara alterna */
  --card:#FFFDF9;           /* tarjeta de viaje */
  --ink:var(--maroon);
  --ink-soft:#6A433C;       /* texto secundario sobre crema; 8,0:1 sobre --cream-2 */
  --on-dark:var(--cream);
  --on-dark-soft:rgba(245,240,232,.84);
  --line:rgba(59,10,10,.1);         /* borde fino de tarjeta */
  --line-strong:rgba(59,10,10,.28); /* borde de boton secundario */

  /* Velos sobre foto: bordo oscuro, nunca violeta ni negro puro */
  --velo-hero-arriba:linear-gradient(to bottom,rgba(36,6,6,.62) 0%,rgba(36,6,6,.08) 22%,rgba(36,6,6,.1) 100%);
  --velo-hero-texto:radial-gradient(ellipse 72% 48% at 50% 44%,rgba(36,6,6,.62) 0%,rgba(36,6,6,.5) 58%,rgba(36,6,6,0) 100%),linear-gradient(to top,rgba(36,6,6,.94) 0%,rgba(36,6,6,.5) 22%,rgba(36,6,6,0) 48%);

  /* Tipografia: dos familias */
  --f-label:"Bebas Neue","Arial Narrow",sans-serif;   /* titulos, fechas, destinos */
  --f-text:"Barlow",system-ui,sans-serif;             /* texto, botones, datos */
  --t-xs:12px;              /* estado de tarjeta, mayuscula con tracking */
  --t-sm:14px;              /* botones, menu, pestañas (mayuscula con tracking) */
  --t-base:17px;            /* cuerpo; mas grande que la referencia (15 px) a proposito */
  --t-lg:19px;              /* bajada de seccion */
  --t-price:22px;           /* precio en tarjeta */
  --t-card:32px;            /* titulo de tarjeta (Bebas) */
  --t-h2:clamp(40px,4.4vw,64px);
  --t-h1:clamp(54px,8.6vw,136px);
  --lh-display:.98;
  --lh-body:1.5;
  --ls-display:.04em;       /* Bebas en mayuscula pide tracking abierto */
  --ls-label:.12em;         /* botones y menu */
  --ls-eyebrow:.18em;
  --fw-text:500; --fw-strong:600; --fw-bold:700;

  /* Espaciado: los valores que usa el boceto */
  --s-1:6px; --s-2:12px; --s-3:18px; --s-4:24px; --s-5:34px; --s-6:48px; --s-7:72px; --s-8:96px;
  --gut:clamp(20px,4.4vw,72px);          /* margen lateral */
  --seccion:clamp(56px,7vw,96px);        /* aire vertical de las secciones principales (salidas, cierre) */
  --seccion-menor:clamp(40px,5vw,64px);  /* secciones de apoyo (cómo viajamos, reseñas) */

  /* Forma: dos radios, sin sombras */
  --r-card:22px;            /* tarjeta de viaje, foto de ficha */
  --r-pill:999px;           /* botones, chips, fecha en pildora */
  --borde:1px solid var(--line);

  /* Movimiento: nivel 2 */
  --ease:cubic-bezier(.2,.7,.2,1);
  --d-ui:.2s;               /* hover de boton y menu */
  --d-card:.35s;            /* elevacion de tarjeta */
  --d-foto:.9s;             /* zoom de foto y entradas */

  /* Medidas de componentes */
  --boton-alto:48px;        /* minimo tactil 44 px */
  --menu-alto:44px;
  --grilla-max:1380px;
}

@media (prefers-reduced-motion:reduce){
  :root{--d-ui:0s;--d-card:0s;--d-foto:0s}
}