/* ==========================================================================
   SERVICE AREAS — hoja propia, del mockup (1344×768)

     fondo    #F3FDFF
     titular  #263F5E
     círculo  165 px de Ø = 12.3% del ancho

   El mockup alternaba etiqueta-izquierda / círculo / etiqueta-derecha. Aquí se
   reproduce con una rejilla de dos columnas donde los pares invierten el orden.
   ========================================================================== */
.page--areas { --sa-bg: #F3FDFF; --sa-navy: #263F5E; --sa-cyan: #0093C0; --sa-grey: #5C6469; }
.page--areas .header {
  /* fixed, no absolute: el nav sigue visible durante todo el scroll. */
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: transparent; padding-top: 16px; }
.page--areas .nav { min-height: 66px; }
.page--areas main { background: var(--sa-bg); }

.sa-head { padding: clamp(120px, 10vw, 170px) 0 clamp(24px, 2.6vw, 44px); text-align: left; }
.sa-head h1 {
  margin: 0 0 10px; font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 800;
  line-height: 1.06; letter-spacing: -0.03em; text-transform: none; color: var(--sa-navy);
}
.sa-head p { font-size: clamp(.95rem, 1.15vw, 1.2rem); color: var(--sa-grey); }

.sa-cities { padding-bottom: clamp(40px, 4vw, 72px); }
.sa-cities ul { display: grid; gap: clamp(20px, 2.4vw, 40px); }
@media (min-width: 860px) { .sa-cities ul { grid-template-columns: 1fr 1fr; } }

/* `:not(.btn)` es la parte que importa: sin ella esta regla (0,1,1) le gana a
   .btn--primary (0,1,0) y el "Get a quote" del cierre sale navy sobre navy,
   contraste 1.11. Es el cuarto caso del mismo patrón en esta sesión — una regla
   de descendiente pisando la del componente. */
.sa-cities a:not(.btn) {
  display: flex; gap: clamp(14px, 1.7vw, 26px); align-items: center;
  text-decoration: none; color: inherit;
  padding: 10px; border-radius: 18px;
  transition: background-color .15s;
}
.sa-cities a:not(.btn):hover { background: #E4F5FB; }
/* Los pares invierten el orden: es lo que da el zigzag del mockup. */
@media (min-width: 860px) { .sa-cities li:nth-child(even) a:not(.btn) { flex-direction: row-reverse; text-align: right; } }

.sa-photo {
  flex: none; display: block; position: relative;
  width: clamp(104px, 12.3vw, 176px); height: clamp(104px, 12.3vw, 176px);
  border-radius: 50%; overflow: hidden;
  border: 3px solid var(--sa-cyan);
}
.sa-photo img, .sa-photo .imgph {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.sa-label { min-width: 0; }
/* FLEX y no grid+place-content: con el svg en % el centrado sale desplazado. */
.sa-ico {
  width: 30px; height: 30px; border-radius: 50%; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sa-cyan); color: #fff;
}
@media (min-width: 860px) { .sa-cities li:nth-child(even) .sa-ico { margin-left: auto; } }
.sa-ico svg { width: 50%; height: 50%; flex: none; }
.sa-label b { display: block; font-size: clamp(1rem, 1.35vw, 1.35rem); font-weight: 800;
  color: var(--sa-navy); line-height: 1.2; }
/* `:not(.sa-ico)` — sin ella esta regla (0,1,1) le gana a `.sa-ico` (0,1,0) y
   le impone `display: block` y el gris: el pin se iba a la esquina superior
   izquierda del círculo y perdía el blanco, así que los cinco círculos salían
   vacíos. Es el mismo choque de especificidad que tuvo `.footer a` con
   `.btn--on-dark`: un selector descendiente pisando a la clase del componente. */
.sa-label > span:not(.sa-ico) { display: block; font-size: clamp(.8rem, .95vw, 1rem);
  color: var(--sa-grey); line-height: 1.45; margin-top: 4px; }

.sa-cta { text-align: center; margin-top: clamp(28px, 3vw, 52px); }

.sa-map { padding-bottom: clamp(48px, 5vw, 90px); text-align: center; }
.sa-map h2 {
  margin: 0 0 clamp(18px, 2vw, 32px); font-size: clamp(1.3rem, 2vw, 2rem);
  font-weight: 800; letter-spacing: -0.025em; text-transform: none; color: var(--sa-navy);
}
.sa-map img, .sa-map .imgph { width: 100%; max-width: 900px; margin-inline: auto; border-radius: 18px; }