/* ============================================================================================== CitaNube — a page built in 3D, not a flat page with one animated widget. Every major section lives inside its own `perspective` and rotates up out of the screen as it enters the viewport. Where the browser supports scroll-driven animations (`animation-timeline`, Chrome 115+ — most of the Colombian Android market) that runs entirely off the main thread and tracks the scrollbar exactly. Everywhere else an IntersectionObserver plays the same keyframes once. Either way it is transform + opacity only: no layout, no paint, no jank. ============================================================================================== */ :root{ --ink:#0A1430; --ink-2:#27365F; --muted:#6B7CA6; --faint:#9AA8C8; --blue:#2563EB; --blue-lt:#60A5FA; --blue-dk:#1D4ED8; --violet:#7C7CF0; --cyan:#4FD1E8; --mint:#34D399; --amber:#FBBF24; --pink:#F472B6; --bg:#F5F8FF; --card:rgba(255,255,255,.78); --line:rgba(37,99,235,.14); --sh-sm:0 2px 10px -4px rgba(10,20,48,.14); --sh:0 24px 54px -26px rgba(10,20,48,.34); --sh-lg:0 54px 100px -44px rgba(10,20,48,.5); /* surfaces as RGB triplets, so every rule keeps its own alpha: rgba(var(--sf),.86) */ --sf:255,255,255; --tn:245,248,255; --sf-solid:#fff; --sf-3:#F7F9FD; --ok-ink:#047857; --warn-ink:#92400E; --pink-ink:#9D174D; --accent-ink:#1D4ED8; --wa-ink:#15803D; --warn-bg:#FFF8EB; --mock-base:linear-gradient(160deg,#fff,#EEF3FF); --plan-hot:linear-gradient(170deg,rgba(255,255,255,.95),rgba(219,234,254,.72)); --nb-head:linear-gradient(135deg,#fff,#EEF4FF); color-scheme:light; --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --max:1200px; --gut:clamp(18px,4.2vw,56px); --r:22px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.6; overflow-x:clip;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} button,input,textarea{font:inherit;color:inherit} ::selection{background:var(--blue);color:#fff} img,svg{display:block;max-width:100%} /* ---------- atmosphere -------------------------------------------------------------------- */ .bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .orb{position:absolute;border-radius:50%;filter:blur(82px);will-change:transform} .orb.a{width:56vmax;height:56vmax;left:-18%;top:-28%; background:radial-gradient(circle,rgba(96,165,250,.52),transparent 68%);animation:d1 26s ease-in-out infinite} .orb.b{width:48vmax;height:48vmax;right:-20%;top:4%; background:radial-gradient(circle,rgba(124,124,240,.4),transparent 68%);animation:d2 31s ease-in-out infinite} .orb.c{width:44vmax;height:44vmax;left:18%;top:58%; background:radial-gradient(circle,rgba(79,209,232,.34),transparent 68%);animation:d3 36s ease-in-out infinite} .orb.d{width:38vmax;height:38vmax;right:4%;bottom:-16%; background:radial-gradient(circle,rgba(244,114,182,.22),transparent 68%);animation:d1 40s ease-in-out 2s infinite} @keyframes d1{50%{transform:translate3d(7vw,5vh,0) scale(1.1)}} @keyframes d2{50%{transform:translate3d(-6vw,8vh,0) scale(1.14)}} @keyframes d3{50%{transform:translate3d(6vw,-7vh,0) scale(1.08)}} .mesh{position:absolute;inset:0;opacity:.5; background-image:linear-gradient(rgba(37,99,235,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(37,99,235,.06) 1px,transparent 1px); background-size:54px 54px; -webkit-mask-image:radial-gradient(ellipse 76% 56% at 50% 24%,#000,transparent 80%); mask-image:radial-gradient(ellipse 76% 56% at 50% 24%,#000,transparent 80%)} main,header,footer{position:relative;z-index:1} .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)} section{padding:clamp(40px,6vw,84px) 0;position:relative} /* ---------- the scroll-driven 3D entrance ------------------------------------------------- Each `.lift` starts pushed back and rotated away, then rights itself as it scrolls in. `view()` makes the browser drive it from the scroll position with no JS at all. ---------- */ .stage{perspective:1400px;perspective-origin:50% 48%} .lift{transform-style:preserve-3d;will-change:transform,opacity} @supports (animation-timeline: view()){ .lift{animation:liftin linear both;animation-timeline:view();animation-range:entry 4% cover 36%} } @supports not (animation-timeline: view()){ .lift{opacity:0;transform:perspective(1400px) translateZ(-180px) rotateX(16deg)} .lift.in{opacity:1;transform:none; transition:opacity .85s cubic-bezier(.16,.84,.26,1),transform .85s cubic-bezier(.16,.84,.26,1)} } /* The perspective lives on each element (not only on the tall .stage): measured from the stage's centre, a card still entering far down the page was projected UP onto the card above it. */ /* Phones: the range is measured against the element's height, and a tall block (the picker with its 18 chips is ~900px) stayed half-faded for 600px of scrolling - it looked like it was still loading. There, finish the entrance within the first stretch of it entering, with less travel, and drop the expensive glass blur. */ @media(max-width:620px){ @supports (animation-timeline: view()){ .lift{animation-name:liftin-m;animation-range:entry 0% entry 22%} } .lift{will-change:auto} .ask,.plate,.dcard,.chip3,.nav.stuck{backdrop-filter:none!important;-webkit-backdrop-filter:none!important} .nav.stuck{background:rgba(var(--tn),.97)} .ask{background:rgba(var(--sf),.95)} } @keyframes liftin-m{from{opacity:.25;transform:translateY(18px)}to{opacity:1;transform:none}} @keyframes liftin{ from{opacity:0;transform:perspective(1100px) translateZ(-160px) rotateX(16deg) translateY(36px)} to {opacity:1;transform:perspective(1100px)} } /* ---------- nav --------------------------------------------------------------------------- */ .nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between; gap:16px;padding:12px var(--gut);border-bottom:1px solid transparent; transition:background .35s,box-shadow .35s,border-color .35s} .nav.stuck{background:rgba(var(--tn),.84);backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);border-color:var(--line);box-shadow:var(--sh-sm)} .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19.5px;letter-spacing:-.035em} .brand svg{width:36px;height:36px;flex:none;filter:drop-shadow(0 6px 10px rgba(37,99,235,.3)); transition:transform .45s cubic-bezier(.2,.8,.2,1)} .brand:hover svg{transform:rotateY(22deg) rotateX(-8deg) scale(1.06)} .brand .n{background:linear-gradient(100deg,var(--blue-lt),var(--blue) 50%,var(--blue-dk)); -webkit-background-clip:text;background-clip:text;color:transparent} .nav nav{display:flex;gap:28px;font-size:14.5px;font-weight:600;color:var(--ink-2)} .nav nav a:hover{color:var(--blue)} .nav-end{display:flex;align-items:center;gap:10px} .menu{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:rgba(var(--sf),.9); cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0} .menu i{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink-2);transition:transform .25s,opacity .25s} .nav.open .menu i:nth-child(1){transform:translateY(6px) rotate(45deg)} .nav.open .menu i:nth-child(2){opacity:0} .nav.open .menu i:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .m-only{display:none} @media(max-width:900px){ .menu{display:flex} .nav nav{display:none;position:absolute;left:var(--gut);right:var(--gut);top:calc(100% + 6px); flex-direction:column;gap:0;padding:8px;border-radius:18px;background:var(--sf-solid);border:1px solid var(--line); box-shadow:var(--sh);font-size:16px} .nav nav a{padding:13px 14px;border-radius:12px} .nav nav a:active,.nav nav a.on{background:rgba(37,99,235,.08);color:var(--blue)} .nav.open nav{display:flex} .nav.open{background:rgba(var(--tn),.96);border-color:var(--line)} .m-only{display:block} } @media(max-width:380px){.brand{font-size:17px}.brand svg{width:30px;height:30px}.btn.sm{padding:9px 14px;font-size:13px}} .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer; padding:14px 26px;border-radius:999px;font-weight:700;font-size:15px;letter-spacing:-.012em; background:linear-gradient(180deg,#3B82F6,#1D4ED8);color:#fff;position:relative;overflow:hidden; box-shadow:0 1px 0 rgba(255,255,255,.32) inset,0 16px 34px -14px rgba(37,99,235,.9); transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s} .btn:hover{transform:translateY(-3px) scale(1.015); box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 24px 46px -14px rgba(37,99,235,1)} .btn:active{transform:translateY(-1px)} .btn::after{content:"";position:absolute;inset:0;transform:translateX(-130%); background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%); transition:transform .75s} .btn:hover::after{transform:translateX(130%)} .btn.ghost{background:rgba(var(--sf),.82);color:var(--ink);border:1px solid var(--line); box-shadow:var(--sh-sm)} .btn.ghost:hover{box-shadow:var(--sh);border-color:rgba(37,99,235,.32)} .btn.sm{padding:10px 19px;font-size:14px} .btn[disabled]{opacity:.55;cursor:not-allowed;transform:none} /* ---------- type -------------------------------------------------------------------------- */ .eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 16px 7px 11px;border-radius:999px; background:rgba(var(--sf),.8);border:1px solid var(--line);box-shadow:var(--sh-sm); font-size:13.5px;font-weight:700;color:var(--ink-2);backdrop-filter:blur(10px)} .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--mint);position:relative;flex:none} .eyebrow .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--mint); animation:ping 2.2s cubic-bezier(0,0,.2,1) infinite} @keyframes ping{0%{transform:scale(1);opacity:.7}75%,100%{transform:scale(2.8);opacity:0}} h1{font-size:clamp(40px,6.8vw,78px);line-height:1.02;letter-spacing:-.05em;font-weight:800} h2{font-size:clamp(30px,4.6vw,54px);line-height:1.08;letter-spacing:-.04em;font-weight:800} h3{font-size:19.5px;letter-spacing:-.025em;font-weight:800} .hl{background:linear-gradient(100deg,var(--blue-lt),var(--blue) 40%,var(--violet) 90%); -webkit-background-clip:text;background-clip:text;color:transparent} .lead{color:var(--muted);font-size:clamp(16.5px,1.6vw,19.5px);max-width:620px;font-weight:500} .center{text-align:center}.center .lead{margin-inline:auto} /* ---------- hero -------------------------------------------------------------------------- */ .hero{padding-top:clamp(24px,4vw,52px);padding-bottom:clamp(20px,4.5vw,64px)} .hero .inner{display:grid;gap:clamp(30px,4vw,62px);align-items:center; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)} @media(max-width:980px){.hero .inner{grid-template-columns:1fr}} /* The 3D layers deliberately reach past the scene box; never let them widen the phone page. */ .hero,.deck-wrap{overflow-x:hidden;overflow-x:clip;overflow-clip-margin:24px} /* Phones: the hero art is an accent tucked in the right corner under the text, not a full screen. */ @media(max-width:620px){ .hero .inner{position:relative} .hero .scene{position:absolute;top:10px;right:calc(var(--gut) - 14px);width:78px;height:78px; min-height:0;perspective:600px;pointer-events:none;z-index:0} .hero .scene .world{scale:.2;flex:none} .hero h1{position:relative;z-index:1} } .hero h1{margin:20px 0 18px} .hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .trust{display:flex;flex-wrap:wrap;gap:18px;margin-top:26px;font-size:14px;color:var(--muted);font-weight:600} .trust span{display:inline-flex;align-items:center;gap:7px} .trust svg{width:17px;height:17px;color:var(--mint);flex:none} /* ---------- the hero scene ---------------------------------------------------------------- One perspective, one rotation on .world, many children at different translateZ. Sharing a preserve-3d space means that single rotation gives TRUE parallax for free — near layers sweep further than far ones, which is what reads as depth. ---------------------------------------- */ .scene{perspective:1250px;perspective-origin:50% 42%;position:relative; min-height:clamp(390px,46vw,540px);display:grid;place-items:center} .world{position:relative;width:min(100%,460px);height:clamp(350px,42vw,480px); transform-style:preserve-3d; transform:rotateX(var(--rx,8deg)) rotateY(var(--ry,-14deg)); transition:transform .6s cubic-bezier(.2,.8,.2,1)} .depth{position:absolute;transform-style:preserve-3d} .glowplate{inset:-16% -12%;transform:translateZ(-240px);border-radius:50%; background:radial-gradient(ellipse at 45% 40%,rgba(96,165,250,.6),rgba(124,124,240,.32) 45%,transparent 72%); filter:blur(36px)} .gridplate{inset:-6%;transform:translateZ(-155px) rotateX(2deg);border-radius:28px; background-image:linear-gradient(rgba(37,99,235,.15) 1px,transparent 1px), linear-gradient(90deg,rgba(37,99,235,.15) 1px,transparent 1px); background-size:34px 34px;opacity:.68; -webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000,transparent 76%); mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000,transparent 76%)} .logo3d{width:clamp(78px,10vw,108px);height:auto;left:-7%;top:-8%; filter:drop-shadow(0 28px 36px rgba(29,78,216,.36));animation:hov1 7s ease-in-out infinite} .plate{inset:auto 0 0 0;top:12%;padding:17px;border-radius:22px;overflow:hidden;transform:translateZ(0); background:rgba(var(--sf),.91);border:1px solid var(--line); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); box-shadow:0 54px 96px -44px rgba(10,20,48,.54),0 1px 0 rgba(255,255,255,.8) inset} .sheen{position:absolute;inset:0;pointer-events:none;border-radius:22px;opacity:0;transition:opacity .35s; background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.78),transparent 46%)} .scene:hover .sheen{opacity:1} .plate .row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:13px; background:rgba(var(--tn),.94);margin-bottom:9px;border:1px solid rgba(37,99,235,.07)} .plate .row:last-child{margin-bottom:0} .plate .av{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center; font-weight:800;font-size:13px;color:#fff;background:linear-gradient(140deg,var(--blue-lt),var(--blue))} .plate .av.v{background:linear-gradient(140deg,#A78BFA,var(--violet))} .plate .av.c{background:linear-gradient(140deg,#5EEAD4,var(--cyan))} .plate .t{font-weight:700;font-size:14px;letter-spacing:-.012em} .plate .s{font-size:12.5px;color:var(--muted);font-weight:500} .plate .pill{margin-left:auto;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px; background:rgba(52,211,153,.17);color:var(--ok-ink);white-space:nowrap} .plate .pill.w{background:rgba(251,191,36,.19);color:var(--warn-ink)} .plate .hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;padding:0 3px} .plate .hd b{font-size:15px;letter-spacing:-.022em} .plate .hd i{font-style:normal;font-size:12.5px;color:var(--faint);font-weight:600} .chip3{padding:8px 15px;border-radius:999px;white-space:nowrap;font-size:12.5px;font-weight:700; color:var(--ink-2);background:rgba(var(--sf),.9);border:1px solid var(--line); box-shadow:0 18px 32px -16px rgba(10,20,48,.42); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .c1{right:-13%;top:2%} .c2{left:-17%;top:40%} .c3{right:-16%;top:53%} .c4{left:-9%;bottom:-6%} .c5{right:3%;top:-10%} .c1{animation:hov2 8s ease-in-out infinite} .c2{animation:hov1 9s ease-in-out .6s infinite} .c3{animation:hov2 7.5s ease-in-out .3s infinite} .c4{animation:hov1 10s ease-in-out .9s infinite} .c5{animation:hov2 8.5s ease-in-out 1.2s infinite} @media(max-width:620px){.c2,.c4{display:none}} /* A `transform` declaration replaces the WHOLE value, so a keyframe animating translateY alone would drop the translateZ and collapse every layer onto the plate. Hence the Z in every frame. */ .logo3d{--z:130px} .c1{--z:185px} .c2{--z:150px} .c3{--z:95px} .c4{--z:60px} .c5{--z:45px} @keyframes hov1{0%,100%{transform:translateZ(var(--z,120px)) translateY(0)} 50% {transform:translateZ(var(--z,120px)) translateY(-11px)}} @keyframes hov2{0%,100%{transform:translateZ(var(--z,120px)) translateY(0)} 50% {transform:translateZ(var(--z,120px)) translateY(9px)}} /* Once the WebGL hero has mounted, fade the CSS scene out rather than removing it: if the context is ever lost the canvas goes blank, and a hidden-but-present fallback means the hero degrades to the old one instead of to an empty box. */ .scene.gl .world{opacity:0;transition:opacity .7s ease .15s;pointer-events:none} .scene.gl{isolation:isolate} .scene canvas{border-radius:28px} /* ---------- the AI picker ------------------------------------------------------------------ */ .ask{position:relative;border-radius:28px;padding:clamp(24px,3.6vw,44px); background:rgba(var(--sf),.84);border:1px solid var(--line);box-shadow:var(--sh-lg); backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)} .ask::before{content:"";position:absolute;inset:-2px;border-radius:30px;z-index:-1; background:linear-gradient(120deg,rgba(96,165,250,.6),rgba(124,124,240,.5),rgba(79,209,232,.55),rgba(244,114,182,.4)); background-size:300% 300%;filter:blur(15px);opacity:.6;animation:aura 9s ease-in-out infinite} @keyframes aura{50%{background-position:100% 50%}} .ask h2{margin-bottom:10px} .ask .lead{margin-bottom:22px} .askbox{display:flex;gap:10px;flex-wrap:wrap} .askbox textarea{flex:1;min-width:240px;min-height:60px;max-height:170px;resize:vertical; padding:17px 19px;border-radius:17px;border:1.5px solid var(--line);background:var(--sf-solid); font-size:16px;font-weight:500;box-shadow:var(--sh-sm);transition:border-color .2s,box-shadow .2s} .askbox textarea:focus{outline:0;border-color:var(--blue-lt);box-shadow:0 0 0 4px rgba(96,165,250,.2)} .askbox .btn{align-self:flex-start;padding:18px 28px} .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .chip{padding:7px 15px;border-radius:999px;border:1px solid var(--line);background:rgba(var(--sf),.76); font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:.18s} .chip:hover{border-color:var(--blue-lt);color:var(--blue);transform:translateY(-2px)} .answer{margin-top:26px;border-top:1px solid var(--line);padding-top:24px;display:none; perspective:900px} .answer.on{display:block} .answer .verdict{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px} .answer .verdict b{font-size:clamp(21px,2.8vw,30px);letter-spacing:-.035em} .answer .conf{font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px; background:rgba(52,211,153,.17);color:var(--ok-ink)} .answer .conf.low{background:rgba(251,191,36,.19);color:var(--warn-ink)} .answer .sub{color:var(--muted);font-size:15.5px;font-weight:500;margin-bottom:20px} .mods{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); transform-style:preserve-3d} /* Each result card flips in from edge-on. Staggered, capped at 8 so a long list is not a wait. */ .mod{display:flex;align-items:center;gap:11px;padding:14px 16px;border-radius:15px; background:rgba(var(--tn),.96);border:1px solid rgba(37,99,235,.1);font-weight:700;font-size:14.5px; opacity:0;transform-origin:50% 100%;animation:flipin .62s cubic-bezier(.16,.84,.26,1) forwards; box-shadow:var(--sh-sm)} .mod svg{width:19px;height:19px;color:var(--blue);flex:none} @keyframes flipin{ from{opacity:0;transform:perspective(900px) rotateX(-70deg) translateZ(-40px)} to {opacity:1;transform:none}} .spin{width:17px;height:17px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff; border-radius:50%;animation:spin .7s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* ---------- module cards, individually tilting ---------------------------------------------- */ .grid3{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));margin-top:34px; perspective:1200px} .feat{padding:28px;border-radius:var(--r);background:var(--card);border:1px solid var(--line); box-shadow:var(--sh-sm);backdrop-filter:blur(14px);position:relative;transform-style:preserve-3d; transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s} .feat:hover{box-shadow:var(--sh-lg)} /* The icon and the heading sit FORWARD of the card, so tilting the card parallaxes its contents instead of sliding a flat picture. */ .feat .ic{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;margin-bottom:17px; background:linear-gradient(140deg,rgba(96,165,250,.24),rgba(37,99,235,.15));color:var(--blue); transform:translateZ(38px);box-shadow:0 10px 22px -12px rgba(37,99,235,.6)} .feat .ic svg{width:23px;height:23px} .feat h3{transform:translateZ(22px)} .feat p{color:var(--muted);font-size:15px;margin-top:8px;font-weight:500;transform:translateZ(12px)} /* ---------- the fanning deck — the centrepiece ---------------------------------------------- */ .deck-wrap{perspective:1500px;perspective-origin:50% 46%;min-height:clamp(330px,38vw,430px); display:grid;place-items:center;margin-top:28px} .deck{position:relative;width:min(100%,430px);height:clamp(150px,17vw,186px); transform-style:preserve-3d;transform:rotateX(14deg)} .dcard{position:absolute;inset:0;border-radius:20px;padding:17px 19px; background:rgba(var(--sf),.93);border:1px solid var(--line);box-shadow:var(--sh); backdrop-filter:blur(14px);transform-style:preserve-3d; display:flex;flex-direction:column;gap:9px} .dcard .dh{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;letter-spacing:-.025em} .dcard .dh i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-style:normal; color:#fff;font-size:14px;background:linear-gradient(140deg,var(--blue-lt),var(--blue))} .dcard p{color:var(--muted);font-size:13.5px;font-weight:500;line-height:1.45} .dcard .bar{height:7px;border-radius:999px;background:rgba(37,99,235,.12);overflow:hidden;margin-top:auto} .dcard .bar i{display:block;height:100%;border-radius:999px; background:linear-gradient(90deg,var(--blue-lt),var(--blue))} /* Fanned out, each a step further back and rotated. The deck rotates as a whole on scroll. */ /* The Y step has to clear each card's HEADER, not just its edge. At 36px only the progress bar peeked out and four of the five cards were unreadable - a stack of blank rectangles. 78px shows every title while keeping the overlap that makes it read as one deck. */ .dcard[data-p="1"]{transform:translateZ(-110px) translateY(-156px) rotateZ(-6deg)} .dcard[data-p="2"]{transform:translateZ(-55px) translateY(-78px) rotateZ(-3deg)} .dcard[data-p="3"]{transform:translateZ(0) translateY(0) rotateZ(0deg)} .dcard[data-p="4"]{transform:translateZ(55px) translateY(78px) rotateZ(3deg)} .dcard[data-p="5"]{transform:translateZ(110px) translateY(156px) rotateZ(6deg)} /* Click a card: it slides out to the side (.pull), then drops in at the front while the others step back one slot each. `translate` is a separate property from `transform`, so the hover nudge composes with the slot instead of replacing it. */ .dcard{cursor:pointer;outline:none; transition:transform .62s cubic-bezier(.22,.9,.24,1),translate .25s ease,box-shadow .3s} .dcard:not([data-p="5"]):hover,.dcard:not([data-p="5"]):focus-visible{translate:0 -10px; box-shadow:0 22px 44px -18px rgba(37,99,235,.45)} .dcard:focus-visible{box-shadow:0 0 0 3px rgba(37,99,235,.45),var(--sh)} .dcard[data-p="5"]{cursor:default} .dcard.pull{transition:transform .3s cubic-bezier(.4,0,.6,1); transform:translateZ(170px) translateX(78%) translateY(var(--py,0px)) rotateZ(14deg)!important} .deck-hint{margin-top:6px;text-align:center;font-size:13px;font-weight:600;color:var(--faint)} @supports (animation-timeline: view()){ .deck{animation:deckspin linear both;animation-timeline:view();animation-range:entry 0% cover 60%} } @keyframes deckspin{from{transform:rotateX(34deg) rotateZ(-6deg)}to{transform:rotateX(8deg) rotateZ(2deg)}} /* Phones keep all five cards (as on desktop); a narrower deck leaves room for the tilt. */ @media(max-width:620px){.deck{width:86%}.dcard p{font-size:13px}} /* ---------- verticals: a 3D ring ------------------------------------------------------------ */ .ringwrap{perspective:1100px;margin-top:40px;overflow:hidden;padding:26px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .ring{display:flex;gap:12px;width:max-content;transform:rotateX(11deg); animation:slide 44s linear infinite} .ring:nth-child(2){animation-direction:reverse;animation-duration:52s;margin-top:12px} .ringwrap:hover .ring{animation-play-state:paused} @keyframes slide{to{transform:rotateX(11deg) translateX(-50%)}} /* The homepage uses .ring for these; inner pages use a plain wrapped row. Both need .vert to be a BLOCK-level box — as an inline span its vertical padding does not grow the line box and the pills bleed over the paragraph above them. */ .verts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:32px} .vert{display:inline-flex;align-items:center;padding:12px 21px;border-radius:999px; background:rgba(var(--sf),.86); border:1px solid var(--line);font-weight:700;font-size:14.5px;color:var(--ink-2); box-shadow:var(--sh-sm);white-space:nowrap;transition:.25s} .vert:hover{transform:translateY(-3px) scale(1.04);border-color:var(--blue-lt);color:var(--blue); box-shadow:var(--sh)} /* ---------- steps --------------------------------------------------------------------------- */ .steps{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));margin-top:34px; counter-reset:s;perspective:1200px} .step{padding:28px;border-radius:var(--r);background:var(--card);border:1px solid var(--line); box-shadow:var(--sh-sm);position:relative;counter-increment:s;transform-style:preserve-3d; transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s} .step:hover{transform:translateZ(26px);box-shadow:var(--sh)} .step::before{content:counter(s);position:absolute;top:-16px;left:25px;width:36px;height:36px; border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:15.5px;color:#fff; background:linear-gradient(140deg,var(--blue-lt),var(--blue-dk));box-shadow:var(--sh-sm); transform:translateZ(32px)} .step h3{margin:13px 0 7px} .step p{color:var(--muted);font-size:15px;font-weight:500} /* ---------- cta + footer -------------------------------------------------------------------- */ .cta-band{border-radius:30px;padding:clamp(38px,5.4vw,72px);text-align:center;position:relative; overflow:hidden;background:linear-gradient(135deg,#1E3A8A,#2563EB 46%,#6366F1);color:#fff; box-shadow:var(--sh-lg)} .cta-band::after{content:"";position:absolute;inset:0;opacity:.34;pointer-events:none; /* the glow sat on top of the button and ate every click (owner, 2026-10-07) */ background:radial-gradient(ellipse 60% 70% at 20% 8%,rgba(255,255,255,.45),transparent 60%)} .cta-band > *{position:relative} .cta-band h2{margin-bottom:12px} .cta-band p{opacity:.92;font-size:17.5px;max-width:540px;margin:0 auto 28px;font-weight:500} .cta-band .btn{background:#fff;color:var(--blue-dk);box-shadow:0 16px 38px -12px rgba(0,0,0,.45)} .cta-band .btn:hover{box-shadow:0 24px 50px -12px rgba(0,0,0,.55)} footer{padding:42px 0 52px;border-top:1px solid var(--line);margin-top:24px} .fin{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between; color:var(--muted);font-size:14px;font-weight:500} /* ---------- motion preference --------------------------------------------------------------- Everything above is decoration. Someone who asked their OS for less motion gets the finished state, not a degraded animation. ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce){ *,*::after,*::before{animation:none!important;transition:none!important} .lift{opacity:1!important;transform:none!important} .world,.deck,.ring,.feat,.step{transform:none!important} .sheen{display:none} .dcard{position:relative;inset:auto;transform:none!important;margin-bottom:12px;cursor:default} .deck-hint{display:none} .deck{height:auto} html{scroll-behavior:auto} } /* ---------- faq ------------------------------------------------------------------------- Rendered from the same source as the FAQPage JSON-LD (see the build note in index.html): Google requires the markup to describe content a visitor can actually see, and two hand-maintained copies of the same answers drift within a week. ------------------------- */ .faq{max-width:820px;margin:44px auto 0;display:grid;gap:10px} .qa{border-radius:16px;border:1px solid var(--line);background:var(--card); box-shadow:var(--sh-sm);backdrop-filter:blur(12px);overflow:hidden; transition:box-shadow .25s,transform .25s} .qa[open]{box-shadow:var(--sh);transform:translateY(-1px)} .qa summary{list-style:none;cursor:pointer;padding:18px 54px 18px 22px;position:relative; font-weight:700;font-size:16.5px;letter-spacing:-.02em} .qa summary::-webkit-details-marker{display:none} .qa summary::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px; border-right:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue); transform:translateY(-70%) rotate(45deg);transition:transform .28s} .qa[open] summary::after{transform:translateY(-20%) rotate(225deg)} .qa p{padding:0 22px 20px;color:var(--muted);font-size:15.5px;font-weight:500} /* ============================================================================================== INNER PAGES — module detail, vertical detail, pricing, FAQ, 404. Generated by build.py from content.py; these are the shapes those templates emit. ============================================================================================== */ /* ---------- breadcrumbs ------------------------------------------------------------------- */ .crumbs{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:26px; font-size:13.5px;font-weight:600;color:var(--muted)} .crumbs a{color:var(--blue)} .crumbs a:hover{text-decoration:underline} .crumbs i{font-style:normal;opacity:.45} /* ---------- sub-page hero ------------------------------------------------------------------ */ .subhero{padding-top:clamp(26px,4vw,46px);padding-bottom:clamp(30px,4vw,52px)} .subhero h1{font-size:clamp(32px,5vw,58px);line-height:1.06} .shead{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:22px} .ic.big{width:72px;height:72px;border-radius:21px;flex:none} .ic.big svg{width:34px;height:34px} .shead .tag{color:var(--blue);font-weight:700;font-size:17px;margin-top:4px;letter-spacing:-.02em} .lead.big{font-size:clamp(18px,2vw,22px);max-width:760px;color:var(--ink-2)} .prob{margin-top:30px;padding:22px 26px;border-radius:18px;max-width:760px; background:rgba(var(--sf),.72);border:1px solid var(--line); border-left:4px solid var(--amber);box-shadow:var(--sh-sm)} .prob b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.09em; color:var(--warn-ink);margin-bottom:7px} .prob p{color:var(--ink-2);font-size:16px;font-weight:500} /* ---------- detailed feature list ----------------------------------------------------------- */ .dfeats{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); margin-top:44px} .dfeat{padding:26px 28px;border-radius:var(--r);background:var(--card);border:1px solid var(--line); box-shadow:var(--sh-sm);backdrop-filter:blur(14px);position:relative; transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s} .dfeat:hover{transform:perspective(1100px) translateZ(18px);box-shadow:var(--sh)} .dfeat h3{margin-bottom:9px;padding-left:26px;position:relative} .dfeat h3::before{content:"";position:absolute;left:0;top:.42em;width:13px;height:9px; border-left:3px solid var(--blue);border-bottom:3px solid var(--blue); transform:rotate(-45deg)} .dfeat p{color:var(--muted);font-size:15.5px;font-weight:500} /* ---------- big navigation cards ------------------------------------------------------------ */ .bigcards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); margin-top:48px} .bigcard{display:block;padding:30px;border-radius:var(--r);background:var(--card); border:1px solid var(--line);box-shadow:var(--sh-sm);backdrop-filter:blur(14px); transform-style:preserve-3d;transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s} .bigcard:hover{transform:perspective(1100px) translateZ(26px) translateY(-4px);box-shadow:var(--sh-lg)} .bigcard .ic{margin-bottom:18px;transform:translateZ(28px)} .bigcard h3{font-size:22px;transform:translateZ(18px)} .bigcard .tl{color:var(--blue);font-weight:700;font-size:15px;margin-top:5px} .bigcard p{color:var(--muted);font-size:15.5px;margin-top:10px;font-weight:500} .more{display:inline-block;margin-top:18px;color:var(--blue);font-weight:700;font-size:14.5px} .feat .more{margin-top:14px} a.feat{display:block} /* ---------- two-column: pain vs outcome ----------------------------------------------------- */ .two{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))} .pains,.scenario{padding:30px;border-radius:var(--r);border:1px solid var(--line); box-shadow:var(--sh-sm);backdrop-filter:blur(14px)} .pains{background:rgba(var(--sf),.66)} .pains h2,.scenario h2{font-size:23px;margin-bottom:16px} .pains ul{list-style:none;display:grid;gap:11px} .pains li{padding-left:28px;position:relative;color:var(--ink-2);font-size:15.5px;font-weight:500} .pains li::before{content:"×";position:absolute;left:0;top:-1px;width:19px;height:19px; border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800; background:rgba(244,114,182,.18);color:var(--pink-ink)} .scenario{background:linear-gradient(160deg,rgba(37,99,235,.09),rgba(124,124,240,.07)); border-color:rgba(37,99,235,.2)} .scenario p{color:var(--ink-2);font-size:16.5px;font-weight:500;line-height:1.62} /* ---------- pricing -------------------------------------------------------------------------- */ .plans{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); margin-top:34px;align-items:start;perspective:1300px} .plan{padding:32px 28px;border-radius:24px;background:rgba(var(--sf),.8); border:1px solid var(--line);box-shadow:var(--sh-sm);backdrop-filter:blur(16px); position:relative;display:flex;flex-direction:column;gap:14px; transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s} .plan:hover{transform:translateY(-5px);box-shadow:var(--sh)} .plan.hot{border-color:rgba(37,99,235,.42);box-shadow:var(--sh-lg); background:var(--plan-hot)} .plan .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%); padding:5px 15px;border-radius:999px;font-size:12px;font-weight:800;color:#fff; background:linear-gradient(180deg,#3B82F6,#1D4ED8);box-shadow:var(--sh-sm);white-space:nowrap} .plan h3{font-size:21px} .plan .blurb{color:var(--muted);font-size:14.5px;font-weight:500;min-height:42px} .plan .price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap; padding-bottom:14px;border-bottom:1px solid var(--line)} .plan .price b{font-size:clamp(28px,3.4vw,38px);letter-spacing:-.04em} .plan .price i{font-style:normal;color:var(--muted);font-size:13.5px;font-weight:600} .plan ul{list-style:none;display:grid;gap:10px;flex:1} .plan li{display:flex;align-items:flex-start;gap:9px;font-size:15px;font-weight:500; color:var(--ink-2)} .plan .btn{width:100%;margin-top:6px} .tick{display:inline-flex;flex:none;width:19px;height:19px;color:var(--mint)} .tick svg{width:19px;height:19px} .trust .tick{color:var(--mint)} .notes{list-style:none;margin:36px auto 0;max-width:640px;display:grid;gap:8px; color:var(--muted);font-size:14px;font-weight:500;text-align:center} /* «Precios en: Colombia (COP) · Otros países (USD)» - radios before .plans, no JS needed (2026-10-27). The radios stay focusable (arrow keys switch); the labels are what people see and click. */ .pricing{margin-top:30px} .cur-in{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none} .curswitch{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 6px; width:max-content;max-width:100%;margin:0 auto;padding:5px;border-radius:999px; background:rgba(var(--sf),.8);border:1px solid var(--line);box-shadow:var(--sh-sm); font-size:13.5px;font-weight:600;color:var(--muted)} .curswitch .cur-lbl{padding:0 6px 0 10px} .curswitch .cur-sep{display:none} .curswitch label{padding:7px 14px;border-radius:999px;cursor:pointer;white-space:nowrap; transition:background .2s,color .2s} .curswitch label:hover{color:var(--ink)} #cur-COP:checked~.curswitch label[for="cur-COP"],#cur-USD:checked~.curswitch label[for="cur-USD"]{ background:linear-gradient(180deg,#3B82F6,#1D4ED8);color:#fff} #cur-COP:focus-visible~.curswitch label[for="cur-COP"],#cur-USD:focus-visible~.curswitch label[for="cur-USD"]{ outline:2px solid var(--blue);outline-offset:2px} .plan .price.cur-USD,#cur-USD:checked~.plans .price.cur-COP{display:none} #cur-USD:checked~.plans .price.cur-USD{display:flex} @media(max-width:420px){.curswitch{border-radius:20px}.curswitch .cur-lbl{width:100%;text-align:center;padding:2px 0 0}} @media print{.curswitch,.cur-in{display:none}.plan .price.cur-USD{display:flex}} /* ---------- footer ---------------------------------------------------------------------------- */ .fcols{display:grid;gap:30px;grid-template-columns:1.4fr repeat(3,1fr);padding-bottom:34px} @media(max-width:880px){.fcols{grid-template-columns:1fr 1fr}} @media(max-width:520px){.fcols{grid-template-columns:1fr}} .fbrand p{color:var(--muted);font-size:14.5px;font-weight:500;margin-top:14px} .fcols h4{font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink); margin-bottom:14px} .fcols ul{list-style:none;display:grid;gap:9px} .fcols a{color:var(--muted);font-size:14.5px;font-weight:500} .fcols a:hover{color:var(--blue)} .fin{border-top:1px solid var(--line);padding-top:26px} .nav nav a.on{color:var(--blue)} /* The step after "esto es lo tuyo". Without it the picker is a dead end: it tells you what you need and then offers no way to get it. */ .answer-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px; padding-top:22px;border-top:1px solid var(--line)} .answer-cta span{color:var(--muted);font-size:14px;font-weight:600} /* ---------- mockups: little 3D product scenes on the module cards ------------------------- */ .mock{position:relative;height:210px;margin:-6px -6px 22px;border-radius:18px;overflow:hidden; perspective:900px;transform-style:preserve-3d; background:radial-gradient(120% 90% at 20% 0%,var(--m1),transparent 60%), radial-gradient(90% 90% at 100% 100%,var(--m2),transparent 65%),var(--mock-base)} .mock.t-blue{--m1:rgba(96,165,250,.45);--m2:rgba(124,124,240,.3);--acc:#2563EB} .mock.t-mint{--m1:rgba(52,211,153,.4);--m2:rgba(79,209,232,.32);--acc:#059669} .mock.t-amber{--m1:rgba(251,191,36,.42);--m2:rgba(244,114,182,.24);--acc:#D97706} .mock.t-violet{--m1:rgba(124,124,240,.42);--m2:rgba(96,165,250,.3);--acc:#6D5DF6} .mock.t-pink{--m1:rgba(244,114,182,.38);--m2:rgba(124,124,240,.28);--acc:#DB2777} .mock-screen{position:absolute;left:12%;right:10%;top:22px;bottom:-26px;padding:14px 15px;border-radius:16px; background:rgba(255,255,255,.93);border:1px solid rgba(255,255,255,.9); box-shadow:0 30px 60px -28px rgba(10,20,48,.55),0 0 0 1px rgba(37,99,235,.08); transform:rotateX(16deg) rotateY(-14deg) rotateZ(2deg);transform-origin:50% 100%; transition:transform .5s cubic-bezier(.2,.8,.2,1);font-size:11.5px;color:#27365F;text-align:left} .bigcard:hover .mock-screen,.mock-hero:hover .mock-screen{transform:rotateX(8deg) rotateY(-6deg) rotateZ(1deg) translateY(-4px)} .mock-chip{position:absolute;right:6%;top:16px;padding:8px 13px;border-radius:999px;background:#fff;font-size:12px; font-weight:700;color:#0A1430;box-shadow:0 18px 30px -14px rgba(10,20,48,.45);transform:translateZ(60px); display:flex;align-items:center;gap:7px;white-space:nowrap;animation:chipfloat 5s ease-in-out infinite} .mock-chip b{color:var(--acc)} .mock-chip i{font-style:normal;display:grid;place-items:center;width:20px;height:20px;border-radius:50%; color:#fff;background:var(--acc);font-size:11px} @keyframes chipfloat{0%,100%{transform:translateZ(60px) translateY(0)}50%{transform:translateZ(60px) translateY(-5px)}} @media (prefers-reduced-motion:reduce){.mock-chip{animation:none}} .m-head{display:flex;align-items:center;gap:7px;font-weight:800;font-size:12px;color:#0A1430;margin-bottom:10px} .m-dot{width:8px;height:8px;border-radius:50%;background:#2563EB;box-shadow:0 0 0 3px rgba(37,99,235,.15)} .m-dot.g{background:#059669;box-shadow:0 0 0 3px rgba(5,150,105,.15)} .m-dot.a{background:#D97706;box-shadow:0 0 0 3px rgba(217,119,6,.15)} .m-row{display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:center;margin-top:6px} .m-t{color:#9AA8C8;font-weight:700;font-size:10.5px} .m-ev{display:flex;flex-direction:column;padding:6px 9px;border-radius:8px;border-left:3px solid;font-size:10.5px;line-height:1.25} .m-ev b{font-size:11px;color:#0A1430} .m-ev.b{background:#EAF1FF;border-color:#2563EB}.m-ev.v{background:#F0EEFF;border-color:#7C7CF0}.m-ev.c{background:#E6FAF4;border-color:#059669} .m-free{padding:6px 9px;border-radius:8px;border:1.5px dashed #C9D6F2;color:#9AA8C8;font-weight:700;font-size:10.5px} .m-seats{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin:8px 0 12px} .m-seats i{aspect-ratio:1;border-radius:50%;background:#EEF3FF;border:1.5px dashed #C9D6F2} .m-seats i.on{border:0} .m-seats .s0{background:linear-gradient(135deg,#60A5FA,#2563EB)}.m-seats .s1{background:linear-gradient(135deg,#F472B6,#DB2777)} .m-seats .s2{background:linear-gradient(135deg,#34D399,#059669)}.m-seats .s3{background:linear-gradient(135deg,#FBBF24,#D97706)} .m-seats .s4{background:linear-gradient(135deg,#A5B4FC,#6D5DF6)} .m-bar{height:7px;border-radius:99px;background:#EEF3FF;overflow:hidden;margin-top:8px} .m-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--acc),#60A5FA)} .m-cap{margin-top:6px;font-weight:700;color:#6B7CA6;font-size:10.5px} .m-grid{display:grid;grid-template-columns:24px repeat(3,1fr);gap:5px;align-items:center} .m-grid b{font-size:10px;color:#9AA8C8;text-align:center} .m-grid i{height:20px;border-radius:6px;background:#EEF3FF} .m-grid i.x{background:linear-gradient(135deg,#FBBF24,#F59E0B)} .m-map{position:relative;height:96px;border-radius:12px;background:linear-gradient(160deg,#E9F0FF,#F3F7FF);overflow:hidden} .m-road{position:absolute;height:6px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px #DDE6FA} .m-road.r1{left:-10%;right:-10%;top:42%;transform:rotate(-12deg)}.m-road.r2{left:30%;width:70%;top:20%;transform:rotate(28deg)} .m-pin{position:absolute;font-size:22px;filter:drop-shadow(0 6px 6px rgba(10,20,48,.25))} .m-pin.p1{left:14%;top:30%}.m-pin.p2{left:48%;top:8%}.m-pin.p3{left:74%;top:46%} .m-sedes{display:flex;justify-content:space-between;margin-top:9px;font-weight:700;font-size:10.5px;color:#27365F} .m-pay{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed #DDE6FA;font-size:11px} .m-pay b{color:#0A1430} .m-bars{display:flex;align-items:flex-end;gap:9px;height:110px;padding-bottom:16px} .m-bars span{position:relative;flex:1;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#BFD3FB,#93B4F7)} .m-bars span.hi{background:linear-gradient(180deg,#60A5FA,#2563EB);box-shadow:0 8px 16px -8px rgba(37,99,235,.7)} .m-bars i{position:absolute;bottom:-15px;left:0;right:0;text-align:center;font-style:normal;font-size:9.5px;font-weight:700;color:#9AA8C8} .m-wa-head{margin:-14px -15px 10px;padding:9px 14px;border-radius:16px 16px 0 0;background:#075E54;color:#fff;font-weight:700;font-size:11px} .m-msg{max-width:82%;padding:6px 9px;border-radius:10px;margin-top:6px;font-size:10.5px;line-height:1.3;box-shadow:0 1px 1px rgba(0,0,0,.06)} .m-msg.in{background:#F1F5F9} .m-msg.out{margin-left:auto;background:#DCF8C6} .m-prof{display:flex;align-items:center;gap:9px} .m-prof b{display:block;font-size:12px;color:#0A1430}.m-prof small{color:#9AA8C8;font-size:10px} .m-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px; background:linear-gradient(135deg,#F472B6,#7C7CF0)} .m-tags{display:flex;gap:5px;margin:10px 0} .m-tags span{padding:3px 8px;border-radius:99px;background:#FCE7F3;color:#BE185D;font-weight:700;font-size:10px} .m-tags span+span{background:#EEF3FF;color:#1D4ED8} .m-tl{display:flex;align-items:center;gap:7px;font-size:10.5px;color:#6B7CA6;margin-top:6px} .m-tl i{width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none} /* any icon left inside a big card keeps a sane size (the old bug: icons stretched to the card) */ .bigcard .ic{width:56px;height:56px;border-radius:17px;display:grid;place-items:center} .bigcard .ic svg{width:26px;height:26px} /* module page hero: the same scene, larger, beside the title */ .mock-hero{display:none} @media (min-width:980px){ .subhero .wrap{position:relative} .mock-hero{display:block;position:absolute;right:var(--gut);top:70px;width:380px} .mock-hero .mock{height:250px;margin:0} .subhero .lead.big,.subhero .prob{max-width:calc(100% - 430px)} } /* recommender: how this business books, and what it typically offers */ .howbook{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px} .howbook span{padding:7px 13px;border-radius:999px;background:rgba(37,99,235,.1);color:var(--accent-ink);font-weight:700;font-size:13.5px} .howbook span:first-child{background:linear-gradient(135deg,#2563EB,#7C7CF0);color:#fff;box-shadow:0 10px 22px -12px rgba(37,99,235,.9)} .offer:empty{display:none} .offer{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)} .offer b{display:block;font-size:14px;margin-bottom:10px} .offer div{display:flex;flex-wrap:wrap;gap:7px} .offer span{padding:6px 12px;border-radius:999px;background:rgba(var(--sf),.75);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink-2)} @media(max-width:620px){ /* Every example stays visible on a phone (a swipe strip hid two thirds of them); compact chips keep the wrapped block short. */ .chips{gap:6px} .chip{padding:6px 11px;font-size:12.5px} } /* ---------- legal pages (/privacidad/, /terminos/) ---------------------------------------- */ .legal{max-width:760px;margin:18px auto 0;background:rgba(var(--sf),.9);border:1px solid var(--line); border-radius:24px;padding:clamp(22px,4vw,48px);box-shadow:var(--sh-sm);color:var(--ink-2);line-height:1.65;font-size:15.5px} .legal h1{font-size:clamp(28px,4vw,40px);line-height:1.12;margin:0 0 8px;color:var(--ink)} .legal h2{font-size:19px;margin:30px 0 10px;color:var(--ink);letter-spacing:-.015em} .legal p{margin:0 0 12px} .legal ul{margin:0 0 14px 20px;display:flex;flex-direction:column;gap:7px} .legal-date{color:var(--faint);font-size:13.5px;font-weight:600} .legal-intro{font-size:16.5px;color:var(--muted)} /* "Iniciar sesión" in the top bar on desktop; on phones it lives in the ☰ menu instead */ .login-link{font-size:14.5px;font-weight:700;color:var(--ink-2);padding:10px 8px;white-space:nowrap} .login-link:hover{color:var(--blue)} @media(max-width:900px){.login-link{display:none}} /* ============================================================================================== PANEL DEMO — "Así se ve tu panel" (panel-demo.js) A copy of the real panel's look (citanube-panel/src/styles.css): glass cards, blue gradient active pill, time chips, status badges. Drawn at a fixed design size (1040x620, or 400x700 on phones) and scaled to fit by JS, so it reads as a screenshot that moves. Everything is prefixed pd- so the site's .btn/.chip/.badge and the global h1/h2 sizes never leak in. ============================================================================================== */ .pd-sec{padding-top:clamp(36px,5vw,72px);padding-bottom:clamp(8px,2vw,24px);overflow-x:hidden;overflow-x:clip} /* the section right after the demo (the "¿A qué se dedica tu negocio?" box) sits close to it: two full section paddings stacked left a ~250px gap (owner, 2026-10-07) */ .pd-sec+section{padding-top:clamp(24px,3.5vw,48px)} .pd{margin:clamp(26px,4vw,46px) auto 0;max-width:1100px} .pd-stage{position:relative} .pd-fit{position:relative;width:100%;aspect-ratio:1040/620} .pd-sk{position:absolute;inset:0;border-radius:18px;background:#fff;overflow:hidden; box-shadow:0 50px 100px -40px rgba(10,20,48,.45),0 0 0 1px rgba(37,99,235,.14)} .pd-sk::before{content:"";position:absolute;left:0;right:0;top:0;height:6.5%;background:#F1F5FD;border-bottom:1px solid var(--line)} .pd-sk::after{content:"";position:absolute;left:0;top:6.5%;bottom:0;width:16.5%;background:#F8FAFF;border-right:1px solid var(--line)} .pd-fit.ok>.pd-sk{display:none} .pd-cap{margin-top:16px;text-align:center;color:var(--muted);font-size:13.5px;font-weight:600} .pd-types{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:7px;margin:0 0 20px} .pd-types>span{font-size:13px;font-weight:700;color:var(--muted);margin-right:2px} .pd-type{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(var(--sf),.82); font-weight:700;font-size:13px;color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s} .pd-type:hover{border-color:rgba(37,99,235,.35)} .pd-type[aria-pressed="true"]{background:linear-gradient(180deg,#3B82F6,#1D4ED8);color:#fff;border-color:transparent; box-shadow:0 10px 22px -12px rgba(37,99,235,.9)} /* the window */ .pd-win{position:absolute;left:0;top:0;transform-origin:0 0;display:flex;flex-direction:column;overflow:hidden; border-radius:18px;text-align:left;font-family:var(--font);color:var(--ink);font-size:13px;line-height:1.45; background:radial-gradient(circle at 0 0,rgba(96,165,250,.26),transparent 42%), radial-gradient(circle at 100% 18%,rgba(124,124,240,.18),transparent 40%), radial-gradient(circle at 45% 100%,rgba(79,209,232,.15),transparent 45%),#F5F8FF; box-shadow:0 60px 110px -44px rgba(10,20,48,.5),0 0 0 1px rgba(37,99,235,.14)} .pd-win svg{display:block;flex:none} .pd-bar{position:relative;height:40px;flex:none;display:flex;align-items:center;gap:12px;padding:0 14px; background:rgba(255,255,255,.94);border-bottom:1px solid rgba(37,99,235,.12)} .pd-dots{display:flex;gap:7px;flex:none} .pd-dots i{width:11px;height:11px;border-radius:50%;background:#FF5F57} .pd-dots i:nth-child(2){background:#FEBC2E}.pd-dots i:nth-child(3){background:#28C840} .pd-url{margin:0 auto;display:flex;align-items:center;justify-content:center;gap:6px;height:26px;min-width:340px;padding:0 16px; border-radius:999px;background:#EEF3FF;color:#6B7CA6;font-size:12px;font-weight:600;white-space:nowrap} .pd-url b{color:var(--ink);font-weight:700} .pd-pause{width:26px;height:26px;border-radius:50%;border:0;background:transparent;color:#6B7CA6;display:grid;place-items:center;cursor:pointer;flex:none} .pd-pause:hover{background:rgba(37,99,235,.08);color:var(--blue)} .pd-prog{position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:linear-gradient(90deg,#60A5FA,#2563EB); transform-origin:0 50%;transform:scaleX(0);transition:opacity .3s} .pd-win.held .pd-prog{opacity:.35}.pd-win.paused .pd-prog{opacity:0} .pd-pause:focus-visible,.pd-nav:focus-visible,.pd-type:focus-visible{outline:3px solid rgba(37,99,235,.45);outline-offset:2px} .pd-app{flex:1;min-height:0;display:grid;grid-template-columns:172px minmax(0,1fr)} .pd-side{display:flex;flex-direction:column;gap:2px;padding:14px 10px 12px;min-height:0; background:rgba(255,255,255,.72);border-right:1px solid rgba(37,99,235,.13)} .pd-brand{display:flex;align-items:center;gap:8px;padding:0 6px 12px;font-weight:800;font-size:16px;letter-spacing:-.035em} .pd-logo{filter:drop-shadow(0 4px 8px rgba(37,99,235,.3))} .pd-brand .n{background:linear-gradient(100deg,#60A5FA,#2563EB 50%,#1D4ED8);-webkit-background-clip:text;background-clip:text;color:transparent} .pd-biz{margin:0 2px 6px;padding:8px 10px;border-radius:12px;background:linear-gradient(135deg,#fff,#EEF3FF);border:1px solid rgba(37,99,235,.13)} .pd-biz strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pd-biz small{display:block;color:#6B7CA6;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pd-navs{display:flex;flex-direction:column;gap:2px} .pd-sec-t{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9AA8C8;padding:9px 10px 3px} .pd-nav{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border-radius:10px;border:0;background:none; color:#27365F;font-weight:600;font-size:12.5px;cursor:pointer;text-align:left;transition:background .15s,color .15s,box-shadow .15s} .pd-nav svg{color:#9AA8C8;transition:color .15s} .pd-nav:hover{background:rgba(37,99,235,.07);color:var(--ink)} .pd-nav:hover svg{color:var(--blue)} .pd-nav.on{background:linear-gradient(180deg,#3B82F6,#1D4ED8);color:#fff; box-shadow:0 10px 22px -12px rgba(37,99,235,.9),0 1px 0 rgba(255,255,255,.3) inset} .pd-nav.on svg{color:#fff} .pd-me{margin-top:auto;display:flex;align-items:center;gap:8px;padding:10px 4px 0;border-top:1px solid rgba(10,20,48,.08);color:#9AA8C8} .pd-me>div{min-width:0;flex:1} .pd-me strong{display:block;font-size:11.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pd-me small{display:block;font-size:10.5px;color:#6B7CA6} .pd-main{min-width:0;min-height:0;display:flex;flex-direction:column} .pd-top{height:48px;flex:none;display:flex;align-items:center;gap:10px;padding:0 22px; background:rgba(245,248,255,.8);border-bottom:1px solid rgba(37,99,235,.13)} .pd-grow{flex:1} .pd-search{display:flex;align-items:center;gap:8px;height:32px;width:300px;padding:0 12px;border-radius:9px; border:1px solid rgba(10,20,48,.12);background:#fff;color:#9AA8C8;font-size:12px;box-shadow:0 1px 2px rgba(10,20,48,.06);white-space:nowrap;overflow:hidden} .pd-search.sm{width:auto;height:28px;font-size:11px} .pd-topbiz{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .pd-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font-weight:700;font-size:12px; white-space:nowrap;flex:none;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s} .pd-btn.primary{background:linear-gradient(180deg,#3B82F6,#1D4ED8);color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 10px 22px -12px rgba(37,99,235,.9)} .pd-btn.ghost{background:#fff;color:var(--ink);border:1px solid rgba(37,99,235,.14);box-shadow:0 1px 2px rgba(10,20,48,.06)} .pd-btn.sm{padding:5px 11px;font-size:11.5px} .pd-btn.press,.pd-save.press{transform:scale(.92);box-shadow:0 0 0 5px rgba(37,99,235,.22)} .pd-btn.hot{border-color:rgba(37,99,235,.45);color:var(--blue-dk);animation:pdring 1.9s ease-out infinite} .pd-btn.hot em{font-style:normal;font-size:9.5px;font-weight:800;padding:1px 6px;border-radius:999px;color:#fff; background:linear-gradient(135deg,#34D399,#059669)} @keyframes pdring{0%{box-shadow:0 0 0 0 rgba(37,99,235,.35)}70%,100%{box-shadow:0 0 0 9px rgba(37,99,235,0)}} .pd-ib{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;color:#6B7CA6;flex:none} .pd-ib.green{color:#059669;background:rgba(5,150,105,.1)} .pd-screen{flex:1;min-height:0;position:relative;overflow:hidden} .pd-page{position:absolute;inset:0;padding:18px 22px;display:flex;flex-direction:column;gap:14px} .pd-enter{opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)} .pd-enter.on{opacity:1;transform:none} .pd-skel{position:absolute;inset:18px 22px;display:flex;flex-direction:column;gap:12px} .pd-skel i{height:46px;border-radius:12px;background:linear-gradient(90deg,rgba(10,20,48,.05),rgba(10,20,48,.09),rgba(10,20,48,.05)); background-size:200% 100%;animation:pdsk 1.3s ease-in-out infinite} .pd-skel i:first-child{height:30px;width:42%} @keyframes pdsk{from{background-position:200% 0}to{background-position:-200% 0}} .pd-a{opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1)} .pd-a.on{opacity:1;transform:none} .pd-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex:none} .pd-h1{font-size:21px;font-weight:800;letter-spacing:-.04em;line-height:1.15} .pd-sub{color:#6B7CA6;font-weight:500;font-size:12.5px;margin-top:3px} .pd-actions{display:flex;align-items:center;gap:8px;flex:none} .pd-month{font-size:12.5px;white-space:nowrap} .pd-cards{display:grid;gap:12px;flex:none;min-width:0} .pd-cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))} .pd-cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))} .pd-cards.c2{grid-template-columns:repeat(2,minmax(0,1fr))} .pd-cards.side-r{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)} .pd-card,.pd-stat{background:rgba(255,255,255,.84);border:1px solid rgba(255,255,255,.9);border-radius:16px;min-width:0; box-shadow:0 2px 10px -4px rgba(10,20,48,.14),0 0 0 1px rgba(37,99,235,.13)} .pd-card{padding:14px} .pd-card.flush{padding:0;overflow:hidden} .pd-ch{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px} .pd-ch b{display:block;font-size:13.5px;font-weight:800} .pd-ch small{display:block;color:#6B7CA6;font-size:11.5px} .pd-stat{display:flex;gap:11px;align-items:center;padding:13px} .pd-stat>div{min-width:0} .pd-si{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none;box-shadow:0 10px 18px -10px rgba(10,20,48,.6)} .pd-si.blue{background:linear-gradient(135deg,#60A5FA,#2563EB)}.pd-si.green{background:linear-gradient(135deg,#34D399,#059669)} .pd-si.violet{background:linear-gradient(135deg,#A78BFA,#7C3AED)}.pd-si.pink{background:linear-gradient(135deg,#F472B6,#DB2777)} .pd-si.red{background:linear-gradient(135deg,#F87171,#DC2626)} .pd-sl{color:#6B7CA6;font-size:11px;font-weight:700;white-space:nowrap} .pd-sv{font-size:19px;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.25} .pd-ss{color:#6B7CA6;font-size:10.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pd-stack{display:flex;flex-direction:column;gap:12px;min-width:0} .pd-list{display:flex;flex-direction:column} .pd-li{display:flex;align-items:center;gap:10px;padding:7px 2px;border-bottom:1px solid rgba(10,20,48,.07);min-width:0} .pd-li:last-child{border-bottom:0} .pd-lm{flex:1;min-width:0} .pd-lm strong{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pd-lm small{display:block;color:#6B7CA6;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pd-list.two{display:grid;grid-template-columns:1fr 1fr;column-gap:26px} .pd-list.two .pd-li:nth-last-child(2){border-bottom:0} .pd-time{font-weight:800;font-size:11.5px;padding:5px 8px;border-radius:9px;background:#EEF3FF;color:#1D4ED8; min-width:68px;text-align:center;font-variant-numeric:tabular-nums;flex:none} .pd-time.v{background:#F3E8FF;color:#6D28D9} .pd-av{display:inline-grid;place-items:center;border-radius:50%;color:#fff;font-weight:800;flex:none;line-height:1; box-shadow:0 4px 10px -4px rgba(10,20,48,.4)} .pd-av.sq{width:30px;height:30px;border-radius:10px} .pd-av.sq.v{background:linear-gradient(135deg,#A78BFA,#7C3AED)} .pd-av.sq.c{background:linear-gradient(135deg,#67E8F9,#0891B2)} .pd-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:700;white-space:nowrap;flex:none} .pd-badge i{width:6px;height:6px;border-radius:50%;background:currentColor} .pd-badge.blue{background:rgba(37,99,235,.1);color:#1D4ED8}.pd-badge.violet{background:rgba(124,58,237,.1);color:#6D28D9} .pd-badge.green{background:rgba(5,150,105,.11);color:#047857}.pd-badge.red{background:rgba(220,38,38,.1);color:#B91C1C} .pd-badge.amber{background:rgba(217,119,6,.12);color:#B45309}.pd-badge.cyan{background:rgba(8,145,178,.1);color:#0E7490} .pd-setup{position:relative;overflow:hidden;color:#fff;border-radius:18px;padding:16px; background:linear-gradient(135deg,#1D4ED8,#2563EB 45%,#7C3AED);box-shadow:0 24px 48px -26px rgba(37,99,235,.9)} .pd-setup::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(circle at 85% 0%,rgba(255,255,255,.25),transparent 45%),radial-gradient(circle at 0% 100%,rgba(79,209,232,.35),transparent 40%)} .pd-setup>*{position:relative} .pd-st-t{display:flex;gap:7px;align-items:center;font-weight:800;font-size:14px} .pd-setup p{font-size:12px;opacity:.92;margin:6px 0 10px} .pd-setup small{font-size:10.5px;opacity:.85} .pd-prog2{height:7px;border-radius:999px;background:rgba(10,20,48,.07);overflow:hidden;margin:4px 0 6px} .pd-prog2.b{margin:5px 0 1px;height:6px} .pd-prog2 i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#60A5FA,#2563EB); transition:width 1.1s cubic-bezier(.2,.8,.2,1)} .go .pd-prog2 i,.pd-prog2.go i{width:var(--w)} .pd-setup .pd-prog2{background:rgba(255,255,255,.22)}.pd-setup .pd-prog2 i{background:#fff} /* agenda */ .pd-agbar{display:flex;align-items:center;gap:8px;flex:none;height:32px} .pd-h2{font-size:16px;font-weight:800;margin-right:4px;letter-spacing:-.02em;white-space:nowrap} .pd-seg{display:inline-flex;padding:3px;border-radius:999px;background:rgba(10,20,48,.05);gap:2px;font-size:11.5px;font-weight:700;color:#6B7CA6;flex:none} .pd-seg>*{padding:4px 11px;border-radius:999px;white-space:nowrap} .pd-seg b{background:#fff;color:var(--ink);box-shadow:0 2px 8px -4px rgba(10,20,48,.3)} .pd-seg.sm{font-size:10.5px}.pd-seg.sm>*{padding:3px 9px} .pd-cal{background:#fff;border-radius:16px;overflow:hidden;flex:none;position:relative; box-shadow:0 2px 10px -4px rgba(10,20,48,.14),0 0 0 1px rgba(37,99,235,.13)} .pd-calh{display:grid;grid-template-columns:48px repeat(var(--cols),minmax(0,1fr));height:40px;border-bottom:1px solid rgba(37,99,235,.13)} .pd-calh>div{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;font-weight:700;color:#27365F; border-left:1px solid rgba(10,20,48,.07);min-width:0;white-space:nowrap;overflow:hidden} .pd-calh>div:first-child{border-left:0} .pd-calg{display:grid;grid-template-columns:48px minmax(0,1fr);position:relative} .pd-times{position:relative;border-right:1px solid rgba(10,20,48,.07)} .pd-times span{position:absolute;right:7px;margin-top:3px;font-size:10px;font-weight:700;color:#9AA8C8;font-variant-numeric:tabular-nums} .pd-cols{position:relative;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr))} .pd-cols>i{position:absolute;left:0;right:0;border-top:1px solid rgba(10,20,48,.07);pointer-events:none} .pd-cols>i.half{border-top:1px dashed rgba(10,20,48,.045)} .pd-col{position:relative;border-left:1px solid rgba(10,20,48,.07)} .pd-col[data-col="0"]{border-left:0} .pd-wa-slot{position:absolute;inset:0;pointer-events:none} .pd-ev{position:absolute;left:3px;right:3px;border-radius:9px;padding:3px 7px;font-size:10.5px;line-height:1.3;overflow:hidden; border-left:3px solid;box-shadow:0 6px 14px -10px rgba(10,20,48,.5);z-index:2; opacity:0;transform:translateX(-10px) scale(.97);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.3,1.2)} .pd-ev.on{opacity:1;transform:none} .pd-ev.done.on{opacity:.68} .pd-ev b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pd-ev span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.8} .pd-ev.p0{background:#EFF6FF;border-left-color:#2563EB;color:#1E3A8A} .pd-ev.p1{background:#FDF2F8;border-left-color:#DB2777;color:#831843} .pd-ev.p2{background:#ECFDF5;border-left-color:#059669;color:#064E3B} .pd-ev.class{background:linear-gradient(135deg,#F5F3FF,#EDE9FE);border-left-color:#7C3AED;color:#4C1D95} .pd-ev.wa{background:linear-gradient(135deg,#F0FDF4,#DCFCE7);border-left-color:#16A34A;color:#14532D;z-index:3;padding-right:74px; box-shadow:0 0 0 2px rgba(34,197,94,.55),0 14px 26px -12px rgba(22,163,74,.7)} .pd-ev.wa em{position:absolute;right:5px;top:4px;display:inline-flex;align-items:center;gap:3px;font-style:normal;font-size:9px; font-weight:800;padding:1px 6px 1px 4px;border-radius:999px;background:#16A34A;color:#fff} .pd-ev.wa.pop{animation:pdpop .7s cubic-bezier(.2,.9,.3,1.3)} @keyframes pdpop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.06)}100%{transform:none}} .pd-now{position:absolute;left:0;right:0;height:2px;background:#DC2626;z-index:4;pointer-events:none} .pd-now::before{content:"";position:absolute;left:-4px;top:-4px;width:10px;height:10px;border-radius:50%;background:#DC2626} .pd-toasts{position:absolute;right:18px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:10;pointer-events:none} .pd-toast{display:flex;gap:8px;align-items:center;padding:10px 14px;border-radius:12px;background:#0F1B3D;color:#fff; font-weight:600;font-size:12px;box-shadow:0 30px 60px -24px rgba(10,20,48,.6); opacity:0;transform:translateY(12px) scale(.96);transition:opacity .3s ease,transform .35s cubic-bezier(.2,.9,.3,1.2)} .pd-toast.on{opacity:1;transform:none} .pd-toast svg{color:#34D399} /* WhatsApp */ .pd-conn{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;background:rgba(5,150,105,.1); color:#047857;font-weight:700;font-size:11.5px;white-space:nowrap} .pd-conn i{width:7px;height:7px;border-radius:50%;background:#10B981;box-shadow:0 0 0 3px rgba(16,185,129,.25)} .pd-chats{flex:1;min-height:0;display:grid;grid-template-columns:250px minmax(0,1fr);background:#fff;border-radius:16px;overflow:hidden; box-shadow:0 2px 10px -4px rgba(10,20,48,.14),0 0 0 1px rgba(37,99,235,.13)} .pd-clist{border-right:1px solid rgba(37,99,235,.13);display:flex;flex-direction:column;min-width:0;overflow:hidden} .pd-ctools{display:flex;flex-direction:column;gap:7px;padding:10px;border-bottom:1px solid rgba(10,20,48,.07)} .pd-crow{display:flex;gap:9px;align-items:center;padding:9px 11px;border-bottom:1px solid rgba(10,20,48,.06);min-width:0} .pd-crow.on{background:rgba(37,99,235,.09)} .pd-crow.unread strong{font-weight:800} .pd-crt{display:flex;gap:6px;align-items:center;min-width:0} .pd-crt strong{flex:1;min-width:0;font-size:12px} .pd-crt small{font-size:10px;color:#6B7CA6;flex:none} .pd-crow .pd-lm>small{font-size:11px} .pd-new{font-size:9.5px;font-weight:800;color:#fff;background:#2563EB;border-radius:999px;padding:1px 7px;flex:none} .pd-live{color:#2563EB!important;font-weight:600} .pd-pane{display:flex;flex-direction:column;min-width:0;min-height:0;background:#F7F9FD} .pd-convh{display:flex;align-items:center;gap:10px;padding:9px 14px;background:#fff;border-bottom:1px solid rgba(10,20,48,.07)} .pd-link{color:#2563EB;font-weight:700;font-size:11.5px;white-space:nowrap} .pd-msgs{flex:1;min-height:0;overflow:hidden;padding:12px 14px;display:flex;flex-direction:column;justify-content:flex-end;gap:7px} .pd-bub{max-width:72%;align-self:flex-start;padding:7px 10px 5px;border-radius:13px;background:#fff;border:1px solid rgba(10,20,48,.08); box-shadow:0 1px 2px rgba(10,20,48,.06);transform-origin:left bottom; opacity:0;transform:translateY(8px) scale(.97);transition:opacity .3s ease,transform .35s cubic-bezier(.2,.9,.3,1.2)} .pd-bub.on,.pd-pb.on{opacity:1;transform:none} .pd-bub p,.pd-pb p{margin:0;font-size:12px;line-height:1.42} .pd-bub time,.pd-pb time{display:block;text-align:right;font-size:9.5px;color:#6B7CA6;margin-top:2px} .pd-bub.bot{align-self:flex-end;background:#E8F0FF;border-color:#D4E2FF;transform-origin:right bottom} .pd-bub.staff{align-self:flex-end;background:#DCF8E6;border-color:#C3EDD3;transform-origin:right bottom} .pd-who{display:block;font-size:10px;font-weight:700;color:#2563EB} .pd-who.g{color:#047857} .pd-bub.photo{padding:5px;width:180px} .pd-bub.photo small{display:block;font-size:10px;color:#6B7CA6;padding:4px 4px 0} .pd-photo{display:grid;place-items:center;width:100%;height:96px;border-radius:9px;font-size:38px;line-height:1;overflow:hidden} .pd-save{display:inline-flex;align-items:center;gap:5px;margin:5px 4px 0;padding:4px 9px;border-radius:999px;background:rgba(37,99,235,.09); color:#1D4ED8;font-size:10.5px;font-weight:700;transition:transform .18s,background .2s,color .2s,box-shadow .18s} .pd-save.saved{background:rgba(5,150,105,.12);color:#047857} .pd-typing{align-self:flex-start;display:inline-flex;gap:4px;padding:10px 12px;border-radius:13px;background:#fff;border:1px solid rgba(10,20,48,.08)} .pd-typing.r{align-self:flex-end;background:#E8F0FF;border-color:#D4E2FF} .pd-typing i{width:6px;height:6px;border-radius:50%;background:#9AA8C8;animation:pdtype 1s infinite} .pd-typing i:nth-child(2){animation-delay:.15s}.pd-typing i:nth-child(3){animation-delay:.3s} @keyframes pdtype{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-3px);opacity:1}} .pd-compose{display:flex;gap:8px;align-items:center;padding:9px 12px;background:#fff;border-top:1px solid rgba(10,20,48,.07)} .pd-compose>span:first-child{flex:1;height:32px;border-radius:10px;border:1px solid rgba(10,20,48,.12);display:flex;align-items:center;padding:0 12px;color:#9AA8C8;font-size:12px} .pd-send{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#10B981,#059669);color:#fff;flex:none} /* clientes, servicios, equipo */ .pd-filters{display:flex;gap:10px;align-items:center;flex:none} .pd-importing{display:flex;gap:10px;align-items:center;flex:none;height:0;opacity:0;margin:-7px 0;padding:0 14px;overflow:hidden; border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(37,99,235,.18);transition:height .35s ease,opacity .3s,margin .35s} .pd-importing.on{height:50px;opacity:1;margin:0} .pd-importing strong{display:block;font-size:12px} .pd-importing.done strong{color:#047857} .pd-importing .pd-prog2 i{transition-duration:1.4s} .pd-xls{flex:none;font-size:9.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,#22C55E,#15803D);border-radius:7px;padding:6px} .pd-table{width:100%;border-collapse:collapse;font-size:12px} .pd-table th{text-align:left;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#9AA8C8; padding:10px 14px;border-bottom:1px solid rgba(37,99,235,.13);white-space:nowrap} .pd-table td{padding:8px 14px;border-bottom:1px solid rgba(10,20,48,.06);vertical-align:middle;white-space:nowrap} .pd-table tr:last-child td{border-bottom:0} .pd-table td small{display:block;color:#6B7CA6;font-size:10.5px} .pd-table tr.imp td{background:rgba(16,185,129,.07)} .pd-cp{display:flex;align-items:center;gap:9px;min-width:0} .pd-cp strong{display:block;font-size:12px} .pd-num{font-variant-numeric:tabular-nums} .pd-dot{width:9px;height:9px;border-radius:3px;flex:none} .pd-tog{display:inline-block;vertical-align:middle;width:30px;height:18px;border-radius:999px;background:#D5DDF0;position:relative;margin-right:6px} .pd-tog i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(10,20,48,.25)} .pd-tog.on{background:linear-gradient(180deg,#3B82F6,#1D4ED8)} .pd-tog.on i{transform:translateX(12px)} .pd-table td small.pd-togl{display:inline;font-size:11px;font-weight:600} .pd-tm{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:18px 12px 12px} .pd-tm strong{font-size:13px;margin-top:8px} .pd-tm small{font-size:11px;color:#6B7CA6} .pd-chips{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:8px 0} .pd-chips span{font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;background:rgba(37,99,235,.08);color:#1D4ED8} .pd-tmf{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-top:auto;padding-top:10px; border-top:1px solid rgba(10,20,48,.07);font-size:11px;color:#6B7CA6} .pd-tm.add{justify-content:center;color:#2563EB;background:rgba(255,255,255,.5);border:1.5px dashed rgba(37,99,235,.32);box-shadow:none} /* dinero, reportes */ .pd-bars{display:flex;align-items:stretch;gap:10px;height:150px;padding-top:4px} .pd-bars.wk{height:138px}.pd-cards.c2 .pd-bars{height:226px}.pd-bars.mini{height:44px;gap:5px} .pd-bc{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0} .pd-bt{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center} .pd-bt i{display:block;width:min(100%,34px);border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#BFDBFE,#93C5FD); transform:scaleY(0);transform-origin:bottom;transition:transform .8s cubic-bezier(.2,.8,.2,1)} .pd-bars.go .pd-bt i{transform:none} .pd-bc:nth-child(2) i{transition-delay:.06s}.pd-bc:nth-child(3) i{transition-delay:.12s}.pd-bc:nth-child(4) i{transition-delay:.18s} .pd-bc:nth-child(5) i{transition-delay:.24s}.pd-bc:nth-child(6) i{transition-delay:.3s}.pd-bc:nth-child(7) i{transition-delay:.36s} .pd-bt i.top{background:linear-gradient(180deg,#60A5FA,#1D4ED8);box-shadow:0 10px 20px -10px rgba(37,99,235,.9)} .pd-bt i.red{background:linear-gradient(180deg,#F87171,#DC2626)}.pd-bt i.redl{background:linear-gradient(180deg,#FECACA,#FCA5A5)} .pd-bv{font-size:10px;font-weight:800;color:#27365F;white-space:nowrap} .pd-bl{font-size:10px;font-weight:700;color:#6B7CA6;text-transform:capitalize} .pd-ring{position:relative;width:132px;height:132px;margin:6px auto 0} .pd-ring svg{width:100%;height:100%;transform:rotate(-90deg)} .pd-ring circle{fill:none;stroke-width:9} .pd-ring .bg{stroke:rgba(37,99,235,.1)} .pd-ring .fg{stroke:#2563EB;stroke-linecap:round;transition:stroke-dashoffset 1.3s cubic-bezier(.2,.8,.2,1)} .pd-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:24px;font-weight:800;letter-spacing:-.04em} .pd-big{display:flex;align-items:center;gap:8px;margin:8px 0 10px} .pd-cv{font-size:26px;font-weight:800;letter-spacing:-.04em} /* the phone: the client's own WhatsApp */ .pd-phone{display:none} .pd-ph{width:250px;height:510px;padding:9px;border-radius:40px;background:linear-gradient(145deg,#1E293B,#0B1220); box-shadow:0 50px 90px -40px rgba(10,20,48,.75),0 0 0 1px rgba(255,255,255,.08) inset} .pd-ph-scr{position:relative;height:100%;border-radius:32px;overflow:hidden;display:flex;flex-direction:column; background:#EFE7DE;font-size:11.5px;line-height:1.4;color:#111B21;text-align:left} .pd-ph-scr::before{content:"";position:absolute;top:8px;left:50%;width:74px;height:20px;margin-left:-37px;border-radius:999px;background:#0B1220;z-index:3} .pd-ph-st{height:34px;flex:none;display:flex;justify-content:space-between;align-items:center;padding:4px 22px 0;font-size:10.5px;font-weight:700;background:#F7F7F7} .pd-ph-st span{font-size:8.5px;letter-spacing:1px} .pd-ph-hd{display:flex;align-items:center;gap:7px;padding:4px 10px 8px;background:#F7F7F7;border-bottom:1px solid rgba(0,0,0,.06);flex:none} .pd-ph-hd>div{min-width:0} .pd-ph-back{color:#1D4ED8;display:grid} .pd-ph svg{display:block;flex:none} .pd-ph-hd b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pd-ph-hd small{display:block;font-size:10px;color:#667781} .pd-ph-msgs{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:10px 9px; background-image:radial-gradient(rgba(0,0,0,.04) 1px,transparent 1.6px);background-size:14px 14px} .pd-pb{max-width:84%;padding:6px 8px 4px;border-radius:10px;box-shadow:0 1px .5px rgba(0,0,0,.13); opacity:0;transform:translateY(8px) scale(.96);transition:opacity .3s ease,transform .35s cubic-bezier(.2,.9,.3,1.2)} .pd-pb.in{align-self:flex-start;background:#fff;border-top-left-radius:3px;transform-origin:left bottom} .pd-pb.out{align-self:flex-end;background:#D9FDD3;border-top-right-radius:3px;transform-origin:right bottom} .pd-pb p{font-size:11.5px} .pd-pb time{color:#667781;font-size:9px} .pd-pb time b{color:#53BDEB;font-weight:700} .pd-pb.photo{padding:3px;width:150px} .pd-pb .pd-photo{height:110px;font-size:42px;border-radius:8px} .pd-pb.photo time{padding:2px 4px 0} .pd-ph .pd-typing{background:#fff;border:0;box-shadow:0 1px .5px rgba(0,0,0,.13);padding:8px 10px;border-radius:10px} .pd-ph-in{display:flex;gap:7px;align-items:center;padding:7px 9px 16px;background:#F7F7F7;flex:none} .pd-ph-in span{flex:1;height:28px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.08);padding:0 12px;display:flex;align-items:center;color:#8696A0} .pd-ph-in i{width:28px;height:28px;border-radius:50%;background:#16A34A;color:#fff;display:grid;place-items:center} @media(min-width:1100px){ .pd-stage{padding-right:190px} .pd-phone{display:block;position:absolute;right:0;bottom:-38px;width:250px;z-index:2} .pd-cap{margin-top:56px} } /* phones: a phone-shaped panel (bottom tab bar, one column) instead of a shrunken desktop */ @media(max-width:760px){ .pd-fit{aspect-ratio:400/700;max-width:440px;margin:0 auto} .pd-sk::after{display:none} } .pd-win.m .pd-bar{height:36px;gap:8px;padding:0 10px} .pd-win.m .pd-dots i{width:9px;height:9px} .pd-win.m .pd-url{min-width:0;flex:1;font-size:11px;padding:0 10px} .pd-win.m .pd-app{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto} .pd-win.m .pd-side{grid-row:2;padding:6px 8px;border-right:0;border-top:1px solid rgba(37,99,235,.13);background:rgba(255,255,255,.96)} .pd-win.m .pd-main{grid-row:1} .pd-win.m .pd-navs{flex-direction:row;justify-content:space-between} .pd-win.m .pd-nav{width:44px;height:44px;padding:0;justify-content:center;border-radius:12px} .pd-win.m .pd-nav span{display:none} .pd-win.m .pd-top{padding:0 12px;gap:8px} .pd-win.m .pd-page{padding:14px;gap:12px} .pd-win.m .pd-head{flex-wrap:wrap;align-items:center} .pd-win.m .pd-h1{font-size:18px} .pd-win.m .pd-actions .pd-ib,.pd-win.m .pd-actions .pd-month,.pd-win.m .pd-actions .pd-seg, .pd-win.m .pd-filters .pd-seg,.pd-win.m .pd-stack,.pd-win.m .pd-clist,.pd-win.m .topsvc, .pd-win.m .pd-cards.c2>:nth-child(2){display:none} .pd-win.m .pd-actions .pd-btn.primary span{display:none} .pd-win.m .pd-search{width:100%} .pd-win.m .pd-cards.c4,.pd-win.m .pd-cards.team,.pd-win.m .pd-cards.rep{grid-template-columns:repeat(2,minmax(0,1fr))} .pd-win.m .pd-cards.c3:not(.rep),.pd-win.m .pd-cards.c2,.pd-win.m .pd-cards.side-r,.pd-win.m .pd-chats{grid-template-columns:minmax(0,1fr)} .pd-win.m .pd-cards.rep>:nth-child(3){grid-column:span 2} .pd-win.m .pd-stat{padding:10px;gap:9px} .pd-win.m .pd-si{width:32px;height:32px;border-radius:10px} .pd-win.m .pd-sv{font-size:16px} .pd-win.m .pd-ring{width:92px;height:92px} .pd-win.m .pd-cards.c2 .pd-bars{height:150px} .pd-win.m .pd-tm{padding:12px 10px 10px} .pd-win.m .pd-chips{margin:6px 0} .pd-win.m .pd-chips span:nth-child(n+3){display:none} @media(max-width:620px){.pd-types{gap:6px}.pd-types>span{width:100%;margin:0}.pd-type{padding:6px 11px;font-size:12.5px}} .pd-win.m .pd-ring b{font-size:19px} .pd-win.m .pd-h2{font-size:14px} .pd-win.m .pd-bub{max-width:84%} .pd-win.m .pd-table th:nth-child(n+3),.pd-win.m .pd-table td:nth-child(n+3){display:none} .pd-win.m .pd-table.svc th:nth-child(2),.pd-win.m .pd-table.svc td:nth-child(2){display:none} .pd-win.m .pd-table.svc th:nth-child(3),.pd-win.m .pd-table.svc td:nth-child(3){display:table-cell} .pd-win.m .pd-table td{white-space:normal} .pd-win.m .pd-toasts{left:14px;right:14px;bottom:12px} @media (prefers-reduced-motion:reduce){ .pd *,.pd *::before,.pd *::after{transition:none!important;animation:none!important} } /* ---------- WhatsApp: floating button + the second button in the blue boxes (2026-10-07) ---------- */ .wa-fab{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:9px;height:56px;padding:0 20px 0 16px; border-radius:999px;background:#25D366;color:#fff;font-weight:800;font-size:15.5px;letter-spacing:-.01em; box-shadow:0 14px 34px -10px rgba(10,80,40,.55),0 2px 6px rgba(10,80,40,.25);transition:transform .15s,box-shadow .15s} .wa-fab:hover{transform:translateY(-2px);box-shadow:0 18px 40px -10px rgba(10,80,40,.6),0 2px 6px rgba(10,80,40,.25)} .wa-fab:focus-visible{outline:3px solid rgba(255,255,255,.9);outline-offset:3px} @media(max-width:620px){.wa-fab{width:56px;padding:0;justify-content:center;right:14px;bottom:14px}.wa-fab span{display:none}} .cta-band .cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .cta-band .btn.wa{background:#25D366;color:#fff;display:inline-flex;align-items:center;gap:9px;box-shadow:0 16px 38px -12px rgba(0,60,20,.5)} .cta-band .btn.wa svg{width:22px;height:22px} @media print{.wa-fab{display:none}} /* ---------- NUBE: the AI assistant in the hero + its chat (2026-10-12) -------------------------------- The cloud is the panel's own Nube (citanube-panel src/ui/Nube.jsx CloudArt). Every class is prefixed nb-. Desktop: the chat is a card in the bottom-right corner; phone (<=620px): a bottom sheet over a dimmed page. */ .nb-hero{position:relative;display:grid;justify-items:center;align-content:center;gap:18px; min-height:clamp(340px,40vw,500px);padding:10px 0} .nb-glow{position:absolute;inset:4% 2% 10%;border-radius:50%;pointer-events:none; background:radial-gradient(ellipse at 50% 52%,rgba(96,165,250,.55),rgba(124,124,240,.26) 46%,transparent 72%); filter:blur(34px)} .nb-face{position:relative;display:flex;flex-direction:column;align-items:center;cursor:pointer; border-radius:28px;-webkit-tap-highlight-color:transparent} .nb-face:focus-visible{outline:3px solid rgba(37,99,235,.45);outline-offset:8px} .nb-cloud{width:clamp(230px,30vw,370px);height:auto;overflow:visible;margin-top:10px; filter:drop-shadow(0 30px 34px rgba(29,78,216,.3));animation:nb-float 5.4s ease-in-out infinite; transition:scale .3s cubic-bezier(.2,.8,.2,1)} .nb-face:hover .nb-cloud{scale:1.035} .nb-shadow{width:46%;height:16px;margin-top:4px;border-radius:50%; background:radial-gradient(closest-side,rgba(29,78,216,.28),transparent);animation:nb-shadow 5.4s ease-in-out infinite} .nb-say{position:relative;z-index:2;max-width:330px;padding:14px 19px;border-radius:22px; background:var(--sf-solid);border:1px solid var(--line);box-shadow:0 22px 44px -22px rgba(10,20,48,.45); font-size:clamp(15.5px,1.4vw,17.5px);font-weight:600;line-height:1.4;color:var(--ink);text-align:center; animation:nb-pop .6s cubic-bezier(.2,.9,.3,1.2) .35s both} .nb-say b{color:var(--blue);font-weight:800} .nb-say::after{content:"";position:absolute;left:50%;bottom:-8px;width:16px;height:16px;margin-left:-8px;background:var(--sf-solid); border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg);border-bottom-right-radius:4px} .nb-ask{position:relative;z-index:2} .nb-ask .nb-ic svg{width:20px;height:20px} .nb-eyes{transform-box:fill-box;transform-origin:center;animation:nb-blink 6s infinite} .nb-spark{transform-box:fill-box;transform-origin:center;animation:nb-twinkle 3.4s ease-in-out infinite} @keyframes nb-float{50%{transform:translateY(-14px)}} @keyframes nb-shadow{50%{transform:scaleX(.82);opacity:.6}} @keyframes nb-blink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.12)}} @keyframes nb-twinkle{50%{opacity:.5;transform:scale(.78) rotate(18deg)}} @keyframes nb-pop{from{opacity:0;transform:translateY(10px) scale(.92)}} @media(max-width:620px){ .nb-hero{min-height:0;gap:14px;padding:0 0 6px} .nb-cloud{width:min(62vw,250px)} .nb-say{font-size:15px;padding:12px 16px} } /* the chat */ .nb-scrim{position:fixed;inset:0;z-index:89;background:rgba(10,20,48,.38);display:none} .nb-panel{position:fixed;z-index:90;right:20px;bottom:20px;width:min(400px,calc(100vw - 40px)); height:min(640px,calc(100vh - 40px));height:min(640px,calc(100dvh - 40px));display:flex;flex-direction:column; background:var(--sf-solid);border:1px solid var(--line);border-radius:24px;overflow:hidden; box-shadow:0 44px 90px -30px rgba(10,20,48,.55),0 2px 10px rgba(10,20,48,.08); transform-origin:bottom right;animation:nb-in .26s cubic-bezier(.2,.9,.3,1.1)} .nb-panel[hidden],.nb-scrim[hidden]{display:none!important} @keyframes nb-in{from{opacity:0;transform:translateY(14px) scale(.96)}} @keyframes nb-up{from{transform:translateY(100%)}} body.nb-open .wa-fab{display:none} @media(max-width:620px){ .nb-scrim{display:block} .nb-panel{left:0;right:0;bottom:0;width:100%;height:88vh;height:88dvh;border-radius:22px 22px 0 0; border-bottom:0;animation:nb-up .3s cubic-bezier(.2,.9,.3,1)} body.nb-open{overflow:hidden} } .nb-head{display:flex;align-items:center;gap:10px;padding:12px 10px 12px 14px;border-bottom:1px solid var(--line); background:var(--nb-head)} .nb-head-art{width:42px;height:42px;border-radius:14px;background:var(--sf-solid);display:grid;place-items:center;flex:none; box-shadow:var(--sh-sm),0 0 0 1px var(--line)} .nb-head-art svg{width:34px;height:auto;overflow:visible} .nb-head-t{flex:1;min-width:0} .nb-head-t strong{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em} .nb-head-t small{display:block;color:var(--muted);font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .nb-icon-btn{width:40px;height:40px;flex:none;display:grid;place-items:center;border:0;border-radius:12px;background:none; color:var(--ink-2);cursor:pointer} .nb-icon-btn:hover{background:rgba(37,99,235,.08);color:var(--blue)} .nb-icon-btn svg{width:20px;height:20px} .nb-icon-btn:focus-visible,.nb-chip:focus-visible,.nb-send:focus-visible,.nb-link:focus-visible,.nb-foot a:focus-visible{ outline:3px solid rgba(37,99,235,.4);outline-offset:2px} .nb-body{position:relative;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px;display:flex;flex-direction:column; gap:10px;background:var(--sf-3)} .nb-hello{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:6px 8px 4px} .nb-hello-art svg{width:84px;height:auto;overflow:visible;animation:nb-float 5.4s ease-in-out infinite} .nb-hello-t{font-weight:800;font-size:17px;letter-spacing:-.02em;margin-top:4px} .nb-hello-s{color:var(--muted);font-size:14px;font-weight:500;max-width:300px} .nb-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:4px 0} .nb-chip{border:1px solid rgba(37,99,235,.28);background:var(--sf-solid);color:var(--accent-ink);border-radius:999px;padding:9px 14px; font-size:13.5px;font-weight:700;cursor:pointer;line-height:1.3;text-align:left;transition:background .15s,border-color .15s} .nb-chip:hover{background:rgba(37,99,235,.07);border-color:rgba(37,99,235,.5)} .nb-types-t{width:100%;text-align:center;font-weight:700;font-size:14px;color:var(--ink-2)} .nb-msg{display:flex} .nb-msg.me{justify-content:flex-end} .nb-bot{display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:92%;min-width:0} .nb-bubble{max-width:100%;padding:10px 13px;border-radius:17px;font-size:14.5px;line-height:1.5;overflow-wrap:anywhere} .nb-msg.me .nb-bubble{max-width:84%;white-space:pre-wrap;color:#fff;background:linear-gradient(180deg,#3B82F6,#1D4ED8); border-bottom-right-radius:6px;box-shadow:0 8px 18px -12px rgba(37,99,235,.9)} .nb-msg.bot .nb-bubble{background:var(--sf-solid);border:1px solid rgba(37,99,235,.12);border-bottom-left-radius:6px;box-shadow:var(--sh-sm)} .nb-bubble.nb-err{background:var(--warn-bg);border-color:rgba(217,119,6,.3)} .nb-text p+p,.nb-text p+ul,.nb-text p+ol,.nb-text ul+p,.nb-text ol+p{margin-top:7px} .nb-text ul,.nb-text ol{padding-left:19px} .nb-text li+li{margin-top:2px} .nb-text strong{font-weight:800} .nb-links{display:flex;flex-wrap:wrap;gap:6px} .nb-link{display:inline-flex;align-items:center;min-height:36px;padding:7px 13px;border-radius:999px; border:1px solid rgba(37,99,235,.3);background:rgba(37,99,235,.06);color:var(--accent-ink);font-size:13.5px;font-weight:700} .nb-link:hover{background:rgba(37,99,235,.13)} .nb-link[href^="https://wa.me/"]{border-color:rgba(22,163,74,.45);background:rgba(37,211,102,.1);color:var(--wa-ink)} .nb-typing{display:inline-flex;align-items:center;gap:5px;padding:13px 14px} .nb-typing i{width:7px;height:7px;border-radius:50%;background:var(--blue-lt);animation:nb-dot 1.2s ease-in-out infinite} .nb-typing i:nth-child(2){animation-delay:.15s} .nb-typing i:nth-child(3){animation-delay:.3s} @keyframes nb-dot{0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-4px);opacity:1}} .nb-compose{position:relative;display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--line); background:var(--sf-solid)} .nb-input{flex:1;min-width:0;resize:none;border:1px solid rgba(37,99,235,.22);border-radius:16px;padding:10px 13px; font-size:16px;line-height:1.4;max-height:120px;overflow-y:hidden;background:var(--sf-3);outline:none} .nb-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15);background:var(--sf-solid)} .nb-send{width:44px;height:44px;flex:none;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff; background:linear-gradient(180deg,#3B82F6,#1D4ED8);box-shadow:0 10px 20px -10px rgba(37,99,235,.9)} .nb-send svg{width:20px;height:20px} .nb-send:disabled{opacity:.45;cursor:not-allowed;box-shadow:none} .nb-count{position:absolute;right:70px;bottom:2px;font-size:11px;color:var(--muted)} .nb-foot{padding:7px 14px 10px;font-size:11.5px;line-height:1.4;color:var(--muted);background:var(--sf-solid)} .nb-foot a{color:var(--blue);font-weight:700;text-decoration:underline} @media(max-width:620px){.nb-foot{padding-bottom:max(10px,env(safe-area-inset-bottom))}} .nb-sr,.nb-trap{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%); white-space:nowrap;border:0;padding:0;margin:-1px} @media (prefers-reduced-motion:reduce){ .nb-cloud,.nb-shadow,.nb-eyes,.nb-spark,.nb-say,.nb-hello-art svg,.nb-panel,.nb-typing i{animation:none!important} } @media print{.nb-panel,.nb-scrim{display:none!important}} /* the floating launcher, on every page (2026-10-12): Nube's cloud in a round button stacked ABOVE the WhatsApp button, same right edge, so neither ever covers the other (desktop: wa-fab 56px at bottom 18; phone: at bottom 14). On the home page it starts .is-off while the hero's big Nube is on screen; app.js shows it once the hero is gone. */ .nb-fab{position:fixed;right:16px;bottom:86px;z-index:60;width:60px;height:60px; transition:opacity .25s ease,transform .3s cubic-bezier(.2,.9,.3,1.15),visibility 0s} .nb-fab.is-off{opacity:0;visibility:hidden;transform:translateY(14px) scale(.8);pointer-events:none; transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s} .nb-fab-btn{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--sf-solid);cursor:pointer; box-shadow:0 14px 32px -12px rgba(29,78,216,.6),0 2px 6px rgba(10,20,48,.14),0 0 0 1px rgba(37,99,235,.16); -webkit-tap-highlight-color:transparent;transition:transform .15s,box-shadow .15s} .nb-fab-btn:hover{transform:translateY(-2px);box-shadow:0 18px 38px -12px rgba(29,78,216,.7),0 2px 6px rgba(10,20,48,.16),0 0 0 1px rgba(37,99,235,.3)} .nb-fab-btn:focus-visible{outline:3px solid rgba(37,99,235,.5);outline-offset:3px} .nb-fab-cloud{width:46px;height:auto;overflow:visible;margin-top:3px} .nb-fab-say{position:absolute;right:calc(100% + 12px);bottom:8px;display:flex;align-items:flex-start;gap:2px; width:max-content;max-width:min(250px,calc(100vw - 110px));padding:4px 4px 4px 0;border-radius:18px;background:var(--sf-solid); border:1px solid var(--line);box-shadow:0 18px 40px -18px rgba(10,20,48,.5);animation:nb-pop .45s cubic-bezier(.2,.9,.3,1.2) both} .nb-fab-say[hidden]{display:none} .nb-fab-say::after{content:"";position:absolute;right:-7px;bottom:16px;width:12px;height:12px;background:var(--sf-solid); border-top:1px solid var(--line);border-right:1px solid var(--line);transform:rotate(45deg);border-top-right-radius:3px} .nb-fab-hi{flex:1;min-width:0;border:0;background:none;padding:8px 2px 8px 14px;text-align:left;cursor:pointer; font:inherit;font-size:14px;font-weight:600;line-height:1.35;color:var(--ink)} .nb-fab-hi b{color:var(--blue);font-weight:800} .nb-fab-x{flex:none;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:10px;background:none; color:var(--muted);cursor:pointer} .nb-fab-x:hover{background:rgba(37,99,235,.08);color:var(--blue)} .nb-fab-x svg{width:16px;height:16px} .nb-fab-hi:focus-visible,.nb-fab-x:focus-visible{outline:3px solid rgba(37,99,235,.4);outline-offset:1px;border-radius:10px} body.nb-open .nb-fab{display:none} @media(max-width:620px){ .nb-fab{right:14px;bottom:80px;width:56px;height:56px} .nb-fab-btn{width:56px;height:56px} .nb-fab-cloud{width:43px} .nb-fab-hi{font-size:13.5px} } @media (prefers-reduced-motion:reduce){ .nb-fab,.nb-fab.is-off,.nb-fab-btn{transition:none!important} .nb-fab.is-off{transform:none} .nb-fab-say{animation:none!important} } @media print{.nb-fab{display:none!important}} /* ============================================================================================== THEME TOGGLE + DARK MODE (2026-10-12, owner: «un darkmode para citanube en todos los niveles; default sigue siendo light»). Light is the default and the only theme a first visit ever sees: dark is applied only when the visitor presses the sun/moon button (saved as localStorage cn_theme; the inline script at the top of sets before the first paint, so there is no flash). It does NOT follow prefers-color-scheme. Almost everything is the light tokens redefined; the few rules below them are the places a token cannot reach. All of it sits inside @media screen, so printing always comes out light. The product pictures stay light on purpose: the animated panel demo is a copy of the real panel (which has no dark theme) and the module mockups are little screenshots, so on dark they keep their light tokens and get a frame. ============================================================================================== */ .theme-tg{width:40px;height:40px;flex:none;display:grid;place-items:center;padding:0;border-radius:12px;cursor:pointer; border:1px solid var(--line);background:rgba(var(--sf),.7);color:var(--ink-2); transition:color .2s,border-color .2s,background .2s} .theme-tg:hover{color:var(--blue);border-color:rgba(37,99,235,.32)} .theme-tg svg,.theme-row svg{width:19px;height:19px;flex:none} .theme-tg:focus-visible,.theme-row:focus-visible{outline:3px solid rgba(37,99,235,.45);outline-offset:2px} .i-sun,.t-light{display:none} :root[data-theme="dark"] .i-sun,:root[data-theme="dark"] .t-light{display:inline} :root[data-theme="dark"] svg.i-sun{display:block} :root[data-theme="dark"] .i-moon,:root[data-theme="dark"] .t-dark{display:none} .theme-row{display:none} /* phones: the header has no room for a fourth control, so the switch is the last row of the menu */ @media(max-width:620px){ .theme-tg{display:none} .nav nav .theme-row{display:flex;align-items:center;gap:11px;width:100%;margin-top:4px;padding:13px 14px;border:0; border-top:1px solid var(--line);border-radius:0 0 12px 12px;background:none;font:inherit;font-weight:600; color:var(--ink-2);cursor:pointer;text-align:left} .nav nav .theme-row:active{background:rgba(37,99,235,.08);color:var(--blue)} } @media print{.theme-tg,.theme-row{display:none!important}} @media screen{ :root[data-theme="dark"]{ color-scheme:dark; --ink:#E8EEFA; --ink-2:#C4CFE6; --muted:#97A7CB; --faint:#7D8EB5; --blue:#60A5FA; --blue-lt:#93C5FD; --blue-dk:#3B82F6; --violet:#8B8BF5; --bg:#0B1324; --card:rgba(19,30,56,.78); --line:rgba(148,178,240,.16); --sh-sm:0 2px 10px -4px rgba(0,0,0,.5); --sh:0 24px 54px -26px rgba(0,0,0,.65); --sh-lg:0 54px 100px -44px rgba(0,0,0,.75); --sf:19,30,56; --tn:12,20,38; --sf-solid:#131E38; --sf-3:#0E172C; --ok-ink:#6EE7B7; --warn-ink:#FCD34D; --pink-ink:#F9A8D4; --accent-ink:#93C5FD; --wa-ink:#4ADE80; --warn-bg:rgba(251,191,36,.1); --mock-base:linear-gradient(160deg,#17264D,#0E1934); --plan-hot:linear-gradient(170deg,rgba(29,45,86,.96),rgba(37,99,235,.2)); --nb-head:linear-gradient(135deg,#152242,#1A2C58); } :root[data-theme="dark"] ::selection{background:#2563EB;color:#fff} /* atmosphere: the same orbs and grid, dimmed so they glow instead of washing the page out */ :root[data-theme="dark"] .orb{opacity:.42} :root[data-theme="dark"] .orb.d{opacity:.3} :root[data-theme="dark"] .mesh{opacity:.28; background-image:linear-gradient(rgba(147,197,253,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(147,197,253,.07) 1px,transparent 1px)} /* nav + buttons */ :root[data-theme="dark"] .brand svg{filter:drop-shadow(0 6px 12px rgba(59,130,246,.45))} :root[data-theme="dark"] .btn{box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 16px 34px -14px rgba(37,99,235,.75)} :root[data-theme="dark"] .btn.ghost{box-shadow:var(--sh-sm)} :root[data-theme="dark"] .btn.ghost:hover,:root[data-theme="dark"] .vert:hover{border-color:rgba(147,197,253,.4)} @media(max-width:900px){:root[data-theme="dark"] .nav nav a:active,:root[data-theme="dark"] .nav nav a.on{background:rgba(96,165,250,.12)}} /* cards and boxes */ :root[data-theme="dark"] .ask::before{opacity:.38} :root[data-theme="dark"] .askbox textarea::placeholder{color:var(--faint)} :root[data-theme="dark"] .askbox textarea:focus{box-shadow:0 0 0 4px rgba(96,165,250,.25)} :root[data-theme="dark"] .mod{border-color:var(--line)} :root[data-theme="dark"] .feat .ic{background:linear-gradient(140deg,rgba(96,165,250,.22),rgba(37,99,235,.18)); box-shadow:0 10px 22px -12px rgba(37,99,235,.8),0 0 0 1px rgba(147,197,253,.14) inset} :root[data-theme="dark"] .dcard .bar{background:rgba(147,197,253,.14)} :root[data-theme="dark"] .dcard:not([data-p="5"]):hover,:root[data-theme="dark"] .dcard:not([data-p="5"]):focus-visible{ box-shadow:0 22px 44px -18px rgba(0,0,0,.7),0 0 0 1px rgba(147,197,253,.25)} :root[data-theme="dark"] .scenario{background:linear-gradient(160deg,rgba(59,130,246,.16),rgba(124,124,240,.12)); border-color:rgba(96,165,250,.28)} :root[data-theme="dark"] .pains li::before{background:rgba(244,114,182,.2)} :root[data-theme="dark"] .plan.hot{border-color:rgba(96,165,250,.5)} :root[data-theme="dark"] .howbook span{background:rgba(96,165,250,.14)} :root[data-theme="dark"] .answer .conf{background:rgba(52,211,153,.14)} :root[data-theme="dark"] .answer .conf.low{background:rgba(251,191,36,.14)} /* the blue band: a little deeper, and its white button keeps its dark-blue words */ :root[data-theme="dark"] .cta-band{background:linear-gradient(135deg,#1E3A8A,#1D4ED8 46%,#4F46E5); box-shadow:var(--sh-lg),0 0 0 1px rgba(147,197,253,.18)} :root[data-theme="dark"] .cta-band .btn:not(.wa){color:#1D4ED8} /* module mockups: a dark stage with its colour glows, the little light screen framed on it */ :root[data-theme="dark"] .mock{box-shadow:inset 0 0 0 1px rgba(147,197,253,.12)} :root[data-theme="dark"] .mock-screen{border-color:rgba(255,255,255,.14); box-shadow:0 30px 60px -26px rgba(0,0,0,.8),0 0 0 1px rgba(147,197,253,.3)} :root[data-theme="dark"] .mock-chip{box-shadow:0 18px 30px -14px rgba(0,0,0,.7),0 0 0 1px rgba(147,197,253,.25)} /* the animated panel demo stays the light panel it copies: light tokens inside, a frame and a glow outside */ :root[data-theme="dark"] .pd-stage{--ink:#0A1430;--ink-2:#27365F;--muted:#6B7CA6;--faint:#9AA8C8; --blue:#2563EB;--blue-lt:#60A5FA;--blue-dk:#1D4ED8;--line:rgba(37,99,235,.14);color-scheme:light} :root[data-theme="dark"] .pd-win,:root[data-theme="dark"] .pd-sk{ box-shadow:0 60px 120px -44px rgba(0,0,0,.85),0 0 90px -30px rgba(59,130,246,.45),0 0 0 1px rgba(147,197,253,.32)} :root[data-theme="dark"] .pd-ph{box-shadow:0 50px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(147,197,253,.22), 0 0 0 1px rgba(255,255,255,.08) inset} :root[data-theme="dark"] .pd-type:hover{border-color:rgba(147,197,253,.4)} /* Nube (hero, chat, launcher) */ :root[data-theme="dark"] .nb-glow{opacity:.7} :root[data-theme="dark"] .nb-cloud{filter:drop-shadow(0 30px 40px rgba(37,99,235,.38))} :root[data-theme="dark"] .nb-shadow{background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent)} :root[data-theme="dark"] .nb-say{box-shadow:0 22px 44px -22px rgba(0,0,0,.8)} :root[data-theme="dark"] .nb-scrim{background:rgba(2,6,16,.6)} :root[data-theme="dark"] .nb-panel{box-shadow:0 44px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(147,197,253,.12)} :root[data-theme="dark"] .nb-head-art{background:#0E172C} :root[data-theme="dark"] .nb-msg.bot .nb-bubble{border-color:var(--line)} :root[data-theme="dark"] .nb-bubble.nb-err{border-color:rgba(251,191,36,.3)} :root[data-theme="dark"] .nb-chip{border-color:rgba(147,197,253,.3)} :root[data-theme="dark"] .nb-chip:hover,:root[data-theme="dark"] .nb-link:hover{background:rgba(96,165,250,.14)} :root[data-theme="dark"] .nb-link{border-color:rgba(147,197,253,.3);background:rgba(96,165,250,.08)} :root[data-theme="dark"] .nb-input{border-color:rgba(147,197,253,.22)} :root[data-theme="dark"] .nb-input::placeholder{color:var(--faint)} :root[data-theme="dark"] .nb-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(96,165,250,.22)} :root[data-theme="dark"] .nb-fab-btn{box-shadow:0 14px 32px -12px rgba(0,0,0,.8),0 0 22px -6px rgba(59,130,246,.45), 0 0 0 1px rgba(147,197,253,.28)} :root[data-theme="dark"] .nb-fab-say{box-shadow:0 18px 40px -18px rgba(0,0,0,.85)} :root[data-theme="dark"] .wa-fab{box-shadow:0 14px 34px -10px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.4)} }