/* Ultimate Web Creator — identidad de agencia: carbón, blanco y azul eléctrico */
:root:root:root{
  --bg:#0B0D12;--surface:#141821;--surface-2:#1B2030;--text:#F5F7FA;--text-2:#A6AFBF;
  --accent:#4169FF;--accent-2:#8DA7FF;--light:#F2F4F8;--light-ink:#0B0D12;--light-muted:#4A5263;
  --hair:#ffffff14;--hair-2:#ffffff24;
  --ink:#0B0D12;--navy:#141821;--gold:#4169FF;--blue:#4169FF;--cream:#F2F4F8;--warm:#F5F7FA;--line:#E1E5EE;--muted:#4A5263;
  --display:"Sora",system-ui,sans-serif;--body:"Inter",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
html body{background:var(--bg);color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.brand-text,.price,.step-index{font-family:var(--display)}
::selection{background:var(--accent);color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}

/* Sin brillos, pulsos ni flotación perpetua */
.wow *,.wow *::before,.wow *::after{animation-iteration-count:1}
.halo,.stage-glow,.btn-gold::after,.btn::after{animation:none!important}
.eyebrow::after,.section-top h2::after{display:none!important}
.scroll-progress{display:none}

/* Botones */
.btn{font-family:var(--display);letter-spacing:0;border-radius:12px}
.btn .arrow,.btn span[aria-hidden],.text-link .arrow{display:inline-block;transition:transform .22s var(--ease)}
.btn:hover .arrow,.btn:hover span[aria-hidden],.text-link:hover .arrow,.work-actions a:hover,.section-tail a:hover span{transform:translateX(4px)}
html .btn-gold{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 10px 30px -12px #4169ffaa}
html .btn-gold:hover{background:#5579ff;box-shadow:0 14px 34px -12px #4169ffcc}
html .btn-dark{background:var(--accent);color:#fff;border-color:var(--accent)}
html .btn-outline{background:transparent;color:inherit;border:1px solid currentColor}

/* Navegación */
html .nav,html .nav.scrolled{background:#0B0D12d9;border-bottom:1px solid var(--hair);backdrop-filter:blur(14px)}
.brand-mark{background:var(--accent)!important;color:#fff!important;border-radius:10px}
.brand-text,.brand-text span{color:var(--text)!important}
.nav-links a{color:var(--text-2)}.nav-links a:hover{color:var(--text)}
.mobile-nav{background:var(--bg)}

.eyebrow{color:var(--accent-2)!important;font-family:var(--body);letter-spacing:.14em}
.eyebrow .dot{background:var(--accent)!important;box-shadow:0 0 0 4px #4169ff33}

/* ---------- Portada ---------- */
html .hero{background:radial-gradient(900px 500px at 85% 20%,#4169ff1f,transparent 60%),var(--bg);color:var(--text);padding-top:128px}
html .hero::before{opacity:.35;background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);background-size:calc(100%/12) 96px;mask-image:linear-gradient(#000,transparent 70%)}
html .hero .hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 24px;align-items:start}
.hero-head{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.hero-head .eyebrow{grid-column:1/-1;display:inline-flex;align-items:center;gap:10px;font-size:12px;text-transform:uppercase}
html .hero h1.hero-title{grid-column:1/12;font-family:var(--display);font-size:clamp(48px,7.4vw,112px);line-height:.98;letter-spacing:-.045em;font-weight:600;color:var(--text);margin:8px 0 0;max-width:none}
.hero-title .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero-title .ln>*{display:inline-block}
html .hero h1 em{font-style:normal;color:var(--accent);background:none;-webkit-text-fill-color:currentColor}
.hero-sub{grid-column:1/6;align-self:start}
html .hero .hero-desc{color:var(--text-2);font-size:18px;line-height:1.6;max-width:440px;margin:0}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:28px}
.hero .text-link{color:var(--accent-2);font-weight:600}
html .hero-meta{color:var(--text-2);border-top:1px solid var(--hair);padding-top:18px;margin-top:28px;display:flex;flex-wrap:wrap;gap:22px;font-size:13px}
html .hero-meta strong{color:var(--text)}

/* Escena protagonista */
.scene{grid-column:5/-1;margin-top:-190px;position:relative}
.scene-flow{display:flex;gap:10px;list-style:none;padding:0;margin:0 0 18px;font-size:12px;color:var(--text-2);flex-wrap:wrap}
.scene-flow li{display:flex;align-items:center;gap:10px}
.scene-flow li+li::before{content:"→";color:var(--accent)}
.scene-stage{position:relative;perspective:1600px;min-height:560px}
.sc{position:absolute;background:var(--surface);border:1px solid var(--hair-2);border-radius:16px;box-shadow:0 40px 80px -30px #000c,0 2px 0 #ffffff08 inset;overflow:hidden}
.sc-web{left:0;top:0;width:78%;transform:rotateY(-6deg) rotateX(3deg);transform-origin:left center;background:#fff;color:#1b1b1b}
.sc-web .db-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#f1f2f5;border-bottom:1px solid #e3e5ea}
.sc-web .db-url{font-size:11px;color:#667;background:#fff;border-radius:6px;padding:3px 10px}
.sc-tag{margin-left:auto;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#4a5263;font-weight:600}
.sc-web .ds-hero img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto}
.sc-form{right:4%;top:38%;width:250px;padding:18px;display:grid;gap:10px;font-size:12px;color:var(--text)}
.sc-form b{font-family:var(--display);font-size:14px}
.sf-f{display:grid;gap:2px;padding:8px 10px;border:1px solid var(--hair-2);border-radius:8px;background:#0B0D12}
.sf-f small{color:var(--text-2);font-size:10px}
.sf-send{background:var(--accent);color:#fff;text-align:center;border-radius:8px;padding:9px;font-weight:600}
.sc-crm{left:22%;bottom:0;width:62%;padding:16px;font-size:12px}
.crm-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.crm-head b{font-family:var(--display)}.crm-head small{color:var(--text-2);font-size:10px}
.crm-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.crm-cols h5{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin:0 0 8px;font-weight:600}
.crm-cols span{display:block;padding:9px 10px;border:1px solid var(--hair);border-radius:8px;margin-bottom:8px;background:#0B0D12;color:var(--text)}
.crm-cols em{display:block;font-style:normal;color:var(--text-2);font-size:10px;margin-top:2px}
.crm-cols .crm-new{border-color:var(--accent);box-shadow:0 0 0 3px #4169ff2e}
.crm-new b{display:block}
.sc-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
.sc-line path{fill:none;stroke:var(--accent);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.sc-web{z-index:1}.sc-crm{z-index:2}.sc-form{z-index:4}
.scene-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:18px;color:var(--text-2);font-size:12px;flex-wrap:wrap}
.scene-replay{background:transparent;border:1px solid var(--hair-2);color:var(--text-2);border-radius:99px;padding:8px 14px;font-size:12px;cursor:pointer;min-height:36px}
.scene-replay:hover{color:var(--text);border-color:var(--accent)}

/* Secuencia (~2 s, una vez) */
.scene.armed .sc,.scene.armed .sc-line path{opacity:0}
.scene.armed .sc-line path{stroke-dashoffset:1}
.scene.play .sc-web{animation:scWeb .7s var(--ease) both}
.scene.play .sc-form{animation:scUp .5s var(--ease) .5s both}
.scene.play .sc-line path{animation:scLine .6s ease-in-out 1s both}
.scene.play .sc-crm{animation:scUp .5s var(--ease) 1.5s both}
.scene.play .crm-new{animation:scNew .5s var(--ease) 1.7s both}
@keyframes scWeb{from{opacity:0;transform:translateY(28px) rotateY(-12deg) rotateX(8deg)}to{opacity:1;transform:rotateY(-6deg) rotateX(3deg)}}
@keyframes scUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes scLine{from{opacity:1;stroke-dashoffset:1}to{opacity:1;stroke-dashoffset:0}}
@keyframes scNew{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Titular por líneas */
.wow .hero-title .ln>*{animation:lnUp .72s var(--ease) both}
.wow .hero-title .ln:nth-child(2)>*{animation-delay:.12s}
.wow .hero-sub .hero-desc{animation:lnUp .7s var(--ease) .22s both}
@keyframes lnUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
/* El botón principal se ve de inmediato */
.hero-actions,.hero-actions *{animation:none!important;opacity:1!important}

/* Formulario */
html .hero .hero-form{grid-column:1/-1;background:var(--surface);color:var(--text);border:1px solid var(--hair-2);border-radius:20px;box-shadow:0 30px 70px -40px #000;margin-top:24px}
html .hero .hero-form::before{background:linear-gradient(90deg,var(--accent),transparent)}
.hero-form h2{color:var(--text)}.hero-form p,.form-note,.consent,.form-step,#selectionSummary{color:var(--text-2)!important}
.hero-form label{color:var(--text)}
html .hero-form input,html .hero-form select,html .hero-form textarea{background:#0B0D12;color:var(--text);border:1px solid var(--hair-2);border-radius:10px}
.hero-form select option{background:#141821;color:var(--text)}
html .hero-form input:focus,html .hero-form select:focus,html .hero-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #4169ff33}
.hero-form input::placeholder,.hero-form textarea::placeholder{color:#7d8698}
.form-error{color:#ff9aa5!important;background:#ff4d6a14;border:1px solid #ff4d6a55}
.form-note button{color:var(--accent-2)}
.success-icon{background:var(--accent)!important;color:#fff!important}
.success h3{color:var(--text)}
html .hero-strip{color:var(--text);border-top:1px solid var(--hair)}
.hero-strip .number{color:var(--accent-2)!important}.hero-strip small{color:var(--text-2)}

/* ---------- Secciones ---------- */
html .section{background:var(--bg);color:var(--text)}
.section h2,.section h3{color:var(--text)}
.section p:not(.mini p):not(.mini-track p),.section-top>p{color:var(--text-2)}
.section-top h2{font-size:clamp(34px,4.6vw,64px);letter-spacing:-.035em;line-height:1.02;font-weight:600}

/* Servicios en filas amplias */
html .solutions-grid{display:block;counter-reset:sol;border-top:1px solid var(--hair)}
html .solution{counter-increment:sol;display:grid;grid-template-columns:80px minmax(0,1.1fr) minmax(0,1fr) minmax(0,300px);gap:32px;align-items:center;padding:36px 0!important;border:0!important;border-bottom:1px solid var(--hair)!important;background:transparent!important;border-radius:0;box-shadow:none!important}
html .solution::before{content:"0" counter(sol);font-family:var(--display);font-size:14px;color:var(--accent-2);align-self:start;padding-top:8px}
.solution .line-icon{display:none}
.solution h3{grid-column:2;font-size:clamp(24px,2.6vw,36px);letter-spacing:-.02em;margin:0}
.solution>p{grid-column:3;margin:0}
.solution .use{grid-column:2;grid-row:2;color:var(--text-2)!important;border:0!important;padding:0!important;margin:0!important;font-size:11px;letter-spacing:.1em}
html .solution .demo{grid-column:4;grid-row:1/3;background:var(--surface);border:1px solid var(--hair-2);border-radius:14px;color:var(--text);margin:0}
.demo *{color:inherit}
.demo small{color:var(--text-2)!important}
.dc-grid .on,.dw-form b,.dm-tabs b{background:var(--accent)!important;color:#fff!important}
.demo-menu em{color:var(--accent-2)!important}
.dk-col span,.dw-form i,.dc-grid span{background:#0B0D12!important;border-color:var(--hair)!important}
.section-tail{border-color:var(--hair)!important}
.section-tail a{color:var(--accent-2)!important}

/* Planes: sección clara */
html .plans{background:var(--light);color:var(--light-ink)}
.plans h2,.plans h3,.plans .price{color:var(--light-ink)}
.plans p:not(.mini p),.plans li,.plans .section-top>p{color:var(--light-muted)}
.plans .eyebrow{color:var(--accent)!important}
html .plan{background:#fff;border:1px solid #DDE2EC;border-radius:18px;box-shadow:none;transform:none!important}
html .plan:hover{border-color:#b9c3dc}
.plan .price{font-size:clamp(44px,4.4vw,60px);letter-spacing:-.04em;font-weight:600}
.plan .price small{font-size:14px;letter-spacing:0;color:var(--light-muted)}
.plan-label{color:var(--accent)!important}
html .plan-featured{background:var(--bg);color:var(--text);border:1.5px solid var(--accent);box-shadow:0 30px 60px -30px #4169ff66;position:relative}
.plan-featured h3,.plan-featured .price{color:var(--text)}
.plan-featured p,.plan-featured li,.plan-featured .price small{color:var(--text-2)}
.plan-featured .plan-label{color:var(--accent-2)!important}
.plan-badge{position:absolute;top:-13px;left:24px;background:var(--accent);color:#fff;font-size:11px;font-weight:600;letter-spacing:.04em;padding:5px 12px;border-radius:99px}
.plan ul li::before{color:var(--accent)!important;background:var(--accent)!important}
.plans .btn-outline{color:var(--light-ink)}
.plan-featured .btn-outline{color:var(--text)}
.billing-note{border-color:#DDE2EC!important}
.billing-note strong,.crm-note strong{color:var(--light-ink)}

/* Portafolio editorial */
html .portfolio{background:var(--bg)}
html .filter{border:1px solid var(--hair-2);color:var(--text-2);transition:background .25s,color .25s,border-color .25s}
html .filter:hover{color:var(--text)}
html .filter[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
html .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;transition:opacity .25s ease,transform .25s ease}
html .work{background:var(--surface);border:1px solid var(--hair-2);border-radius:18px;transform:none!important;box-shadow:none}
html .work:hover{border-color:#4169ff66}
.work-head{background:#0f1219!important;border-color:var(--hair)!important;color:var(--text-2)!important}
.work-head span:last-child{color:var(--accent-2);font-weight:600;letter-spacing:.08em}
html .work .mini{height:360px}
.work .mini img,.work .mini-track{transition:transform .5s var(--ease)!important}
html .work:hover .mini.c img{transform:scale(1.025)!important}
.work-info .tag{color:var(--accent-2)!important}
.work-info h3{font-size:24px;letter-spacing:-.02em}
.work-actions button{color:var(--text)!important;border-color:var(--hair-2)!important}
.work-actions a{color:var(--accent-2)!important;transition:transform .22s var(--ease)}
.portfolio-grid:not([data-count="2"]) .work.is-lead{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-rows:auto 1fr}
.portfolio-grid:not([data-count="2"]) .work.is-lead .work-head{grid-column:1/-1}
.portfolio-grid:not([data-count="2"]) .work.is-lead .mini{height:480px}
.portfolio-grid:not([data-count="2"]) .work.is-lead .work-info{padding:40px;display:flex;flex-direction:column;justify-content:center}
.portfolio-grid:not([data-count="2"]) .work.is-lead h3{font-size:clamp(28px,3vw,40px)}
.demo-footnote{color:var(--text-2)!important}
html .preview-dialog{background:var(--surface);color:var(--text);max-height:90dvh;overflow:auto}
html .preview-dialog[open]{animation:dlgIn .3s var(--ease)}
html .dialog-head{background:var(--surface);border-color:var(--hair)}
.dialog-head h2,.dialog-head button{color:var(--text)}
.dialog-bottom p{color:var(--text-2)}
@keyframes dlgIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}

/* Proceso */
html .process{background:var(--surface);color:var(--text)}
.steps-line i{background:var(--accent)!important}
.step-index{color:var(--accent-2)!important;font-size:40px!important;font-weight:600;letter-spacing:-.03em}
html .step{background:transparent;border-color:var(--hair)!important}
.delivery{background:var(--bg)!important;border-color:var(--hair-2)!important;color:var(--text-2)}
.delivery strong{color:var(--text)}

/* Atención local */
html .local{background:var(--bg)}
.local-map{background:var(--surface)!important;border-color:var(--hair-2)!important}
.local-map svg path,.local-map svg polygon{stroke:var(--accent-2)}
.local-map svg circle{fill:var(--accent)}
.signature .initial{background:var(--accent)!important;color:#fff!important}

/* FAQ */
html .faq{background:var(--bg)}
.faq details{border-color:var(--hair)!important}
.faq summary{color:var(--text)}
.faq summary::after{color:var(--accent-2)!important}

/* Cierre */
html .closing{background:radial-gradient(800px 400px at 20% 0%,#4169ff33,transparent 60%),var(--bg);color:var(--text);padding:140px 0;border-top:1px solid var(--hair)}
html .closing-inner{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;align-items:end}
html .closing h2.closing-title{font-size:clamp(44px,7vw,104px);line-height:.98;letter-spacing:-.045em;color:var(--text);font-weight:600}
.closing p{color:var(--text-2)!important;max-width:520px}
.closing .eyebrow{color:var(--accent-2)!important}
.closing .btn{justify-self:start}

/* Footer y barra móvil */
html .footer{background:#07080c;color:var(--text-2);border-top:1px solid var(--hair)}
.footer a{color:var(--text-2)}.footer a:hover{color:var(--text)}
.footer strong,.footer h3,.footer h4{color:var(--text)}
html .mobile-bar{background:#0B0D12f2!important;border-top:1px solid var(--hair-2)!important}
html .privacy-dialog,dialog:not(.preview-dialog){background:var(--surface);color:var(--text)}

/* Aparición de secciones */
html.rv-on .rv{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
html.rv-on .rv.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:1180px){.scene{grid-column:3/-1;margin-top:-120px}.hero-sub{grid-column:1/7}}
@media(max-width:1023px){
  .hero-sub{grid-column:1/-1}
  .scene{grid-column:1/-1;margin-top:8px}
  html .solution{grid-template-columns:48px minmax(0,1fr) minmax(0,260px);gap:20px}
  .solution>p{grid-column:2}.solution .use{grid-row:auto}
  html .solution .demo{grid-column:3;grid-row:1/4}
}
@media(max-width:760px){
  html .hero{padding-top:104px}
  html .hero h1.hero-title{grid-column:1/-1;font-size:clamp(40px,11.5vw,64px)}
  .hero-actions .btn{width:100%;justify-content:center}
  .scene-stage{min-height:0;perspective:none;display:grid;gap:14px}
  .sc{position:relative;inset:auto!important;width:100%!important;transform:none!important}
  .sc-line{display:none}
  .scene.play .sc-web{animation-name:scUp}
  .ds-links{display:none}
  html .solution{grid-template-columns:1fr;gap:12px;padding:28px 0!important}
  html .solution::before,.solution h3,.solution>p,.solution .use,html .solution .demo{grid-column:1;grid-row:auto}
  html .portfolio-grid{grid-template-columns:1fr}
  .portfolio-grid .work.is-lead{display:block!important}
  html .work .mini,.portfolio-grid .work.is-lead .mini{height:300px!important}
  .portfolio-grid .work.is-lead .work-info{padding:23px!important}
  html .closing{padding:84px 0}
  .closing .btn{justify-self:stretch}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .scene .sc,.scene .sc-line path,html.rv-on .rv{opacity:1!important;transform:none;stroke-dashoffset:0!important}
  .sc-web{transform:rotateY(-6deg) rotateX(3deg)}
}

html .hero::after,.hero .stage-glow{display:none!important}
html .hero{background:radial-gradient(900px 520px at 80% 75%,#4169ff26,transparent 60%),var(--bg)!important}
/* Ajustes de escena */
.sc-line{display:none}
.scene-flow{position:relative;padding-bottom:12px}
.scene-flow::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform-origin:left;transform:scaleX(1)}
.scene.armed .scene-flow::after{transform:scaleX(0)}
.scene.play .scene-flow::after{animation:flowLine 1.4s var(--ease) .3s both}
@keyframes flowLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sc-form{top:14%;right:0}
.sc-crm{left:12%;width:60%}
html .plans p:not(.mini p),html .plans li,html .plans .scope,html .plans .price-caption{color:var(--light-muted)}
html .plan-featured p,html .plan-featured li,html .plan-featured .scope,html .plan-featured .price-caption{color:var(--text-2)}
@media(prefers-reduced-motion:reduce){.scene .scene-flow::after{transform:scaleX(1)!important}}
.scene{grid-column:6/-1}
@media(max-width:1180px){.scene{grid-column:2/-1;margin-top:24px}}
@media(max-width:1023px){.scene{grid-column:1/-1}}
@media(max-width:760px){.crm-cols{grid-template-columns:1fr 1fr}.crm-cols>div:nth-child(3){display:none}}
html .solutions-grid{background:transparent!important;border-radius:0!important;box-shadow:none!important;border-left:0!important;border-right:0!important;padding:0!important}
html .solution h3{color:var(--text)!important}
html .solution>p{color:var(--text-2)!important}