/* Vozavía V2 · la página (25-oct-2026, sin publicar).
   Un solo sistema: casi negro, una sola tinta de acento (el azul de la marca), Mona Sans para todo y la Instrument
   cursiva solo para la palabra que importa de cada titular. Sin cuadrículas, sin brillos de fondo, sin tarjetas
   dentro de tarjetas. El movimiento lo pone v2.js (GSAP + ScrollTrigger); sin JS o con «reducir movimiento»
   todo se ve quieto y completo.
   Contraste (WCAG): tinta/fondo 18.1 · tinta-suave/fondo 8.0 · tinta-tenue/fondo 5.0 · blanco/botón 5.2 · acento-texto/fondo 9.1 */

@font-face { font-family: "Mona"; src: url("/mona-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Mona"; src: url("/mona-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Instrument"; src: url("/letra-instrument-cursiva.woff2") format("woff2"); font-style: italic; font-display: swap; }

:root {
  --fondo: #05070D;
  --superficie: #0B0F1A;
  --superficie-2: #111727;
  --linea: rgba(255, 255, 255, .08);
  --linea-fuerte: rgba(255, 255, 255, .16);
  --tinta: #F2F4F8;
  --tinta-suave: #A6AEC0;
  --tinta-tenue: #7D879C;
  --acento: #2563EB;
  --acento-hover: #1D4ED8;
  --acento-texto: #8AB4FF;
  --acento-velo: rgba(37, 99, 235, .14);
  --calido: #F5B36B;
  --radio: 20px;
  --radio-chico: 12px;
  --ancho: 1160px;
  --gutter: clamp(16px, 4vw, 40px);
  --seccion: clamp(96px, 14vw, 168px);
  --resorte: cubic-bezier(.22, 1, .36, 1);
  /* El cielo de fondo (v2.js lo cambia por sección al bajar; sin JS se queda como el fondo de siempre). */
  --cielo-cenit: #05070D;
  --cielo-medio: #05070D;
  --cielo-horizonte: #05070D;
  --cielo-sol: rgba(37, 99, 235, 0);
  --cielo-estrellas: 0;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body.v2 {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 17px/1.55 "Mona", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
em { font-family: "Instrument", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--acento-texto); }
:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 3px; border-radius: 6px; }

.v2-ancho { width: 100%; max-width: calc(var(--ancho) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.v2-saltar { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--acento); border-radius: 10px; color: #fff; text-decoration: none; }
.v2-saltar:focus { top: 12px; }

.v2-etiqueta { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-tenue); }

/* ---------- Botones ---------- */
.v2-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  background: var(--acento); color: #fff; font: 600 16px/1 "Mona", sans-serif; text-decoration: none; cursor: pointer;
  transition: background-color .2s, border-color .2s, transform .2s var(--resorte);
}
.v2-boton:hover { background: var(--acento-hover); }
.v2-boton:active { transform: scale(.97); }
.v2-boton-borde { background: transparent; border-color: var(--linea-fuerte); color: var(--tinta); }
.v2-boton-borde:hover { background: rgba(255, 255, 255, .06); }
.v2-boton-chico { min-height: 40px; padding: 0 16px; font-size: 15px; }
.v2-boton[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* ---------- Cabecera ---------- */
.v2-cabecera { position: sticky; top: 0; z-index: 30; transition: background-color .3s, border-color .3s; border-bottom: 1px solid transparent; }
.v2-cabecera.v2-con-fondo { background: rgba(5, 7, 13, .78); border-bottom-color: var(--linea); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); }
.v2-barra { display: flex; align-items: center; gap: 32px; height: 72px; }
.v2-marca img { height: 24px; width: auto; }
.v2-nav { display: flex; gap: 28px; }
.v2-nav a { color: var(--tinta-suave); text-decoration: none; font-size: 15px; transition: color .2s; }
.v2-nav a:hover { color: var(--tinta); }
.v2-nav-movil { display: none; }
.v2-barra-der { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.v2-liga-sesion { color: var(--tinta-suave); text-decoration: none; font-size: 15px; }
.v2-liga-sesion:hover { color: var(--tinta); }
.v2-menu { display: none; width: 44px; height: 44px; border: 1px solid var(--linea-fuerte); border-radius: 12px; background: transparent; cursor: pointer; position: relative; }
.v2-menu span, .v2-menu span::before, .v2-menu span::after { position: absolute; left: 12px; width: 18px; height: 1.5px; background: var(--tinta); border-radius: 2px; transition: transform .3s var(--resorte), opacity .2s; content: ""; }
.v2-menu span { top: 21px; }
.v2-menu span::before { left: 0; top: -6px; }
.v2-menu span::after { left: 0; top: 6px; }
.v2-menu[aria-expanded="true"] span { background: transparent; }
.v2-menu[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.v2-menu[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- El cielo: una capa fija detrás de todo; su color sigue a la sección que lees ---------- */
.v2-cielo { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--cielo-cenit) 0%, var(--cielo-medio) 58%, var(--cielo-horizonte) 100%); }
.v2-cielo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 55% at 50% 112%, var(--cielo-sol), transparent 70%); }
.v2-cielo-estrellas { position: absolute; inset: 0 0 35%; opacity: var(--cielo-estrellas);
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 27% 42%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.4px 1.4px at 44% 12%, #fff, transparent), radial-gradient(1px 1px at 61% 33%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 73% 8%, #fff, transparent), radial-gradient(1.2px 1.2px at 86% 27%, rgba(200,215,255,.9), transparent),
    radial-gradient(1px 1px at 93% 52%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 6% 58%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.3px 1.3px at 36% 64%, rgba(200,215,255,.7), transparent), radial-gradient(1px 1px at 55% 56%, rgba(255,255,255,.5), transparent); }

/* ---------- Menú en píldora: al pasar la portada la barra se encoge y flota (solo escritorio; v2.js pone la clase) ---------- */
@media (min-width: 821px) {
  .v2-cabecera .v2-barra { transition: max-width .5s var(--resorte), height .4s var(--resorte), margin .4s var(--resorte), padding .4s var(--resorte), background-color .3s, border-color .3s, border-radius .4s; border: 1px solid transparent; }
  .v2-cabecera.v2-pildora, .v2-cabecera.v2-pildora.v2-con-fondo { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .v2-cabecera.v2-pildora .v2-barra { max-width: 880px; height: 56px; margin-block: 8px; padding: 0 8px 0 22px; border-radius: 999px;
    background: rgba(11, 15, 26, .72); border-color: var(--linea-fuerte); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); }
}

/* ---------- Portada ---------- */
.v2-portada { position: relative; isolation: isolate; }
/* El humo (humo.js): detrás del texto, sin recibir clics, y se desvanece hacia abajo para no cortar la sección. */
.v2-humo { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none; opacity: .9; }
.v2-portada { padding-top: clamp(48px, 8vw, 104px); padding-bottom: 48px; }
.v2-portada-rejilla { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.v2-portada h1 { margin-top: 20px; font-size: clamp(44px, 6.4vw, 80px); line-height: 1.02; letter-spacing: -.035em; }
.v2-portada h1 em { display: inline; }
.v2-mascara { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.v2-p { display: inline-block; }
.v2-entrada { margin-top: 24px; max-width: 34ch; font-size: clamp(18px, 1.6vw, 20px); color: var(--tinta-suave); }
.v2-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.v2-portada-arte { position: relative; aspect-ratio: 1 / 1.05; }
.v2-halo { position: absolute; inset: 10% 5%; background: radial-gradient(closest-side, rgba(37, 99, 235, .32), transparent 70%); filter: blur(30px); }
.v2-mosaico { position: relative; height: 100%; display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1.2fr 1fr; gap: 14px; }
.v2-tesela { position: relative; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--linea); overflow: hidden; padding: 16px; }
.v2-tesela-pastilla { position: relative; z-index: 1; display: inline-block; padding: 5px 10px; border-radius: 999px; background: rgba(5, 7, 13, .6); font-size: 12px; font-weight: 600; color: var(--tinta); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.v2-tesela-video { grid-row: span 2; background: linear-gradient(170deg, #3A2414 0%, #1B120C 55%, #0B0F1A 100%); }
.v2-concha-portada { position: absolute; left: 50%; top: 46%; width: 76%; translate: -50% -50%; filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); }
.v2-subtitulo-demo { position: absolute; left: 16px; right: 16px; bottom: 22px; text-align: center; font-size: clamp(16px, 1.6vw, 20px); font-weight: 600; }
.v2-subtitulo-demo b { color: var(--calido); }
.v2-tesela-post { background: linear-gradient(160deg, #13203F, #0B0F1A); display: flex; flex-direction: column; justify-content: space-between; }
.v2-tesela-dato { font-size: 15px; color: var(--tinta-suave); }
.v2-tesela-dato b { display: block; font-size: clamp(28px, 3vw, 40px); color: var(--tinta); letter-spacing: -.03em; }
.v2-tesela-guion { display: flex; flex-direction: column; gap: 10px; }
.v2-tesela-guion i { display: block; height: 8px; border-radius: 4px; background: var(--linea-fuerte); }
.v2-tesela-guion i:nth-of-type(1) { margin-top: 10px; width: 90%; background: var(--acento-texto); opacity: .7; }
.v2-tesela-guion i:nth-of-type(2) { width: 75%; }
.v2-tesela-guion i:nth-of-type(3) { width: 55%; }

.v2-desliza { margin-top: clamp(40px, 6vw, 72px); display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--tinta-tenue); }
.v2-desliza span { position: relative; width: 1px; height: 32px; background: var(--linea-fuerte); overflow: hidden; }
.v2-desliza span::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--tinta); animation: v2-gota 1.8s var(--resorte) infinite; }
@keyframes v2-gota { to { top: 100%; } }

/* ---------- Titulares de sección ---------- */
.v2-titular { max-width: 720px; margin-bottom: clamp(40px, 6vw, 72px); }
.v2-titular h2 { margin-top: 14px; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.05; }
.v2-titular > p:last-child:not(.v2-etiqueta) { margin-top: 18px; font-size: 18px; color: var(--tinta-suave); max-width: 52ch; }
.v2-seccion { padding-block: var(--seccion); }

/* ---------- Cómo funciona: pasos + teléfono que se arma ---------- */
.v2-historia { padding-top: var(--seccion); }
.v2-historia-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); }
.v2-pasos { list-style: none; margin: 0; padding: 0; }
.v2-paso { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; max-width: 440px; opacity: .28; transition: opacity .5s var(--resorte); }
.v2-paso.v2-activo, .v2-sin-movimiento .v2-paso { opacity: 1; }
.v2-paso:last-child { min-height: 90vh; }
.v2-paso-num { font-size: 14px; font-weight: 600; color: var(--acento-texto); letter-spacing: .06em; }
.v2-paso h3 { margin-top: 12px; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; }
.v2-paso p { margin-top: 16px; font-size: 18px; color: var(--tinta-suave); }

.v2-escenario { position: sticky; top: 72px; height: calc(100vh - 72px); height: calc(100svh - 72px); display: flex; align-items: center; justify-content: center; }
.v2-tel {
  position: relative; height: min(660px, calc(100svh - 120px)); width: auto; max-width: 100%; aspect-ratio: 9 / 17.5;
  border-radius: 44px; padding: 12px; background: #0E1322;
  border: 1px solid var(--linea-fuerte);
  box-shadow: 0 0 0 6px #070A12, 0 40px 120px -30px rgba(37, 99, 235, .45), 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.v2-tel-barra { display: flex; align-items: center; gap: 10px; padding: 14px 12px 12px; }
.v2-tel-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(140deg, var(--calido), #C46A2A); color: #1B120C; font-size: 12px; font-weight: 600; }
.v2-tel-nombre { font-size: 15px; font-weight: 600; }
.v2-tel-estado { margin-left: auto; position: relative; height: 24px; min-width: 88px; }
.v2-tel-estado b { position: absolute; right: 0; top: 0; padding: 4px 10px; border-radius: 999px; background: var(--acento-velo); color: var(--acento-texto); font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s var(--resorte); }
.v2-tel[data-etapa="1"] [data-estado="1"], .v2-tel[data-etapa="2"] [data-estado="2"], .v2-tel[data-etapa="3"] [data-estado="3"], .v2-tel[data-etapa="4"] [data-estado="4"] { opacity: 1; transform: none; }
.v2-tel[data-etapa="4"] [data-estado="4"] { background: rgba(74, 222, 128, .14); color: #86EFAC; }
.v2-tel-cuerpo { position: relative; height: calc(100% - 92px); border-radius: 32px; background: var(--fondo); overflow: hidden; }
.v2-tel-nota { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 11px; color: var(--tinta-tenue); }

.v2-capa { position: absolute; inset: 0; padding: 22px 18px; opacity: 0; visibility: hidden; }
.v2-tel[data-etapa="1"] .v2-capa-1, .v2-tel[data-etapa="2"] .v2-capa-2, .v2-tel[data-etapa="3"] .v2-capa-3, .v2-tel[data-etapa="4"] .v2-capa-4 { opacity: 1; visibility: visible; }
.v2-capa-titulo { font-size: 13px; font-weight: 600; color: var(--tinta-tenue); letter-spacing: .04em; text-transform: uppercase; }

.v2-avance { margin-top: 12px; height: 6px; border-radius: 3px; background: var(--superficie-2); overflow: hidden; }
.v2-avance i { display: block; height: 100%; width: 100%; border-radius: 3px; background: var(--acento); transform-origin: left; }
.v2-respuestas { margin: 20px 0 0; display: grid; gap: 10px; }
.v2-respuestas div { padding: 12px 14px; border-radius: var(--radio-chico); background: var(--superficie); border: 1px solid var(--linea); }
.v2-respuestas dt { font-size: 12px; color: var(--tinta-tenue); }
.v2-respuestas dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; }

.v2-guion { margin-top: 18px; display: grid; gap: 12px; }
.v2-guion p { padding: 14px; border-radius: var(--radio-chico); background: var(--superficie); border: 1px solid var(--linea); font-size: 15px; line-height: 1.4; }
.v2-guion small { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--acento-texto); }

.v2-cuadro { position: relative; height: 72%; border-radius: 18px; overflow: hidden; background: linear-gradient(170deg, #3A2414 0%, #1B120C 70%); display: grid; place-items: center; }
.v2-concha { width: 72%; }
.v2-concha ellipse { fill: rgba(0, 0, 0, .35); }
.v2-concha path { fill: #E7A25E; }
.v2-concha .v2-concha-raya { fill: none; stroke: #F8D7A5; stroke-width: 5; stroke-linecap: round; }
.v2-subtitulos { position: absolute; left: 10px; right: 10px; bottom: 18px; text-align: center; font-size: 20px; font-weight: 600; line-height: 1.2; }
.v2-subtitulos span { display: inline-block; color: rgba(255, 255, 255, .45); }
.v2-subtitulos span.v2-dicha { color: #fff; }
.v2-subtitulos span.v2-resalta { color: var(--calido); }
.v2-linea-tiempo { position: relative; margin-top: 16px; height: 44px; display: grid; grid-template-columns: 1.3fr 1fr .8fr 1.1fr; gap: 4px; }
.v2-linea-tiempo i { display: block; border-radius: 8px; background: var(--superficie-2); border: 1px solid var(--linea); }
.v2-linea-tiempo i:nth-child(odd) { background: linear-gradient(160deg, #3A2414, #22160D); }
.v2-cabezal { position: absolute; top: -6px; bottom: -6px; left: 0; width: 2px; border-radius: 1px; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); }

.v2-post { border-radius: 18px; overflow: hidden; background: var(--superficie); border: 1px solid var(--linea); }
.v2-post-foto { height: 180px; display: grid; place-items: center; background: linear-gradient(170deg, #3A2414, #1B120C); }
.v2-post-foto .v2-concha { width: 58%; }
.v2-post-datos { display: grid; grid-template-columns: 1fr 1fr; padding: 14px; gap: 8px; }
.v2-post-datos b { display: block; font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.v2-post-datos small { font-size: 12px; color: var(--tinta-tenue); }
.v2-mensaje { margin-top: 12px; max-width: 85%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--superficie-2); font-size: 14px; }
.v2-mensaje-tu { margin-left: auto; border-radius: 16px 16px 4px 16px; background: var(--acento); }

/* ---------- La frase que se enciende ---------- */
.v2-frase { padding-block: var(--seccion); }
.v2-frase p { font-size: clamp(30px, 4.4vw, 60px); line-height: 1.12; font-weight: 600; letter-spacing: -.03em; max-width: 1000px; }
.v2-frase .v2-pal { color: rgba(242, 244, 248, .16); transition: color .2s; }
.v2-frase .v2-pal.v2-encendida, .v2-sin-movimiento .v2-frase .v2-pal { color: var(--tinta); }

/* ---------- Qué hacemos ---------- */
.v2-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.v2-tarjeta { padding: clamp(24px, 3vw, 36px); border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--linea); }
.v2-tarjeta-grande { grid-column: span 3; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 48px; align-items: start; }
.v2-tarjeta-grande > .v2-tarjeta-icono, .v2-tarjeta-grande > h3, .v2-tarjeta-grande > p { grid-column: 1; }
.v2-tarjeta-grande .v2-modos { grid-column: 2; grid-row: 1 / span 3; }
.v2-tarjeta-icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--acento-velo); }
.v2-tarjeta-icono svg { width: 22px; height: 22px; fill: none; stroke: var(--acento-texto); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.v2-tarjeta h3 { margin-top: 22px; font-size: 22px; line-height: 1.2; }
.v2-tarjeta-grande h3 { font-size: clamp(26px, 2.6vw, 32px); }
.v2-tarjeta p { margin-top: 10px; color: var(--tinta-suave); }
.v2-modos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v2-modos li { padding: 18px; border-radius: var(--radio-chico); background: var(--superficie-2); }
.v2-modos b { display: block; font-size: 16px; }
.v2-modos span { display: block; margin-top: 4px; font-size: 14px; color: var(--tinta-suave); }
.v2-pronto { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--linea-fuerte); font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--tinta-suave); }

/* ---------- Precios ---------- */
.v2-nota { margin-top: -40px; margin-bottom: 40px; font-size: 14px; color: var(--tinta-tenue); max-width: 70ch; }
.v2-desplegable .v2-nota, .v2-detalles .v2-nota { margin: 12px 0 0; }
.v2-aviso { margin-bottom: 24px; padding: 12px 16px; border-radius: var(--radio-chico); background: rgba(251, 191, 36, .1); color: #FDE68A; font-size: 15px; }
.v2-planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.v2-plan { display: flex; flex-direction: column; padding: 32px 28px; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--linea); transition: border-color .3s; }
.v2-plan-destacado { border-color: rgba(138, 180, 255, .45); background: linear-gradient(180deg, rgba(37, 99, 235, .12), var(--superficie) 40%); }
.v2-plan.vz-recomendado { border-color: var(--acento-texto); }
.v2-plan h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 22px; }
.v2-insignia { padding: 4px 10px; border-radius: 999px; background: var(--acento); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0; }
.v2-plan-para { margin-top: 8px; color: var(--tinta-suave); font-size: 15px; min-height: 3em; }
.v2-precio { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; color: var(--tinta-suave); }
.v2-precio .vz-precio-desde { width: 100%; font-size: 13px; color: var(--tinta-tenue); }
.v2-precio .vz-precio-num { font-size: 44px; font-weight: 600; letter-spacing: -.035em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.v2-precio .vz-precio-mes { font-size: 14px; color: var(--tinta-tenue); }
.v2-plan-tokens { margin-top: 6px; font-size: 14px; color: var(--acento-texto); font-weight: 600; }
.v2-plan-alcanza { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--linea); font-size: 15px; color: var(--tinta-suave); }
.v2-plan-acceso { margin-top: 8px; font-size: 14px; color: var(--tinta-tenue); }
.v2-plan-mas { margin: 16px 0 24px; }
.v2-plan-mas summary { cursor: pointer; font-size: 15px; font-weight: 600; color: var(--tinta); list-style: none; display: flex; align-items: center; gap: 8px; }
.v2-plan-mas summary::-webkit-details-marker { display: none; }
.v2-plan-mas summary::after { content: "+"; color: var(--tinta-tenue); font-weight: 400; }
.v2-plan-mas[open] summary::after { content: "–"; }
.v2-plan-mas ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; color: var(--tinta-suave); }
.v2-plan-mas li { padding-left: 22px; position: relative; }
.v2-plan-mas li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 10px; height: 6px; border-left: 1.6px solid var(--acento-texto); border-bottom: 1.6px solid var(--acento-texto); transform: rotate(-45deg); }
.v2-plan .v2-boton { margin-top: auto; width: 100%; }
.v2-empresa { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px; border-radius: var(--radio); border: 1px solid var(--linea); }
.v2-empresa h3 { font-size: 22px; }
.v2-empresa p { margin-top: 6px; color: var(--tinta-suave); font-size: 15px; max-width: 60ch; }
.v2-empresa .v2-boton { flex: none; }

.v2-detalles { margin-top: 48px; border-top: 1px solid var(--linea); }
.v2-desplegable { border-bottom: 1px solid var(--linea); }
.v2-desplegable > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 24px 40px 24px 0; position: relative; font-size: 18px; font-weight: 600; }
.v2-desplegable > summary::-webkit-details-marker { display: none; }
.v2-desplegable > summary small { font-size: 14px; font-weight: 400; color: var(--tinta-tenue); }
.v2-desplegable > summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 1.6px solid var(--tinta-suave); border-bottom: 1.6px solid var(--tinta-suave); transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--resorte); }
.v2-desplegable[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.v2-desplegable > :not(summary) { margin-bottom: 28px; }
.v2-tablas { display: grid; gap: 24px; }
.v2-tablas h4 { margin: 0; font-size: 16px; }
.v2-tablas section > p { margin-top: 4px; font-size: 14px; color: var(--tinta-tenue); }
.v2-tabla-envoltura, .vz-tabla-envoltura { overflow-x: auto; margin-top: 12px; }
.vz-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.vz-tabla th, .vz-tabla td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.vz-tabla thead th { color: var(--tinta-tenue); font-weight: 600; font-size: 13px; }
.vz-tabla tbody th { font-weight: 600; }
.vz-tabla .num { text-align: right; }
.vz-tabla td.si { color: #86EFAC; }
.vz-tabla td.no { color: var(--tinta-tenue); }
.vz-nota-propuesta { color: var(--tinta-tenue); font-size: 14px; }

/* ---------- Cierre y pie ---------- */
.v2-cierre { padding-bottom: var(--seccion); }
.v2-cierre-caja { text-align: center; }
.v2-cierre-caja h2 { font-size: clamp(36px, 5.4vw, 68px); line-height: 1.04; letter-spacing: -.035em; max-width: 16ch; margin-inline: auto; }
.v2-cierre-caja h2 em { display: block; }
.v2-cierre-caja p { margin: 20px auto 0; max-width: 46ch; font-size: 18px; color: var(--tinta-suave); }
.v2-cierre-caja .v2-acciones { justify-content: center; }

.v2-pie { border-top: 1px solid var(--linea); padding-block: 40px calc(40px + env(safe-area-inset-bottom)); }
.v2-pie-rejilla { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
.v2-pie img { height: 20px; width: auto; opacity: .85; }
.v2-pie nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.v2-pie a { color: var(--tinta-suave); text-decoration: none; font-size: 14px; }
.v2-pie a:hover { color: var(--tinta); }
.v2-pie p { margin-left: auto; font-size: 13px; color: var(--tinta-tenue); }

/* ---------- Diálogo de ventas ---------- */
.v2-ventas { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--linea-fuerte); border-radius: 24px; background: var(--superficie); color: var(--tinta); }
.v2-ventas::backdrop { background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.v2-ventas-form { position: relative; display: grid; gap: 14px; padding: 32px 28px; }
.v2-ventas-form h2 { font-size: 28px; }
.v2-ventas-form > p { color: var(--tinta-suave); font-size: 15px; }
.v2-ventas-form label { display: grid; gap: 6px; font-size: 14px; color: var(--tinta-suave); }
.v2-ventas-form input:not([type=checkbox]), .v2-ventas-form select, .v2-ventas-form textarea { width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--linea-fuerte); background: var(--fondo); color: var(--tinta); font: 16px/1.4 "Mona", sans-serif; }
.v2-ventas-form [aria-invalid="true"] { border-color: #F87171; }
.v2-acepto { grid-template-columns: auto 1fr; align-items: start; }
.v2-acepto a { color: var(--acento-texto); }
.v2-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.v2-ventas-cerrar { position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--superficie-2); color: var(--tinta); font-size: 22px; cursor: pointer; }
.vz-ventas-estado { min-height: 1.4em; font-size: 14px; color: var(--tinta-suave); }

/* ---------- Entradas al verse (las enciende v2.js; sin JS no se esconde nada) ---------- */
.v2-js [data-entra], .v2-js [data-revela] { opacity: 0; }
.v2-sin-movimiento [data-entra], .v2-sin-movimiento [data-revela] { opacity: 1 !important; }

/* ---------- Tableta ---------- */
@media (max-width: 1000px) {
  .v2-tres { grid-template-columns: 1fr 1fr; }
  .v2-tarjeta-grande { grid-column: span 2; grid-template-columns: 1fr; }
  .v2-tarjeta-grande .v2-modos { grid-column: 1; grid-row: auto; margin-top: 24px; }
  .v2-planes { grid-template-columns: 1fr; max-width: 520px; }
}

/* ---------- Celular ---------- */
@media (max-width: 820px) {
  body.v2 { font-size: 16px; }
  .v2-barra { height: 64px; gap: 12px; }
  .v2-liga-sesion { display: none; }
  .v2-menu { display: block; }
  .v2-nav { position: fixed; inset: 64px 0 auto; flex-direction: column; gap: 0; padding: 8px var(--gutter) 20px; background: rgba(5, 7, 13, .97); border-bottom: 1px solid var(--linea); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s, transform .3s var(--resorte), visibility 0s .3s; }
  .v2-nav.v2-abierta { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--resorte); }
  .v2-nav a { padding: 14px 0; font-size: 18px; color: var(--tinta); border-bottom: 1px solid var(--linea); }
  .v2-nav-movil { display: block; }
  .v2-cabecera:has(.v2-abierta) { background: rgba(5, 7, 13, .97); }

  .v2-portada-rejilla { grid-template-columns: 1fr; }
  .v2-portada-arte { aspect-ratio: 1.25; }
  .v2-acciones .v2-boton { flex: 1 1 auto; }
  .v2-desliza { display: none; }

  /* El teléfono se queda pegado arriba y los pasos pasan por debajo. */
  .v2-historia-rejilla { grid-template-columns: 1fr; gap: 0; }
  .v2-escenario { order: -1; top: 64px; height: auto; padding-block: 12px; z-index: 2; background: linear-gradient(color-mix(in srgb, var(--cielo-cenit) 86%, var(--cielo-medio)), var(--cielo-medio) 88%, transparent); }
  /* El mismo teléfono de escritorio, en chiquito: se ve igual y nada se desborda. */
  .v2-tel { height: 640px; zoom: .6; }
  .v2-paso { min-height: 70vh; justify-content: flex-start; padding-top: 24px; }
  .v2-paso:last-child { min-height: 95vh; }

  .v2-tres { grid-template-columns: 1fr; }
  .v2-tarjeta-grande { grid-column: auto; }
  .v2-modos { grid-template-columns: 1fr; }
  .v2-nota { margin-top: -24px; }
  .v2-empresa { flex-direction: column; align-items: stretch; }
  .v2-pie p { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-desliza span::after { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ---------- Arma tu paquete (26-oct): el mismo armador de V1 (armador.css + armador.js), siempre abierto, en su tarjeta ---------- */
.v2-armador { margin-top: clamp(40px, 6vw, 72px); padding: clamp(20px, 3.4vw, 40px); border: 1px solid var(--linea); border-radius: 28px;
  background: rgba(9, 14, 30, .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.v2-armador-cabeza { max-width: 62ch; margin-bottom: clamp(20px, 3vw, 32px); }
.v2-armador-cabeza h3 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -.02em; line-height: 1.1; }
.v2-armador-cabeza p { margin-top: 10px; color: var(--tinta-suave); font-size: 16px; }

/* Arma tu paquete, versión compacta (26-oct, Olimón: «está excesivamente largo»). Solo en V2: el armador de V1 no cambia.
   Botones de giro chicos, los 3 tipos en una fila, sin la onda decorativa ni la lista larga de «qué trae». */
.v2-armador { padding: clamp(18px, 2.6vw, 30px); }
.v2-armador-cabeza { margin-bottom: 18px; }
.v2-armador-cabeza p { font-size: 15px; margin-top: 6px; }
.v2-armador .ar { gap: 16px; }
.v2-armador .ar-paso { padding-bottom: 14px; gap: 10px; grid-template-columns: 26px minmax(0, 1fr); }
.v2-armador .ar-num { width: 26px; height: 26px; font-size: 13px; }
.v2-armador .ar-paso h4 { font-size: 17px; margin: 2px 0 2px; }
.v2-armador .ar-sub { margin-bottom: 10px; font-size: 13.5px; }
.v2-armador .ar-etq { margin: 10px 0 6px; font-size: 11px; }
.v2-armador .ar-chips { gap: 6px; }
.v2-armador .ar-chip { padding: 5px 11px; min-height: 32px; font-size: 13px; }
.v2-armador .ar-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@container (min-width: 520px) and (max-width: 759px) { .v2-armador .ar-presets { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v2-armador .ar-preset { padding: 9px 10px; border-radius: 12px; gap: 1px; }
.v2-armador .ar-preset > :not(:first-child):not(.ar-preset-pie) { display: none; } /* solo nombre y tokens */
.v2-armador .ar-preset-pie { margin-top: 2px; }
.v2-armador .ar-onda { display: none; }
.v2-armador .ar-tipo { padding: 10px 12px 8px; margin-bottom: 0; border-radius: 14px; }
.v2-armador .ar-tipo-cuenta { font-size: 18px; }
.v2-armador .ar-tipo-nota { display: none; }
.v2-armador .ar-segs { margin-top: 6px; gap: 4px; }
.v2-armador .ar-seg { min-height: 36px; padding: 5px 8px; font-size: 12.5px; }
.v2-armador .ar-switch { padding: 9px 12px; }
.v2-armador .ar-tarjeta { padding: 16px; }
.v2-armador .ar-plan { font-size: 24px; }
.v2-armador .ar-plan-para { margin-bottom: 10px; }
.v2-armador .ar-creditos-num { font-size: 36px; }
.v2-armador .ar-trae, .v2-armador .ar-marcas { display: none; }
.v2-armador .ar-desglose { gap: 4px; margin-bottom: 10px; }
.v2-armador .ar-aviso { padding: 8px 10px 8px 32px; font-size: 13px; }
@container (min-width: 760px) {
  .v2-armador .ar-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* los tipos de pieza en una fila, cada uno en su cajita */
  .v2-armador .ar-paso:nth-child(2) .ar-paso-cuerpo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: start; }
  .v2-armador .ar-paso:nth-child(2) .ar-paso-cuerpo > :not(.ar-tipo) { grid-column: 1 / -1; }
  .v2-armador .ar-tipo-cabeza { flex-wrap: wrap; }
}
@container (min-width: 1120px) { .v2-armador .ar-presets { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v2-armador .ar-incluidos { display: none; } /* ya lo dicen las tarjetas de los planes */
.v2-armador .ar-tipo .ar-segs { flex-wrap: nowrap; }
.v2-armador .ar-tipo .ar-seg { flex: 1 1 0; min-width: 0; }
.v2-armador .ar-tipo-cabeza strong, .v2-armador .ar-tipo-cabeza h5 { font-size: 15px; }

/* ---------- La portada oficial (26-oct-2026): lo que V1 tenía y V2 suma con su propio diseño ---------- */
/* Sesión (perfil.js): la pastilla «Ir a mi panel» con foto, el saludo y lo que solo ve quien no ha entrado. */
:root { --acento-2: #1D4ED8; }
.vz-con-sesion [data-sin-sesion] { display: none !important; }
.v2 .vz-perfil { background: rgba(11, 15, 26, .72); border-color: var(--linea-fuerte); font-family: "Mona", sans-serif; font-size: 15px; }
.v2 .vz-perfil:hover { border-color: var(--acento-texto); }
.v2-hola { margin: 0 0 18px; padding: 6px 16px; font-size: 14.5px; background: var(--acento-velo); border-color: rgba(138, 180, 255, .28); }
.v2-idioma { font-size: 14px; }
.v2-insignia-suave { background: var(--superficie-2); color: var(--tinta-suave); border: 1px solid var(--linea-fuerte); vertical-align: middle; }
.v2-empresa .v2-plan-mas { margin: 14px 0 0; }
.v2-empresa .v2-plan-mas ul { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.v2-pista { margin-top: 10px; }
@media (min-width: 900px) { .v2-pista { display: none; } }
.v2-ya-cliente { display: inline-block; margin-top: 20px; color: var(--tinta-suave); font-size: 15px; text-underline-offset: 4px; }
.v2-ya-cliente:hover { color: var(--tinta); }
.v2-pie-nota { flex-basis: 100%; margin-left: 0 !important; }
/* Renglón legal (26-oct-2026, verificación de Meta): quién es el negocio, discreto, en franja sutil bajo el pie. */
.v2-pie-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; margin-top: 28px; padding: 14px 18px; border: 1px solid var(--linea); border-radius: var(--radio-chico); background: rgba(255, 255, 255, .025); }
.v2-pie .v2-pie-legal p { margin: 0; width: auto; font-size: 12.5px; line-height: 1.6; color: var(--tinta-tenue); letter-spacing: .01em; }
.v2-pie-legal p span { white-space: nowrap; }
.v2-pie .v2-pie-legal p a { font-size: inherit; color: var(--tinta-suave); text-decoration: underline; text-decoration-color: var(--linea-fuerte); text-underline-offset: 3px; }
.v2-pie .v2-pie-legal nav { gap: 6px 20px; }
.v2-pie .v2-pie-legal nav a { font-size: 13px; }
@media (max-width: 520px) { .v2-pie-legal p span { white-space: normal; } }
.v2-pausa { padding: 6px 12px; border: 1px solid var(--linea); border-radius: 999px; background: transparent; color: var(--tinta-tenue); font: 500 13px/1.2 "Mona", sans-serif; cursor: pointer; }
.v2-pausa:hover { color: var(--tinta); border-color: var(--linea-fuerte); }
/* «Pausar animaciones» (accesibilidad, como en V1): se detiene todo lo que se repite solo. */
.v2-en-pausa *, .v2-en-pausa *::before, .v2-en-pausa *::after { animation-play-state: paused !important; }
.v2-en-pausa .v2-humo { display: none; }
@media (max-width: 820px) { .v2 .vz-perfil { padding: 3px; min-height: 40px; } }
/* Celular angosto: la barra no se aprieta. «Crear cuenta» sale de la barra (está en grande justo debajo y en el cierre)
   y el buscador toma el espacio que queda, para que «¿Cómo vendo más?» se lea completo. */
@media (max-width: 520px) {
  .v2-barra { gap: 10px; }
  .v2-marca img { height: 20px; }
  .v2-barra-der { gap: 8px; }
  .v2-barra-der .v2-boton[href^="/registro"] { display: none; }
  .v2 .vz-buscar { flex: 1 1 auto; justify-content: center; }
}
/* «This page is available in English» (idioma.js, a quien trae el navegador en inglés): píldora de vidrio bajo la barra. */
.v2 .vz-otro-idioma { position: fixed; z-index: 40; left: 50%; top: 80px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; max-width: calc(100vw - 24px);
  padding: 4px 6px 4px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--tinta); background: rgba(11, 15, 26, .86);
  border: 1px solid var(--linea-fuerte); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .7); }
.v2 .vz-otro-idioma a { color: inherit; text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; white-space: nowrap; }
.v2 .vz-otro-idioma a:hover, .v2 .vz-otro-idioma a:focus-visible { text-decoration: underline; }
.v2 .vz-otro-idioma button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .75; }
.v2 .vz-otro-idioma button:hover, .v2 .vz-otro-idioma button:focus-visible { opacity: 1; }
@media (max-width: 820px) { .v2 .vz-otro-idioma { top: 72px; } }

/* Arma tu paquete (26-oct, Olimón): fuera «Lo que quieres lograr» y «O empieza con uno armado»; así el paso 1 queda corto y
   las barras de «¿Cuánto quieres?» (lo importante) suben. El giro sigue sugiriendo el paquete. */
.v2-armador .ar-chips[aria-label="Lo que quieres lograr"], .v2-armador .ar-etq:has(+ .ar-chips[aria-label="Lo que quieres lograr"]),
.v2-armador .ar-presets, .v2-armador .ar-etq:has(+ .ar-presets) { display: none; }
/* con el espacio ganado, las barras de «¿Cuánto quieres?» van a lo ancho, una debajo de otra (en tres columnas se aplastaban) */
@container (min-width: 760px) {
  .v2-armador .ar-paso:nth-child(2) .ar-paso-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
.v2-armador .ar-tipo { padding: 14px 16px 12px; }
.v2-armador .ar-tipo-cabeza { flex-wrap: nowrap; }
.v2-armador .ar-tipo .ar-segs { flex-wrap: nowrap; max-width: 420px; }
.v2-armador .ar-tipo .ar-seg { flex-direction: row; gap: 6px; min-height: 36px; white-space: nowrap; }

/* Barra en píldora (26-oct, Olimón: «el logo queda súper pequeño; pon solo la V y la A»): en la píldora va el símbolo de Vozavía,
   a buen tamaño, y las ligas no se parten en dos renglones. */
@media (min-width: 821px) {
  .v2-cabecera .v2-marca { flex: none; }
  .v2-cabecera .v2-nav a { white-space: nowrap; }
  .v2-cabecera.v2-pildora .v2-barra { max-width: 1060px; }
  .v2-cabecera.v2-pildora .v2-marca img { display: none; }
  .v2-cabecera.v2-pildora .v2-marca::before { content: ""; display: block; width: 36px; height: 24px; background: url("/vozavia-simbolo.svg") center / contain no-repeat;
    filter: drop-shadow(0 0 8px rgba(96, 165, 250, .55)); }
}

/* ---------- Arma tu paquete en una sola pantalla (26-oct, Olimón: «como la de precios de Higgsfield») ----------
   En computadora todo cabe en ~1280×800 sin bajar: a la izquierda los 3 pasos compactos (el giro en una línea con sus
   «más buscados» plegados, cada tipo de pieza en un renglón: nombre · barra · calidad, y los extras en una fila);
   a la derecha la tarjeta del plan con precio y botón. La tarjeta usa casi todo el ancho de la ventana.
   En celular nada de esto aplica (ahí sí se baja). Fondo igual de discreto; sin plasma ni humo. */
.v2-armador { scroll-margin-top: 76px; }
.v2-armador .ar-etq-plegar { margin: 8px 0 0; }
.v2-armador .ar-etq-plegar + .ar-giros-comunes { margin-top: 4px; }
@media (min-width: 1024px) {
  /* 26-oct, 3a vuelta (Olimón): «un centímetro más chico» para que no se sienta del tamaño de la ventana: 38 px más de aire por lado. */
  .v2-armador { position: relative; width: min(calc(100vw - 124px), 1400px); margin-left: calc(50% - min(50vw - 62px, 700px));
    padding: 22px 26px 24px; border-radius: 24px; }
  .v2-armador-cabeza { max-width: none; display: flex; align-items: baseline; gap: 18px; margin-bottom: 14px; }
  .v2-armador-cabeza h3 { flex: none; font-size: 28px; }
  .v2-armador-cabeza p { margin: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@container (min-width: 900px) {
  .v2-armador .ar { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 26px; }
  /* los pasos */
  .v2-armador .ar-pasos { gap: 0; }
  .v2-armador .ar-paso { padding-bottom: 12px; gap: 12px; }
  .v2-armador .ar-paso::before { top: 30px; left: 12px; }
  .v2-armador .ar-paso h4 { font-size: 16px; margin: 3px 0 8px; }
  .v2-armador .ar-paso > .ar-paso-cuerpo > .ar-sub { display: none; } /* el título ya lo dice; la tarjeta explica lo demás */
  /* 1 · tu giro: la caja y «Buscar» en una línea; la etiqueta «Tu giro» sobra (el paso ya se llama así) */
  .v2-armador .ar-buscar > label.ar-etq { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .v2-armador .ar-buscar-caja, .v2-armador .ar-buscar-ir { min-height: 40px; padding-block: 8px; border-radius: 12px; font-size: 15px; }
  .v2-armador .ar-giros-comunes .ar-chip { min-height: 30px; padding: 4px 11px; font-size: 12.5px; }
  .v2-armador .ar-porque { margin-top: 6px; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* la microcotización del giro: solo el plan y «Para crecer / Lo mínimo» (las piezas y el total ya están en las barras y la tarjeta) */
  .v2-armador .ar-cotiza[data-estado="giro"] { margin-top: 8px; padding: 8px 12px; border-radius: 14px; gap: 6px 14px; display: flex; flex-wrap: wrap; align-items: center; }
  .v2-armador .ar-cotiza[data-estado="giro"] > :is(.ar-cotiza-quien, .ar-cotiza-sub, .ar-cotiza-piezas, .ar-cotiza-incluye, .ar-cotiza-total, .ar-cotiza-porque, .ar-cotiza-graba, .ar-cotiza-listo) { display: none; }
  .v2-armador .ar-cotiza[data-estado="giro"] .ar-cotiza-plan { flex: 1 1 auto; font-size: 15px; }
  .v2-armador .ar-cotiza[data-estado="giro"] .ar-cotiza-version { margin: 0; flex: none; }
  .v2-armador .ar-cotiza[data-estado="giro"] .ar-cotiza-version .ar-seg { min-height: 30px; padding: 3px 12px; }
  .v2-armador .ar-cotiza[data-estado="giro"] .ar-cotiza-aviso { flex-basis: 100%; margin: 0; padding: 6px 10px; font-size: 12.5px; }
  /* 2 · ¿cuánto quieres?: cada tipo en un renglón: nombre y tokens · barra · calidad (botones chicos) */
  .v2-armador .ar-paso:nth-child(2) .ar-paso-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .v2-armador .ar-tipo { display: grid; grid-template-columns: minmax(140px, .9fr) minmax(140px, 1.3fr) minmax(168px, 200px); align-items: center; column-gap: 16px;
    padding: 8px 12px 8px 14px; border-radius: 14px; }
  .v2-armador .ar-tipo-cabeza { display: grid; gap: 0; justify-content: start; }
  .v2-armador .ar-tipo-cabeza label { font-size: 14px; line-height: 1.25; }
  .v2-armador .ar-tipo-cifras { gap: 6px; }
  .v2-armador .ar-tipo-cuenta { font-size: 15px; }
  .v2-armador .ar-tipo-creditos { font-size: 12px; }
  .v2-armador .ar-tipo .ar-rango { height: 26px; }
  .v2-armador .ar-tipo .ar-segs { margin: 0; gap: 4px; max-width: none; justify-self: end; width: 100%; }
  .v2-armador .ar-tipo .ar-seg { align-content: center; flex: 1 1 0; flex-direction: column; gap: 0; min-height: 34px; padding: 3px 8px; border-radius: 10px; font-size: 12px; line-height: 1.15; white-space: nowrap; }
  .v2-armador .ar-tipo .ar-candado { font-size: 10px; }
  /* 3 · extras: «Lo mejor en todo» y cada cuándo, en una fila */
  .v2-armador .ar-paso:nth-child(3) { padding-bottom: 0; }
  .v2-armador .ar-paso:nth-child(3) .ar-paso-cuerpo { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: stretch; }
  .v2-armador .ar-paso:nth-child(3) h4 { flex-basis: 100%; margin-bottom: 0; }
  .v2-armador .ar-paso:nth-child(3) .ar-etq { display: none; } /* el grupo ya se anuncia como «Cada cuándo compras» */
  .v2-armador .ar-extras { display: block; }
  .v2-armador .ar-switch { width: auto; padding: 6px 12px 6px 8px; gap: 10px; border-radius: 12px; }
  .v2-armador .ar-switch-texto b { font-size: 13.5px; }
  .v2-armador .ar-switch-texto small { font-size: 11.5px; }
  .v2-armador .ar-frecs { flex: 1 1 300px; margin: 0; flex-wrap: nowrap; }
  .v2-armador .ar-frecs .ar-seg { align-content: center; min-height: 40px; padding: 4px 10px; font-size: 12.5px; border-radius: 12px; white-space: nowrap; }
  /* la tarjeta del plan, más apretada: sin el desglose (cada renglón de la izquierda ya dice sus tokens) */
  .v2-armador .ar-tarjeta { padding: 16px 18px; border-radius: 20px; }
  .v2-armador .ar-plan { font-size: 22px; }
  .v2-armador .ar-plan-para { margin: 2px 0 10px; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .v2-armador .ar-cobro-op { min-height: 36px; font-size: 14px; }
  .v2-armador .ar-cobro-op small { font-size: 10.5px; }
  .v2-armador .ar-creditos { margin-top: 8px; }
  .v2-armador .ar-creditos-num { font-size: 32px; }
  .v2-armador .ar-escalon { margin: 6px 0 2px; }
  .v2-armador .ar-volver { min-height: 28px; margin-top: 2px; padding: 2px 0; font-size: 12.5px; }
  .v2-armador .ar-uso { margin: 8px 0 10px; }
  .v2-armador .ar-uso-txt { margin-bottom: 6px; font-size: 13px; }
  .v2-armador .ar-uso-barra { height: 8px; }
  .v2-armador .ar-desglose { display: none; }
  .v2-armador .ar-aviso { margin-bottom: 8px; padding: 7px 10px 7px 30px; font-size: 12.5px; line-height: 1.35; }
  .v2-armador .ar-aviso::before { left: 11px; top: 11px; width: 10px; height: 10px; }
  .v2-armador .ar-alcanza { margin-bottom: 8px; font-size: 12.5px; line-height: 1.4; }
  .v2-armador .ar-precio { margin-bottom: 4px; font-size: 15px; }
  .v2-armador .ar-ahorro { margin: 0 0 8px; font-size: 12.5px; }
  .v2-armador .ar-comprar { min-height: 44px; font-size: 15px; }
  .v2-armador .ar-letra-chica { margin-top: 8px; font-size: 11.5px; }
}

/* ---------- Arma tu paquete del tamaño de la pantalla (26-oct, 2a vuelta, Olimón: «quedó demasiado chico; tiene que estar
   prácticamente del tamaño de la pantalla»). En computadora la sección mide el alto visible menos la barra de arriba y casi
   todo el ancho; el paso 2 (las barras) y la tarjeta del plan se estiran para llenarla, y letras, renglones, barras y botones
   crecen con el alto (--s: lo que la ventana pasa de 800 px, hasta 280) sin pasarse. Lo plegado del giro y la estructura compacta se quedan. En celular, igual. */
@media (min-width: 1200px) and (min-height: 720px) {
  .v2-armador { --s: clamp(0px, 100vh - 800px, 280px); width: min(calc(100vw - 124px), 1760px); margin-left: calc(50% - min(50vw - 62px, 880px));
    min-height: calc(100svh - 126px); display: flex; flex-direction: column; scroll-margin-top: 78px;
    padding: calc(20px + var(--s) * 0.0714) clamp(26px, 2.4vw, 48px); }
  .v2-armador-cabeza { margin-bottom: calc(12px + var(--s) * 0.0571); }
  .v2-armador-cabeza h3 { font-size: calc(32px + var(--s) * 0.0643); }
  .v2-armador-cabeza p { font-size: calc(15px + var(--s) * 0.0143); }
  .v2-armador #armador { flex: 1 1 auto; display: flex; flex-direction: column; }
  .v2-armador .ar { flex: 1 1 auto; align-items: stretch; grid-template-columns: minmax(0, 1.65fr) minmax(340px, 1fr); gap: clamp(22px, 2.4vw, 44px); }
  /* los pasos llenan el alto: el 2 se estira y sus tres renglones se reparten el espacio */
  .v2-armador .ar-pasos { display: grid; grid-template-rows: auto 1fr auto; }
  .v2-armador .ar-paso { gap: calc(12px + var(--s) * 0.0214); padding-bottom: calc(12px + var(--s) * 0.0400); grid-template-columns: calc(26px + var(--s) * 0.0357) minmax(0, 1fr); }
  .v2-armador .ar-num { width: calc(26px + var(--s) * 0.0357); height: calc(26px + var(--s) * 0.0357); font-size: calc(13px + var(--s) * 0.0107); }
  .v2-armador .ar-paso::before { left: calc(calc(26px + var(--s) * 0.0357) / 2 - 1px); top: calc(calc(26px + var(--s) * 0.0357) + 4px); }
  .v2-armador .ar-paso h4 { font-size: calc(18px + var(--s) * 0.0286); margin: 2px 0 calc(8px + var(--s) * 0.0286); }
  .v2-armador .ar-buscar-caja, .v2-armador .ar-buscar-ir { min-height: calc(46px + var(--s) * 0.0643); font-size: calc(16px + var(--s) * 0.0107); border-radius: 14px; }
  .v2-armador .ar-buscar-ir { padding-inline: clamp(16px, 2vw, 28px); }
  .v2-armador .ar-etq-plegar { font-size: calc(11px + var(--s) * 0.0071); }
  /* «Los más buscados» va a la derecha de la caja, en el mismo renglón; los chips y la cotización, abajo a lo ancho */
  .v2-armador .ar-buscar { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
  .v2-armador .ar-buscar > .ar-buscar-fila { grid-column: 1; grid-row: 1; }
  .v2-armador .ar-buscar > .ar-etq-plegar { grid-column: 2; grid-row: 1; margin: 0; }
  .v2-armador .ar-buscar > :is(.ar-giros-comunes, .ar-cotiza) { grid-column: 1 / -1; }
  .v2-armador .ar-giros-comunes .ar-chip { min-height: calc(30px + var(--s) * 0.0357); font-size: calc(12.5px + var(--s) * 0.0089); padding-inline: 13px; }
  .v2-armador .ar-porque { font-size: calc(13px + var(--s) * 0.0089); }
  /* con el giro elegido, su renglón de cotización ya dice el plan: el porqué largo sale de aquí (cabe todo sin bajar) */
  .v2-armador .ar-paso-cuerpo:has(.ar-cotiza[data-estado="giro"]:not([hidden])) .ar-porque { display: none; }
  .v2-armador .ar-cotiza[data-estado="giro"] { padding: calc(8px + var(--s) * 0.0214) clamp(12px, 1.4vw, 18px); }
  .v2-armador .ar-cotiza[data-estado="giro"] .ar-cotiza-plan { font-size: calc(15px + var(--s) * 0.0143); }
  .v2-armador .ar-cotiza[data-estado="giro"] .ar-cotiza-version .ar-seg { min-height: calc(30px + var(--s) * 0.0357); font-size: calc(12.5px + var(--s) * 0.0071); }
  .v2-armador .ar-paso:nth-child(2) .ar-paso-cuerpo { grid-template-rows: auto; grid-auto-rows: 1fr; align-items: stretch; gap: calc(6px + var(--s) * 0.0200); }
  .v2-armador .ar-tipo { grid-template-columns: minmax(200px, 1fr) minmax(150px, 1.3fr) minmax(176px, 240px); column-gap: clamp(16px, 1.8vw, 32px);
    padding: calc(6px + var(--s) * 0.0250) clamp(14px, 1.4vw, 24px); border-radius: 16px; }
  .v2-armador .ar-tipo-cabeza { gap: 0; }
  .v2-armador .ar-tipo-cabeza label { font-size: calc(16px + var(--s) * 0.0250); }
  .v2-armador .ar-tipo-cuenta { font-size: calc(19px + var(--s) * 0.0300); }
  .v2-armador .ar-tipo-creditos { font-size: calc(13px + var(--s) * 0.0107); }
  .v2-armador .ar-tipo .ar-rango { height: 32px; }
  .v2-armador .ar-tipo .ar-rango::-webkit-slider-runnable-track { height: calc(6px + var(--s) * 0.0107); }
  .v2-armador .ar-tipo .ar-rango::-webkit-slider-thumb { width: calc(36px + var(--s) * 0.0357); height: calc(24px + var(--s) * 0.0214); margin-top: calc((calc(6px + var(--s) * 0.0107) - calc(24px + var(--s) * 0.0214)) / 2); }
  .v2-armador .ar-tipo .ar-segs { gap: 6px; }
  .v2-armador .ar-tipo .ar-seg { min-height: calc(42px + var(--s) * 0.0714); padding: 4px 12px; font-size: calc(13.5px + var(--s) * 0.0107); border-radius: 12px; }
  .v2-armador .ar-tipo .ar-candado { font-size: calc(11px + var(--s) * 0.0071); }
  .v2-armador .ar-switch { padding: calc(6px + var(--s) * 0.0214) 14px calc(6px + var(--s) * 0.0214) 10px; }
  .v2-armador .ar-switch-texto b { font-size: calc(14.5px + var(--s) * 0.0125); }
  .v2-armador .ar-switch-texto small { font-size: calc(12px + var(--s) * 0.0071); }
  .v2-armador .ar-frecs .ar-seg { min-height: calc(46px + var(--s) * 0.0450); font-size: calc(14px + var(--s) * 0.0125); }
  /* la tarjeta del plan: del alto de los pasos, con aire, el precio y el botón abajo */
  .v2-armador .ar-tarjeta { display: flex; flex-direction: column; padding: calc(16px + var(--s) * 0.0571) clamp(18px, 1.8vw, 32px); border-radius: 24px; }
  .v2-armador .ar-tarjeta > * { flex: none; }
  .v2-armador .ar-plan { font-size: calc(26px + var(--s) * 0.0429); }
  .v2-armador .ar-insignia { font-size: calc(11px + var(--s) * 0.0054); }
  .v2-armador .ar-plan-para { font-size: calc(14px + var(--s) * 0.0107); margin: 4px 0 calc(10px + var(--s) * 0.0357); }
  .v2-armador .ar-cobro-op { min-height: calc(42px + var(--s) * 0.0643); font-size: calc(15px + var(--s) * 0.0107); }
  .v2-armador .ar-cobro-op small { font-size: calc(10.5px + var(--s) * 0.0071); }
  .v2-armador .ar-creditos { margin-top: calc(8px + var(--s) * 0.0500); font-size: calc(14px + var(--s) * 0.0107); }
  .v2-armador .ar-creditos-num { font-size: calc(40px + var(--s) * 0.1143); }
  .v2-armador .ar-escalon { margin: calc(6px + var(--s) * 0.0286) 0 2px; }
  .v2-armador .ar-uso { margin: calc(8px + var(--s) * 0.0429) 0 calc(10px + var(--s) * 0.0286); }
  .v2-armador .ar-uso-txt { font-size: calc(14px + var(--s) * 0.0089); }
  .v2-armador .ar-uso-barra { height: calc(8px + var(--s) * 0.0143); }
  .v2-armador .ar-aviso { font-size: calc(13.5px + var(--s) * 0.0089); }
  .v2-armador .ar-alcanza { font-size: calc(13.5px + var(--s) * 0.0089); }
  .v2-armador .ar-precio { margin-top: auto; padding-top: calc(4px + var(--s) * 0.0286); font-size: calc(18px + var(--s) * 0.0250); }
  .v2-armador .ar-ahorro { font-size: calc(13px + var(--s) * 0.0089); }
  .v2-armador .ar-comprar { min-height: calc(50px + var(--s) * 0.0714); font-size: calc(16px + var(--s) * 0.0107); }
  .v2-armador .ar-letra-chica { font-size: calc(12px + var(--s) * 0.0071); }
}
/* de 1200 px de ancho para arriba, el nombre de cada tipo cabe en un renglón (así los renglones no crecen de más) */
@media (min-width: 1200px) and (min-height: 720px) {
  .v2-armador .ar-tipo { grid-template-columns: max-content minmax(150px, 1fr) minmax(170px, 230px); }
  .v2-armador .ar-tipo-cabeza label { white-space: nowrap; }
}
/* pantallas altas: vuelve la onda de rayas sobre cada barra (el desglose de la tarjeta no: no cabría) */
@media (min-width: 1200px) and (min-height: 1000px) {
  .v2-armador .ar-tipo { grid-template-rows: auto auto; align-content: center; row-gap: 2px; }
  .v2-armador .ar-tipo > .ar-tipo-cabeza { grid-column: 1; grid-row: 1 / span 2; }
  .v2-armador .ar-tipo > .ar-onda { display: flex; grid-column: 2; grid-row: 1; height: calc(20px + var(--s) * 0.0500); margin: 0 2px; padding: 0 calc(14px + var(--s) * 0.0214); }
  .v2-armador .ar-tipo > .ar-rango { grid-column: 2; grid-row: 2; }
  .v2-armador .ar-tipo > .ar-segs { grid-column: 3; grid-row: 1 / span 2; }
}

/* ---------- Botones de calidad (26-oct, 3a vuelta, Olimón: «el texto se sale del recuadro») ----------
   «Alta calidad / desde Crecimiento» y «Tipo comercial / desde Pro» tenían ancho repartido (flex 1 1 0, min-width 0) y poco
   relleno: el texto tocaba o rebasaba el borde. Ahora cada botón mide lo que su texto más un relleno parejo de 12–14 px por
   lado (nunca menos que su contenido), «desde …» va en su propio renglón centrado, los dos del par del mismo alto, y la
   columna de los botones crece a lo que necesitan (la barra es la que cede). Medido con scrollWidth ≤ clientWidth y ≥ 10 px
   del texto al borde en 375, 1024×768, 1280×800, 1440×900 y 1920×1080. */
.v2-armador .ar-tipo .ar-segs { align-items: stretch; }
.v2-armador .ar-tipo .ar-seg { box-sizing: border-box; flex: 1 0 auto; min-width: fit-content; padding-inline: 12px; align-content: center; row-gap: 2px; }
.v2-armador .ar-tipo .ar-seg > * { white-space: nowrap; }
@container (min-width: 900px) {
  .v2-armador .ar-tipo { grid-template-columns: minmax(130px, .9fr) minmax(110px, 1.3fr) auto; }
  .v2-armador .ar-tipo .ar-segs { width: auto; justify-self: end; gap: 6px; }
  .v2-armador .ar-tipo .ar-seg { flex: 0 0 auto; min-width: 84px; padding-inline: 14px; }
}
@media (min-width: 1200px) and (min-height: 720px) {
  .v2-armador .ar-tipo { grid-template-columns: max-content minmax(140px, 1fr) auto; }
  .v2-armador .ar-tipo .ar-seg { min-width: calc(88px + var(--s) * 0.0800); padding-inline: calc(14px + var(--s) * 0.0143); }
}

/* ---------- La onda de rayas sobre cada barra, siempre (26-oct, 4a vuelta, Olimón: «me gusta que los sliders tengan este
   diseño») y las barras alineadas. Los tres renglones de «¿Cuánto quieres?» comparten columnas (subgrid): nombre · barra con su
   onda · botones de calidad. La columna de botones mide lo del par más ancho en todos los renglones, y el renglón sin botones
   («Ediciones de lo que grabas») deja ese hueco: todas las barras y ondas arrancan y terminan igual. La onda escala con el alto
   de la ventana (más baja en pantallas bajas); en celular va completa arriba de su barra. */
.v2-armador .ar-onda { display: flex; height: 18px; margin: 10px 2px 0; }
@container (min-width: 900px) {
  .v2-armador .ar-paso:nth-child(2) .ar-paso-cuerpo { grid-template-columns: minmax(130px, .9fr) minmax(110px, 1.3fr) auto; column-gap: 16px; }
  .v2-armador .ar-paso:nth-child(2) .ar-paso-cuerpo > * { grid-column: 1 / -1; }
  .v2-armador .ar-tipo { grid-template-columns: subgrid; grid-template-rows: auto auto; align-content: center; row-gap: 2px; }
  .v2-armador .ar-tipo > .ar-tipo-cabeza { grid-column: 1; grid-row: 1 / span 2; }
  .v2-armador .ar-tipo > .ar-onda { display: flex; grid-column: 2; grid-row: 1; height: 16px; margin: 0 2px; padding: 0 14px; }
  .v2-armador .ar-tipo > .ar-rango { grid-column: 2; grid-row: 2; }
  .v2-armador .ar-tipo > .ar-segs { grid-column: 3; grid-row: 1 / span 2; justify-self: stretch; width: auto; }
  .v2-armador .ar-tipo > .ar-tipo-nota { display: none; }
}
@media (min-width: 1200px) and (min-height: 720px) {
  .v2-armador .ar-paso:nth-child(2) .ar-paso-cuerpo { grid-template-columns: max-content minmax(140px, 1fr) auto; column-gap: clamp(16px, 1.8vw, 32px); }
  .v2-armador .ar-tipo > .ar-onda { height: calc(16px + var(--s) * 0.0643); padding: 0 calc(14px + var(--s) * 0.0214); }
}
/* entre 1024 y 1199 px (versión compacta): la onda le gana su lugar a un poco de relleno, para no crecer la sección */
@media (min-width: 1024px) and (max-width: 1199px) {
  .v2-armador .ar-tipo { padding-block: 5px; }
  .v2-armador .ar-paso:nth-child(2) .ar-paso-cuerpo { row-gap: 5px; }
}

/* Precio del token en las tarjetas de planes (26-oct-2026, Olimón): de cuánto a cuánto sale 1 token en ese plan y hasta cuánto
   te ahorras contra el token suelto; las mismas fichas del armador. Lo pinta precios.js. */
.v2-plan-token { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.v2-plan-token .vz-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid rgba(126, 176, 255, .32); color: var(--acento-texto); font-variant-numeric: tabular-nums; }
.v2-plan-token .vz-chip-ahorro { border-color: transparent; background: #4ADE80; color: #06101F; }

/* Con una agencia (1-nov-2026): el precio de agencia tachado y atenuado bajo el nuestro, y el ahorro en verde suave. */
.vz-agencia { margin-top: 10px; display: grid; gap: 3px; font-size: 13.5px; line-height: 1.35; }
.vz-agencia-precio { color: var(--tinta-tenue); }
.vz-agencia-precio s { color: var(--tinta-suave); font-weight: 600; font-variant-numeric: tabular-nums; text-decoration-thickness: 1.5px; text-decoration-color: rgba(248, 113, 113, .75); }
.vz-agencia-ahorro { color: #86EFAC; }
.vz-agencia-ahorro b { font-weight: 700; font-variant-numeric: tabular-nums; }
#agencia-como .vz-tabla { min-width: 0; width: 100%; }
#agencia-como .vz-tabla th[scope="row"] { white-space: normal; }
#agencia-como .vz-tabla td.num, #agencia-como .vz-tabla th.num { text-align: right; white-space: nowrap; vertical-align: top; }
#agencia-como .vz-tabla td.num small { display: block; font-size: 12px; color: var(--tinta-tenue); font-weight: 400; }
@media (max-width: 520px) { #agencia-como .vz-tabla th, #agencia-como .vz-tabla td { padding-left: 6px; padding-right: 6px; font-size: 14px; } }
#agencia-como .vz-tabla td.num:nth-child(2) { color: var(--tinta-tenue); text-decoration: line-through; text-decoration-color: rgba(248, 113, 113, .6); }