/* donrros.com/casos.html — ilustraciones animadas de las 12 recetas.
   GENERADO por website/scripts/ilustraciones-casos.py: no editar a mano.
   Identidad «Materialización»: petróleo = lo que entra; naranja = solo lo que hace la IA;
   marfil = lo que sale. Sin JS o con «reducir movimiento» se ve el estado final, quieto.
   La animación solo corre con .anima.en-vista (lo pone /agencia/ilustraciones.js). */
.ilus{grid-column:1/-1;margin:4px 0 6px;padding:6px 0 18px;border-bottom:1px solid rgba(244,239,230,.14)}
.il-svg{display:block;width:100%;max-width:960px;height:auto;margin:0 auto;overflow:visible}
.il-pasos{display:grid;grid-template-columns:160fr 145fr 106fr 229fr;max-width:960px;margin:6px auto 0;gap:0 10px}
.il-pasos span{border-top:2px solid;padding-top:8px;font-size:.8rem;line-height:1.35;color:rgba(244,239,230,.72)}
.il-pasos b{display:block;font-weight:600;font-size:.84rem;margin-bottom:2px}
.il-pasos i{font-style:normal}
.il-pasos .il-e{border-color:#1F7A8C}.il-e b{color:#5CC8C8}
.il-pasos .il-i{border-color:#F29A38}.il-i b{color:#F29A38}
.il-pasos .il-r{border-color:rgba(244,239,230,.4)}.il-r b{color:rgba(244,239,230,.72)}
.il-pasos .il-s{border-color:#F4EFE6}.il-s b{color:#F4EFE6}
@media (max-width:720px){.ilus{margin:0 -8px 4px;padding-bottom:14px}}
@media (max-width:560px){
  .il-pasos{gap:0 6px}
  .il-pasos i{display:none}
  .il-pasos b{font-size:.76rem;margin:0}
  .il-sm{display:none}
}

/* tipografía: Schibsted Grotesk, una sola familia (autoalojada en /agencia/fonts.css).
   tm = etiqueta o dato, ts = texto, tf = titular de la ficha. */
.ilus text{font-family:"Schibsted Grotesk",system-ui,sans-serif;font-weight:500}
.ilus .ts{font-weight:400}
.ilus .tf{font-weight:600;letter-spacing:-.01em}
.ilus .tf.f22,.ilus .tf.f30{font-weight:700;letter-spacing:-.03em}
.ilus .f6{font-size:6px}.ilus .f7{font-size:7px}.ilus .f8{font-size:8px}.ilus .f9{font-size:9px}
.ilus .f10{font-size:10px}.ilus .f11{font-size:11px}.ilus .f13{font-size:13px}.ilus .f16{font-size:16px}
.ilus .f22{font-size:22px}.ilus .f30{font-size:30px}

/* color */
.ilus .c-pe{fill:#1F7A8C}.ilus .c-pe2{fill:#5CC8C8}
.ilus .c-am{fill:#F29A38}.ilus .c-am2{fill:#FF7A2F}
.ilus .c-iv{fill:#F4EFE6}.ilus .c-iv3{fill:rgba(244,239,230,.55)}
.ilus .c-ink{fill:#13110E}.ilus .c-ink2{fill:#2b2722}.ilus .c-mu{fill:#6A645B}.ilus .c-fade{fill:#B5AEA2}
.ilus .il-g0{stop-color:#FF7A2F;stop-opacity:.34}.ilus .il-g1{stop-color:#F29A38;stop-opacity:0}

/* lo que entra (petróleo) */
.ilus .il-doc{fill:rgba(31,122,140,.12);stroke:#1F7A8C;stroke-width:1.2}
.ilus .il-hoja{fill:#1a2a2c}
.ilus .il-band{fill:#1F7A8C}
.ilus .il-ln{fill:rgba(92,200,200,.32)}
.ilus .il-hl{fill:rgba(92,200,200,.13);stroke:#5CC8C8;stroke-width:1}
.ilus .il-sello{fill:none;stroke:#5CC8C8;stroke-width:1.2}
.ilus .il-sello2{fill:none;stroke:#1F7A8C;stroke-width:1;stroke-dasharray:1.5 1.5}
.ilus .il-logo,.ilus .il-campo{fill:none;stroke:#1F7A8C;stroke-width:1}
.ilus .il-env,.ilus .il-clip{fill:none;stroke:#5CC8C8;stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round}
.ilus .il-bar{fill:#5CC8C8}
.ilus .il-hueco{fill:rgba(92,200,200,.06);stroke:#5CC8C8;stroke-width:1;stroke-dasharray:2 2}
.ilus .il-bub{fill:rgba(31,122,140,.12);stroke:#1F7A8C;stroke-width:1.1}
.ilus .il-bubv{fill:rgba(92,200,200,.2);stroke:#5CC8C8}
.ilus .il-scan,.ilus .il-p{opacity:0}
.ilus .il-scanb{fill:rgba(92,200,200,.14)}.ilus .il-scanl{fill:#5CC8C8}

/* lo que hace la IA (naranja) y los conectores */
.ilus .il-cn{fill:none;stroke:rgba(244,239,230,.2);stroke-width:1;stroke-dasharray:2 4}
.ilus .il-f1{fill:#5CC8C8}.ilus .il-f2{fill:#FF7A2F}.ilus .il-f3{fill:#F4EFE6}
.ilus .il-ring{fill:none;stroke:#F29A38;stroke-width:1;opacity:0}
.ilus .il-bowl{fill:none;stroke:rgba(244,239,230,.22);stroke-width:1;stroke-dasharray:2 3}

/* la persona que revisa */
.ilus .il-gring{fill:rgba(244,239,230,.04);stroke:rgba(244,239,230,.42);stroke-width:1}
.ilus .il-sil{fill:none;stroke:#F4EFE6;stroke-width:1.5;stroke-linecap:round}
.ilus .il-ckp{fill:none;stroke:#13110E;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* lo que sale (marfil) */
.ilus .il-card{fill:#F4EFE6}
.ilus .il-rule{fill:none;stroke:#DDD6C9;stroke-width:1}
.ilus .il-rule2{fill:#DDD6C9}
.ilus .il-pill{fill:none;stroke:#C9C1B3;stroke-width:1}
.ilus .il-dash{stroke-dasharray:2.5 2}
.ilus .il-sig{fill:none;stroke:#13110E;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.ilus .il-okc{fill:#2F6B4A}.ilus .il-okp{fill:none;stroke:#F4EFE6;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ilus .il-dia{fill:#E4DDCF}.ilus .il-noti{fill:none;stroke:#B5AEA2;stroke-width:1;stroke-dasharray:2 2}
.ilus .il-box{fill:none;stroke:#13110E;stroke-width:1}
.ilus .il-caret{fill:#13110E}
.ilus .il-falta{fill:none;stroke:#9A9286;stroke-width:1;stroke-dasharray:2 1.6}
.ilus .il-track{fill:#E4DDCF}
.ilus .il-hito{fill:#F4EFE6;stroke:#13110E;stroke-width:1.4}
.ilus .il-ln2{fill:#D6CFC1}
.ilus .il-fill{fill:#13110E}
.ilus .il-gen{fill:none;stroke:#9A9286;stroke-width:1;stroke-dasharray:3 2.5}
.ilus .il-match{fill:none;stroke:#13110E;stroke-width:1}
.ilus .il-nomatch{fill:none;stroke:#9A9286;stroke-width:1;stroke-dasharray:2 2}
.ilus .il-folder{fill:#E4DDCF;stroke:#13110E;stroke-width:1;stroke-linejoin:round}
.ilus .il-slot{fill:none;stroke:#13110E;stroke-width:1}
.ilus .il-reloj{fill:none;stroke:#13110E;stroke-width:1;stroke-linecap:round}

/* ---------- animación (solo con movimiento permitido y la figura en pantalla) ---------- */
@media (prefers-reduced-motion:no-preference){
.ilus.anima .k,.ilus.anima .il-scan,.ilus.anima .il-p,.ilus.anima .il-ring,.ilus.anima .il-sig,
.ilus.anima .il-bar,.ilus.anima .il-caret{animation-duration:11s;animation-timing-function:cubic-bezier(.22,.8,.24,1);animation-iteration-count:infinite;animation-fill-mode:both;animation-play-state:paused}
.ilus.anima.en-vista .k,.ilus.anima.en-vista .il-scan,.ilus.anima.en-vista .il-p,.ilus.anima.en-vista .il-ring,
.ilus.anima.en-vista .il-sig,.ilus.anima.en-vista .il-bar,.ilus.anima.en-vista .il-caret{animation-play-state:running}
.ilus .k{transform-box:fill-box;transform-origin:center}
.ilus .fl{--tx:-18px}.ilus .fd{--ty:-14px}.ilus .il-pop{--sc:.2}.ilus .il-gx{--sx:0}
.ilus.anima .il-gx{transform-origin:left center}
.ilus.anima .il-scan{animation-name:il-scan;--sy:120px}
.ilus.anima .il-f1{animation-name:il-f1;--dx:54px}
.ilus.anima .il-f2{animation-name:il-f2;--dx:42px}
.ilus.anima .il-f3{animation-name:il-f3;--dx:26px}
.ilus .q0{--dy:28px}.ilus .q1{--dy:14px}.ilus .q2{--dy:0px}.ilus .q3{--dy:-14px}.ilus .q4{--dy:-28px}
.ilus.anima .s1{animation-delay:.18s}.ilus.anima .s2{animation-delay:.36s}.ilus.anima .s3{animation-delay:.54s}.ilus.anima .s4{animation-delay:.72s}
.ilus.anima .il-ring{animation-name:il-ring;transform-box:fill-box;transform-origin:center}
.ilus.anima .il-sig{animation-name:il-sig;stroke-dasharray:100}
.ilus.anima .il-bar{animation-name:il-eq;transform-box:fill-box;transform-origin:center}
.ilus.anima .e1{animation-delay:-.2s}.ilus.anima .e2{animation-delay:-.45s}.ilus.anima .e3{animation-delay:-.7s}
.ilus.anima .il-caret{animation-name:il-caret}
@keyframes il-scan{0%,6%{opacity:0;transform:translateY(0)}8%{opacity:1}22%{opacity:1;transform:translateY(var(--sy))}25%,100%{opacity:0;transform:translateY(var(--sy))}}
@keyframes il-f1{0%,13%{opacity:0;transform:translate(0,0)}15%{opacity:1}26%{opacity:1;transform:translate(var(--dx),var(--dy))}28%,100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
@keyframes il-f2{0%,42%{opacity:0;transform:translate(0,0)}44%{opacity:1}52%{opacity:1;transform:translate(var(--dx),0)}54%,100%{opacity:0;transform:translate(var(--dx),0)}}
@keyframes il-f3{0%,57%{opacity:0;transform:translate(0,0)}58%{opacity:1}62%{opacity:1;transform:translate(var(--dx),0)}64%,100%{opacity:0;transform:translate(var(--dx),0)}}
@keyframes il-ring{0%,33%{opacity:0;transform:scale(.55)}35%{opacity:.7}45%{opacity:0;transform:scale(1.3)}46%{opacity:0;transform:scale(.55)}48%{opacity:.5}58%,100%{opacity:0;transform:scale(1.3)}}
@keyframes il-sig{0%,80%{stroke-dashoffset:100;opacity:1}88%,94%{stroke-dashoffset:0;opacity:1}99%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes il-eq{0%,30%,100%{transform:scaleY(1)}3%,11%,19%,27%{transform:scaleY(.35)}7%,15%,23%{transform:scaleY(1.15)}}
@keyframes il-caret{0%,72%{opacity:0}74%,78%,82%,86%,90%{opacity:1}76%,80%,84%,88%{opacity:0}94%,100%{opacity:0}}
.ilus.anima .t0{animation-name:il-t0}
@keyframes il-t0{0%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}5%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t2{animation-name:il-t2}
@keyframes il-t2{0%,2%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}7%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t3{animation-name:il-t3}
@keyframes il-t3{0%,3%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}8%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t4{animation-name:il-t4}
@keyframes il-t4{0%,4%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}9%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t5{animation-name:il-t5}
@keyframes il-t5{0%,5%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}10%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t6{animation-name:il-t6}
@keyframes il-t6{0%,6%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}11%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t8{animation-name:il-t8}
@keyframes il-t8{0%,8%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}13%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t9{animation-name:il-t9}
@keyframes il-t9{0%,9%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}14%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t11{animation-name:il-t11}
@keyframes il-t11{0%,11%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}16%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t12{animation-name:il-t12}
@keyframes il-t12{0%,12%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}17%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t14{animation-name:il-t14}
@keyframes il-t14{0%,14%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}19%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t16{animation-name:il-t16}
@keyframes il-t16{0%,16%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}21%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t20{animation-name:il-t20}
@keyframes il-t20{0%,20%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}25%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t23{animation-name:il-t23}
@keyframes il-t23{0%,23%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}28%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t28{animation-name:il-t28}
@keyframes il-t28{0%,28%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}33%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t30{animation-name:il-t30}
@keyframes il-t30{0%,30%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}35%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t31{animation-name:il-t31}
@keyframes il-t31{0%,31%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}36%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t34{animation-name:il-t34}
@keyframes il-t34{0%,34%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}39%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t36{animation-name:il-t36}
@keyframes il-t36{0%,36%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}41%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t46{animation-name:il-t46}
@keyframes il-t46{0%,46%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}51%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t56{animation-name:il-t56}
@keyframes il-t56{0%,56%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}61%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t62{animation-name:il-t62}
@keyframes il-t62{0%,62%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}67%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t64{animation-name:il-t64}
@keyframes il-t64{0%,64%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}69%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t66{animation-name:il-t66}
@keyframes il-t66{0%,66%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}71%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t67{animation-name:il-t67}
@keyframes il-t67{0%,67%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}72%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t68{animation-name:il-t68}
@keyframes il-t68{0%,68%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}73%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t70{animation-name:il-t70}
@keyframes il-t70{0%,70%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}75%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t72{animation-name:il-t72}
@keyframes il-t72{0%,72%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}77%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t73{animation-name:il-t73}
@keyframes il-t73{0%,73%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}78%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t74{animation-name:il-t74}
@keyframes il-t74{0%,74%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}79%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t76{animation-name:il-t76}
@keyframes il-t76{0%,76%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}81%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus.anima .t77{animation-name:il-t77}
@keyframes il-t77{0%,77%{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1)) scaleX(var(--sx,1))}82%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
.ilus .x0{--tx:-40px;--ty:-26px;--sc:.5}
.ilus .x1{--tx:-52px;--ty:18px;--sc:.5}
.ilus .x2{--tx:-30px;--ty:34px;--sc:.5}
.ilus .x3{--tx:-46px;--ty:-8px;--sc:.5}
.ilus .x4{--tx:-24px;--ty:-36px;--sc:.5}
.ilus .x5{--tx:-58px;--ty:6px;--sc:.5}
.ilus .x6{--tx:-36px;--ty:26px;--sc:.5}
.ilus .x7{--tx:-44px;--ty:-20px;--sc:.5}
.ilus .x8{--tx:-20px;--ty:30px;--sc:.5}
.ilus .x9{--tx:-48px;--ty:-30px;--sc:.5}
.ilus .x10{--tx:-28px;--ty:-12px;--sc:.5}
.ilus .x11{--tx:-56px;--ty:22px;--sc:.5}
.ilus .x12{--tx:-34px;--ty:40px;--sc:.5}
.ilus .x13{--tx:-22px;--ty:-24px;--sc:.5}
.ilus .x14{--tx:-50px;--ty:10px;--sc:.5}
.ilus .x15{--tx:-38px;--ty:-40px;--sc:.5}
.ilus .x16{--tx:-26px;--ty:18px;--sc:.5}
.ilus .x17{--tx:-54px;--ty:-14px;--sc:.5}
.ilus .x18{--tx:-32px;--ty:8px;--sc:.5}
.ilus .x19{--tx:-42px;--ty:32px;--sc:.5}
.ilus .x20{--tx:-60px;--ty:-4px;--sc:.5}
.ilus .x21{--tx:-30px;--ty:-32px;--sc:.5}
.ilus .x22{--tx:-46px;--ty:36px;--sc:.5}
.ilus .x23{--tx:-24px;--ty:12px;--sc:.5}
}