/* ==========================================================================
   KUARAHY · kua-web3.css  (02/11/2026)
   Puente para las landings de modulo.php: traduce las clases viejas de
   kua-web.css al lenguaje visual de kua-web2.css (barra, hero, tarjetas,
   tipografia y pie). Se carga SIEMPRE despues de kua-web2.css.
   ========================================================================== */

/* ---------- compatibilidad con las variables viejas (--kua-*) ---------- */
:root{--kua-1:var(--k1);--kua-2:var(--k2);--kua-3:var(--ink-2);--kua-line:var(--line);
  --kua-soft:var(--soft);--kua-acc:var(--acc)}

/* ---------- barra superior (igual que la home) ---------- */
.kua-head{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.kua-head .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding-top:.55rem;padding-bottom:.55rem}
.kua-logo{display:flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none}
.kua-logo img{height:40px;width:auto}
.kua-logo b{display:block;color:var(--k1);font-size:1.02rem;line-height:1.1;letter-spacing:.02em}
.kua-logo span span{display:block;font-size:.7rem;color:var(--ink-2);letter-spacing:.04em;text-transform:uppercase}
.kua-menu{display:flex;align-items:center;gap:1.15rem;font-weight:700;font-size:.92rem}
.kua-menu a{color:var(--ink)}
.kua-menu a:hover{color:var(--k1)}
@media(max-width:820px){ .kua-menu a:not(.btn){display:none} }

/* ---------- botones con los nombres viejos ---------- */
.btn-grad{background:var(--grad);color:#fff;box-shadow:0 10px 26px rgba(139,30,143,.30)}
.btn-grad:hover{color:#fff}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 10px 24px rgba(37,211,102,.30)}
.btn-wa:hover{color:#fff}
.btn-line{background:#fff;color:var(--k2);border-color:var(--line);box-shadow:none}
.btn-line:hover{border-color:var(--k1);color:var(--k1)}
.btn-sm{padding:.5rem .85rem;font-size:.85rem}
.btn-block{width:100%}
.cta-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}

/* ---------- hero de la landing ---------- */
.hero .volver{display:inline-block;color:#d9cff0;font-weight:700;font-size:.88rem}
.hero .volver:hover{color:#fff;text-decoration:underline}
.hero .pill{background:var(--acc);color:#062d22;border:0;font-weight:900}
.hero h1{color:#fff;line-height:1.12}

/* ---------- miga de pan ---------- */
.miga{font-size:.82rem;color:var(--ink-2);padding-top:1rem;padding-bottom:.2rem}
.miga a{color:var(--k1);font-weight:700}
.miga b{color:var(--ink)}

/* ---------- secciones y grillas ---------- */
.grid{display:grid;gap:1.2rem}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:880px){ .g2,.g3{grid-template-columns:1fr} }
.grid>*{min-width:0}

/* ---------- eyebrows, titulos y vinetas ---------- */
.tag{display:inline-block;font-size:.72rem;font-weight:900;letter-spacing:.10em;
  text-transform:uppercase;color:var(--k1);background:#f4e8f5;
  padding:.3rem .7rem;border-radius:999px;margin-bottom:.6rem}
.h2{color:var(--k2);font-size:1.65rem;line-height:1.2;margin-bottom:.4rem;letter-spacing:-.01em}
.lead{font-size:1.02rem;color:var(--ink-2)}
.list{list-style:none;display:flex;flex-direction:column;gap:.45rem;margin:.8rem 0}
.list li{position:relative;padding-left:1.6rem;font-size:.96rem;color:var(--ink-2)}
.list li:before{content:"✔";position:absolute;left:0;top:0;color:var(--acc);font-weight:900}
.soft{background:var(--soft)}

/* ---------- tarjetas ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1.15rem 1.2rem;box-shadow:var(--sh);transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.card h3{color:var(--k2);font-size:1.05rem;margin-bottom:.35rem}
.card p{font-size:.93rem;color:var(--ink-2)}
.card .pie{margin-top:.9rem;background:none;padding:0;box-shadow:none;border:0;color:inherit}
.card .pie .btn{font-size:.85rem}

/* ---------- capturas ---------- */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.2rem}
@media(max-width:780px){ .shots{grid-template-columns:1fr} }
.shot{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh)}
.shot img{width:100%;height:auto;display:block}
.shot figcaption{font-size:.84rem;color:var(--ink-2);padding:.6rem .8rem}

/* ---------- "como se usa" / ejemplo ---------- */
.steps{display:flex;flex-direction:column;gap:.55rem;counter-reset:p}
.steps>div,.steps>li{position:relative;padding-left:2.1rem;font-size:.95rem;color:var(--ink-2)}
.steps>div:before,.steps>li:before{counter-increment:p;content:counter(p);
  position:absolute;left:0;top:0;width:1.5rem;height:1.5rem;border-radius:50%;
  background:var(--grad);color:#fff;font-weight:900;font-size:.78rem;
  display:flex;align-items:center;justify-content:center}
.ejemplo{background:linear-gradient(135deg,#f0fbf7 0%,#f4f5ff 100%);border:1px solid #cdeee2;
  border-left:6px solid var(--acc);border-radius:var(--r);padding:1.2rem 1.3rem}
.ejemplo h3{color:#0b7a5c;font-size:1.05rem;margin-bottom:.4rem}
.nota{background:#fff;border:1px solid var(--line);border-left:6px solid var(--acc);
  border-radius:var(--r);padding:1.25rem 1.3rem;color:var(--ink);box-shadow:var(--sh);
  margin-top:0;font-size:.95rem}
.nota .tag{margin-bottom:.5rem}
.nota h3{color:var(--k2)}
.nota .btn{margin-top:.7rem}
.muted{color:var(--ink-2)}
.small{font-size:.86rem}

/* ---------- pie (mismo de la home) ---------- */
.kua-foot{background:#0d0716;color:#cfc7e0;padding:2.6rem 0 0}
.kua-foot .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:1.6rem}
@media(max-width:880px){ .kua-foot .cols{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .kua-foot .cols{grid-template-columns:1fr} }
.kua-foot h4{color:#fff;font-size:.95rem;margin-bottom:.6rem;letter-spacing:.03em}
.kua-foot p{font-size:.9rem}
.kua-foot ul{list-style:none;font-size:.88rem}
.kua-foot li{padding:.18rem 0}
.kua-foot a{color:#d9cff0}
.kua-foot a:hover{color:#fff;text-decoration:underline}
.kua-foot .legal{margin-top:1.8rem;border-top:1px solid rgba(255,255,255,.10);
  padding:1rem 1.15rem;font-size:.8rem;color:#948bb0;text-align:center}

/* ---------- espacio final ---------- */
section{padding:2.4rem 0}
section.hero{padding:2.5rem 0 2.2rem}
@media(max-width:640px){ section{padding:1.8rem 0} }