/* ============================================================
   203 CAPITAL GROUP — sitio público
   ⚙️  DATOS A EDITAR: busca "CONFIG" en el HTML (abajo, cerca del final)
       para cambiar el número de WhatsApp y el enlace de acceso al sistema.
   ============================================================ */
:root{
  --abismo:#081733;      /* fondo más profundo */
  --marino:#0f2559;      /* navy de marca */
  --marino-2:#14306e;    /* navy app */
  --azul:#2f6bf0;        /* azul tentáculo */
  --celeste:#7cc4f5;     /* celeste highlight */
  --oro:#e8b53f;         /* oro tridente */
  --oro-claro:#ffd97a;
  --espuma:#eaf2ff;      /* texto claro */
  --bruma:#9fb3d1;       /* texto tenue */
  --linea:rgba(124,196,245,.14);
  --tarjeta:rgba(255,255,255,.035);
  --tarjeta-borde:rgba(124,196,245,.16);
  --radio:16px;
  --ancho:1180px;
  --fuente-display:'Fraunces',Georgia,serif;
  --fuente-texto:'Manrope',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Nada de scroll suave global: el deslizamiento largo entre secciones
   (sobre todo en móvil) marea. El salto directo se siente más ágil.
   Donde un desplazamiento suave sí ayuda (ir a un ancla concreto), se
   hace puntualmente desde JS y con distancia corta. */
html{scroll-behavior:auto}
/* Deja un respiro bajo la barra fija al saltar a una sección con # */
:target{scroll-margin-top:90px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body{
  font-family:var(--fuente-texto);
  background:var(--abismo);
  color:var(--espuma);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem)}
.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--oro);display:inline-flex;align-items:center;gap:.55rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--oro);opacity:.7}
h1,h2,h3{font-family:var(--fuente-display);font-weight:600;line-height:1.08;letter-spacing:-.01em}
.seccion{padding:clamp(4rem,9vw,7rem) 0;position:relative}
.titulo{font-size:clamp(2rem,4.6vw,3.1rem);margin:.7rem 0 1rem}
.titulo .oro{color:var(--oro);font-style:italic}
.intro{color:var(--bruma);font-size:clamp(1rem,1.4vw,1.12rem);max-width:56ch}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--fuente-texto);font-weight:700;font-size:.95rem;
  padding:.85rem 1.6rem;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-oro{background:linear-gradient(135deg,var(--oro-claro),var(--oro));color:#3a2a05;box-shadow:0 8px 24px -8px rgba(232,181,63,.55)}
.btn-oro:hover{box-shadow:0 12px 30px -8px rgba(232,181,63,.75);transform:translateY(-2px)}
.btn-wa{background:#25d366;color:#062a13;box-shadow:0 8px 24px -8px rgba(37,211,102,.5)}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(37,211,102,.7)}
.btn-fantasma{background:transparent;border-color:var(--tarjeta-borde);color:var(--espuma)}
.btn-fantasma:hover{border-color:var(--celeste);background:rgba(124,196,245,.06)}
.btn-sm{padding:.62rem 1.15rem;font-size:.85rem}

/* ---------- Header ---------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background .3s ease,backdrop-filter .3s ease,border-color .3s ease;
  border-bottom:1px solid transparent;
}
.header.solido{
  background:rgba(8,23,51,.82);backdrop-filter:blur(14px);
  border-bottom-color:var(--linea);
}
.header-in{display:flex;align-items:center;justify-content:space-between;height:74px}
.marca{display:flex;align-items:center;gap:.7rem;font-weight:800}
.marca img{width:42px;height:42px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.4))}
.marca .n{font-family:var(--fuente-display);font-size:1.12rem;font-weight:600;letter-spacing:.01em}
.marca .n b{color:var(--oro);font-weight:600}
.nav{display:flex;align-items:center;gap:2rem}
.nav-links{display:flex;gap:1.7rem;list-style:none}
.nav-links a{font-size:.9rem;font-weight:600;color:var(--bruma);transition:color .2s;position:relative}
.nav-links a:hover{color:var(--espuma)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--oro);transition:width .25s}
.nav-links a:hover::after{width:100%}
.menu-btn{display:none;background:none;border:1px solid var(--tarjeta-borde);border-radius:10px;padding:.5rem;cursor:pointer}
.menu-btn span{display:block;width:22px;height:2px;background:var(--espuma);margin:4px 0;transition:.3s}

/* ---------- Hero ---------- */
.hero{position:relative;padding-top:clamp(8rem,15vw,11rem);padding-bottom:clamp(4rem,8vw,6rem);overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(1100px 700px at 78% 8%,rgba(47,107,240,.28),transparent 60%),
    radial-gradient(900px 600px at 10% 90%,rgba(20,48,110,.5),transparent 60%),
    linear-gradient(180deg,var(--marino) 0%,var(--abismo) 62%);
}
.corrientes{position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none}
.corrientes path{fill:none;stroke:var(--oro);stroke-width:1;opacity:.22;
  stroke-dasharray:6 10;animation:fluir 26s linear infinite}
.corrientes path:nth-child(2){stroke:var(--celeste);opacity:.16;animation-duration:34s}
.corrientes path:nth-child(3){opacity:.12;animation-duration:44s}
@keyframes fluir{to{stroke-dashoffset:-320}}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center}
.hero h1{font-size:clamp(2.5rem,6vw,4.4rem);margin:1.1rem 0 1.3rem;font-weight:600}
.hero h1 .oro{color:var(--oro);font-style:italic}
.hero p.sub{color:var(--bruma);font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:46ch;margin-bottom:2rem}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap}
.hero-chips{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--linea)}
.chip{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--bruma);font-weight:600}
.chip .pt{color:var(--oro);font-size:1.05rem}
.hero-art{position:relative;display:grid;place-items:center}
.hero-art .halo{position:absolute;width:118%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(47,107,240,.35),transparent 62%);filter:blur(20px);z-index:-1}
.hero-art img{width:min(100%,520px);filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));animation:flotar 9s ease-in-out infinite}
/* Flotación más leve y lenta: presencia sin distraer */
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ---------- Franja de confianza ---------- */
.franja{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);background:rgba(15,37,89,.35)}
.franja-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding:2.2rem 0}
.stat .num{font-family:var(--fuente-display);font-size:clamp(1.8rem,3vw,2.5rem);color:var(--oro);font-weight:600;line-height:1}
.stat .lbl{color:var(--bruma);font-size:.86rem;margin-top:.35rem}

/* ---------- Reveal on scroll ---------- */
/* Aparición sutil: menos desplazamiento y más rápida, para que el
   contenido "asiente" en vez de desfilar. */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
.reveal.visible{opacity:1;transform:none}

/* ---------- Sobre nosotros ---------- */
.sobre-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.sobre-art{position:relative;display:grid;place-items:center;padding:2rem}
.sobre-art .disco{position:absolute;width:88%;aspect-ratio:1;border-radius:50%;
  border:1px solid var(--tarjeta-borde);
  background:radial-gradient(circle at 50% 30%,rgba(47,107,240,.18),transparent 60%)}
.sobre-art img{width:min(78%,320px);position:relative;filter:drop-shadow(0 20px 40px rgba(0,0,0,.5))}
.valores{list-style:none;margin-top:1.6rem;display:grid;gap:1rem}
.valores li{display:flex;gap:.9rem;align-items:flex-start}
.valores .ic{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(232,181,63,.16),rgba(232,181,63,.05));border:1px solid rgba(232,181,63,.3);color:var(--oro);font-size:1.1rem}
.valores b{display:block;font-family:var(--fuente-texto);font-weight:700;font-size:.98rem}
.valores span{color:var(--bruma);font-size:.9rem}

/* ---------- Cards de préstamos ---------- */
.grid-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem}
.card{
  background:var(--tarjeta);border:1px solid var(--tarjeta-borde);border-radius:var(--radio);
  padding:1.8rem 1.6rem;transition:transform .25s ease,border-color .25s ease,background .25s ease;position:relative;overflow:hidden;
}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--oro),transparent);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.card:hover{transform:translateY(-3px);border-color:rgba(232,181,63,.4);background:rgba(255,255,255,.055)}
.card:hover::before{transform:scaleX(1)}
.card .cic{font-size:1.7rem;margin-bottom:.9rem}
.card h3{font-size:1.28rem;margin-bottom:.55rem}
.card p{color:var(--bruma);font-size:.92rem;margin-bottom:1.1rem}
.card ul{list-style:none;display:grid;gap:.5rem}
.card li{font-size:.88rem;display:flex;gap:.55rem;align-items:center;color:var(--espuma)}
.card li::before{content:"◆";color:var(--oro);font-size:.7rem}

/* ---------- Pasos ---------- */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.8rem;counter-reset:paso}
.paso{position:relative;padding:2.2rem 1.5rem 1.5rem;border:1px solid var(--tarjeta-borde);border-radius:var(--radio);background:var(--tarjeta)}
.paso::before{counter-increment:paso;content:"0" counter(paso);
  font-family:var(--fuente-display);font-size:2.7rem;color:var(--oro);opacity:.9;display:block;margin-bottom:.4rem;line-height:1}
.paso h3{font-size:1.15rem;margin-bottom:.4rem;font-family:var(--fuente-texto);font-weight:700}
.paso p{color:var(--bruma);font-size:.9rem}
.paso-linea{position:absolute;top:3.1rem;right:-.85rem;color:var(--oro);opacity:.4;font-size:1.2rem;z-index:2}

/* ---------- Por qué (features) ---------- */
.grid-feat{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;margin-top:2.4rem}
.feat{display:flex;gap:1rem;padding:1.4rem;border-radius:var(--radio);border:1px solid var(--linea);background:rgba(15,37,89,.25)}
.feat .fic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;
  background:linear-gradient(135deg,rgba(47,107,240,.25),rgba(47,107,240,.06));border:1px solid rgba(47,107,240,.35)}
.feat b{display:block;font-weight:700;margin-bottom:.25rem}
.feat span{color:var(--bruma);font-size:.9rem}

/* ---------- FAQ ---------- */
.faq{max-width:800px;margin:2.4rem auto 0;display:grid;gap:.8rem}
.faq details{border:1px solid var(--tarjeta-borde);border-radius:12px;background:var(--tarjeta);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:1.1rem 1.3rem;font-weight:700;font-size:.98rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--oro);font-size:1.4rem;font-weight:400;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .resp{padding:0 1.3rem 1.2rem;color:var(--bruma);font-size:.92rem}

/* ---------- Contacto ---------- */
.contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,3.5rem);margin-top:2.6rem;align-items:start}
.info-linea{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:1.3rem}
.info-linea .ic{flex:none;width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font-size:1.1rem;
  background:linear-gradient(135deg,rgba(232,181,63,.16),rgba(232,181,63,.05));border:1px solid rgba(232,181,63,.3)}
.info-linea b{display:block;font-size:.95rem}
.info-linea span,.info-linea a{color:var(--bruma);font-size:.9rem}
.info-linea a:hover{color:var(--celeste)}
form.contacto{background:var(--tarjeta);border:1px solid var(--tarjeta-borde);border-radius:var(--radio);padding:1.8rem}
.campo{margin-bottom:1.1rem}
.campo label{display:block;font-size:.82rem;font-weight:600;margin-bottom:.4rem;color:var(--espuma)}
.campo input,.campo textarea{
  width:100%;background:rgba(8,23,51,.6);border:1px solid var(--tarjeta-borde);border-radius:10px;
  padding:.8rem .9rem;color:var(--espuma);font-family:var(--fuente-texto);font-size:.92rem;transition:border-color .2s}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--oro);box-shadow:0 0 0 3px rgba(232,181,63,.15)}
.campo textarea{resize:vertical;min-height:120px}
.oculto{position:absolute;left:-9999px}
.form-nota{font-size:.78rem;color:var(--bruma);margin-top:.8rem;text-align:center}
.form-msg{display:none;padding:.9rem 1rem;border-radius:10px;font-size:.9rem;font-weight:600;margin-bottom:1rem}
.form-msg.ok{display:block;background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.4);color:#7ef0a9}
.form-msg.err{display:block;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.4);color:#fca5a5}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--linea);background:var(--marino);padding:3rem 0 1.6rem;margin-top:2rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
.footer .marca img{width:52px;height:52px}
.footer p.desc{color:var(--bruma);font-size:.88rem;margin-top:.9rem;max-width:34ch}
.footer h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--oro);margin-bottom:1rem}
.footer ul{list-style:none;display:grid;gap:.6rem}
.footer ul a{color:var(--bruma);font-size:.9rem}
.footer ul a:hover{color:var(--espuma)}
.footer-base{border-top:1px solid var(--linea);padding-top:1.4rem;display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:1rem;color:var(--bruma);font-size:.82rem}
.acceso{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--celeste);
  border:1px solid var(--tarjeta-borde);border-radius:999px;padding:.5rem 1.1rem;transition:.2s}
.acceso:hover{border-color:var(--celeste);background:rgba(124,196,245,.06)}

/* ---------- WhatsApp flotante ---------- */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:40;width:58px;height:58px;border-radius:50%;
  background:#25d366;display:grid;place-items:center;font-size:1.7rem;box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:transform .2s;animation:pulso 2.6s ease-in-out infinite}
.wa-float:hover{transform:scale(1.08)}
@keyframes pulso{0%,100%{box-shadow:0 8px 24px rgba(0,0,0,.35),0 0 0 0 rgba(37,211,102,.5)}50%{box-shadow:0 8px 24px rgba(0,0,0,.35),0 0 0 14px rgba(37,211,102,0)}}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero-grid,.sobre-grid,.contacto-grid{grid-template-columns:1fr}
  .hero-art{order:-1;margin-bottom:1rem}
  .hero-art img{width:min(72%,340px)}
  .franja-grid{grid-template-columns:repeat(2,1fr);gap:1.8rem}
  .grid-cards,.pasos,.grid-feat{grid-template-columns:1fr}
  .paso-linea{display:none}
  .footer-grid{grid-template-columns:1fr;gap:1.6rem}
  .nav-links{display:none}
  .menu-btn{display:block}
  .nav.abierto .nav-links{
    display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(8,23,51,.97);backdrop-filter:blur(14px);padding:.5rem 0;border-bottom:1px solid var(--linea)}
  .nav.abierto .nav-links li{padding:0}
  .nav.abierto .nav-links a{display:block;padding:.9rem clamp(1.1rem,4vw,2rem)}
  .header-in .btn{display:none}
}

/* ============================================================
   AÑADIDOS v2 — Programa VIP, Referidos, páginas internas
   ============================================================ */

/* Hero secundario (páginas internas) */
.hero-mini{
  position:relative;padding:clamp(7rem,12vw,9rem) 0 clamp(3rem,6vw,4.5rem);
  background:
    radial-gradient(1000px 420px at 75% -10%, rgba(47,107,240,.20), transparent 60%),
    radial-gradient(700px 340px at 10% 0%, rgba(232,181,63,.10), transparent 60%),
    var(--abismo);
  border-bottom:1px solid var(--linea);
}
.hero-mini .titulo{margin-top:.6rem}
.hero-mini .intro{max-width:680px}
.migas{font-size:.8rem;color:var(--bruma);margin-bottom:.4rem}
.migas a:hover{color:var(--celeste)}

/* Badge / etiqueta */
.badge{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:.4rem .75rem;border-radius:999px;
  background:rgba(232,181,63,.12);color:var(--oro-claro);
  border:1px solid rgba(232,181,63,.35);
}
.badge.azul{background:rgba(47,107,240,.14);color:var(--celeste);border-color:rgba(124,196,245,.32)}

/* Grilla de beneficios VIP */
.grid-vip{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.1rem;margin-top:2.6rem}
.vip-card{
  position:relative;padding:1.7rem 1.5rem;border-radius:var(--radio);
  background:var(--tarjeta);border:1px solid var(--tarjeta-borde);
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.vip-card:hover{transform:translateY(-4px);border-color:rgba(232,181,63,.45);background:rgba(232,181,63,.05)}
.vip-card .n{
  position:absolute;top:1.1rem;right:1.2rem;font-family:var(--fuente-display);
  font-size:2.2rem;font-weight:700;color:rgba(232,181,63,.22);line-height:1;
}
.vip-card .cic{font-size:1.6rem;margin-bottom:.7rem}
.vip-card h3{font-size:1.16rem;margin-bottom:.45rem}
.vip-card p{color:var(--bruma);font-size:.94rem}

/* Requisitos */
.requisitos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:1.8rem;
}
.req{
  display:flex;gap:.85rem;align-items:flex-start;padding:1.15rem 1.2rem;border-radius:14px;
  background:rgba(47,107,240,.07);border:1px solid var(--tarjeta-borde);
}
.req .ck{color:var(--oro);font-weight:800;font-size:1.05rem;line-height:1.5}
.req b{display:block;margin-bottom:.15rem}
.req span{color:var(--bruma);font-size:.92rem}

/* Línea de tiempo (Recomienda y Gana) */
.timeline{margin-top:2.6rem;display:grid;gap:0}
.tl{
  position:relative;padding:0 0 2rem 3.2rem;border-left:2px solid var(--linea);
}
.tl:last-child{border-left-color:transparent;padding-bottom:0}
.tl .pt{
  position:absolute;left:-15px;top:0;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-size:.8rem;font-weight:800;
  background:var(--marino-2);color:var(--oro-claro);border:1px solid rgba(232,181,63,.5);
}
.tl h3{font-size:1.1rem;margin-bottom:.35rem}
.tl p{color:var(--bruma);font-size:.95rem}
.tl .quien{color:var(--celeste);font-weight:700}

/* Tabla de recompensas */
.tabla-wrap{margin-top:2.2rem;overflow-x:auto;border-radius:var(--radio);border:1px solid var(--tarjeta-borde)}
table.recompensas{width:100%;border-collapse:collapse;min-width:520px;background:var(--tarjeta)}
table.recompensas th,table.recompensas td{padding:1rem 1.15rem;text-align:left;border-bottom:1px solid var(--linea)}
table.recompensas th{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--oro);
  background:rgba(15,37,89,.55);font-weight:800;
}
table.recompensas tr:last-child td{border-bottom:none}
table.recompensas td:first-child{font-weight:700;color:var(--espuma)}
table.recompensas td:last-child{color:var(--bruma);font-size:.94rem}
table.recompensas tbody tr:hover{background:rgba(47,107,240,.06)}

/* Bloque destacado */
.destacado{
  margin-top:2.6rem;padding:1.9rem 1.7rem;border-radius:var(--radio);
  background:linear-gradient(135deg,rgba(232,181,63,.10),rgba(47,107,240,.10));
  border:1px solid rgba(232,181,63,.3);
}
.destacado h3{font-size:1.25rem;margin:.6rem 0 .5rem}
.destacado p{color:var(--bruma)}
.destacado p + p{margin-top:.7rem}

/* Aviso legal / nota */
.nota-legal{
  margin-top:1.6rem;padding:1rem 1.15rem;border-radius:12px;font-size:.86rem;color:var(--bruma);
  background:rgba(255,255,255,.03);border-left:3px solid var(--oro);
}

/* Lista de políticas */
.politicas{margin-top:1.8rem;display:grid;gap:.75rem}
.politicas li{
  list-style:none;display:flex;gap:.75rem;align-items:flex-start;
  color:var(--bruma);font-size:.95rem;
}
.politicas li::before{content:"▸";color:var(--oro);font-weight:800;flex:none}

/* CTA final de página */
.cta-final{
  margin:0;padding:clamp(3rem,7vw,4.5rem) 0;text-align:center;
  background:rgba(15,37,89,.35);border-top:1px solid var(--linea);
}
.cta-final .titulo{font-size:clamp(1.7rem,3.5vw,2.4rem);margin-bottom:.8rem}
.cta-final p{color:var(--bruma);max-width:560px;margin:0 auto 1.7rem}
.cta-botones{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* ============================================================
   AÑADIDOS v3 — Misión, Visión y Valores de marca
   ============================================================ */
.lema{
  margin-top:1.4rem;font-family:var(--fuente-display);font-size:1.05rem;
  font-weight:600;letter-spacing:.02em;color:var(--espuma);
}
.lema b{color:var(--oro);font-weight:700}

.mv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.2rem;margin-top:2.8rem}
.mv{
  display:flex;gap:1.2rem;align-items:flex-start;
  padding:1.8rem 1.6rem;border-radius:var(--radio);
  background:linear-gradient(150deg,rgba(15,37,89,.55),rgba(8,23,51,.35));
  border:1px solid var(--tarjeta-borde);
  transition:transform .25s ease,border-color .25s ease;
}
.mv:hover{transform:translateY(-4px);border-color:rgba(232,181,63,.4)}
.mv .aro{
  flex:none;width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;font-size:1.5rem;
  border:2px solid var(--oro);background:rgba(232,181,63,.08);
  box-shadow:0 0 0 4px rgba(232,181,63,.06);
}
.mv h3{
  font-family:var(--fuente-display);font-size:1.35rem;color:var(--oro);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:.55rem;
}
.mv p{color:var(--bruma);font-size:.95rem;line-height:1.65}

.valores-marca{margin-top:3.2rem;padding-top:2.6rem;border-top:1px solid var(--linea)}
.valores-marca .titulo-valores{
  text-align:center;font-family:var(--fuente-display);font-size:1.5rem;
  color:var(--oro);letter-spacing:.28em;text-transform:uppercase;margin-bottom:2.2rem;
}
.valores-fila{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.valor{text-align:center}
.valor .aro{
  width:64px;height:64px;margin:0 auto .8rem;border-radius:50%;
  display:grid;place-items:center;font-size:1.5rem;
  border:2px solid var(--oro);background:rgba(232,181,63,.07);
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease;
}
.valor:hover .aro{
  transform:translateY(-5px);background:rgba(232,181,63,.16);
  box-shadow:0 8px 24px rgba(232,181,63,.18);
}
.valor b{
  display:block;font-size:.72rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--espuma);
}
@media (max-width:900px){ .valores-fila{grid-template-columns:repeat(3,1fr);gap:1.6rem 1rem} }
@media (max-width:480px){ .valores-fila{grid-template-columns:repeat(2,1fr)} }

/* ============================================================
   AÑADIDOS v4 — Tarjetas de préstamo en formato grande (2 col)
   ============================================================ */
.grid-cards.grid-2{
  grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
  max-width:900px;
}
.card.card-lg{padding:2.4rem 2.1rem}
.card.card-lg .cic{font-size:2.4rem;margin-bottom:1.1rem}
.card.card-lg h3{font-size:1.5rem;margin-bottom:.7rem}
.card.card-lg p{font-size:1rem;line-height:1.7}
.card.card-lg ul{margin-top:1.3rem}
.card.card-lg ul li{font-size:.96rem;padding:.45rem 0}

/* ============================================================
   AÑADIDOS v5 — ADAPTACIÓN MÓVIL (sección por sección)
   ============================================================ */

/* Nunca debe haber scroll horizontal */
html,body{overflow-x:hidden;max-width:100%}
img,svg{max-width:100%}

/* ---------- TABLET (≤900px) — ajustes de respiro ---------- */
@media (max-width:900px){
  .contenedor{padding:0 clamp(1.25rem,5vw,2rem)}
  .seccion{padding:clamp(3.2rem,8vw,5rem) 0}

  /* Enlaces del menú desplegado: área táctil cómoda */
  .nav.abierto .nav-links a{min-height:52px;display:flex;align-items:center;font-size:1rem}

  /* El pulpo del hero ya no invade el texto */
  .hero-art{padding:.5rem 0 1.5rem}
  .hero-art .halo{width:90%;filter:blur(28px);opacity:.75}

  /* Misión / Visión */
  .mv{padding:1.5rem 1.3rem;gap:1rem}
  .mv .aro{width:50px;height:50px;font-size:1.3rem}

  /* Beneficios VIP a una columna */
  .grid-vip{grid-template-columns:1fr;gap:1rem}

  /* Bloque "Nosotros": la ilustración va debajo, no compite */
  .sobre-art{padding:1rem 0;margin:2rem 0}
  .sobre-art .disco{width:64%}
  .sobre-art img{width:min(58%,240px)}
}

/* ---------- MÓVIL (≤600px) — el caso real de tu captura ---------- */
@media (max-width:600px){

  /* ===== Base ===== */
  .contenedor{padding:0 1.25rem}
  .seccion{padding:3rem 0}
  .titulo{font-size:clamp(1.75rem,7vw,2.2rem);line-height:1.15}
  .intro{font-size:.98rem;line-height:1.7}
  .eyebrow{font-size:.66rem;letter-spacing:.16em}
  .eyebrow::before{width:16px}

  /* Botones: cómodos para el pulgar y sin desbordar */
  .btn{width:100%;padding:.95rem 1.2rem;font-size:.95rem;min-height:50px}
  .btn.btn-sm{width:auto}

  /* ===== Header ===== */
  .header-in{height:64px}
  .marca img{width:36px;height:36px}
  .marca .n{font-size:1rem}
  .nav.abierto .nav-links{top:64px}

  /* ===== Hero ===== */
  .hero{padding-top:6.5rem;padding-bottom:3rem}
  .hero h1{font-size:clamp(2rem,9vw,2.6rem)}
  .hero .sub{font-size:1rem;line-height:1.65}
  .hero-cta{flex-direction:column;gap:.7rem;width:100%}
  .hero-art{margin-bottom:.5rem;padding:0}
  .hero-art img{width:min(62%,230px);animation-duration:9s}
  .hero-art .halo{width:78%;filter:blur(34px);opacity:.6}
  .corrientes{opacity:.35}

  /* Chips: uno por línea, legibles */
  .hero-chips{gap:.75rem;margin-top:1.8rem;padding-top:1.3rem;flex-direction:column;align-items:flex-start}
  .chip{font-size:.88rem}

  /* ===== Franja de stats: 2x2 con aire ===== */
  .franja-grid{grid-template-columns:repeat(2,1fr);gap:1rem;padding:2.9rem 0;text-align:center}
  /* Cada dato en su propia tarjeta para que no se vean tan ajustados */
  .franja-grid .stat{background:var(--tarjeta);border:1px solid var(--tarjeta-borde);border-radius:14px;padding:1.15rem .5rem}
  .stat .num{font-size:1.7rem}
  .stat .lbl{font-size:.78rem;line-height:1.4}

  /* ===== Nosotros ===== */
  .sobre-art{padding:.5rem 0;margin:2.4rem 0}
  .sobre-art .disco{width:56%}
  .sobre-art img{width:min(52%,190px)}
  .lema{font-size:1rem;margin-top:1.2rem}

  /* Misión / Visión: ícono arriba, texto debajo */
  .mv-grid{margin-top:2rem;gap:1rem}
  .mv{flex-direction:column;padding:1.5rem 1.3rem;gap:.9rem}
  .mv .aro{width:48px;height:48px;font-size:1.25rem}
  .mv h3{font-size:1.2rem}
  .mv p{font-size:.93rem}

  /* Valores: 2 columnas con aire */
  .valores-marca{margin-top:2.4rem;padding-top:2rem}
  .valores-marca .titulo-valores{font-size:1.2rem;letter-spacing:.2em;margin-bottom:1.8rem}
  .valores-fila{gap:1.8rem .8rem}
  .valor .aro{width:54px;height:54px;font-size:1.3rem;margin-bottom:.6rem}
  .valor b{font-size:.66rem;letter-spacing:.08em}

  /* ===== Préstamos ===== */
  .grid-cards.grid-2{grid-template-columns:1fr}
  .card{padding:1.6rem 1.35rem}
  .card.card-lg{padding:1.8rem 1.4rem}
  .card.card-lg h3{font-size:1.3rem}
  .card.card-lg .cic{font-size:2rem}

  /* ===== Pasos ===== */
  .pasos{gap:1rem}
  .paso{padding:1.5rem 1.3rem}

  /* ===== Programas / VIP ===== */
  .vip-card{padding:1.6rem 1.35rem}
  .vip-card .n{font-size:1.8rem;top:1rem;right:1rem}
  .vip-card h3{font-size:1.08rem;padding-right:2.5rem}
  .requisitos{gap:.8rem}
  .req{padding:1.05rem 1.1rem}
  .destacado{padding:1.5rem 1.3rem;margin-top:2rem}
  .destacado h3{font-size:1.12rem}

  /* ===== Hero de páginas internas ===== */
  .hero-mini{padding:6.5rem 0 2.6rem}
  .hero-mini h1{font-size:clamp(1.9rem,8vw,2.4rem)}

  /* ===== Línea de tiempo (Referidos) ===== */
  .tl{padding:0 0 1.8rem 2.3rem}
  .tl .pt{left:-14px;width:26px;height:26px;font-size:.72rem}
  .tl h3{font-size:1rem}
  .tl p{font-size:.92rem}

  /* ===== Tabla de recompensas: se desliza, con pista visual ===== */
  .tabla-wrap{-webkit-overflow-scrolling:touch}
  table.recompensas{min-width:440px}
  table.recompensas th,table.recompensas td{padding:.85rem .9rem;font-size:.88rem}

  /* ===== FAQ ===== */
  .faq summary{padding:1rem 1.1rem;font-size:.94rem;line-height:1.4;min-height:56px}
  .faq .resp{padding:0 1.1rem 1.1rem;font-size:.9rem;line-height:1.65}

  /* ===== Contacto ===== */
  .contacto{padding:1.5rem 1.3rem}
  .contacto-grid{gap:2rem}
  .info-linea{padding:.9rem 0}
  /* Evita el zoom automático de iOS al tocar un campo (necesita ≥16px) */
  .campo input,.campo textarea{font-size:16px;padding:.9rem 1rem}
  .campo textarea{min-height:120px}

  /* ===== CTA final ===== */
  .cta-final{padding:3rem 0}
  .cta-botones{flex-direction:column}

  /* ===== Footer ===== */
  .footer{padding:2.5rem 0 1.4rem}
  .footer-grid{gap:2rem}
  .footer-base{flex-direction:column;gap:1rem;text-align:center;align-items:center}

  /* ===== Botón flotante de WhatsApp ===== */
  .wa-float{right:16px;bottom:16px;width:54px;height:54px;font-size:1.5rem}
  /* Espacio extra al final para que el botón no tape el pie */
  .footer-base{padding-bottom:3.5rem}
}

/* ---------- MÓVIL ANGOSTO (≤380px) ---------- */
@media (max-width:380px){
  .contenedor{padding:0 1.05rem}
  .marca .n{font-size:.92rem}
  .hero h1{font-size:1.85rem}
  .franja-grid{gap:1.4rem .6rem}
  .valores-fila{grid-template-columns:repeat(2,1fr);gap:1.5rem .6rem}
  .valor b{font-size:.62rem}
  .vip-card .n{display:none}
  .vip-card h3{padding-right:0}
}

/* ============================================================
   AÑADIDOS v6 — Página de solicitudes (selector de tipo)
   ============================================================ */
.tipos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.9rem;margin-top:2rem}
.tipo-card{cursor:pointer;display:block}
.tipo-card input{position:absolute;opacity:0;width:0;height:0}
.tipo-in{
  display:block;height:100%;padding:1.4rem 1.25rem;border-radius:var(--radio);
  background:var(--tarjeta);border:1px solid var(--tarjeta-borde);
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.tipo-card:hover .tipo-in{transform:translateY(-3px);border-color:rgba(232,181,63,.45)}
.tipo-card input:checked + .tipo-in{
  border-color:var(--oro);background:rgba(232,181,63,.10);
  box-shadow:0 0 0 1px var(--oro) inset;
}
.tipo-card input:focus-visible + .tipo-in{outline:2px solid var(--celeste);outline-offset:2px}
.tipo-ic{display:block;font-size:1.7rem;margin-bottom:.6rem}
.tipo-in b{display:block;font-family:var(--fuente-display);font-size:1.05rem;margin-bottom:.3rem}
.tipo-ds{display:block;color:var(--bruma);font-size:.85rem;line-height:1.5}
.contacto select{
  width:100%;padding:.85rem 1rem;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid var(--tarjeta-borde);
  color:var(--espuma);font-family:var(--fuente-texto);font-size:.95rem;
}
.contacto select:focus{outline:none;border-color:var(--oro)}
/* Las opciones del desplegable las pinta el sistema operativo: forzamos
   fondo oscuro y texto claro para que se lean bien (antes: texto claro
   sobre fondo blanco = ilegible). */
.contacto select option{
  background:#0f2559;color:#f5f8ff;
}
.contacto select option:checked,
.contacto select option:hover{
  background:#2f6bf0;color:#fff;
}
@media (max-width:600px){
  .tipos-grid{grid-template-columns:1fr;gap:.7rem}
  .tipo-in{padding:1.15rem 1.1rem}
  .contacto select{font-size:16px}
}

/* ============================================================
   AÑADIDOS v7 — Validación, referidos y código de seguimiento
   ============================================================ */
.campo .op{color:var(--bruma);font-weight:400;font-size:.85em}
.campo input.campo-error,.campo textarea.campo-error,.contacto select.campo-error{
  border-color:#f87171;background:rgba(248,113,113,.06);
}
.campo-aviso{margin-top:.35rem;font-size:.8rem;color:#fca5a5;line-height:1.4}

/* Bloque "alguien me refirió" */
.ref-bloque{
  margin:1.6rem 0;padding:1.3rem;border-radius:14px;
  background:rgba(232,181,63,.06);border:1px solid rgba(232,181,63,.28);
}
.check-linea{display:flex;gap:.8rem;align-items:flex-start;cursor:pointer}
.check-linea input[type=checkbox]{
  width:20px;height:20px;flex:none;margin-top:.15rem;accent-color:var(--oro);cursor:pointer;
}
.check-linea b{display:block;font-size:.98rem;margin-bottom:.15rem}
.check-linea small{display:block;color:var(--bruma);font-size:.85rem;line-height:1.5}
#camposReferidor{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid rgba(232,181,63,.25)}

/* Caja del código de seguimiento */
.codigo-box{
  display:block;margin-top:1.2rem;padding:1.2rem;border-radius:14px;text-align:center;
  background:rgba(8,23,51,.5);border:1px dashed var(--oro);
}
.codigo-lbl{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--bruma);font-weight:700}
.codigo-val{
  display:block;margin:.5rem 0;font-family:var(--fuente-display);
  font-size:2rem;font-weight:800;color:var(--oro);letter-spacing:.1em;
}
.codigo-ayuda{display:block;font-size:.82rem;color:var(--bruma);line-height:1.6}
.codigo-ayuda a{color:var(--oro-claro);text-decoration:underline}

@media (max-width:600px){
  .ref-bloque{padding:1.1rem}
  .codigo-val{font-size:1.6rem}
}

/* ============================================================
   AÑADIDOS v8 — Comodidad móvil + sección Conócenos
   El grueso de las visitas es por celular: aquí se afina el
   espaciado, el tamaño de toque y la lectura en pantalla chica.
   ============================================================ */

/* --- Áreas de toque más cómodas en móvil --- */
@media (max-width:600px){
  /* Botones a ancho completo y con buena altura para el dedo */
  .hero-cta{gap:.7rem}
  .hero-cta .btn{width:100%;justify-content:center;padding:.95rem 1.2rem}
  .btn{min-height:46px}

  /* Los chips del hero, en columna aireada en vez de apretados */
  .hero-chips{gap:.7rem;margin-top:1.8rem;padding-top:1.3rem}
  .chip{font-size:.82rem}

  /* Sesiones con menos aire lateral perdido */
  .contenedor{padding-left:1.1rem;padding-right:1.1rem}
  .seccion{padding-top:3rem;padding-bottom:3rem}

  /* Títulos que no se desborden */
  .hero h1{font-size:clamp(2.1rem,9vw,2.9rem);line-height:1.1}
  .titulo{overflow-wrap:break-word}
}

/* --- Tarjetas de tipo de solicitud: mejor toque en móvil --- */
@media (max-width:600px){
  .tipos-grid{grid-template-columns:1fr;gap:.7rem}
  .tipo-card .tipo-in{flex-direction:row;align-items:center;gap:.9rem;text-align:left;padding:1rem}
  .tipo-card .tipo-ic{font-size:1.6rem;margin:0}
  .tipo-ds{font-size:.82rem}
}

/* --- El botón flotante de WhatsApp no debe tapar contenido --- */
@media (max-width:600px){
  .wa-float{width:52px;height:52px;bottom:16px;right:16px}
  body{padding-bottom:0}
}

/* ============================================================
   Sección CONÓCENOS — la colaboradora encargada
   ============================================================ */
.conocenos{position:relative}
.conocenos-grid{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.conocenos-foto{position:relative;display:grid;place-items:center}
.conocenos-foto img{
  width:min(100%,380px);border-radius:20px;display:block;
  border:1px solid var(--tarjeta-borde);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
/* Marco dorado sutil detrás de la foto */
.conocenos-foto::before{
  content:"";position:absolute;inset:auto;width:min(100%,380px);height:100%;
  border:2px solid rgba(232,181,63,.35);border-radius:20px;
  transform:translate(14px,14px);z-index:-1;
}
.conocenos-nombre{
  font-family:var(--fuente-display);font-size:clamp(1.5rem,3.5vw,2.1rem);
  font-weight:600;margin:.3rem 0 .2rem;
}
.conocenos-cargo{
  color:var(--oro);font-size:.82rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:1.4rem;
}
.conocenos-msg{color:var(--bruma);font-size:1.05rem;line-height:1.7;max-width:52ch}
.conocenos-msg p{margin-bottom:1rem}
.conocenos-firma{
  display:flex;align-items:center;gap:.7rem;margin-top:1.6rem;
  padding-top:1.4rem;border-top:1px solid var(--linea);
}
.conocenos-firma .marca{
  width:38px;height:38px;border-radius:10px;object-fit:contain;
  background:rgba(255,255,255,.04);padding:5px;
}
.conocenos-firma span{font-size:.86rem;color:var(--bruma)}

@media (max-width:820px){
  .conocenos-grid{grid-template-columns:1fr;gap:2rem;max-width:520px;margin:0 auto}
  .conocenos-foto::before{display:none}
  .conocenos-msg{max-width:none}
  /* En movil la foto se muestra CUADRADA y uniforme: el contenedor es un
     cuadrado real y la imagen lo rellena recortando (sin deformar ni jalar).
     Metodo a prueba de balas: contenedor con aspect-ratio + img absoluta. */
  .conocenos-foto{
    order:-1;position:relative;display:block;
    width:100%;max-width:420px;margin:0 auto;
    aspect-ratio:1/1;border-radius:20px;overflow:hidden;
    border:1px solid var(--tarjeta-borde);
    box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
    background:#111427;            /* == color real del fondo de la foto: los lados se disimulan */
    padding:14px;                  /* aire: la cabeza no pega en el borde */
  }
  .conocenos-foto img{
    width:100%;height:100%;max-width:none;
    object-fit:contain;object-position:center center;  /* imagen COMPLETA, sin recortar ni alargar */
    border:0;border-radius:12px;box-shadow:none;display:block;
  }
}