
:root{
  color-scheme: light;
  --noche:#0B1220; --panel:#111C33; --line-dark:#1C2840;
  --cian:#22D3EE; --cian-profundo:#0891B2; --cian-texto:#0E7490; --cian-hover:#155E75;
  --white:#FFFFFF; --nube:#F4F6F9; --tint:#E6F9FC;
  --border:#DDE3EA; --border-strong:#64748B;
  --ink:#0B1220; --muted:#4A5568; --muted-dark:#C9D3E1;
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px;
  --shadow:0 1px 2px rgba(11,18,32,.06), 0 8px 24px rgba(11,18,32,.08);
  --maxw:1160px; --gutter:16px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--white); color:var(--ink); font-family:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,svg{display:block; max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.01em}
p{margin:0}
button{font:inherit; cursor:pointer}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}
@media (min-width:768px){:root{--gutter:32px}}

/* bilingual */
html[data-lang="es"] .en{display:none !important}
html[data-lang="en"] .es{display:none !important}

.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:100; background:#fff; padding:8px 12px; border-radius:var(--r-sm)}

/* icons */
.ic{width:22px; height:22px; flex:none}
.ic-sm{width:18px; height:18px; flex:none}
.ic-xs{width:14px; height:14px; flex:none}
.accent{color:var(--cian-texto)}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--r-md); padding:12px 20px; font-weight:600; font-size:15px; text-decoration:none; border:1px solid transparent; white-space:nowrap; transition:background .15s, border-color .15s, color .15s}
.btn-primary{background:var(--cian-texto); color:#fff}
.btn-primary:hover{background:var(--cian-hover)}
.btn-outline{background:#fff; color:var(--ink); border-color:var(--border-strong)}
.btn-outline:hover{border-color:var(--ink)}
.btn-sm{padding:9px 16px; font-size:14px}
.btn-lg{padding:15px 26px; font-size:16px}
.link-arrow{display:inline-flex; align-items:center; gap:6px; font-weight:500; text-decoration:none; color:var(--ink)}
.link-arrow:hover{color:var(--cian-texto)}

/* header */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--border)}
.head-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; height:68px}
.brand .logo{height:26px; width:auto}
@media (max-width:380px){.brand .logo{height:22px}}
.main-nav{display:none; gap:26px}
.main-nav a{text-decoration:none; font-size:14.5px; font-weight:500; color:var(--muted)}
.main-nav a:hover{color:var(--ink)}
.head-actions{display:flex; align-items:center; gap:10px}
.lang{display:flex; border:1px solid var(--border); border-radius:999px; padding:2px}
.lang button{border:0; background:none; min-width:40px; min-height:40px; padding:0 10px; border-radius:999px; font-size:13px; font-weight:600; color:var(--muted)}
.lang button[aria-pressed="true"]{background:var(--noche); color:#fff}
.head-cta .cta-short{display:none}
.menu-btn{display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--border); border-radius:var(--r-md); background:#fff; color:var(--ink)}
.menu-btn svg{width:20px; height:20px}
.mobile-nav{display:none; flex-direction:column; padding:8px var(--gutter) 16px; border-top:1px solid var(--border); background:#fff}
.mobile-nav.open{display:flex}
.mobile-nav a:not(.btn){padding:12px 0; text-decoration:none; font-weight:500; border-bottom:1px solid var(--border)}
.mobile-nav .btn{margin-top:14px}
@media (max-width:639px){.head-actions{gap:8px} .brand .logo{height:24px} .lang button[aria-pressed="true"]{display:none} .head-cta{padding:9px 14px} .head-cta .cta-long{display:none} .head-cta .cta-short{display:inline}}
@media (min-width:1080px){.main-nav{display:flex} .menu-btn{display:none} .mobile-nav{display:none !important}}

/* eyebrow + section heads */
.eyebrow{display:flex; align-items:center; gap:10px; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--cian-texto); margin-bottom:12px}
.eyebrow::before{content:""; width:28px; height:1.5px; background:currentColor; flex:none}
.eyebrow.on-dark{color:var(--cian)}
.sec{padding:72px 0}
@media (min-width:900px){.sec{padding:104px 0}}
.sec.alt{background:var(--nube)}
.sec-head{margin-bottom:40px}
.sec-head h2,.faq-grid h2,.closing h2{font-size:clamp(30px,4.6vw,46px); line-height:1.08; font-weight:600}

/* hero */
.hero{padding:56px 0 72px}
@media (min-width:900px){.hero{padding:88px 0 104px}}
.hero-grid{display:grid; gap:44px; align-items:center}
@media (min-width:960px){.hero-grid{grid-template-columns:1.1fr .9fr; gap:56px}}
.hero .eyebrow{margin-bottom:18px}
.hero h1{font-size:clamp(34px,5.6vw,58px); line-height:1.03; font-weight:600; letter-spacing:-.025em}
.hero h1 em{font-style:normal; color:var(--cian-texto)}
.hero .lead{margin-top:22px; max-width:520px; font-size:17px; color:var(--muted)}
.hero-ctas{display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:30px}

.flow-card{background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow); padding:26px 24px}
.flow-title{display:flex; align-items:center; gap:10px; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:18px}
.flow-title::before{content:""; width:28px; height:1.5px; background:var(--cian-texto)}
.flow{list-style:none; margin:0; padding:0; position:relative}
.flow-step{display:flex; gap:14px; padding:11px 0; position:relative}
.flow-step:not(:last-child)::after{content:""; position:absolute; left:10px; top:36px; bottom:-8px; width:1.5px; background:var(--border)}
.flow-dot{width:22px; height:22px; border-radius:50%; border:1.5px solid var(--border); background:#fff; color:transparent; display:flex; align-items:center; justify-content:center; flex:none; transition:all .35s; position:relative; z-index:1}
.flow-dot svg{width:13px; height:13px}
.flow-txt{display:flex; flex-direction:column}
.flow-txt strong{font-size:15px; font-weight:600; color:var(--ink); transition:color .35s}
.flow-txt small{font-size:13.5px; color:var(--muted)}
/* states (JS cycles them). Without JS everything shows as done. */
.flow-step .flow-dot{background:var(--cian-profundo); border-color:var(--cian-profundo); color:#fff}
.js .flow-step .flow-dot{background:#fff; border-color:var(--border); color:transparent}
.js .flow-step .flow-txt{opacity:.45; transition:opacity .35s}
.js .flow-step.done .flow-dot{background:var(--cian-profundo); border-color:var(--cian-profundo); color:#fff}
.js .flow-step.done .flow-txt{opacity:1}
.js .flow-step.active .flow-txt{opacity:1}
.js .flow-step.active .flow-dot{border-color:var(--cian-profundo); box-shadow:0 0 0 5px rgba(8,145,178,.14)}
.js .flow-step.active .flow-dot svg{display:none}
.js .flow-step.active .flow-dot::after{content:""; position:absolute; top:50%; left:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:var(--cian-profundo)}

/* what we do */
.what-row{display:grid; grid-template-columns:1fr; background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden}
.what-card{padding:26px 24px}
.what-card + .what-card{border-top:1px solid var(--border)}
.what-card h3{font-size:17px; margin:16px 0 8px}
.what-card p{font-size:15px; color:var(--muted)}
@media (min-width:640px){.what-row{grid-template-columns:1fr 1fr} .what-card + .what-card{border-top:0} .what-card:nth-child(n+3){border-top:1px solid var(--border)} .what-card:nth-child(2n){border-left:1px solid var(--border)}}
@media (min-width:1000px){.what-row{grid-template-columns:repeat(4,1fr)} .what-card:nth-child(n+3){border-top:0} .what-card + .what-card{border-left:1px solid var(--border)}}


.what-grid{display:grid; grid-template-columns:1fr; gap:20px}
.wblock{background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:32px 28px}
.wblock h3{font-size:20px; line-height:1.25; margin:16px 0 22px; font-weight:600}
.wblock .wn{display:block; font-size:12px; letter-spacing:.16em; font-weight:600; color:var(--cian-texto); margin-bottom:6px}
.wlist{list-style:none; margin:0; padding:0}
.wlist li{padding:14px 0; border-top:1px solid var(--border)}
.wlist li:first-child{border-top:0; padding-top:0}
.wi-t{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 12px}
.wi-t strong{font-size:16px; font-weight:600}
.wlist p{font-size:15px; color:var(--muted); margin:4px 0 0}
.wp{font-size:12.5px; color:#64748B; letter-spacing:.01em}
.wmore{border-top:1px solid var(--border); margin-top:2px}
.wmore summary{cursor:pointer; padding:14px 0 4px; font-size:14.5px; font-weight:500; color:var(--cian-texto); list-style:none; min-height:44px; display:flex; align-items:center}
.wmore summary::-webkit-details-marker{display:none}
.wmore[open] summary{display:none}
.wmore .wlist li:first-child{padding-top:14px}
.wclose{margin-top:48px; text-align:center}
.wclose p{max-width:640px; margin:0 auto 22px; font-size:18px; color:var(--ink)}
@media (min-width:900px){.what-grid{grid-template-columns:1fr 1fr; gap:24px}.wblock{padding:36px 36px}}

/* how it works */
.how-grid{display:grid; gap:48px; align-items:start}
@media (min-width:960px){.how-grid{grid-template-columns:1fr 1.05fr; gap:64px; align-items:center}}
.steps{list-style:none; margin:0; padding:0}
.step{display:flex; gap:18px; position:relative; padding-bottom:34px}
.step:last-child{padding-bottom:0}
.step:not(:last-child)::before{content:""; position:absolute; left:19px; top:42px; bottom:4px; width:1.5px; background:var(--border)}
.step-num{width:40px; height:40px; border-radius:50%; border:1.5px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; color:var(--cian-texto); flex:none}
.step h3{font-size:18px; margin:8px 0 6px}
.step p{color:var(--muted); font-size:15px; max-width:420px}

.chat{background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow); overflow:hidden}
.chat-head{display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--border); font-size:13.5px; font-weight:600}
.live-dot{width:8px; height:8px; border-radius:50%; background:var(--cian-profundo); box-shadow:0 0 0 0 rgba(8,145,178,.5); animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(8,145,178,.45)}70%{box-shadow:0 0 0 8px rgba(8,145,178,0)}100%{box-shadow:0 0 0 0 rgba(8,145,178,0)}}
.chat-brand{margin-left:auto; font-size:12px; letter-spacing:.18em; color:var(--muted)}
.chat-body{padding:18px; display:flex; flex-direction:column; gap:12px; min-height:200px}
.msg{display:flex; flex-direction:column; max-width:84%}
.msg .who{font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.msg p{padding:10px 14px; border-radius:14px; font-size:14px; line-height:1.45}
.msg-c{align-self:flex-end; align-items:flex-end}
.msg-c p{background:var(--nube); color:var(--ink); border-bottom-right-radius:4px}
.msg-n{align-self:flex-start}
.msg-n p{background:var(--noche); color:#fff; border-bottom-left-radius:4px}
.msg-badge{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--cian-texto); margin-top:-4px}
.msg-divider{display:flex; align-items:center; gap:10px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-align:center; margin:6px 0}
.msg-divider::before,.msg-divider::after{content:""; flex:1; height:1px; background:var(--border)}
.msg-booked{display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:var(--r-md); background:var(--tint); color:var(--cian-texto); font-size:14px}
.msg-booked strong{color:var(--ink); font-weight:600}
.typing{display:none; align-self:flex-start; gap:4px; padding:12px 14px; background:var(--noche); border-radius:14px; border-bottom-left-radius:4px}
.typing span{width:6px; height:6px; border-radius:50%; background:var(--muted-dark); animation:dot 1s infinite ease-in-out}
.typing span:nth-child(2){animation-delay:.15s} .typing span:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{opacity:.35; transform:translateY(0)}40%{opacity:1; transform:translateY(-3px)}}
.js .chat-body > :not(.typing){display:none}
.js .chat-body > .shown{display:flex; animation:msgIn .35s ease both}
.js .chat-body > .typing.on{display:inline-flex}
@keyframes msgIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.note{margin-top:12px; font-size:13px; color:var(--muted)}

/* industries */
.ind-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
@media (min-width:700px){.ind-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.ind-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.ind-card{background:#fff; border:1px solid var(--border); border-radius:var(--r-md); padding:18px 16px; display:flex; flex-direction:column; gap:14px; min-height:104px}
.ind-card span{font-size:14.5px; font-weight:500; line-height:1.3}
.ind-more{background:transparent; border-style:dashed; color:var(--muted)}
@media (max-width:699px){.ind-more{grid-column:1/-1; min-height:0}}
@media (min-width:1000px){.ind-more{grid-column:span 2}}
.ind-cta{display:flex; flex-direction:column; gap:18px; align-items:flex-start; margin-top:40px; padding-top:32px; border-top:1px solid var(--border)}
.ind-cta h3{font-size:19px; margin-bottom:6px}
.ind-cta p{color:var(--muted); max-width:520px}
@media (min-width:760px){.ind-cta{flex-direction:row; justify-content:space-between; align-items:center}}

/* why us (dark) */
.sec.dark{background:var(--noche); color:#fff}
.dark .sec-head{padding-bottom:36px; border-bottom:1px solid var(--line-dark); margin-bottom:36px}
.why-grid{display:grid; gap:30px}
@media (min-width:640px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.why-grid{grid-template-columns:repeat(5,1fr); gap:28px}}
.why-num{display:block; font-size:13px; font-weight:600; color:var(--cian); margin-bottom:12px}
.why-item h3{font-size:17px; margin-bottom:8px; color:#fff}
.why-item p{font-size:14.5px; color:var(--muted-dark)}

/* founder */
.founder-grid{display:grid; gap:36px}
@media (min-width:900px){.founder-grid{grid-template-columns:minmax(0,380px) 1fr; gap:64px; align-items:start}}
.founder-photo{margin:0; max-width:420px}
.founder-photo img{width:100%; height:auto; aspect-ratio:720/956; object-fit:cover; border-radius:var(--r-lg); background:var(--nube)}
.founder-photo figcaption{margin-top:14px; display:flex; flex-direction:column}
.founder-photo figcaption strong{font-size:17px; font-weight:600}
.founder-photo figcaption span{font-size:14px; color:var(--muted)}
.founder-text p{font-size:16.5px; color:var(--muted); line-height:1.7}
.founder-text p + p{margin-top:16px}
.edu-title{font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--cian-texto); margin:32px 0 14px}
.edu{list-style:none; margin:0; padding:0; display:grid; gap:10px}
@media (min-width:640px){.edu{grid-template-columns:1fr 1fr; column-gap:28px}}
.edu li{position:relative; padding-left:18px; font-size:15px}
.edu li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--cian-profundo)}

.naos-card{margin-top:56px; background:var(--noche); color:#fff; border-radius:var(--r-xl); overflow:hidden; display:grid}
@media (min-width:900px){.naos-card{grid-template-columns:1.05fr .95fr; margin-top:80px}}
.naos-text{padding:32px 24px}
@media (min-width:900px){.naos-text{padding:56px 48px; align-self:center}}
.naos-text h3{font-size:clamp(26px,3.4vw,34px); margin-bottom:16px}
.naos-text p{color:var(--muted-dark); font-size:16px; line-height:1.7}
.naos-text p + p{margin-top:14px}
.naos-text strong{color:#fff; font-weight:600}
.naos-figure{margin:0; padding:0 24px 24px; display:flex; flex-direction:column; align-items:center}
@media (min-width:900px){.naos-figure{padding:32px 40px 28px 0}}
.naos-figure .puppis{width:100%; max-width:380px; height:auto}
.naos-figure figcaption{font-size:12.5px; color:var(--muted-dark); margin-top:6px; text-align:center}

/* faq */
.faq-grid{display:grid; gap:32px}
@media (min-width:900px){.faq-grid{grid-template-columns:.8fr 1.2fr; gap:64px}}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 0; background:none; border:0; text-align:left; font-size:16.5px; font-weight:600; color:var(--ink)}
.chev{width:10px; height:10px; border-right:1.75px solid var(--muted); border-bottom:1.75px solid var(--muted); transform:rotate(45deg); transition:transform .2s; flex:none; margin-top:-4px}
.faq-item.open .chev{transform:rotate(-135deg); margin-top:4px}
.faq-a{display:none; padding:0 0 20px}
.faq-item.open .faq-a{display:block}
.faq-a p{color:var(--muted); max-width:620px}

/* closing */
.closing{text-align:center}
.closing-inner{display:flex; flex-direction:column; align-items:center}
.closing .stat{margin-top:22px; max-width:600px; font-size:18px; color:var(--muted)}
.closing .stat-small{margin-top:26px; max-width:560px; font-size:15px; color:var(--muted)}
.closing .stat-small strong{color:var(--cian-texto); font-weight:600}
.closing .stat strong{color:var(--cian-texto); font-weight:600}
.source{margin:12px 0 30px; font-size:12.5px; color:var(--muted); text-decoration:underline; text-underline-offset:3px}

/* footer */
.site-footer{border-top:1px solid var(--border); padding:48px 0 32px; background:#fff}
.foot-top{display:flex; flex-direction:column; gap:28px; padding-bottom:28px; border-bottom:1px solid var(--border)}
@media (min-width:760px){.foot-top{flex-direction:row; justify-content:space-between; align-items:flex-start}}
.foot-logo .logo{height:24px; width:auto}
.foot-contact{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px; font-size:14px; color:var(--muted)}
.foot-contact li{display:flex; align-items:center; gap:10px}
.foot-contact a{text-decoration:none}
.foot-contact a:hover{color:var(--ink)}
.foot-social{list-style:none; margin:18px 0 0; padding:0; display:flex; gap:6px; margin-left:-9px}
.foot-social a{display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; color:var(--muted); transition:color .15s, background .15s}
.foot-social a:hover{color:#0E7490; background:#F4F6F9}
.foot-social a:focus-visible{outline:2px solid #0E7490; outline-offset:2px}
.ic-soc{width:22px; height:22px; flex:none}
.foot-legal{display:flex; flex-wrap:wrap; gap:20px; font-size:14px}
.foot-legal a{text-decoration:none; color:var(--muted)}
.foot-legal a:hover{color:var(--ink)}
.foot-bottom{padding-top:22px; display:grid; gap:8px; font-size:12px; color:var(--muted)}
.foot-bottom .dba-line{font-size:12px; color:#64748B; margin-top:2px}

.gal{display:grid; grid-template-columns:1fr; gap:24px}
.gcard h3{font-size:19px; line-height:1.25; margin:16px 0 6px; font-weight:600}
.gcard p{margin:0; font-size:15.5px; color:var(--muted,#475569)}
.gimg{overflow:hidden; border-radius:var(--r-lg); aspect-ratio:4/3; background:var(--nube)}
.gimg img,.gimg video{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease}
.gcta{margin-top:44px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
@media (hover:hover){.gcard:hover .gimg img{transform:scale(1.05)}}
@media (min-width:700px){.gal{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.gal{grid-template-columns:repeat(3,1fr); gap:28px}}
@media (prefers-reduced-motion:reduce){.gimg img,.gimg video{transition:none}.gcard:hover .gimg img{transform:none}}
/* scroll reveal (only when JS is on) */
.js .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.js .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1; transform:none; transition:none} .live-dot,.typing span{animation:none}}


/* menu-preview */
.demo-bar{background:var(--noche); color:#fff; font-size:13px; font-weight:500}
.demo-bar .wrap{display:flex; justify-content:center; align-items:center; min-height:34px}
.demo-bar a{display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:#fff}
.demo-bar a:hover{color:var(--cian)} .demo-bar svg{color:var(--cian)}
@media (max-width:1079px){.demo-bar{display:none}}
.head-phone{display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--border); border-radius:var(--r-md); color:var(--cian-texto)}
@media (min-width:1080px){.head-phone{display:none}}
.main-nav{gap:22px; align-items:center}
.has-mega{position:static}
.mega-btn{display:inline-flex; align-items:center; gap:4px; border:0; background:none; font:inherit; font-size:14.5px; font-weight:500; color:var(--muted); padding:24px 0; cursor:pointer}
.mega-btn:hover,.has-mega.open .mega-btn{color:var(--ink)}
.mchev{width:14px; height:14px; flex:none; transition:transform .15s}
.has-mega.open .mchev,.acc.open .mchev{transform:rotate(180deg)}
.head-inner{position:relative}
.mega{display:none; position:absolute; left:var(--gutter); right:var(--gutter); top:100%; background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:24px; gap:28px}
.has-mega.open .mega{display:grid}
.mega-sol{grid-template-columns:repeat(3,1fr)}
.mega-ind{grid-template-columns:1fr}
.mega-col h4{margin:0 0 10px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--cian-texto)}
.mega-col a{display:block; text-decoration:none; padding:9px 10px; margin:0 -10px; border-radius:var(--r-md)}
.mega-col a:hover{background:var(--nube)}
.mega-col a strong{display:block; font-size:14.5px; color:var(--ink)}
.mega-col a small{display:block; font-size:13px; color:var(--muted); line-height:1.4; margin-top:2px}
.ind-list{display:grid; grid-template-columns:repeat(2,1fr); gap:0 28px}
.ind-list a{font-size:14.5px; font-weight:500; color:var(--ink)}
.mega-col a.mega-more{margin-top:8px; color:var(--cian-texto); font-weight:600; font-size:14px}
.acc-btn{display:flex; width:100%; align-items:center; justify-content:space-between; border:0; border-bottom:1px solid var(--border); background:none; font:inherit; font-weight:500; padding:12px 0; color:var(--ink); cursor:pointer}
.acc-panel{display:none; padding:4px 0 8px 12px}
.acc-panel a{display:block}
.acc.open .acc-panel{display:block}
.mobile-nav .acc-panel a:not(.btn){padding:9px 0; font-weight:400; font-size:15px; border-bottom:0}
.acc-h{margin:10px 0 2px; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--cian-texto); font-weight:600}
.lang-m{align-self:flex-start; margin-top:14px}
.mobile-nav{max-height:calc(100vh - 68px); overflow-y:auto}
@media (max-width:639px){.lang-m button[aria-pressed="true"]{display:inline-block}}
.foot-cols{display:grid; grid-template-columns:1fr; gap:28px; margin-top:28px}
@media (min-width:760px){.foot-cols{grid-template-columns:repeat(3,1fr)}}
.foot-cols h4{margin:0 0 12px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--cian-texto)}
.foot-cols ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:14px}
.foot-cols a{text-decoration:none; color:var(--muted)} .foot-cols a:hover{color:var(--ink)}
.foot-cols .ic-sm{display:none}
html{scroll-padding-top:90px}




/* ===== sitio propuesta (se suma a los estilos actuales de naox.ai) ===== */
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.head-phone2{display:none; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.head-phone2 .ph-ic{width:36px; height:36px; border-radius:50%; background:var(--noche); color:var(--cian); display:flex; align-items:center; justify-content:center}
.head-phone2 .ph-ic svg{width:17px; height:17px}
.head-phone2 b{display:block; font-size:14.5px; font-weight:600; line-height:1.1}
.head-phone2 small{display:inline-block; margin-top:3px; font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--cian-texto); background:var(--tint); padding:1px 7px; border-radius:999px}
@media (min-width:1180px){.head-phone2{display:flex}}
.main-nav > a{padding:24px 0}

/* ---------- hero ---------- */
.hx{position:relative; overflow:hidden; background:
  radial-gradient(900px 480px at 85% 20%, rgba(34,211,238,.20), transparent 60%),
  radial-gradient(700px 420px at 0% 100%, rgba(8,145,178,.12), transparent 60%),
  linear-gradient(180deg,#F7FBFD 0%,#FFFFFF 100%)}
.hx .wrap{position:relative; display:grid; gap:40px; padding-top:44px; padding-bottom:56px}
@media (min-width:980px){.hx .wrap{grid-template-columns:1.2fr .8fr; align-items:center; padding-top:40px; padding-bottom:56px; min-height:calc(100vh - 68px)}}
.hx-star{position:absolute; color:var(--cian-profundo); opacity:.0; font-size:14px; animation:tw 4s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:0; transform:scale(.6)} 50%{opacity:.7; transform:scale(1)}}
.hx-eyebrow{font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--cian-texto)}
.hx-chip{display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:7px 14px; border:1px solid var(--border); background:#fff; border-radius:999px; font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); box-shadow:var(--shadow)}
.hx-chip .dot{width:8px; height:8px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.hx-chip b{color:var(--cian-texto); font-weight:700}
.hx h1{margin-top:18px; font-size:clamp(36px, 4.6vw, 58px); line-height:1.02; font-weight:700; letter-spacing:-.025em}
.hx h1 .l2{display:block; min-height:1.05em; color:var(--cian-profundo); font-weight:600}
@media (max-width:640px){.hx h1{font-size:33px} .hx h1 .l2{min-height:1.1em; white-space:nowrap} .hx-chip{display:block; text-transform:none; letter-spacing:0; font-size:13.5px; font-weight:500; line-height:1.4} .hx-chip .dot{display:inline-block; margin-right:6px} .hx-eyebrow{font-size:11px}}
.hx-rot{display:inline-block; background:linear-gradient(90deg,var(--cian-texto),var(--cian-profundo) 60%,#06B6D4); -webkit-background-clip:text; background-clip:text; color:transparent; transition:opacity .35s, transform .35s}
.hx-rot.out{opacity:0; transform:translateY(-.25em)}
.hx-rot.pre{opacity:0; transform:translateY(.3em); transition:none}
.hx h1 .l3{display:block}
.hx-box{display:inline-block; position:relative; padding:0 .18em .04em; margin-top:.08em; background:var(--noche); color:var(--cian); border-radius:.14em; transform:rotate(-1.2deg)}
.hx-box::after{content:"✦"; position:absolute; right:-.42em; top:-.32em; font-size:.38em; color:var(--cian-profundo)}
.hx-lead{margin-top:22px; max-width:560px; font-size:18px; color:var(--muted)}
.hx-lead strong{color:var(--ink); font-weight:600}
.hx-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.hx-alt{margin-top:14px; font-size:14.5px; color:var(--muted)}
.hx-alt a{color:var(--cian-texto); font-weight:600}
.hx-trust{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:26px; font-size:14px; font-weight:500; color:var(--ink)}
.hx-trust span{display:inline-flex; align-items:center; gap:7px}
.hx-trust svg{width:16px; height:16px; color:var(--cian-profundo)}

/* telefono del hero */
.hx-vis{position:relative; display:flex; justify-content:center; min-height:520px}
.hx-phone{position:relative; width:290px; height:560px; border-radius:46px; background:linear-gradient(160deg,#16233F,#0B1220 70%); padding:14px; box-shadow:0 40px 80px rgba(11,18,32,.28), inset 0 0 0 2px #24324F}
.hx-screen{position:relative; height:100%; border-radius:34px; overflow:hidden; background:radial-gradient(420px 300px at 50% 0%, rgba(34,211,238,.35), transparent 70%), linear-gradient(180deg,#123049,#0B1220 75%); color:#fff; padding:44px 12px 12px}
.hx-notch{position:absolute; top:10px; left:50%; width:96px; height:24px; margin-left:-48px; border-radius:20px; background:#05080F}
.hx-time{text-align:center; font-size:12px; color:#BFE9F3}
.hx-clock{text-align:center; font-size:58px; font-weight:600; letter-spacing:-.02em; line-height:1; margin:2px 0 16px}
.hx-feed{display:grid; gap:8px}
.ntf{display:flex; gap:10px; align-items:flex-start; padding:10px 11px; border-radius:16px; background:rgba(255,255,255,.92); color:var(--ink); box-shadow:0 6px 16px rgba(0,0,0,.18); animation:ntfIn .5s cubic-bezier(.2,.7,.2,1) both}
.ntf.old{opacity:.55}
@keyframes ntfIn{from{opacity:0; transform:translateY(-14px) scale(.96)} to{opacity:1; transform:none}}
.ntf i{flex:none; width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-style:normal; color:#fff}
.ntf i svg{width:16px; height:16px}
.ntf .t{font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.ntf .t em{font-style:normal; float:right; text-transform:none; letter-spacing:0; font-weight:500}
.ntf b{display:block; font-size:13px; font-weight:600; line-height:1.25}
.ntf span.d{display:block; font-size:12px; color:var(--muted); line-height:1.3}
.hx-card{position:absolute; background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:12px 14px}
.hx-card.c1{bottom:150px; right:-28px; width:200px}
.hx-card.c1 small{display:block; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.hx-card.c1 b{font-size:15px}
.hx-card.c1 svg{margin-top:6px; width:100%; height:44px}
.hx-card.c1 .spark{stroke-dasharray:260; stroke-dashoffset:0; animation:draw 4s ease infinite}
@keyframes draw{0%{stroke-dashoffset:260} 50%,100%{stroke-dashoffset:0}}
.hx-chips{position:absolute; left:-4px; bottom:90px; display:grid; gap:8px; justify-items:start}
.hx-chips span{padding:7px 12px; border-radius:999px; background:#fff; border:1px solid var(--border); font-size:12.5px; font-weight:500; box-shadow:var(--shadow); transition:all .3s}
.hx-chips span.on{background:var(--noche); color:#fff; border-color:var(--noche)}
.hx-chips span.on::before{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--cian); margin-right:7px}
.hx-ej{position:absolute; bottom:-4px; right:0; font-size:11px; color:var(--muted)}
@media (max-width:979px){.hx-vis{min-height:0} .hx-card.c1{right:0; bottom:110px} .hx-chips{left:0}}
@media (max-width:520px){.hx-phone{width:260px; height:500px} .hx-card.c1{width:160px} .hx-chips{bottom:40px} .hx-clock{font-size:48px}}

/* cinta */
.marq{overflow:hidden; background:var(--noche); color:#fff; border-block:1px solid var(--line-dark)}
.marq-in{display:flex; width:max-content; animation:marq 38s linear infinite}
.marq-in > span{padding:14px 18px; font-size:15px; font-weight:500; white-space:nowrap}
.marq span i{font-style:normal; color:var(--cian); margin-left:18px}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- servicios (seccion oscura) ---------- */
.svx{background:radial-gradient(900px 500px at 15% 0%, rgba(34,211,238,.14), transparent 60%), var(--noche); color:#fff; padding:80px 0}
.svx-head{display:grid; gap:20px; margin-bottom:40px}
@media (min-width:900px){.svx-head{grid-template-columns:1.1fr .9fr; align-items:end}}
.svx h2{font-size:clamp(32px,4.6vw,52px); line-height:1.05; font-weight:700}
.svx h2 em{font-style:normal; color:var(--cian)}
.svx-head p{color:var(--muted-dark); font-size:17px}
.svx-head .btn{margin-top:18px}
.svx-grid{display:grid; gap:18px; grid-template-columns:1fr}
@media (min-width:640px){.svx-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.svx-grid{grid-template-columns:repeat(4,1fr)}}
.svc{display:flex; flex-direction:column; text-decoration:none; color:#fff; background:var(--panel); border:1px solid var(--line-dark); border-radius:var(--r-lg); padding:12px 12px 18px; transition:transform .2s, border-color .2s}
.svc:hover{transform:translateY(-4px); border-color:var(--cian-profundo)}
.svc .n{margin:16px 6px 4px; font-size:12px; font-weight:600; color:var(--cian); letter-spacing:.08em}
.svc h3{margin:0 6px; font-size:19px; line-height:1.25}
.svc p{margin:8px 6px 0; font-size:14.5px; color:var(--muted-dark); line-height:1.45; flex:1}
.svc .more{margin:14px 6px 0; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--cian)}
.svx-all{margin-top:30px; text-align:center}
.btn-ghost-dark{background:transparent; color:#fff; border-color:#3A4A6B}
.btn-ghost-dark:hover{border-color:var(--cian)}

/* ---------- ventanas animadas ---------- */
.win{position:relative; height:196px; border-radius:12px; overflow:hidden; background:#F4F8FB; color:var(--ink); font-size:12px; line-height:1.35}
.win.big{height:380px; border-radius:var(--r-lg); font-size:14px; box-shadow:0 30px 60px rgba(11,18,32,.18)}
.win .pad{position:absolute; inset:0; padding:12px}
.win.big .pad{padding:22px}
.wtag{position:absolute; right:10px; bottom:10px; padding:5px 9px; border-radius:999px; background:#16A34A; color:#fff; font-weight:600; font-size:11px}
.win.big .wtag{font-size:13px; right:18px; bottom:18px; padding:7px 12px}
.wtop{display:flex; align-items:center; gap:7px; font-weight:600; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em}
.win.big .wtop{font-size:13px}
.live{width:8px; height:8px; border-radius:50%; background:#EF4444; animation:pulse2 1.2s infinite}
@keyframes pulse2{50%{opacity:.3}}
.bub{max-width:82%; margin-top:7px; padding:7px 10px; border-radius:12px 12px 12px 4px; background:#fff; box-shadow:0 2px 6px rgba(11,18,32,.08)}
.bub.me{margin-left:auto; border-radius:12px 12px 4px 12px; background:var(--cian-texto); color:#fff}
.wave{display:flex; gap:3px; align-items:center; height:22px; margin-top:6px}
.wave i{width:3px; border-radius:2px; background:var(--cian-profundo); animation:wv 1s ease-in-out infinite}
.wave i:nth-child(odd){animation-delay:.2s} .wave i:nth-child(3n){animation-delay:.45s} .wave i:nth-child(4n){animation-delay:.7s}
@keyframes wv{0%,100%{height:4px} 50%{height:20px}}
.typing{display:inline-flex; gap:3px; padding:9px 10px} .typing i{width:5px; height:5px; border-radius:50%; background:var(--muted); animation:ty 1s infinite} .typing i:nth-child(2){animation-delay:.15s} .typing i:nth-child(3){animation-delay:.3s}
@keyframes ty{50%{opacity:.2}}
.chans{display:flex; gap:5px; flex-wrap:wrap}
.chans > span{padding:3px 8px; border-radius:999px; background:#fff; border:1px solid var(--border); font-size:10.5px; font-weight:600}
.win.big .chans span{font-size:12.5px}
/* calendario */
.cal{display:grid; grid-template-columns:repeat(5,1fr); gap:4px; margin-top:8px}
.cal b{font-size:10px; color:var(--muted); text-align:center; font-weight:600}
.cal i{height:22px; border-radius:6px; background:#fff; border:1px solid var(--border)}
.win.big .cal i{height:40px} .win.big .cal b{font-size:12px}
.cal i.x{background:#E7EDF3; border-color:#E7EDF3}
.cal i.ok{position:relative; background:var(--cian-texto); border-color:var(--cian-texto)}
.toast{position:absolute; left:12px; right:12px; bottom:12px; display:flex; gap:8px; align-items:center; padding:8px 10px; border-radius:10px; background:#fff; box-shadow:0 8px 20px rgba(11,18,32,.15)}
.win.big .toast{left:22px; right:22px; bottom:22px; padding:12px 14px}
.toast i{flex:none; width:24px; height:24px; border-radius:7px; background:#16A34A; color:#fff; display:flex; align-items:center; justify-content:center; font-style:normal; font-weight:700}
/* crm */
.kb{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:8px; position:relative}
.kb > div{min-height:130px; border-radius:8px; background:#E9EFF5; padding:6px}
.win.big .kb > div{min-height:250px}
.kb h5{margin:0 0 6px; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.win.big .kb h5{font-size:12px}
.kc{padding:6px 7px; border-radius:6px; background:#fff; margin-bottom:5px; font-size:10.5px; box-shadow:0 1px 3px rgba(11,18,32,.08)}
.win.big .kc{font-size:13px; padding:9px 10px}
.kc.mv{position:absolute; top:24px; left:6px; width:calc(33.333% - 16px); border:1.5px solid var(--cian-profundo); animation:kbmv 7s ease-in-out infinite}
.win.big .kc.mv{top:30px}
@keyframes kbmv{0%,18%{transform:translateX(0)} 33%,52%{transform:translateX(calc(100% + 16px))} 67%,90%{transform:translateX(calc(200% + 32px))} 100%{transform:translateX(0)}}
/* resenas */
.gcard{padding:10px; border-radius:10px; background:#fff; box-shadow:0 2px 8px rgba(11,18,32,.08)}
.gcard .g{font-weight:700; letter-spacing:-.01em}
.g .b{color:#4285F4}.g .r{color:#EA4335}.g .y{color:#FBBC05}.g .gr{color:#34A853}
.stars{color:#F59E0B; letter-spacing:1px}
.stars.fill{display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:bottom; animation:st 9s steps(5) infinite}
@keyframes st{0%,12%{width:0} 30%,100%{width:5.4em}}
/* web */
.brw{position:absolute; inset:10px; border-radius:9px; background:#fff; overflow:hidden; box-shadow:0 4px 14px rgba(11,18,32,.12)}
.win.big .brw{inset:18px}
.brw-bar{display:flex; align-items:center; gap:5px; height:22px; padding:0 8px; background:#EEF2F6; font-size:10px; color:var(--muted)}
.brw-bar i{width:7px; height:7px; border-radius:50%; background:#CBD5E1}
.brw-bar span{margin-left:8px; padding:1px 8px; border-radius:6px; background:#fff}
.brw-view{position:absolute; top:22px; left:0; right:0; bottom:0; overflow:hidden}
.brw-view img{width:100%; animation:scrl 14s ease-in-out infinite alternate}
@keyframes scrl{0%,12%{transform:translateY(0)} 100%{transform:translateY(calc(-100% + 160px))}}
.win.big .brw-view img{animation-name:scrlb}
@keyframes scrlb{0%,12%{transform:translateY(0)} 100%{transform:translateY(calc(-100% + 330px))}}
/* anuncios */
.srch{display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#fff; border:1px solid var(--border)}
.srch .tw{overflow:hidden; white-space:nowrap; border-right:1.5px solid var(--ink); width:0; animation:twr 9s steps(26) infinite}
@keyframes twr{0%{width:0} 22%,100%{width:15.5em}}
.ad{margin-top:8px; padding:9px 10px; border-radius:10px; background:#fff; box-shadow:0 2px 8px rgba(11,18,32,.08)}
.ad small{font-weight:700; font-size:10px} .ad b{display:block; color:#1A0DAB; font-weight:600}
.win.big .ad small{font-size:12px}
/* video */
.vph{position:absolute; top:10px; bottom:-30px; left:50%; width:128px; margin-left:-64px; border-radius:18px; overflow:hidden; background:#000; box-shadow:0 8px 20px rgba(11,18,32,.25); border:4px solid #0B1220}
.win.big .vph{width:220px; margin-left:-110px; top:20px; bottom:-40px; border-radius:28px; border-width:6px}
.vph video{width:100%; height:100%; object-fit:cover}
.vph .cap{position:absolute; left:6px; right:6px; bottom:40px; padding:3px 6px; border-radius:6px; background:rgba(0,0,0,.55); color:#fff; font-size:9.5px; text-align:center}
.win.big .vph .cap{font-size:12px; bottom:56px}
.vtag{position:absolute; left:10px; top:10px; padding:4px 9px; border-radius:999px; background:var(--noche); color:var(--cian); font-weight:600; font-size:10.5px}
.win.big .vtag{font-size:13px; left:18px; top:18px}

/* aparecer en secuencia (ciclo de 10 s) */
.ap2,.ap3,.ap4,.ap5{opacity:0} .ap1,.ap2,.ap3,.ap4,.ap5{animation:10s ease infinite}
.ap1{animation-name:ap1}.ap2{animation-name:ap2}.ap3{animation-name:ap3}.ap4{animation-name:ap4}.ap5{animation-name:ap5}
@keyframes ap1{0%,93%{opacity:1; transform:none} 97%{opacity:0} 100%{opacity:1}}
@keyframes ap2{0%,12%{opacity:0; transform:translateY(6px)} 17%,93%{opacity:1; transform:none} 97%,100%{opacity:0}}
@keyframes ap3{0%,26%{opacity:0; transform:translateY(6px)} 31%,93%{opacity:1; transform:none} 97%,100%{opacity:0}}
@keyframes ap4{0%,40%{opacity:0; transform:translateY(6px)} 45%,93%{opacity:1; transform:none} 97%,100%{opacity:0}}
@keyframes ap5{0%,54%{opacity:0; transform:translateY(6px)} 59%,93%{opacity:1; transform:none} 97%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .ap1,.ap2,.ap3,.ap4,.ap5{opacity:1; animation:none}
  .marq-in,.brw-view img,.kc.mv,.stars.fill,.srch .tw,.wave i,.hx-star,.hx-card.c1 .spark{animation:none}
  .srch .tw{width:auto; border:0} .stars.fill{width:auto} .hx-card.c1 .spark{stroke-dashoffset:0}
}

/* ---------- muestras ---------- */
.mst-grid{display:grid; gap:20px; margin-top:32px}
@media (min-width:860px){.mst-grid{grid-template-columns:repeat(3,1fr)}}
.mst{display:block; text-decoration:none; color:var(--ink); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:#fff; box-shadow:var(--shadow); transition:transform .2s}
.mst:hover{transform:translateY(-4px)}
.mst .shot{height:250px; overflow:hidden; border-bottom:1px solid var(--border)}
.mst .shot img{width:100%; transition:transform 5s ease}
.mst:hover .shot img{transform:translateY(calc(-100% + 250px))}
.mst .tx{padding:14px 16px}
.mst .tx b{display:block; font-size:16px}
.mst .tx span{font-size:14px; color:var(--muted)}
.mst-note{margin-top:14px; font-size:13px; color:var(--muted)}

/* ---------- pilares, pasos, industrias ---------- */
.pil{display:grid; gap:18px; margin-top:32px}
@media (min-width:760px){.pil{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.pil{grid-template-columns:repeat(4,1fr)}}
.pil > div{padding:22px; border:1px solid var(--border); border-radius:var(--r-lg); background:#fff}
.pil i{display:flex; width:42px; height:42px; border-radius:12px; background:var(--tint); color:var(--cian-texto); align-items:center; justify-content:center; font-style:normal}
.pil i svg{width:22px; height:22px}
.pil h3{margin-top:14px; font-size:18px}
.pil p{margin-top:6px; color:var(--muted); font-size:15px}
.pasos{display:grid; gap:16px; margin-top:32px; counter-reset:p}
@media (min-width:860px){.pasos{grid-template-columns:repeat(4,1fr)}}
.pasos > div{position:relative; padding:22px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--border)}
.pasos > div::before{counter-increment:p; content:"0" counter(p); display:block; font-size:13px; font-weight:700; color:var(--cian-texto); letter-spacing:.08em}
.pasos h3{margin-top:8px; font-size:18px}
.pasos p{margin-top:6px; font-size:15px; color:var(--muted)}
.ind{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
.ind > span{padding:10px 16px; border-radius:999px; border:1px solid var(--border); background:#fff; font-weight:500; font-size:15px}
.ind > span.mas{border-style:dashed; color:var(--muted)}
.sec-cta{margin-top:28px}

/* cierre */
.cierre{background:var(--noche); color:#fff; text-align:center; padding:72px 0 80px}
.cierre .k{font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--cian)}
.cierre h2{margin-top:12px; font-size:clamp(34px,5vw,56px); line-height:1.05; font-weight:700}
.cierre h2 em{font-style:normal; color:var(--cian)}
.cierre p{margin:16px auto 0; max-width:560px; color:var(--muted-dark); font-size:17px}
.cierre .hx-ctas{justify-content:center}
.cierre .hx-alt{color:var(--muted-dark)} .cierre .hx-alt a{color:var(--cian)}

/* ---------- subpaginas de servicio ---------- */
.sp-hero{background:radial-gradient(800px 420px at 90% 10%, rgba(34,211,238,.18), transparent 60%), linear-gradient(180deg,#F7FBFD,#fff)}
.sp-hero .wrap{display:grid; gap:36px; padding-top:40px; padding-bottom:56px}
@media (min-width:980px){.sp-hero .wrap{grid-template-columns:1fr 1fr; align-items:center; padding-top:56px; padding-bottom:72px}}
.crumbs{font-size:13.5px; color:var(--muted)} .crumbs a{color:var(--cian-texto); text-decoration:none}
.sp-hero h1{margin-top:14px; font-size:clamp(34px,4.8vw,54px); line-height:1.06; font-weight:700; letter-spacing:-.02em}
.sp-hero .sp-name{display:inline-block; margin-top:16px; padding:5px 12px; border-radius:999px; background:var(--noche); color:var(--cian); font-size:13px; font-weight:600}
.pares{display:grid; gap:12px; margin-top:28px}
.par{display:grid; gap:10px; align-items:center; padding:16px 18px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--border)}
@media (min-width:760px){.par{grid-template-columns:1fr auto 1fr}}
.par .no{color:var(--muted); display:flex; gap:10px} .par .no::before{content:"✕"; color:#B42318; font-weight:700}
.par .si{font-weight:600; display:flex; gap:10px} .par .si::before{content:"✓"; color:#16A34A; font-weight:700}
.par .ar{color:var(--cian-profundo); font-size:20px; text-align:center}
@media (max-width:759px){.par .ar{display:none}}
.inc{display:grid; gap:12px; margin-top:28px}
@media (min-width:700px){.inc{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.inc{grid-template-columns:repeat(3,1fr)}}
.inc div{display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border-radius:var(--r-md); background:#fff; border:1px solid var(--border); font-weight:500}
.inc div::before{content:""; flex:none; width:22px; height:22px; border-radius:50%; background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7490' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/13px no-repeat}
.otros{display:grid; gap:12px; margin-top:28px}
@media (min-width:700px){.otros{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.otros{grid-template-columns:repeat(4,1fr)}}
.otros a{display:block; padding:16px 18px; border-radius:var(--r-md); border:1px solid var(--line-dark); background:var(--panel); color:#fff; text-decoration:none; font-weight:600}
.otros a small{display:block; margin-top:4px; font-weight:400; color:var(--muted-dark); font-size:13.5px}
.otros a:hover{border-color:var(--cian)}

/* ---------- pagina de propuesta ---------- */
.pp{background:radial-gradient(800px 420px at 0% 0%, rgba(34,211,238,.16), transparent 60%), var(--nube)}
.pp .wrap{display:grid; gap:32px; padding-top:40px; padding-bottom:72px}
@media (min-width:1000px){.pp .wrap{grid-template-columns:.85fr 1.15fr; align-items:start; padding-top:56px}}
.pp h1{font-size:clamp(34px,4.6vw,50px); line-height:1.06; font-weight:700; margin-top:12px}
.pp-lead{margin-top:16px; color:var(--muted); font-size:17px}
.pp-pasos{margin-top:28px; display:grid; gap:14px}
.pp-pasos div{display:flex; gap:14px}
.pp-pasos b{flex:none; width:32px; height:32px; border-radius:50%; background:var(--noche); color:var(--cian); display:flex; align-items:center; justify-content:center; font-size:14px}
.pp-pasos strong{display:block} .pp-pasos span{font-size:15px; color:var(--muted)}
.pp-contacto{margin-top:28px; padding:16px 18px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--border); font-size:15px}
.pp-contacto a{color:var(--cian-texto); font-weight:600}
.pf{padding:24px; border-radius:var(--r-xl); background:#fff; box-shadow:0 20px 50px rgba(11,18,32,.12)}
@media (min-width:640px){.pf{padding:32px}}
.pf h2{font-size:22px} .pf .sub{margin-top:4px; color:var(--muted); font-size:14.5px}
.pf-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; margin-top:22px}
@media (max-width:639px){.pf-grid{grid-template-columns:1fr}}
.pf fieldset{border:0; margin:20px 0 0; padding:0; min-width:0}
.pf legend,.pf .lbl{display:block; margin:0 0 8px; padding:0; font-size:15px; font-weight:600}
.pf .lbl{margin-bottom:6px}
.pf small.opc{font-weight:400; color:var(--muted)}
.pf .req{color:var(--cian-texto)}
.pf input[type=text],.pf input[type=tel],.pf input[type=email],.pf select,.pf textarea{width:100%; min-height:46px; padding:10px 12px; border:1px solid var(--border-strong); border-radius:var(--r-md); font:inherit; font-size:15px; background:#fff; color:var(--ink)}
.pf textarea{min-height:120px; resize:vertical; line-height:1.5}
.pf input:focus,.pf select:focus,.pf textarea:focus{outline:2px solid var(--cian-texto); outline-offset:1px}
.ops{display:flex; flex-wrap:wrap; gap:8px}
.op{position:relative}
.op input{position:absolute; opacity:0; width:1px; height:1px}
.op > span{display:inline-flex; align-items:center; min-height:40px; padding:8px 14px; border:1px solid var(--border-strong); border-radius:999px; font-size:14px; line-height:1.3; cursor:pointer; background:#fff}
.op input:checked + span{background:var(--tint); border-color:var(--cian-texto); color:var(--cian-texto); font-weight:600}
.op input:focus-visible + span{outline:2px solid var(--cian-texto); outline-offset:2px}
.err{display:none; margin:6px 0 0; font-size:14px; color:#B42318}
.inv .err{display:block}
.inv input,.inv select,.inv textarea{border-color:#B42318 !important}
fieldset.inv .op > span{border-color:#B42318}
.cuenta{margin:4px 0 0; text-align:right; font-size:12.5px; color:var(--muted)}
.pf .btn{width:100%; margin-top:24px}
.aviso{margin-top:10px; font-size:12.5px; line-height:1.5; color:var(--muted)}
.pf-ok{text-align:center; padding:24px 8px}
.pf-ok .ok{width:64px; height:64px; margin:0 auto; border-radius:50%; background:var(--tint); color:var(--cian-texto); display:flex; align-items:center; justify-content:center}
.pf-ok .ok svg{width:30px; height:30px}
.pf-ok h2{margin-top:18px; font-size:26px}
.pf-ok p{margin-top:10px; color:var(--muted)}
.pf-ok .hx-alt{margin-top:22px}

/* ---------- v2: reseñas ---------- */
.sms{max-width:88%; padding:8px 10px; border-radius:12px 12px 12px 4px; background:#fff; box-shadow:0 2px 6px rgba(11,18,32,.08)}
.sms-de{margin:0 0 3px; font-size:9.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.win.big .sms-de{font-size:11.5px}
.sms u{color:var(--cian-texto)}
.rv{margin-top:8px; padding:10px 11px; border-radius:12px; background:#fff; box-shadow:0 6px 18px rgba(11,18,32,.12)}
.rv-h{display:flex; align-items:center; gap:8px}
.rv-h b{display:block; font-size:12.5px; line-height:1.2} .rv-h small{display:block; font-size:10.5px; color:var(--muted)}
.win.big .rv-h b{font-size:15px} .win.big .rv-h small{font-size:12.5px}
.rv-av{flex:none; width:26px; height:26px; border-radius:50%; background:#7C3AED; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px}
.gg{margin-left:auto; width:22px; height:22px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px}
.gg .b{color:#4285F4}
.rv-st{margin-top:6px; font-size:16px; line-height:1; color:#E2E8F0; letter-spacing:2px}
.win.big .rv-st{font-size:24px}
.rv-st i{font-style:normal; display:inline-block; animation:10s ease infinite}
.rv-st .s1{animation-name:sp1}.rv-st .s2{animation-name:sp2}.rv-st .s3{animation-name:sp3}.rv-st .s4{animation-name:sp4}.rv-st .s5{animation-name:sp5}
@keyframes sp1{0%,20%{color:#E2E8F0; transform:scale(1)} 22%{color:#F59E0B; transform:scale(1.35)} 25%,93%{color:#F59E0B; transform:scale(1)} 97%,100%{color:#E2E8F0}}
@keyframes sp2{0%,23%{color:#E2E8F0; transform:scale(1)} 25%{color:#F59E0B; transform:scale(1.35)} 28%,93%{color:#F59E0B; transform:scale(1)} 97%,100%{color:#E2E8F0}}
@keyframes sp3{0%,26%{color:#E2E8F0; transform:scale(1)} 28%{color:#F59E0B; transform:scale(1.35)} 31%,93%{color:#F59E0B; transform:scale(1)} 97%,100%{color:#E2E8F0}}
@keyframes sp4{0%,29%{color:#E2E8F0; transform:scale(1)} 31%{color:#F59E0B; transform:scale(1.35)} 34%,93%{color:#F59E0B; transform:scale(1)} 97%,100%{color:#E2E8F0}}
@keyframes sp5{0%,32%{color:#E2E8F0; transform:scale(1)} 34%{color:#F59E0B; transform:scale(1.35)} 37%,93%{color:#F59E0B; transform:scale(1)} 97%,100%{color:#E2E8F0}}
.rv-tx{margin:6px 0 0}

/* ---------- v2: teléfono de reels (subpágina de contenido) ---------- */
.reel-wrap{position:relative; display:flex; justify-content:center; padding:10px 0}
.rph{width:300px; max-width:82vw; aspect-ratio:9/19; border-radius:44px; padding:12px; background:linear-gradient(160deg,#1B2A47,#0B1220 70%); box-shadow:0 40px 80px rgba(11,18,32,.3), inset 0 0 0 2px #24324F}
.rph-scr{position:relative; height:100%; border-radius:33px; overflow:hidden; background:#000; display:flex; align-items:center}
.rph-scr video{width:100%; height:auto; display:block}
.rph-top{position:absolute; top:14px; left:0; right:0; display:flex; justify-content:center; gap:14px; color:#fff; font-size:14px}
.rph-top span{opacity:.6}
.rph-side{position:absolute; right:10px; bottom:120px; display:grid; gap:16px; color:#fff; font-size:20px; text-align:center}
.rph-ui{position:absolute; left:12px; right:48px; bottom:18px; color:#fff; font-size:13px; line-height:1.35}
.rph-ui p{margin:0 0 6px; display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.rph-ui em{font-style:normal; font-size:11.5px; border:1px solid rgba(255,255,255,.6); border-radius:6px; padding:1px 7px}
.rph-av{width:26px; height:26px; border-radius:50%; background:var(--cian-texto); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700}
.reel-wrap .vtag{left:auto; right:0; top:20px; font-size:13px}

/* ---------- v2: galería de contenido ---------- */
.gx-grid{display:grid; gap:16px; margin-top:32px; grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.gx-grid{grid-template-columns:repeat(4,1fr)}}
.gx{margin:0; display:block; text-decoration:none; color:var(--ink)}
.gx-m{position:relative; aspect-ratio:9/16; border-radius:18px; overflow:hidden; background:var(--noche); box-shadow:var(--shadow)}
.gx-m video{width:100%; height:100%; object-fit:cover; display:block}
.gx figcaption{padding:10px 2px 0}
.gx figcaption b{display:block; font-size:15px} .gx figcaption span{font-size:13.5px; color:var(--muted)}
.rph-scr .snd{top:44px; bottom:auto; right:12px; z-index:2}
.snd{position:absolute; right:8px; bottom:8px; width:34px; height:34px; border:0; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:15px; line-height:1}
.sld{position:absolute; inset:0}
.sld img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s}
.sld img.on{opacity:1}
.sld-4x5 img{top:50%; bottom:auto; height:auto; transform:translateY(-50%)}
html[data-lang="es"] .sld img.en, html[data-lang="en"] .sld img.es{display:none}
.dots{position:absolute; left:0; right:0; bottom:12px; display:flex; justify-content:center; gap:5px}
.dots i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.4)} .dots i.on{background:#fff}
.bars{position:absolute; top:10px; left:10px; right:10px; display:flex; gap:4px}
.bars i{flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.35)} .bars i.on{background:#fff}
.gx-cta .gx-m{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:20px; background:radial-gradient(400px 300px at 50% 0%, rgba(34,211,238,.3), transparent 70%), var(--noche); color:#fff; border:1px dashed #3A4A6B}
.gx-cta .gx-m span{font-size:22px; font-weight:700; line-height:1.15}
.gx-cta .gx-m em{font-style:normal; color:var(--cian); font-weight:600}
@media (prefers-reduced-motion:reduce){.rv-st i{animation:none; color:#F59E0B}}
/* v2: la ventana de sitio web rota entre las 3 muestras */
.brw-view img{position:absolute; top:0; left:0; opacity:0}
.brw-view img.w1{animation:scrl 6s ease-in-out infinite alternate, wv1 18s infinite}
.brw-view img.w2{animation:scrl 6s ease-in-out infinite alternate, wv2 18s infinite}
.brw-view img.w3{animation:scrl 6s ease-in-out infinite alternate, wv3 18s infinite}
.win.big .brw-view img.w1{animation:scrlb 6s ease-in-out infinite alternate, wv1 18s infinite}
.win.big .brw-view img.w2{animation:scrlb 6s ease-in-out infinite alternate, wv2 18s infinite}
.win.big .brw-view img.w3{animation:scrlb 6s ease-in-out infinite alternate, wv3 18s infinite}
@keyframes wv1{0%,31%{opacity:1} 34%,97%{opacity:0} 100%{opacity:1}}
@keyframes wv2{0%,31%{opacity:0} 34%,64%{opacity:1} 67%,100%{opacity:0}}
@keyframes wv3{0%,64%{opacity:0} 67%,97%{opacity:1} 100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.brw-view img{animation:none !important} .brw-view img.w1{opacity:1}}
.win:not(.big) .sms{max-width:72%; font-size:11px; padding:6px 9px}
.win:not(.big) .rv{margin-top:6px; padding:8px 10px}
.win:not(.big) .rv-tx{font-size:11px; margin-top:4px}
.win:not(.big) .sms-de{display:none}

/* ===== Ronda 4 (5 nov): ventanas animadas rehechas ===== */
/* Lo que aparece lleva data-k; build.py genera sus @keyframes con el ciclo de la ventana (--cyc). */
[data-k]{animation-duration:var(--cyc,12s); animation-iteration-count:infinite; animation-timing-function:ease; animation-fill-mode:both; opacity:0}
.win .pad.fx{display:flex; flex-direction:column}
.feed{flex:1; min-height:0; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; margin-top:6px}
.mi{flex:none; overflow:hidden; padding-left:3px; padding-right:3px}
.mi .bub{margin-top:0; width:fit-content; max-width:84%}
.mi .bub.me{margin-left:auto}
.bub.typing{display:flex; gap:3px; padding:9px 11px}
.bub.typing i{width:5px; height:5px; border-radius:50%; background:var(--muted); animation:ty 1s infinite}
.bub.typing i:nth-child(2){animation-delay:.15s} .bub.typing i:nth-child(3){animation-delay:.3s}
.bub time{display:block; margin-top:2px; font-size:9px; opacity:.65; text-align:right}
.win.big .bub time{font-size:11px}
.win:not(.big) .bub{padding:6px 9px; font-size:11px}
.sw{position:relative; display:block; height:1.35em}
.sw > *{position:absolute; left:0; top:0; white-space:nowrap}
.sw-in{display:inline-block; width:3.4em; vertical-align:bottom}
.sysc{display:flex; gap:8px; align-items:center; padding:8px 10px; border-radius:10px; background:#ECFDF3; border:1px solid #BBF7D0}
.sysc i{flex:none; width:22px; height:22px; border-radius:50%; background:#16A34A; color:#fff; display:flex; align-items:center; justify-content:center; font-style:normal; font-weight:700; font-size:12px}
.sysc b{display:block; font-size:12px; color:#166534} .sysc small{display:block; font-size:10.5px; color:#3F6B50}
.win.big .sysc{padding:11px 13px} .win.big .sysc b{font-size:14px} .win.big .sysc small{font-size:12.5px}
.toast b{font-weight:600}
.win:not(.big) .toast{font-size:10.5px; padding:7px 9px}
/* llamada */
.cl-h{display:flex; align-items:center; gap:9px}
.cl-av{flex:none; width:30px; height:30px; border-radius:50%; background:#16A34A; color:#fff; display:flex; align-items:center; justify-content:center; animation:ring 1.6s infinite}
.cl-av svg{width:15px; height:15px}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)} 70%,100%{box-shadow:0 0 0 10px rgba(22,163,74,0)}}
.cl-tx{flex:1; min-width:0; line-height:1.25}
.cl-tx b{display:block; font-size:12.5px}
.cl-tx small{font-size:10.5px; color:var(--muted)}
.win.big .cl-av{width:42px; height:42px} .win.big .cl-av svg{width:20px; height:20px}
.win.big .cl-tx b{font-size:15px} .win.big .cl-tx small{font-size:12.5px}
.win:not(.big) .wave{display:none}
.win.big .wave{height:30px; margin-top:12px}
/* whatsapp */
.pad.wa{background:#EFE7DD}
.wa-h{display:flex; align-items:center; gap:8px; margin:-12px -12px 0; padding:9px 12px; background:#075E54; color:#fff}
.win.big .wa-h{margin:-22px -22px 0; padding:14px 22px}
.wa .wa-h .cl-tx small{color:#C8F1E6}
.wa-av{flex:none; width:28px; height:28px; border-radius:50%; background:#fff; color:#075E54; font-weight:700; font-size:11px; display:flex; align-items:center; justify-content:center}
.win.big .wa-av{width:38px; height:38px; font-size:13px}
.wa-ch{flex:none; font-size:10px; font-weight:600; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.18)}
.wa .bub{background:#fff; color:var(--ink); border-radius:10px 10px 10px 3px}
.wa .bub.me{background:#D9FDD3; border-radius:10px 10px 3px 10px}
.wa .bub.me time{color:#3A9BC1; opacity:1}
/* citas */
.cal i{position:relative}
.cal i.x span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:9px; color:#94A3B8}
.win.big .cal i.x span{font-size:11px}
.ev{position:absolute; inset:1px; border-radius:5px; background:var(--cian-texto); color:#fff; display:flex; align-items:center; justify-content:center; gap:4px; font-size:10px}
.ev em{font-style:normal; display:none}
.win.big .ev{flex-direction:column; gap:0; font-size:12px; line-height:1.15} .win.big .ev em{display:block; font-size:10.5px; opacity:.85}
.ev-ok{position:absolute; top:-7px; right:-7px; width:17px; height:17px; border-radius:50%; background:#16A34A; color:#fff; font-size:9px; display:flex; align-items:center; justify-content:center; border:2px solid #fff}
.nt{position:absolute; left:10px; right:10px; top:8px; z-index:2; display:flex; gap:8px; padding:8px 10px; border-radius:14px; background:rgba(255,255,255,.97); box-shadow:0 12px 28px rgba(11,18,32,.22); font-size:10.5px; line-height:1.3}
.nt-ic{flex:none; width:24px; height:24px; border-radius:7px; background:#22C55E; color:#fff; display:flex; align-items:center; justify-content:center}
.nt-ic svg{width:14px; height:14px}
.nt-tx b{display:flex; justify-content:space-between; font-size:11px; margin-bottom:1px}
.nt-tx b small{font-weight:400; color:var(--muted)}
.win.big .nt{left:22px; right:22px; top:18px; padding:12px 14px; font-size:13px} .win.big .nt-tx b{font-size:13.5px} .win.big .nt-ic{width:30px; height:30px}
/* crm */
.wtop .kb-new{margin-left:auto; padding:2px 8px; border-radius:999px; background:#16A34A; color:#fff; font-size:10px; text-transform:none; letter-spacing:0}
.kb h5{line-height:14px; height:14px}
.win.big .kb h5{line-height:16px; height:16px}
.kc{box-sizing:border-box}
.kc b{display:block; font-weight:600; font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kc small, .kc .sw{display:block; font-size:9.5px; line-height:1.35; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kc .sw{height:1.35em; overflow:visible}
.win.big .kc b{font-size:13px} .win.big .kc small, .win.big .kc .sw{font-size:11.5px}
.kc.ph{visibility:hidden}
.kb > .kc.mv{min-height:0; border:0; background:#fff; position:absolute; top:26px; left:6px; margin:0; width:calc((100% - 12px) / 3 - 12px); z-index:2; box-shadow:inset 0 0 0 1.5px var(--cian-profundo), 0 8px 18px rgba(8,145,178,.25); animation:kbmv2 12s ease-in-out infinite}
.win.big .kb > .kc.mv{top:28px; padding:9px 10px}
.kc.mv .sw small{color:var(--cian-texto); font-weight:600}
@keyframes kbmv2{0%{left:6px; opacity:0} 4%,26%{left:6px; opacity:1} 32%,56%{left:calc((100% - 12px) / 3 + 12px); opacity:1} 62%,92%{left:calc(2 * (100% - 12px) / 3 + 18px); opacity:1} 96%,100%{left:calc(2 * (100% - 12px) / 3 + 18px); opacity:0}}
/* resenas */
.gb{display:flex; align-items:center; gap:8px; padding-bottom:8px; border-bottom:1px solid var(--border)}
.gb .gg{flex:none; width:26px; height:26px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.18); display:flex; align-items:center; justify-content:center; font-weight:700; color:#4285F4; font-size:14px}
.gb-r{display:flex; align-items:center; gap:4px; font-size:11px; color:var(--muted)}
.gb-st{color:#F59E0B; letter-spacing:1px}
.gb-new{flex:none; padding:3px 9px; border-radius:999px; background:#16A34A; color:#fff; font-weight:600; font-size:10.5px}
.win.big .gb .gg{width:34px; height:34px; font-size:18px} .win.big .gb-r{font-size:13px} .win.big .gb-new{font-size:12.5px; padding:5px 11px}
.feed .sms{max-width:88%}
.feed .rv{margin-top:0}
.rv-st i{animation-duration:12s}
/* anuncios */
.scn{position:absolute; inset:0}
.g-top{display:flex; align-items:center; gap:8px}
.g-logo{font-size:15px; letter-spacing:-.02em} .g-logo b{font-weight:700}
.g-logo .b{color:#4285F4} .g-logo .r{color:#EA4335} .g-logo .y{color:#FBBC05} .g-logo .gr{color:#34A853}
.win.big .g-logo{font-size:22px}
.g-top .srch{flex:1; min-width:0}
.srch .tw{display:inline-block; width:auto; border-right:0; white-space:nowrap; animation:twc var(--cyc,16s) steps(24) infinite}
@keyframes twc{0%{clip-path:inset(0 100% 0 0)} 9%,100%{clip-path:inset(0 0 0 0)}}
.ad{position:relative; margin-top:10px}
.ad small{display:block; font-weight:400; color:var(--ink); font-size:10px} .ad small b{display:inline; font-weight:700; color:var(--ink)}
.ad strong{display:block; color:#1A0DAB; font-weight:600; font-size:12px; margin:2px 0}
.ad > span{display:block; color:#4D5156}
.ad > span.ad-lk{display:flex; gap:6px; margin-top:8px}
.ad-lk em{font-style:normal; font-size:11px; color:#1A0DAB; padding:2px 9px; border:1px solid #DADCE0; border-radius:999px}
.win:not(.big) .ad > span.ad-lk{display:none}
.win.big .ad small{font-size:12px} .win.big .ad strong{font-size:17px}
.tap{position:absolute; right:30%; bottom:14px; width:26px; height:26px; border-radius:50%; background:rgba(26,13,171,.28); box-shadow:0 0 0 8px rgba(26,13,171,.1)}
.fbs .pad{background:#F0F2F5}
.fb-card{background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 2px 8px rgba(11,18,32,.1)}
.fb-h{display:flex; align-items:center; gap:7px; padding:7px 9px}
.fb-logo{flex:none; width:24px; height:24px}
.fb-h b{display:block; font-size:11.5px} .fb-h small{display:block; font-size:9.5px; color:#65676B}
.fb-h em{margin-left:auto; font-style:normal; color:#65676B}
.fb-tx{margin:0; padding:0 9px 6px; font-size:11px}
.fb-img{height:58px; overflow:hidden} .fb-img img{display:block; width:100%; height:100%; object-fit:cover}
.fb-cta{position:relative; display:flex; align-items:center; gap:8px; padding:6px 9px; background:#F0F2F5}
.fb-cta > span{flex:1; min-width:0} .fb-cta small{display:block; font-size:8.5px; color:#65676B} .fb-cta b{display:block; font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fb-cta em{flex:none; font-style:normal; font-weight:600; font-size:10.5px; padding:5px 9px; border-radius:6px; background:#E4E6EB}
.fb-cta .tap{right:18px; bottom:6px; background:rgba(24,119,242,.3); box-shadow:0 0 0 8px rgba(24,119,242,.12)}
.fb-re{display:flex; justify-content:space-between; padding:7px 9px; font-size:10.5px; color:#65676B}
.win:not(.big) .fb-re{display:none}
.win.big .fb-logo{width:34px; height:34px} .win.big .fb-h{padding:10px 12px} .win.big .fb-h b{font-size:14px} .win.big .fb-h small{font-size:11.5px}
.win.big .fb-tx{font-size:13.5px; padding:0 12px 8px} .win.big .fb-img{height:140px}
.win.big .fb-cta{padding:9px 12px} .win.big .fb-cta small{font-size:10.5px} .win.big .fb-cta b{font-size:13px} .win.big .fb-cta em{font-size:13px; padding:7px 12px}
@media (prefers-reduced-motion:reduce){
  [data-k]{animation:none !important; opacity:1; max-height:none}
  .sw > *:not(:last-child), .scn.fbs, .mi:has(.typing){display:none}
  .kb > .kc.mv{animation:none; left:calc(2 * (100% - 12px) / 3 + 18px)}
  .srch .tw{animation:none}
}
/* hero: chips sin doble ovalo, sin tarjeta de grafica y etiqueta separada del telefono */
.hx-chips span span{padding:0; border:0; background:none; box-shadow:none; border-radius:0}
.hx-vis{flex-direction:column; align-items:center}
.hx-ej{position:static; margin:18px 0 0; text-align:center}
/* recepcionista: bloque para llamar a Vega (linea de demo) */
.demo-vega{background:var(--noche); color:#fff}
.dv{display:grid; gap:28px; align-items:center}
@media (min-width:900px){.dv{grid-template-columns:1.2fr .8fr; gap:56px}}
.dv-tx h2{color:#fff}
.dv-tx > p{color:var(--muted-dark); font-size:17px; margin-top:12px}
.dv-btn{margin-top:22px; display:inline-flex; align-items:center; gap:10px}
.dv-btn svg{width:20px; height:20px}

/* boton de llamada a la demo (opcion C "Agente en linea") */
.ca{display:inline-flex; align-items:center; gap:14px; margin-top:22px; background:var(--noche); color:#fff; border:1px solid var(--cian-profundo); border-radius:999px; padding:12px 22px 12px 14px; font-weight:600; font-size:16px; box-shadow:0 8px 24px rgba(8,145,178,.35); animation:ca-buzz 2s infinite; max-width:100%}
.ca:hover{border-color:var(--cian)}
.ca-dot{flex:none; width:10px; height:10px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:ca-live 1.6s infinite}
.ca-wave{flex:none; display:inline-flex; gap:3px; align-items:center; height:22px}
.ca-wave i{width:3px; border-radius:2px; background:linear-gradient(var(--cian),#8B5CF6); animation:ca-bar 1s ease-in-out infinite}
.ca-wave i:nth-child(1){animation-delay:-.9s}.ca-wave i:nth-child(2){animation-delay:-.7s}.ca-wave i:nth-child(3){animation-delay:-.5s}.ca-wave i:nth-child(4){animation-delay:-.3s}.ca-wave i:nth-child(5){animation-delay:-.1s}
.ca-txt{display:flex; flex-direction:column; line-height:1.15}
.ca-txt small{display:block; font-weight:400; color:#9FB3C8; font-size:12px}
@keyframes ca-buzz{0%,82%,100%{transform:translate(0) rotate(0)}84%{transform:translate(-1.5px,0) rotate(-1.2deg)}86%{transform:translate(1.5px,0) rotate(1.2deg)}88%{transform:translate(-1.5px,0) rotate(-1deg)}90%{transform:translate(1px,0) rotate(.8deg)}92%{transform:translate(0) rotate(0)}}
@keyframes ca-live{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@keyframes ca-bar{0%,100%{height:5px}50%{height:22px}}
@media (max-width:600px){.ca{font-size:15px}}
@media (prefers-reduced-motion:reduce){.ca,.ca-dot,.ca-wave i{animation:none}}
.ca-hero{margin-top:0}
.ca-mob{display:none}
@media (max-width:760px){.ca-desk{display:none}.ca-mob{display:inline-flex}}
.demo-vega .dv-tx > p.dv-nota{font-size:13px; margin-top:14px}
.dv-fr{padding:24px; border-radius:var(--r-lg); background:var(--panel); border:1px solid var(--line-dark)}
.dv-fr p{margin:0; font-weight:600; color:var(--cian)}
.dv-fr ol{margin:12px 0 0; padding-left:20px; display:grid; gap:10px; font-size:16px}
.dv-fr .dv-dur{margin-top:14px; font-weight:400; font-size:13px; color:var(--muted-dark)}
.hx-ctas .btn svg.ic-sm{width:18px; height:18px}
/* ajustes tras revisar cuadro por cuadro */
.win .kb > .kc.mv{min-height:0}
.kc .sw > *{right:0; overflow:hidden; text-overflow:ellipsis}
.cal .ev b{color:#fff; font-size:inherit; font-weight:700; text-align:center}
.win.big .cal i{height:52px}
.nt{background:#fff}
.feed.top{justify-content:flex-start}
.g-org{margin-top:12px; display:grid; gap:10px}
.g-org div{display:grid; gap:5px}
.g-org i{display:block; height:7px; border-radius:4px; background:#E2E8F0}
.g-org i:first-child{width:45%; background:#C7D2FE} .g-org i:nth-child(2){width:90%} .g-org i:nth-child(3){width:70%}
.win:not(.big) .g-org{display:none}
.win:not(.big) .feed.top{justify-content:flex-end}
.hx-chips{z-index:3}
.dv-tx h2{font-size:clamp(30px, 3.4vw, 44px); margin-top:10px}
/* formulario conectado: campo trampa para bots, error de envio y boton enviando */
.pf-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.pf-err{margin:0 0 14px; padding:12px 14px; border-radius:10px; background:#FEF3F2; border:1px solid #FECDCA; color:#B42318; font-size:14.5px}
.pf-err a{color:#B42318; font-weight:600}
.btn.enviando{opacity:.6; pointer-events:none}
@keyframes kd24_70{0%,24%{opacity:0;transform:translateY(-16px)} 27%,70%{opacity:1;transform:none} 73%,100%{opacity:0;transform:translateY(-16px)}}
@keyframes kf10_46{0%,10%{opacity:0;transform:translateY(12px)} 13%,46%{opacity:1;transform:none} 49%,100%{opacity:0;transform:translateY(12px)}}
@keyframes kf30_46{0%,30%{opacity:0;transform:translateY(12px)} 33%,46%{opacity:1;transform:none} 49%,100%{opacity:0;transform:translateY(12px)}}
@keyframes kf46_92{0%,46%{opacity:0;transform:translateY(12px)} 49%,92%{opacity:1;transform:none} 95%,100%{opacity:0;transform:translateY(12px)}}
@keyframes kf58_92{0%,58%{opacity:0;transform:translateY(12px)} 61%,92%{opacity:1;transform:none} 95%,100%{opacity:0;transform:translateY(12px)}}
@keyframes kf74_96{0%,74%{opacity:0;transform:translateY(12px)} 77%,96%{opacity:1;transform:none} 99%,100%{opacity:0;transform:translateY(12px)}}
@keyframes km14_22{0%,14%{max-height:0;opacity:0;padding-top:0;padding-bottom:0} 17%,22%{max-height:200px;opacity:1;padding-top:3px;padding-bottom:3px} 25%,100%{max-height:0;opacity:0;padding-top:0;padding-bottom:0}}
@keyframes km20_92{0%,20%{max-height:0;opacity:0;padding-top:0;padding-bottom:0} 23%,92%{max-height:200px;opacity:1;padding-top:3px;padding-bottom:3px} 95%,100%{max-height:0;opacity:0;padding-top:0;padding-bottom:0}}
@keyframes km21_92{0%,21%{max-height:0;opacity:0;padding-top:0;padding-bottom:0} 24%,92%{max-height:200px;opacity:1;padding-top:3px;padding-bottom:3px} 95%,100%{max-height:0;opacity:0;padding-top:0;padding-bottom:0}}
@keyframes km22_92{0%,22%{max-height:0;opacity:0;padding-top:0;padding-bottom:0} 25%,92%{max-height:200px;opacity:1;padding-top:3px;padding-bottom:3px} 95%,100%{max-height:0;opacity:0;padding-top:0;padding-bottom:0}}
@keyframes km31_38{0%,31%{max-height:0;opacity:0;padding-top:0;padding-bottom:0} 34%,38%{max-height:200px;opacity:1;padding-top:3px;padding-bottom:3px} 41%,100%{max-height:0;opacity:0;padding-top:0;padding-bottom:0}}
@keyframes km36_92{0%,36%{max-height:0;opacity:0;padding-top:0;padding-bottom:0} 39%,92%{max-height:200px;opacity:1;padding-top:3px;padding-bottom:3px} 95%,100%{max-height:0;opacity:0;padding-top:0;padding-bottom:0}}
@keyframes km38_92{0%,38%{max-height:0;opacity:0;padding-top:0;padding-bottom:0} 41%,92%{max-height:200px;opacity:1;padding-top:3px;padding-bottom:3px} 95%,100%{max-height:0;opacity:0;padding-top:0;padding-bottom:0}}
@keyframes km46_52{0%,46%{max-height:0;opacity:0;padding-top:0;padding-bottom:0} 49%,52%{max-height:200px;opacity:1;padding-top:3px;padding-bottom:3px} 55%,100%{max-height:0;opacity:0;padding-top:0;padding-bottom:0}}
@keyframes km4_92{0%,4%{max-height:0;opacity:0;padding-top:0;padding-bottom:0} 7%,92%{max-height:200px;opacity:1;padding-top:3px;padding-bottom:3px} 95%,100%{max-height:0;opacity:0;padding-top:0;padding-bottom:0}}
@keyframes km50_92{0%,50%{max-height:0;opacity:0;padding-top:0;padding-bottom:0} 53%,92%{max-height:200px;opacity:1;padding-top:3px;padding-bottom:3px} 95%,100%{max-height:0;opacity:0;padding-top:0;padding-bottom:0}}
@keyframes km52_92{0%,52%{max-height:0;opacity:0;padding-top:0;padding-bottom:0} 55%,92%{max-height:200px;opacity:1;padding-top:3px;padding-bottom:3px} 95%,100%{max-height:0;opacity:0;padding-top:0;padding-bottom:0}}
@keyframes km60_92{0%,60%{max-height:0;opacity:0;padding-top:0;padding-bottom:0} 63%,92%{max-height:200px;opacity:1;padding-top:3px;padding-bottom:3px} 95%,100%{max-height:0;opacity:0;padding-top:0;padding-bottom:0}}
@keyframes km64_92{0%,64%{max-height:0;opacity:0;padding-top:0;padding-bottom:0} 67%,92%{max-height:200px;opacity:1;padding-top:3px;padding-bottom:3px} 95%,100%{max-height:0;opacity:0;padding-top:0;padding-bottom:0}}
@keyframes km9_92{0%,9%{max-height:0;opacity:0;padding-top:0;padding-bottom:0} 12%,92%{max-height:200px;opacity:1;padding-top:3px;padding-bottom:3px} 95%,100%{max-height:0;opacity:0;padding-top:0;padding-bottom:0}}
@keyframes kp22_30{0%,22%{opacity:0;transform:scale(.6)} 25%,30%{opacity:1;transform:none} 33%,100%{opacity:0;transform:scale(.6)}}
@keyframes kp2_30{0%,2%{opacity:0;transform:scale(.6)} 5%,30%{opacity:1;transform:none} 33%,100%{opacity:0;transform:scale(.6)}}
@keyframes kp62_92{0%,62%{opacity:0;transform:scale(.6)} 65%,92%{opacity:1;transform:none} 95%,100%{opacity:0;transform:scale(.6)}}
@keyframes kp66_74{0%,66%{opacity:0;transform:scale(.6)} 69%,74%{opacity:1;transform:none} 77%,100%{opacity:0;transform:scale(.6)}}
@keyframes kp72_92{0%,72%{opacity:0;transform:scale(.6)} 75%,92%{opacity:1;transform:none} 95%,100%{opacity:0;transform:scale(.6)}}
@keyframes kp8_92{0%,8%{opacity:0;transform:scale(.6)} 11%,92%{opacity:1;transform:none} 95%,100%{opacity:0;transform:scale(.6)}}
@keyframes ks0_14{0%,0%{opacity:0} 3%,14%{opacity:1} 17%,100%{opacity:0}}
@keyframes ks0_30{0%,0%{opacity:0} 3%,30%{opacity:1} 33%,100%{opacity:0}}
@keyframes ks0_46{0%,0%{opacity:0} 3%,46%{opacity:1} 49%,100%{opacity:0}}
@keyframes ks0_72{0%,0%{opacity:0} 3%,72%{opacity:1} 75%,100%{opacity:0}}
@keyframes ks0_9{0%,0%{opacity:0} 3%,9%{opacity:1} 12%,100%{opacity:0}}
@keyframes ks14_22{0%,14%{opacity:0} 17%,22%{opacity:1} 25%,100%{opacity:0}}
@keyframes ks22_46{0%,22%{opacity:0} 25%,46%{opacity:1} 49%,100%{opacity:0}}
@keyframes ks30_60{0%,30%{opacity:0} 33%,60%{opacity:1} 63%,100%{opacity:0}}
@keyframes ks46_52{0%,46%{opacity:0} 49%,52%{opacity:1} 55%,100%{opacity:0}}
@keyframes ks50_96{0%,50%{opacity:0} 53%,96%{opacity:1} 99%,100%{opacity:0}}
@keyframes ks52_100{0%,52%{opacity:0} 55%,100%{opacity:1}}
@keyframes ks60_100{0%,60%{opacity:0} 63%,100%{opacity:1}}
@keyframes ks72_100{0%,72%{opacity:0} 75%,100%{opacity:1}}
@keyframes ks9_100{0%,9%{opacity:0} 12%,100%{opacity:1}}
@keyframes kst28{0%,28%{color:#D9E1EA;transform:scale(1)} 30%{color:#F59E0B;transform:scale(1.4)} 32%,92%{color:#F59E0B;transform:scale(1)} 95%,100%{color:#D9E1EA}}
@keyframes kst31{0%,31%{color:#D9E1EA;transform:scale(1)} 33%{color:#F59E0B;transform:scale(1.4)} 35%,92%{color:#F59E0B;transform:scale(1)} 95%,100%{color:#D9E1EA}}
@keyframes kst34{0%,34%{color:#D9E1EA;transform:scale(1)} 36%{color:#F59E0B;transform:scale(1.4)} 38%,92%{color:#F59E0B;transform:scale(1)} 95%,100%{color:#D9E1EA}}
@keyframes kst37{0%,37%{color:#D9E1EA;transform:scale(1)} 39%{color:#F59E0B;transform:scale(1.4)} 41%,92%{color:#F59E0B;transform:scale(1)} 95%,100%{color:#D9E1EA}}
@keyframes kst40{0%,40%{color:#D9E1EA;transform:scale(1)} 42%{color:#F59E0B;transform:scale(1.4)} 44%,92%{color:#F59E0B;transform:scale(1)} 95%,100%{color:#D9E1EA}}
