/* =====================================================================
   v12.1 · Pulido con reglas UI/UX Pro Max
   - Escala tipográfica única: 12 · 14 · 16 · 18 · 24 · 32/48 · display
   - Texto mínimo 12 px, cuerpo 16 px, interlineado 1.5–1.65
   - Contraste 4.5:1 en texto; espaciado en múltiplos de 8
   - Tres elevaciones; estados hover 200–300 ms; entradas 30–50 ms por ítem
   ===================================================================== */
:root{
 --fs-label:12px;--fs-small:14px;--fs-body:16px;--fs-lead:18px;--fs-h3:24px;
 --fs-h2:clamp(32px,3.4vw,48px);--fs-display:clamp(44px,5vw,72px);
 --e1:0 1px 2px #1a0b4510,0 6px 16px #1a0b450d;
 --e2:0 2px 4px #1a0b4512,0 18px 40px #1a0b451f;
 --e3:0 4px 8px #1a0b4514,0 32px 64px #1a0b4533;
 --hover:240ms;--ease-ui:cubic-bezier(.2,.8,.2,1);
 --section-space:clamp(72px,8vw,120px);
}
body{font-size:var(--fs-body);line-height:1.6}

/* Etiquetas y títulos de sección */
.eyebrow{font-size:var(--fs-label);letter-spacing:.14em;line-height:1.4}
.eyebrow .code{font-size:var(--fs-label);letter-spacing:0}
h2{font-size:var(--fs-h2);line-height:1.08}
.section-heading,.center-heading,.build-heading{margin-bottom:48px}
.section-heading h2,.center-heading h2,.build-heading h2,.faq-layout h2{margin-top:16px}
.center-heading>p:last-child,.deal-hint,.demo-lead,.build-heading>p{font-size:var(--fs-small);line-height:1.6}
.center-heading>p:last-child{max-width:60ch;margin-inline:auto}
@media(min-width:761px){.hero12-copy h1{font-size:var(--fs-display)}.hero12-copy .lead{font-size:var(--fs-lead)}}

/* Botones: estado claro y destello al pasar */
.button{font-size:15px;min-height:48px;padding:12px 24px;position:relative;overflow:hidden;isolation:isolate;transition:translate var(--hover) var(--ease-ui),background var(--hover),box-shadow var(--hover),border-color var(--hover)}
.button>span{display:inline-block;transition:translate var(--hover) var(--ease-ui)}
.button:hover>span{translate:3px -2px}
.button.primary:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,#ffffffa6 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease-ui)}
.button.primary:hover:before{transform:translateX(120%)}
.button.primary:hover{box-shadow:0 10px 28px #b6f02e59}
.button.outline:hover{border-color:var(--purple);background:#f3ecff}
.link-button{font-size:var(--fs-small);transition:background var(--hover),translate var(--hover) var(--ease-ui)}
.link-button:hover{translate:0 -2px}
nav>a:not(.nav-cta){position:relative}
nav>a:not(.nav-cta):after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--lime);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--hover) var(--ease-ui)}
nav>a:not(.nav-cta):hover:after{transform:scaleX(1)}
.site-header.scrolled nav>a:not(.nav-cta):after{background:var(--purple)}
nav{font-size:var(--fs-small)}

/* Portada: la etiqueta del marco va a la derecha, sin tapar la bajada superior */
.sel-frame .dim{left:auto;right:-1px;top:-26px;border-radius:4px 4px 0 4px}
.hero12-copy .eyebrow{margin-bottom:8px}
.trust{font-size:var(--fs-small)}
.sample-tag,.rubro-tabs span{font-size:var(--fs-label)}

/* Secciones como hojas: cada una sube sobre la anterior con esquinas redondeadas */
@media(min-width:761px){
 main>section:not(.hero12),main>.ticker+section{position:relative;z-index:1}
 #propuesta,#demo,#estilos,#planes,#trabajos,#proceso,#preguntas,#contacto{border-radius:40px 40px 0 0;margin-top:-40px;position:relative;z-index:2}
 #propuesta,#estilos,#planes{background:#fff}
 #propuesta{z-index:3}#demo{z-index:4}#estilos{z-index:5}#planes{z-index:6}#trabajos{z-index:7}#proceso{z-index:8}#preguntas{z-index:9}#contacto{z-index:10}
 #propuesta,#estilos,#planes{max-width:none;width:100%;padding-inline:max(32px,calc((100vw - 1160px)/2))}
 #propuesta:before,#estilos:before,#planes:before,#preguntas:before{content:'';position:absolute;left:50%;top:0;width:min(1160px,calc(100% - 64px));height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#d9cbea,transparent)}
 .services-stage{padding-bottom:40px}
 footer{position:relative;z-index:11;background:#fff}
}

/* Tarjetas: elevación común, iluminación que sigue al cursor */
.glow{--mx:50%;--my:50%}
.glow:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--hover);background:radial-gradient(420px circle at var(--mx) var(--my),#ffffff80,transparent 45%);mix-blend-mode:soft-light;z-index:2}
.glow.glow-dark:after{background:radial-gradient(380px circle at var(--mx) var(--my),#c6ff3d33,transparent 45%);mix-blend-mode:normal}
.glow.glow-light:after{background:radial-gradient(380px circle at var(--mx) var(--my),#6c2bff1a,transparent 50%);mix-blend-mode:normal}
@media(hover:hover) and (pointer:fine){.glow:hover:after{opacity:1}}

/* Qué hacemos: reparto automático, sin escena fijada */
.deal.deal4{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-block:72px 24px;height:auto!important}
.deal4 .svc{min-height:320px;transform-style:preserve-3d;will-change:transform}
.deal4 .svc h3{font-size:var(--fs-h3)}
.deal4 .svc p{font-size:15px;line-height:1.55}
.service-label{font-size:var(--fs-label);letter-spacing:.14em}
.deal4 .deal-ya{display:block;position:relative;grid-column:1/-1;justify-self:center;width:150px;margin-top:8px;left:auto;bottom:auto}
.deal4 .deal-dots{display:none!important}
.deal-hint{visibility:visible!important}
.svc{box-shadow:var(--e2)}
@media(hover:hover) and (pointer:fine){.deal4 .svc{transition:box-shadow var(--hover)}.deal4 .svc:hover{box-shadow:var(--e3)}}
.svc-ico{transition:translate .4s var(--ease-ui),rotate .4s var(--ease-ui),scale .4s var(--ease-ui)}
.svc:hover .svc-ico{translate:0 -6px;rotate:-6deg;scale:1.08}
.pdf-line{font-size:var(--fs-small);padding-bottom:88px}
@media(max-width:1000px) and (min-width:761px){.deal.deal4{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.deal.deal4{grid-template-columns:1fr;gap:48px;padding-top:64px}.deal4 .deal-ya{width:120px}}

/* Propuesta: números como insignias, no contornos */
.reason{background:#fff;box-shadow:var(--e1);transition:translate var(--hover) var(--ease-ui),box-shadow var(--hover),border-color var(--hover)}
@media(hover:hover){.reason:hover{translate:0 -6px;box-shadow:var(--e2);border-color:#cdb8f4}}
.reason .r-n{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:14px;margin-bottom:24px;font:700 16px/1 Outfit,sans-serif;letter-spacing:0;color:#fff;-webkit-text-stroke:0;background:linear-gradient(135deg,#8a52ff,#5a1fe0);box-shadow:0 8px 18px #6c2bff40}
.reason h3{font-size:var(--fs-h3);margin-bottom:8px}
.reason p{font-size:15px;line-height:1.6}
.voice p{font-size:15px}
.vtext .vt,.voice .vtext p.vt{color:var(--ink);font-size:15px;line-height:1.55}
.vtext small,.vtime{font-size:var(--fs-label)}

/* Demo y estilos */
.prod{box-shadow:var(--e1);transition:border-color var(--hover),box-shadow var(--hover),translate var(--hover) var(--ease-ui)}
@media(hover:hover){.prod:hover{translate:0 -3px;box-shadow:var(--e2)}}
.prod small,.demo-foot,.port-note{font-size:var(--fs-label)}
.prod small{font-size:13px}
.wa-msg{font-size:14px}
.chip{font-size:var(--fs-small);min-height:44px;transition:background var(--hover),border-color var(--hover),color var(--hover),translate var(--hover) var(--ease-ui)}
.chip:hover{translate:0 -2px;border-color:var(--purple)}
.style-card{box-shadow:var(--e1)}
.style-card p{font-size:var(--fs-small);line-height:1.6}
.browser{box-shadow:var(--e2)}

/* Planes */
.plan12{box-shadow:var(--e1);transition:translate var(--hover) var(--ease-ui),box-shadow var(--hover)}
@media(hover:hover){.plan12:hover{translate:0 -8px;box-shadow:var(--e3)}}
.plan12 .plan-name{font-size:var(--fs-label);letter-spacing:.14em}
.plan12 .plan-for{font-size:var(--fs-small)}
.plan12 li{font-size:15px}
.plan12 .button{font-size:15px}
.recommended{font-size:var(--fs-label)}
.pricing-footnote{font-size:var(--fs-small);line-height:1.6;max-width:820px}
.addon{font-size:15px;box-shadow:var(--e1)}

/* Portafolio, proceso, preguntas, contacto */
.pc-k{font-size:var(--fs-label)}
.pcard p{font-size:var(--fs-small)}
.pcard h3{font-size:var(--fs-h3)}
.build-step>span{border-radius:14px;width:48px;height:48px;font:700 16px/1 Outfit,sans-serif;background:linear-gradient(135deg,#8a52ff,#5a1fe0);box-shadow:0 8px 18px #6c2bff40}
.build-step p{font-size:15px}
.build-status,.build-caption{font-size:var(--fs-small)}
.faq summary{font-size:17px}
.faq details p{font-size:15px;line-height:1.6}
.faq details{transition:background var(--hover),border-color var(--hover),box-shadow var(--hover)}
@media(hover:hover){.faq details:hover{border-color:#cdb8f4;box-shadow:var(--e1)}}
.contact-inner>p:not(.eyebrow){font-size:var(--fs-lead)}
.contact-direct a{font-size:15px}
footer>p,footer>span,footer .motion-toggle,.inline-terms{font-size:13px}
@media(min-width:761px){.plans12{margin-top:112px}}
/* La etiqueta de código del fondo no debe cruzarse con los textos de confianza */
@media(min-width:761px){.hero12 .tok.t6{left:auto;right:46%;bottom:6%;top:auto}.hero12-copy .lead{margin-top:24px}}
@media(min-width:761px){.hero12 .tok.t1{top:12%;left:2%}}