/* Rinde: página de presentación. Usa los tokens de app.css (claro y oscuro). */

.landing { background: var(--lienzo); }
.landing main { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
.landing h1, .landing h2 { letter-spacing: -0.025em; }
.landing h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 600; line-height: 1.15; margin: 0.6rem 0 1.6rem; max-width: 22ch; }
.landing h3 { font-size: 1.05rem; margin-bottom: 0.45rem; }
.landing p { line-height: 1.6; }
.boton--grande { height: 50px; padding: 0 1.5rem; font-size: 0.98rem; }

/* Barra */
.l-barra {
    position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1.5rem;
    padding: 0.8rem 1.5rem; background: color-mix(in srgb, var(--lienzo) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid color-mix(in srgb, var(--linea) 60%, transparent);
}
.l-barra__marca { color: var(--tinta); }
.l-barra__marca .marca { height: 38px; }
.l-barra__nav { display: flex; gap: 0.3rem; margin: 0 auto; }
.l-barra__nav a { padding: 0.5rem 0.85rem; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 0.92rem; color: var(--tinta-suave); }
.l-barra__nav a:hover { color: var(--tinta); background: var(--superficie); }
.l-barra__acciones { display: flex; align-items: center; gap: 0.5rem; }
.l-barra .tema--flotante { position: static; }

/* Portada */
.l-portada { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; align-items: center; padding: 4.5rem 0 4rem; }
.l-portada h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); font-weight: 700; line-height: 1.04; margin: 1rem 0 1.2rem; max-width: 15ch; }
.l-portada__bajada { font-size: 1.12rem; color: var(--tinta-suave); max-width: 36rem; margin: 0 0 1.8rem; }
.l-portada__acciones { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.l-portada__puntos { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: 0.5rem; }
.l-portada__puntos li { display: flex; align-items: center; gap: 0.55rem; font-weight: 500; font-size: 0.94rem; }
.l-portada__puntos .icono { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--t-salvia); color: var(--t-salvia-txt); flex: none; box-sizing: content-box; }

/* Vista previa de la app */
.l-demo { margin: 0; }
.l-demo__ventana {
    background: var(--superficie); border-radius: var(--r-l); padding: 1.1rem; border: 1px solid var(--linea);
    box-shadow: 0 30px 60px -30px rgb(20 22 30 / 0.35), var(--sombra);
    transform: rotate(-1.2deg);
}
.l-demo__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 0.9rem; }
.l-demo__kpis div { background: var(--superficie-2); border-radius: 14px; padding: 0.7rem 0.85rem; }
.l-demo__kpis span { display: block; font-size: 0.7rem; color: var(--tinta-suave); font-weight: 600; }
.l-demo__kpis strong { font-size: 1.7rem; font-weight: 300; letter-spacing: -0.02em; }
.l-demo__kpis small { font-size: 0.9rem; color: var(--tinta-suave); }
.l-demo__semanas { display: grid; grid-template-columns: repeat(53, 1fr); gap: 2px; margin-bottom: 0.9rem; }
.l-demo__semanas i { height: 14px; border-radius: 2px; background: var(--superficie-3); }
.l-demo__semanas .d1 { background: color-mix(in srgb, #6f9474 50%, var(--superficie)); }
.l-demo__semanas .d2 { background: color-mix(in srgb, #6f9474 80%, var(--superficie)); }
.l-demo__semanas .d3 { background: light-dark(#4f7055, #8fc49a); }
.l-demo__semanas .d0 { background: color-mix(in srgb, #f0ad45 55%, var(--superficie)); }
.l-demo__semanas .df { background: transparent; box-shadow: inset 0 0 0 1px var(--linea); }
.l-demo__tabla { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.l-demo__tabla th { text-align: left; color: var(--tinta-suave); font-weight: 500; padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--linea); }
.l-demo__tabla td { padding: 0.5rem; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.l-demo__tabla td:first-child { font-size: 0.95rem; }
.l-demo__tabla tr.activa td { background: var(--azul-suave); }
.l-demo__tabla .tag { font-size: 0.72rem; }
.l-demo__mini, .l-demo__enl, .l-demo__vacio { display: inline-flex; width: 20px; height: 20px; border-radius: 5px; margin-right: 3px; vertical-align: middle; }
.l-demo__mini { background: linear-gradient(135deg, #5c7a60, #8fc49a); }
.l-demo__mini.b { background: linear-gradient(135deg, #3a76f0, #9cc4ee); }
.l-demo__mini.c { background: linear-gradient(135deg, #f0ad45, #e8d66a); }
.l-demo__enl { align-items: center; justify-content: center; width: auto; padding: 0 5px; background: var(--t-salvia); color: var(--t-salvia-txt); font-size: 0.66rem; font-weight: 700; }
.l-demo__vacio { align-items: center; justify-content: center; border: 1.5px dashed var(--linea-fuerte); color: var(--tinta-suave); font-size: 0.75rem; }
.l-demo figcaption { margin-top: 1.2rem; text-align: center; font-size: 0.82rem; color: var(--tinta-suave); }

/* Secciones */
.l-seccion { padding: 4rem 0; border-top: 1px solid var(--linea); }
.l-tarjetas { display: grid; gap: 1rem; }
.l-tarjetas--3 { grid-template-columns: repeat(3, 1fr); }
.l-tarjeta, .l-funcion { background: var(--superficie); border-radius: var(--r-l); padding: 1.5rem; box-shadow: var(--sombra); }
.l-tarjeta p, .l-funcion p { margin: 0; color: var(--tinta-suave); font-size: 0.93rem; }
.l-tarjeta__num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--t-ambar); color: var(--t-ambar-txt); font-weight: 700; margin-bottom: 0.9rem; }
.l-problema h2 { max-width: 26ch; }

.l-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; counter-reset: paso; }
.l-pasos li { position: relative; background: var(--superficie); border-radius: var(--r-l); padding: 1.5rem; box-shadow: var(--sombra); counter-increment: paso; }
.l-pasos li::before { content: counter(paso); position: absolute; top: 1.2rem; right: 1.4rem; font-size: 2.6rem; font-weight: 200; color: var(--linea-fuerte); line-height: 1; }
.l-pasos__icono { display: inline-flex; width: 46px; height: 46px; border-radius: 14px; align-items: center; justify-content: center; background: var(--negro); color: var(--sobre-negro); margin-bottom: 1rem; }
.l-pasos p { margin: 0; color: var(--tinta-suave); font-size: 0.92rem; }

.l-tarjetas--funciones { grid-template-columns: repeat(4, 1fr); }
.l-funcion h3::before { content: ""; display: block; width: 28px; height: 4px; border-radius: 2px; background: #f0ad45; margin-bottom: 0.9rem; }

.l-paocc { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.l-paocc__texto p { color: var(--tinta-suave); max-width: 40rem; }
.l-paocc__datos { margin: 0; display: grid; gap: 1rem; }
.l-paocc__datos div { display: flex; align-items: baseline; gap: 1rem; background: var(--superficie); border-radius: var(--r-l); padding: 1.2rem 1.5rem; box-shadow: var(--sombra); }
.l-paocc__datos dt { font-size: 2.8rem; font-weight: 300; letter-spacing: -0.03em; min-width: 2.2ch; }
.l-paocc__datos dd { margin: 0; color: var(--tinta-suave); }

.l-preguntas details { background: var(--superficie); border-radius: var(--r-m); padding: 0 1.3rem; margin-bottom: 0.6rem; box-shadow: var(--sombra); max-width: 52rem; }
.l-preguntas summary { padding: 1.1rem 0; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.l-preguntas summary::-webkit-details-marker { display: none; }
.l-preguntas summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--tinta-suave); transition: transform 0.2s; }
.l-preguntas details[open] summary::after { transform: rotate(45deg); }
.l-preguntas details p { margin: 0 0 1.2rem; color: var(--tinta-suave); }

.l-final { text-align: center; padding: 5rem 1rem; border-top: 1px solid var(--linea); }
.l-final h2 { margin: 1.2rem auto 1.6rem; max-width: 20ch; }
.l-final .l-portada__acciones { justify-content: center; }
.l-final__icono { height: 64px; margin: 0 auto; }

.l-pie { text-align: center; padding: 2.5rem 1.5rem 3rem; border-top: 1px solid var(--linea); color: var(--tinta-suave); font-size: 0.85rem; }
.l-pie__marca { height: 32px; margin: 0 auto 1rem; color: var(--tinta); }
.l-pie p { max-width: 42rem; margin: 0.3rem auto; }
.l-pie__version { font-size: 0.78rem; }

/* Pantallas medianas y pequeñas */
@media (max-width: 1000px) {
    .l-portada { grid-template-columns: 1fr; padding-top: 3rem; }
    .l-pasos, .l-tarjetas--funciones { grid-template-columns: repeat(2, 1fr); }
    .l-paocc { grid-template-columns: 1fr; gap: 1.5rem; }
    .l-barra__nav { display: none; }
    .l-barra__acciones { margin-left: auto; }
}
@media (max-width: 640px) {
    .landing main { padding: 0 1rem; }
    .l-barra { padding: 0.7rem 1rem; }
    .l-tarjetas--3, .l-pasos, .l-tarjetas--funciones { grid-template-columns: 1fr; }
    .l-demo__ventana { transform: none; padding: 0.8rem; }
    .l-demo__tabla th:nth-child(3), .l-demo__tabla td:nth-child(3) { display: none; }
    .l-seccion { padding: 3rem 0; }
    .l-barra .marca__nombre { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .l-preguntas summary::after { transition: none; } }
.l-pasos__icono .icono { width: 22px; height: 22px; }
/* Evita desborde horizontal en pantallas angostas */
.l-demo, .l-demo__ventana { min-width: 0; max-width: 100%; }
.l-demo__ventana { overflow: hidden; }
@media (max-width: 1000px) { .l-portada, .l-paocc { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .l-demo__semanas { gap: 1px; } .l-demo__semanas i { height: 10px; } }

.l-funcion--oculta { display: none; }

/* ---------- Vista previa: comprobante y plazo flotantes ---------- */
.l-demo { position: relative; }
.l-demo__plazo, .l-demo__ce {
    position: absolute; z-index: 2; background: var(--superficie); border: 1px solid var(--linea);
    border-radius: 16px; box-shadow: 0 18px 40px -18px rgb(20 22 30 / 0.45);
}
.l-demo__plazo { top: -22px; right: -14px; display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.9rem; background: var(--t-ambar); color: var(--t-ambar-txt); border-color: transparent; transform: rotate(2deg); }
.l-demo__plazo b { font-size: 1.8rem; font-weight: 300; line-height: 1; }
.l-demo__plazo span { font-size: 0.72rem; font-weight: 600; line-height: 1.25; }
.l-demo__ce { left: -26px; bottom: 34px; width: 230px; padding: 0.8rem 0.95rem; display: grid; gap: 0.2rem; transform: rotate(-2deg); }
.l-demo__ce-n { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; color: var(--tinta-suave); text-transform: uppercase; }
.l-demo__ce strong { font-size: 1.45rem; font-weight: 300; letter-spacing: -0.02em; }
.l-demo__ce-p { font-size: 0.74rem; color: var(--tinta-suave); }
.l-demo__ce-r { display: flex; gap: 0.3rem; margin-top: 0.3rem; }
.l-demo__ce-r i { font-style: normal; font-size: 0.68rem; font-weight: 700; padding: 0.12rem 0.5rem; border-radius: 999px; background: var(--t-salvia); color: var(--t-salvia-txt); }
.l-demo__ce-r i::before { content: "✓ "; }

/* ---------- Rinde y SISREC ---------- */
.l-sisrec h2 { max-width: 24ch; }
.l-sisrec__bajada { max-width: 46rem; color: var(--tinta-suave); font-size: 1.05rem; margin: -0.6rem 0 2rem; }
.l-flujo { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: f; }
.l-flujo li { position: relative; display: grid; gap: 0.25rem; padding: 1.1rem 1.4rem 1.1rem 1.2rem; background: var(--superficie); box-shadow: var(--sombra); }
.l-flujo li:first-child { border-radius: var(--r-l) 0 0 var(--r-l); }
.l-flujo li:last-child { border-radius: 0 var(--r-l) var(--r-l) 0; background: var(--negro); color: var(--sobre-negro); }
.l-flujo li:last-child span:not(.l-flujo__n) { color: color-mix(in srgb, var(--sobre-negro) 75%, transparent); }
.l-flujo li:not(:last-child)::after {
    content: ""; position: absolute; right: -9px; top: 50%; z-index: 1; width: 18px; height: 18px;
    background: inherit; transform: translateY(-50%) rotate(45deg); border-top: 1px solid var(--linea); border-right: 1px solid var(--linea);
}
.l-flujo__n { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; background: var(--t-ambar); color: var(--t-ambar-txt); margin-bottom: 0.3rem; }
.l-flujo strong { font-size: 1rem; }
.l-flujo span:not(.l-flujo__n) { font-size: 0.86rem; color: var(--tinta-suave); line-height: 1.45; }
.l-tarjetas--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Rendición de gastos ---------- */
.l-gastos { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.l-gastos__texto p { color: var(--tinta-suave); max-width: 38rem; }
.l-lista { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.l-lista li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.94rem; line-height: 1.5; }
.l-lista .icono { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--t-salvia); color: var(--t-salvia-txt); flex: none; box-sizing: content-box; margin-top: 0.1rem; }
.l-gastos__visual { display: grid; gap: 1rem; }
.l-items { display: grid; gap: 0.6rem; }
.l-item { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem; padding: 0.9rem 1.1rem; background: var(--superficie); border-radius: 16px; box-shadow: var(--sombra); }
.l-item span { font-weight: 600; font-size: 0.88rem; }
.l-item b { font-weight: 400; font-size: 0.95rem; text-align: right; }
.l-item small { color: var(--tinta-suave); font-size: 0.75rem; }
.l-item i { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--c) var(--p), var(--superficie-3) var(--p)); }
.l-ce { background: #fff; color: #1d1e20; border-radius: 16px; padding: 1rem 1.1rem; box-shadow: 0 24px 50px -24px rgb(20 22 30 / 0.45); border: 1px solid #e3e5e8; font-size: 0.8rem; transform: rotate(-1deg); }
.l-ce__cab { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.6rem; border-bottom: 1px solid #a9c9b4; margin-bottom: 0.6rem; }
.l-ce__cab span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; background: #e2f0e8; padding: 0.2rem 0.5rem; border-radius: 4px; }
.l-ce__cab b { font-size: 1.1rem; }
.l-ce dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.9rem; margin: 0 0 0.5rem; }
.l-ce dt { font-weight: 700; color: #4b5058; }
.l-ce dd { margin: 0; }
.l-ce p { margin: 0 0 0.9rem; color: #4b5058; font-size: 0.76rem; }
.l-ce__firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.l-ce__firmas span { border-top: 1px solid #777; padding-top: 0.25rem; text-align: center; font-size: 0.7rem; font-weight: 700; color: #4b5058; }

@media (max-width: 1000px) {
    .l-flujo, .l-tarjetas--4 { grid-template-columns: repeat(2, 1fr); }
    .l-flujo { gap: 0.6rem; }
    .l-flujo li, .l-flujo li:first-child, .l-flujo li:last-child { border-radius: var(--r-l); }
    .l-flujo li::after { display: none; }
    .l-gastos { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
    .l-demo__ce { left: 8px; }
    .l-demo__plazo { right: 8px; }
}
@media (max-width: 640px) {
    .l-flujo, .l-tarjetas--4 { grid-template-columns: 1fr; }
    .l-demo__plazo, .l-demo__ce { position: static; transform: none; margin-top: 0.7rem; width: auto; }
}

/* ---------- Banner animado (ciclo de 10 s) ---------- */
.l-banner { grid-column: 1 / -1; margin-top: 0.5rem; }
.banner { display: block; width: 100%; height: auto; font-family: inherit; }
.banner--vertical { display: none; max-width: 420px; margin: 0 auto; }
@media (max-width: 640px) { .banner--ancho { display: none; } .banner--vertical { display: block; } }
.banner .b-fondo { fill: var(--superficie); stroke: var(--linea); }
.banner .b-punto { fill: var(--linea-fuerte); opacity: 0.55; }
.banner .b-tarjeta { fill: var(--superficie); stroke: var(--linea-fuerte); stroke-width: 1; }
.banner .b-texto { fill: var(--tinta); font-weight: 600; }
.banner .b-sigla { fill: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.02em; }
.banner .b-camino { fill: none; stroke: var(--linea-fuerte); stroke-width: 2; stroke-dasharray: 6 8; opacity: 0.45; }
.banner .b-pulso { fill: none; stroke: #f0ad45; stroke-width: 3; opacity: 0; }
.banner .b-marca-fondo { fill: var(--marca-fondo); }
.banner .b-marca-r { stroke: var(--marca-trazo); }
.banner .b-plazo-fondo { fill: var(--t-ambar); }
.banner .b-plazo-texto { fill: var(--t-ambar-txt); font-weight: 700; }
.banner .b-plazo-trazo { stroke: var(--t-ambar-txt); }
.banner .b-correo-fondo { fill: var(--superficie); stroke: var(--t-ambar-txt); stroke-width: 1.4; }
.banner .b-correo { opacity: 0; }
.banner .b-sello-fondo { fill: var(--negro); }
.banner .b-sello-texto { fill: var(--sobre-negro); font-weight: 700; }
.banner .b-sello-trazo { stroke: #8fc49a; }
.banner .b-entrada, .banner .b-salida, .banner .b-sello, .banner .b-centro, .banner .b-pulso, .banner .b-campana, .banner .b-correo { transform-box: fill-box; transform-origin: center; }
.banner .b-campana { transform-origin: 50% 0; }
.banner--ancho { --ox: -36px; --oy: 0px; --sx: 36px; --sy: 0px; }
.banner--vertical { --ox: 0px; --oy: -26px; --sx: 0px; --sy: 26px; }
.banner .b-ok { stroke-dasharray: 20; stroke-dashoffset: 0; }

@media (prefers-reduced-motion: no-preference) {
    .banner .b-camino { animation: b-flujo 1.2s linear infinite; }
    @keyframes b-flujo { to { stroke-dashoffset: -28; } }
    .banner .b-pulso { animation: b-pulso 10s ease-out infinite; }
    .banner .b-pulso--2 { animation-delay: 0.25s; }
    @keyframes b-pulso { 0%, 33.0% { opacity: 0; transform: scale(1); } 33.5% { opacity: 0.6; transform: scale(1); } 44.0%, 100% { opacity: 0; transform: scale(1.75); } }
    .banner .b-centro { animation: b-centro 10s ease-in-out infinite; }
    @keyframes b-centro { 0%, 32.0%, 40.0%, 100% { transform: scale(1); } 35.5% { transform: scale(1.09); } }
    .banner .b-sello { animation: b-sello 10s ease-out infinite; }
    @keyframes b-sello { 0%, 59.0% { opacity: 0; transform: scale(0.85); } 63.0% { opacity: 1; transform: scale(1.05); } 65.0%, 92.0% { opacity: 1; transform: scale(1); } 96.0%, 100% { opacity: 0; transform: scale(1); } }
    .banner .b-campana { animation: b-campana 10s ease-in-out infinite; }
    @keyframes b-campana { 0%, 66.0%, 76.0%, 100% { transform: rotate(0); } 68.0% { transform: rotate(16deg); } 70.0% { transform: rotate(-14deg); } 72.0% { transform: rotate(10deg); } 74.0% { transform: rotate(-6deg); } }
    .banner .b-correo { animation: b-correo 10s ease-out infinite; }
    @keyframes b-correo { 0%, 69.0% { opacity: 0; transform: translate(0, 0); } 72.0% { opacity: 1; transform: translate(0, 0); } 84.0%, 100% { opacity: 0; transform: translate(34px, -22px) rotate(-8deg); } }
    .banner .b-e0 { animation: b-e0 10s ease-in-out infinite; }
    @keyframes b-e0 { 0%, 3.0% { opacity: 0; transform: translate(var(--ox), var(--oy)); } 8.0%, 22.0% { opacity: 1; transform: translate(0, 0) scale(1); } 31.0%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.25); } }
    .banner .b-in0 { animation: b-flujo 1.2s linear infinite, b-in0 10s ease-in-out infinite; }
    @keyframes b-in0 { 0%, 20.0%, 34.0%, 100% { opacity: 0.45; stroke: var(--linea-fuerte); } 25.0%, 31.0% { opacity: 1; stroke: #f0ad45; } }
    .banner .b-e1 { animation: b-e1 10s ease-in-out infinite; }
    @keyframes b-e1 { 0%, 6.5% { opacity: 0; transform: translate(var(--ox), var(--oy)); } 11.5%, 25.0% { opacity: 1; transform: translate(0, 0) scale(1); } 34.0%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.25); } }
    .banner .b-in1 { animation: b-flujo 1.2s linear infinite, b-in1 10s ease-in-out infinite; }
    @keyframes b-in1 { 0%, 23.0%, 37.0%, 100% { opacity: 0.45; stroke: var(--linea-fuerte); } 28.0%, 34.0% { opacity: 1; stroke: #f0ad45; } }
    .banner .b-e2 { animation: b-e2 10s ease-in-out infinite; }
    @keyframes b-e2 { 0%, 10.0% { opacity: 0; transform: translate(var(--ox), var(--oy)); } 15.0%, 28.0% { opacity: 1; transform: translate(0, 0) scale(1); } 37.0%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.25); } }
    .banner .b-in2 { animation: b-flujo 1.2s linear infinite, b-in2 10s ease-in-out infinite; }
    @keyframes b-in2 { 0%, 26.0%, 40.0%, 100% { opacity: 0.45; stroke: var(--linea-fuerte); } 31.0%, 37.0% { opacity: 1; stroke: #f0ad45; } }
    .banner .b-e3 { animation: b-e3 10s ease-in-out infinite; }
    @keyframes b-e3 { 0%, 13.5% { opacity: 0; transform: translate(var(--ox), var(--oy)); } 18.5%, 31.0% { opacity: 1; transform: translate(0, 0) scale(1); } 40.0%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.25); } }
    .banner .b-in3 { animation: b-flujo 1.2s linear infinite, b-in3 10s ease-in-out infinite; }
    @keyframes b-in3 { 0%, 29.0%, 43.0%, 100% { opacity: 0.45; stroke: var(--linea-fuerte); } 34.0%, 40.0% { opacity: 1; stroke: #f0ad45; } }
    .banner .b-s0 { animation: b-s0 10s ease-out infinite; }
    @keyframes b-s0 { 0%, 42.0% { opacity: 0; transform: translate(var(--sx), var(--sy)); } 47.0%, 92.0% { opacity: 1; transform: translate(0, 0); } 96.0%, 100% { opacity: 0; transform: translate(0, 0); } }
    .banner .b-s0 .b-ok { animation: b-ok0 10s ease-out infinite; }
    @keyframes b-ok0 { 0%, 46.0% { stroke-dashoffset: 20; } 51.0%, 100% { stroke-dashoffset: 0; } }
    .banner .b-out0 { animation: b-flujo 1.2s linear infinite, b-out0 10s ease-in-out infinite; }
    @keyframes b-out0 { 0%, 37.0%, 48.0%, 100% { opacity: 0.45; stroke: var(--linea-fuerte); } 40.0%, 44.0% { opacity: 1; stroke: #6f9474; } }
    .banner .b-s1 { animation: b-s1 10s ease-out infinite; }
    @keyframes b-s1 { 0%, 45.5% { opacity: 0; transform: translate(var(--sx), var(--sy)); } 50.5%, 92.0% { opacity: 1; transform: translate(0, 0); } 96.0%, 100% { opacity: 0; transform: translate(0, 0); } }
    .banner .b-s1 .b-ok { animation: b-ok1 10s ease-out infinite; }
    @keyframes b-ok1 { 0%, 49.5% { stroke-dashoffset: 20; } 54.5%, 100% { stroke-dashoffset: 0; } }
    .banner .b-out1 { animation: b-flujo 1.2s linear infinite, b-out1 10s ease-in-out infinite; }
    @keyframes b-out1 { 0%, 40.5%, 51.5%, 100% { opacity: 0.45; stroke: var(--linea-fuerte); } 43.5%, 47.5% { opacity: 1; stroke: #6f9474; } }
    .banner .b-s2 { animation: b-s2 10s ease-out infinite; }
    @keyframes b-s2 { 0%, 49.0% { opacity: 0; transform: translate(var(--sx), var(--sy)); } 54.0%, 92.0% { opacity: 1; transform: translate(0, 0); } 96.0%, 100% { opacity: 0; transform: translate(0, 0); } }
    .banner .b-s2 .b-ok { animation: b-ok2 10s ease-out infinite; }
    @keyframes b-ok2 { 0%, 53.0% { stroke-dashoffset: 20; } 58.0%, 100% { stroke-dashoffset: 0; } }
    .banner .b-out2 { animation: b-flujo 1.2s linear infinite, b-out2 10s ease-in-out infinite; }
    @keyframes b-out2 { 0%, 44.0%, 55.0%, 100% { opacity: 0.45; stroke: var(--linea-fuerte); } 47.0%, 51.0% { opacity: 1; stroke: #6f9474; } }
    .banner .b-s3 { animation: b-s3 10s ease-out infinite; }
    @keyframes b-s3 { 0%, 52.5% { opacity: 0; transform: translate(var(--sx), var(--sy)); } 57.5%, 92.0% { opacity: 1; transform: translate(0, 0); } 96.0%, 100% { opacity: 0; transform: translate(0, 0); } }
    .banner .b-s3 .b-ok { animation: b-ok3 10s ease-out infinite; }
    @keyframes b-ok3 { 0%, 56.5% { stroke-dashoffset: 20; } 61.5%, 100% { stroke-dashoffset: 0; } }
    .banner .b-out3 { animation: b-flujo 1.2s linear infinite, b-out3 10s ease-in-out infinite; }
    @keyframes b-out3 { 0%, 47.5%, 58.5%, 100% { opacity: 0.45; stroke: var(--linea-fuerte); } 50.5%, 54.5% { opacity: 1; stroke: #6f9474; } }
}