/* ============================================================
Magic Solutions — styles.css
Sistema de diseño completo. Los tokens de marca y el CSS
crítico del hero/nav ya viven en ; aquí va el resto.
============================================================ */
/* ---------- Tipografía global de apoyo ---------- */
h1,h2,h3,h4{font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--texto)}
h2{font-size:clamp(1.7rem,4vw,2.6rem)}
h3{font-size:clamp(1.15rem,2.2vw,1.35rem)}
p{font-weight:400}
strong{font-weight:600}
em{font-style:normal;color:var(--violeta-profundo);font-weight:500}
::selection{background:var(--violeta);color:#fff}
/* ---------- Foco accesible ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
outline:3px solid var(--violeta-profundo);outline-offset:3px;border-radius:6px}
/* ============================================================
NAV (resto, complementa el crítico)
============================================================ */
.nav-menu{display:flex;align-items:center;gap:.4rem;list-style:none}
.nav-link{position:relative;font-weight:500;font-size:.95rem;color:var(--texto);padding:.55rem .85rem;border-radius:8px;transition:color .2s,background .2s}
.nav-link::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.34rem;height:2px;border-radius:2px;
background:var(--grad-marca);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-link:hover{color:var(--violeta-profundo)}
.nav-link.active{color:var(--violeta-profundo)}
.nav-link.active::after{transform:scaleX(1)}
.btn-nav{padding:.6rem 1.15rem;font-size:.9rem}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:none;cursor:pointer;padding:10px}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--texto);border-radius:2px;transition:transform .3s,opacity .3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ============================================================
HERO (resto)
============================================================ */
.hero-inner{position:relative;z-index:2}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem}
.hero-note{margin-top:1.15rem;font-size:.9rem;color:rgba(255,255,255,.6)}
.btn-ghost-light{color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22)}
.btn-ghost-light:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
/* Barrido de brillo (efecto B) en botones primarios */
.btn-primary::before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
transform:skewX(-18deg);animation:sweep 4.5s ease-in-out infinite}
@keyframes sweep{0%,55%{left:-60%}80%,100%{left:130%}}
/* Micro-estallido de chispas (efecto C) — contenedor por JS */
.spark{position:absolute;pointer-events:none;width:8px;height:8px;color:#fff;z-index:5}
/* ============================================================
SECCIONES — estructura general
============================================================ */
.section{padding:clamp(3.5rem,8vw,6.5rem) 0;position:relative}
.section-alt{background:var(--tint)}
.section-dark{background:radial-gradient(900px 500px at 85% 0%,rgba(124,92,252,.35),transparent 55%),linear-gradient(170deg,var(--negro-violeta),var(--morado-oscuro));color:#fff}
.section-dark h2,.section-dark h3,.section-dark h4{color:#fff}
.section-head{max-width:760px;margin-bottom:3rem}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--violeta-profundo);margin-bottom:.9rem}
.eyebrow-light{color:var(--violeta)}
.section-lead{margin-top:1rem;font-size:clamp(1rem,1.6vw,1.15rem);color:var(--texto-sec)}
.section-lead.light,.section-dark .section-lead{color:rgba(255,255,255,.78)}
/* ---------- Grids ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.8rem}
/* ---------- Cards ---------- */
.card{background:#fff;border:1px solid rgba(20,21,42,.07);border-radius:20px;padding:2rem 1.8rem;
transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(20,21,42,.1);border-color:rgba(124,92,252,.35)}
.card h3{margin-bottom:.6rem}
.card p{color:var(--texto-sec)}
/* Problema */
.pain-icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:1.2rem;
background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(167,139,250,.18));color:var(--violeta-profundo)}
.pain-icon svg{width:26px;height:26px}
/* Servicios */
.service{position:relative;overflow:hidden;padding-top:2.3rem}
.service-num{font-size:.95rem;font-weight:700;color:var(--violeta);letter-spacing:.1em;margin-bottom:.4rem}
.service::after{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad-marca);opacity:0;transition:opacity .3s}
.service:hover::after{opacity:1}
.ticks{list-style:none;margin-top:1.2rem;display:flex;flex-direction:column;gap:.7rem}
.ticks li{position:relative;padding-left:1.9rem;font-size:.95rem;color:var(--texto)}
.ticks li::before{content:"";position:absolute;left:0;top:.15rem;width:1.25rem;height:1.25rem;border-radius:50%;
background:var(--grad-marca) center/60% no-repeat;
-webkit-mask:url("data:image/svg+xml;utf8,") center/1.25rem no-repeat;
mask:url("data:image/svg+xml;utf8,") center/1.25rem no-repeat}
/* ============================================================
POR QUÉ / DIFERENCIADOR
============================================================ */
.value-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;margin-bottom:3.5rem}
.value{padding:1.5rem;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}
.value-icn{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;margin-bottom:1rem;
background:rgba(167,139,250,.16);color:var(--violeta)}
.value-icn svg{width:24px;height:24px}
.value h3{margin-bottom:.5rem}
.value p{color:rgba(255,255,255,.72);font-size:.95rem}
.founders-title{font-size:1.15rem;margin-bottom:.5rem;color:rgba(255,255,255,.9)}
.founders-intro{max-width:56ch;margin-bottom:1.6rem;color:rgba(255,255,255,.7);font-size:.98rem}
.founders{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.founder{display:flex;gap:1.2rem;align-items:center;padding:1.6rem;border-radius:18px;min-width:0;
background:linear-gradient(135deg,rgba(124,92,252,.14),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.1)}
.founder-avatar{flex:0 0 62px;width:62px;height:62px;border-radius:16px;display:grid;place-items:center;
font-weight:700;font-size:1.4rem;color:#fff;background:var(--grad-marca);box-shadow:0 8px 20px rgba(109,106,247,.4)}
.founder-photo{flex:0 0 62px;width:62px;height:62px;border-radius:16px;object-fit:cover;box-shadow:0 8px 20px rgba(109,106,247,.4)}
.founder-body{min-width:0;overflow-wrap:break-word;word-break:break-word}
.founder-body h4{font-size:1.1rem;margin-bottom:.15rem}
.founder-role{display:block;font-size:.85rem;font-weight:500;color:var(--violeta);margin-bottom:.5rem}
.founder-body p{color:rgba(255,255,255,.72);font-size:.92rem}
/* ============================================================
CÓMO FUNCIONA — pasos
============================================================ */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;counter-reset:step}
.step{position:relative;padding:2.2rem 1.6rem 1.8rem;background:#fff;border:1px solid rgba(20,21,42,.07);border-radius:20px}
.step-num{position:absolute;top:-22px;left:1.6rem;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
font-weight:700;font-size:1.2rem;color:#fff;background:var(--grad-marca);box-shadow:0 10px 24px rgba(109,106,247,.4)}
.step h3{margin:.8rem 0 .5rem}
.step p{color:var(--texto-sec)}
.steps .step:not(:last-child)::after{content:"";position:absolute;top:0;right:-.9rem;width:1.8rem;height:2px;
background:linear-gradient(90deg,var(--violeta),transparent);opacity:.6}
/* ============================================================
CTA FINAL + FORMULARIO
============================================================ */
.cta-section{background:radial-gradient(800px 500px at 10% 10%,rgba(124,92,252,.4),transparent 55%),linear-gradient(160deg,var(--negro-violeta),var(--morado-oscuro));color:#fff}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.cta-copy h2{color:#fff;margin-bottom:1rem}
.cta-copy p{color:rgba(255,255,255,.8);margin-bottom:1.4rem}
.cta-copy strong{color:#fff}
.cta-benefits{list-style:none;display:flex;flex-direction:column;gap:.8rem}
.cta-benefits li{display:flex;align-items:center;gap:.7rem;color:rgba(255,255,255,.9);font-weight:500}
.cta-benefits svg{width:22px;height:22px;flex:0 0 22px;color:var(--violeta)}
/* Formulario */
.form-wrap{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:2rem;
box-shadow:0 30px 70px rgba(0,0,0,.35);backdrop-filter:blur(6px)}
.contact-form{display:flex;flex-direction:column;gap:1.05rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{font-size:.86rem;font-weight:500;color:rgba(255,255,255,.85)}
.field .opt{font-weight:400;color:rgba(255,255,255,.5)}
.field input,.field textarea{font-family:inherit;font-size:.95rem;color:#fff;background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:.8rem .95rem;transition:border-color .2s,background .2s}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.4)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--violeta);background:rgba(255,255,255,.1)}
.field textarea{resize:vertical;min-height:96px}
.field input.invalid,.field textarea.invalid{border-color:#ff8095;background:rgba(255,128,149,.08)}
.field .err{font-size:.78rem;color:#ffb3c0;min-height:0}
/* Honeypot: fuera de la vista sin usar display:none (algunos bots lo detectan) */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-submit{margin-top:.4rem;justify-content:center;width:100%}
.form-submit[disabled]{opacity:.7;cursor:progress}
.form-status{font-size:.9rem;font-weight:500;min-height:1.2rem}
.form-status.ok{color:#7CFCB0}
.form-status.bad{color:#ffb3c0}
.form-fine{font-size:.78rem;color:rgba(255,255,255,.5);text-align:center}
/* ============================================================
FAQ
============================================================ */
.faq-container{max-width:820px}
.faq-list{display:flex;flex-direction:column;gap:.9rem}
.faq-item{background:#fff;border:1px solid rgba(20,21,42,.08);border-radius:16px;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.faq-item[open]{border-color:rgba(124,92,252,.4);box-shadow:0 12px 30px rgba(20,21,42,.07)}
.faq-item summary{list-style:none;cursor:pointer;padding:1.25rem 1.5rem;font-weight:500;font-size:1.02rem;
display:flex;align-items:center;justify-content:space-between;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-plus{position:relative;flex:0 0 20px;width:20px;height:20px}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;background:var(--violeta-profundo);border-radius:2px;transition:transform .3s}
.faq-plus::before{top:9px;left:0;width:20px;height:2px}
.faq-plus::after{top:0;left:9px;width:2px;height:20px}
.faq-item[open] .faq-plus::after{transform:rotate(90deg);opacity:0}
.faq-answer{padding:0 1.5rem 1.35rem;color:var(--texto-sec)}
/* ============================================================
FOOTER
============================================================ */
.footer{background:var(--negro-violeta);color:rgba(255,255,255,.72);padding-top:3.5rem}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.5rem;padding-bottom:2.5rem}
.footer-brand .brand{margin-bottom:1rem}
.footer-brand .brand img{height:36px}
.footer-brand p{max-width:38ch;font-size:.92rem}
.footer-col h4{color:#fff;font-size:.95rem;margin-bottom:1rem}
.footer-col a{display:block;font-size:.92rem;color:rgba(255,255,255,.72);padding:.28rem 0;transition:color .2s}
.footer-col a:hover{color:var(--violeta)}
.footer-loc{display:block;font-size:.92rem;padding:.28rem 0}
.footer-cta{color:var(--violeta)!important;font-weight:500;margin-top:.6rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1)}
.footer-bottom .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;padding:1.4rem 0}
.footer-bottom p{font-size:.82rem;color:rgba(255,255,255,.5)}
.footer-legal-links a:hover{color:var(--violeta)}
/* ============================================================
EFECTO A — revelado con shimmer al hacer scroll
============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in-view{opacity:1;transform:none}
/* destello que cruza el bloque al entrar */
.reveal.in-view::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:3;
background:linear-gradient(115deg,transparent 30%,rgba(167,139,250,.28) 48%,rgba(255,255,255,.35) 50%,transparent 68%);
background-size:250% 100%;background-position:150% 0;animation:shimmerReveal 1.1s ease-out .05s 1}
@keyframes shimmerReveal{from{background-position:150% 0}to{background-position:-120% 0}}
/* solo posicionar contenedores que lo necesiten para el ::after */
.card,.founder,.step,.form-wrap,.faq-list,.section-head{position:relative}
/* Estela de cursor (efecto D) — puntos generados por JS */
.cursor-dot{position:fixed;top:0;left:0;width:6px;height:6px;border-radius:50%;pointer-events:none;z-index:9999;
background:radial-gradient(circle,#fff,var(--violeta));mix-blend-mode:screen;will-change:transform,opacity}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width:960px){
.grid-3{grid-template-columns:1fr;gap:1.2rem}
.grid-2{grid-template-columns:1fr}
.value-row{grid-template-columns:1fr}
.founders{grid-template-columns:1fr}
.steps{grid-template-columns:1fr;gap:2.4rem}
.steps .step:not(:last-child)::after{display:none}
.cta-grid{grid-template-columns:1fr;gap:2rem}
.footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
.footer-brand{grid-column:1 / -1}
}
@media (max-width:760px){
.nav-toggle{display:flex}
.nav-menu{position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:.2rem;
background:rgba(255,255,255,.98);backdrop-filter:blur(14px);padding:1rem 1.2rem 1.6rem;
border-bottom:1px solid rgba(20,21,42,.08);box-shadow:0 20px 40px rgba(20,21,42,.12);
transform:translateY(-120%);transition:transform .35s cubic-bezier(.2,.7,.3,1);visibility:hidden}
.nav-menu.open{transform:translateY(0);visibility:visible}
.nav-link{padding:.85rem .6rem;font-size:1.02rem;border-radius:10px}
.nav-link::after{display:none}
.nav-link.active{background:var(--tint)}
.btn-nav{margin-top:.5rem;justify-content:center}
.brand .word{font-size:1rem}
}
@media (max-width:480px){
.footer-grid{grid-template-columns:1fr}
.form-wrap{padding:1.4rem}
.footer-bottom .container{flex-direction:column;align-items:flex-start}
}
/* ============================================================
ACCESIBILIDAD — respetar prefers-reduced-motion
Desactiva TODOS los efectos de movimiento.
============================================================ */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;scroll-behavior:auto!important}
.reveal{opacity:1!important;transform:none!important}
.reveal.in-view::after{display:none!important}
.btn-primary::before{display:none}
.cursor-dot,.spark{display:none!important}
}