/* ==========================================================================
   Subasta Futbolera — Mockups · Design System (identidad actual)
   Paleta y tipografía tomadas del tema en producción.
   ========================================================================== */
:root{
  /* Marca (actual) */
  --green:#006138; --green-700:#004d2c; --green-800:#003c22; --green-050:#e9f2ec;
  --lime:#70a83b; --lime-700:#5a8a2f;
  --yellow:#fdd302; --amber:#db9600;
  --ink:#211915; --ink-soft:#3a332f;
  --muted:#676767; --muted-2:#8c8c8c;
  --line:#e7e7e7; --line-2:#dcdcdc;
  --bg:#ffffff; --surface:#f4f7f4; --surface-2:#eef3ee;

  /* Tipografía */
  --font-display:'Oswald', system-ui, sans-serif;
  --font-body:'Roboto', system-ui, -apple-system, Segoe UI, sans-serif;

  /* Rampa */
  --fs-display:clamp(34px,5vw,64px);
  --fs-h2:clamp(26px,3.4vw,40px);
  --fs-h3:22px; --fs-h4:18px; --fs-body:17px; --fs-sm:15px; --fs-xs:13px;

  /* Espaciado / radios / sombras */
  --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:72px;
  --radius:14px; --radius-lg:22px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(33,25,21,.06), 0 2px 8px rgba(33,25,21,.05);
  --shadow-md:0 10px 30px -12px rgba(0,49,29,.28);
  --maxw:1200px; --ease:cubic-bezier(.32,.72,0,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4,.display{font-family:var(--font-display); font-weight:600; line-height:1.1; margin:0; letter-spacing:.01em}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* Skip link (a11y) */
.skip{position:absolute; left:-9999px; top:0; background:var(--green); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:100}
.skip:focus{left:0}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex; align-items:center; gap:24px; height:72px}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:44px; width:auto}
.nav{display:flex; gap:26px; margin-left:auto; align-items:center}
.nav a:not(.btn){font-family:var(--font-display); font-weight:500; text-transform:uppercase; letter-spacing:.06em; font-size:14px; color:var(--ink); padding:6px 0; border-bottom:2px solid transparent; transition:border-color .2s var(--ease), color .2s var(--ease)}
.nav a:not(.btn):hover,.nav a:not(.btn).active{border-color:var(--yellow); color:var(--green)}
.nav .btn{margin-left:6px}
/* El botón del nav debe conservar su propio color (evita que .nav a lo pise) */
.btn.btn-primary{color:#fff}
.btn.btn-primary:hover{color:#fff}
.btn.btn-yellow{color:var(--ink)}
.btn.btn-ghost{color:var(--green)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:15px; padding:13px 24px; border-radius:var(--radius-pill); border:2px solid transparent; cursor:pointer; transition:transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease)}
.btn-primary{background:var(--green); color:#fff; box-shadow:0 10px 22px -12px rgba(0,97,56,.7)}
.btn-primary:hover{background:var(--green-700); transform:translateY(-2px)}
.btn-yellow{background:var(--yellow); color:var(--ink)}
.btn-yellow:hover{filter:brightness(1.03); transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--green); border-color:var(--green)}
.btn-ghost:hover{background:var(--green-050)}
/* Variante para fondos oscuros (hero, cabeceras verdes): hover con alto contraste */
.btn-ghost-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.72)}
.btn.btn-ghost-light{color:#fff}
.btn-ghost-light:hover{background:#fff; color:var(--green-800); border-color:#fff}
.btn-ghost-light:active{background:var(--yellow); color:var(--ink); border-color:var(--yellow)}
/* Foco visible en todos los botones (accesibilidad) */
.btn:focus-visible{outline:3px solid var(--yellow); outline-offset:3px}
.btn-sm{padding:10px 18px; font-size:13.5px}

/* ---------- Hero ---------- */
.hero{position:relative; background:linear-gradient(135deg,var(--green-800),var(--green) 60%,var(--lime-700)); color:#fff; overflow:hidden}
.hero::after{content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 85% 10%, rgba(253,211,2,.25), transparent 60%); pointer-events:none}
.hero .wrap{position:relative; z-index:2; padding-top:74px; padding-bottom:74px; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center}
.hero .kicker{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.18em; font-size:13px; color:var(--yellow)}
.hero h1{font-size:var(--fs-display); margin:14px 0 16px; font-weight:700}
.hero p{color:rgba(255,255,255,.86); font-size:19px; max-width:46ch}
.hero-actions{display:flex; gap:14px; margin-top:26px; flex-wrap:wrap}
.hero-card{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); border-radius:var(--radius-lg); padding:22px; backdrop-filter:blur(6px)}
.hero-card h3{color:#fff; font-size:18px; margin-bottom:12px; text-transform:uppercase; letter-spacing:.08em}
.hero-card ul{margin:0; padding-left:0; list-style:none}
.hero-card li{display:flex; gap:10px; align-items:flex-start; padding:9px 0; color:rgba(255,255,255,.9); font-size:15.5px; border-bottom:1px dashed rgba(255,255,255,.18)}
.hero-card li:last-child{border-bottom:0}
.hero-card li b{color:var(--yellow)}

/* ---------- Sections ---------- */
.section{padding:var(--sp-8) 0}
.section.alt{background:var(--surface)}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:32px}
.section-head .kicker{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.16em; font-size:13px; color:var(--lime-700)}
.section-head h2{font-size:var(--fs-h2); margin-top:8px; color:var(--green-800)}
.section-head .link{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em; font-size:14px; color:var(--green); white-space:nowrap; border-bottom:2px solid var(--yellow); padding-bottom:2px}

/* ---------- Cards ---------- */
.grid{display:grid; gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease)}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line-2)}
.card .media{aspect-ratio:16/10; background:linear-gradient(135deg,var(--green-050),var(--surface-2)); position:relative; overflow:hidden}
.card .media .tag{position:absolute; top:12px; left:12px; background:var(--yellow); color:var(--ink); font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:12px; padding:5px 10px; border-radius:6px}
.card .media .teams{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:14px; font-family:var(--font-display); font-weight:700; color:var(--green-800); font-size:22px}
.card .media .teams .vs{color:var(--lime); font-size:16px}
.card .body{padding:20px}
.card .meta{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; font-size:12.5px; color:var(--muted); display:flex; gap:10px; align-items:center}
.card h3{font-size:var(--fs-h3); margin:8px 0 8px; color:var(--ink)}
.card p{color:var(--muted); font-size:var(--fs-sm); margin:0}

/* fixture (partidazo) */
.fixture{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.fixture:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.fixture .comp{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; font-size:12px; color:var(--lime-700); display:flex; justify-content:space-between}
.fixture .match{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0}
.fixture .team{font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--ink); text-align:center; flex:1}
.fixture .vs{font-family:var(--font-display); color:var(--muted-2); font-size:15px}
.fixture .when{display:flex; align-items:center; justify-content:space-between; border-top:1px dashed var(--line-2); padding-top:12px; font-size:13.5px; color:var(--muted)}
.fixture .when b{color:var(--green); font-weight:600}

/* dato / stat callout */
.callout{background:var(--green); color:#fff; border-radius:var(--radius-lg); padding:26px; position:relative; overflow:hidden}
.callout::after{content:""; position:absolute; right:-30px; top:-30px; width:140px; height:140px; background:radial-gradient(circle, rgba(253,211,2,.35), transparent 70%)}
.callout .k{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.16em; font-size:12px; color:var(--yellow)}
.callout .big{font-family:var(--font-display); font-size:46px; font-weight:700; line-height:1; margin:8px 0}
.callout p{color:rgba(255,255,255,.86); font-size:14.5px; margin:0}

/* stats row */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line); border-radius:var(--radius); overflow:hidden}
.stats .s{background:#fff; padding:22px 18px; text-align:center}
.stats .s .n{font-family:var(--font-display); font-size:38px; font-weight:700; color:var(--green)}
.stats .s .l{font-size:13px; color:var(--muted)}

/* ---------- Article (long-form) ---------- */
.article-hero{background:var(--green-800); color:#fff; padding:0}
.article-hero .cover{aspect-ratio:21/8; background:linear-gradient(135deg,var(--lime-700),var(--green-800)); display:flex; align-items:flex-end}
.article-hero .inner{padding:40px 0}
.article-hero h1{font-size:clamp(30px,4.4vw,52px); color:#fff; max-width:22ch}
.article-hero .meta{margin-top:16px; color:rgba(255,255,255,.8); font-size:14px; display:flex; gap:16px; flex-wrap:wrap}
.article{max-width:720px; margin:0 auto; padding:56px 24px 24px}
.article p{font-size:19px; line-height:1.75; color:var(--ink-soft); margin:0 0 1.2em}
.article p.lead{font-size:22px; color:var(--ink); font-weight:500}
.article p.lead::first-letter{float:left; font-family:var(--font-display); font-weight:700; font-size:74px; line-height:.72; padding:6px 12px 0 0; color:var(--green)}
.article h2{font-size:28px; margin:40px 0 14px; color:var(--green-800)}
.article figure{margin:32px 0}
.article figure .ph{aspect-ratio:16/9; background:linear-gradient(135deg,var(--green-050),var(--surface-2)); border-radius:var(--radius)}
.article figcaption{font-size:13.5px; color:var(--muted-2); margin-top:10px}
.article blockquote{margin:34px 0; padding:6px 0 6px 22px; border-left:4px solid var(--yellow); font-family:var(--font-display); font-size:26px; line-height:1.3; color:var(--green-800); font-weight:500}
.byline{display:flex; align-items:center; gap:14px; max-width:720px; margin:8px auto 0; padding:0 24px 24px; color:var(--muted); font-size:14px}
.byline .avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--lime),var(--green))}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink); color:rgba(255,255,255,.72); padding:56px 0 28px; margin-top:0}
.site-footer .wrap{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px}
.site-footer h4{color:#fff; font-size:15px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px}
.site-footer a{display:block; padding:5px 0; font-size:14.5px; color:rgba(255,255,255,.72)}
.site-footer a:hover{color:var(--yellow)}
.site-footer .copy{border-top:1px solid rgba(255,255,255,.14); margin-top:32px; padding-top:20px; display:flex; justify-content:space-between; font-size:13px; color:rgba(255,255,255,.55)}
.site-footer .brand img{height:40px; filter:none}

/* ---------- Breadcrumb / page head ---------- */
.page-head{background:var(--surface); border-bottom:1px solid var(--line); padding:34px 0}
.page-head .crumb{font-size:13.5px; color:var(--muted); margin-bottom:8px}
.page-head .crumb a{color:var(--green)}
.page-head h1{font-size:clamp(28px,4vw,46px); color:var(--green-800)}
.page-head p{color:var(--muted); max-width:60ch; margin-top:10px}

/* FAQ */
.faq details{border:1px solid var(--line); border-radius:var(--radius); background:#fff; margin-bottom:12px; padding:4px 20px}
.faq summary{font-family:var(--font-display); font-weight:500; font-size:18px; padding:16px 0; cursor:pointer; list-style:none; display:flex; justify-content:space-between; color:var(--green-800)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--lime); font-size:22px}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted); padding-bottom:14px}

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.step{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-sm)}
.step .no{font-family:var(--font-display); font-weight:700; font-size:34px; color:var(--yellow); -webkit-text-stroke:1px var(--amber)}
.step h3{font-size:20px; margin:10px 0 8px}
.step p{color:var(--muted); font-size:15px; margin:0}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .site-footer .wrap{grid-template-columns:1fr 1fr}
  .nav{display:none}
}
@media (max-width:640px){
  .g4,.g3,.g2{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .site-footer .wrap{grid-template-columns:1fr}
  .section{padding:52px 0}
}

/* Callouts dentro de artículos long-form: conservar texto claro sobre verde */
.article .callout p{color:rgba(255,255,255,.92)}
.article .callout .big{color:#fff}
.article .callout .k{color:var(--yellow)}
/* En notas cortas (Datos), evitar capitular en la entradilla */
.article.note p.lead::first-letter{float:none;font-size:inherit;padding:0;color:inherit;font-family:inherit;font-weight:inherit}

/* ==========================================================================
   ANIMACIONES, MICROINTERACCIONES Y FONDO
   ========================================================================== */

/* Fondo sutil tipo "tablero / césped" */
body{
  background-image:
    radial-gradient(1100px 600px at 100% -10%, rgba(112,168,59,.06), transparent 60%),
    repeating-linear-gradient(90deg, rgba(0,97,56,.035) 0 1px, transparent 1px 88px);
}
.section.alt{
  background-image:
    radial-gradient(900px 520px at 100% 0, rgba(112,168,59,.10), transparent 60%),
    repeating-linear-gradient(90deg, rgba(0,97,56,.035) 0 1px, transparent 1px 88px);
  background-color:var(--surface);
}

/* Hero: degradado vivo + patrón de cancha + parallax suave */
.hero{background-size:170% 170%; animation:heroShift 16s ease-in-out infinite; --hx:0px; --hy:0px}
@keyframes heroShift{0%,100%{background-position:0% 0%}50%{background-position:100% 65%}}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 72px);
  -webkit-mask-image:radial-gradient(130% 90% at 70% 0, #000, transparent 78%);
          mask-image:radial-gradient(130% 90% at 70% 0, #000, transparent 78%);
}
.hero::after{transition:transform .35s var(--ease); transform:translate3d(var(--hx),var(--hy),0)}

/* Reveal al hacer scroll */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.in{opacity:1; transform:none}

/* Header con sombra al hacer scroll */
.site-header{transition:box-shadow .3s var(--ease), background-color .3s var(--ease)}
.site-header.scrolled{box-shadow:0 10px 28px -16px rgba(0,49,29,.45); background:rgba(255,255,255,.97)}

/* Botones: feedback al presionar + icono que se desplaza */
.btn{will-change:transform}
.btn:active{transform:translateY(0) scale(.97)}
.btn .i{width:18px; height:18px; flex:0 0 auto; transition:transform .25s var(--ease)}
.btn:hover .i{transform:translateX(2px)}
.btn.btn-yellow:hover .i{transform:scale(1.08)}

/* Tarjetas: elevación + zoom de imagen suave */
.card{will-change:transform}
.card .media{transition:transform .55s var(--ease); transform-origin:center bottom}
.card:hover .media{transform:scale(1.035)}
.card .media::after{
  content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(0,32,18,.18));
  opacity:0; transition:opacity .35s var(--ease); pointer-events:none;
}
.card:hover .media::after{opacity:1}

/* Fixture: flecha que avanza */
.fixture .when b{transition:transform .25s var(--ease)}
.fixture:hover .when b{transform:translateX(4px)}

/* Enlaces "Ver todos": subrayado animado */
.section-head .link{position:relative}
.section-head .link::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; background:var(--yellow);
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.section-head .link:hover::after{transform:scaleX(1)}

/* Estadísticas: leve realce al entrar */
.stats .s{transition:background-color .3s var(--ease), transform .3s var(--ease)}
.stats .s:hover{background:var(--green-050); transform:translateY(-2px)}

/* Callout: brillo animado */
.callout{background-size:160% 160%; animation:heroShift 18s ease-in-out infinite}

/* Paso a paso: número con latido sutil */
.step{transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.step:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}

/* FAQ: transición de apertura */
.faq details{transition:background-color .25s var(--ease)}
.faq details[open]{background:linear-gradient(180deg,#fff,var(--surface-2))}

/* Accesibilidad: respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  .reveal{opacity:1 !important; transform:none !important}
  .hero,.callout{background-size:auto}
}

/* ==========================================================================
   IMÁGENES REALES (media del sitio + app)
   Los archivos viven en assets/img (junto a este CSS).
   ========================================================================== */

/* Media de tarjetas con texto encima (oscurecido para legibilidad) */
.m-estadio,.m-juego,.m-conmebol,.m-banner,.m-jorney,.m-social,.m-homeleft,.m-campeonato{
  background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important;
}
.m-estadio{background-image:linear-gradient(rgba(6,32,18,.38),rgba(6,32,18,.62)),url('../img/stadium-crowd.jpg') !important}
.m-juego{background-image:linear-gradient(rgba(6,32,18,.32),rgba(6,32,18,.60)),url('../img/ball-grass.jpg') !important}
.m-conmebol{background-image:linear-gradient(rgba(6,32,18,.32),rgba(6,32,18,.60)),url('../img/dribble.jpg') !important}
.m-campeonato{background-image:linear-gradient(rgba(6,32,18,.32),rgba(6,32,18,.60)),url('../img/stadium-night.jpg') !important}
.m-tactics{background-image:linear-gradient(rgba(6,32,18,.34),rgba(6,32,18,.60)),url('../img/tactics-board.jpg') !important}
.m-sunset{background-image:linear-gradient(rgba(6,32,18,.30),rgba(6,32,18,.58)),url('../img/stadium-sunset.jpg') !important}
.m-banner{background-image:linear-gradient(rgba(6,32,18,.32),rgba(6,32,18,.60)),url('../img/pitch.jpg') !important}
.m-jorney{background-image:linear-gradient(rgba(6,32,18,.32),rgba(6,32,18,.60)),url('../img/ball-goal.jpg') !important}
.m-social{background-image:linear-gradient(rgba(6,32,18,.38),rgba(6,32,18,.62)),url('../img/crowd.jpg') !important;background-position:center 32% !important}
.m-homeleft{background-image:linear-gradient(rgba(6,32,18,.38),rgba(6,32,18,.62)),url('../img/player-ball.jpg') !important;background-position:center 26% !important}
.card .media.photo .teams{color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.6)}
.card .media.photo .tag{box-shadow:0 4px 14px rgba(0,0,0,.28)}

/* Portadas e imágenes de artículo (sin texto encima) */
.c-estadio,.c-juego,.c-homeleft,.c-banner,.c-social,.c-jorney{
  background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important;
  background-color:var(--green-800) !important;
}
.c-estadio{background-image:url('../img/stadium-sunset.jpg') !important}
.c-juego{background-image:url('../img/dribble.jpg') !important}
.c-homeleft{background-image:url('../img/crowd.jpg') !important;background-position:center 30% !important}
.c-banner{background-image:url('../img/stadium-night.jpg') !important}
.c-social{background-image:url('../img/tactics-board.jpg') !important}
.c-jorney{background-image:url('../img/player-ball.jpg') !important}

/* Hero con foto de fondo (estadio + capa verde) */
.hero.hero-photo{
  background-image:linear-gradient(135deg,rgba(0,52,29,.82),rgba(0,97,56,.52)),url('../img/stadium-sunset.jpg') !important;
  background-size:cover !important; background-position:center 62% !important; animation:none !important;
}

/* --- Espacios de Google Ads (mockup) --- */
.adslot{
  position:relative; display:flex; align-items:center; justify-content:center; text-align:center;
  border:2px dashed rgba(0,97,56,.5); border-radius:12px; color:#5a7a68;
  background:repeating-linear-gradient(45deg, rgba(0,97,56,.045) 0 12px, transparent 12px 24px);
  font-family:var(--font-display); letter-spacing:.08em; text-transform:uppercase;
}
.adslot b{display:block;font-size:14px;color:var(--green)}
.adslot small{font-family:var(--font-body);text-transform:none;letter-spacing:0;color:var(--muted-2);font-size:12px}
.adslot.lb{min-height:100px}
.adslot.billboard{min-height:220px}
.adslot.rect{min-height:250px}
.adslot.square{min-height:250px}
.adslot.mob{width:320px;min-height:100px;max-width:100%}
.adslot.sticky{min-height:60px}
.adlabel{position:absolute;top:8px;left:10px;font-size:10.5px;letter-spacing:.14em;color:rgba(0,97,56,.75)}
.adframe{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}

/* Botón flotante para volver al índice/galería */
.backbtn{
  position:fixed; left:16px; bottom:16px; z-index:60; display:inline-flex; align-items:center; gap:8px;
  background:rgba(10,18,13,.92); color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:999px;
  padding:11px 18px; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em; font-size:13px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.6); transition:transform .2s var(--ease), background .2s var(--ease);
}
.backbtn:hover{background:var(--green); transform:translateY(-2px)}
.backbtn svg{width:16px;height:16px}
@media print{ .backbtn{display:none} }
@media (max-width:640px){ .backbtn{left:12px; bottom:12px; padding:10px 14px} }

/* ==========================================================================
   HERO COMPUESTO + MASCOTA SOBRE LA IMAGEN
   ========================================================================== */

/* Hero: tablero (izquierda) + modalidades Subasta/Clásica/Pública (derecha) */
.hero .hero-grid{grid-template-columns:0.92fr 1.08fr; gap:clamp(22px,3vw,44px); align-items:center; padding:44px 24px clamp(18px,3vw,34px)}
.hero-copy{padding-bottom:0}
.hero-visual{position:relative; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:clamp(18px,2.4vw,42px)}
.hero-app{position:relative; z-index:1; grid-column:1; grid-row:1; align-self:center; width:auto; height:clamp(318px,32vw,470px);
  border-radius:16px; overflow:hidden; box-shadow:0 44px 80px -34px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.10)}
.hero-app img{display:block; height:100%; width:auto}

/* Modalidades: Subasta / Clásica / Pública */
.hero-modes{grid-column:2; grid-row:1; align-self:center; display:grid; gap:clamp(14px,1.9vw,28px)}
.hero-modes .mode{display:flex; align-items:center; gap:clamp(12px,1.4vw,20px)}
.hero-modes .mode img{height:clamp(72px,7vw,112px); width:auto; transform-origin:bottom center;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.5)); transition:transform .3s var(--ease)}
.hero-modes .mode:hover img{transform:scale(1.06)}
.hero-modes .mode b{display:block; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.07em; font-size:clamp(16px,1.5vw,22px); color:#fff}
.hero-modes .mode span{display:block; color:rgba(255,255,255,.74); font-size:clamp(13px,1.05vw,16px); line-height:1.4}

/* Aparición escalonada (tablero y modalidades) */
@keyframes sfIn{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
.hero-app{animation:sfIn .8s var(--ease) both}
.hero-modes .mode{animation:sfIn .7s var(--ease) both}
.hero-modes .mode:nth-child(1){animation-delay:.18s}
.hero-modes .mode:nth-child(2){animation-delay:.36s}
.hero-modes .mode:nth-child(3){animation-delay:.54s}
@media (prefers-reduced-motion: reduce){ .hero-app,.hero-modes .mode{animation:none} }

/* Mascota por defecto sobre la imagen de fondo (tarjetas y portadas) */
.media.has-mascot .teams{justify-content:flex-end; padding-right:16px}
.media .mascot{position:absolute; left:2px; bottom:0; height:78%; width:auto; z-index:1;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.article-hero .cover{position:relative}
.article-hero .mascot{position:absolute; right:5%; bottom:0; height:80%; width:auto; z-index:2;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.5))}
/* Etiqueta de género */
.tag-f{background:var(--lime) !important; color:#fff !important}

/* Tipo de contenido: Historia (verde) vs Dato (amarillo por defecto en .tag) */
.tag-h{background:var(--green) !important; color:#fff !important}

/* Archivo: destacada a 2/3 + grilla */
.archive-grid{align-items:start}
.archive-grid .archive-featured{grid-column:span 2}
@media (max-width:640px){.archive-grid .archive-featured{grid-column:auto}}

@media (max-width:980px){
  .hero .hero-grid{grid-template-columns:1fr; padding:26px 24px clamp(24px,4vw,36px)}
  .hero-copy{padding-bottom:12px}
  .hero-app{height:clamp(250px,30vw,340px)}
  .hero-modes .mode img{height:clamp(74px,10vw,120px)}
  .media .mascot{height:70%}
}

/* Slider de partidos (hero) */
.mhero{position:relative; background:linear-gradient(135deg,var(--green-800),var(--green) 60%,var(--lime-700)); color:#fff; overflow:hidden}
.mhero::after{content:""; position:absolute; inset:0; background:radial-gradient(700px 340px at 82% 8%, rgba(253,211,2,.22), transparent 60%); pointer-events:none}
.mhero .track{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:34px 64px 8px}
.mslide{display:none}
.mslide.active{display:block; animation:fadeUp .5s var(--ease) both}
.mslide .top{display:flex; justify-content:space-between; align-items:center; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-size:12.5px; color:var(--yellow)}
.mslide .match{display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:center; margin:16px 0 4px}
.mslide .vs{font-family:var(--font-display); font-size:22px; color:var(--yellow)}
.mslide .team{font-family:var(--font-display); font-weight:700; font-size:clamp(22px,3vw,38px); text-align:center}
.mslide .when{color:rgba(255,255,255,.85); font-size:15px; text-align:center}
.mslide .cta{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:14px}
.mnav{position:absolute; top:52%; transform:translateY(-50%); z-index:3; width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.4); background:rgba(0,0,0,.25); color:#fff; cursor:pointer; font-size:20px; display:grid; place-items:center}
.mnav:hover{background:rgba(0,0,0,.45)} .mnav.prev{left:12px} .mnav.next{right:12px}
.mdots{position:relative; z-index:2; display:flex; gap:8px; justify-content:center; padding:14px 0 18px}
.mdots i{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.35); cursor:pointer}
.mdots i.on{background:var(--yellow); width:22px; border-radius:999px}
a.fixture{display:block; color:inherit}
.fixture{cursor:pointer}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* Artículo: portada con título sobre la imagen + personaje aleatorio */
.article-cover{position:relative; min-height:56vh; display:flex; align-items:flex-end; background-size:cover !important; background-position:center 30% !important}
.article-hero .article-cover{aspect-ratio:auto}
.article-cover::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,20,11,.35), rgba(0,20,11,.82)); z-index:1}
.article-cover .cover-inner{position:relative; z-index:3; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px 42px; color:#fff}
.article-cover .crumb{font-family:var(--font-display); letter-spacing:.16em; text-transform:uppercase; font-size:12px; color:var(--yellow)}
.article-cover h1{font-size:clamp(30px,4.4vw,54px); color:#fff; max-width:20ch; margin:10px 0 12px}
.article-cover .meta{color:rgba(255,255,255,.82); font-size:14px; display:flex; gap:16px; flex-wrap:wrap}
.article-cover .hero-char{position:absolute; right:4%; bottom:0; height:92%; width:auto; z-index:2;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.55))}

/* Teaser de videos con personaje encima */
.video-teaser a .mascot{position:absolute; left:auto; right:4%; bottom:0; height:34%; width:auto; z-index:2; filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}
.video-teaser .pb{z-index:3}
.video-teaser .pb i{z-index:4}
.video-teaser .cap{z-index:4; right:auto; max-width:64%}

@media (max-width:900px){
  .mhero .track{padding:26px 52px 6px}
  .article-cover{min-height:44vh}
  .article-cover .hero-char{height:78%}
  .video-teaser a .mascot{height:34%}
}
/* Scrollytelling de videos guía (media sticky + pasos que scrollean) */
.scrolly{display:grid; grid-template-columns:360px 1fr; gap:56px; align-items:start}
.scrolly-media{position:sticky; top:96px; align-self:start}
.scrolly-media .player{width:320px; margin:0 auto}
.scrolly-hint{display:block; text-align:center; margin-top:14px; font-family:var(--font-display); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2)}
.scrolly-steps{display:flex; flex-direction:column}
.scrolly-step{min-height:68vh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; position:relative; padding-bottom:26px;
  opacity:.3; transition:opacity .45s var(--ease), transform .45s var(--ease)}
.scrolly-step::after{content:""; position:absolute; left:0; bottom:0; width:56px; height:2px; background:var(--line-2); transition:width .45s var(--ease), background .45s var(--ease)}
.scrolly-step.on{opacity:1; transform:translateX(8px)}
.scrolly-step.on::after{width:100%; background:var(--yellow)}
.scrolly-step .guide{height:118px; width:auto; margin:0 0 14px}
.scrolly-step .n{font-family:var(--font-display); letter-spacing:.14em; text-transform:uppercase; font-size:12px; color:var(--lime-700)}
.scrolly-step h3{font-size:clamp(24px,2.6vw,34px); margin:8px 0 10px; color:var(--green-800)}
.scrolly-step p{color:var(--muted); max-width:52ch; margin:0}

@media (max-width:980px){
  .scrolly{grid-template-columns:1fr; gap:22px}
  .scrolly-media{position:static}
  .scrolly-step{min-height:0; opacity:1; transform:none; padding:24px 0; border-bottom:1px dashed var(--line-2)}
  .scrolly-step::after{display:none}
  .scrolly-step .guide{height:88px}
}

/* ==========================================================================
   VIDEOS GUÍA (tutoriales verticales 9:16)
   ========================================================================== */
.video-wrap{display:grid; grid-template-columns:320px 1fr; gap:36px; align-items:start}
.player{position:relative; width:320px; max-width:100%; border:12px solid #17130f; border-radius:40px; overflow:hidden;
  background:#000; box-shadow:0 26px 60px -24px rgba(0,0,0,.6)}
.player video{width:100%; display:block; aspect-ratio:9/16; object-fit:cover; background:#000}
.playlist{display:grid; gap:12px}
.playlist button{display:flex; align-items:center; gap:14px; text-align:left; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:12px; cursor:pointer; font-family:var(--font-b); width:100%;
  transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease)}
.playlist button:hover{border-color:var(--lime); transform:translateX(3px)}
.playlist button.active{border-color:var(--green); box-shadow:0 0 0 2px rgba(0,97,56,.14)}
.playlist img{width:56px; height:56px; object-fit:cover; border-radius:8px; flex:0 0 auto}
.playlist .n{display:block; font-family:var(--font-display); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.playlist .t{display:block; font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink)}
.playlist .d{margin-left:auto; color:var(--muted-2); font-size:13px}

.video-teaser{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.video-teaser a{position:relative; display:block; border-radius:12px; overflow:hidden; border:1px solid var(--line);
  aspect-ratio:9/16; background:#000; transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.video-teaser a:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.video-teaser img{width:100%; height:100%; object-fit:cover}
.video-teaser .pb{position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.5))}
.video-teaser .pb i{width:46px; height:46px; border-radius:50%; background:var(--yellow); display:grid; place-items:center; color:var(--ink); font-style:normal}
.video-teaser .cap{position:absolute; left:10px; right:10px; bottom:10px; color:#fff; font-family:var(--font-display); font-size:13px; text-shadow:0 2px 8px rgba(0,0,0,.7)}

@media (max-width:900px){
  .video-wrap{grid-template-columns:1fr; justify-items:center}
  .video-teaser{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================================
   CÓMO SE JUEGA — scrollytelling con fondo que cambia (marca + personajes)
   ========================================================================== */
.scrolly2{position:relative; background:#04120d; color:#fff; padding:0 0 clamp(24px,4vw,40px)}
.scrolly2-bgs{position:absolute; inset:0; overflow:clip; pointer-events:none}
.scrolly2-bg{position:absolute; inset:0; opacity:0; transition:opacity 900ms var(--ease);
  background:
    radial-gradient(62% 52% at 76% 16%, color-mix(in oklab, var(--accent, #006138) 48%, transparent), transparent 62%),
    radial-gradient(50% 60% at 8% 92%, rgba(201,242,76,.10), transparent 60%),
    linear-gradient(160deg, #06241a, #04120d)}
.scrolly2-bg.on{opacity:1}
.scrolly2-glow{position:absolute; inset:-15% -10% auto -10%; height:70%; pointer-events:none;
  background:radial-gradient(38% 40% at 32% 42%, rgba(201,242,76,.10), transparent 70%);
  animation:glowDrift 18s ease-in-out infinite}
@keyframes glowDrift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(5%,3%,0)}}
.scrolly2 .wrap{position:relative; z-index:3}
.scrolly2-intro{min-height:78vh; display:flex; flex-direction:column; justify-content:center; max-width:60ch; padding:clamp(40px,6vw,72px) 0 26px}
.scrolly2-intro .kicker{color:var(--lime)}
.scrolly2-intro h2{color:#fff; font-size:clamp(28px,4vw,50px); margin:8px 0 10px}
.scrolly2-intro p{color:rgba(255,255,255,.78); margin:0; font-size:17px}

.scrolly2-grid{display:grid; grid-template-columns:minmax(280px,340px) 1fr; gap:clamp(32px,5vw,80px); align-items:start}
.scrolly2-media{position:sticky; top:0; height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; align-self:start}
.phone-frame{position:relative; width:clamp(230px,23vw,320px); aspect-ratio:9/20; border:11px solid #17130f; border-radius:40px;
  overflow:hidden; background:#000; box-shadow:0 30px 70px -26px rgba(0,0,0,.75)}
.phone-frame video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .5s var(--ease)}
.phone-frame .sf-still{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s var(--ease)}
.phone-frame.still video{opacity:0; pointer-events:none}
.phone-frame.still .sf-still{opacity:1}
/* Señales de que es un VIDEO */
.pf-badge{position:absolute; top:10px; left:10px; z-index:4; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-display); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#fff;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.32); border-radius:999px; padding:5px 10px;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.pf-badge i{font-style:normal; color:var(--yellow)}
.phone-frame.still .pf-badge{background:rgba(0,60,34,.7)}
.pf-play{position:absolute; inset:0; z-index:3; display:none; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  border:0; cursor:pointer; color:#fff; background:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.55))}
.phone-frame.needs-play .pf-play{display:flex}
.pf-play .ico{width:66px; height:66px; border-radius:50%; background:var(--yellow); color:var(--ink);
  display:grid; place-items:center; font-size:24px; box-shadow:0 14px 34px -10px rgba(0,0,0,.75)}
.pf-play .txt{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.09em; font-size:14px}
.pf-cta{margin-top:12px}
.pf-actions{display:flex; gap:8px; justify-content:center; margin-top:12px; flex-wrap:wrap}
.scrolly2 .scrolly-hint{display:block; text-align:center; margin-top:16px; font-family:var(--font-display); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55)}

.s2-step{min-height:92vh; display:flex; flex-direction:row; align-items:center; gap:clamp(18px,2.6vw,40px);
  position:relative; padding:10px 0 30px; opacity:.35; transition:opacity .5s var(--ease), transform .5s var(--ease)}
.s2-step:last-child{min-height:100vh}
.s2-step::after{content:""; position:absolute; left:0; bottom:0; width:56px; height:2px; background:rgba(255,255,255,.22); transition:width .5s var(--ease), background .5s var(--ease)}
.s2-step.on{opacity:1; transform:translateX(8px)}
.s2-step.on::after{width:100%; background:var(--yellow)}
.s2-step .n{font-family:var(--font-display); letter-spacing:.16em; text-transform:uppercase; font-size:12px; color:var(--yellow)}
.s2-step h3{font-size:clamp(26px,3vw,44px); color:#fff; margin:8px 0 12px}
.s2-step p{color:rgba(255,255,255,.78); max-width:46ch; margin:0; font-size:17px}
.s2-step .who{display:inline-flex; align-items:center; gap:9px; margin-top:16px; font-family:var(--font-display); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.62)}
.s2-step .who img{height:34px; width:auto}
.s2-step .s2-num{flex:0 0 auto; font-family:var(--font-display); font-weight:700; font-size:clamp(52px,6.4vw,104px); line-height:.8;
  color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.32);
  transition:color .5s var(--ease), -webkit-text-stroke-color .5s var(--ease)}
.s2-step.on .s2-num{color:var(--yellow); -webkit-text-stroke-color:transparent}
.s2-step .s2-txt{min-width:0}

@media (prefers-reduced-motion: reduce){
  .scrolly2-bg, .s2-step, .media-stage .player, .media-stage .stage-char{transition:none !important}
  .scrolly2-glow{animation:none}
}
@media (max-width:980px){
  .scrolly2-grid{grid-template-columns:1fr; gap:14px}
  .scrolly2-media{position:sticky; top:70px; height:auto; z-index:5; padding:10px 0 12px;
    background:rgba(4,18,13,.9); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
  .phone-frame{width:clamp(132px,38vw,182px); border-width:8px; border-radius:30px}
  .scrolly2 .scrolly-hint{margin-top:8px; font-size:10.5px}
  .s2-step, .s2-step:last-child{min-height:0; opacity:1; transform:none; padding:24px 0 28px; border-bottom:1px solid rgba(255,255,255,.12)}
  .scrolly2-intro{min-height:0; padding:26px 0 8px}
  .s2-step .s2-num{font-size:clamp(40px,12vw,60px)}
  .s2-step h3{font-size:clamp(24px,6vw,30px)}
  .s2-step p{font-size:15.5px}
  .s2-step::after{display:none}
}

/* ==========================================================================
   LA BANDA SF — marca y personajes
   ========================================================================== */

/* Sección "La Banda" */
.band .member{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 16px 20px;
  text-align:center; box-shadow:var(--shadow-sm); transition:transform .28s var(--ease), box-shadow .28s var(--ease)}
.band .member:hover{transform:translateY(-6px); box-shadow:var(--shadow-md)}
.band .member img{height:150px; width:auto; margin:0 auto 12px; transform-origin:bottom center; transition:transform .3s var(--ease)}
.band .member:hover img{transform:scale(1.07)}
.band .member h3{font-size:19px; margin:0}
.band .member .role{color:var(--muted); font-size:13.5px; margin:3px 0 10px; min-height:2.6em}
.band .member .swatch{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.band .member .swatch i{width:13px; height:13px; border-radius:50%; display:inline-block; border:2px solid #fff; box-shadow:0 0 0 1px var(--line)}
.band .member .desc{color:var(--muted); font-size:13px; line-height:1.5; margin:8px 0 0; min-height:4.4em}
.band .member .role{min-height:0; margin-bottom:2px}

/* Anfitrión de sección (avatar + nombre) */
.host{display:inline-flex; align-items:center; gap:9px; margin-bottom:6px}
.host img{height:38px; width:auto; filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.host .name{font-family:var(--font-display); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--green)}

/* Capitanes en la ficha de partido */
.captain{display:flex; flex-direction:column; align-items:center; gap:4px}
.captain img{height:clamp(78px,9vw,138px); width:auto; filter:drop-shadow(0 16px 26px rgba(0,0,0,.45))}
.captain .cap-role{font-family:var(--font-display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow)}

/* Guía por paso (Cómo se juega) */
.step .guide{height:88px; width:auto; margin:0 auto 10px; display:block}
.step{text-align:left}

/* Autor con personaje (Historias) */
.byline img.author{width:58px; height:58px; object-fit:contain; object-position:top center; border-radius:0; background:transparent}

/* Logos de marca */
.brand img{height:44px; width:auto}
.site-footer .brand img{height:42px; width:auto}

@media (max-width:640px){
  .band .member img{height:120px}
  .hero h1{font-size:clamp(27px,7.4vw,34px); line-height:1.05; margin:8px 0 10px}
  .hero p{font-size:16px; line-height:1.5; margin-bottom:.7em}
  .hero .kicker{margin-bottom:2px}
  .hero-actions{margin-top:14px; gap:8px}
  .hero-actions .btn{padding:12px 15px; font-size:13px; letter-spacing:.02em}
  .hero-visual{gap:14px}
  .hero-app{height:clamp(232px,64vw,306px)}
  .hero-modes{gap:12px}
  .hero-modes .mode img{height:clamp(56px,17vw,78px)}
  .hero-modes .mode b{font-size:14px}
  .hero-modes .mode span{font-size:11.5px}
}
@media (max-width:380px){
  .hero-app{height:clamp(196px,60vw,260px)}
  .hero-modes .mode img{height:clamp(48px,15vw,66px)}
  .hero-modes .mode b{font-size:13px}
  .hero-modes .mode span{font-size:11px}
}