/* ───────── GOATLAND RECORDS · web pública del sello ─────────
   Paleta y tipografías de la muestra de Webflow de Darwin (17-oct-2026):
   negro #070708 · gris #161617 · blanco · azul #194bcd (hover #3c6ce7).
   Titulares Teko (condensada, mayúsculas) · texto IBM Plex Sans Condensed.
   Sin dorado: orden de Darwin («no me gusta el dorado» para la web del sello). */

@font-face { font-family: 'Teko'; src: url('/fonts/Teko.woff2') format('woff2'); font-weight: 300 700; font-display: swap }
@font-face { font-family: 'Plex'; src: url('/fonts/IBMPlexSansCondensed-400.woff2') format('woff2'); font-weight: 400; font-display: swap }
@font-face { font-family: 'Plex'; src: url('/fonts/IBMPlexSansCondensed-500.woff2') format('woff2'); font-weight: 500; font-display: swap }
@font-face { font-family: 'Plex'; src: url('/fonts/IBMPlexSansCondensed-600.woff2') format('woff2'); font-weight: 600; font-display: swap }

:root {
  --negro: #070708; --carbon: #0e0e10; --superficie: #161617;
  --linea: rgba(255,255,255,.09); --linea-fuerte: rgba(255,255,255,.2);
  --azul: #194bcd; --azul-claro: #3c6ce7; --azul-tenue: rgba(25,75,205,.16);
  --gris: #c8c8c8; --gris-medio: #9a9a9e; --gris-hondo: #6b6b70; --blanco: #fff;
  --ease: cubic-bezier(.4,0,.2,1); --ease-entra: cubic-bezier(.05,.7,.1,1);
  --ancho: 1280px; --titulo: 'Teko', 'Impact', sans-serif; --texto: 'Plex', 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0 }
[hidden] { display: none !important }
html { scroll-behavior: smooth }
body {
  background: var(--negro); color: var(--blanco); font-family: var(--texto);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.55; font-size: 17px;
}
a { color: inherit; text-decoration: none }
button, input, textarea { font: inherit; color: inherit }
::selection { background: var(--azul); color: #fff }
img { max-width: 100% }
h1, h2, h3 { font-family: var(--titulo); text-transform: uppercase; font-weight: 600; letter-spacing: .005em; line-height: .92 }

.eyebrow { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--azul-claro); font-weight: 600 }
.lead { color: var(--gris); font-size: clamp(16px, 1.5vw, 19px); max-width: 64ch; line-height: 1.6 }

/* Entradas al hacer scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-entra), transform .7s var(--ease-entra) }
.reveal.is-in { opacity: 1; transform: none }

/* ───────── Barra ───────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(18px, 4vw, 48px); border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease); backdrop-filter: blur(10px);
}
.nav.is-stuck { border-bottom-color: var(--linea); background: rgba(7,7,8,.86) }
.nav__brand { display: flex; align-items: center; gap: 11px }
.nav__brand img { width: 30px }
.nav__brand span { font-family: var(--titulo); font-weight: 600; font-size: 20px; letter-spacing: .06em; line-height: .9; text-transform: uppercase }
.nav__brand em { display: block; font-style: normal; color: var(--gris-medio); font-size: 13px; letter-spacing: .3em }
.nav__links { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 500 }
.nav__links a { padding: 9px 14px; border-radius: 8px; color: var(--gris); transition: color .2s var(--ease), background .2s var(--ease) }
.nav__links a:hover { color: var(--blanco); background: rgba(255,255,255,.06) }
.nav__cta { color: #fff !important; background: var(--azul); font-weight: 600; margin-left: 8px; padding: 10px 22px !important }
.nav__cta:hover { background: var(--azul-claro) !important }

/* ───────── Botones ───────── */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 8px; font-weight: 600; font-size: 16px; border: 1px solid transparent; cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease) }
.btn:active { transform: translateY(1px) }
.btn--primary { background: var(--azul); color: #fff }
.btn--primary:hover { background: var(--azul-claro) }
.btn--ghost { background: rgba(255,255,255,.06); border-color: var(--linea-fuerte); color: var(--blanco) }
.btn--ghost:hover { background: rgba(255,255,255,.12) }

/* ───────── Hero ───────── */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; padding: 140px clamp(18px, 4vw, 48px) 90px; overflow: hidden }
.hero__media { position: absolute; inset: 0; z-index: 0 }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; filter: brightness(.55) saturate(.8); animation: respira 18s ease-in-out infinite alternate }
.hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,7,8,.96) 0%, rgba(7,7,8,.82) 38%, rgba(7,7,8,.25) 70%, rgba(7,7,8,.6) 100%), linear-gradient(180deg, rgba(7,7,8,.5), transparent 30%, transparent 70%, var(--negro) 100%) }
@keyframes respira { from { transform: scale(1) } to { transform: scale(1.06) } }
.hero__in { position: relative; z-index: 1; width: 100%; max-width: var(--ancho); margin: 0 auto; display: grid; gap: 26px; justify-items: start }
.hero h1 { font-size: clamp(64px, 11vw, 168px); line-height: .86; max-width: 11ch; text-wrap: balance }
.hero__sub { color: var(--blanco); font-size: clamp(17px, 1.6vw, 22px); max-width: 62ch; line-height: 1.5; text-transform: uppercase; letter-spacing: .02em; font-weight: 500 }
.hero__sub b { color: var(--azul-claro); font-weight: 600 }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px }

/* ───────── Cifras ───────── */
.cifras { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); background: var(--carbon) }
.cifras__in { max-width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.cifra { padding: 34px clamp(18px, 3vw, 40px); display: grid; gap: 4px; border-right: 1px solid var(--linea) }
.cifra:last-child { border-right: 0 }
.cifra b { font-family: var(--titulo); font-weight: 600; font-size: clamp(44px, 5vw, 72px); line-height: .9; color: var(--blanco) }
.cifra span { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--blanco) }
.cifra small { font-size: 14px; color: var(--gris-medio) }

/* ───────── Secciones ───────── */
.section { max-width: var(--ancho); margin: 0 auto; padding: clamp(70px, 10vw, 120px) clamp(18px, 4vw, 48px) }
.section__head { display: grid; gap: 14px; margin-bottom: 48px; max-width: 820px }
.section__head h2, .empresa h2, .unete h2 { font-size: clamp(42px, 6vw, 84px) }

/* ───────── Servicios ───────── */
.pilares { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
.pilar { background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: 30px 28px 32px; display: grid; gap: 18px; align-content: start; transition: transform .35s var(--ease), border-color .35s var(--ease) }
.pilar:hover { transform: translateY(-4px); border-color: rgba(60,108,231,.55) }
.pilar__n { font-family: var(--titulo); font-size: 22px; color: var(--azul-claro); font-weight: 600; letter-spacing: .08em }
.pilar h3 { font-size: 40px }
.pilar ul { list-style: none; display: grid; gap: 14px; border-top: 1px solid var(--linea); padding-top: 18px }
.pilar li { display: grid; gap: 3px }
.pilar li b { font-size: 17px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em }
.pilar li span { color: var(--gris-medio); font-size: 15px; line-height: 1.5 }

/* ───────── Artistas ───────── */
.section--artistas { border-top: 1px solid var(--linea) }
.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px }
.artista {
  position: relative; border: 1px solid var(--linea); border-radius: 12px; overflow: hidden;
  background: var(--superficie); aspect-ratio: 3 / 4; display: grid; align-content: end; padding: 22px;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.artista::before {
  content: attr(data-inicial); position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--titulo); font-size: 230px; font-weight: 600; color: rgba(255,255,255,.05); line-height: .78; pointer-events: none;
  transition: color .5s var(--ease), transform .6s var(--ease);
}
.artista::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 40%, rgba(7,7,8,.88) 100%); z-index: 1 }
.artista:hover { transform: translateY(-5px); border-color: rgba(60,108,231,.6) }
.artista:hover::before { color: rgba(60,108,231,.14); transform: scale(1.04) }
.artista__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; filter: saturate(.85) contrast(1.05); transition: transform .6s var(--ease), filter .6s var(--ease) }
.artista--foto::before { display: none }
.artista--foto::after { background: linear-gradient(180deg, rgba(7,7,8,.05) 30%, rgba(7,7,8,.92) 100%) }
.artista--foto:hover .artista__foto { transform: scale(1.05); filter: saturate(1) contrast(1.05) }
.artista__in { position: relative; z-index: 2; display: grid; gap: 4px }
.artista__genero { display: inline-block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--azul-claro); font-weight: 600 }
.artista h3 { font-size: 34px; font-weight: 600 }
.artista p { font-size: 14px; color: var(--gris) }
.artista .oyentes { color: var(--blanco); font-weight: 600 }
.artista__link { position: absolute; inset: 0; z-index: 3 }

/* ───────── Empresa ───────── */
.section--empresa { border-top: 1px solid var(--linea) }
.empresa { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(34px, 6vw, 90px); align-items: start }
.empresa__texto { display: grid; gap: 18px }
.empresa__datos { display: grid; gap: 0; border: 1px solid var(--linea); border-radius: 12px; background: var(--superficie); overflow: hidden }
.empresa__datos div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; font-size: 16px; padding: 16px 22px; border-bottom: 1px solid var(--linea) }
.empresa__datos div:last-child { border-bottom: 0 }
.empresa__datos dt { color: var(--gris-hondo); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; padding-top: 3px }
.empresa__datos dd { color: var(--blanco) }
.empresa__datos a { color: var(--azul-claro) }

/* ───────── Únete ───────── */
.section--unete { border-top: 1px solid var(--linea) }
.unete { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 64px); align-items: start }
.unete__texto { display: grid; gap: 16px; position: sticky; top: 110px }
.marcas { list-style: none; display: grid; gap: 8px; color: var(--gris); font-size: 16px }
.marcas li::before { content: '— '; color: var(--azul-claro) }
.unete__contacto { color: var(--gris-medio); font-size: 15px; padding-top: 10px; border-top: 1px solid var(--linea) }
.unete__contacto a { color: var(--blanco); font-weight: 600 }
.card { background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: 28px }
.filtro { display: grid; gap: 18px }
.filtro__paso { display: grid; gap: 14px }
.filtro__preg { font-family: var(--titulo); font-size: 32px; text-transform: uppercase; line-height: 1 }
.opciones { display: grid; gap: 10px }
.opcion { text-align: left; background: var(--carbon); border: 1px solid var(--linea); border-radius: 10px; padding: 14px 16px; display: grid; gap: 2px; cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease) }
.opcion:hover { border-color: var(--azul-claro); background: var(--azul-tenue) }
.opcion b { font-size: 16px; font-weight: 600 }
.opcion span { font-size: 14px; color: var(--gris-medio) }
.linkbtn { background: none; border: 0; color: var(--gris-medio); cursor: pointer; justify-self: start; font-size: 14px }
.linkbtn:hover { color: var(--blanco) }
.veredicto { display: grid; gap: 6px; padding: 16px; border-left: 3px solid var(--azul); background: var(--azul-tenue); border-radius: 0 10px 10px 0 }
.veredicto b { font-family: var(--titulo); font-size: 28px; text-transform: uppercase; line-height: 1 }
.veredicto p { color: var(--gris); font-size: 15px }
.field { display: grid; gap: 6px; font-size: 14px; color: var(--gris-medio) }
.field i { font-style: normal; color: var(--gris-hondo) }
.field input, .field textarea { background: var(--carbon); border: 1px solid var(--linea-fuerte); border-radius: 8px; padding: 12px 14px; color: var(--blanco); font-size: 16px; width: 100% }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--azul-claro) }
.trampa { position: absolute; left: -9999px; opacity: 0 }
.filtro__error { color: #ff7a7a; font-size: 14px; min-height: 1em }
.filtro__gracias h3 { font-size: 44px }
.filtro__gracias p { color: var(--gris) }

/* ───────── Pie ───────── */
.pie { border-top: 1px solid var(--linea); padding: 50px clamp(18px, 4vw, 48px); background: var(--carbon) }
.pie__in { max-width: var(--ancho); margin: 0 auto; display: flex; justify-content: space-between; gap: 26px; flex-wrap: wrap; align-items: start }
.pie__mark { width: 34px; margin-bottom: 10px }
.pie__empresa { display: grid; gap: 4px; max-width: 440px }
.pie__legal { color: var(--gris-hondo); font-size: 14px }
.pie__legal b { color: var(--gris) }
.pie__legal a { color: var(--gris) }
.pie__legal a:hover { color: var(--azul-claro) }
.pie__links { display: flex; gap: 20px; flex-wrap: wrap; font-size: 15px; color: var(--gris) }
.pie__links a:hover { color: var(--azul-claro) }
.pie__links--legal { font-size: 14px; color: var(--gris-hondo) }
.pie__copy { width: 100%; margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--linea); color: var(--gris-hondo); font-size: 13px }

/* ───────── Páginas legales ───────── */
.pagina-legal .nav { position: sticky; top: 0 }
.legal { max-width: 840px; margin: 0 auto; padding: 140px clamp(18px, 4vw, 48px) 100px; display: grid; gap: 34px }
.legal h1 { font-size: clamp(56px, 8vw, 110px) }
.legal__fecha { color: var(--gris-hondo); font-size: 14px; margin-top: -20px }
.legal section { display: grid; gap: 12px; padding-top: 10px }
.legal h2 { font-size: 34px }
.legal p, .legal li { color: var(--gris); font-size: 17px; line-height: 1.65 }
.legal b { color: var(--blanco); font-weight: 600 }
.legal ul { padding-left: 22px; display: grid; gap: 8px }
.legal a { color: var(--azul-claro) }
.legal a:hover { color: var(--blanco) }
.legal code { font-family: ui-monospace, Menlo, monospace; font-size: 14px; color: var(--blanco); background: rgba(255,255,255,.06); padding: 2px 6px; border-radius: 6px }
.ficha { display: grid; grid-template-columns: 210px 1fr; gap: 10px 18px; padding: 22px 24px; border: 1px solid var(--linea); border-radius: 12px; background: var(--superficie) }
.ficha dt { color: var(--gris-hondo); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; padding-top: 3px }
.ficha dd { color: var(--blanco); font-size: 16px; line-height: 1.55 }
.legal__en { margin-top: 20px; padding-top: 34px; border-top: 1px solid var(--linea) }
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; color: var(--gris) }
.tabla th { text-align: left; color: var(--azul-claro); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 10px 12px; border-bottom: 1px solid var(--linea-fuerte) }
.tabla td { padding: 12px; border-bottom: 1px solid var(--linea); vertical-align: top; line-height: 1.5 }

/* ───────── Móvil ───────── */
@media (max-width: 980px) {
  .pilares { grid-template-columns: 1fr }
  .cifras__in { grid-template-columns: repeat(2, 1fr) }
  .cifra:nth-child(2) { border-right: 0 }
  .cifra:nth-child(1), .cifra:nth-child(2) { border-bottom: 1px solid var(--linea) }
}
@media (max-width: 860px) {
  .nav__links a:not(.nav__cta) { display: none }
  .nav__brand span { display: none }
  .hero { padding-top: 120px }
  .hero h1 { font-size: clamp(64px, 17vw, 110px) }
  .hero__cta .btn { width: 100%; }
  .hero__cta { width: 100% }
  .empresa, .unete { grid-template-columns: 1fr }
  .unete__texto { position: static }
  .empresa__datos div { grid-template-columns: 1fr; gap: 2px }
  .artista::before { font-size: 170px }
  .ficha { grid-template-columns: 1fr; gap: 2px 0 }
  .ficha dd { margin-bottom: 12px }
  .legal { padding-top: 110px }
  .tabla, .tabla thead, .tabla tbody, .tabla tr, .tabla td, .tabla th { display: block }
  .tabla thead { display: none }
  .tabla td { border: 0; padding: 4px 0 }
  .tabla tr { padding: 12px 0; border-bottom: 1px solid var(--linea) }
}
@media (max-width: 520px) {
  .cifras__in { grid-template-columns: 1fr }
  .cifra { border-right: 0; border-bottom: 1px solid var(--linea) }
  .cifra:last-child { border-bottom: 0 }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important }
  .reveal { opacity: 1; transform: none }
}