/* @import "./slider.css";*/
@import './wa.css';
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

* {
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

/* MOBILE FIRST STYLES (por defecto) */
header {
  background-color: #a3bfff; /* Color de fondo para todo el header */
  padding: 1rem; /* Padding general para el header */
  /* Para móviles, el header no es fijo por defecto, se define en la media query */
  max-width: 1200px; /* Establece el ancho máximo del cuerpo */
  margin: 0 auto; /* Centra el body horizontalmente */
}

.header-top {
  text-align: center; /* Centra el h1 en móvil */
  margin-bottom: 1rem; /* Espacio entre el h1 y la navbar en móvil */
}

h1 {
  font-size: 1.5em;
  text-align: center;
  margin: 0;
}
h2 {
  font-size: 2.7em;
  text-align: center;
}
h3 {
  font-size: 2em;
  text-align: center;
  color: red;
}
h4 {
  font-size: 1.2;
  margin: 0;
  font-weight: normal;
}
/* h4::before {
  content: '— ';
  color: #fa0505;
  font-weight: bold;
} */
/* p {
  font-size: 0.9em;
  margin: 10px;
  text-align: justify;
  padding: 5px 30px;
} */
p {
  /* Usamos Inter para un look más tecnológico y limpio */
  font-family: 'Inter', 'Open Sans', sans-serif;
  font-size: 1.05rem;
  line-height: 1.7; /* Crucial para que el texto no se sienta amontonado */
  color: #000000; /* Un gris pizarra oscuro: mucho más elegante que el negro puro #334155*/
  text-align: left; /* Recomendación: el justificado en web suele crear huecos feos */
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em; /* Toque sutil de diseño moderno */
}

/* Para las listas de beneficios o puntos clave */
li {
  font-family: 'Inter', sans-serif;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 8px;
}
.button {
  text-decoration: none;
  font-size: 1.2em;
}
i {
  width: 33px;
  height: 33px;
  margin: 15px;
  font-size: 2.5em;
}

.big a {
  font-size: 1.4em;
  margin-left: 15px;
}
.biga a {
  margin-left: 5px;
}
.biga {
  text-align: left;
}
.big {
  margin: 0;
  padding: 0;
}

.header-top h1 {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  text-align: center;
  text-shadow:
    2px 2px 0px rgba(255, 255, 255, 1),
    4px 4px 10px rgba(0, 0, 0, 0.1);
  letter-spacing: 1px;
}

.header-top h1 span {
  color: #555;
  font-style: italic;
  font-weight: 300;
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #a3bfff;
  position: relative; /* ¡Añade esta línea! */
}

.logo-link {
  display: none; /* El logo está oculto por defecto en móviles */
}
.logo {
  position: relative;
  top: -30px;
}

.menu-toggle {
  display: block; /* El botón de hamburguesa se muestra en móviles */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.hamburger {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #333;
  margin: 5px 0;
}

.nav-menu {
  display: none; /* El menú está oculto por defecto */
  flex-direction: column;
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #a3bfff;
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 10001;
}

.nav-menu.active {
  display: flex; /* Se muestra cuando tiene la clase 'active' */
}

.nav-menu li a {
  display: block;
  padding: 1rem;
  text-align: center;
  text-decoration: none;
  color: #333;
}
body {
  /* Aquí van las propiedades que ya teníamos, como padding-top */
  padding-top: 0; /* Asegúrate de mantener este valor para evitar solapamiento */

  /* Degradado de color azul de izquierda a derecha */
  /* background: linear-gradient(to right, #A3BFFF, #568AFF);  */
  background: #38b6e8;
  background: linear-gradient(
    90deg,
    rgba(56, 182, 232, 1) 0%,
    rgba(87, 199, 133, 1) 82%,
    rgba(237, 221, 83, 1) 100%
  );
  /* Colores sugeridos: #e0f2f7 (azul muy claro), #a7d9ee (azul claro) */
  /* Puedes ajustar los códigos hexadecimales para obtener los tonos exactos que desees. */
  max-width: 1200px; /* Establece el ancho máximo del cuerpo */
  margin: 0 auto; /* Centra el body horizontalmente */
  position: relative; /* Ayuda a contener capas si fuera necesario */
}
html,
body {
  overflow-x: hidden; /* Evita que cualquier elemento que se salga un poco cree scroll horizontal */
  width: 100%;
}
/* p {
  text-align: justify;
  hyphens: auto;
} */
section {
  padding: 15px;
}
/* .video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; 
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 30px;
} */

/* Estado inicial del contenedor de video: MINIMIZADO */
.video-container {
  position: relative;
  max-width: 400px; /* Tamaño por defecto minimizado */
  height: 225px; /* Altura fija para el estado minimizado (16:9 de 400px) */
  overflow: hidden;
  transition: all 0.5s ease-in-out;
  margin: 0 auto;
  cursor: pointer;
}

.video-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover; /* Esto es lo que causa el recorte */
  transition: all 0.5s ease-in-out;
}

/* ESTADO MAXIMIZADO: Se aplica con JavaScript */
.video-container.playing {
  max-width: 100%;
  /* Quitamos el height y usamos padding-top para mantener la proporción de 16:9 */
  height: auto;
  padding-top: 56.25%;
}

/* El video dentro del contenedor .playing se ajusta para mantener la proporción */
.video-container.playing video {
  object-fit: contain; /* ¡CAMBIO CLAVE! Evita el recorte y lo ajusta a la proporción */
}

/* El botón de play y su estado */
.play-button-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  font-size: 3rem;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 10px 20px;
  cursor: pointer;
  transition: opacity 0.3s ease-in-out;
}

.video-container.playing .play-button-overlay {
  opacity: 0;
  pointer-events: none;
}
/* .enlaces-videos {
  text-align: center;
  padding: 20px 0;
}
.enlaces-videos h2 a {
  text-decoration: none;
  color: #333;
  transition: color 0.3s ease;
}

.enlaces-videos h2 a:hover {
  color: #f41919; 
} */

/* 1. Centramos el contenedor y le damos espacio */
.enlaces-videos {
  text-align: center;
  margin: 20px 0 40px 0; /* Margen: arriba, laterales, abajo */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px; /* Espacio uniforme entre los botones */
}

/* 2. Quitamos márgenes por defecto de los h2 para que el gap mande */
.enlaces-videos h2 {
  margin: 0;
  font-size: 1.2rem;
}

/* 3. Estilo de Botón para los enlaces */
.enlaces-videos h2 a {
  display: inline-block;
  min-width: 280px; /* Ancho mínimo para que todos se vean iguales */
  padding: 12px 20px;
  background-color: rgba(255, 255, 255, 0.15);
  color: white;
  text-decoration: none;
  border: 2px solid white;
  border-radius: 30px;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px); /* Efecto cristal */
}

/* 4. Efecto Hover */
.enlaces-videos h2 a:hover {
  background-color: white;
  color: #38b6e8; /* El color de tu fondo */
  transform: scale(1.05); /* Crece un poquito */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.home-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  background-color: #0056b3;
  border: 2px solid white;
  border-radius: 50%;
  color: white;
  text-decoration: none;
  position: fixed;
  bottom: 20px;
  left: 20px; /* Lado opuesto a WhatsApp */
  z-index: 9999;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.home-button i {
  font-size: 1.8rem;
}
header {
  position: sticky; /* O fixed, como lo tengas */
  top: 0;
  z-index: 10000; /* Un nivel abajo del menú, pero arriba del contenido */
}
/* DETALLES DEL CONTACTO */
#detalles-contacto {
  margin: 10px;
  padding: 10px;
}

#contenedor-datos h4 {
  margin: 10px;
  padding: 10px;
}
#contenedor-datos form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#contenedor-datos form input,
textarea {
  margin: 10px 20px;
  font-size: 1.3em;
  width: 300px;
  /* font-weight: bold; */
  /* max-width: 300px; */
}
/* #contenedor-datos form button {
  
} */
#mensaje {
  min-width: 270px;
}
#formularioContacto button,
.deleteBtn,
#cerrar {
  font-size: 1.25em;
  font-weight: bold;
  padding: 10px 10px;
  border-radius: 10px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  color: white;
  background-color: rgb(232, 33, 30);
  width: 150px;
  text-align: center;
  margin: 40px;
  cursor: pointer;
  transition: all 0.3s ease;
}
#consulta-por-fechas,
#mostrar-todos,
#cerrarmensajes {
  font-size: 1.25em;
  font-weight: bold;
  padding: 10px 10px;
  border-radius: 10px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  color: white;
  background-color: rgb(232, 33, 30);
  width: 250px;
  text-align: center;
  margin: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}
#formularioContacto button:hover {
  background-color: rgb(142, 72, 63);
}
.deleteBtn:hover {
  background-color: rgb(142, 72, 63);
}

/* TABLA DE DATOS */
#divtabla {
  /* position: relative; */
  overflow-x: auto;
}
table {
  position: absolute;
  left: 20px;
  margin-left: 8px;
  border-collapse: collapse;
  border: rgb(5, 5, 5) 2px solid;
  text-align: center;
  background-color: rgb(255, 255, 255);
  font-size: 0.7em;

  /* width: 300px;  Asegura que la tabla ocupe todo el ancho disponible dentro del contenedor */
  border-collapse: collapse;
  /*white-space: nowrap;  Evita que el texto de las celdas se envuelva y fuerza el scroll */
  /* max-width: 900px; */
}
.tdd {
  text-align: center;
  border: rgba(3, 3, 3, 0.783) 2px solid;
}

th {
  padding-left: 5px;
  padding-right: 5px;
  border: rgba(3, 3, 3, 0.783) 2px solid;
}
/* FECHAS */
.divrango {
  display: flex;
  flex-direction: row;
  padding: 10px;
}
.divrango label {
  display: block;
  width: 100px;
  text-align: right;
  margin-right: 5px;
  font-weight: bold;
}
.deleteBtn {
  padding: 0;
  margin: 3px;
  height: 20px;
  width: 50px;
  font-size: 0.9em;
  font-weight: normal;
  border-radius: 20px;
}
#detalles-contacto h4 {
  color: red;
  font-size: 1em;
}
#contenedor-datos h4 {
  color: #1a1a1a; /* Color oscuro para mejor contraste con el fondo degradado */
  font-size: 1.3em; /* Más grande en móvil */
  font-weight: bold;
  line-height: 1.5; /* Mejor espaciado entre líneas */
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4); /* Sombra suave para resaltar */
}
#inppsw {
  font-size: 1.5em;
}

/* #contador {
  display: inline-block;
  margin-top: 25px;
  font-size: 1.2em;
  font-weight: bold;
  border-radius: 5px;
  background-color: blue;
  color: white;
  padding: 10px;
  box-shadow:
    inset 0 -3em 3em rgb(0 200 0 / 30%),
    0 0 0 2px white,
    0.3em 0.3em 1em rgb(200 0 0 / 80%);
} */

.contenedor-imagen-texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.contenedor-imagen-texto figure {
  margin: 0;
}

#cont-mensaje .container h2 {
  margin: 10px;
}
#cont-mensaje .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
main {
  text-align: center;
}
main #inppsw,
#cerrar {
  display: inline-block;
  margin: 10px;
  vertical-align: middle;
}
main #inppsw[hidden],
#cerrar[hidden] {
  display: none;
}
#seccion1 h2 {
  font-size: 1.2rem;
  margin-bottom: 0;
  margin-top: 5px;
}
#seccion1 p {
  margin-bottom: 0;
  margin-top: 5px;
  padding: 0;
}
/* Títulos Principales */
h1,
h2 {
  color: #0f172a; /* Azul casi negro, muy profundo */
  font-family:
    'Montserrat', sans-serif; /* Si puedes importarla, es ideal para títulos */
  font-weight: 800;
}

/* Ajuste al Header (Efecto cristal sutil) */
header {
  background-color: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(
    12px
  ); /* Esto le da el toque moderno de iPhone/Windows */
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* El degradado ahora lo usamos solo para lo que queremos que RESALTE */
.enlaces-videos h2 a {
  background: linear-gradient(135deg, #38b6e8 0%, #25d366 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(56, 182, 232, 0.2);
  color: white;
}
/* Dale un aire de tarjeta a tus secciones de texto sin bordes pesados */
section {
  padding: 40px 20px;
  background-color: transparent; /* Mantenemos tu fondo claro */
}

/* Resaltado de palabras clave dentro de tus párrafos */
strong {
  color: #0b2af6; /* Azul eléctrico sutil #0284c7 */
  font-weight: 600;
}
/* TABLET AND DESKTOP STYLES (min-width: 768px) */
@media (min-width: 768px) {
  /* h1 {
    font-size: 2.5em;
    text-align: center;
    padding-top: 2rem; 
  }
  .navbar {
    display: flex;
    justify-content: space-between; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 1000; 
  } */

  .home-button {
    display: none;
  }

  main {
    margin-top: 20px;
  }

  header {
    display: flex;
    flex-direction: column; /* El header se organiza en columna */
    position: fixed; /* Ahora todo el header es fijo */
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 0; /* Reinicia el padding general del header si es necesario */
  }
  .header-top {
    text-align: center; /* Alinea el h1 a la izquierda */
    padding: 1rem; /* Padding para el h1 */
    width: 100%;
    margin-bottom: 0; /* Elimina el margen inferior */
  }

  h1 {
    font-size: 2.5em;
    margin: 0; /* Elimina el margen por defecto para un mejor control */
  }

  .navbar {
    display: flex;
    justify-content: space-between; /* Alinea logo a izquierda y menú a derecha */
    align-items: center;
    width: 100%;
    height: 60px;
    padding: 0 1rem; /* Padding para la navbar */
    background-color: #a3bfff;
  }

  /* Ocultamos el logo-link y el botón de hamburguesa en pantallas pequeñas */
  .logo-link {
    display: block; /* El logo se muestra */
  }

  .menu-toggle {
    display: none; /* El botón de hamburguesa se oculta */
  }

  .nav-menu {
    display: flex; /* El menú se muestra horizontalmente */
    flex-direction: row;
    position: static;
    width: auto;
  }

  .nav-menu li a {
    padding: 0.5rem 1rem;
  }
  body {
    padding-top: 180px;
  }
  .telfs span {
    margin-left: 25px;
  }
  .biga {
    font-size: 1.2em;
  }
  .big {
    font-size: 1.3em;
  }
  .big a {
    margin-left: 15px;
    margin-right: 15px;
  }
  .biga i {
    padding-right: 55px;
  }
  #contenedor-datos h4 {
    font-size: 1.6em; /* Aumenta tamaño en escritorio */
    max-width: 800px; /* Evita que el texto sea muy largo horizontalmente */
    margin-left: auto;
    margin-right: auto;
  }
  .contenedor-imagen-texto {
    flex-direction: row;
    align-items: center;
  }

  .video-container video {
    /* position: absolute;
  top: 50%;
  left: 50%; */
    width: 80%;
    height: 80%;
    /* transform: translate(-50%, -50%);
  object-fit: cover; 
  transition: all 0.5s ease-in-out; */
  }

  .enlaces-videos {
    flex-direction: row;
    justify-content: center;
    gap: 15px; /* Espacio uniforme entre los botones */
  }
}

.home-button:active {
  transform: scale(0.8);
  background-color: white;
  color: #38b6e8;
}