* { 
  box-sizing: border-box;                                  /* Hace que width/height incluyan padding y borde. Evita que los elementos crezcan inesperadamente */
  margin: 0;                                               /* Quita márgenes por defecto del navegador */
  padding: 0;                                              /* Sin esto muchos elementos tendrían espacios internos automáticos */
}

html, body { height: 100%; }                               /* Fuerza a que html y body ocupen el 100% de la altura de la ventana, lo cual permite que las secciones fullscreen calculen bien su altura */

body {
  font-family: "Nunito", sans-serif;                       /* Fuente global */
  overflow-y: scroll;                                      /* Fuerza la barra de scroll visible en PC incluso cuando no se necesita */
  -webkit-overflow-scrolling: touch;                       /* Activa el “scroll suave” nativo en dispositivos iOS */
  background: #000;
  color: #fff;
}

/* Mientras el preloader está activo, ocultar contenido */
body.preloader #main,
body.preloader .navbar,
body.preloader .page-border,
body.preloader .scroll-progress {
  opacity: 0;
}

body.no-scroll {
  overflow: hidden !important;                             /* Quita la posibilidad de hacer scroll manual mientras se anima una transición */
}

/* ======================== CONTENEDOR PRINCIPAL ======================== */
#main {
  width: 100%;
  height: 100vh;                                           /* Altura igual a la del viewport */
  scroll-snap-type: y mandatory;                           /* Activa el “snap scroll”: obliga a detener el scroll en puntos definidos en el eje vertical (y). mandatory = siempre se alinea */
  -webkit-overflow-scrolling: touch;                       /* En iOS mejora la fluidez del scroll */
}

/* ======================== SECCIONES ======================== */
.panel {
  width: 100%;
  min-height: calc(var(--vh, 1vh) * 100);                  /* Altura completa basada en tu variable JS --vh. Se adapta mejor que 100vh cuando la barra del navegador aparece/desaparece */
  height: auto !important;                                 /* Permite que el contenido interno crezca si necesita más espacio */

  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  overflow: hidden;                                        /* Oculta contenido que salga del panel */

  scroll-snap-align: start;                                /* Marca dónde debe encajar la sección al hacer snap */
}

/* Fondo de cada seccion */
.panel-2 { background: linear-gradient(135deg, #95A472, #79b95d); color: #fff; }
.panel-3 { background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); color: #fff; }
.panel-4 { background: #111; color: #fff; }
.panel-5 { background: linear-gradient(135deg, #8f9e6b, #4f8339); color: #fff; }
.panel-6 { background: linear-gradient(135deg, #0a0a0a 0%, #0f1f0f 100%); color: #fff; }

/* ======================== DESACTIVAR SNAP EN MÓVILES ======================== */
@media (pointer: coarse) {                                 /* Se activa solo en pantallas táctiles (celulares/tablets) */
  html, body {
    height: auto !important;                               /* Quita la altura fija. Permite que html/body crezcan según el contenido, esto soluciona error de topes indeseados en los limites de la pagina en el celular */
    min-height: 100% !important;                           /* Asegura que html/body nunca sean más pequeños que la pantalla */
  }
  #main {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;                           /* Activa scroll nativo del móvil */
    scroll-snap-type: none !important;                     /* Desactiva el scroll-snap que en móviles causa límites y rebotes */
  }
  .panel {
    height: auto !important;
    min-height: 100vh !important;                          /* Usa altura real del viewport móvil */
    scroll-snap-align: none !important;                    /* Elimina posicionamiento forzado del snap */
  }
  .panel * {
    touch-action: pan-y !important;                        /* permite scroll vertical nativo en móviles */
  }
  body {
    overflow-y: auto !important;                           /* Asegura scroll normal */
    padding-top: 1px;                                      /* Truco para eliminar el tope superior de Safari */
    padding-bottom: 1px;
  }
  .page-border {
    display: none !important;                              /* Oculta el borde porque en móvil interfiere y causa "empujes" visuales */
  }
}

/* ======================== SECCION INICIO (SEC1) ======================== */

.background-clip { /* VIDEO DE FONDO */
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  opacity: 0.75;
  object-fit: cover;                                        /* cubre toda la pantalla sin deformarse */
  z-index: -1;                                              /* Queda detrás del contenido */
}

.btn-sec1 {
  display: inline-block;
  transition: background 0.3s, transform 0.2s;
}

#sec1 .btn-sec1:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-3px);
}

.content { z-index: 2;}                                     /* por encima del video */
.content h1 { font-size: 4.5rem; margin-bottom: 1.2rem;}
.content .verde { color: #c8e087; }                       /* Color del titulo de la seccion */

.content a {
  font-size: 1rem;
  color: #fff;
  text-decoration: none;
  border: 2px solid #fff;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  z-index: 5;
}

@media (max-width: 1024px) {
  #sec1 .content h1.verde {
    font-size: 90px;
  }

  #sec1 .content a {
    font-size: clamp(0.7rem, 2.7vw, 2.2rem);
  }
}

@media (max-width: 912px) {
  #sec1 .content h1.verde {
    font-size: 100px;
  }
  #sec1 .content a {
    font-size: clamp(1rem, 3vw, 2.5rem);
  }
}

@media (max-width: 540px) {
  #sec1 .content h1.verde {
    font-size: 65px;
  }
  #sec1 .content a {
    font-size: clamp(0.7rem, 2.7vw, 2.2rem);
  }
}

@media (max-width: 430px) {
  #sec1 .content a {
    font-size: clamp(1rem, 3vw, 2.5rem);
  }
}

@media (max-width: 375px) {
  #sec1 .content h1.verde {
    font-size: 55px;
  }
  #sec1 .content a {
    font-size: clamp(0.9rem, 2.9vw, 2.4rem);
  }
}

/* ======================== NAVBAR ======================== */
.navbar {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);                              /* centrado horizontalmente */
  z-index: 90000000;
}

.navbar ul { 
  display: flex;                                            /* elementos en línea */
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 1vw, 3rem);
  padding: 0 1rem;
  width: 100%;
  list-style: none;                                         /* sin los puntos que trae una lista */
}

.navbar a { 
    color:#fff; 
    text-decoration: none; 
    padding: 8px 12px; 
    border-radius: 6px;
    transition: background 0.3s, color 0.3s;
}
.navbar a:hover { 
  background:#fff;                                        /* indica sección que se va a seleccionar */
  color:#000; 
}

/* Quita el hover en pantallas táctiles (para evitar el “hover pegado”) */
@media (pointer: coarse) {
  .navbar a:hover {
    background: none !important;
    color: inherit !important;
  }
}

@media (max-width: 1024px) {
  .navbar {
    width: 100%;
  }
  .navbar ul {
    gap: clamp(0.8rem, 2vw, 2rem);
  }

  .navbar a {
    font-size: clamp(0.7rem, 2.5vw, 2rem);
  }
}

@media (max-width: 820px) {
  .navbar a {
    font-size: clamp(0.7rem, 2.5vw, 2rem);
    padding: 0.5rem 0.7rem;
  }
}

@media (max-width: 375px) {
  .navbar a {
    font-size: clamp(0.7rem, 1.4vw, 0.9rem);
    padding: 0.3rem 0.5rem;
  }
}

@media (max-width: 360px) {
  .navbar a {
    font-size: 0.65rem;
    padding: 0.25rem 0.45rem;
  }

  .navbar ul {
    gap: 0.4rem;
  }
}


/* ======================== PAGE BORDER ======================== */
.page-border {
  position: fixed;                                          /* Siempre visible, fija en pantalla */
  inset: 0px;                                               /* Ocupa toda la pantalla */
  border: 10px solid white;                               /* Marco blanco alrededor */
  background: transparent;                                  /* Sin relleno */
  pointer-events: none;                                     /* No bloquea clics ni scroll */
  z-index: 9999;
}

/* ======================== BARRA DE PROGRESO ======================== */
.scroll-progress {
  position: fixed;                                          /* Siempre en la misma posición */
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  overflow: hidden;
  z-index: 9999;
}

.scroll-progress-bar {
  height: 100%;
  width: 0; /* empieza vacía */
  background: #7ED957;
  border-radius: 5px;
  transition: width 0.2s linear;                            /* Animación suave al actualizar */
}

/* ======================== RESPONSIVE GLOBAL ======================== */
@media (max-width: 768px) {
  .content h1 { font-size: 2.4rem; }
  .scroll-progress { max-width: 90%; bottom: 14px; }
  .navbar ul { font-size: 60%; gap: 1px; }
  .page-border {border: 7px solid}
}