/* Wö Kàpi · contacto.html (30 de setiembre de 2026; 1 de octubre, la columna de la derecha)
   Carga después de las hojas del sistema (SISTEMA.md §2). Tres secciones en crema, a
   72 px entre sí (56 en celular): visitanos con el mapa, escribinos (WhatsApp es la
   acción principal; teléfono y correo en una oración) y las preguntas frecuentes, que
   escribe construir-preguntas-contacto.py. Nada va con position absolute ni fixed;
   sin sombras, sin bordes gruesos y sin rótulos. */

/* Visitanos: cómo llegar en dos enlaces de texto de 44 px de alto. */
.contacto-llegar {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
}
.contacto-llegar .enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.contacto-visita-grilla { align-items: start; }
.contacto-mapa { margin: 0; }
.contacto-mapa iframe {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
  border-radius: var(--radio);
  background-color: rgba(43, 43, 43, .08);   /* mientras carga el mapa */
}

/* Escribinos: el texto centrado en alto contra la foto del salón. El mapa, la foto y la
   lista de preguntas arrancan en la misma columna (la 6, x = 633 a 1440): tres bloques de la
   derecha sobre un mismo borde, y los títulos en la línea del logo. */
.contacto-escribinos-grilla { align-items: center; }
.contacto-foto { margin: 0; }
.contacto-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: var(--radio);
}
@media (max-width: 991px) { .contacto-foto img { aspect-ratio: 4 / 3; } }

/* Preguntas: la lista de filas del sistema; cada respuesta en la medida de lectura. */
.contacto-faq > .contacto-faq-item > .titulo-pieza { margin: 0 0 8px; }
.contacto-faq > .contacto-faq-item > p { margin: 0; max-width: var(--medida); }

/* Los enlaces dentro de una frase (el teléfono y el correo de «Escribinos», los de las
   respuestas): 44 px de toque sin mover los renglones, como en eventos (css/paginas.css):
   12 px arriba, 17 abajo y 2 a los lados devueltos con un margen negativo. */
.contacto-escribinos p.medida a,
.contacto-faq p a { padding: 12px 2px 17px; margin: 0 -2px; }

@media (max-width: 991px) {
  .contacto-mapa iframe { height: 400px; }
}
@media (max-width: 767px) {
  .contacto-mapa iframe { height: 320px; }
}