/* =========================================================
   style.css - Kahwz (Optimizado, Sistema B: navbar moderno)
   - Variables de color y tamaño
   - Estilos globales / reset
   - Header / Nav (desktop + mobile)
   - Mobile panel (off-canvas)
   - Main / sections
   - Gallery / map / video styles
   - Fondo: carrusel (animación) + clases para bg por página
   - Media queries responsivos
   ========================================================= */

/* ---------------------------
   VARIABLES (fáciles de cambiar)
   --------------------------- */
:root{
  --header-height: 72px;              /* alto del header */
  --max-content-width: 1100px;        /* ancho máximo del contenido */
  --brand-size: 12rem;                /* tamaño para "kahwz" */
  /* Paleta: los colores del carrusel */
  --c0: #000000;   /* negro (inicio/fin) */
  --c1: #00FF9C;   /* verde neón */
  --c2: #0055FF;   /* azul profundo */
  --c3: #00CED1;   /* turquesa */
  --c4: #FF007F;   /* fucsia */
  --c5: #6A0DAD;   /* morado intenso */
  --text: #ffffff; /* color de texto por defecto */
}

/* ---------------------------
   RESET BASICO
   --------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; } /* reset básico */
html, body { height: 100%; }                           /* asegurar altura 100% */
body{
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);          /* texto blanco por defecto */
  background: var(--c0);       /* fondo por defecto negro */
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;         /* evitar scroll horizontal */
}

/* ---------------------------
   FONDO: CARRUSEL (animación)
   - .bg-carousel es la animación completa
   - .bg-1..bg-5 permiten asignar un solo color a la página
   --------------------------- */
@keyframes kahwz-carousel {
  0%   { background-color: var(--c0); }
  16%  { background-color: var(--c1); }
  32%  { background-color: var(--c2); }
  48%  { background-color: var(--c3); }
  64%  { background-color: var(--c4); }
  80%  { background-color: var(--c5); }
  100% { background-color: var(--c0); }
}
/* clase para activar el carrusel (index y contacto) */
.bg-carousel{
  animation: kahwz-carousel 18s linear infinite;
  background-color: var(--c0); /* fallback */
}

/* clases para BG estático (una fase del carrusel) */
.bg-1{ background-color: var(--c1); } /* verde */
.bg-2{ background-color: var(--c2); } /* azul profundo */
.bg-3{ background-color: var(--c3); } /* turquesa */
.bg-4{ background-color: var(--c4); } /* fucsia */
.bg-5{ background-color: var(--c5); } /* morado */

/* ---------------------------
   HEADER / NAV (estructura única)
   - .site-header: contenedor fijo superior
   - .site-nav: layout centrado con menú desktop
   - .nav-list: lista de enlaces (desktop)
   - .menu-toggle: botón hamburguesa (mobile)
   - .mobile-panel: panel flotante que se abre en mobile
   --------------------------- */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.28); /* ligera cinta translúcida */
  backdrop-filter: blur(6px);
  z-index: 1000;
  padding: 0 20px;
}

/* nav container (centra el contenido con max-width) */
.site-nav{
  width: 100%;
  max-width: var(--max-content-width);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* lista horizontal para desktop */
.nav-list{
  list-style: none;
  display: flex;
  gap: 36px;
  align-items: center;
  margin: 0;
  padding: 0;
}
.nav-list a{
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.6px;
  font-size: 1.05rem;
  transition: opacity .18s ease, transform .18s ease;
}
.nav-list a:hover{ opacity: .8; transform: translateY(-2px); }

/* boton hamburguesa (oculto en desktop; visible en mobile) */
.menu-toggle{
  display: none;              /* se muestra en mobile via media queries */
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 34px;
  background: transparent;
  border: none;
  cursor: pointer;
  gap: 6px;
  padding: 8px;
}
.menu-toggle .bar{
  display: block;
  width: 28px;
  height: 3px;
  background: var(--text);
  border-radius: 3px;
  transition: transform .2s ease, opacity .2s ease;
}

/* cuando el toggle está activo (transforma a X) */
.menu-toggle.active .bar:nth-child(1){ transform: rotate(45deg) translate(5px,5px); }
.menu-toggle.active .bar:nth-child(2){ opacity: 0; transform: translateX(-6px); }
.menu-toggle.active .bar:nth-child(3){ transform: rotate(-45deg) translate(5px,-5px); }

/* PANEL MÓVIL (off-canvas flotante) */
.mobile-panel{
  display: none; /* controlado por JS */
  position: fixed;
  top: calc(var(--header-height) + 10px);
  right: 12px;
  width: 86%;
  max-width: 320px;
  background: rgba(0,0,0,0.94);
  padding: 16px;
  border-radius: 10px;
  z-index: 1100;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  flex-direction: column;
  gap: 12px;
}
.mobile-panel a{
  color: var(--text);
  text-decoration: none;
  font-size: 1.05rem;
  display: block;
  padding: 8px 0;
}

/* clase que muestra el panel (JS añade / quita) */
.mobile-panel.active{ display: flex; }

/* ---------------------------
   MAIN / SECTIONS
   --------------------------- */
.main-wrapper{
  width: 100%;
  margin-top: var(--header-height); /* dejar espacio para header fijo */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 32px 18px 80px;
  box-sizing: border-box;
  min-height: calc(100vh - var(--header-height));
}

/* home center: pantalla completa con la marca */
.home-center{
  display:flex;
  justify-content:center;
  align-items:center;
  height: calc(100vh - var(--header-height) - 40px);
  text-align:center;
  padding: 20px;
}
.brand{
  font-size: var(--brand-size);
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: 6px;
  color: var(--text);
  margin: 0;
}

/* título de sección por debajo del header */
.section-top{
  width: 100%;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top: 18px;
  box-sizing: border-box;
}
.page-title{
  margin-top: 6px;
  font-size: calc(var(--brand-size) * 0.7); /* 70% del tamaño de la marca por defecto */
  font-weight: 600;
  text-transform: lowercase;
  background: rgba(255,255,255,0.06);
  padding: 10px 18px;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.12);
  color: var(--text);
  max-width: calc(var(--max-content-width) - 40px);
  text-align:center;
}

/* contenido de las secciones */
.section-center{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  flex-direction:column;
  gap: 18px;
  width:100%;
  max-width: var(--max-content-width);
  padding: 18px;
  box-sizing: border-box;
  min-height: calc(60vh);
}

/* galería de imágenes */
.gallery{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
}
.gallery img{
  width:320px;
  max-width:100%;
  height:auto;
  object-fit:cover;
  border-radius:12px;
  border:2px solid rgba(255,255,255,0.08);
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
}

/* mapa */
.map-box{
  width:100%;
  max-width:900px;
  height:450px;
  border-radius:12px;
  overflow:hidden;
  border:2px solid rgba(255,255,255,0.08);
  box-shadow:0 8px 30px rgba(0,0,0,0.3);
  background:#000;
}

/* videos */
.video-gallery{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  justify-content:center;
}
.video-gallery iframe{
  width:360px;
  max-width:100%;
  height:215px;
  border-radius:10px;
  border:2px solid rgba(255,255,255,0.08);
}

/* texto contacto */
.contact-text{
  font-size:1.05rem;
  line-height:1.6;
  max-width:900px;
  text-align:center;
}

/* imagen container */
.image-container{ width:100%; display:flex; justify-content:center; align-items:center; padding:6px; }

/* ---------------------------
   ACCESIBILIDAD Y UTILIDADES
   --------------------------- */
body.menu-open { overflow: hidden; } /* evitar scroll cuando panel movil abierto */

/* ---------------------------
   MEDIA QUERIES RESPONSIVOS
   --------------------------- */
@media (max-width: 1200px){
  :root{ --brand-size: 10rem; } /* reducir la marca en pantallas medianas */
}

@media (max-width: 992px){
  :root{ --brand-size: 8.5rem; }
  .gallery img{ width:280px; }
}

@media (max-width: 768px){
  /* header padding menor en mobile */
  .site-header{ padding: 0 12px; }

  /* ocultar menú desktop y mostrar hamburguesa */
  .nav-list{ display:none; }
  .menu-toggle{ display:flex; }

  /* home marca menor */
  :root{ --brand-size: 6.2rem; }
  .home-center{ height: calc(80vh - var(--header-height)); padding:12px; }

  /* ajustar títulos en mobile para evitar overflow */
  .page-title{ font-size: 2.8rem; line-height:1.1; padding:8px 12px; }

  /* se fuerza el stack vertical: titulo arriba, contenido debajo */
  .section-center{ padding:12px; min-height:auto; }
  .gallery img{ width:92%; height:auto; }
  .map-box{ width:92%; height:320px; }
  .video-gallery iframe{ width:92%; height:199px; }
  .image-container img{ width:95%; height:auto; }
}

/* ---------------------------
   FIN DE STYLE.CSS
   --------------------------- */