/* La superficie local: /areas-servicio y las paginas de ciudad.

   Estas reglas vivian dentro de un <style> en areas-servicio.html. Salen
   aqui porque ahora las comparten esa pagina y las que genera
   scripts/build-cities.py, y una hoja copiada en dos sitios diverge sin que
   se vea en ningun diff. */

/* Tres columnas de nombres. No hay mapa: un mapa con un alfiler es una
   direccion, y aqui no hay direccion que publicar (Wilmar, Q1). */
.condados{display:grid;gap:14px;margin-top:clamp(28px,4vh,46px);
          grid-template-columns:1fr}
@media(min-width:760px){.condados{grid-template-columns:repeat(3,1fr)}}
.condado{
  background:var(--papel);border:1px solid #21264f1f;
  border-radius:18px 18px 6px 6px;
  padding:clamp(18px,2.6vw,26px);
}
.condado h3{font-family:var(--sans);font-size:1.08rem;font-weight:600;margin:0 0 10px;line-height:1.3}
.condado ul{list-style:none;margin:0;padding:0;
            display:flex;flex-wrap:wrap;gap:4px 14px;
            font-size:.93rem;opacity:.82}
.condado li{margin:0}
/* Una ciudad con pagina se ve distinta de una que solo se nombra. Sin esto,
   las cuarenta parecen enlaces y treinta y nueve no lo son -- que es el
   defecto del sitio viejo al reves: alli once anclajes distintos llevaban
   todos al mismo sitio.

   La letra va en tinta y el cian a la barra: el cian sobre el papel de la
   tarjeta da 2,2:1 y AA pide 4,5:1. Eso es la decision F7, que es de Wilmar
   y sigue abierta; lo que si es nuestro es no abrir un incumplimiento nuevo
   mientras se decide. Es la misma salida que ya se aplico en contacto.css. */
.condado a{color:var(--tinta);text-decoration:none;
           border-bottom:2px solid var(--cian);font-weight:600}
.condado a:hover,.condado a:focus-visible{background:var(--crema)}
.condado .cuenta{display:block;margin:12px 0 0;font-size:.82rem;opacity:.6}

/* Lo que todavia no esta decidido se ve, no se rellena. La lista de
   servicios de esta superficie depende de la decision F1 de Wilmar, y los
   testimonios de texto del archivo de la decision IA-4. */
.pendiente{
  border-left:3px solid var(--cian);
  background:var(--papel);
  padding:14px 18px;margin:clamp(28px,4vh,46px) 0 0;border-radius:0 8px 8px 0;
  max-width:70ch;
}
.pendiente strong{display:block;font-size:.72rem;letter-spacing:.16em;
                  text-transform:uppercase;color:var(--cian);margin-bottom:6px}
.pendiente p{margin:0;font-size:.95rem;line-height:1.7;opacity:.86}

/* Los testimonios en video salen del sitio, no se incrustan: privacidad.html
   promete que nada de terceros te sigue desde aqui, y un iframe de YouTube
   -- o su miniatura, que se pide a img.youtube.com -- rompe esa frase antes
   de que nadie pulse nada. Por eso son enlaces, y se ven como enlaces. */
.testimonios{list-style:none;margin:clamp(24px,3.4vh,38px) 0 0;padding:0;
             display:grid;gap:14px}
.testimonios li{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.testimonios .datos{font-size:.84rem;opacity:.68}