/* ============================================================
   REDISEÑO — secciones nuevas y ritmo de contraste

   Se carga la última. Contiene:
     1 · el ritmo claro/verde que rompe la monotonía
     2 · la comparativa
     3 · las tres tarjetas con hueco para pieza de IA
     4 · el muro de piezas
   ============================================================ */

/* ============================================================
   1 · RITMO DE CONTRASTE

   El sitio era verde de arriba abajo. Ahora alternan bandas claras y
   oscuras. Los tokens de superficie clara salen del modo claro que
   retiramos —ya venían medidos en contraste— pero aquí no dependen de
   ningún conmutador: son parte del diseño único.
   ============================================================ */
.band-light {
  --sf-band-a: #f4f7ea;
  --sf-band-b: #e9efd6;
  --sf-plate: rgba(255, 255, 255, 0.72);
  --sf-plate-hi: rgba(255, 255, 255, 0.92);
  --sf-hair: rgba(40, 46, 2, 0.14);
  --sf-hair-hi: rgba(133, 130, 1, 0.5);
  --tx-1: #10130a;
  --tx-2: #4a4e3e;
  --tx-3: #5f6353;
  --c-ink: #10130a;
  --c-stone: #4a4e3e;
  --c-moss: #55530b;
  --band-glow: rgba(156, 176, 1, 0.20);
  --band-shadow: 0 16px 38px rgba(40, 46, 2, 0.10);

  background: linear-gradient(180deg, var(--sf-band-a) 0%, var(--sf-band-b) 50%, var(--sf-band-a) 100%);
  color: var(--tx-1);
}

.band-light .section-head h2,
.band-light h2,
.band-light h3 { color: var(--tx-1); }
.band-light .section-sub,
.band-light p { color: var(--tx-2); }
.band-light .eyebrow { color: #55530b; }
.band-light .eyebrow-mark { background: #7f9c01; }
.band-light .c-icon { color: #55530b; filter: none; }

/* El velo de la aurora se invierte: aclara en vez de oscurecer */
.band-light::after {
  background:
    radial-gradient(120% 96% at 50% 50%,
      rgba(244, 247, 234, 0.88) 0%,
      rgba(244, 247, 234, 0.72) 40%,
      rgba(244, 247, 234, 0.38) 72%,
      rgba(244, 247, 234, 0.06) 100%) !important;
}

.band-light::before {
  background:
    radial-gradient(38% 46% at var(--a1x, 22%) var(--a1y, 26%), rgba(156, 176, 1, 0.30) 0%, rgba(156, 176, 1, 0) 62%),
    radial-gradient(34% 40% at var(--a2x, 74%) var(--a2y, 22%), rgba(220, 220, 98, 0.26) 0%, rgba(220, 220, 98, 0) 60%),
    radial-gradient(46% 52% at var(--a3x, 62%) var(--a3y, 78%), rgba(133, 130, 1, 0.18) 0%, rgba(133, 130, 1, 0) 64%) !important;
}

/* Los CTA sobre banda clara conservan el gradiente y el texto ink */
.band-light .btn-primary { color: #000200; }

/* ============================================================
   2 · COMPARATIVA
   ============================================================ */
.cmp-scroll {
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.cmp-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  text-align: left;
}

.cmp-table thead th {
  padding: 0 0.75rem 1rem;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(0.9375rem, 0.86rem + 0.3vw, 1.25rem);
  color: var(--tx-1);
  text-align: center;
  white-space: nowrap;
}

.cmp-row { border-top: 1px solid var(--sf-hair); }

.cmp-row > th {
  padding: 1.375rem 1.25rem 1.375rem 0;
  font-weight: 400;
  vertical-align: top;
  min-width: 260px;
}

.cmp-row > th b {
  display: block;
  font-family: var(--f-ui);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--tx-1);
}

.cmp-row > th span {
  display: block;
  margin-top: 0.375rem;
  max-width: 42ch;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--tx-2);
}

.cmp-row > td { padding: 1.375rem 0.75rem; text-align: center; }

.cmp-mark {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
}

.cmp-mark svg { width: 20px; height: 20px; }
.cmp-mark--yes { color: var(--c-litoria-hi); }
.cmp-mark--no { color: var(--tx-3); opacity: 0.5; }

/* Nuestra fila, destacada */
.cmp-row--mine {
  background: linear-gradient(100deg, rgba(220, 220, 98, 0.14), rgba(127, 194, 74, 0.10));
  border-top-color: var(--c-litoria-hi);
  border-bottom: 1px solid var(--c-litoria-hi);
}

.cmp-row--mine > th { padding-left: 1.25rem; }
.cmp-row--mine > th b { color: var(--c-litoria-hi); font-size: 1.1875rem; }
.cmp-row--mine .cmp-mark--yes { color: var(--c-chartreuse); }

.band-light .cmp-row--mine {
  background: linear-gradient(100deg, rgba(156, 176, 1, 0.20), rgba(127, 194, 74, 0.13));
  border-top-color: #55530b;
  border-bottom-color: #55530b;
}
.band-light .cmp-row--mine > th b,
.band-light .cmp-mark--yes { color: #45440a; }

/* ============================================================
   3 · TRES TARJETAS
   ============================================================ */
.trio-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.875rem, 1.6vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3.25rem);
}

.trio-card {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: var(--sf-plate);
  border: 1px solid var(--sf-hair);
  transition: transform 320ms var(--ease-out), border-color 320ms ease;
}

.trio-card:hover { transform: translateY(-4px); border-color: var(--sf-hair-hi); }

/* Hueco para la pieza: no es un placeholder gris, es un espacio con vida
   propia para que el bloque no se vea muerto hasta que llegue el contenido */
.trio-media {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(70% 60% at 30% 25%, rgba(169, 220, 92, 0.28) 0%, rgba(169, 220, 92, 0) 62%),
    radial-gradient(80% 70% at 72% 78%, rgba(156, 176, 1, 0.22) 0%, rgba(156, 176, 1, 0) 68%),
    linear-gradient(160deg, #1b2003 0%, #0f1201 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .trio-media { animation: trio-drift 14s ease-in-out infinite alternate; }
  .trio-card:nth-child(2) .trio-media { animation-duration: 17s; animation-delay: -4s; }
  .trio-card:nth-child(3) .trio-media { animation-duration: 12s; animation-delay: -8s; }
}

@keyframes trio-drift {
  from { background-position: 0% 0%, 100% 100%, 0 0; }
  to { background-position: 30% 20%, 70% 80%, 0 0; }
}

.trio-slot {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-pill);
  border: 1px dashed rgba(250, 251, 248, 0.28);
  font-family: var(--f-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 251, 248, 0.72);
  background: rgba(12, 15, 1, 0.42);
}

.trio-slot-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-litoria-hi);
  box-shadow: 0 0 8px rgba(169, 220, 92, 0.9);
}

.trio-foot { padding: 1.375rem 1.5rem 1.5rem; }

.trio-foot b {
  display: block;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  line-height: 1.2;
}

.trio-foot span {
  display: block;
  margin-top: 0.4375rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  opacity: 0.78;
}

/* Los tres pies en tres colores: es lo que rompe la monotonía */
.trio-card--lime .trio-foot { background: var(--c-chartreuse); color: #10130a; }
.trio-card--deep .trio-foot { background: #1b2003; color: var(--c-platinum); }
.trio-card--cream .trio-foot { background: #f4f7ea; color: #10130a; }

@media (max-width: 899px) {
  .trio-grid { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
}

/* ============================================================
   4 · MURO DE PIEZAS

   Tres columnas en bucle: la primera sube, la segunda baja, la tercera
   sube. Cada tira está duplicada en el DOM y la animación recorre
   exactamente el 50% de la altura total, así el salto es invisible.
   ============================================================ */
.wall { position: relative; overflow: hidden; }

.wall-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  height: clamp(520px, 72vh, 820px);
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  /* el muro se desvanece arriba y abajo en vez de cortarse en seco */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.wall-col { position: relative; overflow: hidden; }

.wall-strip {
  list-style: none;
  display: grid;
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  margin: 0;
  padding: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .wall-col--up .wall-strip { animation: wall-up 56s linear infinite; }
  .wall-col--down .wall-strip { animation: wall-down 64s linear infinite; }
  .wall-col:nth-child(3) .wall-strip { animation-duration: 48s; }
}

@keyframes wall-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes wall-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }

/* Al pasar el cursor —o al enfocar con teclado— se detienen las tres */
.wall.is-held .wall-strip { animation-play-state: paused; }

.wall-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(250, 251, 248, 0.10);
  transition: transform 380ms var(--ease-out), box-shadow 380ms ease, border-color 380ms ease;
}

/* La pieza bajo el cursor crece y es la única que sigue viva */
.wall-tile:hover,
.wall-tile:focus-within {
  transform: scale(1.06);
  z-index: 2;
  border-color: rgba(169, 220, 92, 0.6);
  box-shadow: 0 0 34px rgba(156, 176, 1, 0.34), 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* Los gradientes en movimiento SON el contenido hasta que lleguen las piezas */
.wall-art {
  position: absolute;
  top: -30%;
  right: -30%;
  bottom: -30%;
  left: -30%;
  background:
    radial-gradient(42% 40% at 28% 26%, rgba(220, 220, 98, 0.42) 0%, rgba(220, 220, 98, 0) 62%),
    radial-gradient(50% 46% at 74% 34%, rgba(169, 220, 92, 0.40) 0%, rgba(169, 220, 92, 0) 64%),
    radial-gradient(58% 54% at 46% 82%, rgba(63, 122, 24, 0.46) 0%, rgba(63, 122, 24, 0) 68%),
    linear-gradient(165deg, #232a04 0%, #0f1201 100%);
  filter: blur(22px);
  animation-play-state: paused;
}

@media (prefers-reduced-motion: no-preference) {
  .wall-art { animation: wall-art 18s ease-in-out infinite alternate; }
  .wall-tile:nth-child(2n) .wall-art { animation-duration: 22s; animation-delay: -6s; }
  .wall-tile:nth-child(3n) .wall-art { animation-duration: 15s; animation-delay: -11s; }
}

@keyframes wall-art {
  from { transform: translate3d(-4%, -3%, 0) scale(1.02) rotate(0deg); }
  to { transform: translate3d(4%, 5%, 0) scale(1.14) rotate(7deg); }
}

/* Cuando el muro está retenido, solo la pieza señalada sigue moviéndose */
.wall.is-held .wall-art { animation-play-state: paused; }
.wall.is-held .wall-tile:hover .wall-art,
.wall.is-held .wall-tile:focus-within .wall-art { animation-play-state: running; }

.wall-tag {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--radius-pill);
  background: rgba(12, 15, 1, 0.62);
  backdrop-filter: blur(6px);
  font-family: var(--f-ui);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 251, 248, 0.82);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 280ms ease, transform 280ms var(--ease-out);
}

.wall-tile:hover .wall-tag,
.wall-tile:focus-within .wall-tag { opacity: 1; transform: none; }

@media (max-width: 899px) {
  .wall-cols { grid-template-columns: repeat(2, 1fr); height: clamp(440px, 64vh, 620px); }
  .wall-col:nth-child(3) { display: none; }
}

@media (max-width: 559px) {
  .wall-cols { grid-template-columns: 1fr; height: 460px; }
  .wall-col:nth-child(2) { display: none; }
}

/* Fuera de pantalla el muro se congela por completo */
.wall.is-paused .wall-strip,
.wall.is-paused .wall-art { animation-play-state: paused !important; }

/* ============================================================
   5 · GRAFO DE TRANSFORMACIÓN

   Entra el término técnico por la izquierda, cruza el logo, sale como
   resultado de negocio por la derecha. Las curvas están calculadas y
   convergen todas en el centro; en reposo van tenues y se encienden por
   pares al señalar un término, para que el ojo siga una cada vez.
   ============================================================ */
.gr-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.5rem, 2vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3.25rem);
}

.gr-col { list-style: none; display: grid; gap: 0.5rem; margin: 0; padding: 0; }

.gr-head {
  font-family: var(--f-ui);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--tx-3);
  margin-bottom: 0.5rem;
}

.gr-col--out { text-align: right; }

.gr-item span {
  display: inline-block;
  padding: 0.5625rem 0.9375rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--sf-hair);
  background: var(--sf-plate);
  font-family: var(--f-ui);
  font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  line-height: 1.35;
  color: var(--tx-2);
  transition: border-color 260ms ease, background-color 260ms ease,
              color 260ms ease, transform 260ms var(--ease-out);
}

/* La salida es el resultado: va encendida, la entrada apagada. Eso es
   lo que hace legible la transformación de un vistazo. */
.gr-item--out span {
  border-color: rgba(169, 220, 92, 0.42);
  background: rgba(156, 176, 1, 0.14);
  color: var(--tx-1);
  font-weight: 600;
}

.gr-item.is-on span { transform: translateX(3px); }
.gr-col--out .gr-item.is-on span { transform: translateX(-3px); }

.gr-item.is-on span,
.gr-item:hover span {
  border-color: var(--c-litoria-hi);
  background: rgba(156, 176, 1, 0.22);
  color: var(--tx-1);
}

/* ---------- Núcleo ---------- */
.gr-core { position: relative; display: grid; place-items: center; min-height: 300px; }

.gr-lines {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.gr-link {
  fill: none;
  stroke: rgba(169, 220, 92, 0.22);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  transition: stroke 260ms ease, stroke-width 260ms ease;
}

.gr-link.is-on {
  stroke: var(--c-chartreuse);
  stroke-width: 2.2;
  filter: drop-shadow(0 0 6px rgba(220, 220, 98, 0.8));
}

.gr-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: clamp(64px, 9vw, 108px);
  filter: drop-shadow(0 0 18px rgba(156, 176, 1, 0.5));
}

.gr-logo svg { width: 100%; height: auto; display: block; }

.band-light .gr-link { stroke: rgba(85, 83, 11, 0.28); }
.band-light .gr-link.is-on { stroke: #55530b; filter: none; }

@media (max-width: 899px) {
  .gr-wrap { grid-template-columns: 1fr; }
  .gr-core { min-height: 0; padding: 1.5rem 0; }
  .gr-lines { display: none; }
  .gr-col--out { text-align: left; }
}

/* ============================================================
   6 · DOCK — iconos blancos que se encienden en verde

   Se ponían negros porque --dock-tx vivía en [data-theme="dark"], un
   selector que dejó de coincidir al retirar el modo claro. Los tokens ya
   están en :root; aquí se añade el encendido.
   ============================================================ */
.dock-btn { color: var(--c-platinum); }

.dock-btn:hover,
.dock-btn:focus-visible {
  color: var(--c-litoria-hi);
  background: rgba(156, 176, 1, 0.22);
}

.dock-btn:hover .c-icon,
.dock-btn:focus-visible .c-icon {
  color: inherit;
  filter: drop-shadow(0 0 8px rgba(169, 220, 92, 0.75));
}

.dock-btn .c-icon { color: currentColor; transition: filter var(--dur-fast) ease; }

/* El CTA del dock conserva su tinta oscura sobre el verde */
.dock-cta,
.dock-cta:hover { color: #000200; }

/* ============================================================
   7 · GLOBO — la caja vuelve a ser cuadrada

   Tenía aspect-ratio 1/1 junto a max-height 82vh. En ventanas más anchas
   que altas el navegador recortaba la ALTURA y la caja dejaba de ser
   cuadrada: el SVG se centraba en su caja pero el anillo se posicionaba
   en % de la caja, así que globo y textos perdían el mismo centro.

   Ahora la medida la manda la altura disponible, y la anchura se deriva
   de ella. La caja es cuadrada por construcción.
   ============================================================ */
.globe-stage {
  width: min(100%, 1180px, 78vh);
  max-height: none;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}

/* Los conceptos se encienden según se acerca el cursor */
.gl-node b,
.gl-node span { transition: color 320ms ease, text-shadow 320ms ease; }

.gl-node[data-near] b {
  color: var(--c-chartreuse);
  text-shadow: 0 0 16px rgba(220, 220, 98, 0.55), 0 2px 14px rgba(0, 0, 0, 0.8);
}

.gl-node[data-near] span { color: rgba(220, 220, 98, 0.86); }

/* ============================================================
   8 · TORNADO EN MÓVIL — lista sólida, sin depender del hover

   En táctil no hay hover, así que el mecanismo que da legibilidad en
   escritorio (encender una y apagar las once) no existe. Doce tarjetas
   semitransparentes superpuestas son ilegibles.

   Aquí el tornado se abandona: las tarjetas pasan a lista vertical,
   opacas, con la cita y la solución completas.
   ============================================================ */
/* El bloque que aplanaba el tornado en tactil se retiro en la ronda v3.6:
   el fundador pidio recuperar la helice en movil. La legibilidad que
   motivo aquel aplanado se resuelve ahora escalando la geometria al
   ancho real (tornado.js) y con rotacion automatica, no con hover.
   Ver round36.css seccion 10. */
@media (max-width: 899px) {
  /* Sin helice (reduced-motion) sigue cayendo a lista legible */
  .tornado.is-static .tornado-card {
    position: static;
    transform: none;
    opacity: 1;
    width: auto;
    height: auto;
    padding: 1.25rem 1.375rem;
    background-color: #101302;
    border-color: rgba(169, 220, 92, 0.28);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  .tornado.is-static { display: grid; gap: 0.875rem; }
  .tornado.is-static .tornado-stage { position: static; height: auto; perspective: none; }
  .tornado.is-static .tornado-card::before,
  .tornado.is-static .tornado-card::after { display: none; }
  .tornado-hint { display: none; }
  .tornado-quote { font-size: 1.0625rem; line-height: 1.35; }
  .tornado-fix { margin-top: 0.875rem; padding-top: 0.875rem; }
}

/* ============================================================
   9 · MARKETING — el ciclo deja paso a una pieza real

   Era el tercer diagrama circular de la página, tras el globo y el
   embudo. Un espacio de vídeo rompe la repetición y sirve para enseñar
   contenido generado.
   ============================================================ */
#marketing .diagram,
#ciclo .diagram { display: none; }

.mkt-media {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--sf-hair);
  background:
    radial-gradient(60% 55% at 28% 24%, rgba(169, 220, 92, 0.26) 0%, rgba(169, 220, 92, 0) 62%),
    radial-gradient(70% 62% at 74% 76%, rgba(156, 176, 1, 0.22) 0%, rgba(156, 176, 1, 0) 66%),
    linear-gradient(160deg, #1b2003 0%, #0f1201 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .mkt-media { animation: trio-drift 16s ease-in-out infinite alternate; }
}

.mkt-steps {
  margin-top: 1.125rem;
  font-family: var(--f-ui);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--tx-2);
}

.mkt-steps b { color: var(--tx-1); font-weight: 600; }

/* ============================================================
   10 · GRAFO — las curvas conectan de verdad

   Antes se dibujaban sobre un viewBox que no correspondía al ancho real
   del contenedor, así que los extremos quedaban en el vacío. Ahora el SVG
   cubre el grafo entero y las curvas van de píldora a píldora.
   ============================================================ */
.gr-wrap { position: relative; }

.gr-lines {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.gr-col { position: relative; z-index: 2; }

/* La cápsula: el logo va dentro de un cristal con su misma silueta, y las
   curvas pasan POR DETRÁS en vez de atravesarlo. */
.gr-core { position: relative; z-index: 1; }

.gr-logo {
  position: relative;
  z-index: 2;
  width: clamp(88px, 12vw, 148px);
  filter: drop-shadow(0 0 20px rgba(156, 176, 1, 0.42));
  transition: filter 380ms ease;
}

.gr-glass {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* El centro se enciende al señalar cualquier etiqueta */
.gr-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(200px, 30vw, 340px);
  height: clamp(200px, 30vw, 340px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(220, 220, 98, 0.34) 0%,
    rgba(169, 220, 92, 0.20) 34%,
    rgba(156, 176, 1, 0) 70%);
  filter: blur(24px);
  opacity: 0;
  transition: opacity 420ms ease, transform 420ms var(--ease-out);
  z-index: 0;
}

.gr-wrap.is-lit .gr-halo { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
.gr-wrap.is-lit .gr-logo { filter: drop-shadow(0 0 34px rgba(169, 220, 92, 0.85)); }

@media (max-width: 899px) {
  .gr-lines { display: none; }
  .gr-logo { width: 84px; margin-inline: auto; }
}

/* ============================================================
   11 · HEADER EN MÓVIL

   Dos correcciones medidas, no a ojo:

   · El logo sobresalía 1px sobre una barra de 56 (1,8%), mientras en
     escritorio sobresale 7 sobre 64 (10,9%). Para igualar la proporción
     necesita 68px con 6px de desborde.

   · El burger heredaba el padding del escritorio, que asume un CTA a su
     lado. Sin CTA quedaba pegado al filo.
   ============================================================ */
@media (max-width: 719px) {
  .site-header .nav {
    width: calc(100% - 2rem);
    padding-right: 0.875rem;
    padding-left: 1rem;
  }

  .site-header .nav-logo {
    width: 68px;
    height: 68px;
    margin-block: -6px;
  }

  .nav-toggle { margin-left: 0.375rem; margin-right: 0; }

  .wordmark { gap: 0.625rem; }
  .nav-brand-text { font-size: 0.8125rem; letter-spacing: 0.1em; }
}

@media (max-width: 419px) {
  .site-header .nav { width: calc(100% - 1.5rem); padding-left: 0.75rem; }
  .site-header .nav-logo { width: 60px; height: 60px; margin-block: -5px; }
  .nav-brand-text { font-size: 0.75rem; }
}

/* ============================================================
   12 · ESPACIADO GENERAL EN MÓVIL

   El dock flotante tapaba el último elemento de varias secciones, y los
   títulos grandes se solapaban con el contenido siguiente.
   ============================================================ */
@media (max-width: 719px) {
  :root { --gutter: 1.25rem; }

  .band-lg { padding-block: clamp(3rem, 9vw, 4.5rem); }

  .section-head { margin-bottom: 1.5rem; }
  .section-head h2 { line-height: 1.12; }

  /* El dock mide ~52px y flota abajo: la última sección necesita hueco
     o su contenido queda debajo. */
  main > section:last-of-type { padding-bottom: calc(clamp(3rem, 9vw, 4.5rem) + 72px); }

  .closer-alt { margin-bottom: 3.5rem; }

  .trio-grid, .pf-mods { gap: 0.875rem; }
  .cmp-scroll { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
}

/* ============================================================
   13 · ECO-MAP EN MÓVIL — curva serpenteante

   La versión anterior era una barra vertical con puntos: un apaño para
   que no se rompiera, no una versión pensada. No se parecía en nada a la
   curva de escritorio.

   Ahora es un trazado propio que entra por el borde izquierdo, serpentea
   entre los cuatro nodos y sale por el derecho. El encendido va ligado
   al avance, igual que en escritorio.
   ============================================================ */
.eco-mob-svg { display: none; }

@media (max-width: 899px) {
  .eco-map-svg { display: none; }

  .eco-mob-svg {
    display: block;
    position: absolute;
    top: 0;
    left: calc(var(--gutter) * -1);
    width: calc(100% + var(--gutter) * 2);
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
  }

  .eco-mob-casing {
    stroke: rgba(156, 176, 1, 0.16);
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
  }

  .eco-mob-curve {
    stroke: var(--c-litoria-hi);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1;
    stroke-dashoffset: calc(1 - var(--grow, 0));
    filter: drop-shadow(0 0 6px rgba(169, 220, 92, 0.55));
    transition: stroke-dashoffset 700ms var(--ease-out);
  }

  .eco-mob-dot {
    fill: #0f1201;
    stroke: rgba(156, 176, 1, 0.4);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    transition: fill 400ms ease, stroke 400ms ease, r 400ms var(--ease-out);
  }

  /* Cada nodo enciende cuando la línea llega a su fracción */
  .eco-mob-dot.is-on {
    fill: var(--c-litoria-hi);
    stroke: var(--c-chartreuse);
    r: 9;
    filter: drop-shadow(0 0 10px rgba(169, 220, 92, 0.9));
  }

  .eco-map { position: relative; padding-left: 2.25rem; }
  .eco-map .eco-labels { position: relative; z-index: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .eco-mob-curve { transition: none; stroke-dashoffset: 0; }
}