:root{
  --bg:#f7f7f8; --panel:#fff; --border:#e5e7eb; --text:#1a1d24; --muted:#6b7280;
  --accent:#c0392b; --accent-2:#1a1d24; --accent-2-text:#fff;
}
[data-theme="dark"]{
  --bg:#0f1115; --panel:#171a21; --border:#2a2f3a; --text:#e8eaed; --muted:#9aa3b2;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Red de seguridad: si en algún campo de texto (nombre/descripción de
   categoría, título, etc.) llega una palabra larga sin espacios (una URL
   pegada, por ejemplo), el navegador no la corta y estira el contenedor
   entero — eso es lo que hacía que UNA categoría puntual (con una
   palabra así en su nombre o descripción) se viera "ancha, gigante"
   mientras el resto del sitio se veía normal. overflow-wrap soluciona la
   causa; overflow-x en body es una red de seguridad extra para que esto
   nunca vuelva a romper el ancho de toda la página. */
html,body{overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--font-body,Georgia,'Times New Roman',serif);transition:background .15s ease,color .15s ease}
.wrap{width:100%;max-width:1680px;margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{overflow-wrap:anywhere;word-break:break-word}
h1,h2,h3{font-family:var(--font-heading,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif);line-height:1.25;margin:0 0 10px}
img{max-width:100%}

/* --- Header --- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:10px 18px;z-index:100;border-radius:0 0 8px 0;font:600 14px -apple-system,sans-serif}
.skip-link:focus{left:0}

.site-header{background:var(--accent-2);color:var(--accent-2-text);padding:16px 0;position:sticky;top:0;z-index:20}
.header-inner{display:flex;align-items:center;gap:24px;flex-wrap:wrap;position:relative}
.brand{font-family:var(--font-heading,Georgia,serif);font-weight:700;font-size:24px;letter-spacing:.5px;display:flex;align-items:center;gap:10px}
.brand-logo{height:var(--logo-height,40px);width:auto;display:block;max-height:80px}
.main-nav{display:flex;gap:16px;flex-wrap:wrap;font:600 13px/1 -apple-system,sans-serif;text-transform:uppercase;letter-spacing:.5px}
.main-nav a{opacity:.85}
.main-nav a:hover{opacity:1;text-decoration:underline}
.search-form{margin-left:auto;display:flex;gap:8px;align-items:center}
.search-form input{padding:8px 12px;border-radius:20px;border:0;font-size:13px;width:200px}
.theme-toggle{background:rgba(255,255,255,.12);border:0;color:inherit;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.theme-toggle:hover{background:rgba(255,255,255,.22)}
.nav-toggle{display:none;background:none;border:0;color:inherit;font-size:22px;cursor:pointer;padding:4px 8px;margin-left:auto}

/* Logo centrado (estilo diario tradicional): apila el logo, el menú y el
   buscador en filas centradas una debajo de la otra, en vez de todo en
   una sola línea — los botones de menú hamburguesa/tema quedan fijos en
   las esquinas para no romper el centrado. */
.header-inner--center{flex-direction:column;text-align:center}
.header-inner--center .brand{align-self:center}
.header-inner--center .main-nav{justify-content:center;width:100%}
.header-inner--center .search-form{margin-left:0;align-self:center}
.header-inner--center .nav-toggle{position:absolute;left:0;top:0;margin-left:0}
.header-inner--center .theme-toggle{position:absolute;right:0;top:0}

@media (max-width:780px){
  .header-inner{gap:12px}
  .nav-toggle{display:block;order:1}
  .brand{order:0;flex:1}
  .theme-toggle{order:2}
  .main-nav{
    display:none;
    order:5;
    width:100%;
    flex-direction:column;
    gap:0;
    background:var(--accent-2);
    border-top:1px solid rgba(255,255,255,.12);
    margin-top:12px;
  }
  .main-nav.is-open{display:flex}
  .main-nav a{padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.08)}
  .search-form{order:4;width:100%;margin-left:0}
  .search-form input{width:100%}
}

.main-content{padding:40px 0 70px}

.home-section{margin-bottom:48px}
.section-head{border-bottom:3px solid var(--section-accent, var(--accent));margin-bottom:20px;padding-bottom:8px;display:flex;align-items:center;gap:10px}
.section-head h2{font-size:22px;text-transform:uppercase;letter-spacing:.5px;margin:0}

.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch}
.post-grid--compact{grid-template-columns:repeat(4,1fr)}
.post-grid--cols-2{grid-template-columns:repeat(2,1fr)}
.post-grid--cols-3{grid-template-columns:repeat(3,1fr)}
.post-grid--cols-4{grid-template-columns:repeat(4,1fr)}
.post-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;height:100%}
.post-card--featured{grid-column:span 2;grid-row:span 2}
.post-card--featured .post-card__media{aspect-ratio:16/10}
.post-card--featured h3{font-size:26px;-webkit-line-clamp:3}
/* En la grilla compacta ninguna tarjeta se agranda: todas parejas. */
.post-grid--uniform .post-card--featured{grid-column:auto;grid-row:auto}
.post-grid--uniform .post-card--featured .post-card__media{aspect-ratio:4/3}
.post-grid--uniform .post-card--featured h3{font-size:18px;-webkit-line-clamp:2}
.post-card__media{display:block;aspect-ratio:4/3;background:#ddd;overflow:hidden;flex-shrink:0}
.post-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.post-card__placeholder{width:100%;height:100%;background:linear-gradient(135deg,#e5e7eb,#d1d5db)}
.post-card__body{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1}
.post-card__body h2,.post-card__body h3{font-size:var(--news-title-size,18px);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis}
.post-card .excerpt{color:var(--muted);font-size:14px;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;text-overflow:ellipsis}
.badge{display:inline-block;background:var(--accent);color:#fff;font:700 11px/1 -apple-system,sans-serif;text-transform:uppercase;letter-spacing:.5px;padding:4px 8px;border-radius:4px;margin-bottom:8px}
.badge--hero{background:var(--accent-2);color:var(--accent-2-text);margin-right:6px}
/* Si la sección tiene su propio color configurado, los badges de
   categoría DENTRO de ella lo usan en vez del acento general del sitio
   — así cada sección de la portada puede tener identidad visual propia
   (ej: "Deportes" en verde, "Última hora" en rojo) sin que eso afecte
   el badge en la nota individual o en la categoría, que siguen usando
   el acento general. */
.home-section .badge:not(.badge--hero){background:var(--section-accent, var(--accent))}

/* --- Noticia destacada persistente (elegida a mano, arriba de todo) --- */
.home-hero{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center;background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:40px}
.home-hero__media{display:block;aspect-ratio:16/10;background:#ddd;overflow:hidden}
.home-hero__media img{width:100%;height:100%;object-fit:cover;display:block}
.home-hero__body{padding:8px 28px 8px 0}
.home-hero__body h2{font-size:32px;line-height:1.2;margin:6px 0 12px}
.home-hero__body .excerpt{color:var(--muted);font-size:16px;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
@media (max-width:780px){
  .home-hero{grid-template-columns:1fr}
  .home-hero__body{padding:0 20px 20px}
  .home-hero__body h2{font-size:24px}
}

/* --- Formato "Revista": destacada de sección grande + zócalo de títulos --- */
.post-magazine{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;align-items:start}
.post-magazine .post-card--lead .post-card__media{aspect-ratio:16/10}
.post-magazine .post-card--lead h3{font-size:24px;-webkit-line-clamp:3}
/* Con una sola noticia en la sección no hay zócalo de títulos que
   mostrar al lado — antes esto dejaba la columna derecha vacía (un
   hueco en blanco tan ancho como 1/3 de la sección). Con una sola
   noticia, la nota líder pasa a ocupar el ancho completo. */
.post-magazine--solo{grid-template-columns:1fr;max-width:820px}
.headline-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.headline-list li{border-bottom:1px solid var(--border)}
.headline-list li:last-child{border-bottom:0}
.headline-list a{display:flex;align-items:center;gap:12px;padding:12px 14px}
.headline-list a:hover{background:rgba(0,0,0,.03)}
.headline-list img{width:52px;height:52px;object-fit:cover;border-radius:6px;flex-shrink:0}
.headline-list span{font:600 14px/1.35 -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif}
@media (max-width:780px){.post-magazine{grid-template-columns:1fr}}

/* --- Formato "Lista horizontal": imagen a la izquierda, texto a la derecha --- */
.post-list{display:flex;flex-direction:column;gap:16px}
.post-row{display:grid;grid-template-columns:220px 1fr;gap:20px;background:var(--panel);border:1px solid var(--border);border-radius:10px;overflow:hidden;align-items:stretch}
.post-row__media{display:block;aspect-ratio:4/3;background:#ddd;overflow:hidden}
.post-row__media img{width:100%;height:100%;object-fit:cover;display:block}
.post-row__body{padding:14px 18px 14px 0;display:flex;flex-direction:column;justify-content:center;gap:6px}
.post-row__body h3{font-size:19px;margin:0}
.post-row__body .excerpt{color:var(--muted);font-size:14px;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
@media (max-width:600px){
  .post-row{grid-template-columns:110px 1fr}
  .post-row__body{padding:10px 14px 10px 0}
}

/* --- Alineación del texto (configurable en Portada) --- */
.home-align-center .post-card__body,
.home-align-center .post-row__body{text-align:center;align-items:center}
.home-align-center .post-card__body .badge{align-self:center}

/* --- Banners: medidas predefinidas, nunca rompen el diseño --- */
.banner-slot{margin:28px auto;text-align:center}
.banner-slot img{width:100%;height:auto;border-radius:8px;display:block;margin:0 auto}
.banner-slot--leaderboard{max-width:728px}
.banner-slot--rectangle{max-width:300px}
.banner-slot--square{max-width:300px}
.banner-slot--wide{max-width:1160px}

.site-layout{display:grid;grid-template-columns:1fr minmax(260px,320px);gap:40px;align-items:start}
.site-sidebar{position:sticky;top:90px;display:flex;flex-direction:column;gap:16px;width:100%}
/* Separación vertical mínima entre banners laterales (16px, por encima del
   mínimo de 10px pedido). El margin-bottom es un respaldo por si en algún
   punto se insertan banners fuera de este contenedor flex y "gap" no
   aplica; en el flujo normal el que manda es el gap de .site-sidebar. */
.banner-slot--sidebar{max-width:100%;margin:0 0 16px}
.banner-slot--sidebar:last-child{margin-bottom:0}
.banner-slot--sidebar img{border-radius:8px;width:100%}

.post-hero{margin:0 0 28px}
.post-hero img{width:100%;max-height:560px;object-fit:cover;border-radius:10px;display:block}
.post-hero-btn{border:0;padding:0;margin:0;background:none;cursor:zoom-in;display:block;width:100%}

.post-detail{width:100%}
.post-detail h1{font-size:calc(var(--news-title-size,26px) * 1.4);margin-top:8px}
.post-meta{color:var(--muted);font:14px -apple-system,sans-serif;margin-bottom:8px}

.share-buttons{display:flex;align-items:center;gap:8px;margin-bottom:24px;font:600 12px/1 -apple-system,sans-serif}
.share-label{color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-size:11px}
.share-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--panel);border:1px solid var(--border);color:var(--muted)}
.share-btn:hover{color:#fff}
.share-btn--fb:hover{background:#1877f2;border-color:#1877f2}
.share-btn--x:hover{background:#000;border-color:#000}
.share-btn--wa:hover{background:#25d366;border-color:#25d366}

.gallery-title{font-size:20px;margin-top:36px}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0 32px}
.gallery-thumb-btn{border:0;padding:0;margin:0;background:none;cursor:zoom-in;display:block;width:100%;aspect-ratio:1;overflow:hidden;border-radius:8px}
.gallery-thumb-btn img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s ease}
.gallery-thumb-btn:hover img{transform:scale(1.06)}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:1000;display:none;align-items:center;justify-content:center;padding:32px;opacity:0;transition:opacity .2s ease}
.lightbox.is-open{display:flex}
.lightbox.is-visible{opacity:1}
.lightbox img{max-width:100%;max-height:100%;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lightbox-close{position:fixed;top:20px;right:24px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;border:0;font-size:20px;cursor:pointer;z-index:1001}
.lightbox-close:hover{background:rgba(255,255,255,.25)}
.gallery figure{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:8px}
.gallery img{width:100%;height:100%;object-fit:cover}
.post-content{font-size:var(--news-body-size,18px);line-height:1.75}
.post-content p{margin:0 0 20px}
.post-content h2,.post-content h3{font-family:var(--font-heading,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif);margin:32px 0 12px}
.post-content img{border-radius:8px;height:auto}
.post-content-img--zoom{cursor:zoom-in}
.post-content a{color:var(--accent);text-decoration:underline}
.post-content blockquote{margin:24px 0;padding:4px 20px;border-left:4px solid var(--accent);color:var(--muted);font-style:italic}
.post-content ul,.post-content ol{padding-left:24px;margin:0 0 20px}
.post-content table{width:100%;border-collapse:collapse;margin:20px 0}
.post-content td,.post-content th{border:1px solid var(--border);padding:8px 10px}
.post-content iframe{max-width:100%;width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:8px;margin:20px 0;display:block}
.post-content video{max-width:100%;height:auto;border-radius:8px;margin:20px 0;display:block}

.related{width:100%;margin:44px 0 0}
.related .post-grid--compact{grid-template-columns:repeat(2,1fr)}

.comments{width:100%;margin:44px 0 0;font-family:-apple-system,sans-serif}
.comment{border-bottom:1px solid var(--border);padding:16px 0}
.comment time{color:var(--muted);font-size:12px}
.comment-form{margin-top:20px;display:flex;flex-direction:column;gap:12px}
.comment-form label{font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.comment-form input,.comment-form textarea{padding:10px;border:1px solid var(--border);border-radius:8px;font:15px/1.4 inherit;background:var(--panel);color:var(--text)}
.comment-form button{align-self:flex-start;background:var(--accent);color:#fff;border:0;padding:10px 20px;border-radius:8px;font:600 14px -apple-system,sans-serif;cursor:pointer}
.alert{padding:10px 14px;border-radius:8px;font:14px -apple-system,sans-serif;margin-bottom:14px}
.alert-ok{background:#e7f7ee;color:#166534}
.alert-error{background:#fdecec;color:#991b1b}

.breadcrumbs{font:13px -apple-system,sans-serif;color:var(--muted);margin-bottom:18px;overflow-wrap:anywhere}
.breadcrumbs a{color:var(--muted);text-decoration:underline}
.breadcrumbs a:hover{color:var(--accent)}
.breadcrumbs span[aria-current]{color:var(--text)}

.category-header{margin-bottom:28px;font-family:-apple-system,sans-serif;max-width:100%}
.category-header h1{overflow-wrap:anywhere;word-break:break-word}
.muted{color:var(--muted)}

/* --- Paginado: antes listaba un número por cada página sin límite, lo
   que en categorías con muchas páginas se veía enorme y desbordaba en
   mobile. Ahora es una tira compacta y centrada, con flechas y "…"
   cuando hay muchas páginas, del mismo alto que un botón normal. --- */
.pagination{display:flex;flex-wrap:wrap;align-items:center;gap:6px;justify-content:center;margin:36px auto;font-family:-apple-system,sans-serif;font-size:14px;max-width:560px}
.pagination a,.pagination span.ellipsis{min-width:38px;height:38px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;color:var(--text)}
.pagination span.ellipsis{border:0;color:var(--muted);min-width:20px}
.pagination a:hover{border-color:var(--accent-2)}
.pagination a.active{background:var(--accent-2);color:var(--accent-2-text);border-color:var(--accent-2);font-weight:700}
.pagination a.pagination-arrow{font-weight:700}
.pagination a.is-disabled{opacity:.35;pointer-events:none}

.site-footer{background:var(--accent-2);color:var(--muted);padding:28px 0;font:13px -apple-system,sans-serif;text-align:center}

/* --- Marca institucional VEKTOR (debajo del footer) ---
   El logo ahora es un PNG con transparencia real, así que ya no hace
   falta forzar un fondo negro atrás para "tapar" el rectángulo opaco
   que tenía antes — eso era un parche. Ahora se pinta con el mismo
   color que el footer de arriba, para que se vea como una sola franja
   continua en vez de dos barras oscuras distintas apiladas. --- */
.footer-brand{
  background:var(--accent-2);
  text-align:center;
  padding:24px 0 30px;
}
.footer-brand img{
  width:150px;
  height:auto;
  display:inline-block;
  border:0;
  box-shadow:none;
  image-rendering:auto;
  image-rendering:-webkit-optimize-contrast;
  pointer-events:none;
}
.footer-brand-tagline{
  margin:10px 0 0;
  color:#8a8f99;
  font:600 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  text-transform:uppercase;
  letter-spacing:.8px;
}
@media (max-width:600px){
  .footer-brand img{width:110px}
}

@media (max-width:860px){
  .wrap{padding:0 18px}
  .post-grid,.post-grid--compact,.post-grid--cols-2,.post-grid--cols-3,.post-grid--cols-4{grid-template-columns:repeat(2,1fr)}
  .post-card--featured{grid-column:span 2}
  .post-grid--uniform .post-card--featured{grid-column:auto}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .site-layout{grid-template-columns:1fr}
  .site-sidebar{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;max-width:100%}
  .post-row{grid-template-columns:160px 1fr}
}
@media (max-width:560px){
  .wrap{padding:0 14px}
  .post-grid,.post-grid--compact,.post-grid--cols-2,.post-grid--cols-3,.post-grid--cols-4{grid-template-columns:1fr}
  .post-card--featured{grid-column:span 1}
}