/*
    BASE.CSS
    Estilos compartidos por todo el portafolio.
    Cambiando las variables de :root se actualiza la identidad visual completa.
*/

:root {
    /* Paleta principal */
    --color-fondo: #eaf1f5;
    --color-panel: #f7f9fa;
    --color-texto: #1f313b;
    --color-texto-suave: #60727d;

    /* Colores de marca */
    --color-principal-oscuro: #284b5d;
    --color-secundario: #091923;
    --color-secundario-suave: #dce8ee;
    --color-cta: #102f48;
    --color-cta-oscuro: #0b2235;

    /* Acentos y superficies */
    --color-linea: rgba(31, 49, 59, 0.14);
    --color-proyecto-fondo: rgba(247, 249, 250, 0.72);
    --color-proyecto-borde-hover: rgba(76, 120, 144, 0.32);
    --color-proyecto-borde-foco: rgba(76, 120, 144, 0.48);
    --color-foco-suave: rgba(76, 120, 144, 0.18);
    --color-acento-visual: rgba(181, 202, 216, 0.28);
    --color-texto-inverso-suave: rgba(247, 249, 250, 0.76);
    --color-scroll: rgba(76, 120, 144, 0.72);
    --color-scroll-suave: rgba(76, 120, 144, 0.58);
    --color-scroll-hover: rgba(16, 47, 72, 0.78);
    --color-scroll-fondo: rgba(220, 232, 238, 0.62);
    --color-scroll-borde: rgba(247, 249, 250, 0.82);

    /* Bordes, sombras y superficies */
    --sombra-suave: 0 14px 42px rgba(16, 47, 72, 0.08);
    --panel-cristal: rgba(247, 249, 250, 0.86);

    /* Tipografías */
    --fuente-serif: 'Fraunces', Georgia, serif;
    --fuente-sans: 'DM Sans', Arial, sans-serif;

    /* Escala tipográfica global */
    --texto-xs: clamp(12px, 1vw, 13px);
    --texto-sm: clamp(13px, 1vw, 14px);
    --texto-base: clamp(15px, 1vw, 16px);
    --texto-md: clamp(16px, 1vw, 17px);
    --texto-lg: clamp(18px, 1vw, 23px);
    --titulo-principal: clamp(43px, 4vw, 71px);
    --titulo-destacado: clamp(42px, 4vw, 87px);

    /* Medidas reutilizables */
    --radio-grande: 32px;
    --radio-pequeno: 20px;
    --ancho-contenedor: 1180px;

    color-scheme: light;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

/* Base global */
body {
    min-height: 100%;
    font-family: var(--fuente-sans);
    font-size: var(--texto-base);
    color: var(--color-texto);
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--color-fondo);
    max-width: 1680px;
    margin: 0 auto;
    padding-left: 4vw;
    padding-right: 4vw;
}

/* Tipografía común */
h1,
h2,
h3 {
    font-family: var(--fuente-serif);
    letter-spacing: -1px;
}

p {
    color: var(--color-texto-suave);
}

/* Texto pequeño para estados o cabeceras de sección */
.texto-superior,
.estado {
    color: var(--color-secundario);
    font-size: var(--texto-xs);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Botón reutilizable */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    color: var(--color-panel);
    background: var(--color-cta);
    font-size: var(--texto-sm);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.boton:hover {
    background: var(--color-cta-oscuro);
}