/* =====================================================================
   ADORA New Music — hoja de estilos principal
   Réplica del sistema de diseño original (Webflow) reescrita a mano.
   Orden: variables → base → utilidades → secciones → animaciones → responsive
   ===================================================================== */


/* =====================================================================
   1. SISTEMA DE DISEÑO (variables)
   ===================================================================== */
:root {
  /* --- Fondos --- */
  --background--primary-light:   #ffffff;
  --background--secondary-light: #eeeeee;
  --background--tertiary-light:  #fafafa;
  --background--primary-dark:    #000000;
  --background--secondary-dark:  #1b1b1b;
  --background--tertiary-dark:   #3f3f3f;

  /* --- Texto --- */
  --text--onlightprimary:   #333333;
  --text--onlightsecondary: #0009;
  --text--onlighttertiary:  #00000069;
  --text--ondarkprimary:    #ffffff;
  --text--ondarksecondary:  #fffc;
  --text--ondarktertiary:   #979797;

  /* --- Colores de acento --- */
  --color--album:          #c91032;   /* rojo de marca */
  --color--bluelink:       #0055ff;
  --color--price:          #ffea7d;   /* amarillo de la pastilla de precio */
  --color--store-banner:   #feb886;   /* naranja de la cinta "Featured" */
  --color--cart-notification: #ff3838;

  /* --- Radios --- */
  --radius--card:     8px;
  --radius--round:    50rem;
  --radius--round-xl: 100em;

  /* --- Tipografías --- */
  --font--main:  "Syne", Arial, sans-serif;
  --font--alt:   "Ropa Sans", sans-serif;

  /* --- Curvas de animación --- */
  --ease--out:   cubic-bezier(.455, .03, .515, .955);
  --ease--in:    cubic-bezier(.55, .085, .68, .53);
}


/* =====================================================================
   2. BASE
   ===================================================================== */
body {
  background-color: var(--background--primary-light);
  color: var(--text--onlightprimary);
  font-family: var(--font--main);
  font-size: 1rem;
  line-height: 1;
}

h1 { font-size: 5.625em; font-weight: 700; line-height: 1; }
h2 { font-size: 5em;     font-weight: 700; line-height: 1; }
h3 { font-size: 4.375em; font-weight: 700; line-height: 1.2em; }
h5 { font-size: 3.125em; font-weight: 700; line-height: 1; }
h6 { font-size: 2.5em;   font-weight: 700; line-height: 1; }

p  { margin-bottom: 1em; font-size: 1.1rem; line-height: 1.4em; }

::selection { background: var(--color--album); color: #fff; }


/* =====================================================================
   3. UTILIDADES (tamaños, pesos, contenedores, botones)
   ===================================================================== */

/* --- Tamaños de texto --- */
.fsize-tiny    { font-size: .8em;    line-height: 1; letter-spacing: normal; }
.fsize-small   { font-size: 1em;     line-height: 1; letter-spacing: normal; }
.fsize-xsmall  { font-size: 1.25em;  line-height: 1.4; letter-spacing: normal; }
.fsize-xxsmall { font-size: 1.875em; line-height: 1; letter-spacing: normal; }
.fsize-medium  { font-size: 2.5em;   line-height: 1; }
.fsize-large   { font-size: 3.125em; font-family: var(--font--alt); }
.fsize-xlarge  { font-size: 3.75em;  line-height: 1; }
.fsize-xxlarge { font-size: 4.375em; line-height: 1; }
.fsize-huge    { font-size: 5em;     line-height: 1; }
.fsize-display { font-size: 5.625em; line-height: 1; }

/* --- Pesos y transformaciones --- */
.fweight-regular   { font-weight: 400; }
.fweight-medium    { font-weight: 500; }
.fweight-bold      { font-weight: 700; }
.fweight-extrabold { font-weight: 800; }
.f-allcaps         { text-transform: uppercase; }

/* --- Bloque oscuro --- */
.bg-primary-dark {
  background-color: var(--background--primary-dark);
  color: var(--text--ondarkprimary);
}

/* --- Contenedor central --- */
.container {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 4em;
  position: relative;
}

/* --- Línea separadora fina (se anima creciendo de izquierda a derecha) --- */
.line-separator {
  width: 100%;
  height: 1px;
  background-color: #000;
  opacity: .2;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s var(--ease--out);
}
.line-separator.light { background-color: #fff; opacity: .3; }
.line-separator.full-black { opacity: 1; display: block; }
.line-separator.is-visible { transform: scaleX(1); }

/* --- Botón pastilla --- */
.button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  align-self: center;
  flex: 0 auto;
  position: relative;
  margin-left: 15px;
  padding: 9px 15px;
  color: #fff;
  background-color: #000;
  border-radius: var(--radius--round);
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  transition: background-color .4s var(--ease--out), padding .35s var(--ease--out);
}
.button:hover { background-color: var(--background--tertiary-dark); }

.button.light        { color: #000; background-color: #fff; }
.button.light:hover  { background-color: #dbdbdb; }
.button.center       { justify-content: center; align-self: center; text-align: center; }

/* --- Iconos de streaming --- */
.streaming-icons { display: flex; gap: 1em; }
.stream-link {
  display: block;
  flex: 0 auto;
  opacity: 1;
  transition: opacity .6s var(--ease--in);
}
.stream-link:hover { opacity: .6; }
.img-stream-icons { width: auto; height: 30px; object-fit: contain; }


/* =====================================================================
   4. BARRA DE NAVEGACIÓN
   ===================================================================== */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  border-radius: var(--radius--card);
}

.container-navbar {
  position: relative;
  z-index: 299;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  margin: 10px 20px 0;
  padding: 6px 20px;
  background-color: #fff;
  border-radius: var(--radius--card);
  box-shadow: 0 0 2px 1px #0000000d;
  transition: margin .35s var(--ease--out), padding .35s var(--ease--out),
              box-shadow .35s ease;
}

/* Logo */
.logo-brand {
  display: block;
  margin-right: auto;
  position: static;
}
.image {
  width: auto;
  height: 46px;
  padding: 1px 0;
  transition: height .35s var(--ease--out);
}

/* --- Barra compacta: se activa al bajar y se deshace al subir ---------
   Lo pone y lo quita main.js añadiendo la clase .is-compact */
.navbar.is-compact .container-navbar {
  margin-top: 6px;
  padding-top: 0;
  padding-bottom: 0;
  box-shadow: 0 2px 10px #00000014;
}
.navbar.is-compact .image        { height: 34px; }
.navbar.is-compact .nav-link     { padding-top: 10px; padding-bottom: 10px; }
.navbar.is-compact .button       { padding-top: 7px; padding-bottom: 7px; }
.navbar.is-compact .lang-switch  { padding: 2px; }
.navbar.is-compact .lang-opt     { padding-top: 4px; padding-bottom: 4px; }

/* Quien prefiera no ver movimiento, no lo ve */
@media (prefers-reduced-motion: reduce) {
  .container-navbar, .image, .nav-link, .button, .lang-switch, .lang-opt { transition: none; }
}

/* Contenido del menú */
.menu-content { display: flex; align-items: center; justify-content: space-between; }

.nav-menu {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: flex-start;
  flex: 0 auto;
}

.nav-link {
  padding: 13px 15px;
  font-size: .8em;
  font-weight: 700;
  text-transform: uppercase;
  transition: color .375s var(--ease--in), padding .35s var(--ease--out);
}
.nav-link:hover { color: var(--text--ondarktertiary); }
.nav-link.w--current { color: var(--text--onlightprimary); }
.nav-link.locale { padding-left: 0; padding-right: 0; }

/* --- Selector de idioma: control segmentado EN / ES ---------------------
   Sin menú desplegable: los dos idiomas están siempre a la vista, a un
   solo clic, y se ve de un vistazo cuál está activo. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 auto;
  margin-right: 22px;
  padding: 3px;
  background-color: var(--background--secondary-light);
  border-radius: var(--radius--round);
  transition: padding .35s var(--ease--out);
}
.lang-opt {
  padding: 6px 12px;
  border-radius: var(--radius--round);
  color: #8a8a8a;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1;
  transition: background-color .25s ease, color .25s ease, padding .35s var(--ease--out);
}
.lang-opt:hover { color: var(--text--onlightprimary); }
.lang-opt.is-active { background-color: #000; color: #fff; }
.lang-opt.is-active:hover { color: #fff; }

/* Iconos sociales dentro del menú (sólo móvil) */
.menu-icons { display: none; gap: 1em; }

/* Botón hamburguesa (sólo móvil) */
.menu-button { display: none; }
.burger-wrapper {
  display: flex;
  flex-flow: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 21px;
  position: relative;
}
.burger-top-line,
.burger-middle-line,
.burger-bottom-line {
  display: block;
  height: 2px;
  background-color: #000;
  transition: transform .35s var(--ease--out), opacity .25s ease, width .35s ease;
}
.burger-top-line    { width: 20px; }
.burger-middle-line { width: 100%; }
.burger-bottom-line { width: 80%; }

/* Aspa cuando el menú está abierto */
.menu-button.is-open .burger-top-line    { width: 100%; transform: translateY(7px) rotate(45deg); }
.menu-button.is-open .burger-middle-line { opacity: 0; }
.menu-button.is-open .burger-bottom-line { width: 100%; transform: translateY(-7px) rotate(-45deg); }

/* Velo oscuro tras el menú móvil */
.background-burger-navigation {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  opacity: 0;
  transition: opacity .4s ease;
}
.background-burger-navigation.is-visible { opacity: .85; }


/* =====================================================================
   5. HERO
   ===================================================================== */
.hero {
  position: relative;
  z-index: 10;
  width: 100svw;
  max-width: 100vw;
  height: 100svh;
  max-height: 100vh;
  padding: 70px 10px 10px;
  color: #fff;
  background-color: #fff;
  overflow: clip;
}

.container-hero {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: var(--radius--card);
  overflow: clip;
}

/* --- Vídeo de fondo --- */
.hero-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: clip;
}
.hero-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-controls { position: absolute; right: 16px; top: 16px; z-index: 3; }
.video-play-pause {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  background-color: #ffffff2e;
  border-radius: var(--radius--round-xl);
  backdrop-filter: blur(4px);
  transition: background-color .3s ease;
}
.video-play-pause:hover { background-color: #ffffff55; }
.video-play-pause img   { width: 16px; height: 16px; filter: invert(1); }
.video-play-pause .is-play  { display: none; }
.video-play-pause.is-paused .is-play  { display: block; }
.video-play-pause.is-paused .is-pause { display: none; }

/* Capa negra usada por las animaciones de entrada */
.card-opacity {
  position: absolute;
  inset: 0;
  z-index: 12;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0;
  pointer-events: none;
}

/* --- Titular centrado --- */
.hero-text {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  gap: .5em;
  width: 100%;
  height: 100%;
  text-align: center;
}
.tagline-wrapper,
.hero-heading-wrapper { overflow: hidden; }

.hero-tagword {
  font-family: var(--font--alt);
  font-size: 1.8rem;
  letter-spacing: -1px;
  text-transform: uppercase;
}
.hero-heading {
  font-size: 3em;
  font-weight: 800;
  letter-spacing: -3px;
  text-transform: uppercase;
}

/* --- Tarjeta del álbum destacado --- */
.hero-feature-music {
  position: absolute;
  right: 0; bottom: 0;
  z-index: 13;
  max-width: 410px;
  margin: 0 40px 40px 0;
  padding: 3px;
  background-color: #fff;
  border-radius: var(--radius--card);
}

.feature-hero-item {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
}

.hero-feat-stream-content {
  display: flex;
  flex-flow: column;
  align-items: stretch;
  justify-content: center;
  gap: .1em;
  flex: 0 auto;
  padding: 10px 20px 0 10px;
  color: var(--text--onlightprimary);
}

.card-title-wrapper { display: flex; flex-flow: column; gap: 6px; padding-bottom: 5px; }
.card-album-title   { font-size: .8rem; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.format-available-text-wrapper { display: flex; gap: 7px; }
.hero-feature-listen {
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: -.6px;
  text-transform: uppercase;
}

.hero-stream-infos { display: flex; flex-flow: column; justify-content: flex-start; gap: 10px; }
.streaming-icons.hero-cards { flex-flow: wrap; max-width: 140px; column-gap: 1em; row-gap: .3em; }
.streaming-icons.hero-cards .img-stream-icons { height: 24px; }

/* Onda de sonido (barras generadas por JS) */
.wave       { height: 40px; display: flex; align-items: center; }
.wave-bars  { display: flex; align-items: center; gap: 2px; height: 40px; }
.wave-bars span {
  display: block;
  width: 2px;
  background-color: #000;
  border-radius: 2px;
  animation: wave-pulse 1.1s ease-in-out infinite;
}
@keyframes wave-pulse {
  0%, 100% { transform: scaleY(.35); }
  50%      { transform: scaleY(1); }
}

/* Portada del álbum dentro de la tarjeta */
.image-wrapper-hero-album {
  position: relative;
  align-self: center;
  flex: 0 auto;
  width: auto;
  min-height: 120px;
  max-height: 160px;
  aspect-ratio: 1;
  border-radius: var(--radius--card);
  overflow: hidden;
}
.cta-img { width: 100%; height: 100%; object-fit: cover; }

.view-more-tips {
  position: absolute;
  right: 0; bottom: 0;
  width: auto;
  height: 39px;
  object-fit: contain;
  transition: opacity .35s ease;
}
.view-more-hero-cta {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px; height: 35px;
  margin: auto;
  color: var(--text--onlightprimary);
  background-color: var(--background--primary-light);
  border-radius: var(--radius--round-xl);
  font-size: 1.1rem;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .35s ease, transform .35s var(--ease--out);
}
.image-wrapper-hero-album:hover .view-more-hero-cta { opacity: 1; transform: scale(1); }
.image-wrapper-hero-album:hover .view-more-tips     { opacity: 0; }
.image-wrapper-hero-album:hover .cta-img            { transform: scale(1.06); }
.cta-img { transition: transform .8s var(--ease--out); }


/* =====================================================================
   6. INTRODUCCIÓN
   ===================================================================== */
.introduction {
  position: relative;
  z-index: 10;
  padding-top: 4em;
  padding-bottom: 12em;
  background-color: #fff;
}
.text-content-flex-v {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: center;
  gap: 2em;
}


/* =====================================================================
   7. ÚLTIMOS LANZAMIENTOS
   ===================================================================== */
.music-releases {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 0 10px 20px;
  background-color: #fff;
}

.music-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: end;
}

.big-thumb   { aspect-ratio: 1; overflow: hidden; }
.small-thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
  aspect-ratio: 1;
}
.small-item  { aspect-ratio: 1; }

.releases-text {
  grid-area: 1 / 1 / 2 / 2;
  align-self: end;
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  gap: 10px;
  height: 100%;
  aspect-ratio: 1;
  padding: 0 10px;
}
.releases-text h2 { line-height: 1.1; }

.release-empty { aspect-ratio: 1; text-align: left; }
.release-empty img { width: 22px; height: auto; }

/* Enlace de portada con efecto hover */
.music-cover-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  align-self: stretch;
  border-radius: var(--radius--card);
  overflow: hidden;
}
.wrapped-image {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.2s var(--ease--out);
}
.image-wrapper.is-visible .wrapped-image { transform: scale(1); }
.music-cover-link:hover .wrapped-image   { transform: scale(1.08); }

/* Cortina blanca que descubre la imagen al entrar en pantalla */
.cover-wipe {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform-origin: bottom center;
  transition: transform 1s var(--ease--out);
}
.is-visible > .cover-wipe { transform: scaleY(0); }

/* Círculo negro "View" que aparece al pasar el ratón */
.view-button-wrapper {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 2;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 50%;
  margin: auto;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .4s ease, transform .4s var(--ease--out);
  pointer-events: none;
}
.music-cover-link:hover .view-button-wrapper { opacity: 1; transform: scale(1); }

.view-button-small {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 1rem;
  padding: 4rem 2rem;
  color: #fff;
  background-color: #000;
  border-radius: 100%;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1rem;
}

.infos-hover {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: center;
  margin: 20px auto 0;
  padding: 5px 10px;
  color: var(--text--ondarkprimary);
  background-color: #000c;
  border-radius: var(--radius--round-xl);
  font-size: .8rem;
  line-height: 1;
  gap: 6px;
  white-space: nowrap;
}
.view-name-release { display: block; text-align: left; }
.separator         { display: block; text-align: center; }


/* =====================================================================
   8. GALERÍA (fondo negro)
   ===================================================================== */
.home-galery {
  position: relative;
  z-index: 10;
  width: 100%;
  height: auto;
  padding: 10px;
}

.container-galery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  grid-auto-flow: row;
  gap: 10px;
  width: 100%;
  height: 100%;
}

/* Primera foto: ocupa 2 columnas y las 2 filas */
.galery-img-full-height {
  grid-column: span 2;
  grid-row: span 2;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius--card);
  overflow: hidden;
}
/* Fotos cuadradas */
.galery-img-small {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius--card);
  overflow: hidden;
}
/* Foto apaisada: ocupa dos columnas */
.galery-img-half-width {
  grid-column: span 2;
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 2;
  background-color: var(--background--secondary-dark);
  border-radius: 7px;
  overflow: hidden;
}

.image-galery {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 1.4s var(--ease--out);
}
.image-galery.landscape { aspect-ratio: 3 / 2; }
.is-visible > .image-galery { transform: scale(1); }

/* Cortinas oscuras que descubren las fotos */
.card-wipe-h,
.card-wipe-l {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transition: transform 1.1s var(--ease--out);
}
.card-wipe-h.dark,
.card-wipe-l.dark { background-color: var(--background--secondary-dark); }
.card-wipe-h { transform-origin: bottom center; }
.card-wipe-l { transform-origin: right center; }
.is-visible > .card-wipe-h { transform: scaleY(0); }
.is-visible > .card-wipe-l { transform: scaleX(0); }

.home-galery-text-bottom {
  float: right;
  clear: both;
  width: 50%;
  padding: 10px 0;
  font-size: 13px;
  text-align: right;
  text-transform: uppercase;
}


/* =====================================================================
   9. ARTISTAS (fondo negro)
   ===================================================================== */
.live {
  position: relative;
  z-index: 10;
  padding-top: 8em;
  padding-bottom: 8em;
  background-color: #000;
  line-height: 1.1;
}

.collection-list-wrapper-2 { padding-top: 4em; }

.column-collection {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3em;
}
/* Sin esto las columnas se ensanchan con el contenido y la rejilla desborda */
.column-collection > * { min-width: 0; }

.collection-link {
  position: relative;
  display: flex;
  flex-flow: column;
  gap: .6em;
  width: 100%;
  height: 100%;
}

.image-hover {
  position: relative;
  border-radius: var(--radius--card);
  overflow: hidden;
}
.image-5 {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius--card);
  transform: scale(1.06);
  transition: transform 1.2s var(--ease--out);
}
.image-hover.is-visible .image-5 { transform: scale(1); }
.collection-link:hover .image-5  { transform: scale(1.05); }

.fsize-medium.artists {
  color: var(--background--primary-light);
  font-size: 2em;
}
.collection-item-title { margin-top: .3em; }

.desc, .desc-music { display: flex; align-items: center; gap: 7px; }
.short-desc        { font-size: 1.1rem; line-height: 1.4; }
.short-desc.home   { color: var(--background--primary-light); }

.bottom-button-wrapper.center {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 3em;
  width: 100%;
  margin-top: 5em;
  overflow: hidden;
}


/* =====================================================================
   10. TIENDA
   ===================================================================== */

/* Título gigante que se queda pegado al fondo de la ventana */
.sticky-store-title {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: 10px 10px 5px;
  background-color: #fff;
}

.store-title {
  position: relative;
  z-index: 5;
  width: 100%;
  min-width: 100%;
  height: 14.2em;
  min-height: 12em;
  margin-bottom: 4px;
  background-color: var(--background--secondary-light);
  border-radius: var(--radius--card);
  text-align: center;
  overflow: hidden;
}

.label-page-title {
  display: block;
  font-size: 1em;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}
.label-page-title.store-label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6.3em;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  transition: width 1.4s var(--ease--out);
}
.label-page-title.store-label.is-visible { width: 100%; }

/* Cinta naranja en diagonal */
.store-feature-label {
  position: absolute;
  top: 40px;
  left: -143px;
  padding: 8px 140px;
  background-color: var(--color--store-banner);
  font-size: 13px;
  font-weight: 800;
  line-height: 20px;
  text-transform: uppercase;
  transform: rotate(-45deg);
}

.huge-store-title {
  position: relative;
  display: block;
  height: auto;
  font-size: 12em;
  font-weight: 800;
  line-height: 67%;
  letter-spacing: -14px;
  text-transform: uppercase;
}

/* Listado de productos: pasa por encima del título pegajoso */
.store {
  position: relative;
  z-index: 10;
  width: 100%;
  min-width: 100%;
  padding: 0 10px;
  background-color: #fff;
}

.home-big-item {
  position: relative;
  margin: 0 auto 4px;
  padding: 100px 25% 2em;
  background-color: var(--background--secondary-light);
}

.product-collection-grid-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.product-small-item { background-color: var(--background--secondary-light); }
.product-item.small-item {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 3.5em 15%;
  overflow: hidden;
}

.product-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-flow: column;
  gap: 1em;
}

.product-item-title {
  position: relative;
  z-index: 2;
  font-size: 2.2em;
  text-align: center;
  letter-spacing: normal;
  transition: opacity .3s ease;
}
.store-title-link:hover .product-item-title { opacity: .55; }

.product-item-details {
  position: relative;
  z-index: 2;
  color: #6b6b6b;
  font-family: var(--font--main);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}

/* Pastilla amarilla de precio: al pasar el ratón muestra "BUY" */
.price-wrap {
  position: relative;
  z-index: 2;
  width: 150px;
  height: 44px;
  margin: 0 auto;
  padding: 5px 20px;
  background-color: var(--color--price);
  border: 1px solid var(--color--price);
  border-radius: 70px;
  overflow: hidden;
}
.product-item-price,
.product-item-buy {
  position: relative;
  width: 100%;
  font-weight: 600;
  line-height: 29px;
  text-align: center;
  transition: transform .4s var(--ease--out);
}
.product-item-buy { font-weight: 700; }
.price-wrap:hover .product-item-price,
.price-wrap:hover .product-item-buy { transform: translateY(-100%); }

.prodcut-img-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-self: center;
  justify-content: center;
  width: auto;
  margin: 0 auto;
  aspect-ratio: 3 / 2;
}
.product-item-thumb {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s var(--ease--out);
}
.product-item-thumb.is-visible { opacity: 1; transform: translateY(0); }


/* =====================================================================
   11. NEWSLETTER
   ===================================================================== */
.newsletter {
  position: sticky;
  bottom: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60vh;
  color: #fff;
  background-color: #000;
}

.newsletter-content {
  position: relative;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  max-width: 750px;
  color: #fff;
}

.heading-newsletter {
  padding-bottom: 20px;
  font-size: 60px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

.paragraph-newsletter {
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}

.newsletter-form-wrap { padding-top: 20px; }

.form-newsletter { display: flex; flex-flow: column; gap: 10px; }

.newsletter-textfield {
  min-width: 300px;
  min-height: 50px;
  padding: 9px 12px;
  color: #fff;
  background-color: #000;
  border: 1px solid #fff;
  font-size: 1.1rem;
}
.newsletter-textfield::placeholder { color: #ffffff8a; }
.newsletter-textfield:focus {
  background-color: #130202;
  outline: 1px solid #fff;
  outline-offset: -1px;
}

.newsletter-btn {
  min-height: 35px;
  color: #000;
  background-color: #fff;
  border: 4px solid #fff;
  border-radius: 0;
  font-weight: 700;
  transition: background-color .3s ease, color .3s ease;
}
.newsletter-btn:hover { background-color: #dbdbdb; border-color: #dbdbdb; }

/* Campo trampa contra robots: fuera de la vista y del recorrido con el
   tabulador, pero presente en el formulario para que los robots lo rellenen.
   No se usa display:none porque muchos robots ignoran esos campos. */
.campo-trampa {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
}

.checkbox-field { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; }
.checkbox       { margin-top: 4px; }
.checkbox-label { font-size: 14px; font-weight: 400; line-height: 1.4; }

.success-message {
  margin-top: 10px;
  padding: 14px 16px;
  background-color: #ffffff14;
  border: 1px solid #ffffff4a;
  font-size: 1rem;
  text-align: center;
}
.success-message.error { border-color: var(--color--cart-notification); }


/* =====================================================================
   12. PIE DE PÁGINA
   ===================================================================== */
.footer {
  position: relative;
  z-index: 2;
  height: 100%;
  background-color: var(--background--primary-dark);
}

.container-footer {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0 60px 40px;
}

.line-separator-footer {
  position: relative;
  width: 100%;
  height: 1px;
  margin-bottom: 4em;
  background-color: #ffffff4a;
}

.footer-content {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
  gap: 2px;
  margin-bottom: 4em;
}

.footer-details {
  grid-column: span 2;   /* ocupa las dos primeras columnas */
  display: flex;
  flex-flow: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
}
.footer-logo-wrapper { display: flex; flex-flow: column; align-self: flex-start; }
.footer-logo-link    { padding: 0 10px 10px 0; }
.footer-logo         { height: 75px; width: auto; margin-bottom: 10px; }
.fsize-tiny.small-text-footer { width: 60%; color: var(--text--ondarksecondary); line-height: 1.5; }

.footer-links-list { display: flex; flex-flow: column; gap: 10px; }
.footer-link-item  { position: relative; display: inline-block; padding: 5px 0; color: #fff; }
.footer-link-text {
  display: inline-block;
  color: var(--text--ondarktertiary);
  line-height: 1.3;
  transition: color .375s ease;
}
.footer-link-item:hover .footer-link-text { color: #fff; }

.credits {
  display: flex;
  justify-content: space-between;
  padding-top: 40px;
  border-top: 1px solid #ffffff4a;
}
.made-by-text { color: var(--text--ondarkprimary); }


/* =====================================================================
   13. PÁGINAS INTERIORES (Music · Artists · Contact · Call · Legales)
   ===================================================================== */

/* --- Contenedor general de las páginas interiores --- */
.page-wrapper {
  position: relative;
  z-index: 10;
  margin-top: 8em;          /* deja hueco a la barra fija */
  padding-bottom: 12em;
  background-color: #fff;
}

.music-list { position: relative; }

/* --- Bloque de título (etiqueta pequeña + titular gigante) --- */
.page-title-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 4em;
  overflow: hidden;
}
.title-content {
  position: relative;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-bottom: 3em;
}
.title-text-wrapper { display: flex; flex-flow: column; align-self: center; }

/* Cada línea del título vive en una "máscara" para que el texto
   pueda entrar deslizándose desde abajo sin desbordar */
.mask-title { display: inline-block; overflow: hidden; }

/* --- Fichas de las rejillas de Music y Artists --- */
.collection-item-title { margin-top: .2em; }
.fsize-xxsmall { font-size: 1.875em; line-height: 1; letter-spacing: normal; }

/* En Music y Artists las portadas son cuadradas (como en el original);
   la sección de artistas de la home usa 3/2 con la clase .image-5 */
.collection-link .image-wrapper { aspect-ratio: 1; height: auto; }
.collection-link .wrapped-image { aspect-ratio: 1; }
.collection-link:hover .wrapped-image { transform: scale(1.05); }

/* --- Página de contacto --- */
.about-page-content {
  display: grid;
  grid-template-columns: 1.25fr .5fr;
  gap: 16px;
  margin-bottom: 8em;
}
.artist-content { display: flex; flex-flow: column; gap: 1em; }
.musician-resume { display: flex; flex-flow: column; gap: 1em; width: 70%; }
.stream-infos { display: flex; flex-flow: column; gap: 1em; }
.contact-infos { margin-bottom: 1em; }
.f-allcaps.fsize-xxsmall.contacto { font-size: 1.75em; }

/* Enlace subrayado que pierde el subrayado al pasar el ratón */
.textlink-button {
  display: inline-flex;
  align-self: flex-start;
  padding: .5em 0 .25em;
  color: #000;
  border-bottom: 1px solid #000;
  font-size: 1.2rem;
  font-weight: 500;
  transition: border-color .45s cubic-bezier(.645, .045, .355, 1);
}
.textlink-button:hover { border-bottom-color: transparent; }

/* --- Marquesina de texto en movimiento --- */
.scrolling-text { position: relative; }
.marquee-container {
  position: relative;
  z-index: 10;
  width: 100%;
  background-color: #fff;
  overflow: hidden;
}
.ticker-inner {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: marquee 26s linear infinite;
}
.ticker-text {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-right: 16px;
  font-family: var(--font--main);
  font-size: 5vw;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -4px;
  text-transform: uppercase;
  white-space: nowrap;
  /* Letras huecas con borde gris, como en el original */
  color: transparent;
  -webkit-text-stroke: 1px #a5a5a5;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- Página de la convocatoria (Call) --- */
.f-allcaps.fweight-extrabold.call {
  font-size: 4em;
  text-align: center;
  word-break: normal;
}
.call-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 15px;
  padding-bottom: 15px;
}
.button.call {
  justify-content: center;
  align-items: center;
  margin: 15px 0;
  padding-left: 30px;
  padding-right: 30px;
  font-size: 1.1rem;
}
.text-block-7 { font-size: 1.1rem; line-height: 1.4; }
.list  { margin-bottom: 0; padding: 30px 0 30px 1.4em; list-style-type: square; }
.list.listado { list-style-type: decimal; }
.list-4 { margin: 0; padding-left: 1.4em; list-style-type: disc; }
.list li, .list-4 li { margin-bottom: .4em; }

/* --- Texto largo (convocatoria y páginas legales) --- */
.rich-text h2 { font-size: 1.8em; line-height: 1.6; margin-top: 1em; }
.rich-text h3 { font-size: 1.6em; line-height: 1.6; margin-top: 1em; }
.rich-text p  { line-height: 1.4; }
.rich-text li { font-size: 1.1rem; line-height: 1.4; }

/* --- Páginas legales --- */
.page-wrapper.legal { padding-bottom: 6em; }
.container-7 {
  display: flex;
  flex-flow: column;
  gap: 1em;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 4em;
}
.heading-h1 { color: var(--background--primary-dark); margin-bottom: 20px; font-size: 3em; }
.heading-h2.legal { font-size: 2.5em; text-align: left; margin-top: .8em; }
.heading-h3.legal { font-size: 2em; margin-top: .6em; }
.container-7 p  { line-height: 1.5; }
.container-7 ul { padding-left: 1.4em; list-style: disc; }
.container-7 li { font-size: 1.1rem; line-height: 1.5; margin-bottom: .4em; }
.container-7 a  { text-decoration: underline; }


/* =====================================================================
   14. FICHAS DE DETALLE (un artista · un álbum)
   ===================================================================== */

/* Bloque superior: imagen a la izquierda, datos a la derecha */
.content-top-release {
  display: flex;
  align-items: stretch;
  gap: 20px;
  margin-bottom: 4em;
}

.release-img-wrap {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius--card);
  overflow: hidden;
}
.image-cover {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
/* Cortina blanca que descubre la imagen al entrar en pantalla */
.card-wipe-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform-origin: bottom center;
  transition: transform 1s var(--ease--out);
}
.is-visible > .card-wipe-cover { transform: scaleY(0); }

.release-content {
  position: relative;
  width: 70%;
  padding-left: 40px;
}

/* Enlace «volver» */
.back-link {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  width: 175px;
  margin-bottom: 10px;
  padding: 3px 5px;
  font-size: .8rem;
  text-transform: uppercase;
}
.back-link:hover { text-decoration: underline; }
.image-2 { width: 12px; object-fit: contain; }

.album-title-wrap { padding-bottom: 2em; }

/* Lista de datos (artistas, formato, fecha, disponibilidad) */
.release-info-list {
  display: flex;
  flex-flow: column;
  gap: 13px;
  padding-bottom: 20px;
}
.release-info-item { display: flex; flex-flow: column; gap: 5px; }
.release-info-item.artists { padding-top: 1px; }
.label-release-info { font-size: 1.2rem; font-weight: 700; }
.release-info { flex-flow: wrap; font-size: 1.1rem; font-weight: 400; }
.release-info a { text-decoration: underline; }
.release-info.link { padding-top: 3px; word-break: break-all; }
.collection-list { display: flex; flex-flow: wrap; gap: 16px; }

/* Iconos de plataformas de escucha */
.streaming-availability { padding-bottom: 20px; }
.stream-icons-release { display: flex; gap: 15px; padding-top: 10px; }
.img-stream-icons.idagio { width: 95%; max-width: 95%; }

/* Bloque inferior: biografía / descripción / programa / vídeo */
.bottom-content-release { display: flex; justify-content: space-between; }
.free-content { width: 100%; height: 100%; }
.cross-title {
  display: flex;
  flex-flow: column;
  gap: 14px;
  padding-top: 80px;
}
.rich-text-block { text-align: justify; }
.rich-text-block p { line-height: 1.5; }
.free-content .rich-text p { margin-bottom: .9em; line-height: 1.5; }
.free-content .rich-text ol { padding-left: 1.4em; list-style: decimal; }
.free-content .rich-text li { font-size: 1.1rem; line-height: 1.6; }
.fsize-medium.artist { margin-top: 1.2em; margin-bottom: .6em; }

/* Vídeo de YouTube: se adapta al ancho manteniendo 16:9 */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: .5em;
  border-radius: var(--radius--card);
  overflow: hidden;
}
.video-embed iframe { width: 100%; height: 100%; border: 0; }

/* Discografía al pie de la ficha de artista */
.cross-collection { position: relative; z-index: 2; padding-top: 2em; }
.cross-collection .column-collection { padding-top: 2em; }
.collection-item-title .fsize-small { font-size: 1.4em; line-height: 1.3; }


/* =====================================================================
   15. ANIMACIONES DE ENTRADA
   ===================================================================== */

/* Texto que sube desde abajo (titular del hero) */
[data-reveal-up] {
  display: block;
  transform: translateY(110%);
  transition: transform 1.1s var(--ease--out);
}
[data-reveal-up].is-visible { transform: translateY(0); }


/* =====================================================================
   16. RESPONSIVE
   ===================================================================== */

/* ---------- Tablet y menos (≤ 991px) ---------- */
@media screen and (max-width: 991px) {

  body { font-size: .9rem; }
  h1 { font-size: 5.2em; }
  h2 { font-size: 4.5em; }
  h3 { font-size: 3.9em; }
  h5 { font-size: 2.7em; }
  h6 { font-size: 2em; }

  .fsize-large   { font-size: 2.7em; }
  .fsize-medium  { font-size: 2em; }
  .fsize-xlarge  { font-size: 2.8em; }
  .fsize-xxlarge { font-size: 3.4em; }
  .fsize-huge    { font-size: 4.5em; }
  .fsize-display { font-size: 5.2em; }

  .container { padding-left: 2em; padding-right: 2em; }

  /* --- Navegación móvil --- */
  .navbar { border-radius: 0; }
  .container-navbar { position: relative; padding-left: 15px; padding-right: 15px; }

  .menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    padding: 10px;
    border-radius: 117em;
  }

  /* Márgenes automáticos a ambos lados => el logo queda centrado */
  .logo-brand { z-index: 300; margin-left: auto; margin-right: auto; }

  /* El panel del menú cuelga justo por debajo de la barra */
  .menu-content {
    position: absolute;
    top: 100%; left: 0; right: 0;
    z-index: 299;
    display: block;
  }

  .nav-menu {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: auto;
    margin: 10px 0 0;
    padding: 4em 2em 0;
    background-color: #fff;
    border-radius: var(--radius--card);
    /* Cerrado por defecto: se despliega con el botón hamburguesa */
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: max-height .5s var(--ease--out), opacity .35s ease,
                padding .5s var(--ease--out), visibility .5s;
  }
  .nav-menu.is-open {
    max-height: 100vh;
    padding-top: 4em;
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
  }

  .nav-link {
    display: block;
    width: 100%;
    flex: 1;
    padding: .5em 1em .5em .5em;
    color: #000;
    font-size: 2.1em;
    text-align: left;
    border-bottom: 1px solid #7474741f;
    overflow: hidden;
  }
  .nav-link.w--current { padding-top: .7em; padding-bottom: .7em; border-bottom-color: #6969691f; }

  .button {
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    margin-left: 0;
    padding-left: 20px;
    font-size: 2.1rem;
  }
  .button.light.center { font-size: 1.1rem; }

  /* En el menú móvil el selector va arriba del todo, más grande */
  .lang-switch { align-self: flex-start; margin: 0 0 1em; padding: 4px; }
  .lang-opt    { padding: 10px 20px; font-size: 1.1rem; }

  .menu-icons {
    display: inline-flex;
    flex-flow: column;
    align-items: center;
    align-self: flex-start;
    justify-content: center;
    width: 100%;
    margin-top: 4em;
    padding: 2em;
    background-color: var(--background--secondary-light);
    border-top-left-radius: var(--radius--card);
    border-top-right-radius: var(--radius--card);
  }
  .stream-social-menu-list { display: flex; align-items: center; gap: 1em; }

  .background-burger-navigation.is-open { display: block; }

  /* --- Hero --- */
  .hero { padding-top: 83px; padding-bottom: 10px; }
  .hero-tagword { font-size: 1.3rem; }
  .hero-heading { font-size: 4.5em; }
  .hero-feature-music { width: auto; margin-bottom: 20px; margin-right: 20px; }
  .hero-feat-stream-content { align-items: flex-start; }

  /* --- Secciones --- */
  .introduction { padding-bottom: 2em; }
  .music-grid   { grid-template-columns: 1fr; }
  .column-collection { grid-template-columns: 1fr 1fr; }

  .home-galery-text-bottom { width: 100%; }

  .sticky-store-title { position: relative; z-index: 2; }
  .label-page-title.store-label { height: 7.4em; }
  .huge-store-title { font-size: 9.4em; top: 9px; }
  .product-item-title { font-size: 1.9em; }

  .newsletter { position: relative; height: 40vh; padding-left: 40px; padding-right: 40px; }
  .heading-newsletter { font-size: 50px; }

  /* --- Fichas de detalle --- */
  .content-top-release { flex-flow: column; }
  .release-content { width: 100%; padding-left: 0; }
  .release-img-wrap { width: 100%; }
  .cross-collection .column-collection { grid-template-columns: 1fr 1fr; }

  /* --- Páginas interiores --- */
  .page-wrapper { margin-top: 7em; }
  .page-title-wrapper { overflow: visible; }
  .column-collection { grid-template-columns: 1fr 1fr; }
  .about-page-content { grid-template-columns: 1fr; grid-template-rows: auto auto; margin-bottom: 2em; }
  .artist-content { padding-bottom: 1em; }
  .musician-resume { width: 100%; }
  .container-7 { padding-left: 2em; padding-right: 2em; }
  .heading-h1 { font-size: 2.4em; }
  .heading-h2.legal { font-size: 1.9em; }
  .heading-h3.legal { font-size: 1.6em; }

  .footer-content { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .footer-details { padding-bottom: 60px; }
  .footer-links-list { padding-bottom: 40px; }
  .container-footer { padding: 0 50px 100px; }
  .footer-link-item { font-size: 1.1rem; }
}


/* ---------- Móvil grande (≤ 767px) ---------- */
@media screen and (max-width: 767px) {

  body { font-size: .8rem; }
  h1 { font-size: 4.5em; }
  h2 { font-size: 4em; }
  h3 { font-size: 3.6em; }
  p  { font-size: 1rem; line-height: 1.3em; }

  .fsize-medium  { font-size: 2em; letter-spacing: -1px; }
  .fsize-xlarge  { font-size: 3.2em; }
  .fsize-xxlarge { font-size: 3.6em; }
  .fsize-huge    { font-size: 4em; }
  .fsize-display { font-size: 4.5em; }

  .hero-tagword { font-size: 1.2rem; letter-spacing: -.5px; }
  .hero-heading { font-size: 4em; letter-spacing: -5px; }
  .hero-feature-music {
    left: 0; right: 0;
    max-width: 390px;
    margin: 0 auto 20px;
  }

  .music-releases { height: auto; }
  .release-empty  { text-align: right; }

  .column-collection { grid-template-columns: 1fr; }

  .column-collection { grid-template-columns: 1fr; }
  .bottom-content-release { flex-flow: column; }
  .cross-title { padding-top: 40px; }
  .f-allcaps.fweight-extrabold.call { font-size: 3em; }

  .store-title { height: 12.5em; }
  .store-feature-label { top: 26px; left: -147px; font-size: 11px; line-height: 14px; }
  .huge-store-title { font-size: 6.6em; letter-spacing: -11px; top: -20px; }
  .label-page-title.store-label { height: 10em; }

  .product-collection-grid-list { grid-template-columns: 1fr; }

  .heading-newsletter { font-size: 40px; }

  .footer-link-item { font-size: 1rem; }
}


/* ---------- Móvil (≤ 479px) ---------- */
@media screen and (max-width: 479px) {

  h1 { font-size: 4em; }
  h2 { font-size: 3.5em; }
  h5 { font-size: 2.6em; }

  .fsize-large   { font-size: 2.7em; }
  .fsize-medium  { font-size: 2em; }
  .fsize-xlarge  { font-size: 3.2em; }
  .fsize-huge    { font-size: 3.5em; }
  .fsize-display { font-size: 4em; }

  .container { padding-left: 1em; padding-right: 1em; }
  .container-7 { padding-left: 1em; padding-right: 1em; }
  .content-top-release { margin-bottom: 2em; }
  .cross-collection .column-collection { grid-template-columns: 1fr; }
  .f-allcaps.fweight-extrabold.call { width: 100%; font-size: 2.5em; }
  /* El titular "Contact" es muy ancho: se reduce achicando su máscara */
  .mask-title.title-contact { font-size: .5rem; }
  .ticker-text { font-size: 3.7em; letter-spacing: 0; line-height: 1.2; }
  .title-content { padding-bottom: 20px; }
  .heading-h1 { font-size: 2em; }
  .heading-h2.legal { font-size: 1.6em; }

  /* El logo pasa a la derecha y la hamburguesa a la izquierda */
  .container-navbar { flex-flow: row-reverse; padding-left: 10px; padding-right: 10px; }
  .image { height: 32px; padding: 0; }
  .logo-brand { padding: 3px 0 3px 50px; }
  .menu-button { padding-left: 0; padding-right: 0; }
  .burger-bottom-line { width: 32px; }

  .hero { padding-top: 75px; }
  .hero-tagword { letter-spacing: -.3px; }
  .hero-heading { font-size: 1.7em; letter-spacing: -2px; }
  .hero-feature-music { width: 100%; min-width: 260px; max-width: 330px; }
  .hero-feat-stream-content { width: 100%; }
  .image-wrapper-hero-album { width: 100%; height: 100%; }
  .feature-hero-item { justify-content: flex-start; }

  .music-grid  { grid-template-columns: 1fr; }
  .small-thumbs { grid-template-columns: 1fr; grid-template-rows: auto; aspect-ratio: auto; }
  .releases-text { aspect-ratio: auto; }
  .release-empty { aspect-ratio: auto; display: none; }
  .view-button-small { font-size: .7em; padding: 3rem 1.5rem; }
  .view-button-wrapper { font-size: .7em; }

  /* La galería pasa a bloques apilados: 1 grande arriba, 2 cuadradas
     en fila y la apaisada abajo */
  .galery-img-full-height { grid-column: span 4; grid-row: span 1; aspect-ratio: 1; }
  .galery-img-small       { grid-column: span 2; }
  .galery-img-half-width  { grid-column: span 4; }

  .store-title { height: 8.3em; min-height: auto; }
  .store-feature-label { top: 23px; left: -145px; padding-top: 5px; padding-bottom: 5px; font-size: .5625em; line-height: 10px; }
  .huge-store-title { font-size: 4.2em; letter-spacing: -7px; top: 9px; }
  .label-page-title.store-label { height: 6em; padding: 0 100px; font-size: .8em; }
  .home-big-item { padding-left: 5%; padding-right: 5%; }
  .product-item.small-item { padding: 3.5em 5% 10%; }
  .product-item-details { font-size: 1rem; }

  .newsletter { height: 100%; padding: 6em 20px 3em; }
  .newsletter-content { width: 100%; padding: 0 10px; }
  .newsletter-textfield { min-width: 55%; }
  .newsletter-form-wrap { width: 100%; padding: 0; }
  .heading-newsletter { font-size: 30px; }
  .paragraph-newsletter { font-size: .9rem; }

  .streaming-icons { align-self: center; }
  .credits { flex-flow: column; gap: 9px; }
  .container-footer { padding-left: 10px; padding-right: 10px; }
  .footer-logo-wrapper { align-self: center; }
  .footer-logo-link { align-self: center; }
  .fsize-tiny.small-text-footer { width: 100%; align-self: center; font-size: .9em; text-align: left; }
}