/* ============================================================
   PANTALLA POLÍTICA — hoja de estilos (sobre Bootstrap 5)
   Concepto: la política vista a través de una pantalla de
   transmisión. El elemento firma es la "línea de señal": una
   barra degradada cian→magenta que simula el barrido de una
   señal de video, usada como divisor entre bloques. Los
   distintivos de categoría imitan el "bug" de un canal de
   noticias, y las tarjetas de Verificación llevan un sello de
   veredicto como si fuera un rótulo de transmisión en vivo.
   ============================================================ */

:root{
  /* --- color --- */
  --pp-navy:    #0B1220; /* fondo de pantalla, cabecera, pie */
  --pp-navy-2:  #131C2E; /* tarjetas sobre fondo oscuro */
  --pp-paper:   #EEF0F4; /* fondo de página clara */
  --pp-card:    #FFFFFF; /* tarjetas sobre fondo claro */
  --pp-ink:     #10141C; /* texto principal */
  --pp-steel:   #7C88A0; /* texto secundario */
  --pp-line:    #DADFE8; /* bordes claros */
  --pp-cyan:    #22D3C0; /* color de señal — acento firma */
  --pp-magenta: #E63462; /* en vivo / alerta / breaking */
  --pp-amber:   #F2B807; /* elecciones / resultados */

  --f-display: "Space Grotesk", "Arial Narrow", sans-serif;
  --f-body: "Inter", -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Space Mono", "SFMono-Regular", Menlo, monospace;

  /* Sobrescritura de variables de Bootstrap */
  --bs-body-font-family: var(--f-body);
  --bs-body-color: var(--pp-ink);
  --bs-body-bg: var(--pp-paper);
  --bs-link-color: var(--pp-ink);
  --bs-link-hover-color: var(--pp-magenta);
  --bs-border-radius: 4px;
  --bs-border-radius-lg: 6px;
}

body{
  font-family: var(--f-body);
  background: var(--pp-paper);
  color: var(--pp-ink);
  line-height: 1.55;
}

a{ text-decoration:none; }
img{ max-width:100%; display:block; }

.container-pp{ max-width: 1200px; }

/* -------------------------------------------------------
   Línea de señal — elemento firma del sitio: una franja que
   imita el barrido cian → magenta de una señal de transmisión.
------------------------------------------------------- */
.signal-line{
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg,
    var(--pp-cyan) 0%, var(--pp-cyan) 35%,
    var(--pp-magenta) 55%, var(--pp-magenta) 70%,
    var(--pp-amber) 85%, var(--pp-amber) 100%);
  background-size: 200% 100%;
}
@media (prefers-reduced-motion: no-preference){
  .signal-line--anim{ animation: signal-sweep 5s linear infinite; }
  @keyframes signal-sweep{
    from{ background-position-x: 0%; }
    to{ background-position-x: -200%; }
  }
}
.signal-line--soft{
  height: 2px;
  background: var(--pp-line);
}

/* -------------------------------------------------------
   Cabecera / navegación
------------------------------------------------------- */
.pp-header{
  background: var(--pp-navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1030;
}
.pp-navbar{
  padding: 0.9rem 0;
}
.pp-brand{
  display:flex;
  flex-direction: column;
  line-height: 1;
  gap: .35rem;
}
.pp-brand__name{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: #fff;
  letter-spacing: -0.01em;
}
.pp-brand__name .dot{
  display:inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pp-cyan);
  margin-right: .4rem;
  vertical-align: middle;
}
.pp-brand__name span.hl{ color: var(--pp-cyan); }
.pp-brand__slogan{
  font-family: var(--f-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pp-steel);
}

.pp-navbar .navbar-toggler{
  border-color: rgba(255,255,255,.25);
  color:#fff;
}
.pp-navbar .navbar-toggler-icon{
  filter: invert(1);
}

.pp-nav .nav-link{
  font-family: var(--f-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pp-steel);
  padding: 0.5rem 0.65rem !important;
  border-radius: 3px;
  transition: color .15s, background .15s;
}
.pp-nav .nav-link:hover,
.pp-nav .nav-link.active{
  color: var(--pp-navy);
  background: var(--pp-cyan);
}

.pp-aux a{
  font-family: var(--f-mono);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--pp-steel);
  border-bottom: 1px dashed transparent;
}
.pp-aux a:hover{ color:#fff; border-color: var(--pp-cyan); }

/* barra "en vivo" con ticker */
.pp-ticker{
  background: var(--pp-navy-2);
  border-top: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
  white-space: nowrap;
}
.pp-ticker__live{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background: var(--pp-magenta);
  color:#fff;
  font-family: var(--f-mono);
  font-size: .66rem;
  font-weight:700;
  letter-spacing:.08em;
  padding: .45rem .7rem;
  flex-shrink:0;
}
.pp-ticker__live .pulse{
  width:7px; height:7px; border-radius:50%;
  background:#fff;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.35; transform:scale(.7); }
}
.pp-ticker__track{
  display:inline-block;
  padding: .5rem 1rem;
  font-family: var(--f-mono);
  font-size: .74rem;
  color: var(--pp-steel);
  white-space: nowrap;
}
.pp-ticker__track strong{ color: var(--pp-cyan); font-weight:600; }
.pp-ticker__track span{ margin-right: 2.6rem; }
@media (prefers-reduced-motion: no-preference){
  .pp-ticker__track{ animation: ticker-scroll 32s linear infinite; }
  @keyframes ticker-scroll{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
  }
}

/* -------------------------------------------------------
   Hero
------------------------------------------------------- */
.pp-hero{
  background: var(--pp-navy);
  color: #fff;
  padding: 2.75rem 0 3rem;
}
.pp-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-family: var(--f-mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: var(--pp-cyan);
  margin-bottom: .8rem;
}
.pp-hero h1{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.pp-hero p.dek{
  color: var(--pp-steel);
  font-size: 1.05rem;
  max-width: 48ch;
}
.pp-byline{
  font-family: var(--f-mono);
  font-size:.68rem;
  text-transform:uppercase;
  color: var(--pp-steel);
  letter-spacing:.04em;
}
.pp-hero-side{
  border-left: 1px dashed rgba(255,255,255,.18);
  padding-left: 1.75rem;
}
.pp-hero-side h3{
  font-family: var(--f-mono);
  text-transform:uppercase;
  font-size:.66rem;
  letter-spacing:.08em;
  color: var(--pp-steel);
  margin-bottom: .9rem;
}
.pp-side-story{
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pp-side-story:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.pp-side-story a{
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}
.pp-side-story a:hover{ color: var(--pp-cyan); }
.pp-side-story .tag{ margin-bottom:.35rem; }

/* -------------------------------------------------------
   Distintivo de categoría — estilo "bug" de canal
------------------------------------------------------- */
.tag{
  display:inline-flex;
  align-items:center;
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  border-radius: 3px;
  font-weight: 700;
  border: 1.4px solid currentColor;
}
.tag--noticias{ color: var(--pp-cyan); background: rgba(34,211,192,.08); }
.tag--analisis{ color: #6C8CFF; background: rgba(108,140,255,.08); }
.tag--elecciones{ color: var(--pp-amber); background: rgba(242,184,7,.1); }
.tag--gobierno{ color: var(--pp-cyan); background: rgba(34,211,192,.08); }
.tag--congreso{ color: #6C8CFF; background: rgba(108,140,255,.08); }
.tag--justicia{ color: var(--pp-steel); background: rgba(124,136,160,.12); }
.tag--verificacion{ color: var(--pp-magenta); background: rgba(230,52,98,.08); }
.tag--videos{ color: var(--pp-amber); background: rgba(242,184,7,.1); }
.tag--opinion{ color: var(--pp-magenta); background: rgba(230,52,98,.08); }

/* -------------------------------------------------------
   Tarjetas
------------------------------------------------------- */
.pp-card{
  background: var(--pp-card);
  border: 1px solid var(--pp-line);
  border-radius: 6px;
  padding: 1.2rem 1.2rem 1.35rem;
  height: 100%;
  display:flex;
  flex-direction:column;
  gap: .55rem;
  transition: transform .15s, box-shadow .15s;
}
.pp-card:hover{ transform: translateY(-3px); box-shadow: 0 12px 26px rgba(11,18,32,.08); }
.pp-card h3{
  font-family: var(--f-display);
  font-size: 1.12rem;
  font-weight: 700;
  line-height:1.28;
  margin:0;
}
.pp-card h3 a:hover{ color: var(--pp-magenta); }
.pp-card p{ margin:0; color:#4A5266; font-size:.92rem; }
.pp-card__meta{
  font-family: var(--f-mono);
  font-size:.63rem;
  text-transform:uppercase;
  color: var(--pp-steel);
  letter-spacing:.04em;
  margin-top:auto;
}

/* tarjeta de video: miniatura con botón de reproducción */
.pp-video-thumb{
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--pp-navy) 0%, #1B2740 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin-bottom: .2rem;
}
.pp-video-thumb::before{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 2px, transparent 2px 4px);
}
.pp-play-btn{
  width: 46px; height:46px;
  border-radius:50%;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  z-index:1;
}
.pp-duration{
  position:absolute; bottom:8px; right:8px;
  background: rgba(11,18,32,.85);
  color:#fff;
  font-family: var(--f-mono);
  font-size:.62rem;
  padding: .12rem .4rem;
  border-radius: 3px;
  z-index:1;
}

/* sello de veredicto — Verificación */
.verdict{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-family: var(--f-mono);
  font-size:.62rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:.25rem .55rem;
  border-radius:3px;
  transform: rotate(-1.5deg);
}
.verdict--falso{ background: rgba(230,52,98,.12); color: var(--pp-magenta); border:1.4px solid var(--pp-magenta); }
.verdict--enganoso{ background: rgba(242,184,7,.12); color:#9A6E00; border:1.4px solid var(--pp-amber); }
.verdict--verdadero{ background: rgba(34,211,192,.12); color:#0E8074; border:1.4px solid var(--pp-cyan); }
.verdict--impreciso{ background: rgba(124,136,160,.14); color:#525C70; border:1.4px solid var(--pp-steel); }

/* -------------------------------------------------------
   Banner de sección (páginas de categoría)
------------------------------------------------------- */
.pp-section-banner{
  background: var(--pp-navy);
  color:#fff;
  padding: 2.75rem 0 1.5rem;
}
.pp-section-banner h1{
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  margin: .7rem 0 .6rem;
}
.pp-section-banner p{ color: var(--pp-steel); max-width: 60ch; margin:0; }

/* -------------------------------------------------------
   Páginas de contenido
------------------------------------------------------- */
.pp-content-head h1{
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 3.2vw, 2.3rem);
  margin-bottom:.5rem;
}
.pp-content-head p{ color: var(--pp-steel); }
.pp-prose{ max-width: 68ch; }
.pp-prose h2{
  font-family: var(--f-display);
  font-size: 1.25rem;
  margin: 1.9rem 0 .7rem;
}
.pp-prose p{ margin-bottom: 1rem; color:#33394A; }
.pp-prose ul{ margin-bottom:1rem; padding-left:1.2rem; color:#33394A; }
.pp-prose li{ margin-bottom:.4rem; }
.pp-prose strong{ color: var(--pp-ink); }

.pp-masthead{
  background:#fff;
  border:1px solid var(--pp-line);
  border-left: 4px solid var(--pp-cyan);
  border-radius:4px;
  padding: 1.3rem 1.5rem;
  margin: 1.5rem 0;
}
.pp-masthead dl{ display:grid; grid-template-columns:max-content 1fr; gap:.35rem 1.1rem; margin:0; }
.pp-masthead dt{ font-family: var(--f-mono); font-size:.65rem; text-transform:uppercase; letter-spacing:.05em; color: var(--pp-steel); }
.pp-masthead dd{ margin:0; font-size:.92rem; }

/* contacto */
.pp-contact-card{
  background: var(--pp-navy);
  color:#fff;
  border-radius:6px;
  padding: 1.8rem;
}
.pp-contact-card h2{ font-family: var(--f-display); font-size:1.15rem; margin-bottom:1rem; }
.pp-contact-list li{ margin-bottom: 1rem; }
.pp-contact-list .k{ font-family: var(--f-mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.06em; color: var(--pp-steel); display:block; margin-bottom:.15rem; }
.pp-contact-list .v a{ color:#fff; border-bottom:1px dashed var(--pp-cyan); }
.pp-contact-list .v a:hover{ color: var(--pp-cyan); }

.pp-form label{
  font-family: var(--f-mono);
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color: var(--pp-steel);
  margin-bottom:.3rem;
}
.pp-form .form-control{
  border-radius:4px;
  border:1px solid var(--pp-line);
  font-family: var(--f-body);
  padding:.65rem .8rem;
}
.pp-form .form-control:focus{
  border-color: var(--pp-cyan);
  box-shadow: 0 0 0 .18rem rgba(34,211,192,.22);
}
.btn-pp{
  font-family: var(--f-mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700;
  background: var(--pp-cyan);
  color: var(--pp-navy);
  border: none;
  border-radius:4px;
  padding:.75rem 1.3rem;
}
.btn-pp:hover{ background:#1CB8A8; color: var(--pp-navy); }

/* mapa del sitio */
.pp-sitemap h2{
  font-family: var(--f-mono);
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color: var(--pp-steel);
  border-bottom: 1px dashed var(--pp-line);
  padding-bottom:.5rem;
  margin-bottom:.8rem;
}
.pp-sitemap li{ margin-bottom:.5rem; }
.pp-sitemap a{ font-family: var(--f-display); font-size:.98rem; color: var(--pp-ink); }
.pp-sitemap a:hover{ color: var(--pp-magenta); }

/* -------------------------------------------------------
   Footer
------------------------------------------------------- */
.pp-footer{
  background: var(--pp-navy);
  color: var(--pp-steel);
  padding: 2.6rem 0 1.5rem;
  margin-top: 3.5rem;
}
.pp-footer h3{
  font-family: var(--f-mono);
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#fff;
  margin-bottom:.9rem;
}
.pp-footer li{ margin-bottom:.5rem; font-size:.88rem; }
.pp-footer a:hover{ color: var(--pp-cyan); }
.pp-footer-brand p{ font-size:.85rem; max-width:32ch; margin:.8rem 0 1rem; }
.pp-social a{
  width:34px; height:34px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--pp-steel);
  margin-right:.6rem;
}
.pp-social a:hover{ border-color: var(--pp-cyan); color: var(--pp-cyan); }
.pp-footer-bottom{
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1.3rem;
  margin-top: 1.8rem;
  font-family: var(--f-mono);
  font-size:.66rem;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.6rem;
}

/* -------------------------------------------------------
   Utilidades
------------------------------------------------------- */
.skip-link{
  position:absolute; left:-9999px; top:auto;
  background: var(--pp-cyan); color:var(--pp-navy);
  padding:.6rem 1rem; z-index:2000; font-family: var(--f-mono);
}
.skip-link:focus{ left:1rem; top:1rem; }

:focus-visible{ outline: 2px solid var(--pp-cyan); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  .pulse, .signal-line--anim{ animation:none; }
}