/* EkoEterno Music · sitio público
   Tokens del manual de identidad (docs/12-manual-identidad.html, cap. 5 y 6), los mismos del panel.
   Un solo tema, oscuro: "oro sobre noche". Regla 70/20/10: 70 % negro y neutros oscuros,
   20 % blanco hueso, 10 % dorado. Nunca Oro Eko sobre fondo claro. */

:root {
  color-scheme: dark;
  --negro: #0b0b0c;
  --carbon: #17171a;
  --grafito: #2a2a2e;
  --humo: #8a8a8f;
  --ceniza: #b5b2aa;
  --hueso: #f7f3ea;
  --oro: #c9a24b;
  --oro-claro: #e6c878;
  --oro-viejo: #8c6a2a;

  --titulo: "Montserrat", "Segoe UI", Arial, sans-serif;
  --texto: "Inter", "Segoe UI", Arial, sans-serif;
  --editorial: "Fraunces", Georgia, serif;

  --ancho: 1120px;
  --lectura: 68ch;
  --radio: 12px;
  --alto-cabecera: 64px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--hueso);
  font-family: var(--texto);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 900px) {
  body {
    font-size: 1.0625rem;
  }
}

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

p {
  margin: 0 0 1em;
}

a {
  color: var(--oro);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--oro-claro);
}

:focus-visible {
  outline: 2px solid var(--oro-claro);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--oro);
  color: var(--negro);
}

.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 16px;
}

@media (min-width: 640px) {
  .envoltura {
    padding-inline: 32px;
  }
}

.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Enlace para saltar al contenido: visible solo al recibir foco con teclado. */
.saltar {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--oro);
  color: var(--negro);
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
}

.saltar:focus {
  top: 8px;
  color: var(--negro);
}

/* El <main> recibe el foco del enlace "Saltar al contenido"; no necesita contorno. */
main:focus {
  outline: none;
}

/* ---------- Tipografía ---------- */

h1,
h2,
h3 {
  font-family: var(--titulo);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-weight: 800;
  font-size: clamp(2.25rem, 1.2rem + 5.2vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

h2 {
  font-weight: 700;
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
}

h3 {
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.3;
}

/* Etiqueta: Montserrat 600, mayúsculas, tracking +18 %. */
.etiqueta {
  display: block;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 16px;
}

.entrada {
  color: var(--ceniza);
  font-size: 1.0625rem;
  max-width: var(--lectura);
}

@media (min-width: 900px) {
  .entrada {
    font-size: 1.1875rem;
  }
}

.editorial {
  font-family: var(--editorial);
  font-style: italic;
  font-weight: 400;
}

/* ---------- Botones (objetivo táctil de 48 px) ---------- */

.boton,
.boton-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: var(--texto);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 150ms, border-color 150ms, color 150ms;
}

/* Principal: fondo Oro Eko, texto Negro Eterno (≈8:1). */
.boton {
  background: var(--oro);
  color: var(--negro);
  border: 1px solid var(--oro);
}

.boton:hover {
  background: var(--oro-claro);
  border-color: var(--oro-claro);
  color: var(--negro);
}

/* Secundario: borde Oro Eko, texto Blanco Hueso. */
.boton-secundario {
  background: transparent;
  color: var(--hueso);
  border: 1px solid var(--oro);
}

.boton-secundario:hover {
  border-color: var(--oro-claro);
  color: var(--hueso);
}

.botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

@media (max-width: 479px) {
  .botones .boton,
  .botones .boton-secundario {
    width: 100%;
  }
}

/* ---------- Cabecera ---------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 11, 12, 0.94);
  border-bottom: 1px solid var(--grafito);
}

@supports (backdrop-filter: blur(8px)) {
  .cabecera {
    background: rgba(11, 11, 12, 0.82);
    backdrop-filter: blur(8px);
  }
}

.cabecera .envoltura {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--alto-cabecera);
}

/* Nombre de la marca en texto (provisional hasta tener el logo vectorizado). */
.marca {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--titulo);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.12em;
  color: var(--oro);
  text-decoration: none;
  white-space: nowrap;
}

.marca:hover {
  color: var(--oro-claro);
}

.marca .marca-music {
  margin-left: 0.5em;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--ceniza);
}

.navegacion ul {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navegacion a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  color: var(--ceniza);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.navegacion a:hover {
  color: var(--hueso);
}

.navegacion .boton {
  margin-left: 8px;
  padding: 0 20px;
  color: var(--negro);
}

/* En celular solo queda el botón de contacto; el resto se recorre con el dedo. */
@media (max-width: 819px) {
  .navegacion .nav-secundario {
    display: none;
  }
  .navegacion .boton {
    margin-left: 0;
    padding: 0 18px;
    font-size: 0.9375rem;
  }
}

@media (max-width: 359px) {
  .marca .marca-music {
    display: none;
  }
}

/* ---------- Secciones ---------- */

main > section {
  padding-block: 72px;
  scroll-margin-top: var(--alto-cabecera);
}

@media (min-width: 900px) {
  main > section {
    padding-block: 112px;
  }
}

.seccion-carbon {
  background: var(--carbon);
  border-block: 1px solid var(--grafito);
}

.encabezado-seccion {
  max-width: 760px;
  margin-bottom: 48px;
}

.encabezado-seccion h2 + p {
  margin-top: 20px;
}

/* ---------- Héroe ---------- */

.heroe {
  position: relative;
  overflow: hidden;
  padding-block: 88px 80px !important;
  /* Un brillo dorado muy tenue, como luz cálida sobre negro. */
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(201, 162, 75, 0.1), transparent 60%),
    var(--negro);
}

@media (min-width: 900px) {
  .heroe {
    padding-block: 144px 128px !important;
  }
}

.heroe h1 {
  max-width: 14ch;
}

.heroe .frase {
  margin: 24px 0 0;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  line-height: 1.35;
  color: var(--oro-claro);
}

.heroe .entrada {
  margin-top: 24px;
}

.heroe .ubicacion {
  margin: 40px 0 0;
  font-size: 0.875rem;
  color: var(--ceniza);
}

/* Doble línea: evoca los dos trazos paralelos del infinito, sin usar el símbolo. */
.doble-linea {
  width: 96px;
  height: 7px;
  border-top: 1px solid var(--oro);
  border-bottom: 1px solid var(--oro);
  margin: 0 0 28px;
}

/* ---------- Tarjetas de servicios ---------- */

.rejilla {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .rejilla {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .rejilla-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tarjeta {
  background: var(--carbon);
  border: 1px solid var(--grafito);
  border-radius: var(--radio);
  padding: 28px 24px;
  min-width: 0;
}

.seccion-carbon .tarjeta {
  background: var(--negro);
}

.tarjeta .icono {
  width: 32px;
  height: 32px;
  color: var(--oro);
  margin-bottom: 20px;
}

.tarjeta h3 {
  margin-bottom: 10px;
}

.tarjeta p {
  margin: 0;
  color: var(--ceniza);
  font-size: 0.9688rem;
}

/* ---------- Cómo trabajamos ---------- */

.dos-columnas {
  display: grid;
  gap: 48px;
}

@media (min-width: 900px) {
  .dos-columnas {
    grid-template-columns: 5fr 7fr;
    gap: 72px;
    align-items: start;
  }
}

.compromisos {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--grafito);
}

.compromisos li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 4px 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--grafito);
}

.compromisos .numero {
  grid-row: span 2;
  font-family: var(--titulo);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--oro);
  font-variant-numeric: tabular-nums;
}

.compromisos h3 {
  font-size: 1.0625rem;
}

.compromisos p {
  margin: 0;
  color: var(--ceniza);
}

.cita {
  margin: 40px 0 0;
  padding: 24px 24px 24px 28px;
  border-left: 2px solid var(--oro);
  background: var(--negro);
  border-radius: 0 var(--radio) var(--radio) 0;
}

.cita p {
  margin: 0;
  font-family: var(--editorial);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--hueso);
}

/* ---------- Quiénes somos ---------- */

.historia p {
  max-width: var(--lectura);
  color: var(--ceniza);
}

.historia p:first-child {
  color: var(--hueso);
}

.socios {
  display: grid;
  gap: 16px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .socios {
    grid-template-columns: repeat(2, 1fr);
  }
}

.socio {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 20px;
  align-items: start;
}

/* Iniciales en círculo dorado. Para poner la foto, sustituya el <span class="retrato">
   por <img class="retrato" src="/fotos/nombre.webp" alt="Retrato de ..." width="144" height="144">. */
.retrato {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--oro);
  color: var(--negro);
  font-family: var(--titulo);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
}

.socio h3 {
  font-size: 1.125rem;
}

.socio .rol {
  margin: 6px 0 10px;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oro);
}

.socio p:last-child {
  margin: 0;
  color: var(--ceniza);
  font-size: 0.9688rem;
}

.politica {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--grafito);
  max-width: var(--lectura);
}

.politica h3 {
  margin-bottom: 12px;
}

.politica p {
  color: var(--ceniza);
  margin: 0;
}

/* ---------- Roster ---------- */

.roster {
  border: 1px solid var(--oro-viejo);
  border-radius: var(--radio);
  padding: 40px 24px;
  text-align: center;
  background: var(--negro);
}

@media (min-width: 640px) {
  .roster {
    padding: 56px 48px;
  }
}

.roster h3 {
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.625rem);
  margin-bottom: 12px;
}

.roster p {
  margin: 0 auto;
  max-width: 52ch;
  color: var(--ceniza);
}

.roster .doble-linea {
  margin-inline: auto;
}

/* ---------- Artistas y compositores ---------- */

.lista-envio {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  max-width: var(--lectura);
}

.lista-envio li {
  position: relative;
  padding: 10px 0 10px 28px;
  color: var(--ceniza);
  border-bottom: 1px solid var(--grafito);
}

.lista-envio li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 21px;
  width: 12px;
  height: 5px;
  border-top: 1px solid var(--oro);
  border-bottom: 1px solid var(--oro);
}

/* ---------- Preguntas frecuentes ---------- */

.preguntas {
  max-width: 820px;
  border-top: 1px solid var(--grafito);
}

.preguntas details {
  border-bottom: 1px solid var(--grafito);
}

.preguntas summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.35;
}

.preguntas summary::-webkit-details-marker {
  display: none;
}

.preguntas summary::after {
  content: "+";
  flex: none;
  width: 28px;
  text-align: center;
  font-family: var(--texto);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--oro);
}

.preguntas details[open] summary::after {
  content: "\2212";
}

.preguntas summary:hover {
  color: var(--oro-claro);
}

.preguntas .respuesta {
  padding: 0 44px 24px 0;
  color: var(--ceniza);
}

.preguntas .respuesta p:last-child {
  margin: 0;
}

/* ---------- Contacto ---------- */

.contacto {
  text-align: left;
}

.correo-grande {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 8px;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: clamp(1.125rem, 0.8rem + 2.2vw, 2rem);
  color: var(--oro);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: var(--oro-viejo);
}

.correo-grande:hover {
  color: var(--oro-claro);
  text-decoration-color: var(--oro-claro);
}

.nota {
  margin-top: 24px;
  font-size: 0.9375rem;
  color: var(--ceniza);
}

/* ---------- Pie ---------- */

.pie {
  padding-block: 56px 40px;
  border-top: 1px solid var(--grafito);
  font-size: 0.9375rem;
  color: var(--ceniza);
}

.pie .fila {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
}

.pie .eslogan {
  margin: 8px 0 0;
  font-family: var(--editorial);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--hueso);
}

.pie ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pie ul a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 8px;
  color: var(--ceniza);
}

.pie ul a:hover {
  color: var(--hueso);
}

.pie .legal {
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--grafito);
  font-size: 0.8125rem;
  color: var(--humo);
}

/* ---------- Páginas de texto (aviso de privacidad, 404) ---------- */

.pagina-texto {
  padding-block: 56px 88px;
}

.pagina-texto .contenido {
  max-width: 760px;
}

.pagina-texto h1 {
  font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
  margin-bottom: 16px;
}

.pagina-texto h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  margin: 48px 0 12px;
}

.pagina-texto p,
.pagina-texto li {
  color: var(--ceniza);
}

.pagina-texto strong {
  color: var(--hueso);
  font-weight: 600;
}

.pagina-texto ul {
  padding-left: 20px;
  margin: 0 0 1em;
}

.pagina-texto li {
  margin-bottom: 8px;
}

.fecha {
  font-size: 0.875rem;
  color: var(--ceniza);
}

.aviso-tramite {
  margin: 24px 0 0;
  padding: 16px 20px;
  border: 1px solid var(--oro-viejo);
  border-radius: var(--radio);
  background: var(--carbon);
  font-size: 0.9375rem;
}

.aviso-tramite p {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}