/*
Theme Name: Tema Campaña
Theme URI: https://example.com
Author: Tu Nombre
Author URI: https://example.com
Description: Tema WordPress original de campaña política con estética oscura, tipografía condensada en titulares y acento naranja en botones. Totalmente editable desde el Personalizador y el editor de páginas.
Version: 1.1.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: tema-campana
Tags: dark, custom-colors, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ==========================================================================
   Variables y reset básico
   Paleta y tipografías: fondo negro/carbón, texto blanco, acento naranja,
   titulares en fuente condensada de alto impacto, cuerpo en fuente sans limpia.
   ========================================================================== */
:root{
  --color-fondo: #111111;
  --color-fondo-alt: #17181b;
  --color-fondo-alt2: #111a23;
  --color-texto: #ffffff;
  --color-texto-muted: #cfd1d3;
  --color-acento: #d94500;
  --color-acento-hover: #b83a00;
  --color-borde: #2a2b2e;
  --fuente-titulos: 'Bebas Neue', 'Anton', 'Oswald', sans-serif;
  --fuente-texto: 'Inter', Arial, Helvetica, sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }

body{
  margin:0;
  font-family: var(--fuente-texto);
  color: var(--color-texto);
  background: var(--color-fondo);
  line-height:1.6;
}

img{ max-width:100%; height:auto; display:block; }
a{ color: var(--color-acento); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{
  font-family: var(--fuente-titulos);
  font-weight:400;
  margin-top:0;
  color:#fff;
}
.container{ max-width:1140px; margin:0 auto; padding:0 20px; }

/* Texto "eyebrow" tipo etiqueta corta antes de un título grande */
.eyebrow{
  font-family: var(--fuente-texto);
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  color: var(--color-acento);
  margin-bottom:10px;
  display:block;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  background: var(--color-fondo);
  border-bottom: 1px solid var(--color-borde);
  position: sticky;
  top:0;
  z-index: 100;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 20px;
}
.site-branding{ display:flex; align-items:center; gap:12px; }
.site-branding img{ max-height:60px; width:auto; }
.site-title{ font-family: var(--fuente-titulos); font-size:1.6rem; margin:0; color:#fff; }
.site-description{ font-size:0.8rem; margin:0; color:var(--color-texto-muted); }

.main-navigation ul{
  list-style:none;
  display:flex;
  gap:24px;
  margin:0;
  padding:0;
}
.main-navigation a{
  color: #fff;
  font-weight:400;
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:1px;
}
.main-navigation a:hover{ color: var(--color-acento); text-decoration:none; }

.menu-toggle{ display:none; background:none; border:none; font-size:1.6rem; cursor:pointer; color:#fff; }

@media (max-width: 782px){
  .menu-toggle{ display:block; }
  .main-navigation{ display:none; width:100%; }
  .main-navigation.is-open{ display:block; }
  .main-navigation ul{ flex-direction:column; gap:0; }
  .main-navigation li{ border-top:1px solid var(--color-borde); }
  .main-navigation a{ display:block; padding:12px 0; }
  .header-inner{ flex-wrap:wrap; }
}

/* ==========================================================================
   Hero / Banner principal
   Full-bleed oscuro con overlay degradado, texto grande condensado en
   mayúsculas y botón tipo píldora en naranja (igual patrón que un banner
   editorial de campaña).
   ========================================================================== */
.hero{
  position:relative;
  background: linear-gradient(180deg, rgba(17,17,17,.35) 0%, rgba(17,17,17,.85) 100%), var(--hero-img, linear-gradient(135deg,#1a1a1a,#111a23)) center/cover no-repeat;
  color:#fff;
  padding:140px 20px 100px;
  text-align:center;
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-inner{ max-width:900px; margin:0 auto; }
.hero h1{
  font-size:clamp(2.8rem, 8vw, 7.2rem);
  line-height:0.95;
  letter-spacing:-2px;
  text-transform:uppercase;
  margin-bottom:18px;
}
.hero p{ font-family: var(--fuente-texto); font-size:1.1rem; max-width:600px; margin:0 auto 34px; color:var(--color-texto-muted); }

.btn{
  display:inline-block;
  background: var(--color-acento);
  color:#fff;
  font-weight:600;
  font-size:0.85rem;
  padding:14px 30px;
  border-radius:50px;
  text-transform:uppercase;
  letter-spacing:.5px;
  border:none;
  cursor:pointer;
}
.btn:hover{ background: var(--color-acento-hover); text-decoration:none; }
.btn-outline{
  background:transparent;
  border:1px solid #fff;
  color:#fff;
}
.btn-outline:hover{ background:#fff; color:#111; }

/* ==========================================================================
   Secciones generales
   ========================================================================== */
.section{ padding:90px 0; }
.section-alt{ background: var(--color-fondo-alt); }
.section-title{
  text-align:center;
  font-size:clamp(2rem, 4vw, 3.2rem);
  text-transform:uppercase;
  color:#fff;
  margin-bottom:10px;
}
.section-subtitle{
  text-align:center;
  color: var(--color-texto-muted);
  font-family: var(--fuente-texto);
  max-width:640px;
  margin:0 auto 50px;
}

/* Biografía */
.bio{ display:flex; gap:50px; align-items:center; flex-wrap:wrap; }
.bio-foto{ flex:1 1 300px; }
.bio-foto img{ border-radius:4px; filter:grayscale(15%); }
.bio-texto{ flex:2 1 400px; }
.bio-texto p{ color: var(--color-texto-muted); }

/* Propuestas / tarjetas */
.propuestas-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:24px;
}
.propuesta-card{
  background: var(--color-fondo-alt);
  border:1px solid var(--color-borde);
  border-radius:8px;
  padding:34px 26px;
  text-align:center;
  transition: transform .2s, border-color .2s;
}
.propuesta-card:hover{ transform:translateY(-4px); border-color: var(--color-acento); }
.propuesta-card .icono{ font-size:2.2rem; margin-bottom:14px; }
.propuesta-card h3{ color:#fff; font-size:1.5rem; letter-spacing:.5px; }
.propuesta-card p{ color: var(--color-texto-muted); font-size:.92rem; }

/* Galería */
.galeria-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:12px;
}
.galeria-grid img{ border-radius:4px; aspect-ratio:4/3; object-fit:cover; filter:grayscale(10%); }

/* Noticias / Blog */
.noticias-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:26px;
}
.noticia-card{ background: var(--color-fondo-alt); border-radius:8px; overflow:hidden; border:1px solid var(--color-borde); }
.noticia-card img{ aspect-ratio:16/9; object-fit:cover; }
.noticia-card .contenido{ padding:22px; }
.noticia-card h3{ font-size:1.4rem; }
.noticia-card p{ color: var(--color-texto-muted); font-size:.92rem; }
.noticia-card time{ color:#8a8d91; font-size:.8rem; text-transform:uppercase; letter-spacing:.5px; }

/* Contacto */
.contacto-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; }
.contacto-form input,
.contacto-form textarea{
  width:100%;
  padding:14px 16px;
  margin-bottom:16px;
  border:1px solid var(--color-borde);
  border-radius:6px;
  background: var(--color-fondo-alt);
  color:#fff;
  font-family:inherit;
}
.contacto-form input::placeholder,
.contacto-form textarea::placeholder{ color:#7a7d81; }
.contacto-form button{ cursor:pointer; }
.contacto-info p{ color: var(--color-texto-muted); }
.redes-sociales{ display:flex; gap:14px; margin-top:20px; flex-wrap:wrap; }
.redes-sociales a{
  width:44px; height:44px;
  border-radius:50%;
  background: var(--color-acento);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  text-decoration:none;
}
.redes-sociales a:hover{ background:var(--color-acento-hover); }

@media (max-width: 782px){
  .contacto-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Banner CTA ("Únete a la comunidad")
   Franja destacada de ancho completo, fondo carbón con imagen opcional,
   texto centrado y botón píldora — mismo patrón de banner intermedio.
   ========================================================================== */
.cta-banner{
  background: var(--color-fondo-alt2, #111a23);
  padding:80px 20px;
  text-align:center;
}
.cta-banner h2{ font-size:clamp(2rem, 5vw, 3.5rem); text-transform:uppercase; margin-bottom:14px; }
.cta-banner p{ color: var(--color-texto-muted); max-width:560px; margin:0 auto 30px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background: #0a0a0a;
  color:#fff;
  padding:60px 0 20px;
  border-top:1px solid var(--color-borde);
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:30px;
  margin-bottom:30px;
}
.site-footer h3{ font-size:1.3rem; text-transform:uppercase; }
.site-footer a{ color: var(--color-texto-muted); }
.site-footer a:hover{ color: var(--color-acento); }
.footer-bottom{
  border-top:1px solid var(--color-borde);
  text-align:center;
  padding-top:20px;
  font-size:.8rem;
  color:#6f7276;
}

/* ==========================================================================
   Utilidades
   ========================================================================== */
.text-center{ text-align:center; }
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}