@font-face {
  font-display: swap;
  font-family: "Republica Minor 2.0";
  font-style: normal;
  font-weight: 400;
  src: url("/bundles/applandings/fonts/republica-minor-2.0.otf") format("opentype");
}

:root {
  --cf-blue: #4082fd;
  --cf-blue-dark: #264e97;
  --cf-ink: #434343;
}

.cf-page {
  color: var(--cf-ink);
  font-family: "Estricta", Arial, sans-serif;
  overflow: hidden;
}

.cf-page *,
.cf-page *::before,
.cf-page *::after { box-sizing: border-box; }
.cf-page p { margin-top: 0; }

.cf-hero {
  aspect-ratio: 3 / 1;
  background: #031329 url("/imagenes/crypton-finn-2026/hero.webp") center/cover no-repeat;
  color: #fff;
  height: auto;
  line-height: normal;
  padding: 0;
  position: relative;
  width: 100%;
}

.cf-hero__logo {
  left: 50%;
  position: absolute;
  top: 5.8%;
  transform: translateX(-50%);
  width: 8.5%;
}

.cf-hero__logo img { display: block; height: auto; width: 100%; }

.cf-hero__copy {
  display: flex;
  flex-direction: column;
  height: clamp(52px, 5.7vw, 110px);
  justify-content: center;
  position: absolute;
  text-align: center;
  top: 42.5%;
}

.cf-hero__copy--left { left: 14.2%; width: 16.6%; }
.cf-hero__copy--right { right: 12.4%; width: 24.6%; }
.cf-hero__copy > span,
.cf-hero__copy > strong { display: block; }
.cf-hero__copy > span { font-size: clamp(11px, 1.67vw, 32px); line-height: 1.05; }
.cf-hero__copy--left > span {
  letter-spacing: .33em;
  text-transform: uppercase;
}
.cf-hero__copy > strong {
  font-family: "Republica Minor 2.0", "Estricta", Arial, sans-serif;
  font-size: clamp(15px, 2.08vw, 40px);
  font-weight: 400;
  line-height: 1.12;
  text-transform: uppercase;
}
.cf-hero__copy--right > strong {
  align-items: center;
  display: flex;
  justify-content: center;
  white-space: nowrap;
}
.cf-finn-logo {
  display: inline-block;
  height: clamp(24px, 4vw, 77px);
  margin-left: .22em;
  width: clamp(63px, 10.4vw, 200px);
}
.cf-finn-logo img { display: block; height: 100%; object-fit: contain; width: 100%; }

.cf-preventa {
  aspect-ratio: 1.9753 / 1;
  background: #02060d url("/imagenes/crypton-finn-2026/preventa.webp") center top/100% auto no-repeat;
  color: #fff;
  position: relative;
}

.cf-hero__more {
  color: #fff;
  font-size: clamp(12px, 1.67vw, 32px);
  left: 50%;
  position: absolute;
  text-align: center;
  text-decoration: none;
  top: calc(100% + 4.5vw);
  transform: translateX(-50%);
  z-index: 2;
}
.cf-hero__more:hover,
.cf-hero__more:focus { color: #fff; text-decoration: none; }
.cf-hero__more img {
  display: block;
  height: clamp(18px, 2.8vw, 54px);
  margin: .3em auto 0;
  width: clamp(18px, 2.8vw, 54px);
}

.cf-preventa__offer { inset: 0; position: absolute; }
.cf-preventa__facts {
  display: flex;
  font-family: "Republica Minor 2.0", "Estricta", Arial, sans-serif;
  gap: clamp(32px, 4.17vw, 80px);
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 47%;
  transform: translateX(-50%);
  width: 66%;
}
.cf-preventa__facts > div { align-items: center; display: flex; flex: 0 0 auto; }
.cf-preventa__check {
  display: block;
  flex: 0 0 auto;
  height: clamp(28px, 4.32vw, 83px);
  margin-right: clamp(12px, 1.25vw, 24px);
  width: clamp(28px, 4.32vw, 83px);
}
.cf-preventa__fact {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
}
.cf-preventa__fact span,
.cf-preventa__fact strong {
  display: block;
  font-weight: 400;
  text-transform: uppercase;
}
.cf-preventa__fact--motor span { font-size: clamp(13px, 1.56vw, 30px); }
.cf-preventa__fact--motor strong { font-size: clamp(13px, 1.56vw, 30px); margin-top: .2em; }
.cf-preventa__fact--launch span { font-size: clamp(11px, 1.15vw, 22px); }
.cf-preventa__fact--launch strong { font-size: clamp(18px, 1.82vw, 35px); margin-top: .22em; }
.cf-preventa__fact--financing strong { font-size: clamp(22px, 2.3vw, 44px); }
.cf-preventa__fact--financing span { font-size: clamp(11px, 1.25vw, 24px); margin-top: .12em; text-transform: none; }

.cf-preventa__price {
  align-items: center;
  background: #fff;
  border-radius: clamp(5px, .68vw, 13px);
  box-shadow: 0 4px 10px rgba(55,53,228,.34), 0 18px 18px rgba(55,53,228,.3), 0 40px 24px rgba(55,53,228,.18);
  display: flex;
  font-family: "Republica Minor 2.0", "Estricta", Arial, sans-serif;
  font-size: clamp(21px, 3.34vw, 64px);
  font-weight: 400;
  height: 11.2%;
  justify-content: center;
  left: 50%;
  line-height: 1;
  padding: .08em .25em 0;
  position: absolute;
  text-transform: uppercase;
  top: 67.9%;
  transform: translateX(-50%);
  white-space: nowrap;
  width: 62.3%;
}
.cf-preventa__price span {
  background: linear-gradient(90deg, var(--cf-blue), var(--cf-blue-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cf-preventa__price strong { color: var(--cf-ink); font-weight: 400; margin-left: .18em; }
.cf-preventa__price sup { font-size: .78em; margin-left: .04em; top: -.38em; }
.cf-preventa__legal {
  font-size: clamp(7px, .78vw, 15px);
  left: 50%;
  line-height: 1.25;
  margin: 0;
  position: absolute;
  text-align: center;
  top: 85.4%;
  transform: translateX(-50%);
  width: 62.3%;
}

.cf-contact {
  background: #fff;
  min-height: 0;
  padding: clamp(58px, 4.55vw, 88px) 20px 102px;
  position: relative;
}
.cf-contact::before {
  background: linear-gradient(rgba(255,255,255,.88), #fff), url("/imagenes/crypton-finn-2026/form-texture.webp") center/cover;
  content: "";
  inset: 0;
  opacity: .42;
  pointer-events: none;
  position: absolute;
}
.cf-contact > * { position: relative; }
.cf-contact--success { min-height: 277px; padding: 35px 20px 78px; }
.cf-section-heading { text-align: center; }
.cf-section-heading--contact p { font-size: clamp(17px, 1.36vw, 26px); margin-bottom: 0; }
.cf-section-heading--contact b {
  background: linear-gradient(90deg, var(--cf-blue), var(--cf-blue-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

.cf-form { margin: clamp(42px, 3.4vw, 65px) auto 0; max-width: 1440px; }
.cf-form__grid { display: grid; gap: 32px 16px; grid-template-columns: repeat(3, 1fr); }
.cf-form .form-control,
.cf-form .form-select {
  background-color: #fff;
  border: 1px solid #434343 !important;
  border-radius: 4px !important;
  color: #434343;
  font-size: 20px;
  height: 52px;
}
.cf-form__required {
  font-size: 13px;
  margin: 12px 0 0 12px;
}
.cf-form__verification {
  align-items: center;
  display: flex;
  gap: 30px;
  justify-content: center;
  margin-top: 44px;
}
.cf-form__verification .form-check { font-size: 20px; }
.cf-form__verification a { color: #434343; }
.cf-form__submit { margin-top: 48px; text-align: center; }
.cf-form__submit button {
  background: linear-gradient(90deg, var(--cf-blue), var(--cf-blue-dark));
  border: 0;
  border-radius: 4px;
  box-shadow: 0 8px 13px rgba(58,87,251,.28), 0 20px 30px rgba(54,67,222,.38), 0 34px 38px rgba(61,50,214,.2);
  color: #fff;
  font-family: "Estricta", Arial, sans-serif;
  font-size: 20px;
  font-weight: 800;
  height: 52px;
  letter-spacing: .01em;
  max-width: 100%;
  padding: 0 24px;
  text-transform: uppercase;
  width: 350px;
}
.cf-form__submit button i { font-size: 20px; margin-left: 12px; vertical-align: -.08em; }
.cf-success {
  align-items: center;
  background-color: #d1e7dd;
  border-color: #badbcc;
  border-radius: 4px;
  color: #0f5132;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  justify-content: center;
  margin: 0 auto;
  max-width: 1440px;
  min-height: 164px;
  padding: 18px;
  width: 100%;
}
.cf-success__icon { font-size: 34px; font-weight: 800; line-height: 1; margin-bottom: 8px; }
.cf-success strong { color: #062c20; margin-top: 27px; }

.cf-footer { background: #313131; color: #fff; padding: 70px 20px; }
.cf-footer__inner { display: grid; gap: 90px; grid-template-columns: 190px 1fr; margin: auto; max-width: 1330px; }
.cf-footer__logos img { display: block; height: auto; margin-bottom: 35px; width: 163px; }
.cf-footer__content p { font-size: 11px; line-height: 1.45; max-width: 1060px; }
.cf-footer__content a { color: inherit; }
.cf-footer__bottom { align-items: center; display: flex; gap: 12px; margin-top: 35px; }
.cf-footer__bottom img { display: block; height: 32px; width: 32px; }
.cf-footer__bottom small { margin-left: 28px; }

@media (max-width: 991px) {
  .cf-hero__copy--left { left: 7%; width: 28%; }
  .cf-hero__copy--right { right: 4%; width: 33%; }
  .cf-preventa__facts { width: 72%; }
  .cf-preventa__price { width: 72%; }
  .cf-preventa__legal { width: 76%; }
}

@media (max-width: 767px) {
  .cf-hero {
    aspect-ratio: auto;
    background-size: auto 100%;
    min-height: 400px;
  }
  .cf-hero__logo { top: 24px; width: 116px; }
  .cf-hero__copy { top: 52%; }
  .cf-hero__copy--left { left: 2%; width: 39%; }
  .cf-hero__copy--right { right: 1%; width: 43%; }
  .cf-hero__copy > span { font-size: 13px; }
  .cf-hero__copy > strong { font-size: 18px; }
  .cf-hero__copy--left > span { letter-spacing: .2em; }
  .cf-finn-logo { height: 34px; margin-left: .1em; width: 88px; }
  .cf-preventa {
    aspect-ratio: auto;
    background-color: #02060d;
    background-position: center top;
    background-size: 132% auto;
    min-height: 650px;
  }
  .cf-preventa__facts {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    left: 50%;
    top: 26%;
    width: auto;
  }
  .cf-preventa__facts > div { justify-content: flex-start; min-width: 220px; width: auto; }
  .cf-preventa__check { height: 54px; margin-right: 18px; width: 54px; }
  .cf-preventa__fact--motor span,
  .cf-preventa__fact--motor strong { font-size: 17px; }
  .cf-preventa__fact--launch strong { font-size: 23px; }
  .cf-preventa__fact--launch span,
  .cf-preventa__fact--financing span { font-size: 15px; }
  .cf-preventa__fact--financing strong { font-size: 29px; }
  .cf-preventa__price { font-size: clamp(14px, 4.25vw, 17px); height: 9%; top: 65%; width: 94%; }
  .cf-preventa__legal { font-size: 9px; line-height: 1.3; top: 79.5%; width: 90%; }

  .cf-contact { min-height: auto; padding-bottom: 70px; }
  .cf-form { margin-top: 35px; }
  .cf-form__grid { gap: 16px; grid-template-columns: 1fr; }
  .cf-form .form-control,
  .cf-form .form-select { font-size: 16px; }
  .cf-form__verification { align-items: flex-start; flex-direction: column; }
  .cf-form__captcha { max-width: 100%; overflow: hidden; }
  .cf-footer__inner { gap: 35px; grid-template-columns: 1fr; }
  .cf-footer__logos { display: flex; gap: 30px; }
  .cf-footer__bottom { flex-wrap: wrap; }
  .cf-footer__bottom small { margin-left: 0; width: 100%; }
}