/* ==========================================================================
   El Chisme Político — hoja de estilos principal
   Concepto: "donde el rumor termina y comienza el contexto" — micrófono,
   transmisión en vivo y el contraste rumor (magenta) / contexto (verde-azul).
   ========================================================================== */

:root{
  --ink:        #17151C;   /* texto principal */
  --ink-soft:   #453F4E;
  --paper:      #F2EFF4;   /* fondo general, blanco-lila frío */
  --paper-2:    #E7E1EC;   /* fondo alterno / tarjetas */
  --panel:      #100E16;   /* barra superior / footer, casi negro */
  --rumor:      #9C2D63;   /* magenta — "rumor" */
  --rumor-dark: #7A2350;
  --contexto:   #1E7A6E;   /* verde-azulado — "contexto verificado" */
  --gold:       #D9A62E;   /* acento en vivo / micrófono */
  --line:       #D2CBD8;
  --line-dark:  #2B2733;
  --white:      #FFFFFF;

  --font-display: "Space Grotesk", "Arial Black", sans-serif;
  --font-body:    "Inter", "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", "Courier New", monospace;

  --container: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--contexto); text-decoration:none; }
a:hover{ color:var(--rumor); }
img{ max-width:100%; display:block; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rumor);
}

.expediente{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--gold);
  text-transform:uppercase;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.08;
  margin:0 0 .5rem;
  font-weight:700;
  letter-spacing:-.01em;
}

/* ---------- etiquetas rumor / contexto ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-family:var(--font-mono);
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:2px 8px;
  border-radius:20px;
}
.tag-rumor{
  color:var(--rumor);
  border:1px dashed var(--rumor);
}
.tag-contexto{
  color:var(--white);
  background:var(--contexto);
}
.tag-arrow{ color:var(--ink-soft); font-family:var(--font-mono); font-size:.7rem; }

/* ---------- indicador EN VIVO ---------- */
.live-dot{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--rumor);
}
.live-dot::before{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:var(--rumor);
  box-shadow:0 0 0 0 rgba(156,45,99,.55);
  animation:pulse 1.6s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(156,45,99,.55); }
  70%{ box-shadow:0 0 0 8px rgba(156,45,99,0); }
  100%{ box-shadow:0 0 0 0 rgba(156,45,99,0); }
}
@media (prefers-reduced-motion:reduce){ .live-dot::before{ animation:none; } }

/* ---------- onda de sonido (marca) ---------- */
.wave-mark{
  display:flex; align-items:flex-end; gap:2px;
  width:40px;height:34px;flex:0 0 40px;
}
.wave-mark span{
  display:block; width:4px; background:var(--rumor); border-radius:2px;
}
.wave-mark span:nth-child(1){ height:40%; }
.wave-mark span:nth-child(2){ height:75%; background:var(--gold); }
.wave-mark span:nth-child(3){ height:100%; background:var(--contexto); }
.wave-mark span:nth-child(4){ height:60%; background:var(--gold); }
.wave-mark span:nth-child(5){ height:85%; background:var(--rumor); }

/* ---------- barra superior de utilidad ---------- */
.utility-bar{
  background:var(--panel);
  color:#BEB6C7;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.04em;
}
.utility-bar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:6px;
  padding-bottom:6px;
  flex-wrap:wrap;
  gap:6px;
}
.utility-bar a{ color:#BEB6C7; }
.utility-bar a:hover{ color:var(--white); }
.utility-bar .social a{ margin-left:14px; }

/* ---------- masthead ---------- */
.masthead{
  background:var(--paper);
  border-bottom:3px solid var(--ink);
  padding:24px 0 16px;
}
.masthead .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
}
.masthead-brand{ display:flex; align-items:center; gap:14px; }
.masthead h1{
  font-size:2.35rem;
  margin:0;
}
.masthead .slogan{
  font-family:var(--font-mono);
  font-size:.8rem;
  color:var(--ink-soft);
  letter-spacing:.01em;
  margin-top:2px;
}
.masthead-date{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--ink-soft);
  text-align:right;
}

/* ---------- navegación ---------- */
.site-nav{
  background:var(--ink);
  border-bottom:1px solid var(--line-dark);
}
.site-nav .container{ padding-left:20px; padding-right:20px; }
.navbar-nav .nav-link{
  color:#DED7E4 !important;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.01em;
  padding:.7rem .8rem !important;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{
  color:var(--white) !important;
  background:var(--rumor);
}
.navbar-toggler{ border-color:var(--line-dark); }
.dropdown-menu{
  background:var(--panel);
  border:1px solid var(--line-dark);
  border-radius:0;
}
.dropdown-item{
  color:#DED7E4;
  font-size:.85rem;
  font-family:var(--font-body);
  font-weight:600;
}
.dropdown-item:hover,.dropdown-item:focus{
  background:var(--rumor);
  color:var(--white);
}

/* ---------- hero ---------- */
.hero{
  padding:34px 0 10px;
  border-bottom:1px solid var(--line);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:34px;
}
@media (max-width:860px){ .hero-grid{ grid-template-columns:1fr; } }

.hero-lead{ position:relative; }
.hero-lead img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border:1px solid var(--line);
}
.hero-lead .live-dot{
  position:absolute; top:12px; left:12px;
  background:rgba(16,14,22,.82);
  color:var(--gold);
  padding:5px 10px;
  border-radius:20px;
}
.hero-lead .live-dot::before{ background:var(--gold); box-shadow:0 0 0 0 rgba(217,166,46,.55); }
.hero-lead h2{
  font-size:2.05rem;
  margin-top:14px;
}
.hero-lead p{ color:var(--ink-soft); }

.hero-side{ display:flex; flex-direction:column; gap:0; }
.mic-item{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:12px;
  padding:14px 0;
  border-top:1px solid var(--line);
}
.mic-item:first-child{ border-top:none; }
.mic-item .idx{
  font-family:var(--font-mono);
  font-size:.9rem;
  color:var(--gold);
  padding-top:2px;
}
.mic-item h3{ font-size:1.02rem; margin-bottom:2px; }
.mic-item .meta{
  font-family:var(--font-mono);
  font-size:.68rem;
  color:var(--ink-soft);
  text-transform:uppercase;
}

/* ---------- secciones / listados de tarjetas ---------- */
.section{ padding:38px 0; }
.section-alt{ background:var(--paper-2); }
.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  border-bottom:3px solid var(--ink);
  padding-bottom:8px;
  margin-bottom:22px;
}
.section-head h2{ font-size:1.5rem; margin:0; }
.section-head .see-all{
  font-family:var(--font-mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
@media (max-width:900px){ .card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .card-grid{ grid-template-columns:1fr; } }

.news-card{ border-top:1px solid var(--line); padding-top:14px; }
.news-card img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border:1px solid var(--line);
  margin-bottom:10px;
}
.news-card h3{ font-size:1.06rem; margin-bottom:6px; }
.news-card p{ color:var(--ink-soft); font-size:.92rem; margin:0 0 8px; }
.news-card .meta{
  font-family:var(--font-mono);
  font-size:.68rem;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-top:4px;
}

/* ---------- declaraciones (comillas grandes) ---------- */
.quote-card{
  border-top:1px solid var(--line);
  padding-top:14px;
  position:relative;
}
.quote-card .quote-mark{
  font-family:var(--font-display);
  font-size:3rem;
  color:var(--rumor);
  line-height:.6;
  display:block;
  margin-bottom:6px;
}
.quote-card blockquote{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-size:1.12rem;
  font-weight:500;
  line-height:1.3;
}
.quote-card .attrib{
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--ink-soft);
  text-transform:uppercase;
}

/* ---------- franja "En Contexto" (destacado editorial) ---------- */
.band-editorial{
  background:var(--panel);
  color:#EFEAF2;
  padding:40px 0;
}
.band-editorial .eyebrow{ color:#E7B8CC; }
.band-editorial h2{ color:var(--white); font-size:1.85rem; }
.band-editorial p{ color:#C6BFCC; max-width:70ch; }
.band-editorial .btn-outline-registro{
  border:1px solid var(--contexto);
  color:var(--white);
  font-family:var(--font-mono);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:.5rem 1rem;
  border-radius:0;
}
.band-editorial .btn-outline-registro:hover{ background:var(--contexto); color:var(--white); }

/* ---------- páginas internas (listado por sección) ---------- */
.page-header{
  padding:30px 0 18px;
  border-bottom:1px solid var(--line);
}
.page-header .expediente{ display:block; margin-bottom:6px; }
.page-header h1{ font-size:2.05rem; }
.page-header p{ color:var(--ink-soft); max-width:70ch; }

/* ---------- video / en vivo ---------- */
.video-card .ratio{ border:1px solid var(--line); }

/* ---------- datos (mini estadísticas) ---------- */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
@media (max-width:800px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
.stat-card{
  background:var(--white);
  border:1px solid var(--line);
  padding:18px;
}
.stat-card .num{
  font-family:var(--font-display);
  font-size:2.1rem;
  color:var(--rumor);
}
.stat-card .label{
  font-family:var(--font-mono);
  font-size:.7rem;
  text-transform:uppercase;
  color:var(--ink-soft);
  letter-spacing:.04em;
}

/* ---------- contacto ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}
@media (max-width:800px){ .contact-grid{ grid-template-columns:1fr; } }
.data-sheet{
  background:var(--white);
  border:1px solid var(--line);
  padding:24px;
}
.data-sheet dt{
  font-family:var(--font-mono);
  font-size:.68rem;
  text-transform:uppercase;
  color:var(--gold);
  letter-spacing:.05em;
  margin-top:14px;
}
.data-sheet dt:first-child{ margin-top:0; }
.data-sheet dd{ margin:2px 0 0; font-weight:600; }
.form-control{
  border-radius:0;
  border-color:var(--line);
}
.form-control:focus{
  border-color:var(--rumor);
  box-shadow:0 0 0 .15rem rgba(156,45,99,.18);
}
.btn-registrar{
  background:var(--rumor);
  border-color:var(--rumor);
  color:var(--white);
  border-radius:0;
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.82rem;
  padding:.6rem 1.4rem;
}
.btn-registrar:hover{ background:var(--rumor-dark); border-color:var(--rumor-dark); color:var(--white); }

/* ---------- quiénes somos ---------- */
.about-block{ max-width:78ch; }
.about-block h2{ margin-top:1.6rem; font-size:1.35rem; }
.about-facts{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin:26px 0;
}
@media (max-width:600px){ .about-facts{ grid-template-columns:1fr; } }
.about-facts .fact{
  border:1px solid var(--line);
  background:var(--white);
  padding:16px;
}
.about-facts dt{
  font-family:var(--font-mono);
  font-size:.68rem;
  text-transform:uppercase;
  color:var(--gold);
  letter-spacing:.05em;
}
.about-facts dd{ margin:4px 0 0; font-weight:600; }

/* ---------- footer ---------- */
footer.site-footer{
  background:var(--panel);
  color:#A79FB0;
  padding:40px 0 20px;
  margin-top:20px;
  border-top:3px solid var(--rumor);
}
footer.site-footer h4{
  color:var(--white);
  font-family:var(--font-mono);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:14px;
}
footer.site-footer a{ color:#A79FB0; }
footer.site-footer a:hover{ color:var(--white); }
footer.site-footer .cols{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:26px;
}
@media (max-width:800px){ footer.site-footer .cols{ grid-template-columns:1fr 1fr; } }
footer.site-footer ul{ list-style:none; padding:0; margin:0; }
footer.site-footer li{ margin-bottom:8px; font-size:.86rem; }
footer.site-footer .legal{
  border-top:1px solid var(--line-dark);
  margin-top:30px;
  padding-top:16px;
  font-family:var(--font-mono);
  font-size:.7rem;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}

/* focus visibility */
a:focus-visible,button:focus-visible,.nav-link:focus-visible{
  outline:2px solid var(--rumor);
  outline-offset:2px;
}