/* Templos del Fútbol — design system (Stitch homepage 1:1, 2026-08-24)
   Light editorial theme. Tokens only in :root; components below. */
:root{
  --t-bg:#FCFBF8;
  --t-ink:#141412;
  --t-ink-soft:#4A4741;
  --t-ink-mute:#7A756C;
  --t-hairline:#E6E2D9;
  --t-green:#0E5C3F;
  --t-terracotta:#B4552D;
  --t-gold:#B08A3C;
  --t-paper-chip:#F3EFE6;
  --t-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --t-sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-max:1280px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--t-bg);color:var(--t-ink);font-family:var(--t-sans);
  font-size:16px;line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover .card-title,a:hover.plain{text-decoration:underline;text-decoration-color:var(--t-gold)}
.wrap{max-width:var(--t-max);margin:0 auto;padding:0 24px}

/* ---------- masthead — two-tier broadsheet ---------- */
.masthead{background:var(--t-bg)}
.mast-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  min-height:106px;padding-top:18px;padding-bottom:16px}
.brand{justify-self:center;display:block}
.brand img{width:min(490px,40vw);height:auto}
.mast-meta{font-family:var(--t-sans);font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--t-ink-mute)}
.mast-date{justify-self:start}
.mast-tag{justify-self:end;text-align:right}
.navband{position:sticky;top:0;z-index:1000;background:var(--t-bg);
  border-top:1px solid var(--t-hairline);border-bottom:2px solid var(--t-ink);
  box-shadow:0 5px 0 -4px var(--t-hairline)}
.nav{display:flex;justify-content:center;align-items:stretch}
.nav>*{border-left:1px solid var(--t-hairline)}
.nav>*:first-child{border-left:none}
.nav a{display:inline-block;font-family:var(--t-serif);font-size:12.5px;font-weight:600;
  color:var(--t-ink);text-transform:uppercase;letter-spacing:.13em;padding:15px 20px 12px;
  border-bottom:3px solid transparent;font-variation-settings:"opsz" 20}
.nav a.active,.nav a:hover{border-bottom-color:var(--t-gold)}
.nav .navdrop{position:relative;display:inline-block}
.nav .navdrop>a::after{content:" ▾";font-size:9px;color:var(--t-gold);letter-spacing:0}
.nav .navdrop-panel{display:none;position:absolute;top:100%;left:-14px;background:var(--t-bg);
  border:1px solid var(--t-hairline);box-shadow:0 8px 24px rgba(20,20,18,.08);
  min-width:180px;padding:8px 0}
.nav .navdrop:hover .navdrop-panel{display:block}
.nav .navdrop-panel a{display:block;padding:10px 16px;border-bottom:none;font-size:12px}
.nav .navdrop-panel a:hover{background:var(--t-paper-chip)}
.burger{display:none;margin-left:auto;width:44px;height:44px;background:none;border:none;
  cursor:pointer;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.burger span{width:22px;height:2px;background:var(--t-ink);display:block}

/* mobile slide-out */
.mobile-panel{display:none}
@media (max-width:900px){
  .nav{display:none}
  .navband{display:none}
  .masthead{position:sticky;top:0;z-index:1000;border-bottom:2px solid var(--t-ink);
    box-shadow:0 5px 0 -4px var(--t-hairline)}
  .mast-top{display:flex;min-height:68px;height:auto;padding-top:9px;padding-bottom:9px;
    gap:16px}
  .mast-meta{display:none}
  .burger{display:flex}
  .brand{margin-right:auto}
  .brand img{width:min(72vw,340px);height:auto}
  .mobile-panel{display:block;position:fixed;inset:0;background:var(--t-bg);z-index:2000;
    transform:translateX(100%);transition:transform .25s ease;padding:24px;overflow-y:auto}
  .mobile-panel.open{transform:translateX(0)}
  .mobile-panel .close{background:none;border:none;font-size:30px;line-height:1;
    position:absolute;top:16px;right:20px;cursor:pointer;color:var(--t-ink)}
  .mobile-panel nav{display:flex;flex-direction:column;margin-top:48px}
  .mobile-panel nav a{font-family:var(--t-serif);font-size:22px;font-weight:600;
    padding:13px 0;border-bottom:1px solid var(--t-hairline);
    font-variation-settings:"opsz" 40}
  .mobile-panel nav a.sub{font-family:var(--t-sans);font-size:16px;padding:10px 0 10px 18px;
    color:var(--t-ink-soft)}
  body.nav-open{overflow:hidden}
}
@media (min-width:901px) and (max-width:1120px){
  .mast-meta{font-size:10px;letter-spacing:.1em}
  .mast-tag{max-width:180px}
  .nav a{font-size:11.5px;padding-left:12px;padding-right:12px}
}

/* ---------- lane tags ---------- */
.tag{display:inline-block;font-family:var(--t-sans);font-size:10.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:#fff;padding:3px 8px;border-radius:2px}
.tag--noticias{background:var(--t-green)}
.tag--aficiones{background:var(--t-terracotta)}
.tag--estadios{background:var(--t-gold)}
.tag--especial{background:var(--t-paper-chip);color:var(--t-ink)}

/* ---------- hero ---------- */
.hero{position:relative;margin-top:0}
.hero .hero-media{position:relative;overflow:hidden;min-height:420px;max-height:520px}
/* DIRECT child only: the byline (and its author avatar) lives inside
   .hero-media, so a bare `.hero-media img` rule stretched the 22px portrait to
   min-height:420px. */
.hero .hero-media > img{width:100%;height:100%;min-height:420px;object-fit:cover;position:absolute;inset:0}
.hero .hero-overlay{position:relative;z-index:2;display:flex;flex-direction:column;
  justify-content:flex-end;min-height:420px;padding:36px 40px;
  background:linear-gradient(180deg,rgba(10,10,8,.12) 0%,rgba(10,10,8,.45) 45%,rgba(10,10,8,.86) 100%)}
.hero h1,.hero .hero-h{font-family:var(--t-serif);font-weight:700;font-size:50px;line-height:1.05;
  letter-spacing:-.01em;font-variation-settings:"opsz" 144;
  color:#fff;max-width:640px;margin:14px 0 12px;text-shadow:0 1px 22px rgba(0,0,0,.5)}
.hero .dek{color:rgba(255,255,255,.9);font-family:var(--t-serif);font-style:italic;
  font-weight:400;font-size:18px;line-height:1.45;max-width:560px;margin-bottom:16px;
  font-variation-settings:"opsz" 18}
.hero .byline{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.85);
  font-size:13.5px}
.hero .byline b{color:#fff;font-weight:600}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--t-paper-chip);
  color:var(--t-ink);display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;font-family:var(--t-sans)}

@media (max-width:600px){
  .hero .hero-media,.hero .hero-media img,.hero .hero-overlay{min-height:380px}
  .hero .hero-overlay{padding:22px 20px;
    background:linear-gradient(180deg,rgba(10,10,8,.22) 0%,rgba(10,10,8,.55) 40%,rgba(10,10,8,.9) 100%)}
  .hero h1,.hero .hero-h{font-size:29px;line-height:1.12}
  .hero .dek{font-size:14.5px}
}

/* ---------- section headers ---------- */
.section-h{display:flex;align-items:baseline;gap:16px;margin:0 0 18px}
.section-h h2{font-family:var(--t-serif);font-size:24px;font-weight:900;white-space:nowrap;
  font-variation-settings:"opsz" 60;letter-spacing:-.01em}
.section-h h2 a:hover{text-decoration:underline;text-decoration-color:var(--t-gold)}
.section-h::after{content:"";flex:1;border-top:1px solid var(--t-hairline);
  transform:translateY(-4px)}

/* ---------- main grid ---------- */
.homegrid{display:grid;grid-template-columns:1fr 340px;gap:48px;margin-top:40px}
@media (max-width:900px){.homegrid{grid-template-columns:1fr;gap:40px;margin-top:32px}}

/* river cards */
.river{display:flex;flex-direction:column}
.river-card{display:grid;grid-template-columns:170px 1fr;gap:18px;padding:18px 0;
  border-bottom:1px solid var(--t-hairline)}
.river-card:first-child{padding-top:0}
.river-card img{width:170px;height:112px;object-fit:cover}
.river-card .card-title{font-family:var(--t-serif);font-size:20px;font-weight:700;
  line-height:1.18;margin:8px 0 5px;font-variation-settings:"opsz" 40}
.river-card .card-dek{font-family:var(--t-serif);font-style:italic;font-size:14.5px;
  color:var(--t-ink-soft);margin-bottom:8px;line-height:1.4}
.river-card .card-meta{font-size:12.5px;color:var(--t-ink-mute)}
.river-card .card-meta b{color:var(--t-ink-soft);font-weight:600}
@media (max-width:600px){
  .river-card{grid-template-columns:112px 1fr;gap:12px}
  .river-card img{width:112px;height:84px}
  .river-card .card-title{font-size:16.5px}
  .river-card .card-dek{display:none}
}

/* rail */
.rail-block{margin-bottom:36px}
.rail-feature img{width:100%;height:200px;object-fit:cover}
.rail-feature .card-title{font-family:var(--t-serif);font-size:21px;font-weight:700;
  line-height:1.16;margin:12px 0 6px;font-variation-settings:"opsz" 40}
.rail-feature .card-dek{font-family:var(--t-serif);font-style:italic;font-size:14px;
  color:var(--t-ink-soft);line-height:1.45}
.mostread{list-style:none;counter-reset:mr}
.mostread li{counter-increment:mr;display:flex;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--t-hairline);align-items:baseline}
.mostread li::before{content:counter(mr) ".";font-family:var(--t-serif);font-size:18px;
  font-weight:700;color:var(--t-ink-mute);min-width:20px}
.mostread a{font-family:var(--t-serif);font-size:15.5px;font-weight:600;line-height:1.3}

/* ---------- full-width sections ---------- */
.band{margin-top:48px}
.cardrow{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.cardrow .card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.cardrow .card .card-title{font-family:var(--t-serif);font-size:20px;font-weight:700;
  line-height:1.18;margin:11px 0 5px;font-variation-settings:"opsz" 40}
.cardrow .card .card-dek{font-family:var(--t-serif);font-style:italic;font-size:14px;
  color:var(--t-ink-soft);line-height:1.42}
.cardrow .card .tag{margin-bottom:0;position:relative;top:-14px;margin-left:10px}
@media (max-width:900px){.cardrow{grid-template-columns:1fr 1fr;gap:20px}}
@media (max-width:600px){.cardrow{grid-template-columns:1fr}}

/* lost temples — sepia */
.lostrow{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.lostrow .card img{width:100%;aspect-ratio:4/3;object-fit:cover;
  filter:grayscale(.85) sepia(.35) contrast(.95)}
.lostrow .card:hover img{filter:grayscale(.3) sepia(.15)}
.lostrow .card .card-title{font-family:var(--t-serif);font-size:17px;font-weight:700;
  line-height:1.22;margin:10px 0 3px;font-variation-settings:"opsz" 40}
.lostrow .card .card-meta{font-size:12.5px;color:var(--t-ink-mute)}
@media (max-width:900px){.lostrow{grid-template-columns:1fr 1fr;gap:20px}}

/* ---------- shared template primitives ---------- */
.breadcrumbs{display:flex;flex-wrap:wrap;gap:6px;color:var(--t-ink-mute);font-size:12px;
  letter-spacing:.04em;margin-bottom:20px}
.breadcrumbs a:hover{color:var(--t-green);text-decoration:underline}
.breadcrumbs span+span::before,.breadcrumbs a+span::before,.breadcrumbs a+a::before{
  content:"/";margin-right:6px;color:var(--t-gold)}
.page-shell{padding-top:46px}
.page-head{max-width:860px;margin-bottom:36px}
.page-head--center{text-align:center;margin-left:auto;margin-right:auto}
.eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-gold);margin-bottom:10px}
.page-head h1,.article-head h1{font-family:var(--t-serif);font-weight:900;
  font-variation-settings:"opsz" 120;letter-spacing:-.025em}
.page-head h1{font-size:52px;line-height:1.04;margin-bottom:16px}
.page-dek{font-family:var(--t-serif);font-style:italic;font-size:20px;line-height:1.5;
  color:var(--t-ink-soft);max-width:760px}
.page-head--center .page-dek{margin-left:auto;margin-right:auto}
.feature-strip{border-bottom:1px solid var(--t-hairline);background:var(--t-paper-chip)}
.feature-strip .wrap{display:flex;align-items:center;gap:0;overflow:hidden}
.feature-strip strong{flex:0 0 auto;padding:11px 18px 11px 0;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--t-green)}
.feature-strip a{flex:1;min-width:0;padding:10px 16px;border-left:1px solid #ddd7ca;
  font-family:var(--t-serif);font-size:12.5px;font-weight:600;line-height:1.25}
.feature-strip a:hover{text-decoration:underline;text-decoration-color:var(--t-gold)}
.template-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:52px}
.template-grid>*{min-width:0}
.content-section{margin-top:44px}
.section-intro{font-family:var(--t-serif);font-size:16px;color:var(--t-ink-soft);
  max-width:760px;margin:-7px 0 22px;line-height:1.5}
.text-link{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t-green)}
.text-link:hover{text-decoration:underline}

/* ---------- hub templates ---------- */
.hub-lead{display:grid;grid-template-columns:1.55fr 1fr;gap:28px;margin-bottom:48px}
.hub-feature{position:relative;min-height:390px;overflow:hidden;background:var(--t-ink)}
.hub-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.82}
.hub-feature__copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:28px;background:linear-gradient(180deg,transparent 25%,rgba(10,10,8,.88) 100%);color:#fff}
.hub-feature .tag{align-self:flex-start}
.hub-feature h2{font-family:var(--t-serif);font-size:34px;line-height:1.06;
  font-variation-settings:"opsz" 90;margin:10px 0 8px;max-width:570px}
.hub-feature p{font-family:var(--t-serif);font-style:italic;font-size:15.5px;color:rgba(255,255,255,.88)}
.hub-secondary{display:grid;grid-template-rows:1fr 1fr;gap:20px}
.hub-mini{display:grid;grid-template-columns:145px 1fr;gap:16px;align-items:center;
  border-bottom:1px solid var(--t-hairline);padding-bottom:20px}
.hub-mini:last-child{border-bottom:0;padding-bottom:0}
.hub-mini img{width:145px;height:112px;object-fit:cover}
.hub-mini h3{font-family:var(--t-serif);font-size:20px;line-height:1.16;margin:7px 0 5px;
  font-variation-settings:"opsz" 40}
.hub-mini p{font-family:var(--t-serif);font-style:italic;font-size:13.5px;color:var(--t-ink-soft)}
.rank-list{list-style:none;counter-reset:ranking}
.rank-list li{counter-increment:ranking;display:grid;grid-template-columns:42px 150px 1fr;
  gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--t-hairline)}
.rank-list li::before{content:counter(ranking,decimal-leading-zero);font-family:var(--t-serif);
  font-size:26px;font-weight:900;color:var(--t-gold)}
.rank-list img{width:150px;height:98px;object-fit:cover}
.rank-list h3{font-family:var(--t-serif);font-size:20px;line-height:1.18;margin-bottom:3px}
.rank-list .place{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t-green);margin-bottom:5px}
.rank-list p{font-family:var(--t-serif);font-style:italic;font-size:14px;color:var(--t-ink-soft)}
.rail-card{border-top:3px solid var(--t-ink);padding-top:14px;margin-bottom:34px}
.rail-card h2{font-family:var(--t-serif);font-size:21px;margin-bottom:12px}
.stat-list{list-style:none}
.stat-list li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;
  border-bottom:1px solid var(--t-hairline);font-size:13px}
.stat-list b{font-family:var(--t-serif);font-size:16px;color:var(--t-green)}
.trust-note{background:var(--t-paper-chip);border-left:3px solid var(--t-gold);padding:18px;
  font-size:13px;color:var(--t-ink-soft)}
.trust-note strong{display:block;color:var(--t-ink);margin-bottom:5px}
.pagination{display:flex;gap:7px;margin-top:28px}
.pagination a,.pagination span{min-width:36px;height:36px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--t-hairline);font-size:13px;font-weight:600}
.pagination .current{background:var(--t-ink);color:#fff;border-color:var(--t-ink)}

/* ---------- article templates ---------- */
.article-page{padding-top:42px}
.article-head{max-width:930px;margin:0 auto 30px;text-align:center}
.article-head .breadcrumbs{justify-content:center}
.article-head h1{font-size:58px;line-height:1.02;margin:12px 0 17px}
.article-standfirst{font-family:var(--t-serif);font-size:21px;font-style:italic;
  line-height:1.5;color:var(--t-ink-soft);max-width:760px;margin:0 auto 20px}
.byline-row{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  color:var(--t-ink-mute);font-size:12.5px}
.byline-row a{color:var(--t-ink);font-weight:600}
.byline-row .avatar{background:var(--t-green);color:#fff}
.updated-pill{background:var(--t-paper-chip);border:1px solid var(--t-hairline);border-radius:999px;
  padding:5px 10px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.article-hero{max-width:1120px;margin:0 auto 38px;padding:0 24px}
.article-hero img{width:100%;max-height:640px;object-fit:cover}
.caption{font-family:var(--t-serif);font-size:12.5px;font-style:italic;color:var(--t-ink-mute);
  padding-top:8px;border-bottom:1px solid var(--t-hairline);padding-bottom:10px}
.article-grid{display:grid;grid-template-columns:minmax(0,720px) 250px;gap:64px;
  max-width:1058px;margin:0 auto;padding:0 24px}
.prose{font-family:var(--t-serif);font-size:18px;line-height:1.78;color:#282622}
.prose>p:first-child::first-letter{float:left;font-size:74px;line-height:.77;font-weight:900;
  padding:13px 9px 0 0;color:var(--t-green)}
.prose p{margin-bottom:24px}
.prose h2{font-size:31px;line-height:1.15;margin:44px 0 18px;font-variation-settings:"opsz" 70}
.prose h3{font-size:23px;line-height:1.2;margin:34px 0 14px}
.prose a{color:var(--t-green);text-decoration:underline;text-decoration-color:#8cad9f;
  text-underline-offset:3px}
.prose figure{margin:36px -54px}
.prose figure img{width:100%;max-height:520px;object-fit:cover}
.prose table{width:100%;border-collapse:collapse;font-family:var(--t-sans);font-size:13px;
  line-height:1.45}
.prose td,.prose th{padding:9px 10px;border:1px solid var(--t-hairline);vertical-align:top;
  overflow-wrap:anywhere}
.prose blockquote{border-left:4px solid var(--t-gold);padding:2px 0 2px 24px;margin:38px 0;
  font-size:28px;font-style:italic;font-weight:600;line-height:1.3;color:var(--t-ink)}
.article-aside{font-size:12.5px;color:var(--t-ink-soft)}
.aside-sticky{position:sticky;top:76px}
.article-aside h2{font-family:var(--t-serif);font-size:18px;border-top:2px solid var(--t-ink);
  padding-top:12px;margin-bottom:8px}
.article-aside ol{padding-left:20px;margin-bottom:28px}
.article-aside li{padding:6px 0}
.article-aside a:hover{color:var(--t-green);text-decoration:underline}
.article-share{display:flex;gap:7px;margin-top:14px}
.article-share a{width:34px;height:34px;border:1px solid var(--t-hairline);display:inline-flex;
  align-items:center;justify-content:center;font-weight:700}
.author-card{display:grid;grid-template-columns:72px 1fr;gap:18px;background:var(--t-paper-chip);
  border-top:3px solid var(--t-green);padding:22px;margin-top:48px}
.author-avatar{width:72px;height:72px;border-radius:50%;background:var(--t-green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--t-serif);font-size:24px;
  font-weight:900}
.author-card h2{font-size:21px;margin:0 0 2px}
.author-role{font:700 10px/1.4 var(--t-sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--t-gold);margin-bottom:7px}
.author-card p{font:13.5px/1.5 var(--t-sans);margin-bottom:6px}

/* ---------- E-E-A-T and author templates ---------- */
.eeat-layout{display:grid;grid-template-columns:230px minmax(0,720px);gap:70px;
  max-width:1040px;margin:0 auto}
.eeat-nav{position:sticky;top:76px;align-self:start;border-top:3px solid var(--t-ink)}
.eeat-nav a{display:block;padding:11px 0;border-bottom:1px solid var(--t-hairline);
  font-size:12px;font-weight:600}
.eeat-nav a.active{color:var(--t-green)}
.eeat-content{font-family:var(--t-serif);font-size:17px;line-height:1.72}
.eeat-content h2{font-size:29px;line-height:1.18;margin:40px 0 14px;
  font-variation-settings:"opsz" 70}
.eeat-content h2:first-child{margin-top:0}
.eeat-content p{margin-bottom:20px}
.eeat-content ul{margin:0 0 24px 22px}
.eeat-content li{margin-bottom:10px;padding-left:5px}
.principles{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0}
.principle{border:1px solid var(--t-hairline);padding:20px}
.principle b{display:block;font-family:var(--t-sans);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t-green);margin-bottom:6px}
.principle p{font-size:14px;line-height:1.5;margin:0;color:var(--t-ink-soft)}
.policy-meta{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 30px}
.policy-meta span{background:var(--t-paper-chip);padding:6px 10px;font:600 11px/1.3 var(--t-sans)}
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:30px}
.contact-card{border:1px solid var(--t-hairline);padding:22px}
.contact-card h2{font-size:22px;margin:0 0 8px}
.contact-card p{font-size:14px;line-height:1.5;margin-bottom:9px;color:var(--t-ink-soft)}
.author-hero{display:grid;grid-template-columns:150px 1fr;gap:34px;align-items:center;
  max-width:880px;margin-bottom:42px}
.author-hero .author-avatar{width:150px;height:150px;font-size:48px}
.author-hero h1{font-family:var(--t-serif);font-size:48px;line-height:1.05;margin-bottom:6px}
.author-hero .author-role{font-size:11px}
.author-hero p{font-family:var(--t-serif);font-size:17px;color:var(--t-ink-soft);max-width:620px}
.author-stats{display:flex;gap:28px;margin-top:15px}
.author-stats span{font-size:11px;color:var(--t-ink-mute)}
.author-stats b{display:block;font-family:var(--t-serif);font-size:22px;color:var(--t-ink)}
.author-directory{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.author-tile{display:grid;grid-template-columns:74px 1fr;gap:16px;border:1px solid var(--t-hairline);
  padding:20px;align-items:center}
.author-tile .author-avatar{width:74px;height:74px;font-size:23px}
.author-tile h2{font-family:var(--t-serif);font-size:21px;line-height:1.15;margin-bottom:2px}
.author-tile p{font-size:12.5px;color:var(--t-ink-soft);margin:6px 0}

/* ---------- shared four-column footer ---------- */
.footer{margin-top:72px;border-top:2px solid var(--t-ink);padding:38px 0 26px;
  font-size:13px;color:var(--t-ink-mute)}
.footer-brand{display:block;width:230px;margin-bottom:28px}
.footer-brand img{width:100%;height:auto}
.footer-grid{display:grid;grid-template-columns:1.25fr repeat(4,1fr);gap:34px}
.footer-about{font-family:var(--t-serif);font-style:italic;font-size:14px;line-height:1.55;
  color:var(--t-ink-soft);max-width:245px}
.footer h2{font:700 10.5px/1.3 var(--t-sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--t-ink);margin-bottom:12px}
.footer nav{display:flex;flex-direction:column;gap:8px}
.footer a{color:var(--t-ink-soft)}
.footer a:hover{text-decoration:underline;text-decoration-color:var(--t-gold)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--t-hairline);
  margin-top:34px;padding-top:18px;font-size:11.5px}

@media (max-width:900px){
  .feature-strip .wrap{overflow-x:auto}.feature-strip a{flex:0 0 230px}
  .page-shell{padding-top:34px}.page-head h1{font-size:43px}
  .template-grid,.article-grid,.eeat-layout{grid-template-columns:1fr;gap:40px}
  .hub-lead{grid-template-columns:1fr}.hub-secondary{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .article-aside{display:none}.prose{max-width:720px;margin:0 auto}
  .eeat-nav{position:static;display:flex;overflow-x:auto;border-top-width:1px}
  .eeat-nav a{flex:0 0 auto;padding:10px 14px;border-right:1px solid var(--t-hairline)}
  .footer-grid{grid-template-columns:1.4fr repeat(2,1fr)}
}
@media (max-width:600px){
  .wrap{padding-left:15px;padding-right:15px}
  .section-h h2{white-space:normal}
  .page-shell{padding-top:28px}.page-head{margin-bottom:28px}.page-head h1{font-size:37px}
  .page-dek{font-size:17px}.feature-strip{display:none}
  .hub-feature{min-height:340px}.hub-feature__copy{padding:21px}.hub-feature h2{font-size:28px}
  .hub-secondary{grid-template-columns:1fr}.hub-mini{grid-template-columns:112px 1fr}
  .hub-mini img{width:112px;height:88px}.hub-mini h3{font-size:17px}
  .rank-list li{grid-template-columns:30px 96px 1fr;gap:10px}
  .rank-list img{width:96px;height:78px}.rank-list h3{font-size:16px}.rank-list p{display:none}
  .article-page{padding-top:27px}.article-head{padding:0 15px}
  .article-head h1{font-size:38px;line-height:1.06}.article-standfirst{font-size:17px}
  .article-hero{padding:0;margin-bottom:30px}.article-hero img{min-height:250px;object-fit:cover}
  .article-grid{padding:0 15px}.prose{font-size:17px;line-height:1.72}
  .prose h2{font-size:26px}.prose figure{margin:30px 0;max-width:100%;overflow-x:auto}
  .prose blockquote{font-size:23px}.prose table{min-width:0}
  .author-card{grid-template-columns:54px 1fr;padding:16px}.author-card .author-avatar{width:54px;height:54px}
  .principles,.contact-grid,.author-directory{grid-template-columns:1fr}
  .author-hero{grid-template-columns:82px 1fr;gap:18px}.author-hero .author-avatar{width:82px;height:82px;font-size:28px}
  .author-hero h1{font-size:34px}.author-hero p{grid-column:1/-1}.author-stats{grid-column:1/-1}
  .footer{margin-top:54px}.footer-grid{grid-template-columns:1fr 1fr;gap:28px 20px}
  .footer-grid>div:first-child{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:6px}
}

/* ---------- byline avatar on tiles (SHARED: homepage + hubs load only this
   stylesheet, so component CSS used outside /entradas/ must live here — the
   first version sat in entradas.css and 400px portraits rendered full-size) */
/* `.river-card img` and `.card img` set a tile-photo size and outrank a bare
   .mini-avatar on specificity — the portraits rendered at 170px until these
   selectors were made equally specific. */
.mini-avatar,
.river-card .mini-avatar,
.card .mini-avatar,
.rel-card .mini-avatar{width:22px;height:22px;min-width:22px;border-radius:50%;
  object-fit:cover;vertical-align:-6px;margin-right:6px;display:inline-block;flex:0 0 auto}
.hero .byline .mini-avatar{width:30px;height:30px;vertical-align:-9px;margin-right:8px}
/* NOT display:flex — flex turns the surrounding text nodes into anonymous flex
   items and eats the spaces, rendering "PorNerea Goikoetxea· 25 ago". The avatar
   is inline-block and aligns with vertical-align instead. */


/* ---------- Destacados ticker (canonical chrome, every page) ----------
   The strip used to be an overflow-x box the reader had to drag by hand, and it
   only existed on article pages. It now runs itself. The track holds the same
   run of headlines TWICE and translates by exactly -50%, so the second copy
   lands where the first began and the loop has no seam. */
.destacados{display:flex;align-items:center;gap:16px;padding:9px 24px;
  border-bottom:1px solid var(--t-hairline);background:var(--t-paper-chip);
  font-family:var(--t-sans);font-size:13px}
.dest-label{flex:0 0 auto;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-ink-mute);font-weight:600}
/* the viewport clips; the track moves. overflow:hidden here (not on .destacados)
   keeps the label pinned while the headlines run past it. */
.dest-viewport{flex:1 1 auto;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
/* NO flex gap and NO :first-child exception here: the loop translates by exactly
   -50%, so the two halves must be identical in width. A gap contributes n-1
   times across the whole track (not n/2 per half) and an exempted first child
   makes half one narrower — either one leaves a visible jump at the seam. Every
   item instead carries its own trailing separator, so half two is a pixel-exact
   copy of half one. */
.dest-track{display:flex;width:max-content;white-space:nowrap;
  animation:dest-run var(--dest-seconds,44s) linear infinite}
.dest-track a{color:var(--t-ink-soft);flex:0 0 auto;text-decoration:none;
  display:inline-flex;align-items:center}
.dest-track a::after{content:"·";margin:0 15px;color:var(--t-ink-mute)}
.dest-track a:hover{color:var(--t-green);text-decoration:underline}
/* pause while someone is reading or tabbing through it */
.destacados:hover .dest-track,.dest-track:focus-within{animation-play-state:paused}
@keyframes dest-run{from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}}
@media (max-width:700px){.destacados{padding:8px 16px;gap:10px;font-size:12.5px}
  .dest-label{font-size:9.5px}}
/* a ticker is motion the reader did not ask for: hold it still and hand back
   manual scrolling when the OS says to reduce motion */
@media (prefers-reduced-motion:reduce){
  .dest-track{animation:none}
  .dest-viewport{overflow-x:auto}}

/* ---------- article: body + sticky "Lo último" rail ----------
   .wrap caps at 760px for reading measure; the grid widens only the article
   template so the rail sits beside the column instead of squeezing it. */
.article .wrap.art-grid{max-width:1160px;display:grid;gap:44px;
  grid-template-columns:minmax(0,760px) 300px;align-items:start}
.art-main{min-width:0}
.latest-rail{position:sticky;top:18px}
.lr-inner{border-top:2px solid var(--t-ink);padding-top:12px}
.lr-label{font-family:var(--t-sans);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t-ink-mute);font-weight:600;margin:0 0 10px}
.lr-list{list-style:none;margin:0;padding:0;counter-reset:lr}
.lr-list li{border-bottom:1px solid var(--t-hairline)}
.lr-list a{display:grid;grid-template-columns:72px 1fr;gap:10px;
  align-items:start;padding:11px 0;text-decoration:none}
.lr-list img{grid-row:1/3;width:72px;height:41px;object-fit:cover;border-radius:2px}
.lr-kicker{font-family:var(--t-sans);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--t-green);font-weight:600}
.lr-title{font-family:var(--t-serif);font-size:14px;line-height:1.32;color:var(--t-ink)}
.lr-list a:hover .lr-title{text-decoration:underline}
.lr-more{display:inline-block;margin-top:12px;font-family:var(--t-sans);font-size:12px;
  color:var(--t-green);text-decoration:none}
.lr-more:hover{text-decoration:underline}
/* below the grid breakpoint the rail is just another block under the story */
@media (max-width:1080px){
  .article .wrap.art-grid{grid-template-columns:minmax(0,1fr);gap:30px;max-width:760px}
  .latest-rail{position:static}
  .lr-list{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
}
@media (max-width:620px){.lr-list{grid-template-columns:1fr}}

/* ---------- hub / homepage editorial block ----------
   Injected below the dynamic feed by build_hub_headings.py. It ships its own
   .wrap: without one the section ran edge-to-edge against the viewport. */
.hub-editorial{border-top:1px solid var(--t-hairline);margin-top:34px;padding:30px 0 8px}
.hub-editorial .wrap{max-width:760px}
.hub-editorial h1{font-family:var(--t-serif);font-weight:700;font-size:34px;
  line-height:1.12;margin:0 0 20px;letter-spacing:-.01em}
.hub-editorial h2{font-family:var(--t-serif);font-weight:700;font-size:23px;
  line-height:1.22;margin:30px 0 12px}
.hub-editorial h2:first-of-type{margin-top:4px}
.hub-editorial p{font-family:var(--t-serif);font-size:17px;line-height:1.62;
  color:var(--t-ink-soft);margin:0 0 15px;max-width:68ch}
@media (max-width:700px){
  .hub-editorial{margin-top:24px;padding:22px 0 4px}
  .hub-editorial h1{font-size:26px}.hub-editorial h2{font-size:20px}
  .hub-editorial p{font-size:16px}}
/* the homepage hero headline is an h2 now (the page's H1 is its own promise,
   and build_homepage rewrites the hero on every run) — keep it looking the same */
.hero .hero-h{font-family:var(--t-serif);font-weight:700;font-size:50px;line-height:1.05;
  letter-spacing:-.01em;font-variation-settings:"opsz" 144;
  color:#fff;max-width:640px;margin:14px 0 12px;text-shadow:0 1px 22px rgba(0,0,0,.5)}
@media (max-width:700px){.hero .hero-h{font-size:29px;line-height:1.12}}

/* ---------- homepage page title (djcoil shape: scope + offer) ----------
   The homepage H1 states what the site is, above the hero. The lead story's
   headline is an h2 inside the hero: it changes hourly and is not the page's
   own promise. */
.pagetitle{border-bottom:1px solid var(--t-hairline);padding:22px 0 18px}
.pagetitle h1{font-family:var(--t-serif);font-weight:700;font-size:27px;line-height:1.16;
  margin:0 0 7px;letter-spacing:-.01em;color:var(--t-ink)}
.pt-dek{font-family:var(--t-sans);font-size:14px;line-height:1.5;
  color:var(--t-ink-mute);margin:0;max-width:70ch}
@media (max-width:700px){
  .pagetitle{padding:16px 0 14px}
  .pagetitle h1{font-size:21px}.pt-dek{font-size:13px}}

/* article comparison tables + FAQ (engine articles) — tables reflow, never scroll sideways */
.art-main .cmp{margin:22px 0}
.art-main .cmp table{width:100%;min-width:0;border-collapse:collapse;font-size:15px;line-height:1.45}
.art-main .cmp caption{text-align:left;font-weight:600;padding:0 0 8px}
.art-main .cmp th,.art-main .cmp td{padding:10px 12px;border-bottom:1px solid #e6e2da;text-align:left;vertical-align:top}
.art-main .cmp th{font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:#5b5750;background:#f6f3ee}
.art-main .faq h3{font-size:18px;margin:22px 0 6px}
@media (max-width:640px){
  .art-main .cmp table,.art-main .cmp tbody,.art-main .cmp caption{display:block;width:100%}
  .art-main .cmp thead{display:none}
  .art-main .cmp tr{display:block;border:1px solid #e6e2da;border-radius:10px;margin:0 0 12px;padding:6px 0;background:#fff}
  .art-main .cmp td{display:block;border:0;padding:6px 12px}
  .art-main .cmp td::before{content:attr(data-label);display:block;font-size:12px;text-transform:uppercase;letter-spacing:.02em;color:#5b5750;margin-bottom:2px}
}

/* ── ranked affiliate toplist (money pages): desktop table rows, mobile cards ── */
.toplist-section{margin:18px 0 26px}
.toplist-section h2{margin-top:0}
.toplist-lead{font-family:var(--t-serif);font-size:17px;line-height:1.5;color:var(--t-ink-soft);margin:6px 0 14px}
.toplist-section .toplist-table,.ent .toplist-table{width:100%;min-width:0;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--t-hairline);border-radius:12px;overflow:hidden}
.toplist-table thead th{text-align:left;padding:10px 12px;background:var(--t-paper-chip);color:var(--t-ink-mute);font-family:var(--t-sans);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--t-hairline)}
.toplist-table tbody td{padding:12px;border-bottom:1px solid var(--t-hairline);vertical-align:middle;font-family:var(--t-sans);font-size:15px}
.toplist-table tbody tr:last-child td{border-bottom:0}
.toplist-row.highlight-row td{background:#FBF7EC}
.toplist-row.highlight-row td:first-child{box-shadow:inset 4px 0 0 var(--t-gold)}
.toplist-table .col-rank{width:44px;font-size:18px;font-weight:800;color:var(--t-ink)}
.toplist-table .col-logo{min-width:200px}
.toplist-table .col-logo .tl-logobox{display:inline-flex;vertical-align:middle;margin-right:12px}
.tl-logobox{background:#fff;border:1px solid var(--t-hairline);border-radius:8px;padding:6px 10px;display:inline-flex;align-items:center;justify-content:center}
.tl-logo{width:96px;height:48px;object-fit:contain;display:block}
.tl-brand{display:inline-flex;flex-direction:column;vertical-align:middle;line-height:1.25}
.tl-desc{font-size:12.5px;color:var(--t-ink-mute)}
.tl-bonus{display:inline-block;background:#FEF3C7;color:#92400E;font-weight:800;font-size:13.5px;line-height:1.3;padding:5px 10px;border-radius:4px}
.tl-rating{color:var(--t-gold);font-weight:800}
.toplist-table .col-cta{width:140px;text-align:right}
.ent .tl-cta,.ent table .tl-cta,.tl-cta{display:inline-block;background:var(--t-green);color:#fff;font-family:var(--t-sans);font-weight:700;font-size:14px;padding:10px 14px;border-radius:8px;text-decoration:none;white-space:nowrap;min-height:44px;line-height:22px}
.ent .tl-cta:hover,.ent table .tl-cta:hover,.tl-cta:hover{background:#0B4A33;color:#fff}
.toplist-table .col-bonus{min-width:150px;max-width:190px}
.toplist-table .col-metric{font-size:13.5px;color:var(--t-ink-soft)}
.ent .toplist-table thead th{background:var(--t-green);color:#fff;font-size:11.5px;letter-spacing:.06em}
.ent .toplist-table{table-layout:auto}
.tl-disclosure{font-size:12.5px;color:var(--t-ink-mute);margin:10px 0 0}
@media (max-width:768px){
  .toplist-table thead{display:none}
  .toplist-table,.toplist-table tbody,.toplist-table tr,.toplist-table td{display:block;width:100%}
  .toplist-section .toplist-table,.ent .toplist-table{border:0;background:none;border-radius:0;overflow:visible;min-width:0}
  .toplist-row.highlight-row td{background:transparent}
  .toplist-table .col-rank{text-align:center}
  .toplist-table tr{border:1.5px solid var(--t-green);border-radius:14px;margin:0 0 12px;padding:12px 14px 14px;background:#fff;text-align:center}
  .toplist-row.highlight-row td{background:#fff}
  .toplist-row.highlight-row{border-color:var(--t-gold);background:#FBF7EC}
  .toplist-row.highlight-row td:first-child{box-shadow:none}
  .ent .toplist-table td,.toplist-table td{border:0;background:transparent;padding:4px 0}
  .toplist-table .col-rank{display:inline-block;width:auto;padding:2px 10px;border-radius:999px;background:var(--t-paper-chip);margin-bottom:4px}
  .toplist-table .col-rank{font-size:13px;color:var(--t-green)}
  .toplist-table .col-rank::before{content:"#"}
  .toplist-table .col-logo{min-width:0}
  .toplist-table .col-logo .tl-logobox{display:flex;margin:0 auto 6px;max-width:180px}
  .tl-logo{width:120px;height:60px}
  .tl-brand{display:flex;align-items:center}
  .toplist-table .col-metric::before,.toplist-table .col-rating::before{content:attr(data-label);display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--t-ink-mute)}
  .tl-bonus{font-size:16px;padding:8px 14px;margin:4px 0}
  .toplist-table .col-cta{width:100%;text-align:center;padding-top:8px}
  .tl-cta{display:block;width:100%}
}
/* per-brand mini-review cards */
.brand-cards{margin:8px 0 16px}
.brand-card{border:1px solid var(--t-hairline);border-radius:12px;padding:16px 18px;margin:0 0 16px;background:#fff}
.bc-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.bc-head h3{font-size:19px;margin:0}
.bc-bonus{font-family:var(--t-sans);font-weight:700;color:#92400E;margin:2px 0 0;font-size:14px}
.bc-score{margin-left:auto;font-family:var(--t-sans);font-weight:800;color:var(--t-gold);font-size:18px;white-space:nowrap}
.bc-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 18px;margin:12px 0;font-family:var(--t-sans);font-size:14px}
.bc-facts dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--t-ink-mute)}
.bc-facts dd{margin:0}
.bc-pc{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin:10px 0}
.bc-pc-h{font-family:var(--t-sans);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:0 0 4px;color:var(--t-ink-mute)}
.bc-pc ul{margin:0;padding-left:18px;font-size:14.5px}
.bc-ctarow{margin:10px 0 0}
@media (max-width:640px){.bc-facts,.bc-pc{grid-template-columns:1fr}.bc-head{flex-wrap:wrap}.bc-score{margin-left:0}.bc-ctarow .tl-cta{display:block;width:100%;text-align:center}}