/* ==========================================================================
   Sección y título
   ========================================================================== */
.lfi-contacto {
  padding-block: var(--lfi-pad-card);   /* móvil (40) */
}

/* Título ExtraBold 50 navy. En el Figma va en la columna izquierda, sobre la
   info; su separación con la info la da el gap de .lfi-contacto__col--main. */
.lfi-contacto__title {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-extrabold);
  font-size: var(--lfi-fs-36);                 /* móvil; desktop -> 50 */
  line-height: var(--lfi-lh-display);
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-navy);
}

/* ==========================================================================
   Rejilla: columna principal (título + info) | formulario.
   Base (móvil): apilado en 1 columna. En ≥1024 pasa a las 2 columnas del Figma.
   ========================================================================== */
.lfi-contacto__grid {
  display: flex;
  flex-direction: column;
  gap: var(--lfi-contacto-col-gap);
}
.lfi-contacto__col--main {
  display: flex;
  flex-direction: column;
  gap: var(--lfi-contacto-title-gap);   /* título → info */
}

/* ==========================================================================
   Columna de info
   ========================================================================== */
.lfi-contacto__info {
  display: flex;
  flex-direction: column;
  gap: var(--lfi-contacto-info-gap);
}

.lfi-contacto__info-row {
  display: flex;
  align-items: center;   /* móvil: icono centrado con su texto (bloque cuadrado) */
  gap: var(--lfi-contacto-icon-gap);
}

/* Icono real del Figma (SVG rojo). Tamaño EXPLÍCITO y cuadrado: los SVG llevan
   preserveAspectRatio="none" y viewBox cuadrado, y su tamaño intrínseco varía
   entre navegadores (Chrome -> 0, otros -> ~71px), lo que descuadraba el bloque.
   Fijar ancho = alto lo estabiliza en todos. */
.lfi-contacto__info-icon {
  flex: 0 0 auto;
  height: var(--lfi-contacto-icon-size);   /* 48 */
  width: var(--lfi-contacto-icon-size);    /* 48 (cuadrado) */
}

.lfi-contacto__info-line {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-regular);
  /* DECISIÓN MÓVIL: 15px para que el email (SemiBold) quepa completo a 375px
     (a 19px se sale). En ≥768 se recupera el 19 del Figma. */
  font-size: var(--lfi-fs-15);
  letter-spacing: var(--lfi-ls-none);       /* info de Contacto sin tracking */
  color: var(--lfi-navy);
  overflow-wrap: anywhere;                  /* nunca desborda en horizontal */
}

/* Etiquetas "Madrid:" / "Almería:" en SemiBold. */
.lfi-contacto__info-label {
  font-weight: var(--lfi-weight-semibold);
}
/* Teléfono y email: SemiBold 19 (Figma 18:124 / 18:125). */
.lfi-contacto__info-line--strong {
  font-weight: var(--lfi-weight-semibold);
}

/* Enlaces (tel / email): navy por defecto; hover invierte a rojo. */
.lfi-contacto__info a {
  color: var(--lfi-navy);
  transition: color 0.2s ease;
}
.lfi-contacto__info a:hover,
.lfi-contacto__info a:focus-visible {
  color: var(--lfi-red);
}

/* ==========================================================================
   Formulario (maqueta estática — sin envío)
   ========================================================================== */
.lfi-contacto__form {
  display: flex;
  flex-direction: column;
  gap: var(--lfi-contacto-field-gap);
}

/* Fila con dos campos (Nombre + Apellidos): base 1 col, 2 cols en tablet+. */
.lfi-contacto__row--split {
  display: flex;
  flex-direction: column;
  gap: var(--lfi-contacto-field-gap);
}

.lfi-contacto__field {
  display: flex;
  flex-direction: column;
  gap: var(--lfi-contacto-label-gap);
}

.lfi-contacto__label {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-thin);   /* Thin 15 */
  font-size: var(--lfi-fs-15);
  letter-spacing: var(--lfi-ls-none);    /* labels de Contacto sin tracking */
  color: var(--lfi-navy);
}

.lfi-contacto__input {
  width: 100%;
  height: var(--lfi-field-height);        /* 55px */
  padding-inline: var(--lfi-contacto-field-pad-x);
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-regular);
  font-size: var(--lfi-fs-19);
  color: var(--lfi-navy);
  background: var(--lfi-white);
  border: 1px solid var(--lfi-navy);      /* borde navy */
  border-radius: var(--lfi-radius-btn);   /* 13px */
  transition: border-color 0.2s ease;
}
.lfi-contacto__input:focus {
  outline: none;
  border-color: var(--lfi-red);
}
/* Etiqueta como placeholder dentro del campo (Figma: Thin 15 navy). */
.lfi-contacto__input::placeholder {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-thin);
  font-size: var(--lfi-fs-15);
  color: var(--lfi-navy);
  opacity: 1;
}

.lfi-contacto__textarea {
  height: auto;
  min-height: var(--lfi-contacto-textarea-h);
  padding-block: 16px;
  resize: vertical;
}

/* Botón de envío: rojo → invierte a navy en hover (regla 6). */
.lfi-contacto__submit {
  align-self: flex-start;
  min-height: var(--lfi-btn-height);      /* 56px */
  padding-inline: var(--lfi-btn-pad-x);
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-bold);
  font-size: var(--lfi-fs-21);
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-white);
  background: var(--lfi-red);
  border: 0;
  border-radius: var(--lfi-radius-btn);   /* 13px */
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.lfi-contacto__submit:hover,
.lfi-contacto__submit:focus-visible {
  background: var(--lfi-navy);
  color: var(--lfi-white);
}

/* ==========================================================================
   BREAKPOINT 768px — tablet
   Nombre + Apellidos pasan a 2 columnas dentro del formulario.
   ========================================================================== */
@media (min-width: 768px) {
  .lfi-contacto__row--split {
    flex-direction: row;
  }
  .lfi-contacto__row--split .lfi-contacto__field {
    flex: 1 1 0;
  }
  /* Ya hay ancho de sobra: se recupera el tamaño del Figma (19px). */
  .lfi-contacto__info-line { font-size: var(--lfi-fs-19); }
}

/* ==========================================================================
   BREAKPOINT 1024px — desktop (réplica del Figma a 1440)
   Info (izq) + formulario (der) en 2 columnas.
   Reparto ~ mitad y mitad; a validar con las medidas reales del frame 11:701.
   ========================================================================== */
@media (min-width: 1024px) {
  .lfi-contacto { padding-block: var(--lfi-contacto-py); }   /* 134 (Figma) */
  .lfi-contacto__title { font-size: var(--lfi-fs-50); }      /* réplica Figma */
  /* Escritorio: alineación del Figma (icono arriba, no centrado). */
  .lfi-contacto__info-row { align-items: flex-start; }
  .lfi-contacto__grid {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--lfi-contacto-col-gap);
  }
  .lfi-contacto__col--main { flex: 1 1 auto; }
  .lfi-contacto__col--form { flex: 0 0 var(--lfi-contacto-form-w); }   /* 548 (Figma) */
}