/* Gestión de Servicios · sitio comercial. Colores de la marca (ver docs/sitio-web/fase-0-y-1.md, manual de marca). */
:root{--fondo:#070b16;--p:#3b82f6;--p-osc:#2563eb;--p2:#22c55e;--p3:#a855f7;--t:#e8edf5;--m:#9aa8bd;--c:#0f1729;--l:#1f2b45;--suave:#c7d2e3}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--t);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Avenir Next","Segoe UI",Roboto,sans-serif;overflow-x:hidden}
a{color:#93c5fd}
img{max-width:100%;height:auto}
.ancho{max-width:1140px;width:100%;margin:0 auto;padding:0 16px}
.saltar{position:absolute;left:-9999px}.saltar:focus{left:12px;top:12px;z-index:20;background:#fff;color:#000;padding:8px 12px;border-radius:8px}
:focus-visible{outline:2px solid #93c5fd;outline-offset:2px}
mark.pc{background:#fde047;color:#422006;padding:0 4px;border-radius:4px;font-weight:700}

/* Botones */
.bp{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:11px;padding:10px 16px;font-weight:700;font-size:14px;border:1px solid var(--l);background:rgba(255,255,255,.03);color:var(--t);cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .15s,box-shadow .2s,background .2s}
.bp:hover{transform:translateY(-1px);background:rgba(255,255,255,.07)}
.bp.pri{background:linear-gradient(135deg,var(--p),var(--p-osc));border-color:transparent;color:#fff;box-shadow:0 8px 24px rgba(37,99,235,.45)}
.bp.pri:hover{box-shadow:0 10px 32px rgba(37,99,235,.65)}
.bp.gr{padding:15px 24px;font-size:16px}
.brillo{position:relative;overflow:hidden}
.brillo:after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);animation:pBrillo 3.2s ease-in-out infinite}
@keyframes pBrillo{0%,60%{left:-60%}100%{left:130%}}

/* Cabecera y pie */
.cab{position:sticky;top:0;z-index:10;background:rgba(7,11,22,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.cab .ancho{display:flex;align-items:center;gap:10px;height:62px}
.logo-p{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;letter-spacing:-.01em;color:var(--t);text-decoration:none}
.logo-p img{border-radius:9px;box-shadow:0 0 18px rgba(59,130,246,.45)}
.cab .logo-p{margin-right:auto}
.menu{display:flex;gap:4px;margin-right:8px}
.menu a{color:var(--m);text-decoration:none;font-weight:600;font-size:14px;padding:8px 10px;border-radius:8px}
.menu a:hover,.menu a[aria-current]{color:var(--t);background:rgba(255,255,255,.05)}
.menu-movil{display:none;position:relative;background:none;border:0;padding:0;margin:0}
.menu-movil summary{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--l);border-radius:10px;font-size:18px}
.menu-movil summary:after{content:none}
.menu-movil nav{position:absolute;right:0;top:48px;background:var(--c);border:1px solid var(--l);border-radius:12px;padding:8px;display:flex;flex-direction:column;min-width:200px;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.menu-movil nav a{color:var(--t);text-decoration:none;padding:10px 12px;border-radius:8px}
.menu-movil nav a:hover{background:rgba(255,255,255,.06)}
.pie{border-top:1px solid var(--l);padding:36px 0 48px;color:var(--m);font-size:14px;margin-top:40px}
.pie .ancho{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:24px}
.pie nav{display:flex;flex-direction:column;gap:6px}
.pie nav b{color:var(--t);margin-bottom:4px}
.pie a{color:var(--m);text-decoration:none}.pie a:hover{color:var(--t)}
.pie p{margin:10px 0 0}

/* Portada */
.heroe{position:relative;padding:70px 0 60px;overflow:hidden}
.aurora{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none}
.a1{width:520px;height:520px;background:#2563eb;top:-160px;left:-120px;animation:pFlota 14s ease-in-out infinite}
.a2{width:460px;height:460px;background:#16a34a;top:40px;right:-140px;animation:pFlota 17s ease-in-out infinite reverse}
.a3{width:380px;height:380px;background:#7c3aed;bottom:-200px;left:35%;animation:pFlota 20s ease-in-out infinite}
@keyframes pFlota{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,30px) scale(1.08)}66%{transform:translate(-30px,20px) scale(.95)}}
.rejilla-f{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%);pointer-events:none}
.heroe .ancho{position:relative;display:grid;grid-template-columns:.9fr 1.15fr;gap:36px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:#86efac;font-size:13px;font-weight:700;margin-bottom:18px}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--p2);animation:pLatido 1.8s infinite}
@keyframes pLatido{0%{box-shadow:0 0 0 0 rgba(34,197,94,.7)}70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.heroe h1{font-size:clamp(34px,5.2vw,56px);line-height:1.06;margin:0 0 18px;letter-spacing:-.03em}
.degrada{background:linear-gradient(90deg,#60a5fa,#34d399,#c084fc,#60a5fa);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:pDegrada 6s linear infinite}
@keyframes pDegrada{to{background-position:300% 0}}
.lead{font-size:clamp(16px,2vw,19px);color:var(--m);max-width:560px;margin:0 0 26px;line-height:1.55}
.acc{display:flex;gap:10px;flex-wrap:wrap}
.confia{display:flex;gap:16px;flex-wrap:wrap;margin:22px 0 0;padding:0;list-style:none;color:var(--m);font-size:13px}
.confia li:before{content:'✓ ';color:var(--p2);font-weight:800}

/* Portada con fotos */
.heroe-f{padding:64px 0 56px}
.heroe-f h1{font-size:clamp(36px,5.6vw,62px);font-weight:900}
.collage{position:relative;display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:1fr 1fr;gap:14px;height:520px}
.collage figure{margin:0;border-radius:20px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.08)}
.collage img{width:100%;height:100%;object-fit:cover;display:block}
.collage .f1{grid-row:1/3}
.flota{position:absolute;display:flex;gap:10px;align-items:center;background:rgba(15,23,41,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px 14px;box-shadow:0 14px 34px rgba(0,0,0,.5);font-size:13px;animation:pFlota2 6s ease-in-out infinite}
.flota i{font-style:normal;font-size:18px;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(59,130,246,.18)}
.flota b{display:block;white-space:nowrap}.flota small{color:var(--m);font-size:12px}
.fl1{left:-26px;top:34px}.fl2{right:-18px;top:46%;animation-delay:-2s}.fl3{left:22%;bottom:-20px;animation-delay:-4s}
@keyframes pFlota2{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.oficios-r{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.oficio{position:relative;margin:0;border-radius:16px;overflow:hidden;aspect-ratio:4/4.4;border:1px solid rgba(255,255,255,.08)}
.oficio img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.oficio:hover img{transform:scale(1.06)}
.oficio:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(7,11,22,.92))}
a.oficio{display:block;color:var(--t);text-decoration:none}
.oficio figcaption small{display:block;font-size:12px;font-weight:600;color:var(--suave);opacity:.85;margin-top:2px}a.oficio:hover figcaption small{color:#93c5fd;opacity:1}
.oficio figcaption{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;font-weight:800;font-size:19px;letter-spacing:-.01em}
img.enc-izq{object-position:30% 50%}img.enc-arriba{object-position:50% 30%}img.enc-der{object-position:88% 50%}
.h2-sep{margin-top:48px}.chip-centro{display:table;margin:0 auto 14px}
.mundos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mundo{position:relative;margin:0;border-radius:20px;overflow:hidden;aspect-ratio:16/10.5;border:1px solid rgba(255,255,255,.08)}
.mundo img{width:100%;height:100%;object-fit:cover;display:block}
.mundo:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(7,11,22,.95))}
.mundo figcaption{position:absolute;left:22px;right:22px;bottom:20px;z-index:1}
.mundo b{display:block;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.02em;line-height:1.15}
.mundo span{color:var(--suave);font-size:15px}
@media (max-width:900px){
  .collage{height:420px;margin-top:10px}.fl1{left:8px}.fl2{right:8px}
  .oficios-r{grid-template-columns:repeat(2,1fr)}
  .mundos{grid-template-columns:1fr}
}
@media (max-width:560px){
  .collage{height:340px;gap:10px}.flota{font-size:12px;padding:8px 10px}.flota i{width:28px;height:28px;font-size:15px}.fl3{left:8px}
  .oficios-r{grid-template-columns:repeat(2,1fr)}
}

/* Botón de WhatsApp fijo */
.wsp{position:fixed;right:20px;bottom:20px;z-index:30;display:flex;align-items:center;gap:10px;text-decoration:none;color:#0b141a}
.wsp-bt{width:60px;height:60px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 10px 28px rgba(37,211,102,.45);animation:pLatidoW 2.4s infinite;flex:none}
.wsp:hover .wsp-bt{transform:scale(1.07)}
.wsp-globo{background:#fff;border-radius:14px 14px 4px 14px;padding:9px 14px;font-size:14px;line-height:1.35;box-shadow:0 10px 30px rgba(0,0,0,.35);animation:pAparece .5s 1.5s both}
.wsp-globo b{display:block;font-size:13px;color:#128c7e}
@keyframes pLatidoW{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}70%{box-shadow:0 0 0 14px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@keyframes pAparece{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:560px){.wsp{right:14px;bottom:14px}.wsp-bt{width:54px;height:54px}.wsp-globo{font-size:13px;padding:7px 11px}}

/* Páginas de oficio: un día de trabajo con el sistema */
.of-cab .ancho{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}
.of-foto{margin:0;border-radius:22px;overflow:hidden;aspect-ratio:4/3.4;border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 60px rgba(0,0,0,.55)}
.of-foto img{width:100%;height:100%;object-fit:cover;display:block}
.dia{list-style:none;margin:0 auto;padding:0;max-width:980px;position:relative}
.dia:before{content:'';position:absolute;left:27px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--p),var(--p2),var(--p3));opacity:.45}
.dia>li{position:relative;display:grid;grid-template-columns:56px 1fr minmax(0,380px);gap:20px;align-items:start;padding:0 0 34px}
.dia .n{width:56px;height:56px;border-radius:16px;background:var(--c);border:1px solid var(--l);display:grid;place-items:center;font-size:24px;position:relative;z-index:1}
.dia h3{margin:4px 0 6px;font-size:20px;letter-spacing:-.01em}.dia .hora{color:#86efac;font-weight:700;font-size:13px}
.dia p{margin:0;color:var(--m);line-height:1.6}
.mini{background:#fff;color:#1b2333;border-radius:14px;padding:12px 14px;font-size:13px;box-shadow:0 14px 36px rgba(0,0,0,.45);line-height:1.45}
.mini .t{font-weight:800;font-size:12px;color:#64748b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.mini table{width:100%;border-collapse:collapse}.mini td{padding:3px 0;border-bottom:1px solid #eef2f7}.mini td:last-child{text-align:right;white-space:nowrap}
.mini .tot td{font-weight:800;border:0;padding-top:6px}
.mini .glob{background:#dcf8c6;border-radius:10px 10px 10px 2px;padding:7px 10px;margin:4px 0;max-width:92%}
.mini .glob.yo{background:#eef2f7;margin-left:auto;border-radius:10px 10px 2px 10px}
.mini .slot{border-left:4px solid #2563eb;background:#eff6ff;border-radius:8px;padding:7px 10px;margin:4px 0}
.mini .slot b{display:block}
.mini .ok{display:flex;gap:7px;align-items:center;padding:3px 0}.mini .ok:before{content:'✓';color:#16a34a;font-weight:900}
.mini .est{display:inline-block;padding:2px 8px;border-radius:99px;font-weight:700;font-size:12px;background:#dcfce7;color:#166534}
.mini .est.az{background:#dbeafe;color:#1e40af}.mini .est.am{background:#fef3c7;color:#92400e}
.mini .nota-m{margin-top:6px;color:#64748b;font-size:12px}
.otros{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
@media (max-width:900px){.of-cab .ancho{grid-template-columns:1fr}.dia>li{grid-template-columns:56px 1fr}.dia .mini{grid-column:2}}
@media (max-width:560px){.dia:before{left:21px}.dia>li{grid-template-columns:44px 1fr;gap:12px}.dia .n{width:44px;height:44px;font-size:20px;border-radius:12px}}

/* Secciones */
.sec{padding:56px 0;position:relative}
.sec h2,.cabeza h2{font-size:clamp(26px,3.6vw,38px);margin:0 0 10px;text-align:center;letter-spacing:-.02em;line-height:1.15}
.sub{color:var(--m);text-align:center;margin:0 auto 34px;max-width:660px;line-height:1.55}
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative;list-style:none;padding:0;margin:0}
.pasos:before{content:'';position:absolute;top:29px;left:12%;right:12%;height:2px;background:linear-gradient(90deg,var(--p),var(--p2),var(--p3));opacity:.5}
.paso{text-align:center;position:relative}
.paso .n{width:58px;height:58px;margin:0 auto 12px;border-radius:16px;display:grid;place-items:center;font-size:26px;background:var(--c);border:1px solid var(--l);position:relative;z-index:1;transition:transform .3s,box-shadow .3s}
.paso.on .n{transform:translateY(-4px) scale(1.06);box-shadow:0 0 0 2px var(--p),0 12px 30px rgba(59,130,246,.35)}
.paso h3{font-size:16px;margin:0 0 4px}.paso p{margin:0;color:var(--m);font-size:14px;line-height:1.45}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.tarj{display:block;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));border:1px solid var(--l);border-radius:16px;padding:20px;transition:transform .25s,border-color .25s,box-shadow .25s;color:var(--t);text-decoration:none}
a.tarj:hover{transform:translateY(-4px);border-color:#34507f;box-shadow:0 16px 40px rgba(0,0,0,.35)}
.tarj .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.25)}
.tarj h3{font-size:16px;margin:12px 0 6px}.tarj p{margin:0;color:var(--m);font-size:14px;line-height:1.5}
.tarj .mas{display:inline-block;margin-top:10px;color:#93c5fd;font-size:14px;font-weight:700}
.js .revela{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.js .revela.ver{opacity:1;transform:none}

/* Planes */
.planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;align-items:stretch}
.plan{background:var(--c);border:1px solid var(--l);border-radius:18px;padding:24px;display:flex;flex-direction:column;position:relative;transition:transform .25s}
.plan:hover{transform:translateY(-4px)}
.plan.dest{background:linear-gradient(180deg,rgba(59,130,246,.16),var(--c) 55%);border-color:rgba(59,130,246,.7);box-shadow:0 20px 50px rgba(37,99,235,.25)}
.plan .cinta{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,var(--p),var(--p3));color:#fff;font-size:11px;font-weight:800;padding:4px 12px;border-radius:99px;letter-spacing:.04em;text-transform:uppercase}
.plan h3{margin:0;font-size:19px}
.plan .precio{font-size:32px;font-weight:800;margin:8px 0 0;letter-spacing:-.02em}.plan .precio small{font-size:13px;color:var(--m);font-weight:400}
.plan .iva{margin:0;color:var(--m);font-size:13px}
.plan ul{list-style:none;padding:0;margin:16px 0 18px;color:var(--suave);font-size:14px;flex:1}
.plan li{padding:5px 0}.plan li:before{content:'✓ ';color:var(--p2);font-weight:800}
.nota-t{text-align:center;color:var(--m);font-size:13px;margin-top:16px}

/* Preguntas */
.preg{max-width:780px;margin:0 auto}
details{background:var(--c);border:1px solid var(--l);border-radius:14px;padding:15px 18px;margin-bottom:10px;transition:border-color .2s}
details[open]{border-color:#34507f}
summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:10px}
summary::-webkit-details-marker{display:none}
summary:after{content:'+';color:var(--p);font-size:20px;line-height:1;transition:transform .2s}
details[open] summary:after{transform:rotate(45deg)}
details p{color:var(--m);margin:10px 0 0;line-height:1.55}

/* Franja de cierre */
.franja{position:relative;border-radius:22px;padding:44px 20px;text-align:center;overflow:hidden;background:#0d1426;border:1px solid var(--l);margin:40px auto 0;max-width:1108px}
.franja:before{content:'';position:absolute;inset:-2px;background:conic-gradient(from 0deg,#3b82f6,#22c55e,#a855f7,#3b82f6);filter:blur(40px);opacity:.35;animation:pGira 10s linear infinite}
@keyframes pGira{to{transform:rotate(360deg)}}
.franja>*{position:relative}
.franja h2{margin:0;font-size:clamp(24px,3.4vw,34px);letter-spacing:-.02em}
.franja p{color:var(--suave);margin:8px auto 22px;max-width:560px}

/* Páginas interiores */
.cabeza{padding:56px 0 24px;text-align:center;position:relative;overflow:hidden}
.cabeza .aurora{opacity:.3}
.cabeza h1{font-size:clamp(30px,4.6vw,48px);line-height:1.1;margin:0 0 14px;letter-spacing:-.03em;position:relative}
.cabeza .lead{margin:0 auto 22px;position:relative}
.cabeza .acc{justify-content:center;position:relative}
.migas{font-size:13px;color:var(--m);margin-bottom:14px;position:relative}.migas a{color:var(--m)}
.texto{max-width:780px;margin:0 auto;padding:0 16px}
.texto h2{font-size:24px;margin:36px 0 8px;letter-spacing:-.01em;text-align:left}
.texto h3{font-size:18px;margin:24px 0 6px}
.texto p,.texto li{color:var(--suave)}
.texto ul{padding-left:20px}
.texto li{margin:4px 0}
.texto table{width:100%;border-collapse:collapse;font-size:14px;margin:12px 0}
.texto th,.texto td{border:1px solid var(--l);padding:8px 10px;text-align:left;vertical-align:top}
.texto th{background:var(--c)}
.texto .nota{border:1px solid var(--l);border-radius:12px;padding:12px 14px;background:var(--c);font-size:14px;color:var(--m)}
.lista-check{list-style:none;padding:0!important}
.lista-check li:before{content:'✓ ';color:var(--p2);font-weight:800}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
.dos>div{background:var(--c);border:1px solid var(--l);border-radius:14px;padding:18px}
.dos h3{margin-top:0}
.mut{color:var(--m);font-size:14px}

/* Maqueta del sistema (datos de ejemplo). Sin JavaScript se ve el estado final. */
.escena{position:relative;height:430px}
.escena-in{position:absolute;top:0;left:0;width:100%;height:430px;perspective:1400px;transform-origin:top left}
.navegador{position:absolute;inset:0 96px 30px 0;background:#f6f7f9;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);overflow:hidden;transform:rotateY(-8deg) rotateX(4deg);transform-origin:left center;animation:pEntra .9s cubic-bezier(.2,.8,.2,1) both;color:#0f172a;line-height:1.3}
@keyframes pEntra{from{opacity:0;transform:rotateY(-20deg) rotateX(8deg) translateY(30px)}}
.barra{height:28px;background:#e5e7eb;display:flex;align-items:center;gap:6px;padding:0 10px}
.barra i{width:9px;height:9px;border-radius:50%;background:#f87171}.barra i:nth-child(2){background:#fbbf24}.barra i:nth-child(3){background:#34d399}
.barra b{margin-left:10px;flex:1;height:14px;border-radius:7px;background:#fff;font-size:9px;font-weight:400;color:#64748b;padding:0 8px;line-height:14px}
.app{display:grid;grid-template-columns:86px 1fr;height:calc(100% - 28px)}
.lado{background:#fff;border-right:1px solid #e5e7eb;padding:10px 8px}
.marca-m{background:#0f2a30;color:#fff;border-radius:7px;font-size:9px;font-weight:800;text-align:center;padding:7px 2px;margin-bottom:10px}
.lado span{display:block;height:8px;border-radius:4px;background:#e5e7eb;margin:9px 4px}.lado span.on{background:#bfdbfe}
.cuerpo{padding:12px;overflow:hidden}
.saludo{font-size:13px;font-weight:800;margin-bottom:9px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:10px}
.kpi{background:#fff;border:1px solid #e5e7eb;border-radius:9px;padding:8px}
.kpi small{display:block;font-size:8px;color:#64748b;font-weight:700;letter-spacing:.04em}
.kpi b{display:block;font-size:16px;margin-top:2px}
.kpi em{font-style:normal;font-size:8px;color:#16a34a;font-weight:700}
.tablero{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;position:relative}
.col{background:#eef2f7;border-radius:9px;padding:6px;min-height:150px}
.col h6{margin:0 0 6px;font-size:8.5px;color:#475569;display:flex;align-items:center;gap:4px}
.col h6 i{width:7px;height:7px;border-radius:50%;background:#94a3b8}
.col h6 i.azul{background:#3b82f6}.col h6 i.verde{background:#22c55e}
.ot{background:#fff;border-radius:7px;padding:6px;font-size:8.5px;margin-bottom:6px;border-left:3px solid #3b82f6;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.ot.ambar{border-left-color:#f59e0b}.ot.verde{border-left-color:#22c55e}.ot.hueco{visibility:hidden}
.ot b{display:block;font-size:9px}.ot span{color:#64748b}
.ot.mueve{border-left-color:#a855f7}
.js .ot.mueve{position:absolute;width:calc((100% - 14px)/3 - 12px);z-index:2;margin:0;transition:left 1.1s cubic-bezier(.6,0,.2,1),top 1.1s cubic-bezier(.6,0,.2,1),transform .3s,box-shadow .3s}
.ot.mueve.alza{transform:rotate(-3deg) scale(1.06);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.cursor{display:none}
.js .cursor{display:block;position:absolute;width:16px;height:16px;z-index:3;transition:left 1.1s cubic-bezier(.6,0,.2,1),top 1.1s cubic-bezier(.6,0,.2,1);pointer-events:none}
.cursor:before{content:'';position:absolute;inset:0;background:#0f172a;clip-path:polygon(0 0,0 100%,30% 72%,52% 100%,64% 92%,44% 66%,80% 64%)}
.telefono{position:absolute;right:0;bottom:0;width:168px;height:330px;background:#0b1220;border-radius:28px;padding:9px;box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 2px #26324d;animation:pSube 1.1s .25s cubic-bezier(.2,.8,.2,1) both,pBalanceo 6s 1.4s ease-in-out infinite;line-height:1.3}
@keyframes pSube{from{opacity:0;transform:translateY(60px)}}
@keyframes pBalanceo{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.pantalla{background:#f6f7f9;border-radius:21px;height:100%;overflow:hidden;color:#0f172a;position:relative}
.pantalla .tope{background:#0f2a30;color:#fff;font-size:9px;font-weight:800;padding:14px 10px 8px;display:flex;justify-content:space-between}
.pantalla .tope span{font-weight:400;opacity:.8}
.tarj-ot{background:#fff;margin:8px;border-radius:10px;padding:8px;font-size:9px;border:1px solid #e5e7eb}
.tarj-ot b{font-size:10.5px;display:block;margin:3px 0 2px}
.tarj-ot .gris{color:#64748b}
.estado{display:inline-block;padding:2px 7px;border-radius:99px;font-size:8px;font-weight:800;background:#dbeafe;color:#1d4ed8;transition:background .3s,color .3s}
.estado.camino{background:#fef3c7;color:#b45309}.estado.curso{background:#ede9fe;color:#6d28d9}.estado.fin{background:#dcfce7;color:#15803d}
.botones-t{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:0 8px}
.botones-t span{background:#fff;border:1px solid #e5e7eb;border-radius:7px;text-align:center;font-size:8.5px;padding:6px 2px;font-weight:700}
.botones-t span.ancho2{grid-column:1/3}
.botones-t span.vivo{background:#16a34a;color:#fff;border-color:#16a34a;animation:pLatidoV 1.6s infinite}
@keyframes pLatidoV{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}70%{box-shadow:0 0 0 8px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.fotos{display:flex;gap:4px;margin:8px}
.fotos i{flex:1;height:34px;border-radius:6px;background:linear-gradient(135deg,#cbd5e1,#94a3b8);transition:all .35s}
.js .fotos i{opacity:0;transform:scale(.6)}
.js .fotos i.ok{opacity:1;transform:scale(1)}
.firma{margin:0 8px;height:30px;border:1px dashed #cbd5e1;border-radius:7px;position:relative;overflow:hidden}
.firma svg{position:absolute;inset:4px 10px}
.firma path{stroke:#1e293b;stroke-width:2;fill:none}
.js .firma path{stroke-dasharray:180;stroke-dashoffset:180;transition:stroke-dashoffset 1.2s ease}
.js .firma.ok path{stroke-dashoffset:0}
.aviso-p{position:absolute;left:-120px;top:-62px;width:210px;background:rgba(15,23,41,.96);border:1px solid #2b3a5c;border-radius:12px;padding:10px 12px;font-size:12px;color:#e8edf5;box-shadow:0 14px 40px rgba(0,0,0,.5);display:flex;gap:9px;align-items:flex-start;z-index:4;transition:all .45s cubic-bezier(.2,.8,.2,1)}
.js .aviso-p{opacity:0;transform:translateY(10px) scale(.96)}
.js .aviso-p.ver{opacity:1;transform:none}
.aviso-p i{font-style:normal;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgba(34,197,94,.18);flex:none}
.aviso-p small{display:block;color:var(--m);font-size:11px;margin-top:2px}

@media (max-width:900px){
  .heroe .ancho{grid-template-columns:1fr}
  .heroe{padding:44px 0 30px}
  .escena{max-width:600px;width:100%;margin:0 auto;height:auto;aspect-ratio:580/430}
  .escena-in{width:580px;transform:scale(var(--k,1))}
  .pie .ancho{grid-template-columns:1fr 1fr}
  .menu{display:none}
  .menu-movil{display:block}
}
@media (max-width:560px){
  .cab .bp{padding:9px 12px}
  .cab .entrar{display:none}
  .pasos{grid-template-columns:1fr 1fr;row-gap:26px}.pasos:before{display:none}
  .dos{grid-template-columns:1fr}
  .pie .ancho{grid-template-columns:1fr}
  .logo-p{font-size:15px}
  .cab .logo-p{white-space:nowrap}
  .texto table{display:block;overflow-x:auto;font-size:13px}
}
@media (max-width:400px){
  .cab .largo{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  .js .revela{opacity:1;transform:none}
}
.tarj .h3{font-size:16px;margin:12px 0 6px;text-align:left;letter-spacing:0;line-height:1.3}
.cabeza .mut{position:relative}

/* Sección «Lo nuevo» de la portada */
.novedades{position:relative}
.tarj.nueva{position:relative;border-color:rgba(34,197,94,.35);background:linear-gradient(180deg,rgba(34,197,94,.07),rgba(255,255,255,.01))}
.tarj.nueva .ic{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.3)}
.etq-nuevo{position:absolute;top:14px;right:14px;padding:3px 9px;border-radius:99px;background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.4);color:#86efac;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}