/* =========================================================
   PORTAL NOTICIAS - Estilos principales
   ========================================================= */

:root{
  --pn-red:#c0121a;
  --pn-dark:#191919;
  --pn-gray:#6b6b6b;
  --pn-light-gray:#f4f4f4;
  --pn-border:#e4e4e4;
  --pn-font: 'Georgia', 'Times New Roman', serif;
  --pn-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--pn-font-sans);
  color:var(--pn-dark);
  background:#fff;
  line-height:1.55;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
a:hover{color:var(--pn-red);}
img{max-width:100%;height:auto;display:block;}
ul{list-style:none;margin:0;padding:0;}

/* Defensivo: cualquier imagen suelta (de widgets viejos, contenido
   importado, etc.) nunca se sale del contenedor ni queda flotando
   fuera de lugar. */
.pn-widget img,
.pn-sidebar img,
.pn-footer img,
.pn-article-content img{
  max-width:100%;
  height:auto;
  float:none !important;
}
.pn-widget::after,
.pn-article-content::after,
.pn-footer-col::after{
  content:"";
  display:table;
  clear:both;
}

.pn-container{
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
}

/* ---------- HEADER ---------- */
.pn-header-top{
  background:var(--pn-dark);
  color:#ccc;
  font-size:12px;
}
.pn-header-top-inner{padding:6px 20px;text-transform:capitalize;}

.pn-header-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px 20px;
  flex-wrap:wrap;
}
.pn-site-title{
  font-family:var(--pn-font);
  font-size:34px;
  font-weight:700;
  letter-spacing:-1px;
  color:var(--pn-dark);
}
.pn-site-desc{margin:2px 0 0;font-size:13px;color:var(--pn-gray);}

/* Publicidad al lado del logo, en el encabezado: altura fija, ancho
   automático según su proporción, para no desbordar el header. */
.pn-header-ad{
  height:60px;
  flex:0 1 auto;
  margin-left:auto;
}
.pn-header-ad .pn-ad-wrap{height:100%;margin:0;display:block;}
.pn-header-ad .pn-ad-box{width:auto;height:100%;}
.pn-header-ad .pn-ad-box img{width:auto;height:100%;object-fit:cover;}

/* Barra de categorías: fila propia, separada del logo */
.pn-nav-bar{
  background:var(--pn-dark);
  border-top:1px solid rgba(255,255,255,.08);
}
.pn-nav-bar .pn-nav{width:100%;}
.pn-menu{display:flex;gap:26px;flex-wrap:wrap;padding:0;}
.pn-menu a{
  display:block;
  padding:12px 0;
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:#fff;
}
.pn-menu a:hover{color:#fff;opacity:.75;}

.pn-menu-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
}
.pn-menu-toggle span{width:26px;height:3px;background:var(--pn-dark);}

/* ---------- AD SLOTS ---------- */
/* Los anuncios se suben como una imagen normal (cualquier tamaño) y esta caja
   la recorta/ajusta automáticamente (object-fit:cover) al espacio disponible.
   IMPORTANTE: no tienen ancho fijo en píxeles — siempre ocupan el 100% del
   contenedor donde están (todo el ancho de la página, la columna, o la celda
   de la grilla), así nunca queda un margen vacío a los costados. La altura
   se ajusta sola con aspect-ratio, así que también se adaptan solas en celular.
   Si un espacio no tiene ningún anuncio cargado, PHP no imprime nada para
   las visitas normales (sin dejar huecos en blanco); solo el administrador
   ve un aviso de "espacio libre". */
.pn-ad-wrap{width:100%;display:block;margin:20px 0;}
.pn-container > .pn-ad-wrap:first-child{margin-top:0;}

.pn-ad-box{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:4px;
  background:var(--pn-light-gray);
  display:block;
}
.pn-ad-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* Espacios sueltos (H1, H4, H5, H6): fluidos, mantienen la proporción del
   tamaño elegido pero ocupan el 100% del ancho real disponible. */
.pn-ad-1280x200{aspect-ratio:1280/200;}
.pn-ad-640x200{aspect-ratio:640/200;}
.pn-ad-300x300{aspect-ratio:1/1;}
/* Dentro de una fila (H3 en grilla, cluster) la proporción la define la fila. */
.pn-ad-fluid{width:100%;height:100%;}

.pn-ad-label{
  position:absolute;
  top:6px;
  left:6px;
  z-index:2;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.5px;
  padding:2px 7px;
  border-radius:2px;
}
.pn-ad-placeholder{
  border:1px dashed #c9c9c9;
  background:#fafafa;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px;
}
.pn-ad-placeholder .pn-ad-label{position:static;background:#ddd;color:#777;margin-bottom:8px;}
.pn-ad-placeholder p{font-size:11px;color:#999;margin:0;}

.pn-sidebar-ad-stack{display:flex;flex-direction:column;gap:20px;margin-top:8px;}
.pn-ad-stack-item{margin:0;}
.pn-grid-ad-item{display:flex;align-items:stretch;}
.pn-grid-ad-item .pn-ad-wrap{width:100%;height:100%;margin:0;}
.pn-grid-ad-item .pn-ad-box{height:100%;}

/* Combo profesional: banner grande arriba + fila de avisos/noticias abajo */
.pn-ad-cluster{margin:32px 0;padding:20px 0;background:var(--pn-light-gray);border-radius:6px;}
.pn-ad-cluster > .pn-ad-wrap{padding:0 20px;}
.pn-ad-cluster > .pn-ad-news-row{margin:16px 20px 0;}

/* Fila de publicidad real (H3/H4): solo avisos, nunca fotos sueltas. */
.pn-ad-news-row{
  display:grid;
  gap:16px;
  margin:28px 0;
}
.pn-ad-news-row-4{grid-template-columns:repeat(4, 1fr);}
.pn-ad-news-row-2{grid-template-columns:repeat(2, 1fr);}
.pn-ad-news-row-4 .pn-ad-box{aspect-ratio:1/1;}
.pn-ad-news-row-2 .pn-ad-box{aspect-ratio:640/200;}
@media (max-width:900px){.pn-ad-news-row-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.pn-ad-news-row-4,.pn-ad-news-row-2{grid-template-columns:1fr;}}

.pn-central-ads{display:flex;flex-direction:column;gap:20px;margin:10px 0 20px;}
.pn-central-ads .pn-ad-wrap{margin:0;}

/* ---------- LAYOUT ---------- */
.pn-main{padding:24px 20px 60px;}
.pn-layout{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:36px;
  max-width:1180px;
  margin:0 auto;
}
.pn-content-col{min-width:0;}

.pn-section-title{
  font-family:var(--pn-font);
  font-size:24px;
  border-bottom:2px solid var(--pn-dark);
  padding-bottom:8px;
  margin:30px 0 20px;
}

/* Título de sección + aviso chico a la derecha */
.pn-section-title-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.pn-section-title-row .pn-section-title{
  flex:1 1 auto;
}
.pn-section-title-ad{
  flex:0 0 64px;
  margin-bottom:8px;
}
.pn-section-title-ad .pn-ad-wrap{margin:0;}
@media (max-width:480px){
  .pn-section-title-ad{display:none;}
}

/* ---------- HERO (destacada) ---------- */
.pn-hero{
  position:relative;
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
}
.pn-hero-img-link{display:block;overflow:hidden;border-radius:4px;}
.pn-hero-img{width:100%;height:460px;object-fit:cover;}
.pn-hero-row{
  display:flex;
  align-items:flex-end;
  gap:20px;
  margin-top:-90px;
  position:relative;
  flex-wrap:wrap;
}
.pn-hero-body{
  background:#fff;
  flex:1 1 480px;
  max-width:760px;
  padding:20px 26px;
  border-left:4px solid var(--pn-red);
  box-shadow:0 2px 14px rgba(0,0,0,.08);
}
.pn-hero-ad-box{
  flex:0 0 240px;
  background:#fff;
  padding:10px;
  box-shadow:0 2px 14px rgba(0,0,0,.08);
}
.pn-hero-ad-box:empty{display:none;padding:0;box-shadow:none;}
.pn-hero-ad-box .pn-ad-wrap{margin:0;}
.pn-hero-title{
  font-family:var(--pn-font);
  font-size:34px;
  line-height:1.15;
  margin:6px 0 10px;
}
.pn-hero-title a:hover{color:var(--pn-red);}
.pn-hero-excerpt{color:var(--pn-gray);font-size:15px;margin:0;}

@media (max-width:680px){
  .pn-hero-img{height:260px;}
  .pn-hero-row{margin-top:0;}
  .pn-hero-body{border-left:none;border-top:4px solid var(--pn-red);}
  .pn-hero-ad-box{margin:0 auto;flex-basis:220px;}
  .pn-hero-title{font-size:24px;}
}

.pn-section-block{margin-top:36px;}

/* ---------- VOLANTA / CATEGORÍA ---------- */
.pn-card-cat{
  display:inline-block;
  background:var(--pn-red);
  color:#fff;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  padding:3px 9px;
  border-radius:2px;
  position:absolute;
  margin:10px;
}
.pn-hero-body .pn-card-cat,
.pn-article-header .pn-card-cat{position:static;margin:0 0 8px;}

.pn-volanta{
  display:block;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:var(--pn-red);
  margin-bottom:6px;
}
.pn-volanta-hero{margin-top:8px;}

/* ---------- GRID DE NOTICIAS ---------- */
.pn-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
}
@media (max-width:900px){.pn-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.pn-grid{grid-template-columns:1fr;}}

/* Grilla "ancha": se usa en portada y listados para que las noticias
   cubran todo el ancho disponible. auto-fit (no auto-fill) hace que,
   si hay menos noticias de las que entran en una fila completa, las
   que sí hay se estiren para llenar el espacio en vez de dejar
   columnas vacías (esto es lo que causaba los espacios en blanco). */
.pn-grid-wide{
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
@media (max-width:560px){.pn-grid-wide{grid-template-columns:1fr;}}

.pn-card{
  background:#fff;
  border:1px solid var(--pn-border);
  border-radius:4px;
  overflow:hidden;
  transition:box-shadow .15s ease;
  display:flex;
  flex-direction:column;
  height:100%;
}
.pn-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08);}
.pn-card-img-link{position:relative;display:block;}
.pn-card-img{width:100%;height:190px;object-fit:cover;}
.pn-card-img-placeholder{background:var(--pn-light-gray);height:190px;}
.pn-card-body{padding:14px 16px 18px;display:flex;flex-direction:column;flex:1;}
.pn-card-title{
  font-family:var(--pn-font);
  font-size:19px;
  line-height:1.25;
  margin:0 0 8px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.pn-card-title a:hover{color:var(--pn-red);}
.pn-card-excerpt{
  font-size:14px;
  color:var(--pn-gray);
  margin:0 0 10px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.pn-card-meta{font-size:12px;color:#999;margin-top:auto;padding-top:6px;}

/* ---------- SIDEBAR ---------- */
.pn-sidebar{min-width:0;}
.pn-sidebar-block{margin-bottom:30px;}
.pn-widget-title{
  font-family:var(--pn-font);
  font-size:18px;
  border-bottom:2px solid var(--pn-dark);
  padding-bottom:6px;
  margin:0 0 14px;
}
.pn-mini-list{display:flex;flex-direction:column;gap:14px;}
.pn-mini-item{display:flex;gap:10px;align-items:flex-start;}
.pn-mini-item img{width:64px;height:64px;object-fit:cover;border-radius:3px;flex-shrink:0;}
.pn-mini-title{display:block;font-size:14px;font-weight:600;line-height:1.3;}
.pn-mini-date{font-size:11px;color:#999;}
.pn-sidebar-ad-sticky{position:sticky;top:20px;}

/* ---------- ARTÍCULO (single) ---------- */
.pn-article-header-row{
  display:flex;
  gap:20px;
  align-items:flex-start;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.pn-article-header{flex:1 1 420px;margin-bottom:0;}
.pn-article-header-ad{flex:0 0 240px;margin:0 auto;}
.pn-article-header-ad:empty{display:none;}
.pn-article-header-ad .pn-ad-wrap{margin:0;}
.pn-article-title{
  font-family:var(--pn-font);
  font-size:34px;
  line-height:1.2;
  margin:8px 0 12px;
}
.pn-volanta-article{font-size:13px;}
.pn-article-meta{
  font-size:13px;
  color:var(--pn-gray);
  display:flex;
  gap:8px;
  border-top:1px solid var(--pn-border);
  border-bottom:1px solid var(--pn-border);
  padding:10px 0;
}
.pn-article-hero-img{margin:20px 0;}
.pn-article-hero-img img{width:100%;border-radius:4px;}
.pn-article-hero-img figcaption{font-size:12px;color:#999;margin-top:6px;font-style:italic;}

.pn-article-content{font-size:18px;line-height:1.75;color:#222;}
.pn-article-content p{margin:0 0 20px;}
.pn-article-content img{border-radius:4px;margin:20px 0;}
.pn-article-content h2,
.pn-article-content h3{font-family:var(--pn-font);margin-top:34px;}
.pn-article-content blockquote{
  border-left:4px solid var(--pn-red);
  padding-left:18px;
  color:var(--pn-gray);
  font-style:italic;
  margin:24px 0;
}

.pn-article-tags{margin:24px 0;display:flex;flex-wrap:wrap;gap:8px;}
.pn-tag{
  background:var(--pn-light-gray);
  font-size:12px;
  padding:5px 10px;
  border-radius:20px;
  color:var(--pn-gray);
}

.pn-related{margin-top:40px;}

/* ---------- BOTONES / PAGINACIÓN ---------- */
.pn-btn{
  display:inline-block;
  background:var(--pn-red);
  color:#fff;
  padding:10px 22px;
  border-radius:3px;
  font-weight:700;
}
.pn-btn:hover{background:#960e14;color:#fff;}

.pn-clasificados-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  background:var(--pn-light-gray);
  border-radius:6px;
  padding:20px 24px;
  margin-bottom:24px;
}
.pn-btn-cart{
  background:var(--pn-dark);
  white-space:nowrap;
}
.pn-btn-cart:hover{background:#000;color:#fff;}
.pn-btn-disabled{
  background:#aaa;
  cursor:not-allowed;
  color:#fff;
}
.pn-btn-disabled:hover{background:#aaa;color:#fff;}

.pn-clasificados-productos ul.products{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap:24px !important;
  list-style:none;
  padding:0;
  margin:0;
}
.pn-clasificados-productos ul.products li.product{
  border:1px solid var(--pn-border);
  border-radius:4px;
  padding:14px;
  text-align:left;
}
.pn-clasificados-productos ul.products li.product img{
  border-radius:3px;
  margin-bottom:10px;
}
.pn-clasificados-productos .price{color:var(--pn-red);font-weight:700;}
.pn-clasificados-productos .button{
  display:inline-block;
  margin-top:10px;
  background:var(--pn-dark) !important;
  color:#fff !important;
  border-radius:3px !important;
  padding:8px 16px !important;
  font-size:13px !important;
}

.pn-pagination{margin-top:30px;display:flex;gap:8px;flex-wrap:wrap;}
.pn-pagination a,
.pn-pagination span{
  border:1px solid var(--pn-border);
  padding:6px 12px;
  border-radius:3px;
  font-size:14px;
}
.pn-pagination .current{background:var(--pn-dark);color:#fff;border-color:var(--pn-dark);}

/* ---------- FOOTER ---------- */
.pn-footer{background:var(--pn-dark);color:#ccc;margin-top:50px;}
.pn-footer-inner{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:30px;
  padding:40px 20px;
}
.pn-footer h3{color:#fff;font-family:var(--pn-font);font-size:22px;margin-top:0;}
.pn-footer h4{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:.5px;}
.pn-footer a:hover{color:#fff;}
.pn-footer-col ul{display:flex;flex-direction:column;gap:8px;font-size:14px;}
.pn-footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding:16px 20px;
  font-size:12px;
  text-align:center;
  color:#888;
}

.pn-owner-info{
  background:#0f0f0f;
  color:#777;
  font-size:11px;
  line-height:1.6;
  padding:14px 20px;
  text-align:center;
}
.pn-owner-info p{margin:0;}

@media (max-width:900px){
  .pn-layout{grid-template-columns:1fr;}
  .pn-footer-inner{grid-template-columns:1fr;}
  .pn-menu{
    display:none;
    flex-direction:column;
    width:100%;
    gap:0;
    background:var(--pn-dark);
  }
  .pn-menu.pn-menu-open{display:flex;}
  .pn-menu li{border-bottom:1px solid rgba(255,255,255,.1);}
  .pn-menu a{display:block;padding:12px 4px;color:#fff;}
  .pn-menu-toggle{display:flex;}
  .pn-menu-toggle span{background:var(--pn-dark);}
  .pn-header-main{gap:10px;}
  .pn-header-ad{display:none;}
}