/* ============================================================
   PROYECTO : DeoNell Consultora
   ARCHIVO  : estilos.css
   VERSION  : 1.0.1
   FECHA    : Agosto 2026

   DESCRIPCIÓN
   -----------
   Estilos generales y componentes compartidos del sitio.

   Contiene exclusivamente:
   - Normalización general
   - Accesibilidad
   - Contenedor general
   - Estructura general
   - Botones compartidos
   - Ajustes responsive globales
   - Preferencia de movimiento reducido

   Los estilos específicos de cada componente se encuentran
   en su correspondiente archivo CSS.
============================================================ */


/* ============================================================
   NORMALIZACIÓN GENERAL
============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--altura-encabezado);
}


body {
    min-height: 100vh;
    margin: 0;
    font-family: var(--fuente-principal);
    font-size: var(--tamano-texto-normal);
    font-weight: var(--peso-regular);
    line-height: var(--altura-linea-texto);
    color: var(--color-texto-principal);
    background-color: var(--color-fondo-principal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


    body.menu-abierto {
        overflow: hidden;
    }


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


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


button,
input,
textarea,
select {
    font: inherit;
}


    /* ============================================================
   ACCESIBILIDAD
============================================================ */

    a:focus-visible,
    button:focus-visible {
        outline: 3px solid var(--color-turquesa-claro);
        outline-offset: 4px;
    }


/* ============================================================
   CONTENEDOR GENERAL
============================================================ */

.contenedor {
    width: min( calc( 100% - (var(--margen-lateral-escritorio) * 2) ), var(--ancho-maximo-contenido) );
    margin-inline: auto;
}


/* ============================================================
   ESTRUCTURA GENERAL
============================================================ */

.pagina {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ============================================================
   ENCABEZADOS GENERALES DE SECCIÓN
============================================================ */

.seccion-encabezado {
    max-width: 920px;
    margin: 0 auto 55px;
    text-align: left;
}

.seccion-etiqueta {
    display: inline-block;
    margin-bottom: 18px;
    font-size: 0.86rem;
    font-weight: var(--peso-semi-negrita);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-azul-institucional);
}

.seccion-titulo {
    margin: 0;
    font-size: clamp(2.4rem, 4vw, 3.5rem);
    line-height: 1.15;
    color: var(--color-azul-institucional);
}

    .seccion-titulo span {
        display: block;
        color: var(--color-violeta-principal);
    }

.seccion-introduccion {
    max-width: 820px;
    margin-top: 28px;
    font-size: 1.18rem;
    line-height: 1.9;
    color: var(--color-texto-secundario);
}

/* ============================================================
   BOTONES COMPARTIDOS
============================================================ */

.boton {
    min-height: 54px;
    padding: 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-2);
    font-size: 0.96rem;
    font-weight: var(--peso-semi-negrita);
    border: 1px solid transparent;
    border-radius: var(--radio-redondo);
    transition: color var(--transicion-rapida), background-color var(--transicion-normal), border-color var(--transicion-normal), transform var(--transicion-rapida), box-shadow var(--transicion-normal);
}


/* ============================================================
   BOTÓN PRINCIPAL
============================================================ */

.boton-principal {
    color: var(--color-texto-claro);
    background: linear-gradient( 135deg, var(--color-violeta-principal), var(--color-violeta-claro) );
    box-shadow: var(--sombra-boton);
}


    .boton-principal:hover {
        transform: translateY(-2px);
        box-shadow: var(--sombra-media);
    }


/* ============================================================
   BOTÓN SECUNDARIO
============================================================ */

.boton-secundario {
    color: var(--color-azul-institucional);
    background-color: rgba(255, 255, 255, 0.76);
    border-color: var(--color-borde-suave);
}


    .boton-secundario:hover {
        color: var(--color-violeta-principal);
        border-color: var(--color-violeta-claro);
        transform: translateY(-2px);
        box-shadow: var(--sombra-suave);
    }


/* ============================================================
   MARCADORES TEMPORALES DE SECCIONES
============================================================ */

.seccion-marcador {
    min-height: 360px;
    padding-block: var(--espacio-8);
    display: flex;
    align-items: center;
    border-top: 1px solid var(--color-borde-suave);
}


    .seccion-marcador:nth-child(even) {
        background-color: var(--color-fondo-suave);
    }


    .seccion-marcador p {
        margin: 0;
        font-size: var(--tamano-titulo-pequeno);
        font-weight: var(--peso-semi-negrita);
        color: var(--color-texto-suave);
    }


/* ============================================================
   RESPONSIVE GLOBAL
============================================================ */


/* ============================================================
   PANTALLAS INTERMEDIAS
============================================================ */

@media (max-width: 1180px) {

    .contenedor {
        width: min( calc(100% - 64px), var(--ancho-maximo-contenido) );
    }
}


/* ============================================================
   DISPOSITIVOS MÓVILES
============================================================ */

@media (max-width: 640px) {

    .contenedor {
        width: calc( 100% - (var(--margen-lateral-movil) * 2) );
    }


    /* ========================================================
       ENCABEZADOS GENERALES DE SECCIÓN
    ======================================================== */

    .seccion-encabezado,
    .pilares-encabezado {
        margin-bottom: 48px;
    }


    .seccion-etiqueta {
        font-size: 0.72rem;
        line-height: 1.6;
    }


    .seccion-titulo {
        font-size: clamp( 2rem, 10vw, 2.75rem );
    }


    .seccion-introduccion {
        margin-top: 22px;
        font-size: 1rem;
        line-height: 1.75;
    }


    /* ========================================================
       BOTONES
    ======================================================== */

    .boton {
        width: 100%;
    }


    /* ========================================================
       MARCADORES TEMPORALES
    ======================================================== */

    .seccion-marcador {
        min-height: 260px;
        padding-block: var(--espacio-7);
    }


        .seccion-marcador p {
            font-size: 1.35rem;
        }
}


/* ============================================================
   PREFERENCIA DE MOVIMIENTO REDUCIDO
============================================================ */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}