/* Una sola apariencia, a propósito: blanco y verde, como la puerta de alleria.app. */
  :root {
    --fondo: #f6f7f3;
    --blanco: #ffffff;
    --tarjeta: #eef1ea;
    --tarjeta-honda: #e5eadf;
    --tinta: #14231a;
    --texto: #56665b;
    --texto-suave: #5f6e64;
    --linea: #e0e5da;
    --linea-fuerte: #cfd6c8;
    --verde: #2f8f5b;
    --verde-medio: #3aa36a;
    --bosque: #153626;
    --bosque-2: #1d4631;
    --lima: #b8ee6c;
    --menta: #dbf0e2;
    --salvia: #e7ede0;
    --naranja: #d4703b;
    --oro: #b8862b;
    /* Legibilidad (15-sep): colores para letra que pasan 4,5:1 sobre blanco, fondo, tarjeta y menta.
       --verde y --oro quedan para rellenos, barras, puntos, íconos y el logotipo de la cabecera. */
    --verde-texto: #2c6e48;
    --verde-oscuro: #23573a;
    --oro-texto: #855f15;
    --naranja-oscuro: #8f4520;
    --borde-campo: #838f86;
    /* Letra clara sobre las bandas oscuras (bosque y noche): título y texto de base, texto secundario y rótulo */
    --claro: #f4f8f2;
    --claro-texto: #b9cdbf;
    --claro-rotulo: #d8e7dc;
    --menta-noche: #9fd9b4;
    /* Piso de los rótulos chicos de las pantallas de ejemplo: 10,24 px */
    --rotulo-min: 0.64rem;
    /* Radios y sombra de tarjetas: contenedores grandes, tarjetas y pastillas */
    --radio-s: 0.8rem;
    --radio-m: 1.1rem;
    --radio-l: 1.4rem;
    --sombra-tarjeta: 0 34px 60px -46px rgba(21, 54, 38, 0.5);
    /* Barra de arriba (15-sep, tarde): sombra en reposo, sombra al bajar y sombra de los desplegables */
    --sombra-barra: 0 1px 2px rgba(21, 54, 38, 0.06), 0 14px 26px -20px rgba(21, 54, 38, 0.55);
    --sombra-barra-alta: 0 2px 5px rgba(21, 54, 38, 0.09), 0 22px 38px -22px rgba(21, 54, 38, 0.75);
    --sombra-panel: 0 28px 50px -30px rgba(21, 54, 38, 0.5);
    --noche: #0b140f;
    --noche-2: #131f18;
    --noche-linea: #2a4234;
    --serif: "Newsreader", "Iowan Old Style", Palatino, Georgia, serif;
    --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "Geist Mono", ui-monospace, Consolas, monospace;
    --ancho: 74rem;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--sans); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
  img { max-width: 100%; }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; border-radius: 6px; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

  .envoltura { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 1.25rem; }
  h1, h2, h3, p { margin: 0; }
  h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; text-wrap: balance; color: var(--tinta); }
  h1 { font-size: clamp(2.7rem, 6vw, 4.6rem); line-height: 1.02; }
  h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.06; }
  h1 em, h2 em { font-style: italic; color: #5d7a66; }
  h3 { font-family: var(--sans); font-weight: 600; font-size: 1.12rem; line-height: 1.3; letter-spacing: -0.01em; }
  .texto { color: var(--texto); }
  .grande { font-size: clamp(1.02rem, 1.5vw, 1.12rem); max-width: 56ch; }
  .centrado { text-align: center; margin-inline: auto; }
  p, li { text-wrap: pretty; }
  .enlace { font-weight: 600; color: var(--verde-texto); text-decoration: none; }
  .enlace:hover { text-decoration: underline; }

  .etiqueta { display: inline-flex; align-items: center; gap: 0.45rem; width: fit-content; padding: 0.3rem 0.8rem; font-size: 0.8rem; font-weight: 500; color: var(--tinta); background: var(--blanco); border: 1px solid var(--linea); border-radius: 999px; }
  .etiqueta i { width: 6px; height: 6px; border-radius: 50%; background: var(--verde); }
  .marcador { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta); }
  .marcador::before { content: ""; width: 0.55rem; height: 1.05rem; background: var(--verde); border-radius: 1px; }

  .boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; padding: 0.8rem 1.1rem; font-family: var(--sans); font-weight: 600; font-size: 0.86rem; letter-spacing: 0.02em; text-decoration: none; border-radius: 0.55rem; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform 150ms ease, background 150ms ease, border-color 150ms ease; }
  .boton:hover { transform: translateY(-1px); }
  .boton-oscuro { background: var(--bosque); color: #fff; }
  .boton-oscuro:hover { background: #0f2a1d; }
  .boton-oscuro::after { content: ""; width: 0.5rem; height: 0.5rem; background: var(--lima); border-radius: 1px; }
  .boton-claro { background: var(--blanco); color: var(--tinta); border-color: var(--linea); }
  .boton-claro:hover { border-color: var(--linea-fuerte); }
  .boton-lima { background: var(--lima); color: var(--bosque); }
  .boton-lima::after { content: ""; width: 0.5rem; height: 0.5rem; background: var(--bosque); border-radius: 1px; }
  .checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
  .checks li { display: grid; grid-template-columns: 1.15rem 1fr; gap: 0.6rem; font-size: 0.97rem; color: var(--tinta); }
  .checks li::before { content: ""; width: 1.05rem; height: 1.05rem; margin-top: 0.17rem; border-radius: 50%; background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.8rem no-repeat; }

  /* ── Menú en cápsula ──
     (15-sep, tarde) Ángel: «se ve muy perdida, no se ve el relieve». La cápsula pasó a blanco sólido, con un borde que
     se ve, una sombra en dos capas que crece al bajar (.cabecera-fija) y cada ítem con su píldora. La sección donde
     está el usuario va en negrita, con fondo de menta y aria-current="page". */
  .cabecera { position: sticky; top: 0; z-index: 30; padding-block: 0.7rem; background: linear-gradient(var(--fondo) 74%, rgba(246, 247, 243, 0)); }
  .capsula { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: 3.45rem; padding: 0.4rem 0.45rem 0.4rem 1rem; background: var(--blanco); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-m); box-shadow: var(--sombra-barra); transition: box-shadow 220ms ease; }
  .cabecera-fija .capsula { box-shadow: var(--sombra-barra-alta); }
  .marca { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; }
  .marca img { width: 30px; height: 30px; }
  .logotipo { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-weight: 700; font-size: 1.18rem; letter-spacing: 0.14em; }
  .logotipo b { color: var(--oro); }
  .nombre { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; }
  .nombre b { font-weight: 700; color: var(--oro); }
  .pie-pagina .nombre b, .cx-casos .nombre b, .centro .nombre b, .hallazgo .avatar .nombre b, .spx-stack .nombre b, .menu-movil .nombre b, .foto-equipo .nombre b, .aeov-app .nombre b { color: var(--oro-texto); }
  .esports .nombre b, .ficha-npg .nombre b { color: #f2bb4c; }
  .esports h2 .nombre { letter-spacing: 0.04em; }
  .menu { display: flex; align-items: center; gap: 0.1rem; margin-right: auto; margin-left: 0.6rem; padding-left: 0.9rem; border-left: 1px solid var(--linea); font-size: 0.92rem; }
  .menu a { text-decoration: none; }
  .menu > a, .menu-boton { display: inline-flex; align-items: center; gap: 0.32rem; padding: 0.46rem 0.72rem; border-radius: 0.62rem; color: var(--texto); font-weight: 500; white-space: nowrap; transition: background 150ms ease, color 150ms ease; }
  .menu > a:hover, .menu-boton:hover { background: var(--tarjeta); color: var(--tinta); }
  /* La sección donde está el usuario: negrita y píldora de menta (en AEO, SEO y AEO o Generación de leads se marca «Soluciones») */
  .menu > a[aria-current="page"], .menu-boton[aria-current="page"] { background: var(--menta); color: var(--tinta); font-weight: 600; }
  .menu-acciones { display: flex; align-items: center; gap: 0.45rem; }
  .menu-acciones .boton-claro { background: var(--fondo); border-color: var(--linea-fuerte); }
  .menu-acciones .boton-claro:hover { background: var(--tarjeta); }
  .menu-acciones .boton-oscuro { box-shadow: 0 8px 16px -10px rgba(21, 54, 38, 0.9); }
  .menu-acciones .boton-oscuro[aria-current="page"] { box-shadow: 0 0 0 3px var(--menta), 0 0 0 4px var(--verde-texto); }
  /* Entre 1041 y 1110 px el menú entero tiene que caber: ítems más juntos y sin la línea que lo separa de la marca */
  @media (max-width: 1110px) { .menu { font-size: 0.88rem; margin-left: 0.3rem; padding-left: 0; border-left: 0; } .menu > a, .menu-boton { padding: 0.44rem 0.5rem; } }
  /* (17-sep) Con «Blog» en el menú, entre 961 y 1020 px la marca quedaba aplastada contra «Soluciones»: hasta 1040 px va la hamburguesa.
     Se subió de 1020 a 1040 cuando el sitio publicado pasó a usar Geist (la letra de la vista previa), que es más ancha que la del
     sistema: con la barra de desplazamiento de Windows la marca se aplastaba hasta 1026 px. Con 1040 quedan unos 23 px libres
     entre «Esports» y «Acceso» justo después del corte, y lo mismo después de 1110, donde los ítems dejan de ir más juntos.
     Este corte es el mismo en extra2.css (.hamburguesa y .menu-movil); menu.js comprueba que coincidan. */
  @media (max-width: 1040px) { .menu { display: none; } }
  @media (max-width: 600px) { .menu-acciones .boton-oscuro { display: none; } }

  /* ── Portada ── */
  .portada { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4.5rem); }
  .portada-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
  @media (max-width: 980px) { .portada-grid { grid-template-columns: 1fr; } }
  .portada-texto { display: flex; flex-direction: column; gap: 1.5rem; }
  .portada-botones { display: flex; flex-wrap: wrap; gap: 0.55rem; }
  .motores-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.3rem; font-size: 0.85rem; color: var(--texto-suave); }
  .motor { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--tinta); font-weight: 500; }
  .motor svg { width: 1.05rem; height: 1.05rem; }

  /* El panel del chat, sobre menta con cuadrícula y puntos */
  .panel { position: relative; min-height: 32rem; border-radius: 1.3rem; background:
      linear-gradient(var(--linea-malla) 1px, transparent 1px) 0 0 / 100% 5.5rem,
      linear-gradient(90deg, var(--linea-malla) 1px, transparent 1px) 0 0 / 5.5rem 100%,
      var(--menta);
    --linea-malla: rgba(21, 54, 38, 0.07);
    overflow: hidden; display: grid; place-items: center; padding: 2rem 1.25rem; }
  .punto-malla { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); transform: translate(-50%, -50%); }
  .chat { position: relative; width: min(28rem, 100%); display: flex; flex-direction: column; gap: 0.8rem; }
  .burbuja { background: var(--blanco); border: 1px solid var(--linea); border-radius: 1rem; padding: 0.85rem 1rem; font-size: 0.9rem; line-height: 1.5; box-shadow: 0 14px 30px -22px rgba(21, 54, 38, 0.5); }
  .burbuja.usuario { align-self: flex-end; max-width: 82%; background: var(--bosque); color: var(--claro); border-color: var(--bosque); border-bottom-right-radius: 0.3rem; }
  .burbuja.ia { border-bottom-left-radius: 0.3rem; max-width: 92%; }
  .burbuja .quien { display: flex; align-items: center; gap: 0.45rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 0.4rem; }
  .burbuja ol { margin: 0.35rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.2rem; }
  .burbuja ol b { font-weight: 600; }
  .escribiendo { display: inline-flex; gap: 3px; margin-left: 0.2rem; }
  .escribiendo i { width: 4px; height: 4px; border-radius: 50%; background: var(--texto-suave); animation: salto 1.2s infinite ease-in-out; }
  .escribiendo i:nth-child(2) { animation-delay: 0.15s; }
  .escribiendo i:nth-child(3) { animation-delay: 0.3s; }
  @keyframes salto { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }
  .hallazgo { position: relative; margin: 0.4rem -0.6rem 0 2.5rem; display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: center; background: var(--blanco); border: 1px solid var(--linea); border-radius: 1rem; padding: 0.9rem 1rem; box-shadow: 0 26px 46px -24px rgba(21, 54, 38, 0.55); }
  .hallazgo .avatar { display: flex; align-items: center; gap: 0.45rem; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-suave); grid-column: 1 / -1; }
  .hallazgo .avatar img { width: 20px; height: 20px; }
  .anillo { --pct: 22; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: conic-gradient(var(--verde) calc(var(--pct) * 1%), var(--tarjeta-honda) 0); display: grid; place-items: center; }
  .anillo span { width: 3.3rem; height: 3.3rem; border-radius: 50%; background: var(--blanco); display: grid; place-items: center; font-family: var(--serif); font-size: 1.25rem; font-weight: 500; }
  .hallazgo p { font-size: 0.84rem; line-height: 1.45; color: var(--texto); }
  .hallazgo p b { color: var(--tinta); font-weight: 600; }
  @media (max-width: 460px) { .hallazgo { margin: 0.4rem 0 0; } .panel { min-height: 0; } }

  /* Tira de hechos */
  .tira { border-block: 1px solid var(--linea); background: var(--blanco); }
  .tira .envoltura { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tira div { padding: 1.3rem 1.2rem; display: flex; flex-direction: column; gap: 0.15rem; border-left: 1px solid var(--linea); position: relative; }
  .tira div:first-child { border-left: 0; }
  .tira b { font-family: var(--serif); font-weight: 500; font-size: 1.55rem; line-height: 1.1; }
  .tira span { font-size: 0.84rem; color: var(--texto); }
  .tira div::before { content: ""; position: absolute; left: -4px; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); }
  .tira div:first-child::before { display: none; }
  @media (max-width: 820px) { .tira .envoltura { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tira div:nth-child(3) { border-left: 0; } .tira div:nth-child(n+3) { border-top: 1px solid var(--linea); } .tira div::before { display: none; } }

  .seccion { padding-block: clamp(4rem, 9vw, 7rem); }
  .orbita-seccion + .seccion { padding-top: 0; }
  .hero-pagina + .seccion { padding-top: clamp(1rem, 3vw, 2rem); }
  /* Prospección: «Lo que hacemos» trae su propio espacio arriba; Herramientas (spx-) le deja el resto para sumar un espacio normal */
  .seccion:has(.spx-stack) { padding-bottom: calc(clamp(4rem, 9vw, 7rem) - clamp(1rem, 3vw, 2rem)); }
  .cabeza { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
  .cabeza .texto { max-width: 52ch; }

  /* ── Soluciones: bloques de color con pantallas encima ── */
  .bento { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0.9rem; }
  @media (max-width: 900px) { .bento { grid-template-columns: 1fr; } }
  .bloque { position: relative; overflow: hidden; border-radius: 1.2rem; min-height: 22rem; padding: clamp(1.4rem, 3vw, 2.2rem); display: flex; flex-direction: column; gap: 0.8rem; }
  .bloque h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.55rem, 2.6vw, 2.05rem); line-height: 1.12; letter-spacing: -0.015em; max-width: 18ch; }
  .bloque .texto { max-width: 38ch; font-size: 0.95rem; }
  .bloque-menta { background: var(--menta); }
  .bloque-salvia { background: var(--salvia); }
  .bloque-bosque { grid-column: 1 / -1; background: var(--bosque); color: var(--claro); min-height: 24rem; }
  .bloque-bosque h3 { color: var(--claro); }
  .bloque-bosque .texto { color: var(--claro-texto); }
  .bloque-bosque .marcador { color: var(--claro-rotulo); }
  .bloque-bosque .marcador::before { background: var(--lima); }
  .rayas { position: absolute; height: 2.4rem; background: repeating-linear-gradient(180deg, currentColor 0 3px, transparent 3px 7px); opacity: 0.18; }
  .bloque-menta .rayas { color: var(--verde); }
  .bloque-bosque .rayas { color: var(--lima); opacity: 0.35; width: 3rem; height: 7rem; background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 9px); }

  .ui { background: var(--blanco); color: var(--tinta); border: 1px solid var(--linea); border-radius: var(--radio-s); box-shadow: 0 24px 44px -26px rgba(21, 54, 38, 0.5); font-size: 0.78rem; overflow: hidden; }
  .ui-titulo { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--linea); font-weight: 600; font-size: 0.8rem; }
  .ui-titulo small { font-family: var(--mono); font-weight: 400; font-size: var(--rotulo-min); color: var(--texto-suave); letter-spacing: 0.06em; }
  .ui-cuerpo { padding: 0.75rem 0.85rem; display: flex; flex-direction: column; gap: 0.5rem; }

  .solucion-medir .ui.ranking { position: absolute; right: -1.5rem; top: 5.8rem; width: min(20rem, 62%); }
  .solucion-medir .ui.puntaje { position: absolute; right: 38%; bottom: -1.2rem; width: min(15rem, 46%); }
  .solucion-medir .rayas { left: 0; bottom: 2.2rem; width: 42%; }
  @media (max-width: 620px) { .solucion-medir .ui.ranking, .solucion-medir .ui.puntaje { position: static; width: 100%; } .solucion-medir { min-height: 0; } .solucion-medir .rayas { display: none; } }
  .fila-rank { display: grid; grid-template-columns: 1rem minmax(0, 1fr) 2.4rem; gap: 0.5rem; align-items: center; }
  .fila-rank em { font-style: normal; color: var(--texto-suave); font-family: var(--mono); font-size: 0.66rem; }
  .fila-rank .barra { height: 1.25rem; border-radius: 0.3rem; background: rgba(47, 143, 91, 0.15); display: flex; align-items: center; padding-inline: 0.45rem; font-weight: 500; white-space: nowrap; overflow: hidden; }
  .fila-rank .barra.tuya { background: rgba(47, 143, 91, 0.38); font-weight: 600; }
  .fila-rank .barra.lider { background: rgba(212, 112, 59, 0.2); }
  .fila-rank b { font-family: var(--mono); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
  .dato { border: 1px solid var(--linea); border-radius: 0.55rem; padding: 0.45rem 0.6rem; display: flex; flex-direction: column; }
  .dato small { font-family: var(--mono); font-size: var(--rotulo-min); letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-suave); }
  .dato b { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; line-height: 1.15; }

  .solucion-plan .ui { margin-top: auto; margin-bottom: -2.5rem; margin-inline: 0.2rem -0.2rem; }
  .tarea { display: grid; grid-template-columns: 0.9rem minmax(0, 1fr) auto; gap: 0.55rem; align-items: center; padding-block: 0.3rem; border-bottom: 1px solid #f0f2ed; }
  .tarea:last-child { border-bottom: 0; }
  .tarea::before { content: ""; width: 0.8rem; height: 0.8rem; border: 1.5px solid var(--linea-fuerte); border-radius: 3px; }
  .tarea.hecha::before { background: var(--verde); border-color: var(--verde); }
  .prioridad { font-family: var(--mono); font-size: var(--rotulo-min); padding: 0.1rem 0.4rem; border-radius: 999px; background: rgba(212, 112, 59, 0.14); color: var(--naranja-oscuro); }
  .prioridad.media { background: rgba(47, 143, 91, 0.12); color: var(--verde-oscuro); }
  .malla-salvia { position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(rgba(21, 54, 38, 0.06) 1px, transparent 1px) 0 0 / 100% 2.6rem, linear-gradient(90deg, rgba(21, 54, 38, 0.06) 1px, transparent 1px) 0 0 / 2.6rem 100%; pointer-events: none; }

  .solucion-mapa { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem; align-items: center; }
  @media (max-width: 900px) { .solucion-mapa { grid-template-columns: 1fr; } }
  .solucion-mapa .lado { display: flex; flex-direction: column; gap: 0.9rem; position: relative; z-index: 1; }
  .solucion-mapa .ui { margin-right: calc(-1 * clamp(1.4rem, 3vw, 2.2rem)); margin-bottom: calc(-1 * clamp(1.4rem, 3vw, 2.2rem)); border-bottom-right-radius: 0; border-color: #2c5a41; }
  .solucion-mapa .rayas { right: 44%; bottom: 0; }
  .fuentes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .fuentes span { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; padding: 0.25rem 0.55rem; border-radius: 999px; border: 1px solid #3f6b52; color: var(--claro-rotulo); }
  .tabla-caja { overflow-x: auto; }
  .tabla { width: 100%; border-collapse: collapse; min-width: 33rem; }
  .tabla th { font-family: var(--mono); font-weight: 400; font-size: var(--rotulo-min); letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-suave); text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--linea); background: #fafbf8; white-space: nowrap; }
  .tabla td { padding: 0.5rem 0.7rem; border-bottom: 1px solid #f0f2ed; vertical-align: middle; }
  .tabla td.num { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
  .tabla tr.mes td { font-family: var(--mono); font-size: var(--rotulo-min); letter-spacing: 0.08em; text-transform: uppercase; color: var(--verde-texto); background: #f4f8f2; padding-block: 0.3rem; }
  .etapa { font-family: var(--mono); font-size: var(--rotulo-min); padding: 0.12rem 0.45rem; border-radius: 999px; white-space: nowrap; }
  .etapa.a { background: #e3f3e8; color: var(--verde-oscuro); }
  .etapa.c { background: #eef0d8; color: #5e5a17; }
  .etapa.d { background: #f7e4d8; color: var(--naranja-oscuro); }

  /* ── Lo que hacemos: tarjetas grises con la interfaz asomando ── */
  .tarjetas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.9rem; }
  .tarjeta { position: relative; overflow: hidden; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio-m); padding: 1.5rem 1.5rem 0; display: flex; flex-direction: column; gap: 0.35rem; min-height: 20rem; }
  .tarjeta .texto { font-size: 0.92rem; max-width: 42ch; }
  .t-ancha { grid-column: span 6; min-height: 22rem; }
  .t-media { grid-column: span 3; }
  .t-tercio { grid-column: span 2; }
  @media (max-width: 980px) { .t-tercio { grid-column: span 3; } }
  @media (max-width: 700px) { .t-media, .t-tercio { grid-column: span 6; } }
  .asoma { margin-top: auto; padding-top: 1.2rem; }
  .asoma .ui { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; box-shadow: 0 -2px 20px -12px rgba(21, 54, 38, 0.25); }
  .desvanecer { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }

  .rastreador { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem; }
  @media (max-width: 700px) { .rastreador { grid-template-columns: 1fr; } }
  .hud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .motor-fila { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 0.6rem; align-items: center; }
  .motor-fila span { font-weight: 600; font-size: 0.74rem; }
  .puntitos { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; }
  .puntitos i { aspect-ratio: 1; border-radius: 50%; display: block; }
  .puntitos i.t { background: var(--verde); }
  .puntitos i.o { background: var(--naranja); opacity: 0.8; }
  .puntitos i.n { box-shadow: inset 0 0 0 1.3px #c6cfc2; }
  .leyenda { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font-size: 0.68rem; color: var(--texto); }
  .leyenda span { display: inline-flex; align-items: center; gap: 0.3rem; }
  .leyenda i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

  .pregunta-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; padding-block: 0.35rem; border-bottom: 1px solid #f0f2ed; }
  .pregunta-fila:last-child { border-bottom: 0; }
  .pregunta-fila p { font-size: 0.76rem; line-height: 1.4; }

  .cita-fila { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr) auto auto; gap: 0.55rem; align-items: center; padding-block: 0.35rem; border-bottom: 1px solid #f0f2ed; }
  .cita-fila:last-child { border-bottom: 0; }
  .favicon { width: 1.1rem; height: 1.1rem; border-radius: 0.25rem; display: grid; place-items: center; font-size: 0.55rem; font-weight: 600; font-style: normal; color: #fff; }
  .cita-fila span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--verde-texto); }
  .cita-fila b { font-family: var(--mono); font-weight: 400; font-size: 0.68rem; color: var(--texto); }
  .tipo { font-style: normal; font-family: var(--mono); font-size: var(--rotulo-min); padding: 0.1rem 0.4rem; border-radius: 999px; background: var(--tarjeta); color: var(--texto); }
  .tipo.tuyo { background: rgba(47, 143, 91, 0.14); color: var(--verde-oscuro); }

  .hojas { display: flex; gap: 0.7rem; justify-content: center; }
  .hoja { width: 42%; max-width: 11rem; aspect-ratio: 210 / 297; background: var(--blanco); border: 1px solid var(--linea); border-radius: 0.3rem 0.3rem 0 0; border-bottom: 0; padding: 0.7rem; display: flex; flex-direction: column; gap: 0.35rem; }
  .hoja .cifra { font-family: var(--serif); font-size: 1.8rem; line-height: 1; color: var(--verde-texto); }
  .hoja .l { height: 4px; border-radius: 2px; background: #edf0ea; }
  .hoja .l.c { width: 60%; }
  .peldanos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; margin-top: auto; }
  .peldanos i { height: 16px; background: #e8ede4; border-radius: 2px; }
  .peldanos i.si { background: var(--verde); }
  .hoja.segunda { margin-top: 1.4rem; }

  /* ── Filas de detalle ── */
  .detalle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
  .detalle + .detalle { margin-top: clamp(4rem, 9vw, 7rem); }
  .detalle.invertido .visual { order: 2; }
  @media (max-width: 900px) { .detalle, .detalle.invertido { grid-template-columns: 1fr; } .detalle.invertido .visual { order: 0; } }
  .detalle .lado { display: flex; flex-direction: column; gap: 1.3rem; }
  .detalle .lado p { max-width: 50ch; }
  .visual { position: relative; padding: 0 2.5rem 2.5rem 0; }
  .visual .fondo { aspect-ratio: 5 / 4; max-width: 100%; border-radius: 1.2rem; }
  .fondo-menta { background: repeating-linear-gradient(135deg, rgba(21, 54, 38, 0.035) 0 1px, transparent 1px 8px), var(--menta); }
  .fondo-bosque { background: repeating-linear-gradient(135deg, rgba(184, 238, 108, 0.06) 0 1px, transparent 1px 8px), radial-gradient(90% 90% at 20% 10%, #245a3f, transparent 60%), var(--bosque); }
  .visual .ui { position: absolute; right: 0; bottom: 0; width: min(24rem, 86%); }
  .detalle.invertido .visual { padding: 0 0 2.5rem 2.5rem; }
  .detalle.invertido .visual .ui { right: auto; left: 0; }
  @media (max-width: 520px) { .visual, .detalle.invertido .visual { padding: 0; } .visual .fondo { display: none; } .visual .ui, .detalle.invertido .visual .ui { position: static; width: 100%; } }
  .entrada { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; padding: 0.5rem 0.2rem; border-bottom: 1px solid #f0f2ed; }
  .entrada:last-of-type { border-bottom: 0; }
  .entrada .icono { width: 1.6rem; height: 1.6rem; border-radius: 0.4rem; background: var(--tarjeta); display: grid; place-items: center; color: var(--verde); }
  .entrada .icono svg { width: 0.95rem; height: 0.95rem; }
  .entrada div { display: flex; flex-direction: column; }
  .entrada b { font-weight: 600; font-size: 0.8rem; }
  .entrada small { color: var(--texto-suave); font-size: 0.7rem; }
  .listo { font-family: var(--mono); font-size: var(--rotulo-min); color: var(--verde-texto); }
  .ficha-resultado { margin-top: 0.3rem; border-top: 1px dashed var(--linea-fuerte); padding-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
  .ficha-resultado span { font-size: 0.68rem; padding: 0.2rem 0.5rem; border-radius: 999px; background: #f2f5ef; border: 1px solid var(--linea); }
  .corrida { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; padding-block: 0.38rem; border-bottom: 1px solid #f0f2ed; }
  .corrida:last-of-type { border-bottom: 0; }
  .corrida small { font-family: var(--mono); font-size: var(--rotulo-min); color: var(--texto-suave); }
  .corrida span { font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .marca-si { font-style: normal; font-family: var(--mono); font-size: var(--rotulo-min); padding: 0.1rem 0.4rem; border-radius: 999px; background: rgba(47, 143, 91, 0.14); color: var(--verde-oscuro); }
  .marca-no { font-style: normal; font-family: var(--mono); font-size: var(--rotulo-min); padding: 0.1rem 0.4rem; border-radius: 999px; background: #f1f3ee; color: var(--texto-suave); }
  .rango { margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.35rem; }
  .rango-riel { position: relative; height: 0.5rem; border-radius: 999px; background: #edf0ea; }
  .rango-riel i { position: absolute; top: 0; bottom: 0; left: 14%; width: 17%; border-radius: 999px; background: rgba(47, 143, 91, 0.45); }
  .rango-riel b { position: absolute; top: -0.2rem; left: 22%; width: 2px; height: 0.9rem; background: var(--bosque); }
  .rango small { font-size: 0.7rem; color: var(--texto); }

  /* ── Pasos ── */
  .pasos-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
  @media (max-width: 900px) { .pasos-grid { grid-template-columns: 1fr; } }
  .pasos { list-style: none; margin: 1.8rem 0 0; padding: 0; display: flex; flex-direction: column; }
  .paso { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 1rem; padding-block: 1.1rem; border-top: 1px solid var(--linea); }
  .paso:last-child { border-bottom: 1px solid var(--linea); }
  .paso .n { width: 2.2rem; height: 2.2rem; border-radius: 0.55rem; background: var(--blanco); border: 1px solid var(--linea); display: grid; place-items: center; font-family: var(--mono); font-size: 0.8rem; color: var(--verde-texto); }
  .paso.activo .n { background: var(--bosque); color: var(--lima); border-color: var(--bosque); }
  .paso h3 { font-size: 1.05rem; }
  .paso p { color: var(--texto); font-size: 0.92rem; margin-top: 0.15rem; }
  .avance .ui-cuerpo { gap: 0.2rem; }
  .avance-barra { height: 0.4rem; border-radius: 999px; background: #edf0ea; overflow: hidden; margin-block: 0.2rem 0.6rem; }
  .avance-barra i { display: block; height: 100%; width: 54%; background: var(--verde); border-radius: 999px; }
  .item { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr) auto; gap: 0.55rem; align-items: center; padding-block: 0.33rem; font-size: 0.8rem; }
  .item .estado { width: 1rem; height: 1rem; border-radius: 50%; border: 1.5px solid var(--linea-fuerte); }
  .item.hecho .estado { background: var(--verde); border-color: var(--verde); }
  .item.ahora .estado { border-color: var(--verde); box-shadow: 0 0 0 4px rgba(47, 143, 91, 0.15); animation: latido 1.6s infinite ease-in-out; }
  .item.hecho span { color: var(--texto-suave); }
  .item.ahora span { font-weight: 600; }
  .item small { font-family: var(--mono); font-size: var(--rotulo-min); color: var(--texto-suave); }
  @keyframes latido { 50% { box-shadow: 0 0 0 7px rgba(47, 143, 91, 0.06); } }

  /* ── Acceso ── */
  .puertas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
  @media (max-width: 720px) { .puertas { grid-template-columns: 1fr; } }
  .puerta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1.5rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: 1.1rem; text-decoration: none; transition: transform 150ms ease, border-color 150ms ease; }
  .puerta:hover { transform: translateY(-2px); border-color: var(--verde); }
  .puerta .icono-puerta { width: 3rem; height: 3rem; border-radius: 0.8rem; background: var(--menta); color: var(--bosque); display: grid; place-items: center; }
  .puerta .icono-puerta svg { width: 1.5rem; height: 1.5rem; }
  .puerta div { display: flex; flex-direction: column; gap: 0.15rem; }
  .puerta b { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; }
  .puerta small { color: var(--texto); font-size: 0.9rem; }
  .puerta .flecha { font-family: var(--mono); color: var(--verde-texto); }

  /* ── Esports ── */
  .esports { border-radius: 1.4rem; overflow: hidden; background: repeating-linear-gradient(135deg, rgba(240, 238, 230, 0.03) 0 1px, transparent 1px 8px), radial-gradient(70% 90% at 90% 10%, rgba(116, 214, 155, 0.16), transparent 60%), var(--noche); color: var(--claro); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: center; padding: clamp(1.8rem, 5vw, 3.5rem); }
  @media (max-width: 900px) { .esports { grid-template-columns: 1fr; } }
  .esports h1, .esports h2 { color: var(--claro); }
  .esports h2 em { color: var(--menta-noche); }
  .esports .texto { color: var(--claro-texto); }
  .esports .marcador { color: var(--claro-rotulo); }
  .esports .marcador::before { background: var(--lima); }
  .esports .lado { display: flex; flex-direction: column; gap: 1.2rem; }
  .ficha-npg { background: var(--noche-2); border: 1px solid var(--noche-linea); padding: 1.5rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem; align-items: center; clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
  @media (max-width: 460px) { .ficha-npg { grid-template-columns: 1fr; } }
  .logo-npg { width: 10rem; height: 10rem; border-radius: 8px; display: block; }
  .ficha-npg dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem 1.2rem; }
  .ficha-npg dt { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--claro-texto); align-self: center; }
  .ficha-npg dd { margin: 0; font-weight: 500; }
  .boton-noche { background: transparent; color: var(--claro); border-color: var(--noche-linea); }
  .boton-noche:hover { border-color: var(--lima); }

  /* ── Blog ── */
  .articulos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
  @media (max-width: 900px) { .articulos { grid-template-columns: 1fr; } }
  .articulo { display: flex; flex-direction: column; gap: 0.7rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-m); padding: 0.6rem 0.6rem 1.3rem; text-decoration: none; transition: transform 150ms ease, border-color 150ms ease; }
  .articulo:hover { transform: translateY(-2px); border-color: var(--linea-fuerte); }
  .articulo .portadilla { aspect-ratio: 16 / 10; max-width: 100%; border-radius: 0.8rem; display: grid; place-items: center; font-family: var(--serif); font-size: 1.6rem; font-style: italic; color: var(--bosque); background: repeating-linear-gradient(135deg, rgba(21, 54, 38, 0.04) 0 1px, transparent 1px 8px), var(--menta); }
  .articulo.b .portadilla { background: repeating-linear-gradient(135deg, rgba(21, 54, 38, 0.04) 0 1px, transparent 1px 8px), var(--salvia); }
  .articulo.c .portadilla { background: repeating-linear-gradient(135deg, rgba(240, 238, 230, 0.05) 0 1px, transparent 1px 8px), var(--noche); color: var(--menta-noche); }
  .articulo .meta, .articulo h3, .articulo p { padding-inline: 0.7rem; }
  .articulo .meta { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-suave); }
  .articulo p { color: var(--texto); font-size: 0.9rem; }

  /* ── Preguntas ── */
  .preguntas { max-width: 50rem; margin-inline: auto; display: flex; flex-direction: column; gap: 0.55rem; }
  .preguntas details { background: var(--blanco); border: 1px solid var(--linea); border-radius: 0.9rem; padding: 0 1.2rem; }
  .preguntas summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.05rem; font-weight: 600; }
  .preguntas summary::-webkit-details-marker { display: none; }
  .preguntas summary::after { content: ""; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--tarjeta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' stroke='%2314231a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 0.8rem no-repeat; transition: transform 150ms ease; }
  .preguntas details[open] summary::after { transform: rotate(45deg); }
  .preguntas p { padding-bottom: 1.15rem; color: var(--texto); max-width: 62ch; }

  /* ── Contacto ── */
  .contacto-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
  @media (max-width: 900px) { .contacto-grid { grid-template-columns: 1fr; } }
  .contacto-grid .lado { display: flex; flex-direction: column; gap: 1.3rem; }
  .formulario { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-l); padding: clamp(1.4rem, 3.5vw, 2.2rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; box-shadow: var(--sombra-tarjeta); }
  @media (max-width: 560px) { .formulario { grid-template-columns: 1fr; } }
  .campo { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
  .campo.ancho { grid-column: 1 / -1; }
  .campo label { font-size: 0.84rem; font-weight: 500; }
  .campo input, .campo select, .campo textarea { font: inherit; font-size: 0.95rem; color: var(--tinta); background: var(--fondo); border: 1px solid var(--borde-campo); border-radius: 0.6rem; padding: 0.7rem 0.8rem; width: 100%; }
  .campo textarea { min-height: 6.5rem; resize: vertical; }
  .campo input::placeholder, .campo textarea::placeholder { color: var(--texto-suave); opacity: 1; }
  .campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; background: var(--blanco); border-color: var(--verde); box-shadow: 0 0 0 3px rgba(47, 143, 91, 0.16); }
  .formulario .pie { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; }
  .formulario .pie small { color: var(--texto-suave); font-size: 0.8rem; }
  .aviso { grid-column: 1 / -1; font-size: 0.9rem; color: var(--verde-oscuro); background: var(--menta); border-radius: 0.6rem; padding: 0.7rem 0.9rem; }

  /* ── Cierre ── */
  .cierre { border-radius: var(--radio-l); overflow: hidden; background: repeating-linear-gradient(135deg, rgba(184, 238, 108, 0.05) 0 1px, transparent 1px 8px), radial-gradient(60% 120% at 50% 120%, #2f8f5b, transparent 70%), var(--bosque); color: var(--claro); text-align: center; padding: clamp(3rem, 8vw, 5.5rem) 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
  .cierre h2 { color: var(--claro); }
  .cierre h2 em { color: var(--lima); }
  .cierre p { color: var(--claro-texto); max-width: 46ch; }

  .pie-pagina { padding-block: 2.5rem; }
  .pie-pagina .envoltura { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.86rem; color: var(--texto-suave); }
  .pie-pagina nav { display: flex; flex-wrap: wrap; gap: 1.3rem; }
  .pie-pagina a { text-decoration: none; }
  .pie-pagina a:hover { color: var(--tinta); }
  .pie-pagina .nombre { color: var(--tinta); }
  /* La sección donde está el usuario, también abajo (15-sep, tarde) */
  .pie-pagina nav a[aria-current="page"] { font-weight: 600; color: var(--tinta); }

  .sello-propuesta { position: fixed; left: 0.8rem; bottom: 0.8rem; z-index: 40; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; background: var(--bosque); color: var(--claro-rotulo); padding: 0.4rem 0.7rem; border-radius: 999px; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5); }
  .sello-propuesta b { color: var(--lima); font-weight: 500; }
  /* Mientras sea propuesta: en celular va a la derecha, más chico y sin atrapar clics; el pie deja lugar para que no lo tape. Se quita antes de publicar. */
  @media (max-width: 600px) { .sello-propuesta { left: auto; right: 0.6rem; bottom: 0.6rem; font-size: 0.58rem; opacity: 0.85; pointer-events: none; } }
  body:has(.sello-propuesta) .pie-pagina { padding-bottom: 4rem; }

  /* ── Propuesta 3 ── */
  section[id], .portada { scroll-margin-top: 5.5rem; }
  .ejecuta { display: inline-flex; align-items: center; gap: 0.4rem; width: fit-content; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.28rem 0.6rem; border-radius: 999px; background: rgba(47, 143, 91, 0.13); color: var(--verde-oscuro); }
  .ejecuta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .bloque-bosque .ejecuta { background: rgba(184, 238, 108, 0.14); color: var(--lima); }

  /* El marco donde se apoya una pantalla (reemplaza el fondo suelto) */
  .visual.marco, .detalle.invertido .visual.marco { padding: clamp(1rem, 3vw, 2rem); border-radius: 1.2rem; }
  .visual.marco .ui { position: static; width: 100%; }
  .marco-menta { background: repeating-linear-gradient(135deg, rgba(21, 54, 38, 0.035) 0 1px, transparent 1px 8px), var(--menta); }
  .marco-bosque { background: repeating-linear-gradient(135deg, rgba(184, 238, 108, 0.06) 0 1px, transparent 1px 8px), var(--bosque); }

  /* Rastreador: preguntas × rondas */
  .hud3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .dato em { font-style: normal; font-size: 0.66rem; color: var(--texto-suave); }
  .rondas-caja { overflow-x: auto; }
  .rondas { width: 100%; min-width: 40rem; border-collapse: collapse; }
  .rondas th { font-family: var(--mono); font-weight: 400; font-size: var(--rotulo-min); letter-spacing: 0.06em; color: var(--texto-suave); text-align: center; padding: 0.2rem 0.15rem; white-space: nowrap; }
  .rondas th.ia { font-family: var(--sans); font-weight: 600; font-size: 0.74rem; letter-spacing: 0; color: var(--tinta); padding-bottom: 0; }
  .rondas th.izq { text-align: left; }
  .rondas td { padding: 0.32rem 0.15rem; border-top: 1px solid #f0f2ed; text-align: center; }
  .rondas td.preg { text-align: left; font-size: 0.76rem; line-height: 1.35; padding-right: 0.8rem; max-width: 17rem; }
  .rondas .sep { border-left: 1px solid var(--linea); padding-left: 0.5rem; }
  .rondas td.total { font-family: var(--mono); font-size: 0.7rem; white-space: nowrap; padding-left: 0.7rem; text-align: right; }
  .celda { display: inline-block; width: 1.3rem; height: 1.3rem; border-radius: 0.3rem; background: #f3f5f0; border: 1px solid #e3e8df; vertical-align: middle; }
  .celda.si { background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.85rem no-repeat; border-color: var(--verde); }
  .leyenda .celda { width: 0.9rem; height: 0.9rem; background-size: 0.6rem; }

  /* Prospección */
  .bloque-claro { grid-column: 1 / -1; background: var(--blanco); border: 1px solid var(--linea); }
  .solucion-prospeccion { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 2rem; align-items: center; min-height: 0; }
  @media (max-width: 900px) { .solucion-prospeccion { grid-template-columns: 1fr; } }
  .solucion-prospeccion .lado { display: flex; flex-direction: column; gap: 0.9rem; }
  .solucion-prospeccion .marco { border-radius: 1rem; padding: clamp(0.9rem, 2.5vw, 1.6rem); background: repeating-linear-gradient(135deg, rgba(21, 54, 38, 0.035) 0 1px, transparent 1px 8px), var(--salvia); }
  .canales { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .canales span { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; padding: 0.25rem 0.55rem; border-radius: 999px; border: 1px solid var(--linea-fuerte); color: var(--texto); }
  .embudo-fila { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 2.6rem; gap: 0.6rem; align-items: center; }
  .embudo-fila span { font-size: 0.78rem; }
  .embudo-fila .riel { height: 1.1rem; border-radius: 0.3rem; background: #f0f3ec; overflow: hidden; }
  .embudo-fila .riel i { display: block; height: 100%; border-radius: 0.3rem; background: rgba(47, 143, 91, 0.4); }
  .embudo-fila.meta .riel i { background: var(--verde); }
  .embudo-fila b { font-family: var(--mono); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
  .reunion { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; padding: 0.45rem 0.55rem; border-radius: 0.55rem; background: #f4f8f2; border: 1px solid #e2ecdf; }
  .reunion small { font-family: var(--mono); font-size: var(--rotulo-min); color: var(--verde-texto); text-align: center; line-height: 1.2; }
  .reunion span { font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @media (max-width: 460px) { .embudo-fila { grid-template-columns: 6.5rem minmax(0, 1fr) 2.2rem; } }

  /* Juntos */
  .juntos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
  @media (max-width: 800px) { .juntos { grid-template-columns: 1fr; } }
  .lado-juntos { border-radius: var(--radio-l); padding: clamp(1.4rem, 3.5vw, 2.2rem); display: flex; flex-direction: column; gap: 1rem; }
  .lado-juntos h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 1.95rem); line-height: 1.12; letter-spacing: -0.015em; }
  .ustedes { background: var(--blanco); border: 1px solid var(--linea); }
  .nosotros { background: repeating-linear-gradient(135deg, rgba(184, 238, 108, 0.05) 0 1px, transparent 1px 8px), var(--bosque); color: var(--claro); }
  .nosotros h3 { color: var(--claro); }
  .nosotros .marcador { color: var(--claro-rotulo); }
  .nosotros .marcador::before { background: var(--lima); }
  .nosotros .checks li { color: var(--claro); }
  .nosotros .checks li b { color: var(--lima); font-weight: 600; }
  .pasos-h { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1.2rem; }
  @media (max-width: 900px) { .pasos-h { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; } }
  @media (max-width: 520px) { .pasos-h { grid-template-columns: 1fr; } }
  .pasos-h li { border-top: 2px solid var(--linea-fuerte); padding-top: 1rem; display: flex; flex-direction: column; gap: 0.35rem; }
  .pasos-h li.nuestro { border-top-color: var(--verde); }
  .pasos-h .n { font-family: var(--mono); font-size: 0.72rem; color: var(--verde-texto); }
  .pasos-h h3 { font-size: 1.02rem; }
  .pasos-h p { color: var(--texto); font-size: 0.9rem; }
  .pasos-h .quien-hace { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-suave); margin-top: 0.2rem; }

  /* Esports: aviso en el inicio y página propia */
  .banda-esports { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem; padding: 1.1rem 1.4rem; border-radius: 1.1rem; background: var(--noche); color: var(--claro); }
  .banda-esports img { width: 4rem; height: 4rem; border-radius: 0.5rem; }
  .banda-esports div { flex: 1 1 18rem; display: flex; flex-direction: column; gap: 0.15rem; }
  .banda-esports b { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; }
  .banda-esports .nombre b { font-family: inherit; font-size: inherit; color: #f2bb4c; }
  .banda-esports .nombre { color: var(--claro); }
  .banda-esports span.txt { color: var(--claro-texto); font-size: 0.92rem; }
  .razones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
  @media (max-width: 800px) { .razones { grid-template-columns: 1fr; } }
  .razon { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-m); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
  .razon h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; }
  .razon p { color: var(--texto); font-size: 0.94rem; }
  .volver { font-family: var(--mono); font-size: 0.78rem; text-decoration: none; color: var(--verde-texto); }
  .proximamente { border: 1px dashed var(--linea-fuerte); border-radius: 1.1rem; padding: 2rem 1.5rem; text-align: center; color: var(--texto); }

  /* ── Propuesta 4: varias páginas, menú desplegable y la huella de Alleria ── */
  :root { --huella: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 11.2c3.1 0 6 3.3 6 6.1 0 2.2-1.7 3.2-3.4 3.2-1.2 0-1.7-.6-2.6-.6s-1.4.6-2.6.6C7.7 20.5 6 19.5 6 17.3c0-2.8 2.9-6.1 6-6.1z'/%3E%3Cellipse cx='4.6' cy='10.4' rx='2' ry='2.6' transform='rotate(-20 4.6 10.4)'/%3E%3Cellipse cx='9' cy='5.6' rx='2.1' ry='2.8' transform='rotate(-8 9 5.6)'/%3E%3Cellipse cx='15' cy='5.6' rx='2.1' ry='2.8' transform='rotate(8 15 5.6)'/%3E%3Cellipse cx='19.4' cy='10.4' rx='2' ry='2.6' transform='rotate(20 19.4 10.4)'/%3E%3C/svg%3E"); }
  .boton-oscuro::after, .boton-lima::after { width: 0.95rem; height: 0.95rem; border-radius: 0; -webkit-mask: var(--huella) center / contain no-repeat; mask: var(--huella) center / contain no-repeat; transform: rotate(18deg); transition: transform 180ms ease; }
  .boton-oscuro:hover::after, .boton-lima:hover::after { transform: rotate(18deg) translate(2px, -1px); }
  .marcador::before { width: 0.85rem; height: 0.85rem; border-radius: 0; -webkit-mask: var(--huella) center / contain no-repeat; mask: var(--huella) center / contain no-repeat; transform: rotate(14deg); }
  .huella { position: absolute; width: 18px; height: 18px; background: var(--verde); opacity: 0.28; -webkit-mask: var(--huella) center / contain no-repeat; mask: var(--huella) center / contain no-repeat; pointer-events: none; }

  /* Menú (el relieve de la barra y la píldora del ítem actual están en plantilla-p2.html) */
  .desplegable { position: relative; }
  /* «font: inherit» borra el peso del ítem, así que se vuelve a pedir: «Soluciones» pesa igual que los demás */
  .menu-boton { font: inherit; font-size: 0.92rem; font-weight: 500; background: none; border: 0; cursor: pointer; }
  .menu-boton[aria-expanded="true"] { background: var(--tarjeta); color: var(--tinta); }
  .menu-boton svg { width: 0.7rem; height: 0.7rem; transition: transform 150ms ease; }
  .menu-boton[aria-expanded="true"] svg { transform: rotate(180deg); }
  @media (max-width: 1110px) { .menu-boton { font-size: 0.88rem; } }
  .panel-menu { position: absolute; top: calc(100% + 0.85rem); left: -0.4rem; width: 25rem; background: var(--blanco); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-m); padding: 0.45rem; display: grid; gap: 0.1rem; box-shadow: var(--sombra-panel); z-index: 40; }
  .panel-menu.derecha { left: auto; right: 0; width: 21rem; }
  .opcion { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.8rem; align-items: center; padding: 0.7rem; border-radius: 0.7rem; text-decoration: none; }
  .opcion:hover { background: var(--fondo); }
  .opcion .ico { width: 2.5rem; height: 2.5rem; border-radius: 0.65rem; background: var(--menta); color: var(--bosque); display: grid; place-items: center; }
  .opcion .ico svg { width: 1.2rem; height: 1.2rem; }
  .opcion b { display: block; font-weight: 500; font-size: 0.92rem; color: var(--tinta); }
  .opcion small { display: block; color: var(--texto); font-size: 0.8rem; line-height: 1.4; }
  /* Dentro del desplegable, la solución que se está viendo: negrita, menta y su ícono en verde */
  .opcion[aria-current="page"] { background: var(--menta); }
  .opcion[aria-current="page"] b { font-weight: 600; }
  .opcion[aria-current="page"] .ico { background: var(--verde-texto); color: var(--blanco); }
  .hamburguesa { display: none; width: 2.7rem; height: 2.7rem; border: 1px solid var(--linea-fuerte); border-radius: 0.6rem; background: var(--fondo); color: var(--tinta); cursor: pointer; place-items: center; }
  .hamburguesa:hover { background: var(--tarjeta); }
  .hamburguesa[aria-expanded="true"] { background: var(--bosque); border-color: var(--bosque); color: var(--claro); }
  .hamburguesa svg { width: 1.2rem; height: 1.2rem; }
  @media (max-width: 1040px) { .hamburguesa { display: grid; } .menu-acciones .desplegable { display: none; } }
  .menu-movil { margin-top: 0.55rem; background: var(--blanco); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-m); padding: 0.5rem; display: grid; gap: 0.1rem; max-height: calc(100vh - 6rem); overflow-y: auto; box-shadow: var(--sombra-barra-alta); }
  .menu-movil a { position: relative; padding: 0.65rem 0.8rem 0.65rem 0.95rem; border-radius: 0.6rem; text-decoration: none; font-weight: 500; color: var(--tinta); }
  .menu-movil a:hover { background: var(--fondo); }
  /* La sección donde está el usuario, también en el celular: negrita, menta y una barra verde al costado */
  .menu-movil a[aria-current="page"] { background: var(--menta); font-weight: 600; }
  .menu-movil a[aria-current="page"]::before { content: ""; position: absolute; left: 0.3rem; top: 0.6rem; bottom: 0.6rem; width: 3px; border-radius: 2px; background: var(--verde-texto); }
  .menu-movil .grupo { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-suave); padding: 0.7rem 0.8rem 0.15rem; }
  /* En el celular el botón de contacto no cabe arriba: va como llamado dentro del menú */
  .menu-movil a[href="/contacto"] { margin-top: 0.3rem; background: var(--bosque); color: var(--claro); font-weight: 600; text-align: center; padding-inline: 0.8rem; }
  .menu-movil a[href="/contacto"]:hover { background: var(--bosque-2); }
  .menu-movil a[href="/contacto"][aria-current="page"] { background: var(--bosque-2); }
  .menu-movil a[href="/contacto"][aria-current="page"]::before { background: var(--lima); }
  @media (min-width: 1041px) { .menu-movil { display: none !important; } }

  /* Herramientas de IA */
  .herramientas-banda { padding-block: 1.8rem; border-block: 1px solid var(--linea); background: var(--blanco); }
  .herramientas-banda p { text-align: center; font-size: 0.86rem; color: var(--texto); margin-bottom: 0.9rem; }
  .herramientas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
  .herramientas-banda .herramientas { max-width: 46rem; margin-inline: auto; }
  .herramienta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.95rem; border: 1px solid var(--linea); border-radius: 999px; background: var(--fondo); font-weight: 600; font-size: 0.9rem; letter-spacing: -0.01em; white-space: nowrap; }
  .herramienta i { width: 0.6rem; height: 0.6rem; border-radius: 50%; }

  /* Cabecera de cada página */
  .hero-pagina { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 7vw, 5rem); }
  .hero-pagina .envoltura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  @media (max-width: 980px) { .hero-pagina .envoltura { grid-template-columns: 1fr; } }
  .hero-pagina .texto-hero { display: flex; flex-direction: column; gap: 1.3rem; }
  .hero-pagina h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); }
  .migas { font-family: var(--mono); font-size: 0.72rem; color: var(--texto-suave); letter-spacing: 0.04em; }
  .migas a { text-decoration: none; color: var(--verde-texto); }

  /* La escena: pantallas apiladas sobre un bloque de color */
  .escena { position: relative; overflow: hidden; border-radius: var(--radio-l); padding: clamp(1.2rem, 4vw, 2.5rem); display: grid; place-items: center; min-height: 26rem;
    background: linear-gradient(rgba(21, 54, 38, 0.07) 1px, transparent 1px) 0 0 / 100% 4.5rem, linear-gradient(90deg, rgba(21, 54, 38, 0.07) 1px, transparent 1px) 0 0 / 4.5rem 100%, var(--menta); }
  .escena.salvia { background: linear-gradient(rgba(21, 54, 38, 0.07) 1px, transparent 1px) 0 0 / 100% 4.5rem, linear-gradient(90deg, rgba(21, 54, 38, 0.07) 1px, transparent 1px) 0 0 / 4.5rem 100%, var(--salvia); }
  .escena.bosque { background: linear-gradient(rgba(184, 238, 108, 0.08) 1px, transparent 1px) 0 0 / 100% 4.5rem, linear-gradient(90deg, rgba(184, 238, 108, 0.08) 1px, transparent 1px) 0 0 / 4.5rem 100%, var(--bosque); }
  .escena.bosque .huella { background: var(--lima); opacity: 0.35; }
  .pila { position: relative; width: min(27rem, 100%); display: flex; flex-direction: column; gap: 0.8rem; }
  .pila .corrido { margin-left: clamp(0rem, 6vw, 3rem); }
  .pila .atras { margin-right: clamp(0rem, 6vw, 3rem); }

  /* Secciones de las páginas */
  .tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
  @media (max-width: 860px) { .tres { grid-template-columns: 1fr; } }
  .caja { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-m); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.55rem; }
  .caja .ico { width: 2.6rem; height: 2.6rem; border-radius: 0.7rem; background: var(--menta); color: var(--bosque); display: grid; place-items: center; margin-bottom: 0.3rem; }
  .caja .ico svg { width: 1.25rem; height: 1.25rem; }
  .caja p { color: var(--texto); font-size: 0.94rem; }
  .caja .ver { margin-top: auto; padding-top: 0.6rem; font-weight: 600; font-size: 0.9rem; color: var(--verde-texto); text-decoration: none; }
  .caja.gris { background: var(--tarjeta); }
  .banda-oscura { border-radius: var(--radio-l); padding: clamp(1.8rem, 5vw, 3.2rem); background: repeating-linear-gradient(135deg, rgba(184, 238, 108, 0.05) 0 1px, transparent 1px 8px), var(--bosque); color: var(--claro); display: flex; flex-direction: column; gap: 1.8rem; }
  .banda-oscura h2 { color: var(--claro); }
  .banda-oscura h2 em { color: var(--lima); }
  .banda-oscura .texto { color: var(--claro-texto); }
  .banda-oscura .marcador { color: var(--claro-rotulo); }
  .banda-oscura .marcador::before { background: var(--lima); }
  .trabajos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #2c5a41; border: 1px solid #2c5a41; border-radius: 1rem; overflow: hidden; }
  @media (max-width: 860px) { .trabajos { grid-template-columns: 1fr; } }
  .trabajo { background: var(--bosque); padding: 1.3rem; display: flex; flex-direction: column; gap: 0.35rem; }
  .trabajo b { font-weight: 600; color: var(--claro); }
  .trabajo span { color: var(--claro-texto); font-size: 0.9rem; }
  .etapas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
  @media (max-width: 860px) { .etapas { grid-template-columns: 1fr; } }
  .etapa-caja { border-radius: var(--radio-m); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; border: 1px solid var(--linea); background: var(--blanco); }
  .etapa-caja .etapa { width: fit-content; font-size: 0.66rem; }
  .etapa-caja h3 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; }
  .etapa-caja p { color: var(--texto); font-size: 0.93rem; }
  .etapa-caja em { font-style: normal; font-family: var(--mono); font-size: 0.72rem; color: var(--texto-suave); }
  .faq-titulo { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; margin-bottom: 2rem; text-align: center; }
  .faq-grupo { max-width: 50rem; margin: 0 auto 2.2rem; }
  .faq-grupo h3 { font-family: var(--mono); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 0.7rem; }
  .foto-equipo { border-radius: var(--radio-l); min-height: 22rem; border: 1.5px dashed var(--linea-fuerte); background: repeating-linear-gradient(135deg, rgba(21, 54, 38, 0.035) 0 1px, transparent 1px 8px), var(--tarjeta); display: grid; place-items: center; text-align: center; padding: 2rem; color: var(--texto); }
  .foto-equipo > div > b:first-child { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--tinta); margin-bottom: 0.3rem; }

  /* Tarjetas pequeñas de interfaz */
  .mensaje { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.6rem; align-items: start; }
  .mensaje .av { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.7rem; font-weight: 600; color: #fff; }
  .mensaje p { font-size: 0.78rem; line-height: 1.45; color: var(--tinta); }
  .mensaje small { display: block; font-family: var(--mono); font-size: var(--rotulo-min); color: var(--texto-suave); margin-bottom: 0.15rem; }
  .secuencia { display: flex; flex-direction: column; gap: 0.1rem; }
  .toque { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; padding: 0.42rem 0; border-bottom: 1px solid #f0f2ed; font-size: 0.78rem; }
  .toque:last-child { border-bottom: 0; }
  .toque .ico { width: 1.6rem; height: 1.6rem; border-radius: 0.4rem; display: grid; place-items: center; font-size: 0.62rem; font-weight: 600; color: #fff; }
  .toque small { font-family: var(--mono); font-size: var(--rotulo-min); color: var(--texto-suave); }
  .perfil { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
  .keyword { display: grid; grid-template-columns: minmax(0, 1fr) 3.4rem 3rem; gap: 0.5rem; align-items: center; padding-block: 0.35rem; border-bottom: 1px solid #f0f2ed; font-size: 0.78rem; }
  .keyword:last-child { border-bottom: 0; }
  .keyword b, .keyword em { font-family: var(--mono); font-weight: 400; font-style: normal; font-size: 0.7rem; text-align: right; font-variant-numeric: tabular-nums; }
  .keyword em { color: var(--naranja); }
  .keyword.cabeza-k { font-family: var(--mono); font-size: var(--rotulo-min); letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-suave); }
  .borrador .l { display: block; height: 5px; border-radius: 3px; background: #edf0ea; }
  .borrador .l.corta { width: 62%; }
  .borrador h4 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.05rem; line-height: 1.2; }

  .boton-acceso svg { width: 0.7rem; height: 0.7rem; transition: transform 150ms ease; }
  .boton-acceso[aria-expanded="true"] svg { transform: rotate(180deg); }
  .esports h1 em { color: var(--menta-noche); }

  /* Iconos de las herramientas */
  .herramienta img { width: 1.1rem; height: 1.1rem; display: block; }
  .herramientas.izquierda { justify-content: flex-start; }
  .herramientas.izquierda .herramienta { background: var(--blanco); font-size: 0.84rem; padding: 0.38rem 0.8rem; }

  /* La órbita: las IA giran alrededor de ALLER.IA */
  .orbita-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  @media (max-width: 900px) { .orbita-grid { grid-template-columns: 1fr; } }
  .orbita-grid .lado { display: flex; flex-direction: column; gap: 1.2rem; }
  .orbita { position: relative; width: min(34rem, 100%); max-width: 100%; aspect-ratio: 1; margin-inline: auto; container-type: inline-size; }
  .aro { position: absolute; border-radius: 50%; border: 1px dashed var(--linea-fuerte); }
  .aro-1 { inset: 23%; }
  .aro-2 { inset: 3%; }
  .onda { position: absolute; inset: 36%; border-radius: 50%; border: 1px solid rgba(47, 143, 91, 0.35); animation: onda 4s ease-out infinite; }
  .onda.o2 { animation-delay: 2s; }
  @keyframes onda { from { transform: scale(1); opacity: 0.8; } to { transform: scale(2.1); opacity: 0; } }
  .centro { position: absolute; inset: 36%; border-radius: 50%; background: var(--blanco); border: 1px solid var(--linea); box-shadow: 0 30px 60px -30px rgba(21, 54, 38, 0.55); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2cqw; z-index: 2; }
  .centro img { width: 44%; height: auto; }
  .centro .nombre { font-size: 3.2cqw; letter-spacing: 0.1em; }
  .giro { position: absolute; inset: 0; animation: girar var(--dur) linear infinite; }
  .giro-1 { --dur: 46s; --r: 27cqw; }
  .giro-2 { --dur: 46s; --r: 47cqw; } /* gira junto con .giro-1: las posiciones entre anillos no cambian y los nombres no se cruzan con los íconos */
  @keyframes girar { to { transform: rotate(360deg); } }
  .sat { position: absolute; left: 50%; top: 50%; width: 12cqw; height: 12cqw; margin: -6cqw 0 0 -6cqw; transform: rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a))); }
  .sat .ficha { width: 100%; height: 100%; animation: girar var(--dur) linear infinite reverse; display: flex; flex-direction: column; align-items: center; }
  .sat .circulo { width: 100%; height: 100%; flex: none; border-radius: 50%; background: var(--blanco); border: 1px solid var(--linea); box-shadow: 0 14px 28px -16px rgba(21, 54, 38, 0.5); display: grid; place-items: center; transition: transform 200ms ease; }
  .sat .circulo img { width: 52%; height: 52%; }
  .sat small { margin-top: 0.5cqw; font-family: var(--mono); font-size: max(var(--rotulo-min), 2.1cqw); line-height: 1.25; color: var(--texto); white-space: nowrap; }
  .orbita:hover .giro, .orbita:hover .ficha { animation-play-state: paused; }
  .sat:hover .circulo { transform: scale(1.12); }
  @media (max-width: 460px) { .sat small { display: none; } }

  /* Un poco de vida en la portada */
  .chat .burbuja, .chat .hallazgo { animation: entrar 600ms cubic-bezier(.2,.7,.2,1) both; }
  .chat .burbuja.ia { animation-delay: 500ms; }
  .chat .hallazgo { animation-delay: 1100ms; }
  @keyframes entrar { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @property --pct { syntax: "<number>"; inherits: true; initial-value: 22; }
  .hallazgo .anillo { animation: llenar 1400ms 1300ms ease-out both; }
  @keyframes llenar { from { --pct: 0; } }

  [hidden] { display: none !important; }
  /* ── Propuesta 6: un movimiento propio en cada página ── */
  @keyframes pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(47, 143, 91, 0.5); } 50% { box-shadow: 0 0 0 5px rgba(47, 143, 91, 0); } }
  @keyframes revelar { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes llenar-barra { from { width: 0; } }
  .vivo { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--verde-texto) !important; }
  .vivo i { width: 6px; height: 6px; border-radius: 50%; background: var(--verde); animation: pulso 1.6s infinite; }

  /* AEO: un escáner recorre la escena y las IA van rotando */
  .escaner { position: absolute; left: 0; right: 0; top: -35%; height: 35%; background: linear-gradient(transparent, rgba(47, 143, 91, 0.18), transparent); animation: escanear 5s linear infinite; pointer-events: none; }
  @keyframes escanear { to { top: 100%; } }
  .en-vivo { display: inline-flex; align-items: center; gap: 0.45rem; width: fit-content; background: var(--blanco); border: 1px solid var(--linea); border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.8rem; box-shadow: 0 10px 24px -16px rgba(21, 54, 38, 0.5); }
  .en-vivo i { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); animation: pulso 1.6s infinite; }
  .rota { display: inline-block; height: 1.3em; line-height: 1.3em; overflow: hidden; vertical-align: bottom; font-weight: 600; }
  .rota .lista { display: block; animation: rotar 4s infinite; }
  .rota .lista span { display: block; }
  /* Solo ChatGPT y Gemini: son las IA que hoy mide la plataforma (la lista repite ChatGPT al final para el ciclo) */
  @keyframes rotar { 0%, 45% { transform: translateY(0); } 50%, 95% { transform: translateY(-1.3em); } 100% { transform: translateY(-2.6em); } }
  .escena-aeo .barra { animation: revelar 900ms ease-out both; }
  .escena-aeo .fila-rank:nth-child(2) .barra { animation-delay: 150ms; }
  .escena-aeo .fila-rank:nth-child(3) .barra { animation-delay: 300ms; }
  .escena-aeo .fila-rank:nth-child(4) .barra { animation-delay: 450ms; }
  .escena-aeo .cita-fila { animation: entrar 500ms both; }
  .escena-aeo .cita-fila:nth-child(1) { animation-delay: 700ms; }
  .escena-aeo .cita-fila:nth-child(2) { animation-delay: 850ms; }
  .escena-aeo .cita-fila:nth-child(3) { animation-delay: 1000ms; }
  .rondas .celda { animation: pop 350ms both; animation-delay: calc(var(--i, 0) * 45ms); }

  /* SEO: el mapa se arma, el artículo se escribe y la posición sube */
  .escena-seo .pregunta-fila { animation: entrar 500ms both; }
  .escena-seo .pregunta-fila:nth-child(1) { animation-delay: 200ms; }
  .escena-seo .pregunta-fila:nth-child(2) { animation-delay: 400ms; }
  .escena-seo .pregunta-fila:nth-child(3) { animation-delay: 600ms; }
  .escena-seo .pregunta-fila:nth-child(4) { animation-delay: 800ms; }
  .escena-seo .borrador .l { animation: revelar 900ms ease-out both; }
  .escena-seo .borrador .l:nth-of-type(1) { animation-delay: 1100ms; }
  .escena-seo .borrador .l:nth-of-type(2) { animation-delay: 1500ms; }
  .escena-seo .borrador .l:nth-of-type(3) { animation-delay: 1900ms; }
  .curva { display: grid; gap: 0.25rem; margin-top: 0.4rem; }
  .curva svg { width: 100%; height: 3rem; display: block; overflow: visible; }
  .curva polyline { fill: none; stroke: var(--verde); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: dibujar 6s ease-out infinite; vector-effect: non-scaling-stroke; }
  .curva circle { fill: var(--verde); animation: aparecer-punto 6s ease-out infinite; }
  /* @keyframes dibujar: definido una sola vez, en extra4.css (con pathLength 100) */
  @keyframes aparecer-punto { 0%, 40% { opacity: 0; } 48%, 88% { opacity: 1; } 100% { opacity: 0; } }
  .curva span { display: flex; justify-content: space-between; font-family: var(--mono); font-size: var(--rotulo-min); color: var(--texto-suave); }
  .curva span b { color: var(--verde-texto); font-weight: 500; }

  /* Prospección: actividad en vivo y el tablero del equipo */
  .feed { position: relative; height: 2.3rem; }
  .evento { position: absolute; inset: 0; display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); gap: 0.6rem; align-items: center; font-size: 0.8rem; line-height: 1.3; opacity: 0; animation: evento 12s infinite; }
  .evento:nth-child(2) { animation-delay: 3s; }
  .evento:nth-child(3) { animation-delay: 6s; }
  .evento:nth-child(4) { animation-delay: 9s; }
  .evento .ico { width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 0.62rem; font-weight: 600; }
  .evento .ico svg { width: 0.95rem; height: 0.95rem; }
  .evento b { font-weight: 600; }
  @keyframes evento { 0% { opacity: 0; transform: translateY(8px); } 3%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(-8px); } }
  .visibilidad { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-l); padding: clamp(1.4rem, 4vw, 3rem); box-shadow: var(--sombra-tarjeta); }
  @media (max-width: 900px) { .visibilidad { grid-template-columns: 1fr; } }
  .visibilidad .lado { display: flex; flex-direction: column; gap: 1.1rem; }
  .tablero-caja { position: relative; padding-top: 2.8rem; }
  .logro { position: absolute; top: 0; right: 0.6rem; max-width: calc(100% - 0.6rem); display: flex; align-items: center; gap: 0.6rem; background: #fdf6e6; border: 1px solid #ecd49a; border-radius: 0.8rem; padding: 0.5rem 0.85rem 0.5rem 0.5rem; box-shadow: 0 18px 34px -20px rgba(120, 85, 20, 0.6); z-index: 2; animation: logro 7s ease-in-out infinite; }
  .logro .trofeo { flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--oro); color: #fff; display: grid; place-items: center; }
  .logro .trofeo svg { width: 1.05rem; height: 1.05rem; }
  .logro b { display: block; font-size: 0.82rem; font-weight: 600; }
  .logro small { display: block; font-family: var(--mono); font-size: var(--rotulo-min); color: var(--oro-texto); }
  @keyframes logro { 0% { opacity: 0; transform: translateY(-8px) scale(0.96); } 7%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-8px) scale(0.96); } }
  .meta-equipo { display: grid; gap: 0.4rem; padding-bottom: 0.7rem; border-bottom: 1px solid #f0f2ed; }
  .meta-equipo .fila { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.82rem; }
  .meta-equipo .fila b { font-family: var(--mono); font-weight: 500; }
  .barra-meta { height: 0.6rem; border-radius: 999px; background: #edf0ea; overflow: hidden; }
  .barra-meta i { display: block; height: 100%; border-radius: 999px; background: var(--verde); animation: llenar-barra 1.6s 200ms ease-out both; }
  .sdr { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 7.2rem; gap: 0.7rem; align-items: center; padding-block: 0.5rem; border-bottom: 1px solid #f0f2ed; }
  .sdr:last-child { border-bottom: 0; }
  .sdr .av { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 0.66rem; font-weight: 600; }
  .sdr .datos { display: flex; flex-direction: column; gap: 0.28rem; min-width: 0; }
  .sdr .datos > span { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.1rem 0.5rem; font-size: 0.8rem; font-weight: 600; }
  .sdr .datos > span small { font-family: var(--mono); font-weight: 400; font-size: var(--rotulo-min); color: var(--texto-suave); white-space: nowrap; }
  .riel-meta { height: 0.45rem; border-radius: 999px; background: #edf0ea; overflow: hidden; }
  .riel-meta i { display: block; height: 100%; border-radius: 999px; background: var(--verde); animation: llenar-barra 1.4s ease-out both; }
  .sdr:nth-child(3) .riel-meta i { animation-delay: 150ms; }
  .sdr:nth-child(4) .riel-meta i { animation-delay: 300ms; }
  .sdr:nth-child(5) .riel-meta i { animation-delay: 450ms; }
  .sdr.en-meta .riel-meta i { background: var(--oro); }
  .estado { justify-self: end; font-family: var(--mono); font-size: var(--rotulo-min); padding: 0.18rem 0.5rem; border-radius: 999px; background: #f1f3ee; color: var(--texto); white-space: nowrap; }
  .estado.oro { background: rgba(184, 134, 43, 0.16); color: #7d5812; font-weight: 500; }
  @media (max-width: 520px) { .sdr { grid-template-columns: 2rem minmax(0, 1fr); } .estado { grid-column: 2; justify-self: start; } .logro { position: static; margin-bottom: 0.7rem; } .tablero-caja { padding-top: 0; } }

  /* Cómo trabajamos: el avance recorre los cuatro pasos */
  .pasos-h li { position: relative; }
  .pasos-h li::after { content: ""; position: absolute; top: -2px; left: 0; height: 2px; width: 0; background: var(--bosque); animation: avance 8s infinite; }
  .pasos-h li:nth-child(2)::after { animation-delay: 2s; }
  .pasos-h li:nth-child(3)::after { animation-delay: 4s; }
  .pasos-h li:nth-child(4)::after { animation-delay: 6s; }
  @keyframes avance { 0% { width: 0; opacity: 1; } 22% { width: 100%; opacity: 1; } 90% { width: 100%; opacity: 1; } 100% { width: 100%; opacity: 0; } }

  /* Blog: las rayas de las portadas avanzan despacio */
  .articulo .portadilla { animation: rayas 26s linear infinite; }
  @keyframes rayas { to { background-position: 160px 0, 0 0; } }

  /* Preguntas y contacto: el rastro de huellas de Alleria */
  .rastro { position: relative; height: 2.2rem; width: min(15rem, 100%); }
  .centrado-rastro { margin-inline: auto; }
  .rastro i { position: absolute; width: 16px; height: 16px; background: var(--verde); -webkit-mask: var(--huella) center / contain no-repeat; mask: var(--huella) center / contain no-repeat; opacity: 0; transform: rotate(90deg); animation: pisar 4.8s infinite; }
  @keyframes pisar { 0% { opacity: 0; } 8%, 55% { opacity: 0.55; } 75%, 100% { opacity: 0; } }

  /* ── Esports: los cuatro elementos de NPG y sus personajes ── */
  .esports { position: relative; }
  .esports > .lado, .esports > .ficha-npg { position: relative; z-index: 1; }
  .ficha-npg .logo-npg { animation: brillo 8s ease-in-out infinite; }
  @keyframes brillo { 0%, 100% { box-shadow: 0 0 34px -6px rgba(95, 184, 240, 0.8); } 25% { box-shadow: 0 0 34px -6px rgba(224, 69, 58, 0.8); } 50% { box-shadow: 0 0 34px -6px rgba(87, 199, 94, 0.8); } 75% { box-shadow: 0 0 34px -6px rgba(200, 204, 208, 0.7); } }

  .cuatro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }
  @media (max-width: 860px) { .cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 420px) { .cuatro { grid-template-columns: 1fr; } }
  .elemento { position: relative; overflow: hidden; border-radius: var(--radio-m); background: var(--noche); color: var(--claro); padding: 1.3rem; min-height: 11rem; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.25rem; border: 1px solid var(--noche-linea); transition: transform 200ms ease, border-color 200ms ease; }
  .elemento:hover { transform: translateY(-3px); border-color: var(--color); }
  .elemento::before { content: ""; position: absolute; inset: auto -30% -60% -30%; height: 90%; background: radial-gradient(closest-side, var(--color), transparent); opacity: 0.28; animation: respirar 4s ease-in-out infinite; }
  @keyframes respirar { 50% { opacity: 0.5; transform: scale(1.1); } }
  .elemento b { position: relative; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--claro); }
  .elemento span { position: relative; font-size: 0.86rem; color: var(--claro-texto); }
  .elemento .mini { position: absolute; top: 1.1rem; left: 1.2rem; width: 2.4rem; height: 2.4rem; }
  .elemento .mini i { position: absolute; }

  .personajes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
  @media (max-width: 900px) { .personajes { grid-template-columns: 1fr; } }
  .personaje { background: var(--noche); color: var(--claro); border-radius: var(--radio-m); overflow: hidden; border: 1px solid var(--noche-linea); display: flex; flex-direction: column; transition: transform 200ms ease; }
  .personaje:hover { transform: translateY(-3px); }
  .personaje .arte { position: relative; aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; }
  .personaje .info { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.35rem; }
  .personaje .info .tipo-p { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lima); }
  .personaje .info b { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; color: var(--claro); line-height: 1.1; }
  .personaje .info span { color: var(--claro-texto); font-size: 0.9rem; }
  /* Arte de Ness: destellos psíquicos y una pelota que rebota */
  .arte-ness { background: radial-gradient(60% 80% at 30% 30%, rgba(255, 94, 160, 0.35), transparent 60%), radial-gradient(60% 80% at 80% 70%, rgba(95, 184, 240, 0.35), transparent 60%), repeating-linear-gradient(0deg, #1d2a6b 0 14px, #243a8c 14px 28px); }
  .destello { position: absolute; width: 18px; height: 18px; background: #ffe066; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: titilar 2.4s ease-in-out infinite; }
  @keyframes titilar { 0%, 100% { transform: scale(0.3) rotate(0); opacity: 0.2; } 50% { transform: scale(1.1) rotate(90deg); opacity: 1; } }
  .pelota { position: absolute; left: 44%; bottom: 14%; width: 30px; height: 30px; border-radius: 50%; background: #f7f3ea; box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.12); animation: rebotar 1.1s cubic-bezier(.5, 0, .5, 1) infinite alternate; }
  .pelota::before, .pelota::after { content: ""; position: absolute; top: 3px; bottom: 3px; width: 8px; border: 2px solid #e0453a; border-color: transparent #e0453a transparent transparent; border-radius: 50%; }
  .pelota::before { left: 1px; transform: scaleX(-1); }
  .pelota::after { right: 1px; }
  .sombra-p { position: absolute; left: calc(44% + 3px); bottom: 10%; width: 24px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, 0.35); animation: sombra 1.1s cubic-bezier(.5, 0, .5, 1) infinite alternate; }
  @keyframes rebotar { from { transform: translateY(-58px); } to { transform: translateY(0); } }
  @keyframes sombra { from { transform: scale(0.5); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }
  /* Arte de Donkey Kong: la selva y un barril que rueda */
  .arte-dk { background: radial-gradient(70% 60% at 50% 0%, rgba(87, 199, 94, 0.28), transparent 70%), linear-gradient(#1f3a1f, #2b2416 70%, #3b2a17); }
  .arte-dk .suelo { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: repeating-linear-gradient(90deg, #5a3b1c 0 22px, #4a3016 22px 44px); border-top: 3px solid #7a5427; }
  .barril { position: absolute; bottom: 22%; left: -60px; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #9a6431 0 34%, #6e4420 35% 42%, #9a6431 43% 62%, #6e4420 63% 70%, #8a5a2b 71%); border: 3px solid #4a2d12; animation: rodar 4.5s linear infinite; }
  @keyframes rodar { from { left: -60px; transform: rotate(0); } to { left: calc(100% + 10px); transform: rotate(720deg); } }
  .liana { position: absolute; top: 0; width: 3px; background: linear-gradient(#57c75e, #2d6b31); transform-origin: top center; animation: mecer 3s ease-in-out infinite alternate; }
  @keyframes mecer { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
  /* Y los demás */
  .arte-mas { background: radial-gradient(50% 60% at 25% 40%, rgba(95, 184, 240, 0.3), transparent 70%), radial-gradient(50% 60% at 75% 40%, rgba(224, 69, 58, 0.3), transparent 70%), radial-gradient(50% 60% at 50% 90%, rgba(87, 199, 94, 0.3), transparent 70%), var(--noche-2); display: grid; place-items: center; }
  .ruleta { display: flex; gap: 0.6rem; }
  .ruleta i { width: 2.6rem; height: 2.6rem; border-radius: 0.6rem; border: 1px solid var(--noche-linea); background: rgba(255, 255, 255, 0.04); display: grid; place-items: center; font-style: normal; font-family: var(--mono); font-size: 0.9rem; color: var(--claro-rotulo); animation: seleccionar 3.2s infinite; }
  .ruleta i:nth-child(2) { animation-delay: 0.8s; }
  .ruleta i:nth-child(3) { animation-delay: 1.6s; }
  .ruleta i:nth-child(4) { animation-delay: 2.4s; }
  @keyframes seleccionar { 0%, 30%, 100% { border-color: var(--noche-linea); transform: none; } 8%, 22% { border-color: var(--lima); transform: translateY(-4px); box-shadow: 0 0 18px -4px rgba(184, 238, 108, 0.6); } }

  @media (prefers-reduced-motion: reduce) {
    .evento:first-child, .logro { opacity: 1 !important; }
    .rastro i { opacity: 0.9 !important; }
    .curva polyline { stroke-dashoffset: 0; }
    .curva circle { opacity: 1; }
    .barril { left: 40%; }
  }

  /* ── Revisión ── */
  .orbita-seccion { overflow-x: clip; }
  @media (min-width: 981px) { .portada-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
  .portada h1 { font-size: clamp(2.5rem, 4.8vw, 4rem); }
  .detalle .rondas { min-width: 25rem !important; }
  .detalle .rondas td.preg { max-width: 10.5rem; font-size: 0.72rem; }
  .detalle .rondas .celda { width: 1.1rem; height: 1.1rem; background-size: 0.7rem; }
  .detalle .rondas th { padding-inline: 0.1rem; }

  /* ── Revisión 2: NPG con más vida, la curva y el trofeo ── */
  .curva polyline { stroke-dasharray: 100; stroke-dashoffset: 100; vector-effect: none; }
  @keyframes dibujar { 0% { stroke-dashoffset: 100; opacity: 1; } 45%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

  .banda-esports { position: relative; overflow: hidden; }
  .banda-esports > img, .banda-esports > div:not(.elementos), .banda-esports > a { position: relative; z-index: 1; }

  /* Las cuatro tarjetas de elementos */
  .elemento { min-height: 16rem; padding: 1.3rem; }
  .elemento::before { opacity: 0.22; }
  .escena-el { position: absolute; inset: 0 0 34% 0; overflow: hidden; }
  .ola { position: absolute; bottom: 0; left: 0; width: 200%; height: 45%; fill: rgba(95, 184, 240, 0.4); animation: ola 5s linear infinite; }
  .ola.o2 { height: 62%; fill: rgba(95, 184, 240, 0.18); animation-duration: 8s; animation-direction: reverse; }
  @keyframes ola { to { transform: translateX(-50%); } }
  .burbuja-el { position: absolute; bottom: 12%; width: 7px; height: 7px; border: 1.5px solid rgba(170, 220, 250, 0.9); border-radius: 50%; opacity: 0; animation: burbuja 3.2s ease-in infinite; }
  @keyframes burbuja { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-95px) translateX(6px); opacity: 0; } }
  .llama { position: absolute; bottom: 14%; width: 56px; height: 56px; margin-left: -28px; border-radius: 50% 0 50% 50%; background: radial-gradient(circle at 62% 38%, #fff1b8 0 12%, #ffb04a 32%, #e0453a 66%, rgba(224, 69, 58, 0.2) 100%); box-shadow: 0 0 30px rgba(224, 69, 58, 0.55); transform: rotate(-45deg) scale(var(--s)); animation: llama 0.9s ease-in-out infinite alternate; }
  @keyframes llama { from { transform: rotate(-45deg) scale(var(--s)); } to { transform: rotate(-38deg) scale(calc(var(--s) * 1.14)) translate(-2px, -2px); } }
  .brote { position: absolute; left: 50%; bottom: 8%; width: 3px; height: 64%; transform-origin: bottom center; animation: mecer-b 3s ease-in-out infinite alternate; }
  @keyframes mecer-b { from { transform: translateX(-50%) rotate(-5deg); } to { transform: translateX(-50%) rotate(5deg); } }
  .tallo { position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(#57c75e, #2d6b31); }
  .hojita { position: absolute; width: 30px; height: 15px; background: #57c75e; border-radius: 0 100% 0 100%; box-shadow: 0 0 12px rgba(87, 199, 94, 0.45); }
  .hojita.h1 { left: 3px; top: 24%; transform-origin: left center; animation: hoja-d 2.4s ease-in-out infinite alternate; }
  .hojita.h2 { right: 3px; top: 50%; transform-origin: right center; animation: hoja-i 2.8s ease-in-out infinite alternate; }
  .hojita.h3 { left: -8px; top: -12px; width: 20px; height: 11px; transform-origin: center bottom; animation: hoja-d 2s ease-in-out infinite alternate; }
  @keyframes hoja-d { from { transform: rotate(-12deg); } to { transform: rotate(-34deg); } }
  @keyframes hoja-i { from { transform: scaleX(-1) rotate(-12deg); } to { transform: scaleX(-1) rotate(-34deg); } }
  .viento-svg { position: absolute; left: 8%; top: 10%; width: 84%; height: 84%; }
  .viento-svg path { fill: none; stroke: rgba(220, 224, 228, 0.9); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 34 100; stroke-dashoffset: 134; animation: rafaga-svg 2.6s ease-in-out infinite; }
  @keyframes rafaga-svg { to { stroke-dashoffset: 0; } }

  /* Personajes al estilo de la pantalla de selección */
  .arte-smash { background: radial-gradient(80% 100% at 72% 45%, color-mix(in srgb, var(--c2) 50%, transparent), transparent 65%), var(--c1); isolation: isolate; }
  .corte { position: absolute; top: -20%; bottom: -20%; right: 12%; width: 26%; background: linear-gradient(var(--c2), var(--c3)); transform: skewX(-16deg); opacity: 0.85; box-shadow: 0 0 44px color-mix(in srgb, var(--c2) 70%, transparent); z-index: -1; animation: corte 3s ease-in-out infinite alternate; }
  @keyframes corte { to { right: 16%; opacity: 1; } }
  .gigante { position: absolute; left: 0; top: 50%; display: flex; white-space: nowrap; font-family: var(--sans); font-weight: 700; font-style: italic; font-size: clamp(3.6rem, 7vw, 5.4rem); line-height: 1; letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.2); transform: translateY(-50%); z-index: -1; animation: desfile 16s linear infinite; }
  .gigante span { padding-right: 0.3em; }
  @keyframes desfile { from { transform: translate(0, -50%); } to { transform: translate(-50%, -50%); } }
  .velocidad { position: absolute; left: 110%; height: 2px; width: 32%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65)); animation: velocidad 1.8s linear infinite; }
  @keyframes velocidad { to { left: -40%; } }
  .jugador { position: absolute; top: 0.8rem; left: 0.8rem; font-family: var(--mono); font-size: 0.66rem; font-weight: 500; padding: 0.15rem 0.5rem; border-radius: 0.3rem; background: color-mix(in srgb, var(--c2) 75%, #000); color: #fff; letter-spacing: 0.06em; }
  .arte-smash .pelota { left: 58%; }
  .arte-smash .sombra-p { left: calc(58% + 3px); }
  .arte-smash .suelo { background: repeating-linear-gradient(90deg, rgba(90, 59, 28, 0.9) 0 22px, rgba(74, 48, 22, 0.9) 22px 44px); }
  .arte-mas .ruleta i { font-size: 1.1rem; }
  .personaje .info .tipo-p { color: var(--c3); }

  @media (prefers-reduced-motion: reduce) {
    .burbuja-el { opacity: 0.8; }
    .viento-svg path { stroke-dashoffset: 0; stroke-dasharray: none; }
  }
  .llama { width: 46px; height: 46px; margin-left: -23px; bottom: 16%; transform: scale(var(--s)) scaleY(1.45) rotate(-45deg); transform-origin: 50% 80%; animation-name: llama2; }
  @keyframes llama2 { from { transform: scale(var(--s)) scaleY(1.45) rotate(-45deg); } to { transform: scale(calc(var(--s) * 1.1)) scaleY(1.62) rotate(-41deg); } }
  .rastro { height: 3rem; width: min(17rem, 100%); }
  .rastro i { width: 22px; height: 22px; transform: rotate(78deg); }
  .rastro i:nth-child(even) { transform: rotate(100deg); }
  /* Que ninguna columna se ensanche por una tabla con desplazamiento propio */
  .detalle > *, .hero-pagina .envoltura > *, .visibilidad > *, .orbita-grid > *, .juntos > *, .portada-grid > *, .contacto-grid > *, .bento > * { min-width: 0; }
  @media (max-width: 520px) { .hud3 .dato b { font-size: 1.05rem; } }

  /* ── Propuesta 7: contenidos para los dos canales ── */
  .canal { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-right: 0.2rem; }
  .canal.g { background: #4285f4; }
  .canal.ia { background: var(--verde); }
  .canal-titulo { display: flex; align-items: center; gap: 0.35rem; font-family: var(--mono); font-size: var(--rotulo-min); letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto); }
  .keyword em { color: var(--texto-suave); }
  .tabla .vol { font-family: var(--mono); font-size: 0.66rem; color: var(--texto-suave); margin-left: 0.3rem; }
  .curva { gap: 0.2rem; }
  .keyword { grid-template-columns: minmax(0, 1fr) 3.9rem 4.9rem; }

  /* Pit: plumas que caen y flechas de luz */
  .pluma { position: absolute; top: -12%; width: 7px; height: 20px; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; background: linear-gradient(#ffffff, #d8e6f5); box-shadow: 0 0 8px rgba(255, 255, 255, 0.5); opacity: 0; animation: pluma 4.2s ease-in-out infinite; }
  @keyframes pluma { 0% { top: -12%; opacity: 0; transform: rotate(-30deg) translateX(0); } 15% { opacity: 0.95; } 50% { transform: rotate(25deg) translateX(14px); } 85% { opacity: 0.9; } 100% { top: 100%; opacity: 0; transform: rotate(-20deg) translateX(-8px); } }
  .flecha-luz { position: absolute; left: -45%; width: 40%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, #f2c94c 60%, #fff8d6); box-shadow: 0 0 12px rgba(242, 201, 76, 0.9); animation: flecha-luz 2.2s cubic-bezier(.6, 0, .3, 1) infinite; }
  .flecha-luz::after { content: ""; position: absolute; right: -6px; top: -4px; border: 5.5px solid transparent; border-left: 8px solid #fff8d6; }
  @keyframes flecha-luz { 0% { left: -45%; opacity: 0; } 10% { opacity: 1; } 60%, 100% { left: 110%; opacity: 0; } }
  .jugador { letter-spacing: 0.02em; }

  /* Imagen del personaje, cuando está */
  .render { position: absolute; right: 3%; bottom: 0; height: 94%; max-width: 62%; object-fit: contain; object-position: bottom right; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55)); animation: render 3.2s ease-in-out infinite alternate; }
  @keyframes render { to { transform: translateY(-6px); } }
  .con-render .pelota, .con-render .sombra-p, .con-render .barril { display: none; }

  /* Próximo torneo */
  .torneo { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radio-l); background: radial-gradient(60% 120% at 85% 50%, rgba(184, 238, 108, 0.14), transparent 60%), var(--noche); color: var(--claro); padding: clamp(1.6rem, 4vw, 2.8rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; border: 1px solid var(--noche-linea); }
  @media (max-width: 640px) { .torneo { grid-template-columns: 1fr; } }
  .torneo .gigante { font-size: clamp(5rem, 12vw, 9rem); -webkit-text-stroke-color: rgba(255, 255, 255, 0.07); animation-duration: 28s; }
  .torneo-texto { display: flex; flex-direction: column; gap: 0.45rem; }
  .torneo-tag { background: rgba(255, 255, 255, 0.06); border-color: var(--noche-linea); color: var(--claro-rotulo); box-shadow: none; }
  .torneo-tag i { background: var(--lima); }
  .torneo-nombre { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(2.8rem, 6vw, 4.2rem); line-height: 1; color: var(--lima); }
  .torneo-fecha { font-size: 1.2rem; font-weight: 600; color: var(--claro); }
  .torneo-detalle { color: var(--claro-texto); }
  .torneo-jugadores { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
  .torneo-jugadores span { font-family: var(--mono); font-size: 0.7rem; padding: 0.3rem 0.65rem; border-radius: 999px; border: 1px solid var(--noche-linea); color: var(--claro-rotulo); background: rgba(11, 20, 15, 0.82); }
  .cuenta { width: 9.5rem; height: 9.5rem; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.1rem; border: 1px solid rgba(184, 238, 108, 0.45); background: rgba(184, 238, 108, 0.06); animation: cuenta 2.4s ease-in-out infinite; justify-self: center; }
  .cuenta b { font-family: var(--serif); font-weight: 400; font-size: 3.2rem; line-height: 1; color: var(--claro); }
  .cuenta span { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--claro-texto); max-width: 7rem; }
  @keyframes cuenta { 50% { box-shadow: 0 0 0 10px rgba(184, 238, 108, 0.06), 0 0 40px -6px rgba(184, 238, 108, 0.4); } }

  /* ── Propuesta 8: SEO y AEO, un flujo automatizado hasta la pauta editorial ── */
  @keyframes mc-cargar { from { width: 0; } to { width: 100%; } }
  @keyframes mc-subir { from { opacity: 0; transform: translateY(8px); } }
  @keyframes mc-crecer { from { transform: scaleX(0); } }
  @keyframes mc-ronda { 0%, 8% { opacity: 0.25; transform: scale(0.55); } 16%, 86% { opacity: 1; transform: none; } 100% { opacity: 0.25; transform: scale(0.55); } }
  @keyframes mc-escribir { 0%, 6% { clip-path: inset(0 100% 0 0); } 30%, 88% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 0); opacity: 0.4; } }
  @keyframes mc-chip { 0%, 30% { opacity: 0; transform: scale(0.6); } 40%, 90% { opacity: 1; transform: none; } 100% { opacity: 0.4; } }
  @keyframes mc-latido { 50% { box-shadow: 0 0 0 5px rgba(47, 143, 91, 0.12); } }

  /* (15-sep, tarde) Quedó el punto del equipo; el de la competencia se fue con la franja de fuentes */
  .mc-punto-equipo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bosque); vertical-align: middle; margin-right: 0.2rem; }
  .mc-rotulo { display: flex; align-items: center; gap: 0.35rem; font-family: var(--mono); font-size: var(--rotulo-min); letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto); }

  /* Cabecera: el tubo de etapas */
  .mc-escena .pila { width: min(28rem, 100%); }
  .mc-tubo .ui-cuerpo { gap: 0.15rem; }
  .mc-corte { margin-top: 0.45rem; padding-top: 0.55rem; border-top: 1px dashed var(--linea-fuerte); }
  .mc-tramo { display: grid; grid-template-columns: 1.15rem minmax(0, 1fr) auto; gap: 0.55rem; align-items: center; padding-block: 0.28rem; }
  .mc-tramo small { font-family: var(--mono); font-size: var(--rotulo-min); color: var(--texto); white-space: nowrap; }
  .mc-estado { width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 1.5px solid var(--linea-fuerte); display: grid; place-items: center; color: #fff; transition: background 250ms ease, border-color 250ms ease; }
  .mc-estado svg { width: 0.7rem; height: 0.7rem; opacity: 0; transition: opacity 200ms ease; }
  .mc-nombre { position: relative; font-size: 0.8rem; padding-bottom: 0.2rem; }
  .mc-carga { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; border-radius: 2px; background: var(--verde); }
  .mc-tramo:not(.mc-ahora):not(.mc-hecha) .mc-estado { opacity: 0.5; }
  .mc-tramo:not(.mc-ahora):not(.mc-hecha) .mc-nombre { color: var(--texto); }
  .mc-tramo.mc-ahora .mc-estado { border-color: var(--verde); animation: mc-latido 1.2s infinite ease-in-out; }
  .mc-tramo.mc-ahora .mc-nombre { font-weight: 600; }
  .mc-tramo.mc-ahora .mc-carga { animation: mc-cargar 1.5s linear both; }
  .mc-tramo.mc-hecha .mc-estado { background: var(--verde); border-color: var(--verde); }
  .mc-tramo.mc-hecha .mc-estado svg { opacity: 1; }
  .mc-mini-pauta .ficha-resultado { margin-top: 0; border-top: 0; padding-top: 0; }
  .mc-mini-pauta .l { animation: mc-escribir 7s ease-out infinite; }
  .mc-mini-pauta .l:nth-of-type(2) { animation-delay: 0.5s; }
  .mc-mini-pauta .l:nth-of-type(3) { animation-delay: 1s; }

  /* Los dos modos: automatizado con la tecnología, o personalizado con nuestro equipo */
  .mc-modos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
  @media (max-width: 820px) { .mc-modos { grid-template-columns: 1fr; } }
  .mc-modo { min-width: 0; border-radius: var(--radio-l); padding: clamp(1.4rem, 3.2vw, 2rem); display: flex; flex-direction: column; gap: 0.85rem; background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra-tarjeta); }
  .mc-modo h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.5vw, 1.95rem); line-height: 1.12; letter-spacing: -0.015em; }
  .mc-modo .checks li { font-size: 0.95rem; }
  .mc-cinta { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .mc-cinta i { height: 0.65rem; border-radius: 999px; background: #dfe6da; }
  .mc-cinta i.mc-on { background: var(--verde); }
  .mc-cinta-pie { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--texto); margin-top: -0.35rem; }
  .mc-pie { margin-top: auto; padding-top: 0.55rem; border-top: 1px solid var(--linea); font-weight: 600; font-size: 0.95rem; color: var(--tinta); }
  .mc-modo-equipo { background: repeating-linear-gradient(135deg, rgba(184, 238, 108, 0.05) 0 1px, transparent 1px 8px), var(--bosque); border-color: var(--bosque); color: var(--claro); }
  .mc-modo-equipo h3, .mc-modo-equipo .checks li, .mc-modo-equipo .mc-pie { color: var(--claro); }
  .mc-modo-equipo .marcador { color: var(--claro-rotulo); }
  .mc-modo-equipo .marcador::before { background: var(--lima); }
  .mc-modo-equipo .mc-cinta i { background: rgba(244, 248, 242, 0.22); }
  .mc-modo-equipo .mc-cinta i.mc-on { background: var(--lima); }
  .mc-modo-equipo .mc-cinta-pie { color: var(--claro-texto); }
  .mc-modo-equipo .mc-pie { border-top-color: rgba(244, 248, 242, 0.22); }

  /* El flujo en seis pasos */
  .mc-flujo { --tono: var(--verde); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; counter-reset: fase; }
  @media (max-width: 900px) { .mc-flujo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 520px) { .mc-flujo { grid-template-columns: 1fr; } }
  .mc-fase { position: relative; overflow: hidden; background: var(--blanco); border: 1px solid var(--linea); border-top: 4px solid var(--tono); border-radius: var(--radio-m); padding: 1.1rem 1.15rem 1.3rem; display: flex; flex-direction: column; gap: 0.4rem; transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease; }
  .mc-fase.mc-mixto { border-top-color: transparent; }
  .mc-fase.mc-mixto::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--verde) 50%, var(--bosque) 50%); }
  .mc-fase h3 { font-size: 1rem; }
  .mc-fase p { color: var(--texto); font-size: 0.88rem; line-height: 1.5; }
  .mc-n { width: 2rem; height: 2rem; border-radius: 0.55rem; border: 1px solid var(--linea); display: grid; place-items: center; font-family: var(--mono); font-size: 0.74rem; color: var(--tinta); transition: background 250ms ease, border-color 250ms ease; }
  .mc-n b { font-weight: 500; }
  .mc-n svg { display: none; width: 1rem; height: 1rem; color: #fff; }
  .mc-riel { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--tono); }
  .mc-fase.mc-mixto .mc-riel { background: var(--verde); }
  .mc-fase.mc-ahora { transform: translateY(-4px); border-color: var(--linea-fuerte); box-shadow: 0 22px 40px -28px rgba(21, 54, 38, 0.55); }
  .mc-fase.mc-ahora .mc-n { background: var(--bosque); border-color: var(--bosque); color: var(--lima); }
  .mc-fase.mc-ahora .mc-riel { animation: mc-cargar 2.3s linear both; }
  .mc-fase.mc-hecha .mc-n { background: var(--verde); border-color: var(--verde); }
  .mc-fase.mc-hecha .mc-n b { display: none; }
  .mc-fase.mc-hecha .mc-n svg { display: block; }
  .mc-vuelta { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1.3rem; text-align: center; font-size: 0.92rem; color: var(--tinta); }
  .mc-vuelta svg { flex: none; width: 1.2rem; height: 1.2rem; color: var(--verde); }
  .mc-flujo.mc-completo + .mc-vuelta svg { animation: girar 1.4s ease-in-out; }

  /* Módulos */
  .detalle .checks li b { font-weight: 600; }
  .mc-enlace { width: fit-content; font-weight: 600; font-size: 0.92rem; color: var(--verde-texto); text-decoration: none; }
  .mc-enlace:hover { text-decoration: underline; }
  .mc-resp { display: flex; flex-direction: column; gap: 0.35rem; padding-block: 0.45rem; border-bottom: 1px solid #f0f2ed; }
  .mc-resp-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; }
  .mc-resp-cabeza p { font-size: 0.78rem; line-height: 1.35; }
  .mc-rondas { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; max-width: 13rem; }
  .mc-rondas i { aspect-ratio: 1; border-radius: 3px; background: #edf0ea; animation: mc-ronda 6s infinite; animation-delay: calc(var(--k) * 0.18s); }
  .mc-rondas i.si { background: var(--verde); }
  .mc-hoy { width: fit-content; font-family: var(--mono); font-size: var(--rotulo-min); padding: 0.12rem 0.5rem; border-radius: 999px; }
  .mc-hoy.tu { background: rgba(47, 143, 91, 0.14); color: var(--verde-oscuro); }
  .mc-hoy.otro { background: rgba(212, 112, 59, 0.16); color: var(--naranja-oscuro); }
  .mc-hoy.nadie { background: #eef1ea; color: var(--tinta); }

  .mc-tema { display: flex; flex-direction: column; gap: 0.3rem; padding-block: 0.35rem; }
  .mc-tema-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.1rem 0.6rem; font-size: 0.78rem; }
  .mc-tema-cabeza b { font-weight: 600; }
  .mc-tema-cabeza small { font-family: var(--mono); font-size: var(--rotulo-min); color: var(--texto); }
  .mc-segmentos { display: flex; gap: 2px; height: 0.7rem; border-radius: 999px; overflow: hidden; }
  .mc-segmentos i { display: block; transform-origin: left center; animation: mc-crecer 900ms cubic-bezier(.2, .7, .2, 1) both; }
  .mc-segmentos i.tu { background: var(--verde); }
  .mc-segmentos i.nadie { background: #c9d2c4; animation-delay: 150ms; }
  .mc-segmentos i.otro { background: var(--naranja); animation-delay: 300ms; }
  .mc-orden { display: flex; flex-direction: column; gap: 0.3rem; }
  .mc-orden > div { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; gap: 0.55rem; align-items: center; padding: 0.4rem 0.55rem; border: 1px solid var(--linea); border-radius: 0.55rem; transition: background 250ms ease, border-color 250ms ease; }
  .mc-orden em { font-style: normal; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 0.66rem; background: var(--tarjeta); }
  .mc-orden span { font-size: 0.78rem; font-weight: 600; }
  .mc-orden small { font-family: var(--mono); font-size: var(--rotulo-min); color: var(--texto); text-align: right; }
  .mc-orden > div.mc-ahora { background: var(--menta); border-color: var(--verde); }
  .mc-orden > div.mc-ahora em { background: var(--verde-texto); color: #fff; }

  .mc-hechos { margin: 0; display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0.25rem 0.6rem; padding: 0.55rem 0.65rem; border-radius: 0.55rem; background: #f6f8f3; border: 1px solid #e8ece3; }
  .mc-hechos dt { font-family: var(--mono); font-size: var(--rotulo-min); letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto); align-self: center; }
  .mc-hechos dd { margin: 0; font-size: 0.76rem; font-weight: 500; }
  .mc-rotulo-ia { margin-top: 0.35rem; }
  .mc-guion { display: flex; flex-direction: column; gap: 0.35rem; }
  .mc-linea { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: 0.6rem; align-items: center; }
  .mc-linea b { font-size: 0.72rem; font-weight: 600; }
  .mc-linea .l { display: block; height: 6px; border-radius: 3px; background: #d2dccb; animation: mc-escribir 8s ease-out infinite; }
  .mc-linea .l.corta { width: 64%; }
  .mc-linea:nth-child(2) .l { animation-delay: 0.6s; }
  .mc-linea:nth-child(3) .l { animation-delay: 1.2s; }
  .mc-linea:nth-child(5) .l { animation-delay: 2.6s; }
  .mc-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
  .mc-chips i { font-style: normal; font-family: var(--mono); font-size: var(--rotulo-min); padding: 0.1rem 0.4rem; border-radius: 999px; background: var(--menta); color: var(--verde-oscuro); animation: mc-chip 8s ease-out infinite; }
  .mc-chips i:nth-child(1) { animation-delay: 1.6s; }
  .mc-chips i:nth-child(2) { animation-delay: 1.8s; }
  .mc-chips i:nth-child(3) { animation-delay: 2s; }
  .mc-chips i:nth-child(4) { animation-delay: 2.2s; }
  .mc-chips i:nth-child(5) { animation-delay: 2.4s; }

  .mc-comparar { gap: 0.9rem; }
  .mc-par { display: flex; flex-direction: column; gap: 0.35rem; }
  .mc-par + .mc-par { padding-top: 0.8rem; border-top: 1px solid #f0f2ed; }
  .mc-par p { font-size: 0.78rem; font-weight: 600; }
  .mc-rango { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 4.2rem; gap: 0.55rem; align-items: center; }
  .mc-rango small { font-family: var(--mono); font-size: var(--rotulo-min); color: var(--texto); }
  .mc-rango b { font-family: var(--mono); font-weight: 400; font-size: 0.66rem; text-align: right; font-variant-numeric: tabular-nums; }
  .mc-riel-r { position: relative; height: 0.6rem; border-radius: 999px; background: #edf0ea; }
  .mc-riel-r i { position: absolute; top: 0; bottom: 0; border-radius: 999px; transform-origin: left center; animation: mc-crecer 1s cubic-bezier(.2, .7, .2, 1) both; }
  .mc-rango.m1 .mc-riel-r i { background: rgba(47, 143, 91, 0.38); }
  .mc-rango.m2 .mc-riel-r i { background: var(--verde); animation-delay: 400ms; }
  .mc-veredicto { width: fit-content; font-family: var(--mono); font-size: var(--rotulo-min); padding: 0.14rem 0.5rem; border-radius: 999px; background: #eef1ea; color: var(--tinta); animation: mc-subir 500ms 1.1s both; }
  .mc-veredicto.si { background: rgba(47, 143, 91, 0.14); color: var(--verde-oscuro); }

  @media (max-width: 520px) {
    .mc-tramo small { display: none; }
    .mc-rango { grid-template-columns: 4.2rem minmax(0, 1fr) 3.6rem; gap: 0.4rem; }
    .mc-linea { grid-template-columns: 5.4rem minmax(0, 1fr); }
    .mc-hechos { grid-template-columns: 4.6rem minmax(0, 1fr); }
    .mc-orden small { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .mc-fase.mc-ahora { transform: none; }
    .mc-tramo { opacity: 1; }
  }

  /* ── Revisión 8: terminaciones que pidieron los auditores ── */
  /* Listas con check: sin una palabra sola en la última línea */
  .checks li { text-wrap: pretty; }
  /* Etiquetas largas: dos líneas parejas y, en celular, la píldora del ancho del texto */
  .etiqueta-larga { text-wrap: balance; }
  @media (max-width: 520px) { .hero-pagina .etiqueta-larga { max-width: 13.2rem; } }
  /* Paneles de reuniones: en celular el texto baja de línea en vez de cortarse */
  @media (max-width: 520px) { .reunion span { white-space: normal; overflow: visible; line-height: 1.3; } }
  /* Ranking de la IA: el nombre nunca queda cortado dentro de una barra corta */
  .fila-rank .barra { min-width: fit-content; }
  /* Tabla de rondas: una sombra en el borde avisa que se puede deslizar */
  .rondas-caja {
    background:
      linear-gradient(90deg, var(--blanco) 35%, rgba(255, 255, 255, 0)) left center / 2.2rem 100% no-repeat local,
      linear-gradient(270deg, var(--blanco) 35%, rgba(255, 255, 255, 0)) right center / 2.2rem 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(21, 54, 38, 0.2), rgba(21, 54, 38, 0)) left center / 0.8rem 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(21, 54, 38, 0.2), rgba(21, 54, 38, 0)) right center / 0.8rem 100% no-repeat scroll;
  }
  /* Menú móvil: el nombre con su letra, del tamaño del rótulo */
  .menu-movil .grupo .nombre { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: none; }
  /* Inicio, tarjetas de soluciones: los paneles de ejemplo con el mismo alto, a la misma altura; donde se corta, se desvanece */
  .t-tercio .asoma .ui { height: 9rem; -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }
  /* (17-sep, noche) Con dos soluciones en vez de tres, cada tarjeta pasó a media fila (t-media): mismo panel, mismo alto */
  .t-media .asoma .ui { height: 9rem; -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }
  /* Órbita de IA: cuando dos rótulos se cruzan al girar, cada uno conserva su fondo y se sigue leyendo */
  .sat small { position: relative; z-index: 1; padding: 0 0.35em; border-radius: 999px; background: rgba(246, 247, 243, 0.9); }
  /* Botones de la portada de cada página (17-sep): en un celular angosto el texto largo baja de línea en vez de salirse
     de la pantalla («Quiero más llamadas con quienes deciden» medía 350 px y a 320 y 360 px la página se corría de costado) */
  @media (max-width: 520px) { .portada-botones .boton { max-width: 100%; white-space: normal; text-align: center; } }
  /* ── NPG · los cuatro elementos ── */
  .npg-escena { position: absolute; inset: 0; container-type: size; pointer-events: none; }
  .npg-escena i, .npg-escena div { position: absolute; display: block; font-style: normal; }
  .npg-pausa, .npg-pausa *, .npg-pausa *::before, .npg-pausa *::after { animation-play-state: paused !important; }
  .npg-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; }
  .npg-svg * { transform-box: view-box; transform-origin: 0 0; }

  /* ─ Fuego (lienzo) ─ */
  .npg-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, #000 88%, transparent 100%); }
  /* Si el script no llega a correr, queda al menos el resplandor del fuego */
  .npg-fuego:not([data-npg-listo])::before { content: ""; position: absolute; left: 50%; bottom: 8%; width: 44%; height: 46%; translate: -50% 0; border-radius: 50% 50% 45% 45%; background: radial-gradient(50% 60% at 50% 78%, rgba(255, 214, 140, 0.55), rgba(255, 128, 50, 0.3) 45%, rgba(224, 69, 58, 0) 100%); }

  /* ─ Agua ─ */
  .npg-agua {
    --npg-m-ola6: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 12c33 -5.3 67 -5.3 100 0c33 5.3 67 5.3 100 0c33 -5.3 67 -5.3 100 0c33 5.3 67 5.3 100 0c33 -5.3 67 -5.3 100 0c33 5.3 67 5.3 100 0c33 -5.3 67 -5.3 100 0c33 5.3 67 5.3 100 0c33 -5.3 67 -5.3 100 0c33 5.3 67 5.3 100 0c33 -5.3 67 -5.3 100 0c33 5.3 67 5.3 100 0V100H0Z'/%3E%3C/svg%3E");
    --npg-m-ola4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 100' preserveAspectRatio='none'%3E%3Cpath d='M0 12c33 -8 67 -8 100 0c33 8 67 8 100 0c33 -8 67 -8 100 0c33 8 67 8 100 0c33 -8 67 -8 100 0c33 8 67 8 100 0c33 -8 67 -8 100 0c33 8 67 8 100 0V100H0Z'/%3E%3C/svg%3E");
    --npg-m-ola2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 12c33 -10.7 67 -10.7 100 0c33 10.7 67 10.7 100 0c33 -10.7 67 -10.7 100 0c33 10.7 67 10.7 100 0V100H0Z'/%3E%3C/svg%3E");
    --npg-m-cresta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 12c33 -10.7 67 -10.7 100 0c33 10.7 67 10.7 100 0c33 -10.7 67 -10.7 100 0c33 10.7 67 10.7 100 0' fill='none' stroke='%23000' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  }
  .npg-agua-reflejo { left: 50%; top: 34cqh; width: 150cqh; height: 44cqh; margin-left: -75cqh; border-radius: 50%; background: radial-gradient(closest-side, rgba(95, 184, 240, 0.26), rgba(95, 184, 240, 0)); animation: npg-agua-respira 5s ease-in-out infinite alternate; }
  @keyframes npg-agua-respira { to { opacity: 0.55; scale: 1.08 1; } }
  .npg-agua-ola { left: 0; bottom: 0; width: 200cqw; }
  .npg-agua-fondo { top: 42cqh; background: linear-gradient(rgba(95, 184, 240, 0.42), rgba(40, 110, 170, 0.16) 45%, rgba(20, 60, 100, 0) 90%); -webkit-mask: var(--npg-m-ola6) 0 0 / 100% 100% no-repeat; mask: var(--npg-m-ola6) 0 0 / 100% 100% no-repeat; animation: npg-agua-deriva 11s linear infinite; }
  .npg-agua-media { top: 49cqh; background: linear-gradient(rgba(110, 196, 245, 0.62), rgba(40, 120, 180, 0.28) 40%, rgba(20, 60, 100, 0) 88%); -webkit-mask: var(--npg-m-ola4) 0 0 / 100% 100% no-repeat; mask: var(--npg-m-ola4) 0 0 / 100% 100% no-repeat; animation: npg-agua-deriva 8s linear infinite reverse; }
  .npg-agua-frente { top: 57cqh; background: linear-gradient(rgba(150, 214, 250, 0.9), rgba(70, 160, 225, 0.62) 16%, rgba(30, 95, 150, 0.36) 55%, rgba(15, 50, 85, 0) 100%); -webkit-mask: var(--npg-m-ola2) 0 0 / 100% 100% no-repeat; mask: var(--npg-m-ola2) 0 0 / 100% 100% no-repeat; animation: npg-agua-deriva 6s linear infinite; }
  .npg-agua-cresta { top: 57cqh; overflow: hidden; background: repeating-linear-gradient(90deg, rgba(225, 244, 255, 0.15) 0, rgba(225, 244, 255, 0.9) 12cqw, rgba(225, 244, 255, 0.25) 26cqw, rgba(225, 244, 255, 0.75) 38cqw, rgba(225, 244, 255, 0.15) 50cqw); -webkit-mask: var(--npg-m-cresta) 0 0 / 100% 100% no-repeat; mask: var(--npg-m-cresta) 0 0 / 100% 100% no-repeat; animation: npg-agua-deriva 6s linear infinite; }
  @keyframes npg-agua-deriva { from { translate: 0 0; } to { translate: -100cqw 0; } }
  .npg-agua-destello { left: 0; top: 0; width: 44cqw; height: 30cqh; background: radial-gradient(closest-side, #ffffff, rgba(255, 255, 255, 0)); animation: npg-agua-destello 6s ease-in-out infinite; }
  @keyframes npg-agua-destello { 0% { translate: -40cqw 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { translate: 240cqw 0; opacity: 0; } }
  .npg-agua-titila { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; opacity: 0; animation: npg-agua-titila var(--t) ease-in-out var(--d) infinite; }
  .npg-agua-titila::before, .npg-agua-titila::after { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; margin-left: -0.5px; background: linear-gradient(rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0)); }
  .npg-agua-titila::after { rotate: 90deg; }
  @keyframes npg-agua-titila { 0%, 60%, 100% { opacity: 0; scale: 0.2; } 75% { opacity: 1; scale: 1; } }
  .npg-agua-impacto { left: var(--x); top: 0; width: 0; height: 100%; }
  .npg-agua-gota { left: -4.5px; top: 0; width: 9px; height: 30px; animation: npg-agua-cae var(--t) linear var(--d) infinite; }
  .npg-agua-gota::before { content: ""; position: absolute; left: 4px; bottom: 8px; width: 1px; height: 22px; background: linear-gradient(rgba(170, 220, 250, 0), rgba(170, 220, 250, 0.6)); }
  .npg-agua-gota::after { content: ""; position: absolute; left: 0.5px; bottom: 0; width: 8px; height: 8px; border-radius: 0 50% 50% 50%; rotate: 45deg; background: radial-gradient(circle at 62% 62%, #eaf7ff 0 16%, #8fd0f6 42%, #3a93d4 100%); box-shadow: 0 0 6px rgba(95, 184, 240, 0.65); }
  @keyframes npg-agua-cae { 0% { translate: 0 -30cqh; opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); } 28% { translate: 0 calc(var(--y) - 30px); opacity: 1; } 28.6%, 100% { translate: 0 calc(var(--y) - 30px); opacity: 0; } }
  .npg-agua-onda { left: 0; top: var(--y); width: calc(64cqh * var(--k, 1)); height: calc(13cqh * var(--k, 1)); translate: -50% -50%; border-radius: 50%; border: 1.5px solid rgba(205, 236, 255, 0.9); opacity: 0; scale: 0.05; animation: npg-agua-onda var(--t) cubic-bezier(0.2, 0.6, 0.35, 1) var(--d) infinite; }
  .npg-agua-onda + .npg-agua-onda { animation-name: npg-agua-onda2; }
  .npg-agua-onda + .npg-agua-onda + .npg-agua-onda { animation-name: npg-agua-onda3; }
  @keyframes npg-agua-onda { 0%, 28% { scale: 0.05; opacity: 0; } 29% { opacity: 0.95; } 100% { scale: 1; opacity: 0; } }
  @keyframes npg-agua-onda2 { 0%, 35% { scale: 0.05; opacity: 0; } 36% { opacity: 0.7; } 100% { scale: 0.74; opacity: 0; } }
  @keyframes npg-agua-onda3 { 0%, 42% { scale: 0.05; opacity: 0; } 43% { opacity: 0.5; } 100% { scale: 0.5; opacity: 0; } }
  .npg-agua-salpica { left: -1.5px; top: calc(var(--y) - 2px); width: 3px; height: 3px; border-radius: 50%; background: #d6efff; box-shadow: 0 0 4px rgba(150, 210, 250, 0.8); opacity: 0; animation: npg-agua-salpica var(--t) linear var(--d) infinite; }
  @keyframes npg-agua-salpica { 0%, 28% { translate: 0 0; opacity: 0; } 28.6% { translate: 0 0; opacity: 1; animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); } 35% { translate: calc(var(--sx) * 0.55) calc(var(--sy) * -1); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); } 42% { translate: var(--sx) 2px; opacity: 0.9; } 43%, 100% { translate: var(--sx) 2px; opacity: 0; } }
  .npg-agua-toque { left: 0; top: var(--y); width: calc(26px * var(--k, 1)); height: calc(7px * var(--k, 1)); translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(235, 248, 255, 0.95), rgba(95, 184, 240, 0)); opacity: 0; animation: npg-agua-toque var(--t) ease-out var(--d) infinite; }
  @keyframes npg-agua-toque { 0%, 28% { opacity: 0; scale: 0.4; } 29% { opacity: 1; scale: 1; } 40%, 100% { opacity: 0; scale: 1.6; } }
  .npg-agua-burbuja { left: var(--x); bottom: 2cqh; width: var(--s); height: var(--s); border-radius: 50%; border: 1px solid rgba(180, 225, 250, 0.6); background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%); opacity: 0; animation: npg-agua-burbuja var(--t) ease-in var(--d) infinite; }
  @keyframes npg-agua-burbuja { 0% { translate: 0 0; opacity: 0; } 15% { opacity: 0.8; } 50% { translate: 3px -12cqh; } 100% { translate: -2px -26cqh; opacity: 0; } }

/* Naturaleza */
.npg-na-crece { animation: npg-na-crece 1.5s cubic-bezier(.2, .8, .25, 1.1) both; }
@keyframes npg-na-crece { from { transform: scale(.3, 0); } }
.npg-na-planta { animation: npg-na-planta 5.2s ease-in-out infinite alternate; animation-delay: -2.6s; }
@keyframes npg-na-planta { from { transform: rotate(-2.6deg); } to { transform: rotate(2.6deg); } }
.npg-na-abre { animation: npg-na-abre .9s cubic-bezier(.3, 1.45, .5, 1) both; animation-delay: var(--d, .6s); }
@keyframes npg-na-abre { from { transform: scale(0) rotate(-50deg); } }
.npg-na-mece { animation: npg-na-mece var(--t, 3s) ease-in-out infinite alternate; animation-delay: var(--dm, 0s); }
@keyframes npg-na-mece { from { transform: rotate(calc(var(--a, 6) * -1deg)); } to { transform: rotate(calc(var(--a, 6) * 1deg)); } }
.npg-na-cae { opacity: .85; transform: translate(calc(var(--x) * .5px), calc(var(--q) * 1px)); animation: npg-na-cae var(--t) linear infinite; animation-delay: var(--d); }
@keyframes npg-na-cae { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .95; } 80% { opacity: .9; } 100% { transform: translate(calc(var(--x) * 1px), 128px); opacity: 0; } }
.npg-na-vaiven { animation: npg-na-vaiven 1.7s ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes npg-na-vaiven { from { transform: translateX(-10px) rotate(-38deg); } to { transform: translateX(10px) rotate(34deg); } }
.npg-na-gira { animation: npg-na-gira 1.15s ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes npg-na-gira { from { transform: scaleY(1); } to { transform: scaleY(-.55); } }
.npg-na-mota { opacity: .7; transform: translate(calc(var(--x) * .5px), calc(var(--q) * 1px)); animation: npg-na-mota var(--t) ease-out infinite; animation-delay: var(--d); }
@keyframes npg-na-mota { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: .95; } 100% { transform: translate(calc(var(--x) * 1px), -92px); opacity: 0; } }

  /* ─ Viento ─ */
  .npg-vi-luz { left: 50%; top: 4cqh; width: 170cqh; height: 92cqh; margin-left: -85cqh; border-radius: 50%; background: radial-gradient(closest-side, rgba(200, 204, 208, 0.11), rgba(200, 204, 208, 0.03) 55%, rgba(200, 204, 208, 0)); animation: npg-vi-respira 6s ease-in-out infinite alternate; }
  @keyframes npg-vi-respira { to { opacity: 0.5; scale: 1.08 1; } }
  .npg-vi-velo { left: -70cqw; top: var(--y); width: 70cqw; height: 42cqh; border-radius: 50%; background: radial-gradient(closest-side, rgba(200, 204, 208, 0.1), rgba(200, 204, 208, 0)); animation: npg-vi-velo var(--t) linear var(--d) infinite; }
  @keyframes npg-vi-velo { to { translate: 180cqw 0; } }
  .npg-vi-svg { -webkit-mask-image: linear-gradient(90deg, transparent, #000 13%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 13%, #000 90%, transparent); }
  /* Rizos del emblema: una guía tenue que respira */
  .npg-vi-guia { fill: none; stroke: #c8ccd0; stroke-width: 1.6; stroke-linecap: round; opacity: 0.28; animation: npg-vi-guia 5s ease-in-out var(--d, 0s) infinite; }
  @keyframes npg-vi-guia { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.36; } }
  /* Ráfaga afilada: cinco capas del mismo trazo con la cabeza alineada (de la cola fina a la punta clara); se estira en la recta y se disuelve en el rizo */
  .npg-vi-racha { fill: none; stroke-linecap: round; animation-duration: var(--t, 4s); animation-delay: var(--d, 0s); animation-timing-function: linear; animation-iteration-count: infinite; }
  .npg-vi-c1 { stroke: #c8ccd0; stroke-width: 0.7; stroke-opacity: 0.26; stroke-dasharray: 30 200; stroke-dashoffset: -18; animation-name: npg-vi-c1; }
  @keyframes npg-vi-c1 { 0% { stroke-dasharray: 0 200; stroke-dashoffset: 0; opacity: 0; } 10% { stroke-dasharray: 6 200; stroke-dashoffset: 0; opacity: 1; } 25% { stroke-dasharray: 18 200; stroke-dashoffset: -4; } 45% { stroke-dasharray: 30 200; stroke-dashoffset: -18; } 65% { stroke-dasharray: 26 200; stroke-dashoffset: -46; } 82% { stroke-dasharray: 14 200; stroke-dashoffset: -74; opacity: 1; } 100% { stroke-dasharray: 1.5 200; stroke-dashoffset: -99.5; opacity: 0; } }
  .npg-vi-c2 { stroke: #d3d7da; stroke-width: 1.05; stroke-opacity: 0.42; stroke-dasharray: 21.6 200; stroke-dashoffset: -26.4; animation-name: npg-vi-c2; }
  @keyframes npg-vi-c2 { 0% { stroke-dasharray: 0 200; stroke-dashoffset: 0; opacity: 0; } 10% { stroke-dasharray: 4.32 200; stroke-dashoffset: -1.68; opacity: 1; } 25% { stroke-dasharray: 12.96 200; stroke-dashoffset: -9.04; } 45% { stroke-dasharray: 21.6 200; stroke-dashoffset: -26.4; } 65% { stroke-dasharray: 18.72 200; stroke-dashoffset: -53.28; } 82% { stroke-dasharray: 10.08 200; stroke-dashoffset: -77.92; opacity: 1; } 100% { stroke-dasharray: 1.08 200; stroke-dashoffset: -99.92; opacity: 0; } }
  .npg-vi-c3 { stroke: #e0e3e6; stroke-width: 1.4; stroke-opacity: 0.62; stroke-dasharray: 14.4 200; stroke-dashoffset: -33.6; animation-name: npg-vi-c3; }
  @keyframes npg-vi-c3 { 0% { stroke-dasharray: 0 200; stroke-dashoffset: 0; opacity: 0; } 10% { stroke-dasharray: 2.88 200; stroke-dashoffset: -3.12; opacity: 1; } 25% { stroke-dasharray: 8.64 200; stroke-dashoffset: -13.36; } 45% { stroke-dasharray: 14.4 200; stroke-dashoffset: -33.6; } 65% { stroke-dasharray: 12.48 200; stroke-dashoffset: -59.52; } 82% { stroke-dasharray: 6.72 200; stroke-dashoffset: -81.28; opacity: 1; } 100% { stroke-dasharray: 0.72 200; stroke-dashoffset: -100.28; opacity: 0; } }
  .npg-vi-c4 { stroke: #eef0f2; stroke-width: 1.75; stroke-opacity: 0.84; stroke-dasharray: 8.4 200; stroke-dashoffset: -39.6; animation-name: npg-vi-c4; }
  @keyframes npg-vi-c4 { 0% { stroke-dasharray: 0 200; stroke-dashoffset: 0; opacity: 0; } 10% { stroke-dasharray: 1.68 200; stroke-dashoffset: -4.32; opacity: 1; } 25% { stroke-dasharray: 5.04 200; stroke-dashoffset: -16.96; } 45% { stroke-dasharray: 8.4 200; stroke-dashoffset: -39.6; } 65% { stroke-dasharray: 7.28 200; stroke-dashoffset: -64.72; } 82% { stroke-dasharray: 3.92 200; stroke-dashoffset: -84.08; opacity: 1; } 100% { stroke-dasharray: 0.42 200; stroke-dashoffset: -100.58; opacity: 0; } }
  .npg-vi-c5 { stroke: #fbfcfc; stroke-width: 2.05; stroke-opacity: 1; stroke-dasharray: 3.9 200; stroke-dashoffset: -44.1; animation-name: npg-vi-c5; }
  @keyframes npg-vi-c5 { 0% { stroke-dasharray: 0 200; stroke-dashoffset: 0; opacity: 0; } 10% { stroke-dasharray: 0.78 200; stroke-dashoffset: -5.22; opacity: 1; } 25% { stroke-dasharray: 2.34 200; stroke-dashoffset: -19.66; } 45% { stroke-dasharray: 3.9 200; stroke-dashoffset: -44.1; } 65% { stroke-dasharray: 3.38 200; stroke-dashoffset: -68.62; } 82% { stroke-dasharray: 1.82 200; stroke-dashoffset: -86.18; opacity: 1; } 100% { stroke-dasharray: 0.2 200; stroke-dashoffset: -100.81; opacity: 0; } }
  .npg-vi-abierta { opacity: 0.55; }
  /* Tarjetas angostas (cuatro columnas entre 861 y 1000 px) o muy anchas (dos columnas): los rizos se reacomodan para no tocar los bordes */
  @container (max-aspect-ratio: 3/2) { .npg-vi-rizos { transform: translate(-88px, 8px); } }
  @container (min-aspect-ratio: 43/20) { .npg-vi-rizos { transform: translate(-40px, 19px) scale(0.86); } }
  /* Motas que recorren el rizo */
  .npg-vi-mota { fill: none; stroke: #eef1f3; stroke-width: 1.9; stroke-linecap: round; stroke-dasharray: 0.01 200; stroke-dashoffset: -62; opacity: 0.7; animation: npg-vi-mota var(--t, 4s) cubic-bezier(0.4, 0.05, 0.45, 1) var(--d, 0s) infinite; }
  @keyframes npg-vi-mota { 0% { stroke-dashoffset: -8; opacity: 0; } 20% { opacity: 0.85; } 80% { opacity: 0.75; } 100% { stroke-dashoffset: -100; opacity: 0; } }
  /* Estelas rectas y polvo: cruzan la tarjeta a distintas velocidades */
  .npg-vi-estela { left: 0; top: var(--y); width: var(--l); height: 1.4px; margin-left: calc(var(--l) * -1); border-radius: 2px; background: linear-gradient(90deg, rgba(200, 204, 208, 0), rgba(222, 226, 230, 0.7) 70%, rgba(250, 251, 252, 0.95)); transform-origin: 100% 50%; opacity: var(--o); translate: calc(var(--q) * 115cqw) 0; animation: npg-vi-estela var(--t) cubic-bezier(0.35, 0.1, 0.6, 0.9) var(--d) infinite; }
  @keyframes npg-vi-estela { 0% { translate: 0 0; scale: 0.25 1; opacity: 0; } 15% { opacity: var(--o); } 50% { translate: 62cqw var(--a); scale: 1 1; } 85% { opacity: var(--o); } 100% { translate: 125cqw 0; scale: 0.45 1; opacity: 0; } }
  .npg-vi-polvo { left: -4cqw; top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: rgba(230, 233, 236, 0.9); box-shadow: 0 0 4px rgba(230, 233, 236, 0.5); opacity: var(--o); translate: calc(var(--q) * 108cqw) 0; animation: npg-vi-polvo var(--t) cubic-bezier(0.3, 0.2, 0.7, 0.8) var(--d) infinite; }
  @keyframes npg-vi-polvo { 0% { translate: 0 0; opacity: 0; } 12% { opacity: var(--o); } 35% { translate: 40cqw var(--a); } 65% { translate: 75cqw calc(var(--a) * -0.6); } 88% { opacity: var(--o); } 100% { translate: 112cqw calc(var(--a) * 0.4); opacity: 0; } }


  /* Movimiento reducido: un cuadro quieto compuesto a mano (el fuego lo pinta el script una sola vez) */
  @media (prefers-reduced-motion: reduce) {
    .npg-escena *, .npg-escena *::before, .npg-escena *::after { animation: none !important; }
    .npg-agua-destello { translate: 60cqw 0; opacity: 0.8; }
    .npg-agua-impacto:first-of-type .npg-agua-onda { opacity: 0.6; scale: 0.8; }
    .npg-agua-impacto:first-of-type .npg-agua-onda + .npg-agua-onda { opacity: 0.4; scale: 0.45; }
    .npg-agua-gota { opacity: 0; }
    .npg-agua-impacto + .npg-agua-impacto .npg-agua-gota { opacity: 1; translate: 0 calc(var(--y) * 0.5); }
    .npg-agua-titila:nth-of-type(odd) { opacity: 0.8; }
    .npg-agua-burbuja { opacity: 0.6; translate: 0 -10cqh; }
    .npg-vi-abierta { display: none; }
  }


/* NPG · ambiente de los cuatro elementos (fondo de las bandas oscuras) */
.npa-fondo { position: absolute !important; inset: 0 !important; z-index: -1 !important; display: block !important; flex: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden; pointer-events: none; border-radius: inherit; }
/* Respaldo sin script (y mientras arranca): un resplandor tibio abajo, que se funde con el del lienzo */
.npa-fondo::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: radial-gradient(17% 58px at 22% 100%, rgba(255, 124, 50, 0.2), rgba(224, 69, 58, 0.07) 50%, transparent), radial-gradient(19% 64px at 55% 100%, rgba(255, 124, 50, 0.24), rgba(224, 69, 58, 0.08) 50%, transparent), radial-gradient(16% 54px at 84% 100%, rgba(255, 124, 50, 0.18), rgba(224, 69, 58, 0.06) 50%, transparent); transition: opacity 900ms ease; }
.npa-fondo.npa-vivo::before { opacity: 0; }
.npa-fondo > .npa-lienzo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 900ms ease; }
.npa-fondo.npa-vivo > .npa-lienzo { opacity: 1; }
.banda-esports:has(> .npa-fondo), .esports:has(> .npa-fondo), .torneo:has(> .npa-fondo) { isolation: isolate; }
@media (prefers-reduced-motion: reduce) { .npa-fondo::before, .npa-fondo > .npa-lienzo { transition: none; } }