/* ==========================================================================
   DevSEOMaker — variables.css
   --------------------------------------------------------------------------
   "Tokens" de diseño: colores, tipografía, espacios, radios y sombras.
   TODO el resto del CSS usa estas variables. Para cambiar un color o un
   tamaño en toda la web, se cambia SOLO aquí.

   Orden de carga de los CSS (ver <head> de cada página):
     1. fonts.css       → tipografía Inter incrustada
     2. variables.css   → tokens (este archivo)
     3. base.css        → reset, tipografía y elementos HTML básicos
     4. layout.css      → cabecera, menú, pie, contenedores y secciones
     5. components.css  → botones, tarjetas, formularios, FAQ…
     6. pages/*.css     → estilos exclusivos de una página (p. ej. home.css)
   ========================================================================== */

/* La fuente Inter se declara en fonts.css (se carga antes que este archivo). */

:root {
  /* ---- Colores de marca (extraídos del diseño aprobado) ---------------- */
  --color-navy: #122e43;          /* Marino del logo: texto y botón principal */
  --color-navy-soft: #1f4562;     /* Hover del botón principal             */
  --color-blue: #1a6cb5;          /* Acento en titulares y enlaces.
                                     Oscurecido respecto al diseño (#2F8FE0)
                                     para cumplir contraste WCAG AA: 5,45:1
                                     sobre blanco y 5,08:1 sobre el celeste
                                     claro. NO usar sobre --color-sky
                                     (4,04:1, insuficiente en texto pequeño). */
  --color-blue-bright: #54baf3;   /* Celeste del logo. Solo decorativo,
                                     NO usar para texto (contraste bajo)    */
  --color-sky: #bfe3fa;           /* Fondo de secciones destacadas         */
  --color-sky-soft: #f2f8fc;      /* Fondo de secciones alternas           */
  --color-sky-button: #8fd0f8;    /* Botón sobre fondo oscuro (contacto)   */
  --color-white: #ffffff;

  /* ---- Colores de texto y apoyo ---------------------------------------- */
  --color-text: var(--color-navy);
  --color-text-muted: #4a5d73;    /* Texto secundario (≈6.6:1 sobre blanco) */
  --color-border: #d6e4ef;        /* Líneas decorativas (separadores)       */
  --color-border-input: #7a91a8;  /* Bordes de campos de formulario: 3,26:1
                                     sobre blanco (WCAG 1.4.11 exige ≥3:1
                                     para que se vea dónde escribir).       */
  --color-success: #047857;
  --color-success-bg: #e7f6ef;
  --color-error: #b42318;
  --color-error-bg: #fdecea;
  --color-on-dark-muted: #c9dcee; /* Texto secundario sobre fondo marino    */

  /* ---- WhatsApp (verde de la marca WhatsApp, texto oscuro: 6,23:1) ----- */
  --color-whatsapp: #25d366;
  --color-whatsapp-hover: #1fb957;
  --color-whatsapp-text: #0b3d1e;

  /* ---- Marcador de imagen pendiente ------------------------------------ */
  --color-placeholder-1: #e6f3fd;
  --color-placeholder-2: #cfe8fb;

  /* ---- Tipografía ------------------------------------------------------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Tamaños fluidos con clamp(mínimo, ideal, máximo): se adaptan solos del
     móvil al escritorio sin necesidad de media queries.                   */
  --text-xs: 0.75rem;                                   /* 12px etiquetas  */
  --text-sm: 0.875rem;                                  /* 14px            */
  --text-base: 1rem;                                    /* 16px cuerpo     */
  --text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);   /* 17–20px         */
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);    /* 20–24px  H3     */
  --text-2xl: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);    /* 28–44px  H2     */
  --text-3xl: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);    /* 36–60px  H1 de páginas interiores */
  --text-hero: clamp(2.5rem, 1.6rem + 4.6vw, 5rem);     /* 40–80px  H1     */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;            /* Titulares muy marcados del diseño    */

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.6;

  /* ---- Espaciado (escala de 4px) ---------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-section: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); /* Alto de sección */

  /* ---- Contenedor ------------------------------------------------------- */
  --container-max: 1200px;
  --container-narrow: 760px;      /* Textos largos: líneas más legibles   */
  --gutter: 1rem;                 /* Margen lateral en móvil              */

  /* ---- Bordes, radios y sombras ----------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(18, 46, 67, 0.06);
  --shadow-md: 0 8px 24px rgba(18, 46, 67, 0.08);

  /* ---- Otros ------------------------------------------------------------ */
  --header-height: 72px;
  --mobile-bar-height: 64px;
  --transition: 180ms ease;
  --focus-ring: 0 0 0 3px #ffffff, 0 0 0 6px var(--color-blue);
}

@media (min-width: 768px) {
  :root {
    --gutter: 2rem;
  }
}