/* ============================================================
   TU GOBIERNO EXPLICADO — hoja de estilos (sobre Bootstrap 5)
   Concepto: el gobierno traducido a lenguaje simple. El
   elemento firma es un trazo de resaltador (marcador amarillo)
   que subraya lo importante — como cuando alguien te explica
   un trámite y marca lo que de verdad necesitas saber. Las
   piezas de "Noticias Explicadas" usan pasos numerados y las
   de "Preguntas Ciudadanas" un formato de acordeón.
   ============================================================ */

:root{
  --tge-navy:   #1B2A4A; /* azul cívico — cabecera, pie */
  --tge-navy-2: #24365C; /* tarjetas sobre fondo oscuro */
  --tge-cream:  #FBF7EE; /* fondo de página, cálido y cercano */
  --tge-card:   #FFFFFF; /* tarjetas sobre fondo claro */
  --tge-ink:    #1D2333; /* texto principal */
  --tge-steel:  #6B7280; /* texto secundario */
  --tge-line:   #E7E1D2; /* bordes claros */
  --tge-coral:  #F2653D; /* acento primario / llamado a la acción */
  --tge-yellow: #FFD84D; /* resaltador — color firma */
  --tge-green:  #2F9E68; /* derechos / confirmaciones */

  --f-display: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --f-body: "Inter", -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(--tge-ink);
  --bs-body-bg: var(--tge-cream);
  --bs-link-color: var(--tge-ink);
  --bs-link-hover-color: var(--tge-coral);
  --bs-border-radius: 10px;
  --bs-border-radius-lg: 14px;
}

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

/* -------------------------------------------------------
   Trazo de resaltador — elemento firma del sitio.
------------------------------------------------------- */
.marker-line{ width:100%; height:14px; line-height:0; }
.marker-line svg{ display:block; width:100%; height:14px; }
.marker-line--soft{ opacity:.5; }

/* subrayado tipo marcador para texto destacado */
.hl{
  position: relative;
  white-space: nowrap;
}
.hl::after{
  content:"";
  position:absolute;
  left:-2%; right:-2%; bottom:.03em;
  height:.38em;
  background: var(--tge-yellow);
  z-index:-1;
  border-radius: 2px 6px 3px 7px / 4px 3px 6px 3px;
}

/* -------------------------------------------------------
   Cabecera
------------------------------------------------------- */
.tge-header{ background: var(--tge-navy); color:#fff; position:sticky; top:0; z-index:1030; }
.tge-navbar{ padding: .9rem 0; }
.tge-brand{ display:flex; flex-direction:column; gap:.3rem; line-height:1; }
.tge-brand__name{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.35rem;
  color:#fff;
  letter-spacing:-0.01em;
}
.tge-brand__name .hl::after{ background: var(--tge-yellow); opacity:.9; }
.tge-brand__slogan{
  font-family: var(--f-mono);
  font-size:.6rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#B9C2D6;
}
.tge-navbar .navbar-toggler{ border-color: rgba(255,255,255,.25); }
.tge-navbar .navbar-toggler-icon{ filter: invert(1); }

.tge-nav .nav-link{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: .86rem;
  color: #C4CCE0;
  padding: .5rem .7rem !important;
  border-radius: 20px;
}
.tge-nav .nav-link:hover,
.tge-nav .nav-link.active{
  color: var(--tge-navy);
  background: var(--tge-yellow);
}
.tge-aux a{
  font-family: var(--f-mono);
  font-size:.64rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color: #B9C2D6;
  border-bottom: 1px dashed transparent;
}
.tge-aux a:hover{ color:#fff; border-color: var(--tge-yellow); }

/* -------------------------------------------------------
   Hero
------------------------------------------------------- */
.tge-hero{ background: var(--tge-navy); color:#fff; padding: 3rem 0 3.25rem; }
.tge-eyebrow{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family: var(--f-mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: var(--tge-yellow);
  margin-bottom:.9rem;
}
.tge-hero h1{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color:#fff;
}
.tge-hero p.dek{ color:#C4CCE0; font-size:1.05rem; max-width:46ch; }
.tge-byline{ font-family: var(--f-mono); font-size:.66rem; text-transform:uppercase; color:#98A2BC; letter-spacing:.04em; }
.tge-hero-side{ background: var(--tge-navy-2); border-radius: 14px; padding: 1.5rem; }
.tge-hero-side h3{ font-family: var(--f-mono); text-transform:uppercase; font-size:.64rem; letter-spacing:.08em; color:#98A2BC; margin-bottom:1rem; }
.tge-side-story{ padding-bottom:1rem; margin-bottom:1rem; border-bottom:1px solid rgba(255,255,255,.08); }
.tge-side-story:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.tge-side-story a{ font-family: var(--f-display); font-weight:700; font-size:1rem; color:#fff; line-height:1.35; }
.tge-side-story a:hover{ color: var(--tge-yellow); }
.tge-side-story .tag{ margin-bottom:.4rem; }

/* -------------------------------------------------------
   Distintivo de categoría — cápsula amistosa con icono
------------------------------------------------------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  font-family: var(--f-display);
  font-weight:700;
  font-size:.68rem;
  padding:.25rem .65rem;
  border-radius: 20px;
}
.tag--gobierno{ color: var(--tge-navy); background: #DCE3F2; }
.tag--leyes{ color:#1D6B45; background: #DFF1E7; }
.tag--economia{ color:#8A4A16; background: #F7E4D2; }
.tag--derechos{ color:#1D6B45; background: #DFF1E7; }
.tag--elecciones{ color:#A2401E; background: #FBE2D6; }
.tag--datos{ color: var(--tge-navy); background: #DCE3F2; }
.tag--noticias{ color:#A2401E; background: #FBE2D6; }
.tag--videos{ color: var(--tge-navy); background: #DCE3F2; }
.tag--preguntas{ color:#8A4A16; background: #F7E4D2; }

/* -------------------------------------------------------
   Tarjetas
------------------------------------------------------- */
.tge-card{
  background: var(--tge-card);
  border: 1px solid var(--tge-line);
  border-radius: 14px;
  padding: 1.3rem 1.3rem 1.4rem;
  height: 100%;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  transition: transform .15s, box-shadow .15s;
}
.tge-card:hover{ transform: translateY(-3px); box-shadow: 0 14px 28px rgba(27,42,74,.08); }
.tge-card h3{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.12rem;
  line-height:1.32;
  margin:0;
}
.tge-card h3 a:hover{ color: var(--tge-coral); }
.tge-card p{ margin:0; color:#4B5266; font-size:.92rem; }
.tge-card__meta{
  font-family: var(--f-mono);
  font-size:.62rem;
  text-transform:uppercase;
  color: var(--tge-steel);
  letter-spacing:.04em;
  margin-top:auto;
}

/* badge de "paso a paso" para Noticias Explicadas */
.step-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 26px; height:26px;
  border-radius:50%;
  background: var(--tge-coral);
  color:#fff;
  font-family: var(--f-mono);
  font-weight:700;
  font-size:.72rem;
  flex-shrink:0;
}

/* miniatura de video */
.tge-video-thumb{
  position:relative;
  aspect-ratio:16/9;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--tge-navy) 0%, #2C4270 100%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  margin-bottom:.2rem;
}
.tge-play-btn{
  width:46px; height:46px; border-radius:50%;
  background: var(--tge-yellow);
  color: var(--tge-navy);
  display:flex; align-items:center; justify-content:center;
  z-index:1;
}
.tge-duration{
  position:absolute; bottom:8px; right:8px;
  background: rgba(27,42,74,.85);
  color:#fff;
  font-family: var(--f-mono);
  font-size:.6rem;
  padding:.12rem .4rem;
  border-radius: 6px;
}

/* -------------------------------------------------------
   Banner de sección
------------------------------------------------------- */
.tge-section-banner{ background: var(--tge-navy); color:#fff; padding: 2.9rem 0 1.6rem; }
.tge-section-banner h1{ font-family: var(--f-display); font-weight:800; font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin:.8rem 0 .6rem; }
.tge-section-banner p{ color:#C4CCE0; max-width:60ch; margin:0; }

/* -------------------------------------------------------
   Preguntas Ciudadanas — acordeón
------------------------------------------------------- */
.tge-accordion .accordion-item{
  background: var(--tge-card);
  border: 1px solid var(--tge-line);
  border-radius: 12px !important;
  margin-bottom: .9rem;
  overflow:hidden;
}
.tge-accordion .accordion-button{
  font-family: var(--f-display);
  font-weight:700;
  font-size: 1rem;
  color: var(--tge-ink);
  background: var(--tge-card);
  padding: 1.1rem 1.3rem;
}
.tge-accordion .accordion-button:not(.collapsed){
  color: var(--tge-navy);
  background: #F3EFE1;
  box-shadow:none;
}
.tge-accordion .accordion-button:focus{ box-shadow: 0 0 0 .15rem rgba(242,101,61,.25); }
.tge-accordion .accordion-button::after{ flex-shrink:0; }
.tge-accordion .accordion-body{
  font-size: .95rem;
  color:#4B5266;
  padding: 0 1.3rem 1.2rem;
}

/* -------------------------------------------------------
   Páginas de contenido
------------------------------------------------------- */
.tge-content-head h1{ font-family: var(--f-display); font-weight:800; font-size: clamp(1.9rem, 3.4vw, 2.4rem); margin-bottom:.6rem; }
.tge-content-head p{ color: var(--tge-steel); }
.tge-prose{ max-width:68ch; }
.tge-prose h2{ font-family: var(--f-display); font-weight:700; font-size: 1.28rem; margin: 1.9rem 0 .7rem; }
.tge-prose p{ margin-bottom:1rem; color:#33394A; }
.tge-prose ul{ margin-bottom:1rem; padding-left:1.2rem; color:#33394A; }
.tge-prose li{ margin-bottom:.4rem; }
.tge-prose strong{ color: var(--tge-ink); }

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

/* contacto */
.tge-contact-card{ background: var(--tge-navy); color:#fff; border-radius:14px; padding: 1.9rem; }
.tge-contact-card h2{ font-family: var(--f-display); font-weight:700; font-size:1.15rem; margin-bottom:1rem; }
.tge-contact-list li{ margin-bottom:1rem; }
.tge-contact-list .k{ font-family: var(--f-mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; color:#98A2BC; display:block; margin-bottom:.15rem; }
.tge-contact-list .v a{ color:#fff; border-bottom:1px dashed var(--tge-yellow); }
.tge-contact-list .v a:hover{ color: var(--tge-yellow); }

.tge-form label{ font-family: var(--f-display); font-weight:600; font-size:.82rem; color: var(--tge-ink); margin-bottom:.3rem; }
.tge-form .form-control{ border-radius:10px; border:1px solid var(--tge-line); font-family: var(--f-body); padding:.7rem .9rem; background:#fff; }
.tge-form .form-control:focus{ border-color: var(--tge-coral); box-shadow: 0 0 0 .18rem rgba(242,101,61,.18); }
.btn-tge{
  font-family: var(--f-display);
  font-weight:700;
  font-size:.9rem;
  background: var(--tge-coral);
  color:#fff;
  border:none;
  border-radius: 10px;
  padding:.8rem 1.4rem;
}
.btn-tge:hover{ background:#D8511F; color:#fff; }

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

/* -------------------------------------------------------
   Footer
------------------------------------------------------- */
.tge-footer{ background: var(--tge-navy); color:#B9C2D6; padding: 2.7rem 0 1.5rem; margin-top:3.5rem; }
.tge-footer h3{ font-family: var(--f-mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.06em; color:#fff; margin-bottom:.9rem; }
.tge-footer li{ margin-bottom:.5rem; font-size:.88rem; }
.tge-footer a:hover{ color: var(--tge-yellow); }
.tge-footer-brand p{ font-size:.85rem; max-width:32ch; margin:.8rem 0 1rem; }
.tge-social a{
  width:36px; height:36px;
  border-radius:50%;
  background: rgba(255,255,255,.08);
  display:inline-flex; align-items:center; justify-content:center;
  color:#B9C2D6;
  margin-right:.6rem;
}
.tge-social a:hover{ background: var(--tge-yellow); color: var(--tge-navy); }
.tge-footer-bottom{
  border-top: 1px solid rgba(255,255,255,.1);
  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(--tge-yellow); color: var(--tge-navy);
  padding:.6rem 1rem; z-index:2000; font-family: var(--f-mono);
}
.skip-link:focus{ left:1rem; top:1rem; }
:focus-visible{ outline: 2px solid var(--tge-coral); outline-offset:2px; }