/* ============================================================================
   STYLES.CSS — TODO EL DISEÑO VIVE ACÁ.
   Absolutamente todo (color, gradiente, tipografía, tamaño, espaciado) es
   una variable CSS. Los textos y fotos van en config.js — esto es solo
   apariencia.
   ============================================================================ */

/* ==========================================================================
   1. TOKENS GLOBALES
   ========================================================================== */
:root{
  /* ---- Paleta base: blanco / negro / rojo, con gradientes ---- */
  --color-black:      #0a0a0a;
  --color-black-2:    #131313;
  --color-surface:    #1b1b1b;
  --color-white:      #f5f5f4;
  --color-white-dim:  #a9a8a5;
  --color-red:        #e6231e;   /* ACENTO PRINCIPAL */
  --color-red-dark:   #6e0d0d;   /* rojo oscuro, para gradientes */
  --color-line:       #2b2b2b;

  /* ---- Gradiente reutilizable — cambiá ángulo y colores acá ---- */
  --gradient-angle: 135deg;
  --gradient-main: linear-gradient(var(--gradient-angle), var(--color-red) 0%, var(--color-red-dark) 55%, var(--color-black) 100%);
  --gradient-text: linear-gradient(90deg, var(--color-white) 0%, var(--color-red) 100%);

  /* ---- Tipografías (roles) ---- */
  --font-display: 'Anton', sans-serif;          /* títulos grandes */
  --font-body:    'Inter', sans-serif;          /* texto de lectura */
  --font-mono:    'JetBrains Mono', monospace;  /* etiquetas, precios, tags */

  /* ---- Escala de espaciado — usada en TODAS las secciones ---- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;

  --radius-sm:4px; --radius-md:12px; --radius-lg:22px;
  --container:1220px;
  --section-pad: clamp(64px, 9vw, 130px);
  --shadow-soft: 0 25px 60px -25px rgba(0,0,0,0.7);

  /* ---- Velocidades de animación — bajalas si preferís algo más sobrio ---- */
  --speed-fast: 0.25s;
  --speed-med: 0.5s;
  --speed-slow: 0.9s;
}

/* ---- PROMO BAR (ticker fijo arriba de todo) ---- */
:root{
  --promo-height: 40px;
  --promo-bg: linear-gradient(90deg, var(--color-red), var(--color-red-dark), var(--color-red));
  --promo-text: var(--color-white);
  --promo-font: var(--font-mono);
  --promo-font-size: 12.5px;
  --promo-gap: 60px;
  --promo-speed: 18s;
}

/* ---- TOP BAR ---- */
:root{
  --topbar-height: 56px;
  --topbar-bg: rgba(10,10,10,0.75);
  --topbar-text: var(--color-white);
  --topbar-accent: var(--color-red);
  --topbar-font: var(--font-mono);
}

/* ---- HERO ---- */
:root{
  --hero-bg: var(--color-black);
  --hero-gradient: radial-gradient(ellipse 80% 65% at 50% 20%, rgba(230,35,30,0.25) 0%, rgba(10,10,10,0) 60%);
  --hero-text: var(--color-white);
  --hero-accent: var(--color-red);
  --hero-font-title: var(--font-display);
  --hero-title-size: clamp(46px, 9vw, 108px);
  --hero-tagline-size: clamp(15px, 2vw, 19px);
  --hero-pad-top: 170px;
  --hero-pad-bottom: 90px;
  --hero-waveform-color: rgba(230,35,30,0.5);

  /* ---- Logo del hero ---- */
  --hero-logo-max-width: 300px;
  --hero-logo-glow-color: rgba(230,35,30,0.45);
  --hero-logo-intro-duration: 1.1s;
  --hero-logo-float-duration: 5s;
  --hero-logo-glow-duration: 3.2s;
}

/* ---- LOGROS ---- */
:root{
  --ach-bg: var(--color-black-2);
  --ach-text: var(--color-white);
  --ach-dim: var(--color-white-dim);
  --ach-accent: var(--color-red);
  --ach-card-bg: var(--color-surface);
  --ach-font-title: var(--font-display);
  --ach-title-size: clamp(30px, 4vw, 46px);
  --ach-stat-size: clamp(34px, 5vw, 58px);
  --ach-gap: var(--space-6);
}

/* ---- BEATS EN OFERTA ---- */
:root{
  --beats-bg: var(--color-black-2);
  --beats-text: var(--color-white);
  --beats-dim: var(--color-white-dim);
  --beats-accent: var(--color-red);
  --beats-card-bg: var(--color-surface);
  --beats-font-title: var(--font-display);
  --beats-title-size: clamp(30px, 4vw, 46px);
  --beats-gap: var(--space-6);
}

/* ---- SERVICIOS ---- */
:root{
  --serv-bg: var(--color-black);
  --serv-text: var(--color-white);
  --serv-dim: var(--color-white-dim);
  --serv-accent: var(--color-red);
  --serv-card-bg: var(--color-surface);
  --serv-card-bg-hover: #241414;
  --serv-font-title: var(--font-display);
  --serv-title-size: clamp(30px, 4vw, 46px);
  --serv-price-font: var(--font-mono);
  --serv-gap: var(--space-6);
}

/* ---- GALERÍA DEL ESTUDIO ---- */
:root{
  --gal-bg: var(--color-black-2);
  --gal-text: var(--color-white);
  --gal-accent: var(--color-red);
  --gal-font-title: var(--font-display);
  --gal-title-size: clamp(30px, 4vw, 46px);
  --gal-slide-height: 62vh;
}

/* ---- VIDEOS ---- */
:root{
  --vid-bg: var(--color-black);
  --vid-text: var(--color-white);
  --vid-accent: var(--color-red);
  --vid-font-title: var(--font-display);
  --vid-title-size: clamp(30px, 4vw, 46px);
  --vid-gap: var(--space-6);
}

/* ---- REDES SOCIALES ---- */
:root{
  --soc-bg: var(--color-black-2);
  --soc-text: var(--color-white);
  --soc-accent: var(--color-red);
  --soc-icon-bg: var(--color-surface);
  --soc-font: var(--font-mono);
}

/* ---- BOOKING / WHATSAPP ---- */
:root{
  --book-bg: var(--color-black);
  --book-card-bg: var(--color-surface);
  --book-text: var(--color-white);
  --book-dim: var(--color-white-dim);
  --book-font-title: var(--font-display);
  --whatsapp-color: #25D366;
}

/* ==========================================================================
   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-black);
  color:var(--color-white);
  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.7;
  display:flex; align-items:center; gap:10px;
  margin-bottom:var(--space-4);
}
.eyebrow::before{ content:""; width:22px; height:1px; background:currentColor; opacity:0.6; }
.section-title{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  line-height:1;
  margin:0 0 var(--space-5);
}
.section-note{ color:var(--color-white-dim); max-width:56ch; font-size:15px; line-height:1.6; margin:0 0 var(--space-7); }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity var(--speed-slow) ease, transform var(--speed-slow) ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* Botones reutilizables */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 28px;
  border-radius:30px;
  font-weight:700;
  font-size:14.5px;
  letter-spacing:0.02em;
  transition:transform var(--speed-fast), box-shadow var(--speed-fast), filter var(--speed-fast);
}
.btn-primary{ background:var(--gradient-main); color:var(--color-white); box-shadow:0 10px 30px -8px rgba(230,35,30,0.55); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -8px rgba(230,35,30,0.7); }
.btn-ghost{ border:1.5px solid rgba(245,245,244,0.35); color:var(--color-white); }
.btn-ghost:hover{ border-color:var(--color-red); color:var(--color-red); transform:translateY(-2px); }

/* ==========================================================================
   3. PROMO BAR (ticker fijo, tipo "promo relámpago")
   ========================================================================== */
.promo-bar{
  position:fixed; top:0; left:0; right:0; z-index:70;
  height:var(--promo-height);
  background:var(--promo-bg);
  background-size:200% 100%;
  animation:promoShift 6s linear infinite;
  overflow:hidden;
  display:flex;
  align-items:center;
}
@keyframes promoShift{ 0%{ background-position:0% 0; } 100%{ background-position:200% 0; } }
.promo-track{
  display:flex;
  white-space:nowrap;
  gap:var(--promo-gap);
  animation:promoScroll var(--promo-speed) linear infinite;
  padding-left:var(--promo-gap);
}
.promo-track span{
  font-family:var(--promo-font);
  font-size:var(--promo-font-size);
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--promo-text);
  font-weight:700;
}
@keyframes promoScroll{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }

/* ==========================================================================
   4. TOP BAR
   ========================================================================== */
.topbar{
  position:fixed; top:var(--promo-height); left:0; right:0; z-index:60;
  height:var(--topbar-height);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 26px;
  font-family:var(--topbar-font);
  font-size:13px;
  letter-spacing:0.08em;
  background:var(--topbar-bg);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.topbar .tb-name{ text-transform:uppercase; font-weight:700; color:var(--topbar-text); }
.topbar .tb-cta{
  border:1px solid rgba(245,245,244,0.3);
  padding:8px 16px;
  border-radius:20px;
  color:var(--topbar-text);
  transition:border-color var(--speed-fast), color var(--speed-fast);
}
.topbar .tb-cta:hover{ border-color:var(--topbar-accent); color:var(--topbar-accent); }

/* ==========================================================================
   5. HERO — con gradiente animado y waveform decorativo
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  background:var(--hero-bg);
  color:var(--hero-text);
  overflow:hidden;
  text-align:center;
  padding:var(--hero-pad-top) 24px var(--hero-pad-bottom);
}
.hero-bg{
  position:absolute; inset:0;
  background:var(--hero-gradient);
  animation:heroPulse 8s ease-in-out infinite alternate;
}
@keyframes heroPulse{
  0%{ opacity:0.7; transform:scale(1); }
  100%{ opacity:1; transform:scale(1.08); }
}
.hero-content{ position:relative; z-index:2; max-width:780px; display:flex; flex-direction:column; align-items:center; }
.hero-kicker{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--hero-accent);
  margin-bottom:var(--space-4);
}
.hero-title{
  font-family:var(--hero-font-title);
  font-weight:400;
  font-size:var(--hero-title-size);
  line-height:0.94;
  text-transform:uppercase;
  margin:0 0 var(--space-4);
}
.hero-tagline{
  font-size:var(--hero-tagline-size);
  color:var(--color-white-dim);
  max-width:520px;
  line-height:1.6;
  margin:0 0 var(--space-7);
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:center; }

/* Logo del hero: grande, centrado, con glow pulsante + entrada + flotación */
.hero-logo-wrap{
  position:relative;
  width:100%;
  display:flex;
  justify-content:center;
  margin-bottom:var(--space-5);
}
.hero-logo-glow{
  position:absolute;
  top:50%; left:50%;
  width:var(--hero-logo-max-width);
  height:var(--hero-logo-max-width);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, var(--hero-logo-glow-color) 0%, rgba(0,0,0,0) 70%);
  animation:logoGlow var(--hero-logo-glow-duration) ease-in-out infinite;
  pointer-events:none;
}
@keyframes logoGlow{
  0%, 100%{ opacity:0.55; transform:translate(-50%,-50%) scale(0.9); }
  50%{ opacity:1; transform:translate(-50%,-50%) scale(1.15); }
}
.hero-logo{
  position:relative;
  z-index:1;
  max-width:var(--hero-logo-max-width);
  width:100%;
  height:auto;
  opacity:0;
  transform:scale(0.75) translateY(14px);
  animation:
    logoIntro var(--hero-logo-intro-duration) cubic-bezier(.2,.9,.3,1.3) forwards,
    logoFloat var(--hero-logo-float-duration) ease-in-out var(--hero-logo-intro-duration) infinite;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,0.5));
}
@keyframes logoIntro{
  0%{ opacity:0; transform:scale(0.75) translateY(14px); }
  100%{ opacity:1; transform:scale(1) translateY(0); }
}
@keyframes logoFloat{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
.hero-logo:not([src]), .hero-logo[src=""]{ display:none; }
.hero-logo-wrap:has(.hero-logo[src=""]){ display:none; }

/* Waveform decorativo, tipo pista de audio */
.hero-waveform{
  position:absolute; bottom:0; left:0; right:0; z-index:1;
  height:70px;
  display:flex; align-items:flex-end; justify-content:center;
  gap:4px;
  opacity:0.7;
  padding-bottom:8px;
}
.hero-waveform span{
  display:block;
  width:4px;
  background:var(--hero-waveform-color);
  border-radius:2px;
  animation:waveBounce 1.6s ease-in-out infinite;
}
@keyframes waveBounce{
  0%, 100%{ transform:scaleY(0.3); }
  50%{ transform:scaleY(1); }
}

/* ==========================================================================
   6. LOGROS — contadores + grid de premios
   ========================================================================== */
.achievements{ background:var(--ach-bg); color:var(--ach-text); padding:var(--section-pad) 0; }
#achievements-title{ font-family:var(--ach-font-title); font-size:var(--ach-title-size); }

.stats-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--ach-gap);
  padding:var(--space-7) 0;
  margin-bottom:var(--space-7);
  border-top:1px solid var(--color-line);
  border-bottom:1px solid var(--color-line);
}
.stat{ text-align:center; }
.stat-number{
  font-family:var(--font-display);
  font-size:var(--ach-stat-size);
  color:var(--ach-accent);
  line-height:1;
  margin-bottom:var(--space-2);
}
.stat-label{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ach-dim);
}

.awards-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--ach-gap); }
.award-card{
  background:var(--ach-card-bg);
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.06);
  transition:transform var(--speed-med), box-shadow var(--speed-med);
}
.award-card:hover{ transform:translateY(-6px) rotate(-0.5deg); box-shadow:var(--shadow-soft); }
.award-photo{ aspect-ratio:4/3; overflow:hidden; }
.award-photo img{ width:100%; height:100%; object-fit:cover; transition:transform var(--speed-slow); }
.award-card:hover .award-photo img{ transform:scale(1.07); }
.award-caption{ padding:16px 18px 20px; font-size:14px; font-weight:600; color:var(--ach-text); }

/* ==========================================================================
   7B. BEATS EN OFERTA
   ========================================================================== */
.beats-offer{ background:var(--beats-bg); color:var(--beats-text); padding:var(--section-pad) 0; }
#beats-title{ font-family:var(--beats-font-title); font-size:var(--beats-title-size); }

.beats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--beats-gap); }
.beat-card{
  background:var(--beats-card-bg);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-lg);
  padding:var(--space-6);
  position:relative;
  overflow:hidden;
  display:flex; flex-direction:column; gap:var(--space-4);
}
.beat-ribbon{
  position:absolute; top:18px; right:-34px;
  background:var(--beats-accent);
  color:#fff;
  font-family:var(--font-mono);
  font-size:11px; font-weight:700;
  letter-spacing:0.05em;
  padding:5px 40px;
  transform:rotate(35deg);
  box-shadow:0 4px 12px rgba(0,0,0,0.4);
}
.beat-name{ font-family:var(--font-display); font-size:20px; text-transform:uppercase; margin:0; padding-right:40px; }
.beat-prices{ display:flex; align-items:baseline; gap:10px; }
.beat-price-old{ font-family:var(--font-mono); font-size:14px; color:var(--beats-dim); text-decoration:line-through; }
.beat-price-new{ font-family:var(--font-mono); font-size:22px; font-weight:700; color:var(--beats-accent); }
.beat-timer{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.05em;
  color:var(--beats-dim);
  background:rgba(255,255,255,0.04);
  border:1px dashed rgba(255,255,255,0.15);
  border-radius:8px;
  padding:8px 12px;
}
.beat-timer.expired{ color:#6b6b68; border-color:rgba(255,255,255,0.08); }
.beat-timer strong{ color:var(--beats-accent); }
.beat-timer.expired strong{ color:#6b6b68; }
.beat-audio{ width:100%; height:40px; }
.beat-buy{
  margin-top:auto;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px;
  border-radius:24px;
  background:var(--whatsapp-color);
  color:#08210f;
  font-weight:700;
  font-size:13.5px;
  transition:filter var(--speed-fast), transform var(--speed-fast);
}
.beat-buy:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.beat-buy.disabled{
  background:#333; color:#888; pointer-events:none;
}
.beats-empty-note{ color:var(--beats-dim); font-size:14px; }

/* ==========================================================================
   8. SERVICIOS — cards con precio y CTA a WhatsApp
   ========================================================================== */
.services{ background:var(--serv-bg); color:var(--serv-text); padding:var(--section-pad) 0; }
#services-title{ font-family:var(--serv-font-title); font-size:var(--serv-title-size); }

.services-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:var(--serv-gap); }
.service-card{
  background:var(--serv-card-bg);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:var(--radius-lg);
  padding:var(--space-6);
  display:flex; flex-direction:column;
  transition:transform var(--speed-med), background var(--speed-med), border-color var(--speed-med);
  position:relative;
  overflow:hidden;
}
.service-card::before{
  content:"";
  position:absolute; inset:0;
  background:var(--gradient-main);
  opacity:0;
  transition:opacity var(--speed-med);
  z-index:0;
}
.service-card:hover{ transform:translateY(-8px); border-color:transparent; }
.service-card:hover::before{ opacity:0.12; }
.service-card > *{ position:relative; z-index:1; }
.service-card.featured{ border-color:var(--serv-accent); }
.service-badge{
  align-self:flex-start;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#0a0a0a;
  background:var(--serv-accent);
  padding:4px 10px;
  border-radius:20px;
  margin-bottom:var(--space-4);
}
.service-name{ font-family:var(--font-display); font-size:22px; text-transform:uppercase; margin:0 0 var(--space-2); }
.service-desc{ font-size:14px; color:var(--serv-dim); line-height:1.6; margin-bottom:var(--space-4); }
.service-features{ list-style:none; padding:0; margin:0 0 var(--space-5); display:flex; flex-direction:column; gap:8px; }
.service-features li{ font-size:13.5px; color:var(--serv-text); display:flex; gap:8px; align-items:flex-start; }
.service-features li::before{ content:"✓"; color:var(--serv-accent); font-weight:700; }
.service-price{
  font-family:var(--serv-price-font);
  font-size:22px;
  font-weight:700;
  color:var(--serv-accent);
  margin-bottom:var(--space-4);
}
.service-price span{ font-size:12px; color:var(--serv-dim); font-weight:400; }
.service-cta{
  margin-top:auto;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px;
  border-radius:24px;
  background:var(--whatsapp-color);
  color:#08210f;
  font-weight:700;
  font-size:13.5px;
  transition:filter var(--speed-fast), transform var(--speed-fast);
}
.service-cta:hover{ filter:brightness(1.08); transform:translateY(-1px); }

/* ==========================================================================
   8. GALERÍA DEL ESTUDIO — carrusel ancho
   ========================================================================== */
.gallery{ background:var(--gal-bg); color:var(--gal-text); padding:var(--section-pad) 0; }
#gallery-title{ font-family:var(--gal-font-title); font-size:var(--gal-title-size); }
.gallery-carousel{ position:relative; width:100%; height:var(--gal-slide-height); overflow:hidden; }
.gallery-track{ display:flex; height:100%; transition:transform .7s cubic-bezier(.65,0,.35,1); }
.gallery-track img{ min-width:100%; height:100%; object-fit:cover; }
.gallery-carousel .carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  background:rgba(10,10,10,0.55);
  border:1px solid rgba(245,245,244,0.25);
  color:var(--color-white);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:18px; z-index:2;
  transition:border-color var(--speed-fast);
}
.gallery-carousel .carousel-arrow:hover{ border-color:var(--gal-accent); }
.gallery-carousel .prev{ left:20px; }
.gallery-carousel .next{ right:20px; }
.gallery-carousel .carousel-nav{ position:absolute; bottom:18px; left:0; right:0; display:flex; justify-content:center; gap:8px; z-index:2; }
.gallery-carousel .carousel-dot{
  width:9px; height:9px; border-radius:50%;
  background:rgba(245,245,244,0.35); border:none; cursor:pointer; padding:0;
  transition:background var(--speed-fast), transform var(--speed-fast);
}
.gallery-carousel .carousel-dot.active{ background:var(--gal-accent); transform:scale(1.2); }

/* ==========================================================================
   9. VIDEOS / PRODUCCIONES — grid
   ========================================================================== */
.videos{ background:var(--vid-bg); color:var(--vid-text); padding:var(--section-pad) 0; }
#videos-title{ font-family:var(--vid-font-title); font-size:var(--vid-title-size); }
.videos-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--vid-gap); }
.video-card{ border-radius:var(--radius-md); overflow:hidden; background:#000; }
.video-frame{ position:relative; width:100%; aspect-ratio:16/9; }
.video-frame iframe, .video-frame video{ position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; }
.video-caption{ padding:14px 4px 0; font-size:13.5px; color:var(--color-white-dim); }

/* ==========================================================================
   10. REDES SOCIALES
   ========================================================================== */
.social{ background:var(--soc-bg); color:var(--soc-text); padding:calc(var(--section-pad) * 0.65) 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(--soc-icon-bg);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:var(--radius-md);
  transition:transform var(--speed-fast), border-color var(--speed-fast);
}
.social-link:hover{ transform:translateY(-4px); border-color:var(--soc-accent); }
.social-icon{
  width:42px; height:42px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.06);
  color:var(--soc-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(--soc-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; }

/* ==========================================================================
   11. BOOKING / WHATSAPP
   ========================================================================== */
.booking{ background:var(--book-bg); color:var(--book-text); padding:var(--section-pad) 0; }
.booking-cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px;
  padding:var(--space-7);
  background:var(--book-card-bg);
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,0.07);
  position:relative;
  overflow:hidden;
}
.booking-cta::before{
  content:""; position:absolute; inset:0;
  background:var(--gradient-main); opacity:0.08;
}
.booking-cta > *{ position:relative; z-index:1; }
.booking-cta-text h3{ margin:0 0 8px; font-family:var(--book-font-title); font-weight:400; font-size:30px; text-transform:uppercase; }
.booking-cta-text p{ margin:0; color:var(--book-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 var(--speed-fast), transform var(--speed-fast);
}
.wa-button:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.wa-button svg{ width:20px; height:20px; }

.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.5);
  transition:transform var(--speed-fast);
  animation:waPulse 2.4s ease-in-out infinite;
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:29px; height:29px; }
@keyframes waPulse{
  0%, 100%{ box-shadow:0 10px 26px rgba(0,0,0,0.5), 0 0 0 0 rgba(37,211,102,0.4); }
  50%{ box-shadow:0 10px 26px rgba(0,0,0,0.5), 0 0 0 10px rgba(37,211,102,0); }
}

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

/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */
@media (max-width:860px){
  .stats-row{ grid-template-columns:repeat(2,1fr); }
  .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){
  :root{ --hero-pad-top:150px; --gal-slide-height:46vh; --hero-logo-max-width:190px; }
  .stats-row{ grid-template-columns:repeat(2,1fr); }
  .awards-grid, .services-grid, .videos-grid{ grid-template-columns:1fr; }
  .social-link{ flex:1 1 100%; }
  .hero-waveform{ height:46px; }
}