/* ==========================================================================
   Pampa Liberal 2 - reels.css
   El reel: notas a pantalla completa con scroll-snap vertical. Es el MISMO en la
   portada (con rieles de personas: izq. País, der. La Pampa) y en /blog/, archivos
   (categoría, etiqueta, persona, autor, fecha) y búsqueda, con una cabecera (H1 en
   el chip de filtro) arriba. La nota se lee en un modal (.pl-note) cuyo contenido es
   el componente de la nota (estilos en main.css, "La nota"); acá solo el contenedor
   y la conversación (la arma reels.js, igual en el modal y en la página de la nota).
   La barra de arriba (marca, búsqueda, nube de hashtags) es la de la app: main.css.
   Se carga en toda vista con reel y en la nota (functions.php) y depende de los
   tokens de main.css (handle 'pl-style'). Todo namespaced .pl-reel* / .pl-note*.

   Animaciones: solo transform/opacity. Las de "entrada" dependen de la clase
   .pl-reel--anim que agrega reels.js (y que no agrega con reduced-motion), así
   que sin JS todo queda visible y quieto.
   ========================================================================== */

/* ---------- 1. Bloqueo de la página: el reel es la app ---------- */
/* La página no scrollea: scrollea el reel (debajo de la barra fija de la app). */
html.pl-reel-lock,
html:has(.pl-reel) { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.pl-reel-lock body,
html:has(.pl-reel) body { height: 100%; overflow: hidden; overscroll-behavior: none; }

@keyframes pl-reel-rise     { from { opacity: 0; transform: translateY(.6em); } to { opacity: 1; transform: none; } }
@keyframes pl-reel-kb       { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.08) translate3d(0, -1.5%, 0); } }
@keyframes pl-reel-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pl-reel-spin     { to { transform: rotate(360deg); } }
@keyframes pl-reel-pop      { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes pl-reel-bob      { 50% { transform: translateY(-5px); } }
@keyframes pl-reel-feed-in  { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes pl-reel-shimmer  { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes pl-reel-drop     { from { opacity: 0; transform: translateY(-8px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes pl-note-sk       { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes pl-reel-glow     { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes pl-reel-sweep    { from { transform: translateX(-110%) skewX(-14deg); } to { transform: translateX(280%) skewX(-14deg); } }
@keyframes pl-reel-badge-in { 0% { opacity: 0; transform: scale(.2); } 60% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: none; } }

/* ---------- 2. Contenedor ---------- */
.pl-reel {
    --pl-reel-rail-w: 62px;
    /* Alto de la barra de la app (fija, encima del reel; theme.js mide el real).
       Rieles, chip de filtro y cards especiales arrancan debajo. */
    --pl-reel-top-h: var(--pl-appbar-h, calc(env(safe-area-inset-top, 0px) + 110px));
    --pl-reel-safe-b: env(safe-area-inset-bottom, 0px);
    position: fixed; inset: 0; z-index: 60;
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
    overflow: hidden; background: var(--pl-bg); color: var(--pl-text);
    font-family: var(--pl-font); line-height: 1.3;
    -webkit-tap-highlight-color: transparent;
}
.admin-bar .pl-reel { top: 32px; }
@media (max-width: 782px) { .admin-bar .pl-reel { top: 46px; } }

.pl-reel a { color: inherit; }
.pl-reel a:hover { color: inherit; }
.pl-reel :focus-visible { outline: 2px solid var(--pl-brand-l); outline-offset: 2px; }

.pl-reel__stage { position: relative; grid-column: 1; grid-row: 1; min-width: 0; min-height: 0; height: 100%; overflow: hidden; }

/* ---------- 3. Cabecera del reel: chip de filtro / H1 del archivo ---------- */
/* La barra de la app (fija, fuera del reel) tapa la parte de arriba del stage; la
   cabecera va justo debajo. En la portada es el chip del filtro activo (persona /
   búsqueda, lo llena reels.js); en los archivos, el MISMO chip con el H1
   ("#LaPampa · 234 notas", "Buscar: «texto»", perfil compacto de una persona) y la
   descripción del término. El ✕ quita el filtro (portada) o vuelve al inicio. */
.pl-reel__rail:focus { outline: none; }
.pl-reel__rail:focus-visible { outline: 2px solid var(--pl-brand-l); outline-offset: 2px; border-radius: 8px; }

.pl-reel__head {
    position: absolute; z-index: 31; top: calc(var(--pl-reel-top-h) + 4px); left: 0; right: 0;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 0 calc(var(--pl-reel-rail-w) + 16px); pointer-events: none;
}
.pl-reel--archive .pl-reel__head { padding: 0 14px; }
.pl-reel__head > * { pointer-events: auto; }

.pl-reel__filter {
    display: flex; align-items: center; gap: 8px; width: max-content; max-width: 100%;
    padding: 5px 5px 5px 12px;
    border-radius: var(--pl-radius-pill); background: var(--pl-text); color: var(--pl-black);
    font-size: 12.5px; font-weight: 800; line-height: 1.2; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.pl-reel__filter[hidden] { display: none; }
.pl-reel__filter-main { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.pl-reel__filter-h {
    min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: inherit; letter-spacing: inherit; color: inherit; text-transform: none;
}
.pl-reel__filter-hash { margin-right: 1px; opacity: .55; }
.pl-reel__filter-hash::before { content: attr(data-mark); } /* el "#" fuera del texto del H1 */
.pl-reel__filter-n, .pl-reel__filter-page { flex-shrink: 0; white-space: nowrap; opacity: .72; }
.pl-reel__filter-x {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--pl-black); color: var(--pl-white) !important; transition: transform 260ms var(--pl-ease-spring);
}
.pl-reel__filter-x:focus-visible { outline: 2px solid var(--pl-brand-l); outline-offset: 2px; }
.pl-reel--anim .pl-reel__filter:not([hidden]) { animation: pl-reel-drop 360ms var(--pl-ease-spring) both; }
/* Búsqueda activa: chip verde de marca (igual en la portada y en /?s=). */
.pl-reel__filter--search { background: var(--pl-brand); color: var(--pl-black); box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 0 3px rgba(122,166,7,.25), 0 0 22px rgba(122,166,7,.45); }
/* Persona (archivo de etiqueta): perfil compacto - aro con foto / iniciales, nombre, notas y alcance. */
.pl-reel__filter--person { padding: 4px 5px 4px 4px; gap: 10px; }
.pl-reel__filter--person .pl-reel__filter-main { flex-direction: column; align-items: flex-start; gap: 1px; }
.pl-reel__filter--person .pl-reel__filter-h { font-size: 14px; font-weight: 900; letter-spacing: -.01em; }
/* "Quién es" arriba del nombre (perfiles completos, v6.4.5). */
.pl-reel__filter-kicker {
    font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.1;
    color: color-mix(in srgb, var(--c, var(--pl-brand)) 70%, currentColor);
}
.pl-reel__filter-sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 700; opacity: .7; white-space: nowrap; }
.pl-reel__filter-av {
    position: relative; flex-shrink: 0; width: 40px; height: 40px; padding: 2.5px; border-radius: 50%; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: conic-gradient(from 200deg, var(--c, var(--pl-brand)), color-mix(in srgb, var(--c, var(--pl-brand)) 40%, #fff), var(--c, var(--pl-brand)));
    color: var(--c, var(--pl-brand)); font-size: 13px; font-weight: 900; letter-spacing: -.03em;
}
.pl-reel__filter-av img,
.pl-reel__filter-ini { width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--pl-text); object-fit: cover; }
.pl-reel__filter-ini {
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--c, var(--pl-brand)) 24%, var(--pl-bg-2)); color: var(--c, var(--pl-brand));
}
/* Panel de perfil de la persona (solo página 1): notas · localidad · partido, enlaces
   oficiales y bio. Celular: compacto (bio en 2 líneas + "Ver más") para que el reel
   siga arrancando arriba; desktop (§10): bio completa. */
.pl-reel__profile {
    width: min(460px, 100%); padding: 7px 10px 8px 12px; border-radius: 14px;
    border-left: 3px solid var(--c, var(--pl-brand)); background: rgba(10,10,11,.8);
    font-size: 12px; line-height: 1.4; color: var(--pl-text-2); text-align: left;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
/* Plegado (v6.3.4): al bajar por el reel o a los 5 s, el perfil sube y deja ver la foto de la
   nota; la flecha del chip lo vuelve a abrir. */
.pl-reel__profile {
    max-height: 60vh; overflow: hidden; transform-origin: top center;
    transition: max-height 340ms var(--pl-ease-out), opacity 240ms ease, transform 340ms var(--pl-ease-out),
                padding 340ms var(--pl-ease-out), visibility 0s linear 0s;
}
.pl-reel__head.is-profile-closed .pl-reel__profile {
    max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: translateY(-10px) scale(.98);
    visibility: hidden; pointer-events: none;
    transition: max-height 340ms var(--pl-ease-out), opacity 200ms ease, transform 340ms var(--pl-ease-out),
                padding 340ms var(--pl-ease-out), visibility 0s linear 340ms;
}
.pl-reel__filter-info {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(10,10,11,.12); color: inherit; transition: transform 300ms var(--pl-ease-spring), background-color 150ms ease;
}
.pl-reel__filter-info:hover { background: rgba(10,10,11,.22); }
.pl-reel__filter-info:focus-visible { outline: 2px solid var(--pl-brand-l); outline-offset: 2px; }
.pl-reel__filter-info[aria-expanded="false"] { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
    .pl-reel__profile, .pl-reel__head.is-profile-closed .pl-reel__profile { transition: none; }
}
.pl-reel__profile-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.pl-reel__profile-meta {
    min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 800; color: var(--pl-text);
}
.pl-reel__profile-links { display: flex; flex-shrink: 0; gap: 4px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.pl-reel__profile-links a {
    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255,255,255,.1); color: var(--pl-text); transition: background-color 150ms ease;
}
.pl-reel__profile-links a:hover { background: rgba(255,255,255,.2); color: var(--pl-text); }
.pl-reel__bio { margin-top: 3px; }
.pl-reel__profile-row + .pl-reel__bio { margin-top: 4px; }
.pl-reel__bio-txt {
    margin: 0; font-weight: 600; overflow-wrap: break-word;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pl-reel__bio:has(> .pl-reel__bio-more[open]) .pl-reel__bio-txt {
    display: block; -webkit-line-clamp: unset; max-height: 38vh; overflow-y: auto; overscroll-behavior: contain;
}
.pl-reel__bio-more { display: inline; }
.pl-reel__bio-more > summary {
    display: inline-block; margin-top: 2px; cursor: pointer; list-style: none;
    font-weight: 800; color: var(--pl-brand-l);
}
.pl-reel__bio-more > summary::-webkit-details-marker { display: none; }
.pl-reel__bio-more > summary::marker { content: ""; }
.pl-reel__bio-off,
.pl-reel__bio-more[open] .pl-reel__bio-on { display: none; }
.pl-reel__bio-more[open] .pl-reel__bio-off { display: inline; }
/* Descripción del término (categoría / etiqueta): 2 líneas debajo del chip. */
.pl-reel__desc {
    max-width: min(460px, 100%); padding: 6px 12px; border-radius: 12px; background: rgba(10,10,11,.72);
    font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--pl-text-2); text-align: center;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pl-reel__desc p { margin: 0; }
/* Archivos: la foto de cada card arranca debajo de la cabecera. */
.pl-reel--archive .pl-reel__img { top: calc(var(--pl-reel-top-h) * .55); }

/* ---------- 4. Reel (scroll-snap) ---------- */
.pl-reel__feed {
    position: relative; height: 100%; overflow-x: hidden; overflow-y: auto;
    scroll-snap-type: y mandatory; overscroll-behavior: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; outline: none;
}
.pl-reel__feed::-webkit-scrollbar { display: none; }
.pl-reel__feed.is-leaving { opacity: 0; transform: translateY(-18px) scale(.985); transition: opacity 220ms ease, transform 220ms var(--pl-ease-out); pointer-events: none; }
.pl-reel__feed.is-entering { animation: pl-reel-feed-in 420ms var(--pl-ease-out) both; }

.pl-reel__card {
    position: relative; height: 100%; overflow: hidden; isolation: isolate;
    display: flex; align-items: flex-end;
    scroll-snap-align: start; scroll-snap-stop: always;
    background: var(--pl-bg-soft);
    /* Las cards lejos del viewport no se pintan (el blur es caro). */
    content-visibility: auto;
}
.pl-reel__card:focus { outline: none; }
.pl-reel__card:focus-visible { outline: 2px solid var(--pl-brand-l); outline-offset: -4px; }

/* Media: fondo desenfocado (miniatura) + imagen entera ("contain") */
.pl-reel__media {
    position: absolute; inset: 0; z-index: -2; overflow: hidden;
    /* Fondo negro de la pagina: la foto se funde en el (mascara en .pl-reel__img). */
    background: var(--pl-bg);
}
.pl-reel__blur {
    position: absolute; inset: -40px;
    background-position: center; background-size: cover; background-repeat: no-repeat;
    filter: blur(28px) brightness(.5) saturate(1.25);
    opacity: .28; /* solo un tinte de color detras; el protagonista es el negro */
}
/* El fondo solo se pide para la card activa y sus vecinas (reels.js pone .is-near). Sin JS, todas. */
.pl-reel:not(.pl-reel--js) .pl-reel__blur,
.pl-reel__card.is-near .pl-reel__blur { background-image: var(--pl-reel-bg); }

/* La caja de la imagen = la foto (height:auto + margin:auto la centra un poco arriba del
   medio, dejando lugar al titular), asi la mascara difumina los BORDES REALES de la foto
   contra el negro en vez de cortar con un filo duro. */
.pl-reel__img {
    position: absolute; left: 0; right: 0; top: 0; bottom: 22%; margin: auto; z-index: -1;
    width: 100%; height: auto; max-height: 100%; max-width: none;
    object-fit: contain; object-position: 50% 50%; transform-origin: 50% 50%;
    -webkit-mask-image:
        linear-gradient(to bottom, transparent 0, #000 16%, #000 70%, transparent 100%),
        linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image:
        linear-gradient(to bottom, transparent 0, #000 16%, #000 70%, transparent 100%),
        linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
            mask-composite: intersect;
}
.pl-reel__fallback {
    position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 32vh;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px), radial-gradient(120% 80% at 20% 10%, rgba(122,166,7,.22), transparent 60%);
    font-family: var(--pl-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.4);
}
.pl-reel__scrim {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(5,5,6,.5) 0%, rgba(5,5,6,0) 18%, rgba(5,5,6,0) 40%, rgba(5,5,6,.72) 64%, rgba(5,5,6,.96) 100%);
}

/* Barra de progreso decorativa (6 s, sin auto-avance) */
.pl-reel__progress {
    position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 2px;
    background: rgba(255,255,255,.14); overflow: hidden; pointer-events: none; opacity: 0;
}
.pl-reel__progress::after {
    content: ""; position: absolute; inset: 0; background: var(--pl-reel-cat, var(--pl-brand-l));
    transform: scaleX(0); transform-origin: left;
}
.pl-reel--anim .pl-reel__card.is-active .pl-reel__progress { opacity: 1; }
.pl-reel--anim .pl-reel__card.is-active .pl-reel__progress::after { animation: pl-reel-progress 6s linear forwards; }

/* Cuerpo */
.pl-reel__body {
    position: relative; z-index: 2; width: 100%;
    display: flex; flex-direction: column; gap: 12px;
    padding: 0 18px calc(var(--pl-reel-safe-b) + 28px);
}
.pl-reel__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.78); }
.pl-reel__cat {
    display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: var(--pl-radius-pill);
    background: var(--pl-reel-cat, var(--pl-brand)); color: var(--pl-black) !important;
    font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
}
.pl-reel__socios {
    display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 8px 0 6px; border-radius: var(--pl-radius-pill);
    background: var(--pl-white); color: var(--pl-black); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
}
.pl-reel__date { font-variant-numeric: tabular-nums; }
/* Feed priorizado (inc/feed-priority.php): pastilla de las destacadas. */
.pl-reel__featured {
    display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 9px 0 8px; border-radius: var(--pl-radius-pill);
    background: var(--pl-black); color: var(--pl-brand-l); border: 1px solid color-mix(in srgb, var(--pl-brand) 70%, transparent);
    font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
}
.pl-reel__featured::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pl-brand-l); box-shadow: 0 0 8px var(--pl-brand-l); }

.pl-reel__title {
    margin: 0; font-weight: 900; font-size: clamp(26px, 7.2vw, 40px); line-height: .98; letter-spacing: -.04em;
    color: var(--pl-white); text-wrap: balance; text-shadow: 0 2px 16px rgba(0,0,0,.45);
}
.pl-reel__title.is-long  { font-size: clamp(22px, 6vw, 32px); line-height: 1.02; }
.pl-reel__title.is-xlong { font-size: clamp(19px, 5.1vw, 27px); line-height: 1.06; letter-spacing: -.03em; }
.pl-reel__title a { color: var(--pl-white); }
.pl-reel__title a:hover { color: var(--pl-white); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pl-reel__w { display: inline-block; }

.pl-reel__who { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pl-reel__who-item {
    display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 11px 3px 4px; border-radius: var(--pl-radius-pill);
    background: rgba(20,20,22,.62); border: 1px solid rgba(255,255,255,.14); color: var(--pl-white);
    font-size: 12px; font-weight: 700; line-height: 1.1;
    transition: transform 260ms var(--pl-ease-spring), background-color 150ms ease;
}
.pl-reel__who-item:hover { background: rgba(40,40,44,.8); }
.pl-reel__mini {
    width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c, var(--pl-brand)); color: var(--pl-black); font-size: 9.5px; font-weight: 900; letter-spacing: -.02em;
}
.pl-reel__mini img { width: 100%; height: 100%; object-fit: cover; }

.pl-reel__actions { display: flex; align-items: center; gap: 10px; }
.pl-reel__read {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px;
    border-radius: var(--pl-radius-pill); background: var(--pl-text); color: var(--pl-black) !important;
    font-size: 14.5px; font-weight: 800;
    transition: transform 260ms var(--pl-ease-spring), box-shadow 200ms ease;
}
.pl-reel__read:hover { box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.pl-reel__count { margin-left: auto; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }

/* Pista de swipe (una vez por sesión, la agrega reels.js) */
.pl-reel__hint {
    position: absolute; z-index: 4; left: 0; right: 0; bottom: calc(var(--pl-reel-safe-b) + 6px); margin: 0 auto; width: max-content;
    font-size: 11px; font-weight: 700; letter-spacing: .04em; color: rgba(255,255,255,.6); pointer-events: none;
    transition: opacity 300ms ease;
}
.pl-reel--anim .pl-reel__hint { animation: pl-reel-bob 1.8s ease-in-out infinite; }
.pl-reel__hint.is-hidden { opacity: 0; }

/* ---------- 5. Entrada de la card activa (solo con .pl-reel--anim) ---------- */
/* Titular: palabras que suben con stagger; meta, personas y botón después. */
.pl-reel--anim .pl-reel__card--post .pl-reel__w {
    transition: opacity 420ms var(--pl-ease-out), transform 520ms var(--pl-ease-out);
    transition-delay: calc(var(--i, 0) * 38ms + 60ms);
}
.pl-reel--anim .pl-reel__card--post .pl-reel__meta,
.pl-reel--anim .pl-reel__card--post .pl-reel__who,
.pl-reel--anim .pl-reel__card--post .pl-reel__actions {
    transition: opacity 400ms var(--pl-ease-out), transform 480ms var(--pl-ease-out);
}
.pl-reel--anim .pl-reel__card--post .pl-reel__meta    { transition-delay: calc(var(--pl-reel-wd, 300ms) + 80ms); }
.pl-reel--anim .pl-reel__card--post .pl-reel__who     { transition-delay: calc(var(--pl-reel-wd, 300ms) + 150ms); }
.pl-reel--anim .pl-reel__card--post .pl-reel__actions { transition-delay: calc(var(--pl-reel-wd, 300ms) + 220ms); }

.pl-reel--anim .pl-reel__card--post:not(.is-active) .pl-reel__w { opacity: 0; transform: translateY(.55em); }
.pl-reel--anim .pl-reel__card--post:not(.is-active) .pl-reel__meta,
.pl-reel--anim .pl-reel__card--post:not(.is-active) .pl-reel__who,
.pl-reel--anim .pl-reel__card--post:not(.is-active) .pl-reel__actions { opacity: 0; transform: translateY(12px); }
/* Al salir se esconde rápido y sin demora (para que la próxima entrada vuelva a animar). */
.pl-reel--anim .pl-reel__card--post:not(.is-active) .pl-reel__w,
.pl-reel--anim .pl-reel__card--post:not(.is-active) .pl-reel__meta,
.pl-reel--anim .pl-reel__card--post:not(.is-active) .pl-reel__who,
.pl-reel--anim .pl-reel__card--post:not(.is-active) .pl-reel__actions { transition-duration: 160ms; transition-delay: 0s; }

/* Ken Burns lento mientras la card está activa */
.pl-reel--anim .pl-reel__card.is-active .pl-reel__img { animation: pl-reel-kb 14s ease-out both; will-change: transform; }

/* ---------- 6. Feedback táctil (spring .96) ---------- */
.pl-reel__read:active,
.pl-reel__who-item:active,
.pl-reel__retry:active,
.pl-reel__filter button:active,
.pl-reel__person:active .pl-reel__ring { transform: scale(.96); }

/* ---------- 7. Rieles de personas ---------- */
.pl-reel__rail {
    position: absolute; z-index: 20; top: var(--pl-reel-top-h); bottom: 42%;
    width: var(--pl-reel-rail-w); display: flex; flex-direction: column; min-height: 0;
    transition: opacity 250ms ease;
}
.pl-reel__rail--nacional   { left: 4px; }
.pl-reel__rail--provincial { right: 4px; }
/* En mobile los rieles se apartan sobre las cards especiales y el cierre. */
.pl-reel.is-special-active .pl-reel__rail { opacity: 0; pointer-events: none; }
/* ...salvo que tengan el foco (skip link o Tab): nunca foco en algo invisible. */
.pl-reel.is-special-active .pl-reel__rail:focus-within { opacity: 1; pointer-events: auto; }
/* Con la nota abierta, el reel de fondo se queda quieto (más específico que las
   reglas de animación de la card activa, que usan el shorthand). */
.pl-reel.is-note-open .pl-reel__card.is-active .pl-reel__img,
.pl-reel.is-note-open .pl-reel__card.is-active .pl-reel__progress::after,
html.pl-note-open .pl-hashcloud__list .pl-hash { animation-play-state: paused; }

.pl-reel__rail-title {
    margin: 0 0 6px; text-align: center; color: var(--c);
    font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2;
    text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
.pl-reel__rail-list {
    list-style: none; margin: 0; padding: 4px 0 12px; flex: 1; min-height: 0;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent);
}
.pl-reel__rail-list::-webkit-scrollbar { display: none; }
.pl-reel__rail-list li { width: 100%; }

.pl-reel__person { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; color: var(--pl-white); }
.pl-reel--anim .pl-reel__person { animation: pl-reel-pop 520ms var(--pl-ease-spring) backwards; animation-delay: calc(var(--i, 0) * 45ms + 120ms); }

.pl-reel__face { position: relative; display: block; flex-shrink: 0; }
.pl-reel__ring {
    position: relative; display: block; flex-shrink: 0; width: 50px; height: 50px; padding: 2.5px;
    border-radius: 50%; overflow: hidden; isolation: isolate;
    transition: transform 260ms var(--pl-ease-spring);
}
/* El aro es un pseudo cuadrado recortado por el círculo: rotarlo (transform) = aro girando. */
.pl-reel__ring::before {
    content: ""; position: absolute; inset: -25%; z-index: -1;
    background: conic-gradient(from 200deg, var(--c), color-mix(in srgb, var(--c) 40%, #fff), var(--c));
}
.pl-reel__person.is-seen .pl-reel__ring::before { background: var(--pl-border-2); }
.pl-reel__person.is-on .pl-reel__ring::before { background: conic-gradient(from 0deg, #fff, color-mix(in srgb, var(--c) 60%, #fff), #fff); }
.pl-reel__person.is-loading .pl-reel__ring::before {
    background: conic-gradient(from 0deg, var(--c), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 45%, #fff 75%, var(--c));
    animation: pl-reel-spin 900ms linear infinite;
}
.pl-reel__avatar {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    border-radius: 50%; border: 2.5px solid var(--pl-bg); overflow: hidden;
    background: color-mix(in srgb, var(--c) 22%, var(--pl-bg-2)); color: var(--c);
    font-size: 15px; font-weight: 900; letter-spacing: -.03em; line-height: 1;
}
.pl-reel__avatar img { width: 100%; height: 100%; object-fit: cover; }
.pl-reel__ptxt { display: contents; }
.pl-reel__pname {
    max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
    font-size: 9.5px; font-weight: 700; line-height: 1.1; color: var(--pl-white); text-shadow: 0 1px 6px rgba(0,0,0,.8);
}
/* Total de notas: texto chico debajo del nombre (el globo rojo queda solo arriba). */
.pl-reel__psub {
    display: block; max-width: 60px; margin-top: -1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
    font-size: 8.5px; font-weight: 600; line-height: 1.1; color: rgba(255,255,255,.62); font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 6px rgba(0,0,0,.8);
}

/* Globo rojo "notas nuevas desde tu última visita" (estilo Instagram). Lo agrega
   reels.js: arriba a la derecha del avatar en los rieles, en línea en los chips. */
.pl-reel__new {
    position: absolute; z-index: 2; top: -3px; right: -6px;
    min-width: 20px; height: 20px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--pl-radius-pill); border: 2px solid var(--pl-bg);
    background: #ff3b30; color: #fff; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1;
    box-shadow: 0 2px 8px rgba(255,59,48,.45); pointer-events: none;
}
.pl-reel__new.is-out { opacity: 0; transform: scale(.4); transition: opacity 180ms ease, transform 220ms ease; }
html.pl-reel-lock .pl-reel__new:not(.is-out) { animation: pl-reel-badge-in 520ms var(--pl-ease-spring) both; animation-delay: calc(var(--i, 0) * 45ms + 420ms); }
.pl-hash .pl-reel__new { position: relative; top: auto; right: auto; margin: 0 -5px 0 7px; min-width: 18px; height: 18px; font-size: 10px; border-width: 0; }

/* ---------- 8. Cards especiales (CTA WhatsApp, Lo más leído, fin) ---------- */
.pl-reel__card--special { align-items: center; justify-content: center; background: var(--pl-bg); }
.pl-reel__card--wa .pl-cta-wa2 {
    width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none;
    padding: calc(var(--pl-reel-top-h) + 28px) 22px calc(var(--pl-reel-safe-b) + 28px);
}
.pl-reel__card--wa .pl-cta-wa2:hover { transform: none; }
.pl-reel__card--wa .pl-cta-wa2__title { font-size: clamp(40px, 11vw, 56px); }
.pl-reel__card--wa .pl-cta-wa2__sub { font-size: 16px; }
.pl-reel__card--mostread { padding: calc(var(--pl-reel-top-h) + 12px) 14px calc(var(--pl-reel-safe-b) + 24px); background: radial-gradient(100% 60% at 50% 0%, rgba(122,166,7,.12), transparent 70%), var(--pl-bg); }
/* v6.4.3: el panel entra SIEMPRE entero en la card, sin scroll propio (un scroll adentro del
   reel atrapaba la rueda/el dedo y en pantallas bajas tapaba "Lo más leído · Hoy"). Títulos en
   2 líneas y, si la pantalla es baja, más compacto y con menos puestos. */
.pl-reel__card--mostread .pl-most-read { width: 100%; max-width: 460px; max-height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.pl-reel__card--mostread .pl-most-read__head { flex-shrink: 0; }
.pl-reel__card--mostread .pl-most-read__list { min-height: 0; overflow: hidden; }
.pl-reel__card--mostread .pl-most-read__title-text {
    font-size: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-height: 760px) {
    .pl-reel__card--mostread .pl-most-read { padding-top: 14px; }
    .pl-reel__card--mostread .pl-most-read__title { font-size: 22px; }
    .pl-reel__card--mostread .pl-most-read__link { padding: 9px 0; gap: 12px; }
    .pl-reel__card--mostread .pl-most-read__rank { width: 34px; font-size: 34px; }
    .pl-reel__card--mostread .pl-most-read__title-text { font-size: 15px; }
}
@media (max-height: 620px) {
    .pl-reel__card--mostread .pl-most-read__cat { display: none; }
}
@media (max-height: 540px) {
    .pl-reel__card--mostread .pl-most-read__item:nth-child(n+5) { display: none; }
}
@media (max-height: 440px) {
    .pl-reel__card--mostread .pl-most-read__item:nth-child(n+4) { display: none; }
}
.pl-reel--anim .pl-reel__card--special.is-active > * { animation: pl-reel-feed-in 480ms var(--pl-ease-out) both; }

.pl-reel__card--empty {
    align-items: center; justify-content: center; text-align: center;
    background: radial-gradient(90% 55% at 50% 35%, rgba(122,166,7,.18), transparent 70%), var(--pl-bg);
}
.pl-reel__empty { margin: 0; padding: 0 24px; color: var(--pl-muted); font-weight: 700; }

/* Búsqueda sin resultados (template-parts/reel-noresults.php: la misma tarjeta en la
   portada y en /?s=): mensaje + temas sugeridos + volver a todas las notas. */
.pl-reel__noresults {
    display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 420px;
    padding: calc(var(--pl-reel-top-h) + 20px) 22px calc(var(--pl-reel-safe-b) + 24px);
}
.pl-reel__card--noresults .pl-reel__empty { padding: 0; font-size: 21px; font-weight: 900; line-height: 1.15; letter-spacing: -.02em; color: var(--pl-text); overflow-wrap: anywhere; }
.pl-reel__noresults-sub { margin: 0; font-size: 14px; font-weight: 600; color: var(--pl-muted); }
.pl-reel__noresults .pl-reel__suggest { justify-content: center; }
.pl-reel__noresults-link { margin-top: 6px; font-size: 13px; font-weight: 800; color: var(--pl-brand-l) !important; }
.pl-reel__noresults-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.pl-reel--anim .pl-reel__card--noresults .pl-reel__noresults > * { animation: pl-reel-rise 420ms var(--pl-ease-out) both; }
.pl-reel--anim .pl-reel__card--noresults .pl-reel__noresults > :nth-child(2) { animation-delay: 60ms; }
.pl-reel--anim .pl-reel__card--noresults .pl-reel__noresults > :nth-child(3) { animation-delay: 120ms; }
.pl-reel--anim .pl-reel__card--noresults .pl-reel__noresults > :nth-child(4) { animation-delay: 180ms; }

/* Pie mínimo del reel (no es card): se asoma debajo de la última nota con snap
   al final. "Estás al día ✓" + archivo crawleable + socios/transparencia. */
.pl-reel__tail {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: calc(var(--pl-reel-safe-b) + 88px); padding: 12px 16px calc(var(--pl-reel-safe-b) + 12px);
    scroll-snap-align: end; text-align: center;
    background: var(--pl-bg); border-top: 1px solid var(--pl-border);
}
.pl-reel__done {
    display: inline-flex; align-items: center; gap: 7px; margin: 0;
    font-size: 13px; font-weight: 800; letter-spacing: -.01em; color: var(--pl-text);
}
.pl-reel__done[hidden], .pl-reel__retry[hidden] { display: none; }
.pl-reel__done-ico {
    display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
    background: var(--pl-brand); color: var(--pl-black); font-size: 11px; font-weight: 900; line-height: 1;
}
.pl-reel--anim .pl-reel__done:not([hidden]) { animation: pl-reel-rise 420ms var(--pl-ease-out) both; }
.pl-reel__retry {
    min-height: 32px; padding: 0 12px; border-radius: var(--pl-radius-pill); border: 1px solid var(--pl-border-2);
    background: transparent; color: var(--pl-text); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
    transition: transform 260ms var(--pl-ease-spring);
}
.pl-reel__tail-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.pl-reel__tail-links li + li::before { content: "\00B7"; padding: 0 7px; color: var(--pl-muted); }
.pl-reel__tail-links a {
    display: inline-flex; align-items: center; gap: 4px; min-height: 32px;
    font-size: 12px; font-weight: 700; color: var(--pl-text-2); text-decoration: underline; text-underline-offset: 3px;
}
.pl-reel__tail-links a:hover { color: var(--pl-text); }
.pl-reel__tail-links .pl-reel__archive { color: var(--pl-brand-l); text-decoration: none; }
.pl-reel__tail-links .pl-reel__archive:hover { color: var(--pl-brand-l); text-decoration: underline; }
/* Segunda fila: transparencia completa (el footer queda tapado en la portada),
   más chica y apagada. */
.pl-reel__tail-nav { display: flex; flex-direction: column; align-items: center; }
.pl-reel__tail-links--legal { max-width: 440px; }
.pl-reel__tail-links--legal a { min-height: 28px; font-size: 11.5px; font-weight: 600; color: var(--pl-muted); text-decoration: none; }
.pl-reel__tail-links--legal a:hover { color: var(--pl-text); text-decoration: underline; }
.pl-reel__social { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pl-reel__social a {
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
    background: rgba(255,255,255,.06); color: var(--pl-text-2);
    transition: background-color 150ms ease, color 150ms ease;
}
.pl-reel__social a:hover { background: rgba(255,255,255,.12); color: var(--pl-text); }
.pl-reel__social svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Skeleton mientras llega un filtro (y, más tenue, al final durante el scroll infinito) */
.pl-reel__skeleton { background: var(--pl-bg-soft); }
.pl-reel__skeleton--tail { opacity: .75; }
.pl-reel__skeleton .pl-reel__body { gap: 14px; }
.pl-reel__sk { position: relative; display: block; overflow: hidden; border-radius: 10px; background: var(--pl-bg-3); }
.pl-reel__sk::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
    animation: pl-reel-shimmer 1.2s ease-in-out infinite;
}
.pl-reel__sk--media { position: absolute; left: 0; right: 0; top: 14%; height: 42%; border-radius: 0; }
.pl-reel__sk--pill  { width: 96px; height: 24px; border-radius: var(--pl-radius-pill); }
.pl-reel__sk--line  { width: 92%; height: 32px; }
.pl-reel__sk--short { width: 64%; }
.pl-reel__sk--btn   { width: 150px; height: 46px; border-radius: var(--pl-radius-pill); }

/* ---------- 8b. Notas nuevas desde la última visita (reels.js) ---------- */
/* Pastilla "NUEVA" en la meta de la card. */
.pl-reel__new-pill {
    display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 9px 0 8px; border-radius: var(--pl-radius-pill);
    background: var(--pl-brand); color: var(--pl-black);
    font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
    box-shadow: 0 0 0 3px rgba(122,166,7,.25), 0 0 16px rgba(122,166,7,.5);
}
.pl-reel__new-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pl-black); opacity: .75; }
/* Aro de brillo en el borde de la card (quieto sin animaciones; late si está activa). */
.pl-reel__card--post.is-new::after {
    content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
    box-shadow: inset 0 0 0 2px var(--pl-brand-l), inset 0 0 30px 2px rgba(122,166,7,.42);
    opacity: .7;
}
.pl-reel--anim .pl-reel__card--post.is-new.is-active::after { animation: pl-reel-glow 2.6s ease-in-out infinite; }
/* Barrido de brillo sobre la imagen, una sola vez, la primera vez que la card se activa. */
.pl-reel__shine { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; opacity: 0; }
.pl-reel__shine::before {
    content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 55%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 30%, rgba(255,255,255,.32) 50%, rgba(255,255,255,.08) 70%, rgba(255,255,255,0) 100%);
    transform: translateX(-110%) skewX(-14deg);
}
.pl-reel--anim .pl-reel__card.is-shine .pl-reel__shine { opacity: 1; }
.pl-reel--anim .pl-reel__card.is-shine .pl-reel__shine::before { animation: pl-reel-sweep 1.15s var(--pl-ease-out) 180ms 1 both; }

/* Contador flotante "N notas nuevas desde tu última visita" (se va a los 4 s). */
.pl-reel__fresh {
    position: absolute; z-index: 32; top: calc(var(--pl-reel-top-h) + 6px); left: 0; right: 0; margin: 0 auto;
    width: max-content; max-width: calc(100% - (var(--pl-reel-rail-w) + 8px) * 2);
    display: flex; align-items: center; gap: 7px; padding: 7px 14px 7px 10px; border-radius: 18px;
    background: var(--pl-brand); color: var(--pl-black);
    font-size: 12.5px; font-weight: 800; line-height: 1.25; text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 3px rgba(122,166,7,.22); pointer-events: none;
    opacity: 0; transform: translateY(-8px);
    transition: opacity 320ms ease, transform 420ms var(--pl-ease-spring);
}
.pl-reel__fresh.is-visible { opacity: 1; transform: none; }
.pl-reel__fresh--low { top: calc(var(--pl-reel-top-h) + 50px); }
.pl-reel__fresh::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 2px rgba(255,255,255,.7); }

/* ---------- 9. Modal de la nota (.pl-note, template-parts/reel-note.php) ---------- */
/* El contenedor. Teléfono: hoja que sube desde abajo con resorte, casi a pantalla
   completa. Desktop ≥900px: panel centrado de 720px. Adentro, el componente de la
   nota (main.css, "La nota": idéntico a la página). La foto de la card "vuela" al
   hero (fantasma .pl-note__ghost, reels.js); sin fantasma, la imagen entra con
   escala + fundido. Sin JS nunca se ve (hidden). */
.pl-note { position: absolute; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; }
.pl-note[hidden] { display: none; }
.pl-note__backdrop {
    position: absolute; inset: 0; width: 100%; height: 100%; cursor: default;
    background: rgba(5,5,6,.66); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity: 0; transition: opacity 300ms ease;
}
.pl-note.is-open .pl-note__backdrop { opacity: 1; }
.pl-note.is-closing .pl-note__backdrop { transition-duration: 260ms; }

.pl-note__panel {
    position: relative; width: 100%; height: calc(100% - env(safe-area-inset-top, 0px) - 12px);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--pl-bg); border-radius: 22px 22px 0 0; border-top: 1px solid var(--pl-border-2);
    box-shadow: 0 -18px 50px rgba(0,0,0,.55);
    outline: none;
    transform: translateY(100%);
    transition: transform 540ms cubic-bezier(.2,1.16,.32,1);
}
/* El resorte "pasa" un poco hacia arriba: esta extensión tapa el hueco de abajo. */
.pl-note__panel::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 80px; background: var(--pl-bg); }
.pl-note.is-open .pl-note__panel { transform: none; }
.pl-note.is-closing .pl-note__panel { transition: transform 280ms cubic-bezier(.5,0,.75,0); }
.pl-note__grip { position: absolute; z-index: 8; top: 6px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: rgba(255,255,255,.35); pointer-events: none; }

.pl-note__scroll {
    flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; outline: none;
    padding-bottom: calc(var(--pl-reel-safe-b) + 28px);
}
.pl-note__content { min-height: 60%; }
.pl-note__foot { display: flex; justify-content: center; margin: 22px 20px 0; }
.pl-note__full { color: var(--pl-black) !important; }
.pl-note__ghost {
    position: fixed; z-index: 5; margin: 0; max-width: none; object-fit: cover; pointer-events: none;
    box-shadow: 0 24px 60px rgba(0,0,0,.55);
}

/* ---------- 9b. Engagement (v5.7): acciones de la card, corazón, conversación ---------- */
@keyframes pl-eng-pop   { 0% { scale: 1; } 30% { scale: 1.32; } 55% { scale: .9; } 100% { scale: 1; } }
@keyframes pl-eng-ring  { from { opacity: .9; scale: .3; } to { opacity: 0; scale: 1.6; } }
@keyframes pl-eng-burst {
    0%   { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(.2); }
    18%  { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.25); }
    32%  { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(.95); }
    46%  { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.05); }
    72%  { opacity: 1; transform: translate(-50%, -62%) rotate(var(--rot, 0deg)) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -150%) rotate(var(--rot, 0deg)) scale(.7); }
}
@keyframes pl-eng-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pl-com-in    { from { opacity: 0; translate: 0 -8px; background-color: rgba(122,166,7,.22); } to { opacity: 1; translate: 0 0; } }

/* Columna de acciones a la derecha (estilo TikTok). Solo con JS. El cuerpo deja
   lugar a la derecha para que el titular no quede debajo de la columna. */
.pl-reel__acts { display: none; }
.pl-reel--js .pl-reel__acts {
    position: absolute; z-index: 3; right: 8px; bottom: calc(var(--pl-reel-safe-b) + 30px);
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.pl-reel--js .pl-reel__card--post .pl-reel__body { padding-right: 78px; }
/* Doble toque sin zoom del navegador. */
.pl-reel--js .pl-reel__card--post { touch-action: manipulation; }

.pl-reel__act {
    display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 52px;
    color: var(--pl-white); -webkit-tap-highlight-color: transparent;
}
.pl-reel__act:hover { color: var(--pl-white); }
.pl-reel__act-ico {
    position: relative; width: 50px; height: 50px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(14,14,16,.5); border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: background-color 150ms ease, scale 260ms var(--pl-ease-spring);
}
.pl-reel__act:hover .pl-reel__act-ico { background: rgba(40,40,44,.72); }
.pl-reel__act:active .pl-reel__act-ico { scale: .9; }
.pl-reel__act svg { width: 27px; height: 27px; overflow: visible; }
.pl-reel__act svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; transition: fill 160ms ease, stroke 160ms ease; }
.pl-reel__act--share svg path { fill: currentColor; stroke: none; }
.pl-reel__act-n {
    min-height: 14px; font-size: 12px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 6px rgba(0,0,0,.85);
}
.pl-reel__act--share .pl-reel__act-n { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.82); }
.pl-reel__acts.is-loaded .pl-reel__act-n { animation: pl-eng-fade 260ms ease both; }
.pl-reel__act:focus-visible { outline: none; }
.pl-reel__act:focus-visible .pl-reel__act-ico { outline: 2px solid var(--pl-brand-l); outline-offset: 2px; }

/* "Me gusta" activo: corazón rojo lleno + latido + aro. */
.pl-reel__act--like.is-liked .pl-reel__act-ico { background: rgba(255,59,92,.16); border-color: rgba(255,59,92,.5); }
.pl-reel__act--like.is-liked svg path { fill: #ff3b5c; stroke: #ff3b5c; }
.pl-reel__act--like.is-pop svg { animation: pl-eng-pop 520ms var(--pl-ease-spring); }
.pl-reel__act--like.is-pop .pl-reel__act-ico::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #ff3b5c;
    animation: pl-eng-ring 520ms ease-out forwards; pointer-events: none;
}

/* Entra con el resto de la card activa. */
.pl-reel--anim .pl-reel__card--post .pl-reel__acts { transition: opacity 400ms var(--pl-ease-out), transform 480ms var(--pl-ease-out); transition-delay: calc(var(--pl-reel-wd, 300ms) + 180ms); }
.pl-reel--anim .pl-reel__card--post:not(.is-active) .pl-reel__acts { opacity: 0; transform: translateX(14px); transition-duration: 160ms; transition-delay: 0s; }

/* Corazón grande del doble toque (donde tocó el lector). */
.pl-reel__burst {
    position: absolute; z-index: 6; width: 112px; height: 112px; pointer-events: none;
    color: #ff3b5c; filter: drop-shadow(0 8px 24px rgba(255,59,92,.55)) drop-shadow(0 2px 4px rgba(0,0,0,.4));
    transform: translate(-50%, -50%);
    animation: pl-eng-burst 950ms cubic-bezier(.2,.8,.3,1) forwards;
}
.pl-reel__burst svg { width: 100%; height: 100%; }
.pl-reel__burst svg path { fill: currentColor; }

/* Conversación (reels.js la arma dentro de [data-pl-note-comments] del componente de
   la nota: igual en el modal y en la página). */
.pl-note__com-title {
    display: flex; align-items: center; gap: 8px; margin: 0; outline: none;
    font-size: 20px; font-weight: 900; letter-spacing: -.02em; color: var(--pl-white);
}
.pl-note__com-total:not(:empty) {
    display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 7px;
    border-radius: var(--pl-radius-pill); background: var(--pl-brand); color: var(--pl-black);
    font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums;
}
.pl-note__com-msg { margin: 10px 0 0; font-size: 13.5px; font-weight: 700; color: var(--pl-brand-l); }
.pl-note__com-msg:empty { display: none; }
.pl-note__com-msg span { margin-right: 8px; }
.pl-note__com-retry, .pl-note__com-more {
    min-height: 36px; padding: 0 14px; border-radius: var(--pl-radius-pill); border: 1px solid var(--pl-border-2);
    color: var(--pl-text); font-size: 13px; font-weight: 800;
}
.pl-note__com-retry:hover, .pl-note__com-more:hover { border-color: var(--pl-text-2); }
.pl-note__com-more { display: flex; margin: 14px auto 0; }
.pl-note__com-more[hidden] { display: none; }
.pl-note__com-more:disabled { opacity: .6; cursor: default; }

.pl-note__com-gate { margin: 14px 0 0; padding: 16px; border-radius: var(--pl-radius-lg); border: 1px solid var(--pl-border); background: var(--pl-bg-2); text-align: center; }
.pl-note__com-gate[hidden] { display: none; }
.pl-note__com-note { margin: 0; font-weight: 700; color: var(--pl-text-2); }
.pl-note__com-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.pl-note__com-cta .pl-btn--primary { color: var(--pl-black) !important; }
.pl-note__com-reg { border: 1.5px solid var(--pl-border-2); color: var(--pl-text) !important; }

.pl-note__composer { margin: 14px 0 0; }
.pl-note__composer[hidden], .pl-note__com-fields[hidden] { display: none; }
.pl-note__com-input,
.pl-note__com-field input {
    width: 100%; margin: 0; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--pl-border-2);
    background: var(--pl-bg-2); color: var(--pl-text); font: inherit; font-size: 16px; line-height: 1.45;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.pl-note__com-input { display: block; min-height: 92px; resize: vertical; }
.pl-note__com-input:focus,
.pl-note__com-field input:focus { outline: none; border-color: var(--pl-brand-l); box-shadow: 0 0 0 3px rgba(122,166,7,.25); }
.pl-note__com-fields { display: grid; gap: 10px; margin-top: 10px; }
.pl-note__com-field { display: grid; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--pl-muted); }
.pl-note__com-field input { padding: 10px 12px; }
.pl-note__com-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.pl-note__com-hint { margin: 0; font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--pl-muted); }
.pl-note__com-send { flex-shrink: 0; color: var(--pl-black) !important; }
.pl-note__com-send:disabled { opacity: .65; cursor: default; }

.pl-note__com-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.pl-note__com-list[hidden] { display: none; }
.pl-note__com { display: flex; gap: 11px; align-items: flex-start; }
.pl-note__com.is-fresh { animation: pl-com-in 600ms var(--pl-ease-out) both; border-radius: 12px; }
.pl-note__com.is-reply { padding-left: 16px; border-left: 2px solid var(--pl-border); }
.pl-note__com-av {
    width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; object-fit: cover; background: var(--pl-bg-3);
}
.pl-note__com-av--ph { display: inline-flex; align-items: center; justify-content: center; color: var(--pl-brand-l); font-size: 14px; font-weight: 900; }
.pl-note__com-main { min-width: 0; flex: 1; }
.pl-note__com-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; font-size: 13px; line-height: 1.3; }
.pl-note__com-author { font-weight: 800; color: var(--pl-text); overflow-wrap: anywhere; }
.pl-note__com-reply { font-size: 11px; font-weight: 700; color: var(--pl-muted); text-transform: uppercase; letter-spacing: .06em; }
.pl-note__com-date { font-size: 12px; font-weight: 600; color: var(--pl-muted); }
.pl-note__com-text { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--pl-text-2); overflow-wrap: break-word; }
.pl-note__com-text p { margin: 0 0 .6em; }
.pl-note__com-text p:last-child { margin-bottom: 0; }
.pl-note__com-text a { color: var(--pl-brand-l); text-decoration: underline; text-underline-offset: 2px; }
.pl-note__com-empty { margin: 14px 0 0; font-size: 14px; font-weight: 600; color: var(--pl-muted); }
.pl-note__com-empty[hidden] { display: none; }
.pl-note__com-sk { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.pl-note__com-sk[hidden] { display: none; }
.pl-note__com-sk span { position: relative; display: block; height: 14px; border-radius: 7px; overflow: hidden; background: var(--pl-bg-3); }
.pl-note__com-sk span.is-short { width: 55%; }
.pl-note__com-sk span::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
    animation: pl-note-sk 1.2s ease-in-out infinite;
}

/* ---------- 10. Desktop ≥900px: tres columnas ---------- */
@media (min-width: 900px) {
    .pl-reel {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 460px) minmax(0, 1fr);
        column-gap: 28px; padding: 0 28px;
        background: radial-gradient(1200px 600px at 50% -10%, rgba(122,166,7,.10), transparent 60%), var(--pl-bg);
    }
    .pl-reel__stage { grid-column: 2; border-left: 1px solid var(--pl-border); border-right: 1px solid var(--pl-border); }

    .pl-reel__rail {
        position: static; grid-row: 1; width: 260px; max-width: 100%; height: 100%;
        padding: calc(var(--pl-reel-top-h) + 12px) 0 28px;
    }
    .pl-reel__rail--nacional   { grid-column: 1; justify-self: end; }
    .pl-reel__rail--provincial { grid-column: 3; justify-self: start; }
    .pl-reel.is-special-active .pl-reel__rail { opacity: 1; pointer-events: auto; }
    .pl-reel__rail-title { margin: 0 0 14px; padding-left: 6px; text-align: left; font-size: 11px; text-shadow: none; }
    .pl-reel__rail-list {
        align-items: stretch; gap: 4px; padding-right: 4px; -webkit-mask-image: none; mask-image: none;
        scrollbar-width: thin; scrollbar-color: var(--pl-border-2) transparent;
    }
    .pl-reel__person { flex-direction: row; gap: 12px; padding: 8px 10px 8px 6px; border-radius: var(--pl-radius-lg); transition: background-color 150ms ease; }
    .pl-reel__person:hover { background: rgba(255,255,255,.05); }
    .pl-reel__person.is-on { background: rgba(255,255,255,.09); }
    .pl-reel__ring { width: 54px; height: 54px; }
    .pl-reel__ptxt { display: flex; flex-direction: column; min-width: 0; order: 2; }
    .pl-reel__new { top: -2px; right: -4px; }
    .pl-reel__fresh { max-width: calc(100% - 32px); }
    .pl-reel__pname { max-width: none; font-size: 14px; white-space: normal; text-align: left; text-shadow: none; }
    .pl-reel__psub { max-width: none; margin-top: 2px; font-size: 11.5px; font-weight: 600; text-align: left; color: var(--pl-muted); text-shadow: none; }

    .pl-reel__head { padding: 0 16px; }
    /* Persona: perfil completo (foto más grande, bio sin recortar). */
    .pl-reel__filter--person .pl-reel__filter-av { width: 52px; height: 52px; }
    .pl-reel__filter--person .pl-reel__filter-h { font-size: 16px; }
    .pl-reel__filter--person .pl-reel__filter-sub { font-size: 12px; }
    .pl-reel__profile { padding: 10px 12px 11px 14px; font-size: 13px; }
    .pl-reel__bio-txt { display: block; -webkit-line-clamp: unset; overflow: visible; }
    .pl-reel__bio-more { display: none; }
    .pl-reel__title { font-size: 36px; }
    .pl-reel__title.is-long { font-size: 30px; }
    .pl-reel__title.is-xlong { font-size: 25px; }

    /* Nota: panel centrado de 720px que sube con resorte y fundido. */
    .pl-note { align-items: center; padding: 28px; }
    .pl-note__panel {
        width: min(720px, 100%); height: auto; max-height: 100%;
        border-radius: 22px; border: 1px solid var(--pl-border-2);
        box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 30px 80px rgba(0,0,0,.6);
        opacity: 0; transform: translateY(32px) scale(.96);
        transition: transform 520ms cubic-bezier(.2,1.2,.32,1), opacity 240ms ease;
    }
    .pl-note__panel::after, .pl-note__grip { display: none; }
    .pl-note.is-open .pl-note__panel { opacity: 1; }
    .pl-note.is-closing .pl-note__panel { opacity: 0; transform: translateY(20px) scale(.97); transition: transform 240ms ease-in, opacity 200ms ease; }
    .pl-note__scroll { max-height: calc(100vh - 56px); border-radius: 22px; }
}

/* Pantallas bajas: la columna de acciones se achica para no chocar con el riel. */
@media (max-height: 640px) and (max-width: 899px) {
    .pl-reel--js .pl-reel__acts { gap: 8px; bottom: calc(var(--pl-reel-safe-b) + 22px); }
    .pl-reel__act-ico { width: 42px; height: 42px; }
    .pl-reel__act svg { width: 23px; height: 23px; }
    .pl-reel__act--share .pl-reel__act-n { display: none; }
}

/* ---------- 11. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
    .pl-reel__feed { scroll-behavior: auto; }
    .pl-reel__hint,
    .pl-reel__img,
    .pl-reel__person,
    .pl-reel__sk::after,
    .pl-reel__filter,
    .pl-reel__card--noresults .pl-reel__noresults > *,
    .pl-reel__new,
    .pl-reel__done,
    .pl-reel__card.is-new::after,
    .pl-reel__shine::before,
    .pl-reel__act--like.is-pop svg,
    .pl-reel__act--like.is-pop .pl-reel__act-ico::after,
    .pl-note__com.is-fresh,
    .pl-note__com-sk span::after { animation: none !important; }
    .pl-reel__shine { display: none; }
    /* Doble toque: el corazón aparece y se va, sin viaje ni rebote. */
    .pl-reel__burst { animation: pl-eng-fade 1ms both !important; opacity: 1; }
    .pl-reel__fresh,
    .pl-reel__fresh.is-visible { transform: none; }
    .pl-reel__person.is-loading .pl-reel__ring::before { animation-duration: 2.4s; }
    .pl-reel__feed.is-leaving { transform: none; }
    /* Modal y búsqueda: sin viajes ni resortes, solo aparecen. */
    .pl-note__panel,
    .pl-note.is-open .pl-note__panel,
    .pl-note.is-closing .pl-note__panel { transform: none !important; transition: opacity 1ms !important; }
    .pl-note__ghost { display: none; }
}