/* Correcciones solicitadas para biosferaWebsite.
   Se agregan como capa de ajuste para no reestructurar el sitio reconstruido. */

:root {
  --biosfera-nav-bg: rgba(71, 85, 105, 0.34);
  --biosfera-brand-cyan: #2caebf;
}

html,
body {
  overflow-x: hidden;
}

/* Evita que el logo/ícono de Biósfera se desplace o se escale al abrir/cerrar menú. */
.logo-with-letters-container > a[aria-label="Ir al inicio"],
.logo-with-letters-container > a[aria-label="Ir al inicio"] > div,
#menu-button-main,
#mobile-logo-main,
#mobile-logo-active {
  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;
}

/* Ajuste del hero: Naturaleza conserva la tipografía orgánica original, solo se amplía y se corrige el color. */
#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-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);
}

/* Áreas de trabajo: letras más pequeñas para que el contenido no se sature ni se monte. */
.area-card-title {
  line-height: 1.08 !important;
}

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

#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;
}

/* Pestañas de Ciencia/Tecnología/Acción: espacio suficiente para textos más largos. */
#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;
}

/* Se ocultan por defecto bloques de tráfico de usuarios; solo se muestran cuando el HTML marque contexto administrador. */
[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;
}

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

  .logo-with-letters-container .navbar .navbar-button {
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  .block.md\:hidden.w-full.fixed {
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
  }

  #menu-button-main {
    position: fixed !important;
    top: 0.75rem !important;
    left: 0.75rem !important;
    width: 3.75rem !important;
    height: 3.75rem !important;
    z-index: 1001 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: auto !important;
  }

  #menu-button-main svg,
  #mobile-logo-main,
  #mobile-logo-active {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 3.5rem !important;
    max-width: 3.5rem !important;
    height: 3.5rem !important;
    transform: none !important;
  }

  #menu {
    padding-top: 7.25rem !important;
    gap: 1.15rem !important;
  }

  #menu .mobile-menu-buttons:first-child {
    margin-top: 0.75rem !important;
  }

  #menu .mobile-menu-buttons {
    font-size: clamp(1.35rem, 7vw, 2rem) !important;
    line-height: 1.12 !important;
    padding: 0.42rem 0.25rem !important;
    margin-left: 0.75rem !important;
    margin-right: 0.75rem !important;
  }

  #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;
  }

  .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;
  }
}

/* Corrección v4: mantiene visible y estable el ícono móvil que abre el sidebar.
   No elimina el ícono original: solo fija su caja y evita que se descuadre durante la animación. */
@media (max-width: 767px) {
  html body .block.md\:hidden.w-full.fixed {
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    pointer-events: none !important;
  }

  html body #menu-button-main {
    position: fixed !important;
    top: 0.75rem !important;
    left: 0.75rem !important;
    width: 3.75rem !important;
    height: 3.75rem !important;
    min-width: 3.75rem !important;
    min-height: 3.75rem !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    z-index: 10050 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  html body #menu-button-main svg,
  html body #menu-button-main #mobile-logo-main,
  html body #menu-button-main #mobile-logo-active {
    position: absolute !important;
    inset: 0 !important;
    width: 3.55rem !important;
    max-width: 3.55rem !important;
    height: 3.55rem !important;
    max-height: 3.55rem !important;
    margin: auto !important;
    transform: none !important;
    transform-origin: center center !important;
    pointer-events: none !important;
  }

  html body #mobile-logo-main {
    opacity: 1;
  }

  html body #mobile-logo-active {
    opacity: 0;
  }

  html body #menu {
    z-index: 10000 !important;
    pointer-events: none;
  }
}

/* Corrección v5: fuerza la visibilidad real del botón móvil del sidebar.
   Mantiene el ícono original de Biósfera, pero le da una caja fija visible para que no se pierda sobre el video ni se descuadre al animar. */
@media (max-width: 767px) {
  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;
    z-index: 2147483000 !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  html body #menu-button-main {
    display: flex !important;
    position: fixed !important;
    top: max(0.85rem, env(safe-area-inset-top)) !important;
    left: max(0.85rem, env(safe-area-inset-left)) !important;
    width: 4.15rem !important;
    height: 4.15rem !important;
    min-width: 4.15rem !important;
    min-height: 4.15rem !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2147483647 !important;
    background: rgba(0, 0, 0, 0.28) !important;
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    border-radius: 9999px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.28) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: translate3d(0,0,0) !important;
    transform-origin: center center !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }

  html body #menu-button-main svg,
  html body #menu-button-main #mobile-logo-main,
  html body #menu-button-main #mobile-logo-active {
    display: block !important;
    position: absolute !important;
    inset: 50% auto auto 50% !important;
    width: 3.05rem !important;
    max-width: 3.05rem !important;
    height: 3.05rem !important;
    max-height: 3.05rem !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: center center !important;
    pointer-events: none !important;
    color: #2caebf !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)) !important;
  }

  html body #menu-button-main svg path {
    fill: currentColor !important;
  }

  html body #menu-button-main #mobile-logo-main {
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body #menu-button-main #mobile-logo-active {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  html body #menu {
    position: fixed !important;
    top: 0 !important;
    height: 100svh !important;
    min-height: 100vh !important;
    z-index: 2147482500 !important;
    padding-top: 7.5rem !important;
  }
}

/* Corrección v6: botón móvil real y permanente para abrir el sidebar.
   Se usa un botón fallback con el mismo ícono SVG para evitar que el botón original se pierda,
   quede detrás del video o se descuadre por la animación del sidebar en iOS/Android. */
@media (max-width: 767px) {
  html body #menu-button-main {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body #biosfera-mobile-menu-fallback {
    display: flex !important;
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 0.95rem) !important;
    left: calc(env(safe-area-inset-left, 0px) + 0.95rem) !important;
    width: 4.15rem !important;
    height: 4.15rem !important;
    min-width: 4.15rem !important;
    min-height: 4.15rem !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2147483647 !important;
    background: rgba(0, 0, 0, 0.32) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 9999px !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: translate3d(0, 0, 0) !important;
    transform-origin: center center !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body #biosfera-mobile-menu-fallback svg,
  html body #biosfera-mobile-menu-fallback .biosfera-fallback-icon-main,
  html body #biosfera-mobile-menu-fallback .biosfera-fallback-icon-active {
    display: block !important;
    position: absolute !important;
    inset: 50% auto auto 50% !important;
    width: 3.05rem !important;
    max-width: 3.05rem !important;
    height: 3.05rem !important;
    max-height: 3.05rem !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: center center !important;
    pointer-events: none !important;
    color: #2caebf !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.38)) !important;
    transition: opacity 260ms ease, visibility 260ms ease !important;
  }

  html body #biosfera-mobile-menu-fallback svg path {
    fill: currentColor !important;
  }

  html body #biosfera-mobile-menu-fallback .biosfera-fallback-icon-main {
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body #biosfera-mobile-menu-fallback .biosfera-fallback-icon-active {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  html.biosfera-menu-open body #biosfera-mobile-menu-fallback .biosfera-fallback-icon-main {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  html.biosfera-menu-open body #biosfera-mobile-menu-fallback .biosfera-fallback-icon-active {
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body #menu {
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;
    width: 100vw !important;
    height: 100svh !important;
    min-height: 100vh !important;
    z-index: 2147482500 !important;
    pointer-events: none !important;
    transition: left 520ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  html.biosfera-menu-open body #menu {
    left: 0 !important;
    pointer-events: auto !important;
  }
}

@media (min-width: 768px) {
  #biosfera-mobile-menu-fallback {
    display: none !important;
  }
}

/* Corrección v7: se elimina el fallback que generaba un logo con círculo extraño.
   Se vuelve a usar el botón original, transparente, estable y por encima del video. */
@media (max-width: 767px) {
  html body #biosfera-mobile-menu-fallback {
    display: none !important;
  }

  html body .block.md\:hidden.w-full.fixed {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 100vw !important;
    height: 0 !important;
    transform: none !important;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 2147483000 !important;
  }

  html body #menu-button-main {
    display: flex !important;
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 0.9rem) !important;
    left: calc(env(safe-area-inset-left, 0px) + 0.9rem) !important;
    width: 4.15rem !important;
    height: 4.15rem !important;
    min-width: 4.15rem !important;
    min-height: 4.15rem !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: 0 !important;
    border-radius: 9999px !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;
    transform-origin: center center !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body #menu-button-main svg,
  html body #menu-button-main #mobile-logo-main,
  html body #menu-button-main #mobile-logo-active {
    display: block !important;
    position: absolute !important;
    inset: 50% auto auto 50% !important;
    width: 4rem !important;
    max-width: 4rem !important;
    height: 4rem !important;
    max-height: 4rem !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: center center !important;
    pointer-events: none !important;
    color: #2caebf !important;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45)) !important;
    transition: opacity 240ms ease, visibility 240ms ease !important;
  }

  html body #menu-button-main svg path {
    fill: currentColor !important;
  }

  html body #menu-button-main #mobile-logo-main {
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body #menu-button-main #mobile-logo-active {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  html.biosfera-menu-open body #menu-button-main #mobile-logo-main,
  body.biosfera-menu-open #menu-button-main #mobile-logo-main {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  html.biosfera-menu-open body #menu-button-main #mobile-logo-active,
  body.biosfera-menu-open #menu-button-main #mobile-logo-active {
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body #menu {
    display: flex !important;
    position: fixed !important;
    inset: 0 auto auto 0 !important;
    left: -100vw !important;
    right: auto !important;
    width: 100vw !important;
    max-width: none !important;
    min-width: 100vw !important;
    height: 100svh !important;
    min-height: 100vh !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 7rem) !important;
    padding-left: 1.3rem !important;
    padding-right: 1.3rem !important;
    gap: 1.05rem !important;
    overflow: hidden !important;
    background: #2caebf !important;
    z-index: 2147482500 !important;
    pointer-events: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    transition: left 440ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  html.biosfera-menu-open body #menu,
  body.biosfera-menu-open #menu {
    left: 0 !important;
    pointer-events: auto !important;
  }

  html body #menu .mobile-menu-buttons {
    position: relative !important;
    z-index: 3 !important;
    display: block !important;
    width: fit-content !important;
    max-width: calc(100vw - 3rem) !important;
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: clamp(1.65rem, 8vw, 2.45rem) !important;
    line-height: 1.05 !important;
    margin: 0 !important;
    padding: 0.28rem 0.35rem !important;
    transform: none !important;
    text-align: left !important;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.25) !important;
  }

  html body #menu .mobile-menu-buttons:hover,
  html body #menu .mobile-menu-buttons:active,
  html body #menu .mobile-menu-buttons[aria-current="page"] {
    transform: none !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
  }

  html body #menu > svg {
    position: absolute !important;
    z-index: 1 !important;
    right: -46vw !important;
    bottom: -13vh !important;
    width: 88vw !important;
    height: auto !important;
    max-width: none !important;
    color: rgba(255,255,255,0.18) !important;
    opacity: 0.18 !important;
    transform: none !important;
    pointer-events: none !important;
  }

  html body #menu > svg path {
    fill: currentColor !important;
  }
}