/* ==========================================================================
   SAP Mercadotecnia: design tokens
   Source of truth: DESIGN_PLAN.md (§4 color, §5 type, §7 layout, §12 motion).
   This is the ONLY file that holds raw color values. styles.css consumes tokens.
   ========================================================================== */

:root {
  /* ---------- Color: brand (locked, brief) ---------- */
  --amarillo: #f5b527;
  --rojo: #e35235;
  --turquesa: #009db0;
  --negro: #000000;
  --blanco: #ffffff;

  /* ---------- Color: derived (proposal, §4 as amended) ---------- */
  --tinta-roja: #B53A22;     /* links on white bands of marketing pages, error text. 5.84 on white, 4.95 on gris */
  --gris-tecnico: #ECECEC;   /* equipment ground, hairlines. Black on it 17.78 */
  --linea-sobre-negro: #4D4D4D; /* decorative divider inside the black footer only */

  /* ---------- Color: roles ---------- */
  --color-texto: var(--negro);
  --color-fondo: var(--blanco);
  --color-enlace: var(--negro);
  --color-foco: var(--negro);
  --color-foco-oscuro: var(--amarillo);   /* focus ring on black (11.52) */
  --color-linea: var(--gris-tecnico);

  /* ---------- Type: families (§5) ---------- */
  --fuente-display: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --fuente-texto: "Sofia Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --peso-regular: 400;
  --peso-semi: 600;
  --peso-bold: 700;
  --peso-display: 800;
  --peso-display-h2: 700;

  /* ---------- Type: fluid scale, 375px → 1280px (§5) ---------- */
  --texto-display: clamp(2.75rem, 0.9889rem + 7.5138vw, 7rem);      /* 44 → 112 (amendment 10) */
  --texto-h1:      clamp(2.5rem, 1.7749rem + 3.0939vw, 4.25rem);    /* 40 → 68 */
  --texto-h2:      clamp(2rem, 1.5856rem + 1.768vw, 3rem);          /* 32 → 48 */
  --texto-h3:      clamp(1.25rem, 1.1464rem + 0.442vw, 1.5rem);     /* 20 → 24 */
  --texto-lede:    clamp(1.1875rem, 1.1098rem + 0.3315vw, 1.375rem); /* 19 → 22 */
  --texto-cuerpo:  clamp(1.0625rem, 1.0366rem + 0.1105vw, 1.125rem); /* 17 → 18 */
  --texto-pequeno: 0.9375rem;  /* 15, never smaller */
  --texto-ui:      1.0625rem;  /* nav, buttons: 17 */

  --interlinea-display: 1;     /* never below 1.0: capital accents reach 0.84em */
  --interlinea-h2: 1.05;
  --interlinea-h3: 1.25;
  --interlinea-lede: 1.45;
  --interlinea-cuerpo: 1.55;
  --interlinea-pequeno: 1.5;
  --interlinea-ui: 1.2;

  --tracking-h2-min: 0.005em;

  --medida-display: 14ch;
  --medida-h1: 16ch;
  --medida-lede: 52ch;
  --medida-texto: 64ch;

  /* ---------- Spacing ---------- */
  --esp-1: 0.25rem;  /* 4 */
  --esp-2: 0.5rem;   /* 8 */
  --esp-3: 0.75rem;  /* 12 */
  --esp-4: 1rem;     /* 16 */
  --esp-5: 1.5rem;   /* 24 */
  --esp-6: 2rem;     /* 32 */
  --esp-7: 3rem;     /* 48 */
  --esp-8: 4rem;     /* 64 */

  --banda-pad-y: clamp(3rem, 1.7569rem + 5.3039vw, 6rem); /* 48 → 96 */
  --banda-pad-y-eq: calc(var(--banda-pad-y) * 1.25);      /* 60 → 120, equipment pages */

  /* ---------- Layout: grid and container (§7), mobile first ---------- */
  --margen-lateral: 16px;
  --col-gap: 16px;
  --columnas: 4;
  --contenedor-max: 1280px;

  /* ---------- Radii and lines ---------- */
  --radio-boton: 4px;
  --radio-campo: 4px;
  --radio-img-mkt: 12px;
  --radio-img-eq: 0;
  --borde-campo: 1.5px;
  --borde-familia-eq: 6px;   /* teal top edge of equipment bands */
  --borde-actual: 3px;       /* current-page underline in desktop nav */
  --barra-menu-actual: 6px;  /* current-page bar in mobile menu */
  --linea: 1px;

  /* ---------- Links ---------- */
  --subrayado-grosor: 1px;
  --subrayado-grosor-activo: 2px;
  --subrayado-offset: 0.2em;

  /* ---------- Focus ---------- */
  --foco-ancho: 3px;
  --foco-offset: 2px;

  /* ---------- Controls ---------- */
  --boton-alto-min: 48px;
  --boton-pad-y: 14px;
  --boton-pad-x: 24px;
  --toque-min: 48px;
  --menu-fila-min: 56px;

  /* ---------- Form fields (§10) ---------- */
  --campo-alto-min: 48px;
  --campo-pad-y: 12px;
  --campo-pad-x: 14px;
  --campo-flecha-ancho: 12px;
  --campo-flecha-alto: 8px;
  --campo-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='black' stroke-width='1.75'/%3E%3C/svg%3E");

  /* ---------- Chrome sizes ---------- */
  --header-alto: 64px;       /* designed height */
  --header-h: 64px;          /* runtime value, overwritten by main.js; fallback */
  --logo-header-alto: 40px;
  --logo-footer-alto: 128px;

  /* ---------- Bubble tail (§7) ---------- */
  --cola-ancho: 32px;
  --cola-alto: 22px;
  --cola-forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 40' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M5 0H56C47.5 8.5 37 18.5 23 27.5C16 32 9 36.5 1 40C5.5 33 8.2 25.5 9.4 18C10.3 11.5 8.6 5.2 5 0Z'/%3E%3C/svg%3E");

  /* ---------- Inicio hero bubbles (§8 Inicio, amendment 10) ---------- */
  --burbujas-ancho: 96px;    /* cluster box, square: 96 / 128 (768) / 112 (1024) / 176 (1280) */
  --burbujas-solape: 0.1;    /* below 1280: share of the cluster's height tucked behind the photo */
  --burbujas-desplaza: -0.72; /* from 1280: left offset from the photo, × cluster width */
  --burbujas-sobresale: 0.45; /* from 1280: how far it rises above the photo, × cluster width */

  /* ---------- Layers ---------- */
  --z-header: 100;
  --z-menu: 200;
  --z-skip: 300;
  --z-cola: 1;

  /* ---------- Motion (§12) ---------- */
  --dur-menu-abre: 200ms;
  --dur-menu-cierra: 150ms;
  --dur-mensaje: 160ms;
  --dur-subrayado: 120ms;
  --curva-salida: cubic-bezier(0.2, 0.7, 0.3, 1);
  --menu-desplazamiento: -8px;
  /* Moment 4 (amendment 10): Inicio hero entrance, ≈1.3s in total, once */
  --dur-burbuja: 900ms;      /* each bubble */
  --burbuja-escalon: 200ms;  /* delay between bubbles: yellow, red, teal */
  --burbuja-subida: 28px;    /* SVG user units (viewBox 123.77): ≈40px at 176, ≈22px at 96 */
}

@media (min-width: 768px) {
  :root {
    --margen-lateral: 32px;
    --col-gap: 24px;
    --columnas: 8;
    --header-alto: 72px;
    --header-h: 72px;
    --logo-header-alto: 48px;
    --logo-footer-alto: 160px;
    --cola-ancho: 40px;
    --cola-alto: 28px;
    --burbujas-ancho: 128px;
  }
}

@media (min-width: 1024px) {
  :root {
    --burbujas-ancho: 112px;
  }
}

@media (min-width: 1280px) {
  :root {
    --margen-lateral: 48px;
    --columnas: 12;
    --cola-ancho: 56px;
    --cola-alto: 40px;
    --burbujas-ancho: 176px;
  }
}

@media (min-width: 1600px) {
  :root {
    --col-gap: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-menu-abre: 0ms;
    --dur-menu-cierra: 0ms;
    --dur-mensaje: 0ms;
    --dur-subrayado: 0ms;
    --menu-desplazamiento: 0px;
  }
}