/* =========================================================
   TOKENS
   ========================================================= */
:root{
  --rojo-esmalte:   #C23B22;
  --amarillo-tienda:#E8A93B;
  --negro-tablero:  #181512;
  --crema-papel:    #F2E9D8;
  --verde-aviso:    #2F4538;
  --rosa-rogelio:   #FF6F91;

  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-body:    'Zilla Slab', Georgia, serif;
  --font-mono:    'Space Mono', monospace;

  --container: 1120px;
  --radius: 6px;
  --shadow-hard: 6px 6px 0 rgba(24,21,18,0.9);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--crema-papel);
  color:var(--negro-tablero);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{
  outline:3px solid var(--amarillo-tienda);
  outline-offset:3px;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--rojo-esmalte);
  margin:0 0 10px;
}
.eyebrow--light{ color:var(--amarillo-tienda); }
.eyebrow--rogelio{ color:var(--rojo-esmalte); }

.section{
  max-width:var(--container);
  margin:0 auto;
  padding:64px 24px;
}
.section--dark{
  max-width:none;
  background:var(--negro-tablero);
  color:var(--crema-papel);
  padding:64px 24px;
}
@media (max-width:640px){
  .section,
  .section--dark{ padding:52px 20px; }
}
.section--dark .section__head{ max-width:var(--container); margin:0 auto 48px; }
.section--dark .board,
.section--dark .store-grid{ max-width:var(--container); margin:0 auto; }

.section__head{ max-width:640px; margin:0 0 48px; }
.section__title{
  font-family:var(--font-display);
  font-size:clamp(2.4rem,5vw,3.6rem);
  letter-spacing:0.01em;
  line-height:1;
}
.section--dark .section__title{ color:var(--crema-papel); }
.section__lead{
  font-size:1.05rem;
  color:rgba(24,21,18,0.72);
  margin-top:14px;
}
.section--dark .section__lead{ color:rgba(242,233,216,0.7); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:0.85rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:14px 24px;
  border-radius:var(--radius);
  border:2px solid var(--negro-tablero);
  cursor:pointer;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow:var(--shadow-hard);
}
.btn:hover{ transform:translate(-2px,-2px); }
.btn:active{ transform:translate(0,0); box-shadow:2px 2px 0 rgba(24,21,18,0.9); }
.btn--primary{ background:var(--rojo-esmalte); color:var(--crema-papel); border-color:var(--negro-tablero); }
.btn--ghost{ background:transparent; color:var(--negro-tablero); }
.btn--outline{ background:var(--crema-papel); color:var(--negro-tablero); }
.btn[disabled]{ opacity:0.55; cursor:not-allowed; transform:none; }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px;
  background:rgba(242,233,216,0.92);
  backdrop-filter:blur(6px);
  border-bottom:2px solid var(--negro-tablero);
}
.nav__brand{
  font-family:var(--font-display);
  font-size:1.5rem;
  letter-spacing:0.02em;
  display:flex; align-items:center; gap:10px;
}
.nav__logo{ display:none; height:38px; width:38px; border-radius:50%; object-fit:cover; }
.nav__logo.is-visible{ display:block; }
.nav__brand-dot{ color:var(--rojo-esmalte); }
.nav__links{ display:flex; gap:36px; font-family:var(--font-mono); font-size:0.82rem; text-transform:uppercase; letter-spacing:0.01em; }
.nav__links a{ position:relative; padding-bottom:4px; }
.nav__links a:hover{ color:var(--rojo-esmalte); }
.nav__cta{
  font-family:var(--font-mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em;
  background:var(--negro-tablero); color:var(--crema-papel);
  padding:10px 18px; border-radius:var(--radius);
}
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.nav__burger span{ width:24px; height:2px; background:var(--negro-tablero); display:block; }

@media (max-width:860px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
}

/* =========================================================
   HERO — spotlight + marquee letterboard
   ========================================================= */
.hero{
  position:relative;
  min-height:auto;
  display:flex; align-items:center;
  background:var(--negro-tablero);
  color:var(--crema-papel);
  overflow:hidden;
  padding:96px 24px 64px;
}
@media (max-width:640px){
  .hero{ min-height:auto; padding:84px 20px 56px; }
}
.hero__spot{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 18%, rgba(232,169,59,0.16), transparent 60%),
    repeating-linear-gradient(transparent, transparent 38px, rgba(242,233,216,0.025) 39px);
  pointer-events:none;
}
.hero__content{ position:relative; max-width:var(--container); margin:0 auto; text-align:center; width:100%; }

/* ---- Banner rotativo de tres caras (estilo valla trivisión) ---- */
.prism-wrap{
    width:min(900px, 100%);
  margin:6px auto 56px;
  perspective:1600px;
  position:relative;
}
.prism{
  position:relative;
  width:100%;
    aspect-ratio:1.85/1;
  transform-style:preserve-3d;
  transition:transform 1.1s cubic-bezier(.65,0,.35,1);
  cursor:pointer;
}
.prism__face{ position:absolute; inset:0; display:block; border-radius:6px; background: linear-gradient(135deg, rgba(232,169,59,0.22), rgba(194,59,34,0.22)), repeating-linear-gradient(45deg, rgba(242,233,216,0.05) 0 10px, transparent 10px 20px), var(--negro-tablero); background-size:cover; background-position:center; border:3px solid rgba(242,233,216,0.45); box-shadow:0 18px 40px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(242,233,216,0.1); backface-visibility:hidden; }
.prism__face::after{
  content:attr(data-label);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:0 28px;
  font-family:var(--font-mono); font-size:0.85rem; letter-spacing:0.04em;
  color:rgba(242,233,216,0.55);
}
.prism__face.has-image::after{ content:none; }

.prism-dots{ display:flex; justify-content:center; gap:8px; margin-top:16px; }
.prism-dot{
  width:9px; height:9px; padding:0; border:0; border-radius:50%;
  background:rgba(242,233,216,0.25); cursor:pointer;
  transition:background 0.3s ease, transform 0.3s ease;
}
.prism-dot:hover{ background:rgba(242,233,216,0.5); }
.prism-dot.is-active{ background:var(--amarillo-tienda); transform:scale(1.3); }

.prism-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; border:2px solid rgba(242,233,216,0.5);
  background:rgba(24,21,18,0.55); color:var(--crema-papel);
  font-size:1rem; line-height:1; cursor:pointer; z-index:5;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.prism-arrow:hover{ background:rgba(24,21,18,0.85); border-color:var(--amarillo-tienda); }
.prism-arrow--prev{ left:-8px; }
.prism-arrow--next{ right:-8px; }

@media (max-width:640px){
    .prism-wrap{ width:100%; }
    .prism-arrow{ width:32px; height:32px; font-size:0.85rem; }
    .prism-arrow--prev{ left:2px; }
    .prism-arrow--next{ right:2px; }
}

.hero__tagline{ max-width:520px; margin:0 auto 36px; font-size:1.15rem; color:rgba(242,233,216,0.82); }
.hero__actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:44px; }
.hero__actions .btn--ghost{ color:var(--crema-papel); border-color:rgba(242,233,216,0.5); box-shadow:none; }
.hero__actions .btn--ghost:hover{ border-color:var(--crema-papel); transform:translate(-2px,-2px); }
.hero__social{ display:flex; gap:24px; justify-content:center; font-family:var(--font-mono); font-size:0.8rem; text-transform:uppercase; letter-spacing:0.08em; }
.hero__social a{ color:rgba(242,233,216,0.65); border-bottom:1px solid transparent; }
.hero__social a:hover{ color:var(--amarillo-tienda); border-color:var(--amarillo-tienda); }

/* =========================================================
   GIRA — letterboard show cards
   ========================================================= */
.board{ display:flex; flex-direction:column; gap:2px; }
.show-card{
  display:grid;
  grid-template-columns:120px 1fr auto;
  align-items:center;
  gap:24px;
  padding:22px 20px;
  background:#211d18;
  border-left:4px solid var(--amarillo-tienda);
}
.show-card:has(.show-card__img){ grid-template-columns:96px 120px 1fr auto; }
.show-card__img{ width:96px; height:96px; object-fit:cover; border-radius:var(--radius); flex-shrink:0; }
.show-card__date{
  font-family:var(--font-mono);
  font-size:0.95rem;
  color:var(--amarillo-tienda);
  letter-spacing:0.04em;
}
.show-card__main{ }
.show-card__city{ font-family:var(--font-display); font-size:1.7rem; letter-spacing:0.02em; }
.show-card__venue{ font-size:0.92rem; color:rgba(242,233,216,0.62); margin-top:2px; }
.show-card__cta{
  font-family:var(--font-mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--negro-tablero); background:var(--crema-papel);
  padding:10px 16px; border-radius:var(--radius); white-space:nowrap;
}
.show-card__cta:hover{ background:var(--amarillo-tienda); }

@media (max-width:640px){
  .show-card{ grid-template-columns:1fr; text-align:left; gap:10px; }
  .show-card:has(.show-card__img){ grid-template-columns:1fr; }
    .show-card__img{ width:64px; height:64px; order:1; }
  .show-card__date{ order:2; }
  .show-card__cta{ order:3; width:100%; text-align:center; white-space:normal; }
  .show-card__main{ order:4; }
}

/* =========================================================
   CONTENIDO
   ========================================================= */
.content-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:32px; align-items:stretch; }
.video-card__frame{ position:relative; padding-top:56.25%; background:#000; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-hard); }
.video-card__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-card__caption{ font-family:var(--font-mono); font-size:0.78rem; color:rgba(24,21,18,0.55); margin-top:10px; }

.content-links{ display:flex; flex-direction:column; gap:14px; }
.content-link{
  display:flex; flex-direction:column; gap:4px;
  padding:20px; border:2px solid var(--negro-tablero); border-radius:var(--radius);
  background:var(--crema-papel);
  transition:transform 0.15s ease;
}
.content-link:hover{ transform:translateX(4px); background:var(--amarillo-tienda); }
.content-link__label{ font-family:var(--font-display); font-size:1.4rem; }
.content-link__sub{ font-size:0.9rem; color:rgba(24,21,18,0.65); }
.episode-card{ display:flex; align-items:center; gap:12px; padding:12px; border:2px solid var(--negro-tablero); border-radius:var(--radius); background:var(--crema-papel); transition:transform 0.15s ease; }
.episode-card:hover{ transform:translateX(4px); background:var(--amarillo-tienda); }
.episode-card__img{ width:84px; height:84px; object-fit:cover; border-radius:4px; flex-shrink:0; box-shadow:var(--shadow-hard); }
.episode-card__label{ font-family:var(--font-display); font-size:1.05rem; line-height:1.15; }
.episode-card__sub{ font-family:var(--font-mono); font-size:0.7rem; color:rgba(24,21,18,0.55); }

@media (max-width:760px){ .content-grid{ grid-template-columns:1fr; } }

/* =========================================================
   ROGELIO
   ========================================================= */
.section--rogelio{ background:var(--rosa-rogelio); padding:0; max-width:none; }
.rogelio{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:340px 1fr; gap:56px; align-items:center; padding:96px 24px; }
.rogelio__photo{
  aspect-ratio:4/5; background:repeating-linear-gradient(135deg, rgba(24,21,18,0.08) 0 12px, transparent 12px 24px), var(--negro-tablero);
  border:4px solid var(--negro-tablero); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-hard);
}
.rogelio__photo-label{ font-family:var(--font-mono); color:var(--crema-papel); text-align:center; font-size:0.85rem; opacity:0.7; }
.rogelio__copy{ font-size:1.08rem; margin:18px 0 28px; max-width:54ch; }

@media (max-width:760px){ .rogelio{ grid-template-columns:1fr; padding:64px 24px; } }

/* =========================================================
   TIENDA
   ========================================================= */
.store-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:24px; }
.product-card{
  background:#211d18; border:1px solid rgba(242,233,216,0.12); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
}
.product-card__image{
  aspect-ratio:1/1; background:linear-gradient(135deg, var(--verde-aviso), #1c2a21);
  display:flex; align-items:center; justify-content:center;
}
.product-card__image-label{ font-family:var(--font-mono); font-size:0.78rem; color:rgba(242,233,216,0.55); text-align:center; padding:0 20px; }
.product-card__body{ padding:22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.product-card__name{ font-family:var(--font-display); font-size:1.5rem; letter-spacing:0.01em; }
.product-card__desc{ font-size:0.92rem; color:rgba(242,233,216,0.62); flex:1; }
.product-card__price{ font-family:var(--font-mono); font-size:1.1rem; color:var(--amarillo-tienda); }
.product-card__buy{
  margin-top:6px; width:100%; border:0; border-radius:var(--radius);
  background:var(--rojo-esmalte); color:var(--crema-papel);
  font-family:var(--font-mono); font-weight:700; text-transform:uppercase; letter-spacing:0.05em; font-size:0.82rem;
  padding:14px; cursor:pointer; transition:background 0.15s ease;
}
.product-card__buy:hover{ background:#a83018; }
.product-card__buy[disabled]{ opacity:0.5; cursor:wait; }

.store-note{ font-family:var(--font-mono); font-size:0.78rem; color:rgba(242,233,216,0.5); margin-top:28px; max-width:var(--container); margin-left:auto; margin-right:auto; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--negro-tablero); color:var(--crema-papel); padding:48px 24px 28px; }
.footer__top{ max-width:var(--container); margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; padding-bottom:28px; border-bottom:1px solid rgba(242,233,216,0.15); }
.footer__brand{ color:var(--crema-papel); }
.footer__social{ display:flex; gap:20px; font-family:var(--font-mono); font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; }
.footer__social a:hover{ color:var(--amarillo-tienda); }
.footer__bottom{ max-width:var(--container); margin:20px auto 0; font-family:var(--font-mono); font-size:0.75rem; color:rgba(242,233,216,0.5); }