/*
Theme Name: FULETEONEWS Urbano
Theme URI: https://fuleteonews.com
Author: FULETEONEWS
Description: Revista de noticias con estilo urbano en rojo y plateado. Arranca en modo oscuro y trae un botón para pasar a modo claro (blanco). Portada con nota principal, "Lo más visto", secciones por categoría, banda roja destacada, lista de notas y boletín. Adaptado a PC y celular.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fuleteonews
Tags: news, blog, custom-menu, featured-images, threaded-comments, dark, translation-ready
*/

/* ---------- Colores: oscuro por defecto ---------- */
:root{
  --asfalto:#121113;      /* fondo */
  --concreto:#1c1a1d;     /* superficies */
  --linea:#353036;        /* divisores */
  --plata:#c9c7cc;        /* texto secundario */
  --plata-hi:#f4f3f5;     /* texto principal */
  --pie:#0b0a0c;
  --pie-txt:#8a878e;
  --rojo:#e3122b;
  --rojo-osc:#8f0a1b;
  --cromo:linear-gradient(180deg,#ffffff 0%,#d9d8dc 38%,#8a878e 52%,#e6e5e8 70%,#a19ea5 100%);
  --cromo-sombra:#8f0a1b;
  --trama:rgba(0,0,0,.9);
  --display:"Anton","Impact","Arial Narrow",sans-serif;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --tag:"Permanent Marker","Comic Sans MS",cursive;
  color-scheme:dark;
}
/* ---------- Modo claro (botón) ---------- */
:root[data-theme="light"]{
  --asfalto:#f5f4f6;
  --concreto:#ffffff;
  --linea:#d9d7dc;
  --plata:#58555d;
  --plata-hi:#141216;
  --pie:#e9e8eb;
  --pie-txt:#6b6870;
  --rojo:#d7102a;
  --rojo-osc:#8f0a1b;
  --cromo:linear-gradient(180deg,#5b5960 0%,#2a282d 45%,#76737b 55%,#3a383d 75%,#1d1b1f 100%);
  --cromo-sombra:rgba(215,16,42,.35);
  --trama:rgba(0,0,0,.55);
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--asfalto);color:var(--plata-hi);font-family:var(--body);font-size:16px;line-height:1.5;transition:background-color .25s,color .25s}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--rojo);outline-offset:3px}
h1,h2,h3{text-wrap:balance;margin:0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;left:8px;top:8px;z-index:99;width:auto;height:auto;clip:auto;background:var(--rojo);color:#fff;padding:8px 12px}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ---------- Barra de última hora ---------- */
.ticker{background:var(--rojo);color:#fff;font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:13px;overflow:hidden}
.ticker .wrap{display:flex;align-items:center;gap:14px;padding-block:7px}
.ticker b{background:#0d0c0e;padding:2px 8px;flex:none}
.ticker-track{overflow:hidden;flex:1;min-width:0;white-space:nowrap}
.ticker-track span{display:inline-block;animation:corre 45s linear infinite;padding-left:100%}
.ticker-track a:hover{text-decoration:underline}
.ticker-track i{font-style:normal;opacity:.6;padding-inline:10px}
@keyframes corre{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.ticker-track span{animation:none;padding-left:0}}

/* ---------- Cabecera ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--asfalto);border-bottom:1px solid var(--linea);transition:background-color .25s}
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:0;position:relative}}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.logo{font-family:var(--display);font-size:clamp(34px,7vw,64px);line-height:.9;letter-spacing:.01em;
  background:var(--cromo);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 var(--cromo-sombra));white-space:nowrap}
.logo em{font-style:normal;background:linear-gradient(180deg,#ff5a6b,#e3122b 55%,#9b0b1d);-webkit-background-clip:text;background-clip:text}
.custom-logo-link img{max-height:64px;width:auto;display:block}
.cab-der{display:flex;align-items:center;gap:14px}
.fecha{font-family:var(--cond);color:var(--plata);text-transform:uppercase;letter-spacing:.08em;font-size:13px;text-align:right}
.botones{display:flex;gap:8px}
.ico{background:none;border:1px solid var(--linea);color:var(--plata-hi);width:40px;height:40px;display:grid;place-items:center;cursor:pointer;border-radius:2px;padding:0}
.ico:hover{border-color:var(--rojo);color:var(--rojo)}
.ico svg{width:19px;height:19px}
.ico .ir-oscuro{display:none}
:root[data-theme="light"] .ico .ir-oscuro{display:block}
:root[data-theme="light"] .ico .ir-claro{display:none}
.buscador{border-top:1px solid var(--linea);padding-block:12px}
.nav-principal{border-top:1px solid var(--linea)}
.nav-principal ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.nav-principal ul::-webkit-scrollbar{display:none}
.nav-principal ul ul{display:none}
.nav-principal a{display:block;padding:11px 12px;font:600 15px var(--cond);text-transform:uppercase;letter-spacing:.08em;color:var(--plata);white-space:nowrap;border-bottom:3px solid transparent}
.nav-principal a:hover,.nav-principal .current-menu-item>a,.nav-principal .current-cat>a{color:var(--plata-hi);border-color:var(--rojo)}

/* ---------- Búsqueda ---------- */
.search-form{display:flex;gap:8px;max-width:560px;margin:0 auto}
.search-form label{flex:1}
.search-field{width:100%;padding:11px 12px;border:1px solid var(--linea);background:var(--concreto);color:var(--plata-hi);font:16px var(--body)}
.search-submit{background:var(--rojo);color:#fff;border:0;padding:0 18px;font:700 15px var(--cond);text-transform:uppercase;letter-spacing:.1em;cursor:pointer}

/* ---------- Imágenes ---------- */
.img{position:relative;display:block;aspect-ratio:16/10;max-width:100%;overflow:hidden;background:var(--concreto);isolation:isolate}
.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease,filter .4s}
a:hover .img img,.img:hover img{transform:scale(1.04);filter:saturate(1.15)}
.ph::before{content:"";position:absolute;inset:0;background:var(--g);z-index:-2}
.ph::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;background-image:radial-gradient(var(--trama) 1.1px,transparent 1.4px);background-size:6px 6px;mix-blend-mode:multiply}
.ph .marca{position:absolute;right:-4%;bottom:-12%;font-family:var(--display);font-size:clamp(60px,12vw,170px);line-height:.8;color:rgba(255,255,255,.14);text-transform:uppercase;white-space:nowrap}
.spray{position:absolute;left:5%;top:10%;font-family:var(--tag);font-size:clamp(18px,3vw,34px);color:rgba(255,255,255,.85);transform:rotate(-6deg);z-index:2;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.g0{--g:radial-gradient(circle at 70% 30%,#ff3b52 0,#9b0b1d 35%,#1a0b0e 80%)}
.g1{--g:linear-gradient(135deg,#d7d5da 0%,#77737c 45%,#1d1b1f 100%)}
.g2{--g:conic-gradient(from 200deg at 30% 70%,#e3122b,#2a2629,#bdbac0,#e3122b)}
.g3{--g:linear-gradient(160deg,#2b282d 0%,#5e0815 60%,#e3122b 100%)}
.g4{--g:radial-gradient(ellipse at 20% 20%,#f1f0f3 0,#8f8b93 30%,#211e22 75%)}
.g5{--g:linear-gradient(200deg,#e3122b 0%,#3a0610 55%,#0f0d10 100%)}
@media (prefers-reduced-motion:reduce){.img img{transition:none}}

.kicker{font:700 13px var(--cond);text-transform:uppercase;letter-spacing:.12em;color:var(--rojo)}
.meta{font:500 13px var(--cond);text-transform:uppercase;letter-spacing:.06em;color:var(--plata)}

/* ---------- Portada ---------- */
.portada{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:32px;padding-block:28px}
.hero{display:grid;gap:14px;align-content:start}
.hero .img{aspect-ratio:16/9}
.hero h1,.hero h2{font-family:var(--display);font-weight:400;font-size:clamp(32px,5vw,58px);line-height:1.02;text-transform:uppercase}
.hero h2 a:hover,.hero h1 a:hover{color:var(--rojo)}
.hero p{margin:0;color:var(--plata);font-size:18px;max-width:62ch}
.trending{border-left:1px solid var(--linea);padding-left:28px;min-width:0}
.trending h2,.sec-head h2,.sec-head h1{font-family:var(--display);font-weight:400;font-size:28px;text-transform:uppercase;letter-spacing:.02em;display:flex;align-items:center;gap:10px}
.trending h2::before,.sec-head h2::before,.sec-head h1::before{content:"";flex:none;width:14px;height:14px;background:var(--rojo);transform:skewX(-14deg)}
.trending ol{list-style:none;margin:14px 0 0;padding:0;counter-reset:t;display:grid}
.trending li{counter-increment:t;display:grid;grid-template-columns:46px 1fr;gap:12px;padding-block:14px;border-bottom:1px solid var(--linea)}
.trending li::before{content:counter(t);font-family:var(--display);font-size:40px;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--plata)}
.trending li:first-child::before{-webkit-text-stroke-color:var(--rojo)}
.trending li a{font-weight:600;font-size:17px;line-height:1.3}
.trending li a:hover{color:var(--rojo)}

/* ---------- Secciones ---------- */
.seccion{padding-block:28px;border-top:1px solid var(--linea)}
.seccion.sin-borde{border-top:0}
.sec-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.sec-head a{font:600 14px var(--cond);text-transform:uppercase;letter-spacing:.1em;color:var(--plata)}
.sec-head a:hover{color:var(--rojo)}
.desc-archivo{color:var(--plata);margin:-6px 0 20px;max-width:70ch}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{display:grid;gap:10px;align-content:start}
.card h3{font-family:var(--cond);font-weight:700;font-size:22px;line-height:1.12}
.card:hover h3{color:var(--rojo)}

/* ---------- Banda roja destacada ---------- */
.banda{background:linear-gradient(100deg,#8f0a1b,#e3122b);margin-block:12px;color:#fff}
.banda .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:center;padding-block:36px}
.banda .img{aspect-ratio:16/9;border:3px solid #f4f3f5}
.play{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;z-index:3}
.play::after{content:"";border-left:22px solid #e3122b;border-block:14px solid transparent;margin-left:6px}
.banda .kicker{color:#fff;opacity:.85}
.banda h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.4vw,52px);text-transform:uppercase;line-height:1.02;margin-block:8px 12px}
.banda p{margin:0 0 16px;color:#ffe3e6;max-width:52ch}
.btn{display:inline-block;background:#0f0d10;color:#fff;font:700 15px var(--cond);text-transform:uppercase;letter-spacing:.1em;padding:12px 20px;border:0;cursor:pointer}
.btn:hover{background:#fff;color:#e3122b}

/* ---------- Lista + boletín ---------- */
.mix{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:32px}
.lista{display:grid;gap:20px}
.fila{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;align-items:center}
.fila .img{aspect-ratio:4/3}
.fila h3{font-family:var(--cond);font-weight:700;font-size:24px;line-height:1.1;margin-block:4px 6px}
.fila:hover h3{color:var(--rojo)}
.fila p{margin:0;color:var(--plata);font-size:15px}
.boletin,.widget{background:var(--concreto);border:1px solid var(--linea);border-top:4px solid var(--rojo);padding:24px}
.boletin{align-self:start}
.boletin h3,.widget-title{font-family:var(--display);font-weight:400;font-size:30px;text-transform:uppercase;line-height:1;margin:0 0 10px}
.boletin p{color:var(--plata);margin:10px 0 16px}
.boletin .btn{background:var(--rojo)}
.widget{margin-bottom:20px}
.widget ul{margin:0;padding-left:18px}
.widget input[type=email],.widget input[type=text]{width:100%;padding:12px;background:var(--asfalto);border:1px solid var(--linea);color:var(--plata-hi);font:16px var(--body);margin-bottom:10px}
.widget button,.widget input[type=submit]{background:var(--rojo);color:#fff;border:0;padding:12px 18px;font:700 15px var(--cond);text-transform:uppercase;letter-spacing:.1em;cursor:pointer}

/* ---------- Nota individual ---------- */
.nota{padding-block:32px}
.nota-cab{max-width:900px;margin:0 auto;display:grid;gap:14px}
.nota-cab h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,5.4vw,64px);line-height:1.02;text-transform:uppercase}
.nota-cab .bajada{color:var(--plata);font-size:20px;margin:0}
.nota-img{max-width:1100px;margin:26px auto 0}
.nota-img .img{aspect-ratio:16/9}
.nota-img figcaption{font:500 13px var(--cond);text-transform:uppercase;letter-spacing:.06em;color:var(--plata);margin-top:8px}
.entry{max-width:720px;margin:30px auto 0;font-size:18px;line-height:1.7}
.entry>*{margin-block:0 1.1em}
.entry h2{font-family:var(--cond);font-weight:700;font-size:30px;line-height:1.1;margin-top:1.4em}
.entry h3{font-family:var(--cond);font-weight:700;font-size:24px;margin-top:1.2em}
.entry a{color:var(--rojo);text-decoration:underline;text-underline-offset:2px}
.entry blockquote{margin-inline:0;padding:4px 0 4px 22px;border-left:5px solid var(--rojo);font-family:var(--cond);font-weight:700;font-size:26px;line-height:1.2}
.entry img,.entry figure{max-width:100%;height:auto}
.entry figure{margin-inline:0}
.entry figcaption{font-size:13px;color:var(--plata)}
.entry table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}
.entry td,.entry th{border:1px solid var(--linea);padding:8px}
.etiquetas{max-width:720px;margin:24px auto 0;display:flex;flex-wrap:wrap;gap:8px}
.etiquetas a{font:600 14px var(--cond);text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--linea);padding:5px 12px}
.etiquetas a:hover{border-color:var(--rojo);color:var(--rojo)}
.compartir{max-width:720px;margin:24px auto 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.compartir span{font:700 14px var(--cond);text-transform:uppercase;letter-spacing:.1em}
.compartir a{font:700 14px var(--cond);text-transform:uppercase;letter-spacing:.06em;background:var(--concreto);border:1px solid var(--linea);padding:7px 14px}
.compartir a:hover{background:var(--rojo);border-color:var(--rojo);color:#fff}

/* ---------- Comentarios ---------- */
.comentarios{max-width:720px;margin:32px auto 0}
.comentarios ol{list-style:none;padding:0}
.comentarios .children{padding-left:24px}
.comentarios .comment-body{border-bottom:1px solid var(--linea);padding-block:14px}
.comentarios .avatar{border-radius:50%;float:left;margin-right:10px}
.comment-form input:not([type=submit]):not([type=checkbox]),.comment-form textarea{width:100%;padding:10px;border:1px solid var(--linea);background:var(--concreto);color:var(--plata-hi);font:16px var(--body)}
.comment-form .submit{background:var(--rojo);color:#fff;border:0;padding:12px 20px;font:700 15px var(--cond);text-transform:uppercase;letter-spacing:.1em;cursor:pointer}

/* ---------- Paginación ---------- */
.paginacion{margin-top:28px}
.paginacion .nav-links{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.paginacion .page-numbers{display:inline-block;min-width:40px;text-align:center;padding:8px 10px;border:1px solid var(--linea);font:700 16px var(--cond)}
.paginacion .current,.paginacion a:hover{background:var(--rojo);border-color:var(--rojo);color:#fff}
.vacio{padding-block:48px;text-align:center;color:var(--plata);display:grid;gap:16px;justify-items:center}
.vacio .grande{font-family:var(--display);font-size:120px;line-height:1;color:var(--rojo)}

/* ---------- Pie ---------- */
.site-footer{border-top:1px solid var(--linea);margin-top:28px;background:var(--pie)}
.site-footer .wrap{padding-block:32px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:center}
.site-footer .logo{font-size:36px}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.site-footer a:not(.logo){font:600 14px var(--cond);text-transform:uppercase;letter-spacing:.08em;color:var(--plata)}
.site-footer a:not(.logo):hover{color:var(--rojo)}
.site-footer small{color:var(--pie-txt);width:100%;font-size:13px}

/* ---------- Tablet ---------- */
@media (max-width:980px){
  .portada,.mix{grid-template-columns:1fr}
  .trending{border-left:0;padding-left:0;border-top:1px solid var(--linea);padding-top:20px}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .banda .wrap{grid-template-columns:1fr}
}
/* ---------- Celular ---------- */
@media (max-width:640px){
  .fecha{display:none}
  .grid4,.grid3{grid-template-columns:1fr}
  .grid4 .card{grid-template-columns:120px minmax(0,1fr);align-items:center;gap:6px 14px}
  .grid4 .card .img{aspect-ratio:1;grid-row:span 3}
  .grid4 .card .img .marca,.grid4 .card .spray{display:none}
  .card h3{font-size:19px}
  .fila{grid-template-columns:110px minmax(0,1fr);align-items:start}
  .fila .img{aspect-ratio:1}
  .fila .img .marca{display:none}
  .fila h3{font-size:19px}
  .fila p{display:none}
  .hero p{font-size:16px}
  .entry{font-size:17px}
  .ico{width:36px;height:36px}
}