/* ==========================================================================
   MAESTRO HOME.CSS - VERSIÓN FINAL PARA REUNIÓN (PC + MÓVIL)
   ========================================================================== */

/* 1. CONFIGURACIÓN BASE */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-snap-type: none !important; /* Desactivado por pedido de gerencia */
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Montserrat', sans-serif;
    background: #fff;
    color: #1a1a1a;
    overflow-x: hidden;
}

/* REGLA GLOBAL PARA SECCIONES NEGRAS */
.dark-bg, .section-black, #section-hero, #eb-science {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Textura de grano sutil */
.texture-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.03 !important;
    z-index: 9999;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/76/1k_ext_noise.png');
}

/* 2. HEADER PERMANENTE (MEDIDAS GERENCIA: 2.2cm -> 1.5cm) */
#main-header {
    position: fixed !important;
    top: 0; left: 0;
    width: 100%;
    height: 83px !important; /* 2.2 cm aprox */
    background-color: white !important;
    display: flex !important;
    align-items: center;
    z-index: 5000;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid #eee;
}

#main-header.scrolled {
    height: 57px !important; /* 1.5 cm aprox */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.header-container {
    width: 94%;
    margin: 0 auto;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* LOGO (REPARADO: SIN DOBLE LÍNEA NI SUBRAYADO) */
.logo-link {
    text-decoration: none !important;
    border: none !important;
    display: block;
}

.main-logo {
    height: 42px !important; /* Mantenemos el tamaño elegante */
    width: auto;
    display: block;
    /* TRUCO TÉCNICO: Obliga al navegador a renderizar los bordes más nítidos */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    shape-rendering: geometricPrecision;
}

#main-header.scrolled .main-logo {
    height: 38px !important;
}

/* 3. BOTONES NAV (RAYITAS DELGADAS) */
.nav-left, .nav-right {
    flex: 1;
    display: flex;
    align-items: center;
}

.nav-center {
    flex: 2;                /* Le da el doble de espacio al logo para que luzca grande */
    display: flex;
    justify-content: center;
}

.nav-right {
    justify-content: flex-end; /* Alinea los botones a la derecha */
    gap: 20px;
}

.icon-btn {
    background: transparent !important; /* Elimina cualquier fondo */
    border: none !important;           /* ELIMINA EL CUADRO/BORDE */
    outline: none !important;          /* Elimina el recuadro azul al hacer clic */
    padding: 0 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-right: 8px;                 /* Ajuste de separación con el idioma */
}

/* --- GRUPO BÚSQUEDA E IDIOMA --- */
.search-lang-group {
    display: flex;
    align-items: center;
    gap: 3px; /* Ajusta este número para acercar o alejar la lupa del | IN */
}

.icon-btn {
    background: none !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
}

/* La Lupa de 1px */
.lupa-svg {
    width: 12px; /* Tamaño discreto */
    height: 12px;
    stroke-width: 1px;
    opacity: 0.7;
}

.icon-btn:hover .lupa-svg {
    opacity: 1;
}

.icon-btn:hover i {
    opacity: 1;                         /* Se ilumina al pasar el mouse */
}

.lang-selector {
    font-size: 10px;
    font-weight: 300;
    color: #000;
    opacity: 0.8;
    margin-left: 0 !important;
}

.menu-btn {
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    padding: 10px;
    z-index: 6000;
}

.burger-icon {
    width: 26px;
    height: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.burger-icon span {
    display: block !important;
    width: 100% !important;
    height: 1px !important; /* Línea de 1px como el logo */
    background-color: #000 !important;
}

/* 4. COMPRAR PRODUCTOS (DROPDOWN REPARADO) */
.shop-dropdown {
    position: relative;
    display: inline-block;
    margin-right: 25px;
    padding-bottom: 15px; /* Puente invisible para el mouse */
    margin-bottom: -15px;
}

.shop-link {
    text-decoration: none !important;
    color: #000 !important;
    
    /* CAMBIOS SOLICITADOS: */
    font-size: 9px !important;        /* Bajamos un punto (era 10px) */
    letter-spacing: 1.5px !important;  /* Reducimos la separación (era 2.5px) */
    border-bottom: none !important;   /* QUITAMOS EL SUBRAYADO */
    
    font-weight: 400 !important;      /* Peso normal, no negrita */
    text-transform: uppercase;
    opacity: 0.85;                     /* Un toque de suavidad */
    transition: all 0.3s ease;
}

/* 5. MENÚ OVERLAY (PC - SIEMPRE HORIZONTAL) */
#menu-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.98);
    z-index: 8000;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transform: translateY(-100%);
    transition: transform 0.6s cubic-bezier(0.85, 0, 0.15, 1);
    visibility: hidden;
}

#menu-overlay.open { transform: translateY(0); visibility: visible; }

/* X DELGADA A LA IZQUIERDA */
#close-menu {
    position: absolute;
    top: 35px;
    left: 40px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 9000;
}

.close-icon {
    position: relative;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
}

.close-icon span {
    display: block;
    position: absolute;
    width: 100%;
    height: 1px; /* X de 1px */
    background-color: #000;
}

.close-icon span:nth-child(1) { transform: rotate(45deg); }
.close-icon span:nth-child(2) { transform: rotate(-45deg); }

.menu-columns {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* FUERZA HORIZONTAL EN PC */
    width: 90%;
    max-width: 1200px;
    text-align: center;
    gap: 30px;
}

.v-line { width: 1px; height: 100px; background: #000; margin: 20px auto; }
.menu-col h4 { text-transform: uppercase; font-size: 0.85rem; letter-spacing: 2px; margin-bottom: 20px; }
.menu-col a { text-decoration: none; color: #333; font-size: 0.85rem; line-height: 1.5; }

/* 6. CONFIGURACIÓN DE SECCIONES (PC) */
section {
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-top: 83px !important;
}

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

.avenir-light { font-family: 'Mulish', sans-serif; font-weight: 200; }
.avenir-regular { font-family: 'Mulish', sans-serif; font-weight: 400; }

/* SECCIÓN MUNDO (HERO) */
#section-hero {
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    padding-top: 0 !important; /* Eliminamos el padding superior para ganar altura */
}

.hero-container {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
}

.content-left {
    flex: 1.2; /* Aumentamos ligeramente el espacio para que quepan las palabras */
    padding-left: 10% !important;
    z-index: 10;
    color: white;
    text-align: left;
}

.content-left h1 {
    font-family: 'Mulish', 'Avenir Next Light', sans-serif !important;
    font-size: 4.8rem;
    font-weight: 200;
    line-height: 1.05;
    letter-spacing: -1px;
    color: #ffffff !important; /* Blanco absoluto */
    text-transform: none;
    opacity: 1 !important;    /* Sin transparencias */
    white-space: nowrap !important;
    display: block !important;
    width: 100% !important;
    max-width: 800px !important;
    /* TRUCO DE NITIDEZ: */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 0 0 1px rgba(255,255,255,0.2); /* Crea un aura de brillo blanco */
    margin-bottom: 25px;
}

.content-left p {
    color: #ffffff !important; /* También blanco puro */
    opacity: 1 !important;
    
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    font-family: 'Mulish', 'Avenir Next Regular', sans-serif;
    font-size: 1.1rem;
    max-width: 450px;
    line-height: 1.6;
}

.earth-bg {
    flex: 1.8;
    position: relative;
    display: flex;
    justify-content: center; /* Lo centramos en su propia columna */
    align-items: center;
    height: 100%;
}

.earth-stack {
    position: relative;
    display: inline-block; /* ESTO ES LA CLAVE: Se ajusta al tamaño de la imagen */
    height: 85vh; /* Altura de la Tierra */
}

.earth-bg img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* VITAL: Esto garantiza que el círculo se vea entero */
    object-position: center;
    filter: none !important;
}

.earth-img {
    height: 75vh !important; 
    width: auto;
    object-fit: contain;
    margin-top: 30px;
    filter: contrast(1.2) brightness(1.2) saturate(1.4);
    will-change: transform, opacity;

    /* --- SOLUCIÓN AL PARPADEO --- */
    opacity: 0;
    visibility: hidden; /* El navegador lo mantiene invisible antes de que cargue el script */
}

.earth-container-inner {
    position: relative;
    display: inline-block;
    height: 85vh; /* Misma altura que la imagen */
}

/* EL MAPA DE ILLUSTRATOR CON BRILLO ENCIMA DE LA TIERRA */
.map-image-final {
    /* Ajuste para que quepa todo el mapa de punta a punta */
    max-height: 65vh !important; 
    width: auto !important;
    object-fit: contain !important;
    
    /* Lo alejamos del encabezado para que no parezca que subió */
    margin-top: 70px; 
    
    filter: none !important;
}

/* SECCIÓN STATS (CREMA) */
#section-stats {
    background-image: url('../assets/img/crema-spread.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); width: 90%; margin: 0 auto; text-align: center; }
.stat-item .number { font-size: 5.5rem; font-weight: 200; }

/* SECCIÓN MAPA */
#section-map {
    height: 100vh !important;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 83px !important; /* Espacio para el header */
}

.map-wrapper {
    display: flex;
    width: 95%;
    max-width: 1400px;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* El lado del Mapa */
#section-map .columna-foto-mapa {
    flex: 1.7; /* El mapa es más ancho */
    display: flex;
    justify-content: center;
    align-items: center;
}

#section-map .map-image-final {
    max-height: 65vh !important; /* Para que quepa Cobija y Tarija */
    width: auto !important;
    object-fit: contain;
    margin-top: 20px;
}

/* El lado del Texto */
#section-map .columna-texto-mapa {
    flex: 1;
    max-width: 450px;
    align-self: flex-start; /* Subimos el texto al inicio */
    margin-top: 50px;       /* Ajuste de altura para que respire */
    text-align: left;
}

#bolivia-map { width: 100%; max-width: 650px; height: auto; }

/* --- TIPOGRAFÍA SECCIÓN MAPA (VISITADORAS) --- */
.map-content {
    flex: 1;
    max-width: 450px;
    /* Alineamos el bloque al inicio de la sección para que suba */
    align-self: flex-start; 
    /* Ajuste de altura: lo subimos para que empiece antes que el centro del mapa */
    margin-top: 80px; 
    padding-left: 30px;
    text-align: left;
}

.map-content .label {
    font-family: 'Mulish', 'Avenir Next Regular', sans-serif !important;
    font-size: 0.7rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 8px;
    display: block;
}

.map-content h2 {
    /* ESTILO LIGHT: Fino y elegante */
    font-family: 'Mulish', 'Avenir Next Light', sans-serif;
    font-weight: 200 !important; 
    font-size: 2rem;      /* Tamaño imponente */
    line-height: 1.1;
    letter-spacing: 2px;    /* Espaciado elegante para mayúsculas */
    text-transform: uppercase;
    color: #1a1a1a;
    margin: 0;
}

/* El énfasis en "VISITADORAS MÉDICAS" también debe ser ligero */
.map-content h2 strong {
    font-weight: 200 !important; /* Mismo grosor fino */
    display: block;
    margin-top: 2px;
}

/* Línea divisoria de 1px */
.map-content .short-line {
    width: 50px;
    height: 1px;
    background: #000;
    margin: 25px 0; /* Más espacio como en la imagen */
}

/* Párrafo descriptivo */
.map-content p {
    font-family: 'Mulish', 'Avenir Next Regular', sans-serif !important;
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
    max-width: 300px;
}

.short-line {
    width: 60px;
    height: 1px;           /* Línea fina de 1px acorde al logo */
    background: #000;
    margin: 25px 0;
}

/* SECCIÓN MODELO Y SPLITS (PC) */
.beauty-container, .split-img {
    flex: 1.2;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background: #000;
}

.beauty-container img, .split-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    position: absolute;
    top: 0 !important;
    left: 0;
    will-change: transform;
}

.beauty-container img { object-position: center 15% !important; }


/* SECCIÓN BELLEZA (PAREJA) PC */
#nueva-era-hero {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: 0 !important;
}

#nueva-era-hero .era-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#nueva-era-hero .era-bg img {
    height: 105% !important;
    object-position: center 20% !important;
}

/* --- FARMACIAS Y MÉDICOS: IMÁGENES COMPLETAS Y SIN RECORTE --- */
/* ============================================================
   ESTILO HTDERM: DIVISIÓN 50/50 Y FONDO NEGRO
   ============================================================ */

.white-line {
    background-color: #ffffff !important;
    height: 1px;
    width: 50px;
    margin: 20px 0;
}

.white-line {
    background-color: #ffffff !important;
    height: 1px;
    width: 50px;
    margin: 25px 0;
}

/* ============================================================
   RECONSTRUCCIÓN DESDE CERO: SECCIONES FARMACIA Y MÉDICOS
   ============================================================ */

/* 1. La base de la sección (100% de pantalla, cero huecos) */
.seccion-dual {
    height: 100vh !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: #000; /* Fondo negro base */
    overflow: hidden;
}

.contenedor-dual {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
}

/* Inversión para Médicos */
.contenedor-dual.reverse {
    flex-direction: row-reverse !important;
}

/* 2. Columna de Texto (50% exacto) */
.columna-info {
    flex: 0 0 50% !important; /* Mide la mitad y no se mueve */
    background-color: #000000 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-wrapper {
    max-width: 450px;
    padding: 0 40px;
    color: #ffffff;
}

.info-wrapper h2 {
    /* FORZAMOS BLANCO PURO PARA EL TÍTULO */
    color: #ffffff !important; 
    font-family: 'Mulish', 'Avenir Next Light', sans-serif !important;
    font-weight: 200 !important;
    font-size: 2.5rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
}

.info-wrapper h2, 
.info-wrapper p {
    color: #ffffff !important; /* Blanco absoluto */
    opacity: 1 !important;    /* Cero transparencia */
    
    /* ESTAS 2 LÍNEAS SON LA CLAVE: */
    -webkit-font-smoothing: antialiased; /* Suavizado para Chrome/Safari */
    -moz-osx-font-smoothing: grayscale;  /* Suavizado para Firefox */
    
    /* Un toque de sombra blanca muy sutil ayuda a que brille más */
    text-shadow: 0 0 1px rgba(255,255,255,0.1); 
}

.info-wrapper p {
    /* FORZAMOS BLANCO PURO PARA EL DESCRIPTIVO */
    color: #ffffff !important; 
    font-family: 'Mulish', 'Avenir Next Regular', sans-serif !important;
    font-weight: 400 !important;
    font-size: 1rem;
    line-height: 1.7;
    opacity: 1 !important; /* Quitamos cualquier transparencia que lo haga ver gris */
}

/* Estilos de texto solicitados */
.etiqueta {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #888 !important;
    display: block;
    margin-bottom: 15px;
}

.seccion-dual h2 {
    font-family: 'Mulish', 'Avenir Next Light', sans-serif !important;
    font-weight: 200 !important;
    font-size: 2.5rem;
    line-height: 1.1;
    color: #fff !important;
    text-transform: uppercase;
}

.linea-blanca {
    background: #ffffff !important;
    height: 1px;
    width: 50px;
    margin: 30px 0;
}

.seccion-dual p {
    font-family: 'Mulish', 'Avenir Next Regular', sans-serif !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.7) !important;
    line-height: 1.7;
}

/* 3. Columna de Imagen (50% exacto) */
.columna-foto {
    flex: 0 0 50% !important; /* Mide la mitad y no se mueve */
    height: 100%;
    background-color: #fff; /* Fondo blanco de seguridad */
    overflow: hidden;
}

.columna-foto img {
    width: 100% !important;
    height: 100% !important;
    /* 'cover' asegura que tu foto de 1000x1500 llene el espacio sin huecos */
    object-fit: cover !important; 
    object-position: center;
}

/* ============================================================
   SOLUCIÓN FILA ÚNICA - CASAPIEL (CLONES HTDERM)
   ============================================================ */
/* ============================================================
   SOLUCIÓN FINAL: FOOTER HTDERM - GRID 3 COLUMNAS
   ============================================================ */

#footer-htderm-style {
    background-color: #ffffff !important;
    padding: 30px 4% 20px !important;
    border-top: 1px solid #eee;
    width: 100% !important;
}

.footer-grid-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important; /* 3 COLUMNAS IDÉNTICAS */
    align-items: center;
    max-width: 1500px;
    margin: 0 auto;
    height: 60px;
}

/* Alineaciones base */
.f-grid-col {
    display: flex;
    align-items: center;
    font-family: 'Mulish', sans-serif !important;
    font-size: 10px !important;
    color: #666;
    white-space: nowrap;
}

.f-left { justify-content: flex-start; gap: 10px; }
.f-center { justify-content: center; }
.f-right { justify-content: flex-end; }

/* Iconos */
.f-grid-col i {
    font-size: 0.75rem;
    color: #000;
    opacity: 0.4;
}

/* Logo tamaño fijo */
.f-logo-img {
    height: 38px !important;
    width: auto !important;
    display: block;
}

/* Estructura derecha (Contacto + Redes) */
.f-contact-and-social {
    display: flex;
    align-items: center;
    gap: 12px;
}

.f-contact-and-social a { text-decoration: none; color: inherit; }
.f-divider { color: #eee; margin: 0 5px; }

/* Redes Sociales al final */
.f-social-group {
    display: flex;
    gap: 15px;
    margin-left: 15px;
    padding-left: 15px;
    border-left: 1px solid #eee;
}

.f-social-group a { color: #000; opacity: 0.5; transition: 0.3s; font-size: 0.9rem; }
.f-social-group a:hover { opacity: 1; }

/* Copyright Final */
.footer-copyright-bottom {
    margin-top: 40px;
    text-align: center;
}

.f-line-separator {
    height: 1px;
    background-color: #f5f5f5;
    width: 100%;
    margin-bottom: 20px;
}

.footer-copyright-bottom p {
    font-size: 8px !important;
    color: #bbb;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Evitar subrayados en links */
#footer-htderm-style a { border: none !important; text-decoration: none !important; }

/* Ajuste móvil rápido */
@media (max-width: 1024px) {
    .footer-grid-row { grid-template-columns: 1fr !important; height: auto; gap: 20px; }
    .f-grid-col { justify-content: center; }
}

/* ============================================================
   SOLUCIÓN MAESTRA RESPONSIVE MÓVIL (CASAPIEL BOLIVIA)
   ============================================================ */
@media (max-width: 768px) {

    /* --- 1. HEADER MÓVIL PERFECTO --- */
    #main-header {
        height: 65px !important;
    }
    .header-container {
        width: 92% !important;
    }
    /* En celular ocultamos "COMPRAR PRODUCTOS" para que el logo quede 100% centrado */
    .shop-dropdown {
        display: none !important;
    }
    .nav-left {
        flex: 1 !important;
        justify-content: flex-start !important;
    }
    .nav-center {
        flex: 3 !important;
        display: flex !important;
        justify-content: center !important;
    }
    .nav-right {
        flex: 1 !important;
        justify-content: flex-end !important;
        gap: 8px !important;
    }
    .main-logo {
        height: 32px !important;
    }

    /* --- 2. RESET GENERAL DE SECCIONES EN MÓVIL --- */
    /* Dejamos que las secciones crezcan de forma natural si el contenido lo necesita */
    section {
        height: auto !important;
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        padding-top: 85px !important;
        padding-bottom: 40px !important;
        overflow: visible !important;
    }

    /* --- 3. SECCIÓN 1: HERO / MUNDO 3D (CAPTURA 1) --- */
    #section-hero {
        padding-top: 85px !important;
        padding-bottom: 20px !important;
        justify-content: center !important;
    }
    #section-hero .hero-container {
        flex-direction: column !important;
        text-align: center !important;
        height: auto !important;
    }
    #section-hero .content-left {
        width: 100% !important;
        padding: 0 20px !important;
        margin-bottom: 10px !important;
    }
    #section-hero .content-left h1 {
        font-size: 2.1rem !important;
        white-space: normal !important; /* Salto de línea activado */
        line-height: 1.15 !important;
        margin-bottom: 12px !important;
        text-align: center !important;
    }
    #section-hero .content-left p {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
        max-width: 95% !important;
        margin: 0 auto 15px !important;
        text-align: center !important;
    }
    #section-hero .earth-bg {
        width: 100% !important;
        height: 36vh !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important;
    }
    #section-hero .earth-img {
        height: 100% !important;
        max-height: 36vh !important;
        width: auto !important;
        margin-top: 0 !important;
        object-fit: contain !important;
    }

    /* --- 4. SECCIÓN STATS (NÚMEROS EN COLUMNA) --- */
    #section-stats {
        padding: 60px 0 !important;
    }
    #section-stats .stats-grid {
        flex-direction: column !important;
        display: flex !important;
        gap: 35px !important;
    }
    #section-stats .stat-item .number {
        font-size: 3.2rem !important;
    }

    /* --- 5. SECCIÓN MAPA DE BOLIVIA (CAPTURA 2) --- */
    #section-map {
        padding-top: 85px !important;
        padding-bottom: 40px !important;
    }
    #section-map .map-wrapper {
        flex-direction: column !important;
        text-align: center !important;
        gap: 20px !important;
        width: 100% !important;
    }
    #section-map .columna-foto-mapa {
        width: 100% !important;
        max-height: 36vh !important;
        flex: none !important;
        display: flex !important;
        justify-content: center !important;
    }
    #section-map .map-image-final {
        max-height: 34vh !important;
        width: auto !important;
        max-width: 90% !important;
        margin-top: 0 !important;
        object-fit: contain !important;
    }
    #section-map .columna-texto-mapa,
    #section-map .map-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 25px !important;
        margin-top: 15px !important;
        text-align: center !important;
        align-self: center !important;
    }
    #section-map .map-content h2 {
        font-size: 1.6rem !important;
    }
    #section-map .map-content p {
        margin: 0 auto !important;
        max-width: 100% !important;
    }
    #section-map .short-line {
        margin: 15px auto !important; /* Centrar la línea */
    }

    /* --- 6. SECCIONES 50/50: FARMACIAS Y MÉDICOS (CAPTURAS 4, 5 Y 6) --- */
    /* Pasamos de lado-a-lado a UNO ENCIMA DE OTRO (Columna) */
    .seccion-dual {
        height: auto !important;
        min-height: auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .contenedor-dual, 
    .contenedor-dual.reverse {
        flex-direction: column !important; /* PONE LA FOTO Y EL TEXTO EN VERTICAL */
        height: auto !important;
        width: 100% !important;
    }

    /* La Foto: Ocupa todo el ancho arriba */
    .columna-foto {
        width: 100% !important;
        height: 38vh !important; /* Altura perfecta para celular */
        flex: none !important;
    }
    .columna-foto img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* El Texto: Ocupa todo el ancho abajo */
    .columna-info {
        width: 100% !important;
        flex: none !important;
        padding: 45px 25px !important; /* Espacio para que respire */
        text-align: center !important;
    }
    .info-wrapper {
        max-width: 100% !important;
        padding: 0 !important;
    }
    .info-wrapper h2, 
    .seccion-dual h2 {
        font-size: 1.8rem !important; /* Bajamos el tamaño gigante */
        line-height: 1.2 !important;
        letter-spacing: 2px !important;
        margin-bottom: 15px !important;
    }
    .info-wrapper p, 
    .seccion-dual p {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }
    .linea-blanca {
        margin: 20px auto !important; /* Centramos la línea blanca */
    }

    /* --- 7. FOOTER MÓVIL LIMPIO --- */
    #footer-htderm-style {
        padding: 35px 20px 25px !important;
    }
    .footer-grid-row {
        display: flex !important;
        flex-direction: column !important; /* Lo convertimos en columna vertical */
        align-items: center !important;
        height: auto !important;
        gap: 16px !important;              /* Separación equilibrada entre elementos */
        text-align: center !important;
    }
    /* 1. EL LOGO VA PRIMERO (ARRIBA) */
    .f-center {
        order: 1 !important;
        justify-content: center !important;
        margin-bottom: 2px !important;
    }
    .f-logo-img {
        height: 36px !important;
    }

    /* 2. LA DIRECCIÓN PASA DEBAJO DEL LOGO */
    .f-left {
        order: 2 !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
        color: #777 !important;
    }

    /* 3. CONTACTO Y REDES SOCIALES AL FINAL */
    .f-right {
        order: 3 !important;
        justify-content: center !important;
        white-space: normal !important;
    }
    .f-contact-and-social {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    .f-social-group {
        border-left: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        justify-content: center !important;
    }
}

    /* =========================================================
       SECCIÓN MODELO (ROSTRO COMPLETO EN CELULAR)
       ========================================================= */
    #section-beauty {
        height: 75vh !important;       /* Le devolvemos la altura */
        min-height: 75vh !important;
        width: 100% !important;
        padding: 0 !important;
        position: relative !important;
        overflow: hidden !important;
        display: block !important;
    }

    #section-beauty .beauty-container {
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
        flex: none !important;
    }

    #section-beauty .beauty-container img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        /* VITAL: Mantiene los ojos y el rostro de la modelo perfectamente encuadrados */
        object-position: center 15% !important; 
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }

    /* SI TIENES LA SECCIÓN DE NUEVA ERA (PAREJA): */
    #nueva-era-hero {
        height: 75vh !important;
        min-height: 75vh !important;
        position: relative !important;
        padding: 0 20px 40px !important;
        justify-content: flex-end !important;
    }

    #nueva-era-hero .era-bg {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
    }

    #nueva-era-hero .era-bg img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center 20% !important;
    }