/* =========================================
   ESTILOS FARMACIA ALDEA BLANCA (VERSIÓN 6.0)
========================================= */

:root {
    --verde-oscuro: #0e3d36;
    --verde-boton: #165b50;
    --dorado: #c5a059;
    --texto-oscuro: #333333;
    --fondo-claro: #fcfbf9;
    --marron-flojito: #f6f2e9; 
    --banner-bg: #e2dcd0; 
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Montserrat', sans-serif; color: var(--texto-oscuro); background-color: var(--fondo-claro); overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.topbar { background-color: var(--verde-oscuro); color: white; font-size: 0.85rem; display: flex; justify-content: space-between; padding: 8px 5%; }
.header { display: flex; justify-content: space-between; align-items: center; padding: 20px 5%; background-color: white; }
.logo-container h1 { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: var(--texto-oscuro); letter-spacing: 2px; }
.logo-container p { font-size: 0.7rem; letter-spacing: 3px; color: #666; text-transform: uppercase; }
.header-icons { display: flex; gap: 20px; font-weight: 500; }

.navbar { background-color: white; border-bottom: 1px solid #eee; padding: 15px 5%; }
.nav-links { display: flex; justify-content: center; gap: 30px; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; flex-wrap: wrap; }
.nav-links a:hover { color: var(--dorado); }
.nav-links .activo { border-bottom: 2px solid var(--dorado); padding-bottom: 5px;}

/* --- SECCIÓN HERO (PC) --- */
.hero {
    background-color: var(--marron-flojito);
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 5%;
    gap: 40px;
    position: relative;
}

.hero-content { flex: 1; max-width: 550px; position: relative; z-index: 2; }
.hero-content .subtitle { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; color: #666; margin-bottom: 15px; display: block; }
.hero-content h2 { font-family: 'Playfair Display', serif; font-size: 3.5rem; line-height: 1.1; color: var(--verde-oscuro); margin-bottom: 20px; }
.hero-content p { font-size: 1.1rem; line-height: 1.6; color: #444; margin-bottom: 30px; }

.btn-ofertas { display: inline-block; background-color: var(--verde-boton); color: white; padding: 15px 30px; border-radius: 30px; font-weight: 600; transition: background 0.3s; }
.btn-ofertas:hover { background-color: var(--verde-oscuro); }

.trust-badges { display: flex; gap: 20px; margin-top: 30px; font-size: 0.8rem; color: #555; border-top: 1px solid #ddd; padding-top: 20px; }

.hero-image-container { flex: 1; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; }
.hero-image-container img { 
    max-width: 100%; 
    height: auto; 
    max-height: 550px; 
    object-fit: contain; 
    mix-blend-mode: multiply; 
    clip-path: inset(2.5% round 10px); 
}

/* --- BUSCADOR FLOTANTE --- */
.buscador-container { max-width: 850px; margin: -35px auto 40px auto; background: white; padding: 8px 10px 8px 25px; border-radius: 50px; box-shadow: 0 10px 25px rgba(0,0,0,0.06); position: relative; z-index: 10; }
.buscador-form { display: flex; align-items: center; }
.buscador-form input { flex: 1; border: none; padding: 12px 0; font-size: 1.1rem; outline: none; background: transparent; color: #666; }
.btn-buscar { background-color: var(--verde-oscuro); color: white; border: none; padding: 15px 45px; border-radius: 50px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: 0.3s; }
.btn-buscar:hover { background-color: var(--verde-boton); }

/* --- SECCIÓN CATEGORÍAS (FOTO DE FONDO LIMPIA + ETIQUETA) --- */
.categorias-section { padding: 20px 5% 40px 5%; text-align: center; }
.titulo-seccion { color: #999; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 3px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 15px; }
.titulo-seccion::before, .titulo-seccion::after { content: ""; height: 1px; width: 40px; background-color: var(--dorado); }
.subtitulo-seccion { font-family: 'Playfair Display', serif; font-size: 2.8rem; color: var(--texto-oscuro); margin-bottom: 40px; }

.grid-categorias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1100px; margin: 0 auto; }
.cat-card { 
    height: 240px; 
    background-color: var(--banner-bg);
    background-size: cover; 
    background-position: center; 
    border-radius: 12px; 
    position: relative; 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    transition: transform 0.3s, box-shadow 0.3s; 
}
.cat-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.15); }

.cat-label { background: white; width: 100%; padding: 15px 25px; display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: var(--texto-oscuro); font-size: 1.1rem; position: absolute; bottom: 0; z-index: 2; border-top: 1px solid #eee; }

/* --- BANNER DERMOCOSMÉTICA --- */
.banner-piel { background-color: var(--banner-bg); max-width: 1100px; margin: 60px auto; border-radius: 15px; display: flex; justify-content: space-between; align-items: center; padding: 50px 60px; position: relative; overflow: hidden; }
.banner-piel-content { max-width: 500px; z-index: 2; }
.banner-piel-content .subtitle { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; color: #666; margin-bottom: 15px; display: block; }
.banner-piel-content h2 { font-family: 'Playfair Display', serif; font-size: 2.8rem; line-height: 1.1; color: var(--verde-oscuro); margin-bottom: 30px; }
.btn-ofertas-light { display: inline-block; background-color: transparent; color: var(--texto-oscuro); border: 1px solid var(--texto-oscuro); padding: 12px 25px; border-radius: 30px; font-weight: 600; transition: 0.3s; }
.btn-ofertas-light:hover { background-color: var(--texto-oscuro); color: white; }
.banner-piel-img { width: 400px; height: 250px; background-color: #d8d3c7; background-size: cover; background-position: center; border-radius: 10px; }

/* --- CARACTERÍSTICAS FOOTER --- */
.features-footer { max-width: 1100px; margin: 0 auto 50px auto; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 30px 20px; }
.feature-box { display: flex; align-items: center; gap: 15px; }
.feature-icon { font-size: 2rem; color: var(--dorado); }
.feature-text strong { display: block; font-size: 0.95rem; color: var(--texto-oscuro); margin-bottom: 3px; }
.feature-text span { font-size: 0.8rem; color: #777; }

/* --- FOOTER OSCURO --- */
.main-footer { background-color: var(--verde-oscuro); padding: 40px 5%; display: flex; justify-content: space-between; align-items: center; }
.footer-firma { font-family: 'Dancing Script', cursive; font-size: 2.5rem; color: white; }
.footer-logo { text-align: right; color: white; }
.footer-logo h3 { font-size: 1.2rem; letter-spacing: 3px; margin-bottom: 5px; font-family: 'Playfair Display', serif; }
.footer-logo p { font-size: 0.7rem; letter-spacing: 3px; color: #aaa; }

/* =========================================
   ADAPTACIÓN MÓVIL (CORTE DE LÍNEA ESTRICTO)
========================================= */
@media (max-width: 768px) {
    .topbar { flex-direction: column; text-align: center; gap: 4px; font-size: 0.75rem; }
    .header { flex-direction: column; gap: 12px; text-align: center; }
    .header-icons { justify-content: center; width: 100%; font-size: 0.9rem; }
    .nav-links { display: none; }
    
    .hero {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 40px 5%;
        min-height: 440px;
        position: relative;
        overflow: hidden; 
    }
    
    /* EL MURO INVISIBLE: Ocupa el 50% y no puede pasar de ahí, obliga a bajar línea */
    .hero-content { 
        width: 50%; 
        max-width: 50%;
        flex: none; 
        text-align: left; 
        z-index: 2; 
    }
    
    .hero-content h2 { font-size: 2.2rem; margin-bottom: 15px; line-height: 1.1; }
    .hero-content p { font-size: 0.85rem; margin-bottom: 20px; line-height: 1.4; word-wrap: break-word; }
    .btn-ofertas { padding: 10px 15px; font-size: 0.8rem; }
    .trust-badges { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 0.65rem; border-top: none; padding-top: 10px;}
    
    .hero-image-container { 
        position: absolute; 
        right: 0; 
        top: 0; 
        width: 60%; 
        height: 100%; 
        z-index: 1; 
        display: flex;
        align-items: center;
        justify-content: flex-end; 
    }
    
    .hero-image-container img { 
        width: 100%; 
        height: 90%; 
        object-fit: contain; 
        object-position: right center; 
        mix-blend-mode: multiply;
        clip-path: none;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 40%);
        mask-image: linear-gradient(to right, transparent 0%, black 40%);
    }

    .buscador-container { margin: -20px 15px 40px 15px; border-radius: 20px; padding: 10px; }
    .buscador-form { flex-direction: column; gap: 10px; }
    .buscador-form input { text-align: center; width: 100%; padding: 10px; font-size: 1rem; }
    .btn-buscar { width: 100%; }
    
    .grid-categorias { grid-template-columns: repeat(2, 1fr); }
    .subtitulo-seccion { font-size: 2.2rem; }
    
    .banner-piel { flex-direction: column; padding: 30px; text-align: center; }
    .banner-piel-img { margin-top: 30px; width: 100%; height: 200px; }
    
    .features-footer { flex-direction: column; gap: 25px; align-items: flex-start; padding: 30px; }
    .feature-box { width: 100%; justify-content: flex-start; }
    
    .main-footer { flex-direction: column; gap: 20px; text-align: center; }
    .footer-logo { text-align: center; }
}
@media (max-width: 480px) {
    .grid-categorias { grid-template-columns: 1fr; }
}