/* Sitio de Vora Corporation y de Groi.
   HTML y CSS planos, sin librerías ni scripts: carga rápido, no depende de nadie.
   La identidad sale de la app (frontend/lib/core/design/app_colors.dart): misma
   tipografía (Outfit), mismos colores, mismos radios y la misma tarjeta de saldo. */

@font-face { font-family: "Outfit"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/fonts/Outfit-Regular.ttf") format("truetype"); }
@font-face { font-family: "Outfit"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/assets/fonts/Outfit-Medium.ttf") format("truetype"); }
@font-face { font-family: "Outfit"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/assets/fonts/Outfit-SemiBold.ttf") format("truetype"); }

/* ---------- Tokens ---------- */
:root {
  --fondo: #f4f3f1;
  --superficie: #ffffff;
  --sutil: #ecEAE6;
  --borde: #e2dfda;
  --texto: #1a1a1a;
  --suave: #5f5f5f;
  --acento: #f2542d;          /* coral de marca de la app */
  --acento-texto: #c93a14;    /* coral oscurecido para texto sobre claro (contraste 4.5:1) */
  --sobre-acento: #1a1a1a;
  --ingreso: #166534;
  --gasto: #be123c;
  --sombra: 0 1px 2px rgb(26 26 26 / 6%), 0 12px 32px -12px rgb(26 26 26 / 18%);

  --r-chico: 14px;
  --r-medio: 20px;
  --r-grande: 28px;
  --ancho: 1120px;
  --fuente: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0d1117;
    --superficie: #161b22;
    --sutil: #21262d;
    --borde: #30363d;
    --texto: #e6edf3;
    --suave: #9aa4af;
    --acento-texto: #ff7a55;
    --ingreso: #34d399;
    --gasto: #fc8a8a;
    --sombra: 0 1px 2px rgb(0 0 0 / 40%), 0 16px 40px -14px rgb(0 0 0 / 70%);
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--acento-texto); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 6px; }

.contenedor { width: min(var(--ancho), 100% - 40px); margin-inline: auto; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; background: var(--acento); color: var(--sobre-acento);
  padding: 10px 16px; border-radius: 999px; font-weight: 600; z-index: 20; text-decoration: none; }
.saltar:focus { top: 12px; }

/* ---------- Tipografía ---------- */
h1, h2, h3 { font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); letter-spacing: -0.045em; }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.2; }
p { margin: 0; }
.etiqueta-seccion { font-size: 0.9rem; font-weight: 500; color: var(--acento-texto); letter-spacing: 0.01em; margin-bottom: 14px; }
.bajada { color: var(--suave); font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; max-width: 38em; }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--borde); }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.2rem;
  letter-spacing: -0.02em; color: var(--texto); text-decoration: none; }
.marca img { width: 30px; height: 30px; border-radius: 9px; }
.menu { display: flex; gap: 6px; flex-wrap: wrap; }
.menu a { color: var(--suave); text-decoration: none; font-weight: 500; font-size: 0.97rem; padding: 8px 14px; border-radius: 999px; }
.menu a:hover { background: var(--sutil); color: var(--texto); }

/* ---------- Botones y píldoras ---------- */
.boton { display: inline-flex; align-items: center; gap: 8px; background: var(--acento); color: var(--sobre-acento);
  padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 1rem; text-decoration: none; border: 0; }
.boton:hover { filter: brightness(1.06); }
.boton-claro { background: transparent; color: var(--texto); border: 1px solid var(--borde); }
.boton-claro:hover { background: var(--sutil); filter: none; }
.pildora { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px;
  border: 1px dashed var(--borde); color: var(--suave); font-weight: 500; font-size: 0.95rem; background: var(--superficie); }
.pildora::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acento); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---------- Entrada (una sola secuencia al cargar) ---------- */
@keyframes sube { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.entra { animation: sube 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.entra.d1 { animation-delay: 0.08s; } .entra.d2 { animation-delay: 0.18s; }
.entra.d3 { animation-delay: 0.3s; }  .entra.d4 { animation-delay: 0.42s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entra { animation: none; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(40px, 7vw, 96px) clamp(48px, 8vw, 110px); overflow: hidden; }
.hero .contenedor { display: grid; gap: 56px; align-items: center; grid-template-columns: 1.15fr 0.85fr; }
.hero h1 { margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: var(--acento-texto); }
.nota-datos { margin-top: 18px; font-size: 0.85rem; color: var(--suave); }

/* ---------- Teléfono con la app (datos de ejemplo) ---------- */
.escenario { position: relative; display: flex; justify-content: center; padding: 8px 0 24px; }
.telefono { width: min(300px, 78vw); aspect-ratio: 300 / 610; border-radius: 46px; padding: 10px; background: #0b0e13;
  box-shadow: 0 0 0 2px #2a313a, 0 40px 80px -24px rgb(0 0 0 / 55%); position: relative; }
.pantalla {
  /* La app siempre se muestra en su modo oscuro, como en una tienda de aplicaciones. */
  --a-fondo: #0d1117; --a-sup: #161b22; --a-borde: #30363d; --a-texto: #e6edf3; --a-suave: #8b949e;
  --a-ing: #34d399; --a-gas: #fc8a8a;
  width: 100%; height: 100%; border-radius: 36px; background: var(--a-fondo); color: var(--a-texto);
  padding: 34px 14px 14px; overflow: hidden; display: flex; flex-direction: column; gap: 12px; font-size: 13px; line-height: 1.35;
}
.telefono::before { content: ""; position: absolute; top: 18px; left: 50%; width: 74px; height: 20px; background: #000;
  border-radius: 20px; transform: translateX(-50%); z-index: 2; }
.a-saludo { display: flex; align-items: center; gap: 9px; color: var(--a-suave); font-weight: 500; }
.a-avatar { width: 28px; height: 28px; border-radius: 9px; background: var(--a-sup); border: 1px solid var(--a-borde);
  display: grid; place-items: center; font-size: 15px; }
.a-saludo b { color: var(--a-texto); font-weight: 600; }
.a-saldo { position: relative; overflow: hidden; border-radius: 22px; padding: 14px 14px 12px; color: #1a1a1a;
  background: linear-gradient(135deg, #f6876c, #f3623e); box-shadow: 0 12px 24px -10px rgb(242 84 45 / 55%); }
.a-saldo::before, .a-saldo::after { content: ""; position: absolute; border-radius: 50%; background: #1a1a1a; opacity: 0.1; }
.a-saldo::before { width: 120px; height: 120px; right: -34px; top: -44px; }
.a-saldo::after { width: 96px; height: 96px; right: 40px; bottom: -64px; opacity: 0.07; }
.a-saldo > * { position: relative; }
.a-saldo .t { font-weight: 600; opacity: 0.8; }
.a-saldo .monto { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin: 4px 0 2px; }
.a-saldo .monto small { font-size: 15px; opacity: 0.75; }
.a-saldo .var { font-weight: 600; font-size: 12px; }
.a-saldo .boton-a { margin-top: 10px; background: rgb(26 26 26 / 14%); border-radius: 999px; padding: 6px 6px 6px 14px;
  display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.a-saldo .boton-a i { width: 22px; height: 22px; border-radius: 50%; background: #1a1a1a; color: #f6876c; display: grid; place-items: center; font-style: normal; font-size: 12px; }
.a-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a-tile { background: var(--a-sup); border: 1px solid var(--a-borde); border-radius: 16px; padding: 10px; }
.a-tile span { color: var(--a-suave); font-size: 11.5px; }
.a-tile b { display: block; font-size: 14px; font-weight: 600; margin-top: 2px; }
.a-tile.ing b { color: var(--a-ing); } .a-tile.gas b { color: var(--a-gas); }
.a-cat { background: var(--a-sup); border: 1px solid var(--a-borde); border-radius: 16px; padding: 10px 12px; display: grid; gap: 9px; }
.a-cat h4 { margin: 0; font-size: 12px; font-weight: 600; color: var(--a-suave); }
.a-barra { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; font-size: 12px; }
.a-barra .pista { grid-column: 2 / 3; height: 6px; border-radius: 6px; background: #21262d; overflow: hidden; }
.a-barra .pista i { display: block; height: 100%; border-radius: 6px; background: #34d399; }
.a-barra .pista i.b { background: #6aa8ff; } .a-barra .pista i.c { background: #f59e0b; }
.a-barra .pct { color: var(--a-suave); }

/* Tarjetas flotantes que acompañan al teléfono */
.flota { position: absolute; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-medio);
  box-shadow: var(--sombra); padding: 14px 16px; font-size: 0.9rem; line-height: 1.3; z-index: 3; }
.flota b { display: block; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; }
.flota span { color: var(--suave); }
.flota.uno { left: -4%; top: 22%; } .flota.uno b { color: var(--ingreso); }
.flota.dos { right: -6%; bottom: 16%; } .flota.dos b { color: var(--gasto); }

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(56px, 9vw, 120px); }
.seccion + .seccion { border-top: 1px solid var(--borde); }
.cabecera-seccion { max-width: 46rem; margin-bottom: clamp(32px, 5vw, 56px); }
.cabecera-seccion h2 { margin-bottom: 16px; }

/* Cómo funciona: secuencia real, por eso va numerada */
.pasos { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); counter-reset: paso; }
.paso { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-grande); padding: 28px; box-shadow: var(--sombra); }
.paso::before { counter-increment: paso; content: counter(paso); display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 14px; background: var(--acento); color: var(--sobre-acento); font-weight: 600; margin-bottom: 20px; }
.paso h3 { margin-bottom: 8px; }
.paso p { color: var(--suave); }

/* Bento de funciones */
.bento { display: grid; gap: 16px; grid-template-columns: repeat(6, 1fr); }
.celda { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-grande); padding: 28px; overflow: hidden; }
.celda h3 { margin-bottom: 8px; }
.celda p { color: var(--suave); font-size: 1rem; }
.c-grande { grid-column: span 4; } .c-medio { grid-column: span 3; } .c-chico { grid-column: span 2; }
.celda.destacada { background: linear-gradient(135deg, #f6876c, #f3623e); border-color: transparent; color: #1a1a1a; position: relative; }
.celda.destacada p { color: rgb(26 26 26 / 78%); }
.celda.destacada::after { content: ""; position: absolute; right: -50px; top: -60px; width: 190px; height: 190px; border-radius: 50%; background: #1a1a1a; opacity: 0.08; }
.mini { margin-top: 22px; }
.grafica { width: 100%; height: auto; }
.pildoras { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--sutil); border: 1px solid var(--borde); margin-bottom: 16px; }
.pildoras span { padding: 6px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 500; color: var(--suave); }
.pildoras span.on { background: var(--acento); color: var(--sobre-acento); font-weight: 600; }
.confirma { display: grid; gap: 8px; font-size: 0.93rem; }
.confirma .fila { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: var(--r-chico);
  background: var(--sutil); }
.confirma .fila span { color: var(--suave); } .confirma .fila b { font-weight: 600; }
.confirma .ok { margin-top: 4px; text-align: center; padding: 11px; border-radius: 999px; background: var(--acento); color: var(--sobre-acento); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip { padding: 7px 14px; border-radius: 999px; background: var(--sutil); border: 1px solid var(--borde); font-size: 0.9rem; font-weight: 500; }

/* Banda de visión */
.vision { position: relative; overflow: hidden; border-radius: var(--r-grande); padding: clamp(32px, 6vw, 72px);
  background: linear-gradient(135deg, #f6876c, #f3623e); color: #1a1a1a; }
.vision::before, .vision::after { content: ""; position: absolute; border-radius: 50%; background: #1a1a1a; }
.vision::before { width: 360px; height: 360px; right: -90px; top: -130px; opacity: 0.08; }
.vision::after { width: 260px; height: 260px; right: 160px; bottom: -170px; opacity: 0.06; }
.vision > * { position: relative; }
.vision .etiqueta-seccion { color: #1a1a1a; opacity: 0.72; }
.vision h2 { max-width: 16em; margin-bottom: 18px; }
.vision p { max-width: 38em; font-size: 1.15rem; line-height: 1.6; color: rgb(26 26 26 / 82%); }

/* Confianza */
.confianza { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.confianza .celda { padding: 24px; }

/* Principios de la empresa */
.principios { display: grid; gap: 0; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--borde); }
.principio { padding: 28px 28px 8px 0; }
.principio + .principio { padding-left: 28px; border-left: 1px solid var(--borde); }
.principio h3 { font-size: 1.6rem; margin-bottom: 10px; }
.principio p { color: var(--suave); }

/* Producto en la portada de la empresa */
.producto-destacado { display: grid; gap: 40px; grid-template-columns: 1.1fr 0.9fr; align-items: center; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--r-grande); padding: clamp(28px, 5vw, 56px); box-shadow: var(--sombra); overflow: hidden; }
.producto-destacado .marca-prod { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.producto-destacado .marca-prod img { width: 64px; height: 64px; border-radius: 18px; }
.producto-destacado .marca-prod span { font-size: 0.9rem; color: var(--suave); display: block; }
.producto-destacado .marca-prod b { font-size: 1.7rem; font-weight: 600; letter-spacing: -0.03em; }
.producto-destacado p { color: var(--suave); margin-bottom: 24px; }
.producto-destacado .mini-saldo { transform: rotate(2deg); }

/* Contacto */
.contacto-grande { font-size: clamp(1.6rem, 4.4vw, 3rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; word-break: break-word; }
.contacto-grande a { color: var(--texto); text-decoration-color: var(--acento); text-decoration-thickness: 3px; }
.datos { color: var(--suave); margin-top: 22px; }

/* Textos legales */
.texto-legal { padding-block: clamp(36px, 6vw, 72px) 96px; max-width: 760px; }
.texto-legal h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 8px; }
.texto-legal .fecha { color: var(--suave); margin: 0 0 32px; }
.texto-legal h2 { font-size: 1.45rem; margin: 40px 0 10px; letter-spacing: -0.02em; }
.texto-legal ul, .texto-legal ol { padding-left: 22px; }
.texto-legal li { margin: 6px 0; }
.texto-legal table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 0.97rem; background: var(--superficie);
  border-radius: var(--r-chico); overflow: hidden; }
.texto-legal th, .texto-legal td { text-align: left; vertical-align: top; padding: 12px 14px; border: 1px solid var(--borde); }
.texto-legal th { background: var(--sutil); }
.aviso { background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: var(--r-chico); padding: 16px 20px; margin: 20px 0; }

/* Pie */
.pie { border-top: 1px solid var(--borde); padding-block: 40px; color: var(--suave); font-size: 0.95rem; }
.pie .contenedor { display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between; align-items: flex-start; }
.pie nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pie a { color: var(--suave); }
.pie a:hover { color: var(--texto); }

/* Utilidades (los estilos en línea los bloquea la política de seguridad) */
.sin-margen { margin: 0; }
.centro { text-align: center; }

/* ---------- Adaptación a pantallas pequeñas ---------- */
@media (max-width: 900px) {
  .hero .contenedor, .producto-destacado { grid-template-columns: 1fr; }
  .pasos, .confianza, .principios { grid-template-columns: 1fr; }
  .principio, .principio + .principio { padding: 24px 0 8px; border-left: 0; border-top: 1px solid var(--borde); }
  .principio:first-child { border-top: 0; }
  .bento { grid-template-columns: 1fr; }
  .c-grande, .c-medio, .c-chico { grid-column: auto; }
  .flota.uno { left: 0; } .flota.dos { right: 0; }
}
@media (max-width: 520px) {
  body { font-size: 1rem; }
  .menu a { padding: 8px 10px; }
  .acciones .boton, .acciones .pildora { width: 100%; justify-content: center; }
  .flota { display: none; }
}

/* ---------- Ajustes de la maqueta de la app y de listas ---------- */
.a-barra { grid-template-columns: 22px 1fr auto; }
.a-barra .pista { grid-column: auto; }
.a1 { width: 38%; } .a2 { width: 24%; } .a3 { width: 18%; }

.pasos { list-style: none; padding: 0; margin: 0; }
.hero.una .contenedor { grid-template-columns: 1fr; }

/* Gráfica de ejemplo (SVG): los colores vienen de los tokens, no de atributos fijos */
.g-malla { stroke: var(--borde); stroke-width: 1; }
.g-ing { fill: none; stroke: var(--ingreso); stroke-width: 3; stroke-linecap: round; }
.g-gas { fill: none; stroke: var(--acento); stroke-width: 3; stroke-linecap: round; }
.g-area-ing { fill: var(--ingreso); opacity: 0.14; }
.g-txt { fill: var(--suave); font-size: 12px; font-family: var(--fuente); }

.pantalla-mini { height: auto; width: min(330px, 100%); margin-inline: auto; padding: 16px; border-radius: 28px;
  border: 1px solid #30363d; box-shadow: var(--sombra); }

/* ---------- Pulido tras la primera revisión ---------- */
h1, h2 { word-spacing: 0.06em; }
h1 { letter-spacing: -0.04em; }

.a-nav { margin-top: auto; display: flex; justify-content: space-around; background: var(--a-sup); border: 1px solid var(--a-borde);
  border-radius: 999px; padding: 5px; font-size: 11.5px; color: var(--a-suave); font-weight: 500; }
.a-nav span { padding: 6px 12px; border-radius: 999px; }
.a-nav .on { background: rgb(242 84 45 / 24%); color: #ff8a66; font-weight: 600; }

.celda.destacada { display: flex; flex-direction: column; justify-content: space-between; }
.celda.destacada .mini { position: relative; margin-top: 28px; }
.gran-monto { font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; }
.var-linea { font-weight: 600; margin-top: 8px; }

.flota { max-width: 168px; }
.flota.uno { left: -10%; top: 44%; }
.flota.dos { right: -10%; bottom: 12%; }