/* =============================================================
   AURORA — sistema visual nuevo del sitio (reemplaza la piel de
   marca.css en Inicio, Qué es Quik, Demos y Contacto). marca.css
   sigue cargado solo por su reset base y por producto.css, que
   estiliza el interior de cada demo (Paso 3) — eso no se toca.
   ============================================================= */

@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }

:root{
  --bg-pagina:var(--indigo-oscuro); --bg-header:rgba(26,26,49,.62); --bd-header:rgba(255,255,255,.08);
  --txt:#fff; --txt-muted:#B9B9C6; --txt-tenue:#8A86B0; --nav-txt:#B9B9C6; --pie-txt:#B9B4D6; --tag-txt:#C7C2DE;
  --sup-a:rgba(255,255,255,.035); --sup-b:rgba(255,255,255,.06); --sup-c:rgba(255,255,255,.08);
  --bd-a:rgba(255,255,255,.1); --bd-b:rgba(255,255,255,.12); --bd-c:rgba(255,255,255,.14);
  --bd-underline:rgba(255,255,255,.4); --bd-linea:rgba(255,255,255,.25);
  --tt-bg:#fff; --tt-txt:var(--tinta);
  --hero-scrim:linear-gradient(90deg, rgba(26,26,49,.88) 0%, rgba(26,26,49,.55) 38%, rgba(26,26,49,0) 68%);
  --hero-ping:rgba(200,185,250,.55); --hero-trail:26,26,49;
  --hero-logo-fill:#fff;
  --hero-logo-sombra:drop-shadow(0 16px 26px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(255,255,255,.22)) drop-shadow(0 0 2px rgba(255,255,255,.3));
  --regla-acento:rgba(255,255,255,.82); --regla-fondo:rgba(255,255,255,.035); --regla-borde:rgba(255,255,255,.12);
  --chrome-h:0px;
}
body.tema-claro{
  --bg-pagina:#F5F5F7; --bg-header:rgba(255,255,255,.85); --bd-header:#EDEDF1;
  --txt:#14142B; --txt-muted:#5A5A72; --txt-tenue:#8A8A9A; --nav-txt:#4B4B63; --pie-txt:#6B6B7D; --tag-txt:var(--violeta);
  --sup-a:#FFFFFF; --sup-b:#F2F0FA; --sup-c:#F2F0FA;
  --bd-a:#E7E5EE; --bd-b:#E7E5EE; --bd-c:#E7E2F5;
  --bd-underline:rgba(20,20,43,.35); --bd-linea:rgba(20,20,43,.22);
  --tt-bg:#14142B; --tt-txt:#fff;
  --hero-scrim:linear-gradient(90deg, rgba(245,245,247,.92) 0%, rgba(245,245,247,.6) 38%, rgba(245,245,247,0) 68%);
  --hero-ping:rgba(102,86,157,.4); --hero-trail:245,245,247;
  --hero-logo-fill:url(#q-gradiente-claro);
  --hero-logo-sombra:drop-shadow(0 14px 22px rgba(0,0,0,.32));
  --regla-acento:#3B3468; --regla-fondo:rgba(59,52,104,.05); --regla-borde:rgba(59,52,104,.16);
}

body{ background:var(--bg-pagina); color:var(--txt); transition:background .25s,color .25s }

.campo-fija{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.85}
body.tema-claro .campo-fija{opacity:1}
body.tema-claro .campo-fija circle:nth-of-type(1){stroke:#A08AD8; opacity:.3}
body.tema-claro .campo-fija circle:nth-of-type(2){stroke:#6D4FD1; opacity:.3}
.relativo{position:relative; z-index:1}

/* ---------- Header ---------- */
.cab-rica{position:sticky; top:0; z-index:90; background:var(--bg-header); backdrop-filter:blur(14px); border-bottom:1px solid var(--bd-header)}
#inicio-gancho, #inicio-porque, #inicio-publico, #inicio-metodo, #inicio-stats, #inicio-cierre, #contacto-form, #contacto-pasos, #contacto-faq{scroll-margin-top:calc(var(--chrome-h,64px) + 20px)}
.cab-interior{display:flex; justify-content:space-between; align-items:center; padding:16px clamp(16px,5vw,48px); max-width:1320px; margin:0 auto}
.cab-marca{display:flex; align-items:center; gap:9px; font-size:14px; font-weight:700; text-decoration:none; color:var(--txt)}
.cab-marca svg{width:18px;height:18px}
.cab-marca svg use{fill:var(--txt)}
.nav-rica{display:flex; align-items:center; gap:4px}
.nav-rica > a{color:var(--nav-txt); text-decoration:none; font-size:14px; font-weight:600; padding:8px 12px; border-radius:8px; transition:background .2s,color .2s}
.nav-rica > a:hover{background:var(--sup-c); color:var(--txt)}
.nav-rica > a[aria-current="page"]{color:var(--verde)}
.nav-actual{font-size:14px; font-weight:700; color:var(--verde); padding:8px 12px}
.cta-nav{background:var(--verde); color:#06231A!important; padding:9px 16px!important; border-radius:999px; text-decoration:none; font-weight:700}

.switch-tema{display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; border:1px solid var(--bd-c); background:transparent; color:var(--nav-txt); cursor:pointer; margin:0 4px}
.switch-tema svg{width:15px;height:15px}
.switch-tema .ico-luna{display:none}
body.tema-claro .switch-tema .ico-sol{display:none}
body.tema-claro .switch-tema .ico-luna{display:block}
.switch-tema:hover{border-color:var(--verde); color:var(--verde)}

.nav-redes{display:flex; align-items:center; gap:4px; padding-left:10px; margin-left:4px; border-left:1px solid var(--bd-c)}
.nav-redes .nav-red{position:relative; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; color:var(--nav-txt); cursor:pointer; transition:background .2s,color .2s}
.nav-redes a.nav-red:hover{background:var(--sup-c); color:var(--verde)}
.nav-redes svg{width:15px;height:15px}
@media (max-width:980px){ .nav-redes{display:none} }
@media (max-width:760px){ .nav-rica{flex-wrap:wrap; justify-content:flex-end; gap:8px} }

/* ---------- Hero magnético ---------- */
.hero.hero-magnetico{position:relative; overflow:hidden; text-align:left; max-width:none; margin:0; padding:0; min-height:clamp(420px,52vw,560px); font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif}
.hero-canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.hero-scrim{position:absolute; inset:0; background:var(--hero-scrim); pointer-events:none}
.hero-magnetico .hero-wrap{position:relative; z-index:1; max-width:1220px; margin:0 auto; min-height:inherit; padding:clamp(48px,8vw,96px) clamp(16px,5vw,48px); display:flex; flex-wrap:wrap; align-items:center; gap:40px}
.hero-magnetico .hero-copy{flex:1 1 420px; min-width:280px}
.hero-magnetico h1{font-family:'Inter',system-ui,sans-serif; font-weight:800; letter-spacing:-.02em; margin-top:20px; font-size:clamp(32px,5.2vw,56px); line-height:1.1}
.hero-magnetico p{margin-top:18px; font-size:16.5px; color:var(--txt-muted); max-width:52ch; line-height:1.6}
.hero-magnetico .acciones{justify-content:flex-start}
.hero-logo-col{flex:1 1 360px; min-width:240px; display:flex; justify-content:center}
.hero-logo-wrap{position:relative; width:min(400px,86vw); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; animation:heroBreathe 5.5s ease-in-out infinite}
.hero-ping{position:absolute; width:62%; height:62%; border-radius:50%; border:1.5px solid var(--hero-ping); animation:heroPing 3.2s cubic-bezier(.2,.6,.3,1) infinite}
.hero-ping.ping-2{animation-delay:1.6s}
.hero-logo-magnetico{position:relative; width:72%; height:72%; fill:var(--hero-logo-fill); filter:var(--hero-logo-sombra)}
@keyframes heroPing{0%{transform:scale(.7); opacity:.55} 100%{transform:scale(2.4); opacity:0}}
@keyframes heroBreathe{0%,100%{transform:scale(1)} 50%{transform:scale(1.045)}}
@media (prefers-reduced-motion: reduce){ .hero-logo-wrap, .hero-ping{animation:none} }
@media (max-width:760px){ .hero-magnetico .hero-wrap{flex-direction:column; text-align:center; padding-top:40px} .hero-logo-col{order:-1} .hero-logo-wrap{width:min(260px,70vw)} .hero-magnetico .acciones{justify-content:center} }

.tag{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:7px 14px; border-radius:999px; background:var(--sup-c); border:1px solid var(--bd-c); color:var(--tag-txt)}
.acciones{margin-top:28px; display:flex; gap:12px; flex-wrap:wrap}
.et{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--verde)}

/* ---------- Botones ---------- */
.btn-glow{background:var(--verde); color:#06231A; border:1.5px solid var(--verde); padding:13px 22px; border-radius:999px; font-size:14.5px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:8px; text-decoration:none; transition:box-shadow .25s,transform .15s}
.btn-glow:hover{box-shadow:0 0 0 1px var(--verde), 0 0 30px 4px rgba(18,162,119,.5); transform:translateY(-1px)}
.btn-linea{background:transparent; border:1.5px solid var(--bd-linea); color:var(--txt); padding:13px 22px; border-radius:999px; font-size:14.5px; font-weight:600; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px}
.btn-linea:hover{border-color:var(--txt)}

/* ---------- Secciones y tarjetas ---------- */
.seccion{position:relative; z-index:1; max-width:1280px; margin:0 auto; padding:clamp(48px,7vw,80px) clamp(16px,5vw,48px); border-top:1px solid var(--bd-a)}
.seccion-cab{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:28px; flex-wrap:wrap}
.seccion-cab h2{font-size:clamp(22px,2.8vw,32px); font-weight:800; letter-spacing:-.01em; color:var(--txt)}
.seccion-cab p{margin-top:8px; color:var(--txt-muted); font-size:15px; max-width:52ch}

.pasos-glow{display:grid; grid-template-columns:repeat(5,1fr); gap:12px}
.pasos-3{grid-template-columns:repeat(3,1fr)}
.paso-glow{background:var(--sup-a); border:1.5px solid var(--bd-a); border-radius:14px; padding:18px 16px; transition:border-color .25s,box-shadow .25s,transform .2s}
.paso-glow:hover{border-color:var(--verde); box-shadow:0 0 0 1px var(--verde), 0 16px 32px -16px rgba(18,162,119,.5); transform:translateY(-3px)}
.paso-glow .n{font-size:12px; font-weight:800; color:var(--txt-tenue)}
.paso-glow h4{font-size:15px; font-weight:700; margin-top:10px; color:var(--txt)}
.paso-glow .despues{font-size:12.5px; color:var(--verde); font-weight:600; margin-top:10px}
@media (max-width:860px){ .pasos-glow{grid-template-columns:1fr 1fr} .pasos-3{grid-template-columns:1fr} }
@media (max-width:480px){ .pasos-glow{grid-template-columns:1fr} }

.cierre{position:relative; z-index:1; padding:clamp(48px,7vw,80px) clamp(16px,5vw,48px) clamp(64px,8vw,96px); text-align:center}
.cierre h2{font-size:clamp(24px,3.2vw,36px); font-weight:800; max-width:20ch; margin:0 auto; color:var(--txt)}
.cierre .acciones{justify-content:center}

p.gancho-pista{position:relative; z-index:1; margin-top:28px; text-align:center; font-size:13.5px; color:var(--txt-tenue)}
a.gancho-pista{position:relative; z-index:1; display:table; margin:28px auto 0; padding:11px 22px; border-radius:999px; background:var(--verde); color:#06231A; font-weight:700; font-size:13.5px; text-decoration:none; text-align:center; transition:box-shadow .25s,transform .15s}
a.gancho-pista:hover{box-shadow:0 0 0 1px var(--verde), 0 0 24px 3px rgba(18,162,119,.45); transform:translateY(-1px)}
a.gancho-pista.gancho-flecha{display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border-radius:50%}
a.gancho-pista.gancho-flecha svg{width:17px;height:17px}
a.gancho-pista svg{display:inline-block}

/* ---------- Contacto ---------- */
.contacto-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; position:relative}
.contacto-grid::before{content:""; position:absolute; left:50%; top:10px; bottom:10px; width:1px; background:var(--bd-a)}
@media (max-width:860px){ .contacto-grid::before{display:none} .contacto-grid{grid-template-columns:1fr} }
.form-contacto{max-width:none}
.campo-ct{display:flex; flex-direction:column; gap:7px; margin-bottom:18px}
.campo-fila{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.campo-ct label{font-size:13px; font-weight:700; color:var(--txt-muted)}
.campo-ct .opcional{font-weight:500; color:var(--txt-tenue); text-transform:none; letter-spacing:0}
.campo-ct input, .campo-ct textarea{background:var(--sup-a); border:1.5px solid var(--bd-a); border-radius:10px; padding:12px 14px; color:var(--txt); font:inherit; font-size:14.5px; transition:border-color .2s; width:100%}
.campo-ct input:focus, .campo-ct textarea:focus{outline:none; border-color:var(--verde)}
.campo-ct textarea{resize:vertical; min-height:120px; line-height:1.55}
.campo-ct input::placeholder, .campo-ct textarea::placeholder{color:var(--txt-tenue)}
.campo-error{font-size:13px; color:#FF8A8A; margin-top:2px}
.campo-error:empty{display:none}
.campo-ct input[aria-invalid="true"]{border-color:#E05252}
.form-contacto .btn-glow{margin-top:4px}
.form-contacto .campo-trampa{position:absolute; left:-9999px}
@media (max-width:640px){ .campo-fila{grid-template-columns:1fr} }

.mensaje-estado{margin-top:16px; font-size:14.5px}
.mensaje-estado:empty{display:none}
.mensaje-estado[data-tipo="ok"]{color:var(--verde)}
.mensaje-estado[data-tipo="error"]{color:#FF8A8A}
.aviso-prueba{margin-top:12px; font-size:13px; color:var(--txt-tenue)}
.campo-ayuda{font-size:13px; color:var(--txt-tenue); margin-top:14px; display:block}
.campo-ayuda a{color:var(--txt-muted)}

.contexto-demo{display:flex; align-items:center; gap:10px; background:var(--sup-b); border:1px solid var(--bd-b); border-radius:10px; padding:12px 14px; margin-bottom:18px; font-size:13.5px; color:var(--txt-muted)}
.contexto-demo[hidden]{display:none}
.contexto-demo svg{width:18px;height:18px; flex:0 0 auto; color:var(--txt-tenue)}
.contexto-demo strong{color:var(--txt); font-weight:700}
.contexto-demo span{flex:1}
.contexto-demo button{background:none; border:0; color:var(--txt-tenue); cursor:pointer; font-size:12.5px; text-decoration:underline; padding:0; font-family:inherit}

.contacto-directo{display:flex; flex-direction:column; align-items:center; gap:12px; padding-top:38px}
.contacto-directo .et{margin-bottom:2px}
.contacto-directo .btn-glow, .contacto-directo .btn-linea{justify-content:center}
.contacto-directo svg{width:17px; height:17px; flex:0 0 auto}
@media (max-width:860px){ .contacto-directo{padding-top:4px} }

.faq-lista{max-width:760px}
.faq-item{border-bottom:1px solid var(--bd-a)}
.faq-item summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:19px 2px; font-weight:700; font-size:15.5px; color:var(--txt)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary svg{flex:0 0 auto; width:18px; height:18px; color:var(--txt-tenue); transition:transform .2s ease}
.faq-item[open] summary svg{transform:rotate(180deg)}
.faq-item p{margin:0; padding:0 2px 20px; max-width:68ch; color:var(--txt-muted); font-size:14.5px; line-height:1.75}
.faq-item .faq-respuesta{padding:0 2px 20px}
.faq-item .faq-respuesta p{padding:0; margin:0 0 16px; max-width:68ch}
.faq-item .faq-respuesta p:last-child{margin-bottom:0}
.rango-barra{display:flex; border-radius:999px; overflow:hidden; height:34px; max-width:420px}
.rango-seg{flex:1; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700}
.rango-seg:not(:first-child){border-left:2px solid var(--bg-pagina)}
.rango-seg.corto{background:rgba(18,162,119,.25); color:var(--txt)}
.rango-seg.medio{background:rgba(18,162,119,.55); color:#fff}
.rango-seg.complejo{background:rgba(18,162,119,.92); color:#fff}
.rango-marcas{display:flex; justify-content:space-between; max-width:420px; margin-top:8px; font-size:12px; color:var(--txt-tenue)}

/* ---------- Pie ---------- */
.pie-redes{position:relative; z-index:1; border-top:1px solid var(--bd-header); padding:22px clamp(16px,5vw,48px)}
.pie-interior{max-width:1320px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px}
.pie-marca{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--txt-tenue); font-weight:600}
.pie-marca svg use{fill:var(--txt-tenue)}
.pie-links{display:flex; align-items:center; gap:14px}
.pie-link{display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; border:1px solid var(--bd-c); color:var(--pie-txt); transition:border-color .2s,color .2s}
.pie-link svg{width:16px;height:16px}
a.pie-link:hover{border-color:var(--verde); color:var(--verde)}
.pie-legal-aurora{width:100%; margin-top:14px; padding-top:14px; border-top:1px solid var(--bd-a); font-size:12px; color:var(--txt-tenue)}
.pie-legal-aurora a{color:var(--txt-tenue)}

/* ---------- Tooltips (ⓘ) ---------- */
.tt{position:relative; border-bottom:1.5px dotted currentColor; cursor:help}
.tt::after{content:attr(data-tt); position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%) translateY(4px); background:var(--tt-bg); color:var(--tt-txt); font-size:12.5px; font-weight:500; line-height:1.45; padding:9px 12px; border-radius:8px; width:max-content; max-width:240px; white-space:normal; text-align:left; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s ease,transform .15s ease; box-shadow:0 12px 28px -8px rgba(0,0,0,.45); z-index:40}
.tt::before{content:""; position:absolute; left:50%; bottom:calc(100% + 5px); transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--tt-bg); opacity:0; visibility:hidden; transition:opacity .15s ease; z-index:40}
.tt:hover::after, .tt:focus-visible::after{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.tt:hover::before, .tt:focus-visible::before{opacity:1; visibility:visible}

/* ---------- Qué es Quik ---------- */
.cita-acento{margin-top:22px; max-width:620px}
.barra-acento{display:block; width:68px; height:4px; background:var(--verde); border-radius:2px; margin:0 0 14px}
.cita-acento p{font-size:17px; color:var(--txt); line-height:1.6; font-weight:500}
.chip-alcance{display:inline-flex; font-size:12.5px; font-weight:700; color:var(--verde); border:1px solid rgba(18,162,119,.4); background:rgba(18,162,119,.08); border-radius:999px; padding:2px 10px; margin:0 1px}
.resalte-humano{font-weight:800; color:var(--txt); border-bottom:3px solid rgba(18,162,119,.55); padding-bottom:3px}
.bloque-centro{max-width:720px; margin:0 auto; text-align:center}
.bloque-centro h2{font-size:clamp(24px,3.4vw,36px); font-weight:800; letter-spacing:-.01em; color:var(--txt)}
.bloque-centro p{margin-top:16px; font-size:16px; color:var(--txt-muted); line-height:1.75}

.alcance-fila{display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--bd-b); border-radius:16px; overflow:hidden; background:var(--sup-a)}
.alcance-item{padding:clamp(20px,3vw,28px); border-right:1px solid var(--bd-a)}
.alcance-item:last-child{border-right:0}
.alcance-item .et{display:block; margin-bottom:10px}
.alcance-item p{color:var(--txt-muted); font-size:14.5px; line-height:1.6}
@media (max-width:640px){ .alcance-fila{grid-template-columns:1fr} .alcance-item{border-right:0; border-bottom:1px solid var(--bd-a)} }

.reglas-destacadas{border:1px solid var(--regla-borde); background:var(--regla-fondo); border-radius:22px; padding:clamp(28px,4vw,40px) clamp(20px,4vw,36px)}
.reglas-etiqueta{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--regla-acento); margin-bottom:8px}
.reglas-etiqueta::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--regla-acento)}
.reglas-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.reglas-grid .paso-glow{border-left:2.5px solid var(--regla-acento)}
.reglas-grid .paso-glow:hover{border-color:var(--regla-acento); box-shadow:0 0 0 1px var(--regla-acento), 0 16px 32px -16px rgba(59,52,104,.35); transform:translateY(-3px)}
.reglas-grid .paso-glow h4{margin-top:0; display:flex; align-items:center; gap:6px}
.reglas-grid .paso-glow p{margin-top:10px; font-size:13px; color:var(--txt-muted); line-height:1.5}
@media (max-width:860px){ .reglas-grid{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .reglas-grid{grid-template-columns:1fr} }

/* ---------- Revelado al hacer scroll + brillo que sigue el mouse ---------- */
.rev{opacity:.001; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease}
.rev.ver{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .rev{opacity:1; transform:none; transition:none} }
.spot{position:relative}
.spot::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s ease; border-radius:inherit; background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.1), transparent 70%)}
.spot:hover::before{opacity:1}
.escala{font-variant-numeric:tabular-nums}

/* ---------- Gancho (Inicio) ---------- */
.gancho-banda{background:rgba(255,255,255,.035); border-top:1px solid var(--bd-a); border-bottom:1px solid var(--bd-a)}
.transicion-img{position:relative; z-index:1; display:flex; justify-content:center; align-items:flex-start; gap:28px; flex-wrap:wrap; padding:clamp(28px,5vw,48px) clamp(16px,5vw,48px) clamp(12px,3vw,20px)}
.transicion-img .nota-mini{background:var(--sup-a); border:1px solid var(--bd-c); border-radius:10px; padding:14px 16px; width:190px; font-size:13px; line-height:1.5; color:var(--txt)}
.transicion-img .nota-mini b{display:block; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--txt-tenue); margin-bottom:6px}
.transicion-img .n0{transform:rotate(-2deg); margin-top:6px}
.transicion-img .n1{transform:rotate(3deg); margin-top:24px}
.transicion-img .n2{transform:rotate(-3deg); margin-top:2px}
@media (max-width:700px){ .transicion-img{gap:16px} .transicion-img .nota-mini{width:150px} .transicion-img .n0,.transicion-img .n1,.transicion-img .n2{margin-top:6px} }
.gancho{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:28px; max-width:1280px; margin:0 auto; padding:0 clamp(16px,5vw,48px) clamp(28px,5vw,48px)}
.gancho > div{padding-top:18px; border-top:1.5px solid var(--bd-a)}
.gancho h2{font-size:clamp(24px,3.2vw,36px); font-weight:800; letter-spacing:-.015em; line-height:1.15; color:var(--txt)}
.gancho p{margin-top:10px; font-size:14.5px; color:var(--txt-muted); line-height:1.55; max-width:36ch}
@media (max-width:700px){ .gancho{grid-template-columns:1fr} }

/* ---------- Por qué existe Quik (historia + foto) ---------- */
.historia-fundacional{max-width:720px; margin:18px 0 32px; padding-left:20px; border-left:3px solid var(--verde); font-size:15px; color:var(--txt-muted); line-height:1.75}
.historia-fundacional p{margin:0 0 14px}
.historia-fundacional p:last-child{margin-bottom:0}
.historia-fundacional .num-ancla{font-weight:800; color:var(--verde); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.historia-fundacional strong{font-weight:700; color:var(--txt)}
.historia-fundacional .et{margin-bottom:4px}
.historia-fundacional .cierre-crecimiento{color:var(--verde); font-weight:800}
.porque-layout{display:grid; grid-template-columns:1fr auto; gap:clamp(24px,4vw,48px); align-items:start}
.porque-foto-col{margin-top:52px; width:168px; flex-shrink:0; text-align:center}
.porque-foto{width:168px; height:168px; border-radius:50%; overflow:hidden; border:3px solid var(--regla-acento); box-shadow:0 20px 44px -20px rgba(0,0,0,.45)}
.porque-foto img{display:block; width:100%; height:100%; object-fit:cover; filter:contrast(1.06) saturate(1.08) brightness(1.03)}
.porque-firma{margin-top:14px; font-size:13px; color:var(--txt-muted); line-height:1.5}
.porque-firma strong{color:var(--txt); font-weight:700}
.porque-firma-sub{display:block; margin-top:4px; font-size:11.5px; color:var(--txt-tenue)}
@media (max-width:760px){ .porque-layout{grid-template-columns:1fr; justify-items:flex-start} .porque-foto-col{order:-1; width:120px; margin-top:0; text-align:left} .porque-foto{width:120px; height:120px} }

/* ---------- Doble (Público / Qué es Quik) ---------- */
.doble{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.doble-card{background:var(--sup-a); border:1.5px solid var(--bd-a); border-radius:16px; padding:clamp(24px,3vw,32px)}
.doble-card .et{color:var(--verde)}
.doble-card h3{font-size:19px; font-weight:800; margin-top:10px; color:var(--txt)}
.doble-card p{font-size:14.5px; color:var(--txt-muted); line-height:1.6; margin-top:10px}
.doble-card .destacado{margin-top:14px; font-size:13.5px; font-weight:600; color:var(--txt); background:var(--sup-b); border-radius:8px; padding:10px 12px}
.ver-mas{flex:none; font-size:13.5px; font-weight:700; display:inline-flex; align-items:center; gap:6px; color:var(--txt); text-decoration:none; border-bottom:1.5px solid var(--bd-underline); padding-bottom:2px}
@media (max-width:760px){ .doble{grid-template-columns:1fr} }

/* ---------- Switch Método/Alcance ---------- */
.switch-grupo{position:relative; z-index:1; max-width:860px; margin:clamp(32px,5vw,48px) auto 0; padding:0 clamp(16px,5vw,48px)}
.switch-tabs{display:flex; gap:4px; background:var(--sup-a); border:1px solid var(--bd-b); border-radius:14px; padding:5px; margin-bottom:14px}
.switch-tab{flex:1; padding:14px 18px; border-radius:10px; border:none; background:transparent; color:var(--pie-txt); font-family:inherit; font-size:14.5px; font-weight:700; cursor:pointer; transition:background .2s,color .2s}
.switch-tab[aria-pressed="true"]{background:var(--verde); color:#06231A}
.switch-tab:hover:not([aria-pressed="true"]){background:var(--sup-c); color:var(--txt)}
.switch-meta{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:28px; flex-wrap:wrap}
.switch-pista{font-size:13px; color:var(--txt-tenue)}
.switch-pausa{font-size:12.5px; font-weight:600; color:var(--pie-txt); background:none; border:none; text-decoration:underline; text-underline-offset:2px; cursor:pointer; padding:0; font-family:inherit}
.switch-pausa:hover{color:var(--txt)}
@media (max-width:480px){ .switch-tabs{flex-direction:column} }
.alcance-cab{margin-bottom:20px; max-width:620px}
.alcance-cab h2{font-size:clamp(20px,2.6vw,28px); font-weight:800; letter-spacing:-.01em; margin-top:8px; line-height:1.2; color:var(--txt)}
.alcance-item .num{font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--verde)}
.alcance-item h4{font-size:14.5px; font-weight:700; margin-top:8px; line-height:1.3; color:var(--txt)}

/* ---------- Stats genéricas ---------- */
.stats-genericas{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.stat-g{background:var(--sup-a); border:1.5px solid var(--bd-a); border-radius:14px; padding:24px 20px; text-align:center}
.stat-g .val{display:block; font-size:clamp(30px,4vw,40px); font-weight:800; color:var(--verde)}
.stat-g p{margin-top:10px; font-size:13.5px; color:var(--txt-muted); line-height:1.5}
@media (max-width:760px){ .stats-genericas{grid-template-columns:1fr} }

/* ---------- Demos: shell estático (hero, loop, grilla) ---------- */
.demo-showcase{position:relative; max-width:560px; margin:0 auto}
.showcase-marco{position:relative; height:260px; border-radius:18px; background:var(--sup-a); border:1.5px solid var(--bd-a); overflow:hidden}
.showcase-fase{position:absolute; inset:0; padding:22px; opacity:0; animation:showcase-fase 9s infinite}
.fase-antes{animation-delay:0s}
.fase-ordenado{animation-delay:3s}
.fase-panel{animation-delay:6s}
@keyframes showcase-fase{0%,2%{opacity:0} 4%,29%{opacity:1} 33%,100%{opacity:0}}
.fase-antes{display:flex; flex-wrap:wrap; gap:14px; align-content:flex-start}
.fase-antes .nota-mini{background:var(--sup-c); border:1px solid var(--bd-c); border-radius:10px; padding:12px 14px; width:150px; font-size:12px; line-height:1.5; color:var(--txt)}
.fase-antes .nota-mini b{display:block; font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--txt-tenue); margin-bottom:5px}
.fase-ordenado{display:flex; flex-direction:column; gap:10px; justify-content:center}
.fila-ordenada{display:flex; justify-content:space-between; align-items:center; background:var(--sup-c); border:1px solid var(--bd-c); border-radius:8px; padding:10px 14px; font-size:13px; color:var(--txt-muted)}
.fila-ordenada strong{color:var(--txt); font-weight:700}
.fase-panel{display:flex; flex-direction:column; gap:16px; justify-content:center}
.panel-kpis{display:flex; gap:12px}
.panel-kpi{flex:1; background:var(--sup-c); border:1px solid var(--bd-c); border-radius:10px; padding:12px; text-align:center}
.panel-kpi .n{display:block; font-size:19px; font-weight:800; color:var(--verde)}
.panel-kpi .t{display:block; margin-top:4px; font-size:11px; color:var(--txt-tenue)}
.panel-grafico{display:flex; align-items:flex-end; gap:8px; height:64px}
.panel-grafico span{flex:1; background:var(--verde); border-radius:4px 4px 0 0; opacity:.75}
.showcase-rotulo{display:flex; justify-content:center; gap:28px; margin-top:16px; font-size:12.5px; font-weight:700; color:var(--txt-tenue)}
.showcase-rotulo span{position:relative; padding-bottom:6px}
.showcase-rotulo span::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--verde); opacity:0; animation:showcase-rotulo 9s infinite}
.showcase-rotulo .fase-antes::after{animation-delay:0s}
.showcase-rotulo .fase-ordenado::after{animation-delay:3s}
.showcase-rotulo .fase-panel::after{animation-delay:6s}
@keyframes showcase-rotulo{0%,2%{opacity:0} 4%,29%{opacity:1} 33%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .showcase-fase{animation:none; opacity:1} .fase-ordenado,.fase-panel{display:none} .showcase-rotulo span::after{animation:none; opacity:0} }

.aviso-demo{position:relative; z-index:1; display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; padding:18px 20px; border-radius:12px; margin-bottom:24px; background:var(--sup-a); border:1px solid var(--bd-a); border-left:4px solid var(--violeta); color:var(--txt-muted); font-size:14.5px}
.aviso-demo p{font-size:14.5px; color:var(--txt-muted)}

.demos-grilla{position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:980px){ .demos-grilla{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .demos-grilla{grid-template-columns:1fr} }
.demo-card{display:flex; flex-direction:column; gap:10px; text-align:left; width:100%; cursor:pointer; color:inherit; font:inherit}
.demo-card h3{font-size:18px; font-weight:800; color:var(--txt)}
.demo-card p{font-size:14px; color:var(--txt-muted); line-height:1.55; flex:1}
.demo-card .enlace-flecha{color:var(--txt)}
.demo-card-otro{border-style:dashed; cursor:default}

/* ---------- Compatibilidad: botones y chrome que arma motor.js ---------- */
.label{color:var(--txt-tenue)}
.boton{border-radius:999px; font-size:14.5px; font-weight:700; padding:13px 22px; min-height:0}
.boton-acento{color:#06231A!important}
.boton-linea{border-color:var(--bd-linea); color:var(--txt)}
.volver{color:var(--txt-tenue)}
.volver:hover{color:var(--txt)}
.pasos-indicador li{color:var(--txt-tenue)}
.pasos-indicador .num{border-color:var(--bd-c)}
.pasos-indicador li[aria-current="step"]{color:var(--txt)}
.pasos-indicador li[aria-current="step"] .num{background:var(--verde); color:#06231A; border-color:var(--verde)}
.pasos-indicador li.hecho .num{border-color:var(--verde); color:var(--verde)}
.pasos-indicador .sep{background:var(--bd-a)}
.check-legal{background:var(--sup-a); border:1.5px solid var(--bd-a)}
.check-legal span{color:var(--txt-muted)}
.check-legal a{color:var(--txt)}
.enfoque-cargando{color:var(--txt-muted)}
.enfoque-cargando i{border-color:var(--bd-a); border-top-color:var(--txt)}
.enfoque-nota{color:var(--txt-tenue)}
.boton-discreto{color:var(--txt-muted); border-bottom-color:var(--bd-linea)}
.boton-discreto:hover{color:var(--txt); border-color:var(--txt)}