/* publicacion.css — la publicación abierta, con el diseño de la app: la foto
   a sangre, la cara del autor con "Seguir", fecha, título, texto y
   contadores encima, y los botones en las esquinas (25-09-2026). La usan la
   demo de la portada y el visor de perfiles; el marcado lo pone cada página
   y el relleno lo hace publicacion.js.

   Va dentro de un contenedor que la página coloca (el marco de la demo, la
   capa fija del visor). Ese contenedor lleva `.con-tarjeta` mientras hay una
   publicación abierta: entonces aparecen el velo y la tarjeta. */

:where(.pub-tarjeta) button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}

.pub-velo{
  position:absolute;inset:0;z-index:4;background:rgba(255,255,255,.62);
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;
}
.pub-tarjeta{
  position:absolute;z-index:5;left:50%;top:50%;
  height:min(92%,720px);aspect-ratio:5/8;max-width:calc(100% - 32px);
  border-radius:22px;overflow:hidden;background:#222;color:#fff;
  opacity:0;visibility:hidden;transform:translate(-50%,-47%) scale(.97);
  transition:opacity .28s var(--entra),transform .32s var(--entra),visibility .32s;
}
.con-tarjeta .pub-velo{opacity:1;visibility:visible}
.con-tarjeta .pub-tarjeta{opacity:1;visibility:visible;transform:translate(-50%,-50%)}

/* Las fotos y los vídeos, a sangre. Si hay varios, se pasan de lado. */
.pub-medios{
  position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;overscroll-behavior-x:contain;
}
.pub-medios::-webkit-scrollbar{display:none}
.pub-medios > *{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start;display:block;background:#000}
/* El vídeo: un toque lo pausa (sale el ▶ en el centro) y el altavoz, abajo
   a la izquierda, le da sonido (18-10-2026). */
.pub-video{position:relative}
.pub-video video{width:100%;height:100%;object-fit:cover;display:block;background:#000;cursor:pointer}
.pub-video-play{
  position:absolute;left:50%;top:50%;z-index:3;width:84px;height:84px;margin:-42px 0 0 -42px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(0,0,0,.42);color:#fff;pointer-events:none;
  opacity:0;transform:scale(.9);transition:opacity .18s ease,transform .18s ease;
}
.pub-video.pausado .pub-video-play{opacity:1;transform:scale(1)}
.pub-video-play .ms{font-size:52px;line-height:1;margin-left:4px}
.pub-video-sonido{
  position:absolute!important;left:18px;bottom:18px;z-index:3;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(0,0,0,.42)!important;color:#fff!important;
}
.pub-video-sonido .ms{font-size:24px}
.pub-puntos{position:absolute;z-index:2;left:0;right:0;bottom:22px;display:flex;justify-content:center;gap:6px;pointer-events:none}
.pub-puntos span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5)}
.pub-puntos span.activo{background:#fff}

.pub-tarjeta::before{
  content:"";position:absolute;inset:0 0 auto 0;height:48%;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.66),rgba(0,0,0,.28) 60%,rgba(0,0,0,0));
}
.pub-tarjeta::after{
  content:"";position:absolute;inset:auto 0 0 0;height:22%;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,0));
}
.pub-arriba{position:absolute;z-index:2;top:16px;right:14px;display:flex;gap:14px}
.pub-arriba button,.pub-abajo button,.pub-contadores button,.pub-pastilla{color:#fff}
.pub-arriba .ms{font-size:28px}
.pub-cabecera{position:absolute;z-index:2;top:64px;left:18px;right:18px;display:flex;gap:16px;align-items:flex-start}
.pub-autor{position:relative;flex:none;width:84px;height:84px}
.pub-autor img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #fff;background:var(--crema-honda)}
.pub-pastilla{
  position:absolute;left:-8px;bottom:-6px;padding:4px 10px;border-radius:999px;
  background:var(--verde);font-size:13px;font-weight:600;
}
.pub-datos{min-width:0;flex:1;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.pub-fecha{margin:4px 0 0;font-size:15px;letter-spacing:.06em}
.pub-titulo{margin:2px 0 4px;font-size:28px;line-height:1.1;font-weight:800;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pub-texto{margin:0;font-size:17px;opacity:.95;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pub-texto:empty{display:none}
.pub-contadores{display:flex;align-items:center;gap:16px;margin-top:10px;font-size:18px;font-weight:700}
.pub-contadores button{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:18px}
.pub-contadores .ms{font-size:22px}
.pub-reservar{padding:5px 12px;border:1.5px solid #fff;border-radius:7px;font-size:16px!important}
.pub-reservar[hidden]{display:none}
.pub-abajo{position:absolute;z-index:2;right:18px;bottom:18px;display:flex;gap:18px}
.pub-abajo .ms{font-size:36px}

@media (max-width:760px){
  .pub-tarjeta{height:auto;width:calc(100% - 24px);aspect-ratio:5/8;max-height:calc(100% - 24px)}
  .pub-cabecera{top:58px;gap:12px}
  .pub-autor{width:64px;height:64px}
  .pub-titulo{font-size:22px}
  .pub-texto{font-size:15px}
  .pub-contadores,.pub-contadores button{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .pub-tarjeta,.pub-velo{transition:none}
}

/* Textos equilibrados (01-10-2026, norma de Ignacio: "que en los párrafos
   queden repartidas"): las líneas de un largo parecido, nunca una llena y la
   última a medias. El navegador solo equilibra hasta seis líneas; un párrafo
   más largo se queda como estaba, sin palabra sola al final (pretty). */
h1,h2,h3,h4,h5,h6,p,li,dt,dd,figcaption,blockquote,label,.bajada{text-wrap:pretty;text-wrap:balance}