/* ===========================================================
   STAFF DEPORTIVO — sistema visual
   Negro · Blanco · Rojo de marca (#E2101B)
   =========================================================== */

:root{
  /* superficies */
  --bg:        #08080A;
  --bg-1:      #0E0E11;
  --bg-2:      #141418;
  --bg-3:      #1B1B20;
  --panel:     #101013;

  /* tinta */
  --ink:       #FFFFFF;
  --muted:     #9C9CA6;
  --muted-2:   #6A6A72;
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.06);

  /* acento de marca */
  --red:       #E2101B;
  --red-2:     #FF1F2D;
  --red-deep:  #8E0911;
  --red-glow:  rgba(226,16,27,.45);

  /* tipografía */
  --font-display: "Saira", system-ui, sans-serif;
  --font-body:    "Barlow", system-ui, sans-serif;

  /* layout */
  --maxw: 1320px;
  --gutter: clamp(20px, 5vw, 72px);
  --blade: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* film grain + vignette ambient */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:1;
  background:
    radial-gradient(120% 80% at 50% -10%, transparent 60%, rgba(0,0,0,.55) 100%);
  mix-blend-mode:normal;
}
body[data-grain="off"]::before{ display:none; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin:0;
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ position:relative; padding-block:clamp(72px,9vw,140px); }

/* ===========================================================
   MEDIA PLACEHOLDER — hueco de imagen listo para rellenar
   Sustituye al <image-slot> del prototipo. Para usar una foto
   real, añade  style="background-image:url('...')"  o cambia el
   div por un <img class="media"> con object-fit:cover.
   =========================================================== */
.media{
  position:relative;
  width:100%; height:100%;
  background:
    radial-gradient(120% 140% at 80% 0%, rgba(226,16,27,.16), transparent 55%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.018) 0 2px, transparent 2px 22px),
    linear-gradient(160deg, var(--bg-3), var(--bg-2) 60%, #0c0c0f);
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.media::before{
  /* icono + caption del marcador */
  content:attr(data-ph);
  position:absolute; inset:0;
  display:flex; align-items:flex-end;
  padding:22px 24px;
  font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; font-size:12px;
  color:var(--muted-2);
}
.media::after{
  content:""; position:absolute; left:0; top:0;
  width:46px; height:46px;
  background:var(--red); opacity:.9;
  clip-path:polygon(0 0, 100% 0, 0 100%);
}
img.media{ object-fit:cover; }
img.media::before,img.media::after{ content:none; }

/* eyebrow / kicker */
.kicker{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.32em;
  font-size:13px;
  color:var(--red);
  display:inline-flex; align-items:center; gap:12px;
}
.kicker::before{
  content:""; width:30px; height:2px; background:var(--red);
}
.kicker.center::after{
  content:""; width:30px; height:2px; background:var(--red);
}
.kicker.center{ justify-content:center; }

/* botón blade */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-weight:800; text-transform:uppercase; letter-spacing:.12em;
  font-size:14px;
  padding:16px 30px;
  border:0;
  background:var(--red);
  color:#fff;
  clip-path:var(--blade);
  transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  position:relative; white-space:nowrap;
}
.btn:hover{ background:var(--red-2); transform:translateY(-2px); box-shadow:0 14px 34px var(--red-glow); }
.btn .ar{ transition:transform .25s var(--ease); }
.btn:hover .ar{ transform:translateX(4px); }
.btn--ghost{
  background:transparent; color:#fff;
  box-shadow:inset 0 0 0 2px var(--line);
  clip-path:none;
}
.btn--ghost:hover{ background:#fff; color:#000; box-shadow:none; }

/* link con flecha */
.arrow-link{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; letter-spacing:.16em; font-size:13px;
  color:#fff;
}
.arrow-link .ln{ width:26px; height:2px; background:var(--red); transition:width .25s var(--ease); }
.arrow-link:hover .ln{ width:44px; }
.arrow-link:hover{ color:var(--red-2); }

/* ===========================================================
   HEADER
   =========================================================== */
.header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  transition:background .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease);
  border-bottom:1px solid transparent;
}
.header__bar{
  max-width:var(--maxw); margin:0 auto;
  padding:22px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  transition:padding .35s var(--ease);
}
.header.is-stuck{
  background:rgba(8,8,10,.86);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.header.is-stuck .header__bar{ padding-block:14px; }

.brand{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.brand img{ height:30px; width:auto; transition:height .35s var(--ease); }
.header.is-stuck .brand img{ height:24px; }

.nav{ display:flex; align-items:center; gap:4px; }
.nav__item{ position:relative; }
.nav__link{
  font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; font-size:13px;
  color:#fff; padding:10px 16px; display:inline-flex; align-items:center; gap:7px;
  transition:color .2s var(--ease);
}
.nav__link .caret{ width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.6; transition:transform .25s var(--ease); }
.nav__link:hover{ color:var(--red-2); }
.nav__item:hover .nav__link .caret{ transform:rotate(45deg) translateY(0); }

/* dropdown */
.dropdown{
  position:absolute; top:100%; left:50%; transform:translate(-50%,8px);
  min-width:230px; background:var(--bg-2);
  border:1px solid var(--line); padding:10px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
  box-shadow:0 30px 60px rgba(0,0,0,.6);
}
.nav__item:hover .dropdown{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }
.dropdown a{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; font-size:14px; color:var(--muted);
  font-weight:500; transition:.2s var(--ease);
}
.dropdown a::before{ content:""; width:5px; height:5px; background:var(--red); opacity:0; transition:.2s var(--ease); }
.dropdown a:hover{ color:#fff; background:var(--bg-3); }
.dropdown a:hover::before{ opacity:1; }

.header__tools{ display:flex; align-items:center; gap:6px; }
.icon-btn{
  width:42px; height:42px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line); color:#fff;
  transition:.2s var(--ease);
}
.icon-btn:hover{ background:var(--red); border-color:var(--red); }
.icon-btn svg{ width:19px; height:19px; }

.burger{ display:none; }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:80;
  background:rgba(8,8,10,.97); backdrop-filter:blur(8px);
  transform:translateX(100%); transition:transform .4s var(--ease);
  display:flex; flex-direction:column; padding:90px var(--gutter) 40px;
  overflow-y:auto;
}
.drawer.is-open{ transform:translateX(0); }
.drawer a{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:30px; letter-spacing:-.01em; padding:14px 0;
  border-bottom:1px solid var(--line); color:#fff;
}
.drawer a:hover{ color:var(--red); }
.drawer__close{ position:absolute; top:26px; right:var(--gutter); width:46px; height:46px; border:1px solid var(--line); background:none; color:#fff; display:grid; place-items:center; }

/* ===========================================================
   HERO
   =========================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding-top:120px; overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__photo{ width:100%; height:100%; object-fit:cover; object-position:60% 50%; }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(8,8,10,.94) 0%, rgba(8,8,10,.66) 36%, rgba(8,8,10,.16) 70%, rgba(8,8,10,.32) 100%),
    linear-gradient(180deg, rgba(8,8,10,.45) 0%, rgba(8,8,10,.22) 38%, rgba(8,8,10,.78) 88%, var(--bg) 100%);
}
/* speed lines */
.speedlines{ position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none; }
.speedlines span{
  position:absolute; left:-20%; height:2px; width:40%;
  background:linear-gradient(90deg, transparent, var(--red), transparent);
  animation:zoom 3.4s linear infinite;
}
@keyframes zoom{ 0%{ transform:translateX(-30%); opacity:0; } 20%{ opacity:.9; } 100%{ transform:translateX(360%); opacity:0; } }

.hero__inner{ position:relative; z-index:2; width:100%; }
.hero__subs{ display:flex; justify-content:space-between; gap:20px; margin-bottom:18px; }
.hero__subs p{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.16em; font-size:clamp(11px,1.1vw,14px); color:var(--muted);
  margin:0; max-width:30ch; text-shadow:0 2px 14px rgba(0,0,0,.7);
}
.hero__subs p:last-child{ text-align:right; }

.hero__title{
  font-family:var(--font-display);
  font-weight:800; font-style:italic;
  font-size:clamp(44px, 11vw, 170px);
  line-height:.82; letter-spacing:-.025em;
  text-transform:uppercase;
  display:flex; flex-direction:column;
  text-shadow:0 6px 40px rgba(0,0,0,.45);
}
.hero__title .ln{ display:block; overflow:hidden; }
.hero__title .ln > span{ display:inline-block; transform:translateY(110%); }
.hero__title .dot{ color:var(--red); }

.hero__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:24px 40px;
  margin-top:clamp(28px,4vw,52px);
}
.hero__tag{ max-width:46ch; color:#d6d6db; font-size:clamp(15px,1.4vw,19px); text-shadow:0 2px 16px rgba(0,0,0,.8); }
.hero__tag b{ color:#fff; font-weight:600; }

.hero__scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3;
  font-family:var(--font-display); font-weight:700; letter-spacing:.3em; font-size:11px; text-transform:uppercase;
  color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:10px;
}
.hero__foot{ margin-bottom:30px; }
@media (max-height: 760px){ .hero__scroll{ display:none; } }
.hero__scroll .bar{ width:1px; height:46px; background:linear-gradient(var(--red), transparent); animation:scrolldn 1.8s var(--ease) infinite; }
@keyframes scrolldn{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* watermark S mark */
.hero__mark{ position:absolute; right:-4%; top:8%; width:48vw; max-width:760px; opacity:.05; z-index:1; pointer-events:none; transform:rotate(-2deg); }

/* ===========================================================
   SERVICIOS (pilares)
   =========================================================== */
.serv{ background:var(--bg-1); border-top:1px solid var(--line-2); }
.serv__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:54px; }
.serv__head h2{ font-size:clamp(34px,4.6vw,68px); max-width:16ch; }
.serv__head h2 em{ color:var(--red); font-style:normal; }

.pillars{ display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); }
.pillar{
  position:relative; padding:0; border-right:1px solid var(--line);
  transition:background .3s var(--ease); overflow:hidden;
  display:flex; flex-direction:column;
}
.pillar:last-child{ border-right:0; }
.pillar:hover{ background:var(--bg-3); }
.pillar__img{ position:relative; aspect-ratio:16/11; overflow:hidden; border-bottom:1px solid var(--line); background:var(--bg-2); }
.pillar__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.pillar:hover .pillar__img img{ transform:scale(1.06); }
.pillar__img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(8,8,10,.6)); }
.pillar__body{ padding:26px 24px 30px; display:flex; flex-direction:column; flex:1; }
.pillar__ic{ width:42px; height:42px; color:var(--red); margin-bottom:18px; }
.pillar__ic svg{ width:100%; height:100%; }
.pillar__num{ position:absolute; top:13px; right:16px; z-index:2; font-family:var(--font-display); font-weight:800; font-size:14px; color:#fff; opacity:.92; text-shadow:0 2px 8px rgba(0,0,0,.6); }
.pillar h3{ font-size:clamp(20px,1.6vw,26px); margin:0 0 12px; }
.pillar p{ color:var(--muted); font-size:14.5px; line-height:1.55; margin:0 0 18px; flex:1; }
.pillar .arrow-link{ font-size:11px; }
.pillar::after{ content:""; position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--red); transition:width .35s var(--ease); z-index:3; }
.pillar:hover::after{ width:100%; }

/* ===========================================================
   MARQUEE
   =========================================================== */
.marquee{ background:var(--red); color:#fff; padding:24px 0; overflow:hidden; position:relative; }
.marquee__track{ display:flex; gap:0; white-space:nowrap; width:max-content; animation:slidemq 26s linear infinite; }
.marquee[data-rev] .marquee__track{ animation-direction:reverse; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee span{
  font-family:var(--font-display); font-weight:800; font-style:italic;
  text-transform:uppercase; font-size:clamp(26px,3.4vw,46px); letter-spacing:.02em;
  display:inline-flex; align-items:center; padding-inline:26px;
}
.marquee .sep{ width:14px; height:14px; background:#fff; border-radius:50%; margin-inline:6px; }
@keyframes slidemq{ to{ transform:translateX(-50%); } }

/* ===========================================================
   EXPERIENCIAS / TABS
   =========================================================== */
.tabs-sec{ background:var(--bg); }
.tabs-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:0; border:1px solid var(--line); }
.tabs-media{ position:relative; min-height:540px; background:var(--bg-2); overflow:hidden; }
.tabs-media .media{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .5s var(--ease); }
.tabs-media .media.is-active{ opacity:1; }
.tabs-media__badge{ position:absolute; left:0; bottom:0; z-index:3; background:var(--red); color:#fff; font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.1em; font-size:13px; padding:12px 22px; clip-path:var(--blade); }

.tabs-panel{ padding:clamp(34px,4vw,64px); display:flex; flex-direction:column; }
.tabs-panel > h2{ font-size:clamp(30px,3.4vw,52px); margin-bottom:30px; }
.tabs-panel > h2 em{ color:var(--red); font-style:normal; }
.tablist{ display:flex; flex-direction:column; border-top:1px solid var(--line); margin-bottom:30px; }
.tab{
  text-align:left; background:none; border:0; border-bottom:1px solid var(--line);
  color:#fff; padding:20px 4px; display:flex; align-items:center; gap:18px;
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(20px,2vw,30px); letter-spacing:-.01em; transition:.25s var(--ease);
}
.tab .tnum{ font-size:13px; color:var(--muted-2); transition:.25s var(--ease); }
.tab:hover{ padding-left:14px; color:var(--red-2); }
.tab[aria-selected="true"]{ color:var(--red); padding-left:14px; }
.tab[aria-selected="true"] .tnum{ color:var(--red); }
.tabpanes{ margin-top:auto; }
.tabpane{ display:none; color:var(--muted); font-size:16px; }
.tabpane.is-active{ display:block; animation:fadeup .5s var(--ease); }
.tabpane h4{ font-size:18px; color:#fff; letter-spacing:.12em; margin-bottom:12px; }
.tabpane ul{ list-style:none; padding:0; margin:18px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
.tabpane li{ font-family:var(--font-display); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#fff; padding:8px 14px; background:var(--bg-3); }
@keyframes fadeup{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* ===========================================================
   EVENTOS
   =========================================================== */
.events{ background:var(--bg-1); }
.event{
  display:grid; grid-template-columns:140px 1fr auto; align-items:center; gap:32px;
  padding:30px 0; border-top:1px solid var(--line); transition:.3s var(--ease);
}
.events .event:last-child{ border-bottom:1px solid var(--line); }
.event:hover{ background:linear-gradient(90deg, rgba(226,16,27,.08), transparent 60%); padding-inline:18px; }
.event__date{ display:flex; align-items:baseline; gap:8px; }
.event__day{ font-family:var(--font-display); font-weight:800; font-style:italic; font-size:clamp(46px,5vw,76px); line-height:.8; }
.event__mon{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:13px; color:var(--muted); }
.event__main h3{ font-size:clamp(20px,2.1vw,30px); margin-bottom:10px; transition:.25s var(--ease); }
.event:hover .event__main h3{ color:var(--red); }
.event__meta{ display:flex; flex-wrap:wrap; gap:8px 22px; color:var(--muted); font-size:14px; }
.event__meta span{ display:inline-flex; align-items:center; gap:7px; }
.event__meta svg{ width:15px; height:15px; color:var(--red); }

/* ===========================================================
   CTA SPLIT
   =========================================================== */
.cta{ position:relative; background:var(--bg); padding:0; }
.cta__grid{ display:grid; grid-template-columns:1.25fr 1fr; min-height:560px; }
.cta__media{ position:relative; overflow:hidden; background:var(--bg-2); }
.cta__media .media{ width:100%; height:100%; }
.cta__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent 40%, var(--bg) 100%); z-index:1; }
.cta__panel{ background:var(--bg); display:flex; flex-direction:column; justify-content:center; padding:clamp(40px,5vw,80px); }
.cta__panel h2{ font-size:clamp(32px,3.8vw,62px); margin:22px 0 20px; }
.cta__panel h2 em{ color:var(--red); font-style:normal; }
.cta__panel p{ color:var(--muted); max-width:42ch; margin:0 0 34px; font-size:16px; }

/* ===========================================================
   PARTNERS
   =========================================================== */
.partners{ background:var(--bg-1); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.partners .wrap{ display:flex; flex-direction:column; gap:36px; }
.partners__label{ text-align:center; color:var(--muted-2); font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.3em; font-size:12px; }
.partners__row{ display:grid; grid-template-columns:repeat(6,1fr); align-items:center; gap:24px; }
.partner{ height:54px; display:grid; place-items:center; border:1px solid var(--line); color:var(--muted-2); font-family:var(--font-display); font-weight:800; font-style:italic; text-transform:uppercase; letter-spacing:.04em; font-size:18px; transition:.25s var(--ease); }
.partner:hover{ color:#fff; border-color:var(--red); }

/* ===========================================================
   GALERÍA SLIDER
   =========================================================== */
.gallery{ background:var(--bg); overflow:hidden; }
.gallery__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:42px; }
.gallery__head h2{ font-size:clamp(32px,4vw,60px); }
.gallery__nav{ display:flex; gap:10px; }
.gallery__nav button{ width:54px; height:54px; border:1px solid var(--line); background:none; color:#fff; display:grid; place-items:center; transition:.2s var(--ease); }
.gallery__nav button:hover{ background:var(--red); border-color:var(--red); }
.gallery__viewport{ overflow:hidden; }
.gallery__track{ display:flex; gap:20px; transition:transform .55s var(--ease); }
.slide{ flex:0 0 clamp(280px, 42%, 560px); }
.slide .media{ display:block; width:100%; aspect-ratio:4/3; min-height:230px; }
.slide__cap{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; }
.slide__cap b{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:16px; }
.slide__cap span{ color:var(--muted); font-size:13px; }

/* ===========================================================
   NEWSLETTER
   =========================================================== */
.news{ background:var(--red); color:#fff; text-align:center; }
.news .wrap{ max-width:820px; }
.news h2{ font-size:clamp(34px,5vw,72px); font-style:italic; }
.news p{ max-width:46ch; margin:18px auto 34px; font-size:17px; opacity:.92; }
.news__form{ display:flex; gap:12px; max-width:560px; margin:0 auto; }
.news__form input{
  flex:1; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.4);
  color:#fff; padding:17px 20px; font-family:var(--font-body); font-size:15px;
}
.news__form input::placeholder{ color:rgba(255,255,255,.7); }
.news__form input:focus{ outline:none; border-color:#fff; background:rgba(0,0,0,.3); }
.news__form .btn{ background:#08080A; color:#fff; }
.news__form .btn:hover{ background:#000; box-shadow:0 14px 34px rgba(0,0,0,.4); }
.news__check{ display:inline-flex; align-items:center; gap:10px; margin-top:18px; font-size:13px; opacity:.9; }
.news__check input{ width:16px; height:16px; accent-color:#08080A; }
.news__msg{ min-height:22px; margin-top:14px; font-family:var(--font-display); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:13px; }

/* ===========================================================
   FOOTER
   =========================================================== */
.footer{ background:var(--bg); border-top:1px solid var(--line); }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-block:clamp(56px,7vw,96px); }
.footer__brand img{ height:34px; margin-bottom:22px; }
.footer__brand p{ color:var(--muted); max-width:32ch; font-size:15px; }
.footer__col h4{ font-size:14px; letter-spacing:.18em; color:#fff; margin-bottom:20px; }
.footer__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.footer__col a, .footer__col li{ color:var(--muted); font-size:15px; transition:.2s var(--ease); }
.footer__col a:hover{ color:var(--red); }
.footer__bottom{ border-top:1px solid var(--line); padding-block:24px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; color:var(--muted-2); font-size:13px; }
.footer__social{ display:flex; gap:10px; }
.footer__social a{ width:40px; height:40px; border:1px solid var(--line); display:grid; place-items:center; color:#fff; transition:.2s var(--ease); }
.footer__social a:hover{ background:var(--red); border-color:var(--red); }
.footer__social svg{ width:17px; height:17px; }

/* ===========================================================
   UTILIDADES UI
   =========================================================== */
.progress{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--red); z-index:90; }
.totop{
  position:fixed; right:22px; bottom:22px; z-index:55;
  width:50px; height:50px; background:var(--red); color:#fff; border:0;
  display:grid; place-items:center; opacity:0; transform:translateY(20px); pointer-events:none;
  transition:.3s var(--ease); clip-path:polygon(0 0,100% 0,100% 100%,13px 100%);
}
.totop.show{ opacity:1; transform:none; pointer-events:auto; }
.totop:hover{ background:var(--red-2); }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
  .hero__title .ln > span{ transform:none !important; }
}

/* ===========================================================
   TIENDA / SHOP
   =========================================================== */
.shop{ background:var(--bg); border-top:1px solid var(--line-2); }
.shop__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:46px; }
.shop__head h2{ font-size:clamp(34px,4.6vw,68px); }
.shop__head h2 em{ color:var(--red); font-style:normal; }
.shop__intro{ color:var(--muted); max-width:46ch; font-size:16px; }

/* destacado */
.shop__feature{ display:grid; grid-template-columns:1.15fr 1fr; border:1px solid var(--line); margin-bottom:22px; background:var(--bg-1); }
.shop__feature-media{ position:relative; min-height:380px; overflow:hidden; }
.shop__feature-media .media{ position:absolute; inset:0; }
.shop__feature-badge{ position:absolute; top:0; left:0; z-index:2; background:var(--red); color:#fff; font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.1em; font-size:12px; padding:10px 20px; clip-path:var(--blade); }
.shop__feature-copy{ padding:clamp(28px,3.6vw,56px); display:flex; flex-direction:column; justify-content:center; }
.shop__feature-copy h3{ font-size:clamp(28px,3vw,48px); font-style:italic; margin:16px 0 16px; }
.shop__feature-copy p{ color:var(--muted); font-size:15.5px; margin:0 0 26px; max-width:44ch; }
.shop__feature-price{ display:flex; align-items:baseline; gap:14px; margin-bottom:28px; }
.shop__feature-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* precio */
.price-was{ color:var(--muted-2); text-decoration:line-through; font-size:17px; font-family:var(--font-display); font-weight:600; }
.price-now{ color:#fff; font-family:var(--font-display); font-weight:800; font-style:italic; font-size:clamp(26px,3vw,40px); letter-spacing:-.01em; }

/* grid de productos */
.shop__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.product{ position:relative; border:1px solid var(--line); background:var(--bg-1); display:flex; flex-direction:column; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); }
.product:hover{ background:var(--bg-2); transform:translateY(-5px); box-shadow:0 26px 54px rgba(0,0,0,.5); }
.product__media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.product__media .media{ position:absolute; inset:0; transition:transform .5s var(--ease); }
.product:hover .product__media .media{ transform:scale(1.06); }
.product__badge{ position:absolute; top:0; left:0; z-index:2; background:var(--red); color:#fff; font-family:var(--font-display); font-weight:800; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:7px 15px; clip-path:var(--blade); }
.product__badge--out{ background:#26262c; color:var(--muted); }
.product__quick{ position:absolute; left:14px; right:14px; bottom:14px; z-index:3; background:rgba(8,8,10,.78); backdrop-filter:blur(6px); border:1px solid var(--line); color:#fff; font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:12px; padding:12px; opacity:0; transform:translateY(12px); transition:.28s var(--ease); }
.product:hover .product__quick{ opacity:1; transform:none; }
.product__quick:hover{ background:var(--red); border-color:var(--red); }
.product__body{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; }
.product__cat{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.18em; font-size:11px; color:var(--muted-2); }
.product__name{ font-size:19px; margin:8px 0 12px; line-height:1; }
.product__price{ display:flex; align-items:baseline; gap:10px; margin-top:auto; margin-bottom:16px; }
.product__price .price-now{ font-size:25px; }
.product__price .price-was{ font-size:15px; }
.product__add{ width:100%; justify-content:center; }
.product.is-out{ opacity:.62; }
.product.is-out .product__add{ background:#26262c; color:var(--muted); cursor:not-allowed; box-shadow:none; }
.product.is-out .product__add:hover{ transform:none; }

/* estrellas */
.stars{ position:relative; display:inline-block; font-size:14px; line-height:1; color:var(--muted-2); margin-bottom:14px; }
.stars::before{ content:"★★★★★"; letter-spacing:3px; }
.stars i{ position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; width:var(--pct,100%); color:var(--red-2); }
.stars i::before{ content:"★★★★★"; letter-spacing:3px; }

/* ===========================================================
   CARRITO (off-canvas)
   =========================================================== */
.icon-btn.cart-btn{ position:relative; overflow:visible; }
.cart-count{ position:absolute; top:-7px; right:-7px; min-width:18px; height:18px; padding:0 4px; background:var(--red); color:#fff; border-radius:9px; font-family:var(--font-display); font-weight:800; font-size:11px; line-height:18px; text-align:center; }
.cart-count[data-empty="true"]{ display:none; }

.cart-backdrop{ position:fixed; inset:0; z-index:85; background:rgba(0,0,0,.62); opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s var(--ease); }
.cart-backdrop.is-open{ opacity:1; visibility:visible; }
.cart{ position:fixed; top:0; right:0; bottom:0; z-index:86; width:min(424px,92vw); background:var(--bg-1); border-left:1px solid var(--line); transform:translateX(101%); transition:transform .4s var(--ease); display:flex; flex-direction:column; }
.cart.is-open{ transform:none; }
.cart__head{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line); }
.cart__head h4{ font-size:20px; display:flex; align-items:center; gap:10px; }
.cart__n{ background:var(--red); color:#fff; font-size:12px; padding:2px 9px; font-style:normal; }
.cart__close{ width:42px; height:42px; border:1px solid var(--line); background:none; color:#fff; display:grid; place-items:center; }
.cart__close:hover{ background:var(--red); border-color:var(--red); }
.cart__close svg{ width:18px; height:18px; }
.cart__items{ flex:1; overflow-y:auto; padding:6px 24px; }
.cart-item{ display:grid; grid-template-columns:64px 1fr auto; gap:14px; padding:18px 0; border-bottom:1px solid var(--line); }
.cart-item__thumb{ width:64px; height:50px; background:var(--bg-3); position:relative; overflow:hidden; }
.cart-item__thumb::after{ content:""; position:absolute; left:0; top:0; width:20px; height:20px; background:var(--red); clip-path:polygon(0 0,100% 0,0 100%); }
.cart-item__name{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:14px; letter-spacing:.02em; line-height:1.1; }
.cart-item__price{ color:var(--muted); font-size:13px; margin-top:4px; }
.cart-item__qty{ display:inline-flex; align-items:center; margin-top:10px; border:1px solid var(--line); }
.cart-item__qty button{ width:28px; height:28px; background:none; color:#fff; font-size:16px; line-height:1; }
.cart-item__qty button:hover{ background:var(--red); }
.cart-item__qty span{ min-width:32px; text-align:center; font-family:var(--font-display); font-weight:700; font-size:13px; }
.cart-item__col{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; }
.cart-item__line{ font-family:var(--font-display); font-weight:800; font-style:italic; font-size:16px; white-space:nowrap; }
.cart-item__rm{ background:none; border:0; color:var(--muted-2); font-size:11px; text-transform:uppercase; letter-spacing:.1em; font-family:var(--font-display); font-weight:700; }
.cart-item__rm:hover{ color:var(--red-2); }
.cart__empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--muted); padding:40px; font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:14px; gap:8px; }
.cart__empty span{ color:var(--muted-2); font-size:12px; letter-spacing:.08em; }
.cart.is-empty .cart__items, .cart.is-empty .cart__foot{ display:none; }
.cart:not(.is-empty) .cart__empty{ display:none; }
.cart__foot{ border-top:1px solid var(--line); padding:22px 24px; }
.cart__total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px; }
.cart__total span{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:13px; color:var(--muted); }
.cart__total-val{ font-family:var(--font-display); font-weight:800; font-style:italic; font-size:30px; }
.cart__checkout{ width:100%; justify-content:center; }
.cart__note{ text-align:center; color:var(--muted-2); font-size:12px; margin:14px 0 0; }

/* toast */
.toast{ position:fixed; left:50%; bottom:28px; z-index:95; transform:translate(-50%,30px); opacity:0; background:var(--bg-3); border:1px solid var(--line); border-left:3px solid var(--red); color:#fff; font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:13px; padding:14px 22px; transition:.32s var(--ease); pointer-events:none; max-width:90vw; }
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* shop responsive */
@media (max-width:1080px){
  .shop__grid{ grid-template-columns:repeat(2,1fr); }
  .shop__feature{ grid-template-columns:1fr; }
  .shop__feature-media{ min-height:260px; }
}
@media (max-width:560px){
  .shop__grid{ grid-template-columns:1fr; }
}

/* ===========================================================
   NOTICIAS / PRENSA
   =========================================================== */
.news-press{ background:var(--bg-1); border-top:1px solid var(--line-2); }
.press__intro{ color:var(--muted); max-width:48ch; font-size:16px; }

.press-card{ display:grid; grid-template-columns:1.05fr 1fr; border:1px solid var(--line); background:var(--bg); overflow:hidden; }
.press-card__media{ position:relative; display:block; min-height:360px; overflow:hidden; }
.press-card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.press-card__media:hover img{ transform:scale(1.05); }
.press-card__src{ position:absolute; top:0; left:0; z-index:2; background:var(--red); color:#fff; font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.14em; font-size:12px; padding:9px 18px; clip-path:var(--blade); }
.press-card__body{ padding:clamp(28px,3.4vw,52px); display:flex; flex-direction:column; justify-content:center; }
.press-card__meta{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.press-card__tag{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.16em; font-size:12px; color:var(--red-2); }
.press-card__date{ display:inline-flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:12px; color:var(--muted); }
.press-card__date::before{ content:""; width:5px; height:5px; background:var(--muted-2); transform:rotate(45deg); }
.press-card h3{ font-family:var(--font-display); font-weight:800; font-size:clamp(24px,2.8vw,40px); line-height:1.06; margin-bottom:16px; }
.press-card p{ color:var(--muted); font-size:15.5px; line-height:1.65; margin-bottom:28px; max-width:52ch; }
.press-card p b{ color:#fff; font-weight:700; }
.press-card .btn{ align-self:flex-start; }

.press-gallery__label{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.2em; font-size:12px; color:var(--muted-2); margin:28px 0 12px; }
.press-gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.press-thumb{ display:block; position:relative; aspect-ratio:1; overflow:hidden; border:1px solid var(--line); }
.press-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.press-thumb:hover img{ transform:scale(1.08); }

@media (max-width:860px){
  .press-card{ grid-template-columns:1fr; }
  .press-card__media{ min-height:0; aspect-ratio:16/10; }
}
@media (max-width:560px){
  .press-gallery{ grid-template-columns:repeat(2,1fr); }
}

/* ===========================================================
   VISOR / LIGHTBOX
   =========================================================== */
.lightbox{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  background:rgba(5,5,7,.94); backdrop-filter:blur(8px); opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s var(--ease); padding:clamp(16px,4vw,60px); }
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__stage{ position:relative; max-width:min(1100px,92vw); max-height:86vh; margin:0;
  display:flex; flex-direction:column; align-items:center; }
.lightbox__img{ max-width:100%; max-height:80vh; width:auto; height:auto; object-fit:contain;
  border:1px solid var(--line); box-shadow:0 30px 90px rgba(0,0,0,.6);
  transform:scale(.96); opacity:0; transition:transform .35s var(--ease), opacity .35s var(--ease); }
.lightbox.is-open .lightbox__img{ transform:scale(1); opacity:1; }
.lightbox__cap{ margin-top:16px; text-align:center; color:var(--muted); font-size:14px; max-width:62ch; }
.lightbox__close{ position:absolute; top:clamp(14px,2.5vw,28px); right:clamp(14px,2.5vw,28px);
  width:48px; height:48px; border:1px solid var(--line); background:rgba(8,8,10,.5); color:#fff;
  display:grid; place-items:center; z-index:2; transition:.25s var(--ease); }
.lightbox__close:hover{ background:var(--red); border-color:var(--red); }
.lightbox__close svg{ width:20px; height:20px; }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px;
  border:1px solid var(--line); background:rgba(8,8,10,.5); color:#fff; display:grid; place-items:center;
  z-index:2; transition:.25s var(--ease); }
.lightbox__nav:hover{ background:var(--red); border-color:var(--red); }
.lightbox__nav svg{ width:22px; height:22px; }
.lightbox__prev{ left:clamp(10px,2vw,28px); }
.lightbox__next{ right:clamp(10px,2vw,28px); }
.lightbox__count{ position:absolute; bottom:clamp(14px,2.5vw,26px); left:50%; transform:translateX(-50%);
  font-family:var(--font-display); font-weight:700; letter-spacing:.2em; font-size:12px; color:var(--muted); }
@media (max-width:560px){
  .lightbox__nav{ width:44px; height:44px; }
  .lightbox__img{ max-height:72vh; }
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 1080px){
  .nav, .header__tools .icon-btn:not(.burger):not(.cart-btn){ display:none; }
  .burger{ display:grid; }
  .pillars{ grid-template-columns:repeat(2,1fr); }
  .pillar:nth-child(2n){ border-right:0; }
  .pillar{ border-bottom:1px solid var(--line); }
  .partners__row{ grid-template-columns:repeat(3,1fr); }
  .footer__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 860px){
  .tabs-grid{ grid-template-columns:1fr; }
  .tabs-media{ min-height:340px; }
  .cta__grid{ grid-template-columns:1fr; }
  .cta__media{ min-height:300px; }
  .event{ grid-template-columns:90px 1fr; gap:20px; }
  .event .btn{ grid-column:2; justify-self:start; }
  .hero__subs p:last-child{ display:none; }
}
@media (max-width: 560px){
  body{ font-size:16px; }
  .pillars{ grid-template-columns:1fr; }
  .pillar{ border-right:0; }
  .partners__row{ grid-template-columns:repeat(2,1fr); }
  .footer__top{ grid-template-columns:1fr; }
  .news__form{ flex-direction:column; }
  .slide{ flex:0 0 86%; }
}