/* Páginas públicas: Home (/) e Ingresar (/ingresar). Misma identidad que la app. */

:root {
  --brand: #5B4BDB;
  --brand-strong: #4A3BC4;
  --brand-deep: #35289A;
  --brand-soft: #EEEBFD;
  --brand-muted: #DAD5FA;
  --brand-line: #8B7FE8;
  --text: #1B1B2F;
  --text-2: #3F4156;
  --muted: #5F6177;
  --border: #E6E6EF;
  --border-soft: #F0F0F5;
  --bg: #F7F7FB;
  --surface: #FFFFFF;
  --ink: #1B1B2F;
  --ink-2: #26263D;
  --ink-line: #3E3E5A;
  --warm-bg: #FDEEE3;
  --warm-text: #9A3F06;
  --gutter: 80px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Figtree", system-ui, sans-serif;
  color: var(--text);
  background: var(--surface);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-strong); }
a:hover { color: var(--brand-deep); }
h1, h2, h3, p { margin: 0; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.muted { color: var(--muted); }
.pequeno { font-size: 13px; }
.acento { color: var(--brand); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--brand-line); outline-offset: 2px; }

/* Marca */
.marca { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--text); text-decoration: none; }
.marca:hover { color: var(--text); }
.logo-marca { display: block; height: 32px; width: auto; }

/* Botones */
.boton {
  height: 48px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.boton:hover { color: var(--text); border-color: var(--dashed, #B9B9C9); }
.boton.primario { background: var(--brand); border-color: var(--brand); color: #fff; }
.boton.primario:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
.boton.primario:disabled { opacity: 0.6; cursor: default; }
.boton.grande { height: 56px; padding: 0 28px; font-size: 17px; }
.boton.blanco { background: #fff; border-color: #fff; color: var(--ink); }
.boton.blanco:hover { background: var(--brand-soft); color: var(--ink); }

/* Pills */
.pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill-sube { background: var(--warm-bg); color: var(--warm-text); }
.pill-marca { background: var(--brand-soft); color: var(--brand-strong); }
.pill-neutra { background: var(--border-soft); color: var(--text-2); }

/* ----- Navegación ----- */
.nav {
  position: sticky; top: 0; z-index: 10; height: 80px; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border);
}
.nav-links { display: flex; gap: 32px; }
.nav-links a { font-size: 15px; font-weight: 500; color: var(--text-2); text-decoration: none; }
.nav-links a:hover { color: var(--brand); }
.nav-acciones { display: flex; align-items: center; gap: 12px; }
.nav-acciones .boton { height: 44px; padding: 0 20px; font-size: 15px; border-radius: 12px; }
.nav-secundario { height: 44px; padding: 0 12px; display: inline-flex; align-items: center; font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none; }

/* ----- Hero ----- */
.hero { background: var(--bg); padding: 80px var(--gutter) 0; display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; overflow: hidden; }
.etiqueta { padding: 6px 14px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong); font-size: 13px; font-weight: 600; }
.hero h1 { max-width: 900px; font-size: clamp(40px, 5.2vw, 68px); line-height: 1.02; font-weight: 800; letter-spacing: -0.035em; }
.bajada { max-width: 640px; font-size: 20px; line-height: 1.5; color: var(--muted); }
.hero-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.nota { font-size: 14px; color: var(--muted); }
.nota strong { color: var(--text); }

/* Vista previa */
.preview { position: relative; width: min(1180px, 100%); margin-top: 32px; }
.preview-marco {
  background: var(--surface); border: 1px solid var(--border); border-bottom: 0; border-radius: 24px 24px 0 0;
  padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 20px; text-align: left;
}
.preview-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.preview-cabecera > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.preview-titulo { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.segmento { display: flex; padding: 4px; border-radius: 12px; border: 1px solid var(--border); font-size: 13px; }
.segmento span { height: 32px; padding: 0 12px; display: flex; align-items: center; color: var(--muted); border-radius: 8px; }
.segmento .activo { background: var(--ink); color: #fff; font-weight: 600; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi { border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.kpi-label, .kpi-sub { font-size: 13px; color: var(--muted); }
.kpi-sub { font-size: 12px; }
.kpi-valor { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.preview-graficos { display: flex; gap: 14px; }
.tarjeta { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.tarjeta-titulo { font-size: 16px; font-weight: 600; }
.tarjeta-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.grafico { flex: 3 1 0; }
.ranking { flex: 2 1 0; gap: 14px; }
.fila-rank { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.fila-rank > div { display: flex; justify-content: space-between; gap: 12px; }
.riel { height: 6px; border-radius: 999px; background: var(--border-soft); }
.riel span { display: block; height: 6px; border-radius: 999px; background: var(--brand); }

/* Barras (altura en --alto, relativa al área del gráfico) */
.barras { position: relative; height: 200px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 10px; border-bottom: 1px solid var(--border); }
.barras i { width: 48px; height: var(--alto); border-radius: 10px 10px 0 0; background: var(--brand-muted); position: relative; }
.barras i.actual { background: var(--brand); }
.barras .promedio { position: absolute; left: 0; right: 0; bottom: var(--alto); border-top: 2px dashed var(--brand-line); }
.barras.grande { height: 240px; padding: 0 12px; }
.barras.grande i { width: 52px; }
.barras.grande i::before { content: attr(data-valor); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 0 4px; background: var(--surface); font-size: 13px; color: var(--muted); white-space: nowrap; z-index: 1; }
.barras.grande i.actual::before { color: var(--text); font-weight: 700; }
.meses { display: flex; justify-content: space-between; padding: 0 10px; font-size: 13px; color: var(--muted); }
.meses span { width: 48px; text-align: center; }
.meses .actual { font-weight: 700; color: var(--text); }
.leyenda-promedio { display: inline-flex; align-items: center; gap: 8px; }
.leyenda-promedio span { width: 20px; border-top: 2px dashed var(--brand-line); }

.consejo-flotante {
  position: absolute; left: -40px; top: 300px; width: 300px; background: var(--ink); color: #E4E4EE; border-radius: 20px;
  padding: 20px; display: flex; gap: 12px; align-items: flex-start; box-shadow: 0 8px 24px rgba(27, 27, 47, 0.12); text-align: left;
}
.consejo-flotante p { font-size: 14px; line-height: 1.45; }
.num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: #3A2F8F; color: #CFC8FF; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.consejo-flotante strong, .consejo strong, .paso-visual.oscuro strong { color: #fff; }

/* ----- Bancos ----- */
.bancos { padding: 48px var(--gutter); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; font-size: 15px; color: var(--muted); }
.bancos-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 48px; font-size: 20px; font-weight: 700; color: var(--text-2); letter-spacing: -0.01em; }

/* ----- Secciones ----- */
.seccion { padding: 96px var(--gutter); display: flex; flex-direction: column; gap: 48px; }
.seccion.gris { background: var(--bg); }
.seccion h2 { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; }
.seccion-cabecera { display: flex; flex-direction: column; gap: 14px; }
.seccion-cabecera p { font-size: 18px; line-height: 1.5; color: var(--muted); }
.seccion-cabecera.fila { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; }
.seccion-cabecera.fila h2 { max-width: 560px; }
.seccion-cabecera.fila p { max-width: 460px; }
.seccion-cabecera.centro { align-items: center; text-align: center; }
.seccion-cabecera.centro p { max-width: 620px; }
.sobretitulo { font-size: 13px; font-weight: 600; color: var(--brand-strong); letter-spacing: 0.04em; text-transform: uppercase; }
.sobretitulo.claro { color: #CFC8FF; }
.icono-caja { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.icono-caja .ic { width: 22px; height: 22px; stroke-width: 1.75; }

/* Pasos */
.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.paso { background: var(--bg); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 8px; }
.paso h3 { font-size: 22px; font-weight: 700; }
.paso p { font-size: 16px; line-height: 1.5; color: var(--muted); }
.paso-visual { height: 150px; margin-bottom: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.paso-visual.subir { border: 2px dashed var(--brand-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; }
.paso-visual.lista { padding: 14px 16px; display: flex; flex-direction: column; justify-content: center; gap: 8px; font-size: 14px; }
.paso-visual.lista div { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.paso-visual.oscuro { background: var(--ink); border: 0; padding: 18px; display: flex; gap: 12px; align-items: center; }
.paso-visual.oscuro p { font-size: 14px; line-height: 1.45; color: #E4E4EE; }

/* Funciones */
.funcion { display: flex; gap: 72px; align-items: center; }
.funcion.invertida { flex-direction: row-reverse; }
.funcion + .funcion { margin-top: 96px; }
.funcion-texto { flex: 1 1 0; display: flex; flex-direction: column; gap: 16px; }
.funcion-texto h3 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.funcion-texto p { font-size: 17px; line-height: 1.55; color: var(--muted); }
.funcion-visual { flex: 1.15 1 0; min-width: 0; }
.tarjeta.funcion-visual { border-radius: 24px; padding: 28px 32px; gap: 16px; }
.funcion-visual.pila { display: flex; flex-direction: column; gap: 16px; }
.checks { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.checks li { display: flex; gap: 10px; align-items: center; }
.checks .ic { color: var(--brand); stroke-width: 2.25; }
.recurrente { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--border-soft); font-size: 15px; }
.recurrente:last-child { border-bottom: 0; }
.recurrente > span:first-child { display: flex; flex-direction: column; }
.recurrente small { font-size: 13px; color: var(--muted); }
.recurrente .derecha { display: flex; align-items: center; gap: 10px; }
.escenarios-demo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.escenario strong { font-size: 17px; }
.escenario.activo { border: 2px solid var(--brand); padding: 19px 21px; }
.monto { font-size: 22px; font-weight: 700; }
.bancos-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bancos-tags span { padding: 4px 10px; border-radius: 8px; background: var(--border-soft); font-size: 13px; }
.deudas-demo .monto { font-size: 20px; }
.barra-apilada { display: flex; gap: 3px; height: 16px; border-radius: 999px; overflow: hidden; }
.leyenda { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--text-2); }
.leyenda span { display: flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; }

/* Sección oscura */
.seccion.oscura { background: var(--ink); color: #E4E4EE; flex-direction: row; gap: 80px; align-items: center; }
.oscura-texto { flex: 1 1 0; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.oscura-texto h2 { color: #fff; }
.oscura-texto p { font-size: 18px; line-height: 1.55; color: #C9CAD8; }
.oscura-texto .boton { margin-top: 8px; height: 52px; }
.consejos { flex: 1 1 0; background: var(--ink-2); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.consejo { display: flex; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--ink-line); }
.consejo:nth-last-of-type(1) { padding-bottom: 0; border-bottom: 0; }
.consejo .num { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
.consejo p { font-size: 16px; line-height: 1.5; }
.nota-ejemplo { font-size: 13px; color: #9A9CB3; }
/* Franja de seguridad bajo el hero: el mensaje de confianza, visible y sin tener que buscarlo */
.franja-segura { padding: 48px var(--gutter) 8px; }
.franja-segura-caja { display: flex; gap: 20px; align-items: center; padding: 20px 28px; border-radius: 24px; background: var(--ink); color: #E4E4EE; }
.franja-segura-icono { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: #3A2F8F; color: #CFC8FF; display: flex; align-items: center; justify-content: center; }
.franja-segura-icono .ic { width: 22px; height: 22px; stroke-width: 1.75; }
.franja-segura-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.franja-segura-texto h2 { color: #fff; font-size: 19px; line-height: 1.3; }
.franja-segura-texto p { font-size: 15px; line-height: 1.55; color: #D5D6E4; }
.franja-segura-texto .enlace-fuerte { color: #CFC8FF; font-weight: 600; white-space: nowrap; }
.franja-segura-texto .enlace-fuerte:hover { color: #fff; }
@media (max-width: 720px) {
  /* Ícono y título en una línea; el texto usa todo el ancho debajo. */
  .franja-segura-caja { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 12px; padding: 18px 16px; }
  .franja-segura-texto { display: contents; }
  .franja-segura-texto p { grid-column: 1 / -1; }
  .franja-segura-icono { width: 36px; height: 36px; border-radius: 10px; }
  .franja-segura-icono .ic { width: 18px; height: 18px; }
  .franja-segura-texto h2 { font-size: 18px; }
}
/* "Tú decides": un solo ejemplo en tres pasos (ver → ajustar → ahorrar) dentro de la sección oscura */
.camino-titulo { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #9A9CB3; }
.camino-paso { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.camino-paso.columna { flex-direction: column; align-items: stretch; }
.camino-paso p { display: flex; flex-direction: column; gap: 2px; }
.camino-paso small { font-size: 14px; line-height: 1.45; color: #B4B6C8; }
.camino-monto { color: #fff; font-size: 17px; white-space: nowrap; }
.camino-monto.destacado { color: #B9AFFF; }
.camino-barra { height: 10px; border-radius: 999px; background: var(--ink-line); overflow: hidden; }
.camino-barra span { display: block; height: 100%; border-radius: inherit; background: #7C6CF2; }

/* Módulos */
.modulos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.modulo { border: 1px solid var(--border); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.modulo h3 { font-size: 18px; font-weight: 700; }
.modulo p { font-size: 15px; line-height: 1.5; color: var(--muted); }
.modulo.cta { background: var(--brand); border-color: var(--brand); color: #fff; text-decoration: none; justify-content: space-between; }
.modulo.cta:hover { background: var(--brand-strong); color: #fff; }
.cta-titulo { font-size: 22px; font-weight: 700; line-height: 1.2; }
.cta-accion { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }

/* Privacidad y preguntas */
.dos-columnas { flex-direction: row; gap: 72px; align-items: flex-start; }
.lateral { flex: 0 0 380px; display: flex; flex-direction: column; gap: 16px; }
.lateral h2 { font-size: clamp(32px, 3vw, 40px); line-height: 1.1; }
.lateral p { font-size: 17px; line-height: 1.55; color: var(--muted); }
.garantias { flex: 1 1 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.garantia { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.garantia h3 { font-size: 18px; font-weight: 700; }
.garantia p { font-size: 15px; line-height: 1.5; color: var(--muted); }
.faq { flex: 1 1 0; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  min-height: 72px; padding: 16px 4px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font-size: 19px; font-weight: 600; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { width: 22px; height: 22px; color: var(--brand); transition: transform 0.15s; }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq details p { padding: 0 4px 24px; max-width: 720px; font-size: 16px; line-height: 1.6; color: var(--muted); }

/* CTA final y pie */
.cta-final { padding: 0 var(--gutter) 96px; }
.cta-final > div { background: var(--brand-soft); border-radius: 32px; padding: 72px 64px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.cta-final h2 { max-width: 720px; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.06; font-weight: 800; letter-spacing: -0.03em; }
.cta-final p { font-size: 18px; color: var(--text-2); }
.cta-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.pie { padding: 40px var(--gutter); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 14px; color: var(--muted); }
.pie .marca { font-size: 15px; }
.pie .logo-marca { height: 24px; }
.pie nav { display: flex; gap: 28px; }
.pie nav a { color: var(--muted); text-decoration: none; }
.pie nav a:hover { color: var(--brand); }
.pie-autor { color: inherit; font-weight: 600; text-underline-offset: 3px; }
.pie-autor:hover { color: var(--brand); }

/* ----- Tablet ----- */
@media (max-width: 1100px) {
  :root { --gutter: 40px; }
  .nav-links { display: none; }
  .consejo-flotante { display: none; }
  .modulos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .funcion, .funcion.invertida, .seccion.oscura, .dos-columnas { flex-direction: column; align-items: stretch; gap: 40px; }
  .funcion + .funcion { margin-top: 64px; }
  .lateral { flex-basis: auto; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ----- Móvil ----- */
@media (max-width: 700px) {
  :root { --gutter: 16px; }
  .nav { height: 64px; }
  .marca { font-size: 16px; gap: 8px; }
  .logo-marca { height: 26px; }
  .nav { gap: 8px; }
  .nav-acciones { gap: 6px; }
  .nav-acciones .boton { padding: 0 12px; font-size: 14px; }
  .nav .marca { font-size: 15px; white-space: nowrap; }
  .nav-acciones .boton { height: 44px; padding: 0 16px; }
  .hero { padding-top: 36px; gap: 20px; }
  .bajada { font-size: 17px; }
  .hero-cta, .hero-cta .boton { width: 100%; }
  .preview-marco { padding: 18px 16px 20px; }
  .preview-cabecera .segmento, .ranking, .kpis .kpi:nth-child(2), .kpis .kpi:nth-child(3) { display: none; }
  .preview-titulo { font-size: 18px; }
  .kpi-valor { font-size: 20px; }
  .barras { height: 120px; }
  .barras i { width: 30px; border-radius: 8px 8px 0 0; }
  .meses span { width: 30px; }
  .bancos { padding: 28px var(--gutter); }
  .bancos-lista { font-size: 16px; gap: 8px 20px; }
  .seccion { padding: 56px var(--gutter); gap: 28px; }
  .seccion-cabecera.fila { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pasos { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .paso { padding: 20px; }
  .tarjeta.funcion-visual { padding: 20px; }
  .barras.grande { height: 180px; padding: 0 4px; }
  .barras.grande i { width: 32px; }
  .barras.grande i::before { font-size: 11px; }
  .escenarios-demo { grid-template-columns: minmax(0, 1fr); }
  .consejos { padding: 20px; }
  .modulos, .garantias { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .faq summary { font-size: 17px; min-height: 64px; }
  .cta-final > div { padding: 40px 20px; border-radius: 24px; }
  .cta-botones, .cta-botones .boton { width: 100%; }
  .pie { flex-direction: column; align-items: flex-start; }
  .pie nav { flex-wrap: wrap; gap: 12px 20px; }
}

/* ----- Ingresar ----- */
.ingresar { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; }
.ingresar-cabecera { padding: 24px var(--gutter); }
.ingresar main { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px 64px; }
.caja {
  width: min(440px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 24px;
  padding: 36px 32px; display: flex; flex-direction: column; gap: 20px;
}
.caja h1 { font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }
.caja > p, .caja form > p { font-size: 15px; line-height: 1.5; color: var(--muted); }
.caja form, .caja > div { display: flex; flex-direction: column; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.campo input {
  height: 52px; padding: 0 16px; border: 1px solid var(--border); border-radius: 12px; font: inherit; font-size: 17px; font-weight: 500; color: var(--text); background: var(--surface);
}
.campo input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.campo input.codigo { font-size: 26px; font-weight: 700; letter-spacing: 0.4em; text-align: center; padding-left: calc(16px + 0.4em); }
.caja .boton { width: 100%; }
.mensaje { padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; }
.mensaje.error { background: var(--warm-bg); color: var(--warm-text); }
.mensaje.info { background: var(--brand-soft); color: var(--brand-deep); }
.enlaces { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 14px; }
.enlace-boton { border: 0; background: none; padding: 0; font: inherit; font-size: 14px; color: var(--brand-strong); cursor: pointer; text-decoration: underline; }
.enlace-boton:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.letra-chica { font-size: 13px; line-height: 1.5; color: var(--muted); }
.con-google { display: flex; flex-direction: column; gap: 16px; }
/* Botón de Google según su guía de marca: fondo blanco, borde gris y el logo original */
.boton-google { background: #fff; border: 1px solid #747775; color: #1F1F1F; gap: 12px; font-weight: 600; }
.boton-google:hover { background: #F8F9FA; color: #1F1F1F; border-color: #747775; }
.boton-google:disabled { opacity: 0.6; cursor: default; }
.logo-google { width: 20px; height: 20px; flex: none; }
.separador { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 13px; color: var(--muted); }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--border); }
@media (max-width: 700px) { .caja { padding: 28px 20px; } }

/* Texto legal (Privacidad) */
.texto-legal { width: min(720px, 100%); gap: 14px; }
.texto-legal h2 { margin-top: 10px; font-size: 20px; font-weight: 700; }
.texto-legal p, .texto-legal li { font-size: 15px; line-height: 1.6; color: var(--text-2); }
.texto-legal ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.texto-legal .boton { align-self: flex-start; width: auto; margin-top: 10px; }

/* Vista previa de "Mi mes" en el Home */
.kpi-destacado { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.reparto-demo { display: flex; gap: 3px; height: 16px; border-radius: 999px; overflow: hidden; }
.reparto-demo .pagado { background: #5B4BDB; }
.reparto-demo .por-pagar { background: #DAD5FA; }
.reparto-demo .disponible { background: #7BC8A4; }
.preview .leyenda { font-size: 13px; }
.preview .fila-rank > div { font-size: 14px; }

/* Home (Tarea 03.1): problema → orden → conciencia → mejora → ahorro */
.hero-cta .cta-botones { margin-top: 0; }
.disponible-demo { font-size: 48px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--brand-strong); }
.resumen-demo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 8px 0 0; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.resumen-demo dt { font-size: 12px; color: var(--muted); }
.resumen-demo dd { margin: 2px 0 0; font-size: 17px; font-weight: 700; }
.progreso-demo { height: 10px; border-radius: 999px; background: var(--border-soft); overflow: hidden; }
.progreso-demo span { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.frases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.frases li { background: var(--bg); border-radius: 20px; padding: 22px 24px; font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--text-2); }
.nota-ejemplo.centro { align-self: center; }
.seccion.gris .paso { background: var(--surface); border: 1px solid var(--border); }
.flujo { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.flujo li { padding: 10px 16px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong); font-size: 15px; font-weight: 600; }
.flujo li + li::before { content: "→"; margin-right: 10px; color: var(--brand-line); }
.flujo li:last-child { background: var(--brand); color: #fff; }
.flujo li:last-child::before { color: #fff; }
.insights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.insight { border: 1px solid var(--border); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.insight h3 { font-size: 20px; font-weight: 700; }
.insight p { font-size: 15px; line-height: 1.5; color: var(--muted); }
.insight p strong { color: var(--text); }
.insight .monto { color: var(--brand-strong); font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.bancos-inline { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.bancos-inline .bancos-lista { justify-content: flex-start; font-size: 18px; gap: 8px 32px; }
.pasos-simples { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pasos-simples li { display: flex; gap: 16px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 24px; }
.pasos-simples .num { background: var(--brand); color: #fff; }
.pasos-simples h3 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.pasos-simples p { font-size: 15px; line-height: 1.5; color: var(--muted); }
@media (max-width: 1100px) {
  .frases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insights, .pasos-simples { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .hero-cta .cta-botones, .hero-cta .cta-botones .boton { width: 100%; }
  .disponible-demo { font-size: 38px; }
  .resumen-demo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frases { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .frases li { font-size: 16px; padding: 16px 18px; }
  .flujo li { font-size: 14px; padding: 8px 12px; }
  .bancos-inline .bancos-lista { font-size: 16px; gap: 6px 18px; }
}