/* Propuesta C: «Atlas».
   Parte del globo del logo: cabecera y banda de la portada en gris carbón con el amarillo encima,
   y un mapa de meridianos con las ciudades del corpus (el tamaño indica el número de conversaciones). */

:root {
  --papel: #ffffff;
  --papel-2: #f3f3f1;
  --tinta: #2b2c2e;
  --tinta-2: #626468;
  --linea: #e1e1dd;
  --ultramar: #2b2c2e;
  --ultramar-2: #000000;
  --sobre-ultramar: #ffffff;
  --rotulador: #f0e43c;
  --sobre-rotulador: #1f2023;
  --simbolo: #8d8f93;
  --carbon: #2b2c2e;
}
@media (prefers-color-scheme: dark) {
  :root { --papel: #1b1c1e; --papel-2: #25262a; --tinta: #ecece8; --tinta-2: #a9abaf; --linea: #36383c;
          --ultramar: #f0e43c; --ultramar-2: #fff38a; --sobre-ultramar: #1b1c1e; --carbon: #111214; }
}

h1, h2, .resumen strong { font-family: "Oswald", var(--sans); font-weight: 500; }
a { color: var(--tinta); text-decoration-color: #c9bd00; text-decoration-thickness: 2px; }
@media (prefers-color-scheme: dark) { a { color: var(--tinta); text-decoration-color: #f0e43c; } }

/* Cabecera oscura de lado a lado */
body { background: var(--papel); }
.cabecera { max-width: none; background: var(--carbon); border: 0; padding: 1rem max(1.25rem, calc((100vw - var(--ancho)) / 2 + 1.25rem)); }
.logo-burbuja { fill: var(--carbon); }
.marca-nombre { color: #fff; }
.marca-sub { color: #c9cacd; }
.menu a { color: #e9e9e6; }
.menu a:hover { border-bottom-color: #8a8b8e; color: #fff; }
.menu a[aria-current="page"] { color: #f0e43c; border-bottom-color: #f0e43c; }

/* Portada: banda oscura con el mapa */
.portada h1 { text-transform: uppercase; font-size: clamp(2.8rem, 2rem + 3.4vw, 4.6rem); line-height: 1; }
.fragmento { background: var(--papel-2); border-radius: 0; border-left: 6px solid #f0e43c; }
.lugares {
  margin: 4rem calc(50% - 50vw) 0; padding: 2.5rem max(1.25rem, calc((100vw - var(--ancho)) / 2 + 1.25rem)) 3rem;
  background: var(--carbon); color: #e9e9e6; border: 0; margin-bottom: -4rem;
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem 3rem; align-items: start;
}
.lugares h2 { grid-column: 1 / -1; color: #fff; margin-top: 0; }
.lugares a { color: #fff; text-decoration-color: #f0e43c; }
.lugares .cuenta { color: #b5b6b9; }
.lugares .paises { columns: 2; }
.pais { color: #f0e43c; font-family: "Oswald", var(--sans); font-weight: 400; font-size: 1rem; }
.mapa-caja { display: block; }
.mapa { width: 100%; height: auto; }
.mapa-reticula line { stroke: #4a4b4f; stroke-width: 1; }
.mapa-paises path { fill: #3a3b3f; stroke: #2b2c2e; stroke-width: .8; stroke-linejoin: round; }
.mapa-paises path.con-datos { fill: #55565c; stroke: #8a8b90; }
.mapa-reticula .ecuador { stroke: #6b6c70; stroke-dasharray: 4 6; }
.mapa-ciudad circle { fill: #f0e43c; fill-opacity: .85; stroke: #2b2c2e; stroke-width: 2; }
.mapa-ciudad text { fill: #e9e9e6; font: 500 17px var(--sans); paint-order: stroke; stroke: #2b2c2e; stroke-width: 4px; }
.mapa-ciudad:hover circle, .mapa-ciudad:focus circle { fill: #fff; }
.mapa-ciudad:focus { outline: none; }
.mapa-ciudad:focus-visible circle { stroke: #fff; stroke-width: 4; }

button:hover, .boton:hover { background: #f0e43c; border-color: #f0e43c; color: #1f2023; }
.reproducir { background: #f0e43c; border-color: #f0e43c; color: #1f2023; }
.modos input:checked + span { background: var(--carbon); color: #f0e43c; border-color: var(--carbon); }
.barra { background: #2b2c2e; }
@media (prefers-color-scheme: dark) { .barra { background: #f0e43c; } }
.partitura .hablante { color: var(--tinta); }
.partitura li.sonando, .partitura li.actual { border-left-color: #f0e43c; }
.pie { background: var(--carbon); color: #c9cacd; border: 0; }
.pie a { color: #fff; text-decoration-color: #f0e43c; }

@media (max-width: 60rem) {
  .lugares { grid-template-columns: minmax(0, 1fr); }
}

/* Equipos por ciudad */
.equipo-ciudad-bloque { border-top: 4px solid var(--carbon); }
.equipo-ciudad-bloque h3 { font-family: "Oswald", var(--sans); font-weight: 500; font-size: 1.4rem; }
.equipo .coordina img { box-shadow: 0 0 0 5px #f0e43c; }
.equipo-rol { display: inline-block; align-self: flex-start; background: #f0e43c; color: #1f2023; padding: .05rem .45rem; border-radius: 3px; margin-bottom: .3rem; }