/*
 * Diseños de Redacción PL (post 1080×1350) — HTML + CSS con texto real.
 *
 * Portado de disenos-pl.js (panel de la redacción). Cada medida N del diseño
 * original (px a 1080 de ancho) es calc(N * var(--u)), con
 * --u = 100cqw / 1080: el diseño es idéntico a 1080 px y a 360 px, solo más chico.
 * Sin container queries: ancho fijo de 540 px y --u = .5px.
 *
 * Marcado: template-parts/diseno.php. Ajuste de textos: assets/js/disenos.js.
 */

/* ── Raíz: contenedor, proporción y colores de la categoría ─────────────── */
.pl-diseno {
    --u: .5px;
    --dz-negro: #050506;
    --dz-texto: #9fc943;   /* provinciales */
    --dz-fondo: #7aa607;
    --dz-acento: #fafafa;  /* acento sobre un bloque del color de la categoría */
    position: relative;
    display: block;
    width: 100%;
    max-width: 540px;
    aspect-ratio: 1080 / 1350;
    overflow: hidden;
    container-type: inline-size;
    background: #18181b;
    color: #fafafa;
    font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}
@supports (width: 1cqw) {
    .pl-diseno { --u: calc(100cqw / 1080); max-width: none; }
}
.pl-diseno--cat-nacionales      { --dz-texto: #4fb3ff; --dz-fondo: #4fb3ff; }
.pl-diseno--cat-internacionales { --dz-texto: #d4a455; --dz-fondo: #d4a455; }
.pl-diseno--cat-emprender       { --dz-texto: #ff7a3d; --dz-fondo: #ff7a3d; }
.pl-diseno--cat-suscriptores    { --dz-texto: #fafafa; --dz-fondo: #fafafa; --dz-acento: #7aa607; }

/* Reset local: el diseño no hereda márgenes, bordes ni tipografía del sitio. */
.pl-diseno :where(*) {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

/* Lienzo 1080×1350 */
.pl-diseno .pl-dz {
    position: absolute;
    inset: 0;
    overflow: hidden;
    font-weight: 400;
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
}

/* ── Piezas comunes ─────────────────────────────────────────────────────── */
.pl-diseno .pl-dz-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% var(--dz-foco, 50%);
}
.pl-diseno .pl-dz-img--vacia { background: linear-gradient(160deg, #27272a 0%, #111114 70%); }

.pl-diseno .pl-dz-fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pl-diseno .pl-dz-arriba {
    position: absolute;
    top: calc(56 * var(--u));
    left: calc(64 * var(--u));
    right: calc(64 * var(--u));
}
.pl-diseno .pl-dz-abajo {
    position: absolute;
    left: calc(64 * var(--u));
    right: calc(64 * var(--u));
    bottom: calc(64 * var(--u));
    display: flex;
    flex-direction: column;
    gap: calc(36 * var(--u));
}

/* Marca PAMPA LIBERAL */
.pl-diseno .pl-dz-marca {
    display: inline-flex;
    font-weight: 900;
    font-size: calc(34 * var(--u));
    line-height: 1;
    letter-spacing: -.04em;
    text-transform: uppercase;
    color: #fafafa;
    white-space: nowrap;
}
.pl-diseno .pl-dz-marca__b { color: #7aa607; }
.pl-diseno .pl-dz-marca--oscura { color: var(--dz-negro); }
.pl-diseno .pl-dz-marca--oscura .pl-dz-marca__b { color: var(--dz-acento); }
.pl-diseno .pl-dz-marca--chica { font-size: calc(30 * var(--u)); }

/* Píldora (volanta sobre foto) */
.pl-diseno .pl-dz-pildora {
    display: inline-flex;
    gap: calc(12 * var(--u));
    align-items: center;
    padding: calc(14 * var(--u)) calc(26 * var(--u));
    border-radius: 999px;
    background: rgba(5, 5, 6, .6);
    color: #fafafa;
    font-weight: 800;
    font-size: calc(24 * var(--u));
    line-height: normal;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pl-diseno .pl-dz-pildora__punto {
    width: calc(14 * var(--u));
    height: calc(14 * var(--u));
    border-radius: 999px;
    background: var(--dz-texto);
}

/* Rótulos (800 24px, mayúsculas) */
.pl-diseno .pl-dz-rotulo {
    font-weight: 800;
    font-size: calc(24 * var(--u));
    line-height: normal;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pl-diseno .pl-dz-c-texto { color: var(--dz-texto); }
.pl-diseno .pl-dz-c-gris  { color: #a1a1aa; }

/* Títulos y textos que se achican (data-max-lineas) */
.pl-diseno .pl-dz-titulo,
.pl-diseno [data-max-lineas] {
    display: block;
    font-weight: 900;
    color: #fafafa;
    text-transform: none;
    text-wrap: balance;
    overflow-wrap: break-word;
}
.pl-diseno .pl-dz-destacado { color: var(--dz-texto); }
.pl-diseno .pl-dz-recuadro {
    background: var(--dz-fondo);
    color: var(--dz-negro);
    padding: 0 calc(14 * var(--u));
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Pie con filete */
.pl-diseno .pl-dz-pie {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: calc(2 * var(--u)) solid rgba(250, 250, 250, .2);
    padding-top: calc(28 * var(--u));
}
.pl-diseno .pl-dz-pie--gris { border-top-color: #27272a; }
/* Hueco donde el original tenía "@pampa.liberal" (700 26px): conserva la altura del renglón. */
.pl-diseno .pl-dz-hueco { font-weight: 700; font-size: calc(26 * var(--u)); line-height: normal; }
.pl-diseno .pl-dz-hueco::before { content: "\200b"; }

/* Textura de puntos */
.pl-diseno .pl-dz-puntos,
.pl-diseno--titular .pl-dz {
    --dz-puntos: rgba(255, 255, 255, .06);
    background-image: radial-gradient(var(--dz-puntos) calc(2 * var(--u)), transparent calc(2.4 * var(--u)));
    background-size: calc(36 * var(--u)) calc(36 * var(--u));
}
.pl-diseno .pl-dz-puntos--oscuros { --dz-puntos: rgba(5, 5, 6, .12); }

/* Cita */
.pl-diseno .pl-dz-cita {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-style: normal;
    quotes: none;
}
.pl-diseno .pl-dz-cita::before,
.pl-diseno .pl-dz-cita::after { content: none; }
.pl-diseno .pl-dz-firma {
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--u));
}
.pl-diseno .pl-dz-firma__autor {
    font-weight: 900;
    font-size: calc(44 * var(--u));
    letter-spacing: -.02em;
    color: #fafafa;
}
.pl-diseno .pl-dz-firma__cargo {
    font-weight: 600;
    font-size: calc(30 * var(--u));
    color: #a1a1aa;
}

/* Solo lectores de pantalla (título de la nota en cifra y citas) */
.pl-diseno .pl-dz-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── foto · Foto a sangre ───────────────────────────────────────────────── */
.pl-diseno--foto .pl-dz { background: #18181b; }
.pl-diseno .pl-dz-foto__velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5,5,6,.55) 0%, rgba(5,5,6,0) 18%, rgba(5,5,6,0) 38%, rgba(5,5,6,.7) 62%, rgba(5,5,6,.96) 100%);
}
.pl-diseno .pl-dz-foto__titulo {
    font-size: calc(112 * var(--u));
    line-height: .9;
    letter-spacing: -.045em;
}

/* ── bloque · Bloque de color ───────────────────────────────────────────── */
.pl-diseno--bloque .pl-dz {
    display: flex;
    flex-direction: column;
    background: var(--dz-fondo);
}
.pl-diseno .pl-dz-bloque__foto {
    position: relative;
    flex: none;
    height: calc(720 * var(--u));
}
.pl-diseno .pl-dz-bloque__volanta {
    position: absolute;
    top: calc(56 * var(--u));
    left: calc(64 * var(--u));
}
.pl-diseno .pl-dz-bloque__texto {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: calc(24 * var(--u));
    padding: calc(56 * var(--u)) calc(64 * var(--u));
}
.pl-diseno .pl-dz-bloque__titulo {
    font-size: calc(100 * var(--u));
    line-height: .9;
    letter-spacing: -.045em;
    color: var(--dz-negro);
}

/* ── titular · Titular primero ──────────────────────────────────────────── */
.pl-diseno--titular .pl-dz {
    display: flex;
    flex-direction: column;
    gap: calc(44 * var(--u));
    padding: calc(64 * var(--u));
    background-color: #0a0a0b;
}
.pl-diseno .pl-dz-titular__titulo {
    font-size: calc(104 * var(--u));
    line-height: .92;
    letter-spacing: -.045em;
}
.pl-diseno .pl-dz-titular__foto {
    position: relative;
    flex: 1;
    border-radius: calc(28 * var(--u));
    overflow: hidden;
    background: #18181b;
}

/* ── cifra · Cifra ──────────────────────────────────────────────────────── */
.pl-diseno--cifra .pl-dz { background: #0a0a0b; }
.pl-diseno .pl-dz-cifra__foto,
.pl-diseno .pl-dz-cifra__velo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(760 * var(--u));
}
.pl-diseno .pl-dz-cifra__velo {
    background: linear-gradient(180deg, rgba(5,5,6,.5) 0%, rgba(5,5,6,0) 22%, rgba(5,5,6,0) 55%, rgba(10,10,11,1) 100%);
}
.pl-diseno .pl-dz-cifra__valor {
    position: absolute;
    left: calc(52 * var(--u));
    top: calc(560 * var(--u));
    font-weight: 900;
    font-size: calc(360 * var(--u));
    line-height: .8;
    letter-spacing: -.07em;
    color: var(--dz-texto);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pl-diseno .pl-dz-cifra__texto {
    font-size: calc(80 * var(--u));
    line-height: .94;
    letter-spacing: -.04em;
}

/* ── marco · Marco de color ─────────────────────────────────────────────── */
.pl-diseno--marco .pl-dz {
    display: flex;
    flex-direction: column;
    background: var(--dz-fondo);
}
.pl-diseno .pl-dz-marco__banda {
    flex: none;
    height: calc(84 * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(24 * var(--u));
    font-weight: 800;
    font-size: calc(24 * var(--u));
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dz-negro);
    white-space: nowrap;
}
.pl-diseno .pl-dz-marco__foto {
    position: relative;
    flex: 1;
    margin: 0 calc(28 * var(--u));
    border-radius: calc(28 * var(--u));
    overflow: hidden;
    background: #18181b;
}
.pl-diseno .pl-dz-marco__velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5,5,6,0) 40%, rgba(5,5,6,.7) 70%, rgba(5,5,6,.96) 100%);
}
.pl-diseno .pl-dz-marco__texto {
    position: absolute;
    left: calc(48 * var(--u));
    right: calc(48 * var(--u));
    bottom: calc(48 * var(--u));
    display: flex;
    flex-direction: column;
    gap: calc(24 * var(--u));
}
.pl-diseno .pl-dz-marco__titulo {
    font-size: calc(92 * var(--u));
    line-height: .9;
    letter-spacing: -.045em;
}
.pl-diseno .pl-dz-marco__pie {
    flex: none;
    height: calc(112 * var(--u));
    padding: 0 calc(56 * var(--u));
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ── cita_negro · Cita sobre negro ──────────────────────────────────────── */
.pl-diseno--cita-negro .pl-dz {
    display: flex;
    flex-direction: column;
    padding: calc(64 * var(--u));
    background: #0a0a0b;
}
.pl-diseno .pl-dz-citan__comilla {
    margin-top: calc(100 * var(--u));
    height: calc(170 * var(--u));
    font-weight: 900;
    font-size: calc(320 * var(--u));
    line-height: .6;
    color: var(--dz-fondo);
}
.pl-diseno .pl-dz-citan__texto {
    font-size: calc(84 * var(--u));
    line-height: .98;
    letter-spacing: -.035em;
}
.pl-diseno .pl-dz-citan__firma {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: calc(32 * var(--u));
}
.pl-diseno .pl-dz-citan__avatar {
    position: relative;
    flex: none;
    width: calc(140 * var(--u));
    height: calc(140 * var(--u));
    border-radius: 999px;
    overflow: hidden;
    background: #18181b;
    border: calc(4 * var(--u)) solid var(--dz-fondo);
}

/* ── cita_foto · Cita sobre la foto ─────────────────────────────────────── */
.pl-diseno--cita-foto .pl-dz { background: #18181b; }
.pl-diseno .pl-dz-citaf__velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5,5,6,.5) 0%, rgba(5,5,6,0) 18%, rgba(5,5,6,.3) 40%, rgba(5,5,6,.96) 82%);
}
.pl-diseno .pl-dz-citaf__marca {
    position: absolute;
    top: calc(56 * var(--u));
    left: calc(64 * var(--u));
}
.pl-diseno .pl-dz-citaf__texto {
    font-size: calc(88 * var(--u));
    line-height: .96;
    letter-spacing: -.035em;
}
.pl-diseno .pl-dz-citaf__firma {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(20 * var(--u));
}
.pl-diseno .pl-dz-citaf__raya {
    width: calc(56 * var(--u));
    height: calc(6 * var(--u));
    border-radius: 999px;
    background: var(--dz-fondo);
}
.pl-diseno .pl-dz-citaf__autor {
    font-weight: 800;
    font-size: calc(32 * var(--u));
    color: #fafafa;
}
.pl-diseno .pl-dz-citaf__cargo {
    font-weight: 600;
    font-size: calc(28 * var(--u));
    color: #a1a1aa;
}

/* ── cita_color · Cita sobre el color ───────────────────────────────────── */
.pl-diseno--cita-color .pl-dz {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: calc(32 * var(--u));
    padding: calc(64 * var(--u));
    background: var(--dz-fondo);
}
.pl-diseno .pl-dz-citac__lodijo {
    padding: calc(10 * var(--u)) calc(20 * var(--u));
    border: calc(3 * var(--u)) solid var(--dz-negro);
    border-radius: 999px;
    font-weight: 800;
    font-size: calc(24 * var(--u));
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dz-negro);
    white-space: nowrap;
}
.pl-diseno .pl-dz-citac__texto {
    font-size: calc(112 * var(--u));
    line-height: .9;
    letter-spacing: -.045em;
    color: var(--dz-negro);
}
.pl-diseno .pl-dz-citac__pie {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: calc(24 * var(--u));
    border-top: calc(3 * var(--u)) solid var(--dz-negro);
    padding-top: calc(32 * var(--u));
}
.pl-diseno--cita-color .pl-dz-firma__autor,
.pl-diseno--cita-color .pl-dz-firma__cargo { color: var(--dz-negro); }

/* ── El título dentro del sitio ─────────────────────────────────────────── */
/* Puede llevar clases del sitio (.pl-nota__title para speakable) y un link: se
   neutraliza lo que traen main.css / reels.css. */
.pl-diseno .pl-dz-titulo {
    margin: 0;
    padding: 0;
    max-width: none;
    font-family: inherit;
    text-shadow: none;
}
.pl-diseno .pl-dz-titulo__link,
.pl-diseno .pl-dz-titulo__link:hover {
    color: inherit;
    text-decoration: none;
}
.pl-diseno .pl-dz-titulo__link:hover {
    text-decoration: underline;
    text-decoration-thickness: calc(5 * var(--u));
    text-underline-offset: calc(10 * var(--u));
}
.pl-diseno .pl-dz-titulo__link:focus-visible {
    outline: 2px solid #9fc943;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Integración: la nota (template-parts/note-screen.php) ──────────────── */
/* En lugar del hero a sangre: el diseño entero, debajo de la barra chica (sin la
   superposición del hero, que taparía el titular del diseño). */
.pl-nota__diseno {
    position: relative;
    width: 100%;
    max-width: 600px;
    /* Entero arriba del pliegue: el ancho se limita por el alto de la pantalla. */
    max-width: min(600px, calc((100svh - var(--pl-appbar-h, 110px) - 90px) * .8));
    margin: 0 auto 18px;
}
@media (min-width: 700px) {
    .pl-nota__diseno { margin-top: 4px; }
    .pl-nota__diseno .pl-diseno { border-radius: 18px; }
}

/* ── Integración: la tarjeta del reel (template-parts/reel-card.php) ────── */
/* El diseño 4:5 va arriba (debajo de la barra de la app) y las acciones, personas y
   botón quedan abajo sobre el negro. El ancho se limita por el alto disponible para
   que no choque con el cuerpo en pantallas bajas. Borde de abajo fundido en negro. */
.pl-reel__card--diseno { container-type: size; }
.pl-reel__card--diseno .pl-reel__diseno {
    --pl-dz-top: var(--pl-reel-top-h, 110px);
    --pl-dz-reserva: calc(var(--pl-reel-safe-b, 0px) + 190px);
    position: absolute;
    z-index: 1;
    top: var(--pl-dz-top);
    left: 0;
    right: 0;
    width: min(100%, calc((100cqh - var(--pl-dz-top) - var(--pl-dz-reserva)) * .8));
    margin: 0 auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 95%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0, #000 95%, transparent 100%);
}
.pl-reel--archive .pl-reel__card--diseno .pl-reel__diseno { --pl-dz-top: calc(var(--pl-reel-top-h, 110px) + 56px); }
.pl-reel__card--diseno .pl-reel__diseno .pl-diseno { max-width: none; }
@supports not (height: 1cqh) {
    .pl-reel__card--diseno .pl-reel__diseno { width: min(100%, 420px); }
}

/* Sin animaciones propias; por las dudas, nada se mueve con movimiento reducido. */
@media (prefers-reduced-motion: reduce) {
    .pl-diseno,
    .pl-diseno * { transition: none !important; animation: none !important; }
}