/* ============================================================
   RETO 3X3 — SISTEMA DE DISEÑO
   "Paquete gráfico de transmisión deportiva" × "drop de streetwear"
   ============================================================ */


:root {
  /* ---- COLOR ---- */
  --reto-yellow: #FFD700;       /* protagonista */
  --reto-yellow-dark: #E6B800;  /* soporte */
  --court-black: #0A0A0A;       /* negro cancha */
  --ink: #0A0A0A;
  --white: #FFFFFF;
  --soft-white: #F8F8F8;
  --g333: #333333;
  --g888: #6f6f6f;              /* texto gris sobre claro — AA (4.5:1+); antes #888 fallaba */
  --gccc: #CCCCCC;
  --navy: #1A2A4A;              /* acento (WIN Sports badge) */
  --reto-red: #E2231A;          /* urgencia / estado (EN VIVO, ÚLTIMO CUPO, SOLD) */

  /* tweakable */
  --accent: var(--reto-yellow);
  --diag: 7deg;                 /* ángulo de cortes diagonales */
  --x-opacity: 0.05;            /* densidad/visibilidad del patrón ×× */
  --x-size: 120px;

  /* ---- TYPE ---- */
  /* Impact es la fuente display elegida (marca). Anton queda como fallback web
     cargado para sistemas sin Impact (Android/Linux); en Win/Mac/iOS rinde Impact nativo. */
  --font-display: 'Impact', 'Anton', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --font-head: 'Archivo Black', 'Arial Black', sans-serif;
  --font-body: 'Archivo', Arial, Helvetica, sans-serif;

  /* ---- SPACE ---- */
  --maxw: 1320px;
  --gutter: clamp(16px, 4vw, 56px);

  /* ---- ANGLES (corners) ---- */
  --notch: 10px;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
/* fondo negro detrás del scroll + sin rebote → no aparece franja blanca al hacer overscroll arriba */
/* fondo blanco detrás del overscroll; body es blanco, html también → no franja negra */
html { -webkit-text-size-adjust: 100%; background: var(--white); overscroll-behavior-y: none; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--white);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--reto-yellow); color: var(--court-black); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.display {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 0.84;
  letter-spacing: 0.01em;
  font-weight: 400;
  margin: 0;
}
.d-hero  { font-size: clamp(64px, 13vw, 200px); }
.d1 { font-size: clamp(48px, 8vw, 116px); }
.d2 { font-size: clamp(38px, 5.5vw, 80px); }
.d3 { font-size: clamp(30px, 4vw, 56px); }

.head {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.02;
  margin: 0;
}
.eyebrow {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.lede { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; color: var(--g333); }
.mono { font-family: 'Archivo', monospace; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

/* chrome / metallic wordmark */
.chrome {
  background: linear-gradient(180deg,#fff 0%,#d9d9d9 38%,#9a9a9a 52%,#f2f2f2 70%,#bdbdbd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(0,0,0,0.35);
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.25));
}
/* section-index number: --accent (yellow) fails on light bg; default to ink.
   Override to yellow inside .section--black. */
.section-index {
  font-family: var(--font-display);
  color: var(--ink);
  font-size: clamp(40px,5vw,72px);
  line-height: 1;
}
.section--black .section-index { color: var(--reto-yellow); }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 8vw, 120px); position: relative; }
.section--black { background: var(--court-black); color: var(--white); }
.section--black .lede { color: var(--gccc); }
.section--soft { background: var(--soft-white); }
.stack { display: flex; flex-direction: column; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; }
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}.gap-32{gap:32px}

/* numbered section header */
.sec-head { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 40px; }
.sec-head .bar { height: 6px; flex: 1; min-width: 40px; background: var(--accent); transform: skewX(calc(var(--diag) * -1)); }

/* ============================================================
   ×× WATERMARK PATTERN
   ============================================================ */
.x-pattern { position: relative; }
.x-pattern::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ctext x='0' y='92' font-family='Arial Black, Arial' font-weight='900' font-size='90' fill='%23000'%3E%C3%97%C3%97%3C/text%3E%3C/svg%3E");
  background-size: var(--x-size) var(--x-size);
  opacity: var(--x-opacity);
  pointer-events: none;
  z-index: 0;
}
.section--black .x-pattern::before,
.x-pattern--light::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ctext x='0' y='92' font-family='Arial Black, Arial' font-weight='900' font-size='90' fill='%23ffffff'%3E%C3%97%C3%97%3C/text%3E%3C/svg%3E");
}
.x-pattern > * { position: relative; z-index: 1; }

/* cierre (CTA del home): UN solo balon-isologo en zoom grande — se desborda y queda
   cortado (no se ve completo). Reemplaza el tile de X SOLO en esta banda (no toca .x-pattern). */
.cierre { overflow: hidden; }
.cierre > * { position: relative; z-index: 1; }
.cierre::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  background-image: url("../img/isologo/reto-isologo-balon.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto clamp(1260px, 450%, 2475px);  /* zoom por altura → sangra arriba/abajo */
  opacity: .12;
}
@media (max-width: 720px) {
  .cierre::before { background-size: auto 195%; opacity: .10; }
}

/* ============================================================
   DIAGONAL SECTION CUTS
   ============================================================ */
.diag-top { clip-path: polygon(0 var(--cut,5vw), 100% 0, 100% 100%, 0 100%); }
.diag-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut,5vw)), 0 100%); }
.band-yellow { background: var(--reto-yellow); color: var(--court-black); }
.band-red    { background: var(--reto-red);    color: var(--white); }      /* urgency band */

/* skewed accent stripe */
.stripe {
  display: inline-block;
  background: var(--accent);
  color: var(--court-black);
  font-family: var(--font-head);
  text-transform: uppercase;
  padding: 6px 16px;
  transform: skewX(calc(var(--diag) * -1));
}
.stripe > span { display: inline-block; transform: skewX(var(--diag)); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  --btn-bg: var(--court-black);
  --btn-fg: var(--white);
  --btn-bd: var(--btn-bg);
  position: relative;
  isolation: isolate;                 /* z-index de los pseudos relativo al botón, no a la página */
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 15px;
  padding: 16px 28px;
  background: transparent;            /* relleno + borde los dibujan ::before / ::after */
  color: var(--btn-fg);
  border: none;
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform .14s ease, color .14s ease;
}
/* El notch va en los pseudo-elementos, NO en el .btn: si el .btn llevara clip-path
   recortaría el ::after y la diagonal del notch quedaría sin borde ("falta un pedacito"). */
.btn::before, .btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
}
.btn::before { background: var(--btn-bg); }   /* relleno con notch */
.btn::after {                                  /* borde de 2px que recorre TODO el contorno (incl. la diagonal) */
  background: var(--btn-bd); padding: 2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.btn:hover { transform: translate(-2px,-2px); }
.btn:active { transform: translate(0,0); }
.btn .arrow { transition: transform .14s ease; }
.btn:hover .arrow { transform: translateX(4px); }

.btn--primary { --btn-bg: var(--reto-yellow); --btn-fg: var(--court-black); --btn-bd: var(--reto-yellow); }
/* "ghost" sobre fondo CLARO = botón SÓLIDO negro con texto blanco (contraste fuerte; nunca botón blanco lavado) */
.btn--ghost { --btn-bg: var(--court-black); --btn-fg: var(--white); --btn-bd: var(--court-black); }
.btn--ghost:hover { --btn-bg: #242424; --btn-bd: #242424; }
/* sobre superficies OSCURAS (sección negra, hero de video, foto-heroes) el ghost vuelve a contorno claro */
.section--black .btn--ghost, .hero .btn--ghost, .pd-hero .btn--ghost, .intl-hero .btn--ghost { --btn-bg: transparent; --btn-fg: var(--white); --btn-bd: var(--white); }
.section--black .btn--ghost:hover, .hero .btn--ghost:hover, .pd-hero .btn--ghost:hover, .intl-hero .btn--ghost:hover { --btn-bg: var(--white); --btn-fg: var(--court-black); color: var(--court-black); }
/* tarjeta blanca dentro de banda oscura — ghost sólido negro con texto blanco */
.section--black .tier:not(.feat) .btn--ghost { --btn-bg: var(--court-black); --btn-fg: var(--white); --btn-bd: var(--court-black); }
.section--black .tier:not(.feat) .btn--ghost:hover { --btn-bg: #242424; --btn-bd: #242424; color: var(--white); }
/* botones sobre BANDAS AMARILLAS = negro sólido con texto blanco (nunca amarillo-sobre-amarillo ni amarillo+blanco) */
.band-yellow .btn, .cierre .btn, .cta-band .btn { --btn-bg: var(--court-black); --btn-fg: var(--white); --btn-bd: var(--court-black); }
.band-yellow .btn:hover, .cierre .btn:hover, .cta-band .btn:hover { --btn-bg: #242424; --btn-bd: #242424; }
.btn--lg { font-size: 18px; padding: 20px 34px; }
.btn--block { width: 100%; justify-content: center; }

/* ============================================================
   CHIPS / FILTERS
   ============================================================ */
.chip {
  font-family: var(--font-head);
  text-transform: uppercase;
  font-size: 13px; letter-spacing: 0.04em;
  padding: 9px 16px;
  border: 2px solid currentColor;
  background: transparent;
  color: var(--g333);
  transition: all .12s ease;
}
.chip:hover { border-color: var(--court-black); color: var(--court-black); }
.chip[aria-pressed="true"], .chip.is-active { background: var(--court-black); color: var(--white); border-color: var(--court-black); }
.section--black .chip { color: var(--gccc); }
.section--black .chip.is-active { background: var(--reto-yellow); color: var(--court-black); border-color: var(--reto-yellow); }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-head); text-transform: uppercase;
  font-size: 11px; letter-spacing: 0.08em;
  padding: 6px 11px; border: 1.5px solid currentColor;
}
.badge--fiba { color: var(--court-black); background: var(--reto-yellow); border-color: var(--reto-yellow); }
.badge--win { color: var(--white); background: var(--navy); border-color: var(--navy); }
.badge--new { color: var(--court-black); background: var(--reto-yellow); border: none; }
.badge--sold { color: var(--white); background: var(--reto-red); border: none; }
.badge--dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.badge--live { color:#fff; background: var(--reto-red); border:none; }
.badge--live .badge-pulse { width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 1.1s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.7)} }

/* ============================================================
   STAT / SCORE CARD (broadcast lower-third)
   ============================================================ */
.statcard {
  background: var(--court-black); color: var(--white);
  border-left: 6px solid var(--reto-yellow);
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 2px;
}
.statcard .num { font-family: var(--font-display); font-size: 44px; line-height: 0.9; color: var(--reto-yellow); }
.statcard .lbl { font-family: var(--font-head); text-transform: uppercase; font-size: 11px; letter-spacing: 0.1em; color: var(--gccc); }

.scorebug {
  display: inline-flex; align-items: stretch;
  font-family: var(--font-head); text-transform: uppercase;
  box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
.scorebug > div { display: flex; align-items: center; padding: 10px 16px; }
.scorebug .sb-team { background: var(--court-black); color:#fff; font-size: 14px; letter-spacing:.08em; }
.scorebug .sb-score { background: var(--reto-yellow); color: var(--court-black); font-family: var(--font-display); font-size: 26px; }
.scorebug .sb-live { background: var(--reto-red); color:#fff; font-size:11px; letter-spacing:.12em; gap:6px;}

/* ============================================================
   CARDS
   ============================================================ */
.card { background: var(--white); border: 2px solid var(--court-black); }
.card--dorsal {
  position: relative; background: var(--white); color: var(--ink); border: 2px solid var(--court-black);
  padding: 26px 22px; overflow: hidden;
  clip-path: polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
  transition: transform .16s ease, outline-color .16s ease;
  outline: 3px solid transparent; outline-offset: -3px;
}
.card--dorsal:hover { transform: translateY(-6px); outline-color: var(--reto-yellow); }
.card--dorsal .dorsal-num {
  position: absolute; right: -10px; top: -22px;
  font-family: var(--font-display); font-size: 150px; line-height: 1;
  color: rgba(10,10,10,0.06);
}
.card--dorsal .cat-name { font-family: var(--font-display); font-size: 40px; line-height: .9; }
.card--dorsal .cat-genre { color: var(--reto-red); font-family: var(--font-head); font-size: 12px; letter-spacing:.1em; text-transform:uppercase; }

/* product card — light surface (BRAND-01 fix) */
.product { background: var(--white); color: var(--ink); border: 2px solid var(--court-black); position: relative; display:flex; flex-direction:column; }
.product .pmedia { position: relative; aspect-ratio: 4/5; overflow:hidden; }
.product .pmedia .ph { position:absolute; inset:0; }
.product .pmedia .ph.alt { opacity:0; transition: opacity .25s ease; }
.product:hover .pmedia .ph.alt { opacity:1; }
.product .pbadges { position:absolute; top:12px; left:12px; display:flex; gap:6px; z-index:2; }
.product .pbody { padding: 16px 16px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.product .pname { font-family: var(--font-head); text-transform:uppercase; font-size:16px; line-height:1.05; }
.product .pcat { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--g888); font-family: var(--font-head); }
.price-tag {
  /* yellow on white fails contrast; use ink. In dark bands override via .section--black or parent */
  font-family: var(--font-display); color: var(--ink); font-size: 26px; line-height:1;
}
.section--black .price-tag { color: var(--reto-yellow); }

/* shop card extras — shared by the store loop AND the home "El drop" teaser (.reto-card).
   Lives here (not woocommerce.css) so the home page renders identical cards (botón + badges). */
.product.reto-card .pmedia { aspect-ratio: 1/1; }
.product.reto-card:hover { outline: 2px solid var(--reto-yellow); outline-offset: -2px; }
.product.reto-card.is-sold { opacity: .65; }
.product .qadd { margin-top: auto; padding-top: 4px; }
.product .add-btn {
  display: inline-block; width: 100%; text-align: center;
  background: var(--reto-yellow); color: #000;
  font-family: var(--font-head); text-transform: uppercase; font-size: 12px; letter-spacing: .03em;
  padding: 9px 14px;
  clip-path: polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%);
  transition: background .14s;
}
.product.reto-card:hover .add-btn { background: var(--court-black); color: var(--white); }
.product .add-btn.is-disabled { background: var(--gccc); color: var(--g333); }

/* ============================================================
   INPUTS
   ============================================================ */
.field { display:flex; flex-direction:column; gap:8px; }
.field label { font-family: var(--font-head); text-transform:uppercase; font-size:12px; letter-spacing:.08em; color: var(--g333); }
.input, .select, textarea.input {
  font-family: var(--font-body); font-size:16px;
  padding: 14px 16px; border: 2px solid var(--court-black); background:#fff; color: var(--ink);
  width:100%;
}
.input:focus, .select:focus, textarea.input:focus { outline: 3px solid var(--reto-yellow); outline-offset:-1px; }
.section--black .input, .section--black .select { background:#141414; color:#fff; border-color:#444; }

/* size selector */
.sizes { display:flex; gap:8px; flex-wrap:wrap; }
.size {
  min-width:42px; height:42px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center;
  border:2px solid currentColor; background:transparent; font-family:var(--font-head); font-size:14px; color:inherit;
}
.size.is-active { background: var(--reto-yellow); color: var(--court-black); border-color: var(--reto-yellow); }
.size:disabled { opacity:.3; text-decoration: line-through; cursor:not-allowed; }

/* ============================================================
   IMAGE PLACEHOLDER (striped + label)
   ============================================================ */
.ph {
  position: relative;
  background-color: #161616;
  background-image: repeating-linear-gradient(
    var(--ph-angle, 135deg),
    #1c1c1c 0 14px, #121212 14px 28px
  );
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ph--light { background-color: #e9e9e9; background-image: repeating-linear-gradient(135deg,#e3e3e3 0 14px,#ededed 14px 28px); }
.ph .ph-label {
  font-family: 'Archivo', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #7a7a7a; border: 1px dashed #555; padding: 6px 10px; background: rgba(0,0,0,.35);
  text-align: center; max-width: 80%;
}
.ph--light .ph-label { color:#999; border-color:#bbb; background: rgba(255,255,255,.5); }
.ph--cut { /* a player-cutout style placeholder hint */ }

/* motion lines decoration */
.motion-lines { position:absolute; pointer-events:none; opacity:.9; }
.motion-off .motion-lines { display:none; }

/* ticker / marquee */
.ticker { overflow:hidden; white-space:nowrap; }
.ticker__track { display:inline-flex; align-items:center; gap:0; animation: ticker-move 28s linear infinite; }
.motion-off .ticker__track { animation: none; }
@keyframes ticker-move { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker__item { display:inline-flex; align-items:center; font-family:var(--font-head); text-transform:uppercase; padding:0 22px; }
.ticker__sep { color: var(--accent); padding: 0 4px; }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--court-black); color:#fff;
  border-bottom: 3px solid var(--reto-yellow);
}
.nav__inner { max-width: var(--maxw); margin:0 auto; padding: 0 var(--gutter);
  height: 64px; display:flex; align-items:center; gap: 24px; }
.nav__brand { font-family: var(--font-display); font-size: 30px; letter-spacing:.02em; display:flex; align-items:center; gap:10px; }
.nav__links { display:flex; align-items:center; gap: 4px; margin-left: 12px; flex:1; }
.nav__links a {
  font-family: var(--font-head); text-transform: uppercase; font-size: 12.5px; letter-spacing:.04em;
  padding: 8px 11px; color:#ddd; position: relative; white-space: nowrap;
}
.nav__links a:hover { color:#fff; }
.nav__links a.is-current { color: var(--reto-yellow); }
.nav__links a.is-current::after { content:""; position:absolute; left:11px; right:11px; bottom:2px; height:3px; background:var(--reto-yellow); }
.nav__actions { display:flex; align-items:center; gap: 10px; }
.nav__cart { position: relative; display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); text-transform:uppercase; font-size:13px; padding:8px 12px; border:2px solid var(--reto-yellow); color: var(--reto-yellow); }
.nav__cart .count { background:var(--reto-yellow); color:#000; font-size:11px; padding:1px 6px; }
.nav__burger { display:none; background:none; border:none; color:#fff; padding:4px 8px; }
.nav__burger-ico { width:26px; height:26px; display:block; }

.ball-mono {
  width: 30px; height: 30px; border-radius:50%;
  background: var(--reto-yellow); position:relative; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--font-display); color: var(--court-black); font-size:15px;
  box-shadow: inset 0 0 0 2px var(--court-black);
}
.ball-mono::before, .ball-mono::after { content:""; position:absolute; background: var(--court-black); }
.ball-mono::before { width:2px; height:100%; left:50%; transform:translateX(-50%); }
.ball-mono::after { width:100%; height:2px; top:50%; transform:translateY(-50%); }
.ball-mono span { position:relative; z-index:2; }

/* mobile nav drawer */
.nav__drawer { display:none; }

@media (max-width: 1000px) {
  .nav__links { position: fixed; inset: 64px 0 auto 0; background: var(--court-black);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 20px;
    border-bottom: 3px solid var(--reto-yellow); transform: translateY(-120%); transition: transform .25s ease; }
  .nav__links.open { transform: translateY(0); }
  .nav__links a { padding: 14px 4px; font-size: 16px; border-bottom: 1px solid #222; }
  .nav__burger { display:block; }
  .nav__brand { font-size: 26px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
/* FOOTER — light surface (BRAND-01 fix) */
.footer { background: var(--soft-white); color: var(--ink); border-top: 3px solid var(--court-black); }
.footer__top { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-block: 64px; }
.footer h4, .footer .footer-h { font-family: var(--font-head); text-transform:uppercase; font-size:13px; letter-spacing:.1em; color: var(--court-black); margin:0 0 16px; }
.footer a { color: var(--g333); display:block; padding:5px 0; font-size:14px; }
.footer a:hover { color: var(--court-black); }
.footer__logo { display:inline-block; line-height:0; }
.footer__logo img { height:56px; width:auto; }
.footer__bottom { border-top: 1px solid var(--gccc); padding-block:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12px; color: var(--g888); }
.footer__bottom a { display:inline; padding:0; color:inherit; text-decoration:underline; text-underline-offset:2px; }
.footer__bottom a:hover { color: var(--court-black); }
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  background:#25D366; color:#fff; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.3);
  transition: transform .14s ease;
}
.wa-float:hover { transform: scale(1.06); }
.wa-float__ico { width:30px; height:30px; }
/* íconos SVG de marca (helper reto_icon) */
.reto-ico { width:1em; height:1em; display:inline-block; vertical-align:middle; flex:none; }
@media (max-width: 800px){ .footer__top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer__top{ grid-template-columns: 1fr; gap:28px; } }

/* ============================================================
   GRIDS
   ============================================================ */
.grid { display:grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }
.grid-5 { grid-template-columns: repeat(5,1fr); }
@media (max-width: 1000px){ .grid-5{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 720px){ .grid-3{grid-template-columns:1fr 1fr} .grid-2{grid-template-columns:1fr} }
@media (max-width: 520px){ .grid-5,.grid-4,.grid-3{grid-template-columns:1fr 1fr} }

/* ============================================================
   COUNTDOWN (scoreboard style)
   ============================================================ */
.countdown { display:inline-flex; align-items:center; gap: 6px; }
.cd-unit { background: var(--court-black); color: var(--reto-yellow); display:flex; flex-direction:column;
  align-items:center; padding: 12px 14px; min-width: 78px; border-bottom: 4px solid var(--reto-yellow); }
.cd-num { font-family: var(--font-display); font-size: clamp(34px,4.5vw,58px); line-height: .9; }
.cd-lbl { font-family: var(--font-head); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color:#999; margin-top:4px; }
.cd-colon { font-family: var(--font-display); font-size: clamp(28px,4vw,48px); color: var(--reto-yellow); opacity:.5; }
.band-yellow .cd-unit { background:#0A0A0A; }
@media (max-width:520px){ .cd-unit{ min-width: 60px; padding: 9px 8px; } }

/* utility */
.skew-fix { transform: skewX(var(--diag)); }
.text-yellow{color:var(--reto-yellow)} .text-navy{color:var(--navy)} .text-red{color:var(--reto-red)}
.bg-yellow{background:var(--reto-yellow)} .bg-black{background:var(--court-black)}
.center{ text-align:center } .relative{position:relative}
.hide-mobile{} @media(max-width:720px){ .hide-mobile{display:none!important} }
.only-mobile{ display:none } @media(max-width:720px){ .only-mobile{display:block} }

.product .pmedia .pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* ============================================================
   ACCESSIBILITY (A11Y audit 2026-06-14)
   ============================================================ */
/* Skip link — visible only on focus */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 1000;
  background: var(--court-black); color: var(--reto-yellow);
  font-family: var(--font-head); text-transform: uppercase; font-size: 13px; letter-spacing: .06em;
  padding: 10px 16px; border: 2px solid var(--reto-yellow); transition: top .15s ease;
}
.skip-link:focus { top: 8px; }

/* Visible focus on every interactive element (was only on form inputs) */
a:focus-visible, button:focus-visible, .btn:focus-visible, .chip:focus-visible,
.size:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 3px solid var(--reto-yellow); outline-offset: 2px;
}
/* On yellow surfaces the yellow ring is invisible → use black */
.band-yellow a:focus-visible, .band-yellow button:focus-visible, .band-yellow .btn:focus-visible,
.cierre a:focus-visible, .cierre button:focus-visible, .cierre .btn:focus-visible {
  outline-color: var(--court-black);
}

/* Respect reduced-motion: stop autoplay loops, ticker, pulse, transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .ticker__track { animation: none !important; }
  .hero__video { display: none; }
  .hero { background-image: var(--hero-poster, none); background-size: cover; background-position: center; }
}