/* Marvin · landing — las secciones del lienzo. */

.tramo { padding-block: clamp(4.5rem, 9vw, 8rem); }
.tramo-cabeza { text-align: center; max-width: 52rem; margin-inline: auto; }
.tramo-cabeza .baja { margin-top: 1rem; font-size: 1.05rem; color: var(--tinta-suave); max-width: 44ch; margin-inline: auto; }

/* ── La cinta: los nombres que pasan, como los logos de la referencia ── */
.cinta-tramo { padding-top: clamp(3rem, 6vw, 4.5rem); }
.cinta {
  overflow: hidden; margin-top: 1.5rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}
.cinta-pista { display: flex; width: max-content; animation: rueda 38s linear infinite; }
/* dos grupos idénticos y el aire al final de cada uno: así el −50% no salta */
.cinta-grupo { display: flex; align-items: baseline; gap: clamp(2.5rem, 6vw, 5rem); padding-right: clamp(2.5rem, 6vw, 5rem); }
@keyframes rueda { to { transform: translateX(-50%); } }
.marca-ajena { white-space: nowrap; color: var(--tinta-suave); }
.marca-ajena.serif { font-family: 'Newsreader', serif; font-weight: 500; font-size: 1.35rem; }
.marca-ajena.mono { font-family: 'IBM Plex Mono', monospace; font-size: 0.9rem; letter-spacing: 0.09em; }

/* ── Rasgos: dos tarjetas grandes con el producto adentro ── */
.rasgos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr)); gap: 1.5rem; margin-top: 3.5rem; }
.rasgo {
  background: var(--papel-alto); border-radius: var(--radio-tarjeta);
  padding: clamp(1.5rem, 3vw, 2.5rem); overflow: clip;
  box-shadow: 0 24px 48px -32px rgba(9, 26, 20, 0.25);
}
.rasgo h3 { font-size: 1.3rem; }
.rasgo .baja { margin-top: 0.5rem; color: var(--tinta-suave); max-width: 46ch; }
.rasgo-marco { margin-top: 1.75rem; background: var(--papel); border-radius: var(--radio); padding: 1.5rem; }

/* el correo de muestra — el producto ES la prosa */
.correo { background: var(--papel-alto); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.5rem; box-shadow: 0 16px 40px -28px rgba(9,26,20,0.35); }
.correo .remite { font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; color: var(--tinta-tenue); }
.correo .asunto { font-family: 'Newsreader', serif; font-size: 1.35rem; margin-top: 0.6rem; line-height: 1.2; }
.correo .cuerpo { margin-top: 0.7rem; color: var(--tinta-suave); }
.correo .paso { margin-top: 0.9rem; color: var(--tinta); font-weight: 500; }
.leyenda { margin-top: 0.8rem; font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; color: var(--tinta-tenue); text-align: center; }

/* la gráfica de barras — meses, la barra señalada en ámbar como el plazo */
.barras { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.8rem; height: 13rem; margin-top: 1.5rem; }
/* columna flex y no grid: el alto en % del palo necesita un padre definido */
.barras .mes { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 0.5rem; height: 100%; }
.barras .palo { width: 100%; border-radius: 12px; background: var(--sobre-verde); height: calc(var(--h) * 1%); transition: height 900ms var(--salida); transform-origin: bottom; }
html.anim .sin-contar .palo { height: 4%; }
/* una vez contadas, las barras crecen en secuencia y vuelven a empezar —
   el bucle de la gráfica «Analysis» de la referencia, no un temblor tímido */
.barras:not(.sin-contar) .palo { animation: crece 6.5s var(--salida) infinite; }
.barras .mes:nth-child(2) .palo { animation-delay: 0.12s; }
.barras .mes:nth-child(3) .palo { animation-delay: 0.24s; }
.barras .mes:nth-child(4) .palo { animation-delay: 0.36s; }
.barras .mes:nth-child(5) .palo { animation-delay: 0.48s; }
.barras .mes:nth-child(6) .palo { animation-delay: 0.6s; }
@keyframes crece { 0% { transform: scaleY(0.05); } 16%, 84% { transform: scaleY(1); } 96%, 100% { transform: scaleY(0.05); } }
.barras .palo.señal { background: var(--atencion); }
.barras .eti { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: var(--tinta-tenue); }
.barras .eti.señal { background: var(--verde-hondo); color: #fff; padding: 0.1rem 0.55rem; border-radius: 999px; }

/* ── Segunda fila de rasgos: la lista que aparece y el monto que cuenta ── */
.plazos { display: grid; gap: 0.8rem; margin-top: 0.25rem; }
.plazo { display: flex; align-items: center; gap: 0.9rem; background: var(--papel-alto); border: 1px solid var(--linea); border-radius: 14px; padding: 0.8rem 1rem; }
.plazo > div { flex: 1; min-width: 0; }
.plazo strong { display: block; font-size: 0.95rem; }
.plazo span:not(.chip) { font-size: 0.8rem; color: var(--tinta-tenue); }
.plazo .chip { flex: none; }
.punto-plazo { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--linea); }
.punto-plazo.verde { background: var(--verde); }
.punto-plazo.ambar { background: var(--atencion); }
.chip-neutra { background: var(--papel); border: 1px solid var(--linea); color: var(--tinta-tenue); }
/* las filas aparecen una por una y el ciclo recomienza — el Auto Pay de la referencia */
html.anim .plazos .plazo { animation: aparece 8s var(--salida) infinite backwards; }
html.anim .plazos .plazo:nth-child(2) { animation-delay: 0.55s; }
html.anim .plazos .plazo:nth-child(3) { animation-delay: 1.1s; }
html.anim .plazos .plazo:nth-child(4) { animation-delay: 1.65s; }
@keyframes aparece { 0%, 3% { opacity: 0; transform: translateY(10px); } 10%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.calle-monto { font-family: 'Newsreader', serif; font-weight: 500; font-size: 2.7rem; line-height: 1.1; font-variant-numeric: tabular-nums; margin-top: 0.2rem; }
.edades { grid-template-columns: repeat(4, 1fr); height: 8rem; }

/* ── Cifras: el texto que se enciende palabra a palabra + contadores ── */
.cifras { text-align: center; }
.enciende { font-family: 'Newsreader', serif; font-weight: 500; font-size: clamp(1.7rem, 3.6vw, 2.9rem); line-height: 1.25; max-width: 34ch; margin-inline: auto; }
/* apagada la palabra es tenue pero legible (4.7:1) — no invisible: el efecto
   es gris que se vuelve tinta, y el contraste cumple en los dos estados */
.enciende .palabra { color: var(--tinta-tenue); transition: color 350ms linear; }
.enciende .palabra.prendida { color: var(--tinta); }
.cuentas { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 2rem; margin-top: 4rem; }
.cuenta { border-left: 1px solid var(--linea); padding-left: 1.5rem; text-align: left; }
.cuenta .numero { font-family: 'Newsreader', serif; font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 500; color: var(--verde); font-variant-numeric: tabular-nums; }
.cuenta .que { margin-top: 0.4rem; color: var(--tinta-suave); font-size: 0.95rem; max-width: 22ch; }
/* «nota» y no «pie»: el pie de página usa .pie y su fondo hondo se colaba acá */
.cifras .nota { margin-top: 3rem; color: var(--tinta-tenue); font-size: 0.95rem; }

/* ── La sección honda: verde-hondo donde la referencia pone negro ── */
.hondo { background: var(--verde-hondo); color: #fff; border-radius: var(--radio-tarjeta); margin-inline: clamp(0.75rem, 2vw, 2rem); padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 4vw, 4rem); }
.hondo h2 { color: #fff; }
.hondo .baja { color: rgba(255,255,255,0.75); }
.hondo-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr)); gap: 3rem; align-items: center; margin-top: 3.5rem; }
.renglon { display: flex; gap: 1rem; align-items: flex-start; background: rgba(255,255,255,0.06); border-radius: var(--radio); padding: 1.25rem 1.4rem; margin-top: 1rem; transition: background-color 220ms var(--salida), transform 220ms var(--salida); }
.renglon:hover { background: rgba(255,255,255,0.11); transform: translateX(6px); }
.renglon .icono { flex: none; width: 3rem; height: 3rem; display: grid; place-items: center; background: #fff; color: var(--verde-hondo); border-radius: 14px; font-size: 1.2rem; }
.renglon h3 { color: #fff; font-size: 1.05rem; }
.renglon p { color: rgba(255,255,255,0.72); font-size: 0.95rem; margin-top: 0.2rem; }
.panel { background: var(--papel-alto); color: var(--tinta); border-radius: var(--radio-tarjeta); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: 0 40px 80px -40px rgba(0,0,0,0.55); }

/* el correo del primer rasgo rota avisos reales; el texto se funde al cambiar */
.vitrina .remite, .vitrina .asunto, .vitrina .cuerpo, .vitrina .paso { transition: opacity 280ms var(--salida); }
.vitrina.cambiando .remite, .vitrina.cambiando .asunto, .vitrina.cambiando .cuerpo, .vitrina.cambiando .paso { opacity: 0; }

/* la fila de DTE suma en vivo; cada suma da un pulso corto */
.sumadora .chip { transition: transform 150ms var(--salida); }
.sumadora.tic .chip { transform: scale(1.18); }

/* la tendencia dibujada */
.tendencia svg { width: 100%; height: auto; }
.tendencia circle { transform-box: fill-box; transform-origin: center; }
.rev.visto .tendencia circle, .tendencia.trazada circle { animation: late 2.6s ease-in-out 1.8s infinite; }
.tendencia .traza { stroke-dasharray: 1; stroke-dashoffset: 0; }
html.anim .sin-trazar .traza { stroke-dashoffset: 1; }
.rev.visto .tendencia .traza, .tendencia.trazada .traza { stroke-dashoffset: 0; transition: stroke-dashoffset 1600ms var(--salida) 300ms; }

/* ── Precio: una sola tarjeta señalada, flanqueada por lo incluido ── */
.precios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: 1.5rem; margin-top: 3.5rem; align-items: stretch; }
.precio-carta { background: var(--papel-alto); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 2rem; }
.precio-carta.señalada { background: radial-gradient(120% 120% at 20% 0%, #2e7258 0%, var(--verde-hondo) 70%); color: #fff; border: none; box-shadow: 0 36px 72px -32px rgba(23,69,52,0.6); }
.precio-carta .quien { color: var(--tinta-tenue); font-size: 0.95rem; margin-top: 0.3rem; }
.precio-carta.señalada .quien { color: rgba(255,255,255,0.7); }
.precio-monto { font-family: 'Newsreader', serif; font-size: 3.4rem; font-weight: 500; margin-top: 1.4rem; }
.precio-carta.señalada .precio-monto { color: var(--verde-claro); }
.precio-monto small { font-family: 'IBM Plex Sans', sans-serif; font-size: 1rem; color: inherit; opacity: 0.7; font-weight: 400; }
.precio-carta ul { margin-top: 1.6rem; display: grid; gap: 0.8rem; }
.precio-carta li { display: flex; gap: 0.65rem; align-items: baseline; font-size: 0.98rem; }
.precio-carta li::before { content: '✓'; flex: none; font-weight: 700; color: var(--verde); }
.precio-carta.señalada li::before { color: var(--verde-claro); }
.precio-carta .pildora { width: 100%; justify-content: center; margin-top: 1.8rem; }
.franja { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; background: var(--verde-hondo); color: #fff; border-radius: var(--radio-tarjeta); padding: 2rem clamp(1.5rem, 4vw, 3rem); margin-top: 1.5rem; }
.franja h3 { color: #fff; font-family: 'Newsreader', serif; font-weight: 500; font-size: 1.6rem; }

/* ── Avisos reales: el carrusel de cartas ── */
.carril { display: grid; grid-auto-flow: column; grid-auto-columns: min(26rem, 82vw); gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 3.5rem clamp(1.25rem, 4vw, 4rem) 1rem; scrollbar-width: none; }
.carril::-webkit-scrollbar { display: none; }
.carril > * { scroll-snap-align: center; }
.carril .correo { height: 100%; }
.carril-mandos { display: flex; align-items: center; justify-content: space-between; padding: 1rem clamp(1.25rem, 4vw, 4rem) 0; }
.carril-puntos { display: flex; gap: 0.45rem; }
.carril-puntos span { width: 8px; height: 8px; border-radius: 50%; background: var(--linea); transition: background-color 150ms; }
.carril-puntos span.aqui { background: var(--verde); }
.carril-flecha { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--linea); background: var(--papel-alto); display: grid; place-items: center; cursor: pointer; font-size: 1.1rem; color: var(--tinta); transition: transform 220ms var(--salida), background-color 150ms; }
.carril-flecha:hover { transform: translateY(-2px); background: var(--sobre-verde); }

/* ── Preguntas: acordeón numerado ── */
.preguntas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; margin-top: 3.5rem; align-items: start; }
@media (max-width: 900px) { .preguntas { grid-template-columns: 1fr; } }
.preguntas-lado { position: sticky; top: 6rem; }
.preguntas-lado .marco { background: var(--verde); border-radius: var(--radio-tarjeta); aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: clip; position: relative; }
.preguntas-lado .marco img { width: 55%; }
.preguntas-lado h3 { font-family: 'Newsreader', serif; font-weight: 500; font-size: 1.7rem; margin-top: 1.5rem; }
.preguntas-lado p { color: var(--tinta-suave); margin-top: 0.5rem; max-width: 40ch; }
.pregunta { background: var(--papel-alto); border-radius: var(--radio); margin-top: 0.9rem; overflow: clip; }
.pregunta summary { display: flex; align-items: center; gap: 1.1rem; padding: 1.3rem 1.5rem; cursor: pointer; list-style: none; font-weight: 500; font-size: 1.05rem; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary .num { font-family: 'IBM Plex Mono', monospace; color: var(--tinta-tenue); font-size: 0.9rem; }
.pregunta summary .mas { margin-left: auto; font-size: 1.4rem; color: var(--tinta-suave); transition: transform 220ms var(--salida); }
.pregunta[open] summary .mas { transform: rotate(45deg); }
.pregunta .respuesta { padding: 0 1.5rem 1.4rem 4rem; color: var(--tinta-suave); max-width: 60ch; }
@supports (interpolate-size: allow-keywords) {
  .pregunta::details-content { block-size: 0; overflow-y: clip; transition: content-visibility 320ms allow-discrete, block-size 320ms var(--salida); }
  .pregunta[open]::details-content { block-size: auto; }
}

/* ── Cierre y pie ── */
.cierre { position: relative; overflow: clip; background: radial-gradient(100rem 60rem at 50% 120%, #2e7258 0%, var(--verde) 50%, var(--verde-hondo) 100%); color: #fff; text-align: center; padding: clamp(5rem, 10vw, 8rem) 1.5rem; }
.cierre h2 { color: #fff; max-width: 18ch; margin-inline: auto; }
.cierre .baja { color: rgba(255,255,255,0.8); max-width: 44ch; margin: 1.2rem auto 0; font-size: 1.05rem; }
/* posicionado a propósito: el héroe pegajoso queda detrás también acá */
.pie { position: relative; z-index: 1; background: var(--verde-hondo); color: #fff; padding: 3.5rem clamp(1.25rem, 4vw, 4rem) 2.5rem; }
.pie-arriba { display: flex; flex-wrap: wrap; gap: 3rem; justify-content: space-between; align-items: flex-start; max-width: 1280px; margin-inline: auto; }
.pie img { height: 30px; }
.pie h3 { font-size: 0.85rem; font-family: 'IBM Plex Mono', monospace; color: rgba(255,255,255,0.7); font-weight: 400; }
.pie ul { margin-top: 0.9rem; display: grid; gap: 0.55rem; }
.pie ul a { color: rgba(255,255,255,0.85); font-size: 0.95rem; }
.pie ul a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pie-abajo { max-width: 1280px; margin: 3rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.15); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; color: rgba(255,255,255,0.6); }

@media (prefers-reduced-motion: reduce) {
  .enciende .palabra { color: var(--tinta); transition: none; }
  html.anim .sin-contar .palo { height: calc(var(--h) * 1%); }
  .barras .palo, .renglon, .carril-flecha { transition: none; }
  .tendencia .traza, html.anim .sin-trazar .traza { stroke-dashoffset: 0; transition: none; }
  .carril { scroll-behavior: auto; }
  .cinta-pista, .barras .palo, .tendencia circle, html.anim .plazos .plazo { animation: none; }
  .vitrina .remite, .vitrina .asunto, .vitrina .cuerpo, .vitrina .paso, .sumadora .chip { transition: none; }
}

/* ── Dos entradas: panel de subida simulado + renglones sobre claro ── */
.entradas-par { margin-top: 0; align-items: center; }
.panel-claro { box-shadow: 0 32px 64px -36px rgba(9, 26, 20, 0.35); }
.subida-mock { display: grid; gap: 0.8rem; margin-top: 1.2rem; }
.subida-fila { display: flex; align-items: center; gap: 1rem; background: var(--papel); border-radius: 14px; padding: 0.9rem 1.1rem; }
.subida-fila strong { display: block; font-size: 0.95rem; }
.subida-fila span:not(.chip) { font-size: 0.8rem; color: var(--tinta-tenue); }
.subida-fila > div { flex: 1; min-width: 0; }
.subida-fila .chip { flex: none; }
.subida-icono { flex: none; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; background: var(--sobre-verde); color: var(--verde-hondo); border-radius: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; }
.subida-fila.revisado { background: var(--verde-hondo); }
.subida-fila.revisado strong { color: #fff; }
.subida-fila.revisado span { color: rgba(255,255,255,0.7); }
.punto-late { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--verde-claro); animation: late 2.2s ease-in-out infinite; }
.renglon.claro { background: var(--papel-alto); box-shadow: 0 16px 32px -28px rgba(9,26,20,0.3); }
.renglon.claro h3 { color: var(--tinta); }
.renglon.claro p { color: var(--tinta-suave); }
.renglon.claro .icono { background: var(--verde); color: #fff; font-family: 'Newsreader', serif; font-size: 1.1rem; }
.renglon.claro:hover { background: var(--papel-alto); transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) { .punto-late { animation: none; } }