/* ============================================================================
   Factura lista — hoja de estilos única
   ----------------------------------------------------------------------------
   Todo el CSS vive acá (cero atributos style= en el HTML) para que la CSP
   pueda ser `style-src 'self'` sin 'unsafe-inline'. Misma razón para app.js.
   Referencia de valores: IMPLEMENTACION-Factura-lista-web.md (spec aprobada).
   Eje cromático de marca PIA: OKLCH H=12.
   ========================================================================= */

/* ── Tipografía: Helvetica del sistema ──────────────────────────────────────
   No se carga ningún archivo de fuente. Antes la página self-hosteaba
   Fraunces (4 .woff2); se pasó a la Helvetica del sistema por legibilidad,
   y de paso la página quedó sin UN SOLO request de fuente: Mac muestra
   Helvetica real, Windows y Android sustituyen por Arial, Linux por
   Liberation Sans. Las tres son métricamente equivalentes.

   Consecuencia a tener presente al tocar títulos: ninguna de las tres tiene
   peso 300. Si se pide 300, el navegador lo sintetiza o cae a 400 y el
   título se ve desparejo — los headings van en 400 o más, nunca en 300.    */

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  /* Marca PIA (H=12) */
  --bg: #160305;
  --bg-darker: #100204;
  --surface: #23060c;
  --bordeaux: #7b0f2e;
  --primary: #8f0d35;
  --primary-hover: #a8123f;
  --glow: #d54563;
  --rose: #f0c4c8;
  --fg: #faf4ef;
  --muted: #ab9a97;

  /* Secciones claras */
  --light-bg: #f7f2f1;
  --light-surface: #f0eeec;
  --light-line: #e3ddd9;
  --rose-tint: #f7e9ea;
  --rose-tint-2: #f7e2e3;
  --rose-tint-3: #f7ecec;
  --rose-line: #edccce;
  --text: #1a0505;
  --text-muted: #6b6765;
  --text-faint: #9e9a97;

  /* Funcionales */
  --whatsapp: #25d366;
  --whatsapp-btn: #16a34a;
  --whatsapp-btn-hover: #128a3e;
  --online: #3ddc84;
  --pdf: #c0392b;

  /* Alfas recurrentes sobre oscuro */
  --card-dark: rgba(250, 244, 239, .05);
  --line-dark: rgba(240, 196, 200, .16);
  --line-dark-soft: rgba(240, 196, 200, .12);
  --ghost-bg: rgba(250, 244, 239, .06);
  --ghost-border: rgba(240, 196, 200, .3);
  --chip-dark: rgba(213, 69, 99, .14);

  /* Ritmo */
  --pad-x: clamp(18px, 3.4cqi, 44px);
  --pad-y: clamp(50px, 7cqi, 100px);
  --max-w: 1180px;
  --grano: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
}

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

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

body,
button,
input,
select,
textarea { font-family: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p { text-wrap: pretty; }

a { color: var(--bordeaux); text-decoration: none; }
a:hover { color: var(--primary); }

img { max-width: 100%; }

/* `hidden` tiene que ganarle a los display: grid/flex de los componentes
   (las pestañas de planes ocultan su panel con esta propiedad). */
[hidden] { display: none !important; }

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

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

.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;
}

/* ── Animaciones ──────────────────────────────────────────────────────────── */
@keyframes flFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes flMsg { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes flPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
@keyframes flCinta { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Lienzo ───────────────────────────────────────────────────────────────── */
.fl-page {
  container-type: inline-size;
  width: 100%;
  margin: 0 auto;
  background: var(--light-surface);
  overflow-x: clip;
}

.fl-wrap {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
}

.fl-grano {
  position: absolute;
  inset: 0;
  background-image: var(--grano);
  background-size: 3px 3px;
  pointer-events: none;
}

/* Tela compartida header + hero + banda "20 segundos" (§5.1 de la spec).
   Lienzo de 1800px con los radiales apagados antes del final: si el contenido
   crece, abajo queda el color final del degradé y no aparece ningún corte. */
.fl-tela {
  background-color: var(--bg-darker);
  background-image:
    radial-gradient(ellipse 70% 65% at 72% 25%, rgba(213, 69, 99, .26), transparent 72%),
    radial-gradient(ellipse 78% 52% at 60% -6%, rgba(143, 13, 53, .5), transparent 74%),
    linear-gradient(180deg, #160305 0%, #130205 24%, #100204 44%, #100204 100%);
  background-size: 100% 1800px;
  background-repeat: no-repeat;
  /* -67px = alto real del header (66.8px): el degradé del menú y el del hero
     son continuos. Si cambia el alto del header, actualizar este valor. */
  background-position: center -67px;
}

/* Bloque oscuro intermedio (§5.2) */
.fl-bloque {
  background-color: #130205;
  background-image:
    var(--grano),
    radial-gradient(ellipse 66% 38% at 68% 0%, rgba(143, 13, 53, .55), transparent 72%),
    radial-gradient(ellipse 58% 42% at 92% 100%, rgba(213, 69, 99, .24), transparent 70%),
    linear-gradient(180deg, #160305, #100204);
  background-size: 3px 3px, 100% 100%, 100% 100%, 100% 100%;
}

/* Bloque oscuro final (testimonios → footer) */
.fl-bloque--final {
  background-image:
    var(--grano),
    radial-gradient(ellipse 70% 34% at 14% 0%, rgba(143, 13, 53, .5), transparent 66%),
    radial-gradient(ellipse 62% 40% at 92% 100%, rgba(213, 69, 99, .2), transparent 70%),
    linear-gradient(180deg, #160305, #100204);
}

/* ── Secciones ────────────────────────────────────────────────────────────── */
.fl-sec { padding: var(--pad-y) var(--pad-x); }
.fl-sec--linea { border-top: 1px solid var(--line-dark); }

.fl-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(30px, 4cqi, 60px);
  align-items: center;
}
/* .fl-chat-col es sólo el envoltorio del chat dentro de la grilla.
   Llegó a ser `position: sticky` para que el chat acompañara la lectura de
   los pasos, y se sacó cuando la columna de la derecha se quedó sin los tres
   beneficios: ahora las dos columnas miden lo mismo, el recorrido del sticky
   es 0 y lo único que hacía era desalinear el chat hacia arriba.
   Si alguna vez la columna derecha vuelve a ser bastante más alta que el
   chat, alcanza con `position: sticky; top: 84px` acá y `align-items: start`
   en la grilla — está medido que funciona pese al overflow-x: clip de
   .fl-page.                                                               */

.fl-eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bordeaux);
  margin-bottom: 16px;
}
.fl-eyebrow--oscuro { color: var(--glow); }

.fl-h2 {
  font-weight: 400;
  font-size: clamp(27px, 4.4cqi, 42px);
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0 0 18px;
  text-wrap: balance;
}
.fl-h2--oscuro { color: var(--fg); }

.fl-parr {
  font-size: clamp(15px, 1.7cqi, 17.5px);
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0 0 26px;
}
.fl-parr--oscuro { color: var(--rose); }

.fl-encab {
  max-width: 640px;
  margin: 0 auto clamp(30px, 3.6cqi, 52px);
  text-align: center;
}
.fl-encab--ancho { max-width: 660px; margin-bottom: clamp(28px, 3.4cqi, 48px); }
.fl-encab .fl-parr { margin-bottom: 0; line-height: 1.6; }
.fl-encab .fl-h2 { margin-bottom: 16px; }

/* ── Botones ──────────────────────────────────────────────────────────────── */
.fl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  text-align: center;
  padding: 14px 24px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.fl-btn--claro {
  background: var(--fg);
  color: var(--bg);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
}
.fl-btn--claro:hover { background: var(--rose); color: var(--bg); }

.fl-btn--fantasma {
  background: var(--ghost-bg);
  border: 1px solid var(--ghost-border);
  color: var(--fg);
  padding: 14px 22px;
}
.fl-btn--fantasma:hover { border-color: var(--rose); color: var(--rose); }
.fl-btn--hero.fl-btn--claro:hover { transform: translateY(-1px); }
.fl-btn--hero.fl-btn--fantasma { padding: 15px 24px; box-shadow: none; }

.fl-btn-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.fl-btn-fila--centro { justify-content: center; margin-top: 6px; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.fl-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(19, 2, 5, .66);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, backdrop-filter .25s ease;
}
.fl-header__tela {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity .25s ease;
  background-image:
    radial-gradient(ellipse 70% 65% at 72% 25%, rgba(213, 69, 99, .26), transparent 72%),
    radial-gradient(ellipse 78% 52% at 60% -6%, rgba(143, 13, 53, .5), transparent 74%),
    linear-gradient(180deg, #160305 0%, #130205 24%, #100204 44%, #100204 100%);
  background-size: 100% 1800px;
  background-position: center top;
  background-repeat: no-repeat;
  pointer-events: none;
}
/* Al scrollear el menú se difumina un 10% y aparece su línea inferior. */
.fl-header.is-scrolled { border-bottom-color: var(--line-dark); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.fl-header.is-scrolled .fl-header__tela { opacity: .9; }

.fl-header__inner {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 10px clamp(16px, 3.4cqi, 44px);
  display: flex;
  align-items: center;
  gap: 18px;
}

.fl-marca { display: flex; align-items: center; gap: 9px; flex: none; }
.fl-marca__logo {
  width: 46px;
  height: 46px;
  display: block;
  flex: none;
  /* El PNG viene con fondo opaco bordeaux: `screen` lo disuelve en la tela
     oscura. Nunca recortar el logo ni ponerle caja, borde o sombra. */
  mix-blend-mode: screen;
}
.fl-marca__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-marca__txt { display: flex; flex-direction: column; line-height: 1; }
.fl-marca__nombre {
  font-weight: 400;
  font-size: 19px;
  letter-spacing: -.02em;
  color: var(--fg);
  white-space: nowrap;
}
.fl-marca__nombre:hover { color: var(--rose); }
.fl-marca__by {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 5px;
  white-space: nowrap;
}
.fl-marca__by a { font-size: 9.5px; font-weight: 500; letter-spacing: .14em; color: var(--rose); }
.fl-marca__by a:hover { color: var(--fg); }

.fl-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
  font-size: 14.5px;
}
.fl-nav a { color: var(--muted); white-space: nowrap; }
.fl-nav a:hover { color: var(--fg); }

.fl-header__cta { display: flex; align-items: center; gap: 10px; }
.fl-btn--header {
  background: var(--primary);
  color: var(--fg);
  font-size: 14px;
  padding: 11px 18px;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(213, 69, 99, .28);
}
.fl-btn--header:hover { background: var(--primary-hover); color: var(--fg); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.fl-hero {
  position: relative;
  padding: clamp(44px, 6.6cqi, 88px) var(--pad-x) clamp(50px, 6.6cqi, 92px);
  overflow: hidden;
}
.fl-hero__col { animation: flFade .6s ease both; }

.fl-h1 {
  font-weight: 400;
  font-size: clamp(33px, 6.1cqi, 58px);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0 0 20px;
  text-wrap: balance;
  color: var(--fg);
}
.fl-h1 .fl-wa { color: var(--whatsapp); }

.fl-hero__parr {
  font-size: clamp(15.5px, 1.75cqi, 18.5px);
  line-height: 1.62;
  color: var(--rose);
  margin: 0 0 24px;
  max-width: 33em;
}
/* Los mensajes se apoyan abajo, como en WhatsApp: con la conversación de
   arranque (dos burbujas) el resto del alto quedaba vacío arriba de los
   chips. Se hace con margin-top y NO con justify-content: flex-end, que
   rompe el scroll de la lista cuando el guión crece. */
.fl-chat__lista > .fl-msg:first-child { margin-top: auto; }
.fl-msg { display: flex; flex: none; }
.fl-msg--yo { justify-content: flex-end; }
.fl-msg--bot { justify-content: flex-start; }
.fl-msg__burbuja {
  max-width: 86%;
  padding: 10px 13px;
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: break-word;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(22, 3, 5, .08);
  animation: flMsg .3s ease both;
}
.fl-msg--yo .fl-msg__burbuja {
  background: #f6e2e3;
  border: 1px solid #eccdcf;
  border-radius: 14px 14px 4px 14px;
}
.fl-msg--bot .fl-msg__burbuja {
  background: var(--light-bg);
  border: 1px solid var(--light-line);
  border-radius: 14px 14px 14px 4px;
}
.fl-adj { display: flex; align-items: center; gap: 10px; }
.fl-adj--con-texto { margin-bottom: 8px; }
.fl-adj__chip {
  width: 30px;
  height: 36px;
  border-radius: 5px;
  color: var(--fg);
  font-size: 8.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.fl-adj__datos { display: grid; grid-auto-flow: row; min-width: 0; gap: 2px; }
.fl-adj__nombre { display: block; font-weight: 600; font-size: 13.5px; line-height: 1.3; overflow-wrap: break-word; }
.fl-adj__meta { display: block; font-size: 12px; line-height: 1.3; color: var(--text-faint); }

.fl-typing { display: flex; justify-content: flex-start; flex: none; }
.fl-typing__caja {
  display: flex;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px 14px 14px 4px;
  background: var(--light-bg);
  border: 1px solid var(--light-line);
}
.fl-typing__caja span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: flPulse 1.1s ease-in-out infinite;
}
.fl-typing__caja span:nth-child(2) { animation-delay: .18s; }
.fl-typing__caja span:nth-child(3) { animation-delay: .36s; }
.js .fl-chat__pie {
  display: block;
  flex: none;
  padding: 10px 12px 12px;
  background: var(--light-surface);
  border-top: 1px solid var(--light-line);
}
.fl-chip {
  background: var(--rose-tint);
  border: 1px solid var(--rose-line);
  color: var(--bordeaux);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  padding: 9px 12px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 38px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.fl-chip:hover { border-color: var(--primary); }
.fl-chip.is-activo { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--fg); }

.fl-xls {
  background: var(--fg);
  border: 1px solid var(--rose-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 54px rgba(0, 0, 0, .45);
}
.fl-contadores .fl-h2 { font-size: clamp(27px, 4.6cqi, 44px); line-height: 1.08; }
.fl-planes__head .fl-h2 { margin: 0; }
.fl-planes__head .fl-parr { margin: 0; max-width: 34em; }
.fl-planes__head .fl-eyebrow { margin-bottom: 0; }
.fl-plan {
  background: var(--light-surface);
  border: 1px solid var(--light-line);
  border-radius: 20px;
  padding: clamp(24px, 2.8cqi, 34px);
  display: flex;
  flex-direction: column;
  position: relative;
}
.fl-planes-grid--duo .fl-plan,
.fl-planes-grid--unico .fl-plan { padding: clamp(26px, 3cqi, 36px); }
.fl-plan__cinta {
  position: absolute;
  top: -11px;
  left: clamp(24px, 2.8cqi, 34px);
  background: var(--bordeaux);
  color: var(--fg);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
}
.fl-planes-grid--duo .fl-plan__cinta,
.fl-planes-grid--unico .fl-plan__cinta { left: clamp(26px, 3cqi, 36px); }
.fl-plan__precio {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  margin-bottom: 8px;
}
/* «A consultar» no es una cifra: en el cuerpo de 44px de un precio ocupa dos
   renglones y grita más que los precios de verdad. Va después de las reglas de
   arriba para ganarles por orden con la misma especificidad (dos clases). */
.fl-plan__precio .fl-plan__importe--texto { font-size: clamp(22px, 2.6cqi, 28px); }
.fl-plan__mes { font-size: 14px; color: var(--text-muted); }
.fl-plan__desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
  text-align: center;
  margin: 0 0 22px;
}
.fl-plan__items { display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; }
.fl-plan__cta {
  margin-top: auto;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 20px;
  border-radius: 12px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.fl-plan__cta--pri { background: var(--bordeaux); color: var(--fg); }
.fl-plan__cta--pri:hover { background: var(--primary); color: var(--fg); }
.fl-plan--oscuro .fl-plan__desc { color: var(--rose); }
.fl-testi-sec .fl-h2 { text-align: center; margin: 0 0 clamp(26px, 3cqi, 42px); }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.fl-faq { max-width: 820px; margin: 0 auto; }
.fl-faq .fl-h2 { text-align: center; margin: 0 0 clamp(24px, 2.8cqi, 36px); }
.fl-faq__mas {
  flex: none;
  font-size: 20px;
  color: var(--glow);
  line-height: 1;
  transition: transform .2s ease;
}
.fl-faq__item[open] .fl-faq__mas { transform: rotate(45deg); }

/* ── CTA final ────────────────────────────────────────────────────────────── */
.fl-cta { padding: clamp(54px, 7cqi, 104px) var(--pad-x); }
.fl-cta h2 {
  font-weight: 300;
  font-size: clamp(28px, 4.6cqi, 46px);
  line-height: 1.06;
  letter-spacing: -.03em;
  margin: 0;
  color: var(--fg);
  text-wrap: balance;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.fl-footer {
  border-top: 1px solid var(--line-dark);
  padding: clamp(34px, 4.4cqi, 56px) var(--pad-x) 0;
}
.fl-footer__grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(24px, 3cqi, 44px);
  padding-bottom: clamp(28px, 3.4cqi, 44px);
}
.fl-footer__marca { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.fl-footer__logo { width: 40px; height: 40px; display: block; flex: none; mix-blend-mode: screen; }
.fl-footer__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-footer__nombre { font-weight: 400; font-size: 17px; color: var(--fg); letter-spacing: -.02em; }
.fl-footer__desc { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 26em; }
.fl-footer__col { display: flex; flex-direction: column; gap: 11px; }
.fl-footer__rotulo {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--glow);
  margin-bottom: 2px;
}
.fl-footer__col a { font-size: 14px; color: var(--rose); }
.fl-footer__col a:hover { color: var(--fg); }
.fl-footer__horario { font-size: 13px; color: var(--muted); }
.fl-footer__legal {
  max-width: var(--max-w);
  margin: 0 auto;
  border-top: 1px solid var(--line-dark-soft);
  padding: 20px 0 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--muted);
}

/* ══ Página /estudioscontables ════════════════════════════════════════════
   Todo lo de esta sección lleva el prefijo `fl-ec-` y sólo se usa en
   `estudioscontables.html`. Se apoya en los componentes que ya existen
   (.fl-xls, .fl-panel, .fl-card) y sólo agrega lo que no había: el árbol de
   carpetas, las tarjetas de TXT y la tabla de controladores fiscales.

   Regla que rige acá igual que en el resto del sitio: NINGÚN estilo va en el
   HTML (la CSP es `style-src 'self'`, un `style=` se ignora en producción) y
   las simulaciones cambian de estado agregando CLASES, nunca escribiendo
   propiedades CSS desde JS.                                                */

/* El atributo `hidden` es lo que apaga y prende cada paso de las
   simulaciones, y un `display` explícito le gana. Todo lo que en esta
   página se muestre u oculte tiene que estar en esta lista. */
.fl-btn[hidden],
.fl-ec-aviso[hidden],
.fl-ec-txt__salida[hidden],
.fl-ec-sim__barra[hidden] { display: none; }

/* ── Hero de la página ────────────────────────────────────────────────────── */
.fl-ec-hero { max-width: 46rem; }
.fl-ec-h1 { margin-bottom: 18px; }
.fl-ec-hero__parr { max-width: 40em; margin-bottom: 30px; }
.fl-ec-hero__botones { margin-bottom: 18px; }
.fl-bloque .fl-ec-sim__estado { color: var(--muted); }
.fl-bloque .fl-ec-sim__btn--sec {
  border-color: var(--ghost-border);
  color: var(--fg);
}
.fl-bloque .fl-ec-sim__btn--sec:hover { background: var(--ghost-bg); color: var(--rose); }

/* ── Simulación 1: carga masiva por Excel ─────────────────────────────────── */
/* La planilla vive sobre fondo claro en esta página: se le baja la sombra
   que en el index la despegaba del bloque oscuro. */
.fl-ec-sim .fl-xls { box-shadow: 0 18px 40px rgba(22, 3, 5, .12); }
.fl-ec-fila.is-emitiendo .fl-ec-fila__estado {
  border-color: var(--glow);
  border-top-color: transparent;
  animation: fl-ec-girar .7s linear infinite;
}
.fl-ec-fila.is-lista .fl-ec-fila__estado {
  background: var(--whatsapp-btn);
  border-color: var(--whatsapp-btn);
}
/* El tilde se dibuja con bordes: no hace falta un glifo ni un SVG por fila. */
.fl-ec-fila.is-lista .fl-ec-fila__estado::after {
  content: '';
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid var(--fg);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}
@keyframes fl-ec-girar { to { transform: rotate(360deg); } }
.fl-bloque .fl-ec-sim__barra { background: var(--line-dark); }
/* Pasos discretos por clase en vez de escribir `style.width` desde JS. */
.fl-ec-sim__progreso.is-p20 { width: 20%; }
.fl-ec-sim__progreso.is-p40 { width: 40%; }
.fl-ec-sim__progreso.is-p60 { width: 60%; }
.fl-ec-sim__progreso.is-p80 { width: 80%; }
.fl-ec-sim__progreso.is-p100 { width: 100%; }

/* ── Simulación 2: árbol de carpetas (Archivos) ───────────────────────────── */
.fl-ec-arbol {
  background: var(--card-dark);
  border: 1px solid var(--line-dark);
  border-radius: 18px;
  overflow: hidden;
}
.fl-ec-arbol__head {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-dark-soft);
  background: rgba(255, 255, 255, .02);
}
.fl-ec-arbol__ruta {
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: .01em;
}
.fl-ec-arbol__cuerpo { padding: 8px 0; }
.fl-ec-nodo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-size: 13.5px;
  color: var(--fg);
}
.fl-ec-nodo--n0 { padding-left: 18px; }
.fl-ec-nodo--n1 { padding-left: 36px; }
.fl-ec-nodo--n2 { padding-left: 54px; }
.fl-ec-nodo--n3 { padding-left: 72px; color: var(--muted); }
.fl-ec-nodo__txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-ec-nodo__meta {
  font-size: 12px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.fl-ec-nodo__ico { flex: none; }
/* Carpeta dibujada en CSS: sin SVG repetido ocho veces en el HTML. */
.fl-ec-nodo__ico--carpeta {
  width: 15px;
  height: 12px;
  border-radius: 2px 3px 3px 3px;
  background: var(--bordeaux);
  position: relative;
}
.fl-ec-nodo__ico--carpeta::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 6px;
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: var(--bordeaux);
}
.fl-ec-nodo.is-abierta .fl-ec-nodo__ico--carpeta,
.fl-ec-nodo.is-abierta .fl-ec-nodo__ico--carpeta::before { background: var(--glow); }
.fl-ec-nodo.is-abierta { color: var(--rose); }
.fl-ec-nodo__ico--pdf {
  width: 22px;
  height: 14px;
  border-radius: 3px;
  background: var(--pdf);
  color: var(--fg);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fl-ec-arbol__pie {
  padding: 13px 18px;
  border-top: 1px solid var(--line-dark-soft);
  background: rgba(255, 255, 255, .02);
}
.fl-ec-arbol__accion { font-size: 12.5px; color: var(--rose); }
.fl-bloque .fl-ec-txt { box-shadow: 0 24px 54px rgba(0, 0, 0, .4); }
.fl-ec-opcion.is-elegida { background: var(--primary); border-color: var(--primary); color: var(--fg); }
.fl-ec-badge--falta { background: var(--rose-tint-2); color: var(--bordeaux); }
.fl-ec-badge--sumada { background: rgba(22, 163, 74, .12); color: var(--whatsapp-btn-hover); }

/* ── Bloque de compras: pasos + simulación ────────────────────────────────── */
.fl-ec-compras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(30px, 4cqi, 60px);
  align-items: start;
}

/* ── Móvil (contenedor < 900px) ───────────────────────────────────────────── */
@media (max-width: 899px) {
  .fl-nav { display: none; }
  .fl-header__cta { margin-left: auto; }
  .fl-hero__botones .fl-btn { flex: 1 1 auto; }

  /* ── Centrado en una sola columna ────────────────────────────────────────
     En móvil las secciones de dos columnas se apilan y el texto alineado a la
     izquierda queda descolgado del contenido que tiene arriba o abajo (la
     captura del chat, el mock de Excel, el panel numerado). Se centra el
     bloque de texto y su CTA.

     Excepción a propósito: las LISTAS siguen alineadas a la izquierda
     (`.fl-ticks`, `.fl-bullets`, `.fl-panel`). Centrar renglones de largo
     desparejo con viñeta arranca cada línea en un punto distinto y se lee
     peor; en una lista el ojo necesita un margen izquierdo fijo. */
  .fl-hero__col,
  .fl-centrar-movil { text-align: center; }

  .fl-hero__parr,
  .fl-centrar-movil .fl-parr,
  .fl-contadores__parr-1,
  .fl-contadores__parr-2 { margin-left: auto; margin-right: auto; }

  .fl-centrar-movil .fl-btn-fila { justify-content: center; }

  /* /estudioscontables: el hero es de una sola columna y no lleva
     `.fl-hero__col`, así que se centra acá. Los pasos numerados de la
     sección de compras quedan a la izquierda, igual que el resto de las
     listas de la página. */
  .fl-ec-hero { text-align: center; margin-left: auto; margin-right: auto; }
  .fl-ec-hero__parr { margin-left: auto; margin-right: auto; }
  .fl-ec-hero__botones { flex-direction: column; justify-content: center; }
  .fl-ec-hero__botones .fl-btn { flex: 1 1 auto; }

  /* Footer: las 4 columnas y la barra inferior */
  .fl-footer__grid { text-align: center; }
  .fl-footer__marca { justify-content: center; }
  .fl-footer__desc { margin-left: auto; margin-right: auto; }
  .fl-footer__col { align-items: center; }
  .fl-footer__legal { justify-content: center; text-align: center; }
}

/* ── Preferencias de movimiento ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Páginas legales ──────────────────────────────────────────────────────── */
.fl-legal { padding: clamp(40px, 5cqi, 72px) var(--pad-x) clamp(50px, 7cqi, 96px); }
.fl-legal__inner { max-width: 780px; margin: 0 auto; }
.fl-legal h1 {
  font-weight: 400;
  font-size: clamp(29px, 4.4cqi, 43px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--fg);
  margin: 0 0 14px;
  text-wrap: balance;
}
.fl-legal__meta { font-size: 13.5px; color: var(--muted); margin: 0 0 10px; }
.fl-legal__intro {
  font-size: clamp(15px, 1.7cqi, 17.5px);
  line-height: 1.65;
  color: var(--rose);
  margin: 0 0 34px;
}
.fl-legal__toc {
  background: var(--card-dark);
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  padding: 20px 24px;
  margin: 0 0 36px;
}
/* El doble `.fl-legal` es a propósito: sin él, `.fl-legal h2` y `.fl-legal a`
   (declaradas más abajo) empatan en especificidad y ganan por orden. */
.fl-legal .fl-legal__toc h2 {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--glow);
  margin: 0 0 12px;
}
.fl-legal__toc ol { margin: 0; padding-left: 20px; display: grid; gap: 7px; }
.fl-legal__toc li { font-size: 14.5px; color: var(--muted); }
.fl-legal .fl-legal__toc a { color: var(--rose); text-decoration: none; }
.fl-legal .fl-legal__toc a:hover { color: var(--fg); text-decoration: underline; }
.fl-legal h2 {
  font-weight: 400;
  font-size: clamp(20px, 2.4cqi, 25px);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--fg);
  margin: 40px 0 14px;
  scroll-margin-top: 90px;
}
.fl-legal h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  margin: 26px 0 10px;
}
.fl-legal p,
.fl-legal li { font-size: 15px; line-height: 1.7; color: var(--rose); }
.fl-legal p { margin: 0 0 14px; }
.fl-legal ul,
.fl-legal ol { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 8px; }
.fl-legal strong { color: var(--fg); font-weight: 600; }
.fl-legal a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.fl-legal a:hover { color: var(--rose); }
.fl-legal__tabla-wrap { overflow-x: auto; margin: 0 0 20px; }
.fl-legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 520px;
}
.fl-legal th,
.fl-legal td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-dark-soft);
  color: var(--rose);
  vertical-align: top;
  line-height: 1.5;
}
.fl-legal th {
  color: var(--fg);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-dark);
}
.fl-legal__nota {
  background: var(--card-dark);
  border: 1px solid var(--line-dark);
  border-left: 3px solid var(--glow);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 0 0 22px;
}
.fl-legal__nota p:last-child { margin-bottom: 0; }
.fl-legal__volver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--rose);
  margin-bottom: 26px;
  text-decoration: none;
}
.fl-legal__volver:hover { color: var(--fg); }

/* ── 404 ──────────────────────────────────────────────────────────────────── */
.fl-404 {
  min-height: 68vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  padding: clamp(60px, 8cqi, 120px) var(--pad-x);
}
.fl-404__logo { width: 64px; height: 64px; display: block; mix-blend-mode: screen; }
.fl-404__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-404 h1 {
  font-weight: 400;
  font-size: clamp(27px, 4.4cqi, 41px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
.fl-404 p { font-size: clamp(15px, 1.7cqi, 17.5px); color: var(--rose); margin: 0; max-width: 34em; }


/* ════════════════════════════════════════════════════════════════════════════
   /estudioscontables — tela continua, tarjetas de la home y barra fija
   ----------------------------------------------------------------------------
   Agregado el 2026-08-14. Todo va acotado con `.fl-page--ec` (la clase que
   lleva el `<div class="fl-page">` de esa página y NINGUNA otra): esta hoja
   también sirve a /terminos, /privacidad, /tratamiento-de-datos y 404, y una
   regla suelta las rompe en silencio. No sacar el prefijo.

   Las clases `fl-tarj*` y `fl-barra*` son las mismas de `home.css` a propósito
   —el owner pidió el mismo formato— pero se REDEFINEN acá con los tokens de
   esta hoja en vez de importarse: las dos hojas no se cruzan (ver web/CLAUDE.md).
   ========================================================================= */

/* ── 1 · Un solo fondo para toda la página ─────────────────────────────────
   Antes alternaba oscuro/claro por sección. Ahora es la misma tela de la home:
   un radial que se apaga a los 1750 px en el color de base, que es el que ve
   el pie. */
.fl-page--ec {
  /* Todo lo que cambia con el tema pasa por un token `--ec-*`. Si algún color
     se escribe a mano acá abajo, en claro queda oscuro sobre claro. */
  --ec-tela-base: #100204;
  --ec-tela: radial-gradient(150% 48% at 50% 0%,
      #6d1128 0%, #45091a 22%, #2b0711 42%, #1d0409 62%, #160305 80%, #100204 100%);
  --ec-vidrio: rgba(16, 2, 4, .84);
  --ec-tarj-bg: linear-gradient(180deg, rgba(35, 6, 12, .60), rgba(11, 2, 3, .40));
  --ec-reglon: rgba(240, 196, 200, .13);
  --ec-halo:   rgba(143, 13, 53, .28);
  --ec-cta-bg: var(--fg);
  --ec-cta-fg: var(--bg);
  --ec-cta-bg-h: var(--rose);
  --ec-sombra:    0 16px 44px rgba(0, 0, 0, .42);
  --ec-sombra-lg: 0 30px 70px rgba(0, 0, 0, .55);

  background-color: var(--ec-tela-base);
  background-image: var(--ec-tela);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 1750px;
  color: var(--fg);
}

/* ── Tema claro ────────────────────────────────────────────────────────────
   Off-white cálido, nunca blanco puro. Los valores son los mismos que usa la
   landing en `home.css`: es el mismo sitio y tiene que verse igual.
   ⚠️ Acotado a `.fl-page--ec` (y a `.fl-barra`, que vive FUERA de `.fl-page`):
   `/terminos`, `/privacidad`, `/tratamiento-de-datos` y `404` comparten esta
   hoja y NO tienen tema claro.
   ⚠️ Tres cambios son por CONTRASTE, no por gusto: el rose no llega a 4,5:1
   sobre claro y pasa a bordeaux, el verde de «WhatsApp» se oscurece, y el CTA
   invierte a bordeaux con texto blanco en vez de quedar negro sobre hueso. */
[data-pia="light"] .fl-page--ec {
  --bg:        #fbf8f7;
  --bg-darker: #f4efed;
  --surface:   #ffffff;
  --glow:      #a81e42;
  --rose:      #8f0d35;
  --fg:        #26090d;
  --muted:     #6b5b58;
  --whatsapp:  #0f7a35;

  --line-dark:      rgba(38, 9, 13, .16);
  --line-dark-soft: rgba(38, 9, 13, .09);
  --card-dark:      rgba(38, 9, 13, .04);
  --ghost-bg:       rgba(38, 9, 13, .05);
  --ghost-border:   rgba(143, 13, 53, .28);
  --chip-dark:      rgba(143, 13, 53, .09);

  --ec-tela-base: #f4efed;
  --ec-tela: radial-gradient(150% 48% at 50% 0%,
      #f6dde3 0%, #f9e9e9 24%, #fbf2f0 46%, #fbf8f7 72%, #f4efed 100%);
  --ec-vidrio: rgba(251, 248, 247, .88);
  --ec-tarj-bg: linear-gradient(180deg, #ffffff, #fdfaf9);
  --ec-reglon: rgba(38, 9, 13, .09);
  --ec-halo:   rgba(143, 13, 53, .12);
  --ec-cta-bg: #8f0d35;
  --ec-cta-fg: #ffffff;
  --ec-cta-bg-h: #a8123f;
  --ec-sombra:    0 14px 34px rgba(38, 9, 13, .10);
  --ec-sombra-lg: 0 26px 56px rgba(38, 9, 13, .14);
}

/* El PNG del logo trae fondo bordeaux opaco: sobre oscuro se disuelve con
   `screen`, pero sobre claro eso lo lavaría. En claro va con su caja de
   protección redondeada, que es el uso aprobado (Manual §7.1). */
/* ⚠️ El `mix-blend-mode` vive en el CONTENEDOR (`.fl-marca__logo`, el `<a>`),
   no en el `<img>`: apuntarle sólo a la imagen no lo apaga. */
[data-pia="light"] .fl-page--ec .fl-marca__logo,
[data-pia="light"] .fl-page--ec .fl-foot__marca img {
  mix-blend-mode: normal;
  border-radius: 8px;
  overflow: hidden;
}

/* En claro el body copy va en gris, no en bordeaux: `--rose` se convierte en
   el color de marca y un párrafo entero en bordeaux compite con el título. Es
   la misma decisión que toma la home con `.fl-parr`. */
[data-pia="light"] .fl-page--ec .fl-parr--oscuro,
[data-pia="light"] .fl-page--ec .fl-ec-hero__parr { color: var(--muted); }

/* Los fondos por sección se apagan: encima de la tela se verían como parches.
   ⚠️ También se va el GRANO, y no es un olvido: lo llevaban el header, el hero
   y los dos bloques oscuros, pero no las secciones sueltas — y esa mezcla se
   veía como dos fondos distintos (el owner lo marcó en Archivos y en el
   título). Con la tela pareja no hace falta: acá no hay color plano que
   romper. */
.fl-page--ec .fl-tela { background: none; }
.fl-page--ec .fl-bloque,
.fl-page--ec .fl-bloque--final { background: none; }
.fl-page--ec .fl-grano { display: none; }

/* El header deja de tener tela propia: transparente sobre el degradé, y el
   vidrio con blur aparece recién al scrollear (igual que en la home). */
.fl-page--ec .fl-header { background: transparent; }
.fl-page--ec .fl-header__tela { display: none; }
.fl-page--ec .fl-header.is-scrolled { background: var(--ec-vidrio); }

/* «Volver al sitio» es un enlace, no un botón (2026-08-14): la acción de la
   página es registrarse, y un botón sólido acá competía con ella. */
.fl-ec-volver {
  display: none; align-items: center;
  min-height: 44px;
  color: var(--muted);
  font-size: 14.5px; font-weight: 600;
  transition: color .2s ease;
}
.fl-ec-volver:hover { color: var(--fg); }

/* Los dos botones cuadrados de la barra: acceso y tema. Mismos 44 px que en
   la home — es el piso táctil exacto, no bajar de acá. */
.fl-page--ec .fl-tool {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line-dark); border-radius: 10px;
  background: transparent; color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease, border-color .2s ease;
}
.fl-page--ec .fl-tool:hover { color: var(--fg); border-color: var(--glow); }
.fl-page--ec .fl-tool svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Un solo ícono a la vista: la luna en oscuro, el sol en claro. */
.fl-page--ec .fl-ico-sol { display: none; }
[data-pia="light"] .fl-page--ec .fl-ico-sol { display: block; }
[data-pia="light"] .fl-page--ec .fl-ico-luna { display: none; }

/* ── 1 bis · Hero calcado del de la home ───────────────────────────────────
   Mismo titular (tamaño, peso, interletrado e interlínea), misma bajada y la
   misma captura debajo. Los valores están COPIADOS de `home.css`, no
   importados: las dos hojas no se cruzan. Si allá se cambia la escala del
   titular, hay que cambiarla acá también.
   `cqi` mide contra `.fl-page`, que es contenedor en las dos páginas, así que
   el clamp da el mismo resultado. */
.fl-page--ec .fl-hero { padding: 44px var(--pad-x) 0; text-align: center; }
.fl-page--ec .fl-ec-hero { max-width: 34rem; margin: 0 auto; }
.fl-page--ec .fl-h1 {
  margin: 0 0 14px;
  font-size: clamp(38px, 10.4cqi, 52px);
  font-weight: 700;
  letter-spacing: -.038em;
  line-height: .94;
}
.fl-page--ec .fl-ec-hero__parr {
  max-width: 32ch;
  margin: 0 auto 26px;
  font-size: 18px; line-height: 1.4; letter-spacing: -.012em;
  color: var(--rose);
  text-wrap: balance;
}

.fl-ec-captura { position: relative; margin: 34px 0 0; padding-bottom: 40px; }
/* Halo detrás, no encima: la captura se ve entera y nítida.
   ⚠️ Al 118 % de ancho —como estaba en la home— mete scroll horizontal a
   1024 px, y no lo caza un `querySelectorAll("*")` porque es un
   pseudo-elemento. Va al 100 %. */
.fl-ec-captura::before {
  content: '';
  position: absolute; left: 50%; top: 6%;
  width: 100%; height: 66%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--ec-halo), transparent 72%);
  pointer-events: none;
}
/* ⚠️ SOMBRA POR `drop-shadow`, NO POR `box-shadow` — misma razón que en `home.css`
   (2026-08-24): la captura viene recortada a la silueta del teléfono y `box-shadow` dibujaba
   la sombra de la caja rectangular, que asomaba por fuera de las esquinas redondeadas y se
   leía como un marco. `drop-shadow` sigue el canal alfa. Y por eso tampoco hay ya
   `border-radius`: la curva la trae la imagen.
   ⚠️ `drop-shadow()` no admite spread: si se le agrega uno a `--ec-sombra-lg`, el filtro se
   descarta entero y la sombra desaparece en silencio. */
.fl-ec-captura img {
  position: relative;
  display: block;
  width: 100%; max-width: 340px; height: auto;
  margin: 0 auto;
  filter: drop-shadow(var(--ec-sombra-lg));
}

/* ── 2 · CTA del hero ──────────────────────────────────────────────────────
   Del tamaño del «Probalo en WhatsApp» de la home: píldora al ancho de su
   texto, 44 px de alto (piso táctil exacto), no una banda de borde a borde.
   El `:hover` propio es obligatorio: `a:hover` de la base tiene más
   especificidad que una clase sola y le pisaría el color. */
.fl-ec-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 0 24px;
  border-radius: 10px;
  background: var(--ec-cta-bg); color: var(--ec-cta-fg);
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  box-shadow: var(--ec-sombra);
  transition: transform .15s ease, background-color .18s ease, color .18s ease;
}
.fl-ec-cta:hover { background: var(--ec-cta-bg-h); color: var(--ec-cta-fg); }
.fl-ec-cta:active { transform: scale(.97); }
.fl-ec-cta__ida {
  font-size: 14px; line-height: 1;
  transition: transform .22s cubic-bezier(.32, .72, 0, 1);
}
.fl-ec-cta:hover .fl-ec-cta__ida,
.fl-ec-cta:active .fl-ec-cta__ida { transform: translateX(3px); }

/* ── 3 · Tarjetas con el formato de la home ────────────────────────────────
   Campo con el reglado de un comprobante + halo detrás del ícono, y el texto
   abajo. La máscara apaga el reglado antes de llegar al título. */
.fl-page--ec .fl-tarjs {
  display: grid; gap: 14px;
  margin-top: 30px;
  text-align: left;
}
.fl-page--ec .fl-tarj {
  border: 1px solid var(--line-dark-soft);
  border-radius: 16px;
  background: var(--ec-tarj-bg);
  overflow: hidden;   /* sin esto el halo se mete detrás del título */
}
.fl-page--ec .fl-tarj__campo {
  position: relative;
  display: grid; place-items: center;
  height: 150px;
  overflow: hidden;
}
.fl-page--ec .fl-tarj__campo::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(to bottom, var(--ec-reglon) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(to right,  var(--ec-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%);
}
.fl-page--ec .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(--ec-halo), transparent 74%);
}
/* Ondas concéntricas, igual que en la home. Corren UNA vez al entrar la
   tarjeta en pantalla y en bucle mientras esté fijada por el toque — nunca
   permanentemente: cuatro tarjetas latiendo durante todo el scroll es ruido,
   no diseño. */
.fl-page--ec .fl-tarj__ondas {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  pointer-events: none;
}
.fl-page--ec .fl-tarj__ondas i {
  position: absolute; left: 50%; top: 50%;
  width: 116px; height: 116px; margin: -58px 0 0 -58px;
  border: 1px solid var(--glow);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.42);
}
.fl-page--ec .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-page--ec .fl-tarj.on .fl-tarj__ondas i:nth-child(2) { animation-delay: .34s; }
.fl-page--ec .fl-tarj.on .fl-tarj__ondas i:nth-child(3) { animation-delay: .68s; }

/* ⚠️ `pin` y NO `on`: `on` la usa el revelado al scroll. Cuando en la home se
   llamaron igual, todas las tarjetas se activaban solas al aparecer. */
.fl-page--ec .fl-tarj.pin .fl-tarj__ondas i { animation-iteration-count: infinite; }
.fl-page--ec .fl-tarj.pin .fl-tarj__ico { color: var(--glow); }
.fl-page--ec .fl-tarj.pin { border-color: var(--glow); }

@keyframes flOnda {
  0%   { opacity: 0;   transform: scale(.42); }
  20%  { opacity: .45; }
  100% { opacity: 0;   transform: scale(1.26); }
}

/* Revelado al scroll: una sola clase, la agrega app.js. Sin JS no se esconde
   nada, porque el estado inicial vive bajo `.js`. */
.js .fl-page--ec .fl-rev { opacity: 0; transform: translateY(14px); }
.js .fl-page--ec .fl-rev.on {
  opacity: 1; transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.32, .72, 0, 1);
}

.fl-page--ec .fl-tarj { transition: border-color .3s ease; }
.fl-page--ec .fl-tarj__ico { position: relative; z-index: 1; color: var(--rose); transition: color .3s ease; }
.fl-page--ec .fl-tarj__txt { padding: 2px 18px 20px; }
.fl-page--ec .fl-tarj__txt h3 {
  color: var(--fg);
  margin: 0 0 6px;
  font-size: 17.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
}
.fl-page--ec .fl-tarj__txt p {
  margin: 0;
  font-size: 14.5px; line-height: 1.5; color: var(--muted);
}

/* ── 4 · Barra fija ────────────────────────────────────────────────────────
   Igual que la de la home: aparece al empezar «El mes de siempre» y de ahí en
   adelante acompaña el scroll. Sólo en teléfono.
   ⚠️ Vive FUERA de `.fl-page`: su `container-type` la anclaría a la página en
   vez de al viewport.
   ⚠️ El escondite se aplica sólo bajo `.js`: sin JavaScript no hay observador
   que le ponga `on` y la barra tiene que verse igual.                       */
.fl-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  padding: 9px var(--pad-x) calc(9px + env(safe-area-inset-bottom));
  background: rgba(16, 2, 4, .84);
  border-top: 1px solid var(--line-dark-soft);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
}
.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__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: 10px;
  background: var(--primary); 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(--primary-hover); color: #fff; }
.fl-barra__cta:active { transform: scale(.97); }
.fl-barra__ida {
  font-size: 14px; line-height: 1;
  transition: transform .22s cubic-bezier(.32, .72, 0, 1);
}
.fl-barra__cta:hover .fl-barra__ida,
.fl-barra__cta:active .fl-barra__ida { transform: translateX(3px); }

/* ── 4 bis · Pie idéntico al de la home ────────────────────────────────────
   El 2026-08-14 esta página cambió el pie `fl-footer*` (4 columnas, rótulos,
   descripción) por el `fl-foot*` de la home. Los valores están COPIADOS de
   `home.css` con los tokens de esta hoja.
   ⚠️ Las clases se llaman `fl-foot*`, SIN «er». `.fl-footer*` sigue viva y
   sirviendo a `/terminos`, `/privacidad`, `/tratamiento-de-datos` y `404`,
   que conservan el pie viejo: no unificar los nombres.
   ⚠️ El `padding-bottom` de 102 px es el hueco de la barra fija, no aire de
   diseño. En escritorio la barra no existe y se resetea más abajo. */
.fl-page--ec .fl-foot {
  padding: 20px var(--pad-x) calc(102px + env(safe-area-inset-bottom));
  background: transparent;
  color: var(--fg);
  text-align: center;
}
.fl-page--ec .fl-foot__marca {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-bottom: 20px;
}
.fl-page--ec .fl-foot__marca img { mix-blend-mode: screen; width: 32px; height: 32px; }
.fl-page--ec .fl-foot__marca > span { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.fl-page--ec .fl-foot__nombre { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.fl-page--ec .fl-foot__by {
  font-size: 9px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
/* Contacto en una fila. `flex` y no dos columnas fijas: si el ancho no da, el
   mail baja solo en vez de recortarse. */
.fl-page--ec .fl-foot__nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0 20px;
  margin-bottom: 16px;
  font-size: 14px; color: var(--muted);
}
.fl-page--ec .fl-foot__nav a { display: block; padding: 12px 0; color: var(--muted); }
.fl-page--ec .fl-foot__nav a:hover { color: var(--fg); }
.fl-page--ec .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(--line-dark-soft);
  font-size: 12.5px; color: var(--muted);
}
.fl-page--ec .fl-foot__legal a { display: block; padding: 13px 0; color: var(--muted); }
.fl-page--ec .fl-foot__legal a:hover { color: var(--fg); }
.fl-page--ec .fl-foot__c { font-size: 11.5px; line-height: 1.5; color: var(--muted); opacity: .75; margin: 0; }

/* ── 5 · Teléfono ──────────────────────────────────────────────────────────
   El hueco del pie es obligatorio: la barra no se esconde nunca una vez que
   apareció y sin él le tapa el «© 2026 Grupo PIA». */
@media (max-width: 899px) {
  .fl-page--ec .fl-ec-hero__botones { align-items: center; }
}

/* En escritorio no hay barra: sobra un CTA fijo abajo cuando el header ya
   tiene uno a la vista. Y sin barra, el pie no necesita su hueco. */
@media (min-width: 900px) {
  .fl-barra { display: none !important; }
  .fl-page--ec .fl-foot { padding-bottom: 48px; }
  /* Acá sí entra el rótulo al lado de los dos botones. */
  .fl-ec-volver { display: inline-flex; }
}

/* La barra fija vive FUERA de `.fl-page`, así que el tema no le llega por
   herencia: necesita su propia regla. */
[data-pia="light"] .fl-barra {
  background: rgba(251, 248, 247, .88);
  border-top-color: rgba(38, 9, 13, .09);
}

/* Las anclas de la navegación caen debajo del header, que es sticky. */
.fl-page--ec [id="cierre"],
.fl-page--ec [id="archivos"],
.fl-page--ec [id="iva"] { scroll-margin-top: 80px; }

/* En escritorio las cuatro tarjetas van en fila; a un ancho de 1180 px entran
   las cuatro, y en pantallas intermedias `auto-fit` las baja a dos. */
@media (min-width: 900px) {
  .fl-page--ec .fl-tarjs {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
  }
  .fl-page--ec .fl-tarj__campo { height: 168px; }
}

/* ══ /estudioscontables en ESCRITORIO ══════════════════════════════════════
   El hero y el pie quedan como los de la home (pedido del owner, 2026-08-14).
   Hasta acá esta página no tenía capa de escritorio propia: usaba la de
   teléfono estirada, con el titular, la bajada y la captura centrados y
   apilados, y el pie en columna. Al lado de la home se veía desacomodada.
   ⚠️ TODO va dentro de la @media: el teléfono de esta página no se toca. */
@media (min-width: 900px) {

  /* ── Hero a dos columnas, igual que la home ────────────────────────────
     Texto a la izquierda, captura a la derecha. Los valores son los de
     `home.css` (padding 56/32/40, gap clamp 30-64, grilla 1.15/.85), copiados
     y no importados: las dos hojas no se cruzan. */
  .fl-page--ec .fl-hero { padding: 56px 32px 40px; text-align: left; }
  .fl-page--ec .fl-hero .fl-wrap { max-width: var(--max-w); }
  .fl-page--ec .fl-ec-hero {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    /* ⚠️ CINCO filas para TRES elementos de texto. La captura ocupa toda la
       columna derecha y es mucho más alta que el texto; ese sobrante hay que
       mandarlo a algún lado. Con filas `auto` (o `min-content`) se repartía
       entre las tres y el titular, la bajada y el botón quedaban separados a
       lo largo de toda la altura de la foto.
       Acá el sobrante se lo comen dos filas `1fr` vacías, arriba y abajo: las
       tres del medio miden lo que mide su contenido y el bloque queda
       centrado contra la captura, como en la home. */
    grid-template-rows: 1fr min-content min-content min-content 1fr;
    gap: 0 clamp(30px, 4vw, 64px);
    max-width: none;
    margin: 0;
    text-align: left;
  }
  /* El titular, la bajada y el botón viven en la columna izquierda; la
     captura, en la derecha. Se colocan a mano porque son hermanos sueltos:
     no hay un envoltorio por columna. */
  .fl-page--ec .fl-ec-h1            { grid-column: 1; grid-row: 2; }
  .fl-page--ec .fl-ec-hero__parr    { grid-column: 1; grid-row: 3; }
  .fl-page--ec .fl-ec-hero__botones { grid-column: 1; grid-row: 4; }
  .fl-page--ec .fl-ec-captura       { grid-column: 2; grid-row: 1 / -1; align-self: center; }

  /* La bajada deja de estar centrada y de tener 32ch: mismo tratamiento que
     la de la home. El contenido no cambia, sólo dónde y cómo cae. */
  .fl-page--ec .fl-ec-hero__parr {
    max-width: 34ch;
    margin: 0 0 26px;
    text-align: left;
  }
  .fl-page--ec .fl-ec-hero__botones { justify-content: flex-start; margin: 0; }
  .fl-page--ec .fl-ec-captura { margin: 0; padding-bottom: 0; }
  .fl-page--ec .fl-ec-captura img { max-width: min(420px, 100%); margin-right: 0; }
  .fl-page--ec .fl-ec-captura::before { width: 100%; }

  /* ── Pie idéntico al de la home ────────────────────────────────────────
     Marca a la izquierda, contacto a la derecha, y los legales y el ©
     CENTRADOS abajo. */
  .fl-page--ec .fl-foot {
    display: grid; grid-template-columns: auto 1fr; align-items: center;
    gap: 10px 40px;
    max-width: var(--max-w); margin-inline: auto;
    padding: 40px 32px 48px;
    text-align: left;
  }
  .fl-page--ec .fl-foot__marca { grid-row: 1; margin-bottom: 0; }
  .fl-page--ec .fl-foot__nav {
    grid-row: 1; grid-column: 2;
    justify-content: flex-end; gap: 26px; margin-bottom: 0;
  }
  .fl-page--ec .fl-foot__legal {
    grid-column: 1 / -1;
    justify-content: center; gap: 26px;
    padding-top: 20px; margin-bottom: 10px;
  }
  .fl-page--ec .fl-foot__c { grid-column: 1 / -1; text-align: center; }
}

/* ══ /estudioscontables: la MISMA caja que la home ═════════════════════════
   Pedido del owner (2026-08-14, segunda vuelta): que las dos páginas se vean
   iguales en computadora. Medido a 1600×854, antes de esto, no lo eran:

   | punto            | home       | contador   |
   |------------------|------------|------------|
   | caja de contenido| x242→1358  | x210→1390  |  ← 64 px más ancha
   | logo             | x242       | x254       |  ← padding 32 vs 44
   | navegación       | centrada   | x802→1127  |  ← `margin-left: auto`
   | alto del header  | 74         | 66         |
   | titular          | 70 px      | 52 px      |

   La causa de casi todo es una sola: esta página resuelve el ancho con
   `.fl-wrap` (1180 px, sin padding) DENTRO de secciones a sangre, y la home lo
   resuelve topeando la sección misma en 1180 px CON 32 px de padding. O sea:
   1180 de contenido contra 1116. Acá se adopta el modelo de la home y se
   neutraliza `.fl-wrap`.
   ⚠️ Todo dentro de la @media: el teléfono de esta página no se toca. */
@media (min-width: 900px) {

  /* ── La caja ───────────────────────────────────────────────────────────
     Mismo tope y mismo padding que `.fl-head`, `.fl-hero` y `.fl-sec` de la
     home. `.fl-wrap` deja de topear: si no, vuelve a meter los 1180 px de
     antes adentro de una sección que ya está topeada. */
  .fl-page--ec .fl-header__inner,
  .fl-page--ec .fl-hero,
  .fl-page--ec .fl-sec,
  .fl-page--ec .fl-foot {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 32px;
  }
  .fl-page--ec .fl-wrap { max-width: none; margin-inline: 0; }

  /* ── El header ─────────────────────────────────────────────────────────
     74 px de alto, como la home: es lo que pone el logo a la misma altura.
     ⚠️ `.fl-nav` trae `margin-left: auto` de la capa base y es lo que empujaba
     la navegación contra el botón de la derecha. Al anularlo, el
     `space-between` de tres hijos la deja en el centro, igual que en la home. */
  .fl-page--ec .fl-header__inner {
    padding-block: 0;
    min-height: 74px;
    justify-content: space-between;
  }
  .fl-page--ec .fl-nav { margin-left: 0; }

  /* ── El hero, calcado ──────────────────────────────────────────────────
     Mismo padding y mismo titular que la home; la captura, gobernada por el
     alto disponible para que entre en pantalla sin scrollear. */
  .fl-page--ec .fl-hero { padding-block: 40px 32px; }
  .fl-page--ec .fl-h1 { font-size: clamp(44px, 4.9vw, 70px); }
  /* La bajada toma la medida y el cuerpo de la de la home (19 px, 46ch). Con
     los 34ch y los 18,5 px que traía, el mismo texto caía en cuatro renglones
     contra los dos de la home y el bloque quedaba 18 px más arriba. */
  .fl-page--ec .fl-ec-hero__parr { max-width: 46ch; font-size: 19px; line-height: 1.4; }

  .fl-page--ec .fl-ec-captura img {
    width: auto; max-width: 100%;
    height: clamp(430px, calc(100vh - 170px), 746px);
    height: clamp(430px, calc(100dvh - 170px), 746px);
    margin-left: auto; margin-right: 0;
  }
}