/* 1. CONFIGURACIÓN GENERAL */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Sugerencia: Usa Montserrat desde Google Fonts */
}

body {
    background-color: #fdfcf9; /* Fondo crema muy claro */
    color: #333;
}
a{
    color: #eee;
    text-decoration: none;
}

/* 2. CABECERA */
.header {
    background-color: #000;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo {
   width: 70px;
   height: 70px;
}

.nav ul {
    display: flex;
    list-style: none;
}

.nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    margin: 0 15px;
    transition: opacity 0.3s;
}

.nav ul li a:hover {
    opacity: 0.7;
}

.header-icons i {
    margin-left: 20px;
    cursor: pointer;
}

/* 3. HERO SECTION */
.hero {
    height: 80vh;
    /* Oscurecemos el gradiente: 0.4 o 0.5 es ideal para texto blanco */
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
                url('/img/tienda/Banner.png');
    
    /* PROPIEDADES CLAVE */
    background-size: cover;      /* Cubre todo el espacio sin deformar */
    background-position: center; /* Centra la imagen para que no se corte por los lados */
    background-repeat: no-repeat;
    
    display: flex;
    flex-direction: column;      /* Permite alinear título y subtítulo uno bajo otro */
    justify-content: center;     /* Centra verticalmente */
    align-items: center;         /* Centra horizontalmente */
    text-align: center;
    padding: 0 10%;
    color: white;                /* Asegura que el texto sea blanco */
}

.hero-content h2 {
    font-size: 60px;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #f0efeb;
}

.hero-content p {
    font-size: 18px;
    margin-bottom: 30px;
    max-width: 400px; /* Al tener un ancho fijo... */
    margin-left: auto;  /* ...necesita márgenes automáticos... */
    margin-right: auto; /* ...para centrarse respecto a su contenedor */
    color: #f0efeb;
    text-align: center; /* Esto centra el texto dentro de esos 400px */
}

.btn-primary {
    background-color: #c5a47e; /* Color dorado/tierra del botón */
    color: white;
    padding: 12px 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    display: inline-block;
}

/* 4. BARRA DE BENEFICIOS */
.benefits-bar {
    display: flex;
    justify-content: space-around;
    padding: 40px 5%;
    background-color: #fff;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.benefit-item i {
    font-size: 24px;
}

.benefit-item h4 {
    font-size: 13px;
    letter-spacing: 1px;
}

.benefit-item p {
    font-size: 12px;
    color: #777;
}

/* 5. SECCIÓN DE PRODUCTOS (NOVEDADES) */
.products-section {
    padding: 60px 5%;
    text-align: center;
    max-width: 1400px; /* Evita que en pantallas gigantes se estire demasiado */
    margin: 0 auto;
}

.products-section h3 {
    margin-bottom: 40px;
    font-size: 22px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Contenedor de la cuadrícula */
.product-grids { 
    display: grid !important;
    /* Subimos el minmax a 280px para que no se amontonen en escritorio */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 40px 25px !important; /* Aumentamos el gap vertical (40px) */
    margin-bottom: 50px; /* Espacio de seguridad antes del botón VER TODAS */
    align-items: start;
}

.product-card {
    text-align: left;
    display: flex;
    flex-direction: column;
}

.product-card img {
    width: 100%;
    /* Cambiamos height fijo por aspect-ratio para que sea responsive real */
    aspect-ratio: 1 / 1; 
    object-fit: contain; /* Para que el zapato se vea completo sin cortes */
    background-color: #f9f9f9;
    transition: transform 0.3s ease;
}

.product-card img:hover {
    transform: scale(1.03);
}

.product-name {
    margin-top: 15px;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    color: #333;
}

.product-price {
    font-weight: bold;
    margin-top: 5px;
    color: #000;
}

/* Contenedor del botón inferior */
.center-btn {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px; /* Espacio extra respecto a la última fila de zapatos */
    clear: both; /* Asegura que nada se le superponga */
}

.btn-dark {
    background-color: #000;
    color: #fff;
    padding: 12px 50px;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    transition: background 0.3s;
}

.btn-dark:hover {
    background-color: #333;
}

/* 6. MARCAS */
.brands-section {
    padding: 40px 5%;
    border-top: 1px solid #eee;
    text-align: center;
}

.brands-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
    filter: grayscale(100%);
    opacity: 0.6;
}

.brands-logos img {
    height: 120px;
}

/* 6. INSTAGRAM SECTION REVISADA */
.instagram-section {
    padding: 0; /* Quitamos padding para que llegue a los bordes si es necesario */
    background-color: #000; /* Fondo negro según la franja inferior */
    color: #fff;
    overflow: hidden;
}

.insta-container {
    display: flex;
    align-items: center; /* Alinea verticalmente el texto con las fotos */
}

/* Lado del texto (Izquierda) */
.insta-text-side {
    flex: 1; /* Toma el espacio necesario */
    padding-left: 5%;
}

.insta-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.insta-header i {
    font-size: 28px;
}

.insta-header p {
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 1.4;
}

.insta-header span {
    font-weight: 300;
    opacity: 0.8;
}

/* Lado de las fotos (Derecha) */
.insta-grid-side {
    flex: 2; /* Le damos más espacio a las fotos */
}

.insta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 fotos una al lado de la otra */
}

.insta-grid img {
    width: 200px;
    height: 200px; /* Ajusta según prefieras la altura */
    object-fit: cover;
    padding:10px;
    display: block; /* Quita espacios en blanco debajo de las imágenes */
    transition: opacity 0.3s;
}

.insta-grid img:hover {
    opacity: 0.7;
}
.menu-toggle {
    display: none;
    font-size: 24px;
    cursor: pointer;
    color: white;
}
.instagram:hover{
    color:#c5a47e;
}
.search-container {
    display: flex;
    align-items: center;
    background: #f4f4f4;
    padding: 5px 10px;
    border-radius: 20px;
    margin-right: 15px;
}

#search-input {
    border: none;
    background: transparent;
    outline: none;
    padding: 5px;
    font-size: 14px;
    width: 0; /* Empezará cerrado */
    transition: width 0.4s;
}

/* Cuando pasas el ratón o haces clic, se expande */
.search-container:hover #search-input,
#search-input:focus {
    width: 150px;
}

#search-btn {
    cursor: pointer;
    color: #333;
}
.search-container {
    position: relative; /* Importante para que el dropdown flote debajo */
}

.search-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 300px;
    background: white;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.3s;
}

.dropdown-item:hover {
    background: #f9f9f9;
}

.dropdown-item img {
    border-radius: 4px;
    object-fit: cover;
}

.prod-name {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    color: #333;
}

.prod-price {
    font-size: 11px;
    color: #c5a47e;
    margin: 0;
}
/* RESPONSIVE */

@media (max-width: 768px) {
    .menu-toggle {
        display: block; /* Aparece en móvil */
    }

    .nav {
        position: absolute;
        top: 60px; /* Debajo de la cabecera */
        left: -100%; /* Escondido a la izquierda */
        width: 100%;
        height: auto;
        background-color: #000;
        transition: 0.3s;
        z-index: 999;
    }

    /* Clase que activaremos con JS */
    .nav.active {
        left: 0 !important; /* El !important asegura que esta regla mande */
        display: block !important; 
    }


    .nav ul {
        flex-direction: column;
        padding: 20px;
        text-align: center;
    }

    .nav ul li {
        margin: 15px 0;
    }
}

.whatsapp-fixed {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25d366; /* Color oficial de WhatsApp */
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    font-size: 35px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: transform 0.3s;
}

.whatsapp-fixed:hover {
    transform: scale(1.1); /* Crece un poquito al pasar el ratón */
    color: white;
}
.whatsapp-btn i, .whatsapp-fixed i {
    color: #fff !important; /* Fuerza el color blanco */
    display: inline-block !important;
}

/* Botón de Pedido por WhatsApp */
.btn-whatsapp-order {
    margin-top: 20px;
    width:100%;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #25d366; /* Verde WhatsApp */
    color: white;
    padding: 10px 24px;
    border: none;
    border-radius: 50px; /* Bordes muy redondeados para estilo moderno */
    font-family: 'Montserrat', sans-serif; /* O la que uses en Mada Shoes */
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
    position: relative;
    overflow: hidden;
}

/* Efecto al pasar el ratón */
.btn-whatsapp-order:hover {
    background-color: #1ebe57;
    transform: translateY(-3px); /* Sube un poquito */
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

/* Efecto al hacer clic */
.btn-whatsapp-order:active {
    transform: translateY(1px);
}

/* El icono de WhatsApp un poco más grande */
.btn-whatsapp-order i {
    font-size: 18px;
}

/* Brillo elegante que cruza el botón automáticamente */
.btn-whatsapp-order::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(30deg);
    transition: all 0.5s;
    animation: shine 4s infinite;
}

@keyframes shine {
    0% { left: -60%; }
    20% { left: 120%; }
    100% { left: 120%; }
}

/* Contenedor principal */
.product-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* El slider en sí */
.product-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* Esto hace el efecto imán */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Ocultar la barra de scroll para que quede limpio */
.product-slider::-webkit-scrollbar {
    display: none;
}

/* Cada imagen del slider */
.product-slider img {
    flex: 0 0 100%; /* Cada foto ocupa el 100% del ancho */
    width: 100%;
    object-fit: cover;
    scroll-snap-align: start; /* Punto de anclaje */
}

/* Puntitos indicadores (opcional) */
.slider-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
}

.dot {
    width: 6px;
    height: 6px;
    background: rgba(0,0,0,0.2);
    border-radius: 50%;
}

.dot.active {
    background: #333;
}

@media (max-width: 768px) {
    .btn-whatsapp-order {
        width: 100%;
        padding: 15px;
    }
}
@media (max-width: 768px) {
   /* En móvil normalmente usarías un menú hamburguesa */
    .hero-content h2 { font-size: 40px; }
    .insta-grid { grid-template-columns: repeat(2, 1fr); }
    .benefits-bar { flex-direction: column; gap: 20px; }
}

/* RESPONSIVE: En móviles se ponen uno sobre otro */
@media (max-width: 768px) {
    .insta-container {
        flex-direction: column;
        text-align: center;
    }
    
    .insta-text-side {
        padding: 30px 0;
    }
    
    .insta-header {
        justify-content: center;
    }

    .insta-grid {
        grid-template-columns: repeat(2, 1fr); /* 2x2 en móviles */
    }
    .insta-grid img {
        width: 200px;
        height: 200px; /* Ajusta según prefieras la altura */
        object-fit: cover;
        margin-top:-20px;
        padding-bottom:20px;
        display: block; /* Quita espacios en blanco debajo de las imágenes */
        transition: opacity 0.3s;
    }

    .product-card img {
        width: 100%;
        height:450px; 
        background-color: #f4f4f4;
        transition: transform 0.3s;
    }
}

/* CATALAGO MUJER */

/* --- ESTILOS ESPECÍFICOS DEL CATÁLOGO --- */

.catalog-container {
    padding: 40px 5%;
    max-width: 1400px;
    margin: 0 auto;
}

/* Cabecera del Catálogo */
.catalog-header {
    margin-bottom: 40px;
}

.catalog-header h2 {
    font-size: 32px;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.breadcrumbs {
    font-size: 12px;
    color: #999;
}

.breadcrumbs span {
    color: #333;
    font-weight: bold;
}

/* Layout: Sidebar + Rejilla */
.catalog-layout {
    display: flex;
    gap: 50px; /* Espacio entre filtros y productos */
}

/* BARRA LATERAL (SIDEBAR) */
.sidebar {
    width: 200px; /* Ancho fijo para los filtros */
    flex-shrink: 0;
}

.filter-group {
    margin-bottom: 40px;
}

.filter-group h4 {
    font-size: 12px;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.filter-list {
    list-style: none;
}

.filter-list li {
    margin-bottom: 10px;
}

.filter-list li a {
    text-decoration: none;
    color: #666;
    font-size: 13px;
    transition: color 0.3s;
}

.filter-list li a:hover {
    color: #c5a47e;
}

/* Filtro de Precio */
.price-slider-container {
    margin-top: 15px;
}

.slider {
    width: 100%;
    accent-color: #000;
    margin-bottom: 10px;
}

.price-values {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 20px;
}

.btn-filter {
    width: 100%;
    background: #000;
    color: #fff;
    border: none;
    padding: 8px;
    font-size: 11px;
    letter-spacing: 1px;
    cursor: pointer;
}

/* GRILLA DE PRODUCTOS (4 columnas) */
.products-grid {
    flex-grow: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 productos por fila */
    gap: 30px;
}

.product-item {
    display: block !important;
    width: 100% !important;
    max-width: 100%; /* Para que no se salga de su celda del grid */
    overflow: hidden;
}

.product-slider-container {
    width: 100% !important;
    max-width: 100%;
    position: relative;
}
.product-img {
    background-color: #f7f7f7; /* Fondo gris claro como en la foto */
    margin-bottom: 15px;
    aspect-ratio: 1 / 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-img img {
    width: 100%;
    mix-blend-mode: multiply; /* Ayuda a integrar fondos de fotos blancas */
    transition: transform 0.5s ease;
}

.product-item:hover img {
    transform: scale(1.05);
}

.product-info .name {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 5px;
}

.product-info .price {
    font-size: 13px;
    font-weight: bold;
}

/* BOTÓN WHATSAPP FLOTANTE */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    text-decoration: none;
    z-index: 1000;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .catalog-layout {
        flex-direction: column;
    }
    .sidebar {
        width: 100%;
    }
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- PÁGINA SOBRE NOSOTROS --- */

/* Contenedor principal para centrar el contenido */
.about-container {
    padding: 60px 10%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Cabecera de la página (Título y Breadcrumbs) */
.about-header {
    text-align: left;
    margin-bottom: 60px;
}

.about-header h2 {
    font-size: 32px;
    letter-spacing: 4px;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.about-header .breadcrumbs {
    font-size: 13px;
    color: #888;
    letter-spacing: 1px;
}

.about-header .breadcrumbs span {
    color: #000;
    font-weight: 600;
}

/* Sección de Contenido (Texto e Imagen lado a lado) */
.about-content {
    display: flex;
    align-items: center; /* Centra verticalmente el texto con la imagen */
    gap: 80px; /* Espacio generoso entre columnas */
    margin-bottom: 100px;
}

.about-text-side {
    flex: 1;
}

.about-text-side h3 {
    font-size: 24px;
    margin-bottom: 25px;
    font-weight: 600;
    letter-spacing: 1px;
}

.about-text-side p {
    font-size: 16px;
    line-height: 1.8; /* Interlineado amplio para lectura cómoda */
    color: #555;
    margin-bottom: 20px;
}

/* Estilo para la "Firma" o cierre */
.signature {
    margin-top: 40px;
}

.signature p {
    font-style: italic;
    color: #333;
    font-weight: 600;
}

/* Lado de la Imagen */
.about-image-side {
    flex: 1;
    position: relative;
}

.about-image-side img {
    width: 100%;
    height: auto;
    display: block;
    /* Efecto de borde decorativo sutil */
    box-shadow: 20px 20px 0px #f9f7f2; 
    border: 1px solid #eee;
}

/* Sección de Valores (Iconos en la parte inferior) */
.values-section {
    display: flex;
    justify-content: space-between;
    padding: 60px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.value-item {
    text-align: center;
    flex: 1;
    padding: 0 20px;
}

.value-item i {
    font-size: 35px;
    color: #c5a47e; /* El color dorado/tierra de Mada Shoes */
    margin-bottom: 15px;
}

.value-item h4 {
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.value-item p {
    font-size: 13px;
    color: #777;
    line-height: 1.5;
}

/* --- RESPONSIVE (Ajustes para móvil) --- */
@media (max-width: 992px) {
    .about-content {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .about-container {
        padding: 40px 5%;
    }

    .about-content {
        flex-direction: column; /* Apila texto e imagen en móvil */
        text-align: center;
    }

    .about-image-side {
        order: -1; /* En móvil, la imagen suele quedar mejor arriba del texto */
        margin-bottom: 30px;
    }

    .about-image-side img {
        box-shadow: none; /* Quitamos el adorno en móvil para ahorrar espacio */
    }

    .values-section {
        flex-direction: column;
        gap: 40px;
    }
}

/* --- PÁGINA DE CONTACTO --- */

.contact-container {
    padding: 60px 5%;
    max-width: 1200px;
    margin: 0 auto;
}

.contact-header {
    margin-bottom: 50px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.contact-header h2 {
    font-size: 32px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Layout de dos columnas: Info y Mapa */
.contact-layout {
    display: flex;
    gap: 80px;
    margin-bottom: 80px;
    align-items: flex-start;
}

/* Columna de Información (Izquierda) */
.contact-info {
    flex: 1;
}

.info-item {
    margin-bottom: 40px;
}

.info-item h3 {
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 15px;
    color: #333;
    font-weight: 700;
}

.info-item p {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 5px;
}

.info-item i {
    margin-right: 10px;
    color: #c5a47e; /* Color dorado característico */
}

/* Redes Sociales */
.contact-socials {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.contact-socials a {
    color: #000;
    font-size: 20px;
    transition: color 0.3s;
}

.contact-socials a:hover {
    color: #c5a47e;
}

/* Columna del Mapa (Derecha) */
.contact-map {
    flex: 1.5; /* El mapa es un poco más ancho que la info */
    width: 100%;
}

.map-placeholder iframe {
    width: 100%;
    border-radius: 4px;
    filter: grayscale(0.3); /* Un toque sutil para que encaje con la estética */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Sección de Ayuda Rápida (Abajo) */
.quick-help {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 60px 0;
    border-top: 1px solid #eee;
}

.help-box {
    background: #fdfcf9;
    padding: 30px;
    text-align: center;
    border: 1px solid #f0efeb;
    transition: transform 0.3s, border-color 0.3s;
    cursor: pointer;
}

.help-box:hover {
    transform: translateY(-5px);
    border-color: #c5a47e;
}

.help-box i {
    font-size: 28px;
    margin-bottom: 15px;
    display: block;
}

.help-box p {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
}

/* Footer de la página de contacto */
/* ==========================================================================
   NUEVO FOOTER COMPLETO - MADA SHOES
   ========================================================================== */
   .main-footer {
    background-color: #1a1a1a; /* Un negro suave muy elegante */
    color: #ffffff;
    padding: 60px 40px 20px 40px;
    font-family: inherit;
}

.footer-content {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h4 {
    color: #c5a47e; /* Tu dorado */
    font-size: 1.1rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-section p, .footer-section li {
    font-size: 0.9rem;
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 10px;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-section ul li a:hover {
    color: #ffffff;
}

.footer-social-links {
    display: flex;
    gap: 15px;
    font-size: 1.2rem;
    margin-top: 15px;
}

.footer-social-links a {
    color: #ffffff;
    transition: transform 0.3s;
}

.footer-social-links a:hover {
    transform: translateY(-3px);
    color: #c5a47e;
}

.footer-bottom {
    max-width: 1100px;
    margin: 0 auto;
    border-top: 1px solid #333;
    padding-top: 20px;
    text-align: center;
    font-size: 0.8rem;
    color: #777;
}

/* Ajuste móvil */
@media (max-width: 768px) {
    .main-footer { padding: 40px 20px 20px 20px; }
    .footer-section { text-align: center; }
    .footer-social-links { justify-content: center; }
}
/* --- RESPONSIVE CONTACTO --- */
@media (max-width: 992px) {
    .contact-layout {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .contact-layout {
        flex-direction: column; /* Mapa debajo de la info en móvil */
    }

    .contact-map {
        order: 2;
    }

    .contact-info {
        order: 1;
        text-align: center;
    }

    .contact-socials {
        justify-content: center;
    }

    .quick-help {
        grid-template-columns: 1fr; /* Uno sobre otro en móvil */
    }
}

@media (max-width: 768px) {
    /* 1. Centramos el contenedor que envuelve toda la info */
    .contact-layout {
        flex-direction: column; 
        align-items: center;    /* Centra los bloques hijos horizontalmente */
        text-align: center;     /* Centra el texto de Encuéntranos, Horarios, etc. */
        gap: 40px;
    }

    .contact-info {
        width: 100%;           /* Asegura que ocupe todo el ancho para centrar bien */
    }

    /* 2. Centramos los iconos de redes sociales */
    .contact-socials {
        justify-content: center; 
        margin-top: 20px;
    }

    /* 3. Ajuste opcional para los items individuales */
    .info-item {
        margin-bottom: 30px;
    }
}

/* ================================================================
   SECCIÓN BLOG
   ================================================================ */
   .blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 40px;
    margin-top: 20px;
}

.blog-post {
    background: #fff;
    border: 1px solid #eee;
    transition: transform 0.3s ease;
}

.blog-post:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.post-img {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-post:hover .post-img img {
    transform: scale(1.1);
}

.post-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #000;
    color: #fff;
    padding: 5px 12px;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}

.post-content {
    padding: 25px;
    text-align: left;
}

.post-date {
    font-size: 11px;
    color: #999;
    display: block;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.post-content h3 {
    font-size: 18px;
    margin-bottom: 12px;
    line-height: 1.4;
    color: #000;
}

.post-content p {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Corta el texto a 3 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.read-more {
    font-size: 12px;
    font-weight: bold;
    color: #c5a47e;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.read-more i {
    transition: transform 0.3s ease;
}

.read-more:hover i {
    transform: translateX(5px);
}

/* Responsivo para móviles */
@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr; /* Una sola columna en móvil */
        gap: 25px;
    }
}


/* ================================================================
   DISEÑO DE ARTÍCULO INDIVIDUAL (LECTURA)
   ================================================================ */
   .article-container {
    max-width: 800px; /* Más estrecho para que sea cómodo de leer */
    margin: 40px auto;
    padding: 0 20px;
}

.post-page-header {
    text-align: center;
    margin-bottom: 30px;
}

.category-badge {
    background: #c5a47e;
    color: white;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    border-radius: 2px;
}

.post-page-header h1 {
    font-size: 32px;
    margin: 20px 0 10px;
    line-height: 1.2;
}

.post-meta {
    font-size: 13px;
    color: #888;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.main-post-image {
    width: 100%;
    margin-bottom: 40px;
}

.main-post-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Estilos de texto */
.post-body {
    line-height: 1.8;
    font-size: 17px;
    color: #444;
}

.post-body p {
    margin-bottom: 20px;
}

.post-body h2 {
    color: #000;
    margin: 40px 0 20px;
    font-size: 24px;
}

.post-body .lead {
    font-size: 20px;
    font-weight: 500;
    color: #333;
    border-left: 3px solid #c5a47e;
    padding-left: 20px;
}

/* Caja de recomendación de producto */
.product-callout {
    background: #fdfcf9;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 20px;
    margin: 40px 0;
}

.product-callout img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.product-callout h4 {
    margin-bottom: 5px;
}

.btn-small {
    display: inline-block;
    margin-top: 10px;
    background: #000;
    color: #fff;
    padding: 8px 15px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.back-to-blog {
    margin-top: 60px;
    text-align: center;
    border-top: 1px solid #eee;
    padding-top: 30px;
}

.back-to-blog a {
    color: #c5a47e;
    font-weight: bold;
}


/* Ajuste móvil */
@media (max-width: 600px) {
    .post-page-header h1 { font-size: 26px; }
    .product-callout { flex-direction: column; text-align: center; }
}


/* RESEÑAS */

.reviews-section {
    background-color: #fdfcf9;
    padding: 80px 5%;
    text-align: center;
    overflow: hidden;
}

.reviews-section h3 {
    letter-spacing: 3px;
    margin-bottom: 50px;
    font-size: 20px;
}

.reviews-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.reviews-slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.review-card {
    min-width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.stars {
    color: #c5a47e; /* El dorado de tu marca */
    font-size: 20px;
    margin-bottom: 15px;
}

.review-text {
    font-style: italic;
    font-size: 18px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 20px;
}

.review-author {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
}

.google-verified {
    font-size: 11px;
    color: #999;
    margin-top: 10px;
}

/* Flechas de navegación */
.slider-nav {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.slider-nav button {
    background: none;
    border: 1px solid #ccc;
    padding: 10px 15px;
    cursor: pointer;
    transition: 0.3s;
}

.slider-nav button:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

.google-cta {
    margin-top: 30px;
}
.btn-google {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    border: 1px solid #ddd;
    border-radius: 50px;
    color: #555;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s;
}
.btn-google:hover {
    background: #f8f8f8;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* ================================================================
   PÁGINA DE DETALLE DE PRODUCTO (ESTILO TIENDA)
   ================================================================ */
   .store-layout-container {
    display: flex;
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 20px;
    gap: 40px;
}

/* Sidebar izquierda */
.store-sidebar {
    width: 250px;
    flex-shrink: 0;
    text-align: left;
}

.sidebar-shipping-info {
    background: #000;
    color: #fff;
    padding: 10px;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.sidebar-menu {
    list-style: none;
    padding: 0;
}

.sidebar-menu li {
    margin-bottom: 15px;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 8px;
}

.sidebar-menu li a {
    text-decoration: none;
    color: #555;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-menu li a.active {
    color: #000;
    font-weight: bold;
}

/* Contenedor central del producto */
.product-detail-main {
    flex-grow: 1;
}

.detail-product-title {
    font-size: 28px;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.detail-ref {
    text-align: center;
    font-size: 11px;
    color: #999;
    margin-bottom: 30px;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Mitad imagen, mitad datos */
    gap: 40px;
}

/* Galería de fotos */
.main-image-container {
    border: 1px solid #eee;
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
}

.main-image-container img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.thumbnails-container {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 1px solid #eee;
    cursor: pointer;
    transition: border 0.2s;
}

.thumb:hover, .thumb.active {
    border-color: #c5a47e; /* Borde dorado al seleccionar */
}

/* Panel de información (Derecha) */
.detail-info-panel {
    text-align: left;
}

.detail-info-panel h3 {
    font-size: 16px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.detail-description {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}

.detail-price-box {
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.price-label {
    font-size: 16px;
    font-weight: bold;
}

.price-value {
    font-size: 26px;
    font-weight: bold;
    color: #000;
    margin-left: 10px;
}

.iva-notice {
    font-size: 11px;
    color: #999;
    margin-top: 5px;
}

/* Opciones de compra */
.purchase-options label {
    display: block;
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 8px;
}

.detail-select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    margin-bottom: 25px;
    font-size: 14px;
}

.btn-add-to-cart {
    width: 100%;
    background: #000;
    color: #fff;
    padding: 15px;
    border: none;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-add-to-cart:hover {
    background: #333;
}

/* Responsivo */
@media (max-width: 900px) {
    .store-layout-container { flex-direction: column; }
    .store-sidebar { width: 100%; }
    .product-detail-grid { grid-template-columns: 1fr; }
}

.product-link {
    text-decoration: none;
    color: inherit;
    display: block; /* Hace que ocupe todo el espacio del slider */
}

/* POST 2 */
/* --- ESTILOS EXCLUSIVOS PARA MAQUETAR EL POST DEL BLOG --- */
.blog-container {
    max-width: 800px;         /* Evita que el texto se estire infinito en pantallas grandes */
    margin: 60px auto;        /* Centra el artículo y le da aire arriba y abajo */
    padding: 0 25px;          /* Colchón interno para pantallas móviles */
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #333333;
    line-height: 1.8;         /* Espaciado de renglones óptimo para no cansar la vista */
}

.post-header {
    text-align: center;
    margin-bottom: 40px;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 30px;
}

.post-title {
    font-size: 2.2rem;
    color: #111111;
    line-height: 1.3;
    margin-bottom: 15px;
    font-weight: 700;
}

.post-meta {
    font-size: 0.9rem;
    color: #888888;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.post-meta span i {
    color: #c5a47e;           /* Toque de color corporativo elegante */
    margin-right: 5px;
}

.post-content p {
    margin-bottom: 25px;      /* Separación generosa entre párrafos */
    font-size: 1.1rem;
    text-align: justify;      /* Justificado limpio */
}

.post-content .lead-text {
    font-size: 1.25rem;
    color: #555555;
    line-height: 1.8;
    font-style: italic;
}

.post-content h2 {
    font-size: 1.6rem;
    color: #111111;
    margin: 45px 0 20px 0;
    font-weight: 600;
    border-left: 4px solid #c5a47e;
    padding-left: 15px;       /* Línea decorativa al lado del título */
}

/* Caja de Pro-Tip súper estilizada */
.pro-tip-box {
    background-color: #fdfaf6;
    border-left: 4px solid #c5a47e;
    padding: 25px;
    margin: 35px 0;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.pro-tip-box h4 {
    margin: 0 0 10px 0;
    color: #c5a47e;
    font-size: 1.15rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pro-tip-box p {
    margin: 0;
    font-style: italic;
    color: #5d5d5d;
    font-size: 1.05rem;
}

/* ==========================================================================
   SISTEMA DE PAGINACIÓN DE PRODUCTOS (MADA SHOES)
   ========================================================================== */
   .pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px 0 20px 0;
    width: 100%;
    grid-column: 1 / -1;
}

.pagination-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.pagination-buttons button {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    color: #333333;
    padding: 8px 14px;
    font-size: 0.95rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.pagination-buttons button:hover {
    background-color: #fdfaf6;
    border-color: #c5a47e;
    color: #c5a47e;
}

.pagination-buttons button.active {
    background-color: #c5a47e;
    border-color: #c5a47e;
    color: #ffffff;
    font-weight: bold;
}

.pagination-buttons button:disabled {
    background-color: #f5f5f5;
    color: #cccccc;
    border-color: #e0e0e0;
    cursor: not-allowed;
}


        .seo-staircase {
            max-width: 1200px;
            margin: 0 auto;
            padding: 60px 20px 20px 20px;
            font-family: inherit;
        }
        .seo-staircase h1 {
            font-size: 2.2rem;
            color: #333;
            text-align: center;
            font-weight: 700;
            margin-bottom: 50px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .stair-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 40px;
            margin-bottom: 60px;
        }
        /* Fila invertida para el efecto escalera */
        .stair-row.reverse {
            flex-direction: row-reverse;
        }
        .stair-text {
            flex: 1;
            min-width: 300px;
        }
        .stair-text h2 {
            font-size: 1.5rem;
            color: #c5a47e; /* Tu color corporativo dorado/tostado */
            margin-bottom: 15px;
            font-weight: 600;
        }
        .stair-text p {
            font-size: 1.1rem;
            line-height: 1.7;
            color: #555;
        }
        .stair-image {
            flex: 1;
            min-width: 300px;
            text-align: center;
        }
        .stair-image img {
            width: 100%;
            max-width: 500px;
            height: 350px;
            object-fit: cover; /* Para que las fotos queden perfectamente encuadradas */
            border-radius: 8px; /* Un toque redondeado elegante */
            box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Sombra suave de tienda premium */
        }
        /* Adaptación perfecta para pantallas de móviles */
        @media (max-width: 768px) {
            .stair-row, .stair-row.reverse {
                flex-direction: column !important;
                gap: 25px;
                margin-bottom: 40px;
            }
            .seo-staircase h1 {
                font-size: 1.8rem;
                margin-bottom: 30px;
            }
            .stair-image img {
                height: 250px;
            }
        }

        /* ==========================================================================
   ESTILOS SECCIÓN REFUERZO SEO EN EL FOOTER (MADA SHOES)
   ========================================================================== */
.footer-seo-text {
    background-color: #fafafa;
    padding: 50px 40px;
    border-top: 1px solid #eeeeee;
    font-family: inherit;
    box-sizing: border-box;
}

.footer-seo-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-seo-column {
    flex: 1;
    min-width: 280px;
}

.footer-seo-column h4 {
    color: #333333;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-seo-column p {
    color: #666666;
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

.footer-seo-link {
    color: #c5a47e; /* Tu dorado corporativo */
    text-decoration: underline;
    transition: color 0.3s ease;
}

.footer-seo-link:hover {
    color: #333333; /* Oscurece al pasar el ratón */
}

/* RESPONSIVE PARA MÓVILES */
@media (max-width: 768px) {
    .footer-seo-text {
        padding: 40px 20px;
    }
    .footer-seo-container {
        gap: 25px;
    }
    .footer-seo-column {
        text-align: center; /* Centrado más estético en móviles */
    }
}