@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

:root {
    --blanco: #ffffff;
    --negro: #111111;
    --dorado: #D4AF37;
    --crema: #EFE8E0;
    --translucido: rgba(0, 0, 0, 0.45);
    --navbar-height: 0px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--blanco);
    color: var(--negro);
    line-height: 1.6;
    padding-top: var(--navbar-height);
}

/* ================= GLOBALES Y GENERALES (ESCRITORIO) ================= */
section {
    padding: 3rem 2rem; /* Padding general para secciones en escritorio */
}

/* ================= NAVBAR ================= */
.navbar {
    background-color: var(--blanco);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid var(--dorado);
}

.navbar-container {
    max-width: 1200px;
    margin: auto;
    padding: 0.6rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo {
    width: 50px;
    height: auto;
    object-fit: contain;
}

/* ================= ENLACES DE IDIOMA (ESCRITORIO) ================= */
.lang-switcher-desktop { /* Nueva clase para el switcher de escritorio */
    display: flex;
    align-items: center;
    order: 3;
}

.lang-list-inline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
}

.lang-list-inline li a {
    text-decoration: none;
    color: var(--negro);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    transition: color 0.2s ease, transform 0.2s ease;
    transform: scale(1);
}

.lang-list-inline li a:hover,
.lang-list-inline li a:focus {
    color: var(--dorado);
    transform: scale(1.05);
}

/* Lista de idiomas para móvil (dentro del menú desplegable) */
.lang-list-inline-mobile {
    display: none; /* Oculto por defecto en escritorio */
    list-style: none;
    padding: 0;
    margin: 1rem 0 0; /* Margen superior para separarlo de los enlaces de navegación */
    border-top: 1px solid var(--crema); /* Separador visual */
    padding-top: 1rem;
    width: 100%;
    text-align: center; /* Centrar las banderas */
}

.lang-list-inline-mobile li {
    margin-bottom: 0.5rem;
}

.lang-list-inline-mobile li a {
    text-decoration: none;
    color: var(--negro);
    font-weight: 600;
    font-size: 1rem; /* Ajuste de tamaño para las banderas/texto */
    display: flex; /* Para alinear bandera y texto */
    align-items: center;
    justify-content: center; /* Centrar contenido */
    gap: 0.5rem; /* Espacio entre bandera y texto */
    padding: 0.4rem 0.5rem;
    transition: color 0.3s ease, transform 0.3s ease;
}

.lang-list-inline-mobile li a:hover,
.lang-list-inline-mobile li a.active {
    color: var(--dorado);
    transform: scale(1.05);
}


/* ================= NAVEGACIÓN PRINCIPAL (ESCRITORIO) ================= */
.main-nav-wrapper {
    display: flex; /* Visible por defecto en escritorio */
    align-items: center;
    order: 2;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}

.nav-links li a {
    text-decoration: none;
    color: var(--negro);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: color 0.3s ease, transform 0.3s ease;
    transform: scale(1);
}

.nav-links li a:hover, .nav-links li a.active {
    color: var(--dorado);
    transform: scale(1.05);
}

/* ================= BOTÓN HAMBURGUESA ================= */
.hamburger {
    display: none; /* Oculto por defecto en escritorio */
    font-size: 1.8rem;
    background: none;
    border: none;
    color: var(--negro);
    margin-left: 1rem;
    cursor: pointer;
    position: relative;
    z-index: 9999;
}

/* ================= HERO CON VIDEO (INDEX) ================= */
.hero {
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--blanco);
    padding: 2rem;
    z-index: 1;
}

.hero-overlay h1,
.hero-overlay p {
    color: var(--blanco);
}

.hero h1 {
    font-size: 2.8rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-weight: 600;
}

.hero p {
    font-size: 1.15rem;
    max-width: 600px;
    margin-bottom: 1.5rem;
}

/* ================= BOTONES HERO ================= */
.btn-hero {
    background-color: var(--dorado);
    color: var(--blanco);
    padding: 0.8rem 1.5rem;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: background 0.3s ease, transform 0.3s ease;
}

.btn-hero:hover {
    background-color: #b7962c;
    transform: scale(1.05);
}

/* ================= HERO ESTÁTICO ================= */
.hero-static {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 60vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-static-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--translucido);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    z-index: 1;
    color: var(--blanco);
}

.hero-static-overlay h1 {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--blanco);
    text-transform: uppercase;
}

/* ================= BLOQUE INTRO ================= */
.bloque-intro {
    padding: 2rem 2rem;
    text-align: center; /* Se mantiene para que el H2 y P directo se centren */
    margin: 0 auto;
}

.bloque-intro h2 {
    font-size: 2rem;
    color: var(--negro);
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-weight: 600;
}

.bloque-intro p {
    max-width: 700px;
    margin: 0 auto 0.5rem; /* Margen inferior reducido para el párrafo introductorio en Contacto */
    font-size: 1.1rem;
    text-align: center; /* Centrado para párrafos directos en .bloque-intro (ej. el de Contacto) */
}

.frase-enfasis {
    font-style: italic;
    font-size: 1.05rem;
    color: var(--negro);
    text-align: center;
}

/* ================= PILARES ================= */
.pilares {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 3rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.pilar, .mision, .vision {
    background-color: var(--blanco);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
}

.pilar {
    flex: 1 1 calc(33% - 2rem);
    min-width: 280px;
    transition: transform 0.3s ease;
}

.pilar:hover {
    transform: translateY(-5px);
}

.pilar h3 {
    color: var(--negro);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.pilar p {
    font-size: 1rem;
    font-weight: 400;
    text-align: justify;
}

/* ================= CITA EDITORIAL ================= */
.editorial-cita {
    background-color: var(--blanco);
    padding: 3rem 1.5rem;
    text-align: center;
}

.editorial-cita blockquote {
    font-size: 1.3rem;
    font-style: italic;
    color: var(--negro);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
    border-left: 4px solid var(--dorado);
    padding-left: 1rem;
    text-align: center;
}

/* ================= MISIÓN Y VISIÓN ================= */
.mision-vision {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    padding: 3rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    background-color: var(--blanco);
}

.mision, .vision {
    flex: 1 1 calc(50% - 2rem);
    min-width: 300px;
    padding: 2rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background-color: var(--blanco);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mision h3, .vision h3 {
    color: var(--negro);
    font-size: 1.2rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    text-align: center;
}

.mision p, .vision p {
    font-size: 1rem;
    color: var(--negro);
    line-height: 1.6;
    text-align: justify;
}

/* ================= IMAGEN FINAL DE CIERRE ================= */
.imagen-final-cierre {
    height: 40vh; /* Mantengo la altura de escritorio */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.imagen-final-cierre .overlay-texto {
    background-color: var(--translucido);
    padding: 1rem 2rem;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.imagen-final-cierre p {
    font-size: 1.3rem;
    color: var(--dorado);
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
}

/* ================= BLOQUE NEGRO FINAL ================= */
.titulo-final-oro {
    background-color: var(--blanco);
    color: var(--negro);
    text-align: center;
    padding: 2rem 1rem;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0;
}

.titulo-final-oro.bg-white {
    background-color: var(--blanco);
    color: var(--negro);
}

/* ================= FOOTER ================= */
.footer {
    background-color: var(--negro);
    color: var(--blanco);
    text-align: center;
    padding: 1.5rem;
    font-size: 0.9rem;
}

.footer-contacto {
    margin-bottom: 0.8rem;
}

.footer-contacto a {
    color: var(--dorado);
    text-decoration: none;
    margin: 0 0.5rem;
    transition: color 0.3s;
}

.footer-contacto a:hover {
    color: var(--blanco);
}

.footer p {
    margin: 0;
}

/* ================= CTA (Llamada a la Acción) ================= */
.cta-final {
    background-color: var(--blanco);
    padding: 4rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-final:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.cta-contenido {
    text-align: center;
    max-width: 700px;
}

.cta-contenido h2 {
    font-size: 1.8rem;
    color: var(--negro);
    margin-bottom: 1rem;
    font-weight: 600;
    text-transform: uppercase;
}

.cta-contenido p {
    font-size: 1.15rem;
    margin-bottom: 2rem;
    color: var(--negro);
}

.cta-contenido .btn-hero {
    margin-top: 1rem;
    display: inline-block;
}

/* ================= CATÁLOGO ================= */
.productos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 1.5rem;
    justify-content: center;
    padding: 3rem 1.5rem 1.5rem;
    max-width: 100%;
    margin: 0 auto;
}

.productos-titulo {
    text-align: center;
    margin-bottom: 2rem;
}

.productos-titulo h2 {
    font-size: 2.2rem;
    color: var(--negro);
    font-weight: 600;
    text-transform: uppercase;
}

.producto {
    text-align: center;
    background-color: var(--blanco);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.producto:hover {
    transform: scale(1.03);
}

.producto-imagen {
    width: 100%;
    height: 280px;
    border-radius: 8px;
    margin-bottom: 1.2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.producto h3 {
    font-size: 1.3rem;
    color: var(--negro);
    margin-bottom: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.producto p {
    font-size: 1.05rem;
    color: var(--negro);
    line-height: 1.5;
    padding: 0 0.5rem;
}

/* ================= AJUSTES ESPECÍFICOS DE LAS PÁGINAS ================= */

/* Contacto: Contenedor principal para los bloques de contacto separados */
.contacto-bloques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    justify-content: center;
    padding: 3rem 1.5rem;
    max-width: 1200px;
    margin: 0.5rem auto; /* Margen inferior reducido para el párrafo introductorio en Contacto */
}

/* Contacto: Estilo para cada bloque de contacto (Correo y Whatsapp) */
.contacto-bloque {
    background-color: var(--blanco);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 2.5rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contacto-bloque:hover {
    transform: scale(1.01);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.contacto-bloque h3 {
    color: var(--negro);
    font-size: 1.3rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-weight: 600;
}

.contacto-bloque p {
    font-size: 1.15rem;
    color: var(--negro);
    line-height: 1.6;
    margin-bottom: 0.5rem; /* Margen inferior reducido para acercar el botón */
    text-align: center;
}

.contacto-bloque .btn-hero {
    display: inline-block;
    margin-top: 0.5rem;
}

/* Comercio: Layout intro y dossier (lado a lado) */
.comercio-grid-intro-dossier {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 2rem;
    justify-content: center;
    max-width: 1200px;
    margin: 3rem auto;
    padding: 0 1.5rem;
}

/* Estilo para cada uno de los dos bloques individuales de comercio (intro y dossier) */
.comercio-bloque-intro,
.comercio-bloque-dossier {
    background-color: var(--blanco);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 2.5rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.comercio-bloque-intro:hover,
.comercio-bloque-dossier:hover {
    transform: scale(1.01);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.comercio-bloque-intro h2,
.comercio-bloque-dossier h2 {
    font-size: 1.5rem; /* Unificado a 1.5rem para escritorio */
    color: var(--negro);
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-weight: 600;
}

.comercio-bloque-intro p,
.comercio-bloque-dossier p {
    font-size: 1.15rem;
    color: var(--negro);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-align: justify;
}

.comercio-bloque-intro .frase-enfasis {
    font-size: 1.15rem;
    margin-bottom: 0;
    text-align: center;
}

.comercio-bloque-dossier .btn-hero {
    margin-top: 2rem;
}

/* Catálogo: Contenedor de los bloques introductorios para grid */
.bloque-intro .intro-contenido {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* Catálogo: Bloques introductorios como botones */
.bloque-intro .intro-contenido .btn-intro {
    background-color: var(--blanco);
    color: var(--negro);
    padding: 1.5rem;
    text-decoration: none;
    font-weight: 400;
    border-radius: 6px;
    margin-top: 1.5rem;
    display: block;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Regla adicional para asegurar que los enlaces no se muestren azules/subrayados en cualquier estado */
.bloque-intro .intro-contenido .btn-intro:link,
.bloque-intro .intro-contenido .btn-intro:visited,
.bloque-intro .intro-contenido .btn-intro:hover,
.bloque-intro .intro-contenido .btn-intro:active {
    color: var(--negro);
    text-decoration: none;
}

.bloque-intro .intro-contenido .btn-intro:hover {
    background-color: var(--blanco);
    transform: scale(1.03);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.bloque-intro .intro-contenido .btn-intro p {
    font-size: 1.05rem;
    color: var(--negro);
    line-height: 1.5;
    margin-bottom: 0;
    font-weight: 400;
    text-align: justify; /* Texto justificado para los bloques de catálogo */
}

/* ================= UNIFICACIÓN DE FUENTES EN ESCRITORIO ================= */

/* H2 de bloques introductorios de Catálogo ("ORO CON RAICES", "PROCESO ARTESANAL", "LA HISTORIA EN CADA GRAMO") */
.bloque-intro .intro-contenido .btn-intro h2 {
    font-size: 1.5rem; /* Ajuste a 1.5rem para escritorio */
    margin-bottom: 0.8rem;
    color: var(--negro);
    text-transform: uppercase;
    font-weight: 600;
}

/* Título H2 "FORMAS DE NUESTRO ORO" en Catálogo (Si es el h2 principal de la sección de productos) */
.productos-titulo h2 {
    font-size: 1.8rem; /* Ajuste a 1.8rem para escritorio */
    color: var(--negro);
    font-weight: 600;
    text-transform: uppercase;
}

/* ================= MEDIA QUERY PARA MÓVILES (max-width: 768px) ================= */
@media (max-width: 768px) {
    /* Navbar y Botón Hamburguesa */
    .navbar-container {
        padding: 0.5rem 1rem;
    }
    .hamburger {
        display: block; /* Visible en móvil */
        order: 2; /* Orden para centrar o posicionar en el medio del navbar */
    }
    .hamburger:hover,
    .hamburger:focus,
    .hamburger:active {
        background-color: transparent;
        outline: none;
    }

    /* Ocultar el switcher de escritorio en móvil */
    .lang-switcher-desktop {
        display: none;
    }

    /* Menú Desplegable (full width) */
    .main-nav-wrapper {
        width: 100%; /* Ocupa todo el ancho */
        left: 0;     /* Se alinea a la izquierda (para full width) */
        right: auto; /* Asegura que no haya conflicto con right: 0 */
        display: none; /* Oculto por defecto en móvil */
        flex-direction: column;
        background-color: var(--blanco);
        position: absolute;
        top: 100%; /* Justo debajo del navbar */
        padding: 0.8rem;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        z-index: 9990;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px; /* Añadido para consistencia */
    }
    .main-nav-wrapper.show {
        display: flex; /* Se muestra con JS */
        flex-direction: column; /* Asegura que los elementos se apilen verticalmente */
        align-items: center; /* Centra los elementos horizontalmente en el menú */
    }

    .nav-links {
        flex-direction: column;
        width: 100%;
        text-align: center; /* Centra los enlaces de navegación */
    }
    .nav-links li {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    .nav-links li a {
        padding: 0.4rem 0.5rem;
        display: block;
        text-align: center; /* Centra el texto de cada enlace */
    }

    /* Mostrar el switcher móvil en móvil */
    .lang-list-inline-mobile {
        display: flex; /* Se muestra en móvil */
        flex-direction: column; /* Apila los idiomas verticalmente */
    }
    
    /* ================= AJUSTE DE FUENTES Y ESPACIADO EN GENERAL PARA MÓVIL ================= */
    /* Ajuste de fuentes para títulos H1 en todas las secciones hero (video e estático) */
    .hero h1,
    .hero-static-overlay h1 {
        font-size: 1.6rem; /* Se mantiene este tamaño que te gustó */
        line-height: 1.2;
    }

    /* === AJUSTE PRINCIPAL PARA LOS H2 GRANDES EN MÓVIL === */
    /* Incluye: LEGADO QUE SE FUNDE..., NUESTRA ESENCIA, UN ORO QUE NACE CON SENTIDO,
        SEMBRANDO FUTURO..., IMPULSE SU PROXIMO PROYECTO... */
    /* Estos suelen ser h2 directamente bajo .bloque-intro */
    .bloque-intro h2,
    .comercio-bloque-intro h2, /* Agregado para "NUESTRO PROCESO COMERCIAL SIMPLIFICADO" si aplica */
    .comercio-bloque-dossier h2, /* Agregado para el segundo bloque de comercio si aplica */
    .contacto-bloque h2 { /* Si Contacto tiene algún h2 general aparte de los h3 */
        font-size: 1.4rem; /* REDUCIDO A 1.4rem para que se vean más pequeños y armónicos */
        line-height: 1.3;
    }

    /* Ajuste de fuentes para H2 de bloques introductorios de Catálogo (ORO CON RAICES, etc.) */
    /* Estos fueron los que ajustamos a 1.2rem en móvil y ya estaban bien. */
    .bloque-intro .intro-contenido .btn-intro h2 {
        font-size: 1.2rem;
        line-height: 1.3;
    }

    /* Ajuste de fuentes para otros H2 (como "FORMAS DE NUESTRO ORO" si es .productos-titulo h2) */
    .productos-titulo h2,
    .cta-contenido h2 {
        font-size: 1.5rem; /* Se mantiene el 1.5rem para estos, ya que "FORMAS DE NUESTRO ORO" te gustaba cómo estaba */
        line-height: 1.3;
    }
    
    /* Ajuste de fuentes para H3 generales (incluye "ESTAMOS LISTOS PARA ESCUCHARLE") */
    .pilares .pilar h3,
    .mision h3,
    .vision h3,
    .producto h3,
    .contacto-bloque h3 {
        font-size: 1.1rem; /* Mantengo 1.1rem que es un buen tamaño para h3 en móvil */
        line-height: 1.4;
    }

    /* Ajuste de fuentes para párrafos principales */
    .hero p,
    .bloque-intro p,
    .cta-contenido p,
    .comercio-bloque-intro p,
    .comercio-bloque-dossier p,
    .contacto-bloque p,
    .producto p {
        font-size: 0.95rem;
    }

    /* Ajuste para la frase de énfasis */
    .frase-enfasis {
        font-size: 0.9rem;
    }

    /* Ajuste para citas editoriales */
    .editorial-cita blockquote {
        font-size: 1.1rem;
        padding-left: 0.8rem;
    }

    /* Ajuste para el texto en el footer */
    .footer p {
        font-size: 0.75rem;
    }

    /* Ajuste del padding general de las secciones para móviles */
    section,
    .bloque-intro,
    .pilares,
    .mision-vision,
    .cta-final,
    .productos,
    .contacto-bloques {
        padding: 1.5rem 1rem;
    }

    /* Ajuste del ancho para los bloques en móvil */
    .pilar,
    .mision,
    .vision,
    .comercio-bloque-intro,
    .comercio-bloque-dossier,
    .contacto-bloque,
    .producto {
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Ajuste para el hero del catálogo si tiene subtitulo grande */
    .hero-static-overlay p {
        font-size: 1rem;
    }

    /* Adaptación a móvil para los grids generales (Contacto, Comercio) */
    .comercio-grid-intro-dossier,
    .contacto-bloques {
        grid-template-columns: 1fr;
        padding: 0 1rem;
        margin-top: 1.5rem;
    }
    .comercio-bloque-intro,
    .comercio-bloque-dossier,
    .contacto-bloque {
        margin-bottom: 1.5rem;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Adaptación a móvil para los bloques introductorios del catálogo */
    .bloque-intro .intro-contenido {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0 1rem;
        margin-top: 1.5rem;
    }
    .bloque-intro .intro-contenido .btn-intro {
        margin-bottom: 1.5rem;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    /* ================= VISUALIZACIÓN DE IMAGEN FINAL EN "NOSOTROS" Y "NUESTRO ORO" (MÓVIL) ================= */
    .imagen-final-cierre {
        height: 25vh; /* Puedes ajustar esta altura según el mejor balance visual */
        background-size: cover; /* ¡Esto hace que ocupe todo el ancho sin franjas blancas! */
        background-position: center center; /* Centra la imagen */
        background-repeat: no-repeat;
    }

/* ==================== AJUSTES FINALES PARA VIDEO RESPONSIVE (PÁGINA "NUESTRO ORO") ==================== */  

/* --- ESTILOS PARA MÓVIL (Y PREDETERMINADOS) --- */  
.video-hero-container {  
    width: 100%;  
    height: 50vh; /* La altura que te gusta para móvil */  
    min-height: 280px;  
    background-color: var(--negro);  
    position: relative;  
    overflow: hidden;  
}  

.video-hero-container video {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
    /* Alinea el borde SUPERIOR del video con el borde SUPERIOR del contenedor.  
        Esto debería mostrar las cabezas sí o sí. Si no lo hace, el problema  
        es el propio archivo de video (por ejemplo, que tenga una franja negra incorporada).  
    */  
    object-position: top;  
}  

/* --- ESTILOS PARA ESCRITORIO (TABLET Y MÁS GRANDES) --- */  
@media (min-width: 769px) {  
    .video-hero-container {  
        height: 60vh;   
        padding-top: 0;  
        padding-bottom: 0;  
    }  

    .video-hero-container video {  
        /* Usamos 'contain' en escritorio para asegurar que se vea completo */  
        object-fit: contain;  
        object-position: center; /* Se re-centra para escritorio */  
    }  
}