/* =========================================================================
   Contacto — la columna de los métodos de contacto, junto al formulario.
   Solo se carga en /contacto/ (la encola page-contacto.php).

   Es un único panel oscuro frente a la tarjeta blanca del formulario. Antes
   eran cinco piezas sueltas: cuatro tarjetas sin margen interior, con emojis
   de colores por iconos, y debajo una imagen con la dirección escrita dentro.
   Ahora la «k» a rayas del logotipo se dibuja con CSS y el pie solo dice la
   localidad: desde el 30/09/2026 no se publica la calle, porque de momento
   no se atiende en persona.
   ========================================================================= */

/* Como en el prototipo, la columna es más estrecha que el formulario. En
   tableta se queda a partes iguales y en móvil main.css la pasa a una sola
   columna. */
@media (min-width: 1025px) {
  .contacto-grid { grid-template-columns: .85fr 1.15fr; gap: 32px; }
}

.contacto-panel {
  /* Contenedor de consulta: la «k» y el teléfono se miden con el ancho del
     panel (cqi), no con el de la ventana. */
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 34px 34px 30px;
  border-radius: var(--r-card);
  background: var(--ink);
  color: var(--on-dark-soft);
  font-style: normal; /* <address> sale en cursiva */
}
.contacto-panel > :not(.contacto-panel__k) { position: relative; z-index: 1; }
.contacto-panel p { margin: 0; }

.contacto-panel__kicker {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent);
}

/* WhatsApp: el número bien grande y un botón para abrir la conversación. */
.contacto-panel__wa { margin-top: 20px; }
.contacto-panel__etiqueta {
  display: block; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .04em; color: var(--on-dark-mut);
}
.contacto-panel__tel {
  display: block; margin-top: 6px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 28px;
  font-size: clamp(22px, 9cqi, 32px); /* cabe entero hasta en un móvil de 320 */
  line-height: 1.05; letter-spacing: -.02em; color: var(--on-dark); white-space: nowrap;
}
.contacto-panel__boton {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 18px;
  min-height: 44px; padding: 12px 22px; box-sizing: border-box;
  border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-mono); font-size: 13px; transition: var(--t-fast);
}
.contacto-panel__boton:hover { filter: brightness(1.06); }

/* Correo, zona y horario: icono ámbar y texto claro, sin tarjetas. */
.contacto-panel__lista {
  list-style: none; margin: 30px 0 0; padding: 26px 0 0;
  border-top: 1px solid var(--ink-line);
  display: flex; flex-direction: column; gap: 20px;
}
.contacto-panel__lista li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px;
  font-size: 14px; line-height: 1.55;
}
.contacto-panel__lista .icono { color: var(--accent); }
.contacto-panel__lista a {
  justify-self: start; font-family: var(--font-mono); font-size: 13px;
  color: var(--on-dark); overflow-wrap: anywhere;
  text-decoration: underline; text-decoration-color: #5a5148; text-underline-offset: 4px;
}
.contacto-panel__lista a:hover { text-decoration-color: var(--accent); }
.contacto-panel__claro { color: var(--on-dark); }

.contacto-horario {
  margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 16px;
  color: var(--on-dark);
}
.contacto-horario > div { display: contents; }
.contacto-horario dd { margin: 0; font-variant-numeric: tabular-nums; }
.contacto-panel .contacto-horario + p { margin-top: 4px; }

/* Pie: dónde estamos, en el hueco que dejó el mapa del prototipo. Va abajo del
   todo para que en escritorio el panel acabe a la altura del formulario. */
.contacto-panel__pie { margin-top: auto; padding-top: 44px; }
.contacto-panel__lugar {
  font-family: var(--font-display); font-weight: 800; font-size: 34px;
  line-height: 1; letter-spacing: -.03em; color: var(--on-dark);
}

/* La «k» a rayas del logotipo (mismas proporciones que el panel de marca),
   cortada por la esquina. Los px van primero por si el navegador no entiende
   cqi. */
.contacto-panel__k {
  position: absolute; right: -26px; right: -6.4cqi; bottom: -54px; bottom: -13.6cqi;
  font-family: var(--font-display); font-weight: 800;
  font-size: 250px; font-size: 62cqi;
  line-height: 1; letter-spacing: -.03em; color: transparent;
  background: repeating-linear-gradient(180deg, var(--accent) 0 .0345em, transparent .0345em .062em);
  -webkit-background-clip: text; background-clip: text;
  pointer-events: none; user-select: none;
}

@media (max-width: 760px) {
  .contacto-panel { padding: 28px 24px 26px; }
  /* En móvil el panel no se estira: más aire para que la «k» no toque la
     nota del horario. */
  .contacto-panel__pie { padding-top: 60px; }
}
/* En los móviles más estrechos el correo se partía en «info@…creations.» y «com». */
@media (max-width: 360px) {
  .contacto-panel__lista a { font-size: 12px; letter-spacing: -.01em; }
}

/* El formulario, con menos relleno en el móvil: con 40 px por lado los campos
   se quedaban en 268 px (los del asistente de /a-medida/ llevan 20). */
.contacto-form { padding: 38px 40px 34px; }
@media (max-width: 760px) {
  .contacto-form { padding: 28px 20px 26px; }
}