/* ==========================================================================
   Pampa Liberal 2 - main.css
   Mobile-first, oscuro por defecto: el sitio entero es UNA app (v5.9). En todas las
   páginas: la barra fija de la app (marca, búsqueda verde, nube de hashtags = el
   menú, panel "▾ Todos"), la nota como componente único (modal y página), las hojas
   (páginas, 404, archivos vacíos) y el cierre mínimo. El reel (portada, archivos,
   búsqueda) está en reels.css.
   Tokens tomados tal cual del design system (tokens/colors.css, typography.css,
   spacing.css, effects.css) — ver design-system/readme.md.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
    /* Marca */
    --pl-brand:    #7aa607;
    --pl-brand-d:  #5f8205;
    --pl-brand-dd: #1f2b08;
    --pl-brand-l:  #9fc943;
    --pl-brand-ll: #c6e27a;
    /* Neutros (dark, base — sin light mode en esta pasada) */
    --pl-black:    #050506;
    --pl-bg:       #0a0a0b;
    --pl-bg-soft:  #111114;
    --pl-bg-2:     #18181b;
    --pl-bg-3:     #232327;
    --pl-border:   #27272a;
    --pl-border-2: #3f3f46;
    --pl-text:     #fafafa;
    --pl-text-2:   #d4d4d8;
    --pl-muted:    #a1a1aa;
    --pl-white:    #ffffff;
    /* Semánticos */
    --pl-accent:   #9fc943;
    --pl-accent-2: #d4a455;
    --pl-buy:      #16a34a;
    --pl-sell:     #dc2626;
    --pl-sell-l:   #f87171;
    --pl-wa:       #25d366;
    /* Categorías */
    --pl-cat-provinciales:    #9fc943;
    --pl-cat-nacionales:      #4fb3ff;
    --pl-cat-internacionales: #d4a455;
    --pl-cat-emprender:       #ff7a3d;

    --scrim-bottom: linear-gradient(180deg, rgba(5,5,6,0) 35%, rgba(5,5,6,.55) 62%, rgba(5,5,6,.94) 100%);

    /* Tipografía */
    --pl-font:        'Montserrat', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --pl-font-serif:  Georgia, 'Times New Roman', serif;
    --pl-font-mono:   ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Spacing / layout */
    --pl-gutter:        1rem;
    --pl-feed-gap:      .875rem;
    --pl-header-h:      56px;
    /* Alto de la barra de la app (theme.js lo pisa con el alto real medido). */
    --pl-appbar-h:      calc(env(safe-area-inset-top, 0px) + 110px);
    --pl-tap:           44px;
    --pl-container:        1280px;
    --pl-container-narrow: 760px;
    --pl-container-feed:   560px;
    --pl-container-article: 700px;
    --pl-radius-sm:   4px;
    --pl-radius:      6px;
    --pl-radius-lg:   14px;
    --pl-radius-pill: 999px;

    /* Efectos */
    --pl-shadow-sm:   0 1px 2px rgba(0,0,0,.4);
    --pl-shadow:      0 4px 16px rgba(0,0,0,.5);
    --pl-shadow-lg:   0 20px 50px rgba(0,0,0,.55);
    --pl-glow-brand:  0 8px 22px rgba(122,166,7,.35);
    --pl-trans:       150ms ease;
    --pl-ease-spring: cubic-bezier(.34,1.56,.64,1);
    --pl-ease-out:    cubic-bezier(.2,.7,.3,1);
    --pl-dots:        radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    --pl-dots-size:   18px 18px;
    --pl-blur-glass:  saturate(1.4) blur(14px);
}

@keyframes pl-cta-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); } 70% { box-shadow: 0 0 0 14px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
    margin: 0;
    font-family: var(--pl-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--pl-text);
    background: var(--pl-bg);
}
::selection { background: var(--pl-brand); color: #050506; }
a { color: var(--pl-brand-l); text-decoration: none; }
a:hover { color: var(--pl-brand-ll); }
img, svg, video { display: block; max-width: 100%; }
/* Neutraliza el CCSS viejo que LiteSpeed todavia inyecta inline (h2{text-transform:uppercase}). */
h1, h2, h3, h4 { text-transform: none; font-family: var(--pl-font); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- 3. Utilidades ---------- */
.pl-container { max-width: var(--pl-container); margin: 0 auto; padding: 0 var(--pl-gutter); }
.pl-container--narrow { max-width: var(--pl-container-narrow); }
.pl-container--article { max-width: var(--pl-container-article); }

.pl-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.pl-skip {
    position: absolute; top: -40px; left: 0; z-index: 9999;
    background: var(--pl-brand); color: var(--pl-black); padding: .5rem 1rem; font-weight: 800;
}
.pl-skip:focus { top: 0; }
.pl-main:focus { outline: none; }

.pl-link-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--pl-brand-l); }
.pl-link-arrow:hover { color: var(--pl-brand-ll); }

.pl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 20px; border-radius: var(--pl-radius-pill);
    font-family: var(--pl-font); font-size: 15px; font-weight: 800; letter-spacing: .02em; line-height: 1;
    border: 2px solid transparent; cursor: pointer; white-space: nowrap;
    transition: transform 220ms var(--pl-ease-spring), box-shadow 200ms ease, filter 150ms ease;
}
.pl-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.pl-btn:active { transform: scale(.96); }
.pl-btn--primary { background: var(--pl-brand); color: var(--pl-black); border-color: var(--pl-brand); }
.pl-btn--primary:hover { box-shadow: var(--pl-glow-brand); }
.pl-btn--inverse { background: var(--pl-white); color: var(--pl-black); border-color: var(--pl-white); }
.pl-btn--sm { min-height: 36px; padding: 0 14px; font-size: 13px; }

.pl-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--pl-font); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    line-height: 1; white-space: nowrap; border-radius: var(--pl-radius-pill);
    /* Sin backdrop-filter: con 3-4 badges por card y 12 cards por página era un
       costo de composición por badge. El fondo, más opaco, compensa el contraste. */
    background: rgba(5,5,6,.72); color: var(--cat-color, var(--pl-brand-l)); padding: 5px 9px;
}
.pl-badge--solid { background: var(--cat-color, var(--pl-brand)); color: var(--pl-black); }
.pl-badge--socios { background: var(--pl-white); color: var(--pl-black); padding: 4px 8px 4px 6px; }
.pl-badge--live { background: var(--pl-brand); color: var(--pl-black); padding: 5px 9px; }
.pl-badge--live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pl-black); animation: pl-cta-pulse 1.8s ease-out infinite; }
.pl-badge--cat-provinciales    { --cat-color: var(--pl-cat-provinciales); }
.pl-badge--cat-nacionales      { --cat-color: var(--pl-cat-nacionales); }
.pl-badge--cat-internacionales { --cat-color: var(--pl-cat-internacionales); }
.pl-badge--cat-emprender       { --cat-color: var(--pl-cat-emprender); }

/* ---------- 4. Barra de la app (template-parts/app-bar.php) ---------- */
/* LA barra, igual en todas las páginas: fija arriba, degradé oscuro que deja ver el
   reel debajo. Fila 1: marca + búsqueda verde. Fila 2: la nube de hashtags (el menú)
   de borde a borde, con el botón "▾ Todos". theme.js mide su alto real en
   --pl-appbar-h (lo usan el reel, la nota y las hojas). En las pantallas con scroll
   de página (nota, páginas, 404) toma fondo sólido al bajar y se esconde leyendo. */
.pl-appbar {
    --pl-appbar-pad: 12px;
    position: fixed; z-index: 65; top: 0; left: 0; right: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px;
    padding: calc(env(safe-area-inset-top, 0px) + 6px) var(--pl-appbar-pad) 4px;
    background: linear-gradient(180deg, rgba(10,10,11,.9) 0%, rgba(10,10,11,.68) 64%, rgba(10,10,11,0) 100%);
    transition: transform 300ms var(--pl-ease-out), background-color 200ms ease, box-shadow 200ms ease;
    view-transition-name: pl-appbar;
}
.admin-bar .pl-appbar { top: 32px; }
@media (max-width: 782px) { .admin-bar .pl-appbar { top: 46px; } }
.pl-appbar.is-scrolled {
    background: rgba(10,10,11,.94); box-shadow: 0 1px 0 var(--pl-border), 0 10px 26px rgba(0,0,0,.35);
    -webkit-backdrop-filter: saturate(1.3) blur(10px); backdrop-filter: saturate(1.3) blur(10px);
}
.pl-appbar.is-hidden { transform: translateY(-100%); }
/* Con la nota abierta en el modal (dentro del reel), la barra queda debajo. */
html.pl-note-open .pl-appbar { z-index: 55; }
.pl-appbar a { color: inherit; }
.pl-appbar :focus-visible { outline: 2px solid var(--pl-brand-l); outline-offset: 2px; }

.pl-appbar__brand { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 44px; color: var(--pl-text); line-height: 0; }
.pl-appbar__brand:hover { color: var(--pl-text); }
.pl-appbar__logo { width: auto; height: 28px; max-width: 110px; object-fit: contain; }
.pl-appbar__wordmark { font-weight: 900; font-size: 15px; line-height: 1; letter-spacing: -.04em; text-transform: uppercase; white-space: nowrap; }
.pl-appbar__wordmark b { color: var(--pl-brand); font-weight: 900; }
.pl-appbar__wordmark--short { display: none; font-size: 18px; }

/* Skip links (portada) a los rieles: ocultos hasta recibir foco. */
.pl-appbar__skip {
    position: absolute; z-index: 5; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 12px;
    width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pl-appbar__skip:focus {
    width: auto; height: auto; margin: 0; padding: 12px 16px; overflow: visible; clip: auto; clip-path: none;
    border-radius: var(--pl-radius-pill); background: var(--pl-brand); color: var(--pl-black) !important;
    font-size: 14px; font-weight: 800; line-height: 1.2; box-shadow: 0 8px 24px rgba(0,0,0,.5);
}

/* Búsqueda. Sin JS: campo visible (form real a /?s=). Con JS (html.pl-js, lo pone header.php antes de pintar):
   lupa redonda que al tocarla se estira en verde (ancho con resorte), foco + brillo
   verde, botón de enviar verde; ✕ la pliega. */
.pl-appbar__search {
    position: relative; margin-left: auto; flex-shrink: 0;
    display: flex; align-items: center; gap: 2px; height: 40px;
    width: min(250px, calc(100% - 130px));
    border-radius: var(--pl-radius-pill); border: 1.5px solid color-mix(in srgb, var(--pl-brand) 60%, transparent);
    background: rgba(10,10,11,.8);
}
.pl-appbar__search-toggle { display: none; }
.pl-appbar__search-input {
    flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0 4px 0 14px;
    border: 0; border-radius: var(--pl-radius-pill); background: transparent; color: var(--pl-white);
    font-size: 16px; font-weight: 600; outline: none; -webkit-appearance: none; appearance: none;
}
.pl-appbar__search-input::placeholder { color: rgba(255,255,255,.5); font-weight: 500; }
.pl-appbar__search-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.pl-appbar__search-x {
    display: none; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    align-items: center; justify-content: center; color: var(--pl-muted);
    transition: color 150ms ease, background-color 150ms ease;
}
.pl-appbar__search-x:hover { color: var(--pl-white); background: rgba(255,255,255,.08); }
.pl-appbar__search-go {
    flex-shrink: 0; width: 32px; height: 32px; margin-right: 3px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pl-brand); color: var(--pl-black);
    box-shadow: 0 0 14px rgba(122,166,7,.45);
    transition: scale 260ms var(--pl-ease-spring), background-color 150ms ease;
}
.pl-appbar__search-go:hover { background: var(--pl-brand-l); }
.pl-appbar__search-go:active,
.pl-appbar__search-x:active { scale: .9; }
.pl-appbar__search:focus-within { border-color: var(--pl-brand-l); box-shadow: 0 0 0 4px rgba(122,166,7,.24), 0 0 30px rgba(122,166,7,.42); }
.pl-appbar__search :focus-visible { outline: none; }
.pl-appbar__search-go:focus-visible,
.pl-appbar__search-x:focus-visible,
.pl-appbar__search-toggle:focus-visible { box-shadow: 0 0 0 2px var(--pl-bg), 0 0 0 4px var(--pl-brand-l); }

.pl-js .pl-appbar__search {
    width: 40px; border-color: transparent; background: rgba(255,255,255,.08);
    transition: width 440ms cubic-bezier(.3,1.3,.5,1), background-color 200ms ease, border-color 200ms ease, box-shadow 300ms ease;
}
.pl-js .pl-appbar__search-toggle {
    position: absolute; inset: -1.5px; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; color: var(--pl-text);
    transition: opacity 150ms ease, scale 260ms var(--pl-ease-spring);
}
.pl-js .pl-appbar__search-toggle:hover { background: rgba(255,255,255,.08); }
.pl-js .pl-appbar__search-toggle:active { scale: .92; }
.pl-js .pl-appbar__search:not(.is-open) > :not(.pl-appbar__search-toggle) { visibility: hidden; opacity: 0; pointer-events: none; }
.pl-js .pl-appbar__search > :not(.pl-appbar__search-toggle) { transition: opacity 220ms ease 140ms; }
.pl-js .pl-appbar__search.is-open {
    width: min(440px, calc(100% - 72px));
    border-color: var(--pl-brand); background: rgba(10,10,11,.94);
    box-shadow: 0 0 0 4px rgba(122,166,7,.2), 0 0 26px rgba(122,166,7,.38);
}
.pl-js .pl-appbar__search.is-open:focus-within { border-color: var(--pl-brand-l); box-shadow: 0 0 0 4px rgba(122,166,7,.28), 0 0 34px rgba(122,166,7,.5); }
.pl-js .pl-appbar__search.is-open .pl-appbar__search-toggle { visibility: hidden; opacity: 0; pointer-events: none; }
.pl-js .pl-appbar__search.is-open .pl-appbar__search-x { display: inline-flex; }
@keyframes pl-search-shake { 0%, 100% { translate: 0 0; } 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }
.pl-appbar__search.is-shake { animation: pl-search-shake 420ms ease both; }
/* Con la búsqueda abierta la marca se achica a "PL" para dejarle lugar. */
.pl-appbar.is-searching .pl-appbar__wordmark--full { display: none; }
.pl-appbar.is-searching .pl-appbar__wordmark--short { display: inline; }
.pl-appbar.is-searching .pl-appbar__logo { max-width: 44px; }

/* Nube de hashtags en la barra: segunda fila, de borde a borde (el scroll llega al
   canto de la pantalla). Sobre fotos los chips van más opacos para que se lean. */
/* flex-basis = 100% + los dos márgenes negativos: el tamaño exterior es SIEMPRE una fila entera.
   Con 100% a secas, en pantallas anchas (padding grande) la nube entraba en la fila del logo y,
   al abrir la búsqueda, saltaba a la segunda fila y movía toda la barra (v6.3.3). */
.pl-appbar > .pl-hashcloud { flex: 1 0 calc(100% + var(--pl-appbar-pad) * 2); order: 10; min-width: 0; margin: 0 calc(var(--pl-appbar-pad) * -1); }
.pl-appbar .pl-hashcloud__list { --pl-hash-fade: var(--pl-appbar-pad); gap: 6px; }
.pl-appbar .pl-hash {
    background:
        radial-gradient(120% 90% at 28% 0%, color-mix(in srgb, var(--c) 26%, transparent), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
        rgba(14,14,16,.8);
    color: var(--pl-white);
}
.pl-appbar .pl-hash[aria-current] { background: var(--c); color: var(--pl-black); }
.pl-appbar a.pl-hash:hover { color: var(--pl-white); }
.pl-appbar a.pl-hash[aria-current]:hover { color: var(--pl-black); }
.pl-appbar .pl-hash--util { background: rgba(10,10,11,.66); color: var(--pl-text-2); }
.pl-appbar a.pl-hash--util:hover { color: var(--pl-white); }

@media (max-width: 429px) {
    .pl-appbar__wordmark--full { display: none; }
    .pl-appbar__wordmark--short { display: inline; }
    .pl-appbar__logo { height: 24px; max-width: 64px; }
}
@media (max-width: 379px) {
    .pl-appbar { --pl-appbar-pad: 10px; gap: 0 6px; }
    .pl-appbar .pl-hash { padding: 0 11px 0 9px; font-size: 12.5px; }
}
@media (min-width: 900px) {
    /* Contenido alineado a una columna de 1240px; la nube sigue scrolleando de canto a canto. */
    .pl-appbar { --pl-appbar-pad: max(20px, calc((100vw - 1240px) / 2)); }
    .pl-appbar__wordmark--full { display: inline; }
    .pl-appbar__wordmark--short { display: none; }
    .pl-appbar.is-searching .pl-appbar__wordmark--full { display: inline; }
    .pl-appbar.is-searching .pl-appbar__wordmark--short { display: none; }
}

/* ---------- 4b. Nube de hashtags (= el menú del sitio) ---------- */
/* Fila de chips "nube": links reales que scrollean en horizontal (snap). Primero los
   temas; al final, separados, los chips de servicio (.pl-hash--util: socio,
   transparencia, legales), con estilo outline apagado. Al final de la fila, el
   botón "▾ Todos" abre el panel con TODOS los chips (theme.js).
   Scroll: táctil nativo (touch-action: pan-x: el gesto de costado es de la fila),
   rueda y arrastre con el mouse (theme.js). Los fundidos de los bordes aparecen
   solo del lado donde hay más chips (.can-left / .can-right).
   Movimiento: flotado suave por chip con `translate` y rebote de tap con `scale`
   (propiedades de transform independientes: no se pisan entre sí). */
@keyframes pl-hash-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
@keyframes pl-hash-flame { 0%, 100% { scale: 1; } 50% { scale: 1.35; } }

.pl-hashcloud { --pl-hash-fade: 14px; position: relative; display: flex; align-items: center; gap: 4px; min-width: 0; }
.pl-hashcloud__list {
    flex: 1; min-width: 0; list-style: none; margin: 0;
    display: flex; align-items: center; gap: 7px;
    /* El padding vertical deja lugar al flotado, al área de tap y al outline de foco. */
    padding: 6px var(--pl-hash-fade);
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    touch-action: pan-x; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scroll-padding-inline: var(--pl-hash-fade);
    scrollbar-width: none;
    /* Sin JS: fundido fijo chiquito en los dos bordes. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--pl-hash-fade), #000 calc(100% - var(--pl-hash-fade)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--pl-hash-fade), #000 calc(100% - var(--pl-hash-fade)), transparent 100%);
}
.pl-hashcloud__list::-webkit-scrollbar { display: none; }
.pl-hashcloud__list > li { flex: 0 0 auto; scroll-snap-align: start; }
/* Con JS: fundido solo donde hay más (derecha al cargar; izquierda cuando se scrolleó). */
.pl-js .pl-hashcloud__list { -webkit-mask-image: none; mask-image: none; }
.pl-js .pl-hashcloud.can-right .pl-hashcloud__list {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent 100%);
}
.pl-js .pl-hashcloud.can-left .pl-hashcloud__list {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px);
            mask-image: linear-gradient(90deg, transparent 0, #000 40px);
}
.pl-js .pl-hashcloud.can-left.can-right .pl-hashcloud__list {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 48px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 48px), transparent 100%);
}
@media (hover: hover) and (pointer: fine) {
    .pl-hashcloud.is-overflow .pl-hashcloud__list { cursor: grab; }
}
.pl-hashcloud.is-dragging .pl-hashcloud__list { cursor: grabbing; scroll-snap-type: none; -webkit-user-select: none; user-select: none; }
.pl-hashcloud.is-dragging .pl-hash { pointer-events: none; }

.pl-hash {
    --c: var(--pl-accent);
    position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px 0 11px;
    border-radius: var(--pl-radius-pill); border: 1px solid color-mix(in srgb, var(--c) 32%, rgba(255,255,255,.08));
    background:
        radial-gradient(120% 90% at 28% 0%, color-mix(in srgb, var(--c) 24%, transparent), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
        var(--pl-bg-2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 14px color-mix(in srgb, var(--c) 16%, transparent), 0 2px 10px rgba(0,0,0,.25);
    color: var(--pl-text); font-family: var(--pl-font); font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: -.01em; white-space: nowrap;
    transition: scale 260ms var(--pl-ease-spring), background-color 150ms ease, border-color 150ms ease, color 150ms ease;
    -webkit-user-drag: none;
}
/* Área de tap de ~44px sin agrandar el chip. */
.pl-hash::before { content: ""; position: absolute; inset: -4px -3px; }
.pl-hash:hover { color: var(--pl-white); border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.pl-hash:active { scale: .96; }
.pl-hash:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.pl-hash__mark { margin-right: 1px; color: var(--c); font-weight: 900; }
.pl-hash__hot {
    width: 6px; height: 6px; margin-left: 7px; flex-shrink: 0; border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #ffd27a, var(--pl-cat-emprender) 70%);
    box-shadow: 0 0 6px 1px rgba(255,122,61,.75);
}
.pl-hash.is-hot { border-color: color-mix(in srgb, var(--pl-cat-emprender) 45%, rgba(255,255,255,.08)); }
/* Teléfonos: chips de 40px (objetivo táctil). */
@media (pointer: coarse), (max-width: 899px) {
    .pl-hash { min-height: 40px; }
}

/* Activo: archivo actual / filtro actual del reel. */
.pl-hash[aria-current] {
    background: var(--c); border-color: var(--c); color: var(--pl-black);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent), 0 6px 18px color-mix(in srgb, var(--c) 30%, transparent);
}
.pl-hash[aria-current] .pl-hash__mark { color: rgba(5,5,6,.6); }
.pl-hash[aria-current]:hover { color: var(--pl-black); }
/* Persona filtrando el reel mientras llega el REST. */
.pl-hash.is-loading { opacity: .6; }

/* Chips de servicio: outline, sin brillo ni flotado, texto apagado. El primero
   lleva un separador (punto) que los aparta de los temas. #HaceteSocio con el
   "#" en verde de marca (abre el modal de socios). */
.pl-hashcloud__util.is-first { position: relative; margin-left: 9px; }
.pl-hashcloud__util.is-first::before {
    content: ""; position: absolute; left: -10px; top: 50%; width: 4px; height: 4px; margin-top: -2px;
    border-radius: 50%; background: var(--pl-border-2);
}
.pl-hash--util {
    --c: var(--pl-muted);
    background: transparent; border: 1px solid rgba(255,255,255,.2); box-shadow: none;
    color: var(--pl-text-2); font-weight: 600;
}
.pl-hash--util:hover { color: var(--pl-text); border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.04); }
.pl-hash--util .pl-hash__mark { color: var(--pl-muted); font-weight: 700; }
.pl-hash--util[data-pl-util="socios"] { --c: var(--pl-brand-l); border-color: color-mix(in srgb, var(--pl-brand) 55%, transparent); }
.pl-hash--util[data-pl-util="socios"] .pl-hash__mark { color: var(--pl-brand-l); }

/* Flotado idle escalonado (--f duración, --fd desfase: ver hashtag-cloud.php). */
.pl-hashcloud__list .pl-hash:not(.pl-hash--util) { animation: pl-hash-float var(--f, 5s) ease-in-out var(--fd, 0s) infinite; }
.pl-hash__hot { animation: pl-hash-flame 1.6s ease-in-out infinite; }

/* "▾ Todos": al final de la fila, siempre a la vista (solo con JS y si la fila no entra). */
.pl-hashcloud__all {
    position: relative; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
    height: 36px; margin-right: var(--pl-hash-fade); padding: 0 11px 0 13px;
    border-radius: var(--pl-radius-pill); background: var(--pl-text); color: var(--pl-black);
    font-size: 12.5px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,0,0,.4);
    transition: scale 260ms var(--pl-ease-spring), background-color 150ms ease;
}
.pl-hashcloud__all[hidden] { display: none; }
.pl-hashcloud__all::before { content: ""; position: absolute; inset: -6px -4px; }
.pl-hashcloud__all:hover { background: var(--pl-white); }
.pl-hashcloud__all:active { scale: .95; }
.pl-hashcloud__all:focus-visible { outline: 2px solid var(--pl-brand-l); outline-offset: 2px; }
.pl-hashcloud__all svg { transition: rotate 260ms var(--pl-ease-out); }
.pl-hashcloud__all[aria-expanded="true"] svg { rotate: 180deg; }
.pl-hashcloud.is-ranking .pl-hashcloud__all { display: none; }
@media (pointer: coarse), (max-width: 899px) {
    .pl-hashcloud__all { height: 40px; }
}

/* Panel "▾ Todos" (theme.js): baja debajo de la barra con todos los chips en grilla. */
@keyframes pl-hashpanel-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.pl-hashpanel__backdrop {
    position: fixed; z-index: 940; left: 0; right: 0; bottom: 0; top: var(--pl-hashpanel-top, 0px);
    background: rgba(5,5,6,.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity 220ms ease;
}
.pl-hashpanel__backdrop.is-open { opacity: 1; }
.pl-hashpanel {
    position: fixed; z-index: 945; left: 0; right: 0; top: var(--pl-hashpanel-top, 0px);
    width: min(760px, 100%); max-height: calc(100vh - var(--pl-hashpanel-top, 0px) - 16px); max-height: calc(100dvh - var(--pl-hashpanel-top, 0px) - 16px);
    margin: 0 auto; padding: 12px 14px 18px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--pl-bg-soft); border: 1px solid var(--pl-border-2); border-top: 0; border-radius: 0 0 22px 22px;
    box-shadow: 0 24px 60px rgba(0,0,0,.6); color: var(--pl-text); outline: none;
    opacity: 0; transform: translateY(-14px); transition: opacity 180ms ease, transform 180ms ease;
}
.pl-hashpanel.is-open { opacity: 1; transform: none; animation: pl-hashpanel-in 340ms var(--pl-ease-spring) both; }
.pl-hashpanel[hidden], .pl-hashpanel__backdrop[hidden] { display: none; }
.pl-hashpanel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pl-hashpanel__title { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pl-muted); }
.pl-hashpanel__x {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.08); color: var(--pl-text);
    transition: background-color 150ms ease, scale 260ms var(--pl-ease-spring);
}
.pl-hashpanel__x:hover { background: rgba(255,255,255,.15); }
.pl-hashpanel__x:active { scale: .92; }
.pl-hashpanel :focus-visible { outline: 2px solid var(--pl-brand-l); outline-offset: 2px; }
.pl-hashpanel__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pl-hashpanel .pl-hash { min-height: 40px; animation: none; }
.pl-hashpanel .pl-hashcloud__util.is-first { margin-left: 0; }
.pl-hashpanel .pl-hashcloud__util.is-first::before { display: none; }

@media (prefers-reduced-motion: reduce) {
    .pl-hash, .pl-hash__hot { animation: none !important; }
    .pl-hashpanel, .pl-hashpanel.is-open { animation: none !important; transform: none !important; }
    .pl-appbar { transition: none; }
}

/* ---------- 4c. Toast de la app (theme.js: plApp.toast) ---------- */
.pl-toast {
    position: fixed; z-index: 990; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); margin: 0 auto;
    width: max-content; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: var(--pl-radius-pill);
    background: var(--pl-text); color: var(--pl-black); font-size: 13px; font-weight: 800; line-height: 1.3; text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,.45); pointer-events: none;
    opacity: 0; transform: translateY(12px);
    transition: opacity 220ms ease, transform 320ms var(--pl-ease-spring);
}
.pl-toast.is-visible { opacity: 1; transform: none; }
/* En el reel sube para no tapar "Leer la nota" ni la columna de acciones. */
html.pl-reel-lock .pl-toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); }

/* ---------- 8. CTA WhatsApp ---------- */
.pl-cta-wa2 {
    position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
    justify-content: space-between; gap: 20px; aspect-ratio: 4/5; padding: 24px 20px 20px;
    border-radius: var(--pl-radius-lg); color: var(--pl-black);
    background: radial-gradient(circle at top right, color-mix(in srgb, var(--pl-brand) 70%, white) 0%, var(--pl-brand) 45%, var(--pl-brand-d) 100%);
    box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform 200ms ease, box-shadow 250ms ease;
}
.pl-cta-wa2:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,.35); color: var(--pl-black); }
.pl-cta-wa2__dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(0,0,0,.12) 1px, transparent 1px); background-size: 18px 18px; z-index: -1; }
.pl-cta-wa2__shine {
    position: absolute; top: 0; bottom: 0; left: -120%; width: 60%; z-index: -1;
    background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 45%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.18) 55%, rgba(255,255,255,0) 100%);
    transform: skewX(-18deg); transition: left 700ms var(--pl-ease-out);
}
.pl-cta-wa2:hover .pl-cta-wa2__shine { left: 130%; }
.pl-cta-wa2__top { display: flex; flex-direction: column; gap: 12px; }
.pl-cta-wa2__kicker { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: var(--pl-black); color: var(--pl-brand-l); }
.pl-cta-wa2__title { font-size: 40px; font-weight: 900; line-height: .92; letter-spacing: -.045em; text-wrap: balance; }
.pl-cta-wa2__sub { font-size: 15px; font-weight: 600; line-height: 1.35; max-width: 320px; }
.pl-cta-wa2__bottom { display: flex; align-items: center; gap: 12px; padding: 8px; padding-right: 18px; background: var(--pl-black); color: #fff; border-radius: var(--pl-radius-pill); }
.pl-cta-wa2__bubble {
    width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; background: var(--pl-wa); color: #062a12;
    display: inline-flex; align-items: center; justify-content: center; animation: pl-cta-pulse 2.4s ease-out infinite;
}
.pl-cta-wa2__bubble svg { width: 28px; height: 28px; }
.pl-cta-wa2__contact { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.pl-cta-wa2__label { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pl-brand-l); }
.pl-cta-wa2__phone { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Ads legacy slots (inc/ads.php custom/html/imagen) restyleados al fondo oscuro */
.pl-ad { margin: 4px 0; }
.pl-ad__label { display: block; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pl-muted); margin-bottom: 6px; }
.pl-ad--is-cta .pl-ad__label { display: none; }

/* ---------- 9. Most Read ---------- */
.pl-most-read { padding: 20px 18px 8px; border-radius: var(--pl-radius-lg); background: var(--pl-bg-2); border: 1px solid var(--pl-border); }
.pl-most-read__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.pl-most-read__title { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.pl-most-read__period { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pl-brand-l); }
.pl-most-read__list { list-style: none; margin: 0; padding: 0; }
.pl-most-read__link { display: flex; gap: 14px; align-items: center; width: 100%; padding: 14px 0; text-align: left; }
.pl-most-read__item + .pl-most-read__item .pl-most-read__link { border-top: 1px solid var(--pl-border); }
.pl-most-read__rank { width: 44px; flex-shrink: 0; font-size: 46px; font-weight: 900; letter-spacing: -.06em; line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--pl-brand-l); font-variant-numeric: tabular-nums; }
.pl-most-read__rank.is-first { color: var(--pl-brand); -webkit-text-stroke: 0; }
.pl-most-read__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pl-most-read__cat { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cat-color, var(--pl-brand-l)); }
.pl-most-read__title-text { font-size: 16px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--pl-text); }

/* ---------- 10. La nota: el componente (template-parts/note-screen.php) ---------- */
/* UNA sola hoja de estilos para la nota en el modal del reel (.pl-nota--modal) y en
   su página (.pl-nota--page): mismas clases, misma apariencia. Solo cambia el
   contenedor (panel del modal / página bajo la barra de la app).
   Estructura: barra chica pegajosa (✕, título al scrollear, compartir) · hero a
   sangre que se funde en negro · hoja con meta, titular, firma, bajada, personas y
   acciones · cuerpo · temas · compartir · conversación · "Seguí leyendo". */
.pl-nota { position: relative; width: 100%; max-width: 760px; margin: 0 auto; color: var(--pl-text); }

/* Barra chica: se pega arriba (en la página, debajo de la barra de la app mientras
   se ve; cuando la barra se esconde, sube). El título aparece al pasar el titular. */
.pl-nota__bar {
    position: sticky; top: 0; z-index: 6;
    display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 12px;
    border-bottom: 1px solid transparent;
    transition: background-color 200ms ease, border-color 200ms ease, top 300ms var(--pl-ease-out);
}
.pl-nota--page .pl-nota__bar { top: var(--pl-appbar-h); }
html.pl-appbar-hidden .pl-nota--page .pl-nota__bar { top: 0; }
.admin-bar .pl-nota--page .pl-nota__bar { top: calc(var(--pl-appbar-h) + 32px); }
.pl-nota.is-scrolled .pl-nota__bar {
    background: rgba(17,17,20,.94); border-bottom-color: var(--pl-border);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pl-nota__icon {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(10,10,11,.58); border: 1px solid rgba(255,255,255,.14); color: var(--pl-text);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: background-color 150ms ease, scale 260ms var(--pl-ease-spring);
}
.pl-nota__icon:hover { background: rgba(40,40,44,.8); color: var(--pl-white); }
.pl-nota__icon:active { scale: .92; }
.pl-nota__icon:focus-visible { outline: 2px solid var(--pl-brand-l); outline-offset: 2px; }
.pl-nota__bar-title {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 14px; font-weight: 800; letter-spacing: -.01em; color: var(--pl-text);
    opacity: 0; translate: 0 4px; transition: opacity 200ms ease, translate 260ms var(--pl-ease-out);
}
.pl-nota.is-scrolled .pl-nota__bar-title { opacity: 1; translate: 0 0; }

/* Hero a sangre que se funde en el negro (queda debajo de la barra chica). */
.pl-nota__hero {
    position: relative; margin: -60px 0 0; overflow: hidden; background: var(--pl-bg);
    aspect-ratio: 4 / 5; max-height: 74vh;
    -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
}
.pl-nota__hero picture { display: contents; }
.pl-nota__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pl-nota__img.is-placeholder { position: absolute; inset: 0; }
@keyframes pl-nota-img-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
.pl-reel--anim .pl-nota__img.is-enter { animation: pl-nota-img-in 560ms var(--pl-ease-out) both; }
@media (min-width: 700px) {
    .pl-nota__hero { aspect-ratio: 16 / 9; max-height: none; }
}

/* Hoja: sube sobre el final del hero (que ya se fundió). */
.pl-nota__sheet { position: relative; z-index: 1; padding: 0 20px; }
.pl-nota__hero + .pl-nota__sheet { margin-top: -84px; }
@media (min-width: 700px) { .pl-nota__sheet { padding: 0 32px; } }

.pl-nota__head .pl-breadcrumbs { margin-bottom: 12px; }
.pl-nota__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--pl-muted); }
.pl-nota__cat, .pl-nota__socios {
    display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 9px; border-radius: var(--pl-radius-pill);
    font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
}
.pl-nota__cat { background: var(--pl-nota-cat, var(--pl-brand)); color: var(--pl-black) !important; }
.pl-nota__cat:hover { filter: brightness(1.08); }
.pl-nota__socios { padding-left: 7px; background: var(--pl-white); color: var(--pl-black); }
.pl-nota__date { font-variant-numeric: tabular-nums; }

.pl-nota__title {
    margin: 12px 0 0; font-weight: 900; font-size: clamp(30px, 8.2vw, 46px); line-height: 1; letter-spacing: -.04em;
    color: var(--pl-white); text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.pl-nota__title.is-long  { font-size: clamp(26px, 6.8vw, 38px); line-height: 1.03; }
.pl-nota__title.is-xlong { font-size: clamp(22px, 5.8vw, 32px); line-height: 1.07; letter-spacing: -.03em; }
.pl-nota__author { margin: 12px 0 0; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--pl-muted); }
.pl-nota__author a, .pl-nota__author span { font-weight: 800; color: var(--pl-text); }
.pl-nota__author a:hover { color: var(--pl-brand-l); }
.pl-nota__lead { margin: 14px 0 0; font-size: 18px; font-weight: 600; line-height: 1.42; color: var(--pl-text); }
.pl-nota__who { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }

/* Acciones: me gusta, comentarios, compartir (reels.js; contadores del REST). */
.pl-nota__acts {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding-bottom: 18px;
    border-bottom: 1px solid var(--pl-border);
}
.pl-nota__act {
    display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 15px 0 11px;
    border-radius: var(--pl-radius-pill); border: 1px solid var(--pl-border-2); background: var(--pl-bg-2);
    color: var(--pl-text) !important; font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums;
    transition: background-color 150ms ease, border-color 150ms ease, scale 260ms var(--pl-ease-spring);
}
.pl-nota__act:hover { background: var(--pl-bg-3); }
.pl-nota__act:active { scale: .95; }
.pl-nota__act:focus-visible { outline: 2px solid var(--pl-brand-l); outline-offset: 2px; }
.pl-nota__act-ico { display: inline-flex; }
.pl-nota__act svg { width: 21px; height: 21px; overflow: visible; }
.pl-nota__act svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; transition: fill 160ms ease, stroke 160ms ease; }
.pl-nota__act--share svg path { fill: none; }
.pl-nota__act-n:empty::before { content: "·"; color: var(--pl-muted); }
.pl-nota__act--like.is-liked { border-color: rgba(255,59,92,.55); background: rgba(255,59,92,.1); }
.pl-nota__act--like.is-liked svg path { fill: #ff3b5c; stroke: #ff3b5c; }
@keyframes pl-nota-pop { 0% { scale: 1; } 30% { scale: 1.32; } 55% { scale: .9; } 100% { scale: 1; } }
.pl-nota__act--like.is-pop svg { animation: pl-nota-pop 520ms var(--pl-ease-spring); }
/* Sin JS: "me gusta" y compartir no hacen nada; queda el link a los comentarios. */
html:not(.pl-js) .pl-nota__act--like,
html:not(.pl-js) .pl-nota__act--share,
html:not(.pl-js) .pl-nota__bar [data-pl-note-share] { display: none; }

/* Cuerpo: la misma Montserrat del resto del sitio (ya cargada, no suma peso), en 400 y con
   interlineado amplio para lectura larga. Antes era Georgia y desentonaba con títulos y UI. */
.pl-nota__body { margin-top: 22px; overflow-wrap: break-word; }
.pl-nota__body p, .pl-nota__body li { font-family: var(--pl-font); font-size: 1.0625rem; font-weight: 400; line-height: 1.75; letter-spacing: -.005em; color: var(--pl-text-2); }
.pl-nota__body p { margin: 0 0 18px; }
/* Copete (bajada que venía en un <h3>, ver pl_copete_convert en inc/enrich.php): tono de lead. */
.pl-nota__body p.pl-copete { font-size: 18px; font-weight: 600; line-height: 1.42; color: var(--pl-text); margin-bottom: 22px; } /* = .pl-nota__lead */
.pl-nota__body h2, .pl-nota__body h3 { font-family: var(--pl-font); font-weight: 900; letter-spacing: -.02em; color: var(--pl-text); margin: 32px 0 12px; scroll-margin-top: 80px; }
.pl-nota__body a { color: var(--pl-brand-l); text-decoration: underline; text-underline-offset: 2px; }
.pl-nota__body a:hover { color: var(--pl-brand-ll); }
.pl-nota__body img, .pl-nota__body video, .pl-nota__body iframe, .pl-nota__body embed { max-width: 100%; height: auto; }
.pl-nota__body img { border-radius: var(--pl-radius-lg); margin: 20px 0; }
.pl-nota__body iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.pl-nota__body figure { max-width: 100%; margin: 20px 0; }
.pl-nota__body figure img { margin: 0; }
.pl-nota__body figcaption { margin-top: 6px; font-size: 12.5px; color: var(--pl-muted); }
.pl-nota__body blockquote { margin: 20px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--pl-brand); font-style: normal; font-weight: 600; color: var(--pl-text); } /* Montserrat itálica no se carga: sin cursiva falsa */
.pl-nota__body .pl-paywall { margin: 24px 0 8px; }
.pl-nota__body .pl-paywall a { color: inherit; text-decoration: none; }
.pl-nota__body .pl-paywall__btn--primary { color: var(--pl-black) !important; }
.pl-anchor { opacity: 0; margin-left: 6px; font-weight: 400; color: var(--pl-muted); text-decoration: none !important; }
.pl-anchor::before { content: "#"; }
.pl-nota__body h2:hover .pl-anchor, .pl-nota__body h3:hover .pl-anchor { opacity: 1; }

/* Esqueleto del cuerpo (vista previa del modal) y avisos. */
@keyframes pl-nota-sk { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.pl-nota__sk { display: flex; flex-direction: column; gap: 12px; padding: 6px 0 12px; }
.pl-nota__sk span { position: relative; display: block; height: 14px; border-radius: 7px; overflow: hidden; background: var(--pl-bg-3); }
.pl-nota__sk span.is-short { width: 58%; }
.pl-nota__sk span::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
    animation: pl-nota-sk 1.2s ease-in-out infinite;
}
.pl-nota__notice {
    display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 8px 0; padding: 22px 18px;
    border-radius: var(--pl-radius-lg); border: 1px solid var(--pl-border); background: var(--pl-bg-2); text-align: center;
}
.pl-nota__notice p { margin: 0; font-family: var(--pl-font); font-weight: 700; color: var(--pl-text-2); }
.pl-nota__notice .pl-btn { color: var(--pl-black) !important; text-decoration: none; }

/* Temas relacionados: los mismos chips "hashtag" de la barra. */
/* "Quién es quién" (v6.4.5): personas de la nota con perfil completo -> su página. */
.pl-nota__quien { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--pl-border); }
.pl-nota__quien + .pl-nota__tags { margin-top: 18px; padding-top: 0; border-top: 0; }
.pl-nota__quien-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.pl-nota__quien-link {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 14px;
    background: var(--pl-bg-2); border: 1px solid var(--pl-border); color: var(--pl-text);
    transition: border-color 150ms ease, background-color 150ms ease;
}
.pl-nota__quien-link:hover { border-color: var(--pl-brand); color: var(--pl-text); }
.pl-nota__quien-av {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
    background: var(--pl-bg-3, rgba(255,255,255,.08)); font-size: 13px; font-weight: 900; color: var(--pl-brand-l);
}
.pl-nota__quien-av img { width: 100%; height: 100%; object-fit: cover; }
.pl-nota__quien-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pl-nota__quien-name { font-size: 14px; font-weight: 800; line-height: 1.2; }
.pl-nota__quien-cargo { font-size: 12px; font-weight: 600; color: var(--pl-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-nota__tags { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--pl-border); }
.pl-nota__tags-label { margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pl-muted); }
.pl-nota__tags-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

/* Compartir en redes (links reales: funcionan sin JS). */
.pl-share-bar { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--pl-border); }
.pl-share-bar__row { display: flex; justify-content: flex-start; gap: 10px; flex-wrap: wrap; }
.pl-share-bar__btn { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--pl-bg-2); color: var(--pl-text); border: 1px solid var(--pl-border); }
.pl-share-bar__btn svg { width: 18px; height: 18px; }
.pl-share-bar__btn:hover { border-color: var(--pl-brand); color: var(--pl-brand-l); }
html:not(.pl-can-share) [data-pl-share-native] { display: none; }

/* Conversación (la arma reels.js; estilos de los comentarios en reels.css). */
.pl-nota__comments { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--pl-border); scroll-margin-top: 72px; }
.pl-nota--page .pl-nota__comments { scroll-margin-top: calc(var(--pl-appbar-h) + 72px); }
.pl-nota__comments[hidden] { display: none; }
.pl-nota__comments .pl-note__com-title { margin: 0; font-size: 20px; font-weight: 900; letter-spacing: -.02em; color: var(--pl-white); }
.pl-nota__comments .pl-note__com-note { margin: 12px 0 0; color: var(--pl-muted); font-weight: 600; }

/* "Seguí leyendo": tira horizontal de cards estilo reel. */
.pl-nota__more { margin: 34px 0 0; padding-bottom: 12px; }
.pl-nota__more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 0 20px; }
.pl-nota__more-title { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -.035em; color: var(--pl-white); }
.pl-nota__more-row {
    list-style: none; margin: 0; padding: 0 20px 6px; display: flex; gap: 10px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pl-nota__more-row::-webkit-scrollbar { display: none; }
.pl-nota__more-row > li { flex: 0 0 min(44vw, 190px); scroll-snap-align: start; }
@media (min-width: 700px) {
    .pl-nota__more-head { padding: 0 32px; }
    .pl-nota__more-row { padding: 0 32px 6px; scroll-padding-inline: 32px; }
}

/* Card chica estilo reel (template-parts/reel-tile.php). */
.pl-tile__link {
    position: relative; display: block; aspect-ratio: 9 / 15; overflow: hidden; isolation: isolate;
    border-radius: 16px; background: var(--pl-bg-soft); border: 1px solid var(--pl-border); color: var(--pl-white);
    transition: scale 260ms var(--pl-ease-spring), border-color 150ms ease;
}
.pl-tile__link:hover { color: var(--pl-white); border-color: var(--pl-border-2); }
.pl-tile__link:active { scale: .97; }
.pl-tile__link:focus-visible { outline: 2px solid var(--pl-brand-l); outline-offset: 2px; }
.pl-tile__media { position: absolute; inset: 0; z-index: -1; }
.pl-tile__img {
    width: 100%; height: 100%; object-fit: cover;
    -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 92%);
            mask-image: linear-gradient(180deg, #000 40%, transparent 92%);
}
.pl-tile__fallback {
    position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 30%;
    background: radial-gradient(120% 80% at 20% 10%, rgba(122,166,7,.22), transparent 60%);
    font-family: var(--pl-font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.4);
}
.pl-tile__body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.pl-tile__cat {
    align-self: flex-start; display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; border-radius: var(--pl-radius-pill);
    background: var(--pl-reel-cat, var(--pl-brand)); color: var(--pl-black);
    font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
}
.pl-tile__title {
    margin: 0; font-size: 15px; font-weight: 900; line-height: 1.1; letter-spacing: -.02em; color: var(--pl-white);
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.pl-tile__date { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.62); font-variant-numeric: tabular-nums; }

/* La página de la nota: arranca debajo de la barra de la app. */
.pl-main--screen { padding-top: var(--pl-appbar-h); }
.admin-bar .pl-main--screen { padding-top: calc(var(--pl-appbar-h) + 32px); }
.pl-nota--page { padding-bottom: 12px; }

@media (prefers-reduced-motion: reduce) {
    .pl-nota__img, .pl-nota__sk span::after, .pl-nota__act--like.is-pop svg { animation: none !important; }
}

/* Paywall (inc/socios.php) */
.pl-socios-preview { font-family: var(--pl-font); color: var(--pl-text-2); }
.pl-paywall {
    margin: 20px 0; padding: 28px 22px; border-radius: var(--pl-radius-lg); text-align: center;
    background: radial-gradient(circle at 100% 100%, rgba(122,166,7,.3) 0%, transparent 60%), var(--pl-black);
    border: 1px solid var(--pl-brand-d); box-shadow: var(--pl-shadow-lg);
}
.pl-paywall__icon { color: var(--pl-brand-l); margin-bottom: 10px; }
.pl-paywall__title { margin: 0 0 8px; font-size: 22px; font-weight: 900; letter-spacing: -.03em; }
.pl-paywall__msg { margin: 0 0 18px; font-size: 14px; color: var(--pl-text-2); line-height: 1.5; }
.pl-paywall__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pl-paywall__btn { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: var(--pl-radius-pill); font-weight: 800; font-size: 14px; }
.pl-paywall__btn--primary { background: var(--pl-brand); color: var(--pl-black); }
.pl-paywall__btn--ghost { border: 1.5px solid var(--pl-border-2); color: var(--pl-text); }
.pl-paywall__note { margin: 14px 0 0; font-size: 12px; color: var(--pl-muted); }

/* ---------- 11. Hojas de la app: páginas, 404, archivos vacíos ---------- */
/* Mismo lenguaje que la nota: una hoja oscura con bordes redondeados que sube bajo la
   barra fija, ✕ para volver, H1 grande y el cuerpo en la tipografía de la nota. */
.pl-sheet {
    position: relative; width: min(760px, 100%); margin: 8px auto 0; padding: 6px 20px 36px;
    min-height: calc(100vh - var(--pl-appbar-h) - 8px);
    background: radial-gradient(120% 40% at 50% 0%, rgba(122,166,7,.08), transparent 70%), var(--pl-bg-soft);
    border: 1px solid var(--pl-border-2); border-bottom: 0; border-radius: 22px 22px 0 0;
    box-shadow: 0 -18px 50px rgba(0,0,0,.4);
}
@media (min-width: 700px) { .pl-sheet { padding: 10px 36px 44px; } }
.pl-sheet__bar { position: sticky; top: calc(var(--pl-appbar-h) + 6px); z-index: 4; display: flex; padding: 6px 0 2px; margin: 0 -8px; }
html.pl-appbar-hidden .pl-sheet__bar { top: 8px; }
.pl-sheet__head { padding-top: 8px; }
.pl-sheet__head .pl-breadcrumbs { margin-bottom: 10px; }
.pl-sheet__title { margin: 6px 0 0; font-size: clamp(30px, 8vw, 44px); font-weight: 900; line-height: 1.02; letter-spacing: -.04em; color: var(--pl-white); text-wrap: balance; }
.pl-sheet__mark::before { content: attr(data-mark); } /* "#" de archivos vacíos, fuera del texto del H1 */
.pl-sheet__lead { margin: 12px 0 0; font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--pl-text-2); }
.pl-sheet__code {
    margin: 18px 0 0; font-size: clamp(72px, 24vw, 128px); font-weight: 900; line-height: .9; letter-spacing: -.06em;
    color: transparent; -webkit-text-stroke: 2px var(--pl-brand-l);
}
.pl-sheet__body { margin-top: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pl-sheet__hint { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--pl-muted); }
.pl-sheet__cta { margin-top: 8px; color: var(--pl-black) !important; }
.pl-sheet__hero { margin: 20px 0 0; border-radius: var(--pl-radius-lg); overflow: hidden; }
.pl-sheet__hero img { width: 100%; height: auto; }
.pl-sheet__prose { display: block; font-family: var(--pl-font); font-size: 17px; line-height: 1.75; color: var(--pl-text-2); overflow-wrap: break-word; }
.pl-sheet__prose p { margin: 0 0 18px; }
.pl-sheet__prose h2, .pl-sheet__prose h3 { font-family: var(--pl-font); font-weight: 900; letter-spacing: -.02em; color: var(--pl-text); margin: 30px 0 12px; }
.pl-sheet__prose a { color: var(--pl-brand-l); text-decoration: underline; text-underline-offset: 2px; }
.pl-sheet__prose img { max-width: 100%; height: auto; border-radius: var(--pl-radius-lg); }
.pl-sheet__prose ul, .pl-sheet__prose ol { padding-left: 1.2em; }

/* Temas sugeridos (template-parts/topic-chips.php): hojas y tarjeta "Sin resultados". */
.pl-reel__suggest { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pl-reel__suggest .pl-hash { animation: none; }

/* Búsqueda de las hojas: el mismo verde que la de la barra. */
.pl-search-block {
    display: flex; align-items: center; gap: 4px; width: 100%; max-width: 440px; height: 48px; padding: 0 5px 0 4px;
    border-radius: var(--pl-radius-pill); border: 1.5px solid var(--pl-brand); background: rgba(10,10,11,.9);
    box-shadow: 0 0 0 4px rgba(122,166,7,.14);
}
.pl-search-block:focus-within { border-color: var(--pl-brand-l); box-shadow: 0 0 0 4px rgba(122,166,7,.28), 0 0 30px rgba(122,166,7,.4); }
.pl-search-block input {
    flex: 1; min-width: 0; height: 100%; padding: 0 10px 0 14px; border: 0; background: transparent; color: var(--pl-white);
    font-size: 16px; font-weight: 600; outline: none; -webkit-appearance: none; appearance: none;
}
.pl-search-block input::placeholder { color: rgba(255,255,255,.5); font-weight: 500; }
.pl-search-block button {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--pl-brand); color: var(--pl-black); box-shadow: 0 0 14px rgba(122,166,7,.45);
}
.pl-search-block button:focus-visible { outline: 2px solid var(--pl-brand-l); outline-offset: 2px; }
.pl-pagelinks { margin-top: 24px; font-size: 13px; color: var(--pl-muted); }
.pl-pagelinks a { margin-left: 8px; color: var(--pl-brand-l); }

.pl-breadcrumbs { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--pl-muted); }
.pl-breadcrumbs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pl-breadcrumbs__item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pl-breadcrumbs a { color: var(--pl-muted); }
.pl-breadcrumbs a:hover { color: var(--pl-text); }
.pl-breadcrumbs__current { color: var(--pl-text-2); }
.pl-breadcrumbs__sep { color: var(--pl-border-2); }

/* ---------- 12. Cierre de las pantallas (footer.php) ---------- */
/* Sin bloque verde: la marca chiquita y los links de transparencia, en gris. */
.pl-end {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 26px 16px calc(env(safe-area-inset-bottom, 0px) + 28px); text-align: center;
}
.pl-end__brand { font-weight: 900; font-size: 15px; line-height: 1; letter-spacing: -.04em; text-transform: uppercase; color: var(--pl-muted); }
.pl-end__brand b { color: var(--pl-brand); font-weight: 900; }
.pl-end__brand:hover { color: var(--pl-text); }
.pl-end__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; }
.pl-end__links a { display: inline-flex; min-height: 32px; align-items: center; font-size: 12px; font-weight: 600; color: var(--pl-muted); }
.pl-end__links a:hover { color: var(--pl-text); text-decoration: underline; }

/* ---------- 14. Modal "Área de Socios · ¡Muy pronto!" ---------- */
/* template-parts/socios-modal.php + theme.js. Mismo patrón que el modal de la nota
   del reel: fondo que se funde, panel que sube con resorte (hoja desde abajo en el
   teléfono, tarjeta centrada en desktop). Verde de marca: borde, brillo y botón.
   Ilustración solo CSS: un carnet de socio que flota con un aro que gira y chispas. */
@keyframes pl-socios-float { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-7px) rotate(-3deg); } }
@keyframes pl-socios-spin  { to { transform: rotate(360deg); } }
@keyframes pl-socios-spark { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1); } }
@keyframes pl-socios-shine { from { transform: translateX(-120%) skewX(-16deg); } to { transform: translateX(260%) skewX(-16deg); } }

html.pl-modal-open, html.pl-modal-open body { overflow: hidden; }

.pl-socios-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: flex-end; justify-content: center;
    font-family: var(--pl-font);
}
.pl-socios-modal[hidden] { display: none; }
.pl-socios-modal__backdrop {
    position: absolute; inset: 0; width: 100%; height: 100%; cursor: default;
    background: rgba(5,5,6,.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    opacity: 0; transition: opacity 260ms ease;
}
.pl-socios-modal__panel {
    position: relative; width: 100%; max-width: 440px;
    display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
    padding: 30px 24px calc(env(safe-area-inset-bottom, 0px) + 24px);
    border-radius: 26px 26px 0 0; border: 1.5px solid color-mix(in srgb, var(--pl-brand) 70%, transparent); border-bottom: 0;
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(122,166,7,.28), transparent 62%),
        var(--pl-bg-soft);
    box-shadow: 0 -10px 60px rgba(122,166,7,.22), var(--pl-shadow-lg);
    color: var(--pl-text); outline: none;
    transform: translateY(100%);
    transition: transform 460ms cubic-bezier(.22,1.25,.36,1);
}
.pl-socios-modal.is-open .pl-socios-modal__backdrop { opacity: 1; }
.pl-socios-modal.is-open .pl-socios-modal__panel { transform: none; }
.pl-socios-modal.is-closing .pl-socios-modal__panel { transition-duration: 240ms; transition-timing-function: ease-in; }

.pl-socios-modal__x {
    position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.08); color: var(--pl-text);
    transition: background-color 150ms ease, scale 260ms var(--pl-ease-spring);
}
.pl-socios-modal__x:hover { background: rgba(255,255,255,.16); }
.pl-socios-modal__x:active { scale: .92; }
.pl-socios-modal :focus-visible { outline: 2px solid var(--pl-brand-l); outline-offset: 3px; }

.pl-socios-modal__art { position: relative; width: 150px; height: 112px; margin: 2px 0 6px; }
.pl-socios-modal__ring {
    position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%;
    background: conic-gradient(from 0deg, var(--pl-brand), transparent 40%, var(--pl-brand-l) 70%, transparent 85%, var(--pl-brand));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    opacity: .7; animation: pl-socios-spin 7s linear infinite;
}
.pl-socios-modal__card {
    position: absolute; left: 50%; top: 50%; width: 104px; height: 66px; margin: -33px 0 0 -52px; overflow: hidden;
    display: block; padding: 10px 12px; border-radius: 12px; text-align: left;
    background: linear-gradient(135deg, var(--pl-brand-l), var(--pl-brand) 55%, var(--pl-brand-d));
    box-shadow: 0 12px 30px rgba(122,166,7,.45), inset 0 1px 0 rgba(255,255,255,.4);
    animation: pl-socios-float 3.6s ease-in-out infinite;
}
.pl-socios-modal__card::after {
    content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    animation: pl-socios-shine 3.6s ease-in-out 1s infinite;
}
.pl-socios-modal__chip { display: block; width: 16px; height: 12px; border-radius: 3px; background: rgba(5,5,6,.35); }
.pl-socios-modal__brand {
    position: absolute; right: 10px; top: 8px; font-size: 13px; font-weight: 900; letter-spacing: -.04em; color: var(--pl-black);
}
.pl-socios-modal__brand b { color: #fff; font-weight: 900; }
.pl-socios-modal__line { display: block; width: 62%; height: 5px; margin-top: 9px; border-radius: 3px; background: rgba(5,5,6,.32); }
.pl-socios-modal__line--short { width: 38%; margin-top: 5px; }
.pl-socios-modal__spark {
    position: absolute; width: 9px; height: 9px; border-radius: 50%;
    background: radial-gradient(circle, #fff, var(--pl-brand-l) 55%, transparent 70%);
    animation: pl-socios-spark 2.4s ease-in-out infinite;
}
.pl-socios-modal__spark--1 { left: 8px;  top: 14px; }
.pl-socios-modal__spark--2 { right: 6px; top: 64px; animation-delay: .8s; }
.pl-socios-modal__spark--3 { left: 30px; bottom: 0;  animation-delay: 1.6s; width: 6px; height: 6px; }

.pl-socios-modal__title { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: -.03em; line-height: 1.1; }
.pl-socios-modal__text { margin: 0 0 8px; max-width: 30ch; font-size: 15px; line-height: 1.5; color: var(--pl-text-2); }
.pl-socios-modal__ok { min-width: 160px; color: var(--pl-black) !important; box-shadow: var(--pl-glow-brand); }

@media (min-width: 700px) {
    .pl-socios-modal { align-items: center; padding: 24px; }
    .pl-socios-modal__panel {
        padding: 34px 32px 28px; border-radius: 26px; border-bottom: 1.5px solid color-mix(in srgb, var(--pl-brand) 70%, transparent);
        box-shadow: 0 0 0 6px rgba(122,166,7,.08), 0 24px 70px rgba(122,166,7,.25), var(--pl-shadow-lg);
        transform: translateY(26px) scale(.94); opacity: 0;
        transition: transform 460ms cubic-bezier(.22,1.25,.36,1), opacity 220ms ease;
    }
    .pl-socios-modal.is-open .pl-socios-modal__panel { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .pl-socios-modal__panel { transform: none !important; transition: opacity 1ms !important; }
    .pl-socios-modal__ring,
    .pl-socios-modal__card,
    .pl-socios-modal__card::after,
    .pl-socios-modal__spark { animation: none !important; }
    .pl-socios-modal__spark { opacity: .8; }
}

/* ==========================================================================
   v5.7 - Nube de ranking (#MásVistos / #Candentes) - theme.js + hashtag-cloud.php
   Chips con estilo propio (ojo / llama). Al tocar uno, el resto de la fila se va
   (.is-rank-out), aparece "#✕ Salir" y, debajo de la fila, la nube de temas a
   pantalla completa (.pl-rankcloud, top = borde inferior de la fila). Sin JS: la
   lista del server (.pl-rankstatic) se muestra con :target.
   ========================================================================== */
@keyframes pl-rank-chip-out { to { opacity: 0; scale: .55; } }
@keyframes pl-rank-chip-in  { from { opacity: 0; scale: .55; translate: 0 6px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes pl-rank-in       { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }
@keyframes pl-rank-word-in  { 0% { opacity: 0; scale: .3; translate: 0 18px; } 70% { opacity: 1; scale: 1.08; } 100% { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes pl-rank-spin     { to { transform: rotate(360deg); } }

/* Chips de ranking: borde en degradé y glifo (ojo azul / llama naranja). */
:is(.pl-hashcloud, .pl-hashpanel) .pl-hash.pl-hash--rank {
    --c: var(--pl-cat-nacionales);
    padding-right: 10px;
    border-color: color-mix(in srgb, var(--c) 60%, transparent);
    background:
        radial-gradient(120% 110% at 85% 50%, color-mix(in srgb, var(--c) 34%, transparent), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02)),
        rgba(14,14,16,.86);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 14px color-mix(in srgb, var(--c) 28%, transparent), 0 2px 10px rgba(0,0,0,.3);
    color: var(--pl-white);
}
:is(.pl-hashcloud, .pl-hashpanel) .pl-hash.pl-hash--rank-candentes { --c: var(--pl-cat-emprender); }
.pl-hash__glyph { display: inline-flex; margin-left: 6px; color: var(--c); }
.pl-hash__glyph svg { width: 15px; height: 15px; }
.pl-hash--rank-candentes .pl-hash__glyph { animation: pl-hash-flame 1.6s ease-in-out infinite; }
:is(.pl-hashcloud, .pl-hashpanel) .pl-hash.pl-hash--rank:hover { color: var(--pl-white); border-color: var(--c); }
/* Abierto: relleno de color, texto negro. */
.pl-hashcloud .pl-hash.pl-hash--rank.is-on {
    background: var(--c); border-color: var(--c); color: var(--pl-black);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent), 0 6px 20px color-mix(in srgb, var(--c) 40%, transparent);
}
.pl-hash--rank.is-on .pl-hash__mark,
.pl-hash--rank.is-on .pl-hash__glyph { color: rgba(5,5,6,.7); }

/* "#✕ Salir" (lo agrega theme.js). */
.pl-hashcloud .pl-hash.pl-hash--exit {
    --c: var(--pl-white);
    gap: 3px; background: var(--pl-text); border-color: var(--pl-text); color: var(--pl-black);
    box-shadow: 0 6px 18px rgba(0,0,0,.35); animation: none;
}
.pl-hash--exit .pl-hash__mark { color: rgba(5,5,6,.55); margin-right: 0; }
.pl-hash__x { font-size: 11px; font-weight: 900; }
.pl-hashcloud .pl-hash.pl-hash--exit:hover { color: var(--pl-black); }

/* Salida / vuelta del resto de los chips (se ocultan con [hidden] al terminar). */
.pl-hashcloud__list > li.is-rank-out { animation: pl-rank-chip-out 220ms ease forwards; pointer-events: none; }
.pl-hashcloud__list > li.is-rank-in  { animation: pl-rank-chip-in 340ms var(--pl-ease-spring) both; animation-delay: calc(var(--ri, 0) * 24ms); }
.pl-hashcloud__list > li[hidden] { display: none; }
.pl-hashcloud.is-ranking .pl-hashcloud__list { -webkit-mask-image: none; mask-image: none; }

/* Nube a pantalla completa, debajo de la fila de chips. */
.pl-rankcloud {
    --pl-rank-c: var(--pl-cat-nacionales);
    position: fixed; z-index: 950; left: 0; right: 0; bottom: 0; top: var(--pl-rank-top, 0px);
    display: flex; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    background:
        radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--pl-rank-c) 16%, transparent), transparent 70%),
        var(--pl-dots),
        #080809;
    background-size: auto, var(--pl-dots-size), auto;
    color: var(--pl-text); font-family: var(--pl-font); outline: none;
}
.pl-rankcloud--candentes { --pl-rank-c: var(--pl-cat-emprender); }
.pl-rankcloud[hidden] { display: none; }
.pl-rankcloud.is-open { animation: pl-rank-in 260ms var(--pl-ease-out) both; }
.pl-rankcloud.is-closing { opacity: 0; transition: opacity 200ms ease; pointer-events: none; }
.pl-rankcloud__inner {
    width: 100%; max-width: 820px; margin: auto; text-align: center;
    padding: 22px 16px calc(env(safe-area-inset-bottom, 0px) + 40px);
}
.pl-rankcloud__head { display: flex; align-items: center; justify-content: center; gap: 10px; }
.pl-rankcloud__glyph { display: inline-flex; color: var(--pl-rank-c); }
.pl-rankcloud__glyph svg { width: 26px; height: 26px; }
.pl-rankcloud__title { margin: 0; font-size: clamp(24px, 7vw, 34px); font-weight: 900; letter-spacing: -.04em; line-height: 1.05; color: var(--pl-white); }
.pl-rankcloud__sub { margin: 6px auto 0; max-width: 40ch; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--pl-muted); }
.pl-rankcloud__sub:empty { display: none; }
.pl-rankcloud__state { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; font-size: 14px; font-weight: 700; color: var(--pl-text-2); }
.pl-rankcloud__state:empty { display: none; }
.pl-rankcloud__spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--pl-border-2); border-top-color: var(--pl-rank-c); animation: pl-rank-spin 800ms linear infinite; }
.pl-rankcloud__retry { min-height: 34px; padding: 0 14px; border-radius: var(--pl-radius-pill); border: 1px solid var(--pl-border-2); font-size: 13px; font-weight: 800; color: var(--pl-text); }
.pl-rankcloud__retry:hover { border-color: var(--pl-text-2); }

.pl-rankcloud__list {
    list-style: none; margin: 22px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px;
}
.pl-rankword {
    --c: var(--pl-brand-l);
    position: relative; display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 7px; border-radius: 12px;
    font-size: var(--fs, 16px); font-weight: var(--fw, 800); line-height: 1.05; letter-spacing: -.035em; white-space: nowrap;
    color: var(--c); rotate: var(--rot, 0deg);
    text-shadow: 0 0 22px color-mix(in srgb, var(--c) 35%, transparent);
    transition: scale 240ms var(--pl-ease-spring), background-color 150ms ease, color 150ms ease;
}
.pl-rankword:hover,
.pl-rankword:focus-visible { color: var(--pl-white); background: color-mix(in srgb, var(--c) 18%, transparent); scale: 1.07; }
.pl-rankword:active { scale: .95; }
.pl-rankword:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.pl-rankword__hot {
    width: .3em; height: .3em; min-width: 6px; min-height: 6px; flex-shrink: 0; border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #ffd27a, var(--pl-cat-emprender) 70%);
    box-shadow: 0 0 8px 2px rgba(255,122,61,.7);
    animation: pl-hash-flame 1.6s ease-in-out infinite;
}
.pl-rankcloud.is-in .pl-rankword { animation: pl-rank-word-in 560ms var(--pl-ease-spring) both; animation-delay: calc(var(--i, 0) * 28ms + 40ms); }

/* Colores por tipo (la nube de JS los pone con --c; la lista sin JS, por clase). */
.pl-rankword--person  { --c: var(--pl-cat-nacionales); }
.pl-rankword--section { --c: var(--pl-cat-internacionales); }
.pl-rankword--tag     { --c: var(--pl-brand-l); }

/* Sin JS: la lista del server se abre con el ancla del chip (:target). */
.pl-rankstatic { display: none; }
html:not(.pl-js) .pl-rankstatic:target {
    display: block; flex: 1 0 100%; order: 11; pointer-events: auto;
    max-height: 62vh; overflow-y: auto; margin: 6px 0 4px; padding: 16px 14px;
    border-radius: var(--pl-radius-lg); border: 1px solid var(--pl-border-2);
    background: rgba(10,10,11,.97); text-align: center;
}
.pl-rankstatic__title { margin: 0; font-size: 20px; font-weight: 900; letter-spacing: -.03em; color: var(--pl-white); }
.pl-rankstatic__sub { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; letter-spacing: 0; color: var(--pl-muted); }
.pl-rankstatic__list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 10px; }
.pl-rankstatic__word { display: inline-block; padding: 2px 4px; font-size: var(--fs, 16px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: var(--c); }
.pl-rankstatic__empty { margin: 12px 0 0; color: var(--pl-muted); font-weight: 700; }
.pl-rankstatic__close {
    display: inline-flex; align-items: center; min-height: 36px; margin-top: 12px; padding: 0 14px;
    border-radius: var(--pl-radius-pill); background: var(--pl-text); color: var(--pl-black) !important; font-size: 13px; font-weight: 800;
}

/* ==========================================================================
   v5.7 - Nube de instalación (PWA) - theme.js
   Burbuja con forma de nube (bultos arriba + "colita" de puntitos abajo), verde
   de marca. Entra desde abajo con resorte; no es modal y no roba el foco.
   ========================================================================== */
@keyframes pl-install-in  { 0% { opacity: 0; transform: translateY(46px) scale(.82); } 60% { opacity: 1; transform: translateY(-6px) scale(1.02); } 100% { opacity: 1; transform: none; } }
@keyframes pl-install-bob { 50% { transform: translateY(-4px); } }

.pl-install {
    position: fixed; z-index: 900; left: 0; right: 0; margin: 0 auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 34px);
    width: min(344px, calc(100% - 32px));
    font-family: var(--pl-font); color: var(--pl-black);
    filter: drop-shadow(0 16px 30px rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(122,166,7,.28));
    pointer-events: none;
}
.pl-install.is-in { pointer-events: auto; animation: pl-install-in 620ms cubic-bezier(.22,1.25,.36,1) both; }
.pl-install.is-in .pl-install__cloud { animation: pl-install-bob 4.5s ease-in-out 900ms infinite; }
.pl-install.is-out { opacity: 0; transform: translateY(24px) scale(.94); transition: opacity 220ms ease, transform 300ms ease; }
.pl-install__cloud {
    position: relative; isolation: isolate;
    padding: 18px 44px 14px 18px;
    border-radius: 38px 44px 40px 34px / 34px 38px 44px 40px;
    background: linear-gradient(180deg, var(--pl-brand-l) 0%, var(--pl-brand) 100%);
}
.pl-install__cloud:empty { display: none; }
/* Bultos de nube arriba: mismo verde que el borde superior, sin costura. */
.pl-install__puff { position: absolute; z-index: -1; border-radius: 50%; background: var(--pl-brand-l); }
.pl-install__puff--1 { width: 86px; height: 86px; top: -30px; left: 30px; }
.pl-install__puff--2 { width: 62px; height: 62px; top: -20px; left: 100px; }
/* "Colita": dos puntitos que bajan a la izquierda. */
.pl-install__dot { position: absolute; border-radius: 50%; background: var(--pl-brand); }
.pl-install__dot--1 { width: 16px; height: 16px; bottom: -20px; left: 38px; }
.pl-install__dot--2 { width: 9px; height: 9px; bottom: -34px; left: 26px; }

.pl-install__x {
    position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(5,5,6,.14); color: var(--pl-black);
    transition: background-color 150ms ease, scale 260ms var(--pl-ease-spring);
}
.pl-install__x:hover { background: rgba(5,5,6,.24); }
.pl-install__x:active { scale: .9; }
.pl-install__logo {
    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 6px;
    border-radius: 10px; background: var(--pl-black); color: var(--pl-white);
    font-size: 14px; font-weight: 900; letter-spacing: -.05em; line-height: 1;
}
.pl-install__logo b { color: var(--pl-brand-l); font-weight: 900; }
.pl-install__title { position: relative; margin: 0; font-size: 16.5px; font-weight: 900; letter-spacing: -.02em; line-height: 1.2; }
.pl-install__text { margin: 5px 0 0; font-size: 13px; font-weight: 600; line-height: 1.4; color: rgba(5,5,6,.78); }
.pl-install__text b { font-weight: 800; color: var(--pl-black); }
.pl-install__share { display: inline-block; vertical-align: -3px; }
.pl-install__actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.pl-install__go {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 20px; border-radius: var(--pl-radius-pill);
    background: var(--pl-black); color: var(--pl-white); font-size: 14px; font-weight: 800;
    transition: scale 260ms var(--pl-ease-spring);
}
.pl-install__go:active { scale: .95; }
.pl-install__later { min-height: 40px; padding: 0 4px; font-size: 13.5px; font-weight: 800; color: rgba(5,5,6,.78); text-decoration: underline; text-underline-offset: 3px; }
.pl-install__later:hover { color: var(--pl-black); }
.pl-install :focus-visible { outline: 2px solid var(--pl-black); outline-offset: 2px; }
/* En el reel (portada y archivos) sube un poco para no tapar el botón "Leer la nota". */
html.pl-reel-lock .pl-install { bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); }
/* Variante de avisos push (push.js): misma nube, campanita en vez del logo. */
.pl-install--push .pl-install__logo svg { display: block; }
.pl-install--push .pl-install__go[disabled],
.pl-install--push .pl-install__later[disabled] { opacity: .6; cursor: progress; }

@media (prefers-reduced-motion: reduce) {
    .pl-hashcloud__list > li.is-rank-out,
    .pl-hashcloud__list > li.is-rank-in,
    .pl-rankcloud.is-open,
    .pl-rankcloud.is-in .pl-rankword,
    .pl-rankword__hot,
    .pl-hash--rank-candentes .pl-hash__glyph,
    .pl-install.is-in,
    .pl-install.is-in .pl-install__cloud { animation: none !important; }
    .pl-install.is-out { transform: none; }
    .pl-rankword:hover,
    .pl-rankword:focus-visible { scale: 1; }
}

/* ---------- Transiciones entre paginas (View Transitions, sitio multipagina) ----------
   Chrome/Edge 126+ y Safari 18.2+: al navegar el cambio se anima como en una app.
   - La barra de la app (pl-appbar) queda fija: no parpadea.
   - La foto de la nota "vuela" entre la card del reel / la tira "Seguí leyendo" y el
     hero de la nota (view-transition-name pl-img-ID, igual en los dos documentos);
     el titular, entre el <h2> de la card y el H1 (pl-t-ID).
   Navegadores sin soporte: navegacion normal. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: pl-vt-out .22s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: pl-vt-in .32s cubic-bezier(.2,.7,.3,1) both; }
@keyframes pl-vt-out { to { opacity: 0; transform: translateY(-12px) scale(.985); } }
@keyframes pl-vt-in  { from { opacity: 0; transform: translateY(18px) scale(.985); } }
::view-transition-old(pl-appbar), ::view-transition-new(pl-appbar) { animation: none; }
::view-transition-group(*) { animation-duration: .38s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}