/* ============================================================
   ALTEPETL — La montaña que vuela entre las nubes
   Sistema visual: MONTAÑA (estructura) · AGUA (movimiento)
   ORO (energía) · NUBES (atmósfera)
   ============================================================ */

:root {
  /* Cielo — claro, luminoso, sin azul corporativo */
  --cielo-alto:   #a4dde8;
  --cielo-medio:  #d3eff3;
  --cielo-bajo:   #f5fbfa;
  --jade-cielo:   #cfe9e0;

  /* Agua */
  --agua:         #16b8ab;
  --cian:         #2fd0e0;
  --agua-luz:     #8be9e4;

  /* Energía */
  --oro:          #d9a839;
  --oro-luz:      #f2c14e;
  --oro-palido:   #f6d47c;

  /* Naturaleza (acentos de interfaz) */
  --verde-hoja:   #3f9e57;
  --verde-jade:   #2e8f7a;

  /* Tinta — contraste sobre cielo claro */
  --tinta:        #12363a;
  --tinta-suave:  #3a5b5e;

  /* Vidrio */
  --vidrio:       rgba(255, 255, 255, 0.42);
  --vidrio-borde: rgba(255, 255, 255, 0.65);
  --sombra-panel: 0 18px 50px -18px rgba(23, 84, 92, 0.35);

  --fuente: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, sans-serif;
  --ancho-panel: min(92vw, 27rem);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: #ffffff; /* base bajo las nubes de agua de las páginas interiores */
}

body {
  margin: 0;
  font-family: var(--fuente);
  color: var(--tinta);
  background: linear-gradient(180deg, var(--cielo-alto) 0%, var(--cielo-medio) 45%, var(--cielo-bajo) 100%);
  line-height: 1.6;
  overflow-x: hidden;
}

::selection { background: rgba(47, 208, 224, 0.35); }

/* ------------------------------------------------------------
   Mundo 3D fijo detrás de todo
   ------------------------------------------------------------ */
#mundo {
  position: fixed;
  inset: 0;
  z-index: 0;
}
#lienzo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y; /* el scroll táctil sigue siendo del documento */
}

/* ------------------------------------------------------------
   Fallback 2D (sin WebGL)
   ------------------------------------------------------------ */
#fallback {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.fallback-cielo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 45% at 30% 12%, rgba(255, 246, 220, 0.75), transparent 70%),
    linear-gradient(180deg, var(--cielo-alto) 0%, var(--cielo-medio) 50%, var(--cielo-bajo) 100%);
}
.fallback-logo {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(58vh, 78vw);
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 30px 60px rgba(20, 90, 96, 0.35))
          drop-shadow(0 0 42px rgba(47, 208, 224, 0.35));
  animation: flotar 9s ease-in-out infinite;
}
.fallback-nube {
  position: absolute;
  width: 60vmax;
  height: 22vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.9), rgba(255,255,255,0));
  filter: blur(30px);
  opacity: 0.8;
}
.fallback-nube--a { top: 8%;  left: -15%; animation: derivar 60s linear infinite; }
.fallback-nube--b { bottom: 4%; right: -20%; animation: derivar 80s linear infinite reverse; }

@keyframes flotar {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-14px); }
}
@keyframes derivar {
  from { transform: translateX(0); }
  to   { transform: translateX(35vw); }
}

/* ------------------------------------------------------------
   Cargador
   ------------------------------------------------------------ */
#cargador {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  transition: opacity 0.9s ease, visibility 0.9s;
}
#cargador.listo { opacity: 0; visibility: hidden; }
.cargador-cielo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(255,255,255,0.65), transparent 70%),
    linear-gradient(180deg, var(--cielo-alto), var(--cielo-medio) 55%, var(--cielo-bajo));
}
.cargador-contenido {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  text-align: center;
}
.cargador-logo {
  width: 9.5rem;
  height: 9.5rem;
  object-fit: contain;
  filter: drop-shadow(0 18px 38px rgba(20, 90, 96, 0.3));
  animation: flotar-cargador 5s ease-in-out infinite;
}
@keyframes flotar-cargador {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.cargador-nombre {
  margin: 0;
  font-size: clamp(2.4rem, 7vw, 4.3rem);
  font-weight: 800;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
}
.cargador-barra {
  width: 11rem;
  height: 2px;
  border-radius: 2px;
  background: rgba(18, 54, 58, 0.12);
  overflow: hidden;
}
#cargador-avance {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cian), var(--oro-luz));
  transition: width 0.35s ease;
}
.cargador-texto {
  margin: 0;
  font-size: 0.8rem;
  color: var(--tinta-suave);
  opacity: 0.8;
}

/* ------------------------------------------------------------
   Accesibilidad
   ------------------------------------------------------------ */
.salta-contenido {
  position: fixed;
  top: -4rem;
  left: 1rem;
  z-index: 200;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--tinta);
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  transition: top 0.25s ease;
}
.salta-contenido:focus-visible { top: 1rem; }

:focus-visible {
  outline: 2px solid var(--agua);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------
   Navegación — interfaz suspendida en el cielo
   ------------------------------------------------------------ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem clamp(1rem, 4vw, 3rem);
  background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.18));
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  border-bottom: 1px solid rgba(255,255,255,0.5);
}
.nav::after {
  /* filamento de energía dorada bajo la barra */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--oro-luz) 30%, var(--cian) 55%, var(--oro-luz) 75%, transparent);
  opacity: 0.55;
}
.nav-marca {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--tinta);
}
.nav-logo {
  width: 2.1rem;
  height: 2.1rem;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(20, 90, 96, 0.35));
}
.nav-nombre {
  font-weight: 700;
  letter-spacing: 0.32em;
  font-size: 0.85rem;
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2.4vw, 2rem);
}
.nav-menu a {
  position: relative;
  color: var(--tinta);
  text-decoration: none;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  padding: 0.25rem 0;
}
.nav-menu a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 1px;
  background: linear-gradient(90deg, var(--oro-luz), var(--cian));
  transition: right 0.35s ease;
}
.nav-menu a:not(.nav-cta):hover::after,
.nav-menu a:not(.nav-cta).activo::after { right: 0; }
.nav-menu a.activo { color: #0d2b2e; font-weight: 600; }

.nav-cta {
  padding: 0.4rem 1.1rem !important;
  border-radius: 999px;
  border: 1px solid rgba(217, 168, 57, 0.65);
  background: linear-gradient(120deg, rgba(242,193,78,0.25), rgba(47,208,224,0.18));
  box-shadow: 0 0 0 0 rgba(242,193,78,0.4);
  transition: box-shadow 0.4s ease, transform 0.3s ease;
}
.nav-cta:hover {
  box-shadow: 0 0 24px 2px rgba(242,193,78,0.35);
  transform: translateY(-1px);
}

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-boton { display: none; }

/* ------------------------------------------------------------
   Estructura de secciones
   ------------------------------------------------------------ */
main { position: relative; z-index: 5; }

.seccion {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: clamp(4.5rem, 10vh, 7rem) clamp(1.2rem, 6vw, 6rem);
}
.seccion--ancha { align-content: center; gap: 3rem; }

.kicker {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.kicker--centro { justify-content: center; }

.punto-cian, .punto-oro {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: none;
}
.punto-cian {
  background: var(--cian);
  box-shadow: 0 0 10px 2px rgba(47, 208, 224, 0.6);
}
.punto-oro {
  background: var(--oro-luz);
  box-shadow: 0 0 10px 2px rgba(242, 193, 78, 0.6);
}

h1, h2, h3 { line-height: 1.12; margin: 0; font-weight: 700; }
h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  letter-spacing: 0.02em;
  color: var(--tinta);
}
h3 { font-size: 1.05rem; letter-spacing: 0.04em; }

/* Línea de energía dorada */
.linea-oro {
  width: 5.5rem;
  height: 1px;
  margin: 1.1rem 0;
  background: linear-gradient(90deg, var(--oro-luz), rgba(242,193,78,0));
  position: relative;
  overflow: visible;
}
.linea-oro::after {
  content: "";
  position: absolute;
  top: -1.5px;
  left: 0;
  width: 1.4rem;
  height: 4px;
  border-radius: 4px;
  background: radial-gradient(closest-side, #fff, rgba(246,212,124,0.9), transparent);
  animation: pulso-linea 5.5s ease-in-out infinite;
}
@keyframes pulso-linea {
  0%   { transform: translateX(-1.5rem); opacity: 0; }
  18%  { opacity: 1; }
  60%  { transform: translateX(5.5rem); opacity: 0; }
  100% { transform: translateX(5.5rem); opacity: 0; }
}

/* ------------------------------------------------------------
   Paneles de vidrio — suspendidos en la atmósfera
   ------------------------------------------------------------ */
.panel {
  width: var(--ancho-panel);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: 1.3rem;
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid var(--vidrio-borde);
  box-shadow: var(--sombra-panel);
  position: relative;
}
.panel::before {
  /* destello holográfico superior */
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
}
.panel::after {
  /* reflejo de luz que barre el panel al pasar el mouse */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255,255,255,0.05) 42%,
    rgba(246, 212, 124, 0.18) 50%,
    rgba(255,255,255,0.05) 58%,
    transparent 70%
  );
  background-size: 260% 100%;
  background-position: 130% center;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.panel:hover {
  border-color: rgba(246, 212, 124, 0.55);
  box-shadow:
    var(--sombra-panel),
    0 0 30px rgba(242, 193, 78, 0.18);
  transform: translateY(-4px);
}
.panel:hover::after {
  opacity: 1;
  animation: panel-reflejo 1.4s ease forwards;
}
.panel:active {
  transform: translateY(-2px) scale(0.985);
  animation: panel-pulso 0.45s ease;
}
.panel {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
@keyframes panel-reflejo {
  from { background-position: 130% center; }
  to   { background-position: -130% center; }
}
@keyframes panel-pulso {
  0%   { box-shadow: var(--sombra-panel), 0 0 0 0 rgba(242, 193, 78, 0.45); }
  100% { box-shadow: var(--sombra-panel), 0 0 0 22px rgba(242, 193, 78, 0); }
}
.panel p { margin: 0 0 0.9rem; color: #1d4549; }
.panel p:last-child { margin-bottom: 0; }
.panel-nota { font-size: 0.9rem; color: var(--tinta-suave) !important; }

.panel--derecha  { justify-self: end;   margin-right: clamp(0rem, 4vw, 3rem); }
.panel--izquierda { justify-self: start; margin-left: clamp(0rem, 4vw, 3rem); }

.lista-agua {
  display: flex;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.lista-agua li {
  padding: 0.28rem 0.9rem;
  border-radius: 999px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: #0f4a48;
  background: linear-gradient(120deg, rgba(47,208,224,0.22), rgba(87,201,168,0.2));
  border: 1px solid rgba(47,208,224,0.4);
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.seccion--hero {
  align-items: end;
  justify-items: center;
  text-align: center;
  padding-bottom: 5.5vh;
}
.hero-bloque {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  max-width: 44rem;
}
.hero-bloque .kicker { justify-content: center; }
/* ------------------------------------------------------------
   Texto dorado con efecto de luces (clase genérica)
   Usar junto a cualquier elemento de texto: <h1 class="texto-oro">…
   ------------------------------------------------------------ */
.texto-oro {
  background: linear-gradient(
    100deg,
    #8a6a1f 0%,
    var(--oro) 22%,
    var(--oro-palido) 40%,
    #fff8e0 50%,
    var(--oro-palido) 60%,
    var(--oro) 78%,
    #8a6a1f 100%
  );
  background-size: 220% 100%;
  background-position: 110% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  filter:
    drop-shadow(0 2px 0 rgba(255,255,255,0.35))
    drop-shadow(0 0 14px rgba(217, 168, 57, 0.25));
  transition: filter 0.6s ease;
  animation: texto-oro-brillo 9s linear infinite;
}
.texto-oro:hover {
  filter:
    drop-shadow(0 2px 0 rgba(255,255,255,0.45))
    drop-shadow(0 0 26px rgba(242, 193, 78, 0.75));
}
@keyframes texto-oro-brillo {
  0%   { background-position: 110% center; }
  100% { background-position: -110% center; }
}

.hero-titulo {
  font-size: clamp(2.4rem, 7vw, 4.3rem);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  font-weight: 800;
  filter:
    drop-shadow(0 2px 0 rgba(255,255,255,0.35))
    drop-shadow(0 14px 40px rgba(23, 84, 92, 0.28))
    drop-shadow(0 0 14px rgba(217, 168, 57, 0.25));
}
.hero-titulo:hover {
  filter:
    drop-shadow(0 2px 0 rgba(255,255,255,0.45))
    drop-shadow(0 14px 40px rgba(23, 84, 92, 0.28))
    drop-shadow(0 0 26px rgba(242, 193, 78, 0.75));
}
.hero-frase {
  margin: 0;
  font-size: clamp(1.05rem, 2.1vw, 1.35rem);
  font-weight: 600;
  color: #0f3a3d;
}
.hero-desc {
  margin: 0 0 1.1rem;
  font-size: 0.95rem;
  color: var(--tinta-suave);
  max-width: 34rem;
}

.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.1em;
  font-size: 0.9rem;
  color: var(--tinta);
  background: linear-gradient(120deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 10px 30px -10px rgba(23, 84, 92, 0.4), inset 0 0 0 1px rgba(242,193,78,0.25);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  position: relative;
  overflow: hidden;
}
.boton::after {
  /* brillo que cruza el botón como energía */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(242,193,78,0.45), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s ease;
}
.boton:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(23,84,92,0.5), inset 0 0 0 1px rgba(242,193,78,0.5); }
.boton:hover::after { left: 115%; }
.boton-flecha { font-size: 1em; }

.boton--final {
  color: #fff;
  background: linear-gradient(120deg, #0f3a3d, #155a52);
  border-color: rgba(242,193,78,0.55);
  box-shadow: 0 14px 40px -12px rgba(15, 58, 61, 0.65), inset 0 0 0 1px rgba(242,193,78,0.35);
}

/* Indicador de scroll */
.hero-scroll {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3.4rem;
  margin: 0;
  background: linear-gradient(180deg, rgba(18,54,58,0.35), transparent);
}
.hero-scroll span {
  position: absolute;
  top: 0;
  left: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--oro-luz);
  box-shadow: 0 0 8px 2px rgba(242,193,78,0.7);
  animation: bajar 2.8s ease-in-out infinite;
}
@keyframes bajar {
  0%   { top: 0; opacity: 0; }
  25%  { opacity: 1; }
  85%  { top: 3rem; opacity: 0; }
  100% { top: 3rem; opacity: 0; }
}

/* Chips flotantes del hero (profundidad de interfaz) */
.flota {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--tinta-suave);
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -14px rgba(23,84,92,0.35);
  will-change: transform;
}
.flota--a { top: 26%; left: 12%; }
.flota--b { top: 38%; right: 10%; }
.flota--c { top: 56%; left: 16%; }

/* ------------------------------------------------------------
   Encabezados de sección
   ------------------------------------------------------------ */
.encabezado {
  max-width: 40rem;
  display: grid;
  gap: 0.4rem;
  justify-items: start;
}
.seccion--ancha .encabezado { margin-inline: auto; text-align: center; justify-items: center; }
.encabezado-nota { margin: 0.4rem 0 0; color: var(--tinta-suave); }

/* ------------------------------------------------------------
   INICIATIVAS — nodos suspendidos conectados por vetas de oro
   ------------------------------------------------------------ */
.nodos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
  max-width: 68rem;
  margin-inline: auto;
  width: 100%;
}
.nodos-linea {
  position: absolute;
  inset: -12% -4%;
  width: 108%;
  height: 124%;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(242,193,78,0.6));
}
.nodos-linea path {
  stroke-dasharray: 3 2.2;
  animation: corriente-oro 9s linear infinite;
}
@keyframes corriente-oro {
  to { stroke-dashoffset: -104; }
}
.nodo {
  position: relative;
  padding: 1.5rem 1.4rem 1.4rem;
  border-radius: 1.2rem;
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--vidrio-borde);
  box-shadow: var(--sombra-panel);
}
.nodo p { margin: 0.45rem 0 0; font-size: 0.9rem; color: #1d4549; }
.nodo--a { transform: translateY(-1.6rem); }
.nodo--b { transform: translateY(1.8rem); }
.nodo--c { transform: translateY(-0.8rem); }

/* Reflejo de luz y pulso al interactuar (mismos efectos que los paneles) */
.nodo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255,255,255,0.05) 42%,
    rgba(246, 212, 124, 0.18) 50%,
    rgba(255,255,255,0.05) 58%,
    transparent 70%
  );
  background-size: 260% 100%;
  background-position: 130% center;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.nodo {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.nodo:hover {
  border-color: rgba(246, 212, 124, 0.55);
  box-shadow:
    var(--sombra-panel),
    0 0 30px rgba(242, 193, 78, 0.18);
}
.nodo:hover::after {
  opacity: 1;
  animation: panel-reflejo 1.4s ease forwards;
}
/* El desplazamiento vertical de cada variante se conserva al interactuar */
.nodo--a:hover { transform: translateY(calc(-1.6rem - 4px)); }
.nodo--b:hover { transform: translateY(calc(1.8rem - 4px)); }
.nodo--c:hover { transform: translateY(calc(-0.8rem - 4px)); }
.nodo:active {
  border-color: rgba(246, 212, 124, 0.55);
  animation: panel-pulso 0.45s ease;
}
.nodo--a:active { transform: translateY(calc(-1.6rem - 2px)) scale(0.985); }
.nodo--b:active { transform: translateY(calc(1.8rem - 2px)) scale(0.985); }
.nodo--c:active { transform: translateY(calc(-0.8rem - 2px)) scale(0.985); }
.nodo-orb {
  position: absolute;
  top: -0.55rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8e6, var(--oro-luz) 55%, #b8860b);
  box-shadow: 0 0 14px 3px rgba(242,193,78,0.65);
  animation: latido-oro 4.5s ease-in-out infinite;
}
@keyframes latido-oro {
  0%, 100% { box-shadow: 0 0 10px 2px rgba(242,193,78,0.5); }
  50%      { box-shadow: 0 0 20px 6px rgba(242,193,78,0.8); }
}

/* ------------------------------------------------------------
   IMPACTO — estadísticas flotantes
   ------------------------------------------------------------ */
.stats {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(2.5rem, 8vw, 7rem);
  margin-top: 2rem;
}
.stats-linea {
  position: absolute;
  top: 2.4rem;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242,193,78,0.8) 25%, rgba(47,208,224,0.6) 50%, rgba(242,193,78,0.8) 75%, transparent);
  z-index: -1;
}
.stat { text-align: center; }
.stat--b { transform: translateY(2.6rem); }
.stat-num {
  margin: 0;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(160deg, #b8860b, var(--oro-luz) 45%, #0f766e 110%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 6px 18px rgba(242,193,78,0.35));
}
.stat-sufijo { font-size: 0.55em; }
.stat-etq {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.stat-texto {
  margin: 0.5rem auto 0;
  max-width: 16rem;
  font-size: 0.88rem;
  color: #1d4549;
}

/* ------------------------------------------------------------
   COMUNIDAD — retratos entre la niebla
   ------------------------------------------------------------ */
.retratos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 3.5vw, 3rem);
  flex-wrap: wrap;
}
.retrato {
  position: relative;
  margin: 0;
  width: clamp(10rem, 22vw, 15rem);
  aspect-ratio: 3 / 4;
  border-radius: 1.4rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: var(--sombra-panel);
}
.retrato--b { transform: translateY(2.2rem); }
.retrato-luz {
  position: absolute;
  inset: 0;
}
.retrato--a .retrato-luz {
  background:
    radial-gradient(70% 50% at 50% 30%, rgba(255, 231, 186, 0.85), transparent 70%),
    radial-gradient(90% 70% at 60% 85%, rgba(63, 158, 87, 0.55), transparent 70%),
    linear-gradient(170deg, #bfe6ea, #8fd0c4 60%, #5d9e84);
}
.retrato--b .retrato-luz {
  background:
    radial-gradient(70% 50% at 40% 25%, rgba(255, 240, 205, 0.9), transparent 70%),
    radial-gradient(80% 60% at 50% 90%, rgba(22, 184, 171, 0.5), transparent 70%),
    linear-gradient(160deg, #a4dde8, #6fc3bb 65%, #3a8f7c);
}
.retrato--c .retrato-luz {
  background:
    radial-gradient(60% 45% at 60% 30%, rgba(255, 250, 230, 0.95), transparent 70%),
    radial-gradient(90% 60% at 40% 85%, rgba(46, 143, 122, 0.55), transparent 70%),
    linear-gradient(175deg, #cdeef2, #7cc9c0 55%, #4a9578);
}
.retrato::after {
  /* niebla que envuelve el retrato */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 30% at 50% 100%, rgba(255,255,255,0.85), transparent 70%),
    radial-gradient(60% 22% at 20% 45%, rgba(255,255,255,0.4), transparent 70%);
  pointer-events: none;
}
.retrato figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.8rem;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #10403f;
  text-shadow: 0 1px 8px rgba(255,255,255,0.9);
  z-index: 1;
}

/* ------------------------------------------------------------
   FINAL — apertura del cielo
   ------------------------------------------------------------ */
.seccion--final {
  justify-items: center;
  text-align: center;
  align-items: end;
  padding-bottom: 13vh;
}
.final-bloque {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  max-width: 36rem;
}
.final-bloque h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
.final-bloque p { margin: 0 0 1rem; color: #1d4549; }

/* ------------------------------------------------------------
   PÁGINAS DE CONTENIDO — componentes compartidos
   (portadas cortas, citas, bandas, tablas, pasos, ciclo del
   Calpulli, tarjeta bancaria, FAQ, marcadores pendientes)
   ------------------------------------------------------------ */

/* Fondo de agua — nubes de luz azul agua que derivan sobre
   blanco (js/fondo.js). Solo las páginas interiores llevan
   la clase; las portadas 3D conservan su cielo. */
.fondo-agua {
  background: none; /* deja ver el blanco del html y el canvas */
}
.lienzo-agua {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.seccion--portada {
  /* portada corta de las páginas interiores (media pantalla) */
  min-height: 62vh;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding-top: 5.5rem;
}
.seccion--pagina {
  /* sección de lectura normal: no fuerza pantalla completa */
  min-height: 0;
  align-content: center;
}
.panel--centro  { justify-self: center; text-align: left; }
.panel--ancho   { width: min(92vw, 46rem); }

/* Cita destacada — una idea por línea */
.cita {
  margin: 0;
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.4rem, 4vw, 3rem);
  max-width: min(92vw, 44rem);
  border-radius: 1.3rem;
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid var(--vidrio-borde);
  box-shadow: var(--sombra-panel);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: #14403f;
  text-align: center;
}
.cita p { margin: 0 0 1rem; }
.cita p:last-child { margin-bottom: 0; }
.cita strong { color: #0d2b2e; }

/* Banda destacada — una sola idea potente */
.banda {
  justify-self: center;
  text-align: center;
  max-width: min(92vw, 48rem);
  padding: clamp(1.2rem, 3vw, 1.8rem) clamp(1.2rem, 4vw, 2.4rem);
  border-radius: 1.1rem;
  background: linear-gradient(120deg, rgba(242,193,78,0.14), rgba(47,208,224,0.12));
  border: 1px solid rgba(246, 212, 124, 0.55);
  box-shadow: var(--sombra-panel);
}
.banda h2, .banda h3 { margin-top: 0; }
.banda--oscura {
  background: linear-gradient(160deg, #10403f, #0d2f33);
  border: 1px solid rgba(242, 193, 78, 0.4);
  color: #eaf7f5;
}
.banda--oscura h2, .banda--oscura h3 { color: var(--oro-palido); }
.banda--oscura p { color: #cfe6e3; }

/* Tablas de datos — vidrio y filas de agua */
.tabla-envoltura {
  justify-self: center;
  width: min(94vw, 46rem);
  overflow-x: auto;
  border-radius: 1.1rem;
  border: 1px solid var(--vidrio-borde);
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--sombra-panel);
}
.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.tabla th {
  text-align: left;
  padding: 0.85rem 1.1rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  border-bottom: 1px solid rgba(47, 208, 224, 0.35);
}
.tabla td {
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  color: #1d4549;
  vertical-align: top;
}
.tabla tr:last-child td { border-bottom: none; }
.tabla a { color: #0f5a60; text-decoration-color: rgba(242, 193, 78, 0.7); }

/* Recuadro destacado — notas al margen */
.recuadro {
  margin: 1.4rem 0 0;
  padding: 1.1rem 1.3rem;
  border-radius: 0.9rem;
  border: 1px dashed rgba(217, 168, 57, 0.65);
  background: rgba(246, 212, 124, 0.14);
  font-size: 0.92rem;
  color: #3a5b5e;
}
.recuadro strong { color: #0d2b2e; }

/* Lista de pasos — línea de tiempo vertical */
.lista-pasos {
  counter-reset: paso;
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.2rem;
}
.lista-pasos li {
  counter-increment: paso;
  position: relative;
  padding-left: 3.2rem;
}
.lista-pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9rem;
  color: #4a3608;
  background: radial-gradient(circle at 35% 30%, #fff8e6, var(--oro-luz) 55%, #b8860b);
  box-shadow: 0 0 14px 3px rgba(242,193,78,0.45);
}
.lista-pasos strong { color: #0d2b2e; }

/* Lista con viñetas doradas (dentro de paneles y tarjetas) */
.lista-puntos { margin: 0.9rem 0; padding-left: 0; list-style: none; display: grid; gap: 0.55rem; }
.lista-puntos li { position: relative; padding-left: 1.3rem; color: #1d4549; }
.lista-puntos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8e6, var(--oro-luz) 55%, #b8860b);
}

/* Ciclo del Calpulli — chips con flechas */
.ciclo {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.55rem 0.3rem;
}
.ciclo li {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #12363a;
  background: var(--vidrio);
  border: 1px solid var(--vidrio-borde);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  white-space: nowrap;
}
.ciclo li:not(:last-child)::after {
  content: "→";
  margin-left: 0.85rem;
  color: var(--oro);
  font-weight: 700;
}

/* Dos columnas (texto + tarjetas) */
.dos-columnas {
  display: grid;
  grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: start;
  justify-content: center;
  width: min(94vw, 64rem);
}
/* Dentro de la grilla el hueco ya lo marca el gap: el margen del panel
   (pensado para secciones de una columna) consumía exactamente ese hueco */
.dos-columnas .panel--izquierda,
.dos-columnas .panel--derecha { margin-inline: 0; }
/* Variante ancha (La Mujer · El llamado): ocupa todo el ancho útil de la
   sección y va centrada. La columna del panel mide 46rem — el mismo ancho
   que los paneles previos de la página (`.panel--ancho`) — y el corazón
   vive en el espacio restante. Doble clase para imponer también sobre el
   ancho del media query móvil. */
.dos-columnas.dos-columnas--ancha {
  width: 100%;
  margin-inline: auto;
  grid-template-columns: minmax(0, 46rem) minmax(0, 1fr);
}
.dos-columnas--ancha .panel { width: 100%; }
/* La lista de prioridades va separada de los nodos que tiene encima
   (solo en la portada; en filosofia.html vive dentro de un panel) */
.dos-columnas .lista-agua { margin-top: clamp(1.2rem, 3vw, 2rem); }

/* Corazón de Altepetl — imagen centrada junto al panel de texto (La Mujer) */
.corazon {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3.5rem);
}
.corazon img {
  width: auto;
  height: auto;
  max-width: 100%;
  /* Tope fijo: sin porcentajes, para que la imagen no participe en el
     cálculo de la altura de la fila de la grilla. 24rem queda siempre
     por debajo del alto del panel de texto de esta sección. */
  max-height: 24rem;
  filter: drop-shadow(0 24px 40px rgba(23, 84, 92, 0.25));
}
.nodos--cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 44rem; }
/* En la cuadrícula 2×2 las tarjetas van alineadas: sin flotación escalonada */
.nodos--cuatro .nodo--a, .nodos--cuatro .nodo--b, .nodos--cuatro .nodo--c { transform: none; }
.nodos--cuatro .nodo--a:hover, .nodos--cuatro .nodo--b:hover, .nodos--cuatro .nodo--c:hover { transform: translateY(-4px); }
.nodos--cuatro .nodo--a:active, .nodos--cuatro .nodo--b:active, .nodos--cuatro .nodo--c:active { transform: translateY(-2px) scale(0.985); }

/* Acciones — fila de botones centrada */
.acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
}

/* Botón secundario — contorno de vidrio */
.boton--ghost {
  background: rgba(255, 255, 255, 0.3);
  color: var(--tinta);
}

/* Tarjeta bancaria — datos de la donación */
.tarjeta-banco {
  justify-self: center;
  width: min(94vw, 34rem);
  padding: clamp(1.6rem, 4vw, 2.4rem);
  border-radius: 1.4rem;
  background: linear-gradient(160deg, #10403f, #0c2c30);
  border: 1px solid rgba(242, 193, 78, 0.45);
  box-shadow: 0 24px 60px -20px rgba(6, 42, 45, 0.6);
  color: #eaf7f5;
}
.tarjeta-banco h2 { color: var(--oro-palido); margin-top: 0; }
.tarjeta-banco dl {
  margin: 1.4rem 0;
  display: grid;
  gap: 0.75rem;
  font-family: "SF Mono", "Cascadia Mono", ui-monospace, Menlo, Consolas, monospace;
}
.tarjeta-banco dt {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(234, 247, 245, 0.55);
}
.tarjeta-banco dd {
  margin: 0.15rem 0 0;
  font-size: clamp(1.05rem, 3vw, 1.35rem);
  letter-spacing: 0.06em;
  color: #fff8e6;
  overflow-wrap: anywhere;
}
.tarjeta-banco .acciones { justify-content: flex-start; }
.tarjeta-banco .boton--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #eaf7f5;
  border-color: rgba(234, 247, 245, 0.5);
}
#copiar-clabe.copiado {
  box-shadow: 0 0 26px 2px rgba(139, 233, 228, 0.55);
}
.tarjeta-banco-nota { margin: 1.8rem 0 0; font-size: 0.9rem; color: #a8cfc9; }
/* Donativo con Stripe — panel con todo centrado */
#donativo .tarjeta-banco { text-align: center; }
.tarjeta-banco .donativo-icono {
  display: flex;
  justify-content: center;
  margin: 1.9rem 0 3.6rem;
}
.tarjeta-banco .donativo-icono img {
  width: clamp(96px, 24vw, 200px);
  height: auto;
}
.tarjeta-banco .donativo-qr-icono {
  display: flex;
  justify-content: center;
  margin: 2.2rem 0 0;
}
.tarjeta-banco .donativo-qr-icono img {
  width: clamp(96px, 24vw, 120px);
  height: auto;
}
.tarjeta-banco .acciones--centro { justify-content: center; }
.tarjeta-banco .tarjeta-banco-qr {
  margin: 10px 0 0;
  font-size: 1.5rem;
  color: #a8cfc9;
}

/* FAQ — acordeón */
.faq {
  justify-self: center;
  width: min(94vw, 44rem);
  display: grid;
  gap: 0.8rem;
}
.faq details {
  border-radius: 1rem;
  border: 1px solid var(--vidrio-borde);
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--sombra-panel);
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.3rem;
  font-weight: 700;
  color: #0d2b2e;
  position: relative;
  padding-right: 3rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--oro);
  transition: transform 0.3s ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details > div, .faq details > p {
  padding: 0 1.3rem 1.1rem;
  margin: 0;
  color: #1d4549;
}

/* Marcador de posición — dato pendiente de sustituir */
.marcador {
  padding: 0.15em 0.5em;
  border-radius: 0.5em;
  border: 1px dashed rgba(242, 193, 78, 0.8);
  background: rgba(242, 193, 78, 0.12);
  color: inherit;
  font-size: 0.88em;
}

/* Navegación: conmutador de idioma */
.nav-idioma {
  font-size: 0.72rem !important;
  letter-spacing: 0.14em;
  padding: 0.22rem 0.55rem !important;
  border-radius: 999px;
  border: 1px solid rgba(47, 208, 224, 0.45);
  color: var(--tinta-suave);
}

/* Botón Donar fijo en la parte inferior (móvil) */
.donar-fijo {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 55;
  display: none;
  padding: 0.55rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: #4a3608;
  background: linear-gradient(120deg, var(--oro-palido), var(--oro-luz));
  border: 1px solid rgba(217, 168, 57, 0.8);
  box-shadow: 0 10px 30px -8px rgba(217, 168, 57, 0.65);
}

/* Pie de columnas — Explora · Documentos · Contacto */
.pie-columnas {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(1.4rem, 4vw, 3rem);
  text-align: left;
  margin: 0 auto;
  max-width: 72rem;
}
.pie-col > p:first-child { margin-top: 0; }
.pie-titulo {
  margin: 0 0 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #0d2b2e;
}
.pie-enlaces {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.pie-enlaces a { color: var(--tinta-suave); text-decoration: none; }
.pie-enlaces a:hover { color: #0d2b2e; text-decoration: underline; text-decoration-color: var(--oro-luz); }
.pie-final {
  margin: 2.2rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(47, 208, 224, 0.3);
  text-align: center;
  font-size: 0.78rem;
}

/* ------------------------------------------------------------
   Pie
   ------------------------------------------------------------ */
.pie {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 2.5rem 1.5rem 3rem;
  font-size: 0.85rem;
  color: var(--tinta-suave);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.55));
}
.pie p { margin: 0.2rem 0; }
.pie-nota { font-size: 0.78rem; opacity: 0.85; }

/* ------------------------------------------------------------
   Revelado al hacer scroll
   ------------------------------------------------------------ */
[data-revelar] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 0.8, 0.3, 1);
}
[data-revelar].visible {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 1200px) {
  /* El menú completo (8 rutas + Donar) respira mejor en pantallas medias */
  .nav-menu { gap: clamp(0.55rem, 1.4vw, 1.1rem); }
  .nav-menu a { font-size: 0.78rem; }
  .nav-nombre { font-size: 0.78rem; letter-spacing: 0.22em; }
}
@media (max-width: 900px) {
  .flota { display: none; }

  .nav-boton {
    display: grid;
    gap: 5px;
    padding: 0.6rem;
    cursor: pointer;
    z-index: 60;
  }
  .nav-boton span {
    width: 1.5rem;
    height: 2px;
    border-radius: 2px;
    background: var(--tinta);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .nav-menu {
    position: fixed;
    top: 4.4rem; /* bajo la barra de navegación, no tapada por ella */
    right: 0;
    /* OJO: .nav usa backdrop-filter, lo que lo vuelve el bloque
       contenedor de este panel fixed; bottom:0 / height:100% se
       resolverían contra la barra (¡64px!), no contra el viewport.
       Altura explícita en unidades de viewport (dvh con fallback vh)
       para llenar de 4.4rem hasta el borde inferior de la pantalla. */
    height: calc(100vh - 4.4rem);
    width: min(78vw, 19rem);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start; /* antes center: con 10 opciones el
       contenido centrado desbordaba y se cortaba por arriba sin poder
       hacer scroll hacia los primeros ítems */
    gap: 1.6rem;
    padding: 1.6rem 2rem 2.4rem;
    background: rgba(245, 251, 250, 0.88);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    backdrop-filter: blur(22px) saturate(1.2);
    border-left: 1px solid rgba(255,255,255,0.7);
    box-shadow: -20px 0 60px -30px rgba(23,84,92,0.5);
    transform: translateX(105%);
    transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1);
    overflow-y: auto; /* scroll si el menú excede la altura de pantalla */
    overscroll-behavior: contain;
  }
  @supports (height: 100dvh) {
    /* dvh: se ajusta cuando la barra de dirección del móvil cambia */
    .nav-menu { height: calc(100dvh - 4.4rem); }
  }
  .nav-menu a { font-size: 1.05rem; }
  .nav-toggle:checked ~ .nav-menu { transform: translateX(0); }
  .nav-toggle:checked ~ .nav-boton span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-boton span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-boton span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nodos { grid-template-columns: 1fr; max-width: 24rem; }
  .nodo--a, .nodo--b, .nodo--c { transform: none; }
  .nodo--a:hover, .nodo--b:hover, .nodo--c:hover { transform: translateY(-4px); }
  .nodo--a:active, .nodo--b:active, .nodo--c:active { transform: translateY(-2px) scale(0.985); }
  .nodos-linea { display: none; }

  .stats { gap: 1.6rem; flex-wrap: wrap; }
  .stat--b { transform: none; }
  .stats-linea { display: none; }

  .panel--derecha, .panel--izquierda { justify-self: center; margin: 0; }
  .retrato { width: min(64vw, 13rem); }
  .retrato--b { transform: none; }

  .dos-columnas { grid-template-columns: 1fr; width: min(94vw, 40rem); }
  /* La variante ancha colapsa a una columna y su panel replica por
     construcción a los paneles previos: min(92vw, 46rem) autocentrado */
  .dos-columnas.dos-columnas--ancha { width: 100%; margin-inline: 0; grid-template-columns: 1fr; }
  .dos-columnas.dos-columnas--ancha .panel { width: min(92vw, 46rem); justify-self: center; }
  .nodos--cuatro { grid-template-columns: 1fr; max-width: 24rem; }
  .pie-columnas { grid-template-columns: 1fr; text-align: center; gap: 1.8rem; }
  .donar-fijo { display: block; }
  .seccion--portada { min-height: 70vh; }
}

/* ------------------------------------------------------------
   Movimiento reducido
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-revelar] { opacity: 1; transform: none; }
  .hero-scroll { display: none; }
}