/* ============================================================================
 * amx-core.css — componentes del plugin amx-core · marca v2 (21/10/2026)
 * Tokens: presets de theme.json (--wp--preset--color--{slug}, --wp--custom--{grupo}--{clave}) con valores de respaldo
 * tomados de docs/BRAND-V2-SPEC.md. El tema (amx.css) maqueta solo cabecera, héroe, pie, noticias, autor, 404 y tipografía
 * base; todo lo que empieza por .amx-btn .amx-chip .amx-chip-ok .amx-chip-warn .amx-nv .amx-label .amx-slot .amx-tile
 * .amx-tabla .amx-tbl .amx-filtros .amx-ranking .amx-card .amx-destacado .amx-dato .amx-ficha .amx-sub .amx-pc .amx-pendiente
 * .amx-bono .amx-faq .amx-qa .amx-verificado .amx-calc .amx-legal .amx-bar .amx-nolink .amx-sr .amx-d .amx-m es de aquí.
 * Permitido en v2 (decisión del dueño): borde 1 px en colores de línea, sombras suaves listadas, botón primario degradado,
 * resplandor radial azul en héroe/bono y en el panel oscuro de la calculadora. Prohibido: íconos de línea, cursiva,
 * títulos en mayúsculas, bordes degradados, resplandor en texto, anchos de texto en ch. Puntos de corte: 900 / 640 / 480.
 * Bordes: siempre «1px solid var(--amx-line…, #hex)» con el color de respaldo escrito (#e6ebf5 · #dfe5f1 · #eef2f9 ·
 * rgba(255,255,255,.1) sin espacios): el gate 0/6 de deploy.sh reconoce el color por ese literal y para el despliegue si falta.
 * ========================================================================== */
:root {
  --amx-page: var(--wp--preset--color--page, #f3f6fc);
  --amx-card: var(--wp--preset--color--card, #ffffff);
  --amx-row-alt: var(--wp--preset--color--row-alt, #f8fafd);
  --amx-line: var(--wp--preset--color--line, #e6ebf5);
  --amx-line-soft: var(--wp--preset--color--line-soft, #eef2f9);
  --amx-line-input: #dfe5f1;
  --amx-ink: var(--wp--preset--color--ink, #0e1424);
  --amx-text-2: var(--wp--preset--color--text-2, #434b60);
  --amx-muted: var(--wp--preset--color--muted, #5f6782);
  --amx-blue: var(--wp--preset--color--blue, #1e5eff);
  --amx-blue-2: var(--wp--preset--color--blue-2, #2a66ff);
  --amx-blue-hover: var(--wp--preset--color--blue-hover, #1a52e0);
  --amx-cta: var(--wp--preset--color--cta, #15803d);
  --amx-ok: var(--wp--preset--color--ok, #15803d);
  --amx-ok-bg: var(--wp--preset--color--ok-bg, #e5f7ec);
  --amx-warn: var(--wp--preset--color--warn, #9a5b00);
  --amx-warn-bg: var(--wp--preset--color--warn-bg, #fff4dc);
  --amx-footer-bg: var(--wp--preset--color--footer-bg, #0e1424);
  --amx-footer-muted: var(--wp--preset--color--footer-muted, #9aa3bd);
  --amx-on-dark-2: #c9d1e6;
  --amx-display: var(--wp--preset--font-family--display, "Sora", sans-serif);
  --amx-body: var(--wp--preset--font-family--body, "Figtree", sans-serif);
  --amx-r-card: var(--wp--custom--radius--card, 20px);
  --amx-r-btn: var(--wp--custom--radius--btn, 12px);
  --amx-r-tile: var(--wp--custom--radius--tile, 12px);
  --amx-r-chip: var(--wp--custom--radius--chip, 999px);
  --amx-r-faq: var(--wp--custom--radius--faq, 16px);
  --amx-sh-card: var(--wp--custom--shadow--card, 0 10px 30px rgba(14, 20, 36, .06));
  --amx-sh-raised: var(--wp--custom--shadow--raised, 0 14px 40px rgba(14, 20, 36, .08));
  --amx-sh-screen: var(--wp--custom--shadow--screen, 0 20px 50px rgba(14, 20, 36, .12));
  --amx-sh-blue: var(--wp--custom--shadow--blue, 0 8px 20px rgba(30, 94, 255, .3));
  --amx-sh-blue-hover: 0 8px 20px rgba(30, 94, 255, .38);
  --amx-sh-cta: var(--wp--custom--shadow--cta, 0 8px 20px rgba(21, 128, 61, .3));
  --amx-sh-faq: var(--wp--custom--shadow--faq, 0 6px 18px rgba(14, 20, 36, .05));
  --amx-sh-secondary: var(--wp--custom--shadow--secondary, 0 4px 12px rgba(14, 20, 36, .06));
  --amx-sh-destacado: 0 16px 40px rgba(14, 20, 36, .12);
  --amx-g-btn: var(--wp--custom--gradient--btn, linear-gradient(180deg, #2a66ff, #1e5eff));
  --amx-g-btn-hover: var(--wp--custom--gradient--btn-hover, linear-gradient(180deg, #2a66ff, #1a52e0));
  --amx-g-glow-bono: radial-gradient(ellipse 40% 90% at 100% 0%, rgba(30, 94, 255, .10), rgba(255, 255, 255, 0) 70%);
  --amx-g-glow-bono-m: radial-gradient(ellipse 70% 50% at 100% 0%, rgba(30, 94, 255, .10), rgba(255, 255, 255, 0) 70%);
  --amx-g-glow-dark: var(--wp--custom--gradient--glow-dark, radial-gradient(ellipse 70% 60% at 100% 0%, rgba(30, 94, 255, .55), rgba(14, 20, 36, 0) 70%));
  --amx-g-bar: var(--wp--custom--gradient--bar, linear-gradient(90deg, #1e5eff, #4f8bff));
}

/* ───────── utilidades ───────── */
.amx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.amx-m { display: none; }
.amx-nolink { font-weight: 600; }
.amx-label { display: block; font-family: var(--amx-body); font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--amx-muted); }
.amx-nv, .amx-dato__nv { font-size: 14px; font-weight: 400; color: var(--amx-muted); }
.amx-nota { font-family: var(--amx-display); font-size: 20px; font-weight: 800; line-height: 1; color: var(--amx-blue); font-variant-numeric: tabular-nums; }
.amx-btn:focus-visible, .amx-chip:focus-visible, .amx-tbl__sort:focus-visible, .amx-qa summary:focus-visible, .amx-calc__form input:focus-visible, .amx-calc__form select:focus-visible { outline: 2px solid var(--amx-blue); outline-offset: 2px; }

/* ───────── botones: primario degradado · --cta verde (solo «Ir a {operador}») · --alt secundario blanco · --sm · --block ───────── */
.amx-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; box-sizing: border-box; padding: 14px 20px; border: 0; border-radius: var(--amx-r-btn); background: var(--amx-g-btn); color: #fff; font-family: var(--amx-body); font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: var(--amx-sh-blue); -webkit-appearance: none; appearance: none; transition: background .15s ease, box-shadow .15s ease, transform .1s ease; }
.amx-btn:hover { background: var(--amx-g-btn-hover); color: #fff; box-shadow: var(--amx-sh-blue-hover); text-decoration: none; }
.amx-btn:active { background: var(--amx-blue-hover); transform: translateY(1px); }
.amx-btn:disabled, .amx-btn[aria-disabled="true"] { background: var(--amx-line); color: #8a93ab; box-shadow: none; cursor: default; }
.amx-btn--cta { background: var(--amx-cta); box-shadow: var(--amx-sh-cta); }
.amx-btn--cta:hover { background: var(--amx-cta); box-shadow: var(--amx-sh-cta); filter: brightness(1.08); }
.amx-btn--cta:active { background: var(--amx-cta); filter: brightness(.96); }
.amx-btn--alt { padding: 13px 20px; border: 1px solid var(--amx-line-input, #dfe5f1); background: var(--amx-card); color: var(--amx-ink); box-shadow: var(--amx-sh-secondary); }
.amx-btn--alt:hover { background: var(--amx-page); color: var(--amx-ink); box-shadow: var(--amx-sh-secondary); }
.amx-btn--alt:active { background: var(--amx-page); }
.amx-btn--sm { padding: 10px 14px; font-size: 14px; }
.amx-btn--alt.amx-btn--sm { padding: 9px 14px; }
.amx-btn--block { display: flex; width: 100%; }

/* ───────── chips de filtro y estado ───────── */
.amx-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.amx-chip { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid var(--amx-line-input, #dfe5f1); border-radius: var(--amx-r-chip); background: var(--amx-card); color: var(--amx-ink); font-family: var(--amx-body); font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.amx-chip:hover { background: var(--amx-page); }
.amx-chip.is-on { border-color: var(--amx-blue); background: var(--amx-blue); color: #fff; box-shadow: var(--amx-sh-blue); }
.amx-chip-ok, .amx-verificado { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: var(--amx-r-chip); background: var(--amx-ok-bg); color: var(--amx-ok); font-family: var(--amx-body); font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.amx-chip-ok::before, .amx-verificado::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.amx-verificado { margin: 0 0 14px; }
.amx-verificado time { color: inherit; }
.amx-chip-warn { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: var(--amx-r-chip); background: var(--amx-warn-bg); color: var(--amx-warn); font-family: var(--amx-body); font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; }

/* ───────── hueco de logo del operador (inicial o logo; radio ¼ del lado) ───────── */
.amx-slot { display: inline-grid; place-items: center; flex: 0 0 auto; box-sizing: border-box; width: 32px; height: 32px; border: 1px solid var(--amx-line, #e6ebf5); border-radius: 8px; background: var(--amx-page); color: var(--amx-muted); font-family: var(--amx-display); font-size: 14px; font-weight: 800; line-height: 1; overflow: hidden; vertical-align: middle; }
.amx-slot img { display: block; width: 70%; height: 70%; object-fit: contain; }
.amx-slot--28 { width: 28px; height: 28px; border-radius: 7px; font-size: 12px; }
.amx-slot--32 { width: 32px; height: 32px; border-radius: 8px; font-size: 14px; }
.amx-slot--40 { width: 40px; height: 40px; border-radius: 10px; font-size: 17px; }
.amx-slot--44 { width: 44px; height: 44px; border-radius: 11px; font-size: 18px; }
.amx-slot--56 { width: 56px; height: 56px; border-radius: 14px; font-size: 22px; }

/* ───────── tabla comparativa ───────── */
.amx-tabla { margin: 24px 0; }
.amx-tabla__wrap { background: var(--amx-card); border: 1px solid var(--amx-line, #e6ebf5); border-radius: var(--amx-r-card); box-shadow: var(--amx-sh-card); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.amx-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--amx-body); font-size: 15px; line-height: 1.4; color: var(--amx-text-2); }
.amx-tbl th, .amx-tbl td { padding: 12px 20px; text-align: left; vertical-align: middle; background: var(--amx-card); border-bottom: 1px solid var(--amx-line-soft, #eef2f9); }
.amx-tbl thead th { background: var(--amx-page); color: var(--amx-muted); font-size: 13px; font-weight: 700; white-space: nowrap; }
.amx-tbl thead th[data-sort] { cursor: pointer; user-select: none; }
.amx-tbl thead th[data-sort]:hover { color: var(--amx-ink); }
/* botón real dentro del th ordenable (patrón WAI-ARIA: th[aria-sort] > button); hereda tipografía y color del th */
.amx-tbl__sort { display: inline; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: inherit; white-space: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.amx-tbl thead th[aria-sort="ascending"], .amx-tbl thead th[aria-sort="descending"] { color: var(--amx-ink); }
.amx-tbl thead th[aria-sort="descending"]::after { content: " ▾"; }
.amx-tbl thead th[aria-sort="ascending"]::after { content: " ▴"; }
.amx-tbl tbody tr:nth-child(even of :not([hidden])) > th, .amx-tbl tbody tr:nth-child(even of :not([hidden])) > td { background: var(--amx-row-alt); }
.amx-tbl tbody tr:last-child > th, .amx-tbl tbody tr:last-child > td { border-bottom: 0; }
.amx-tbl tr[hidden] { display: none; }
.amx-tbl__num { width: 44px; color: var(--amx-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.amx-tbl__n { display: inline-block; min-width: 1.4em; }
.amx-tbl__op { min-width: 200px; }
.amx-tbl__op a { display: inline-flex; align-items: center; gap: 10px; color: var(--amx-ink); font-size: 16px; font-weight: 700; text-decoration: none; }
.amx-tbl__op a:hover .amx-tbl__name { text-decoration: underline; text-decoration-color: var(--amx-blue); text-underline-offset: 3px; }
.amx-tbl__c-bono { font-weight: 600; color: var(--amx-ink); }
.amx-tbl__c-visitar { white-space: nowrap; }
.amx-tbl td .amx-nv { font-size: inherit; }

/* ───────── ranking: tarjetas numeradas ───────── */
.amx-ranking { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 16px; }
.amx-ranking > li { margin: 0; }
.amx-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "pos main score" "pos main acts"; gap: 12px 24px; align-items: center; box-sizing: border-box; padding: 24px 28px; background: var(--amx-card); border: 1px solid var(--amx-line, #e6ebf5); border-radius: var(--amx-r-card); box-shadow: var(--amx-sh-card); color: var(--amx-text-2); }
.amx-ranking > .amx-card:first-child { box-shadow: var(--amx-sh-raised); }
.amx-card__pos { grid-area: pos; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--amx-g-btn); color: #fff; font-family: var(--amx-display); font-size: 30px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: var(--amx-sh-blue); }
.amx-card__main { grid-area: main; display: grid; gap: 14px; min-width: 0; }
.amx-card__id { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; min-width: 0; }
.amx-card__link { display: inline-flex; flex: 0 0 auto; }
.amx-card__name { margin: 0; font-family: var(--amx-display); font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; overflow-wrap: anywhere; }
.amx-card__name a { color: var(--amx-ink); text-decoration: none; }
.amx-card__name a:hover { text-decoration: underline; text-decoration-color: var(--amx-blue); text-underline-offset: 3px; }
.amx-card__facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.amx-card__facts > li { margin: 0; }
.amx-tile { display: grid; gap: 2px; min-width: 0; padding: 10px 14px; border-radius: var(--amx-r-tile); background: var(--amx-page); }
.amx-tile__k { font-size: 13px; line-height: 1.3; color: var(--amx-muted); }
.amx-tile__v { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--amx-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.amx-card__bono { margin: 0; font-size: 15px; line-height: 1.5; color: var(--amx-text-2); }
.amx-card__bono b, .amx-card__k { font-weight: 700; color: var(--amx-ink); }
.amx-card__src, .amx-dato__src { display: block; font-size: 13px; line-height: 1.4; color: var(--amx-muted); }
.amx-card__score { grid-area: score; align-self: end; justify-self: end; text-align: right; }
.amx-card__nota { display: block; font-family: var(--amx-display); font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--amx-blue); font-variant-numeric: tabular-nums; }
.amx-card__nota--nv { color: var(--amx-muted); }
.amx-card__acts { grid-area: acts; align-self: start; justify-self: stretch; display: flex; flex-direction: column; gap: 8px; min-width: 168px; }
.amx-card__acts .amx-btn { width: 100%; }
/* variante «solo» (héroe de la opinión): logo 56, línea de bono, píldora de nota 56 px, botón verde */
.amx-card--solo { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main score" "main acts"; margin: 0; }
.amx-card--solo .amx-card__main { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: center; }
.amx-card--solo .amx-card__score { align-self: center; }
.amx-card--solo .amx-card__nota { display: inline-grid; place-items: center; height: 56px; min-width: 72px; padding: 0 18px; border-radius: 16px; background: var(--amx-g-btn); color: #fff; font-size: 26px; letter-spacing: -.02em; box-shadow: var(--amx-sh-blue); }
.amx-card--solo .amx-card__nota--nv { background: var(--amx-page); color: var(--amx-muted); box-shadow: none; }
.amx-card--solo .amx-card__acts { align-self: center; }
/* variante «sin puesto» ([amx_tarjeta] fuera del ranking y sin pos): tarjeta completa sin la columna del cuadro numerado */
.amx-card--sinpos { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main score" "main acts"; }

/* ───────── tarjeta «Mejor calificación» (héroe de la portada) ───────── */
.amx-destacado { box-sizing: border-box; padding: 24px; background: var(--amx-card); border: 1px solid var(--amx-line, #e6ebf5); border-radius: var(--amx-r-card); box-shadow: var(--amx-sh-destacado); color: var(--amx-text-2); }
.amx-destacado__k { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--amx-muted); }
.amx-destacado__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.amx-destacado__id { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--amx-ink); text-decoration: none; }
.amx-destacado__id:hover .amx-destacado__name { text-decoration: underline; text-decoration-color: var(--amx-blue); text-underline-offset: 3px; }
.amx-destacado__name { font-family: var(--amx-display); font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; overflow-wrap: anywhere; }
.amx-destacado__nota { display: inline-grid; place-items: center; flex: 0 0 auto; height: 48px; min-width: 60px; box-sizing: border-box; padding: 0 14px; border-radius: 14px; background: var(--amx-g-btn); color: #fff; font-family: var(--amx-display); font-size: 22px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: var(--amx-sh-blue); }
.amx-destacado__bono { margin: 14px 0 0; font-size: 15px; line-height: 1.5; }
.amx-destacado__bono b { color: var(--amx-ink); }
.amx-destacado__acts { margin-top: 18px; }

/* ───────── Dato (valor + nota + fuente) y ficha <dl> ───────── */
.amx-dato__v { font-weight: 700; color: var(--amx-ink); font-variant-numeric: tabular-nums; }
.amx-dato__nota { display: block; font-size: 13px; line-height: 1.4; color: var(--amx-text-2); }
.amx-dato--nv .amx-dato__v { font-weight: 400; color: var(--amx-muted); }
.amx-ficha { margin: 24px 0; background: var(--amx-card); border: 1px solid var(--amx-line, #e6ebf5); border-radius: var(--amx-r-card); box-shadow: var(--amx-sh-card); overflow: hidden; }
.amx-ficha__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 4px 16px; align-items: baseline; padding: 13px 24px; border-bottom: 1px solid var(--amx-line-soft, #eef2f9); }
.amx-ficha__row:nth-child(even) { background: var(--amx-row-alt); }
.amx-ficha__row:last-child { border-bottom: 0; }
.amx-ficha dt { margin: 0; font-size: 15px; color: var(--amx-muted); }
.amx-ficha dd { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2px 16px; align-items: baseline; margin: 0; min-width: 0; font-size: 15px; color: var(--amx-ink); }
.amx-ficha dd > .amx-dato { display: contents; }
.amx-ficha dd .amx-dato__v { grid-column: 1; grid-row: 1; }
.amx-ficha dd .amx-dato__src { grid-column: 2; grid-row: 1; }
.amx-ficha dd .amx-dato__nota { grid-column: 1 / -1; }
.amx-ficha dd .amx-dato--nv { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; grid-column: 1 / -1; }

/* ───────── subcalificaciones: barras con degradado azul ───────── */
.amx-sub { box-sizing: border-box; margin: 24px 0; padding: 24px; background: var(--amx-card); border: 1px solid var(--amx-line, #e6ebf5); border-radius: var(--amx-r-card); box-shadow: var(--amx-sh-card); color: var(--amx-text-2); }
.amx-sub__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin: 0 0 18px; }
.amx-sub__t { margin: 0; font-family: var(--amx-display); font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: 0; color: var(--amx-ink); }
.amx-sub__total { margin-left: auto; font-family: var(--amx-display); font-size: 28px; font-weight: 800; line-height: 1; color: var(--amx-blue); font-variant-numeric: tabular-nums; }
.amx-sub__total-k { font-family: var(--amx-body); font-size: 13px; font-weight: 600; color: var(--amx-muted); }
.amx-sub__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.amx-sub__list li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 56px; gap: 16px; align-items: center; margin: 0; font-size: 15px; }
.amx-sub__k { color: var(--amx-text-2); }
.amx-sub__bar { height: 10px; border-radius: var(--amx-r-chip); background: var(--amx-line-soft); overflow: hidden; }
.amx-sub__bar span { display: block; height: 100%; border-radius: var(--amx-r-chip); background: var(--amx-g-bar); }
.amx-sub__v { text-align: right; font-family: var(--amx-display); font-size: 16px; font-weight: 700; color: var(--amx-ink); font-variant-numeric: tabular-nums; }
.amx-sub__nota { margin: 16px 0 0; font-size: 13px; line-height: 1.4; color: var(--amx-muted); }
.amx-sub__nota a { color: var(--amx-blue); }

/* ───────── lo bueno / lo mejorable: marcadores + y − en círculo ───────── */
.amx-pc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.amx-pc > div { box-sizing: border-box; padding: 24px; background: var(--amx-card); border: 1px solid var(--amx-line, #e6ebf5); border-radius: var(--amx-r-card); box-shadow: var(--amx-sh-card); }
.amx-pc h3 { margin: 0 0 14px; font-family: var(--amx-display); font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--amx-ink); }
.amx-pc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.amx-pc li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0; font-size: 15px; line-height: 1.5; color: var(--amx-text-2); }
.amx-pc li::before { content: "+"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--amx-ok-bg); color: var(--amx-ok); font-family: var(--amx-display); font-size: 16px; font-weight: 800; line-height: 1; }
.amx-pc__contras li::before { content: "–"; background: var(--amx-line-soft); color: var(--amx-muted); }

/* ───────── qué falta por verificar ───────── */
.amx-pendiente { box-sizing: border-box; margin: 24px 0; padding: 24px; background: var(--amx-row-alt); border: 1px solid var(--amx-line, #e6ebf5); border-radius: var(--amx-r-card); }
.amx-pendiente h3 { margin: 0 0 14px; font-family: var(--amx-display); font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--amx-ink); }
.amx-pendiente ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.amx-pendiente li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 10px 14px; background: var(--amx-card); border: 1px solid var(--amx-line, #e6ebf5); border-radius: 12px; font-size: 15px; line-height: 1.5; color: var(--amx-text-2); }
.amx-pendiente__cta { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--amx-muted); }
.amx-pendiente__cta a { color: var(--amx-muted); text-decoration: underline; text-decoration-color: var(--amx-blue); text-underline-offset: 3px; }
.amx-pendiente__cta a:hover { color: var(--amx-blue); }

/* ───────── caja del bono (con resplandor suave) ───────── */
.amx-bono { box-sizing: border-box; margin: 24px 0; padding: 24px; background: var(--amx-g-glow-bono), var(--amx-card); border: 1px solid var(--amx-line, #e6ebf5); border-radius: var(--amx-r-card); box-shadow: var(--amx-sh-card); color: var(--amx-text-2); }
.amx-bono__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 10px; font-size: 15px; color: var(--amx-text-2); }
.amx-bono__name { font-weight: 600; color: var(--amx-ink); }
.amx-bono__name a { color: var(--amx-blue); }
.amx-bono__monto { margin: 0 0 10px; font-family: var(--amx-display); font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--amx-blue); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.amx-bono__monto--nv { font-size: 24px; color: var(--amx-muted); }
.amx-bono__monto--nv .amx-nv { font-family: var(--amx-body); font-size: 14px; }
.amx-bono__cond { margin: 0 0 6px; font-size: 15px; line-height: 1.5; }
.amx-bono__src { margin: 0; font-size: 13px; line-height: 1.4; color: var(--amx-muted); }
.amx-bono__src a { color: var(--amx-blue); }
.amx-bono .amx-ficha { margin: 18px 0 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.amx-bono .amx-ficha__row { padding: 11px 0; }
.amx-bono .amx-ficha__row:nth-child(even) { background: transparent; }
.amx-bono .amx-ficha__row:first-child { border-top: 1px solid var(--amx-line-soft, #eef2f9); }
.amx-bono__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ───────── FAQ nativo <details>: marcador + / − en círculo ───────── */
.amx-faq { margin: 24px 0; }
.amx-faq h2 { margin: 0 0 16px; }
.amx-qa { margin: 0 0 10px; background: var(--amx-card); border: 1px solid var(--amx-line, #e6ebf5); border-radius: var(--amx-r-faq); box-shadow: var(--amx-sh-faq); }
.amx-qa summary { position: relative; display: block; padding: 18px 68px 18px 24px; list-style: none; cursor: pointer; font-family: var(--amx-body); font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--amx-ink); }
.amx-qa summary::-webkit-details-marker { display: none; }
.amx-qa summary::marker { content: ""; }
.amx-qa__m { position: absolute; top: calc(50% - 16px); right: 18px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--amx-page); color: var(--amx-blue); font-family: var(--amx-display); font-size: 20px; font-weight: 700; line-height: 1; transition: background .15s ease, color .15s ease; }
.amx-qa__m::before { content: "+"; }
.amx-qa[open] .amx-qa__m { background: var(--amx-blue); color: #fff; }
.amx-qa[open] .amx-qa__m::before { content: "−"; }
.amx-qa p { margin: 0; padding: 0 24px 20px; font-size: 15px; line-height: 1.6; color: var(--amx-text-2); }

/* ───────── calculadora: formulario (tarjeta) + panel oscuro de resultado ───────── */
.amx-calc { display: grid; grid-template-columns: 7fr 5fr; gap: 16px; align-items: start; margin: 24px 0; }
.amx-calc__form { display: grid; gap: 20px; box-sizing: border-box; padding: 32px; background: var(--amx-card); border: 1px solid var(--amx-line, #e6ebf5); border-radius: var(--amx-r-card); box-shadow: var(--amx-sh-card); }
.amx-calc__h { margin: 0; font-family: var(--amx-display); font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--amx-ink); }
.amx-calc__form label { display: grid; gap: 6px; font-family: var(--amx-body); font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--amx-ink); }
.amx-calc__form input[type="text"], .amx-calc__form select { box-sizing: border-box; width: 100%; margin: 0; padding: 12px 14px; border: 1px solid var(--amx-line-input, #dfe5f1); border-radius: var(--amx-r-btn); background: var(--amx-row-alt); color: var(--amx-ink); font-family: var(--amx-body); font-size: 16px; font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums; }
.amx-calc__form input[type="text"] { -webkit-appearance: none; appearance: none; }
.amx-calc__form input:focus-visible, .amx-calc__form select:focus-visible { background: var(--amx-card); }
.amx-calc__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.amx-calc__form .amx-calc__check { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.amx-calc__check input { width: 18px; height: 18px; margin: 0; accent-color: var(--amx-blue); }
.amx-calc__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.amx-calc__hint { margin: -8px 0 0; font-size: 13px; line-height: 1.4; color: var(--amx-muted); }
.amx-calc__out { box-sizing: border-box; padding: 32px; background: var(--amx-g-glow-dark), var(--amx-ink); border-radius: var(--amx-r-card); box-shadow: var(--amx-sh-screen); color: #fff; }
.amx-calc__k { margin: 0; font-size: 14px; line-height: 1.4; color: var(--amx-footer-muted); }
.amx-calc__ev { margin: 8px 0 0; font-family: var(--amx-display); font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.amx-calc__pct { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--amx-on-dark-2); }
.amx-calc__pct:empty { display: none; }
.amx-calc__sec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.amx-calc__sec > div { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .08); }
.amx-calc__sec b { display: block; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--amx-footer-muted); }
.amx-calc__sec output { display: block; margin-top: 4px; font-family: var(--amx-display); font-size: 20px; font-weight: 700; line-height: 1.2; color: #fff; font-variant-numeric: tabular-nums; }
.amx-calc__nota { margin: 16px 0 0; font-size: 15px; line-height: 1.5; color: var(--amx-on-dark-2); }
.amx-calc__disc { margin: 12px 0 0; font-size: 13px; line-height: 1.4; color: var(--amx-footer-muted); }

/* ───────── franja legal clara y barra inferior oscura (a todo el ancho; texto centrado en 1216 px) ───────── */
.amx-legal { margin: 0; padding: 16px 32px; background: var(--amx-line-soft); border-top: 1px solid var(--amx-line, #e6ebf5); text-align: center; font-family: var(--amx-body); font-size: 14px; line-height: 1.5; color: var(--amx-text-2); }
.amx-legal p { max-width: 1216px; margin: 0 auto; }
.amx-legal strong { font-weight: 700; color: var(--amx-ink); }
.amx-legal a { color: var(--amx-blue); text-decoration: underline; text-underline-offset: 3px; }
.amx-legal a:hover { color: var(--amx-blue-hover); }
.amx-legal .amx-legal__disc { margin: 8px auto 0; font-size: 13px; line-height: 1.5; color: var(--amx-muted); }
.amx-bar { margin: 0; padding: 12px 16px; background: var(--amx-footer-bg); border-top: 1px solid rgba(255,255,255,.1); text-align: center; font-family: var(--amx-body); font-size: 13px; line-height: 1.4; color: var(--amx-footer-muted); }
.amx-bar b { font-weight: 700; color: #fff; }

/* ───────── ≤ 900: tabla desplazable con primeras columnas fijas; calculadora en una columna ───────── */
@media (max-width: 900px) {
  .amx-tbl { min-width: 1080px; }
  /* № y Operador fijos a la izquierda. El № mide 56 px totales (border-box: 14 de relleno + 42 de contenido) y el Operador
     empieza exactamente ahí; la selectividad «.amx-tbl th.x» gana al relleno base de «.amx-tbl th» en ambos cortes. */
  .amx-tbl th.amx-tbl__num, .amx-tbl td.amx-tbl__num, .amx-tbl th.amx-tbl__op { position: sticky; z-index: 1; }
  .amx-tbl th.amx-tbl__num, .amx-tbl td.amx-tbl__num { left: 0; box-sizing: border-box; width: 56px; min-width: 56px; padding-left: 14px; padding-right: 0; }
  .amx-tbl th.amx-tbl__op { left: 56px; box-shadow: 1px 0 0 var(--amx-line-soft); }
  .amx-tbl--bonos { min-width: 880px; }
  .amx-tbl.amx-tbl--bonos th.amx-tbl__op { left: 0; background: var(--amx-card); }
  .amx-tbl.amx-tbl--bonos tbody tr:nth-child(even) th.amx-tbl__op { background: var(--amx-row-alt); }
  .amx-calc { grid-template-columns: minmax(0, 1fr); }
}

/* ───────── ≤ 640: tarjetas apiladas, ficha en dos columnas, cajas más compactas ───────── */
@media (max-width: 640px) {
  .amx-m { display: inline; }
  .amx-d { display: none; }
  .amx-filtros { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .amx-tbl th, .amx-tbl td { padding: 12px 14px; }
  .amx-tbl .amx-slot { width: 28px; height: 28px; border-radius: 7px; font-size: 12px; }
  .amx-card { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "pos id score" "facts facts facts" "bono bono bono" "acts acts acts"; gap: 14px 12px; padding: 20px; }
  .amx-card:not(.amx-card--solo) .amx-card__main { display: contents; }
  .amx-card__id { grid-area: id; }
  .amx-card__facts { grid-area: facts; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amx-card__facts > li:nth-child(3) { grid-column: 1 / -1; }
  .amx-card__bono { grid-area: bono; }
  .amx-card__pos { width: 44px; height: 44px; border-radius: 12px; font-size: 20px; }
  .amx-card__id .amx-slot--44 { width: 36px; height: 36px; border-radius: 9px; font-size: 15px; }
  .amx-card__name { font-size: 20px; }
  .amx-card__score { align-self: center; }
  .amx-card__nota { font-size: 28px; }
  .amx-card__acts { min-width: 0; }
  .amx-card--solo { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main score" "acts acts"; }
  .amx-card--sinpos { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id score" "facts facts" "bono bono" "acts acts"; }
  .amx-card--solo .amx-card__main { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .amx-card--solo .amx-slot--56 { width: 44px; height: 44px; border-radius: 11px; font-size: 18px; }
  .amx-card--solo .amx-card__nota { height: 48px; min-width: 60px; padding: 0 14px; border-radius: 14px; font-size: 22px; }
  .amx-destacado { padding: 20px; }
  .amx-destacado__name { font-size: 22px; }
  .amx-ficha__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); padding: 12px 16px; }
  .amx-ficha dd { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .amx-ficha dd .amx-dato__v, .amx-ficha dd .amx-dato__src { grid-column: 1; grid-row: auto; }
  .amx-sub, .amx-pc > div, .amx-pendiente { padding: 20px; }
  .amx-pc { grid-template-columns: minmax(0, 1fr); }
  .amx-bono { padding: 20px; background: var(--amx-g-glow-bono-m), var(--amx-card); }
  .amx-bono__monto { font-size: 30px; }
  .amx-qa summary { padding: 16px 64px 16px 18px; font-size: 16px; }
  .amx-qa__m { right: 14px; }
  .amx-qa p { padding: 0 18px 18px; }
  .amx-calc__form { padding: 20px; }
  .amx-calc__out { padding: 24px 20px; }
  .amx-calc__ev { font-size: 40px; }
  .amx-legal { padding: 16px; }
}

/* ───────── ≤ 480: pares de campos y barras en una columna ───────── */
@media (max-width: 480px) {
  .amx-calc__row, .amx-calc__sec { grid-template-columns: minmax(0, 1fr); }
  .amx-sub__list li { grid-template-columns: minmax(0, 1fr) 48px; gap: 8px 12px; }
  .amx-sub__k { grid-column: 1 / -1; }
  .amx-card__facts { grid-template-columns: minmax(0, 1fr); }
  .amx-card__facts > li:nth-child(3) { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .amx-btn, .amx-chip, .amx-qa__m { transition: none; }
}

/* ───────── Portada: lo mejor por categoría · previews por categoría · tabla de bonos (v0.2.2) ───────── */
.amx-mejor { margin: 32px 0 40px; }
.amx-mejor > h2 { margin: 0 0 16px; }
.amx-mejor__list { list-style: none; margin: 0; padding: 0; background: var(--amx-card); border: 1px solid var(--amx-line, #e6ebf5); border-radius: var(--amx-r-card); box-shadow: var(--amx-sh-card); overflow: hidden; }
.amx-mejor__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto auto; gap: 12px 20px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--amx-line-soft, #eef2f9); }
.amx-mejor__row:nth-child(even) { background: var(--amx-row-alt); }
.amx-mejor__row:last-child { border-bottom: 0; }
.amx-mejor__cat { font-weight: 700; color: var(--amx-ink); }
.amx-mejor__op { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--amx-ink); font-weight: 700; text-decoration: none; }
.amx-mejor__op:hover .amx-mejor__nombre { text-decoration: underline; text-decoration-color: var(--amx-blue); text-underline-offset: 3px; }
.amx-mejor__dato { white-space: nowrap; font-size: 14px; color: var(--amx-muted); font-variant-numeric: tabular-nums; }
.amx-mejor__dato b { font-family: var(--amx-display); font-size: 20px; font-weight: 800; color: var(--amx-blue); }
.amx-mejor__de { margin-left: 1px; }
@media (max-width: 640px) {
  .amx-mejor__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cat cat" "op dato" "acts acts"; }
  .amx-mejor__cat { grid-area: cat; } .amx-mejor__op { grid-area: op; } .amx-mejor__dato { grid-area: dato; } .amx-mejor__acts { grid-area: acts; }
  .amx-mejor__acts .amx-btn { display: block; width: 100%; text-align: center; box-sizing: border-box; }
}

.amx-prevsec, .amx-ranksec { margin: 40px 0; }
.amx-prevsec > h2, .amx-ranksec > h2 { margin: 0 0 8px; }
.amx-sec__intro { margin: 0 0 16px; color: var(--amx-text-2); }
.amx-prev { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.amx-prev__card { display: flex; flex-direction: column; gap: 12px; min-width: 0; box-sizing: border-box; padding: 20px; background: var(--amx-card); border: 1px solid var(--amx-line, #e6ebf5); border-radius: var(--amx-r-card); box-shadow: var(--amx-sh-card); color: var(--amx-text-2); }
.amx-prev__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.amx-prev__slot { line-height: 0; flex: none; }
.amx-prev__name { margin: 0; min-width: 0; font-family: var(--amx-display); font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; overflow-wrap: anywhere; }
.amx-prev__name a { color: var(--amx-ink); text-decoration: none; }
.amx-prev__name a:hover { text-decoration: underline; text-decoration-color: var(--amx-blue); text-underline-offset: 3px; }
.amx-prev__ang, .amx-card__ang { font-family: var(--amx-body); font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--amx-text-2); }
.amx-card__ang { font-size: 16px; }
.amx-prev__list { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.5; }
.amx-prev__list li + li { margin-top: 4px; }
.amx-prev__bono { margin: 0; font-size: 14px; line-height: 1.5; }
.amx-prev__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.amx-prev__nota b { font-family: var(--amx-display); font-size: 18px; font-weight: 800; color: var(--amx-blue); }
.amx-prev__acts { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 900px) { .amx-prev { grid-template-columns: minmax(0, 1fr); } }

.amx-btabla { margin: 16px 0 24px; }
.amx-tbl--bonos { min-width: 880px; }
.amx-btabla__op { display: inline-flex; align-items: center; gap: 10px; color: var(--amx-ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
.amx-btabla__monto { font-weight: 700; color: var(--amx-ink); white-space: nowrap; }
.amx-tbl--bonos td { font-size: 14px; }

/* ───────── Héroe de portada: «Lo mejor por categoría» — versión mínima (v0.2.5) ───────── */
.amx-cats { box-sizing: border-box; padding: 18px 20px 14px; background: var(--amx-page, #f3f6fc); border: 1px solid var(--amx-line, #e6ebf5); border-radius: 16px; }
.amx-cats__h { margin: 0 0 6px; font-family: var(--amx-display); font-size: 16px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: var(--amx-ink); }
.amx-cats__list { list-style: none; margin: 0; padding: 0; }
.amx-cats__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--amx-line-soft, #eef2f9); }
.amx-cats__row:last-child { border-bottom: 0; }
.amx-cats__cat { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--amx-text-2); }
.amx-cats__ico { flex: none; width: 18px; height: 18px; color: var(--amx-blue); }
.amx-cats a.amx-cats__go, .amx-cats a.amx-cats__go.amx-btn { display: inline; flex: none; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; min-height: 0; font-family: var(--amx-body); font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--amx-blue); text-decoration: none; white-space: nowrap; transform: none; }
.amx-cats a.amx-cats__go:hover { background: none; box-shadow: none; color: var(--amx-blue); text-decoration: underline; text-underline-offset: 3px; }
.amx-cats__nota { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: var(--amx-muted); }