/* ==========================================================================
   Grand Tour Adventure — base (fuentes, tokens, tipografía, efectos)
   Prefijo .gt- en todo para convivir con WordPress + Elementor.

   Fuente: Inter 3.19.3 autoalojada. Es la versión que usa Figma; la que
   sirve Google Fonts hoy es la 4.x, con métricas más anchas que rompían
   los saltos de línea del diseño.
   ========================================================================== */

@font-face {
  font-family: 'InterGT';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'InterGT';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Inter-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'InterGT';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/Inter-Black.woff2') format('woff2');
}

:root {
  /* --- Marca ------------------------------------------------------------ */
  --gt-red: #ce1417;
  --gt-gold: #b89552;
  --gt-gold-light: #efc575;
  --gt-gold-mid: #d5a03e;
  --gt-gold-from: #7f5f23;
  --gt-gold-to: #e6ad43;
  --gt-blue-from: #437392;
  --gt-blue-to: #6dc6ff;
  --gt-black: #000000;
  --gt-white: #ffffff;

  /* Ángulo medido en los handles de degradado del Figma (≈86°) */
  --gt-grad-gold: linear-gradient(86deg, var(--gt-gold-from) 0%, var(--gt-gold-to) 100%);
  --gt-grad-blue: linear-gradient(86deg, var(--gt-blue-from) 0%, var(--gt-blue-to) 100%);

  /* --- Color por sección (characterStyleOverrides del Figma) --------------
     El Figma no repite el mismo valor en menú, pie y rótulo: se conservan
     los tres juegos tal cual están.
     ---------------------------------------------------------------------- */
  --gt-sec-home: #b89552;
  --gt-sec-events: #827609;
  --gt-sec-technology: #4980a3;
  --gt-sec-travel: #c10e1b;
  --gt-sec-operations: #819b13;
  --gt-sec-corporate: #20497a;
  --gt-sec-production: #d85b26;
  --gt-sec-contact: #000000;

  /* El menú NO usa los mismos valores que el pie: ahí Travel es rojo y
     Operations verde, y en el menú —igual que en los rótulos de tarjeta— es al
     revés. Se reproduce el Figma tal cual, con los dos juegos separados.
     Menú: nodo 5286:26934. */
  --gt-menu-home: #b89552;
  --gt-menu-events: #82771d;
  --gt-menu-technology: #4980a3;
  --gt-menu-travel: #819c29;
  --gt-menu-operations: #c2171d;
  --gt-menu-corporate: #185c6b;
  --gt-menu-production: #d85b26;
  --gt-menu-contact: #000000;

  --gt-chip-events: #827609;
  --gt-chip-technology: #4980a3;
  --gt-chip-operations: #c10e1b;
  --gt-chip-travel: #819b13;
  --gt-chip-corporate: #175b6b;
  --gt-chip-production: #ed6d36;

  /* --- Layout ------------------------------------------------------------
     Interpolación lineal entre los dos artboards reales del Figma:
     1300px (escritorio) y 402px (móvil).
     ---------------------------------------------------------------------- */
  --gt-page: 1300px;
  /* Alto del hero de las páginas interiores. Interpola entre los dos
     artboards —332 en el de 402 y 450 en el de 1300— para que el titular,
     que va anclado a su borde inferior, no dé saltos al reescalar. */
  --gt-hero: clamp(332px, calc(13.14vw + 279px), 450px);
  /* Cuánto asoma el titular por debajo de la foto. A cero, la última línea
     acaba justo en el borde inferior de la imagen. */
  --gt-hero-vuelo: 0px;
  /* La caja de una línea llega más abajo que las letras: con Inter a
     line-height 1 sobran 0,1375em por debajo de la base (el descendente menos
     la media interlínea; medido, 17 px a 120). Alineando la CAJA con el borde
     de la foto quedaba ese hueco, así que el titular baja esa cantidad y es la
     BASE de las letras la que apoya en la imagen. */
  --gt-h1-base: .1375em;
  --gt-content: 1100px;
  --gt-gutter: clamp(24px, calc(8.46vw - 10.03px), 100px);
  /* 100 -> 24 */
  --gt-gutter-lg: clamp(16px, calc(11.58vw - 30.56px), 120px);
  /* 120 -> 16 */
  --gt-gutter-sm: clamp(16px, calc(7.13vw - 12.66px), 80px);
  /*  80 -> 16 */
  --gt-gap: clamp(32px, calc(1.78vw + 24.83px), 48px);
  /*  48 -> 32 */

  /* --- Radios ----------------------------------------------------------- */
  --gt-r-pill: 256px;
  --gt-r-sm: 4px;
  --gt-r-xs: 1px;

  /* --- Inclinación (medida en el render del Figma: 24,4° y 25,0°) -------- */
  --gt-skew: -24deg;

  /* Holgura del parallax; el JS nunca desplaza más que esto */
  --gt-overscan: 6%;
}

/* --------------------------------------------------------------------------
   Reset mínimo
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  overflow-x: clip;
}

/* el panel de menú vive fuera de lienzo */
body.gt-body-root {
  margin: 0;
  background: var(--gt-white);
  color: var(--gt-black);
  font-family: 'InterGT', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.gt-scope {
  position: relative;
  overflow-x: hidden;
  overflow-x: clip;
}

.gt-scope img {
  max-width: 100%;
  display: block;
}

.gt-scope p {
  margin: 0;
}

/* En el Figma no hay un solo texto subrayado: ningún enlace lleva raya.
   Y el color se hereda del contexto, que es como está pensado el diseño: Hello
   Elementor mete `a { color: #c36 }` en su reset —ese rosa— y saldría en todo
   enlace al que no le demos color aquí. Va con :where() para que no pese en la
   especificidad y cualquier regla nuestra posterior siga mandando. */
.gt-scope :where(a) {
  color: inherit;
}

.gt-scope a {
  text-decoration: none;
}

/* Los titulares llevan margen por defecto del navegador (0,67em en h1,
   0,83em en h2…). En Figma no hay tal margen: se los comía el maquetado y
   cada bloque salía ~53 px más alto de la cuenta. */
.gt-scope h1,
.gt-scope h2,
.gt-scope h3,
.gt-scope h4,
.gt-scope h5,
.gt-scope h6 {
  margin: 0;
}

/* Va después del reset y con su misma especificidad, si no `margin: 0` se la
   come: baja el titular su descendente para que la base apoye en la foto. */
.gt-scope .gt-h1 {
  margin-bottom: calc(var(--gt-h1-base) * -1.1);
}

.gt-scope ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   Escala tipográfica
   Los tamaños interpolan entre los dos artboards; el tracking del Figma es
   proporcional en todos los estilos (-0,07em / -0,05em / -0,02em), así que va
   en em y no hace falta recalcularlo por breakpoint.

   escritorio 1300      móvil 402
   H1   120/120 -8,4     64/64  -4,48
   H2    64/80  -4,48    38/40  -2,66
   H3    42/48  -2,1     32/32  -1,6
   resto                 sin cambios
   -------------------------------------------------------------------------- */
.gt-display {
  font-weight: 900;
  letter-spacing: -.07em;
  text-align: center;
  color: rgba(0, 0, 0, .30);
  font-size: clamp(226px, 58.46vw - 9.98px, 750px);
  line-height: .667;
  padding-right: .07em;
  /* compensa el tracking del último signo */
}

.gt-h1 {
  font-weight: 900;
  letter-spacing: -.07em;
  text-align: center;
  color: var(--gt-white);
  font-size: clamp(64px, calc(6.236vw + 38.93px), 120px);
  line-height: 1;
  padding-right: .07em;
}

.gt-h2 {
  font-weight: 900;
  letter-spacing: -.07em;
  text-align: center;
  font-size: clamp(38px, calc(2.895vw + 26.36px), 64px);
  line-height: 1.25;
  padding-right: .07em;
}

.gt-h3 {
  font-weight: 700;
  letter-spacing: -.05em;
  text-align: center;
  font-size: clamp(32px, calc(1.114vw + 27.52px), 42px);
  line-height: 1.143;
  padding-right: .05em;
}

.gt-lead {
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -.05em;
}

.gt-text {
  font-weight: 400;
  font-size: 16px;
  line-height: 32px;
  letter-spacing: -.02em;
}

.gt-small {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -.02em;
}

@media (max-width:640px) {
  .gt-h2 {
    line-height: 1.053;
  }

  /* 40/38 en el artboard móvil */
  .gt-h3 {
    line-height: 1;
  }

  /* 32/32 */
}

/* Relleno de texto con degradado (el Figma usa fills de gradiente sobre TEXT) */
.gt-fill-gold {
  background: var(--gt-grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gt-fill-blue {
  background: var(--gt-grad-blue);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* --------------------------------------------------------------------------
   NOTA DEV — Botones inclinados con skew
   Medido sobre el render del Figma: 24,44° en "MORE INFO" y 25,02° en los
   rótulos de tarjeta. La inclinación arrastra también a las letras (salen
   oblicuas), así que NO se contra-rota el contenido.
   En el pie, SUBMIT va recto: por eso el skew es un modificador aparte.
   -------------------------------------------------------------------------- */
.gt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  padding: 8px 24px;
  border-radius: var(--gt-r-sm);
  background: var(--gt-white);
  color: var(--gt-black);
  font: inherit;
  font-weight: 400;
  font-size: 16px;
  line-height: 32px;
  letter-spacing: -.02em;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1), background .35s ease, color .35s ease;
}

/* Los botones que ya están rectos se quedan como están: aquí sólo un apunte
   para que se note que responden. Fuera el romboide: este `transform` gana
   por especificidad al de .gt-btn--skew y le quitaría la forma al pasar por
   encima, que es justo lo contrario de lo que se busca. */
.gt-btn:not(.gt-btn--skew):hover {
  transform: translateY(-2px);
}

.gt-btn--skew {
  transform: skewX(var(--gt-skew));
}

/* El rombo se queda romboide: lo que se endereza al pasar por encima es el
   rótulo de dentro. */
.gt-btn--skew > span {
  display: inline-block;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}

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

.gt-btn--pill {
  border-radius: var(--gt-r-pill);
}

/* En móvil los botones del artboard son 37px de alto con pad 8/20 */
@media (max-width:640px) {
  .gt-btn {
    padding: 8px 20px;
    line-height: 21px;
  }
}

/* --------------------------------------------------------------------------
   NOTA DEV — Parallax vertical en imágenes
   La imagen sobresale --gt-overscan por arriba y por abajo, y se desplaza
   dentro de esa holgura con --gt-py (lo calcula gt-effects.js con
   IntersectionObserver + rAF). El recorrido nunca supera la holgura, así que
   nunca asoma el fondo. Con prefers-reduced-motion queda fija.
   -------------------------------------------------------------------------- */
.gt-parallax {
  position: relative;
  overflow: hidden;
}

.gt-parallax>.gt-parallax__img {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--gt-overscan));
  height: calc(100% + 2 * var(--gt-overscan));
  width: 100%;
  object-fit: cover;
  transform: translate3d(0, var(--gt-py, 0px), 0);
  will-change: transform;
}

@media (prefers-reduced-motion:reduce) {
  .gt-parallax>.gt-parallax__img {
    top: 0;
    height: 100%;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Páginas generadas desde Figma
   El artboard mide 1300 y todo cuelga de <main class="gt-page">. Aquí van las
   dos reglas que el generador no puede deducir del autolayout:
     · el centrado lo trae ya el autolayout del artboard (.gt-page--<slug>);
       no se pueden usar márgenes auto: en flex anulan el `stretch` y los
       bloques se encogían a su contenido
     · las bandas con fondo van de lado a lado, con el contenido a 1300
   -------------------------------------------------------------------------- */
/* <main> ES el artboard: 1300 centrados. Así los nodos que en Figma van
   posicionados por coordenadas se sitúan contra la misma caja, y las bandas
   con .gt-bleed se salen de ella hasta el borde de la ventana. */
.gt-page {
  position: relative;
  max-width: var(--gt-page);
  margin-inline: auto;
}

/* Sirve a cualquier profundidad: el margen negativo lleva el bloque hasta el
   borde de la ventana y el relleno vuelve a meter el contenido en los 1300.
   .gt-scope recorta el desbordamiento lateral, así que no aparece scroll. */
/* .gt-scope delante a propósito: la hoja de la página se carga después y con
   la misma especificidad ganaría su `max-width:1300px`. */
.gt-scope .gt-bleed {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(var(--gt-pl, 0px) + max(0px, (100vw - var(--gt-page)) / 2));
  padding-right: calc(var(--gt-pr, 0px) + max(0px, (100vw - var(--gt-page)) / 2));
}

/* --------------------------------------------------------------------------
   Parallax en fotos de fondo
   Las secciones generadas pintan su foto como fondo, no como <img>, así que no
   se puede mover con transform. Se mueve la POSICIÓN del fondo, y en tanto por
   ciento: con `cover`, el 0 % y el 100 % son justo los extremos de lo que
   sobra, así que por mucho que se desplace nunca asoma el borde. Si la foto
   encaja exacta, el porcentaje no mueve nada y se queda quieta.
   .gt-scope delante porque la hoja de la página trae su `background` con la
   misma especificidad y se carga después.
   -------------------------------------------------------------------------- */
/* Con `cover` la foto sólo sobra por un lado: en las cajas cuadradas de
   sección sobra a lo ancho y no queda ni un píxel de recorrido vertical, así
   que mover `background-position` no hacía nada. La foto se pinta entonces en
   un pseudo-elemento un 12% más alto que la caja, que se desplaza dentro y
   queda recortado: el contenedor no cambia de tamaño y la imagen sí se mueve.

   Va en z-index -1 con la caja aislada, así que se pinta por delante del
   fondo del propio contenedor pero por detrás de lo que lleve dentro. */
.gt-scope .gt-parallax-bg{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.gt-scope .gt-parallax-bg::before{
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: calc(-1 * var(--gt-overscan));
  height: calc(100% + 2 * var(--gt-overscan));
  background-image: inherit;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: translate3d(0, var(--gt-py, 0px), 0);
  will-change: transform;
}

/* Con velo de degradado encima se mueve la posición del fondo, que ahí sí
   tiene holgura; mover el pseudo se llevaría también el velo. */
.gt-scope .gt-parallax-pos{
  background-position: center var(--gt-bgy, 50%);
  will-change: background-position;
}

@media (prefers-reduced-motion:reduce){
  .gt-scope .gt-parallax-pos{ background-position:center 50%; }
  .gt-scope .gt-parallax-bg::before{ top:0; height:100%; transform:none; }
}