/* --- ESTILO PARA BOTONES DEL MENÚ DE NAVEGACIÓN --- */
.nav-menu {
    display: flex;
    gap: 10px;
    width: 100%;
    overflow-x: auto;
    /* Scroll horizontal si los botones no caben */
    padding-bottom: 5px;
    /* Espacio para el scroll */
    -webkit-overflow-scrolling: touch;
    /* Scroll suave en iPhone */
}

.nav-menu a {
    flex: 0 0 auto;
    /* No encoger botones */
    padding: 8px 16px;
    font-size: 0.85rem;
    white-space: nowrap;
    /* Que el texto no salte de línea */
    border: 1px solid var(--primary-red);
    /* Borde más fino */
    color: var(--primary-red);
    border-radius: 50px;
    background: white;
    text-transform: uppercase;
    font-weight: 700;
}

.nav-menu a:hover,
.nav-menu a:focus {
    background: var(--primary-red);
    color: #fff;
    box-shadow: 0 4px 16px rgba(150, 0, 24, 0.13);
    border-color: var(--primary-gold);
    outline: none;
}


/* El botón de contacto usa el estilo .btn clásico */
.nav-menu .nav-cta {
    background: var(--primary-red);
    color: white;
}

.nav-menu .nav-cta:hover,
.nav-menu .nav-cta:focus {
    background-color: var(--accent-dark);
    color: #fff;
    transform: translateY(-2px);
}

/* --- PALETA MODERNISTA --- */
:root {
    /* El rojo intenso de tus telas, el alma de la marca */
    --primary-red: #960018;
    /* NUEVO: Color Dorado Principal - Más vibrante y metálico */
    --primary-gold: #D4AF37;
    /* Negro profundo para acentos */
    --accent-dark: #000000;
    /* Fondos: Blanco puro para máxima limpieza */
    --bg-light: #FFFFFF;
    --bg-offwhite: #FFFFFF;
    /* Eliminamos el gris, todo blanco para que se vea limpio */
    /* Textos: Muy oscuros para lectura perfecta */
    --text-body: #1a1a1a;
    --text-dark: #000000;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-body);
    line-height: 1.7;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-dark);
    font-weight: 800;
    letter-spacing: -0.5px;
}

a {
    text-decoration: none;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* --- UTILIDADES Y BOTONES MODERNOS --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
}

.text-center {
    text-align: center;
}

/* Estilo base para los botones */
.btn {
    display: inline-block;
    padding: 15px 35px;
    background-color: var(--primary-red);
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    border: none;
    /* Bordes rectos para look moderno */
    border-radius: 0;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(150, 0, 24, 0.2);
}

.btn:hover {
    background-color: var(--accent-dark);
    transform: translateY(-2px);
}

/* NUEVO: Estilo específico para el botón DORADO de la Hero Section */
.btn-gold-hero {
    /* Degradado dorado para dar volumen y lujo */
    background: linear-gradient(to bottom, #E6C76C 0%, #D4AF37 50%, #B89428 100%);
    color: white;
    /* Sombra dorada brillante en lugar de roja */
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
    /* Texto un poco más grande y brillante */
    font-size: 1rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-gold-hero:hover {
    /* Al pasar el ratón, el dorado se vuelve más intenso */
    background: linear-gradient(to bottom, #F0D37A 0%, #E0BB45 50%, #CCA630 100%);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
    transform: translateY(-2px);
}


/* --- NAVBAR MINIMALISTA --- */
header {
    background-color: white;
    padding: 15px 0;
    /* Un poco más compacto */
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    /* Sombra sutil siempre */
}

.nav-flex {
    display: flex;
    flex-wrap: wrap;
    /* Permite que los elementos bajen si no caben */
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* LOGO EN MÓVIL */
.logo {
    font-size: 1.2rem;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

.logo span {
    color: var(--primary-red);
}

/* --- MEDIA QUERY: PANTALLAS GRANDES (Desktop) --- */
@media (min-width: 992px) {
    .nav-flex {
        flex-wrap: nowrap;
        /* En PC todo en una línea */
    }

    .logo {
        width: auto;
        text-align: left;
        margin-bottom: 0;
        font-size: 1.5rem;
    }

    .nav-menu {
        width: auto;
        justify-content: flex-end;
        overflow-x: visible;
        padding-bottom: 0;
    }

    .nav-menu a {
        padding: 10px 25px;
        font-size: 0.95rem;
        border-width: 2px;
    }
}

.nav-cta {
    /* display: none; Removed to allow visibility on mobile */
    white-space: nowrap;
}

@media(min-width: 768px) {
    .nav-cta {
        display: inline-block;
        padding: 10px 25px;
    }
}

/* --- HAMBURGER MENU STYLES --- */
.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: var(--primary-red);
    transition: all 0.3s ease;
}

@media (max-width: 991px) {
    .hamburger {
        display: flex;
        /* Show only on mobile/tablet */
    }

    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: white;
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        gap: 20px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        /* Hidden by default */
        display: none;
        z-index: 1000;
        border-top: 1px solid #eee;
    }

    .nav-menu.active {
        display: flex;
        /* Show when active */
        animation: slideDown 0.3s ease forwards;
    }

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

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .nav-menu a {
        width: 80%;
        text-align: center;
        border: none;
        background: var(--bg-offwhite);
    }
}


/* --- HERO SECTION MODIFICADA (Imagen de fondo completa) --- */
.hero {
    position: relative;
    background-image: url('assets/img/sofa-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 90vh;
    display: flex;
    align-items: center;
    margin-top: 70px;
}

/* Capa de overlay oscuro UNIFORME */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Un poco más oscuro para que el texto blanco y dorado resalte más */
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

.hero-content {
    /* CAMBIO: Texto blanco puro y brillante */
    color: #FFFFFF;
    max-width: 700px;
    position: relative;
    z-index: 2;
    margin: 0 auto;
    text-align: center;
    /* Sombra suave para que el texto se despegue del fondo */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hero h1 {
    font-size: 3.5rem;
    /* Un poco más grande para impactar */
    color: #FFFFFF;
    line-height: 1.1;
    margin-bottom: 25px;
}

/* CAMBIO: Subrayado moderno DORADO y brillante */
.hero h1 span {
    /* Usamos el color dorado para la sombra interior */
    box-shadow: inset 0 -15px 0 rgba(212, 175, 55, 0.7);
    padding: 0 5px;
}

.hero p {
    font-size: 1.3rem;
    /* Texto blanco puro, no semi-transparente, para máximo brillo */
    color: #FFFFFF;
    margin-bottom: 40px;
    font-weight: 400;
}

/* Ajustes para móvil en la Hero */
@media (max-width: 767px) {
    .hero {
        height: auto;
        padding: 120px 20px;
        margin-top: 0;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero p {
        font-size: 1.1rem;
    }
}

/* --- SECCIONES GENERALES --- */
section {
    padding: 80px 0;
}

.bg-offwhite {
    background-color: var(--bg-offwhite);
}

.section-header {
    margin-bottom: 50px;
    text-align: center;
}

.section-header h2 {
    font-size: 2.2rem;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

/* Pequeño acento rojo minimalista debajo de los títulos */
.section-header h2::after {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background-color: var(--primary-red);
    margin: 15px auto 0;
}

/* --- SERVICIOS "CLEAN" & DETAILED --- */
.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.service-item {
    background: white;
    padding: 30px;
    border-left: 5px solid var(--primary-red);
    /* Borde rojo a la izquierda */
    border-radius: 8px;
    /* Bordes suaves */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    text-align: left;
    /* Alineado a la izquierda */
}

.service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.service-item h3 {
    font-size: 1.25rem;
    margin-bottom: 15px;
    color: var(--text-dark);
    font-weight: 700;
}

.service-item p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}

/* Icon style removal or adjustment if we aren't using big icons above text anymore, 
   but keeping the class generic just in case. 
   The new design doesn't emphasize top icons as much, focusing on text structure. */


/* --- MATTRESS CTA SECTION --- */
.cta-mattress {
    position: relative;
    background-image: url('assets/img/colchones-hero-premium.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* Parallax effect simple */
    padding: 100px 0;
    text-align: center;
    color: white;
}

.cta-mattress::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    /* Oscurecer imagen para leer texto */
    z-index: 1;
}

.cta-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.cta-content h2 {
    font-size: 2.5rem;
    color: white;
    margin-bottom: 20px;
}

.cta-content p {
    font-size: 1.2rem;
    color: #f0f0f0;
    margin-bottom: 30px;
}


/* --- PROYECTOS DESTACADOS (Full Width Moderno) --- */
.projects-section {
    padding-bottom: 120px;
    /* Increased padding to separate button from next section */
}

.project-showcase {
    display: grid;
    /* Grid automático: se adapta al tamaño de la pantalla */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.project-item {
    position: relative;
    height: 400px;
    overflow: hidden;
}

.project-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.9);
    transition: transform 0.6s ease, filter 0.6s ease;
}

.project-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: white;
    transform: translateY(100px);
    /* Oculto inicialmente */
    opacity: 0;
    transition: all 0.4s ease;
}

.project-card {
    background: #fff;
    border: none;
    /* Removed hard border for cleaner look */
    border-radius: 16px;
    /* Rounded corners as requested */
    overflow: hidden;
    /* Ensures image respects border radius */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    /* Softer, premium shadow */
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.card-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

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

.project-card:hover .card-image img {
    transform: scale(1.05);
    /* Zoom suave al pasar el ratón */
}

.project-item:hover img {
    transform: scale(1.05);
    filter: brightness(1);
}

.project-item:hover .project-info {
    transform: translateY(0);
    opacity: 1;
}

.project-info h3 {
    color: white;
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.project-info p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

/* --- CONTACTO Y HORARIO --- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    align-items: center;
}

/* Etiqueta dorada sobre la imagen */
.badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: var(--primary-gold);
    color: white;
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.card-content {
    padding: 25px;
    text-align: left;
    border-bottom: 3px solid transparent;
    /* Preparado para el hover */
    transition: border-color 0.3s ease;
    flex-grow: 1;
    /* Hace que todas las tarjetas tengan misma altura */
    display: flex;
    flex-direction: column;
}

.project-card:hover .card-content {
    border-bottom-color: var(--primary-red);
}

.card-content h3 {
    font-size: 1.25rem;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.project-desc {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
    flex-grow: 1;
}

.text-link {
    color: var(--primary-red);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.text-link:hover {
    color: var(--primary-gold);
}

/* Button Outline Gold - Elegant Style */
.btn-outline-gold {
    background: transparent;
    border: 2px solid var(--primary-gold);
    color: var(--text-dark);
    padding: 15px 40px;
    font-weight: 700;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-size: 0.9rem;
    display: inline-block;
    border-radius: 4px;
}

.btn-outline-gold:hover {
    background: var(--primary-gold);
    color: white;
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
    transform: translateY(-2px);
}

/* Button White & Gold (Budget Section) */
.btn-white-gold {
    background: white;
    border: 2px solid var(--primary-gold);
    color: var(--primary-gold);
    padding: 15px 35px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-white-gold:hover {
    background: var(--primary-gold);
    color: white;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
    transform: translateY(-2px);
}


/* --- 3. ESTILOS NUEVA SECCIÓN SEO --- */
.seo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

.seo-text-block h2 {
    font-size: 2.5rem;
    margin-bottom: 25px;
    color: var(--accent-dark);
    font-weight: 800;
    /* Extra bold */
    line-height: 1.2;
}

.seo-text-block p {
    margin-bottom: 15px;
    font-size: 1.05rem;
}

.seo-list {
    margin-top: 20px;
}

.seo-list li {
    margin-bottom: 10px;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.seo-list i {
    color: var(--primary-gold);
    /* Check dorado */
}

/* Caja visual lateral */
/* Caja visual lateral */
.visual-box {
    background: white;
    color: var(--text-body);
    padding: 30px;
    border: 2px solid var(--primary-gold);
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    position: relative;
    border-radius: 8px;
}

.visual-box h3 {
    color: var(--accent-dark);
    font-size: 2rem;
    margin-bottom: 25px;
    font-weight: 700;
}

.visual-box p {
    color: var(--text-body);
    margin-bottom: 35px;
    font-size: 1.1rem;
    line-height: 1.8;
}

@media (min-width: 768px) {
    .seo-grid {
        grid-template-columns: 1.5fr 1fr;
        /* Más espacio al texto */
    }
}

.info-card {
    background: white;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.info-card h3 {
    margin-bottom: 30px;
    color: var(--accent-dark);
}

.schedule-list li,
.contact-list li {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    color: var(--text-dark);
    font-weight: 600;
}


.schedule-list li span {
    font-weight: 400;
    color: var(--text-body);
    margin-left: auto;
}

/* --- TELAS SECTION (Nuevo) --- */
.telas-section {
    padding: 80px 0;
}

.telas-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

.telas-image {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    max-width: 85%;
    /* Reduced size */
    margin: 0 auto;
    /* Center if smaller */
}

.telas-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.telas-image:hover img {
    transform: scale(1.03);
}

.telas-content h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
    color: var(--accent-dark);
}

.telas-content p {
    margin-bottom: 15px;
    font-size: 1.05rem;
    color: #555;
}

.telas-list {
    margin-top: 25px;
}

.telas-list li {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.telas-list i {
    color: var(--primary-red);
    font-size: 1.1rem;
    margin-top: 4px;
}

@media (min-width: 992px) {
    .telas-grid {
        grid-template-columns: 1fr 1fr;
        /* 50% image, 50% text */
        gap: 60px;
    }

    /* Order: Image Left, Text Right is default in grid, so no change needed unless we want to swap */
}

/* --- ESTILOS PÁGINA PROYECTOS --- */

/* Hero específico para proyectos (si se quiere distinta imagen) */
.hero-projects {
    background-image: url('assets/img/sofa-background.png');
    /* Puedes cambiar esta imagen */
    background-position: center;
}

/* Galería tipo Masonry (Columnas) */
.gallery-container {
    padding: 60px 0;
}


.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 992px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}

.gallery-item {
    /* break-inside: avoid; */
    margin-bottom: 0;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-color: #f0f0f0;
    /* Color de fondo mientras carga */
    min-height: 200px;
    /* Altura mínima para evitar colapso antes de cargar */
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.gallery-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    opacity: 0;
    /* Oculto inicialmente para el efecto fade-in */
    transition: opacity 0.6s ease;
}

.gallery-item img.loaded {
    opacity: 1;
}

/* Overlay opcional con texto al pasar el mouse */
.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: white;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay h4 {
    font-size: 1.1rem;
    color: white;
    margin-bottom: 5px;
}


.contact-list i {
    color: var(--primary-red);
    margin-right: 15px;
    margin-top: 5px;
}

/* --- FOOTER --- */
footer {
    background: var(--text-dark);
    color: #aaa;
    padding: 30px 0;
    text-align: center;
    font-size: 0.85rem;
}

/* --- WHATSAPP MODERNO --- */
.whatsapp-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background-color: #25D366;
    color: white;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
    z-index: 999;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.whatsapp-btn:hover {
    transform: scale(1.1);
}

/* --- RESPONSIVE MEDIA QUERIES --- */
@media (min-width: 768px) {
    .hero h1 {
        font-size: 4rem;
    }

    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .project-showcase {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {

    /* En pantallas grandes, las imágenes de proyectos se ven espectaculares en 3 columnas */
    .project-showcase {
        grid-template-columns: repeat(3, 1fr);
    }

    .project-item {
        height: 500px;
    }
}

/* --- SEO SECTION HIGHLIGHTS --- */
.experience-highlight {
    display: block;
    font-size: 4rem;
    font-weight: 800;
    color: var(--primary-red);
    line-height: 1.1;
    margin: 20px 0;
    text-transform: uppercase;
    letter-spacing: -1px;
}

@media (max-width: 767px) {
    .experience-highlight {
        font-size: 2.5rem;
    }
}

/* --- EXCELENCIA PROFESIONAL SECTION --- */
.excellence-section {
    background-color: white;
    padding: 100px 0;
    text-align: center;
}

.separator-red {
    width: 60px;
    height: 4px;
    background-color: var(--primary-red);
    margin: 20px auto 30px;
    border-radius: 2px;
}

.excellence-subtitle {
    max-width: 700px;
    margin: 0 auto 60px;
    color: #666;
    font-size: 1.1rem;
    line-height: 1.6;
}

.excellence-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media (min-width: 900px) {
    .excellence-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 50px;
    }
}

.excellence-card {
    padding: 10px;
    transition: transform 0.3s ease;
}

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

.icon-wrapper {
    margin-bottom: 25px;
}

.icon-wrapper i {
    font-size: 3rem;
    color: var(--primary-red);
    /* Icon Shadow for depth */
    filter: drop-shadow(0 4px 6px rgba(150, 0, 24, 0.2));
}

.excellence-card h3 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--text-dark);
}

.excellence-card p {
    font-size: 1rem;
    color: #555;
    line-height: 1.7;
    max-width: 320px;
    margin: 0 auto;
}

/* --- NEW FOOTER STYLES --- */
.main-footer {
    background-color: var(--accent-dark);
    color: white;
    padding: 60px 0 30px;
    margin-top: 0;
    border-top: 4px solid var(--primary-gold);
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    text-align: center;
}

.footer-brand h4 {
    color: white;
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.footer-brand span {
    color: var(--primary-gold);
}

.footer-brand p {
    color: #ccc;
    font-size: 0.9rem;
    max-width: 300px;
    margin: 0 auto;
}

.footer-links {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.footer-links a {
    color: #ddd;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 2px;
}

.footer-links a:hover {
    color: var(--primary-gold);
}

.footer-links a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--primary-gold);
    transition: width 0.3s ease;
}

.footer-links a:hover::after {
    width: 100%;
}

.footer-credit {
    text-align: right;
    font-size: 0.85rem;
    color: #888;
}

.paniweb-credit {
    margin-top: 5px;
    font-size: 0.75rem;
    color: #666;
}

.paniweb-credit a {
    color: #888;
    font-weight: 700;
    transition: all 0.3s ease;
}

.paniweb-credit a:hover {
    color: var(--primary-gold);
    text-decoration: none;
}

@media (min-width: 768px) {
    .footer-content {
        text-align: left;
    }

    .footer-brand p {
        margin: 0;
    }
}

@media (max-width: 767px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-credit {
        text-align: center;
    }
}


/* --- COOKIE BANNER --- */
.cookie-banner {
    position: fixed;
    bottom: -100px;
    left: 0;
    width: 100%;
    background-color: rgba(26, 26, 26, 0.95);
    color: white;
    padding: 20px;
    z-index: 9999;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    border-top: 2px solid var(--primary-gold);
    transition: bottom 0.5s ease;
}

.cookie-banner.show {
    bottom: 0;
}

.cookie-content {
    max-width: 1100px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.cookie-content p {
    margin: 0;
    font-size: 0.9rem;
    flex: 1;
}

.cookie-buttons {
    display: flex;
    align-items: center;
    gap: 15px;
}

.btn-gold-sm {
    background: var(--primary-gold);
    color: white;
    padding: 8px 20px;
    font-size: 0.8rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.btn-gold-sm:hover {
    background: white;
    color: var(--primary-gold);
}

.cookie-link {
    color: #ccc;
    font-size: 0.85rem;
    text-decoration: underline;
}

.cookie-link:hover {
    color: var(--primary-gold);
}

@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }
}

/* --- NUEVA SECCIÓN COLCHONES A MEDIDA --- */
.mattress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    align-items: flex-start;
}

/* Ensure mattress-card has consistent styling */
.mattress-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Ensure full height in grid */
}

.mattress-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.mattress-card.featured {
    border: 2px solid var(--primary-gold);
    transform: scale(1.02);
    z-index: 2;
}

.mattress-card.featured:hover {
    transform: scale(1.02) translateY(-10px);
}

.best-choice {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-gold);
    color: white;
    padding: 5px 15px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 0 0 8px 8px;
    z-index: 10;
}

/* Ensure image container has specific height */
.mattress-image {
    position: relative;
    height: 220px;
    background-color: #f9f9f9;
    overflow: hidden;
    flex-shrink: 0;
    /* Prevent shrinking */
}

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

.mattress-card:hover .mattress-image img {
    transform: scale(1.1);
}

.thickness-badge {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.8);
    color: var(--primary-gold);
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.9rem;
}

.mattress-content {
    padding: 25px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.mattress-content h3 {
    margin-bottom: 10px;
    font-size: 1.4rem;
    color: var(--text-dark);
}

.mattress-content p {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 20px;
    flex-grow: 1;
}

@media (max-width: 991px) {
    .mattress-card.featured {
        transform: scale(1);
    }

    .mattress-card.featured:hover {
        transform: translateY(-10px);
    }
}

/* --- ESTILOS RESPONSIVE OPTIMIZADOS (Colchones) --- */

/* Ajuste Grid Colchones para móviles pequeños */
.mattress-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* Bajado de 300px a 280px */
}

/* Consult Section (Confort a Medida) */
.consult-box {
    display: flex;
    gap: 40px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
    padding: 20px;
    /* Reduced specific padding */
}

.consult-text {
    flex: 1;
}

.consult-image-wrapper {
    flex: 1;
}

.consult-image {
    border-radius: 12px;
    height: 400px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.consult-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-header.text-left {
    text-align: left;
    margin-bottom: 30px;
}

.consult-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
}

.c-feature {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    box-shadow: none;
    padding: 0;
    background: transparent;
}

.c-feature i {
    font-size: 1.8rem;
    color: var(--primary-gold);
    margin-top: 5px;
    min-width: 30px;
    /* Ensure alignment */
}

.c-feature h4 {
    margin-bottom: 5px;
    font-size: 1.1rem;
    color: var(--text-dark);
}

.c-feature p {
    font-size: 0.95rem;
    color: #666;
    margin: 0;
}

/* --- MEDIA QUERIES PARA MÓVIL --- */
@media (max-width: 991px) {
    .consult-box {
        flex-direction: column;
        padding: 0;
    }

    .section-header.text-left {
        text-align: center;
        /* Centrar textos en móvil */
    }

    .consult-features {
        align-items: flex-start;
        /* Mantener items alineados a la izquierda o centro si se prefiere */
        max-width: 500px;
        margin: 0 auto 40px;
        /* Centrar el bloque y dar espacio abajo */
    }

    .consult-image {
        height: 300px;
        /* Menor altura en tablet/móvil */
    }
}

@media (max-width: 576px) {
    .mattress-grid {
        gap: 20px;
        /* Menor gap en móviles */
    }

    .hero h1 {
        font-size: 2.2rem;
        /* Ajuste fino */
    }

    .section-header h2 {
        font-size: 1.8rem;
    }

    .consult-image {
        height: 250px;
    }
}