/* ============================================================
   BRAND JUNGLE — RONDA 41

   Última capa de la cascada: va después de round40-sections.css.
   Sólo lo que cambia en esta ronda; lo que ya estaba correcto en
   round40 no se repite aquí.

   01 · Hero — los nodos del mapa vuelven a ser clicables        (#5)
   02 · Hero — mapa en móvil y táblet: arco suave                (#9)
   03 · Plataforma — el dashboard dentro de una laptop           (#6)
   04 · Plataforma — los 10 módulos en carrusel horizontal       (#7)
   05 · Sound familiar? — el tornado desborda a los lados        (#10)
   06 · Plain talk — aire, etiquetas verdes y logo mayor         (#11)
   07 · La cita — fondo negro y corte limpio                     (#12)
   08 · Comparativa — tabla transpuesta bajo 1024px              (#13)
   ============================================================ */


/* ------------------------------------------------------------
   01 · HERO — LOS NODOS DEL MAPA SON CLICABLES            (#5)

   El handler existía desde round40 (main.js), pero .eco-list se
   monta encima del SVG a pantalla completa y se comía el clic:
   elementFromPoint sobre el centro del nodo devolvía el OL.
   La lista deja pasar el puntero y sólo sus <li> lo recogen.
------------------------------------------------------------ */
.hero .eco-map .eco-list { pointer-events: none; }
.hero .eco-map .eco-list > li { pointer-events: auto; }
.hero .eco-map .eco-map-svg { pointer-events: auto; }
.hero .eco-node { cursor: pointer; }


/* ------------------------------------------------------------
   02 · HERO — MAPA EN MÓVIL Y TÁBLET                      (#9)

   Los puntos nuevos viven en round40.js (LAYOUTS). Aquí va la
   caja, la tipografía de las etiquetas y los satélites, que
   antes estaban apagados fuera de escritorio.
------------------------------------------------------------ */
@media (max-width: 1023px) {
  /* Los satélites estaban apagados fuera de escritorio por partida
     doble: en JS (round40.js) y aquí en CSS (round40.css #549). */
  .hero .eco-sats-svg { display: block; }

  /* Caja más baja y más arriba: el arco ya no necesita alto para
     desarrollarse en vertical. */
  .hero .eco-map {
    aspect-ratio: 360 / 300;
    margin-top: clamp(1rem, 4vw, 1.75rem);
  }

  /* Las posiciones absolutas de round36 quedan sin efecto: en la
     ronda 41 las etiquetas las coloca el JS. */
  .hero .eco-map .eco-list > li:nth-child(1),
  .hero .eco-map .eco-list > li:nth-child(2),
  .hero .eco-map .eco-list > li:nth-child(3),
  .hero .eco-map .eco-list > li:nth-child(4) {
    top: auto;
    left: auto;
    right: auto;
    text-align: center;
  }

  /* Cada etiqueta se queda dentro de su cuarto de caja: el solape de
     "Smart Brand" con "Smart Marketing" venía de dejarlas crecer libres. */
  .hero .eco-map .eco-list > li {
    max-width: 25%;
    white-space: normal;
  }

  /* La etiqueta del último nodo va a su izquierda, alineada a la
     derecha para quedar pegada al nodo y lejos del racimo. */
  .hero .eco-map .eco-list > li.is-left { text-align: right; }

  .hero .eco-map .eco-list > li b {
    display: block;
    font-size: clamp(0.875rem, 0.76rem + 0.8vw, 1.0625rem);
    line-height: 1.15;
    letter-spacing: 0.01em;
    margin-bottom: 0.3125rem;
    color: var(--c-platinum, #fafbf8);
    text-shadow: 0 1px 10px rgba(0, 2, 0, 0.85);
  }

  .hero .eco-map .eco-list > li span {
    display: block;
    font-size: clamp(0.8125rem, 0.72rem + 0.55vw, 0.9375rem);
    line-height: 1.3;
    color: rgba(250, 251, 248, 0.84);
    text-shadow: 0 1px 10px rgba(0, 2, 0, 0.85);
  }

  .hero .eco-map .eco-list > li.is-below { text-align: center; }

  /* Satélites: racimo abierto, legible sin robar ancho */
  .hero .eco-map .sat-node text {
    font-size: 10px;
    letter-spacing: 0.06em;
  }

  /* Ronda 42 #8: el pie "BRANDJUNGLE SYSTEM: TASKS · LEADS · …"
     desaparece fuera de escritorio. En escritorio sigue colgado
     fuera del flujo, así que no se toca el HTML. */
  .hero .eco-sats-caption { display: none; }
}

@media (min-width: 600px) and (max-width: 1023px) {
  .hero .eco-map { aspect-ratio: 360 / 215; }
}

@media (max-width: 599px) {
  .hero .eco-map { aspect-ratio: 360 / 280; }
  .hero .eco-map .sat-node text { font-size: 8px; }
}


/* ------------------------------------------------------------
   03 · PLATAFORMA — EL DASHBOARD DENTRO DE UNA TABLET  (#6 · R42 #1)

   Ronda 42: era una laptop con base trapezoidal. La base medía
   112% del contenedor y sobresalía del viewport, lo que volvía
   a section.platform un contenedor desplazable en horizontal y
   descuadraba la sección entera al cargar (R42 #10). Al pasar a
   tablet desaparece la base y con ella la causa.

   Bisel uniforme en los cuatro lados y algo más grueso que el de
   la ronda 41, para que se lea como tablet y no como pantalla
   suelta. Decorativo: el dashboard de dentro sigue clicable.
------------------------------------------------------------ */
.bj-tablet {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  isolation: isolate;
}

.bj-tablet-bezel { pointer-events: none; }

.bj-tablet-bezel {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: clamp(18px, 2.1vw, 28px);
  background:
    linear-gradient(158deg,
      rgba(250, 251, 248, 0.10) 0%,
      rgba(250, 251, 248, 0.035) 46%,
      rgba(250, 251, 248, 0.06) 100%),
    rgba(12, 15, 1, 0.92);
  border: 1px solid rgba(250, 251, 248, 0.16);
  box-shadow:
    0 28px 70px rgba(0, 2, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.bj-tablet-screen {
  position: relative;
  z-index: 1;
  padding: clamp(14px, 2vw, 24px);
}

.bj-tablet-screen > .pf-banner {
  position: relative;
  z-index: 1;
  border-radius: clamp(8px, 1vw, 14px);
  overflow: hidden;
}

/* Móvil: el bisel adelgaza pero nunca desaparece */
@media (max-width: 599px) {
  .bj-tablet-screen { padding: 10px; }
  .bj-tablet-bezel { border-radius: 14px; }
}


/* ------------------------------------------------------------
   04 · PLATAFORMA — LOS 10 MÓDULOS EN CARRUSEL            (#7)

   De rejilla de 10 tarjetas a una fila con snap. Cada tarjeta es
   un botón que cambia el panel del dashboard, y el dashboard
   marca de vuelta la tarjeta que le corresponde.
------------------------------------------------------------ */
.pf-mods-wrap {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.375rem, 1vw, 0.75rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.pf-mods {
  display: flex;
  gap: clamp(0.625rem, 1.4vw, 1rem);
  list-style: none;
  margin: 0;
  padding: 0.25rem 0.125rem 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.pf-mods::-webkit-scrollbar { display: none; }

.pf-mod-cell {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: clamp(210px, 24%, 280px);
  display: flex;
}

.pf-mod {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: clamp(0.875rem, 1.6vw, 1.125rem);
  border-radius: 16px;
  border: 1px solid rgba(250, 251, 248, 0.10);
  background: linear-gradient(158deg,
    rgba(250, 251, 248, 0.055) 0%,
    rgba(250, 251, 248, 0.02) 50%,
    rgba(250, 251, 248, 0.04) 100%);
  color: inherit;
  font: inherit;
  transition: border-color 240ms ease, background 240ms ease, transform 240ms ease;
}

.pf-mod .c-icon {
  width: 22px;
  height: 22px;
  color: var(--c-litoria-hi, #a9dc5c);
  flex: 0 0 auto;
}

.pf-mod-t {
  display: block;
  font-family: var(--f-ui);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-platinum, #fafbf8);
  margin-bottom: 0.1875rem;
}

.pf-mod-d {
  display: block;
  font-family: var(--f-ui);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(250, 251, 248, 0.66);
}

@media (hover: hover) {
  .pf-mod:hover {
    border-color: rgba(220, 220, 98, 0.42);
    transform: translateY(-2px);
  }
}

.pf-mod[aria-selected="true"] {
  border-color: rgba(220, 220, 98, 0.55);
  background: linear-gradient(158deg,
    rgba(169, 220, 92, 0.18) 0%,
    rgba(156, 176, 1, 0.09) 48%,
    rgba(220, 220, 98, 0.12) 100%);
  box-shadow: inset 0 1px 0 rgba(220, 220, 98, 0.30);
}

.pf-mod:focus-visible {
  outline: 2px solid var(--c-chartreuse, #dcdc62);
  outline-offset: 3px;
}

/* Flechas */
.pf-mods-nav {
  display: grid;
  place-items: center;
  width: clamp(34px, 4vw, 42px);
  height: clamp(34px, 4vw, 42px);
  border-radius: 999px;
  border: 1px solid rgba(250, 251, 248, 0.18);
  background: rgba(12, 15, 1, 0.70);
  color: var(--c-platinum, #fafbf8);
  cursor: pointer;
  transition: opacity 200ms ease, border-color 200ms ease;
}

.pf-mods-nav svg { width: 18px; height: 18px; }

.pf-mods-nav:disabled {
  opacity: 0.28;
  cursor: default;
}

.pf-mods-nav:not(:disabled):hover { border-color: rgba(220, 220, 98, 0.52); }

.pf-mods-nav:focus-visible {
  outline: 2px solid var(--c-chartreuse, #dcdc62);
  outline-offset: 2px;
}

.pf-mods-wrap[data-overflow="false"] .pf-mods-nav { display: none; }

/* Móvil: tarjeta y media, para que se lea que hay más a la derecha */
@media (max-width: 599px) {
  .pf-mod-cell { width: 68%; }
  .pf-mods { gap: 0.625rem; }
}

@media (min-width: 600px) and (max-width: 1023px) {
  .pf-mod-cell { width: 44%; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-mods { scroll-behavior: auto; }
  .pf-mod { transition: none; }
  .pf-mod:hover { transform: none; }
}


/* ------------------------------------------------------------
   05 · SOUND FAMILIAR? — EL TORNADO DESBORDA A LOS LADOS  (#10)

   El tornado vivía dentro del .container y quedaba encajonado
   entre dos columnas de aire. Rompe la caja a ancho completo; la
   cabecera de la sección se queda donde estaba.
------------------------------------------------------------ */
/* Ronda 42 #10: el tornado sale del .container en el HTML, así que
   ya nace a ancho completo de la sección. Antes se forzaba con
   width: 100vw, y 100vw incluye la barra de desplazamiento: con
   barra clásica sobresalía del viewport. Sin unidades de viewport
   no hay nada que sobresalga. */
.problems {
  overflow-x: clip;
  overscroll-behavior-x: contain;
}

.problems > .tornado {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  padding-inline: 0;
}

/* El desborde lateral no debe capturar clics fuera de vista */
.problems .tornado-card { pointer-events: auto; }

/* La tira de pestañas del dashboard desplaza en horizontal: que el
   gesto no se propague al documento ni a la sección. */
.pf-nav { overscroll-behavior-x: contain; }


/* ------------------------------------------------------------
   06 · PLAIN TALK — AIRE, ETIQUETAS Y LOGO MAYOR          (#11)
------------------------------------------------------------ */
/* Más aire bajo el h2 y bajo el subtítulo */
#plain-talk .section-head h2 { margin-bottom: clamp(1rem, 2.2vw, 1.75rem); }

#plain-talk .section-head .section-sub { margin-bottom: 0; }

#plain-talk .section-head { margin-bottom: clamp(2.25rem, 5vw, 4rem); }

/* "What you hear" y "What it means": etiqueta verde manzana con
   glow fijo. Texto en tinta, que sobre verde es lo único legible. */
/* Ronda 42 #7: .gr-head es un elemento de rejilla dentro de .gr-col,
   y como tal se estira al ancho del track aunque lleve inline-block.
   Lo que controla el ancho ahí es justify-self, no display. */
#plain-talk .gr-head {
  display: flex;
  justify-content: flex-start;
  background: none;
  padding: 0;
  box-shadow: none;
  margin-bottom: 0.875rem;
}

/* La píldora vive en el envoltorio, no en la línea */
#plain-talk .gr-head-pill {
  display: inline-block;
  max-width: 100%;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-pill, 999px);
  background: linear-gradient(135deg, #dcdc62 0%, #bcd94b 46%, #a9dc5c 100%);
  color: #000200;
  font-weight: 700;
  text-shadow: none;
  box-shadow:
    0 0 18px rgba(169, 220, 92, 0.55),
    0 0 42px rgba(156, 176, 1, 0.34);
}

/* La columna de salida alinea a la derecha: la etiqueta la sigue */
#plain-talk .gr-col--out .gr-head { justify-content: flex-end; }

/* Bajo 1024px las columnas se apilan y el bloque va centrado */
@media (max-width: 1023px) {
  #plain-talk .gr-head,
  #plain-talk .gr-col--out .gr-head { justify-content: center; }
}

/* El logo dentro del hexágono, un 30% mayor. El hexágono, el halo
   y el degradado hexGloss se quedan como estaban. */
#plain-talk .gr-logo {
  transform: scale(1.3);
  transform-origin: center;
}

/* Ronda 42 #6: en escritorio, un 15% menos (1.3 x 0.85). Móvil y
   táblet se quedan en 1.3, que es donde el hexágono es pequeño. */
@media (min-width: 1024px) {
  #plain-talk .gr-logo { transform: scale(1.105); }
}

#plain-talk .gr-logo svg {
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  #plain-talk .gr-logo { transform: scale(1.3); }
}

@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  #plain-talk .gr-logo { transform: scale(1.105); }
}


/* ------------------------------------------------------------
   07 · LA CITA — FONDO NEGRO Y CORTE LIMPIO               (#12)

   round36 metió #proof y #portfolio bajo un degradado común
   (.bj-midfield) justo para que no se viera el canto entre las
   dos. Esta ronda lo deshace a propósito: la cita va en negro y
   el paso a Selected work es un corte visible.
------------------------------------------------------------ */
.bj-midfield > .proof {
  background: var(--sf-page, #0c0f01) !important;
  background-color: var(--sf-page, #0c0f01) !important;
}

/* El fundido inferior de la aurora ya no hace falta: el corte es
   deliberado. Se mantiene el de arriba, que empalma con #growth. */
.bj-midfield > .proof::before,
.bj-midfield > .proof::after {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, rgba(0, 0, 0, 0) 83.3%);
  mask-image: linear-gradient(180deg, #000 0%, #000 74%, rgba(0, 0, 0, 0) 83.3%);
}

/* Selected work recupera su propio fondo, para que el canto exista */
.bj-midfield > .showcase {
  background: linear-gradient(180deg, #12160a 0%, #0e1206 58%, #0d1005 100%) !important;
}

/* Con el fondo más oscuro, la iluminación de la cita gana cuerpo */
.proof-quote .sign-line {
  text-shadow:
    0 0 26px rgba(220, 220, 98, 0.30),
    0 0 64px rgba(156, 176, 1, 0.22);
}


/* ------------------------------------------------------------
   08 · COMPARATIVA — TABLA TRANSPUESTA BAJO 1024px        (#13)

   Bajo 1024px round36 desmontaba la tabla en cinco tarjetas
   apiladas. Ahora se sirve una tabla transpuesta —criterios en
   filas, competidores en columnas— generada por JS desde la
   original, que sigue intacta para escritorio y como respaldo
   sin JS.
------------------------------------------------------------ */
.cmp-t-wrap { display: none; }

@media (max-width: 1023px) {
  .compare--light[data-cmp-t="on"] .cmp-scroll { display: none; }
  .compare--light[data-cmp-t="on"] .cmp-t-wrap { display: block; }

  .cmp-t-wrap {
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: 18px;
    border: 1px solid rgba(0, 2, 0, 0.10);
    background: rgba(255, 255, 255, 0.42);
    padding: clamp(0.625rem, 2vw, 1rem);
    overflow: hidden;
  }

  .cmp-t {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .cmp-t th,
  .cmp-t td {
    padding: clamp(0.4375rem, 1.4vw, 0.75rem) 0.25rem;
    text-align: center;
    vertical-align: middle;
  }

  /* Cabecera: los cinco competidores, abreviados */
  .cmp-t thead th {
    font-family: var(--f-ui);
    font-size: clamp(0.5rem, 0.46rem + 0.32vw, 0.625rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
    color: #2c3305;
    border-bottom: 1px solid rgba(0, 2, 0, 0.16);
    padding-bottom: 0.625rem;
  }

  .cmp-t thead th.cmp-t-corner {
    width: 28%;
    text-align: left;
  }

  /* La columna de Brand Jungle, destacada de arriba abajo */
  .cmp-t .cmp-t-mine {
    background: linear-gradient(180deg,
      rgba(169, 220, 92, 0.26) 0%,
      rgba(156, 176, 1, 0.16) 52%,
      rgba(220, 220, 98, 0.20) 100%);
  }

  .cmp-t thead th.cmp-t-mine {
    color: #2c5207;
    border-bottom-color: rgba(90, 110, 0, 0.55);
    border-radius: 10px 10px 0 0;
  }

  .cmp-t tbody tr:last-child .cmp-t-mine { border-radius: 0 0 10px 10px; }

  /* Criterios: la columna fija de la izquierda */
  .cmp-t tbody th {
    text-align: left;
    font-family: var(--f-ui);
    font-size: clamp(0.6875rem, 0.64rem + 0.35vw, 0.8125rem);
    font-weight: 600;
    line-height: 1.25;
    color: #101401;
    padding-right: 0.5rem;
  }

  .cmp-t tbody tr + tr th,
  .cmp-t tbody tr + tr td { border-top: 1px solid rgba(0, 2, 0, 0.10); }

  /* Las marcas conservan el tratamiento de round36 */
  .cmp-t .cmp-mark {
    display: inline-grid;
    place-items: center;
    position: relative;
    width: 26px;
    height: 26px;
  }

  .cmp-t .cmp-mark svg { width: 16px; height: 16px; }

  /* Ronda 42 #12: el verde y el rojo de la ronda 41 estaban calibrados
     contra fondo oscuro y sobre crema se desvanecían. Estos son los
     tonos que ya usa .compare--light en escritorio. */
  .cmp-t .cmp-mark {
    border-radius: 10px;
  }

  .cmp-t .cmp-mark--yes {
    color: #3d6b12;
    background: rgba(169, 220, 92, 0.30);
  }

  .cmp-t .cmp-mark--no {
    color: #b02c1e;
    background: rgba(214, 52, 38, 0.13);
  }

  .cmp-t .cmp-mark svg { stroke-width: 2.6; }

  .cmp-t .cmp-t-mine .cmp-mark--yes {
    color: #2c5207;
    background: rgba(156, 176, 1, 0.42);
  }
}

@media (max-width: 379px) {
  .cmp-t thead th.cmp-t-corner { width: 30%; }
  .cmp-t .cmp-mark { width: 22px; height: 22px; }
  .cmp-t .cmp-mark svg { width: 14px; height: 14px; }
}


/* ------------------------------------------------------------
   09 · HERO — AIRE ANTES DEL CUESTIONARIO         (R42 #9)

   "Where is your business today?" arrancaba pegado al bloque de
   situación. journey.css no le da margen superior propio.
------------------------------------------------------------ */
.hero .qualifier-q {
  margin-top: clamp(2.25rem, 6vw, 3.5rem);
}


/* ------------------------------------------------------------
   10 · MARKETING — LA CADENCIA, MÁS GRANDE Y CENTRADA  (R42 #11)

   "Publish → measure → report → adjust. Every month." iba a
   tamaño de pie de foto y alineada a la izquierda. Es el remate
   del argumento de la sección, así que se lee como tal.
------------------------------------------------------------ */
#marketing .mkt-steps {
  text-align: center;
  font-size: clamp(1rem, 0.9rem + 0.55vw, 1.375rem);
  line-height: 1.5;
  max-width: 34ch;
  margin-inline: auto;
}

@media (max-width: 767px) {
  #marketing .mkt-steps { max-width: 26ch; }
}