/* ── El pase de fotos ─────────────────────────────────────────────────────
   CONTRATO v1 · 8-sep-2026 · https://www.granjaescuelaelrodeo.com/eventoselrodeo/assets/css/muestra.css

   Este fichero es de Eventos El Rodeo y lo usan también KitWeb y Por Dentro,
   así que sus nombres de clase son API pública: no se renombran ni se quitan
   sin avisar a los tres, y hacerlo sube la versión de aquí arriba. Lo que sí
   puede cambiar sin avisar es lo de dentro de cada regla —un color, una
   duración—, que es justo el motivo de que esto viva en un solo sitio.

   CÓPIALO, NO LO ENLACES. Y no es por rendimiento: si lo enlazas, el día que
   toquemos este fichero te cambia la página en caliente y sin avisarte. Con
   una hoja de estilos suena inofensivo —«se verá algo distinto»— y no lo es:
   sin estas reglas las diapositivas **no se ocultan ni se posicionan**, así
   que las fotos de un pase salen TODAS a la vez, apiladas y sin telón. No es
   feo, es otra página, y una que parece rota sin decir por qué. Copiar deja
   un solo sitio donde se edita —este— y te deja elegir cuándo entra. La idea
   es de KitWeb, y es mejor que la que habíamos recomendado nosotros.

   LAS CLASES DEL CONTRATO, para quien verifique una copia. Están todas o la
   copia no vale:
     .muestra            .muestra__galeria   .muestra__pista
     .muestra__diapo     .es-actual          .muestra__flecha
     .muestra__flecha--iz  .muestra__flecha--de
     .muestra__puntos    .muestra__punto     .muestra__cuerpo
     .muestra__cerrar    .muestra__texto     .muestra__pie
     .muestra__enlace
   Y la propiedad `--telon`, que la pone el JS por foto.

   Qué resuelve, y por qué se comparte: fotos de proporciones distintas
   —verticales de móvil y horizontales de cámara— conviven sin recortar
   ninguna. El truco es el telón: una copia de la propia foto, desenfocada y
   oscurecida, rellena el hueco, y la foto real va encima con `contain`.

   El marcado que espera:

     <dialog class="muestra">
       <div class="muestra__galeria">
         <div class="muestra__pista">
           <figure class="muestra__diapo es-actual" style="--telon:url(FOTO)">
             <img src="FOTO" alt="…"><figcaption>«pie»</figcaption>
           </figure>
         </div>
         <button class="muestra__flecha muestra__flecha--iz">‹</button>
         <button class="muestra__flecha muestra__flecha--de">›</button>
         <div class="muestra__puntos"><button class="muestra__punto es-actual"></button></div>
       </div>
       <div class="muestra__cuerpo">…</div>
     </dialog>

   Dos cosas que hay que respetar al portarlo, y que no son decoración:

   1. `--telon` se pone con URL ABSOLUTA. Una url() dentro de una custom
      property se resuelve contra la HOJA DE ESTILOS, no contra el documento:
      con ruta relativa el telón busca assets/css/assets/img/… y no pinta
      nada, en silencio.
   2. El pase automático DEBE pararse en cuanto alguien toca una flecha o un
      punto, y no arrancar con `prefers-reduced-motion: reduce`. Un carrusel
      sin forma de pararlo incumple WCAG 2.2.2.

   Cada var() lleva su valor de reserva, así que el fichero se vale por sí
   solo. Quien defina esos tokens, manda: el pase se viste de su marca. */

dialog.muestra {
  border: 1px solid rgb(217 184 119 / 0.3); border-radius: var(--radio, 2px);
  background: var(--carbon, #1f1f1c); color: var(--sobre-foto, #eef0ea);
  padding: 0; max-width: min(92vw, 520px); margin: auto;
}
dialog.muestra::backdrop { background: rgb(10 10 9 / 0.7); backdrop-filter: blur(6px); }
@media (prefers-reduced-motion: no-preference) {
  dialog.muestra[open] { animation: ke-muestra 380ms var(--curva, cubic-bezier(0.16, 1, 0.3, 1)); }
  @keyframes ke-muestra {
    from { opacity: 0; transform: translateY(22px) scale(0.97); }
    to   { opacity: 1; transform: none; }
  }
}
.muestra__cerrar {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2;
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: rgb(20 20 18 / 0.65); color: var(--sobre-foto, #eef0ea);
  font-size: 1rem; cursor: pointer;
}
.muestra__cerrar:hover { color: var(--champan, #d9b877); }
.muestra__foto img { width: 100%; max-height: 300px; object-fit: cover; display: block; }

/* La ficha con varias fotos se pasa sola, como una presentación de la casa.
   Cada foto lleva su pie entrecomillado con el nombre del plato tal y como
   aparece en la carta. Fondo oscuro y «contain»: un plato no se recorta —
   se enseña entero, que para eso se ha emplatado. */
.muestra__galeria {
  position: relative; background: var(--noche, #141412); overflow: hidden;
  aspect-ratio: 4 / 3;   /* altura estable, mezclando fotos altas y anchas */
  border-bottom: 1px solid rgb(217 184 119 / 0.18);
}
.muestra__pista { position: absolute; inset: 0; }
.muestra__diapo {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 900ms var(--curva, cubic-bezier(0.16, 1, 0.3, 1)), visibility 900ms;
}
.muestra__diapo.es-actual { opacity: 1; visibility: visible; }
/* Detrás de cada foto, ella misma ampliada y desenfocada: las verticales ya no
   dejan dos bandas negras planas, sino un telón del color del propio plato. */
.muestra__diapo::before {
  content: ''; position: absolute; inset: -10%;
  background: var(--telon) center / cover no-repeat;
  filter: blur(28px) brightness(0.4) saturate(0.75);
}
.muestra__diapo img,
.muestra__diapo video { position: relative; width: 100%; height: 100%;
                       object-fit: contain; display: block;
                       /* Hueco para el pie: en una foto vertical y larga —una tira de
                          fotomatón, sin ir más lejos— el degradado del pie se comía la parte
                          de abajo, que es donde van los nombres. */
                       padding-bottom: 42px; box-sizing: border-box; }
/* El vídeo no lleva telón: no hay de dónde sacarlo y se ve bien sobre el negro. */
.muestra__diapo:has(video)::before { display: none; }
.muestra__diapo figcaption {
  z-index: 2; position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.6rem 1.1rem 1.9rem;
  background: linear-gradient(to top, rgb(10 10 9 / 0.94) 38%, transparent);
  /* Prata sin cursiva: no tiene itálica real y la sintética afea la letra. */
  font-family: var(--display, 'Prata', 'Didot', Georgia, serif); color: var(--champan, #d9b877);
  font-size: 1rem; line-height: 1.35; text-align: center;
}
.muestra__flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgb(20 20 18 / 0.5); color: var(--sobre-foto, #eef0ea);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  transition: background 240ms, color 240ms;
}
.muestra__flecha:hover { background: rgb(20 20 18 / 0.85); color: var(--champan, #d9b877); }
.muestra__flecha--iz { left: 0.5rem; }
.muestra__flecha--de { right: 0.5rem; }
.muestra__puntos {
  position: absolute; left: 0; right: 0; bottom: 0.6rem; z-index: 2;
  display: flex; justify-content: center; gap: 0.45rem;
}
.muestra__punto {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: rgb(240 236 228 / 0.45); cursor: pointer;
  transition: background 240ms, transform 240ms;
}
.muestra__punto.es-actual { background: var(--champan, #d9b877); transform: scale(1.4); }
.muestra__cuerpo { padding: 1.5rem 1.7rem 1.7rem; }
.muestra__cuerpo h3 { font-size: 1.5rem; color: var(--sobre-foto, #eef0ea); }
.muestra__texto { color: var(--sobre-foto-suave, #dce4dd); margin-top: 0.9rem; }
.muestra__pie { color: var(--salvia, #8fae98); font-size: 0.82rem; margin-top: 1rem;
                letter-spacing: 0.04em; }
/* El enlace de una ficha: para ver la cosa de verdad, no para leer sobre ella. */
.muestra__enlace { margin: 0.9rem 0 0; }
.muestra__enlace a {
  display: inline-block; padding: 0.55rem 1.1rem; border-radius: var(--radio, 2px);
  border: 1px solid var(--champan, #d9b877); color: var(--champan, #d9b877); text-decoration: none;
  font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background var(--rapido, 180ms) var(--curva, cubic-bezier(0.16, 1, 0.3, 1)), color var(--rapido, 180ms) var(--curva, cubic-bezier(0.16, 1, 0.3, 1));
}
.muestra__enlace a:hover { background: var(--champan, #d9b877); color: #191813; }