/* Mi Sitio Web (versión 2). Sistema de UI UX Pro Max: patrón "Interactive 3D Configurator", estilo Kinetic Typography,
   paleta violeta creador + azul de marca + rosa de acción, tipografías Outfit + Work Sans.
   Componentes adaptados de Magic UI / 21st.dev: 3D Marquee, Safari, Border Beam, Word Rotate, Animated Beam,
   Bento Grid, Number Ticker, Shimmer Button. Movimiento con GSAP (SplitText, ScrollTrigger). */
:root{--bg:#FFFFFF;--soft:#F7F5FF;--fg:#0F172A;--fg2:#334155;--muted:#475569;--muted2:#64748B;--border:#E7E3FA;--border2:#D3CCF5;
  --v:#7C3AED;--v-d:#6D28D9;--v-soft:#EDE7FE;--b:#2563EB;--b-soft:#DBE7FF;--pk:#EC4899;--pk-soft:#FCE7F3;--g:#059669;--g-soft:#D1FAE5;--ease:cubic-bezier(.16,1,.3,1)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--fg);font-family:'Work Sans',system-ui,sans-serif;font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
:is(div,section,article,aside,form,label,header,nav,ul,li,figure,main){min-width:0}
img{max-width:100%;display:block}
svg{max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:'Outfit',system-ui,sans-serif;font-weight:700;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
:focus-visible{outline:3px solid var(--v);outline-offset:3px;border-radius:6px}
.wrap{max-width:1260px;margin:0 auto;padding:0 24px}
.sec{padding:112px 0}
.h2{font-size:clamp(34px,4.8vw,64px)}
.lead{font-size:18.5px;color:var(--muted);max-width:36em;text-wrap:pretty}
.head{display:flex;flex-direction:column;gap:16px;margin-bottom:48px;max-width:860px}
.head--c{align-items:center;text-align:center;margin-inline:auto}

.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:14px;font:600 16px/1 'Outfit',system-ui,sans-serif;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,transform .2s;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn svg{width:18px;height:18px}
.btn--v{background:var(--v);color:#fff}
.btn--v:hover{background:var(--v-d)}
.btn--shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-100%);animation:shim 3.2s ease-in-out infinite}
@keyframes shim{55%,100%{transform:translateX(100%)}}
.btn--ghost{background:#fff;color:var(--fg);border-color:var(--border2)}
.btn--ghost:hover{border-color:var(--v);color:var(--v)}
.btn--sm{min-height:42px;padding:0 16px;font-size:14px;border-radius:11px}

.bar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.bar.on{border-color:var(--border)}
.bar .wrap{height:70px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg)}
.logo__m{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--v),var(--b));color:#fff;display:grid;place-items:center}
.logo__m svg{width:20px;height:20px}
.logo b{display:block;font-family:'Outfit',sans-serif;font-size:18.5px;font-weight:700;line-height:1;letter-spacing:-.02em}
.logo small{display:block;font-size:12px;color:var(--muted2);margin-top:3px}
.nav{display:flex;gap:28px;font-family:'Outfit',sans-serif;font-weight:500;font-size:15px}
.nav a{text-decoration:none;color:var(--muted);transition:color .2s}
.nav a:hover{color:var(--v)}
.bar__cta{display:flex;align-items:center;gap:14px}
.bar__cta>a:first-child{text-decoration:none;color:var(--muted);font-weight:600;font-size:14.5px}

/* ---------- Hero: configurador sobre muro 3D de sitios ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;padding:56px 0 80px;background:radial-gradient(1200px 600px at 80% -10%,var(--v-soft),transparent 60%),radial-gradient(900px 500px at 0% 100%,var(--pk-soft),transparent 60%)}
.wall{position:absolute;inset:-10% -20% -10% 30%;z-index:-1;perspective:1600px;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 30%,#000 80%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 80%,transparent);opacity:.55}
.wall__in{display:grid;grid-template-columns:repeat(4,260px);gap:22px;transform:rotateX(52deg) rotateZ(-38deg);transform-style:preserve-3d;transform-origin:center}
.wall__col{display:flex;flex-direction:column;gap:22px;animation:wallUp 38s linear infinite}
.wall__col:nth-child(even){animation-name:wallDown}
@keyframes wallUp{to{transform:translateY(-50%)}}
@keyframes wallDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.wall__site{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 20px 40px -20px rgba(76,29,149,.45);container-type:inline-size}
.hero__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.hero__copy{display:flex;flex-direction:column;gap:22px}
.pill{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;background:#fff;border:1px solid var(--border);font-size:14px;color:var(--fg2)}
.pill b{padding:3px 10px;border-radius:999px;background:var(--v-soft);color:var(--v-d);font-family:'Outfit',sans-serif;font-weight:600;font-size:12.5px}
.hero h1{font-size:clamp(42px,5.6vw,80px)}
.rot{display:inline-grid;vertical-align:bottom;height:1.04em;overflow:hidden}
.rot span{grid-area:1/1;background:linear-gradient(90deg,var(--v),var(--pk));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.hero__lead{font-size:19px;color:var(--muted);max-width:30em}
.rubros{display:flex;flex-wrap:wrap;gap:8px}
.rubros button{min-height:42px;padding:0 15px;border-radius:999px;border:1px solid var(--border2);background:#fff;color:var(--fg2);font:600 14px 'Outfit',sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background-color .2s,color .2s,border-color .2s}
.rubros button i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.rubros button:hover{border-color:var(--v)}
.rubros button[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14.5px;color:var(--fg2)}
.checks li{display:flex;align-items:center;gap:8px}
.checks svg{width:18px;height:18px;color:var(--g)}

/* Safari (Magic UI) */
.safari{position:relative;border-radius:18px;background:#fff;border:1px solid var(--border2);overflow:hidden;box-shadow:0 50px 100px -40px rgba(76,29,149,.45)}
.safari__bar{display:flex;align-items:center;gap:12px;padding:11px 14px;background:#F6F4FC;border-bottom:1px solid var(--border)}
.dots{display:flex;gap:6px}
.dots i{width:11px;height:11px;border-radius:50%;background:#D4CEEA}
.safari__url{flex:1;max-width:380px;margin:0 auto;height:30px;border-radius:9px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden}
.safari__url svg{width:13px;height:13px;color:var(--g);flex:none}
.safari__tag{font-family:'Outfit',sans-serif;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:999px;background:var(--v-soft);color:var(--v-d);white-space:nowrap}
.viewport{position:relative;aspect-ratio:16/10;container-type:inline-size;overflow:hidden;background:#fff}
.site{position:absolute;inset:0}
.beam-border{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;padding:2px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.beam-border::before{content:"";position:absolute;width:160px;aspect-ratio:1;background:linear-gradient(90deg,transparent,var(--v),var(--pk));offset-path:rect(0 auto auto 0 round 18px);offset-anchor:90% 50%;animation:bb 8s linear infinite}
@keyframes bb{to{offset-distance:100%}}

/* ---------- Probador por dispositivo ---------- */
.lab{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);gap:28px;align-items:start}
.lab__side{display:flex;flex-direction:column;gap:6px;position:sticky;top:96px}
.rb{display:grid;grid-template-columns:46px minmax(0,1fr);gap:12px;align-items:center;padding:10px;border-radius:14px;border:1px solid transparent;background:transparent;text-align:left;cursor:pointer;font:inherit;color:inherit;transition:background-color .2s,border-color .2s}
.rb:hover{background:var(--soft)}
.rb[aria-pressed="true"]{background:#fff;border-color:var(--v)}
.rb i{width:46px;height:46px;border-radius:12px;overflow:hidden;background:var(--c)}
.rb i img{width:100%;height:100%;object-fit:cover}
.rb b{display:block;font-family:'Outfit',sans-serif;font-weight:600;font-size:15.5px}
.rb small{color:var(--muted2);font-size:13px}
.devs{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.seg{display:inline-flex;padding:4px;border-radius:12px;background:var(--soft);border:1px solid var(--border)}
.seg button{min-height:40px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:600 14px 'Outfit',sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.seg button svg{width:16px;height:16px}
.seg button[aria-pressed="true"]{background:#fff;color:var(--v-d);box-shadow:0 1px 3px rgba(15,23,42,.12)}
.devs__info{font-size:14px;color:var(--muted2)}
.frame{margin:0 auto;width:100%}
.frame[data-d="tab"] .viewport{aspect-ratio:3/4}
.frame[data-d="cel"] .viewport{aspect-ratio:9/18}
.frame[data-d="tab"] .tpl,.frame[data-d="cel"] .tpl{font-size:2cqw}
.frame[data-d="cel"] .safari__url,.frame[data-d="cel"] .safari__tag{display:none}
.frame[data-d="cel"] .main,.frame[data-d="cel"] .top,.frame[data-d="cel"] .ban{grid-template-columns:1fr!important}
.frame[data-d="cel"] .tpl nav span{display:none}
.frame[data-d="cel"] .cards,.frame[data-d="cel"] .grid,.frame[data-d="cel"] .trust,.frame[data-d="cel"] .row{grid-template-columns:1fr 1fr!important}
.frame[data-d="cel"] .main .ph,.frame[data-d="cel"] .top .ph,.frame[data-d="cel"] .glass{min-height:38cqw}
.spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.spec div{padding:14px 16px;border-radius:14px;background:var(--soft);border:1px solid var(--border)}
.spec small{display:block;font-size:12.5px;color:var(--muted2)}
.spec b{font-family:'Outfit',sans-serif;font-weight:600;font-size:15.5px}
.spec .sw{display:flex;gap:6px;margin-top:4px}
.spec .sw i{width:22px;height:22px;border-radius:7px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}

/* ---------- Pasos con línea que se dibuja al bajar ---------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.steps__line{position:absolute;left:4%;right:4%;top:30px;height:3px;border-radius:2px;background:var(--border)}
.steps__line i{display:block;height:100%;width:100%;border-radius:2px;background:linear-gradient(90deg,var(--v),var(--pk));transform-origin:left;transform:scaleX(0)}
.step{position:relative;display:flex;flex-direction:column;gap:12px}
.step__n{width:62px;height:62px;border-radius:50%;background:#fff;border:3px solid var(--v);display:grid;place-items:center;font-family:'Outfit',sans-serif;font-weight:700;font-size:22px;color:var(--v)}
.step h3{font-size:24px}
.step p{color:var(--muted)}
.step__ui{margin-top:6px;border-radius:16px;background:var(--soft);border:1px solid var(--border);padding:14px;display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.fld{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:10px;background:#fff}
.fld small{color:var(--muted2)}
.fld b{font-weight:600}
.fld em{font-style:normal;color:var(--g);font-size:12px;font-weight:600}
.pub{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border-radius:12px;background:#fff;font-weight:600}
.tg{appearance:none;-webkit-appearance:none;width:52px;height:30px;border-radius:999px;background:#D6D3E0;position:relative;cursor:pointer;flex:none;margin:0;transition:background-color .25s}
.tg::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.tg:checked{background:var(--g)}
.tg:checked::after{transform:translateX(22px)}
.live{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;background:#fff;color:var(--muted2);font-size:13px;transition:background-color .3s,color .3s}
.live i{width:8px;height:8px;border-radius:50%;background:#C4C0D4}
.live.on{background:var(--g-soft);color:#065F46}
.live.on i{background:var(--g);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(5,150,105,.5)}100%{box-shadow:0 0 0 10px rgba(5,150,105,0)}}
.mini-t{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mini-t span{aspect-ratio:1;border-radius:10px}

/* ---------- IA ---------- */
.ai{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:stretch}
.ai__in{border-radius:24px;background:var(--fg);color:#F1F0FF;padding:30px;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden;isolation:isolate}
.ai__in::after{content:"";position:absolute;right:-120px;top:-120px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.75),transparent 70%);z-index:-1}
.ai__in h3{color:#fff;font-size:30px}
.prompt{border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:14px}
.prompt textarea{width:100%;background:transparent;border:0;color:#fff;font:500 16px 'Work Sans',sans-serif;resize:none;outline:none;min-height:72px}
.ai__chips{display:flex;flex-wrap:wrap;gap:8px}
.ai__chips button{min-height:38px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#E4DCFF;font:600 13px 'Outfit',sans-serif;cursor:pointer}
.ai__chips button:hover{background:rgba(255,255,255,.1)}
.ai__out{border-radius:24px;background:var(--soft);border:1px solid var(--border);padding:22px;display:flex;flex-direction:column;gap:10px;min-height:420px}
.ai__st{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted2);margin-bottom:4px}
.blk{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px;border-radius:16px;background:#fff;border:1px solid var(--border)}
.blk i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--c);color:var(--v-d);font-style:normal}
.blk i svg{width:19px;height:19px}
.blk b{display:block;font-family:'Outfit',sans-serif;font-weight:600;font-size:15.5px}
.blk span{color:var(--muted2);font-size:13.5px}
.blk em{font-style:normal;font-size:12px;color:var(--muted2)}
.caret{display:inline-block;width:2px;height:1em;background:var(--v);vertical-align:-2px;animation:blink 1s steps(1) infinite;margin-left:3px}
@keyframes blink{50%{opacity:0}}

/* ---------- Animated Beam ---------- */
.beams{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:80px;padding:44px;border-radius:24px;background:var(--soft);border:1px solid var(--border)}
.beams svg.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.src{position:relative;z-index:1;width:150px;height:150px;border-radius:32px;background:#fff;border:1px solid var(--border2);display:grid;place-items:center;text-align:center;box-shadow:0 20px 40px -24px rgba(76,29,149,.5)}
.src svg{width:46px;height:46px;color:var(--v)}
.src b{display:block;font-family:'Outfit',sans-serif;font-size:14px;margin-top:4px}
.dests{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.dest{display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:16px;background:#fff;border:1px solid var(--border2)}
.dest i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--bgc);color:var(--fgc);font-style:normal;flex:none}
.dest i svg{width:20px;height:20px}
.dest b{display:block;font-family:'Outfit',sans-serif;font-weight:600;font-size:15px}
.dest span{color:var(--muted2);font-size:13px;line-height:1.35}
.others{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--muted)}
.others a{padding:6px 12px;border-radius:999px;border:1px solid var(--border2);text-decoration:none;color:var(--fg2);font-size:13px;transition:border-color .2s,color .2s}
.others a:hover{border-color:var(--v);color:var(--v)}

/* ---------- Bento + Magic Card ---------- */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(210px,auto);gap:14px}
.bx{position:relative;overflow:hidden;border-radius:22px;background:#fff;border:1px solid var(--border);padding:24px;display:flex;flex-direction:column;gap:8px;isolation:isolate}
.bx::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(380px circle at var(--mx,-300px) var(--my,-300px),rgba(124,58,237,.12),transparent 60%);opacity:0;transition:opacity .3s}
.bx:hover::before{opacity:1}
.bx h3{font-size:20px}
.bx p{color:var(--muted);font-size:15px}
.bx i.ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--bgc,var(--v-soft));color:var(--fgc,var(--v-d));font-style:normal;margin-bottom:4px}
.bx i.ic svg{width:20px;height:20px}
.b-2{grid-column:span 2}.b-3{grid-column:span 3}.b-4{grid-column:span 4}
.wa{margin-top:auto;align-self:flex-end;display:flex;align-items:center;gap:10px}
.wa span{padding:10px 14px;border-radius:14px 14px 4px 14px;background:#DCF8C6;font-size:14px;color:#0F172A}
.wa i{width:50px;height:50px;border-radius:50%;background:#25D366;display:grid;place-items:center;color:#fff;font-style:normal;box-shadow:0 10px 20px -8px rgba(37,211,102,.7)}
.wa i svg{width:26px;height:26px}
.map{margin-top:auto;height:110px;border-radius:14px;background:repeating-linear-gradient(0deg,#EEF2F7 0 22px,#E5EAF2 22px 23px),repeating-linear-gradient(90deg,transparent 0 30px,#E5EAF2 30px 31px);position:relative;overflow:hidden}
.map::after{content:"";position:absolute;left:52%;top:40%;width:22px;height:22px;border-radius:50% 50% 50% 0;background:var(--pk);transform:rotate(-45deg);box-shadow:0 8px 14px -6px rgba(236,72,153,.8)}
.stats{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stats div{padding:10px;border-radius:12px;background:var(--soft)}
.stats small{display:block;font-size:12px;color:var(--muted2)}
.stats b{font-family:'Outfit',sans-serif;font-size:22px;font-variant-numeric:tabular-nums}
.pages{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px}
.pages span{padding:7px 12px;border-radius:999px;background:var(--soft);border:1px solid var(--border);font-size:13px;font-weight:600}
.made{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:#0F172A;color:#CBD5E1;font-size:13px}
.made em{font-style:normal;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.12);transition:opacity .3s}
.bx.hide-made .made em{opacity:0}
.wl-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:600;font-size:14.5px;margin-top:6px}

/* ---------- Planes / preguntas / contacto ---------- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.plan{position:relative;border-radius:22px;background:#fff;border:1px solid var(--border);padding:28px;display:flex;flex-direction:column;gap:16px}
.plan .n{font-family:'Outfit',sans-serif;font-size:21px;font-weight:700}
.plan .sub{color:var(--muted2);font-size:14px}
.plan .pr{font-family:'Outfit',sans-serif;font-size:38px;font-weight:700;letter-spacing:-.03em}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--fg2)}
.plan li{display:flex;gap:10px}
.plan li svg{width:20px;height:20px;flex:none;color:var(--v)}
.plan .btn{margin-top:auto}
.plan--top{border:2px solid var(--v);background:linear-gradient(180deg,var(--v-soft),#fff 40%)}
.plan__flag{position:absolute;top:-13px;left:28px;padding:4px 12px;border-radius:999px;background:var(--v);color:#fff;font-family:'Outfit',sans-serif;font-size:12.5px;font-weight:600}
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}
.faq__l{display:flex;flex-direction:column;gap:8px}
.faq details{border-radius:16px;background:#fff;border:1px solid var(--border);padding:0 20px}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:'Outfit',sans-serif;font-weight:600;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:28px;height:28px;border-radius:8px;background:var(--v-soft);color:var(--v-d);display:grid;place-items:center;flex:none;font-style:normal;transition:transform .25s var(--ease)}
.faq summary i svg{width:16px;height:16px}
.faq details[open] summary i{transform:rotate(180deg)}
.faq details p{padding:0 0 18px;color:var(--muted)}
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:24px;overflow:hidden;border:1px solid var(--border);background:#fff}
.contact__ph{position:relative;min-height:440px;background:var(--v-soft)}
.contact__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.contact__ph.broken img{visibility:hidden}
.contact__ov{position:absolute;left:20px;right:20px;bottom:20px;padding:20px;border-radius:16px;background:rgba(255,255,255,.95);display:flex;flex-direction:column;gap:8px}
.contact__ov h2{font-size:clamp(24px,2.6vw,32px)}
.contact__ov ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14.5px;color:var(--fg2)}
.contact__ov li{display:flex;gap:8px;align-items:center}
.contact__ov li svg{width:18px;height:18px;color:var(--g);flex:none}
.form{padding:clamp(24px,4vw,44px);display:flex;flex-direction:column;justify-content:center}
.form form{display:flex;flex-direction:column;gap:14px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px;color:var(--fg2)}
.field input,.field select,.field textarea{font:400 16px 'Work Sans',sans-serif;color:var(--fg);border:1px solid var(--border2);border-radius:12px;padding:12px 14px;width:100%;background:#fff;transition:border-color .2s,box-shadow .2s}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--v);box-shadow:0 0 0 3px var(--v-soft)}
.form small{font-size:13px;color:var(--muted2)}
.ok{display:none;flex-direction:column;align-items:flex-start;gap:12px}
.ok i{width:56px;height:56px;border-radius:16px;background:var(--g-soft);color:var(--g);display:grid;place-items:center}
.ok b{font-family:'Outfit',sans-serif;font-size:26px}
[data-enviado="1"] .form form{display:none}
[data-enviado="1"] .ok{display:flex}
.final{text-align:center;padding:120px 0;background:var(--fg);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.final::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(600px 300px at 50% 0%,rgba(124,58,237,.45),transparent 70%),radial-gradient(500px 260px at 50% 100%,rgba(236,72,153,.3),transparent 70%)}
.final .wrap{display:flex;flex-direction:column;align-items:center;gap:22px}
.final h2{color:#fff;font-size:clamp(38px,6vw,84px);max-width:12em}
.final p{color:#CBD5E1;font-size:18px}
.final .btn--ghost{background:transparent;color:#fff;border-color:#475569}
.foot{background:#0B1020;color:#94A3B8;padding:28px 0;font-size:14px}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;align-items:center}
.foot b{color:#fff}
.foot nav{display:flex;gap:20px}
.foot a{text-decoration:none;font-weight:600;color:#E2E8F0}
.sticky-cta{display:none}

@media (max-width:1080px){
  .hero__grid,.ai{grid-template-columns:minmax(0,1fr)}
  .lab{grid-template-columns:minmax(0,1fr)}
  .lab__side{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans{grid-template-columns:minmax(0,1fr)}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b-3,.b-4{grid-column:span 2}.b-2{grid-column:span 1}
  .wall{inset:-20% -40% -10% -20%;opacity:.25}
}
@media (max-width:860px){
  .nav{display:none}
  .faq,.contact{grid-template-columns:minmax(0,1fr)}
  .beams{grid-template-columns:minmax(0,1fr);justify-items:center;gap:28px;padding:24px}
  .beams svg.lines{display:none}
  .dests{width:100%}
  .steps{grid-template-columns:minmax(0,1fr)}
  .steps__line{display:none}
  .frame[data-d="cel"]{width:70%}
}
@media (max-width:600px){
  .wrap{padding:0 16px}
  .sec{padding:80px 0}
  .bar .wrap{height:62px}
  .logo small,.bar__cta>a:first-child{display:none}
  .actions .btn{width:100%}
  .safari__tag{display:none}
  .lab__side{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rb{grid-template-columns:36px minmax(0,1fr);padding:8px}
  .rb i{width:36px;height:36px}
  .rb small{display:none}
  .spec{grid-template-columns:minmax(0,1fr)}
  .frame[data-d="cel"]{width:86%}
  .dests{grid-template-columns:minmax(0,1fr)}
  .bento{grid-template-columns:minmax(0,1fr)}
  .b-2,.b-3,.b-4{grid-column:span 1}
  .form__row{grid-template-columns:minmax(0,1fr)}
  .contact__ph{min-height:380px}
  .sticky-cta{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;justify-content:center;transform:translateY(140%);transition:transform .4s var(--ease)}
  .sticky-cta.on{transform:none}
  .sticky-cta .btn{width:100%;box-shadow:0 16px 30px -12px rgba(124,58,237,.7)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Plantillas (mini sitios dentro del navegador) ---------- */
.tpl{position:absolute;inset:0;display:flex;flex-direction:column;font-size:1.25cqw;color:var(--tc,#111);background:var(--tb,#fff)}
.tpl img{width:100%;height:100%;object-fit:cover}
.tpl .ph{position:relative;overflow:hidden;background:linear-gradient(140deg,var(--ta,#ddd),var(--tb2,#bbb))}
.tpl .ph.broken img{visibility:hidden}
.tpl nav{display:flex;align-items:center;justify-content:space-between;padding:1.6cqw 3.2cqw;font-size:1.1cqw;gap:2cqw}
.tpl nav b{font-size:1.5cqw}
.tpl nav span{display:flex;gap:2.2cqw;opacity:.8}
.tpl .cta{display:inline-flex;align-items:center;padding:1cqw 2cqw;border-radius:var(--tr,.6cqw);background:var(--ta);color:var(--tca,#fff);font-weight:700;font-size:1.15cqw;white-space:nowrap}
.tpl h4{margin:0;font-family:var(--fd);font-weight:var(--fw,700);line-height:1;letter-spacing:-.02em}
.tpl p{font-family:var(--fb);opacity:.82;line-height:1.45}
.tpl .k{font-family:var(--fb);font-size:1cqw;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.tpl,.tpl nav{font-family:var(--fb)}
/* Corporativa */
.t-corp .main{flex:1;display:grid;grid-template-columns:1fr 1fr}
.t-corp .l{background:#0f2338;color:#f3efe6;padding:4cqw;display:flex;flex-direction:column;justify-content:center;gap:1.6cqw}
.t-corp h4{font-size:4.6cqw}
.t-corp .row{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #e5e1d8}
.t-corp .row div{padding:1.6cqw 3cqw;border-right:1px solid #e5e1d8}
.t-corp .row b{display:block;font-family:var(--fd);font-size:2.2cqw}
/* Profesional */
.t-pro .ban{margin:0 3cqw;border-radius:2cqw;padding:3.6cqw;background:linear-gradient(120deg,#6d5ef8,#a855f7);color:#fff;display:grid;grid-template-columns:1.2fr .8fr;gap:3cqw;align-items:center;flex:1.3}
.t-pro h4{font-size:3.8cqw}
.t-pro .ban .ph{height:100%;border-radius:1.6cqw}
.t-pro .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw;padding:2cqw 3cqw 2.4cqw;flex:.7}
.t-pro .cards div{border-radius:1.4cqw;background:#f4f3ff;padding:1.8cqw}
.t-pro .cards b{display:block;font-family:var(--fd);font-size:1.6cqw}
/* Consultorio */
.t-con .main{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:3cqw;padding:1cqw 4cqw 3cqw;align-items:center}
.t-con h4{font-size:4.4cqw;color:#1f4d45}
.t-con .ph{height:100%;border-radius:12cqw 12cqw 3cqw 3cqw}
.t-con ul{list-style:none;margin:1cqw 0 0;padding:0;display:flex;flex-direction:column;gap:.8cqw;font-size:1.2cqw}
.t-con li{display:flex;align-items:center;gap:1cqw;padding:1cqw 1.4cqw;border-radius:99px;background:#e8f4f0}
.t-con li::before{content:"";width:.8cqw;height:.8cqw;border-radius:50%;background:#2f8f7b}
/* Restaurante */
.t-res{background:#111;color:#f5ead9}
.t-res .ph{position:absolute;inset:0}
.t-res .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.25) 40%,rgba(0,0,0,.75))}
.t-res nav{position:relative;z-index:1;color:#f5ead9}
.t-res .ctr{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1.4cqw}
.t-res h4{font-size:6.6cqw;font-style:italic;font-weight:500}
.t-res .menu{position:relative;z-index:1;display:flex;justify-content:center;gap:4cqw;padding:2cqw;font-family:var(--fd);font-size:1.7cqw;border-top:1px solid rgba(245,234,217,.25)}
/* Taller */
.t-tal{background:#141414;color:#fff}
.t-tal .stripe{height:1cqw;background:repeating-linear-gradient(-45deg,#ffcc00 0 1.2cqw,#141414 1.2cqw 2.4cqw)}
.t-tal .main{flex:1;display:grid;grid-template-columns:1.1fr .9fr}
.t-tal .l{padding:3cqw 4cqw;display:flex;flex-direction:column;justify-content:center;gap:1.4cqw}
.t-tal h4{font-size:5.4cqw;text-transform:uppercase;line-height:.92}
.t-tal h4 em{font-style:normal;color:#ffcc00}
/* Comercio */
.t-com{background:#fff8ef}
.t-com .top{display:grid;grid-template-columns:1fr 1fr;gap:2cqw;padding:0 3cqw;flex:1.1;align-items:center}
.t-com h4{font-size:4.6cqw;color:#e5482a}
.t-com .top .ph{height:92%;border-radius:2cqw;transform:rotate(2deg)}
.t-com .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4cqw;padding:1.6cqw 3cqw 2.4cqw;flex:.9}
.t-com .grid div{border-radius:1.4cqw;background:#fff;box-shadow:0 .4cqw 1.2cqw rgba(0,0,0,.08);padding:1cqw;display:flex;flex-direction:column;gap:.5cqw}
.t-com .grid .ph{flex:1;border-radius:1cqw}
.t-com .grid b{font-size:1.15cqw}
.t-com .grid span{font-family:var(--fd);font-weight:800;color:#e5482a;font-size:1.4cqw}
/* Tecnología */
.t-tec{background:radial-gradient(circle at 80% 10%,#1e3a8a,#0b1020 55%);color:#e6ecff}
.t-tec .main{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:3cqw;padding:2cqw 4cqw 3cqw;align-items:center}
.t-tec h4{font-size:4.4cqw;background:linear-gradient(90deg,#fff,#8fb3ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.t-tec .glass{position:relative;height:100%;border-radius:2cqw;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.t-tec .glass .card{position:absolute;left:2cqw;bottom:2cqw;padding:1.4cqw 1.8cqw;border-radius:1.4cqw;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);font-size:1.2cqw}
/* Servicios */
.t-ser .main{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:3cqw;padding:1cqw 4cqw;align-items:center}
.t-ser h4{font-size:4.2cqw}
.t-ser .ph{height:88%;border-radius:2cqw}
.t-ser .trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4cqw;padding:2cqw 4cqw;background:#0f766e;color:#fff;font-size:1.15cqw}
.t-ser .trust b{display:block;font-family:var(--fd);font-size:2cqw}
.wa-dot{position:absolute;right:2cqw;bottom:2cqw;z-index:2;width:4.6cqw;height:4.6cqw;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 .6cqw 1.4cqw rgba(0,0,0,.25)}
.wa-dot svg{width:55%;height:55%;color:#fff}