/* ===== Design tokens — extraídos de Figma vía MCP =====
   Variables y valores reflejan literalmente el diseño Figma.
   Portables al Drupal cuando llegue el cambio de marca.
*/

/* ===== Tipografía =====
   La landing NO lleva copia propia de las fuentes: usa las del tema de Drupal,
   que se sirve desde el mismo origen que esta página (mismo server block de
   nginx: la landing va por `alias`, el tema cuelga del root). Por eso la ruta
   es absoluta de raíz y no lleva dominio — así vale igual en staging que en
   producción, sin sustituir nada, y sin CORS.
   Ventaja añadida: al pedir exactamente la misma URL que el sitio principal y
   que el banner de OneTrust, el navegador descarga cada fuente UNA sola vez y
   quien ya ha navegado la web la tiene cacheada al entrar aquí.
   Sin query de versión, a propósito: ver el comentario de scss/_fonts.scss.
   Sólo hay licenciados Azurio Medium (500) y Bold (700); los titulares que
   antes iban en Azurio Regular pasan a Medium. */
@font-face {
  font-family: "Azurio";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/themes/custom/cactlanzarote/fonts/azurio-medium.woff2") format("woff2"),
       url("/themes/custom/cactlanzarote/fonts/azurio-medium.woff") format("woff");
}
@font-face {
  font-family: "Azurio";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/themes/custom/cactlanzarote/fonts/azurio-bold.woff2") format("woff2"),
       url("/themes/custom/cactlanzarote/fonts/azurio-bold.woff") format("woff");
}

/* Basis Grotesque Pro — kit web con licencia (v3.10), los 3 pesos. */
@font-face {
  font-family: "Basis Grotesque Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/themes/custom/cactlanzarote/fonts/basis-grotesque-pro-regular.woff2") format("woff2"),
       url("/themes/custom/cactlanzarote/fonts/basis-grotesque-pro-regular.woff") format("woff");
}
@font-face {
  font-family: "Basis Grotesque Pro";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/themes/custom/cactlanzarote/fonts/basis-grotesque-pro-medium.woff2") format("woff2"),
       url("/themes/custom/cactlanzarote/fonts/basis-grotesque-pro-medium.woff") format("woff");
}
@font-face {
  font-family: "Basis Grotesque Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/themes/custom/cactlanzarote/fonts/basis-grotesque-pro-bold.woff2") format("woff2"),
       url("/themes/custom/cactlanzarote/fonts/basis-grotesque-pro-bold.woff") format("woff");
}

:root {
  /* === Base colors (Figma tokens) === */
  --color-primary: #000000;                        /* base/primary */
  --color-foreground: #0d0a08;                     /* base/foreground */
  --color-foreground-on-card: #000000;             /* base/card-foreground */
  --color-muted-foreground: rgba(13, 10, 8, 0.8);  /* base/muted-foreground */
  --color-bg: #ffffff;                             /* base/background, tailwind white */
  --color-card: #eeeeea;                           /* base/card */
  --color-accent-foreground: #d04144;              /* base/accent-foreground (dialog bar) */
  --color-how: #fe7449;                            /* sección "¿Cómo funciona?" */
  --color-border: #e2e8f0;                         /* slate-200 */
  --color-on-primary: #f8fafc;                     /* slate-50 (texto sobre botón primario) */
  --color-white: #ffffff;

  /* === Typography === */
  --font-display: "Azurio", "Basis Grotesque Pro", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body: "Basis Grotesque Pro", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Tamaños literales Figma */
  --fs-heading-xl: 48px;    --lh-heading-xl: 48px;
  --fs-text-xl: 20px;       --lh-text-xl: 28px;
  --fs-text-lg: 18px;       --lh-text-lg: 24px;     /* (Figma usa 24 line-height en text-lg para body) */
  --fs-text-base: 16px;     --lh-text-base: 24px;
  --fs-text-sm: 14px;       --lh-text-sm: 20px;
  --fs-step-num: 32px;      /* número paso "1." Azurio Bold */
  --fs-step-title: 28px;    /* título paso Azurio Regular */

  /* === Spacing scale Figma === */
  --space-0: 0;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* === Layout === */
  /* Frame Figma: 1440. Padding aplicado per-section (32 hero/video, 80 why/how/info, 24 dialog/footer). */
  --frame-width: 1440px;
  --section-pad-y: 80px;            /* Figma p-80 (spacing/20) en why/how/info */
  --section-pad-x: 80px;            /* lateral en why/how/info */
  --media-pad-x: 32px;              /* lateral en hero/video (spacing/8) */
  --media-pad-y: 80px;              /* padding-top hero/video (≥768); móvil override a 64px */
  --content-max-section: 1280px;    /* 1440 - 160 (padding lateral 80*2) en sections */
  --content-max-media: 1376px;      /* 1440 - 64 (padding lateral 32*2) en hero/video */
  --content-max-footer: 1392px;     /* 1440 - 48 (padding lateral 24*2) en dialog/footer */
  --footer-pad-x: 24px;             /* container-padding-x usado en dialog y footer */

  /* === Header === */
  --header-height: 80px;
  --header-z: 50;

  /* === Shadows === */
  --shadow-lg:
    0 10px 15px -3px rgba(121, 87, 194, 0.1),
    0 4px 6px -4px rgba(121, 87, 194, 0.1);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Breakpoints (documentación):
   md: 768   (tablet)
   lg: 1024  (desktop)
   xl: 1280  (wide desktop) */