/* ═══════════════════════════════════════════════════════════
   El Carmen de Salteras — Rediseño de Vídeos, Repertorio y
   Discografía (fase F)
   ───────────────────────────────────────────────────────────
   Lo que comparten las tres secciones. Las medidas salen de
   ~/Diseños/ElCarmen/rediseno/reglas.md: a 1440 y a 390 son las del
   diseño aprobado; entre medias y por encima, las de abajo.

   TODO VA ACOTADO A `.rd` y lleva el prefijo `rd-`. Los tokens del
   diseño (papel, oro-texto, líneas…) no existen en tokens.css y no se
   añaden allí: viven en `.rd`, así que el resto de la web no se
   entera. Cabecera, pie y barra inferior son los del tema.

   Tres contextos:
     .rd-oscuro  Vídeos   fondo pardo-900, texto pergamino.
     .rd-claro   Repertorio y Discografía   fondo papel.

   Cuatro anchos, los mismos para todas las rejillas:
     xl ≥ 1280   lg 1024–1279   md 768–1023   sm < 768
   El contenedor es min(1280px, 100% − 2·g) con g = 40 / 32 / 20; a
   1440 son exactamente 1280 con 80 de margen.
   ═══════════════════════════════════════════════════════════ */

.rd {
  /* paleta del diseño */
  --rd-oro-400: #F0C64E;
  --rd-oro-500: #E8AD00;
  --rd-oro-600: #C8901E;
  --rd-oro-700: #9E6E12;
  --rd-oro-texto: #8A6010;
  --rd-pardo-900: #2A1709;
  --rd-pardo-800: #3A2010;
  --rd-pardo-700: #522F15;
  --rd-pardo-200: #D9C4AC;
  --rd-papel: #F1E9D8;
  --rd-pergamino: #FAF6EE;
  --rd-tinta-700: #463A2E;
  --rd-tinta-500: #7A6A57;
  --rd-linea-oro: rgba(158, 110, 18, .5);
  --rd-linea-oro-suave: rgba(158, 110, 18, .22);
  --rd-linea-noche: rgba(232, 173, 0, .16);
  --rd-borde-noche: rgba(232, 173, 0, .42);

  --rd-g: 40px;                 /* margen de página */
  --rd-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --rd-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  position: relative;
  padding-bottom: 128px;        /* el margen superior del pie */
  font-family: var(--rd-sans);
  font-style: normal;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}

/* El papel de cada contexto: qué es el texto fuerte, el de párrafo, el
   apagado, el oro de letra y las líneas. */
.rd-claro {
  --rd-fondo: var(--rd-papel);
  --rd-fuerte: var(--rd-pardo-900);
  --rd-cuerpo: var(--rd-tinta-700);
  --rd-tenue: var(--rd-tinta-500);
  --rd-ante: var(--rd-oro-texto);
  --rd-enlace: var(--rd-oro-texto);
  --rd-linea: var(--rd-linea-oro);
  --rd-suave: var(--rd-linea-oro-suave);
  --rd-icono: var(--rd-oro-700);
  --rd-pastilla: var(--rd-pardo-900);
  background: var(--rd-fondo);
  color: var(--rd-fuerte);
}

.rd-oscuro {
  --rd-fondo: var(--rd-pardo-900);
  --rd-fuerte: var(--rd-pergamino);
  --rd-cuerpo: var(--rd-pardo-200);
  --rd-tenue: var(--rd-pardo-200);
  --rd-ante: var(--rd-oro-500);
  --rd-enlace: var(--rd-oro-400);
  --rd-linea: var(--rd-borde-noche);
  --rd-suave: var(--rd-linea-noche);
  --rd-icono: var(--rd-oro-400);
  --rd-pastilla: var(--rd-pergamino);
  background: var(--rd-fondo);
  color: var(--rd-fuerte);
}

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

/* El tema da forma a h1…h3, p, ul y a por su cuenta; dentro de `.rd`
   cada pieza declara lo suyo. */
.rd h1, .rd h2, .rd h3, .rd p, .rd ul, .rd ol, .rd figure { margin: 0; padding: 0; }
.rd ul, .rd ol { list-style: none; }
.rd a { color: inherit; text-decoration: none; }
.rd p { text-wrap: pretty; }
.rd img { display: block; max-width: 100%; }
.rd button { font: inherit; color: inherit; }

.rd-ic { display: block; flex: 0 0 auto; }

.rd-cont {
  width: min(1280px, 100% - 2 * var(--rd-g));
  margin-inline: auto;
}


/* ═══════════════════════════════════════════════════════════
   TIPOGRAFÍA
   ═══════════════════════════════════════════════════════════ */

.rd .rd-ante {
  margin: 0 0 16px;
  font: 700 13px/1 var(--rd-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rd-ante);
}

.rd .rd-h1 {
  font: 800 72px/.98 var(--rd-serif);
  letter-spacing: -.015em;
  color: var(--rd-fuerte);
  text-wrap: balance;
}

.rd .rd-h2 {
  font: 700 32px/1.1 var(--rd-serif);
  letter-spacing: -.01em;
  color: var(--rd-fuerte);
  text-wrap: balance;
}

.rd .rd-lead {
  max-width: 660px;
  font: 400 19px/1.55 var(--rd-sans);
  color: var(--rd-cuerpo);
  text-wrap: pretty;
}

.rd .rd-lead > * + * { margin-top: .8em; }

/* El texto corrido que la ficha de una obra o de un disco trae del
   editor: el mismo cuerpo que la entradilla. */
.rd .rd-texto {
  max-width: 660px;
  font: 400 19px/1.55 var(--rd-sans);
  color: var(--rd-cuerpo);
}
.rd .rd-texto > * { margin: 0; }
.rd .rd-texto > * + * { margin-top: 1em; }
.rd .rd-texto a { color: var(--rd-enlace); text-decoration: underline; text-underline-offset: .18em; }
.rd .rd-texto ul { list-style: disc; padding-left: 1.2em; }
.rd .rd-texto ol { list-style: decimal; padding-left: 1.4em; }
.rd .rd-texto h1, .rd .rd-texto h2, .rd .rd-texto h3, .rd .rd-texto h4, .rd .rd-texto h5 {
  font: 600 22px/1.25 var(--rd-serif);
  color: var(--rd-fuerte);
}
.rd .rd-texto em, .rd .rd-texto i { font-style: normal; font-weight: 600; }
.rd .rd-texto img, .rd .rd-texto iframe { max-width: 100%; height: auto; }

.rd .rd-fil {
  width: 96px;
  height: 3px;
  margin: 28px 0;
  background: var(--rd-oro-500);
}

/* Cabecera de sección: Repertorio, Discografía y los listados de TV. */
.rd .rd-ph { padding: 80px 0 56px; }
.rd .rd-ph .rd-lead { margin-top: 24px; }

/* Miga: «Vídeos › Recorridos › Virgen de la Oliva». */
.rd .rd-miga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 32px 0 0;
  font: 600 14px/1.3 var(--rd-sans);
  color: var(--rd-tenue);
}
.rd .rd-miga b { font-weight: 600; color: var(--rd-fuerte); }
.rd .rd-miga .rd-ic { color: var(--rd-oro-600); }

.rd .rd-cnt {
  font: 600 15px/1.3 var(--rd-sans);
  color: var(--rd-tenue);
}


/* ═══════════════════════════════════════════════════════════
   BOTONES, CHAPAS Y ENLACES CON FLECHA
   ═══════════════════════════════════════════════════════════ */

.rd .rd-bt {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 28px;
  border-radius: 4px;
  font: 700 16px/1 var(--rd-sans);
  letter-spacing: .02em;
}
.rd .rd-bt--oro { background: var(--rd-oro-500); color: var(--rd-pardo-900); }
.rd .rd-bt--lin { border: 1px solid rgba(232, 173, 0, .5); color: var(--rd-pergamino); }

.rd .rd-chs { display: flex; flex-wrap: wrap; gap: 10px; }

.rd .rd-ch {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--rd-linea);
  border-radius: 999px;
  background: none;
  font: 700 14px/1 var(--rd-sans);
  color: var(--rd-pastilla);
  white-space: nowrap;
  cursor: pointer;
}
.rd .rd-ch .rd-ic { margin-right: 8px; color: var(--rd-icono); }

.rd .rd-vt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 15px/1.3 var(--rd-sans);
  color: var(--rd-enlace);
}


/* ═══════════════════════════════════════════════════════════
   TARJETA DE VÍDEO · la imagen destacada del vídeo, tal cual
   ═══════════════════════════════════════════════════════════ */

.rd .rd-vc { display: block; min-width: 0; }

.rd .rd-vc-m {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: var(--rd-pardo-800);
}

.rd .rd-vc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Título completo, dos líneas como mucho y el alto de las dos siempre,
   para que las filas no bailen según lo que diga cada vídeo. */
.rd .rd-vc-t {
  display: -webkit-box;
  height: 44.8px;
  margin-top: 14px;
  overflow: hidden;
  font: 600 16px/1.4 var(--rd-sans);
  color: var(--rd-fuerte);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}


/* ═══════════════════════════════════════════════════════════
   FILA DE VÍDEOS
   ═══════════════════════════════════════════════════════════ */

.rd .rd-fila + .rd-fila { margin-top: 64px; }

.rd .rd-fila-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.rd .rd-fila-acc { display: flex; align-items: center; gap: 20px; }

.rd .rd-fl { display: flex; gap: 8px; }
.rd .rd-fl[hidden] { display: none; }

.rd .rd-fl-b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--rd-linea);
  border-radius: 50%;
  background: none;
  color: var(--rd-icono);
  cursor: pointer;
}
.rd .rd-fl-b:disabled { opacity: .38; cursor: default; }

/* 1440: c columnas iguales (4 en las filas de vídeos: 296), hueco 32.
   `--c` lo pone el PHP; TV v2 cambia el hueco con `--rd-fila-hueco`. */
.rd .rd-fila-lista {
  display: grid;
  grid-template-columns: repeat(var(--c, 4), minmax(0, 1fr));
  gap: var(--rd-fila-hueco, 32px);
}

.rd .rd-vc-item { min-width: 0; }

/* N > c: la misma fila, que se desplaza de c en c. */
.rd .rd-fila--car .rd-fila-lista {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--c, 4) - 1) * var(--rd-fila-hueco, 32px)) / var(--c, 4));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.rd .rd-fila--car .rd-fila-lista::-webkit-scrollbar { display: none; }
.rd .rd-fila--car .rd-vc-item { scroll-snap-align: start; }

/* Menos de 1024: carrusel de tarjetas de 280 con la siguiente asomando,
   saliendo por la derecha; con un vídeo, una tarjeta a todo el ancho.
   Sin flechas y sin bloque de cierre. */
@media (max-width: 1023.98px) {
  .rd .rd-fila-lista,
  .rd .rd-fila--car .rd-fila-lista {
    display: flex;
    gap: 12px;
    margin-right: calc(-1 * var(--rd-g));
    padding-right: var(--rd-g);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .rd .rd-fila-lista::-webkit-scrollbar { display: none; }
  .rd .rd-fila-lista > li { flex: 0 0 var(--rd-car-w, 280px); scroll-snap-align: start; }
  .rd .rd-fila--n1 .rd-vc-item { flex-basis: 100%; }
  .rd .rd-fila-lista > .rd-cie { display: none; }
  .rd .rd-fl { display: none; }
}


/* ═══════════════════════════════════════════════════════════
   BLOQUE DE CIERRE
   ───────────────────────────────────────────────────────────
   Ocupa las columnas que faltan en la última fila, y toda la altura
   de la tarjeta. El tamaño de la tarjeta no cambia nunca.
   ═══════════════════════════════════════════════════════════ */

.rd .rd-cie {
  --s: 1;
  grid-column: span var(--s);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  padding: 32px;
  border: 1px solid var(--rd-linea);
  border-radius: 6px;
}

.rd .rd-cie-a {
  font: 700 12px/1.2 var(--rd-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rd-ante);
}

.rd .rd-cie-t {
  max-width: 520px;
  font: 700 26px/1.15 var(--rd-serif);
  color: var(--rd-fuerte);
  text-wrap: balance;
}

.rd .rd-cie .rd-chs { gap: 8px; }

/* Versión corta: una sola columna. */
.rd .rd-cie--corta { padding: 20px; gap: 10px; }
.rd .rd-cie--corta .rd-cie-t { font-size: 19px; }
.rd .rd-cie--corta .rd-cie-a { font-size: 11px; letter-spacing: .16em; }

/* En una rejilla que cambia de columnas con el ancho el bloque lleva las
   dos frases y la hoja enseña la que toca. */
.rd .rd-cie-c { display: none; }

@media (min-width: 1280px) {
  .rd .rd-cie--anchos { --s: var(--s-xl); }
  .rd .rd-no-xl { display: none; }
  .rd .rd-uno-xl { padding: 20px; gap: 10px; }
  .rd .rd-uno-xl .rd-cie-t { font-size: 19px; }
  .rd .rd-uno-xl .rd-cie-a { font-size: 11px; letter-spacing: .16em; }
  .rd .rd-uno-xl .rd-cie-l { display: none; }
  .rd .rd-uno-xl span.rd-cie-c { display: inline; }
  .rd .rd-uno-xl a.rd-cie-c { display: inline-flex; }
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
  .rd .rd-cie--anchos { --s: var(--s-lg); }
  .rd .rd-no-lg { display: none; }
  .rd .rd-uno-lg { padding: 20px; gap: 10px; }
  .rd .rd-uno-lg .rd-cie-t { font-size: 19px; }
  .rd .rd-uno-lg .rd-cie-a { font-size: 11px; letter-spacing: .16em; }
  .rd .rd-uno-lg .rd-cie-l { display: none; }
  .rd .rd-uno-lg span.rd-cie-c { display: inline; }
  .rd .rd-uno-lg a.rd-cie-c { display: inline-flex; }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .rd .rd-cie--anchos { --s: var(--s-md); }
  .rd .rd-no-md { display: none; }
  .rd .rd-uno-md { padding: 20px; gap: 10px; }
  .rd .rd-uno-md .rd-cie-t { font-size: 19px; }
  .rd .rd-uno-md .rd-cie-a { font-size: 11px; letter-spacing: .16em; }
  .rd .rd-uno-md .rd-cie-l { display: none; }
  .rd .rd-uno-md span.rd-cie-c { display: inline; }
  .rd .rd-uno-md a.rd-cie-c { display: inline-flex; }
}

/* Por debajo de 768 es siempre la corta, con las medidas de 390. */
@media (max-width: 767.98px) {
  .rd .rd-cie--anchos { --s: var(--s-sm); }
  .rd .rd-no-sm { display: none; }
  .rd .rd-cie--anchos .rd-cie-l { display: none; }
  .rd .rd-cie--anchos span.rd-cie-c { display: inline; }
  .rd .rd-cie--anchos a.rd-cie-c { display: inline-flex; }
}


/* ═══════════════════════════════════════════════════════════
   MENOS DE 768 · las medidas de 390
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1023.98px) {
  .rd { --rd-g: 32px; }
}

@media (max-width: 767.98px) {
  .rd { --rd-g: 20px; padding-bottom: 80px; }

  .rd .rd-ante { margin-bottom: 12px; font-size: 12px; letter-spacing: .16em; }
  .rd .rd-h1 { font-size: 44px; }
  .rd .rd-h2 { font-size: 26px; }
  .rd .rd-lead, .rd .rd-texto { font-size: 17px; }
  .rd .rd-fil { margin: 24px 0; }
  .rd .rd-ph { padding: 40px 0 32px; }
  .rd .rd-ph .rd-lead { margin-top: 16px; }
  .rd .rd-miga { padding-top: 24px; font-size: 13px; }

  .rd .rd-ch { height: 36px; padding: 0 12px; font-size: 13px; }
  .rd .rd-chs { gap: 8px; }

  .rd .rd-vc-t { height: 42px; margin-top: 12px; font-size: 15px; }

  .rd .rd-fila + .rd-fila { margin-top: 48px; }
  .rd .rd-fila-cab { margin-bottom: 16px; }
  .rd .rd-fila-cab .rd-h2 { font-size: 24px; }

  .rd .rd-cie { padding: 16px; gap: 8px; }
  .rd .rd-cie .rd-cie-t { font-size: 16px; }
  .rd .rd-cie .rd-cie-a { font-size: 10px; letter-spacing: .14em; }
  .rd .rd-cie .rd-vt { font-size: 13px; }
}