/* ============================================================
   BRAND JUNGLE — RONDA DE CORRECCIONES v3.6
   Se carga la última: gana la cascada sin tocar las hojas previas,
   así el rollback es quitar un <link>.

   Índice
   01 · Ecosistemas — globo centrado, textos en anillo (desktop + móvil)
   02 · Marketing — el vídeo a la derecha de la copy
   03 · Growth — fuera el ciclo, entra el vídeo vertical a la izquierda
   04 · Nav móvil — logo mayor, aire en el burger, drawer oscuro con links
   05 · Glosario — tarjeta hexagonal y líneas continuas
   06 · Selected work — tres columnas verticales con parallax
   07 · Why us — columnas equidistantes, material con relieve, glow
   08 · Hero — costura con la banda siguiente y eco-map móvil
   09 · Qualifier — chips con gradiente de CTA
   10 · Tornado en táctil
   11 · Ritmo móvil (spacing)
   12 · Sin scroll horizontal en ningún breakpoint
   ============================================================ */

/* ============================================================
   01 · ECOSISTEMAS — el globo al centro, los conceptos en anillo

   El problema no era de nudges: los conceptos viven en un círculo de
   radio 0.5W y el globo ocupaba 0.378W, así que en las diagonales el
   texto entraba en la caja del globo. Al bajar el globo a 0.34W la
   esfera ya no existe a la altura de las diagonales — el solape deja
   de ser posible por geometría, no por ajuste fino.
   ============================================================ */
.ecosystem .globe-wrap {
  /* NO usar display:grid aqui: .globe-stage se dimensiona con % y el SVG
     va absoluto, asi que cualquier contexto que encoja el ancho colapsa
     la caja y los conceptos se apilan en el centro. Bloque a ancho
     completo y el escenario centrado con margin. */
  display: block;
  width: 100%;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

.ecosystem .globe-stage {
  /* 15% de carril: el 70% central es la esfera, el resto es el anillo */
  padding: 15%;
  width: min(100%, 1120px);
  max-height: none;
  margin-inline: auto;
}

/* globe.css declara top/right/bottom/left al 11% Y width/height 100% a la
   vez: width gana, asi que la esfera medias 1120x780 (el escenario entero)
   colocada con origen al 11%, es decir descentrada abajo-derecha. De ahi
   que solaparan justo las etiquetas de ese lado y sobrara aire en el
   opuesto. Se fija el tamano al recuadro interior y se anulan los insets
   contrarios. */
.ecosystem .globe-svg {
  top: 15%;
  left: 15%;
  right: auto;
  bottom: auto;
  width: 70%;
  height: 70%;
}

/* El texto nunca invade el carril del globo */
.ecosystem .gl-node { max-width: 15ch; }
.ecosystem .gl-node--c { max-width: 18ch; }

@media (min-width: 900px) {
  /* El globo centrado en la seccion, sin tocar el flujo del container */
  .ecosystem .section-head-center { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
  .ecosystem .globe-stage { max-height: min(78vh, 860px); }
}

/* ---------- Móvil: anillo real de 3 columnas ----------
   Antes eran ocho items apilados bajo el globo en dos columnas con
   alineaciones mezcladas: ya no rodeaban nada. Aquí el globo ocupa la
   columna central y los conceptos se reparten arriba, a los flancos y
   abajo, cada uno creciendo hacia fuera. */
@media (max-width: 899px) {
  .ecosystem .globe-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(33vw, 150px) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
    align-items: center;
    justify-items: stretch;
    gap: clamp(0.6rem, 2.2vw, 1.1rem) clamp(0.5rem, 2vw, 0.9rem);
    margin-top: clamp(1.75rem, 6vw, 2.5rem);
  }

  /* Los anillos viven DENTRO de .globe-stage, no de .globe-wrap. Para que
     los conceptos sean items del grid del wrap hay que disolver los dos
     niveles: el escenario y los dos <ul>. Si solo se disuelven los <ul>,
     los nodos caen dentro del escenario (que no es grid) y se apilan. */
  .ecosystem .globe-stage {
    display: contents;
  }

  .ecosystem .globe-svg {
    position: static;
    grid-column: 2;
    grid-row: 2 / span 3;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    align-self: center;
    justify-self: center;
    inset: auto;
  }

  .ecosystem .gl-ring {
    display: contents;
    position: static;
  }

  .ecosystem .gl-node {
    position: static;
    transform: none !important;
    /* globe.css los deja en width:max-content: en una columna estrecha
       eso los hace rebasar el carril y salirse de la pantalla. */
    width: auto;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  /* Posicion por atributo, no por orden de hijo: nth-child se rompe en
     cuanto cambia el markup y ademas convive mal con display:contents. */
  .ecosystem .gl-node[data-ring="design"]   { grid-column: 2; grid-row: 1; text-align: center; }
  .ecosystem .gl-node[data-ring="marketing"]{ grid-column: 3; grid-row: 2; text-align: left; }
  .ecosystem .gl-node[data-ring="sales"]    { grid-column: 3; grid-row: 3; text-align: left; }
  .ecosystem .gl-node[data-ring="ai"]       { grid-column: 3; grid-row: 4; text-align: left; }
  .ecosystem .gl-node[data-ring="content"]  { grid-column: 2; grid-row: 5; text-align: center; }
  .ecosystem .gl-node[data-ring="social"]   { grid-column: 1; grid-row: 4; text-align: right; }
  .ecosystem .gl-node[data-ring="strategy"] { grid-column: 1; grid-row: 3; text-align: right; }
  .ecosystem .gl-node[data-ring="web"]      { grid-column: 1; grid-row: 2; text-align: right; }

  .ecosystem .gl-node b,
  .ecosystem .gl-node span { text-align: inherit; }

  .ecosystem .gl-node b {
    font-size: clamp(0.625rem, 2.6vw, 0.75rem);
    letter-spacing: 0.06em;
    line-height: 1.25;
  }

  .ecosystem .gl-node span {
    margin-top: 0.25rem;
    font-size: clamp(0.5625rem, 2.4vw, 0.6875rem);
    line-height: 1.3;
  }

  /* La cabecera del <ul> estorba en el anillo */
  .ecosystem .gl-ring .gl-head { display: none; }
}

@media (max-width: 419px) {
  .ecosystem .globe-wrap { grid-template-columns: minmax(0, 1fr) min(30vw, 120px) minmax(0, 1fr); }
}

/* ============================================================
   02 · MARKETING — el espacio de vídeo a la derecha de la copy

   La rejilla era de una sola columna (620px) con el diagrama absoluto
   detrás; por eso el vídeo caía debajo. Ahora son dos columnas reales.
   ============================================================ */
@media (min-width: 900px) {
  #marketing .marketing-grid,
  #marketing .container.marketing-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    row-gap: 1.5rem;
    align-items: center;
    min-height: 0;
  }

  #marketing .marketing-copy { grid-column: 1; grid-row: 1; }

  #marketing .mkt-media {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
    aspect-ratio: 4 / 3;
    align-self: center;
  }

  #marketing .mkt-steps { grid-column: 1 / -1; grid-row: 2; margin-top: 0.5rem; }
}

/* El diagrama del bucle queda fuera en ambos idiomas (antes solo #ciclo) */
#marketing .diagram,
#ciclo .diagram,
#growth .diagram,
#plataforma .diagram { display: none !important; }

/* ============================================================
   03 · GROWTH — fuera el ciclo, entra un vídeo vertical a la izquierda
   ============================================================ */
#growth .growth-inner,
#ciclo .growth-inner {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  justify-content: stretch;
  align-items: center;
  column-gap: clamp(2rem, 5vw, 4.5rem);
  min-height: 0;
}

#growth .growth-media,
#ciclo .growth-media {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  aspect-ratio: 3 / 4;
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--sf-hair, rgba(169, 220, 92, 0.18));
  background:
    radial-gradient(62% 48% at 30% 22%, rgba(169, 220, 92, 0.24) 0%, rgba(169, 220, 92, 0) 62%),
    radial-gradient(70% 56% at 72% 78%, rgba(156, 176, 1, 0.20) 0%, rgba(156, 176, 1, 0) 66%),
    linear-gradient(160deg, #1b2003 0%, #0f1201 100%);
}

#growth .section-head,
#ciclo .section-head {
  grid-column: 2;
  grid-row: 1;
  max-width: none;
  margin-left: 0;
  text-align: left;
}

#growth .section-head .section-sub,
#ciclo .section-head .section-sub { margin-left: 0; }

/* La lista del ciclo se va con el diagrama */
#growth .diagram-list,
#ciclo .diagram-list { display: none !important; }

@media (max-width: 899px) {
  #growth .growth-inner,
  #ciclo .growth-inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(1.75rem, 6vw, 2.5rem);
  }
  #growth .section-head,
  #ciclo .section-head { grid-column: 1; grid-row: 1; }
  #growth .growth-media,
  #ciclo .growth-media { grid-column: 1; grid-row: 2; aspect-ratio: 4 / 5; }
}

/* ============================================================
   04 · NAV MÓVIL — logo mayor, aire tras el burger, drawer oscuro

   Los links existían en el DOM pero `.nav-links{display:none}` a
   ≤1023px los mataba también dentro del drawer.
   ============================================================ */
@media (max-width: 1023px) {
  .site-header.menu-open .nav-menu .nav-links { display: grid; }
}

@media (max-width: 859px) {
  .site-header .nav-menu {
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    border-radius: 22px;
    border: 1px solid rgba(250, 251, 248, 0.16);
    border-bottom: 1px solid rgba(250, 251, 248, 0.16);
    /* mismo cristal del header, no el platinum blanco */
    background: linear-gradient(140deg, rgba(18, 22, 3, 0.96), rgba(24, 29, 4, 0.94));
    backdrop-filter: blur(var(--blur-glass, 16px));
    -webkit-backdrop-filter: blur(var(--blur-glass, 16px));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    padding: 1.125rem 1.25rem 1.375rem;
    gap: 0.875rem;
  }

  .site-header.menu-open { background: transparent; border-bottom-color: transparent; }

  .site-header .nav-menu .nav-links {
    display: grid;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-header .nav-menu .nav-links a {
    display: block;
    padding: 0.75rem 0.25rem;
    font-family: var(--f-ui);
    font-size: 1.0625rem;
    color: var(--c-platinum);
    border-bottom: 1px solid rgba(250, 251, 248, 0.08);
  }

  .site-header .nav-menu .nav-links li:last-child a { border-bottom: 0; }
  .site-header .nav-menu .btn-nav { justify-content: center; margin-top: 0.25rem; }
}

/* Logo mayor y burger con aire real a la derecha */
@media (max-width: 719px) {
  .site-header .nav {
    padding-right: 1.5rem;
    padding-left: 1rem;
  }
  .site-header .nav-logo { width: 78px; height: 78px; margin-block: -9px; }
  .nav-toggle { margin-left: 0.5rem; margin-right: 0; }
  .nav-brand-text { font-size: 0.875rem; letter-spacing: 0.1em; }
}

@media (max-width: 419px) {
  .site-header .nav { width: calc(100% - 1.5rem); padding-left: 0.875rem; padding-right: 1.125rem; }
  .site-header .nav-logo { width: 68px; height: 68px; margin-block: -7px; }
  .nav-brand-text { font-size: 0.8125rem; }
}

/* ============================================================
   05 · GLOSARIO — tarjeta hexagonal glossy + líneas continuas

   El logo tiene el interior calado: las líneas se veían pasar por
   dentro. La tarjeta cierra el hexágono por debajo del logo y le da
   cuerpo. Las líneas ya no mueren en el centro: cruzan de borde a
   borde por el centro exacto de cada tag (geometría medida en JS).
   ============================================================ */
.gr-wrap { position: relative; }

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

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

/* .gr-core NO puede crear bloque contenedor: el SVG de lineas es absoluto
   y quedaba encerrado en la columna central, por eso los trazos no
   alcanzaban los tags. Se apila con z-index sin position:relative. */
.gr-core { position: static; z-index: 1; }

/* El tag es opaco: la línea pasa POR DETRÁS, no a través del texto */
.gr-item span {
  position: relative;
  background-color: #10140177;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.gr-item--out span { background-color: rgba(30, 38, 2, 0.86); }

/* ---------- Tarjeta hexagonal ---------- */
.gr-hexcard {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;   /* por encima del SVG de lineas, por debajo del logo */
  width: clamp(112px, 15.5vw, 186px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.gr-hexcard svg { width: 100%; height: 100%; display: block; overflow: visible; }

.gr-hexcard-fill {
  /* Antes era casi transparente y las lineas encendidas se leian POR DENTRO
     del logo. Ahora la tarjeta es opaca: sigue siendo cristal, pero cristal
     que tapa. */
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.55));
}

.gr-hexcard-base { filter: drop-shadow(0 0 22px rgba(156, 176, 1, 0.5)); }

.gr-hexcard-edge {
  filter: drop-shadow(0 0 8px rgba(220, 220, 98, 0.5));
  transition: stroke 320ms ease, filter 320ms ease;
}

/* Halo neon detras de la tarjeta: el resplandor sale del borde hacia fuera */
.gr-hexcard-glow {
  filter: blur(14px);
  opacity: .55;
  transition: opacity 320ms ease;
}
.gr-wrap.is-lit .gr-hexcard-glow { opacity: .95; }

/* Resplandece al encenderse las líneas */
.gr-wrap.is-lit .gr-hexcard-edge {
  stroke: rgba(220, 220, 98, 0.95);
  filter: drop-shadow(0 0 18px rgba(220, 220, 98, 0.9))
          drop-shadow(0 0 34px rgba(156, 176, 1, 0.55));
}

.gr-wrap.is-lit .gr-hexcard-fill { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .gr-hexcard { animation: hexcard-breathe 7s ease-in-out infinite alternate; }
  @keyframes hexcard-breathe {
    from { filter: drop-shadow(0 0 12px rgba(156, 176, 1, 0.28)); }
    to   { filter: drop-shadow(0 0 30px rgba(156, 176, 1, 0.55)); }
  }
}

.gr-logo { position: relative; z-index: 1; }

/* ---------- Móvil: tags en horizontal, encendido en cascada ---------- */
@media (max-width: 899px) {
  .gr-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.25rem, 4vw, 1.75rem);
  }

  /* las líneas SÍ existen en móvil (antes display:none) */
  .gr-lines { display: block; }

  .gr-col {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    max-width: 100%;
  }

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

  .gr-head {
    flex: 0 0 100%;
    text-align: center;
    margin-bottom: 0.25rem;
  }

  .gr-item { display: inline-flex; }

  .gr-item span {
    padding: 0.5rem 0.8125rem;
    font-size: 0.75rem;
    white-space: normal;
  }

  .gr-core { min-height: 0; padding: 0.5rem 0; }
  .gr-hexcard { width: clamp(104px, 30vw, 140px); }
}

/* ============================================================
   06 · SELECTED WORK — tres columnas verticales con parallax

   Fusiona el portafolio (filas en zigzag) y el muro AI. Izquierda
   baja · centro sube · derecha baja, ligado al progreso de scroll.
   ============================================================ */
.showcase { position: relative; overflow: hidden; }

.sc-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
  margin-top: clamp(2rem, 5vw, 3.25rem);
  align-items: start;
}

.sc-col {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.sc-viewport {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 20px;
  height: clamp(340px, 46vw, 620px);
  border: 1px solid var(--sf-hair, rgba(169, 220, 92, 0.18));
  background: var(--sf-band-b, #0f1201);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}

.sc-track {
  list-style: none;
  display: grid;
  gap: clamp(0.5rem, 1.2vw, 0.875rem);
  margin: 0;
  padding: clamp(0.5rem, 1.2vw, 0.875rem);
  will-change: transform;
  transform: translate3d(0, var(--sc-y, 0px), 0);
}

.sc-tile {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #0b0e01;
}

.sc-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hueco declarado para material que aún no existe — nunca una
   reconstrucción CSS de la marca */
.sc-tile--slot {
  display: grid;
  place-items: center;
  border: 1px dashed rgba(220, 220, 98, 0.3);
  background:
    radial-gradient(60% 50% at 30% 24%, rgba(169, 220, 92, 0.16) 0%, rgba(169, 220, 92, 0) 64%),
    linear-gradient(160deg, #1b2003 0%, #0f1201 100%);
}

.sc-slot {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  font-family: var(--f-ui);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 251, 248, 0.72);
  text-align: center;
  line-height: 1.4;
}

.sc-slot-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-green, #9cb001);
  flex: 0 0 auto;
}

/* ---------- Ficha bajo cada columna ---------- */
.sc-body { min-width: 0; }

.sc-index {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--c-green, #9cb001);
  margin: 0 0 0.25rem;
}

.sc-body .cat {
  font-family: var(--f-ui);
  font-size: 0.625rem;
  letter-spacing: var(--track-label, 0.14em);
  text-transform: uppercase;
  color: var(--tx-3, rgba(250, 251, 248, 0.6));
  margin: 0 0 0.375rem;
}

.sc-body h3 { margin: 0 0 0.5rem; font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); }

.sc-blurb {
  margin: 0 0 0.875rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--tx-2, rgba(250, 251, 248, 0.78));
}

.sc-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0 0 1rem;
  padding: 0;
}

.sc-tags li {
  padding: 0.3125rem 0.625rem;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--sf-hair, rgba(169, 220, 92, 0.2));
  font-family: var(--f-ui);
  font-size: 0.6875rem;
  color: var(--tx-2, rgba(250, 251, 248, 0.78));
}

.sc-link {
  font-family: var(--f-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-litoria-hi, #a9dc5c);
}

.sc-col:hover .sc-viewport,
.sc-col:focus-visible .sc-viewport { border-color: var(--c-litoria-hi, #a9dc5c); }
.sc-col:focus-visible { outline: 2px solid var(--c-litoria-hi, #a9dc5c); outline-offset: 4px; border-radius: 20px; }

.sc-foot {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-family: var(--f-ui);
  font-size: var(--fs-small, 0.8125rem);
  color: var(--tx-3, rgba(250, 251, 248, 0.6));
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .sc-track { transform: none !important; }
}

/* En móvil las tres columnas no caben en paralelo: se apilan y cada una
   conserva su pista animada y su ficha completa. */
@media (max-width: 899px) {
  .sc-cols { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 7vw, 3rem); }
  .sc-viewport { height: clamp(300px, 74vw, 420px); }
  .sc-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   07 · WHY US — jungla ilustrada + tarjetas de cristal

   Rediseño completo (v3.6b). La banda deja de ser clara: el fondo es
   oscuro y liso, y cada fila es una tarjeta de cristal translúcido
   flotando encima. El neón de los checks y las X se conserva — y sobre
   oscuro por fin se lee.

   La ilustración de jungla en vectores se retiró a petición del fundador
   (16-08): el fondo se queda limpio.
   ============================================================ */


.compare--light > .container { position: relative; z-index: 2; }
.compare--light .section-head h2 { color: var(--c-platinum, #fafbf8); }
.compare--light .section-sub { color: rgba(250, 251, 248, 0.74); }
.compare--light .eyebrow { color: var(--c-litoria-hi, #a9dc5c); }

/* ---------- La tabla ---------- */
.compare--light .cmp-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 12px;
}

.compare--light .cmp-table colgroup col { width: 12.5%; }
.compare--light .cmp-table colgroup col:first-child { width: 25%; }

.compare--light .cmp-table thead th {
  text-align: center;
  white-space: normal;
  padding: 0 0.5rem 0.75rem;
  line-height: 1.25;
  color: rgba(250, 251, 248, 0.8);
  font-family: var(--f-display);
  border: 0;
}

/* ---------- Filas como tarjetas de cristal ---------- */
/* El cristal vive en la FILA, no en cada celda: con backdrop-filter por
   celda cada una generaba su propio panel y se veian costuras verticales
   partiendo la tarjeta. */
.compare--light tr.cmp-row {
  position: relative;
  background:
    linear-gradient(158deg, rgba(250, 251, 248, 0.10) 0%, rgba(250, 251, 248, 0.032) 46%, rgba(250, 251, 248, 0.06) 100%);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(250, 251, 248, 0.20),
    inset 0 0 0 1px rgba(250, 251, 248, 0.10),
    0 18px 44px rgba(0, 2, 0, 0.42);
}

.compare--light .cmp-row > th,
.compare--light .cmp-row > td {
  position: relative;
  background: none;
  border: 0;
  box-shadow: none;
  vertical-align: middle;
  padding-block: 1.5rem;
}

.compare--light tr.cmp-row { border-radius: 18px; }
.compare--light .cmp-row > th:first-child {
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
  padding-left: 1.75rem;
}
.compare--light .cmp-row > td:last-child {
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
}

/* Barniz: la luz nace arriba-izquierda y muere antes del centro */
.compare--light .cmp-row > th:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.02) 42%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

.compare--light .cmp-row th b,
.compare--light .cmp-row th strong,
.compare--light .cmp-row > th { color: var(--c-platinum, #fafbf8); }
.compare--light .cmp-row th span { color: rgba(250, 251, 248, 0.7); }

/* La fila propia: cristal teñido de verde, no un bloque plano */
.compare--light tr.cmp-row--mine {
  background:
    linear-gradient(158deg, rgba(169, 220, 92, 0.24) 0%, rgba(156, 176, 1, 0.12) 48%, rgba(220, 220, 98, 0.16) 100%);
  box-shadow:
    inset 0 1px 0 rgba(220, 220, 98, 0.40),
    inset 0 0 0 1px rgba(220, 220, 98, 0.30),
    0 18px 48px rgba(0, 2, 0, 0.46);
}

.compare--light .cmp-row--mine > th { color: #fafbf8; }

/* ---------- Marcas iluminadas (se conservan) ---------- */
.compare--light .cmp-mark {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  margin-inline: auto;
  display: grid;
  place-items: center;
}

.compare--light .cmp-mark svg { position: relative; z-index: 1; width: 20px; height: 20px; }

.compare--light .cmp-mark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 116px;
  height: 66px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}

.compare--light .cmp-mark--yes { color: var(--c-litoria-hi, #a9dc5c); }
.compare--light .cmp-mark--yes::before {
  background: radial-gradient(closest-side, rgba(169, 220, 92, 0.36) 0%, rgba(156, 176, 1, 0.15) 48%, rgba(156, 176, 1, 0) 100%);
}
.compare--light .cmp-mark--yes svg {
  filter: drop-shadow(0 0 7px rgba(169, 220, 92, 0.95)) drop-shadow(0 0 16px rgba(156, 176, 1, 0.6));
}

.compare--light .cmp-row--mine .cmp-mark--yes { color: var(--c-chartreuse, #dcdc62); }
.compare--light .cmp-row--mine .cmp-mark--yes svg {
  filter: drop-shadow(0 0 7px rgba(220, 220, 98, 0.95)) drop-shadow(0 0 17px rgba(220, 220, 98, 0.55));
}
.compare--light .cmp-row--mine .cmp-mark--yes::before {
  background: radial-gradient(closest-side, rgba(220, 220, 98, 0.36) 0%, rgba(220, 220, 98, 0) 100%);
}

.compare--light .cmp-mark--no { color: #ff6b5e; opacity: 1; }
.compare--light .cmp-mark--no::before {
  background: radial-gradient(closest-side, rgba(255, 92, 76, 0.32) 0%, rgba(214, 52, 38, 0.14) 48%, rgba(214, 52, 38, 0) 100%);
}
.compare--light .cmp-mark--no svg {
  filter: drop-shadow(0 0 7px rgba(255, 107, 94, 0.9)) drop-shadow(0 0 16px rgba(214, 52, 38, 0.5));
}

/* ---------- Móvil: mismas tarjetas, apiladas ---------- */
@media (max-width: 899px) {
  .compare--light .cmp-scroll { overflow-x: visible; }
  .compare--light .cmp-table { min-width: 0 !important; border-spacing: 0; }
  .compare--light .cmp-table colgroup,
  .compare--light .cmp-table thead { display: none; }

  .compare--light .cmp-table,
  .compare--light .cmp-table tbody,
  .compare--light .cmp-table th,
  .compare--light .cmp-table td { display: block; width: auto; min-width: 0; }

  .compare--light .cmp-table tr.cmp-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 1.25rem 1.125rem 1.375rem;
    margin-bottom: 1rem;
    border-radius: 20px;
    background: linear-gradient(158deg, rgba(250, 251, 248, 0.085) 0%, rgba(250, 251, 248, 0.028) 46%, rgba(250, 251, 248, 0.05) 100%);
    backdrop-filter: blur(13px) saturate(1.25);
    -webkit-backdrop-filter: blur(13px) saturate(1.25);
    border: 1px solid rgba(250, 251, 248, 0.14);
    box-shadow: inset 0 1px 0 rgba(250, 251, 248, 0.18), 0 16px 40px rgba(0, 2, 0, 0.4);
  }

  .compare--light .cmp-table tr.cmp-row--mine {
    background: linear-gradient(158deg, rgba(169, 220, 92, 0.20) 0%, rgba(156, 176, 1, 0.10) 48%, rgba(220, 220, 98, 0.13) 100%);
    border-color: rgba(220, 220, 98, 0.42);
    box-shadow: inset 0 1px 0 rgba(220, 220, 98, 0.32), 0 16px 40px rgba(0, 2, 0, 0.4);
  }

  .compare--light .cmp-row > th,
  .compare--light .cmp-row > td {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }

  .compare--light .cmp-row > th::before { display: none; }

  .compare--light .cmp-row > th {
    grid-column: 1 / -1;
    padding: 0 0 1rem;
  }

  .compare--light .cmp-row > td {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: 12px;
    background: rgba(0, 2, 0, 0.22);
    border: 1px solid rgba(250, 251, 248, 0.07);
  }

  .compare--light .cmp-row > td::before {
    content: attr(data-col);
    font-family: var(--f-ui);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(250, 251, 248, 0.62);
    line-height: 1.2;
  }

  .compare--light .cmp-mark { width: 28px; height: 28px; }
  .compare--light .cmp-mark::before { width: 66px; height: 46px; }
  .compare--light .cmp-mark svg { width: 17px; height: 17px; }
}

@media (max-width: 559px) {
  .compare--light .cmp-table tr.cmp-row { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   08 · HERO — costura con la banda siguiente + eco-map móvil

   El hero pintaba su propio degradado y la banda siguiente el suyo:
   donde se encontraban quedaba un canto visible. Ahora el degradado
   vive en un envoltorio que abarca las dos y cada sección va
   transparente encima, así no hay dos rampas que empalmar.
   ============================================================ */
.bj-topfield {
  position: relative;
  isolation: isolate;
  /* Un unico campo verde que baja del hero al final de "Sound familiar?".
     Los tonos son los originales: el hero arrancaba en #333c07 y moria en
     #171c02; la banda siguiente iba de #1b2003 a #0f1201. Aqui se encadenan
     en UNA sola rampa, sin el empalme donde antes se veia el canto. */
  background:
    /* foco calido alto, del hero */
    radial-gradient(1180px 680px at 58% 16%, rgba(156, 176, 1, 0.22) 0%, rgba(156, 176, 1, 0.09) 42%, rgba(0, 0, 0, 0) 72%),
    /* lavado chartreuse bajo-izquierda, del hero */
    radial-gradient(900px 620px at 18% 42%, rgba(220, 220, 98, 0.10) 0%, rgba(0, 0, 0, 0) 64%),
    /* halo central que tenia la banda de problemas */
    radial-gradient(900px 620px at 50% 76%, rgba(156, 176, 1, 0.13) 0%, rgba(0, 0, 0, 0) 66%),
    /* la rampa continua: verde musgo arriba, casi negro abajo */
    linear-gradient(180deg,
      #333c07 0%,
      #2b3305 14%,
      #262e04 27%,
      #1f2603 40%,
      #1b2003 52%,
      #171c02 64%,
      #141801 78%,
      #111501 90%,
      #0f1201 100%);
}

/* Las dos secciones dejan de pintar fondo: el campo es del envoltorio.
   Se sube la especificidad porque theme.css y luxe.css declaran `.hero`
   con su propio degradado y cargan despues de sections.css. */
.bj-topfield > .hero,
.bj-topfield > .problems,
.bj-topfield > section {
  background: transparent !important;
  background-color: transparent !important;
  position: relative;
  z-index: 1;
}

/* La atmosfera del hero (aurora ::before + vinneta ::after) se cortaba en
   seco en el borde inferior de la seccion: ESE era el canto que se veia,
   no el degradado. Aqui se funde a nada antes de llegar al limite, asi que
   el campo continua sin escalon y la deriva sigue viva. */
.bj-topfield > .hero::before,
.bj-topfield > .hero::after {
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,0) 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,0) 96%);
}

/* La banda siguiente traia SU propia aurora y vinneta, arrancando a plena
   intensidad justo en su borde superior. Con el hero desvaneciendose y esta
   entrando de golpe, el canto seguia ahi. Se funde tambien desde arriba. */
.bj-topfield > .problems::before,
.bj-topfield > .problems::after {
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 34%, #000 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 34%, #000 100%);
}

/* overflow:hidden en las secciones recortaba el campo y marcaba el canto */
.bj-topfield > .hero,
.bj-topfield > .problems { overflow: visible; }
.bj-topfield { overflow: clip; }

/* ---------- Eco-map móvil ---------- */
@media (max-width: 899px) {
  /* Aire real entre el poster y el mapa: sin él la línea se cruzaba con
     el H1 y los nodos no tenían sitio */
  .hero .eco-map {
    position: relative;
    margin-top: clamp(3.5rem, 14vw, 6rem);
    padding-left: 0;
    /* La caja DEBE guardar la proporcion del viewBox (360x760). Si es mas
       ancha, `meet` ajusta por altura y deja bandas laterales: el trazo
       nunca llegaria a los bordes, que es justo lo que pide la referencia. */
    aspect-ratio: 360 / 760;
    min-height: 0;
    width: 100%;
  }

  .eco-mob-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .eco-mob-casing { stroke: rgba(156, 176, 1, 0.18); stroke-width: 7; stroke-linecap: round; }

  .eco-mob-curve {
    stroke: var(--c-litoria-hi, #a9dc5c);
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: calc(1 - var(--grow, 0));
    filter: drop-shadow(0 0 8px rgba(169, 220, 92, 0.6));
    transition: stroke-dashoffset 700ms var(--ease-out);
  }

  .eco-mob-halo {
    fill: rgba(220, 220, 98, 0);
    transition: fill 420ms ease;
  }
  .eco-mob-halo.is-on { fill: rgba(220, 220, 98, 0.20); }

  .eco-mob-dot {
    fill: #0f1201;
    stroke: rgba(156, 176, 1, 0.45);
    stroke-width: 3;
    transition: fill 400ms ease, stroke 400ms ease;
  }

  .eco-mob-dot.is-on {
    fill: var(--c-litoria-hi, #a9dc5c);
    stroke: var(--c-chartreuse, #dcdc62);
    filter: drop-shadow(0 0 12px rgba(169, 220, 92, 0.9));
  }

  /* Las etiquetas se colocan junto a su nodo, alternando lado, como en
     la referencia. Los dos últimos van a la izquierda porque a la
     derecha ya no cabe texto sin desbordar el viewport. */
  .hero .eco-map .eco-list {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: inherit;
  }

  .hero .eco-map .eco-list > li {
    position: absolute;
    margin: 0;
    max-width: 46%;
  }

  .hero .eco-map .eco-list > li:nth-child(1) { top: 12.0%; left: 26%; text-align: left; }
  .hero .eco-map .eco-list > li:nth-child(2) { top: 35.5%; left: 42%; text-align: left; }
  .hero .eco-map .eco-list > li:nth-child(3) { top: 60.5%; right: 40%; text-align: right; }
  .hero .eco-map .eco-list > li:nth-child(4) { top: 84.0%; right: 22%; text-align: right; }

  .hero .eco-map .eco-list > li b {
    display: block;
    font-family: var(--f-ui);
    font-size: clamp(0.6875rem, 3vw, 0.8125rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.2;
  }

  .hero .eco-map .eco-list > li span {
    display: block;
    margin-top: 0.1875rem;
    font-size: clamp(0.625rem, 2.7vw, 0.75rem);
    line-height: 1.3;
  }

  /* La línea de satélites no cabe flotando: se ancla al pie del mapa */
  .hero .eco-map .eco-sats {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.75rem);
    text-align: center;
    max-width: none;
    font-size: 0.625rem;
    letter-spacing: 0.06em;
  }

  .hero .eco-sats-caption { display: none; }
}

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

/* ============================================================
   09 · QUALIFIER — chips con el gradiente de los CTA

   El verde plano dejaba el icono en negro sobre verde medio: el
   contraste caía. Con el gradiente de CTA y el icono en ink, el par
   texto/icono se resuelve sobre los dos extremos de la rampa.
   ============================================================ */
.hero .qualifier-chip[aria-pressed="true"],
.qualifier-chip[aria-pressed="true"] {
  position: relative;
  background: var(--grad-cta, linear-gradient(135deg, #dcdc62 0%, #bcd94b 46%, #7fc24a 100%));
  border-color: transparent;
  color: #000200;
  box-shadow: var(--glow-cta, 0 0 0 1px rgba(220, 220, 98, 0.35), 0 8px 26px rgba(156, 176, 1, 0.34));
  overflow: hidden;
}

/* Barniz: luz arriba-izquierda que muere antes del centro */
.hero .qualifier-chip[aria-pressed="true"]::after,
.qualifier-chip[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(150deg,
      rgba(255, 255, 255, 0.42) 0%,
      rgba(255, 255, 255, 0.14) 26%,
      rgba(255, 255, 255, 0) 54%),
    linear-gradient(0deg, rgba(0, 2, 0, 0.10) 0%, rgba(0, 2, 0, 0) 42%);
  border-radius: inherit;
}

.hero .qualifier-chip[aria-pressed="true"] > *,
.qualifier-chip[aria-pressed="true"] > * { position: relative; z-index: 1; }

.hero .qualifier-chip[aria-pressed="true"] .chip-icon,
.qualifier-chip[aria-pressed="true"] .chip-icon {
  color: #000200;
  opacity: 0.92;
  stroke-width: 2.2;
}

.hero .qualifier-chip[aria-pressed="true"] span,
.qualifier-chip[aria-pressed="true"] span { font-weight: 600; }

/* ============================================================
   10 · TORNADO EN TÁCTIL — se recupera la hélice
   Anula el bloque que lo aplanaba a lista vertical en ≤899px.
   ============================================================ */
@media (max-width: 899px) {
  .tornado.is-live,
  .tornado.is-live .tornado-stage {
    position: relative !important;
    perspective: 1400px;
    transform-style: preserve-3d !important;
  }

  .tornado.is-live {
    display: block;
    /* el arrastre gira en X; el scroll vertical sigue siendo del navegador */
    touch-action: pan-y;
    overflow: hidden;
  }

  .tornado.is-live .tornado-stage {
    height: clamp(420px, 96vw, 560px) !important;
    transform-style: preserve-3d !important;
  }

  /* En tactil no hay hover que destaque una tarjeta: si van
     translucidas, doce superpuestas son ilegibles — el motivo por el que
     en su dia se retiro la helice. Aqui van OPACAS y la profundidad la
     da el JS con opacidad y escala, no la transparencia del cristal. */
  .tornado.is-touch .tornado-card {
    position: absolute !important;
    width: min(58vw, 240px) !important;
    height: auto !important;
    padding: 0.8125rem 0.9375rem;
    background-color: #141901 !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: rgba(169, 220, 92, 0.34) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6) !important;
  }

  .tornado.is-live .tornado-card {
    position: absolute !important;
    width: min(58vw, 240px) !important;
    height: auto !important;
    padding: 0.8125rem 0.9375rem;
  }

  .tornado.is-live .tornado-quote { font-size: 0.875rem; line-height: 1.3; }
  .tornado.is-live .tornado-fix { margin-top: 0.5rem; padding-top: 0.5rem; font-size: 0.75rem; }
  .tornado.is-live .tornado-hint { display: block; }
}

/* ============================================================
   11 · RITMO MÓVIL — los espacios deben sentirse amplios

   El ritmo vertical estaba comprimido: las bandas respiraban en
   escritorio y se apelmazaban en móvil. Se sube el ritmo de banda y
   se abre el interior de los bloques densos (plataforma y marketing).
   ============================================================ */
@media (max-width: 899px) {
  :root {
    --space-band-lg: clamp(5rem, 16vw, 7.5rem);
    --space-band: clamp(4rem, 13vw, 6rem);
    --space-band-sm: clamp(3rem, 10vw, 4.5rem);
  }

  .band { padding-block: var(--space-band); }
  .band-lg { padding-block: var(--space-band-lg); }

  .section-head { margin-bottom: clamp(1.75rem, 6vw, 2.5rem); }
  .section-head h2 { margin-top: 0.75rem; }
  .section-head .section-sub { margin-top: 1rem; line-height: 1.6; }

  /* ---------- Plataforma / BrandJungle System ---------- */
  #platform .pf-banner,
  #plataforma .pf-banner {
    margin-top: clamp(2.5rem, 9vw, 3.5rem);
    border-radius: 20px;
  }

  #platform .pf-chrome,
  #plataforma .pf-chrome { padding: 0.875rem 1.125rem; }

  #platform .pf-body,
  #plataforma .pf-body { padding: clamp(1.125rem, 4.5vw, 1.75rem); }

  /* El rotulo "BrandJungle System" quedaba cortado por el canto del
     chrome: le faltaba aire arriba dentro del cuerpo con scroll. */
  #platform .pf-nav,
  #plataforma .pf-nav {
    padding-top: clamp(0.75rem, 3vw, 1.25rem);
    margin-bottom: clamp(1.25rem, 5vw, 1.875rem);
  }

  #platform .pf-brand,
  #plataforma .pf-brand { margin-bottom: clamp(1rem, 4vw, 1.5rem); line-height: 1.35; }
  #platform .pf-brand span,
  #plataforma .pf-brand span { margin-top: 0.375rem; display: block; }

  #platform .pf-tabs,
  #plataforma .pf-tabs { gap: 0.5rem; }

  #platform .pf-tab,
  #plataforma .pf-tab { padding: 0.625rem 0.875rem; }

  #platform .pf-panel,
  #plataforma .pf-panel { padding-top: clamp(1.25rem, 5vw, 1.875rem); }

  #platform .pf-stats,
  #plataforma .pf-stats {
    gap: clamp(0.75rem, 3.5vw, 1.125rem);
    margin-bottom: clamp(1.5rem, 6vw, 2.25rem);
  }

  #platform .pf-stat,
  #plataforma .pf-stat { padding: clamp(1.125rem, 4.5vw, 1.5rem); }

  #platform .pf-chart,
  #plataforma .pf-chart {
    padding: clamp(1.125rem, 4.5vw, 1.625rem);
    margin-bottom: clamp(1.25rem, 5vw, 1.75rem);
  }

  #platform .pf-chart-label,
  #plataforma .pf-chart-label { margin-bottom: clamp(1rem, 4vw, 1.5rem); }

  #platform .pf-panel-foot,
  #plataforma .pf-panel-foot { margin-top: clamp(1.25rem, 5vw, 1.75rem); }

  #platform .pf-mods,
  #plataforma .pf-mods { gap: clamp(0.875rem, 3.5vw, 1.25rem); }

  #platform .pf-mod,
  #plataforma .pf-mod { padding: clamp(1.125rem, 4.5vw, 1.5rem); }

  /* ---------- Marketing ---------- */
  #marketing .marketing-copy h2 { margin-top: 1rem; }
  #marketing .marketing-points { margin-top: clamp(2rem, 7vw, 2.75rem); gap: clamp(1.5rem, 5vw, 2rem); }
  #marketing .marketing-points li { padding-left: 1.125rem; }
  #marketing .marketing-points b { font-size: 1rem; }
  #marketing .marketing-points span { margin-top: 0.5rem; line-height: 1.55; }
  #marketing .marketing-copy .link-cta { margin-top: clamp(2rem, 7vw, 2.75rem); }
  #marketing .mkt-media { margin-top: clamp(2.5rem, 9vw, 3.5rem); aspect-ratio: 4 / 3; }
  #marketing .mkt-steps { margin-top: clamp(1.75rem, 6vw, 2.5rem); line-height: 1.6; }
}

/* ============================================================
   12 · SIN SCROLL HORIZONTAL EN NINGÚN BREAKPOINT

   Regla de contención, no parche: nada puede medir más que el
   viewport. Se corrigen los tres orígenes reales encontrados —
   la hélice del tornado (ya escalada en JS), la tabla comparativa
   (min-width: 720px) y el grafo del glosario (tags que se salían
   por la izquierda) — y se cierra con una guardia global.
   ============================================================ */
html, body { overflow-x: clip; }

@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

body { max-width: 100%; }

/* Ningún medio puede pasarse de su caja */
img, svg, video, canvas, iframe, table { max-width: 100%; }

@media (max-width: 899px) {
  /* La tabla ya no fuerza 720px: en móvil es una pila de tarjetas */
  .cmp-table { min-width: 0 !important; }
  .cmp-scroll { overflow-x: visible; }

  /* El grafo se quedaba anclado a un ancho de escritorio */
  .gr-wrap,
  .gr-col,
  .gr-core { max-width: 100%; min-width: 0; }
  .gr-item { max-width: 100%; }
  .gr-item span { max-width: 100%; word-break: break-word; }

  /* El mapa del hero salía por ambos lados */
  .hero .eco-map { max-width: 100%; overflow: visible; }
  .hero, .hero-inner { max-width: 100%; }

  /* Las pistas del showcase van contenidas por su viewport */
  .sc-viewport, .sc-cols, .showcase { max-width: 100%; }

  /* El globo nunca excede el carril */
  .ecosystem .globe-stage, .ecosystem .globe-wrap { max-width: 100%; }

  /* Contenedores genéricos */
  .container { max-width: 100%; }
}

/* El tornado se recorta a su sección: las tarjetas del fondo de la
   hélice giran más allá del borde por diseño y no deben crear scroll */
.tornado { overflow: hidden; }
.problems { overflow-x: clip; }

/* ============================================================
   13 · HERO MOVIL — remate del eco-map

   Tres defectos vistos al renderizar: la regla vertical del listado
   antiguo seguia dibujandose junto al trazo nuevo, los captions caian
   por debajo del umbral de lectura sobre el fondo oscuro, y la linea
   de satelites flotaba encima del contador 01/04.
   ============================================================ */
@media (max-width: 899px) {
  /* La barra vertical y los puntos del listado antiguo sobran: el
     trazo nuevo ya lleva sus propios nodos. */
  .hero .eco-map .eco-list::before,
  .hero .eco-map .eco-list li::before { display: none !important; content: none !important; }

  .hero .eco-map .eco-list > li b {
    color: var(--c-platinum, #fafbf8);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 0 22px rgba(0, 0, 0, 0.7);
  }

  /* Los captions iban a 0.42 de opacidad sobre fondo casi negro */
  .hero .eco-map .eco-list > li span {
    color: rgba(250, 251, 248, 0.82);
    opacity: 1 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.92);
  }

  /* La linea de satelites se ancla al pie y solo aparece en su etapa,
     en vez de flotar sobre el contador */
  .hero .eco-map .eco-list li .eco-sats { display: none !important; }
  .hero .eco-map[data-active="chaos"] .eco-list li .eco-sats {
    display: block !important;
    position: static;
    margin-top: 0.5rem;
    font-size: 0.5625rem;
    letter-spacing: 0.05em;
    line-height: 1.35;
    color: rgba(250, 251, 248, 0.66);
  }
}

/* ============================================================
   14 · FOTOGRAFÍA REAL EN LOS SLOTS (v3.6c)
   Las imágenes sustituyen a los huecos declarados. object-fit y
   aspect-ratio explícitos en cada contexto flex/grid, como manda
   la regla de assets del proyecto.
   ============================================================ */
.slot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.trio-media {
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  aspect-ratio: 3 / 4;
  background: #0f1201;
}

#marketing .mkt-media,
#growth .growth-media,
#ciclo .growth-media {
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--sf-hair, rgba(169, 220, 92, 0.18));
  background: #0f1201;
  display: block;
}

#marketing .mkt-media { aspect-ratio: 4 / 3; }
#growth .growth-media,
#ciclo .growth-media { aspect-ratio: 3 / 4; }

/* El texto del hueco desaparece cuando hay imagen */
.trio-media .trio-slot,
.mkt-media .trio-slot,
.growth-media .trio-slot { display: none; }

/* ============================================================
   15 · GLOSARIO v3.6c — la línea toca el tag, el tag se enciende

   La luz ya no atraviesa la píldora translúcida: el trazo muere en su
   canto y el protagonismo pasa al tag, que enciende en neón fuerte.
   ============================================================ */
.gr-item span {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: color 260ms ease, border-color 260ms ease,
              background-color 260ms ease, box-shadow 320ms ease, transform 260ms ease;
}

.gr-item--out span { background-color: transparent; }

/* Encendido: el tag es la fuente de luz */
.gr-item.is-on span {
  color: #0b0e01;
  border-color: var(--c-chartreuse, #dcdc62);
  background-color: var(--c-litoria-hi, #a9dc5c);
  transform: translateZ(0) scale(1.04);
  box-shadow:
    0 0 0 1px rgba(220, 220, 98, 0.9),
    0 0 14px rgba(169, 220, 92, 0.85),
    0 0 34px rgba(156, 176, 1, 0.6),
    0 0 60px rgba(156, 176, 1, 0.32);
}

.gr-item.is-on span,
.gr-item.is-on b { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .gr-item.is-on span { transform: none; }
}

/* ============================================================
   16 · WHY US v3.6c — banda clara, contraste verificado

   Vuelve a fondo claro. El neón no sobrevive sobre crema, así que las
   marcas cambian de estrategia: en vez de halo, peso y color propio
   con relleno suave. Todos los pares texto/fondo de esta sección se
   comprobaron con cálculo de contraste, no a ojo.
   ============================================================ */
.compare--light {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--c-ink, #000200);
  background:
    radial-gradient(120% 68% at 50% 0%, rgba(220, 220, 98, 0.16) 0%, rgba(220, 220, 98, 0) 60%),
    linear-gradient(180deg, #fafbf8 0%, #f4f7ec 52%, #eff4e4 100%);
}

.compare--light > .container { position: relative; z-index: 2; }
.compare--light .section-head h2 { color: var(--c-ink, #000200); }
.compare--light .section-sub { color: #4a5230; }
.compare--light .eyebrow { color: #55620a; }
.compare--light .cmp-table thead th { color: #24290c; }

/* Tarjetas: cristal claro sobre la banda */
.compare--light tr.cmp-row {
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.66) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(40, 46, 2, 0.10),
    0 10px 26px rgba(40, 46, 2, 0.09);
}

.compare--light tr.cmp-row--mine {
  background: linear-gradient(158deg, rgba(220, 220, 98, 0.34) 0%, rgba(169, 220, 92, 0.20) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(120, 140, 10, 0.34),
    0 12px 30px rgba(90, 105, 8, 0.14);
}

.compare--light .cmp-row > th { color: var(--c-ink, #000200); }
.compare--light .cmp-row th span { color: #4a5230; }

/* ---------- Marcas: sin halo, con cuerpo ---------- */
.compare--light .cmp-mark::before {
  width: 34px;
  height: 34px;
  border-radius: 11px;
}

.compare--light .cmp-mark--yes { color: #2f5406; }          /* 7.9:1 sobre el relleno */
.compare--light .cmp-mark--yes::before { background: rgba(156, 176, 1, 0.24); }
.compare--light .cmp-mark--yes svg { filter: none; stroke-width: 2.8; }

.compare--light .cmp-row--mine .cmp-mark--yes { color: #263f05; }
.compare--light .cmp-row--mine .cmp-mark--yes::before { background: rgba(255, 255, 255, 0.66); }

.compare--light .cmp-mark--no { color: #9e2114; }           /* 7.4:1 sobre el relleno */
.compare--light .cmp-mark--no::before { background: rgba(214, 52, 38, 0.13); }
.compare--light .cmp-mark--no svg { filter: none; stroke-width: 2.6; }

@media (max-width: 899px) {
  .compare--light .cmp-table tr.cmp-row {
    background: linear-gradient(158deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.7) 100%);
    border: 1px solid rgba(40, 46, 2, 0.10);
    box-shadow: 0 10px 26px rgba(40, 46, 2, 0.09);
  }
  .compare--light .cmp-table tr.cmp-row--mine {
    background: linear-gradient(158deg, rgba(220, 220, 98, 0.34) 0%, rgba(169, 220, 92, 0.20) 100%);
    border-color: rgba(120, 140, 10, 0.34);
  }
  .compare--light .cmp-row > td {
    background: rgba(40, 46, 2, 0.045);
    border: 1px solid rgba(40, 46, 2, 0.07);
  }
  .compare--light .cmp-row > td::before { color: #4a5230; }
}

/* ============================================================
   17 · FAQ — control de despliegue (v3.6c #31)
   ============================================================ */
.faq-more { display: flex; justify-content: center; margin-top: clamp(1.5rem, 4vw, 2.25rem); }

.faq-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.8125rem 1.5rem;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid rgba(169, 220, 92, 0.42);
  background: rgba(169, 220, 92, 0.08);
  color: var(--c-litoria-hi, #a9dc5c);
  font-family: var(--f-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.faq-more-btn:hover,
.faq-more-btn:focus-visible {
  background: rgba(169, 220, 92, 0.16);
  border-color: var(--c-chartreuse, #dcdc62);
  transform: translateY(-1px);
}

.faq-more-ico {
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 0.75rem;
  line-height: 1;
  transition: transform 260ms var(--ease-out);
}

.faq-more-btn[aria-expanded="true"] .faq-ico,
.faq-more-btn[aria-expanded="true"] .faq-more-ico { transform: rotate(45deg); }

.faq-item[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .faq-more-btn:hover { transform: none; }
  .faq-more-ico { transition: none; }
}

/* ============================================================
   18 · v3.6d — HOVER EN LA FOTOGRAFÍA (#42)
   Zoom contenido dentro del marco: la imagen crece, la tarjeta no
   se mueve. Solo donde hay puntero, para no dejar estados pegados
   tras un toque en táctil.
   ============================================================ */
.trio-media,
#marketing .mkt-media,
#growth .growth-media,
#ciclo .growth-media { overflow: hidden; }

.trio-media .slot-img,
.mkt-media .slot-img,
.growth-media .slot-img {
  transition: transform 620ms var(--ease-out, cubic-bezier(.22,.61,.36,1)),
              filter 620ms ease;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .trio-card:hover .slot-img,
  .trio-media:hover .slot-img,
  #marketing .mkt-media:hover .slot-img,
  #growth .growth-media:hover .slot-img { transform: scale(1.06); filter: saturate(1.08); }

  .trio-card { transition: transform 420ms var(--ease-out), box-shadow 420ms ease; }
  .trio-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(0, 2, 0, 0.28); }
}

@media (prefers-reduced-motion: reduce) {
  .trio-media .slot-img, .mkt-media .slot-img, .growth-media .slot-img,
  .trio-card { transition: none !important; transform: none !important; }
}

/* ============================================================
   19 · v3.6d — WHY US: títulos oscuros + fila propia sólida (#43)

   El pase anterior cubrió el color del <th> pero no el del <b> que
   lleva dentro: los cinco títulos se quedaron en blanco sobre
   tarjeta clara. Aquí se cubre el árbol entero.
   ============================================================ */
.compare--light .cmp-row > th,
.compare--light .cmp-row > th b,
.compare--light .cmp-row > th strong,
.compare--light .cmp-row th > b { color: #14180a !important; }

.compare--light .cmp-row > th span,
.compare--light .cmp-row th > span { color: #46502c !important; }

/* La fila de Brand Jungle: gradiente del logo, 100% opaco, con halo */
.compare--light tr.cmp-row--mine {
  position: relative;
  background: linear-gradient(135deg, #dcdc62 0%, #cbdc55 38%, #a9dc5c 72%, #8ec947 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(90, 110, 6, 0.5),
    0 0 0 4px rgba(169, 220, 92, 0.22),
    0 14px 40px rgba(120, 150, 12, 0.42),
    0 4px 14px rgba(90, 110, 6, 0.22) !important;
}

/* Sobre el gradiente saturado el texto se recalcula aparte */
.compare--light tr.cmp-row--mine > th,
.compare--light tr.cmp-row--mine > th b { color: #101403 !important; }
.compare--light tr.cmp-row--mine > th span { color: #2e3a06 !important; }

.compare--light tr.cmp-row--mine .cmp-mark--yes { color: #14210a !important; }
.compare--light tr.cmp-row--mine .cmp-mark--yes::before { background: rgba(255, 255, 255, 0.42) !important; }
.compare--light tr.cmp-row--mine .cmp-mark--no { color: #7d1a10 !important; }
.compare--light tr.cmp-row--mine .cmp-mark--no::before { background: rgba(255, 255, 255, 0.36) !important; }

@media (max-width: 899px) {
  .compare--light .cmp-table tr.cmp-row--mine {
    background: linear-gradient(135deg, #dcdc62 0%, #cbdc55 38%, #a9dc5c 72%, #8ec947 100%) !important;
    border-color: rgba(90, 110, 6, 0.5);
  }
  .compare--light tr.cmp-row--mine > td { background: rgba(255, 255, 255, 0.34); border-color: rgba(90,110,6,.2); }
  .compare--light tr.cmp-row--mine > td::before { color: #2e3a06; }
}

/* ============================================================
   20 · v3.6d — COSTURA CITA ↔ SELECTED WORK (#44)

   El envoltorio de la ronda anterior no bastó: el canto no lo pinta
   el degradado sino la aurora y el velo de lectura de cada sección,
   que se cortan en seco en sus bordes. Mismo remedio que en el hero:
   fundirlos con máscara.
   ============================================================ */
.bj-midfield {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, #12160a 0%, #10140a 34%, #0e1206 62%, #0d1005 100%);
}

.bj-midfield > .proof,
.bj-midfield > .showcase {
  background: transparent !important;
  background-color: transparent !important;
  position: relative;
  z-index: 1;
  overflow: visible;
}

/* La aurora de la cita se apaga antes del borde inferior */
/* OJO con los porcentajes: la aurora lleva inset:-25%, asi que su caja
   mide 150% de la seccion y sobresale un 25% por arriba y por abajo. El
   borde inferior de la seccion cae al 83.3% de esa caja, no al 100%. Con
   la mascara puesta sobre 0-100% el desvanecido ocurria fuera de vista y
   el canto seguia ahi. */
.bj-midfield > .proof::before,
.bj-midfield > .proof::after {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,0) 80%);
  mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,0) 80%);
}

/* La de Selected work entra progresivamente desde arriba */
/* Igual por arriba: el borde superior de la seccion esta al 16.7% de la
   caja del pseudo, asi que el fundido tiene que empezar ahi. */
.bj-midfield > .showcase::before,
.bj-midfield > .showcase::after {
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 17%, #000 42%, #000 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 17%, #000 42%, #000 100%);
}

.bj-midfield { overflow: clip; }

/* ============================================================
   21 · v3.6e — CORRECCIONES DE MÓVIL (#71 · #72 · #73 · #74)
   ============================================================ */

/* ---- #71: el recorrido del hero cabe en la primera pantalla ----
   La #19 fijó el aspect-ratio a 360/760, que a 390px son 823px de alto:
   la animación arrancaba pasada la primera pantalla. Con 360/600 y los
   segmentos acortados, los cuatro nodos entran de una. */
@media (max-width: 899px) {
  .hero .eco-map {
    aspect-ratio: 360 / 600;
    margin-top: clamp(1.75rem, 7vw, 3rem);
  }
  .hero .eco-map .eco-list > li:nth-child(1) { top: 11.0%; left: 24%; }
  .hero .eco-map .eco-list > li:nth-child(2) { top: 32.5%; left: 40%; }
  .hero .eco-map .eco-list > li:nth-child(3) { top: 50.0%; right: 40%; }
  .hero .eco-map .eco-list > li:nth-child(4) { top: 72.0%; right: 24%; }
}

/* ---- #72: el icono del chip en hover ----
   sections.css agrupa hover y seleccionado en el mismo selector y les da
   ink a los dos. En seleccionado es correcto (el chip es claro), pero en
   hover el chip sigue oscuro y el icono desaparecía. */
.hero .qualifier-chip:hover .chip-icon { color: #fafbf8 !important; }
.hero .qualifier-chip[aria-pressed="true"] .chip-icon,
.hero .qualifier-chip[aria-pressed="true"]:hover .chip-icon { color: #000200 !important; }

/* ---- #73: tornado legible en las dos versiones ----
   Doce tarjetas translúcidas superpuestas no se leen. La de delante pasa
   a ser opaca y el resto queda como atmósfera. Las citas dejan la serif
   por la sans del sistema. */
.tornado-quote,
.tornado-fix { font-family: var(--f-ui, 'Space Grotesk', system-ui, sans-serif) !important; }

.tornado-quote { font-style: normal !important; }

.tornado.is-live .tornado-card {
  background-color: rgba(16, 20, 2, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: background-color 320ms ease, border-color 320ms ease,
              box-shadow 320ms ease, opacity 320ms ease;
}

/* La tarjeta al frente: opaca, con borde propio y por encima de todas */
.tornado.is-live .tornado-card.is-front {
  background-color: #141901 !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgba(220, 220, 98, 0.55) !important;
  box-shadow: 0 20px 54px rgba(0, 2, 0, 0.7), 0 0 0 1px rgba(220, 220, 98, 0.22) !important;
  opacity: 1 !important;
}

.tornado.is-live .tornado-card.is-front .tornado-quote { color: #fafbf8; }
.tornado.is-live .tornado-card.is-front .tornado-fix { color: var(--c-litoria-hi, #a9dc5c); }

/* ---- #74: glosario móvil ----
   Las líneas de la #27 se corrigieron solo en la rama de escritorio del
   generador; la rama móvil seguía atravesando los tags. La geometría se
   arregla en round36.js. Aquí van el centrado del logo y el rótulo. */
@media (max-width: 899px) {
  .gr-core {
    display: grid;
    place-items: center;
    position: relative;
    min-height: clamp(150px, 42vw, 200px);
  }
  .gr-logo {
    position: relative;
    z-index: 2;
    margin: 0;
    place-self: center;
  }
  .gr-hexcard {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  /* "What it means" baja por debajo del hexágono */
  .gr-col--out .gr-head {
    margin-top: clamp(1.25rem, 5vw, 2rem);
    order: -1;
  }
  .gr-col--out { padding-top: 0.5rem; }
}