/* ==========================================================================
   CONTACTO (/contacto/). Medidas de produccion (Playwright, 1440 y 390 px).
   ========================================================================== */

/* Los 40px del main de WoodMart van DEBAJO del banner (sumados al
   padding-top de .contacto), no encima; abajo 20px (el pie se superpone 20px)
   en escritorio y 40px en tablet/movil. */
.pagina-contacto .contenido { padding-bottom: 20px; }

/* Datos + foto: 2 columnas de 586px con 20px de separacion (1192 utiles),
   padding de seccion 100/50 + 10px de columna. */
.contacto {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; align-items: start;
  padding-top: 150px; padding-bottom: 60px; /* 40 del main + 110 */
}
.contacto__titulo { margin: 0 0 20px; color: var(--navy); font-size: 40px; font-weight: 700; line-height: 1; }
/* "JOSEFINA" no carga en produccion: se ve en la sans-serif del sistema.
   El parrafo vacio que le sigue en produccion deja 25px + 20px de hueco. */
.contacto__entradilla { margin: 0 0 65px; font-family: var(--font-sistema); font-size: 21px; font-weight: 400; line-height: 25px; color: var(--text); }
.contacto__entradilla:last-child { margin-bottom: 65px; }

/* Lista con iconos de 24px navy (hover azul), texto 16/25 */
.contacto__lista li + li { margin-top: 9px; }
.contacto__lista li:not(:last-child) { padding-bottom: 9px; }
.contacto__lista li, .contacto__lista a { display: flex; align-items: center; }
.contacto__lista span { padding-left: 5px; color: var(--text); font-size: var(--fs-texto); line-height: var(--lh-texto); }
.contacto__icono { width: 30px; height: 24px; color: var(--navy); transition: color var(--transicion); }
.contacto__lista li:hover .contacto__icono { color: var(--blue); }

.contacto__col--foto { display: flex; justify-content: center; }
.contacto__foto { width: 500px; max-width: 100%; }

/* Mapa a sangre (oculto en tablet y movil, como en produccion) */
.contacto__mapa { padding-block: 10px; }
.contacto__mapa iframe { width: 100%; height: 450px; border: 0; }

@media (max-width: 1024px) {
  .pagina-contacto .contenido { padding-bottom: 40px; }
  .contacto__mapa { display: none; }
}
@media (max-width: 767px) {
  .contacto { grid-template-columns: 1fr; row-gap: 20px; padding-top: 50px; padding-bottom: 10px; }
  .contacto__foto { width: 100%; }
}