/*
 * ==========================================================================
 *  iERP Accesibilidad (sistema F) — `web/accesibilidad.twig` y
 *  `partials/accesibilidad/_tarifas.twig` (que también pinta /precios)
 * ==========================================================================
 *
 * Prefijo `f-acc-`. Sólo tokens `--f-*`. La ficha carga además
 * `modulos.css` y `modulo.css` (cabecera de ficha y lista de comprobación
 * animada); /precios, sólo esta hoja para las tarjetas de tarifa.
 */

/* Tarjetas de tarifa: tres columnas en escritorio, una en móvil. */
.f-acc-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.f-acc-tier {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--f-line);
  background: var(--f-tile);
}
.f-acc-tier--dest {
  border-color: var(--f-sig);
  box-shadow: inset 0 0 0 1px var(--f-sig);
}
.f-acc-tier__precio { display: flex; flex-direction: column; gap: 4px; }
.f-acc-tier__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; }
/* El anual, debajo del mensual: aclaración, no protagonista. */
.f-acc-tier__anual { margin: 0; font-size: 14px; line-height: 1.45; color: var(--f-grey); }
.f-acc-tier__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.f-acc-tick { display: flex; align-items: baseline; gap: 12px; font-size: 15px; line-height: 1.45; color: var(--f-ink2); }
.f-acc-tick .f-sq { flex: none; transform: translateY(-2px); }
.f-acc-tier__cta { margin-top: auto; }

/* Aviso honesto: una caja con filete, sin alarma. */
.f-acc-honesto {
  padding: 20px 24px;
  border-inline-start: 3px solid var(--f-sig);
  background: var(--f-stone);
  max-width: 880px;
}

/* La lista de qué entra en cada bloque (Tu web / El widget). */
.f-acc-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0; }

/* Paso «Plan» del embudo (`checkout/plan-accesibilidad.twig`): tres tarjetas
   con radio REAL (sin JS) y la web que se contrata. */
.f-acc-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.f-acc-pick__opt {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--f-line2);
  background: var(--f-tile);
  cursor: pointer;
}
.f-acc-pick__opt:has(.f-acc-pick__radio:checked) { background: var(--f-sigsoft); box-shadow: inset 0 0 0 1px var(--f-sig); border-color: var(--f-sig); }
.f-acc-pick__opt:has(.f-acc-pick__radio:focus-visible) { outline: 2px solid var(--f-sig); outline-offset: 2px; }
.f-acc-pick__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.f-acc-pick__radio { width: 18px; height: 18px; margin: 0; accent-color: var(--f-sig); }
.f-acc-pick__name { font-size: 18px; letter-spacing: -0.02em; }
.f-acc-pick__price { display: flex; align-items: baseline; gap: 8px; font-size: 28px; font-weight: 300; letter-spacing: -0.04em; }
.f-acc-pick__anual { margin-top: -6px; font-size: 13px; line-height: 1.45; color: var(--f-grey); }
.f-acc-pick__d { font-size: 14px; line-height: 1.5; color: var(--f-ink2); }

/* «Analiza tu web gratis» (`web/accesibilidad-gratis.twig`): el formulario
   reutiliza `demo.css`; esto es la ayuda del campo y la página del resultado. */
.f-acc-help { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--f-grey); }
.f-acc-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 0;
  margin: 0;
  border-block-start: 1px solid var(--f-line);
  border-inline-start: 1px solid var(--f-line);
  background: var(--f-tile);
}
.f-acc-dato { display: flex; flex-direction: column; gap: 8px; padding: 20px 24px; border-inline-end: 1px solid var(--f-line); border-block-end: 1px solid var(--f-line); }
.f-acc-dato__v { margin: 0; font-size: 36px; font-weight: 300; letter-spacing: -0.04em; line-height: 1.1; }
.f-acc-dato__v--s { font-size: 22px; letter-spacing: -0.02em; }
.f-acc-cuentas { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--f-ink2); }
.f-acc-cuentas li { display: flex; align-items: baseline; gap: 8px; }
.f-acc-cuentas__n { font-size: 24px; font-weight: 400; color: var(--f-ink); }
.f-acc-cuentas__n--bad { color: var(--f-bad); }
.f-acc-cuentas__n--ok { color: var(--f-ok); }
.f-acc-barreras { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--f-line); }
.f-acc-barrera { display: flex; flex-direction: column; gap: 6px; padding-block: 16px; border-block-end: 1px solid var(--f-line); }
.f-acc-barrera__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.f-acc-barrera__t { font-size: 17px; letter-spacing: -0.01em; }
.f-acc-barrera__d { max-width: 760px; font-size: 15px; line-height: 1.5; color: var(--f-ink2); }
.f-acc-barrera__k { font-size: 11px; color: var(--f-grey); }
.f-acc-paginas summary { cursor: pointer; }
.f-acc-paginas ul { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; overflow-wrap: anywhere; color: var(--f-ink2); }