/* ===== Web pública comercial · Creador Digital 360° (MD Agencia) =====
   Misma familia visual que el campus: fondo oscuro, cian, azul, violeta y magenta,
   degradados y brillo contenido. Hoja propia: no pisa ni una regla del campus. */

/* ====================================================================
   LOS DOS TEMAS
   Todo el color de la web sale de estos tokens: ninguna regla de abajo
   lleva un color fijo. Cambiar de tema es cambiar este bloque, nada más.

   Reglas del juego:
   - Sin elección guardada, manda el sistema operativo de quien visita.
   - Si la persona elige, su elección gana sobre el sistema. Se guarda en
     este navegador, en data-theme sobre <html>.
   - El <head> lleva un script diminuto que aplica la elección antes de
     pintar, para que no haya un fogonazo blanco al entrar en oscuro.
   ==================================================================== */
:root{
  --b0:#fbfbfd;      /* fondo */
  --b1:#f3f5f9;      /* bloque alterno */
  --sf:#ffffff;      /* tarjetas */
  --bd:#e3e7f0;      /* líneas */
  --bd2:#e4e9f3;     /* línea suave, tintada */
  --tx:#161a23;      /* texto */
  --mu:#5d6475;      /* texto secundario */
  --c1:#3b7bff;      /* AZUL: el acento */
  --c2:#1f4fd8;      /* azul profundo: texto pequeño y botones */
  --c2h:#16379f;     /* el anterior, al pasar por encima */
  --c3:#22a9ff;      /* azul claro, tercer tono */
  --c4:#d2375c;      /* solo para errores */
  --sobre-c:#ffffff; /* texto encima del acento */
  --t1:#f5f8ff;      /* tinte 1: superficie apenas teñida */
  --t2:#eff4ff;      /* tinte 2: al pasar por encima */
  --t3:#eaf1ff;      /* tinte 3: elegido */
  --ok-fg:#0d7a53; --ok-bg:#e6f6ef; --ok-bd:#bfe6d5;
  --wa-fg:#7a5406; --wa-bg:#fdf6e6; --wa-bd:#f0d9a6;
  --er-fg:#d2375c; --er-bg:#fdeaef;
  --cuadro:rgba(22,26,35,.055);   /* la cuadrícula del fondo */
  --tinta:#2c3344;   /* trazo de las ilustraciones */
  --ico:#8d94a7;     /* trazo de icono en reposo */
  --sombra:rgba(22,26,35,.08);
  --vidrio:rgba(255,255,255,.88);   /* la barra superior, translúcida */
  --vidrio2:rgba(255,255,255,.96);  /* la misma, ya pegada arriba */
  --vidrio3:rgba(255,255,255,.97);  /* fichas flotantes sobre la escena */
  --alt:rgba(236,240,248,.78);      /* bloques alternos y pie */
  /* La zona del configurador se separa del resto en los dos temas. */
  --zbg:#eef2f9; --zsf:#ffffff; --zsf2:#f7f9ff; --zsel:#e9f0ff; --zbd:#dde3ef;
  /* Tipografía. Hasta 3.31 la hoja pedía «Inter» pero nadie la cargaba nunca, así que la
     web salía con la letra por defecto de cada sistema. Ahora se cargan de verdad:
     Bricolage Grotesque para los titulares (estrecha, con carácter), Instrument Sans para
     leer y JetBrains Mono para los datos. Las tres con respaldo del sistema por si la
     descarga falla o alguien bloquea la fuente. */
  /* Inter va de respaldo inmediato: es la que yo puedo ver y medir aquí, así que si la
     descarga de Google Fonts falla, la página cae en algo ya probado y no en la letra
     suelta de cada sistema. */
  --f-tit:"Bricolage Grotesque","Inter","Trebuchet MS",system-ui,sans-serif;
  --f-tx:"Instrument Sans","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* 3.32: antes decía «"JetBrains Mono",var(--f-num)», que se cita a sí misma. Una variable
     circular no vale nada, y toda declaración «font» que la usaba se descartaba entera:
     los números de sección salían sin su tamaño ni su peso. */
  --f-num:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  color-scheme:light;
}

/* Las dos formas de acabar en oscuro: elegido, o heredado del sistema sin elegir. */
:root[data-theme="dark"]{
  --b0:#0b0c10; --b1:#13151b; --sf:#111319; --bd:#262a34; --bd2:#1e2129;
  --tx:#f3f5fa; --mu:#99a1b3;
  --c1:#4d8cff; --c2:#8bb6ff; --c2h:#b3cfff; --c3:#35b9ff; --c4:#ff7a97;
  --sobre-c:#06080d;
  --t1:#151821; --t2:#1a1f2b; --t3:#16203a;
  --ok-fg:#54d6a0; --ok-bg:#10231c; --ok-bd:#1e4536;
  --wa-fg:#e8bd63; --wa-bg:#241d0f; --wa-bd:#4a3a1b;
  --er-fg:#ff7a97; --er-bg:#2a141b;
  --cuadro:rgba(255,255,255,.045);
  --tinta:#aab3c6;
  --ico:#6e7689;
  --sombra:rgba(0,0,0,.5);
  --vidrio:rgba(11,12,16,.86);
  --vidrio2:rgba(11,12,16,.94);
  --vidrio3:rgba(17,19,25,.97);
  --alt:rgba(19,21,27,.72);
  --zbg:#07080b; --zsf:#0e1016; --zsf2:#101218; --zsel:#101722; --zbd:#262a34;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --b0:#0b0c10; --b1:#13151b; --sf:#111319; --bd:#262a34; --bd2:#1e2129;
    --tx:#f3f5fa; --mu:#99a1b3;
    --c1:#4d8cff; --c2:#8bb6ff; --c2h:#b3cfff; --c3:#35b9ff; --c4:#ff7a97;
    --sobre-c:#06080d;
    --t1:#151821; --t2:#1a1f2b; --t3:#16203a;
    --ok-fg:#54d6a0; --ok-bg:#10231c; --ok-bd:#1e4536;
    --wa-fg:#e8bd63; --wa-bg:#241d0f; --wa-bd:#4a3a1b;
    --er-fg:#ff7a97; --er-bg:#2a141b;
    --cuadro:rgba(255,255,255,.045);
    --tinta:#aab3c6;
    --ico:#6e7689;
    --sombra:rgba(0,0,0,.5);
    --vidrio:rgba(11,12,16,.86);
    --vidrio2:rgba(11,12,16,.94);
    --vidrio3:rgba(17,19,25,.97);
    --alt:rgba(19,21,27,.72);
    --zbg:#07080b; --zsf:#0e1016; --zsf2:#101218; --zsel:#101722; --zbd:#262a34;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
.sb{
  margin:0;
  /* Papel cuadriculado: dos degradados de 1 px cruzados. Sin imágenes. */
  background-color:var(--b0);
  background-image:
    linear-gradient(var(--cuadro) 1px,transparent 1px),
    linear-gradient(90deg,var(--cuadro) 1px,transparent 1px);
  background-size:46px 46px;
  color:var(--tx);font:16px/1.6 var(--f-tx);
  -webkit-font-smoothing:antialiased;
}
.s-wrap{width:100%;max-width:var(--ancho,1120px);margin:0 auto;padding:0 clamp(20px,3vw,40px)}
.s-narrow{max-width:min(760px,var(--ancho,1120px))}
img,svg{max-width:100%}

.s-skip{position:absolute;left:-9999px;top:0;background:var(--tx);color:var(--sobre-c);padding:10px 16px;border-radius:0 0 10px 0;z-index:60}
.s-skip:focus{left:0}

/* ---------- botones ---------- */
.s-btn{
  white-space:nowrap;
  display:inline-grid;place-items:center;text-align:center;text-decoration:none;
  font:inherit;font-weight:700;font-size:.88rem;letter-spacing:.015em;
  border-radius:12px;padding:12px 20px;min-height:46px;cursor:pointer;border:1px solid transparent;
  transition:transform .2s,filter .2s,border-color .2s,background-color .2s;
}
.s-pri{color:var(--sobre-c);background:var(--c2);box-shadow:0 0 0 5px rgba(59,123,255,.15),0 10px 24px rgba(31,79,216,.24)}
.s-pri:hover{transform:translateY(-2px);background:var(--c2h);box-shadow:0 0 0 7px rgba(59,123,255,.2),0 12px 28px rgba(31,79,216,.3)}
.s-ghost{color:var(--tx);border-color:var(--bd2);background:var(--sf)}
.s-ghost:hover{border-color:var(--c2);color:var(--c2);transform:translateY(-2px)}
.s-lg{min-height:54px;padding:15px 26px;font-size:.95rem}
.s-sm{min-height:44px;padding:11px 16px;font-size:.82rem}
.s-btn:focus-visible,.s-nav a:focus-visible,.s-faq summary:focus-visible,
.s-pick:focus-within,.s-skip:focus-visible,a:focus-visible{outline:3px solid var(--tx);outline-offset:3px;border-radius:12px}


/* ---------- estados de los controles ----------
   Hover, foco, pulsado y desactivado, los cuatro definidos. El pulsado responde al
   instante (60 ms) porque nada debe dar la sensación de retrasar el clic. */
.s-btn:active{transform:translateY(1px) scale(.985);transition-duration:60ms}
.s-btn[disabled],.s-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none}
.s-nav a{position:relative}
.s-nav a::after{content:"";position:absolute;left:11px;right:11px;bottom:7px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--c1),var(--c3));transform:scaleX(0);transform-origin:left;transition:transform .28s}
.s-nav a:hover::after{transform:scaleX(1)}
.s-nav .s-btn::after{display:none}

/* La cabecera se asienta cuando ya te has desplazado. */
.s-head{transition:background-color .3s,border-color .3s,box-shadow .3s}
.s-head.s-stuck{background:var(--vidrio2);border-bottom-color:var(--bd2);box-shadow:0 6px 22px rgba(22,26,35,.07)}

/* El icono de cada solución responde con la tarjeta, no por su cuenta. */
.s-ico{transition:transform .3s,border-color .3s,background-color .3s}
.s-card:hover .s-ico{transform:translateY(-2px) scale(1.06);border-color:var(--c1);background:var(--t3)}
.s-card:has(input:checked) .s-ico{background:var(--t3);border-color:var(--c1)}
.s-pick input{transition:transform .18s}
.s-card:has(input:checked) .s-pick input{transform:scale(1.12)}

/* Entrar y salir del resumen del cotizador. */
.s-sum li{transition:opacity .26s,transform .26s}
.s-sum li.s-in{opacity:0;transform:translateX(-10px)}
.s-sum li.s-out{opacity:0;transform:translateX(12px)}
.s-del{transition:color .2s,background-color .2s,transform .2s}
.s-del:hover{transform:rotate(90deg)}

/* El pie recoge la línea del horizonte del hero: cierra por donde abrió. */
.s-foot{position:relative}
.s-foot::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--c1),var(--c3),transparent);opacity:.5}

@media (prefers-reduced-motion:reduce){
  .s-nav a::after,.s-ico,.s-sum li,.s-del,.s-head{transition:none}
  .s-nav a:hover::after{transform:scaleX(1)}
  .s-card:hover .s-ico,.s-del:hover{transform:none}
}

/* ---------- cabecera ---------- */
.s-head{position:sticky;top:0;z-index:50;background:var(--vidrio);backdrop-filter:blur(10px);border-bottom:1px solid var(--bd)}
.s-headin{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.s-brand{display:inline-flex;align-items:center;gap:9px;color:var(--tx);text-decoration:none;font-family:var(--f-tit);font-weight:800;letter-spacing:.01em;font-size:1rem;white-space:nowrap;flex:0 0 auto}
/* 3.42: logo de MD Agencia. La órbita da la vuelta de 360° despacio; quieta si se pide menos movimiento. */
.s-logo{flex:0 0 auto;color:var(--tx);overflow:visible}
.s-logo-orb{transform-origin:60px 60px;transform-box:view-box;animation:s-orbita 14s linear infinite}
@keyframes s-orbita{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.s-logo-orb{animation:none}}
.s-nav{display:flex;align-items:center;gap:6px}
.s-nav a{color:var(--mu);text-decoration:none;font-size:.87rem;font-weight:600;padding:10px 9px;border-radius:10px;min-height:44px;display:inline-grid;place-items:center;white-space:nowrap}
.s-nav a:hover{color:var(--c2);background:rgba(59,123,255,.07)}
.s-nav .s-btn{margin-left:4px}
.s-nav .s-ghost,.s-nav .s-pri{color:var(--tx)}
.s-nav .s-pri{color:var(--sobre-c)}
.s-menuchk,.s-burger{display:none}

@media (max-width:1380px){
  .s-burger{display:grid;gap:5px;width:46px;height:46px;place-content:center;border:1px solid var(--bd);border-radius:12px;cursor:pointer}
  .s-burger span{display:block;width:20px;height:2px;background:var(--tx);border-radius:2px;transition:transform .25s,opacity .25s}
  .s-nav{position:fixed;inset:68px 0 auto 0;flex-direction:column;align-items:stretch;gap:4px;
         background:var(--sf);border-bottom:1px solid var(--bd);padding:14px 20px 20px;box-shadow:0 14px 30px var(--sombra);
         transform:translateY(-130%);transition:transform .3s;max-height:calc(100dvh - 68px);overflow:auto}
  .s-menuchk:checked~.s-nav{transform:none}
  .s-menuchk:checked~.s-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .s-menuchk:checked~.s-burger span:nth-child(2){opacity:0}
  .s-menuchk:checked~.s-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .s-nav a{justify-items:start;place-items:center start;padding:13px 12px}
  .s-nav .s-btn{margin:6px 0 0;place-items:center}
}

/* ---------- hero ---------- */
.s-hero{padding:64px 0 54px;position:relative;overflow:hidden}
.s-heroin{display:grid;gap:34px;text-align:center;justify-items:center}
.s-eyebrow{margin:0 0 14px;font-size:.72rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--c2)}
.s-hero h1{margin:0 0 16px;font:800 clamp(2rem,5.2vw,3.3rem)/1.06 var(--f-tit);letter-spacing:-.022em}
.s-g{background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}
.s-lead{margin:0 auto 10px;color:var(--mu);font-size:1.06rem;max-width:36em}
.s-kick{margin:0 0 26px;font-weight:700;color:var(--tx)}
.s-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
@keyframes s-spin{to{transform:rotate(360deg)}}


/* La tarjeta que llega desde la escena se señala un momento. */
.s-card.s-justo{border-color:var(--c1);box-shadow:0 0 0 2px var(--c1) inset,0 0 30px rgba(59,123,255,.25)}



/* ---------- pantallas grandes ----------
   El contenedor crece por tramos en vez de quedarse clavado en 1120 px: en un monitor 2K
   la página se veía con el contenido encogido en el centro y medio metro de vacío a los lados. */
@media (min-width:1600px){
  :root{--ancho:1320px}
  .s-hero h1{font-size:clamp(2.4rem,3.4vw,3.8rem)}
  .s-lead{font-size:1.14rem;max-width:40em}
  .s-sec{padding:84px 0}
}
@media (min-width:2200px){
  :root{--ancho:1560px}
  .s-sec h2{font-size:clamp(2rem,2.3vw,2.8rem)}
  .s-sub{font-size:1.08rem;max-width:52em}
  .s-card h3{font-size:1.14rem}
  .s-d,.s-b{font-size:.98rem}
}
/* ---------- costura entre la escena y las soluciones ----------
   El ecosistema no termina en el borde del dibujo: la línea sigue bajando hasta la sección. */
#eco{position:relative}
#eco::before{content:"";position:absolute;top:0;left:50%;width:2px;height:66px;transform:translateX(-50%);
  background:linear-gradient(180deg,var(--c1),transparent);opacity:.45}
#eco{padding-top:78px}

/* Las tarjetas llevan una marca de esquina que se enciende al acercarte. */
.s-card{position:relative;overflow:hidden}
.s-card::after{content:"";position:absolute;top:0;right:0;width:46px;height:46px;pointer-events:none;
  background:linear-gradient(225deg,rgba(59,123,255,.16),transparent 62%);opacity:0;transition:opacity .3s}
.s-card:hover::after,.s-card:focus-within::after,.s-card:has(input:checked)::after{opacity:1}

/* ---------- secciones ---------- */
.s-sec{padding:66px 0}
/* Translúcido para que la cuadrícula del fondo siga corriendo por debajo:
   si el bloque alterno fuera opaco, el papel se cortaría a mitad de página. */
.s-alt{background:var(--alt);border-block:1px solid var(--bd)}
.s-sec h2{margin:0 0 12px;font:800 clamp(1.5rem,3.6vw,2.25rem)/1.14 var(--f-tit);letter-spacing:-.018em;text-align:center}
.s-sub{margin:0 auto 34px;color:var(--mu);text-align:center;max-width:46em}
.s-note{margin:22px 0 0;text-align:center;color:var(--mu);font-size:.9rem}
.s-note a,.s-sub a{color:var(--c2)}

/* ---------- tarjetas de solución ---------- */
.s-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));border:0;margin:0;padding:0}
.s-card{display:flex;flex-direction:column;border:1px solid var(--bd);border-radius:12px;padding:22px 20px;background:var(--sf);transition:border-color .25s,transform .25s,box-shadow .25s}
.s-card:hover{border-color:var(--c1);transform:translateY(-3px);box-shadow:0 14px 30px var(--sombra)}
.s-card:has(input:checked){border-color:var(--c1);box-shadow:0 0 0 1px var(--c1) inset}
.s-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:10px;border:1px solid var(--bd);background:var(--t1);margin-bottom:14px}
.s-ico svg{width:23px;height:23px;fill:none;stroke:var(--c1);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.s-card h3{margin:0 0 8px;font-size:1.06rem;font-weight:700;line-height:1.3}
.s-d{margin:0 0 10px;color:var(--mu);font-size:.92rem}
.s-b{margin:0 0 12px;font-size:.9rem;color:var(--tx);border-left:2px solid var(--c1);padding-left:10px}
/* margin-top:auto empuja el precio y el botón al fondo: así todas las tarjetas de una fila
   terminan a la misma altura aunque las descripciones midan distinto. */
.s-p{margin:auto 0 14px;font:700 1rem/1.3 var(--f-tit);letter-spacing:-.01em;color:var(--tx)}
.s-pick{display:flex;align-items:center;gap:10px;cursor:pointer;border:1px dashed var(--bd);border-radius:12px;padding:11px 13px;min-height:46px;font-size:.88rem;font-weight:600;transition:border-color .2s,background-color .2s}
.s-pick:hover{border-color:var(--c1);background:var(--t2)}
.s-pick input{width:19px;height:19px;accent-color:var(--c1);flex:0 0 19px;cursor:pointer}
.s-card:has(input:checked) .s-pick{border-style:solid;border-color:var(--c1);background:var(--t3)}

/* Qué incluye cada solución (3.37). Aparece al elegirla: hasta entonces la tarjeta se lee
   sin ruido. Son casillas de verdad, así que funcionan sin JavaScript y con teclado. */
.s-ops{border:0;margin:0;padding:0;display:grid;gap:0;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .3s ease,opacity .25s,margin .3s}
.s-ops > legend{font:700 .74rem/1.4 var(--f-tx);letter-spacing:.03em;color:var(--mu);padding:0;float:left;width:100%}
.s-ops-in{overflow:hidden;display:flex;flex-wrap:wrap;gap:6px}
.s-card:has(input[name="sv"]:checked) .s-ops,.s-ops:focus-within{grid-template-rows:1fr;opacity:1;margin-top:12px}
.s-op{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--bd);border-radius:999px;
  padding:7px 13px;min-height:40px;font-size:.84rem;font-weight:600;cursor:pointer;background:var(--sf);
  transition:border-color .2s,background-color .2s,color .2s}
.s-op:hover{border-color:var(--c1);background:var(--t2)}
.s-op input{width:16px;height:16px;flex:0 0 16px;accent-color:var(--c1);cursor:pointer;margin:0}
.s-op:has(input:checked){border-color:var(--c2);background:var(--t3);color:var(--c2)}
.s-op:focus-within{outline:3px solid var(--tx);outline-offset:2px}
.eco-ops{display:block;color:var(--mu);font-size:.82rem;line-height:1.4;margin-top:2px}


/* La ilustración de cada solución, en su recuadro, como en la referencia:
   dibujo de línea sobre un papel más claro, y el trazo en el azul de la marca. */
.s-card .s-ico{width:100%;height:clamp(104px,11vw,132px);border-radius:8px;background:var(--t1);
  border:1px solid var(--bd2);margin-bottom:16px}
.s-card .s-ico svg{width:clamp(44px,5vw,56px);height:auto;stroke-width:1.35}
.s-card:hover .s-ico{transform:none;background:var(--t2);border-color:var(--bd2)}
.s-card h3{font-size:1.08rem;font-weight:700}
.s-card .s-p{font-size:1.02rem}


/* ---------- las piezas de infraestructura (3.36: la sala de máquinas) ----------
   Una placa de circuito dibujada en vectores. Es un objeto oscuro en los dos temas: el
   «render» del sistema, con módulos enchufados, pistas de cobre y un paquete de luz que
   recorre el camino de cada ejemplo. Debajo, las piezas para la cotización. */
.pz-equipo{
  --pb-fondo:#0c1830; --pb-punto:#1c2e55; --pb-cobre:#9c7442; --pb-pad:#c49558;
  --pb-cara-a:#1a2f5c; --pb-cara-b:#12234a; --pb-lado:#071024; --pb-filo:rgba(150,185,255,.22);
  --pb-obj:#24406f; --pb-obj2:#1d355f; --pb-trazo:#9ab7ee; --pb-pantalla:#081226;
  --pb-luz:#5ccbff; --pb-ok:#5fe3aa; --pb-alerta:#ffb24a; --pb-tx:#e8efff; --pb-tx2:#9db0d6;
  --pb-zona:rgba(140,175,240,.2);
  margin:0 0 54px;border-radius:22px;overflow:hidden;background:var(--pb-fondo);color:var(--pb-tx);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 30px 60px -30px rgba(12,24,48,.55),0 0 0 1px rgba(12,24,48,.12);
}
:root[data-theme="dark"] .pz-equipo{box-shadow:0 0 0 1px rgba(140,175,240,.16),0 30px 60px -30px rgba(0,0,0,.8)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pz-equipo{box-shadow:0 0 0 1px rgba(140,175,240,.16),0 30px 60px -30px rgba(0,0,0,.8)}
}

/* La barra de arriba: qué está encendido y los mandos. */
.pz-barra{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid rgba(140,175,240,.14)}
.pz-barra-t{margin:0;display:flex;flex-direction:column;gap:3px;flex:1 1 320px;min-width:0}
.pz-modo{font:700 .72rem/1.3 var(--f-tx);letter-spacing:.06em;color:var(--pb-luz)}
.pz-barra-t span{font-size:.9rem;color:var(--pb-tx2);line-height:1.4}
.pz-pausa,.pz-apaga{font:600 .86rem/1.2 var(--f-tx);color:var(--pb-tx2);background:transparent;border:1px solid rgba(140,175,240,.24);
  border-radius:999px;padding:9px 15px;min-height:40px;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,opacity .2s}
.pz-pausa:hover,.pz-apaga:hover:not(:disabled){color:var(--pb-tx);border-color:rgba(140,175,240,.5)}
.pz-apaga:disabled{opacity:.35;cursor:default}
.pz-pausa{display:inline-flex;align-items:center;gap:8px}
.pz-pausa-i{width:10px;height:12px;border-inline:3.5px solid currentColor}
.pz-pausa[aria-pressed="true"] .pz-pausa-i{border:0;border-left:10px solid currentColor;border-block:6px solid transparent;width:0;height:0}
.pz-pausa:focus-visible,.pz-apaga:focus-visible,.pz-volver:focus-visible,.pz-otra:focus-visible{outline:3px solid var(--pb-tx);outline-offset:3px}

/* La placa. */
.pz-vista{position:relative}
.pz-tab{display:block;width:100%;height:auto;user-select:none;-webkit-user-select:none}
.pz-tab-m{display:none}
.pz-fondo{fill:var(--pb-fondo)}
.pz-punto{fill:var(--pb-punto)}
.pz-zona{fill:rgba(140,175,240,.025);stroke:var(--pb-zona);stroke-width:1.2;stroke-dasharray:5 7}
.pz-zona-t{font:600 15px var(--f-tx);fill:var(--pb-tx2);letter-spacing:.01em}
.pz-via{fill:none;stroke:var(--pb-cobre);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;opacity:.75;transition:opacity .4s}
.pz-via-luz{fill:none;stroke:var(--pb-luz);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .6s}
.pz-via-luz.lit{opacity:1;transition:opacity .15s}
.pz-pad{fill:var(--pb-fondo);stroke:var(--pb-pad);stroke-width:2.4;opacity:.85}
.pz-paq-n{fill:#eafaff}
.pz-nom{font-family:var(--f-tx);font-weight:600;fill:var(--pb-tx);text-anchor:middle;paint-order:stroke;stroke:var(--pb-fondo);stroke-width:7px;stroke-linejoin:round;transition:fill .3s,opacity .4s}

/* Cada módulo: base, dibujo y marca de elegida. */
.pz-capa{cursor:pointer;transform-box:fill-box;transform-origin:center;transition:transform .3s cubic-bezier(.3,.7,.3,1),opacity .4s,filter .4s}
.pz-lado{fill:var(--pb-lado)}
.pz-cara{fill:url(#pzd-cara);stroke:rgba(150,185,255,.28);stroke-width:1.4;transition:stroke .25s}
.pz-tab-m .pz-cara{fill:url(#pzm-cara)}
.pz-filo{fill:none;stroke:var(--pb-filo);stroke-width:1}
.pz-tornillo{fill:var(--pb-lado);stroke:rgba(150,185,255,.25);stroke-width:1}
.pz-o{fill:var(--pb-obj);stroke:var(--pb-trazo);stroke-width:1.6;stroke-linejoin:round}
.pz-o2{fill:var(--pb-obj2);stroke:var(--pb-trazo);stroke-width:1.6;stroke-linejoin:round}
.pz-l{fill:none;stroke:var(--pb-trazo);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pz-fino{stroke-width:1.1;opacity:.75}
.pz-led{fill:var(--pb-ok)}
.pz-pantalla{fill:var(--pb-pantalla);stroke:rgba(150,185,255,.25);stroke-width:1}
.pz-tenue{fill:rgba(154,183,238,.35)}
.pz-ok{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.pz-ok circle{fill:var(--pb-ok);stroke:var(--pb-fondo);stroke-width:3}
.pz-ok path{fill:none;stroke:#062a1b;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pz-capa.sel .pz-ok{opacity:1;transform:none}
.pz-capa.sel .pz-cara{stroke:var(--pb-ok);stroke-width:2.2}
.pz-capa.on .pz-cara{stroke:var(--pb-luz);stroke-width:2.4}
.pz-capa.on{transform:translateY(-4px)}
.pz-capa:focus{outline:none}

/* Mientras corre un ejemplo, lo que no participa se apaga un poco. */
.pz-tab.enfoca .pz-capa.fuera{opacity:.38;filter:saturate(.4)}
.pz-tab.enfoca .pz-nom.fuera{opacity:.4}
.pz-tab.enfoca .pz-via.fuera{opacity:.22}

/* Piezas concretas: en reposo. */
.pz-arte-realtime .pz-col{fill:var(--pb-luz);opacity:.85;transform-box:fill-box;transform-origin:50% 100%}
.pz-vivo{fill:#ff6b81}
.pz-arte-camaras .pz-cono{fill:var(--pb-luz);opacity:.1}
.pz-det{fill:none;stroke:var(--pb-alerta);stroke-width:2.4;stroke-dasharray:6 4;opacity:0;transform-box:fill-box;transform-origin:center}
.pz-burb-in{fill:rgba(154,183,238,.55)}
.pz-burb-out{fill:var(--pb-ok);opacity:.9}
.pz-n1,.pz-n2,.pz-escribe{opacity:0;transform-box:fill-box;transform-origin:left center}
.pz-n2{transform-origin:right center}
.pz-escribe circle{fill:rgba(154,183,238,.8)}
.pz-anillo{fill:none;stroke:var(--pb-luz);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.pz-arco{transform-box:fill-box;transform-origin:center bottom}
.pz-onda{fill:none;stroke:var(--pb-luz);stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:center}
.pz-pin{fill:var(--pb-pad);opacity:.75}
.pz-nodo{fill:var(--pb-obj);stroke:var(--pb-trazo);stroke-width:1.4}
.pz-chispa{fill:var(--pb-luz);opacity:.8}
.pz-cae{opacity:0}
.pz-insig{opacity:0}
.pz-insig circle{fill:#ff6b81}
.pz-insig text{font:700 12px var(--f-tx);fill:#fff;text-anchor:middle}
.pz-estela{opacity:0}
.pz-db{transition:stroke .3s}
.pz-cont rect{transition:fill .3s}

/* El guion del ejemplo que se reproduce sobre la placa. Los pasos sí son una secuencia. */
.pz-guia{padding:16px 22px 20px;border-top:1px solid rgba(140,175,240,.14);background:rgba(92,203,255,.05)}
.pz-guia[hidden]{display:none}
.pz-guia-t{margin:0 0 12px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.pz-guia-t span{font:700 .7rem/1.3 var(--f-tx);letter-spacing:.06em;color:var(--pb-alerta);border:1px solid rgba(255,178,74,.4);border-radius:999px;padding:3px 9px}
.pz-guia-tit{font:700 1rem/1.3 var(--f-tit);color:var(--pb-tx)}
.pz-pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 22px}
.pz-paso{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;color:var(--pb-tx2);font-size:.9rem;line-height:1.4;transition:color .3s}
.pz-num{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(140,175,240,.35);font:700 .8rem/1 var(--f-tx);color:var(--pb-tx2);transition:background-color .3s,color .3s,border-color .3s}
.pz-paso.ya{color:var(--pb-tx)}
.pz-paso.ya .pz-num{border-color:var(--pb-luz);color:var(--pb-luz)}
.pz-paso.ahora{color:var(--pb-tx)}
.pz-paso.ahora .pz-num{background:var(--pb-luz);border-color:var(--pb-luz);color:#06132a}
.pz-guia-a{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.pz-otra,.pz-volver{font:600 .86rem/1.2 var(--f-tx);border-radius:999px;padding:10px 16px;min-height:42px;cursor:pointer;border:1px solid transparent}
.pz-volver{color:#06132a;background:var(--pb-luz)}
.pz-volver:hover{filter:brightness(1.08)}
.pz-otra{color:var(--pb-tx2);background:transparent;border-color:rgba(140,175,240,.24)}
.pz-otra:hover{color:var(--pb-tx);border-color:rgba(140,175,240,.5)}

/* Modo vivo: lo elegido encendido, con datos corriendo por las pistas. */
.pz-via-luz.vivo{opacity:.95;transition:opacity .5s}
.pz-flujo{fill:#eafaff}
.pz-flujo-b{fill:var(--pb-ok)}
.pz-tab.vivo .pz-capa:not(.fuera) .pz-cara{stroke:var(--pb-ok);stroke-width:2}
.pz-tab.vivo .pz-capa.fuera,.pz-tab.vivo .pz-nom.fuera{opacity:.3;filter:saturate(.25)}
.pz-tab.vivo .pz-via.fuera{opacity:.16}
.pz-equipo.dormido .pz-flujo{opacity:0!important}

/* Las piezas para la cotización. */
.pz-elige{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 20px;margin:0 0 16px}
.pz-h3{margin:0;font:800 clamp(1.15rem,2vw,1.4rem)/1.2 var(--f-tit);letter-spacing:-.01em}
.pz-pie{margin:0;color:var(--mu);font-size:.92rem}
.pz-lista{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))}
.pz-fila label{display:grid;grid-template-rows:auto auto 1fr;gap:4px;height:100%;padding:14px 16px 16px;border:1px solid var(--bd);border-radius:14px;
  background:var(--sf);cursor:pointer;transition:border-color .2s,background-color .2s}
.pz-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.pz-cod{font:600 .74rem/1.4 var(--f-num);letter-spacing:.06em;color:var(--mu)}
.pz-n{font-size:1rem;font-weight:700;line-height:1.3}
.pz-d{color:var(--mu);font-size:.88rem;line-height:1.45}
.pz-fila:hover label,.pz-fila.on label{border-color:var(--c1)}
.pz-fila:has(input:checked) label{background:var(--t3);border-color:var(--c2)}
.pz-fila:has(input:checked) .pz-cod{color:var(--c2)}
.pz-fila label:focus-within{outline:3px solid var(--tx);outline-offset:2px}
/* El interruptor es una casilla de verdad, con forma de interruptor. */
.pz-sw{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:42px;height:24px;margin:0;border-radius:999px;background:var(--bd);position:relative;cursor:pointer;transition:background-color .2s}
.pz-sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .22s cubic-bezier(.3,.8,.3,1)}
.pz-sw:checked{background:var(--c2)}
.pz-sw:checked::after{transform:translateX(18px)}
.pz-sw:focus-visible{outline:none}

@media (prefers-reduced-motion:no-preference){
  /* Lo que se mueve solo, poco y lento: las luces de estado. Se duerme fuera de pantalla. */
  .pz-led{animation:pz-led 2.6s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.7s)}
  .pz-cont:nth-child(2n) .pz-led{animation-duration:3.4s}
  .pz-parpadeo{animation:pz-parpadeo 1.8s steps(1) infinite}
  .pz-vivo{animation:pz-led 1.4s ease-in-out infinite}
  .pz-chispa{animation:pz-chispa 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  .pz-arte-camaras .pz-cabeza{animation:pz-mira 7s ease-in-out infinite;transform-box:fill-box;transform-origin:0% 0%}
  .pz-arte-realtime .pz-col{animation:pz-barras 5s ease-in-out infinite;animation-delay:calc(var(--i) * -.8s)}
  .pz-equipo.dormido *{animation-play-state:paused!important}
  @keyframes pz-led{50%{opacity:.35}}
  @keyframes pz-parpadeo{50%{opacity:.25}}
  @keyframes pz-chispa{50%{transform:scale(.6) rotate(45deg);opacity:.5}}
  @keyframes pz-mira{50%{transform:rotate(7deg)}}
  @keyframes pz-barras{50%{transform:scaleY(.6)}}

  /* «act»: lo que hace cada módulo cuando le llega el paquete. */
  .pz-capa.act .pz-cara{stroke:var(--pb-luz);stroke-width:2.6}
  .pz-capa.act .pz-cont{animation:pz-sube .9s cubic-bezier(.3,.7,.3,1) both;animation-delay:calc(var(--i) * 70ms)}
  .pz-capa.act .pz-cont rect{fill:#2c5aa8}
  @keyframes pz-sube{35%{transform:translateY(-7px)}}
  .pz-capa.act .pz-db{animation:pz-raya .9s ease both;animation-delay:calc(var(--i) * 140ms)}
  @keyframes pz-raya{30%,60%{stroke:var(--pb-luz);stroke-width:2.6}}
  .pz-capa.act .pz-tapa{animation:pz-tapa .9s ease both}
  @keyframes pz-tapa{30%{fill:#2c5aa8}}
  .pz-capa.act .pz-cae{animation:pz-cae 1.1s cubic-bezier(.5,0,.6,1) both}
  @keyframes pz-cae{0%{opacity:0;transform:translateY(-26px)}20%{opacity:1}70%{opacity:1;transform:translateY(18px)}100%{opacity:0;transform:translateY(22px)}}
  .pz-capa.act .pz-cubo{animation:pz-bote .5s .6s ease-out}
  @keyframes pz-bote{40%{transform:translateY(3px)}}
  .pz-capa.act .pz-anillo{animation:pz-anillo 1s ease-out both}
  @keyframes pz-anillo{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(1.35)}}
  .pz-capa.act .pz-arco{animation:pz-arco .8s ease both}
  @keyframes pz-arco{30%{transform:translateY(-5px)}60%{transform:none}}
  .pz-capa.act .pz-sobre{animation:pz-vuela 1.1s cubic-bezier(.5,0,.3,1) both}
  @keyframes pz-vuela{30%{transform:translate(-6px,2px)}55%{transform:translate(26px,-8px);opacity:0}56%{transform:translate(-20px,4px);opacity:0}100%{transform:none;opacity:1}}
  .pz-capa.act .pz-estela{animation:pz-estela 1.1s ease both}
  @keyframes pz-estela{20%,45%{opacity:.8;transform:translateX(30px)}60%{opacity:0}}
  .pz-capa.act .pz-insig{animation:pz-insig 1.6s .8s cubic-bezier(.3,1.6,.5,1) both;transform-box:fill-box;transform-origin:center}
  @keyframes pz-insig{0%{opacity:0;transform:scale(.3)}25%,80%{opacity:1;transform:none}100%{opacity:0}}
  .pz-capa.act .pz-col{animation:pz-salta .9s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i) * 60ms)}
  @keyframes pz-salta{40%{transform:scaleY(1.25);fill:#9fe2ff}}
  .pz-capa.act .pz-onda{animation:pz-onda 1.2s ease-out both;animation-delay:calc(var(--i) * 220ms)}
  @keyframes pz-onda{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
  .pz-capa.act .pz-sat{animation:pz-sat .5s ease both;animation-delay:calc(.35s + var(--i) * 90ms)}
  @keyframes pz-sat{50%{fill:var(--pb-luz)}}
  .pz-capa.act .pz-pin{animation:pz-pin .7s ease both;animation-delay:calc(var(--i) * 55ms)}
  @keyframes pz-pin{40%{fill:var(--pb-luz);opacity:1;transform:translateY(2px)}}
  .pz-capa.act .pz-det{animation:pz-det 1.6s cubic-bezier(.3,1.4,.5,1) both}
  @keyframes pz-det{0%{opacity:0;transform:scale(1.6)}25%,85%{opacity:1;transform:none}100%{opacity:0}}
  .pz-capa.act .pz-n1{animation:pz-burb 1.6s cubic-bezier(.3,1.5,.5,1) both}
  .pz-capa.act .pz-escribe{animation:pz-escribe 1.6s ease both}
  .pz-capa.act .pz-n2{animation:pz-burb 1.6s .7s cubic-bezier(.3,1.5,.5,1) both}
  @keyframes pz-burb{0%{opacity:0;transform:scale(.3)}20%,80%{opacity:1;transform:none}100%{opacity:0}}
  @keyframes pz-escribe{20%,40%{opacity:1}50%{opacity:0}}
  .pz-capa.act .pz-nodo{animation:pz-nodo .8s ease both;animation-delay:calc(var(--i) * 90ms)}
  @keyframes pz-nodo{40%{fill:var(--pb-luz);stroke:#d8f3ff}}
  .pz-capa.act .pz-chispa{animation:pz-chispa2 1s ease both}
  @keyframes pz-chispa2{40%{transform:scale(1.7) rotate(90deg);opacity:1}}
}

@media (max-width:880px){
  .pz-tab-d{display:none}
  .pz-tab-m{display:block;max-width:460px;margin:0 auto}
  .pz-pasos{grid-template-columns:1fr;gap:10px}
}
@media (max-width:560px){
  .pz-equipo{margin:0 0 40px;border-radius:18px}
  .pz-barra{padding:12px}
  .pz-pausa,.pz-apaga{flex:1 1 auto}
  .pz-guia{padding:16px 14px 18px}
  .pz-paso{font-size:.92rem}
  .pz-volver,.pz-otra{flex:1 1 auto}
}

/* ============================================================================
   3.37 · TU PROPUESTA: el render, la cotización y las configuraciones de otros
   ============================================================================
   Dos materiales distintos a propósito, para que nadie confunda uno con otro:
   el RENDER es un estudio iluminado (fondo oscuro, luz cenital, suelo con reflejo) y
   la COTIZACIÓN es un documento en papel. Uno enseña, el otro explica y cobra. */

/* ---------- el render ---------- */
.rd-svg{display:block;width:100%;height:auto;background:#070d1b}
.rd-pos{transform-box:view-box;transition:transform .55s cubic-bezier(.3,.8,.3,1)}
.rd-sin-trans{transition:none!important}
.rd-dev{transform-box:fill-box;transform-origin:50% 100%}
.rd-sombra{fill:#000;opacity:.42;filter:blur(7px)}
.rd-rotulo{font-family:var(--f-tx);font-weight:600;fill:#dfe8ff;paint-order:stroke;stroke:#070d1b;stroke-width:6px;stroke-linejoin:round;
  transition:x .55s cubic-bezier(.3,.8,.3,1),y .55s cubic-bezier(.3,.8,.3,1)}
.rd-op{opacity:0;pointer-events:none;transition:opacity .35s}
.rd-op.on{opacity:1}
.rd-vacio{opacity:0;transition:opacity .3s}
.rd-vacio.on{opacity:1}
.rd-pagina > .rd-op{transition:opacity .35s,transform .45s cubic-bezier(.3,.8,.3,1)}
.rd-panel,.rd-carta,.rd-fila{transition:transform .5s cubic-bezier(.3,.8,.3,1)}
.rd-carta{transform-box:fill-box;transform-origin:50% 100%}
.rd-nada{opacity:0;transition:opacity .4s}
.rd-nada.on{opacity:1}
.rd-nada-t{font:700 24px var(--f-tit);fill:#dfe8ff}
.rd-nada-s{font:400 15px var(--f-tx);fill:#8fa3cc}
.rd-tx{font:600 10px var(--f-tx);fill:#161a23}
.rd-cod{font:600 9px var(--f-num);fill:#cfe0ff;letter-spacing:.04em}
.rd-cable-suelo{stroke:#2a3a60;stroke-width:3;fill:none;stroke-linecap:round}
.rd-cable-luz{fill:none;stroke:#5ccbff;stroke-width:3;stroke-linecap:round;stroke-dasharray:6 22;opacity:.85}
.rd-unidad{transform-box:fill-box}
.rd-mini .rd-rotulo,.rd-mini .rd-nada-t,.rd-mini .rd-nada-s{display:none}

@media (prefers-reduced-motion:no-preference){
  .rd-cable-luz{animation:rd-dato 2.2s linear infinite}
  @keyframes rd-dato{to{stroke-dashoffset:-56}}
  .rd-led{animation:rd-led 2.4s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.5s)}
  @keyframes rd-led{50%{opacity:.3}}
  .rd-barra,.rd-medida{transform-box:fill-box;transform-origin:50% 100%;animation:rd-sube .8s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--i) * 80ms)}
  .rd-medida{transform-origin:0% 50%;animation-name:rd-ancho}
  @keyframes rd-sube{from{transform:scaleY(0)}}
  @keyframes rd-ancho{from{transform:scaleX(0)}}
  .rd-cita{transform-box:fill-box;transform-origin:0% 50%;animation:rd-ancho .6s cubic-bezier(.3,1.3,.5,1) both;animation-delay:calc(var(--i) * 90ms)}
  .rd-toast{animation:rd-asoma 3.6s ease-in-out infinite}
  @keyframes rd-asoma{0%,70%{transform:translateY(0);opacity:1}85%{transform:translateY(8px);opacity:0}100%{transform:translateY(0);opacity:1}}
  .rd-campana{transform-box:fill-box;transform-origin:50% 20%;animation:rd-campana 4s ease-in-out infinite}
  @keyframes rd-campana{4%{transform:rotate(14deg)}9%{transform:rotate(-12deg)}14%{transform:rotate(7deg)}19%{transform:rotate(0)}}
  .rd-burb{transform-box:fill-box;transform-origin:0% 50%;animation:rd-burb 3.4s ease-in-out infinite}
  .rd-burb2{animation-delay:.6s}
  @keyframes rd-burb{0%,12%{transform:scale(.4);opacity:0}20%,80%{transform:scale(1);opacity:1}92%,100%{opacity:1}}
  .rd-escribe circle{animation:rd-pun 1.2s ease-in-out infinite}
  .rd-escribe circle:nth-child(2){animation-delay:.15s}
  .rd-escribe circle:nth-child(3){animation-delay:.3s}
  @keyframes rd-pun{50%{opacity:.25;transform:translateY(-2px)}}
  .rd-gota,.rd-gota2{animation:rd-gota 2.2s ease-in infinite;animation-delay:calc(var(--i,0) * .28s)}
  @keyframes rd-gota{0%{opacity:0;transform:translateY(-6px)}25%{opacity:1}100%{opacity:0;transform:translateY(16px)}}
  .rd-onda{transform-box:fill-box;transform-origin:50% 100%;animation:rd-onda 2.4s ease-out infinite}
  .rd-onda2{animation-delay:.5s}
  @keyframes rd-onda{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.4)}}
  .rd-hoja{transform-box:fill-box;transform-origin:50% 100%;animation:rd-mece 5.5s ease-in-out infinite;animation-delay:calc(var(--i) * -.7s)}
  @keyframes rd-mece{50%{transform:rotate(4deg)}}
  .rd-alerta{transform-box:fill-box;transform-origin:center;animation:rd-late 2.6s ease-in-out infinite}
  @keyframes rd-late{50%{transform:scale(1.12)}}
  .rd-linea{stroke-dasharray:200;animation:rd-traza 2.6s ease-in-out infinite alternate}
  @keyframes rd-traza{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}
  .rd-flota{animation:rd-flota 5s ease-in-out infinite}
  @keyframes rd-flota{50%{transform:translateY(-7px)}}
  .rd-cono{animation:rd-cono 6s ease-in-out infinite;transform-box:fill-box;transform-origin:100% 0%}
  @keyframes rd-cono{50%{transform:rotate(-12deg)}}
  .rd-reja{transform-box:fill-box;transform-origin:0% 50%;animation:rd-reja 6s ease-in-out infinite}
  @keyframes rd-reja{35%,65%{transform:scaleX(.25)}}
  .rd-holo{animation:rd-holo 4s ease-in-out infinite}
  @keyframes rd-holo{50%{opacity:.78}}
  .rd-lupa{animation:rd-lupa 7s ease-in-out infinite}
  @keyframes rd-lupa{30%{transform:translate(20px,-24px)}60%{transform:translate(-14px,-8px)}}
  .rd-rueda{animation:rd-rueda 9s ease-in-out infinite alternate}
  @keyframes rd-rueda{0%,22%{transform:translateY(0)}78%,100%{transform:translateY(var(--sobra,0))}}
  .rd-dormido *{animation-play-state:paused!important}
}

/* ---------- la zona de la propuesta ---------- */
.pr-grid{display:grid;gap:22px;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start;margin:0 0 26px}
.pr-render{position:sticky;top:76px;border-radius:18px;overflow:hidden;background:#070d1b;border:1px solid rgba(140,175,240,.2);
  box-shadow:0 26px 54px -30px rgba(7,13,27,.75)}
.pr-render-cab{position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;z-index:2;background:linear-gradient(#070d1bcc,#070d1b00)}
.pr-sello{margin:0;font:700 .68rem/1.3 var(--f-tx);letter-spacing:.08em;color:#9db0d6;
  border:1px solid rgba(157,176,214,.35);border-radius:999px;padding:5px 11px;background:rgba(7,13,27,.6)}
.pr-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;cursor:pointer;
  color:#dfe8ff;background:rgba(7,13,27,.55);border:1px solid rgba(157,176,214,.3);transition:background-color .2s,border-color .2s}
.pr-ico:hover{background:rgba(92,203,255,.2);border-color:#5ccbff}
.pr-ico svg{width:19px;height:19px}
.pr-ico:focus-visible{outline:3px solid #dfe8ff;outline-offset:2px}
.pr-lienzo{display:block}
.pr-pie{margin:0;padding:12px 16px 14px;font-size:.82rem;line-height:1.5;color:#9db0d6;background:#0a1222;border-top:1px solid rgba(140,175,240,.14)}
.pr-pie b{color:#dfe8ff}
.pr-render.pr-grande{position:fixed!important;inset:16px;z-index:60;display:grid;grid-template-rows:auto 1fr auto;align-content:center;overflow:auto}
.pr-render.pr-grande .pr-render-cab{position:sticky;top:0}
.pr-render.pr-grande .pr-lienzo{display:grid;place-items:center}
body.pr-sin-scroll{overflow:hidden}

/* ---------- la cotización, como documento ---------- */
.pr-doc-w{display:flex;flex-direction:column;gap:12px;min-width:0}
.pr-doc-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.pr-acc-top{display:flex;flex-wrap:wrap;gap:6px}
.pr-vers{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.pr-vers-t{font:700 .72rem/1.3 var(--f-tx);letter-spacing:.05em;color:var(--mu)}
.pr-vers-l{display:flex;flex-wrap:wrap;gap:5px}
.pr-vers-b{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--bd);background:var(--sf);border-radius:999px;
  padding:7px 8px 7px 13px;min-height:38px;font:600 .8rem/1.2 var(--f-tx);color:var(--tx);cursor:pointer;transition:border-color .2s}
.pr-vers-b:hover{border-color:var(--c1)}
.pr-vers-x{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--b1);color:var(--mu);font-size:14px;line-height:1}
.pr-vers-b:hover .pr-vers-x{background:var(--er-bg);color:var(--er-fg)}
.pr-doc{background:var(--sf);border:1px solid var(--bd);border-radius:16px;overflow:hidden;box-shadow:0 18px 40px -28px var(--sombra)}

.cz-doc{display:block}
.cz-cab{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:14px 22px;
  padding:18px 24px;background:#0c1830;color:#e8efff}
.cz-marca{display:flex;flex-direction:column;gap:2px;min-width:0}
.cz-marca b{font:800 1.1rem/1.2 var(--f-tit);letter-spacing:-.01em}
.cz-marca span{font-size:.84rem;color:#9db0d6}
.cz-meta{display:flex;flex-wrap:wrap;gap:4px 22px;margin:0}
.cz-meta dt{font:600 .66rem/1.4 var(--f-tx);letter-spacing:.06em;color:#8fa3cc}
.cz-meta dd{margin:0;font:600 .86rem/1.4 var(--f-num);color:#e8efff}
.cz-borr{color:#ffb24a;font-family:var(--f-tx)}
.cz-vencida{color:#ff8ba0;font-family:var(--f-tx)}

.cz-sec{padding:20px 24px;border-top:1px solid var(--bd2)}
.cz-sec h3{display:flex;align-items:baseline;gap:10px;margin:0 0 13px;font:700 .98rem/1.3 var(--f-tit);letter-spacing:-.01em}
.cz-n{display:grid;place-items:center;flex:0 0 auto;width:21px;height:21px;border-radius:6px;background:var(--t3);
  color:var(--c2);font:700 .72rem/1 var(--f-num)}

/* 1 · El proyecto */
.cz-que{margin:0;font:700 1.08rem/1.45 var(--f-tit);letter-spacing:-.012em}
.cz-obj{margin:8px 0 0;color:var(--mu);font-size:.95rem;line-height:1.55}

/* 2 · Qué incluye */
.cz-svs{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.cz-svs > li{padding:12px 14px;border:1px solid var(--bd);border-radius:11px;background:var(--t1)}
.cz-infra{border-style:dashed!important}
.cz-svs-t{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin:0}
.cz-svs-t b{font-size:.97rem;font-weight:700}
.cz-modo{font:600 .73rem/1.3 var(--f-tx);color:var(--c2);background:var(--t3);border-radius:999px;padding:3px 9px;white-space:nowrap}
.cz-chips{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.cz-chips li{border:1px solid var(--bd2);border-radius:999px;padding:4px 10px;font-size:.82rem;font-weight:600;background:var(--sf);color:var(--mu)}
.cz-tenue{margin:6px 0 0;color:var(--mu);font-size:.87rem;line-height:1.5}

/* 3 · Qué recibes */
.cz-grupo{margin:0 0 11px}
.cz-grupo:last-child{margin-bottom:0}
.cz-grupo h4{margin:0 0 6px;font:700 .74rem/1.4 var(--f-tx);letter-spacing:.05em;color:var(--mu)}
.cz-check{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cz-check li{position:relative;padding-left:25px;font-size:.91rem;line-height:1.5}
.cz-check li::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;border-radius:50%;
  background:var(--ok-bg);border:1px solid var(--ok-bd)}
.cz-check li::after{content:"";position:absolute;left:5px;top:.62em;width:6px;height:3px;border-left:2px solid var(--ok-fg);
  border-bottom:2px solid var(--ok-fg);transform:rotate(-45deg)}

/* 4 · A tu medida */
.cz-medida{margin:0;padding:12px 14px;border-left:3px solid var(--c1);background:var(--t1);border-radius:0 10px 10px 0;
  font-size:.94rem;line-height:1.55}

/* 5 · Precio */
.cz-tabla{width:100%;border-collapse:collapse;font-size:.9rem;table-layout:fixed}
.cz-tabla th,.cz-tabla td{text-align:left;padding:9px 2px 9px 0;border-bottom:1px solid var(--bd2);vertical-align:top;overflow-wrap:anywhere}
.cz-tabla tbody th{font-weight:600}
.cz-tabla tbody th small{display:block;color:var(--mu);font-size:.76rem;font-weight:500;margin-top:1px}
.cz-v{text-align:right;font-variant-numeric:tabular-nums;width:40%}
.cz-tabla tbody .cz-v{font-weight:700;font-family:var(--f-num);font-size:.85rem}
.cz-caracteristica th{padding-left:16px;font-weight:500;color:var(--mu)}
.cz-pend .cz-v{font-weight:500;color:var(--mu);font-family:var(--f-tx)}
.cz-tabla tfoot th{font-weight:500;color:var(--mu);text-align:right;padding-right:10px;border-bottom:0}
.cz-tabla tfoot .cz-v{font-weight:600;font-family:var(--f-num);border-bottom:0}
.cz-tabla tfoot tr:first-child th,.cz-tabla tfoot tr:first-child td{padding-top:11px}
.cz-total{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px;
  margin-top:14px;padding:16px 18px;border-radius:13px;background:#0c1830;color:#fff}
.cz-total span{font:700 .78rem/1.3 var(--f-tx);letter-spacing:.04em;color:#9db0d6}
.cz-total-v{font:800 clamp(1.35rem,3.2vw,1.8rem)/1.1 var(--f-tit);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cz-total-ninguno .cz-total-v{font-size:1.15rem;color:#9db0d6}
.cz-notas{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:5px}
.cz-notas li{position:relative;padding-left:17px;color:var(--mu);font-size:.84rem;line-height:1.5}
.cz-notas li::before{content:"";position:absolute;left:2px;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--wa-fg)}

/* 6 · Plazo y condiciones */
.cz-plazos{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.cz-plazos li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;padding:8px 12px;border-radius:9px;background:var(--t1)}
.cz-plazos b{font-size:.89rem}
.cz-plazos span{color:var(--c2);font-weight:600;font-size:.89rem}
.cz-cond{margin:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.cz-cond dt{font:700 .85rem/1.4 var(--f-tx)}
.cz-cond dd{margin:2px 0 0;color:var(--mu);font-size:.86rem;line-height:1.5}
.cz-vacia .cz-vacio{padding:32px 24px}
.cz-vacio p{margin:0 0 8px;color:var(--mu);line-height:1.6}
.cz-vacio p b{color:var(--tx)}
.cz-vacio-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px!important}

/* comparar */
.pr-cmp{border:1px solid var(--bd);border-radius:14px;padding:16px 18px;background:var(--sf)}
.pr-cmp-t{margin:0 0 12px;color:var(--mu);font-size:.9rem}
.pr-cmp-sel{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.pr-cmp-sel label{font:700 .78rem/1.4 var(--f-tx);color:var(--mu)}
.pr-cmp-sel select{flex:1 1 auto;min-height:42px;border:1px solid var(--bd);border-radius:9px;padding:0 10px;background:var(--b0);color:var(--tx);font:inherit}
.pr-cmp-tb{width:100%;border-collapse:collapse;font-size:.88rem}
.pr-cmp-tb th,.pr-cmp-tb td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--bd2);vertical-align:top}
.pr-cmp-tb thead th{font:700 .72rem/1.4 var(--f-tx);letter-spacing:.05em;color:var(--mu)}
.pr-cmp-tb tbody th{font-weight:600;color:var(--mu);width:34%}
.pr-cmp-tb tfoot th{text-align:left;font-weight:700}
.pr-cmp-tb tfoot td{font-weight:700;font-family:var(--f-num);font-size:.86rem}
.pr-cmp-a{margin:14px 0 0}

/* lo que pides a tu medida */
.pr-medida{display:grid;gap:8px;margin:0 0 20px;padding:16px 18px;border:1px solid var(--bd);border-radius:14px;background:var(--sf)}
.pr-medida label{font-size:.92rem;line-height:1.5}
.pr-medida label b{font-weight:700}
.pr-medida label span{color:var(--mu)}
.pr-medida textarea{width:100%;min-height:72px;resize:vertical;border:1px solid var(--bd);border-radius:10px;padding:11px 13px;
  background:var(--b0);color:var(--tx);font:inherit;font-size:.92rem;line-height:1.5}
.pr-medida textarea:focus-visible{outline:3px solid var(--tx);outline-offset:2px}

/* lo que llevas, plegable */
.pr-sel{border:1px solid var(--bd);border-radius:13px;background:var(--sf);margin:0 0 26px}
.pr-sel > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;
  padding:14px 18px;font-weight:700;font-size:.95rem;list-style:none}
.pr-sel > summary::-webkit-details-marker{display:none}
.pr-sel > summary b{display:grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:999px;
  background:var(--t3);color:var(--c2);font:700 .84rem/1 var(--f-num)}
.pr-sel > summary:focus-visible{outline:3px solid var(--tx);outline-offset:-3px;border-radius:13px}
.pr-sel .s-sum{border:0;padding:0 18px 18px;background:transparent}

/* datos y envío */
.pr-envio{border:1px solid var(--bd);border-radius:16px;background:var(--sf);padding:22px clamp(16px,3vw,28px)}
.pr-h3{margin:0 0 4px;font:800 clamp(1.1rem,2.2vw,1.35rem)/1.2 var(--f-tit);letter-spacing:-.015em}
.pr-h3-s{margin:0 0 20px;color:var(--mu);font-size:.93rem;line-height:1.55;max-width:60ch}
.s-ayuda{display:block;margin-top:5px;color:var(--mu);font-size:.82rem}
.pr-comp{margin:4px 0 16px;padding:14px 16px;border:1px dashed var(--bd);border-radius:12px;background:var(--t1)}
.pr-comp-mas{margin-top:12px;padding-top:12px;border-top:1px solid var(--bd2)}
.pr-comp-n label{display:block;font-weight:600;font-size:.88rem;margin-bottom:5px}
.pr-comp-f{margin:10px 0 0;color:var(--mu);font-size:.82rem;line-height:1.55}
.pr-botones{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 10px}
.pr-pago{margin-top:16px;padding-top:16px;border-top:1px solid var(--bd2)}
.pr-hecha{margin-top:20px;padding:18px;border:1px solid var(--ok-bd);border-radius:14px;background:var(--ok-bg)}
.pr-hecha-t{display:flex;align-items:center;gap:9px;margin:0 0 5px;font-size:1rem}
.pr-check{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ok-fg);color:var(--ok-bg);font-size:14px;font-weight:700}
.pr-hecha-d{margin:0 0 14px;color:var(--ok-fg);font-size:.9rem;line-height:1.5}
.pr-hecha-d.pr-cambiada{color:var(--wa-fg)}
.pr-hecha-l{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.pr-hecha-l input{flex:1 1 220px;min-width:0;min-height:44px;border:1px solid var(--bd);border-radius:10px;padding:0 12px;
  background:var(--sf);color:var(--tx);font:500 .85rem/1 var(--f-num)}
.pr-hecha-a{display:flex;flex-wrap:wrap;gap:8px;margin:0}

/* la página de una cotización guardada */
.pg-prop .s-headin{justify-content:space-between}
.pg-prop-n{margin:0;font-size:.9rem;color:var(--mu)}
.pg-prop-n b{color:var(--tx);font-family:var(--f-num);font-weight:700}
.pg-aviso{margin:0 0 20px;padding:14px 16px;border:1px solid var(--wa-bd);border-radius:12px;background:var(--wa-bg);color:var(--wa-fg);font-size:.92rem;line-height:1.55}
.pg-acc{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 18px}
.pg-pie{margin:0;color:var(--mu);font-size:.86rem;line-height:1.6;max-width:70ch}

/* ---------- configuraciones de otros clientes ---------- */
.ot-bloque{margin:0 0 34px}
.ot-h3{margin:0 0 4px;font:800 clamp(1.05rem,2vw,1.28rem)/1.25 var(--f-tit);letter-spacing:-.015em}
.ot-aclara{margin:0 0 16px;color:var(--mu);font-size:.9rem}
.ot-bloque > .ot-h3 + .ot-lista{margin-top:16px}
.ot-lista{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.ot-card{display:flex;flex-direction:column;border:1px solid var(--bd);border-radius:15px;overflow:hidden;background:var(--sf);
  transition:border-color .25s,box-shadow .25s}
.ot-card:hover{border-color:var(--c1);box-shadow:0 14px 32px -20px var(--sombra)}
.ot-mini{background:#070d1b;line-height:0}
.ot-mini svg{display:block;width:100%;height:auto}
.ot-tx{display:flex;flex-direction:column;gap:9px;padding:16px 18px 18px;flex:1 1 auto}
.ot-t{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px;margin:0}
.ot-t b{font:700 1rem/1.3 var(--f-tit)}
.ot-t span{font:600 .72rem/1.3 var(--f-tx);letter-spacing:.04em;color:var(--mu);background:var(--b1);border-radius:999px;padding:3px 9px}
.ot-d{margin:0;color:var(--mu);font-size:.88rem;line-height:1.5}
.ot-sv{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.ot-sv li{font-size:.88rem;line-height:1.4}
.ot-sv b{font-weight:600}
.ot-sv span{display:block;color:var(--mu);font-size:.82rem}
.ot-pz{margin:0;color:var(--mu);font-size:.83rem;line-height:1.45}
.ot-acc{display:flex;flex-wrap:wrap;gap:8px;margin:auto 0 0;padding-top:4px}
.ot-nota{margin:0;color:var(--mu);font-size:.8rem}
.ot-vacio{margin:16px 0 0;padding:20px;border:1px dashed var(--bd);border-radius:13px;color:var(--mu);line-height:1.6;font-size:.92rem}
.ot-priv{margin:0;color:var(--mu);font-size:.85rem;line-height:1.6;max-width:72ch}
/* El render de una configuración ajena. Ya no es una ventana encima de todo: se abre
   dentro de la rejilla, ocupando la fila entera debajo de la tarjeta que lo pidió. */
.ot-pan{grid-column:1/-1;opacity:0;transform:translateY(-6px);transition:opacity .22s ease,transform .22s ease}
.ot-pan.on{opacity:1;transform:none}
.ot-pan[hidden]{display:none}
.ot-pan-in{background:var(--sf);border:1px solid var(--c1);border-radius:16px;overflow:hidden}
.ot-pan-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:12px 16px;border-bottom:1px solid var(--bd)}
.ot-pan-cab b{font:700 1rem/1.3 var(--f-tit)}
.ot-pan-x{width:40px;height:40px;border-radius:10px;border:1px solid var(--bd);background:var(--b0);color:var(--tx);font-size:20px;cursor:pointer}
.ot-pan-x:hover{border-color:var(--c1);color:var(--c2)}
.ot-pan-render{line-height:0;background:#070d1b}
.ot-pan-nota{margin:0;padding:11px 16px;color:var(--mu);font-size:.83rem;line-height:1.5}
.ot-pan-acc{margin:0;padding:0 16px 16px}
.ot-pan-acc:empty,.ot-pan-acc:has(>[hidden]){padding-bottom:4px}
@media (prefers-reduced-motion:reduce){.ot-pan{transition:none;opacity:1;transform:none}}

@media (max-width:1000px){
  .pr-grid{grid-template-columns:1fr}
  .pr-render{top:64px;z-index:3}
}
@media (max-width:620px){
  .pr-envio{padding:18px 14px}
  .pr-botones .s-btn,.pr-hecha-a .s-btn{width:100%}
  .pr-render{position:static}
  .cz-cab,.cz-sec{padding-left:16px;padding-right:16px}
  .cz-total{padding:15px 16px}
  .ot-acc .s-btn{width:100%}
}

/* ---------- sistemas creados ---------- */
.s-projs{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr))}
.s-proj{position:relative;border:1px solid var(--bd);border-radius:14px;padding:26px 24px;background:var(--sf);display:flex;flex-direction:column;align-items:flex-start}
.s-proj .s-proja{margin-top:auto}
.s-badge{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--sobre-c);background:var(--c2);border-radius:99px;padding:4px 11px;margin-bottom:12px}
.s-proj h3{margin:0 0 10px;font-size:1.26rem;font-weight:800}
.s-proj p{margin:0 0 14px;color:var(--mu);font-size:.95rem}
.s-tags{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0 0 18px;padding:0}
.s-tags li{font-size:.76rem;color:var(--mu);border:1px solid var(--bd);border-radius:99px;padding:4px 11px}
.s-proja{display:flex;gap:10px;flex-wrap:wrap;margin:0}

/* ---------- academia ---------- */
.s-worlds{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.s-world{border:1px solid var(--bd);border-radius:14px;padding:26px 24px;text-align:center;background:var(--sf)}
.s-world .s-ico{margin:0 auto 14px}
.s-world h3{margin:0 0 8px;font-size:1.3rem;font-weight:800}
.s-world p{margin:0 0 20px;color:var(--mu);font-size:.95rem;min-height:3em}
.s-wa{border-color:var(--bd2)}
.s-wk{border-color:var(--bd2)}
.s-wk .s-ico svg{stroke:var(--c2)}
.s-wk .s-pri{background:var(--c2)}

/* ---------- cómo avanza tu proyecto ----------
   Una línea de tiempo de verdad: los cuatro momentos van colgados de un mismo riel, y el
   número se apoya encima. Es una secuencia, así que el orden se ve antes de leer nada. */
.pa-ruta{list-style:none;margin:0;padding:0;display:grid;gap:30px 26px;
  grid-template-columns:repeat(4,minmax(0,1fr))}
.pa-paso{display:grid;gap:9px;align-content:start;position:relative;padding-top:52px}
/* El riel se dibuja tramo a tramo: así termina en el último número y no se pasa de largo. */
.pa-paso::after{content:"";position:absolute;left:46px;right:-26px;top:18px;height:2px;background:var(--bd2);
  background:linear-gradient(90deg,var(--c1),color-mix(in srgb,var(--c1) 35%,transparent))}
.pa-paso:last-child::after{content:none}
.pa-n{position:absolute;top:0;left:0;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  font:800 1rem/1 var(--f-num);color:var(--sobre-c);background:var(--c2);
  box-shadow:0 0 0 6px var(--alt),0 0 0 7px var(--bd)}
.pa-paso h3{margin:0;font:700 1.04rem/1.3 var(--f-tit);letter-spacing:-.012em}
.pa-paso p{margin:0;color:var(--mu);font-size:.93rem;line-height:1.55}

@media (max-width:860px){
  .pa-ruta{grid-template-columns:1fr;gap:26px}
  .pa-paso{padding:0 0 0 58px;min-height:38px}
  .pa-n{top:-1px}
  .pa-paso::after{left:18px;right:auto;top:38px;bottom:-26px;height:auto;width:2px;
    background:linear-gradient(180deg,var(--c1),color-mix(in srgb,var(--c1) 35%,transparent))}
}

/* ---------- lo que hacemos distinto ----------
   Cuatro afirmaciones, no seis adjetivos. Separadas por una línea en vez de metidas en
   tarjetas: lo que importa es la frase, no el recuadro. */
.df-lista{list-style:none;margin:0;padding:0;display:grid;gap:0;grid-template-columns:repeat(2,minmax(0,1fr))}
.df-lista li{padding:24px 28px 24px 0;border-top:1px solid var(--bd)}
.df-lista li:nth-child(odd){padding-right:40px;border-right:1px solid var(--bd)}
.df-lista li:nth-child(even){padding-left:28px}
.df-lista li:nth-child(-n+2){border-top:0;padding-top:4px}
.df-lista h3{margin:0 0 7px;font:700 clamp(1.05rem,1.8vw,1.2rem)/1.3 var(--f-tit);letter-spacing:-.015em;
  text-wrap:balance}
.df-lista p{margin:0;color:var(--mu);font-size:.95rem;line-height:1.6;max-width:46ch}

@media (max-width:760px){
  .df-lista{grid-template-columns:1fr}
  .df-lista li,.df-lista li:nth-child(odd),.df-lista li:nth-child(even){padding:20px 0;border-right:0}
  .df-lista li:nth-child(-n+2){border-top:1px solid var(--bd)}
  .df-lista li:first-child{border-top:0;padding-top:4px}
}

/* ---------- cotizador ---------- */
.s-qgrid{display:grid;gap:20px;grid-template-columns:.85fr 1.15fr;align-items:start}
.s-sum{position:sticky;top:88px;border:1px solid var(--bd);border-radius:12px;padding:22px 20px;background:var(--sf)}
.s-sum h3{margin:0 0 12px;font-size:1rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--c2)}
.s-sum ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.s-sum li{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.9rem;border:1px solid var(--bd);border-radius:11px;padding:10px 12px}
.s-sum .s-empty{display:block;color:var(--mu);font-size:.88rem;border-style:dashed;line-height:1.5}
.s-sum .s-empty a{color:var(--c2)}
.s-del{border:0;background:none;color:var(--mu);font:inherit;font-size:1.1rem;line-height:1;cursor:pointer;padding:4px 6px;border-radius:8px;min-width:40px;min-height:40px}
.s-del:hover{color:var(--c4);background:var(--er-bg)}

.s-fields p{margin:0 0 14px}
.s-row2{display:grid;gap:0 14px;grid-template-columns:1fr 1fr}
.s-fields label{display:block;margin:0 0 6px;font-size:.86rem;font-weight:600}
.s-fields label i{color:var(--c4);font-style:normal}
.s-fields label small{color:var(--mu);font-weight:400}
.s-fields input,.s-fields select,.s-fields textarea{
  width:100%;font:inherit;font-size:.95rem;color:var(--tx);background:var(--sf);
  border:1px solid var(--bd2);border-radius:10px;padding:12px 14px;min-height:48px;transition:border-color .2s}
.s-fields textarea{min-height:110px;resize:vertical}
.s-fields input:focus,.s-fields select:focus,.s-fields textarea:focus{outline:none;border-color:var(--c1);box-shadow:0 0 0 3px rgba(59,123,255,.18)}
.s-fields input[aria-invalid="true"],.s-fields textarea[aria-invalid="true"]{border-color:var(--c4)}
.s-check label{display:flex;align-items:flex-start;gap:10px;font-weight:400;font-size:.9rem;color:var(--mu);cursor:pointer;padding:6px 0;min-height:44px}
.s-check input{width:19px;height:19px;flex:0 0 19px;accent-color:var(--c1);margin-top:2px}
.s-check a{color:var(--c2)}
.s-err{min-height:1.3em;margin:0 0 10px!important;color:var(--c4);font-size:.9rem}
.s-ok{margin:12px 0 0!important;color:var(--ok-fg);font-size:.92rem}
.s-fine{margin:10px 0 0!important;color:var(--mu);font-size:.84rem}
.s-warn{margin:0!important;color:var(--wa-fg);font-size:.9rem;border:1px solid var(--wa-bd);border-radius:10px;padding:13px 15px;background:var(--wa-bg)}
.s-warn a{color:var(--c2)}


/* Lo que se puede contratar ahora, separado de lo que se cotiza. */
.s-cobro{margin:4px 0 16px;border:1px solid var(--bd2);border-radius:10px;padding:14px 15px;background:var(--t1)}
.s-cobro[hidden]{display:none}
.s-cobro h4{margin:0 0 10px;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--c2)}
.s-cobro ul{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:7px}
.s-cobro li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:.9rem}
.s-cobro li b{font-variant-numeric:tabular-nums;white-space:nowrap}
.s-cobro-pie{margin:0;color:var(--mu);font-size:.8rem;line-height:1.45}
.s-sum li.s-pieza span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:2px;
  background:var(--c3);margin-right:8px;vertical-align:middle}

/* ---------- preguntas ---------- */
.s-faq{display:grid;gap:10px}
.s-faq details{border:1px solid var(--bd);border-radius:10px;background:var(--sf);overflow:hidden}
.s-faq summary{cursor:pointer;list-style:none;padding:17px 46px 17px 18px;font-weight:600;position:relative;min-height:54px;display:flex;align-items:center}
.s-faq summary::-webkit-details-marker{display:none}
.s-faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:1.3rem;color:var(--c2);transition:transform .2s}
.s-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.s-faq p{margin:0;padding:0 18px 18px;color:var(--mu);font-size:.94rem}

.s-final{text-align:center;padding-bottom:78px}
.s-final .s-sub{margin-bottom:26px}

/* ---------- pie ---------- */
.s-foot{border-top:1px solid var(--bd);background:var(--alt);padding:40px 0 34px}
.s-footin{display:grid;gap:26px;grid-template-columns:1.4fr 1fr 1fr;align-items:start}
.s-fmini{margin:12px 0 0;color:var(--mu);font-size:.86rem}
.s-foot nav{display:grid;gap:8px}
.s-foot a{color:var(--mu);text-decoration:none;font-size:.9rem}
.s-foot a:hover{color:var(--c2)}
.s-foot p{margin:0 0 8px}
.s-legal{font-size:.84rem}

@media (max-width:900px){
  /* minmax(0,1fr) y no 1fr: «1fr» no deja que la columna encoja por debajo de su contenido,
     y a 320 px el cotizador medía 317 dentro de 280 y se salía por la derecha. */
  .s-heroin,.s-qgrid,.s-footin{grid-template-columns:minmax(0,1fr)}
        .s-sum{position:static}
}
@media (max-width:560px){
  .s-sec{padding:50px 0}
  .s-hero{padding:40px 0 36px}
  .s-row2{grid-template-columns:1fr}
  .s-cta .s-btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
    .s-btn,.s-card,.s-nav,.s-pick,.s-faq summary::after{transition:none}
  .s-btn:hover,.s-card:hover{transform:none}
}


/* ====================================================================
   CONFIGURADOR DEL ECOSISTEMA
   Selector por categorías + mapa que reacciona + panel resumen.
   El panel es lateral y fijo en escritorio; en móvil baja a una hoja
   inferior que se expande. Las animaciones viven todas dentro del
   bloque no-preference, para que al desactivar movimiento no quede
   nada a medio camino.
   ==================================================================== */

/* Un elemento con [hidden] tiene que desaparecer, punto. Sin esto, cualquier regla que
   declare su propio display (.s-btn lo hace) gana a la del navegador y el botón se queda
   a la vista aunque el JavaScript lo haya ocultado. Pasaba con «Contratar y pagar». */
[hidden]{display:none!important}

/* La barra superior es fija: sin esto, al pulsar «Soluciones» el título queda debajo. */
.s-sec,.s-hero{scroll-margin-top:84px}

.eco-aux{margin:-22px auto 26px;max-width:44em;text-align:center;color:var(--tx);font-size:.95rem;font-weight:600}

/* ---------- indicador de progreso ---------- */
.eco-prog{max-width:560px;margin:0 auto 34px}
.eco-bar{height:6px;border-radius:99px;background:var(--b1);border:1px solid var(--bd);overflow:hidden}
.eco-bar>span{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--c3),var(--c1))}
.eco-paso{margin:10px 0 0;text-align:center;color:var(--mu);font-size:.88rem}
.eco-paso b{color:var(--c2)}

/* ---------- rejilla principal ---------- */
.eco-grid{display:grid;gap:26px;grid-template-columns:minmax(0,1fr) 404px;align-items:start}
.eco-main{min-width:0}

/* ---------- filtros por categoría ---------- */
.eco-cats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.eco-cat{font:600 .84rem/1 inherit;color:var(--mu);background:var(--sf);border:1px solid var(--bd);
  border-radius:99px;padding:0 14px;min-height:38px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.eco-cat span{font-size:.74rem;font-weight:700;color:var(--mu);background:var(--b1);
  border-radius:99px;padding:2px 7px;min-width:20px;text-align:center}
.eco-cat:hover{border-color:var(--c1);color:var(--c2)}
.eco-cat.on{background:var(--c2);border-color:var(--c2);color:var(--sobre-c)}
.eco-cat.on span{background:rgba(127,127,127,.26);color:var(--sobre-c)}
.eco-nada{margin:0 0 16px;color:var(--mu);font-size:.9rem}

/* ---------- tarjeta de solución ---------- */
.s-cat{margin:0 0 7px;font-size:.78rem;font-weight:500;color:var(--mu)}
.s-card .s-mod{margin:auto 0 8px}
.s-card .s-p{margin:0 0 14px}
.s-tag{display:inline-flex;align-items:center;gap:6px;font-size:.73rem;font-weight:700;letter-spacing:.04em;
  border-radius:99px;padding:4px 11px;border:1px solid var(--bd);color:var(--mu);background:var(--b1)}
.s-tag::before{content:"";width:6px;height:6px;border-radius:99px;background:currentColor}
.s-tag-online{color:var(--ok-fg);background:var(--ok-bg);border-color:var(--ok-bd)}
.s-tag-desde{color:var(--c2);background:var(--t2);border-color:var(--bd2)}
.s-tag-planes{color:var(--wa-fg);background:var(--wa-bg);border-color:var(--wa-bd)}
.s-tag-quote{color:var(--mu);background:var(--b1)}

/* El botón de la tarjeta dice en qué estado está, sin necesidad de JavaScript. */
.s-pick-on{display:none}
.s-card:has(input:checked) .s-pick-off{display:none}
.s-card:has(input:checked) .s-pick-on{display:inline}
.s-card[hidden]{display:none}

/* ---------- la columna de la derecha ---------- */
.eco-aside{position:sticky;top:84px;align-self:start;display:grid;gap:16px}
.eco-vista{border:1px solid var(--bd);border-radius:14px;background:var(--sf);padding:12px 6px 10px}

/* ---------- el mapa ----------
   Nodos con volumen en vez de círculos planos, conectores curvos y un núcleo sin marco
   duro. La jerarquía la lleva el relleno: lo elegido es sólido y con sombra de color, lo
   disponible queda muy callado para que lo tuyo destaque. */
.cn{margin:0}
.cn svg{display:block;width:100%;height:auto;overflow:visible}

/* conectores */
.cn-link{fill:none;stroke:var(--c1);stroke-width:2.4;stroke-linecap:round;opacity:0}
.cn-link.on{opacity:.9}

/* núcleo */
.cn-glow{fill:var(--t3);opacity:.85}
.cn-anillo{fill:none;stroke:var(--c1);stroke-width:1.2;opacity:.28}
.cn-box{fill:var(--sf)}
.cn-core{filter:drop-shadow(0 10px 24px rgba(31,79,216,.18))}
.cn-ct{text-anchor:middle;font:800 25px/1 var(--f-tit);letter-spacing:-.02em;fill:var(--tx)}
.cn-cc{text-anchor:middle;font:500 16px/1 var(--f-tx);fill:var(--mu)}

/* nodos */
.cn-node{cursor:pointer}
.cn-halo{fill:none;stroke:none}
.cn-disc{fill:var(--t1);stroke:var(--bd2);stroke-width:1.4}
.cn-gl{fill:none;stroke:var(--ico);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cn-lab{text-anchor:middle;font:600 17px/1 var(--f-tx);fill:var(--mu);
  paint-order:stroke;stroke:var(--sf);stroke-width:5px;stroke-linejoin:round}
/* Solo lleva nombre lo que está en tu ecosistema: con las ocho etiquetas a la vez se
   pisaban unas a otras. El nombre aparece al señalar, y cada nodo tiene su aria-label. */
.cn-node .cn-lab{opacity:0}
.cn-node.on .cn-lab,.cn-node:hover .cn-lab,.cn-node:focus-visible .cn-lab{opacity:1}
.cn-node:hover .cn-disc{stroke:var(--c1);fill:var(--t2)}
.cn-node:hover .cn-gl{stroke:var(--c2)}

/* elegido: sólido, con sombra de color y el icono en negativo */
.cn-node.on{filter:drop-shadow(0 8px 18px rgba(31,79,216,.32))}
.cn-node.on .cn-disc{fill:var(--c2);stroke:none}
.cn-node.on .cn-gl{stroke:var(--sobre-c)}
.cn-node.on .cn-lab{fill:var(--c2);font-weight:700}
.cn-node:focus-visible{outline:none}
.cn-node:focus-visible .cn-halo{stroke:var(--tx);stroke-width:3}
.cn-cap{margin:6px 0 0;text-align:center;color:var(--mu);font-size:.86rem;line-height:1.45;min-height:2.6em}

/* ---------- panel resumen ---------- */
.eco-res{border:1px solid var(--bd);border-radius:14px;background:var(--sf)}
.eco-handle{display:none}
.eco-body{padding:18px 18px 16px}
.eco-body h3{margin:0 0 12px;font-size:.9rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--c2)}
.eco-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:7px;max-height:300px;overflow:auto}
.eco-list li{display:flex;align-items:center;justify-content:space-between;gap:8px;
  border:1px solid var(--bd);border-radius:11px;padding:8px 8px 8px 12px}
.eco-list .s-empty{display:block;color:var(--mu);font-size:.88rem;border-style:dashed;line-height:1.5;padding:12px}
.eco-it{display:block;min-width:0}
.eco-it b{display:block;font-size:.9rem;font-weight:700;line-height:1.35}
.eco-it small{display:block;color:var(--mu);font-size:.78rem;line-height:1.4}
.eco-list li.eco-pieza .eco-it b::before{content:"";display:inline-block;width:6px;height:6px;border-radius:2px;
  background:var(--c3);margin-right:7px;vertical-align:middle}
.eco-del{border:0;background:none;color:var(--mu);font:inherit;font-size:1.15rem;line-height:1;cursor:pointer;
  border-radius:8px;min-width:34px;min-height:34px;flex:0 0 34px}
.eco-del:hover{color:var(--c4);background:var(--er-bg)}
.eco-tot{border-top:1px solid var(--bd);padding-top:12px;margin-bottom:14px}
.eco-sub-l{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 6px;font-size:.9rem}
.eco-sub-l b{font-size:1.12rem;font-weight:800;color:var(--tx)}
.eco-fine{margin:0;color:var(--mu);font-size:.76rem;line-height:1.5}
.eco-acc{display:grid;gap:8px;margin:0 0 8px}
.eco-acc .s-btn{width:100%;justify-content:center}
.eco-acc2{margin:0}
.eco-lim{border:0;background:none;color:var(--mu);font:600 .82rem/1 inherit;cursor:pointer;
  text-decoration:underline;padding:10px 4px;min-height:44px}
.eco-lim:disabled{opacity:.45;cursor:not-allowed;text-decoration:none}
.eco-body .s-err{margin:8px 0 0!important}
.eco-body .s-ok{margin:8px 0 0!important}

/* ---------- escritorio estrecho ---------- */
@media (max-width:1100px){
  .eco-grid{grid-template-columns:minmax(0,1fr) 330px}
}

/* ---------- móvil y tableta: el mapa arriba, el resumen en hoja inferior ---------- */

@media (max-width:719px){
  /* El mapa se dibuja más pequeño: la letra sube para que siga leyéndose. */
  .cn-lab{font-size:21px}
  .cn-node:hover .cn-lab{opacity:0}   /* en táctil el «hover» se queda pegado */
  .cn-node.on .cn-lab{opacity:1}
}

/* ---------- movimiento ---------- */
@media (prefers-reduced-motion:no-preference){
  .eco-bar>span{transition:width .45s cubic-bezier(.22,.61,.36,1)}
  .eco-cat{transition:background-color .2s,border-color .2s,color .2s}
  .cn-link{transition:opacity .4s}
  .cn-link.on{stroke-dasharray:5 9;animation:cn-flow 1.3s linear infinite}
  @keyframes cn-flow{to{stroke-dashoffset:-14}}
  .cn-disc,.cn-gl,.cn-lab{transition:fill .3s,stroke .3s,stroke-width .3s,opacity .3s}
  .s-card.pulso{animation:eco-pulso .6s ease-out}
  @keyframes eco-pulso{
    0%{box-shadow:0 0 0 1px var(--c1) inset,0 0 0 0 rgba(59,123,255,.42)}
    100%{box-shadow:0 0 0 1px var(--c1) inset,0 0 0 15px rgba(59,123,255,0)}
  }
}


/* ====================================================================
   EL CONFIGURADOR
   Trae su propia composición —rejilla de líneas finas, rótulos
   monoespaciados, numeración y pestañas— y se separa del resto de la
   página con un fondo propio. Ese fondo, y todo lo demás, sale de los
   tokens: la misma maqueta funciona en claro y en oscuro.
   ==================================================================== */

.ek-zona{background:var(--zbg);color:var(--tx);position:relative}
.ek-zona::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--cuadro) 1px,transparent 1px) 0 0/46px 46px,
    linear-gradient(var(--cuadro) 1px,transparent 1px) 0 0/46px 46px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0,#000 35%,transparent 78%);
  mask-image:radial-gradient(120% 80% at 50% 0,#000 35%,transparent 78%);
}
.ek-zona>*{position:relative;z-index:1}

/* ---------- rótulos monoespaciados ---------- */
/* Rótulo de sección. Antes iba en mayúsculas, monoespaciado y muy espaciado: es el
   adorno que lleva media web del mundo y lo único que aportaba era ruido. Ahora es texto
   normal, del tamaño que le toca, con la línea que de verdad separa una sección de otra. */
.ek-brow{margin:0 0 16px;font:600 .95rem/1.4 var(--f-tx);letter-spacing:0;color:var(--mu)}
.ek-rule{display:flex;align-items:baseline;gap:16px}
.ek-rule::after{content:"";flex:1;height:1px;background:var(--zbd);transform:translateY(-.3em)}
.ek-num{font:700 .7rem/1 var(--f-num);letter-spacing:.14em;color:var(--mu)}

/* ---------- cabecera: texto a la izquierda, mapa a la derecha ---------- */
.ek-top{display:grid;gap:40px;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);align-items:center;
  padding:10px 0 46px}
.ek-zona h2{font:800 clamp(2rem,4.4vw,3.1rem)/1.02 var(--f-tit);letter-spacing:-.03em;margin:0 0 20px;text-align:left}
.ek-g{color:var(--mu);opacity:.72}
.ek-lead{margin:0 0 14px;color:var(--mu);font-size:1.02rem;line-height:1.65;max-width:34em}
.ek-aux{margin:0 0 26px;font-size:.95rem;font-weight:600;color:var(--tx)}
.ek-acts{display:flex;flex-wrap:wrap;gap:12px;margin:0}

.ek-live{border:1px solid var(--zbd);border-radius:14px;background:var(--zsf);padding:16px 14px 12px}
.ek-live-h{margin:0 0 4px;font:600 .88rem/1.4 var(--f-tx);color:var(--mu)}
.ek-live-f{display:flex;align-items:center;gap:9px;margin:10px 0 0;padding-top:10px;border-top:1px solid var(--zbd);
  font:500 .86rem/1.4 var(--f-tx);color:var(--mu)}
.ek-dot{width:7px;height:7px;border-radius:99px;background:var(--ok-fg);flex:0 0 7px}
.ek-live .cn-cap{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.ek-live .cn{position:relative}

/* ---------- pestañas ---------- */
.ek-tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--zbd);margin:0 0 30px}
.ek-tab{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;min-height:50px;
  font:700 .86rem/1 inherit;color:var(--mu);text-decoration:none;cursor:pointer;
  background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px}
.ek-tab:hover{color:var(--tx)}
.ek-tab.on{color:var(--tx);border-bottom-color:var(--c1)}
.ek-tn{font:700 .68rem/1 var(--f-num);letter-spacing:.12em;color:var(--mu)}
.ek-tab.on .ek-tn{color:var(--c2)}
.ek-badge{display:inline-grid;place-items:center;min-width:21px;height:21px;padding:0 6px;border-radius:99px;
  background:var(--c2);color:var(--sobre-c);font-size:.72rem;font-weight:800}
.ek-panel{padding:0 0 10px}
.ek-panel+.ek-panel{margin-top:46px}
.ek-panel[hidden]+.ek-panel{margin-top:0}

/* ---------- rejilla de servicios: líneas finas, sin marcos ---------- */
.ek-zona .s-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--zbd);
  border:1px solid var(--zbd);border-radius:12px;overflow:hidden}
.ek-zona .s-card{border:0;border-radius:0;background:var(--zsf);padding:26px 24px 24px;box-shadow:none}
.ek-zona .s-card:hover{transform:none;background:var(--zsf2);box-shadow:none}
.ek-zona .s-card:has(input:checked){background:var(--zsel);box-shadow:inset 2px 0 0 var(--c1)}
.ek-zona .s-card::after{display:none}
.ek-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 18px}
.ek-zona .s-card .s-ico{width:38px;height:38px;margin:0;border-radius:9px;background:var(--t1);border:1px solid var(--zbd)}
.ek-zona .s-card .s-ico svg{width:19px;height:19px;stroke:var(--c1);stroke-width:1.6}
.ek-zona .s-card:hover .s-ico{background:var(--t2);border-color:var(--bd2)}
.ek-zona .s-card:has(input:checked) .s-ico{background:var(--t3);border-color:var(--c1)}
.ek-zona .s-b{border-left-color:var(--c1);color:var(--tx)}
.ek-zona .s-pick{border-color:var(--zbd);background:transparent}
.ek-zona .s-pick:hover{border-color:var(--c1);background:var(--t2)}
.ek-zona .s-card:has(input:checked) .s-pick{border-color:var(--c1);background:var(--t3)}

/* ---------- paneles 02 y 03 ---------- */
.ek-dos{display:grid;gap:26px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}
.ek-zona .eco-res{border-color:var(--zbd);background:var(--zsf)}
.ek-zona .eco-list li{border-color:var(--zbd);background:var(--b0)}
.ek-zona .eco-list .s-empty{background:transparent}
.ek-nota{border:1px solid var(--zbd);border-radius:14px;background:var(--zsf);padding:20px 20px 6px}
.ek-nota p{margin:0 0 14px;color:var(--mu);font-size:.9rem;line-height:1.6}
.ek-nota b{color:var(--tx)}
.ek-nota a{color:var(--c2)}

.ek-pasos{display:grid;gap:1px;background:var(--zbd);border:1px solid var(--zbd);border-radius:12px;overflow:hidden}
.ek-paso{background:var(--zsf);padding:22px 22px 20px}
.ek-paso h4{margin:12px 0 7px;font-size:1.02rem;font-weight:700;line-height:1.3}
.ek-paso p{margin:0;color:var(--mu);font-size:.9rem;line-height:1.6}

.ek-caja{border:1px solid var(--zbd);border-radius:14px;background:var(--zsf);padding:22px 20px}
.ek-caja-sola{max-width:640px}
.ek-caja-sola p{color:var(--mu);line-height:1.65}
.ek-items{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:7px}
.ek-items li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  border-bottom:1px dashed var(--zbd);padding:9px 0;font-size:.92rem}
.ek-items li b{font-variant-numeric:tabular-nums;white-space:nowrap}
.ek-items .s-empty{display:block;border:0;color:var(--mu);font-size:.88rem;line-height:1.55}
.ek-sub{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:0 0 16px;padding-top:12px;border-top:1px solid var(--zbd);font-size:.92rem;color:var(--mu)}
.ek-sub b{font-size:1.4rem;font-weight:800;color:var(--tx);font-variant-numeric:tabular-nums}
.ek-caja .s-btn{width:100%}
.ek-caja .eco-fine{margin:12px 0 0}
.ek-otro{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--zbd);color:var(--mu);font-size:.85rem;line-height:1.6}
.ek-otro a{color:var(--c2)}

/* Dentro de la zona el progreso va alineado a la izquierda, como todo lo demás. */
.ek-zona .eco-prog{max-width:420px;margin:0 0 24px}
.ek-zona .eco-paso{text-align:left}

/* ---------- barra fija del móvil: lleva al resumen, no lo duplica ---------- */
.ek-barra{display:none}

@media (max-width:1060px){
  .ek-top{grid-template-columns:1fr;gap:28px;padding-bottom:36px}
  .ek-live{order:-1}
  .ek-zona .s-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ek-dos{grid-template-columns:1fr}
}
@media (max-width:620px){
  .ek-zona .s-grid{grid-template-columns:1fr}
  .ek-tab{padding:13px 13px;font-size:.8rem;flex:1 1 auto;justify-content:center}
  .ek-acts .s-btn{width:100%}
  .ek-barra{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    border:1px solid var(--zbd);border-radius:12px;background:var(--zsf);color:var(--tx);
    box-shadow:0 12px 30px var(--sombra);padding:12px 16px;min-height:52px;
    font:inherit;cursor:pointer;text-align:left}
  .ek-barra[hidden]{display:none!important}
  .eco-n{font-size:.92rem;font-weight:700}
  .eco-n b{color:var(--c2);font-size:1.1rem}
  .eco-handle-x{font-size:.82rem;font-weight:700;color:var(--c2)}
  body:has(.ek-barra:not([hidden])){padding-bottom:70px}
}

@media (prefers-reduced-motion:no-preference){
  .ek-tab{transition:color .2s,border-color .2s}
  .ek-zona .s-card{transition:background-color .25s,box-shadow .25s}
  .ek-panel.ek-entra{animation:ek-entra .34s cubic-bezier(.22,.61,.36,1) both}
  @keyframes ek-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .ek-dot{animation:ek-latido 2.2s ease-in-out infinite}
  @keyframes ek-latido{0%,100%{opacity:1}50%{opacity:.35}}
}


/* ====================================================================
   EL INTERRUPTOR DE TEMA
   Dos botones de verdad dentro de un grupo: se ve cuál está puesto, se
   alcanza con el teclado y se anuncia con aria-pressed. No es un adorno.
   ==================================================================== */
.s-tema{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--bd);border-radius:99px;
  padding:3px;background:var(--sf)}
.s-tema button{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:99px;
  background:none;color:var(--mu);cursor:pointer;padding:0}
.s-tema button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.s-tema button:hover{color:var(--tx);background:var(--t2)}
.s-tema button[aria-pressed="true"]{background:var(--c2);color:var(--sobre-c)}
@media (prefers-reduced-motion:no-preference){
  .s-tema button{transition:background-color .2s,color .2s}
}

/* Texto solo para lectores de pantalla. */
.s-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* ====================================================================
   LAS ILUSTRACIONES, DE NOCHE
   La escena del hero y el apilado de piezas llevan su color en tokens
   (con el valor claro como respaldo dentro del propio SVG). Aquí solo
   se dice qué valen de noche: cielo oscuro, estrellas que por fin se
   ven, lomas en penumbra y el halcón y el árbol iluminados.
   ==================================================================== */
:root[data-theme="dark"],
:root[data-theme="dark"] .ek-zona{
  --e-es1:#dfe8ff; --e-es2:#9fb0da; --e-es3:#6f7ea8;
  --e-cresta1:#3b5590; --e-cerca:#0e1118; --e-cresta2:#39466a;
  --e-loma-a:#10131b; --e-loma-b:#171b26;
  --e-tronco-f:#1a1f2b; --e-trazo:#5f6a82; --e-sombra:#262d3b;
  --e-tr-a:#39404f; --e-tr-b:#2e3542; --e-tr-c:#434b5c;
  --e-copa-l:#4d8cff; --e-suelo:#2b3654;
  --e-ave-linea:#121826; --e-ave-a:#2b4fbd; --e-ave-b:#4a82ff; --e-ave-c:#63b4ff;
  --e-pz-a:#171b24; --e-pz-b:#10131a; --e-pz-on-a:#1b2742; --e-pz-on-b:#12203a;
  --e-pz-der:#0e1118; --e-pz-izq:#141821;
  --e-pz-linea:#39414f; --e-pz-linea2:#39414f;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --e-es1:#dfe8ff; --e-es2:#9fb0da; --e-es3:#6f7ea8;
    --e-cresta1:#3b5590; --e-cerca:#0e1118; --e-cresta2:#39466a;
    --e-loma-a:#10131b; --e-loma-b:#171b26;
    --e-tronco-f:#1a1f2b; --e-trazo:#5f6a82; --e-sombra:#262d3b;
    --e-tr-a:#39404f; --e-tr-b:#2e3542; --e-tr-c:#434b5c;
    --e-copa-l:#4d8cff; --e-suelo:#2b3654;
    --e-ave-linea:#121826; --e-ave-a:#2b4fbd; --e-ave-b:#4a82ff; --e-ave-c:#63b4ff;
    --e-pz-a:#171b24; --e-pz-b:#10131a; --e-pz-on-a:#1b2742; --e-pz-on-b:#12203a;
    --e-pz-der:#0e1118; --e-pz-izq:#141821;
    --e-pz-linea:#39414f; --e-pz-linea2:#39414f;
  }
}

/* Entre el menú de hamburguesa (≤1180) y las pantallas anchas, la barra lleva ahora un
   elemento más —el interruptor de tema— y la fila se salía por la derecha. Se aprieta el
   espaciado en esa franja en vez de esconder nada. */
@media (min-width:1381px) and (max-width:1620px){
  .s-nav{gap:2px}
  .s-nav a:not(.s-btn){padding:10px 6px;font-size:.84rem}
  /* Misma altura que los enlaces: si no, los botones quedan un píxel desplazados y la
     fila deja de leerse como una sola línea. */
  .s-nav .s-btn{padding:10px 14px;font-size:.84rem;margin-left:2px;min-height:44px}
  .s-tema{padding:2px}
  .s-tema button{width:30px;height:30px}
}

/* Enlace a la página del bot desde la tarjeta de agenda. */
.s-vermas{margin:0 0 12px}
.s-vermas a{color:var(--c2);font-size:.85rem;font-weight:700;text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:1px}
.s-vermas a:hover{color:var(--c1)}


/* ======================================================================
   EL ASISTENTE DE LA WEB
   Un lanzador abajo a la derecha y un panel que se abre encima. En móvil
   ocupa la pantalla; en escritorio es una columna estrecha, para que se
   siga viendo la página detrás.
   Todo el color sale de los tokens, así que los dos temas salen solos.
   ====================================================================== */

/* --as-abajo lo mueve el script cuando la barra del configurador asoma por abajo en
   móvil: si no, el lanzador se le sienta encima y tapa el resumen.
   pointer-events:none en el contenedor para que el hueco vacío que queda alrededor del
   lanzador no se trague los clics de la página que hay debajo. */
.as-raiz{position:fixed;right:18px;bottom:var(--as-abajo,18px);z-index:60;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.as-raiz > *{pointer-events:auto}

/* ---- el lanzador ---- */
.as-lanza{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 17px 11px 13px;border-radius:999px;
  background:var(--c2);color:var(--sobre-c);text-decoration:none;
  font:600 .95rem/1 var(--f-tx);
  border:1px solid transparent;
  box-shadow:0 10px 30px -8px rgba(31,79,216,.5), 0 2px 6px var(--sombra);
}
.as-lanza:hover,.as-lanza:focus-visible{background:var(--c2h);color:var(--sobre-c)}
.as-lanza-i{display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px}
.as-lanza-i svg{width:22px;height:22px}
.as-raiz.as-on .as-lanza{background:var(--sf);color:var(--tx);border-color:var(--bd);box-shadow:0 2px 8px var(--sombra)}
.as-raiz.as-on .as-lanza-t{display:none}
.as-raiz.as-on .as-lanza{padding:11px 13px}

/* ---- el panel ---- */
.as-panel{
  width:min(380px,calc(100vw - 32px));
  max-height:min(620px,calc(100vh - 110px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--sf);border:1px solid var(--bd);border-radius:20px;
  box-shadow:0 28px 70px -20px rgba(22,26,35,.38), 0 4px 14px var(--sombra);
}
.as-panel[hidden]{display:none!important}

.as-top{display:flex;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid var(--bd2);background:var(--t1)}
.as-punto{width:9px;height:9px;border-radius:50%;background:var(--ok-fg);flex:0 0 9px}
.as-tit-g{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.as-tit-g strong{font:700 .98rem/1.25 var(--f-tit);color:var(--tx)}
.as-tit-g small{font-size:.76rem;color:var(--mu)}
.as-x{margin-left:auto;display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;
  border:1px solid var(--bd);border-radius:10px;background:var(--sf);color:var(--mu);cursor:pointer}
.as-x svg{width:16px;height:16px}
.as-x:hover{color:var(--tx);border-color:var(--c1)}

/* ---- la conversación ---- */
.as-msgs{flex:1 1 auto;overflow-y:auto;list-style:none;margin:0;padding:14px;display:flex;flex-direction:column;gap:9px}
.as-m{display:flex;max-width:100%}
.as-b{padding:9px 13px;border-radius:15px;font-size:.92rem;line-height:1.5;max-width:86%;word-wrap:break-word;overflow-wrap:anywhere}
.as-bot{justify-content:flex-start}
.as-bot .as-b{background:var(--t2);color:var(--tx);border:1px solid var(--bd2);border-bottom-left-radius:5px}
.as-yo{justify-content:flex-end}
.as-yo .as-b{background:var(--c2);color:var(--sobre-c);border-bottom-right-radius:5px}
.as-sis{justify-content:center}
.as-sis .as-b{background:var(--wa-bg);color:var(--wa-fg);border:1px solid var(--wa-bd);font-size:.8rem;line-height:1.45;max-width:100%;border-radius:11px}

.as-esc .as-b{display:flex;gap:4px;align-items:center;padding:13px}
.as-esc i{width:6px;height:6px;border-radius:50%;background:var(--mu);opacity:.45}

/* ---- opciones y campo ---- */
.as-ops{display:flex;flex-wrap:wrap;gap:7px;padding:0 14px 10px}
.as-op{
  display:inline-block;padding:8px 13px;border-radius:999px;cursor:pointer;
  border:1px solid var(--c1);background:var(--sf);color:var(--c2);
  font:600 .84rem/1.25 var(--f-tx);text-decoration:none;text-align:left;
}
.as-op:hover,.as-op:focus-visible{background:var(--t3);color:var(--c2h)}
.as-op-wa{background:var(--c2);color:var(--sobre-c);border-color:var(--c2)}
.as-op-wa:hover,.as-op-wa:focus-visible{background:var(--c2h);color:var(--sobre-c)}

.as-form{display:flex;gap:7px;width:100%;margin-top:3px}
.as-input{
  flex:1 1 auto;min-width:0;padding:10px 13px;border-radius:999px;
  border:1px solid var(--bd);background:var(--b0);color:var(--tx);
  font:400 .92rem/1.3 var(--f-tx);
}
.as-input:focus-visible{border-color:var(--c1);outline:2px solid var(--c1);outline-offset:1px}
.as-env{
  display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;cursor:pointer;
  border:1px solid var(--c2);border-radius:50%;background:var(--c2);color:var(--sobre-c);
}
.as-env svg{width:18px;height:18px}
.as-env:hover{background:var(--c2h)}

.as-pie{margin:0;padding:9px 14px;border-top:1px solid var(--bd2);background:var(--t1);
  font-size:.74rem;color:var(--mu);text-align:center}

/* En móvil el panel usa la pantalla entera menos un margen, y el lanzador se encoge. */
@media (max-width:560px){
  .as-raiz{right:12px;bottom:var(--as-abajo,12px);left:12px;align-items:stretch}
  .as-lanza{align-self:flex-end}
  .as-lanza-t{display:none}
  .as-lanza{padding:12px}
  .as-panel{width:100%;max-height:calc(100vh - 100px)}
}

/* El movimiento, solo si no han pedido lo contrario. */
@media (prefers-reduced-motion: no-preference){
  .as-lanza{transition:background .18s ease, transform .18s ease}
  .as-lanza:hover{transform:translateY(-1px)}
  .as-op,.as-x,.as-env{transition:background .16s ease, color .16s ease, border-color .16s ease}
  .as-panel{animation:as-entra .22s cubic-bezier(.2,.8,.3,1) both}
  @keyframes as-entra{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
  .as-m{animation:as-burbu .2s ease both}
  @keyframes as-burbu{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
  .as-esc i{animation:as-pun 1s ease-in-out infinite}
  .as-esc i:nth-child(2){animation-delay:.15s}
  .as-esc i:nth-child(3){animation-delay:.3s}
  @keyframes as-pun{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
}


/* ====================================================================
   MÓVIL · 3.34
   Todo lo de aquí vive dentro de media queries de ancho estrecho: el escritorio no
   cambia. Probado a 320, 360, 375, 390, 414 y 430 px.
   ==================================================================== */
@media (max-width:760px){
  /* Las zonas seguras del teléfono (muesca, esquinas redondeadas, barra de gestos).
     La página ya pide viewport-fit=cover, así que hay que respetarlas a mano. */
  .s-wrap{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .ek-barra{bottom:calc(12px + env(safe-area-inset-bottom))}
  body:has(.ek-barra:not([hidden])){padding-bottom:calc(70px + env(safe-area-inset-bottom))}

}
@media (max-width:560px){
  /* Al dedo: nada pulsable por debajo de 40 px. */
  .s-tema button{width:40px;height:40px}
  .s-foot nav{gap:0}
  .s-foot nav a{display:flex;align-items:center;min-height:40px}
  .s-foot a[href^="mailto"],.s-foot a[href^="https://wa.me"]{display:inline-flex;align-items:center;min-height:40px}
  .s-del{min-width:40px;min-height:40px}
  .s-check input{width:22px;height:22px;flex-basis:22px}

  /* Letra mínima de 12 px: los rótulos técnicos bajaban a 10. */
  .ek-tn{font-size:.75rem}
  .pz-cod{font-size:.76rem}
  .s-eyebrow{font-size:.76rem}
  .s-tag{font-size:.76rem}
  .s-badge{font-size:.76rem}
  .s-fields label small{font-size:.8rem}

  /* Botones de ancho completo que pueden partir su texto: «Preparar cotización por
     WhatsApp» no cabía en una línea a 320 px y se salía de la pantalla. */
  #s-send,.s-fields .s-btn{width:100%;white-space:normal;text-align:center;justify-content:center;line-height:1.3}

  /* Las pestañas del configurador en una sola fila: número encima, nombre debajo.
     A 320 px «Contratar» bajaba sola a una segunda línea. */
  .ek-tabs{flex-wrap:nowrap}
  .ek-tab{flex:1 1 0;min-width:0;flex-direction:column;gap:5px;padding:12px 4px;text-align:center;white-space:nowrap;font-size:.8rem}

  /* El panel del asistente con la altura real visible (sin la barra del navegador). */
  .as-panel{max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px - env(safe-area-inset-bottom))}
  .as-raiz{bottom:calc(var(--as-abajo,12px) + env(safe-area-inset-bottom))}
}
@media (max-width:360px){
  .s-sec h2{font-size:1.45rem}
  .s-hero h1{font-size:1.85rem}
}

/* ===========================================================================
   EL UNIVERSO DEL HERO (3.40)
   Un solo mundo largo visto por una ventana. La cámara viaja; el halcón, también.
   Lo que se lee y se pulsa está en HTML, debajo del dibujo: no hay globos flotantes.
   =========================================================================== */
.s-uni{position:relative;margin-top:40px}
.s-uni-vp{position:relative;line-height:0;overflow:hidden}
.s-uni-svg{display:block;width:100%;height:clamp(240px,27vw,520px)}
.u-capa{will-change:transform}
.u-sb{fill:var(--e-sombra,#c3cad9);opacity:.35}
.u-t{font:600 13px/1 var(--f-txt,system-ui,sans-serif);fill:var(--tx,#141824)}
.u-t-mu{font-weight:500;fill:var(--mu,#5b6479)}
.u-ave{filter:drop-shadow(0 8px 12px rgba(10,20,60,.28)) drop-shadow(0 0 18px color-mix(in srgb,var(--c1) 22%,transparent))}

/* ---- la barra de abajo: el texto del lugar y el riel de lugares ---- */
.s-uni-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding:22px clamp(16px,3vw,40px) 0}
.s-uni-txts{position:relative;min-height:124px}
.u-txt{display:grid;gap:7px;justify-items:center;text-align:center}
.u-txt[hidden]{display:none}
.u-lugar{margin:0;font:600 .78rem/1 var(--f-txt);letter-spacing:.13em;text-transform:uppercase;color:var(--c2)}
.u-nom{margin:0;font:800 clamp(1.15rem,2.4vw,1.6rem)/1.15 var(--f-tit);letter-spacing:-.015em}
.u-pie{margin:0;max-width:52ch;color:var(--mu);font-size:.97rem}
.u-acc{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:6px 0 0}
.u-add.hecho{background:var(--ok,#1a7f4b);border-color:var(--ok,#1a7f4b)}

.s-uni-riel{display:flex;align-items:center;gap:14px;justify-content:center;flex-wrap:wrap;min-width:0}
.u-chips{display:flex;gap:8px;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px;max-width:100%;scroll-snap-type:x proximity}
.u-chips::-webkit-scrollbar{display:none}
.u-chip{position:relative;display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;min-height:40px;
  padding:9px 15px;border:1px solid var(--bd);border-radius:999px;background:var(--sf);color:var(--mu);
  font:600 .86rem/1 var(--f-txt);cursor:pointer;overflow:hidden;scroll-snap-align:center;
  transition:color .25s,border-color .25s,background .25s}
.u-chip svg{width:17px;height:17px;flex:0 0 auto}
.u-chip:hover{color:var(--tx);border-color:var(--c1)}
.u-chip.on{color:var(--c2);border-color:var(--c1);background:var(--t1)}
.u-pg{position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--c1);
  transform:scaleX(0);transform-origin:left;opacity:0}
.u-ctl{display:flex;gap:6px;flex:0 0 auto}
.u-b{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:1px solid var(--bd);border-radius:50%;background:var(--sf);color:var(--mu);cursor:pointer;
  transition:color .2s,border-color .2s}
.u-b:hover{color:var(--c2);border-color:var(--c1)}
.u-b svg{width:20px;height:20px}
@media (max-width:760px){
  .s-uni{margin-top:28px}
  .s-uni-svg{height:max(186px,52vw)}
  .s-uni-riel{justify-content:flex-start;gap:10px}
  .u-chips{justify-content:flex-start;-webkit-overflow-scrolling:touch}
  .s-uni-txts{min-height:158px}
  .u-pie{font-size:.92rem}
  .u-acc .s-btn{flex:1 1 auto;justify-content:center}
}

/* ---- el movimiento: solo el lugar que está en pantalla ---- */
@media (prefers-reduced-motion: no-preference){
  .u-chip.on .u-pg{opacity:1;animation:u-pg var(--dur,7000ms) linear forwards}
  .s-uni.quieto .u-chip.on .u-pg{animation-play-state:paused}
  .s-uni.quieto .u-mu.on *{animation-play-state:paused!important}
  .u-es circle{animation:u-tw 4.6s ease-in-out infinite alternate}
  .u-es2 circle{animation-duration:6s;animation-delay:-1.4s}
  .u-es1 circle{animation-duration:7.2s;animation-delay:-2.6s}

  /* LA TIENDA */
  .u-mu-web.on .u-bq{animation:u-pop .5s cubic-bezier(.2,.8,.3,1) backwards;animation-delay:calc(var(--i,0)*0ms)}
  .u-mu-web.on .u-bq:nth-of-type(1){animation-delay:.15s}
  .u-mu-web.on .u-bq:nth-of-type(2){animation-delay:.45s}
  .u-mu-web.on .u-bq:nth-of-type(3){animation-delay:.6s}
  .u-mu-web.on .u-bq:nth-of-type(4){animation-delay:.75s}
  .u-mu-web.on .u-bq-cta{animation-delay:1s}
  .u-mu-web.on .u-pedido{animation:u-envio 5.4s 1.3s ease-in-out infinite}
  .u-mu-web.on .u-carro{animation:u-late 5.4s 1.3s ease-in-out infinite}
  .u-mu-web.on .u-vitrina{animation:u-vitri 5.4s 1.3s ease-in-out infinite}
  .u-mu-web.on .u-luz{animation:u-parpa 4.2s ease-in-out infinite}

  /* EL CONSULTORIO */
  .u-mu-agenda.on .u-cel-ocu rect{animation:u-ocupa .5s backwards;animation-delay:calc(.3s + var(--i)*.09s);fill-opacity:.22}
  .u-mu-agenda.on .u-cel-sel rect{animation:u-elige .6s 1.9s backwards;fill-opacity:.55}
  .u-chk{opacity:0}
  .u-mu-agenda.on .u-cel-sel .u-chk{animation:u-aparece .4s 2.3s forwards}
  .u-mu-agenda.on .u-aguja-m{transform-origin:0 0;animation:u-gira 9s linear infinite}
  .u-mu-agenda.on .u-aguja-h{transform-origin:0 0;animation:u-gira 54s linear infinite}
  .u-burbu{opacity:0}
  .u-mu-agenda.on .u-burbu{animation:u-sube .5s 2.6s forwards}
  .u-mu-agenda.on .u-burbu2{animation-delay:3s}
  .u-mu-agenda.on .u-pend{transform-origin:444px 178px;animation:u-colgar 5.5s ease-in-out infinite alternate}

  /* LA BODEGA */
  .u-caja-v{transform:translate(646px,344px)}
  .u-mu-software.on .u-caja-v{animation:u-cinta 4.5s linear infinite;animation-delay:calc(var(--i)*1.5s)}
  .u-mu-software.on .u-rayo{animation:u-lee 1.5s linear infinite}
  .u-barra{transform-origin:bottom;transform-box:fill-box}
  .u-mu-software.on .u-barra{animation:u-crece .9s cubic-bezier(.2,.8,.3,1) backwards;animation-delay:calc(.4s + var(--i)*.12s)}
  .u-linea{stroke-dasharray:100;stroke-dashoffset:100}
  .u-mu-software.on .u-linea{animation:u-traza 1.3s 1s forwards}

  /* EL TALLER */
  .u-mu-auto.on .u-eng1{animation:u-gira 7s linear infinite;transform-box:fill-box;transform-origin:center}
  .u-mu-auto.on .u-eng2{animation:u-gira-i 5.6s linear infinite;transform-box:fill-box;transform-origin:center}
  .u-mu-auto.on .u-tubo2{animation:u-flujo 3s linear infinite}
  .u-tarea{transform:translate(600px,300px);opacity:0}
  .u-mu-auto.on .u-tarea{animation:u-ruta 4.8s linear infinite;animation-delay:calc(var(--i)*1.2s)}
  .u-mu-auto.on .u-entra{animation:u-llega 4.8s linear infinite;animation-delay:calc(1.1s + var(--i)*1.2s);opacity:0}

  /* LA CASA */
  .u-mu-hogar.on .u-cuarto{animation:u-enciende 6s ease-in-out infinite;animation-delay:calc(var(--i)*.45s)}
  .u-mu-hogar.on .u-hoja1{animation:u-abre-i 6s 1.2s ease-in-out infinite}
  .u-mu-hogar.on .u-hoja2{animation:u-abre-d 6s 1.2s ease-in-out infinite}
  .u-mu-hogar.on .u-cono{transform-origin:30px 0;animation:u-barre 7s ease-in-out infinite alternate}
  .u-mu-hogar.on .u-sw-b{animation:u-palanca 6s ease-in-out infinite}

  /* EL INVERNADERO */
  .u-planta{transform-origin:0 0}
  .u-mu-iot.on .u-planta{animation:u-brota 1s cubic-bezier(.2,.8,.3,1) backwards;animation-delay:calc(.3s + var(--i)*.08s)}
  .u-mu-iot.on .u-gota{animation:u-cae 2.4s ease-in infinite;animation-delay:calc(var(--i)*.28s);opacity:0}
  .u-nivel{transform-box:fill-box;transform-origin:bottom}
  .u-mu-iot.on .u-nivel{animation:u-mide 6s ease-in-out infinite alternate;animation-delay:calc(var(--i)*1.2s)}
  .u-mu-iot.on .u-led{animation:u-parpa 2.2s ease-in-out infinite}
  .u-mu-iot.on .u-on1{animation:u-onda 2.2s ease-out infinite}
  .u-mu-iot.on .u-on2{animation:u-onda 2.2s .3s ease-out infinite}

  /* EL ESTUDIO */
  .u-mu-marketing.on .u-brillo{animation:u-pulso 3.4s ease-in-out infinite}
  .u-mu-marketing.on .u-obtu{animation:u-disparo 3.6s ease-in-out infinite}
  .u-mu-marketing.on .u-flash{animation:u-chispa 3.6s ease-in-out infinite}
  .u-mu-marketing.on .u-prod{transform-origin:0 6px;animation:u-respira 5.4s ease-in-out infinite}
  .u-pieza{transform:translate(620px,267px);opacity:0}
  .u-mu-marketing.on .u-pieza{animation:u-publica 3.6s ease-in-out infinite;animation-delay:calc(.6s + var(--i)*.18s)}
  .u-mu-marketing.on .u-pant{animation:u-pop .5s backwards;animation-delay:calc(1.6s + var(--i)*.18s)}

  /* EL OBSERVATORIO */
  .u-lupa{transform:translate(738px,228px)}
  .u-mu-auditoria.on .u-lupa{animation:u-revisa 9s ease-in-out infinite}
  .u-ok,.u-ren{opacity:0}
  .u-mu-auditoria.on .u-ok{animation:u-aparece .4s forwards;animation-delay:calc(1.2s + var(--i)*1.5s)}
  .u-mu-auditoria.on .u-ren{animation:u-sube .4s forwards;animation-delay:calc(2.4s + var(--i)*1.2s)}
  .u-mu-auditoria.on .u-catalejo{transform-origin:0 0;animation:u-otea 9s ease-in-out infinite}
}
@keyframes u-tw{from{opacity:.25}to{opacity:.85}}
@keyframes u-pg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes u-pop{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes u-aparece{to{opacity:1}}
@keyframes u-sube{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes u-gira{to{transform:rotate(360deg)}}
@keyframes u-gira-i{to{transform:rotate(-360deg)}}
@keyframes u-parpa{0%,100%{opacity:1}45%{opacity:.35}}
@keyframes u-envio{0%{transform:translate(1060px,330px);opacity:0}
  8%{opacity:1}50%{transform:translate(760px,262px);opacity:1}
  88%{transform:translate(500px,322px);opacity:1}100%{transform:translate(496px,330px);opacity:0}}
@keyframes u-late{0%,88%,100%{transform:translate(1080px,330px) scale(1)}6%{transform:translate(1080px,330px) scale(1.14)}}
@keyframes u-vitri{0%,80%,100%{fill-opacity:.18}92%{fill-opacity:.5}}
@keyframes u-ocupa{from{fill-opacity:0}to{fill-opacity:.22}}
@keyframes u-elige{from{fill-opacity:.1}to{fill-opacity:.55}}
@keyframes u-colgar{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes u-cinta{0%{transform:translate(646px,344px)}100%{transform:translate(892px,344px)}}
@keyframes u-lee{0%,70%,100%{opacity:.25}80%{opacity:1}}
@keyframes u-crece{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes u-traza{to{stroke-dashoffset:0}}
@keyframes u-flujo{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}
@keyframes u-ruta{0%{transform:translate(600px,300px);opacity:0}
  6%{opacity:1}42%{transform:translate(844px,300px)}
  56%{transform:translate(880px,246px)}70%{transform:translate(898px,196px)}
  92%{transform:translate(1000px,196px);opacity:1}100%{transform:translate(1010px,196px);opacity:0}}
@keyframes u-llega{0%,80%{opacity:0}86%{opacity:1}100%{opacity:0}}
@keyframes u-enciende{0%,12%{fill-opacity:0}30%,78%{fill-opacity:.42}100%{fill-opacity:0}}
@keyframes u-abre-i{0%,18%{transform:translateX(0)}42%,72%{transform:translateX(-56px)}100%{transform:translateX(0)}}
@keyframes u-abre-d{0%,18%{transform:translateX(0)}42%,72%{transform:translateX(56px)}100%{transform:translateX(0)}}
@keyframes u-barre{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
@keyframes u-palanca{0%,14%{transform:translateX(0)}32%,80%{transform:translateX(30px)}100%{transform:translateX(0)}}
@keyframes u-brota{from{transform:scaleY(.15);opacity:.3}to{transform:scaleY(1);opacity:1}}
@keyframes u-cae{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(96px);opacity:0}}
@keyframes u-mide{from{transform:scaleY(.42)}to{transform:scaleY(.86)}}
@keyframes u-onda{0%{opacity:.8;transform:translateX(0)}100%{opacity:0;transform:translateX(9px)}}
@keyframes u-pulso{0%,100%{fill-opacity:.35}50%{fill-opacity:.75}}
@keyframes u-disparo{0%,84%,100%{fill-opacity:1;r:7}90%{fill-opacity:.2;r:12}}
@keyframes u-publica{0%{transform:translate(620px,267px) scale(.4);opacity:0}
  14%{opacity:1;transform:translate(700px,250px) scale(1)}
  60%{transform:translate(830px,236px) scale(1);opacity:1}
  86%{transform:translate(884px,250px) scale(.7);opacity:.5}100%{transform:translate(894px,256px) scale(.5);opacity:0}}
@keyframes u-revisa{0%{transform:translate(738px,228px)}22%{transform:translate(868px,208px)}
  44%{transform:translate(998px,238px)}66%{transform:translate(790px,322px)}
  88%{transform:translate(948px,324px)}100%{transform:translate(738px,228px)}}
@keyframes u-chispa{0%,84%,100%{opacity:0}89%{opacity:.9}}
@keyframes u-respira{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes u-otea{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}

/* ===========================================================================
   LA PUERTA DEL COTIZADOR (3.41)
   En la portada, el configurador ya no vive aquí: vive en su propia página.
   Lo que queda es la entrada, con los tres pasos que va a encontrar.
   =========================================================================== */
.s-puerta{text-align:center}
.s-puerta .s-eyebrow{margin:0 0 10px}
.s-puerta-l{counter-reset:pt;display:grid;gap:12px;list-style:none;margin:26px auto 28px;padding:0;
  max-width:46ch;text-align:left}
.s-puerta-l li{counter-increment:pt;position:relative;padding:14px 18px 14px 56px;border:1px solid var(--bd);
  border-radius:14px;background:var(--sf);color:var(--mu);font-size:.96rem;line-height:1.5}
.s-puerta-l li::before{content:counter(pt);position:absolute;left:16px;top:13px;display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;background:var(--t1);color:var(--c2);
  font:700 .82rem/1 var(--f-num)}
.s-puerta-l b{color:var(--tx);font-weight:600}
.s-puerta .s-cta{justify-content:center}

/* El titular del cotizador es corto: lo que importa empieza justo debajo. */
.s-hero-cot{padding-bottom:0}
.s-hero-cot .s-eyebrow{margin:0 0 12px}