/* =========================================================================
   TEMA — Único lugar donde se definen colores, tipografía, espaciados y
   medidas. Todas las vistas usan estas variables.

   Identidad: azul pizarra (principal) + ocre apagado (acento) + neutros
   cálidos, en tono de piedra de las Sierras. Tema claro.
   ========================================================================= */
:root {
    /* Principal — azul pizarra */
    --color-principal:         #2e4756;
    --color-principal-oscuro:  #1f333f;
    --color-principal-suave:   #e6ecef;   /* fondos de apoyo, filas activas */

    /* Acento — ocre apagado */
    --color-acento:            #a98743;   /* líneas, detalles (no para texto chico) */
    --color-acento-oscuro:     #7b5d23;   /* texto/enlaces sobre fondo claro */
    --color-acento-suave:      #f3ecdc;
    --color-acento-claro:      #dcc080;   /* acento sobre fondos oscuros */
    --color-cta:               #d8b64c;   /* dorado del logo: botón de acción principal */
    --color-cta-hover:         #e8c965;
    --color-hero:              #0f1a24;   /* fondo oscuro del hero (tono del retrato) */

    /* Neutros cálidos */
    --color-fondo:             #f6f3ee;
    --color-fondo-alt:         #edeae3;
    --color-superficie:        #ffffff;
    --color-borde:             #dad5ca;
    --color-borde-fuerte:      #bdb7aa;
    --color-texto:             #24292e;
    --color-texto-suave:       #5b6066;
    --color-texto-inverso:     #f6f3ee;
    --color-texto-inverso-suave: rgba(246, 243, 238, 0.74);

    /* Estados */
    --color-exito:     #2f6b4a;
    --color-exito-bg:  #e5f1ea;
    --color-error:     #a63b2c;
    --color-error-bg:  #f8e8e5;
    --color-aviso:     #8a5f12;
    --color-aviso-bg:  #f6ecd6;
    --color-info:      #2e4756;
    --color-info-bg:   #e6ecef;
    --color-whatsapp:  #1f9d55;

    /* Tipografía */
    --fuente-titulos: "Spectral", Georgia, "Times New Roman", serif;
    --fuente-texto:   "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

    --texto-xs:   0.8125rem;   /* 13px  etiquetas, notas */
    --texto-sm:   0.9375rem;   /* 15px  secundario, tablas */
    --texto-base: 1.0625rem;   /* 17px  cuerpo */
    --texto-lg:   1.25rem;
    --texto-h3:   1.375rem;
    --texto-h2:   clamp(1.75rem, 4.5vw, 2.25rem);
    --texto-h1:   clamp(2rem, 6vw, 3rem);

    --interlineado:        1.65;
    --interlineado-titulo: 1.2;

    /* Espaciado (escala de 4px) */
    --esp-1: 0.25rem;
    --esp-2: 0.5rem;
    --esp-3: 0.75rem;
    --esp-4: 1rem;
    --esp-5: 1.5rem;
    --esp-6: 2rem;
    --esp-7: 3rem;
    --esp-8: 4.5rem;
    --esp-seccion: clamp(1.75rem, 4vw, 3rem);
    --gutter:      clamp(1.25rem, 5vw, 2.5rem);

    /* Layout */
    --ancho-max:   1120px;
    --ancho-texto: 66ch;
    --alto-boton:  3.25rem;   /* 52px: botones grandes y cómodos en mobile */
    --alto-boton-sm: 2.25rem;

    /* Forma */
    --radio:     4px;
    --radio-sm:  3px;
    --sombra:    none;
    --sombra-flotante: 0 2px 8px rgba(31, 51, 63, 0.18);

    /* z-index */
    --z-sticky:   100;
    --z-flotante: 200;
    --z-modal:    300;
}