/* Zynapze · Nosotros.
   Trece personas, una línea directa de cada una a tu negocio. El movimiento lo escribe nosotros.js. */

/* ================================================================ portada == */
.n-portada {
  position: relative; min-height: 100svh; overflow: clip;
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(2rem, 5vw, 6rem);
  padding: calc(var(--barra) + 2.5rem) var(--sc-gutter) 4rem;
  background: radial-gradient(55% 70% at 72% 50%, color-mix(in oklab, #2A2927 70%, transparent), transparent 70%), var(--sc-canvas);
}
.n-portada::after { content: ""; position: absolute; inset: auto 0 0 0; height: 14vh; pointer-events: none; background: linear-gradient(180deg, transparent, var(--sc-canvas)); }
/* Las líneas del pictograma, con su extensión lateral, detrás del equipo. */
.n-fondo {
  position: absolute; right: 0; top: 0; bottom: 0; width: 70vw; pointer-events: none;
  background: repeating-linear-gradient(180deg, color-mix(in oklab, var(--sc-ink) 5%, transparent) 0 1px, transparent 1px 38px);
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 80%, transparent 100%), linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  mask-composite: intersect; -webkit-mask-composite: source-in;
}

.n-copy { position: relative; z-index: 2; }
.n-antetitulo {
  margin: 0 0 1.4rem; display: flex; align-items: center; gap: 0.7rem;
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sc-accent);
  animation: nEntra 800ms var(--sc-ease-out) both;
}
.n-antetitulo::before { content: ""; width: 1.6rem; height: 1px; background: currentColor; }
.n-titulo { margin: 0; max-width: 12ch; font-size: clamp(2.6rem, 1.5rem + 3.3vw, 4.6rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; animation: nEntraTitulo 800ms var(--sc-ease-out) 60ms both; }
.n-sub { margin: 1.5rem 0 0; max-width: 31rem; font-size: clamp(1.08rem, 0.98rem + 0.45vw, 1.32rem); font-weight: 400; line-height: 1.5; color: var(--sc-ink-soft); text-wrap: pretty; animation: nEntraTitulo 800ms var(--sc-ease-out) 140ms both; }
.n-accion { margin-top: 2.2rem; animation: nEntra 800ms var(--sc-ease-out) 220ms both; }
@keyframes nEntra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* El título de la portada solo sube: si empieza invisible, Google lo cuenta tarde como «lo principal» (LCP). */
@keyframes nEntraTitulo { from { transform: translateY(14px); } to { transform: none; } }

/* ------------------------------------------------- la red del equipo -- */
.red { position: relative; z-index: 2; margin: 0; display: grid; justify-items: center; }
.red__lineas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.red__linea { fill: none; stroke: var(--linea); stroke-width: 1; transition: stroke 500ms var(--sc-ease-out), opacity 500ms var(--sc-ease-out); }
.red__linea.is-activa { stroke: var(--oro-linea); stroke-width: 1.3; }
.red__chispa { fill: var(--sc-accent); filter: drop-shadow(0 0 6px var(--sc-accent)); opacity: 0; }

/* 5 · 4 · 4: diez columnas, cada persona ocupa dos; la segunda y la tercera fila se recorren una. */
.red__equipo { position: relative; width: 100%; max-width: 40rem; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); row-gap: 1.5rem; }
.persona { grid-column: span 2; display: grid; justify-items: center; align-content: start; gap: 0.15rem; text-align: center; animation: nEntra 700ms var(--sc-ease-out) both; animation-delay: calc(260ms + var(--i, 0) * 45ms); }
.persona:nth-child(6), .persona:nth-child(10) { grid-column: 2 / span 2; }
.persona__foto {
  position: relative; width: clamp(3.4rem, 2.4rem + 2.6vw, 4.6rem); aspect-ratio: 1; margin-bottom: 0.55rem; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(80% 80% at 50% 35%, #2C2A27, #161514);
  box-shadow: inset 0 0 0 1px var(--linea), 0 0 0 0 transparent;
  transition: box-shadow 500ms var(--sc-ease-out);
}
.persona__foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); transform-origin: 50% 36%; }
.persona__foto--inicial { font-size: 0.86rem; font-weight: 600; letter-spacing: 0.06em; color: var(--tinta-tenue); }
/* Un halo del fondo: las líneas pasan por detrás sin cruzar las letras. */
.persona b, .persona small { text-shadow: 0 0 6px var(--sc-canvas), 0 0 3px var(--sc-canvas), 0 0 1px var(--sc-canvas); }
.persona b { font-size: 0.86rem; font-weight: 600; letter-spacing: -0.005em; color: var(--sc-ink); transition: color 500ms var(--sc-ease-out); }
.persona small { font-size: 0.7rem; line-height: 1.25; color: var(--tinta-tenue); }
.persona.is-activa .persona__foto { box-shadow: inset 0 0 0 1px var(--oro-linea), 0 0 0 3px color-mix(in oklab, var(--sc-accent) 22%, transparent); }
.persona.is-activa b { color: var(--sc-accent); }

/* Tu negocio: el punto donde llegan todas las líneas. */
.red__negocio {
  position: relative; width: min(27rem, 100%); margin-top: 4.6rem; padding: 1.15rem 1.25rem 1rem;
  display: grid; gap: 0.85rem; animation: nEntra 800ms var(--sc-ease-out) 700ms both;
}
.red__negocio::before {
  content: ""; position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; border-radius: 50%; transform: translateX(-50%);
  background: var(--sc-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--sc-accent) 18%, transparent), 0 0 18px var(--sc-accent);
}
.red__giro { margin: 0; display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 600; color: var(--sc-ink); }
.red__punto { width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); }
.red__msj { display: flex; align-items: flex-start; gap: 0.75rem; min-height: 3.4rem; transition: opacity 220ms var(--sc-ease-out), transform 220ms var(--sc-ease-out); }
.red__msj.is-saliendo { opacity: 0; transform: translateY(6px); }
.red__quien { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: radial-gradient(80% 80% at 50% 35%, #2C2A27, #161514); box-shadow: inset 0 0 0 1px var(--oro-linea); font-size: 0.72rem; font-weight: 600; color: var(--tinta-tenue); }
.red__quien img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); transform-origin: 50% 36%; }
.red__msj p { margin: 0; display: grid; gap: 0.15rem; font-size: 0.92rem; line-height: 1.45; color: var(--sc-ink-soft); }
.red__msj b { font-size: 0.78rem; font-weight: 600; color: var(--sc-ink); }
.red__msj b span { font-weight: 400; color: var(--tinta-tenue); }
.red__negocio .ejemplo { justify-self: end; }

/* ============================================================ 2 · el canal == */
/* Una escena fija corta: los mensajes llegan uno por uno al bajar. */
.n-directo__stage { display: grid; align-items: center; padding: calc(var(--barra) + 1.2rem) var(--sc-gutter) 1.6rem; }
.n-directo__marco { width: 100%; max-width: var(--sc-maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: center; }
.n-directo__texto { display: grid; gap: 1.4rem; align-content: center; }
.n-directo__remate { margin: 0; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); font-weight: 500; line-height: 1.35; color: var(--sc-ink); opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--sc-ease-out), transform 500ms var(--sc-ease-out); }
.n-directo__remate.ve { opacity: 1; transform: none; }
.oro { color: var(--sc-accent); }

.n-directo__visual { display: grid; }

/* El canal: tu equipo (contorno) y el nuestro (foto), en la misma conversación. */
.hilo { overflow: hidden; display: grid; }
.hilo__resumen { margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; padding: 0.8rem 1.1rem; border-top: 1px solid var(--linea); font-size: 0.8rem; color: var(--sc-ink-soft); opacity: 0; transition: opacity 500ms var(--sc-ease-out); }
.hilo__resumen.ve { opacity: 1; }
.hilo__resumen b { margin-right: 0.3rem; font-size: 1.15rem; font-weight: 300; color: var(--sc-ink); font-variant-numeric: tabular-nums; }
.hilo__resumen span:last-child b { color: var(--sc-accent); }
.hilo__cabeza { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--linea); }
.hilo__cabeza p { margin: 0; display: grid; gap: 0.1rem; font-size: 0.9rem; }
.hilo__cabeza small { font-size: 0.72rem; color: var(--tinta-tenue); }
.hilo__cabeza .ejemplo { flex: none; white-space: nowrap; }
.hilo__miembros { display: flex; align-items: center; gap: 0.35rem; padding: 0.65rem 1.1rem; border-bottom: 1px solid var(--linea); background: color-mix(in oklab, var(--sc-accent) 5%, transparent); }
.hilo__miembros .hm__ico { width: 1.8rem; height: 1.8rem; font-size: 0.58rem; }
.hilo__y { margin: 0 0.3rem; color: var(--sc-accent); font-weight: 600; }
.hilo__miembros small { margin-left: 0.4rem; font-size: 0.72rem; color: var(--tinta-tenue); }
.hm__angulos { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.hm__angulos span { padding: 0.28rem 0.6rem; border-radius: 999px; border: 1px solid var(--oro-linea); font-size: 0.72rem; color: var(--sc-ink); }
.hilo__mensajes { margin: 0; padding: 0.9rem 1.1rem 1.1rem; list-style: none; display: grid; gap: 0.75rem; }
.hm { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.7rem; opacity: 0.1; transform: translateY(8px); transition: opacity 450ms var(--sc-ease-out), transform 450ms var(--sc-ease-out); }
.hm.ve { opacity: 1; transform: none; }
.hm__ico { grid-row: span 3; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; overflow: hidden; background: radial-gradient(80% 80% at 50% 35%, #2C2A27, #161514); box-shadow: inset 0 0 0 1px var(--linea); font-size: 0.66rem; font-weight: 600; }
.hm__ico img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); transform-origin: 50% 36%; }
.hm header { display: flex; flex-wrap: wrap; gap: 0.15rem 0.55rem; align-items: baseline; font-size: 0.82rem; }
.hm header b { font-weight: 600; }
.hm header em { font-style: normal; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.1rem 0.4rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea-fuerte); color: var(--sc-ink-soft); }
.hm header small { font-size: 0.7rem; color: var(--tinta-tenue); }
.hm p { margin: 0; font-size: 0.88rem; line-height: 1.42; color: var(--sc-ink-soft); }
.hm--cliente p { color: var(--sc-ink); }
.hm__adjunto { justify-self: start; display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.35rem; padding: 0.4rem 0.65rem; border-radius: 8px; background: #1A1918; border: 1px solid var(--oro-linea); font-size: 0.74rem; color: var(--sc-ink); }
.hm__adjunto::before { content: ""; border-left: 0.5rem solid var(--sc-accent); border-top: 0.32rem solid transparent; border-bottom: 0.32rem solid transparent; }

/* ======================================================= secciones de flujo == */
.n-marco { width: 100%; max-width: calc(var(--sc-maxw) + var(--sc-gutter) * 2); margin: 0 auto; padding: 0 var(--sc-gutter); }
.n-cabeza { display: grid; gap: 1rem; max-width: 46rem; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }

/* ================================================== 3 · cómo trabajamos == */
.n-reglas { padding: clamp(5rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem); }
.reglas { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.regla { display: grid; grid-template-rows: auto auto auto 1fr; gap: 0.5rem; padding: 1.3rem 1.4rem 1.5rem; opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--sc-ease-out), transform 700ms var(--sc-ease-out); }
.regla.ve { opacity: 1; transform: none; }
.regla:nth-child(2) { transition-delay: 90ms; } .regla:nth-child(3) { transition-delay: 60ms; } .regla:nth-child(4) { transition-delay: 150ms; }
.regla__demo { height: 9.5rem; margin-bottom: 0.9rem; padding: 1rem; border-radius: 12px; background: color-mix(in oklab, var(--sc-canvas) 55%, transparent); box-shadow: inset 0 0 0 1px var(--linea); display: grid; align-content: center; gap: 0.8rem; overflow: hidden; }
.regla__n { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.regla__titulo { margin: 0; font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.regla__texto { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--sc-ink-soft); max-width: 40ch; }

/* 01 · en casa: las cinco áreas se encienden y quedan dentro del mismo equipo. */
.casa { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.casa li { padding: 0.4rem 0.75rem; border-radius: 999px; font-size: 0.8rem; color: var(--tinta-tenue); box-shadow: inset 0 0 0 1px var(--linea-fuerte); transition: color 400ms var(--sc-ease-out), box-shadow 400ms var(--sc-ease-out), background-color 400ms var(--sc-ease-out); }
.regla.ve .casa li { color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--oro-linea); background: color-mix(in oklab, var(--sc-accent) 8%, transparent); }
.regla.ve .casa li:nth-child(2) { transition-delay: 150ms; } .regla.ve .casa li:nth-child(3) { transition-delay: 300ms; } .regla.ve .casa li:nth-child(4) { transition-delay: 450ms; } .regla.ve .casa li:nth-child(5) { transition-delay: 600ms; }
.casa__pie { margin: 0; display: flex; justify-content: space-between; align-items: baseline; padding-top: 0.7rem; border-top: 1px solid var(--linea); font-size: 0.78rem; color: var(--tinta-tenue); }
.casa__pie b { font-size: 1.05rem; font-weight: 500; color: var(--sc-accent); }

/* 02 · directo: una línea sin escalas entre tú y quien hace el trabajo. */
.directo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem; }
.directo__p { display: grid; justify-items: center; gap: 0.35rem; }
.directo__p .hm__ico { width: 2.6rem; height: 2.6rem; font-size: 0.72rem; }
.directo__p small { font-size: 0.68rem; color: var(--tinta-tenue); white-space: nowrap; }
.directo__linea { width: 100%; height: 2.6rem; align-self: start; overflow: visible; }
.directo__linea path { fill: none; stroke: var(--oro-linea); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.directo__linea circle { fill: var(--sc-accent); opacity: 0; }
.regla.ve .directo__linea circle { animation: directoViaja 2600ms var(--sc-ease-out) 400ms infinite; }
@keyframes directoViaja { 0% { cx: 0; opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { cx: 200; opacity: 0; } }
.directo__alex { margin: 0; display: flex; align-items: center; gap: 0.55rem; font-size: 0.74rem; color: var(--tinta-tenue); }
.directo__alex .hm__ico { width: 1.6rem; height: 1.6rem; }

/* 03 · aprobación: el video espera hasta que tú lo apruebas. */
.aprobar { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 0.9rem; align-items: center; }
.aprobar__medio { grid-row: span 2; width: 3.4rem; aspect-ratio: 9 / 16; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(160deg, #2C2A27, #191817); box-shadow: inset 0 0 0 1px var(--linea); }
.aprobar__play { width: 1.4rem; height: 1.4rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--oro-linea); position: relative; }
.aprobar__play::after { content: ""; position: absolute; left: 55%; top: 50%; transform: translate(-40%, -50%); border-left: 0.42rem solid var(--sc-accent); border-top: 0.27rem solid transparent; border-bottom: 0.27rem solid transparent; }
.aprobar p { margin: 0; display: grid; gap: 0.15rem; }
.aprobar p b { font-size: 0.84rem; font-weight: 600; }
.aprobar p small { font-size: 0.72rem; color: var(--tinta-tenue); }
.aprobar__estado { display: grid; justify-self: start; }
.aprobar__estado > span { grid-area: 1 / 1; padding: 0.38rem 0.75rem; border-radius: 999px; font-size: 0.76rem; font-weight: 600; transition: opacity 400ms var(--sc-ease-out), transform 400ms var(--sc-ease-out); }
.aprobar__pendiente { color: var(--sc-ink-soft); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.aprobar__ok { color: var(--sc-accent-ink); background: var(--sc-accent); opacity: 0; transform: scale(0.94); }
.regla.ve .aprobar__pendiente { opacity: 0; transition-delay: 1400ms; }
.regla.ve .aprobar__ok { opacity: 1; transform: none; transition-delay: 1400ms; }

/* 04 · datos: la inversión se mueve al anuncio que funciona. */
.inversion { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.inversion li { display: grid; grid-template-columns: 11.5rem 1fr 2.6rem; align-items: center; gap: 0.7rem; font-size: 0.76rem; color: var(--sc-ink-soft); }
.inversion span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inversion i { height: 6px; border-radius: 3px; background: color-mix(in oklab, var(--sc-ink) 8%, transparent); position: relative; overflow: hidden; }
.inversion i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--a) * 1%); border-radius: 3px; background: var(--linea-fuerte); transition: width 1200ms var(--sc-ease-out) 900ms, background-color 600ms var(--sc-ease-out) 900ms; }
.regla.ve .inversion i::after { width: calc(var(--b) * 1%); }
.regla.ve .inversion li:first-child i::after { background: var(--sc-accent); }
.inversion b { text-align: right; font-weight: 500; color: var(--sc-ink); font-variant-numeric: tabular-nums; }
.inversion__pie .ejemplo { white-space: nowrap; }
.inversion__pie { margin: 0; display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; color: var(--tinta-tenue); }

/* ===================================================== 4 · el equipo == */
.n-equipo { padding: clamp(3rem, 6vw, 5rem) 0; }
.areas { display: flex; flex-wrap: wrap; gap: 2.6rem 3.2rem; }
.area { display: grid; align-content: start; gap: 1rem; opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--sc-ease-out), transform 700ms var(--sc-ease-out); }
.area.ve { opacity: 1; transform: none; }
.area > header { display: grid; gap: 0.35rem; max-width: 30rem; padding-left: 0.9rem; border-left: 1px solid var(--oro-linea); }
.area > header small { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-accent); }
.area > header p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--sc-ink-soft); }
@media (min-width: 861px) { .area > header { min-height: 4.2rem; align-content: start; } } /* las fotos de una misma fila arrancan a la misma altura */
.tarjetas { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 1rem; }
.tarjeta { width: 8.6rem; display: grid; align-content: start; gap: 0.15rem; }
.tarjeta__foto { width: 100%; aspect-ratio: 480 / 560; margin-bottom: 0.6rem; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(90% 70% at 50% 30%, #2E2C29, #151413); box-shadow: inset 0 0 0 1px var(--linea); }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta__foto--inicial { font-size: 1.3rem; font-weight: 600; letter-spacing: 0.06em; color: var(--tinta-tenue); }
.tarjeta b { font-size: 0.95rem; font-weight: 600; }
.tarjeta small { font-size: 0.76rem; line-height: 1.3; color: var(--tinta-tenue); }

/* ==================================================== 5 · los números == */
.n-numeros { padding: clamp(3rem, 6vw, 5rem) 0; }
.n-numeros .titulo-2 { max-width: 30ch; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* 6 · El cierre y el pie viven en sitio.css: son los mismos de la home. */

/* Laptops de pantalla baja: la red entera cabe sin bajar. */
@media (min-width: 861px) and (max-height: 820px) {
  .n-portada { padding-top: calc(var(--barra) + 1.5rem); padding-bottom: 2.5rem; }
  .red__equipo { row-gap: 0.9rem; max-width: 36rem; }
  .persona__foto { width: 3.5rem; margin-bottom: 0.4rem; }
  .persona b { font-size: 0.8rem; }
  .persona small { font-size: 0.66rem; }
  .red__negocio { margin-top: 3.2rem; padding: 0.95rem 1.1rem 0.85rem; gap: 0.7rem; }
  .n-directo__stage { padding-top: calc(var(--barra) + 0.6rem); padding-bottom: 0.8rem; }
  .hilo__miembros { display: none; }
  .hilo__mensajes { gap: 0.5rem; padding: 0.7rem 1rem 0.8rem; }
  .hm p { font-size: 0.82rem; }
}

/* ================================================================ teléfono == */
@media (max-width: 860px) {
  .n-portada { display: flex; flex-direction: column; align-items: stretch; gap: 2.8rem; min-height: auto; padding: calc(var(--barra) + 1.6rem) var(--sc-gutter) 3.5rem; }
  .n-fondo { width: 100%; }
  .n-antetitulo { margin-bottom: 1rem; }
  .n-titulo { font-size: clamp(2.3rem, 1.4rem + 4.4vw, 3rem); }
  .n-sub { margin-top: 1.1rem; }
  .n-accion { margin-top: 1.6rem; }
  .n-accion .boton { width: 100%; }
  .red__equipo { row-gap: 1.1rem; }
  .persona__foto { width: 3.3rem; margin-bottom: 0.4rem; }
  .persona b { font-size: 0.78rem; }
  .persona small { display: none; } /* en el teléfono el puesto va en el mensaje */
  .red__negocio { margin-top: 3.4rem; }

  .n-directo__stage { align-items: start; padding: calc(var(--barra) + 0.8rem) var(--sc-gutter) 0.8rem; }
  .n-directo__marco { grid-template-columns: 1fr; gap: 1rem; }
  .n-directo__texto { gap: 0.5rem; align-content: start; }
  .n-directo .titulo-2 { font-size: clamp(1.45rem, 1.1rem + 2vw, 1.8rem); }
  .n-directo__remate { font-size: 1rem; }
  .hm__angulos { gap: 0.25rem; margin-top: 0.3rem; }
  .hm__angulos span { font-size: 0.62rem; padding: 0.18rem 0.45rem; }
  .hilo__cabeza small { display: none; }
  .hm header em { font-size: 0.58rem; padding: 0.05rem 0.35rem; }
  .hilo__cabeza { padding: 0.65rem 0.9rem; }
  .hilo__miembros { display: none; }
  .hilo__mensajes { gap: 0.4rem; padding: 0.6rem 0.9rem 0.7rem; }
  .hm__ico { width: 1.8rem; height: 1.8rem; }
  .hm header { font-size: 0.76rem; }
  .hm p { font-size: 0.78rem; line-height: 1.32; }
  .hilo__resumen { gap: 0.3rem 1rem; padding: 0.6rem 0.9rem; font-size: 0.72rem; }
  .hilo__resumen b { font-size: 0.95rem; }

  .reglas { grid-template-columns: 1fr; gap: 0.9rem; }
  .regla { padding: 1rem 1rem 1.2rem; }
  .regla__demo { height: auto; min-height: 7.5rem; }
  .inversion li { grid-template-columns: 8.4rem 1fr 2.4rem; font-size: 0.7rem; }
  .areas { gap: 2.2rem; }
  .area { width: 100%; }
  .tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem 0.7rem; }
  .tarjeta { width: auto; }
  .area:has(.tarjeta:nth-child(4)) .tarjetas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem 0.5rem; }
  .area:has(.tarjeta:nth-child(4)) .tarjeta small { font-size: 0.64rem; }
  .tarjeta b { font-size: 0.86rem; }
  .tarjeta small { font-size: 0.7rem; }
  .n-numeros .numeros__fila { grid-template-columns: 1fr 1fr; }
  .n-numeros .cifra:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* Teléfonos bajos: el canal se comporta como un chat real; los mensajes nuevos entran
   abajo y los primeros se van por arriba. */
@media (max-width: 860px) and (max-height: 760px) {
  .hilo__mensajes { max-height: calc(100svh - 22.5rem); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; mask-image: linear-gradient(180deg, transparent, #000 2.2rem); }
  .hm:not(.ve) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .n-antetitulo, .n-titulo, .n-sub, .n-accion, .persona, .red__negocio { animation: none !important; }
  .red__msj, .red__linea { transition: none; }
  .n-directo__remate, .hm, .hilo__resumen, .regla, .area, .casa li, .aprobar__estado > span, .inversion i::after { transition: none; }
  .regla.ve .directo__linea circle { animation: none; opacity: 1; cx: 100; }
}

/* Los videos del equipo de videoproducción, dentro de su área. */
.reel--chico .reel__pista { padding: 0.2rem 0 0.4rem; gap: 0.8rem; scroll-padding-inline: 0; }
.reel--chico .reel__item { width: 9.5rem; scroll-snap-align: start; gap: 0.6rem; }
.reel--chico .reel__video { border-radius: 12px; }
.reel--chico .reel__item figcaption b { font-size: 0.86rem; }
.reel--chico .reel__item figcaption span { font-size: 0.74rem; }
.reel--chico .reel__sonido { width: 32px; height: 32px; right: 0.5rem; bottom: 0.5rem; }
@media (max-width: 860px) { .reel--chico .reel__item { width: 42vw; } }