/* =====================================================================
   Anchetas Navideñas · Tokens de diseño (prototipo rediseño 2026)
   Se portan 1:1 al tema hijo hello-elementor-child (style.css → :root)
   y se espejan en el Kit de Elementor (--e-global-color-*).
   Paleta REAL del kit de Elementor de producción: rojo marca #901B22, rojo botón #C2242D,
   verde lima de los delantales del equipo #A3BF50, verde línea #778B3B, texto #292929,
   fondos #F9FBFC / #EEEEEE. Sin azules ni naranjas heredados.
   Contrastes medidos (WCAG 2.x) anotados junto a cada color de texto.
   ===================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fuentes/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- Color: roles fijos (no reasignar) ---------- */
  --ac-marca: #901b22;          /* kit: rojo marca. Identidad, titulares de acento, enlaces. 8,88:1 sobre blanco */
  --ac-marca-oscuro: #7a161c;   /* fondo profundo del HERO (degradado con --ac-marca); blanco encima 10,7:1 */
  --ac-marca-suave: #f6e9ea;    /* fondo de insignias de identidad (texto marca 7,51:1) */
  --ac-accion: #c2242d;         /* kit: rojo botón. SOLO acción principal. Blanco encima 5,86:1 */
  --ac-accion-hover: #a51e26;   /* 7,46:1 */
  --ac-accion-press: #8e1a21;
  --ac-lima: #a3bf50;           /* kit: verde lima de los delantales. Rellenos y CTA sobre rojo; texto encima SOLO #292929 (7,01:1). Nunca texto blanco */
  --ac-lima-hover: #b5ce68;     /* texto #292929 encima 8,31:1 */
  --ac-lima-claro: #e3edc4;     /* texto e íconos claros sobre el rojo del HERO (7,26:1 sobre #901B22) */
  --ac-lima-suave: #f0f5e1;     /* fondo suave de secciones y hover de chips (texto-2 6,14:1 · texto-3 4,81:1) */
  --ac-crema: #fcf8ec;          /* crema de la marca (catálogo 2025). Fondo del HERO y secciones cálidas (texto 13,7:1 · texto-2 6,44:1 · texto-3 5,04:1 · marca 8,36:1) */
  --ac-verde: #778b3b;          /* kit: verde línea. Éxito: íconos, bordes, rellenos (no texto pequeño: 3,79:1) */
  --ac-verde-texto: #4f5e25;    /* texto de éxito 7,09:1 blanco · 6,37:1 lima suave */
  --ac-verde-suave: #eef3dc;

  --ac-texto: #292929;          /* kit. 14,55:1 */
  --ac-texto-2: #5e5a55;        /* secundario cálido 6,84:1 blanco · 6,14:1 lima suave · 5,9:1 #EEE */
  --ac-texto-3: #6f6a64;        /* metadatos 5,36:1 blanco · 4,81:1 lima suave · 4,62:1 #EEE */
  --ac-fondo: #ffffff;
  --ac-fondo-2: #f5f6f0;        /* gris cálido con matiz lima para alternar secciones y fondos de foto (texto-3 4,93:1) */
  --ac-fondo-3: #eeeeee;        /* kit */
  --ac-fondo-kit: #f9fbfc;      /* kit: fondo claro (material translúcido del header) */
  --ac-borde: #e3e3dc;          /* separadores decorativos */
  --ac-borde-control: #8c867f;  /* bordes de campos 3,6:1 (WCAG 1.4.11) */
  --ac-oscuro: #292929;
  --ac-error: #b3261e;          /* 6,2:1 sobre blanco */
  --ac-error-suave: #fbeceb;
  --ac-aviso-texto: #6b5300;
  --ac-aviso-suave: #fff4cc;
  --ac-foco: #292929;

  /* Materiales translúcidos (sz2-design §12) */
  --ac-material: rgb(255 255 255 / 0.74);
  --ac-material-borde: rgb(0 0 0 / 0.08);
  --ac-material-blur: saturate(180%) blur(20px);

  /* ---------- Tipografía (Inter variable autoalojada) ---------- */
  --ac-fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ac-fs-cuerpo: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);  /* 16 → 18 px */
  --ac-fs-pequeno: 0.875rem;                                  /* 14 px */
  --ac-fs-mini: 0.8125rem;                                    /* 13 px */
  --ac-fs-hero: clamp(2.75rem, 7vw, 6rem);                    /* indicación del dueño */
  --ac-fs-h2: clamp(2rem, 4.5vw, 3.75rem);
  --ac-fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --ac-fs-sub: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --ac-fs-precio: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --ac-tracking-hero: -0.035em;
  --ac-tracking-h2: -0.025em;
  --ac-tracking-h3: -0.015em;
  --ac-tracking-mini: 0.01em;

  /* ---------- Espacio (escala fija en rem) ---------- */
  --ac-e-1: 0.25rem;
  --ac-e-2: 0.5rem;
  --ac-e-3: 0.75rem;
  --ac-e-4: 1rem;
  --ac-e-5: 1.5rem;
  --ac-e-6: 2rem;
  --ac-e-7: 3rem;
  --ac-e-8: 4rem;
  --ac-e-9: 6rem;
  /* Ritmo compacto (nov-2026, pedido del dueño): ≈ 37 % menos que la F1 (4 → 8 rem), con el mismo aire relativo */
  --ac-seccion: clamp(2.5rem, 1.75rem + 3.2vw, 5rem);        /* padding vertical de sección: 40 px móvil → 80 px escritorio */
  --ac-seccion-cabeza: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); /* cabeza de sección → contenido (antes 2 → 4 rem) */
  --ac-gap-bloque: clamp(1rem, 0.75rem + 1vw, 2rem);         /* entre bloques hermanos (pasos, garantías, columnas) */
  --ac-gap-rejilla: clamp(0.75rem, 0.6rem + 0.6vw, 1.25rem); /* entre tarjetas pequeñas (presupuestos, categorías) */
  --ac-ancho: 80rem;          /* 1280 px, igual al contenedor del kit de Elementor */
  --ac-ancho-texto: 40rem;
  --ac-margen: clamp(1rem, 4vw, 2.5rem);

  /* ---------- Forma ---------- */
  --ac-radio-s: 0.5rem;
  --ac-radio: 0.875rem;
  --ac-radio-l: 1.5rem;
  --ac-radio-pildora: 999px;
  --ac-sombra-1: 0 1px 2px rgb(0 0 0 / 0.06), 0 2px 8px rgb(0 0 0 / 0.04);
  --ac-sombra-2: 0 10px 30px rgb(0 0 0 / 0.10), 0 2px 6px rgb(0 0 0 / 0.05);
  --ac-sombra-3: 0 30px 60px rgb(0 0 0 / 0.16), 0 8px 20px rgb(0 0 0 / 0.08);

  /* ---------- Tamaños táctiles ---------- */
  --ac-toque: 2.75rem;        /* 44 px: principales */
  --ac-toque-min: 1.5rem;     /* 24 px: mínimo WCAG 2.5.8 */

  /* ---------- Movimiento (sin animaciones de entrada) ---------- */
  --ac-dur-rapida: 100ms;
  --ac-dur: 200ms;
  --ac-curva: cubic-bezier(0.2, 0, 0, 1);

  /* ---------- Capas ---------- */
  --ac-z-header: 50;
  --ac-z-barra: 60;
  --ac-z-menu: 70;
  --ac-z-toast: 80;

  --ac-alto-header: 3.5rem;
  --ac-alto-barra: 4.5rem;
}

@media (min-width: 64rem) {
  :root { --ac-alto-header: 4rem; }
}

@media (prefers-reduced-transparency: reduce) {
  :root { --ac-material: #ffffff; --ac-material-blur: none; }
}

@media (prefers-contrast: more) {
  :root {
    --ac-texto-2: #3d3a36;
    --ac-texto-3: #3d3a36;
    --ac-borde: #8c867f;
    --ac-material: #ffffff;
    --ac-material-borde: #292929;
    --ac-material-blur: none;
  }
}