/* =========================================================================
   Página interior de Contacto

   En el .ai final Contacto NO es una pantalla aparte: es la última sección de
   la portada. Esta página la reusa tal cual —mismo módulo, mismas medidas— y
   solo le antepone la banda oscura de las páginas interiores, para que Contacto
   del menú lleve a una pantalla propia sin inventar un diseño que no existe.
   ========================================================================= */

.pag {
    position: relative;
    background: #29384B;
    overflow: hidden;
}

/* banda de fondo con la misma foto y el mismo alto que en las fichas */
.pag__banda {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(300 * var(--u));
    background: #29384B url('https://dfyc.cl/wp-content/uploads/2026/08/dfyc-banda-interior.jpg') center top / cover no-repeat;
    z-index: 0;
}

/* velo del header, igual que en las fichas: ahí la barra es casi opaca */
.pag::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(137 * var(--u));
    background: rgba(23, 35, 48, 0.88);
    z-index: 2;
    pointer-events: none;
}

/* el módulo arranca bajo la banda; el resto lo hereda de home.css */
.pag .cto {
    position: relative;
    z-index: 3;
    margin-top: calc(300 * var(--u));
    background: transparent;
}

/* el título de Contacto en la portada viene de una sección con foto encima;
   aquí necesita su propia separación superior */
.pag .cto__titulo {
    padding-top: calc(54 * var(--u));
}

@media (max-width: 900px) {
    .pag__banda { height: 200px; }
    .pag::before { display: none; }
    .pag .cto { margin-top: 200px; }
    .pag .cto__titulo { padding-top: 30px; }
}