/* Correcciones para biosferaWebsite — versión consolidada */

:root {
  --biosfera-brand-cyan: #2caebf;
}

html,
body {
  overflow-x: hidden;
}

/* Logo y navbar desktop: evita desplazamientos por las animaciones */
.logo-with-letters-container > a[aria-label="Ir al inicio"],
.logo-with-letters-container > a[aria-label="Ir al inicio"] > div,
#menu-button-main {
  transform: none !important;
}

.logo-with-letters-container > a[aria-label="Ir al inicio"] {
  flex-shrink: 0 !important;
  pointer-events: auto;
}

.logo-with-letters-container > a[aria-label="Ir al inicio"] svg {
  flex-shrink: 0;
}

.logo-with-letters-container .navbar {
  pointer-events: auto;
}

/* Hero: Naturaleza (Rock Salt) */
#hero-text h2.hero-title-nature {
  font-family: "Rock Salt", cursive !important;
  color: #2caebf !important;
  font-size: clamp(4.8rem, 10.8vw, 8.25rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.035em !important;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.58);
  white-space: nowrap;
}

/* Hero: y Desarrollo (Bebas Neue) — nowrap para mantenerlo en una sola línea */
#hero-text h2.hero-title-development {
  font-family: "Bebas Neue", sans-serif !important;
  color: #ffffff !important;
  font-size: clamp(4.5rem, 12vw, 9rem) !important;
  line-height: 0.92 !important;
  letter-spacing: 0.01em;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.6);
  white-space: nowrap !important;
}

/* Áreas de trabajo */
.area-card-title {
  line-height: 1.08 !important;
  color: var(--biosfera-brand-cyan) !important;
  font-weight: 600 !important;
}

.area-card-description {
  line-height: 1.42 !important;
  margin-top: 1rem !important;
}

/* Ríos Samalá y Ocosito: la foto es 4:3 dentro de un contenedor 16:9.
   El recorte centrado por defecto cortaba las cabezas de las personas
   en la parte de arriba; se recorta solo por abajo. */
img[src*="rio_samala.jpg"] {
  object-position: top !important;
}

/* Separador delgado y transparente entre cada área apilada (móvil).
   Solo aplica al título que viene justo después del contenido de otra
   área, así el primer título (bajo el encabezado "Áreas de trabajo")
   queda sin línea. */
div[id$="-card-content"] + div[id$="-card-title"] {
  border-top: 1px solid rgba(44, 174, 191, 0.25);
  margin-top: 0.5rem;
  padding-top: 1.5rem;
}

#region_metropolitana-card,
#lago_de_atitlan-card,
#rio_samala_y_ocosito-card,
#sierra_de_las_minas-card {
  gap: 1.25rem !important;
}

#region_metropolitana-card-content,
#lago_de_atitlan-card-content,
#rio_samala_y_ocosito-card-content,
#sierra_de_las_minas-card-content {
  display: flex;
  flex-direction: column;
}

/* Líneas de trabajo (tabs) */
#lines-container button[class^="line-"],
#mobile-lines-container button[class^="line-"] {
  line-height: 1.12 !important;
}

#lines-container p[class^="line-"],
#mobile-lines-container p[class^="line-"] {
  line-height: 1.36 !important;
}

#lines-container .relative.min-h-\[30vh\] {
  min-height: 34vh !important;
}

/* Tráfico de usuarios: oculto por defecto, solo visible para admins */
[data-feature="user-traffic"],
[data-traffic-users],
#user-traffic,
#traffic-users,
.user-traffic-visualization,
.traffic-users-visualization,
.trafico-usuarios,
.traffic-usuarios {
  display: none !important;
}

html[data-user-role="admin"] [data-feature="user-traffic"],
html[data-user-role="admin"] [data-traffic-users],
html[data-user-role="admin"] #user-traffic,
html[data-user-role="admin"] #traffic-users,
html[data-user-role="admin"] .user-traffic-visualization,
html[data-user-role="admin"] .traffic-users-visualization,
html[data-user-role="admin"] .trafico-usuarios,
html[data-user-role="admin"] .traffic-usuarios,
body[data-user-role="admin"] [data-feature="user-traffic"],
body[data-user-role="admin"] [data-traffic-users],
body[data-user-role="admin"] #user-traffic,
body[data-user-role="admin"] #traffic-users,
body[data-user-role="admin"] .user-traffic-visualization,
body[data-user-role="admin"] .traffic-users-visualization,
body[data-user-role="admin"] .trafico-usuarios,
body[data-user-role="admin"] .traffic-usuarios {
  display: revert !important;
}

/* Página Apps: todas las tarjetas comparten la misma altura de imagen para
   que los títulos y descripciones queden alineados entre columnas. */
.apps-card-media {
  aspect-ratio: 16 / 10;
  height: auto !important;
}

.apps-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   Navbar: opción destacada "Observatorio del Agua"
   Sin caja ni botón y sin tocar la tipografía. El texto queda
   BLANCO como el resto (el celeste lo apagaba en vez de
   resaltarlo) y destaca por tamaño —algo mayor que las demás—
   más el trazo de tiza celeste fijo debajo, en lugar de aparecer
   solo al pasar el cursor.
   ============================================================ */
.navbar-button.navbar-cta {
  color: #ffffff !important;
  scale: 1.14;
  text-shadow: 0 0 12px rgba(44, 174, 191, 0.8), 0 1px 3px rgba(0, 0, 0, 0.5);
}

.navbar-button.navbar-cta > div {
  opacity: 1 !important;
  clip-path: inset(0 0 0 0) !important;
  background-color: #2caebf !important;
}

/* Conserva la ampliación al pasar el cursor que tienen las demás
   opciones; sin esta regla el `scale` de arriba la anularía. */
.navbar-button.navbar-cta:hover,
.navbar-button.navbar-cta:focus-visible {
  scale: 1.5;
}

@media (min-width: 768px) {
  .logo-with-letters-container {
    align-items: flex-start !important;
  }

  /* El contenedor interno tenía un tope de 48rem que ya no alcanza para
     las seis opciones; se libera y se ajusta la separación. */
  .logo-with-letters-container .navbar {
    padding-left: 1.25rem !important;
  }

  .logo-with-letters-container .navbar > div {
    max-width: none !important;
    margin-right: 1.25rem !important;
    gap: 0.4rem !important;
  }

  .logo-with-letters-container .navbar .navbar-button {
    white-space: nowrap;
    margin-left: 0.7rem !important;
    margin-right: 0.7rem !important;
  }

  /* La opción destacada va ampliada: necesita algo más de aire alrededor. */
  .logo-with-letters-container .navbar .navbar-button.navbar-cta {
    margin-left: 1.15rem !important;
    margin-right: 1.15rem !important;
  }

  #biosfera-mobile-menu-fallback {
    display: none !important;
  }

  /* En escritorio el logo ya se muestra en .logo-with-letters-container */
  #biosfera-logo-top-right {
    display: none !important;
  }
}

/* Pantallas anchas: el bloque cabe de sobra, así que se corre un poco a la
   izquierda para que la última opción no quede pegada al borde derecho. */
@media (min-width: 1366px) {
  .logo-with-letters-container {
    left: 46% !important;
  }
}

/* Escritorio angosto: se compacta la separación entre opciones para que las
   seis quepan sin empujar el logo fuera de la pantalla. */
@media (min-width: 768px) and (max-width: 1365px) {
  .logo-with-letters-container .navbar {
    padding-left: 0.75rem !important;
  }

  .logo-with-letters-container .navbar > div {
    margin-right: 0.5rem !important;
    gap: 0.1rem !important;
  }

  .logo-with-letters-container .navbar .navbar-button {
    margin-left: 0.15rem !important;
    margin-right: 0.15rem !important;
  }

  /* Aquí la ampliación se reduce y el margen sube, porque el escalado
     no ocupa espacio de layout y si no se solapa con "CCT-Agua". */
  .logo-with-letters-container .navbar .navbar-button.navbar-cta {
    scale: 1.08;
    margin-left: 0.85rem !important;
    margin-right: 0.85rem !important;
  }
}

/* ============================================================
   MÓVIL (≤ 767px) — icono y hero
   ============================================================ */
@media (max-width: 767px) {

  /* Contenedor original del menú móvil: queda en el DOM pero sin altura
     y sin transform. El JS mueve el botón a document.body (fuera de este
     contenedor) para que su position:fixed sea relativo al viewport.
     GSAP sigue controlando #menu (el sidebar) libremente. */
  html body .block.md\:hidden.w-full.fixed {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100vw !important;
    height: 0 !important;
    transform: none !important;
    translate: none !important;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 999 !important;
  }

  /* El botón recibe sus estilos definitivos desde el JS (setProperty 'important').
     Este bloque actúa como respaldo: esquina superior izquierda, solo el ícono
     SVG con sus colores originales (sin fondo, sin círculo). */
  html body #menu-button-main {
    display: flex !important;
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 0.85rem) !important;
    left: calc(env(safe-area-inset-left, 0px) + 0.85rem) !important;
    bottom: auto !important;
    right: auto !important;
    width: 3.75rem !important;
    height: 3.75rem !important;
    min-width: 3.75rem !important;
    min-height: 3.75rem !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2147483647 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: translate3d(0, 0, 0) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Ícono SVG: solo drop-shadow para legibilidad.
     Sin forzar color ni opacity — GSAP y las clases Tailwind
     (text-stone-800/50, opacity-0) conservan su control original. */
  html body #menu-button-main svg,
  html body #menu-button-main #mobile-logo-main,
  html body #menu-button-main #mobile-logo-active {
    pointer-events: none !important;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55)) !important;
  }

  /* Fallback de versiones anteriores: desactivado */
  html body #biosfera-mobile-menu-fallback {
    display: none !important;
  }

  /* Logo reubicado a la esquina superior derecha (respaldo CSS de lo que
     fija el JS en relocateLogoAndAddHamburger). #menu-button-main conserva
     su posición original arriba a la izquierda, ahora como icono de
     hamburguesa que abre el sidebar. */
  html body #biosfera-logo-top-right {
    display: flex !important;
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 0.85rem) !important;
    right: calc(env(safe-area-inset-right, 0px) + 0.85rem) !important;
    left: auto !important;
    bottom: auto !important;
    width: 3.75rem !important;
    height: 3.75rem !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2147483646 !important;
    pointer-events: auto !important;
  }

  html body #biosfera-logo-top-right svg {
    width: 3.5rem !important;
    height: auto !important;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55)) !important;
  }

  /* El menú móvil ya tiene fondo celeste: ahí el texto se deja en blanco
     y el trazo de tiza pasa a celeste claro para que siga siendo la
     opción distinta sin competir con la página activa. */
  html body .navbar-button.navbar-cta.mobile-menu-buttons {
    color: #ffffff !important;
    scale: 1.14;
    transform-origin: left center;
    text-shadow: 0 2px 10px rgba(9, 61, 69, 0.45) !important;
  }

  html body .navbar-button.navbar-cta.mobile-menu-buttons > div {
    background-color: #d8f7fd !important;
  }

  /* Hero texto móvil */
  #hero-text {
    max-width: calc(100vw - 2rem) !important;
  }

  #hero-text h2.hero-title-nature {
    font-size: clamp(3.3rem, 13vw, 6.4rem) !important;
    letter-spacing: -0.055em !important;
  }

  #hero-text h2.hero-title-development {
    font-size: clamp(3.5rem, 11vw, 5.5rem) !important;
    margin-top: -0.15rem !important;
  }

  /* Áreas, líneas y otros ajustes mobile */
  .area-card-title {
    font-size: clamp(1.65rem, 7vw, 2.2rem) !important;
  }

  .area-card-description {
    font-size: clamp(1.05rem, 4.6vw, 1.25rem) !important;
    line-height: 1.38 !important;
  }

  #mobile-lines-container {
    min-height: 100svh !important;
    height: auto !important;
  }

  #mobile-lines-container .relative {
    min-height: 31vh !important;
  }

  #mobile-lines-container p[class^="line-"] {
    font-size: clamp(1.05rem, 4.6vw, 1.25rem) !important;
    padding: 1.25rem 1.5rem !important;
  }

  /* El sidebar se extrae a document.body mediante JS (extractAndFixMenu).
     Estas reglas actúan como respaldo CSS para antes de que el JS se ejecute
     y para asegurar position:fixed aunque el JS falle. */
  html body #menu {
    position: fixed !important;
    z-index: 990 !important;
    width: 100vw !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    pointer-events: auto !important;
  }

  /* Ambos logos del botón deben tener el mismo tamaño y posición para que el
     crossfade de GSAP (autoAlpha) no produzca un salto visual. Sin esta regla,
     #mobile-logo-active usa w-[12vh] (~6rem en móvil) mientras #mobile-logo-main
     queda en 4rem, lo que genera un cambio de tamaño aparente al animar. */
  html body #menu-button-main #mobile-logo-main,
  html body #menu-button-main #mobile-logo-active {
    width: 3.5rem !important;
    height: auto !important;
    position: absolute !important;
  }
}