/* Los Gatos (colección otoño-invierno 26/27) */
.lg-hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--header-h) + 4vh) var(--pad) 8vh;
}
.lg-hero__lead { position: absolute; left: var(--pad); bottom: var(--pad); color: var(--muted); font-size: clamp(15px, 1.3vw, 20px); }
.lg-hero__logo { margin: 0; width: min(78vw, calc((100svh - var(--header-h) - 14vh) * 1.5)); }
.lg-hero__logo img { display: block; width: 100%; height: auto; }
.js .lg-hero__logo img { animation: lg-in 1.6s cubic-bezier(.22, 1, .36, 1) .2s both; }
.js .lg-hero__lead { animation: lg-fade 1.2s ease 1s both; }
@keyframes lg-in { from { opacity: 0; transform: translateY(5vh) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes lg-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js .lg-hero__logo img, .js .lg-hero__lead { animation: none; } }

.notebook__title { font-size: clamp(40px, 8vw, 150px); line-height: 1; padding: 22vh var(--pad) 8vh; }

/* Tarjetas de texto del cuaderno */
.card--note { grid-auto-flow: row; }
.card--note:nth-child(odd) { background: #141414; }
.card--note:nth-child(even) { background: #1a1a1a; }
.note {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--pad);
  align-content: start; padding: calc(var(--pad) * 1.4) var(--pad) var(--pad); min-height: 0;
}
.note__title { grid-column: 1 / span 7; font-size: clamp(36px, 6.4vw, 120px); line-height: 1; font-weight: 400; margin: 0; }
.note__by { color: #fff; margin: 0 0 .5em; }
.note__text p { margin: 0; }
.note__text { grid-column: 9 / span 4; align-self: start; padding-top: .6em; color: var(--muted); font-size: clamp(16px, 1.3vw, 21px); margin: 0; }
@media (max-width: 899px) {
  .note { display: block; }
  .note__title { font-size: clamp(34px, 10vw, 60px); margin-bottom: 14px; }
}

.lg-cta { padding: 16vh var(--pad) 12vh; border-top: 1px solid var(--line); }
.lg-cta__link { display: inline-block; font-size: clamp(48px, 10vw, 190px); line-height: .95; transition: color .35s; }
.lg-cta__link:hover { color: var(--muted); }
.lg-cta__credit { margin-top: 8vh; color: var(--muted); font-size: 14px; }

/* Cómo suena Madrid */
.sounds { padding: 16vh var(--pad) 12vh; }
.sounds__title { font-size: clamp(40px, 8vw, 150px); line-height: 1; }
.sounds__lead { margin-top: 2.4vh; color: var(--muted); font-size: clamp(16px, 1.4vw, 22px); }
.sounds__list { list-style: none; margin: 8vh 0 0; padding: 0; border-top: 1px solid var(--line); }
.sound { border-bottom: 1px solid var(--line); transition: opacity .4s; }
.sound__btn {
  width: 100%; text-align: left;
  display: grid; grid-template-columns: 76px 13rem 1fr auto 44px; align-items: center; gap: var(--pad);
  padding: 16px 0;
}
.sound__thumb { width: 76px; height: 76px; border-radius: 10px; overflow: hidden; background: #111; }
.sound__thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: grayscale(.4); transition: opacity .5s, filter .5s, transform .8s var(--ease); }
.sound__time { color: var(--muted); font-size: clamp(15px, 1.2vw, 19px); }
.sound__name { font-size: clamp(24px, 3.6vw, 64px); line-height: 1.05; transition: padding-left .6s var(--ease); }
.sound__name small { display: block; margin-top: 8px; color: var(--muted); font-size: clamp(14px, 1.1vw, 18px); }
.sound__play {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4);
  position: relative; transition: background .35s, border-color .35s;
}
.sound__play::before {
  content: ""; position: absolute; left: 17px; top: 13px;
  border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  transition: border-color .35s;
}
.sound.is-playing .sound__play { background: #fff; border-color: #fff; }
.sound.is-playing .sound__play::before {
  left: 15px; top: 14px; width: 14px; height: 16px; border: 0;
  background: linear-gradient(90deg, #000 0 4px, transparent 4px 10px, #000 10px 14px);
}
.sound__eq { display: flex; align-items: flex-end; gap: 3px; height: 22px; opacity: 0; transition: opacity .4s; }
.sound__eq i { width: 3px; height: 100%; background: #fff; transform-origin: bottom; transform: scaleY(.2); }
.sound.is-playing .sound__eq { opacity: 1; }
.sound.is-playing .sound__eq i { animation: eq 1s ease-in-out infinite; }
.sound.is-playing .sound__eq i:nth-child(2) { animation-duration: 1.35s; animation-delay: -.3s; }
.sound.is-playing .sound__eq i:nth-child(3) { animation-duration: .85s; animation-delay: -.6s; }
.sound.is-playing .sound__eq i:nth-child(4) { animation-duration: 1.2s; animation-delay: -.1s; }
@keyframes eq { 0%,100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }
.sound.is-playing .sound__thumb img { opacity: 1; filter: none; transform: scale(1.08); }
@media (hover: hover) {
  .sounds__list:hover .sound { opacity: .35; }
  .sounds__list .sound:hover, .sounds__list .sound.is-playing { opacity: 1; }
  .sound__btn:hover .sound__thumb img { opacity: 1; filter: none; }
  .sound__btn:hover .sound__name { padding-left: 10px; }
}
.sound__btn:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }
.js .sound { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s var(--ease); }
.js .sound.is-in { opacity: 1; transform: none; }
@media (hover: hover) { .js .sounds__list:hover .sound.is-in { opacity: .35; } .js .sounds__list .sound.is-in:hover, .js .sounds__list .sound.is-in.is-playing { opacity: 1; } }
@media (max-width: 899px) {
  .sound__btn { grid-template-columns: 60px 1fr 40px; grid-template-areas: "t time play" "t name play" "t eq play"; gap: 2px 14px; }
  .sound__thumb { grid-area: t; width: 60px; height: 60px; }
  .sound__time { grid-area: time; font-size: 14px; }
  .sound__name { grid-area: name; font-size: clamp(22px, 6.4vw, 30px); }
  .sound__eq { grid-area: eq; height: 14px; }
  .sound__play { grid-area: play; width: 40px; height: 40px; }
  .sound__play::before { left: 15px; top: 11px; }
  .sound.is-playing .sound__play::before { left: 13px; top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .sound.is-playing .sound__eq i { animation: none; transform: scaleY(.6); } }

/* Català-Roca */
.cr { padding: 18vh 0 10vh; border-top: 1px solid var(--line); }
.cr > p, .cr > h2 { padding-left: var(--pad); padding-right: var(--pad); }
.cr__eyebrow { color: var(--muted); font-size: clamp(15px, 1.2vw, 19px); margin: 0; }
.cr__title { font-size: clamp(56px, 12vw, 230px); line-height: .92; margin: 3vh 0 0; }
.cr__dates { margin: 3vh 0 0; color: var(--muted); font-size: clamp(16px, 1.4vw, 22px); }
.cr__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--pad); padding: 10vh var(--pad) 4vh; }
.cr__text { grid-column: 6 / span 6; }
.cr__text p { margin: 0 0 1.3em; font-size: clamp(18px, 1.55vw, 26px); line-height: 1.38; max-width: 30em; }
.cr__text .cr__quote { color: var(--muted); }
.cr__more { margin: 2vh 0 0; font-size: clamp(16px, 1.4vw, 22px); }
.cr__more a { display: inline-block; }
.cr__credit { margin: 10vh 0 0; color: var(--muted); font-size: 14px; }

.js .cr [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s var(--ease); }
.js .cr [data-reveal].is-in { opacity: 1; transform: none; }
@media (max-width: 899px) {
  .cr__grid { display: block; padding-top: 8vh; }
}
@media (prefers-reduced-motion: reduce) { .js .cr [data-reveal] { opacity: 1; transform: none; transition: none; } }