/* ============================================================================
   Factura lista — hoja de la LANDING (/)
   ----------------------------------------------------------------------------
   ⚠️ Esta hoja sirve SÓLO a index.html. Las otras cinco páginas
   (/estudioscontables y los 3 legales + 404) siguen con `styles.css`, que NO
   se toca. Es a propósito: las dos hojas comparten más de 40 nombres de clase
   con significados distintos (.fl-hero, .fl-h1, .fl-cta, .fl-sec, .fl-faq,
   .fl-plan…) y fusionarlas rompería esas páginas en silencio. No agregar
   selectores de esta hoja a styles.css ni al revés.

   Mobile-first: el CSS base ES el diseño de teléfono; la capa de escritorio
   está al final, en una sola @media.

   Reglas que impone la CSP de producción y que esta hoja respeta:
   · todo el estilo vive acá (cero `style=` en el HTML)
   · todo el movimiento se dispara por CLASES (`.on`), nunca escribiendo
     estilos desde JavaScript
   · ninguna tipografía se descarga: Helvetica del sistema y la mono del sistema
   · ninguna imagen por `data:` ni por CDN

   Eje cromático de marca PIA: OKLCH H=12.
   ========================================================================= */

/* ── Tokens ───────────────────────────────────────────────────────────────
   Dos juegos: `:root` es el tema OSCURO (el que abre) y `[data-pia="light"]`
   redefine sólo lo que cambia. Es el mismo contrato que usa grupopia.com,
   a propósito: quien mantenga los dos sitios no tiene que aprender dos
   mecánicas. Los nombres se conservan aunque en claro dejen de ser literales
   (`--fl-tiza` es el color del texto, no "tiza"): renombrarlos obligaría a
   tocar 300 usos y a que las dos hojas dejen de parecerse.               */
:root {
  /* Marca — NO cambian con el tema. Son la identidad. */
  --fl-bordo:     #7b0f2e;
  --fl-primario:  #8f0d35;
  --fl-primario-h:#a8123f;
  --fl-wa:        #25d366;
  --fl-wa-txt:    #25d366;   /* la palabra «WhatsApp» del titular */
  --fl-wa-btn:    #16a34a;

  /* Superficies y texto — tema oscuro */
  --fl-fondo:     #160305;
  --fl-fondo-2:   #100204;
  --fl-negro:     #0b0203;
  --fl-sup:       #23060c;
  --fl-brillo:    #d54563;   /* acento: rótulos */
  --fl-rosa:      #f0c4c8;   /* íconos y texto de realce sobre oscuro */
  --fl-tiza:      #faf4ef;   /* texto principal */
  --fl-humo:      #ab9a97;   /* texto secundario */

  --fl-linea:      rgba(240, 196, 200, .15);
  --fl-linea-fina: rgba(240, 196, 200, .09);
  --fl-reglon:     rgba(240, 196, 200, .13);   /* reglado del campo de las tarjetas */
  --fl-chip:       rgba(213, 69, 99, .13);

  /* La tela: un único degradé para toda la página. A los 1750 px se apaga en
     el color de base, que es el que ve el pie. */
  --fl-tela:
    radial-gradient(150% 48% at 50% 0%,
      #6d1128 0%, #45091a 22%, #2b0711 42%, #1d0409 62%, var(--fl-fondo) 80%, var(--fl-fondo-2) 100%)
      no-repeat top center / 100% 1750px,
    var(--fl-fondo-2);
  --fl-menu-tela:
    radial-gradient(120% 55% at 50% 0%, #4a0a1c 0%, #2a0610 38%, var(--fl-fondo) 72%, var(--fl-fondo-2) 100%);
  --fl-grano-op:  .5;
  --fl-halo:      rgba(143, 13, 53, .28);      /* detrás del logo de cada tarjeta */
  --fl-vidrio:    rgba(16, 2, 4, .84);         /* header y barra con blur */
  --fl-velo:      rgba(11, 2, 3, .6);          /* fondo detrás del menú */
  --fl-tarj-bg:   linear-gradient(180deg, rgba(35, 6, 12, .60), rgba(11, 2, 3, .40));
  --fl-sombra:    0 16px 44px rgba(0, 0, 0, .42);
  --fl-sombra-lg: 0 30px 70px rgba(0, 0, 0, .55);

  /* Botón principal */
  --fl-cta-bg:    #faf4ef;
  --fl-cta-fg:    #160305;

  /* Panel: la superficie CLARA que llevan el selector y las tarjetas de plan.
     Es superficie, no fondo — por eso es clara en los dos temas. En oscuro va
     en hueso (no blanco puro: sobre una tela bordeaux, el blanco quema). */
  --fl-panel:      #e7e3e0;
  --fl-panel-alto: #eeeae7;
  --fl-panel-2:    #dad4d0;
  --fl-panel-linea:#cec7c2;
  --fl-panel-txt:  #1a0505;
  --fl-panel-txt-2:#6b6765;
  --fl-panel-txt-3:#9a938f;
  --fl-panel-borde: transparent;

  /* Tipografía — Helvetica del sistema. Ninguna de las tres sustitutas tiene
     peso 300: los títulos van en 600/700, nunca en 300. */
  --fl-sans: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif;
  --fl-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;

  /* Ritmo */
  --fl-gut:  20px;
  --fl-sec:  clamp(54px, 15cqi, 76px);
  --fl-r:    10px;   /* radio de botón e input — Manual §10.3 */
  --fl-r-lg: 16px;   /* radio de contenedor grande */
}

/* ── Tema claro ───────────────────────────────────────────────────────────
   Off-white cálido, nunca blanco puro: sobre una pantalla a pleno sol el
   blanco puro satura. El rose (#f0c4c8) NO llega a 4,5:1 sobre claro, así que
   acá el acento pasa a bordeaux — es la misma regla del Manual §8.7 y la
   misma decisión que tomó grupopia.com en su V6.                          */
[data-pia="light"] {
  --fl-fondo:     #fbf8f7;
  --fl-fondo-2:   #f4efed;
  --fl-negro:     #f4efed;
  --fl-sup:       #ffffff;
  --fl-brillo:    #a81e42;
  --fl-rosa:      #8f0d35;
  --fl-tiza:      #26090d;
  --fl-humo:      #6b5b58;

  --fl-linea:      rgba(38, 9, 13, .16);
  --fl-linea-fina: rgba(38, 9, 13, .09);
  --fl-reglon:     rgba(38, 9, 13, .09);
  --fl-chip:       rgba(143, 13, 53, .09);

  --fl-tela:
    radial-gradient(150% 48% at 50% 0%,
      #f6dde3 0%, #f9e9e9 24%, #fbf2f0 46%, var(--fl-fondo) 72%, var(--fl-fondo-2) 100%)
      no-repeat top center / 100% 1750px,
    var(--fl-fondo-2);
  --fl-menu-tela:
    radial-gradient(120% 55% at 50% 0%, #f6dde3 0%, #f9e9e9 34%, var(--fl-fondo) 70%, var(--fl-fondo-2) 100%);
  --fl-grano-op:  .22;
  --fl-halo:      rgba(143, 13, 53, .12);
  --fl-vidrio:    rgba(251, 248, 247, .88);
  --fl-velo:      rgba(38, 9, 13, .38);
  --fl-tarj-bg:   linear-gradient(180deg, #ffffff, #fdfaf9);
  --fl-sombra:    0 14px 34px rgba(38, 9, 13, .10);
  --fl-sombra-lg: 0 26px 56px rgba(38, 9, 13, .14);

  --fl-wa-txt:    #0f7a35;

  --fl-primario-h:#a8123f;

  --fl-cta-bg:    #8f0d35;
  --fl-cta-fg:    #ffffff;

  --fl-panel:      #ffffff;
  --fl-panel-alto: #ffffff;
  --fl-panel-2:    #f6f1ef;
  --fl-panel-linea:#e6dedb;
  --fl-panel-borde: var(--fl-panel-linea);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--fl-negro);
  color: var(--fl-tiza);
  font-family: var(--fl-sans);
  font-size: 16.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body, button, input, select, textarea { font-family: var(--fl-sans); }

/* Bloquea el scroll del documento mientras el menú está abierto. */
body.fl-quieto { overflow: hidden; }

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* `hidden` tiene que ganarle a los display: grid/flex de los componentes. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--fl-brillo);
  outline-offset: 3px;
  border-radius: 4px;
}

.fl-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.fl-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--fl-tiza); color: var(--fl-fondo);
  font-size: 14px; font-weight: 700; padding: 12px 18px; border-radius: 0 0 10px 0;
}
.fl-skip:focus { left: 0; }

/* ── Lienzo ───────────────────────────────────────────────────────────────
   `container-type: inline-size` para que los clamp() midan contra el ancho de
   la página y no contra el viewport: así el tipo no salta cuando aparece la
   barra de scroll, y dentro del marco de revisión de 390 px se ve exactamente
   igual que en un teléfono real.
   ⚠️ Esto convierte a .fl-page en BLOQUE CONTENEDOR: nada con `position:fixed`
   puede vivir adentro (el menú y la barra son hermanos, no hijos).          */
/* ⚠️ En TELÉFONO la página no se corre para los costados, igual que
   /estudioscontables. El culpable es el halo de la captura del hero
   (`.fl-captura::before`, 118 % de ancho): a 390 px se sale 31 px por lado y
   arrastraba el viewport a 402, que es lo que dejaba «agarrar» la pantalla y
   moverla. Se aisló apagando elementos de a uno hasta que `innerWidth` volvió
   a 390 — a ojo no se ve, porque una vez que el viewport creció ya nada
   «desborda».
   Se CORTA en vez de angostar el halo para no cambiar el diseño: lo que queda
   afuera es la parte transparente del degradé.
   ⚠️ `clip` y NO `hidden`: `hidden` crea un contenedor de scroll y le rompe el
   `position: sticky` al header. `clip` no.
   ⚠️ Sólo en teléfono: en escritorio no hay desborde (medido) y el owner pidió
   no tocar esa vista. */
@media (max-width: 899px) {
  .fl-page { overflow-x: clip; }
}

.fl-page {
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  background: var(--fl-tela);
  color: var(--fl-tiza);
  transition: background-color .28s ease;
}

/* Grano: le saca la frialdad al color plano. Si se ve como textura, está mal
   calibrado (Manual §10.2). Coste nulo: patrón repetido, no imagen. */
.fl-tela { position: relative; }
.fl-tela::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: var(--fl-grano-op);
  pointer-events: none;
  z-index: 0;
}
.fl-tela > * { position: relative; z-index: 1; }

.fl-sec { padding: var(--fl-sec) var(--fl-gut); }
.fl-sec--linea { border-top: 1px solid var(--fl-linea-fina); }

/* Sólo el ENCABEZADO se centra. El libro mayor de adentro sigue alineado a la
   izquierda: centrar renglones de largo desparejo hace que cada línea arranque
   en un punto distinto y se lee peor. */
.fl-sec--centro > .fl-rot,
.fl-sec--centro > .fl-h2,
.fl-sec--centro > .fl-parr { text-align: center; }

/* ── Escala tipográfica ───────────────────────────────────────────────────
   La familia está fija (Helvetica del sistema), así que la personalidad sale
   de la escala, el peso y el tracking. Titulares grandes, muy apretados. */
.fl-h1 {
  margin: 0 0 14px;
  font-size: clamp(38px, 10.4cqi, 52px);
  font-weight: 700;
  letter-spacing: -.038em;
  line-height: .94;
}
.fl-h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 8.4cqi, 38px);
  font-weight: 700;
  letter-spacing: -.032em;
  line-height: 1.02;
}
/* Para titulares de más de ~40 caracteres: baja el cuerpo y reparte los
   renglones parejos en vez de dejar una viuda de dos palabras. */
.fl-h2--largo {
  font-size: clamp(24px, 6.6cqi, 30px);
  letter-spacing: -.028em;
  line-height: 1.12;
  text-wrap: balance;
}

.fl-rot {
  margin: 0 0 12px;
  font-size: 11px; font-weight: 700; line-height: 1;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--fl-brillo);
}

.fl-parr { margin: 0 0 26px; color: var(--fl-humo); font-size: 16px; }

/* ── Botones ──────────────────────────────────────────────────────────────
   Ancho completo y 54 px de alto: zona del pulgar, target holgado. */
/* Píldora al ancho de su texto, no una banda de borde a borde: un botón que
   ocupa toda la línea se lee como una barra, no como una acción. 44 px de
   alto es el piso táctil exacto — no bajar de acá. */
.fl-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 0 24px;
  border-radius: var(--fl-r);
  background: var(--fl-cta-bg); color: var(--fl-cta-fg);
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  box-shadow: var(--fl-sombra);
  transition: transform .15s ease, background-color .18s ease;
}
.fl-cta:active { transform: scale(.97); }

/* La flecha se corre un pelo al tocar. Es el único adorno del botón. */
.fl-cta__ida {
  font-size: 14px; line-height: 1;
  transition: transform .22s cubic-bezier(.32, .72, 0, 1);
}
.fl-cta:active .fl-cta__ida,
.fl-barra__cta:active .fl-cta__ida { transform: translateX(3px); }
@media (hover: hover) {
  .fl-cta:hover .fl-cta__ida,
  .fl-barra__cta:hover .fl-cta__ida { transform: translateX(3px); }
}

/* ══ Header ═══════════════════════════════════════════════════════════════
   Sticky y transparente sobre la tela. Al scrollear, app.js le pone `.on` y
   aparece el fondo con blur y la línea. Así no hay costura entre el header y
   el degradé de arriba. */
.fl-head {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  height: 66px; padding: 0 var(--fl-gut);   /* 66 = el alto de las otras dos barras */
  padding-top: env(safe-area-inset-top);
  transition: background-color .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
}
.fl-head.on {
  background: var(--fl-vidrio);
  border-bottom-color: var(--fl-linea-fina);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
}

.fl-head__marca { display: flex; align-items: center; gap: 9px; min-height: 44px; }
/* El logo pasó a estar envuelto en su propio <a>: sin `display: block` el
   enlace es inline y le agrega el hueco de la línea base debajo de la imagen. */
.fl-head__logolink { display: block; flex: none; }
.fl-head__tools { display: flex; align-items: center; gap: 6px; margin-right: -8px; }

/* Idioma y tema. 40 px: entran los tres controles a 360 px de ancho y siguen
   por encima del piso táctil. */
.fl-tool {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--fl-linea); border-radius: 10px;
  background: transparent; color: var(--fl-humo);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease, border-color .2s ease;
}
.fl-tool:hover { color: var(--fl-tiza); border-color: var(--fl-brillo); }

/* El interruptor de idioma de la barra es el de ESCRITORIO: en teléfono está
   en el menú y acá su lugar lo ocupa el monigote del acceso. */
.fl-tool--lang { display: none; }

/* El PNG del logo trae fondo bordeaux opaco: sobre oscuro se disuelve con
   `screen`, pero sobre claro eso lo lavaría. En tema claro va con su caja de
   protección —redondeada, sin recortar el archivo— que es el uso aprobado. */
[data-pia="light"] .fl-head__logo,
[data-pia="light"] .fl-menu__marca img,
[data-pia="light"] .fl-foot__marca img,
[data-pia="light"] .fl-marco__logo {
  mix-blend-mode: normal;
  border-radius: 8px;
}
.fl-tool svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fl-ico-sol { display: none; }
[data-pia="light"] .fl-ico-sol { display: block; }
[data-pia="light"] .fl-ico-luna { display: none; }
/* El PNG del logo trae fondo bordeaux opaco con máscara radial: `screen` lo
   disuelve. Nunca recortarlo ni ponerle caja, borde o sombra (Manual §7.1). */
/* 46 px en TELÉFONO, para que las tres barras del producto (esta,
   /estudioscontables y el acceso de app.grupopia.com) muestren el logo del
   mismo tamaño. En escritorio la @media lo baja a 38.
   ⚠️ El tamaño lo daban los atributos `width`/`height` del <img> (32): ahora
   los pisa el CSS, y los atributos se actualizaron a 46 para que el navegador
   reserve el espacio correcto y no haya salto al cargar. */
.fl-head__logo { width: 46px; height: 46px; mix-blend-mode: screen; }
.fl-head__txt { display: flex; flex-direction: column; line-height: 1.05; }
/* Mismos valores que `.fl-marca__nombre` de /estudioscontables, en las DOS
   vistas: el owner quiere una sola marca en todo el producto. */
.fl-head__nombre { font-size: 19px; font-weight: 400; letter-spacing: -.02em; }
.fl-head__by {
  font-size: 9.5px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fl-humo);
}

.fl-abrir {
  display: none;                       /* sin JS no hay menú: lo cubre el footer */
  width: 44px; height: 44px; margin-right: -10px;
  align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.js .fl-abrir { display: inline-flex; }
.fl-abrir__barras { display: block; width: 22px; }
.fl-abrir__barras i {
  display: block; height: 2px; border-radius: 2px;
  background: var(--fl-tiza);
}
.fl-abrir__barras i:first-child { width: 22px; margin-bottom: 6px; }
.fl-abrir__barras i:last-child  { width: 14px; margin-left: auto; }

/* ══ Hero ═════════════════════════════════════════════════════════════════ */
/* Centrado por pedido del owner (2026-08-12). Sin el badge arriba, el H1
   necesita más aire contra el header. */
.fl-hero { padding: 44px var(--fl-gut) 0; text-align: center; }
.fl-verde { color: var(--fl-wa-txt); }

.fl-hero__sub {
  margin: 0 0 26px;
  font-size: 18px; line-height: 1.4; letter-spacing: -.012em;
  color: var(--fl-rosa);
  text-wrap: balance;
}

/* ⚠️ ÚNICA regla de la capa base que agregó el rediseño de escritorio del
   2026-08-14, y no cambia nada de lo que ya se veía: esconde un párrafo NUEVO
   que sólo existe para el escritorio. El render del teléfono queda idéntico.
   Todo lo demás de ese pedido vive dentro de la @media de 900 px. */
.fl-hero__sub--esc { display: none; }

/* La captura del producto. PNG con alfa: flota sobre la tela sin caja ni
   marco de teléfono — 375×666 ya se lee como teléfono (Manual §10.5).
   Se desvanece hacia abajo para empujar el scroll. */
.fl-captura {
  position: relative;
  margin: 34px 0 0;
  padding-bottom: 40px;
}
/* Halo detrás, no encima: la captura se ve entera y nítida. */
.fl-captura::before {
  content: '';
  position: absolute; left: 50%; top: 6%;
  width: 118%; height: 66%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--fl-halo), transparent 72%);
  pointer-events: none;
}
/* ⚠️ SOMBRA POR `drop-shadow`, NO POR `box-shadow` (2026-08-24).
   La captura viene recortada a la silueta del teléfono, con las cuatro esquinas
   transparentes. `box-shadow` dibuja la sombra de la CAJA rectangular, así que asomaba por
   fuera de las esquinas redondeadas y se leía como un marco alrededor de la foto — que es
   justo lo que el PNG con alfa venía a evitar. `drop-shadow` sigue el canal alfa y toma la
   forma del aparato.
   Por lo mismo ya no hay `border-radius`: la curva la trae la imagen (radio real ≈ 12 % del
   ancho) y un radio de 18 px le habría recortado las esquinas.
   ⚠️ `drop-shadow()` NO admite el radio de expansión (spread) que sí acepta `box-shadow`:
   si algún día se le agrega uno a `--fl-sombra-lg`, este filtro se descarta ENTERO y la
   sombra desaparece sin avisar. */
.fl-captura img {
  position: relative;
  width: 100%; max-width: 340px; height: auto;
  margin: 0 auto;
  filter: drop-shadow(var(--fl-sombra-lg));
}

/* ══ Tarjetas de «Qué ganás» ══════════════════════════════════════════════
   Una sola anatomía repetida cinco veces: campo + ícono + título + dos
   renglones. Lo que la separa de la tarjeta oscura genérica es el CAMPO: no
   es una grilla técnica, es el reglado de un comprobante (hairlines
   horizontales cada 26 px y dos reglas verticales), y se desvanece con una
   máscara antes de llegar al texto para que el patrón nunca compita con el
   título. Cero imágenes: dos degradés repetidos, coste nulo.              */
.fl-tarjs { display: grid; gap: 14px; margin-top: 30px; text-align: left; }

.fl-tarj {
  border: 1px solid var(--fl-linea-fina);
  border-radius: var(--fl-r-lg);
  background: var(--fl-tarj-bg);
  overflow: hidden;
}

.fl-tarj__campo {
  position: relative;
  display: grid; place-items: center;
  height: 150px;
  overflow: hidden;   /* sin esto el anillo se mete detrás del título */
}

/* El reglado. La máscara lo apaga arriba y, sobre todo, abajo: es la misma
   idea que el degradé de legibilidad de cualquier tarjeta con patrón. */
.fl-tarj__campo::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(to bottom, var(--fl-reglon) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(to right,  var(--fl-reglon) 0 1px, transparent 1px 33.333%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 70%, transparent 100%);
}

/* Halo detrás del ícono: separa el trazo del reglado sin taparlo. */
.fl-tarj__campo::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 210px; height: 210px; margin: -105px 0 0 -105px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--fl-halo), transparent 74%);
}

/* Ondas concéntricas. Corren UNA vez al entrar la tarjeta en pantalla y en
   bucle mientras esté fijada por el toque — nunca permanentemente: cinco
   tarjetas latiendo durante todo el scroll es ruido, no diseño. */
.fl-tarj__ondas {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  pointer-events: none;
}
.fl-tarj__ondas i {
  position: absolute; left: 50%; top: 50%;
  width: 116px; height: 116px; margin: -58px 0 0 -58px;
  border: 1px solid var(--fl-brillo);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.42);
}
.fl-tarj.on .fl-tarj__ondas i { animation: flOnda 2.5s cubic-bezier(.22, .61, .36, 1) 6 both; }   /* 6 × 2,5 s = 15 s (pedido del owner, 2026-08-14) */
.fl-tarj.on .fl-tarj__ondas i:nth-child(2) { animation-delay: .34s; }
.fl-tarj.on .fl-tarj__ondas i:nth-child(3) { animation-delay: .68s; }

.fl-tarj.pin .fl-tarj__ondas i { animation-iteration-count: infinite; }
.fl-tarj.pin .fl-tarj__ico { color: var(--fl-brillo); }
.fl-tarj.pin { border-color: var(--fl-brillo); }
.fl-tarj { transition: border-color .3s ease; }

.fl-tarj__ico { position: relative; z-index: 1; color: var(--fl-rosa); transition: color .3s ease; }

/* Logos de terceros. Dos criterios distintos a propósito:
   · WhatsApp va como SVG inline —el JPG que llegó traía el damero de
     transparencia quemado— y toma el verde por currentColor.
   · ARCA se distribuye con su propio campo azul: va como baldosa redondeada,
     que es su caja de protección. Recortarlo a mano para "sacarle el fondo"
     es exactamente lo que el Manual §7.1 prohíbe para el logo propio, y con
     el de un organismo vale lo mismo.
   · Excel es PNG con alfa: flota sin caja. */
.fl-tarj__logo { position: relative; z-index: 1; }
.fl-tarj__logo--wa { color: var(--fl-wa); }
.fl-tarj__logo--arca { border-radius: 16px; }

.fl-tarj__txt { padding: 2px 18px 20px; }
.fl-tarj__txt h3 {
  color: var(--fl-tiza);
  margin: 0 0 6px;
  font-size: 17.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
}
.fl-tarj__txt p { font-size: 14.5px; line-height: 1.5; color: var(--fl-humo); }

/* ══ En números ═══════════════════════════════════════════════════════════
   Cifra grande arriba, etiqueta abajo, separadas por hairlines: el mismo
   renglón de libro mayor que usa el resto de la página, apilado.
   Los números van en tabulares (Manual §9.5) para que el conteo de entrada
   no ensanche la caja mientras corre.                                     */
.fl-nums { display: grid; margin: 26px 0 0; text-align: center; }

.fl-num { padding: 22px 0; border-bottom: 1px solid var(--fl-linea-fina); }
.fl-num:first-child { border-top: 1px solid var(--fl-linea-fina); }

.fl-num__c {
  display: block;
  color: var(--fl-tiza);
  font-variant-numeric: tabular-nums;
  font-size: clamp(40px, 11.5cqi, 54px);
  font-weight: 700; letter-spacing: -.04em; line-height: 1;
  color: var(--fl-tiza);
}
.fl-num__l { display: block; margin-top: 8px; font-size: 14px; color: var(--fl-humo); }

/* ══ Planes ═══════════════════════════════════════════════════════════════
   No son pestañas: es una pregunta con tres respuestas. */
/* Una sola tarjeta clara con tres renglones; el activo se rellena. Sigue
   siendo un tablist real (role=tab + flechas del teclado): se ve como una
   lista de opciones, se opera como pestañas. */
.fl-elige {
  display: grid; gap: 4px;
  margin: 24px 0 22px;
  padding: 6px;
  border: 1px solid var(--fl-panel-borde); border-radius: 20px;
  background: var(--fl-panel);
  box-shadow: var(--fl-sombra);
}
.fl-elige__op {
  display: grid; gap: 2px;
  min-height: 62px; padding: 11px 16px;
  border: 0; border-radius: 15px;
  background: transparent; color: var(--fl-panel-txt);
  text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, color .2s ease;
}
.fl-elige__op[aria-selected="true"] { background: var(--fl-bordo); color: #fff; }
.fl-elige__nom { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.fl-elige__desc { font-size: 13px; color: var(--fl-panel-txt-2); }
.fl-elige__op[aria-selected="true"] .fl-elige__desc { color: rgba(255, 255, 255, .78); }

/* Tarjeta clara sobre la tela oscura: eso es SUPERFICIE, no fondo. El fondo
   de la página no cambia en ninguna sección.
   El CTA va ARRIBA de la lista: el que ya decidió no tiene que leer cuatro
   renglones para encontrar el botón, y el que duda lee la lista igual. */
.fl-planes { display: grid; gap: 16px; text-align: left; }

/* Hueso, no blanco puro: sobre la tela bordeaux el blanco quema.
   La animación es la misma figura que las tarjetas de grupopia.com: al pasar
   por encima —o al TOCAR, que es lo único que existe en un teléfono— la
   tarjeta crece un punto y se le enciende el borde.
   ⚠️ La clase del estado fijado es `pin` y NO `on`: `on` ya la usa el
   revelado al scroll, y cuando se llamaron igual todas las tarjetas se
   activaban solas al aparecer. Es el mismo error ya cometido en grupopia. */
.fl-plan {
  padding: 22px 20px;
  border: 1px solid var(--fl-panel-borde); border-radius: 22px;
  background: var(--fl-panel);
  box-shadow: var(--fl-sombra);
  transition: transform .34s cubic-bezier(.32, .72, 0, 1), box-shadow .34s ease;
}
.fl-plan--dest {
  background: var(--fl-panel-alto);
  box-shadow: 0 0 0 2px var(--fl-primario), var(--fl-sombra);
}

.fl-plan.pin,
.fl-plan:focus-within {
  transform: scale(1.018);
  box-shadow: 0 0 0 2px var(--fl-primario),
              0 0 34px -8px rgba(213, 69, 99, .55),
              var(--fl-sombra-lg);
}
@media (hover: hover) {
  .fl-plan:hover {
    transform: scale(1.018);
    box-shadow: 0 0 0 2px var(--fl-primario),
                0 0 34px -8px rgba(213, 69, 99, .55),
                var(--fl-sombra-lg);
  }
}

.fl-plan__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 4px;
}
.fl-plan__nom {
  font-size: 20px; font-weight: 700; letter-spacing: -.028em;
  color: var(--fl-panel-txt);
}
.fl-plan__cinta {
  flex: 0 0 auto;
  padding: 5px 11px; border-radius: 999px;
  background: var(--fl-bordo); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

.fl-plan__desc { margin-bottom: 16px; font-size: 14.5px; line-height: 1.45; color: var(--fl-panel-txt-2); }

.fl-plan__precio { display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px; }
.fl-plan__imp {
  font-variant-numeric: tabular-nums;
  font-size: 44px; font-weight: 700; letter-spacing: -.045em; line-height: 1;
  color: var(--fl-panel-txt);
}
.fl-plan__imp--txt { font-size: 28px; letter-spacing: -.03em; }
.fl-plan__mes { font-size: 14px; color: var(--fl-panel-txt-3); }

.fl-plan__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; margin-bottom: 18px;
  border: 1px solid var(--fl-panel-linea); border-radius: var(--fl-r);
  background: var(--fl-panel-2); color: var(--fl-panel-txt);
  font-size: 15px; font-weight: 700;
  transition: transform .15s ease;
}
.fl-plan__cta--pri { background: var(--fl-primario); border-color: var(--fl-primario); color: #fff; }
.fl-plan__cta:active { transform: scale(.985); }
.fl-plan__ida { font-size: 13px; }

/* Tilde dentro de un círculo, dibujado con dos pseudo-elementos: mismo gesto
   que la referencia sin sumar un ícono por renglón. */
.fl-plan__items { display: grid; gap: 11px; }
.fl-plan__items li {
  position: relative;
  padding-left: 29px;
  font-size: 14.5px; line-height: 1.4; color: var(--fl-panel-txt);
}
.fl-plan__items li::before {
  content: '';
  position: absolute; left: 0; top: 1px;
  width: 19px; height: 19px;
  border: 1.5px solid var(--fl-bordo); border-radius: 50%;
}
.fl-plan__items li::after {
  content: '';
  position: absolute; left: 5.5px; top: 7px;
  width: 8px; height: 4px;
  border-left: 1.5px solid var(--fl-bordo);
  border-bottom: 1.5px solid var(--fl-bordo);
  transform: rotate(-45deg);
}

/* ══ Estudios contables ═══════════════════════════════════════════════════
   Marcos con borde y sin relleno: le dan a la sección un peso distinto al de
   las tarjetas de «Qué ganás» sin tocar el fondo. */
/* ⚠️ El texto va en BLANCO literal, no en `--fl-tiza`: ese token se invierte
   con el tema y en claro quedaba texto casi negro sobre el bordeaux del botón,
   que no llega al contraste mínimo. El fondo es de marca y no cambia con el
   tema, así que el texto tampoco. */
.fl-cta--medio {
  display: flex; width: fit-content;
  margin: 6px auto 30px;
  background: var(--fl-primario); color: #fff;
  box-shadow: 0 12px 32px rgba(143, 13, 53, .34);
}

.fl-marcos { display: grid; gap: 12px; text-align: left; }
.fl-marco {
  padding: 20px 18px;
  border: 1px solid var(--fl-linea);
  border-radius: 18px;
}
.fl-marco__head { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.fl-marco__logo { flex: 0 0 auto; mix-blend-mode: screen; }
.fl-marco__logo--arca { mix-blend-mode: normal; border-radius: 8px; }
.fl-marco__wa { flex: 0 0 auto; color: var(--fl-wa); }
.fl-marco__head h3 { margin: 0; color: var(--fl-tiza); font-size: 16.5px; font-weight: 700; letter-spacing: -.018em; }
.fl-marco p { font-size: 14.5px; line-height: 1.5; color: var(--fl-humo); }

/* ══ FAQ ══════════════════════════════════════════════════════════════════
   <details name="faq"> = acordeón exclusivo NATIVO. Funciona sin JS. */
.fl-faq { margin-top: 22px; }
.fl-faq__it { border-bottom: 1px solid var(--fl-linea-fina); }
.fl-faq__it summary {
  color: var(--fl-tiza);
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  min-height: 60px; padding: 14px 0;
  cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 600; letter-spacing: -.012em;
  -webkit-tap-highlight-color: transparent;
}
.fl-faq__it summary::-webkit-details-marker { display: none; }
.fl-faq__mas {
  position: relative;
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border: 1px solid var(--fl-linea); border-radius: 50%;
}
.fl-faq__mas::before,
.fl-faq__mas::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  background: var(--fl-rosa);
  transition: transform .25s ease, opacity .25s ease;
}
.fl-faq__mas::before { width: 9px; height: 1.5px; margin: -.75px 0 0 -4.5px; }
.fl-faq__mas::after  { width: 1.5px; height: 9px; margin: -4.5px 0 0 -.75px; }
.fl-faq__it[open] .fl-faq__mas::after { transform: rotate(90deg); opacity: 0; }
.fl-faq__it[open] summary { color: var(--fl-rosa); }
.fl-faq__it p {
  padding: 0 0 18px;
  font-size: 15px; line-height: 1.55; color: var(--fl-humo);
  animation: flEntra .28s ease both;
}

/* ══ Footer ═══════════════════════════════════════════════════════════════ */
/* El pie NO es otro bloque: es donde termina la tela. Sin fondo propio y sin
   borde superior (pedido del owner, 2026-08-13). */
.fl-foot {
  padding: 20px var(--fl-gut) calc(102px + env(safe-area-inset-bottom));
  background: transparent;
  color: var(--fl-tiza);
  text-align: center;
}
.fl-foot__marca {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-bottom: 20px;
}
.fl-foot__marca img { mix-blend-mode: screen; }
.fl-foot__marca > span { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.fl-foot__nombre { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.fl-foot__by {
  font-size: 9px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fl-humo);
}
/* En una columna, flex-wrap deja huérfano al último enlace y abre huecos
   irregulares. Los de sección van en dos columnas fijas; los de contacto son
   cadenas largas y van en una. */
.fl-foot__nav {
  display: grid; gap: 0 14px;
  margin-bottom: 16px;
  font-size: 14px; color: var(--fl-humo);
}
/* Contacto en una fila (2026-08-14). `flex` y no dos columnas fijas: si el
   ancho no da —360 px con el tipo agrandado por accesibilidad—, el mail baja
   solo en vez de recortarse. */
.fl-foot__nav--fila {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0 20px;
}
.fl-foot__nav a { display: block; padding: 12px 0; }   /* 44px de área táctil */
.fl-foot__legal {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px;
  padding-top: 10px; margin-bottom: 14px;
  border-top: 1px solid var(--fl-linea-fina);
  font-size: 12.5px; color: var(--fl-humo);
}
.fl-foot__legal a { display: block; padding: 13px 0; }
.fl-foot__aviso, .fl-foot__c {
  font-size: 11.5px; line-height: 1.5; color: var(--fl-humo); opacity: .75;
}

/* ══ Menú a pantalla completa ═════════════════════════════════════════════ */
.fl-fondo {
  position: fixed; inset: 0; z-index: 90;
  background: var(--fl-velo);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s;
}
.fl-fondo.on { opacity: 1; visibility: visible; }

.fl-menu {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) var(--fl-gut) calc(24px + env(safe-area-inset-bottom));
  background: var(--fl-menu-tela);
  color: var(--fl-tiza);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .34s cubic-bezier(.32, .72, 0, 1), visibility .34s;
  overflow-y: auto;
}
.fl-menu.on { transform: none; visibility: visible; }

.fl-menu__head {
  display: flex; align-items: center; justify-content: space-between;
  height: 58px; flex: 0 0 auto;
}
.fl-menu__marca { display: flex; align-items: center; gap: 9px; }
.fl-menu__marca img { mix-blend-mode: screen; }
.fl-menu__nombre { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.fl-cerrar {
  width: 44px; height: 44px; margin-right: -10px;
  display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--fl-tiza); font-size: 30px; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.fl-menu__lista { flex: 1 1 auto; margin: 18px 0 24px; }
.fl-menu__lista a {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  min-height: 60px; padding: 8px 0;
  border-bottom: 1px solid var(--fl-linea-fina);
  font-size: 20px; font-weight: 600; letter-spacing: -.022em;
  -webkit-tap-highlight-color: transparent;
}
.fl-menu__lista i {
  font-style: normal; font-size: 15px; color: var(--fl-bordo);
  transition: transform .2s ease, color .2s ease;
}
.fl-menu__lista a:active i { transform: translateX(4px); color: var(--fl-brillo); }

.fl-menu__pie { flex: 0 0 auto; display: grid; justify-items: center; }
.fl-menu__login {
  display: block; margin-top: 8px; padding: 13px 0;
  font-size: 14.5px; font-weight: 600; color: var(--fl-humo);
  text-align: center;
}

/* Interruptor de idioma. Bajó de la barra al menú el 2026-08-14: arriba
   competía con el acceso, y acá hay lugar para nombrar el idioma con todas
   las letras en vez de un código de dos. */
.fl-menu__lang {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 6px; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--fl-linea); border-radius: var(--fl-r);
  background: transparent; color: var(--fl-humo);
  font: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease, border-color .2s ease;
}
.fl-menu__lang:hover { color: var(--fl-tiza); border-color: var(--fl-brillo); }
.fl-menu__lang-ico {
  width: 17px; height: 17px;
  stroke: currentColor; fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ══ Barra fija ═══════════════════════════════════════════════════════════
   Aparece al empezar «Qué ganás» y de ahí en adelante acompaña todo el scroll
   (pedido del owner, 2026-08-14). Sobre el hero no se muestra: ahí ya está el
   CTA grande y taparlo con otro botón es redundante.
   ⚠️ Vive FUERA de .fl-page: un `container-type` la convertiría en un
   elemento anclado a la página y no al viewport.
   ⚠️ Desde que aparece ya no se esconde, así que el PIE necesita hueco propio
   o la barra le tapa el último renglón — ver el padding-bottom de .fl-foot.
   ⚠️ El escondite se aplica SÓLO bajo `.js`: sin JavaScript no hay observador
   que le ponga `on` y la barra tiene que verse igual.                      */
.js .fl-barra {
  transform: translateY(calc(100% + env(safe-area-inset-bottom)));
  opacity: 0;
  visibility: hidden;
  transition: transform .32s cubic-bezier(.32, .72, 0, 1), opacity .24s ease, visibility 0s linear .32s;
}
.js .fl-barra.on {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: transform .32s cubic-bezier(.32, .72, 0, 1), opacity .24s ease, visibility 0s;
}

.fl-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  padding: 9px var(--fl-gut) calc(9px + env(safe-area-inset-bottom));
  background: var(--fl-vidrio);
  border-top: 1px solid var(--fl-linea-fina);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
}

/* Angosto y centrado, no de borde a borde: la barra tiene que estar sin
   apropiarse del pie de la pantalla. */
.fl-barra__cta {
  flex: 0 1 auto;
  margin: 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 0 26px;
  border-radius: var(--fl-r);
  /* Bordeaux de marca en los dos temas: la barra está siempre a la vista y
     tiene que leerse como LA acción, no como una superficie más. */
  background: var(--fl-primario); color: #fff;
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 8px 26px rgba(143, 13, 53, .42);
  transition: transform .15s ease, background-color .18s ease;
}
.fl-barra__cta:hover { background: var(--fl-primario-h); }
.fl-barra__cta:active { transform: scale(.97); }
.fl-barra__cta:active { transform: scale(.985); }

/* ── Revelado al scroll ───────────────────────────────────────────────────
   Una sola clase, agregada por IntersectionObserver. Sin JS, todo se ve. */
.js .fl-rev { opacity: 0; transform: translateY(14px); }
.js .fl-rev.on {
  opacity: 1; transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.32, .72, 0, 1);
}

/* ── Animaciones ──────────────────────────────────────────────────────────── */
@keyframes flEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes flPulso { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.8); } }
@keyframes flOnda {
  0%   { opacity: 0;   transform: scale(.42); }
  20%  { opacity: .45; }
  100% { opacity: 0;   transform: scale(1.26); }
}
@keyframes flSube  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Entrada del hero: una secuencia orquestada, no efectos sueltos. */
.fl-hero .fl-h1        { animation: flSube .6s cubic-bezier(.32,.72,0,1) both; }
.fl-hero .fl-hero__sub { animation: flSube .6s cubic-bezier(.32,.72,0,1) .08s both; }
.fl-hero .fl-cta       { animation: flSube .6s cubic-bezier(.32,.72,0,1) .16s both; }
.fl-hero .fl-captura   { animation: flSube .8s cubic-bezier(.32,.72,0,1) .26s both; }


/* La navegación de escritorio no existe en teléfono. */
.fl-nav { display: none; gap: 26px; font-size: 14.5px; color: var(--fl-humo); }
.fl-nav a { padding: 11px 0; transition: color .2s ease; }   /* 44px tambien en portatiles tactiles */
.fl-nav a:hover { color: var(--fl-tiza); }
.fl-head__login {
  display: none; align-items: center;
  height: 44px; padding: 0 16px;
  border: 1px solid var(--fl-linea); border-radius: var(--fl-r);
  font-size: 14px; font-weight: 700; color: var(--fl-tiza);
  transition: border-color .2s ease;
}
.fl-head__login:hover { border-color: var(--fl-brillo); }

/* ==========================================================================
   ESCRITORIO (>= 900 px)
   --------------------------------------------------------------------------
   El diseño se pensó para teléfono. Esta capa NO lo rehace: reacomoda las
   MISMAS clases en más ancho. Lo que cambia es la caja, no la jerarquía.

   Por qué hizo falta: al reemplazar la home cambió el CONTENIDO (se fueron
   «Cómo funciona», «Carga masiva» y «Para contadores»; entraron «Qué ganás»,
   «En números» y el selector de planes). El escritorio anterior maquetaba
   secciones que ya no existen, así que no había nada que conservar.
   ========================================================================== */
@media (min-width: 900px) {

  /* El contenido se topea; la tela sigue a sangre. */
  .fl-head,
  .fl-hero,
  .fl-sec,
  .fl-foot { max-width: 1180px; margin-left: auto; margin-right: auto; }

  .fl-head { height: 74px; padding-inline: 32px; }
  /* ── La marca y los títulos, calcados de /estudioscontables ──────────────
     Pedido del owner (2026-08-14): que las dos páginas usen la MISMA
     tipografía en la barra y en los encabezados de sección. Medido a 1440 px
     antes de tocar nada:

     |            | home        | contador     |
     |------------|-------------|--------------|
     | logo       | 38×38       | **46×46**    |
     | nombre     | 18px / 700  | 19px / **400** |
     | «by …»     | 9px / 600   | 9.5px / 500  |
     | rótulo     | 11px / 700  | 11.5px / 600 |
     | título h2  | 30px / 700  | **42px / 400** |

     Los valores de abajo son los de `styles.css`, copiados. Van sólo en
     escritorio: en el teléfono el owner quiere la home como está. */
  /* El logo, el nombre y el «by» ya vienen con estos valores de la capa base
     desde el 2026-08-14: son los mismos en las dos vistas. */

  .fl-rot { font-size: 11.5px; font-weight: 600; letter-spacing: .18em; margin-bottom: 16px; }
  .fl-h2 {
    font-size: clamp(27px, 4.4cqi, 42px);
    font-weight: 400;
    letter-spacing: -.015em;
    line-height: 1.1;
    margin-bottom: 18px;
  }
  /* `--largo` bajaba el cuerpo para titulares de más de 40 caracteres. Con el
     peso 400 y el `text-wrap: balance` del nuevo tamaño ya no hace falta
     castigarlos: quedan del mismo cuerpo que el resto. */
  .fl-h2--largo { font-size: clamp(27px, 4.4cqi, 42px); }


  /* Vuelve la navegación en línea y se van el menú, la hamburguesa y la barra:
     en escritorio hay lugar para los enlaces y un CTA fijo abajo sobraría. */
  .fl-nav { display: flex; }
  .js .fl-abrir { display: none; }
  .fl-menu, .fl-fondo, .fl-barra { display: none !important; }
  .fl-head__login { display: inline-flex; }
  /* El monigote es el acceso de TELÉFONO. Acá al lado está el mismo enlace
     con todas las letras, y dos veces la misma acción es ruido. Y al revés
     con el idioma: sin menú desplegable, su lugar es la barra. */
  .fl-tool--entrar { display: none; }
  .fl-tool--lang { display: grid; }

  /* Hero a dos columnas. */
  .fl-hero {
    display: grid; grid-template-columns: 1.05fr .95fr;
    align-items: center; gap: clamp(30px, 4vw, 64px);
    padding: 40px 32px 32px;
    text-align: left;
  }
  .fl-hero__col { display: flex; flex-direction: column; align-items: flex-start; }
  .fl-hero__sub { max-width: 30ch; margin-bottom: 30px; }
  .fl-captura { margin: 0; padding-bottom: 0; }
  .fl-captura::before { width: 100%; }
  .fl-captura img { max-width: 360px; margin-left: auto; margin-right: 0; }

  .fl-sec { padding-inline: 32px; }

  /* Las cinco tarjetas en tres columnas. La última fila queda con dos: es
     preferible a estirar una tarjeta sola a todo el ancho. */
  .fl-tarjs { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .fl-tarj__campo { height: 168px; }

  /* Las cifras en fila; los hairlines pasan de separar filas a envolver. */
  .fl-nums {
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--fl-linea-fina);
    border-bottom: 1px solid var(--fl-linea-fina);
    margin-top: 34px;
  }
  .fl-num { border-bottom: 0; padding: 30px 0; }
  .fl-num:first-child { border-top: 0; }

  /* Selector de condición fiscal en línea. */
  .fl-elige {
    grid-template-columns: repeat(3, 1fr);
    max-width: 760px; margin-inline: auto;
  }

  /* Planes. `minmax(280px, 380px)` y no `1fr`: con `auto-fit` y una sola
     tarjeta —el panel de responsable inscripto— la celda se estira a los
     1180 px y queda una tarjeta gigante al lado de nada. Es el mismo error
     que ya se cometió en la web vieja y se arregló con un modificador. */
  .fl-planes {
    grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
    justify-content: center;
    align-items: start;
    gap: 20px;
  }

  .fl-marcos { grid-template-columns: repeat(3, 1fr); }
  .fl-marco { padding: 24px 22px; }

  .fl-faq { max-width: 820px; margin-inline: auto; }

  /* Pie: marca a la izquierda, el resto a la derecha. */
  .fl-foot {
    display: grid; grid-template-columns: auto 1fr; align-items: center;
    gap: 10px 40px;
    padding: 40px 32px 48px;   /* sin hueco: acá la barra está oculta */
    text-align: left;
  }
  .fl-foot__marca { grid-row: 1; margin-bottom: 0; }
  .fl-foot__nav {
    grid-row: 1; grid-column: 2;
    display: flex; justify-content: flex-end; gap: 26px; margin-bottom: 0;
  }
  /* Los legales y el © van CENTRADOS (pedido del owner, 2026-08-14). La fila
     de arriba sigue con la marca a la izquierda y el contacto a la derecha:
     lo que se centra es el pie del pie. */
  .fl-foot__legal {
    grid-column: 1 / -1;
    justify-content: center; gap: 26px;
    padding-top: 20px; margin-bottom: 10px;
  }
  .fl-foot__c { grid-column: 1 / -1; text-align: center; }

  /* ════════════════════════════════════════════════════════════════════════
     REDISEÑO DE ESCRITORIO — 2026-08-14
     ------------------------------------------------------------------------
     Pedido del owner: cambiar la vista de computadora SIN tocar la del
     teléfono. Por eso TODO lo que sigue vive acá adentro, y la única regla que
     se agregó a la capa base es el `display:none` de un párrafo nuevo.
     Las reglas repiten selectores de más arriba de esta misma @media a
     propósito: pisan por orden, y así se ve de un vistazo qué cambió.
     ═══════════════════════════════════════════════════════════════════════ */

  /* ── Hero: titular al doble ───────────────────────────────────────────────
     52 px → 104 px. En `vw` y no en `cqi` para que acompañe al ancho de la
     ventana; el piso de 62 px es el que evita que a 900 px el titular ocupe
     media pantalla.
     ⚠️ Con el titular al doble, la columna de texto tiene que crecer o
     «Facturá en ARCA» parte en dos: la grilla pasa de 1.05/.95 a 1.35/.65. */
  /* El titular bajó un 30 % el 2026-08-14 (100 → 70 px) para devolverle ancho
     a la captura: la grilla vuelve de 1.5/.5 a 1.15/.85 y la foto crece de
     360 a 420 px. */
  .fl-hero { grid-template-columns: 1.15fr .85fr; }
  .fl-hero .fl-h1 {
    font-size: clamp(44px, 4.9vw, 70px);
    line-height: .94;
    letter-spacing: -.04em;
    margin-bottom: 20px;
  }
  /* ── La captura tiene que ENTRAR en la pantalla ──────────────────────────
     Antes medía 420×746 fijos y en una ventana de 854 px de alto terminaba en
     y=876: había que scrollear para ver el final del chat. Ahora la manda el
     ALTO disponible y el ancho lo deduce el navegador de la proporción.

     El descuento de 170 px es lo que hay arriba y abajo de la foto:
     header 74 + padding del hero 40 + 32, más aire.

     · el techo de 746 px es la foto a su ancho máximo (420 px) — no crece más;
     · el piso de 430 px es para ventanas muy bajas: preferible scrollear un
       poco antes que mostrar un teléfono ilegible.
     ⚠️ Va `width: auto`: con `width: 100%` el `height` la aplastaría en vez de
     escalarla.
     ⚠️ La línea `vh` va PRIMERO como reserva; los navegadores que entienden
     `dvh` se quedan con la segunda, que en el teléfono no cuenta la barra del
     navegador. */
  .fl-captura img {
    width: auto; max-width: 100%;
    height: clamp(430px, calc(100vh - 170px), 746px);
    height: clamp(430px, calc(100dvh - 170px), 746px);
  }

  /* Las dos bajadas se intercambian: acá va la larga. */
  .fl-hero__sub--tel { display: none; }
  .fl-hero__sub--esc { display: block; max-width: 46ch; font-size: 19px; }

  /* ── «Qué ganás»: bento ───────────────────────────────────────────────────
     Seis columnas: las dos primeras tarjetas ocupan media fila cada una y las
     tres últimas un tercio. Da el escalonado que pidió el owner sin huecos ni
     tarjetas huérfanas, que es lo que pasa con `auto-fit`.
     ⚠️ Va por `nth-child` y no por clases nuevas: así el HTML no cambia y el
     teléfono no puede verse afectado ni por accidente. */
  .fl-tarjs { grid-template-columns: repeat(6, 1fr); gap: 18px; }
  .fl-tarj:nth-child(1),
  .fl-tarj:nth-child(2) { grid-column: span 3; }
  .fl-tarj:nth-child(n+3) { grid-column: span 2; }
  /* Las dos grandes llevan el campo más alto: si no, se leen como dos
     tarjetas normales estiradas. */
  .fl-tarj:nth-child(1) .fl-tarj__campo,
  .fl-tarj:nth-child(2) .fl-tarj__campo { height: 216px; }
  .fl-tarj:nth-child(1) .fl-tarj__txt,
  .fl-tarj:nth-child(2) .fl-tarj__txt { padding: 2px 24px 24px; }

  /* ── «En números»: sin líneas ─────────────────────────────────────────────
     Se van los hairlines de arriba, de abajo y los de cada cifra. Queda UNA
     regla corta y centrada que separa el titular de los números. */
  .fl-nums {
    grid-template-columns: repeat(3, 1fr);
    position: relative;
    border-top: 0;
    border-bottom: 0;
    margin-top: 30px;
    padding-top: 38px;
  }
  .fl-nums::before {
    content: '';
    position: absolute; top: 0; left: 50%;
    width: min(420px, 62%); height: 1px;
    transform: translateX(-50%);
    background: var(--fl-linea-fina);
  }
  .fl-num { border: 0; padding: 0; }
  .fl-num:first-child { border-top: 0; }

  /* ── Planes: tres columnas parejas ────────────────────────────────────────
     `repeat(3, 1fr)` y no `auto-fit, minmax(280px, 380px)`: con el tope de
     380 px las tres tarjetas suman más que el ancho útil y `auto-fit` bajaba
     una de fila. Al ir en `1fr` quedan siempre las tres en línea y **dentro
     del mismo ancho que la barra de arriba** (los dos son `.fl-sec`/`.fl-head`
     topeados en 1180 px con 32 px de padding), que es lo que pidió el owner. */
  .fl-planes {
    grid-template-columns: repeat(3, 1fr);
    justify-content: stretch;
    gap: 20px;
    /* Las nueve tarjetas miden lo mismo, en los dos idiomas.
       · `align-items: stretch` iguala las tres de un mismo panel — sin esto,
         en inglés el Ecommerce de RI quedaba 21 px más bajo que sus vecinas.
       · el `min-height` iguala los TRES paneles entre sí: son grillas
         distintas que se muestran de a una, así que ninguna sabe de las otras
         y Estudios (3 ítems) quedaba 47 px más corto que Monotributo (4).
       ⚠️ El valor es el alto natural del panel MÁS ALTO medido en los dos
         idiomas (inglés, RI: 377 px) más aire. Si se agrega un ítem o un
         texto más largo, hay que volver a medir: `min-height` pone un piso,
         no un techo, y un panel que lo supere vuelve a desalinearse. */
    align-items: stretch;
    min-height: 396px;
  }

  /* El panel de estudio tiene UNA sola tarjeta (Plan Ultra, 2026-09-03): con
     `repeat(3, 1fr)` quedaba en la columna 1 con dos tercios de vacío, y con
     `auto-fit` una celda sola se estiraba a todo el ancho (el caso que ya
     documenta el comentario de más arriba). Una columna angosta y centrada. */
  .fl-planes--uno {
    grid-template-columns: minmax(280px, 420px);
    justify-content: center;
  }

  /* ── Superficie de las tarjetas, más brillante ────────────────────────────
     ⚠️ `:not([data-pia="light"])` es obligatorio: `[data-pia="light"]` define
     estos mismos tokens en la capa base y tiene la misma especificidad que
     `:root`, así que sin el `:not` esta regla —que viene después— le ganaría
     y le cambiaría el tema claro, que el owner quiere intacto. */
  :root:not([data-pia="light"]) {
    --fl-panel:      #f4f1ef;
    --fl-panel-alto: #faf8f7;
    --fl-panel-2:    #e8e3df;
    --fl-panel-linea:#ddd6d1;
  }
}

/* ── Preferencias de movimiento ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  /* Sin movimiento, los estados finales igual se muestran. */
  .js .fl-rev { opacity: 1; transform: none; }
  .fl-tarj__ondas { display: none; }
}