/*
Theme Name: Aura Beauty Premium
Theme URI: https://aurabeautymakeup.com
Author: Tu Agencia / Equipo de Desarrollo
Description: Tema Custom Minimalista y Premium para Aura Beauty. Stack: PHP, AJAX, SweetAlert2.
Version: 1.0
Text Domain: aurabeauty
*/

:root {
    /* Paleta Premium - Nude, Oro Rosa y Negros Suaves */
    --color-primary: #8A6D4B; /* Tono dorado/bronce */
    --color-bg-light: #FDFBF7; /* Nude muy sutil para fondos */
    --color-text-main: #2C2A29; /* Casi negro para lectura elegante */
    --color-text-muted: #666666;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Montserrat', sans-serif;
    --transition-smooth: all 0.3s ease-in-out;
}

body {
    font-family: var(--font-body);
    color: var(--color-text-main);
    background-color: var(--color-bg-light);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* Reset básico y utilidades irán aquí... */
.site-footer {
    background-color: var(--color-text-main); /* Un gris muy oscuro, casi negro */
    color: var(--color-bg-light); /* Texto claro */
    padding: 80px 0 30px; /* Mucho espacio para respirar */
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 50px;
    margin-bottom: 60px;
}

.widget-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--color-primary); /* El toque dorado/bronce */
    margin-bottom: 20px;
}

ul.clean-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.clean-list li, ul.clean-list a {
    color: #A0A0A0; /* Un gris sutil para no fatigar la vista */
    text-decoration: none;
    margin-bottom: 10px;
    display: block;
    transition: var(--transition-smooth);
}

ul.clean-list a:hover {
    color: var(--color-primary);
}



/* ==========================================================================
   1. UTILIDADES Y CONTENEDORES
   ========================================================================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative; /* Importante para el posicionamiento interno */
    z-index: 2; /* Asegura que el contenido esté por encima de fondos/overlays */
}

/* ==========================================================================
   2. HERO SECTION (Pantalla Principal)
   ========================================================================== */
.hero-section {
    position: relative;
    height: 100vh; /* Ocupa el 100% del alto de la pantalla */
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Imagen temporal de fondo (luego la cambiaremos por la foto de la novia) */
    background-image: url('assets/images/aura-beauty-cosmetic.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(44, 42, 41, 0.4); /* Filtro oscuro para resaltar el texto blanco */
    z-index: 1;
}

.hero-title {
    font-family: var(--font-heading);
    color: #FFFFFF;
    font-size: 3.5rem;
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 20px;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}

.hero-subtitle {
    color: #FDFBF7;
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 40px auto;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   3. BOTONES (Premium y Minimalistas)
   ========================================================================== */
/* Corrección: Eliminar la línea del botón */
.btn-primary {
    display: inline-block;
    background-color: var(--color-primary);
    color: #FFFFFF;
    font-family: var(--font-body);
    font-size: 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 16px 36px;
    border: none;
    cursor: pointer;
    text-decoration: none !important; /* Fuerza la eliminación de la línea */
    transition: var(--transition-smooth);
}

.btn-primary:hover {
    background-color: #72593d; /* Un tono ligeramente más oscuro al pasar el ratón */
    transform: translateY(-2px); /* Pequeña elevación */
}



/* ==========================================================================
   4. HEADER (Cabecera Principal)
   ========================================================================== */
/* Corrección: Header Fijo (Sticky) y fondo translúcido premium */
.site-header {
    position: fixed; /* Cambiado de absolute a fixed */
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 0;
    z-index: 1000;
    background-color: rgba(44, 42, 41, 0.95); /* Fondo oscuro elegante */
    backdrop-filter: blur(10px); /* Efecto de desenfoque moderno */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition-smooth);
}

.header-wrapper {
    display: flex;
    justify-content: space-between; /* Separa Logo, Menú y Botones */
    align-items: center;
}

/* Estilos del Menú */
.site-navigation .nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 35px; /* Espaciado premium entre enlaces */
}

.site-navigation .nav-menu li a {
    text-decoration: none;
    color: #FFFFFF; /* Texto blanco porque está sobre la foto del Hero */
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition-smooth);
}

.site-navigation .nav-menu li a:hover {
    color: var(--color-primary);
}

/* Área Derecha: Idioma y Botón */
.header-actions {
    display: flex;
    align-items: center;
    gap: 25px;
}

.language-selector a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    font-weight: 600;
    transition: var(--transition-smooth);
}

.language-selector a.active, 
.language-selector a:hover {
    color: #FFFFFF;
}




/* ==========================================================================
   5. ABOUT SECTION (Conoce a Aura)
   ========================================================================== */
.section-padding {
    padding: 120px 0;
    background-color: var(--color-bg-light);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas exactas */
    gap: 80px; /* Espacio amplio y elegante entre foto y texto */
    align-items: center;
}

.about-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08); /* Sombra muy sutil */
}

.section-subtitle {
    display: block;
    font-family: var(--font-body);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    margin-bottom: 15px;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: var(--color-text-main);
    margin-bottom: 30px;
    line-height: 1.2;
}

.about-content p {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 25px;
}

.btn-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-main);
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 15px;
    transition: var(--transition-smooth);
}

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

.btn-link .arrow {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.btn-link:hover .arrow {
    transform: translateX(5px);
}

/* ==========================================================================
   6. PREMIUM GALLERY (Masonry Grid)
   ========================================================================== */
.text-center {
    text-align: center;
}

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

/* El truco del Masonry con CSS puro */
.masonry-gallery {
    column-count: 3; /* Tres columnas en escritorio */
    column-gap: 20px;
}

.masonry-item {
    position: relative;
    break-inside: avoid; /* Evita que las fotos se corten a la mitad */
    margin-bottom: 20px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
}

.masonry-item img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}

/* Overlay interactivo al hacer hover */
.gallery-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(138, 109, 75, 0.7); /* Tono primary semi-transparente */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-overlay i {
    color: #FFFFFF;
    font-size: 2rem;
    transform: scale(0.5);
    transition: transform 0.3s ease;
}

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

.masonry-item:hover .gallery-overlay i {
    transform: scale(1); /* Efecto de zoom sutil en el icono */
}

.masonry-item:hover img {
    transform: scale(1.05); /* Efecto de acercamiento en la foto */
}

/* Responsive para tablets y móviles */
@media (max-width: 992px) {
    .masonry-gallery {
        column-count: 2;
    }
}

@media (max-width: 576px) {
    .masonry-gallery {
        column-count: 1;
    }
}






/* ==========================================================================
   7. SERVICES OVERVIEW (Servicios e Iconos)
   ========================================================================== */
.services-overview {
    background-color: #F9F7F3; /* Tono ligeramente distinto para separar secciones */
}

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

.service-card {
    background: #FFFFFF;
    padding: 50px 40px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: var(--transition-smooth);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.service-icon {
    font-size: 3.5rem;
    color: var(--color-primary);
    margin-bottom: 25px;
}

.service-card h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--color-text-main);
}

.service-card p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}


/* ==========================================================================
   8. TESTIMONIALS (Swiper Carousel)
   ========================================================================== */
.testimonials-section {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
}

.testimonial-swiper {
    width: 100%;
    padding-bottom: 60px; /* Espacio inferior para los puntitos */
}

.testimonial-item {
    padding: 0 20px;
    cursor: grab; /* Indica que se puede arrastrar */
}

.testimonial-item:active {
    cursor: grabbing;
}

.testimonial-text {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-style: italic;
    line-height: 1.5;
    max-width: 850px;
    margin: 0 auto 30px;
    color: var(--color-bg-light);
}

.testimonial-author {
    display: block;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    color: var(--color-primary);
    font-weight: 600;
}

/* Personalización de los Puntos (Pagination) de Swiper */
.swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.4) !important;
    width: 10px;
    height: 10px;
    transition: var(--transition-smooth);
}

.swiper-pagination-bullet-active {
    background-color: var(--color-primary) !important;
    transform: scale(1.4);
    opacity: 1 !important;
}

/* Ajustes Responsive */
@media (max-width: 768px) {
    .testimonial-text {
        font-size: 1.3rem;
    }
}





/* ==========================================================================
   9. INTERNAL PAGES & PORTFOLIO FILTERS
   ========================================================================== */
.portfolio-filters {
    display: flex;
    justify-content: center;
    gap: 30px; /* Más espacio para respirar */
    flex-wrap: wrap;
    margin-bottom: 60px;
}

/* Forzar el reseteo del botón por defecto del navegador */
button.btn-filter {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    padding: 10px 5px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    position: relative;
    outline: none;
    transition: var(--transition-smooth);
}

/* Efecto Premium: Subrayado dorado animado desde el centro */
button.btn-filter::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: 0;
    left: 50%;
    background-color: var(--color-primary); /* Color dorado/bronce */
    transition: all 0.3s ease-in-out;
    transform: translateX(-50%);
}

/* Estados Hover y Activo */
button.btn-filter:hover,
button.btn-filter.active {
    color: var(--color-text-main); /* Oscurece el texto sutilmente */
}

/* Expande la línea al pasar el ratón o hacer clic */
button.btn-filter.active::after,
button.btn-filter:hover::after {
    width: 100%;
}

/* Transiciones fluidas para ocultar/mostrar las fotos del portafolio */
.filter-item {
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

.filter-item.hide {
    display: none;
}





/* ==========================================================================
   10. CONTACT PAGE PREMIUM
   ========================================================================== */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.contact-box {
    background-color: var(--color-bg-light);
    padding: 50px 30px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid #EBE4DD;
    transition: var(--transition-smooth);
}

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

.contact-box i {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: 20px;
}

.contact-box h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-text-main);
    margin-bottom: 15px;
}

.contact-box p, .contact-box a {
    color: var(--color-text-muted);
    font-size: 1rem;
    text-decoration: none;
    line-height: 1.6;
    transition: var(--transition-smooth);
}

.contact-box a:hover {
    color: var(--color-primary);
}




/* ==========================================================================
   11. FOOTER PREMIUM REFINEMENTS
   ========================================================================== */
.social-links {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05); /* Fondo oscuro muy sutil */
    color: var(--color-bg-light);
    font-size: 1.5rem; /* Tamaño del icono */
    text-decoration: none !important; /* Forza quitar la línea */
    transition: var(--transition-smooth);
}

.social-links a:hover {
    background-color: var(--color-primary); /* Se pinta de dorado/bronce */
    color: #FFFFFF;
    transform: translateY(-4px); /* Pequeña elevación premium */
}

/* Arreglo visual para el fondo de Privacy Policy */
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
}

.footer-legal a {
    color: #A0A0A0;
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition-smooth);
}

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




/* ==========================================================================
   12. CUSTOM LOGO SIZING
   ========================================================================== */
.custom-logo {
    max-width: 200px;
    height: auto;
    display: block;
    transition: var(--transition-smooth);
}

/* En móviles hacemos el logo un poco más pequeño */
@media (max-width: 768px) {
    .custom-logo {
        max-width: 150px;
    }
}

/* ==========================================================================
   13. PRELOADER PREMIUM (ESTILO EDITORIAL)
   ========================================================================== */
#aura-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-text-main, #1A1A1A); /* Fondo oscuro elegante */
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s cubic-bezier(0.8, 0, 0.2, 1), visibility 0.8s;
}

.preloader-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

/* Efecto de respiración suave en el logo */
.preloader-logo {
    max-width: 180px;
    height: auto;
    animation: pulse-premium 2s infinite ease-in-out;
}

/* Fallback de texto por si no hay logo */
.preloader-text {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: #FFFFFF;
    letter-spacing: 4px;
    text-transform: uppercase;
    animation: pulse-premium 2s infinite ease-in-out;
}

/* Línea de carga ultra delgada, estilo revista de moda */
.preloader-line {
    width: 1px;
    height: 50px;
    background: linear-gradient(to bottom, transparent, var(--color-primary), transparent);
    animation: loading-line 1.5s infinite ease-in-out;
}

/* Fotogramas clave de la animación */
@keyframes pulse-premium {
    0%, 100% { opacity: 0.6; transform: scale(0.98); }
    50% { opacity: 1; transform: scale(1); }
}

@keyframes loading-line {
    0% { transform: scaleY(0); opacity: 0; }
    50% { transform: scaleY(1); opacity: 1; }
    100% { transform: scaleY(0); opacity: 0; }
}

/* Desvanecimiento final */
.preloader-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
}




/* ==========================================================================
   14. DISEÑO RESPONSIVE (MENÚ MÓVIL)
   ========================================================================== */

/* Botón Hamburguesa oculto por defecto */
.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1000;
}

.menu-toggle .bar {
    display: block;
    width: 25px;
    height: 2px;
    background-color: var(--color-primary, #C5A880); /* Líneas doradas premium */
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
}

/* Alineación estructural para Escritorio (Pantallas grandes) */
@media (min-width: 993px) {
    .nav-container {
        display: flex;
        align-items: center;
        gap: 40px;
    }
    .site-navigation .nav-menu {
        display: flex;
        gap: 30px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .header-actions {
        display: flex;
        align-items: center;
        gap: 20px;
    }
}

/* Transformación para Teléfonos y Tablets */
@media (max-width: 992px) {
    .menu-toggle {
        display: block; /* Mostramos el botón hamburguesa */
    }

    /* Ocultamos y estilizamos el contenedor del menú para que caiga de arriba */
    .nav-container {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #1A1A1A; /* Fondo oscuro y elegante */
        flex-direction: column;
        align-items: center;
        padding: 30px 0;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        
        /* Efecto de desvanecimiento y deslizamiento */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: all 0.4s ease;
        z-index: 999;
        display: flex;
    }

    /* Clase activa que inyectará el JavaScript */
    .nav-container.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Reordenamos los elementos internos en modo columna */
    .site-navigation .nav-menu {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        margin-bottom: 25px;
        padding: 0;
    }

    .header-actions {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    /* Magia visual: El botón de hamburguesa se transforma en una "X" al abrirse */
    .menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.is-active .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ==========================================================================
   15. CORRECCIONES DE DISEÑO MÓVIL Y ENLACES
   ========================================================================== */

/* 1. Reparar el color de los enlaces de idioma (EN | ES) */
.lang-switcher a {
    color: #FFFFFF; /* Color blanco por defecto */
    text-decoration: none;
    font-family: var(--font-heading, sans-serif);
    font-weight: 500;
    transition: color 0.3s ease;
}

/* Color dorado cuando pasas el mouse o es el idioma activo */
.lang-switcher a:hover, 
.lang-switcher a.active {
    color: var(--color-primary, #C5A880);
}

/* 2. Blindaje contra desbordamiento horizontal (Elimina el espacio en blanco) */
html, body {
    overflow-x: hidden; /* Prohíbe terminantemente que la pantalla se deslice a los lados */
    width: 100%;
    margin: 0;
    padding: 0;
}

/* 3. Asegurar que el contenedor principal sea 100% adaptable */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; /* Da un margen de seguridad en móviles */
    box-sizing: border-box; /* Evita que el padding rompa el ancho */
}

/* 4. Ajustar el texto gigante de la portada para móviles */
@media (max-width: 768px) {
    .hero-section {
        padding: 120px 20px 80px; /* Más aire alrededor */
    }
    
    /* Obliga al texto a hacerse más pequeño y no empujar la pantalla */
    .hero-section h1, 
    .hero-section h2 {
        font-size: 2.5rem !important; 
        line-height: 1.2;
        word-wrap: break-word; /* Si una palabra es muy larga, la corta */
    }
}






/* ==========================================================================
   16. RESPONSIVE ESTRUCTURAL (CORRECCIÓN EXACTA)
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Centrado Perfecto de las Tarjetas de Servicios */
    .services-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Fuerza el centrado del grupo */
        gap: 30px !important;
    }

    .service-card {
        width: 100% !important;
        max-width: 360px !important; /* Ancho ideal premium para móvil */
        margin: 0 auto !important; /* Margen automático = centrado absoluto */
        box-sizing: border-box !important;
    }

    /* 2. Recuperar la imagen de "Behind the Brand" (About) */
    .about-wrapper, 
    .about-section .container {
        display: flex !important;
        flex-direction: column !important;
    }

    .about-text {
        width: 100% !important;
        padding-right: 0 !important; /* Quitamos el padding de escritorio */
    }

    .about-image {
        display: block !important;
        width: 100% !important;
        min-height: 400px !important; /* ESTA ES LA CLAVE: Evita que se aplaste a 0px */
        margin-top: 40px !important;
        position: relative;
    }

    /* Blindaje por si la imagen es etiqueta <img> o está de fondo */
    .about-image img {
        width: 100% !important;
        height: 100% !important;
        min-height: 400px !important;
        object-fit: cover !important; /* Mantiene la proporción sin deformarse */
        border-radius: 4px; /* Un toque elegante */
    }
}








/* ==========================================================================
   17. REPARACIÓN DEFINITIVA DEL ABOUT EN MÓVIL (BLOCK OVERRIDE)
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Destruir las columnas y forzar apilamiento vertical */
    .about-section .container > div,
    .about-wrapper,
    .about-content,
    .about-grid {
        display: block !important; 
        width: 100% !important;
        grid-template-columns: 1fr !important; /* Por si usamos CSS Grid */
    }

    /* 2. Liberar el texto de su compresión lateral */
    .about-text,
    .about-info,
    .about-section .text-column {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 0 !important;
        margin-bottom: 40px !important; /* Espacio antes de la foto */
    }

    /* 3. Forzar la reaparición de la imagen con medidas estrictas */
    .about-image,
    .about-picture,
    .about-section .image-column {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 450px !important; /* Height fijo estricto en vez de min-height */
        flex-shrink: 0 !important; /* Prohíbe que flexbox lo aplaste a 0px */
        position: relative !important;
    }

    /* 4. Asegurar que la foto cubra el espacio forzado */
    .about-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}





/* ==========================================================================
   18. RESPONSIVE DEL PORTAFOLIO Y FILTROS
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Arreglar los botones de los filtros (All, Bridal, Editorial...) */
    .portfolio-filters {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        margin-bottom: 30px !important;
    }

    .portfolio-filters button {
        margin: 0 !important;
        font-size: 0.9rem !important;
        padding: 8px 16px !important;
    }

    /* 2. Forzar que las fotos ocupen el 100% del ancho del celular (1 sola columna) */
    .portfolio-grid,
    .masonry-grid {
        display: block !important;
        column-count: 1 !important; /* Si usamos columnas CSS */
        width: 100% !important;
    }

    /* 3. Darle margen a cada foto para que no se peguen entre sí */
    .portfolio-item,
    .masonry-item {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
        position: static !important; /* Anula posicionamiento absoluto de librerías JS */
    }

    .portfolio-item img {
        width: 100% !important;
        height: auto !important;
        border-radius: 6px !important; /* Toque elegante en móvil */
    }
}

/* Punto intermedio para Tablets (Pantallas medianas: 2 columnas) */
@media (min-width: 769px) and (max-width: 1024px) {
    .portfolio-grid,
    .masonry-grid {
        column-count: 2 !important;
    }
    .portfolio-item,
    .masonry-item {
        width: 50% !important; /* Ajuste para librerías JS */
    }
}