/* =====================================================================
   RV25 Relojería · FICHA DEL RELOJ · CONTACTO
   ---------------------------------------------------------------------
   Cierre de cada reloj: "¿Hablamos?", WhatsApp (con el reloj ya
   escrito en el mensaje), correo y redes sociales.

   Va en una franja azul noche (el color del logo) de borde a borde,
   para que se distinga del resto de la ficha, que es crema.
   El contenido queda centrado al mismo ancho que lo de arriba.
   En computador el título va a la izquierda y los enlaces a la derecha.

   Los datos salen de js/datos/negocio.js; el HTML lo arma plantilla.js.
   ===================================================================== */

.ficha-contacto {
  display: grid; gap: 32px;
  margin-top: var(--seccion);
  /* Franja a todo lo ancho; el contenido se centra a var(--ancho) */
  padding: 64px max(var(--margen), calc((100% - var(--ancho)) / 2 + var(--margen)));
  background: var(--noche);
  color: var(--marfil);
}

.ficha-contacto h3 {
  font-size: clamp(26px, 6vw, 34px); font-weight: 400; line-height: 1.1;
  color: var(--marfil);
}
.ficha-contacto-cabeza p { margin-top: 12px; max-width: 30em; font-size: 17px; color: var(--tinta-sobre-noche); }
.ficha-contacto-cabeza a { color: var(--marfil); font-weight: 700; }
.ficha-contacto-cabeza a:hover { color: var(--acento); }

/* Títulos pequeños ("Contacto", "Síguenos") en claro sobre el azul */
.ficha-contacto .ficha-subtitulo { color: var(--tinta-sobre-noche); }

/* Contacto y Síguenos: uno debajo del otro en celular (así el correo
   no se parte), lado a lado desde 560px. Una línea fina los separa de arriba. */
.ficha-contacto-columnas {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--noche-superficie);
}

.ficha-contacto-lista { list-style: none; display: grid; gap: 2px; margin: 12px 0 0; padding: 0; }
.ficha-contacto-lista a {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px;
  font-size: 16px; color: var(--marfil); text-decoration: none;
  overflow-wrap: anywhere;
  transition: color .2s ease;
}
.ficha-contacto-lista .icono { flex: none; width: 18px; height: 18px; color: var(--acento); }
.ficha-contacto-lista a:hover,
.ficha-contacto-lista a:hover .icono { color: var(--acento); }
.ficha-contacto a:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.ficha-contacto-usuario { margin-top: 4px; font-size: 14px; color: var(--tinta-sobre-noche); }

/* En celular la barra fija de compra va pegada a la franja, sin hueco crema */
.ficha-contacto + .ficha-compra-fija { margin-top: 0; }

@media (min-width: 560px) {
  .ficha-contacto-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1040px) {
  .ficha-contacto { grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; padding-block: 96px; }
  .ficha-contacto-columnas { padding-top: 0; border-top: 0; }
}