/* ==========================================================================
   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);
}

/* --------------------------------------------------------------------------
   4b. Redes
   Solo el logo, sin nombre al lado y sin nada alrededor.

   La caja sigue midiendo 48px aunque no se vea: sin texto que lo acompañe,
   el dibujo es todo el blanco de tiro, y 48 queda por encima de los 44 de
   objetivo táctil.
   -------------------------------------------------------------------------- */
.contacto__redes {
  display: flex;
  /* Van justo debajo del teléfono, dentro del mismo bloque. El hueco es corto
     a propósito, porque las dos cosas son la misma idea: por dónde escribir. */
  margin-top: var(--esp-16);
  /* Sin hueco declarado. Las cajas de 48px ya dejan aire de sobra entre un
     logo y otro, sobre todo con la efe, que es mucho más angosta que su caja.
     Añadir gap encima los separaba de más. */
  gap: 0;
  /* La caja de 48 es más ancha que el logo: sin esto el primero quedaría
     descuadrado respecto al texto de arriba. */
  margin-left: -10px;
}

.contacto__red {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--marca);
  transition: color var(--transicion);
}

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

/* Se mide por el alto y el ancho sale solo, porque los dos logos ya no tienen
   la misma forma. La efe de Facebook es angosta y el de Instagram es cuadrado,
   así que fijar los dos a 28x28 estiraría la efe. */
.contacto__red-icono {
  height: 26px;
  width: auto;
}

/* La frase va de pie, no de encabezado, así que se pone del mismo tamaño y del
   mismo gris que el "WhatsApp" de la fila de arriba. Casi no lleva hueco propio
   porque la caja de 48px del icono ya deja aire por debajo del dibujo. */
.contacto__redes-pie {
  margin-top: 2px;
  font-size: var(--t-chico);
  line-height: 1.3;
  color: var(--texto-suave);
}

/* La efe llena su dibujo de arriba abajo, mientras que el de Instagram trae
   aire propio alrededor. A la misma medida la efe se ve más grande, así que se
   baja un poco para que las dos pesen igual a la vista. */
.contacto__red-icono--fb {
  height: 23px;
}

/* --------------------------------------------------------------------------
   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);
}