/* ============================================================
   SISTEMA PARA INSTITUTOS (CicloEdu) · sistema-para-institutos.html
   Versión 3 (oct 2026). Escenas SVG propias; la base (hero en 2
   columnas, tarjetas, pasos, FAQ, cierre, entradas GSAP) viene de
   diseno-web.css, diseno-ecommerce.css y diseno-soporte.css.
   Las coreografías corren solo con .en-vista; sin JS o con movimiento
   reducido se ve el cuadro final: la cuota cobrada y el interesado
   inscripto.
   ============================================================ */
.ce-row{fill:rgba(6,5,18,.45);stroke:var(--line)}
.ce-av{fill:url(#ce-grad)}
.ce-ini{fill:#fff !important;font-weight:700}
.ce-tile{fill:rgba(6,5,18,.45);stroke:var(--line)}
.ce-rojo{fill:var(--danger) !important}
.ce-tel{fill:rgba(19,16,41,.97);stroke:var(--line-strong)}
.ce-burb{fill:#22303A}
.ce-btn{fill:var(--mint)}
.ce-okbox{fill:rgba(62,230,168,.1);stroke:rgba(62,230,168,.55)}
.ce-b-ok rect{fill:rgba(62,230,168,.14);stroke:rgba(62,230,168,.6)}
.ce-b-ok text{fill:var(--mint) !important;font-weight:700}
.ce-b-mal rect{fill:rgba(255,92,135,.14);stroke:rgba(255,92,135,.6)}
.ce-b-mal text{fill:var(--danger) !important;font-weight:700}
.ce-b-lav rect{fill:rgba(169,164,248,.12);stroke:rgba(169,164,248,.45)}
.ce-b-lav text{fill:var(--lavender) !important;font-weight:700}
.ce-b-gris rect{fill:rgba(138,134,184,.08);stroke:rgba(138,134,184,.35)}
.ce-b-gris text{fill:var(--muted) !important}

/* ============================================================
   HERO · a Martín le llega el recordatorio, paga desde el celular,
   el panel lo saca de la lista y el interesado que no se había
   anotado termina inscripto
   ============================================================ */
.ceh{--d:12s}
.ceh .ceh-viejo,.ceh .ceh-d1,.ceh .ceh-d2{opacity:0}
.ceh-flash{fill:rgba(62,230,168,.07);stroke:var(--mint);stroke-width:1.5;opacity:0}
.ceh-tap{fill:none;stroke:#fff;stroke-width:1.6;opacity:0}

.en-vista .ceh .ceh-viejo{animation:ceh-viejo var(--d) linear infinite}
.en-vista .ceh .ceh-nuevo{animation:ceh-nuevo var(--d) linear infinite}
@keyframes ceh-viejo{0%,44%{opacity:1}46%,94%{opacity:0}97%,100%{opacity:1}}
@keyframes ceh-nuevo{0%,44%{opacity:0}46%,94%{opacity:1}97%,100%{opacity:0}}
.en-vista .ceh .ceh-m1{animation:ceh-m1 var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes ceh-m1{0%,8%{opacity:0;transform:translateY(10px)}13%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
.en-vista .ceh .ceh-pagar{animation:ceh-pagar var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes ceh-pagar{0%,16%{opacity:0;transform:translateY(8px)}21%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
.en-vista .ceh .ceh-pagar .ce-btn{animation:ceh-btn var(--d) linear infinite}
@keyframes ceh-btn{0%,31%{fill:var(--mint)}33%{fill:#fff}37%,100%{fill:var(--mint)}}
.en-vista .ceh .ceh-tap{animation:ceh-tap var(--d) ease-out infinite}
@keyframes ceh-tap{0%,30%{opacity:0;transform:scale(.4)}32%{opacity:1}40%,100%{opacity:0;transform:scale(1.9)}}
.en-vista .ceh .ceh-ok{animation:ceh-ok var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes ceh-ok{0%,37%{opacity:0;transform:translateY(10px)}42%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
.en-vista .ceh .ceh-flash{animation:ceh-flash var(--d) ease-out infinite}
@keyframes ceh-flash{0%,45%{opacity:0}48%{opacity:1}62%,100%{opacity:0}}
.en-vista .ceh .ceh-d1{animation:ceh-d1 var(--d) linear infinite}
.en-vista .ceh .ceh-d2{animation:ceh-d2 var(--d) cubic-bezier(.16,1,.3,1) infinite}
.en-vista .ceh .ceh-d3{animation:ceh-d3 var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes ceh-d1{0%,58%{opacity:1}60%,96%{opacity:0}98%,100%{opacity:1}}
@keyframes ceh-d2{0%,58%{opacity:0;transform:translateX(8px)}61%,74%{opacity:1;transform:none}76%,100%{opacity:0}}
@keyframes ceh-d3{0%,74%{opacity:0;transform:scale(.8)}78%,94%{opacity:1;transform:none}98%,100%{opacity:0}}

/* ============================================================
   TARJETA 1 · a cada interesado le escribimos; uno se inscribe
   ============================================================ */
.cef-int{--d:9s}
.cef-int .cei-a,.cef-int .cei-b2{opacity:0}
.en-vista .cef-int .cei-a1{animation:cei-a1 var(--d) linear infinite}
.en-vista .cef-int .cei-a2{animation:cei-a2 var(--d) linear infinite}
.en-vista .cef-int .cei-a3{animation:cei-a3 var(--d) linear infinite}
@keyframes cei-a1{0%,16%{opacity:1}19%,95%{opacity:0}98%,100%{opacity:1}}
@keyframes cei-a2{0%,28%{opacity:1}31%,95%{opacity:0}98%,100%{opacity:1}}
@keyframes cei-a3{0%,40%{opacity:1}43%,95%{opacity:0}98%,100%{opacity:1}}
.en-vista .cef-int .cei-b1{animation:cei-b1 var(--d) cubic-bezier(.16,1,.3,1) infinite}
.en-vista .cef-int .cei-b2{animation:cei-b2 var(--d) cubic-bezier(.16,1,.3,1) infinite}
.en-vista .cef-int .cei-b3{animation:cei-b3 var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes cei-b1{0%,16%{opacity:0;transform:translateX(10px)}20%,95%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes cei-b2{0%,28%{opacity:0;transform:translateX(10px)}32%,58%{opacity:1;transform:none}61%,100%{opacity:0}}
@keyframes cei-b3{0%,40%{opacity:0;transform:translateX(10px)}44%,95%{opacity:1;transform:none}98%,100%{opacity:0}}
.en-vista .cef-int .cei-c{animation:cei-c var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes cei-c{0%,59%{opacity:0;transform:scale(.7)}65%,95%{opacity:1;transform:none}98%,100%{opacity:0}}

/* ============================================================
   TARJETA 2 · la campana sale sola y cada deudor queda avisado
   ============================================================ */
.cef-mor{--d:9s}
.cem-sobre{fill:rgba(169,164,248,.35);stroke:var(--lavender);stroke-width:1;opacity:0}
.cem-onda{fill:none;stroke:var(--lavender);stroke-width:1.4;opacity:0}
.cem-campana{transform-origin:50% 0}
.en-vista .cef-mor .cem-campana{animation:cem-campana var(--d) ease-in-out infinite}
@keyframes cem-campana{0%,6%,26%,46%,66%,100%{transform:rotate(0)}9%,29%,49%{transform:rotate(-14deg)}12%,32%,52%{transform:rotate(12deg)}15%,35%,55%{transform:rotate(-6deg)}}
.en-vista .cef-mor .cem-onda{animation:cem-onda calc(var(--d) / 4.5) ease-out infinite}
@keyframes cem-onda{0%{opacity:.7;transform:scale(.7)}100%{opacity:0;transform:scale(1.5)}}
.cef-mor .cem-av{opacity:1}
.en-vista .cef-mor .cem-s1{animation:cem-s1 var(--d) cubic-bezier(.45,0,.3,1) infinite}
.en-vista .cef-mor .cem-s2{animation:cem-s2 var(--d) cubic-bezier(.45,0,.3,1) infinite}
.en-vista .cef-mor .cem-s3{animation:cem-s3 var(--d) cubic-bezier(.45,0,.3,1) infinite}
@keyframes cem-s1{0%,9%{opacity:0;transform:none}11%{opacity:1}21%{opacity:1;transform:translateX(-62px)}23%,100%{opacity:0;transform:translateX(-62px)}}
@keyframes cem-s2{0%,29%{opacity:0;transform:none}31%{opacity:1}41%{opacity:1;transform:translateX(-62px)}43%,100%{opacity:0;transform:translateX(-62px)}}
@keyframes cem-s3{0%,49%{opacity:0;transform:none}51%{opacity:1}61%{opacity:1;transform:translateX(-62px)}63%,100%{opacity:0;transform:translateX(-62px)}}
.en-vista .cef-mor .cem-av1{animation:cem-av1 var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
.en-vista .cef-mor .cem-av2{animation:cem-av2 var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
.en-vista .cef-mor .cem-av3{animation:cem-av3 var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes cem-av1{0%,21%{opacity:0;transform:scale(.7)}25%,95%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes cem-av2{0%,41%{opacity:0;transform:scale(.7)}45%,95%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes cem-av3{0%,61%{opacity:0;transform:scale(.7)}65%,95%{opacity:1;transform:none}98%,100%{opacity:0}}

/* ============================================================
   TARJETA 3 · la barra del mes se arma sola: cobrado, pendiente,
   vencido
   ============================================================ */
.cef-pan{--d:8s}
.cep-c{fill:var(--mint)}
.cep-p{fill:rgba(169,164,248,.55)}
.cep-v{fill:var(--danger)}
.cep-seg{transform-origin:0 50%}
.en-vista .cef-pan .cep-c{animation:cep-c var(--d) cubic-bezier(.16,1,.3,1) infinite}
.en-vista .cef-pan .cep-p{animation:cep-p var(--d) cubic-bezier(.16,1,.3,1) infinite}
.en-vista .cef-pan .cep-v{animation:cep-v var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes cep-c{0%,6%{transform:scaleX(0)}26%,94%{transform:none}99%,100%{transform:scaleX(0)}}
@keyframes cep-p{0%,24%{transform:scaleX(0)}38%,94%{transform:none}99%,100%{transform:scaleX(0)}}
@keyframes cep-v{0%,36%{transform:scaleX(0)}48%,94%{transform:none}99%,100%{transform:scaleX(0)}}
.en-vista .cef-pan .cep-l1{animation:cep-l1 var(--d) ease-out infinite}
.en-vista .cef-pan .cep-l2{animation:cep-l2 var(--d) ease-out infinite}
.en-vista .cef-pan .cep-l3{animation:cep-l3 var(--d) ease-out infinite}
@keyframes cep-l1{0%,18%{opacity:0;transform:translateY(5px)}26%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes cep-l2{0%,30%{opacity:0;transform:translateY(5px)}38%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes cep-l3{0%,42%{opacity:0;transform:translateY(5px)}50%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
.en-vista .cef-pan .cep-fin{animation:cep-fin var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes cep-fin{0%,54%{opacity:0;transform:scale(.8)}62%,94%{opacity:1;transform:none}99%,100%{opacity:0}}

@media (prefers-reduced-motion: reduce){
  .ceh *,.cef-int *,.cef-mor *,.cef-pan *{animation:none !important}
}