/*
Theme Name: Pulso Político
Theme URI: https://pulsopolitico.com
Author: HK
Description: Tema personalizado para Pulso Político basado en template HTML.
Version: 1.0
Text Domain: pulso-politico
*/

/* ==========================================================
   Pulso Político — CUSTOM.CSS
   Todo el CSS de overrides y nuevas piezas va acá.
   ========================================================== */

/* ====== Vars de layout ====== */
:root{
  --pp-container: 1440px;   /* ancho máximo desktop */
  --pp-gutter-x: 24px;      /* padding lateral */
  --pp-sep-color: rgba(0,0,0,.14); /* separadores sutiles */
}

/* ====== Contenedores a 1440px ====== */
.container,
.container-lg,
.container-xl,
.container-xxl {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--pp-gutter-x);
}
@media (min-width: 1200px){
  .container,
  .container-lg,
  .container-xl,
  .container-xxl { max-width: var(--pp-container); }
}

/* ====== Separadores del header, sutiles y dentro del container ====== */
.main-nav { border: none !important; }
.main-nav .container{
  border-top: 1px solid var(--pp-sep-color);
  border-bottom: 1px solid var(--pp-sep-color);
}
.topbar .sep{ background: var(--pp-sep-color); height: 1px; }

/* ====== Logo responsive (que no se deforme) ====== */
.brand .site-logo,
.custom-logo-link{ display:inline-block; height:auto !important; line-height:0; max-width:100%; }
.brand .site-logo img,
.custom-logo{
  width: auto !important;
  height: auto !important;
  max-width: min(90vw, 420px);
  max-height: 54px;
  object-fit: contain;
}
@media (max-width: 991.98px){
  .brand .site-logo img, .custom-logo { max-height: 40px !important; }
}
@media (max-width: 575.98px){
  .brand .site-logo img, .custom-logo { max-height: 34px !important; }
}

/* ====== Menú principal (estilo NewsBoard) ====== */
.main-menu { margin: 0; padding: 10px 0; list-style: none; text-align: center; }
.main-menu > li { display: inline-block; margin: 0 14px; }
.main-menu > li > a { text-transform: uppercase; font-weight: 700; text-decoration: none; }

/* ====== Móvil: ocultar menú principal (si querés) ====== */
@media (max-width: 991.98px){
  .main-nav{ display: none !important; }
  .brand { padding-bottom: 8px; }
}

/* ====== Hero (forzar 4:3 cuando haga falta) ====== */
.hero-4x3 a, .hero-4x3 img,
.hero-sm-4x3 a, .hero-sm-4x3 img {
  display: block; width: 100%; object-fit: cover;
}
.hero-4x3 a, .hero-4x3 img { aspect-ratio: 4 / 3; }
.hero-sm-4x3 a, .hero-sm-4x3 img { aspect-ratio: 4 / 3; }

/* ====== Off-canvas (menú lateral) ====== */
.offcanvas-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  opacity:0; visibility:hidden; transition:.25s ease; z-index:10001;
}
.offcanvas{
  position:fixed; top:0; right:0; height:100dvh; width:360px; max-width:92vw;
  background:#fff; box-shadow:-10px 0 30px rgba(0,0,0,.2);
  transform:translateX(100%); transition:transform .28s ease; z-index:10002;
  padding:22px 20px 28px; overflow:auto;
}
body.offcanvas-open .offcanvas{ transform:translateX(0); }
body.offcanvas-open .offcanvas-overlay{ opacity:1; visibility:visible; }
.offcanvas-close{
  position:absolute; right:8px; top:8px; border:0; background:transparent;
  font-size:28px; line-height:1; cursor:pointer;
}
.offcanvas-title{ font-size:16px; text-transform:uppercase; letter-spacing:.08em; margin:0 0 10px; }
.offcanvas-subtitle{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin:18px 0 8px; color:#666; }
.off-menu{ list-style:none; margin:0; padding:0; }
.off-menu li{ border-bottom:1px solid rgba(0,0,0,.


/* ===== Off-canvas panel ===== */
.offcanvas-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  opacity:0; visibility:hidden; transition:.25s ease; z-index:10001;
}
.offcanvas{
  position:fixed; top:0; right:0; height:100dvh; width:360px; max-width:92vw;
  background:#fff; box-shadow:-10px 0 30px rgba(0,0,0,.2);
  transform:translateX(100%); transition:transform .28s ease; z-index:10002;
  padding:22px 20px 28px; overflow:auto;
}

/* Estado abierto */
body.offcanvas-open .offcanvas{ transform:translateX(0); }
body.offcanvas-open .offcanvas-overlay{ opacity:1; visibility:visible; }

/* Close */
.offcanvas-close{
  position:absolute; right:8px; top:8px; border:0; background:transparent;
  font-size:28px; line-height:1; cursor:pointer;
}

/* Títulos */
.offcanvas-title{ font-size:16px; text-transform:uppercase; letter-spacing:.08em; margin:0 0 10px; }
.offcanvas-subtitle{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin:18px 0 8px; color:#666; }

/* Lista del menú */
.off-menu{ list-style:none; margin:0; padding:0; }
.off-menu li{ border-bottom:1px solid rgba(0,0,0,.08); }
.off-menu li a{
  display:block; padding:12px 2px; text-decoration:none; font-weight:700; text-transform:uppercase;
}

/* Social */
.off-social{ list-style:none; margin:0; padding:0; }
.off-social li{ margin:6px 0; }
.off-social a{ text-decoration:none; }
.off-social .ti-facebook, .off-social .ti-twitter, .off-social .ti-instagram{ margin-right:8px; }

/* Marca */
.offcanvas-brand{ border-top:1px solid rgba(0,0,0,.08); margin-top:18px; padding-top:14px; }
.offcanvas-brand .brand-link{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.offcanvas-brand .custom-logo, .offcanvas-brand img{
  width:auto; height:auto; max-height:28px; object-fit:contain;
}
.offcanvas-brand .brand-name{ font-weight:800; letter-spacing:.03em; }

/* Botón hamburguesa existente (por si querés reforzar tamaño) */
.btn-hamb{ width:36px; height:36px; }

/* Ocultar menú principal en móvil (si querés) */
@media (max-width:991.98px){
  .main-nav{ display:none !important; }
}

.offcanvas-logo {
  display:block;
  max-height:42px;
  width:auto;
  margin:0 auto;
  filter:none;
}
.offcanvas-brand {
  text-align:center;
  margin-top:auto;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.15);
}

/************ FIX ESPECÍFICO PARA TUS SELECTORES ************/

/* 1) .the-world .first-post .mb-30 img (hero izq) */
.the-world .first-post figure.mb-30,
.the-world .first-post figure.mb-30::before,
.the-world .first-post figure.mb-30::after,
.the-world .first-post figure.mb-30 > a,
.the-world .first-post figure.mb-30 > a::before,
.the-world .first-post figure.mb-30 > a::after,
.the-world .first-post .mb-30 img {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  overflow: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* 2) .loop-grid-5 .col-1-5 .mb-15 img (Today Highlight) */
.loop-grid-5 .col-1-5 figure.mb-15,
.loop-grid-5 .col-1-5 figure.mb-15::before,
.loop-grid-5 .col-1-5 figure.mb-15::after,
.loop-grid-5 .col-1-5 figure.mb-15 > a,
.loop-grid-5 .col-1-5 figure.mb-15 > a::before,
.loop-grid-5 .col-1-5 figure.mb-15 > a::after,
.loop-grid-5 .col-1-5 .mb-15 img {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  overflow: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* 3) Contenedor con clases: post-thumb post-thumb-80 d-flex mr-15 border-radius-5 img-hover-scale (sidebar) */
.post-thumb.post-thumb-80.d-flex.mr-15.border-radius-5.img-hover-scale,
.post-thumb.post-thumb-80.d-flex.mr-15.border-radius-5.img-hover-scale::before,
.post-thumb.post-thumb-80.d-flex.mr-15.border-radius-5.img-hover-scale::after,
.post-thumb.post-thumb-80.d-flex.mr-15.border-radius-5.img-hover-scale a,
.post-thumb.post-thumb-80.d-flex.mr-15.border-radius-5.img-hover-scale a::before,
.post-thumb.post-thumb-80.d-flex.mr-15.border-radius-5.img-hover-scale a::after,
.post-thumb.post-thumb-80.d-flex.mr-15.border-radius-5.img-hover-scale img {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  overflow: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* 4) Cualquier clase que lleve "border-radius" en el nombre (por si el tema aplica otras variantes) */
[class*="border-radius"] { border-radius: 0 !important; }
[class*="border-radius"]::before,
[class*="border-radius"]::after { border-radius: 0 !important; }

/* 5) Inline styles que traen radios */
img[style*="border-radius"],
figure[style*="border-radius"],
a[style*="border-radius"] { border-radius: 0 !important; }

/* 6) Refuerzo general en HOME (sin tocar otras páginas si no querés) */
.home img,
.home figure,
.home figure img,
.home a img { border-radius: 0 !important; }
.home figure,
.home figure > a { overflow: visible !important; }

/* (opcional) Si el recorte venía de una máscara/pseudo-elemento de hover */
.img-hover-scale::before,
.img-hover-scale::after { border-radius: 0 !important; }