/* ID One Connect · estilos propios de la landing.
   Reutiliza /tokens.css (paleta, espaciado, foco) y /home.css (botones, tarjetas,
   FAQ, campos de formulario, pie). Aquí solo va lo específico de esta página.

   Recordatorio de las reglas medidas que no se pueden romper:
     · lima sobre blanco = 1.11:1 → invisible. Solo sobre índigo o como fondo.
     · verde sobre blanco = 2.36:1 → para texto va --verde-fuerte (6.57:1).
     · azul grisáceo sobre índigo = 4.03:1 → sobre oscuro va --sobre-indigo-suave. */

.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{position:relative;z-index:4;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}

/* --- etapas numeradas (solución y cómo funciona) --- */
.etapas{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e3);margin-top:var(--e6)}
.etapas.cinco{grid-template-columns:repeat(5,1fr)}
.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)}

/* --- capacidades de inteligencia: tarjetas sobre fondo índigo --- */
.capacidades{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e3);margin-top:var(--e6)}
.capacidad{background:var(--indigo-medio);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-tarjeta);padding:var(--e4)}
.capacidad .n{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:9px;background:rgba(255,255,255,.1);color:var(--lima);font-weight:800;
  font-size:.86rem;margin-bottom:var(--e2)}
.capacidad h3{font-size:1.06rem;color:var(--sobre-indigo);margin-bottom:6px}
.capacidad p{font-size:.94rem;color:var(--sobre-indigo-suave)}

/* --- mensaje destacado --- */
.destacado{margin-top:var(--e5);padding:var(--e4);border-radius:var(--r-tarjeta);
  background:rgba(255,255,255,.06);border-left:3px solid var(--lima);max-width:78ch}
.destacado p{font-size:1.06rem;font-weight:600;color:var(--sobre-indigo);margin:0}

/* --- bloque de alcance y advertencias honestas --- */
.alcance{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}
.alcance b{color:var(--indigo)}
.alcance p+p{margin-top:var(--e2)}

/* --- bloque de acceso de clientes, sobre fondo índigo --- */
.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)}

.nota-precio{margin-top:var(--e4);font-size:.88rem;color:var(--texto-suave);max-width:72ch}

.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:1040px){.etapas.cinco{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){
  .etapas,.capacidades{grid-template-columns:1fr}
  .etapas.cinco{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){.etapas.cinco{grid-template-columns:1fr}}

/* ===========================================================================
   Portada clara con maqueta de producto.
   No usa la clase .hero de home.css: esa fuerza fondo índigo y botones lima,
   que sobre fondo claro quedarían ilegibles.
   ========================================================================= */
.cabecera-luz{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.cabecera-luz .envoltura{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e3);min-height:76px;flex-wrap:wrap}
.cabecera-luz .logo img{height:26px;width:auto}
.cabecera-luz .menu a{color:var(--texto-parrafo)}
.cabecera-luz .menu a:hover{color:var(--indigo)}
.cabecera-luz .menu a.btn-linea{color:var(--indigo);border-color:var(--borde-control)}
.cabecera-luz .menu a.btn-linea:hover{background:var(--azul-gris-suave)}
.cabecera-luz .menu a.btn-principal{background:var(--indigo);color:var(--superficie)}
.cabecera-luz .menu a.btn-principal:hover{background:var(--indigo-claro);color:var(--superficie)}

.hero-luz{position:relative;overflow:hidden;background:var(--fondo);
  padding:clamp(48px,7vw,96px) 0 clamp(56px,8vw,104px)}
.hero-luz .envoltura{position:relative;z-index:2;display:grid;
  grid-template-columns:1.02fr 1.18fr;gap:var(--e8);align-items:center}
.hero-luz h1{font-size:clamp(2.1rem,4.2vw,3.2rem);letter-spacing:-.04em;color:var(--indigo)}
.hero-luz h1 em{font-style:normal;color:var(--verde-fuerte)}   /* 6.57:1 sobre claro */
.hero-luz .bajada{font-size:1.08rem;max-width:46ch;color:var(--texto-parrafo)}

/* formas decorativas: suaves, detrás del contenido, nunca portadoras de información */
.forma{position:absolute;border-radius:50%;filter:blur(2px);z-index:1;pointer-events:none}
.forma-a{width:420px;height:420px;right:-120px;top:-130px;background:var(--verde-suave);opacity:.9}
.forma-b{width:300px;height:300px;right:38%;bottom:-150px;background:var(--azul-gris-suave);opacity:.85}
.forma-c{width:150px;height:150px;right:4%;bottom:6%;background:var(--lima);opacity:.5}

/* --- marco de aplicación --- */
.marco{position:relative;border-radius:14px;background:var(--superficie);
  border:1px solid var(--linea);box-shadow:0 24px 60px rgba(1,10,61,.16);overflow:hidden}
.marco-barra{display:flex;align-items:center;gap:6px;padding:10px 14px;
  background:var(--fondo-2);border-bottom:1px solid var(--linea)}
.marco-barra i{width:9px;height:9px;border-radius:50%;background:#C9CFD9;display:block}
.app{display:grid;grid-template-columns:168px 1fr;min-height:330px}
.app-lado{background:var(--indigo);padding:var(--e2);color:var(--sobre-indigo-suave)}
.app-lado img{height:18px;width:auto;margin-bottom:var(--e3)}
.app-lado ul{list-style:none;margin:0;padding:0}
.app-lado li{font-size:.76rem;padding:8px 10px;border-radius:7px;margin-bottom:3px}
.app-lado li.on{background:rgba(255,255,255,.12);color:var(--superficie);font-weight:700}
.app-cuerpo{padding:var(--e3);background:var(--superficie)}
.app-cuerpo .app-titulo{font-weight:800;font-size:.86rem;color:var(--indigo);margin-bottom:var(--e2)}
.app-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:var(--e3)}
.app-kpi{border:1px solid var(--linea);border-radius:10px;padding:10px}
.app-kpi .v{font-size:1.25rem;font-weight:800;color:var(--indigo);line-height:1}
.app-kpi .l{font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-suave);
  margin-top:3px}
/* La tabla de la maqueta tiene cuatro columnas: sin table-layout fijo su ancho
   mínimo estiraba la columna del grid y el título se salía 41px por la derecha
   en móvil, recortado en silencio por el overflow:hidden del hero. */
.app-tabla{width:100%;border-collapse:collapse;font-size:.68rem;table-layout:fixed}
.app-tabla th,.app-tabla td{overflow-wrap:anywhere}
.app-tabla th{text-align:left;color:var(--texto-suave);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;padding:6px 4px;border-bottom:1px solid var(--linea)}
.app-tabla td{padding:7px 4px;border-bottom:1px solid var(--linea);color:var(--texto-parrafo)}
.marca-estado{font-size:.6rem;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
.marca-estado.proc{background:var(--verde-suave);color:var(--verde-fuerte)}
.marca-estado.pend{background:var(--fondo-2);color:var(--texto-suave)}
.marca-estado.rev{background:var(--azul-gris-suave);color:var(--azul-gris-fuerte)}

/* --- tarjetas flotantes --- */
.flotante{position:absolute;background:var(--superficie);border:1px solid var(--linea);
  border-radius:12px;padding:12px 14px;box-shadow:0 12px 30px rgba(1,10,61,.14);z-index:3}
.flotante .t{font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-suave)}
.flotante .v{font-size:1.3rem;font-weight:800;color:var(--indigo);line-height:1.1}
.flotante.arriba{top:-30px;right:12%}
.flotante.abajo{bottom:-24px;right:-18px;display:flex;align-items:center;gap:10px}
.flotante .punto{width:30px;height:30px;border-radius:9px;background:var(--verde-suave);
  display:flex;align-items:center;justify-content:center;color:var(--verde-fuerte);font-weight:800;
  font-size:.85rem}
.lienzo{position:relative}

@media (max-width:1040px){
  .hero-luz .envoltura{grid-template-columns:1fr;gap:var(--e6)}
  /* En una sola columna el ancho mínimo de la maqueta empujaba el título fuera
     de la pantalla; en escritorio, en cambio, ese ancho es el que le da tamaño
     a la maqueta, así que esta regla vive solo aquí. */
  .hero-luz .envoltura>*{min-width:0}
  .app{grid-template-columns:120px 1fr}
  .app-kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  /* La pastilla de estado no se parte (nowrap) y "En preparación" se salía 5px
     de la maqueta: en pantallas chicas se deja partir en dos líneas. */
  .marca-estado{white-space:normal;display:inline-block}
  .app{grid-template-columns:1fr}
  .app-lado{display:none}
  .flotante{position:static;margin-top:var(--e2);box-shadow:none}
  .forma-a,.forma-b,.forma-c{display:none}
}