@charset "UTF-8";
/* Visor de fotos con ficha técnica.
   La ficha imita la pantalla de control de una cámara: fondo negro, rótulos
   pequeños en gris y valores grandes en monoespaciado, que es como los lee
   cualquiera que haya mirado el dorso de una réflex. */

.visor-abierto {
  overflow: hidden;
}

.visor-foto {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 40px);
  background: rgba(4, 4, 6, 0.94);
}

.visor-foto[hidden] {
  display: none;
}

/* Evitar que el botón flotante de cookies o el banner se superpongan a los controles y botones de compartir */
body.visor-abierto #ssee-cookie-trigger,
body.visor-abierto .ssee-cookie-trigger,
body.visor-abierto #ssee-cookie-banner,
body.visor-abierto .ssee-cookie-banner {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.visor-foto__cerrar {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.visor-foto__cerrar:hover,
.visor-foto__cerrar:focus-visible {
  background: rgba(215, 23, 47, 0.9);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Las flechas para pasar de foto sin salir del visor. Van sobre el fondo, pegadas a
   los lados y centradas en vertical: donde ya está la mano. */
.visor-foto__paso {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.visor-foto__paso[hidden] {
  display: none;
}

.visor-foto__paso--atras { left: 14px; }
.visor-foto__paso--adelante { right: 14px; }

.visor-foto__paso:hover,
.visor-foto__paso:focus-visible {
  background: rgba(215, 23, 47, 0.9);
  border-color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 700px) {
  /* En el móvil se pasa arrastrando, así que las flechas se hacen a un lado: más
     pequeñas y a la altura de la foto, que la ficha técnica ocupa la mitad de abajo. */
  .visor-foto__paso {
    top: 32%;
    width: 42px;
    height: 42px;
    font-size: 1.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visor-foto__paso { transition: none; }
}

.visor-foto__caja {
  display: flex;
  gap: clamp(12px, 2vw, 22px);
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
}

/* Vertical: la ficha cabe a la derecha sin robarle alto a la foto.
   Apaisada: debajo, que es donde sobra sitio. */
.visor-foto[data-orientacion="vertical"] .visor-foto__caja {
  flex-direction: row;
  /* Al lado de la foto, la ficha ocupa solo lo que ocupan sus datos: con cuatro
     no se estira hasta abajo dejando medio panel negro vacío. Debajo, en cambio,
     sí tiene que ensancharse a todo lo que hay. */
  align-items: flex-start;
}

/* La columna va SIEMPRE a la derecha, sea la foto vertical o apaisada. Antes bajaba
   debajo cuando era apaisada, y eso obligaba a buscar los comentarios en un sitio
   distinto según la foto. Al estar siempre en el mismo lado se encuentra sin pensar, y
   como los datos de cámara caben en una sola columna estrecha, a la foto apaisada le
   queda casi todo el ancho. */
.visor-foto[data-orientacion="apaisada"] .visor-foto__caja {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  height: 100%;
}

.visor-foto[data-orientacion="apaisada"] .visor-foto__marco {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  min-height: 0;
  min-width: 0;
  /* La foto se queda con todo lo que no use la columna. */
  flex: 1 1 auto;
}

.visor-foto[data-orientacion="apaisada"] .visor-foto__imagen {
  min-height: 0;
  max-height: 100%;
}



.visor-foto__marco {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  min-width: 0;
  min-height: 0;
}

.visor-foto__imagen {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}

/* El vídeo dentro del visor: mismas medidas que una foto apaisada, para que la
   columna de me gusta y comentarios le quepa al lado igual que a una foto. */
.visor-foto__video {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: 6px;
  background: #000;
}

.visor-foto[data-orientacion="vertical"] .visor-foto__imagen {
  max-height: 88vh;
}

.visor-foto__pie {
  color: #c9ccd2;
  font-size: 0.82rem;
  text-align: center;
}

.visor-foto__pie:empty {
  display: none;
}

/* ── La ficha técnica ─────────────────────────────────────────────────────────── */
.visor-foto__datos {
  display: grid;
  gap: 1px;
  align-content: start;
  padding: 10px;
  border: 1px solid #3a3f47;
  border-radius: 8px;
  background: #0b0c0e;
  overflow: auto;
}

.visor-foto__datos[hidden] {
  display: none !important;   /* gana a las reglas por orientación, que van después */
}

.visor-foto[data-orientacion="vertical"] .visor-social {
  width: clamp(240px, 26vw, 330px);
  max-height: 88vh;
}

/* Con todos los datos de cámara la lista se hace larga y en una sola columna hay que
   desplazarla. Si la pantalla es ancha, caben dos y se ve la ficha entera de un vistazo. */
@media (min-width: 1100px) {
  .visor-foto[data-orientacion="vertical"] .visor-social {
    width: clamp(300px, 24vw, 380px);
  }
}

/* Debajo de la foto no vale la rejilla de columnas iguales: «No» y «120 mm» se quedan
   con el mismo ancho que «EF70-200mm f/2.8L IS II USM», que se parte en cuatro líneas
   mientras al lado sobra sitio. Aquí cada dato pide lo que ocupa y crece a repartir lo
   que sobre, así que la fila se llena y nada se parte por gusto. */
.visor-foto[data-orientacion="apaisada"] .visor-social {
  flex: 0 0 auto;
  width: clamp(230px, 24vw, 320px);
  max-height: 82vh;
}



/* Solo estos se parten por dentro si hacen falta: son los únicos largos de verdad. */
.visor-foto[data-orientacion="apaisada"] .visor-dato .visor-dato__valor {
  overflow-wrap: break-word;
}

.visor-dato {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  background: #131418;
}

.visor-dato__rotulo {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #8a8e96;
}

.visor-dato__valor {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.25;
  color: #f2f3f5;
  overflow-wrap: anywhere;
}

/* El aviso de reproducción cierra la ficha, de lado a lado y sin gritar: es una
   advertencia, no un cartel. */
.visor-foto__aviso {
  grid-column: 1 / -1;
  flex: 0 0 100%;
  margin: 0;
  padding: 8px 10px 2px;
  color: #8a8e96;
  font-size: 0.68rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

/* Velocidad, diafragma e ISO en el amarillo de la casa: es lo que resalta una cámara
   en su pantalla. */
.visor-dato--clave .visor-dato__valor {
  color: #fabd00;
  font-size: 1.12rem;
}

/* «Ver más»: solo en móvil, donde la columna nace plegada para no comerse la foto.
   Va declarado ANTES del bloque móvil: si se declara después, su «display: none» gana
   por orden y el botón no aparece nunca. */
.visor-social__vermas {
  display: none;
  margin-left: auto;
  align-self: center;
  padding: 6px 12px;
  border: 1px solid #2c3038;
  border-radius: 999px;
  background: none;
  color: #c9ccd2;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 700px) {
  /* En móvil no cabe la columna: la ficha va siempre debajo, a todo lo ancho, y con el
     mismo reparto de dos filas. La foto cede el alto que la ficha necesite. */
  .visor-foto__caja {
    display: grid !important;
    /* Dos filas del tamaño que pidan, y el conjunto centrado. Con la primera elástica
       («1fr») el marco se estiraba a toda la pantalla aunque la foto no creciera, y
       entre la foto y la columna quedaban 449 píxeles de negro. */
    grid-template-rows: auto auto;
    align-content: center;
    width: 100%;
    height: 100%;
    justify-items: center;
  }

  .visor-foto__marco {
    align-content: center;
  }
  .visor-foto__marco {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    justify-items: center;
    min-height: 0;
    max-width: 100%;
  }
  .visor-foto__imagen {
    min-height: 0;
    max-height: 100% !important;
  }
  /* La columna va debajo de la foto, a todo lo ancho y con alto propio. Sin este
     bloque se quedaba en dos píxeles: en la rejilla de dos filas, la segunda se
     ajusta al contenido, y el cuerpo con «flex:1» y «min-height:0» se encogía a cero. */
  /* Con el selector de orientación delante: las reglas de escritorio lo llevan y, a
     menos especificidad, esta se quedaba sin efecto por muy abajo que estuviera. */
  .visor-foto[data-orientacion="vertical"] .visor-social,
  .visor-foto[data-orientacion="apaisada"] .visor-social {
    justify-self: stretch;
    width: 100%;
    max-height: 46vh;
  }

  .visor-social__vermas {
    display: inline-block;
  }

  /* Plegada: solo la cabecera. La foto se queda con la pantalla, que es a lo que se
     entra. Al pulsar «Ver más» —o el bocadillo— se abre con una transición corta. */
  .visor-social__pestanas,
  .visor-social__cuerpo {
    display: none;
  }

  .visor-foto.is-desplegada .visor-social__pestanas {
    display: flex;
  }

  .visor-foto.is-desplegada .visor-social__cuerpo {
    display: block;
    min-height: 120px;
    max-height: 40vh;
    animation: visor-desplegar 220ms cubic-bezier(0.23, 1, 0.32, 1) both;
  }

  @keyframes visor-desplegar {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .visor-foto.is-desplegada .visor-social__cuerpo { animation: none; }
  }

  .visor-social .visor-foto__datos {
    display: flex;
    flex-wrap: wrap;
    justify-self: stretch;
    /* Con la ficha completa —dieciséis datos— en un móvil no hay pantalla que valga:
       aquí sí se desplaza, pero teniendo la mitad a la vista, no dos dedos. */
    max-height: 50vh;
    overflow: auto;
  }
  .visor-dato {
    flex: 1 1 auto;
    min-width: 78px;
    max-width: 100%;
  }
}

/* ── Las fotos que se pueden abrir ────────────────────────────────────────────── */
[data-visor-foto] {
  position: relative;
  cursor: zoom-in;
}

[data-visor-foto]:focus-visible {
  outline: 3px solid #fabd00;
  outline-offset: 3px;
}

/* El círculo con la «i»: avisa de que la foto no es solo una foto, que detrás hay
   datos. Va en el HTML como decoración pura, sin marcado que mantener en cada página.
   La barra tras la «i» deja el texto fuera de los lectores de pantalla: el aviso es
   para quien mira, y a quien escucha ya se lo cuenta el botón que envuelve la foto.
   Solo en las fotos que llevan ficha técnica —las de la página del fotógrafo—: en la
   de la hermandad no hay datos que ver y la «i» prometía algo que no está. */
[data-visor-foto][data-exif]::after {
  content: "i";
  content: "i" / ""; /* la barra oculta la letra a los lectores de pantalla */
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(8, 8, 10, 0.62);
  backdrop-filter: blur(6px);
  color: #ffffff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.92rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  [data-visor-foto][data-exif]:hover::after {
    transform: scale(1.08);
    border-color: #ffffff;
    background: rgba(215, 23, 47, 0.92);
  }
}

[data-visor-foto][data-exif]:focus-visible::after {
  border-color: #fabd00;
  background: rgba(215, 23, 47, 0.92);
}

@media (prefers-reduced-motion: reduce) {
  [data-visor-foto][data-exif]::after { transition: none; }
  [data-visor-foto][data-exif]:hover::after { transform: none; }
}

/* ── Mosaico de la ficha del fotógrafo ────────────────────────────────────────── */

/* De partida es una rejilla normal: así, sin JavaScript, se ven todas las fotos. El
   reparto en columnas solo entra cuando el guion ha montado las columnas de verdad. */
.mosaico {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-items: start;
  gap: 16px;
  margin-top: 28px;
}

.mosaico--repartido {
  display: flex;
  align-items: flex-start;
}

.mosaico__columna {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 16px;
  /* Sin esto una foto ancha estira su columna y las demás se quedan estrechas. */
  min-width: 0;
}

.mosaico figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: #111113;
}

/* Ancho completo y alto según la proporción: ninguna foto sale cortada. El
   aspect-ratio lo pone el servidor en cada figura, así el hueco está reservado antes
   de que la imagen llegue y la página no da saltos. */
/* Solo la foto de la figura, con «>»: dentro del mosaico también hay vídeos, y el
   logotipo del portal va dentro de su reproductor. Sin el «>» esta regla lo cogía
   también y lo estiraba al ancho de la tarjeta, tapando el vídeo entero. */
.mosaico figure > img {
  display: block;
  width: 100%;
  height: auto;
}

/* En las hermandades los vídeos van en el mismo mosaico que las fotos. El
   reproductor ya trae su propio borde y su esquina redondeada, así que la figura que
   lo envuelve no pone ninguno: si no, se ven dos marcos, uno dentro de otro. */
.mosaico figure.mosaico__video {
  border: 0;
  background: transparent;
  overflow: visible;
  cursor: pointer;
}

/* Dentro del mosaico el vídeo es una miniatura, no un reproductor: al pulsarlo abre
   el visor, que es donde están el «me gusta» y los comentarios. Sin esto, el clic se
   lo quedaban los controles del propio vídeo y se reproducía en el hueco, sin columna
   y sin forma de comentarlo.

   Se apagan los del reproductor, no los de la figura: así el clic llega siempre. */
.mosaico figure.mosaico__video [data-preacher-video],
.mosaico figure.mosaico__video video {
  pointer-events: none;
}

/* Y el «play» tiene que verse, que si no parece una foto que no se abre. */
.mosaico figure.mosaico__video::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 26px no-repeat;
  pointer-events: none;
}

.mosaico figure.mosaico__video {
  position: relative;
}

.mosaico__entra {
  animation: mosaico-entra 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes mosaico-entra {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mosaico__entra { animation: none; }
}

/* El pie con la firma del autor, dentro del mosaico. */
.mosaico figcaption {
  padding: 8px 10px;
  color: #b9bcc3;
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.mosaico figcaption a {
  color: inherit;
  text-decoration: none;
}

.mosaico figcaption a:hover {
  color: #ffffff;
  text-decoration: underline;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Me gusta y comentarios, en la columna del visor
   La columna tiene alto fijo; lo único que se desplaza es el cuerpo. La cabecera
   con el corazón y los comentarios no se mueve nunca: es lo que se busca al abrir.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── Sin columna social ────────────────────────────────────────────────────────────
   Los carteles se ven a pantalla completa pero no se comentan ni se marcan. Al quitar
   la columna, la imagen se queda con todo el ancho para ella, que es lo que un cartel
   pide: está hecho para mirarse, no para discutirlo. */
.visor-foto--sin-social .visor-social {
  display: none;
}

.visor-foto--sin-social .visor-foto__marco {
  max-width: 100%;
}

.visor-social {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid #3a3f47;
  border-radius: 8px;
  background: #0b0c0e;
  overflow: hidden;               /* el que se desplaza es el cuerpo, no la columna */
}

.visor-social__cabecera {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
  padding: 8px;
  border-bottom: 1px solid #23262b;
}

.visor-social__megusta,
.visor-social__comentar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid #2c3038;
  border-radius: 999px;
  background: #131418;
  color: #e8eaee;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background 160ms ease;
}

.visor-social__megusta:active,
.visor-social__comentar:active {
  transform: scale(0.96);
}

.visor-social__megusta svg,
.visor-social__comentar svg {
  width: 19px;
  height: 19px;
}

/* Sin dar me gusta: solo el contorno. Dado: relleno en rojo. */
.visor-social__corazon {
  fill: none;
  stroke: #e8eaee;
  stroke-width: 1.7;
  transition: fill 200ms ease, stroke 200ms ease;
}

.visor-social__megusta.is-mio .visor-social__corazon {
  fill: #e0163a;
  stroke: #e0163a;
}

.visor-social__comentar svg {
  fill: none;
  stroke: #e8eaee;
  stroke-width: 1.7;
}

/* El latido: nace al pulsar, no cuando contesta el servidor. Así el gesto responde
   siempre igual de rápido, vaya la red como vaya. */
@keyframes visor-latido {
  0%   { transform: scale(1); }
  32%  { transform: scale(1.28); }
  60%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}

.visor-social__megusta.late .visor-social__corazon {
  animation: visor-latido 420ms cubic-bezier(0.23, 1, 0.32, 1);
}

.visor-social__pestanas {
  display: flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 6px 8px 0;
}

.visor-social__pestana {
  padding: 6px 10px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: #8a8e96;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.visor-social__pestana[hidden] { display: none; }

.visor-social__pestana.is-activa {
  color: #f2f3f5;
  border-bottom-color: #d7172f;
}

/* Lo único que se desplaza. */
.visor-social__cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px;
}

.visor-social__panel[hidden] { display: none; }

/* La ficha de cámara ya no es la caja: es una pestaña dentro. Se le quitan el borde
   y el fondo propios, que ahora los pone la columna. */
.visor-social .visor-foto__datos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
  max-height: none;
}



.visor-social__form {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.visor-social__form textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #2c3038;
  border-radius: 8px;
  background: #131418;
  color: #f2f3f5;
  font: inherit;
  font-size: 0.86rem;
  resize: vertical;
}

.visor-social__enviar {
  justify-self: end;
  padding: 7px 16px;
  border: 0;
  border-radius: 999px;
  background: #d7172f;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.visor-social__enviar:active { transform: scale(0.97); }
.visor-social__enviar:disabled { opacity: 0.5; cursor: default; }

.visor-social__aviso {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(215, 23, 47, 0.12);
  color: #f6c9cf;
  font-size: 0.78rem;
  line-height: 1.45;
}

.visor-social__vacio,
.visor-social__entrar {
  margin: 4px 0;
  color: #8a8e96;
  font-size: 0.82rem;
}

.visor-social__entrar a { color: #f2f3f5; }

.visor-comentarios {
  display: grid;
  gap: 10px;
}

/* Cada comentario entra de abajo con un desvanecido corto: se nota que ha llegado
   uno nuevo sin que la lista dé un salto. */
@keyframes visor-comentario-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.visor-comentario {
  padding: 9px 10px;
  border-radius: 10px;
  background: #131418;
  animation: visor-comentario-entra 260ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

.visor-comentario__autor {
  margin: 0 0 3px;
  color: #f2f3f5;
  font-size: 0.79rem;
  font-weight: 700;
}

.visor-comentario__texto {
  margin: 0 0 7px;
  color: #c9ccd2;
  font-size: 0.85rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-line;          /* respeta los saltos de línea que escribió su autor */
}

.visor-comentario__pulgares {
  display: flex;
  gap: 6px;
}

.visor-pulgar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid #2c3038;
  border-radius: 999px;
  background: none;
  color: #8a8e96;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), color 140ms ease;
}

.visor-pulgar svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.visor-pulgar:active { transform: scale(0.94); }

.visor-pulgar.is-mio {
  color: #fabd00;
  border-color: rgba(250, 189, 0, 0.45);
}

.visor-pulgar.is-mio svg { fill: rgba(250, 189, 0, 0.18); }

@media (prefers-reduced-motion: reduce) {
  .visor-social__megusta,
  .visor-social__comentar,
  .visor-social__enviar,
  .visor-pulgar { transition: none; }
  .visor-social__megusta.late .visor-social__corazon,
  .visor-comentario { animation: none; }
}

/* ── Me gusta y comentarios sobre cada pieza del mosaico ──────────────────────
   Abajo a la izquierda, para no chocar con la «i», que va a la derecha. Es un
   indicador, no un botón: se lee de un vistazo y no invita a pulsar donde no toca. */
.mosaico__social {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  gap: 4px;
  pointer-events: none;
}

.mosaico__social-dato {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(8, 8, 10, 0.62);
  backdrop-filter: blur(6px);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.mosaico__social-dato svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linejoin: round;
}

/* Ambas insignias (me gusta y comentarios) visibles en todos los dispositivos (móvil, tablet y escritorio). */
.mosaico__social-dato {
  display: inline-flex;
}


/* Cuando un número de la insignia acaba de cambiar, un pulso corto: se ve que ha
   pasado algo sin tener que ir a buscar la cifra. */
@keyframes mosaico-social-pulso {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.mosaico__social-dato.acaba-de-cambiar {
  animation: mosaico-social-pulso 320ms cubic-bezier(0.23, 1, 0.32, 1);
  border-color: rgba(224, 22, 58, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .mosaico__social-dato.acaba-de-cambiar { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Filtros de la galería
   ═══════════════════════════════════════════════════════════════════════════ */
.galeria-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px 18px;
  margin: 0 0 18px;
}

.galeria-filtros label {
  display: grid;
  gap: 4px;
  color: var(--muted, #a7a7ad);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.galeria-filtros select {
  min-width: 12rem;
  padding: 8px 12px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text, #f7f7f8);
  font: inherit;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0;
}

.galeria-filtros__cuenta {
  margin: 0 0 4px auto;
  color: var(--muted, #a7a7ad);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

/* Una figura escondida por el filtro no puede seguir ocupando su hueco en la
   columna: el mosaico las reparte con «display», así que hay que apagarlo. */
.mosaico figure[hidden] {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Compartir
   ═══════════════════════════════════════════════════════════════════════════
   Al pie de la columna, debajo de los comentarios: se comparte después de
   mirar, no antes. Iconos a 44×44 —lo mínimo para acertar con el dedo— y con
   su nombre para quien navegue con lector de pantalla.
   ═══════════════════════════════════════════════════════════════════════════ */
.visor-compartir {
  padding: 12px 14px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.visor-compartir__rotulo {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.visor-compartir__iconos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;                 /* separados: pegados se falla al pulsar */
}

.visor-compartir__icono {
  display: grid;
  place-items: center;
  /* «flex: 0 0 44px» y no «width»: la columna es estrecha y flex encogía los
     iconos a 22px de ancho, por debajo del mínimo para acertar con el dedo. */
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.visor-compartir__icono svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.visor-compartir__icono:hover,
.visor-compartir__icono:focus-visible {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Copiado: verde un segundo y medio. El cambio de color va acompañado del
   título, que el color solo no dice nada a quien no lo distingue. */
.visor-compartir__icono.is-copiado {
  border-color: #43d17a;
  color: #43d17a;
}

@media (prefers-reduced-motion: reduce) {
  .visor-compartir__icono { transition: none; }
}


/* ── Páginas de la galería ─────────────────────────────────────────────────────────
   Sustituyen al scroll infinito. Con cien fotos, bajar sin saber cuánto queda hace que
   nadie llegue al final; con páginas se ve de entrada cuánto hay y se puede saltar. */
.mosaico__paginas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 24px;
}

.mosaico__pagina {
  min-width: 44px;
  min-height: 44px;             /* se pulsa con el dedo */
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: none;
  color: #e8eaed;
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;   /* los números no bailan al cambiar de página */
  cursor: pointer;
  transition: background 140ms ease-out, border-color 140ms ease-out, transform 140ms ease-out;
}

.mosaico__pagina:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(255, 255, 255, 0.06);
}

/* Que se note al pulsar: sin esto no hay forma de saber si la página lo ha oído. */
.mosaico__pagina:active:not(:disabled) {
  transform: scale(0.96);
}

.mosaico__pagina.is-actual {
  border-color: #d7172f;
  background: #d7172f;
  color: #fff;
}

.mosaico__pagina:disabled {
  opacity: 0.35;
  cursor: default;
}

.mosaico__salto {
  padding: 0 4px;
  color: rgba(255, 255, 255, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .mosaico__pagina {
    transition: none;
  }
  .mosaico__pagina:active:not(:disabled) {
    transform: none;
  }
}

/* ── Toolbar de acciones en formulario de comentarios ────────────── */
.visor-social__form-caja {
  position: relative;
  display: grid;
  gap: 6px;
}

.visor-social__toolbar-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

.visor-social__herramientas {
  display: flex;
  align-items: center;
  gap: 6px;
}

.visor-herramienta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #2c3038;
  border-radius: 8px;
  background: #181a20;
  color: #a4a8b2;
  cursor: pointer;
  transition: all 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.visor-herramienta-btn:hover {
  background: #242730;
  color: #ffffff;
  border-color: #3e4450;
  transform: translateY(-1px);
}

.visor-herramienta-btn:active,
.visor-herramienta-btn.is-active {
  background: #2e171b;
  border-color: #d7172f;
  color: #ff8595;
  transform: translateY(0);
}

.visor-herramienta-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ── Selector de Emojis Animados ──────────────────────────────────── */
.visor-emoji-drawer {
  position: relative;
  width: 100%;
  margin-top: 4px;
  margin-bottom: 6px;
  background: #181a20;
  border: 1px solid #333742;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
  padding: 10px;
  animation: visor-pop 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes visor-pop {
  from { opacity: 0; transform: scale(0.92) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.visor-emoji-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #262933;
}

.visor-emoji-titulo {
  font-size: 0.76rem;
  font-weight: 700;
  color: #9499a6;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.visor-emoji-cerrar {
  background: none;
  border: none;
  color: #8a8e96;
  font-size: 1.1rem;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 4px;
}
.visor-emoji-cerrar:hover { color: #fff; background: #262933; }

.visor-emoji-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  max-height: 170px;
  overflow-y: auto;
  padding-right: 2px;
}

.visor-emoji-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 1.32rem;
  line-height: 1;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1), background 120ms ease;
}

.visor-emoji-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(1.32) translateY(-2px);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
  z-index: 2;
  animation: visor-emoji-bounce 360ms ease-in-out infinite alternate;
}

.visor-emoji-btn:active {
  transform: scale(0.9);
}

@keyframes visor-emoji-bounce {
  0% { transform: scale(1.32) translateY(-2px) rotate(0deg); }
  50% { transform: scale(1.36) translateY(-4px) rotate(4deg); }
  100% { transform: scale(1.32) translateY(-2px) rotate(-4deg); }
}

/* ── Desplegable flotante de Menciones (@) estilo Facebook/Instagram ─ */
.visor-mentions-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 110;
  width: 100%;
  max-width: 360px;
  max-height: 250px;
  overflow-y: auto;
  background: #181a20;
  border: 1px solid #333742;
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.07);
  animation: visor-pop 180ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

.visor-mention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #20232c;
  transition: background 120ms ease;
}

.visor-mention-item:last-child {
  border-bottom: none;
}

.visor-mention-item:hover,
.visor-mention-item.is-selected {
  background: #252834;
}

.visor-mention-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: #2a2e38;
  border: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.visor-mention-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2c1a1f;
  color: #ff8595;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
  border: 1px solid rgba(215, 23, 47, 0.3);
}

.visor-mention-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.visor-mention-nombre {
  font-size: 0.84rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.visor-mention-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: #9ea3ae;
}

.visor-mention-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(215, 23, 47, 0.18);
  color: #ff98a7;
  font-size: 0.68rem;
  font-weight: 600;
}

.visor-mention-loading,
.visor-mention-empty {
  padding: 12px;
  text-align: center;
  font-size: 0.79rem;
  color: #8a8e96;
}

/* ── Estilos de etiquetas (@menciones y #hashtags) en comentarios ── */
.visor-comentario__hashtag {
  color: #5aa7f2;
  font-weight: 600;
  text-decoration: none;
  transition: color 120ms ease;
}
.visor-comentario__hashtag:hover {
  color: #8fc1ff;
  text-decoration: underline;
}

.visor-comentario__mencion {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  margin: 0 1px;
  border-radius: 4px;
  background: rgba(90, 167, 242, 0.12);
  color: #72b6ff;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.83rem;
  transition: background 140ms ease, color 140ms ease;
}

.visor-comentario__mencion:hover {
  background: rgba(90, 167, 242, 0.22);
  color: #a4ceff;
}

.visor-comentario__mencion-icono {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  opacity: 0.85;
}

.visor-comentario__autor-user {
  font-weight: 400;
  color: #94a3b8;
  font-size: 0.76rem;
  margin-left: 2px;
}

.visor-comentario__insignia-admin {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 4px;
  background: #2563eb;
  color: #ffffff;
  margin-left: 6px;
  vertical-align: middle;
}