/* ==========================================================================
   casinos con retirada inmediata — silo stylesheet
   Source design: Google Stitch "Data Matrix" (2026-07-28), reproduced 1:1
   for the components it rendered; remaining class-contract hooks improvised
   in the same visual language.
   LOCKED PALETTE — #006eb2 / #1a4a50 / #111 / #fff / #f4f4f4 / #ddd only.
   Every other tone is a color-mix()/rgba() of those. No JS. Light only.
   ========================================================================== */

:root{
  --primary:#006eb2;
  --secondary:#1a4a50;
  --ink:#111111;
  --white:#ffffff;
  --light:#f4f4f4;
  --line:#dddddd;
  --shadow:rgba(0,0,0,.1);

  /* derived — mixes of locked colours only */
  --primary-ink: color-mix(in srgb, var(--primary) 82%, var(--ink));
  --primary-04: color-mix(in srgb, var(--primary) 4%, var(--white));
  --primary-06: color-mix(in srgb, var(--primary) 6%, var(--white));
  --primary-10: color-mix(in srgb, var(--primary) 10%, var(--white));
  --primary-16: color-mix(in srgb, var(--primary) 16%, var(--white));
  --muted: color-mix(in srgb, var(--ink) 58%, var(--white));
  --muted-soft: color-mix(in srgb, var(--ink) 42%, var(--white));
  --sec-06: color-mix(in srgb, var(--secondary) 6%, var(--white));

  --r-lg:12px; --r-md:8px; --r-sm:6px; --r-pill:999px;
  --sp:16px;
  --shadow-1:0 1px 2px var(--shadow);
  --shadow-2:0 4px 6px var(--shadow);
  --wrap:1180px;

  --font-head:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:var(--font-body);
  font-size:17px; line-height:1.65; color:var(--ink);
  background:linear-gradient(180deg,var(--white) 0%,var(--primary-04) 100%);
  background-attachment:fixed;
  overflow-x:hidden;
  font-variant-numeric:tabular-nums;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-underline-offset:2px}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--secondary);line-height:1.2;letter-spacing:-.01em}
h1{font-size:clamp(28px,6vw,42px);font-weight:800}
h2{font-size:clamp(23px,4.4vw,30px);font-weight:800;margin-bottom:10px}
h3{font-size:clamp(19px,3.2vw,21px);font-weight:700;margin-bottom:8px}
h4{font-size:17px;font-weight:700;margin-bottom:6px}
p{margin-bottom:14px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:16px}

/* ---------- header / nav ------------------------------------------------ */
.silo-header{
  position:sticky;top:0;z-index:50;
  background:var(--white);
  border-bottom:3px solid var(--primary);
  box-shadow:var(--shadow-1);
}
.silo-header__inner{
  max-width:var(--wrap);margin-inline:auto;padding:10px 16px;
  display:flex;align-items:center;gap:14px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.brand__logo{width:197px;height:40px;max-width:52vw;object-fit:contain;display:block}
@media (max-width:900px){.brand__logo{width:172px;height:35px}}
.silo-nav{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.silo-nav a{
  font-size:14.5px;font-weight:600;color:var(--muted);text-decoration:none;
  padding:8px 10px;border-radius:var(--r-sm);border-bottom:3px solid transparent;
}
.silo-nav a:hover{color:var(--primary);background:var(--primary-06)}
.silo-nav a[aria-current="page"]{color:var(--primary);border-bottom-color:var(--primary)}
.langpill{
  display:inline-flex;align-items:center;gap:6px;margin-left:6px;
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:5px 9px;font-size:13px;font-weight:600;color:var(--muted);background:var(--white);
}
/* burger is desktop-hidden by default */
/* visibility:hidden also removes it from the tab order and from AT on desktop */
.navtoggle{position:absolute;visibility:hidden;width:1px;height:1px;pointer-events:none}
.navburger{display:none}

@media (max-width:900px){
  /* ---- CSS-only hamburger (no JS anywhere on the site) ---- */
  .silo-header__inner{flex-wrap:wrap;padding:8px 14px;gap:8px;position:relative}
  .navtoggle{
    position:absolute;right:10px;top:8px;width:44px;height:44px;
    margin:0;visibility:visible;opacity:0;cursor:pointer;pointer-events:auto;z-index:3;
  }
  .navburger{
    display:grid;place-content:center;gap:5px;
    width:44px;height:44px;margin-left:auto;border-radius:var(--r-sm);
    border:1px solid var(--line);background:var(--white);
  }
  .navburger span{
    display:block;width:20px;height:2px;border-radius:2px;background:var(--secondary);
  }
  .navtoggle:focus-visible + .navburger{outline:3px solid var(--primary);outline-offset:2px}
  .navtoggle:checked + .navburger{background:var(--primary-06);border-color:var(--primary)}
  .navtoggle:checked + .navburger span:nth-child(2){opacity:.25}

  /* the panel: hidden until checked, then a full-width sheet under the bar */
  .silo-nav{
    display:none;order:3;width:100%;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:6px 0 4px;border-top:1px solid var(--line);
  }
  .navtoggle:checked ~ .silo-nav{display:flex}
  .silo-nav a{
    display:block;width:100%;font-size:16px;padding:13px 4px;
    border-bottom:1px solid var(--light);border-radius:0;
    border-left:3px solid transparent;
  }
  .silo-nav a:last-of-type{border-bottom:0}
  .silo-nav a[aria-current="page"]{
    border-bottom-color:var(--light);border-left-color:var(--primary);
    background:var(--primary-06);padding-left:11px;
  }
  .langpill{display:none}
}

/* ---------- hero -------------------------------------------------------- */
.silo-hero{padding:26px 0 4px}
.silo-hero__lead{font-size:18px;color:var(--muted-soft);margin-top:6px;max-width:78ch}
.byline{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:12px;padding-bottom:14px;font-size:13.5px;color:var(--muted);
}
.byline__avatar{
  width:40px;height:40px;border-radius:var(--r-pill);flex:0 0 40px;
  background:var(--sec-06);border:1px solid var(--line);
  display:grid;place-items:center;
  font-family:var(--font-head);font-weight:800;font-size:14px;color:var(--secondary);
}
.byline__meta strong{color:var(--ink)}
.byline__sep{color:var(--line)}

/* ---------- callout / expert tip --------------------------------------- */
.callout{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--white);border:1px solid var(--primary);
  border-radius:var(--r-md);padding:14px 16px;margin:14px 0 22px;
  box-shadow:var(--shadow-1);font-size:15.5px;
}
.callout .icon{color:var(--primary);flex:0 0 22px}
.callout p{margin:0}
.callout strong{color:var(--secondary)}
.callout--warning{border-color:var(--secondary);background:var(--sec-06);border-left-width:5px}
.callout--warning .icon{color:var(--secondary)}

/* ---------- #1 pick strip (Stitch hero card) ---------------------------- */
.pick{
  display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:18px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);overflow:hidden;margin-bottom:26px;
}
.pick__rank{
  align-self:stretch;background:var(--secondary);color:var(--white);
  min-width:88px;display:grid;place-items:center;padding:26px 18px;
  font-family:var(--font-head);font-weight:800;font-size:46px;line-height:1;
}
.pick__logo{
  width:150px;height:80px;border:1px solid var(--line);border-radius:var(--r-md);
  display:grid;place-items:center;padding:8px;background:var(--white);
}
.pick__speed{display:flex;align-items:center;gap:14px;padding-block:18px}
.pick__speed .icon{color:var(--primary);flex:0 0 auto}
.pick__time{
  font-family:var(--font-head);font-weight:800;color:var(--primary);
  font-size:clamp(30px,5vw,44px);line-height:1;letter-spacing:-.02em;
}
.pick__facts{font-size:15px;color:var(--muted-soft);line-height:1.5}
.pick__facts strong{color:var(--ink)}
.pick__cta{padding-right:18px}
@media (max-width:900px){
  .pick{grid-template-columns:auto 1fr;gap:12px;padding-bottom:16px}
  .pick__rank{font-size:32px;min-width:64px;padding:16px 10px}
  .pick__logo{width:120px;height:60px}
  .pick__speed{grid-column:1/-1;padding:0 16px}
  .pick__facts{grid-column:1/-1;padding-inline:16px}
  .pick__cta{grid-column:1/-1;padding:0 16px}
  .pick__cta .cta{width:100%}
}

/* ---------- buttons ----------------------------------------------------- */
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:12px 22px;border-radius:var(--r-md);
  font-family:var(--font-head);font-weight:700;font-size:16px;
  text-decoration:none;border:1px solid transparent;
}
.cta--primary{background:var(--primary);color:var(--white);box-shadow:var(--shadow-2)}
.cta--primary:hover{background:var(--primary-ink)}
.cta--ghost{background:var(--white);color:var(--primary);border-color:var(--primary);min-height:40px;font-size:14.5px;padding:8px 16px}
.terms{font-size:11.5px;line-height:1.45;color:var(--muted);margin-top:6px}
.review-link{font-size:14px;font-weight:600}

/* ---------- section furniture ------------------------------------------ */
.section{padding:26px 0;border-top:1px solid var(--line)}
.section:first-of-type{border-top:0}
.section__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.section__head h2{margin:0}
.section__lead{color:var(--muted-soft);max-width:80ch}

.jumpnav{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 4px;padding:0;list-style:none}
.jumpnav a{
  display:inline-block;padding:7px 13px;border-radius:var(--r-pill);
  background:var(--white);border:1px solid var(--line);
  font-size:13.5px;font-weight:600;color:var(--secondary);text-decoration:none;
}
.jumpnav a:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-06)}

/* ---------- trust bar --------------------------------------------------- */
.trustbar{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.trustbar__badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--light);border-radius:var(--r-pill);
  padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--muted);
}
.trustbar__badge .icon{color:var(--muted);flex:0 0 13px}

/* ---------- toplist ----------------------------------------------------- */
.toplist{list-style:none;display:grid;gap:16px;margin:18px 0 0}
.toplist__item{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);overflow:hidden;
  display:grid;grid-template-columns:52px 132px 1fr 196px;align-items:center;gap:14px;
}
.toplist__item:hover{box-shadow:var(--shadow-2)}
.toplist__rank{
  align-self:stretch;background:var(--secondary);color:var(--white);
  display:grid;place-items:center;
  font-family:var(--font-head);font-weight:800;font-size:26px;
}
.toplist__logo{
  width:132px;height:62px;border:1px solid var(--line);border-radius:var(--r-md);
  display:grid;place-items:center;padding:6px;margin:12px 0;background:var(--white);
}
.brandmark{
  font-family:var(--font-head);font-weight:800;font-size:15px;color:var(--secondary);
  text-align:center;line-height:1.15;letter-spacing:-.01em;
}
.toplist__body{padding:12px 0}
.speed-chip{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--primary-10);border:1px solid var(--primary);
  color:var(--primary-ink);border-radius:var(--r-pill);
  padding:7px 15px;font-family:var(--font-head);font-weight:800;font-size:19px;line-height:1;
}
.speed-chip .icon{color:var(--primary);flex:0 0 18px}
.speed-chip small{font-family:var(--font-body);font-weight:600;font-size:13px;color:var(--muted)}
.limit-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.chip{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--light);border-radius:var(--r-pill);
  padding:4px 11px;font-size:12.5px;font-weight:600;color:var(--muted);
}
.chip--local{background:var(--sec-06);color:var(--secondary)}
.card-verdict{font-size:14.5px;line-height:1.5;color:var(--muted-soft);margin:8px 0 0;max-width:68ch}
.toplist__aside{padding:12px 14px 12px 0;text-align:center}
.score{display:flex;align-items:baseline;justify-content:center;gap:6px;margin-bottom:8px}
.score__value{font-family:var(--font-head);font-weight:800;font-size:26px;color:var(--secondary)}
.score small{font-size:12.5px;color:var(--muted);font-weight:600}
.toplist__aside .cta{width:100%}
@media (max-width:900px){
  .toplist__item{grid-template-columns:52px 1fr;gap:12px}
  .toplist__logo{margin:12px 0 0;width:120px;height:56px}
  .toplist__body{grid-column:2;padding:12px 14px 0 0}
  .toplist__aside{grid-column:1/-1;padding:0 14px 14px;text-align:left}
  .score{justify-content:flex-start}
}

/* payment-method chips inside the card (mma's best device) */
.payrow{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}
.payicon{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:22px;padding:0 6px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--white);font-family:var(--font-head);font-weight:800;font-size:10px;
  letter-spacing:.02em;color:var(--muted);
}
.payicon:first-child{border-color:var(--primary);color:var(--primary-ink);background:var(--primary-06)}
.speedbars-wrap{margin-top:22px}

/* pros / cons */
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.pros,.cons{list-style:none;font-size:14.5px;display:grid;gap:5px;align-content:start}
.pros li,.cons li{display:flex;gap:8px;align-items:flex-start;line-height:1.45}
.pros li::before{content:"";flex:0 0 8px;height:8px;margin-top:7px;border-radius:2px;background:var(--primary)}
.cons li::before{content:"";flex:0 0 8px;height:2px;margin-top:10px;background:var(--muted)}
@media (max-width:640px){.proscons{grid-template-columns:1fr}}

/* sub-scores */
.subscores{display:grid;gap:7px;margin:12px 0 4px;max-width:520px}
.subscore{display:grid;grid-template-columns:120px 1fr 34px;align-items:center;gap:10px;font-size:13px}
.subscore__bar{height:8px;border-radius:var(--r-pill);background:var(--light);border:1px solid var(--line);overflow:hidden}
.subscore__bar i{display:block;height:100%;background:var(--primary);border-radius:var(--r-pill)}
.subscore b{font-weight:700;color:var(--secondary);text-align:right}
@media (max-width:640px){.subscore{grid-template-columns:96px 1fr 32px;font-size:12.5px}}

/* mini review — full-width collapsed strip at the foot of the card */
.minireview{grid-column:1/-1;border-top:1px solid var(--line);background:var(--primary-04)}
.minireview summary{
  cursor:pointer;list-style:none;padding:9px 40px 9px 16px;position:relative;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.minireview summary::-webkit-details-marker{display:none}
.minireview summary h3{font-size:14.5px;font-weight:700;color:var(--primary-ink);letter-spacing:0;margin:0}
.minireview__cue{font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--muted)}
.minireview[open] .minireview__cue{visibility:hidden}
.minireview summary::after{
  content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;
  border-right:2px solid var(--primary);border-bottom:2px solid var(--primary);
  transform:translateY(-70%) rotate(45deg);
}
.minireview[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.minireview__body{padding:2px 16px 16px;font-size:15px;background:var(--white);border-top:1px solid var(--line)}
.minireview__body .subscores{margin:12px 0 10px;max-width:520px}
.minireview__body .proscons{margin:0 0 10px}
.minireview__body .expert-tip{margin:10px 0}
@media (prefers-reduced-motion:no-preference){.minireview summary::after{transition:transform .18s ease}}

/* logo images inside the fixed boxes */
.toplist__logo img,.pick__logo img{width:100%;height:100%;object-fit:contain}
img.op__logo{object-fit:contain;padding:2px}

/* expert tip */
.expert-tip{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--primary-06);border-left:4px solid var(--primary);
  border-radius:var(--r-md);padding:13px 15px;margin:12px 0;font-size:15px;
}
.expert-tip__avatar{
  width:48px;height:48px;flex:0 0 48px;border-radius:var(--r-pill);
  background:var(--white);border:1px solid var(--line);display:grid;place-items:center;
  font-family:var(--font-head);font-weight:800;font-size:15px;color:var(--secondary);
}
.expert-tip cite{display:block;margin-top:6px;font-style:normal;font-size:13px;color:var(--muted)}

'/* brief reviews (mma's reseñas-breves format) */
.briefs{display:grid;gap:12px;margin-top:16px}
.brief{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--primary);
  border-radius:var(--r-md);padding:13px 16px;box-shadow:var(--shadow-1)}
.brief h3{font-size:17px;margin-bottom:4px}
.brief__meta{font-size:13.5px;color:var(--muted);margin-bottom:6px}
.brief p:last-child{margin-bottom:0;font-size:15px;color:var(--muted-soft)}

/* ---------- the matrix -------------------------------------------------- */
.matrix__wrap{
  overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--white);box-shadow:var(--shadow-1);
  -webkit-overflow-scrolling:touch;
}
.matrix{border-collapse:separate;border-spacing:0;width:100%;min-width:860px;font-size:14.5px}
.matrix caption{caption-side:bottom;padding:10px 14px;font-size:12.5px;color:var(--muted);text-align:left}
.matrix th,.matrix td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.matrix thead th{
  background:var(--light);color:var(--secondary);
  font-family:var(--font-head);font-weight:700;font-size:12.5px;letter-spacing:.01em;
  position:sticky;top:0;z-index:3;border-bottom:1px solid var(--line);
}
.matrix tbody tr:nth-child(even){background:var(--primary-04)}
.matrix tbody tr:last-child td{border-bottom:0}
.matrix th[scope="row"],.matrix .col-op{
  text-align:left;position:sticky;left:0;z-index:2;background:var(--white);
  border-right:1px solid var(--line);min-width:210px;
}
.matrix tbody tr:nth-child(even) th[scope="row"]{background:var(--primary-04)}
.matrix thead th:first-child{z-index:4;left:0}
.op{display:flex;align-items:center;gap:10px}
.op__logo{
  width:38px;height:30px;flex:0 0 38px;border:1px solid var(--line);border-radius:var(--r-sm);
  display:grid;place-items:center;background:var(--white);
  font-family:var(--font-head);font-weight:800;font-size:10px;color:var(--secondary);
}
.op b{font-weight:700;font-size:14.5px;color:var(--ink)}
.matrix .num{font-weight:600}

/* speed tiers — colour + weight + left rule, so greyscale still reads */
.tier--instant{background:var(--primary-16);font-weight:800;box-shadow:inset 4px 0 0 var(--primary)}
.tier--fast{background:var(--primary-10);font-weight:700;box-shadow:inset 3px 0 0 color-mix(in srgb,var(--primary) 60%,var(--white))}
.tier--day{background:var(--primary-04);font-weight:600;box-shadow:inset 2px 0 0 color-mix(in srgb,var(--primary) 30%,var(--white))}
.tier--slow{background:var(--white);font-weight:500;color:var(--muted);box-shadow:inset 1px 0 0 var(--line)}
.tier--na{color:var(--muted);font-weight:500}
.matrix tbody tr:nth-child(even) .tier--slow{background:var(--primary-04)}
.tierkey{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--muted)}
.tierkey span{display:inline-flex;align-items:center;gap:6px}
.tierkey i{width:16px;height:12px;border:1px solid var(--line);border-radius:3px;display:inline-block}

/* split bar (aprobación vs rail) */
.splitbar{display:flex;height:22px;border-radius:var(--r-sm);overflow:hidden;min-width:170px;border:1px solid var(--line)}
.splitbar__approval,.splitbar__rail{
  display:grid;place-items:center;color:var(--white);
  font-size:11px;font-weight:700;font-family:var(--font-head);
}
.splitbar__approval{background:var(--primary)}
.splitbar__rail{background:var(--secondary)}
.splitbar__legend{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-top:3px;min-width:170px}

/* inline speedbar (0–360 min) */
.speedbar{position:relative;height:8px;border-radius:var(--r-pill);background:var(--light);border:1px solid var(--line);min-width:150px}
.speedbar__fill{position:absolute;inset:0 auto 0 0;height:100%;border-radius:var(--r-pill);background:var(--primary)}
.speedbar__knob{position:absolute;top:50%;width:14px;height:14px;border-radius:var(--r-pill);background:var(--primary);border:2px solid var(--white);box-shadow:var(--shadow-1);transform:translate(-50%,-50%)}

/* stacked speedbar rows (standalone visual) */
.speedbars{display:grid;gap:11px;margin:16px 0 6px}
.speedbars .speedbar{min-width:0}
.speedbars__row{display:grid;grid-template-columns:150px 1fr 86px;align-items:center;gap:12px;font-size:14px}
.speedbars__row b{font-weight:700;color:var(--secondary)}
.speedbar__label{text-align:right;font-weight:700;color:var(--primary-ink);font-size:13.5px}
@media (max-width:640px){.speedbars__row{grid-template-columns:104px 1fr 66px;font-size:13px}}

/* ---------- stat strip -------------------------------------------------- */
.statstrip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;margin:18px 0;
}
.stat{background:var(--white);padding:16px 14px;text-align:center}
.stat__num{display:block;font-family:var(--font-head);font-weight:800;font-size:clamp(22px,4vw,30px);color:var(--primary);line-height:1.1}
.stat__label{display:block;margin-top:4px;font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
@media (max-width:640px){.statstrip{grid-template-columns:1fr 1fr}}

/* ---------- timeline ---------------------------------------------------- */
.timeline{list-style:none;margin:16px 0;display:grid;gap:0}
.timeline__step{position:relative;padding:0 0 20px 46px;border-left:2px solid var(--line);margin-left:15px}
.timeline__step:last-child{border-left-color:transparent;padding-bottom:0}
.timeline__step::before{
  content:counter(list-item);counter-increment:list-item;
  position:absolute;left:-16px;top:0;width:30px;height:30px;border-radius:var(--r-pill);
  background:var(--primary);color:var(--white);display:grid;place-items:center;
  font-family:var(--font-head);font-weight:800;font-size:14px;
}
.timeline__step h4{margin-bottom:2px}
.timeline__step p{margin:0;font-size:15px;color:var(--muted-soft)}
.timeline__time{
  display:inline-block;margin-top:6px;background:var(--light);border-radius:var(--r-pill);
  padding:3px 11px;font-size:12.5px;font-weight:700;color:var(--secondary);
}

/* ---------- method ladder ----------------------------------------------- */
.ladder{display:grid;gap:9px;margin:16px 0}
.ladder__tier{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  background:var(--white);border:1px solid var(--line);border-left:5px solid var(--primary);
  border-radius:var(--r-md);padding:12px 15px;box-shadow:var(--shadow-1);
}
.ladder__tier:nth-child(2){border-left-color:color-mix(in srgb,var(--primary) 70%,var(--white))}
.ladder__tier:nth-child(3){border-left-color:color-mix(in srgb,var(--primary) 45%,var(--white))}
.ladder__tier:nth-child(4){border-left-color:var(--line)}
.ladder__tier b{font-family:var(--font-head);font-size:16px;color:var(--secondary)}
.ladder__tier span{font-size:14.5px;color:var(--muted-soft)}
.ladder__tier em{font-style:normal;font-weight:800;color:var(--primary);white-space:nowrap;font-family:var(--font-head)}
@media (max-width:640px){.ladder__tier{grid-template-columns:1fr auto;gap:6px}.ladder__tier span{grid-column:1/-1}}

/* ---------- when-paid grid + comparison table --------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);box-shadow:var(--shadow-1);margin:16px 0}
.whenpaid,.cmptable{border-collapse:separate;border-spacing:0;width:100%;min-width:520px;font-size:14.5px}
.whenpaid th,.whenpaid td,.cmptable th,.cmptable td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left}
.whenpaid thead th,.cmptable thead th{background:var(--light);color:var(--secondary);font-family:var(--font-head);font-weight:700;font-size:12.5px}
.whenpaid tbody tr:last-child td,.cmptable tbody tr:last-child td{border-bottom:0}
.whenpaid tbody tr:nth-child(even),.cmptable tbody tr:nth-child(even){background:var(--primary-04)}
.cmptable td:nth-child(2){font-weight:600;color:var(--primary-ink)}

/* ---------- ordered escalation list ------------------------------------- */
.steps-ol{list-style:none;counter-reset:s;display:grid;gap:12px;margin:16px 0}
.steps-ol li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}
.steps-ol li::before{
  content:counter(s);width:34px;height:34px;border-radius:var(--r-pill);
  background:var(--sec-06);border:1px solid var(--line);color:var(--secondary);
  display:grid;place-items:center;font-family:var(--font-head);font-weight:800;font-size:15px;
}
.steps-ol strong{color:var(--secondary)}

/* ---------- FAQ (CSS-only) ---------------------------------------------- */
.faq{display:grid;gap:10px;margin-top:16px}
.faq__item{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1)}
.faq__item summary{
  cursor:pointer;list-style:none;padding:14px 44px 14px 16px;position:relative;
  font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--secondary);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--primary);border-bottom:2px solid var(--primary);
  transform:translateY(-70%) rotate(45deg);
}
.faq__item[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq__item div{padding:0 16px 15px;font-size:15.5px;color:var(--muted-soft)}
@media (prefers-reduced-motion:no-preference){
  .faq__item summary::after{transition:transform .18s ease}
  .cta,.jumpnav a,.silo-nav a,.toplist__item{transition:background-color .18s ease,box-shadow .18s ease,color .18s ease}
}

/* ---------- author box, related, RG, footer ----------------------------- */
.authorbox{
  display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px;box-shadow:var(--shadow-1);margin-top:18px;
}
.authorbox__avatar{
  width:96px;height:96px;border-radius:var(--r-pill);background:var(--sec-06);
  border:1px solid var(--line);display:grid;place-items:center;
  font-family:var(--font-head);font-weight:800;font-size:30px;color:var(--secondary);
}
.authorbox p{font-size:15px;color:var(--muted-soft);margin-bottom:8px}
@media (max-width:640px){.authorbox{grid-template-columns:1fr}}

.related{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:14px}
.related a{
  display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:13px 15px;text-decoration:none;font-weight:600;font-size:15px;color:var(--secondary);
  box-shadow:var(--shadow-1);
}
.related a:hover{border-color:var(--primary);color:var(--primary)}

.rg-notice{
  background:var(--light);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 16px;margin:22px 0 6px;font-size:13.5px;color:var(--muted);
}
.rg-notice strong{color:var(--secondary)}

.silo-footer{background:var(--secondary);color:var(--white);margin-top:26px;padding:24px 0}
.silo-footer__inner{
  max-width:var(--wrap);margin-inline:auto;padding-inline:16px;font-size:13.5px;
}
.silo-footer__cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;
  padding-bottom:18px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.2);
}
.silo-footer__col h4{color:var(--white);font-size:14px;margin-bottom:8px;opacity:.9}
.silo-footer__col a{display:block;margin:0 0 6px}
.silo-footer a{color:var(--white);text-decoration:none;opacity:.85;margin-right:14px}
.silo-footer a:hover{opacity:1;text-decoration:underline}
.silo-footer p{margin:0;opacity:.85;line-height:1.5}

/* ---------- float CTA (mobile only) ------------------------------------- */
.float-cta{display:none}
@media (max-width:900px){
  .float-cta{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--white);border-top:1px solid var(--line);
    box-shadow:0 -4px 6px var(--shadow);padding:9px 14px;
  }
  .float-cta .cta{width:100%}
  body{padding-bottom:82px}
}

/* ---------- utilities --------------------------------------------------- */
.icon{display:inline-block;vertical-align:middle}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- author portraits fill their round slots --------------------- */
.byline__avatar,.authorbox__avatar,.expert-tip__avatar{overflow:hidden;padding:0}
.byline__avatar img,.authorbox__avatar img,.expert-tip__avatar img{
  width:100%;height:100%;object-fit:cover;border-radius:var(--r-pill);display:block;
}

/* ---------- mobile tables ------------------------------------------------ */
/* Wide .matrix keeps a real scrolling table + sticky first column, with a
   fade edge so the scroll is discoverable. Narrow tables stack into labelled
   rows instead of side-scrolling. */
.matrix__wrap,.tablewrap{position:relative}
@media (max-width:640px){
  .matrix__wrap{
    mask-image:linear-gradient(90deg,#000 92%,transparent);
    scrollbar-width:none;
  }
  .matrix__wrap::-webkit-scrollbar{display:none}
  .matrix__wrap::after{
    content:"Desliza para ver todas las columnas →";
    position:sticky;left:0;display:block;
    padding:6px 14px 10px;font-size:11.5px;color:var(--muted);
  }
  .matrix{min-width:640px;font-size:13.5px}
  .matrix th,.matrix td{padding:10px 11px}
  .matrix th[scope="row"],.matrix .col-op{min-width:150px}
  .op__logo{width:30px;height:24px;flex:0 0 30px}
  .op b{font-size:13.5px}

  /* narrow tables -> stacked cards, one labelled line per cell */
  .tablewrap{overflow-x:visible;border:0;background:none;box-shadow:none}
  .whenpaid,.cmptable{min-width:0;width:100%;display:block;font-size:14.5px}
  .whenpaid thead,.cmptable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .whenpaid tbody,.cmptable tbody{display:block}
  .whenpaid tbody tr,.cmptable tbody tr{
    display:block;background:var(--white);border:1px solid var(--line);
    border-radius:var(--r-md);box-shadow:var(--shadow-1);
    padding:4px 0;margin-bottom:10px;
  }
  .whenpaid tbody tr:nth-child(even),.cmptable tbody tr:nth-child(even){background:var(--white)}
  .whenpaid td,.cmptable td{
    display:grid;grid-template-columns:44% 1fr;gap:10px;align-items:baseline;
    border:0;border-bottom:1px solid var(--light);padding:8px 14px;text-align:left;
  }
  .whenpaid tr td:last-child,.cmptable tr td:last-child{border-bottom:0}
  .whenpaid td::before,.cmptable td::before{
    content:attr(data-label);font-size:12px;font-weight:700;color:var(--muted);
    text-transform:none;line-height:1.35;
  }
  .whenpaid td:first-child,.cmptable td:first-child{
    grid-template-columns:1fr;background:var(--primary-04);
    font-family:var(--font-head);font-weight:700;color:var(--secondary);
    border-radius:var(--r-sm);margin:0 6px 4px;padding:9px 8px;
  }
  .whenpaid td:first-child::before,.cmptable td:first-child::before{display:none}
  .splitbar,.splitbar__legend{min-width:0}
}