/* ============================================================
   HERNIX STUDIOS — styles.css
   Premium dark theme. Charcoal/black base with subtle gradients,
   gold as the single accent, light panels for contrast breaks.
   ============================================================ */

:root{
  /* dark base */
  --black: #0a0a0b;
  --dark: #121213;
  --dark-2: #1a1a1c;
  --dark-3: #232326;
  /* light break panels */
  --bg: #f6f6f6;
  --card: #ffffff;
  /* ink */
  --ink: #101a2c;
  --ink-dim: #55596b;
  --ink-faint: #8b8d95;
  /* on dark */
  --on-dark: #f4f2ee;
  --on-dark-dim: rgba(244,242,238,.62);
  --on-dark-faint: rgba(244,242,238,.38);
  /* accent */
  --gold: #c9a227;
  --gold-2: #e6c25c;
  --gold-3: #f0d98b;
  --blue: #1775da;

  --line: rgba(16,26,44,0.12);
  --line-dark: rgba(244,242,238,0.10);
  --radius: 16px;
  --radius-lg: 40px;
  --maxw: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow: 0 20px 45px -22px rgba(0,0,0,.5);
  --shadow-light: 0 20px 45px -22px rgba(16,26,44,.20);

  /* gradients */
  --grad-gold: linear-gradient(135deg, var(--gold-3), var(--gold) 55%, #9d7d18);
  --grad-dark: linear-gradient(180deg, #141416 0%, #0d0d0e 100%);
  --grad-glow: radial-gradient(60% 70% at 50% 0%, rgba(201,162,39,.13), transparent 70%);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--black);
  color:var(--on-dark);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Space Grotesk', 'Inter', sans-serif;
  font-weight:700;
  line-height:1.1;
  margin:0 0 .5em;
  letter-spacing:-0.02em;
  color:var(--on-dark);
}
p{ margin:0 0 1em; color:var(--on-dark-dim); }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
img{ max-width:100%; display:block; }
section{ position:relative; }

.eyebrow{
  font-family:'Space Grotesk', sans-serif;
  font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:.9em;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.9em 2em;
  border-radius:999px;
  font-family:'Space Grotesk', sans-serif;
  font-weight:600; font-size:.92rem;
  border:1px solid transparent; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn__icon{ width:15px; height:15px; transition:transform .25s var(--ease); }
.btn:hover .btn__icon{ transform:translateX(3px); }

/* primary = gold gradient (the booking action) */
.btn--primary{ background:var(--grad-gold); color:#15130c; box-shadow:0 8px 24px -10px rgba(201,162,39,.5); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -10px rgba(201,162,39,.6); }
.btn--primary:disabled{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }

/* secondary on dark */
.btn--ghost{ background:rgba(244,242,238,.06); color:var(--on-dark); border-color:var(--line-dark); }
.btn--ghost:hover{ background:rgba(244,242,238,.12); border-color:rgba(244,242,238,.3); transform:translateY(-2px); }

/* on light panels */
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(16,26,44,.28); }
.btn--outline{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--outline:hover{ border-color:var(--ink); transform:translateY(-2px); }

.btn--sm{ padding:.62em 1.35em; font-size:.85rem; }
.btn--full{ width:100%; }

/* ---------- panels ---------- */
.panel-dark{ background:var(--grad-dark); }
.panel-dark--glow{ background:var(--grad-dark); }
.panel-dark--glow::before{
  content:''; position:absolute; inset:0; background:var(--grad-glow); pointer-events:none;
}
.panel-light{ background:var(--bg); color:var(--ink); position:relative; z-index:1; }
.panel-light h1,.panel-light h2,.panel-light h3,.panel-light h4{ color:var(--ink); }
.panel-light p{ color:var(--ink-dim); }
.panel-light--square{ border-radius:0; }
.panel-light--round-bottom{ border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.panel-light--round-top{ border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.panel-light--round-both{ border-radius:var(--radius-lg); }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:2rem;
  padding:1.2rem clamp(1.25rem,4vw,4.5rem);
  background:rgba(10,10,11,.78);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line-dark);
}
.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand__logo-img{ width:auto; height:52px; object-fit:contain; }

.nav{ display:flex; gap:2.2rem; margin-left:auto; }
.nav a{
  font-size:.88rem; color:var(--on-dark-dim); position:relative; padding:.2em 0;
  transition:color .2s var(--ease);
}
.nav a:hover{ color:var(--on-dark); }
.nav a.is-current{ color:var(--gold); font-weight:600; }
.nav-cta{ flex-shrink:0; margin-left:.4rem; }

.burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; background:none; border:none; cursor:pointer; padding:0; margin-left:auto;
}
.burger span{ display:block; width:100%; height:2px; background:var(--on-dark); border-radius:2px; transition:transform .25s var(--ease), opacity .25s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:6rem clamp(1.25rem,6vw,4rem) 6.5rem;
  background:var(--grad-dark);
  overflow:hidden;
}
.hero::before{ content:''; position:absolute; inset:0; background:var(--grad-glow); pointer-events:none; }
.hero__inner{ max-width:860px; position:relative; z-index:1; }
.hero__title{ font-size:clamp(2.4rem, 5.4vw, 3.8rem); margin-bottom:.55em; }
.hero__sub{ font-size:1rem; max-width:660px; margin:0 auto 2.4rem; color:var(--on-dark-dim); }
.hero__sub strong{ color:var(--on-dark); font-weight:600; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.text-gold{ background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.text-mute-light{ color:var(--on-dark-faint); }

/* hero with photo backdrop */
.hero--photo{ min-height:78vh; justify-content:flex-end; padding-bottom:5rem; }
.hero--photo .hero__bg{ position:absolute; inset:0; z-index:0; }
.hero--photo .hero__bg img{ width:100%; height:100%; object-fit:cover; }
.hero--photo .hero__bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,11,.55) 0%, rgba(10,10,11,.75) 55%, var(--black) 100%);
}

/* full-bleed photo band */
.photo-band{ width:100%; height:clamp(280px,38vw,520px); overflow:hidden; background:var(--black); position:relative; }
.photo-band img{ width:100%; height:100%; object-fit:cover; }
.photo-band::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,11,.35), transparent 30%, transparent 70%, rgba(10,10,11,.5));
  pointer-events:none;
}

/* ---------- sections ---------- */
.section{ padding:5.5rem clamp(1.25rem,6vw,4rem); max-width:calc(var(--maxw) + 8vw); margin:0 auto; position:relative; }
.section__head{ max-width:720px; margin-bottom:3rem; position:relative; z-index:1; }
.section__head--center{ margin-left:auto; margin-right:auto; text-align:center; }
.section__head h2{ font-size:clamp(1.9rem,3.6vw,2.6rem); }
.section__lead{ font-size:.98rem; }
.note{ font-size:.8rem; color:var(--on-dark-faint); font-style:italic; }
.panel-light .note{ color:var(--ink-faint); }

/* ---------- marcas aliadas ---------- */
.brands-strip{
  text-align:center;
  padding-top:4rem; padding-bottom:4rem;
}
.brands-strip__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:3rem clamp(1rem,4vw,3rem);
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
}
.brands-strip__label{
  font-family:'Space Grotesk',sans-serif;
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--on-dark-faint); margin-bottom:2.6rem;
}
.brands-row{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(2rem,5vw,4.5rem); flex-wrap:wrap;
}
/* white silhouettes — sized by optical weight, not raw height */
.brand-logo{
  width:auto; opacity:.58;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.brand-logo:hover{ opacity:1; transform:translateY(-2px); }
.brand-logo--warner{ height:30px; }
.brand-logo--universal{ height:36px; }
.brand-logo--sony{ height:34px; }
.brand-logo--virgin{ height:30px; }
.brand-logo--republic{ height:26px; }
.brand-logo--interscope{ height:40px; }

@media (max-width: 780px){
  .brands-strip__inner{ padding:2.2rem 1rem; }
  .brands-row{ gap:2rem 2.6rem; }
  .brand-logo--warner{ height:22px; }
  .brand-logo--universal{ height:26px; }
  .brand-logo--sony{ height:25px; }
  .brand-logo--virgin{ height:22px; }
  .brand-logo--republic{ height:19px; }
  .brand-logo--interscope{ height:29px; }
}

/* ---------- servicios ---------- */
.servicios{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; position:relative; z-index:1; }
.servicios h2{ font-size:clamp(1.9rem,3.6vw,2.6rem); margin-bottom:1.8rem; }
.servicios__list{ border-left:1px solid var(--line-dark); padding-left:1.4rem; }
.servicios__list li{
  padding:.6rem 0; font-size:1rem; color:var(--on-dark-dim);
  transition:color .2s var(--ease), padding-left .2s var(--ease);
}
.servicios__list li:hover{ color:var(--gold-2); padding-left:.3rem; }
.servicios__logo{ display:flex; align-items:center; justify-content:center; }
.servicios__logo img{ width:min(100%,400px); height:auto; }

/* ============================================================
   STUDIO PICKER — the core booking UX (two clearly separate studios)
   ============================================================ */
.studio-picker{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.8rem;
  max-width:var(--maxw); margin:0 auto; position:relative; z-index:1;
}
.studio{
  position:relative; border-radius:22px; overflow:hidden;
  background:var(--dark-2); border:1px solid var(--line-dark);
  display:flex; flex-direction:column;
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.studio:hover{ transform:translateY(-6px); border-color:rgba(201,162,39,.45); box-shadow:0 30px 60px -30px rgba(0,0,0,.8); }
.studio__media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.studio__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.studio:hover .studio__media img{ transform:scale(1.05); }
.studio__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(18,18,19,.92) 100%);
}
.studio__flag{
  position:absolute; top:1.1rem; left:1.1rem; z-index:2;
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:'Space Grotesk',sans-serif; font-size:.72rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.5em 1em; border-radius:999px;
  background:rgba(10,10,11,.72); backdrop-filter:blur(8px);
  border:1px solid var(--line-dark); color:var(--on-dark);
}
.studio__flag i{ width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0; }
.studio__status{
  position:absolute; top:1.1rem; right:1.1rem; z-index:2;
  font-size:.68rem; font-weight:600; letter-spacing:.06em;
  padding:.45em 1em; border-radius:999px;
}
.studio__status--live{ background:var(--grad-gold); color:#15130c; }
.studio__status--soon{ background:rgba(244,242,238,.14); color:var(--on-dark-dim); border:1px solid var(--line-dark); }
.studio__body{ padding:1.8rem; display:flex; flex-direction:column; flex:1; }
.studio__name{ font-size:1.7rem; margin-bottom:.15em; }
.studio__place{ font-size:.85rem; color:var(--gold); font-family:'Space Grotesk',sans-serif; margin-bottom:1.1rem; display:block; }
.studio__desc{ font-size:.9rem; margin-bottom:1.4rem; }
.studio__rooms{ display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.6rem; }
.studio__room{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85em 1.1em; border-radius:12px;
  background:rgba(244,242,238,.04); border:1px solid var(--line-dark);
}
.studio__room strong{ font-family:'Space Grotesk',sans-serif; font-size:.9rem; color:var(--on-dark); }
.studio__room span{ font-size:.78rem; color:var(--on-dark-faint); text-align:right; }
.studio__room em{ font-style:normal; color:var(--gold-2); font-weight:600; }
.studio__gear-link{
  font-family:'Space Grotesk',sans-serif; font-size:.78rem; font-weight:600;
  color:var(--gold); padding:.3rem .2rem; transition:opacity .2s var(--ease);
}
.studio__gear-link:hover{ opacity:.7; }
.studio__cta{ margin-top:auto; }
.studio__cta .btn{ width:100%; }
.studio__hint{ font-size:.75rem; color:var(--on-dark-faint); text-align:center; margin:.8rem 0 0; }

/* ---------- estudios preview cards (home) ---------- */
.studios-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2.2rem; max-width:var(--maxw); margin:3.5rem auto 0; position:relative; z-index:1; }
.studio-card__media{ border-radius:var(--radius); overflow:hidden; aspect-ratio:16/9; margin-bottom:1.2rem; position:relative; }
.studio-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.studio-card:hover .studio-card__media img{ transform:scale(1.04); }
.studio-card h3{ font-size:1.35rem; margin-bottom:.1em; }
.studio-card__city{ font-size:.82rem; color:var(--gold); display:block; margin-bottom:1rem; font-family:'Space Grotesk',sans-serif; }
.studio-card p{ font-size:.88rem; margin-bottom:1.4rem; }
.studio-card__link{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.88rem; color:var(--on-dark); display:inline-flex; align-items:center; gap:.4em; }
.studio-card__link:hover{ color:var(--gold); }
.panel-light .studio-card__link{ color:var(--ink); }
.panel-light .studio-card__link:hover{ color:var(--gold); }

/* ---------- spotify ---------- */
.spotify-card{ background:var(--blue); border-radius:var(--radius); overflow:hidden; max-width:var(--maxw); margin:0 auto; color:#fff; }
.spotify-card__head{ display:flex; align-items:center; gap:1.4rem; padding:1.8rem; }
.spotify-card__cover{ width:110px; height:110px; border-radius:8px; flex-shrink:0; background:linear-gradient(135deg,#f0a,#a0f 35%,#0af 70%,#0fa); }
.spotify-card__meta{ flex:1; min-width:0; }
.spotify-card__meta strong{ display:block; font-family:'Space Grotesk',sans-serif; font-size:1.45rem; margin-bottom:.3rem; }
.spotify-card__owner{ font-size:.88rem; color:rgba(255,255,255,.85); margin-bottom:.4rem; }
.spotify-card__save{ font-size:.8rem; color:rgba(255,255,255,.8); }
.spotify-card__play{ width:50px; height:50px; border-radius:50%; background:#fff; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.spotify-card__play svg{ width:17px; height:17px; fill:var(--blue); margin-left:2px; }
.spotify-track{ display:flex; align-items:center; gap:1rem; padding:.75rem 1.8rem; border-top:1px solid rgba(255,255,255,.14); font-size:.88rem; }
.spotify-track__n{ width:18px; color:rgba(255,255,255,.6); font-size:.8rem; flex-shrink:0; }
.spotify-track__info{ flex:1; min-width:0; }
.spotify-track__info strong{ display:block; font-weight:600; font-size:.9rem; }
.spotify-track__info span{ font-size:.78rem; color:rgba(255,255,255,.7); }
.spotify-track__time{ color:rgba(255,255,255,.75); font-size:.82rem; }

/* ---------- testimonios ---------- */
.testimonials{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:.75fr 1.25fr; gap:3rem; align-items:start; position:relative; z-index:1; }
.testimonials__head h2{ font-size:clamp(1.9rem,3.4vw,2.5rem); }
.testimonials__head p{ font-size:.9rem; }
.testimonial-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; }
.testimonial-card{
  background:linear-gradient(160deg, var(--dark-3), var(--dark-2));
  border:1px solid var(--line-dark); border-radius:var(--radius); padding:2rem 1.8rem;
}
.testimonial-card__quote{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.05rem; color:var(--on-dark); margin-bottom:1rem; }
.testimonial-card p{ font-size:.84rem; }
.testimonial-card__author{ color:var(--on-dark) !important; font-size:.85rem; font-weight:600; margin-bottom:.15rem !important; }
.testimonial-card__role{ font-size:.8rem; margin:0 !important; }
.testimonial-card__role em{ font-style:normal; color:var(--gold); }

/* ---------- encuéntranos ---------- */
.info-row{ display:grid; grid-template-columns:1.15fr .8fr 1.05fr; gap:2rem; margin-bottom:2.5rem; position:relative; z-index:1; }
.info-col{ min-width:0; }
.why-record__text{ min-width:0; }
.info-col__head{ display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.info-col__head svg{ width:18px; height:18px; stroke:var(--gold); }
.info-col__head h4{ font-size:.95rem; margin:0; }
.info-col__pairs{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.info-col__pairs strong{ display:block; font-size:.8rem; font-weight:600; margin-bottom:.15rem; }
.info-col__pairs span{ font-size:.78rem; color:var(--on-dark-faint); }
.panel-light .info-col__pairs strong{ color:var(--ink); }
.panel-light .info-col__pairs span{ color:var(--ink-faint); }

.maps-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2.2rem; position:relative; z-index:1; }
.map-card iframe{ width:100%; height:250px; border:0; display:block; border-radius:var(--radius); background:var(--dark-3); }
.map-card__label{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding-top:1rem; }
.map-card__label strong{ font-family:'Space Grotesk',sans-serif; font-size:1.05rem; }
.map-card__label span{ font-size:.78rem; color:var(--on-dark-faint); }
.panel-light .map-card__label span{ color:var(--ink-faint); }

/* ---------- equipamiento ---------- */
.gear-grid{
  max-width:var(--maxw); margin:0 auto 1.6rem;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem;
  position:relative; z-index:1;
}
.gear-card{
  background:linear-gradient(160deg, var(--dark-3), var(--dark-2));
  border:1px solid var(--line-dark); border-radius:var(--radius);
  padding:1.9rem; display:flex; flex-direction:column;
}
.gear-card__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-bottom:1rem; margin-bottom:1.3rem; border-bottom:1px solid var(--line-dark);
  flex-wrap:wrap;
}
.gear-card__head h3{ font-size:1.3rem; margin:0; }
.gear-card__where{
  font-family:'Space Grotesk',sans-serif; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
}

/* label → value rows */
.gear-specs{ margin:0 0 1.4rem; }
.gear-specs > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.2rem;
  padding:.62rem 0; border-bottom:1px solid rgba(244,242,238,.05);
}
.gear-specs > div:last-child{ border-bottom:0; }
.gear-specs dt{
  font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--on-dark-faint); flex-shrink:0;
}
.gear-specs dd{
  margin:0; font-family:'Space Grotesk',sans-serif; font-size:.9rem;
  color:var(--on-dark); text-align:right;
}

/* sub-block with a plain list */
.gear-block{ margin-top:auto; }
.gear-block h4{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.8rem;
}
.gear-list{ display:flex; flex-direction:column; gap:.45rem; }
.gear-list li{
  display:flex; align-items:center; gap:.6rem;
  font-size:.87rem; color:var(--on-dark-dim);
}
.gear-list li::before{
  content:''; width:4px; height:4px; border-radius:50%;
  background:var(--gold); flex-shrink:0; opacity:.7;
}
/* two-column list for long inventories */
.gear-list--cols{
  display:block; columns:2; column-gap:1.6rem;
}
.gear-list--cols li{ break-inside:avoid; margin-bottom:.5rem; }

.gear-soon{
  font-size:.66rem; font-weight:600; letter-spacing:.06em;
  padding:.18em .55em; border-radius:5px; margin-left:.5rem;
  background:rgba(201,162,39,.14); color:var(--gold-2);
  border:1px solid rgba(201,162,39,.25); white-space:nowrap;
}

.gear-pending{
  max-width:var(--maxw); margin:0 auto; position:relative; z-index:1;
  padding:1.4rem 1.6rem; border-radius:var(--radius);
  border:1px dashed var(--line-dark); background:rgba(244,242,238,.02);
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
.gear-pending strong{ font-family:'Space Grotesk',sans-serif; font-size:.95rem; color:var(--on-dark); }
.gear-pending span{ font-size:.85rem; color:var(--on-dark-faint); }

@media (max-width: 980px){
  .gear-grid{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .gear-list--cols{ columns:1; }
  .gear-specs > div{ flex-direction:column; gap:.2rem; }
  .gear-specs dd{ text-align:left; }
}

/* ---------- por qué grabar (Reservas) ---------- */
.why-record{ max-width:var(--maxw); margin:0 auto 4rem; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; position:relative; z-index:1; }
.why-record h2{ font-size:clamp(1.9rem,3.6vw,2.6rem); }
.why-record p{ font-size:.92rem; }
.why-record__media{ border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; }
.why-record__media img{ width:100%; height:100%; object-fit:cover; }
.tag-list{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem; }
.tag-list li{ font-size:.78rem; padding:.45em .95em; border-radius:8px; background:rgba(244,242,238,.05); border:1px solid var(--line-dark); color:var(--on-dark-dim); }

.feature-grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; position:relative; z-index:1; }
.feature-card{ background:linear-gradient(160deg, var(--dark-3), var(--dark-2)); border:1px solid var(--line-dark); border-radius:var(--radius); padding:1.9rem; }
.feature-card__head{ display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem; }
.feature-card__head svg{ width:18px; height:18px; stroke:var(--gold); }
.feature-card h4{ font-size:1.05rem; margin:0; }
.feature-card p{ font-size:.86rem; margin:0; }

/* ---------- ingenieros ---------- */
.team-card{ display:grid; grid-template-columns:1fr 1.2fr; gap:1.6rem; align-items:stretch; margin-bottom:2.4rem; position:relative; z-index:1; }
.team-card--reverse .team-card__media{ order:2; }
.team-card__media{ border-radius:var(--radius); overflow:hidden; min-height:320px; background:var(--dark-2); }
.team-card__media img{ width:100%; height:100%; object-fit:cover; }
.team-card__media--logo{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg, var(--dark-3), var(--black));
  border:1px solid var(--line-dark);
}
.team-card__media--logo img{ width:46%; height:auto; object-fit:contain; opacity:.85; }
.team-card__body{
  background:linear-gradient(160deg, var(--dark-3), var(--dark-2));
  border:1px solid var(--line-dark);
  border-radius:var(--radius); padding:2.4rem;
}
.team-card__body h3{ font-size:1.6rem; margin-bottom:.15em; }
.team-card__role{ font-size:.8rem; color:var(--gold); text-transform:uppercase; letter-spacing:.1em; margin-bottom:1.1rem; }
.team-card__body p{ font-size:.88rem; }
.team-pills{ display:flex; flex-wrap:wrap; gap:.6rem; margin:1.4rem 0 1.6rem; }
.team-pill{ display:flex; flex-direction:column; gap:.1rem; font-size:.72rem; padding:.55em .9em; border-radius:10px; background:rgba(244,242,238,.04); border:1px solid var(--line-dark); color:var(--on-dark-faint); }
.team-pill strong{ color:var(--gold-2); font-weight:600; font-size:.7rem; letter-spacing:.04em; }

/* ---------- sobre nosotros ---------- */
.about-team{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-bottom:3.5rem; position:relative; z-index:1; }
.about-team__card img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius); margin-bottom:1rem; }
.about-team__photo--logo{
  width:100%; aspect-ratio:3/4; border-radius:var(--radius); margin-bottom:1rem;
  background:linear-gradient(155deg, var(--dark-3), var(--black));
  border:1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:center;
}
.about-team__photo--logo img{ width:52%; aspect-ratio:auto; object-fit:contain; margin:0; opacity:.85; border-radius:0; }
.about-team__card strong{ display:block; font-family:'Space Grotesk',sans-serif; font-size:1.1rem; }
.about-team__card span{ font-size:.82rem; color:var(--on-dark-faint); }
.panel-light .about-team__card span{ color:var(--ink-faint); }
.vision-block{ position:relative; z-index:1; }
.vision-block h2{ font-size:clamp(1.8rem,3.2vw,2.3rem); margin-bottom:1.2rem; }
.vision-block p{ max-width:900px; font-size:.92rem; }

/* ---------- portafolio ---------- */
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; position:relative; z-index:1; }
.work-card__media{
  aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; margin-bottom:.9rem;
  background:linear-gradient(155deg, var(--dark-3), var(--black));
  border:1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:center;
}
.work-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.work-card:hover .work-card__media img{ transform:scale(1.05); }
.work-card__media--logo img{ width:42%; height:auto; object-fit:contain; opacity:.5; }
.work-card strong{ display:block; font-family:'Space Grotesk',sans-serif; font-size:1rem; line-height:1.3; }
.work-card__tag{ display:block; font-size:.8rem; color:var(--on-dark-faint); line-height:1.3; }
.panel-light .work-card__tag{ color:var(--ink-faint); }

/* ---------- CTA band ---------- */
.cta-band{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; position:relative; z-index:1; }
.cta-band__text h2{ font-size:clamp(1.9rem,3.4vw,2.5rem); }
.cta-band__text p{ font-size:.92rem; margin-bottom:1.8rem; }
.cta-band__media{ border-radius:var(--radius); overflow:hidden; aspect-ratio:16/10; }
.cta-band__media img{ width:100%; height:100%; object-fit:cover; }

/* ---------- contacto ---------- */
.contact-page__grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:.85fr 1.15fr; gap:3.5rem; align-items:start; position:relative; z-index:1; }
.contact-page__intro h2{ font-size:clamp(1.9rem,3.4vw,2.4rem); }
.contact-page__intro p{ font-size:.92rem; }
.contact-quick{ margin-top:2rem; display:flex; flex-direction:column; gap:.9rem; }
.contact-quick a{
  display:flex; align-items:center; gap:.8rem; padding:.9em 1.1em;
  border-radius:12px; background:rgba(244,242,238,.04); border:1px solid var(--line-dark);
  font-size:.88rem; transition:border-color .2s var(--ease), background .2s var(--ease);
}
.contact-quick a:hover{ border-color:rgba(201,162,39,.5); background:rgba(201,162,39,.07); }
.contact-quick svg{ width:17px; height:17px; stroke:var(--gold); flex-shrink:0; }
.contact-page__form{
  background:linear-gradient(160deg, var(--dark-3), var(--dark-2));
  border:1px solid var(--line-dark); border-radius:var(--radius);
  padding:2rem; display:flex; flex-direction:column; gap:1rem;
}
.consent-field{ display:flex; align-items:flex-start; gap:.7rem; margin:.4rem 0 .6rem; }
.consent-field input{ margin-top:.2rem; accent-color:var(--gold); }
.consent-field label{ font-size:.74rem; color:var(--on-dark-faint); line-height:1.5; }
.consent-field a{ color:var(--gold-2); text-decoration:underline; }
.contact-page__form .btn{ align-self:flex-end; }

/* ---------- form fields ---------- */
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field label{ font-size:.82rem; color:var(--on-dark-dim); }
.field input, .field textarea, .field select{
  background:rgba(244,242,238,.05); border:1px solid var(--line-dark); border-radius:10px;
  padding:.85em 1em; color:var(--on-dark); font-family:'Inter',sans-serif; font-size:.9rem;
  resize:vertical; transition:border-color .2s var(--ease), background .2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--on-dark-faint); }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--gold); background:rgba(244,242,238,.07); }
.panel-light .field label{ color:var(--ink-faint); }
.panel-light .field input, .panel-light .field textarea, .panel-light .field select{ background:var(--card); border-color:var(--line); color:var(--ink); }
.form-note{ font-size:.82rem; color:var(--gold-2); min-height:1.2em; }

/* ---------- footer ---------- */
.site-footer{ background:var(--black); padding:4.5rem clamp(1.25rem,6vw,4rem) 2rem; font-size:.85rem; }
.footer__grid{ display:grid; grid-template-columns:1.4fr .6fr .8fr; gap:3rem; max-width:var(--maxw); margin:0 auto 2.5rem; }
.footer__brand .brand{ margin-bottom:1.2rem; }
.footer__brand .brand__logo-img{ height:68px; }
.footer__brand > p{ max-width:440px; font-size:.84rem; margin-bottom:1.4rem; color:var(--on-dark-dim); }
.footer-block h4{ font-size:1rem; margin-bottom:1rem; }
.footer-block p{ font-size:.8rem; margin-bottom:.9rem; color:var(--on-dark-faint); }
.footer-block strong{ display:block; color:var(--on-dark); font-weight:600; font-size:.8rem; }
.footer-block a:hover{ color:var(--gold); }
.socials{ display:flex; gap:.9rem; }
.socials a{ width:26px; height:26px; display:flex; align-items:center; justify-content:center; color:var(--on-dark-dim); transition:color .2s var(--ease), transform .2s var(--ease); }
.socials a:hover{ color:var(--gold); transform:translateY(-2px); }
.socials svg{ width:21px; height:21px; fill:currentColor; }
.footer__bottom{ max-width:var(--maxw); margin:0 auto; padding-top:1.6rem; border-top:1px solid var(--line-dark); text-align:center; font-size:.78rem; color:var(--on-dark-faint); }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-split]{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .servicios, .testimonials, .studios-grid, .maps-grid, .info-row, .about-team,
  .cta-band, .contact-page__grid, .testimonial-cards, .footer__grid,
  .why-record, .feature-grid, .studio-picker{ grid-template-columns:1fr; }
  .work-grid{ grid-template-columns:repeat(2,1fr); }
  .team-card, .team-card--reverse{ grid-template-columns:1fr; }
  .team-card--reverse .team-card__media{ order:0; }
  .team-card__media{ min-height:260px; }
  .servicios__logo img{ width:min(70%,300px); }
}

@media (max-width: 780px){
  .nav{ display:none; }
  .nav-cta{ display:none; }
  .burger{ display:flex; }
  .site-header.is-open .nav{
    display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--dark);
    border-bottom:1px solid var(--line-dark);
  }
  .site-header.is-open .nav a{ padding:1rem 1.5rem; border-bottom:1px solid var(--line-dark); }
  .hero{ padding-top:4rem; padding-bottom:4.5rem; }
  .work-grid{ grid-template-columns:1fr; }
  .spotify-card__head{ flex-wrap:wrap; }
  .spotify-card__cover{ width:76px; height:76px; }
  .spotify-card__meta strong{ font-size:1.15rem; }
  .info-col__pairs{ gap:1rem; }
  :root{ --radius-lg: 28px; }
}

@media (max-width: 480px){
  .section{ padding:3.5rem 1.25rem; }
  .team-card__body{ padding:1.6rem; }
  .studio__body{ padding:1.4rem; }
}