/* ==========================================================================
   DVB - Variables de marca y reset
   ========================================================================== */

:root {
    --dvb-navy-dark:  #0f172a;
    --dvb-navy:       #003B5C;
    --dvb-gold:       #D8A31A;
    --dvb-gold-light: #F2B705;
    --dvb-white:      #ffffff;
    --dvb-gray-light: #f5f6f8;
    --dvb-gray-text:  #5a6472;
    --dvb-text-dark:  #14202e;

    --dvb-radius:      16px;
    --dvb-radius-lg:   22px;
    --dvb-container:   1200px;

    --dvb-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

/* ==========================================================================
   Respaldo anti-desborde horizontal (responsive)
   El theme padre (Astra) inyecta su propia tipografía vía Customizer y a
   veces gana la cascada. Esto garantiza que ningún texto largo (ej. una
   palabra como "INFRAESTRUCTURA" en un celular angosto) se salga de la
   pantalla en vez de bajar de línea, sin importar qué tamaño de fuente
   termine aplicando Astra.
   ========================================================================== */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, span, a {
    overflow-wrap: break-word;
    word-break: break-word;
}

body {
    font-family: var(--dvb-font);
    color: var(--dvb-text-dark);
    margin: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

/* ==========================================================================
   Anclas del menú: respaldo CSS por si el navegador salta al #id antes de
   que corra el JS de scroll suave (o con JS desactivado). El offset real y
   suave lo maneja theme.js, esto solo evita que el header tape el título.
   ========================================================================== */
#somos,
#servicios,
#por-que-nosotros,
#proyectos,
#contacto,
.service-card {
    scroll-margin-top: 100px;
}

/* ==========================================================================
   Parallax genérico (profundidad estilo Ecoprial)
   Se usa en secciones con fondo: se sobredimensiona verticalmente y se
   traslada por JS (theme.js) según el scroll, dando sensación de que el
   fondo "respira"/tiene profundidad en vez de quedar plano.
   ========================================================================== */
.parallax-bg {
    position: absolute;
    top: -12%;
    left: 0;
    right: 0;
    height: 124%;
    background-size: cover;
    background-position: center;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
    .parallax-bg,
    .parallax-bg-img { transform: none !important; }
}

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

h1, h2, h3, h4 {
    margin: 0 0 20px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--dvb-text-dark);
}

p { margin: 0 0 16px; color: var(--dvb-gray-text); }

.dvb-container {
    max-width: var(--dvb-container);
    margin: 0 auto;
    padding: 0 24px;
}

.eyebrow {
    display: inline-block;
    color: var(--dvb-gold);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 14px;
}

.divider {
    width: 60px;
    height: 3px;
    background: var(--dvb-gold);
    border-radius: 2px;
    margin: 0 0 24px;
}

.section-title {
    max-width: 760px;
    margin: 0 auto 60px;
    text-align: center;
}

.section-title h2 { font-size: 42px; }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--dvb-navy);
    border-bottom: 2px solid var(--dvb-gold);
    padding-bottom: 3px;
    transition: color .2s ease, gap .25s ease;
}

.link-arrow:hover {
    color: var(--dvb-gold);
    gap: 10px;
}