/* Landing con chat de IA (DC-1293 / PG-42).
   Estilos del prototipo aprobado (credibusiness-entrega-landing-chat-ia).
   La barra del prototipo no existe aquí: --proto vale 0. */

/* ══════════════════════════════════════════════════════════════
   Valores tomados de credibusiness.com con el inspector.
   Tipografía Inter · cuerpo 19/28 con tracking −0.38
   Texto #282828 · marino #0a3d8e · verde azulado #6f9aa8
   Botones radio 9px peso 600 · tarjetas radio 15px
   Sombras grandes y difusas · iconos Font Awesome 7
   ══════════════════════════════════════════════════════════════ */
:root{
  --marino:#0a3d8e; --marino-osc:#07306f;
  --agua:#6f9aa8; --agua-cl:#eef4f6; --agua-osc:#3f8394; --agua-bor:#a9c9d2;
  --texto:#282828; --texto-2:#5c5c5c; --texto-3:#888888;
  --papel:#ffffff; --lienzo:#f6f8fa; --raya:#e4e8ee; --raya-2:#d2d9e2;
  --verde:#1f7a52; --verde-cl:#e9f5ef; --rojo:#b3423c; --ambar:#9c6b12; --ambar-cl:#fdf4e3;
  --r-boton:9px; --r-caja:15px;
  --sombra-alta:0 15px 37px rgba(0,0,0,.15);
  --sombra-suave:0 16px 24px rgba(73,104,126,.16);
  --sans:'Inter',-apple-system,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:'Source Serif 4','Source Serif Pro',Georgia,serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
  --proto:40px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--papel);color:var(--texto);font-family:var(--sans);
  font-size:19px;line-height:28px;letter-spacing:-.38px;-webkit-font-smoothing:antialiased;padding-top:var(--proto)}
a{color:inherit;text-decoration:none}
button{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--marino);outline-offset:3px;border-radius:4px}
.contenedor{max-width:1200px;margin:0 auto;padding:0 34px}
[hidden]{display:none!important}
h1{font-size:clamp(26px,2.6cqw + 9px,37px);line-height:1.22;font-weight:600;color:var(--marino);letter-spacing:-.5px;text-wrap:balance}
h2{font-size:clamp(22px,1.7cqw + 9px,29px);line-height:1.26;font-weight:600;color:var(--marino);letter-spacing:-.4px}

/* ── el sitio, dentro de un ancho que podemos cambiar ── */
#sitio{container-type:inline-size;container-name:sitio;position:relative;
  min-height:calc(100vh - var(--proto));margin:0 auto;background:var(--papel);transition:width .18s}
body.enmarcado{background:#e9edf2;padding-bottom:26px}
body.enmarcado{overflow:hidden}
body.enmarcado #sitio{border:1px solid #cfd8e4;border-radius:18px;margin-top:26px;
  box-shadow:0 18px 46px rgba(18,48,107,.16);
  height:calc(100vh - var(--proto) - 52px);min-height:0;overflow-y:auto;overflow-x:hidden}
body.enmarcado .cabecera{top:0}
body.enmarcado .wasap{position:absolute}
.medida{position:fixed;top:calc(var(--proto) + 8px);left:50%;transform:translateX(-50%);z-index:60;
  font-size:12px;color:#7a8ba4;background:#fff;border:1px solid #dbe3ec;border-radius:20px;padding:3px 12px;letter-spacing:0}
body:not(.enmarcado) .medida{display:none}

/* ── menú móvil ── */
.velo-menu{position:fixed;inset:0;z-index:65;background:rgba(12,24,44,.5);opacity:0;transition:opacity .2s}
.velo-menu.abierto{opacity:1}
.velo-menu[hidden]{display:none}
.panel-movil{position:fixed;top:0;right:0;bottom:0;z-index:70;width:min(324px,86%);background:#fff;
  transform:translateX(101%);visibility:hidden;transition:transform .22s ease,visibility 0s .22s;
  display:flex;flex-direction:column;padding:18px 22px 26px;overflow-y:auto;
  box-shadow:-8px 0 30px rgba(12,24,44,.18)}
.panel-movil.abierto{transform:none;visibility:visible;transition:transform .22s ease}
.pm-sup{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pm-cerrar{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-boton);color:var(--texto-2);font-size:19px;margin-right:-10px}
.pm-cerrar:hover{background:var(--lienzo);color:var(--texto)}
.panel-movil a.pm-l{display:block;font-size:18px;color:var(--marino);padding:15px 0;border-bottom:1px solid var(--raya)}
.panel-movil .entrar{padding:15px 0;justify-content:flex-start;font-size:18px;border-radius:0;
  border-bottom:1px solid var(--raya)}
.panel-movil .entrar:hover{background:none;color:var(--agua)}
.panel-movil .btn{margin-top:22px;width:100%}
.pm-pie{margin-top:auto;padding-top:24px;font-size:14px;line-height:22px;color:var(--texto-3)}

/* ── barra del prototipo ── */
.proto{position:fixed;top:0;left:0;right:0;height:var(--proto);z-index:100;background:#0e1a2c;color:#b9c6d8;
  display:flex;align-items:center;gap:18px;padding:0 18px;font-size:13px;line-height:1;letter-spacing:0}
.proto-m{font-weight:600;color:#fff;flex:0 0 auto}
.proto-m em{font-style:normal;font-weight:400;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:#7a8ba4;margin-left:8px}
/* Un solo selector: dice dónde estás y abre un panel con todas las pantallas
   agrupadas. Antes había una pestaña por grupo y ya no cabían en la barra. */
.proto-n{display:flex;align-items:center;gap:4px;flex:1;min-width:0}
.proto-gr{flex:0 1 auto;min-width:0}
.proto-tab{display:flex;align-items:center;gap:8px;padding:7px 11px;border-radius:6px;max-width:100%;
  white-space:nowrap;color:#b9c6d8;font-size:13px;background:#1c2b42}
.proto-tab .g{flex:0 0 auto}
.proto-tab b{font-weight:600;color:#fff;padding-left:8px;border-left:1px solid #3a4d6b;overflow:hidden;text-overflow:ellipsis}
.proto-tab i{font-size:9px;opacity:.6;transition:transform .15s;flex:0 0 auto}
.proto-tab.abierto i{transform:rotate(180deg)}
.proto-tab:hover,.proto-tab.abierto{background:#2a3d5b;color:#fff}
.proto-pa{flex:0 0 auto;width:28px;height:28px;border-radius:6px;color:#8c9cb5;font-size:11px}
.proto-pa:hover{background:#1c2b42;color:#fff}
.proto-menu{position:fixed;top:calc(var(--proto) + 6px);left:12px;right:12px;z-index:110;max-width:1180px;margin:0 auto;
  max-height:calc(100vh - var(--proto) - 24px);overflow-y:auto;
  background:#16243a;border:1px solid #2a3d5b;border-radius:10px;padding:14px 12px 12px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px 10px;align-items:start}
.proto-menu[hidden]{display:none}
.proto-menu section.ancho{grid-column:span 2}
.proto-menu h4{font-size:13px;font-weight:600;color:#fff;padding:0 11px 8px;margin-bottom:6px;border-bottom:1px solid #2a3d5b}
.proto-menu section>div{display:flex;flex-direction:column;gap:6px}
.proto-menu section p{display:flex;flex-direction:column;gap:1px;margin:0}
.proto-menu section.ancho>div{display:block;column-count:2;column-gap:10px}
.proto-menu section.ancho>div>p{break-inside:avoid;margin-bottom:6px}
.proto-menu button{display:block;width:100%;text-align:left;padding:7px 11px;border-radius:5px;color:#b9c6d8;font-size:13px;line-height:1.3}
.proto-menu button:hover{background:#22334f;color:#fff}
.proto-menu button[aria-current="true"]{background:#2a3d5b;color:#fff;font-weight:600}
.proto-h{display:block;padding:2px 11px 4px;font-size:11.5px;font-weight:500;color:#7a8ba4}
.proto-v{display:flex;gap:2px;flex:0 0 auto;background:#1c2b42;border-radius:7px;padding:3px}
.proto-v button{padding:6px 10px;border-radius:5px;color:#8c9cb5;font-size:13px;display:flex;align-items:center;gap:7px}
.proto-v button:hover{color:#fff}
.proto-v button[aria-current="true"]{background:#33496b;color:#fff}
.proto-x{flex:0 0 auto;color:#7a8ba4;padding:7px 10px;border-radius:6px;font-size:13px}
.proto-x:hover{background:#1c2b42;color:#fff}
/* en ventanas angostas la barra se queda sin sitio y aplasta las pestañas */
@media (max-width:900px){
  .proto{gap:10px;padding:0 12px}
  .proto-m em{display:none}
  .proto-v button span{display:none}
  .proto-v button{padding:6px 9px}
  .proto-menu section.ancho{grid-column:auto}
  .proto-menu section.ancho>div{column-count:1}
}
@media (max-width:640px){
  .proto-m{display:none}
  .proto-tab .g{display:none}
  .proto-tab b{padding-left:0;border-left:0}
  .proto-x{font-size:0;padding:7px 8px}
  .proto-x::after{content:"\f070";font-family:"Font Awesome 7 Free";font-weight:900;font-size:13px}
}
body.limpio{padding-top:0}
body.limpio .proto{display:none}
/* pantallas que viven en app.credibusiness.com: sin cabecera del sitio ni flotantes */
body.suelta .cabecera,body.suelta .wasap{display:none}
/* en la app sí va, abajo a la derecha: es el sitio estándar, no pegado al logo */
body.suelta.en-app .wasap{display:inline-flex}
/* la landing con chat conserva el WhatsApp del sitio; en conversación, en
   celular, sube para no tapar el botón de enviar */
body.suelta.en-lia .wasap{display:inline-flex}
body.suelta .partida{min-height:calc(100vh - var(--proto))}
body.limpio.suelta .partida{min-height:100vh}
body.enmarcado.suelta .partida{min-height:calc(100vh - var(--proto) - 52px)}

/* ── cabecera ── */
.cabecera{position:sticky;top:var(--proto);z-index:40;background:#fff;border-bottom:1px solid var(--raya)}
#sitio{isolation:isolate}
body.limpio .cabecera{top:0}
.nav-fila{display:flex;align-items:center;gap:38px;height:78px}
.logo{font-family:var(--serif);font-size:25px;font-weight:700;letter-spacing:-.3px;flex:0 0 auto;cursor:pointer;line-height:1}
.logo .a{color:var(--agua)} .logo .b{color:#12306b}
.menu{display:flex;gap:30px}
.menu a{font-size:17px;color:var(--marino);padding:4px 0;border-bottom:2px solid transparent}
.menu a:hover{border-bottom-color:var(--agua)}
.derecha{margin-left:auto;display:flex;align-items:center;gap:10px}
.entrar{font-size:17px;color:var(--marino);font-weight:500;padding:12px 16px;border-radius:var(--r-boton);
  min-height:48px;display:inline-flex;align-items:center}
.entrar:hover{background:var(--lienzo)}
.burger{display:none;width:48px;height:48px;align-items:center;justify-content:center;border-radius:var(--r-boton);
  color:var(--marino);font-size:20px}

/* ── botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:16px;font-weight:600;
  letter-spacing:-.2px;line-height:1;padding:16px 24px;border-radius:var(--r-boton);min-height:48px;
  background:var(--marino);color:#fff;border:1.5px solid var(--marino);transition:background .15s}
.btn:hover{background:var(--marino-osc);border-color:var(--marino-osc)}
.btn.hueco{background:#fff;color:var(--marino)}
.btn.hueco:hover{background:var(--lienzo);border-color:var(--marino)}
.btn.ancho{width:100%}
.btn i{font-size:14px}
.subrayado{font-size:17px;font-weight:600;color:var(--marino);padding:12px 2px;min-height:48px;
  display:inline-flex;align-items:center;border-bottom:2px solid var(--raya-2)}
.subrayado:hover{border-bottom-color:var(--marino)}

/* ── hero ── */
.hero{background:var(--lienzo);border-bottom:1px solid var(--raya);padding:clamp(34px,5cqw,80px) 0 96px}
.hero-rejilla{display:grid;
  grid-template-columns:minmax(0,1fr) clamp(280px,40cqw,560px);
  gap:clamp(28px,4cqw,64px);align-items:center}
/* el 16:9 rinde menos alto que el monitor, así que con video el lado derecho pide más ancho */
.hero-rejilla:has(.hero-video){grid-template-columns:minmax(0,1fr) clamp(300px,42cqw,580px)}
.epi{display:flex;align-items:flex-start;gap:clamp(9px,1cqw,13px);margin-bottom:clamp(13px,1.6cqw,20px)}
.epi i{width:clamp(16px,2cqw,28px);height:2px;background:var(--agua);display:block;border-radius:2px;flex:0 0 auto;margin-top:clamp(8px,.9cqw,11px)}
.epi span{font-size:clamp(13px,.3cqw + 11px,15px);line-height:1.45;font-weight:600;color:var(--agua);letter-spacing:-.2px}
.hero h1{margin-bottom:clamp(13px,1.6cqw,20px)}
.bajada{font-size:clamp(16px,.5cqw + 13px,19px);line-height:1.52;color:var(--texto-2);margin-bottom:clamp(22px,2.6cqw,34px)}
.ctas{display:flex;align-items:center;gap:clamp(10px,1.4cqw,18px);flex-wrap:wrap;margin-bottom:clamp(13px,1.6cqw,20px)}
.mini{font-size:clamp(14px,.3cqw + 12px,16px);line-height:1.45;color:var(--texto-3)}
.mini b{color:var(--texto);font-weight:600}

/* ── cinta de clientes: desfile continuo, como el del sitio de hoy ── */
.clientes{background:var(--papel);padding:clamp(44px,5cqw,72px) 0 clamp(40px,4.6cqw,64px);overflow:hidden}
.clientes-t{font-size:clamp(21px,1.7cqw + 9px,29px);line-height:1.28;font-weight:600;color:var(--marino);
  letter-spacing:-.4px;text-align:center;text-wrap:balance;max-width:44ch;margin:0 auto clamp(30px,3.4cqw,46px)}
/* el degradado de los bordes evita que las marcas aparezcan y desaparezcan de golpe */
.cinta{overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)}
.cinta-pista{display:flex;align-items:center;gap:clamp(52px,7.4cqw,112px);width:max-content;
  animation:desfile 46s linear infinite}
.cinta:hover .cinta-pista{animation-play-state:paused}
/* la pista lleva la lista dos veces: al llegar al 50% vuelve al inicio sin salto */
@keyframes desfile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marca-cliente{display:inline-flex;align-items:center;gap:11px;flex:0 0 auto;
  font-size:clamp(19px,.7cqw + 15px,26px);font-weight:600;letter-spacing:-.3px;
  color:var(--raya-2);white-space:nowrap;user-select:none}
.marca-cliente svg{width:1.7em;height:1.7em;fill:currentColor;flex:0 0 auto}
@media (prefers-reduced-motion:reduce){
  .cinta{overflow-x:auto}
  .cinta-pista{animation:none}
}
@container sitio (max-width:620px){
  .clientes-t{max-width:20ch}
  .cinta-pista{animation-duration:30s}
}

/* ── recurso de imagen: enseña la medida que hace falta si el archivo no está ── */
.recurso{position:relative;width:100%;height:100%;background:var(--lienzo);overflow:hidden}
.recurso img{width:100%;height:100%;object-fit:cover;display:block}
.hueco-hero img{height:auto;object-fit:contain}
.hueco-hero.sin-imagen{aspect-ratio:4/3;background:var(--lienzo)}
.recurso .falta{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;text-align:center;padding:26px;border:2px dashed var(--raya-2);border-radius:inherit;
  background:var(--lienzo);color:var(--texto-3)}
.recurso.sin-imagen .falta{display:flex}
.recurso.sin-imagen img{visibility:hidden}
.falta i{font-size:26px;color:var(--raya-2)}
.falta b{font-size:16px;font-weight:600;color:var(--texto-2)}
.falta code{font-family:var(--mono);font-size:13px;letter-spacing:0;color:var(--texto-2);
  background:#fff;border:1px solid var(--raya);border-radius:6px;padding:3px 9px}
.falta em{font-style:normal;font-size:13px;line-height:20px;max-width:30ch}

/* ── pantalla partida de acceso ── */
.partida{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100vh - var(--proto) - 78px)}
.partida-izq{display:flex;align-items:center;justify-content:center;padding:clamp(30px,5cqw,64px) clamp(20px,4cqw,48px)}
.bloque-acceso{width:100%;max-width:392px}
.logo-acceso{display:block;margin-bottom:40px}
.acceso{width:100%}
.acceso h2{margin-bottom:8px}
.acceso .intro{font-size:17px;line-height:26px;color:var(--texto-2);margin-bottom:28px}
.clave{position:relative}
.clave input{padding-right:44px}
.ojo{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;color:var(--texto-3);border-radius:var(--r-boton)}
.ojo:hover{color:var(--marino);background:var(--lienzo)}
/* el enlace vive en el renglón de la etiqueta, no suelto entre el campo y el botón */
.fila-etiqueta{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.acceso .btn.ancho{margin-top:7px}
.olvide{font-size:15px;font-weight:500;color:var(--marino)}
.olvide:hover{text-decoration:underline}
.separa{display:flex;align-items:center;gap:14px;margin:26px 0;color:var(--texto-3);font-size:14px}
.separa::before,.separa::after{content:"";flex:1;height:1px;background:var(--raya)}
.pie-acceso{font-size:16px;color:var(--texto-2);text-align:center}
.pie-acceso button{font-size:16px;font-weight:600;color:var(--marino)}
.pie-acceso button:hover{text-decoration:underline}
/* recuperar contraseña: mismas piezas del acceso */
.acceso .intro b{color:var(--texto);font-weight:600;overflow-wrap:anywhere}
.acceso:not([data-cl="login"]) .intro{text-wrap:balance}
.cl-volver{margin-top:22px;text-align:center}
.cl-volver button{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--marino)}
.cl-volver button:hover{text-decoration:underline}
.cl-nota{margin-top:14px;font-size:14px;line-height:21px;color:var(--texto-2);text-align:center}
.cl-nota button,.cl-nota a{font-size:14px;font-weight:600;color:var(--marino)}
.cl-nota button:hover,.cl-nota a:hover{text-decoration:underline}
/* en «Revisa tu correo» la nota sigue al texto, alineada con él */
.cl-nota.cl-nota-izq{text-align:inherit;text-wrap:balance;margin-top:4px;font-size:15px;line-height:23px}
.cl-nota.cl-nota-izq button{font-size:15px}
/* durante la espera: el enlace ya se ve azul pero apagado, y el tiempo es lo
   que resalta; al terminar, el enlace queda en su azul normal */
.cl-nota button:disabled{color:#8ea3c8;font-weight:600;cursor:default;text-decoration:none}
.cl-nota #clEspera{color:var(--marino);font-weight:600;font-variant-numeric:tabular-nums}
.reglas.cl-reglas{margin:-12px 0 22px;gap:5px;flex-wrap:nowrap}
/* donde no caben las cuatro en un renglón, van de dos en dos: nunca una sola abajo */
@container sitio (max-width:480px){.reglas.cl-reglas{display:grid;grid-template-columns:repeat(2,max-content)}}
/* la columna del acceso es angosta: las cuatro reglas tienen que caber en un renglón */
.reglas.cl-reglas li{padding:3px 9px 3px 7px;gap:6px}
.btn:disabled{opacity:.55;cursor:default}
.btn.hueco:disabled:hover{background:#fff;border-color:var(--marino)}
.version{margin-top:30px;text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:0;color:var(--texto-3)}
/* En pantallas muy anchas la columna de la imagen no tenía techo: la foto se
   ampliaba con la ventana —de 0.49× a 0.69× de su tamaño real entre 1440 y
   2000 px— mientras el formulario seguía fijo en 392 px, y la desproporción se
   lee como un zoom. Se le pone tope al bloque y se centra; el degradado de
   detrás continúa cada mitad hasta el borde, así el corte no se ve. */
@container sitio (min-width:1500px){.partida{max-width:1500px;margin:0 auto}}
/* El degradado se pinta en el `main` y no en el panel: así continúa por las
   bandas que quedan fuera cuando el bloque topa a 1500 px, y la costura del
   50 % coincide con el corte interno del bloque a cualquier ancho.
   La capa blanca de encima se queda con la mitad izquierda. */
main[data-pantalla="entrar"]{
  background:
    linear-gradient(to right,#fff 0 50%,transparent 50% 100%),
    radial-gradient(115% 85% at 12% -5%,rgba(79,162,176,.42) 0%,transparent 58%),
    radial-gradient(95% 80% at 105% 105%,rgba(24,118,150,.4) 0%,transparent 60%),
    linear-gradient(158deg,#0e4494 0%,#0a2f6d 52%,#061c48 100%)}
.partida-der{position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:clamp(24px,3.4cqw,48px)}

/* ── el reporte de ejemplo, construido ─────────────────────────────────
   Sigue la portada real del reporte de evaluación. Tarjeta de ancho fijo
   centrada en el panel: al crecer la ventana crece el marino alrededor, no el
   documento. Todo va en `em` sobre el tamaño base de la tarjeta, así el
   conjunto escala como una sola pieza. */
.rep{width:min(418px,100%);background:#fff;border-radius:11px;overflow:hidden;padding:2em 2.1em 1.9em;
  box-shadow:0 24px 56px rgba(4,18,46,.4);color:#2b3340;
  font-size:clamp(8.4px,.89cqw,10.6px);line-height:1.45;letter-spacing:0}
.rep-cab{position:relative;display:flex;justify-content:space-between;align-items:flex-start;
  gap:1.2em;padding-bottom:1.15em;border-bottom:1px solid #dfe6ee}
.rep-marca{font-family:var(--serif);font-size:1.42em;font-weight:700;color:#123c8a;line-height:1.1}
.rep-marca b{font-weight:700;color:#3f9aa8}
.rep-folio{text-align:right;font-size:.95em;font-weight:600;color:#415063;line-height:1.35}
.rep-folio em{display:block;font-style:normal;font-size:.78em;font-weight:400;color:#95a1b1}
/* la tira bicolor de la esquina, como en la portada */
.rep-tira{position:absolute;right:0;top:-2em;width:9em;height:.5em;border-radius:0 0 2px 2px;
  background:linear-gradient(to right,#4fa2b0 0 40%,#5f7ba8 40% 100%)}
.rep-nom{font-size:1.5em;font-weight:700;color:#16233a;line-height:1.25;
  margin:1.05em 0 1.25em;letter-spacing:-.01em}
.rep-nom sup{font-size:.55em;font-weight:600;color:#a3aebc;vertical-align:super;margin-left:.15em}
.rep-tit{font-size:1.18em;font-weight:600;color:#4a7c93;letter-spacing:.01em;margin-bottom:.55em}
.rep-tit.conraya{position:relative;margin-top:1.4em;padding-bottom:.5em}
.rep-tit.conraya::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:#3d6f9e}
/* dos tablas de resumen, encabezado centrado y regla fina */
.rep-tabla{width:100%;border-collapse:collapse;margin-bottom:1.15em;table-layout:fixed}
.rep-tabla th{font-size:.82em;font-weight:700;color:#2b3340;padding:0 .4em .4em;
  border-bottom:1px solid #cfd9e3;text-align:center}
.rep-tabla td{font-size:.82em;color:#4a5666;padding:.6em .5em 0;text-align:center;vertical-align:top;
  line-height:1.4}
.rep-tabla td em{display:block;font-style:normal;color:#95a1b1}
.rep-tabla tr:first-child th:first-child,.rep-tabla tr td:first-child{text-align:left}
.rep-propia{border:1px solid #dfe6ee;border-radius:6px;padding:.95em 1.1em;margin-top:.35em}
.rep-propia-t{display:block;font-size:.68em;color:#a3aebc;margin-bottom:.75em}
/* las cifras y los semáforos son dos lecturas distintas: una raya los separa
   y cada lado lleva su propio ritmo de renglón */
.rep-propia-c{display:grid;grid-template-columns:1fr auto;gap:1.5em}
.rep-propia dl{display:grid;grid-template-columns:auto 1fr;gap:.62em 1em;font-size:.8em;align-content:start}
.rep-propia dt{font-weight:700;color:#3f8394}
.rep-propia dd{color:#415063;text-align:right;font-variant-numeric:tabular-nums}
.rep-focos{list-style:none;display:flex;flex-direction:column;gap:.42em;
  border-left:1px solid #e6ecf3;padding-left:1.5em}
.rep-focos li{display:flex;align-items:center;gap:.55em;font-size:.78em;font-weight:600;color:#415063;
  line-height:1.3;white-space:nowrap}
.rep-focos i{flex:0 0 auto;width:.85em;height:.85em;border-radius:50%;border:2px solid #fff;
  box-shadow:0 0 0 1.5px currentColor}
.rep-focos i.si{background:#3faa5a;color:#3faa5a}
.rep-focos i.no{background:#e03b3b;color:#e03b3b}
/* calificación: hexágono y barras */
.rep-cal{display:grid;grid-template-columns:auto 1fr;gap:1.7em;align-items:center;margin-top:1.3em}
.rep-hex{position:relative;width:6.4em;flex:0 0 auto}
.rep-hex svg{width:100%;display:block}
.rep-hex span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;font-size:.72em;line-height:1.15;color:#5c6a7c;text-align:center}
.rep-hex b{font-size:2.9em;font-weight:700;color:#16233a;line-height:1}
.rep-b{display:grid;grid-template-columns:5.2em minmax(2.5em,1fr) 2em minmax(0,1.45fr);
  gap:.6em;align-items:center;margin-bottom:.8em}
.rep-b>span{font-size:.78em;font-weight:700;color:#2b3340;text-align:right}
.rep-b>i{height:1em;background:#eef2f6;border:1px solid #cfd9e3;border-radius:2px;overflow:hidden}
.rep-b>i>em{display:block;height:100%;background:#4faa5c}
.rep-b>b{font-size:.76em;font-weight:400;color:#415063;font-variant-numeric:tabular-nums;text-align:right}
.rep-b>small{font-size:.72em;color:#95a1b1;line-height:1.3;align-self:center}
.rep-b.vacia>i{background:#fbe4e7;border-color:#eeb3ba}
/* veredicto y línea recomendada */
.rep-veredicto{display:grid;grid-template-columns:1.05fr 1fr;gap:1.3em;align-items:center;
  margin-top:1.4em;padding-top:1.2em;border-top:1px solid #dfe6ee}
.rep-apta{position:relative;font-size:.95em;line-height:1.4;color:#5c6a7c;text-align:center;
  padding:.3em 1.1em}
.rep-apta::before,.rep-apta::after{content:"";position:absolute;top:0;bottom:0;width:.55em;
  border:2px solid #4fa2b0}
.rep-apta::before{left:0;border-right:none}
.rep-apta::after{right:0;border-left:none}
.rep-linea{border-left:1px solid #dfe6ee;padding-left:1.3em}
.rep-linea span{display:block;font-size:.85em;font-weight:700;color:#3d6f9e;line-height:1.3}
.rep-linea b{display:block;font-size:1.22em;font-weight:700;color:#e0891c;margin-top:.3em;
  font-variant-numeric:tabular-nums}
.rep-linea em{display:block;font-style:normal;font-size:.8em;color:#7b8595}
.rep-nota{margin-top:1.35em;padding-top:.95em;border-top:1px solid #eef2f6;
  font-size:.72em;line-height:1.4;color:#a3aebc}

/* ── marcador de la imagen del hero ── */
.hueco-hero{width:100%;border-radius:var(--r-caja);background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:var(--texto-3);text-align:center;padding:24px}
.hueco i{font-size:30px;color:var(--raya-2)}
.hueco span{font-size:16px;font-weight:500;letter-spacing:-.2px}
.hueco em{font-style:normal;font-size:14px;line-height:22px;max-width:26ch}

/* ── video del hero: portada propia, YouTube sólo se carga al dar play ── */
.hero-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r-caja);
  overflow:hidden;background:var(--marino-osc);box-shadow:var(--sombra-alta)}
.hero-video iframe,.hero-video>img{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.hero-video>img{object-fit:cover}
.tapa{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;
  background:linear-gradient(to top,rgba(7,32,74,.55) 0%,rgba(7,32,74,.12) 55%,rgba(7,32,74,.28) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,1.4cqw,18px)}
.play{width:clamp(52px,6.4cqw,74px);height:clamp(52px,6.4cqw,74px);border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--marino);
  font-size:clamp(18px,2.2cqw,25px);box-shadow:0 12px 30px rgba(7,32,74,.4);
  transition:transform .18s ease;padding-left:4px}
.tapa:hover .play{transform:scale(1.07)}
.tapa .rotulo{font-size:clamp(13px,.3cqw + 11px,15px);font-weight:600;color:#fff;letter-spacing:-.2px;
  text-shadow:0 1px 8px rgba(7,32,74,.55)}
@media (prefers-reduced-motion:reduce){.tapa:hover .play{transform:none}}

/* ── video en emergente: sombrea el fondo y lo centra, sin llegar a pantalla completa ── */
.velo-video{position:fixed;inset:0;z-index:70;background:rgba(7,20,40,.78);
  display:flex;align-items:center;justify-content:center;padding:clamp(16px,4cqw,56px)}
.caja-video{position:relative;width:100%;max-width:min(980px,100%);aspect-ratio:16/9;
  border-radius:var(--r-caja);overflow:hidden;background:#000;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.caja-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* la X va fuera de la caja mientras quepa; si no, se mete a la esquina de adentro */
/* el iframe va después en el marcado, así que sin z-index la X queda debajo */
.cerrar-video{position:absolute;z-index:2;top:-46px;right:0;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.14);
  color:#fff;font-size:16px;transition:background .15s ease}
.cerrar-video:hover{background:rgba(255,255,255,.28)}
@container sitio (max-width:700px){.cerrar-video{top:8px;right:8px;background:rgba(7,20,40,.6)}}

/* ── documento ── */
.doc-marco{position:relative}
.doc{background:#fff;border-radius:var(--r-caja);padding:32px 30px 26px;box-shadow:var(--sombra-alta)}
.doc-cab{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--marino);
  padding-bottom:12px;margin-bottom:20px}
.doc-cab .t{font-size:15px;font-weight:600;color:var(--marino)}
.doc-cab .f{font-family:var(--mono);font-size:12px;color:var(--texto-3);letter-spacing:0}
.doc-emp{font-size:21px;font-weight:600;line-height:1.28;color:var(--texto);margin-bottom:4px}
.doc-rfc{font-family:var(--mono);font-size:13px;color:var(--texto-3);letter-spacing:0;margin-bottom:22px}
.fila{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;
  border-bottom:1px solid var(--raya);font-size:16px;line-height:24px}
.fila:last-of-type{border-bottom:none}
.fila .k{color:var(--texto-2)}
.fila .v{font-weight:600;text-align:right;color:var(--texto)}
.fila .v.bien{color:var(--verde)} .fila .v.mal{color:var(--rojo)}
.fila .v.num{font-family:var(--mono);font-weight:500;letter-spacing:0}
.doc-pie{margin-top:18px;padding-top:17px;border-top:2px solid var(--marino);display:flex;
  justify-content:space-between;align-items:center}
.doc-pie .k{font-size:15px;color:var(--texto-2)}
.doc-pie .v{font-size:16px;font-weight:600;color:var(--ambar);background:var(--ambar-cl);padding:6px 15px;border-radius:var(--r-boton)}
.sello{position:absolute;top:-15px;right:-10px;background:var(--verde);color:#fff;font-size:13px;font-weight:600;
  letter-spacing:.06em;padding:9px 17px;border-radius:var(--r-boton);transform:rotate(3deg);
  box-shadow:0 8px 18px rgba(31,122,82,.32);z-index:2}

/* ── flotante único: WhatsApp. Antes eran dos puntos de fuga, el chat y la demo ── */
.wasap{position:fixed;right:26px;bottom:26px;z-index:30;display:inline-flex;align-items:center;gap:0;
  height:56px;padding:0 16px;border-radius:100px;background:#25D366;color:#fff;font-size:26px;
  box-shadow:0 6px 18px rgba(37,211,102,.38);overflow:hidden;transition:gap .18s ease,padding .18s ease}
.wasap span{max-width:0;opacity:0;white-space:nowrap;font-size:16px;font-weight:600;letter-spacing:-.2px;
  transition:max-width .22s ease,opacity .18s ease}
/* el rótulo sólo aparece al pasar por encima: en reposo es un círculo limpio */
.wasap:hover span,.wasap:focus-visible span{max-width:130px;opacity:1}
.wasap:hover,.wasap:focus-visible{gap:11px;padding:0 22px 0 18px}
@media (prefers-reduced-motion:reduce){.wasap,.wasap span{transition:none}}

/* ── emergente ── */
.velo{position:fixed;inset:0;background:rgba(10,20,36,.6);z-index:60;display:flex;align-items:center;
  justify-content:center;padding:22px;overflow-y:auto}
.modal{background:#fff;width:100%;max-width:min(640px,100%);border-radius:var(--r-caja);
  padding:38px 40px 32px;position:relative;margin:auto;
  /* ningún modal crece más que la ventana: se desplaza por dentro */
  max-height:calc(100vh - 44px);overflow-y:auto;scrollbar-width:thin}
/* en el modal el reporte es el contenido, no un adorno: crece y pierde la
   sombra, que aquí sólo ensuciaría el fondo blanco */
/* Aquí la hoja es el modal: no necesita marco blanco alrededor. La ✕ va
   colgada de su esquina, mordiendo el borde, así no gasta alto, no tapa el
   folio y queda igual de cerca en cualquier ancho. */
.rep-modal{max-width:min(468px,100%);padding:0;background:none;box-shadow:none;
  max-height:none;overflow:visible}
.rep-modal .rep{width:100%;margin:0;border-radius:12px;
  box-shadow:0 24px 56px rgba(4,18,46,.42);font-size:clamp(8.6px,.95cqw,11.2px)}
.rep-cerrar{position:absolute;top:-15px;right:-15px;z-index:2;
  width:40px;height:40px;border-radius:50%;background:#fff;color:var(--texto-2);font-size:16px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 5px 18px rgba(6,18,44,.4)}
.rep-cerrar:hover{background:var(--lienzo);color:var(--marino)}
.cerrar{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:var(--r-boton);display:flex;
  align-items:center;justify-content:center;color:var(--texto-3);font-size:19px}
.cerrar:hover{background:var(--lienzo);color:var(--texto)}
.modal h2{margin-bottom:6px}
.modal-sub{font-size:17px;color:var(--texto-2);margin-bottom:26px}
.tapado{position:relative;margin-top:22px;border-top:1px solid var(--raya);padding-top:22px}
.difuso{filter:blur(5px);user-select:none;pointer-events:none;opacity:.7}
.candado{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;text-align:center;padding:20px}
.candado p{font-size:17px;line-height:26px;color:var(--texto-2);max-width:36ch}
.nota{margin-top:28px;padding:15px 18px;background:var(--agua-cl);border-radius:var(--r-boton);
  font-size:15px;line-height:24px;color:var(--texto-2)}

/* ── alta ── */
.alta{display:grid;grid-template-columns:minmax(0,1fr) 400px;min-height:calc(100vh - var(--proto) - 78px)}
.alta-logo{display:block;margin-bottom:clamp(20px,2.4cqw,26px)}
body.suelta .alta{min-height:calc(100vh - var(--proto))}
body.limpio.suelta .alta{min-height:100vh}
body.enmarcado.suelta .alta{min-height:calc(100vh - var(--proto) - 52px)}
.alta-izq{padding:44px 0 56px;display:flex;flex-direction:column;justify-content:flex-start}
.caja{max-width:640px;width:100%}
/* pares de campos; en cuanto no caben se desapilan solos */
.par2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px;align-items:start;margin-bottom:22px}
.pasos{display:flex;gap:10px;margin-bottom:18px}
.paso{flex:1;height:5px;border-radius:3px;background:var(--raya-2)}
.paso.on{background:var(--marino)}
.paso-t{font-size:15px;font-weight:500;color:var(--texto-3);margin-bottom:10px}
.alta h2{font-size:clamp(21px,1.1cqw + 12px,25px);margin-bottom:24px}
.alta-sub{font-size:16px;line-height:25px;color:var(--texto-2);margin-bottom:22px}
.campo{margin-bottom:22px}
.campo label{display:block;font-size:14px;line-height:20px;font-weight:600;margin-bottom:6px;color:var(--texto)}
.campo input,.campo select,.campo textarea{width:100%;font-family:var(--sans);font-size:15px;letter-spacing:-.2px;padding:9px 12px;
  border:1.5px solid var(--raya-2);border-radius:var(--r-boton);background:#fff;min-height:40px;color:var(--texto)}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--marino);outline:none;box-shadow:0 0 0 3px rgba(10,61,142,.12)}
.campo input::placeholder,.campo textarea::placeholder{color:#a9b2bd}
.campo textarea{resize:vertical;line-height:22px;min-height:96px}
.ayuda{font-size:12.5px;line-height:18px;color:var(--texto-3);margin-top:5px}
/* la ayuda no reserva alto: aparece al enfocar y empuja lo de abajo */
.ayuda-fila{grid-column:1/2;font-size:12.5px;line-height:18px;color:var(--texto-3)}
.ayuda-fila:not(:empty){margin-top:5px}
.ayuda-fila.der{grid-column:2/3}

.bloque-final{margin-top:6px;padding-top:22px;border-top:1px solid var(--raya);align-items:start;margin-bottom:0}

.error-campo{font-size:12.5px;line-height:18px;color:var(--rojo);margin-top:5px}
.campo input.mal{border-color:var(--rojo)}
.campo input.mal:focus{box-shadow:0 0 0 3px rgba(179,66,60,.14)}
.tel{display:flex;gap:8px}
.tel select{flex:0 0 86px;padding-left:8px;padding-right:0}
/* ── verificación del celular por WhatsApp ──────────────────────────────
   El bloque de la derecha explica el envío y, cuando el código sale, recibe
   también las casillas: así el usuario escribe donde se le está hablando y la
   columna del número no crece. */
.otp-enviar{margin-top:16px;font-size:13.5px;padding:0 18px;min-height:40px;height:40px}
.otp-enviar:disabled{background:var(--raya);color:var(--texto-3);cursor:not-allowed;box-shadow:none}
.otp-enviar:disabled:hover{background:var(--raya)}
.otp{align-self:stretch;display:flex;margin-top:26px}
.otp-banda{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:15px 17px;border-radius:var(--r-caja);background:var(--lienzo);border:1px solid var(--raya)}
.otp-banda>p{font-size:13.5px;line-height:20px;color:var(--texto)}
.otp-banda>p>b{color:var(--marino);white-space:nowrap}
.otp-banda>span{font-size:12.5px;line-height:18px;color:var(--texto-3);margin-top:4px}
.otp-banda.codigo{background:var(--agua-cl);border-color:var(--agua-bor);justify-content:flex-start}
.otp-banda.ok{background:var(--verde-cl);border-color:#c3e2d2;padding:11px 17px}
.otp-banda.ok>p{font-weight:600;color:var(--verde)}
.otp-banda.ok>p>i{color:var(--verde);margin-right:8px}
.otp-banda.ok p span{font-weight:400;color:var(--texto-2);margin-left:6px}
/* el rótulo pesa como el de cualquier campo: para quien no conoce la mecánica,
   seis cajas sueltas no dicen que ahí va un código */
.otp-rot{display:block;font-size:13px;line-height:19px;font-weight:600;color:var(--texto);
  margin:14px 0 7px}
.otp-cajas{display:flex;gap:6px}
.otp-cajas input{flex:1;min-width:0;max-width:52px;text-align:center;font-family:var(--sans);font-size:18px;
  font-weight:600;letter-spacing:0;color:var(--marino);padding:9px 0;background:#fff;
  border:1.5px solid var(--agua-bor);border-radius:var(--r-boton)}
.otp-cajas input:focus{border-color:var(--marino);outline:none;box-shadow:0 0 0 3px rgba(10,61,142,.12)}
.otp-cajas.mal input{border-color:var(--rojo)}
.otp-error{font-size:12.5px;line-height:18px;color:var(--rojo);margin-top:9px}
.otp-pie{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:11px}
.otp-reenviar{font-size:12.5px;line-height:18px;font-weight:600;color:var(--agua-osc);padding:0;text-align:left}
.otp-reenviar:disabled{color:var(--texto-3);font-weight:400;cursor:default}
.otp-reenviar:not(:disabled){text-decoration:underline}
.otp-cambiar{font-size:12.5px;font-weight:600;color:var(--agua-osc);text-decoration:underline;padding:0}
.tel.listo input,.tel.listo select{background:var(--lienzo);color:var(--texto-2)}
.aviso{display:flex;gap:10px;align-items:flex-start;background:var(--agua-cl);border-radius:var(--r-boton);
  padding:12px 15px;margin-bottom:24px;font-size:13.5px;line-height:20px;color:var(--texto-2)}
.aviso i{flex:0 0 auto;color:var(--agua);font-size:15px;margin-top:4px}

/* requisitos de la contraseña: fichas que se marcan solas mientras escribe */
.reglas{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:-10px 0 0}
.reglas li{display:flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:12.5px;line-height:18px;color:var(--texto-3);
  border:1px solid var(--raya);border-radius:20px;padding:3px 12px 3px 9px;background:#fff}
.reglas li::before{content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--raya-2);transition:background .15s}
.reglas li.ok::before{background:var(--verde)}
.reglas li.ok{color:var(--verde);border-color:#bcdfcd;background:var(--verde-cl)}
.reglas li.ok i{color:var(--verde)}


.marca{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:21px;
  color:var(--texto-2);cursor:pointer;margin-bottom:11px}
.marca input{width:19px;height:19px;flex:0 0 auto;margin-top:2px;accent-color:var(--marino);cursor:pointer}
.marca a{color:var(--marino);font-weight:500;border-bottom:1px solid var(--raya-2)}
/* marcador del captcha: en el prototipo no corre, sólo ocupa su lugar */
.robot{display:flex;align-items:center;gap:11px;padding:11px 14px;
  border:1px solid var(--raya);border-radius:var(--r-boton);background:var(--lienzo);
  font-size:15px;color:var(--texto-2)}
.robot i{color:var(--texto-3);font-size:17px}
.robot em{margin-left:auto;font-style:normal;font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--texto-3)}

.legal{font-size:13.5px;line-height:20px;color:var(--texto-3);margin-top:22px}
.legal a{color:var(--marino);font-weight:500;border-bottom:1px solid var(--raya-2)}
.atras{font-size:16px;font-weight:600;color:var(--texto-2);padding:14px 6px;display:inline-flex;align-items:center;
  gap:9px;min-height:48px}
.atras:hover{color:var(--marino)}
.pie-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:center;margin-top:28px}
.pie-form .btn{width:100%}
.acc-final{display:flex;flex-direction:column;gap:8px}
.acc-final .legal{margin:0;text-align:center;font-size:12.5px;line-height:18px}
.pie-acceso.izq{text-align:left;font-size:14px}
.pie-acceso.izq button{font-size:14px}
.par2 .campo{margin-bottom:0}
/* Sin la miniatura del reporte la tarjeta quedó corta y flotaba muy arriba en
   una columna alta. Baja hasta que su título queda a la altura del primer
   rótulo del formulario, que es la línea que le da referencia. */
.alta-der{background:var(--lienzo);border-left:1px solid var(--raya);padding:140px 34px 44px;display:block}
/* el formulario es largo; el panel se queda a la vista en vez de irse arriba */
.alta-fijo{position:sticky;top:calc(var(--proto) + 140px);display:flex;flex-direction:column;gap:20px;align-items:flex-start}
body.limpio .alta-fijo,body.enmarcado .alta-fijo{top:140px}
.regalo{background:#fff;border-radius:var(--r-caja);padding:24px;box-shadow:var(--sombra-suave);width:100%}
.regalo-t{font-size:17px;font-weight:600;margin-bottom:16px;color:var(--marino)}
.regalo-l{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:23px;color:var(--texto-2);padding:7px 0}
.regalo-l i{flex:0 0 auto;width:16px;text-align:center;color:var(--agua);font-size:14px;margin-top:4px}
.regalo-l b{color:var(--texto);font-weight:600}
.ver-ejm{font-size:14px;font-weight:600;color:var(--marino);text-decoration:underline;
  text-underline-offset:2px;padding:0;white-space:nowrap;margin-left:2px}
.ver-ejm:hover{color:var(--marino-osc)}
.eti-gratis{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--verde);background:var(--verde-cl);border-radius:20px;padding:3px 11px;margin-bottom:14px}
/* el cupón se aplica solo por detrás; aquí sólo se confirma, no se pide nada */
.aplicado{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--raya);font-size:14px;line-height:21px;color:var(--verde)}
.aplicado i{flex:0 0 auto;font-size:13px}
.aplicado b{font-weight:600}
/* el icono se queda en el primer renglón aunque el texto se parta en dos */
.vence{display:flex;align-items:flex-start;gap:10px;margin-top:9px;font-size:14px;line-height:21px;color:var(--ambar)}
.vence i{flex:0 0 auto;font-size:13px;line-height:21px}
/* ── crear cuenta · evaluación de crédito (llega invitado a evaluarse para
   obtener una línea de crédito; antes se llamaba «referencia comercial») ── */
.ref-panel,.solo-ref{display:none!important}
main.ref .ref-panel{display:block!important}
main.ref .solo-ref{display:revert!important}
main.ref button.solo-ref{display:inline-flex!important}
main.ref .alta-der .regalo:not(.ref-panel),main.ref .sin-ref{display:none!important}
.eti-ref{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--marino);background:#e9eef8;border-radius:20px;padding:3px 11px;margin-bottom:14px}
.ref-txt{font-size:15px;line-height:23px;color:var(--texto-2);margin:-6px 0 18px}
.ref-sub{font-size:14px;font-weight:600;color:var(--texto);margin-bottom:4px}
.ref-plazo{display:flex;align-items:flex-start;gap:10px;background:#fdf6e6;border:1px solid #f0e2c2;border-radius:10px;
  padding:11px 13px;margin-bottom:20px;font-size:14px;line-height:21px;color:#7a5608}
.ref-plazo i{flex:0 0 auto;font-size:14px;line-height:21px;color:#b07d12}
.ref-plazo b{font-weight:700}
.ref-lista{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--raya)}
.ref-lista li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:22px;color:var(--texto-2);
  padding:10px 0;border-bottom:1px solid var(--raya)}
.ref-lista li:last-child{border-bottom:none;padding-bottom:0}
.ref-lista i{flex:0 0 auto;width:18px;text-align:center;color:var(--agua);font-size:14px;margin-top:4px}
.ref-lista b{color:var(--texto);font-weight:600}
.exito .circulo{width:70px;height:70px;border-radius:50%;background:var(--verde-cl);color:var(--verde);
  font-size:30px;display:flex;align-items:center;justify-content:center;margin-bottom:26px}

/* ══ INICIO DE LA APP ══
   Referencias: Xero (guía de arranque con progreso por tarjeta), Copilot (las
   métricas dicen cuándo aparecen en vez de enseñar ceros), Bonsai (tira de
   prueba arriba), HoneyBook (el progreso vive en el menú lateral).
   Colores y radios son los de credibusiness.com, no los de las referencias. */
.app{background:var(--lienzo);min-height:calc(100vh - var(--proto))}
body.limpio .app{min-height:100vh}
.app-barra{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--raya);
  display:flex;align-items:center;gap:clamp(12px,1.6cqw,22px);padding:0 clamp(16px,2cqw,26px);height:64px}
.app-barra .logo{font-size:21px}
.buscar{flex:1;max-width:420px;position:relative;display:flex;align-items:center}
.buscar i{position:absolute;left:13px;color:var(--texto-3);font-size:14px;pointer-events:none}
.buscar input{width:100%;font-family:var(--sans);font-size:14.5px;letter-spacing:-.2px;
  padding:9px 13px 9px 36px;min-height:40px;border:1.5px solid var(--raya-2);border-radius:var(--r-boton);background:var(--lienzo)}
.buscar input:focus{border-color:var(--marino);background:#fff;outline:none;box-shadow:0 0 0 3px rgba(10,61,142,.12)}
.btn.chico{font-size:14px;padding:10px 16px;min-height:40px;height:40px}
/* Los iconos dentro de un botón no deben estirar su caja: el <i> de Font
   Awesome trae su propia altura de línea y crecía el botón 13 px. */
.btn i{font-size:.86em;line-height:1;display:inline-flex;align-items:center}
.btn.chico{gap:8px}
.app-iconos{margin-left:auto;display:flex;align-items:center;gap:4px}
.app-iconos button{position:relative;width:40px;height:40px;border-radius:var(--r-boton);
  display:flex;align-items:center;justify-content:center;color:var(--texto-2);font-size:17px}
.app-iconos button:hover{background:var(--lienzo);color:var(--marino)}
.punto{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--rojo);border:1.5px solid #fff}
.avatar{background:var(--agua-cl)!important;color:var(--marino)!important;font-size:13px!important;font-weight:600;letter-spacing:.02em}
.avatar.grande{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--agua-cl);color:var(--marino);font-size:15px;font-weight:600;flex:0 0 auto}

.app-cuerpo{display:grid;grid-template-columns:236px minmax(0,1fr)}
/* ── menú lateral: lista plana, sin rótulos ── */
.riel{background:#fff;border-right:1px solid var(--raya);padding:16px 12px 40px;
  position:sticky;top:64px;align-self:start;max-height:calc(100vh - 64px);overflow-y:auto}
.riel-cerrar{display:none}
.riel-l{display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--texto-2);
  padding:9px 10px;border-radius:var(--r-boton);cursor:pointer;min-height:40px}
.riel-l i{width:17px;text-align:center;font-size:14px;color:var(--texto-3);flex:0 0 auto}
.riel-l:hover{background:var(--lienzo);color:var(--texto)}
.riel-l.on{background:var(--agua-cl);color:var(--marino);font-weight:600}
.riel-l.on i{color:var(--marino)}
.riel-l em{margin-left:auto;font-style:normal;font-size:12px;font-weight:600;color:var(--verde);
  background:var(--verde-cl);border-radius:20px;padding:1px 8px;font-variant-numeric:tabular-nums}
/* sin créditos: el contador no desaparece, se pone en rojo */
.riel-l em.cero{color:var(--rojo);background:#fbecec}
/* una raya, sin rótulo: separa el trabajo de los datos de la propia empresa */
.riel-l.aparte{margin-top:10px;padding-top:19px;border-top:1px solid var(--raya);border-radius:0 0 var(--r-boton) var(--r-boton)}

.lienzo{padding:clamp(20px,2.6cqw,34px) clamp(16px,2.6cqw,34px) 70px;max-width:1080px}
.saludo{font-size:clamp(22px,1.3cqw + 12px,27px);line-height:1.25;color:var(--texto);
  font-weight:600;letter-spacing:-.4px;margin-bottom:26px}
/* ── banner de prueba: franja superior, encima de la barra de la app ── */
.banner-prueba{position:relative;display:flex;align-items:center;gap:12px;
  background:var(--marino);color:#fff;padding:9px 16px 11px;font-size:13.5px;line-height:20px}
.banner-prueba>i{flex:0 0 auto;font-size:13px;opacity:.85}
.bp-txt{flex:1;min-width:0}
.bp-txt b{font-weight:600}
.bp-lk{flex:0 0 auto;font-size:13px;color:#fff;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:1px}
.bp-lk:hover{border-bottom-color:#fff}
.bp-x{flex:0 0 auto;width:26px;height:26px;border-radius:var(--r-boton);display:flex;
  align-items:center;justify-content:center;color:#fff;font-size:13px;opacity:.65}
.bp-x:hover{opacity:1;background:rgba(255,255,255,.14)}
/* el temporizador: cuánto de la prueba ya se consumió */
.bp-linea{position:absolute;left:0;bottom:0;height:2px;background:rgba(255,255,255,.55)}
/* últimos días: mismo sitio, otro tono */
.banner-prueba.urge{background:var(--ambar-cl);color:#8a5d0d}
.banner-prueba.urge .bp-lk{color:#8a5d0d;border-bottom-color:rgba(138,93,13,.45)}
.banner-prueba.urge .bp-x{color:#8a5d0d}
.banner-prueba.urge .bp-linea{background:rgba(138,93,13,.5)}

.bloque{margin-bottom:30px}
.bloque-t{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-bottom:10px;border-bottom:1px solid var(--raya);margin-bottom:2px}
.bloque-t h2{font-size:16px;line-height:23px;font-weight:600;color:var(--texto);letter-spacing:-.2px}
.subrayado.chico{font-size:14px;min-height:auto;padding:2px 1px;border-bottom-width:1px}
.avance{flex:0 0 auto;font-size:13px;color:var(--texto-3);font-variant-numeric:tabular-nums}

/* ── guía: los cuatro pasos en un renglón, unidos por la línea de avance ── */
.pasos-linea{display:flex;padding:20px 0 4px}
.nd{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;position:relative;text-align:center}
/* el tramo se dibuja detrás de cada bola y llega hasta la anterior */
.nd::before{content:"";position:absolute;top:14px;left:-50%;width:100%;height:2px;background:var(--raya-2)}
.nd:first-child::before{display:none}
.nd.hecho::before,.nd.tramo::before{background:var(--marino)}
.bola{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;
  border:1.5px solid var(--raya-2);background:#fff;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;color:var(--texto-3);font-variant-numeric:tabular-nums}
.nd-t{font-size:13px;line-height:19px;color:var(--texto-2);max-width:15ch}
.nd.hecho .bola{background:var(--marino);border-color:var(--marino);color:#fff;font-size:12px}
.nd.activo .bola{border:2px solid var(--marino);color:var(--marino);box-shadow:0 0 0 4px rgba(10,61,142,.13)}
.nd.activo .nd-t{color:var(--texto);font-weight:600}

/* El paso vivo ya lo marca el aro del stepper. Aquí no hace falta otra caja:
   basta una raya, el título en marino y el único botón lleno de la pantalla. */
/* ── banner del paso vivo ──────────────────────────────────────────────────
   Lo que empuja al siguiente hito no puede leerse como un párrafo más de la
   página. Va sobre el degradado de la marca —el turquesa del logo hacia el
   azul marino— con el botón en blanco, que es el único de la pantalla. */
.paso-detalle{position:relative;display:flex;align-items:center;gap:26px;margin-top:22px;
  padding:22px 26px;border-radius:var(--r-caja);overflow:hidden;
  background:linear-gradient(105deg,#0a3d8e 0%,#1e5aa8 46%,#4f8fa0 100%)}
/* trama diagonal muy tenue para que el degradado no se vea plano */
.paso-detalle::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 26px)}
.pd-txt{position:relative;z-index:1;flex:1;min-width:0;max-width:66ch}
.pd-txt b{display:block;font-size:18px;font-weight:600;color:#fff;line-height:26px;
  letter-spacing:-.3px}
.pd-txt span{display:block;font-size:13.5px;line-height:21px;color:rgba(255,255,255,.82);margin-top:5px}
.pd-txt .cuenta{display:inline;font-size:inherit;color:#fff;font-weight:600}
.pd-txt span b{display:inline;font-size:inherit;color:#fff}
.paso-detalle .btn{position:relative;z-index:1;flex:0 0 auto;
  background:#fff;border-color:#fff;color:var(--marino);font-weight:600}
.paso-detalle .btn:hover{background:var(--agua-cl);border-color:var(--agua-cl)}
@media(max-width:720px){
  .paso-detalle{flex-direction:column;align-items:flex-start;gap:16px;padding:20px}
  .paso-detalle .btn{width:100%}
}

.dos-col{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;margin-bottom:22px;align-items:start}

/* ── barra marino con título: el elemento que ya usa la plataforma ── */
.tabla{border:1px solid var(--raya);border-radius:var(--r-caja);overflow:hidden;background:#fff}
.tabla-cab{display:flex;align-items:center;gap:11px;background:var(--marino);color:#fff;
  font-size:14.5px;font-weight:600;letter-spacing:-.2px;padding:12px 16px}
.tabla-cab i{font-size:14px;opacity:.85}
.tabla-cuerpo{padding:14px 16px 16px}
.muestra{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:12.5px;line-height:19px;color:var(--texto-3);margin-bottom:10px}
.et-muestra{font-size:11.5px;font-weight:600;letter-spacing:.03em;color:var(--agua);
  background:var(--agua-cl);border-radius:20px;padding:2px 9px}
.filas{list-style:none}
.fl{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--raya);opacity:.55}
.ini{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--lienzo);color:var(--texto-3);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600}
.fl-t{flex:1;min-width:0}
.fl-t b{display:block;font-size:14px;font-weight:600;line-height:20px}
.fl-t span{display:block;font-size:12.5px;color:var(--texto-3);line-height:18px}
.marca-riesgo{flex:0 0 auto;font-size:12px;font-weight:600;border-radius:20px;padding:3px 10px}
.marca-riesgo.mal{color:var(--rojo);background:#fbecec}
.marca-riesgo.ok{color:var(--verde);background:var(--verde-cl)}
.fl-pie{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-top:14px;font-size:13.5px;line-height:20px;color:var(--texto-2)}

.perfil-fila{display:flex;align-items:center;gap:12px;margin-bottom:14px}
/* escudo tachado: el mismo indicador que ya usa el perfil de la plataforma */
.escudo-estado{position:relative;flex:0 0 auto;margin-left:auto;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--raya-2)}
.escudo-estado.no::after{content:"";position:absolute;left:2px;right:2px;top:calc(50% - 1px);
  height:2px;border-radius:1px;background:var(--rojo);transform:rotate(-42deg);
  box-shadow:0 0 0 1.5px #fff}
.escudo-estado.si{color:var(--verde)}
.perfil-fila b{display:block;font-size:14.5px;font-weight:600;line-height:20px}
.sin-ver{display:inline-block;font-size:12px;font-weight:600;color:var(--ambar);
  background:var(--ambar-cl);border-radius:20px;padding:1px 9px;margin-top:4px}
/* mosaicos de contador: los que ya trae la tarjeta de perfil de hoy */
.mosaicos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.mo{background:var(--papel);border:1px solid var(--agua-bor);border-radius:var(--r-boton);
  padding:12px 12px 13px;position:relative;text-align:center}
.mo i{display:none}
.mo span{display:block;font-size:12.5px;color:var(--agua-osc);line-height:17px}
.mo b{display:block;font-size:19px;font-weight:600;line-height:26px;color:var(--marino);
  font-variant-numeric:tabular-nums;margin-top:3px}
.perfil-ay{font-size:13px;line-height:20px;color:var(--texto-2);margin-bottom:12px}
.btn.hueco.ancho.chico{width:100%}

/* ── inicio del usuario activo ─────────────────────────────────────────────
   Nada de esto es nuevo: son las tres mecánicas que la plataforma YA tiene,
   traídas al inicio. La barra de avance y el camino de logros salen de
   Referencias Comerciales; la línea de tiempo con "qué sigue" sale del
   expediente de boletinaje. Aquí solo se les da el sitio que les faltaba. */

/* Las filas del inicio con onboarding van atenuadas porque son de muestra.
   Aquí los datos son del usuario, así que van a plena opacidad. */
.fl.real{opacity:1}
.fl:last-child{border-bottom:0}

/* barra de avance: la de "4 de 6 referencias", con el filete del banner */
.progreso{height:6px;border-radius:6px;background:var(--raya);overflow:hidden;margin:12px 0 4px}
.progreso i{display:block;height:100%;background:var(--verde);border-radius:6px}
.avance b{color:var(--texto);font-weight:600}

/* camino de logros: tres hitos, el último bloqueado con trama */
.logros{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.lg{display:flex;align-items:center;gap:10px;border:1px solid var(--raya);border-radius:var(--r-boton);
  padding:9px 12px;background:var(--verde-cl)}
.lg i{flex:0 0 auto;font-size:13px;color:var(--verde)}
.lg b{display:block;font-size:12.5px;font-weight:600;line-height:17px}
.lg-t{flex:1;min-width:0}
.lg span{display:block;font-size:11.5px;color:var(--texto-3);line-height:15px}
.lg.falta{background:repeating-linear-gradient(135deg,var(--lienzo),var(--lienzo) 6px,#fff 6px,#fff 12px)}
.lg.falta i,.lg.falta b{color:var(--texto-3)}

/* línea de tiempo vertical del expediente, con el hito pendiente en ámbar */
.linea-t{list-style:none;margin-top:4px}
.lt{display:flex;gap:12px;padding-bottom:16px;position:relative}
.lt::before{content:"";position:absolute;left:10px;top:22px;bottom:0;width:2px;background:var(--raya)}
.lt:last-child{padding-bottom:0}
.lt:last-child::before{display:none}
.lt-b{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--verde);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:10px;z-index:1}
.lt.pend .lt-b{background:var(--ambar-cl);color:var(--ambar);border:1.5px solid var(--ambar)}
.lt-c b{display:block;font-size:13.5px;font-weight:600;line-height:20px}
.lt-c span{display:block;font-size:12.5px;color:var(--texto-3);line-height:18px}

/* "qué sigue": la tarjeta del expediente, que dice plazo y desenlaces */
.sigue{background:var(--ambar-cl);border-radius:var(--r-boton);padding:12px 14px;margin-top:14px}
.sigue b{display:block;font-size:13px;font-weight:600;color:var(--ambar);line-height:19px}
.sigue span{display:block;font-size:12.5px;line-height:19px;color:var(--texto-2);margin-top:2px}

/* fila de pendientes: número grande + etiqueta, separados por filete vertical */
.pend-fila{display:flex;gap:0;border:1px solid var(--raya);border-radius:var(--r-boton);overflow:hidden;margin-bottom:22px;background:var(--papel)}
.pf{flex:1;padding:14px 15px;border-left:1px solid var(--raya);cursor:pointer;text-align:center;background:none}
.pf:first-child{border-left:0}
.pf b{display:block;font-size:21px;font-weight:600;line-height:27px;font-variant-numeric:tabular-nums;color:var(--marino)}
.pf span{display:block;font-size:12.5px;color:var(--agua-osc);line-height:18px}
.pf.cero b{color:var(--texto-3)}
.pf:hover{background:var(--lienzo)}



/* Conversación: burbujas propias en marino a la derecha, las de la otra
   empresa en claro a la izquierda, con separador de día. */
.conv{border:1px solid var(--raya);border-radius:var(--r-caja);overflow:hidden;background:var(--papel)}
.conv-cab{display:flex;align-items:center;gap:12px;background:var(--marino);color:#fff;padding:12px 16px}
.conv-cab b{font-size:14.5px;font-weight:600}
.conv-cab small{display:block;font-size:12px;opacity:.8}
.conv-cab .der{margin-left:auto;display:flex;gap:8px}
.conv-cab button{color:#fff;opacity:.85;font-size:13px}
.conv-cuerpo{padding:18px 16px;background:var(--lienzo);display:flex;flex-direction:column;gap:10px}
.dia{align-self:center;font-size:12px;color:var(--texto-3);background:var(--papel);
  border-radius:20px;padding:3px 12px;margin:2px 0}
.bur{max-width:min(68%,460px);font-size:13.5px;line-height:20px;padding:10px 14px;
  border-radius:var(--r-caja);background:var(--papel);border:1px solid var(--raya);align-self:flex-start}
.bur.mia{align-self:flex-end;background:var(--marino);color:#fff;border-color:var(--marino)}
.bur time{display:block;font-size:11.5px;opacity:.65;margin-top:4px}
.conv-pie{display:flex;gap:10px;align-items:flex-end;padding:12px 16px;border-top:1px solid var(--raya)}
.conv-pie .campo{flex:1}
/* aviso breve para acciones que en el prototipo no tienen pantalla propia */
.tostada{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:90;
  background:var(--marino);color:#fff;font-size:13.5px;line-height:20px;
  padding:11px 18px;border-radius:var(--r-boton);box-shadow:0 8px 24px rgba(10,20,36,.25);
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.tostada.on{opacity:1;transform:translateX(-50%) translateY(-4px)}

/* ── menús desplegables de la barra superior ───────────────────────────────
   Uno solo por cada icono. Antes la tuerca y la persona abrían dos menús
   pegados con el mismo contenido. */
.pop{position:absolute;top:calc(100% + 8px);right:0;z-index:70;width:min(300px,88vw);
  background:var(--papel);border:1px solid var(--raya);border-radius:var(--r-caja);
  box-shadow:0 14px 40px rgba(10,20,36,.16);padding:8px;display:none;overflow:hidden}
.pop.abierto{display:block}
.pop-cab{display:flex;align-items:center;gap:11px;padding:10px 10px 12px;margin-bottom:6px;
  border-bottom:1px solid var(--raya)}
.pop-cab b{display:block;font-size:14px;font-weight:600;line-height:20px}
.pop-cab span{display:block;font-size:12.5px;color:var(--agua-osc);line-height:18px}
.pop a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-boton);
  font-size:14px;color:var(--texto);cursor:pointer}
.pop a:hover{background:var(--lienzo)}
.pop a i{width:17px;text-align:center;color:var(--agua-osc);font-size:14px}
.pop a em{margin-left:auto;font-style:normal;font-size:12.5px;color:var(--texto-3)}
.pop hr{border:0;border-top:1px solid var(--raya);margin:6px 0}
.pop a.salir{color:var(--rojo)}
.pop a.salir i{color:var(--rojo)}
.pop-t{font-size:12.5px;color:var(--texto-3);padding:4px 10px 8px;line-height:18px}
.pop-canal b{display:block;font-size:14px;font-weight:600;line-height:20px}
.pop-canal span{display:block;font-size:12.5px;color:var(--texto-3);line-height:18px}
.app-iconos{position:relative}

/* aviso dentro del desplegable de notificaciones */
.pop-avisos{max-height:min(58vh,340px);overflow-y:auto;margin:-2px -2px 0}
.pop-av{display:flex;gap:10px;padding:10px;border-radius:var(--r-boton);cursor:pointer}
.pop-av:hover{background:var(--lienzo)}
.pop-av.nuevo{background:var(--agua-cl)}
.pop-av i{flex:0 0 auto;color:var(--agua-osc);font-size:13px;margin-top:3px}
.pop-av b{display:block;font-size:13.5px;font-weight:600;line-height:19px}
.pop-av span{display:block;font-size:12.5px;color:var(--texto-3);line-height:18px}
.pop-pie{display:flex;justify-content:space-between;gap:10px;padding:10px 10px 4px;
  border-top:1px solid var(--raya);margin-top:6px}
.pop-pie button{white-space:nowrap;font-size:12.5px;min-height:auto;padding:2px 1px}

/* asistente: la ventana que ya existe en la plataforma, sin tocar el agente */
.asis{position:fixed;right:22px;bottom:22px;z-index:80;width:min(330px,88vw);
  background:var(--papel);border-radius:var(--r-caja);box-shadow:0 18px 50px rgba(10,20,36,.24);
  overflow:hidden;display:none}
.asis.abierto{display:block}
.asis-cab{display:flex;align-items:center;gap:11px;background:var(--marino);color:#fff;padding:12px 14px}
.asis-cab b{font-size:14px;font-weight:600}
.asis-cab small{display:block;font-size:11.5px;opacity:.82}
.asis-cab button{margin-left:auto;color:#fff;opacity:.85}
.asis-cuerpo{padding:16px 14px;background:var(--lienzo);text-align:center}
.asis-cuerpo p{font-size:13px;color:var(--texto-2);margin-bottom:12px}
.asis-op{display:block;width:100%;background:var(--papel);border:1px solid var(--raya);
  border-radius:var(--r-boton);padding:9px 12px;font-size:13.5px;color:var(--marino);
  margin-bottom:7px;text-align:center}
.asis-op:hover{border-color:var(--agua-bor);background:var(--agua-cl)}
.asis-pie{display:flex;gap:8px;padding:10px 12px}
.asis-ia{font-size:10.5px;font-weight:600;letter-spacing:.04em;background:rgba(255,255,255,.2);
  border-radius:20px;padding:2px 7px}

/* tarjetas de plan */
.planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:18px}
.pl{position:relative;border:1px solid var(--raya);border-radius:var(--r-caja);
  background:var(--papel);padding:20px 18px;display:flex;flex-direction:column}
.pl.actual{border-color:var(--agua);background:var(--agua-cl)}
.pl.reco{border:1.5px solid var(--marino)}
.pl-eti{position:absolute;top:-10px;left:18px;background:var(--marino);color:#fff;font-size:11.5px;
  font-weight:600;border-radius:20px;padding:3px 11px}
.pl h3{font-size:16px;font-weight:600;color:var(--marino);line-height:23px}
.pl-sub{font-size:12.5px;color:var(--texto-3);line-height:18px;margin-bottom:12px}
.pl-precio{font-size:27px;font-weight:600;line-height:34px;color:var(--texto);
  font-variant-numeric:tabular-nums;letter-spacing:-.6px}
.pl-precio small{font-size:13px;font-weight:400;color:var(--texto-3);letter-spacing:0}
.pl ul{list-style:none;margin:14px 0 18px;flex:1}
.pl li{display:flex;gap:9px;font-size:13px;line-height:20px;padding:5px 0;color:var(--texto-2)}
.pl li i{color:var(--verde);font-size:12px;margin-top:4px}
.pl li.no{color:var(--texto-3)}
.pl li.no i{color:var(--raya-2)}
.pl li b{color:var(--texto);font-weight:600}

/* Miga de pan. En la plataforma sólo existe en el panel financiero; es el
   patrón que le falta al resto y por eso se conserva tal cual. */
.miga{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--texto-3);
  margin-bottom:14px}
.miga i{font-size:9px}
.miga button{font-size:12.5px;min-height:auto;padding:0}

/* Cabecera «Mi Red»: flecha en círculo turquesa, título en marino y las cuatro
   pestañas de la sección. Es la navegación real de este grupo. */
/* CABECERA DE SECCIÓN
   Una sola fila: flecha, nombre del grupo, pestañas y la acción principal.
   La pestaña activa —turquesa, en negritas y subrayada— es la que dice dónde
   estás; por eso no hay un título debajo repitiendo lo mismo, ni un botón
   suelto flotando en su propio renglón. */
.mired{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap;
  border-bottom:1px solid var(--raya);margin-bottom:16px}
.mired-atras{width:36px;height:36px;border-radius:50%;background:var(--agua-osc);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 auto;
  margin-bottom:4px}
.mired-atras:hover{background:var(--marino)}
.mired>b{font-size:20px;font-weight:600;color:var(--marino);letter-spacing:-.2px;
  padding-bottom:12px;flex:0 0 auto}
.mired-tabs{display:flex;gap:30px;flex:1 1 auto;min-width:100%;overflow-x:auto;
  scrollbar-width:none}
.mired-tabs::-webkit-scrollbar{display:none}
.tabs2{scrollbar-width:none}
.tabs2::-webkit-scrollbar{display:none}
/* la acción vive en la misma fila, sobre la línea, no en el aire */
.mired-acc{display:flex;align-items:center;gap:10px;margin-left:auto;padding-bottom:10px;flex:0 0 auto}
.mired-acc .campo{width:190px}
.mired-acc .campo input{min-height:34px;font-size:13.5px;padding:6px 11px}
.mired-tabs button{background:none;padding:0 0 12px;margin-bottom:-1px;font-size:16px;
  font-weight:600;color:var(--marino);border-bottom:2.5px solid transparent;white-space:nowrap;
  letter-spacing:-.2px}
.mired-tabs button:hover{color:var(--agua-osc)}
.mired-tabs button.on{color:var(--agua-osc);border-color:var(--agua-osc)}
@media(min-width:820px){.mired-tabs{min-width:0;flex:1 1 0}}
@media(max-width:819px){.mired-acc{margin:0 0 10px;width:100%}.mired-acc .campo{flex:1;width:auto}}

.mired-tabs em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--texto-3);
  background:var(--lienzo);border-radius:20px;padding:1px 8px;margin-left:7px;
  font-variant-numeric:tabular-nums;vertical-align:1px}
.mired-tabs button.on em{color:var(--agua-osc);background:var(--agua-cl)}

/* bajada y buscador en la misma línea, encima de la lista */
.sec-barra{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:6px}
.sec-barra .sec-nota{flex:1;min-width:min(100%,320px);margin:0}
.sec-barra .campo{width:230px;flex:0 0 auto}
.sec-barra>.subrayado{flex:0 0 auto;white-space:nowrap}
.sec-barra .campo input{min-height:36px;font-size:13.5px;padding:7px 12px}
/* bajada de la sección, debajo de la cabecera */
.sec-nota{font-size:13.5px;line-height:20px;color:var(--texto-2);max-width:78ch;margin-bottom:2px}

/* El nombre de la empresa siempre lleva a su perfil. */
.enlace-emp{background:none;font:inherit;font-size:14px;font-weight:600;color:var(--marino);
  text-align:left;padding:0;min-height:auto}
.enlace-emp:hover{color:var(--agua-osc);text-decoration:underline}

/* Píldoras de estado del monitoreo, con los colores que ya usa la tabla. */
.et2{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.02em;
  border-radius:20px;padding:4px 12px;white-space:nowrap}
.et2.mon{background:#dbe7f5;color:var(--marino)}
.et2.fin{background:var(--raya);color:var(--texto-2)}
.et2.pre{background:#f2e9cf;color:#7a5c14}
.ico-pdf{color:var(--agua-osc);font-size:17px;padding:4px}
.ico-pdf:hover{color:var(--marino)}

/* Etiqueta de contexto que la plataforma pone sobre el título. */
.eti-guia{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  color:var(--agua-osc);background:var(--agua-cl);border-radius:20px;padding:4px 13px;margin-bottom:12px}
.eti-guia::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--agua-osc)}

/* Las cuatro tarjetas de criterios. */
.criterios{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.cr{border:1px solid var(--raya);border-radius:var(--r-caja);background:var(--papel);padding:20px 22px}
.cr-i{width:34px;height:34px;border-radius:var(--r-boton);background:var(--lienzo);color:var(--texto-2);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;margin-bottom:14px}
.cr.ok .cr-i{background:var(--verde-cl);color:var(--verde)}
.cr.mal .cr-i{background:#fbecec;color:var(--rojo)}
.cr-i.num{background:var(--agua-cl);color:var(--marino)}
.cr h3{font-size:15.5px;font-weight:600;line-height:22px;margin-bottom:10px}
.cr ul{list-style:none}
.cr li{position:relative;padding-left:16px;font-size:13.5px;line-height:21px;color:var(--texto-2);
  padding-bottom:6px}
.cr li::before{content:"";position:absolute;left:2px;top:9px;width:4px;height:4px;border-radius:50%;
  background:var(--raya-2)}
.cr.ok li::before{background:var(--verde)}
.cr.mal li::before{background:var(--rojo)}

/* Fichas de empresa en el modal de nuevo boletinaje. */
.emp-op{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--papel);
  border:1.5px solid var(--raya);border-radius:var(--r-boton);padding:13px 15px;margin-bottom:9px}
.emp-op:hover{border-color:var(--raya-2);background:var(--lienzo)}
.emp-op[aria-checked="true"]{border-color:var(--marino);background:var(--agua-cl)}
.emp-op.tiene{background:#fdfaf3;border-color:#e8d9b4}
.emp-t{flex:1;min-width:0}
.emp-t b{display:block;font-size:14.5px;font-weight:600;line-height:21px}
.emp-t small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:0;color:var(--texto-2)}
.emp-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.chip{font-size:11.5px;font-weight:600;border-radius:20px;padding:2px 9px}
.chip.rel{background:var(--agua-cl);color:var(--agua-osc)}
.chip.act{background:#fbecec;color:var(--rojo)}
.emp-der{flex:0 0 auto;text-align:right;font-size:12px;line-height:17px}
.emp-der b{display:block;font-weight:600;color:var(--rojo)}
.emp-der.sin b{color:var(--texto-2)}
.emp-der span{color:var(--texto-3);font-family:var(--mono);font-size:11.5px}

/* Ficha de negocio: fecha, imagen, empresa y los dos tiempos —cotización y
   pago— que la plataforma repite como dos bloques idénticos. */
.neg{display:grid;grid-template-columns:52px 56px minmax(0,1.6fr) repeat(2,minmax(0,.9fr)) auto;
  gap:16px;align-items:center;background:var(--papel);border:1px solid var(--raya);
  border-radius:var(--r-caja);padding:14px 16px;margin-bottom:10px}
.neg-f{text-align:center}
.neg-f b{display:block;font-size:22px;font-weight:600;line-height:26px;color:var(--agua-osc)}
.neg-f span{display:block;font-size:11.5px;color:var(--texto-3);text-transform:uppercase;letter-spacing:.04em}
.neg-img{width:56px;height:56px;border-radius:var(--r-boton);object-fit:cover;background:var(--lienzo)}
.neg-t{min-width:0}
.neg-t small{display:block;font-size:12.5px;color:var(--texto-3);line-height:18px}
.neg-e{text-align:center}
.neg-e span{display:block;font-size:11.5px;color:var(--texto-3);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:3px}
.neg-e small{display:block;font-size:12px;color:var(--texto-3);line-height:17px;margin-top:2px}
@media(max-width:900px){
  .neg{grid-template-columns:52px 56px minmax(0,1fr);gap:10px 14px}
  .neg-e,.neg .btn{grid-column:3}
  .neg-e{text-align:left;display:flex;align-items:baseline;gap:8px}
  .neg-e span{margin:0}
}
.subrayado.ancho{width:100%;text-align:center}

/* Tarjetas de perfil de permisos. */
.perfiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.pf-c{display:flex;align-items:flex-start;gap:12px;background:var(--papel);border:1px solid var(--raya);
  border-radius:var(--r-caja);padding:16px 16px 15px}
.pf-t{flex:1;min-width:0}
.pf-t b{display:block;font-size:15px;font-weight:600;line-height:22px;color:var(--marino)}
.pf-t span{display:block;font-size:12.5px;line-height:18px;color:var(--texto-2);margin-top:2px}
.pf-t em{display:block;font-style:normal;font-size:12px;color:var(--texto-3);margin-top:8px}
.pf-e{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--agua-cl);
  color:var(--agua-osc);display:flex;align-items:center;justify-content:center;font-size:12px}
.pf-e:hover{background:var(--agua);color:#fff}
.pf-c.nuevo{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;
  border-style:dashed;border-color:var(--raya-2);background:var(--lienzo);color:var(--texto-2)}
.pf-c.nuevo i{font-size:15px;color:var(--agua-osc);margin-bottom:3px}
.pf-c.nuevo b{font-size:14px;font-weight:600;color:var(--marino)}
.pf-c.nuevo span{font-size:12.5px;line-height:18px}

/* Lista de permisos del modal: dos columnas de casillas. */
.permisos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px 18px;
  margin:4px 0 6px}
.pm{display:flex;align-items:center;gap:10px;padding:8px 2px;font-size:13.5px;cursor:pointer}
.pm input{width:17px;height:17px;accent-color:var(--marino);flex:0 0 auto}
.pm.legado{opacity:.5}
.pm.legado::after{content:"marketplace";margin-left:auto;font-size:11px;color:var(--texto-3)}

.riel-l.cerrado{opacity:.55}
.riel-t{flex:1;min-width:0}
.riel-l em.cerrojo{position:static;flex:0 0 auto;background:none;color:var(--texto-3);
  font-size:11px;padding:0;margin-left:8px;width:auto;inset:auto}

/* ── ejemplo de reporte ────────────────────────────────────────────────────
   La hoja del reporte se enseña tal cual. Lo que sigue después del bloque que
   responde la pregunta se desvanece bajo la llamada. */
.modal.ejm{max-width:min(700px,100%);padding:10px;overflow:hidden;max-height:none}
.modal.ejm .cerrar{top:14px;right:14px;background:rgba(255,255,255,.9);z-index:2}
.ejm-hoja{position:relative;border-radius:var(--r-boton);overflow:hidden;
  height:min(78vh,740px);background:#fff}
.ejm-hoja .recurso{height:100%}
.ejm-hoja .recurso img{width:100%;height:auto;object-fit:contain;object-position:top}
/* El apagado va en oscuro: la hoja se hunde y la llamada queda encima, que es
   lo que se quiere mirar. */
/* Banda sólida oscura, con una franja de degradado encima que apaga la hoja.
   Sólida por debajo: así el texto siempre tiene contraste. */
.ejm-muro{position:absolute;left:0;right:0;bottom:0;padding:26px 30px 20px;text-align:center;
  background:#0a1220}
.ejm-muro::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:130px;
  background:linear-gradient(to bottom,rgba(10,18,32,0) 0%,rgba(10,18,32,.5) 45%,#0a1220 100%)}
.ejm-muro p{font-size:15px;line-height:23px;color:rgba(255,255,255,.9);max-width:42ch;
  margin:0 auto 16px;text-wrap:balance}
.ejm-muro .btn{background:#fff;border-color:#fff;color:var(--marino);font-weight:600}
.ejm-muro .btn:hover{background:var(--agua-cl);border-color:var(--agua-cl)}
.ejm-muro span{display:block;font-size:12.5px;color:rgba(255,255,255,.6);margin-top:11px}
/* El pie vive dentro de la banda oscura, no sobre blanco: así no gana el
   contraste que le daba peso a un texto que debe pasar desapercibido. */
.ejm-pie{font-size:10.5px;line-height:15px;color:rgba(255,255,255,.22);margin-top:16px}

/* miniatura en el lateral del alta */
.ejm-mini{display:block;width:100%;background:none;padding:0;text-align:left}
.ejm-mini .recurso{display:block;height:150px;border:1px solid var(--raya);
  border-radius:var(--r-boton);overflow:hidden;background:#fff}
.ejm-mini .recurso img{width:100%;height:auto;object-fit:cover;object-position:top}
.ejm-lupa{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:9px;
  font-size:13.5px;color:var(--marino);font-weight:600}
.ejm-mini:hover .ejm-lupa{text-decoration:underline}
.ejm-mini:hover .recurso{border-color:var(--agua-bor)}

/* Control Mensual | Anual de la cabecera de planes. */
.periodo{display:inline-flex;border:1px solid var(--raya-2);border-radius:var(--r-boton);overflow:hidden}
.periodo button{background:var(--papel);color:var(--texto-2);font-size:13.5px;font-weight:600;
  padding:7px 16px;min-height:auto}
.periodo button.on{background:var(--marino);color:#fff}

/* Aviso del plan vigente y calculadora de consultas. */
.plan-actual{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--agua-cl);
  border-radius:var(--r-boton);padding:12px 16px;margin:16px 0 4px;font-size:14px}
.plan-actual b{color:var(--marino);font-weight:600}
.plan-actual .et{margin-left:auto}
.calc{margin:20px 0 6px;text-align:center}
.calc-t{font-size:14.5px;font-weight:600;color:var(--marino);margin-bottom:14px}
.calc-r{width:min(100%,520px);accent-color:var(--marino)}
.calc-m{display:flex;justify-content:space-between;width:min(100%,520px);margin:6px auto 0;
  font-size:13px;font-weight:600;color:var(--texto-3);font-variant-numeric:tabular-nums}
.calc-m .on{color:var(--marino)}

.planes.dos{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.pl.actual{border-color:var(--agua);background:var(--agua-cl)}
.pl-nota{font-size:12px;line-height:18px;color:var(--texto-3);margin:-8px 0 12px}
.pl-pie{font-size:13px;color:var(--texto-3);text-align:center;margin-top:18px}

/* Selector de cantidad del reporte On-Demand. */
.cant{display:flex;align-items:center;gap:0;margin:14px 0;width:fit-content;
  border:1.5px solid var(--raya-2);border-radius:var(--r-boton);overflow:hidden}
.cant button{width:36px;height:38px;background:var(--lienzo);color:var(--marino);font-size:17px;min-height:auto}
.cant button:hover{background:var(--agua-cl)}
.cant input{width:52px;height:38px;border:0;text-align:center;font-size:15px;font-weight:600;
  font-family:var(--sans);font-variant-numeric:tabular-nums}

/* Preguntas frecuentes. */
.faq{margin-top:6px;border-top:1px solid var(--raya)}
.faq-pie{text-align:center;padding:26px 20px 6px}
.faq-pie b{display:block;font-size:16px;font-weight:600;color:var(--marino);line-height:23px}
.faq-pie span{display:block;font-size:13.5px;color:var(--texto-2);margin:5px 0 14px}

/* Modal de invitación */
.inv-i{width:46px;height:46px;border-radius:50%;background:var(--agua-cl);color:var(--agua-osc);
  display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:14px}
.rel{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.rel-op{text-align:left;background:var(--papel);border:1.5px solid var(--raya);
  border-radius:var(--r-boton);padding:12px 14px}
.rel-op:hover{border-color:var(--raya-2);background:var(--lienzo)}
.rel-op[aria-checked="true"]{border-color:var(--marino);background:var(--agua-cl)}
.rel-op b{display:block;font-size:14px;font-weight:600;line-height:20px}
.rel-op span{display:block;font-size:12.5px;line-height:18px;color:var(--texto-2);margin-top:2px}
@media(max-width:560px){.rel{grid-template-columns:1fr}}

/* contador del carrito en la barra */
.app-iconos button{position:relative}
.cuenta-ic{position:absolute;top:1px;right:1px;min-width:15px;height:15px;border-radius:20px;
  background:var(--rojo);color:#fff;font-size:10px;font-weight:600;line-height:15px;
  text-align:center;padding:0 3px}

/* «Quién te ha visto»: la lista se ve borrosa detrás del muro de verificación. */
.visto{position:relative;border:1px solid var(--raya);border-radius:var(--r-caja);
  overflow:hidden;background:var(--papel);margin-top:16px}
.visto-lista{filter:blur(5px);user-select:none;pointer-events:none;opacity:.55;padding:8px 16px}
.visto-muro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:6px;padding:26px 22px;
  background:linear-gradient(to bottom,rgba(255,255,255,.7),rgba(255,255,255,.95))}
.visto-i{width:44px;height:44px;border-radius:50%;background:var(--agua-cl);color:var(--agua-osc);
  display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:4px}
.visto-muro b{font-size:16px;font-weight:600;color:var(--marino);line-height:23px}
.visto-muro p{font-size:13.5px;line-height:20px;color:var(--texto-2);max-width:46ch;margin-bottom:12px}

/* Tarjetas de producto */
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.prod{display:flex;flex-direction:column;background:var(--papel);border:1px solid var(--raya);
  border-radius:var(--r-caja);overflow:hidden}
.prod-img{height:130px;background:var(--lienzo);display:flex;align-items:center;
  justify-content:center;color:var(--raya-2);font-size:26px;border-radius:var(--r-boton)}
.prod-c{padding:14px 15px 15px;display:flex;flex-direction:column;gap:3px;flex:1}
.prod-c>b{font-size:15px;font-weight:600;line-height:22px;color:var(--marino)}
.prod-cat{font-size:12.5px;color:var(--texto-3);line-height:18px}
.prod-p{font-size:19px;font-weight:600;line-height:26px;margin-top:6px;
  font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.prod-p small{font-size:12.5px;font-weight:400;color:var(--texto-3);letter-spacing:0}
.prod-min{font-size:12.5px;line-height:18px;color:var(--texto-2)}
.prod-c .et2{align-self:flex-start;margin-top:8px}
.prod-a{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:14px}
.prod-a .btn{margin-left:auto}
.prod.nuevo{align-items:center;justify-content:center;text-align:center;gap:5px;padding:24px 16px;
  border-style:dashed;border-color:var(--raya-2);background:var(--lienzo);min-height:240px}
.prod.nuevo i{font-size:16px;color:var(--agua-osc);margin-bottom:4px}
.prod.nuevo b{font-size:14.5px;font-weight:600;color:var(--marino)}
.prod.nuevo span{font-size:12.5px;line-height:18px;color:var(--texto-2);max-width:22ch}

/* Saludo con el sello de verificación al lado */
.saludo-fila{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.saludo-fila .saludo{margin:0}
.sello-verif{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  color:var(--verde);background:var(--verde-cl);border-radius:20px;padding:5px 13px}
/* ── secciones del menú ────────────────────────────────────────────────────
   Todas comparten la misma armadura: cabecera con título y acción, filtros en
   fichas, lista de registros y un pie que dice cuántos hay de cuántos. */
/* El título de sección va en turquesa con su filete debajo, como «Mis Clientes»
   o «Solicitudes Enviadas» en la plataforma. */
.sec-cab{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:4px}
.sec-cab h1{flex:0 1 auto;margin-right:auto;font-size:22px;line-height:29px;font-weight:600;
  letter-spacing:-.2px;color:var(--agua-osc);padding-bottom:9px;
  border-bottom:2px solid var(--agua-osc);align-self:flex-start}
.sec-cab p{flex-basis:100%;font-size:13.5px;line-height:20px;color:var(--texto-2);max-width:74ch;margin-top:12px}
.sec-acc{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:9px}

/* Fichas de filtro: contorno turquesa y la activa rellena, como los «Ordenar
   por / Fecha / Estatus» de Mi Red. */
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 4px}
.fi{font-size:13px;line-height:19px;border:1px solid var(--agua-bor);border-radius:var(--r-boton);
  padding:6px 14px;background:var(--papel);color:var(--agua-osc)}
.fi:hover{background:var(--agua-cl)}
.fi.on{background:var(--agua);border-color:var(--agua);color:#fff;font-weight:600}
.fi b{font-variant-numeric:tabular-nums;font-weight:inherit;opacity:.85}

/* registro: rejilla de columnas que en móvil se apila sola */
.reg{display:grid;grid-template-columns:26px minmax(0,1.7fr) repeat(var(--cols,3),minmax(0,1fr)) minmax(96px,auto);
  gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--raya);font-size:13.5px;line-height:20px}
.reg:last-child{border-bottom:0}
.reg-cab{font-size:13px;font-weight:600;color:var(--marino);
  padding-bottom:11px;border-bottom:1.5px solid var(--raya-2);text-align:center}
.reg-cab>*:nth-child(2){text-align:left}
/* En la plataforma las columnas de datos van centradas bajo su encabezado.
   El nombre se queda a la izquierda, que es por donde se lee la lista. */
.reg>*:nth-child(n+3),.reg-cab>*:nth-child(n+3){text-align:center}
.reg .col-m{justify-content:center}
.reg-cab .num,.reg .num{text-align:center}
.reg b{font-size:14px;font-weight:600;line-height:20px}
.reg small{display:block;font-size:12.5px;color:var(--texto-3);line-height:18px;font-weight:400}
.reg .num{font-size:14px;font-variant-numeric:tabular-nums;color:var(--agua-osc);font-weight:500}
.reg .esc{font-size:14px;color:var(--verde)}
/* JERARQUÍA DE BOTONES
   El azul marino sólido es el color de UNA acción por zona, no de todas. La
   barra superior ya lo usa de forma permanente, así que dentro del lienzo el
   relleno se reserva para la acción que de verdad manda en esa pantalla.
   1 · marino sólido → la acción principal de la pantalla (una sola)
   2 · contorno      → acciones de apoyo y de fila
   3 · subrayado     → acciones secundarias dentro de una fila         */
.reg .btn.chico,.reg .btn.hueco.chico{min-height:32px;padding:5px 14px;font-size:13px}
/* La acción principal de la pantalla va en turquesa —el otro color de la
   plataforma, el de «Crear Cotización»— para no repetir el marino de la barra
   superior, que es permanente y aparece en todas las pantallas. */
.sec-acc .btn:not(.hueco){background:var(--agua);border-color:var(--agua);color:#fff}
.sec-acc .btn:not(.hueco):hover{background:var(--agua-osc);border-color:var(--agua-osc)}
/* Dentro de una lista sólo se rellena la fila que pide atención. */
.reg .btn.urge{background:var(--marino);border-color:var(--marino);color:#fff}
.reg .btn.urge:hover{background:var(--marino-osc);border-color:var(--marino-osc)}
.reg .esc.no{color:var(--texto-3)}
/* En móvil la fila deja de ser tabla: el nombre arriba y el resto en un
   renglón que envuelve, para que ningún importe se corte. */
@media(max-width:820px){
  .reg{grid-template-columns:26px minmax(0,1fr);gap:4px 12px;padding:14px 0}
  .reg>*:nth-child(n+3){grid-column:2;display:inline-flex;align-items:baseline;gap:8px}
  .reg .col-m{flex-wrap:wrap;justify-content:flex-start}
  .reg .num{text-align:left}
  .reg>*:nth-child(n+3):not(.col-m){margin-top:2px}
  .reg-cab{display:none}
}
.et{display:inline-block;font-size:13px;font-weight:600;white-space:nowrap}
.et.esp{color:var(--ambar)}
.et.ok{color:var(--verde)}
.et.mal{color:var(--rojo)}
.et.gris{color:var(--texto-3);font-weight:500}

/* pie honesto: dice cuántos ves de cuántos hay, no números de página sueltos */
.pie-lista{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--raya);padding-top:14px;margin-top:4px;
  font-size:13px;color:var(--texto-3)}
.pie-lista b{color:var(--texto);font-variant-numeric:tabular-nums;font-weight:600}

/* pestañas internas de una sección */
.tabs2{display:flex;gap:26px;border-bottom:1px solid var(--raya);margin:22px 0 4px;overflow-x:auto}
.tabs2 button{background:none;padding:0 0 12px;font-size:15px;font-weight:600;
  color:var(--marino);border-bottom:2.5px solid transparent;white-space:nowrap;letter-spacing:-.2px}
.tabs2 button:hover{color:var(--agua-osc)}
.tabs2 button.on{border-color:var(--agua-osc);color:var(--agua-osc)}
.tabs2 button em{font-style:normal;color:var(--texto-3);font-weight:500}
.tabs2 button.on em{color:var(--agua)}

/* ── asistente de solicitud de reporte ─────────────────────────────────────
   Mismos pasos que la plataforma hoy: buscar → seleccionar → definir monto y
   plazo → enviar. No se agregan ni se quitan pasos. Lo único que se mueve es
   el saldo de unidades, que hoy aparece DESPUÉS de gastar y aquí se ve antes. */
.paso-n{display:flex;gap:8px;margin-bottom:22px;padding-right:44px}
.paso-n i{flex:1;height:4px;border-radius:4px;background:var(--raya)}
.paso-n i.on{background:var(--marino)}
.modal .eti{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.modal .pista{font-size:13px;line-height:19px;color:var(--texto-3);margin-top:8px}
.op{width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:none;
  border:1.5px solid var(--raya);border-radius:var(--r-boton);padding:12px 14px;margin-bottom:8px}
.op:hover{border-color:var(--raya-2);background:var(--lienzo)}
.op[aria-checked="true"]{border-color:var(--marino);background:var(--agua-cl)}
.op-t{flex:1;min-width:0}
.op-t b{display:block;font-size:14.5px;font-weight:600;line-height:21px}
.op-t span{display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:0;color:var(--texto-2)}
.op-av{flex:0 0 auto;font-size:11.5px;font-weight:600;color:var(--ambar);
  background:var(--ambar-cl);border-radius:20px;padding:2px 9px}
.aviso-dup{display:flex;gap:10px;font-size:13px;line-height:19px;color:var(--texto-2);
  background:var(--ambar-cl);border-radius:var(--r-boton);padding:12px 14px;margin:4px 0 18px}
.aviso-dup i{color:var(--ambar);margin-top:2px}
.saldo{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;line-height:20px;
  border-top:1px solid var(--raya);padding-top:12px;margin-top:18px}
.saldo b{font-variant-numeric:tabular-nums}
.modal-pie{display:flex;justify-content:flex-end;gap:10px;margin-top:26px;flex-wrap:wrap}
.enviado{text-align:center;padding:8px 0 0}
.enviado .tick{width:56px;height:56px;border-radius:50%;background:var(--verde-cl);color:var(--verde);
  display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 16px}
.recibo{text-align:left;background:var(--lienzo);border-radius:var(--r-boton);padding:14px 16px;margin:18px 0}

/* ── reporte de crédito ────────────────────────────────────────────────────
   La estructura es la del informe real (ARCSA, 11 páginas). Lo que cambia es
   el orden: en el PDF el dictamen viene al pie de la primera plana; aquí sube
   al principio, porque es la respuesta a la pregunta que trajo al usuario. */

.rep-cab{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid var(--raya);margin-bottom:20px}
.rep-id{flex:1;min-width:0}
.rep-id h1{font-size:24px;line-height:31px;font-weight:600;letter-spacing:-.4px}
.rep-rfc{font-family:var(--mono);font-size:13.5px;letter-spacing:0;color:var(--texto-2);margin-top:2px}
.rep-meta{font-size:12.5px;color:var(--texto-3);line-height:19px;margin-top:6px}
.rep-acc{display:flex;gap:8px;flex-wrap:wrap}

/* dictamen: el hexágono del informe, la línea recomendada y el veredicto */
.dictamen{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px;align-items:center;
  background:var(--verde-cl);border-radius:var(--r-caja);padding:20px 24px;margin-bottom:14px}
/* el hexágono del informe. El borde se dibuja con un hexágono de fondo un poco
   mayor, porque clip-path recorta los bordes CSS. */
.hex{width:100px;height:110px;background:var(--verde);display:flex;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);flex:0 0 auto}
.hex>span{flex:1;margin:2px;background:var(--papel);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hex b{font-size:34px;line-height:36px;font-weight:600;color:var(--verde);letter-spacing:-1px}
.hex em{font-style:normal;font-size:11px;line-height:14px;color:var(--texto-2);text-align:center}
.dic-t b{display:block;font-size:19px;line-height:26px;font-weight:600;letter-spacing:-.3px}
.dic-t span{display:block;font-size:13.5px;line-height:20px;color:var(--texto-2);margin-top:4px;max-width:52ch}
.dic-t span b{display:inline;font-size:inherit;color:var(--texto)}
.dic-linea{text-align:right;flex:0 0 auto}
.dic-linea span{display:block;font-size:12px;color:var(--texto-2);line-height:17px}
.dic-linea em{display:block;font-style:normal;font-size:15px;line-height:21px;color:var(--texto-2);
  font-variant-numeric:tabular-nums}
.dic-linea .sep{margin-top:8px;padding-top:8px;border-top:1px solid rgba(31,122,82,.25)}
.dic-linea b{display:block;font-size:23px;line-height:30px;font-weight:600;color:var(--verde);
  font-variant-numeric:tabular-nums;letter-spacing:-.4px}


/* El recuadro de estado del escudo: neutro, sin color de alarma, con el
   escudo tachado como marca del estado. */
.estado-esc{grid-template-columns:minmax(0,1fr) auto;background:var(--lienzo);
  border:1px solid var(--raya);margin-top:18px;align-items:center}
.estado-esc .dic-linea{text-align:center}
.estado-esc .dic-linea .escudo-estado{display:inline-flex;font-size:26px}
/* las tres barras del informe, con su frase */
.barras{display:grid;gap:10px;margin-top:2px}
.br{display:grid;grid-template-columns:110px minmax(0,1fr) 74px;gap:12px;align-items:center}
.br-k{font-size:13px;font-weight:600;text-align:right}
.br-p{height:10px;border-radius:6px;background:var(--raya);overflow:hidden}
.br-p i{display:block;height:100%;background:var(--verde);border-radius:6px}
.br-v{font-size:13px;font-variant-numeric:tabular-nums;color:var(--texto-2);white-space:nowrap}
.br-f{grid-column:2/4;font-size:12.5px;color:var(--texto-3);line-height:18px;margin-top:-4px}
/* un 0 % por falta de datos NO se pinta como un 0 % por mal desempeño */
.br.sindato .br-p i{background:repeating-linear-gradient(135deg,var(--raya-2),var(--raya-2) 4px,var(--raya) 4px,var(--raya) 8px)}
.br.sindato .br-v{color:var(--texto-3)}

/* semáforo de cinco señales de la primera plana */
.senales{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-top:14px}
.se{display:flex;align-items:center;gap:9px;font-size:13px;line-height:19px;
  border:1px solid var(--raya);border-radius:var(--r-boton);padding:9px 12px}
.se i{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--verde)}
.se.mal i{background:var(--rojo)}
.se.mal{border-color:#e8c4c2;background:#fdf4f4}
.se b{font-weight:500}
.se em{margin-left:auto;font-style:normal;font-size:12px;color:var(--texto-3)}
.se.mal em{color:var(--rojo);font-weight:600}

/* ficha de datos en dos columnas, como el RESUMEN del informe */
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:0 22px}
.dt{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--raya);font-size:13.5px;line-height:20px}
.dt span{color:var(--texto-2)}
.dt b{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}

/* secciones plegadas del resto del informe */
.rep-sec{border-top:1px solid var(--raya)}
.rep-sec button{width:100%;display:flex;align-items:center;gap:11px;padding:14px 2px;
  background:none;text-align:left;font-size:14.5px;font-weight:600;color:var(--texto)}
.rep-sec button i{font-size:11px;color:var(--texto-3);transition:transform .15s}
.rep-sec button em{margin-left:auto;font-style:normal;font-size:12.5px;font-weight:400;color:var(--texto-3)}
.rep-sec button.abierto i{transform:rotate(90deg)}
.rep-sec .cuerpo{padding:0 2px 18px;font-size:13.5px;line-height:21px;color:var(--texto-2);max-width:78ch}
.rep-sec .cuerpo p+p{margin-top:10px}
.rep-fuente{font-size:12.5px;line-height:19px;color:var(--texto-3);
  border-top:1px solid var(--raya);padding-top:14px;margin-top:6px}

.vacio{border:1px dashed var(--raya-2);border-radius:var(--r-boton);padding:26px 22px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:8px}
.vacio i{font-size:22px;color:var(--raya-2)}
.vacio b{font-size:15px;font-weight:600;color:var(--texto)}
.vacio p{font-size:13.5px;line-height:21px;color:var(--texto-2);max-width:44ch}
.vacio .subrayado{font-size:14px;margin-top:4px;min-height:auto;padding:8px 2px}

.plegado{display:flex;align-items:center;gap:11px;width:100%;background:#fff;border:1px solid var(--raya);
  border-radius:var(--r-caja);padding:14px 17px;font-size:14.5px;font-weight:600;color:var(--texto)}
.plegado:hover{border-color:var(--raya-2)}
.plegado>i{font-size:12px;color:var(--texto-3);transition:transform .15s}
.plegado.abierto>i{transform:rotate(90deg)}
.plegado em{margin-left:auto;font-style:normal;font-size:13px;font-weight:400;color:var(--texto-3)}
.plegable .plegado.abierto{border-radius:var(--r-caja) var(--r-caja) 0 0;border-bottom-color:transparent}
.plegado-cuerpo{background:#fff;border:1px solid var(--raya);border-top:none;
  border-radius:0 0 var(--r-caja) var(--r-caja);padding:0 17px 17px}

/* .app-iconos button trae display:flex, así que hay que ganarle por especificidad */
.app-burger{display:none}
.app-iconos .solo-lupa{display:none}
.velo-app{position:fixed;inset:0;z-index:45;background:rgba(12,24,44,.5)}

@container sitio (max-width:1040px){
  .dos-col{grid-template-columns:1fr}
}

/* ── por debajo de 900 el menú se vuelve cajón: si no, sus diez accesos se pierden ── */
@container sitio (max-width:900px){
  .app-cuerpo{grid-template-columns:1fr}
  .app-burger{display:flex;width:40px;height:40px;flex:0 0 auto;align-items:center;justify-content:center;
    border-radius:var(--r-boton);color:var(--texto-2);font-size:18px;margin-left:-6px}
  .app-burger:hover{background:var(--lienzo);color:var(--marino)}
  .riel{position:fixed;top:0;left:0;bottom:0;z-index:50;width:min(300px,84%);max-height:none;
    border-right:1px solid var(--raya);padding:16px 12px 30px;
    transform:translateX(-101%);visibility:hidden;transition:transform .22s ease,visibility 0s .22s;
    box-shadow:8px 0 30px rgba(12,24,44,.18);overflow-y:auto}
  .riel.abierto{transform:none;visibility:visible;transition:transform .22s ease}
  .riel-cerrar{display:flex;width:40px;height:40px;margin:0 0 8px auto;align-items:center;justify-content:center;
    border-radius:var(--r-boton);color:var(--texto-2);font-size:18px}
  .riel-cerrar:hover{background:var(--lienzo)}
  .riel-l{font-size:16px;min-height:46px}
}
@container sitio (min-width:901px){.velo-app{display:none}}

/* ── en el teléfono el buscador no cabe en la barra: se abre en su propio renglón ── */
@container sitio (max-width:620px){
  .app-barra{height:58px;gap:8px;position:relative}
  .app-barra .btn.chico,.app-iconos .no-movil{display:none}
  .app-barra .logo{font-size:19px}
  .buscar{display:none}
  .app-iconos .solo-lupa{display:flex}
  .app.buscando .buscar{display:flex;position:absolute;left:0;right:0;top:100%;max-width:none;
    background:#fff;border-bottom:1px solid var(--raya);padding:10px 14px;z-index:2}
  .app.buscando .buscar i{left:27px}
  .app-iconos button{width:38px;height:38px}
  /* cuatro nodos no caben: se apilan con la línea en vertical */
  .pasos-linea{flex-direction:column;align-items:flex-start;gap:16px;padding:16px 0 4px}
  .nd{flex-direction:row;align-items:center;gap:12px;text-align:left;width:100%}
  .nd::before{top:-16px;left:14px;width:2px;height:16px}
  .nd-t{max-width:none}
  .paso-detalle{flex-direction:column;align-items:stretch;gap:12px}
  .paso-detalle .btn{width:100%}
  .lienzo{padding-bottom:60px}
}

/* ── pendiente ── */
.pendiente{max-width:560px;margin:0 auto;padding:110px 26px;text-align:center}
.pendiente h2{margin-bottom:14px}
.pendiente p{font-size:18px;line-height:29px;color:var(--texto-2);margin-bottom:30px}

/* ══ estructura: hamburguesa por debajo de 900 ══ */
@container sitio (max-width:900px){
  .contenedor{padding:0 clamp(20px,3cqw,30px)}
  .menu{display:none} .burger{display:flex}
  .derecha>.entrar{display:none}
  .nav-fila{height:70px;gap:16px}
  .alta{grid-template-columns:1fr}
  /* apilados, los dos campos de una pareja quedaban pegados: la rejilla no
     tiene hueco entre renglones y el margen del campo es 0 dentro de .par2.
     El margen va al segundo campo, no a la rejilla, para no separar también
     las líneas de ayuda, que son celdas vacías de la misma rejilla. */
  .par2{grid-template-columns:1fr}
  .par2>.campo+.campo{margin-top:18px}
  .otp{margin-top:0}
  /* con la letra a 16 px el selector de país no alcanzaba a mostrar «+52» */
  .tel select{flex:0 0 104px;padding-left:12px;padding-right:2px}
  .pie-form{grid-template-columns:1fr}
  .pie-form .btn{order:-1}
  .pie-acceso.izq{text-align:center}
  .bloque-final{gap:14px}
  .alta-izq{padding:clamp(24px,3cqw,34px) 0 24px}
  /* apilado, los beneficios van ANTES del formulario: sirven para decidir, no de pie de página */
  .alta-der{order:-1;border-left:none;border-bottom:1px solid var(--raya);
    padding:22px clamp(20px,3cqw,30px)}
  .alta-fijo{position:static;gap:14px;align-items:stretch}
  .alta-der .regalo{max-width:none;padding:18px 20px}
  .alta-der .regalo-t{margin-bottom:12px}
  /* en tira: tres beneficios en fila y las dos notas cruzando abajo */
  .alta-der .regalo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 22px}
  .alta-der .eti-gratis{grid-column:1/-1;justify-self:start;margin-bottom:0}
  .alta-der .regalo-t{grid-column:1/-1;margin-bottom:0}
  .alta-der .regalo-l{padding:0}
  .alta-der .aplicado,.alta-der .vence{grid-column:1/-1}
  .alta-der .aplicado{margin-top:4px}
  .alta-der .subrayado{align-self:flex-start}
  .pendiente{padding:clamp(56px,8cqw,80px) 24px 110px}

  /* sin imagen lateral: tarjeta centrada, como Basecamp o Cloudflare */
  .partida{grid-template-columns:1fr}
  .partida-der{display:none}
  .partida-izq{background:var(--lienzo);padding:clamp(36px,6cqw,72px) 24px}
  .bloque-acceso{max-width:424px}
  .logo-acceso{text-align:center;margin-bottom:40px}
  .acceso{background:#fff;border:1px solid var(--raya);border-radius:var(--r-caja);
    padding:clamp(30px,4cqw,42px) clamp(24px,3.4cqw,38px);box-shadow:0 8px 26px rgba(18,48,107,.07)}
  .acceso h2{text-align:center}
  .acceso .intro{text-align:center;margin-bottom:26px}
  .acceso .cl-nota.cl-nota-izq{text-align:center}
  .version{margin-top:24px}
}
/* ══ una columna por debajo de 700 ══ */
@container sitio (max-width:700px){
  /* el :has de arriba pesa más que un selector de clase suelto, hay que igualarlo */
  .hero-rejilla,.hero-rejilla:has(.hero-video){grid-template-columns:1fr}
  .hueco-hero{max-width:500px}
  .hero-video{max-width:560px}
}
/* ══ móvil: se apilan los botones y encogen los flotantes ══ */
@container sitio (max-width:620px){
  body{font-size:17px;line-height:26px}
  .nav-fila{height:62px;gap:12px}
  .derecha>.btn{display:none}
  .logo{font-size:21px}
  .burger{width:44px;height:44px;margin-right:-8px}
  .hueco-hero{max-width:none}
  .ctas{flex-direction:column;align-items:stretch}
  .ctas .btn,.ctas .subrayado{width:100%;justify-content:center}
  .subrayado{border-bottom:none;background:var(--lienzo);border-radius:var(--r-boton);min-height:48px}
  .campo input,.campo select{font-size:16px;min-height:50px}
  .modal{padding:24px 18px 20px;border-radius:12px}
  .rep-modal{padding:0}
  .rep-cerrar{top:-13px;right:-13px;width:36px;height:36px;font-size:15px}
  .modal-sub{font-size:15px;line-height:23px;margin-bottom:18px}
  .fila{font-size:15px;line-height:23px;gap:12px;padding:11px 0}
  .candado p{font-size:15px;line-height:23px}
  .candado .btn{width:100%;font-size:15px;padding:14px 16px}
  .nota{font-size:14px;line-height:22px;padding:12px 14px}
  /* en el teléfono no se puede pasar por encima: siempre círculo */
  .wasap{width:52px;height:52px;padding:0;justify-content:center;right:16px;bottom:16px;font-size:24px}
  .wasap span{display:none}
  .wasap:hover{padding:0;gap:0}
  .partida-izq{background:#fff;padding:26px 20px 40px;align-items:flex-start}
  .bloque-acceso{max-width:none}
  .acceso{background:none;border:none;box-shadow:none;padding:0}
  .logo-acceso{font-size:21px;margin-bottom:30px}
  .acceso h2{font-size:23px}
  .acceso .intro{font-size:15.5px;line-height:23px;margin-bottom:22px}
  .campo{margin-bottom:16px}
  .campo label{font-size:15px;margin-bottom:6px}
  .campo input,.campo select{font-size:16px;padding:12px 14px;min-height:48px}
  /* en el teléfono la tira mide 430px: sería un muro antes del primer campo.
     Aquí sí va después del formulario. */
  .alta-der{order:0;border-bottom:none;border-top:1px solid var(--raya);
    padding:20px clamp(18px,3cqw,24px) 90px}
  .alta-der .regalo{grid-template-columns:1fr;gap:8px;padding:16px 18px}
  .reglas li{font-size:12.5px;padding:3px 9px}
  .ayuda{font-size:14px;line-height:21px}
  .olvide{font-size:14.5px}
  .separa{margin:20px 0;font-size:13.5px}
  .pie-acceso{font-size:15px}
  .pie-acceso button{font-size:15px}
  .version{margin-top:22px;font-size:11.5px}
}
/* ══ el menú abierto bloquea el desplazamiento ══ */
body.menu-abierto{overflow:hidden}
body.enmarcado.menu-abierto #sitio{overflow:hidden}
@container sitio (min-width:901px){.panel-movil,.velo-menu{display:none}}
@media (max-width:540px){.proto-m em{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}


.v1{background:#fff;color:#333;font-size:14px;line-height:1.45;letter-spacing:0;
  min-height:calc(100vh - var(--proto));display:flex;flex-direction:column}
.v1 button{font-family:var(--sans);letter-spacing:0}

/* ── banner de la prueba gratuita ──────────────────────────────────────
   Con la barra en marino, dos franjas oscuras apiladas arriba saturaban la
   cabecera. El aviso baja al pie: sigue siempre a la vista, deja de competir
   con el logo y el buscador, y el marino de la barra queda solo. El filete de
   arriba es el temporizador. */
.v1-ban{position:fixed;left:0;right:0;bottom:0;z-index:39;
  display:flex;align-items:center;justify-content:center;gap:16px;
  /* degradado del marino del sitio al verde azulado de la barra de progreso */
  background:linear-gradient(90deg,#0d2f6e 0%,#123c8a 45%,#2b6f82 100%);color:#fff;padding:12px 52px;font-size:13.5px;line-height:20px;
  text-align:center;box-shadow:0 -2px 14px rgba(9,26,63,.2)}
.v1-ban[hidden]{display:none}
.v1-ban>i{flex:0 0 auto;font-size:13px;opacity:.7}
.v1-ban p{min-width:0;white-space:nowrap}
.v1-ban p b{font-weight:700}
.v1-ban p em{font-style:normal;color:#d6e3f2}
.v1-ban .ver{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;
  color:#123c8a;padding:7px 18px;border:none;border-radius:999px;white-space:nowrap;background:#fff;
  box-shadow:0 2px 8px rgba(6,20,50,.25)}
.v1-ban .ver[hidden]{display:none}
.v1-ban .ver:hover{background:#e9eef8}
.v1-ban .cerrar{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13px;opacity:.55;background:none;border:none}
.v1-ban .cerrar:hover{opacity:1;background:rgba(255,255,255,.14)}
.v1-ban .filete{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(255,255,255,.16)}
.v1-ban .filete i{display:block;height:100%;background:#e0a12c}
/* en ancho de escritorio, siempre en una fila; sólo en pantallas chicas se parte */
@container sitio (max-width:900px){.v1-ban p{white-space:normal}}
@container sitio (max-width:640px){
  .v1-ban{flex-direction:column;gap:9px;padding:12px 44px 14px}
}

/* ── barra superior: dos renglones de acciones a la derecha ── */
/* La barra en marino: con la página, el lateral y las tarjetas en blanco, el
   cromo se confundía con el contenido. Al colorearla, todo lo que va dentro
   invierte —logo, campos, iconos— y el único bloque blanco que queda es el
   botón del que depende el recorrido. */
.v1-bar{position:sticky;top:0;z-index:30;background:#123c8a;
  box-shadow:0 2px 12px rgba(9,26,63,.22)}
.v1-bar-in{max-width:1272px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;gap:14px}
.v1-logo{font-family:var(--serif);font-size:29px;font-weight:700;line-height:1;letter-spacing:-.4px;
  position:relative;flex:0 0 auto;cursor:pointer;padding-top:4px}
.v1-logo .a{color:#8ecfdd}
.v1-logo .b{color:#fff}
.v1-logo .v{position:absolute;top:-5px;right:30px;color:#5fd39a;font-size:13px}
/* El flotante de la esquina deja de ser sólo WhatsApp y pasa a ser soporte
   entero: WhatsApp ya vivía dentro del menú de ayuda, así que un botón para
   cada canal era el mismo destino dos veces. Con esto salen de la barra el
   icono de chat y el de ayuda. */
.v1{--v1-pie:24px}
.v1-sos-caja{position:fixed;right:24px;bottom:var(--v1-pie);z-index:42;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.v1-sos{width:56px;height:56px;border-radius:50%;align-self:flex-end;
  background:#0e8fa8;color:#fff;display:flex;align-items:center;justify-content:center;font-size:25px;
  border:none;cursor:pointer;box-shadow:0 8px 22px rgba(10,110,132,.44);transition:transform .16s}
.v1-sos:hover{transform:scale(1.06);background:#0b7e94}
.v1-sos-caja.abierto .v1-sos{background:#123c8a}
.v1-panel.sos{width:300px}
.v1-panel.sos .v1-canal{margin:0 12px 8px}
.v1-panel.sos .v1-canal:first-of-type{margin-top:12px}
.v1-buscar{flex:1;max-width:462px;margin:0 auto;position:relative;display:flex;align-items:center}
.v1-buscar i{position:absolute;left:16px;color:rgba(255,255,255,.7);font-size:15px;pointer-events:none;
  transition:color .15s}
.v1-buscar input{width:100%;font-family:var(--sans);font-size:15px;letter-spacing:0;color:#fff;
  padding:11px 16px 11px 44px;border:1px solid rgba(255,255,255,.26);border-radius:8px;
  background:rgba(255,255,255,.13);transition:background .15s,color .15s}
.v1-buscar input::placeholder{color:rgba(255,255,255,.66)}
.v1-buscar input:hover{background:rgba(255,255,255,.19)}
.v1-buscar input:focus{outline:none;background:#fff;color:#333;border-color:#fff}
.v1-buscar input:focus::placeholder{color:#9aa3af}
.v1-buscar:focus-within i{color:#9aa3af}
.v1-acc{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.v1-fila{display:flex;align-items:center;gap:10px}
.v1-ic{width:38px;height:38px;border-radius:8px;border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.06);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:16px;position:relative;flex:0 0 auto}
.v1-ic:hover{background:rgba(255,255,255,.18)}
.v1-grupo{display:flex;align-items:center;border:1px solid rgba(255,255,255,.3);border-radius:8px;
  background:rgba(255,255,255,.06)}
.v1-grupo .v1-ic{border:none;background:none;width:38px;height:36px;border-radius:0}
.v1-grupo .v1-anc:first-child .v1-ic{border-radius:7px 0 0 7px}
.v1-grupo .v1-anc:last-child .v1-ic{border-radius:0 7px 7px 0}
.v1-grupo .v1-ic:hover{background:rgba(255,255,255,.18)}
.v1-badge{position:absolute;top:1px;right:3px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  background:#e0362c;color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center}
/* Invitar pasa a contorno: relleno competía de tú a tú con Reporte de
   Crédito, que es la acción de la que depende todo el recorrido. Mismo
   tamaño de letra y mismo alto que él para que se lean como una pareja. */
.v1-invitar{display:flex;align-items:center;gap:8px;background:transparent;color:#fff;
  font-weight:600;font-size:14px;padding:10px 17px;border-radius:8px;border:1.5px solid rgba(255,255,255,.42)}
.v1-invitar:hover{border-color:#fff;background:rgba(255,255,255,.14)}
/* los dos botones de la barra comparten alto: uno es flex y el otro no, y sin
   una altura común quedaban desalineados al ocultarse la etiqueta en angosto */
.v1-btn,.v1-invitar{min-height:42px;display:inline-flex;align-items:center;justify-content:center}
.v1-btn{font-size:14px;font-weight:600;padding:10px 17px;border-radius:8px;
  background:#fff;color:#123c8a;border:1.5px solid #fff}
.v1-btn:hover{background:#e6ecf7;border-color:#e6ecf7}
.v1-btn.hueco{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}

/* ── desplegables de la barra ──
   Cuatro menús a menos de 200 px uno de otro. Se replican completos y sin
   fusionar: la duplicación entre ellos sólo se ve cuando están los cuatro. */
.v1-anc{position:relative;display:flex}
.v1-pop{position:absolute;top:calc(100% + 9px);right:0;z-index:60;width:302px;background:#fff;
  border:1px solid #e0e5ec;border-radius:10px;box-shadow:0 14px 34px rgba(16,38,76,.19);overflow:hidden;
  text-align:left;cursor:default}
.v1-pop[hidden]{display:none}
.v1-pcabm{background:#123c8a;color:#fff;padding:11px 14px;display:flex;align-items:center;gap:10px}
.v1-pcabc{background:#fff;border-bottom:1px solid #eceff4;padding:12px 14px;display:flex;align-items:center;gap:10px}
.v1-pcabm i,.v1-pcabc i{font-size:16px;flex:0 0 auto}
.v1-pcabm b,.v1-pcabc b{display:block;font-size:14px;font-weight:700;line-height:1.25}
.v1-pcabm span{display:block;font-size:11px;color:#c9d8f0;line-height:1.3}
.v1-pcabc b{color:#123c8a}
.v1-pcabc span{display:block;font-size:11px;color:#6b7280;line-height:1.3}
.v1-ini{width:34px;height:34px;border-radius:50%;background:#e9eef6;color:#123c8a;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.v1-plist{padding:6px 0;max-height:352px;overflow-y:auto}
.v1-plist a{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:#2b3a4d;cursor:pointer}
.v1-plist a:hover{background:#f4f7fc}
.v1-plist a>i:first-child{color:#3f7fc4;font-size:14px;width:17px;text-align:center;flex:0 0 auto}
.v1-plist a .ch{margin-left:auto;color:#b7bfcb;font-size:11px}
.v1-plist hr{border:none;border-top:1px solid #eceff4;margin:6px 0}
.v1-plist a.salir,.v1-plist a.salir>i:first-child{color:#b3423c}
/* tarjetas de canal del menú de ayuda */
.v1-canal{display:flex;align-items:flex-start;gap:10px;margin:0 12px 8px;padding:10px 11px;
  border:1px solid #e4e8ef;border-radius:8px;cursor:pointer}
.v1-canal:hover{background:#f7f9fc}
.v1-canal.sug{background:#eef4f6;border-color:#a9c9d2}
.v1-canal>i{font-size:15px;flex:0 0 auto;margin-top:1px}
.v1-canal b{display:block;font-size:12.5px;font-weight:700;color:#123c8a;line-height:1.3}
.v1-canal span{display:block;font-size:11px;color:#6b7280;line-height:1.35}
/* avisos de la campana: sin estado de leído, como hoy */
.v1-aviso{display:block;padding:10px 14px;border-bottom:1px solid #f2f4f8;cursor:pointer}
.v1-aviso:hover{background:#f4f7fc}
.v1-aviso .tit{display:flex;align-items:baseline;gap:8px}
.v1-aviso b{font-size:12.5px;font-weight:700;color:#123c8a;flex:1;line-height:1.3}
.v1-aviso em{font-style:normal;font-size:10.5px;color:#8b95a3;flex:0 0 auto}
.v1-aviso span{display:block;font-size:11.5px;line-height:1.4;color:#6b7280;margin-top:2px}
.v1-ppiep{padding:9px 14px;text-align:center;border-top:1px solid #eceff4}
.v1-ppiep a{font-size:12px;font-weight:600;color:#123c8a;cursor:pointer}

/* ── modales de la barra ── */
.v1-velo{position:fixed;inset:0;z-index:80;background:rgba(12,24,44,.45);
  display:flex;align-items:flex-start;justify-content:center;padding:52px 16px;overflow-y:auto}
.v1-velo[hidden]{display:none}
.v1-modal{width:100%;max-width:432px;background:#fff;border-radius:12px;padding:22px;
  box-shadow:0 24px 60px rgba(12,24,44,.3);position:relative}
.v1-modal .x{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;
  color:#8b95a3;display:flex;align-items:center;justify-content:center;font-size:14px}
.v1-mtit{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;margin-bottom:6px}
.v1-mtit .ico{width:44px;height:44px;border-radius:50%;background:#e9eef6;color:#123c8a;
  display:flex;align-items:center;justify-content:center;font-size:19px}
.v1-mtit h3{font-size:16px;font-weight:700;color:#123c8a;letter-spacing:0;line-height:1.3}
.v1-mbaj{font-size:12.5px;line-height:1.5;color:#6b7280;text-align:center;margin-bottom:14px}
.v1-oblig{font-size:11.5px;font-style:italic;color:#8b95a3;text-align:center;margin-bottom:14px}
.v1-campo{margin-bottom:12px}
.v1-campo label{display:block;font-size:12px;font-weight:600;color:#123c8a;margin-bottom:5px}
.v1-campo input,.v1-campo select{width:100%;font-family:var(--sans);font-size:13.5px;letter-spacing:0;
  color:#333;padding:9px 12px;border:1px solid #d8dde5;border-radius:7px;background:#fff}
.v1-campo input:focus,.v1-campo select:focus{outline:none;border-color:#123c8a}
.v1-campo .ayuda{display:block;font-size:11.5px;color:#8b95a3;margin-bottom:5px;font-weight:400}
.v1-tel{display:flex;gap:8px}
.v1-tel select{width:96px;flex:0 0 auto}
.v1-radios{display:flex;gap:18px;font-size:13px;color:#2b3a4d}
.v1-radios label{display:flex;align-items:center;gap:6px;font-weight:400;color:#2b3a4d;cursor:pointer}
.v1-nota{font-size:11.5px;line-height:1.45;color:#8b95a3;margin:10px 0 16px}
/* la fila de botones necesita aire propio: pegada al último bloque parece
   parte de él */
.v1-macc{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
.v1-macc button{font-size:13.5px;font-weight:600;padding:9px 20px;border-radius:7px}
.v1-macc .gris{background:#e4e8ef;color:#6b7280}
.v1-macc .lleno{background:#123c8a;color:#fff}
.v1-macc .apagado{background:#cfd6e0;color:#fff;width:100%;justify-content:center}
.v1-macc .hueco2{background:#fff;color:#123c8a;border:1px solid #c9d3e2}
.v1-macc .txt{background:none;color:#6b7280;padding-left:6px}

/* ── asistente del reporte de crédito ──────────────────────────────────
   Los seis modales de hoy, con una guía al frente y un riel que los une.
   El riel es lo único estructural que se añade: hoy son seis ventanas
   seguidas sin ninguna señal de en cuál vas ni cuántas faltan. */
.v1-riel{display:flex;align-items:center;margin-bottom:13px;padding-right:30px}
.v1-riel span{font-size:10.5px;font-weight:600;color:#a3adbb;white-space:nowrap}
.v1-riel span.on{color:#123c8a}
.v1-riel span.hecho{color:#1f7a52}
.v1-riel .sp{flex:1;height:1px;background:#e0e5ec;margin:0 7px;min-width:6px}
.v1-barra{height:3px;background:#eceff4;border-radius:2px;margin-bottom:16px;overflow:hidden}
.v1-barra i{display:block;height:100%;background:#123c8a;border-radius:2px;transition:width .22s}
.v1-mfila{display:flex;align-items:center;gap:11px;margin-bottom:11px;padding-right:26px}
.v1-mfila .ico{width:38px;height:38px;border-radius:10px;background:#eaf3f6;color:#2f7f96;
  display:flex;align-items:center;justify-content:center;font-size:17px;flex:0 0 auto}
.v1-mfila .ico.ok{background:#eaf5ef;color:#1f7a52}
.v1-mfila h3{font-size:17px;font-weight:700;color:#123c8a;line-height:1.25;letter-spacing:-.2px}
.v1-mbaj2{font-size:13.5px;font-weight:600;line-height:1.45;color:#2f7f96;margin-bottom:18px}
/* los tres pasos de la guía */
.v1-paso{display:flex;gap:13px;padding:11px 0}
.v1-paso+.v1-paso{border-top:1px solid #eceff4}
.v1-paso .n{width:26px;height:26px;border-radius:50%;background:#123c8a;color:#fff;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.v1-paso>div{flex:1;min-width:0}
.v1-paso>div>b{display:block;font-size:13.5px;font-weight:700;color:#123c8a;line-height:1.35}
.v1-paso span{display:block;font-size:12.5px;line-height:1.5;color:#6b7280;margin-top:2px}
.v1-paso span b{font-weight:700;color:#123c8a}
.v1-paso .dib{flex:0 0 auto;width:46px;align-self:center}
/* el costo se dice antes de gastarlo, no después */
.v1-costo{display:flex;align-items:center;gap:10px;margin-top:16px;padding:11px 13px;
  background:#fdf6e6;border:1px solid #f0e2c2;border-radius:8px}
.v1-costo>i{color:#8a6410;font-size:14px;flex:0 0 auto}
.v1-costo p{font-size:12px;line-height:1.45;color:#8a6410}
/* resultados de la búsqueda */
.v1-opc{display:flex;flex-direction:column;gap:8px;margin-bottom:13px}
.v1-op{border:1px solid #e4e8ef;border-radius:8px;padding:10px 13px;cursor:pointer;background:#fbfcfd;
  text-align:left;width:100%;display:block}
.v1-op:hover{border-color:#bcd8e0}
.v1-op.on{background:#eaf3f6;border-color:#bcd8e0}
.v1-op b{display:block;font-size:13px;font-weight:600;color:#123c8a}
.v1-op em{display:block;font-style:normal;font-size:11.5px;color:#6b7280;margin-top:1px;
  font-variant-numeric:tabular-nums}
.v1-op.otras b{font-weight:400;color:#6b7280;font-size:12.5px}
.v1-alerta{display:flex;gap:9px;padding:10px 12px;background:#fdf6e6;border:1px solid #f0e2c2;
  border-radius:8px;margin-bottom:12px}
.v1-alerta>i{color:#8a6410;font-size:13px;flex:0 0 auto;margin-top:2px}
.v1-alerta p{font-size:11.5px;line-height:1.45;color:#8a6410}
.v1-nohay{font-size:12.5px;color:#6b7280;margin-bottom:16px}
.v1-nohay button{font-size:12.5px;color:#123c8a;font-weight:600;text-decoration:underline;padding:0}
/* resumen y saldo */
.v1-res{background:#eaf3f6;border-radius:8px;padding:12px 14px;margin-bottom:14px}
.v1-res div{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;line-height:1.7}
.v1-res b{color:#123c8a;font-weight:700;flex:0 0 auto}
.v1-res span{color:#374151;text-align:right;font-variant-numeric:tabular-nums}
.v1-lista2{margin:0 0 14px;list-style:none}
.v1-lista2 li{display:flex;gap:8px;font-size:12.5px;line-height:1.5;color:#374151;margin-bottom:6px}
.v1-lista2 i{color:#2f7f96;font-size:10px;margin-top:5px;flex:0 0 auto}
.v1-saldo{border:1px solid #e4e8ef;border-radius:8px;overflow:hidden;margin-bottom:14px}
.v1-sal{display:flex;justify-content:space-between;padding:9px 13px;font-size:12.5px;color:#374151;
  border-bottom:1px solid #f0f3f7}
.v1-sal:last-child{border-bottom:none}
.v1-sal b{font-weight:700;color:#123c8a;font-variant-numeric:tabular-nums}
.v1-sal.fuerte{background:#eaf3f6}

/* ── ruta de recompensas ── */
.v1-premio{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:9px;
  background:#eaf5ef;border:1px solid #c3e2d2;margin-bottom:14px}
.v1-premio>i{color:#1f7a52;font-size:20px;flex:0 0 auto}
/* verde = ya es tuyo · agua = disponible, falta activarlo */
.v1-premio.oferta{background:#eaf3f6;border-color:#bcd8e0}
.v1-premio.oferta>i{color:#2f7f96}
.v1-premio.oferta b{color:#1d5e73}
.v1-premio.oferta span{color:#48788a}
.v1-premio b{display:block;font-size:14px;font-weight:700;color:#1f7a52;line-height:1.25}
.v1-premio span{display:block;font-size:11.5px;color:#4d7a63;line-height:1.4;margin-top:1px}
.v1-quees{font-size:12.5px;line-height:1.55;color:#6b7280;margin-bottom:14px}
.v1-quees b{color:#123c8a;font-weight:600}
.v1-sig{display:flex;align-items:flex-start;gap:9px;padding:11px 13px;border-radius:8px;
  background:#f5f7fa;border:1px solid #e4e8ef;margin-bottom:4px}
.v1-sig>i{color:#3f7fc4;font-size:13px;flex:0 0 auto;margin-top:2px}
.v1-sig p{font-size:12px;line-height:1.45;color:#4b5563}
.v1-sig p b{color:#123c8a;font-weight:700}
.v1-sig+.v1-macc,.v1-costo+.v1-macc{margin-top:24px}
/* contador de los monitoreos gratis */
.v1-cont{margin-bottom:14px}
.v1-cont .fila{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.v1-cont b{font-size:12.5px;font-weight:700;color:#123c8a}
.v1-cont em{font-style:normal;font-size:11.5px;color:#6b7280;font-variant-numeric:tabular-nums}
.v1-cont .pista{height:6px;background:#eceff4;border-radius:3px;overflow:hidden}
.v1-cont .pista i{display:block;height:100%;background:#1f7a52;border-radius:3px;transition:width .25s}
/* cabecera centrada con globo, como los avisos de la plataforma */
.v1-mcentro{display:flex;flex-direction:column;align-items:center;gap:11px;margin-bottom:12px;padding:0 26px}
.v1-mcentro h3{font-size:19px;font-weight:700;color:#123c8a;letter-spacing:-.2px;text-align:center}
.v1-globo{width:56px;height:56px;border-radius:50%;background:#eaf3f6;color:#2f7f96;
  display:flex;align-items:center;justify-content:center;font-size:24px;flex:0 0 auto}
.v1-globo.ok{background:#fff;border:2.5px solid #2f7f96}
.v1-subt{font-size:13px;font-weight:700;color:#2f7f96;margin:14px 0 6px}
.v1-vinetas{list-style:none;margin:0}
.v1-vinetas li{position:relative;padding-left:15px;font-size:12.5px;line-height:1.5;
  color:#4b5563;margin-bottom:5px}
.v1-vinetas li::before{content:"";position:absolute;left:2px;top:8px;width:4px;height:4px;
  border-radius:50%;background:#a3adbb}
.v1-vinetas b{color:#123c8a;font-weight:600}
/* el rótulo dice una sola vez si el campo es obligatorio, y fuera del marcador */
.v1-campo label em{font-style:normal;font-size:10.5px;font-weight:600;color:#b3423c;margin-left:6px}
.v1-campo label em.v1-opt{color:#a3adbb;font-weight:400}

/* ── landing con chat de IA ──────────────────────────────────────────────
   Idea y dirección visual de Erick (carpeta credibusiness-landing-chat-ia):
   página casi vacía, orbe de cristal, cuadro de chat de vidrio y un destello
   detrás. El visitante pega un RFC y ve un reporte BÁSICO de monitoreo; el
   resto queda velado y es el gancho para crear la cuenta por el registro de
   siempre. El chat responde con textos de ejemplo; no hay IA conectada. */
main[data-pantalla="lia"]{--lmar:#12306b;--lf:#16223a;--lm:#5f6b7e;--ll:rgba(13,27,46,.10);--lg:rgba(255,255,255,.72);
  --lgl:rgba(255,255,255,.92);--la:#00e5a0;--lok:#0e7a55;--lmid:#8a5a00;--lmidb:rgba(242,170,40,.20);
  --lsom:0 18px 50px rgba(13,27,46,.10);
  --lfont:'Geist','Inter',system-ui,sans-serif;--lmono:'Geist Mono',ui-monospace,Menlo,monospace;
  display:block;position:relative;overflow:clip;font-family:var(--lfont);color:var(--lf);
  min-height:calc(100vh - var(--proto));
  background:radial-gradient(520px 300px at 50% 250px,rgba(255,255,255,.9),transparent 75%),linear-gradient(#e7e9f3,#dadfec)}
main[data-pantalla="lia"][hidden]{display:none}
main[data-pantalla="lia"] button{font-family:inherit}
.lia-rayo{position:absolute;left:-10%;right:-10%;top:470px;height:130px;pointer-events:none;transform:rotate(-3deg);transition:opacity .6s}
.lia-rayo::before{content:"";position:absolute;inset:34px 0;filter:blur(12px);
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.95) 16%,rgba(255,255,255,.95) 30%,transparent 54%,transparent 62%,rgba(255,255,255,.95) 84%,transparent 100%)}
.lia-rayo::after{content:"";position:absolute;left:0;right:0;top:58px;height:14px;filter:blur(16px);opacity:.6;
  background:linear-gradient(90deg,transparent,#ffc9e6 14%,#c4d6ff 34%,#bffff0 50%,#fff0b8 66%,#d5cbff 84%,transparent)}
.lia-on .lia-rayo{opacity:.55}
.lia-nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:1080px;margin:0 auto;padding:20px 20px}
.lia-nav .der{display:flex;align-items:center;gap:6px}
.lia-burger{display:none;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--lg);border:1px solid var(--lgl);
  color:var(--lmar);font-size:17px;box-shadow:0 6px 18px rgba(13,27,46,.07)}
.lia-menu{position:absolute;top:calc(100% - 6px);right:20px;left:20px;z-index:20;display:flex;flex-direction:column;gap:8px;padding:12px;
  background:rgba(255,255,255,.96);border:1px solid var(--lgl);border-radius:18px;box-shadow:0 18px 44px rgba(13,27,46,.16);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.lia-menu[hidden]{display:none}
.lia-menu .lia-p{text-align:center;padding:13px 20px;font-size:15.5px}
.lia-p{border:1px solid var(--lgl);background:var(--lg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:999px;padding:10px 20px;font-weight:500;font-size:14.5px;color:var(--lf);line-height:1.2;
  box-shadow:0 6px 18px rgba(13,27,46,.07);white-space:nowrap}
.lia-p:hover{background:#fff}
.lia-p.osc{background:var(--lmar);color:#fff;border-color:transparent;box-shadow:0 8px 22px rgba(18,48,107,.28)}
.lia-p.osc:hover{background:#0c2452}
main[data-pantalla="lia"] :focus-visible{outline:2px solid var(--lmar);outline-offset:2px}
.lia-p.osc:disabled{opacity:.55;cursor:default}
.lia-p.liso{border-color:transparent;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:10px 12px}
.lia-p.liso:hover{background:rgba(255,255,255,.5)}
.lia{position:relative;padding:clamp(28px,4cqw,56px) 0 clamp(48px,6cqw,88px)}
.lia-on .lia{padding-bottom:clamp(32px,4cqw,56px)}
.lia-hero,.lia-teja,.lia-orbe,.lia-hero h1{transition:all .25s ease}
.lia-on .lia-hero{gap:8px;margin-bottom:22px}
.lia-on .lia-teja{margin-bottom:0}
.lia-on .lia-orbe{width:40px;height:40px}
.lia-on .lia-hero h1{font-size:clamp(22px,1.6cqw + 12px,28px)}
.lia-on .lia-hero p{font-size:15px}
.lia-col{max-width:760px;margin:0 auto;padding:0 16px}
.lia-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:34px}
.lia-hero[hidden]{display:none}
/* el orbe es la cara del asistente: va solo, sin caja, con su halo. El
   degradado gira despacio (el brillo se queda quieto, como una esfera que
   rota) y el halo respira. Mientras consulta, gira más rápido. */
@property --lgiro{syntax:"<angle>";inherits:false;initial-value:210deg}
@keyframes liaGiro{to{--lgiro:570deg}}
@keyframes liaHalo{from{transform:scale(.9);opacity:.45}to{transform:scale(1.18);opacity:1}}
.lia-teja{display:grid;place-items:center;margin-bottom:10px;position:relative}
.lia-teja::before{content:"";position:absolute;width:118px;height:118px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(0,229,160,.30) 0%,rgba(255,255,255,.55) 42%,rgba(255,255,255,0) 70%);
  animation:liaHalo 2.6s ease-in-out infinite alternate;will-change:transform,opacity}
.lia-on .lia-teja::before{width:76px;height:76px}
.lia-pensando .lia-teja::before{animation-duration:.9s}
.lia-orbe{width:68px;height:68px;border-radius:50%;position:relative;overflow:hidden;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.95) 0,rgba(255,255,255,0) 30%),
    conic-gradient(from var(--lgiro) at 50% 55%,#00e5a0,#19c6e8,#3b82f6,#1b3a8a,#0d2137,#0b8a8f,#00e5a0);
  box-shadow:0 12px 30px rgba(0,229,160,.3),inset -6px -9px 18px rgba(13,27,46,.35);
  animation:liaFlota 5s ease-in-out infinite,liaGiro 7s linear infinite;will-change:transform}
.lia-pensando .lia-orbe{animation-duration:5s,1.6s}
.lia-orbe::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:.6;
  background:repeating-linear-gradient(35deg,rgba(255,255,255,.16) 0 1px,transparent 1px 7px),repeating-linear-gradient(-35deg,rgba(255,255,255,.11) 0 1px,transparent 1px 7px)}
@keyframes liaFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){.lia-orbe,.lia-teja::before,.lia-m.a.vivo::before,.lia-fila>div{animation:none}}
.lia-hero h1{font-family:var(--lfont);font-size:clamp(30px,3.6cqw + 12px,46px);line-height:1.1;font-weight:600;
  letter-spacing:-.03em;color:var(--lmar);text-wrap:balance}
.lia-hero p{font-size:clamp(15px,.8cqw + 11px,18px);font-weight:500;line-height:1.45;color:var(--lm);max-width:56ch;text-wrap:balance}
.lia-caja{position:relative;background:var(--lg);border:1px solid var(--lgl);border-radius:22px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--lsom);
  padding:18px 18px 58px;transition:border-color .2s,box-shadow .2s,background .2s}
.lia-caja:focus-within{border-color:rgba(18,48,107,.16);background:rgba(255,255,255,.9);
  box-shadow:0 22px 56px rgba(13,27,46,.13),0 0 0 4px rgba(255,255,255,.55)}
main[data-pantalla="lia"] .lia-caja textarea:focus-visible{outline:0}
.lia-caja textarea{display:block;width:100%;border:0;outline:0;resize:none;background:none;
  font:inherit;font-size:16px;line-height:1.5;color:var(--lf)}
.lia-caja textarea::placeholder{color:var(--lm);opacity:.85}
.lia-env[aria-disabled="true"]{opacity:.45;cursor:default}
.lia-env{position:absolute;right:13px;bottom:13px;width:38px;height:38px;border-radius:50%;
  background:var(--la);color:#0d2137;font-size:15px;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,229,160,.45)}
.lia-sin{text-align:center;margin-top:18px;font-size:14px;color:var(--lm)}
.lia-sin[hidden]{display:none}
.lia-sin button{font-weight:500;color:var(--lf);border-bottom:1px solid var(--ll);padding:1px 0}
.lia-sin button:hover{border-bottom-color:var(--lf)}
/* el cuadro fijo del chat: blanco sólido, con borde marcado, y un velo del color
   de la página que lo separa de la conversación que pasa por detrás */
.lia-on .lia-caja{position:sticky;bottom:16px;margin-top:40px;z-index:5;padding:13px 60px 13px 18px;background:#fff;
  border:1px solid rgba(18,48,107,.18);backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 12px 30px rgba(13,27,46,.16),0 0 0 10px rgba(226,230,241,.97),0 -26px 34px 12px rgba(226,230,241,.92)}
.lia-on .lia-caja:focus-within{border-color:rgba(18,48,107,.32);
  box-shadow:0 12px 30px rgba(13,27,46,.18),0 0 0 4px rgba(0,229,160,.18),0 0 0 10px rgba(226,230,241,.97),0 -26px 34px 12px rgba(226,230,241,.92)}
.lia-on .lia-caja textarea{height:24px}
.lia-on .lia-env{right:9px;bottom:6px}
.lia-hilo{display:flex;flex-direction:column;gap:14px}
.lia-hilo[hidden]{display:none}
.lia-m{display:flex;gap:10px;scroll-margin-bottom:170px}
.lia-m.u{justify-content:flex-end}
/* el avatar del chat es el mismo orbe, en chico */
.lia-m.a::before{content:"";width:28px;height:28px;flex:none;margin-top:4px;border-radius:50%;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.95) 0,rgba(255,255,255,0) 32%),
    conic-gradient(from var(--lgiro) at 50% 55%,#00e5a0,#19c6e8,#3b82f6,#1b3a8a,#0d2137,#0b8a8f,#00e5a0);
  box-shadow:0 4px 12px rgba(0,229,160,.3),inset -2px -3px 6px rgba(13,27,46,.35)}
/* sólo el último mensaje del asistente tiene el orbe vivo */
.lia-m.a.vivo::before{animation:liaGiro 7s linear infinite}
.lia-pensando .lia-m.a.vivo::before{animation-duration:1.6s}
/* burbujas: la del visitante es blanca (no se confunde con los botones azules)
   y la del asistente lleva el degradado de su orbe, en tono claro */
.lia-m.u>div{background:#fff;color:var(--lf);border:1px solid rgba(18,48,107,.12);box-shadow:0 6px 18px rgba(13,27,46,.08);
  padding:10px 16px;border-radius:18px 18px 4px 18px;
  max-width:85%;font-weight:500;font-size:15px;overflow-wrap:anywhere}
.lia-m.a>div{color:#0d1b38;border:1px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#00e5a0,#3b82f6 60%,#1b3a8a) border-box;
  padding:12px 16px;border-radius:4px 18px 18px 18px;box-shadow:-8px 10px 26px rgba(0,229,160,.14),8px 12px 28px rgba(59,130,246,.12);
  max-width:calc(100% - 38px);font-size:15px;line-height:1.55;min-width:0}
.lia-m.a>div.liso{background:none;border:0;padding:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;width:calc(100% - 38px)}
.lia-m p+p{margin-top:8px}
.lia-rfc{font-family:var(--lmono);font-size:12.5px;color:var(--lm)}
.lia-m.a>div:not(.liso) .lia-rfc{font-weight:700;font-size:13px;color:#0b6b4f;background:#e3faf1;border:1px solid #b9ecd9;
  border-radius:6px;padding:1px 7px;white-space:nowrap}
.lia-m.a>div:not(.liso) .lia-ch{color:#4a566b}
.lia-ch{font-size:12.5px;line-height:1.45;color:var(--lm)}
.lia-acc{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.lia-scan{display:flex;flex-direction:column;gap:10px;width:520px;max-width:100%}
.lia-lin{display:flex;align-items:center;gap:8px;font-weight:500}
.lia-lin i{color:var(--lok);font-size:12px}
.lia-bar{height:3px;border-radius:99px;background:rgba(13,27,46,.06);overflow:hidden}
.lia-bar i{display:block;height:100%;width:0;background:var(--la);box-shadow:0 0 10px rgba(0,229,160,.7);transition:width .12s linear}
.lia-edos{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:4px}
.lia-edos span{font-family:var(--lmono);font-size:9.5px;text-align:center;padding:5px 0;border-radius:6px;
  border:1px solid var(--ll);color:var(--lm);transition:background .15s,color .15s,border-color .15s}
.lia-edos span.ok{background:rgba(0,229,160,.10);color:var(--lok);border-color:rgba(0,229,160,.28)}
.lia-edos span.hit.ok{background:var(--lmidb);color:var(--lmid);border-color:var(--lmid)}
.lia-tick{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--lm)}
/* reporte básico: la primera página a la vista, el resto velado */
.lia-rep{position:relative;width:min(640px,100%);background-color:#fff;border:1px solid rgba(13,27,46,.08);border-radius:14px;
  box-shadow:var(--lsom);overflow:hidden;
  user-select:none;-webkit-user-select:none}
/* la marca va por encima de todo el reporte, sin estorbar los clics */
.lia-marca{position:absolute;inset:0;z-index:4;pointer-events:none;background-repeat:repeat;background-size:330px 200px}
@media print{.lia-rep{visibility:hidden}}
.lia-rc{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px 20px;
  border-bottom:1px solid var(--ll);flex-wrap:wrap}
.lia-rc small{display:block;font-size:13px;color:var(--lm);margin-bottom:5px}
.lia-rc h3{font-size:18px;line-height:1.25;font-weight:600;letter-spacing:-.01em;color:var(--lmar);margin-bottom:3px;text-wrap:balance}
.lia-riesgo{display:inline-flex;align-items:center;gap:7px;background:var(--lmidb);color:var(--lmid);font-weight:600;
  font-size:12.5px;padding:5px 12px;border-radius:999px;white-space:nowrap}
.lia-riesgo::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.lia-riesgo.bien{background:rgba(0,229,160,.14);color:var(--lok)}
.lia-nums{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:8px 28px;padding:16px 20px;border-bottom:1px solid var(--ll)}
.lia-nums b{display:block;font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.lia-nums span{font-size:13px;color:var(--lm)}
.lia-dat{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;align-items:baseline;padding:13px 20px;
  border-bottom:1px solid var(--ll);font-size:15px}
.lia-dat span{color:var(--lm)}
.lia-dat b{font-weight:500;text-align:right;margin-left:auto}
.lia-dat b.bien{color:var(--lok)}
.lia-dat b.alerta{color:var(--lmid)}
.lia-dat ul{flex-basis:100%;list-style:none;margin:4px 0 0;display:flex;flex-direction:column}
.lia-dat ul li{display:grid;grid-template-columns:104px minmax(0,1fr) 20px;align-items:center;gap:12px;padding:7px 0;border-top:1px solid var(--ll);color:var(--lf)}
.lia-dat ul li i{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--lmid) var(--p),rgba(13,27,46,.07) var(--p))}
.lia-dat ul li span{color:var(--lf)}
.lia-dat ul li b{font-variant-numeric:tabular-nums}
.lia-listas{flex-basis:100%;list-style:none;margin:6px 0 0;padding:0;columns:2;column-gap:20px}
.lia-listas li{position:relative;break-inside:avoid;padding:2px 0 2px 16px;font-size:13px;line-height:1.4;color:var(--lm)}
.lia-listas li::before{content:"";position:absolute;left:1px;top:.68em;width:7px;height:4px;border-left:1.5px solid var(--lok);border-bottom:1.5px solid var(--lok);transform:rotate(-45deg) translateY(-2px)}
.lia-dat em{flex-basis:100%;font-style:normal;display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.lia-dat em i{font-style:normal;font-family:var(--lmono);font-size:11px;background:var(--lmidb);color:var(--lmid);padding:2px 8px;border-radius:5px}
.lia-velo{position:relative}
.lia-velo .borr{filter:blur(6px);opacity:.7;pointer-events:none;padding:16px 20px 20px}
.lia-velo .borr h4{font-size:13px;font-weight:500;color:var(--lm);margin:0 0 6px}
.lia-velo .borr p{font-size:15px;margin:0 0 14px}
.lia-velo .borr p:last-child{margin-bottom:0}
.lia-velo .tapa{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:6px;padding:16px 22px;background:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.82))}
.lia-velo .tapa b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.lia-velo .tapa span{font-size:14px;line-height:1.45;color:var(--lm);max-width:42ch;text-wrap:balance}
.lia-velo .tapa .lia-p{margin-top:8px}
.lia-rp{padding:11px 20px;font-size:12.5px;color:var(--lm);display:flex;justify-content:space-between;
  gap:8px;flex-wrap:wrap;border-top:1px solid var(--ll)}
/* lo que va debajo del chat */
.lia-mas{position:relative}
.lia-mas[hidden]{display:none}
.lia-s{padding:clamp(40px,5cqw,72px) 0}
.lia-s .contenedor{max-width:1040px}
.lia-s h2{font-family:var(--lfont);color:var(--lmar);font-weight:600;letter-spacing:-.025em;line-height:1.15;text-wrap:balance}
/* respaldo: banda marino con logos en movimiento y fila de cifras */
.lia-banda{background:var(--lmar);color:#fff;padding:clamp(40px,5.4cqw,76px) 0 clamp(32px,4.4cqw,60px);overflow:hidden}
.lia-banda .contenedor{max-width:1040px}
.lia-banda h2{font-family:var(--lfont);font-size:clamp(26px,2.6cqw + 12px,46px);font-weight:600;letter-spacing:-.03em;line-height:1.1;
  color:#fff;max-width:24ch;text-wrap:balance}
.lia-banda p{font-size:clamp(15px,.6cqw + 12px,18px);color:#c3cde6;margin:16px 0 22px}
.lia-banda p b{color:#5ff0c0;font-weight:600}
.lia-p.menta{background:var(--la);color:#0d2137;border-color:transparent;font-weight:600;box-shadow:0 8px 22px rgba(0,229,160,.28)}
.lia-p.menta:hover{background:#2bf0b4}
.lia-fila{overflow:hidden;margin-top:12px}
.lia-banda .contenedor+.lia-fila{margin-top:clamp(28px,3.6cqw,48px)}
.lia-fila>div{display:flex;gap:12px;width:max-content;animation:liaFila 60s linear infinite;will-change:transform}
.lia-fila.rev>div{animation-direction:reverse}
.lia-fila:hover>div{animation-play-state:paused}
.lia-fila span{flex:none;width:clamp(132px,14cqw,200px);height:clamp(56px,5.8cqw,78px);border-radius:14px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.06);position:relative;overflow:hidden}
/* logos del sitio, recortados a su contenido y en gris claro (img/logos/).
   Cada uno lleva su alto para que todos pesen lo mismo a la vista. */
.lia-fila img{position:absolute;left:50%;top:50%;width:auto;max-width:76%;transform:translate(-50%,-50%);opacity:.92}
@keyframes liaFila{to{transform:translateX(calc(-50% - 6px))}}
@media (prefers-reduced-motion:reduce){.lia-fila>div{animation:none}}
.lia-cifr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1040px;margin:0 auto;
  padding-top:clamp(34px,4.4cqw,60px);padding-bottom:clamp(34px,4.4cqw,60px)}
.lia-cifr>div{text-align:center;padding:0 clamp(8px,2cqw,28px)}
.lia-cifr>div+div{border-left:1px solid rgba(18,48,107,.18)}
.lia-cifr dt{font-size:clamp(34px,4.4cqw + 12px,72px);font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--lmar);font-variant-numeric:tabular-nums}
.lia-cifr dd{margin:12px auto 0;font-size:clamp(12.5px,.5cqw + 10px,15px);line-height:1.4;color:var(--lm);max-width:22ch;text-wrap:balance}
/* secciones a dos columnas: título a la izquierda, contenido a la derecha */
.lia-dos{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:clamp(24px,5cqw,72px);align-items:start}
.lia-lado h2{font-size:clamp(24px,1.8cqw + 11px,32px);margin-bottom:12px}
.lia-lado p{font-size:16px;line-height:1.55;color:var(--lm);text-wrap:pretty}
.lia-lado a{color:var(--lf);font-weight:500;border-bottom:1px solid var(--ll)}
.lia-lado a:hover{border-bottom-color:var(--lf)}
/* Cómo funciona: tarjetas con una pieza de la interfaz encima (referencia: Calendly) */
.lia-s2cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin-bottom:clamp(22px,3cqw,36px)}
.lia-s2 h2{font-size:clamp(26px,2.2cqw + 11px,40px);max-width:22ch}
.lia-s2cab .lia-p{flex:none}
.lia-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6cqw,20px)}
.lia-cards .vin{height:clamp(160px,15cqw,196px);border-radius:18px;position:relative;overflow:hidden;display:grid;place-items:center;
  padding:16px;background:linear-gradient(160deg,#d3ebf1 0%,#8fc3cf 55%,#2b6f82 100%)}
.lia-cards .vin::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 16px,transparent 16px 40px)}
.lia-cards .pz{position:relative;width:100%;max-width:240px;background:#fff;border-radius:12px;box-shadow:0 12px 28px rgba(13,27,46,.22);
  padding:12px 13px;font-size:12px;line-height:1.35;color:var(--lf)}
.lia-cards>li>p{margin-top:14px;font-size:15px;line-height:1.5;color:var(--lm);text-wrap:pretty}
.lia-cards>li>p b{color:var(--lmar);font-weight:600}
.lia-cards .rfc{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--lmono);font-size:12.5px}
.lia-cards .rfc i{flex:none;width:24px;height:24px;border-radius:50%;background:var(--la);color:#0d2137;display:grid;place-items:center;font-size:10px}
.lia-cards .lia-riesgo{margin-top:9px;font-size:11px;padding:3px 9px}
.lia-cards .reg{background:#eaf5ef;border:1px solid #c3e2d2;border-radius:9px;padding:9px 10px;display:flex;flex-direction:column;gap:3px}
.lia-cards .reg b{color:#1f7a52;font-size:12px;margin-bottom:2px}
.lia-cards .reg b i{margin-right:6px}
.lia-cards .reg span{color:#1c3b2c;font-size:11.5px}
.lia-cards .reg span i{color:#1f7a52;font-size:9px;margin-right:6px}
.lia-cards .alr{display:flex;gap:9px;align-items:flex-start}
.lia-cards .alr u{text-decoration:none;flex:none;width:24px;height:24px;border-radius:7px;background:var(--lmidb);color:var(--lmid);display:grid;place-items:center;font-weight:700}
.lia-cards .alr b{display:block;font-size:12px}
.lia-cards .alr span{color:var(--lm);font-size:11px}
.lia-cards .lin small{display:block;font-size:10.5px;color:var(--lm)}
.lia-cards .lin>b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--lmar);margin:2px 0 8px}
.lia-cards .lin div{display:flex;align-items:center;gap:9px;border-top:1px solid var(--ll);padding-top:8px}
.lia-cards .lin big{font-size:22px;font-weight:600;color:var(--lok);line-height:1}
.lia-cards .lin span{font-size:10.5px;color:var(--lm);line-height:1.3}
.lia-cards .lin em{display:block;font-style:normal;font-weight:600;color:var(--lok);font-size:11.5px}
.lia-mas2{margin-top:clamp(22px,3cqw,34px);border-top:1px solid var(--ll);padding-top:18px;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline}
.lia-mas2 b{font-size:15px;font-weight:600;color:var(--lmar)}
.lia-mas2 ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px;font-size:14.5px;color:var(--lm)}
.lia-mas2 li::before{content:"+";color:var(--lok);font-weight:600;margin-right:6px}
/* sin cuenta contra cuenta gratis (referencia: Framer) */
.lia-s4 h2{font-size:clamp(26px,2.2cqw + 11px,40px);text-align:center;max-width:24ch;margin:0 auto}
.lia-s4sub{text-align:center;font-size:16px;color:var(--lm);margin:10px 0 clamp(24px,3cqw,36px)}
.lia-opc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2cqw,22px);max-width:900px;margin:0 auto}
.lia-op{border-radius:22px;padding:clamp(22px,2.6cqw,32px);display:flex;flex-direction:column;background:#fff;color:var(--lf);
  box-shadow:0 10px 30px rgba(13,27,46,.07)}
.lia-op h3{font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--lmar)}
.lia-op>p{font-size:15px;color:var(--lm);margin:4px 0 18px;padding-bottom:18px;border-bottom:1px solid var(--ll)}
.lia-op ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:12px;flex:1}
.lia-op li{position:relative;padding-left:30px;font-size:15px;line-height:1.45}
/* círculo con palomita dibujada en CSS (no depende de la fuente de iconos) */
.lia-op li::before{content:"";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;background:var(--lmar)}
.lia-op li::after{content:"";position:absolute;left:6px;top:6px;width:7px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.lia-op li.no{color:var(--lm);opacity:.6}
.lia-op li.no::before{background:#a9b3c6}
.lia-op li.no::after{left:5px;top:10px;width:9px;height:0;border-left:0;border-bottom:2px solid #fff;transform:none}
.lia-op .lia-p{align-self:stretch;text-align:center;background:#eef1f8;border-color:transparent;color:var(--lmar);font-weight:600;box-shadow:none}
.lia-op .lia-p:hover{background:#e3e8f4}
.lia-op.top{background:linear-gradient(150deg,#2b6f82 0%,#1d4f86 55%,#12306b 100%);color:#fff;box-shadow:0 18px 44px rgba(18,48,107,.32)}
.lia-op.top h3{color:#fff}
.lia-op.top>p{color:#c3d6e6;border-bottom-color:rgba(255,255,255,.16)}
.lia-op.top li::before{background:var(--la)}
.lia-op.top li::after{border-color:#0d2137}
.lia-op.top .lia-p{background:#fff;color:var(--lmar)}
.lia-op.top .lia-p:hover{background:#eef1f8}
.lia-s4pie{text-align:center;font-size:14px;color:var(--lm);margin-top:22px;text-wrap:balance}
.lia-s4pie a{color:var(--lmar);font-weight:500;border-bottom:1px solid var(--ll);white-space:nowrap}
/* preguntas a la izquierda, cierre a la derecha */
.lia-fin{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,4cqw,56px);align-items:start}
.lia-s5 h2{font-size:clamp(26px,2.2cqw + 11px,40px);margin-bottom:clamp(16px,2cqw,24px)}
.lia-cierre{position:sticky;top:calc(var(--proto) + 24px);background:var(--lmar);color:#fff;border-radius:24px;
  padding:clamp(24px,2.8cqw,36px);display:flex;flex-direction:column;gap:12px;box-shadow:0 18px 44px rgba(18,48,107,.28)}
.lia-cierre h3{font-size:clamp(22px,1.4cqw + 12px,28px);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.lia-cierre p{font-size:15.5px;line-height:1.5;color:#c3cde6;margin-bottom:8px;text-wrap:pretty}
.lia-cierre .lia-p{text-align:center}
.lia-cierre .lia-p.liso{color:#fff}
.lia-cierre .lia-p.liso:hover{background:rgba(255,255,255,.1)}
/* pie */
.lia-pie{background:#0d1b38;color:#aeb9cf;padding:clamp(40px,5cqw,64px) 0 26px;font-size:14.5px}
.lia-pie .contenedor{max-width:1040px}
.lia-pcols{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:28px}
.lia-pie .logo{font-size:24px;cursor:default}
.lia-pie .logo .a{color:#8fb6c3}.lia-pie .logo .b{color:#fff}
.lia-pmarca p{margin:12px 0 18px;line-height:1.5;max-width:26ch}
.lia-pie .redes{display:flex;gap:8px}
.lia-pie .redes a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#fff;font-size:15px}
.lia-pie .redes a:hover{background:rgba(255,255,255,.16)}
.lia-pie h4{font-size:13.5px;font-weight:600;color:#fff;margin-bottom:12px}
.lia-pie p{line-height:1.5;margin-bottom:6px}
.lia-pie ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.lia-pie a{color:#aeb9cf}
.lia-pie a:hover{color:#fff}
.lia-plegal{margin-top:clamp(28px,4cqw,44px);padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;
  gap:10px 24px;flex-wrap:wrap;font-size:13px}
.lia-plegal span:last-child{display:flex;gap:20px;flex-wrap:wrap}
.lia-faq details{border-top:1px solid var(--ll)}
.lia-faq details:last-child{border-bottom:1px solid var(--ll)}
.lia-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:17px 0;font-size:17px;font-weight:500;color:var(--lf)}
.lia-faq summary::-webkit-details-marker{display:none}
.lia-faq summary::after{content:"+";font-size:20px;font-weight:400;color:var(--lm);flex:none;transition:transform .15s}
.lia-faq details[open] summary::after{transform:rotate(45deg)}
.lia-faq p{font-size:15.5px;line-height:1.55;color:var(--lm);padding:0 40px 18px 0;text-wrap:pretty}
@container sitio (max-width:860px){
  .lia-dos{grid-template-columns:1fr}
  .lia-fin{grid-template-columns:1fr}
  .lia-cierre{position:static}
  .lia-pcols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lia-pmarca{grid-column:1/-1}
  .lia-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lia-opc{grid-template-columns:1fr;max-width:520px}
  .lia-op.top{order:-1}
  .lia-nav .der{display:none}
  .lia-burger{display:grid}
}
@container sitio (max-width:520px){
  .lia-pcols{grid-template-columns:1fr}
  /* en celular las tarjetas se deslizan de lado, una a la vez */
  .lia-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:-20px;padding-right:20px;scrollbar-width:none}
  .lia-cards::-webkit-scrollbar{display:none}
  .lia-cards>li{flex:0 0 78%;scroll-snap-align:start}
}
@container sitio (max-width:480px){
  .lia-listas{columns:1}
      .lia-faq summary{font-size:16px}
  .lia-faq p{padding-right:0}
}
}
@container sitio (max-width:480px){.lia-on .lia-caja textarea{font-size:15px}}
body.lia-chico.en-lia:has(.lia-on) .wasap{bottom:92px}

/* ── bienvenida: monitorea a tu primer cliente ─────────────────────────
   Un solo modal entre "Tu cuenta está lista" y el alta de monitoreo. Dos
   pasos, lo que incluye la prueba y una sola acción que destaca. */
.v1-bienv{max-width:440px;padding:32px 28px 20px;text-align:center}
.v1-bico{position:relative;width:64px;height:64px;margin:0 auto 16px;border-radius:50%;
  background:#eaf3f6;color:#123c8a;display:flex;align-items:center;justify-content:center;font-size:29px}
.v1-bico .chk{position:absolute;top:50%;left:50%;transform:translate(-50%,-46%);font-size:12px;color:#fff}
.v1-bienv h3{font-size:20px;font-weight:700;color:#123c8a;letter-spacing:-.3px;line-height:1.3;
  margin-bottom:8px;text-wrap:balance}
.v1-bienv .lead{font-size:14px;line-height:1.55;color:#4b5563;max-width:344px;margin:0 auto 20px}
.v1-bpasos{list-style:none;margin:0 0 16px;text-align:left;border:1px solid #e4e8ef;border-radius:10px;
  padding:3px 14px;background:#fafbfd}
.v1-bpasos .v1-paso{align-items:center;padding:11px 0}
.v1-bpasos .v1-paso .n{margin-top:0}
.v1-bpasos .v1-paso>div>b{font-size:13.5px;font-weight:500;color:#2b3a4d}
.v1-etq{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;
  background:#eaf5ef;border:1px solid #c3e2d2;color:#1f7a52;font-size:12.5px;font-weight:600;margin-bottom:22px}
.v1-bienv .lead b{color:#123c8a;font-weight:600;display:inline-block}
.v1-bpara{text-align:left;border:1px solid #e4e8ef;border-radius:10px;background:#fafbfd;padding:13px 16px;
  font-size:13.5px;line-height:1.5;color:#2b3a4d;margin:0 0 22px;text-wrap:pretty}
.v1-bpara b{font-weight:600;color:#123c8a}
.v1-bnota{font-size:12px;color:#6b7280;margin:12px 0 0}
/* el modal de regreso lleva más texto: usa todo el ancho en vez de una columna angosta */
/* centrado en la pantalla; con margin:auto sigue pudiendo hacer scroll si no cabe */
.v1-rec{max-width:460px;text-align:left;padding:28px 28px 20px;margin:auto}
/* un poco arriba del centro: más aire abajo que arriba */
#v1VeloRec,#v1VeloBienv{padding-bottom:18vh}
.v1-rec h3,.v1-rec .lead{text-align:center}
.v1-rec .lead{max-width:none;margin:0 0 16px;text-wrap:balance}
.v1-rec .lead b{display:inline}
.v1-rregalo{background:#eaf5ef;border:1px solid #c3e2d2;border-radius:10px;padding:14px 16px;margin:0 0 16px;
  display:flex;flex-direction:column;gap:7px}
.v1-rregalo>b{font-size:15px;font-weight:700;color:#1f7a52;margin-bottom:3px}
.v1-rregalo>b i{margin-right:8px}
.v1-rregalo>span{font-size:14px;font-weight:600;color:#1c3b2c}
.v1-rregalo>span i{color:#1f7a52;font-size:12px;margin-right:9px}
.v1-rec .v1-bpara{margin-bottom:18px}
/* felicitación al usar el último monitoreo gratis */
.v1-feli{padding:8px 4px 0}
.v1-feli h3{font-size:20px;font-weight:700;color:#123c8a;letter-spacing:-.3px;line-height:1.3;text-align:center;
  margin:0 22px 8px;text-wrap:balance}
.v1-feli .lead{font-size:14px;line-height:1.55;color:#4b5563;text-align:center;margin:0 0 16px;text-wrap:balance}
.v1-feli .v1-rregalo{margin-bottom:18px}
.v1-rregalo>p{font-size:13.5px;line-height:1.5;color:#1c3b2c;text-wrap:pretty}
.v1-rec .v1-bnota{text-align:center}
.v1-bacc{display:flex;flex-direction:column;gap:4px}
.v1-bacc button{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;border-radius:8px}
.v1-bacc .lleno{background:#123c8a;color:#fff;font-size:14.5px;font-weight:600;padding:12px 20px}
.v1-bacc .lleno:hover{background:#0e3072}
.v1-bacc .txt{font-size:13.5px;font-weight:600;color:#6b7280;padding:10px}
.v1-bacc .txt:hover{color:#123c8a}

/* ── aviso de homónimos, estilizado ── el texto es el de la plataforma; lo
   que cambia es que los tres apartados se leen como bloques y no como un muro */
.v1-hlead{font-size:13.5px;line-height:1.55;color:#4b5563;text-align:center;margin:0 6px 16px}
.v1-hlead b{color:#123c8a;font-weight:600}
.v1-hbloq{border:1px solid #e4e8ef;border-radius:10px;background:#fafbfd}
.v1-hb{padding:12px 14px}
.v1-hb+.v1-hb{border-top:1px solid #e9edf2}
.v1-hb .v1-subt{display:flex;align-items:center;gap:8px;margin:0 0 7px}
.v1-hb .v1-subt i{font-size:12px;width:14px;text-align:center}
.v1-hb .v1-vinetas li:last-child{margin-bottom:0}
.v1-hnota{font-size:13px;line-height:1.55;color:#4b5563}
.v1-duda{font-size:12px;color:#8b95a3;text-align:center;margin-top:10px}
.v1-duda a{color:#2f7f96;font-weight:600;text-decoration:underline}
.v1-macc .ancho{flex:1;display:flex;justify-content:center;padding:11px 20px}

/* Modal de bienvenida: los modales del alta salen como en la plataforma de
   hoy, sin nada de la ruta rediseñada (contador, saldo, premio del reporte) */
.v1.normal .solo-ruta{display:none!important}
.v1.normal [data-r="cumplida"] .v1-mbaj2{font-weight:400;color:#4b5563;margin:0 14px 6px}

/* ── Monitoreo de clientes ─────────────────────────────────────────────
   Ocupa el lugar de las columnas central y derecha; el menú se queda. */
.v1-cuerpo.en-mon>.v1-centro,.v1-cuerpo.en-mon>.v1-der{display:none}
.v1-monp{grid-column:2/-1;min-width:0}
.v1-monp[hidden]{display:none}
.v1-monp h1{font-size:22px;font-weight:700;color:#123c8a;letter-spacing:-.3px;line-height:1.3}
.v1-monp .desc{font-size:13px;line-height:1.55;color:#6b7280;max-width:780px;margin:6px 0 16px}
.v1-monp .desc b{color:#374151;font-weight:600}
.v1-mfich{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;margin-bottom:14px}
.v1-mcard{border:1px solid #e0e5ec;border-radius:10px;padding:13px 16px;background:#fff}
.v1-mcard h4{font-size:13.5px;font-weight:700;color:#2f7f96;padding-bottom:9px;margin-bottom:6px;
  border-bottom:1px solid #e4ecf0}
.v1-mcard div{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:#4b5563;padding:4px 0}
.v1-mcard div b{color:#123c8a;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.v1-mbtns{display:flex;flex-direction:column;justify-content:center;gap:8px}
.v1-mbtns button{display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;font-weight:600;
  padding:10px 16px;border-radius:8px;white-space:nowrap}
.v1-mbtns .p{background:#123c8a;color:#fff}
.v1-mbtns .s{background:#eaf3f6;color:#1d5e73;border:1px solid #bcd8e0}
.v1-mfil{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.v1-mfil button{font-size:12px;color:#2f7f96;background:#fff;border:1px solid #c9d9e0;border-radius:7px;padding:6px 12px}
.v1-mfil button:first-child{color:#123c8a;border-color:#123c8a}
.v1-mtabla{border:1px solid #e0e5ec;border-radius:10px;background:#fff;overflow-x:auto}
.v1-mtabla table{width:100%;min-width:720px;border-collapse:collapse}
.v1-mtabla th{background:#f3f6fa;font-size:11.5px;font-weight:600;color:#123c8a;text-align:left;
  padding:10px 12px;white-space:nowrap}
.v1-mtabla td{font-size:12.5px;color:#374151;padding:11px 12px;border-top:1px solid #eef1f5;white-space:nowrap}
.v1-mtabla td.emp{font-weight:600;color:#123c8a;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.v1-mtabla td.rfc{font-variant-numeric:tabular-nums}
.v1-mtabla .pdf{color:#2f7f96;font-size:16px}
.v1-est{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.4px;padding:3px 9px;border-radius:999px}
.v1-est.mon{background:#e6eefb;color:#123c8a}
.v1-est.pre{background:#fdf3d6;color:#8a6410}
.v1-mtabla td.v1-mvacio{white-space:normal;text-align:center;padding:34px 20px}
.v1-mvacio i{display:block;font-size:22px;color:#9fb8c4;margin-bottom:10px}
.v1-mvacio p{font-size:13px;color:#6b7280;margin-bottom:14px}
.v1-mvacio button{font-size:13px;font-weight:600;color:#fff;background:#123c8a;border-radius:8px;padding:9px 16px}
.v1-lista a.on{background:#eef3fb;font-weight:600}
@container sitio (max-width:1120px){
  .v1-mfich{grid-template-columns:1fr 1fr}
  .v1-mbtns{grid-column:1/-1;flex-direction:row;justify-content:flex-start}
}
@container sitio (max-width:760px){
  .v1-monp{grid-column:1/-1}
  .v1-mfich{grid-template-columns:1fr}
}

/* ── fase 2 ─────────────────────────────────────────────────────────── */
.v1-f2{display:none}
.v1.fase2 .v1-f2,.v1.normal .v1-f2{display:block;width:100%;max-width:1272px;margin:0 auto;padding:14px 18px 0}
.v1.normal .v1-f2barra{display:none}
.v1.fase2.mon-activa .v1-f2,.v1.normal.mon-activa .v1-f2{display:none}
.v1.fase2 .v1-izq>.v1-perfil,.v1.fase2 .v1-centro>.v1-portada,
.v1.normal .v1-izq>.v1-perfil,.v1.normal .v1-centro>.v1-portada{display:none}
.v1.fase2 .solo-ruta{display:none!important}
.v1-f2fila{display:grid;grid-template-columns:340px minmax(0,1fr);gap:14px;align-items:stretch}
.v1-f2perfil{position:relative;border:1px solid #e0e5ec;border-radius:10px;padding:16px;background:#fff}
.v1-f2perfil .v1-f2esc{position:absolute;top:14px;right:14px;color:#9aa5b3;font-size:17px;padding:2px;border-radius:6px;--fondo:#fff}
.v1-f2perfil .v1-f2esc:hover{color:#123c8a}
.v1-f2cab{display:flex;gap:12px;align-items:center;padding-right:28px;margin-bottom:14px}
.v1-f2ini{width:52px;height:52px;border-radius:10px;background:#6f9aa8;color:#fff;font-weight:700;font-size:16px;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.v1-f2cab b{display:block;font-size:15px;font-weight:700;color:#123c8a;line-height:1.25}
.v1-f2meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:5px}
.v1-f2meta .rol{font-size:11.5px;color:#6b7280}
.v1-f2meta .rol::before{content:"•";margin-right:6px;color:#1f7a52}
.v1-f2tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:14px;border-top:1px solid #eceff4}
.v1-f2tile{display:flex;align-items:center;gap:9px;border:1px solid #e4e8ef;border-radius:9px;padding:9px 10px;min-width:0}
.v1-f2tile>i{width:30px;height:30px;border-radius:8px;background:#eef2f7;color:#3f6f86;display:flex;align-items:center;
  justify-content:center;font-size:13px;flex:0 0 auto}
.v1-f2tile>div{min-width:0}
.v1-f2tile b{display:block;font-size:11px;font-weight:600;color:#6b7280;line-height:1.25}
.v1-f2tile span{font-size:13px;font-weight:700;color:#374151}
.v1-f2portada{height:auto;min-height:300px;background:linear-gradient(160deg,#1c2533 0%,#2a3444 60%,#1a2230 100%)}
/* la barra: el mismo lugar que hoy, en el verde azulado de la marca para no
   repetir el marino del header. Una sola fila: título, pasos y botón. */
.v1-f2barra{margin-top:14px;background:#2b6f82;color:#fff;border-radius:12px;padding:20px 24px;
  display:flex;align-items:center;gap:32px;box-shadow:0 6px 18px rgba(29,85,102,.16)}
.v1-f2barra[hidden]{display:none}
.v1-f2barra .c{display:none}
.f2b-tit{flex:0 0 auto}
.f2b-tit b{display:block;font-size:18px;font-weight:700;letter-spacing:-.2px;line-height:1.3}
.f2b-tit span{font-size:13px;color:rgba(255,255,255,.75)}
.f2b-pasos{list-style:none;margin:0;padding:0;flex:1;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.f2b-pasos li{font-size:14px;color:rgba(255,255,255,.62);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f2b-pasos li>i{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.26);margin-bottom:11px}
.f2b-pasos li>span{display:flex;align-items:flex-start;gap:8px;min-width:0}
.f2b-pasos .tx{min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:22px}
.f2b-pasos .tx small{display:block;font-size:12px;font-weight:400;line-height:16px;color:rgba(255,255,255,.72)}
.f2b-pasos .mk{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;border:1.5px solid rgba(255,255,255,.45)}
.f2b-pasos .mk em{font-size:11px;color:#1d5566}
.f2b-pasos li.ok .mk{background:#b6f0d2;border-color:#b6f0d2}
.f2b-pasos li.hoy .mk{background:#fff;border-color:#fff;color:#1d5566}
.f2b-pasos li.ok{color:#fff}
.f2b-pasos li.ok>i{background:#b6f0d2}
.f2b-pasos li.hoy{color:#fff;font-weight:600}
.f2b-pasos li.hoy>i{background:linear-gradient(90deg,#fff 0 35%,rgba(255,255,255,.26) 35%)}
.f2b-pasos li>span>em{font-style:normal;font-weight:400;color:rgba(255,255,255,.7)}
.f2b-cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;background:#fff;color:#1d5566;
  font-size:14.5px;font-weight:700;padding:12px 20px;border-radius:9px;white-space:nowrap;
  box-shadow:0 3px 10px rgba(8,40,52,.18)}
.f2b-cta:hover{background:#e8f3f6}
@container sitio (max-width:1180px){
  .v1-f2barra .l{display:none}
  .v1-f2barra .c{display:inline}
}
@container sitio (max-width:900px){
  .v1-f2fila{grid-template-columns:minmax(0,1fr)}
  .v1-f2barra{flex-wrap:wrap;gap:12px 18px}
  .f2b-cta{margin-left:auto}
  .f2b-pasos{flex:1 0 100%;order:3}
}

/* ── fases 1 y 2 · header original ───────────────────────────────────── */
.v1-og{display:none;position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid #eef0f4;
  box-shadow:0 2px 10px rgba(16,24,40,.05)}
.v1.normal .v1-og,.v1.fase2 .v1-og{display:block}
.v1.normal .v1-bar,.v1.fase2 .v1-bar,.v1.normal .v1-sos-caja,.v1.fase2 .v1-sos-caja{display:none}
.v1-og-in{max-width:1272px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;gap:14px}
.v1-og-logo{position:relative;font-family:var(--serif);font-size:31px;font-weight:700;letter-spacing:-.6px;
  line-height:1;cursor:pointer;flex:0 0 auto}
.v1-og-logo .a{color:#3f8a9c}.v1-og-logo .b{color:#1b2a5e}
.v1-og-logo i{position:absolute;left:64%;top:-12px;font-size:17px;color:#3aa04a}
.v1-og-wa{width:40px;height:40px;border-radius:50%;background:#e8f6ec;color:#25a244;display:flex;align-items:center;
  justify-content:center;font-size:21px;flex:0 0 auto}
.v1-og-buscar{flex:1;min-width:0;max-width:440px;display:flex;align-items:center;gap:10px;border:1px solid #d8dde5;
  border-radius:8px;padding:9px 13px;color:#6f8faf;font-size:17px}
.v1-og-buscar input{flex:1;min-width:0;border:none;outline:none;font:inherit;font-size:15px;color:#333}
.v1-og-acc{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:0 0 auto}
.v1-og-acc .fila{display:flex;align-items:center;gap:8px}
.v1-og-acc button{position:relative}
.v1-og .sq{width:40px;height:40px;border-radius:9px;border:1px solid #dfe4ec;background:#fff;color:#123c8a;font-size:16px;
  display:flex;align-items:center;justify-content:center}
.v1-og .inv{height:40px;padding:0 14px;border-radius:9px;background:#eef3f8;color:#123c8a;font-size:15px;font-weight:600;
  display:flex;align-items:center;gap:8px}
.v1-og .grp{display:flex;align-items:center;gap:2px;background:#eef3f8;border-radius:9px;padding:2px}
.v1-og .grp button{width:36px;height:36px;border-radius:7px;color:#123c8a;font-size:16px;display:flex;align-items:center;justify-content:center}
.v1-og .grp button:hover,.v1-og .sq:hover{background:#e3eaf3}
.v1-og .bdg{position:absolute;top:3px;right:3px;min-width:15px;height:15px;border-radius:8px;background:#c0392b;color:#fff;
  font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.v1-og .sep{width:1px;height:26px;background:#dfe4ec;margin:0 2px}
.v1-og .esc,.v1-og .rep,.v1-og .inv{white-space:nowrap}
.v1-og .esc{height:40px;padding:0 16px;border-radius:7px;border:1.5px solid #123c8a;background:#fff;color:#123c8a;
  font-size:14.5px;font-weight:700;box-shadow:0 2px 6px rgba(18,60,138,.12)}
.v1-og .rep{height:40px;padding:0 20px;border-radius:7px;background:#123c8a;color:#fff;font-size:14.5px;font-weight:700;
  box-shadow:0 3px 8px rgba(18,60,138,.28)}
.v1-og .cerrado{overflow:visible}
/* cerrado = colores apagados, no opacidad: con opacidad el candado también se
   deslava, y el recorte del botón se lo comía */
.v1-og .sq.cerrado,.v1-og .grp button.cerrado{color:#a9b6cc}
.v1-og .inv.cerrado{color:#8e9dbb}
.v1-og .esc.cerrado{color:#8e9dbb;border-color:#b3c0d6;box-shadow:none}
.v1-og .rep.cerrado{background:#8e9dbb;box-shadow:none}
.v1-og .v1-og-buscar.cerrado{background:#f5f7fa}
.v1-og .v1-og-buscar.cerrado input::placeholder{color:#a3adbb}
/* el buscador cerrado lleva el candado en línea, al final del campo */
.v1-og-buscar.cerrado input{pointer-events:none}
.v1-og .v1-og-buscar .v1-lock{position:static;width:auto;height:auto;background:none;border:0;color:#8b95a3;font-size:12px}
.v1-og .v1-lock{position:absolute;right:-5px;bottom:-5px;margin:0;font-size:8.5px;width:16px;height:16px;border-radius:50%;
  background:#123c8a;color:#fff;border:1.5px solid #fff;display:flex;align-items:center;justify-content:center}
@container sitio (max-width:1120px){
  .v1-og .inv span,.v1-og-buscar{max-width:none}
  .v1-og-in{flex-wrap:wrap}
  .v1-og-buscar{order:3;flex:1 0 100%}
}
/* fase 1: el alta termina con un botón hacia el inicio */
.v1 .solo-f1{display:none!important}
.v1.normal .solo-f1{display:flex!important}
/* fases 1 y 2: el asistente del reporte va como hoy, sin guía ni riel */
.v1.fase2 .v1-riel,.v1.fase2 .v1-barra,.v1.normal .v1-riel,.v1.normal .v1-barra{display:none}
/* fase 2: la columna derecha, cerrada en bloque hasta el reporte */
.v1-der{position:relative}
.v1-der-cand{display:none}
.v1.bloq-der .v1-der-cand{display:flex;position:absolute;inset:-4px;z-index:3;align-items:flex-start;justify-content:center;
  padding-top:70px;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  border-radius:10px;cursor:pointer}
.v1-der-cand span{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #d8dfe8;border-radius:999px;
  padding:8px 14px;font-size:12.5px;font-weight:600;color:#123c8a;box-shadow:0 4px 14px rgba(16,24,40,.1)}
/* paywall: encima de la página, que queda desenfocada detrás */
.v1-cuerpo.en-pay>#v1MonPag,.v1-cuerpo.en-pay>#v1Pay{grid-row:1;grid-column:2/-1}
.v1-cuerpo.en-pay>#v1MonPag{filter:blur(6px);opacity:.75;pointer-events:none;user-select:none}
.v1-cuerpo.en-pay>#v1Pay{position:relative;z-index:2;align-self:start;padding-top:70px}
.v1-paycaja{box-shadow:0 18px 50px rgba(16,24,40,.16)}
.v1-payseccion{display:block;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:#2b6f82;margin-bottom:6px}
.v1-paycaja{max-width:520px;margin:0 auto;text-align:center;border:1px solid #e0e5ec;border-radius:14px;
  padding:34px 30px 28px;background:#fff}
.v1-paycaja .ico{width:56px;height:56px;border-radius:50%;background:#eaf3f6;color:#2b6f82;display:flex;align-items:center;
  justify-content:center;font-size:24px;margin:0 auto 14px}
.v1-paycaja h2{font-size:20px;font-weight:700;color:#123c8a;margin-bottom:8px}
.v1-paycaja p{font-size:14px;line-height:1.6;color:#4b5563;margin-bottom:20px}
.v1-paycaja .lleno{background:#123c8a;color:#fff;font-size:14.5px;font-weight:700;padding:11px 26px;border-radius:8px}
.v1-paycaja .mini{font-size:12.5px;color:#6b7280;margin:18px 0 0}
.v1-paycaja .mini a{color:#2b6f82;font-weight:600;text-decoration:underline;cursor:pointer}

/* ── herramientas cerradas (fase 2) ── */
.v1.bloq-der .v1-der .v1-h{cursor:pointer}
.v1.bloq-der .v1-der .v1-h b,.v1.bloq-der .v1-der .v1-h span{color:#8b95a3}
.v1.bloq-der .v1-der .v1-h>i:first-child{color:#c3cbd6!important}
.v1.bloq-der .v1-der .v1-h .ch{--fa:"\f023"}
.v1.bloq-der .v1-der .v1-h .ch::before{content:"\f023"}
.v1.bloq-der .v1-der .v1-h .ch{color:#123c8a;font-size:11px}
.v1.bloq-der .v1-der .v1-aliado{opacity:.5}

/* ── Monitoreo, como la plataforma de hoy ── */
.v1-mr-cab{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.v1-mr-atras{width:38px;height:38px;border-radius:50%;background:#3f8a9c;color:#fff;font-size:17px;
  display:flex;align-items:center;justify-content:center}
.v1-mr-ico{font-size:24px;color:#6f9aa8}
.v1-mr-cab h1{font-size:25px;font-weight:700;color:#123c8a;letter-spacing:-.3px}
.v1-mr-tabs{display:flex;justify-content:space-around;margin-bottom:14px}
.v1-mr-tabs a{font-size:18px;font-weight:700;color:#123c8a;padding:4px 36px 7px;cursor:pointer;border-bottom:1px solid transparent}
.v1-mr-tabs a.on{border-bottom-color:#123c8a}
.v1-mr-tit{display:inline-block;font-size:24px;font-weight:600;color:#5b93a6;padding-bottom:8px;margin-bottom:22px;
  border-bottom:2px solid #5b93a6;min-width:280px}
.v1-mr .desc{font-size:13.5px;line-height:1.45;color:#374151;max-width:none;margin:0 0 30px}
.v1-mr .desc b{font-weight:700;color:#1f2937}
.v1-mr-fila{display:flex;align-items:center;gap:24px;margin-bottom:22px;flex-wrap:wrap}
.v1-mr-card{border:1px solid #123c8a;border-radius:6px;padding:16px 16px 12px}
.v1-mr-card h4{font-size:15px;font-weight:600;color:#5b93a6;padding-bottom:10px;margin-bottom:10px;border-bottom:2px solid #5b93a6}
.v1-mr-card p{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:#123c8a;padding:6px 0}
.v1-mr-card p i{color:#7ea3b3;font-size:15px}
.v1-mr-card p b{font-weight:600;margin-left:-4px}
.v1-mr-btns{margin-left:auto;display:flex;gap:16px}
.v1-mr-btns button{font-size:13px;color:#fff;padding:13px 20px;border-radius:9px;white-space:nowrap}
.v1-mr-btns .p{background:#123c8a}.v1-mr-btns .s{background:#6f9aa8}
.v1-mr-fil{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:22px}
.v1-mr-fil button{font-size:13px;color:#5b93a6;border:1px solid #5b93a6;border-radius:6px;padding:9px 16px;background:#fff}
.v1-mr-fil button:first-child{color:#123c8a;border-color:#123c8a}
.v1-mr-tabla{border-radius:12px;box-shadow:0 4px 14px rgba(16,24,40,.1);background:#fff;overflow-x:auto}
.v1-mr-tabla table{width:100%;min-width:820px;border-collapse:collapse}
.v1-mr-tabla th{background:#eef2f7;font-size:14px;font-weight:700;color:#123c8a;padding:16px 12px;text-align:left}
.v1-mr-tabla td{font-size:13.5px;color:#111827;padding:18px 12px;border-top:1px solid #eef1f5;white-space:nowrap}
.v1-mr-tabla .sel{display:flex;align-items:center;gap:8px;color:#123c8a;font-size:19px}
.v1-mr-tabla td.sel i{font-size:17px;color:#123c8a}
.v1-mr-tabla .punto{width:8px;height:8px;border-radius:50%;background:#6f9aa8;margin-left:28px}
.v1-mr-tabla td.emp{font-weight:600;color:#123c8a;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.v1-mr-tabla td.ag{color:#5b93a6}
.v1-mr-tabla .pdf{color:#6f9aa8;font-size:22px}
.v1-mr-tabla td.v1-mvacio{white-space:normal;text-align:center;padding:34px 20px}
.v1-mr .v1-est{font-size:11px;padding:4px 16px}

/* ── Evaluación Crediticia del invitado ─────────────────────────────── */
.v1-cuerpo.en-mon>#v1Eval{grid-column:2/-1}
.ev-marco{background:#dfe7f0;border-radius:4px;padding:22px 24px 30px}
.ev-cab{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ev-atras{width:32px;height:32px;border-radius:50%;background:#fff;color:#123c8a;font-size:14px;display:flex;align-items:center;justify-content:center}
.ev-cab h1{font-size:21px;font-weight:700;color:#123c8a}
/* el reloj: mismo degradado que el banner de la prueba, para que se lea como
   algo de CrediBusiness y no como una alerta del sistema */
.ev-reloj{display:flex;align-items:center;gap:20px;color:#fff;border-radius:14px;padding:14px 18px 14px 14px;margin-bottom:16px;
  background:linear-gradient(90deg,#0d2f6e 0%,#123c8a 45%,#2b6f82 100%);box-shadow:0 8px 22px rgba(13,47,110,.2)}
.ev-reloj{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:16px;row-gap:14px;padding:16px 20px}
/* el mensaje manda; los números de los pasos dicen en cuál va */
.ev-reloj .ev-rtxt{font-size:14.5px;line-height:1.4;color:#d6e3f2;margin:0;text-wrap:balance}
.ev-rtxt b{color:#fff;font-weight:700}
/* el reloj entra como pastilla al enviar la primera referencia */
.ev-rt{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
  border-radius:999px;padding:6px 14px 6px 12px;white-space:nowrap}
.ev-rt[hidden]{display:none}
.ev-rt i{font-size:14px;opacity:.9}
.ev-rt b{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.ev-rbtn{font-size:13px;font-weight:700;color:#123c8a;background:#fff;border-radius:999px;padding:8px 16px;white-space:nowrap}
.ev-rbtn[hidden]{display:none}
/* pasos numerados a todo lo ancho: palomita en los hechos, blanco el actual */
.ev-rpasos{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:0;padding:0}
.ev-rpasos[hidden]{display:none}
.ev-rpasos li{display:flex;align-items:center;gap:8px;font-size:12px;color:#b9cbe2;white-space:nowrap;min-width:0}
.ev-rpasos li:not(:last-child)::after{content:"";flex:1;min-width:12px;height:2px;border-radius:1px;background:rgba(255,255,255,.25);margin-right:10px}
.ev-rpasos li.ok::after{background:#b6f0d2}
.ev-rpasos .n{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.ev-rpasos li.ok .n{background:#b6f0d2;border-color:#b6f0d2;color:#0d2f6e}
.ev-rpasos li.hoy{color:#fff;font-weight:600}
.ev-rpasos li.hoy .n{background:#fff;border-color:#fff;color:#123c8a}
.ev-reloj.ultimas{background:linear-gradient(90deg,#0d2f6e 0%,#6e2c3f 50%,#c0621d 100%)}
.ev-reloj.gracia{background:linear-gradient(90deg,#0f3b47 0%,#1d5566 45%,#2b8aa0 100%)}
.ev-reloj.fin{background:linear-gradient(90deg,#3b1d24 0%,#7a2630 100%)}
#v1Eval.vencido .ev-panel{opacity:.5;pointer-events:none;user-select:none}
#v1Eval.vencido .ev-tabs{pointer-events:none}
.ev-tabs{display:flex;gap:28px;border-bottom:1px solid #c9d5e3;margin-bottom:18px}
.ev-tabs a{font-size:14.5px;color:#8a9bb0;padding:6px 0 9px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.ev-tabs a.on{color:#123c8a;font-weight:700;border-bottom-color:#123c8a}
.ev-panel[hidden]{display:none}
/* estilo viejo: tarjeta blanca, rótulos marino en negrita, títulos agua */
.ev-viejo{background:#fff;border-radius:10px;padding:22px 26px 10px}
.ev-oblig{font-size:13px;font-style:italic;font-weight:600;color:#5b93a6;margin-bottom:14px}
.ev-viejo h3{font-size:17px;font-weight:700;color:#5b93a6;margin:26px 0 12px}
.ev-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 30px}
.ev-grid label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:700;color:#123c8a}
.ev-grid input,.ev-grid select{font:inherit;font-weight:400;font-size:14px;color:#333;border:1px solid #d6dde6;border-radius:6px;
  padding:10px 12px;background:#fff;min-width:0}
.ev-grid .ev-pais{border-color:#123c8a}
.ev-par{display:flex;gap:10px}
.ev-par input{flex:1}
.ev-par select{flex:0 0 90px;background:#6f9aa8;color:#fff;border:none}
.ev-calc{font-weight:600;color:#123c8a;padding-top:10px}
.ev-calc b{color:#6b7280}
.ev-radios{display:flex;flex-direction:column;gap:5px;font-size:13.5px}
.ev-nota{font-size:14px;color:#1f2937;margin-bottom:12px}
.ev-mas{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:700;color:#123c8a;margin:14px 0 0 60px}
.ev-mas i{font-size:26px}
.ev-fila-b{display:flex;gap:16px;align-items:center}
.ev-fila-b .ev-grid{flex:1}
.ev-bote{color:#e0705a;font-size:20px}
.ev-pie{display:flex;justify-content:center;margin:26px -26px 0;padding:22px;border-top:1px solid #eef1f5}
.ev-guardar{background:#123c8a;color:#fff;font-size:14px;font-weight:700;padding:11px 56px;border-radius:7px}
/* estilo nuevo: tarjetas redondeadas, rótulos en versalitas */
.ev-nuevo{display:flex;flex-direction:column;gap:14px}
.evn-top{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12px;color:#6b7280}
.evn-top[hidden]{display:none}
.evn-eti{font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;background:#eef1f5;color:#6b7280;white-space:nowrap;margin-left:auto}
.evn-eti.amb{background:#fdf1d8;color:#9a6a07;border:1px solid #f0d9a6;margin-left:0}
.evn-eti.ok{background:#e8f6ee;color:#1f7a52}
.evn-caja{background:#fff;border:1px solid #e3e8ef;border-radius:14px;padding:16px}
.evn-rot{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#123c8a;margin-bottom:12px}
.evn-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.evn-seg div{border:1px solid #e3e8ef;border-radius:12px;padding:12px;display:grid;grid-template-columns:30px 1fr;column-gap:10px;font-size:11.5px;color:#6b7280}
.evn-seg i{grid-row:span 3;width:30px;height:30px;border-radius:8px;background:#eef2fb;color:#123c8a;display:flex;align-items:center;justify-content:center}
.evn-seg b{font-size:13.5px;color:#123c8a}
.evn-seg em{font-style:normal}
.evn-step{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(9,1fr);gap:4px;text-align:center;font-size:11px;font-weight:700;color:#1f2937}
.evn-step b{display:flex;width:28px;height:28px;margin:0 auto 6px;border-radius:50%;background:#eef2fb;color:#6b7280;align-items:center;justify-content:center;font-size:11px}
.evn-step li.ok b{background:#e8f6ee;color:#1f7a52}
.evn-step li.hoy b{background:#123c8a;color:#fff}
.evn-step em{display:block;font-style:normal;font-weight:400;color:#8b95a3;margin-top:3px}
.evn-dos{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:14px;align-items:start}
.evn-izq{display:flex;flex-direction:column;gap:14px;min-width:0}
.evn-der{display:flex;flex-direction:column;gap:14px}
.evn-bcab{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.evn-bcab .n{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:#eef2fb;color:#123c8a;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.evn-bcab .n.ia{background:#1d4f86;color:#fff}
.evn-bcab b{display:block;font-size:14px;color:#123c8a}
.evn-bcab em{display:block;font-style:normal;font-size:12px;color:#6b7280;margin-top:2px;line-height:1.45}
.evn-cfg{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.evn-cfg label{border:1px solid #e3e8ef;border-radius:10px;padding:10px;font-size:12px;font-weight:700;color:#123c8a;display:flex;flex-direction:column;gap:8px}
.evn-cfg select{font:inherit;font-weight:400;font-size:12.5px;border:1px solid #d6dde6;border-radius:7px;padding:7px}
.evn-sn{display:flex;gap:6px}
.evn-sn button{border:1px solid #d6dde6;border-radius:7px;padding:6px 12px;font-size:12px}
.evn-sn .on{background:#e8f6ee;border-color:#bfe3cf;color:#1f7a52}
.evn-decl{display:flex;justify-content:space-between;gap:12px;background:#f7f9fc;border:1px solid #e3e8ef;border-radius:10px;padding:10px 12px;font-size:12px;color:#4b5563;margin:14px 0 12px}
.evn-decl b{color:#1f7a52;white-space:nowrap}
.evn-btn{background:#123c8a;color:#fff;font-size:12.5px;font-weight:700;padding:10px 18px;border-radius:8px;white-space:nowrap}
.evn-btn:disabled{background:#9aa9c4;cursor:not-allowed}
.evn-btn2{background:#fff;color:#123c8a;border:1px solid #c9d3e2;font-size:12.5px;font-weight:700;padding:10px 18px;border-radius:8px;white-space:nowrap}
.evn-drop{border:1.5px dashed #c5d2e2;border-radius:12px;padding:20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.evn-drop>i{width:40px;height:40px;border-radius:10px;background:#eef2fb;color:#123c8a;display:flex;align-items:center;justify-content:center}
.evn-drop b{font-size:13.5px;color:#1f2937}
.evn-drop em{font-style:normal;font-size:12px;color:#6b7280;max-width:440px}
.evn-drop span{display:flex;gap:8px;margin-top:4px}
.evn-link{text-align:center;font-size:12.5px;font-weight:700;color:#123c8a;margin-top:10px}
.evn-tabla{overflow-x:auto}
.evn-tabla table{width:100%;border-collapse:collapse;min-width:460px}
.evn-tabla th{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:#6b7280;text-align:left;padding:8px;background:#f5f7fa}
.evn-tabla td{padding:8px;border-top:1px solid #eef1f5;font-size:12.5px;font-weight:600;color:#5b93a6}
.evn-tabla input{width:100%;border:1px solid #d6dde6;border-radius:8px;padding:7px;text-align:right;font:inherit;color:#1f2937}
.evn-tabla tr.tot td{color:#123c8a;background:#f7f9fc}
.evn-acor{display:flex;flex-direction:column;gap:8px}
.evn-acor div{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e3e8ef;border-radius:12px;padding:12px 14px;font-size:13px}
.evn-acor b{color:#123c8a}
.evn-acor .n{width:28px;height:28px;border-radius:8px;background:#eef2fb;color:#123c8a;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.evn-acor .n.ok{background:#e8f6ee;color:#1f7a52}
.evn-fin{display:flex;justify-content:flex-end;gap:10px}
.evn-res{display:flex;justify-content:space-between;border:1px solid #e3e8ef;border-radius:10px;padding:10px 12px;font-size:12.5px;color:#5b93a6;margin-bottom:8px}
.evn-res b{color:#123c8a}
.evn-bov{display:flex;gap:12px;align-items:center}
.evn-bov>i{font-size:62px;color:#3b6fe0}
.evn-bov ul{list-style:none;margin:0;padding:0;font-size:12px;color:#374151;line-height:1.9}
.evn-mini{font-size:12.5px;color:#6b7280}
/* referencias */
.evn-refcab{grid-template-columns:minmax(0,1fr) 300px}
.evn-prog{display:flex;justify-content:space-between;align-items:center}
.evn-prog b{font-size:17px;color:#123c8a}
.evn-prog span{font-size:11.5px;font-weight:700;background:#eef2fb;color:#123c8a;border-radius:999px;padding:3px 9px}
.evn-pista{height:6px;background:#eef1f5;border-radius:3px;margin:10px 0 14px;overflow:hidden}
.evn-pista i{display:block;height:100%;width:0;background:#1f7a52;border-radius:3px;transition:width .3s}
.evn-cont{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.evn-cont div{border-radius:10px;padding:10px;font-size:11.5px;color:#4b5563}
.evn-cont b{display:block;font-size:18px;color:#123c8a}
.evn-cont .a{background:#eef2fb}.evn-cont .b{background:#e7edfb}.evn-cont .c{background:#e8f6ee}.evn-cont .d{background:#fdf6e3}
.evn-hitos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.evn-hitos div{border:1px solid #eef1f5;border-radius:10px;padding:12px 6px;font-size:11px;color:#8b95a3;opacity:.55}
.evn-hitos div.on{opacity:1;border-color:#bfe3cf;background:#e8f6ee}
.evn-hitos i{display:block;font-size:16px;margin-bottom:6px}
.evn-hitos b{display:block;color:#374151}
.evn-bien{display:flex;gap:12px;align-items:center;background:#eaf6ef;border:1px solid #cde8d8;border-radius:12px;padding:12px 16px;font-size:12.5px;color:#374151}
.evn-bien>i{width:28px;height:28px;border-radius:50%;background:#fff;color:#1f7a52;display:flex;align-items:center;justify-content:center}
.evn-bien b{display:block;color:#1f7a52}
.evn-segt{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#123c8a;margin-top:6px}
.evn-segt span{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#6b7280}
.evn-segt i{width:7px;height:7px;border-radius:50%;display:inline-block;margin-left:8px}
.evn-segt .l,.evn-segt .e{background:#123c8a}.evn-segt .a{background:#c07a12}.evn-segt .c{background:#1f7a52}
.evn-sub{font-size:13px;font-weight:700;color:#123c8a;margin:4px 0 8px}
.evn-g4,.evn-g3{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.evn-g3{grid-template-columns:1fr 1.4fr 1fr}
.evn-g4 label,.evn-g3 label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:#1f2937}
.evn-g4 input,.evn-g4 select,.evn-g3 input{font:inherit;font-weight:400;border:1px solid #d6dde6;border-radius:8px;padding:9px;min-width:0}
.evn-tel{display:flex;align-items:center;gap:6px;border:1px solid #d6dde6;border-radius:8px;padding:0 0 0 8px;font-weight:400;font-size:12px}
.evn-tel input{border:none!important;flex:1}
.evn-falta{background:#fdf6e3;border:1px solid #f0e2c2;border-radius:10px;padding:9px 12px;font-size:12px;color:#8a6410;margin-bottom:12px}
.evn-agregar{display:flex;align-items:center;gap:10px;justify-content:flex-start;border:1.5px dashed #c5d2e2;border-radius:12px;padding:12px 16px;
  font-size:13px;font-weight:600;color:#5b7fa6;background:#f7f9fc}
.evn-cierre{display:flex;align-items:center;gap:16px}
.evn-cierre>div{flex:1;display:flex;flex-direction:column;gap:4px;font-size:12px;color:#6b7280}
.evn-cierre b{font-size:14px;color:#123c8a}
.evn-cierre label{display:flex;align-items:center;gap:8px;color:#1f2937;margin-top:4px}
.evn-botones{display:flex;gap:8px}
.evn-ref{display:grid;grid-template-columns:auto 1.3fr 1fr 1.6fr auto;gap:16px;align-items:center;background:#fff;border:1px solid #e3e8ef;border-radius:14px;padding:14px 16px;margin-bottom:10px;font-size:12px;color:#4b5563}
.evn-ref .n{width:34px;height:34px;border-radius:50%;background:#eef2fb;color:#123c8a;font-weight:700;display:flex;align-items:center;justify-content:center}
.evn-ref b{display:block;font-size:14px;color:#123c8a}
.evn-ref .est{display:inline-block;background:#e7edfb;color:#123c8a;font-weight:600;border-radius:999px;padding:3px 10px}
.evn-ref ol{list-style:none;margin:0;padding:0;display:flex;justify-content:space-between;font-size:10.5px;color:#8b95a3;position:relative}
.evn-ref ol li{display:flex;flex-direction:column;align-items:center;gap:4px}
.evn-ref ol li i{width:18px;height:18px;border-radius:50%;border:1.5px solid #c9d3e2;background:#fff}
.evn-ref ol li.ok i{background:#123c8a;border-color:#123c8a}
.evn-ref ol li.ok{color:#123c8a;font-weight:600}
@container sitio (max-width:1120px){.evn-dos,.evn-refcab{grid-template-columns:1fr}.evn-seg{grid-template-columns:1fr 1fr}.evn-step{grid-template-columns:repeat(5,1fr);row-gap:14px}}
/* textos cortos sin palabras sueltas: los centrados se equilibran y el resto
   evita dejar una sola palabra en el último renglón */
.ev-reloj p,.regalo p,.alta-der p,.v1-ban p{text-wrap:pretty}
.v1-modal p,.v1-modal h3,.v1-modal li,.v1-modal span{text-wrap:balance}
.ev-modal p,.ev-modal h3,.v1-bienv p,.v1-bienv h3,.v1-mcentro h3,.v1-mbaj2,.v1-hlead,.v1-nota,.v1-paycaja p,.v1-paycaja h2,
.v1-esc-caja p,.exito .alta-sub,.exito .legal{text-wrap:balance}

/* modales de la propuesta */
.ev-modal{max-width:440px;padding:30px 28px 24px;text-align:center}
.ev-modal h3{font-size:19px;font-weight:700;color:#123c8a;line-height:1.3;margin-bottom:8px;text-wrap:balance}
.ev-modal h3.izq{text-align:left}
.ev-mico{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;background:#eaf3f6;color:#2b6f82;display:flex;align-items:center;justify-content:center;font-size:23px}
.ev-mico.ok{background:#e8f6ee;color:#1f7a52}
.ev-mtxt{font-size:14px;line-height:1.55;color:#4b5563;margin-bottom:16px}
.ev-mtxt b{color:#123c8a}
.ev-msub{font-size:13px;color:#6b7280;text-align:left;margin-bottom:16px}
.ev-mpasos{list-style:none;margin:0 0 14px;padding:4px 14px;text-align:left;border:1px solid #e4e8ef;border-radius:10px;background:#fafbfd}
.ev-mpasos li{display:flex;align-items:center;gap:11px;padding:8px 0;font-size:13.5px;color:#2b3a4d}
.ev-mpasos li+li{border-top:1px solid #eceff4}
.ev-mpasos b{width:24px;height:24px;border-radius:50%;background:#123c8a;color:#fff;font-size:11.5px;display:flex;align-items:center;justify-content:center}
.ev-mplazo{display:flex;align-items:center;gap:9px;justify-content:center;background:#fdf6e6;border:1px solid #f0e2c2;border-radius:10px;padding:10px;font-size:13.5px;color:#7a5608;margin-bottom:20px}
.ev-mplazo i{color:#b07d12}
.ev-mplazo[hidden]{display:none}
.ev-mico.aviso{background:#fdf1dc;color:#b07d12}
.ev-mcuenta{display:flex;justify-content:center;gap:18px;font-size:13px;color:#4a5872;margin:-4px 0 20px}
.ev-mcuenta b{color:#123c8a;font-weight:700;margin-right:3px}
.ev-mbtns.par{display:flex;gap:10px}.ev-mbtns.par button{flex:1}
.evn-ref .est.ok{background:#e3f4ea;color:#1f7a4d}
#evEnvPlazo span{max-width:33ch}
/* aviso de dos renglones: la caja se ciñe al texto y el icono va pegado a él */
.ev-mplazo.corto{width:fit-content;max-width:100%;margin-inline:auto;padding:10px 16px 10px 14px;align-items:flex-start}
.ev-mplazo.corto i{margin-top:3px}
.ev-mplazo.corto span{max-width:24.5ch;text-align:left;text-wrap:balance}
.ev-mbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;background:#123c8a;color:#fff;font-size:14.5px;font-weight:700;padding:12px;border-radius:8px}
.ev-mbtn2{background:#fff;color:#123c8a;border:1px solid #c9d3e2;font-size:14px;font-weight:700;padding:11px 18px;border-radius:8px}
.ev-mbtns{display:flex;justify-content:flex-end;gap:10px}
.ev-mbtns .ev-mbtn{width:auto;padding:11px 18px}
.ev-mcarga{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 0;border-top:1px solid #eef1f5}
.ev-mcarga b{font-size:16px;color:#1f2937}
.ev-mcarga p{font-size:13px;color:#4b5563;max-width:320px}
.ev-spin{width:38px;height:38px;border-radius:50%;border:3px solid #e2e8f2;border-top-color:#123c8a;animation:evgira .9s linear infinite}
@keyframes evgira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ev-spin{animation:none}}
.ev-maviso{display:flex;gap:9px;text-align:left;background:#fdf6e6;border:1px solid #f0e2c2;border-radius:10px;padding:10px 12px;font-size:12.5px;color:#7a5608}
.ev-mavance{height:6px;background:#eef1f5;border-radius:3px;overflow:hidden;margin-bottom:20px}
.ev-mavance i{display:block;height:100%;background:#1f7a52;border-radius:3px}
.ev-mhito{display:flex;align-items:center;gap:12px;text-align:left;background:#e8f6ee;border:1px solid #cde8d8;border-radius:10px;padding:10px 14px;margin-bottom:14px}
.ev-mhito[hidden]{display:none}
.ev-mhito i{width:32px;height:32px;border-radius:50%;background:#fff;color:#1f7a52;display:flex;align-items:center;justify-content:center}
.ev-mhito b{display:block;font-size:13.5px;color:#123c8a}
.ev-mhito span{font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#1f7a52}
.ev-mfila{display:flex;justify-content:space-between;font-size:12px;color:#6b7280;margin-bottom:6px}
.ev-mfila b{color:#123c8a}
.ev-mnota{font-size:12.5px;color:#6b7280;margin:-8px 0 18px}
/* cierre: el logro ocupa la mitad de arriba, en verde; el regalo va abajo en
   su propia caja con el degradado de la marca */
.ev-modal:has(.ev-puente:not([hidden])){padding:0;overflow:hidden}
.ev-plogro{background:#e8f6ee;padding:30px 26px 24px;text-align:center}
.ev-pcheck{width:62px;height:62px;border-radius:50%;background:#1f7a52;color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:28px;margin:0 auto 14px}
.ev-puente .ev-plogro h3{font-size:23px;color:#14532d;margin-bottom:6px}
.ev-plogro p{font-size:14px;line-height:1.5;color:#1b5e40}
.ev-pregalo-caja{padding:18px 20px 20px}
.ev-pregalo{background:linear-gradient(90deg,#0d2f6e 0%,#123c8a 45%,#2b6f82 100%);border-radius:12px;padding:16px;color:#fff;text-align:left}
.ev-pregalo-t{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ev-pregalo-t>i{font-size:24px}
.ev-pregalo-t b{display:block;font-size:16px;font-weight:700}
.ev-pregalo-t span{font-size:13px;color:#d6e3f2}
.ev-pregalo button{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:#123c8a;
  font-size:14px;font-weight:700;padding:11px;border-radius:8px}
.ev-pregalo button:hover{background:#e9eef8}
.ev-mpuente{text-align:left;border:1px solid #e4e8ef;border-radius:12px;padding:16px;margin-bottom:18px;background:#fafbfd}
.ev-meyebrow{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#2b6f82;margin-bottom:4px}
.ev-mpuente>b{display:block;font-size:16px;color:#123c8a;margin-bottom:4px}
.ev-mpuente>p{font-size:13px;line-height:1.5;color:#4b5563;margin-bottom:12px}
.ev-mpuente .v1-etq{margin-bottom:0}

/* ── aviso de escritorio ────────────────────────────────────────────────
   Por encima de todo lo demás —flotantes incluidos— y con el fondo apagado y
   desenfocado, para que se lea como un alto y no como una tarjeta más. */
.v1-escritorio{display:none;position:fixed;inset:0;z-index:70;
  align-items:center;justify-content:center;padding:26px;
  background:rgba(8,20,44,.66);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
@container sitio (max-width:900px){.v1-escritorio{display:flex}}
.v1-esc-caja{width:100%;max-width:392px;background:#fff;border-radius:var(--r-caja);
  padding:30px 28px 26px;text-align:center;box-shadow:0 24px 60px rgba(6,18,44,.4)}
.v1-esc-ico{display:flex;width:56px;height:56px;margin:0 auto 16px;border-radius:50%;
  background:var(--agua-cl);color:var(--agua-osc);font-size:23px;
  align-items:center;justify-content:center}
.v1-esc-caja h3{font-size:19px;font-weight:700;color:var(--marino);letter-spacing:-.2px;
  line-height:1.3;margin-bottom:10px}
.v1-esc-caja p{font-size:14px;line-height:22px;color:var(--texto-2);margin-bottom:22px}
.v1-esc-caja .btn{width:100%}

/* ── secciones cerradas para el usuario nuevo ── */
.v1-lock{margin-left:auto;font-size:10px;color:#b7bfcb}
.v1-tcab .v1-lock{color:rgba(255,255,255,.5);font-size:11px}
.v1-lista a.cerrado{color:#8b95a3}
.v1-lista a.cerrado>i:first-child{color:#c3cbd6}
/* en los botones de la barra el candado no cabe en línea: va de insignia */
.v1-btn{position:relative}
.v1-ic.cerrado,.v1-btn.cerrado{opacity:.66}
.v1-ic .v1-lock,.v1-btn .v1-lock{position:absolute;right:-4px;bottom:-4px;margin:0;font-size:8.5px;
  width:15px;height:15px;border-radius:50%;background:#123c8a;color:#fff;
  border:1px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center}

/* ── retícula de tres columnas ── */
.v1-cuerpo{flex:1;width:100%;max-width:1272px;margin:0 auto;padding:14px 18px 28px;
  display:grid;grid-template-columns:226px minmax(0,1fr) 240px;gap:14px;align-items:start}

/* ── columna izquierda ── */
.v1-perfil{border:1px solid #e0e5ec;border-radius:8px;padding:12px;margin-bottom:14px;position:relative}
.v1-pcab{display:flex;gap:10px;align-items:flex-start;padding-right:22px}
.v1-ava{width:44px;height:44px;border-radius:8px;flex:0 0 auto}
.v1-nom{display:block;font-size:14px;font-weight:700;color:#123c8a;line-height:1.25}
/* escudo tachado = empresa no verificada. La diagonal va dibujada: el icono
   tachado no existe en la versión libre de Font Awesome. El halo toma el color
   del fondo sobre el que se apoya. */
.v1-tach{position:relative;display:inline-flex;--fondo:#fff}
.v1-tach::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1.1px;border-radius:1px;
  background:currentColor;transform:translateX(-50%) rotate(45deg);box-shadow:0 0 0 .9px var(--fondo)}
.v1-esq.v1-tach{position:absolute}
.v1-pill .v1-tach{--fondo:#eef1f6;color:#8b95a3;margin-right:1px}
.v1-pill .v1-tach i{font-size:14px}
.v1-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:5px}
.v1-pill{display:inline-flex;align-items:center;gap:5px;background:#eef1f6;border:1px solid #dfe4ec;
  border-radius:12px;padding:1px 9px;font-size:11px;color:#4b5563;white-space:nowrap}
.v1-rol{font-size:11px;color:#6b7280}
.v1-esq{position:absolute;top:10px;right:10px;color:#9aa5b3;font-size:15px;padding:2px;
  border-radius:6px;cursor:pointer;background:none;border:none}
.v1-esq:hover{color:#123c8a;background:#eef2f7}
.v1-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.v1-tile{border:1px solid #e4e8ef;border-radius:7px;padding:7px 8px;display:flex;align-items:center;gap:7px;min-width:0}
.v1-tile>i{color:#3f7fc4;font-size:13px;flex:0 0 auto}
.v1-tile>div{min-width:0;flex:1}
.v1-tile b{display:block;font-size:9.5px;font-weight:600;color:#6b7280;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v1-tile span{font-size:12px;color:#374151}
/* v2 · los cinco datos en una columna: rótulo a la izquierda, valor alineado a
   la derecha. Ningún rótulo se corta y los valores forman una sola columna. */
.v1-datos{margin-top:12px;border:1px solid #e4e8ef;border-radius:7px;overflow:hidden}
.v1-dato{display:flex;align-items:center;gap:9px;padding:7px 10px;border-bottom:1px solid #f0f3f7}
.v1-dato:last-child{border-bottom:none}
.v1-dato>i{color:#3f7fc4;font-size:12.5px;width:15px;text-align:center;flex:0 0 auto}
.v1-dato b{font-size:11.5px;font-weight:500;color:#6b7280;flex:1;min-width:0}
.v1-dato span{font-size:13px;font-weight:600;color:#374151;font-variant-numeric:tabular-nums}
.v1-perfil .v1-pcab{padding-right:26px}
.v1-perfil .v1-pcab>div{min-width:0}
.v1-perfil .v1-rol{display:block;margin-top:3px}
.v1-estado{margin-top:10px}

.v1-mision{margin-top:12px;padding-top:10px;border-top:1px solid #eceff4}
.v1-mision b{display:block;font-size:12px;color:#123c8a;font-weight:700}
.v1-mision span{font-size:12px;color:#6b7280}

.v1-tar{border:1px solid #e0e5ec;border-radius:8px;overflow:hidden;margin-bottom:14px}
.v1-tcab{background:#123c8a;color:#fff;font-weight:700;font-size:14.5px;
  display:flex;align-items:center;gap:9px;padding:9px 12px}
.v1-tcab i{font-size:15px}
.v1-lista{padding:6px 0}
.v1-lista a{display:flex;align-items:center;gap:9px;padding:7px 13px;color:#123c8a;font-size:13.5px;cursor:pointer}
.v1-lista a:hover{background:#f2f6fc}
.v1-lista i{color:#3f7fc4;font-size:13px;width:16px;text-align:center;flex:0 0 auto}

.v1-prods{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:10px}
.v1-prod{text-align:center;min-width:0}
.v1-prod .v1-nomprod{display:block;font-size:11px;color:#123c8a;margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v1-estr{color:#f0b429;font-size:9px;letter-spacing:1.5px;display:block}
.v1-precio{font-size:11px;color:#123c8a;display:block;line-height:1.3}
.v1-agregar{border:1px solid #e4e8ef;border-radius:7px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;color:#3f7fc4;font-size:11px;padding:12px 4px;
  line-height:1.2;text-align:center;width:100%}
.v1-agregar i{font-size:22px}
.v1-fav{max-height:302px;overflow-y:auto}

/* marcador: donde no hay material que copiar */
.v1-ph{background:#f1f4f8;border:1px dashed #cbd5e2;color:#93a1b5;font-size:9.5px;line-height:1.25;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;
  border-radius:7px;padding:4px}
.v1-ph i{font-size:14px;opacity:.7}
.v1-prod .v1-ph{aspect-ratio:1}

/* ── columna central ── */
.v1-portada{position:relative;height:352px;border-radius:10px;overflow:hidden;
  background:linear-gradient(140deg,#405d81 0%,#6b8298 48%,#41607f 100%)}
.v1-portada .v1-marca{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;color:rgba(255,255,255,.72);font-size:12px;letter-spacing:.02em}
.v1-portada .v1-marca i{font-size:26px;opacity:.7}
.v1-pac{position:absolute;top:14px;left:14px;display:flex;gap:8px;flex-wrap:wrap}
.v1-pac button{display:flex;align-items:center;gap:6px;background:rgba(24,36,54,.5);color:#fff;
  font-size:12px;padding:6px 13px;border-radius:16px}
.v1-ppie{position:absolute;left:16px;bottom:14px;display:flex;flex-direction:column;gap:9px}
.v1-visitas{color:#fff;font-size:11px;line-height:1.2}
.v1-visitas b{display:block;font-size:19px;font-weight:700}
.v1-visitas b span{font-size:11px;font-weight:400;margin-left:5px}
.v1-pbot{display:flex;align-items:center;gap:8px}
.v1-video{display:flex;align-items:center;gap:7px;background:#123c8a;color:#fff;font-size:12.5px;
  font-weight:600;padding:7px 15px;border-radius:16px}
.v1-mas{width:30px;height:30px;border-radius:50%;background:rgba(24,36,54,.5);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px}

.v1-red{display:flex;align-items:center;gap:10px;margin:18px 0 9px}
.v1-red h2{font-size:17px;font-weight:700;color:#123c8a;letter-spacing:0;line-height:1.2}
.v1-tabpill{background:#e9eef6;color:#123c8a;font-size:12px;font-weight:600;padding:3px 13px;border-radius:14px}
.v1-como{display:flex;align-items:center;gap:9px;margin-bottom:11px;flex-wrap:wrap}
.v1-como>b{font-size:13.5px;color:#123c8a;font-weight:700}
.v1-seg{display:flex;gap:7px}
.v1-seg button{font-size:12.5px;font-weight:600;padding:4px 15px;border-radius:14px;background:#eef1f6;color:#4b5563}
.v1-seg button.on{background:#123c8a;color:#fff}

.v1-comp{border:1px solid #e0e5ec;border-radius:8px;padding:12px}
.v1-comp-top{display:flex;align-items:center;gap:11px}
.v1-comp-top .v1-ava{border-radius:50%}
.v1-comp-top input{flex:1;min-width:0;font-family:var(--sans);font-size:14px;letter-spacing:0;color:#333;
  padding:11px 15px;border:1px solid #e0e5ec;border-radius:8px;background:#fbfcfd}
.v1-comp-top input::placeholder{color:#9aa3af}
.v1-comp-top input:focus{outline:none;border-color:#123c8a}
.v1-comp-bajo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px}
.v1-comp-bajo>b{font-size:11.5px;color:#6b7280;font-weight:600}
.v1-chip{font-size:11.5px;border:1px solid #dfe4ec;border-radius:12px;padding:2px 11px;color:#4b5563}
.v1-adj{display:flex;align-items:center;gap:6px;font-size:12px;color:#6b7280;margin-left:auto;flex:0 0 auto}
.v1-adj button{display:flex;align-items:center;gap:5px;font-size:12px;color:#6b7280;padding:4px 6px}
.v1-enviar{background:#6f9aa8;color:#fff;font-weight:600;font-size:13px;padding:7px 24px;border-radius:16px}

/* el feed tiene su propio scroll dentro de la columna, como hoy */
.v1-feed{margin-top:13px;max-height:600px;overflow-y:auto;padding-right:7px;
  display:flex;flex-direction:column;gap:13px}
.v1-post{border:1px solid #e0e5ec;border-radius:8px;padding:13px;position:relative}
.v1-pcabe{display:flex;align-items:flex-start;gap:10px;padding-right:26px}
.v1-pcabe .v1-ava{width:36px;height:36px;border-radius:50%}
.v1-autor{display:block;font-size:13.5px;font-weight:700;color:#123c8a;line-height:1.3;overflow-wrap:anywhere}
.v1-fecha{display:block;font-size:11px;color:#8b95a3;margin-top:2px}
.v1-kebab{position:absolute;top:11px;right:11px;width:26px;height:26px;border-radius:50%;
  color:#8b95a3;display:flex;align-items:center;justify-content:center;font-size:13px}
.v1-txt{font-size:13px;line-height:1.5;color:#3c4450;margin-top:10px}
.v1-txt b{font-weight:700}
.v1-img{margin:12px auto 0;width:min(260px,70%)}
.v1-img .v1-ph{aspect-ratio:4/3}
.v1-ppie2{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid #eceff4}
.v1-ppie2 button{display:flex;align-items:center;gap:6px;border:1px solid #e4e8ef;border-radius:16px;
  padding:4px 13px;font-size:12px;color:#4b5563}
.v1-likes{margin-left:auto;font-size:11.5px;color:#8b95a3}

/* ── recordatorio de avance · flotante ────────────────────────────────
   Va apilado encima del botón de soporte. En blanco se perdía contra la
   página, así que la pastilla va marino y la etiqueta de color queda como
   único aviso: un punto aparte era la misma señal dos veces. */
.v1-flot{position:fixed;right:24px;bottom:calc(var(--v1-pie) + 66px);z-index:41;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.v1-flot[hidden]{display:none}
.v1-pastilla{display:inline-flex;align-items:center;gap:9px;
  background:#123c8a;border:none;border-radius:26px;padding:6px 13px 6px 7px;
  box-shadow:0 8px 24px rgba(12,32,74,.34)}
.v1-pastilla:hover{background:#0d2f6e}
.v1-pastilla>b{font-size:12.5px;font-weight:700;color:#fff;white-space:nowrap}
.v1-pastilla .ch{font-size:10px;color:rgba(255,255,255,.6);transition:transform .18s}
.v1-flot.abierto .v1-pastilla .ch{transform:rotate(180deg)}
.v1-pastilla .v1-aro b{color:#fff}
/* la etiqueta es el aviso: verde cuando hay algo gratis sin reclamar,
   ámbar cuando la pelota está en la cancha del cliente */
.v1-pastilla .chi{font-size:10.5px;font-weight:700;border-radius:10px;padding:3px 10px;white-space:nowrap}
.chi.libre{background:#8ee3b8;color:#0d4c33}
.chi.espera{background:#f7d894;color:#6b4a08}
.chi.curso{background:rgba(255,255,255,.18);color:#fff}
.chi.opc{background:rgba(255,255,255,.14);color:rgba(255,255,255,.8)}
@keyframes v1late{0%,100%{box-shadow:0 0 0 0 rgba(142,227,184,.7)}55%{box-shadow:0 0 0 7px rgba(142,227,184,0)}}
.chi.late{animation:v1late 2.4s ease-out infinite}
@media (prefers-reduced-motion:reduce){.chi.late{animation:none}}

/* el panel va del color de la pastilla que lo despliega: en blanco se perdía
   contra las tarjetas de la página, que también son blancas */
.v1-panel{width:292px;background:#123c8a;border-radius:12px;overflow:hidden;
  box-shadow:0 16px 42px rgba(9,26,63,.42)}
.v1-panel[hidden]{display:none}
.v1-pan-cab{display:flex;align-items:center;gap:9px;padding:11px 13px;background:#0e3170;
  border-bottom:1px solid rgba(255,255,255,.1)}
.v1-aro{position:relative;width:30px;height:30px;flex:0 0 auto}
.v1-aro b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:700;color:#fff}
.v1-pan-cab>div{flex:1;min-width:0}
.v1-pan-cab>div>b{display:block;font-size:13px;font-weight:700;color:#fff;line-height:1.25}
.v1-pan-cab>div>span{display:block;font-size:11px;color:rgba(255,255,255,.66);line-height:1.3}
.v1-av-x{flex:0 0 auto;width:22px;height:22px;border-radius:6px;color:rgba(255,255,255,.6);
  font-size:11px;display:flex;align-items:center;justify-content:center}
.v1-av-x:hover{background:rgba(255,255,255,.16);color:#fff}
/* el de soporte se ancla a su botón con la cabecera en su color */
.v1-panel.sos{background:#fff;border:1px solid #cfe2e8}
.v1-panel.sos .v1-pan-cab{background:#0e8fa8;border-bottom:none}
.v1-panel.sos .v1-globo{background:rgba(255,255,255,.2);color:#fff}
.v1-panel.sos .v1-av-x:hover{background:rgba(255,255,255,.22)}

/* La lista va a dos columnas: rótulo a la izquierda, estado a la derecha,
   todos alineados. Las etiquetas de color metían un tercer renglón sólo en
   algunas filas y descuadraban la columna entera. */
.v1-av-pasos{padding:4px 0}
.v1-pa{display:flex;align-items:flex-start;gap:9px;padding:7px 13px}
.v1-pa .mk{width:17px;height:17px;border-radius:50%;flex:0 0 auto;margin-top:1px;
  display:flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:700}
.v1-pa.ok .mk{background:#8ee3b8;color:#0d4c33}
.v1-pa.hoy .mk{background:#fff;color:#123c8a;font-size:9.5px}
.v1-pa.no .mk{background:transparent;border:1.5px solid rgba(255,255,255,.32);color:rgba(255,255,255,.55)}
.v1-pa>div{flex:1;min-width:0}
.v1-pa .ln{display:flex;align-items:baseline;gap:10px}
.v1-pa b{flex:1;min-width:0;font-size:12px;font-weight:500;color:rgba(255,255,255,.62);line-height:1.35}
.v1-pa.hoy b{color:#fff;font-weight:700}
.v1-pa .val{flex:0 0 auto;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.45);
  font-variant-numeric:tabular-nums}
.v1-pa .val.libre{color:#8ee3b8}
.v1-pa .val.espera{color:#f7d894}
.v1-pa .val.curso{color:#fff}
.v1-pa em{display:block;font-style:normal;font-size:11px;color:rgba(255,255,255,.62);
  line-height:1.4;margin-top:2px}
.v1-pa .pista{display:block;height:4px;background:rgba(255,255,255,.18);border-radius:2px;
  margin-top:6px;overflow:hidden}
.v1-pa .pista i{display:block;height:100%;background:#8ee3b8;border-radius:2px;transition:width .25s}
.v1-av-acc{padding:9px 13px 11px;border-top:1px solid rgba(255,255,255,.12)}
.v1-av-acc button{width:100%;background:#fff;color:#123c8a;font-size:12.5px;font-weight:700;
  padding:9px;border-radius:7px}
.v1-av-acc button:hover{background:#e6ecf7}
@container sitio (max-width:640px){
  .v1-pastilla>b{display:none}
  .v1-panel{width:min(292px,calc(100cqw - 40px))}
}

/* ── columna derecha ── */
.v1-herr{border:1px solid #e0e5ec;border-radius:8px;padding:12px;margin-bottom:14px}
.v1-herr h3{font-size:13px;font-weight:700;color:#123c8a;margin-bottom:10px;letter-spacing:0}
.v1-h{display:flex;align-items:center;gap:9px;border:1px solid #e4e8ef;border-radius:7px;
  padding:9px 10px;margin-bottom:8px;cursor:pointer;min-width:0}
.v1-h:last-child{margin-bottom:0}
.v1-h:hover{background:#f7f9fc}
.v1-h>i{font-size:15px;flex:0 0 auto}
.v1-h div{min-width:0;flex:1}
.v1-h b{display:block;font-size:10.5px;font-weight:700;color:#123c8a;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v1-h span{display:block;font-size:10.5px;line-height:1.35;color:#6b7280}
.v1-h .ch{margin-left:auto;color:#9aa3af;font-size:11px;flex:0 0 auto}
.v1-aliado{border:1px solid #e4e8ef;border-radius:7px;padding:12px;text-align:center}
.v1-aliado .v1-logoal{display:inline-flex;align-items:center;gap:5px;border:1px solid #e4e8ef;
  border-radius:6px;padding:5px 12px;font-size:12px;font-weight:600;color:#2b3a4d;margin-bottom:9px}
.v1-aliado p{font-size:10.5px;line-height:1.4;color:#6b7280}

/* ── pie ── */
.v1-pie{background:#123c8a;color:#fff;margin-top:auto;padding:32px 0 18px}
.v1-pie-in{max-width:1272px;margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:1.6fr 1fr 1.15fr 1.35fr 1.1fr;gap:24px}
.v1-pie h4{font-size:15px;font-weight:700;margin-bottom:11px;letter-spacing:0}
.v1-pie p{font-size:11.5px;line-height:1.55;color:#c9d8f0}
.v1-pie a{display:block;font-size:11.5px;line-height:1.5;color:#c9d8f0;margin-bottom:7px;cursor:pointer}
.v1-pie a:hover{color:#fff}
.v1-pie-bajo{max-width:1272px;margin:24px auto 0;padding:0 28px;display:flex;align-items:center;
  gap:14px;flex-wrap:wrap;font-size:11px;color:#c9d8f0}
.v1-soc{display:flex;gap:11px;font-size:15px;color:#fff}
.v1-ver{margin-left:auto}

/* ── se angosta con el marco de vista, no con la ventana ── */
@container sitio (max-width:1120px){
  .v1-cuerpo{grid-template-columns:210px minmax(0,1fr)}
  .v1-der{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  .v1-der>*{margin-bottom:0}
}
@container sitio (max-width:900px){
  .v1-bar-in{flex-wrap:wrap;gap:10px}
  /* al bajar a su propio renglón el buscador ya no reparte hueco: las
     acciones vuelven a pegarse al borde derecho */
  .v1-buscar{order:3;flex:1 0 100%;max-width:none;margin:0}
  .v1-acc{gap:8px;margin-left:auto}
  .v1-invitar span{display:none}
  .v1-invitar{padding:9px 12px}
}
@container sitio (max-width:760px){
  .v1-cuerpo{grid-template-columns:minmax(0,1fr)}
  .v1-der{grid-template-columns:1fr}
  .v1-portada{height:230px}
  .v1-pie-in{grid-template-columns:1fr 1fr}
  .v1-feed{max-height:none}
  .v1-fav{max-height:none}
}


/* ── ajustes de producción ── */
:root{--proto:0px}
.proto,.proto-menu,.medida{display:none!important}

/* DC-1293 · estado de cada lista en el reporte real (el prototipo sólo pintaba "sin registros") */
.lia-listas li.con{color:var(--lmid);font-weight:600}
.lia-listas li.con::before{border:0;width:7px;height:7px;top:.5em;border-radius:50%;background:var(--lmid);transform:none}
.lia-listas li.sd{opacity:.55}

/* DC-1293 · «Escribiendo…» mientras responde la IA (el prototipo sólo aceleraba el orbe) */
.lia-escribe{display:inline-flex;align-items:center;gap:4px;font-size:14px;color:var(--lm)}
.lia-escribe i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.3;animation:liaPunto 1.2s ease-in-out infinite}
.lia-escribe i:first-of-type{margin-left:4px}
.lia-escribe i:nth-of-type(2){animation-delay:.15s}
.lia-escribe i:nth-of-type(3){animation-delay:.3s}
@keyframes liaPunto{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.lia-escribe i{animation:none;opacity:.6}}

/* DC-1293 · el bloque velado lleva a crear la cuenta */
.lia-velo{cursor:pointer}
.lia-velo:focus-visible{outline:2px solid var(--marino);outline-offset:-2px}