@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,600&family=Manrope:wght@400;500;600;700;800&display=swap');

/* =========================================================
   TOKENS — arquitectura de 3 capas
   1. Primitivos  → valores crudos, sin significado
   2. Semánticos  → propósito (superficie, tinta, acento…)
   3. Componente  → específicos de un componente

   DIRECCIÓN: "Esmeralda refinada"
   Base editorial cálida (aire, calidez, serif de autor)
   + acentos de mercado contenidos (marca con carácter).
   Frente a la versión anterior (bordes negros duros y sombras
   sólidas), aquí los bordes son de arena cálida y las sombras
   difusas: mismo carácter, una lectura más limpia y elegante.

   ─────────────────────────────────────────────────────────
   REGLA DE COLOR (importante)
   Solo existen TRES familias de marca. Su convivencia es
   armónica porque comparten temperatura cálida y saturación
   media:

       esmeralda  · verde de las esmeraldas de Boyacá  → marca
       oro        · orfebrería precolombina            → acento
       terracota  · barro y artesanía                  → acento cálido

   Reparto recomendado por pantalla (proporción 60/30/10):
       60% neutros (lienzo crema · blanco · hueso · tinta)
       30% esmeralda (superficies de marca y acción)
       10% oro + terracota (énfasis, nunca decoración)

   NO agregar colores nuevos (coral, azul, magenta, rosa…).
   Si algo necesita distinguirse, se distingue con TIPOGRAFÍA,
   PESO o POSICIÓN antes que con un color nuevo.
   ========================================================= */

:root {

    /* =====================================================
       CAPA 1 · PRIMITIVOS
       ===================================================== */

    /* --- Neutros (cálidos, papel de artesanía) --- */
    --blanco: #ffffff;              /* superficie limpia: tarjetas y encabezado */
    --lienzo: #f8f5ee;              /* fondo de página: crema cálida, no blanco puro */
    --hueso: #efe9dc;               /* panel secundario, un paso más cálido */
    --hueso-2: #e4dccb;             /* relleno deshabilitado / franjas */
    --niebla: #6b665d;              /* texto secundario: ~5.5:1 sobre blanco */
    --grafito: #2b2823;
    --negro: #1c1a16;               /* tinta: no negro puro, más natural */

    /* --- Bordes suaves (arena) --- */
    --arena: #e6dfd2;               /* borde por defecto: sutil */
    --arena-oscura: #d5ccbb;        /* borde definido: encabezado, controles */

    --linea-clara: rgba(255, 255, 255, 0.16);
    --linea-oscura: rgba(28, 26, 22, 0.12);

    /* --- Esmeralda · Boyacá (marca) --- */
    --esmeralda: #10614a;          /* tono más profundo y sereno que el esmeralda base */
    --esmeralda-oscura: #0a3b2e;   /* profundidad: pies de sección, hover sólido */
    --esmeralda-clara: #4f9c81;    /* SOLO sobre fondo oscuro (texto/ícono) */
    --esmeralda-tinte: #e4efe8;    /* fondo de etiqueta sobre claro */
    --esmeralda-sobre-tinte: #10614a;   /* texto sobre el tinte (~6:1) */

    /* --- Oro · orfebrería precolombina (acento) --- */
    --oro: #bf9f5c;                /* oro viejo: algo más apagado y cálido */
    --oro-claro: #e2cd9c;          /* SOLO sobre fondo oscuro */
    --oro-oscuro: #8f7539;
    --oro-tinte: #f6efdd;
    --oro-sobre-tinte: #79622f;    /* texto sobre el tinte (~5:1) */

    /* --- Terracota · barro artesanal (acento cálido) --- */
    --terracota: #b25d3c;          /* arcilla: más terrosa, menos saturada */
    --terracota-claro: #cc8a68;    /* SOLO sobre fondo oscuro */
    --terracota-tinte: #f7eae3;
    --terracota-sobre-tinte: #9e4f2e;   /* texto sobre el tinte (~5:1) */

    /* --- Café · Eje Cafetero (neutro cálido) --- */
    --cafe-oscuro: #3b2c22;

    /* --- Gradientes (solo con la paleta de marca) --- */
    --gradiente-hero: linear-gradient(150deg, var(--negro) 0%, var(--esmeralda-oscura) 70%, var(--esmeralda) 100%);
    --gradiente-oro: linear-gradient(90deg, var(--oro) 0%, var(--oro-claro) 100%);
    --gradiente-esmeralda: linear-gradient(135deg, var(--esmeralda) 0%, var(--esmeralda-oscura) 100%);

    /* --- Variantes de TEXTO accesibles (WCAG AA sobre fondo claro) ---
       Los colores de marca se conservan para fondos, bordes e iconos.
       Para TEXTO sobre fondo claro se usan estas versiones, porque el
       tono original no siempre alcanza el 4.5:1 exigido. */
    --esmeralda-texto: #115846;   /* >= 6:1 sobre blanco y sobre crema */
    --oro-texto: #7c6531;         /* >= 5:1 sobre blanco y sobre crema */
    --terracota-texto: #a1502f;   /* >= 5:1 sobre blanco y sobre crema */

    /* --- Tipografía --- */
    --display: 'Fraunces', 'Georgia', serif;
    --serif: 'Fraunces', 'Georgia', serif;
    --sans: 'Manrope', sans-serif;
    --mono: 'JetBrains Mono', monospace;

    /* --- Espaciado (ritmo de bloque: generoso, tipo mercado) --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;

    /* --- Radios: suaves y contenidos (elegante, no burbuja) --- */
    --radio: 3px;
    --radio-sm: 5px;
    --radio-md: 8px;
    --radio-lg: 12px;
    --radio-xl: 16px;
    --radio-full: 9999px;

    /* --- Movimiento: corto y con carácter --- */
    --curva: cubic-bezier(0.2, 0.8, 0.3, 1);
    --transicion-rapida: 140ms var(--curva);
    --transicion-normal: 200ms var(--curva);
    --transicion-lenta: 340ms var(--curva);

    /* --- Z-index --- */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 900;
    --z-modal: 950;
    --z-toast: 1200;
    --z-tooltip: 1300;

    /* --- Contenedor --- */
    --contenedor: 1280px;


    /* =====================================================
       CAPA 2 · SEMÁNTICOS
       ===================================================== */

    /* Superficies */
    --superficie: var(--blanco);
    --superficie-alt: var(--hueso);
    --superficie-lienzo: var(--lienzo);   /* fondo de página */
    --superficie-tinta: var(--negro);
    --superficie-marca: var(--esmeralda);

    /* Texto */
    --tinta: var(--negro);
    --tinta-suave: var(--niebla);
    --tinta-inversa: var(--blanco);

    /* Acento: un solo color de acción, un solo color de énfasis */
    --acento: var(--esmeralda);
    --acento-texto: var(--esmeralda-texto);
    --acento-contraste: var(--blanco);
    --enfasis: var(--oro);
    --enfasis-texto: var(--oro-texto);

    /* Bordes — suaves, en arena cálida (antes negro duro de 2px) */
    --borde-sutil: 1px solid var(--arena);
    --borde-fuerte: 1px solid var(--arena-oscura);
    --borde-acento: 1px solid var(--esmeralda);

    /* Elevación: sombras difusas y cálidas (antes sólidas y desplazadas) */
    --elev-0: none;
    --elev-1: 0 1px 2px rgba(28, 26, 22, 0.04), 0 2px 6px rgba(28, 26, 22, 0.06);
    --elev-2: 0 2px 4px rgba(28, 26, 22, 0.05), 0 10px 24px rgba(28, 26, 22, 0.08);
    --elev-3: 0 6px 14px rgba(28, 26, 22, 0.08), 0 18px 40px rgba(28, 26, 22, 0.12);
    --elev-acento: 0 10px 26px rgba(16, 97, 74, 0.20);
    --elev-oro: 0 10px 26px rgba(191, 159, 92, 0.22);

    /* Sombras difusas */
    --sombra-negro: 0 14px 44px rgba(28, 26, 22, 0.30);
    --sombra-tarjeta: 0 2px 10px rgba(28, 26, 22, 0.06);
    --sombra-tarjeta-hover: 0 16px 40px rgba(28, 26, 22, 0.14);


    /* =====================================================
       CAPA 3 · COMPONENTE
       ===================================================== */

    /* Botón */
    --btn-alto: 50px;
    --btn-pad-x: 26px;
    --btn-peso: 700;
    --btn-tamano: 14.5px;
    --btn-borde: 1px solid var(--arena-oscura);
    --btn-sombra: var(--elev-1);
    --btn-sombra-hover: var(--elev-2);
    --btn-desplazamiento: -2px;

    /* Tarjeta */
    --tarjeta-fondo: var(--blanco);
    --tarjeta-borde: 1px solid var(--arena);
    --tarjeta-sombra: var(--elev-1);
    --tarjeta-sombra-hover: var(--elev-2);
    --tarjeta-pad: 14px;

    /* Etiqueta / chip */
    --chip-alto: 34px;
    --chip-pad-x: 14px;
    --chip-borde: 1px solid var(--arena-oscura);

    /* Sección */
    --seccion-pad-y: var(--space-9);
    --seccion-titulo-tamano: clamp(30px, 4vw, 46px);
}

/* =========================================================
   RESET Y BASE
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    font-family: var(--sans);
    background-color: var(--lienzo);
    color: var(--tinta);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    display: block;
}

button {
    font-family: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

input,
select,
textarea {
    font-family: inherit;
    font-size: 16px;
}

:focus-visible {
    outline: 3px solid var(--esmeralda);
    outline-offset: 2px;
}

/* =========================================================
   UTILIDADES
   ========================================================= */

.contenedor {
    width: 100%;
    max-width: var(--contenedor);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.solo-lectura {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.italica-firma {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
}

/* Etiqueta tipo "eyebrow": mayúsculas, muy espaciada, gruesa */
.etiqueta {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* --- Utilidades de color ---
   Las de TEXTO usan variantes accesibles (>=4.5:1 sobre fondo claro).
   Usar estas clases en vez de escribir colores sueltos. */
.texto-marca { color: var(--esmeralda-texto); }
.texto-enfasis { color: var(--oro-texto); }
.texto-calido { color: var(--terracota-texto); }
.texto-suave { color: var(--niebla); }

.fondo-marca { background: var(--esmeralda); color: var(--blanco); }
.fondo-marca-oscura { background: var(--esmeralda-oscura); color: var(--blanco); }
.fondo-enfasis { background: var(--oro); color: var(--negro); }
.fondo-calido { background: var(--terracota); color: var(--blanco); }
.fondo-cafe { background: var(--cafe-oscuro); color: var(--blanco); }

.borde-marca { border-color: var(--esmeralda); }
.borde-enfasis { border-color: var(--oro); }

@media (max-width: 720px) {
    .contenedor {
        padding: 0 var(--space-4);
    }
}