/* ==========================================================================
   CONTACTO (formulario) + FOOTER
   ========================================================================== */


/* --------------------------------------------------------------------------
   Sección de contacto
   -------------------------------------------------------------------------- */

.contact {
  padding: 60px var(--page-gutter) 0;
}

.contact__title {
  padding-bottom: 50px;
  color: var(--color-gold);
  font-family: var(--font-display);
  font-size: 65px;
  font-weight: var(--font-display-weight);
  line-height: 1;
  text-align: center;
}


/* --------------------------------------------------------------------------
   Formulario
   Fila 1: nombre · motivo · email. Fila 2: mensaje · botón.
   En móvil, todo en una columna.
   -------------------------------------------------------------------------- */

.contact-form {
  display: grid;
  row-gap: 24px;
}

.contact-form__row {
  display: grid;
  gap: 24px 16px;
  align-items: start;
}

/* minmax(0, 1fr): columnas exactamente iguales, sin que el tamaño natural
   de un campo las ensanche ni haga que se desborden */
.contact-form__row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.contact-form__row--two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Fila mensaje + botón: el ancho de cada columna sirve para que el textarea
   copie el alto y las esquinas de la imagen del botón (860×480 con esquinas
   de 34px dibujadas en el archivo), que escalan con su ancho. */
.contact-form__row--two {
  container-type: inline-size;
  --send-column-width: calc((100cqw - 16px) / 2);              /* ancho de cada columna */
  --send-radius: calc(var(--send-column-width) * 34 / 860);    /* radio de la imagen al tamaño mostrado */
}

.contact-form__field {
  display: block;
}

.contact-form__input {
  display: block;
  width: 100%;
  padding: 5px 14px;
  background-color: var(--color-background);
  border: 1px solid var(--color-ink);
  border-radius: 40px;
  color: var(--color-ink);   /* #232220: texto que escribe el usuario (el placeholder tiene su propio color) */
  font-family: var(--font-body);
  font-size: 28px;
  line-height: 1.4;
  outline: none;
  -webkit-appearance: none;   /* sin estilos propios del navegador (sombras, bordes de iOS) */
          appearance: none;
  transition: border-color 0.2s;
}

/* Autocompletado (Chrome/Safari/Edge y Firefox): conserva el fondo crema y el
   color de texto del formulario en lugar del azul/blanco del navegador. */
.contact-form__input:-webkit-autofill,
.contact-form__input:-webkit-autofill:hover,
.contact-form__input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-background) inset;
          box-shadow: 0 0 0 1000px var(--color-background) inset;
  -webkit-text-fill-color: var(--color-ink);
  caret-color: var(--color-ink);
  transition: background-color 9999s ease-out 0s;   /* evita que el navegador pinte su color */
}

.contact-form__input:autofill {
  box-shadow: 0 0 0 1000px var(--color-background) inset;
}

.contact-form__input::placeholder {
  color: var(--color-field-text);
  opacity: 1;
}

.contact-form__input:focus {
  border-color: var(--color-gold);
}

.contact-form__input.is-invalid {
  border-color: var(--color-error);
}

/* El mensaje mide lo mismo que la imagen del botón y tiene sus mismas esquinas */
.contact-form__textarea {
  height: calc(var(--send-column-width) * 480 / 860);
  border-radius: var(--send-radius);
  resize: none;
}

/* Botón ilustrado: ocupa todo el ancho de su columna (sus esquinas y su
   contorno de 1px #232220 vienen dibujados en la imagen) */
.contact-form__submit-wrapper {
  display: flex;
  justify-content: flex-start;
}

/* El botón es un marco fijo: nunca cambia de tamaño y recorta la imagen con
   las mismas esquinas que trae dibujadas. */
.contact-form__submit {
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
  /* Las imágenes traen dibujada una esquina de 41px en 860×480 (≈30px con el
     botón a 632px). Si el marco fuera menor, en hover y al enviar (imagen a
     escala 1) esa esquina quedaría dentro del borde y se verían dos curvas.
     Se usa 25px o, si es mayor, el radio de la imagen: 41/860 del ancho y
     41/480 del alto, que dan los mismos píxeles (esquina circular). */
  border-radius: max(25px, 4.767%) / max(25px, 8.542%);
  background: none;
  border: 0;
  cursor: pointer;
}

/* Borde único del botón, pintado ENCIMA de la imagen: queda fijo aunque la
   imagen se amplíe y tapa el contorno dibujado en el PNG (que al reducirse
   se ve más fino y claro), así nunca hay dos bordes superpuestos. */
.contact-form__submit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid var(--color-ink);
  border-radius: inherit;
  pointer-events: none;
}

.contact-form__submit:focus-visible {
  outline: 2px solid var(--color-gold);   /* indicador de foco con teclado */
  outline-offset: 2px;
}

.contact-form__submit-image {
  width: 100%;
  height: auto;   /* conserva la proporción 860×480 */
  transition: transform 0.35s ease;
}

/* Con mouse: la imagen empieza un poco ampliada dentro del marco y al pasar
   el cursor se reduce a su tamaño real */
@media (hover: hover) {
  .contact-form__submit-image {
    transform: scale(1.06);   /* ✏️ ampliación en reposo */
  }

  .contact-form__submit:hover .contact-form__submit-image {
    transform: scale(1);
  }
}

/* Estados del botón */
.contact-form.is-sending .contact-form__submit {
  opacity: 0.6;
  cursor: wait;
}

.contact-form.is-sent .contact-form__submit {
  cursor: default;
}

/* Después de enviar ("Listo!" / "Done!") la imagen se ve completa, sin zoom */
.contact-form.is-sent .contact-form__submit-image {
  transform: none;
}

.contact-form__status {
  min-height: 1.4em;
  font-size: 16px;
  text-align: center;
}

/* Línea gris de 1px bajo el formulario, del ancho del contenedor
   (como las líneas de los acordeones) */
.contact__divider {
  height: 0;
  margin: 40px 0 0;
  border: 0;
  border-top: 1px solid #232220;
}

@media (max-width: 767px) {
  .contact__title {
    font-size: 40px;
  }

  /* Versión en inglés: el <br> de "…decisions start<br> with…" dejaba
     "start" sola en móvil. Sin él, la frase se reparte según el ancho
     ("The best decisions / start with a / conversation."). */
  html[lang="en"] .contact__title {
    text-wrap: pretty;   /* evita una palabra suelta en la última línea */
  }

  html[lang="en"] .contact__title br {
    display: none;
  }

  .contact-form__row--three,
  .contact-form__row--two {
    grid-template-columns: 1fr;
  }

  /* Letra de los campos más pequeña en móvil (texto escrito y placeholder, que
     la hereda). El interlineado se fija en el de 28px (28 × 1.4 = 39.2px): los
     campos y el mensaje de 4 filas conservan exactamente su alto. */
  .contact-form__input {
    font-size: 20px;      /* ✏️ 28px en tablet y escritorio */
    line-height: 39.2px;
  }

  /* En móvil el mensaje conserva su alto natural (4 filas) y el radio de los demás campos */
  .contact-form__textarea {
    height: auto;
    border-radius: 25px;
  }

  .contact-form__submit {
    width: 100%;
  }

  /* En móvil la imagen mide min(357px, 100%): sus esquinas escalan con ese ancho */
  .contact-form__row--two {
    --send-column-width: min(357px, 100cqw);
  }
}


/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  container-type: inline-size;   /* 100cqw = ancho del footer (la ventana sin la barra de scroll) */
  padding: 80px var(--page-gutter) 0;   /* sin espacio abajo: el logo queda pegado al final de la página */
}

.site-footer__title {
  padding: 0 10px 0 0;   /* sin padding izquierdo: alineado con el borde del contenedor */
  color: var(--color-gold);
  font-family: var(--font-display);
  font-size: 65px;
  font-weight: var(--font-display-weight);
  line-height: 1;
}

/* Email (35%) · redes (65%) */
.site-footer__links {
  display: grid;
  grid-template-columns: 35fr 65fr;
  align-items: center;
  padding: 40px 0 50px;
  font-size: 22px;
  line-height: 1.4;
}

/* Redes en un grupo compacto alineado a la derecha: la última ("LinkedIn")
   termina en el borde derecho del contenedor. */
.site-footer__social {
  display: flex;
  justify-content: flex-end;
}

.site-footer__social li {
  display: flex;
  align-items: center;
}

/* Separador dorado vertical entre redes, con el mismo espacio a cada lado.
   La línea es un borde (no un fondo de 1.5px de ancho): el navegador ajusta
   el grosor de los bordes igual para todos, mientras que el ancho de un fondo
   se redondea a 1 o 2 píxeles según dónde caiga cada separador. */
.site-footer__social li:not(:last-child)::after {
  content: "";
  flex: none;
  width: 0;
  height: 22px;
  margin-inline: min(0.8em, 2.2vw);   /* ✏️ espacio entre cada red y el separador (en pantallas muy estrechas se reduce para que quepa) */
  border-left: 1.5px solid var(--color-gold);   /* ✏️ grosor */
}

.site-footer a:hover {
  color: var(--color-gold);
}

/* Logo grande de borde a borde de la pantalla (imagen-footer.png).
   Sale del contenedor de 1280px y del padding del footer con un margen
   negativo: 100% = ancho del contenedor, 100cqw = ancho del footer.
   Con mouse, en hover se cambia por imagen-footer-hover.png con un fundido.
   overflow: hidden recorta la imagen de hover al área del logo original. */
.site-footer__logo {
  display: grid;
  margin-inline: calc((100% - 100cqw) / 2 - var(--page-gutter));
  overflow: hidden;
}

/* La imagen normal va dentro de un <picture> (footer-mov.png en móvil): el
   <picture> ocupa la misma celda, así la de hover sigue encima de ella */
.site-footer__logo picture {
  display: block;
  grid-area: 1 / 1;
}

.site-footer__logo img {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  transition: opacity 0.8s ease;   /* ✏️ fundido entre las dos imágenes */
}

/* imagen-footer-hover.png (1960×425) es el lienzo del original (1920×340)
   con margen extra: 20px a cada lado, 69px arriba (el arco dorado) y 16px
   abajo; sus letras miden y están igual que las del original. Se muestra a
   la MISMA escala, desplazada ese margen: las letras coinciden exactamente,
   sin deformar nada, y el margen sobrante (casi transparente arriba, el
   mismo dorado liso abajo) queda fuera del recorte.
   Medidas en % del ancho del logo (los márgenes en % se calculan sobre él). */
.site-footer__logo .site-footer__logo-hover {
  display: none;   /* sin hover (táctil) no se usa ni se descarga */
  width: calc(100% * 1960 / 1920);
  margin: calc(-100% * 69 / 1920) calc(-100% * 20 / 1920) calc(-100% * 16 / 1920);
  opacity: 0;
  /* El arco se desvanece justo donde lo corta el recorte (69/425 = 16.2% del
     alto), para que no quede un borde recto; las letras empiezan al 46%. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 16.2%, #000 32%);
          mask-image: linear-gradient(to bottom, transparent 16.2%, #000 32%);
}

@media (hover: hover) {
  .site-footer__logo .site-footer__logo-hover { display: block; }

  .site-footer__logo:hover .site-footer__logo-hover   { opacity: 1; }
  .site-footer__logo:hover .site-footer__logo-default { opacity: 0; }
}

@media (max-width: 767px) {
  /* Menos espacio entre la línea del formulario y "No perdamos contacto!"
     (80px en tablet y escritorio, desproporcionado con el título de 34px) */
  .site-footer {
    padding-top: 48px;   /* ✏️ */
  }

  .site-footer__title {
    font-size: 34px;
  }

  /* En móvil: sin el correo; las redes van justo debajo de "No perdamos
     contacto!", alineadas a la izquierda como el título */
  .site-footer__links {
    grid-template-columns: 1fr;
    row-gap: 20px;
    padding-top: 16px;   /* ✏️ separación entre el título y las redes */
    font-size: 14px;
  }

  .site-footer__email {
    display: none;
  }

  .site-footer__social {
    justify-content: flex-start;
  }
}