/* ================= VARIABLES GLOBALES (Mantenemos tus variables) ================= */
:root {
    --color-primario: #520a27;
    --color-secundario: #8b1e47;
    --color-acento: #e5d4d9;
    --color-fondo-claro: #fcfbfb; /* Usado ahora para la sección de frases */
    --color-fondo-oscuro: #1f040f;
    --color-texto-principal: #2d2d2d;
    --color-texto-blanco: #ffffff;
}

/* ================= ESTILOS BASE ================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    overflow-x: hidden; /* Evita scroll horizontal si la imagen es grande */
}

/* --- Barra de Navegación --- */

header {
    position: fixed; /* ¡Esta es la palabra mágica! Cambiamos absolute por fixed */
    top: 30px; 
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center; 
    z-index: 1000; 
    transition: all 0.3s ease; /* Añadí esto para que cualquier movimiento se vea suave */
}

/* --- Botón Menú Hamburguesa (Oculto en escritorio) --- */
.menu-toggle {
    display: none; /* Se oculta en computadoras */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001; /* Asegura que el botón esté por encima de todo */
}

/* Las tres rayitas de la hamburguesa */
.bar {
    width: 100%;
    height: 3px;
    background-color: var(--color-texto-blanco);
    border-radius: 5px;
    transition: all 0.3s ease; /* Transición suave para convertirse en X */
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(82, 10, 39, 0.534);
    backdrop-filter: blur(7px); 
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.466);
    padding: 1rem 2rem; /* Ajustamos el padding para que no se vea tan gruesa */
    width: 90%; /* Ocupa el 90% de la pantalla para dejar los márgenes laterales */
    max-width: 1400px; /* Evita que sea absurdamente ancha en monitores gigantes */
    border-radius: 50px; /* Aplica los bordes completamente redondos */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* Sombra suave para dar el efecto 3D de que está flotando */
    color: var(--color-texto-blanco);
}

.navbar h1 {
    color: var(--color-texto-blanco);
    font-size: 1.5vw;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-links a {
    color: var(--color-texto-blanco);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.2vw;
    transition: color 0.3s ease;
    justify-content: center;
}

.nav-links a:hover {
    color: var(--color-acento);
}

.logo {
    display: flex;
    align-items: center; /* Centra la imagen y el texto verticalmente */
    gap: 1rem; /* Crea un espacio limpio entre el logo y el nombre */
}

/* --- Estilos de la imagen del logo --- */
.logo-img {
    height: 38px; /* Ajusta esta altura dependiendo de qué tan grande quieras el logo */
    width: auto; /* Mantiene las proporciones de tu logo para que no se deforme */
    /* border-radius: 50%; /* Descomenta esta línea si tu logo es cuadrado y quieres hacerlo circular */
}

/* --- SECCIÓN DE IMAGEN (CARRUSEL ACTUAIZADO) --- */
.carousel-container {
    width: 100%;
    height: 50vh; /* Altura que definiste para el banner, por ejemplo 70% de la ventana */
    overflow: hidden; /* Oculta las imágenes que están "fuera de escena" */
    position: relative; /* Para posicionar las flechas */
    background-color: #000; /* Fondo negro por si la imagen tarda en cargar */
}

/* --- El "Riel" que se desliza --- */
.carousel-images {
    width: 100%;
    height: 100%;
    display: flex; /* Alinea las diapositivas horizontalmente */
    transition: transform 0.8s ease-in-out; /* Animación de deslizamiento */
}

/* --- Cada Diapositiva (La etiqueta picture) --- */
.carousel-slide {
    flex: 0 0 100%; /* IMPORTANTE: Cada diapositiva ocupa exactamente el 100% del contenedor */
    width: 100%;
    height: 100%;
    position: relative;
    display: block; /* picture es inline por defecto, necesitamos que sea block */
}

/* --- La IMAGEN final dentro de picture (Aquí está la magia) --- */
.slide-image {
    width: 100%; /* Estira la imagen al ancho total del banner */
    height: 100%; /* Estira la imagen al alto total del banner */
    object-fit: cover !important; /* ¡CLAVE! Estira y recorta la imagen para llenar, sin deformarla */
    object-position: center; /* Centra el recorte si es necesario */
    display: block; /* Elimina espacios vacíos extraños debajo de la imagen */
}
/* --- Controles del Carrusel (Flechas) --- */
.carousel-btn {
    position: absolute;
    top: 50%; /* Las centra verticalmente */
    transform: translateY(-50%); /* Ajuste exacto al centro */
    background-color: rgba(82, 10, 39, 0.5); /* Color vino primario con transparencia */
    color: var(--color-texto-blanco);
    border: none;
    width: 50px;
    height: 50px;
    cursor: pointer;
    font-size: 1.5rem;
    border-radius: 50%; /* Botones circulares */
    transition: background-color 0.3s ease, transform 0.2s ease;
    z-index: 10; /* Asegura que estén por encima de las imágenes */
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-btn:hover {
    background-color: var(--color-primario); /* Vino sólido al pasar el mouse */
    transform: translateY(-50%) scale(1.1); /* Crece un poquito para dar feedback */
}

/* Posiciones de cada flecha */
.prev-btn {
    left: 20px;
}

.next-btn {
    right: 20px;
}

/* --- SECCIÓN DE FRASES PROMOCIONALES (NUEVA) --- */
.promotional-phrases {
    background-color: var(--color-fondo-claro);
    padding: 3rem 2rem;
    text-align: center;
}

.phrase-block {
    max-width: 800px;
    margin: 0 auto;
}

.phrase-block h2 {
    font-size: 2.2rem;
    color: var(--color-primario);
    margin-bottom: 1rem;
}

.phrase-block p {
    color: var(--color-texto-principal);
    font-size: 1.1rem;
    line-height: 1.6;
}

/* --- Cuerpo / Información --- */

.about-section {
    padding: 6rem 2rem; /* Mucho espacio para que el diseño respire */
    background-color: var(--color-fondo-claro); 
}

.about-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center; /* Alinea el texto y la imagen al mismo nivel vertical */
    gap: 4rem; /* Crea un margen amplio entre la columna de texto y la imagen */
}

/* Las columnas toman el mismo ancho (50/50) */
.about-text, .about-image {
    flex: 1; 
}

.about-text h2 {
    color: var(--color-primario);
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.about-text p {
    color: var(--color-texto-principal);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

/* --- Estilo de la Imagen --- */
.rounded-img {
    width: 100%;
    height: 400px;
    border-radius: 20px; /* Suaviza las esquinas para un look moderno */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); /* Sombra elegante que le da profundidad */
    object-fit: cover !important;
}

/* --- Botón Primario --- */
.btn-primary {
    display: inline-block;
    padding: 0.8rem 2rem;
    background-color: var(--color-primario);
    color: var(--color-texto-blanco);
    text-decoration: none;
    border-radius: 30px; /* Estilo píldora para que haga juego con el navbar */
    font-weight: 600;
    transition: all 0.3s ease; /* Animación suave */
    margin-top: 1rem;
}

.btn-primary:hover {
    background-color: var(--color-secundario);
    transform: translateY(-3px); /* El botón "salta" un poquito al pasar el mouse */
    box-shadow: 0 10px 20px rgba(82, 10, 39, 0.2);
}

/* ================= FOOTER ================= */
.site-footer {
    background-color: var(--color-fondo-oscuro);
    color: var(--color-texto-blanco);
    padding: 4rem 2rem 1rem 2rem;
    font-size: 0.95rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    /* Esto crea columnas que se adaptan automáticamente al tamaño de la pantalla */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-col h3 {
    color: var(--color-acento); /* Usamos el tono rosado suave para los títulos */
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    position: relative;
    padding-bottom: 0.5rem;
}

/* Pequeña línea decorativa debajo de los títulos del footer */
.footer-col h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: var(--color-secundario);
}

/* --- Estilos de la columna de marca --- */
.brand-col .logo-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.logo-img-footer {
    height: 40px;
    width: auto;
}

.brand-col h2 {
    font-size: 1.3rem;
    color: var(--color-texto-blanco);
}

.brand-col p {
    line-height: 1.6;
    color: #d1c4c8; /* Un gris con un toque de vino para mejor legibilidad */
}

/* --- Enlaces rápidos --- */
.links-col ul {
    list-style: none;
}

.links-col ul li {
    margin-bottom: 0.8rem;
}

.links-col ul li a {
    color: #d1c4c8;
    text-decoration: none;
    transition: all 0.3s ease;
}

.links-col ul li a:hover {
    color: var(--color-texto-blanco);
    padding-left: 8px; /* El enlace se mueve ligeramente a la derecha al pasar el mouse */
}

/* --- Contacto --- */
.contact-col p {
    margin-bottom: 1rem;
    line-height: 1.5;
    color: #d1c4c8;
}

.contact-col strong {
    color: var(--color-texto-blanco);
}

/* --- Barra inferior (Copyright) --- */
.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Una línea divisoria muy sutil */
    color: #a09397;
    font-size: 0.85rem;
}

/* ================= PÁGINAS INTERNAS (Servicios / Especialidades) ================= */

/* --- Banner Superior (Inner Hero) --- */
.inner-hero {
    background-color: var(--color-primario);
    padding: 12rem 2rem 6rem 2rem; /* Mucho padding arriba para que el navbar no lo tape */
    text-align: center;
    color: var(--color-texto-blanco);
    /* Puedes agregar una imagen de fondo sutil aquí si lo deseas */
}

.hero-content h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.hero-content p {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
    color: var(--color-acento); /* Texto secundario en rosa suave */
}

/* --- Cuadrícula de Servicios --- */
.services-page {
    background-color: var(--color-fondo-claro);
    padding: 5rem 2rem;
}

.services-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    /* La magia de Grid: Crea columnas responsivas automáticamente de mínimo 300px */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
}

/* --- Tarjeta Individual --- */
.service-card {
    background-color: var(--color-texto-blanco);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* Sombra muy sutil */
    transition: all 0.3s ease;
    text-align: center;
    border-top: 5px solid transparent; /* Borde invisible preparado para el hover */
}

.service-card:hover {
    transform: translateY(-10px); /* La tarjeta "sube" al pasar el mouse */
    box-shadow: 0 15px 30px rgba(82, 10, 39, 0.15); /* Sombra color vino */
    border-top: 5px solid var(--color-primario); /* Aparece un borde superior color vino */
}

.card-icon {
    /* Eliminamos font-size: 3.5rem que usábamos para los emojis */
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilizamos el ícono de Font Awesome que está DENTRO del div */
.card-icon i {
    font-size: 3.5rem; /* Le damos el tamaño aquí */
    color: var(--color-primario); /* ¡IMPORTANTE! Le aplicamos tu color vino de marca */
    transition: color 0.3s ease; /* Preparamos la animación para el hover */
}

.service-card h3 {
    color: var(--color-primario);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.service-card p {
    color: var(--color-texto-principal);
    line-height: 1.6;
}

.service-card:hover .card-icon i {
    color: var(--color-secundario); /* Se vuelve un poco más claro al hover */
}

/* ================= BOTÓN FLOTANTE DE WHATSAPP ================= */
.whatsapp-float {
    position: fixed;
    bottom: 30px; /* Separación desde abajo */
    right: 30px; /* Separación desde la derecha */
    background-color: #25D366; /* Verde oficial de WhatsApp */
    color: #FFF;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.2rem;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 1000; /* Asegura que flote sobre todo lo demás */
    transition: all 0.3s ease;
    animation: pulse-whatsapp 2s infinite; /* Llama a la animación de pulso */
    text-decoration: none;
}

/* Evitamos que el color del ícono cambie si está dentro de un enlace visitado */
.whatsapp-float i {
    color: #FFF;
}

.whatsapp-float:hover {
    background-color: #1EBE57; /* Verde un poco más oscuro al pasar el mouse */
    transform: translateY(-5px); /* Se eleva un poco */
    box-shadow: 0px 8px 20px rgba(37, 211, 102, 0.4);
    animation: none; /* Detiene el pulso cuando le pasas el mouse */
}

/* --- Animación de Pulso Suave --- */
@keyframes pulse-whatsapp {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* --- Ajuste para teléfonos móviles --- */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 50px; /* Un poco más pequeño en celular para no tapar contenido */
        height: 50px;
        font-size: 1.8rem;
        bottom: 20px;
        right: 20px;
    }
}


/* ================= RESPONSIVE DESIGN (MÓVILES Y TABLETS) ================= */
@media only screen and (max-width: 768px) {
    
    /* --- Header y Navbar --- */
    header {
        top: 15px; /* Reducimos el espacio superior para no desperdiciar pantalla */
    }

    .navbar {
        flex-direction: row; /* Mantiene el logo y el botón en la misma línea */
        flex-wrap: nowrap; /* Permite que el menú desplegable baje a otra línea */
        justify-content: space-between; /* Logo a la izquierda, hamburguesa a la derecha */
        padding: 1rem 1.5rem;
        border-radius: 30px;
    }

    .menu-toggle {
        display: flex; /* Mostramos la hamburguesa en celulares */
    }

    /* --- Menú Desplegable --- */
    .nav-links {
        flex-direction: column;
        width: 100%;
        background-color: rgba(82, 10, 39, 0.95); /* Vino casi sólido para buena lectura */
        position: absolute;
        top: 100%; /* Se coloca justo debajo de la píldora flotante */
        left: 0;
        border-radius: 20px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.3);
        
        /* Truco para animar la aparición (en lugar de usar display: none) */
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: all 0.4s ease; /* Deslizamiento suave */
        padding: 0; 
        gap: 0;
    }

    /* Esta clase se agregará con JavaScript cuando hagamos clic */
    .nav-links.active {
        max-height: 250px; /* Expande la caja */
        opacity: 1;
        padding: 1rem 0;
    }

    .nav-links li {
        width: 100%;
        text-align: center;
        padding: 1rem 0;
    }

    .nav-links a {
        font-size: 1.1rem; /* Letra un poco más grande para tocar fácil con el dedo */
        display: block; /* Hace que toda la zona sea clickable */
    }

    /* --- Animación de Hamburguesa a "X" --- */
    .menu-toggle.is-active .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    .menu-toggle.is-active .bar:nth-child(2) {
        opacity: 0; /* Oculta la rayita de en medio */
    }
    .menu-toggle.is-active .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    .logo-img {
        height: 25px; /* Logo un poco más pequeño */
    }

    .logo h1 {
        font-size: 1.1rem;
    }

    .nav-links {
        gap: 1rem;
        justify-content: center;
        width: 100%;
    }

    .nav-links a {
        font-size: 2rem; /* Letra más pequeña para que los 3 enlaces quepan en una línea */
    }

    /* --- Carrusel y Flechas --- */
    .carousel-container {
        height: 50vh; /* Reducimos la altura para que el usuario vea pronto el contenido de abajo */
    }

    .carousel-btn {
        width: 40px; /* Flechas más pequeñas para no tapar la foto */
        height: 40px;
        font-size: 1.2rem;
    }

    .prev-btn { left: 10px; }
    .next-btn { right: 10px; }

    /* --- Frases Promocionales --- */
    .phrase-block h2 {
        font-size: 1.8rem;
    }

    .phrase-block p {
        font-size: 1rem;
    }

/* --- Sección Acerca de Nosotros en Móvil --- */
.about-container {
    flex-direction: column; /* Apila el texto arriba y la imagen abajo */
    gap: 2rem; /* Reduce el margen enorme entre ellos */
    text-align: center; /* Centra el texto en móviles (opcional pero recomendado) */
}

.about-text h2 {
    font-size: 2rem;
}

.rounded-img {
    height: 250px; /* En celular no necesitamos 400px de altura, 250px es perfecto */
    width: 100%;
    object-fit: cover !important;
}


    /* --- Footer --- */
    .site-footer {
        padding: 3rem 1.5rem 1rem 1.5rem;
        text-align: center; /* Centramos el texto para una lectura más cómoda en móvil */
    }

    .brand-col .logo-footer {
        justify-content: center; /* Centramos el logo con el título */
    }

    .footer-col h3::after {
        left: 50%;
        transform: translateX(-50%); /* Centramos la línea decorativa rosa */
    }
}

/* Ajuste extra para celulares muy pequeños */
@media (max-width: 480px) {
    .nav-links {
        flex-wrap: wrap; /* Si la pantalla es muy pequeña, permite que los enlaces bajen a otra línea */
    }
}