/* ===========================================================
   REPION — v2 (hub oscuro)
   =========================================================== */

@font-face{
  font-family: 'Inter';
  src: url('../fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Neue Haas Grotesk Display';
  src: url('../fonts/NHaasGroteskDSPro-55Rg.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Neue Haas Grotesk Display';
  src: url('../fonts/NHaasGroteskDSPro-65Md.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Neue Haas Grotesk Display';
  src: url('../fonts/NHaasGroteskDSPro-75Bd.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Tipografía nueva (auto-alojada) — ver CLAUDE.md para el criterio de asignación */
@font-face{
  font-family: 'Europa Grotesk SH';
  src: url('../fonts/EuropaGroteskSH-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Europa Grotesk SH';
  src: url('../fonts/EuropaGroteskSH-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Europa Grotesk SH';
  src: url('../fonts/EuropaGroteskSH-DemBol.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Futura Display';
  src: url('../fonts/FuturaTS-Heavy.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Futura Label';
  src: url('../fonts/Futura-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg:        #0a0a0c;
  --bg-alt:    #141418;
  --line:      #2b2b30;
  --fg:        #f5f4f0;
  --fg-dim:    #a9a7a1;
  --fg-dimmer: #6f6d68;
  --accent:    #5ec4dd;
  --maxw:      1280px;
  --nav-h:     84px;
  --ease:      cubic-bezier(.22,1,.36,1);
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Europa Grotesk SH', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

/* Páginas con footer en flujo (tour/watch/contact): sin esto, una página
   con poco contenido (ej. Contact) deja el footer donde termine el
   contenido en vez de al final del viewport, con un hueco vacío debajo.
   main crece para ocupar el espacio sobrante y empuja el footer abajo;
   si el contenido ya es más alto que la pantalla, no cambia nada. */
main{ flex: 1 0 auto; }

img{ display:block; max-width:100%; }

a{ color: inherit; text-decoration: none; }

.display{
  font-family: 'Futura Display', 'Europa Grotesk SH', sans-serif;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: .9;
  text-transform: uppercase;
}

.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------------- noise / grain overlay ---------------- */
body::before{
  content:"";
  position: fixed; inset:0;
  pointer-events:none;
  z-index: 999;
  opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* ---------------- nav ---------------- */
.site-nav{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 500;
  height: var(--nav-h);
  display:flex;
  align-items:center;
  padding: 0 28px;
  background: transparent;
  border-bottom: none;
  /* capa de composición propia: evita que iOS Safari deje de repintar el
     fondo (y el blur) durante la animación de contraer/expandir su barra
     de herramientas al hacer scroll */
  transform: translateZ(0);
  will-change: transform;
}
/* Fondo/blur en un pseudo-elemento aparte que sobresale por encima del
   propio nav (offset negativo). En iOS, cuando la barra de Safari se
   contrae al hacer scroll, el viewport visual crece momentáneamente y deja
   ver una franja sin cubrir justo encima de un position:fixed — este
   sobresaliente asegura que esa franja siga tapada por el blur en vez de
   mostrar el contenido en crudo. */
.site-nav::before{
  content: "";
  position: absolute;
  top: -120px; left:0; right:0; bottom:0;
  z-index: -1;
  background: transparent;
  transition: background-color .3s ease;
}
.site-nav.scrolled::before{
  background: rgba(10,10,12,.55);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.nav-inner{
  width:100%;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
}
.nav-logo{ justify-self:start; }
.nav-links{ justify-self:center; }
.nav-right{ justify-self:end; }
.nav-logo{
  display: block;
  transition: opacity .2s;
}
.nav-logo-img{
  display: block;
  height: clamp(32.4px, 4.05vw, 52.2px);
  width: auto;
  max-width: none;
}
@media (max-width: 760px){
  .nav-logo-img{ height: clamp(28.8px, 9vw, 50.4px); }
}
.nav-logo:hover{ opacity:.7; }
.nav-links{
  display:flex;
  gap: 40px;
  list-style:none;
  margin:0; padding:0;
}
.nav-links a{
  font-family: 'Futura Label', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  position: relative;
  padding: 6px 0;
  transition: color .25s;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background: var(--fg);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease);
}
.nav-links a:hover{ color: var(--fg); }
.nav-links a:hover::after{ transform: scaleX(1); transform-origin: left; }
.nav-links a.active{ color: var(--fg); }
.nav-links a.active::after{ transform: scaleX(1); background: var(--accent); }

.nav-right{
  display:flex;
  align-items:center;
  gap: 28px;
}
.socials-trigger{
  background:none;
  border:none;
  color: var(--fg-dim);
  font-family:'Futura Label',sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor:pointer;
  padding: 6px 0;
  transition: color .2s;
}
.socials-trigger:hover{ color: var(--fg); }
@media (max-width: 520px){
  .socials-trigger{ font-size: 10px; letter-spacing:.1em; }
}

.socials-overlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.65);
  z-index: 650;
  opacity:0; pointer-events:none;
  transition: opacity .35s var(--ease);
}
.socials-overlay.open{ opacity:1; pointer-events:auto; }

.socials-panel{
  position:fixed; top:0; right:0; bottom:0;
  width: 420px; max-width: 100%;
  background: var(--bg-alt);
  border-left: 1px solid var(--line);
  z-index: 700;
  padding: 32px;
  display:flex; flex-direction:column;
  transform: translateX(100%);
  transition: transform .45s var(--ease);
  overflow-y:auto;
}
.socials-panel.open{ transform: translateX(0); }
.socials-panel-head{
  display:flex; justify-content:space-between; align-items:center;
  padding-top: 8px;
  margin-bottom: 64px;
}
.socials-panel-head span{
  font-family:'Futura Label',sans-serif; font-size: 12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color: var(--fg-dim);
}
.socials-close{
  background:none; border:none; color: var(--fg);
  font-size: 26px; line-height:1; cursor:pointer; padding:4px;
}
.socials-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap: 26px;
  flex:1;
}
.socials-list a{
  font-family:'Futura Display',sans-serif;
  font-weight: 700;
  font-size: 40px;
  letter-spacing:.02em;
  color: var(--fg);
  transition: opacity .2s;
}
.socials-list a:hover{ opacity:.55; }
.socials-icons{
  display:flex; gap: 22px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.socials-icons a{ color: var(--fg-dim); transition: color .2s; }
.socials-icons a:hover{ color: var(--fg); }
.socials-icons svg{ width:22px; height:22px; display:block; }

.nav-toggle{
  display:none;
  width: 30px; height: 22px;
  position: relative;
  background:none; border:none;
  cursor:pointer;
  z-index: 600;
}
.nav-toggle span{
  position:absolute; left:0; right:0; height:2px;
  background: var(--fg);
  transition: transform .3s var(--ease), opacity .3s var(--ease), top .3s var(--ease);
}
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:10px; }
.nav-toggle span:nth-child(3){ top:20px; }
.nav-toggle.open span:nth-child(1){ top:10px; transform: rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ top:10px; transform: rotate(-45deg); }

@media (max-width: 760px){
  .site-nav{
    height: auto;
    min-height: var(--nav-h);
    padding: 16px 18px;
    align-items: flex-start;
  }
  .nav-inner{
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 10px;
  }
  .nav-logo{ order:1; margin-right:auto; }
  .nav-right{ order:2; gap:14px; }
  .nav-links{
    order:3;
    position: static;
    inset: auto;
    justify-self: auto;
    transform: none;
    background: none;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    padding: 0;
    gap: 14px 18px;
  }
  .nav-links a{ font-size: 11px; font-family:'Futura Label',sans-serif; font-weight: 600; letter-spacing:.08em; }
  .socials-trigger{ font-size: 9px; letter-spacing:.06em; }
}

/* ---------------- footer ---------------- */
.site-footer{
  position: fixed;
  left:0; right:0; bottom:0;
  z-index: 500;
  background: transparent;
  padding: 20px 32px;
}
.footer-row{
  width:100%;
  display:grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: 28px;
}
.footer-social{ justify-self: center; }
.footer-col{
  font-size: 11px;
  letter-spacing: .03em;
  color: var(--fg);
  white-space: nowrap;
  width: max-content;
}
.footer-legal{ white-space: normal; max-width: 420px; min-width: 0; }
.footer-social{ min-width: 0; }
.footer-legal a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-legal a:hover{ opacity: .7; }
.footer-copy{ text-align: right; justify-self: end; }
.footer-social{
  display:flex;
  align-items:center;
  gap: 12px;
}
.footer-social a{ color: var(--fg); transition: opacity .2s; }
.footer-social a:hover{ opacity:.55; }
.footer-social svg{ width:26px; height:26px; display:block; }
/* Tour/Watch: el footer deja de ir fijo y fluye al final del contenido, en todos los anchos */
.site-footer.footer-flow{ position: static; }

@media (max-width: 700px){
  .footer-row{
    display:flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }
  .footer-social{ order:1; justify-self:auto; }
  .footer-legal{ order:2; justify-self:auto; text-align:center; }
  .footer-copy{ order:3; justify-self:auto; text-align:center; }
  .footer-col{ white-space:normal; width:auto; max-width:100%; }
  .site-footer.footer-flow{ padding: 48px 24px 40px; }
}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 14px 28px;
  border: 1px solid var(--fg);
  border-radius: 999px;
  font-family: 'Futura Label', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
  white-space: nowrap;
}
.btn:hover{
  background: var(--fg);
  color: var(--bg);
  transform: translateY(-2px);
}
.btn-solid{
  background: var(--fg);
  color: var(--bg);
}
.btn-solid:hover{
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.btn-sm{ padding: 10px 20px; font-size: 11px; }

/* =========================================================
   HUB (index.html)
   ========================================================= */
.hub-hero{
  position: relative;
  min-height: 100svh;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  overflow:hidden;
  padding: 123px 24px 40px;
}
.hub-hero-media{ position:absolute; inset:0; z-index:0; }
.hub-hero-media img{
  width:100%; height:100%; object-fit:cover;
  object-position: 50% 12%;
}
.hub-hero-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,6,8,.5) 0%, rgba(6,6,8,.3) 40%, rgba(6,6,8,.94) 100%);
}
.hub-content{
  position:relative;
  z-index:2;
  width:100%;
  max-width: 700px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 0px;
}
.hub-title{
  margin: 0;
  font-size: clamp(72px, 17vw, 190px);
  color: var(--fg);
}
.hub-title-img{
  display: block;
  height: clamp(64.8px, 15.3vw, 171px);
  width: auto;
  max-width: none;
}
.hub-buttons{
  width:100%;
  max-width: 700px;
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 36px 76px;
  margin-top: 48px;
}
.hub-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 12px;
  color: var(--fg);
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.hub-btn:hover{ transform: translateY(-3px); opacity:.75; }
.hub-btn svg{ width:38px; height:38px; display:block; }
.hub-btn span{
  font-family: 'Futura Label', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 560px){
  .hub-hero{ padding: 87px 18px 40px; }
  .hub-title{ font-size: clamp(52px, 18vw, 110px); }
  .hub-title-img{ height: clamp(46.8px, 16.2vw, 99px); }
  .hub-buttons{ gap: 26px 20px; margin-top: 35px; }
  .hub-btn svg{ width:30px; height:30px; }
  .hub-btn span{ font-size: 10px; letter-spacing: .08em; }
}

/* Ventanas de escritorio poco altas (portátil sin maximizar, zoom alto):
   con object-fit:cover la foto se recorta más y la cabeza de pie sube
   dentro del encuadre, así que el bloque de arriba necesita aún menos
   aire para no tocarla. */
@media (max-height: 650px) and (min-width: 561px){
  .hub-hero{ padding-top: 20px; }
  .hub-buttons{ margin-top: 90px; }
  .hub-btn{ gap: 6px; }
  .hub-btn svg{ width:22px; height:22px; }
  .hub-btn span{ font-size: 10px; letter-spacing: .08em; }
}

/* =========================================================
   PAGE BACKGROUND (tour / watch)
   ========================================================= */
.page-bg{
  position: fixed;
  inset: 0;
  z-index: -1;
}
.page-bg img{
  width:100%; height:100%; object-fit:cover;
}
.page-bg::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,6,8,.8) 0%, rgba(6,6,8,.93) 100%);
}

/* =========================================================
   TOUR
   ========================================================= */
.page-header{
  padding: calc(var(--nav-h) + 64px) 0 56px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.page-header h1{ font-size: clamp(56px, 11vw, 140px); }
.page-header p{
  max-width: 540px;
  color: var(--fg-dim);
  font-size: 15px;
  line-height: 1.7;
  margin-top: 18px;
}
.show-list{ padding-top: 8px; padding-bottom: 100px; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 6vw, 96px);
  align-items: start;
  padding-top: 48px;
  padding-bottom: 140px;
}
.contact-block{ min-width:0; text-align:center; }
.contact-label{
  font-size: clamp(20px, 3.3vw, 42px);
  margin: 0 0 14px;
}
.contact-email{
  display:inline-block;
  font-size: clamp(13px, 1.3vw, 16px);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--fg-dim);
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  transition: color .25s, border-color .25s;
  word-break: break-word;
}
.contact-email:hover{ color: var(--fg); border-color: var(--fg); }

@media (max-width: 640px){
  .contact-grid{
    grid-template-columns: 1fr;
    gap: 48px 0;
    padding-top: 24px;
    padding-bottom: 120px;
  }
}
.show{
  display:grid;
  grid-template-columns: 140px 1fr auto;
  align-items:center;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .3s var(--ease), background .3s;
}
.show:hover{ padding-left: 10px; background: rgba(255,255,255,.03); }
.show-date{
  font-family:'Futura Display',sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: .03em;
  color: var(--fg);
  line-height: 1.05;
}
.show-date small{
  display:block;
  font-family:'Europa Grotesk SH',sans-serif;
  font-size: 11px;
  letter-spacing:.12em;
  color: var(--fg-dimmer);
  text-transform: uppercase;
  margin-top: 3px;
  font-weight:600;
}
.show-info .show-event{
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 4px;
}
.show-info .show-place{
  font-size: 13px;
  color: var(--fg-dim);
}
@media (max-width: 700px){
  .show{ grid-template-columns: 1fr; gap: 10px; padding: 22px 0; text-align: center; }
  .show .btn{ margin-top: 6px; width:100%; justify-content:center; }
}

.tour-cta{
  margin-top: 40px;
  padding: 56px;
  border: 1px solid var(--line);
  border-radius: 4px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 24px;
  flex-wrap:wrap;
  background: var(--bg-alt);
}
.tour-cta h3{ margin:0 0 6px; font-size: clamp(24px,3vw,34px); }
.tour-cta p{ margin:0; color: var(--fg-dim); font-size: 14px; max-width: 440px; }

/* =========================================================
   WATCH
   ========================================================= */
.watch-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding: 8px 0 120px;
}

.yt-card{
  display:block;
  border-radius: 10px;
  overflow:hidden;
  background: #000;
  border: 1px solid var(--line);
  transition: transform .35s var(--ease), border-color .35s;
}
.yt-card:hover{ transform: translateY(-4px); border-color: #3a3a40; }

.yt-frame{
  position: relative;
  width:100%;
  aspect-ratio: 16/9;
  background:#000;
  overflow:hidden;
  cursor: pointer;
}
.yt-frame img{
  width:100%; height:100%; object-fit:cover;
  opacity: .82;
  transition: opacity .35s, transform .5s var(--ease);
}
.yt-card:hover .yt-frame img{ opacity: .55; transform: scale(1.03); }
.yt-frame::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
.yt-play{
  position:absolute; top:50%; left:50%;
  transform: translate(-50%,-50%);
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(15,15,17,.55);
  border: 1.5px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center;
  z-index:2;
  transition: background .3s, transform .3s var(--ease), border-color .3s;
}
.yt-card:hover .yt-play{
  background: rgba(94,196,221,.9);
  border-color: rgba(94,196,221,.9);
  transform: translate(-50%,-50%) scale(1.08);
}
.yt-play svg{ width:22px; height:22px; margin-left:3px; }

.watch-cta{
  text-align:center;
  padding: 20px 0 100px;
}
.watch-cta p{ color: var(--fg-dim); font-size: 14px; margin-bottom: 22px; }

/* fade-up reveal (JS toggles .in) */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform: translateY(0); }

/* ---------------- cookie consent (paleta propia de Repion, azul de marca) ---------------- */
#cc-main{
  --cc-font-family: 'Europa Grotesk SH', sans-serif;
  --cc-bg: #ffffff;
  --cc-primary-color: #111110;
  --cc-secondary-color: #5a5a58;
  --cc-modal-border-radius: 1rem;
  --cc-btn-border-radius: 999px;
  --cc-link-color: #3fabc7;
  --cc-btn-primary-bg: #5ec4dd;
  --cc-btn-primary-color: #0a0a0c;
  --cc-btn-primary-border-color: #5ec4dd;
  --cc-btn-primary-hover-bg: #3fabc7;
  --cc-btn-primary-hover-color: #0a0a0c;
  --cc-btn-primary-hover-border-color: #3fabc7;
  --cc-btn-secondary-bg: #ffffff;
  --cc-btn-secondary-color: #111110;
  --cc-btn-secondary-border-color: #111110;
  --cc-btn-secondary-hover-bg: #f2f2f0;
  --cc-btn-secondary-hover-border-color: #111110;
  --cc-toggle-on-bg: #5ec4dd;
  --cc-separator-border-color: #e7e5e0;
  --cc-cookie-category-block-bg: #f5f4f0;
  --cc-cookie-category-block-border: #e7e5e0;
}