@font-face{font-family:"Unbounded";src:url("/fuentes/Unbounded.woff2") format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("/fuentes/PlusJakartaSans.woff2") format("woff2");font-weight:200 800;font-display:swap}
:root{
  --blanco:#fff;--niebla:#F6F2FD;--lila:#E6DCFA;--lavanda:#C9B6F2;--violeta:#9B7BEA;--morado:#6B44C9;
  --noche:#3B2180;--tinta:#2D1863;--abismo:#1E1038;--rosa:#F5C9E4;--luz:#C9A6FF;--celeste:#A8E6EE;--oro:#F6E2B0;
  --tornasol:linear-gradient(120deg,#F6E2B0,#F5C9E4 30%,#C9A6FF 62%,#A8E6EE);
  --d:"Unbounded",sans-serif;--t:"Plus Jakarta Sans",system-ui,sans-serif;
  --ancho:1180px;--g:clamp(20px,5vw,40px);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--t);color:var(--tinta);background:#fff;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.w{max-width:var(--ancho);margin:0 auto;padding:0 var(--g)}
h1,h2,h3{font-family:var(--d);font-weight:600;letter-spacing:-.025em;line-height:1.06;text-wrap:balance}
h2{font-size:clamp(28px,3.3vw,42px)}
h3{font-size:19px;letter-spacing:-.015em;line-height:1.2}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--morado);background:var(--lila);padding:6px 14px;border-radius:99px}
.chip i{width:8px;height:8px;border-radius:2px;background:var(--morado)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 16px var(--t);padding:15px 26px;border-radius:12px;border:0;cursor:pointer;
  background:var(--tinta);color:#fff;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(45,24,99,.6);background:var(--noche)}
.btn.s{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--lavanda)}
.btn.s:hover{background:var(--niebla);box-shadow:inset 0 0 0 1.5px var(--violeta)}
.btn.t{background:var(--tornasol);color:var(--tinta)}
.btn svg{transition:transform .2s}.btn:hover svg{transform:translateX(3px)}
:focus-visible{outline:3px solid var(--morado);outline-offset:3px;border-radius:6px}

/* ── Cabecera ── */
header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
header.on{border-color:var(--lila)}
header .w{display:flex;align-items:center;justify-content:space-between;height:72px}
header nav{display:flex;gap:26px;font-size:15px;font-weight:600}
header nav a{position:relative;padding:6px 0}
header nav a::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--tornasol);border-radius:2px;transition:width .25s}
header nav a:hover::after{width:100%}
header .btn{padding:10px 18px;font-size:14.5px}
@media(max-width:960px){header nav{display:none}}

/* ── Hero ── */
.hero{position:relative;padding:clamp(40px,7vw,90px) 0 clamp(60px,8vw,110px);overflow:hidden}
.hero::before{content:"";position:absolute;right:-12%;top:-10%;width:70%;aspect-ratio:1;border-radius:50%;filter:blur(60px);opacity:.75;
  background:radial-gradient(circle at 30% 35%,var(--rosa),transparent 45%),radial-gradient(circle at 70% 30%,var(--luz),transparent 50%),radial-gradient(circle at 55% 75%,var(--celeste),transparent 50%),radial-gradient(circle at 25% 75%,var(--oro),transparent 40%)}
.hero .w{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(34px,4.5vw,60px);margin:22px 0 22px;line-height:1.12}
.hero h1 em{font-style:normal;position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:.14em;background:var(--tornasol);border-radius:3px;transform-origin:left;animation:raya .9s .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes raya{from{transform:scaleX(0)}}
.hero p.lead{font-size:clamp(17px,1.6vw,20px);max-width:48ch;color:#4A3A7A}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero .nota{margin-top:20px;font-size:14px;color:#6A5B98;display:flex;align-items:center;gap:8px}
.hero .nota i{width:9px;height:9px;border-radius:2px;background:var(--tornasol);flex:none}
.sube{animation:sube .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--o,0)*90ms)}
@keyframes sube{from{opacity:0;transform:translateY(22px)}}

/* Cristal del hero: el plano se traza, las cajas se apilan capa por capa, aparece el color y el entorno se adorna */
.cristal{position:relative;width:min(100%,580px);margin-left:auto}
.cr-svg{display:block;width:100%;height:auto;overflow:visible}
.cr-plano{opacity:0;stroke-dasharray:1}
.cr-gris{opacity:0}
.cr-capa,.cr-nucleo,.cr-cubito{transform-box:fill-box;transform-origin:center}
.cr-luz{transform:translateX(-3px) rotate(-30deg)}
/* Interacciones: vista explotada, etapas de la leyenda, cubos que se llenan y profundidad con el mouse */
.cr-alza{transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .4s}
.cristal.abre .cr-alza{transform:translateY(calc(var(--n)*-.085px))}
.cr-luz{transition:opacity .3s}.cristal.abre .cr-luz,.cristal[data-paso] .cr-luz{opacity:0}
.cristal[data-paso] .cr-alza{opacity:.28}
.cristal[data-paso="0"] .p0,.cristal[data-paso="1"] .p1,.cristal[data-paso="2"] .p2,.cristal[data-paso="3"] .p3{opacity:1;transform:translateY(calc(var(--n)*-.04px - .12px))}
.cr-svg .cr-flota{cursor:pointer}
.cr-fondo{fill-opacity:0;pointer-events:all;cursor:pointer;transform-box:fill-box;transform-origin:center;transition:fill-opacity .6s,stroke .6s,transform .6s cubic-bezier(.2,.9,.3,1.4)}
.cr-fondo:hover,.cr-fondo.lleno{fill-opacity:.85;stroke:#fff;transform:scale(1.15)}
.cr-adorno{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.cr-lejos{transform:translate(calc(var(--px,0)*-.05px),calc(var(--py,0)*-.05px))}
.cr-cerca{transform:translate(calc(var(--px,0)*.12px),calc(var(--py,0)*.12px))}
.cr-pasos li{cursor:pointer;border-radius:8px;padding:4px 8px;transition:background .3s,color .3s}
.cr-pasos li:hover,.cr-pasos li.on{background:rgba(255,255,255,.75);color:var(--tinta)}
.cr-destello{transform-box:fill-box;transform-origin:center;opacity:.9}
.va .cr-plano{animation:cr-plano 2.4s .1s ease both}
.va .cr-aura,.va .cr-sombra{animation:cr-aparece 1.4s .6s ease both}
.va .cr-capa{animation:cr-apila .8s var(--d) cubic-bezier(.2,.8,.2,1) both}
.va .cr-gris{animation:cr-oxida 1.4s var(--d) ease both}
.va .cr-nucleo{animation:cr-nace .8s var(--d) cubic-bezier(.2,.9,.3,1.3) both,cr-late 4s calc(var(--d) + 1s) ease-in-out infinite}
.va .cr-fondo{animation:cr-aparece 1.6s var(--d) ease both}
.va .cr-cubito{animation:cr-aparece 1.2s var(--d) ease both,cr-flota var(--f) calc(var(--d) + 1s) ease-in-out infinite}
.va .cr-destello{animation:cr-aparece 1s var(--d) ease both,cr-titila 3.2s calc(var(--d) + 1s) ease-in-out infinite}
.va .cr-luz{animation:cr-luz 9s 5s cubic-bezier(.45,0,.25,1) infinite}
.va .cr-flota{animation:cr-flota 9s 5s ease-in-out infinite}
.va .cr-pasos li{animation:cr-paso .6s calc(.9s + var(--k)*.45s) ease both}
@keyframes cr-plano{0%{opacity:.9;stroke-dashoffset:1}40%{opacity:.9;stroke-dashoffset:0}75%{opacity:.5;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}
@keyframes cr-aparece{from{opacity:0}}
@keyframes cr-apila{from{opacity:0;transform:translateY(-.16px)}}
@keyframes cr-oxida{from{opacity:1}}
@keyframes cr-nace{from{opacity:0;transform:scale(.3)}}
@keyframes cr-late{50%{transform:translateY(-.025px)}}
@keyframes cr-luz{0%,60%{transform:translateX(-3px) rotate(-30deg)}100%{transform:translateX(4px) rotate(-30deg)}}
@keyframes cr-flota{50%{transform:translateY(-.04px)}}
@keyframes cr-titila{0%,100%{transform:scale(1) rotate(0);opacity:.9}50%{transform:scale(.45) rotate(45deg);opacity:.35}}
@keyframes cr-paso{from{opacity:.25}}
.cr-pasos{list-style:none;padding:0;margin:4px 0 0;display:flex;justify-content:center;gap:clamp(12px,2.4vw,26px);flex-wrap:wrap;font-size:13px;font-weight:600;color:#5B4C8A}
.cr-pasos li{display:inline-flex;align-items:center;gap:8px}
@media(max-width:480px){.cr-pasos{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:8px 28px}}
.cr-pasos b{font-weight:700;color:var(--violeta);font-size:11.5px}
.cr-pasos i{width:12px;height:12px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(107,68,201,.18)}
@media(max-width:860px){.hero .w{grid-template-columns:1fr}.cristal{margin:0 auto;width:min(92%,400px);order:-1}.hero::before{right:-30%;top:-6%;width:130%}}

/* ── Manifiesto ── */
/* ── Clientes ── */
.clientes{padding:28px 0 34px;border-top:1px solid var(--lila);background:#fff}
.clientes .w{display:flex;align-items:center;gap:20px 36px;flex-wrap:wrap}
.clientes p{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6A5B98;flex:none}
.clientes ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;flex:1}
.clientes li{display:flex;align-items:center;gap:18px;font:600 clamp(15px,1.5vw,18px) var(--d);letter-spacing:-.02em;color:var(--noche);white-space:nowrap}
.clientes li+li::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--tornasol);flex:none}
@media(max-width:700px){.clientes .w{flex-direction:column;align-items:flex-start;gap:14px}.clientes ul{gap:8px 14px}.clientes li{gap:14px}}

.mani{background:var(--abismo) url("/img/bismuto-textura-escalones-oscuro.svg") 0 0/240px;color:#fff;padding:clamp(70px,9vw,130px) 0;position:relative}
.mani::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--abismo) 20%,rgba(30,16,56,.4))}
.mani .w{position:relative}
.mani p{font-family:var(--d);font-weight:500;font-size:clamp(24px,3.6vw,46px);line-height:1.18;letter-spacing:-.025em;max-width:22ch}
.mani p span{background:var(--tornasol);-webkit-background-clip:text;background-clip:text;color:transparent}
.mani small{display:block;margin-top:26px;font-size:16px;color:var(--lavanda);max-width:52ch;line-height:1.6}

/* ── Secciones ── */
section.s{padding:clamp(70px,9vw,120px) 0}
.cab{display:grid;grid-template-columns:1.25fr 1fr;gap:30px;align-items:end;margin-bottom:clamp(34px,5vw,56px)}
.cab p{color:#4A3A7A;max-width:46ch}
.cab h2{margin-top:16px}
@media(max-width:860px){.cab{grid-template-columns:1fr}}

/* Qué hacemos */
.serv{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.serv a{position:relative;background:var(--niebla);border-radius:18px;padding:26px 24px 24px;display:flex;flex-direction:column;min-height:300px;overflow:hidden;transition:transform .3s,background .3s,color .3s}
.serv a::before{content:"";position:absolute;inset:0;background:url("/img/bismuto-textura-estratos-oscuro.svg") 0 0/240px;opacity:0;transition:opacity .35s}
.serv a>*{position:relative}
.serv a:hover{transform:translateY(-6px);background:var(--abismo);color:#fff}
.serv a:hover::before{opacity:.9}
.serv .n{font:600 13px var(--d);color:var(--morado);transition:color .3s}
.serv a:hover .n{color:var(--luz)}
.serv .cub{width:40px;height:40px;border-radius:8px;background:var(--tornasol);margin:22px 0 auto;transition:transform .4s cubic-bezier(.2,.8,.2,1.4)}
.serv a:hover .cub{transform:rotate(90deg) scale(1.1)}
.serv h3{margin:26px 0 8px}
.serv p{font-size:15px;line-height:1.5;color:#5B4C8A;transition:color .3s}
.serv a:hover p{color:#CFC3EE}
@media(max-width:980px){.serv{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.serv{grid-template-columns:1fr}.serv a{min-height:0}}

/* Cómo trabajamos: una escalera de verdad */
.como{background:var(--niebla)}
.esc{display:grid;grid-template-columns:repeat(4,1fr);align-items:end;margin-top:20px}
.pel{position:relative;background:#fff;border-top:6px solid var(--tinta);border-left:6px solid var(--tinta);padding:24px 22px 26px;height:calc(250px + var(--i)*60px);display:flex;flex-direction:column}
.pel:last-child{border-right:6px solid var(--tinta);border-radius:0 12px 0 0}
.pel:first-child{border-radius:12px 0 0 0}
.pel .k{font:600 15px/1 var(--d);display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:var(--tornasol);color:var(--tinta)}
.pel h3{margin:18px 0 6px}
.pel p{font-size:14.5px;line-height:1.5;color:#5B4C8A}
.pel .t{margin-top:auto;font-size:13px;font-weight:700;color:var(--morado)}
.base{height:6px;background:var(--tinta);border-radius:0 0 4px 4px}
@media(max-width:900px){.esc{grid-template-columns:1fr;gap:0}.pel{height:auto;border-right:6px solid var(--tinta);border-radius:0!important;margin-left:calc(var(--i)*14px)}.pel .t{margin-top:14px}.base{display:none}.pel:last-child{border-bottom:6px solid var(--tinta)}}

/* ── Agenda + CRM: productos ── */
.prod-intro{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,4vw,48px);align-items:center}
.pantalla{position:relative;border-radius:20px;padding:6px;background:var(--tornasol);box-shadow:0 50px 90px -50px rgba(45,24,99,.7)}
.pantalla video{display:block;width:100%;aspect-ratio:16/9;border-radius:15px;background:var(--abismo)}
.flujo{list-style:none;padding:0;display:grid;gap:12px}
.flujo li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;background:var(--niebla);border-radius:14px;padding:14px 16px;transition:background .25s,transform .25s}
.flujo li:hover{background:var(--lila);transform:translateX(4px)}
.flujo a{display:contents}
.flujo .k{font:600 15px/1 var(--d);display:grid;place-items:center;width:44px;height:44px;border-radius:9px;background:var(--tornasol)}
.flujo b{display:block;font:600 16px/1.2 var(--d);letter-spacing:-.01em}
.flujo span span{font-size:14px;color:#5B4C8A}
.flujo span .prod{display:block;font-size:12px;font-weight:700;color:var(--morado);margin-bottom:2px}
@media(max-width:900px){.prod-intro{grid-template-columns:1fr}}

.producto{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,6vw,80px);align-items:center;margin-top:clamp(70px,9vw,120px);scroll-margin-top:90px}
.producto.inv .media{order:-1}
.producto .etiqueta{display:inline-flex;align-items:center;gap:10px;font:600 13px var(--d);color:var(--morado)}
.producto .etiqueta i{font-style:normal;display:grid;place-items:center;width:30px;height:30px;border-radius:7px;background:var(--tornasol);color:var(--tinta);font-size:13px}
.producto h3{font-size:clamp(24px,2.6vw,34px);margin:14px 0 14px;line-height:1.1}
.producto>div>p{color:#4A3A7A;max-width:46ch}
.check{list-style:none;padding:0;display:grid;gap:12px;margin:24px 0 0}
.check li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15.5px;line-height:1.45}
.check li::before{content:"";width:12px;height:12px;margin:5px 0 0 4px;border-radius:3px;background:var(--morado);box-shadow:0 0 0 4px var(--lila)}
.check b{font-weight:700}
.media{position:relative}
@media(max-width:900px){.producto{grid-template-columns:1fr}.producto.inv .media{order:0}}

/* Teléfono con reel */
.fono{position:relative;width:min(300px,78%);margin:0 auto;aspect-ratio:9/16;border-radius:38px;padding:9px;background:var(--abismo);box-shadow:0 50px 80px -40px rgba(45,24,99,.75),inset 0 0 0 1.5px #4B2E92}
.fono video,.fono img{width:100%;height:100%;object-fit:cover;border-radius:30px;background:var(--noche)}
.fono::after{content:"";position:absolute;top:18px;left:50%;width:70px;height:18px;margin-left:-35px;border-radius:99px;background:var(--abismo)}
.halo{position:absolute;inset:8% 0;border-radius:50%;filter:blur(50px);opacity:.6;background:radial-gradient(circle at 30% 40%,var(--rosa),transparent 55%),radial-gradient(circle at 70% 60%,var(--celeste),transparent 55%),radial-gradient(circle at 50% 30%,var(--luz),transparent 60%);z-index:-1}
.sonido{position:absolute;right:calc(50% - min(150px,39%) - 6px);bottom:22px;z-index:2;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--tinta);box-shadow:0 8px 20px -8px rgba(45,24,99,.6)}
.sonido svg{width:20px;height:20px}
.sonido .on{display:none}.sonido[aria-pressed="true"] .on{display:block}.sonido[aria-pressed="true"] .off{display:none}

/* Navegador con capturas reales de la Agenda */
.nav-app{background:#fff;border-radius:16px;box-shadow:0 50px 90px -50px rgba(45,24,99,.7),0 0 0 1px var(--lila);overflow:hidden}
.nav-app .barra{display:flex;align-items:center;gap:6px;padding:10px 12px;background:var(--niebla);border-bottom:1px solid var(--lila)}
.nav-app .barra i{width:10px;height:10px;border-radius:50%;background:var(--lavanda)}
.pestanas{display:flex;gap:4px;margin-left:12px;flex-wrap:wrap}
.pestanas button{font:600 13px var(--t);color:#5B4C8A;background:transparent;border:0;border-radius:8px;padding:6px 12px;cursor:pointer;transition:background .2s,color .2s}
.pestanas button:hover{background:var(--lila)}
.pestanas button[aria-selected="true"]{background:#fff;color:var(--tinta);box-shadow:0 0 0 1px var(--lavanda)}
.nav-app figure{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--niebla)}
.nav-app figure img{width:100%;height:100%;object-fit:cover;object-position:top left;animation:aparece .5s ease}
@keyframes aparece{from{opacity:0;transform:scale(1.015)}}
.nav-app .pie{padding:12px calc(min(170px,30%) + 8px) 12px 16px;font-size:13.5px;color:#5B4C8A;border-top:1px solid var(--lila)}
.portal-fono{position:absolute;right:-4%;bottom:-14%;width:min(170px,30%);aspect-ratio:9/18.5;border-radius:24px;padding:6px;background:var(--abismo);box-shadow:0 30px 60px -20px rgba(45,24,99,.7)}
.portal-fono img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:19px}
@media(max-width:900px){.portal-fono{right:2%;bottom:-10%}.producto .media.agenda{margin-bottom:40px}}

/* Línea de tiempo: que vuelvan */
.tiempo{list-style:none;padding:0;margin:26px 0 0;position:relative;display:grid;gap:14px}
.tiempo::before{content:"";position:absolute;left:21px;top:20px;bottom:20px;width:3px;border-radius:2px;background:linear-gradient(var(--lavanda),var(--morado))}
.tiempo li{position:relative;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center}
.tiempo .p{position:relative;width:44px;height:44px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 3px var(--tinta);display:grid;place-items:center}
.tiempo .p::after{content:"";width:12px;height:12px;border-radius:3px;background:var(--tornasol)}
.tiempo li:last-child .p{background:var(--tinta)}
.tiempo small{display:block;font-size:12.5px;font-weight:700;color:var(--morado)}
.tiempo span{font-size:15.5px;font-weight:600}

/* Seguridad */
.seguro{margin-top:clamp(70px,9vw,120px);background:var(--abismo) url("/img/bismuto-textura-trama-oscuro.svg") 0 0/220px;color:#fff;border-radius:24px;padding:clamp(28px,4vw,52px);position:relative;overflow:hidden}
.seguro::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--abismo) 35%,rgba(30,16,56,.55))}
.seguro>*{position:relative}
.seguro h3{font-size:clamp(22px,2.4vw,30px);max-width:20ch}
.seguro h3 span{background:var(--tornasol);-webkit-background-clip:text;background-clip:text;color:transparent}
.seguro .g{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.seguro .g div{border-top:3px solid #4B2E92;padding-top:14px;font-size:15px;color:#CFC3EE;line-height:1.5}
.seguro .g b{display:block;color:#fff;font-size:15.5px;margin-bottom:4px}
.seguro .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
@media(max-width:900px){.seguro .g{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.seguro .g{grid-template-columns:1fr}}

/* ── Valores ── */
.valores{background:var(--niebla)}
.val{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.val article{position:relative;background:#fff;border-radius:18px;padding:26px 24px 22px;display:flex;flex-direction:column;box-shadow:0 0 0 1px var(--lila);transition:transform .3s,box-shadow .3s}
.val article:hover{transform:translateY(-5px);box-shadow:0 0 0 1.5px var(--lavanda),0 30px 50px -30px rgba(45,24,99,.45)}
.val .nucleo{width:46px;height:46px;border-radius:10px;border:5px solid var(--tinta);border-right-color:transparent;display:grid;place-items:center;transition:border-color .35s,transform .45s cubic-bezier(.2,.8,.2,1.4)}
.val .nucleo::after{content:"";width:12px;height:12px;border-radius:3px;background:var(--tornasol)}
.val article:hover .nucleo{border-right-color:var(--tinta);transform:rotate(90deg)}
.val h3{margin:20px 0 8px}
.val p{font-size:15px;line-height:1.5;color:#5B4C8A}
.val .practica{margin-top:auto;padding-top:18px;font-size:13.5px;font-weight:700;color:var(--morado);display:flex;gap:8px}
.val .practica::before{content:"→"}
@media(max-width:980px){.val{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.val{grid-template-columns:1fr}}

/* ── Precios: una escala de verdad, cada plan un escalón más alto ── */
.escala{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:end;padding-top:20px}
.plan{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:18px;padding:24px 22px 22px;box-shadow:0 0 0 1px var(--lila);
  min-height:calc(450px + var(--i)*64px);transition:transform .3s,box-shadow .3s}
.plan:hover{transform:translateY(-6px);box-shadow:0 0 0 1.5px var(--lavanda),0 30px 60px -34px rgba(45,24,99,.5)}
.plan .esc-n{display:flex;align-items:center;gap:10px;font:600 13px var(--d);color:var(--morado)}
.plan .esc-n i{display:flex;align-items:flex-end;gap:2px;height:22px}
.plan .esc-n i b{width:6px;border-radius:2px 2px 0 0;background:var(--lila)}
.plan .esc-n i b.on{background:var(--tornasol)}
.plan h3{font-size:22px;margin:16px 0 4px}
.plan .para{font-size:14px;color:#5B4C8A;line-height:1.45;min-height:3em}
.plan .precio{margin:18px 0 2px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.plan .precio b{font:600 clamp(26px,2.4vw,32px)/1 var(--d);letter-spacing:-.03em}
.plan .precio small{font-size:14px;color:#5B4C8A;font-weight:600}
.plan .desde{font-size:12.5px;font-weight:700;color:var(--morado);text-transform:none}
.plan .extra{font-size:13px;color:#6A5B98}
.plan ul{list-style:none;padding:0;margin:18px 0 22px;display:grid;gap:10px;font-size:14.5px;line-height:1.4;border-top:1px solid var(--lila);padding-top:18px}
.plan li{display:grid;grid-template-columns:18px 1fr;gap:10px}
.plan li::before{content:"";width:10px;height:10px;margin-top:5px;border-radius:3px;background:var(--morado)}
.plan li.todo{font-weight:700}
.plan li.todo::before{background:var(--tornasol)}
.plan .btn{margin-top:auto;width:100%;padding:13px 18px;font-size:15px}
.plan.top{background:var(--abismo) url("/img/bismuto-textura-escalones-oscuro.svg") 0 0/200px;color:#fff;box-shadow:0 40px 80px -40px rgba(30,16,56,.9)}
.plan.top::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(30,16,56,.6),var(--abismo) 70%)}
.plan.top>*{position:relative}
.plan.top .para,.plan.top .precio small,.plan.top .extra{color:#CFC3EE}
.plan.top .esc-n{color:var(--luz)}
.plan.top .esc-n i b{background:#4B2E92}.plan.top .esc-n i b.on{background:var(--tornasol)}
.plan.top ul{border-color:#35206F}
.plan.top li::before{background:var(--luz)}
.plan .sello{position:absolute;top:-13px;right:18px;z-index:1;font:700 12px var(--t);padding:5px 12px;border-radius:99px;background:var(--tornasol);color:var(--tinta)}
.escala-base{height:6px;margin-top:14px;border-radius:3px;background:linear-gradient(90deg,var(--lila),var(--tinta))}
.ia-planes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.iap{display:flex;flex-direction:column;background:#fff;border-radius:18px;padding:26px 24px 22px;box-shadow:0 0 0 1px var(--lila);transition:transform .25s,box-shadow .25s}
.iap:hover{transform:translateY(-4px);box-shadow:0 0 0 1.5px var(--lavanda),0 30px 60px -34px rgba(45,24,99,.5)}
.iap-n{font:700 13px var(--t);letter-spacing:.06em;text-transform:uppercase;color:var(--morado)}
.iap-cant{display:grid;gap:2px;margin:14px 0 18px}
.iap-cant b{font:600 clamp(30px,3vw,40px)/1 var(--d);letter-spacing:-.03em}
.iap-cant span{font-size:15px;color:#5B4C8A;font-weight:600}
.iap-precio{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;padding-top:16px;margin-bottom:20px;border-top:1px solid var(--lila)}
.iap-precio b{font:600 20px/1.2 var(--d);letter-spacing:-.02em}
.iap-precio small{font-size:14px;color:#5B4C8A;font-weight:600}
.iap .btn{margin-top:auto;width:100%;padding:13px 18px;font-size:15px}
.iap.top{background:var(--abismo);color:#fff;box-shadow:0 40px 80px -40px rgba(30,16,56,.9)}
.iap.top .iap-n{color:var(--luz)}
.iap.top .iap-cant span,.iap.top .iap-precio small{color:#CFC3EE}
.iap.top .iap-precio{border-color:#35206F}
.iap-ayuda{margin-top:20px;font-size:15px;color:#4A3A7A;text-align:center;max-width:none}
@media(max-width:900px){.ia-planes{grid-template-columns:1fr}.iap-ayuda{text-align:left}}
.precios-nota{display:flex;align-items:center;justify-content:space-between;gap:16px 30px;flex-wrap:wrap;margin-top:34px;padding:20px 24px;border-radius:16px;background:var(--niebla)}
.precios-nota p{font-size:15px;color:#4A3A7A;max-width:60ch}
.precios-nota b{color:var(--tinta)}
@media(max-width:1060px){.escala{grid-template-columns:1fr 1fr;align-items:stretch}.plan{min-height:0}.escala-base{display:none}}
@media(max-width:600px){.escala{grid-template-columns:1fr;gap:22px}}

/* Por qué */
.porque{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:center}
.marco{position:relative;aspect-ratio:1;max-width:460px;width:100%}
.marco svg{position:absolute;inset:0;width:100%;height:100%}
.marco .dentro{position:absolute;left:27.3%;top:27.3%;width:54.5%;height:54.5%;display:flex;flex-direction:column;justify-content:center;padding:8%}
.marco .dentro b{font:600 clamp(40px,6vw,74px)/1 var(--d);letter-spacing:-.04em}
.marco .dentro span{font-size:14px;color:#5B4C8A;margin-top:8px;line-height:1.4}
.lista{display:grid;gap:26px;margin-top:30px}
.lista div{display:grid;grid-template-columns:28px 1fr;gap:16px}
.lista i{width:22px;height:22px;border-radius:5px;background:var(--tornasol);margin-top:4px}
.lista p{font-size:15.5px;color:#5B4C8A;line-height:1.5;margin-top:4px}
@media(max-width:860px){.porque{grid-template-columns:1fr}.marco{margin:0 auto}}

/* Contacto */
.contacto{position:relative;background:url("/img/tornasol-claro.jpg") center/cover;padding:clamp(60px,8vw,110px) 0}
.contacto .w{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,70px);align-items:center}
.form{background:#fff;border-radius:22px;padding:clamp(22px,3.4vw,38px);box-shadow:0 40px 80px -40px rgba(45,24,99,.5);display:grid;gap:16px}
label{font-size:14px;font-weight:700;display:grid;gap:6px}
input,textarea{font:400 16px var(--t);color:var(--tinta);border:1.5px solid var(--lavanda);border-radius:11px;padding:13px 15px;width:100%;background:#fff;transition:border-color .2s,box-shadow .2s}
input::placeholder,textarea::placeholder{color:#9A8DC0}
input:focus,textarea:focus{outline:0;border-color:var(--morado);box-shadow:0 0 0 4px var(--lila)}
.form small{font-size:13px;color:#6A5B98}
.ok{display:none;background:var(--niebla);border-radius:12px;padding:14px 16px;font-size:15px;font-weight:600}
@media(max-width:860px){.contacto .w{grid-template-columns:1fr}}

/* Pie */
footer{background:var(--abismo);color:#CFC3EE;padding:56px 0 30px;font-size:15px}
footer .w{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
footer h4{font:600 13px var(--d);color:#fff;margin-bottom:12px}
footer a{display:block;padding:3px 0}footer a:hover{color:#fff}
footer .fin{grid-column:1/-1;border-top:1px solid #35206F;padding-top:20px;font-size:13px;color:#8F7FC0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
footer .firma{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
footer .firma a{display:inline-flex;padding:0;transition:transform .2s}
footer .firma a:hover{transform:scale(1.25)}
footer .firma img{height:18px;width:auto}
@media(max-width:700px){footer .w{grid-template-columns:1fr}}

.ver{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--o,0)*80ms)}
.ver.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.ver{opacity:1;transform:none}html{scroll-behavior:auto}}

/* ════════════════════════════════════════════════════════════════════════
   Sitio con sub-páginas: navegación, cabeceras de página, beneficios,
   banda "todo ilimitado", maquetas de producto y enlaces cruzados.
   ════════════════════════════════════════════════════════════════════════ */

/* Navegación: página actual y menú en celulares */
header nav a[aria-current="page"]::after{width:100%}
header .der{display:flex;align-items:center;gap:10px}
.menu-btn{display:none;width:44px;height:44px;border-radius:11px;border:0;background:var(--niebla);color:var(--tinta);cursor:pointer;place-items:center}
.menu-btn svg{width:22px;height:22px}
.menu-btn .x{display:none}.menu-btn[aria-expanded="true"] .x{display:block}.menu-btn[aria-expanded="true"] .h{display:none}
@media(max-width:960px){
  .menu-btn{display:grid}
  header nav{position:absolute;left:0;right:0;top:72px;display:none;flex-direction:column;gap:0;padding:8px var(--g) 18px;background:#fff;border-bottom:1px solid var(--lila);box-shadow:0 30px 40px -30px rgba(45,24,99,.35)}
  header nav.abierto{display:flex}
  header nav a{padding:13px 0;font-size:17px;border-bottom:1px solid var(--niebla)}
  header nav a::after{display:none}
  header nav a[aria-current="page"]{color:var(--morado)}
}
@media(max-width:420px){header .der .btn{display:none}}

/* Cabecera de sub-página */
.pag{position:relative;padding:clamp(36px,6vw,80px) 0 clamp(50px,7vw,96px);overflow:hidden}
.pag::before{content:"";position:absolute;right:-18%;top:-30%;width:70%;aspect-ratio:1;border-radius:50%;filter:blur(70px);opacity:.6;
  background:radial-gradient(circle at 30% 35%,var(--rosa),transparent 45%),radial-gradient(circle at 70% 30%,var(--luz),transparent 50%),radial-gradient(circle at 55% 75%,var(--celeste),transparent 50%)}
.pag .w{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,5vw,60px);align-items:center}
.pag.solo .w{grid-template-columns:1fr;max-width:860px;text-align:center;justify-items:center}
.pag h1{font-size:clamp(32px,4.2vw,56px);margin:20px 0 18px;line-height:1.1}
.pag h1 span{background:var(--tornasol);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:saturate(1.6) brightness(.85)}
.pag .lead{font-size:clamp(17px,1.5vw,19.5px);color:#4A3A7A;max-width:50ch}
.pag .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.pag.solo .cta{justify-content:center}
.migas{font-size:13.5px;font-weight:600;color:#6A5B98;display:flex;gap:8px;align-items:center;margin-bottom:14px}
.migas a:hover{color:var(--morado)}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.pills a{font-size:13.5px;font-weight:700;padding:8px 14px;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--lila);transition:box-shadow .2s,background .2s}
.pills a:hover{box-shadow:inset 0 0 0 1.5px var(--violeta);background:var(--niebla)}
.pills a.inf{background:var(--tinta);color:#fff;box-shadow:none}
@media(max-width:900px){.pag .w{grid-template-columns:1fr}}

/* Banda "todo ilimitado" */
.ilim{background:var(--abismo) url("/img/bismuto-textura-escalones-oscuro.svg") 0 0/240px;color:#fff;padding:clamp(56px,7vw,96px) 0;position:relative;overflow:hidden}
.ilim::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--abismo) 25%,rgba(30,16,56,.55))}
.ilim .w{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,70px);align-items:center}
.ilim .grande{font:700 clamp(40px,6.4vw,84px)/.95 var(--d);letter-spacing:-.045em}
.ilim .grande span{display:block;background:var(--tornasol);-webkit-background-clip:text;background-clip:text;color:transparent}
.ilim .w>div>p{margin-top:20px;color:#CFC3EE;max-width:40ch}
.ilim ul{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ilim li{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(201,182,242,.18);transition:background .25s,transform .25s}
.ilim li:hover{background:rgba(255,255,255,.11);transform:translateY(-3px)}
.ilim li i{font:600 22px/1 var(--d);font-style:normal;display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:var(--tornasol);color:var(--tinta)}
.ilim li b{display:block;font-size:15.5px;line-height:1.25}
.ilim li small{font-size:13px;color:#B9ABE3}
.ilim .nota-ilim{grid-column:1/-1;font-size:13px;color:#9C8DCB}
@media(max-width:900px){.ilim .w{grid-template-columns:1fr}}
@media(max-width:520px){.ilim ul{grid-template-columns:1fr}}

/* Grilla de beneficios */
.benef{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.benef>*{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:18px;padding:24px 22px;box-shadow:0 0 0 1px var(--lila);transition:transform .3s,box-shadow .3s}
.benef>a:hover,.benef>article:hover{transform:translateY(-5px);box-shadow:0 0 0 1.5px var(--lavanda),0 30px 50px -30px rgba(45,24,99,.45)}
.benef .ico{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;background:var(--niebla);color:var(--morado);transition:background .3s,color .3s}
.benef>*:hover .ico{background:var(--tinta);color:#fff}
.benef .ico svg{width:24px;height:24px}
.benef h3{margin:18px 0 6px}
.benef p{font-size:15px;line-height:1.5;color:#5B4C8A}
.benef .mas{margin-top:auto;padding-top:16px;font-size:13.5px;font-weight:700;color:var(--morado)}
.benef .tag{position:absolute;top:20px;right:20px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:99px;background:var(--tornasol)}
.fondo-niebla{background:var(--niebla)}
@media(max-width:980px){.benef{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.benef{grid-template-columns:1fr}}

/* Inicio: dos productos lado a lado */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.prodcard{position:relative;display:flex;flex-direction:column;border-radius:24px;padding:clamp(24px,3vw,36px);overflow:hidden;background:var(--niebla);transition:transform .3s,box-shadow .3s}
.prodcard:hover{transform:translateY(-6px);box-shadow:0 40px 70px -40px rgba(45,24,99,.55)}
.prodcard.osc{background:var(--abismo) url("/img/bismuto-textura-estratos-oscuro.svg") 0 0/260px;color:#fff}
.prodcard.osc::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(30,16,56,.55),var(--abismo) 65%)}
.prodcard>*{position:relative}
.prodcard .top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.prodcard .marca-p{font:600 14px var(--d);color:var(--morado)}
.prodcard.osc .marca-p{color:var(--luz)}
.prodcard .inf{font-size:12px;font-weight:800;letter-spacing:.04em;padding:5px 11px;border-radius:99px;background:var(--tornasol);color:var(--tinta)}
.prodcard h3{font-size:clamp(24px,2.5vw,32px);margin:18px 0 10px;line-height:1.1}
.prodcard>p{color:#4A3A7A;max-width:42ch}
.prodcard.osc>p{color:#CFC3EE}
.prodcard ul{list-style:none;padding:0;margin:22px 0 26px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.prodcard li{font-size:14.5px;font-weight:600;display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:11px;background:#fff}
.prodcard.osc li{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(201,182,242,.16)}
.prodcard li svg{width:18px;height:18px;flex:none;color:var(--morado)}
.prodcard.osc li svg{color:var(--luz)}
.prodcard .pie-p{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.prodcard .desde{font-size:14px;color:#5B4C8A}.prodcard.osc .desde{color:#CFC3EE}
.prodcard .desde b{font:600 20px var(--d);color:inherit}
.prodcard.osc .desde b{color:#fff}
@media(max-width:900px){.duo{grid-template-columns:1fr}}
@media(max-width:440px){.prodcard ul{grid-template-columns:1fr}}

/* Inicio: franja de precios */
.franja{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;padding:clamp(24px,3.5vw,40px);border-radius:24px;background:url("/img/tornasol-claro.jpg") center/cover}
.franja h2{font-size:clamp(24px,2.6vw,34px)}
.franja p{color:#3B2C6E;margin-top:8px;max-width:52ch}
.mini-esc{display:flex;align-items:flex-end;gap:6px;margin-top:16px}
.mini-esc span{display:block;width:clamp(44px,7vw,80px);border-radius:8px 8px 0 0;background:rgba(255,255,255,.7);font:600 11px var(--d);color:var(--tinta);padding:8px 0 0 9px}
.mini-esc span:last-child{background:var(--tinta);color:#fff}

/* Maquetas de producto (hechas con HTML, no imágenes) */
.maq{position:relative;background:#fff;border-radius:18px;box-shadow:0 50px 90px -50px rgba(45,24,99,.65),0 0 0 1px var(--lila);overflow:hidden;font-size:13px}
.maq .barra{display:flex;align-items:center;gap:6px;padding:10px 12px;background:var(--niebla);border-bottom:1px solid var(--lila);font-weight:700;color:#5B4C8A}
.maq .barra i{width:10px;height:10px;border-radius:50%;background:var(--lavanda)}
.maq .barra span{margin-left:10px}
/* Pipeline */
.kanban{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px}
.kanban .col{background:var(--niebla);border-radius:12px;padding:10px;display:grid;gap:8px;align-content:start;min-height:230px}
.kanban .col>b{font-size:12px;display:flex;justify-content:space-between;color:#5B4C8A}
.kanban .tar{background:#fff;border-radius:9px;padding:9px 10px;box-shadow:0 1px 0 var(--lila),0 6px 14px -10px rgba(45,24,99,.4);line-height:1.3}
.kanban .tar strong{display:block;font-size:12.5px}
.kanban .tar small{color:#6A5B98;font-size:11.5px}
.kanban .tar.mueve{animation:mueve 4.5s 1s ease-in-out infinite}
.kanban .col.gana .tar{box-shadow:inset 3px 0 0 #3fbf8a,0 6px 14px -10px rgba(45,24,99,.4)}
@keyframes mueve{0%,25%{transform:none}45%,80%{transform:translateX(calc(100% + 30px)) rotate(2deg);box-shadow:0 18px 30px -12px rgba(45,24,99,.5)}100%{transform:none}}
@media(max-width:560px){.kanban{grid-template-columns:repeat(2,minmax(0,1fr))}.kanban .col{min-height:0}.kanban .tar.mueve{animation:none}}
/* Chat del agente IA */
.chat{padding:16px;display:grid;gap:10px;background:linear-gradient(180deg,#fff,var(--niebla))}
.chat .m{max-width:82%;padding:10px 13px;border-radius:14px;line-height:1.4;font-size:14px}
.chat .c{background:#fff;box-shadow:0 0 0 1px var(--lila);border-bottom-left-radius:4px}
.chat .ia{justify-self:end;background:var(--tinta);color:#fff;border-bottom-right-radius:4px}
.chat .ia small{display:block;font-size:11px;color:var(--luz);font-weight:700;margin-bottom:2px}
.chat .hora{justify-self:end;display:flex;gap:8px;flex-wrap:wrap}
.chat .hora span{font-size:12.5px;font-weight:700;padding:7px 11px;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--violeta);color:var(--morado)}
.chat .listo{justify-self:center;font-size:12px;font-weight:700;color:#2f9d70;background:#e6f7ef;padding:5px 12px;border-radius:99px}
.chat>*{animation:sube .5s cubic-bezier(.2,.8,.2,1) both}
.chat>*:nth-child(2){animation-delay:.3s}.chat>*:nth-child(3){animation-delay:.6s}.chat>*:nth-child(4){animation-delay:.9s}.chat>*:nth-child(5){animation-delay:1.2s}.chat>*:nth-child(6){animation-delay:1.5s}
/* Bandeja omnicanal */
.bandeja{display:grid;grid-template-columns:1fr}
.bandeja .fila{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--niebla)}
.bandeja .fila:last-child{border-bottom:0}
.bandeja .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff}
.bandeja .fila strong{display:block;font-size:13.5px}
.bandeja .fila span{color:#6A5B98;font-size:12.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bandeja .canal{font-size:11px;font-weight:800;padding:4px 9px;border-radius:99px}
.c-wa{background:#e3f6ea;color:#1f8a4c}.c-ig{background:#fde6f1;color:#b8327a}.c-fb{background:#e5eefc;color:#2c5fc4}.c-web{background:var(--lila);color:var(--morado)}.c-mail{background:#fff2d9;color:#9a6a00}
/* Flujo de automatización */
.flow{padding:18px;display:grid;gap:0;justify-items:center;background:var(--niebla)}
.flow .nodo{width:min(100%,320px);background:#fff;border-radius:12px;padding:11px 14px;box-shadow:0 0 0 1px var(--lila),0 8px 18px -12px rgba(45,24,99,.35);display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center}
.flow .nodo i{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--tornasol);font-style:normal;font-size:14px}
.flow .nodo.disp i{background:var(--tinta);color:#fff}
.flow .nodo small{display:block;font-size:11px;font-weight:700;color:var(--morado)}
.flow .nodo b{font-size:13.5px;line-height:1.25}
.flow .linea{width:2px;height:18px;background:var(--lavanda)}
/* Landing */
.landing{padding:16px;display:grid;grid-template-columns:1.1fr .9fr;gap:14px;align-items:center;background:linear-gradient(135deg,#fff,var(--niebla))}
.landing .txt b{display:block;font:600 18px/1.15 var(--d);margin-bottom:8px}
.landing .txt .ln{height:8px;border-radius:4px;background:var(--lila);margin:6px 0}
.landing .txt .bt{display:inline-block;margin-top:10px;padding:8px 14px;border-radius:9px;background:var(--tinta);color:#fff;font-weight:700;font-size:12px}
.landing form{background:#fff;border-radius:12px;padding:12px;box-shadow:0 0 0 1px var(--lila);display:grid;gap:7px}
.landing form span{display:block;height:28px;border-radius:7px;box-shadow:inset 0 0 0 1.5px var(--lavanda);font-size:11.5px;color:#9A8DC0;padding:6px 9px}
.landing form em{font-style:normal;display:block;text-align:center;padding:7px;border-radius:7px;background:var(--tornasol);font-weight:800;font-size:12px}
.landing .aviso{grid-column:1/-1;font-size:12px;font-weight:700;color:#2f9d70;background:#e6f7ef;border-radius:9px;padding:8px 11px}
@media(max-width:480px){.landing{grid-template-columns:1fr}}

/* Bloques de detalle en sub-páginas (más compactos que .producto) */
.det{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,6vw,80px);align-items:center;scroll-margin-top:90px}
.det+.det{margin-top:clamp(64px,8vw,110px)}
.det.inv .media{order:-1}
.det h2{font-size:clamp(26px,2.9vw,38px);margin:14px 0 14px}
.det>div>p{color:#4A3A7A;max-width:46ch}
@media(max-width:900px){.det{grid-template-columns:1fr}.det.inv .media{order:0}}

/* Enlace cruzado entre productos */
.cruce{display:grid;grid-template-columns:auto 1fr auto;gap:20px 28px;align-items:center;padding:clamp(22px,3vw,34px);border-radius:22px;background:var(--niebla);box-shadow:inset 0 0 0 1px var(--lila)}
.cruce .cub{width:56px;height:56px;border-radius:12px;background:var(--tornasol)}
.cruce h3{font-size:clamp(20px,2vw,24px)}
.cruce p{color:#5B4C8A;margin-top:4px;font-size:15.5px}
@media(max-width:760px){.cruce{grid-template-columns:1fr}}

/* Preguntas frecuentes */
.faq{display:grid;gap:10px;max-width:860px;margin:0 auto}
.faq details{background:#fff;border-radius:14px;box-shadow:0 0 0 1px var(--lila);padding:0 20px;transition:box-shadow .2s}
.faq details[open]{box-shadow:0 0 0 1.5px var(--lavanda)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 0;font-weight:700;font-size:16.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:600 22px/1 var(--d);color:var(--morado);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;color:#5B4C8A;font-size:15.5px}

.centro{text-align:center}.centro .cab{grid-template-columns:1fr;justify-items:center}.centro .cab p{margin:0 auto}
.franja>div{flex:1 1 420px;max-width:660px}

/* ── Black Friday 2026 (24 nov – 1 dic). Banner en todas las páginas y página /black-friday.
      sitio.js lo oculta solo después del 1 de diciembre. ── */
.bf-banda{position:relative;z-index:21;display:flex;align-items:center;gap:12px;height:46px;padding:0 10px 0 0;color:#fff;overflow:hidden;
  background:linear-gradient(100deg,#0E0718,#2A1450 45%,#0E0718)}
.bf-banda::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(201,166,255,.28) 45%,rgba(245,201,228,.22) 50%,transparent 65%);background-size:250% 100%;animation:bf-brillo 4.5s linear infinite}
.bf-cinta{flex:1;min-width:0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 92%,transparent)}
.bf-pista{display:flex;width:max-content;animation:bf-corre 28s linear infinite}
.bf-banda:hover .bf-pista{animation-play-state:paused}
.bf-pista span{display:inline-flex;align-items:center;gap:14px;padding-right:14px;white-space:nowrap;font:600 14px var(--t)}
.bf-pista span::after{content:"";width:8px;height:8px;border-radius:2px;background:var(--tornasol);transform:rotate(45deg)}
.bf-pista b{font:700 13px var(--d);letter-spacing:.06em;background:var(--tornasol);-webkit-background-clip:text;background-clip:text;color:transparent}
.bf-btn{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:8px;font:800 13.5px var(--t);padding:8px 16px;border-radius:9px;
  background:var(--tornasol);color:var(--tinta);animation:bf-late 2.4s ease-in-out infinite;transition:transform .2s}
.bf-btn:hover{transform:scale(1.05)}
.bf-x{position:relative;z-index:1;flex:none;width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:#CFC3EE;font-size:22px;line-height:1;cursor:pointer}
.bf-x:hover{background:rgba(255,255,255,.1);color:#fff}
@keyframes bf-corre{to{transform:translateX(-50%)}}
@keyframes bf-brillo{from{background-position:150% 0}to{background-position:-100% 0}}
@keyframes bf-late{0%,100%{box-shadow:0 0 0 0 rgba(201,166,255,.55)}50%{box-shadow:0 0 0 7px rgba(201,166,255,0)}}
@media(max-width:560px){.bf-btn{padding:7px 12px;font-size:13px}.bf-btn .largo{display:none}}

/* Página /black-friday */
.bf-hero{background:radial-gradient(110% 90% at 50% 0%,#2A1450,#0E0718 72%);color:#fff}
.bf-hero::before{opacity:.35}
.bf-hero .chip{background:rgba(201,182,242,.16);color:#E9DEFF}.bf-hero .chip i{background:var(--tornasol)}
.bf-hero h1 span{background:var(--tornasol);-webkit-background-clip:text;background-clip:text;color:transparent}
.bf-hero .lead{color:#D9CEF5!important;max-width:52ch}
.bf-hero .migas{color:#B9AADF}
.bf-reloj{display:flex;gap:10px;justify-content:center;margin:26px 0 8px}
.bf-reloj div{min-width:76px;padding:12px 8px 10px;border-radius:14px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(201,182,242,.25);text-align:center}
.bf-reloj b{display:block;font:600 34px/1 var(--d);font-variant-numeric:tabular-nums}
.bf-reloj small{font-size:12px;font-weight:700;color:#B9AADF;text-transform:uppercase;letter-spacing:.06em}
.bf-reloj-txt{font-size:14px;font-weight:700;color:#CFC3EE}
.bf-cupos{display:flex;gap:6px;justify-content:center;margin-top:22px}
.bf-cupos i{width:20px;height:20px;border-radius:5px;background:var(--tornasol);animation:bf-cubo 2.8s ease-in-out infinite;animation-delay:calc(var(--k)*120ms)}
@keyframes bf-cubo{0%,100%{transform:translateY(0)}20%{transform:translateY(-6px) rotate(10deg)}}
.bf-hero .btn.t{margin-top:26px}
.plan .bf-sello{position:absolute;top:-13px;left:18px;z-index:1;font:800 12px var(--t);padding:5px 12px;border-radius:99px;background:#0E0718;color:#fff;box-shadow:0 0 0 2px var(--luz)}
.plan .antes{font-size:14px;color:#8A7BB8;text-decoration:line-through;text-decoration-color:#F07AA8;text-decoration-thickness:2px}
.plan.top .antes{color:#A796D6}
.plan.bf-on{box-shadow:0 0 0 2px var(--luz),0 30px 60px -34px rgba(45,24,99,.5)}
.bf-cond{margin-top:34px;padding:22px 24px;border-radius:16px;background:#0E0718;color:#E4DAFA;font-size:15px}
.bf-cond h3{color:#fff;margin-bottom:10px}
.bf-cond ul{margin:0;padding-left:18px;display:grid;gap:6px}
.bf-fin-aviso{display:none;margin:0 auto 10px;max-width:640px;padding:14px 18px;border-radius:12px;background:#FFF4DC;color:#6B4300;font-weight:600}
.bf-fin-aviso a{text-decoration:underline}
body.bf-fin .bf-fin-aviso{display:block}
body.bf-fin .bf-reloj,body.bf-fin .bf-reloj-txt{display:none}
@media(max-width:560px){.bf-reloj div{min-width:62px}.bf-reloj b{font-size:26px}}