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

/* ====== Hero (forzar 4:3 cuando haga falta) ====== */
.hero-4x3,
.hero-sm-4x3 {
  position: relative;
  width: 100%;
  overflow: hidden !important; /* Forzar overflow hidden aquí */
}

.hero-4x3 a, 
.hero-4x3 img,
.hero-sm-4x3 a, 
.hero-sm-4x3 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-4x3 { aspect-ratio: 4 / 3; }
.hero-sm-4x3 { aspect-ratio: 4 / 3; }

/* Asegurar que los enlaces ocupen todo el espacio */
.hero-4x3 a,
.hero-sm-4x3 a {
  position: absolute;
  inset: 0;
}

/* ====== 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-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 ************/

/* Eliminar TODOS los border-radius de imágenes y contenedores */
img,
figure,
.post-thumb,
.img-hover-slide,
.thumb-overlay,
[class*="border-radius"],
[class*="rounded"],
[style*="border-radius"] {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* Excepciones: mantener overflow hidden en heros */
.hero-4x3,
.hero-4x3 *,
.hero-sm-4x3,
.hero-sm-4x3 *,
.hero-4x3 figure,
.hero-sm-4x3 figure,
.hero-4x3 img,
.hero-sm-4x3 img {
  overflow: hidden !important;
}

/* Pseudo-elementos y enlaces dentro de contenedores de imagen */
img::before, img::after,
figure::before, figure::after,
.post-thumb::before, .post-thumb::after,
.img-hover-slide::before, .img-hover-slide::after,
.thumb-overlay::before, .thumb-overlay::after,
[class*="border-radius"]::before,
[class*="border-radius"]::after,
[class*="rounded"]::before,
[class*="rounded"]::after,
a img, .img-link {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* Eliminar cualquier estilo residual del nombre/avatar del autor
  (plantilla ya fue actualizada para no mostrar el avatar/nombre). */
.author-name,
.author-avatar { display: none !important; }

/* ==============================
   Mobile width + media fixes
   (mirroring critical overrides from assets/css)
   ============================== */
/* Gutter reduction to widen content on phones without going full-bleed */
@media (max-width: 767.98px){
  :root { --pp-gutter-x: 14px; }
}

/* Tighten vertical spacing and inner gutters in target sections */
@media (max-width: 767.98px){
  /* Single container closer to header */
  .single .container.single-content { padding-top: 12px !important; }

  /* Home utilities */
  .home .mt-30 { margin-top: 16px !important; }

  /* The World section spacing and gutters */
  .the-world .mb-30,
  .the-world .inner .mb-30 { margin-bottom: 16px !important; }
  .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 row gutter tweak */
  .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; }

  /* Media full width inside content */
  .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; }
  .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; }

  /* Prevent accidental horizontal scroll */
  html, body { overflow-x: hidden; }
}

/* Ensure hero photo blocks and single featured image behave as expected */
.mb-30.hero-4x3,
.mb-30.hero-sm-4x3 { width: 100% !important; }

.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;
}

/* Strong container override to win over assets/css loads */
.container,
.container-lg,
.container-xl,
.container-xxl { padding-left: var(--pp-gutter-x) !important; padding-right: var(--pp-gutter-x) !important; }
@media (min-width: 1200px){
  .container,
  .container-lg,
  .container-xl,
  .container-xxl { max-width: var(--pp-container) !important; }
}

/* Fallback: ensure single featured images are full width regardless of extra classes */
.single .post-thumb img,
.single figure.post-thumb img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* ====== SINGLE: barra social superior ====== */
.single .single-social-share-top { 
  width: 100%;
  margin: 10px 0 20px;
}
.single .single-social-share-top .list-inline-item:not(:last-child){
  margin-right: 12px;
}

/* ==============================
   SINGLE (mobile): Alinear fecha/min-lectura y herramientas
   ============================== */
@media (max-width: 767.98px){
  /* Forzar que ambas columnas queden a la misma altura (parte inferior) */
  .single .entry-header .row { 
    display: flex !important; 
    align-items: flex-end !important; 
    justify-content: space-between; 
    gap: 10px;
  }
  .single .entry-header .row > [class^="col-"],
  .single .entry-header .row > [class*=" col-"] {
    flex: 1 1 0; 
    width: auto !important;
  }

  /* Las metas (izq y der) en flex y centradas verticalmente */
  .single .entry-header .entry-meta { 
    display: flex !important; 
    align-items: center !important; 
    gap: 10px; 
    flex-wrap: wrap; 
    margin: 0 !important; 
    line-height: 1.2; 
  }
  .single .single-tools .entry-meta { 
    justify-content: flex-end !important; 
  }
}

/* ==============================
   FRONT PAGE: Eliminar divider wave y ajustar imágenes móvil
   ============================== */
/* Eliminar el pseudo-elemento ::after del divider-wave */
.divider-wave::after {
  display: none !important;
}

/* Ajustes de imágenes en móvil */
@media (max-width: 767.98px){
  /* 1. Imagen dentro de figure.mb-15 - ocupar todo el contenedor */
  figure.mb-15,
  figure.mb-15 a,
  figure.mb-15 img {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
  figure.mb-15 img {
    height: auto !important;
    object-fit: cover !important;
  }

  /* 2. Imagen mb-0 debe ocupar todo el contenedor col-md-6 */
  figure.mb-0,
  figure.mb-0 a,
  figure.mb-0 img {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
  figure.mb-0 img {
    height: auto !important;
    object-fit: cover !important;
  }

  /* 3. Imagen mb-md-0 mb-sm-3 mínimo 200px altura en móviles */
  .col-md-4.mb-md-0.mb-sm-3 figure,
  .col-md-4.mb-md-0.mb-sm-3 figure a,
  .col-md-4.mb-md-0.mb-sm-3 figure img,
  figure.mb-md-0.mb-sm-3,
  figure.mb-md-0.mb-sm-3 a,
  figure.mb-md-0.mb-sm-3 img {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 200px !important;
    display: block !important;
  }
  figure.mb-md-0.mb-sm-3 img,
  .col-md-4.mb-md-0.mb-sm-3 figure img {
    object-fit: cover !important;
  }
}

/* ==============================
   FRONT PAGE: Normalizar márgenes y estilos
   ============================== */
/* Igualar mb-20 a mb-10 para consistencia */
.post-title.mb-20.font-weight-bold {
  margin-bottom: 10px !important;
}

/* Horizontal divider gris clarito */
.horizontal-divider.mt-15.mb-15,
.horizontal-divider {
  background-color: rgba(0,0,0,.08) !important;
  border-color: rgba(0,0,0,.08) !important;
}