/* ============================================================
   TIPOGRAFÍA DE MARCA — Certanz
   Se usa para TODOS los números del sitio.
   Los archivos viven en la carpeta fonts/
   ============================================================ */
@font-face{
  font-family:'Certanz';
  src:url('../fonts/Certanz-Regular.woff') format('woff'),
      url('../fonts/Certanz-Regular.otf')  format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Certanz';
  src:url('../fonts/Certanz-Italic.woff') format('woff'),
      url('../fonts/Certanz-Italic.ttf')  format('truetype');
  font-weight:400;
  font-style:italic;
  font-display:swap;
}

:root{
  --tinta:#08111F;
  --azul-noche:#0E2544;
  --azul:#1261A6;
  --oro:#F2CA80;
  --oro-hondo:#A4732D;
  --niebla:#E9EFF6;
  --linea:rgba(46,127,196,.30);
  --linea-oro:rgba(242,202,128,.40);
  --display:'Syne',system-ui,sans-serif;
  --texto:'Archivo',system-ui,-apple-system,sans-serif;
  --numeros:'Certanz','Archivo',system-ui,sans-serif;
  --ancho:min(1200px,91vw);
  --radio:14px;
}
*,*::before,*::after{box-sizing:border-box}
/* El recorte horizontal va en los dos: con overflow-x sólo en body, los
   móviles siguen dejando deslizar de lado cuando algo sobresale.
   Se usa "clip" y no "hidden" porque hidden convierte a html en un
   contenedor con scroll y eso rompe los elementos que se quedan fijos
   al hacer scroll, como el formulario de staff. */
html{scroll-behavior:smooth;scroll-padding-top:88px;overflow-x:hidden;overflow-x:clip}
body{margin:0;background:var(--tinta);color:var(--niebla);font-family:var(--texto);font-size:16px;line-height:1.6;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px}

.wrap{width:var(--ancho);margin-inline:auto}
.sec{padding-block:clamp(50px,5.6vw,82px);position:relative}
/* Cuando dos secciones van seguidas, sus rellenos se sumaban y dejaban
   un hueco enorme. La segunda arranca con menos aire arriba. */
.sec + .sec,
.sec + .banda,
.banda + .sec{padding-top:clamp(30px,3.4vw,50px)}
.banda + .sec{padding-top:clamp(24px,2.8vw,42px)}
.franja + .sec{padding-top:clamp(34px,3.8vw,56px)}
.sec--linea{border-top:1px solid var(--linea)}
.sec--azul{background:rgba(14,37,68,.38)}

h1,h2,h3,h4,.h2,.h3{
  font-family:var(--display);font-weight:800;line-height:1.06;margin:0;
  text-transform:uppercase;letter-spacing:-.005em;
}
.h2{font-size:clamp(1.9rem,4.2vw,3rem)}
.h3{font-size:clamp(1.1rem,2vw,1.4rem)}
p{margin:0 0 1em}
.lead{color:rgba(233,239,246,.64);max-width:60ch}
.mini{font-size:.82rem;color:rgba(233,239,246,.45)}

.ceja{font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--oro);display:flex;align-items:center;gap:13px;margin-bottom:16px}
.ceja::before{content:"";width:22px;height:3px;background:var(--oro);border-radius:2px;flex:none}
.cab{margin-bottom:clamp(24px,3vw,38px);text-align:center;max-width:70ch;margin-inline:auto}
.cab .ceja{justify-content:center}
.cab .lead{margin-inline:auto}
.filtros{justify-content:center}
.centrado{text-align:center}
.centrado .lead{margin-inline:auto}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;border-radius:100px;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--linea-oro);background:transparent;color:var(--oro);transition:background .25s,color .25s,border-color .25s,transform .25s}
.btn:hover{background:var(--oro);color:var(--tinta);border-color:var(--oro);transform:translateY(-2px)}
.btn--oro{background:var(--oro);color:var(--tinta);border-color:var(--oro)}
.btn--oro:hover{background:#fff;border-color:#fff}
.btn--azul{background:var(--azul);border-color:var(--azul);color:#fff}
.btn--azul:hover{background:var(--oro);border-color:var(--oro);color:var(--tinta)}
.btn--sm{padding:11px 20px;font-size:.66rem}

/* ---------- Botón de entradas del encabezado ----------
   Es la acción que más nos interesa, así que respira con un halo dorado y
   cada cierto rato lo cruza un destello. No se sacude: un temblor real
   marea y hace más difícil atinarle al botón. */
.nav__cta{
  position:relative;overflow:hidden;
  animation:cta-halo 2.8s ease-in-out infinite;
}
.nav__cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,
    transparent 38%,
    rgba(255,255,255,.85) 50%,
    transparent 62%);
  transform:translateX(-130%);
  animation:cta-destello 3.6s ease-in-out infinite;
}
@keyframes cta-halo{
  0%,100%{box-shadow:0 0 0 0 rgba(242,202,128,.5),  0 0 13px -3px rgba(242,202,128,.55)}
  50%    {box-shadow:0 0 0 8px rgba(242,202,128,0), 0 0 24px  1px rgba(242,202,128,.9)}
}
@keyframes cta-destello{
  0%,74%{transform:translateX(-130%)}
  100%  {transform:translateX(130%)}
}
/* Al apuntarlo ya no hace falta llamar la atención: se queda fijo y brillante */
.nav__cta:hover,
.nav__cta:focus-visible{
  animation-play-state:paused;
  box-shadow:0 0 26px -2px rgba(242,202,128,.95);
}
.nav__cta:hover::after,
.nav__cta:focus-visible::after{animation-play-state:paused;opacity:0}
@media(prefers-reduced-motion:reduce){
  .nav__cta{animation:none;box-shadow:0 0 18px -3px rgba(242,202,128,.7)}
  .nav__cta::after{display:none}
}

.saltar{position:absolute;left:-9999px;top:10px;z-index:999;background:var(--oro);color:var(--tinta);padding:12px 20px;font-weight:700;border-radius:8px}
.saltar:focus{left:12px}

/* Texto solo para lectores de pantalla (encabezados de tabla, leyendas) */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- NAV ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:100;background:rgba(8,17,31,.55);transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.fijo{background:rgba(8,17,31,.96);border-bottom-color:var(--linea);backdrop-filter:blur(12px)}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:18px;height:72px}
.marca{display:flex;align-items:center;gap:11px}
.marca svg{width:38px;height:38px;color:var(--oro);flex:none}
.marca__logo{width:46px;height:46px;object-fit:contain;flex:none}
.marca>span{display:block;line-height:1}
.marca b{font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:.03em;text-transform:uppercase;display:block;line-height:1;color:var(--oro)}
.marca>span>span{font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(233,239,246,.55);display:block;margin-top:5px}
.menu{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.menu a{font-size:.71rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,239,246,.72);padding:6px 0;position:relative;transition:color .2s}
.menu a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--oro);transition:width .3s}
.menu a:hover{color:var(--oro)}
.menu a:hover::after{width:100%}
.burger{display:none;background:none;border:1px solid var(--linea-oro);border-radius:8px;padding:10px 12px;line-height:0}
.burger span{display:block;width:19px;height:2px;background:var(--oro);margin:4px 0;transition:transform .3s,opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1040px){
  /* El menú se esconde, pero el botón de entradas se queda: es la acción
     que más nos interesa y en teléfono quedaba enterrada en el menú.
     Se acorta a "Entradas" para que quepa junto a las tres líneas. */
  .menu{display:none}
  .burger{display:block}
  .nav__row{gap:10px}
  .nav__cta{padding:10px 15px;font-size:.58rem;letter-spacing:.1em;white-space:nowrap;flex:none;margin-left:auto}
  .nav__cta-largo{display:none}
  .menu.abierto{display:flex;flex-direction:column;align-items:stretch;gap:0;position:fixed;top:72px;left:0;right:0;background:rgba(8,17,31,.99);border-bottom:1px solid var(--linea);padding:14px 4.5vw 26px;max-height:calc(100vh - 72px);overflow-y:auto}
  .menu.abierto li{border-bottom:1px solid rgba(242,202,128,.08)}
  .menu.abierto a{display:block;padding:15px 0;font-size:.85rem}
}
/* En pantallas muy angostas el subtítulo del escudo estorba al botón */
@media(max-width:430px){
  .marca__logo{width:38px;height:38px}
  .marca b{font-size:.88rem}
  .marca>span>span{display:none}
  .nav__cta{padding:9px 13px;font-size:.55rem}
}

/* ---------- PORTADA ---------- */
.hero{
  position:relative;min-height:min(78svh,760px);display:flex;align-items:center;overflow:hidden;
  padding:118px 0 46px;
  /* Respaldo cuando no hay WebGL, y lo que se ve en teléfono, donde el
     lienzo animado se apaga a propósito. Dos focos azules desfasados
     imitan el movimiento de las ondas sin costar nada. */
  background:
    radial-gradient(58% 42% at 22% 18%, rgba(18,97,166,.42), transparent 70%),
    radial-gradient(52% 40% at 78% 32%, rgba(18,97,166,.28), transparent 72%),
    radial-gradient(90% 90% at 50% 8%,#12345E,#08111F);
}
/* Capa 0 — ondas animadas en WebGL */
.hero__shader{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;pointer-events:none}
/* Capa 1 — el ocelote sobre Tuxtla, integrado con las ondas */
.hero__foto{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url("../img/ocelote-tuxtla.jpg") center 30%/cover no-repeat;
  opacity:.38;
  -webkit-mask-image:radial-gradient(78% 74% at 50% 42%,#000 26%,transparent 88%);
  mask-image:radial-gradient(78% 74% at 50% 42%,#000 26%,transparent 88%);
}
/* Capa 2 — velo para que el texto se lea siempre */
.hero__velo{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(62% 58% at 50% 46%,rgba(6,13,24,.72),transparent 78%),
    linear-gradient(180deg,rgba(6,13,24,.72) 0%,rgba(6,13,24,.20) 42%,rgba(8,17,31,.92) 82%,var(--tinta) 100%);
}
.hero__patron{position:absolute;inset:0;opacity:.07;z-index:3;pointer-events:none}
.hero__in{position:relative;z-index:5;max-width:64rem;margin-inline:auto;text-align:center}
.hero__in .badge{margin-inline:auto}
.hero__barra{width:66px;height:3px;background:var(--oro);border-radius:2px;margin:22px auto 18px}
.hero__txt{color:rgba(233,239,246,.75);max-width:46ch;margin:0 auto 28px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:0}
.badge{display:inline-flex;align-items:center;gap:10px;background:rgba(18,97,166,.32);border:1px solid var(--linea);border-radius:100px;padding:9px 18px 9px 22px;margin-bottom:24px;font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#DCE9F7}
.dot{width:7px;height:7px;border-radius:50%;background:var(--oro);animation:pulso 2.2s infinite}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(242,202,128,.7)}70%{box-shadow:0 0 0 11px rgba(242,202,128,0)}100%{box-shadow:0 0 0 0 rgba(242,202,128,0)}}
.hero h1{
  font-size:clamp(2.4rem,7.6vw,5.9rem);
  text-transform:uppercase;letter-spacing:0;line-height:1.06;margin:0;
  text-align:center;
  color:var(--oro);
  text-shadow:0 2px 0 rgba(164,115,45,.5), 0 12px 34px rgba(0,0,0,.55);
}
.hero h1 small{display:block;font-size:clamp(.95rem,2.6vw,1.85rem);letter-spacing:.2em;text-indent:.2em;color:#fff;margin-top:14px;text-shadow:0 8px 24px rgba(0,0,0,.6)}
.hero__rol{font-size:.8rem;font-weight:700;letter-spacing:.2em;text-indent:.2em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.hero__lema{font-family:var(--display);font-style:italic;font-weight:800;font-size:clamp(1.1rem,2.6vw,1.7rem);color:var(--oro);margin:0 0 18px}
@media(max-width:700px){.hero{min-height:auto;padding:104px 0 40px}}

/* ---------- FRANJA: PRÓXIMO PARTIDO ---------- */
.franja{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--tinta) 0%,var(--tinta) 16%,#0E2544 62%,#0B1C34 100%);
  margin-top:-1px;
  border-top:0;border-bottom:1px solid var(--linea);
}
.franja__manchas{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../img/marca/textura-manchas.png") center/cover no-repeat;
  opacity:.07;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 22%,#000 62%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0%,transparent 22%,#000 62%,#000 100%);
}
.franja__row{position:relative;z-index:1;display:grid;justify-items:center;gap:16px;padding:clamp(26px,3.4vw,40px) 0;text-align:center}
.franja__ceja{font-size:.6rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--oro);margin:0}

.marcador{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(14px,3vw,40px);width:min(760px,100%)}
.marcador__team{display:grid;justify-items:center;gap:12px}
.marcador__nom{font-family:var(--display);font-weight:800;font-size:clamp(.86rem,1.8vw,1.15rem);text-transform:uppercase;line-height:1.2;max-width:16ch}
.escudo{width:clamp(54px,7vw,74px);height:clamp(54px,7vw,74px);border-radius:14px;display:grid;place-items:center;background:rgba(8,17,31,.5);border:1px solid var(--linea-oro);overflow:hidden}
.escudo img{width:100%;height:100%;object-fit:cover;display:block}
.escudo:empty{border-style:dashed;border-color:rgba(242,202,128,.24)}
.marcador__vs{
  font-family:var(--display);font-weight:800;font-size:clamp(1rem,2.2vw,1.5rem);letter-spacing:.06em;
  color:var(--oro);border:1px solid var(--linea-oro);border-radius:100px;padding:9px 18px;
  background:rgba(8,17,31,.5);
}
.franja__cuando{font-size:.83rem;color:rgba(233,239,246,.62);margin:0}

/* Contador estilo marcador digital */
.digital{display:flex;align-items:flex-start;gap:clamp(5px,1vw,10px);margin-top:6px}
.digital__bloque{display:grid;justify-items:center;gap:8px}
.digital__bloque b{
  display:block;min-width:clamp(58px,8vw,76px);padding:12px 8px;
  font-family:var(--numeros);font-weight:400;
  font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1;letter-spacing:.06em;
  color:#FFD98F;background:#050D18;border:1px solid rgba(242,202,128,.3);border-radius:8px;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 12px rgba(242,202,128,.55);
  box-shadow:inset 0 2px 12px rgba(0,0,0,.7);
}
.digital__bloque span{font-size:.52rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(233,239,246,.42)}
.digital__dos{
  font-family:var(--numeros);font-weight:400;
  font-size:clamp(1.3rem,3vw,2rem);color:rgba(242,202,128,.55);
  padding-top:12px;animation:parpadeo 1.6s steps(1) infinite;
}
@keyframes parpadeo{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.digital__dos{animation:none}}
@media(max-width:520px){
  .marcador{grid-template-columns:1fr;gap:14px}
  .marcador__vs{justify-self:center}
}

/* ---------- TARJETAS GENERALES ---------- */
.grid{display:grid;gap:clamp(13px,1.8vw,20px)}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.card{border:1px solid var(--linea);border-radius:var(--radio);background:linear-gradient(160deg,rgba(20,48,86,.62),rgba(10,23,42,.82));padding:26px 24px;transition:border-color .3s,transform .3s}
.card:hover{border-color:var(--linea-oro);transform:translateY(-4px)}

.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.datos div{background:#0B1A2F;padding:22px 20px}
.datos dt{font-size:.57rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--oro);margin-bottom:9px}
.datos dd{margin:0;font-size:.92rem;line-height:1.45}

.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;margin-top:clamp(24px,3vw,36px)}
.cifras div{background:#0B1A2F;padding:26px 22px}
.cifras b{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1;color:var(--oro);display:block;font-variant-numeric:tabular-nums}
.cifras span{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(233,239,246,.5);margin-top:11px;display:block;line-height:1.5}

/* ---------- DIRECCIÓN ---------- */
.staff-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));max-width:820px;margin-inline:auto}
.staff-grid .card{padding:16px 16px 22px}
.coach__foto{aspect-ratio:1/1;border-radius:10px;background:#0A1B33;position:relative;overflow:hidden;display:grid;place-items:center;margin-bottom:18px}
.coach__foto img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.coach__foto svg{width:46%;opacity:.24;color:var(--oro)}
.coach h3{color:var(--oro);text-align:center;text-transform:uppercase;font-size:.94rem;line-height:1.2}
.coach p{text-align:center;font-size:.78rem;color:rgba(233,239,246,.55);margin:7px 0 0}
.pill{display:inline-flex;background:linear-gradient(90deg,var(--azul),#0D4C86);border:1px solid var(--linea);border-radius:100px;padding:10px 24px;font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#fff}
.pill--oro{background:linear-gradient(90deg,var(--oro-hondo),#8A5F20)}

/* ---------- ROSTER ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filtro{border:1px solid var(--linea);background:transparent;color:rgba(233,239,246,.6);padding:10px 20px;border-radius:100px;font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;transition:background .25s,border-color .25s,color .25s}
.filtro:hover{border-color:var(--linea-oro);color:#fff}
.filtro[aria-pressed="true"]{background:var(--oro);border-color:var(--oro);color:var(--tinta)}
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:clamp(11px,1.5vw,16px)}
.pj{position:relative;text-align:left;width:100%;padding:0;overflow:hidden;border:1px solid var(--linea);border-radius:var(--radio);background:linear-gradient(168deg,rgba(20,48,86,.7),rgba(10,23,42,.9));transition:border-color .3s,transform .3s}
.pj:hover{border-color:var(--linea-oro);transform:translateY(-5px)}
.pj__img{position:relative;aspect-ratio:3/3.4;overflow:hidden;background:linear-gradient(180deg,#0D2444,#081527);display:grid;place-items:center}
.pj__img img{width:100%;height:100%;object-fit:cover;object-position:top center}
.pj__img>svg.sil{width:52%;opacity:.24;color:var(--oro)}
.pj__num{position:absolute;right:9px;bottom:0;font-family:var(--display);font-weight:800;font-size:4.6rem;line-height:.78;color:transparent;-webkit-text-stroke:1.4px rgba(242,202,128,.5);font-variant-numeric:tabular-nums;pointer-events:none;transition:color .3s}
.pj:hover .pj__num{color:rgba(242,202,128,.14)}
.pj__tag{position:absolute;top:9px;left:9px;font-size:.52rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:100px;background:rgba(8,17,31,.85);border:1px solid var(--linea-oro);color:var(--oro)}
.pj__tag.oro{background:var(--oro);color:var(--tinta)}
.pj__pie{display:block;padding:15px 16px 17px}
.pj__cat{display:block;font-size:.55rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--oro);margin-bottom:7px}
.pj__nom{display:block;font-family:var(--display);font-weight:800;font-size:.95rem;text-transform:uppercase;line-height:1.1}
.pj__meta{display:block;font-size:.72rem;color:rgba(233,239,246,.45);margin-top:6px}

/* ---------- CALENDARIO ---------- */
.leyenda{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-bottom:clamp(28px,3.4vw,42px)}
.leyenda__item{display:flex;align-items:center;gap:9px;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(233,239,246,.6)}
.leyenda__punto{width:11px;height:11px;border-radius:3px;flex:none}
.leyenda__punto--local{background:var(--oro)}
.leyenda__punto--visita{background:var(--azul)}

.meses{display:grid;gap:clamp(30px,4vw,46px)}
.mes__nombre{display:flex;align-items:center;gap:14px;font-size:clamp(1.1rem,2.2vw,1.5rem);letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--linea)}
.mes__nombre span{font-family:var(--texto);font-size:.68rem;font-weight:600;letter-spacing:.2em;color:var(--oro);margin-left:auto}
.mes__juegos{display:grid;gap:11px}

.juego{
  display:grid;grid-template-columns:86px 1fr auto;gap:clamp(14px,2.4vw,26px);align-items:center;
  border:1px solid var(--linea);border-left:4px solid var(--azul);border-radius:var(--radio);
  background:linear-gradient(100deg,rgba(18,97,166,.16),rgba(10,23,42,.6));
  padding:16px 22px;transition:transform .3s,border-color .3s,background .3s;
}
.juego:hover{border-color:var(--linea-oro)}
.juego--local{border-left-color:var(--oro);background:linear-gradient(100deg,rgba(164,115,45,.2),rgba(10,23,42,.6))}
.juego--local:hover{background:linear-gradient(100deg,rgba(164,115,45,.34),rgba(10,23,42,.6))}
.juego--visita{border-left-color:var(--azul);background:linear-gradient(100deg,rgba(18,97,166,.16),rgba(10,23,42,.6))}
.juego--visita:hover{background:linear-gradient(100deg,rgba(18,97,166,.3),rgba(10,23,42,.6))}
.juego__fecha{text-align:center;border-right:1px solid var(--linea);padding-right:14px}
.juego__fecha b{display:block;font-family:var(--display);font-weight:800;font-size:1.35rem;line-height:1;color:var(--oro);font-variant-numeric:tabular-nums}
.juego__fecha span{display:block;font-size:.56rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(233,239,246,.5);margin-top:7px}
.juego__equipo{display:flex;align-items:center;gap:15px;min-width:0}
.juego__logo{width:56px;height:56px;flex:none;border-radius:12px;display:grid;place-items:center;overflow:hidden;background:rgba(8,17,31,.4)}
.juego__logo:empty{border:1px dashed rgba(242,202,128,.24)}
.juego__logo img{width:100%;height:100%;object-fit:cover;display:block}
.juego__rival{font-family:var(--display);font-weight:800;font-size:clamp(.95rem,1.8vw,1.15rem);line-height:1.15}
.juego__sede{font-size:.76rem;color:rgba(233,239,246,.5);margin:6px 0 0}
.juego__marbete{font-size:.56rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:7px 15px;border-radius:100px;white-space:nowrap}
.juego--local .juego__marbete{background:var(--oro);color:var(--tinta)}
.juego--visita .juego__marbete{background:var(--azul);color:#fff}
@media(max-width:640px){
  .juego{grid-template-columns:64px 1fr;gap:13px;padding:15px 16px}
  .juego__marbete{grid-column:1/-1;justify-self:start}
  .juego__logo{width:42px;height:42px}
}

.envivo{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;
  border:1px solid var(--linea);border-radius:var(--radio);
  background:linear-gradient(160deg,rgba(20,48,86,.7),rgba(10,23,42,.85));
  padding:clamp(22px,3vw,32px);margin-top:clamp(30px,4vw,46px);
}
.envivo__titulo{font-size:clamp(1.05rem,2vw,1.3rem);margin-bottom:8px}
.envivo__nota{font-size:.85rem;color:rgba(233,239,246,.58);margin:0;max-width:46ch}
.envivo__redes{display:flex;gap:11px;flex-wrap:wrap}
.envivo__btn{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:100px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;transition:transform .25s,filter .25s}
.envivo__btn svg{width:19px;height:19px;flex:none}
.envivo__btn:hover{transform:translateY(-3px);filter:brightness(1.12)}
.envivo__btn--yt{background:#FF0033}
.envivo__btn--fb{background:#0866FF}

/* ---------- ARENA ---------- */
.arena{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(26px,4vw,54px);align-items:center}
.duela{border:1px solid var(--linea);border-radius:var(--radio);padding:clamp(14px,2.2vw,26px);background:linear-gradient(160deg,rgba(16,40,74,.55),rgba(9,20,36,.72))}
.duela svg{width:100%;height:auto;display:block}
.aforo{text-align:center;padding:clamp(24px,3vw,34px)}
.aforo b{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,6vw,3.8rem);line-height:1;color:var(--oro);display:block;font-variant-numeric:tabular-nums}
.aforo span{font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(233,239,246,.55);margin-top:11px;display:block}
.tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.tag{border:1px solid var(--linea);border-radius:100px;padding:9px 17px;font-size:.67rem;color:rgba(233,239,246,.7);background:rgba(14,37,68,.5)}
@media(max-width:880px){.arena{grid-template-columns:1fr}}

/* ---------- GALERÍA ---------- */
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.foto{position:relative;overflow:hidden;border:1px solid var(--linea);border-radius:10px;aspect-ratio:16/9;background:#0A1B33;padding:0;width:100%;display:block;transition:border-color .3s,transform .3s}
.foto:hover{border-color:var(--linea-oro);transform:scale(1.015)}
.foto img{width:100%;height:100%;object-fit:cover}
.foto__p{position:absolute;inset:0;opacity:.15}
.foto__cap{position:absolute;inset:auto 0 0 0;padding:14px 15px;text-align:left;background:linear-gradient(to top,rgba(6,13,24,.92),transparent)}
.foto__cap i{display:block;font-style:normal;font-size:.54rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--oro)}
.foto__cap b{display:block;font-family:var(--display);font-weight:700;font-size:.86rem;margin-top:5px;line-height:1.2}

/* ---------- PATROCINIOS ---------- */
.niveles{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:clamp(12px,1.5vw,17px);align-items:stretch;max-width:1000px;margin-inline:auto}
.nivel{display:flex;flex-direction:column;padding:22px 20px}
.nivel--top{border-color:var(--oro);background:linear-gradient(168deg,rgba(30,62,105,.9),rgba(12,28,50,.95))}
.nivel__cinta{align-self:center;background:linear-gradient(90deg,var(--oro),#D3A253);color:var(--tinta);font-size:.5rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 14px;border-radius:100px;margin-bottom:10px}
.nivel h3{text-align:center;text-transform:uppercase;font-size:.98rem;line-height:1.18;color:#fff}
.nivel__precio{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3.2vw,2.15rem);color:var(--oro);line-height:1;margin:11px 0 4px;text-align:center;font-variant-numeric:tabular-nums}
.nivel__mxn{font-size:.7rem;color:rgba(233,239,246,.5);text-align:center}
.nivel ul{list-style:none;margin:16px 0;padding:0;display:grid;gap:7px;flex:1}
.nivel li{font-size:.79rem;color:rgba(233,239,246,.72);padding-left:17px;position:relative;line-height:1.4}
.nivel li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--oro)}
.jersey b{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,3.4vw,2.4rem);color:var(--oro);display:block;line-height:1;font-variant-numeric:tabular-nums;margin-top:12px}
.jersey h3{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#fff;font-family:var(--texto)}
.espacio{display:flex;gap:14px;align-items:flex-start}
.espacio i{font-style:normal;font-family:var(--display);font-weight:800;font-size:.72rem;color:#fff;background:var(--azul);border-radius:100px;padding:6px 12px;white-space:nowrap;flex:none}
.espacio strong{display:block;font-family:var(--display);font-size:1.4rem;color:var(--oro);margin-top:8px}

.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:clamp(14px,2vw,26px)}
.logos figure{margin:0;display:grid;justify-items:center;gap:12px}
.logo-caja{width:100%;aspect-ratio:16/10;display:grid;place-items:center;border-radius:10px;transition:transform .3s}
.logo-caja:empty{border:1px dashed rgba(242,202,128,.22)}
.logos figure:hover .logo-caja{transform:translateY(-4px)}
.logo-caja img{width:100%;height:100%;object-fit:contain}
.logos figure:hover .logo-caja img{filter:none;opacity:1}
.logos figcaption{font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(233,239,246,.45);text-align:center;line-height:1.4;transition:color .3s}

/* ============================================================
   AJUSTES PARA TELÉFONO
   ============================================================ */
@media(max-width:820px){
  /* La portada ocupa la pantalla entera: así funciona como intro y no se
     ve la siguiente sección asomando. svh y no vh, porque vh en Android
     cuenta la barra de direcciones y deja la portada más alta de la cuenta. */
  .hero{min-height:100svh;padding:104px 0 40px}
}

@media(max-width:620px){
  /* Roster en dos columnas: a una sola, cada tarjeta ocupaba
     casi toda la pantalla y había que raspar mucho. */
  .roster{grid-template-columns:repeat(2,1fr);gap:10px}
  .pj__pie{padding:11px 11px 13px}
  .pj__nom{font-size:.8rem;line-height:1.15}
  .pj__cat{font-size:.5rem;letter-spacing:.14em;margin-bottom:5px}
  .pj__meta{font-size:.66rem;margin-top:4px}
  .pj__num{font-size:3.2rem;right:7px}
  .pj__tag{font-size:.46rem;padding:4px 8px;top:7px;left:7px}

  /* Patrocinadores más chicos: tres por renglón en vez de dos */
  .logos{grid-template-columns:repeat(3,1fr);gap:14px 10px}
  .logo-caja{aspect-ratio:1/1}
  .logos figure{gap:7px}
  .logos figcaption{font-size:.5rem;letter-spacing:.07em}
}
@media(max-width:360px){
  .logos{grid-template-columns:repeat(2,1fr)}
}
.logos figure:hover figcaption{color:var(--oro)}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{list-style:none;cursor:pointer;padding:21px 42px 21px 0;position:relative;font-family:var(--display);font-weight:700;font-size:.98rem;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--oro)}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;margin-top:-7px;border-right:2px solid var(--oro);border-bottom:2px solid var(--oro);transform:rotate(45deg);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{padding:0 42px 22px 0;font-size:.89rem;color:rgba(233,239,246,.58);margin:0}

/* ---------- CONTACTO ---------- */
.contacto{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(28px,4vw,58px)}
/* El formulario de contacto se pliega igual que el de staff */
.contacto__caja[open] .staff__resumen{border-radius:14px;margin-bottom:14px}
@media(max-width:820px){
  .contacto__caja > .staff__resumen{display:flex}
}

.canal{display:flex;gap:15px;align-items:flex-start;border-top:1px solid var(--linea);padding-top:17px;margin-top:17px}
.canal i{font-style:normal;width:34px;height:34px;flex:none;border:1px solid var(--linea-oro);border-radius:8px;display:grid;place-items:center;color:var(--oro)}
.canal b{display:block;font-size:.59rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--oro);margin-bottom:5px}
.canal span{font-size:.91rem;line-height:1.5}
.canal a:hover{color:var(--oro)}
form{display:grid;gap:14px}
.campo{display:grid;gap:7px}
.campo label{font-size:.59rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(233,239,246,.55)}
.campo input,.campo select,.campo textarea{font:inherit;font-size:.92rem;color:var(--niebla);background:rgba(11,26,47,.75);border:1px solid var(--linea);border-radius:8px;padding:13px 15px;width:100%}
.campo textarea{resize:vertical;min-height:120px}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--oro);outline:none}
.campo select option{background:var(--azul-noche)}
.campo.mal input,.campo.mal select,.campo.mal textarea{border-color:#E88A8A}
.campo .err,.campo .error{font-size:.72rem;color:#E88A8A;display:none;margin-top:6px}
.campo.mal .err,.campo.mal .error{display:block}
.par{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.aviso{border:1px solid var(--linea-oro);border-radius:8px;background:rgba(242,202,128,.1);padding:14px 16px;font-size:.86rem;color:var(--oro);display:none}
.aviso.on{display:block}
@media(max-width:820px){.contacto{grid-template-columns:1fr}.par{grid-template-columns:1fr}}

/* ---------- CIERRE + PIE ---------- */
.cierre{text-align:center;padding-block:clamp(60px,7vw,96px);background:linear-gradient(180deg,rgba(14,37,68,.5),var(--tinta))}
.cierre .gl{width:clamp(96px,12vw,132px);height:auto;margin:0 auto 24px;display:block;filter:drop-shadow(0 10px 30px rgba(0,0,0,.55))}
.cierre .sum{font-size:.7rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:#fff;margin-bottom:14px}
/* El mínimo estaba en 1.9rem, y a ese tamaño "#CaminoDeOcelote" no cabe
   en un teléfono: son 16 letras en mayúsculas de un tipo ancho. Ahora el
   tamaño sigue al ancho de la pantalla hasta hacerse bastante más chico. */
.cierre .lema{font-family:var(--display);font-style:italic;font-weight:800;font-size:clamp(1.05rem,6.2vw,3.8rem);line-height:1;margin:0 0 16px;background:linear-gradient(178deg,#FDF2DA,#E0B063);-webkit-background-clip:text;background-clip:text;color:transparent;max-width:100%}
.cierre .bts{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:22px}

.pie{border-top:1px solid var(--linea);background:#050C16;padding-top:clamp(42px,5vw,62px)}
.pie__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,40px);padding-bottom:38px}
.pie h4{font-size:.59rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--oro);margin:0 0 16px;font-family:var(--texto)}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pie ul a{font-size:.84rem;color:rgba(233,239,246,.55)}
.pie ul a:hover{color:var(--oro)}
.redes{display:flex;gap:9px;margin-top:20px;flex-wrap:wrap}
.redes a{width:39px;height:39px;border:1px solid var(--linea);border-radius:8px;display:grid;place-items:center;color:rgba(233,239,246,.6);transition:border-color .25s,color .25s,transform .25s}
.redes a:hover{border-color:var(--oro);color:var(--oro);transform:translateY(-3px)}
.pie__base{border-top:1px solid var(--linea);padding:20px 0 28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.72rem;color:rgba(233,239,246,.38)}
@media(max-width:900px){.pie__grid{grid-template-columns:1fr 1fr}.pie__grid>div:first-child{grid-column:1/-1}}

/* ---------- MODALES ---------- */
/* Fijo a la pantalla, no al documento: si la página llegara a poder
   deslizarse de lado, el modal aparecía recorrido y se cortaba. */
dialog{border:1px solid var(--linea-oro);border-radius:var(--radio);background:#0C1E38;color:var(--niebla);padding:0;position:fixed;inset:0;margin:auto;max-width:min(760px,94vw);width:100%;max-height:92svh;overflow:auto}
dialog::backdrop{background:rgba(3,8,16,.9)}
.cerrar{position:absolute;top:12px;right:12px;z-index:5;width:38px;height:38px;border:1px solid var(--linea-oro);border-radius:8px;background:rgba(8,17,31,.8);color:var(--oro);display:grid;place-items:center}
.cerrar:hover{background:var(--oro);color:var(--tinta)}
.ficha{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1fr)}
.ficha__img{position:relative;background:#0A1B33;min-height:280px;display:grid;place-items:center;overflow:hidden}
.ficha__img img{width:100%;height:100%;object-fit:cover;object-position:top center}
.ficha__img>svg.sil{width:46%;opacity:.24;color:var(--oro)}
.ficha__num{position:absolute;left:14px;bottom:0;font-family:var(--display);font-weight:800;font-size:6rem;line-height:.78;color:transparent;-webkit-text-stroke:1.4px rgba(242,202,128,.42)}
.ficha__body{padding:clamp(22px,3vw,34px)}
.ficha__cat{font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--oro);margin-bottom:11px}
.ficha__body h3{font-size:clamp(1.3rem,2.8vw,1.85rem);text-transform:uppercase;line-height:1.04;margin-bottom:18px}
.ficha__at{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:8px;overflow:hidden}
.ficha__at .ancho{grid-column:1/-1}
.ficha__at div{background:#0C1E38;padding:12px 11px;min-width:0}
.ficha__at dt{font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(233,239,246,.45)}
.ficha__at dd{margin:6px 0 0;font-family:var(--display);font-weight:800;font-size:.92rem;overflow-wrap:anywhere;line-height:1.2}
@media(max-width:640px){.ficha{grid-template-columns:1fr}.ficha__img{min-height:200px}}
@media(max-width:360px){.ficha__at{grid-template-columns:repeat(2,1fr)}}

/* ---------- Promedios de la temporada, dentro de la ficha ---------- */
.ficha__prom{margin-top:20px;padding-top:18px;border-top:1px solid var(--linea-oro)}
.ficha__prom-tit{
  font-family:var(--display);font-weight:800;font-size:.56rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--oro);margin:0 0 12px;
}
.ficha__prom-lista{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(6,1fr);gap:1px;
  background:var(--linea);border:1px solid var(--linea);border-radius:8px;overflow:hidden;
}
.ficha__prom-lista li{
  background:#0C1E38;padding:11px 4px;text-align:center;min-width:0;
}
.ficha__prom-lista b{
  display:block;font-family:var(--display);font-weight:800;font-size:.98rem;
  /* Cifras de ancho fijo para que las columnas no bailen */
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.ficha__prom-lista span{
  display:block;margin-top:5px;
  font-family:var(--display);font-weight:700;font-size:.48rem;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(233,239,246,.45);
}
.ficha__prom-vacio,
.ficha__prom-pie{
  font-family:var(--texto);font-size:.72rem;color:rgba(233,239,246,.42);
  margin:0;line-height:1.5;text-transform:none;letter-spacing:0;
}
.ficha__prom-pie{margin-top:10px;font-size:.66rem}
@media(max-width:520px){
  .ficha__prom-lista{grid-template-columns:repeat(3,1fr)}
}

#visor{position:fixed;inset:0;margin:auto;height:max-content;max-height:88vh;background:transparent;border:0;width:min(1000px,95vw);max-width:none;overflow:visible}
#visor::backdrop{background:rgba(3,8,16,.95)}
.visor__box{position:relative}
.visor__med{width:100%;aspect-ratio:3/2;border:1px solid var(--linea-oro);border-radius:var(--radio);background:#0A1B33;position:relative;overflow:hidden;display:grid;place-items:center}
.visor__med img{width:100%;height:100%;object-fit:contain}
.visor__pie{display:flex;justify-content:space-between;gap:14px;align-items:center;padding-top:14px;flex-wrap:wrap}
.visor__pie b{font-family:var(--display);font-weight:700;font-size:.98rem}
.visor__pie small{font-size:.73rem;color:rgba(233,239,246,.45)}
.visor__nav{display:flex;gap:8px}
.visor__nav button{width:40px;height:40px;border:1px solid var(--linea-oro);border-radius:8px;background:transparent;color:var(--oro)}
.visor__nav button:hover{background:var(--oro);color:var(--tinta)}

/* ---------- ARRIBA + ANIMACIÓN ---------- */
.arriba{position:fixed;right:18px;bottom:18px;z-index:90;width:46px;height:46px;border-radius:50%;border:1px solid var(--linea-oro);background:rgba(8,17,31,.92);color:var(--oro);display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s,transform .3s,visibility .3s,background .25s}
.arriba.on{opacity:1;visibility:visible;transform:none}
.arriba:hover{background:var(--oro);color:var(--tinta)}

/* La animación de entrada solo se activa si el JS funciona.
   Sin JS, todo el contenido se ve normal desde el inicio. */
.js .anim{opacity:0;transform:translateY(22px)}
.js .anim.ver{opacity:1;transform:none;transition:opacity .65s cubic-bezier(.2,.7,.3,1),transform .65s cubic-bezier(.2,.7,.3,1)}
/* ============================================================
   CAJA DE ANIMACIONES — agrégalas como clase en cualquier elemento
   Ejemplo: <div class="card anim anim--izq hov-sube">
   ============================================================ */

/* Dirección de entrada (siempre junto a "anim") */
.js .anim--izq{transform:translateX(-34px)}
.js .anim--der{transform:translateX(34px)}
.js .anim--abajo{transform:translateY(-24px)}
.js .anim--zoom{transform:scale(.9)}
.js .anim--giro{transform:rotate(-3deg) translateY(20px)}

/* Velocidad de entrada */
.js .anim--lento.ver{transition-duration:1.1s}
.js .anim--rapido.ver{transition-duration:.35s}
.js .anim--rebote.ver{transition-timing-function:cubic-bezier(.34,1.56,.64,1)}

/* Efectos al pasar el cursor */
.hov-sube{transition:transform .3s ease}
.hov-sube:hover{transform:translateY(-7px)}
.hov-crece{transition:transform .35s ease}
.hov-crece:hover{transform:scale(1.03)}
.hov-brillo{transition:box-shadow .35s,border-color .35s}
.hov-brillo:hover{border-color:var(--oro);box-shadow:0 14px 44px rgba(242,202,128,.16)}
.hov-inclina{transition:transform .35s ease}
.hov-inclina:hover{transform:perspective(700px) rotateX(4deg) translateY(-4px)}

/* Animaciones continuas */
.flota{animation:flota 5.5s ease-in-out infinite}
@keyframes flota{50%{transform:translateY(-11px)}}
.pulsa{animation:pulso 2.2s infinite}
.brilla{background-size:220% auto;animation:brilla 7s linear infinite}
@keyframes brilla{to{background-position:220% center}}
.gira-lento{animation:gira 26s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.late{animation:late 3s ease-in-out infinite}
@keyframes late{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

/* Subrayado dorado que crece al pasar el cursor */
.sub-oro{position:relative;display:inline-block}
.sub-oro::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--oro);transition:width .35s ease}
.sub-oro:hover::after{width:100%}

@media(prefers-reduced-motion:reduce){
  .flota,.pulsa,.brilla,.gira-lento,.late{animation:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js .anim{opacity:1;transform:none}
}


/* Acciones dentro de cada partido */
.juego__acciones{display:grid;justify-items:end;gap:9px}
.juego__entradas{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--oro);border:1px solid var(--linea-oro);border-radius:100px;padding:7px 15px;
  transition:background .25s,color .25s;white-space:nowrap;
}
.juego__entradas::before{content:"";width:12px;height:10px;border:1.5px solid currentColor;border-radius:2px;flex:none}
.juego__entradas:hover{background:var(--oro);color:var(--tinta)}
@media(max-width:640px){.juego__acciones{grid-column:1/-1;justify-items:start;grid-auto-flow:column;justify-content:start;gap:10px}}

/* Niveles de patrocinio con detalle velado */
.nivel--velado{position:relative}
/* El contenido velado debe crecer igual que la lista de las otras tarjetas,
   si no, el botón se queda a media altura en vez de irse al fondo. */
.nivel__velado{
  filter:blur(5px);opacity:.55;pointer-events:none;user-select:none;
  flex:1;display:flex;flex-direction:column;
}
.nivel__velado ul{flex:1}
/* El botón siempre al fondo, sin importar cuánto contenido haya arriba */
.nivel > .btn{margin-top:auto}
.nivel__candado{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  display:grid;justify-items:center;gap:8px;text-align:center;width:78%;
  background:rgba(8,17,31,.72);border:1px solid var(--linea-oro);border-radius:12px;
  padding:14px 12px;backdrop-filter:blur(2px);
}
.nivel__candado svg{width:20px;height:20px;color:var(--oro)}
.nivel__candado span{font-size:.56rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--oro);line-height:1.35}


/* ============================================================
   TEXTURAS DE MARCA — manchas de ocelote y garras
   ============================================================ */

/* Franja de manchas al pie de la portada */
.manchas-borde{
  position:absolute;left:0;right:0;bottom:0;height:clamp(70px,10vw,140px);z-index:4;
  background:url("../img/marca/textura-manchas.png") center bottom/cover no-repeat;
  opacity:.16;pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,#000 5%,transparent 92%);
  mask-image:linear-gradient(to top,#000 5%,transparent 92%);
}

/* Manchas de fondo en la sección de cierre */
.manchas-fondo{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../img/marca/textura-manchas.png") center/cover no-repeat;
  opacity:.10;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 60%,#000,transparent 78%);
  mask-image:radial-gradient(70% 70% at 50% 60%,#000,transparent 78%);
}
.cierre .wrap{position:relative;z-index:2}

/* Garras decorativas */
.garra{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  width:clamp(120px,17vw,270px);height:auto;opacity:.07;
  /* Sin color: el dorado del archivo teñía la sección de naranja.
     En gris se integra con el degradado azul del resto del sitio. */
  filter:grayscale(1) brightness(.85);
}
.garra--der{right:-2%;top:8%;transform:rotate(-12deg)}
.garra--izq{left:-3%;bottom:10%;transform:rotate(10deg)}
/* En móvil la garra se mete dentro del borde: con valores negativos
   sobresalía y hacía que la página se deslizara de lado. */
@media(max-width:760px){
  .garra{width:130px;opacity:.07}
  .garra--der{right:0}
  .garra--izq{left:0}
}

/* Logo de la liga en la portada */
.cibapac-marca{
  display:block;width:clamp(58px,7vw,86px);height:auto;margin:0 auto 18px;
  opacity:.9;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));
}

/* Los logos negativos ya son blancos: no hace falta filtrarlos */
.logo-caja img{filter:none;opacity:.78}
.logos figure:hover .logo-caja img{opacity:1}


/* ============================================================
   MENÚ DESPLEGABLE Y CABECERA DE PÁGINAS INTERNAS
   ============================================================ */
.tiene-sub{position:relative}
.menu__btn{
  display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:6px 0;
  font-size:.71rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(233,239,246,.72);position:relative;transition:color .2s;
}
.menu__btn svg{width:13px;height:13px;transition:transform .3s}
.menu__btn::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--oro);transition:width .3s}
.menu__btn:hover,.menu__btn[aria-expanded="true"]{color:var(--oro)}
.menu__btn:hover::after,.menu__btn[aria-expanded="true"]::after{width:100%}
.menu__btn[aria-expanded="true"] svg{transform:rotate(180deg)}

.submenu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px);
  min-width:210px;list-style:none;margin:0;padding:9px;display:grid;gap:2px;
  background:rgba(10,24,44,.98);backdrop-filter:blur(14px);
  border:1px solid var(--linea);border-radius:12px;
  box-shadow:0 20px 46px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;z-index:20;
}
.submenu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.tiene-sub:hover .submenu,.submenu.abierto{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.submenu a{
  display:block;padding:11px 15px;border-radius:8px;
  font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(233,239,246,.72);transition:background .2s,color .2s;
}
.submenu a::after{display:none}
.submenu a:hover{background:rgba(18,97,166,.28);color:var(--oro)}

@media(max-width:1040px){
  .menu.abierto .tiene-sub{width:100%}
  .menu.abierto .menu__btn{width:100%;justify-content:space-between;padding:15px 0;font-size:.85rem}
  .menu.abierto .submenu{
    position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;
    background:transparent;border:0;border-radius:0;padding:0 0 10px 14px;
    display:none;min-width:0;
  }
  .menu.abierto .submenu.abierto{display:grid}
  .menu.abierto .submenu a{padding:12px 0;font-size:.8rem}
}

/* Cabecera común de las páginas internas */
.cabecera-pag{
  position:relative;overflow:hidden;text-align:center;
  padding:calc(72px + clamp(46px,6vw,80px)) 0 clamp(30px,3.6vw,48px);
  background:
    radial-gradient(90% 120% at 50% -10%,rgba(18,97,166,.34),transparent 62%),
    linear-gradient(180deg,#0C2242,var(--tinta));
}
.cabecera-pag__manchas{
  position:absolute;left:0;right:0;bottom:0;height:62%;z-index:0;pointer-events:none;
  background:url("../img/marca/textura-manchas.png") center bottom/cover no-repeat;
  opacity:.13;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 88%);
  mask-image:linear-gradient(to top,#000,transparent 88%);
}
.cabecera-pag .wrap{position:relative;z-index:2}


/* ============================================================
   NÚMEROS — todos en Certanz Regular
   ============================================================ */
.cifras b,
.contador__numero,
.cuenta b,
.digital__bloque b,
.digital__dos,
.pj__num,
.ficha__num,
.juego__fecha b,
.aforo b,
.nivel__precio,
.jersey b,
.espacio strong,
.boleto__precio,
.bono__precio,
.paso__n,
.argumento__num,
.mrc__pts,
.lider__cifra,
.ficha__dia,
table.box tbody td.num,
table.box tfoot td.num,
.pie__base #anio{
  font-family:var(--numeros);
  font-variant-numeric:tabular-nums;
  font-weight:400;
  letter-spacing:.01em;
}

/* Los bloques del marcador digital conservan su aire de tablero */
.digital__bloque b,.digital__dos,.mrc__pts{letter-spacing:.04em}


/* ============================================================
   TÍTULOS PRINCIPALES — Syne en mayúsculas, sin excepción
   ============================================================ */
.titulo,.h2,.h3,.manifiesto__titulo,
.hero h1,.hero h1 small,
.nivel h3,.boleto__tipo,.bono__cinta,
.etapa__nombre,.programa__titulo,.mes__nombre,
.juego__rival,.marcador__nom,.mrc__nom,
.jug__txt b,.coach h3,.pj__nom,.faq summary,
.nota__titulo,.destacada__titulo,.envivo__titulo,
.cierre .lema,.vacio h3,.acceso__zona{
  font-family:var(--display);
  text-transform:uppercase;
}

/* El lema del cierre y el de portada mantienen su cursiva característica */
.cierre .lema,.hero__lema{font-style:italic}

/* Los cuerpos de texto siguen en Archivo, sin mayúsculas */
p,li,.lead,.mini,.plomo,.bono__nota,.jug__txt i,
.faq p,.boleto__lista li,.bono__lista li,.nivel li,
.mrc__meta,.juego__sede,.ficha__rival,.pie-tabla{
  font-family:var(--texto);
  text-transform:none;
}


/* ============================================================
   CENTRADO ÓPTICO
   El interletrado deja un espacio sobrante después de la última
   letra. En textos centrados eso los corre a la izquierda.
   text-indent del mismo valor lo compensa.
   ============================================================ */
.cab .ceja,
.respaldos__titulo,
.cierre .sum,
.boleto__tipo,
.bono__cinta,
.nivel__cinta,
.mes__nombre,
.franja__ceja,
.digital__bloque span,
.cuenta span{
  text-indent:inherit;
}
.respaldos__titulo{text-indent:.24em}
.cierre .sum{text-indent:.32em}
.boleto__tipo{text-indent:.24em}
.franja__ceja{text-indent:.28em}
.mes__nombre{text-indent:.12em}
.digital__bloque span,.cuenta span{text-indent:.18em}


/* ============================================================
   NOTICIAS — tarjetas tipo tablero deportivo
   ============================================================ */
.noticias__cab{margin-bottom:clamp(22px,3vw,34px)}


.noticias{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(13px,1.8vw,20px)}
.nota{
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--linea);border-radius:16px;
  background:linear-gradient(168deg,rgba(20,48,86,.6),rgba(10,23,42,.85));
  transition:transform .3s,border-color .3s;
}
.nota:hover{transform:translateY(-5px);border-color:var(--linea-oro)}
.nota__img{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:
    linear-gradient(160deg,rgba(18,97,166,.35),rgba(8,17,31,.9)),
    url("../img/marca/textura-manchas.png") center/cover no-repeat;
}
/* Solo la nota marcada con data-visor invita al clic */
.nota__img[data-visor]{cursor:pointer}
.nota__img img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;
  opacity:0;transition:opacity .9s ease;
}
.nota__img img.on{opacity:1}
/* Los retratos de jugador son verticales: se encuadran al rostro
   para que no se corte la cabeza dentro del marco apaisado. */
.nota__img img.retrato{object-position:center 12%}
/* El arte del Bono viene con fondo blanco: se muestra completo */
.nota__img img[src*="bono-ocelote"]{object-fit:contain;background:#fff}
.nota__img:hover img.on,.nota__img:focus-visible img.on{transform:none}
.nota__etq{z-index:3}

/* Indicador de cuántas fotos hay */
.nota__lupa{
  position:absolute;top:12px;right:12px;z-index:3;
  display:flex;align-items:center;gap:7px;
  background:rgba(8,17,31,.72);border:1px solid var(--linea-oro);border-radius:100px;
  padding:7px 13px;color:var(--oro);backdrop-filter:blur(6px);
  opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s;
}
.nota__lupa svg{width:14px;height:14px}
.nota__lupa b{font-family:var(--numeros);font-weight:400;font-size:.78rem}
.nota:hover .nota__lupa,.nota__img:focus-visible .nota__lupa{opacity:1;transform:translateY(0)}
@media(hover:none){.nota__lupa{opacity:1;transform:none}}

.nota__etq{
  position:absolute;left:0;bottom:0;z-index:2;
  background:var(--azul-noche);color:#fff;
  font-family:var(--display);font-weight:800;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 20px 9px 16px;
  clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);
}
.nota__cuerpo{padding:20px 20px 22px;flex:1}
.nota__tit{font-family:var(--display);font-weight:800;font-size:1.02rem;line-height:1.18;text-transform:uppercase;margin-bottom:10px}
.nota__res{font-family:var(--texto);font-size:.84rem;color:rgba(233,239,246,.58);margin:0;text-transform:none}
.nota__res b{font-family:var(--numeros);font-weight:400;color:var(--oro);font-variant-numeric:tabular-nums}

/* En teléfono cada nota ocupaba casi una pantalla completa: la foto es
   apaisada y encima venía un título grande. Se recorta la foto y se
   achica la tipografía para que quepan dos notas por vista. */
@media(max-width:620px){
  .nota__img{aspect-ratio:16/8}
  .nota__cuerpo{padding:15px 15px 17px}
  .nota__tit{font-size:.88rem;line-height:1.16;margin-bottom:7px}
  .nota__res{font-size:.78rem;line-height:1.5}
  .nota__etq{font-size:.5rem;padding:6px 12px 6px 15px}
  .noticias{gap:11px}
}
.nota__enlaces{display:flex;gap:16px;flex-wrap:wrap;margin:14px 0 0}
.nota__enlaces a:not(.enlace-red){
  font-family:var(--texto);font-size:.74rem;font-weight:600;color:var(--oro);
  text-transform:none;border-bottom:1px solid rgba(242,202,128,.4);padding-bottom:2px;
  transition:border-color .25s;
}
.nota__enlaces a:not(.enlace-red):hover{border-color:var(--oro)}
.nota__pie{
  display:flex;align-items:center;gap:10px;padding:13px 20px;
  border-top:1px solid rgba(46,127,196,.2);
}
.nota__pie img{width:26px;height:26px;object-fit:contain;flex:none}
.nota__pie span{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(233,239,246,.5)}

/* Insignia de estudiante UNACH en la tarjeta y en la ficha */
.pj__unach{
  position:absolute;top:8px;left:8px;z-index:4;
  width:38px;height:auto;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.6));
}
.ficha__unach{display:flex;align-items:center;gap:11px;margin:-8px 0 16px}
.ficha__unach img{width:38px;height:auto;flex:none}
.ficha__unach span{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--oro)}

/* Botón de entradas del calendario, con latido */
.juego__entradas--late{
  background:var(--oro);color:var(--tinta);border-color:var(--oro);
  animation:latido-entradas 2.4s ease-in-out infinite;
}
.juego__entradas--late::before{border-color:var(--tinta)}
.juego__entradas--late:hover{background:#fff;border-color:#fff;animation:none}
@keyframes latido-entradas{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(242,202,128,.55)}
  40%{transform:scale(1.045);box-shadow:0 0 0 9px rgba(242,202,128,0)}
  60%{transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){.juego__entradas--late{animation:none}}


/* Botón del canal de WhatsApp en el cierre */
#canal-wa::before{
  content:"";width:17px;height:17px;flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 8.5 8.5 0 0 1-4-1L3 20l1.2-4.6A8.4 8.4 0 1 1 21 11.5Z' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 8.5 8.5 0 0 1-4-1L3 20l1.2-4.6A8.4 8.4 0 1 1 21 11.5Z' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}


/* ============================================================
   PARALLAX — los escudos y las tarjetas se inclinan con el cursor
   ============================================================ */
[data-parallax]{
  transform-style:preserve-3d;
  transform:perspective(760px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
  will-change:transform;
}
[data-parallax].moviendo{transition:transform .08s linear}
[data-parallax] .capa{
  transform:translate3d(var(--tx,0),var(--ty,0),var(--tz,0));
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
[data-parallax].moviendo .capa{transition:transform .08s linear}

/* El escudo flota por encima de su tarjeta */
[data-parallax] .juego__logo,
[data-parallax] .eq__escudo{
  transform:translate3d(var(--tx,0),var(--ty,0),var(--tz,0));
  transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .4s;
}
[data-parallax].moviendo .juego__logo,
[data-parallax].moviendo .eq__escudo{transition:transform .08s linear,box-shadow .4s}
[data-parallax]:hover .juego__logo,
[data-parallax]:hover .eq__escudo{box-shadow:0 14px 30px rgba(0,0,0,.45)}

@media(prefers-reduced-motion:reduce){
  [data-parallax],[data-parallax] .capa,
  [data-parallax] .juego__logo,[data-parallax] .eq__escudo{transform:none!important}
}


/* ============================================================
   BANDA DESLIZANTE
   La imagen es casi cuadrada y mide más alto que la ventana de
   la banda, así que mientras deslizas recorre casi toda su altura:
   se alcanza a ver el escudo, los jugadores y la duela completa.

   A diferencia de la versión anterior, esta imagen NO se oscurece
   abajo (el piso está iluminado), por eso el desvanecido de aquí
   remata las dos orillas para que no corte de golpe.
   ============================================================ */
.banda{
  position:relative;overflow:hidden;
  height:clamp(320px,60vh,600px);
  background:var(--tinta);
  -webkit-mask-image:linear-gradient(180deg,
    transparent 0%, rgba(0,0,0,.6) 6%, #000 16%, #000 62%, rgba(0,0,0,.55) 86%, transparent 100%);
  mask-image:linear-gradient(180deg,
    transparent 0%, rgba(0,0,0,.6) 6%, #000 16%, #000 62%, rgba(0,0,0,.55) 86%, transparent 100%);
}
.banda__marco{position:absolute;inset:0;overflow:hidden}
.banda__img{
  position:absolute;left:0;top:50%;
  width:100%;height:auto;           /* alto natural = ancho × 1.055 */
  transform:translate3d(0,-50%,0);
  will-change:transform;
  display:block;
}
/* La sección que sigue no lleva línea, para que no corte la transición */
.banda + section.sec--linea,
.banda + .sec--linea{border-top:0}

/* En celular se muestra completa y quieta, con su proporción real.
   Conserva el desvanecido arriba y abajo, un poco más corto porque
   la ventana es más chica y no conviene comerse la composición. */
@media(max-width:820px){
  .banda{
    height:auto;aspect-ratio:19/20;
    -webkit-mask-image:linear-gradient(180deg,
      transparent 0%, rgba(0,0,0,.6) 4%, #000 12%, #000 66%, rgba(0,0,0,.5) 88%, transparent 100%);
    mask-image:linear-gradient(180deg,
      transparent 0%, rgba(0,0,0,.6) 4%, #000 12%, #000 66%, rgba(0,0,0,.5) 88%, transparent 100%);
  }
  .banda__img{top:0;height:100%;object-fit:cover;transform:none!important}
}

/* Respaldo para navegadores sin soporte de máscara: se logra el mismo
   desvanecido con dos capas de degradado hacia el color de la página. */
@supports not ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
  .banda::before,.banda::after{
    content:"";position:absolute;left:0;right:0;z-index:3;pointer-events:none;
  }
  .banda::before{top:0;height:18%;background:linear-gradient(180deg,var(--tinta),transparent)}
  .banda::after{bottom:0;height:40%;background:linear-gradient(0deg,var(--tinta) 20%,transparent)}
}
@media(prefers-reduced-motion:reduce){
  .banda__img{transform:translate3d(0,-50%,0)!important}
}


/* ============================================================
   AURORA — degradado en movimiento, un solo color
   Se aplica agregando la clase "aurora" a cualquier sección.
   Usa únicamente el azul de marca en distintas intensidades, así
   ninguna sección cambia de tono respecto a la vecina y las
   transiciones entre secciones se mantienen limpias.
   El desvanecido de arriba y abajo remata esa continuidad.
   ============================================================ */
.aurora{position:relative;isolation:isolate}
.aurora > .wrap,
.aurora > .cab,
.aurora > .cierre__in{position:relative;z-index:1}

.aurora__luz{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.5;
  background:
    radial-gradient(42% 50% at 24% 30%, rgba(18,97,166,.50), transparent 66%),
    radial-gradient(36% 44% at 76% 24%, rgba(18,97,166,.30), transparent 66%),
    radial-gradient(44% 48% at 64% 84%, rgba(18,97,166,.34), transparent 68%);
  /* Se apaga en los bordes: así no se nota dónde empieza y termina */
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 74%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 74%,transparent 100%);
  animation:aurora-flota 28s ease-in-out infinite alternate;
}
@keyframes aurora-flota{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(2%,-1.5%,0) scale(1.05)}
  100%{transform:translate3d(-1.5%,2%,0) scale(1.02)}
}

/* ============================================================
   TEXTURA AZUL — fondo discreto para una sección
   ============================================================ */
.textura-azul{position:relative;isolation:isolate}
.textura-azul > .wrap{position:relative;z-index:1}
.textura-azul__capa{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../img/marca/textura-azul.jpg") center/cover no-repeat;
  opacity:.16;
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  animation:textura-lenta 40s ease-in-out infinite alternate;
}
@keyframes textura-lenta{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to  {transform:scale(1.12) translate3d(-1.5%,-1.5%,0)}
}

@media(prefers-reduced-motion:reduce){
  .aurora__luz,.textura-azul__capa{animation:none}
}


/* ============================================================
   HUMO — jirones que se desplazan lento en el fondo
   Se activa poniendo <span class="humo" aria-hidden="true"></span>
   dentro de una sección con position:relative.
   Son dos capas de la misma textura, a distinta escala y velocidad:
   al cruzarse generan la sensación de humo real.
   ============================================================ */
.humo{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.humo::before,.humo::after{
  content:"";position:absolute;inset:-25%;
  background:url("../img/marca/humo.png") center/cover no-repeat;
  will-change:transform,opacity;
}
.humo::before{
  opacity:.16;
  animation:humo-a 42s ease-in-out infinite alternate;
}
.humo::after{
  opacity:.10;
  transform:scaleX(-1);
  animation:humo-b 58s ease-in-out infinite alternate;
}
@keyframes humo-a{
  0%  {transform:translate3d(-4%,2%,0) scale(1.05)}
  50% {transform:translate3d(3%,-3%,0) scale(1.18)}
  100%{transform:translate3d(5%,1%,0) scale(1.08)}
}
@keyframes humo-b{
  0%  {transform:scaleX(-1) translate3d(4%,-2%,0) scale(1.12)}
  50% {transform:scaleX(-1) translate3d(-3%,3%,0) scale(1.24)}
  100%{transform:scaleX(-1) translate3d(-5%,-1%,0) scale(1.1)}
}
/* Variante más marcada, para el cierre */
.humo--fuerte::before{opacity:.24}
.humo--fuerte::after{opacity:.15}

@media(prefers-reduced-motion:reduce){
  .humo::before,.humo::after{animation:none}
}

/* ============================================================
   FICHA DEL JUGADOR — todo el texto en Syne, negrita y mayúsculas
   ============================================================ */
.ficha,
.ficha__body,
.ficha__cat,
.ficha__body h3,
.ficha__at dt,
.ficha__at dd,
.ficha__unach span,
.ficha .mini{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
}
.ficha__body h3{font-weight:800}
.ficha__at dt{font-weight:700;letter-spacing:.14em}
.ficha__at dd{font-weight:800;letter-spacing:.01em}
.ficha__unach span{letter-spacing:.09em}


/* ============================================================
   FORMATO DE LA TEMPORADA
   ============================================================ */
.formato__nota{
  font-family:var(--texto);font-size:.88rem;color:rgba(233,239,246,.6);
  text-align:center;max-width:52ch;margin:0 auto clamp(20px,2.4vw,30px);
  text-transform:none;
}
.formato__nota b{color:var(--oro);font-weight:700}

.formato{
  display:grid;grid-template-columns:repeat(3,auto) minmax(240px,1fr);
  gap:clamp(16px,2.4vw,34px);align-items:center;
  border:1px solid var(--linea);border-radius:16px;
  background:linear-gradient(160deg,rgba(20,48,86,.5),rgba(10,23,42,.78));
  padding:clamp(22px,3vw,34px);
}
.formato__dato{text-align:center;min-width:96px}
.formato__dato b{
  display:block;font-family:var(--numeros);font-weight:400;
  font-size:clamp(2.2rem,4.4vw,3.2rem);line-height:1;color:var(--oro);
  font-variant-numeric:tabular-nums;
}
.formato__dato span{
  display:block;margin-top:9px;font-size:.58rem;font-weight:700;
  letter-spacing:.14em;text-indent:.14em;text-transform:uppercase;
  color:rgba(233,239,246,.5);line-height:1.4;
}
.formato__texto{
  font-family:var(--texto);font-size:.88rem;color:rgba(233,239,246,.62);
  margin:0;text-transform:none;border-left:1px solid var(--linea);padding-left:clamp(16px,2.4vw,30px);
}
@media(max-width:820px){
  .formato{grid-template-columns:repeat(3,1fr)}
  .formato__texto{grid-column:1/-1;border-left:0;padding-left:0;border-top:1px solid var(--linea);padding-top:18px;text-align:center}
}


/* ============================================================
   ÚNETE AL STAFF
   ============================================================ */
.staff{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);
  gap:clamp(26px,4vw,60px);align-items:start;
}
/* El titular de esta sección no es un encabezado de portada: se le baja
   la escala y se le limita el ancho para que caiga en tres renglones. */
.staff .h2{
  font-size:clamp(1.5rem,2.5vw,2.15rem);
  max-width:15ch;letter-spacing:-.012em;
}
.staff .lead{font-size:.92rem;max-width:46ch;margin:14px 0 26px;line-height:1.62}
.staff__sub{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:.7rem;letter-spacing:.16em;text-indent:.16em;color:var(--oro);
  margin:0 0 12px;
}
.staff__lista{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.staff__lista:last-child{margin-bottom:0}
.staff__lista b{color:#fff;font-weight:600}
/* La lista de lo que recibe el voluntario lleva viñeta distinta */
/* Los puestos disponibles, con su descripción */
.staff__puestos{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:1px;
  background:var(--linea);border:1px solid var(--linea);border-radius:12px;overflow:hidden}
.staff__puestos li{
  background:rgba(11,26,47,.8);padding:11px 16px;display:grid;gap:2px;
  transition:background .25s;
}
.staff__puestos li:hover{background:rgba(18,97,166,.16)}
.staff__puestos b{
  font-family:var(--display);font-weight:800;font-size:.75rem;
  text-transform:uppercase;color:var(--oro);letter-spacing:.03em;
}
.staff__puestos span{
  font-family:var(--texto);font-size:.75rem;color:rgba(233,239,246,.55);
  text-transform:none;line-height:1.4;
}
.staff__nota{
  font-family:var(--texto);font-size:.76rem;color:rgba(233,239,246,.45);
  margin:0;text-transform:none;line-height:1.5;
}

.staff__lista--premio li::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2CA80' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12v9H4v-9M22 7H2v5h20zM12 21V7M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.staff__lista li{
  font-family:var(--texto);font-size:.83rem;color:rgba(233,239,246,.6);
  padding-left:24px;position:relative;line-height:1.45;text-transform:none;
}
.staff__lista li::before{
  content:"";position:absolute;left:0;top:5px;width:14px;height:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2CA80' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- El formulario, plegable en teléfono ----------
   En pantalla chica tiene seis preguntas y ocupaba casi toda la vista.
   Ahora arranca cerrado detrás de un botón. En escritorio el resumen se
   oculta y el JS deja el bloque siempre abierto. */
.staff__caja{
  max-width:430px;margin-left:auto;
  position:sticky;top:100px;
}
.staff__resumen{
  display:none;                        /* en escritorio no hace falta */
  align-items:center;justify-content:space-between;gap:12px;
  cursor:pointer;list-style:none;
  padding:15px 20px;border-radius:100px;
  background:var(--oro);color:var(--tinta);
  font-family:var(--display);font-weight:800;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;
}
.staff__resumen::-webkit-details-marker{display:none}
.staff__resumen svg{width:17px;height:17px;flex:none;transition:transform .3s}
.staff__caja[open] .staff__resumen{border-radius:14px;margin-bottom:12px}
.staff__caja[open] .staff__resumen svg{transform:rotate(180deg)}
@media(max-width:820px){
  .staff__caja{max-width:none;position:static}
  .staff__resumen{display:flex}
}

.staff__form{
  border:1px solid var(--linea-oro);border-radius:16px;
  background:linear-gradient(160deg,rgba(20,48,86,.62),rgba(10,23,42,.9));
  box-shadow:0 18px 50px -28px rgba(0,0,0,.85);
  padding:clamp(20px,2.2vw,26px);display:grid;gap:11px;
}
.staff__form-titulo{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:.92rem;letter-spacing:.02em;color:var(--oro);
  margin:0;padding-bottom:13px;border-bottom:1px solid var(--linea);
}
.staff__fila{display:grid;grid-template-columns:1fr 1fr;gap:11px}

/* Campos más compactos: el formulario tiene seis preguntas y con la
   altura por defecto se estiraba muy por debajo de la columna de texto. */
.staff__form .campo{gap:5px}
.staff__form .campo label,
.staff__form .label-como{font-size:.56rem;letter-spacing:.15em;color:rgba(233,239,246,.5)}
.staff__form .campo input,
.staff__form .campo select{
  font-size:.86rem;padding:10px 13px;border-radius:9px;
  transition:border-color .2s,background .2s;
}
.staff__form .campo input:hover,
.staff__form .campo select:hover{border-color:rgba(46,127,196,.5)}
.staff__form .campo .error{font-size:.68rem;margin-top:3px}
.staff__form .opciones{gap:8px;margin-top:4px}
.staff__form .opcion{padding:9px;border-radius:9px}
.staff__form .opcion span{font-size:.78rem}
.staff__form .btn{padding:12px 24px;font-size:.7rem;margin-top:5px}

.opciones{display:flex;gap:10px;margin-top:8px}
.opcion{
  flex:1;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--linea);border-radius:10px;padding:12px;cursor:pointer;
  transition:border-color .25s,background .25s;
}
.opcion input{position:absolute;opacity:0;pointer-events:none}
.opcion span{font-size:.82rem;font-weight:600;color:rgba(233,239,246,.7)}
.opcion:hover{border-color:var(--linea-oro)}
.opcion:has(input:checked){border-color:var(--oro);background:rgba(164,115,45,.18)}
.opcion:has(input:checked) span{color:var(--oro)}
.label-como{
  display:block;font-size:.62rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(233,239,246,.55);
}

.staff__aviso{font-family:var(--texto);font-size:.83rem;margin:0;text-transform:none;min-height:1.2em}
.staff__aviso--bien{color:#7BD88F}
.staff__aviso--mal{color:#E88A8A}
.staff__legal{
  font-family:var(--texto);font-size:.68rem;color:rgba(233,239,246,.38);
  margin:0;line-height:1.5;text-transform:none;
}

@media(max-width:900px){
  .staff{grid-template-columns:1fr}
  /* Apilado ya no hay a qué pegarse ni a qué alinearse a la derecha */
  .staff__caja{position:static;max-width:none;margin-left:0}
  .staff .h2{max-width:none}
}
@media(max-width:420px){
  .staff__fila{grid-template-columns:1fr}
}


/* ============================================================
   NUESTRA CASA — foto de la arena que abre Google Maps
   ============================================================ */
.arena-mapa{
  position:relative;display:block;overflow:hidden;
  border:1px solid var(--linea);border-radius:20px;
  aspect-ratio:16/8.2;max-height:520px;
  transition:border-color .35s,transform .35s;
}
.arena-mapa:hover{border-color:var(--oro);transform:translateY(-4px)}
.arena-mapa__foto{
  width:100%;height:100%;object-fit:cover;object-position:center 46%;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.arena-mapa:hover .arena-mapa__foto{transform:scale(1.05)}
.arena-mapa__velo{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,17,31,.12) 0%,rgba(8,17,31,.04) 38%,rgba(8,17,31,.55) 74%,rgba(8,17,31,.9) 100%);
}
.arena-mapa__pin{
  position:absolute;top:18px;left:18px;z-index:2;
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:rgba(8,17,31,.72);border:1px solid var(--linea-oro);color:var(--oro);
  backdrop-filter:blur(6px);
  animation:pin-late 2.8s ease-in-out infinite;
}
.arena-mapa__pin svg{width:21px;height:21px}
@keyframes pin-late{
  0%,100%{transform:translateY(0);box-shadow:0 0 0 0 rgba(242,202,128,.4)}
  45%{transform:translateY(-5px);box-shadow:0 0 0 10px rgba(242,202,128,0)}
}
.arena-mapa__info{
  position:absolute;left:clamp(18px,3vw,30px);bottom:clamp(18px,3vw,28px);z-index:2;
  display:grid;gap:5px;
}
.arena-mapa__info b{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1rem,2.2vw,1.45rem);color:#fff;
}
.arena-mapa__info i{
  font-style:normal;font-family:var(--texto);font-size:.8rem;
  color:rgba(233,239,246,.66);text-transform:none;
}
.arena-mapa__accion{
  position:absolute;right:clamp(18px,3vw,30px);bottom:clamp(18px,3vw,28px);z-index:2;
  font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta);background:var(--oro);border-radius:100px;padding:10px 20px;
  transition:filter .3s;white-space:nowrap;
}
.arena-mapa:hover .arena-mapa__accion{filter:brightness(1.12)}

@media(max-width:640px){
  .arena-mapa{aspect-ratio:4/3}
  .arena-mapa__accion{left:clamp(18px,3vw,30px);right:auto;bottom:auto;top:18px;left:auto;right:18px}
  .arena-mapa__info{bottom:20px}
}
@media(prefers-reduced-motion:reduce){.arena-mapa__pin{animation:none}}


/* ============================================================
   VISOR DE FOTOS DE NOTICIAS
   ============================================================ */
#visor-notas{
  /* Fijo y centrado en la pantalla. Antes era "relative", así que el
     diálogo quedaba al final del documento y el navegador tenía que
     desplazar toda la página para mostrarlo. */
  position:fixed;inset:0;margin:auto;
  width:min(1040px,94vw);max-width:none;
  height:max-content;max-height:88vh;
  background:transparent;border:0;padding:0;overflow:visible;
}
#visor-notas::backdrop{background:rgba(3,8,16,.94);backdrop-filter:blur(4px)}
#visor-notas .visor__med{
  width:100%;aspect-ratio:3/2;border:1px solid var(--linea-oro);border-radius:var(--radio);
  background:#0A1B33;overflow:hidden;display:grid;place-items:center;
}
#visor-notas .visor__med img{width:100%;height:100%;object-fit:contain}
#visor-notas .visor__pie{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding-top:14px;flex-wrap:wrap;
}
#visor-notas .visor__pie span:first-child{
  font-family:var(--display);font-weight:700;font-size:.92rem;text-transform:uppercase;
}
#visor-notas .visor__pie span:last-child{
  font-family:var(--numeros);font-size:.8rem;color:rgba(233,239,246,.5);
}
.visor__x{
  position:absolute;top:12px;right:12px;z-index:5;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--linea-oro);background:rgba(8,17,31,.8);color:var(--oro);
  font-size:1.5rem;line-height:1;display:grid;place-items:center;
  transition:background .25s,color .25s;
}
.visor__x:hover{background:var(--oro);color:var(--tinta)}
#visor-notas .visor__x{backdrop-filter:blur(6px)}
.visor__nav--ant,.visor__nav--sig{
  position:absolute;top:calc(50% - 26px);transform:translateY(-50%);z-index:4;
  width:52px;height:52px;border-radius:50%;
  border:1px solid var(--linea-oro);background:rgba(8,17,31,.78);color:var(--oro);
  font-size:1.9rem;line-height:1;display:grid;place-items:center;
  backdrop-filter:blur(6px);transition:background .25s,color .25s,transform .25s;
}
.visor__nav--ant{left:-16px}
.visor__nav--sig{right:-16px}
.visor__nav--ant:hover,.visor__nav--sig:hover{background:var(--oro);color:var(--tinta)}
@media(max-width:760px){
  .visor__nav--ant{left:6px}
  .visor__nav--sig{right:6px}
  .visor__nav--ant,.visor__nav--sig{width:44px;height:44px;font-size:1.6rem}
}


/* Lista dentro de una respuesta de preguntas frecuentes */
.faq__lista{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px}
.faq__lista li{
  font-family:var(--texto);font-size:.9rem;color:rgba(233,239,246,.7);
  padding-left:20px;position:relative;line-height:1.5;text-transform:none;
}
.faq__lista li::before{
  content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--oro);
}
.faq__lista b{color:#fff;font-weight:600}
.faq p a,.faq__lista a{
  color:var(--oro);border-bottom:1px solid rgba(242,202,128,.4);
  padding-bottom:1px;transition:border-color .25s;
}
.faq p a:hover,.faq__lista a:hover{border-color:var(--oro)}


/* Los pies de foto ya no se ven, pero siguen existiendo para el visor
   y para los lectores de pantalla. */
/* ---------- Álbumes de la galería ---------- */
.album + .album{margin-top:clamp(38px,4.6vw,60px)}
.album__cab{
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  flex-wrap:wrap;margin-bottom:16px;
  padding-bottom:13px;border-bottom:1px solid var(--linea-oro);
}
.album__tit{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.05rem,1.9vw,1.4rem);letter-spacing:-.01em;margin:0;line-height:1.15;
}
.album__meta{
  font-family:var(--texto);font-size:.79rem;color:rgba(233,239,246,.5);
  margin:7px 0 0;line-height:1.45;
}
.album__cuenta{
  font-family:var(--display);font-weight:800;font-size:.58rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--oro);
  white-space:nowrap;padding-bottom:3px;
}

/* Sólo se muestran las primeras cuatro. Las demás quedan en el HTML para
   que el visor pueda pasarlas con las flechas. */
.galeria .foto:nth-child(n+5){display:none}

/* Aviso de cuántas fotos quedan, encima de la cuarta */
.foto__mas{
  position:absolute;inset:0;display:grid;place-content:center;gap:2px;
  background:rgba(8,17,31,.72);backdrop-filter:blur(2px);
  text-align:center;transition:background .3s;
}
.foto:hover .foto__mas{background:rgba(8,17,31,.58)}
.foto__mas b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:1.5rem;color:var(--oro);line-height:1;
}
.foto__mas span{
  display:block;font-family:var(--display);font-weight:700;font-size:.55rem;
  letter-spacing:.15em;text-transform:uppercase;color:rgba(233,239,246,.65);
}

/* ---------- Los tres pilares (historia) ---------- */
.pilares__intro{
  font-family:var(--display);font-weight:800;font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--oro);
  text-align:center;margin:0 0 clamp(20px,2.4vw,30px);
}
/* Sin recuadros: cada pilar se separa con una regla dorada arriba
   y su número, no con una caja. */
.pilares{
  list-style:none;counter-reset:pilar;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(22px,3vw,40px);
}
.pilares li{
  counter-increment:pilar;
  padding-top:16px;border-top:1px solid var(--linea-oro);
}
.pilares li::before{
  content:counter(pilar,decimal-leading-zero);
  display:block;margin-bottom:10px;
  font-family:var(--display);font-weight:800;font-size:.72rem;
  letter-spacing:.1em;color:rgba(242,202,128,.55);
}
.pilares h3{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:.92rem;letter-spacing:.01em;color:var(--oro);
  margin:0 0 9px;line-height:1.2;
}
.pilares p{
  font-family:var(--texto);font-size:.86rem;line-height:1.6;
  color:rgba(233,239,246,.62);margin:0;
}
.pilares__cierre{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(.92rem,1.5vw,1.15rem);line-height:1.4;letter-spacing:-.005em;
  text-align:center;max-width:34ch;
  margin:clamp(30px,3.6vw,46px) auto 0;
}
@media(max-width:820px){
  .pilares{grid-template-columns:1fr;gap:22px}
}

/* ============================================================
   JERSEY OFICIAL — banda corta de tienda
   ============================================================ */
.jersey{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(24px,4vw,52px);align-items:center;
}
.jersey__texto .h2{font-size:clamp(1.35rem,2.3vw,1.9rem);max-width:16ch;margin-bottom:12px}
.jersey__texto .lead{font-size:.88rem;max-width:40ch;margin:0 0 22px}

.jersey__fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px)}
.jersey__fotos figure{margin:0;display:grid;gap:9px;justify-items:center}
.jersey__fotos img{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  border:1px solid var(--linea-oro);border-radius:12px;
  background:#0A1B33;
  transition:transform .3s,border-color .3s;
}
.jersey__fotos figure:hover img{transform:translateY(-4px);border-color:var(--oro)}
.jersey__fotos figcaption{
  font-family:var(--display);font-weight:800;font-size:.55rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(233,239,246,.5);
}

@media(max-width:820px){
  .jersey{grid-template-columns:1fr;text-align:center}
  .jersey__texto .h2,
  .jersey__texto .lead{max-width:none;margin-inline:auto}
}

/* ---------- Banda corta que lleva a otra página ---------- */
.promo{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,44px);flex-wrap:wrap;
}
.promo .h2{font-size:clamp(1.3rem,2.2vw,1.85rem);max-width:15ch;margin-bottom:10px}
.promo .lead{font-size:.87rem;max-width:46ch;margin:0}
.promo .btn{flex:none}
@media(max-width:720px){
  .promo{flex-direction:column;align-items:flex-start}
  .promo .h2,.promo .lead{max-width:none}
}

.visualmente-oculto{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
  background:none!important;
}


/* Con el visor abierto, la página de atrás se queda quieta */
body.visor-abierto{overflow:hidden}


/* ============================================================
   ENLACES CON LOGOTIPO DE RED
   ============================================================ */
.enlace-red{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--texto);font-size:.76rem;font-weight:600;
  color:rgba(233,239,246,.78);text-transform:none;
  border:1px solid var(--linea);border-radius:100px;
  padding:7px 14px 7px 10px;border-bottom-width:1px;
  transition:border-color .25s,background .25s,color .25s;
}
.enlace-red::before{
  content:"";width:17px;height:17px;flex:none;border-radius:4px;
  background:currentColor;
}
.enlace-red[data-red="youtube"]::before{
  background:#FF0033;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12s0-3.4-.4-5a2.6 2.6 0 0 0-1.8-1.8C18.2 4.8 12 4.8 12 4.8s-6.2 0-7.8.4A2.6 2.6 0 0 0 2.4 7C2 8.6 2 12 2 12s0 3.4.4 5a2.6 2.6 0 0 0 1.8 1.8c1.6.4 7.8.4 7.8.4s6.2 0 7.8-.4a2.6 2.6 0 0 0 1.8-1.8c.4-1.6.4-5 .4-5ZM10 15.2V8.8l5.3 3.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12s0-3.4-.4-5a2.6 2.6 0 0 0-1.8-1.8C18.2 4.8 12 4.8 12 4.8s-6.2 0-7.8.4A2.6 2.6 0 0 0 2.4 7C2 8.6 2 12 2 12s0 3.4.4 5a2.6 2.6 0 0 0 1.8 1.8c1.6.4 7.8.4 7.8.4s6.2 0 7.8-.4a2.6 2.6 0 0 0 1.8-1.8c.4-1.6.4-5 .4-5ZM10 15.2V8.8l5.3 3.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.enlace-red[data-red="facebook"]::before{
  background:#0866FF;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 9h3V5.6h-3c-2.3 0-4 1.9-4 4.2V12H7v3.4h3V22h3.4v-6.6H16L16.6 12h-3.2V9.8c0-.5.3-.8.6-.8Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 9h3V5.6h-3c-2.3 0-4 1.9-4 4.2V12H7v3.4h3V22h3.4v-6.6H16L16.6 12h-3.2V9.8c0-.5.3-.8.6-.8Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.enlace-red:hover{border-color:var(--linea-oro);background:rgba(18,97,166,.16);color:#fff}


/* ============================================================
   MÁS FORMAS DE ESTAR PRESENTE — rejilla 2x2 pareja
   ============================================================ */
.espacios-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(12px,1.6vw,18px);align-items:stretch;
  max-width:900px;margin-inline:auto;
}
.espacio{display:flex;flex-direction:column;padding:24px 22px}

/* Cuadro con el ícono de la categoría */
.espacio__icono{
  display:grid;place-items:center;width:46px;height:46px;flex:none;
  border-radius:12px;margin-bottom:16px;
  background:rgba(18,97,166,.18);border:1px solid var(--linea-oro);color:var(--oro);
  transition:background .3s,transform .3s;
}
.espacio__icono svg{width:23px;height:23px}
.espacio:hover .espacio__icono{background:rgba(164,115,45,.24);transform:translateY(-3px)}
.espacio__lista{list-style:none;margin:0;padding:0;display:grid;gap:9px;flex:1}
.espacio__lista li{
  font-family:var(--texto);font-size:.83rem;color:rgba(233,239,246,.7);
  padding-left:18px;position:relative;line-height:1.45;text-transform:none;
}
.espacio__lista li::before{
  content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--oro);
}
.espacio__nota{
  font-family:var(--texto);font-size:.78rem;color:rgba(233,239,246,.5);
  margin:14px 0 0;padding-top:12px;border-top:1px solid var(--linea);
  text-transform:none;line-height:1.45;
}
.espacio__nota b{color:var(--oro);font-weight:700}

/* Botón de WhatsApp de cada categoría */
.espacio__wa{
  margin-top:18px;align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--oro);border:1px solid var(--linea-oro);border-radius:100px;
  padding:9px 18px;transition:background .25s,color .25s;
}
.espacio__wa::before{
  content:"";width:15px;height:15px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 8.5 8.5 0 0 1-4-1L3 20l1.2-4.6A8.4 8.4 0 1 1 21 11.5Z' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 8.5 8.5 0 0 1-4-1L3 20l1.2-4.6A8.4 8.4 0 1 1 21 11.5Z' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.espacio__wa:hover{background:var(--oro);color:var(--tinta)}
@media(max-width:720px){
  .espacios-grid{grid-template-columns:1fr}
}