/* Escala global normalizada para escritorio.
 * La página conserva un contenedor legible y una escala cercana a la del
 * periódico El Faro Latino; no aplica reducciones extremas al contenido.
 */
:root {
  --cream: #fff;
}

.site-header {
  background: rgba(255, 255, 255, .96);
}

/* Guía rápida: iconografía de alto contraste y lenguaje visual unificado. */
.route-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e3f1ee;
  color: #17645f;
}

.route-preview {
  grid-template-columns: 44px 1fr 20px;
}

.route-preview {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.route-preview:hover strong,
.route-preview:focus-visible strong {
  color: #17645f;
}

.route-preview:focus-visible {
  outline: 2px solid #17645f;
  outline-offset: 3px;
}

.route-icon.coral {
  background: #f7e9e5;
  color: #a9473c;
}

.route-icon.blue {
  background: #e7eef6;
  color: #28547a;
}

.route-symbol {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin-bottom: 20px;
  font-size: 0;
  background: #e3f1ee;
  color: #17645f;
}

.card-icon.coral-icon { background: #f7e9e5; color: #a9473c; }
.card-icon.blue-icon { background: #e7eef6; color: #28547a; }

.card-symbol {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 801px) {
  /* La barra pública de WordPress permanece discreta sin alterar el sitio. */
  body.admin-bar #wpadminbar {
    min-height: 32px;
    font-size: 13px;
  }

  body.admin-bar #wpadminbar .ab-item,
  body.admin-bar #wpadminbar a.ab-item,
  body.admin-bar #wpadminbar .ab-empty-item {
    height: 32px;
    line-height: 32px;
    font-size: 13px;
  }

  body.admin-bar #wpadminbar .ab-icon:before,
  body.admin-bar #wpadminbar .ab-item:before {
    font-size: 16px;
    line-height: 32px;
  }

  body.admin-bar #wpadminbar .ab-top-menu > li > .ab-item {
    padding: 0 9px;
  }

  body.admin-bar #wpadminbar .ab-sub-wrapper {
    top: 32px;
  }

  /* Igualamos el ancho de lectura al patrón editorial del sitio principal. */
  body.home .site-header,
  body.home .hero,
  body.home .section,
  body.home .how-section,
  body.home .privacy,
  body.home .site-footer {
    width: 100%;
    max-width: 1162px;
    margin-left: auto;
    margin-right: auto;
  }

  /* La franja oficial ocupa todo el ancho; solo su contenido se alinea al
     mismo eje de lectura. Evita aplicar dos veces el margen lateral. */
  body.home .official-section {
    width: 100%;
    max-width: none;
    padding-left: max(34px, calc((100% - 1162px) / 2));
    padding-right: max(34px, calc((100% - 1162px) / 2));
  }

  body.home .official-section .section-heading,
  body.home .official-section .source-list {
    width: 100%;
    max-width: 1162px;
    margin-left: auto;
    margin-right: auto;
  }

  body.home .site-header {
    height: 60px;
    padding-left: 28px;
    padding-right: 28px;
    gap: 24px;
    border-radius: 0 0 10px 10px;
  }

  .wordmark { font-size: 20px; }
  .site-header nav { gap: 19px; font-size: 11px; }
  .header-link { font-size: 10.5px; }

  body.home .hero {
    padding: 60px 34px 62px;
    gap: 56px;
  }

  .hero h1 {
    font-size: clamp(38px, 3.45vw, 50px);
    line-height: 1.06;
    letter-spacing: -2.3px;
    margin-bottom: 18px;
    max-width: 480px;
  }

  .lede {
    font-size: 15px;
    line-height: 1.48;
    max-width: 470px;
    margin-bottom: 24px;
  }

  .button { padding: 12px 18px; font-size: 12px; }
  .trust { font-size: 11px; margin-top: 17px; }
  .hero-card { padding: 24px; }
  .route-preview { grid-template-columns: 44px 1fr 20px; padding: 15px 0; }
  .route-preview strong { font-size: 13px; }
  .route-preview small { font-size: 11px; }

  body.home .section,
  body.home .how-section,
  body.home .resources {
    padding-top: 60px;
    padding-bottom: 64px;
  }

  .section-heading { margin-bottom: 26px; }
  .section-heading h2,
  .how-copy h2 { font-size: 30px; }
  .section-note { font-size: 12px; }
  .route-card { padding: 20px; min-height: 200px; }
  .card-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 0;
    margin-bottom: 20px;
  }
  .route-card h3 { font-size: 16px; }
  .route-card p,
  .source-card > p { font-size: 13px; }
  .card-link { bottom: 19px; left: 20px; font-size: 12px; }
  .source-card { padding: 20px; }
  .source-card h3 { font-size: 18px; }
  .source-meta { font-size: 12px; }
  .how-copy > p:last-child { font-size: 14px; }
  .article-grid article,
  .sponsor-card { padding: 21px; min-height: 190px; }
  .article-grid h3 { font-size: 16px; }
  .article-grid p { font-size: 12px; }
}