/*
Theme Name: Acento Prisma
Theme URI: https://factoriadigital.store
Author: Factoría Digital
Author URI: https://factoriadigital.store
Description: Tema vanguardista en bloques para Acento Noticias. Diseño encajonado, simétrico y minimalista con imágenes protagonistas. Cada categoría con color e imagotipo propio. Hero alimentado por la categoría Principal con anti-repetición global.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: acento-prisma
*/

/* ============ TOKENS ============ */
:root{
  --canvas:#F7F7F5;
  --frame:#101014;
  --ink:#14141A;
  --ink-soft:#4A4A55;
  --line:#E3E3DE;
  --card:#FFFFFF;
  --acento:#E8442E;            /* rojo acento: la tilde de la marca */
  --c-principal:#14141A;
  --c-analisis:#6C3FC5;        /* morado prisma */
  --c-cdmx:#E0218A;            /* rosa mexicano */
  --c-nacional:#1B7A3D;        /* verde */
  --c-estados:#1857C2;         /* azul cobalto */
  --c-turismo:#0FA3A8;         /* turquesa */
  --c-deportes:#F27405;        /* naranja */
  --font-display:'Archivo', system-ui, sans-serif;
  --font-body:'Instrument Sans', system-ui, sans-serif;
  --font-mono:'Space Mono', monospace;
  --box:1300px;
  --radius:2px;
  --gap:28px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  background:var(--frame);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--acento);outline-offset:2px}

/* ============ CAJA GENERAL ============ */
.prisma-box{
  max-width:var(--box);
  margin:0 auto;
  background:var(--canvas);
  min-height:100vh;
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 30px 80px rgba(0,0,0,.55);
}
.wrap{max-width:1220px;margin:0 auto;padding:0 32px}

/* ============ BARRA PRISMA (firma) ============ */
.prisma-strip{display:flex;height:6px;width:100%}
.prisma-strip span{flex:1}
.prisma-strip .s1{background:var(--c-analisis)}
.prisma-strip .s2{background:var(--c-cdmx)}
.prisma-strip .s3{background:var(--c-nacional)}
.prisma-strip .s4{background:var(--c-estados)}
.prisma-strip .s5{background:var(--c-turismo)}
.prisma-strip .s6{background:var(--c-deportes)}
.prisma-strip .s0{background:var(--acento)}

/* ============ HEADER ============ */
.site-head{background:var(--card);border-bottom:2px solid var(--ink)}
.head-top{display:flex;align-items:baseline;justify-content:space-between;padding:26px 0 18px}
.brand{display:inline-flex;align-items:baseline;gap:2px;font-family:var(--font-display);font-weight:900;font-size:clamp(30px,4.4vw,46px);letter-spacing:-0.03em;line-height:1;color:var(--ink)}
.brand .tilde{color:var(--acento);font-weight:900;transform:translateY(-6px) rotate(0deg);display:inline-block;font-size:1.15em;margin-right:2px}
.brand .dot{color:var(--acento)}
.brand img{max-height:56px;width:auto}
.head-date{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.site-tagline{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);padding-bottom:14px}

/* NAV */
.site-nav{border-top:1px solid var(--line)}
.nav-list{list-style:none;display:flex;flex-wrap:wrap;gap:4px}
.nav-list a{
  display:block;padding:13px 16px;
  font-family:var(--font-display);font-weight:700;font-size:14px;
  letter-spacing:.04em;text-transform:uppercase;
  border-bottom:4px solid transparent;transition:border-color .18s, color .18s;
}
.nav-list a:hover{border-bottom-color:var(--nav-c, var(--acento));color:var(--nav-c, var(--acento))}
.nav-toggle{display:none;background:none;border:2px solid var(--ink);font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:8px 14px;margin:12px 0;cursor:pointer}

/* ============ BLOQUES DE SECCIÓN ============ */
.bloque{padding:44px 0 52px;border-bottom:1px solid var(--line)}
.bloque-head{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.bloque-head .imagotipo{width:44px;height:44px;flex:none}
.bloque-title{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(22px,3vw,30px);letter-spacing:-0.02em;text-transform:uppercase;
  color:var(--bc, var(--ink));
}
.bloque-rule{flex:1;height:3px;background:var(--bc, var(--ink));opacity:.9}
.bloque-more{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--bc, var(--ink));border:1.5px solid var(--bc, var(--ink));padding:7px 14px;white-space:nowrap;transition:background .18s,color .18s}
.bloque-more:hover{background:var(--bc, var(--ink));color:#fff}

/* Colores por bloque */
.bloque--principal{--bc:var(--c-principal)}
.bloque--analisis{--bc:var(--c-analisis)}
.bloque--cdmx{--bc:var(--c-cdmx)}
.bloque--nacional-estados{--bc:var(--c-nacional)}
.bloque--turismo{--bc:var(--c-turismo)}
.bloque--deportes{--bc:var(--c-deportes)}

/* ============ GRIDS SIMÉTRICOS ============ */
.grid{display:grid;gap:var(--gap)}
.grid-hero{grid-template-columns:2fr 1fr}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.stack{display:grid;gap:var(--gap)}

/* ============ TARJETAS ============ */
.card{background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(16,16,20,.12)}
.card-media{position:relative;overflow:hidden;aspect-ratio:16/9;background:#E9E9E4}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.card:hover .card-media img{transform:scale(1.04)}
.card-media .no-img{display:flex;align-items:center;justify-content:center;height:100%;color:var(--line)}
.card-media .no-img svg{width:64px;height:64px;opacity:.6}
/* tilde firma sobre la imagen */
.card-media::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:5px;
  background:var(--cc, var(--acento));transition:width .3s ease;
}
.card:hover .card-media::after{width:100%}
.card-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.cat-pill{
  align-self:flex-start;
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--cc, var(--ink));
  padding:4px 10px;
}
.card-title{font-family:var(--font-display);font-weight:800;letter-spacing:-0.015em;line-height:1.22}
.card-title a:hover{color:var(--cc, var(--acento))}
.card-excerpt{color:var(--ink-soft);font-size:14.5px;line-height:1.55}
.card-meta{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);letter-spacing:.06em;margin-top:auto}

/* tamaños */
.card--xl .card-title{font-size:clamp(24px,3vw,34px)}
.card--xl .card-excerpt{font-size:16px}
.card--lg .card-title{font-size:clamp(19px,2.2vw,24px)}
.card--md .card-title{font-size:17px}
.card--sm .card-title{font-size:15.5px}
.card--sm .card-excerpt{font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* colores de tarjeta por categoría */
.cc-principal{--cc:var(--c-principal)}
.cc-analisis-y-coyuntura{--cc:var(--c-analisis)}
.cc-cdmx{--cc:var(--c-cdmx)}
.cc-nacional{--cc:var(--c-nacional)}
.cc-estados{--cc:var(--c-estados)}
.cc-turismo{--cc:var(--c-turismo)}
.cc-deportes{--cc:var(--c-deportes)}

/* HERO */
.bloque--principal{padding-top:36px}
.hero-side{display:grid;gap:var(--gap);grid-template-rows:1fr 1fr}

/* ============ ZONAS DE ANUNCIO ============ */
.ad-zone{padding:26px 0;border-bottom:1px solid var(--line);background:repeating-linear-gradient(-45deg,#F2F2EE 0 14px,#F7F7F5 14px 28px)}
.ad-inner{min-height:110px;display:flex;align-items:center;justify-content:center}
.ad-fallback{
  width:100%;min-height:110px;border:2px dashed var(--ink-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  font-family:var(--font-display);font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);font-size:20px;
}
.ad-fallback small{font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:.08em}
.ad-fallback:hover{color:var(--acento);border-color:var(--acento)}

/* ============ SINGLE / PÁGINAS ============ */
.entry{padding:48px 0 60px}
.entry-inner{max-width:820px;margin:0 auto}
.entry-kicker{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.entry-title{font-family:var(--font-display);font-weight:900;font-size:clamp(28px,4.4vw,46px);letter-spacing:-0.025em;line-height:1.12;margin-bottom:16px}
.entry-meta{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);letter-spacing:.06em;display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px;padding-bottom:18px;border-bottom:3px solid var(--cc, var(--ink))}
.entry-media{margin:0 0 28px}
.entry-media img{width:100%}
.entry-media figcaption{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);padding-top:8px}
.entry-content{font-size:18px}
.entry-content p{margin-bottom:1.35em}
.entry-content h2,.entry-content h3{font-family:var(--font-display);font-weight:800;letter-spacing:-0.015em;margin:1.4em 0 .6em}
.entry-content a{color:var(--acento);border-bottom:1px solid var(--acento)}
.entry-content blockquote{border-left:5px solid var(--cc, var(--acento));padding:10px 0 10px 22px;margin:1.6em 0;font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--ink)}
.entry-content img{margin:1.2em 0}
.entry-content ul,.entry-content ol{margin:0 0 1.35em 1.4em}

/* COMPARTIR */
.share-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:34px 0 8px;padding-top:22px;border-top:1px solid var(--line)}
.share-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-right:4px}
.share-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:700;font-size:13px;
  padding:9px 16px;color:#fff;transition:opacity .15s, transform .15s;
}
.share-btn:hover{opacity:.88;transform:translateY(-1px)}
.share-btn svg{width:15px;height:15px;fill:currentColor}
.share-fb{background:#1877F2}
.share-x{background:#111}
.share-wa{background:#25D366}

/* RELACIONADAS */
.related{margin-top:46px;padding-top:30px;border-top:2px solid var(--ink)}
.related h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:20px;margin-bottom:20px}

/* ARCHIVO / LISTADOS */
.archive-head{padding:42px 0 8px}
.archive-title{font-family:var(--font-display);font-weight:900;font-size:clamp(26px,3.6vw,38px);letter-spacing:-0.02em;text-transform:uppercase;color:var(--cc, var(--ink))}
.archive-desc{color:var(--ink-soft);max-width:700px;margin-top:8px}
.archive-grid{padding:30px 0 54px}

/* PAGINACIÓN */
.pagination{display:flex;gap:8px;justify-content:center;padding:10px 0 50px;font-family:var(--font-mono);font-size:13px}
.pagination .page-numbers{border:1.5px solid var(--ink);padding:8px 14px}
.pagination .page-numbers.current,.pagination .page-numbers:hover{background:var(--ink);color:#fff}

/* 404 / BÚSQUEDA */
.big-404{font-family:var(--font-display);font-weight:900;font-size:clamp(80px,16vw,180px);letter-spacing:-0.05em;line-height:1;color:var(--acento)}
.search-form{display:flex;gap:0;max-width:560px;margin:22px 0}
.search-form input[type=search]{flex:1;border:2px solid var(--ink);padding:12px 16px;font-family:var(--font-body);font-size:15px;background:#fff}
.search-form button{background:var(--ink);color:#fff;border:2px solid var(--ink);padding:12px 22px;font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.06em;cursor:pointer}
.search-form button:hover{background:var(--acento);border-color:var(--acento)}

/* ============ FOOTER ============ */
.site-foot{background:var(--frame);color:#C9C9CF;margin-top:0}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding:52px 0 40px}
.foot-brand{font-family:var(--font-display);font-weight:900;font-size:28px;color:#fff;letter-spacing:-0.03em}
.foot-brand .tilde{color:var(--acento)}
.foot-tagline{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-top:10px;color:#8B8B95}
.foot-col h3{font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:9px}
.foot-col a{font-size:14px;color:#C9C9CF}
.foot-col a:hover{color:#fff}
.foot-contact li{font-size:14px;font-family:var(--font-mono);font-size:12.5px}
.foot-bottom{border-top:1px solid #26262E;padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11.5px;color:#8B8B95}
.foot-bottom a{color:#C9C9CF}
.foot-bottom a:hover{color:#fff}

/* ============ WIDGETS EN ADS ============ */
.ad-inner .widget{width:100%;text-align:center}

/* ============ RESPONSIVE ============ */
@media (max-width:1020px){
  .grid-hero{grid-template-columns:1fr}
  .hero-side{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .wrap{padding:0 18px}
  .grid-2,.grid-3,.hero-side{grid-template-columns:1fr}
  .nav-toggle{display:inline-block}
  .nav-list{display:none;flex-direction:column;padding-bottom:12px}
  .nav-list.open{display:flex}
  .nav-list a{border-bottom:none;border-left:4px solid transparent}
  .nav-list a:hover{border-left-color:var(--nav-c, var(--acento))}
  .head-top{flex-direction:column;gap:6px;align-items:flex-start}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .grid-4{grid-template-columns:1fr}
}

/* WP core */
.alignleft{float:left;margin:0 20px 12px 0}
.alignright{float:right;margin:0 0 12px 20px}
.aligncenter{margin-left:auto;margin-right:auto}
.wp-caption{max-width:100%}
.wp-caption-text{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft)}
.screen-reader-text{clip:rect(1px,1px,1px,1px);position:absolute!important;height:1px;width:1px;overflow:hidden}
.sticky{display:block}
.bypostauthor{display:block}