/* WealthWise — sitio público. Fuentes alojadas en el propio servidor (licencia SIL OFL 1.1, ver assets/fuentes) */
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fuentes/public-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fuentes/public-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fuentes/public-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('fuentes/schibsted-grotesk-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('fuentes/schibsted-grotesk-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 800; font-display: swap; src: url('fuentes/schibsted-grotesk-latin-800-normal.woff2') format('woff2'); }


/* Tokens */
:root {
  --bosque: #0A3A30;     /* fondo del encabezado y del hero */
  --bosque-2: #0F4A3D;
  --verde: #0F6E56;      /* verde WealthWise */
  --verde-hondo: #0C4A3C;
  --verde-vivo: #2FB487; /* acentos sobre fondo oscuro */
  --menta: #DCEFE7;
  --menta-2: #EEF7F2;
  --niebla: #F2F5F3;
  --papel: #FFFFFF;
  --tinta: #13282A;
  --tinta-2: #4A5E57;
  --linea: #D3DEDA;
  --marino: #2B3F6B;     /* línea del benchmark; viene de la red de la foto de IA */
  --ambar: #B45309;
  --ambar-claro: #FDF1E3;
  --titulos: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --texto: 'Public Sans', 'Helvetica Neue', Arial, sans-serif;
  --ancho: 1200px;
  --sombra: 0 40px 80px -40px rgba(4, 30, 24, .55), 0 12px 24px -12px rgba(4, 30, 24, .25);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 17px/1.6 var(--texto); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: var(--verde); }
:focus-visible { outline: 3px solid var(--verde-vivo); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--titulos); color: var(--tinta); margin: 0; }
.ancho { width: min(var(--ancho), 100% - 40px); margin-inline: auto; }
.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 16px; top: 12px; background: var(--papel); padding: 8px 12px; z-index: 10; }

/* Encabezado (sobre el mismo verde bosque del hero) */
.barra-sup { background: var(--bosque); color: #fff; }
.barra-sup .ancho { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.marca > img { border-radius: 8px; }
.marca span { font: 800 21px/1 var(--titulos); letter-spacing: -0.02em; }
.marca .respaldo { display: inline-flex; align-items: center; gap: 7px; font: 500 13px/1 var(--texto); color: #B7D3C8; margin-left: 2px; padding-top: 3px; white-space: nowrap; }
.logo-addika { display: inline-block; width: auto; }
.marca .logo-addika { height: 30px; }
nav { display: flex; align-items: center; gap: 24px; font-size: 15px; }
nav a { color: #C9E2D8; text-decoration: none; }
nav a:hover { color: #fff; }
nav .idioma { font-weight: 600; color: #fff; }
nav .nav-cta { color: var(--bosque); background: #fff; font-weight: 600; padding: 9px 16px; border-radius: 999px; }
nav .nav-cta:hover { background: var(--menta); color: var(--bosque); }

/* Hero */
.hero { position: relative; background: var(--bosque); color: #fff; overflow: hidden; isolation: isolate; }
.hero::before { /* retícula de puntos tenue */
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(rgba(201, 226, 216, .16) 1px, transparent 1.4px); background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 75%); mask-image: linear-gradient(100deg, transparent 30%, #000 75%); }
.hero::after { /* luz detrás del producto */
  content: ''; position: absolute; z-index: -1; width: 900px; height: 900px; right: -260px; top: -160px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(47, 180, 135, .28), transparent); }
.hero-rej { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 56px; align-items: center; padding: 64px 0 120px; }
.hero-marca { margin: 0 0 18px; font-size: 15px; font-weight: 600; color: var(--verde-vivo); }
.hero h1 { color: #fff; font-size: clamp(2.3rem, 4.4vw, 3.85rem); line-height: 1.02; font-weight: 800; letter-spacing: -0.032em; max-width: 15ch; }
.sub { font-size: 19px; line-height: 1.6; color: #C9E2D8; max-width: 52ch; margin: 26px 0 36px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.boton { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 12px; font: 600 16px/1.2 var(--texto);
  text-decoration: none; color: #fff; border: 1.5px solid rgba(255, 255, 255, .45); background: transparent; }
.boton:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.boton.primario { background: #9EE6C8; border-color: #9EE6C8; color: var(--bosque); }
.boton.primario:hover { background: #fff; border-color: #fff; }
.bi { width: 20px; height: 20px; flex: none; }

/* Escena: ventana del producto + teléfono con la revisión del mes */
.escena { position: relative; padding: 0 0 0 128px; }
.ventana { background: var(--papel); color: var(--tinta); border-radius: 16px; overflow: hidden; box-shadow: var(--sombra);
  transform: perspective(1600px) rotateY(-7deg) rotateX(2deg); transform-origin: left center; }
.v-barra { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #EEF2F0; border-bottom: 1px solid var(--linea); }
.v-barra i { width: 10px; height: 10px; border-radius: 50%; background: #CBD5D1; }
.v-barra span { margin-left: 12px; flex: 1; max-width: 260px; font-size: 11.5px; color: var(--tinta-2); background: #fff; border-radius: 6px; padding: 3px 10px; }
.v-cuerpo { display: grid; grid-template-columns: 112px 1fr; min-height: 380px; }
.v-nav { background: var(--bosque); padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; }
.v-nav img { border-radius: 6px; margin: 0 0 14px 6px; }
.v-nav span { font-size: 12px; color: #A9C9BD; padding: 7px 8px; border-radius: 7px; }
.v-nav .act { background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; }
.v-main { padding: 18px 20px 18px; display: grid; gap: 14px; }
.v-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.v-cab b { font: 700 16px/1.2 var(--titulos); }
.v-cab span { font-size: 11.5px; color: var(--tinta-2); white-space: nowrap; }
.v-kpis { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; }
.v-kpis div { background: var(--niebla); border-radius: 10px; padding: 9px 11px; }
.v-kpis small, .v-mez small, .kpis small { display: block; font-size: 10.5px; color: var(--tinta-2); line-height: 1.3; }
.v-kpis b { font: 700 18px/1.25 var(--titulos); letter-spacing: -0.01em; }
.v-kpis em { font-style: normal; font-size: 11px; color: var(--tinta-2); font-weight: 600; }
.pos { color: var(--verde); }
.v-graf { position: relative; }
.ley { display: flex; gap: 14px; margin: 0 0 6px; font-size: 10.5px; color: var(--tinta-2); }
.ley span::before { content: ''; display: inline-block; width: 14px; height: 0; border-top: 2.5px solid var(--verde); vertical-align: middle; margin-right: 5px; }
.ley .l-b::before { border-top: 2px dashed var(--marino); }
.graf { display: block; width: 100%; height: 110px; overflow: visible; }
.g-rej { stroke: #E3EAE7; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.g-area { fill: rgba(15, 110, 86, .1); stroke: none; }
.g-cart { stroke: var(--verde); stroke-width: 2.5; fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.g-bm { stroke: var(--marino); stroke-width: 1.8; fill: none; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.ejes { display: flex; justify-content: space-between; margin: 4px 0 0; font-size: 10px; color: #8A9A94; }
.v-mez ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 7px; }
.v-mez li { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; font-size: 12px; }
.v-mez li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.v-mez li small { display: inline; font-size: 10.5px; font-weight: 600; }
.v-mez li.alerta b { color: var(--ambar); }
.m-barra { grid-column: 1 / -1; display: block; height: 6px; border-radius: 6px; background: #E6ECE9; overflow: hidden; }
.m-barra i { display: block; height: 100%; border-radius: 6px; background: var(--verde); }
.v-mez li.alerta .m-barra i { background: var(--ambar); }

.telefono { position: absolute; left: -12px; bottom: -96px; width: 250px; background: var(--papel); color: var(--tinta);
  border: 9px solid #06231C; border-radius: 34px; padding: 22px 16px 16px; box-shadow: var(--sombra); }
.telefono::before { content: ''; position: absolute; top: 7px; left: 50%; width: 64px; height: 5px; margin-left: -32px; border-radius: 4px; background: #D5DDDA; }
.revision figcaption { display: grid; padding-bottom: 10px; border-bottom: 1px solid var(--linea); }
.r-tit { font: 700 11.5px/1.3 var(--texto); color: var(--verde); }
.r-cli { font: 700 15px/1.3 var(--titulos); letter-spacing: -0.01em; }
.revision ul { list-style: none; margin: 0; padding: 2px 0 0; }
.revision li { display: grid; grid-template-columns: 22px 1fr; gap: 9px; padding: 9px 0; border-bottom: 1px dashed var(--linea); }
.revision li:last-child { border-bottom: 0; }
.revision li b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.revision li span { display: block; font-size: 11.5px; line-height: 1.35; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.ico { width: 22px; height: 22px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ok .ico circle { fill: var(--menta); stroke: var(--verde); }
.ok .ico path { stroke: var(--verde); stroke-width: 2.2; }
.alerta .ico circle { fill: var(--ambar-claro); stroke: var(--ambar); }
.alerta .ico path, .alerta .ico circle + circle { stroke: var(--ambar); stroke-width: 2.2; }
.revision li.alerta { background: var(--ambar-claro); margin: 2px -8px 0; padding: 9px 8px; border-radius: 9px; border-bottom: 0; }
.revision li.alerta span { color: var(--ambar); font-weight: 600; }
.barra { display: block; height: 5px; background: #E6ECE9; border-radius: 5px; margin-top: 6px; max-width: 150px; overflow: hidden; }
.barra > i { display: block; width: 40%; height: 100%; background: var(--verde); border-radius: 5px; }
.sugerencia { margin-top: 10px; background: var(--menta); border-radius: 10px; padding: 9px 11px; }
.sugerencia b { display: block; font-size: 11px; color: var(--verde-hondo); }
.sugerencia span { display: block; font-size: 12.5px; line-height: 1.35; }
.escena .nota { position: absolute; right: 0; bottom: -40px; font-size: 12px; color: #8FB3A6; }

/* Una sola animación: la revisión del teléfono se completa al cargar (sólo con JS y sin «reducir movimiento») */
@media (prefers-reduced-motion: no-preference) {
  .js .revision .paso { opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; }
  .js .revision .paso.visto { opacity: 1; transform: none; }
  .js .revision .ok .trazo { stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .5s ease .15s; }
  .js .revision .ok.visto .trazo { stroke-dashoffset: 0; }
  .js .revision .barra > i { width: 0; transition: width .8s ease .2s; }
  .js .revision .visto .barra > i { width: 40%; }
}

/* Secciones */
section h2 { font-size: clamp(1.85rem, 3.2vw, 2.75rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.026em; max-width: 22ch; }
.intro { color: var(--tinta-2); font-size: 18.5px; max-width: 60ch; margin: 16px 0 0; }

/* Cómo funciona: es una secuencia real (el ciclo de cada corte), por eso va numerada */
.mes { padding: 104px 0 96px; }
.ciclo { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; position: relative; }
.ciclo::before { content: ''; position: absolute; left: 24px; right: 24px; top: 24px; border-top: 2px dashed #B8CFC6; }
.ciclo li { position: relative; }
.ciclo .num { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; margin-bottom: 22px;
  background: var(--bosque); color: #fff; font: 800 19px/1 var(--titulos); box-shadow: 0 0 0 8px var(--papel); }
.ciclo li:last-child .num { background: var(--verde-vivo); color: var(--bosque); }
.ciclo h3 { font-size: 19px; line-height: 1.25; margin-bottom: 8px; letter-spacing: -0.01em; }
.ciclo p { margin: 0; font-size: 15.5px; color: var(--tinta-2); }

/* Filas con imagen */
.fila { padding: 104px 0; overflow: hidden; }
.fila:nth-of-type(odd) { background: var(--niebla); }
.fila > .ancho { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }
.fila.inv > .ancho { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.fila.inv .fila-texto { order: 2; }
.fila-texto > p { color: var(--tinta-2); font-size: 18px; max-width: 54ch; margin: 18px 0 26px; }
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lista li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-weight: 500; }
.ck { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--menta); fill: none; stroke: var(--verde); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.vis-foto picture, .vis-foto img { display: block; border-radius: 22px; }
.vis-foto { position: relative; }
.vis-foto img { box-shadow: var(--sombra); width: 100%; }
.vis-foto::before { content: ''; position: absolute; inset: 28px -28px -28px 28px; border-radius: 26px; background: var(--menta); z-index: -1; }
.fila-cumplimiento { isolation: isolate; }

.vis-panel { position: relative; padding: 0 64px 112px 0; }
.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: 18px; box-shadow: var(--sombra); }
.rb { padding: 22px 24px 60px; }
.rb figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--linea); }
.rb figcaption b { font: 700 18px/1.2 var(--titulos); }
.rb figcaption span { font-size: 13px; color: var(--tinta-2); }
.rb ul { list-style: none; margin: 0; padding: 8px 0 0; }
.rb li { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 12px 0; font-size: 15px; }
.rb-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.rb li.fuera .rb-v { color: var(--ambar); }
.rb-pista { grid-column: 1 / -1; position: relative; display: block; height: 12px; border-radius: 6px; background: #EDF2F0; }
.rb-rango { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: rgba(15, 110, 86, .16); border: 1px dashed rgba(15, 110, 86, .5); }
.rb-val { position: absolute; top: -3px; width: 4px; height: 18px; margin-left: -2px; border-radius: 3px; background: var(--verde); }
.rb li.fuera .rb-val { background: var(--ambar); }
.rb-ley { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 12.5px; color: var(--tinta-2); }
.rb-ley i { width: 20px; height: 10px; border-radius: 4px; background: rgba(15, 110, 86, .16); border: 1px dashed rgba(15, 110, 86, .5); }
.rb-sug { margin-top: 16px; background: var(--ambar-claro); color: var(--tinta); border-radius: 12px; padding: 11px 14px; font-weight: 600; font-size: 15px; }
.rb-sug small { display: block; color: var(--ambar); font-size: 12px; font-weight: 700; }
.rb-graf { position: absolute; right: 0; bottom: 0; width: 58%; padding: 14px 16px 12px; }
.kpis { display: flex; gap: 22px; margin-bottom: 8px; }
.kpis b { font: 700 19px/1.2 var(--titulos); }
.rb-graf .graf { height: 84px; }

.vis-ia { position: relative; background: var(--menta); border-radius: 26px; padding: 40px 24px 0 40px; }
.vis-ia picture { display: block; margin-left: auto; width: 92%; }
.chat { position: absolute; left: -28px; bottom: -40px; width: min(400px, 78%); }
.chat .q { margin: 0 0 10px auto; width: fit-content; max-width: 90%; background: var(--bosque); color: #fff; padding: 10px 14px; border-radius: 16px 16px 4px 16px; font-size: 14.5px; box-shadow: var(--sombra); }
.chat .a { background: var(--papel); border: 1px solid var(--linea); border-radius: 16px 16px 16px 4px; padding: 13px 15px; box-shadow: var(--sombra); }
.chat .a p { margin: 0 0 8px; font-size: 14.5px; }
.chat table { width: 100%; border-collapse: collapse; font-size: 13px; }
.chat td { padding: 6px 4px; border-top: 1px solid var(--linea); }
.chat td.al { color: var(--ambar); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chat small { display: block; margin-top: 8px; font-size: 11.5px; color: var(--tinta-2); }
.fila-asistente { padding-bottom: 140px; }

/* Todos los módulos */
.modulos { padding: 104px 0; background: var(--bosque); color: #fff; }
.modulos h2 { color: #fff; }
.modulos .intro { color: #C9E2D8; }
.grupos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 56px; border-top: 1px solid rgba(201, 226, 216, .22); }
.grupo { padding: 30px 28px 8px 0; }
.grupo + .grupo { padding-left: 28px; border-left: 1px solid rgba(201, 226, 216, .22); }
.gi { width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: rgba(47, 180, 135, .16); fill: none; stroke: #9EE6C8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.grupo h3 { color: #fff; font-size: 20px; letter-spacing: -0.012em; margin: 16px 0 4px; }
.grupo dl { margin: 0; }
.grupo dt { font-weight: 600; font-size: 15.5px; margin-top: 16px; color: #fff; }
.grupo dd { margin: 3px 0 0; color: #B7D3C8; font-size: 14.5px; line-height: 1.55; }

/* WealthWise como parte de ADDIKA (su logotipo en negativo pide fondo oscuro) */
.addika { background: var(--verde-hondo); color: #fff; padding: 76px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.addika .ancho { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.addika h2 { color: #fff; display: grid; gap: 14px; }
.addika h2 span { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.addika h2 img { display: block; width: 100%; max-width: 420px; height: auto; }
.addika p { color: #CFE6DD; font-size: 18px; max-width: 58ch; margin: 0 0 14px; }
.addika .addika-2 { color: #fff; font-weight: 600; font-size: 16px; }
.addika :focus-visible, .hero :focus-visible, .barra-sup :focus-visible, .modulos :focus-visible { outline-color: #9EE6C8; }

/* Contacto */
.contacto { padding: 96px 0; }
.contacto-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; background: var(--menta); border-radius: 28px; padding: 56px; }
.contacto p { color: var(--tinta-2); font-size: 18px; max-width: 50ch; margin: 14px 0 0; }
.medios { display: grid; gap: 12px; }
.boton.claro { background: var(--papel); border-color: transparent; color: var(--verde-hondo); padding: 15px 22px; min-width: 320px; }
.boton.claro:hover { border-color: var(--verde); background: var(--papel); }
.boton.claro span { display: grid; gap: 2px; font-size: 16.5px; overflow-wrap: anywhere; }
.boton.claro small { font: 500 12.5px/1.2 var(--texto); color: var(--tinta-2); }

.pie { padding: 26px 0 34px; font-size: 14px; color: var(--tinta-2); border-top: 1px solid var(--linea); }
.pie .ancho { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; }
.pie-marca { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pie-marca .logo-addika { height: 22px; }

/* Página no encontrada */
.nf { background: var(--niebla); }
.nf main { padding: 48px 0; }
.nf .marca { color: var(--tinta); }
.nf .marca .respaldo { color: var(--tinta-2); }
.nf h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 64px 0 12px; letter-spacing: -0.02em; }
.nf .en { color: var(--tinta-2); margin-top: 28px; }

/* Tableta */
@media (max-width: 1080px) {
  .hero-rej { grid-template-columns: 1fr; gap: 56px; padding: 40px 0 150px; }
  .escena { padding: 0; max-width: 680px; }
  .ventana { transform: none; }
  .telefono { left: auto; right: -6px; bottom: -110px; }
  .escena .nota { right: auto; left: 0; bottom: -34px; }
  .grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grupo:nth-child(3) { padding-left: 0; border-left: 0; }
  .grupo:nth-child(n+3) { border-top: 1px solid rgba(201, 226, 216, .22); margin-top: 22px; }
}
@media (max-width: 980px) {
  .ciclo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; }
  .ciclo::before { display: none; }
  .fila > .ancho, .fila.inv > .ancho { grid-template-columns: 1fr; gap: 56px; }
  .fila.inv .fila-texto { order: 0; }
  .contacto-panel, .addika .ancho { grid-template-columns: 1fr; gap: 28px; }
  .addika h2 img { max-width: 300px; }
  nav a[href="#mes"], nav a[href="#modulos"] { display: none; }
  /* en teléfono, «by [logo]» baja a un segundo renglón bajo WealthWise */
  .marca { display: grid; grid-template-columns: auto auto; column-gap: 10px; row-gap: 3px; align-items: center; justify-content: start; }
  .marca > img { grid-row: 1 / span 2; }
  .marca span { font-size: 18px; align-self: end; }
  .marca .respaldo { grid-column: 2; margin-left: 0; padding-top: 0; align-self: start; font-size: 11.5px; gap: 5px; }
  .marca .logo-addika { height: 19px; }
  .barra-sup .ancho { min-height: 68px; }
}
/* Teléfono */
@media (max-width: 680px) {
  body { font-size: 16px; }
  .sub { font-size: 17px; }
  nav { gap: 14px; }
  nav .nav-cta { display: none; }
  .acciones .boton { flex: 1 1 100%; justify-content: center; }
  .hero-rej { padding: 28px 0 210px; }
  .v-cuerpo { grid-template-columns: 1fr; min-height: 0; }
  .v-nav { display: none; }
  .v-main { padding: 14px 14px 16px; gap: 12px; }
  .v-kpis { grid-template-columns: 1fr 1fr; }
  .v-kpis div:first-child { grid-column: 1 / -1; }
  .v-bm { display: none; }
  .graf { height: 80px; }
  .telefono { width: 232px; right: -4px; bottom: -180px; }
  .mes, .fila, .modulos, .contacto { padding: 64px 0; }
  .fila-asistente { padding-bottom: 64px; }
  .ciclo, .grupos { grid-template-columns: 1fr; }
  .grupo, .grupo + .grupo, .grupo:nth-child(3) { padding: 24px 0 4px; border-left: 0; margin-top: 0; }
  .grupo + .grupo { border-top: 1px solid rgba(201, 226, 216, .22); }
  .vis-foto::before { inset: 16px -10px -16px 16px; }
  .vis-panel { padding: 0 0 150px; }
  .rb { padding: 18px 16px 56px; }
  .rb-graf { width: 86%; }
  .vis-ia { padding: 20px 12px 12px; border-radius: 20px; }
  .vis-ia picture { width: 100%; }
  .chat { position: relative; left: auto; bottom: auto; width: 100%; margin-top: -24px; }
  .escena .nota { left: auto; right: 0; bottom: auto; top: -26px; }
  .contacto-panel { padding: 32px 20px; border-radius: 22px; }
  .boton.claro { min-width: 0; width: 100%; }
}

/* Generado por generar.py a partir de textos.py */
.m-barra .v31 { width: 31%; }
.m-barra .v62 { width: 62%; }
.m-barra .v7 { width: 7%; }
.rb-rango.r0-15 { left: 0%; width: 15%; }
.rb-rango.r25-70 { left: 25%; width: 45%; }
.rb-rango.r30-60 { left: 30%; width: 30%; }
.rb-val.v31 { left: 31%; }
.rb-val.v62 { left: 62%; }
.rb-val.v7 { left: 7%; }