/* IMACRO — capa de color y movimiento de la web.
   Va aparte de estilo.css porque esa hoja la comparten los boletines y los paneles del
   Radar, que no deben cambiar. Cada producto tiene su color: Radar verde, Academias ámbar,
   Control horario teja. */
:root{
  --c-radar:#0F7A5C; --c-radar-tx:#F1EEE4; --c-radar-sub:#9FE0CC;
  --c-acad:#D2A455;  --c-acad-tx:#2B1F08;  --c-acad-osc:#8A6420; --c-acad-bg:#F1EADA;
  --c-hora:#8E3B2F;  --c-hora-tx:#FBEDEA;  --c-hora-bg:#F3DFDA;
  --bosque:#12463A; --bosque2:#0C3329; --menta:#9FE0CC; --ambar:#D2A455; --crema:#F1EEE4;
  --salvia:#7FBFA9; --menta-bg:#E2EFEA;
  --pantalla:#1B211E; --pantalla2:#2A322E; --sombra:rgba(18,70,58,.5);
}
@media (prefers-color-scheme:dark){
  :root{--c-radar:#1D6B58; --c-hora:#7A3328; --pantalla:#050706; --pantalla2:#1A201D;
        --menta-bg:#16302A; --sombra:rgba(0,0,0,.6)}
}

/* color de acento por página de producto */
body.p-acad{--verde:#8A6420; --verde-bg:#F1EADA}
body.p-hora{--verde:#8E3B2F; --verde-bg:#F3DFDA}
@media (prefers-color-scheme:dark){
  body.p-acad{--verde:#D2A455; --verde-bg:#302716}
  body.p-hora{--verde:#E08472; --verde-bg:#33201C}
}

.btn{transition:transform .15s ease,opacity .15s ease,box-shadow .15s ease}
.btn:hover{opacity:1;transform:translateY(-1px);box-shadow:0 6px 14px -8px var(--sombra)}
.btn:active{transform:none;box-shadow:none}

/* ---------- portada con pantallas ---------- */
.hero.portada{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:32px;
  align-items:center;padding:56px 0 48px}
.verbo{font-family:var(--serif);font-size:20px;line-height:1.35;color:var(--tinta2);margin:-6px 0 22px;min-height:2.7em}
.verbo span{color:var(--verde);font-style:italic}
.cursor{display:inline-block;width:2px;height:.95em;background:var(--verde);vertical-align:-.12em;
  margin-left:2px;animation:parpadeo 1s steps(1) infinite}
@keyframes parpadeo{50%{opacity:0}}
.escena{position:relative;height:390px;min-width:0}
.escena .mancha{position:absolute;border-radius:50%}
.escena .m1{width:330px;height:330px;background:var(--menta-bg);right:-30px;top:0}
.escena .m2{width:170px;height:170px;background:var(--ocre-bg);left:0;bottom:20px}
.portatil{position:absolute;right:0;top:20px;width:min(430px,94%);background:var(--pantalla);
  border-radius:12px 12px 4px 4px;padding:10px 10px 0;box-shadow:0 30px 50px -30px var(--sombra);
  animation:sube .9s cubic-bezier(.2,.8,.2,1) both}
.portatil .base{height:12px;background:var(--pantalla2);margin:0 -22px;border-radius:0 0 10px 10px}
.pant{background:var(--sup);border-radius:4px;overflow:hidden;font-size:11.5px;line-height:1.4}
.pbar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;
  background:var(--papel);border-bottom:1px solid var(--linea);color:var(--tinta3);font-family:var(--mono);font-size:10.5px}
.pbar b{color:var(--c-radar);font-weight:600}
.ptabla div{display:grid;grid-template-columns:minmax(0,1fr) 72px 44px;gap:8px;padding:7px 12px;
  border-bottom:1px solid var(--linea2);align-items:center;color:var(--tinta)}
.ptabla div > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ptabla .imp{color:var(--tinta3);font-family:var(--mono);font-size:10.5px;text-align:right;font-variant-numeric:tabular-nums}
.pc{font-family:var(--mono);font-size:10.5px;text-align:center;border-radius:99px;padding:1px 0}
.pc.a{background:var(--verde-bg);color:var(--verde)} .pc.m{background:var(--ocre-bg);color:var(--ocre)}
.ptabla div{animation:fila .5s ease both}
.ptabla div:nth-child(1){animation-delay:.5s}.ptabla div:nth-child(2){animation-delay:.6s}
.ptabla div:nth-child(3){animation-delay:.7s}.ptabla div:nth-child(4){animation-delay:.8s}
.ptabla div:nth-child(5){animation-delay:.9s}
@keyframes fila{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
@keyframes sube{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.movil{position:absolute;left:4%;bottom:0;width:140px;height:262px;background:var(--pantalla);
  border-radius:22px;padding:8px;box-shadow:0 30px 40px -24px var(--sombra);z-index:2;
  animation:sube .9s .25s cubic-bezier(.2,.8,.2,1) both}
.movil .pant{border-radius:15px;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;padding:10px;text-align:center}
.movil small{font-size:10px;color:var(--tinta3)}
.movil .hora{font-family:var(--mono);font-size:25px;font-variant-numeric:tabular-nums;color:var(--tinta)}
.fichar{border:0;border-radius:8px;font:600 12px var(--sans);padding:8px 12px;cursor:pointer;
  background:var(--c-radar);color:#fff;transition:background .2s}
.fichar.salida{background:var(--c-hora)}
.escena figcaption{position:absolute;right:0;bottom:-26px;font-size:12px;color:var(--tinta3)}

/* ---------- productos con color ---------- */
.planes.color{gap:18px}
.plan.color{padding:0;overflow:hidden;border-radius:10px;gap:0;transition:transform .25s ease,box-shadow .25s ease}
.plan.color:hover,.plan.color:focus-within{transform:translateY(-4px);box-shadow:0 18px 34px -22px var(--sombra)}
.cab-prod{position:relative;overflow:hidden;padding:22px 24px 24px;min-height:156px;display:flex;flex-direction:column;gap:8px}
.cab-prod .rol{color:inherit!important;opacity:.82}
.cab-prod .nom{position:relative;z-index:1;max-width:11ch}
.cab-prod .ilu{position:absolute;right:-26px;bottom:-34px;width:150px;height:150px}
.c-radar{background:var(--c-radar);color:var(--c-radar-tx)}
.c-acad{background:var(--c-acad);color:var(--c-acad-tx)}
.c-hora{background:var(--c-hora);color:var(--c-hora-tx)}
.cuerpo{padding:20px 24px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.cuerpo > p{font-size:15px;color:var(--tinta2);margin:0}
.cuerpo .btn{margin-top:auto;align-self:flex-start}
.plan.color.radar .btn{background:var(--c-radar)}
.plan.color.acad .btn{background:transparent;color:var(--c-acad-osc);border:1px solid var(--c-acad-osc)}
.plan.color.hora .btn{background:transparent;color:var(--c-hora);border:1px solid var(--c-hora)}
@media (prefers-color-scheme:dark){
  .plan.color.acad .btn{color:var(--c-acad);border-color:var(--c-acad)}
  .plan.color.hora .btn{color:#E08472;border-color:#E08472}
}
.barre{transform-box:view-box;transform-origin:95px 95px;animation:gira 4s linear infinite}
.aguja{transform-box:view-box;transform-origin:95px 95px;animation:gira 60s linear infinite}
.aguja.min{animation-duration:8s}
@keyframes gira{to{transform:rotate(360deg)}}
.plan.color:hover .barre{animation-duration:2s}
.ficha-ilu{transition:transform .4s ease}
.plan.color:hover .ficha-ilu{transform:translateY(-8px) rotate(-3deg)}

/* ---------- integración ---------- */
.red{margin:26px 0 6px;max-width:680px}
.red svg{display:block;width:100%;height:auto}
.red .via{stroke:var(--linea);stroke-width:2;fill:none;stroke-dasharray:4 6}
.red .nodo rect{fill:var(--sup);stroke:var(--linea)}
.red .nodo text{fill:var(--tinta2);font:600 13px var(--sans)}
.red .centro rect{fill:var(--c-radar)}
.red .centro text{fill:#fff;font:400 15px var(--serif)}
.red .paq{fill:var(--c-radar)} .red .paq.o{fill:var(--ambar)}
.rejilla.cuatro{grid-template-columns:repeat(2,minmax(0,1fr))}
.tarjeta{transition:border-color .2s ease,transform .2s ease}
.tarjeta:hover{border-color:var(--verde);transform:translateY(-2px)}

/* ---------- calculadora ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;margin:26px 0 8px;
  background:var(--sup);border:1px solid var(--linea);border-radius:10px;padding:24px}
.mandos{display:flex;flex-direction:column;gap:18px}
.mandos label{display:flex;justify-content:space-between;gap:10px;margin:0 0 6px;font-weight:400;font-size:15px;color:var(--tinta2)}
.mandos output{font-family:var(--mono);color:var(--tinta);font-variant-numeric:tabular-nums;white-space:nowrap}
.mandos input[type=range]{width:100%;accent-color:var(--c-radar)}
.resultado{background:var(--verde-bg);border-radius:8px;padding:20px;display:flex;flex-direction:column;gap:4px}
.resultado .grande{font-family:var(--serif);font-size:clamp(32px,4vw,42px);line-height:1.05;color:var(--tinta);font-variant-numeric:tabular-nums}
.resultado .peq{font-size:14px;color:var(--tinta2)}
.resultado hr{border:0;height:1px;background:var(--linea);margin:10px 0}
.resultado .btn{margin-top:14px;align-self:flex-start}

/* ---------- bandas de producto (cabeceras de cada página) ---------- */
.banda{position:relative;overflow:hidden;isolation:isolate}
.banda .hero{border-bottom:0;position:relative;z-index:1;padding:64px 0 60px}
.banda .ojo{color:inherit;opacity:.85}
.banda .entradilla{color:inherit;opacity:.85}
.banda .ilu{position:absolute;right:max(-40px,calc(50% - 560px));bottom:-60px;width:330px;height:330px;z-index:0;opacity:.95}
.b-radar{background:var(--bosque);color:var(--crema)}
.b-radar h1 em{color:var(--menta)}
.b-radar .ojo{color:var(--ambar);opacity:1}
.b-radar .btn{background:var(--ambar);color:var(--bosque2)}
.b-radar canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.b-acad{background:var(--c-acad);color:var(--c-acad-tx)}
.b-acad h1 em{color:#5A3E0C}
.b-acad .btn{background:var(--c-acad-tx);color:var(--c-acad-bg)}
.b-hora{background:var(--c-hora);color:var(--c-hora-tx)}
.b-hora h1 em{color:#FFD9CF}
.b-hora .btn{background:var(--c-hora-tx);color:var(--c-hora)}

/* ---------- embudo del pie ---------- */
.embudo-pie{position:relative;overflow:hidden;background:var(--sup);border-top:1px solid var(--linea);margin-top:20px}
.embudo-pie .env{position:relative;z-index:1;padding-top:54px;padding-bottom:54px}
.embudo-pie p{font-family:var(--serif);font-size:clamp(24px,3.2vw,32px);line-height:1.2;margin:0;max-width:16ch}
.embudo-pie p em{color:var(--verde);font-style:italic}
.embudo-pie svg{position:absolute;right:-70px;top:14px;height:calc(100% + 40px);z-index:0}
.embudo-pie svg > *{transform-box:fill-box;transform-origin:left center}
.revela .embudo-pie svg > *{transform:scaleX(.15);opacity:0;transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .6s}
.revela .embudo-pie.visto svg > *{transform:none;opacity:1}
.embudo-pie svg > :nth-child(2){transition-delay:.1s}.embudo-pie svg > :nth-child(3){transition-delay:.2s}
.embudo-pie svg > :nth-child(4){transition-delay:.3s}.embudo-pie svg > :nth-child(5){transition-delay:.4s}
footer{margin-top:0}

/* ---------- aparición al bajar ---------- */
.revela .aparece{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.revela .aparece.visto{opacity:1;transform:none}

@media (max-width:760px){
  .hero.portada{grid-template-columns:1fr;gap:20px;padding-top:44px}
  .escena{height:330px;margin-bottom:26px}
  .calc{grid-template-columns:1fr}
  .rejilla.cuatro{grid-template-columns:1fr}
  .banda .ilu{width:220px;height:220px;right:-60px;bottom:-70px;opacity:.35}
  .embudo-pie svg{opacity:.35;right:-120px}
}
@media (max-width:420px){
  .movil{width:118px;height:224px}
  .ptabla div{grid-template-columns:minmax(0,1fr) 44px}
  .ptabla .imp{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .revela .aparece,.revela .embudo-pie svg > *{opacity:1!important;transform:none!important}
}


/* ---------- catálogo de soluciones (/soluciones y franja de la portada) ---------- */
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cifras{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:15px;color:var(--tinta2)}
.cifras b{font-family:var(--serif);font-weight:400;font-size:24px;color:var(--tinta);margin-right:4px;font-variant-numeric:tabular-nums}
.buscador{position:sticky;top:0;z-index:5;background:var(--papel);padding:18px 0 14px;border-bottom:1px solid var(--linea);display:flex;flex-direction:column;gap:12px}
.buscador input{width:100%;padding:12px 14px;font:inherit;font-size:16px;background:var(--sup);color:var(--tinta);border:1px solid var(--linea);border-radius:8px}
.filtros{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.filtro{flex:none;display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13.5px;padding:6px 12px;border-radius:99px;border:1px solid var(--linea);background:var(--sup);color:var(--tinta2);cursor:pointer;white-space:nowrap}
.filtro span{font-family:var(--mono);font-size:11.5px;color:var(--tinta3)}
.filtro.activo{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.filtro.activo span{color:inherit;opacity:.7}
.filtro i,.sol-fam i,.grupo h3 i,.familias a i{width:8px;height:8px;border-radius:50%;background:var(--fam,var(--tinta3));display:inline-block;flex:none}
.sols{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:18px 0}
.sols.apps{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.sol{display:flex;flex-direction:column;gap:8px;padding:18px;background:var(--sup);border:1px solid var(--linea);border-radius:10px;color:var(--tinta);text-decoration:none;position:relative;overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.sol::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--fam);z-index:1}
.sol:hover,.sol:focus-visible{transform:translateY(-3px);border-color:var(--fam);box-shadow:0 14px 28px -20px var(--sombra)}
.sol-img{display:block;margin:-18px -18px 6px;aspect-ratio:16/9;overflow:hidden;background:var(--sup2);border-bottom:1px solid var(--linea)}
.sol-img img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block;transition:transform .5s ease}
.sol:hover .sol-img img{transform:scale(1.04)}
.sol-fam{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta3)}
.sol-tit{font-family:var(--serif);font-size:19px;line-height:1.2}
.sol.grande .sol-tit{font-size:21px}
.sol-txt{font-size:14.5px;line-height:1.5;color:var(--tinta2)}
.sol-pie{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.estado,.con-video,.dato{font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:99px;white-space:nowrap}
.e-produccion{background:var(--verde-bg);color:var(--verde)}
.e-lista{background:var(--ocre-bg);color:var(--ocre)}
.e-en-preparacion{background:var(--sup2);color:var(--tinta2);border:1px dashed var(--linea)}
.con-video,.dato{background:var(--sup2);color:var(--tinta2)}
.grupo{scroll-margin-top:150px}
.grupo h3{display:flex;align-items:center;gap:9px;font-size:16px;margin:30px 0 0}
[data-oculta]{display:none!important}
.franja-sol .familias{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 24px}
.familias a{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid var(--linea);border-radius:99px;background:var(--sup);color:var(--tinta2);text-decoration:none;font-size:14px;transition:border-color .2s}
.familias a:hover{border-color:var(--fam);color:var(--tinta)}
.familias a span{font-family:var(--mono);font-size:11.5px;color:var(--tinta3)}

/* ficha */
.ficha-cab{position:relative}
.ficha-cab::before{content:"";position:absolute;left:0;top:44px;width:56px;height:4px;border-radius:2px;background:var(--fam)}
.migas{font-size:14px;color:var(--tinta3);margin:0 0 18px}
.migas a{color:var(--tinta2)}
.ficha-cab .datos{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 26px}
.galeria{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;padding:40px 0 10px;border-bottom:1px solid var(--linea)}
.galeria figure{margin:0;min-width:0}
.galeria .g-video{grid-column:1/-1}
.galeria video{width:100%;max-height:560px;border-radius:10px;background:#000;display:block}
.galeria img{width:100%;height:auto;border-radius:8px;border:1px solid var(--linea);display:block;transition:transform .25s ease}
.galeria a:hover img{transform:translateY(-2px)}
.galeria figcaption{font-size:13px;color:var(--tinta3);margin-top:7px}
.galeria .ayuda{grid-column:1/-1}
.ficha-texto h2{font-size:clamp(21px,2.6vw,25px);margin:28px 0 10px}
.ficha-texto h2:first-child{margin-top:0}
.ficha-texto blockquote{margin:0 0 16px;padding-left:14px;border-left:3px solid var(--linea);color:var(--tinta2)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0}
.chips li{margin:0;padding:5px 12px;border-radius:99px;background:var(--sup);border:1px solid var(--linea);font-size:14px;color:var(--tinta2)}
@media (max-width:560px){.buscador{position:static}}
.sol-img.vacia{background:var(--fam);position:relative}
.sol-img.vacia svg{position:absolute;right:-6%;top:12%;height:96%;fill:rgba(255,255,255,.22);transition:transform .5s ease}
.sol:hover .sol-img.vacia svg{transform:translateX(-6px)}
@media (max-width:560px){.sol-img{aspect-ratio:21/9}}