/* ID One Compliance · estilos propios de la landing.
   Reutiliza /tokens.css y /home.css (botones, tarjetas, FAQ, campos, pie). */

.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--verde-fuerte)}
.oscuro .eyebrow,.hero .eyebrow{color:var(--verde)}

/* --- aviso de maqueta: obligatorio, para no presentar el producto como listo --- */
.aviso-maqueta{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--indigo);background:var(--lima);
  padding:6px 12px;border-radius:999px}

/* --- maqueta de panel --- */
.panel{background:var(--indigo-medio);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-tarjeta);padding:var(--e3);color:var(--sobre-indigo-suave)}
.panel-cab{display:flex;justify-content:space-between;align-items:center;gap:var(--e2);
  padding-bottom:var(--e2);border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:var(--e3)}
.panel-cab b{color:var(--sobre-indigo);font-size:.95rem}
.panel-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e2);margin-bottom:var(--e3)}
.kpi{background:rgba(255,255,255,.06);border-radius:10px;padding:var(--e2)}
.kpi .v{font-size:1.5rem;font-weight:800;color:var(--lima);line-height:1}
.kpi .l{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;margin-top:4px}
.panel-fila{display:grid;grid-template-columns:1fr auto auto;gap:var(--e2);align-items:center;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:.86rem}
.panel-fila:last-child{border-bottom:0}
.pastilla{font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.pastilla.ok{background:var(--verde);color:var(--indigo)}
.pastilla.curso{background:var(--lima);color:var(--indigo)}
.pastilla.pend{background:rgba(255,255,255,.16);color:var(--sobre-indigo)}
.barra{display:block;height:6px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;
  margin-top:var(--e1)}
.barra i{display:block;height:100%;background:var(--verde);border-radius:999px}

/* --- etapas numeradas --- */
.etapas{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e3);margin-top:var(--e6)}
.etapa{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-tarjeta);
  padding:var(--e3)}
.etapa .n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:10px;background:var(--verde-suave);color:var(--verde-fuerte);font-weight:800;
  font-size:.9rem;margin-bottom:var(--e2)}
.etapa h3{font-size:1.02rem;margin-bottom:6px}
.etapa p{font-size:.92rem}
.oscuro .etapa{background:var(--indigo-medio);border-color:rgba(255,255,255,.12)}
.oscuro .etapa .n{background:rgba(255,255,255,.1);color:var(--lima)}
.oscuro .etapa p{color:var(--sobre-indigo-suave)}

/* --- planes --- */
.planes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e3);margin-top:var(--e6);
  align-items:stretch}
.plan{display:flex;flex-direction:column;background:var(--superficie);border:1px solid var(--linea);
  border-top:3px solid var(--azul-gris);border-radius:var(--r-tarjeta);padding:var(--e4)}
.plan.destacado{border-top-color:var(--verde-fuerte)}
.plan h3{font-size:1.15rem;margin-bottom:6px}
.plan .para{font-size:.88rem;color:var(--texto-suave);margin-bottom:var(--e3)}
.plan ul{list-style:none;margin:0 0 var(--e3);padding:0;flex:1}
.plan li{position:relative;padding-left:22px;margin-bottom:10px;font-size:.93rem}
.plan li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:3px;
  background:var(--verde-fuerte)}
.plan .btn{width:100%}
.nota-precio{margin-top:var(--e4);font-size:.88rem;color:var(--texto-suave);max-width:70ch}

/* --- recursos todavia no publicados --- */
.recurso{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-tarjeta);
  padding:var(--e4);display:flex;flex-direction:column}
.recurso h3{font-size:1.08rem;margin-bottom:8px}
.recurso p{font-size:.94rem;flex:1}
.pendiente{display:inline-flex;align-items:center;gap:6px;margin-top:var(--e3);font-size:.82rem;
  font-weight:700;color:var(--texto-suave);background:var(--fondo-2);padding:8px 14px;
  border-radius:var(--r-boton);align-self:flex-start}

/* --- bloque de acceso de clientes --- */
.acceso{background:var(--indigo-medio);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-tarjeta);padding:var(--e4);margin-top:var(--e5);max-width:62ch}
.acceso h3{font-size:1.05rem;color:var(--sobre-indigo);margin-bottom:8px}
.acceso p{font-size:.94rem;color:var(--sobre-indigo-suave)}

/* --- aviso legal --- */
.legal{margin-top:var(--e5);padding:var(--e3);border-left:3px solid var(--azul-gris);
  background:var(--azul-gris-suave);border-radius:0 var(--r-boton) var(--r-boton) 0;
  font-size:.92rem;max-width:78ch}
.legal b{color:var(--indigo)}

.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e3);margin-top:var(--e6)}
@media (max-width:1040px){.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g4{grid-template-columns:1fr}}

@media (max-width:900px){
  .etapas,.planes,.panel-kpis{grid-template-columns:1fr}
  .panel-kpis{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:620px){
  .panel-kpis{grid-template-columns:1fr}
  .panel-fila{grid-template-columns:1fr;gap:6px}
}