/* Prado Music Studio
   Hoja compartida por /index.html (es) y /en/index.html (en).
   Un solo lugar para el diseño: editar aquí afecta a los dos idiomas. */

/* Archivo · SIL Open Font License 1.1 · /assets/OFL-Archivo.txt
   Variable: peso 400–700, anchura 62%–125% */
@font-face{
  font-family:"Archivo";
  src:url("/assets/archivo-var.woff2") format("woff2");
  font-weight:400 700;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}

:root{
  color-scheme:dark;
  --tinta:#0B1220;
  --texto:#C8D2E2;
  --titulo:#FFFFFF;
  --naranja:#FC6426;
  --tenue:#7C889E;
  --pila:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif;

  --pad-y:clamp(44px,6vw,84px);
  --pad-x:clamp(24px,5.5vw,72px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--tinta);
  color:var(--texto);
  font-family:var(--pila);
  font-weight:400;
  font-size:clamp(16px,1.55vw,19px);
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.page{
  position:relative;
  max-width:1080px;
  margin:0 auto;
  padding:var(--pad-y) var(--pad-x) clamp(46px,5.5vw,76px);
}

/* ── Selector de idioma ─────────────────────────────
   Arriba a la derecha, alineado con el borde superior
   del logo. Es un enlace, no JavaScript: cada idioma
   tiene su propia URL. */
.idiomas{
  position:absolute;
  /* Vive dentro del margen superior, encima del contenido.
     Así no empuja la página hacia abajo ni pisa la columna de texto. */
  top:clamp(14px,2.4vw,34px);
  right:var(--pad-x);
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13px;
  font-weight:500;
  letter-spacing:.11em;
}
.idiomas .actual{color:var(--titulo)}
.idiomas .sep{color:var(--tenue);opacity:.5}
.idiomas a{
  color:var(--tenue);
  text-decoration:none;
  transition:color .18s ease;
}
.idiomas a:hover,
.idiomas a:focus-visible{color:var(--naranja)}
.idiomas a:focus-visible{
  outline:2px solid var(--naranja);
  outline-offset:4px;
  border-radius:2px;
}

.brand{
  display:block;
  height:clamp(122px,19vw,230px);
  width:auto;
}

h1{
  margin:clamp(40px,6vw,84px) 0 0;
  font-weight:700;
  font-stretch:118%;
  font-size:clamp(33px,6.2vw,76px);
  line-height:1.04;
  letter-spacing:-.026em;
  color:var(--titulo);
  text-wrap:balance;
}
.brilla{
  color:var(--naranja);
  text-shadow:0 0 30px rgba(252,100,38,.46), 0 0 72px rgba(252,100,38,.20);
}

.col-texto{margin-top:clamp(26px,3.4vw,46px)}

.copy{
  margin:0;
  max-width:64ch;
  display:flex;
  flex-direction:column;
  gap:clamp(14px,1.4vw,19px);
}
.copy p{margin:0}

/* Eco del isotipo: las barras del ecualizador, decrecientes */
.wave{
  display:flex;
  align-items:flex-end;
  gap:6px;
  height:clamp(22px,2.4vw,30px);
  margin:clamp(36px,4.6vw,60px) 0 clamp(18px,2.2vw,28px);
}
.wave i{
  display:block;
  width:4px;
  border-radius:2px;
  background:var(--naranja);
  opacity:.9;
}
.wave i:nth-child(1){height:100%}
.wave i:nth-child(2){height:78%}
.wave i:nth-child(3){height:58%}
.wave i:nth-child(4){height:40%}
.wave i:nth-child(5){height:24%}

address.contacto{
  font-style:normal;
  display:flex;
  flex-wrap:wrap;
  gap:9px clamp(14px,1.7vw,24px);
  font-size:clamp(15px,1.4vw,16.5px);
}
address.contacto a{
  color:var(--titulo);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.22);
  padding-bottom:1px;
  transition:color .18s ease, border-color .18s ease;
}
address.contacto a:hover,
address.contacto a:focus-visible{
  color:var(--naranja);
  border-bottom-color:var(--naranja);
}
address.contacto a:focus-visible{
  outline:2px solid var(--naranja);
  outline-offset:4px;
  border-radius:2px;
}
address.contacto .lugar{color:var(--tenue)}

/* A partir de pantalla ancha, dos columnas: la marca sostiene la izquierda
   y el texto ocupa la derecha. Cabe en una sola pantalla, sin scroll. */
@media (min-width:920px){
  .page{
    display:grid;
    grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
    column-gap:clamp(44px,4.6vw,76px);
    align-items:start;
  }
  .col-texto{margin-top:6px}
  h1{
    margin-top:clamp(32px,3.2vw,46px);
    font-size:clamp(40px,4.4vw,60px);
  }
  /* El pie cruza las dos columnas: ahí el contacto siempre cabe en una línea. */
  .pie{grid-column:1 / -1}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}