/* ==========================================================================
   Grand Tour Adventure — Home
   Figma: página "Grand tour web" / frame "Home" 5763:1693 (1300 × 3523)
   Referencia móvil: frame 5760:29724 (402 de ancho)
   Cada bloque indica el nodo del que sale.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Barra superior · 5763:1811 "Frame 1248" (1300×48, absoluta sobre el hero)
   -------------------------------------------------------------------------- */
.gt-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gt-topbar__brand {
  /* 5763:1813 "Frame 9" */
  display: flex;
  align-items: center;
  height: 48px;
  padding: 16px;
  background: var(--gt-white);
  text-decoration: none;
  flex: 0 0 auto;
}

.gt-topbar__brand img {
  width: 200px;
  height: 16px;
}

/* 5763:1814 */
.gt-menu-btn {
  /* I…;5588:47732 */
  width: 48px;
  height: 48px;
  padding: 8px;
  border: 0;
  background: var(--gt-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.gt-menu-btn img {
  width: 32px;
  height: 32px;
}

/* --------------------------------------------------------------------------
   Panel de menú · I5763:1822;5588:47700 "Frame 1170" (545×859)
   En el Figma está fuera de lienzo a la derecha: entra deslizando.
   -------------------------------------------------------------------------- */
.gt-menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 55;
  width: min(545px, 100vw);
  height: 100vh;
  height: 100dvh;
  background: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  padding: 80px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translateX(101%);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.gt-menu.is-open {
  transform: translateX(0);
}

.gt-menu__list {
  width: 100%;
  text-align: right;
}

.gt-menu__list a {
  display: block;
  text-decoration: none;
  font-weight: 700;
  font-size: 48px;
  line-height: 90px;
  letter-spacing: -.05em;
  transition: transform .3s ease, opacity .3s ease;
}

/* Cada opción con su color · characterStyleOverrides de I5763:1822;5588:47701 */
.gt-menu__list a[data-gt-sec="home"] {
  --gt-sec: var(--gt-menu-home);
}

.gt-menu__list a[data-gt-sec="events"] {
  --gt-sec: var(--gt-menu-events);
}

.gt-menu__list a[data-gt-sec="technology"] {
  --gt-sec: var(--gt-menu-technology);
}

.gt-menu__list a[data-gt-sec="travel"] {
  --gt-sec: var(--gt-menu-travel);
}

.gt-menu__list a[data-gt-sec="operations"] {
  --gt-sec: var(--gt-menu-operations);
}

.gt-menu__list a[data-gt-sec="corporate"] {
  --gt-sec: var(--gt-menu-corporate);
}

.gt-menu__list a[data-gt-sec="production"] {
  --gt-sec: var(--gt-menu-production);
}

.gt-menu__list a[data-gt-sec="contact"] {
  --gt-sec: var(--gt-menu-contact);
}

/* El color se fija en TODOS los estados. Si sólo se declara el normal, el
   tema padre (Hello Elementor) mete el suyo al pasar por encima —salía rosa—
   y también en :visited. */
.gt-menu__list a,
.gt-menu__list a:link,
.gt-menu__list a:visited,
.gt-menu__list a:hover,
.gt-menu__list a:focus,
.gt-menu__list a:active {
  color: var(--gt-sec, currentColor);
}

.gt-menu__list a:hover {
  transform: translateX(-8px);
  opacity: .75;
}

html.gt-menu-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   1 · Hero · 5763:1694 (1300×650) + 5763:1695 ("20") + 5763:1755 (H1)
   Móvil: 402×332. Alto interpolado entre ambos.
   -------------------------------------------------------------------------- */
.gt-hero {
  position: relative;
  overflow: hidden;
  background: var(--gt-black);
  height: clamp(332px, calc(35.412vw + 189.64px), 650px);
}

.gt-hero__watermark {
  /* 5763:1695 · x160 y89 */
  position: absolute;
  left: 50%;
  top: 13.7%;
  width: 75.5%;
  transform: translateX(-50%);
  z-index: 2;
  user-select: none;
  pointer-events: none;
  margin: 0;
}

.gt-hero__title {
  /* 5763:1755 · x174 y205 */
  /* Pegado al borde inferior de la foto, como en el resto de páginas. En el
     artboard de la Home va centrado (205 arriba, 205 abajo), pero se unifica
     a propósito: el titular tiene que acabar justo donde empieza la sección
     siguiente en las nueve. Así, además, las líneas de más crecen hacia
     arriba y nunca se descuelga. */
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(952px, 92%);
  transform: translateX(-50%);
  z-index: 3;
  margin: 0;
}

/* --------------------------------------------------------------------------
   2 · Intro · 5763:1696 "Frame 1141" (pad 48/100 -> 48/24, gap 48 -> 32)
   -------------------------------------------------------------------------- */
.gt-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gt-gap);
  padding: 48px var(--gt-gutter);
}

.gt-intro__inner {
  /* 5763:1697 "Frame 1180" */
  width: 100%;
  max-width: var(--gt-content);
  display: flex;
  flex-direction: column;
  gap: var(--gt-gap);
}

.gt-intro__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.gt-intro__logo {
  width: min(319px, 80%);
  height: auto;
}

.gt-intro__claim {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.gt-intro__claim .gt-h2 {
  margin: 0;
  width: 100%;
}

.gt-intro__claim .gt-lead {
  text-align: center;
}

.gt-intro__body {
  text-align: center;
}

.gt-intro__body p+p {
  margin-top: 32px;
}

/* Buscador · 5763:1742 "Frame 1182" + resplandor 5763:1743 "Ellipse 3" */
.gt-finder {
  position: relative;
  width: min(662px, 100%);
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.gt-finder__glow {
  position: absolute;
  left: 50%;
  top: -30px;
  width: 157%;
  height: 324px;
  max-height: 100%;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(213, 160, 62, .40) 0%, rgba(213, 160, 62, 0) 70%);
}

.gt-finder>*:not(.gt-finder__glow) {
  position: relative;
  z-index: 1;
}

.gt-finder__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.gt-finder__head .gt-h3 {
  margin: 0;
}

.gt-finder__head .gt-lead {
  text-align: center;
}

.gt-finder__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.gt-search {
  /* 5763:1749 · 418×48 */
  width: min(418px, 100%);
  height: 48px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--gt-white);
  border: 2px solid var(--gt-gold-light);
  border-radius: var(--gt-r-pill);
}

.gt-search__field {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.gt-search__field img {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.gt-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  line-height: 32px;
  letter-spacing: -.02em;
  color: var(--gt-black);
}

.gt-search__input::placeholder {
  color: var(--gt-black);
  opacity: 1;
}

.gt-search__submit {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}

.gt-search__submit:hover {
  transform: translateX(3px);
}

.gt-search__submit img {
  width: 32px;
  height: 32px;
}

.gt-finder__note {
  text-align: center;
}

/* --------------------------------------------------------------------------
   3 · Secciones · 5763:1758 "Frame 1160"
   Escritorio: dos filas de tres tarjetas 380×340, pad lateral 80, sin hueco.
   Móvil (5760:29933): apiladas, 370×160, con 16 de margen lateral.
   -------------------------------------------------------------------------- */
.gt-cards__row {
  display: flex;
  padding: 0 var(--gt-gutter-sm);
}

.gt-cards__row--dark {
  background: var(--gt-black);
}

/* En las páginas interiores la rejilla es otra cosa que en la Home: las dos
   filas van sobre negro («Frame 1160» lleva relleno negro ahí y en la Home no),
   la tarjeta mide 380x160 en vez de 380x340 y no lleva texto al pie. Los 64 px
   de aire salen de sumar el relleno de «Frame 1160» y el de cada fila. */
.gt-cards--onblack .gt-cards__row {
  background: var(--gt-black);
}

.gt-cards--onblack .gt-cards__row--light {
  padding-top: 64px;
}

.gt-cards--onblack .gt-cards__row--dark {
  padding-bottom: 64px;
}

.gt-cards--onblack .gt-card {
  aspect-ratio: 380 / 160;
}

.gt-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: var(--gt-white);
  background: var(--gt-white);
  aspect-ratio: 380 / 340;
}

.gt-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

.gt-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}

/* En la tarjeta el rótulo hace de caja: se queda torcido y se enderezan las
   piezas de dentro (las dos rayas y el texto). */
.gt-card__label > * {
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}

.gt-card:hover .gt-card__label > * {
  transform: skewX(calc(-1 * var(--gt-skew)));
}

.gt-card:hover .gt-card__media img {
  transform: translate3d(0, var(--gt-py, 0), 0) scale(1.05);
}

/* Degradado del Figma: handles (0.5,0.4) -> (0.5,1.0), negro 0% -> negro 65% */
.gt-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .65) 100%);
}

.gt-cards__row--dark .gt-card__media::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, .10) 40%, rgba(0, 0, 0, .65) 100%);
}

/* 5763:1762 "Frame 1146" — centrada en el eje vertical de la tarjeta,
   más ancha que ella (se recorta) e inclinada en bloque: rayas, pastilla
   y letras giran juntas, igual que en el Figma. */
.gt-card__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skewX(var(--gt-skew));
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
  z-index: 2;
  width: 119%;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gt-card__rule {
  flex: 1 1 0;
  height: 8px;
  background: var(--gt-white);
  border-radius: 1px;
}

.gt-card__chip {
  flex: 0 0 auto;
  padding: 2px 24px;
  background: var(--gt-white);
  border-radius: var(--gt-r-sm);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: .05em;
  white-space: nowrap;
}

.gt-card--events .gt-card__chip {
  color: var(--gt-chip-events);
}

.gt-card--technology .gt-card__chip {
  color: var(--gt-chip-technology);
}

.gt-card--operations .gt-card__chip {
  color: var(--gt-chip-operations);
}

.gt-card--travel .gt-card__chip {
  color: var(--gt-chip-travel);
}

.gt-card--corporate .gt-card__chip {
  color: var(--gt-chip-corporate);
}

.gt-card--production .gt-card__chip {
  color: var(--gt-chip-production);
}

/* 5763:1761 — texto al pie de la tarjeta (25px desde abajo en el Figma) */
.gt-card__text {
  position: absolute;
  left: 50%;
  bottom: 25px;
  width: min(329px, 86%);
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  color: var(--gt-white);
}

/* --------------------------------------------------------------------------
   4 · Integración vertical · 5763:1803 "Frame 1163" (negro, pad 80/120)
   -------------------------------------------------------------------------- */
.gt-integration {
  background: var(--gt-black);
  color: var(--gt-white);
  padding: 80px var(--gt-gutter-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gt-gap);
}

.gt-integration .gt-h2 {
  margin: 0;
}

.gt-integration__body {
  max-width: var(--gt-content);
  text-align: center;
}

.gt-integration__body p+p {
  margin-top: 32px;
}

.gt-integration__lead {
  max-width: var(--gt-content);
  text-align: center;
}

.gt-btn--gold {
  background: var(--gt-gold);
  color: var(--gt-white);
}

.gt-btn--gold:hover {
  background: var(--gt-gold-mid);
}

/* --------------------------------------------------------------------------
   5 · Pie · 5763:1810 (componente 5608:29673) — blanco, filete #b89552
   -------------------------------------------------------------------------- */
.gt-footer {
  background: var(--gt-white);
  border-top: 1px solid var(--gt-gold);
  padding: 48px var(--gt-gutter-lg);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.gt-footer__cols {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  max-width: var(--gt-content);
  width: 100%;
  margin: 0 auto;
}

.gt-footer__left {
  flex: 0 1 588px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gt-footer__logo {
  width: 253px;
  max-width: 100%;
  height: auto;
}

.gt-footer__nav a {
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  line-height: 32px;
  letter-spacing: -.02em;
  transition: opacity .25s ease;
}

/* characterStyleOverrides de I5763:1810;5608:29659 — Corporate difiere del menú */
/* El pie usa los mismos colores que el menú superior. En el Figma el pie los
   tiene cambiados —Travel en rojo y Operations en verde, al revés que el menú
   y que los rótulos de tarjeta—; es un despiste del diseño, no un criterio. */
.gt-footer__nav a[data-gt-sec="home"] {
  --gt-sec: var(--gt-menu-home);
}

.gt-footer__nav a[data-gt-sec="events"] {
  --gt-sec: var(--gt-menu-events);
}

.gt-footer__nav a[data-gt-sec="technology"] {
  --gt-sec: var(--gt-menu-technology);
}

.gt-footer__nav a[data-gt-sec="travel"] {
  --gt-sec: var(--gt-menu-travel);
}

.gt-footer__nav a[data-gt-sec="operations"] {
  --gt-sec: var(--gt-menu-operations);
}

.gt-footer__nav a[data-gt-sec="corporate"] {
  --gt-sec: var(--gt-menu-corporate);
}

.gt-footer__nav a[data-gt-sec="production"] {
  --gt-sec: var(--gt-menu-production);
}

.gt-footer__nav a[data-gt-sec="contact"] {
  --gt-sec: var(--gt-menu-contact);
}

.gt-footer__nav a,
.gt-footer__nav a:link,
.gt-footer__nav a:visited,
.gt-footer__nav a:hover,
.gt-footer__nav a:focus,
.gt-footer__nav a:active {
  color: var(--gt-sec, currentColor);
}

.gt-footer__nav a:hover {
  opacity: .7;
}

/* Sellos IATA / ATTA — ampliados respecto al Figma (61×55 y 182×43) */
.gt-footer__awards {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.gt-footer__awards img {
  height: auto;
}

.gt-footer__awards .gt-award--iata {
  width: 95px;
}

.gt-footer__awards .gt-award--atta {
  width: 283px;
}

.gt-footer__right {
  flex: 0 1 337px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

.gt-footer__social {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  width: 100%;
  flex-wrap: wrap;
}

.gt-footer__social a {
  width: 32px;
  height: 32px;
  display: block;
  transition: transform .25s ease;
}

.gt-footer__social a:hover {
  transform: translateY(-3px);
}

.gt-footer__social img {
  width: 32px;
  height: 32px;
}

.gt-footer__cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: right;
  margin-top: 8px;
}

.gt-field {
  width: 100%;
  background: rgba(213, 213, 213, .40);
  border: 0;
  border-radius: 8px;
  padding: 4px 16px;
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  line-height: 32px;
  letter-spacing: -.02em;
  color: var(--gt-black);
  outline: 0;
}

.gt-field::placeholder {
  color: var(--gt-black);
  opacity: 1;
}

.gt-field--email {
  height: 40px;
}

.gt-field--message {
  height: 113px;
  resize: vertical;
}

.gt-footer__submit {
  align-self: flex-end;
}

.gt-footer__legal {
  max-width: var(--gt-content);
  width: 100%;
  margin: 0 auto;
  text-align: center;
  font-weight: 400;
  font-size: 10px;
  line-height: 20px;
  letter-spacing: -.02em;
  color: var(--gt-black);
}

/* ==========================================================================
   Puntos de ruptura
   ========================================================================== */

/* Tableta — el pie pasa a una columna */
@media (max-width:900px) {
  .gt-footer__cols {
    flex-direction: column;
  }

  .gt-footer__left,
  .gt-footer__right {
    flex: 1 1 auto;
    width: 100%;
  }

  .gt-footer__right {
    align-items: stretch;
  }

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

  .gt-footer__cta {
    text-align: left;
  }

  .gt-footer__submit {
    align-self: flex-start;
  }

  .gt-menu__list a {
    font-size: 38px;
    line-height: 70px;
  }
}

/* Móvil — tarjetas apiladas 370×160 con 16 de margen (artboard 5760:29933) */
@media (max-width:640px) {
  .gt-cards__row {
    flex-direction: column;
    padding: 0 16px;
  }

  /* OJO: al pasar la fila a columna, `flex:1 1 0` deja de fijar el ancho y
     pasa a fijar el ALTO, y con base 0 las seis tarjetas se quedaban en cero
     —la sección entera desaparecía—. En columna mandan el ancho y la
     proporción 370×160 del artboard móvil. */
  .gt-card {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 370 / 160;
  }

  /* El rótulo se sale de la tarjeta a propósito: 453 sobre 370 en el artboard
     móvil, la misma proporción que en el de escritorio. */
  .gt-card__label {
    width: 119%;
  }

  .gt-card__text {
    bottom: 16px;
    width: 92%;
  }

  .gt-hero__watermark {
    opacity: .55;
  }

  .gt-integration {
    padding: 48px var(--gt-gutter-lg);
  }

  .gt-intro__body p+p {
    margin-top: 24px;
  }

  .gt-footer__awards .gt-award--iata {
    width: 80px;
  }

  .gt-footer__awards .gt-award--atta {
    width: 230px;
  }

  .gt-menu {
    padding: 80px 24px;
  }

  .gt-menu__list a {
    font-size: 32px;
    line-height: 56px;
  }

  .gt-footer__cta .gt-small {
    font-size: 12px;
    line-height: 20px;
  }

  /* 12/20 en el artboard */
}

/* Móvil estrecho */
@media (max-width:400px) {
  .gt-topbar__brand {
    padding: 16px 12px;
  }

  .gt-topbar__brand img {
    width: 150px;
    height: 12px;
  }
}

/* Rótulo de la rejilla de secciones (sólo en páginas interiores)
   Figma «Frame 1187»: 42/48 Bold, centrado, y 64 px de aire por encima; en el
   artboard móvil son 32/28 y respira 48 arriba y abajo.
   El aire es del bloque «Divisions», que sólo existe en las interiores: en la
   Home la rejilla va pegada a lo que tiene encima y debajo, sin relleno. */
.gt-cards--onblack {
  padding-top: 64px;
}

.gt-cards__title {
  color: var(--gt-black);
}

/* Detrás del reset de titulares y con su misma especificidad, porque si no
   `margin: 0` se lo come. Baja el rótulo el hueco que la caja de texto deja
   por debajo de la línea base —8 px a 42/48— para que las letras apoyen en el
   borde de la banda negra. */
.gt-scope .gt-cards__title {
  margin-bottom: -9px;
}

@media (max-width:640px) {
  .gt-cards--onblack {
    padding-top: 48px;
  }

  .gt-cards__title {
    line-height: 28px;
  }

  .gt-scope .gt-cards__title {
    margin-bottom: -3px;
    /* a 32/28 el hueco es de 3 */
  }
}

/* --------------------------------------------------------------------------
   Formulario de contacto (sólo tiene efecto en WordPress)
   La trampa antirrobots se saca de pantalla en vez de ocultarla con display,
   que algunos robots detectan.
   -------------------------------------------------------------------------- */
.gt-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.gt-aviso {
  margin: 0 0 8px;
  padding: 8px 12px;
  border-radius: var(--gt-r-sm);
  background: rgba(255, 255, 255, .14);
  color: var(--gt-white);
}

.gt-aviso--error,
.gt-aviso--faltan {
  background: rgba(206, 20, 23, .18);
}

/* --------------------------------------------------------------------------
   Resultados de búsqueda (WordPress)
   -------------------------------------------------------------------------- */
.gt-busqueda {
  padding: 120px var(--gt-gutter) 96px;
}

.gt-busqueda__lista {
  max-width: var(--gt-content);
  margin: 32px auto 0;
}

.gt-busqueda__lista li+li {
  margin-top: 24px;
}

.gt-busqueda__lista a {
  color: var(--gt-gold);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   «See more» de Technology
   La variante «extended» del Figma es esta misma página con el botón quitado y
   dos filas más a la vista, así que van aquí dentro y ocultas. `display:contents`
   hace que al mostrarlas se coloquen como hijas directas de la columna, con su
   separación, en vez de agruparse dentro de una caja intermedia.
   -------------------------------------------------------------------------- */
.gt-mas {
  display: contents;
}

.gt-mas[hidden] {
  display: none;
}

.gt-mas__btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}


.gt-vermas {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: var(--gt-r-sm);
  color: var(--gt-white);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  /* 1,12 sobre 16 en el Figma: el «See more» va algo más suelto que los
     chips de sección, que llevan 0,8. */
  letter-spacing: .07em;
  white-space: nowrap;
  transform: skewX(-24deg) scaleY(.9135);
  transform-origin: top left;
  margin-left: 16.3px;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}

/* La caja se queda romboide; lo que se endereza es el rótulo, con la
   inclinación contraria. Sólo el skewX, para no tocar la altura. */
.gt-vermas > span {
  display: inline-block;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}

.gt-vermas:hover > span {
  transform: skewX(calc(-1 * var(--gt-skew)));
}

/* --------------------------------------------------------------------------
   Controles del formulario de CONTACT
   Las cajas ya vienen maquetadas del Figma; el control va dentro, sin adornos
   propios, para que se vea la caja y no el estilo del navegador.
   -------------------------------------------------------------------------- */
.gt-control {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  outline: none;
  font: inherit;
  color: inherit;
  padding: 0 16px;
}

textarea.gt-control {
  padding: 12px 16px;
  resize: vertical;
}

select.gt-control {
  cursor: pointer;
}

.gt-control::placeholder {
  color: currentColor;
  opacity: .55;
}

.gt-control:focus-visible {
  outline: 2px solid var(--gt-gold);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Bloques de vídeo
   En el Figma son una tarjeta con una foto y un botón de play dibujado; aquí
   va el vídeo de verdad, con la misma proporción que tenía la foto (cada
   bloque fija la suya en la hoja de su página).
   -------------------------------------------------------------------------- */
.gt-video__marco {
  display: block;
  width: 100%;
  border: 0;
}

/* La tarjeta hace de portada y es pulsable: fuera los adornos del navegador
   —un <button> trae borde `outset` negro por defecto— y cursor de mano. */
button.gt-video {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

button.gt-video:focus-visible {
  outline: 2px solid var(--gt-gold);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Tira de fotos (PRODUCTION y TRAVEL)
   Ocupa todo el ancho de la ventana y se desplaza sola. Se ven dos fotos
   enteras y un cuarto asomando por cada lado, que es lo que le dice al
   visitante que aquello sigue. La pista lleva las fotos duplicadas y el
   recorrido es justo la mitad, así que el bucle no da tirón.
   -------------------------------------------------------------------------- */
.gt-galeria {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}

.gt-galeria__pista {
  animation: gt-galeria 48s linear infinite;
  will-change: transform;
}

.gt-galeria:hover .gt-galeria__pista {
  animation-play-state: paused;
}

.gt-galeria__foto {
  flex: 0 0 auto;
  /* 2 enteras + 2 cuartos = 2,5 fotos en pantalla, descontando sus huecos */
  width: calc((100vw - 2.5 * var(--gt-galeria-hueco, 32px)) / 2.5);
  aspect-ratio: 563 / 328;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@keyframes gt-galeria {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* En móvil el artboard aprieta el hueco a 12 y enseña casi dos fotos: con las
   2,5 del escritorio se quedaban en 124 px y no se veía nada. */
@media (max-width:640px) {

  /* con .gt-scope delante: la hoja de la página trae el hueco del artboard de
     escritorio con la misma especificidad y se carga después */
  .gt-scope .gt-galeria__pista {
    gap: 12px;
  }

  .gt-galeria__foto {
    width: calc((100vw - 1.75 * 12px) / 1.75);
  }
}

@media (prefers-reduced-motion:reduce) {
  .gt-galeria__pista {
    animation: none;
  }

  .gt-galeria {
    overflow-x: auto;
  }

  /* si no se mueve sola, que se pueda arrastrar */
}