/* === Variables de diseño === */
:root {
  --bg-void: #000000;
  --bg-surface: #121713;
  --bg-surface-raised: #171D18;

  --emerald: #1B6115;
  --emerald-dim: #12805B;
  --emerald-deep: #0A4735;

  --text-primary: #E9EDE9;
  --text-secondary: #9AA69E;
  --text-muted: #5C685F;

  --border: rgba(233, 237, 233, 0.08);
  --border-strong: rgba(233, 237, 233, 0.16);

  --font-display: 'Space Grotesk', sans-serif;

  --radius: 6px;
}

/* === Reset === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
}

/* === Layout base de sección === */
.section {
  position: relative;
  z-index: 0; /* contiene el fondo (z-index negativo) dentro de esta sección */
  min-height: 100vh;
  width: 100%;
  padding: 0 8vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* === Fondo propio de sección (Agenda / Recap / Redes), opcional =========== */
/* Se inyecta por JS (applySectionBg en main.js) solo si la sección tiene
   un "fondo" cargado desde el panel. Si no hay imagen, no se agrega nada
   y la sección queda exactamente como está hoy. */
.section-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.section-bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}

/* Oscurecido general, parejo en toda la sección (no solo abajo), para que
   el texto se lea bien sin importar cuán clara sea la imagen que se cargue.
   Mismo criterio que el velo del Hero, pero sin favorecer un lado, ya que
   acá el contenido no siempre está del mismo lado. */
.section-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.55);
}

/* Loop de costura: fade de ENTRADA arriba (0%→20%) + fade de SALIDA abajo
   (40%→100%), igual que el que ya usa el Hero. Así la sección anterior
   termina en negro sólido y esta arranca en negro sólido: la costura entre
   ambas queda como una franja continua, no como un corte "limpio". */
.section-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    var(--bg-void) 0%,
    transparent 20%,
    transparent 40%,
    var(--bg-void) 100%
  );
}

/* Última sección del recorrido (Redes): no hay nada debajo con qué
   fundirse, así que solo lleva el fade de entrada (arriba). */
.section-bg.is-last::after {
  background: linear-gradient(
    to bottom,
    var(--bg-void) 0%,
    transparent 20%,
    transparent 100%
  );
}

/* === Grain, generado por SVG turbulence inline, sin imagen === */
.grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.1;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='1.7' intercept='-0.2'/><feFuncG type='linear' slope='1.7' intercept='-0.2'/><feFuncB type='linear' slope='1.7' intercept='-0.2'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  background-size: 220px 220px;
}

/* === Nav lateral de secciones (scrollspy) === */
.section-nav {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

.section-dot {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 0;
}

.section-dot-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color 0.25s ease;
}

.section-dot-circle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: transparent;
  flex-shrink: 0;
  transition: background 0.25s ease, transform 0.25s ease;
}

.section-dot:hover .section-dot-circle {
  transform: scale(1.2);
}

.section-dot.is-active .section-dot-label {
  color: var(--emerald);
}

.section-dot.is-active .section-dot-circle {
  background: var(--emerald);
  border-color: var(--emerald);
}

/* === Utilidades tipográficas compartidas === */
a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  background: none;
  border: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ===== MENÚ HAMBURGUESA (solo celular) ===== */
.mobile-menu-btn {
  display: none; /* se muestra solo en mobile, ver media query abajo */
}

.mobile-menu {
  display: none;
}

@media (max-width: 768px) {
  /* El nav lateral de puntos no entra bien en pantallas chicas */
  .section-nav {
    display: none;
  }

  /* Corta el scroll de la página: el cambio de sección lo maneja solo el
     menú hamburgués (mostrarSeccion() en main.js), no el swipe. */
  html, body {
    height: 100%;
    overflow: hidden;
  }

  #pageMain {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }

  /* Cada sección ocupa toda la pantalla; si su contenido no entra
     (ej. Recap), hace scroll interno en vez de empujar a la siguiente. */
  .section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: none;
  }

  .section.is-active-mobile {
    display: flex;
  }

  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 60;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: var(--text-primary);
    font-size: 22px;
  }

  .mobile-menu {
    position: fixed;
    top: 68px;
    right: 16px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    min-width: 160px;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .mobile-menu[hidden] {
    display: none;
  }

  .mobile-menu-link {
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
  }

  .mobile-menu-link:last-child {
    border-bottom: none;
  }

  .mobile-menu-link:active {
    background: rgba(255, 255, 255, 0.06);
  }
}