/* ==========================================================================
   1. CONFIGURACIÓN CENTRAL Y VARIABLES DE DISEÑO (DESIGN TOKENS)
   ========================================================================== */
/* NOTA: Las fuentes se han movido al HTML para evitar bloqueo de renderizado */

:root {
  /* --- Paleta de Colores (Tema Dark Premium) --- */
  --color-fondo: #000;
  --color-fondo-primario: #0a0a0a;
  --color-fondo-tarjeta: #141414;
  --color-texto-primario: #ECECEC;
  --color-texto-secundario: #9CA3AF;

  /* Acentos de Marca */
  --color-acento: #F39019;
  --color-acento-hover: #f39119c7;
  --color-acento-calido: #F39019;

    /* Acentos de Marca */
  --color-acento: #0092e0;
  --color-acento-hover: #0092e0;
  --color-acento-calido: #0092e0;



  /* --- Métricas y Física de UI --- */
  --espaciado-layout: 1300px;
  --radio-tarjeta: 20px;
  --radio-pastilla: 2px;

  /* Interacción */
  --transicion-suave: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --sombra-elevacion: 0 20px 40px rgba(0, 0, 0, 0.6);
  --borde-cristal: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   2. RESET Y TIPOGRAFÍA GLOBAL
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Unbounded", sans-serif;
  background-color: var(--color-fondo-primario);
  color: var(--color-texto-primario);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Utilidad: Limpieza de clases heredadas */
.fondo-blanco {
  background-color: var(--color-fondo-primario) !important;
  color: var(--color-texto-primario) !important;
}
/* .clr-rojo{
  color: #F6020C;
  font-weight: 800;
}
.clr-azul{
  color: #0092e0;
  font-weight: 800;
}
.clr-verde{
  color:#00C942 ;
  font-weight: 800;
}
.clr-amarillo{
  color: #F7C929;
  font-weight: 800;
}
 */
h1,
h2,
h3 {
  font-family: "Unbounded", sans-serif;
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transicion-suave);
}

/* ==========================================================================
   3. NAVEGACIÓN (Glassmorphism)
   ========================================================================== */
.barra-navegacion {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: .5rem 0;
  background: var(--color-fondo);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--borde-cristal);
}

.barra-navegacion .contenedor {
  max-width: var(--espaciado-layout);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navegacion-navbar {
  display: flex;
  gap: 2.5rem;
  align-items: center;
}

.navegacion-navbar a {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 300;
  color: #ccc;
  padding: 0.5rem 0;
}

.navegacion-navbar a:hover {
  color: var(--color-acento);
}

.navegacion-navbar a p {
  margin: 0;
}

/* Disparador Móvil (Hamburguesa) */
.boton-menu-movil {
  display: none;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem;
}

/* Panel Móvil (Drawer) */
.menu-movil {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 2000;
  transition: right 0.3s ease-in-out;
  padding: 2rem;
  border-left: 1px solid var(--borde-cristal);
}

.menu-movil.activo {
  right: 0;
}

.cerrar-menu-movil {
  position: absolute;
  top: 4rem;
  right: 2.5rem;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 2.5rem;
  font-weight: 0;
  cursor: pointer;
}

.contenido-menu-movil {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 4rem;
}

.contenido-menu-movil a {
  font-size: 1.2rem;
  /*   border-bottom: 1px solid #333; */
  padding-bottom: 1rem;
  text-transform: uppercase;
  font-weight: 300;
}

.menu-movil img {
  max-width: 200px;
}

/* ==========================================================================
   4. SECCIÓN HERO (Parallax de Alto Rendimiento)
   ========================================================================== */
.seccion-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: transparent !important;
  clip-path: inset(0);
  -webkit-clip-path: inset(0);
}

.seccion-hero::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url('../assets/img/imagen-galeria-05.jpg');
  background-size: cover;
  background-position: center;
  z-index: -1;
  will-change: transform;
}

.overlay-hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
  z-index: 0;
  pointer-events: none;
}

.seccion-hero::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 350px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(to bottom,
      rgba(10, 10, 10, 0) 0%,
      rgba(10, 10, 10, 0.013) 8.1%,
      rgba(10, 10, 10, 0.049) 15.5%,
      rgba(10, 10, 10, 0.104) 22.5%,
      rgba(10, 10, 10, 0.175) 29%,
      rgba(10, 10, 10, 0.259) 35.3%,
      rgba(10, 10, 10, 0.352) 41.2%,
      rgba(10, 10, 10, 0.45) 47.1%,
      rgba(10, 10, 10, 0.55) 52.9%,
      rgba(10, 10, 10, 0.648) 58.8%,
      rgba(10, 10, 10, 0.741) 64.7%,
      rgba(10, 10, 10, 0.825) 71%,
      rgba(10, 10, 10, 0.896) 77.5%,
      rgba(10, 10, 10, 0.951) 84.5%,
      rgba(10, 10, 10, 0.987) 91.9%,
      #0a0a0a 100%);
}

.contenido-hero {
  position: relative;
  z-index: 2;
  padding: 0 2rem;
  max-width: 1000px;
  margin-left: 5vw;
}

.contenido-hero h1 {
  font-size: 4rem;
  font-weight: 500;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.5rem;
  font-style: italic;
  line-height: 1.1;
}

.contenido-hero p {
  font-size: 1.25rem;
  color: var(--color-texto-primario);
  margin-bottom: 3rem;
  max-width: 650px;
  font-weight: 300;
}

/* ==========================================================================
   5. SECCIONES Y LAYOUT GENERAL
   ========================================================================== */
.seccion {
  padding: 8rem 2rem;
  background-color: var(--color-fondo-primario);
  position: relative;
}

.contenedor,
.contenedor-inicio,
.contenedor-galeria {
  max-width: var(--espaciado-layout);
  margin: 0 auto;
}

.encabezado-seccion {
  text-align: center;
  margin-bottom: 5rem;
}

.encabezado-seccion h2 {
  font-size: 2.5rem;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.encabezado-seccion p {
  text-transform: uppercase;
  font-size: .85rem;
}

/* ==========================================================================
   6. MÓDULO 'NOSOTROS' (Integración Continua)
   ========================================================================== */
#nosotros.seccion {
  padding-top: 0;
  padding-bottom: 8rem;
  z-index: 5;
}

.nosotros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 2rem;
}

.contenido-nosotros h2 {
  font-size: 3rem;
  margin-bottom: 2rem;
  color: #fff;
  text-align: start;
}

.contenido-nosotros p {
  font-size: 1.15rem;
  color: var(--color-texto-primario);
  margin-bottom: 1.5rem;
  font-weight: 300;
  text-align: start;
}

.nosotros video {
  width: 100%;
  max-width: 400px;
  height: 450px;
  border-radius: var(--radio-tarjeta);
  object-fit: cover;
  border: 1px solid var(--borde-cristal);
  box-shadow: var(--sombra-elevacion);
}

/* ==========================================================================
   7. BANNER (Transparente para Fondo Global)
   ========================================================================== */
.seccion-banner {
  max-width: 1200px;
  margin: 4rem auto;
  padding: 5rem 3rem;
  background: transparent !important;
}

.seccion-banner .encabezado-seccion {
  margin-bottom: 0px;
}

.seccion-banner-contenido {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.seccion-banner h2 {
  color: #fff;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  font-weight: 100;
}

.seccion-banner p {
  color: #f0f0f0;
  font-size: 1rem;
  text-transform: uppercase;
  color: var(--color-acento);
  padding-top: 1rem;
  font-weight: 400;
}

.seccion-banner .material-symbols-outlined {
  color: var(--color-acento);
  font-size: 3.5rem;
  margin-top: 1.5rem;
  display: block;
}

/* ==========================================================================
   8. TARJETAS DE actividades (Interactivas)
   ========================================================================== */
.actividad {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 5rem;
  margin-bottom: 8rem;
  align-items: center;
}

.actividad.ESCALADA {
  direction: rtl;
}

.actividad.ESCALADA .contenido-actividad {
  direction: ltr;
  padding-left: 0;
  padding-right: 2rem;
}

.imagen-actividad {
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  height: 350px;
  position: relative;
  box-shadow: var(--sombra-elevacion);
}

.imagen-actividad img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}

.imagen-actividad:hover img {
  transform: scale(1.08);
}

.contenido-actividad {
  padding-left: 2rem;
}

.contenido-actividad h3 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #fff;
  font-weight: 300;
  border-left: 3px solid var(--color-acento);
  padding-left: 1rem;
}

.contenido-actividad p {
  color: var(--color-texto-secundario);
  margin-bottom: 2.5rem;
  font-weight: 300;
  font-size: 1.1rem;
}

/* ==========================================================================
   9. GRILLA DE GALERÍA
   ========================================================================== */
.galeria-galeria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
}

.elemento-galeria {
  position: relative;
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  aspect-ratio: 1/1;
  cursor: pointer;
}

.elemento-galeria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.elemento-galeria:hover img {
  transform: scale(1.1);
}

.superposicion-galeria {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 2rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95), transparent);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.elemento-galeria:hover .superposicion-galeria {
  transform: translateY(0);
}

.titulo-galeria {
  color: #fff;
  font-weight: 300;
  font-size: 1.2rem;
  letter-spacing: 1px;
}

/* Lógica para "Cargar Más" */
.elemento-oculto {
  display: none;
}

.galeria-expandida .elemento-oculto {
  display: block;
  animation: fadeIn 0.6s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.contenedor-boton-galeria {
  text-align: center;
  margin-top: 3rem;
}

.hero-kids{
  background-image: url('../assets/img/imagen-galeria-10.jpg');
  background-size: cover;
  
}
/* ==========================================================================
   10. COMPONENTES INTERACTIVOS (Botones y Enlaces)
   ========================================================================== */
.boton,
.boton-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: .7rem 1rem;
  border-radius: var(--radio-pastilla);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 0.8rem;
  cursor: pointer;
  transition: var(--transicion-suave);
}

.boton-hero {
  background-color: rgba(238, 234, 234, 0.1);
  backdrop-filter: blur(100px);
  border: 1px solid rgba(238, 234, 234, 0.5);
  font-size: 1rem;
}

.boton-hero:hover {
  transform: translateY(-3px);
}

.boton-negro {
  background-color: transparent;
  border: solid 1px var(--color-acento);
  color: var(--color-acento);
  color: var(--color-texto-primario);
  border-color: var(--color-texto-primario);
  font-family: "Unbounded", sans-serif;
}

.boton-negro:hover {
  transform: translateY(-3px);
  color: var(--color-acento);
  border-color: var(--color-acento);
}

/* ==========================================================================
   11. PIE DE PÁGINA (FOOTER)
   ========================================================================== */
.pie-pagina {
  background: #000;
  padding: 6rem 2rem 3rem;
  border-top: 1px solid #1f1f1f;
}

.cuadricula-pie {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 4rem;
  margin-bottom: 4rem;
}

.cuadricula-pie p {
  margin-top: .5rem;
}

.titulo-pie {
  color: var(--color-acento);
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.cuadricula-pie ul {
  list-style: none;
}

.cuadricula-pie ul li {
  color: var(--color-texto-secundario);
  margin-bottom: 0.8rem;
  cursor: pointer;
  transition: var(--transicion-suave);
}

.cuadricula-pie ul li:hover {
  color: #fff;
  padding-left: 8px;
}

.contacto-redes {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.contacto-redes a {
  background: var(--color-fondo);
  color: var(--color-texto-primario);
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contacto-redes a:hover {
  background: #fff;
  color: #000;
}

.fondo-pie {
  border-top: 1px solid #1f1f1f;
  padding-top: 2rem;
  text-align: center;
  color: #555;
}

/* ==========================================================================
   12. MODAL GLOBAL
   ========================================================================== */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 3000;
  justify-content: center;
  align-items: center;
}

.modal.activo {
  display: flex;
}

.contenido-modal {
  position: relative;
  max-width: 90%;
  max-height: 90vh;
  background: var(--color-fondo-tarjeta);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.cerrar-modal {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.5rem;
  z-index: 10;
  transition: background 0.2s;
}

.cerrar-modal:hover {
  background: rgba(255, 255, 255, 0.2);
}

.imagen-modal {
  width: 100%;
  max-height: 75vh;
  object-fit: contain;
  display: block;
}

.informacion-modal {
  padding: 2rem;
}

.titulo-modal {
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   13. FONDO FIJO GLOBAL (Textura)
   ========================================================================== */
.fixed-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/img/imagen-galeria-10.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.15;
  z-index: -1;
  pointer-events: none;
}

/* ==========================================================================
   14. BOTÓN WHATSAPP
   ========================================================================== */
.btn-whatsapp {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 60px;
  height: 60px;
  background-color: var(--color-acento);
  /* O usa #25D366 para verde oficial */
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 4000;
  display: flex;
  /* CLAVE: Centra el contenido */
  justify-content: center;
  /* CLAVE: Centra horizontalmente */
  align-items: center;
  /* CLAVE: Centra verticalmente */
  text-decoration: none;
  transition: transform 0.3s ease;
  padding: 0;
  /* CLAVE: Eliminamos el padding que rompía el icono */
}

.btn-whatsapp:hover {
  transform: scale(1.1);
  color: #fff;
}

/* Tamaño del SVG interno */
.btn-whatsapp svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}


/* ==========================================================================
   15. AJUSTES RESPONSIVOS
   ========================================================================== */
@media (max-width: 900px) {
  .nosotros {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .contenido-hero p {
    margin-bottom: 1rem;
  }


  .nosotros video {
    margin: 0 auto;
  }

  .actividad,
  .actividad.ESCALADA {
    grid-template-columns: 1fr;
    gap: 3rem;
    direction: ltr;
  }

  .contenido-actividad,
  .actividad.ESCALADA .contenido-actividad {
    padding: 0;
    text-align: left;
  }

  .imagen-actividad {
    height: 350px;
  }

  .btn-whatsapp {
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 768px) {
  .barra-navegacion .navegacion-navbar {
    display: none;
  }

  .barra-navegacion{
    padding: .5rem 0rem;
  }
    .barra-navegacion img{
      width: 80px;
    }
  .contenido-nosotros h2 {
    font-size: 2.5rem;
    padding-top: 2rem;
  }

  .contenido-hero {
    padding: 0px;
    margin: 0px;
    z-index: 2000;
    width: 100%;

  }

  .contenido-hero .boton-hero {
    width: fit-content;
  }

  .encabezado-seccion h2 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
  }

  .seccion-banner-contenido h2 {
    font-size: 2rem;
  }

  .boton-menu-movil {
    display: flex;
  }

  .contenido-hero h1 {
    font-size: 2.3rem;
  }

  .seccion {
    padding: 3rem 1.5rem;
  }

  .seccion-banner {
    margin: 2rem 1rem;
    padding: 3rem 1.5rem;
  }

  .cuadricula-pie {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .galeria-galeria-grid {
    grid-template-columns: 1fr;
  }

  @supports not (clip-path: inset(0)) {
    .seccion-hero {
      clip-path: none;
    }

    .seccion-hero::before {
      position: absolute;
    }
  }
}

@media (max-width: 768px) {

  /* --- 1. Ajuste de Títulos (Jerarquía Visual) --- */
  /* Reducimos drásticamente para evitar palabras cortadas y scroll excesivo */
  .contenido-hero h1 {
    font-size: 1.8rem;
    /* Antes 5rem -> Bajamos a la mitad */
    line-height: 1.1;
    margin-bottom: 1rem;
    font-weight: 400;
  }

  .contenido-hero {
    background-color: rgba(0, 0, 0, 0.35);
    padding: 1rem;
    padding-left: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

  }

  .contenido-hero p {
    font-size: .8rem;
  }

  .seccion-hero {
    height: 100vh;
  }

  .encabezado-seccion h2,
  .contenido-nosotros h2 {
    font-size: 2rem;
    /* Más legible, menos agresivo */
  }

  .seccion-banner h2 {
    font-size: 1.7rem;
  }

  .seccion-banner p {
    font-weight: 500;
    letter-spacing: 1px;
    font-size: 0.8rem;
  }

  /* --- 2. Ajuste de Botones (Ley de Fitts) --- */
  /* Los botones píldora grandes molestan en móvil si el texto es largo */
  .boton,
  .boton-hero {
    padding: 0.4rem 1rem;
    /* Menos padding lateral */
    font-size: 0.75rem;
    /* Texto un poco más compacto */
    width: auto;
    /* Que se adapte al contenido */
    max-width: 100%;
    /* Que no se salga de pantalla */
    white-space: nowrap;
    /* Evita que el texto se parta en dos líneas */
  }

  /* Ajuste específico para el botón del Hero para que quepa bien */
  .boton-hero {
    margin-top: 1rem;
    padding: 0.4rem 1rem;

      background-color: transparent;

  }

  .cuadricula-pie p{
    font-size: 0.8rem;
  }
  /* --- 3. Espaciados (Ritmo Vertical) --- */
  /* 8rem de padding en móvil es demasiado espacio vacío */
  .seccion {
    padding: 4rem 1.5rem;
    /* Reducido a la mitad */
  }

  .seccion-hero {
    min-height: 85vh;
    /* Evita problemas con la barra de navegación móvil */
  }

  .nosotros video {
    height: 450px;
  }

  .contenido-nosotros p {
    font-size: 1rem;
  }

  /* --- 4. Galería y Tarjetas --- */
  .actividad {
    gap: 2.5rem;
    margin-bottom: 4rem;
  }

  .contenido-actividad h3 {
    font-size: 1.8rem;
    border-left-width: 3px;
    /* Borde más sutil */
  }

  .elemento-galeria {
    /* Hacemos las imágenes un poco menos altas en móvil para ver más contexto */
    aspect-ratio: 4/4;
  }

  /* --- 5. Modal --- */
  .contenido-modal {
    width: 95%;
    max-height: 80vh;
  }

  .titulo-modal {
    font-size: 1.2rem;
  }

  .seccion-hero::after {
    height: 320px;
  }

  .contenido-nosotros h2 {
    margin-bottom: 1rem;
  }
}

/* Ajustes para pantallas MUY pequeñas (iPhone SE, etc) */
@media (max-width: 380px) {
  .contenido-hero h1 {
    font-size: 2rem;
  }

  .boton-hero {
    font-size: 0.8rem;
    padding: 0.8rem 1.2rem;
  }
}