/* BAW v18 · Dirección de arte «Del boceto a la obra firmada»
   Fase 1: ritmo de fondos, menos ruido, un foco por sección, móvil más corto.
   Fase 2: Problema, Cinco momentos, Método y Para quién con composición propia. */

/* ================= FASE 1 · LIMPIEZA ================= */
/* fuera los rellenos «tecnológicos» que no explican nada */
.site .circuits,.site .bit-lanes,.site .bstream,.site .bit,.site .scan,.site .grid-floor,
.site .phi-mark,.site .lz-phi,.hero-joy .hx-rib,.hero-joy .hx-net,.og12 .og-drop,.og12 .og-wave{display:none!important}
/* el aviso de medición solo vive en la sección de medición */
.ev-toast{display:none!important}
html.v18-med .ev-toast{display:flex!important}

/* ritmo de salas: color → papel → color → papel → diagrama → papel → descanso → color → pastel → papel → color → galería → … */
#problema{background:var(--lz-paper,#FFFDF8)!important;color:#111126!important}
#proceso{background:linear-gradient(180deg,#FFFDF8 0%,#FBF6EC 100%)!important}
#para-quien{background:linear-gradient(160deg,#F6F0FF 0%,#FFF1F6 100%)!important}
#ti-mensual{background:linear-gradient(180deg,#FFFDF8 0%,#F3F1FB 100%)!important;color:#111126!important}
#faq{background:linear-gradient(180deg,#FFFDF8 0%,#F7F3EA 100%)!important;color:#111126!important}
#consultor{background:
  radial-gradient(ellipse 34% 60% at 24% 0%,rgba(255,236,190,.75),rgba(255,236,190,0) 70%),
  linear-gradient(180deg,#F3E8D8 0%,#EADBC6 100%)!important;color:#111126!important}

/* textos legibles al pasar a papel */
#problema h2,#problema p,#ti-mensual h2,#ti-mensual>div>div:first-child p,#faq h2,#faq summary,#faq p,#consultor h2,#consultor p,#consultor span{color:#111126!important}
#problema>div>p:first-child,#ti-mensual>div>div:first-child>div>p:first-child,#faq>div>p:first-child,#consultor p:first-child{color:#5125C9!important}
#ti-mensual>div>div:first-child p:not(:first-child),#consultor p+p,#consultor div>p:not(:first-child){color:#2B3140!important}
#ti-mensual h2 span,#ti-mensual h2 em{color:#AC145B!important}
#ti-mensual .ti-card{box-shadow:0 13px 34px rgba(40,20,120,.10);border:1px solid #E7E3F4}
#ti-mensual .ti-compare>div:first-child{box-shadow:0 13px 34px rgba(40,20,120,.08)}
#ti-mensual .ti-cycle g text{stroke:#FFFFFF;fill:#111126}
#ti-mensual a[href*="soporte"]{color:#2346D6!important}
#ti-mensual .sop-btn{color:#2346D6!important;border-color:#B9C3F5!important}
#faq details{border-color:#E1DCEB!important}
#faq details[open]{background:#FFFFFF!important;border-left-color:#5125C9!important}
#faq .plus,#faq p a{color:#5125C9!important}
#consultor .btn{color:#111126!important;border-color:rgba(17,17,38,.35)!important}
#consultor .count-static,#consultor [role="img"]{color:#AC145B!important}
#consultor .rv[style*="border-top"]{border-color:rgba(17,17,38,.15)!important}
#consultor .lz-spot::before{opacity:.5}

/* respiro: más aire y menos bloques en móvil */
@media (max-width:760px){
  .ma-sala{padding-top:55px;padding-bottom:55px}
  .ma-edge{padding-top:85px}
  #ti-mensual .ti-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  #ti-mensual .ti-card{padding:16px!important}
  #ti-mensual .ti-card h3{font-size:16px!important;line-height:1.25}
  #ti-mensual .ti-card p{font-size:13.5px!important;line-height:1.45}
  #ti-mensual .ti-ic{width:34px!important;height:34px!important}
  #recibes .rc-content{padding-top:72px!important}
}
@media (max-width:420px){#ti-mensual .ti-grid{grid-template-columns:1fr!important}}

/* ================= FASE 2 · NUEVAS COMPOSICIONES ================= */

/* --- Problema: lo intercambiable en gris, lo único en color --- */
#problema .tpl-wrap{position:relative}
#problema .tpl{filter:grayscale(1);opacity:.55}
.pb-unique{position:absolute;z-index:3;left:50%;top:50%;width:min(300px,62vw);translate:-50% -50%;rotate:-2deg;padding:16px 16px 13px;border-radius:13px;
  background:#FFFFFF;box-shadow:0 0 0 3px #FFE36B,0 21px 55px rgba(81,37,201,.28);opacity:0;scale:.7;transition:opacity .7s cubic-bezier(.2,.8,.2,1),scale .9s cubic-bezier(.2,1.3,.4,1)}
.pb-in .pb-unique{opacity:1;scale:1}
.pb-unique .pb-bar{display:flex;gap:5px;margin-bottom:10px}.pb-unique .pb-bar i{width:7px;height:7px;border-radius:50%;background:#FF6B6B}.pb-unique .pb-bar i:nth-child(2){background:#FFD43B}.pb-unique .pb-bar i:nth-child(3){background:#51CF66}
.pb-unique .pb-hero{position:relative;height:96px;border-radius:9px;overflow:hidden;background:linear-gradient(135deg,#243BCE,#5125C9 50%,#AC145B)}
.pb-unique .pb-hero svg{position:absolute;inset:0;width:100%;height:100%}
.pb-unique .pb-hero path{fill:none;stroke:#FFE36B;stroke-width:10;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1) .5s}
.pb-in .pb-unique .pb-hero path{stroke-dashoffset:0}
.pb-unique .pb-l{display:block;height:9px;border-radius:5px;background:#E9E6F5;margin-top:9px}
.pb-unique .pb-l.w{width:62%}
.pb-unique .pb-tag{position:absolute;right:-13px;top:-13px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#FFE36B;color:#111126;font:italic 22px Georgia,serif;box-shadow:0 6px 13px rgba(0,0,0,.15)}
.pb-unique .pb-cap{display:block;margin-top:10px;font:600 13px 'Space Grotesk',sans-serif;color:#5125C9;text-align:center}

/* --- Cinco momentos: línea de tiempo pintada (boceto → color → obra) --- */
#proceso .gear-svg-hidden{display:none!important}
.tl{position:relative;margin:34px auto 21px;max-width:1100px}
.tl svg{display:block;width:100%;height:auto;overflow:visible}
.tl-stroke{fill:none;stroke:url(#tlG);stroke-width:10;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 3s cubic-bezier(.5,0,.3,1)}
.tl-in .tl-stroke{stroke-dashoffset:0}
.tl-n{opacity:0;transform-box:fill-box;transform-origin:50% 50%;scale:.4;transition:opacity .6s,scale .7s cubic-bezier(.2,1.4,.4,1)}
.tl-in .tl-n{opacity:1;scale:1}
.tl-in .tl-n1{transition-delay:.3s}.tl-in .tl-n2{transition-delay:.9s}.tl-in .tl-n3{transition-delay:1.5s}.tl-in .tl-n4{transition-delay:2.1s}.tl-in .tl-n5{transition-delay:2.7s}
.tl-t{font:600 15px 'Space Grotesk',sans-serif;fill:#2B3140}
.tl-k{font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.1em;fill:#8A7AB8}
.tl-n.is-hot>circle:first-child{stroke:#5125C9;stroke-width:4}
#proceso .steps>.rv{transition:transform .35s,box-shadow .35s}
#proceso .steps>.rv.is-hot{transform:translateY(-6px);box-shadow:0 0 0 2px #5125C9,0 21px 34px rgba(81,37,201,.15)}
@media (max-width:760px){.tl-t{font-size:22px}.tl-k{display:none}}

/* --- Método: un diagrama claro que se traza una vez y queda quieto --- */
#metodo .m10-shell,#metodo .m10-petals,#metodo .m10-constellation,#metodo .m10-neural{animation:none!important}
#metodo .m10-engine-routes,#metodo .m10-engine-routes>i{transition:opacity 1.2s}
#metodo:not(.mt-in) .m10-engine-routes{opacity:0}
#metodo .m10-core{transition:opacity 1s,scale 1.2s cubic-bezier(.2,.8,.2,1)}
#metodo:not(.mt-in) .m10-core{opacity:0;scale:.85}

/* --- Para quién: díptico claro, sin decoración --- */
#para-quien .confetti,#para-quien .yes-shine{display:none!important}
#para-quien .yes-card{box-shadow:0 0 0 2px #6CF0C2,0 21px 55px rgba(16,140,100,.14)!important}
#para-quien .no-card{filter:grayscale(1);opacity:.85;box-shadow:0 13px 34px rgba(0,0,0,.06)!important}

@media (prefers-reduced-motion:reduce){.pb-unique,.tl-n{opacity:1!important;scale:1!important;transition:none!important}.tl-stroke,.pb-unique .pb-hero path{stroke-dashoffset:0!important;transition:none!important}#metodo .m10-core,#metodo .m10-engine-routes{opacity:1!important;scale:1!important}}

/* ajustes tras revisión */
#proceso h2,#proceso>div>p{color:#111126!important}
#proceso>div>p:first-of-type{color:#5125C9!important}
#principio .dream-fly{top:56%!important}
/* el contador del consultor dependía del scroll y podía quedar en un número intermedio: se muestra siempre 25 */
.site .count-anim{display:none!important}
.site .count-static{display:inline!important}
/* en celular la línea de tiempo quedaba diminuta: las tarjetas numeradas cuentan la secuencia */
@media (max-width:600px){.tl{display:none}}
/* restos del fondo oscuro en Consultor TI */
#ti-mensual>div[aria-hidden="true"],#ti-mensual .glow{display:none!important}