/* * 1. Reset Básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}

/* * 2. Contenedor Principal */
.landing-page-container {
    width: 100%;
    /* Flexbox para centrar el botón horizontalmente debajo de la imagen */
    display: flex;
    flex-direction: column;
    align-items: center; 
    position: relative;
}

/* * 3. Imagen Responsive (Móvil por defecto) */
.responsive-image {
    width: 100%; /* Ocupa el 100% del ancho del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block;
    line-height: 0; /* Ayuda a prevenir espacios extra en algunos navegadores */
    
    /* Fuente por defecto: Móvil */
    /* El atributo src en el HTML ya tiene la ruta 'public/img/Landing-Movil-fvf.jpg' */
}

/* * 4. Media Query para la Imagen de Escritorio (windowWidth >= 768px) */
@media (min-width: 768px) {
    /* * ✅ CAMBIO CLAVE: Usamos 'content: url()' para cambiar la imagen.
     * Esta es la traducción pura de tu condicional de React/Next.js.
     */
    .responsive-image {
        content: url('../images/LandingWeb.jpg'); /* 👈 Imagen de Escritorio */
    }
}

/* * 5. Estilos del Botón (Posicionamiento Absoluto al final) */
.action-button {
    /* Define el tamaño del botón. */
    width: 487px; 
    height: 110px;
    
    /* ❌ ELIMINAMOS: position: absolute;
       ❌ ELIMINAMOS: bottom: 50px;
       ❌ ELIMINAMOS: left: 50%; y transform: translateX(-50%); */
    
    /* ✅ CAMBIO CLAVE: Margin para espaciar el botón */
    margin-top: 20px; /* Separación de la imagen */
    margin-bottom: 50px; /* Separación del borde final del contenedor (fondo del div) */
    
    /* Imagen de fondo del botón y estilos */
    background-image: url('../images/BotonTyC-Azul.png'); /* 👈 Imagen normal */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Ajusta este valor (e.g., 50px, 20px, 0px, o -20px)
       Un valor más bajo (cercano a 0) o negativo hará que el botón suba más
       y se solape más con la imagen. */
    bottom: 300px; 
    
    /* Centrado horizontal (necesario con absolute) */
    left: 50%;
    transform: translateX(-50%); 
    
    display: block; 
    cursor: pointer;
    position: absolute;
    text-decoration: none; 
    transition: background-image 0.3s ease;
}

/* * 6. Estilos del Botón (Hover) */
.action-button:hover {
    background-image: url('../images/BotonTyC.png'); /* 👈 Imagen hover */
}

/* * 7. Ajuste para Móviles Pequeños */
@media (max-width: 480px) {
    .action-button {
        width: 81%; /* Se ajusta a la pantalla */
        max-width: 280px;
        height: 62px;
        bottom: -18px;
    }
}

/* ------------------------------------------------ */

/* ## 1. Pantallas Extra Grandes (Monitores 4K/Ultra-wide) */
/* Rango: Mayores a 1600px */
@media (min-width: 1601px) {
    .action-button {
        bottom: 190px; /* Sube o baja el botón para monitores muy grandes */
        width: 900px;  /* Aumenta el tamaño del botón */
        height: 206px;
    }
}

/* --- */

/* ## 2. Escritorio Estándar (Laptops y Monitores) */
/* Rango: 1201px a 1600px */
@media (min-width: 1201px) and (max-width: 1600px) {
    .action-button {
        bottom: 140px; /* Ajuste para este rango de escritorio */
        width: 600px;
        height: 135px;
    }
}

/* --- */

/* ## 3. Tablet en Horizontal / Laptops Pequeñas */
/* Rango: 992px a 1200px */
@media (min-width: 992px) and (max-width: 1200px) {
    .action-button {
        bottom: 75px; /* Ajuste más bajo para reducir el solapamiento */
        width: 318px;
        height: 72px;
    }
}

/* --- */

/* ## 4. Tablet en Vertical */
/* Rango: 768px a 991px */
@media (min-width: 768px) and (max-width: 991px) {
    /* Asegúrate de que tu imagen de escritorio también se cargue aquí si usaste 768px */
    .action-button {
        bottom: 50px; /* Posición clave para tablets */
        width: 318px;
        height: 72px;
    }
}

/* --- */

/* ## 5. Móvil Grande/Tablet Pequeña en Horizontal */
/* Rango: 481px a 767px */
@media (min-width: 481px) and (max-width: 767px) {
    /* Aquí ya debería estar activa la imagen de móvil */
    .action-button {
        bottom: 7px; 
        width: 70%; /* Usamos porcentaje para ser más flexibles */
        max-width: 280px;
        height: 64px;
    }
}