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

/* ====== Variables globales ====== */
:root {
  /* Layout */
  --pp-container: 1440px;   /* ancho máximo desktop */
  --pp-gutter-x: 24px;      /* padding lateral */
  
  /* Colors */
  --pp-sep-color: rgba(0,0,0,.14);
  --pp-overlay-bg: rgba(0,0,0,.35);
  --pp-shadow-color: rgba(0,0,0,.2);
  --pp-border-light: rgba(0,0,0,.08);
  
  /* Transitions */
  --pp-transition-fast: .25s ease;
  --pp-transition-normal: .28s ease;
  
  /* Z-indices */
  --pp-z-overlay: 9998;
  --pp-z-offcanvas: 9999;
  --pp-z-header: 900;
}

/* Aumentar ancho útil en móvil reduciendo gutters (sin llegar al 100%) */
@media (max-width: 767.98px){
  :root { --pp-gutter-x: 14px; }
}
@media (max-width: 359.98px){
  :root { --pp-gutter-x: 12px; }
}

/* ====== 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 ====== */
@media (max-width: 767.98px){
  .main-nav{ display: none !important; }
  .brand { padding-bottom: 8px; }
}

/* ====== Hero y contenedores de imagen ====== */

/* Contenedor base para todos los heros */
.hero-4x3,
.hero-sm-4x3,
[class*="mb-"].hero-4x3,
[class*="mb-"].hero-sm-4x3 {
  position: relative;
  width: 100%;
  padding-bottom: 75%; /* Ratio 4:3 = 3/4 = 0.75 = 75% */
  overflow: hidden !important;
  display: block;
  margin-bottom: 30px; /* Margen base */
}

/* Ajustes específicos de márgenes */
.mb-15.hero-4x3,
.mb-15.hero-sm-4x3 {
  margin-bottom: 15px !important;
}

.mb-30.hero-4x3,
.mb-30.hero-sm-4x3 {
  margin-bottom: 30px !important;
}

/* Ajustes responsive de márgenes */
@media (max-width: 767.98px) {
  .mb-sm-3.hero-4x3,
  .mb-sm-3.hero-sm-4x3 {
    margin-bottom: 1rem !important;
  }
}

@media (min-width: 768px) {
  .mb-md-0.hero-4x3,
  .mb-md-0.hero-sm-4x3 {
    margin-bottom: 0 !important;
  }
}

/* Estructura interna del hero */
.hero-4x3 figure,
.hero-sm-4x3 figure,
.hero-4x3 > *,
.hero-sm-4x3 > * {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Imágenes dentro del hero */
.hero-4x3 img,
.hero-sm-4x3 img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Enlaces dentro del hero */
.hero-4x3 a,
.hero-sm-4x3 a {
  display: block;
  width: 100%;
  height: 100%;
}

/* ====== 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,.08);
}


/* ===== Off-canvas panel ===== */
.offcanvas-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  opacity:0; visibility:hidden; transition:.25s ease; z-index:9998;
}
.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:9999;
  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; }

.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: hidden !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: hidden !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: hidden !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: hidden !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; }

/* =====================
   Medios a ancho completo en móvil (imágenes/figuras dentro del contenido)
   ===================== */
@media (max-width: 767.98px){
  /* Contenedores típicos de imagen dentro del contenido */
  .entry-main-content figure,
  .entry-main-content .wp-block-image,
  .entry-main-content .wp-caption {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Imágenes y medios dentro del contenido */
  .entry-main-content img,
  .entry-main-content .wp-block-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .entry-main-content iframe,
  .entry-main-content video,
  .entry-main-content canvas { 
    width: 100% !important; 
    max-width: 100% !important; 
  }
}

/* Header sticky */
#pp-header {
  position: relative;
  z-index: 900;
}

.headerbar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
  z-index: 900;
  transition: all var(--pp-transition-normal);
}

/* Ajuste para la barra de admin de WordPress */
body.admin-bar .headerbar { 
  top: 32px; /* Height of WP admin bar */
}
@media screen and (max-width: 782px) {
  body.admin-bar .headerbar { 
    top: 46px; /* WP admin bar height en móvil */
  }
}

/* Efecto shrink al scrollear */
#pp-header.is-scrolled .headerbar {
  padding: 12px 0 !important;
  box-shadow: 0 6px 14px var(--pp-shadow-color);
}

/* Espacio para el header sticky completo (headerbar + menu + tendencias) */
body {
  padding-top: 120px !important; /* headerbar + menu + tendencias */
}
body.admin-bar {
  padding-top: 142px !important; /* 160px + 32px admin bar */
}
@media screen and (max-width: 782px) {
  body.admin-bar {
    padding-top: 206px !important; /* 160px + 46px admin bar mobile */
  }
}
@media (max-width: 767.98px) {
  body {
    padding-top: 80px !important; /* solo headerbar + tendencias (sin menu) */
  }
  body.admin-bar {
    padding-top: 116px !important; /* 120px + 46px admin bar mobile */
  }
}

/* Imágenes en single post - ocupar todo el ancho */
.single .post-thumb,
.single figure.post-thumb {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: block !important;
}

.single .post-thumb img,
.single figure.post-thumb img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}

/* ====== Header móvil: solo logo y hamburguesa ====== */
@media (max-width: 767.98px) {
  /* Ocultar redes sociales en el header */
  .headerbar .header-social-network,
  .headerbar .list-inline.left,
  .topbar .header-social-network,
  .topbar .list-inline {
    display: none !important;
  }
  
  /* Reducir padding del container en móvil */
  #pp-header .headerbar .container {
    padding-left: var(--pp-gutter-x) !important;
    padding-right: var(--pp-gutter-x) !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    gap: 10px !important;
  }
  
  #pp-header.is-scrolled .headerbar .container {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  
  /* Logo a la izquierda */
  .brand {
    flex: 1 1 auto !important;
    text-align: left !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .brand .site-logo,
  .brand .custom-logo-link {
    margin: 0 !important;
    justify-content: flex-start !important;
  }
  
  /* Botón hamburguesa a la derecha */
  .btn-hamb,
  #off-canvas-toggle {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  
  /* Ocultar separadores en móvil */
  .topbar .sep,
  .divider-2,
  .horizontal-divider-black {
    display: none !important;
  }
}

/* ====== Ajustes de espaciamiento en single y home (mobile) ====== */
@media (max-width: 767.98px){
  /* Contenedor del single más cercano al header */
  .single .container.single-content { padding-top: 12px !important; }

  /* En Home, reducir márgenes utilitarios muy grandes */
  .home .mt-30 { margin-top: 16px !important; }

  /* En la sección the-world, compactar separaciones inferiores */
  .the-world .mb-30,
  .the-world .inner .mb-30 { margin-bottom: 16px !important; }

  /* Reducir gutters internos en filas específicas para ganar ancho útil */
  .the-world .row { margin-left: -8px !important; margin-right: -8px !important; }
  .the-world .row > [class^="col-"],
  .the-world .row > [class*=" col-"] { padding-left: 8px !important; padding-right: 8px !important; }

  .single .container.single-content .row { margin-left: -8px !important; margin-right: -8px !important; }
  .single .container.single-content .row > [class^="col-"],
  .single .container.single-content .row > [class*=" col-"] { padding-left: 8px !important; padding-right: 8px !important; }
}

/* Evitar desplazamiento horizontal accidental en móviles */
@media (max-width: 767.98px){ html, body { overflow-x: hidden; } }

/* ====== Refuerzos para imágenes específicas mencionadas ====== */
/* Hero de fotos: .mb-30.hero-4x3 dentro de columnas */
.mb-30.hero-4x3,
.mb-30.hero-sm-4x3 { width: 100% !important; }

/* Single: imagen destacada .post-thumb.mb-30.border-radius-2 */
.single .post-thumb.mb-30.border-radius-2,
.single figure.post-thumb.mb-30.border-radius-2 {
  border-radius: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
}
.single .post-thumb.mb-30.border-radius-2 img,
.single figure.post-thumb.mb-30.border-radius-2 img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}

/* ====== FOOTER ====== */
.footer-area {
  background: #f8f9fa !important;
  padding: 50px 0 0 !important;
  margin-top: 60px !important;
}
.footer-area .widget-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #111 !important;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #111;
  color: #fff;
  border-radius: 50%;
  transition: background 0.2s ease;
  text-decoration: none;
}
.footer-social a:hover {
  background: #333;
}
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links li {
  margin-bottom: 10px;
}
.footer-links a {
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}
.footer-links a:hover {
  color: #111 !important;
}
.newsletter-form .form-control {
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 4px;
  font-size: 14px;
  width: 100%;
}
.newsletter-form .btn {
  padding: 10px 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: 100%;
}
.footer-bottom-area {
  background: #fff;
  margin-top: 40px;
  padding: 20px 0;
  border-top: 1px solid rgba(0,0,0,.1);
}
.footer-menu .list-inline-item:not(:last-child) {
  margin-right: 20px;
}
.footer-menu a {
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-menu a:hover {
  color: #111 !important;
}