/* ============================================================
   assets/css/estilos.css
   Variables de marca, reset CSS y estilos tipográficos base
   Solution Makers — VENA S.A.S.
   ============================================================
   Este archivo define el "design token" del proyecto:
   todos los colores, fuentes y espaciados salen de aquí.
   Los archivos específicos de página y componentes.css
   consumen estas variables en lugar de valores hardcodeados.
   ============================================================ */


/* ------------------------------------------------------------
   VARIABLES CSS — Paleta oficial del manual de marca
   (manual_identidad_solution_makers_paleta_oficial_roboto.docx)
   ------------------------------------------------------------ */
:root {
    /* --- Colores principales de marca --- */
    --color-azul-primario:    #11519D; /* Color principal — títulos, elementos destacados */
    --color-azul-oscuro:      #09388F; /* Acentos oscuros y profundidad */
    --color-azul-secundario:  #4878B3; /* Apoyo para degradados y fondos secundarios */
    --color-gris-medio:       #636364; /* Elementos neutros, líneas, íconos */
    --color-gris-oscuro:      #4A494A; /* Textos oscuros, versiones monocromas */

    /* --- Colores de apoyo (paleta extendida) --- */
    --color-gris-claro:       #89A3BF; /* Fondos suaves, soporte */
    --color-azul-gris:        #BDCCDC; /* Fondos muy claros, bloques */
    --color-blanco-azulado:   #E7EEF3; /* Fondo limpio, papelería */

    /* --- Colores funcionales (no de marca, para UI) --- */
    --color-fondo-claro:      #F4F7FA; /* Fondo de secciones alternas */
    --color-fondo-azul:       #EBF2FA; /* Fondo de íconos sobre blanco */
    --color-texto-oscuro:     #1A1A2E; /* Texto de títulos principales */
    --color-borde:            #DDE6F0; /* Bordes de cards y divisores */
    --color-exito:            #1D9E75; /* Mensajes de éxito (formularios) */
    --color-error:            #D94F4F; /* Mensajes de error (formularios) */
    --color-advertencia:      #E6A817; /* Alertas y advertencias */

    /* --- Tipografía --- */
    /* Roboto es la tipografía oficial del manual de marca */
    --fuente-principal: 'Roboto', sans-serif;
    --fuente-condensada: 'Roboto Condensed', sans-serif;

    /* --- Pesos tipográficos utilizados en el proyecto --- */
    --peso-light:   300;
    --peso-regular: 400;
    --peso-medio:   500;
    --peso-bold:    700;

    /* --- Escala tipográfica fluida (se adapta al tamaño de pantalla) --- */
    --texto-xs:   0.75rem;   /* 12px — etiquetas, notas al pie */
    --texto-sm:   0.875rem;  /* 14px — texto secundario, metadatos */
    --texto-base: 1rem;      /* 16px — cuerpo de texto principal */
    --texto-lg:   1.125rem;  /* 18px — texto destacado */
    --texto-xl:   1.25rem;   /* 20px — subtítulos de sección */
    --texto-2xl:  1.5rem;    /* 24px — títulos de cards */
    --texto-3xl:  2rem;      /* 32px — títulos de secciones */
    --texto-4xl:  2.5rem;    /* 40px — títulos principales */
    --texto-5xl:  3rem;      /* 48px — título del hero */

    /* --- Interlineado --- */
    --interlineado-apretado: 1.2;
    --interlineado-normal:   1.6;
    --interlineado-amplio:   1.8;

    /* --- Espaciado de secciones --- */
    --espaciado-seccion: 5rem; /* Padding vertical de secciones en desktop */

    /* --- Bordes redondeados --- */
    --radio-sm:  6px;
    --radio-md:  10px;
    --radio-lg:  16px;
    --radio-xl:  24px;
    --radio-pill: 999px; /* Para botones tipo píldora */

    /* --- Sombras --- */
    --sombra-sm:  0 2px 8px rgba(17, 81, 157, 0.08);
    --sombra-md:  0 4px 16px rgba(17, 81, 157, 0.12);
    --sombra-lg:  0 8px 32px rgba(17, 81, 157, 0.16);

    /* --- Transiciones reutilizables --- */
    --transicion-rapida:  all 0.15s ease;
    --transicion-normal:  all 0.25s ease;
    --transicion-lenta:   all 0.4s ease;

    /* --- Ancho máximo del contenedor principal --- */
    --max-ancho: 1200px;
    --padding-contenedor: 0 1.5rem; /* Padding lateral en pantallas pequeñas */
}


/* ------------------------------------------------------------
   RESET CSS — Normalización entre navegadores
   Basado en el reset moderno de Andy Bell (2022)
   ------------------------------------------------------------ */

/* Herencia de box-sizing para todos los elementos */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Eliminar márgenes y paddings por defecto del navegador */
* {
    margin: 0;
    padding: 0;
}

/* Configuración del elemento raíz */
html {
    /* Desplazamiento suave al hacer clic en anclas (#seccion) */
    scroll-behavior: smooth;

    /* Tamaño de fuente base: 16px en la mayoría de navegadores */
    font-size: 16px;

    /* Evitar que iOS agrande el texto al rotar el dispositivo */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Configuración del body */
body {
    font-family: var(--fuente-principal);
    font-weight: var(--peso-regular);
    font-size: var(--texto-base);
    line-height: var(--interlineado-normal);
    color: var(--color-gris-oscuro);
    background-color: #ffffff;

    /* Renderizado de fuentes más nítido */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Imágenes y medios responsivos por defecto */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

/* Heredar fuente en inputs y botones (no lo hacen por defecto) */
input, button, textarea, select {
    font: inherit;
}

/* Evitar desbordamiento de texto largo en párrafos */
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* Eliminar estilo por defecto de listas cuando se usan como navegación */
ul[role='list'], ol[role='list'] {
    list-style: none;
}

/* Eliminar subrayado por defecto de links — se redefine donde se necesita */
a {
    text-decoration: none;
    color: inherit;
}

/* Cursor de puntero en botones */
button {
    cursor: pointer;
    background: none;
    border: none;
}


/* ------------------------------------------------------------
   UTILIDADES GLOBALES
   Clases reutilizables en todas las páginas del sitio
   ------------------------------------------------------------ */

/* Contenedor principal — centra el contenido y limita el ancho */
.contenedor {
    width: 100%;
    max-width: var(--max-ancho);
    margin: 0 auto;
    padding: var(--padding-contenedor);
}

/* Ocultar visualmente pero mantener accesible para lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ------------------------------------------------------------
   TIPOGRAFÍA — Jerarquía de títulos y textos
   ------------------------------------------------------------ */

/* Título principal de sección (h2) */
.titulo-seccion {
    font-family: var(--fuente-principal);
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: var(--peso-bold);
    color: var(--color-texto-oscuro);
    line-height: var(--interlineado-apretado);
    margin-bottom: 1rem;
}

/* Subtítulo descriptivo bajo el título de sección */
.subtitulo-seccion {
    font-family: var(--fuente-principal);
    font-size: var(--texto-lg);
    font-weight: var(--peso-light);
    color: var(--color-gris-medio);
    line-height: var(--interlineado-amplio);
    max-width: 600px;
    margin: 0 auto 1rem auto;
}

/* Texto de cuerpo genérico */
.texto-cuerpo {
    font-family: var(--fuente-principal);
    font-size: var(--texto-base);
    font-weight: var(--peso-regular);
    color: var(--color-gris-oscuro);
    line-height: var(--interlineado-amplio);
}

/* Texto de acento / etiqueta pequeña */
.texto-acento {
    font-family: var(--fuente-principal);
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--color-azul-primario);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}


/* ------------------------------------------------------------
   BOTONES — Sistema de botones reutilizables
   ------------------------------------------------------------ */

/* Base de todos los botones */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--fuente-principal);
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    padding: 0.85rem 1.8rem;
    border-radius: var(--radio-pill);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transicion-normal);
    white-space: nowrap;
    line-height: 1;
    text-decoration: none;
}

/* Botón primario — azul sólido */
.btn-primario {
    background-color: var(--color-azul-primario);
    color: #ffffff;
    border-color: var(--color-azul-primario);
}

.btn-primario:hover {
    background-color: var(--color-azul-oscuro);
    border-color: var(--color-azul-oscuro);
    transform: translateY(-2px);
    box-shadow: var(--sombra-md);
}

/* Botón secundario — outline azul */
.btn-secundario {
    background-color: transparent;
    color: var(--color-azul-primario);
    border-color: var(--color-azul-primario);
}

.btn-secundario:hover {
    background-color: var(--color-azul-primario);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Botón blanco — para usar sobre fondos azules (hero) */
.btn-blanco {
    background-color: #ffffff;
    color: var(--color-azul-primario);
    border-color: #ffffff;
}

.btn-blanco:hover {
    background-color: var(--color-blanco-azulado);
    border-color: var(--color-blanco-azulado);
    transform: translateY(-2px);
    box-shadow: var(--sombra-md);
}

/* Botón outline blanco — para usar sobre fondos azules (hero) */
.btn-outline-blanco {
    background-color: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.6);
}

.btn-outline-blanco:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #ffffff;
    transform: translateY(-2px);
}

/* Estado deshabilitado para todos los botones */
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}