/* ============================================================
   site.css — structure and layout only.
   All colors/fonts/spacing come from tokens.css.
   ============================================================ */

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

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

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

body {
  margin: 0;
  position: relative;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: var(--space-xs) var(--space-sm);
  background: var(--band-yellow-bg);
  color: var(--color-text);
}
.skip-link:focus { left: var(--space-sm); top: var(--space-sm); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--text { max-width: var(--container-text); }

.section { padding-block: var(--section-padding); }
.section--alt { background: var(--color-bg-alt); }
.section--dark {
  background: var(--color-dark);
  color: var(--color-on-dark);
  --color-heading: var(--color-on-dark);
  --color-text: var(--color-on-dark);
  /* --band-title is substituted at :root, so it inherits as black and
     would disappear here. It needs its own override, not just a new
     --color-heading. */
  --band-title: var(--color-on-dark);
}

/* --- Colour bands ------------------------------------------
   A full-bleed strip in one of the three band colours. The
   band's own heading uses --band-title; anything else inside
   inherits a readable foreground. Set the pair with
   .band--teal / .band--red / .band--yellow from tokens.css.
   ------------------------------------------------------------ */

.band {
  background: var(--band-bg);
  padding-block: var(--band-padding);
  /* Live title-only bands are 124px whether or not they carry a button.
     Ours came out 120 without one and 127 with, because .section-head
     aligns on the baseline. The 124 is the 1440 figure — at 390 the same
     band measures 81.5, so it scales between the two. */
  min-height: clamp(81.5px, 65.714px + 4.0476vw, 124px);
}
.band > .section-head,
.band .section-head { align-items: center; }


.band .eyebrow {
  line-height: 1;
  margin-bottom: 0;
}

/* A band with an eyebrow is 139px live against 124px for title-only, so it
   cannot carry the same padding as one without. */
.band:has(.eyebrow) { padding-block: clamp(6px, 0.7vw, 10px); }

/* A quote strip is a fixed-height band with the text vertically centred,
   rather than padding-driven like the title bands. */
.band--quote {
  display: flex;
  align-items: center;
  min-height: var(--band-quote-h);
  padding-block: 0;
}
.band--quote-lg .quote { font-size: var(--fs-quote-lg); }

.band__title {
  font-family: var(--font-display);
  font-size: var(--fs-band-title);
  line-height: var(--lh-band-title);
  text-transform: uppercase;
  color: var(--band-title);
  margin: 0;
}

/* A banded section leads with the strip and ends flush on the last row:
   live puts ~28px between band and grid and nothing after it. Sections that
   close a run get explicit trailing space instead — :last-of-type would key
   off the element type rather than the class and hit the wrong section. */
.section--banded { padding-block: 0; }
.section--banded--tail { padding-bottom: 37px; }
.band .section-head { margin-bottom: 0; }
.section--banded .album-grid { margin-top: 49px; }


/* Accordion rows on /acerca are yellow bands rather than ruled lines.
   Live puts a 1px white border on BOTH the item and the trigger, so the
   yellow blocks are separated by a 2px hairline, not a gap. Row height
   comes from the label's own line box (32 * 1.4) plus 6px of padding:
   6 + 44.8 + 6 + 1 = 57.8 for the trigger, 58.8 for the item. */
.accordion__item[class*="band--"] {
  border-bottom: var(--accordion-rule);
  margin-bottom: 0;
}
.accordion__item[class*="band--"] .accordion__trigger {
  background: var(--band-bg);
  border-bottom: var(--accordion-rule);
  min-height: 0;
  padding: var(--accordion-pad-y) var(--accordion-pad-x);
  gap: var(--accordion-pad-x);
}
.accordion__item[class*="band--"] .accordion__trigger:hover {
  color: var(--color-text);
}
.accordion__item[class*="band--"] .accordion__trigger:hover .accordion__icon::before,
.accordion__item[class*="band--"] .accordion__trigger:hover .accordion__icon::after {
  background: var(--color-text);
}

/* --- Type ------------------------------------------------- */

.display,
.heading-xl,
.heading-lg,
.heading-md {
  font-family: var(--font-display);
  color: var(--color-heading);
  text-transform: uppercase;
  margin: 0;
}

.display    { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
.heading-xl { font-size: var(--fs-h1); line-height: var(--lh-heading); }
.heading-lg { font-size: var(--fs-h2); line-height: var(--lh-heading); }
.heading-md { font-size: var(--fs-h3); line-height: var(--lh-heading); }

.eyebrow {
  font-family: var(--font-script);
  font-size: var(--fs-script);
  line-height: var(--lh-script);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: none;
  color: var(--band-title);
  margin: 0 0 var(--space-xs);
}

.prose p { margin: 0 0 var(--space-sm); }
.prose p:last-child { margin-bottom: 0; }

.quote {
  font-family: var(--font-display);
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
  color: var(--band-title);
  margin: 0;
  text-transform: uppercase;
}

/* --- Buttons ---------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-button);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  /* Live's padding is a fixed box, not em-based, so the button does not
     grow with the label. */
  padding: var(--btn-pad);
  min-height: var(--btn-min-height);
  border: 1px solid currentColor;
  border-radius: var(--btn-radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}
/* Live sizes these two buttons off their grid column rather than their
   label — 48.48% and 54.81% of it — which lands at 177/212 at 1440 and
   99/101 at 390. Reproduced as explicit widths since the surrounding
   layout here is not that grid. */
.btn--bio  { width: clamp(99px, 70.03px + 7.43vw, 177px); }
.btn--disc {
  width: clamp(101px, 59.77px + 10.571vw, 212px);
  font-size: var(--fs-button-sm);
}
/* /acerca's button: live measures 211.5 wide at 1440 and 92.4 at 390 —
   the same box as --disc at desktop but narrower at mobile, where its band
   is also inset less (17.6 against the 27 gutter). Without a width the
   label set on one line and ran 43 past the viewport at 390. */
.btn--label-sm {
  width: min(212px, 47.98px + 11.3905vw);
  font-size: var(--fs-button-sm);
}

/* Below 768 the label sets solid: live wraps "VER DISCOGRAFIA COMPLETA"
   onto two 11.68px lines inside a 32.5px box. */
@media (max-width: 750px) { .btn { line-height: 1; } }

.btn:hover,
.btn:focus-visible {
  background: currentColor;
  color: var(--btn-invert, var(--color-bg));
}
.btn--solid { background: var(--band-red-bg); color: var(--color-on-dark); border-color: var(--band-red-bg); }
.btn--solid:hover,
.btn--solid:focus-visible { background: transparent; color: inherit; border-color: currentColor; }
.btn[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

/* --- Header ----------------------------------------------- */

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 100;
  background: transparent;
  color: var(--color-nav);
  min-height: var(--header-height);
}

/* Pages with no hero would put white type on white, so they get a dark
   bar in normal flow instead of the transparent overlay. */
.site-header--solid {
  position: relative;
  background: var(--color-dark);
}

.site-header__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nav-offset);
  padding-top: var(--wordmark-top);
  padding-inline: var(--gutter);
}

.site-header__brand {
  font-family: var(--font-script);
  font-size: var(--fs-wordmark);
  line-height: var(--lh-script);
  letter-spacing: var(--tracking-label);
  text-transform: none;
  text-decoration: none;
  color: var(--color-nav);
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--nav-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link {
  font-family: var(--font-display);
  font-size: var(--fs-nav);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-nav);
  padding-block: var(--space-2xs);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}
.site-nav__link:hover,
.site-nav__link:focus-visible { border-bottom-color: var(--color-nav-active); }
.site-nav__link[aria-current="page"] {
  color: var(--color-nav-active);
  border-bottom-color: var(--color-nav-active);
}

/* The live nav is inline at every width, so the toggle never shows. */
.nav-toggle { display: none; }

/* --- Hero ------------------------------------------------- */

.hero { position: relative; }

.hero__media {
  width: 100%;
  aspect-ratio: var(--hero-ratio, 16 / 8);
  object-fit: cover;
}

/* Crop positions found by correlating the live capture against the original
   image: for each, which window of the source the live site actually shows.
   Wix crops server-side with a focal point, so a centre crop shows a
   different part of the photo entirely — the studio shot scored 76 centred
   and 18 aligned. */
.hero__media { object-position: var(--hero-pos, 50% 50%); }
.hero--home        { --hero-pos: 50% 39%; }
.hero--acerca      { --hero-pos: 50% 1%; }
.hero--contacto    { --hero-pos: 50% 9%; }
.hero--discografia { --hero-pos: 50% 50%; }

.figure--wide img { object-position: var(--fig-pos, 50% 50%); }

/* Ratios measured off the live site at 390px and 1440px. */
.hero--home         { --hero-ratio: var(--hero-home-sm); }
.hero--acerca       { --hero-ratio: var(--hero-acerca-sm); }
.hero--discografia  { --hero-ratio: var(--hero-discografia-sm); }
.hero--contacto     { --hero-ratio: var(--hero-contacto-sm); }

@media (min-width: 751px) {
  .hero--home        { --hero-ratio: var(--hero-home-lg); }
  .hero--acerca      { --hero-ratio: var(--hero-acerca-lg); }
  .hero--discografia { --hero-ratio: var(--hero-discografia-lg); }
  .hero--contacto    { --hero-ratio: var(--hero-contacto-lg); }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--gutter);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 60%);
}

/* --- Social icon rows -------------------------------------- */

.social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each link lives in an <li>. As an inline-level box it sits on the text
   baseline, and the line box reserves descender space below it — about 5px
   of phantom gap under every icon. Making the <li> a flex container drops
   the baseline behaviour entirely, and also stops the list inheriting the
   body font-size into a line box taller than the fixed-size child. */
.social > li,
/* The footer rows carry a line-height pitch, so they stay block; the card's
   link row must not, or the inline anchor adds a line box on top of the
   icon (26.8 against live's 22 at 390). */
.album-card__links > li { display: flex; }
.site-footer__list > li { display: block; }

.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}
.social__link:hover,
.social__link:focus-visible { border-color: var(--color-nav-active); color: var(--color-nav-active); }
.social__link svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }

/* Vertical rail down the hero's left edge. The live marks are white
   discs with the glyph knocked out to the photo behind; a dark glyph on
   a white disc reads the same at this size without per-icon masking. */
.social--rail {
  position: absolute;
  left: var(--rail-left);
  bottom: var(--rail-bottom);
  flex-direction: column;
  gap: var(--rail-gap);
  margin: 0;
}
.social--rail .social__link {
  width: var(--rail-size);
  height: var(--rail-size);
  background: none;
  border: 0;
  /* The knockout symbol paints the disc in currentColor and masks the
     glyph out to the photograph behind it, so the link itself stays
     transparent and the svg fills the whole box. */
  color: #fff;
}
.social--rail .social__link:hover,
.social--rail .social__link:focus-visible { color: var(--color-nav-active); background: none; }
.social--rail .social__link svg { width: 100%; height: 100%; }

/* The footer marks are plain glyphs, not the bordered discs used elsewhere:
   live runs 22px icons on a 10px gutter (182px for the six of them, one
   row), dropping to 16px/5px below 768. At the disc size they overflow the
   280px column and wrap onto a second row. */
.site-footer .social { gap: 5px; }
.site-footer .social__link {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 0;
}
.site-footer .social__link svg { width: 100%; height: 100%; }
@media (min-width: 751px) {
  .site-footer .social { gap: 10px; }
  .site-footer .social__link { width: 22px; height: 22px; }
}

/* --- Wide figure --------------------------------------------
   The Exitos photo renders 1263x520 on the live site: wider than the
   1200px column and cropped to a 2.43 ratio rather than shown at the
   source's natural 1.55. --------------------------------------- */

.figure--wide {
  max-width: var(--fig-w);
  margin-inline: auto;
}

/* Live runs these figures straight into the band below with no gap, so the
   section they sit in must not add its bottom padding. */
.section:has(> .figure--wide) { padding-bottom: 0; }
.figure--wide img {
  width: 100%;
  aspect-ratio: var(--fig-ratio);
  object-fit: cover;
  display: block;
}

/* Each measured off the live capture at 1440. */
/* Live gives this photo's section a min-height and bottom-aligns the image
   in it, so the air above scales with the viewport rather than being a
   fixed section padding. Expressed here as the figure's own top padding
   (min-height minus image height, at live's own breakpoints), capped once
   the figure stops growing at --fig-w. */
.figure--exitos {
  --fig-w: 1262px; --fig-ratio: 1262 / 526; --fig-pos: 50% 29%;
  padding-top: 3.72vw;
}
@media (min-width: 751px)  { .figure--exitos { padding-top: 3.46vw; } }
@media (min-width: 1001px) { .figure--exitos { padding-top: min(5.677vw, 81.8px); } }
.section:has(> .figure--exitos) { padding-top: 0; }
.figure--studio { --fig-w: 1340px; --fig-ratio: 1340 / 592; --fig-pos: 50% 0%; }

/* --- Video embed ------------------------------------------- */

.video {
  max-width: var(--video-max);
  margin-inline: auto;
}
.video iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--video-ratio, 16 / 9);
  border: 0;
}

/* Ratios measured per page; both modifiers set --video-ratio on the same
   element the iframe reads it from, so the cascade resolves cleanly. */
.video--home   { --video-ratio: var(--video-home-sm); }
.video--acerca { --video-ratio: var(--video-acerca-sm); }

@media (min-width: 751px) {
  .video--home   { --video-ratio: var(--video-home-lg); }
  .video--acerca { --video-ratio: var(--video-acerca-lg); }
}

/* --- Section header --------------------------------------- */

.section-head {
  display: flex;
  /* Live keeps the heading and its button side by side all the way down to
     390 rather than stacking them, so the row must not wrap. */
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  /* Measured from live: 31.6 under the head at 1440, 15.6 at 390. */
  margin-bottom: clamp(15.6px, 9.657px + 1.5238vw, 31.6px);
}
.section-head > .btn { flex-shrink: 0; }
/* Live sets the eyebrow solid against the display line below it. */
.section-head .eyebrow { margin-bottom: 0; }

/* --- Album grid ------------------------------------------- */

.album-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 751px)  { .album-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1001px) {
  /* Desktop column count differs per discography section on the live
     site — 4-up for Fruko, 5-up for La Verdad and Recopilatorios. */
  .album-grid,
  .album-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .album-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  /* Row pitch measured against live: 4-up runs 1.75px tall per row and
     5-up 4.5px, because the narrower 5-up card wraps more titles than the
     live one does. Corrected on the row gap so the covers stay aligned. */
  /* Row gap carries the pitch: live is 456 for 4-up. Set from the section
     arithmetic (live band-to-band span / row count) rather than the card,
     because a grid row sizes to its tallest card and the 5-up titles wrap
     unevenly. */
  /* Set so the ROW PITCH matches live (4-up 456; 5-up 384/413 alternating
     with the title wrap). Tuning these from section totals instead made the
     ends line up while every row inside drifted. */
  /* Live's card runs cover 307.7, year 34.6, title 34.6 and a 26px link
     row, 416 in all, on a 456 pitch — so the gap is 40. The earlier 77 came
     from measuring the card as if it ended at the title. */
  .album-grid--4 { row-gap: 40px; }
  /* 5-up: 348.5 card on a 383.5 pitch. Rows whose title wraps grow on
     their own to live's alternate 413. */
  .album-grid--5 { row-gap: 35px; }
}
/* The home page runs a narrower album grid than /discografia does: live is
   1122px wide with 258px cards and a 28px gutter here, against 1262/297 on
   the discography. Both pages share .album-grid--4, so the home variant
   needs its own hook rather than a section selector. */
.album-grid--home {
  /* 2-up below 768: cards 137 at 36px gutter, the row inset 33px from the
     container's left edge — live is asymmetric here, not centred. */
  grid-template-columns: repeat(2, 35.128vw);
  column-gap: 9.231vw;
  row-gap: 5.128vw;
  margin-left: 8.462vw;
}
@media (min-width: 751px) {
  .album-grid--home {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: var(--grid-gap);
    margin-left: 0;
  }
}
@media (min-width: 1001px) {
  .album-grid--home {
    /* Live holds a flat 1122 above its 1000 breakpoint, which is exact at
       1200 and 1440 but spills 11px off each edge at 1100 (measured x-11).
       min() keeps live's width wherever it fits and falls back to the
       column instead of clipping. Tracks are fractions of the grid, so the
       cards stay at live's 258.5 on a 28 gutter at 1440. */
    width: min(1122px, 100%);
    margin-inline: auto;
    grid-template-columns: repeat(4, 23.0392%);
    column-gap: 2.4955%;
    row-gap: 1.9444vw;
    justify-content: center;
  }
}

/* Live sizes the card box independently of its content: a fixed 349.375px
   at 1440 and 224.8 at 390, with the cover/year/title stack (332 and 199)
   sitting at the top and slack below. Row pitch comes from the box, so the
   gap to the next band is wrong without it. */
.album-grid--home .album-card { min-height: 57.641vw; gap: 0; }
.album-grid--home .album-card__cover { aspect-ratio: 1 / 1.026; }
.album-grid--home .album-card__year {
  line-height: var(--lh-card);
  /* Home runs the year flush under the cover at 1440 and 2.4 below it at
     390 — the opposite ramp to /discografia's 4.1 / 0. */
  margin-top: clamp(0px, 3.29px - 0.2286vw, 2.4px);
  margin-top: clamp(0px, -1.523px + 0.2848vw, 4.1px);
  margin-bottom: clamp(-3.2px, -3.553px + 0.0905vw, -2.25px);
}
.album-grid--home .album-card__title { line-height: var(--lh-card); }
@media (min-width: 751px)  { .album-grid--home .album-card { min-height: 0; } }
@media (min-width: 1001px) { .album-grid--home .album-card { min-height: 24.2622vw; } }

/* Below 768 the home covers bleed 24px past the card's left edge (live runs
   the inner box at 116.33% with a negative margin) and the year and title
   centre on the bled box rather than the card. */
@media (max-width: 750px) {
  .album-grid--home .album-card {
    margin-left: -6.154vw;
    width: calc(100% + 5.744vw);
  }
  .album-grid--home .album-card__cover {
    width: 98.925%;
    aspect-ratio: 1 / 1.0242;
  }
  .album-grid--home .album-card__year,
  .album-grid--home .album-card__title { align-self: center; }
  .album-grid--home .album-card__title { line-height: 1.2; }
}


/* No gap: live's cover/year/title spacing is carried by the year's own
   margins, including the negative one that pulls the title into it. */
.album-card { display: flex; flex-direction: column; gap: 0; }

.album-card__cover {
  width: 100%;
  /* Live's covers are not square: 297x307.7 at 1440, 143.9x149.1 at 390. */
  aspect-ratio: 297 / 307.7;
  object-fit: cover;
  background: var(--color-surface);
}

.album-card__year {
  font-family: var(--font-display);
  font-size: var(--fs-card);
  /* The year and title share one 1.4 line box on live and the title is
     pulled up into the year's rather than spaced away from it — the same
     on /discografia as on the home page. Measured 34.7/34.7 with a -2.3
     overlap at 1440, 22.4/17.6 at 390. */
  line-height: var(--lh-card);
  margin-top: clamp(0px, -1.523px + 0.2848vw, 4.1px);
  margin-bottom: clamp(-3.2px, -3.553px + 0.0905vw, -2.25px);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-text-muted);
}

.album-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-card);
  line-height: var(--lh-card);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-heading);
  margin: 0;
}

/* Live's link row: 26px marks on a 10 gutter, 11.3 under the title and
   left-aligned at 1440; 22px, 5.1 under it and centred in the card at 390.
   The card totals 416 at 1440 and 213 at 390 with this row included. */
.album-card__links {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: clamp(5.1px, 2.798px + 0.5905vw, 11.3px) 0 0;
  padding: 0;
  justify-content: center;
}
@media (min-width: 751px) { .album-card__links { justify-content: flex-start; } }

/* Live album links are 27px brand-coloured marks with no ring — measured off
   the capture, where the Spotify glyph samples as its brand green #1ED760. */
.album-card__links .social__link {
  /* 26 at 1440, 22 at 390. */
  width: clamp(22px, 20.514px + 0.38095vw, 26px);
  height: clamp(22px, 20.514px + 0.38095vw, 26px);
  border: 0;
  background: none;
}
.album-card__links .social__link svg { width: 100%; height: 100%; }
.social__link--spotify    { color: #1ed760; }
.social__link--applemusic { color: #fa243c; }
.album-card__links .social__link:hover,
.album-card__links .social__link:focus-visible { opacity: 0.75; background: none; }

/* --- Bio accordion ---------------------------------------- */

.accordion { border-top: 1px solid var(--color-border); }

.accordion__item { border-bottom: 1px solid var(--color-border); }

/* Each trigger is wrapped in an <h3> for the document outline; its
   default margin would otherwise add ~4px to the measured 14px gap. */
.accordion__item > h3 { margin: 0; }

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  background: none;
  border: 0;
  color: var(--band-title);
  font-family: var(--font-display);
  font-size: var(--fs-accordion);
  line-height: var(--lh-accordion);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.accordion__icon {
  flex: none;
  width: var(--accordion-icon);
  height: var(--accordion-icon);
  position: relative;
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  background: var(--color-text);
  border-radius: 0.7px;
  transition: transform var(--duration-fast) var(--ease);
}
.accordion__icon::before {
  inset: 50% 0 auto;
  height: var(--accordion-icon-stroke);
  transform: translateY(-50%);
}
.accordion__icon::after {
  inset: 0 auto 0 50%;
  width: var(--accordion-icon-stroke);
  transform: translateX(-50%);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: translateX(-50%) scaleY(0); }

.accordion__panel {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
}
.accordion__panel[hidden] { display: none; }

@media (max-width: 750px) {
  .accordion__panel { grid-template-columns: 1fr; gap: var(--space-md); }
}

/* --- Awards ----------------------------------------------- */

/* Live keeps this three-up at every width in a 1121px grid, and puts the
   award's name in grey above a same-size black description -- both in the
   display face, not a small muted caption. The block's trailing space is a
   min-height on the section, not padding. */
.awards-block {
  /* 581 is the 1440 figure; at 390 the same block measures 304, so it
     scales rather than holding a desktop constant at every width. */
  min-height: clamp(304px, 201.114px + 26.381vw, 581px);
  padding-top: 22.5px;
}

.awards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  width: 96.36%;
  max-width: 1121px;
  margin: 28px auto 0;
  list-style: none;
  padding: 0;
}

.award__image {
  aspect-ratio: 1 / 1.026;
  object-fit: cover;
  width: 100%;
  display: block;
}
.award__title {
  font-family: var(--font-display);
  font-size: var(--fs-award);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 -2.25px;
}
.award__text {
  font-family: var(--font-display);
  font-size: var(--fs-award);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--color-heading);
  margin: 0;
}

@media (min-width: 751px) {
  .awards { width: auto; max-width: 689px; row-gap: 36px; column-gap: 28px; }
}
@media (min-width: 1001px) {
  .awards { max-width: 1121px; gap: 28px; }
}

/* --- Bio split (/acerca) -------------------------------------
   Portrait runs to the left viewport edge, text sits in the right
   half. Measured at 1440: image 0-720, text 760-1348.
   ------------------------------------------------------------- */

.bio-split {
  display: grid;
  grid-template-columns: 1fr;
}

.bio-split__media img { width: 100%; height: 100%; object-fit: cover; }

/* The right half is two stacked blocks, not one padded box: the text
   carries the padding, the accordion runs edge to edge underneath it and
   sits flush with the bottom of the section. Padding coefficients are
   live's own (0.0625 / 0.046875 / 0.034375 of the viewport). */
.bio-split__body {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.bio-split__intro { padding: 10.256vw 10.256vw 6.154vw; }

/* The bio intro sets its own type rather than inheriting the global scale:
   live's title is 3.906vw on a 1.0 line box (one line at 1440, where the
   band titles are 61.875/1.3), and the copy is a fixed 16px/1.6 whose
   paragraphs are separated by a full blank line instead of a margin. */
.bio-split__intro .display {
  font-size: var(--fs-bio-title);
  line-height: 1;
  margin-bottom: 2.809vw;
}
.bio-split__intro .prose {
  margin-top: 0;
  font-size: var(--fs-bio-body);
  line-height: var(--lh-bio-body);
}
.bio-split__intro .prose p { margin: 0; }
.bio-split__intro .prose p + p { margin-top: calc(1em * var(--lh-bio-body)); }
.bio-split .accordion {
  margin-top: 0.996vw;
  border-top: 0;
}

@media (min-width: 751px) {
  .bio-split__intro { padding: 7.813vw; }
}

@media (min-width: 751px) {
  .bio-split { grid-template-columns: 1fr 1fr; column-gap: 0; align-items: stretch; }
}

@media (min-width: 1001px) {
  .bio-split__intro { padding: 5.453vw 6.25vw 3.438vw 4.688vw; }
}

/* --- Contact split (/contacto) -------------------------------
   Teal info panel occupies the left half, form the right.
   Measured at 1440: panel 0-720, full height.
   ------------------------------------------------------------- */

.contact-split { display: grid; grid-template-columns: minmax(0, 1fr); }

.contact-split__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--band-bg);
  color: var(--color-on-dark);
  padding: calc(var(--section-padding) - 10px) var(--info-pad-r)
           calc(var(--section-padding) - 10px) var(--info-pad-l);
}
.contact-split__info a { color: inherit; }

.contact-split__form { padding: calc(var(--section-padding) - 10px) var(--gutter); }

@media (min-width: 751px) {
  .contact-split { grid-template-columns: 1fr 1fr; }
}

/* --- Split (image + text) --------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
  align-items: center;
}

/* --- Merch ------------------------------------------------ */

.merch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  align-items: center;
}

.merch__badge {
  display: inline-block;
  font-family: var(--font-script);
  font-size: var(--fs-script);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: none;
  color: var(--band-red-bg);
  margin-bottom: var(--space-xs);
}

.merch__price {
  font-family: var(--font-display);
  font-size: var(--fs-page-title);
  color: var(--color-heading);
  margin: var(--space-sm) 0;
}

/* --- Instagram feed --------------------------------------- */

/* The live widget is a full-bleed horizontal carousel, not a grid: square
   tiles, a 12px gutter, ~3.6 visible at 1440 and one at a time below 1200,
   with a next arrow. Geometry lives in tokens.css. */

.ig-strip { position: relative; }

.ig-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--ig-tile);
  gap: var(--ig-gap);
  padding-inline: var(--ig-edge);
  margin: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--ig-edge);
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.ig-carousel::-webkit-scrollbar { display: none; }
.ig-carousel > .ig-tile { scroll-snap-align: start; }

@media (prefers-reduced-motion: reduce) {
  .ig-carousel { scroll-behavior: auto; }
}

.ig-next {
  position: absolute;
  right: clamp(12px, 0.5vw + 8px, 28px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-dark);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease);
}
.ig-next:hover, .ig-next:focus-visible { background: #fff; }
/* [hidden] alone loses to display:flex, so it needs to be explicit. */
.ig-next[hidden] { display: none; }
.ig-next svg { width: 10px; height: 20px; fill: currentColor; transform: scaleX(-1); }

.ig-tile {
  position: relative;
  aspect-ratio: 1;
  background: var(--color-surface);
  overflow: hidden;
}
.ig-tile img { width: 100%; height: 100%; object-fit: cover; }

.ig-empty {
  border: 1px dashed var(--color-border);
  padding: var(--space-lg);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* --- Contact form ----------------------------------------- */

.form { display: grid; gap: var(--space-md); }

/* Live never collapses this row: it is two columns at 390 (110 each on a
   38 gutter, in a 272 form) just as at 1440 (243.6 each, in a 539.3 form).
   auto-fit with a 220 minimum was dropping to one column below ~478 and
   turning a three-row form into five. */
.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 38px;
}

.field { display: grid; gap: var(--space-2xs); }

.field__label {
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-label);
  text-transform: none;
  color: var(--color-text);
}

.field__input,
.field__textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--color-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding: var(--space-xs) 0;
  transition: border-color var(--duration-fast) var(--ease);
}
.field__input:focus,
.field__textarea:focus { border-bottom-color: var(--color-focus); outline: none; }
.field__textarea { min-height: 8rem; resize: vertical; }

/* Honeypot — must stay rendered and reachable by a scraper, just never by
   a person. display:none and type="hidden" are both filtered out by most
   bots, which defeats the point, so it is moved off-screen instead.
   tabindex="-1" keeps it out of the keyboard tab order and aria-hidden
   keeps it out of the accessibility tree. */
.honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status { font-size: var(--fs-small); color: var(--color-text-muted); margin: 0; }
.form__status[data-state="error"] { color: var(--color-error); }
.form__status[data-state="success"] { color: var(--color-focus); }

/* --- Footer ----------------------------------------------- */

.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-on-dark);
  border-top: 1px solid var(--color-border-dark);
  padding-block: 0;
}

.site-footer__grid { display: contents; }

.site-footer__brand {
  overflow-wrap: anywhere;
  font-family: var(--font-script);
  font-size: var(--fs-wordmark-lg);
  line-height: var(--lh-wordmark-lg);
  text-transform: none;
  letter-spacing: var(--tracking-label);
  color: var(--color-on-dark);
  margin: 0;
}

.site-footer__title {
  font-family: var(--font-display);
  font-size: var(--fs-footer-title);
  line-height: var(--lh-footer);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-on-dark);
  margin: 0 0 var(--space-sm);
}

.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

.site-footer__link {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-label);
  text-decoration: none;
  color: var(--color-on-dark);
}
.site-footer__link:hover,
.site-footer__link:focus-visible { color: var(--color-nav-active); }

.site-footer__legal {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-legal);
  text-transform: uppercase;
  color: var(--color-on-dark);
}

/* --- Utilities -------------------------------------------- */

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

.stack > * + * { margin-top: var(--space-sm); }
.stack-lg > * + * { margin-top: var(--space-lg); }
.text-muted { color: var(--color-text-muted); }

/* --- /acerca Exitos copy -------------------------------------
   Live separates these paragraphs with a blank line rather than a
   margin, and offsets the block and its video from the band above by
   its own coefficients (25.7 / 24.75 / 65.25 at 1440). The section
   itself has no bottom padding, so the trailing space is the video's.
   ------------------------------------------------------------- */

.exitos-copy { margin-top: 1.785vw; }
.exitos-copy .prose p { margin-bottom: 0; }
.exitos-copy .prose p + p { margin-top: calc(1em * var(--lh-body)); }
.exitos-copy .video { margin-top: 1.719vw; margin-bottom: 4.531vw; }


/* --- Home page spacing -------------------------------------
   Measured element-to-element against live at 1440 and 390 (see
   scripts/inicio-check.mjs). Scoped to the home page because the
   equivalent gaps on the other pages measure differently.
   ----------------------------------------------------------- */
.hero--home + .section--dark {
  padding-top: clamp(10.4px, 4.68px + 1.4667vw, 25.8px);
  /* Gap to the discography band: 32.7 at 1440 but a wider 53.9 at 390, so
     this ramp runs the other way to the rest. Held entirely here, with the
     banded section's own top padding zeroed below. */
  padding-bottom: clamp(32.7px, 61.774px - 2.019vw, 53.9px);
}
.hero--home + .section--dark + .section--banded { padding-top: 0; }
.video--home { margin-top: clamp(16.8px, -0.88px + 4.5333vw, 64.4px); }
.section--banded .album-grid--home {
  margin-top: clamp(30.5px, 17.203px + 3.4095vw, 66.3px);
}

/* --- Studio photo and quote band, below 768 -----------------
   Live insets this photo rather than running it full bleed —
   363 of 390, on a 1.89 crop instead of the 2.26 it uses at
   1440 — and pads the quote band 13 over / 18.5 under the text
   on a 18/14 inset. All of it measured at 390; above 768 the
   figure goes full width on its own ratio, which is exact.
   ----------------------------------------------------------- */
.section--photo { padding-top: calc(var(--section-padding) - 22px); }

@media (max-width: 750px) {
  .section--photo { padding-top: calc(var(--section-padding) - 19.9px); }
  .figure--studio { max-width: 93.077%; --fig-ratio: 363 / 192.4; }
  .band--quote { padding-block: 13px 18.5px; }
  .band--quote .container { padding-left: 18px; padding-right: 14px; }
}


/* Live runs body copy at 1.4 down to its own 751px breakpoint and 1.3 below
   it — a step, not a ramp: measured 1.400 at 1440/1100/900 and 1.300 at
   700/390. Hence 750 here rather than this stylesheet's usual 768. */
@media (max-width: 750px) { :root { --lh-body: 1.3; } }

/* Live's mobile text column starts at 27, not at the 20px floor of
   --gutter: eyebrow, display, prose and the band titles all measure
   x27-29 at 390. Stepped at 750 like the body leading above. */
@media (max-width: 750px) {
  :root { --gutter: 27px; }
  /* Both of these sit outside that column on live: the video at 18 and
     the album grid at 52, so they pull back out of the wider inset. */
  .video--home { margin-inline: -9px; }
  .section--banded .album-grid--home { margin-left: 6.41vw; }
}

/* Live centres the bio button on the display line rather than sitting it on
   a shared baseline: at 390 its centre lands at 580.7 against the display's
   580.2, and the same at 1440. Measured as an offset from the top of the
   head, which is what flex-start gives. */
.hero--home + .section--dark .section-head > .btn {
  align-self: flex-start;
  margin-top: clamp(46.5px, 38.886px + 1.9524vw, 67px);
}

@media (min-width: 751px) {
  /* Live centres the quote above its own 750 breakpoint and left-aligns it
     below. */
  .quote { text-align: center; }
  /* The bio band's copy is inset 12 inside the content column on live —
     the prose measures 1238 in a 1262 column, 12 each side, and the head
     starts at 101 against the column's 89. The video and album grid sit on
     the column itself, so this goes on the text rather than the container. */
  .hero--home + .section--dark .section-head { margin-left: 6.5px; }
  .hero--home + .section--dark .prose { margin-inline: 6.5px; }
}

/* --- Footer ------------------------------------------------
   Live runs one layout at every width: a 3-column, 2-row grid
   with the sitemap spanning both rows, the wordmark over the
   copyright in column 1, and contact over the social rail in
   column 3. It was previously an auto-fit row here, which
   happened to total the right height at 1440 while every
   column sat in the wrong place.

   Column proportions measured at six widths step twice, on
   Wix's own 750 and 1000 breakpoints:
       <=750   32.31 / 27.44 / 40.26
       <=1000  38.62 / 28.78 / 32.60
       >1000   41.11 / 28.89 / 30.00
   Row 1 grows with the viewport, is pinned at 148.4 from 800
   to 1200, then grows again; row 2 is a flat 127.5 above 750
   and 116.4 below. Offsets inside the cells are fitted to the
   measured pairs at each end of the band they sit in.

   The legal line is a sibling of __grid rather than a child,
   so the container is the grid and __grid goes display:contents
   to lift its four cells into it.
   ----------------------------------------------------------- */
.site-footer > .container {
  padding-inline: 0;
  max-width: none;
  display: grid;
  grid-template-columns: 38.62% 28.78% 32.60%;
  /* Row 1 is flat at 148.4 up to 1200 and grows above it: a knee, so max()
     carries it with no second breakpoint. */
  grid-template-rows: max(148.4px, calc(64.88px + 6.96vw)) 127.5px;
  gap: 0;
}
.site-footer__grid > :nth-child(1) { grid-area: 1 / 1; }          /* wordmark  */
.site-footer__grid > :nth-child(2) { grid-area: 1 / 2 / span 2; } /* sitemap   */
.site-footer__grid > :nth-child(3) { grid-area: 1 / 3; }          /* contact   */
.site-footer__grid > :nth-child(4) { grid-area: 2 / 3; }          /* social    */
.site-footer__legal                { grid-area: 2 / 1; }

.site-footer__grid > :nth-child(1) { padding: calc(35.43px + 1.4286vw) 0 0 calc(0.37px + 6.5714vw); }
.site-footer__grid > :nth-child(2) { padding: calc(-1px + 5vw)        0 0 calc(-1px + 5.5vw); }
.site-footer__grid > :nth-child(3) { padding: calc(-1px + 5vw)        0 0 calc(-1px + 3.5vw); }
.site-footer__grid > :nth-child(4) { padding: calc(19.97px - 0.7619vw) 0 0 calc(6.49px + 2.9524vw); }
.site-footer__legal                { padding: calc(-0.4px + 1.5vw)   0 0 calc(1px + 6.5vw); }

/* Live carries no heading over the social rail at any width. */
.site-footer__grid > :nth-child(4) .site-footer__title { display: none; }

@media (min-width: 1001px) {
  .site-footer > .container { grid-template-columns: 41.11% 28.89% 30%; }
  .site-footer__grid > :nth-child(2) { padding: calc(1.273px + 4.7727vw) 0 0 calc(-0.545px + 5.4545vw); }
  .site-footer__grid > :nth-child(3) { padding: calc(1.273px + 4.7727vw) 0 0 calc(-0.091px + 3.4091vw); }
  .site-footer__legal                { padding: calc(-1.991px + 1.6591vw) 0 0 calc(0.091px + 6.5909vw); }
}
/* Row 1 is pinned to 148.4 through 1200 and only then grows again. */
@media (max-width: 750px) {
  .site-footer > .container {
    grid-template-columns: 32.31% 27.44% 40.26%;
    grid-template-rows: calc(35.08px + 19.032vw) 116.4px;
  }
  /* Each cell is narrower than its column here: the sitemap runs in 74 of
     its 107, which is what wraps the heading onto two lines. */
  .site-footer__grid > :nth-child(1) { padding: 41px  2px 0 26px; }
  .site-footer__grid > :nth-child(2) { padding: 30px 17px 0 16px; }
  .site-footer__grid > :nth-child(3) { padding: 28px 20px 0  0; }
  .site-footer__grid > :nth-child(4) { padding: 17px  0  0 18px; }
  .site-footer__legal                { padding:  6px 11px 0 32px; }
  /* Live centres the sitemap links in their column at this width and sets
     that heading tighter than the contact one beside it. */
  .site-footer__list { text-align: center; }
  .site-footer__grid > :nth-child(2) .site-footer__title { line-height: 1.2; }
}

/* Sitemap links: live's pitch is pure leading, 22.4 at 1440 and 14.4 at 390,
   on a 14/12 face. The email is a size up from them and set uppercase. */
/* Live puts the 22.4 pitch on the row and leaves the link itself an 18px
   line box, so the leading is spacing between links rather than height on
   each one. */
.site-footer__list > li {
  line-height: clamp(14.4px, 11.429px + 0.7619vw, 22.4px);
}
.site-footer__link {
  font-size: clamp(12px, 11.257px + 0.19vw, 14px);
  line-height: normal;
}
.site-footer__link[href^="mailto:"] {
  font-size: clamp(12px, 10.607px + 0.357vw, 15.75px);
  line-height: 1.6;
  text-transform: uppercase;
}

/* Live sets the label on a band's button white rather than letting it
   inherit the band's own text colour, which reads black here. */
.band .btn { color: var(--color-on-dark); }

/* Live's nav links are a bare line box — 26.5 at 22px, no vertical padding.
   Ours carried --lh-body plus padding and ran 35.5. */
.site-nav__link { line-height: 1.2; padding-block: 0; }

/* Live sets the legal line at normal leading, not the body's 1.4. */
.site-footer__legal { line-height: normal; }


/* Live's section content column starts 5.5 right of centre at 1440 — copy,
   headings and buttons all measure x94.5 against a centred 89 — while band
   content stays on the centred column at 90. Held as an asymmetric gutter so
   the column keeps its 1262 width. */
@media (min-width: 751px) {
  .section > .container {
    padding-left:  calc(var(--gutter) + 5.5px);
    padding-right: calc(var(--gutter) - 5.5px);
  }
}

/* The quote band's copy sits on the shifted column like section content
   does; the title bands stay on the centred one. */
@media (min-width: 751px) {
  .band--quote > .container {
    padding-left:  calc(var(--gutter) + 5.5px);
    padding-right: calc(var(--gutter) - 5.5px);
  }
  /* Media blocks are centred on the unshifted column, so they step back out
     of the section's asymmetric gutter. */
  .album-grid--home,
  .video--home { position: relative; left: -5.5px; }
}

/* Live leaves 10.2 between a footer heading and the list under it at 1440;
   --space-sm was giving 17.3. Mobile already measures right, so this is
   desktop-only. */
@media (min-width: 751px) {
  .site-footer__title { margin-bottom: calc(var(--space-sm) - 7.5px); }
}

/* Live crops this portrait to 390x320 at mobile rather than letting it run
   at the source's own 0.80 ratio, which is 166 taller. */
@media (max-width: 750px) {
  .bio-split__media { aspect-ratio: 390 / 320; }
  .bio-split__media img { height: 100%; }
}


/* The large hero quote is centred at every width, unlike the strip on the
   home page which live left-aligns below 750. */
.band--quote-lg .quote { text-align: center; }

/* Live centres the award captions and runs the three columns 108 wide on a
   10 gutter at 390; ours were 84 on a 36 gutter, which rewrapped the text
   and made every card taller. */
.award__title, .award__text { text-align: center; }
@media (max-width: 750px) {
  /* Of the viewport: live's award row is 344 of 390 starting at 23.6, which
     is outside the 27 gutter. */
  .awards { gap: 10px; width: 88.2vw; margin-left: -3.4px; margin-right: 0; }
  /* The exitos copy is a size down from the body default here. */
  .exitos-copy .prose { font-size: 14px; line-height: 19.6px; }
}

/* Band titles below 750: live sets these at 0.9 leading over a 49.4 floor.
   That one rule reproduces all three cases measured — a single-word title
   boxes at 49.4 (home), a two-line one at 68.4 (acerca), a three-line one
   at 102.6 (discografia) — where a flat 1.3 gave 49.4 per line. The grid
   keeps the line box centred in the floor when it does not fill it. */
@media (max-width: 750px) {
  .band__title {
    line-height: 0.9;
    min-height: 49.4px;
    display: grid;
    align-content: center;
  }
}


/* --- /discografia grid -------------------------------------
   Measured against live: the grid sits at x89.8 w1260 at 1440
   and x38.9 w311.8 at 390, on a 24 column gutter at both, and
   opens 13.9 under the band title at 1440 / 53.4 at 390. The
   home grid has its own block above and is excluded here.
   ----------------------------------------------------------- */
.album-grid:not(.album-grid--home) {
  /* Live opens the grid flush with the band at 1440 and 28.5 under it at
     390. */
  margin-top: clamp(0px, 39.086px - 2.7143vw, 28.5px);
  /* Of the viewport, not the container: live's grid is 311.8 of 390 and
     starts at 38.9, which is outside the 27 gutter. */
  width: 79.95vw;
  margin-left: 3.05vw;
}
/* Bounded: unbounded, this outranks the --4/--5 row gaps at 1200+, which
   are less specific in CSS but more specific in intent. */
@media (max-width: 750px) { .album-grid:not(.album-grid--home) { row-gap: 30px; } }
/* Bounded above so this does not outrank the --4/--5 row gaps at 1200+,
   which are more specific in intent but less so in CSS. */
@media (min-width: 751px) { .album-grid:not(.album-grid--home) { width: auto; margin-left: 0; } }
@media (min-width: 751px) and (max-width: 1000px) {
  .album-grid:not(.album-grid--home) { row-gap: var(--grid-gap); }
}
@media (min-width: 1001px) {
  /* Steps back out of the section column's asymmetric gutter, which the
     grid does not follow. */
  .album-grid:not(.album-grid--home) { position: relative; left: -4.7px; }
}

/* Live's card title runs a tighter line box than the year below 768:
   17.6 against the year's 22.4, closing to a shared 34.6 at 1440. */
.album-grid:not(.album-grid--home) .album-card__title {
  line-height: clamp(17.6px, 11.281px + 1.6212vw, 34.6px);
}

/* Band eyebrow at 1440: live measures 49.7 (1.3, like every other eyebrow)
   and overlaps the title under it by 16.3, inside a band that totals 139.
   Ours ran a 38.3 line box with no overlap and made the total up on the
   band's padding — the two errors cancelled in the band height while both
   lines sat in the wrong place. */
/* Live runs it at 1.3 everywhere; only the overlap is desktop-only (at 390
   the eyebrow sits flush on the title with no overlap at all). */
.band .eyebrow { line-height: 1.3; }
@media (min-width: 751px) {
  .band .eyebrow { margin-bottom: -16.3px; }
  .band:has(.eyebrow) { padding-block: 12.6px; }
}

/* Between two consecutive album sections live leaves 51.7 under the last
   card's link row before the next eyebrow; ours left 11.7. Scoped to a
   banded section that is followed by another, so the home page's single
   banded section is untouched. */
.section--banded:has(+ .section--banded) {
  padding-bottom: clamp(29.8px, 26.011px + 0.9714vw, 40px);
}

@media (min-width: 1001px) {
  /* The 5-up cards run a tighter title than the 4-up ones: live's two-line
     title measures 59.4, so 29.7 a line against the 4-up's 34.6. That is
     what makes live's 5-up pitch alternate 383.5 / 413.2. */
  .album-grid--5 .album-card__title { line-height: 29.7px; }
  .album-grid--5 { row-gap: 40px; }
}

@media (max-width: 750px) {
  /* Live opens 26.1 between the display line and the intro copy here; the
     flush 10.9 we had came from the prose carrying no top margin. */
  .bio-split__intro .prose { margin-top: 15.2px; }
  /* And insets this figure to 341.9 of 390 on a 1.84 crop, 22 under the
     accordion, rather than running it full bleed on the 2.4 desktop crop. */
  .figure--exitos {
    max-width: 87.67%;
    --fig-ratio: 341.9 / 186;
    padding-top: 22px;
  }
}


@media (max-width: 750px) {
  /* Remaining acerca gaps, each measured off live at 390: 42.1 between the
     exitos band and its copy, 25.7 before the awards band, and 39.7 between
     that band and the award row. */
  .exitos-copy { margin-top: 30.2px; }
  .band--red:not(.section--banded) + .section--banded { margin-top: 42.1px; }
  .awards { margin-top: 23.4px; }
  /* Live left-aligns the award heading and centres the caption under it. */
  .award__title { text-align: center; }
}


/* Live's form is 272 wide at x64 on mobile, not the full content column. */
@media (max-width: 750px) {
  .form { width: 69.74vw; margin-left: 37px; }
}

/* Live's submit spans the whole form and stands 48.4 tall at both widths —
   539.3x48.4 at 1440, 272x48.4 at 390 — rather than sizing to its label. */
.form button[type="submit"],
.form .btn[type="submit"] {
  width: 100%;
  min-height: 48.4px;
}

/* Live leaves 216.9 under the form before the footer at 390; ours left 22. */
@media (max-width: 750px) {
  .contact-split__form { padding-bottom: 149px; }
}

/* The contact form's heading is not a display line on live: it is a flat
   22/33 label at every width, where .display was rendering it at 61.9. */
.contact-split__form .display {
  font-size: 22px;
  /* The box measures 26.5 on live at both widths, not the 33 its computed
     leading suggests. */
  line-height: 26.5px;
  text-transform: none;
}

@media (max-width: 750px) {
  /* Live sets the footer links in the condensed display face below its
     breakpoint and in the body face above it — 12px Barlow Condensed at
     390 against 14px Krub at 1440. */
  .site-footer__link { font-family: var(--font-display); }
  /* The heading sits on the form's own left edge, not the container's. */
  .contact-split__form .display { margin-left: 37px; }
}


/* The form column opens 65.4 under the hero at 1440 and 33.1 at 390, with
   30.5 between the heading and the first field row — the inline
   margin-top:var(--space-lg) the form carried was 24 too much. */
.contact-split__form { padding-top: clamp(65.4px, 76.92px - 0.8vw, 73.8px); }
.contact-split__form .form { margin-top: 30.5px; }

/* The whole split sits 52 too high at 1440: live opens it that much further
   under the hero. Mobile measures right without it. */
@media (min-width: 751px) { .contact-split { padding-top: 52px; } }


/* Live opens 31.3 between the info heading and its copy at 1440, 8.6 at 390
   — the inline margin-top:var(--space-md) it carried was neither. */
.contact-split__info .prose {
  margin-top: clamp(8.6px, 0.166px + 2.162vw, 31.3px);
}

@media (max-width: 750px) {
  /* The whole info column is centred at this width, its heading a size down
     (33/42.9 against the band default), and its email set in the condensed
     display face at 20/28 uppercase rather than the body face. */
  .contact-split__info { text-align: center; }
  .contact-split__info .band__title {
    font-size: 33px;
    line-height: 42.9px;
    min-height: 0;
  }
}


/* Live's field row is label 17, a 9 gap, then a 33 input, on a 25 row gap —
   84 in all at 390, against the 87.7 ours ran. */
@media (max-width: 750px) {
  .form { gap: 25px; }
  .field { gap: 9px; }
  .field__input { min-height: 33px; padding-block: 0; }
}


/* Live leaves 22.2 between the exitos figure and the band under it at 390;
   ours left 11.9. */
/* :not(.section--banded) all through here: band--red is /acerca's exitos
   section AND /discografia's La Verdad section, and these three rules were
   only ever measured against the first. */
@media (max-width: 750px) { .band--red:not(.section--banded) > .band { margin-top: 11.3px; } }

/* Live's 5-up sections are marginally narrower than the 4-up one when they
   fall back to two columns: 306.8 at x41 against 311.8 at x38.9. */
@media (max-width: 750px) {
  .album-grid--5:not(.album-grid--home) { width: 78.67vw; margin-left: 3.59vw; row-gap: 32.3px; }
}


/* Live sets the contact info column in an off-white, not pure white, and its
   email in the condensed display face at every width. The submit label is a
   flat 22 rather than the shared button ramp. */
.contact-split__info .prose { color: rgb(243, 243, 240); }
.contact-split__info .prose a {
  font-family: var(--font-display);
  /* 22 at 1440, 20 at 390. */
  font-size: clamp(20px, 19.257px + 0.1905vw, 22px);
  line-height: 28px;
  text-transform: uppercase;
}
.form button[type="submit"] { font-size: 22px; }


@media (max-width: 750px) {
  /* Only where a button competes with the title for the row: 24 forced
     /acerca's pair to overflow, and at 10 its title lands on live's 253.2.
     Left alone elsewhere — on /discografia the head holds a social list
     instead, and a wider title there drops a line off every band. */
  .section-head:has(> .btn) { gap: 10px; }
  /* Live insets this band 17.6 / 16.5, not the page gutter. */
  .band--red:not(.section--banded) .band > .container { padding-left: 4.513vw; padding-right: 4.231vw; }
}

/* Inputs carry an intrinsic minimum width, which stopped the form's grid
   from shrinking and pushed the contact split 5px past a 320 viewport. */
.field { min-width: 0; }
.field__input,
.field__textarea { min-width: 0; }


/* The email is one unbreakable token and set the info column's minimum
   width, pushing the split 5px past a 320 viewport. It has room to sit on
   one line at 360 and up, so this only bites at the extreme. */
.contact-split__info .prose a { overflow-wrap: anywhere; }


/* ============================================================
   Long-form pages: /canciones/*, /discografia/* and the two
   legal pages.

   Everything here is generated by render_blocks() in
   scripts/build.py from data/*.json. No page of this type is
   hand-written, so no rule below is tuned to one article.

   Breakpoints are 750 and 1000, the site's only two. The
   reference mockup used 720; it was normalised on the way in,
   along with its Google Fonts link (the three faces are already
   self-hosted in tokens.css, and re-linking them would have
   added a render-blocking request for fonts already on disk)
   and its remote hero URL, which now goes through the manifest.

   Weights available are Barlow Condensed 700 and Krub 500/700.
   The mockup asked for Barlow 400/500/600 and Krub 300/400/600;
   those faces are not on disk and requesting them would only
   get a synthesised approximation, so the type here is built
   from the four real weights.
   ============================================================ */

.container--articulo { max-width: var(--container-text); }

/* --- Article hero ----------------------------------------- */

.articulo-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 62vh;
  background: var(--color-dark);
  overflow: hidden;
}
.articulo-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
/* Scrim, not a filter on the image: the text has to stay legible over any
   photograph in the archive, and several are light at the bottom edge. */
.articulo-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.42) 0%,
    rgba(0, 0, 0, 0.12) 38%,
    rgba(0, 0, 0, 0.74) 100%
  );
}
.articulo-hero__texto {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-xl) var(--gutter) var(--space-lg);
  text-align: center;
  color: var(--color-on-dark);
}
.articulo-hero__kicker {
  font-family: var(--font-display);
  font-size: clamp(11px, 0.6vw + 9px, 13px);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--band-teal-title);
  margin: 0 0 var(--space-sm);
}
.articulo-hero__titulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 8vw, 96px);
  line-height: 0.94;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-on-dark);
  margin: 0;
}
.articulo-hero__sub {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.4vw + 9px, 20px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  margin: var(--space-sm) 0 0;
}

/* --- Sections --------------------------------------------- */

.articulo__seccion { padding-block: var(--space-xl); }
.articulo__seccion--gris { background: var(--color-bg-alt); }
.articulo__seccion--intro { padding-block: var(--space-md); }
.articulo__seccion--portada { padding-block: var(--space-lg); }

.articulo__seccion p {
  font-size: var(--fs-body);
  line-height: 1.62;
  margin: 0 0 var(--space-sm);
}
.articulo__lead { font-size: calc(var(--fs-body) * 1.15); }

.articulo__label {
  font-family: var(--font-script);
  font-size: var(--fs-script);
  line-height: var(--lh-script);
  color: var(--color-heading);
  margin: 0 0 var(--space-2xs);
}
.articulo__h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw + 15px, 40px);
  line-height: 1.14;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 var(--space-md);
}
.articulo__h2--teal   { color: var(--color-teal-aa); }
.articulo__h2--coral  { color: var(--band-red-bg); }
.articulo__h2--dorado { color: var(--band-yellow-title); }

.articulo__h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 0.8vw + 14px, 22px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: var(--space-md) 0 var(--space-xs);
}

.articulo__lista { margin: 0 0 var(--space-sm); padding-left: 1.15em; }
.articulo__lista li { margin-bottom: var(--space-2xs); line-height: 1.55; }

.articulo__dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2xs) var(--space-md);
  margin: 0 0 var(--space-sm);
}
.articulo__dl dt {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted-aa);
  padding-top: 2px;
}
.articulo__dl dd { margin: 0; }

.articulo__cita {
  border-left: 4px solid var(--band-red-title);
  padding: var(--space-2xs) 0 var(--space-2xs) var(--space-md);
  margin: var(--space-md) 0;
}
.articulo__cita p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px, 2.2vw + 13px, 33px);
  line-height: 1.22;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}

.articulo__cta {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 2px solid var(--band-yellow-bg);
  padding-bottom: 3px;
}
.articulo__cta:hover { border-bottom-color: var(--color-text); }

/* --- Byline ----------------------------------------------- */

.byline {
  font-size: 14px;
  color: var(--color-text-muted-aa);
  margin: 0;
}

/* --- Ficha técnica ---------------------------------------- */

.ficha {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: var(--space-md);
  margin: 0 0 var(--space-md);
}
.ficha__titulo {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-dorado-aa);
  margin: 0 0 var(--space-sm);
}
.ficha__dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs) var(--space-md);
  margin: 0;
  font-size: 15px;
}
.ficha__dl dt {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted-aa);
  white-space: nowrap;
  padding-top: 2px;
}
.ficha__dl dd { margin: 0; }

/* --- Tracklist -------------------------------------------- */

.caras {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin: 0 0 var(--space-md);
}
@media (min-width: 751px) {
  .caras { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--space-lg); }
}
.cara__titulo {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--band-red-bg);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-xs);
  margin: 0 0 var(--space-xs);
}
.cara__lista {
  list-style: none;
  counter-reset: pista;
  margin: 0;
  padding: 0;
}
.cara__lista li {
  counter-increment: pista;
  display: grid;
  grid-template-columns: 1.6em 1fr;
  gap: var(--space-xs);
  font-size: 15.5px;
  line-height: 1.45;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border);
}
.cara__lista li::before {
  content: counter(pista);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted-aa);
  padding-top: 3px;
}
.cara__lista li.is-destacada { font-weight: 700; }
.cara__lista li.is-destacada > span { border-bottom: 2px solid var(--band-yellow-bg); }
.cara__lista li em {
  grid-column: 2;
  display: block;
  font-size: 13.5px;
  font-style: normal;
  font-weight: 500;
  color: var(--color-text-muted-aa);
  line-height: 1.45;
  margin-top: 2px;
}

/* --- Data cells ------------------------------------------- */

.datos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  text-align: center;
}
@media (min-width: 751px) {
  .datos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
}
.dato__n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4vw + 20px, 60px);
  line-height: 1;
  color: var(--color-teal-aa);
  margin: 0;
}
.dato__t {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: var(--space-xs) 0 var(--space-2xs) !important;
}
.dato__d {
  font-size: 13.5px !important;
  color: var(--color-text-muted-aa);
  line-height: 1.5;
  margin: 0 !important;
}

/* --- Cover versions --------------------------------------- */

.versiones { list-style: none; margin: 0; padding: 0; }
.versiones li {
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 15.5px;
  line-height: 1.5;
}
.versiones b {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.versiones span { color: var(--color-text-muted-aa); }

/* --- Players ---------------------------------------------- */

.video--articulo { --video-ratio: 16 / 9; margin-block: var(--space-md); }
.reproductor { margin-block: var(--space-md); }
.reproductor iframe {
  display: block;
  width: 100%;
  height: 352px;
  border: 0;
}

/* --- Contribution box ------------------------------------- */

.aporte {
  background: var(--color-dark);
  color: var(--color-on-dark);
  padding: var(--space-md);
  margin-top: var(--space-md);
  text-align: center;
}
.aporte p {
  margin: 0 !important;
  font-size: 15.5px !important;
  color: rgba(255, 255, 255, 0.84);
}
.aporte a { color: var(--band-yellow-bg); }

/* --- Sources ---------------------------------------------- */

.articulo__seccion--fuentes { background: var(--color-bg-alt); }
.articulo__h2--fuentes { font-size: clamp(19px, 1vw + 15px, 26px); }
.fuentes { margin: 0; padding-left: 1.3em; font-size: 14.5px; }
.fuentes li { margin-bottom: var(--space-xs); line-height: 1.5; }
.fuentes__nota {
  font-size: 13.5px !important;
  color: var(--color-text-muted-aa);
  margin-top: var(--space-sm) !important;
}

/* --- Album sheet header ----------------------------------- */

.ficha-cabecera {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: center;
}
@media (min-width: 751px) {
  .ficha-cabecera { grid-template-columns: 200px 1fr; gap: var(--space-lg); }
}
.ficha-cabecera__portada {
  width: 100%;
  max-width: 260px;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.ficha-cabecera__enlaces { margin-top: var(--space-sm); }

/* --- Album cards that link to a sheet --------------------- */

.album-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
/* The only signal that a card leads somewhere. text-decoration is used
   rather than a border or an extra label because underlines do not take
   part in layout: the album grid on /discografia is measured against the
   live site to the pixel, and a 2px border or a second line of type moves
   every row below it. */
.album-card--con-ficha .album-card__title {
  text-decoration: underline;
  text-decoration-color: var(--band-yellow-bg);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.album-card__link:hover .album-card__title { text-decoration-color: var(--color-text); }

/* --- /canciones index ------------------------------------- */

.section--indice { padding-block: var(--space-xl); }

.historias {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 751px)  { .historias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1001px) { .historias { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.historia-card__link { display: block; color: inherit; text-decoration: none; }
.historia-card__img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: var(--space-sm);
}
.historia-card__kicker {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted-aa);
  margin: 0 0 var(--space-2xs);
}
.historia-card__titulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 1.6vw + 16px, 30px);
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0 0 var(--space-xs);
}
.historia-card__resumen {
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 var(--space-xs);
}
.historia-card__mas {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--band-yellow-bg);
  padding-bottom: 2px;
}

/* --- Legal pages ------------------------------------------ */

.section--legal { padding-block: var(--space-xl); }
.display--legal { font-size: clamp(32px, 3.4vw + 20px, 56px); margin-bottom: var(--space-2xs); }
.legal__fecha {
  font-size: 14px;
  color: var(--color-text-muted-aa);
  margin: 0 0 var(--space-lg);
}
.section--legal .articulo__h2 {
  font-size: clamp(19px, 1.2vw + 14px, 27px);
  margin-top: var(--space-lg);
}
.section--legal .articulo__h2:first-of-type { margin-top: 0; }
.section--legal p { font-size: var(--fs-body); line-height: 1.62; margin: 0 0 var(--space-sm); }

/* --- Footer legal links ----------------------------------- */

/* These sit at the end of the "Mapa del sitio" list rather than in a row
   of their own: the footer is a measured 3x2 grid placed by explicit
   grid-area with __grid on display:contents, so any new direct child
   becomes an unplaced grid item and displaces the measured cells. A small
   rule above the first one separates them from the page links without
   adding height to the cell. */
.site-footer__legal-item:first-of-type { margin-top: var(--space-xs); }
.site-footer__legal-item .site-footer__link { opacity: 0.72; }
.site-footer__legal-item .site-footer__link:hover { opacity: 1; }

/* The consent control is a <button>: it reopens Google's privacy message
   rather than navigating. It stays hidden until site.js confirms the
   message API is actually present, so it can never be a dead control. */
.site-footer__consent {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
}

/* --- Narrow-width hardening ------------------------------------------
   Two-column definition lists cannot hold their shape at 320: a label
   like "Correo de contacto" beside an email address is wider than the
   viewport, and the ficha's labels are explicitly nowrap. Both stack
   below the site's lower breakpoint instead of overflowing.

   Long unbroken strings (addresses, emails) get overflow-wrap only in
   the cells that actually carry them, not site-wide -- applying it to
   every link would break ordinary Spanish prose mid-word.
   --------------------------------------------------------------------- */
.articulo__dl dd,
.ficha__dl dd { overflow-wrap: anywhere; }

@media (max-width: 750px) {
  .articulo__dl,
  .ficha__dl {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .articulo__dl dt,
  .ficha__dl dt {
    white-space: normal;
    padding-top: var(--space-xs);
  }
  .articulo__dl dt:first-child,
  .ficha__dl dt:first-child { padding-top: 0; }
}

/* The footer's third column is 40% of a 320px viewport, so the longest
   legal label cannot sit on one line there. Wrapping it is enough; the
   column already has vertical room. */
/* Same reasoning as the mailto rule below: wrapping only, no box change. */
.site-footer__legal-item .site-footer__link { overflow-wrap: anywhere; }

/* A bare URL used as link text ("policies.google.com/technologies/...")
   has no break opportunity and is wider than a 320px viewport. Scoped to
   list items and definition values, which is where the legal pages put
   them -- not to prose links, which wrap on spaces already. */
.articulo__lista a,
.articulo__dl a,
.ficha__dl a { overflow-wrap: anywhere; }

/* Pre-existing, not introduced by this branch: the footer email is a
   single unbreakable token 152px wide in a column that is 129px at 320.
   It overflows on every page of the site at that width.

   overflow-wrap ONLY. An earlier attempt added display:inline-block and
   max-width, which fixed 320 and quietly grew the link's box by 4.7px at
   both 390 and 1440 -- inline-block makes the element's rect the whole
   line box instead of the inline text box, so it moved a measurement
   that had been matched to the live site. Wrapping needs neither. */
.site-footer__link[href^="mailto:"] { overflow-wrap: anywhere; }