:root {
    /* Colores base */
    --background-rgb: 56, 2, 2;
    --background-overlay-opacity: 0.85;
    --foreground: rgb(217 162 115);
    --foreground-muted: rgb(217 162 115);

    /* Colores para el enlace de icono (WhatsApp) */
    --icon-link-bg: rgb(56 2 2);
    --icon-link-bg-hover: rgb(217 162 115);
    --icon-link-outline: rgb(217 162 115);
    --icon-link-outline-hover: rgb(var(--background-rgb));
    --icon-link-text: rgb(217 162 115);
    --icon-link-text-hover: rgb(var(--background-rgb));

    /* Colores para los enlaces personalizados (botones) */
    --custom-link-bg: rgb(0 0 0);
    --custom-link-bg-hover: rgb(217 162 115);
    --custom-link-outline: rgb(217 162 115);
    --custom-link-outline-hover: rgb(var(--background-rgb));
    --custom-link-text: rgb(217 162 115);
    --custom-link-text-hover: rgb(255 255 255);
}

body {
    /* Capas de fondo (de arriba a abajo): */
    background-image:
        /* 1. Overlay de color semitransparente */
        linear-gradient(rgba(var(--background-rgb), var(--background-overlay-opacity)), rgba(var(--background-rgb), var(--background-overlay-opacity))),
        /* 2. Imagen de fondo para MÓVILES (vertical) */
        url('../img/background_movil.webp');

    /* 3. Color sólido de respaldo si la imagen falla */
    background-color: rgb(var(--background-rgb));

    /* Propiedades para que la imagen cubra toda la pantalla sin distorsionarse */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Efecto parallax: el fondo no se mueve al hacer scroll */
}

/* 
=====================================================
MEDIA QUERY PARA PANTALLAS GRANDES (DESKTOP/TABLET)
=====================================================
- `min-width: 768px` es un punto de quiebre común (Tailwind usa `md` para 768px).
- Cuando la pantalla sea más ancha de 768px, se aplicarán estos estilos.
*/
@media (min-width: 768px) {
    body {
        /* Sobrescribimos SOLO la imagen de fondo, manteniendo el resto de propiedades */
        background-image:
        linear-gradient(rgba(var(--background-rgb), var(--background-overlay-opacity)), rgba(var(--background-rgb), var(--background-overlay-opacity))),
        /* Imagen de fondo para DESKTOP (horizontal) */
        url('../img/background.webp');
    }
}

.custom-link-button {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
    background-color: var(--custom-link-bg);
    border: 2px solid var(--custom-link-outline);
    color: var(--custom-link-text);
    padding: 1rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    transition: all 300ms;
    /* El texto dentro del botón se centrará si se divide en varias líneas */
    text-align: center;
}

.custom-link-button:hover {
    background-color: var(--custom-link-bg-hover);
    color: var(--custom-link-text-hover);
    border-color: var(--custom-link-outline-hover);
}

/* Mostrar imagen en el listado de opciones*/
.image-link-button {
    position: relative;
    display: block; /* Asegura que el enlace se comporte como un bloque */
    border-radius: 1.5rem; /* Esquinas muy redondeadas (como un 'squircle') */
    overflow: hidden; /* OBLIGATORIO: Recorta la imagen para que respete las esquinas redondeadas */
    border: 3px solid var(--custom-link-outline); /* Borde usando tus variables de color */
    transition: all 0.3s ease-in-out; /* Animación suave para el hover */
    width: 100%;
    aspect-ratio: 16 / 9; /* Mantiene una proporción de 16:9 (panorámica) */
    background-color: #000; /* Color de fondo mientras carga la imagen */
}

.image-link-button:hover {
    transform: scale(1.05); /* Efecto de zoom al pasar el ratón */
    border-color: var(--custom-link-bg-hover); /* Cambia el color del borde al color dorado del hover */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3); /* Sombra sutil para darle profundidad */
}

/* Estilo para la imagen DENTRO del enlace */
.image-link-button img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra todo el espacio sin deformarse */
}

/*
=====================================================
NUEVO ESTILO PARA BOTONES CON VIDEO VERTICAL
=====================================================
*/
.video-link-button {
    position: relative;
    display: block;
    border-radius: 1.5rem; /* Mismas esquinas redondeadas */
    overflow: hidden; /* Crucial para recortar el video */
    border: 3px solid var(--custom-link-outline);
    transition: all 0.3s ease-in-out;
    background-color: #000; /* Fondo mientras carga */

    /* --- AJUSTES CLAVE PARA RESPONSIVIDAD --- */
    width: 100%; /* Ocupa el ancho disponible en su contenedor */
    max-width: 300px; /* Límite para que no sea enorme en desktop */
    margin-left: auto; /* Centra el elemento si el contenedor es más ancho */
    margin-right: auto;
    aspect-ratio: 9 / 16; /* Proporción de teléfono vertical */
}

.video-link-button:hover {
  transform: scale(1.05); /* Mismo efecto de zoom */
  border-color: var(--custom-link-bg-hover);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

/* Estilo para el video DENTRO del contenedor */
.video-link-button video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Rellena el espacio sin distorsionar, recortando si es necesario */
}

/*
=====================================================
ESTILOS PARA LA PÁGINA DE TESTIMONIOS (testimonios.html)
=====================================================
*/

/* Contenedor principal del carrusel */
.testimonials-slider {
  width: 100%;
  padding-top: 20px;
  padding-bottom: 50px; /* Espacio para la paginación */
}

/* Estilo para cada slide */
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Estilo para las imágenes de testimonio (capturas) */
.testimonial-image {
  display: block;
  max-width: 100%;
  max-height: 500px; /* Evita que las imágenes sean demasiado altas en desktop */
  height: auto;
  border-radius: 1rem; /* Esquinas redondeadas */
  border: 2px solid rgba(217, 162, 115, 0.5); /* Borde sutil */
  object-fit: contain;
}

/* Estilo para las tarjetas de testimonio de texto */
.testimonial-card {
  background-color: rgba(0, 0, 0, 0.5); /* Fondo negro semitransparente */
  border: 1px solid var(--custom-link-outline);
  border-radius: 1rem;
  padding: 1.5rem;
  color: var(--custom-link-text);
  height: 100%; /* Para que todas las tarjetas tengan la misma altura */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.testimonial-card blockquote {
  font-style: italic;
}

.testimonial-card footer {
  font-style: normal;
  font-weight: 600;
  color: var(--foreground);
  opacity: 0.8;
}


/*
=====================================================
PERSONALIZACIÓN DE LA UI DE SWIPER.JS
=====================================================
*/

/* Flechas de navegación (Siguiente y Anterior) */
.swiper-button-next,
.swiper-button-prev {
  color: var(--foreground) !important; /* ¡Color dorado para las flechas! */
  transform: scale(0.8);
}

/* Paginación (los puntitos) */
.swiper-pagination-bullet {
  background-color: var(--foreground) !important; /* Color dorado */
  opacity: 0.5;
  width: 10px;
  height: 10px;
  transition: opacity 0.3s;
}

/* Puntito activo de la paginación */
.swiper-pagination-bullet-active {
  opacity: 1;
}

/* Configuración para videos */
.video-section {
  position: relative; /* Contenedor padre debe ser relativo */
  width: 100%;
  height: 100vh; /* Ocupa el 100% de la altura de la ventana */
  overflow: hidden; /* Oculta cualquier parte del video que se desborde */
  display: flex;
  align-items: center;
  justify-content: center;
}

.background-video {
  position: absolute; /* Posicionamiento absoluto respecto al padre */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centra el video perfectamente */
  min-width: 100%; 
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1; /* Lo envía detrás de todo el contenido */
}

/* Opcional: para el contenido que va encima */
.content-overlay {
  color: white;
  text-align: center;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.3); /* Un fondo oscuro semitransparente para legibilidad */
  border-radius: 10px;
}