/* ==========================================================================
   GELÉE — contacto.css
   Página de contacto. Solo se carga en contacto.html.

   Criterio: no hay formulario. Todo el contacto ocurre en WhatsApp, así que
   la página es una lista de destinos tocables, no una pantalla de captura.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Encabezado
   Alineado a la izquierda, igual que historia: el centrado se reserva para
   el hero y los títulos de sección cortos de la portada.
   -------------------------------------------------------------------------- */
.contacto__titulo { text-align: left; }

.contacto__titulo::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  margin-top: var(--esp-24);
  background-color: var(--marca);
}

.contacto__intro { margin-top: var(--esp-24); }

/* --------------------------------------------------------------------------
   2. Retrato de la chef
   Cuadrado y del mismo ancho que la columna de lectura en móvil; a partir de
   700px se queda en 320px para que no domine la página, que es una lista de
   contactos, no una portada.
   -------------------------------------------------------------------------- */
.contacto__figura {
  max-width: var(--ancho-lectura);
  margin-top: var(--esp-40);
}

.contacto__retrato {
  display: block;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  /* width/height del <img> valen como CSS y anularían el aspect-ratio */
  height: auto;
  object-fit: cover;
  border-radius: var(--radio-foto);
  background-color: var(--rosa); /* se ve mientras carga la foto */
}

.contacto__figura-pie {
  max-width: 320px;
  margin-top: var(--esp-16);
  font-size: var(--t-chico);
  line-height: 1.5;
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   3. Bloques
   Un ancho de lectura común para todo el contenido de la página.
   -------------------------------------------------------------------------- */
.contacto__bloque {
  max-width: var(--ancho-lectura);
  margin-top: var(--esp-48);
}

@media (min-width: 900px) {
  .contacto__bloque { margin-top: var(--esp-56); }
}

.contacto__subtitulo {
  font-size: var(--t-h3);
  margin-bottom: var(--esp-16);
}

/* --------------------------------------------------------------------------
   4. Lista de canales
   Cada fila es un enlace completo: 56px de alto mínimo (por encima de los
   44px de objetivo táctil) y separadores de 1px, sin tarjetas ni sombras.
   -------------------------------------------------------------------------- */
.contacto__lista { border-top: 1px solid var(--linea); }

.contacto__lista li { border-bottom: 1px solid var(--linea); }

.contacto__enlace {
  display: flex;
  align-items: center;
  gap: var(--esp-16);
  min-height: 56px;
  padding-block: var(--esp-8);
  color: var(--texto);
  text-decoration: none;
  transition: color var(--transicion);
}

.contacto__enlace:hover { color: var(--marca); }

.contacto__icono {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--marca);
}

.contacto__canal {
  display: block;
  font-size: var(--t-chico);
  line-height: 1.3;
  color: var(--texto-suave);
}

.contacto__dato {
  display: block;
  font-weight: 500;
  line-height: 1.35;
}

/* Flecha discreta al final de la fila */
.contacto__flecha {
  flex: none;
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   5. Ubicación
   -------------------------------------------------------------------------- */
.contacto__direccion {
  font-style: normal;
  line-height: 1.6;
  color: var(--texto);
}

/* El alto se fija por CSS para que el mapa reserve su espacio antes de
   cargar: el iframe entra con loading="lazy" y nunca mueve el layout. */
.contacto__mapa {
  margin-top: var(--esp-24);
  height: 280px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-foto);
  overflow: hidden;
  background-color: var(--rosa); /* se ve mientras carga el mapa */
}

.contacto__mapa iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 900px) {
  .contacto__mapa { height: 360px; }
}

/* Salida siempre disponible aunque el iframe tarde o esté bloqueado */
.contacto__mapa-enlace {
  display: inline-block;
  margin-top: var(--esp-16);
  font-size: var(--t-chico);
}