/* ===========================================================================
   iptvmx.shop — es-MX
   Design system MX-plum-ambar · _shared/research/design-systems-a.md § SITE 3
   Naming: SUIT-style PascalCase components under mx-.
   This file is UNIQUE to this site. It is never shared with a sibling.
   =========================================================================== */

:root {
  --mx-bg:#1A1014; --mx-surface:#241820; --mx-raised:#2E2029;
  --mx-ink:#FBF2EC; --mx-ink-muted:#C4ADB4;
  --mx-hairline:#43303A; --mx-border-strong:#85646F;
  --mx-primary:#F2A03D; --mx-primary-hover:#FFB65C; --mx-on-primary:#2A1405;
  --mx-link:#F2A03D;
  --mx-secondary:#F4548A; --mx-on-secondary:#2A0512;
  --mx-success:#5DD39E; --mx-danger:#FF8577;
  --mx-doc-paper:#F7F1EA; --mx-doc-ink:#1A1014;
  --mx-focus:#F2A03D;

  --mx-font-display:"Avenir Next","Segoe UI",Ubuntu,Cantarell,system-ui,sans-serif;
  --mx-font-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mx-font-num:ui-monospace,Menlo,Consolas,"DejaVu Sans Mono",monospace;
  --mx-fs-base:1.0625rem; --mx-ratio:1.333;
  --mx-fs-2xs:0.6rem; --mx-fs-xs:0.8rem; --mx-fs-sm:1.0625rem; --mx-fs-md:1.419rem;
  --mx-fs-lg:1.891rem; --mx-fs-xl:2.521rem; --mx-fs-2xl:3.36rem;
  --mx-lh-body:1.6; --mx-lh-price:1.1; --mx-lh-head:1.15;
  --mx-weight-display:800; --mx-tracking-display:-0.02em;

  --mx-space-1:6px; --mx-space-2:12px; --mx-space-3:18px; --mx-space-4:28px;
  --mx-space-5:44px; --mx-space-6:72px; --mx-space-7:112px;

  --mx-radius-slab:4px; --mx-radius-pill:999px; --mx-radius-table:0;
  --mx-maxw:1240px; --mx-gutter:28px; --mx-measure:64ch;
  --mx-tabbar-h:56px; --mx-topbar-h:72px;
  --mx-card-bar-w:6px;
  --mx-focus-ring:0 0 0 3px rgba(242,160,61,.45); --mx-focus-outline:2px solid var(--mx-focus);
}

/* Light is opt-in by system preference and by explicit toggle. Dark is the
   default because the palette was measured dark-first. */
:root[data-theme="light"] {
  --mx-bg:#FFF8F2; --mx-surface:#FFFFFF; --mx-raised:#FFF1E8;
  --mx-ink:#241118; --mx-ink-muted:#6B4A54;
  --mx-hairline:#EDD9CE; --mx-border-strong:#9C7A68;
  --mx-primary:#9A3412; --mx-primary-hover:#7E2A0E; --mx-on-primary:#FFFFFF;
  --mx-link:#A4520C;
  --mx-secondary:#B22258; --mx-on-secondary:#FFFFFF;
  --mx-success:#1C6B3C; --mx-danger:#A32014;
  --mx-doc-paper:#FFFFFF; --mx-doc-ink:#241118;
  --mx-focus:#9A3412; --mx-focus-ring:0 0 0 3px rgba(154,52,18,.35);
}
@media (prefers-color-scheme:light) {
  :root:not([data-theme="dark"]) {
    --mx-bg:#FFF8F2; --mx-surface:#FFFFFF; --mx-raised:#FFF1E8;
    --mx-ink:#241118; --mx-ink-muted:#6B4A54;
    --mx-hairline:#EDD9CE; --mx-border-strong:#9C7A68;
    --mx-primary:#9A3412; --mx-primary-hover:#7E2A0E; --mx-on-primary:#FFFFFF;
    --mx-link:#A4520C;
    --mx-secondary:#B22258; --mx-on-secondary:#FFFFFF;
    --mx-success:#1C6B3C; --mx-danger:#A32014;
    --mx-doc-paper:#FFFFFF; --mx-doc-ink:#241118;
    --mx-focus:#9A3412; --mx-focus-ring:0 0 0 3px rgba(154,52,18,.35);
  }
}

*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
[id] { scroll-margin-top:calc(var(--mx-topbar-h) + var(--mx-space-3)) }

body {
  margin:0; background:var(--mx-bg); color:var(--mx-ink);
  font:400 var(--mx-fs-base)/var(--mx-lh-body) var(--mx-font-body);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; display:block }
a { color:var(--mx-link); text-underline-offset:2px }

h1,h2,h3,h4 {
  font-family:var(--mx-font-display); font-weight:var(--mx-weight-display);
  letter-spacing:var(--mx-tracking-display); line-height:var(--mx-lh-head);
  margin:0 0 var(--mx-space-3);
}
h1{font-size:var(--mx-fs-2xl)} h2{font-size:var(--mx-fs-xl)}
h3{font-size:var(--mx-fs-lg)} h4{font-size:var(--mx-fs-md)}
p { margin:0 0 var(--mx-space-3) }
.mx-measure { max-width:var(--mx-measure) }

/* Every figure — price, device count, RFC, folio — is tabular. */
.mx-num { font-family:var(--mx-font-num); font-variant-numeric:tabular-nums }

.mx-Wrap { max-width:var(--mx-maxw); margin-inline:auto; padding-inline:var(--mx-gutter) }
.mx-Section { padding-block:var(--mx-space-6) }
.mx-Section--tight { padding-block:var(--mx-space-5) }

/* Asymmetric 8-column grid. Bands alternate 5/3 and 3/5 down the page — that
   alternation is what gives the site motion without any animation. */
.mx-Split { display:grid; gap:var(--mx-space-4); grid-template-columns:1fr }
.mx-Split > * { min-width:0 }
@media (min-width:900px){
  .mx-Split { grid-template-columns:5fr 3fr }
  .mx-Split--flip { grid-template-columns:3fr 5fr }
}

.mx-Grid { display:grid; gap:var(--mx-space-3); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.mx-Grid > * { min-width:0 }

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

/* --------------------------------------------------------------- focus --- */
/* Ámbar on the plum ground measures 8.75:1; the ring is the same token in
   light mode at 6.95:1. Nothing here relies on a hairline to be seen. */
:focus-visible { outline:var(--mx-focus-outline); outline-offset:2px; box-shadow:var(--mx-focus-ring); border-radius:var(--mx-radius-slab) }
.mx-Main:focus, .mx-Main:focus-visible { outline:none; box-shadow:none }

.mx-Skip { position:absolute; left:-9999px; top:0; z-index:120;
  background:var(--mx-ink); color:var(--mx-bg); padding:var(--mx-space-2) var(--mx-space-3);
  font-weight:700 }
.mx-Skip:focus { left:var(--mx-space-2); top:var(--mx-space-2) }

/* -------------------------------------------------------------- topbar --- */
.mx-TopBar { background:var(--mx-surface); border-bottom:1px solid var(--mx-border-strong);
  position:sticky; top:0; z-index:60 }
.mx-TopBar-inner { min-height:var(--mx-topbar-h); display:flex; align-items:center;
  gap:var(--mx-space-4); max-width:var(--mx-maxw); margin-inline:auto; padding-inline:var(--mx-gutter) }
.mx-TopBar-mark { font-family:var(--mx-font-display); font-weight:800;
  font-size:var(--mx-fs-md); color:var(--mx-ink); text-decoration:none; letter-spacing:-.02em }
.mx-TopBar-nav { display:none; gap:var(--mx-space-4); margin-inline:auto }
.mx-TopBar-nav a { color:var(--mx-ink); text-decoration:none; font-weight:600; padding-block:var(--mx-space-2) }
.mx-TopBar-nav a[aria-current="page"] { color:var(--mx-primary); text-decoration:underline; text-decoration-thickness:2px }
@media (min-width:900px){ .mx-TopBar-nav { display:flex } }

/* The +52 chip is a correction of a defect four competitors ship: their
   WhatsApp links omit the country code, so their only CTA fails. */
.mx-DialChip { margin-left:auto; display:inline-flex; align-items:center; gap:var(--mx-space-1);
  border:2px solid var(--mx-border-strong); border-radius:var(--mx-radius-pill);
  padding:var(--mx-space-1) var(--mx-space-3); color:var(--mx-ink);
  text-decoration:none; font-family:var(--mx-font-num); font-size:var(--mx-fs-xs);
  min-height:44px }
.mx-DialChip:hover { border-color:var(--mx-primary) }

.mx-ThemeToggle { background:none; border:2px solid var(--mx-border-strong);
  border-radius:var(--mx-radius-pill); color:var(--mx-ink); font:inherit; font-size:var(--mx-fs-xs);
  min-height:44px; min-width:44px; padding-inline:var(--mx-space-3); cursor:pointer }
.mx-ThemeToggle:hover { border-color:var(--mx-primary) }

/* -------------------------------------------------------------- tabbar --- */
/* Mobile-first Mexico. Verificación stays one thumb-reach from every page —
   putting the proof page in the primary nav, not the footer, is the strategy. */
.mx-TabBar { position:fixed; inset-inline:0; bottom:0; z-index:80;
  background:var(--mx-surface); border-top:1px solid var(--mx-border-strong);
  display:flex; padding-bottom:env(safe-area-inset-bottom) }
.mx-TabBar-item { flex:1; min-height:var(--mx-tabbar-h); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; text-decoration:none;
  color:var(--mx-ink-muted); font-size:var(--mx-fs-2xs); font-weight:700;
  border-top:3px solid transparent; padding-block:var(--mx-space-1) }
.mx-TabBar-item svg { width:22px; height:22px }
.mx-TabBar-item.is-current { color:var(--mx-primary); border-top-color:var(--mx-primary) }
@media (min-width:900px){ .mx-TabBar { display:none } }
@media (max-width:899px){ body { padding-bottom:calc(var(--mx-tabbar-h) + 12px) } }

/* ------------------------------------------------------------- buttons --- */
/* Pill controls, slab containers: round the things you touch, square the
   things that hold information. No button on this site is ever filled green. */
.mx-Btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--mx-space-2);
  min-height:48px; padding-inline:var(--mx-space-4); border-radius:var(--mx-radius-pill);
  font-family:var(--mx-font-display); font-weight:800; font-size:var(--mx-fs-sm);
  text-decoration:none; cursor:pointer; border:2px solid transparent }
.mx-Btn--primary { background:var(--mx-primary); color:var(--mx-on-primary) }
.mx-Btn--primary:hover { background:var(--mx-primary-hover) }
.mx-Btn--secondary { background:transparent; border-color:var(--mx-secondary); color:var(--mx-secondary) }
.mx-Btn--secondary:hover { background:color-mix(in srgb,var(--mx-secondary) 12%,transparent) }
.mx-Btn--tertiary { background:none; border:0; color:var(--mx-ink); min-height:44px;
  padding-inline:0; border-bottom:2px solid var(--mx-primary); border-radius:0 }
.mx-CtaRow { display:flex; flex-wrap:wrap; gap:var(--mx-space-3); align-items:center }

/* --------------------------------------------------------------- cards --- */
.mx-Card { background:var(--mx-surface); border-radius:var(--mx-radius-slab);
  padding:var(--mx-space-4); border-left:var(--mx-card-bar-w) solid var(--mx-primary) }
.mx-Card--editorial { border-left-color:var(--mx-secondary) }
.mx-Card h3 { margin-top:0 }
.mx-Card p:last-child { margin-bottom:0 }

.mx-Eyebrow { display:inline-block; font-size:var(--mx-fs-xs); font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--mx-primary);
  margin-bottom:var(--mx-space-2) }

.mx-Lede { font-size:var(--mx-fs-md); color:var(--mx-ink-muted); max-width:var(--mx-measure) }

/* ----------------------------------------------------------- calculator --- */
.mx-PriceCalc { background:var(--mx-surface); border-radius:var(--mx-radius-slab);
  padding:var(--mx-space-4); display:grid; gap:var(--mx-space-4) }
.mx-PriceCalc-field { display:grid; gap:var(--mx-space-2) }
.mx-PriceCalc-label { font-weight:700; font-size:var(--mx-fs-xs);
  letter-spacing:.08em; text-transform:uppercase; color:var(--mx-ink-muted) }

/* Segmented control — two cells, plan choice. */
.mx-Seg { display:inline-flex; border:2px solid var(--mx-border-strong);
  border-radius:var(--mx-radius-pill); padding:3px; gap:3px }
.mx-Seg button { border:0; background:none; font:inherit; font-weight:800;
  color:var(--mx-ink); min-height:42px; padding-inline:var(--mx-space-4);
  border-radius:var(--mx-radius-pill); cursor:pointer }
.mx-Seg button[aria-selected="true"] { background:var(--mx-primary); color:var(--mx-on-primary) }

/* Duration pills — never a dropdown. */
.mx-Pills { display:flex; flex-wrap:wrap; gap:var(--mx-space-2) }
.mx-Pills button { border:2px solid var(--mx-border-strong); background:none; font:inherit;
  font-weight:700; color:var(--mx-ink); min-height:44px; padding-inline:var(--mx-space-3);
  border-radius:var(--mx-radius-pill); cursor:pointer; font-family:var(--mx-font-num) }
.mx-Pills button[aria-pressed="true"] { background:var(--mx-primary); color:var(--mx-on-primary);
  border-color:var(--mx-primary) }

/* Stepper — − N + */
.mx-Stepper { display:inline-flex; align-items:center; gap:var(--mx-space-3) }
.mx-Stepper button { width:48px; height:48px; border-radius:var(--mx-radius-pill);
  border:2px solid var(--mx-border-strong); background:none; color:var(--mx-ink);
  font-size:var(--mx-fs-md); font-weight:800; cursor:pointer; line-height:1 }
.mx-Stepper button[aria-disabled="true"] { opacity:.4; cursor:not-allowed }
.mx-Stepper-readout { font-family:var(--mx-font-num); font-size:var(--mx-fs-md); font-weight:700;
  min-width:9ch; text-align:center }

/* The answer. One big ámbar number, two supporting lines. */
.mx-PriceCalc-out { border-top:1px solid var(--mx-border-strong); padding-top:var(--mx-space-4) }
.mx-PriceCalc-total { font-family:var(--mx-font-num); font-size:var(--mx-fs-2xl);
  line-height:var(--mx-lh-price); font-weight:800; color:var(--mx-primary); display:block }
.mx-PriceCalc-per, .mx-PriceCalc-anchor { font-family:var(--mx-font-num);
  color:var(--mx-ink-muted); display:block; margin-top:var(--mx-space-1) }
.mx-PriceCalc-anchor { color:var(--mx-ink) }
.mx-PriceCalc-iva { font-size:var(--mx-fs-xs); color:var(--mx-ink-muted); margin-top:var(--mx-space-2) }

/* The cap panel is the conversion lever, not an error. */
.mx-CapNote { border:2px solid var(--mx-secondary); border-radius:var(--mx-radius-slab);
  padding:var(--mx-space-3); display:grid; gap:var(--mx-space-3); justify-items:start }
.mx-CapNote p { margin:0 }
.mx-CapNote[hidden] { display:none }

/* ---------------------------------------------------------- evidence ----- */
/* Paper on a dark table. This page uses no ámbar and no rosa at all — the
   absence of brand colour is the signal that it is not marketing. */
.mx-EvidencePanel { background:var(--mx-doc-paper); color:var(--mx-doc-ink);
  border-radius:var(--mx-radius-slab); padding:var(--mx-space-4); margin-bottom:var(--mx-space-3) }
.mx-EvidencePanel h3 { margin-top:0; color:var(--mx-doc-ink) }
.mx-EvidencePanel dl { display:grid; gap:var(--mx-space-2); margin:0;
  grid-template-columns:minmax(12ch,auto) 1fr }
.mx-EvidencePanel dt { font-weight:800; font-size:var(--mx-fs-xs);
  letter-spacing:.06em; text-transform:uppercase }
.mx-EvidencePanel dd { margin:0 }
.mx-EvidencePanel a { color:#7A2E0B }
.mx-EvidencePanel-identifier { font-family:var(--mx-font-num); user-select:all;
  background:rgba(0,0,0,.05); padding:2px 6px; border-radius:3px }
/* Result words, never marks. Success green appears only as a rule beside the
   word, so the state survives for a reader who cannot see the hue. */
.mx-Result { font-weight:800 }
.mx-Result--ok { border-left:3px solid #1C6B3C; padding-left:var(--mx-space-2) }
.mx-Result--pending { border-left:3px solid #8A6D3B; padding-left:var(--mx-space-2) }

/* ---------------------------------------------------------------- table --- */
.mx-TableWrap { overflow-x:auto }
.mx-Table { width:100%; border-collapse:collapse; border-radius:var(--mx-radius-table);
  font-family:var(--mx-font-num); font-variant-numeric:tabular-nums; font-size:var(--mx-fs-xs) }
.mx-Table th, .mx-Table td { border:1px solid var(--mx-border-strong);
  padding:var(--mx-space-2) var(--mx-space-3); text-align:right }
.mx-Table th:first-child, .mx-Table td:first-child { text-align:left; font-family:var(--mx-font-body) }
.mx-Table thead th { background:var(--mx-raised); font-family:var(--mx-font-body) }
.mx-Table caption { text-align:left; color:var(--mx-ink-muted); font-family:var(--mx-font-body);
  font-size:var(--mx-fs-xs); margin-bottom:var(--mx-space-2) }

/* ------------------------------------------------------------------ faq --- */
.mx-Faq details { background:var(--mx-surface); border-radius:var(--mx-radius-slab);
  padding:var(--mx-space-3) var(--mx-space-4); margin-bottom:var(--mx-space-2) }
.mx-Faq summary { cursor:pointer; font-weight:800; font-family:var(--mx-font-display);
  min-height:44px; display:flex; align-items:center }
.mx-Faq details p:last-child { margin-bottom:0 }

/* --------------------------------------------------------------- footer --- */
.mx-Foot { background:var(--mx-surface); border-top:1px solid var(--mx-border-strong);
  padding-block:var(--mx-space-5); margin-top:var(--mx-space-6) }
.mx-Foot h2 { font-size:var(--mx-fs-sm); text-transform:uppercase; letter-spacing:.1em }
.mx-Foot ul { list-style:none; padding:0; margin:0; display:grid; gap:var(--mx-space-2) }
.mx-Foot a { color:var(--mx-ink) }
.mx-Foot-legal { color:var(--mx-ink-muted); font-size:var(--mx-fs-xs);
  margin-top:var(--mx-space-4); max-width:var(--mx-measure) }

.mx-List { padding-left:1.1em; margin:0 0 var(--mx-space-3) }
.mx-List li { margin-bottom:var(--mx-space-2) }

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