/* ==========================================================================
   contacto.css
   --------------------------------------------------------------------------
   Las tres vías de contacto de /contacto/.

   SIN TARJETA. Justo debajo van las sedes, que sí son tarjetas con filo y
   sombra; repetir el mismo recurso en dos secciones seguidas las haría parecer
   lo mismo, y no lo son: arriba hay tres acciones, abajo siete direcciones.
   Aquí el peso lo lleva el símbolo y el dato, sin caja alrededor.

   Mobile-first: los estilos base son los de móvil.
   ========================================================================== */

/* --------------------------------------------------------------------------
   El aire ENTRE las dos secciones se pide una sola vez
   --------------------------------------------------------------------------
   La sección de sedes trae 104px de relleno superior, pensados para la home,
   donde separa dos bloques de peso. Aquí se sumaban a los 64 de esta sección y
   dejaban 168px de blanco entre las tres vías y el título de abajo. Como las
   dos secciones son blancas, no se leía como separación sino como un hueco.

   Esta sección cierra sin relleno inferior y la de sedes abre con menos, solo
   cuando va detrás de esta. La home no se entera.
   -------------------------------------------------------------------------- */

.gt-contact {
  background-color: var(--color-bg);
  padding-block: 48px 0;
}

.gt-contact + .gt-locations {
  padding-top: 56px;
}

/* --------------------------------------------------------------------------
   .gt-contact__ways — las vías
   --------------------------------------------------------------------------
   Una sola columna, siempre: es la banda estrecha, al lado del formulario.

   Cinco filas, en dos grupos. Arriba, las tres formas de que le contesten:
   correo, teléfono y WhatsApp. Debajo, separados por un filo, los dos perfiles
   —LinkedIn y YouTube—, que no son un canal por donde llamar sino dos sitios
   donde mirar quién es la empresa.
   -------------------------------------------------------------------------- */

.gt-contact__ways {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   .gt-contact__way — una vía
   --------------------------------------------------------------------------
   ENTERA PULSABLE, no solo el dato. En un móvil, apuntar a un enlace de texto
   de dos milímetros es lo que hace que la gente desista; con el bloque entero
   como destino, basta con tocar por ahí cerca.
   -------------------------------------------------------------------------- */

.gt-contact__way {
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-items: center;

  padding: 16px 12px;

  text-decoration: none;
  border-radius: 3px;

  transition: background-color 0.2s ease;
}

/* AL PASAR EL RATÓN, UN TINTE DEL ACENTO, NO EL GRIS DE ANTES. El gris era
   exactamente el mismo del panel del formulario, al otro lado del pasillo: al
   pasar por encima, la vía no parecía activarse, parecía convertirse en panel.
   Un velo del rojo de la casa —siete por ciento, apenas un tinte— dice lo mismo
   sin copiar a nadie y emparenta el fondo con el círculo, que es lo que de
   verdad cambia. */
.gt-contact__way:hover,
.gt-contact__way:focus-visible {
  background-color: #fdf5f5;
  background-color: color-mix(in srgb, var(--color-accent) 7%, var(--color-bg));
  text-decoration: none;
}

.gt-contact__way:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* EL FILO QUE SEPARA LOS DOS GRUPOS. Va en la PRIMERA fila del segundo grupo y
   no en la última del primero: así, si algún día se quita un perfil, el filo se
   va con él y no se queda una raya suelta debajo de WhatsApp.

   No lleva rótulo. Un «Síganos» encima de dos filas obligaría a leer una palabra
   más para entender algo que los propios nombres —LinkedIn, YouTube— ya dicen. */
.gt-contact__way--corte {
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid #dde3e8;
  border-top: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);

  /* El velo del hover se detiene ANTES del filo. Por defecto el fondo se pinta
     también por debajo del borde, y un filo translúcido sobre el velo rosado
     cambia de color solo en esta fila: parecería que el filo se enciende. */
  background-clip: padding-box;
}

/* El símbolo ocupa las dos filas, a la izquierda del rótulo y del dato. */
.gt-contact__icon {
  grid-row: 1 / 3;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;

  background-color: var(--color-bg-alt);
  border-radius: 50%;
  color: var(--color-primary);

  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.gt-contact__way:hover .gt-contact__icon,
.gt-contact__way:focus-visible .gt-contact__icon {
  background-color: var(--color-primary);
  color: var(--color-bg);
}

.gt-contact__icon svg {
  width: 24px;
  height: 24px;
}

/* El rótulo dice qué es; el dato es lo que se copia o se marca. */
.gt-contact__label {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  line-height: 1.3;
  color: rgba(0, 0, 0, 0.55);
}

.gt-contact__value {
  font-family: var(--font-primary);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-primary);

  /* Una dirección de correo larga no puede empujar la columna a lo ancho. */
  overflow-wrap: anywhere;
}

.gt-contact__way:hover .gt-contact__value,
.gt-contact__way:focus-visible .gt-contact__value {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 768px) {

  .gt-contact {
    padding-block: 64px 0;
  }

  .gt-contact + .gt-locations {
    padding-top: 72px;
  }

}

@media (prefers-reduced-motion: reduce) {

  .gt-contact__way,
  .gt-contact__icon {
    transition: none;
  }

}

/* --------------------------------------------------------------------------
   El título de las sedes, a la izquierda
   --------------------------------------------------------------------------
   .gt-section-head centra en toda la web, y en la home está bien: allí cada
   sección es un anuncio. Esta página es una guía de datos, y lo que se recorre
   con la vista se lee mejor alineado con el margen del que cuelga todo lo demás.

   Se corrige AQUÍ y no en components.css: cambiarlo allí movería los títulos de
   la home y de las páginas de servicio.
   -------------------------------------------------------------------------- */

.gt-contact + .gt-locations .gt-section-head {
  text-align: left;
}

.gt-contact + .gt-locations .gt-section-head__title {
  margin-inline: 0;
}


/* --------------------------------------------------------------------------
   Los símbolos, en rojo
   --------------------------------------------------------------------------
   Es el acento OSCURECIDO, no el rojo tal cual: sobre el gris claro del círculo
   el acento puro se queda corto de contraste. Al pasar el ratón se invierte y el
   círculo pasa a rojo con el símbolo en blanco.
   -------------------------------------------------------------------------- */

.gt-contact__icon {
  color: #a03836;
  color: color-mix(in srgb, var(--color-accent) 86%, #000);
}

.gt-contact__way:hover .gt-contact__icon,
.gt-contact__way:focus-visible .gt-contact__icon {
  background-color: #a03836;
  background-color: color-mix(in srgb, var(--color-accent) 86%, #000);
  color: var(--color-bg);

  /* Y una sombra corta del propio rojo: el círculo se despega un dedo del papel.
     Es el mismo gesto que hace el botón de enviar al pasar por encima, y por eso
     no hay que aprenderlo dos veces. */
  box-shadow: 0 6px 16px rgba(160, 56, 54, 0.28);
}

/* El rótulo se oscurece con el resto. Estaba al 55% de negro, pensado para
   quedarse atrás; en la fila activa, quedarse atrás es justo lo contrario de lo
   que hace todo lo demás. */
.gt-contact__way:hover .gt-contact__label,
.gt-contact__way:focus-visible .gt-contact__label {
  color: rgba(0, 0, 0, 0.75);
}

/* --------------------------------------------------------------------------
   El país, en color
   --------------------------------------------------------------------------
   El rótulo de país pasa del azul al rojo del sitio para que separe los dos
   grupos de un vistazo. El COLOR NO ES LA ÚNICA SEÑAL: el país está escrito al
   lado, y debajo va su contador de sedes.
   -------------------------------------------------------------------------- */

.gt-contact + .gt-locations .gt-locations__country {
  color: #a03836;
  color: color-mix(in srgb, var(--color-accent) 86%, #000);
}

/* Aire entre el grupo de España y el de Italia: sin esto, la última fila de uno
   y el rótulo del siguiente quedan a la misma distancia que dos tarjetas. */
.gt-locations__group + .gt-locations__group {
  margin-top: 48px;
}

@media (min-width: 768px) {

  .gt-locations__group + .gt-locations__group {
    margin-top: 64px;
  }

}

/* --------------------------------------------------------------------------
   .gt-contact__layout — las dos columnas
   --------------------------------------------------------------------------
   Una sola columna hasta 1024. Entre 768 y 1024 caben dos, pero el formulario
   se quedaría en unos 350px y con siete campos eso se lee como un embudo: mejor
   apilado y ancho.

   La columna del formulario es la MAYOR. Es la acción que la página existe para
   provocar; las tres vías son el atajo para quien ya sabe qué quiere.

   minmax(0, …) en las dos, y no fracciones a secas: sin eso, una dirección de
   correo larga o un campo del formulario ensanchan su columna y descuadran la
   otra.
   -------------------------------------------------------------------------- */

.gt-contact__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

/* --------------------------------------------------------------------------
   .gt-contact__form — el formulario, en panel
   --------------------------------------------------------------------------
   Fondo gris y cajas blancas, igual que en el canal ético y en empleo: un
   formulario no es un párrafo más, es la zona donde se HACE algo.
   -------------------------------------------------------------------------- */

.gt-contact__form {
  padding: 24px 20px;
  background-color: var(--color-bg-alt);

  /* UN FILO, aunque haya fondo. Un rectángulo gris sobre blanco, sin borde, se
     lee como una mancha; con un filo de un píxel se lee como una pieza. Es el
     mismo azul rebajado de las cajas del formulario, más flojo, para que el
     panel no compita con lo que hay dentro. */
  border: 1px solid #dde3e8;
  border: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
  border-radius: 3px;
}

@media (min-width: 1024px) {

  .gt-contact__layout {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }

  .gt-contact__form {
    padding: 36px 40px;
  }
}