/*
Theme Name: Canal Cacique Bonao
Theme URI: https://www.youtube.com/@julianvasquez2040
Author: Julián Vásquez
Description: Tema oficial de Canal Cacique Bonao #1 — canal comunitario e informativo de Bonao, provincia Monseñor Nouel, República Dominicana. Página de inicio con videos de YouTube, noticias automáticas desde las entradas, cintillo informativo, redes sociales y contacto.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: canal-cacique-bonao
Tags: news, one-column, custom-colors
*/

:root{
  --rojo:#E01F2D;
  --rojo-oscuro:#B0121E;
  --azul:#143A8C;
  --azul-oscuro:#0C2459;
  --negro:#121212;
  --blanco:#FAFAF7;
  --gris:#5C5C5C;
  --display:'Anton',sans-serif;
  --cuerpo:'Public Sans',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--cuerpo);color:var(--negro);background:var(--blanco);line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.5px;text-transform:uppercase}
.contenedor{max-width:1100px;margin:0 auto;padding:0 20px}
:focus-visible{outline:3px solid var(--rojo);outline-offset:3px}

/* ===== Navegación ===== */
.nav-ccb{position:sticky;top:0;z-index:50;background:var(--negro);color:#fff;border-bottom:4px solid var(--rojo)}
.nav-inner{display:flex;align-items:center;gap:14px;padding:10px 20px;max-width:1100px;margin:0 auto}
.nav-inner img{width:46px;height:46px;border-radius:50%;border:2px solid var(--rojo)}
.nav-marca{font-family:var(--display);font-size:1.15rem;letter-spacing:1px;text-decoration:none;color:#fff}
.nav-marca span{color:var(--rojo)}
.nav-links{margin-left:auto;display:flex;gap:22px;font-size:.9rem;font-weight:600}
.nav-links a{text-decoration:none;opacity:.85;transition:opacity .2s;color:#fff}
.nav-links a:hover{opacity:1;color:var(--rojo)}
@media(max-width:700px){.nav-links{display:none}}

/* ===== Héroe ===== */
.heroe{position:relative;background:var(--azul);color:#fff;overflow:hidden}
.heroe::after{content:"";position:absolute;top:0;right:-15%;width:55%;height:100%;background:var(--rojo);transform:skewX(-12deg)}
.heroe-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;padding:70px 20px;max-width:1100px;margin:0 auto}
.heroe h1{font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.05;text-shadow:2px 2px 0 rgba(0,0,0,.25)}
.heroe h1 .uno{color:#fff;background:var(--negro);padding:0 12px;display:inline-block;margin-top:8px}
.heroe p{margin:18px 0 28px;font-size:1.1rem;max-width:46ch}
.botones{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-weight:700;padding:14px 26px;border-radius:6px;transition:transform .15s,box-shadow .15s;border:0;font-size:1rem;font-family:var(--cuerpo);cursor:pointer}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.3)}
.btn-rojo{background:var(--rojo);color:#fff}
.btn-blanco{background:#fff;color:var(--azul)}
.heroe-logo{justify-self:center;text-align:center}
.heroe-logo img{width:min(280px,70vw);border-radius:50%;border:6px solid #fff;box-shadow:0 10px 30px rgba(0,0,0,.35);background:#fff}
@media(max-width:800px){
  .heroe-inner{grid-template-columns:1fr;text-align:center}
  .heroe p{margin-inline:auto}
  .botones{justify-content:center}
  .heroe-logo{order:-1}
  .heroe-logo img{width:min(200px,55vw)}
}

/* ===== Cintillo ===== */
.cintillo{background:var(--negro);color:#fff;overflow:hidden;border-top:3px solid #fff;white-space:nowrap;position:relative}
.cintillo .etiqueta{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;background:var(--rojo);font-family:var(--display);padding:0 16px;z-index:2;letter-spacing:1px}
.cintillo-pista{display:inline-block;padding:10px 0 10px 100%;animation:rodar 28s linear infinite;font-size:.95rem}
.cintillo-pista span{margin-right:60px}
.cintillo-pista b{color:var(--rojo)}
.cintillo-pista a{color:#fff;text-decoration:none}
@keyframes rodar{to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){
  .cintillo-pista{animation:none;padding-left:130px;white-space:normal}
  html{scroll-behavior:auto}
}

/* ===== Secciones ===== */
.seccion{padding:70px 0}
.titulo-seccion{display:flex;align-items:center;gap:16px;margin-bottom:36px}
.titulo-seccion h2{font-size:clamp(1.8rem,4vw,2.6rem)}
.titulo-seccion::after{content:"";flex:1;height:6px;background:repeating-linear-gradient(90deg,var(--rojo) 0 24px,var(--azul) 24px 48px)}

/* Videos */
.rejilla-videos{display:grid;grid-template-columns:1fr;max-width:860px;margin:0 auto;gap:24px}
.video-caja{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.1);border-top:5px solid var(--rojo)}
.video-caja .marco{position:relative;padding-top:56.25%}
.video-caja iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-caja h3{font-size:1.05rem;padding:14px 16px 4px}
.video-caja p{padding:0 16px 16px;font-size:.9rem;color:var(--gris)}
.nota-canal{margin-top:28px;text-align:center}

/* Noticias */
.seccion-noticias{background:var(--azul-oscuro);color:#fff}
.seccion-noticias .titulo-seccion::after{background:repeating-linear-gradient(90deg,var(--rojo) 0 24px,#fff 24px 48px)}
.rejilla-noticias{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.noticia{background:rgba(255,255,255,.06);border-left:5px solid var(--rojo);border-radius:8px;padding:24px}
.noticia .fecha{font-size:.8rem;font-weight:700;color:#9FB4E8;text-transform:uppercase;letter-spacing:1px}
.noticia h3{font-size:1.2rem;margin:8px 0 10px}
.noticia h3 a{color:#fff;text-decoration:none}
.noticia h3 a:hover{color:#FFD3D7}
.noticia p{font-size:.95rem;color:#E4E9F7}
.noticia img{border-radius:6px;margin-bottom:14px}

/* Redes */
.seccion-redes{text-align:center}
.rejilla-redes{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:10px}
.red{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;font-weight:700;width:130px;padding:22px 10px;border-radius:12px;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.08);transition:transform .15s;color:var(--negro)}
.red:hover{transform:translateY(-4px)}
.red svg{width:42px;height:42px}
.red.youtube svg{fill:#FF0000}
.red.facebook svg{fill:#1877F2}
.red.instagram svg{fill:#E1306C}
.red.whatsapp svg{fill:#25D366}

/* Contacto */
.seccion-contacto{background:var(--negro);color:#fff}
.seccion-contacto .titulo-seccion::after{background:repeating-linear-gradient(90deg,var(--rojo) 0 24px,var(--azul) 24px 48px)}
.contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
@media(max-width:800px){.contacto-grid{grid-template-columns:1fr}}
.contacto-grid form label{display:block;font-weight:700;margin:16px 0 6px;font-size:.9rem}
.contacto-grid form input,.contacto-grid form textarea{width:100%;padding:12px;border-radius:6px;border:1px solid #444;background:#1E1E1E;color:#fff;font-family:var(--cuerpo);font-size:1rem}
.contacto-grid form input:focus,.contacto-grid form textarea:focus{border-color:var(--rojo);outline:none}
.contacto-grid form button{margin-top:20px}
.dato{margin-bottom:18px}
.dato b{color:var(--rojo);display:block;font-size:.85rem;text-transform:uppercase;letter-spacing:1px}
.dato a{color:#fff}

/* Pie */
.pie-ccb{background:#000;color:#aaa;text-align:center;padding:26px 20px;font-size:.85rem;border-top:4px solid var(--rojo)}
.pie-ccb .marca{font-family:var(--display);color:#fff;letter-spacing:1px}

/* ===== Entradas individuales y páginas ===== */
.contenido-interno{padding:60px 0;max-width:800px;margin:0 auto}
.contenido-interno h1{font-size:clamp(1.8rem,5vw,3rem);color:var(--azul);margin-bottom:10px}
.contenido-interno .meta{color:var(--gris);font-size:.9rem;margin-bottom:24px;font-weight:600}
.contenido-interno .entrada p{margin-bottom:18px}
.contenido-interno .entrada h2,.contenido-interno .entrada h3{color:var(--azul);margin:26px 0 12px}
.contenido-interno img{border-radius:8px;margin:18px 0}
.volver{display:inline-block;margin-top:30px}
.lista-archivo article{border-bottom:2px solid #e5e5e5;padding:22px 0}
.lista-archivo h2 a{color:var(--azul);text-decoration:none}
.lista-archivo h2 a:hover{color:var(--rojo)}
.paginacion{margin-top:30px;display:flex;gap:10px;justify-content:center}
.paginacion a,.paginacion span{padding:8px 14px;background:var(--azul);color:#fff;border-radius:6px;text-decoration:none}
.paginacion span.current{background:var(--rojo)}

/* WordPress requeridas */
.alignleft{float:left;margin:0 20px 10px 0}
.alignright{float:right;margin:0 0 10px 20px}
.aligncenter{display:block;margin:10px auto}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:.85rem;color:var(--gris);text-align:center}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.sticky{display:block}
.gallery-caption{font-size:.85rem}
.bypostauthor{display:block}