/* ==========================================================================
   Let's Drunch
   --------------------------------------------------------------------------
   Dos familias y una paleta sacada de las fotos de la casa. EB Garamond
   (serif) titula y lleva la prosa: la voz del sitio es literaria, no
   comercial. Jost (palo seco geométrico) hace lo funcional —menú, rótulos,
   botones— siempre en mayúsculas y con mucho espaciado, que es como está
   dibujado el logotipo.

   Los colores son los de la casa y no una paleta inventada: el terracota de
   las macetas y los frentes de la cocina, el verde hondo de la vegetación, el
   ocre de las servilletas y el crema del revoque. El terracota aparece poco
   —enlaces, subrayados, el filete de los rótulos— para que signifique algo
   cuando aparece.

   Sobre el movimiento: todo va a la misma curva y todo es de entrada. Nada
   rebota, nada se repite en bucle mientras se lee y nada se mueve por debajo
   del dedo. Un elemento aparece una vez, al llegar a él, y se queda quieto.
   ========================================================================== */

@font-face {
  font-family: "Jost";
  src: url("/assets/fonts/Jost-var.woff2") format("woff2");
  font-weight: 300 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/EBGaramond-var.woff2") format("woff2");
  font-weight: 400 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/EBGaramond-var-italic.woff2") format("woff2");
  font-weight: 400 500; font-style: italic; font-display: swap;
}

:root {
  --tinta:       #1b1a17;
  --tinta-suave: #46423b;
  --humo:        #7b7368;
  --papel:       #f5f0e8;
  --papel-hondo: #e5dccd;
  --blanco:      #fffdf9;
  --terracota:   #b4573a;
  --terracota-claro: #cd8f78;
  --verde:       #2c4034;
  --ocre:        #bd8a3d;

  /* Los acentos. Cinco, todos sacados de las fotos de la casa —el barro, la
     servilleta mostaza, el follaje, los cuadros azules del salón, el jengibre
     rojo— y todos igual de apagados, que es lo que hace que convivan sin que
     ninguno grite. Se usan por significado y no por decoración: cada paso del
     flujo tiene el suyo, y así el tablero se lee sin leer los títulos. */
  --arena:       #a8896b;
  --azul:        #4a6670;
  --ciruela:     #7a4250;
  --oliva:       #6b7355;

  /* La misma familia, aclarada, para fondos y filetes. */
  --arena-suave:     #efe6da;
  --ocre-suave:      #f2e8d4;
  --verde-suave:     #e2e8e2;
  --azul-suave:      #e2e9ec;
  --ciruela-suave:   #f0e2e5;

  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Jost", "Futura", "Avenir Next", system-ui, -apple-system, sans-serif;

  --ancho:   1240px;
  --columna: 62ch;
  --nav-alto: 5.5rem;
  --nav-alto-min: 4.25rem;

  /* Una sola curva para lo que reacciona al cursor, y otra —más larga y con
     frenada muy larga— para lo que entra en pantalla. Que todo comparta curva
     es la mitad de la sensación de que el sitio está hecho de una pieza. */
  --transicion: 320ms cubic-bezier(.22, .61, .36, 1);
  --entrada:    900ms cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------------------
   Barras de desplazamiento
   --------------------------------------------------------------------------
   Finas y del color de la casa, en vez de la barra gris del sistema.

   **En móvil no se pueden dibujar**: iOS y Android las pintan el sistema
   operativo, aparecen solo mientras el dedo se mueve y ninguna regla de CSS
   las toca. Así que ahí no se intenta: lo que se hace es que se vea que hay
   más contenido, con un degradado en el borde de todo lo que se desplaza en
   horizontal (`.ld-desliza`). Eso funciona en los dos sitios.
   -------------------------------------------------------------------------- */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--arena) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--arena);
  border: 3px solid var(--papel);
  border-radius: 10px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--terracota); }
/* Sobre fondo oscuro el borde del pulgar tiene que ser oscuro, o se dibuja un
   marco claro alrededor de la barra. */
.ld-pie *::-webkit-scrollbar-thumb,
.ld-llamada *::-webkit-scrollbar-thumb { border-color: var(--tinta); }

/* Lo que se desplaza en horizontal se difumina por el borde: es la única pista
   de «hay más» que funciona igual con ratón y con el dedo.

   **Solo por la derecha.** Se empieza con el carril a la izquierda, así que
   por ese lado no hay nada escondido y difuminarlo solo emborrona la primera
   tarjeta sin decir nada. Donde el navegador entiende `animation-timeline` se
   añade además el degradado izquierdo, y solo conforme se desplaza. */
.ld-desliza {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
}

@supports (animation-timeline: scroll(self inline)) {
  .ld-desliza {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-izq, 0px),
                                        #000 calc(100% - 3rem), transparent);
            mask-image: linear-gradient(to right, transparent, #000 var(--fade-izq, 0px),
                                        #000 calc(100% - 3rem), transparent);
    animation: ld-fade-izq linear both;
    animation-timeline: scroll(self inline);
    animation-range: 0 3rem;
  }
  @keyframes ld-fade-izq { to { --fade-izq: 3rem; } }
}
@property --fade-izq { syntax: "<length>"; inherits: false; initial-value: 0px; }

@media (pointer: coarse) {
  /* En táctil el margen se reduce: la pantalla es estrecha y comer 3 rem se
     lleva media tarjeta. */
  .ld-desliza {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.25rem), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 1.25rem), transparent);
  }
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--serif);
  font-size: 1.0625rem;
  color: var(--tinta);
  background: var(--papel);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Un grano finísimo sobre todo el sitio. El crema plano se lee como un color
   de pantalla; con grano se lee como el revoque de la casa, que es lo que hay
   en todas las fotos. Va por encima del contenido y por debajo del visor, y no
   intercepta el cursor. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, video { display: block; max-width: 100%; }
picture { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--terracota); color: var(--blanco); }

/* El foco tiene que verse: el sitio entero es navegable con teclado. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--terracota);
  outline-offset: 3px;
}

.ld-ico { width: 1.1em; height: 1.1em; flex: none; }

/* --------------------------------------------------------------------------
   Movimiento
   -------------------------------------------------------------------------- */

/* `ld-reveal` lo pone `anim/rev`: el elemento espera abajo y con la opacidad a
   cero hasta que el observador lo ve entrar en pantalla. El `--i` escalona los
   hermanos de una rejilla. */
.ld-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--entrada), transform var(--entrada);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.ld-reveal.es-visible { opacity: 1; transform: none; }

/* `ld-entrada` es lo mismo pero sin observador: lo de arriba del todo, que ya
   está en pantalla al cargar y entra solo. */
.ld-entrada {
  animation: ld-sube var(--entrada) both;
  animation-delay: calc(140ms + var(--i, 0) * 130ms);
}
@keyframes ld-sube {
  from { opacity: 0; transform: translateY(26px); }
}

.ld-vista { animation: ld-aparece 500ms var(--transicion) both; }
@keyframes ld-aparece { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Quien pide menos movimiento ve el sitio quieto y entero: los elementos se
     quedan en su estado final en vez de esperar a un observador. */
  .ld-reveal { opacity: 1; transform: none; transition: none; }
  .ld-entrada, .ld-vista { animation: none; }
  .ld-hero-foto, .ld-hero-cue { animation: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   Piezas de texto
   -------------------------------------------------------------------------- */

/* El rótulo pequeño en mayúsculas: la voz de servicio de la marca. Va en Jost
   porque el logotipo lo está, y con el espaciado alto que pide ese dibujo. */
.ld-etiqueta {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--humo);
}

.ld-seccion-cabecera { margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.ld-seccion-cabecera .ld-etiqueta { margin-bottom: 1rem; }

.ld-titulo-seccion {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -.005em;
  text-wrap: balance;
}
/* El filete corto bajo el título. Es el único adorno del sitio, y se dibuja
   solo al entrar: la línea crece desde la izquierda en vez de aparecer. */
.ld-titulo-seccion::after {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  margin-top: 1.4rem;
  background: var(--terracota);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 800ms var(--entrada) 260ms;
}
.es-visible .ld-titulo-seccion::after,
.ld-seccion-cabecera.es-visible .ld-titulo-seccion::after { transform: scaleX(1); }

.ld-titulo-pagina {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.5vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.015em;
}

.ld-entradilla {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.55;
  color: var(--tinta-suave);
  max-width: 46ch;
  margin-top: 1.5rem;
  text-wrap: pretty;
}

.ld-prosa { max-width: var(--columna); }
.ld-prosa p + p { margin-top: 1.4rem; }
.ld-prosa p {
  font-size: clamp(1.125rem, 1.6vw, 1.25rem);
  line-height: 1.72;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Botones y enlaces
   -------------------------------------------------------------------------- */

.ld-boton,
.ld-boton-linea {
  position: relative;
  display: inline-block;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-indent: .24em;
  padding: 1.05rem 2.2rem;
  transition: color var(--transicion), border-color var(--transicion);
}

/* El relleno entra barriendo desde la izquierda en vez de cambiar de color de
   golpe. Es la diferencia entre un botón y un botón cuidado. */
.ld-boton::before,
.ld-boton-linea::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 460ms cubic-bezier(.65, 0, .35, 1);
}
.ld-boton:hover::before,
.ld-boton-linea:hover::before { transform: scaleX(1); }

.ld-boton {
  background: var(--tinta);
  color: var(--papel);
  border: 1px solid var(--tinta);
}
.ld-boton::before { background: var(--terracota); }
.ld-boton:hover { border-color: var(--terracota); }

/* Sobre foto: solo el filete, para no tapar la imagen. */
.ld-boton-linea {
  border: 1px solid rgba(255, 253, 249, .6);
  color: var(--blanco);
}
.ld-boton-linea::before { background: var(--blanco); }
.ld-boton-linea:hover { color: var(--tinta); border-color: var(--blanco); }

/* El botón claro, para las bandas oscuras. */
.ld-boton.es-claro {
  background: var(--papel);
  color: var(--tinta);
  border-color: var(--papel);
}
.ld-boton.es-claro::before { background: var(--terracota); }
.ld-boton.es-claro:hover { color: var(--papel); border-color: var(--terracota); }

/* El enlace de texto lleva el subrayado dibujado aparte, para que se retire
   desde la derecha al pasar por encima. */
.ld-enlace-mas {
  position: relative;
  display: inline-block;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-indent: .24em;
  padding-bottom: .45rem;
  transition: color var(--transicion);
}
.ld-enlace-mas::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform 420ms var(--transicion);
}
.ld-enlace-mas:hover { color: var(--terracota); }
.ld-enlace-mas:hover::after { transform: scaleX(.35); }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.ld-seccion {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: clamp(4rem, 9vw, 8rem) 1.5rem;
}

.ld-columna > * { max-width: var(--columna); }

/* El bloque de dos columnas: el rótulo o el título a la izquierda y el
   contenido a la derecha. Es lo que evita que una sección de texto deje media
   página en blanco a su derecha, que es como se ve un borrador y no una
   página terminada. */
.ld-bloque {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 6vw, 5rem);
  align-items: start;
}
.ld-bloque-lado { position: sticky; top: calc(var(--nav-alto) + 3rem); }
.ld-bloque-lado .ld-seccion-cabecera { margin-bottom: 0; }
.ld-bloque-cuerpo > * { max-width: var(--columna); }

/* La barra es fija, así que las vistas que no abren con foto le dejan sitio. */
.ld-vista.es-con-barra { padding-top: var(--nav-alto); }

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

.ld-topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-alto);
  display: flex;
  align-items: center;
  color: var(--blanco);
  /* Sobre la foto no hay caja, solo un degradado: la barra tiene que leerse
     sin recortar la imagen que está detrás. */
  background: linear-gradient(rgba(27, 26, 23, .5), rgba(27, 26, 23, 0));
  transition: height var(--transicion), background var(--transicion),
              color var(--transicion), backdrop-filter var(--transicion),
              border-color var(--transicion);
  border-bottom: 1px solid transparent;
}

/* Al bajar, la barra se condensa y se apoya en un cristal esmerilado: deja de
   competir con la foto y empieza a comportarse como una barra. */
.ld-topbar.es-desplazada {
  height: var(--nav-alto-min);
  background: rgba(27, 26, 23, .72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}

.ld-topbar.es-solida {
  color: var(--tinta);
  background: var(--papel);
  border-bottom-color: var(--papel-hondo);
}
.ld-topbar.es-solida.es-desplazada {
  height: var(--nav-alto-min);
  background: rgba(245, 240, 232, .86);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}

.ld-topbar-fila {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 0 1.5rem;
}

/* --- El logotipo --- */
/* Tipográfico y no una imagen: escala sin pixelarse, se puede seleccionar y no
   hay un archivo más bloqueando el primer pintado. Reproduce el lockup de la
   marca —las mayúsculas espaciadas y «Experiences» debajo, en cursiva. */
.ld-marca {
  display: grid;
  justify-items: center;
  line-height: 1;
}
.ld-marca-nombre {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  /* El tracking añade aire a la derecha de la última letra y descentra el
     bloque; esto lo devuelve al eje. */
  text-indent: .26em;
  transition: letter-spacing var(--transicion);
}
.ld-marca:hover .ld-marca-nombre { letter-spacing: .3em; }
.ld-marca-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: .82rem;
  letter-spacing: .08em;
  margin-top: .28rem;
  opacity: .8;
}

.ld-nav-lado { display: flex; gap: 2.25rem; align-items: center; }
.ld-nav-lado.es-izq { justify-content: flex-end; }
.ld-nav-lado.es-der { justify-content: flex-start; padding-right: 5.5rem; }

.ld-nav-enlace {
  position: relative;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-indent: .22em;
  padding-bottom: .35rem;
}
/* El subrayado se dibuja desde la izquierda al pasar por encima; el de la
   página actual ya está dibujado. */
.ld-nav-enlace::after {
  content: "";
  position: absolute;
  left: 0; right: .22em; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 380ms var(--transicion);
}
.ld-nav-enlace:hover::after,
.ld-nav-enlace.es-actual::after { transform: scaleX(1); }

.ld-boton-icono {
  display: none;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  justify-self: end;
}
.ld-boton-icono .ld-ico { width: 1.5em; height: 1.5em; }

/* --- El cajón --- */

.ld-cajon {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 70;
  width: min(23rem, 86vw);
  padding: 5.5rem 2.5rem 2.5rem;
  background: var(--papel);
  color: var(--tinta);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 520ms var(--entrada), visibility 520ms;
}
.ld-cajon.es-abierto { transform: none; visibility: visible; }

.ld-cajon-cerrar {
  position: absolute;
  top: 1.5rem;
  right: 1.75rem;
  display: grid;
  place-items: center;
  transition: transform var(--transicion);
}
.ld-cajon-cerrar:hover { transform: rotate(90deg); }
.ld-cajon-cerrar .ld-ico { width: 1.5em; height: 1.5em; }

.ld-cajon-lista { list-style: none; display: grid; gap: 1.5rem; }
.ld-cajon-lista a {
  display: inline-block;
  font-family: var(--serif);
  font-size: 1.65rem;
  transition: color var(--transicion), transform var(--transicion);
}
.ld-cajon-lista a:hover { color: var(--terracota); transform: translateX(6px); }

/* Los enlaces del cajón entran uno detrás de otro al abrirlo. */
.ld-cajon.es-abierto .ld-cajon-lista li {
  animation: ld-sube 620ms var(--entrada) both;
}
.ld-cajon.es-abierto .ld-cajon-lista li:nth-child(1) { animation-delay: 120ms; }
.ld-cajon.es-abierto .ld-cajon-lista li:nth-child(2) { animation-delay: 180ms; }
.ld-cajon.es-abierto .ld-cajon-lista li:nth-child(3) { animation-delay: 240ms; }
.ld-cajon.es-abierto .ld-cajon-lista li:nth-child(4) { animation-delay: 300ms; }
.ld-cajon.es-abierto .ld-cajon-lista li:nth-child(5) { animation-delay: 360ms; }

.ld-cajon-correo {
  display: inline-block;
  margin-top: 2.75rem;
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .18em;
  color: var(--humo);
}

.ld-velo {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(27, 26, 23, .5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: ld-aparece 380ms var(--transicion) both;
}

/* --------------------------------------------------------------------------
   Portada y encabezados a sangre
   -------------------------------------------------------------------------- */

.ld-hero, .ld-encabezado {
  position: relative;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
}
.ld-hero { min-height: min(100svh, 900px); }
.ld-encabezado { min-height: min(72svh, 680px); }

.ld-hero picture, .ld-encabezado picture { position: absolute; inset: 0; z-index: -2; }
.ld-hero picture img, .ld-encabezado picture img {
  width: 100%; height: 100%; object-fit: cover;
}

/* Un acercamiento lentísimo sobre la foto de portada. Veinticinco segundos y
   un 5%: no se ve moverse, se nota que la imagen está viva. */
.ld-hero picture img { animation: ld-acerca 25s var(--transicion) both; }
@keyframes ld-acerca {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}

/* El degradado va de negro abajo a nada arriba: el texto se apoya en el pie de
   la foto, que es donde suele haber menos detalle. */
.ld-hero-sombra, .ld-encabezado-sombra {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(27, 26, 23, .34) 0%, rgba(27, 26, 23, 0) 26%),
    linear-gradient(rgba(27, 26, 23, 0) 34%, rgba(27, 26, 23, .82) 100%);
}

.ld-hero-texto, .ld-encabezado-texto {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 0 1.5rem clamp(4rem, 9vw, 7rem);
  color: var(--blanco);
}

.ld-hero-antetitulo,
.ld-encabezado-texto .ld-etiqueta { color: rgba(255, 253, 249, .8); }

.ld-hero-antetitulo {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-indent: .3em;
  margin-bottom: 1.75rem;
}

.ld-hero-texto h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -.018em;
  max-width: 17ch;
  margin-bottom: 2.5rem;
  text-wrap: balance;
}

.ld-encabezado-texto h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.8rem, 7.5vw, 5.4rem);
  line-height: .98;
  letter-spacing: -.02em;
  margin-top: .9rem;
}
.ld-encabezado-pie {
  font-family: var(--sans);
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-top: 1.25rem;
  color: rgba(255, 253, 249, .8);
}

/* El filete que baja en el borde de la portada. Un rastro que cae y vuelve a
   empezar: dice que hay más abajo sin escribir «scroll». */
.ld-hero-cue {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 5.5rem;
  overflow: hidden;
  background: rgba(255, 253, 249, .18);
}
.ld-hero-cue::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  background: var(--blanco);
  animation: ld-cae 2.6s cubic-bezier(.7, 0, .3, 1) infinite;
}
@keyframes ld-cae {
  0%        { transform: translateY(-100%); }
  55%, 100% { transform: translateY(250%); }
}

/* --------------------------------------------------------------------------
   Manifiesto y citas
   -------------------------------------------------------------------------- */

.ld-manifiesto {
  max-width: 58ch;
  margin-inline: auto;
  padding: clamp(4.5rem, 10vw, 8rem) 1.5rem;
  text-align: center;
}
.ld-manifiesto p {
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  line-height: 1.58;
  color: var(--tinta-suave);
  text-wrap: pretty;
}
.ld-manifiesto p + p { margin-top: 1.6rem; }

.ld-cita {
  background: var(--verde);
  color: var(--papel);
  padding: clamp(4.5rem, 10vw, 8rem) 1.5rem;
  text-align: center;
}
.ld-cita blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.8rem, 4.6vw, 3.1rem);
  line-height: 1.22;
  max-width: 21ch;
  margin: 0 auto;
  text-wrap: balance;
}
.ld-cita .ld-etiqueta { color: rgba(245, 240, 232, .55); margin-top: 2rem; }

/* La banda a sangre. Es una foto sin texto encima: sirve de respiro entre dos
   secciones densas y de recordatorio de dónde pasa todo esto. La foto se
   acerca despacio al entrar, una sola vez. */
.ld-banda { overflow: hidden; }
.ld-banda img {
  width: 100%;
  height: clamp(19rem, 50vw, 38rem);
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 1600ms var(--entrada);
}
.ld-banda.es-visible img { transform: scale(1); }

/* --------------------------------------------------------------------------
   Fichas (espacios y experiencias)
   -------------------------------------------------------------------------- */

/* `auto-fill` y no `auto-fit`: con dos tarjetas en una rejilla de tres, auto-fit
   colapsa las pistas vacías y las dos se estiran hasta media pantalla cada una
   —una foto de 600 px de ancho y un panel vacío del mismo tamaño al lado.
   auto-fill mantiene las tres pistas, así que las tarjetas conservan su ancho
   y la fila queda abierta a la izquierda, que es lo que se quiere mientras
   solo haya un espacio. */
.ld-fichas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: clamp(2rem, 4vw, 3.25rem);
}

.ld-ficha-lienzo { display: block; overflow: hidden; background: var(--papel-hondo); }
.ld-ficha-lienzo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 900ms var(--entrada), filter 600ms var(--transicion);
}
.ld-ficha:hover .ld-ficha-lienzo img { transform: scale(1.045); filter: brightness(1.04); }

.ld-ficha-cuerpo { padding-top: 1.6rem; }
.ld-ficha-cuerpo h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 2.6vw, 2.1rem);
  line-height: 1.08;
  margin-top: .7rem;
}
.ld-ficha-cuerpo h3 a {
  background-image: linear-gradient(var(--terracota), var(--terracota));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 480ms var(--transicion), color var(--transicion);
}
.ld-ficha:hover h3 a { background-size: 100% 1px; color: var(--terracota); }

.ld-ficha-lugar {
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--humo);
  margin-top: .5rem;
}
.ld-ficha-resumen {
  margin: 1rem 0 1.6rem;
  color: var(--tinta-suave);
  text-wrap: pretty;
}

/* El hueco del espacio que viene: sin foto, solo un filete y aire, para que se
   lea como una promesa y no como un error de carga. */
.ld-ficha.es-proxima {
  display: flex;
  align-items: center;
  border: 1px solid var(--papel-hondo);
  padding: 2.25rem;
  transition: border-color var(--transicion), background var(--transicion);
}
.ld-ficha.es-proxima:hover { border-color: var(--terracota-claro); background: rgba(255, 253, 249, .5); }
.ld-ficha.es-proxima .ld-ficha-cuerpo { padding-top: 0; }

/* --------------------------------------------------------------------------
   Ambientes
   -------------------------------------------------------------------------- */

.ld-ambientes { display: grid; gap: clamp(3.5rem, 8vw, 6.5rem); }

.ld-ambiente {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.ld-ambiente:nth-child(even) .ld-ambiente-foto { order: 2; }

.ld-ambiente-foto { overflow: hidden; }
.ld-ambiente-foto img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  transition: transform 1200ms var(--entrada);
}
.ld-ambiente:hover .ld-ambiente-foto img { transform: scale(1.04); }

.ld-ambiente-texto h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1.06;
  margin-bottom: 1rem;
}
.ld-ambiente-texto p {
  color: var(--tinta-suave);
  max-width: 34ch;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Galería y visor
   -------------------------------------------------------------------------- */

.ld-galeria {
  display: grid;
  /* 16rem de mínimo da cuatro columnas en el ancho del sitio, y las ocho
     fotos de la casa llenan dos filas exactas. Con cinco columnas la última
     fila quedaba coja. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: .65rem;
}
.ld-galeria-celda {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0;
  background: var(--papel-hondo);
}
.ld-galeria-celda img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 900ms var(--entrada), filter 500ms var(--transicion);
}
.ld-galeria-celda:hover img { transform: scale(1.06); filter: brightness(.78); }

/* El pie sube desde abajo al pasar por encima. Debajo de cada celda serían
   ocho pies compitiendo con ocho fotos. */
.ld-galeria-pie {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1rem .9rem;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--blanco);
  text-align: left;
  opacity: 0;
  transform: translateY(.5rem);
  transition: opacity var(--transicion), transform var(--transicion);
}
.ld-galeria-celda:hover .ld-galeria-pie { opacity: 1; transform: none; }

.ld-visor {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  animation: ld-aparece 320ms var(--transicion) both;
}
.ld-visor-velo {
  position: absolute;
  inset: 0;
  background: rgba(18, 17, 15, .95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ld-visor-marco {
  position: relative;
  grid-column: 2;
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  min-width: 0;
  animation: ld-visor-entra 560ms var(--entrada) both;
}
@keyframes ld-visor-entra {
  from { opacity: 0; transform: scale(.97) translateY(12px); }
}
.ld-visor-marco img {
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  object-fit: contain;
}
.ld-visor-marco figcaption {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, .6);
  text-align: center;
  max-width: 52ch;
}

.ld-visor-flecha, .ld-visor-cerrar {
  position: relative;
  color: var(--papel);
  font-size: 2.5rem;
  line-height: 1;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  opacity: .55;
  transition: opacity var(--transicion), transform var(--transicion);
}
.ld-visor-flecha:hover, .ld-visor-cerrar:hover { opacity: 1; }
.ld-visor-flecha.es-prev { grid-column: 1; }
.ld-visor-flecha.es-prev:hover { transform: translateX(-4px); }
.ld-visor-flecha.es-next { grid-column: 3; }
.ld-visor-flecha.es-next:hover { transform: translateX(4px); }
.ld-visor-cerrar {
  position: absolute;
  top: 1rem; right: 1.25rem;
  font-size: 1.5rem;
  z-index: 2;
}
.ld-visor-cerrar:hover { transform: rotate(90deg); }

/* --------------------------------------------------------------------------
   Usos, llamada y vacíos
   -------------------------------------------------------------------------- */

.ld-usos { list-style: none; margin-bottom: 2.75rem; max-width: none; }
.ld-usos li {
  position: relative;
  font-family: var(--serif);
  font-size: 1.3rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--papel-hondo);
  transition: padding-left var(--transicion), color var(--transicion);
}
.ld-usos li:hover { padding-left: .75rem; color: var(--terracota); }

.ld-llamada {
  background: var(--tinta);
  color: var(--papel);
  text-align: center;
  padding: clamp(4.5rem, 10vw, 8rem) 1.5rem;
}
.ld-llamada h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  line-height: 1.12;
  max-width: 19ch;
  margin: 0 auto 2.75rem;
  text-wrap: balance;
}

.ld-vacio { text-align: center; }
.ld-vacio h1 { font-family: var(--serif); font-weight: 400; font-size: 2.4rem; }
.ld-vacio p { margin: 1rem 0 2rem; color: var(--humo); }

.ld-intro-seccion { padding-bottom: 0; }

/* --------------------------------------------------------------------------
   El anfitrión
   -------------------------------------------------------------------------- */

.ld-anfitrion {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.ld-anfitrion-foto { overflow: hidden; }
.ld-anfitrion-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ld-anfitrion-texto h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.2vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: .7rem 0 1.9rem;
}
.ld-anfitrion-texto .ld-enlace-mas { margin-top: 1.9rem; }

/* --------------------------------------------------------------------------
   Reservas
   -------------------------------------------------------------------------- */

.ld-reservas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 5.5rem);
  align-items: start;
}
.ld-reservas-intro { position: sticky; top: calc(var(--nav-alto) + 2.5rem); }
.ld-reservas-directo { margin-top: 2rem; color: var(--humo); }
.ld-reservas-directo a {
  color: var(--terracota);
  border-bottom: 1px solid currentColor;
}
.ld-reservas-volver { grid-column: 1 / -1; padding-top: 1.5rem; }

.ld-form { display: grid; gap: 1.6rem; }
.ld-form-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }

.ld-campo { display: grid; gap: .55rem; }
.ld-campo-etiqueta {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--humo);
}
/* `:not([type=checkbox])` no es cosmética: sin ella, una casilla dentro de un
   `.ld-campo` se estira al 100 % del ancho con casi un centímetro de relleno,
   empuja su etiqueta contra el borde y la parte en tres líneas. */
.ld-campo input:not([type="checkbox"]):not([type="radio"]),
.ld-campo select,
.ld-campo textarea {
  width: 100%;
  padding: .85rem .95rem;
  background: var(--blanco);
  border: 1px solid var(--papel-hondo);
  border-radius: 0;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.ld-campo input:not([type="checkbox"]):not([type="radio"]):focus,
.ld-campo select:focus,
.ld-campo textarea:focus {
  border-color: var(--tinta);
  box-shadow: 0 0 0 3px rgba(27, 26, 23, .06);
}
.ld-campo textarea { resize: vertical; }
.ld-campo.es-error input { border-color: var(--terracota); }

.ld-form-error { color: var(--terracota); font-size: .95rem; }
.ld-form-nota { font-size: .95rem; color: var(--humo); text-wrap: pretty; }
.ld-form .ld-boton { justify-self: start; }

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

.ld-pie {
  background: var(--tinta);
  color: var(--papel);
  padding: clamp(4rem, 8vw, 6.5rem) 1.5rem 2.25rem;
}

.ld-pie-cuerpo {
  max-width: var(--ancho);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(2rem, 5vw, 4.5rem);
}

.ld-pie-marca .ld-marca-nombre,
.ld-pie-marca .ld-marca-sub { display: block; }
.ld-pie-marca .ld-marca-nombre { font-size: 1.15rem; }
.ld-pie-lema {
  margin-top: 1.4rem;
  max-width: 30ch;
  color: rgba(245, 240, 232, .65);
  text-wrap: pretty;
}

.ld-pie-datos { list-style: none; display: grid; gap: 1rem; align-content: start; }
.ld-pie-dato a, .ld-pie-dato { color: rgba(245, 240, 232, .8); }
.ld-pie-dato > *, .ld-pie-dato a {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  transition: color var(--transicion);
}
.ld-pie-dato a:hover { color: var(--blanco); }
.ld-pie-ico { padding-top: .28em; color: var(--terracota-claro); }

.ld-pie-menu { display: grid; gap: .85rem; align-content: start; }
.ld-pie-menu a {
  justify-self: start;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, .68);
  transition: color var(--transicion), transform var(--transicion);
}
.ld-pie-menu a:hover { color: var(--blanco); transform: translateX(4px); }

.ld-pie-base {
  max-width: var(--ancho);
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(245, 240, 232, .13);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  font-size: .9rem;
  color: rgba(245, 240, 232, .5);
}
.ld-pie-redes { display: flex; flex-wrap: wrap; gap: 1.75rem; }
.ld-pie-redes a {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .16em;
  transition: color var(--transicion);
}
.ld-pie-redes a:hover { color: var(--blanco); }

/* --------------------------------------------------------------------------
   Móvil
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* La barra pasa a logotipo + botón: cuatro enlaces espaciados no caben, y
     apretarlos los vuelve ilegibles. El cajón ya lleva el menú completo. */
  .ld-nav-lado { display: none; }
  .ld-boton-icono { display: grid; }
  .ld-topbar-fila { grid-template-columns: 1fr; }
  .ld-marca { justify-items: start; }

  .ld-ambiente { grid-template-columns: 1fr; }
  .ld-ambiente:nth-child(even) .ld-ambiente-foto { order: 0; }

  .ld-anfitrion,
  .ld-bloque,
  .ld-reservas { grid-template-columns: 1fr; }
  .ld-bloque-lado { position: static; }
  .ld-reservas-intro { position: static; }

  .ld-pie-cuerpo { grid-template-columns: 1fr 1fr; }

  /* En táctil no hay cursor que pase por encima: el pie de la galería no se
     vería nunca, así que se queda puesto y más discreto. */
  .ld-galeria-pie { opacity: 1; transform: none; font-size: .62rem; }
}

@media (max-width: 560px) {
  .ld-form-fila { grid-template-columns: 1fr; }
  .ld-pie-cuerpo { grid-template-columns: 1fr; }
  .ld-visor { grid-template-columns: 1fr; }
  .ld-visor-flecha.es-prev,
  .ld-visor-flecha.es-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .ld-visor-flecha.es-prev { left: .25rem; }
  .ld-visor-flecha.es-next { right: .25rem; }
  .ld-galeria { grid-template-columns: 1fr 1fr; }
}

/* El botón que cierra el cuerpo de un bloque necesita aire propio: pegado al
   último párrafo se lee como parte del texto. */
.ld-bloque-boton { margin-top: 2.5rem; }

/* ==========================================================================
   El panel
   --------------------------------------------------------------------------
   A partir de aquí, lo que solo ve quien ha entrado. Comparte tokens y
   tipografía con el sitio público a propósito: es la misma casa por dentro, y
   un panel con otra estética se siente como otra aplicación pegada al lado.
   Lo que sí cambia es la densidad — aquí se viene a hacer cosas, no a mirar—,
   así que el aire baja y aparecen las tablas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Utilidades de la cabecera
   -------------------------------------------------------------------------- */

/* Las utilidades van absolutas y no como una cuarta columna: la rejilla es
   `1fr auto 1fr` justamente para que el logotipo caiga en el eje de la página,
   y una columna más lo desplazaría. Sacarlas del flujo deja el logotipo
   centrado y ellas pegadas al margen derecho. */
.ld-topbar-util {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.ld-boton-icono.es-greb { display: grid; }

.ld-usuario { position: relative; }
.ld-usuario-boton { display: grid; place-items: center; }
.ld-avatar {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .06em;
}

.ld-usuario-menu {
  position: absolute;
  top: calc(100% + .75rem);
  right: 0;
  z-index: 65;
  min-width: 15rem;
  padding: .5rem;
  background: var(--papel);
  color: var(--tinta);
  border: 1px solid var(--papel-hondo);
  box-shadow: 0 18px 40px rgba(27, 26, 23, .16);
  animation: ld-sube 300ms var(--entrada) both;
}
.ld-usuario-cabecera {
  display: grid;
  gap: .15rem;
  padding: .75rem .85rem 1rem;
  border-bottom: 1px solid var(--papel-hondo);
  margin-bottom: .35rem;
}
.ld-usuario-cabecera span { font-size: .9rem; color: var(--humo); }
.ld-usuario-rol {
  font-family: var(--sans);
  font-size: .66rem !important;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terracota) !important;
}
.ld-usuario-menu a {
  display: block;
  padding: .6rem .85rem;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background var(--transicion), color var(--transicion);
}
.ld-usuario-menu a:hover { background: var(--papel-hondo); color: var(--terracota); }

.ld-velo.es-tenue { background: transparent; z-index: 60; }

.ld-cajon-panel {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terracota);
  border-bottom: 1px solid currentColor;
}

/* --------------------------------------------------------------------------
   Entrar
   -------------------------------------------------------------------------- */

.ld-entrar { display: grid; place-items: center; min-height: 70svh; }
.ld-entrar-caja { width: min(28rem, 100%); }
.ld-entrar-caja .ld-form { margin-top: 2.5rem; }
.ld-entrar-cerrado { margin-top: 2rem; color: var(--humo); }
.ld-entrar-cerrado code {
  font-family: ui-monospace, monospace;
  font-size: .9em;
  background: var(--papel-hondo);
  padding: .1em .4em;
}

/* --------------------------------------------------------------------------
   Escritorio
   -------------------------------------------------------------------------- */

.ld-esc-cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--papel-hondo);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.ld-esc-cifras { display: flex; flex-wrap: wrap; gap: 2.5rem; }
.ld-esc-cifra { display: grid; gap: .2rem; align-content: end; }
.ld-esc-cifra strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1;
}
.ld-esc-cifra.es-ancha strong { font-size: 1.35rem; }
.ld-esc-cifra span {
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--humo);
}
a.ld-esc-cifra:hover strong { color: var(--terracota); }

.ld-esc-grupo { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.ld-esc-grupo-titulo {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--humo);
  margin-bottom: 1.25rem;
}
.ld-esc-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
}
.ld-esc-tarjeta {
  display: block;
  padding: 1.5rem;
  background: var(--blanco);
  border: 1px solid var(--papel-hondo);
  transition: border-color var(--transicion), transform var(--transicion);
}
.ld-esc-tarjeta:hover { border-color: var(--terracota); transform: translateY(-2px); }
.ld-esc-tarjeta h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.45rem;
  margin-bottom: .4rem;
}
.ld-esc-tarjeta p { font-size: .95rem; color: var(--humo); }

/* --------------------------------------------------------------------------
   Panel: cabecera y pestañas
   -------------------------------------------------------------------------- */

.ld-panel-cabecera { margin-bottom: clamp(2rem, 4vw, 3rem); }
.ld-panel-pestanas { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }

.ld-filtro {
  /* `inline-flex` y no `inline-block`: desde que llevan icono, el texto y el
     trazo tienen que alinearse por su centro óptico. */
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid var(--papel-hondo);
  color: var(--humo);
  transition: border-color var(--transicion), color var(--transicion),
              background var(--transicion);
}
.ld-filtro:hover { border-color: var(--tinta); color: var(--tinta); }
.ld-filtro.es-actual { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
/* El icono va un punto más apagado que el rótulo: si pesan lo mismo, compiten. */
.ld-filtro .ld-ico { width: 1.05em; height: 1.05em; opacity: .65; }
.ld-filtro:hover .ld-ico, .ld-filtro.es-actual .ld-ico { opacity: 1; }

.ld-panel-filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.ld-panel-vacio { color: var(--humo); padding: 2rem 0; }

/* --------------------------------------------------------------------------
   Solicitudes
   -------------------------------------------------------------------------- */

.ld-sol-lista { display: grid; gap: .6rem; }

.ld-sol {
  background: var(--blanco);
  border: 1px solid var(--papel-hondo);
  /* El filete de color a la izquierda dice el estado sin leer nada. */
  border-left: 3px solid var(--humo);
  transition: border-color var(--transicion);
}
.ld-sol.es-solicitada  { border-left-color: var(--arena); }
.ld-sol.es-conversando { border-left-color: var(--ocre); }
.ld-sol.es-confirmada  { border-left-color: var(--verde); }
.ld-sol.es-preparacion { border-left-color: var(--azul); }
.ld-sol.es-celebrada   { border-left-color: var(--ciruela); }
.ld-sol.es-cancelada   { border-left-color: var(--papel-hondo); opacity: .62; }

.ld-sol-cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 1.5rem;
  align-items: center;
  width: 100%;
  padding: 1.1rem 1.25rem;
  text-align: left;
}
.ld-sol-fecha, .ld-sol-quien { display: grid; gap: .15rem; min-width: 0; }
.ld-sol-fecha strong { font-family: var(--serif); font-size: 1.15rem; }
.ld-sol-fecha span, .ld-sol-quien span {
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--humo);
}
.ld-sol-quien strong { font-weight: 500; }
.ld-sol-estado {
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--humo);
}

.ld-sol-cuerpo {
  padding: 0 1.25rem 1.5rem;
  border-top: 1px solid var(--papel-hondo);
  animation: ld-sube 320ms var(--entrada) both;
}
.ld-sol-datos { display: grid; gap: .75rem; padding: 1.25rem 0; }
.ld-sol-datos > div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; }
.ld-sol-datos dt {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--humo);
  padding-top: .2em;
}
.ld-sol-datos dd a { color: var(--terracota); border-bottom: 1px solid currentColor; }
.ld-sol-datos em { color: var(--humo); font-size: .9em; }

.ld-sol-acciones { display: grid; gap: 1rem; }
.ld-sol-botones { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* El botón secundario: mismo peso tipográfico, sin la caja llena. Cancelar no
   debe pesar visualmente lo mismo que confirmar. */
.ld-boton.es-fantasma {
  background: transparent;
  color: var(--tinta);
  border-color: var(--papel-hondo);
}
.ld-boton.es-fantasma::before { background: var(--papel-hondo); }
.ld-boton.es-fantasma:hover { color: var(--tinta); border-color: var(--tinta); }

/* --------------------------------------------------------------------------
   Calendario
   -------------------------------------------------------------------------- */

.ld-cal { max-width: 32rem; }
.ld-cal.es-cargando { opacity: .55; pointer-events: none; }

.ld-cal-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.ld-cal-mes { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; }
.ld-cal { --dia: var(--papel-hondo); }
.ld-cal-flecha {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--papel-hondo);
  transition: border-color var(--transicion), color var(--transicion);
}
.ld-cal-flecha:hover { border-color: var(--tinta); color: var(--terracota); }

.ld-cal-semana, .ld-cal-rejilla {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* Sueltos y no pegados. Antes iban a .3rem y la rejilla se leía como una
     tabla: el ojo veía una cuadrícula continua y había que buscar dónde
     terminaba un día y empezaba el siguiente. Con aire cada día es una ficha. */
  gap: .5rem;
}
.ld-cal-semana {
  margin-bottom: .4rem;
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .12em;
  color: var(--humo);
  text-align: center;
}

.ld-cal-dia {
  position: relative;
  display: grid;
  gap: .3rem;
  place-items: center;
  aspect-ratio: 1;
  padding: .3rem;
  background: var(--blanco);
  border: 1px solid var(--papel-hondo);
  /* El estado del día se dice con un filete de color abajo, no solo con los
     puntos: un día medio dado y uno libre tenían el mismo aspecto hasta que se
     miraban los puntos de cerca. */
  border-bottom: 2px solid var(--dia, var(--papel-hondo));
  font-family: var(--sans);
  font-size: .95rem;
  transition: border-color var(--transicion), background var(--transicion),
              transform var(--transicion), box-shadow var(--transicion);
}
.ld-cal-dia.es-libre  { --dia: var(--verde); }
.ld-cal-dia.es-pedido { --dia: var(--ocre); }
.ld-cal-dia.es-medio  { --dia: var(--ocre); }
.ld-cal-dia.es-lleno  { --dia: var(--terracota); }
.ld-cal-dia.es-cerrado { --dia: transparent; }

.ld-cal-dia:hover:not(:disabled) {
  border-color: var(--tinta);
  border-bottom-color: var(--dia);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(27, 26, 23, .07);
}
.ld-cal-dia:disabled {
  background: transparent;
  border-color: transparent;
  color: var(--papel-hondo);
  cursor: default;
}
.ld-cal-dia.es-sel {
  background: var(--tinta);
  border-color: var(--tinta);
  border-bottom-color: var(--dia);
  color: var(--papel);
}
.ld-cal-dia.es-lleno:not(.es-sel) { background: var(--papel-hondo); color: var(--humo); }
.ld-cal-hueco { aspect-ratio: 1; }

.ld-cal-marcas { display: flex; gap: .25rem; }
/* Los puntos son el estado de cada franja. Dos puntos por día: mediodía y
   noche. Es lo que permite ver «la noche está dada pero el mediodía no» sin
   abrir el día. */
.ld-cal-marca {
  width: .38rem;
  height: .38rem;
  border-radius: 50%;
  background: var(--verde);
  display: inline-block;
}
.ld-cal-marca.es-solicitada { background: var(--ocre); }
/* La franja tomada va hueca y no rellena: «no queda» se lee mejor como un
   hueco que como una mancha, y además la distingue de la solicitada sin
   depender de acertar el color. */
.ld-cal-marca.es-tomada {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--terracota);
}
.ld-cal-dia.es-sel .ld-cal-marca { outline: 1px solid var(--papel); }
.ld-cal-dia.es-sel .ld-cal-marca.es-tomada { box-shadow: inset 0 0 0 1px var(--papel); }

.ld-cal-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
  margin-top: 1.25rem;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--humo);
}
.ld-cal-leyenda li { display: flex; align-items: center; gap: .45rem; }
.ld-cal-leyenda .ld-cal-marca.es-tomada { box-shadow: inset 0 0 0 1px var(--terracota); }

/* --------------------------------------------------------------------------
   Franjas y sugerencias
   -------------------------------------------------------------------------- */

.ld-franjas { margin-top: 2.5rem; }
.ld-franjas-lista { display: grid; gap: .6rem; margin-top: 1rem; }

.ld-franja {
  display: grid;
  gap: .2rem;
  padding: 1rem 1.15rem;
  text-align: left;
  background: var(--blanco);
  border: 1px solid var(--papel-hondo);
  transition: border-color var(--transicion), background var(--transicion);
}
.ld-franja:hover:not(:disabled) { border-color: var(--tinta); }
.ld-franja.es-sel { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.ld-franja:disabled { opacity: .5; cursor: default; }
.ld-franja strong { font-family: var(--serif); font-size: 1.2rem; font-weight: 400; }
.ld-franja span {
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--humo);
}
.ld-franja.es-sel span { color: rgba(245, 240, 232, .7); }
.ld-franja-estado { color: var(--terracota) !important; }
.ld-franja.es-libre .ld-franja-estado { color: var(--verde) !important; }

.ld-sugerencias { margin-top: 2.5rem; }
.ld-sugerencias-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: .6rem;
  margin-top: 1rem;
}
.ld-sugerencia {
  display: grid;
  gap: .2rem;
  padding: .85rem 1rem;
  text-align: left;
  border: 1px solid var(--papel-hondo);
  transition: border-color var(--transicion), background var(--transicion);
}
.ld-sugerencia:hover { border-color: var(--terracota); background: var(--blanco); }
.ld-sugerencia strong { font-family: var(--serif); font-size: 1.05rem; font-weight: 400; }
.ld-sugerencia span {
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--humo);
}

.ld-reservas-cal { align-self: start; }
.ld-form-resumen { padding: 1rem 0; border-top: 1px solid var(--papel-hondo); }
.ld-form-problemas {
  list-style: none;
  display: grid;
  gap: .4rem;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--terracota);
  background: var(--blanco);
  color: var(--terracota);
  font-size: .95rem;
}
.ld-form-aviso { color: var(--verde); font-size: .95rem; }

.ld-gracias { text-align: center; min-height: 60svh; display: grid; align-content: center; }
.ld-gracias .ld-entradilla { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Bloqueos
   -------------------------------------------------------------------------- */

.ld-panel-cal { display: grid; gap: 2.5rem; max-width: 40rem; }
.ld-panel-bloqueo {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--blanco);
  border: 1px solid var(--papel-hondo);
}
.ld-panel-bloqueo p { font-size: .95rem; color: var(--humo); }
.ld-panel-bloqueos h3 {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--humo);
  margin-bottom: 1rem;
}
.ld-panel-bloqueos ul { list-style: none; display: grid; gap: .5rem; }
.ld-panel-bloqueos li {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding: .75rem 0;
  border-bottom: 1px solid var(--papel-hondo);
}

/* --------------------------------------------------------------------------
   Usuarios
   -------------------------------------------------------------------------- */

.ld-usuarios-alta {
  padding: 1.5rem;
  background: var(--blanco);
  border: 1px solid var(--papel-hondo);
  margin-bottom: 2rem;
}
.ld-usuarios-alias { display: block; font-size: .8rem; color: var(--humo); }

/* La clave se enseña una vez y no vuelve. El aviso se queda fijo hasta que se
   cierra a mano: uno que se va solo puede irse antes de que la copien. */
.ld-clave-aviso {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  margin-bottom: 2rem;
  background: var(--verde);
  color: var(--papel);
}
.ld-clave-aviso .ld-etiqueta { color: var(--terracota-claro); }
.ld-clave-aviso .ld-form-nota { color: rgba(245, 240, 232, .7); max-width: 44ch; }
.ld-clave {
  display: inline-block;
  margin: .6rem 0;
  padding: .5rem .9rem;
  background: rgba(245, 240, 232, .12);
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 1.5rem;
  letter-spacing: .08em;
  user-select: all;
}
.ld-clave-aviso .ld-boton { background: var(--papel); color: var(--verde); border-color: var(--papel); }

.ld-tabla-envoltura { overflow-x: auto; margin-top: 2rem; }
.ld-tabla { width: 100%; border-collapse: collapse; min-width: 46rem; }
.ld-tabla th {
  text-align: left;
  padding: .75rem 1rem;
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--humo);
  border-bottom: 1px solid var(--papel-hondo);
}
.ld-tabla td { padding: 1rem; border-bottom: 1px solid var(--papel-hondo); vertical-align: top; }
.ld-tabla tr.es-inactivo { opacity: .5; }
.ld-tabla select { padding: .4rem .5rem; border: 1px solid var(--papel-hondo); background: var(--blanco); }
.ld-usuarios-acciones { display: flex; flex-wrap: wrap; gap: 1rem; }

/* --------------------------------------------------------------------------
   Redactar
   -------------------------------------------------------------------------- */

.ld-redactar-cuerpo { display: grid; gap: 1.5rem; max-width: 52rem; }
.ld-bloques { display: grid; gap: .75rem; }

.ld-bloque-editor {
  background: var(--blanco);
  border: 1px solid var(--papel-hondo);
  padding: .75rem;
}
.ld-bloque-barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: .6rem;
}
.ld-bloque-barra select {
  padding: .35rem .5rem;
  border: 1px solid var(--papel-hondo);
  background: var(--papel);
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ld-bloque-acciones { display: flex; gap: .25rem; }
.ld-bloque-acciones button {
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  color: var(--humo);
  transition: border-color var(--transicion), color var(--transicion);
}
.ld-bloque-acciones button:hover { border-color: var(--papel-hondo); color: var(--terracota); }

.ld-bloque-texto {
  width: 100%;
  padding: .7rem .8rem;
  border: 1px solid var(--papel-hondo);
  background: var(--papel);
  resize: vertical;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.6;
}
.ld-bloque-texto:focus { border-color: var(--tinta); outline: none; }

.ld-redactar-botones { margin-top: 2.5rem; }
.ld-previa { max-width: var(--columna); }

/* --------------------------------------------------------------------------
   Artículos
   -------------------------------------------------------------------------- */

.ld-articulo-portada img { width: 100%; height: clamp(16rem, 44vw, 30rem); object-fit: cover; }
.ld-articulo-texto { max-width: calc(var(--columna) + 6rem); }
.ld-articulo-firma {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 1.75rem 0 2.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--papel-hondo);
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--humo);
}
.ld-articulo-cuerpo { max-width: var(--columna); }
.ld-articulo-cuerpo > * + * { margin-top: 1.35rem; }
.ld-articulo-cuerpo p { font-size: 1.185rem; line-height: 1.72; text-wrap: pretty; }
.ld-articulo-cuerpo h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  line-height: 1.15;
  margin-top: 2.75rem;
}
.ld-articulo-cuerpo h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.35rem;
  margin-top: 2rem;
}
.ld-articulo-cuerpo blockquote {
  padding-left: 1.5rem;
  border-left: 2px solid var(--terracota);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.45;
}
.ld-articulo-cuerpo ul { padding-left: 1.25rem; }
.ld-articulo-cuerpo li { margin-bottom: .5rem; }
.ld-articulo-cuerpo figure { margin: 2.5rem 0; }
.ld-articulo-cuerpo figcaption {
  margin-top: .75rem;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--humo);
}

/* --------------------------------------------------------------------------
   Componer para Instagram
   -------------------------------------------------------------------------- */

.ld-publicar-cuerpo { display: grid; gap: 2rem; max-width: 56rem; }

/* La tira reproduce el carrusel: se desliza en horizontal, como en el
   teléfono. Ver las láminas en columna no dice nada de cómo se van a leer. */
.ld-lam-tira {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  padding-bottom: .75rem;
  scroll-snap-type: x mandatory;
}
.ld-lam-celda {
  position: relative;
  flex: none;
  width: 11rem;
  padding: 0;
  border: 1px solid var(--papel-hondo);
  scroll-snap-align: start;
  transition: border-color var(--transicion), transform var(--transicion);
}
.ld-lam-celda:hover { border-color: var(--tinta); }
.ld-lam-celda.es-sel { border-color: var(--terracota); transform: translateY(-2px); }
.ld-lam-celda canvas { width: 100%; height: auto; display: block; }
.ld-lam-num {
  position: absolute;
  inset: auto 0 0 0;
  padding: .35rem;
  background: rgba(27, 26, 23, .7);
  color: var(--papel);
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ld-lam-celda.es-anadir {
  display: grid;
  place-items: center;
  aspect-ratio: 1080 / 1350;
  font-size: 2rem;
  color: var(--humo);
}

.ld-lam-editor {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--blanco);
  border: 1px solid var(--papel-hondo);
}

@media (max-width: 900px) {
  .ld-sol-cabecera { grid-template-columns: 1fr; gap: .6rem; }
  .ld-sol-datos > div { grid-template-columns: 1fr; gap: .2rem; }
  .ld-esc-cifras { gap: 1.5rem; }
  .ld-cal { max-width: none; }
}

/* ==========================================================================
   Eventos
   --------------------------------------------------------------------------
   Un evento se lee de otra manera que una experiencia: lo que importa es la
   fecha y si queda sitio, no la foto. Por eso la ficha es apaisada y la fecha
   va primero, arriba del título.
   ========================================================================== */

.ld-eventos-lista { display: grid; gap: 1rem; }

.ld-evento {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  background: var(--blanco);
  border: 1px solid var(--papel-hondo);
  overflow: hidden;
  transition: border-color var(--transicion);
}
.ld-evento:hover { border-color: var(--terracota-claro); }
.ld-evento-foto img { width: 100%; height: 100%; object-fit: cover; min-height: 11rem; }
.ld-evento-cuerpo { padding: 1.75rem; display: grid; align-content: start; gap: .6rem; }
.ld-evento-cuerpo h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  line-height: 1.12;
}
.ld-evento-texto { color: var(--tinta-suave); max-width: 56ch; text-wrap: pretty; }

.ld-evento-pie {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-items: center;
  margin-top: .75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--papel-hondo);
}
.ld-evento-apuntado {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--verde);
}
.ld-evento-lleno {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--humo);
}
.ld-evento-cupo {
  margin-left: auto;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--humo);
}
.ld-evento-apuntarse { display: grid; gap: 1rem; width: 100%; }
.ld-evento-apuntarse .ld-campo { max-width: 10rem; }

/* La puerta: lo que ve quien llega sin cuenta. Centrada y sin lista detrás,
   para que no parezca una página que falló al cargar. */
.ld-eventos-puerta {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 62svh;
  align-content: center;
}
.ld-eventos-puerta .ld-entradilla { margin-inline: auto; }
.ld-eventos-puerta .ld-sol-botones { justify-content: center; margin-top: 2.5rem; }

/* El aviso de la portada. Fondo de papel hondo para separarlo de las secciones
   de alrededor sin meter otra banda a sangre. */
.ld-eventos-aviso {
  background: var(--papel-hondo);
  max-width: none;
  text-align: center;
}
.ld-eventos-aviso > * { max-width: var(--ancho); margin-inline: auto; }
.ld-eventos-aviso .ld-titulo-seccion::after { margin-inline: auto; }
.ld-eventos-aviso .ld-entradilla { margin-inline: auto; }
.ld-eventos-aviso .ld-sol-botones { justify-content: center; margin-top: 2.5rem; }

.ld-panel-eventos { display: grid; gap: 2rem; }
.ld-panel-apuntados { list-style: none; display: grid; gap: .5rem; padding-top: 1.25rem; }
.ld-panel-apuntados li {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--papel-hondo);
  font-size: .95rem;
}
.ld-panel-apuntados span { color: var(--humo); }

@media (max-width: 760px) {
  .ld-evento { grid-template-columns: 1fr; }
  .ld-evento-foto img { min-height: 12rem; max-height: 14rem; }
  .ld-evento-cupo { margin-left: 0; }
}

/* ==========================================================================
   El tablero y el rider
   --------------------------------------------------------------------------
   El kanban es la vista principal del panel: una columna por paso, de que
   alguien pide una fecha a que el evento termina. Se desplaza en horizontal
   porque cinco columnas legibles no caben en una pantalla de portátil, y
   apretarlas hasta que quepan convierte cada tarjeta en un sello ilegible.
   ========================================================================== */

.ld-kb-ayuda {
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--humo);
  margin-bottom: 1.25rem;
}

.ld-kb-tablero {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(17.5rem, 1fr);
  gap: .75rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  align-items: start;
}

.ld-kb-columna {
  background: rgba(229, 220, 205, .4);
  border: 1px solid var(--papel-hondo);
  /* El filete de arriba es el acento del paso: es lo que hace que el tablero
     se lea de un vistazo sin leer los títulos. */
  border-top: 3px solid var(--acento, var(--papel-hondo));
  border-radius: 0;
  padding: 1rem;
  min-height: 12rem;
  transition: background var(--transicion), border-color var(--transicion);
}
.ld-kb-columna.es-arena   { --acento: var(--arena);     --acento-suave: var(--arena-suave); }
.ld-kb-columna.es-ocre    { --acento: var(--ocre);      --acento-suave: var(--ocre-suave); }
.ld-kb-columna.es-verde   { --acento: var(--verde);     --acento-suave: var(--verde-suave); }
.ld-kb-columna.es-azul    { --acento: var(--azul);      --acento-suave: var(--azul-suave); }
.ld-kb-columna.es-ciruela { --acento: var(--ciruela);   --acento-suave: var(--ciruela-suave); }

.ld-kb-columna .ld-kb-cabecera-col h3 { color: var(--acento); }
.ld-kb-columna .ld-kb-cabecera-col .ld-ico { color: var(--acento); }
.ld-kb-cuenta { background: var(--acento-suave); border-color: transparent; }
.ld-kb-columna .ld-kb-tarjeta { border-left: 2px solid var(--acento-suave); }
.ld-kb-columna .ld-kb-tarjeta:hover { border-left-color: var(--acento); }
.ld-kb-fecha span { color: var(--acento, var(--terracota)); }
/* El destino se ilumina mientras se arrastra encima: sin eso, soltar es a
   ciegas y la tarjeta acaba en la columna de al lado. */
.ld-kb-columna.es-destino {
  background: var(--blanco);
  border-color: var(--terracota);
}

.ld-kb-cabecera-col { margin-bottom: 1rem; }
.ld-kb-cabecera-col h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ld-kb-cuenta {
  font-size: .68rem;
  color: var(--humo);
  background: var(--papel);
  border: 1px solid var(--papel-hondo);
  padding: .05rem .45rem;
}
.ld-kb-cabecera-col p {
  margin-top: .4rem;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--humo);
}

.ld-kb-pila { display: grid; gap: .6rem; }

.ld-kb-tarjeta {
  background: var(--blanco);
  border: 1px solid var(--papel-hondo);
  cursor: grab;
  transition: border-color var(--transicion), box-shadow var(--transicion),
              transform var(--transicion);
}
.ld-kb-tarjeta:hover { border-color: var(--tinta); box-shadow: 0 6px 18px rgba(27,26,23,.07); }
.ld-kb-tarjeta:active { cursor: grabbing; }
.ld-kb-tarjeta.es-abierta { border-color: var(--terracota); }

.ld-kb-cabecera {
  display: grid;
  gap: .35rem;
  width: 100%;
  padding: .9rem 1rem;
  text-align: left;
}
.ld-kb-fecha {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--humo);
}
.ld-kb-fecha span { color: var(--terracota); }
.ld-kb-tarjeta h4 { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; line-height: 1.15; }
.ld-kb-datos { font-size: .88rem; color: var(--tinta-suave); }
.ld-kb-rider {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: .3rem;
  font-family: var(--sans);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--humo);
}

.ld-kb-cuerpo {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--papel-hondo);
  animation: ld-sube 300ms var(--entrada) both;
}
.ld-kb-cuerpo .ld-sol-datos { padding: 1rem 0; }
.ld-kb-cuerpo .ld-sol-datos > div { grid-template-columns: 6rem 1fr; gap: .75rem; }
.ld-kb-mover {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--papel-hondo);
}
.ld-enlace-mas.es-peligro { color: var(--terracota); }

.ld-kb-canceladas { margin-top: 2rem; }
.ld-kb-canceladas summary {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--humo);
  cursor: pointer;
  padding: .75rem 0;
}
.ld-kb-canceladas .ld-kb-pila { max-width: 22rem; opacity: .65; }

/* --------------------------------------------------------------------------
   El rider
   -------------------------------------------------------------------------- */

.ld-rider {
  padding: 1.25rem 0;
  border-top: 1px solid var(--papel-hondo);
  display: grid;
  gap: 1rem;
}
.ld-rider-cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}
.ld-rider-avance {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--humo);
}
/* La barra dice de un vistazo si el evento está listo o va a medias. */
.ld-rider-barra {
  display: block;
  width: 4.5rem;
  height: 3px;
  background: var(--papel-hondo);
  overflow: hidden;
}
.ld-rider-barra i {
  display: block;
  height: 100%;
  background: var(--verde);
  transition: width var(--transicion);
}

.ld-rider-lista { list-style: none; display: grid; gap: .2rem; }
.ld-rider-linea {
  position: relative;
  display: grid;
  gap: .2rem;
  padding: .5rem 2rem .5rem 0;
  border-bottom: 1px solid var(--papel-hondo);
}
.ld-rider-linea.es-hecha .ld-rider-label { color: var(--humo); text-decoration: line-through; }
.ld-rider-tilde { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; }
.ld-rider-tilde input { margin-top: .3em; accent-color: var(--verde); }
.ld-rider-label em { color: var(--humo); font-style: normal; font-size: .85em; }
.ld-rider-label strong { color: var(--terracota); font-weight: 500; }
.ld-rider-nota { padding-left: 1.6rem; font-size: .88rem; color: var(--humo); }
.ld-rider-quitar {
  position: absolute;
  top: .35rem;
  right: 0;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  color: var(--papel-hondo);
  transition: color var(--transicion);
}
.ld-rider-linea:hover .ld-rider-quitar { color: var(--terracota); }

.ld-rider-vacio { display: grid; gap: 1rem; }
.ld-rider-vacio p { color: var(--humo); font-size: .95rem; }

.ld-rider-catalogo {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  background: var(--papel);
  border: 1px solid var(--papel-hondo);
}
.ld-rider-bloque { display: grid; gap: .5rem; }
.ld-rider-fichas { display: flex; flex-wrap: wrap; gap: .35rem; }
.ld-rider-ficha {
  padding: .35rem .7rem;
  border: 1px solid var(--papel-hondo);
  background: var(--blanco);
  font-size: .85rem;
  transition: border-color var(--transicion), color var(--transicion);
}
.ld-rider-ficha:hover { border-color: var(--terracota); color: var(--terracota); }
.ld-rider-libre { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.ld-rider-libre input {
  flex: 1 1 14rem;
  padding: .55rem .7rem;
  border: 1px solid var(--papel-hondo);
  background: var(--blanco);
}

/* --------------------------------------------------------------------------
   Las casillas del formulario público
   -------------------------------------------------------------------------- */

.ld-necesidades { border: none; padding: 0; }
.ld-necesidades-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: .4rem;
  margin: .75rem 0 .75rem;
}
.ld-necesidad {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: .7rem;
  align-items: center;
  padding: .8rem .9rem;
  background: var(--blanco);
  border: 1px solid var(--papel-hondo);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transicion), background var(--transicion);
}
.ld-necesidad:hover { border-color: var(--tinta); }
.ld-necesidad.es-marcada { border-color: var(--terracota); background: rgba(180, 87, 58, .05); }
.ld-necesidad input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  margin: 0;
  accent-color: var(--terracota);
}
.ld-necesidad .ld-ico { width: 1.25em; height: 1.25em; color: var(--humo); }
.ld-necesidad.es-marcada .ld-ico { color: var(--terracota); }
.ld-necesidad span { line-height: 1.3; }

/* El aviso de que en este mes no queda nada que pedir. Sin él, un mes entero
   apagado se lee como una avería del sitio. */
.ld-cal-aviso {
  margin-top: 1.25rem;
  padding: .9rem 1rem;
  background: var(--papel-hondo);
  font-size: .92rem;
  color: var(--tinta-suave);
}
.ld-cal-aviso .ld-enlace-mas { margin-top: .5rem; display: inline-block; }

@media (max-width: 900px) {
  .ld-kb-tablero { grid-auto-columns: minmax(15.5rem, 82vw); }
}

/* El editor del catálogo. La casilla de «sale en el formulario» reusa el
   aspecto de las del formulario público a propósito: es literalmente lo que
   está decidiendo. */
.ld-servicios { display: grid; gap: 1.5rem; }
.ld-servicios-form {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--blanco);
  border: 1px solid var(--papel-hondo);
}
.ld-servicios-casilla { align-self: end; }
.ld-servicios-nombre { display: flex; align-items: center; gap: .6rem; }
.ld-servicios-nombre .ld-ico { color: var(--humo); }

/* ==========================================================================
   La ficha flotante
   --------------------------------------------------------------------------
   El detalle de una reserva se abre a un lado y no dentro de la columna: con
   el rider entero dentro, una tarjeta abierta medía cinco veces lo que las
   demás y empujaba el resto fuera de la pantalla.
   ========================================================================== */

.ld-ficha {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 80;
  width: min(42rem, 100vw);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 3.5rem 2rem 3rem;
  background: var(--papel);
  border-left: 1px solid var(--papel-hondo);
  box-shadow: -20px 0 50px rgba(27, 26, 23, .12);
  animation: ld-ficha-entra 420ms var(--entrada) both;
}
@keyframes ld-ficha-entra { from { transform: translateX(100%); } }

.ld-ficha-cerrar {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  transition: transform var(--transicion), color var(--transicion);
}
.ld-ficha-cerrar:hover { transform: rotate(90deg); color: var(--terracota); }

.ld-ficha-cabecera { padding-bottom: 1.5rem; border-bottom: 1px solid var(--papel-hondo); }
.ld-ficha-cabecera h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.3rem);
  line-height: 1.1;
  margin: .5rem 0 .75rem;
}
.ld-ficha-cuando { font-family: var(--serif); font-size: 1.1rem; }
.ld-ficha-cuando span { color: var(--humo); }
.ld-ficha-datos {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--humo);
  margin-top: .5rem;
}

/* El contacto va arriba y como botones grandes: lo primero que se hace con una
   solicitud es llamar o escribir, y un correo en letra pequeña dentro de una
   lista de datos obliga a apuntar a un objetivo de dos milímetros. */
.ld-ficha-contacto { display: grid; gap: .4rem; padding: 1.25rem 0; }
.ld-ficha-boton {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem .9rem;
  background: var(--blanco);
  border: 1px solid var(--papel-hondo);
  font-size: .95rem;
  transition: border-color var(--transicion), color var(--transicion);
}
.ld-ficha-boton:hover { border-color: var(--terracota); color: var(--terracota); }
.ld-ficha-boton .ld-ico { color: var(--humo); }
.ld-ficha-boton:hover .ld-ico { color: var(--terracota); }

.ld-ficha-bloque { padding: 1.25rem 0; border-top: 1px solid var(--papel-hondo); }
.ld-ficha-bloque .ld-etiqueta { margin-bottom: .85rem; }
.ld-ficha-mensaje { line-height: 1.6; text-wrap: pretty; }

.ld-ficha-pedido { list-style: none; display: grid; gap: .5rem; }
.ld-ficha-pedido li { display: flex; align-items: center; gap: .6rem; font-size: .95rem; }
.ld-ficha-pedido .ld-ico { color: var(--humo); }

.ld-ficha-pasos { display: flex; flex-wrap: wrap; gap: .4rem; }
.ld-ficha-paso {
  padding: .5rem .85rem;
  border: 1px solid var(--papel-hondo);
  background: var(--blanco);
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: border-color var(--transicion), color var(--transicion);
}
.ld-ficha-paso:hover:not(:disabled) { border-color: var(--tinta); }
.ld-ficha-paso.es-actual {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
  cursor: default;
}
.ld-ficha-paso.es-peligro { color: var(--terracota); border-color: var(--terracota-claro); }

.ld-ficha .ld-rider { border-top: 1px solid var(--papel-hondo); }

/* --- El historial --- */
/* Un filete vertical con un punto por línea. Es una cronología, y sin la línea
   que las une se lee como una lista suelta de frases. */
.ld-hist { list-style: none; display: grid; gap: 0; }
.ld-hist-linea {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .85rem;
  padding: 0 0 1.1rem;
}
.ld-hist-linea::before {
  content: "";
  position: absolute;
  left: .28rem;
  top: .9rem;
  bottom: 0;
  width: 1px;
  background: var(--papel-hondo);
}
.ld-hist-linea:last-child::before { display: none; }
.ld-hist-punto {
  width: .62rem;
  height: .62rem;
  margin-top: .35rem;
  border-radius: 50%;
  background: var(--papel-hondo);
  border: 1px solid var(--papel-hondo);
}
.ld-hist-linea.es-creada .ld-hist-punto { background: var(--verde); border-color: var(--verde); }
.ld-hist-linea.es-nota .ld-hist-punto { background: var(--papel); border-color: var(--ocre); }
.ld-hist-linea.es-estado .ld-hist-punto { background: var(--terracota); border-color: var(--terracota); }
.ld-hist-que { font-size: .95rem; }
.ld-hist-de { color: var(--humo); }
.ld-hist-nota { margin-top: .2rem; color: var(--tinta-suave); font-size: .92rem; }
.ld-hist-cuando {
  margin-top: .2rem;
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--humo);
}

.ld-ficha-nota { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.ld-ficha-nota input {
  flex: 1 1 12rem;
  padding: .6rem .75rem;
  background: var(--blanco);
  border: 1px solid var(--papel-hondo);
}

/* La lista, ahora que su detalle vive en la ficha. */
.ld-sol-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 1.5rem;
  align-items: center;
  width: 100%;
  padding: 1.1rem 1.25rem;
  text-align: left;
}

@media (max-width: 700px) {
  .ld-ficha { padding: 3.5rem 1.25rem 2.5rem; }
  .ld-sol-fila { grid-template-columns: 1fr; gap: .6rem; }
}

/* --------------------------------------------------------------------------
   El directorio de clientes
   -------------------------------------------------------------------------- */

.ld-clientes { display: grid; gap: 1.25rem; }

.ld-clientes-barra {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}
.ld-clientes-busca {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex: 1 1 18rem;
  padding: .6rem .9rem;
  background: var(--blanco);
  border: 1px solid var(--papel-hondo);
  transition: border-color var(--transicion);
}
.ld-clientes-busca:focus-within { border-color: var(--tinta); }
.ld-clientes-busca .ld-ico { color: var(--humo); }
.ld-clientes-busca input { flex: 1; border: none; background: none; outline: none; }

.ld-clientes-lista { display: grid; gap: .4rem; }

.ld-cliente {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 1.5rem;
  align-items: center;
  width: 100%;
  padding: .95rem 1.15rem;
  text-align: left;
  background: var(--blanco);
  border: 1px solid var(--papel-hondo);
  border-left: 2px solid var(--arena);
  transition: border-color var(--transicion);
}
.ld-cliente:hover { border-color: var(--tinta); border-left-color: var(--terracota); }
.ld-cliente.es-abierto { border-left-color: var(--terracota); }
.ld-cliente-quien { display: grid; gap: .1rem; min-width: 0; }
.ld-cliente-quien strong { font-family: var(--serif); font-size: 1.15rem; font-weight: 400; }
.ld-cliente-quien span { font-size: .88rem; color: var(--humo); }
.ld-cliente-veces, .ld-cliente-ultima {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--humo);
}

.ld-cliente-cuerpo {
  padding: 1rem 1.15rem 1.5rem;
  background: var(--blanco);
  border: 1px solid var(--papel-hondo);
  border-top: none;
  border-left: 2px solid var(--terracota);
  animation: ld-sube 300ms var(--entrada) both;
}
.ld-cliente-form { display: grid; gap: 1rem; padding: 1rem 0; }
.ld-cliente-detalle .ld-ficha-contacto { padding-top: 0; }

.ld-cliente-reservas { list-style: none; display: grid; gap: .3rem; }
.ld-cliente-reservas button {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: baseline;
  width: 100%;
  padding: .6rem 0;
  text-align: left;
  border-bottom: 1px solid var(--papel-hondo);
  transition: color var(--transicion);
}
.ld-cliente-reservas button:hover { color: var(--terracota); }
.ld-cliente-reservas strong { font-family: var(--serif); font-weight: 400; }
.ld-cliente-reservas span { font-size: .88rem; color: var(--humo); }
.ld-cliente-reservas em {
  font-family: var(--sans);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--humo);
}

.ld-ficha-editar { margin-bottom: 1rem; }

/* --------------------------------------------------------------------------
   Subtareas y asignados
   -------------------------------------------------------------------------- */

.ld-rider-fila {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}
.ld-rider-acciones { display: flex; align-items: center; gap: .35rem; flex: none; }

/* El responsable se enseña puesto o no: un hueco vacío que se puede pulsar es
   lo que hace que alguien lo rellene. */
.ld-rider-quien {
  padding: .2rem .55rem;
  background: var(--arena-suave);
  font-family: var(--sans);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  white-space: nowrap;
  transition: background var(--transicion), color var(--transicion);
}
.ld-rider-quien:hover { background: var(--terracota); color: var(--papel); }
.ld-rider-quien.es-vacio { background: transparent; color: var(--papel-hondo); }
.ld-rider-quien.es-vacio:hover { color: var(--terracota); background: transparent; }

.ld-rider-icono {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--papel-hondo);
  transition: color var(--transicion);
}
.ld-rider-icono:hover { color: var(--terracota); }
.ld-rider-icono .ld-ico { width: 1em; height: 1em; }

.ld-rider-hijas {
  list-style: none;
  display: grid;
  gap: 0;
  margin: .35rem 0 .35rem 1.65rem;
  padding-left: .9rem;
  border-left: 1px solid var(--papel-hondo);
}
.ld-rider-linea.es-hija { padding-top: .35rem; padding-bottom: .35rem; border-bottom: none; }
.ld-rider-linea.es-hija .ld-rider-label { font-size: .92rem; }

.ld-rider-nueva { display: flex; gap: .75rem; align-items: center; padding: .4rem 0; }
.ld-rider-nueva input {
  flex: 1;
  padding: .45rem .6rem;
  background: var(--blanco);
  border: 1px solid var(--papel-hondo);
  font-size: .92rem;
}

.ld-asignar {
  display: grid;
  gap: .5rem;
  margin: .5rem 0 .5rem 1.65rem;
  padding: .85rem;
  background: var(--papel);
  border: 1px solid var(--papel-hondo);
}
.ld-asignar-busca {
  padding: .5rem .65rem;
  background: var(--blanco);
  border: 1px solid var(--papel-hondo);
}
.ld-asignar-lista { display: grid; gap: .15rem; max-height: 13rem; overflow-y: auto; }
.ld-asignar-opcion {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .55rem;
  text-align: left;
  font-size: .92rem;
  transition: background var(--transicion);
}
.ld-asignar-opcion:hover { background: var(--arena-suave); }
.ld-asignar-opcion .ld-ico { width: 1em; height: 1em; color: var(--humo); }
.ld-asignar-opcion span { flex: 1; }
.ld-asignar-opcion em {
  font-family: var(--sans);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--humo);
}
.ld-asignar-opcion.es-nueva { color: var(--terracota); }
.ld-asignar-pie { display: flex; gap: 1rem; justify-content: flex-end; }

@media (max-width: 700px) {
  .ld-cliente { grid-template-columns: 1fr; gap: .4rem; }
  .ld-rider-fila { flex-wrap: wrap; }
  .ld-cliente-reservas button { grid-template-columns: 1fr; gap: .2rem; }
}

/* ==========================================================================
   El tablero del evento, dentro de la ficha
   --------------------------------------------------------------------------
   Quien abre una reserva no viene a leer una ficha: viene a saber si eso va
   bien. Por eso lo primero son tres cifras y un raíl, y no una lista de datos.
   ========================================================================== */

.ld-tablero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: .5rem;
  margin: 1.25rem 0;
}
.ld-tablero-cifra {
  display: grid;
  gap: .15rem;
  padding: .9rem 1rem;
  background: var(--blanco);
  border: 1px solid var(--papel-hondo);
  border-top: 2px solid var(--arena);
}
.ld-tablero-cifra strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1;
}
.ld-tablero-cifra span {
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--humo);
}
/* La cuenta atrás cambia de color conforme aprieta: no es decoración, es la
   diferencia entre «hay tiempo» y «es pasado mañana». */
.ld-tablero-cifra.es-cerca  { border-top-color: var(--terracota); }
.ld-tablero-cifra.es-cerca strong { color: var(--terracota); }
.ld-tablero-cifra.es-lejos  { border-top-color: var(--verde); }
.ld-tablero-cifra.es-pasado { border-top-color: var(--papel-hondo); opacity: .7; }

/* --- El raíl del flujo --- */

.ld-tablero-flujo {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  margin: 1.5rem 0;
  padding: 0;
}
.ld-tablero-flujo li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .45rem;
  padding-top: .3rem;
}
/* La línea que une las paradas. Se dibuja desde cada una hacia la siguiente,
   así que la última no lleva. */
.ld-tablero-flujo li::before {
  content: "";
  position: absolute;
  top: 1.1rem;
  left: 50%;
  right: -50%;
  height: 1px;
  background: var(--papel-hondo);
}
.ld-tablero-flujo li:last-child::before { display: none; }
.ld-tablero-flujo li.es-hecho::before { background: var(--verde); }

.ld-tablero-punto {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--papel);
  border: 1px solid var(--papel-hondo);
  color: var(--papel-hondo);
  transition: all var(--transicion);
}
.ld-tablero-punto .ld-ico { width: .95em; height: .95em; }
.ld-tablero-flujo li.es-hecho .ld-tablero-punto {
  border-color: var(--verde);
  color: var(--verde);
}
.ld-tablero-flujo li.es-actual .ld-tablero-punto {
  background: var(--paso, var(--tinta));
  border-color: var(--paso, var(--tinta));
  color: var(--papel);
  transform: scale(1.12);
}
.ld-tablero-flujo li.es-arena   { --paso: var(--arena); }
.ld-tablero-flujo li.es-ocre    { --paso: var(--ocre); }
.ld-tablero-flujo li.es-verde   { --paso: var(--verde); }
.ld-tablero-flujo li.es-azul    { --paso: var(--azul); }
.ld-tablero-flujo li.es-ciruela { --paso: var(--ciruela); }

.ld-tablero-paso {
  font-family: var(--sans);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--humo);
  line-height: 1.3;
}
.ld-tablero-flujo li.es-actual .ld-tablero-paso { color: var(--paso); font-weight: 500; }
.ld-tablero-flujo.es-cancelada { opacity: .45; }
.ld-tablero-flujo li.es-anulada .ld-tablero-paso { color: var(--terracota); opacity: 1; }

/* --- El mes del evento --- */

.ld-tablero-fila {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  padding: 1.25rem 0;
  border-top: 1px solid var(--papel-hondo);
}

.ld-mini-mes { width: 13rem; }
.ld-mini-titulo {
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--humo);
  margin-bottom: .6rem;
}
.ld-mini-semana, .ld-mini-rejilla {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .2rem;
}
.ld-mini-semana {
  font-family: var(--sans);
  font-size: .55rem;
  color: var(--papel-hondo);
  text-align: center;
  margin-bottom: .25rem;
}
.ld-mini-rejilla span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  font-family: var(--sans);
  font-size: .68rem;
  color: var(--humo);
  border-radius: 50%;
}
.ld-mini-rejilla .es-hoy { border: 1px solid var(--papel-hondo); }
.ld-mini-rejilla .es-evento {
  background: var(--terracota);
  color: var(--papel);
  font-weight: 500;
}

.ld-tablero-datos { display: grid; gap: .6rem; align-content: start; }
.ld-tablero-datos p { display: grid; gap: .1rem; font-size: .95rem; }
.ld-tablero-datos .ld-etiqueta { font-size: .58rem; }

@media (max-width: 620px) {
  .ld-tablero-fila { grid-template-columns: 1fr; }
  .ld-mini-mes { width: 100%; max-width: 15rem; }
  .ld-tablero-paso { display: none; }
  .ld-tablero-flujo li::before { top: 1rem; }
}