/* ─────────────────────────────────────────────
   Cognify — tema oscuro premium
   Se carga DESPUÉS de app.css y ui-fixes.css.
   Paleta tomada del logo: azul #4C8DFF y naranja #FF8A3D
   sobre fondo #070A12. El verde sólo marca lo ya logrado.
───────────────────────────────────────────── */

:root,
:root[data-theme="dark"] {
  --ink-900: #070A12;
  --ink-800: #0A0E17;
  --ink-700: #101724;
  --ink-600: #18202F;
  --black: #05070C;
  --paper-100: #0D1320;
  --paper-050: #0A0F1A;
  --line: rgba(255, 255, 255, 0.09);
  --accent-500: #4C8DFF;
  --accent-600: #2F6FE0;
  --accent-100: rgba(76, 141, 255, 0.14);
  --green-600: #35C77E;
  --red-600: #FF6B5A;
  --text-primary: #EEF2F8;
  --text-secondary: #99A3B5;
  --text-on-dark: #EEF2F8;
  --surface: #070A12;
  --surface-raised: #0E1420;
  --border: rgba(255, 255, 255, 0.09);
  --accent: #4C8DFF;
  --accent-strong: #2F6FE0;
  --toast-bg: #101724;
  --toast-text: #EEF2F8;
  --font-display: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 40px -22px rgba(0, 0, 0, 0.75);
  color-scheme: dark;
}

html, body { background: #070A12; color: var(--text-primary); }
h1, h2, h3, .display { letter-spacing: -0.02em; }

/* ── armazón ── */
.app-shell { background: #070A12; }
.app-sidebar { background: #0A0E17; border-right: 1px solid rgba(255, 255, 255, 0.07); }
.app-sidebar-logo span { color: #EEF2F8 !important; }
.app-nav-item { color: #AEB7C6; border-radius: 10px; }
.app-nav-item:hover { background: rgba(255, 255, 255, 0.05); color: #EEF2F8; }
.app-nav-item.active { background: rgba(76, 141, 255, 0.16); color: #9CC2FF; }
.app-nav-item.logout { color: #8C96A7; }
.app-sidebar-footer { color: #6F7889; }
.app-sidebar-footer p { color: #6F7889; }

.app-topbar { background: #090D15; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.app-mobile-logo { color: #EEF2F8 !important; }
.app-mobile-logo span { color: #EEF2F8; }
.app-search { background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; color: #EEF2F8; }
.app-search input { background: transparent; color: #EEF2F8; }
.app-search input::placeholder { color: #7F8899; }
.app-notif-btn { background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; color: #C6CEDC; }
.app-content { background: #070A12; }

/* ── tarjetas y superficies ── */
.app-card, .app-empty, .venture-card, .post-card, .panel, .box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--text-primary);
  box-shadow: none;
}
.app-card:hover, .venture-card:hover { border-color: rgba(76, 141, 255, 0.35); }
input, select, textarea {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #EEF2F8;
}
input::placeholder, textarea::placeholder { color: #7F8899; }
hr { border-color: rgba(255, 255, 255, 0.09); }

.btn-app { border-radius: 11px; }
.btn-app.primary, .btn-app:not(.white):not(.ghost):not(.secondary):not(.outline) { background: #4C8DFF; color: #06162F; border-color: #4C8DFF; }
.btn-app.outline { background: transparent; border: 1px solid rgba(255, 255, 255, 0.20); color: #C6CEDC; }
.btn-app.white { background: #4C8DFF; color: #06162F; border-color: #4C8DFF; }
.btn-app.ghost, .btn-app.secondary { background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); color: #EEF2F8; }

/* ── hero del inicio ── */
.home-hero {
  background: radial-gradient(120% 140% at 12% 10%, #123C8F 0%, rgba(11, 44, 107, 0.55) 38%, #070A12 78%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #EEF2F8;
}
.home-hero h1 { color: #EEF2F8; }
.home-hero .subtitle { color: #C0C8D6; }
.home-hero-concepts { background: rgba(7, 10, 18, 0.55); border: 1px solid rgba(255, 255, 255, 0.14); color: #C6CEDC; }

/* ── accesos del inicio: programas + Nexo ── */
.home-quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .home-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .home-quick-grid { grid-template-columns: 1fr; } }

.home-prog-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 16px; text-decoration: none; }
.home-prog-card .top { display: flex; align-items: center; gap: 10px; }
.home-prog-card .top img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.home-prog-card .badge { margin-left: auto; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; }
.home-prog-card h3 { margin: 0; font-size: 18px; }
.home-prog-card .meta { margin: 0; font-size: 12.5px; font-weight: 500; }
.home-prog-card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #99A3B5; flex-grow: 1; }
.home-prog-card .go { font-size: 13.5px; font-weight: 500; color: #7FB0FF; }
.home-prog-card.activo { border-color: rgba(255, 138, 61, 0.32); background: linear-gradient(165deg, rgba(255, 138, 61, 0.10), rgba(255, 138, 61, 0.02)); }
.home-prog-card.activo .badge { background: #FFA766; color: #06162F; }
.home-prog-card.activo .meta { color: #FFA766; }
.home-prog-card.finanzas .meta { color: #5FDCA0; }
.home-prog-card.trading .meta { color: #7FB0FF; }
.home-prog-card.nexo { border-color: rgba(179, 164, 255, 0.28); background: rgba(179, 164, 255, 0.05); }
.home-prog-card.nexo .badge { background: #B3A4FF; color: #06162F; }
.home-prog-card.nexo .meta { color: #B3A4FF; }
.home-prog-card.nexo .icono { width: 44px; height: 44px; border-radius: 12px; background: rgba(179, 164, 255, 0.16); display: flex; align-items: center; justify-content: center; color: #B3A4FF; }

/* ── menú de la foto de perfil, con su triángulo rojo ── */
.cg-user { position: relative; }
.cg-user-btn {
  position: relative; display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 13px 0 6px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05);
  color: #EEF2F8; cursor: var(--cg-cur-p, pointer);
}
.cg-user-btn .foto { position: relative; display: block; width: 34px; height: 34px; }
.cg-user-btn .foto img, .cg-user-btn .foto .avatar-fallback { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; }
.cg-caret { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); }
.cg-user-nombre { font-size: 14.5px; font-weight: 500; }
@media (max-width: 880px) { .cg-user-nombre { display: none; } }

.cg-menu {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 60;
  width: 264px; padding: 8px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.13); background: #101724;
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.62);
}
.cg-menu[hidden] { display: none; }
.cg-menu .cabecera { display: flex; align-items: center; gap: 11px; padding: 10px 12px 13px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.cg-menu .cabecera img, .cg-menu .cabecera .avatar-fallback { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.cg-menu .cabecera .n { font-size: 14.5px; font-weight: 600; }
.cg-menu .cabecera .s { font-size: 12.5px; color: #8C96A7; }
.cg-menu a, .cg-menu button {
  display: flex; align-items: center; width: 100%; height: 40px; padding: 0 12px;
  border: 0; background: transparent; border-radius: 9px;
  color: #C6CEDC; font-size: 14.5px; text-align: left; text-decoration: none; cursor: var(--cg-cur-p, pointer);
}
.cg-menu a:hover, .cg-menu button:hover { background: rgba(255, 255, 255, 0.06); color: #EEF2F8; }
.cg-menu .salir { color: #FF6B5A; font-weight: 500; }
.cg-menu .separador { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 6px 10px; }
.cg-menu .version { margin: 6px 0 2px; padding: 8px 12px 4px; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 12px; color: #6F7889; }

/* ── barra inferior en móvil ── */
.app-mobile-tabs { background: rgba(9, 13, 21, 0.96); border-top: 1px solid rgba(255, 255, 255, 0.09); }
.app-mobile-tabs a { color: #8C96A7; }
.app-mobile-tabs a.active { color: #9CC2FF; }
.app-mobile-tabs a.centro { }
.app-mobile-tabs a.centro .burbuja {
  width: 52px; height: 52px; margin-top: -22px; border-radius: 50%;
  background: #0D1422; border: 1px solid rgba(76, 141, 255, 0.45);
  box-shadow: 0 10px 26px rgba(76, 141, 255, 0.25);
  display: flex; align-items: center; justify-content: center;
}
.app-mobile-tabs a.centro .burbuja img { width: 32px; height: 32px; border-radius: 50%; }

/* ── el segundo juego de variables de app.css ──
   app.css define aparte los tokens --app-*, y sólo los pasaba a oscuro cuando
   el sistema estaba en modo oscuro. Con el tema fijo aqui, los nombres de
   Contactos, los titulos de seccion y los marcos de foto de Productos se
   quedaban en azul marino sobre fondo negro. Esto los fija siempre. */
:root[data-theme="dark"] .app-shell,
:root:not([data-theme="light"]) .app-shell {
  --bg-app: #070A12;
  --app-white: #0E1420;
  --app-gray-050: #0C1220;
  --app-gray-100: #141C2C;
  --app-gray-200: rgba(255, 255, 255, 0.10);
  --app-gray-400: #7F8899;
  --app-gray-500: #99A3B5;
  --app-gray-700: #C6CEDC;
  --app-text: #EEF2F8;
  --app-text-soft: #99A3B5;
  --app-bg-dark: #070A12;
  --shadow-app-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px -14px rgba(0, 0, 0, 0.6);
  --shadow-app-lift: 0 8px 20px -6px rgba(0, 0, 0, 0.7);
}

/* ── la cuenta vive en Editar mi perfil ──
   'Lo que Cognify sabe de mi', 'Mi suscripcion' y 'Ayuda y reportes' dejan de
   ser entradas sueltas del menu y de la barra lateral: ahora son atajos dentro
   de la zona 'Tu cuenta' de Editar mi perfil. suscripcion.js y reportes.js
   siguen inyectando sus botones en la barra, asi que se ocultan ahi (los
   atajos los siguen disparando por codigo). */
.app-sidebar-nav .sus-nav,
.app-sidebar-nav .rep-nav { display: none; }

.zc-atajos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0 20px; }
@media (max-width: 900px) { .zc-atajos { grid-template-columns: 1fr; } }
.zc-atajo {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 18px;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03); color: inherit;
  text-align: left; text-decoration: none; cursor: var(--cg-cur-p, pointer); font: inherit;
}
.zc-atajo:hover { border-color: rgba(76, 141, 255, 0.4); background: rgba(76, 141, 255, 0.07); }
.zc-atajo .t { font-size: 15px; font-weight: 600; color: #EEF2F8; }
.zc-atajo .d { font-size: 13px; line-height: 1.5; color: #99A3B5; }

/* ── pie legal del inicio ──
   Discreto pero encontrable: gris, al final de todo, sin competir con el
   contenido. Los derechos ARCO y las cookies apuntan a su seccion del aviso. */
.pie-legal { margin-top: 2.6rem; padding: 1.2rem 0 2rem; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.pie-legal nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pie-legal a { font-size: 13px; color: #8C96A7; text-decoration: none; }
.pie-legal a:hover { color: #9CC2FF; text-decoration: underline; }
.pie-legal p { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: #6F7889; max-width: 70ch; }


/* ---------------------------------------------------------------- Valoracion
   La fila de 1 a 5 bajo la ultima respuesta de un agente.

   Discreta a proposito: es una pregunta, no una llamada a la accion. Si
   compitiera con la respuesta del agente, la gente valoraria por reflejo en
   vez de por criterio, y una senal contestada sin pensar es peor que ninguna.
   Los numeros son botones cuadrados y no estrellas porque la escala va de 1 a
   5 con un significado escrito debajo, no de "poco" a "mucho" por intuicion. */
.valoracion{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:6px 10px;
  margin:14px auto 4px;
  padding:10px 14px;
  max-width:340px;
  border:1px solid rgba(255,255,255,0.07);
  border-radius:12px;
  background:rgba(255,255,255,0.02);
}
.valoracion .val-texto{
  font-size:13px;
  color:#99A3B5;
  flex-basis:100%;
  text-align:center;
}
.valoracion .val-escala{display:flex;gap:6px}
.valoracion .val-num{
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:9px;
  background:transparent;
  color:#C6CEDC;
  font-size:14px;
  font-weight:600;
  cursor:var(--cg-cur-p, pointer);
  transition:border-color .15s, color .15s, background .15s;
}
.valoracion .val-num:hover:not(:disabled){
  border-color:#4C8DFF;
  color:#EEF2F8;
  background:rgba(76,141,255,0.12);
}
.valoracion .val-num:focus-visible{outline:2px solid #4C8DFF;outline-offset:2px}
.valoracion .val-num:disabled{cursor:default;opacity:0.45}
.valoracion .val-num.elegido{
  border-color:#35C77E;
  color:#0B1220;
  background:#35C77E;
  opacity:1;
}
.valoracion .val-pie{
  flex-basis:100%;
  text-align:center;
  font-size:11px;
  color:#6E7A8C;
}
.valoracion .val-gracias{color:#35C77E}


/* ═══════════════════════════════════════════════════════════════
   TEMA CLARO
   Ignacio pidio poder elegir claro u oscuro (oscuro sigue siendo el
   default). Todo lo de arriba se queda intacto: esto son overrides
   con mayor especificidad (llevan [data-theme="light"] en el
   selector), asi que ganan solo cuando el usuario elige claro, sin
   tocar ni una linea de lo ya probado en produccion.
   Paleta: pidio que no se viera casi blanco, con azules, naranjas y
   grises claros — igual que las capturas que aprobo.
   ═══════════════════════════════════════════════════════════════ */

:root[data-theme="light"] {
  --ink-900: #10203D;
  --ink-800: #16305A;
  --ink-700: #1E3A66;
  --ink-600: #33456E;
  --black: #FFFFFF;
  --paper-100: #EEF1F6;
  --paper-050: #F7F9FC;
  --line: rgba(16, 32, 61, 0.12);
  --accent-500: #2F6FE0;
  --accent-600: #2657B8;
  --accent-100: rgba(47, 111, 224, 0.12);
  --green-600: #1E9A5D;
  --red-600: #D6303F;
  --text-primary: #10203D;
  --text-secondary: #5C6A85;
  --text-on-dark: #F5F8FC;
  --surface: #F7F9FC;
  --surface-raised: #FFFFFF;
  --border: rgba(16, 32, 61, 0.12);
  --accent: #2F6FE0;
  --accent-strong: #2657B8;
  --toast-bg: #16305A;
  --toast-text: #F5F8FC;
  --shadow-card: 0 1px 2px rgba(16, 32, 61, 0.06), 0 18px 40px -22px rgba(16, 32, 61, 0.16);
  color-scheme: light;
}

:root[data-theme="light"], :root[data-theme="light"] body { background: #EEF3FC; color: var(--text-primary); }

:root[data-theme="light"] .app-shell {
  --bg-app: #EEF3FC;
  --app-white: #FFFFFF;
  --app-gray-050: #F7F9FC;
  --app-gray-100: #EEF1F6;
  --app-gray-200: #E1E8F4;
  --app-gray-400: #A6B0C3;
  --app-gray-500: #7C8AA0;
  --app-gray-700: #445070;
  --app-text: #10203D;
  --app-text-soft: #5C6A85;
  --shadow-app-soft: 0 1px 2px rgba(16, 32, 61, 0.04), 0 10px 24px -14px rgba(16, 32, 61, 0.10);
  --shadow-app-lift: 0 8px 20px -6px rgba(16, 32, 61, 0.16);
}

:root[data-theme="light"] .app-shell { background: #EEF3FC; }
:root[data-theme="light"] .app-sidebar {
  background: linear-gradient(180deg, #DCE7FC 0%, #C3D8F6 100%);
  border-right: 1px solid rgba(16, 32, 61, 0.08);
}
:root[data-theme="light"] .app-sidebar-logo span { color: #10203D !important; }
:root[data-theme="light"] .app-nav-item { color: #1E3A66; }
:root[data-theme="light"] .app-nav-item:hover { background: rgba(16, 32, 61, 0.06); color: #10203D; }
:root[data-theme="light"] .app-nav-item.active { background: #8FB4F2; color: #123B82; }
:root[data-theme="light"] .app-nav-item.logout { color: #46608A; }
:root[data-theme="light"] .app-sidebar-footer { color: #5C6A85; }
:root[data-theme="light"] .app-sidebar-footer p { color: #5C6A85; }
:root[data-theme="light"] .app-sidebar-footer svg { stroke: rgba(16, 32, 61, 0.35); }
:root[data-theme="light"] .app-sidebar-footer svg circle { fill: rgba(16, 32, 61, 0.35); }

:root[data-theme="light"] .app-topbar { background: #F1F5FB; border-bottom: 1px solid rgba(16, 32, 61, 0.08); }
:root[data-theme="light"] .app-mobile-logo { color: #10203D !important; }
:root[data-theme="light"] .app-mobile-logo span { color: #10203D; }
:root[data-theme="light"] .app-search { background: #E7EDF7; border: 1px solid #D3DEEF; color: #10203D; }
:root[data-theme="light"] .app-search input { background: transparent; color: #10203D; }
:root[data-theme="light"] .app-search input::placeholder { color: #7F8AA0; }
:root[data-theme="light"] .app-notif-btn { background: #E7EDF7; border: 1px solid #D3DEEF; color: #445070; }
:root[data-theme="light"] .app-content { background: #EEF3FC; }

:root[data-theme="light"] .app-card,
:root[data-theme="light"] .app-empty,
:root[data-theme="light"] .venture-card,
:root[data-theme="light"] .post-card,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .box {
  background: #FFFFFF;
  border: 1px solid #E1E8F4;
  box-shadow: 0 1px 2px rgba(16, 32, 61, 0.04), 0 10px 24px -14px rgba(16, 32, 61, 0.12);
}
:root[data-theme="light"] .app-card:hover, :root[data-theme="light"] .venture-card:hover { border-color: rgba(47, 111, 224, 0.35); }
:root[data-theme="light"] input, :root[data-theme="light"] select, :root[data-theme="light"] textarea {
  background: #FFFFFF;
  border: 1px solid #D3DEEF;
  color: #10203D;
}
:root[data-theme="light"] input::placeholder, :root[data-theme="light"] textarea::placeholder { color: #8291A8; }
:root[data-theme="light"] hr { border-color: rgba(16, 32, 61, 0.10); }

:root[data-theme="light"] .btn-app.primary,
:root[data-theme="light"] .btn-app:not(.white):not(.ghost):not(.secondary):not(.outline) { background: #2F6FE0; color: #fff; border-color: #2F6FE0; }
:root[data-theme="light"] .btn-app.outline { background: transparent; border: 1px solid #C9D3E5; color: #33456E; }
:root[data-theme="light"] .btn-app.white { background: #2F6FE0; color: #fff; border-color: #2F6FE0; }
:root[data-theme="light"] .btn-app.ghost, :root[data-theme="light"] .btn-app.secondary { background: transparent; border: 1px solid #C9D3E5; color: #10203D; }

/* El home-hero se queda con su degradado azul oscuro en los dos temas: es la
   pieza de marca de Inicio, no una superficie que deba aclararse. Solo se
   ajusta el contraste de texto de las tarjetas de accesos que no llevan
   fondo propio (finanzas/trading), porque esos grises y azules claros
   estaban pensados para verse sobre fondo oscuro. */
:root[data-theme="light"] .home-prog-card p { color: #5C6A85; }
:root[data-theme="light"] .home-prog-card .go { color: #2F6FE0; }
:root[data-theme="light"] .home-prog-card.activo .meta { color: #B85C1E; }
:root[data-theme="light"] .home-prog-card.finanzas .meta { color: #1E8F5A; }
:root[data-theme="light"] .home-prog-card.trading .meta { color: #2F6FE0; }
:root[data-theme="light"] .home-prog-card.nexo .meta { color: #6A4FE0; }
:root[data-theme="light"] .home-prog-card.nexo .icono { background: rgba(106, 79, 224, 0.14); color: #6A4FE0; }

:root[data-theme="light"] .cg-user-btn { background: #FFFFFF; border: 1px solid #D3DEEF; color: #10203D; }
:root[data-theme="light"] .cg-menu { background: #FFFFFF; border: 1px solid #DCE4F2; box-shadow: 0 20px 50px rgba(16, 32, 61, 0.18); }
:root[data-theme="light"] .cg-menu .cabecera { border-bottom: 1px solid #EEF1F6; }
:root[data-theme="light"] .cg-menu .cabecera .s { color: #5C6A85; }
:root[data-theme="light"] .cg-menu a, :root[data-theme="light"] .cg-menu button { color: #33456E; }
:root[data-theme="light"] .cg-menu a:hover, :root[data-theme="light"] .cg-menu button:hover { background: #EEF1F6; color: #10203D; }
:root[data-theme="light"] .cg-menu .salir { color: #D6303F; }
:root[data-theme="light"] .cg-menu .separador { background: #E5EAF3; }
:root[data-theme="light"] .cg-menu .version { border-top: 1px solid #EEF1F6; color: #8291A8; }

:root[data-theme="light"] .app-mobile-tabs { background: rgba(255, 255, 255, 0.98); border-top: 1px solid #DCE4F2; }
:root[data-theme="light"] .app-mobile-tabs a { color: #7C8AA0; }
:root[data-theme="light"] .app-mobile-tabs a.active { color: #2F6FE0; }
:root[data-theme="light"] .app-mobile-tabs a.centro .burbuja { background: #FFFFFF; border: 1px solid rgba(47, 111, 224, 0.35); box-shadow: 0 10px 22px rgba(47, 111, 224, 0.18); }

:root[data-theme="light"] .zc-atajo { border: 1px solid #E1E8F4; background: #FFFFFF; }
:root[data-theme="light"] .zc-atajo:hover { border-color: rgba(47, 111, 224, 0.4); background: rgba(47, 111, 224, 0.06); }
:root[data-theme="light"] .zc-atajo .t { color: #10203D; }
:root[data-theme="light"] .zc-atajo .d { color: #5C6A85; }

:root[data-theme="light"] .pie-legal { border-top: 1px solid #DCE4F2; }
:root[data-theme="light"] .pie-legal a { color: #5C6A85; }
:root[data-theme="light"] .pie-legal a:hover { color: #2F6FE0; }
:root[data-theme="light"] .pie-legal p { color: #8291A8; }

:root[data-theme="light"] .valoracion { border: 1px solid #E1E8F4; background: #FFFFFF; }
:root[data-theme="light"] .valoracion .val-texto { color: #5C6A85; }
:root[data-theme="light"] .valoracion .val-num { border: 1px solid #D3DEEF; color: #445070; }
:root[data-theme="light"] .valoracion .val-num:hover:not(:disabled) { border-color: #2F6FE0; color: #10203D; background: rgba(47, 111, 224, 0.10); }
:root[data-theme="light"] .valoracion .val-num.elegido { border-color: #1E9A5D; color: #fff; background: #1E9A5D; }
:root[data-theme="light"] .valoracion .val-pie { color: #8291A8; }
:root[data-theme="light"] .valoracion .val-gracias { color: #1E9A5D; }

/* ── selector de tema (menu de la foto y pantalla de Perfil) ── */
.tema-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
:root[data-theme="light"] .tema-toggle { background: #E7EDF7; border: 1px solid #D3DEEF; }
.tema-toggle button { border: none; background: transparent; border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.82rem; font-weight: 600; cursor: var(--cg-cur-p, pointer); color: #99A3B5; }
:root[data-theme="light"] .tema-toggle button { color: #5C6A85; }
.tema-toggle button.active { background: #4C8DFF; color: #06162F; }
:root[data-theme="light"] .tema-toggle button.active { background: #2F6FE0; color: #fff; }


/* ─────────────────────────────────────────────
   Fase 1 de experiencia (2026-10-02)
   Inicio guiado, accesibilidad y objetivos táctiles.
───────────────────────────────────────────── */

/* ── "Tu siguiente paso": la única acción principal del inicio ── */
.cg-paso {
  position: relative;
  margin: 0 0 20px;
  padding: 22px 24px;
  border-radius: 18px;
  border: 1px solid rgba(255, 138, 61, 0.34);
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(76, 141, 255, 0.14), transparent 60%),
    linear-gradient(160deg, rgba(255, 138, 61, 0.12), rgba(255, 138, 61, 0.03));
  box-shadow: var(--shadow-card);
}
.cg-paso.cargando { min-height: 96px; border-color: rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.025); }
.cg-paso.cargando .cg-paso-titulo { color: #99A3B5; font-size: 16px; }
.cg-paso-eyebrow {
  margin: 0 0 6px; font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #FFA766;
}
.cg-paso-meta { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: #99A3B5; }
.cg-paso-meta span + span::before { content: "·"; margin-right: 14px; color: rgba(255, 255, 255, 0.28); }
.cg-paso-titulo { margin: 0 0 6px; font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2; color: #EEF2F8; text-wrap: balance; }
.cg-paso-tema { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: #9CC2FF; }
.cg-paso-texto { margin: 0; max-width: 68ch; font-size: 15px; line-height: 1.55; color: #C6CEDC; text-wrap: pretty; }
.cg-paso-aviso { margin: 10px 0 0; font-size: 13.5px; color: #FFA766; }
.cg-paso-barra { margin: 16px 0 0; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; max-width: 420px; }
.cg-paso-barra span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4C8DFF, #FF8A3D); }
.cg-paso-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cg-paso-acciones .btn-app { min-height: 44px; }
.cg-paso-otros { margin: 12px 0 0; font-size: 13px; color: #99A3B5; }
.cg-paso-ruta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0; padding: 0; font-size: 13.5px; color: #8C96A7; }
.cg-paso-ruta li { display: flex; align-items: center; gap: 8px; }
.cg-paso-ruta li span {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cg-paso-ruta li.actual { color: #EEF2F8; font-weight: 600; }
.cg-paso-ruta li.actual span { background: #4C8DFF; border-color: #4C8DFF; color: #06162F; }
.cg-paso-ruta li.hecho { color: #5FDCA0; }
.cg-paso-ruta li.hecho span { background: rgba(53, 199, 126, 0.16); border-color: rgba(53, 199, 126, 0.5); color: #5FDCA0; }
.cg-paso-perfil {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cg-paso-perfil-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cg-paso-perfil-txt strong { font-size: 14px; color: #EEF2F8; }
.cg-paso-perfil-txt span { font-size: 13px; color: #99A3B5; }
.cg-paso-perfil .btn-app { min-height: 44px; }
@media (max-width: 560px) {
  .cg-paso { padding: 18px 16px; }
  .cg-paso-acciones .btn-app { flex: 1 1 100%; justify-content: center; }
}

:root[data-theme="light"] .cg-paso {
  border-color: #F6C8A6;
  background: linear-gradient(160deg, #FFF1E6, #F3F7FF);
}
:root[data-theme="light"] .cg-paso.cargando { background: #F3F6FB; border-color: #DCE4F2; }
:root[data-theme="light"] .cg-paso-eyebrow { color: #B85C1E; }
:root[data-theme="light"] .cg-paso-titulo { color: #10203D; }
:root[data-theme="light"] .cg-paso-tema { color: #2F6FE0; }
:root[data-theme="light"] .cg-paso-texto { color: #33456E; }
:root[data-theme="light"] .cg-paso-meta, :root[data-theme="light"] .cg-paso-otros, :root[data-theme="light"] .cg-paso-perfil-txt span { color: #5C6A85; }
:root[data-theme="light"] .cg-paso-aviso { color: #B85C1E; }
:root[data-theme="light"] .cg-paso-barra { background: #DCE4F2; }
:root[data-theme="light"] .cg-paso-ruta li.actual { color: #10203D; }
:root[data-theme="light"] .cg-paso-ruta li span { border-color: #C9D3E5; }
:root[data-theme="light"] .cg-paso-ruta li.actual span { background: #2F6FE0; border-color: #2F6FE0; color: #fff; }
:root[data-theme="light"] .cg-paso-ruta li.hecho { color: #1E8F5A; }
:root[data-theme="light"] .cg-paso-perfil { border-top-color: #DCE4F2; }
:root[data-theme="light"] .cg-paso-perfil-txt strong { color: #10203D; }

/* ── hero: el logo real en vez de la silueta gris de marcador ── */
.home-hero-figure img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 40px rgba(76, 141, 255, 0.35)); opacity: 0.95; }

/* ── coach escribiendo ── */
.chat-bubble.escribiendo { color: #99A3B5; font-style: italic; }
@media (prefers-reduced-motion: no-preference) {
  .chat-bubble.escribiendo { animation: cg-latido 1.4s ease-in-out infinite; }
}
@keyframes cg-latido { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ── saltar al contenido (visible sólo con teclado) ── */
.cg-saltar {
  position: fixed; top: 8px; left: 8px; z-index: 1000;
  padding: 10px 16px; border-radius: 10px; background: #4C8DFF; color: #06162F; font-weight: 700; text-decoration: none;
  transform: translateY(-160%);
}
.cg-saltar:focus, .cg-saltar:focus-visible { transform: none; outline: 2px solid #EEF2F8; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .cg-saltar { transition: transform 0.15s ease; } }
#view:focus { outline: none; }

/* ── objetivos táctiles de al menos 44px ── */
.app-topbar-right .app-notif-btn { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.pie-legal nav a { display: inline-flex; align-items: center; min-height: 44px; }
.section-head a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
@media (max-width: 880px) { .venture-card .btn-app, .home-prog-card .go { min-height: 44px; } }

/* ── toque en móvil: sin retraso de doble toque y con resaltado propio ── */
a, button, input, select, textarea, label, [role="button"] { touch-action: manipulation; }
a, button, [role="button"] { -webkit-tap-highlight-color: rgba(76, 141, 255, 0.18); }


/* ─────────────────────────────────────────────
   Fase 2 de experiencia (2026-10-02)
   Bienvenida, avance en el coach, pantallas vacías e inicio público.
───────────────────────────────────────────── */

/* ── pantallas vacías con una salida ── */
.cg-vacio { text-align: center; padding: 40px 20px; max-width: 520px; margin: 0 auto; }
.cg-vacio-titulo { margin: 0 0 6px; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: #EEF2F8; }
.cg-vacio-texto { margin: 0; font-size: 14.5px; line-height: 1.55; color: #99A3B5; text-wrap: pretty; }
.cg-vacio-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.cg-vacio-acciones .btn-app { min-height: 44px; }
:root[data-theme="light"] .cg-vacio-titulo { color: #10203D; }
:root[data-theme="light"] .cg-vacio-texto { color: #5C6A85; }

/* ── avance del programa sobre el chat del coach ── */
.coach-avance[hidden] { display: none; }
.coach-avance {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px 24px; align-items: center;
  margin: 0 0 16px; padding: 16px 18px; border-radius: 14px;
  border: 1px solid rgba(255, 138, 61, 0.28); background: linear-gradient(160deg, rgba(255, 138, 61, 0.08), rgba(255, 138, 61, 0.02));
}
.coach-avance-meta { margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: #FFA766; font-weight: 600; }
.coach-avance-meta span + span::before { content: "·"; margin-right: 12px; color: rgba(255, 255, 255, 0.28); }
.coach-avance-tema { margin: 0; font-family: var(--font-display); font-size: 17px; color: #EEF2F8; }
.coach-avance .cg-paso-barra { margin-top: 10px; }
.coach-avance-sesion { display: flex; align-items: center; gap: 14px; justify-content: space-between; }
.coach-avance-sesion p { margin: 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 13.5px; color: #C6CEDC; }
.coach-avance-sesion strong { color: #EEF2F8; font-size: 14px; }
.coach-avance-sesion .btn-app { flex-shrink: 0; min-height: 44px; }
@media (max-width: 760px) {
  .coach-avance { grid-template-columns: 1fr; }
  .coach-avance-sesion { flex-direction: column; align-items: stretch; }
}
:root[data-theme="light"] .coach-avance { background: #FFF4EB; border-color: #F6C8A6; }
:root[data-theme="light"] .coach-avance-meta { color: #B85C1E; }
:root[data-theme="light"] .coach-avance-tema, :root[data-theme="light"] .coach-avance-sesion strong { color: #10203D; }
:root[data-theme="light"] .coach-avance-sesion p { color: #33456E; }

/* ── bienvenida ── */
.bv { max-width: 720px; margin: 8px auto 40px; padding: 26px 28px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.09); background: #0E1420; box-shadow: var(--shadow-card); }
.bv-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bv-pasos { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #FFA766; }
.bv-saltar { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: #99A3B5; }
.bv-saltar:hover { color: #EEF2F8; }
.bv-barra { margin: 6px 0 0; max-width: none; }
.bv-ruta { margin-top: 14px; }
.bv-cuerpo { margin-top: 24px; }
.bv-titulo { margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(24px, 3vw, 30px); line-height: 1.15; color: #EEF2F8; text-wrap: balance; }
.bv-titulo:focus { outline: none; }
.bv-texto { margin: 0; font-size: 15.5px; line-height: 1.55; color: #C6CEDC; max-width: 60ch; }
.bv-opciones { display: grid; gap: 12px; margin-top: 20px; }
.bv-opcion {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 14px 16px; text-align: left; cursor: var(--cg-cur-p, pointer);
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); color: inherit; font: inherit;
}
.bv-opcion:hover { border-color: rgba(76, 141, 255, 0.6); background: rgba(76, 141, 255, 0.08); }
.bv-opcion:focus-visible { outline: 2px solid #4C8DFF; outline-offset: 2px; }
.bv-opcion.elegida { border-color: #4C8DFF; background: rgba(76, 141, 255, 0.14); }
.bv-opcion img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.bv-opcion > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bv-opcion strong { font-size: 16px; color: #EEF2F8; }
.bv-opcion > span > span { font-size: 14px; color: #99A3B5; line-height: 1.45; }
.bv-recomendado { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: rgba(76, 141, 255, 0.1); border: 1px solid rgba(76, 141, 255, 0.3); }
.bv-recomendado img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.bv-recomendado p { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #99A3B5; }
.bv-recomendado strong { font-size: 17px; color: #EEF2F8; }
.bv-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.bv-acciones .btn-app { min-height: 44px; }
.bv-atras { margin-top: 14px; min-height: 44px; padding: 0; border: none; background: none; color: #7FB0FF; font: inherit; font-size: 14px; cursor: var(--cg-cur-p, pointer); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) { .bv { padding: 20px 16px; border-radius: 16px; } .bv-acciones .btn-app { flex: 1 1 100%; justify-content: center; } }
:root[data-theme="light"] .bv { background: #FFFFFF; border-color: #DCE4F2; }
:root[data-theme="light"] .bv-titulo, :root[data-theme="light"] .bv-opcion strong, :root[data-theme="light"] .bv-recomendado strong { color: #10203D; }
:root[data-theme="light"] .bv-texto { color: #33456E; }
:root[data-theme="light"] .bv-opcion { background: #F7F9FD; border-color: #DCE4F2; }
:root[data-theme="light"] .bv-opcion.elegida { background: #E8F0FF; border-color: #2F6FE0; }
:root[data-theme="light"] .bv-opcion > span > span, :root[data-theme="light"] .bv-recomendado p, :root[data-theme="light"] .bv-saltar { color: #5C6A85; }
:root[data-theme="light"] .bv-pasos { color: #B85C1E; }
:root[data-theme="light"] .bv-atras { color: #2F6FE0; }

/* ── inicio para visitantes ── */
.lp { min-height: 100vh; background: #070A12; color: #EEF2F8; font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.lp em { font-style: normal; color: #FFA766; }
.lp a { color: inherit; }
.lp-nav {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 20px;
  padding: 12px max(16px, calc((100vw - 1180px) / 2)); background: rgba(7, 10, 18, 0.88); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.lp-marca { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 19px; }
.lp-links { display: flex; gap: 4px; margin-left: 12px; }
.lp-links a { display: inline-flex; align-items: center; text-decoration: none; }
.lp-links button, .lp-links a { min-height: 44px; padding: 0 12px; border: none; background: none; color: #AEB7C6; font: inherit; font-size: 14.5px; cursor: var(--cg-cur-p, pointer); border-radius: 10px; }
.lp-links button:hover, .lp-links a:hover { color: #EEF2F8; background: rgba(255, 255, 255, 0.05); }
.lp-nav-der { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lp-idioma { min-width: 44px; min-height: 44px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); color: #C6CEDC; font: inherit; font-weight: 600; cursor: var(--cg-cur-p, pointer); }
.lp-entrar { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; text-decoration: none; font-weight: 600; color: #C6CEDC !important; }
.lp-nav .btn-app { min-height: 44px; }
.lp main:focus { outline: none; }
.lp-hero, .lp-cifras, .lp-sec, .lp-final, .lp-pie { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.lp-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: center; padding: 72px 0 56px; }
.lp-etiqueta { margin: 0 0 12px; font-family: var(--font-display); font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #FFA766; }
.lp-hero h1, .lp-hero .lp-h1 { margin: 0 0 18px; font-family: var(--font-display); font-size: clamp(34px, 5vw, 58px); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
.lp-lead { margin: 0; font-size: 17.5px; line-height: 1.6; color: #C0C8D6; max-width: 58ch; text-wrap: pretty; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.lp-cta .btn-app { min-height: 48px; padding-inline: 20px; font-size: 15px; }
.lp-nota { margin: 16px 0 0; font-size: 14px; color: #99A3B5; }
.lp-demo { margin: 0; padding: 18px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.1); background: radial-gradient(120% 120% at 0% 0%, rgba(76, 141, 255, 0.16), transparent 60%), #0E1420; box-shadow: var(--shadow-card); }
.lp-demo figcaption { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.lp-demo figcaption img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.lp-demo figcaption > span { display: flex; flex-direction: column; font-size: 12.5px; color: #99A3B5; }
.lp-demo figcaption strong { font-size: 14.5px; color: #EEF2F8; }
.lp-demo figcaption em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #99A3B5; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; padding: 3px 9px; }
.lp-burbuja { margin: 0 0 10px; padding: 12px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; max-width: 92%; }
.lp-burbuja.yo { margin-left: auto; background: #2F6FE0; color: #fff; border-bottom-right-radius: 4px; }
.lp-burbuja.coach { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); border-bottom-left-radius: 4px; color: #DCE2EC; }
.lp-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.lp-cifras div { padding: 20px 18px; background: #0B101B; display: flex; flex-direction: column; gap: 4px; }
.lp-cifras strong { font-family: var(--font-display); font-size: 30px; color: #EEF2F8; font-variant-numeric: tabular-nums; }
.lp-cifras span { font-size: 13.5px; color: #99A3B5; line-height: 1.4; }
.lp-sec { padding: 88px 0 0; scroll-margin-top: 72px; }
.lp-sec h2, .lp-final h2 { margin: 0 0 12px; font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; max-width: 24ch; }
.lp-sub { margin: 0; font-size: 16.5px; line-height: 1.6; color: #C0C8D6; max-width: 64ch; }
.lp-pasos { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-pasos li { padding: 22px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.09); background: #0B101B; }
.lp-pasos li > span { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #4C8DFF; color: #06162F; font-weight: 700; }
.lp-pasos h3 { margin: 14px 0 6px; font-size: 19px; }
.lp-pasos p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #AEB7C6; }
.lp-programas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.lp-prog { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.09); background: #0B101B; }
.lp-prog img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.lp-prog-coach { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: #FFA766; }
.lp-prog h3 { margin: 0; font-size: 21px; font-family: var(--font-display); }
.lp-prog > p:not(.lp-prog-coach) { margin: 0; font-size: 14.5px; line-height: 1.55; color: #AEB7C6; flex-grow: 1; }
.lp-prog ul { list-style: none; padding: 0; margin: 4px 0 6px; display: flex; flex-wrap: wrap; gap: 8px; }
.lp-prog li { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); font-size: 12.5px; color: #C6CEDC; font-variant-numeric: tabular-nums; }
.lp-prog .btn-app { min-height: 44px; justify-content: center; }
.lp-agentes { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 16px; margin-top: 28px; }
.lp-cuota { padding: 24px; border-radius: 18px; background: linear-gradient(160deg, rgba(76, 141, 255, 0.18), rgba(76, 141, 255, 0.04)); border: 1px solid rgba(76, 141, 255, 0.3); display: flex; flex-direction: column; gap: 6px; }
.lp-cuota strong { font-family: var(--font-display); font-size: 56px; line-height: 1; }
.lp-cuota span { font-size: 15px; line-height: 1.5; color: #C6CEDC; }
.lp-esp { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lp-esp li { padding: 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.09); background: #0B101B; display: flex; flex-direction: column; gap: 2px; }
.lp-esp strong { font-size: 15.5px; }
.lp-esp span { font-size: 13px; color: #99A3B5; }
.lp-red { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 32px; align-items: center; }
.lp-red-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.lp-red-lista li { padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(179, 164, 255, 0.3); background: rgba(179, 164, 255, 0.06); color: #D9D2FF; font-size: 14.5px; }
.lp-precios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.lp-precio { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.09); background: #0B101B; }
.lp-precio.destacado { border-color: rgba(255, 138, 61, 0.5); background: linear-gradient(165deg, rgba(255, 138, 61, 0.12), rgba(255, 138, 61, 0.02)); }
.lp-precio h3 { margin: 0; font-size: 15px; font-weight: 600; color: #C6CEDC; }
.lp-monto { margin: 0; font-family: var(--font-display); font-size: 38px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lp-monto span { font-size: 15px; font-weight: 500; color: #99A3B5; }
.lp-precio > p:not(.lp-monto) { margin: 0; font-size: 14.5px; line-height: 1.55; color: #AEB7C6; flex-grow: 1; }
.lp-precio .btn-app { min-height: 44px; justify-content: center; }
.lp-final { margin-top: 96px; padding: 48px 32px; border-radius: 24px; text-align: center; background: radial-gradient(120% 140% at 50% 0%, #123C8F 0%, rgba(11, 44, 107, 0.5) 45%, #0B101B 85%); border: 1px solid rgba(255, 255, 255, 0.09); }
.lp-final h2 { margin-inline: auto; }
.lp-final p { margin: 0 0 22px; color: #C0C8D6; font-size: 16.5px; }
.lp-final .btn-app { min-height: 48px; padding-inline: 22px; }
.lp-pie { padding: 48px 0 40px; margin-top: 56px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.lp-pie nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.lp-pie nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: #8C96A7; text-decoration: none; }
.lp-pie nav a:hover { color: #9CC2FF; text-decoration: underline; }
.lp-pie p { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: #6F7889; max-width: 80ch; }
@media (max-width: 980px) {
  .lp-links { display: none; }
  .lp-hero { grid-template-columns: 1fr; padding-top: 48px; gap: 32px; }
  .lp-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-pasos, .lp-programas, .lp-precios { grid-template-columns: 1fr; }
  .lp-agentes, .lp-red { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lp-nav { gap: 8px; }
  .lp-marca span { display: none; }
  .lp-entrar { padding: 0 4px; font-size: 14px; }
  .lp-nav .btn-app { padding-inline: 12px; font-size: 14px; }
  .lp-esp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-cta .btn-app { flex: 1 1 100%; justify-content: center; }
  .lp-sec { padding-top: 64px; }
  .lp-final { padding: 36px 18px; }
}


/* ─────────────────────────────────────────────
   Mejoras visuales (2026-10-02), según el lienzo aprobado
   "Mejoras visuales (octubre)".
───────────────────────────────────────────── */

/* ── etiquetas compartidas ── */
.cg-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; }
.cg-chip.etapa { color: #FFC59E; background: rgba(255, 138, 61, 0.12); border-color: rgba(255, 138, 61, 0.32); }
.cg-chip.busca { color: #C9BFFF; background: rgba(179, 164, 255, 0.10); border-color: rgba(179, 164, 255, 0.30); }
.cg-chip.claro { color: #EEF2F8; background: rgba(7, 10, 18, 0.35); border-color: rgba(255, 255, 255, 0.22); }
.cg-chip.fijo { height: 20px; font-size: 11px; color: #CFE0FF; background: rgba(76, 141, 255, 0.16); border-color: rgba(76, 141, 255, 0.35); }
.cg-marca { position: absolute; right: -14px; bottom: -36px; font-family: var(--font-display); font-size: 132px; font-weight: 700; line-height: 1; letter-spacing: -0.05em; color: rgba(255, 255, 255, 0.10); pointer-events: none; user-select: none; }
:root[data-theme="light"] .cg-chip.etapa { color: #9A4A14; background: #FFF1E6; border-color: #F6C8A6; }
:root[data-theme="light"] .cg-chip.busca { color: #4E3BC2; background: #F1EEFF; border-color: #D6CEFF; }

/* ── emprendimientos destacados ── */
.venture-card.vc { padding: 0; }
.vc-portada { position: relative; height: 168px; overflow: hidden; box-sizing: border-box; padding: 16px 18px; display: flex; flex-direction: column; justify-content: space-between; color: #EEF2F8; }
.vc-chips { position: relative; display: flex; flex-wrap: wrap; gap: 6px; }
.vc-titulo { position: relative; font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; max-width: 85%; text-wrap: balance; overflow-wrap: anywhere; }
.venture-card.vc .body { padding: 16px 18px 18px; gap: 10px; }
.vc-persona { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; color: #B4BCCB; }
.vc-persona .avatar-sm, .vc-persona .avatar-fallback { width: 32px; height: 32px; flex-shrink: 0; font-size: 12px; }
.vc-persona span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.venture-card.vc .headline { margin: 0; min-height: 0; font-size: 14.5px; line-height: 1.5; color: #DCE2EC; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.venture-card.vc .foot { gap: 10px; padding-top: 4px; }
.venture-card.vc .foot .btn-app { min-height: 44px; justify-content: center; }
.venture-card.vc .vc-ver { flex: 1; }
:root[data-theme="light"] .vc-persona { color: #5C6A85; }
:root[data-theme="light"] .venture-card.vc .headline { color: #33456E; }

/* ── contactos ── */
.cg-nexo-sugiere { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; text-decoration: none; color: #EEF2F8; border: 1px solid rgba(179, 164, 255, 0.32); background: linear-gradient(160deg, rgba(179, 164, 255, 0.12), rgba(179, 164, 255, 0.03)); max-width: 640px; }
.cg-nexo-sugiere .ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: rgba(179, 164, 255, 0.18); color: #C9BFFF; display: flex; align-items: center; justify-content: center; }
.cg-nexo-sugiere .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cg-nexo-sugiere .txt strong { font-size: 14.5px; }
.cg-nexo-sugiere .txt span { font-size: 13px; color: #C9BFFF; }
.cg-nexo-sugiere > svg { color: #C9BFFF; flex-shrink: 0; }
.cg-nexo-sugiere:hover { border-color: rgba(179, 164, 255, 0.55); }
.contact-row.cr { align-items: center; gap: 12px; }
.contact-row.cr .avatar, .contact-row.cr .avatar-fallback { width: 48px; height: 48px; }
.contact-row.cr .info .name-line { flex-wrap: nowrap; }
.contact-row.cr .info .name-line a { font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; min-width: 0; }
.contact-row.cr .info .headline { font-size: 13.5px; color: #B4BCCB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.contact-row.cr .info .tag-row { margin-top: 6px; gap: 6px; }
.cg-conectar { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; border: 1px solid rgba(76, 141, 255, 0.45); background: transparent; color: #9CC2FF; display: inline-flex; align-items: center; justify-content: center; cursor: var(--cg-cur-p, pointer); }
.cg-conectar svg { stroke: currentColor; }
.cg-conectar:hover { background: rgba(76, 141, 255, 0.12); }
.cg-conectar:disabled { opacity: 0.5; cursor: default; }
.contact-row.cr .menu-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
:root[data-theme="light"] .cg-nexo-sugiere { color: #10203D; background: #F4F1FF; border-color: #D6CEFF; }
:root[data-theme="light"] .cg-nexo-sugiere .txt span, :root[data-theme="light"] .cg-nexo-sugiere > svg { color: #4E3BC2; }
:root[data-theme="light"] .contact-row.cr .info .headline { color: #5C6A85; }
:root[data-theme="light"] .cg-conectar { color: #2F6FE0; border-color: #B9CCF2; }

/* ── mensajes: Cognify IA fijado ── */
.chat-convo-row.fijado { margin: 6px 8px 10px; border-radius: 14px; border: 1px solid rgba(76, 141, 255, 0.4); background: radial-gradient(120% 140% at 0% 0%, rgba(76, 141, 255, 0.20), rgba(76, 141, 255, 0.03) 70%); }
.chat-convo-row.fijado .preview { white-space: normal; color: #C6CEDC; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chat-convo-row.fijado .name { flex: 0 0 auto; }
.chat-convo-row .top-line { align-items: center; }
.chat-convo-row .top-line .cg-chip { margin-right: auto; }
.cg-avatar-ia { width: 44px; height: 44px; border-radius: 50%; background: #0D1422; border: 1px solid rgba(76, 141, 255, 0.5); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cg-avatar-ia img { width: 30px; height: 30px; }
.chat-grupo { margin: 12px 16px 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #8C96A7; }
:root[data-theme="light"] .chat-convo-row.fijado { background: #EEF4FF; border-color: #B9CCF2; }
:root[data-theme="light"] .chat-convo-row.fijado .preview { color: #33456E; }

/* ── coach: encabezado compacto ── */
.coach-cabeza { display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem; flex-wrap: wrap; }
.coach-foto { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; }
.coach-cabeza-txt h2 { margin: 0 0 .2rem; }
.coach-cabeza-txt p { margin: 0 0 .6rem; }
@media (max-width: 760px) {
  .coach-tabs { margin-bottom: 0.8rem; }
  .coach-tab img { width: 30px !important; height: 30px !important; }
  .coach-tab small { display: none !important; }
  .coach-cabeza { flex-wrap: nowrap; gap: 12px; margin-bottom: 0.8rem; }
  .coach-foto { width: 48px; height: 48px; }
  .coach-cabeza-txt { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; }
  .coach-cabeza-txt h2 { margin: 0; font-size: 18px; }
  .coach-cabeza-txt p { margin: 0; font-size: 13px; color: #99A3B5; }
  .coach-cabeza-txt > :last-child:not(p):not(h2) { flex-basis: 100%; }
  /* El chat ya no ocupa media pantalla vacío: crece con la conversación y las
     respuestas rápidas quedan justo debajo del saludo. */
  .coach-wrap { height: auto; min-height: 0; }
  .coach-chat-scroll { flex: 0 1 auto; max-height: 52vh; }
}

/* ── perfil ── */
.profile-cover { position: relative; overflow: hidden; }
.cg-faltan { display: flex; flex-direction: column; gap: 8px; margin: 0 0 1.4rem; max-width: 520px; }
.cg-faltan a { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, 0.22); color: #DCE2EC; text-decoration: none; font-size: 14.5px; }
.cg-faltan a:hover { border-color: rgba(76, 141, 255, 0.6); }
.cg-faltan .mas { width: 24px; height: 24px; border-radius: 50%; background: rgba(76, 141, 255, 0.16); color: #9CC2FF; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; }
.cg-mi-programa { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; text-decoration: none; color: #EEF2F8; border: 1px solid rgba(255, 138, 61, 0.32); background: linear-gradient(160deg, rgba(255, 138, 61, 0.10), rgba(255, 138, 61, 0.02)); max-width: 520px; }
.cg-mi-programa .cab { display: flex; align-items: center; gap: 10px; }
.cg-mi-programa .cab img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.cg-mi-programa .cab > span { display: flex; flex-direction: column; min-width: 0; }
.cg-mi-programa .cab strong { font-size: 15px; }
.cg-mi-programa .cab span span { font-size: 13px; color: #FFA766; }
.cg-mi-programa .cg-paso-barra { margin: 0; max-width: none; display: block; }
:root[data-theme="light"] .cg-faltan a { color: #10203D; border-color: #C9D3E5; }
:root[data-theme="light"] .cg-mi-programa { color: #10203D; background: #FFF4EB; border-color: #F6C8A6; }
:root[data-theme="light"] .cg-mi-programa .cab span span { color: #B85C1E; }

/* "Mi avance" del diagnóstico (js/diagnostico.js) traía fondo blanco fijo: en
   el tema oscuro era la única tarjeta blanca del perfil. */
:root:not([data-theme="light"]) #dg-avance.dg-avance { background: #0E1420; border-color: rgba(255, 255, 255, 0.09); color: #EEF2F8; }
:root:not([data-theme="light"]) #dg-avance.dg-avance .dg-boton.secundario { color: #9CC2FF; border-color: rgba(76, 141, 255, 0.45); }

.cg-mi-diag { margin: 8px 0 0; max-width: 520px; font-size: 13.5px; color: #B4BCCB; }
.cg-mi-diag strong { color: #EEF2F8; }
:root[data-theme="light"] .cg-mi-diag { color: #5C6A85; }
:root[data-theme="light"] .cg-mi-diag strong { color: #10203D; }


/* ===== Red para todos (octubre) =====
   Bienvenida con caminos sin programa, temas de interés, tipos de
   publicación y el feed en Inicio. */
.bv-emoji { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; background: rgba(76, 141, 255, 0.14); border: 1px solid rgba(76, 141, 255, 0.35); }
.bv-separador { margin: 10px 0 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #8C96A7; }

.cg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-chipsel-btn, .cg-chipsel span {
  min-height: 40px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center;
  font: inherit; font-size: 14px; font-weight: 500; cursor: var(--cg-cur-p, pointer); touch-action: manipulation;
  color: #C6CEDC; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14);
}
.cg-chipsel-btn[aria-pressed="true"], .cg-chipsel input:checked + span { color: #fff; background: rgba(76, 141, 255, 0.22); border-color: #4C8DFF; }
.cg-chipsel-btn:focus-visible, .cg-chipsel input:focus-visible + span { outline: 2px solid #4C8DFF; outline-offset: 2px; }
.cg-chipsel { position: relative; }
.cg-chipsel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cg-tipos { border: 0; padding: 0; margin: 0 0 1rem; }
.cg-tipos legend { font-weight: 600; margin-bottom: 0.6rem; padding: 0; }
.cg-temas { display: grid; gap: 12px; margin-top: 16px; }
.cg-temas-otro { display: flex; gap: 8px; }
.cg-temas-otro input { flex: 1; min-width: 0; min-height: 44px; }

.bv-personas { list-style: none; margin: 16px 0 0; padding: 0; }
.bv-persona { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.bv-persona-foto { flex-shrink: 0; text-decoration: none; }
.bv-persona-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #99A3B5; }
.bv-persona-txt a { color: inherit; text-decoration: none; }
.bv-persona-txt strong { font-size: 15px; color: #EEF2F8; }
.bv-persona-comun { color: #9CC2FF; }
.bv-persona-vacio { padding: 12px 0; color: #99A3B5; }

.cg-tareas { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.cg-tareas a { min-height: 44px; display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-size: 15px; }
.cg-tareas .marca { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; border: 1.5px solid rgba(255, 255, 255, 0.3); }
.cg-tareas .hecha .marca { background: #35C77E; border-color: #35C77E; color: #06162F; }
.cg-tareas .hecha .t { text-decoration: line-through; color: #8C96A7; }
.cg-tareas .x { margin-left: auto; font-size: 13px; color: #8C96A7; }

.cg-feed { margin: 8px 0 28px; }
.cg-feed-nuevo { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; text-decoration: none; color: #8C96A7; font-size: 15px; }
.cg-feed-filtros { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: none; }
.cg-feed-filtros::-webkit-scrollbar { display: none; }
.cg-feed-filtro { flex-shrink: 0; min-height: 36px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: 14px; cursor: var(--cg-cur-p, pointer); color: #C6CEDC; background: transparent; border: 1px solid rgba(255, 255, 255, 0.14); }
.cg-feed-filtro[aria-selected="true"] { background: #EEF2F8; color: #070A12; border-color: #EEF2F8; font-weight: 600; }
.cg-feed-mas { display: flex; justify-content: center; }
.post-autor { font-size: 0.8rem; color: var(--app-text-soft, #99A3B5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cg-tipo { flex-shrink: 0; height: 24px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; white-space: nowrap; color: #9CC2FF; background: rgba(76, 141, 255, 0.10); border: 1px solid rgba(76, 141, 255, 0.30); }
.cg-tipo-pregunta { color: #FFD38A; background: rgba(255, 190, 80, 0.12); border-color: rgba(255, 190, 80, 0.32); }
.cg-tipo-idea { color: #C9BFFF; background: rgba(179, 164, 255, 0.10); border-color: rgba(179, 164, 255, 0.30); }
.cg-tipo-logros { color: #9FE3C1; background: rgba(53, 199, 126, 0.10); border-color: rgba(53, 199, 126, 0.30); }
.cg-tipo-presentacion { color: #FFC59E; background: rgba(255, 138, 61, 0.12); border-color: rgba(255, 138, 61, 0.32); }
.tag.tema { color: #9CC2FF; background: rgba(76, 141, 255, 0.10); border-color: rgba(76, 141, 255, 0.30); }

:root[data-theme="light"] .cg-chipsel-btn, :root[data-theme="light"] .cg-chipsel span, :root[data-theme="light"] .cg-feed-filtro { color: #33415C; background: #fff; border-color: #DCE4F2; }
:root[data-theme="light"] .cg-chipsel-btn[aria-pressed="true"], :root[data-theme="light"] .cg-chipsel input:checked + span { color: #0B2E6B; background: #E8F0FF; border-color: #2F6FE0; }
:root[data-theme="light"] .cg-feed-filtro[aria-selected="true"] { background: #10203D; color: #fff; border-color: #10203D; }
:root[data-theme="light"] .bv-persona { border-color: #E6ECF5; }
:root[data-theme="light"] .bv-persona-txt strong { color: #10203D; }
:root[data-theme="light"] .bv-persona-txt, :root[data-theme="light"] .bv-persona-vacio, :root[data-theme="light"] .cg-feed-nuevo { color: #5C6A85; }
:root[data-theme="light"] .bv-persona-comun { color: #2F6FE0; }
:root[data-theme="light"] .cg-tareas .marca { border-color: #B8C4D8; }
:root[data-theme="light"] .cg-tipo, :root[data-theme="light"] .tag.tema { color: #1F56B8; }
:root[data-theme="light"] .cg-tipo-pregunta { color: #8A5A00; }
:root[data-theme="light"] .cg-tipo-idea { color: #5B4BD6; }
:root[data-theme="light"] .cg-tipo-logros { color: #16764A; }
:root[data-theme="light"] .cg-tipo-presentacion { color: #A84C10; }


/* ===== Seguir, etiquetas y Explorar ===== */
.cg-hashtag { color: #7FB0FF; text-decoration: none; font-weight: 500; }
.cg-hashtag:hover { text-decoration: underline; }
.cg-tendencias { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.cg-tendencias-t { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #8C96A7; margin-right: 2px; }
.cg-tag-chip { min-height: 32px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 500; text-decoration: none; color: #9CC2FF; background: rgba(76, 141, 255, 0.10); border: 1px solid rgba(76, 141, 255, 0.30); }
.cg-tag-chip:hover { background: rgba(76, 141, 255, 0.18); }
.cg-explorar { max-width: 720px; margin: 0 auto; }
.cg-cab-explorar h1 { margin: 0 0 6px; font-size: 1.6rem; }
.cg-cab-explorar p { margin: 0 0 14px; color: #99A3B5; }
.cg-explorar-buscar { display: flex; gap: 8px; margin-bottom: 20px; }
.cg-explorar-buscar input { flex: 1; min-width: 0; min-height: 44px; }
.cg-explorar-sub { font-size: 0.95rem; margin: 0 0 10px; }
.cg-explorar-vacio { margin: 0; color: #99A3B5; font-size: 14px; }
.cg-seguidores { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 14px; color: #99A3B5; }
.cg-seguidores button { background: none; border: 0; padding: 4px 0; min-height: 32px; font: inherit; color: inherit; cursor: var(--cg-cur-p, pointer); }
.cg-seguidores button b { color: #EEF2F8; }
.cg-seguidores button:hover span { text-decoration: underline; }
.cg-te-sigue { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.profile-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-lista-seguir h2 { margin: 0 0 12px; font-size: 1.1rem; }
.cg-lista-seguir ul { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.cg-lista-seguir li a { display: flex; align-items: center; gap: 10px; padding: 10px 0; text-decoration: none; color: inherit; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.cg-lista-seguir li a > span { display: flex; flex-direction: column; font-size: 13px; color: #99A3B5; min-width: 0; }
.cg-lista-seguir li a strong { font-size: 15px; color: #EEF2F8; }
.cg-lista-seguir .vacio { padding: 10px 0; color: #99A3B5; }
:root[data-theme="light"] .cg-hashtag { color: #1F56B8; }
:root[data-theme="light"] .cg-tag-chip { color: #1F56B8; background: #E8F0FF; border-color: #C9D9F7; }
:root[data-theme="light"] .cg-cab-explorar p, :root[data-theme="light"] .cg-explorar-vacio, :root[data-theme="light"] .cg-seguidores, :root[data-theme="light"] .cg-lista-seguir li a > span { color: #5C6A85; }
:root[data-theme="light"] .cg-seguidores button b, :root[data-theme="light"] .cg-lista-seguir li a strong { color: #10203D; }
:root[data-theme="light"] .cg-te-sigue { background: #EEF2F8; }
:root[data-theme="light"] .cg-lista-seguir li a { border-color: #E6ECF5; }

.cg-exp-gente { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 16px; scrollbar-width: none; }
.cg-exp-gente::-webkit-scrollbar { display: none; }
.cg-exp-persona { flex: 0 0 132px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.03); text-decoration: none; color: inherit; text-align: center; }
.cg-exp-persona strong { font-size: 14px; color: #EEF2F8; }
.cg-exp-persona span { font-size: 12px; color: #99A3B5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:root[data-theme="light"] .cg-exp-persona { background: #fff; border-color: #DCE4F2; }
:root[data-theme="light"] .cg-exp-persona strong { color: #10203D; }
:root[data-theme="light"] .cg-exp-persona span { color: #5C6A85; }

.post-edit-btn { margin-left: auto; background: none; border: 0; color: var(--app-text-soft, #99A3B5); font: inherit; font-size: 0.85rem; cursor: var(--cg-cur-p, pointer); min-height: 36px; padding: 0 6px; }
.post-edit-btn:hover { color: inherit; }
.post-edit-form { display: grid; gap: 8px; margin: 0 0 0.8rem; }
.post-edit-form textarea { min-height: 140px; width: 100%; box-sizing: border-box; }
.post-edit-acciones { display: flex; justify-content: flex-end; gap: 8px; }


/* iPhone con la app instalada (barra de estado translúcida y viewport-fit=cover):
   la barra de la página de venta quedaba debajo del reloj y la batería. El
   área segura de arriba se suma al relleno; en navegadores sin muesca vale 0. */
.lp-nav {
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  padding-left: max(16px, calc((100vw - 1180px) / 2), env(safe-area-inset-left, 0px));
  padding-right: max(16px, calc((100vw - 1180px) / 2), env(safe-area-inset-right, 0px));
}
@media (max-width: 768px) {
  .auth-shell { padding-top: env(safe-area-inset-top, 0px); }
}

.cg-solicitudes { padding: 1rem 1.2rem; margin-bottom: 1.4rem; }
.cg-solicitudes h2 { font-size: 1rem; margin: 0 0 0.6rem; }
.cg-solicitudes ul { list-style: none; margin: 0; padding: 0; }
.cg-solicitudes li, .cg-lista-seguir li { display: flex; align-items: center; gap: 10px; }
.cg-solicitudes li > a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 0; text-decoration: none; color: inherit; }
.cg-solicitudes li > a > span { display: flex; flex-direction: column; font-size: 13px; color: var(--app-text-soft, #99A3B5); }
.cg-solicitudes li .acc { display: flex; gap: 6px; }
.cg-lista-seguir li > a { flex: 1; min-width: 0; }

/* Los círculos de tipos de publicación sólo aparecen si hay publicaciones de
   ese tipo: el display de la regla base pisaba el atributo hidden. */
.story-circle[hidden], .story-row[hidden] { display: none !important; }
.story-row { scrollbar-width: none; }
.story-row::-webkit-scrollbar { display: none; }


/* Cursor con la marca Cognify: flecha azul marino con destello azul y, sobre lo
   que se puede tocar, la misma flecha en azul. Solo con mouse; en pantallas
   táctiles no existe cursor. Las reglas con cursor:pointer usan --cg-cur-p. */
@media (hover: hover) and (pointer: fine) {
  :root {
    --cg-cur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2316264A'/%3E%3Cstop offset='1' stop-color='%230B1428'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 3v20.5l5.6-5.2 3.6 8.3 3.7-1.6-3.6-8.2H21z' fill='url%28%23g%29' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M25 3.5l1.1 2.9 2.9 1.1-2.9 1.1L25 11.5l-1.1-2.9-2.9-1.1 2.9-1.1z' fill='%234C8DFF' stroke='%23fff' stroke-width='.9' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, auto;
    --cg-cur-p: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%235B97FF'/%3E%3Cstop offset='1' stop-color='%232F6FE0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 3v20.5l5.6-5.2 3.6 8.3 3.7-1.6-3.6-8.2H21z' fill='url%28%23g%29' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M25 3.5l1.1 2.9 2.9 1.1-2.9 1.1L25 11.5l-1.1-2.9-2.9-1.1 2.9-1.1z' fill='%230E1A33' stroke='%23fff' stroke-width='.9' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, pointer;
  }
  html, body { cursor: var(--cg-cur); }
  a[href], button, [role="button"], label[for], summary, select,
  input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"] {
    cursor: var(--cg-cur-p);
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), textarea, [contenteditable="true"] { cursor: text; }
}

/* ── promo de Capital City (inicio público y con sesión) ── */
.cc-promo {
  position: relative; overflow: hidden; isolation: isolate; box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center;
  padding: 36px 40px; margin: 0 0 2rem; border-radius: 22px;
  border: 1px solid rgba(255, 196, 92, 0.22);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255, 138, 61, 0.20), transparent 60%),
    radial-gradient(80% 100% at 0% 100%, rgba(76, 141, 255, 0.16), transparent 60%),
    #0E1420;
  color: #EEF2F8;
}
.lp .cc-promo { width: min(1180px, calc(100% - 32px)); margin: 56px auto 0; }
.cc-promo-etiqueta { margin: 0 0 12px; font-family: 'Space Grotesk', var(--font-display); font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #FFC45C; }
.cc-promo h2 { margin: 0 0 14px; font-family: 'Space Grotesk', var(--font-display); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; color: #EEF2F8; }
.cc-promo-lead { margin: 0; font-size: 16.5px; line-height: 1.6; color: #C0C8D6; max-width: 52ch; text-wrap: pretty; }
.cc-promo-datos { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.cc-promo-datos li { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #DCE2EC; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); }
.cc-promo-jugar {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 26px; padding: 0 22px;
  border-radius: 12px; font-weight: 700; font-size: 15px; text-decoration: none;
  color: #2A1A00 !important; background: linear-gradient(180deg, #FFD66B, #F2A93B);
  box-shadow: 0 8px 22px -10px rgba(242, 169, 59, 0.75);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cc-promo-jugar:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgba(242, 169, 59, 0.85); }
.cc-promo-jugar:focus-visible, .cc-promo-sonido:focus-visible { outline: 3px solid #4C8DFF; outline-offset: 3px; }
.cc-promo-video { box-sizing: border-box; position: relative; margin: 0; width: min(280px, 32vw); aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #E9EEDD; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.cc-promo-video[hidden] { display: none; }
.cc-promo-video video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: var(--cg-cur-p, pointer); }
.cc-promo-sonido {
  position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; display: grid; place-items: center;
  border: none; border-radius: 50%; color: #fff; background: rgba(10, 14, 24, 0.62); backdrop-filter: blur(6px);
  cursor: var(--cg-cur-p, pointer);
}
.cc-promo-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 14px;
  border: none; border-radius: 999px; font: inherit; font-weight: 700; font-size: 15px; white-space: nowrap;
  color: #2A1A00; background: linear-gradient(180deg, #FFD66B, #F2A93B);
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.55); cursor: var(--cg-cur-p, pointer);
}
.cc-promo-play[hidden] { display: none; }
.cc-promo-play:hover { filter: brightness(1.05); }
.cc-promo-play:focus-visible { outline: 3px solid #4C8DFF; outline-offset: 3px; }
.cc-promo-sonido .on, .cc-promo-sonido[aria-pressed="true"] .off { display: none; }
.cc-promo-sonido[aria-pressed="true"] .on { display: inline-flex; }
.cc-promo-sonido span { display: inline-flex; }
@media (max-width: 760px) {
  .cc-promo { grid-template-columns: 1fr; gap: 24px; padding: 24px 18px; text-align: left; }
  .lp .cc-promo { margin-top: 40px; }
  .cc-promo-video { width: min(300px, 100%); justify-self: center; order: -1; }
  .cc-promo-jugar { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .cc-promo-jugar { transition: none; } }
:root[data-theme="light"] .cc-promo.en-app {
  border-color: #F3D9A8;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255, 166, 77, 0.22), transparent 60%),
    radial-gradient(80% 100% at 0% 100%, rgba(76, 141, 255, 0.14), transparent 60%),
    #FFF8EC;
  color: #10203D;
}
:root[data-theme="light"] .cc-promo.en-app h2 { color: #10203D; }
:root[data-theme="light"] .cc-promo.en-app .cc-promo-lead { color: #33456E; }
:root[data-theme="light"] .cc-promo.en-app .cc-promo-etiqueta { color: #B85C1E; }
:root[data-theme="light"] .cc-promo.en-app .cc-promo-datos li { color: #33456E; background: rgba(255, 255, 255, 0.7); border-color: #EBDDC3; }

/* ── Suscripciones (#/suscripciones): la única página con montos ── */
.app-sidebar-nav .sus-nav { display: none; } /* el panel se abre desde Suscripciones y desde el menú de la foto */
.sx { max-width: 1040px; margin: 0 auto; padding: 0 0 2rem; }
.sx-cab h1 { font-family: var(--font-display); font-size: 1.6rem; margin: 0 0 .4rem; color: var(--text-primary); }
.sx-cab p { margin: 0 0 1.2rem; color: var(--text-secondary); max-width: 62ch; line-height: 1.55; }
.sx-promo { display: flex; flex-direction: column; gap: .25rem; padding: .9rem 1.1rem; margin: 0 0 1.2rem; border-radius: 14px; border: 1px solid rgba(53, 199, 126, .4); background: rgba(53, 199, 126, .1); color: var(--text-primary); line-height: 1.5; }
.sx-promo strong { color: #35C77E; }
.sx-planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sx-plan { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface-raised); }
.sx-plan.destacado { border-color: rgba(255, 138, 61, .55); background: linear-gradient(165deg, rgba(255, 138, 61, .13), rgba(255, 138, 61, .02)), var(--surface-raised); }
.sx-plan h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-secondary); }
.sx-monto { margin: 0; font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.sx-monto span { display: block; font-family: inherit; font-size: .82rem; font-weight: 400; color: var(--text-secondary); margin-top: .2rem; }
.sx-plan ul { margin: 0; padding-left: 1.1rem; color: var(--text-secondary); font-size: 14.5px; line-height: 1.55; flex-grow: 1; }
.sx-plan li + li { margin-top: .3rem; }
.sx-plan .btn-app { min-height: 44px; justify-content: center; }
.sx-extra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 16px 0 0; padding: 18px 22px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-raised); }
.sx-extra h2, .sx-sub { margin: 0 0 .3rem; font-size: 1.05rem; color: var(--text-primary); }
.sx-extra p { margin: 0; color: var(--text-secondary); }
.sx-sub { margin: 1.6rem 0 .7rem; }
.sx-programas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sx-programas a { display: flex; flex-direction: column; gap: .2rem; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-raised); text-decoration: none; color: var(--text-primary); }
.sx-programas a:hover { border-color: var(--accent); }
.sx-programas span { color: var(--text-secondary); font-size: .9rem; }
.sx-nota { margin: .9rem 0 0; color: var(--text-secondary); font-size: .92rem; }
.sx-nota a, .sx-liga { color: var(--accent); font-weight: 600; }
.sx-liga { appearance: none; border: 0; background: none; padding: 0; font: inherit; cursor: var(--cg-cur-p, pointer); }
.sx-aviso { margin: 1.2rem 0 0; color: var(--text-secondary); font-size: .82rem; }
@media (max-width: 760px) { .sx-planes, .sx-programas { grid-template-columns: 1fr; } }

.sx-agentes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sx-agentes a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-raised); text-decoration: none; color: var(--text-primary); height: 100%; }
.sx-agentes a:hover { border-color: var(--accent); }
.sx-agentes img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sx-ag-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sx-ag-txt span { color: var(--text-secondary); font-size: .85rem; }
.sx-ag-precio { font-family: var(--font-display); font-weight: 700; white-space: nowrap; text-align: right; }
.sx-ag-precio small { display: block; font-family: inherit; font-weight: 400; font-size: .72rem; color: var(--text-secondary); }
@media (max-width: 900px) { .sx-agentes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sx-agentes { grid-template-columns: 1fr; } }