/* Estilos para hacer el header opaco en páginas específicas */

/* Aplicar fondo blanco al header en las páginas de contacto y cálculo de presupuesto */
.contacto-page header,
.calculo-presupuesto header {
    background-color: white;
    position: relative; /* Cambiamos de fixed a relative para que el contenido fluya normalmente */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Asegurar que el texto del header sea negro en estas páginas */
.contacto-page header .logo a,
.contacto-page header .main-nav a,
.contacto-page header .mobile-menu-toggle,
.calculo-presupuesto header .logo a,
.calculo-presupuesto header .main-nav a,
.calculo-presupuesto header .mobile-menu-toggle {
    color: #000;
}

/* Ajustar el espaciado del contenido principal para que aparezca debajo del header */
.contacto-page main,
.calculo-presupuesto main {
    padding-top: 0; /* Eliminamos el padding-top que podría estar compensando el header fixed */
}

/* Ajustar las secciones principales para que empiecen debajo del header */
.contacto-header,
.presupuesto-header {
    margin-top: 0;
    padding-top: 2rem;
}