/* Variables CSS para colores y fuentes, facilitan la personalización */
:root {
    --color-primary: #B8860B; /* Oro Profundo (DEEP GOLD) */
    --color-secondary: #D4AF37; /* Oro Ligeramente Más Claro (para hover) */
    --color-dark-bg: #1A1A1A; /* Negro muy oscuro para fondos */
    --color-dark-card: rgba(30, 30, 30, 0.9); /* Negro semi-transparente para tarjetas */
    --color-text-light: #F0F0F0; /* Blanco suave para texto en fondos oscuros */
    --color-text-dark: #333333; /* Gris oscuro para texto en fondos claros */
    --color-white: #FFFFFF; /* Blanco puro */
    --font-heading: 'Montserrat', sans-serif; /* Fuente para títulos */
    --font-body: 'Open Sans', sans-serif; /* Fuente para el cuerpo del texto */
    --spacing-unit: 20px; /* Unidad base para espaciado y márgenes */
}

/* --- Estilos Generales y Reset --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Asegura que el padding y border no aumenten el tamaño del elemento */
}

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--color-text-dark);
    /* Fondo con imagen y color de respaldo */
    background-image: url('../img/black_pearlescent_texture.jpg'); /* Asegúrate que esta imagen exista */
    background-size: cover; /* Cubre todo el fondo */
    background-position: center; /* Centra la imagen */
    background-attachment: fixed; /* Mantiene la imagen fija al hacer scroll */
    background-color: var(--color-dark-bg); /* Color de respaldo si la imagen no carga */
    scroll-behavior: smooth; /* Desplazamiento suave para enlaces de anclaje */
}

/* --- Tipografía --- */
h1, h2, h3 {
    font-family: var(--font-heading);
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}

h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem); /* Tamaño de fuente responsivo */
    color: var(--color-primary); /* Color primario dorado */
    text-shadow: 2px 2px 6px rgba(0,0,0,0.9); /* Sombra para mejor legibilidad */
}

h2 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    margin-bottom: calc(var(--spacing-unit) * 2);
    color: var(--color-primary);
}

h3 {
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    margin-bottom: var(--spacing-unit);
    color: var(--color-primary);
}

p {
    font-size: clamp(1rem, 2.2vw, 1.1rem);
    line-height: 1.7;
    margin-bottom: var(--spacing-unit);
    text-align: justify; /* Justifica el texto para una lectura más formal */
}

.section-description {
    font-size: clamp(1.1rem, 2.5vw, 1.2rem);
    color: var(--color-text-light); /* Texto claro en secciones oscuras */
    max-width: 800px;
    margin: calc(var(--spacing-unit) * -0.5) auto calc(var(--spacing-unit) * 2) auto; /* Ajuste de margen superior */
    text-align: center;
}

a {
    text-decoration: none; /* Elimina el subrayado de los enlaces */
    color: var(--color-primary);
    transition: color 0.3s ease; /* Transición suave para el color al pasar el ratón */
}

a:hover {
    color: var(--color-secondary);
}

/* --- Botones CTA (Call to Action) --- */
.cta-button {
    display: inline-flex; /* Permite que el icono y el texto estén en línea */
    align-items: center; /* Alinea verticalmente el icono y el texto */
    justify-content: center; /* Centra el contenido horizontalmente */
    color: var(--color-white);
    padding: calc(var(--spacing-unit) * 0.9) calc(var(--spacing-unit) * 1.75);
    border-radius: 50px; /* Botones pill-shaped */
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    font-weight: 700;
    text-transform: uppercase;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    border: none;
    cursor: pointer;
    margin-top: var(--spacing-unit);
    outline: none; /* Elimina el contorno al hacer focus */
}

.cta-button:hover {
    transform: translateY(-3px); /* Pequeño efecto de elevación al pasar el ratón */
}

.cta-button i {
    margin-right: 10px; /* Espacio entre el icono y el texto */
    font-size: 1.1em; /* Ajusta el tamaño del icono */
}

/* Estilos específicos para el botón de WhatsApp */
.whatsapp-button {
    background-color: #25D366; /* Verde WhatsApp */
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
}

.whatsapp-button:hover {
    background-color: #1DA851; /* Verde más oscuro al pasar el ratón */
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.6);
}

/* Estilos específicos para el botón de Instagram */
.instagram-button {
    /* Gradiente de colores de Instagram */
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    box-shadow: 0 5px 15px rgba(225, 48, 108, 0.4);
}

.instagram-button:hover {
    /* Cambio de gradiente al pasar el ratón */
    background: linear-gradient(45deg, #e6683c 0%, #dc2743 25%, #cc2366 50%, #bc1888 75%, #f09433 100%);
    box-shadow: 0 8px 20px rgba(225, 48, 108, 0.6);
}

/* --- Estilos Generales de Secciones --- */
section {
    position: relative; /* Para permitir superposición de fondos/overlays */
    padding: calc(var(--spacing-unit) * 4) var(--spacing-unit); /* Padding general para secciones */
    z-index: 1; /* Asegura que el contenido esté por encima del fondo */
}

/* Estilos para secciones oscuras con overlay */
.dark-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65); /* Fondo oscuro semi-transparente */
    z-index: -1; /* Envía el overlay detrás del contenido */
}

.dark-section h2, .dark-section h3 {
    color: var(--color-primary); /* Títulos dorados en secciones oscuras */
}
.dark-section p, .dark-section .section-description {
    color: var(--color-text-light); /* Texto claro en secciones oscuras */
}

/* --- Sección Hero --- */
.hero {
    height: 100vh; /* Ocupa toda la altura de la ventana */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-white);
    overflow: hidden; /* Oculta el contenido que se desborda */
    background-color: var(--color-dark-bg); /* Color de respaldo para el fondo */
    position: relative;
}

.hero-background-slides {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-background-slides img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
    filter: brightness(0.6); /* Oscurece las imágenes de fondo */
    opacity: 0; /* Inicialmente ocultas */
    visibility: hidden; /* También oculta para accesibilidad y rendimiento */
    transition: opacity 1.5s ease-in-out, visibility 1.5s ease-in-out; /* Transición suave */
    animation: fadeInOut 25s infinite; /* Animación de fade in/out */
}

/* Retrasos para que las imágenes aparezcan secuencialmente */
.hero-background-slides img:nth-child(1) { animation-delay: 0s; }
.hero-background-slides img:nth-child(2) { animation-delay: 8.33s; } /* 25s / 3 imágenes = 8.33s por imagen */
.hero-background-slides img:nth-child(3) { animation-delay: 16.66s; }

/* Keyframes para la animación de fade in/out de las imágenes del hero */
@keyframes fadeInOut {
    0% { opacity: 0; visibility: hidden; }
    10% { opacity: 1; visibility: visible; } /* Aparece */
    30% { opacity: 1; visibility: visible; } /* Permanece visible */
    40% { opacity: 0; visibility: hidden; }  /* Desaparece */
    100% { opacity: 0; visibility: hidden; } /* Permanece oculto hasta el siguiente ciclo */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Overlay más oscuro para el contenido */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2; /* Asegura que el contenido esté sobre el overlay */
    max-width: 900px;
    padding: var(--spacing-unit);
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap; /* Permite que los botones se envuelvan en pantallas pequeñas */
    justify-content: center;
    gap: 15px; /* Espacio entre los botones */
    margin-top: calc(var(--spacing-unit) * 1.5);
}

/* --- Estilos para Grids (Servicios, Testimonios) --- */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Columnas responsivas */
    gap: calc(var(--spacing-unit) * 1.5);
    max-width: 1200px; /* Ancho máximo de la cuadrícula */
    margin: 0 auto; /* Centra la cuadrícula */
    padding-top: var(--spacing-unit);
}

.grid-item {
    background-color: var(--color-dark-card);
    padding: calc(var(--spacing-unit) * 1.5);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid rgba(85, 85, 85, 0.7); /* Borde sutil */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.grid-item:hover {
    transform: translateY(-8px); /* Efecto de elevación al pasar el ratón */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
    border-color: var(--color-primary); /* Borde primario al pasar el ratón */
}

/* --- Sección de Servicios --- */
.service-icon {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    color: var(--color-primary);
    margin-bottom: var(--spacing-unit);
}

/* --- Sección Sobre Nosotros --- */
.about-section {
    background-color: var(--color-white); /* Fondo blanco para esta sección */
    color: var(--color-text-dark);
}

.about-content {
    display: flex;
    flex-direction: row; /* Diseño por defecto: imagen a la izquierda, texto a la derecha */
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    gap: calc(var(--spacing-unit) * 2); /* Espacio entre imagen y texto */
    text-align: left;
}

.about-image {
    flex: 1; /* Ocupa 1 parte del espacio disponible */
    min-width: 250px;
    max-width: 400px;
    margin-bottom: 0; /* Reinicia el margen inferior para el diseño flex */
}

.about-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border: 3px solid var(--color-primary); /* Borde dorado alrededor de la imagen */
    display: block; /* Elimina el espacio extra debajo de la imagen */
}

.about-text {
    flex: 2; /* Ocupa 2 partes del espacio disponible */
}

.about-text h2 {
    text-align: left;
    color: var(--color-dark-bg);
}

.about-text p {
    color: var(--color-text-dark);
}

/* --- Sección de Reels/Videos de Instagram --- */
.reels-gallery-section {
    padding: calc(var(--spacing-unit) * 4) var(--spacing-unit);
    text-align: center;
    background-color: transparent; /* Se basa en el fondo del body + el overlay */
    color: var(--color-text-light);
    position: relative;
    z-index: 1;
}

.reels-gallery-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65); /* Overlay oscuro para esta sección */
    z-index: -1;
}

.reels-gallery-section h2 {
    color: var(--color-primary);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.reels-gallery-section .section-description {
    color: var(--color-text-light);
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.reels-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1.5);
    max-width: 1200px;
    margin: 0 auto;
    padding-top: var(--spacing-unit);
}

.instagram-reel-wrapper {
    background-color: var(--color-dark-card);
    padding: calc(var(--spacing-unit) * 0.75);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid rgba(85, 85, 85, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 380px; /* Ancho máximo para cada reel */
    width: 100%; /* Ajuste para responsividad */
    box-sizing: border-box; /* Asegura que padding/border no desborden */
    overflow: hidden; /* Oculta cualquier parte de video que se desborde */
}

.instagram-reel-wrapper:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
    border-color: var(--color-primary);
}

.instagram-reel-wrapper video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
}

/* --- Sección de Galería de Sonrisas / Testimonios Visuales --- */
/* Esta sección usa .dark-section, por lo que su fondo ya está cubierto por el overlay */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: calc(var(--spacing-unit) * 1.5);
    max-width: 1200px;
    margin: 0 auto;
    padding-top: var(--spacing-unit);
}

.gallery-image-item {
    background-color: var(--color-dark-card);
    padding: var(--spacing-unit);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid rgba(85, 85, 85, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden; /* Asegura que la imagen no se salga si hay un borde o padding */
}

.gallery-image-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
    border-color: var(--color-primary);
}

.client-photo-gallery {
    width: 100%;
    height: 250px; /* Altura fija para que las imágenes tengan el mismo tamaño */
    object-fit: cover; /* Recorta la imagen para que cubra el espacio */
    border-radius: 5px;
    display: block;
    border: 2px solid var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.client-photo-gallery:hover {
    transform: scale(1.03); /* Ligeramente más grande al pasar el ratón */
}

.gallery-image-item a {
    display: block; /* Para que el enlace ocupe todo el espacio del item */
    line-height: 0; /* Elimina espacio extra debajo de la imagen */
    border: none;
    text-decoration: none;
}

/* --- Sección de Información de Contacto --- */
.contact-info-section {
    padding: calc(var(--spacing-unit) * 4) var(--spacing-unit);
    text-align: center;
    color: var(--color-text-light);
    position: relative;
    z-index: 1;
}

.contact-info-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Overlay más oscuro para el contacto */
    z-index: -1;
}

.contact-info-short {
    font-size: clamp(0.9rem, 2vw, 1em);
    margin-top: calc(var(--spacing-unit) * 2);
    color: var(--color-text-light);
    line-height: 1.8;
    text-align: center;
}

/* --- Footer --- */
footer {
    color: var(--color-text-light);
    text-align: center;
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5);
    font-size: 0.9em;
    border-top: 2px solid #555555; /* Línea separadora */
    position: relative;
    z-index: 0; /* Asegura que el footer esté debajo del overlay del contacto si se superponen */
}

footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Overlay para el footer */
    z-index: -1;
}

.footer-links {
    margin-top: var(--spacing-unit);
}

.footer-links a {
    color: var(--color-text-light);
    font-size: clamp(1.2em, 3vw, 1.5em);
    margin: 0 10px;
}

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

/* --- Selector de Idioma (Importante para la funcionalidad de traducción) --- */
.language-selector {
    position: fixed; /* Mantiene el selector en pantalla al hacer scroll */
    top: 20px;
    right: 20px;
    z-index: 1000; /* Asegura que esté por encima de casi todo el contenido */
    display: flex; /* Para que los botones estén en línea */
    gap: 5px; /* Espacio entre los botones "English" y "Español" */
}

.language-btn {
    background: none; /* Sin fondo inicial */
    border: 1px solid var(--color-primary); /* Borde dorado */
    color: var(--color-primary); /* Texto dorado */
    padding: 8px 12px;
    cursor: pointer; /* Cambia el cursor para indicar que es clickeable */
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Transición suave para hover y active */
    font-weight: 600;
    outline: none; /* Elimina el contorno de enfoque por defecto */
}

.language-btn:hover {
    background-color: var(--color-primary); /* Fondo dorado al pasar el ratón */
    color: var(--color-white); /* Texto blanco al pasar el ratón */
}

.language-btn.active-language {
    /* Estilo para el botón del idioma actualmente seleccionado */
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}


/* --- Media Queries (Diseño Responsivo) --- */

@media (max-width: 992px) { /* Para tablets y pantallas medianas */
    section {
        padding: calc(var(--spacing-unit) * 3) var(--spacing-unit);
    }
    .hero-content {
        max-width: 80%; /* Reduce el ancho del contenido del hero */
    }
    .grid-container, .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: var(--spacing-unit);
    }
    .about-content {
        flex-direction: column; /* Apila imagen y texto en pantallas más pequeñas */
        text-align: center;
        gap: var(--spacing-unit);
    }
    .about-image {
        margin-bottom: var(--spacing-unit);
    }
    .about-text h2 {
        text-align: center; /* Centra el título en la sección "About" */
    }
    .instagram-reel-wrapper, .gallery-image-item {
        max-width: 45%; /* Ajusta el tamaño de los items en cuadrículas */
    }
}

@media (max-width: 768px) { /* Para tablets en vertical y smartphones grandes */
    .hero-content {
        padding: calc(var(--spacing-unit) * 0.75);
    }
    h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
    h2 { font-size: clamp(1.6rem, 3.5vw, 2rem); }
    h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
    p { font-size: clamp(0.95rem, 2.2vw, 1.05rem); }
    .section-description { font-size: clamp(1rem, 2.5vw, 1.1rem); }
    .hero-buttons {
        flex-direction: column; /* Apila los botones CTA */
        align-items: center;
    }
    .cta-button {
        width: 80%; /* Los botones ocupan más ancho */
        max-width: 300px;
    }
    .reels-grid, .gallery-grid {
        grid-template-columns: 1fr; /* Una sola columna para los grids */
        gap: var(--spacing-unit);
    }
    .instagram-reel-wrapper, .gallery-image-item {
        max-width: 90%; /* Los items de la cuadrícula son más anchos */
        margin: 0 auto;
    }
    .language-selector {
        top: 15px;
        right: 15px;
    }
    .language-btn {
        padding: 6px 10px;
        font-size: 0.9em;
    }
}

@media (max-width: 576px) { /* Para smartphones pequeños */
    section {
        padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 0.75);
    }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    .hero-content p { font-size: 0.9rem; }
    .cta-button {
        font-size: 1rem;
        padding: calc(var(--spacing-unit) * 0.6) calc(var(--spacing-unit) * 1.2);
    }
    .about-text h2 { text-align: center; }
    .about-image { margin-bottom: var(--spacing-unit) * 1.5; }
    .reels-gallery-section h2 { font-size: 1.6rem; }
    .reels-gallery-section .section-description { font-size: 0.95rem; }
    .contact-info-short { font-size: 0.85em; }
    footer {
        padding: var(--spacing-unit) calc(var(--spacing-unit) * 0.75);
        font-size: 0.8em;
    }
}