/* ============================================================
   VARIABLES GLOBALES — Decibelio
   Colores, tipografías y tamaños del proyecto
   Usar siempre estas variables en el resto de archivos CSS
   ============================================================ */

:root {

    /* --------------------------------------------------
       COLORES — Paleta corporativa Decibelio
    -------------------------------------------------- */

    /* Verde principal — botones, acento, logo */
    --color-verde:           #90e600;

    /* Verde oscuro — hero, secciones de impacto */
    --color-verde-oscuro:    #005E4C;

    /* Verde medio — parada clara del degradado del banner de cierre (escala teal de la diseñadora) */
    --color-verde-medio:     #337E70;

    /* Verde tipográfico — color de texto en detalles (nº de badge, etc.; escala teal de la diseñadora) */
    --color-verde-texto:     #1a6e5e;

    /* Verdes suaves — fondos, badges, hover suave */
    --color-verde-suave:     #DFF5CA;
    --color-verde-suave-2:   #EBF9DF;

    /* Azul acento — hover de enlaces inline en párrafos de categoría */
    --color-azul-acento:     #2872FA;

    /* Grises — textos y fondos neutros */
    --color-gris-texto:      #4C4C4C;
    --color-gris-medio:      #6F6F6F;
    --color-gris-oscuro:     #403F3E;
    --color-gris-fondo:      #F4F4F3;  /* fondo de sección gris claro */
    --color-gris-separador: color-mix(in srgb, var(--color-gris-texto) 8%, transparent); /* hairline separador (dropdown, offcanvas) */

    /* Blancos */
    --color-blanco:          #FFFFFF;
    --color-blanco-80:       rgba(255, 255, 255, 0.80);
    --color-blanco-60:       rgba(255, 255, 255, 0.60);
    --color-blanco-30:       rgba(255, 255, 255, 0.30); /* borde de los badges de banner */
    --color-blanco-separador: rgba(255, 255, 255, 0.10); /* separadores sobre fondos oscuros */

    /* Dorado — estrellas de las reseñas de clientes */
    --color-estrella:        #FBBC05;

    /* Colores de estado — familia funcional (usabilidad, no branding).
       Reutilizable por los formularios de la metodología. */
    --color-estado-error:    #C0392B;  /* avisos de error de formulario */

    /* --------------------------------------------------
       TIPOGRAFÍAS
    -------------------------------------------------- */

    --font-titulos:          'Encode Sans', system-ui, sans-serif;
    --font-cuerpo:           'Encode Sans', system-ui, sans-serif;

    /* Eje de ancho — Encode Sans variable (font-stretch 75–125%)
       Usar siempre estas variables, nunca valores hardcodeados.
       Crear nuevas variables aquí conforme aparezcan necesidades concretas. */
    --ancho-condensado:      75%;   /* badges del sitio · copyright del footer */

    /* --------------------------------------------------
       PESOS TIPOGRÁFICOS
    -------------------------------------------------- */

    --peso-extralight:       200;
    --peso-light:            300;
    --peso-normal:           400;
    --peso-medio:            500;
    --peso-semibold:         600;
    --peso-bold:             700;
    --peso-extrabold:        800;

    /* --------------------------------------------------
       TAMAÑOS DE TEXTO — escalado fluido con clamp()
       clamp(mínimo, preferido, máximo)
    -------------------------------------------------- */

    --texto-h1:              clamp(2.175rem, 4vw, 2.875rem); /* H1 de todas las páginas — token único compartido por todos los heros */
    --texto-h2:              clamp(1.8rem, 3.5vw, 2.8rem);
    --texto-h2-seccion:      clamp(1.4rem, 2.4vw, 1.75rem);  /* H2 menor — páginas de contenido (legales, sobre nosotros, cómo llegar) */
    --texto-subtitulo:       1.2rem;   /* subtítulos H3 del subgrid de categoría — contenido para columnas estrechas */
    --texto-base:            1rem;
    --texto-grande:          1.25rem;  /* lead text, indicadores visuales */
    --texto-parrafo-hero:    clamp(1.0625rem, 1.0029rem + 0.2545vw, 1.125rem); /* párrafo de entrada de los heros — 18px (≥768px) → 17px (375px), escala solo en móvil; revierte el tamaño único del 2026-07-19 */
    --texto-pequeño:         0.875rem;
    --texto-muy-pequeño:     0.75rem;

    /* --------------------------------------------------
       ESPACIADO — secciones y contenedores
    -------------------------------------------------- */

    --espaciado-seccion:     104px;
    --espaciado-seccion-sm:  48px;
    --espaciado-seccion-lg:  120px;  /* secciones grandes de categoría — más aire que entre bloques del cuerpo */
    --ancho-contenedor:      1200px;
    --ancho-contenedor-amplio: 1400px;  /* tope de contenido en bloques a sangre */
    --ancho-lectura:         820px;      /* ancho de lectura de párrafos (prosa, panel) */
    --padding-contenedor:    40px;
    --ancho-tarjeta-movil:   360px;  /* ancho máximo del grid en móvil (una columna) */

    /* --------------------------------------------------
       BORDES Y RADIOS
    -------------------------------------------------- */

    --radio-boton:           6px;
    --radio-badge:           20px;
    --radio-tarjeta:         8px;
    --radio-pildora:         100px;  /* píldora — badges (banner y sólido) */

    /* --------------------------------------------------
       LÍNEAS DECORATIVAS
    -------------------------------------------------- */

    --linea-radio:           2px;   /* radio de extremos */
    --linea-ancho-h2:        48px;  /* línea bajo títulos H2 de sección */
    --linea-alto-h2:         3px;   /* altura línea H2 — más marcada */
    --linea-ancho-h3:        24px;  /* línea bajo títulos H3 */
    --linea-alto-h3:         1px;   /* altura línea H3 — más sutil */

    /* --------------------------------------------------
       SOMBRAS TARJETAS
    -------------------------------------------------- */

    /* Sutil — tarjetas con muchos elementos donde la sombra marcada saturaría visualmente */
    --sombra-tarjeta-suave:  0 2px 12px rgba(0, 0, 0, 0.07);
    /* Profundidad — tarjetas que necesitan resalte visual y separación del fondo */
    --sombra-tarjeta:        0 4px 20px rgba(0, 0, 0, 0.12);
    /* Elevación al hover de tarjetas clicables — tinte verde-oscuro vía color-mix */
    --sombra-tarjeta-hover:  0 8px 28px color-mix(in srgb, var(--color-verde-oscuro) 14%, transparent);

    /* --------------------------------------------------
       TRANSICIONES
    -------------------------------------------------- */

    --transicion-rapida:     0.2s ease;
    --transicion-normal:     0.3s ease;

}

/* Responsive — ajuste de tokens en móvil (espaciado y tipografía) */
@media (max-width: 768px) {
    :root {
        --espaciado-seccion:     64px;
        --espaciado-seccion-lg:  80px;
        --padding-contenedor:    20px;
        --texto-h1:              2.125rem; /* 34px — H1 menor solo en móvil (que "Telecomunicaciones" quepa) */
    }
}