/* ======================================================
   CONFIGURACIÓN GENERAL
   ====================================================== */
/* Importamos una fuente moderna desde Google Fonts para un look más tecnológico */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap');

* {
    /* Esto asegura que los tamaños de los elementos incluyan los bordes y rellenos, evitando problemas de diseño */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* Apariencia tecnológica: Fondo oscuro y letra clara */
    background-color: #0f172a; /* Azul muy oscuro/Gris espacial */
    color: #f8fafc; /* Blanco humo para que no canse la vista */
    font-family: 'Montserrat', sans-serif;
    
    /* Usamos Flexbox para que el contenedor ocupe siempre toda la pantalla y el footer quede abajo */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.contenedor {
    /* Centra el contenido en la pantalla */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex: 1; /* Permite que este contenedor se estire */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* ======================================================
   ENCABEZADO Y LOGOTIPO
   ====================================================== */
.encabezado {
    margin-top: 40px;
    margin-bottom: 20px;
}

.logo {
    width: 300px;
    height: 300px;
    /* object-fit asegura que si la imagen no es cuadrada, no se deforme */
    object-fit: cover; 
    /* Un ligero resplandor azul alrededor del logo para el toque "tech" */
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.2);
    border-radius: 15px; /* Bordes ligeramente redondeados (puedes cambiarlo a 50% para que sea un círculo) */
}

/* ======================================================
   CONTENIDO PRINCIPAL
   ====================================================== */
.contenido-principal {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1; /* Empuja el footer hacia abajo */
    width: 100%;
}

.titulo-resaltado {
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
    /* Efecto resaltado: Fondo con gradiente tecnológico y texto transparente para que tome el color del fondo */
    background: linear-gradient(90deg, #38bdf8, #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
    /* Pequeño sombreado (resplandor) para mayor énfasis */
    text-shadow: 0px 4px 15px rgba(56, 189, 248, 0.3);
}

.frase-bienvenida {
    font-size: 1.2rem;
    font-weight: 400;
    color: #cbd5e1; /* Un gris claro para contrastar sutilmente con el título */
    margin-bottom: 40px;
    max-width: 600px;
    line-height: 1.5;
}

/* ======================================================
   BOTÓN DINÁMICO
   ====================================================== */
.boton-vecinos {
    display: inline-block;
    background-color: #ef4444; /* Rojo vibrante */
    color: #ffffff; /* Letras blancas */
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none; /* Quita el subrayado típico de los enlaces */
    padding: 20px 40px; /* Hace que el botón sea grande (alto y ancho) */
    border-radius: 50px; /* Bordes totalmente redondeados en los extremos */
    
    /* Configuración de la transición para los efectos al pasar el ratón */
    transition: all 0.3s ease;
    /* Sombreado rojo intenso para darle profundidad */
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
}

/* Efecto al pasar el ratón (Hover) */
.boton-vecinos:hover {
    background-color: #dc2626; /* Un rojo un poco más oscuro */
    transform: translateY(-5px); /* El botón "sube" un poquito */
    box-shadow: 0 12px 30px rgba(239, 68, 68, 0.6); /* El resplandor se hace más grande */
}

/* Efecto al hacer clic (Active) */
.boton-vecinos:active {
    transform: translateY(2px); /* El botón se "hunde" simulando presión */
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3); /* El resplandor disminuye */
}

/* ======================================================
   PIE DE PÁGINA (FOOTER)
   ====================================================== */
.pie-pagina {
    text-align: center;
    padding: 20px;
    font-size: 0.9rem;
    color: #64748b; /* Gris oscuro para no distraer */
    width: 100%;
    margin-top: 40px;
    border-top: 1px solid #1e293b; /* Una línea sutil para separar el pie */
}

/* ======================================================
   ADAPTABILIDAD A DISPOSITIVOS MÓVILES (RESPONSIVE)
   ====================================================== */
/* Cuando la pantalla es menor a 768px (teléfonos), se aplican estos estilos */
@media (max-width: 768px) {
    .logo {
        /* En móviles, reducimos un poco el logo para que no ocupe todo el espacio */
        width: 200px;
        height: 200px;
    }

    .titulo-resaltado {
        font-size: 1.8rem; /* Título más pequeño */
    }

    .frase-bienvenida {
        font-size: 1rem;
        padding: 0 15px; /* Evita que el texto toque los bordes de la pantalla */
    }

    .boton-vecinos {
        font-size: 1rem;
        padding: 15px 30px; /* Botón ligeramente más pequeño, pero fácil de tocar */
    }
}