/* ====================================================================
 * CONTACTO — /contacto-creativity/
 * PHP: page-contacto-creativity.php
 * ==================================================================== */

.cm-contactopg { padding-block: clamp(48px, 7vw, 100px); }

/*
 * Los datos a la izquierda, el formulario a la derecha — el mismo reparto que
 * la seccion de contacto de la portada, para que las dos pantallas se
 * reconozcan como la misma casa.
 */
.cm-contactopg__caja {
  display: grid;
  grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}

.cm-contactopg__telefono {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  text-decoration: none;
}

/* --- Las redes ------------------------------------------------------- */

.cm-contactopg__redes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: var(--e-4, 28px) 0 0;
  padding: 0;
  list-style: none;
}

.cm-contactopg__red {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* 44px de alto pulsable: son los enlaces que mas se tocan desde un telefono. */
  min-height: 44px;
  text-decoration: none;
  font-weight: 600;
}

.cm-contactopg__red svg { flex: none; }

/* --- El formulario --------------------------------------------------- */

/* La caja blanca sobre hueso: el mismo gesto que la portada hace en negro. */
.cm-contactopg__formulario {
  padding: clamp(20px, 3vw, 36px);
  background: #FFF;
  border: 1px solid var(--linea-clara, #E2DCD2);
  border-radius: 14px;
}

/* La rejilla de dos campos por fila vive en portada.css, que aqui no carga. */
.cm-formulario__fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

@media (max-width: 860px) {
  .cm-contactopg__caja { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .cm-formulario__fila { grid-template-columns: 1fr; }
}


/* ====================================================================
 * ZONAS PULSABLES EN EL TELÉFONO
 * --------------------------------------------------------------------
 * Los dos datos que un visitante PULSA en esta página —llamar y escribir—
 * eran los dos objetivos más pequeños del sitio: 164x36 el teléfono y
 * 224x19 el correo. Un enlace de 19 px de alto en un teléfono se falla más
 * veces de las que se acierta, y aquí fallar significa no contactar.
 *
 * El relleno se compensa con margen negativo para que el bloque de datos no
 * se despegue: la zona crece, la maqueta se queda donde está.
 * ==================================================================== */
@media (max-width: 900px) {
  .cm-contactopg__telefono,
  .cm-contactopg__intro p a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* El teléfono además es el dato principal de la página: en el escritorio se
     pinta a 35,2 px y en el teléfono se quedaba en 24. */
  .cm-contactopg__telefono { font-size: clamp(1.6rem, 9vw, 2.2rem); }
}

/* ====================================================================
 * DIRECCIÓN, HORARIO Y MAPA — 2026-08-26
 * --------------------------------------------------------------------
 * Recuperados del sitio anterior. El mapa va a lo ancho de la sección,
 * debajo de la caja: es lo último que se mira y lo que más pesa.
 * ==================================================================== */

.cm-contactopg__direccion {
  margin: 0 0 var(--e-3);
  font-style: normal;   /* el <address> nativo va en cursiva */
  color: var(--tinta);
}

.cm-contactopg__horario {
  margin: 0 0 var(--e-3);
}

.cm-contactopg__horario p { margin: 0 0 2px; }

.cm-contactopg__mapa {
  margin-top: var(--e-5);
  /* La esquina cortada: la misma firma geométrica del panel del
     formulario en la portada, para que el mapa no sea el enésimo
     rectángulo suelto. */
  clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%);
  line-height: 0;   /* mata el hueco fantasma que el iframe deja debajo */
}

.cm-contactopg__mapa iframe {
  display: block;
  width: 100%;
  /* En gris y con algo menos de brillo: es un plano de referencia, no
     una fotografía. Así no le compite en color a la marca. */
  filter: grayscale(1) contrast(.95);
  transition: filter var(--transicion);
}

.cm-contactopg__mapa:hover iframe,
.cm-contactopg__mapa:focus-within iframe { filter: none; }

@media (prefers-reduced-motion: reduce) {
  .cm-contactopg__mapa iframe { transition: none; }
}

@media (max-width: 700px) {
  .cm-contactopg__mapa iframe { height: 280px; }
}