/* ============================================================================
   STYLES.CSS — TODO EL DISEÑO VIVE ACÁ.
   Este archivo es el que edita el diseñador/programador. Ni el cliente ni
   el artista necesitan (ni deberían) tocar esto. Textos y fotos van en
   config.js; acá va color, tipografía, fondo y espaciado.
   ============================================================================ */

/* ==========================================================================
   1. TOKENS GLOBALES — cambiá acá la identidad visual completa
   ========================================================================== */
:root{
  /* ---- Paleta base (fallback general) ---- */
  --color-bg:        #0f0e0c;   /* negro cálido, fondo general */
  --color-bg-alt:    #17140f;   /* variante un poco más clara */
  --color-surface:   #1d1a15;   /* tarjetas / superficies elevadas */
  --color-text:      #f3ede1;   /* texto principal, blanco cálido */
  --color-text-dim:  #ff0000;   /* texto secundario */
  --color-line:      #3a352c;   /* líneas divisorias */
  --color-accent:    #ff0000;   /* ACENTO PRINCIPAL — dorado escenario */
  --color-accent-2:  #ff5a3c;   /* acento secundario — usar con moderación */

  /* ---- Tipografías (roles) ---- */
  --font-display: 'Anton', sans-serif;      /* títulos grandes, tipo cartel */
  --font-body:    'Manrope', sans-serif;    /* texto de lectura */
  --font-mono:    'Space Mono', monospace;  /* datos, specs, etiquetas */

  /* ---- Radios / espaciado base ---- */
  --radius: 2px;
  --section-pad: clamp(56px, 8vw, 120px);
  --container: 1180px;
}

/* ---- HERO (foto sin fondo, centrada tipo póster) ---- */
:root{
  --hero-bg: radial-gradient(ellipse 70% 60% at 50% 30%, #b80404 0%, var(--color-bg) 85%);
  --hero-text: var(--color-text);
  --hero-accent: var(--color-accent);
  --hero-glow: radial-gradient(circle, rgba(255, 13, 0, 0.2) 0%, rgba(255,176,32,0) 70%);
  --hero-font-name: var(--font-display);
  --hero-font-tag: var(--font-mono);
  --hero-photo-max-height: 58vh;
}

/* ---- BIO ---- */
:root{
  --bio-bg: var(--color-bg-alt);
  --bio-text: var(--color-text);
  --bio-text-dim: var(--color-text-dim);
  --bio-accent: var(--color-accent);
  --bio-font-title: var(--font-display);
  --bio-font-body: var(--font-body);
}

/* ---- SHOW INFO (ficha técnica) ---- */
:root{
  --show-bg: var(--color-bg);
  --show-text: var(--color-text);
  --show-dim: var(--color-text-dim);
  --show-accent: var(--color-accent);
  --show-line: var(--color-line);
  --show-font-title: var(--font-display);
  --show-font-mono: var(--font-mono);
}

/* ---- VIDEO ---- */
:root{
  --video-bg: #000000;
  --video-text: var(--color-text);
  --video-accent: var(--color-accent);
  --video-font-title: var(--font-display);
}

/* ---- HITS / ÉXITOS ---- */
:root{
  --hits-bg: var(--color-bg-alt);
  --hits-card-bg: var(--color-surface);
  --hits-text: var(--color-text);
  --hits-dim: var(--color-text-dim);
  --hits-accent: var(--color-accent);
  --hits-font-title: var(--font-display);
  --hits-font-body: var(--font-body);
  --hits-font-stat: var(--font-mono);
}

/* ---- REDES SOCIALES ---- */
:root{
  --social-bg: var(--color-bg);
  --social-text: var(--color-text);
  --social-accent: var(--color-accent);
  --social-icon-bg: var(--color-surface);
  --social-font: var(--font-mono);
}

/* ---- BOOKING / WHATSAPP ---- */
:root{
  --booking-bg: var(--color-bg-alt);
  --booking-text: var(--color-text);
  --booking-dim: var(--color-text-dim);
  --booking-font-title: var(--font-display);
  --whatsapp-color: #25D366; /* color oficial del botón, editable si querés otro */
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  opacity:0.65;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:22px;
  height:1px;
  background:currentColor;
  opacity:0.6;
}
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   3. TOP BAR
   ========================================================================== */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:0.08em;
  background:linear-gradient(180deg, rgba(15,14,12,0.85), rgba(15,14,12,0));
  pointer-events:none;
}
.topbar > *{ pointer-events:auto; }
.topbar .tb-name{ text-transform:uppercase; opacity:0.9; }
.topbar .tb-cta{
  border:1px solid rgba(243,237,225,0.35);
  padding:8px 16px;
  border-radius:var(--radius);
  transition:border-color .25s, color .25s, background .25s;
}
.topbar .tb-cta:hover{ border-color:var(--color-accent); color:var(--color-accent); }

/* ==========================================================================
   4. HERO — foto recortada (PNG sin fondo) centrada, tipo póster
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--hero-bg);
  color:var(--hero-text);
  overflow:hidden;
  padding:120px 24px 60px;
  text-align:center;
}
.hero-glow{
  position:absolute;
  top:8%;
  left:50%;
  transform:translateX(-50%);
  width:min(70vw, 900px);
  height:min(70vw, 900px);
  background:var(--hero-glow);
  pointer-events:none;
}
.hero-content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:760px;
}
.hero-kicker{
  font-family:var(--hero-font-tag);
  font-size:13px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--hero-accent);
  margin-bottom:16px;
}
.hero-name{
  font-family:var(--hero-font-name);
  font-weight:400;
  font-size:clamp(42px, 9vw, 104px);
  line-height:0.94;
  letter-spacing:0.01em;
  text-transform:uppercase;
  margin:0 0 8px;
}
.hero-photo-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  margin:6px 0 18px;
}
.hero-photo-img{
  max-height:var(--hero-photo-max-height);
  width:auto;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,0.55));
}
.hero-tagline{
  font-size:clamp(15px,2vw,19px);
  color:var(--hero-text);
  opacity:0.85;
  max-width:480px;
  line-height:1.5;
  margin:0 0 34px;
}
.hero-scroll{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:2;
  font-family:var(--hero-font-tag);
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  opacity:0.5;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.hero-scroll::after{ content:""; width:1px; height:30px; background:currentColor; }

/* --- Laminado / credencial "All Access" — datos clave tipo press kit --- */
.laminate{
  position:relative;
  z-index:2;
  background:var(--color-surface);
  border:1px solid rgba(243,237,225,0.12);
  border-radius:6px;
  padding:22px 26px 20px;
  width:100%;
  max-width:440px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
  text-align:left;
}
.laminate::before{
  content:"";
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  width:22px; height:22px;
  background:var(--color-bg);
  border:1px solid rgba(243,237,225,0.2);
  border-radius:50%;
}
.laminate-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--hero-accent);
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px dashed rgba(243,237,225,0.18);
}
.laminate-facts{ display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; }
.laminate-fact dt{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--color-text-dim);
  margin-bottom:3px;
}
.laminate-fact dd{
  margin:0;
  font-family:var(--font-body);
  font-weight:700;
  font-size:14.5px;
  color:var(--color-text);
}

/* ==========================================================================
   5. BIO + CARRUSEL
   ========================================================================== */
.bio{
  background:var(--bio-bg);
  color:var(--bio-text);
  padding:var(--section-pad) 0;
}
.bio-grid{
  display:grid;
  grid-template-columns:0.95fr 1.05fr;
  gap:64px;
  align-items:center;
}
.bio-title{
  font-family:var(--bio-font-title);
  font-weight:400;
  font-size:clamp(32px,4.5vw,52px);
  text-transform:uppercase;
  line-height:1;
  margin:0 0 22px;
}
.bio-text{
  font-family:var(--bio-font-body);
  font-size:16.5px;
  line-height:1.75;
  color:var(--bio-text-dim);
  max-width:52ch;
}
.bio-text p + p{ margin-top:1em; }

.carousel{ position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:var(--radius); background:#000; }
.carousel-track{ display:flex; height:100%; transition:transform .6s cubic-bezier(.65,0,.35,1); }
.carousel-track img{ min-width:100%; height:100%; object-fit:cover; }
.carousel-nav{
  position:absolute; bottom:16px; left:0; right:0;
  display:flex; justify-content:center; gap:8px;
}
.carousel-dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(243,237,225,0.35);
  border:none; cursor:pointer; padding:0;
  transition:background .25s, transform .25s;
}
.carousel-dot.active{ background:var(--bio-accent); transform:scale(1.2); }
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%;
  background:rgba(15,14,12,0.55);
  border:1px solid rgba(243,237,225,0.25);
  color:#f3ede1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:16px;
  transition:background .25s, border-color .25s;
}
.carousel-arrow:hover{ border-color:var(--bio-accent); }
.carousel-arrow.prev{ left:14px; }
.carousel-arrow.next{ right:14px; }

/* ==========================================================================
   6. SHOW INFO (ficha técnica de shows)
   ========================================================================== */
.show{
  background:var(--show-bg);
  color:var(--show-text);
  padding:var(--section-pad) 0;
  border-top:1px solid var(--show-line);
  border-bottom:1px solid var(--show-line);
}
.show-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:44px; }
.show-title{
  font-family:var(--show-font-title);
  font-weight:400;
  font-size:clamp(30px,4vw,46px);
  text-transform:uppercase;
  margin:0;
  line-height:1;
}
.show-note{
  font-family:var(--show-font-mono);
  font-size:12.5px;
  color:var(--show-dim);
  max-width:280px;
  line-height:1.6;
}
.show-table{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); border-top:1px solid var(--show-line); }
.show-row{
  padding:22px 20px 22px 0;
  border-bottom:1px solid var(--show-line);
  border-right:1px solid var(--show-line);
}
.show-row:nth-child(4n){ border-right:none; }
.show-label{
  font-family:var(--show-font-mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--show-accent);
  margin-bottom:8px;
}
.show-value{ font-size:16px; font-weight:600; line-height:1.4; }

/* ==========================================================================
   7. VIDEO EXPERIENCIA
   ========================================================================== */
.video-section{
  background:var(--video-bg);
  color:var(--video-text);
  padding:var(--section-pad) 0;
}
.video-head{ margin-bottom:36px; }
.video-title{
  font-family:var(--video-font-title);
  font-weight:400;
  font-size:clamp(30px,4vw,46px);
  text-transform:uppercase;
  margin:0;
  line-height:1;
}
.video-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#111;
  overflow:hidden;
  border-radius:var(--radius);
}
.video-frame iframe, .video-frame video{
  position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover;
}

/* ==========================================================================
   8. HITS / ÉXITOS
   ========================================================================== */
.hits{ background:var(--hits-bg); color:var(--hits-text); padding:var(--section-pad) 0; }
.hits-head{ margin-bottom:40px; }
.hits-title{
  font-family:var(--hits-font-title);
  font-weight:400;
  font-size:clamp(30px,4vw,46px);
  text-transform:uppercase;
  margin:0;
  line-height:1;
}
.hits-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:26px; }
.hit-card{
  background:var(--hits-card-bg);
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(243,237,225,0.08);
  transition:transform .35s ease, box-shadow .35s ease;
}
.hit-card:hover{ transform:translateY(-6px); box-shadow:0 24px 40px -20px rgba(0,0,0,0.55); }
.hit-cover{ position:relative; aspect-ratio:1/1; overflow:hidden; }
.hit-cover img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.hit-card:hover .hit-cover img{ transform:scale(1.06); }
.hit-body{ padding:18px 18px 20px; }
.hit-title{ font-family:var(--hits-font-body); font-weight:800; font-size:16.5px; margin:0 0 8px; }
.hit-stat{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--hits-font-stat);
  font-size:12px;
  color:var(--hits-accent);
  letter-spacing:0.02em;
}
.hit-stat::before{ content:"▲"; font-size:9px; }
.hit-desc{ font-size:13.5px; color:var(--hits-dim); margin-top:8px; line-height:1.5; }

/* ==========================================================================
   9. REDES SOCIALES (con iconos)
   ========================================================================== */
.social{ background:var(--social-bg); color:var(--social-text); padding:calc(var(--section-pad) * 0.7) 0; }
.social-row{
  display:flex; flex-wrap:wrap; gap:16px;
}
.social-link{
  flex:1 1 220px;
  display:flex; align-items:center; gap:16px;
  padding:20px 22px;
  background:var(--social-icon-bg);
  border:1px solid rgba(243,237,225,0.08);
  border-radius:8px;
  transition:transform .25s, border-color .25s, background .25s;
}
.social-link:hover{ transform:translateY(-4px); border-color:var(--social-accent); }
.social-icon{
  width:42px; height:42px; flex:none;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(243,237,225,0.06);
  color:var(--social-accent);
}
.social-icon svg{ width:21px; height:21px; }
.social-meta{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.social-meta .s-name{
  font-family:var(--social-font);
  font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
}
.social-meta .s-handle{ font-size:13.5px; opacity:0.65; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ==========================================================================
   10. BOOKING / WHATSAPP
   ========================================================================== */
.booking{ background:var(--booking-bg); color:var(--booking-text); padding:var(--section-pad) 0; }
.booking-cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px;
  padding:40px;
  background:var(--color-surface);
  border-radius:8px;
  border:1px solid rgba(243,237,225,0.08);
}
.booking-cta-text h3{ margin:0 0 8px; font-family:var(--booking-font-title); font-weight:400; font-size:30px; text-transform:uppercase; }
.booking-cta-text p{ margin:0; color:var(--booking-dim); font-size:14.5px; max-width:48ch; line-height:1.6; }
.wa-button{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--whatsapp-color);
  color:#08210f;
  font-weight:800;
  font-size:15px;
  padding:16px 28px;
  border-radius:30px;
  white-space:nowrap;
  transition:filter .2s, transform .2s;
}
.wa-button:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.wa-button svg{ width:20px; height:20px; }

/* WhatsApp flotante, siempre visible */
.wa-float{
  position:fixed; bottom:22px; right:22px; z-index:60;
  width:58px; height:58px; border-radius:50%;
  background:var(--whatsapp-color);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,0.4);
  transition:transform .2s;
}
.wa-float:hover{ transform:scale(1.07); }
.wa-float svg{ width:29px; height:29px; }

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.footer{
  padding:26px 0 90px;
  background:var(--color-bg);
  border-top:1px solid var(--color-line);
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--color-text-dim);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  letter-spacing:0.04em;
  padding-left:24px; padding-right:24px;
}

/* ==========================================================================
   12. RESPONSIVE — se adapta a celulares y PCs
   ========================================================================== */
@media (max-width:860px){
  .bio-grid{ grid-template-columns:1fr; gap:36px; }
  .show-row:nth-child(4n){ border-right:1px solid var(--show-line); }
  .show-row:nth-child(2n){ border-right:none; }
  .booking-cta{ flex-direction:column; align-items:stretch; text-align:center; }
  .booking-cta-text{ text-align:center; }
  .booking-cta-text p{ margin-left:auto; margin-right:auto; }
  .wa-button{ justify-content:center; }
}
@media (max-width:520px){
  .hero{ padding:110px 18px 50px; }
  :root{ --hero-photo-max-height: 42vh; }
  .hits-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .laminate-facts{ grid-template-columns:1fr 1fr; }
  .laminate{ padding:18px 18px 16px; }
  .social-link{ flex:1 1 100%; }
}