:root {
  --green:#168215;
  --green-deep:#0e6810;
  --green-light:#d7f268;
  --ink:#25364a;
  --surface:#f4f6f8;
  --line:#c7d5e3;
  --muted:#dce6f1
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  color:#102d2b;
  font-family:Arial,Helvetica,sans-serif;
  background:#f6f5ef
}
.main {
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr
}
.intro {
  background:var(--surface);
  padding:42px;
  display:grid;
  place-items:center
}
.promo {
  width:min(500px,100%)
}
.offer-slide {
  display:none;
  overflow:hidden;
  border-radius:34px;
  background:#121414;
  color:#fff;
  box-shadow:0 20px 45px #26384b26
}
.offer-slide.active {
  display:block
}
.trip-image {
  height:245px;
  position:relative;
  overflow:hidden;
  background:#101212
}
.trip-image img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:top center
}
.trip-image:after {
  content:'↗';
  position:absolute;
  right:28px;
  top:24px;
  font-size:42px;
  color:#fff;
  line-height:1;
  text-shadow:0 2px 8px #0008
}
.promo-copy {
  min-height:275px;
  padding:30px 38px;
  background:radial-gradient(circle at 92% 15%,#2f921f 0,transparent 32%),linear-gradient(130deg,#121414,#090a0a)
}
.intro small {
  color:var(--green-light);
  font-weight:900;
  letter-spacing:.08em
}
.intro h1 {
  font-size:33px;
  line-height:1.08;
  margin:13px 0 12px;
  color:#fff;
  text-align:left
}
.intro p {
  line-height:1.4;
  max-width:380px;
  color:#edf3ed;
  font-size:16px;
  margin:0
}
.price-card {
  display:flex;
  align-items:end;
  justify-content:space-between;
  margin-top:19px;
  padding:13px 0 0;
  border-top:1px solid #ffffff26
}
.price-card span {
  display:block
}
.old-price {
  text-decoration:line-through;
  opacity:.7;
  font-size:14px
}
.new-price {
  font-size:25px;
  font-weight:800
}
.discount {
  position:relative;
  min-width:107px;
  padding:4px 0 13px;
  color:var(--green-light);
  font-weight:900;
  text-align:center;
  line-height:.8;
  transform:rotate(-3deg)
}
.discount .num {
  display:inline;
  font-size:47px;
  letter-spacing:-4px
}
.discount .sign {
  display:inline;
  font-size:26px;
  vertical-align:18px;
  letter-spacing:-2px
}
.discount .off {
  display:block;
  margin-top:4px;
  font-size:22px;
  letter-spacing:1px
}
.discount b {
  display:inline-block;
  margin-top:8px;
  padding:5px 8px;
  background:var(--green);
  color:#fff;
  font-size:10px;
  letter-spacing:.07em;
  line-height:1;
  transform:skew(-12deg)
}
.carousel {
  display:flex;
  justify-content:center;
  gap:12px;
  margin:18px 0 0
}
.carousel button {
  width:9px;
  height:9px;
  border:0;
  border-radius:50%;
  padding:0;
  background:#dae6b4;
  opacity:.75;
  cursor:pointer
}
.carousel button.active {
  width:31px;
  border-radius:10px;
  background:#b4d900;
  opacity:1
}
.form {
  min-height:100vh;
  display:grid;
  place-items:center;
  background:var(--surface);
  padding:0
}
.identity {
  width:min(380px,100%);
  min-height:790px;
  padding:23px 28px 42px;
  position:relative;
  background:var(--surface)
}
.close {
  position:absolute;
  right:27px;
  top:18px;
  color:#8290a0;
  border:0;
  background:transparent;
  padding:0;
  font:30px/1 Arial;
  cursor:pointer
}
.benefit-note {
  margin:42px 0 13px;
  color:#466177;
  text-align:center;
  font-size:13px;
  line-height:1.45
}
.benefit-note b {
  color:var(--green);
  font-weight:700
}
.logo {
  margin-top:47px;
  height:42px;
  display:flex;
  align-items:center
}
.logo img {
  display:block;
  width:168px;
  height:auto;
  max-height:42px
}
#one .logo {
  margin-top:0
}
h1 {
  margin:32px 0 30px;
  color:var(--green);
  text-align:center;
  font-size:21px;
  font-weight:500;
  line-height:1.55
}
label {
  display:block;
  margin:0 0 27px;
  color:var(--ink);
  font-size:15px;
  letter-spacing:.1px
}
input {
  width:100%;
  height:54px;
  margin-top:14px;
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  color:var(--ink);
  font:15px Arial,Helvetica,sans-serif;
  outline:none
}
input:focus {
  border-color:#7ca7c9;
  box-shadow:0 0 0 3px #cfe2f055
}
input::placeholder {
  color:#728195
}
.password {
  position:relative
}
.password input {
  padding-right:50px
}
.eye {
  position:absolute;
  right:14px;
  bottom:13px;
  width:26px;
  height:28px;
  border:0;
  background:transparent;
  color:#8199ae;
  cursor:pointer;
  padding:3px
}
.eye svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8
}
.submit {
  width:100%;
  height:56px;
  margin-top:1px;
  border:0;
  border-radius:30px;
  background:var(--green);
  color:#fff;
  font-size:15px;
  font-weight:700;
  cursor:pointer
}
.submit:disabled {
  background:var(--muted);
  color:#5f7186;
  cursor:not-allowed
}
.contact {
  display:block;
  margin-top:32px;
  color:#188116;
  text-align:center;
  font-size:16px;
  text-decoration:none
}
.contact b {
  margin-left:4px;
  font-size:18px
}
.hidden {
  display:none!important
}
.code-title {
  margin-top:40px
}
.code-help {
  color:#596b7e;
  text-align:center;
  font-size:15px;
  line-height:1.5;
  margin:-14px 0 30px
}
.digits {
  display:flex;
  gap:7px
}
.digits input {
  min-width:0;
  height:52px;
  margin:0;
  padding:0;
  text-align:center;
  font-size:20px
}
.state {
  margin:20px 0 0;
  padding:13px;
  border-radius:9px;
  background:#e8f7c7;
  color:#284b1e;
  font-size:14px
}
.err {
  background:#fff0ed;
  color:#963d31
}
@media(max-width:700px) {
  .main {
    grid-template-columns:1fr
  }
  .form {
    order:1;
    min-height:680px;
    align-items:start
  }
  .identity {
    width:100%;
    min-height:680px;
    padding-top:23px
  }
  .intro {
    order:2;
    min-height:0;
    padding:28px 22px 38px
  }
  .promo {
    max-width:420px
  }
  .offer-slide {
    border-radius:26px
  }
  .trip-image {
    height:205px
  }
  .promo-copy {
    min-height:238px;
    padding:27px 26px 24px
  }
  .intro h1 {
    font-size:29px
  }
  .intro p {
    margin-bottom:0;
    font-size:15px
  }
  .price-card {
    margin-top:19px
  }
  .new-price {
    font-size:21px
  }
}
/* Solo fotografía: se recorta antes de los textos incluidos en las capturas de origen. */ .trip-image {
  height:180px!important
}
.promo-copy small {
  display:none
}
.promo-copy h1 {
  margin-top:0
}
/* Composición de escritorio: dos áreas equilibradas dentro de un ancho editorial. */ body {
  background:var(--surface)
}
.main {
  width:min(1280px,100%);
  margin:auto;
  grid-template-columns:minmax(390px,480px) minmax(380px,420px);
  justify-content:center;
  column-gap:clamp(48px,8vw,120px)
}
.intro,.form {
  min-height:100vh;
  background:transparent
}
.intro {
  padding:42px 0
}
.form {
  padding:0
}
.identity {
  min-height:700px
}
.promo {
  width:100%
}
@media(max-width:700px) {
  .main {
    width:100%;
    grid-template-columns:1fr;
    column-gap:0
  }
  .intro {
    padding:28px 22px 38px;
    min-height:0
  }
  .form {
    background:var(--surface);
    min-height:680px
  }
  .identity {
    min-height:680px
  }
  .trip-image {
    height:180px!important
  }
}
.loading-card {
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center
}
.loader {
  width:54px;
  height:54px;
  border:5px solid #dbe8d8;
  border-top-color:var(--green);
  border-radius:50%;
  animation:spin .85s linear infinite
}
.loading-card h1 {
  margin:24px 0 8px
}
.loading-card p {
  color:#68788b
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
#two {
  padding-top:21px
}
#two .logo {
  margin-top:35px
}
#two .code-title {
  margin:43px 0 8px;
  font-size:21px
}
#two .code-help {
  margin:0 0 34px;
  text-align:left;
  color:#445a70;
  font-size:13px
}
#two .code-help b {
  color:var(--green)
}
#two .digits {
  gap:14px
}
#two .digits input {
  height:51px;
  border-radius:12px;
  font-size:20px
}
#two .copy-note {
  margin:13px 0 22px;
  text-align:center;
  color:#607491;
  font-size:11px
}
.notice {
  margin-top:48px;
  padding:16px;
  border-radius:7px;
  background:#fff0c7;
  color:#74520a;
  font-size:12px;
  line-height:1.55
}
.notice b {
  display:block;
  font-size:15px;
  margin-bottom:4px
}
#validate {
  margin-top:0
}
/* La vista pública se concentra exclusivamente en validar la identidad. */ .intro {
  display:none!important
}
.main {
  display:block!important;
  width:100%!important;
  min-height:100vh
}
.form {
  min-height:100vh!important;
  display:grid!important;
  place-items:center!important;
  background:var(--surface)!important
}
.identity {
  margin:auto
}
.promo {
  display:none
}
/* Landing de campaña: mensaje del anuncio, beneficio y formulario en una sola composición. */ #one {
  width:min(690px,calc(100% - 32px));
  min-height:auto;
  margin:32px auto;
  padding:28px 40px 29px;
  border:1px solid #e2e9e3;
  border-radius:17px;
  background:#fff;
  box-shadow:0 18px 48px #23394a13
}
#one .close {
  display:none
}
#one .benefit-note {
  display:inline-block;
  margin:0 0 20px;
  padding:9px 21px;
  border-radius:999px;
  background:#e2f6d8;
  color:#197019;
  font-size:12px;
  font-weight:800;
  letter-spacing:.075em;
  text-transform:uppercase
}
#one .benefit-note b {
  color:inherit
}
#one .logo {
  height:52px;
  justify-content:center;
  gap:16px
}
#one .logo img {
  width:184px;
  max-height:52px
}
#one h1 {
  max-width:580px;
  margin:25px auto 8px;
  color:#12442b;
  font-size:35px;
  font-weight:800;
  line-height:1.13;
  letter-spacing:-.8px
}
#one .campaign-copy {
  max-width:510px;
  margin:0 auto 29px;
  color:#596b7e;
  text-align:center;
  font-size:17px;
  line-height:1.45
}
.benefit-footer {
  position:relative;
  min-height:98px;
  padding-right:118px
}
.discount-seal {
  position:absolute;
  right:0;
  bottom:3px;
  display:grid;
  place-items:center;
  width:98px;
  height:98px;
  border-radius:50%;
  background:linear-gradient(145deg,#209a20,#0e6810);
  box-shadow:0 10px 22px #146b1d38;
  color:#fff;
  text-align:center;
  font-weight:900;
  line-height:.86;
  transform:rotate(-5deg)
}
.discount-seal strong {
  font-size:31px;
  letter-spacing:-1.8px
}
.discount-seal span {
  font-size:22px;
  letter-spacing:.03em
}
#one form {
  max-width:610px;
  margin:auto
}
#one label {
  margin-bottom:17px;
  font-weight:700
}
#one input {
  margin-top:8px
}
#one .submit {
  margin-top:2px;
  background:linear-gradient(100deg,#147b17,#198f1c);
  box-shadow:0 8px 18px #16741629;
  font-size:17px
}
#one .submit:disabled {
  background:var(--muted);
  box-shadow:none;
  color:#5f7186
}
.trust {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:9px 22px;
  margin:23px 0 17px;
  color:#5f6f80;
  font-size:13px
}
.trust span {
  display:inline-flex;
  align-items:center;
  white-space:nowrap
}
.trust-icon {
  width:22px;
  height:22px;
  margin-right:7px;
  fill:none;
  stroke:var(--green);
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round
}
.conditions {
  margin:0;
  padding-top:16px;
  border-top:1px solid #e4eaed;
  color:#7a8794;
  text-align:center;
  font-size:12px
}
.conditions a {
  color:#387b36;
  text-decoration:none
}
.conditions a:hover {
  text-decoration:underline
}
#one .contact {
  display:none
}
@media(max-width:700px) {
  #one {
    width:calc(100% - 24px);
    margin:12px auto;
    padding:24px 21px 25px;
    border-radius:15px
  }
  #one .benefit-note {
    margin-bottom:18px;
    padding:8px 11px;
    font-size:10px;
    letter-spacing:.04em
  }
  #one .logo {
    height:43px;
    gap:8px
  }
  #one .logo img {
    width:150px;
    max-height:43px
  }
  #one h1 {
    max-width:100%;
    margin-top:23px;
    font-size:28px;
    letter-spacing:-.5px
  }
  #one .campaign-copy {
    max-width:100%;
    margin-bottom:24px;
    font-size:15px
  }
  .benefit-footer {
    min-height:75px;
    padding-right:77px
  }
  .discount-seal {
    right:0;
    bottom:0;
    width:67px;
    height:67px
  }
  .discount-seal strong {
    font-size:22px
  }
  .discount-seal span {
    font-size:15px
  }
  #one label {
    margin-bottom:15px
  }
  #one input {
    height:52px
  }
  #one .submit {
    height:55px;
    font-size:16px
  }
  .trust {
    gap:8px 14px;
    margin:20px 0 15px;
    font-size:11px
  }
  .trust-icon {
    width:18px;
    height:18px;
    margin-right:4px
  }
  .conditions {
    padding-top:14px;
    font-size:10px
  }
}