/* ============================================================
   EL MICRÓFONO MX — hoja de estilos (sobre Bootstrap 5)
   Concepto: la sala de prensa y la entrevista como formato.
   El elemento firma es una franja de puntos tipo medidor de
   audio (VU meter), como si el micrófono estuviera captando
   sonido. Las piezas de "Declaraciones" se presentan como
   citas grandes, y "En Vivo" usa un testigo rojo "ON AIR".
   ============================================================ */

:root{
  --mic-black:   #121212; /* fondo de escenario, cabecera, pie */
  --mic-black-2: #1C1C1C; /* tarjetas sobre fondo oscuro */
  --mic-cream:   #F7F4EF; /* fondo de página clara */
  --mic-card:    #FFFFFF; /* tarjetas sobre fondo claro */
  --mic-ink:     #1A1A1A; /* texto principal */
  --mic-steel:   #75726C; /* texto secundario */
  --mic-line:    #E5E0D6; /* bordes claros */
  --mic-red:     #D62828; /* on air / declaraciones / alerta */
  --mic-gold:    #E0A939; /* acento secundario, reflector */

  --f-display: "Anton", "Archivo Black", sans-serif;
  --f-body: "Work Sans", -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --bs-body-font-family: var(--f-body);
  --bs-body-color: var(--mic-ink);
  --bs-body-bg: var(--mic-cream);
  --bs-link-color: var(--mic-ink);
  --bs-link-hover-color: var(--mic-red);
  --bs-border-radius: 6px;
  --bs-border-radius-lg: 8px;
}

body{
  font-family: var(--f-body);
  background: var(--mic-cream);
  color: var(--mic-ink);
  line-height: 1.6;
}
a{ text-decoration:none; }
img{ max-width:100%; display:block; }
.container-mic{ max-width: 1200px; }

/* -------------------------------------------------------
   Franja de pulso — elemento firma: puntos tipo medidor de
   audio, como si el micrófono estuviera captando sonido.
------------------------------------------------------- */
.pulse-line{ width:100%; height:16px; line-height:0; background: var(--mic-black); }
.pulse-line svg{ display:block; width:100%; height:16px; }

/* -------------------------------------------------------
   Cabecera
------------------------------------------------------- */
.mic-header{ background: var(--mic-black); color:#fff; position:sticky; top:0; z-index:1030; }
.mic-navbar{ padding: .9rem 0; }
.mic-brand{ display:flex; flex-direction:column; gap:.3rem; line-height:1; }
.mic-brand__name{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: .01em;
  color:#fff;
  text-transform: uppercase;
}
.mic-brand__name .mx{ color: var(--mic-red); }
.mic-brand__slogan{
  font-family: var(--f-mono);
  font-size:.6rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color: var(--mic-steel);
}
.mic-navbar .navbar-toggler{ border-color: rgba(255,255,255,.25); }
.mic-navbar .navbar-toggler-icon{ filter: invert(1); }

.mic-nav .nav-link{
  font-family: var(--f-mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#B5B0A6;
  padding:.5rem .6rem !important;
  border-radius: 3px;
}
.mic-nav .nav-link:hover,
.mic-nav .nav-link.active{
  color: var(--mic-black);
  background: var(--mic-gold);
}
.mic-aux a{
  font-family: var(--f-mono);
  font-size:.64rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#B5B0A6;
  border-bottom: 1px dashed transparent;
}
.mic-aux a:hover{ color:#fff; border-color: var(--mic-gold); }

/* testigo ON AIR */
.on-air{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background: var(--mic-red);
  color:#fff;
  font-family: var(--f-mono);
  font-weight:700;
  font-size:.62rem;
  letter-spacing:.08em;
  padding:.4rem .65rem;
  border-radius: 3px;
}
.on-air .dot{
  width:7px; height:7px; border-radius:50%;
  background:#fff;
  animation: on-air-pulse 1.5s ease-in-out infinite;
}
@keyframes on-air-pulse{ 0%,100%{opacity:1;} 50%{opacity:.3;} }

.mic-ticker{ background: var(--mic-black-2); border-top: 1px solid rgba(255,255,255,.06); overflow:hidden; white-space:nowrap; }
.mic-ticker__track{
  display:inline-block; padding:.5rem 1rem;
  font-family: var(--f-mono); font-size:.72rem; color:#B5B0A6; white-space:nowrap;
}
.mic-ticker__track strong{ color: var(--mic-gold); font-weight:600; }
.mic-ticker__track span{ margin-right: 2.6rem; }
@media (prefers-reduced-motion: no-preference){
  .mic-ticker__track{ animation: mic-ticker-scroll 34s linear infinite; }
  @keyframes mic-ticker-scroll{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
}

/* -------------------------------------------------------
   Hero
------------------------------------------------------- */
.mic-hero{ background: var(--mic-black); color:#fff; padding: 2.8rem 0 3.1rem; }
.mic-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--f-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em;
  color: var(--mic-gold); margin-bottom:.9rem;
}
.mic-hero h1{
  font-family: var(--f-display);
  font-weight:400;
  text-transform: uppercase;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: .005em;
}
.mic-hero p.dek{ color:#B5B0A6; font-size:1.05rem; max-width:48ch; font-family: var(--f-body); }
.mic-byline{ font-family: var(--f-mono); font-size:.66rem; text-transform:uppercase; color:#8A867D; letter-spacing:.04em; }
.mic-hero-side{ border-left: 1px dashed rgba(255,255,255,.18); padding-left: 1.75rem; }
.mic-hero-side h3{ font-family: var(--f-mono); text-transform:uppercase; font-size:.64rem; letter-spacing:.08em; color:#8A867D; margin-bottom:1rem; }
.mic-side-story{ padding-bottom:1rem; margin-bottom:1rem; border-bottom:1px solid rgba(255,255,255,.08); }
.mic-side-story:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.mic-side-story a{ font-family: var(--f-display); font-weight:400; text-transform:uppercase; letter-spacing:.01em; font-size:1.02rem; color:#fff; line-height:1.3; }
.mic-side-story a:hover{ color: var(--mic-gold); }
.mic-side-story .tag{ margin-bottom:.4rem; }

/* -------------------------------------------------------
   Distintivo de categoría
------------------------------------------------------- */
.tag{
  display:inline-flex; align-items:center;
  font-family: var(--f-mono); font-size:.6rem; letter-spacing:.07em; text-transform:uppercase;
  padding:.2rem .5rem; border-radius:3px; font-weight:700; border: 1.4px solid currentColor;
}
.tag--noticias{ color:#4C6C8C; background: rgba(76,108,140,.08); }
.tag--microfono{ color: var(--mic-red); background: rgba(214,40,40,.08); }
.tag--declaraciones{ color: var(--mic-red); background: rgba(214,40,40,.08); }
.tag--gobierno{ color: var(--mic-gold); background: rgba(224,169,57,.1); }
.tag--elecciones{ color: var(--mic-gold); background: rgba(224,169,57,.1); }
.tag--contexto{ color:#4C6C8C; background: rgba(76,108,140,.08); }
.tag--datos{ color:#3F7A56; background: rgba(63,122,86,.1); }
.tag--envivo{ color: var(--mic-red); background: rgba(214,40,40,.08); }
.tag--opinion{ color: var(--mic-red); background: rgba(214,40,40,.08); }

/* -------------------------------------------------------
   Tarjetas
------------------------------------------------------- */
.mic-card{
  background: var(--mic-card);
  border: 1px solid var(--mic-line);
  border-radius: 6px;
  padding: 1.2rem 1.2rem 1.35rem;
  height:100%;
  display:flex; flex-direction:column; gap:.55rem;
  transition: transform .15s, box-shadow .15s;
}
.mic-card:hover{ transform: translateY(-3px); box-shadow: 0 12px 26px rgba(18,18,18,.09); }
.mic-card h3{ font-family: var(--f-display); font-weight:400; text-transform:uppercase; letter-spacing:.005em; font-size:1.16rem; line-height:1.22; margin:0; }
.mic-card h3 a:hover{ color: var(--mic-red); }
.mic-card p{ margin:0; color:#4A473F; font-size:.92rem; font-family: var(--f-body); }
.mic-card__meta{ font-family: var(--f-mono); font-size:.62rem; text-transform:uppercase; color: var(--mic-steel); letter-spacing:.04em; margin-top:auto; }

/* tarjeta de cita — Declaraciones */
.quote-card{
  background: var(--mic-black);
  color:#fff;
  border-radius: 6px;
  padding: 1.4rem 1.4rem 1.5rem;
  height:100%;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.quote-card .qmark{
  font-family: var(--f-display);
  font-size: 2.6rem;
  line-height:.6;
  color: var(--mic-red);
}
.quote-card blockquote{
  font-family: var(--f-body);
  font-style: italic;
  font-size: 1.05rem;
  line-height:1.45;
  margin:0;
  color:#fff;
}
.quote-card figcaption{
  font-family: var(--f-mono);
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color: var(--mic-gold);
}
.quote-card .context{
  font-size:.85rem;
  color:#B5B0A6;
  margin:0;
}

/* miniatura de video */
.mic-video-thumb{
  position:relative; aspect-ratio:16/9; border-radius:5px;
  background: linear-gradient(135deg, var(--mic-black) 0%, #2B2320 100%);
  display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:.2rem;
}
.mic-play-btn{ width:46px; height:46px; border-radius:50%; background: rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; color:#fff; z-index:1; }
.mic-duration{ position:absolute; bottom:8px; right:8px; background: rgba(18,18,18,.85); color:#fff; font-family: var(--f-mono); font-size:.6rem; padding:.12rem .4rem; border-radius:3px; }
.mic-live-badge{ position:absolute; top:8px; left:8px; z-index:1; }

/* -------------------------------------------------------
   Banner de sección
------------------------------------------------------- */
.mic-section-banner{ background: var(--mic-black); color:#fff; padding: 2.8rem 0 1.6rem; }
.mic-section-banner h1{ font-family: var(--f-display); font-weight:400; text-transform:uppercase; font-size: clamp(1.9rem, 3.8vw, 2.7rem); margin:.8rem 0 .6rem; }
.mic-section-banner p{ color:#B5B0A6; max-width:60ch; margin:0; font-family: var(--f-body); }

/* -------------------------------------------------------
   Páginas de contenido
------------------------------------------------------- */
.mic-content-head h1{ font-family: var(--f-display); font-weight:400; text-transform:uppercase; font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin-bottom:.6rem; }
.mic-content-head p{ color: var(--mic-steel); }
.mic-prose{ max-width:68ch; }
.mic-prose h2{ font-family: var(--f-display); font-weight:400; text-transform:uppercase; font-size: 1.25rem; margin: 1.9rem 0 .7rem; }
.mic-prose p{ margin-bottom:1rem; color:#33312B; }
.mic-prose ul{ margin-bottom:1rem; padding-left:1.2rem; color:#33312B; }
.mic-prose li{ margin-bottom:.4rem; }
.mic-prose strong{ color: var(--mic-ink); }

.mic-masthead{
  background:#fff; border:1px solid var(--mic-line); border-left: 4px solid var(--mic-red);
  border-radius:6px; padding: 1.3rem 1.5rem; margin: 1.5rem 0;
}
.mic-masthead dl{ display:grid; grid-template-columns:max-content 1fr; gap:.35rem 1.1rem; margin:0; }
.mic-masthead dt{ font-family: var(--f-mono); font-size:.63rem; text-transform:uppercase; letter-spacing:.05em; color: var(--mic-steel); }
.mic-masthead dd{ margin:0; font-size:.92rem; }

/* contacto */
.mic-contact-card{ background: var(--mic-black); color:#fff; border-radius:6px; padding: 1.8rem; }
.mic-contact-card h2{ font-family: var(--f-display); font-weight:400; text-transform:uppercase; font-size:1.15rem; margin-bottom:1rem; }
.mic-contact-list li{ margin-bottom:1rem; }
.mic-contact-list .k{ font-family: var(--f-mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; color:#8A867D; display:block; margin-bottom:.15rem; }
.mic-contact-list .v a{ color:#fff; border-bottom:1px dashed var(--mic-gold); }
.mic-contact-list .v a:hover{ color: var(--mic-gold); }

.mic-form label{ font-family: var(--f-mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.05em; color: var(--mic-steel); margin-bottom:.3rem; }
.mic-form .form-control{ border-radius:5px; border:1px solid var(--mic-line); font-family: var(--f-body); padding:.65rem .8rem; background:#fff; }
.mic-form .form-control:focus{ border-color: var(--mic-red); box-shadow: 0 0 0 .18rem rgba(214,40,40,.18); }
.btn-mic{
  font-family: var(--f-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  background: var(--mic-red); color:#fff; border:none; border-radius:5px; padding:.75rem 1.3rem;
}
.btn-mic:hover{ background:#B21E1E; color:#fff; }

/* mapa del sitio */
.mic-sitemap h2{ font-family: var(--f-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color: var(--mic-steel); border-bottom:1px dashed var(--mic-line); padding-bottom:.5rem; margin-bottom:.8rem; }
.mic-sitemap li{ margin-bottom:.5rem; }
.mic-sitemap a{ font-family: var(--f-display); font-weight:400; text-transform:uppercase; font-size:1rem; color: var(--mic-ink); }
.mic-sitemap a:hover{ color: var(--mic-red); }

/* -------------------------------------------------------
   Footer
------------------------------------------------------- */
.mic-footer{ background: var(--mic-black); color:#B5B0A6; padding: 2.6rem 0 1.5rem; margin-top:3.5rem; }
.mic-footer h3{ font-family: var(--f-mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.06em; color:#fff; margin-bottom:.9rem; }
.mic-footer li{ margin-bottom:.5rem; font-size:.88rem; }
.mic-footer a:hover{ color: var(--mic-gold); }
.mic-footer-brand p{ font-size:.85rem; max-width:32ch; margin:.8rem 0 1rem; }
.mic-social a{ width:34px; height:34px; border:1px solid rgba(255,255,255,.25); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#B5B0A6; margin-right:.6rem; }
.mic-social a:hover{ border-color: var(--mic-gold); color: var(--mic-gold); }
.mic-footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding-top:1.3rem; margin-top:1.8rem; font-family: var(--f-mono); font-size:.64rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; }

/* -------------------------------------------------------
   Utilidades
------------------------------------------------------- */
.skip-link{ position:absolute; left:-9999px; top:auto; background: var(--mic-gold); color: var(--mic-black); padding:.6rem 1rem; z-index:2000; font-family: var(--f-mono); }
.skip-link:focus{ left:1rem; top:1rem; }
:focus-visible{ outline: 2px solid var(--mic-gold); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .on-air .dot{ animation:none; } }