/* estilos.css — RWS v2 · "La puesta es el drop"
   Todo color, tamaño, espacio, radio y duración sale de tokens.css (generado desde brand/brand.tokens.json).
   Los quiebres 48rem y 64rem son los únicos literales: las media queries no aceptan variables. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: dark;
  background: var(--superficie-base);
}

body {
  margin: 0;
  padding-bottom: calc(var(--espacio-6) + var(--espacio-3) + env(safe-area-inset-bottom));
  background: var(--superficie-base);
  color: var(--texto-principal);
  font-family: var(--familia-texto);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  font-weight: var(--body-peso);
  letter-spacing: var(--body-tracking);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: var(--borde-fino); text-underline-offset: var(--espacio-1); }
strong { font-weight: var(--hora-peso); }
button, input, select { font: inherit; color: inherit; }
abbr[title] { text-decoration: none; }

:focus-visible {
  outline: var(--borde-grueso) solid var(--superficie-acento);
  outline-offset: var(--espacio-1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}

/* ---------- Roles tipográficos (escala cerrada) ---------- */
.t-display {
  --ancho-final: var(--display-ancho-mobile);
  font-family: var(--familia-display);
  font-size: var(--display-size);
  line-height: var(--display-lh);
  font-weight: var(--display-peso);
  letter-spacing: var(--display-tracking);
  font-stretch: calc(var(--ancho-final) * 1%);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.t-headline {
  --ancho-final: var(--headline-ancho-mobile);
  font-family: var(--familia-display);
  font-size: var(--headline-size);
  line-height: var(--headline-lh);
  font-weight: var(--headline-peso);
  letter-spacing: var(--headline-tracking);
  font-stretch: calc(var(--ancho-final) * 1%);
  text-transform: uppercase;
}
.t-hora {
  font-family: var(--familia-texto);
  font-size: var(--hora-size);
  line-height: var(--hora-lh);
  font-weight: var(--hora-peso);
  letter-spacing: var(--hora-tracking);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.t-subhead {
  font-family: var(--familia-texto);
  font-size: var(--subhead-size);
  line-height: var(--subhead-lh);
  font-weight: var(--subhead-peso);
  letter-spacing: var(--subhead-tracking);
}
.t-body {
  font-family: var(--familia-texto);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  font-weight: var(--body-peso);
  letter-spacing: var(--body-tracking);
}
.t-caption {
  font-family: var(--familia-texto);
  font-size: var(--caption-size);
  line-height: var(--caption-lh);
  font-weight: var(--caption-peso);
  letter-spacing: var(--caption-tracking);
}

/* Líneas de un titular: en mobile pueden cortar; desde tablet cada una se queda en su renglón mientras se expande. */
.linea { display: block; }

@media (min-width: 48rem) {
  .t-display { --ancho-final: var(--display-ancho); }
  .t-headline { --ancho-final: var(--headline-ancho); }
  .linea { white-space: nowrap; }
}

/* ---------- Firma: el drop ---------- */
[data-drop] { font-stretch: calc(var(--display-ancho-inicial) * 1%); }
[data-drop].drop--on {
  animation: drop var(--mov-drop-duracion) var(--mov-drop-easing) forwards;
}
@keyframes drop {
  from { font-stretch: calc(var(--display-ancho-inicial) * 1%); }
  to { font-stretch: calc(var(--ancho-final) * 1%); }
}
@media (prefers-reduced-motion: reduce) {
  [data-drop] { font-stretch: calc(var(--ancho-final) * 1%); }
}

/* ---------- Utilidades ---------- */
.solo-lectores {
  position: absolute;
  width: var(--borde-fino);
  height: var(--borde-fino);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.saltar {
  position: absolute;
  top: var(--espacio-3);
  left: var(--espacio-3);
  z-index: 40;
  padding: var(--espacio-2) var(--espacio-3);
  border-radius: var(--radio-chico);
  background: var(--superficie-inversa);
  color: var(--texto-sobre-inversa);
  transform: translateY(calc(-100% - var(--espacio-6)));
}
.saltar:focus { transform: none; }

.contenedor {
  width: min(100% - 2 * var(--gutter-mobile), var(--contenedor));
  margin-inline: auto;
}
.medida { max-width: var(--medida-texto); }
.secundario { color: var(--texto-secundario); }
.dorado { color: var(--texto-hora); }

.ritmo-xl { padding-block: var(--ritmo-l); }
.ritmo-l { padding-block: var(--ritmo-m); }
.ritmo-m { padding-block: var(--ritmo-s); }
.ritmo-s { padding-block: var(--espacio-4); }

@media (min-width: 48rem) {
  body { padding-bottom: 0; }
  .contenedor { width: min(100% - 2 * var(--gutter-desktop), var(--contenedor)); }
  .ritmo-xl { padding-block: var(--ritmo-xl); }
  .ritmo-l { padding-block: var(--ritmo-l); }
  .ritmo-m { padding-block: var(--ritmo-m); }
  .ritmo-s { padding-block: var(--ritmo-s); }
}

/* ---------- Botones y chips ---------- */
.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3);
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--espacio-5) + var(--espacio-2));
  padding: var(--espacio-2) var(--espacio-4);
  border: var(--borde-grueso) solid transparent;
  border-radius: var(--radio-chico);
  font-family: var(--familia-texto);
  font-size: var(--subhead-size);
  line-height: var(--subhead-lh);
  font-weight: var(--subhead-peso);
  letter-spacing: var(--subhead-tracking);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--mov-rapido-duracion) var(--mov-rapido-easing),
    color var(--mov-rapido-duracion) var(--mov-rapido-easing),
    border-color var(--mov-rapido-duracion) var(--mov-rapido-easing);
}
.boton--acento { background: var(--superficie-acento); color: var(--texto-sobre-acento); }
.boton--acento:hover { background: var(--superficie-inversa); color: var(--texto-sobre-inversa); }
.boton--linea { border-color: currentColor; background: transparent; }
.boton--linea:hover { border-color: var(--superficie-inversa); background: var(--superficie-inversa); color: var(--texto-sobre-inversa); }

.enlace {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--espacio-5) + var(--espacio-1));
  font-weight: var(--subhead-peso);
}

.selector { display: flex; flex-wrap: wrap; gap: var(--espacio-2); }
.chip,
.opcion span {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--espacio-5) + var(--espacio-1));
  padding: var(--espacio-2) var(--espacio-3);
  border: var(--borde-fino) solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--mov-rapido-duracion) var(--mov-rapido-easing), color var(--mov-rapido-duracion) var(--mov-rapido-easing);
}
.chip[aria-pressed="true"],
.opcion input:checked + span {
  border-color: var(--superficie-inversa);
  background: var(--superficie-inversa);
  color: var(--texto-sobre-inversa);
}

/* ---------- Cabecera: flota sobre el hero ---------- */
.cabecera {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 20;
  background: linear-gradient(to bottom, var(--foto-velo), transparent);
  color: var(--foto-texto-sobre-foto);
}
.cabecera__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--espacio-4);
  padding-block: var(--espacio-2) var(--espacio-4);
}
.marca {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--espacio-5) + var(--espacio-1));
  text-decoration: none;
}
.nav__lista { display: flex; flex-wrap: wrap; gap: 0 var(--espacio-3); }
.nav__lista a {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--espacio-5) + var(--espacio-1));
  text-decoration: none;
}
.nav__lista a:hover,
.nav__lista a[aria-current="page"] { text-decoration: underline; }
.cabecera .nav { display: none; }
.cabecera__cta { display: none; }

@media (min-width: 48rem) {
  .cabecera .nav { display: block; }
  .nav__lista { gap: 0 var(--espacio-4); }
  .cabecera__cta { display: inline-flex; }
}

/* ---------- Forma `contraluz` ---------- */
.contraluz {
  position: relative;
  display: grid;
  align-content: end;
  min-height: var(--contraluz-alto);
  overflow: hidden;
  isolation: isolate;
  background: var(--superficie-base);
  color: var(--foto-texto-sobre-foto);
}
.contraluz--cierre { min-height: var(--cierre-alto); }
.contraluz__video,
.contraluz__foto,
.contraluz__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.contraluz__video,
.contraluz__foto { z-index: -2; }
.contraluz__video,
.contraluz__foto img { object-fit: cover; object-position: 58% center; }
/* Velo local: solo la franja de abajo, donde vive el texto. */
.contraluz::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, var(--foto-velo) 0, var(--foto-velo) 30%, transparent 72%);
}
.contraluz__texto {
  display: grid;
  justify-items: start;
  gap: var(--espacio-4);
  padding-block: var(--ritmo-l) var(--espacio-5);
}
.contraluz__texto .t-subhead { max-width: 34ch; }
.contraluz__nota { color: var(--texto-secundario); }

/* Tira de horarios, como un line-up */
.tira {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espacio-3);
  width: 100%;
  margin-top: var(--espacio-3);
  padding-top: var(--espacio-3);
  border-top: var(--borde-fino) solid var(--borde-fuerte);
}
.tira li { display: grid; gap: var(--espacio-1); }
.tira time { color: var(--texto-hora); }
.tira__puesta time { color: var(--superficie-acento); }

@media (min-width: 64rem) {
  .contraluz__texto { padding-block: var(--ritmo-l) var(--ritmo-s); }
  .tira { grid-template-columns: repeat(3, max-content) minmax(0, 1fr); column-gap: var(--espacio-7); }
}

/* ---------- Forma `set` ---------- */
.set__curva { position: relative; margin-bottom: var(--espacio-5); }
.set__curva svg { width: 100%; height: calc(var(--espacio-8) - var(--espacio-4)); overflow: visible; }
.curva__area { fill: var(--superficie-elevada); }
.curva__linea { fill: none; stroke: var(--texto-principal); stroke-width: 2; vector-effect: non-scaling-stroke; }
.curva__horizonte { stroke: var(--borde-sutil); stroke-width: 1; vector-effect: non-scaling-stroke; }
.curva__sol { fill: var(--texto-hora); }
.curva__drop { fill: var(--superficie-acento); }
.set__marcas {
  position: absolute;
  inset-inline: 0;
  bottom: calc(-1 * var(--espacio-5));
  height: var(--espacio-4);
}
.set__marcas span { position: absolute; transform: translateX(-50%); white-space: nowrap; color: var(--texto-secundario); }
.set__marcas span:first-child { left: 12%; }
.set__marcas span:nth-child(2) { left: 50%; color: var(--texto-hora); }
.set__marcas span:last-child { left: 86%; }

.set__cabeza { display: grid; gap: var(--espacio-4); margin-top: var(--espacio-6); }
.set__cabeza .t-headline { overflow-wrap: anywhere; }

.tramos-set {
  display: grid;
  gap: var(--espacio-5);
  margin-top: var(--espacio-6);
}
.tramo-set {
  display: grid;
  gap: var(--espacio-2);
  align-content: start;
  padding-top: var(--espacio-3);
  border-top: var(--borde-fino) solid var(--borde-fuerte);
}
.tramo-set time { color: var(--texto-hora); }
.tramo-set--puesta { border-top: var(--borde-grueso) solid var(--superficie-acento); }
.tramo-set p:last-child { color: var(--texto-secundario); max-width: var(--medida-texto); }
.set__nota { margin-top: var(--espacio-5); color: var(--texto-secundario); }

@media (min-width: 64rem) {
  .set__cabeza { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .tramos-set { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Forma `line-up` ---------- */
.line-up__nombres { display: grid; gap: var(--espacio-1); }
.line-up__nombres li { overflow-wrap: anywhere; }
.line-up__nombres .secundario { color: var(--texto-secundario); }
.line-up__rotulo { margin-top: var(--espacio-4); color: var(--texto-secundario); }

.residentes {
  display: grid;
  gap: var(--espacio-6) var(--espacio-5);
  margin-top: var(--espacio-6);
}
.residente { display: grid; gap: var(--espacio-2); align-content: start; }
.residente img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radio-grande);
  margin-bottom: var(--espacio-2);
}
.residente .t-hora { color: var(--texto-hora); }
.residentes__nota { max-width: var(--medida-texto); color: var(--texto-secundario); }

.mosaico {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-3);
  margin-top: var(--espacio-6);
}
.mosaico figure { display: grid; gap: var(--espacio-2); align-content: start; }
.mosaico img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radio-grande); }
.mosaico figcaption { color: var(--texto-secundario); }
.mosaico__grande { grid-column: 1 / -1; }
.mosaico__grande img { aspect-ratio: 16 / 10; }

@media (min-width: 48rem) {
  .residentes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .residentes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr); align-items: end; }
  .mosaico { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--espacio-4); }
  .mosaico figure { grid-column: span 3; }
  .mosaico__grande { grid-column: span 6; grid-row: span 2; }
  .mosaico__grande img { aspect-ratio: auto; min-height: 100%; }
}

/* ---------- Forma `pregunta` ---------- */
.pregunta__titulo { max-width: 16ch; }
.pregunta__intro { max-width: var(--medida-texto); margin-top: var(--espacio-4); color: var(--texto-secundario); }

.formatos { margin-top: var(--espacio-6); border-top: var(--borde-fino) solid var(--borde-fuerte); }
.formato {
  display: grid;
  gap: var(--espacio-3) var(--espacio-5);
  padding-block: var(--espacio-5);
  border-bottom: var(--borde-fino) solid var(--borde-sutil);
}
.formato__nombre { display: grid; gap: var(--espacio-2); align-content: start; }
.formato__nombre .t-hora { color: var(--texto-hora); }
.formato__datos {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--espacio-2) var(--espacio-4);
}
.formato__datos dt { color: var(--texto-secundario); }
.formato__precio { display: grid; gap: var(--espacio-2); align-content: start; justify-items: start; }
.formato__precio strong { font-size: var(--subhead-size); line-height: var(--subhead-lh); font-variant-numeric: tabular-nums; }
.formato--combo {
  margin-top: var(--espacio-4);
  padding-inline: var(--espacio-4);
  border-bottom: 0;
  border-radius: var(--radio-grande);
  background: var(--superficie-inversa);
  color: var(--texto-sobre-inversa);
}
.formato--combo .t-hora { color: var(--texto-sobre-inversa); }
.formato--combo .formato__datos dt { color: var(--texto-secundario-sobre-inversa); }
.formatos__pie { margin-top: var(--espacio-5); color: var(--texto-secundario); }

.columnas { margin-top: var(--espacio-5); }
.columnas p { max-width: var(--medida-texto); }
.columnas p + p { margin-top: var(--espacio-3); }

.resenas { display: grid; gap: var(--espacio-6) var(--espacio-5); margin-top: var(--espacio-6); }
.resena { display: grid; gap: var(--espacio-3); align-content: start; padding-top: var(--espacio-4); border-top: var(--borde-fino) solid var(--borde-fuerte); }
.resena__firma { color: var(--texto-secundario); }
.resena__firma time { color: var(--texto-hora); }

@media (min-width: 48rem) {
  .columnas { columns: 2; column-gap: var(--espacio-5); }
  .columnas p { break-inside: avoid; }
  .resenas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .formato { grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr) minmax(0, 0.8fr); align-items: start; }
  .resenas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Forma `planilla`: calendario ---------- */
.fechas { display: grid; gap: var(--espacio-5); }
.calendario__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding-bottom: var(--espacio-3);
  border-bottom: var(--borde-grueso) solid var(--texto-principal);
}
.calendario__flecha {
  display: inline-grid;
  place-items: center;
  width: calc(var(--espacio-5) + var(--espacio-2));
  height: calc(var(--espacio-5) + var(--espacio-2));
  border: var(--borde-fino) solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  background: transparent;
  font-size: var(--subhead-size);
  cursor: pointer;
}
.calendario__flecha:disabled { border-color: var(--borde-sutil); color: var(--texto-secundario); cursor: default; }

.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2) var(--espacio-4);
  margin-block: var(--espacio-3);
  color: var(--texto-secundario);
}
.leyenda__item { display: inline-flex; align-items: center; gap: var(--espacio-2); }
.leyenda__muestra { width: var(--espacio-3); height: var(--espacio-3); border: var(--borde-fino) solid var(--borde-fuerte); border-radius: var(--radio-chico); }
.leyenda__muestra--tomada { border-color: var(--superficie-inversa); background: var(--superficie-inversa); }
.leyenda__muestra--elegida { border-color: var(--superficie-seleccion); background: var(--superficie-seleccion); }

.mes { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: var(--borde-grueso); }
.mes th { padding-block: var(--espacio-2); color: var(--texto-secundario); font-weight: var(--caption-peso); }
.mes th.sabado { color: var(--texto-principal); }
.mes td { padding: 0; }

.dia {
  display: grid;
  align-content: space-between;
  justify-items: start;
  gap: var(--espacio-1);
  width: 100%;
  min-height: var(--espacio-6);
  padding: var(--espacio-1) var(--borde-grueso);
  border: var(--borde-fino) solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--mov-rapido-duracion) var(--mov-rapido-easing);
}
.dia__hora { color: var(--texto-hora); letter-spacing: 0; }
.dia--libre:hover { background: var(--superficie-elevada); }

/* Tomada: bloque claro sobre la noche, número tachado. Se ve desde lejos. */
.dia--tomada {
  border-color: var(--superficie-inversa);
  background: var(--superficie-inversa);
  color: var(--texto-sobre-inversa);
  cursor: help;
}
.dia--tomada .dia__num { text-decoration: line-through; text-decoration-thickness: var(--borde-grueso); }
.dia__estado { display: none; }
.dia--pasado { border-color: transparent; color: var(--texto-secundario); cursor: default; }
.dia[aria-pressed="true"] {
  border-color: var(--superficie-seleccion);
  background: var(--superficie-seleccion);
  color: var(--texto-sobre-seleccion);
}
.dia[aria-pressed="true"] .dia__hora { color: var(--texto-sobre-seleccion); }

.tu-fecha {
  display: grid;
  gap: var(--espacio-4);
  align-content: start;
  padding: var(--espacio-4);
  border-radius: var(--radio-grande);
  background: var(--superficie-elevada);
}
.tu-fecha__detalle { color: var(--texto-secundario); }
.tf-form { display: grid; gap: var(--espacio-4); }
.campo { display: grid; gap: var(--espacio-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.campo legend { padding: 0; margin-bottom: var(--espacio-2); }
.campo select {
  min-height: calc(var(--espacio-5) + var(--espacio-1));
  padding: var(--espacio-2) var(--espacio-3);
  border: var(--borde-fino) solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  background: var(--superficie-base);
}
.opciones { display: flex; flex-wrap: wrap; gap: var(--espacio-2); }
.opcion { position: relative; }
.opcion input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.opcion input:focus-visible + span { outline: var(--borde-grueso) solid var(--superficie-acento); outline-offset: var(--espacio-1); }
.aviso-tomada {
  display: grid;
  gap: var(--espacio-3);
  padding: var(--espacio-3);
  border-radius: var(--radio-chico);
  background: var(--superficie-inversa);
  color: var(--texto-sobre-inversa);
}

@media (min-width: 48rem) {
  .mes { border-spacing: var(--espacio-1); }
  .dia { min-height: calc(var(--espacio-6) + var(--espacio-4)); padding: var(--espacio-2); }
  .dia__estado { display: block; }
}
@media (min-width: 64rem) {
  .fechas { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
  .tu-fecha { position: sticky; top: var(--espacio-4); }
}

/* ---------- Forma `planilla`: tablas ---------- */
.tabla { width: 100%; border-collapse: collapse; }
.tabla caption { padding-bottom: var(--espacio-4); border-bottom: var(--borde-grueso) solid var(--texto-principal); text-align: left; }
.tabla caption p { max-width: var(--medida-texto); margin-top: var(--espacio-3); color: var(--texto-secundario); }
.tabla thead { position: absolute; width: var(--borde-fino); height: var(--borde-fino); overflow: hidden; clip-path: inset(50%); }
.tabla tr { display: grid; gap: var(--espacio-1); padding-block: var(--espacio-3); border-bottom: var(--borde-fino) solid var(--borde-sutil); }
.tabla th, .tabla td { display: block; padding: 0; text-align: left; vertical-align: top; }
.tabla tbody th { font-weight: var(--subhead-peso); }
.tabla td { max-width: var(--medida-texto); color: var(--texto-secundario); }
.tabla + .acciones { margin-top: var(--espacio-5); }

@media (min-width: 48rem) {
  .tabla thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .tabla tr { display: table-row; }
  .tabla th, .tabla td { display: table-cell; padding: var(--espacio-4) var(--espacio-4) var(--espacio-4) 0; border-bottom: var(--borde-fino) solid var(--borde-sutil); }
  .tabla thead th { color: var(--texto-secundario); font-weight: var(--caption-peso); }
  .tabla tbody th { width: 30%; }
}

/* ---------- Pie ---------- */
.pie { padding-block: var(--ritmo-m); background: var(--superficie-elevada); }
.pie__grilla { display: grid; gap: var(--espacio-5); }
.pie__secundario { color: var(--texto-secundario); }
.pie .nav__lista { gap: 0 var(--espacio-4); }
.simple { display: grid; gap: var(--espacio-3); }
.simple p { max-width: var(--medida-texto); }

@media (min-width: 64rem) {
  .pie__grilla { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

/* ---------- Barra móvil ---------- */
.barra-movil {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  gap: var(--espacio-2);
  padding: var(--espacio-2) var(--gutter-mobile) calc(var(--espacio-2) + env(safe-area-inset-bottom));
  border-top: var(--borde-fino) solid var(--borde-sutil);
  background: var(--superficie-base);
}
.barra-movil .boton--acento { flex: 1; }

@media (min-width: 48rem) {
  .barra-movil { display: none; }
}

/* ---------- Página simple ---------- */
.pagina-simple { padding-top: calc(var(--ritmo-l) + var(--espacio-6)); }

/* ---------- Ajustes v2 ---------- */
.tira__fecha { grid-column: 1 / -1; align-self: end; color: var(--texto-secundario); }

.curva__punto {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--espacio-4);
  height: var(--espacio-4);
  border-radius: var(--radio-circulo);
  background: var(--superficie-acento);
  transform: translate(-50%, -25%);
  box-shadow: 0 0 0 var(--espacio-2) var(--superficie-base);
}

.line-up__nombres--fluido { display: flex; flex-wrap: wrap; gap: 0 var(--espacio-4); }

.contraluz--cierre { align-content: start; }
.contraluz--cierre::after {
  background: linear-gradient(to bottom, var(--foto-velo) 0, var(--foto-velo) 24%, transparent 62%);
}
.contraluz--cierre .contraluz__texto { padding-block: var(--ritmo-l) var(--ritmo-m); }

@media (min-width: 64rem) {
  .tira__fecha { grid-column: auto; justify-self: end; }
}