/* Mi Casino Chile.
   Same product family as the reference implementation: same typeface, same
   type scale, same spacing rhythm, same component anatomy. What differs is the
   market copy and one accent.

   Self-hosted. Both faces are SIL Open Font License 1.1, which permits it.
   Licences sit alongside the files in assets/fonts/. Variable, latin subset. */
@font-face{
  font-family:'Newsreader';
  src:url('fonts/Newsreader-latin.woff2') format('woff2-variations');
  font-weight:300 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('fonts/PlusJakartaSans-latin.woff2') format('woff2-variations');
  font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Tokens are frozen; nothing here is an editor control.

   THE ACCENT IS THE ONLY COLOUR THAT DIFFERS FROM THE REFERENCE.
   Swapping it is these three lines and nothing else. Whatever replaces it has
   to clear 4.5:1 white-on-accent for the button, 4.5:1 accentDeep on all three
   grounds for the small uppercase labels, and -- the one that is easy to miss
   -- it has to be far enough from --red that a call to action never reads as a
   warning. */
:root{
  --sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:Newsreader,Georgia,serif;

  /* CHILE IDENTITY: a layered navy, cool light reading surfaces, one Chilean
     red for action. Structure, typography and spacing stay the family's.

     FIVE RELATED NAVIES rather than navy-then-white. Each step is a contrast
     ratio of roughly 1.1 against its neighbour: enough to read as a separate
     plane, not enough to read as a different website. */
  --navy-950:#0A121F;  /* footer, the obligations box */
  --navy-900:#0E1727;  /* the page itself */
  --navy-850:#141F33;  /* a section surface */
  --navy-800:#1B2942;  /* an elevated card */
  --navy-750:#21304B;  /* a nested surface inside a card */
  --navy-700:#26364F;  /* borders and secondary surfaces */
  --navy-600:#354866;  /* only a hovered country's edge */

  /* Light text. t3 is used down to --navy-800 and never on --navy-700, where
     it measures 4.39. */
  --t1:#EEF2F8; --t2:#A8B4C8; --t3:#8E9CB4;

  /* --ink is "text on the CURRENT surface". Every surface on this site is a
     navy step, so these resolve light everywhere; components ask for --ink
     rather than naming a colour, which is what let the reading surface move
     onto the navy scale without touching a single component. */
  --ink:var(--t1); --ink2:var(--t2); --ink3:var(--t3);

  /* Chilean red. White on it measures 5.81. It is NEVER text on navy, where it
     measures 2.51 and fails even the large-text floor -- on dark surfaces the
     accent becomes --accent-on, a lightened rose at 5.3. */
  --accent:#C51F32; --accentDeep:#A3182A; --accent-on:#FF6B7D; --accentBg:#FBEDEF;
  --accentHot:#E02338; /* Chile, hovered: the same red, brighter */

  /* Compatibility aliases, so every component written against the previous
     names keeps working while the surfaces below are re-pointed. */
  --deep:var(--navy-950); --g:var(--navy-900); --band:var(--navy-850);
  --card:var(--navy-800); --soft:var(--navy-850); --sunk:var(--navy-850);
  /* La fila resaltada de una tabla de datos. Opaco a proposito: una celda fija
     con fondo semitransparente deja ver la celda que se desliza por debajo. */
  --cardHover:var(--navy-750, #1E2A3F);
  --paper:var(--navy-800);
  --onDeep:var(--t1); --onDeep2:var(--t2); --deepLine:var(--navy-700);
  --line:var(--navy-700); --line2:#31435F;
  --accentOn:var(--accent-on);

  /* Evidence colours. Semantic, never decorative. Lightened for dark grounds:
     the family's originals are tuned for paper and go muddy on navy. */
  --green:#3FBF8F; --greenBg:#12332A; --greenLn:#1E5744;
  --amber:#D9A441; --amberBg:#332A16; --amberLn:#5A4820;
  --red:#F0796B;   --redBg:#331C1A;

  --sh:0 1px 2px rgba(0,0,0,.18),0 3px 10px rgba(0,0,0,.20);
  --shh:0 2px 6px rgba(0,0,0,.22),0 14px 32px rgba(0,0,0,.30);
}

/* Long-form reading is dark-native too. An earlier pass inverted a review's
   sections to cool light, which made the page read as white rectangles laid
   on a navy site. The reading surface is now the navy scale with more space
   and a longer measure -- the hierarchy comes from elevation and rhythm, not
   from flipping the ground. Light tokens survive only where a mark genuinely
   needs a light backing. */
*{box-sizing:border-box}
body{margin:0;background:var(--g);color:var(--ink);
  font-family:var(--sans);
  font-size:15px;line-height:1.55;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--sans);margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.mcc-wrap{max-width:1160px;margin:0 auto;padding:0 24px}
@media(min-width:900px){.mcc-wrap{padding:0 52px}}

.mcc-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mcc-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--deep);color:var(--onDeep);padding:10px 16px}
.mcc-skip:focus{left:8px;top:8px}

/* ---- masthead -----------------------------------------------------------
   Static on desktop, sticky on phones: on a page this long, getting back to
   the menu without scrolling to the top is worth the 52px. Translucent with a
   blur once it has something behind it, so the page reads through it. */
.mcc-nav{border-bottom:1px solid var(--deepLine);background:var(--g)}
@media (max-width:900px){
  .mcc-nav{position:sticky;top:0;z-index:60;
    background:color-mix(in srgb,var(--g) 90%,transparent);
    backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
  .admin-bar .mcc-nav{top:46px}
}
@supports not (backdrop-filter:blur(10px)){
  @media (max-width:900px){ .mcc-nav{background:var(--g)} }
}
.mcc-nav__inner{display:flex;align-items:center;gap:18px;padding-block:15px}
.mcc-logo{display:inline-flex;align-items:baseline;gap:9px;text-decoration:none;flex:0 0 auto;
  font-family:var(--sans);font-size:21px;font-weight:800;letter-spacing:-.03em;color:var(--onDeep)}
.mcc-logo__market{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accentOn)}
.mcc-nav__links{margin-left:auto;display:flex;align-items:center;gap:22px}
/* The negative margin keeps the row the height it looks, while the padding
   gives a thumb something the size of a thumb to hit. */
.mcc-nav__links a{font-size:13.5px;font-weight:600;color:var(--onDeep2);text-decoration:none;white-space:nowrap;
  padding-block:12px;margin-block:-12px;transition:color .12s}
.mcc-nav__links a:hover{color:var(--onDeep)}
.mcc-nav__links a[aria-current]{color:var(--onDeep)}

/* dropdown */
.mcc-menu{position:relative;display:flex;align-items:center;gap:2px}
.mcc-menu__toggle{appearance:none;background:none;border:0;padding:12px 4px;margin-block:-12px;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--onDeep2);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.mcc-menu__toggle:hover{color:var(--onDeep)}
.mcc-menu__chev{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-2px);transition:transform .16s}
.mcc-menu.is-open .mcc-menu__chev{transform:rotate(-135deg) translate(-1px,-1px)}
.mcc-menu__panel{display:none;position:absolute;top:100%;right:-14px;left:auto;z-index:60;padding-top:10px}
.mcc-menu__cols{display:flex;gap:34px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shh);padding:16px 18px;
  max-width:calc(100vw - 24px);flex-wrap:wrap}
.mcc-menu__col{display:flex;flex-direction:column;gap:2px;min-width:150px}
/* The Casinos panel is the one that grows: three headed columns once the
   casino-type owners ship. It opens from the left edge of its toggle so it
   extends into the page rather than off it, and nav.js nudges it back inside
   the viewport if a narrow window still leaves it hanging. */
.mcc-menu--casinos .mcc-menu__panel{right:auto;left:-14px}
.mcc-nav__links .mcc-menu__link:focus-visible{color:var(--accent);outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.mcc-menu__toggle:focus-visible{outline:2px solid var(--accentOn);outline-offset:3px;border-radius:3px}
.mcc-menu__label{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:5px}
.mcc-nav__links .mcc-menu__link{font-size:13px;font-weight:500;color:var(--ink2);padding-block:5px;margin-block:0}
.mcc-nav__links .mcc-menu__link:hover{color:var(--accent)}
@media (hover:hover) and (min-width:901px){ .mcc-menu:hover .mcc-menu__panel{display:block} }
.mcc-menu.is-open .mcc-menu__panel{display:block}
.mcc-menu.is-closed .mcc-menu__panel{display:none}

.mcc-nav__burger{display:none}
@media (max-width:900px){
  .mcc-nav__inner{flex-wrap:wrap;row-gap:0}
  .mcc-nav__burger{display:inline-flex;align-items:center;gap:8px;margin-left:auto;
    appearance:none;background:none;border:0;padding:12px 0;font:inherit;font-size:13px;
    font-weight:600;color:var(--onDeep2);cursor:pointer}
  .mcc-nav__burger-bars{position:relative;width:14px;height:9px;border-top:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor}
  .mcc-nav__burger-bars::after{content:"";position:absolute;left:0;top:3px;width:14px;border-top:1.5px solid currentColor}
  .mcc-nav__links{display:none;width:100%;margin-left:0;flex-direction:column;align-items:stretch;gap:0;padding-bottom:8px}
  .mcc-nav.is-open .mcc-nav__links{display:flex}
  .mcc-nav__links > a,
  .mcc-menu{border-top:1px solid var(--deepLine)}
  .mcc-nav__links > a{padding-block:13px;margin-block:0}
  .mcc-menu{flex-direction:column;align-items:stretch}
  .mcc-menu__toggle{justify-content:space-between;padding-block:13px;margin-block:0;width:100%}
  .mcc-menu__panel{position:static;padding-top:0;padding-bottom:10px}
  .mcc-menu__cols{flex-direction:column;gap:12px;border:0;box-shadow:none;background:none;padding:0 0 0 2px;max-width:none}
  .mcc-menu--casinos .mcc-menu__panel{left:auto}
  .mcc-menu__panel{transform:none!important}
  .mcc-nav__links .mcc-menu__link{padding-block:11px;color:var(--onDeep2)}
  .mcc-menu__label{color:var(--onDeep2);opacity:.75;margin-top:4px}
}

/* ---- hero ---------------------------------------------------------------
   The opening of a page. Type carries it; there is no band, because the dark
   band means "this is the casino" and MCC is not one. */
.mcc-hero{padding:52px 0 8px;max-width:none}
.mcc-hero__eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accentOn);margin-bottom:14px}
.mcc-hero__head{font-family:var(--sans);font-size:clamp(32px,4.6vw,54px);line-height:1.03;
  letter-spacing:-.035em;font-weight:750;margin:0;max-width:20ch;text-wrap:balance;color:var(--onDeep)}
.mcc-hero__body{margin:18px 0 0;font-size:17px;line-height:1.6;color:var(--onDeep2);max-width:60ch}
.mcc-hero__acts{display:flex;gap:11px;flex-wrap:wrap;margin-top:26px}
.mcc-act{display:inline-flex;align-items:center;border-radius:12px;padding:11px 19px;
  font-size:14px;font-weight:700;letter-spacing:-.01em;text-decoration:none;
  transition:background .15s,border-color .15s,transform .15s}
.mcc-act--primary{background:var(--accent);color:#fff}
.mcc-act--primary:hover{background:var(--accentDeep);transform:translateY(-1px)}
.mcc-act--quiet{border:1px solid var(--deepLine);background:transparent;color:var(--onDeep)}
.mcc-act--quiet:hover{border-color:var(--onDeep2);background:rgba(255,255,255,.05)}
.mcc-tally{margin:26px 0 0;font-size:13px;color:var(--ink2)}
.mcc-tally strong{color:var(--ink);font-weight:700}

.mcc-hero--mapped{display:grid;gap:22px;align-items:center}
.mcc-hero--mapped .mcc-hero__text{min-width:0}
.mcc-hero--mapped .mcc-hero__aside{min-width:0;display:block}
@media(min-width:900px){ .mcc-hero--mapped{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px} }

/* The composed page's own hero. Same voice as the homepage head, one step
   down: a page H1 names a topic in two to six words, so it does not need the
   homepage's display size, and it used to fall back to the browser's 2em. The
   opening is one block of body copy directly under it, never a second lede. */
.mcc-hero--page{padding:40px 0 4px}
.mcc-hero__title{font-family:var(--sans);font-size:clamp(30px,3.6vw,44px);line-height:1.06;
  letter-spacing:-.03em;font-weight:750;margin:0;max-width:22ch;text-wrap:balance;color:var(--onDeep)}
.mcc-hero__lede{margin:14px 0 0;font-size:16px;line-height:1.6;color:var(--onDeep2);max-width:66ch}
.mcc-hero__opening{margin-top:16px;max-width:66ch}
.mcc-hero__opening p{margin:0;font-size:17px;line-height:1.62;color:var(--onDeep2)}
.mcc-hero__opening p + p{margin-top:12px}
.mcc-hero__opening a{color:var(--onDeep);text-underline-offset:3px}
@media (max-width:900px){
  .mcc-hero--page{padding:26px 0 2px}
  .mcc-hero__title{letter-spacing:-.026em}
  .mcc-hero__opening p,.mcc-hero__lede{font-size:15.5px}
}


/* ---- section furniture --------------------------------------------------
   A rule above each heading rather than a box around each section: the reader
   learns it once and thereafter reads by it. */
.mcc-page{padding-bottom:48px}
.mcc-site{margin-top:42px;padding-top:20px;border-top:1px solid var(--deepLine)}
.mcc-site__head{font-family:var(--sans);font-size:23px;line-height:1.15;letter-spacing:-.025em;
  font-weight:700;margin:0;color:var(--onDeep)}
.mcc-site__intro{margin:7px 0 14px;font-size:15px;line-height:1.62;color:var(--onDeep2);max-width:66ch}
.mcc-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--onDeep2);display:block}
/* Inside a white card the same furniture takes the light-ground inks. */
.mcc-card .mcc-site__head,.mcc-card .mcc-vs__name{color:var(--ink)}
.mcc-card .mcc-label,.mcc-card .mcc-section__label{color:var(--ink3)}

.mcc-card,.mcc-section{background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--sh);padding:20px;transition:box-shadow .18s ease,border-color .18s ease}
@media(min-width:900px){.mcc-card,.mcc-section{padding:24px}}
.mcc-section:hover{box-shadow:var(--shh);border-color:var(--line2)}
.mcc-section__heading{font-family:var(--sans);font-size:19.5px;line-height:1.2;letter-spacing:-.02em;
  font-weight:500;margin:8px 0 12px}
.mcc-prose p{margin:0 0 12px;color:var(--ink2);max-width:65ch}
.mcc-prose p:last-child{margin-bottom:0}

/* the table of contents */
.mcc-toc{margin-top:32px}
.mcc-toc__box{background:var(--card);border:1px solid var(--line);border-radius:13px;box-shadow:var(--sh)}
.mcc-toc__head{display:flex;align-items:center;gap:10px;padding:14px 18px;cursor:pointer;list-style:none;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.mcc-toc__head::-webkit-details-marker{display:none}
.mcc-toc__box > .mcc-toc__head::after{content:'';margin-left:auto;width:7px;height:7px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.mcc-toc__box[open] > .mcc-toc__head::after{transform:rotate(225deg) translateY(-1px)}
.mcc-toc__list{margin:0;padding:4px 22px 18px 40px;display:flex;flex-direction:column;gap:9px;font-size:13.5px}
.mcc-toc__list li::marker{color:var(--ink3)}
.mcc-toc__list a{color:var(--ink2);text-decoration:none}
.mcc-toc__list a:hover{color:var(--ink);text-decoration:underline}
@media(max-width:719px){.mcc-toc__list{padding-left:34px;gap:8px;font-size:13px}}

/* ---- the one action ------------------------------------------------------
   Accent, not neon. */
.mcc-visit{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;
  font-weight:700;font-size:14.5px;padding:12px 20px;border-radius:12px;text-decoration:none;
  transition:background .15s ease,transform .15s ease;letter-spacing:-.01em}
.mcc-visit:hover{background:var(--accentDeep);transform:translateY(-1px);color:#fff}
.mcc-visit__arrow{font-size:12px;opacity:.85}
.mcc-visit--off{opacity:.42;cursor:default;pointer-events:none}

/* ---- ranking card -------------------------------------------------------
   A comparison row, not a database report. The columns are fixed so a row of
   cards reads as a comparison table: the identity column ends in the same
   place whatever the casino is called, and the third signal starts in the same
   place whether it holds a payout window or a bonus. Content varies inside a
   cell; the cell never moves. */
.mcc-rank__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.mcc-rank__row{position:relative;list-style:none}
.mcc-rank__card{border:1px solid var(--line);border-radius:14px;background:var(--card);
  transition:border-color .15s,box-shadow .15s}
.mcc-rank__card:hover{border-color:var(--line2);box-shadow:var(--shh)}
.mcc-rank__top{display:grid;
  grid-template-columns:32px minmax(0,301px) repeat(3,minmax(0,1fr)) 126px;
  align-items:start;gap:14px;padding:11px 14px}
.mcc-rank__pos{display:flex;align-items:center;justify-content:center}
/* min-width, not width: the badge grows for 10 and for 99 and stays inside the
   fixed 32px column. Tabular figures keep 11 exactly as wide as 18. */
.mcc-rank__posnum{display:flex;align-items:center;justify-content:center;
  min-width:26px;height:26px;padding:0 4px;box-sizing:border-box;
  border-radius:8px;background:var(--sunk);color:var(--ink2);font-size:13px;font-weight:750;
  font-variant-numeric:tabular-nums}
.mcc-rank__row[data-pos="1"] .mcc-rank__posnum{background:var(--accent);color:#fff}
.mcc-rank__brand{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none;color:inherit}
.mcc-rank__mark{flex:0 0 auto;display:flex;align-items:center}
.mcc-rank__id{display:flex;flex-direction:column;gap:1px;min-width:0}
.mcc-rank__name{font-size:15px;font-weight:750;letter-spacing:-.015em;color:var(--ink);line-height:1.25}
.mcc-rank__brand:hover .mcc-rank__name{color:var(--accentDeep)}
.mcc-rank__reg{font-size:11.5px;color:var(--ink3);line-height:1.3}
/* Two lines, so cards keep close to the same height whatever length the
   editor's sentence runs to. */
.mcc-rank__why{margin-top:3px;font-size:12px;line-height:1.4;color:var(--ink2);font-weight:500;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
  min-height:calc(2 * 1.45em)}
/* The signals are grid cells of the card itself, not a nested grid, or a
   casino with a long payment list would push its neighbours' columns around. */
.mcc-rank__signals{display:contents}
.mcc-rank__signal{display:flex;flex-direction:column;gap:3px;min-width:0;padding-top:2px}
.mcc-rank__signal--empty{min-height:1px}
.mcc-rank__siglabel{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);
  font-weight:700;line-height:1.3}
.mcc-rank__sigvalue{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;min-width:0}
.mcc-rank__chip{display:inline-block;padding:2px 7px;border:1px solid var(--line);border-radius:6px;
  background:var(--sunk);font-size:11.5px;font-weight:600;color:var(--ink2);white-space:nowrap}
.mcc-rank__chip--more{border-style:dashed;color:var(--ink3)}
.mcc-rank__big{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.35}
.mcc-rank__big--absent{font-weight:500;color:var(--ink3);opacity:.85}
.mcc-rank__aside{font-size:11.5px;color:var(--ink3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Visitar above, Leer resena below, on every card. */
.mcc-rank__act{display:flex;flex-direction:column;align-items:stretch;gap:6px;justify-self:stretch}
.mcc-rank__act .mcc-visit{width:100%;justify-content:center;white-space:nowrap;font-size:12.5px;padding:8px 12px}
.mcc-rank__review{text-align:center;font-size:12px;font-weight:650;color:var(--ink2);
  text-decoration:none;white-space:nowrap;padding:2px 0}
.mcc-rank__review:hover{color:var(--ink);text-decoration:underline}

/* the disclosure */
.mcc-rank__disc{border-top:1px solid var(--line)}
.mcc-rank__discsum{list-style:none;cursor:pointer;padding:9px 16px;font-size:12px;font-weight:650;
  color:var(--ink3);display:flex;align-items:center;gap:7px}
.mcc-rank__discsum::-webkit-details-marker{display:none}
.mcc-rank__discsum::after{content:'';width:6px;height:6px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.mcc-rank__disc[open] .mcc-rank__discsum::after{transform:rotate(225deg) translateY(-2px)}
.mcc-rank__discsum:hover{color:var(--ink)}
.mcc-rank__detail{padding:0 16px 16px;display:grid;gap:9px}
.mcc-rank__fact{display:grid;grid-template-columns:minmax(0,132px) minmax(0,1fr);gap:14px;font-size:12.5px}
.mcc-rank__factlabel{color:var(--ink3);font-weight:650}
.mcc-rank__factvalue{color:var(--ink);min-width:0}
.mcc-rank__factvalue--absent{color:var(--ink3)}
.mcc-rank__note{margin-top:12px;font-size:12px;color:var(--onDeep2)}

@media(max-width:1023px){
  /* The desktop column contract becomes a stacked one, in the same order for
     every casino: identity, then the three signals, then Visitar, then the
     review. What an editor chooses changes the contents of a row, never where
     the rows are. */
  .mcc-rank__top{grid-template-columns:30px minmax(0,1fr);gap:10px 12px}
  .mcc-rank__pos{grid-column:1;grid-row:1;padding-top:2px}
  .mcc-rank__brand{grid-column:2;grid-row:1}
  .mcc-rank__signal{grid-column:1/-1;flex-direction:row;align-items:baseline;justify-content:space-between;
    gap:12px;padding:7px 0 0;border-top:1px solid var(--line)}
  .mcc-rank__signal--empty{display:none}
  .mcc-rank__act{grid-column:1/-1;padding-top:10px;border-top:1px solid var(--line)}
  .mcc-rank__aside{display:none}
}
@media(max-width:599px){
  .mcc-rank__top{padding:11px 12px}
  .mcc-rank__sigvalue{justify-content:flex-end;text-align:right}
  .mcc-rank__fact{grid-template-columns:1fr;gap:2px}
  .mcc-rank__detail,.mcc-rank__discsum{padding-left:12px;padding-right:12px}
}

/* the mark */
.mcc-mark{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:9px;background:var(--sunk);border:1px solid var(--line);overflow:hidden}
.mcc-mark--lg{width:56px;height:56px;border-radius:12px}
.mcc-mark--text{font-size:12px;font-weight:750;letter-spacing:-.02em;color:var(--ink2)}
.mcc-mark--lg.mcc-mark--text{font-size:17px}
.mcc-mark__img{max-width:82%;max-height:82%;object-fit:contain}
/* A real logo: no square plate, a transparent box of fixed height and flexible
   width. The files share one canvas height with the logo sized by area and
   centred on its visual mass, so wordmarks and square marks read at the same
   size. Logos that would vanish on navy ship as a UI-safe display file, so no
   logo is ever drawn on a plate. */
.mcc-mark--logo{width:auto;height:38px;max-width:132px;padding:0;background:none;border:0;border-radius:0;overflow:visible}
.mcc-mark--logo.mcc-mark--lg{height:56px;max-width:220px}
.mcc-mark--logo .mcc-mark__img{display:block;height:100%;width:auto;max-width:100%;max-height:100%;object-fit:contain}
.mcc-band .mcc-mark.mcc-mark--logo{background:none;border:0}
/* In a ranking card the logo slot keeps one width, so the name column
   starts at the same place on every card whatever the logo's shape. */
.mcc-rank__mark .mcc-mark--logo{width:118px;max-width:118px;justify-content:center}
.mcc-rank__mark .mcc-mark--logo .mcc-mark__img{height:auto;max-height:100%}
/* The directory row prints the name beside the logo in a narrow column, so
   the logo slot is fixed and shorter there, and the names line up. The rail's
   picks get the same fixed slot. */
.mcc-dir__id .mcc-mark--logo{width:92px;max-width:92px;height:30px;justify-content:center}
.mcc-pick__mark .mcc-mark--logo{width:88px;max-width:88px;height:30px;justify-content:center}
.mcc-dir__id .mcc-mark--logo .mcc-mark__img,.mcc-pick__mark .mcc-mark--logo .mcc-mark__img{height:auto;max-height:100%}

/* ---- states -------------------------------------------------------------- */
.mcc-state--yes{color:var(--green);font-weight:650}
.mcc-state--no{color:var(--red)}
.mcc-state--unknown{color:var(--ink3)}

/* ---- the comparison deck ------------------------------------------------
   Cards, not columns. Dense on purpose: more information than a table and no
   taller, which means small type used confidently, tight rows and chips rather
   than table lines. */
.mcc-cmp{margin-top:56px;max-width:100%}
@media (max-width:660px){ .mcc-cmp{margin-top:40px} }
.mcc-cmp__chooser{margin-bottom:20px;padding:16px 18px;border:1px solid var(--line);
  border-radius:12px;background:var(--sunk)}
.mcc-cmp__slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 14px}
.mcc-cmp__slot[hidden]{display:none}
.mcc-cmp__slotlabel{display:block;font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:5px}
.mcc-cmp__control{position:relative;display:block}
.mcc-cmp__field{width:100%;padding:9px 34px 9px 11px;border:1px solid var(--line2);border-radius:8px;
  background:var(--paper);font:inherit;font-size:13.5px;color:var(--ink)}
.mcc-cmp__field::placeholder{color:var(--ink3)}
.mcc-cmp__field:hover{border-color:var(--ink3)}
.mcc-cmp__field:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
/* The clear control lives in the field, which is where a reader looks for it. */
.mcc-cmp__clear{position:absolute;top:50%;right:4px;transform:translateY(-50%);
  width:26px;height:26px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:6px;background:transparent;color:var(--ink3);font-size:15px;line-height:1;cursor:pointer}
.mcc-cmp__clear:hover{background:var(--card);color:var(--ink)}
.mcc-cmp__clear[hidden]{display:none}
.mcc-cmp__options{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;
  margin:0;padding:4px;list-style:none;background:var(--card);border:1px solid var(--line2);
  border-radius:8px;box-shadow:var(--shh);max-height:220px;overflow-y:auto}
.mcc-cmp__options[hidden]{display:none}
.mcc-cmp__options li[hidden]{display:none}
.mcc-cmp__option{display:block;width:100%;text-align:left;padding:7px 9px;border:0;border-radius:6px;
  background:transparent;font:inherit;font-size:13px;color:var(--ink2);cursor:pointer}
.mcc-cmp__option:hover,.mcc-cmp__option:focus-visible{background:var(--sunk);color:var(--ink)}
.mcc-cmp__option[disabled]{color:var(--ink3);cursor:default;opacity:.55}
.mcc-cmp__chooseract{margin-top:12px}
.mcc-cmp__add{padding:7px 13px;border:1px dashed var(--line2);border-radius:8px;background:transparent;
  font:inherit;font-size:12.5px;color:var(--ink2);cursor:pointer}
.mcc-cmp__add:hover{border-color:var(--accent);color:var(--accent);border-style:solid}
.mcc-cmp__add[hidden]{display:none}
.mcc-cmp__status{margin:9px 0 0;font-size:11.5px;color:var(--ink3);min-height:1em}

.mcc-cmp__deck{display:grid;gap:14px;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
.mcc-cmp__deck[data-count="2"]{--cols:2}
.mcc-cmp__deck[data-count="3"]{--cols:3}
.mcc-cmp__deck[data-count="4"]{--cols:4}
.mcc-vs[hidden]{display:none}
.mcc-vs{position:relative;display:flex;flex-direction:column;min-width:0;
  padding:16px 16px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}

/* ROW ALIGNMENT ACROSS THE DECK.
   The deck owns one set of row tracks and every card subgrids onto them, so
   "Tiempo de retiro" begins at the same height in all four columns even when
   one casino's bonus line wraps to three lines and another's is a dash. A long
   value grows its own row -- in every card at once -- rather than pushing the
   next category out of step with its neighbours.

   Deliberately not fixed heights and not clipping: content may grow, it just
   has to grow the shared track. Where subgrid is unavailable the cards fall
   back to the flex column above, which is the old behaviour and still legible. */
@supports (grid-template-rows: subgrid){
  /* Subgrid only holds while every card sits on ONE row of the deck. Once the
     deck wraps -- three cards into two columns at 900px -- the parent's
     thirteen tracks stop describing the layout and the alignment silently
     inverts. So the flag is set only when the column count can hold every
     card, and everything else keeps the flex column, which is correct and
     perfectly legible.

     Deliberately not fixed heights and not clipping: a long value grows its
     shared track in all columns at once. */
  .mcc-cmp__deck[data-mcc-subgrid]{grid-template-rows:repeat(var(--mcc-rows,6),auto)}
  .mcc-cmp__deck[data-mcc-subgrid] > .mcc-vs{display:grid;grid-row:span var(--mcc-rows,6);
    grid-template-rows:subgrid;align-content:start;gap:0}
  .mcc-cmp__deck[data-mcc-subgrid] > .mcc-vs > *{min-width:0}
}
.mcc-vs__remove{position:absolute;top:8px;right:8px;width:30px;height:30px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:7px;background:transparent;color:var(--ink3);
  font-size:15px;line-height:1;cursor:pointer}
.mcc-vs__remove[hidden]{display:none}
.mcc-vs__remove:hover{background:var(--sunk);color:var(--ink);border-color:var(--line2)}
.mcc-vs__head{padding-right:34px;margin-bottom:12px}
.mcc-vs__mark{display:block;margin-bottom:8px}
.mcc-vs__name{display:inline-block;font-size:15.5px;font-weight:660;color:var(--ink);
  text-decoration:none;letter-spacing:-.01em}
.mcc-vs__name:hover{color:var(--accent)}
.mcc-vs__status{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:4px 0 0;font-size:12px;color:var(--ink2)}
.mcc-vs__status--unknown{color:var(--ink3)}

/* Facts: a tight two-column grid, not table rows with table padding. */
.mcc-vs__facts{margin:0;padding:12px 0 0;border-top:1px solid var(--line)}
/* The facts are one set, not four rows: a hairline between each pair inside a
   single block, which reads the same and costs the card far less height. */
.mcc-vs__facts{display:flex;flex-direction:column;margin-top:12px;padding-top:11px;
  border-top:1px solid var(--line)}
.mcc-vs__fact{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:6px 0}
.mcc-vs__fact + .mcc-vs__fact{border-top:1px solid var(--line)}
.mcc-vs__label{margin:0;font-size:11.5px;color:var(--ink2);flex:0 0 auto}
.mcc-vs__value{margin:0;font-size:13px;color:var(--ink);text-align:right;min-width:0;
  font-variant-numeric:tabular-nums;overflow-wrap:break-word}
/* The one genuinely variable string on the card. Two lines, then ellipsis;
   the review carries the full terms. */
.mcc-vs__fact[data-state="known"] .mcc-vs__value{display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
/* Unknown is a neutral, quieter state -- never a warning. Half a page of
   honest gaps should read as restraint, not as an error screen. */
.mcc-vs__fact[data-state="unknown"] .mcc-vs__value{color:var(--ink3);font-size:12px;font-weight:400;opacity:.85}
.mcc-vs__panelnone{opacity:.85}

/* Sets of things: chips on one or two lines, never a row each. */
.mcc-vs__panel{margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}
.mcc-vs__panelhead{margin:0 0 6px;font-size:9.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3)}
.mcc-vs__panelnone{margin:0;font-size:12px;color:var(--ink3)}
.mcc-vs__chips{list-style:none;display:flex;flex-wrap:wrap;gap:5px;margin:0;padding:0;align-items:center;min-width:0}
/* A chip stays on one line for as long as it fits, because flex-wrap moves it
   to the next line before it is ever asked to shrink. */
.mcc-vs__chip{padding:3px 8px;border:1px solid var(--line2);border-radius:9px;
  font-size:11px;color:var(--ink2);background:var(--paper);max-width:100%;min-width:0;overflow-wrap:break-word}
.mcc-vs__chip--more{color:var(--ink3);border-style:dashed;white-space:nowrap}
/* A chip that leads somewhere says so quietly: the entity archive is worth a
   click, not a shout. */
.mcc-chiplink{color:inherit;text-decoration:none}
.mcc-chiplink:hover,.mcc-chiplink:focus-visible{color:var(--accent-on);text-decoration:underline;
  text-underline-offset:3px}
/* The chip is not a surface -- it only sizes the shared mark slot for this
   component. No background, no border, no plate: see .mcc-pmark. */
.mcc-vs__chip--mark{display:inline-flex;align-items:center;justify-content:center;
  padding:0;height:22px;max-width:100%;background:none;border-color:transparent}
.mcc-vs__chip--mark .mcc-pmark{--pmark-h:16px;--pmark-w:52px}
/* Artwork keeps the frame; a word is measured by the word. Both are 16px
   tall on the same baseline, so the row reads as one set either way. */
.mcc-vs__chip--mark .mcc-pmark--text{--pmark-w:auto;font-size:10px}
.mcc-vs__chip--mark .mcc-pmark--text .mcc-pmark__label{max-width:13ch}

/* The editor's assessment, when there is one. */
.mcc-vs__assessment{margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.mcc-vs__judgements{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.mcc-vs__judgement{display:flex;gap:7px;font-size:11.5px;line-height:1.4;color:var(--ink2)}
/* A card is a column in a row of columns: one long point must not set the
   height of the whole deck. Two lines is enough to carry a judgement, and the
   full list is one click away in the review. */
/* Clamped by height, not by -webkit-line-clamp. As a flex item the box-clamp
   display value is blockified, which killed its intrinsic width and collapsed
   the text to a column one character wide. A max-height of two lines clamps
   just as well and lays out correctly wherever it is placed. */
.mcc-vs__judgement .mcc-vs__judgetext{flex:1 1 auto;min-width:0;overflow:hidden;
  max-height:calc(1.4em * 2)}
.mcc-vs__judgement--more{color:var(--ink3);font-size:11px;padding-inline-start:14px}
.mcc-vs__judgement span{flex:0 0 auto;font-weight:700;width:9px}
.mcc-vs__judgement--pro span{color:var(--green)}
.mcc-vs__judgement--con span{color:var(--ink3)}

.mcc-vs__act{margin-top:auto;padding-top:14px;display:flex;flex-direction:column;align-items:stretch;gap:8px}
.mcc-vs__act .mcc-visit{display:inline-flex;align-items:center;justify-content:center;
  width:100%;padding:10px 14px;font-size:13.5px}
.mcc-vs__act .mcc-rank__review{display:inline-block;text-align:center;font-size:12px;color:var(--ink2);
  text-decoration:none;border-bottom:1px solid var(--line2);align-self:center;padding-bottom:1px}
.mcc-vs__act .mcc-rank__review:hover{color:var(--accent);border-bottom-color:currentColor}

@media (max-width:1180px){ .mcc-cmp__deck[data-count="4"]{--cols:2} }
@media (max-width:900px){
  .mcc-cmp__deck[data-count="2"],
  .mcc-cmp__deck[data-count="3"],
  .mcc-cmp__deck[data-count="4"]{--cols:2}
}
/* Phone: a swipe rail, so each card stays whole and readable. */
@media (max-width:660px){
  .mcc-cmp__deck{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;gap:12px;padding-bottom:6px;max-width:100%}
  .mcc-vs{flex:0 0 85%;scroll-snap-align:start}
  .mcc-cmp__slots{grid-template-columns:1fr}
}

/* ---- data modules (Render\Analytics) ---------------------------------------
   Text explains, data counts. Every row writes its numbers out, so the drawn
   track is a supporting mark and never the only way to a figure. Three
   evidence states, in the site's semantic colours only: confirmed (green),
   the operator's own no (red), and not verified (a hatched navy that reads as
   "not looked at" rather than as an empty bar). No percentages in the type. */
.mcc-metric{margin:26px 0;padding:18px 20px 16px;border:1px solid var(--line);border-radius:14px;
  background:var(--card);max-width:46rem}
.mcc-metric__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.mcc-metric__titles{display:flex;flex-direction:column;gap:3px;min-width:0}
.mcc-metric__eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-on)}
.mcc-metric__title{font-size:15.5px;font-weight:650;color:var(--ink);letter-spacing:-.01em;line-height:1.3}

/* The view switch: two real buttons, revealed by charts.js. The pressed state
   is styled from aria-pressed, so it cannot look selected while reading as not. */
.mcc-metric__modes{display:inline-flex;flex:0 0 auto;padding:2px;border:1px solid var(--line2);
  border-radius:9px;background:var(--sunk)}
.mcc-metric__modes[hidden]{display:none}
.mcc-metric__mode{padding:5px 11px;border:0;border-radius:7px;background:transparent;
  font:inherit;font-size:12px;color:var(--ink2);cursor:pointer;min-height:30px}
.mcc-metric__mode:hover{color:var(--ink)}
.mcc-metric__mode[aria-pressed="true"]{background:var(--navy-700);color:var(--ink);font-weight:600}

.mcc-metric__legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 12px;
  font-size:11.5px;color:var(--ink3)}
.mcc-metric__legend>span:not(.mcc-metric__key){display:inline-flex;align-items:center;gap:6px 14px}
.mcc-metric__legend .mcc-metric__legendrest[hidden]{display:none}
.mcc-metric__key{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.mcc-metric__key--yes,.mcc-metric__state--yes .mcc-metric__key{background:var(--green)}
/* The two series of a paired measure, in the same green the columns use. */
.mcc-metric__key--1{background:var(--green)}
.mcc-metric__key--2{background:color-mix(in srgb,var(--green) 42%,var(--navy-750))}
/* Written through .mcc-metric__legend so these beat the inline-flex rule above
   them: a key half that is hidden has to actually leave. */
.mcc-metric__legend .mcc-metric__legendbars[hidden],
.mcc-metric__legend .mcc-metric__legendrest[hidden]{display:none}
.mcc-metric__key--no,.mcc-metric__state--no .mcc-metric__key{background:var(--red)}
.mcc-metric__key--unknown,.mcc-metric__state--unknown .mcc-metric__key{background:repeating-linear-gradient(135deg,var(--navy-600) 0 3px,var(--navy-750) 3px 6px)}

/* The bars view: columns from one baseline (Render\Analytics::plot).
   Three rows per column -- the figure, the plot, the name -- so every bar is
   measured against the same height and every foot lands on the same line. A
   name that wraps to two lines grows its own row and moves no geometry. The
   plot is held to a readable measure rather than the full column: seven bars
   stretched across 46rem stop reading as one object. */
.mcc-metric__plot{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(74px,1fr);
  align-items:start;gap:14px;margin:0;padding:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.mcc-metric__plot[hidden],.mcc-metric__rings[hidden]{display:none}
.mcc-metric__col{display:grid;grid-template-rows:min-content var(--mcc-plot,104px) auto;
  align-items:end;justify-items:center;gap:7px;min-width:0}
.mcc-metric__values{display:flex;align-items:baseline;justify-content:center;gap:7px}
.mcc-metric__value{font-size:14.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;
  line-height:1}
.mcc-metric__value--2{color:var(--ink2);font-weight:650}
.mcc-metric__bars{display:flex;align-items:flex-end;justify-content:center;gap:4px;width:100%;height:100%}
.mcc-metric__bar{display:block;width:100%;max-width:26px;min-height:3px;border-radius:5px 5px 0 0;
  background:var(--green)}
/* The second series of a paired measure: the same confirmed green, quieter, so
   the pair reads as one measure seen twice and not as two unrelated colours. */
.mcc-metric__bar--2{background:color-mix(in srgb,var(--green) 42%,var(--navy-750))}
.mcc-metric__bar.is-zero{min-height:2px;background:var(--navy-700)}
/* A long method name wraps and, where the language allows it, hyphenates. It
   is never broken mid-syllable and never truncated: the label is how a reader
   knows which column they are looking at. */
.mcc-metric__col .mcc-metric__name{font-size:11.5px;font-weight:600;line-height:1.3;text-align:center;
  color:var(--ink2);word-break:normal;overflow-wrap:break-word;hyphens:auto}

/* The distribution view: one ring per item (Render\Analytics::dials).
   The three arcs are drawn from the counts as angles written into the markup,
   so the ring needs no script and cannot disagree with the text under it. */
.mcc-metric__rings{display:flex;flex-direction:column;gap:14px}
.mcc-metric__dials{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));gap:14px 10px}
.mcc-metric__dial{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;text-align:center}
.mcc-metric__ring{position:relative;display:grid;place-items:center;width:100%;max-width:62px;aspect-ratio:1;
  border-radius:50%;flex:0 0 auto;
  background:conic-gradient(var(--green) 0 var(--mcc-yes,0deg),
    var(--red) var(--mcc-yes,0deg) var(--mcc-no,0deg),
    var(--navy-700) var(--mcc-no,0deg) 360deg)}
.mcc-metric__ring::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--card)}
.mcc-metric__ringvalue{position:relative;z-index:1;font-size:14px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.mcc-metric__dial .mcc-metric__name{font-size:11.5px;font-weight:600;line-height:1.3;color:var(--ink2);
  word-break:normal;overflow-wrap:break-word;hyphens:auto}
.mcc-metric__dial .mcc-metric__rest{font-size:10.5px;line-height:1.4;color:var(--ink3)}
.mcc-metric__rings .mcc-metric__dir{margin:0 0 8px}

.mcc-metric__name a{color:inherit;text-decoration:underline;text-decoration-color:var(--t3);text-underline-offset:3px}
.mcc-metric__name a:hover{color:var(--accent-on);text-decoration-color:currentColor}
.mcc-metric__dir{margin:0;font-size:11px;font-weight:650;letter-spacing:.02em;color:var(--ink3)}
.mcc-metric__rest{color:var(--ink3);font-size:11.5px}
.mcc-metric__yes strong,.mcc-metric__cardfig strong,.mcc-metric__state strong{font-size:14px;font-weight:700;
  color:var(--ink);font-variant-numeric:tabular-nums}

/* One item, all its states: the compact module on an owner page. The ring the
   other views draw, beside its three counts. */
.mcc-metric__solo{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 16px}
.mcc-metric__solo+.mcc-metric__solo{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.mcc-metric__solo .mcc-metric__dir{grid-column:1/-1}
.mcc-metric__solo .mcc-metric__ring{width:74px;max-width:74px}
.mcc-metric__solotext{display:flex;flex-direction:column;gap:7px;min-width:0}
.mcc-metric__solo .mcc-metric__yes{margin:0;font-size:12.5px;color:var(--ink2)}
.mcc-metric__states{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px;
  font-size:12.5px;color:var(--ink2)}
.mcc-metric__state{display:inline-flex;align-items:baseline;gap:5px}
.mcc-metric__state .mcc-metric__key{margin-right:2px}

/* Summary cards: the same ring, with the way into the owner page beside it. */
.mcc-metric__cards{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr));gap:10px}
.mcc-metric__card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;
  padding:12px 13px;border:1px solid var(--line);border-radius:11px;background:var(--navy-850)}
.mcc-metric__card .mcc-metric__ring{width:50px;max-width:50px}
.mcc-metric__card .mcc-metric__ring::after{inset:7px;background:var(--navy-850)}
.mcc-metric__cardtext{display:flex;flex-direction:column;gap:3px;min-width:0}
.mcc-metric__cardname{font-size:13.5px;font-weight:650;color:var(--ink)}
.mcc-metric__cardname a{color:inherit;text-decoration:underline;text-decoration-color:var(--t3);text-underline-offset:3px}
.mcc-metric__cardname a:hover{color:var(--accent-on)}
.mcc-metric__cardfig{font-size:12px;color:var(--ink2)}

/* Emphasis on hover, never the only carrier: the figure and the name are
   always on screen. */
@media (hover:hover){
  .mcc-metric__plot:hover .mcc-metric__col,
  .mcc-metric__dials:hover .mcc-metric__dial{opacity:.55}
  .mcc-metric__plot:hover .mcc-metric__col:hover,
  .mcc-metric__dials:hover .mcc-metric__dial:hover{opacity:1}
}
.mcc-metric__col,.mcc-metric__dial{transition:opacity .18s ease}
@media (prefers-reduced-motion:reduce){.mcc-metric__col,.mcc-metric__dial{transition:none}}

.mcc-metric__basis{margin:14px 0 0;padding-top:11px;border-top:1px solid var(--line);font-size:11.5px;line-height:1.5;color:var(--ink3)}
.mcc-metric__how{margin-top:6px}
.mcc-metric__how>summary{display:inline-block;font-size:11.5px;color:var(--ink2);cursor:pointer;list-style:none;
  border-bottom:1px dotted var(--line2);padding-bottom:1px}
.mcc-metric__how>summary::-webkit-details-marker{display:none}
.mcc-metric__how>summary:hover{color:var(--accent-on);border-bottom-color:currentColor}
.mcc-metric__how>p{margin:8px 0 0;font-size:12px;line-height:1.6;color:var(--ink2);max-width:62ch}
.mcc-metric__more{margin:10px 0 0;font-size:13px;font-weight:600}
.mcc-metric__more a{color:var(--accent-on)}
.mcc-metric--thin .mcc-metric__basis{border-top:0;padding-top:0;margin-top:4px}

@media (max-width:660px){
  .mcc-metric{padding:15px 15px 13px;max-width:100%}
  .mcc-metric__head{flex-direction:column;gap:10px}
  /* The plot scrolls rather than the page. Seven columns cannot honestly share
     295px, and 66px is already the narrowest a method name reads at, so the
     chart keeps its own overflow and the page stays width-safe. */
  .mcc-metric__plot{--mcc-plot:88px;grid-auto-columns:minmax(78px,1fr);padding-bottom:6px;max-width:100%}
  .mcc-metric__dials{grid-template-columns:repeat(auto-fit,minmax(5.5rem,1fr));gap:12px 8px}
  .mcc-metric__cards{grid-template-columns:minmax(0,1fr)}
  .mcc-metric__solo{grid-template-columns:auto minmax(0,1fr);gap:6px 12px}
  .mcc-metric__solo .mcc-metric__ring{width:62px;max-width:62px}
}

/* ---- the homepage's ways in (Render\Discovery) ----------------------------
   Six tiles read from the owner registry: the hub, one line on what it
   answers, and the few pages under it a reader most often wants next. */
.mcc-hubs{margin:34px 0 8px}
.mcc-hubs__head{font-size:20px;font-weight:700;letter-spacing:-.015em;margin:0 0 14px}
.mcc-hubs__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mcc-hub{display:flex;flex-direction:column;gap:6px;padding:15px 16px 14px;border:1px solid var(--line);
  border-radius:13px;background:var(--card);transition:border-color .15s ease}
.mcc-hub:hover{border-color:var(--line2)}
.mcc-hub__lead{font-size:15.5px;font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.mcc-hub__lead:hover{color:var(--accent-on)}
.mcc-hub__blurb{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink2)}
.mcc-hub__more{list-style:none;margin:4px 0 0;padding:8px 0 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px}
.mcc-hub__more a{color:var(--ink2);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.mcc-hub__more a:hover{color:var(--accent-on);text-decoration-color:currentColor}
@media (max-width:900px){ .mcc-hubs__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .mcc-hubs__grid{grid-template-columns:minmax(0,1fr)} }

/* ---- fact rows and tables ------------------------------------------------ */
.mcc-facts{display:flex;flex-direction:column;gap:10px}
.mcc-fact{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--sunk)}
.mcc-fact__label{font-size:12.5px;color:var(--ink3);min-width:120px}
.mcc-fact__value{font-weight:600;color:var(--ink)}
.mcc-fact__value--absent{font-weight:400;color:var(--ink3)}

/* ---- tables -------------------------------------------------------------
   ONE TABLE SYSTEM, TWO VARIANTS (Render\Table).

   Cards convert, tables compare: a row is the casino's name in plain text and
   a few short values, with no logo, no link, no button and no date on every
   row. On a wide screen every table is a table: hairlines between rows, a
   darker rule under the header, no vertical borders and no frame. Every cell
   is top aligned with the same padding and line height, so a one-line row
   measures about 44px and the rules of neighbouring cells always meet. No
   rule here gives a th or td a flex or grid display.

   MATRIX (.mcc-table--matrix): a grid of short values. A table everywhere.
   RECORDS (.mcc-table--records): a row per casino with different facts. A
   table when its column is wider than 772px, one record per row at 772px or
   less. On a page that is the same as a window of 820px (phones and portrait
   tablets). In a review, whose column sits beside the sidebar, the tables are
   records at every width. One threshold, asked of the table's own box.
   Nothing else is a variant: the per-table class a renderer adds
   (mcc-table--trust, --wallets) is a hook for tests, not for style. */
/* Every table sits in its scroll box, and the box is the container the
   variants ask about: how wide the table's own column is, not the window. */
.mcc-table__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;container:mcc-table / inline-size}
.mcc-table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.45;
  font-variant-numeric:tabular-nums;background:none}
.mcc-table th,.mcc-table td{padding:11px 16px 11px 0;text-align:start;vertical-align:top;
  border-bottom:1px solid var(--line);color:var(--ink2)}
.mcc-table th:last-child,.mcc-table td:last-child{padding-inline-end:0}
.mcc-table thead th{padding-block:0 9px;font-size:11px;font-weight:700;line-height:1.3;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);vertical-align:bottom;
  border-bottom-color:var(--line2)}
.mcc-table tbody th{font-weight:650;color:var(--ink)}
.mcc-table__casino{font-weight:650;color:var(--ink)}
.mcc-table td strong{font-weight:650;color:var(--ink)}
.mcc-table td.is-unknown,.mcc-table__none{color:var(--ink3)}
/* Primary and secondary inside one value: the state or figure first, then a
   short qualifier in the quiet line under it. One secondary treatment only. */
.mcc-trust__state{display:block;font-weight:600;color:var(--ink)}
.mcc-table__note{display:block;margin-top:2px;font-size:12.5px;line-height:18px;font-weight:400;color:var(--ink3)}

/* Chips: static tokens for short names (methods, wallets, coins). One height
   that matches a line of text, one gap, no link and no hover. They wrap
   inside their value and never change the shape of the field. */
.mcc-table__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.mcc-table__chip{display:inline-block;padding:0 7px;border:1px solid var(--line);border-radius:999px;
  background:var(--sunk);font-size:12px;line-height:18px;color:var(--ink2);white-space:nowrap}

/* The note under a table: the date span, the legend and what every row
   shares, said once instead of on every row. */
.mcc-table__foot,.mcc-table__gap{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink3);max-width:78ch}

/* Three states in a fact matrix. The word carries the meaning; the dot only
   helps the eye find the column's pattern. */
.mcc-state{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-weight:600}
/* Inside a narrow column (a review's payment box beside the sidebar) a state
   wraps rather than pushing the table past its box. */
.mcc-table .mcc-state{white-space:normal;align-items:flex-start}
/* A matrix state is one word or two and stays on its line. */
.mcc-table--matrix .mcc-state{white-space:nowrap}
.mcc-table .mcc-state__mark{margin-top:6px}
.mcc-state__mark{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--ink3)}
.mcc-state--yes .mcc-state__mark{background:var(--green)}
.mcc-state--no{color:var(--ink2);font-weight:500}
.mcc-state--no .mcc-state__mark{background:transparent;box-shadow:inset 0 0 0 1.5px var(--red)}
.mcc-state--unknown{color:var(--ink3);font-weight:500}
.mcc-state--unknown .mcc-state__mark{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink3)}
.mcc-table--matrix{max-width:820px}
.mcc-table--matrix tbody th[scope="row"]{width:34%}

/* A review's record sheet: RECORDS written label-per-row, one record with no
   heading. The label column is quiet on every width. */
.mcc-table--sheet tbody th{width:30%;font-weight:500;color:var(--ink3)}

@container mcc-table (min-width:773px){
  /* A name on one line on a wide screen: "Casino en Chile" folding in two made
     its row the tallest in the table for no data reason. */
  .mcc-table__casino{white-space:nowrap}
}

/* ---- tables on a phone or a portrait tablet --------------------------------
   In a column of 772px or less a RECORDS table is one record per row, built from the same
   markup (data-label on every td, the name as the row header):

     divider
     Casino name                  the strongest text in the record
     Label        Value           one field per line, labels in one column,
     Label        Value           values on one axis, both top aligned
     Label        Chip Chip Chip  chips wrap inside the value, never below
                  Chip            the label
     divider

   The label column has one width for every table (Table::LABEL_LIMIT keeps
   labels to one line of it). The record rhythm is six tokens, and nothing
   else sets spacing inside a record:

     --rec-top     divider to name        --rec-field   field to field
     --rec-name    name to first field    --rec-line    one line of text
     --rec-bottom  last field to divider  --rec-label   label column

   The label floats in the cell's own left padding and the cell is its own
   formatting context, so a label that wraps pushes the next field down
   instead of running into it. No card, no background, no radius, no shadow:
   typography, spacing, one axis and one divider between records.

   A MATRIX stays a table and only tightens. */
@container mcc-table (max-width:772px){
  .mcc-table{--rec-top:16px;--rec-name:10px;--rec-field:8px;--rec-bottom:16px;--rec-line:20px;
    --rec-label:clamp(96px,32vw,120px);--rec-gap:12px}

  .mcc-table.mcc-table--records thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  .mcc-table.mcc-table--records,.mcc-table.mcc-table--records tbody,.mcc-table.mcc-table--records tr,
  .mcc-table.mcc-table--records th,.mcc-table.mcc-table--records td{display:block;width:auto}
  .mcc-table.mcc-table--records{border-top:1px solid var(--line)}
  .mcc-table.mcc-table--records tr{padding:var(--rec-top) 0 calc(var(--rec-bottom) - var(--rec-field) / 2);
    border-bottom:1px solid var(--line)}
  .mcc-table.mcc-table--records tbody th[scope="row"]{padding:0 0 calc(var(--rec-name) - var(--rec-field) / 2);
    border:0;font-size:16px;line-height:22px;font-weight:700;color:var(--ink)}
  .mcc-table.mcc-table--records td{display:flow-root;
    padding:calc(var(--rec-field) / 2) 0 calc(var(--rec-field) / 2) calc(var(--rec-label) + var(--rec-gap));
    border:0;font-size:14px;line-height:var(--rec-line);overflow-wrap:anywhere}
  .mcc-table.mcc-table--records td::before{content:attr(data-label);float:left;width:var(--rec-label);
    margin-inline-start:calc(-1 * (var(--rec-label) + var(--rec-gap)));
    font-size:13px;line-height:var(--rec-line);font-weight:500;color:var(--ink3);overflow-wrap:normal}

  /* The sheet: the row header is the label, so it takes the label column. */
  .mcc-table.mcc-table--records.mcc-table--sheet{border-top:0}
  .mcc-table.mcc-table--records.mcc-table--sheet tr{display:flow-root;
    padding:calc(var(--rec-field) / 2) 0;border:0}
  .mcc-table.mcc-table--records.mcc-table--sheet tbody th[scope="row"]{float:left;width:var(--rec-label);
    padding:0;font-size:13px;line-height:var(--rec-line);font-weight:500;color:var(--ink3)}
  /* Plain block, not flow-root: a new formatting context would sit beside the
     floated label and then add the label padding a second time. */
  .mcc-table.mcc-table--records.mcc-table--sheet td{display:block;padding:0 0 0 calc(var(--rec-label) + var(--rec-gap))}
  .mcc-table.mcc-table--records.mcc-table--sheet td::before{content:none}

  .mcc-table.mcc-table--matrix th,.mcc-table.mcc-table--matrix td{padding:9px 8px 9px 0;font-size:12.5px}
  .mcc-table.mcc-table--matrix thead th{font-size:9.5px;letter-spacing:.03em}
  .mcc-table.mcc-table--matrix tbody th[scope="row"]{width:auto}
  .mcc-table.mcc-table--matrix .mcc-state{gap:5px}
  /* A method row keeps its mark, at the size a narrow column can hold. */
  .mcc-table.mcc-table--matrix .mcc-pmark{--pmark-w:44px;--pmark-h:16px}
  .mcc-table.mcc-table--matrix .mcc-pay__name{gap:6px}
}

/* ---- callouts ------------------------------------------------------------ */
.mcc-callout{border-radius:12px;padding:14px 17px;margin-top:24px}
.mcc-callout p{margin:0 0 6px;font-size:12.5px;line-height:1.55}
.mcc-callout p:last-child{margin-bottom:0}
.mcc-callout--regulatory{background:var(--band);color:var(--onDeep2);border:1px solid var(--deepLine);
  border-radius:16px;padding:20px 24px}
.mcc-callout--regulatory strong{color:var(--onDeep)}
.mcc-callout--note{background:var(--sunk);border:1px solid var(--line);color:var(--ink2)}

.mcc-crumbs{font-size:12.5px;color:var(--onDeep2);margin:22px 0 0}
.mcc-crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.mcc-crumbs li + li::before{content:'/';margin-right:6px;color:var(--line2)}
.mcc-crumbs a{color:var(--onDeep2);text-decoration:none}
.mcc-crumbs a:hover{color:var(--accentOn)}
.mcc-empty{color:var(--onDeep2);font-size:13.5px}

/* ---- review -------------------------------------------------------------- */
.mcc-review__head{display:flex;gap:16px;align-items:flex-start;padding-bottom:22px;
  border-bottom:1px solid var(--line);margin-bottom:26px}
.mcc-review__id{min-width:0;flex:1}
.mcc-review__title{font-size:clamp(28px,3.6vw,40px);line-height:1.06;letter-spacing:-.03em;font-weight:750;margin:0 0 6px}
.mcc-review__lede{margin:6px 0 0;font-size:16px;line-height:1.55;color:var(--ink2);max-width:60ch}
.mcc-review__meta{margin:8px 0 0;font-size:12px;color:var(--ink3)}
.mcc-review__aside{flex:0 0 auto;width:200px;display:flex;flex-direction:column;gap:7px}
.mcc-review__aside .mcc-visit{justify-content:center}
.mcc-review__body>section{margin-top:34px}
.mcc-review__sources ul{margin:0;padding-left:18px;font-size:12.5px;color:var(--ink2)}
.mcc-review__sources a{word-break:break-word}
@media(max-width:719px){
  .mcc-review__head{flex-direction:column;gap:14px}
  .mcc-review__aside{width:100%}
}


/* ---- the review band ----------------------------------------------------
   The dark band means "this is the casino". MCC is not one, so it appears on a
   review and nowhere else -- never on the homepage, never on a hub. */
/* The review hero. The breadcrumb above it had no space of its own: the trail
   and the casino's name were touching, which read as one block instead of a
   place and then the thing in it. The room is given here rather than on the
   breadcrumb, because .mcc-band is the review's own hero and no other page
   has one, so no other layout moves. */
.mcc-band{margin-top:14px;background:var(--band);color:var(--onDeep);border:1px solid var(--deepLine);
  border-radius:16px;padding:28px 24px;box-shadow:var(--sh)}
@media(min-width:900px){.mcc-band{margin-top:22px;padding:34px 40px}}
.mcc-band__top{display:flex;gap:18px;align-items:flex-start}
.mcc-band__id{min-width:0;flex:1}
/* Nudged down to sit on the name's cap height rather than its line box. */
.mcc-band__mark{margin-top:6px;flex-shrink:0}
.mcc-band .mcc-mark{background:#22314E;border-color:var(--deepLine);color:var(--onDeep)}
.mcc-band__name{font-family:var(--sans);font-size:31px;line-height:1.06;letter-spacing:-.028em;font-weight:750;margin:0}
@media(min-width:900px){.mcc-band__name{font-size:46px}}
.mcc-band__line{margin:6px 0 0;font-size:13.5px;color:var(--onDeep2)}
.mcc-band__act{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.mcc-band__bonus{display:flex;flex-direction:column;gap:1px;text-align:end;margin-bottom:2px}
.mcc-band__bonuslabel{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--onDeep2)}
.mcc-band__bonusvalue{font-size:13px;font-weight:650;color:var(--onDeep);max-width:26ch}
@media(max-width:719px){.mcc-band__bonus{text-align:start}}
@media(max-width:719px){
  .mcc-band__top{flex-direction:column}
  .mcc-band__act{align-items:stretch;width:100%}
  .mcc-band__act .mcc-visit{justify-content:center}
}

/* ---- the review layout --------------------------------------------------- */
.mcc-layout{display:grid;grid-template-columns:1fr;gap:24px;margin-top:24px}
@media(min-width:900px){.mcc-layout{grid-template-columns:minmax(0,1fr) 320px;gap:32px}}
.mcc-main{min-width:0;display:flex;flex-direction:column;gap:24px}
.mcc-rail{display:flex;flex-direction:column;gap:16px;min-width:0}
.mcc-rail .mcc-card{padding:16px 18px}
/* ---- the rail: latest news, then three casinos -------------------------
   Secondary on purpose: small type, one picture at most, and it drops under
   the review below 900px in the same order. Not sticky. */
.mcc-rail .mcc-railmod{padding:15px 16px}
.mcc-page .mcc-railmod__head{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink3);margin:0 0 11px;padding:0;border:0}
.mcc-railmod ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mcc-railmod__more{display:block;margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
  font-size:12.5px;font-weight:700;color:var(--accentOn);text-decoration:none}
.mcc-railmod__more:hover{text-decoration:underline;text-underline-offset:3px}

.mcc-newsrail li{padding:10px 0;border-top:1px solid var(--line)}
.mcc-newsrail li:first-child{padding-top:0;border-top:0}
.mcc-newsrail li a{display:block;text-decoration:none;color:var(--ink)}
.mcc-newsrail__shot{display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid var(--line);margin-bottom:9px}
.mcc-newsrail__shot .mcc-news__ph span{font-size:20px}
.mcc-newsrail__title{display:block;font-size:13.5px;line-height:1.35;font-weight:650}
.mcc-newsrail li a:hover .mcc-newsrail__title{color:var(--accentOn)}
.mcc-newsrail time{display:block;margin-top:4px;font-size:11.5px;color:var(--ink3)}

.mcc-picks ul{gap:9px}
.mcc-pick{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 11px;align-items:center;
  padding:10px;border:1px solid var(--line);border-radius:11px}
.mcc-pick__body{min-width:0}
.mcc-pick__name{display:block;font-size:14px;font-weight:700;color:var(--ink);text-decoration:none}
.mcc-pick__name:hover{color:var(--accentOn)}
.mcc-pick__bonus{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:var(--ink2)}
.mcc-pick__act{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:6px;padding-top:9px;border-top:1px solid var(--line)}
.mcc-pick__act .mcc-visit{font-size:12px;padding:7px 12px}
.mcc-pick__review{font-size:12px;font-weight:600;color:var(--ink2);text-decoration:underline;
  text-decoration-color:var(--line2);text-underline-offset:3px}
.mcc-pick__review:hover{color:var(--ink)}
@media(max-width:899px){ .mcc-rail .mcc-railmod{padding:16px 17px} }

/* A section card carries its own label, so a reader learns the shape once. */
.mcc-section__label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3);display:block}
.mcc-verdict{margin:0;padding:4px 20px}
@media(min-width:900px){.mcc-verdict{padding:4px 24px}}
.mcc-verdict p{font-size:16.5px;line-height:1.55;letter-spacing:-.006em;font-weight:500;
  margin:0 0 12px;max-width:60ch;color:var(--ink)}

/* ---- directory ----------------------------------------------------------- */
/* El panel de filtros vive al final de la hoja, junto al directorio. */
.mcc-count{font-size:12.5px;color:var(--onDeep2);margin-bottom:14px}

/* ---- footer -------------------------------------------------------------
   One system, in one order: identity and navigation, a hairline, the market's
   resources, then the obligations. Nothing above it repeats any of this. */
.mcc-footer{margin-top:66px;padding:34px 0 40px;border-top:1px solid var(--deepLine);background:var(--deep)}
.mcc-footer__top{display:grid;gap:30px}
.mcc-footer__id{max-width:52ch}
.mcc-logo--foot{font-size:19px;color:var(--onDeep)}
.mcc-footer__note{font-size:12.5px;color:var(--onDeep2);margin:8px 0 0;line-height:1.5}
/* Contacto. Un rotulo pequeno y la direccion, nada mas. Deliberadamente sin
   boton ni recuadro: es informacion institucional, del mismo peso que la nota
   de arriba, y un CTA aca competiria con el unico boton que importa en la
   pagina. El rotulo es un h2 por estructura, asi que hay que devolverle el
   tamano que el tema le da a un titulo. */
.mcc-footer__contact{margin:16px 0 0}
.mcc-footer__contacthead{font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--onDeep3,var(--onDeep2));
  margin:0;padding:0;border:0;line-height:1.3}
/* El rotulo es el enlace. Hereda todo del h2 para que siga leyendose como un
   rotulo y no como un enlace mas del pie, y se subraya al pasar por encima
   para que se note que lleva a alguna parte. */
.mcc-footer__contacthead a{color:inherit;text-decoration:none}
.mcc-footer__contacthead a:hover,.mcc-footer__contacthead a:focus-visible{
  color:var(--onDeep);text-decoration:underline;text-underline-offset:3px}
.mcc-footer__mail{display:inline-block;margin:5px 0 0;font-size:13.5px;line-height:1.35;
  color:var(--onDeep2);text-decoration:none;word-break:break-word}
.mcc-footer__mail:hover,.mcc-footer__mail:focus-visible{color:var(--onDeep);
  text-decoration:underline;text-underline-offset:3px}
/* The publication's links: two short lists with no headings, beside the brand
   on a wide screen and under it below that. One column on a phone, each link
   a full-height tap target. */
.mcc-footer__nav{display:grid;grid-template-columns:repeat(2,max-content);gap:0 48px;align-content:start}
@media (min-width:900px){
  .mcc-footer__top{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:48px}
}
@media (max-width:599px){ .mcc-footer__nav{grid-template-columns:1fr} }
.mcc-footer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;min-width:0}
.mcc-footer__nav a{font-size:13.5px;line-height:1.35;color:var(--onDeep2);text-decoration:none}
.mcc-footer__nav a:hover,.mcc-footer__nav a:focus-visible{color:var(--onDeep);text-decoration:underline}
.mcc-footer__copy{margin:18px 0 0;font-size:12px;color:var(--onDeep2)}

/* The resource strip. Flat, with hairline separators between items -- not four
   chunky cards. Nothing here says certified, approved, verified, partner or
   endorsed, because none of those words would be true of a review site. */
/* Deliberately not a certification strip: nothing here says certified,
   approved, verified, partner or endorsed, because none of those would be
   true of a review site. Each slot is the organisation itself, captioned
   with what it does. A slot with no asset shows its name as type; nothing
   is ever substituted for a missing mark. */
.mcc-resources{margin-top:30px;padding-top:24px;border-top:1px solid var(--deepLine)}
.mcc-resources__head{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--onDeep2);margin:0 0 8px}
.mcc-resources__note{margin:0 0 18px;font-size:12.5px;line-height:1.55;color:var(--onDeep2);max-width:78ch}
.mcc-resources__list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.mcc-resources__list > li + li{border-inline-start:1px solid var(--deepLine)}
.mcc-resources__link{display:flex;flex-direction:column;gap:8px;text-decoration:none;padding:4px 20px}
.mcc-resources__list > li:first-child .mcc-resources__link{padding-inline-start:0}
/* The strip stays navy and all three marks share one treatment: the same
   normalised canvas and the same reversible filter the payment marks use.
   None of them is boxed, and none of them is an exception. */
.mcc-resources__markbox{display:flex;align-items:center;justify-content:center;
  height:38px;margin-bottom:10px}
.mcc-resources__mark{max-height:100%;max-width:112px;width:auto;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.78;
  transition:opacity .2s ease,filter .2s ease}
.mcc-resources__link:hover .mcc-resources__mark,
.mcc-resources__link:focus-visible .mcc-resources__mark{filter:none;opacity:1}
/* Same documented exception, same reason: a solid block cannot be flattened. */
.mcc-resources__mark--colour{filter:none;opacity:.88}
/* The fallback sits on the navy strip, like the marks beside it. */
.mcc-resources__wordmark{font-size:14px;font-weight:750;letter-spacing:-.015em;
  color:var(--onDeep2);text-align:center;line-height:1.2;transition:color .18s ease}
.mcc-resources__link:hover .mcc-resources__wordmark,
.mcc-resources__link:focus-visible .mcc-resources__wordmark{color:var(--onDeep)}
.mcc-resources__caption{font-size:11.5px;line-height:1.45;color:var(--onDeep2);opacity:.82}
.mcc-resources__phone{font-size:12px;color:var(--onDeep2);font-variant-numeric:tabular-nums}

/* The obligations: a circular badge, the copy beside it, a hairline, then the
   disclosure. The family's anatomy in this market's colours. */
.mcc-footer .mcc-callout--regulatory{margin-top:30px}
.mcc-rg{display:flex;align-items:flex-start;gap:16px}
.mcc-rg__badge{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:1.5px solid var(--onDeep2);color:var(--onDeep);font-size:14px;font-weight:800;letter-spacing:-.01em}
.mcc-rg__body{min-width:0}
.mcc-rg__lead{margin:0;font-size:13.5px;line-height:1.5;color:var(--onDeep)}
.mcc-rg__help{margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--onDeep2)}
/* Selector carries .mcc-callout deliberately: the generic `.mcc-callout p`
   reset out-specifies a lone class and was collapsing this top margin to zero,
   which pinned the hairline to the text above it. The two gaps are set so the
   line reads as centred between the groups once line-height leading is
   accounted for, rather than being numerically equal. */
.mcc-callout .mcc-rg__disclosure{margin:18px 0 0;padding-top:16px;
  border-top:1px solid var(--deepLine);font-size:12px;line-height:1.55;color:var(--onDeep2)}

@media (max-width:900px){
  .mcc-hero{padding:34px 0 4px}
  .mcc-hero__body{font-size:15.5px}
  .mcc-hero__eyebrow{margin-bottom:11px}
  .mcc-hero__head{letter-spacing:-.032em}
  .mcc-hero__acts{gap:9px}
  .mcc-footer__top{gap:24px}
  .mcc-footer__list{gap:0}
  .mcc-footer__nav a{display:block;padding-block:11px}
  .mcc-resources__list{grid-template-columns:1fr}
  .mcc-resources__list > li + li{border-inline-start:0;border-top:1px solid var(--deepLine)}
  .mcc-resources__link{padding:14px 0}
  .mcc-resources__list > li:first-child .mcc-resources__link{padding-top:0}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{ .mcc-nav,.mcc-footer,.mcc-visit,.mcc-cmp__chooser{display:none!important} body{background:#fff} }

/* ============================================================================
   Components ported from the reference implementation. Same anatomy, same
   measurements; only the palette and the copy differ.
   ========================================================================== */

/* ---- the compact three-card cluster -------------------------------------
   A preview module is one unit: rule, heading, explanation, casinos. The rule
   is the module's own top border, so it can only ever fall BETWEEN modules --
   never between a paragraph and the cards it introduces. */
.mcc-cards{margin-top:38px;padding-top:19px;border-top:1px solid var(--deepLine)}
.mcc-cards .mcc-site__head{margin-bottom:7px}
.mcc-cards__intro{margin:0 0 14px;font-size:15px;line-height:1.62;color:var(--onDeep2);max-width:66ch}
.mcc-cards__grid{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
/* Grid children default to min-width:auto, so a nowrap line inside one sets the
   whole track's minimum and the grid refuses to shrink to its column. */
.mcc-ccard > *{min-width:0}
/* Every card in a cluster shares one set of row tracks: header, description,
   bonus, actions. A longer description grows that row in all three cards at
   once, so the CTAs never drift out of line with each other. */
.mcc-cards__grid{grid-auto-rows:1fr}
.mcc-ccard{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:8px;padding:17px;background:var(--card);
  border:1px solid var(--line);border-radius:13px;text-decoration:none;color:var(--ink);
  box-shadow:var(--sh);transition:border-color .12s,box-shadow .15s,transform .12s}
.mcc-ccard:hover{border-color:var(--line2);box-shadow:var(--shh);transform:translateY(-1px)}
.mcc-ccard__mark{display:flex;align-items:center;height:34px}
@media(max-width:660px){.mcc-cards__grid{grid-auto-rows:auto}}
.mcc-ccard__name{font-size:15.5px;font-weight:750;letter-spacing:-.015em;color:var(--t1)}
.mcc-ccard__reg{font-size:12.5px;color:var(--t2);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.mcc-ccard__foot{display:grid;gap:9px;padding-top:11px;border-top:1px solid var(--line);margin-top:auto}
.mcc-ccard__bonus{display:grid;gap:2px;min-height:38px}
.mcc-ccard__bonuslabel{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.mcc-ccard__bonusvalue{font-size:12.5px;font-weight:650;line-height:1.35;color:var(--t1);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.mcc-ccard__bonusvalue--absent{font-weight:500;color:var(--t3)}
.mcc-ccard__act{display:grid;gap:7px;justify-items:stretch}
.mcc-ccard__act .mcc-visit{width:100%;justify-content:center}
/* The card is an article, not a link, so a Visit anchor can sit inside it. The
   review link stretches over the card; the CTA is raised above so it stays
   independently clickable. */
.mcc-ccard__go{font-size:12px;font-weight:650;color:var(--t2);white-space:nowrap;text-decoration:none;text-align:center}
.mcc-ccard__go:hover{color:var(--accent-on)}
.mcc-ccard__go::after{content:"";position:absolute;inset:0;z-index:0}
.mcc-ccard__act .mcc-visit{position:relative;z-index:1;font-size:12.5px;padding:7px 13px;white-space:nowrap}

/* ---- FAQ ----------------------------------------------------------------- */
.mcc-faq{margin-top:42px;padding-top:20px;border-top:1px solid var(--deepLine)}
.mcc-faq__list{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.mcc-faq__item{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh)}
.mcc-faq__item > summary{padding:15px 18px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px}
.mcc-faq__item > summary::-webkit-details-marker{display:none}
.mcc-faq__item > summary::after{content:'';margin-left:auto;width:8px;height:8px;flex:0 0 auto;
  border-right:1.6px solid var(--ink3);border-bottom:1.6px solid var(--ink3);
  transform:rotate(45deg);transition:transform .18s ease}
.mcc-faq__item[open] > summary::after{transform:rotate(225deg)}
.mcc-faq__q{margin:0;font-family:var(--sans);font-size:14.5px;font-weight:700;letter-spacing:-.012em}
.mcc-faq__a{padding:0 18px 16px}
.mcc-faq__a p{margin:0 0 10px;font-size:14.5px;line-height:1.6;color:var(--ink2);max-width:70ch}
.mcc-faq__a p:last-child{margin:0}

/* ---- editorial research / author ----------------------------------------- */
.mcc-author{margin-top:44px;padding:22px 22px 20px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--sh)}
.mcc-author__label{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:14px}
.mcc-author__research{margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.55;color:var(--ink3);max-width:74ch}
.mcc-author--house .mcc-author__label{margin-bottom:8px;font-size:13px;letter-spacing:-.01em;
  text-transform:none;font-weight:700;color:var(--ink)}
.mcc-author--house .mcc-author__research{border-top:0;padding-top:0;margin-top:6px}

/* ---- payment marks -------------------------------------------------------
   ONE SLOT. Every method occupies the same transparent box on every surface,
   whether it has artwork or not, and whether that artwork is a wide wordmark
   or a square badge. There is no per-method background, border, plate or
   size, and there is no per-brand rule anywhere in this file.

   Two things carry that:

   - The artwork is a presentation variant drawn on a shared 240x80 canvas
     with its ink scaled to a constant optical area (generated offline; the
     originals are untouched). Every variant therefore has the same intrinsic
     ratio, so `object-fit:contain` lands every mark on the same rendered box
     and no logo can dominate another by being a wider file.
   - The dark-surface treatment is a filter applied to ALL marks equally:
     flattened to the surface's own light tone at rest, released to the real
     artwork on hover or keyboard focus. It is presentation only and fully
     reversible -- no asset is altered. */
.mcc-pmark{--pmark-h:20px;--pmark-w:58px;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  height:var(--pmark-h);width:var(--pmark-w);padding:0;background:none;border:0}
.mcc-pmark__img,.mcc-pmark img{display:block;max-height:100%;max-width:100%;
  width:auto;height:auto;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.82;
  transition:filter .18s ease,opacity .18s ease}
/* Colour is the hover reward, never the resting state, so a row of marks
   reads as one set instead of fourteen competing brands. */
@media (hover:hover) and (pointer:fine){
  .mcc-pmark:hover .mcc-pmark__img,
  .mcc-pmark:hover img{filter:none;opacity:1}
}
a:focus-visible .mcc-pmark__img,
li:focus-within .mcc-pmark__img{filter:none;opacity:1}
/* The documented exception (see PaymentMark::KEEP_COLOUR): a solid-fill mark
   would flatten to a featureless block, so it keeps its artwork. Same slot,
   same optical size -- only the colours differ. */
.mcc-pmark--colour .mcc-pmark__img,.mcc-pmark--colour img{filter:none;opacity:.92}
.mcc-pmark--colour:hover .mcc-pmark__img,.mcc-pmark--colour:hover img{opacity:1}
/* A fallback shares the component, the height and the baseline -- but not the
   artwork's fixed width. A logo's box is a picture frame; a name is a word,
   and forcing "Tarjeta de credito" through a 52px frame clipped it and broke
   it mid-word ("CuentaR / UT"). So the width goes auto, the text never wraps,
   and a name too long for the row is carried out by the existing +N rule
   rather than being chopped up. Still transparent, still no badge. */
.mcc-pmark--text{width:auto;min-width:0;max-width:100%;padding:0 2px;
  font-size:10.5px;font-weight:650;letter-spacing:.005em;
  color:var(--t2);line-height:1.15;text-align:center}
.mcc-pmark__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:15ch;word-break:normal;overflow-wrap:normal}
.mcc-pay__name{display:flex;align-items:center;gap:10px;min-width:0}
/* No artwork means no mark to sit beside, so no gutter is reserved. */
.mcc-pay__name--text{gap:0}
/* Una sola representación por método: el logo, o el nombre. Sin hueco donde
   estaba la etiqueta que ya no está. */
.mcc-pay__name--mark{gap:0}
.mcc-pay__label{font-weight:650;font-size:13px;min-width:0}

/* ---- how we rank ---------------------------------------------------------
   A grid of what we look at. Deliberately flat: no numbers, no weights, no
   ordering, because the section's whole claim is that no such arithmetic
   exists. The policy sits at the end on its own surface so the reader who
   scans the boxes still meets it. */
/* Subsections are separated by a rule and space, the way the reference
   edition separates "What decides the order" from the prose above it -- not by
   nesting another panel inside the section. */
.mcc-method__block{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.mcc-method__head{margin:0 0 4px;font-family:var(--sans);font-size:15px;font-weight:700;
  letter-spacing:-.012em;color:var(--ink)}
.mcc-method__lead{margin:0 0 14px;font-size:13.5px;color:var(--ink2);max-width:70ch}
/* Separate cells with gaps between them, like the reference's criteria grid,
   rather than one hairline-divided slab. */
.mcc-method__grid{list-style:none;margin:0;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.mcc-method__item{background:var(--navy-800);border:1px solid var(--line);
  border-radius:10px;padding:11px 13px}
.mcc-method__name{margin:0 0 4px;font-size:13px;font-weight:700;letter-spacing:-.005em;color:var(--ink)}
.mcc-method__body{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink2)}
.mcc-method__policy{border-inline-start:3px solid var(--accent);padding-inline-start:14px}
.mcc-method__rule{margin:0 0 6px;font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.mcc-method__policy .mcc-method__body{max-width:78ch}

/* ---- payment method directory --------------------------------------------
   Every rail we have actually confirmed, with its coverage. Compact cards on
   the navy scale: the mark is the thing being recognised, so it leads, and
   nothing here sits on a light plate unless the artwork demands one. */
.mcc-methods__grid{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}
.mcc-mcard{display:flex;flex-direction:column;background:var(--navy-800);
  border:1px solid var(--line);border-radius:11px;padding:12px 15px 14px;
  transition:border-color .18s ease,transform .18s ease}
.mcc-mcard:hover{border-color:var(--line2);transform:translateY(-1px)}
/* A fixed area, so every card's name starts at the same y no matter what
   shape the artwork is. */
.mcc-mcard__mark{display:flex;align-items:center;justify-content:flex-start;
  height:34px;margin-bottom:10px}
.mcc-mcard__mark .mcc-pmark{--pmark-h:24px;--pmark-w:88px}
.mcc-mcard__name{margin:0 0 4px;font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.mcc-mcard__count{margin:0;font-size:12px;line-height:1.45;color:var(--ink2)}
.mcc-mcard__out{margin:2px 0 0;font-size:11.5px;line-height:1.45;color:var(--ink3)}
.mcc-mcard__out--none{opacity:.8}
.mcc-mcard__go{margin-top:10px;font-size:12px;font-weight:700;color:var(--accent-on);
  text-decoration:none}
.mcc-mcard:hover .mcc-mcard__go{text-decoration:underline;text-underline-offset:3px}
.mcc-methods__note{margin:14px 0 0;font-size:12px;line-height:1.55;color:var(--ink3);max-width:80ch}

@media(max-width:520px){
  .mcc-methods__grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
}

/* ---- deposits vs withdrawals -------------------------------------------
   Two columns, never one list. The count sits in the heading so the asymmetry
   is readable before a single logo is examined: "12 / 3" is the whole story on
   some casinos. An unestablished side prints a sentence, not an empty box. */
.mcc-dirs{display:grid;gap:10px;margin:0 0 14px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.mcc-dirs__side{background:var(--navy-800);border:1px solid var(--line);
  border-radius:11px;padding:12px 14px}
.mcc-dirs__head{display:flex;align-items:baseline;gap:8px;margin:0 0 9px;
  font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.mcc-dirs__count{margin-inline-start:auto;font-size:15px;font-weight:750;
  letter-spacing:-.01em;color:var(--ink);text-transform:none}
.mcc-dirs__chips{margin:0}
.mcc-dirs__none{margin:0;font-size:12px;line-height:1.5;color:var(--ink3)}
.mcc-dirs__stale{margin:10px 0 0;padding:9px 12px;border-radius:8px;
  background:var(--amberBg);border:1px solid var(--amberLn);
  font-size:12px;line-height:1.5;color:var(--amber)}

/* ---- review media -------------------------------------------------------- */
/* One screenshot per row, the full width of the section: a desktop capture
   shrunk to a third of the column is a thumbnail nobody can read. */
.mcc-shots{display:grid;gap:14px;margin:16px 0 0;grid-template-columns:1fr}
.mcc-shot{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--sunk)}
.mcc-shot img{display:block;width:100%;height:auto}
.mcc-shot figcaption{padding:7px 10px;font-size:11.5px;line-height:1.4;color:var(--ink3);border-top:1px solid var(--line)}
.mcc-shot--tall img{aspect-ratio:9/16;object-fit:cover;object-position:top center}

@media(max-width:660px){
  .mcc-cards__grid{grid-template-columns:1fr}
}

/* A preview module nests under its section in the contents, so the reader can
   see which entries are destinations of their own. */
.mcc-toc__sub{margin-inline-start:16px}
.mcc-toc__sub a{color:var(--ink3)}

/* ---- the market map ------------------------------------------------------
   South America with Chile picked out. Geography only: it says where the
   market is, never what is permitted there. */
.mcc-map{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.mcc-map__svg{display:block;width:100%;max-width:230px;height:auto}
.mcc-map__other{fill:var(--navy-800);stroke:var(--navy-700);stroke-width:.8;
  transition:fill .2s ease}
.mcc-map__cl{fill:var(--accent);stroke:var(--accent-on);stroke-width:1;
  transition:fill .2s ease,filter .2s ease}
.mcc-map__cap{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.mcc-map__name{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-on)}
.mcc-map__note{font-size:11.5px;color:var(--t3);max-width:24ch;line-height:1.4}

/* Per-country hover, on fine pointers only.
   This is a geographic microinteraction and nothing more: no country is
   named, none is clickable, none carries a tooltip, and hovering one never
   moves it toward the market accent. Chile is the only country with the
   accent fill and it keeps it in every state, so a lit-up neighbour can never
   be read as "we cover this market too". Only fill and stroke change -- no
   transform, because scaling one country opens a gap along its borders. */
@media (hover:hover) and (pointer:fine){
  .mcc-map__other:hover{fill:var(--navy-700);stroke:var(--navy-600);stroke-width:1}
  .mcc-map__cl:hover{fill:var(--accentHot);stroke:#fff}
}
/* One entrance, never a loop. */
@media (prefers-reduced-motion:no-preference){
  .mcc-map__cl{animation:mcc-map-in .5s ease-out both}
  @keyframes mcc-map-in{from{opacity:.25}to{opacity:1}}
}
/* Below the two-column breakpoint the map stacks under the hero copy instead
   of being dropped. It is the market's identity, so it belongs on a phone as
   much as on a desktop -- just smaller, centred, and sized so the hero does
   not turn into a full screen of map. The hover behaviour is unchanged and
   still gated on a fine pointer, so touch simply gets the static map. */
@media (max-width:899px){
  .mcc-hero--mapped .mcc-hero__aside{display:flex;justify-content:center;margin-top:4px}
  /* South America is a portrait shape, so width drives height: 220px of map
     is ~325px tall. That is the cost of keeping it on a phone. */
  .mcc-map__svg{max-width:220px}
  .mcc-map__cap{max-width:30ch}
  .mcc-map__note{font-size:11px;max-width:28ch}
}
@media (min-width:600px) and (max-width:899px){
  .mcc-map__svg{max-width:240px}
}

/* ---- SEO/GEO pages: the direct answer -----------------------------------
   The passage a reader lands on and an answer engine lifts. It sits above the
   first heading, so it is deliberately NOT a card: a box here would read as an
   ad unit at the top of the page. A rule and a size step do the work instead. */
.mcc-answer{margin:22px 0 0;padding:0 0 0 16px;border-left:3px solid var(--accent);
  display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.mcc-answer__mark{display:flex;align-items:center;margin-bottom:1px}
.mcc-answer__mark .mcc-pmark{--pmark-h:32px;--pmark-w:120px}
.mcc-answer__lead{margin:0;font-size:18px;line-height:1.5;letter-spacing:-.015em;
  color:var(--ink);max-width:58ch;font-weight:500}
.mcc-answer__lead strong{font-weight:750;color:var(--ink)}
.mcc-answer__note{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink3);max-width:66ch}
@media(min-width:900px){
  .mcc-answer{padding-left:20px}
  .mcc-answer__lead{font-size:20px}
}


/* ---- the lists that are not tables --------------------------------------
   Used where a table would be four columns of the same word. */
.mcc-outlist,.mcc-minlist,.mcc-gaps{list-style:none;margin:14px 0 0;padding:0;
  display:flex;flex-direction:column;gap:8px}
.mcc-outlist__item,.mcc-minlist li{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;padding:9px 0;border-bottom:1px solid var(--line);max-width:60ch}
.mcc-outlist__item a,.mcc-minlist li a{font-weight:650;color:var(--ink);text-decoration:none}
.mcc-outlist__item a:hover,.mcc-minlist li a:hover{color:var(--accent-on);text-decoration:underline;text-underline-offset:3px}
.mcc-outlist__time{font-size:12.5px;color:var(--ink2);white-space:nowrap}
.mcc-outlist__time.is-unknown{color:var(--ink3)}
.mcc-minlist li strong{font-size:13.5px;font-weight:750;color:var(--ink);white-space:nowrap}
.mcc-gaps li{position:relative;padding-left:17px;font-size:13.5px;line-height:1.6;
  color:var(--ink2);max-width:70ch}
.mcc-gaps li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--line2)}
.mcc-mpage__exits{margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--ink2);max-width:70ch}
.mcc-mpage__exits strong{color:var(--ink);font-weight:650}

/* ---- who operates what --------------------------------------------------
   Cards, because each group is a self-contained finding rather than a row in a
   sequence. Same surface and radius as every other card on the site. */
.mcc-ops__grid{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px;
  grid-template-columns:1fr}
@media(min-width:620px){.mcc-ops__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.mcc-ops__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mcc-opcard{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px 17px;display:flex;flex-direction:column;box-shadow:var(--sh)}
.mcc-opcard__name{margin:0;font-size:14.5px;font-weight:750;letter-spacing:-.015em;color:var(--ink)}
.mcc-opcard__count{margin:3px 0 0;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink3)}
.mcc-opcard__brands{list-style:none;margin:12px 0 0;padding:0;display:flex;
  flex-direction:column;gap:6px}
.mcc-opcard__brands a{font-size:13.5px;font-weight:650;color:var(--ink);text-decoration:none}
.mcc-opcard__brands a:hover{color:var(--accent-on);text-decoration:underline;text-underline-offset:3px}
.mcc-opcard__licence{margin:13px 0 0;padding-top:11px;border-top:1px solid var(--line);
  font-size:11.5px;line-height:1.5;color:var(--ink2)}
.mcc-opcard__licence.is-unknown{color:var(--ink3)}

/* The sibling note inside a review. */
.mcc-siblings{margin:22px 0 0;padding:14px 16px;background:var(--sunk);
  border:1px solid var(--line);border-radius:12px}
.mcc-siblings p{margin:5px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink2)}
.mcc-siblings a{color:var(--ink);font-weight:650;text-decoration:none}
.mcc-siblings a:hover{color:var(--accent-on);text-decoration:underline;text-underline-offset:3px}
.mcc-siblings__more{color:var(--accent-on)!important;font-weight:650}

@media(max-width:520px){
  .mcc-answer__lead{font-size:16.5px}
  .mcc-outlist__item,.mcc-minlist li{flex-direction:column;gap:3px;align-items:flex-start}
}

/* One sentence of internal links under the payment directory on the homepage. */
.mcc-home__links{margin:26px 0 0;font-size:14.5px;line-height:1.65;color:var(--ink2);max-width:70ch}
.mcc-home__links a{color:var(--ink);font-weight:650;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--line2)}
.mcc-home__links a:hover{color:var(--accent-on);text-decoration-color:currentColor}

/* A heading an editor typed between two blocks has to carry the same rule and
   the same air as a heading a block drew, or the page reads as two documents
   stapled together at the seam. */
.wp-block-heading.mcc-site__head{margin:42px 0 0;padding-top:20px;
  border-top:1px solid var(--deepLine)}
.wp-block-heading.mcc-site__head + .wp-block-paragraph{margin-top:12px}

/* Editor prose gets the same measure as block prose. Full-width paragraphs
   next to 66ch intros read as a different page. */
.mcc-wrap > p.wp-block-paragraph{max-width:70ch;line-height:1.68;color:var(--ink2)}

/* ---- ofertas sin depósito -----------------------------------------------
   Una tarjeta, no una landing. Usa la misma superficie, el mismo radio y la
   misma sombra que el resto del sitio: lo único que la distingue es una regla
   de acento a la izquierda, igual que la respuesta corta de las páginas de
   método. La oferta tiene que destacar sin dejar de parecer una publicación. */
.mcc-ndcard{position:relative;background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:14px;padding:18px 20px 16px;
  box-shadow:var(--sh);margin-top:16px}
.mcc-ndcard__flag{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;
  font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--green);
  background:var(--greenBg);border:1px solid var(--greenLn);border-radius:999px;
  padding:4px 10px;margin-bottom:12px}
.mcc-ndcard__top{display:flex;align-items:center;gap:13px}
.mcc-ndcard__top .mcc-mark{width:44px;height:44px;border-radius:11px}
.mcc-ndcard__top .mcc-mark--logo{width:auto;max-width:160px}
.mcc-ndcard__id{min-width:0}
.mcc-ndcard__name{margin:0;font-size:17px;font-weight:750;letter-spacing:-.02em;color:var(--ink)}
.mcc-ndcard__offer{margin:2px 0 0;font-size:14.5px;line-height:1.4;color:var(--accent-on);font-weight:650}
.mcc-ndcard__terms{display:grid;grid-template-columns:1fr;gap:0;margin:15px 0 0;
  border-top:1px solid var(--line)}
.mcc-ndcard__term{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.mcc-ndcard__term dt{margin:0;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.mcc-ndcard__term dd{margin:0;font-size:14px;font-weight:650;color:var(--ink);text-align:end}
.mcc-ndcard__act{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:15px}
.mcc-ndcard__review{font-size:13px;font-weight:650;color:var(--accent-on);text-decoration:none}
.mcc-ndcard__review:hover{text-decoration:underline;text-underline-offset:3px}
.mcc-ndcard__checked{margin:13px 0 0;font-size:11.5px;line-height:1.5;color:var(--ink3)}
.mcc-ndcard__checked a{color:var(--ink2)}
.mcc-nd__note{margin:14px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink3);max-width:74ch}

/* El recuento. Tres filas, la cifra manda y la nota explica qué significa. */
.mcc-ndtally{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:1px}
.mcc-ndtally__row{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;
  align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line)}
.mcc-ndtally__n{grid-row:span 2;font-size:30px;font-weight:750;letter-spacing:-.03em;
  color:var(--ink);min-width:2.2ch;text-align:end;font-variant-numeric:tabular-nums}
.mcc-ndtally__label{font-size:14.5px;font-weight:650;color:var(--ink)}
.mcc-ndtally__note{font-size:12.5px;line-height:1.55;color:var(--ink3);max-width:62ch}

@media(min-width:700px){
  .mcc-ndcard{padding:22px 24px 18px}
  .mcc-ndcard__terms{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:26px}
  .mcc-ndcard__name{font-size:19px}
  .mcc-ndcard__offer{font-size:16px}
}
@media(max-width:520px){
  .mcc-ndcard__term{flex-direction:column;gap:2px;align-items:flex-start}
  .mcc-ndcard__term dd{text-align:start}
  .mcc-ndcard__act .mcc-visit{width:100%;justify-content:center}
  .mcc-ndtally__n{font-size:26px}
}

/* Subtítulo dentro de una sección de prosa. Sin regla, porque la regla marca
   el cambio de sección y esto es una parada dentro de ella. */
.wp-block-heading.mcc-sub{margin:26px 0 0;font-size:17px;line-height:1.25;
  letter-spacing:-.02em;font-weight:750;color:var(--ink)}
.wp-block-heading.mcc-sub + .wp-block-paragraph{margin-top:8px}
@media(min-width:900px){.wp-block-heading.mcc-sub{font-size:18.5px;margin-top:30px}}

/* Listas del editor: mismo ritmo que los bullets de los bloques. */
.mcc-wrap > ul.mcc-bul,.mcc-wrap > ol.mcc-steps{margin:12px 0 0;padding-left:22px;
  max-width:70ch;display:flex;flex-direction:column;gap:7px}
.mcc-wrap > ul.mcc-bul li,.mcc-wrap > ol.mcc-steps li{font-size:15px;line-height:1.62;color:var(--ink2)}
.mcc-wrap > ul.mcc-bul li strong,.mcc-wrap > ol.mcc-steps li strong{color:var(--ink);font-weight:650}
.mcc-wrap > ol.mcc-steps li::marker{color:var(--accent-on);font-weight:750}

/* Grupos de giros: dos tablas, no una lista ordenada por cifra. */
.mcc-ndgroup{margin:26px 0 0;font-size:16px;font-weight:750;letter-spacing:-.015em;color:var(--ink)}
.mcc-ndgroup__note{margin:4px 0 10px;font-size:13px;line-height:1.55;color:var(--ink3);max-width:70ch}


/* La insignia de la tarjeta compartida. Misma familia que el resto: no cambia
   la anatomía, solo se apoya arriba a la izquierda del marco existente. */
.mcc-rank__card{position:relative}
.mcc-rank__badge{display:inline-flex;align-items:center;font-size:10.5px;font-weight:750;
  letter-spacing:.09em;text-transform:uppercase;color:var(--green);background:var(--greenBg);
  border:1px solid var(--greenLn);border-radius:999px;padding:4px 10px}
/* La insignia va en el flujo, arriba del todo y en su propia linea. Probamos a
   colgarla del borde con posicion absoluta y se montaba sobre el nombre del
   casino en cuanto la tarjeta no tenia numero de ranking. Una fila propia no
   se rompe en ningun ancho. */
.mcc-rank__card--flagged .mcc-rank__badge{margin:14px 0 0 18px}
@media(max-width:660px){.mcc-rank__card--flagged .mcc-rank__badge{margin:12px 0 0 14px}}

/* ==== ritmo vertical de las páginas largas ================================
 *
 * Una página de guía es una sucesión de tres cosas: prosa, un encabezado y un
 * módulo. Antes cada una traía su propio margen, heredado de donde se escribió
 * primero, y el resultado se leía apretado en las costuras: el índice pegado al
 * texto, un H2 a nueve píxeles de la primera tarjeta, una sección empezando
 * encima de la anterior.
 *
 * Esto define UNA escala y la aplica en las cuatro uniones que importan. No son
 * huecos grandes: es aire suficiente para que el ojo sepa dónde termina una
 * idea. Los valores viven en variables para que cambiarlos sea una decisión y
 * no una cacería.
 */
.mcc-page{
  --gap-section:58px;   /* de una sección a la siguiente */
  --gap-head:24px;      /* del encabezado a su módulo o su primera tarjeta */
  --gap-intro:10px;     /* del encabezado a su frase de entrada */
  --gap-module:34px;    /* del módulo a la prosa que sigue */
  --gap-toc:38px;       /* del índice a lo que tiene alrededor */
}

/* El índice respira por los dos lados. Es lo primero que se ve y estaba
   pegado tanto al encabezado como al primer párrafo. */
.mcc-page .mcc-toc{margin-top:var(--gap-toc);margin-bottom:var(--gap-toc)}

/* Sección a sección. El mismo número lo usan las que dibuja un bloque y las
   que escribe un editor, para que la costura no se note. */
.mcc-page .mcc-site,
.mcc-page .wp-block-heading.mcc-site__head{margin-top:var(--gap-section);padding-top:22px}

/* Del encabezado a su contenido. El caso que más se notaba: "Casinos con 25
   giros gratis sin depósito" a nueve píxeles de la tarjeta. */
.mcc-page .mcc-site__head + .mcc-rank__list,
.mcc-page .mcc-site__head + .mcc-table__scroll,
.mcc-page .mcc-site__head + .mcc-ndtally,
.mcc-page .mcc-site__head + .mcc-outlist,
.mcc-page .mcc-site__head + .mcc-minlist,
.mcc-page .mcc-site__head + .mcc-gaps{margin-top:var(--gap-head)}

.mcc-page .mcc-site__intro{margin-top:var(--gap-intro);margin-bottom:var(--gap-head)}

/* Del módulo a la prosa que viene después. Un bloque servido por el servidor
   termina donde termina su última tarjeta, y el párrafo siguiente arrancaba
   inmediatamente. */
.mcc-page .mcc-site + .wp-block-paragraph,
.mcc-page .mcc-site + .wp-block-list,
.mcc-page .mcc-rank__list + .wp-block-paragraph,
.mcc-page .mcc-figure + .wp-block-paragraph{margin-top:var(--gap-module)}

/* Un encabezado escrito por el editor y su primer párrafo estaban casi
   tocándose, porque el margen venía de la regla del bloque y no de la del
   texto. */
.mcc-page .wp-block-heading.mcc-site__head + .wp-block-paragraph,
.mcc-page .wp-block-heading.mcc-site__head + .wp-block-list{margin-top:16px}

/* Un H3 dentro de una sección no necesita el aire de un H2, pero sí más del
   que traía por defecto. */
.mcc-page .wp-block-heading.mcc-sub{margin-top:34px;margin-bottom:10px}

/* Los párrafos sueltos entre módulos: medida y respiración iguales a los de
   dentro de un bloque. */
.mcc-page .mcc-wrap > p.wp-block-paragraph{margin-top:0;margin-bottom:14px}
.mcc-page .mcc-wrap > .wp-block-list{margin-top:0;margin-bottom:18px}

/* La frase con la cifra vive dentro de la prosa, no como ficha. Se distingue
   por peso y por una regla corta a la izquierda, nada más. */
.mcc-figure{margin:22px 0;padding:2px 0 2px 16px;border-inline-start:3px solid var(--accent);
  font-size:15.5px;line-height:1.65;color:var(--ink);font-weight:600;max-width:68ch}

@media(max-width:719px){
  .mcc-page{--gap-section:44px;--gap-head:20px;--gap-module:28px;--gap-toc:30px}
}

/* ---- qué publican los bonos ---------------------------------------------
   Cinco filas, cada una con su cifra y su denominador. No es un gráfico: la
   comparación que importa es entre lo que promete el titular y lo que el
   operador escribe debajo, y eso se lee mejor como lista que como barra. */
.mcc-bterms__list{list-style:none;margin:0;padding:0;display:grid;gap:0;
  border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}
.mcc-bterms__item{display:grid;grid-template-columns:minmax(0,150px) 92px minmax(0,1fr);
  align-items:baseline;gap:6px 16px;padding:13px 18px;border-bottom:1px solid var(--line)}
.mcc-bterms__item:last-child{border-bottom:0}
.mcc-bterms__label{font-size:14.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.mcc-bterms__count{font-size:14.5px;font-weight:700;color:var(--accent-on);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.mcc-bterms__item.is-unknown .mcc-bterms__count{color:var(--ink3);font-weight:600}
.mcc-bterms__note{font-size:13.5px;line-height:1.55;color:var(--ink2)}
.mcc-bterms__outro{margin:16px 0 0;font-size:14.5px;line-height:1.68;color:var(--ink2);max-width:70ch}
@media(max-width:719px){
  .mcc-bterms__item{grid-template-columns:1fr auto;padding:12px 15px}
  .mcc-bterms__note{grid-column:1 / -1}
}


/* ==== el gesto de las tarjetas comerciales ================================
 *
 * Un movimiento corto, no un salto. La tarjeta se levanta dos píxeles, el borde
 * se marca un poco y la sombra crece lo justo: lo suficiente para que el cursor
 * confirme que eso es clicable, y no tanto como para que la página respire sola
 * mientras alguien pasa el mouse buscando otra cosa.
 *
 * SOLO donde hay cursor. En un teléfono no existe el estado hover: el navegador
 * lo simula al tocar y la tarjeta se queda levantada después del toque, que es
 * peor que no tener nada. `hover:hover` y `pointer:fine` son la pregunta
 * correcta.
 *
 * Y solo para SUPERFICIES COMERCIALES. Una fila de una tabla de datos no se
 * levanta: dieciocho filas saltando al pasar el dedo es ruido, no información.
 */
@media (hover:hover) and (pointer:fine){
  .mcc-rank__card,
  .mcc-cluster__card,
  .mcc-ndcard,
  .mcc-opcard{
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
    will-change:transform;
  }
  .mcc-rank__card:hover,
  .mcc-cluster__card:hover,
  .mcc-ndcard:hover,
  .mcc-opcard:hover{
    transform:translateY(-3px);
    border-color:var(--line2);
    box-shadow:var(--shh);
  }
}

/* El teclado recibe la misma señal sin necesitar movimiento: quien navega con
   tabulador necesita saber dónde está, no verlo desplazarse. */
.mcc-rank__card:focus-within,
.mcc-cluster__card:focus-within,
.mcc-ndcard:focus-within,
.mcc-opcard:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Quien pidió menos movimiento no recibe ninguno. El cambio de borde se queda:
   sigue diciendo lo mismo sin moverse. */
@media (prefers-reduced-motion:reduce){
  .mcc-rank__card,
  .mcc-cluster__card,
  .mcc-ndcard,
  .mcc-opcard{transition:border-color .18s ease}
  .mcc-rank__card:hover,
  .mcc-cluster__card:hover,
  .mcc-ndcard:hover,
  .mcc-opcard:hover{transform:none}
}


/* ---- la firma -----------------------------------------------------------
   "Contenido revisado por", no "Escrito por": quien firma responde por el
   juicio editorial de la página, que es una afirmación distinta de haber
   tecleado cada frase -- y la segunda sería falsa en una página cuyas secciones
   de datos se arman solas desde la ficha.

   Cierra el artículo y no compite con él. Todo dentro es condicional: una firma
   que rellena lo que no sabe deja de servir para lo único que sirve. */
.mcc-authorbox{margin:34px 0 0;padding:18px 20px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh)}
.mcc-authorbox__label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:12px}
.mcc-authorbox__row{display:flex;gap:16px;align-items:flex-start}
.mcc-authorbox__pic{flex:0 0 auto}
.mcc-authorbox__photo{display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line);background:var(--soft)}
.mcc-authorbox__photo--text{font-size:17px;font-weight:750;letter-spacing:.01em;color:var(--ink2)}
.mcc-authorbox__who{min-width:0}
.mcc-authorbox__name{margin:0;font-size:16.5px;font-weight:750;letter-spacing:-.015em;color:var(--ink)}
.mcc-authorbox__role{margin:2px 0 0;font-size:13px;color:var(--ink3)}
.mcc-authorbox__bio{margin:9px 0 0;font-size:14px;line-height:1.62;color:var(--ink2);max-width:66ch}
.mcc-authorbox__links{margin:10px 0 0;font-size:13px}
.mcc-authorbox__links a{color:var(--accent-on);font-weight:650;text-decoration:none}
.mcc-authorbox__links a:hover{text-decoration:underline;text-underline-offset:3px}
/* Un perfil de demostración lo dice, donde el lector mira para saber quién
   responde por el texto. */
.mcc-authorbox__demo{margin:13px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.5;color:var(--ink3);font-style:italic}
@media(max-width:519px){
  .mcc-authorbox{padding:15px 16px}
  .mcc-authorbox__row{gap:13px}
  .mcc-authorbox__photo{width:48px;height:48px}
  .mcc-authorbox__photo--text{font-size:15px}
}

/* ============================================================
   RITMO DE LA PROSA LARGA
   ============================================================
   Medido antes de tocar nada, en /legalidad/, /bonos/ y /webpay/:

     parrafo a parrafo ................ 14px
     parrafo al H2 .................... 44px con .mcc-site__head, 14px sin ella
     H2 al primer parrafo ............. 16px con .mcc-site__head, 0px sin ella
     parrafo a lista .................. 14px
     lista al parrafo siguiente ....... 18px

   Los dos numeros que dependen de una clase son el problema de fondo. El aire
   de seccion vive en .mcc-site__head, que se escribe a mano en el marcado de
   cada pagina, asi que un H2 tecleado en Gutenberg no recibia ningun ritmo: se
   quedaba con los 14px del parrafo de arriba y cero por debajo. Nadie va a
   acordarse de esa clase al escribir, y el ritmo de un texto no puede depender
   de recordarla.

   Asi que el ritmo pasa a colgar de la posicion en el flujo y no de la clase.
   El mismo valor para las dos formas, para que la costura entre lo que escribe
   un editor y lo que dibuja un bloque siga sin verse.

   Lo que NO se toca aqui: la regla superior de .mcc-site__head, que marca el
   cambio de seccion y es decision de diseno, no de ritmo. Y nada que viva
   dentro de una tarjeta, una tabla, un acordeon, el rail de fuentes, la ficha
   de autor o el pie, porque el selector solo alcanza a los hijos directos del
   contenedor de la pagina.

   Los margenes verticales adyacentes colapsan, asi que cada union queda en el
   mayor de los dos valores. Por eso se ajusta el margen superior del segundo
   elemento y no el inferior del primero: cambiarlo abajo moveria tambien las
   uniones que ya estaban bien.

   Nota de la misma sesion: la primera regla de aqui abajo no se aplicaba, y no
   por lo que decia sino por donde estaba. La hoja arrastraba una llave de
   cierre de mas en el bloque movil de .mcc-authorbox, y a partir de ahi el
   parser descartaba reglas de forma intermitente. La misma regla copiada al
   final del fichero si funcionaba, que fue lo que delato el problema. La llave
   sobrante ya no esta y el fichero cierra en cero. */

/* Parrafo a parrafo. 14px juntaba dos ideas largas en un solo bloque gris. */
.mcc-page .mcc-wrap > p.wp-block-paragraph + p.wp-block-paragraph{margin-top:18px}

/* Lo que venga, al H2 siguiente. Un solo numero para el H2 con clase y sin
   ella, que ademas recorta un poco los 44px de antes. */
.mcc-page .mcc-wrap > * + h2.wp-block-heading{margin-top:36px}

/* Del H2 a lo primero que dice. Iban 16px con la clase y 0 sin ella, y las dos
   cifras estaban mal por lados opuestos: un titular separado de su propia
   entrada, o pegado a ella. */
.mcc-page .mcc-wrap > h2.wp-block-heading + .wp-block-paragraph,
.mcc-page .mcc-wrap > h2.wp-block-heading + .wp-block-list{margin-top:10px}

/* Un H3 sin .mcc-sub tenia el mismo problema que el H2 sin .mcc-site__head.
   Los valores de .mcc-sub ya estaban bien y no se cambian: esto solo cubre el
   caso de un H3 tecleado sin clase. */
.mcc-page .mcc-wrap > * + h3.wp-block-heading:not(.mcc-sub){margin-top:30px}
.mcc-page .mcc-wrap > h3.wp-block-heading:not(.mcc-sub) + .wp-block-paragraph,
.mcc-page .mcc-wrap > h3.wp-block-heading:not(.mcc-sub) + .wp-block-list{margin-top:10px}

/* Las resenas no entran aqui, y conviene dejar dicho por que. Su prosa vive
   dentro de .mcc-card, no como hija directa del contenedor de la pagina, asi
   que ninguno de los selectores de arriba la alcanza. Se probo tocar
   .mcc-prose y resulto que tambien cuelga de una tarjeta, que es justo lo que
   este pase no debe mover. El ritmo de la narrativa de una ficha es otro
   trabajo y otra decision. */

/* En movil el ritmo se comprime un poco. Mas aire en una columna estrecha
   convierte la pagina en scroll y el objetivo era que respirara, no que se
   soltara. */
@media(max-width:719px){
  .mcc-page .mcc-wrap > p.wp-block-paragraph + p.wp-block-paragraph{margin-top:16px}
  .mcc-page .mcc-wrap > * + h2.wp-block-heading{margin-top:30px}
  .mcc-page .mcc-wrap > * + h3.wp-block-heading:not(.mcc-sub){margin-top:26px}
}


/* ============================================================
   DIRECTORIO DE CASINOS
   ============================================================
   Cincuenta filas para recorrer, no cincuenta tarjetas para pasar. Misma
   familia visual que el ranking (mismo marco, mismo boton, mismos colores) y
   un tercio de la altura, porque aqui el trabajo es ver muchos a la vez. */

.mcc-dirbar{margin:22px 0 14px;display:flex;flex-direction:column;gap:12px}
.mcc-dirbar__find{display:block}
.mcc-dirbar__find input{width:100%;max-width:420px;padding:11px 14px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:15px}
.mcc-dirbar__find input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* El estado va en aria-pressed y ademas en el color y el borde, para que no
   dependa solo del color. */
.mcc-chip{padding:7px 13px;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--ink2);font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;line-height:1.2}
.mcc-chip:hover{border-color:var(--accent);color:var(--ink)}
.mcc-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mcc-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.mcc-chip--clear{border-style:dashed}
.mcc-dirbar__note{margin:0;font-size:13.5px;color:var(--ink2)}
/* Entre el panel y la lista, con aire a los dos lados: es el numero de lo que
   viene abajo, no un pie del formulario de arriba. */
.mcc-dirbar__count{margin:24px 0 12px;font-size:13px;color:var(--ink2);font-weight:600}

.mcc-dir{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mcc-dir__row{display:grid;grid-template-columns:minmax(190px,1.1fr) minmax(0,2fr) auto;
  align-items:center;gap:14px;padding:10px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel)}
@media(hover:hover) and (pointer:fine){
  .mcc-dir__row:hover{background:var(--cardHover,#1E2A3F);border-color:var(--lineOn,var(--line))}
}
.mcc-dir__id{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;min-width:0}
.mcc-dir__id:hover .mcc-dir__name,.mcc-dir__id:focus-visible .mcc-dir__name{color:var(--accent-on);text-decoration:underline}
.mcc-dir__name{font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.mcc-dir__facts{display:flex;flex-wrap:wrap;align-items:center;gap:7px;min-width:0}
.mcc-dir__bonus{font-size:13px;color:var(--ink2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%}
.mcc-dir__tag{font-size:11.5px;font-weight:650;letter-spacing:.01em;color:var(--ink2);
  border:1px solid var(--line);border-radius:6px;padding:2px 7px;white-space:nowrap}
.mcc-dir__go{justify-self:end}

/* En pantallas estrechas la fila se apila, pero sigue siendo una fila compacta
   y no se convierte en la tarjeta grande del ranking. */
@media(max-width:719px){
  .mcc-dir__row{grid-template-columns:1fr auto;grid-template-areas:"id go" "facts facts";
    gap:9px 12px;padding:11px 13px}
  .mcc-dir__id{grid-area:id}
  .mcc-dir__go{grid-area:go}
  .mcc-dir__facts{grid-area:facts}
  .mcc-dirbar__find input{max-width:100%}
}

/* La ruta al catalogo, justo debajo del ranking. Un boton secundario y no un
   enlace suelto en un parrafo: el lector que baja por las seis tarjetas y
   quiere ver el resto no deberia tener que leer tres parrafos para encontrarlo. */
.mcc-page .mcc-wrap > p.mcc-more{margin:16px 0 0;text-align:center}
@media(min-width:720px){.mcc-page .mcc-wrap > p.mcc-more{text-align:left}}

/* ---- una tarjeta por tema ------------------------------------------------
   La prosa y los datos del mismo asunto viven en la misma tarjeta. Lo unico
   que hace falta es marcar la costura: donde termina lo que escribimos y
   empieza lo que publica el operador. Un respiro, no un borde.
   Medido antes: 15px. Objetivo del encargo: 1rem-1.4rem. */
.mcc-card--topic > p.wp-block-paragraph + .mcc-table__scroll,
.mcc-card--topic > p.wp-block-paragraph + .mcc-dirs,
.mcc-card--topic > p.wp-block-paragraph + .mcc-vs__panel,
.mcc-card--topic > p.wp-block-paragraph + .mcc-vs__facts,
.mcc-card--topic > p.wp-block-paragraph + p.mcc-prose{margin-top:20px}

/* Un subtitulo dentro de la tarjeta separa dos asuntos cercanos, asi que
   respira mas arriba que abajo. */
.mcc-card--topic > h3.wp-block-heading{margin:22px 0 0;font-size:15.5px;
  font-weight:650;letter-spacing:-.008em;color:var(--ink)}
.mcc-card--topic > h3.wp-block-heading + p.wp-block-paragraph{margin-top:8px}

/* ---- filtrar el catalogo -------------------------------------------------
   Esta es la anatomia del directorio de Ontario, medida y portada: una columna
   estrecha para el nombre del grupo, una fila por pregunta con etiqueta,
   control compacto y microcopia debajo, y una linea fina entre grupos.

   Lo que se porto son las proporciones, no el color. BOCO es claro y esto es la
   escala navy de MCC.

   Lo que ya NO esta: las casillas grandes con borde. Cuatro preguntas chicas
   dibujadas como cuatro objetos grandes convertian un filtro editorial en un
   panel de control. Ahora todo lo que tiene varias respuestas es un desplegable
   y lo unico segmentado es la pregunta de cuatro respuestas, igual que alla. */
.mcc-filters{margin:24px 0 0;border:1px solid var(--line);border-radius:16px;
  background:var(--navy-800);overflow:hidden}
.mcc-filters__summary{display:flex;align-items:center;gap:11px;padding:16px 20px;
  cursor:pointer;list-style:none;transition:background .12s}
.mcc-filters__summary::-webkit-details-marker{display:none}
.mcc-filters__summary:hover{background:var(--navy-850)}
.mcc-filters__summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mcc-filters__title{font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink3)}
.mcc-filters__badge{display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 6px;border-radius:99px;background:var(--accent);
  color:#fff;font-size:11px;font-weight:800}
.mcc-filters__chevron{margin-inline-start:auto;width:9px;height:9px;
  border-right:1.6px solid var(--ink3);border-bottom:1.6px solid var(--ink3);
  transform:rotate(45deg);transition:transform .18s ease}
.mcc-filters[open] .mcc-filters__chevron{transform:rotate(225deg)}
.mcc-filters__form{padding:2px 20px 18px;border-top:1px solid var(--line)}
.mcc-filters__find{padding:16px 0 0}
.mcc-filters__find input{width:100%;max-width:340px;padding:9px 13px;border-radius:10px;
  border:1px solid var(--line2);background:var(--navy-850);color:var(--ink);
  font:inherit;font-size:13.5px}
.mcc-filters__find input:focus-visible{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(197,31,50,.25)}

/* Un grupo es una pregunta. El nombre va en su propia columna para que el ojo
   lea las preguntas hacia abajo antes de leer los controles hacia el lado. */
.mcc-fgroup{display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px;
  padding:18px 0;border-bottom:1px solid var(--line)}
.mcc-fgroup:last-of-type{border-bottom:0}
.mcc-fgroup__name{display:block;margin:2px 0 0;font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.mcc-fgroup__items{display:flex;flex-direction:column;gap:16px;min-width:0}

/* Tres columnas: que se pregunta, cual, y la respuesta cuando la hay. */
.mcc-filter{display:grid;grid-template-columns:154px 208px minmax(0,1fr);
  gap:5px 14px;align-items:center;min-width:0}
.mcc-filter__name{grid-column:1;font-size:13.5px;font-weight:650;color:var(--ink);
  letter-spacing:-.008em}
.mcc-filter__help{grid-column:2/-1;font-size:11.5px;color:var(--ink3);line-height:1.45}
.mcc-filter.is-on .mcc-filter__name{color:var(--accent-on)}

.mcc-select{grid-column:2;position:relative;justify-self:start}
.mcc-select::after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;
  margin-top:-5px;border-right:1.5px solid var(--ink3);border-bottom:1.5px solid var(--ink3);
  transform:rotate(45deg);pointer-events:none}
.mcc-select select{appearance:none;-webkit-appearance:none;font:inherit;font-size:13.5px;
  font-weight:600;color:var(--ink);background:var(--navy-850);border:1px solid var(--line2);
  border-radius:10px;padding:9px 34px 9px 13px;min-width:170px;max-width:230px;cursor:pointer;
  transition:border-color .12s,box-shadow .12s}
.mcc-select select:hover{border-color:var(--ink3)}
.mcc-select select:focus-visible{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(197,31,50,.25)}

/* El segmentado, con radios debajo: el navegador manda en la seleccion y las
   flechas del teclado funcionan sin una linea de script.

   Se llama mcc-seg y no mcc-answer porque esa clase ya es la respuesta de una
   pregunta frecuente, con su barra roja a la izquierda. */
.mcc-seg{grid-column:2/-1;display:inline-flex;flex-wrap:wrap;gap:4px;margin:0;
  padding:3px;border:1px solid var(--line);border-radius:11px;background:var(--navy-850);
  justify-self:start}
.mcc-seg__opt{position:relative;display:inline-flex;margin:0;padding:0;border:0}
.mcc-seg__opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.mcc-seg__opt span{display:inline-flex;align-items:center;padding:6px 12px;border-radius:8px;
  font-size:12.5px;font-weight:600;color:var(--ink2);white-space:nowrap;
  transition:background .12s,color .12s}
.mcc-seg__opt:hover span{background:var(--navy-800);color:var(--ink)}
.mcc-seg__opt input:checked + span{background:var(--ink);color:var(--navy-900,#0F1626)}
.mcc-seg__opt input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}

.mcc-filters__foot{display:flex;align-items:center;gap:16px;padding-top:16px}
.mcc-filters__go{padding:9px 18px;font-size:13px}
.mcc-filters__go[hidden]{display:none}
.mcc-filters__clear{font-size:13px;font-weight:600;color:var(--ink2);text-decoration:none;
  border-bottom:1px solid var(--line2)}
.mcc-filters__clear:hover{color:var(--ink);border-color:var(--ink3)}
.mcc-filters__clear[hidden]{display:none}

.mcc-empty{padding:26px 20px;border:1px dashed var(--line2);border-radius:14px;
  text-align:center}
.mcc-empty__head{margin:0;font-size:15px;font-weight:700;color:var(--ink)}
.mcc-empty__body{margin:8px auto 0;max-width:52ch;font-size:13.5px;line-height:1.55;
  color:var(--ink2)}
.mcc-act--ghost{border:1px solid var(--line2);background:transparent;color:var(--ink);
  text-decoration:none;margin-top:12px}
.mcc-act--ghost:hover{border-color:var(--accent);color:var(--accent-on)}

/* ---- la fila del catalogo ------------------------------------------------
   Cuatro preguntas, las mismas cuatro en cada fila y en el mismo orden, para
   que se compare mirando hacia abajo en vez de leyendo hacia el lado. El tono
   apagado de una celda dice que nadie lo ha comprobado, nunca que este mal. */
.mcc-dir__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.9fr) 188px;
  gap:16px;align-items:center;padding:14px 16px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel)}
.mcc-dir__strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
  min-width:0;align-items:start}
.mcc-cell{display:flex;flex-direction:column;gap:2px;min-width:0}
.mcc-cell__label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink3);font-weight:750}
/* Envuelve en vez de cortar. Un valor con puntos suspensivos es un valor que
   no se puede usar, y "Sin bono confirmad" no informa de nada. */
.mcc-cell__value{font-size:12px;font-weight:600;color:var(--ink);min-width:0;
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;line-height:1.35}
.mcc-cell--unknown .mcc-cell__value{font-weight:500;color:var(--ink3)}
.mcc-dir__more{font-size:11px;font-weight:700;color:var(--ink3);white-space:nowrap}
/* El boton y el enlace a la resena son un solo grupo de accion. Estaban
   alineados a la derecha, asi que sus centros no coincidian y cada fila los
   dejaba en un sitio distinto segun lo largo que fuera el nombre del casino.
   La columna tiene ancho fijo, asi que centrarlos dentro basta para que caigan
   en la misma vertical en las cincuenta filas. */
.mcc-dir__go{justify-self:stretch;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px}
.mcc-dir__go > a:first-child{width:100%;justify-content:center}
.mcc-dir__review{font-size:12px;font-weight:600;color:var(--ink2);text-decoration:none;
  text-align:center;white-space:nowrap;border-bottom:1px solid transparent}
.mcc-dir__review:hover{color:var(--accent-on);border-color:var(--line2)}
.mcc-dir__row .mcc-pay__name{flex:none}
.mcc-dir__row .mcc-pmark__img{height:16px;width:auto}

/* El filtro esconde con el atributo `hidden`, y estas tres reglas declaran un
   display propio que lo gana por orden de aparicion: las dos tienen la misma
   especificidad. Sin esto el contador decia "27 de 50" y seguian dibujadas las
   cincuenta filas. */
.mcc-dir[hidden],.mcc-dir__row[hidden],.mcc-filters__badge[hidden]{display:none}

@media(max-width:1099px){
  .mcc-dir__strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
}
@media(max-width:899px){
  .mcc-fgroup{grid-template-columns:1fr;gap:10px;padding:15px 0}
  .mcc-filter{grid-template-columns:minmax(0,1fr);gap:8px}
  .mcc-filter__name,.mcc-select,.mcc-seg,.mcc-filter__help{grid-column:1/-1}
  .mcc-select{justify-self:stretch}
  .mcc-select select{min-width:0;max-width:none;width:100%}
  .mcc-seg{justify-self:stretch;width:100%}
  .mcc-seg__opt{flex:1 1 auto}
  .mcc-seg__opt span{width:100%;justify-content:center;padding:8px 10px}
  .mcc-filters__summary{padding:14px 15px}
  .mcc-filters__form{padding:2px 15px 16px}
  .mcc-filters__find input{max-width:none}
}
@media(max-width:719px){
  .mcc-dir__row{grid-template-columns:1fr;grid-template-areas:"id" "strip" "go";gap:0;
    padding:13px 14px}
  .mcc-dir__id{grid-area:id}
  .mcc-dir__strip{grid-area:strip;margin-top:12px;padding-top:12px;
    border-top:1px solid var(--line)}
  .mcc-dir__go{grid-area:go;justify-self:stretch;flex-direction:row;align-items:center;
    justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;
    border-top:1px solid var(--line)}
  .mcc-dir__go > a:first-child{width:auto}
  .mcc-cell__value{white-space:normal}
}

/* ---- cargar mas casinos --------------------------------------------------
   El panel llega oculto y lo enciende el script. Asi, sin script, no aparece
   un boton que no hace nada y la lista completa ya esta a la vista. */
.mcc-rank__more{margin:14px 0 0}
.mcc-rank__more[hidden]{display:none}
/* Una fila, no un boton flotante. Ocupa el ancho util de la lista para que el
   pie del ranking se lea como el final de la lista y no como un control suelto
   al costado. */
.mcc-rank__morebtn{display:flex;width:100%;box-sizing:border-box;align-items:center;
  justify-content:center;gap:10px;padding:14px 18px;border:1px solid var(--line2);
  border-radius:14px;background:var(--card);color:var(--ink);font-family:inherit;
  font-size:14.5px;font-weight:700;letter-spacing:-.01em;cursor:pointer;
  transition:border-color .15s,background .15s}
.mcc-rank__morebtn:hover{border-color:var(--accentOn);background:var(--cardHover)}
.mcc-rank__morebtn:focus-visible{outline:2px solid var(--accentOn);outline-offset:2px}
/* El mismo tratamiento para el paso siguiente, porque es el mismo control que
   cambio de pregunta: primero abre el resto del ranking, despues lleva al
   directorio. Nunca los dos a la vez, de eso se encarga ranking.js. */
.mcc-rank__all{margin:14px 0 0}
.mcc-rank__all[hidden]{display:none}
.mcc-rank__alllink{display:flex;width:100%;box-sizing:border-box;align-items:center;
  justify-content:center;padding:14px 18px;border:1px solid var(--line2);
  border-radius:14px;background:transparent;color:var(--accentOn);
  font-size:14.5px;font-weight:700;letter-spacing:-.01em;text-decoration:none;
  transition:border-color .15s,background .15s}
.mcc-rank__alllink:hover{border-color:var(--accentOn);background:var(--card)}
.mcc-rank__alllink:focus-visible{outline:2px solid var(--accentOn);outline-offset:2px}
.mcc-rank__list > li[tabindex="-1"]:focus-visible{outline:2px solid var(--accent);
  outline-offset:3px;border-radius:14px}


/* ---- rutas de la CuentaRUT ----------------------------------------------- */
/* Una ruta directa es un hecho del operador y una compatible es una lectura
   nuestra. Se ven distinto para que nadie las confunda de un vistazo. */
.mcc-route--direct{color:var(--ink);font-weight:650}

.mcc-authorbox__name a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.mcc-authorbox__name a:hover,.mcc-authorbox__name a:focus-visible{text-decoration-color:currentColor}


/* ---- authors page: one section per author, the role under the name -------
   No card, no badge and no photo slot a record did not fill. The role line
   sits close to its heading so the two read as one label. */
.mcc-authors__role{margin:-8px 0 12px;font-size:14px;font-weight:600;color:var(--ink2)}


/* ---- mapa del sitio -------------------------------------------------------
   Sections from the owner registry as cards in a grid that fills the width,
   the casino reviews across the full row in columns of names. One column on
   a phone. A title under its category is indented, never a new card. */
.mcc-sitemap{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:28px 0 0}
.mcc-sitemap__group{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;min-width:0}
.mcc-sitemap__group--wide{grid-column:1/-1}
.mcc-page .mcc-sitemap__head{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink3);margin:0 0 10px;padding:0;border:0}
.mcc-sitemap__list,.mcc-sitemap__sub{list-style:none;margin:0;padding:0}
.mcc-sitemap__list > li + li{margin-top:2px}
.mcc-sitemap__sub{margin:2px 0 4px 2px;padding-left:12px;border-left:1px solid var(--line)}
.mcc-sitemap a{display:inline-block;padding-block:4px;font-size:14.5px;line-height:1.35;color:var(--ink);
  text-decoration:none;overflow-wrap:anywhere}
.mcc-sitemap__sub a{font-size:14px;color:var(--ink2)}
.mcc-sitemap a:hover,.mcc-sitemap a:focus-visible{color:var(--accentOn);text-decoration:underline;text-underline-offset:3px}
.mcc-sitemap__list--cols{columns:4 170px;column-gap:24px}
.mcc-sitemap__list--cols > li{break-inside:avoid;margin:0}
.mcc-sitemap__xml{margin:22px 0 0;font-size:14px;color:var(--ink2)}
/* The news map: one card per year, the months as quiet subheads inside it,
   one line per article. Text links and a date, nothing else, so a year with
   two hundred articles is a long list and not a wall of boxes. */
.mcc-sitemap__lead{margin:18px 0 0;font-size:15px;color:var(--ink2)}
.mcc-sitemap__month{font-size:14px;font-weight:700;color:var(--ink);margin:18px 0 4px}
.mcc-sitemap__head + .mcc-sitemap__month{margin-top:0}
/* Inline, not the inline-block the other lists use: a long headline filled
   the whole line as a block and pushed its date onto a row of its own, which
   on a phone doubled every entry. Inline, the date ends the headline's last
   line. The row spacing lives on the item instead, so the links stay easy to
   tap. */
.mcc-sitemap__list--news > li{padding-block:3px;line-height:1.45}
.mcc-sitemap__list--news > li + li{margin-top:0}
.mcc-sitemap .mcc-sitemap__list--news a{display:inline;padding-block:0}
/* The space before it already separates it. A wider margin read as an indent
   whenever a full last line sent the date to a line of its own. */
.mcc-sitemap__when{font-size:13px;color:var(--ink3);white-space:nowrap;margin-left:2px}
@media (max-width:599px){
  .mcc-sitemap{grid-template-columns:1fr;gap:12px}
  .mcc-sitemap__list--cols{columns:2 130px}
  .mcc-sitemap a{padding-block:7px}
  .mcc-sitemap .mcc-sitemap__list--news a{padding-block:0}
  .mcc-sitemap__list--news > li{padding-block:6px}
}

/* ---- the open phone menu scrolls on its own ------------------------------
   The masthead is sticky on phones, so a menu taller than the screen would
   hide its last links under the fold with no way to reach them. */
@media (max-width:900px){
  .mcc-nav.is-open .mcc-nav__links{max-height:calc(100dvh - 60px);overflow-y:auto;overscroll-behavior:contain}
}


/* ---- noticias: the hub, the cards, the article ----------------------------
   The cards are for reading, not comparing: picture, kind and date, headline,
   standfirst. 16:9 pictures, one column on a phone, two on a tablet, three on
   a desktop. With no picture, a plain panel in the site's colours carries the
   site's mark, so a grid of new articles still lines up. */
.mcc-news{display:grid;grid-template-columns:1fr;gap:18px;margin:26px 0 0}
@media (min-width:600px){ .mcc-news{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:960px){ .mcc-news{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* Una tarjeta con borde, no tres columnas de texto suelto. Tres articulos de
   titular largo y titular corto se veian como piezas de distinto tamano, y el
   borde mas la altura completa los deja como tres cosas del mismo tipo. */
.mcc-news__card{display:flex;flex-direction:column;min-width:0;height:100%;
  border:1px solid var(--line);border-radius:14px;background:var(--card);
  overflow:hidden;transition:border-color .15s,transform .15s}
.mcc-news__card:hover{border-color:var(--line2);transform:translateY(-2px)}
/* La imagen va al ras del borde superior, asi que solo redondea arriba y el
   marco propio sobraria. */
.mcc-news__shot{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--soft);
  border:0;border-radius:0;text-decoration:none}
.mcc-news__img{display:block;width:100%;height:100%;object-fit:cover}
.mcc-news__ph{display:flex;align-items:flex-end;width:100%;height:100%;padding:16px 18px;box-sizing:border-box;
  background:linear-gradient(135deg,var(--navy-800) 0%,var(--navy-850) 100%);position:relative}
.mcc-news__ph::before{content:"";position:absolute;left:18px;top:18px;width:34px;height:3px;border-radius:2px;background:var(--accent)}
.mcc-news__ph span{font-family:var(--sans);font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--line2)}
.mcc-news__ph--explicador{background:linear-gradient(135deg,var(--navy-750) 0%,var(--navy-850) 100%)}
.mcc-news__meta{margin:0;padding:15px 16px 0;font-size:12.5px;color:var(--ink3);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.mcc-news__kind{font-weight:700;letter-spacing:.09em;text-transform:uppercase;font-size:11px;color:var(--accentOn)}
.mcc-page .mcc-news__title{font-family:var(--sans);font-size:18px;line-height:1.3;letter-spacing:-.015em;font-weight:700;margin:0;padding:7px 16px 0;border:0}
.mcc-news__title a{color:var(--ink);text-decoration:none}
.mcc-news__title a:hover,.mcc-news__title a:focus-visible{color:var(--accentOn);text-decoration:underline;text-underline-offset:3px}
/* Tres lineas y el resto se corta. Sin esto una entradilla larga estira su
   tarjeta y las tres dejan de estar alineadas, que es justo lo que el borde
   hace visible.

   El padding de abajo va en la tarjeta y NO en el parrafo recortado. Un
   -webkit-box con padding-bottom dibuja la cuarta linea dentro de ese padding
   en vez de cortarla, asi que la tarjeta terminaba con media frase asomando
   bajo el borde. */
.mcc-news__dek{margin:0;padding:8px 16px 0;font-size:14px;line-height:1.55;color:var(--ink2);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.mcc-news__card{padding-bottom:16px}
.mcc-news__empty{margin:30px 0 0;color:var(--ink2)}

/* ---- Como revisamos un casino ------------------------------------------
   Tres pasos en columnas. Filete arriba de cada uno, numero pequeno, titulo
   corto y un parrafo. Nada de tarjetas grandes ni iconos: es una explicacion
   editorial y se lee mejor como texto ordenado que como tres cajas. */
.mcc-steps__list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:22px;
  grid-template-columns:1fr;counter-reset:mcc-step}
@media (min-width:760px){ .mcc-steps__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px} }
.mcc-steps__step{min-width:0;padding-top:13px;border-top:2px solid var(--onDeep)}
.mcc-steps__num{margin:0;font-size:11.5px;font-weight:800;letter-spacing:.08em;
  color:var(--accentOn);font-variant-numeric:tabular-nums}
.mcc-page .mcc-steps__title{font-family:var(--sans);font-size:16px;line-height:1.3;
  letter-spacing:-.015em;font-weight:700;color:var(--onDeep);margin:7px 0 0;padding:0;border:0}
.mcc-steps__body{margin:7px 0 0;font-size:14px;line-height:1.6;color:var(--onDeep2)}

/* ---- Todos los casinos que cubrimos -------------------------------------
   El catalogo entero en tarjetas de cinco lineas. Deliberadamente mas liviana
   que una tarjeta de ranking: sin senales, sin bono, sin boton de salida y sin
   fila de detalle, porque cincuenta tarjetas de ranking en una portada son un
   segundo sitio que descargar. */
.mcc-covered__grid{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.mcc-covered__item{min-width:0}
.mcc-covered__card{display:flex;flex-direction:column;gap:5px;height:100%;box-sizing:border-box;
  padding:14px 15px;border:1px solid var(--line);border-radius:12px;background:var(--card);
  text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.mcc-covered__card:hover{border-color:var(--line2);transform:translateY(-2px)}
.mcc-covered__card:focus-visible{outline:2px solid var(--accentOn);outline-offset:2px}
.mcc-covered__mark{display:flex;align-items:center;margin-bottom:3px}
.mcc-covered__mark .mcc-mark{--mark-h:24px}
.mcc-covered__name{font-size:14.5px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.mcc-covered__card:hover .mcc-covered__name{color:var(--accentOn)}
.mcc-covered__line{font-size:11.5px;line-height:1.4;color:var(--ink3)}
/* Depositar y retirar son preguntas distintas, asi que la etiqueta dice cual
   de las dos resume esta linea y nunca se deja a la interpretacion. */
.mcc-covered__pays{font-size:11.5px;line-height:1.4;color:var(--ink2)}
.mcc-covered__payslab{font-weight:700;color:var(--ink3);letter-spacing:.04em;
  text-transform:uppercase;font-size:9.5px}
.mcc-covered__go{margin-top:auto;padding-top:9px;font-size:12.5px;font-weight:700;color:var(--accentOn)}
@media (max-width:599px){
  .mcc-covered__grid{grid-template-columns:1fr;gap:10px}
  .mcc-covered__card{padding:12px 13px}
}

.mcc-pager{margin:40px 0 0}
.mcc-pager .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mcc-pager .page-numbers{display:inline-flex;min-width:38px;justify-content:center;padding:8px 12px;border-radius:10px;
  border:1px solid var(--line);color:var(--ink2);text-decoration:none;font-size:14px}
.mcc-pager .page-numbers.current{background:var(--card);color:var(--ink);font-weight:700}
.mcc-pager a.page-numbers:hover{color:var(--ink);border-color:var(--line2)}

/* One reading column for the whole article, head to byline. The body blocks
   stay direct children of .mcc-wrap, so the page typography applies as is. */
.mcc-wrap.mcc-article{max-width:820px}
.mcc-article__head{padding:34px 0 0}
.mcc-article__kind{margin:0 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accentOn)}
.mcc-article__head .mcc-hero__title{max-width:none;text-wrap:balance}
.mcc-article__meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin:18px 0 0;padding-bottom:22px;border-bottom:1px solid var(--line);
  font-size:13.5px;color:var(--ink3)}
.mcc-article__meta a{color:var(--ink2);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.mcc-article__meta a:hover{text-decoration-color:currentColor}
.mcc-article__figure{margin:26px 0 0}
.mcc-article__img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px}
.mcc-article__figure figcaption{margin-top:8px;font-size:12.5px;color:var(--ink3)}
.mcc-article > .mcc-article__figure + *,.mcc-article > .mcc-article__head + *{margin-top:28px}
.mcc-article__more{margin:48px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.mcc-page .mcc-article__more-head{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink3);margin:0;padding:0;border:0}
.mcc-article__more .mcc-news{margin-top:16px}
@media (min-width:960px){ .mcc-article__more .mcc-news{grid-template-columns:repeat(3,minmax(0,1fr))} }
.mcc-article__more .mcc-news__title{font-size:16px}
.mcc-article__more .mcc-news__dek{display:none}
@media (max-width:599px){
  .mcc-article__head{padding-top:22px}
  .mcc-news__title{font-size:18px}
}

/* ---- the review's sticky button ----------------------------------------
   The same button as the hero's, kept within reach after the hero has
   scrolled away. It ships hidden and review.js decides when it helps.

   On a phone it is a bar along the bottom edge, name on the left and button
   on the right, sitting above the home indicator via the safe-area inset.
   From 900px it stops being a bar and becomes a compact box in the corner,
   because a full-width strip across a desktop screen is a toolbar, not an
   offer.

   z-index 40: under the navigation and its open menu (60) and under the skip
   link (100), so it can never cover the way out of the page. */
.mcc-sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--deep) 94%,transparent);backdrop-filter:blur(10px);
  border-top:1px solid var(--deepLine);animation:mcc-rise .2s ease}
.mcc-sticky[hidden]{display:none}
.mcc-sticky__name{color:var(--onDeep);font-weight:700;font-size:14.5px;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcc-sticky .mcc-visit{flex:0 0 auto;padding:9px 16px;font-size:13.5px}
@keyframes mcc-rise{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.mcc-sticky{animation:none}}
@media (min-width:900px){
  .mcc-sticky{left:auto;right:24px;bottom:24px;max-width:360px;
    padding:10px 12px 10px 16px;border:1px solid var(--line);border-radius:14px;
    background:var(--card);box-shadow:0 18px 40px rgba(2,6,16,.45)}
}