/*
Theme Name: Ama Zona Horses Shop
Author: Sara Gonzalez
Version: 1.0
*/

/* --- 1. CONFIGURACIÓN GLOBAL (Márgenes y fuentes base) --- */
* { box-sizing: border-box; }
html { margin-top: 0 !important; }

body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #EBEBEB;
    color: #333;
}

.contenedor {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- 2. HEADER / CABECERA (El menú y el logo superior) --- */
.sitio-header {
    position: absolute;   
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: transparent !important; 
    padding: 40px 0;
    border: none !important;
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    max-width: 160px; 
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.logo img:hover { transform: scale(1.02); }

.menu-horizontal {
    display: flex;
    list-style: none;
    gap: 15px;
    margin: 0;
    padding: 0;
}

.menu-horizontal li a {
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

/* Color del menú en la Home (Blanco) y en el resto (Gris) */
.home .menu-horizontal li a { color: #e6e5e6; }
body:not(.home) .menu-horizontal li a { color: #3d3d3d; }

/* Efecto rosa al pasar el ratón por el menú */
.menu-horizontal li a:hover {
    background-color: #f0d8db;
    color: #333333 !important;
}

/* --- 3. SECCIÓN HERO (INICIO) (Imagen principal de portada) --- */
.hero-inicio {
    position: relative;
    z-index: 10;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    min-height: 100vh; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* AJUSTE CLAVE PARA QUE LA CHICA PISE EL FOOTER */
    overflow: visible !important; 
}

.hero-texto h1 {
    color: #ffffff;
    font-size: 80px;
    font-weight: bold;
    text-shadow: 3px 6px 15px rgba(0,0,0,0.8);
    margin: 0;
    letter-spacing: 2px;
}

/* --- 4. FOOTER / PIE DE PÁGINA --- */
.sitio-footer {
    background-color: #7995c0;
    color: #ffffff;
    padding: 25px 0;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    position: relative;
    /* AJUSTE: Bajamos el z-index para que la chica pase por encima */
    z-index: 5; 
    border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.menu-legal { display: flex; justify-content: center; gap: 15px; }

.sitio-footer .menu-legal a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 12px;
    opacity: 0.8;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.sitio-footer .menu-legal a:hover {
    opacity: 1;
    border-bottom: 1px solid #ffffff;
}

/* --- 5. SOBRE NOSOTROS (Contenido con texto truncado) --- */
.contenedor-principal-nosotros {
    background-color: #EBEBEB;
    padding: 180px 0 0 0 !important; 
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.grid-nosotros {
    display: flex;
    align-items: flex-end; 
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 10;
    margin-left: 17%; 
    width: 87%;       
}


.imagen-nosotros { line-height: 0; display: flex; }
.imagen-nosotros img {
    max-width: 80%; 
    height: auto;
    display: block; 
    filter: drop-shadow(0 -10px 20px rgba(0,0,0,0.05));
}

.contenido-nosotros {
    flex: 1;
    padding-bottom: 220px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.titulo-nosotros {
    font-size: 4rem;
    font-weight: 300;
    color: #333;
    margin-bottom: 25px;
}

/* ESTILO PARA CORTAR EL TEXTO CON PUNTOS SUSPENSIVOS */
.lista-nosotros {
    list-style: none !important; 
    padding: 0;
    margin: 0 auto 20px auto;
    text-align: left; 
    max-width: 650px;
    display: -webkit-box;
    -webkit-line-clamp: 4; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lista-nosotros li {
    position: relative;
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 10px;
    color: #333;
    padding-left: 25px; 
}

/* Puntos de la lista en color rosa */
.lista-nosotros li::before {
    content: "•";
    color: #f0d8db; 
    font-size: 1.8rem;
    position: absolute;
    left: 0;
    top: -4px;
}

/* MANCHAS DE FONDO */
.forma-organica {
    position: absolute;
    width: 380px;
    z-index: 0;
    opacity: 0.45;
    pointer-events: none;
    transition: 0.6s ease;
}
.mancha-1 { top: -40px; left: -100px; transform: rotate(-10deg); }
.mancha-2 { bottom: 0; right: -80px; }

.contenedor-principal-nosotros:hover .forma-organica {
    opacity: 0.6;
    transform: scale(1.1);
}

.btn-leer-mas {
    cursor: pointer;
    background: transparent;
    padding: 10px 45px;
    border: 2px solid #333;
    border-radius: 12px;
    font-weight: bold;
    margin: 20px 0;
    transition: 0.3s;
}

.btn-leer-mas:hover {
    background: #333;
    color: #fff !important;
}

.sede-info { font-weight: bold; margin-top: 10px; }

/* --- 6. MODAL (POP-UP) - Lo que sale al pulsar "Leer más" --- */
.modal-overlay {
    display: none; 
    position: fixed;
    z-index: 9999; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); 
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.modal-content {
    /* Fondo con imagen y degradado blanco para leer bien el texto */
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.9)), 
                url('img/fondo_principal.png'); 
    background-size: cover;
    background-position: center;
    padding: 50px;
    border-radius: 20px;
    width: 90%;
    max-width: 700px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    animation: zoomIn 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(255,255,255,0.3);
}

.modal-content .lista-nosotros {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    max-width: 100%;
}

.modal-content .lista-nosotros li {
    color: #222;
    font-weight: 500;
}

@keyframes zoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.btn-cerrar {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 30px;
    color: #333;
    opacity: 0.6;
    cursor: pointer;
    transition: 0.3s;
}

.btn-cerrar:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.titulo-modal { 
    text-align: center; 
    margin-bottom: 30px; 
    font-size: 2.8rem; 
    font-weight: 300;
    color: #333;
}

.modal-scroll { 
    max-height: 60vh; 
    overflow-y: auto; 
    padding-right: 20px; 
}

/* Estilo de la barra de scroll del modal */
.modal-scroll::-webkit-scrollbar {
    width: 6px;
}
.modal-scroll::-webkit-scrollbar-thumb {
    background: #7995c0;
    border-radius: 10px;
}

/* --- 7. RESPONSIVE / ADAPTACIÓN A MÓVILES --- */
.menu-toggle { 
    display: none; 
    flex-direction: column; 
    justify-content: space-between; 
    width: 30px; 
    height: 21px; 
    background: transparent; 
    border: none; 
    cursor: pointer; 
    z-index: 1001; 
}
.menu-toggle .bar { width: 100%; height: 3px; background-color: #333; border-radius: 10px; }

@media (max-width: 992px) {
    .grid-nosotros { flex-direction: column; align-items: center; text-align: center; margin-left: 0 !important; width: 100% !important; }
    .contenido-nosotros { padding-bottom: 50px !important; width: 100% !important; }
    .imagen-nosotros img { max-width: 70%; margin: 0 auto; }
}

@media (max-width: 768px) {
    /* Ajustes Cabecera móvil - LOGO REFINADO */
    .sitio-header { 
        padding: 10px 0 !important; /* Menos espacio vertical para que no ocupe media pantalla */
    } 
    .logo img { 
        max-width: 110px !important; /* Tamaño más delicado para el logo nuevo */
        height: auto !important;
    }
    .menu-toggle { display: flex; }
    .menu-horizontal { display: none; }

    /* Ajustes Portada móvil (Sin chica) */
    .imagen-chica-wrap { 
        display: none !important; 
    }
    .hero-inicio { 
        min-height: 60vh !important; 
        padding-top: 120px !important; 
        justify-content: center !important; 
    }
    .hero-inicio h1 { 
        font-size: 2.2rem !important; 
        letter-spacing: 2px !important;
    }

    /* Ajustes Sobre Nosotros móvil (Centrado) */
    .contenedor-principal-nosotros { padding-top: 155px !important; }
    
    .grid-nosotros { 
        margin-left: 0 !important; 
        width: 100% !important; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .contenido-nosotros { 
        width: 100% !important;
        align-items: center !important; 
        text-align: center !important;
        padding-bottom: 40px !important; 
    }

    .titulo-nosotros { font-size: 2.2rem; text-align: center !important; }

    .lista-nosotros { 
        text-align: left !important; 
        margin: 0 auto !important; 
        padding-left: 25px !important;
        max-width: 90%; 
    }

    .btn-leer-mas { margin: 20px auto !important; display: block; }

    .modal-content { width: 95%; padding: 25px; }
    .menu-legal { flex-direction: column; align-items: center; gap: 10px; }
	.sitio-footer, .sitio-footer p, .footer-contenido { 
        text-align: center !important; 
        align-items: center !important; 
    }
}

/* --- 8. PÁGINA DE CONTACTO --- */
.seccion-contacto-directo {
    position: relative; 
    background-color: #EBEBEB;
    padding: 110px 0 0 0 !important; 
    overflow: hidden;
    min-height: 65vh; 
    display: flex;
}

.contenedor-fluido-contacto {
    width: 100%;
    display: flex;
    z-index: 5; 
}

.grid-contacto {
    display: flex;
    width: 100%;
    align-items: flex-start; 
    position: relative;
}

.imagen-contacto-pegada {
    flex: 0 0 45%;
    line-height: 0;
    align-self: flex-end; 
}

.imagen-contacto-pegada img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: -2px; 
}

.contenido-contacto {
    flex: 1;
    padding: 40px 60px 40px 40px; 
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center; 
}

/* Manchas en contacto */
.seccion-contacto-directo .forma-organica {
    position: absolute;
    width: 500px; 
    z-index: 1; 
    opacity: 0.35; 
    pointer-events: none;
    transition: 0.8s ease;
}

.seccion-contacto-directo .mancha-1 { 
    top: -80px; 
    left: -150px; 
    transform: rotate(-20deg);
}

.seccion-contacto-directo .mancha-2 { 
    bottom: -100px;
    right: -120px; 
    transform: rotate(20deg); 
}

.seccion-contacto-directo:hover .forma-organica {
    opacity: 0.5;
    transform: scale(1.1) rotate(10deg);
}

.lista-contacto-iconos {
    list-style: none !important;
    padding: 0 !important;
    margin: 40px 0 20px 0 !important; 
}

.lista-contacto-iconos li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 1.15rem;
    color: #333;
}

.lista-contacto-iconos li img {
    width: 25px; 
    height: auto;
    flex-shrink: 0;
}

.sede-info-contacto {
    font-weight: bold;
    color: #555;
    margin-top: 10px;
    margin-left: 0;
    text-align: left; 
    display: block;
}
/* --- 9. CONTACTO MÓVIL (CON SCROLL PARA VER IMAGEN) --- */
@media (max-width: 1024px) {
    html body .seccion-contacto-directo {
        display: block !important;
        /* Aumentamos el min-height para forzar el scroll */
        min-height: 110vh !important; 
        padding-top: 260px !important; 
        padding-bottom: 100px !important; /* Espacio extra al final para que la imagen respire */
        background-color: #EBEBEB !important;
    }

    html body .grid-contacto {
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important; 
        width: 100% !important;
    }

    html body .contenido-contacto {
        order: 1 !important;
        width: 100% !important;
        padding: 0 25px !important;
        text-align: center !important;
    }

    html body .contenido-contacto h2 {
        margin-top: 0 !important;
        margin-bottom: 20px !important;
        font-size: 1.9rem !important;
    }

    html body .lista-contacto-iconos {
        display: inline-block !important; 
        text-align: left !important; 
        margin: 15px auto !important;
    }

    /* IMAGEN DE CABALLOS - MÁS GRANDE Y VISIBLE */
    html body .imagen-contacto-pegada {
        order: 2 !important;
        display: block !important;
        width: 100% !important; 
        max-width: 400px !important; 
        height: 350px !important; /* Aumentamos altura para que se vea bien la ilustración */
        background-image: url('img/contacto_responsive.png') !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center bottom !important;
        margin: 30px auto 0 auto !important; 
    }

    html body .imagen-contacto-pegada img {
        display: none !important; 
    }
}
/* --- 10. SECCIÓN TIENDA (Banners de colores y filigrana) --- */
.seccion-tienda-final {
    position: relative; 
    background-color: #EBEBEB;
    padding: 110px 0 0 0 !important; 
    overflow: hidden;
    min-height: 65vh; 
    display: flex;
}

.filigrana-tienda {
    display: block !important;
    max-width: 250px !important; 
    margin: 0 auto 20px auto !important; 
    pointer-events: none;
    z-index: 10;
}

.seccion-tienda-final .grid-contacto {
    display: flex;
    align-items: flex-end; 
    width: 100%;
    position: relative;
    z-index: 5;
}

.contenido-contacto-tienda {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    padding-bottom: 0 !important;
}

.seccion-tienda-final .titulo-nosotros {
    font-size: 2.6rem !important;
    margin-top: 60px !important; 
    margin-left: 0 !important;   
    margin-bottom: 15px !important;
    text-align: center !important; 
    line-height: 1.1;
    color: #333;
    font-family: 'Montserrat', sans-serif;
    display: block !important;
    width: 100% !important;
}

.grid-tienda-botones {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 10px;
    align-items: flex-end;
}

.btn-tienda {
    position: relative;
    height: 500px; 
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    padding-top: 35px; 
    overflow: hidden;
    margin-bottom: -2px; 
    transition: all 0.3s ease;
}

.btn-tienda .txt-banner {
    color: #3d3d3d; 
    font-weight: 800; 
    font-size: 0.95rem; /* Bajamos de 1.05rem a 0.95rem para que quepa mejor */
    text-align: center;
    z-index: 10;
    line-height: 1.2; /* Damos un poco más de aire entre líneas */
    letter-spacing: 0.2px; 
    text-transform: uppercase; 
    pointer-events: none;
    transition: color 0.3s ease;
    padding: 0 5px; /* Reducimos el padding lateral para ganar espacio de texto */
    text-shadow: 0px 1px 1px rgba(255,255,255,0.3); 
    
    /* ESTO EVITA QUE SE CORTE */
    display: block !important;
    width: 100% !important;
    white-space: normal !important; /* Permite que el texto salte de línea si es necesario */
    overflow: visible !important; 
}

/* Colores de los banners de la tienda */
.color-souveniers { background-color: #7995c0; }
.color-caballos   { background-color: #bfac9d; }
.color-mascotas    { background-color: #f0d8db; }
.color-multimedia  { background-color: #81b68f; }

.btn-tienda .img-flotante {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    height: auto;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 5;
}

.img-musica { width: 70% !important; bottom: 65px !important; }
.img-libros { width: 95% !important; bottom: -10px !important; }

.btn-tienda:hover { filter: brightness(1.03); }
.btn-tienda:hover .txt-banner { color: #000; }
.btn-tienda:hover .img-flotante { transform: translateX(-50%) scale(1.08) translateY(-15px); }

.imagen-contacto-pegada {
    flex: 0 0 45%;
    line-height: 0;
    align-self: flex-end;
}

.imagen-contacto-pegada img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: -2px;
}

/* --- 11. TIENDA MÓVIL (MÁS GRANDE Y PROTECCIÓN DE FONDO) --- */
@media (max-width: 1024px) {
    .seccion-tienda-final {
        padding-top: 150px !important; 
        margin-top: 0 !important; 
        min-height: auto !important; 
        background: transparent !important; 
        display: block !important;
        width: 100% !important;
    }

    /* SEGURIDAD: NO BORRAR - Esto evita que se vea la imagen de fondo */
    .seccion-tienda-final .imagen-contacto-pegada { 
        display: none !important; 
        height: 0 !important;
        margin: 0 !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    .seccion-tienda-final .grid-contacto {
        flex-direction: column !important;
        align-items: center !important;
        /* QUITAMOS AIRE: Bajamos de 15px a 4px para que casi toque los bordes */
        padding: 0 5px 20px 5px !important; 
        width: 100% !important;
        max-width: 100% !important;
    }

    .seccion-tienda-final .titulo-nosotros {
        margin-bottom: 25px !important;
        font-size: 1.8rem !important;
    }

    .grid-tienda-botones {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important; /* Cuadros más pegados entre sí */
        width: 100% !important;
    }

    .btn-tienda {
        height: 270px !important; /* MÁS GRANDE: Subimos altura para que luzca más */
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important; 
        align-items: center !important;
        padding: 15px 5px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .btn-tienda .txt-banner {
        font-size: 0.85rem !important; 
        line-height: 1.1 !important;
        z-index: 20 !important;
        position: relative !important;
        text-align: center !important;
        font-weight: 800 !important;
    }

    .btn-tienda .img-flotante {
        max-width: 92% !important; /* DIBUJOS MÁS GRANDES */
        height: auto !important;
        position: absolute !important;
        bottom: 8px !important; 
        z-index: 5 !important;
    }

    /* --- AJUSTES FILA INFERIOR (MANTENIENDO PROPORCIÓN) --- */
    .img-mascotas {
        max-width: 98% !important; 
        bottom: 0px !important;
    }

    .img-musica { 
        width: 55% !important; 
        bottom: 65px !important; 
        left: 28% !important; 
    }
    .img-libros { 
        width: 80% !important; 
        bottom: -5px !important; 
        left: 72% !important; 
    }
}
/* --- 12. BARRA SOCIAL (RRSS) - DISEÑO COMPLETO Y UNIFICADO --- */

/* 12.1. CONTENEDOR BASE */
.barra-social-zona {
    position: fixed !important;
    z-index: 9999999 !important;
    display: flex !important;
    transition: all 0.3s ease;
}
/* --- 11. TIENDA MÓVIL (AJUSTE TAMAÑO IMÁGENES INFERIORES) --- */
@media (max-width: 1024px) {
    .seccion-tienda-final {
        padding-top: 210px !important; 
        margin-top: 0 !important; 
        min-height: auto !important; 
        background: transparent !important; 
        display: block !important;
    }

    .seccion-tienda-final .grid-contacto {
        flex-direction: column !important;
        align-items: center !important;
        padding: 0 15px 40px 15px !important; 
    }

    .seccion-tienda-final .titulo-nosotros {
        margin-bottom: 25px !important;
        font-size: 1.8rem !important;
    }

    .grid-tienda-botones {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important; 
    }

    .btn-tienda {
        height: 200px !important; 
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important; 
        align-items: center !important;
        padding: 15px 5px !important;
        border-radius: 15px !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .btn-tienda .txt-banner {
        font-size: 0.75rem !important; 
        line-height: 1.1 !important;
        z-index: 20 !important;
        position: relative !important;
        text-align: center !important;
    }

    .btn-tienda .img-flotante {
        max-width: 80% !important; 
        height: auto !important;
        position: absolute !important;
        bottom: 5px !important; 
        z-index: 5 !important;
    }

    /* --- AJUSTES ESPECÍFICOS FILA INFERIOR --- */

    /* PERRO Y GATO (Más grandes) */
    .img-mascotas {
        max-width: 95% !important; /* Aumentado de 80% a 95% */
        bottom: 0px !important;
    }

    /* MULTIMEDIA (Música y Libros más grandes) */
    .img-musica { 
        width: 50% !important; /* De 40% a 50% */
        bottom: 60px !important; 
        left: 28% !important; 
    }
    .img-libros { 
        width: 75% !important; /* De 60% a 75% */
        bottom: -5px !important; 
        left: 72% !important; 
    }
}

/* 12.2. ESTADO INICIAL DE LOS ICONOS (MARRÓN NEUTRO) */
.enlace-social {
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    text-decoration: none !important;
    background: transparent !important;
}

.enlace-social img {
    /* Filtro para marrón ceniza/topo (menos cálido) */
    filter: sepia(60%) saturate(120%) brightness(80%) contrast(90%) hue-rotate(10deg) !important;
    opacity: 0.8;
    transition: all 0.4s ease !important;
}

/* 12.3. EFECTO HOVER Y TOUCH (VUELTA AL COLOR REAL) */
.enlace-social:hover, 
.enlace-social:active {
    transform: scale(1.2) !important;
}

.enlace-social:hover img, 
.enlace-social:active img {
    filter: sepia(0%) saturate(100%) brightness(100%) hue-rotate(0deg) !important;
    opacity: 1 !important;
}

/* Sombras de colores específicas en hover */
.social-wa:hover img, .social-wa:active img { filter: drop-shadow(0 0 8px rgba(37, 211, 102, 0.8)) !important; }
.social-ig:hover img, .social-ig:active img { filter: drop-shadow(0 0 8px rgba(225, 48, 108, 0.8)) !important; }
.social-fb:hover img, .social-fb:active img { filter: drop-shadow(0 0 8px rgba(24, 119, 242, 0.8)) !important; }
.social-amz:hover img, .social-amz:active img { filter: drop-shadow(0 0 8px rgba(255, 153, 0, 0.8)) !important; }
.social-tk:hover img, .social-tk:active img { filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.8)) !important; }
.social-th:hover img, .social-th:active img { filter: drop-shadow(0 0 8px rgba(0, 162, 255, 0.8)) !important; }

/* 12.4. CONFIGURACIÓN PANTALLA GRANDE (ESCRITORIO) */
@media (min-width: 1025px) {
    .barra-social-zona {
        right: 25px !important; 
        top: 50% !important;
        transform: translateY(-50%) !important;
        flex-direction: column !important;
        gap: 15px !important; 
    }

    .enlace-social {
        width: 45px;
        height: 45px;
        background: #ffffff !important; 
        border-radius: 50%;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }
    
    .enlace-social img { width: 22px !important; }

    /* Margen de seguridad original para tu tienda */
    .seccion-tienda-final .grid-contacto {
        padding-right: 150px !important; 
    }
}

/* 12.5. CONFIGURACIÓN MÓVIL (HORIZONTAL Y TRANSPARENTE) */
@media (max-width: 1024px) {
    .barra-social-zona {
        right: 0 !important;
        left: 0 !important;
        top: auto !important;
        bottom: 25px !important; 
        flex-direction: row !important;
        justify-content: center !important;
        width: 100% !important;
        background: transparent !important;
        gap: 25px !important; 
    }

    .enlace-social {
        width: auto !important;
        height: auto !important;
    }

    .enlace-social img {
        width: 28px !important;
    }

    /* Padding extra para que el footer no se solape con los iconos */
    .seccion-tienda-final, 
    .seccion-contacto-directo {
        padding-bottom: 90px !important;
    }
}

/* --- 13. AJUSTES FINALES TIENDA Y MÓVIL --- */
.seccion-tienda-final .titulo-nosotros {
    display: block;
    width: 100%;
}

.filigrana-tienda {
    pointer-events: none;
    z-index: 10;
}

@media (max-width: 1024px) {
    .seccion-tienda-final .titulo-nosotros {
        font-size: 2.8rem !important; 
        margin-bottom: 10px !important;
    }
}

@media (max-width: 768px) {
    .imagen-chica-wrap {
        display: none !important;
    }

    .hero-inicio {
        min-height: 90vh !important; 
        padding-top: 150px !important; 
        padding-bottom: 100px !important; 
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .hero-inicio h1 {
        font-size: 2.5rem !important; 
        letter-spacing: 3px !important;
        line-height: 1.2 !important;
        padding: 0 20px;
        text-align: center;
        margin-bottom: 25px !important;
    }

    .hero-inicio p {
        font-size: 0.9rem !important;
        letter-spacing: 3px !important;
        margin-bottom: 15px !important;
        text-align: center;
    }

    .hero-inicio img[src*="filigrana1"] {
        max-width: 200px !important;
        margin: 50px auto 0 auto !important; 
    }
}

/* --- 14. MENÚ MÓVIL ESTILO POP-UP  --- */
@media (max-width: 768px) {
    .menu-toggle {
        display: flex !important;
        z-index: 10001 !important;
        position: relative;
    }

    body .sitio-header .menu-horizontal.active {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        
        /* Fondo con imagen y degradado */
        background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.8)), 
                    url('img/fondo_principal.png') !important;
        background-size: cover !important;
        background-position: center !important;
        
        /* Efecto de cristal borroso */
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        
        padding-top: 120px !important; 
        z-index: 10000 !important;
        gap: 25px !important;
        animation: fadeInMenu 0.4s ease;
    }

    @keyframes fadeInMenu {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .menu-horizontal.active li {
        width: 100% !important;
        text-align: center !important;
    }

    .menu-horizontal.active li a {
        color: #333 !important;
        font-size: 1.6rem !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-decoration: none !important;
        display: block !important;
    }

    .menu-toggle .bar {
        background-color: #333 !important;
    }
}
/* --- ESTILO REFINADO PARA PÁGINAS LEGALES --- */

.page {
    /* Ponemos la imagen más pequeña y que no agobie */
    background-image: url('img/contacto_responsive.png'); 
    background-size: 200px;       /* Ajusta este número para que los caballos sean más pequeños */
    background-position: bottom right; /* Se quedan en una esquina para no molestar */
    background-attachment: fixed; 
    background-repeat: no-repeat;
    background-color: #f4f4f4;    /* Un gris muy clarito de fondo general */
}

.page .seccion-blanca {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 160px 20px 80px !important; 
    font-family: 'Montserrat', sans-serif;
    
    /* ELIMINAMOS EL BLOQUE BLANCO */
    background: transparent !important; 
    box-shadow: none !important;
    border: none !important;
}

/* Mejoramos el texto para que se lea bien sobre el fondo */
.page .seccion-blanca h1, 
.page .seccion-blanca h2 {
    color: #1a2b4c;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.page .seccion-blanca p {
    color: #333;
    line-height: 1.8;
    font-weight: 500; /* Un poco más de cuerpo al texto para que resalte */
}
/* Ocultar el título visualmente en las páginas */
.page .seccion-blanca h1 {
    display: none !important;
}
/* --- AJUSTE FINAL: SUBIR TODO EL BLOQUE UN POQUITO --- */
@media (max-width: 768px) {
    
    .hero-inicio {
        justify-content: flex-start !important;
        padding-top: 100px !important; 
    }

    /* 1. Al reducir este número (de 160 a 135), TODO el bloque sube */
    .hero-inicio p, 
    .hero-texto p {
        margin-top: 135px !important; /* <--- AJUSTA AQUÍ: Menos número = más arriba todo */
        margin-bottom: 0px !important;
        font-size: 0.9rem !important;
        text-align: center !important;
    }

    /* 2. Este mantiene la distancia con el de arriba */
    .hero-inicio h1, 
    .hero-texto h1 {
        margin-top: 30px !important; 
        margin-bottom: 5px !important;
        font-size: 2.3rem !important;
        line-height: 1 !important;
        text-align: center !important;
    }

    /* 3. La filigrana sigue al título */
    .hero-inicio img[src*="filigrana1"] {
        margin-top: 0 !important;
        max-width: 180px !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
/* ================================================================
   1. AJUSTE MAESTRO PARA MÓVILES (VERTICAL) 
   ================================================================ */
@media (max-width: 768px) and (orientation: portrait) {
    
    .sitio-header { padding: 25px 0 !important; }

    .header-flex {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 20px !important; 
    }

    .logo img { max-width: 110px !important; }
    .menu-toggle { margin-left: auto !important; display: flex !important; }

    .hero-inicio {
        justify-content: flex-start !important;
        padding-top: 0 !important;  
        min-height: 100vh !important;
    }

    .hero-inicio p, .hero-texto p {
        margin-top: 40vh !important; 
        margin-bottom: 25px !important; 
        font-size: 1.1rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
        padding: 0 20px !important;
        font-weight: 600 !important;
        color: #ffffff !important;
    }

    .hero-inicio h1, .hero-texto h1 {
        margin-top: 0 !important; 
        margin-bottom: 20px !important; 
        font-size: 2.8rem !important;
        line-height: 1 !important; 
        text-align: center !important;
        font-weight: 800 !important;
        text-shadow: 2px 4px 12px rgba(0,0,0,0.6) !important;
    }

    .hero-inicio img[src*="filigrana1"] {
        margin-top: 10px !important;
        max-width: 180px !important;
        height: auto !important;
    }

    .seccion-tienda-final, .seccion-contacto-directo { padding-top: 240px !important; }
}
	/* ================================================================
   ELIMINACIÓN TOTAL DE CONFLICTOS EN LANDSCAPE (TUMBADO)
   ================================================================ */
@media screen and (orientation: landscape) and (max-height: 500px) {

    /* 1. BORRADO RADICAL DE LA CHICA */
    .imagen-chica-wrap, 
    .imagen-chica-wrap img,
    [class*="chica"], 
    .hero-inicio img:not([src*="logo"]):not([src*="filigrana"]) { 
        display: none !important; 
        height: 0 !important;
    }

    /* 2. REUBICAR EL TEXTO (Subirlo para que no lo tape el footer) */
    .hero-inicio {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important; /* Empezamos desde arriba */
        padding-top: 60px !important; /* Espacio para el logo */
        min-height: 140vh !important; /* Forzamos scroll para que el footer no suba */
        background-attachment: scroll !important;
    }

    /* 3. AJUSTE DE TEXTOS Y LOGO */
    .logo img { 
        max-width: 60px !important; 
    }
    
    .sitio-header { 
        padding: 5px 0 !important; 
    }

    .hero-inicio p, .hero-texto p {
        margin-top: 10px !important; 
        font-size: 0.85rem !important;
        line-height: 1.2 !important;
        color: #ffffff !important;
    }

    .hero-inicio h1, .hero-texto h1 {
        font-size: 1.6rem !important;
        margin: 5px 0 !important;
        line-height: 1 !important;
    }

    /* 4. FILIGRANA PEQUEÑA ABAJO */
    .hero-inicio img[src*="filigrana1"] {
        max-width: 90px !important;
        margin: 10px auto !important;
        display: block !important;
    }

    /* 5. ELIMINAR ESPACIOS EN BLANCO EXTRAS */
    .seccion-tienda-final, .seccion-contacto-directo {
        padding-top: 100px !important;
    }
}
/* Este código solo despierta cuando el móvil se tumba */
@media screen and (orientation: landscape) and (max-height: 500px) {

    /* 1. FORZAR DESAPARICIÓN DE LA CHICA */
    /* Atacamos directamente al contenedor y a la imagen con máxima prioridad */
    div.imagen-chica-wrap[style], 
    .imagen-chica-wrap,
    .imagen-chica-wrap img {
        display: none !important;
        opacity: 0 !important;
        height: 0 !important;
        margin: 0 !important;
    }

    /* 2. ARREGLAR EL HUECO DEL TEXTO */
    /* Tu PHP tiene un padding-top de 55vh. Aquí lo machacamos */
    section.hero-inicio[style], 
    .hero-inicio {
        padding-top: 20px !important; 
        min-height: 120vh !important;
    }

    /* 3. SUBIR EL CONTENIDO */
    /* Tu div del texto tiene un margin-top negativo de -440px que en horizontal es mucho */
    .imagen-chica-wrap[style] {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 4. TAMAÑO DE LETRA */
    .hero-inicio h1, 
    .hero-inicio h1[style] {
        font-size: 2rem !important;
        letter-spacing: 3px !important;
    }
}