/* ==========================================
   DOCUMENTACIÓN DE ESTILOS PERSONALIZADOS
   ========================================== */

/* Ajustes globales para congelar la pantalla sin scroll */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* Restricción estricta de no-scroll */
  font-family: 'Segoe UI', Roboto, sans-serif;
}

body {
  /* 1. Definimos la ruta de la imagen de fondo */
    background-image: url('cover.jpg');
    
    /* 2. Centramos la imagen horizontal y verticalmente */
    background-position: center center;
    
    /* 3. Evitamos que la imagen se duplique en pantallas grandes */
    background-repeat: no-repeat;
    
    /* 4. Forzamos a la imagen a cubrir toda la pantalla de forma proporcional */
    background-size: cover;
    
    /* 5. Aseguramos que el fondo se quede fijo en su posición */
    background-attachment: fixed;
}

/* Estilo del texto del logo superior */
.logo-texto {
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 1px;
  opacity: 0.9;
}

/* Estilo del título principal (Simulando la imagen de referencia) */
.texto-titulo {
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 8px;
  /* Espaciado ancho de caracteres */
}

/* Estilo del párrafo descriptivo */
.texto-descripcion {
  font-weight: 300;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}

/* Botón personalizado estilo "Outline" redondeado */
.btn-notificar {
  display: inline-block;
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.7);
  padding: 12px 45px;
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 30px;
  /* Hace el botón ovalado */
  text-decoration: none;
  transition: all 0.3s ease;
  /* Transición suave para la animación interactiva */
}

/* Efecto visual cuando el usuario pasa el cursor sobre el botón */
.btn-notificar:hover {
  background-color: #ffffff;
  color: #0a192f;
  /* Toma el color azul marino del fondo */
  border-color: #ffffff;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
  /* Destello sutil */
}