/* Tipografía clásica pero legible */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@300;400;600&display=swap');

/* ====================================
 * HEADER Y NAVEGACIÓN
 * ==================================== */

.header-main {
    /* bg-navy shadow-lg fixed w-full z-10 */
    background-color: #1e293b; /* Reemplazo de bg-navy (slate-900) */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Reemplazo de shadow-lg */
    position: fixed;
    width: 100%;
    z-index: 100;
}

.header-container {
    /* max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 */
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .header-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .header-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.header-content-wrapper {
    /* flex items-center justify-between h-16 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
}

.header-logo {
    /* flex items-center */
    display: flex;
    align-items: center;
}

.header-logo-link {
    /* text-2xl header-font font-bold text-cream transition duration-300 */
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    color: #f8fafc; /* Reemplazo de text-cream (slate-50) */
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.header-logo-image {
    /* h-10 w-auto */
    height: 6.5rem;
    width: auto;
    line-height: 2rem;
    font-weight: 700;
}

.header-logo-link:hover {
    /* hover:text-gold */
    color: #ca8a04; /* Reemplazo de text-gold (amber-600) */
}

.nav-desktop {
    /* hidden md:block */
    display: none;
}

@media (min-width: 768px) {
    .nav-desktop {
        display: block;
    }
}

.nav-menu-list {
    /* ml-10 flex items-baseline space-x-4 */
    margin-left: 2.5rem;
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.nav-link {
    /* text-cream px-3 py-2 rounded-md text-sm font-medium transition duration-300 */
    color: #f8fafc;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition-duration: 300ms;
}

.nav-link:hover {
    /* hover:text-gold */
    color: #ca8a04;
}

.btn-cta {
    /* bg-gold text-navy hover:bg-yellow-600 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 shadow-lg */
    background-color: #ca8a04;
    color: #1e293b;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    transition-duration: 300ms;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.btn-cta:hover {
    /* hover:bg-yellow-600 */
    background-color: #d97706;
}

.nav-mobile-button-wrapper {
    /* md:hidden */
    display: block;
}

@media (min-width: 768px) {
    .nav-mobile-button-wrapper {
        display: none;
    }
}

.btn-mobile-menu {
    /* inline-flex items-center justify-center p-2 rounded-md text-cream hover:text-gold hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 0.375rem;
    color: #f8fafc;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.btn-mobile-menu:hover {
    color: #ca8a04;
    background-color: #374151;
}

.btn-mobile-menu:focus {
    outline: 2px solid white;
    outline-offset: 2px;
}

.icon-menu {
    /* h-6 w-6 */
    height: 1.5rem;
    width: 1.5rem;
}

.nav-mobile-menu {
    /* hidden md:hidden */
    position: absolute;
    top: 4rem;
    left: 0;
    width: 100%;
    background: #1e293b;
    z-index: 999;

}

.nav-mobile-list {
    /* px-2 pt-2 pb-3 space-y-1 sm:px-3 */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

@media (min-width: 640px) {
    .nav-mobile-list {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

.nav-mobile-link {
    /* text-cream hover:bg-gray-700 hover:text-gold block px-3 py-2 rounded-md text-base font-medium */
    color: #f8fafc;
    display: block;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 0.375rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
}

.nav-mobile-link:hover {
    background-color: #374151;
    color: #ca8a04;
}

.btn-cta-mobile {
    /* bg-gold text-navy hover:bg-yellow-600 block px-3 py-2 mt-2 rounded-full text-base font-semibold text-center */
    background-color: #ca8a04;
    color: #1e293b;
    display: block;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-top: 0.5rem;
    border-radius: 9999px;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-align: center;
}

.btn-cta-mobile:hover {
    background-color: #d97706;
}

/* ====================================
 * SECCIONES DE CONTENIDO
 * ==================================== */

.section-container {
    /* max-w-7xl mx-auto px-6 lg:px-8 */
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 1024px) {
    .section-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.section-container-sm {
    /* max-w-5xl mx-auto px-6 lg:px-8 */
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 1024px) {
    .section-container-sm {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.section-title {
    /* header-font text-4xl font-bold mb-4 */
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.section-divider {
    /* h-1 w-24 mx-auto mb-10 rounded */
    height: 0.25rem;
    width: 6rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5rem;
    border-radius: 0.25rem;
    background-color: #ca8a04; /* bg-gold */
}

/* --- HERO SECTION --- */

.hero-section {
    /* pt-16 bg-navy text-cream relative overflow-hidden */
    padding-top: 4rem;
    background-color: #1e293b;
    color: #f8fafc;
    position: relative;
    overflow: hidden;
}

.hero-background {
    /* absolute opacity-40 inset-0 bg-cover bg-center */
    position: absolute;
    opacity: 0.4;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    /* --- CAMBIO AQUÍ: AJUSTAR EL SEGUNDO VALOR PARA MOVER HACIA ARRIBA --- */
    background-position: center top 12%;
    background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .hero-background {
    background-position: center 15%; /* prueba 10% - 30% si quieres ajustar */
  }
}

.header-main {
    touch-action: manipulation;
}

.hero-content {
    /* container mx-auto px-6 py-24 text-center relative z-10 */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 6rem;
    padding-bottom: 6rem;
    text-align: center;
    position: relative;
    z-index: 10;
}

.hero-title {
    /* header-font text-5xl sm:text-7xl font-extrabold mb-4 leading-tight */
    font-size: 3rem;
    line-height: 1;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.25;
}

@media (min-width: 640px) {
    .hero-title {
        font-size: 4.5rem;
        line-height: 1;
    }
}

.hero-subtitle {
    /* text-xl sm:text-3xl mb-8 font-light text-gold font-bold */
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-bottom: 2rem;
    font-weight: 300;
    color: #ca8a04;
    font-weight: 700;
}

@media (min-width: 640px) {
    .hero-subtitle {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
}

.hero-description {
    /* text-lg sm:text-xl mb-12 font-light text-cream/90 max-w-2xl mx-auto */
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin-bottom: 3rem;
    font-weight: 300;
    color: rgba(248, 250, 252, 0.9);
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 640px) {
    .hero-description {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
}

.btn-cta-lg {
     background-color: #ca8a04;
    color: #1e293b;
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-weight: 700;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transition: 300ms;
    
    /* 🔧 MEJORAS */
    white-space: normal;
    text-align: center;
    font-size: clamp(1rem, 4vw, 1.4rem);
    line-height: 1.3;
    max-width: 100%;
}

.btn-cta-lg:hover {
    background-color: #d97706;
    transform: scale(1.05);
}

/* --- HISTORY SECTION --- */

.section-history {
    /* py-20 bg-cream */
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: #cacaca;
}

.history-content-wrapper {
    /* md:flex md:space-x-12 items-start */
    display: block;
}

@media (min-width: 768px) {
    .history-content-wrapper {
        display: flex;
        /* --- CAMBIO AQUÍ: DE 3rem a 5rem para más espacio --- */
        gap: 6rem; 
        /* ---------------------------------------------------- */
        align-items: flex-start;
    }
}

.history-text-col {
    /* md:w-1/2 mb-8 md:mb-0 text-left */
    margin-bottom: 2rem;
    text-align: left;
}

@media (min-width: 768px) {
    .history-text-col {
        width: 50%;
        margin-bottom: 0;
    }
}

/* Busca este bloque en tu style.css y modifícalo */
.history-video-col {
    /* md:w-1/2 */
    width: 100%;
    position: relative;
}

@media (min-width: 768px) {
    .history-video-col {
        /* --- CAMBIO AQUÍ: Reducir a 40% --- */
        width: 30%; 
        margin-left: 40px;
        /* ---------------------------------- */
    }
}

/* NOTA: También podrías necesitar ajustar el ancho de la columna de texto: */
@media (min-width: 768px) {
    .history-text-col {
        /* Si el video es 40%, el texto debe ser 60% menos el gap (espacio entre ellos). */
        width: 58%; /* Dejamos un 2% o 3% de margen para el gap */
    }
}

/* ⚠️ Crucial: Asegúrate de que el contenedor de ambos elementos tenga 'display: flex' */
@media (min-width: 768px) {
    .history-content-wrapper {
        display: flex;
        gap: 30px; /* Esto crea el espacio entre el texto y el video */
        align-items: flex-start; /* Para que ambos empiecen arriba */
        text-align: left; /* Para que el texto de la izquierda no esté centrado */
    }
}

/* 2. La capa de superposición (oscuro semitransparente) */
.volume-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Fondo semitransparente oscuro para que el botón resalte */
    background-color: rgba(0, 0, 0, 0.6); 
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 20; 
    transition: opacity 0.3s ease;
}

/* 3. El BOTÓN que el usuario debe clickear */
.activate-btn {
    /* Diseño principal del botón */
    background-color: #ffc107; /* Color Amarillo/Dorado para que destaque (tu color 'gold') */
    color: #1e293b; /* Color 'navy' para el texto */
    border: none;
    border-radius: 12px; /* Esquinas ligeramente más redondeadas */
    padding: 15px 30px; /* Mayor padding para que sea grande */
    
    /* Disposición interna (Icono y texto) */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700; /* Texto en negrita */
    font-size: 1.1rem; /* Fuente ligeramente más grande */
    gap: 8px; /* Espaciado entre el icono y el texto */
    cursor: pointer;
    
    /* Sombra para que "flote" y parezca interactivo */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4); 
    
    /* Transición al pasar el mouse para feedback visual */
    transition: background-color 0.2s ease, transform 0.1s ease;
}

/* 4. Efecto Hover (al pasar el ratón) */
.activate-btn:hover {
    background-color: #ffd700; /* Tono de dorado un poco más claro */
    transform: translateY(-2px); /* Un ligero desplazamiento hacia arriba */
}

/* 5. Estilos del texto e icono (opcional pero limpio) */
.activate-btn p {
    margin: 0; /* Asegura que no haya márgenes no deseados en el texto */
    line-height: 1;
}

.activate-btn svg {
    /* Asegura que el ícono sea de un tamaño decente */
    width: 35px;
    height: 35px;
    stroke-width: 2;
}

.paragraph-text {
    /* mb-4 text-gray-700 leading-relaxed */
    margin-bottom: 1rem;
    color: #4b5563;
    line-height: 1.625;
}

.paragraph-text-highlight {
    /* mb-4 text-gray-700 leading-relaxed font-semibold text-navy */
    margin-bottom: 1rem;
    color: #4b5563;
    line-height: 1.625;
    font-weight: 600;
    color: #1e293b;
}

.list-check {
    /* list-disc list-inside text-gray-700 space-y-2 mt-4 font-medium */
    list-style-type: disc;
    list-style-position: inside;
    color: #4b5563;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-weight: 500;
}

/* --- SERVICES SECTION --- */

.section-services {
    /* py-20 bg-navy text-cream */
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: #1e293b;
    color: #f8fafc;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 20px;
    position: relative;
}

/* 💻 Vista Desktop (768px y más) */
@media (min-width: 768px) {
    /* 1. ESTADO INICIAL (Cuando el panel está oculto) */
    .services-grid {
        display: flex; /* Aseguramos que las tarjetas se alineen horizontalmente */
        flex-direction: row;
        justify-content: space-between; /* Espacio entre ellas si no están en 'active-layout' */
        align-items: flex-start; /* Alinea todo arriba inicialmente */
    }
    
    /* 2. ESTADO ACTIVO (Cuando se hace clic) */
    .services-grid.active-layout { 
        display: grid;
        grid-template-columns: 1.5fr 1fr; /* Tarjetas (izquierda) | Visor Grande (derecha) */
        gap: 40px; 
        
        /* 🔥 CLAVE: CENTRADO VERTICAL DEL PANEL Y TARJETAS */
        align-items: center; /* Centra verticalmente los elementos de las dos columnas */
    }
    
    /* 3. Comportamiento de las Tarjetas dentro del Layout Activo */
    .services-content-wrapper { 
        display: flex;
        flex-direction: column; /* Apila las 3 tarjetas en la columna izquierda */
        gap: 20px;
    }
    
    /* 4. El panel de servicio en modo activo */
    #service-panel.show {
        grid-column: 2 / 3;
        /* Ya no necesitas grid-row: 1 / 3 si usas align-items: center en el padre. */
        grid-row: auto; 
    }
}

/* PANEL CENTRAL */
#service-panel {
    display: none; /* Sigue oculto por defecto */
    width: 100%; /* Ocupa el 100% de su contenedor de grilla */
    height: auto; /* Altura automática para la imagen */
    grid-column: 1 / -1; /* Ocupa todo el ancho en móvil */
    background: #1f2937; /* Fondo sutil para el visor */
    border-radius: 12px;
    border: 2px solid #ca8a04;
    padding: 20px; /* Más padding para la imagen */
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
    transition: opacity 0.4s ease;
    z-index: 20;
    position: relative;
}

/* Mostrarlo */
#service-panel.show {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 768px) {
    /* En desktop, el panel solo ocupa la columna de la derecha */
    #service-panel.show {
        grid-column: 2 / 3;
        grid-row: 1 / 3; /* Ocupa varias filas si es necesario */
    }
}

.services-card-group,
.services-grid-wrapper { /* Asume que este es el contenedor directo de las 3 tarjetas */
    /* Limita el ancho máximo para que no se extienda por toda la pantalla */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 26rem; /* Esto es equivalente a 'max-w-md' o 'max-w-lg' en Tailwind */
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .services-card-group,
    .services-grid-wrapper {
        max-width: none; /* Desactivar el límite en desktop para el diseño de 2 columnas */
        padding-left: 0;
        padding-right: 0;
    }
}  

/* Imagen dentro del panel */
#panel-image {
    width: 100%;
    /* Altura definida para que se vea más grande */
    height: 300px; 
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    /* La transición de flip es la misma */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; 
}

/* Etiqueta de la imagen (Ej. 'Tela Principal') */
#panel-caption {
    margin-top: 10px;
    color: #f8fafc;
    font-size: 0.9rem;
}

/* Estilo para activar el flip */
.flip {
    transform: rotateY(90deg) scale(0.9);
    opacity: 0;
}

.service-card-1,
.service-card-2,
.service-card-3 {
    max-width: 37rem;
    margin-left: auto;
    margin-right: auto;
    flex: 1;
    padding: 2rem;
    background: #1f2937;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    position: relative;
    border-top: 4px solid #ca8a04;
    transition: 0.4s ease;
}

.service-card-1.active,
.service-card-2.active,
.service-card-3.active {
    /* Eliminamos 'flex: 2' para mantener el ancho de la grilla */
    border-color: #ca8a04; 
    transform: translateY(-5px); /* Pequeño efecto de elevación al activar */
}

.service-content {
    display: none;
    position: absolute;
    bottom: -180px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid #007bff;
    gap: 10px;
    width: 260px;
    height: 150px;
    justify-content: center;
    align-items: center;
}

.service-card-1.active .service-content,
.service-card-2.active .service-content,
.service-card-3.active .service-content {
    display: flex;
}

.service-content img {
    width: 45%;
    border-radius: 6px;
}

/* 📱 Responsive (media (max-width: 768px)) */
@media (max-width: 768px) {
   
    /* El contenedor principal de la grilla */
.services-grid {
    flex-direction: column; /* Asegura el apilamiento vertical */
    gap: 14px;
        /* Añadir alineación para centrar las tarjetas que tienen max-width */
        align-items: center; 
    }
    .service-content {
    position: relative; /* Cambia a relative para que ocupe espacio si se muestra */
    bottom: 0;
    margin-top: 15px;
    /* Y lo más importante: debe estar en display: none */
    display: none; 
    }
}

.service-icon {
    /* text-gold mb-4 mx-auto */
    color: #ca8a04;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
}

.icon-lg {
    /* h-12 w-12 mx-auto */
    height: 4rem;
    width: 5rem;
    margin-left: auto;
    margin-right: auto;
}

.card-title {
    /* text-2xl font-semibold mb-3 header-font text-cream */
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #f8fafc;
}

.card-text {
    /* text-gray-400 */
    color: #9ca3af;
}

.card-text-margin {
    /* mb-4 */
    margin-bottom: 1rem;
}

.btn-secondary {
    /* text-gold border border-gold hover:bg-gold hover:text-navy text-sm px-4 py-2 rounded-full transition duration-300 inline-block font-semibold */
    color: #ca8a04;
    border: 1px solid #ca8a04;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 9999px;
    transition-duration: 300ms;
    display: inline-block;
    font-weight: 600;
}

.btn-secondary:hover {
    background-color: #ca8a04;
    color: #1e293b;
}

.btn-view-service{
display:inline-block;
margin-top:14px;
padding:8px 14px;
font-size:13px;
font-weight:600;

color:#1e293b;
background:#facc15;

border-radius:6px;
text-decoration:none;

transition:all 0.25s ease;
cursor:pointer;
}

.btn-view-service:hover{
background:#eab308;
transform:translateY(-2px);
}

.tap-indicator{
font-size:17px;
opacity:0.7;
margin-top:6px;
}

/* --- MATERIALS SECTION --- */

.section-materials {
    /* py-20 bg-gray-100 */
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: #cacaca;
}

.paragraph-text-max-w {
    /* mb-12 text-gray-700 max-w-3xl mx-auto */
    margin-bottom: 3rem;
    color: #4b5563;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

.materials-grid {
    /* grid grid-cols-2 md:grid-cols-5 gap-6 */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .materials-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.material-item {
    /* p-4 bg-white rounded-xl shadow-lg border-b-4 border-navy */
    padding: 1rem;
    background-color: #e7e7e7;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-bottom: 4px solid #1e293b;
}

.material-image {
    /* w-full h-auto rounded-md mb-3 */
    width: 100%;
    height: auto;
    border-radius: 0.375rem;
    margin-bottom: 0.75rem;
}

.material-title {
    /* font-semibold text-navy */
    font-weight: 600;
    color: #1e293b;
}

.material-subtitle {
    /* text-xs text-gray-500 */
    font-size: 0.75rem;
    line-height: 1rem;
    color: #6b7280;
}

/* --- INSPIRATION SECTION --- */

.section-inspiration {
    /* py-20 bg-navy text-cream */
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: #1e293b;
    color: #f8fafc;
}

.paragraph-text-secondary {
    /* mb-12 text-gray-400 max-w-3xl mx-auto */
    margin-bottom: 3rem;
    color: #9ca3af;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

.inspiration-subtitle {
    /* header-font text-2xl font-bold mb-6 text-gold */
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #ca8a04;
}

.inspiration-grid-male,
.inspiration-grid-female {
    /* grid grid-cols-2 md:grid-cols-4 gap-4 */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 768px) {
    .inspiration-grid-male,
    .inspiration-grid-female {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.inspiration-grid-male {
    /* mb-12 */
    margin-bottom: 3rem;
}

.inspiration-item {
    /* bg-gray-800 p-4 rounded-xl shadow-xl transition duration-300 */
    background-color: #1f2937;
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transition-duration: 300ms;
}

.inspiration-item:hover {
    /* hover:shadow-2xl */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.inspiration-image {
    /* w-full rounded-md mb-3 */
    width: 100%;
    border-radius: 0.375rem;
    margin-bottom: 0.75rem;
}

.inspiration-caption {
    /* text-sm font-medium */
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
}

/* --- GALLERY SECTION --- */

.section-gallery {
    /* py-20 bg-cream */
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: #cacaca;
}

.gallery-grid {
    /* grid grid-cols-2 md:grid-cols-4 gap-4 sm:gap-6 */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 640px) {
    .gallery-grid {
        gap: 1.5rem;
    }
}

@media (min-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.gallery-item {
    /* overflow-hidden rounded-xl shadow-lg relative group transition duration-300 transform */
    overflow: hidden;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    position: relative;
    transition-duration: 300ms;
    /* NUEVO */
    height:280px;
}

.gallery-item:hover {
    /* hover:shadow-2xl hover:scale-[1.02] */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(1.02);
}

.carousel-image {
    /* w-full h-full object-cover */
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    top:0;
    left:0;
}


/* subtitulos de seccion */

.gallery-subtitle{
font-size:1.4rem;
font-weight:600;
margin-top:40px;
margin-bottom:15px;
color:#1e293b;
}


/* etiqueta del traje */

.model-label{
position:absolute;
top:10px;
right:10px;
background:rgba(0,0,0,0.65);
color:white;
font-size:12px;
padding:6px 10px;
border-radius:6px;
}

/* --- CONTACT SECTION --- */

.section-contact {
    /* py-20 bg-gray-100 */
    padding-bottom: 5rem;
    background-color: #cacaca;
}

.contact-grid {
    /* grid md:grid-cols-2 gap-10 */
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2.5rem;
}

.contact-detail-address{
display:flex;
align-items:flex-start;
gap:10px;
}

.map-link{
display:inline-block;
margin-top:4px;
color:#ca8a04;
font-weight:600;
text-decoration:none;
}

.map-link:hover{
text-decoration:underline;
}

@media (min-width: 768px) {
    .contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.5rem;
    }
}

.contact-form-wrapper {
    /* bg-white p-8 rounded-xl shadow-xl */
    background-color: #e7e7e7;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.form-title {
    /* text-2xl font-semibold mb-6 text-navy */
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #1e293b;
}

.form-layout {
    /* space-y-4 */
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-label {
    /* block text-sm font-medium text-gray-700 */
    display: block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: #4b5563;
}

.form-input {
    /* mt-1 block w-full border-gray-300 rounded-md shadow-sm p-3 focus:ring-gold focus:border-gold border */
    margin-top: 0.25rem;
    display: block;
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    padding: 0.75rem;
}

.form-input:focus {
    /* focus:ring-gold focus:border-gold */
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: #ca8a04;
    box-shadow: 0 0 0 1px #ca8a04;
}

.form-hint {
    /* text-xs text-gray-500 mt-1 */
    font-size: 0.75rem;
    line-height: 1rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

.form-textarea {
    /* mt-1 block w-full border-gray-300 rounded-md shadow-sm p-3 focus:ring-gold focus:border-gold border */
    margin-top: 0.25rem;
    display: block;
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    padding: 0.75rem;
}

.form-textarea:focus {
    /* focus:ring-gold focus:border-gold */
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: #ca8a04;
    box-shadow: 0 0 0 1px #ca8a04;
}

.btn-submit {
    /* w-full bg-navy text-cream hover:bg-gray-700 py-3 rounded-md font-semibold transition duration-300 transform shadow-md */
    width: 100%;
    background-color: #1e293b;
    color: #f8fafc;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-radius: 0.375rem;
    font-weight: 600;
    transition-duration: 300ms;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.btn-submit:hover {
    background-color: #374151;
    transform: scale(1.01);
}

.contact-info-wrapper {
    /* space-y-6 */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-info-card {
    /* bg-white p-8 rounded-xl shadow-xl */
    background-color: #e7e7e7;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.contact-detail {
    /* text-gray-700 flex items-center mb-2 */
    color: #4b5563;
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.contact-detail-address {
    /* text-gray-700 flex items-start */
    color: #4b5563;
    display: flex;
    align-items: flex-start;
}

.icon-contact {
    /* h-5 w-5 mr-3 text-gold flex-shrink-0 */
    height: 1.25rem;
    width: 1.25rem;
    margin-right: 0.75rem;
    color: #ca8a04;
    flex-shrink: 0;
}

.icon-contact-lg {
    /* mt-1 */
    margin-top: 0.25rem;
}

.map-section {
    width: 100%;
}

.map-container {
    width: 100%;
    height: 350px; /* Ajusta según tu diseño */
}


/* ====================================
 * FOOTER
 * ==================================== */

.footer-main {
    /* bg-navy py-8 */
    background-color: #1e293b;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.footer-container {
    /* max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-cream/70 */
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
    color: rgba(248, 250, 252, 0.7);
}

@media (min-width: 640px) {
    .footer-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .footer-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.footer-title {
    /* mb-2 header-font text-xl text-gold */
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: #ca8a04;
}

.footer-copy {
    /* text-sm */
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.footer-links {
    /* mt-4 space-x-4 */
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.footer-link {
    /* text-cream hover:text-gold transition duration-300 text-sm */
    color: #f8fafc;
    transition-duration: 300ms;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.footer-link:hover {
    color: #ca8a04;
}

.footer-link-divider {
    /* text-gray-600 */
    color: #4b5563;
}
body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc; /* Blanco crema */
}
.header-font {
    font-family: 'Playfair Display', serif;
}
.bg-navy {
    background-color: #1e293b; /* Azul Marino Profundo */
}
.text-gold {
    color: #ca8a04; /* Oro envejecido para acentos */
}
.border-gold {
    border-color: #ca8a04;
}
/* Estilo para los carruseles de imágenes de la galería */
.image-carousel {
    cursor: pointer;
}