:root {
  --a-bg-hero: url("../img/bg-hero.png");
  --a-bg-umb-2: url("../img/bg-umb-2.png");
  --a-bg-umb: url("../img/bg-umb.png");
  --a-fill-mark: url("../img/fill-mark.svg");
  --a-fill-word: url("../img/fill-word.svg");
  --a-mask-mark: url("../img/mask-mark.svg");
  --a-mask-word: url("../img/mask-word.svg");
  --a-mask-mark-sm: url("../img/mask-mark-sm.svg");
  --a-ring: url("../img/ring.svg");
  --a-chevron: url("../img/chevron.svg");

  --font: "Exo 2", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --blue-700: #04328c;
  /* relleno del botón CONTACTO */
  --blue-100: #b7e2fa;
  /* final del degradado del párrafo */
  --page: #f4f5f7;
}

* {
  box-sizing: border-box
}

html,
body {
  margin: 0;
  padding: 0
}

body {
  background: var(--page);
  font-family: var(--font);
  color: #fff;
  -webkit-font-smoothing: antialiased;
}


.stage {
  container-type: inline-size;
  position: relative;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #04060d;
  --u: 0.0694444cqw;
  /* 100cqw / 1440 */
}


.bg {
  position: absolute;
  pointer-events: none;
  overflow: hidden
}

.bg img {
  position: absolute;
  max-width: none;
  display: block
}

.bg--hero {
  inset: 0
}

.bg--hero img {
  height: 100%;
  width: 126.48%;
  left: -0.01%;
  top: 0.04%
}

.bg--umb2 {
  left: 0;
  top: 0;
  width: calc(1440 * var(--u));
  height: calc(940 * var(--u))
}

.bg--umb2 img {
  height: 99.79%;
  width: 115.86%;
  left: -8%;
  top: 0.21%
}

.bg--umb {
  left: calc(-5 * var(--u));
  top: 0;
  width: calc(1440 * var(--u));
  height: calc(1022 * var(--u));
  opacity: .9
}

.bg--umb img {
  height: 100%;
  width: 126.23%;
  left: -10.51%;
  top: 0
}


.fg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(46.8 * var(--u)) calc(88 * var(--u)) calc(112 * var(--u));
}

.fg-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fg-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(82 * var(--u));
}

.fg-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(28 * var(--u));
}

/* logo de la cabecera — 73.65×72.17 */
.mark-sm {
  width: calc(73.65 * var(--u));
  height: calc(72.17 * var(--u));
  background-image: var(--a-fill-mark);
  background-size: 100% 100%;
  -webkit-mask-image: var(--a-mask-mark-sm);
  mask-image: var(--a-mask-mark-sm);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* botón CONTACTO — 203×61, radio 66 */
.contacto {
  width: calc(203 * var(--u));
  height: calc(61 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  border-radius: calc(66 * var(--u));
  box-shadow: inset 0 0 calc(4 * var(--u)) 0 #fff;

  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 203 61' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23grad)' opacity='0.2'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(6.2592 -3.994 13.292 15.354 116.72 51.56)'><stop stop-color='rgba(255,255,255,0)' offset='0'/><stop stop-color='rgba(255,255,255,0.59135)' offset='0.78281'/><stop stop-color='rgba(255,255,255,1)' offset='1'/></radialGradient></defs></svg>"),
    linear-gradient(90deg, var(--blue-700) 0%, var(--blue-700) 100%);
  background-size: 100% 100%;
  color: #fff;
  font-weight: 600;
  font-size: calc(20 * var(--u));
  line-height: 1.6;
  letter-spacing: calc(-0.24 * var(--u));
  text-decoration: none;
  white-space: nowrap;
  transition: filter .18s ease, transform .18s ease;
}

.contacto:hover {
  filter: brightness(1.15);
  transform: translateY(-1px)
}

.contacto:focus-visible {
  outline: 2px solid #cfe6ff;
  outline-offset: 4px
}

/* logotipo central: símbolo + palabra, uno junto al otro */
.lockup {
  display: flex;
  align-items: center;
  gap: calc(11.4 * var(--u));
}


.mark {
  position: relative;
  width: calc(161.11 * var(--u));
  height: calc(161.11 * var(--u));
  background-image: var(--a-fill-mark);
  background-size: 100% 100%;
  -webkit-mask-image: var(--a-mask-mark);
  mask-image: var(--a-mask-mark);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}


.mark.is-decomposed {
  background-image: none;
  -webkit-mask-image: none;
  mask-image: none;
}


.mark-piece {
  position: absolute;
  inset: 0;
  animation: piece-swim-in 1.35s cubic-bezier(.22, .61, .16, 1) both;
}

.mark-piece-fill {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  clip-path: polygon(var(--p-clip));
}

.mark-piece[data-mp="0"] {
  --p-clip: 50% 50%, 50.00% -30.00%, 70.71% -27.27%;
  --p-x0: 18.12%;
  --p-y0: -141.27%;
  --p-s0: 2.203;
  --p-r0: 12.5deg;
  --p-x1: -4.24%;
  --p-y1: -38.16%;
  --p-s1: 1.247;
  --p-r1: -10.3deg;
  --p-x2: 1.29%;
  --p-y2: -10.99%;
  --p-s2: 1.083;
  --p-r2: 1.6deg;
  animation-delay: 0.004s;
}

.mark-piece[data-mp="1"] {
  --p-clip: 50% 50%, 70.71% -27.27%, 90.00% -19.28%;
  --p-x0: 33.93%;
  --p-y0: -135.77%;
  --p-s0: 1.641;
  --p-r0: -63.0deg;
  --p-x1: 10.34%;
  --p-y1: -44.92%;
  --p-s1: 1.384;
  --p-r1: 22.6deg;
  --p-x2: 3.53%;
  --p-y2: -11.05%;
  --p-s2: 1.030;
  --p-r2: -0.6deg;
  animation-delay: 0.035s;
}

.mark-piece[data-mp="2"] {
  --p-clip: 50% 50%, 90.00% -19.28%, 106.57% -6.57%;
  --p-x0: 92.71%;
  --p-y0: -87.63%;
  --p-s0: 2.288;
  --p-r0: -7.6deg;
  --p-x1: 24.93%;
  --p-y1: -36.14%;
  --p-s1: 1.200;
  --p-r1: 2.3deg;
  --p-x2: 5.65%;
  --p-y2: -6.76%;
  --p-s2: 1.046;
  --p-r2: -3.5deg;
  animation-delay: 0.030s;
}

.mark-piece[data-mp="3"] {
  --p-clip: 50% 50%, 106.57% -6.57%, 119.28% 10.00%;
  --p-x0: 113.64%;
  --p-y0: -71.13%;
  --p-s0: 1.877;
  --p-r0: -37.0deg;
  --p-x1: 25.96%;
  --p-y1: -24.12%;
  --p-s1: 1.297;
  --p-r1: -4.7deg;
  --p-x2: 7.15%;
  --p-y2: -4.39%;
  --p-s2: 1.081;
  --p-r2: 1.5deg;
  animation-delay: 0.077s;
}

.mark-piece[data-mp="4"] {
  --p-clip: 50% 50%, 119.28% 10.00%, 127.27% 29.29%;
  --p-x0: 111.93%;
  --p-y0: -64.05%;
  --p-s0: 2.018;
  --p-r0: 63.7deg;
  --p-x1: 32.47%;
  --p-y1: -14.65%;
  --p-s1: 1.224;
  --p-r1: -3.0deg;
  --p-x2: 8.87%;
  --p-y2: -4.88%;
  --p-s2: 1.060;
  --p-r2: -0.6deg;
  animation-delay: 0.077s;
}

.mark-piece[data-mp="5"] {
  --p-clip: 50% 50%, 127.27% 29.29%, 130.00% 50.00%;
  --p-x0: 138.02%;
  --p-y0: -1.76%;
  --p-s0: 1.716;
  --p-r0: 37.3deg;
  --p-x1: 38.20%;
  --p-y1: -6.52%;
  --p-s1: 1.363;
  --p-r1: 22.5deg;
  --p-x2: 13.18%;
  --p-y2: -2.61%;
  --p-s2: 1.094;
  --p-r2: 3.6deg;
  animation-delay: 0.061s;
}

.mark-piece[data-mp="6"] {
  --p-clip: 50% 50%, 130.00% 50.00%, 127.27% 70.71%;
  --p-x0: 142.19%;
  --p-y0: 31.39%;
  --p-s0: 1.815;
  --p-r0: 26.0deg;
  --p-x1: 33.97%;
  --p-y1: 5.66%;
  --p-s1: 1.332;
  --p-r1: -11.2deg;
  --p-x2: 9.54%;
  --p-y2: 0.84%;
  --p-s2: 1.097;
  --p-r2: -4.9deg;
  animation-delay: 0.076s;
}

.mark-piece[data-mp="7"] {
  --p-clip: 50% 50%, 127.27% 70.71%, 119.28% 90.00%;
  --p-x0: 135.04%;
  --p-y0: 48.34%;
  --p-s0: 1.970;
  --p-r0: -4.3deg;
  --p-x1: 33.38%;
  --p-y1: 12.40%;
  --p-s1: 1.173;
  --p-r1: 14.1deg;
  --p-x2: 9.21%;
  --p-y2: 5.18%;
  --p-s2: 1.092;
  --p-r2: -2.4deg;
  animation-delay: 0.119s;
}

.mark-piece[data-mp="8"] {
  --p-clip: 50% 50%, 119.28% 90.00%, 106.57% 106.57%;
  --p-x0: 111.42%;
  --p-y0: 59.21%;
  --p-s0: 2.164;
  --p-r0: -46.4deg;
  --p-x1: 32.95%;
  --p-y1: 32.90%;
  --p-s1: 1.150;
  --p-r1: -20.1deg;
  --p-x2: 11.30%;
  --p-y2: 9.40%;
  --p-s2: 1.022;
  --p-r2: 0.4deg;
  animation-delay: 0.098s;
}

.mark-piece[data-mp="9"] {
  --p-clip: 50% 50%, 106.57% 106.57%, 90.00% 119.28%;
  --p-x0: 78.91%;
  --p-y0: 131.93%;
  --p-s0: 1.551;
  --p-r0: -20.2deg;
  --p-x1: 32.98%;
  --p-y1: 27.42%;
  --p-s1: 1.200;
  --p-r1: -9.8deg;
  --p-x2: 6.08%;
  --p-y2: 6.35%;
  --p-s2: 1.083;
  --p-r2: -3.6deg;
  animation-delay: 0.122s;
}

.mark-piece[data-mp="10"] {
  --p-clip: 50% 50%, 90.00% 119.28%, 70.71% 127.27%;
  --p-x0: 58.58%;
  --p-y0: 104.77%;
  --p-s0: 1.832;
  --p-r0: -68.8deg;
  --p-x1: 11.01%;
  --p-y1: 33.81%;
  --p-s1: 1.337;
  --p-r1: -2.3deg;
  --p-x2: 2.87%;
  --p-y2: 6.48%;
  --p-s2: 1.079;
  --p-r2: -1.6deg;
  animation-delay: 0.132s;
}

.mark-piece[data-mp="11"] {
  --p-clip: 50% 50%, 70.71% 127.27%, 50.00% 130.00%;
  --p-x0: -2.87%;
  --p-y0: 148.65%;
  --p-s0: 1.566;
  --p-r0: -60.4deg;
  --p-x1: 1.69%;
  --p-y1: 38.79%;
  --p-s1: 1.188;
  --p-r1: -9.4deg;
  --p-x2: 1.11%;
  --p-y2: 6.68%;
  --p-s2: 1.022;
  --p-r2: 1.0deg;
  animation-delay: 0.163s;
}

.mark-piece[data-mp="12"] {
  --p-clip: 50% 50%, 50.00% 130.00%, 29.29% 127.27%;
  --p-x0: -14.80%;
  --p-y0: 134.27%;
  --p-s0: 2.219;
  --p-r0: 22.7deg;
  --p-x1: -7.82%;
  --p-y1: 49.70%;
  --p-s1: 1.270;
  --p-r1: 19.5deg;
  --p-x2: -1.40%;
  --p-y2: 10.12%;
  --p-s2: 1.074;
  --p-r2: -0.4deg;
  animation-delay: 0.136s;
}

.mark-piece[data-mp="13"] {
  --p-clip: 50% 50%, 29.29% 127.27%, 10.00% 119.28%;
  --p-x0: -82.00%;
  --p-y0: 132.05%;
  --p-s0: 1.936;
  --p-r0: 68.6deg;
  --p-x1: -14.31%;
  --p-y1: 40.50%;
  --p-s1: 1.305;
  --p-r1: 15.8deg;
  --p-x2: -5.94%;
  --p-y2: 12.54%;
  --p-s2: 1.055;
  --p-r2: -4.2deg;
  animation-delay: 0.187s;
}

.mark-piece[data-mp="14"] {
  --p-clip: 50% 50%, 10.00% 119.28%, -6.57% 106.57%;
  --p-x0: -103.92%;
  --p-y0: 97.06%;
  --p-s0: 1.855;
  --p-r0: 53.5deg;
  --p-x1: -27.98%;
  --p-y1: 30.03%;
  --p-s1: 1.328;
  --p-r1: -21.5deg;
  --p-x2: -9.07%;
  --p-y2: 10.43%;
  --p-s2: 1.050;
  --p-r2: -0.3deg;
  animation-delay: 0.177s;
}

.mark-piece[data-mp="15"] {
  --p-clip: 50% 50%, -6.57% 106.57%, -19.28% 90.00%;
  --p-x0: -129.59%;
  --p-y0: 68.01%;
  --p-s0: 1.752;
  --p-r0: -67.0deg;
  --p-x1: -29.72%;
  --p-y1: 35.35%;
  --p-s1: 1.389;
  --p-r1: 0.7deg;
  --p-x2: -5.93%;
  --p-y2: 5.37%;
  --p-s2: 1.023;
  --p-r2: -1.1deg;
  animation-delay: 0.189s;
}

.mark-piece[data-mp="16"] {
  --p-clip: 50% 50%, -19.28% 90.00%, -27.27% 70.71%;
  --p-x0: -128.18%;
  --p-y0: 70.53%;
  --p-s0: 1.816;
  --p-r0: 46.2deg;
  --p-x1: -40.08%;
  --p-y1: 25.16%;
  --p-s1: 1.186;
  --p-r1: -7.5deg;
  --p-x2: -13.64%;
  --p-y2: 6.43%;
  --p-s2: 1.053;
  --p-r2: 3.9deg;
  animation-delay: 0.203s;
}

.mark-piece[data-mp="17"] {
  --p-clip: 50% 50%, -27.27% 70.71%, -30.00% 50.00%;
  --p-x0: -122.70%;
  --p-y0: 13.18%;
  --p-s0: 1.764;
  --p-r0: -66.1deg;
  --p-x1: -40.24%;
  --p-y1: 14.35%;
  --p-s1: 1.156;
  --p-r1: 11.6deg;
  --p-x2: -9.84%;
  --p-y2: 1.91%;
  --p-s2: 1.056;
  --p-r2: 0.5deg;
  animation-delay: 0.210s;
}

.mark-piece[data-mp="18"] {
  --p-clip: 50% 50%, -30.00% 50.00%, -27.27% 29.29%;
  --p-x0: -119.67%;
  --p-y0: -33.20%;
  --p-s0: 2.083;
  --p-r0: 49.2deg;
  --p-x1: -37.92%;
  --p-y1: -2.70%;
  --p-s1: 1.148;
  --p-r1: 1.8deg;
  --p-x2: -6.29%;
  --p-y2: -0.66%;
  --p-s2: 1.042;
  --p-r2: -1.5deg;
  animation-delay: 0.201s;
}

.mark-piece[data-mp="19"] {
  --p-clip: 50% 50%, -27.27% 29.29%, -19.28% 10.00%;
  --p-x0: -142.67%;
  --p-y0: -43.99%;
  --p-s0: 1.806;
  --p-r0: 62.4deg;
  --p-x1: -35.31%;
  --p-y1: -14.42%;
  --p-s1: 1.349;
  --p-r1: -4.2deg;
  --p-x2: -13.55%;
  --p-y2: -6.12%;
  --p-s2: 1.027;
  --p-r2: -2.9deg;
  animation-delay: 0.253s;
}

.mark-piece[data-mp="20"] {
  --p-clip: 50% 50%, -19.28% 10.00%, -6.57% -6.57%;
  --p-x0: -128.77%;
  --p-y0: -74.88%;
  --p-s0: 1.627;
  --p-r0: 58.8deg;
  --p-x1: -38.95%;
  --p-y1: -33.48%;
  --p-s1: 1.301;
  --p-r1: 13.9deg;
  --p-x2: -7.86%;
  --p-y2: -5.38%;
  --p-s2: 1.077;
  --p-r2: -2.2deg;
  animation-delay: 0.233s;
}

.mark-piece[data-mp="21"] {
  --p-clip: 50% 50%, -6.57% -6.57%, 10.00% -19.28%;
  --p-x0: -73.27%;
  --p-y0: -101.62%;
  --p-s0: 1.945;
  --p-r0: 9.4deg;
  --p-x1: -25.64%;
  --p-y1: -44.45%;
  --p-s1: 1.172;
  --p-r1: -5.3deg;
  --p-x2: -5.48%;
  --p-y2: -7.56%;
  --p-s2: 1.086;
  --p-r2: 2.4deg;
  animation-delay: 0.244s;
}

.mark-piece[data-mp="22"] {
  --p-clip: 50% 50%, 10.00% -19.28%, 29.29% -27.27%;
  --p-x0: -52.75%;
  --p-y0: -130.86%;
  --p-s0: 2.238;
  --p-r0: 35.5deg;
  --p-x1: -13.01%;
  --p-y1: -38.79%;
  --p-s1: 1.380;
  --p-r1: -2.4deg;
  --p-x2: -3.51%;
  --p-y2: -6.53%;
  --p-s2: 1.089;
  --p-r2: -0.6deg;
  animation-delay: 0.257s;
}

.mark-piece[data-mp="23"] {
  --p-clip: 50% 50%, 29.29% -27.27%, 50.00% -30.00%;
  --p-x0: -42.29%;
  --p-y0: -149.67%;
  --p-s0: 1.777;
  --p-r0: 66.8deg;
  --p-x1: -8.72%;
  --p-y1: -37.46%;
  --p-s1: 1.352;
  --p-r1: 5.5deg;
  --p-x2: -1.25%;
  --p-y2: -6.39%;
  --p-s2: 1.063;
  --p-r2: -4.5deg;
  animation-delay: 0.267s;
}

@keyframes piece-swim-in {
  0% {
    transform: translate(var(--p-x0), var(--p-y0)) scale(var(--p-s0)) rotate(var(--p-r0));
    opacity: 0;
    filter: blur(5px);
  }

  18% {
    opacity: 1;
  }

  45% {
    transform: translate(var(--p-x1), var(--p-y1)) scale(var(--p-s1)) rotate(var(--p-r1));
    filter: blur(1px);
  }

  72% {
    transform: translate(var(--p-x2), var(--p-y2)) scale(var(--p-s2)) rotate(var(--p-r2));
    filter: blur(0);
  }

  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
    filter: blur(0);
  }
}


.word {
  width: calc(492.94 * var(--u));
  height: calc(121.64 * var(--u));
  background-image: var(--a-fill-word);
  background-size: 100% 100%;
  -webkit-mask-image: var(--a-mask-word);
  mask-image: var(--a-mask-word);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: word-slide-in 1.2s .35s cubic-bezier(.22, .61, .16, 1) both;
}

@keyframes word-slide-in {
  0% {
    transform: translateX(38%);
    opacity: 0;
  }

  22% {
    opacity: 1;
  }

  72% {
    transform: translateX(-2.5%);
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* línea de posicionamiento — Manrope Medium 24, tracking -0.48 */
.tagline {
  margin: 0;
  font-weight: 500;
  font-size: calc(24 * var(--u));
  line-height: normal;
  letter-spacing: calc(-0.48 * var(--u));
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: #fff;
}


.bottom-icon {
  position: relative;
  display: block;
  width: calc(39.85 * var(--u));
  height: calc(39.85 * var(--u));
  flex: none;
}

.ring {
  position: absolute;
  inset: 0;
  background-image: var(--a-ring);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.chevron {
  position: absolute;
  left: calc(15.6 * var(--u));
  top: calc(10.7 * var(--u));
  width: calc(10.7 * var(--u));
  height: calc(18.5 * var(--u));
  background-image: var(--a-chevron);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}


.claim {
  width: calc(649 * var(--u));
  margin: 0;
  font-weight: 600;
  font-size: calc(18 * var(--u));
  line-height: 1.6;
  letter-spacing: calc(-0.288 * var(--u));
  background-image: linear-gradient(90deg, #fff 0%, var(--blue-100) 48.558%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: end;
}


.claim-fallback.is-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


.type-cursor {
  display: inline-block;
  width: calc(3 * var(--u));
  height: 0.9em;
  margin-left: calc(2 * var(--u));
  vertical-align: -0.15em;
  background: var(--blue-100);
  animation: claim-cursor-blink 1s steps(1, end) infinite;
}

.type-cursor.is-typing {
  animation: none;
  opacity: 1;
}

@keyframes claim-cursor-blink {

  0%,
  49% {
    opacity: 1
  }

  50%,
  100% {
    opacity: 0
  }
}


@media (max-width:760px),
(max-width:1024px) and (orientation:portrait) {
  body {
    background: #04060d
  }

  .stage {
    container-type: normal;
    width: 100%;
    height: auto;
    min-height: 100svh;
    overflow: visible;
    --u: 1px;
  }

  .bg--hero img {
    height: 100%;
    width: auto;
    min-width: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%)
  }

  .bg--umb2,
  .bg--umb {
    display: none
  }


  .fg-top,
  .fg-center,
  .fg-bottom,
  .lockup {
    display: contents
  }

  .fg {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 28px 22px 44px;
    min-height: 100svh;
    text-align: center;
  }

  .fg * {
    position: static
  }

  .mark-sm {
    width: 56px;
    height: 55px;
    align-self: flex-start
  }

  .contacto {
    order: 5;
    width: auto;
    height: auto;
    padding: 14px 34px;
    font-size: 17px;
    letter-spacing: 0;
    border-radius: 66px;
    box-shadow: inset 0 0 4px 0 #fff;
    margin-top: auto;
  }

  .mark {
    width: 96px;
    height: 96px;
    margin-top: 8vh
  }

  .word {
    width: min(300px, 78vw);
    height: auto;
    aspect-ratio: 492.94/121.64
  }

  .tagline {
    width: 100%;
    font-size: 13px;
    letter-spacing: 0;
    white-space: normal;
    transform: none
  }

  .bottom-icon {
    display: none
  }

  .claim {
    width: 100%;
    height: auto;
    font-size: 16px;
    letter-spacing: 0;
    max-width: 34ch
  }
}

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

  *:not(.mark):not(.word):not(.mark-piece) {
    transition: none !important;
    animation: none !important
  }


  .type-cursor {
    animation: none !important;
    opacity: 1;
  }
}


.modal {
  --u: min(1px, calc((100vw - 48px) / 676), calc((100svh - 48px) / 970));
  width: calc(676 * var(--u));
  max-width: none;
  max-height: calc(100svh - 48px);
  padding: 0;
  border: none;
  overflow: visible;
  background: transparent;
}

.modal::backdrop {
  background: rgba(1, 7, 20, .55);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
}

.modal[open] {
  animation: modal-in .3s cubic-bezier(.22, .8, .3, 1)
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.99)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.glass {
  position: relative;
  width: 100%;
  max-height: calc(100svh - 48px);
  border-radius: calc(30 * var(--u));
  background: rgba(4, 50, 140, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(34px) saturate(140%) brightness(.62);
  -webkit-backdrop-filter: blur(34px) saturate(140%) brightness(.62);
  box-shadow: 0 calc(30 * var(--u)) calc(70 * var(--u)) rgba(0, 6, 20, .55);
  color: #fff;
  font-family: var(--font);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  padding: calc(38 * var(--u)) 0 calc(40 * var(--u));
  gap: calc(22 * var(--u));
}

.modal form {
  display: contents
}

/* título — 48/SemiBold, degradado hacia #b7e2fa */
.modal h2 {
  width: calc(589 * var(--u));
  margin: 0;
  font-weight: 600;
  font-size: calc(48 * var(--u));
  line-height: 1.6;
  letter-spacing: calc(-0.576 * var(--u));
  background-image: linear-gradient(90deg, #fff 0%, var(--blue-100) 48.558%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* párrafo — 24/SemiBold, centrado, #f0f0f0 */
.modal .lead {
  width: calc(608 * var(--u));
  margin: 0;
  font-weight: 600;
  font-size: calc(18 * var(--u));
  line-height: normal;
  letter-spacing: calc(-0.48 * var(--u));
  text-align: justify;
  color: #f0f0f0;
  padding: 12px;
}

/* campos — 480 de ancho, blanco al 30% */
.modal .field {
  width: calc(480 * var(--u));
  margin: 0;
}

.modal .hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.modal .lbl {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.modal input,
.modal textarea {
  display: block;
  width: 100%;
  border: none;
  background: rgba(255, 255, 255, .3);
  color: #fff;
  font-family: var(--font);
  font-weight: 500;
  font-size: calc(22 * var(--u));
  line-height: normal;
  letter-spacing: calc(-0.44 * var(--u));
  padding: 0 calc(24 * var(--u));
  transition: background .18s ease, box-shadow .18s ease;
}

.modal input {
  height: calc(53 * var(--u));
  border-radius: calc(100 * var(--u));
}

.modal textarea {
  height: calc(169 * var(--u));
  border-radius: calc(20 * var(--u));
  padding: calc(15 * var(--u)) calc(24 * var(--u));
  resize: none;
}

.modal ::placeholder {
  color: #fff;
  opacity: 1
}

.modal input:hover,
.modal textarea:hover {
  background: rgba(255, 255, 255, .38)
}

.modal input:focus,
.modal textarea:focus {
  outline: none;
  background: rgba(255, 255, 255, .42);
  box-shadow: 0 0 0 calc(2 * var(--u)) rgba(183, 226, 250, .9);
}

.modal .phone-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: calc(53 * var(--u));
  border-radius: calc(100 * var(--u));
  background: rgba(255, 255, 255, .3);
  overflow: hidden;
  transition: background .18s ease, box-shadow .18s ease;
}

.modal .phone-group:hover {
  background: rgba(255, 255, 255, .38)
}

.modal .phone-group:focus-within {
  background: rgba(255, 255, 255, .42);
  box-shadow: 0 0 0 calc(2 * var(--u)) rgba(183, 226, 250, .9);
}

.modal .phone-code {
  flex: none;
  width: auto;
  height: 100%;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, .35);
  border-radius: 0;
  background: transparent;
  background-image: none;
  color: #fff;
  font-family: var(--font);
  font-weight: 500;
  font-size: calc(22 * var(--u));
  letter-spacing: calc(-0.44 * var(--u));
  padding: 0 calc(14 * var(--u)) 0 calc(24 * var(--u));
  appearance: none;
  -webkit-appearance: none;
  cursor: default;
}

.modal .phone-code:focus {
  outline: none;
  box-shadow: none;
}

.modal .phone-group input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border-radius: 0;
  background: transparent;
  padding-left: calc(14 * var(--u));
}

.modal .phone-group input:hover,
.modal .phone-group input:focus {
  background: transparent;
  box-shadow: none;
}

/* botón — 158 de ancho, blanco con texto negro, 16/Medium */
.modal .send {
  width: calc(158 * var(--u));
  padding: calc(8 * var(--u)) 0;
  border: none;
  border-radius: calc(100 * var(--u));
  background: #fff;
  color: #000;
  font-family: var(--font);
  font-weight: 500;
  font-size: calc(16 * var(--u));
  line-height: normal;
  letter-spacing: calc(-0.32 * var(--u));
  text-align: center;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease;
}

.modal .send:hover {
  background: #e8f2ff;
  transform: translateY(-1px)
}

.modal .send:focus-visible {
  outline: 2px solid #b7e2fa;
  outline-offset: 3px
}

.modal .send[disabled] {
  opacity: .6;
  cursor: default
}


.modal .note {
  width: calc(560 * var(--u));
  margin: calc(-8 * var(--u)) 0 0;
  text-align: center;
  font-size: calc(15 * var(--u));
  line-height: 1.3;
  color: #d3e7fb;
  min-height: 1.3em;
}

.modal .note[data-state="error"] {
  color: #ffd4d4
}


.close {
  position: absolute;
  right: calc(22 * var(--u));
  top: calc(22 * var(--u));
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  transition: background .16s ease;
}

.close:hover {
  background: rgba(255, 255, 255, .24)
}

.close:focus-visible {
  outline: 2px solid #b7e2fa;
  outline-offset: 3px
}

.close svg {
  width: 42%;
  height: 42%;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  fill: none
}

@media (max-width:760px) {
  .modal {
    --u: 1px;
    width: calc(100vw - 24px);
    height: auto;
    max-height: calc(100svh - 24px);
  }

  .glass {
    height: auto;
    max-height: calc(100svh - 24px);
    overflow-y: auto;
    border-radius: 26px;
    padding: 54px 20px 28px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .glass>*,
  .modal .field,
  .modal .send,
  .modal .note {
    position: static
  }

  .modal h2 {
    width: auto;
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -.4px
  }

  .modal .lead {
    width: auto;
    font-size: 15px;
    transform: none
  }

  .modal .field {
    width: auto;
    transform: none
  }

  .modal input {
    height: 50px;
    font-size: 16px;
    padding: 0 20px
  }

  .modal textarea {
    height: 132px;
    font-size: 16px;
    padding: 14px 20px
  }

  .modal .phone-group {
    height: 50px
  }

  .modal .phone-code {
    font-size: 16px;
    padding: 0 10px 0 20px
  }

  .modal .phone-group input {
    font-size: 16px;
    padding-left: 10px
  }

  .modal .send {
    width: auto;
    align-self: center;
    padding: 13px 30px;
    font-size: 16px;
    transform: none
  }

  .modal .send:hover {
    transform: none
  }

  .modal .note {
    width: auto;
    transform: none;
    font-size: 14px
  }

  .close {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 36px;
    height: 36px
  }
}