/* =========================================================================
   FOSBURY — Landing
   Fondo animado derivado de los frames Figma Landing/Desktop/Fog-01 … Fog-06
   Marco de diseño desktop: 1440 × 1024 · marco mobile: 402 × 1442
   ========================================================================= */

/* ---------- Gotham ------------------------------------------------------ */
@font-face{font-family:"Gotham";src:url("fonts/GOTHAM-BOOK.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Gotham";src:url("fonts/GOTHAM-MEDIUM.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Gotham";src:url("fonts/GOTHAM-MEDIUMITALIC.woff2") format("woff2");
  font-weight:500;font-style:italic;font-display:swap;}
@font-face{font-family:"Gotham";src:url("fonts/GOTHAM-BOLD.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Gotham";src:url("fonts/GOTHAM-BOLDITALIC.woff2") format("woff2");
  font-weight:700;font-style:italic;font-display:swap;}
@font-face{font-family:"Gotham";src:url("fonts/GOTHAM-BLACK.woff2") format("woff2");
  font-weight:900;font-style:normal;font-display:swap;}
@font-face{font-family:"Gotham";src:url("fonts/GOTHAM-BLACKITALIC.woff2") format("woff2");
  font-weight:900;font-style:italic;font-display:swap;}
@font-face{font-family:"Gotham Rounded";src:url("fonts/GOTHAM ROUNDED BOLD.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;}

/* ---------- Tokens ------------------------------------------------------ */
:root{
  /* Superficies */
  --c-bg:            #0b0b0d;   /* Rectangle 95 */
  --c-card:          rgba(32,32,32,.30);   /* fill Rectangle 76 */
  --c-card-border:   #a59ac4;              /* stroke Rectangle 76 */
  --c-rule:          #e9eaeb;              /* Rectangle 96/97/98 */

  /* Texto */
  --c-text:          #ffffff;   /* variable Figma "Grupo P/Blanco" */
  --c-text-soft:     rgba(255,255,255,.86);
  --c-accent:        #75b2b2;   /* teal de Figma (#MAKE THE JUMP / acento) */

  /* Niebla — gradientes y blur leidos del SVG exportado por Figma */
  --fog-a: linear-gradient(43deg, #362c4f 0%, #9580d0 100%);   /* Ellipse 206 */
  --fog-b: linear-gradient(39deg, #75b2b2 0%, #477777 100%);   /* Ellipse 207 */
  --fog-blur:        250px;     /* feGaussianBlur stdDeviation=250 */
  --fog-opacity:     1;
  --fog-duration:    48s;       /* 6 estados ≈ 8s por transición */

  /* Tipografía. Sustituir por las fuentes de marca reales si se dispone. */
  --font-sans: "Gotham", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Ritmo espacial (proporcional al marco de 1440) */
  --gutter:       clamp(24px, 7.43vw, 107px);   /* 107 / 1440 */
  --gutter-right: clamp(24px, 10.9vw, 157px);   /* borde derecho tarjeta = 1283 */
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100vh;
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.u-visually-hidden{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* =========================================================================
   1 · FONDO ANIMADO
   Cada blob usa transform-origin 0 0 para que translate() coloque su
   esquina superior-izquierda exactamente donde la sitúa Figma, y scale()
   reproduzca el cambio de diámetro entre frames.
   ========================================================================= */
.fog{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:var(--c-bg);
}

.fog__blob{
  position:absolute;
  top:0; left:0;
  width:36.736vw;            /* 529 / 1440 */
  aspect-ratio:1;
  border-radius:50%;
  transform-origin:0 0;
  filter:blur(var(--fog-blur));
  opacity:var(--fog-opacity);
  will-change:transform;
  animation-duration:var(--fog-duration);
  animation-iteration-count:infinite;
  animation-timing-function:ease-in-out;  /* Smart Animate estándar */
}

.fog__blob--a{ background:var(--fog-a); animation-name:fog-a; }
.fog__blob--b{ background:var(--fog-b); animation-name:fog-b; }

/* Vela sutil: acota los picos de luminancia del fondo para que el texto
   mantenga contraste AA incluso donde ambos blobs se solapan. */
.fog__scrim{
  position:absolute;
  inset:0;
  background:rgba(9,9,12,.14);
}

/* --- Ellipse 206 (morado) · Fog-01 → Fog-06 --------------------------- */
@keyframes fog-a{
  0%   { transform:translate( 72.361vw, -18.555vh) scale(1); }      /* Fog-01  1042,-190 · 529 */
  20%  { transform:translate( 34.583vw, -17.188vh) scale(1); }      /* Fog-02   498,-176 · 529 */
  40%  { transform:translate(  8.819vw,  -5.566vh) scale(1.2571); } /* Fog-03   127, -57 · 665 */
  60%  { transform:translate(  1.458vw,  39.746vh) scale(1.2571); } /* Fog-04    21, 407 · 665 */
  80%  { transform:translate( 41.667vw,  54.688vh) scale(1.2571); } /* Fog-05   600, 560 · 665 */
  100% { transform:translate( 72.361vw, -18.555vh) scale(1); }      /* Fog-06 = Fog-01 (loop) */
}

/* --- Ellipse 207 (teal) · Fog-01 → Fog-06 ----------------------------- */
@keyframes fog-b{
  0%   { transform:translate( -9.514vw,  66.699vh) scale(1); }      /* Fog-01  -137, 683 · 529 */
  20%  { transform:translate( 32.708vw,  73.340vh) scale(1); }      /* Fog-02   471, 751 · 529 */
  40%  { transform:translate( 48.472vw,  50.293vh) scale(1.2439); } /* Fog-03   698, 515 · 658 */
  60%  { transform:translate( 48.750vw,   6.836vh) scale(1.4896); } /* Fog-04   702,  70 · 788 */
  80%  { transform:translate(  2.292vw, -23.828vh) scale(1.4896); } /* Fog-05    33,-244 · 788 */
  100% { transform:translate( -9.514vw,  66.699vh) scale(1); }      /* Fog-06 = Fog-01 (loop) */
}

/* =========================================================================
   2 · LAYOUT
   ========================================================================= */
.page{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,564px);
  gap:0 clamp(32px, 6.9vw, 100px);
  min-height:100vh;
  max-width:1440px;
  margin-inline:auto;
  padding:clamp(32px, 8.8vh, 90px) var(--gutter-right) clamp(32px, 7.4vh, 76px) var(--gutter);
}

/* Columnas en flujo: los hijos nunca se solapan; si no caben, la pagina
   hace scroll en lugar de encimarse. */
.col{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:clamp(24px, 4vh, 48px);
  min-width:0;
}

/* ---------- Logo -------------------------------------------------------- */
.brand__link{
  display:inline-block;
  text-decoration:none;
  color:var(--c-text);
}
.brand__logo{
  display:block;
  width:clamp(150px, 15.14vw, 218px);   /* 218 / 1440 */
  max-width:100%;
  height:auto;
}

/* ---------- Bloque de texto -------------------------------------------- */
.intro__title{
  margin:0;
  font-size:clamp(24px, 2.08vw, 30px);    /* Figma: 30px */
  font-weight:900;                        /* Gotham Black */
  line-height:40px;                       /* Figma: leading 40px */
  letter-spacing:0;
}
.intro__accent{
  display:block;
  margin-top:.1em;
  font-weight:900;                        /* Gotham Black */
  font-size:1em;                           /* Figma: 30px, igual que el titular */
  letter-spacing:3px;                     /* Figma: tracking 3px */
  text-transform:uppercase;
  color:transparent;
  -webkit-text-stroke:1px var(--c-accent);
  text-stroke:1px var(--c-accent);
}
.intro__sub{
  margin:22px 0 0;
  font-size:clamp(15px, 1.25vw, 18px);    /* Figma: 18px */
  font-style:italic;
  font-weight:500;                        /* Gotham Medium Italic */
  color:var(--c-text-soft);
}

/* ---------- Tarjeta de contacto ---------------------------------------- */
.card{
  border:1px solid var(--c-card-border);   /* 1px #a59ac4 */
  border-radius:8px;                       /* radius de Figma */
  background:var(--c-card);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  padding-inline:17px;                /* + 27px de la fila = 44px de diseño */
}

.office{
  display:grid;
  grid-template-columns:131px minmax(0,1fr);
  gap:0 0;
  padding:27px;
}
.office + .office{ border-top:1px solid var(--c-rule); }

.office__country{
  margin:0;
  font-size:20px;                         /* Figma: 20px */
  font-weight:500;                        /* Gotham Medium */
  letter-spacing:0;
  text-transform:uppercase;
  line-height:1.35;
}

.office__body{ min-width:0; }

.office__address{
  margin:0;
  font-style:normal;
  font-size:14px;                         /* Figma: 14px */
  font-weight:400;                        /* Gotham Book */
  line-height:17px;                       /* 3 lineas = 51px */
  color:var(--c-text-soft);
}

.office__cta{
  display:inline-block;
  margin-top:22px;
  float:right;
  padding:10px 20px;                      /* Figma: py-10 px-20 */
  border-radius:4px;                      /* Figma: radius 4px */
  background:rgba(255,255,255,.30);       /* Figma: fill blanco 30% */
  color:var(--c-text);
  font-size:14px;                         /* Figma: 14px */
  white-space:nowrap;
  text-align:center;
  text-decoration:underline;
  text-underline-offset:2px;
  transition:background-color .2s ease, transform .2s ease;
}
.office__cta:hover,
.office__cta:focus-visible{
  background:rgba(255,255,255,.42);
  transform:translateY(-1px);
}
.office__body::after{ content:""; display:block; clear:both; }

/* ---------- Footer ------------------------------------------------------ */
.jump{
  margin:0;
  min-width:0;
  font-weight:900;                        /* Gotham Ultra -> Black (no hay Ultra) */
  font-size:clamp(13px, 1.11vw, 16px);    /* Figma: 16px */
  letter-spacing:2.56px;                  /* Figma: tracking 2.56px */
  text-transform:uppercase;
  color:var(--c-accent);
}
.jump span{ color:var(--c-text); }

.group{
  display:flex;
  align-items:center;
  justify-content:flex-end;   /* alineado al borde derecho del panel */
  gap:10px;
  margin:0;
  min-width:0;
  font-size:clamp(13px, 1.11vw, 16px);
  font-weight:500;
}
.group__logo{
  display:block;
  width:clamp(84px, 8.13vw, 117px);     /* 117 / 1440, fluido */
  max-width:100%;
  height:auto;
}

/* =========================================================================
   3 · MOBILE  (marco Figma 402 × 1442 → breakpoint 768px)
   ========================================================================= */
@media (max-width:768px){
  :root{
    --gutter:       clamp(20px, 10.2vw, 41px);   /* 41 / 402 */
    --gutter-right: clamp(20px, 10.2vw, 41px);   /* el frame mobile es simetrico */
    --fog-blur:185px;                       /* 250 * (397/529) proporcional al blob mobile */
  }

  .page{
    grid-template-columns:minmax(0,1fr);    /* una sola columna */
    gap:clamp(28px, 4.5vh, 44px);
    padding-block:clamp(28px, 2.6vh, 37px) clamp(32px, 4vh, 48px);
  }

  /* Los wrappers de columna desaparecen y los hijos se reordenan al orden
     del frame mobile: logo, intro, panel, #MAKE THE JUMP, Parte de GRUPO P. */
  .col{ display:contents; }
  .brand{ order:1; }
  .intro{ order:2; }
  .card { order:3; }
  .jump { order:4; }
  .group{ order:5; justify-content:center; }

  .intro__title{ font-size:clamp(24px, 7.5vw, 30px); line-height:1.2; }
  .intro__sub{ font-size:18px; }

  .card{ padding-inline:18px; }            /* + 26px = 44px de diseño */
  .office{
    grid-template-columns:minmax(0,1fr);    /* etiqueta sobre el contenido */
    padding:26px;
    gap:14px 0;
  }
  .office__address{ font-size:13px; }   /* 14px desborda la col. de 220px */
  .office__cta{ float:none; display:inline-block; margin-top:18px; }

  /* Blobs redimensionados al marco mobile: Ellipse 206 → 397px (98.76vw),
     Ellipse 207 → 321px (79.85vw). Se conserva la coreografía de los 6
     estados, reencuadrada para que ningún blob quede cortado en seco. */
  .fog__blob--a{ width:98.76vw; animation-name:fog-a-mobile; }
  .fog__blob--b{ width:79.85vw; animation-name:fog-b-mobile; }
}

@keyframes fog-a-mobile{
  0%   { transform:translate( 54.5vw, -18.6vh) scale(1); }
  20%  { transform:translate( 10.5vw, -17.2vh) scale(1); }
  40%  { transform:translate(-19.4vw,  -5.6vh) scale(1.2571); }
  60%  { transform:translate(-28.0vw,  39.8vh) scale(1.2571); }
  80%  { transform:translate( 18.8vw,  54.7vh) scale(1.2571); }
  100% { transform:translate( 54.5vw, -18.6vh) scale(1); }
}

@keyframes fog-b-mobile{
  0%   { transform:translate(-27.9vw,  66.7vh) scale(1); }
  20%  { transform:translate( 24.9vw,  73.3vh) scale(1); }
  40%  { transform:translate( 44.7vw,  50.3vh) scale(1.2439); }
  60%  { transform:translate( 45.0vw,   6.8vh) scale(1.4896); }
  80%  { transform:translate(-13.1vw, -23.8vh) scale(1.4896); }
  100% { transform:translate(-27.9vw,  66.7vh) scale(1); }
}

/* =========================================================================
   4 · ACCESIBILIDAD
   ========================================================================= */
:where(a,button):focus-visible{
  outline:2px solid var(--c-accent);
  outline-offset:3px;
  border-radius:3px;
}

/* La niebla se congela en el estado Fog-01 y se elimina el will-change. */
@media (prefers-reduced-motion:reduce){
  .fog__blob{
    animation:none !important;
    will-change:auto;
  }
  .fog__blob--a{ transform:translate(72.361vw,-18.555vh) scale(1); }
  .fog__blob--b{ transform:translate(-9.514vw, 66.699vh) scale(1); }

  @media (max-width:768px){
    .fog__blob--a{ transform:translate( 54.5vw,-18.6vh) scale(1); }
    .fog__blob--b{ transform:translate(-27.9vw, 66.7vh) scale(1); }
  }

  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}

/* Pausa cuando la pestaña no está visible (ver script.js) */
.fog.is-paused .fog__blob{ animation-play-state:paused; }