/* ==========================================================================
   KÓRIMA SGG — Sistema de diseño 2026
   Tokens: tinta #221433 · morado #3D1066 · morado medio #6B3FA0
           ámbar #D97B1A · papel #FAF9FC · línea #E6E0EF
   Tipografía: Archivo (display) · Public Sans (texto) · IBM Plex Mono (claves)
   ========================================================================== */

:root{
  --tinta:#221433;
  --tinta-suave:#4A3D5C;
  --morado:#3D1066;
  --morado-medio:#6B3FA0;
  --morado-claro:#EFE9F7;
  --ambar:#D97B1A;
  --ambar-suave:#FBEFE0;
  --papel:#FAF9FC;
  --blanco:#FFFFFF;
  --linea:#E6E0EF;
  --display:'Archivo',system-ui,sans-serif;
  --texto:'Public Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --ancho:1140px;
  --radio:10px;
  --sombra:0 10px 30px rgba(61,16,102,.10);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  margin:0;
  font-family:var(--texto);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--tinta);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--morado-medio)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--ambar);outline-offset:2px;border-radius:4px;
}

.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 1.25rem}

/* ---------- Tipografía ---------- */
h1,h2,h3,h4{font-family:var(--display);line-height:1.12;margin:0 0 .6em;letter-spacing:-.015em}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:800}
h3{font-size:1.25rem;font-weight:700}
h4{font-size:1.05rem;font-weight:700}
p{margin:0 0 1em}
.lede{font-size:1.2rem;color:var(--tinta-suave);max-width:46ch}

/* Clave normativa: etiqueta monoespaciada estilo referencia legal */
.clave{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--morado-medio);
  display:inline-flex;align-items:center;gap:.6rem;
  margin-bottom:.9rem;
}
.clave::before{content:"";width:2.2rem;height:1px;background:var(--ambar)}

/* ---------- Botones ---------- */
.btn{
  display:inline-block;
  font-family:var(--display);font-weight:700;font-size:1rem;
  padding:.85rem 1.6rem;border-radius:var(--radio);
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primario{background:var(--morado);color:#fff}
.btn-primario:hover{background:var(--morado-medio);box-shadow:var(--sombra)}
.btn-contorno{border-color:var(--morado);color:var(--morado);background:transparent}
.btn-contorno:hover{background:var(--morado-claro)}
.btn-ambar{background:var(--ambar);color:#fff}
.btn-ambar:hover{box-shadow:0 10px 24px rgba(217,123,26,.35)}
.btn-blanco{background:#fff;color:var(--morado)}

/* ---------- Encabezado ---------- */
.aviso-superior{
  background:var(--tinta);color:#fff;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;
  text-align:center;padding:.45rem 1rem;
}
.aviso-superior a{color:var(--ambar);text-decoration:none}
.aviso-superior a:hover{text-decoration:underline}

header.principal{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linea);
}
.barra-nav{display:flex;align-items:center;gap:1.5rem;min-height:74px}
.barra-nav .logo img{height:44px;width:auto}
nav.menu{margin-left:auto;display:flex;align-items:center;gap:1.4rem}
nav.menu a{
  text-decoration:none;color:var(--tinta);font-weight:500;font-size:.97rem;
  padding:.3rem 0;border-bottom:2px solid transparent;
}
nav.menu a:hover,nav.menu a[aria-current="page"]{border-bottom-color:var(--ambar);color:var(--morado)}
nav.menu .btn{padding:.6rem 1.15rem;font-size:.92rem}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--linea);border-radius:8px;padding:.5rem .7rem;font-size:1.2rem;color:var(--morado)}

@media (max-width:920px){
  .nav-toggle{display:block}
  nav.menu{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--linea);padding:1rem 1.25rem;
  }
  nav.menu.abierto{display:flex}
  nav.menu a{padding:.8rem 0;border-bottom:1px solid var(--linea)}
  nav.menu .btn{margin-top:.9rem;text-align:center}
}

/* ---------- Héroe ---------- */
.heroe{background:linear-gradient(180deg,var(--papel) 0%,#fff 100%);padding:4.5rem 0 3.5rem;overflow:hidden}
.heroe .contenedor{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3rem;align-items:center}
.heroe h1 .acento{color:var(--morado-medio)}
.heroe .acciones{display:flex;flex-wrap:wrap;gap:.9rem;margin:1.6rem 0 1.1rem}
.heroe .nota{font-size:.9rem;color:var(--tinta-suave)}
.heroe .nota strong{color:var(--morado)}

.panel-producto{
  background:#fff;border:1px solid var(--linea);border-radius:14px;
  box-shadow:var(--sombra);overflow:hidden;
}
.panel-producto .barra{
  display:flex;align-items:center;gap:.45rem;
  background:var(--morado);padding:.6rem .9rem;
}
.panel-producto .barra span{width:.62rem;height:.62rem;border-radius:50%;background:rgba(255,255,255,.4)}
.panel-producto .barra span:first-child{background:var(--ambar)}
.panel-producto .barra em{
  font-style:normal;font-family:var(--mono);font-size:.7rem;color:#fff;
  margin-left:auto;letter-spacing:.06em;
}

/* Cinta normativa — firma visual del sitio */
.cinta-normativa{
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  background:#fff;overflow:hidden;white-space:nowrap;
}
.cinta-normativa .pista{
  display:inline-flex;gap:3.5rem;padding:.7rem 0;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;
  color:var(--tinta-suave);
  animation:desplazar 38s linear infinite;
}
.cinta-normativa .pista b{color:var(--morado);font-weight:600}
.cinta-normativa .pista i{font-style:normal;color:var(--ambar)}
@keyframes desplazar{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .cinta-normativa{white-space:normal}
  .cinta-normativa .pista{flex-wrap:wrap;gap:1rem 2rem;padding:.7rem 1.25rem}
}

/* ---------- Secciones ---------- */
section.bloque{padding:4.5rem 0}
section.bloque.papel{background:var(--papel)}
section.bloque.tinta{background:var(--tinta);color:#fff}
section.bloque.tinta h2{color:#fff}
.encabezado-seccion{max-width:62ch;margin-bottom:2.6rem}

/* Resultados (beneficios) */
.malla-resultados{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
@media (max-width:980px){.malla-resultados{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.malla-resultados{grid-template-columns:1fr}}
.tarjeta-resultado{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:1.5rem 1.35rem;
  transition:transform .18s ease,box-shadow .18s ease;
}
.tarjeta-resultado:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.tarjeta-resultado img{width:44px;height:44px;margin-bottom:.9rem}
.tarjeta-resultado h3{font-size:1.05rem;margin-bottom:.35rem}
.tarjeta-resultado p{font-size:.93rem;color:var(--tinta-suave);margin:0}

/* Cumplimiento normativo */
.cuadro-normativo{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
@media (max-width:880px){.cuadro-normativo{grid-template-columns:1fr}}
.lista-marcos{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.7rem}
.lista-marcos li{
  display:flex;gap:.9rem;align-items:baseline;
  background:#fff;border:1px solid var(--linea);border-left:4px solid var(--ambar);
  border-radius:8px;padding:.85rem 1.1rem;
}
.lista-marcos .sigla{
  font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--morado);
  min-width:4.2rem;letter-spacing:.04em;
}
.lista-marcos span{font-size:.95rem;color:var(--tinta-suave)}
.cuadro-normativo figure{margin:0;border-radius:14px;overflow:hidden;box-shadow:var(--sombra)}

/* Módulos: malla 4×3 — el sistema ES modular, la retícula lo dice */
.malla-modulos{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--linea);border-radius:12px;overflow:hidden;background:var(--linea);gap:1px}
@media (max-width:980px){.malla-modulos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.malla-modulos{grid-template-columns:1fr}}
.celda-modulo{background:#fff;padding:1.4rem 1.25rem;transition:background .18s ease}
.celda-modulo:hover{background:var(--morado-claro)}
.celda-modulo img{width:38px;height:38px;margin-bottom:.7rem}
.celda-modulo h3{font-size:.98rem;margin-bottom:.3rem}
.celda-modulo p{font-size:.86rem;color:var(--tinta-suave);margin:0;line-height:1.5}

/* Clientes */
.malla-clientes{display:grid;grid-template-columns:repeat(7,1fr);gap:.9rem;align-items:center}
@media (max-width:980px){.malla-clientes{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){.malla-clientes{grid-template-columns:repeat(3,1fr)}}
.malla-clientes figure{
  margin:0;background:#fff;border:1px solid var(--linea);border-radius:8px;
  padding:.55rem;display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;
}
.malla-clientes img{max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .2s,opacity .2s}
.malla-clientes figure:hover img{filter:none;opacity:1}
.cifra-clientes{font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--morado)}

/* Banda distribuidores (en index) */
.banda-socios{
  background:linear-gradient(135deg,var(--morado) 0%,var(--morado-medio) 100%);
  color:#fff;border-radius:16px;padding:2.8rem 2.5rem;
  display:grid;grid-template-columns:1.4fr .9fr;gap:2rem;align-items:center;
}
@media (max-width:820px){.banda-socios{grid-template-columns:1fr;padding:2rem 1.5rem}}
.banda-socios h2{color:#fff;margin-bottom:.5rem}
.banda-socios p{color:rgba(255,255,255,.85);margin:0}
.banda-socios .clave{color:var(--ambar)}
.banda-socios .clave::before{background:var(--ambar)}
.banda-socios .acciones{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:820px){.banda-socios .acciones{justify-content:flex-start}}

/* ---------- Página distribuidores ---------- */
.heroe-socios{background:var(--tinta);color:#fff;padding:4.5rem 0 3.5rem}
.heroe-socios .contenedor{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center}
@media (max-width:880px){.heroe-socios .contenedor{grid-template-columns:1fr}}
.heroe-socios h1{color:#fff}
.heroe-socios .lede{color:rgba(255,255,255,.8)}
.heroe-socios .clave{color:var(--ambar)}
.tarjeta-economia{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:14px;padding:1.8rem;
}
.tarjeta-economia h3{color:var(--ambar);font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.tarjeta-economia ul{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.tarjeta-economia li{display:grid;gap:.15rem;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:1rem}
.tarjeta-economia li:last-child{border:none;padding-bottom:0}
.tarjeta-economia b{font-family:var(--display);font-size:1.02rem}
.tarjeta-economia span{font-size:.88rem;color:rgba(255,255,255,.72)}

/* Niveles del programa */
.malla-niveles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media (max-width:920px){.malla-niveles{grid-template-columns:1fr}}
.tarjeta-nivel{
  background:#fff;border:1px solid var(--linea);border-radius:14px;
  padding:1.9rem 1.6rem;display:flex;flex-direction:column;gap:.4rem;
}
.tarjeta-nivel.destacado{border:2px solid var(--ambar);box-shadow:var(--sombra);position:relative}
.tarjeta-nivel.destacado::before{
  content:"El camino más común";position:absolute;top:-0.85rem;left:1.4rem;
  background:var(--ambar);color:#fff;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase;padding:.25rem .7rem;border-radius:99px;
}
.tarjeta-nivel .etiqueta{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--morado-medio)}
.tarjeta-nivel h3{font-size:1.3rem;margin:.1rem 0 .2rem}
.tarjeta-nivel .para{font-size:.9rem;color:var(--tinta-suave);min-height:3em}
.tarjeta-nivel ul{list-style:none;padding:0;margin:.6rem 0 1.2rem;display:grid;gap:.55rem}
.tarjeta-nivel li{font-size:.92rem;padding-left:1.4rem;position:relative;color:var(--tinta-suave)}
.tarjeta-nivel li::before{content:"—";position:absolute;left:0;color:var(--ambar);font-weight:700}
.tarjeta-nivel .btn{margin-top:auto;text-align:center}

/* Proceso (secuencia real → numeración justificada) */
.pasos{counter-reset:paso;display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
@media (max-width:920px){.pasos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.pasos{grid-template-columns:1fr}}
.paso{counter-increment:paso;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:1.5rem 1.3rem}
.paso::before{
  content:counter(paso,decimal-leading-zero);
  font-family:var(--mono);font-size:.85rem;color:var(--ambar);font-weight:600;
  display:block;margin-bottom:.7rem;
}
.paso h3{font-size:1rem;margin-bottom:.35rem}
.paso p{font-size:.9rem;color:var(--tinta-suave);margin:0}
.paso .plazo{display:inline-block;margin-top:.7rem;font-family:var(--mono);font-size:.72rem;color:var(--morado-medio);background:var(--morado-claro);padding:.2rem .55rem;border-radius:99px}

/* Preguntas de socios */
.preguntas{display:grid;gap:.8rem;max-width:820px}
.preguntas details{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:0}
.preguntas summary{
  cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.02rem;
  padding:1.1rem 1.3rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;
}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"+";color:var(--ambar);font-weight:700;font-size:1.2rem}
.preguntas details[open] summary::after{content:"–"}
.preguntas .respuesta{padding:0 1.3rem 1.2rem;color:var(--tinta-suave);font-size:.97rem}

/* Cita / testimonio */
.cita{
  border-left:4px solid var(--ambar);background:var(--papel);
  border-radius:0 12px 12px 0;padding:1.8rem 2rem;max-width:760px;
}
.cita p{font-family:var(--display);font-size:1.2rem;font-weight:500;line-height:1.45;margin-bottom:.8rem}
.cita footer{font-family:var(--mono);font-size:.8rem;color:var(--tinta-suave)}

/* ---------- Formularios ---------- */
.zona-contacto{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:start}
@media (max-width:880px){.zona-contacto{grid-template-columns:1fr}}
.datos-contacto{display:grid;gap:1.2rem}
.datos-contacto .dato{display:flex;gap:.9rem;align-items:flex-start}
.datos-contacto .dato strong{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--morado-medio);margin-bottom:.15rem}
.datos-contacto .dato a{color:var(--tinta);text-decoration:none;font-weight:600}
.datos-contacto .dato a:hover{color:var(--morado)}

form.formulario{
  background:#fff;border:1px solid var(--linea);border-radius:14px;
  padding:2rem;box-shadow:var(--sombra);display:grid;gap:1rem;
}
form.formulario label{font-weight:600;font-size:.9rem;display:grid;gap:.35rem}
form.formulario input,form.formulario select,form.formulario textarea{
  font:inherit;padding:.75rem .9rem;border:1px solid var(--linea);border-radius:8px;
  background:var(--papel);width:100%;
}
form.formulario input:focus,form.formulario select:focus,form.formulario textarea:focus{border-color:var(--morado-medio);background:#fff}
.fila-doble{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.fila-doble{grid-template-columns:1fr}}
form.formulario .legal{font-size:.78rem;color:var(--tinta-suave)}
form.formulario .legal a{color:var(--morado-medio)}

/* ---------- Pie ---------- */
footer.pie{background:var(--tinta);color:rgba(255,255,255,.75);padding:3rem 0 2rem;font-size:.92rem}
.pie-malla{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
@media (max-width:760px){.pie-malla{grid-template-columns:1fr}}
footer.pie h4{color:#fff;font-size:.95rem;margin-bottom:.8rem}
footer.pie a{color:rgba(255,255,255,.75);text-decoration:none}
footer.pie a:hover{color:var(--ambar)}
footer.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.pie-logos{display:flex;gap:1.4rem;align-items:center;margin-top:1rem}
.pie-logos img{height:38px;width:auto;background:#fff;border-radius:6px;padding:.3rem}
.pie-legal{border-top:1px solid rgba(255,255,255,.14);padding-top:1.4rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.82rem}

/* WhatsApp flotante */
.whatsapp-flotante{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:70;
  width:56px;height:56px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.25);text-decoration:none;
}
.whatsapp-flotante svg{width:30px;height:30px;fill:#fff}
.whatsapp-flotante:hover{transform:scale(1.07)}

/* Variante de 3 columnas para mallas de resultados */
.malla-resultados.tres{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.malla-resultados.tres{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.malla-resultados.tres{grid-template-columns:1fr}}

/* Aparición al hacer scroll (solo con JS activo; sin JS todo es visible) */
html.js .revelar{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
html.js .revelar.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .revelar{opacity:1;transform:none}}

/* ==========================================================================
   PASE DE OPTIMIZACIÓN VISUAL · v1.1
   Profundidad, integración y refinamiento institucional
   ========================================================================== */

/* Anclas: compensar cabecera pegajosa */
section[id],div[id]{scroll-margin-top:96px}

/* --- Aviso superior con degradado de marca --- */
.aviso-superior{
  background:linear-gradient(90deg,var(--tinta) 0%,var(--morado) 100%);
  letter-spacing:.04em;
}

/* --- Héroe: textura de retícula + profundidad --- */
.heroe{
  background:
    linear-gradient(180deg,rgba(61,16,102,.045),transparent 38%),
    repeating-linear-gradient(90deg,rgba(107,63,160,.05) 0 1px,transparent 1px 88px),
    repeating-linear-gradient(0deg,rgba(107,63,160,.04) 0 1px,transparent 1px 88px),
    linear-gradient(180deg,var(--papel) 0%,#fff 100%);
  position:relative;
}
.heroe::after{
  content:"";position:absolute;inset:auto 0 0 0;height:120px;
  background:linear-gradient(180deg,transparent,#fff);pointer-events:none;
}
.heroe .contenedor{position:relative;z-index:1}
.heroe .acciones .btn{padding:.8rem 1.35rem}

/* Sello flotante de cumplimiento sobre el panel de producto */
.panel-producto{position:relative}
.sello-cumplimiento{
  position:absolute;right:14px;bottom:14px;z-index:2;
  background:rgba(255,255,255,.96);border:1px solid var(--linea);border-radius:12px;
  box-shadow:0 10px 26px rgba(61,16,102,.22);
  padding:.55rem .85rem;display:flex;align-items:center;gap:.6rem;
  backdrop-filter:blur(4px);
}
.sello-cumplimiento .punto{width:.6rem;height:.6rem;border-radius:50%;background:#2FA66A;flex:none;box-shadow:0 0 0 4px rgba(47,166,106,.15)}
.sello-cumplimiento span{font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;color:var(--tinta-suave);line-height:1.35}
.sello-cumplimiento b{display:block;color:var(--morado);font-size:.74rem}
@media (max-width:980px){.sello-cumplimiento{right:10px;bottom:-16px}}

/* --- Tarjetas de resultados: icono integrado en ficha --- */
.tarjeta-resultado{position:relative;overflow:hidden}
.tarjeta-resultado::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--morado-medio),var(--ambar));
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.tarjeta-resultado:hover::before{transform:scaleX(1)}
.tarjeta-resultado img{
  width:46px;height:46px;padding:9px;box-sizing:content-box;
  background:var(--morado-claro);border-radius:12px;
}

/* --- Lista de marcos normativos: interacción sutil --- */
.lista-marcos li{transition:transform .18s ease,box-shadow .18s ease}
.lista-marcos li:hover{transform:translateX(4px);box-shadow:var(--sombra)}

/* Figura normativa integrada con pie de imagen */
.cuadro-normativo figure{position:relative}
.cuadro-normativo figcaption{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(0deg,rgba(34,19,51,.85),transparent);
  color:#fff;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  padding:2.2rem 1.2rem .9rem;
}

/* --- Módulos: folio M01–M12 integra la identidad mono --- */
.malla-modulos{counter-reset:modulo}
.celda-modulo{counter-increment:modulo;position:relative}
.celda-modulo::before{
  content:"M" counter(modulo,decimal-leading-zero);
  position:absolute;top:1.1rem;right:1.1rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  color:var(--morado-medio);opacity:.55;
}
.celda-modulo img{transition:transform .22s ease}
.celda-modulo:hover img{transform:scale(1.12)}

/* --- Muro de clientes: marco institucional --- */
.malla-clientes figure{transition:border-color .2s ease,box-shadow .2s ease}
.malla-clientes figure:hover{border-color:var(--morado-medio);box-shadow:var(--sombra)}

/* --- Banda de socios: ornamento de fondo --- */
.banda-socios{
  position:relative;overflow:hidden;
  background:
    radial-gradient(620px 300px at 108% 120%,rgba(217,123,26,.28),transparent 60%),
    linear-gradient(135deg,var(--morado) 0%,var(--morado-medio) 100%);
}
.banda-socios::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 72px);
  pointer-events:none;
}
.banda-socios > *{position:relative;z-index:1}

/* --- Tarjetas de nivel: profundidad y jerarquía --- */
.tarjeta-nivel{transition:transform .2s ease,box-shadow .2s ease}
.tarjeta-nivel:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.tarjeta-nivel .etiqueta::before{content:"— ";color:var(--ambar)}

/* --- Pasos del proceso: línea conectora --- */
.pasos{position:relative}
.paso{position:relative;transition:transform .2s ease,box-shadow .2s ease}
.paso:hover{transform:translateY(-3px);box-shadow:var(--sombra)}
.paso::after{
  content:"";position:absolute;top:2.05rem;right:-1.2rem;width:1.2rem;height:2px;
  background:linear-gradient(90deg,var(--ambar),var(--linea));
}
.paso:last-child::after{content:none}
@media (max-width:920px){.paso::after{content:none}}

/* --- Cita: comillas tipográficas --- */
.cita{position:relative}
.cita::before{
  content:"\201C";position:absolute;top:-.4rem;left:1rem;
  font-family:var(--display);font-size:4.4rem;font-weight:800;
  color:var(--ambar);opacity:.3;line-height:1;
}
.cita p{position:relative}

/* --- Formularios: detalle de marca --- */
form.formulario{position:relative;overflow:hidden}
form.formulario::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--morado),var(--morado-medio) 55%,var(--ambar));
}
form.formulario input:hover,form.formulario select:hover,form.formulario textarea:hover{border-color:var(--morado-medio)}
form.formulario button[type="submit"]{justify-self:start}

/* --- Datos de contacto: pastilla de marca --- */
.datos-contacto .dato > div, .datos-contacto > div{
  border-left:3px solid var(--ambar);padding-left:.9rem;
}

/* --- Encabezados de sección: filete de cierre --- */
.encabezado-seccion{position:relative;padding-bottom:1.2rem}
.encabezado-seccion::after{
  content:"";position:absolute;left:0;bottom:0;width:72px;height:3px;
  background:linear-gradient(90deg,var(--morado-medio),var(--ambar));border-radius:2px;
}

/* --- Pie: filete superior de marca --- */
footer.pie{position:relative}
footer.pie::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--morado-medio),var(--ambar));
}

/* --- Héroe de socios: textura coherente --- */
.heroe-socios{
  background:
    radial-gradient(900px 420px at 88% -20%,rgba(107,63,160,.5),transparent 60%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 88px),
    var(--tinta);
}
.tarjeta-economia li b::before{
  content:"";display:inline-block;width:.55rem;height:.55rem;border-radius:50%;
  background:var(--ambar);margin-right:.55rem;vertical-align:1px;
}

/* --- Preguntas: borde activo --- */
.preguntas details[open]{border-color:var(--morado-medio);box-shadow:var(--sombra)}

/* --- Cinta normativa: pausa al pasar el cursor --- */
.cinta-normativa:hover .pista{animation-play-state:paused}

/* ==========================================================================
   PASE DE REFINAMIENTO · v1.2
   ========================================================================== */

/* CORRECCIÓN: el botón dentro del menú heredaba color y subrayado de los
   enlaces de navegación por especificidad. Se restaura su apariencia. */
nav.menu a.btn,nav.menu a.btn:hover{
  color:#fff;border-bottom:2px solid transparent;
}
nav.menu a.btn.btn-primario{background:var(--morado)}
nav.menu a.btn.btn-primario:hover{background:var(--morado-medio);box-shadow:var(--sombra);color:#fff}
nav.menu a.btn.btn-ambar{background:var(--ambar)}
nav.menu a.btn.btn-ambar:hover{box-shadow:0 10px 24px rgba(217,123,26,.35);color:#fff}

/* Selección de texto con color de marca */
::selection{background:var(--morado-medio);color:#fff}

/* Cabecera con elevación sutil para despegarla del contenido */
header.principal{box-shadow:0 1px 0 var(--linea),0 8px 24px rgba(61,16,102,.05)}

/* Héroe: CTAs en línea y mejor respiración */
.heroe .acciones{align-items:center}
.heroe .acciones .btn{white-space:nowrap}
@media (max-width:560px){.heroe .acciones .btn{white-space:normal;width:100%;text-align:center}}

/* Panel de producto: leve perspectiva que se endereza al pasar el cursor */
.panel-producto{transition:transform .35s ease,box-shadow .35s ease}
@media (min-width:981px){
  .panel-producto{transform:perspective(1200px) rotateY(-4deg) rotateX(1.5deg)}
  .panel-producto:hover{transform:perspective(1200px) rotateY(0) rotateX(0);box-shadow:0 24px 60px rgba(61,16,102,.18)}
}

/* Cifra destacada de instituciones */
.cifra-clientes{
  font-size:1.3rem;
  background:linear-gradient(90deg,var(--morado),var(--morado-medio));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Despliegue suave del acordeón de preguntas */
.preguntas details .respuesta{animation:desplegar .28s ease}
@keyframes desplegar{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Enlaces del cuerpo con subrayado de marca */
main p a{text-decoration-color:var(--ambar);text-underline-offset:3px}

/* Imágenes de clientes: transición más suave */
.malla-clientes img{transition:filter .25s ease,opacity .25s ease,transform .25s ease}
.malla-clientes figure:hover img{transform:scale(1.04)}

/* Botón de envío a ancho natural con flecha sutil */
form.formulario button[type="submit"]::after{content:" →"}

/* ==========================================================================
   AJUSTE DE HÉROE · v1.3 (titular C, jerarquía de CTAs, pastilla de confianza)
   ========================================================================== */
.heroe .acciones{flex-direction:column;align-items:flex-start;gap:1rem;margin:1.8rem 0 1.4rem}
.enlace-secundario{
  font-weight:700;color:var(--morado);text-decoration:none;font-size:1rem;
  border-bottom:2px solid var(--ambar);padding-bottom:2px;
  transition:color .18s ease,border-color .18s ease;
}
.enlace-secundario span{display:inline-block;transition:transform .18s ease}
.enlace-secundario:hover{color:var(--morado-medio)}
.enlace-secundario:hover span{transform:translateX(4px)}

.nota-confianza{
  display:inline-flex;align-items:center;gap:.55rem;
  background:#fff;border:1px solid var(--linea);border-radius:999px;
  padding:.5rem 1.05rem;font-size:.88rem;color:var(--tinta-suave);
  box-shadow:0 4px 14px rgba(61,16,102,.07);
}
.nota-confianza strong{color:var(--morado)}
.punto-verde{
  width:.6rem;height:.6rem;border-radius:50%;background:#2FA66A;flex:none;
  box-shadow:0 0 0 4px rgba(47,166,106,.15);
}

/* ==========================================================================
   AJUSTE DE HÉROE DE SOCIOS · v1.4 (titular A, jerarquía de CTAs, pastilla)
   ========================================================================== */
.heroe-socios h1 em{font-style:normal;color:var(--ambar)}
.acciones-socios{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;margin-top:1.8rem}
.enlace-secundario.claro{color:#fff;border-bottom-color:var(--ambar)}
.enlace-secundario.claro:hover{color:var(--ambar)}
.nota-confianza.oscura{
  margin-top:1.3rem;background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.18);box-shadow:none;color:rgba(255,255,255,.8);
}
.nota-confianza.oscura strong{color:#fff}