:root{
  --navy:#071a54;
  --navy-2:#0b2b74;
  --blue:#394cff;
  --cyan:#06bfd5;
  --aqua:#79e5e1;
  --gold:#f4c72e;
  --white:#fff;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;}
html{scroll-behavior:smooth}
body{
  font-family:Arial, Helvetica, sans-serif;
  color:var(--navy);
  background:#dff7fb;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

.landing{
  position:relative;
  min-height:100svh;
  height:100svh;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(ellipse at 5% 38%, rgba(255,255,255,.98) 0%, rgba(248,252,255,.94) 24%, rgba(232,248,252,.58) 43%, transparent 61%),
    radial-gradient(ellipse at 50% 18%, rgba(255,255,255,.52) 0%, rgba(224,248,251,.43) 40%, transparent 70%),
    radial-gradient(ellipse at 84% 44%, rgba(77,225,217,.58) 0%, rgba(106,229,222,.43) 35%, rgba(177,241,239,.28) 56%, transparent 73%),
    linear-gradient(110deg,#f5fbff 0%,#e8f8fd 38%,#d6f6f4 68%,#a9ede8 100%);
}

.sky-glow{
  position:absolute;
  inset:0;
  z-index:-5;
  pointer-events:none;
  background:
    radial-gradient(circle at 31% 86%, rgba(112,198,255,.13), transparent 30%),
    radial-gradient(circle at 69% 79%, rgba(25,198,222,.14), transparent 29%),
    radial-gradient(circle at 80% 18%, rgba(255,255,255,.22), transparent 24%);
}

.cloud-layer{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.cloud-img{position:absolute;user-select:none;pointer-events:none}
.cloud-top-left{left:-.2vw;top:7.5vh;width:min(7vw,92px);opacity:.96}
.cloud-top-right{right:-.2vw;top:7.3vh;width:min(6.5vw,92px);opacity:.9}
.cloud-bottom-left{left:-1.1vw;bottom:-.8vh;width:min(29vw,420px);opacity:.99}
.cloud-bottom-right{right:-.4vw;bottom:-1vh;width:min(18.5vw,268px);opacity:.97}

.soft-cloud{
  position:absolute;
  width:240px;height:72px;
  border-radius:999px;
  background:rgba(255,255,255,.56);
  filter:blur(13px);
  opacity:.34;
  box-shadow:64px -28px 0 12px rgba(255,255,255,.49),128px -7px 0 0 rgba(255,255,255,.43);
  animation:softCloudDrift 18s ease-in-out infinite alternate;
}
.soft-cloud-a{left:23%;top:8%;transform:scale(.8)}
.soft-cloud-b{right:22%;bottom:12%;transform:scale(.62);animation-delay:-8s}
@keyframes softCloudDrift{to{translate:20px -8px;opacity:.46}}

.topbar{
  position:absolute;
  z-index:20;
  top:0;
  left:0;
  right:0;
  height:10.8vh;
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.5vh 4.6vw 0;
}
.brand img{
  width:clamp(250px,24.3vw,355px);
  height:auto;
  filter:drop-shadow(0 8px 14px rgba(5,30,80,.08));
}
.top-cta,.action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  font-weight:800;
  white-space:nowrap;
}
.top-cta{
  min-width:230px;
  height:62px;
  padding:0 32px;
  border-radius:34px;
  color:#fff;
  background:linear-gradient(100deg,#0c2e8d 0%,#064fbd 48%,#03c3dc 100%);
  box-shadow:0 16px 31px rgba(4,85,158,.25);
  font-size:18px;
  transition:transform .22s ease,box-shadow .22s ease;
}
.top-cta b,.action b{font-size:28px;font-weight:400;line-height:1}
.top-cta:hover,.action-primary:hover{transform:translateY(-2px);box-shadow:0 20px 36px rgba(4,85,158,.31)}

.hero{
  position:relative;
  width:100%;
  height:100%;
}
.copy-column{
  position:absolute;
  z-index:8;
  left:4.7vw;
  top:26.3vh;
  width:39vw;
  min-width:500px;
}
.hero-title{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  font-family:"Arial Black","Segoe UI Black",Arial,sans-serif;
  font-size:clamp(74px,6.45vw,98px);
  line-height:.93;
  letter-spacing:-.058em;
  font-weight:900;
  color:#050f38;
  text-wrap:balance;
}
.hero-title>span{display:block}
.divina-wrap{position:relative;display:inline-block}
.divina-wrap em{
  display:inline-block;
  font-style:normal;
  font-weight:900;
  letter-spacing:-.06em;
  color:transparent;
  background:linear-gradient(101deg,#3c4cff 4%,#149fe6 54%,#09c7c7 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
.moving-halo{
  position:absolute;
  z-index:3;
  left:65%;
  top:-.22em;
  width:1.02em;
  height:.22em;
  border:.055em solid var(--gold);
  border-radius:50%;
  transform:translateX(-50%) rotate(6deg);
  box-shadow:0 5px 7px rgba(163,117,0,.14), inset 0 1px 0 rgba(255,255,255,.6);
  animation:divineHalo 2.5s ease-in-out infinite;
}
@keyframes divineHalo{
  0%,100%{transform:translateX(-50%) translateY(0) rotate(6deg) scaleX(1)}
  50%{transform:translateX(-50%) translateY(-9px) rotate(-2deg) scaleX(1.08)}
}
.hero-subtitle{
  margin:44px 0 0;
  color:#081a53;
  font-size:clamp(22px,1.92vw,30px);
  line-height:1.36;
  letter-spacing:-.03em;
  font-weight:500;
}
.hero-subtitle strong{color:#2449ff;font-weight:900}
.typing-caret{
  display:inline-block;
  width:2px;
  height:1.08em;
  margin-left:6px;
  vertical-align:-.16em;
  background:#2449ff;
  animation:caretBlink .92s steps(1) infinite;
}
@keyframes caretBlink{50%{opacity:0}}

.visual-column{
  position:absolute;
  z-index:5;
  inset:0;
}
.price-orb{
  position:absolute;
  z-index:3;
  left:63.5%;
  top:53.2%;
  transform:translate(-50%,-50%);
  width:clamp(268px,24.2vw,355px);
  aspect-ratio:1;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.99) 0%,rgba(247,253,254,.98) 49%,rgba(228,248,249,.97) 100%);
  border:1px solid rgba(255,255,255,.96);
  box-shadow:0 0 0 1px rgba(255,255,255,.36),0 26px 62px rgba(48,147,158,.11),inset 0 -20px 50px rgba(66,207,205,.05);
}
.launch-label{
  font-size:clamp(14px,1.24vw,20px);
  letter-spacing:.11em;
  font-weight:900;
  color:#0b286e;
  margin-bottom:17px;
}
.price-orb strong{
  display:block;
  color:#0a2b75;
  font-size:clamp(52px,4.8vw,76px);
  line-height:.9;
  letter-spacing:-.055em;
  font-weight:900;
}
.price-orb small{
  margin-top:22px;
  color:#0f5d9b;
  font-size:clamp(17px,1.55vw,24px);
  line-height:1.28;
  font-weight:500;
}

.orbit-slot{
  position:absolute;
  z-index:5;
  width:clamp(145px,14.4vw,222px);
  height:clamp(125px,14vw,215px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:scale(.82) translateY(12px);
  filter:blur(8px);
  transition:opacity .75s ease,transform .9s cubic-bezier(.22,.75,.22,1),filter .75s ease;
  pointer-events:none;
}
.orbit-slot.visible{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}
.orbit-slot img{
  max-width:100%;
  max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
  filter:drop-shadow(0 17px 15px rgba(19,79,110,.15));
  animation:itemFloat 4.8s ease-in-out infinite;
}
.slot-1{left:40.5%;top:7.2%;width:clamp(165px,16.4vw,240px);height:clamp(155px,22vh,240px)}
.slot-2{left:68.8%;top:13.5%;width:clamp(175px,18vw,260px);height:clamp(165px,22vh,250px)}
.slot-3{left:36.5%;top:35.8%;width:clamp(150px,15vw,220px);height:clamp(135px,17vh,205px)}
.slot-4{left:73.7%;top:38.2%;width:clamp(182px,18vw,260px);height:clamp(165px,21vh,245px)}
.slot-5{left:34.8%;bottom:14.1%;width:clamp(160px,16vw,232px);height:clamp(145px,19vh,220px)}
.slot-6{left:71.8%;bottom:10.2%;width:clamp(175px,17.5vw,254px);height:clamp(155px,19vh,230px)}
.slot-2 img,.slot-5 img{animation-delay:-1.4s}
.slot-3 img,.slot-6 img{animation-delay:-2.7s}
@keyframes itemFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1.4deg)}}

.hero-actions{
  position:absolute;
  z-index:14;
  left:50%;
  bottom:7.5vh;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:48px;
}
.action{
  min-width:295px;
  height:74px;
  padding:0 38px;
  border-radius:40px;
  font-size:20px;
}
.action-primary{
  color:#fff;
  background:linear-gradient(100deg,#0c2f8c 0%,#0755c2 49%,#05bdd6 100%);
  box-shadow:0 16px 32px rgba(4,85,158,.19);
}
.action-secondary{
  color:#071342;
  background:rgba(255,255,255,.96);
  border:2px solid #071342;
  box-shadow:0 12px 22px rgba(18,71,101,.07);
}
.action-secondary:hover{transform:translateY(-2px);background:#fff}
.benefits-anchor{position:absolute;left:0;top:100vh;height:1px;opacity:0;pointer-events:none}

@media (max-width:1150px){
  .brand img{width:270px}
  .copy-column{left:4vw;top:26vh;width:39vw;min-width:390px}
  .hero-title{font-size:clamp(62px,7vw,80px)}
  .hero-subtitle{font-size:24px;margin-top:31px}
  .action{min-width:250px;height:62px;font-size:18px}
  .hero-actions{gap:28px}
}

@media (max-width:760px){
  .landing{
    min-height:100svh;
    height:100svh;
    background:
      radial-gradient(ellipse at 0% 18%, rgba(255,255,255,.98) 0%,rgba(247,252,255,.9) 30%,transparent 54%),
      radial-gradient(ellipse at 88% 52%, rgba(80,228,221,.56) 0%,rgba(124,233,229,.4) 42%,transparent 72%),
      linear-gradient(120deg,#f4fbff 0%,#e8f9fc 48%,#b4efec 100%);
  }
  .topbar{
    height:66px;
    min-height:66px;
    padding:7px 12px 0;
  }
  .brand img{width:139px}
  .top-cta{
    min-width:0;
    height:38px;
    padding:0 13px;
    gap:7px;
    border-radius:21px;
    font-size:11px;
    box-shadow:0 8px 18px rgba(4,85,158,.22);
  }
  .top-cta b{font-size:18px}
  .copy-column{
    left:12px;
    right:12px;
    top:76px;
    width:auto;
    min-width:0;
  }
  .hero-title{
    font-size:clamp(47px,14.6vw,59px);
    line-height:.91;
    letter-spacing:-.066em;
  }
  .moving-halo{border-width:.06em;top:-.19em;left:66%}
  .hero-subtitle{
    margin-top:17px;
    font-size:clamp(15px,4.6vw,18px);
    line-height:1.3;
    letter-spacing:-.025em;
  }
  .desktop-break{display:none}
  .visual-column{
    left:0;
    right:0;
    top:315px;
    bottom:67px;
  }
  .price-orb{
    left:50%;
    top:51%;
    width:136px;
  }
  .launch-label{font-size:8px;margin-bottom:8px;letter-spacing:.1em}
  .price-orb strong{font-size:31px}
  .price-orb small{font-size:9px;margin-top:8px;line-height:1.25}
  .orbit-slot{width:95px;height:90px}
  .slot-1{left:8%;top:2%;width:98px;height:96px}
  .slot-2{left:auto;right:7%;top:2%;width:96px;height:94px}
  .slot-3{left:2%;top:39%;width:94px;height:88px}
  .slot-4{left:auto;right:1%;top:39%;width:100px;height:92px}
  .slot-5{left:11%;top:auto;bottom:0;width:92px;height:84px}
  .slot-6{left:auto;right:9%;top:auto;bottom:0;width:94px;height:86px}
  .orbit-slot:nth-of-type(n+6){display:none}
  .hero-actions{
    left:12px;
    right:12px;
    bottom:11px;
    transform:none;
    gap:9px;
  }
  .action{
    flex:1 1 0;
    min-width:0;
    height:42px;
    border-radius:24px;
    padding:0 10px;
    font-size:11px;
    gap:6px;
  }
  .action b{font-size:18px}
  .cloud-top-left{width:64px;top:58px;left:-8px;opacity:.76}
  .cloud-top-right{width:62px;top:60px;right:-8px;opacity:.68}
  .cloud-bottom-left{width:190px;left:-28px;bottom:-7px}
  .cloud-bottom-right{width:145px;right:-18px;bottom:-12px}
  .soft-cloud{display:none}
}

@media (max-width:360px){
  .brand img{width:125px}
  .top-cta{font-size:10px;padding:0 10px}
  .copy-column{top:70px}
  .hero-title{font-size:45px}
  .hero-subtitle{font-size:14px;margin-top:12px}
  .visual-column{top:292px;bottom:61px}
  .price-orb{width:122px}
  .price-orb strong{font-size:28px}
  .orbit-slot{transform-origin:center}
  .slot-1,.slot-2{width:84px;height:82px}
  .slot-3,.slot-4{width:86px;height:80px}
  .slot-5,.slot-6{width:82px;height:76px}
  .action{height:39px;font-size:10px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Desktop fine-tuning against the approved 4:3 visual reference. */
@media (min-width:761px){
  .hero-title > span{
    transform:scaleX(1.24);
    transform-origin:left center;
  }
  .moving-halo{top:-.16em;left:61%}
  .slot-3{left:35.2%;top:35.6%;width:17vw;height:18.5vh}
  .slot-4{left:72.8%;top:37.6%;width:19vw;height:22vh}
  .slot-5{left:33.9%;bottom:13%;width:18vw;height:20.5vh}
  .slot-6{left:70.8%;bottom:9.2%;width:19vw;height:20.5vh}
  .cloud-top-left{width:min(6vw,82px)}
  .cloud-top-right{width:min(6vw,86px)}
  .cloud-bottom-right{width:min(6vw,86px)}
}

/* ===== Mejoras solicitadas ===== */

/* Título: tipografía rehecha sin deformación horizontal. */
.hero-title{
  font-family:"Arial Black","Segoe UI Black","Segoe UI",Arial,sans-serif;
  font-weight:900;
  letter-spacing:-.064em;
  line-height:.92;
  font-size:clamp(72px,6.15vw,94px);
}
@media (min-width:761px){
  .hero-title > span{transform:none!important}
  .moving-halo{left:54%;top:-.18em}
}

/* Subtítulo dinámico con espacio estable para que la composición no salte. */
.hero-subtitle{
  width:min(610px,42vw);
  min-height:3.05em;
  margin-top:38px;
  font-size:clamp(21px,1.76vw,28px);
  line-height:1.34;
  font-weight:600;
}
.hero-subtitle strong{
  color:#2449ff;
  font-weight:900;
}

/* Círculo de lanzamiento más pequeño y contenido más contenido. */
.price-orb{
  width:clamp(222px,19.8vw,294px);
  box-shadow:0 0 0 1px rgba(255,255,255,.4),0 22px 54px rgba(48,147,158,.11),inset 0 -18px 42px rgba(66,207,205,.05);
}
.launch-label{
  font-size:clamp(11px,.92vw,14px);
  margin-bottom:12px;
  letter-spacing:.12em;
}
.price-orb strong{
  font-size:clamp(43px,3.8vw,58px);
}
.price-orb small{
  margin-top:15px;
  font-size:clamp(14px,1.18vw,18px);
  line-height:1.26;
}

/* Etiquetas de rubro debajo de cada recorte. */
.orbit-slot{overflow:visible}
.rubric-label{
  position:absolute;
  left:50%;
  bottom:-10px;
  transform:translateX(-50%);
  z-index:8;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:27px;
  max-width:92%;
  padding:5px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.96);
  box-shadow:0 8px 18px rgba(18,79,109,.12);
  color:#0b3574;
  font-size:12px;
  line-height:1;
  font-weight:900;
  white-space:nowrap;
  backdrop-filter:blur(8px);
}

/* Destello continuo en los CTA principales. */
.shine-button{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.shine-button::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:-55%;
  bottom:-55%;
  width:54px;
  left:-88px;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.78),transparent);
  filter:blur(1px);
  animation:buttonSpark 3.6s cubic-bezier(.5,0,.2,1) infinite;
  pointer-events:none;
}
@keyframes buttonSpark{
  0%,58%{left:-90px;opacity:0}
  63%{opacity:.95}
  86%{left:calc(100% + 90px);opacity:.8}
  100%{left:calc(100% + 90px);opacity:0}
}

/* Reflejo que recorre solamente las letras/forma del logo. */
.brand{
  position:relative;
  display:inline-block;
  isolation:isolate;
}
.brand::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 26%,rgba(255,255,255,.08) 37%,rgba(255,255,255,.94) 48%,rgba(255,255,255,.08) 59%,transparent 70%);
  background-size:230% 100%;
  -webkit-mask:url("assets/reservhalo.png") center/contain no-repeat;
  mask:url("assets/reservhalo.png") center/contain no-repeat;
  animation:logoReflection 4.8s ease-in-out infinite;
}
@keyframes logoReflection{
  0%,46%{background-position:190% 0;opacity:0}
  51%{opacity:.9}
  77%{background-position:-80% 0;opacity:.95}
  86%,100%{background-position:-80% 0;opacity:0}
}

/* Ver demo es un botón real pero conserva exactamente la estética del CTA secundario. */
button.action{
  font-family:inherit;
  cursor:pointer;
}
.demo-trigger{appearance:none;-webkit-appearance:none}

/* Modal: sin panel de fondo. Solo video, cerrar y CTA. */
.demo-modal{
  width:min(920px,94vw);
  max-width:none;
  padding:0;
  margin:auto;
  border:0;
  outline:0;
  background:transparent;
  overflow:visible;
}
.demo-modal::backdrop{background:rgba(4,22,58,.08);backdrop-filter:blur(2px)}
.demo-stage{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  width:100%;
  background:transparent;
}
.demo-video{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border:0;
  border-radius:22px;
  background:#071a54;
  box-shadow:0 28px 80px rgba(5,32,83,.34);
  object-fit:cover;
}
.demo-close{
  position:absolute;
  z-index:5;
  top:-18px;
  right:-18px;
  width:45px;
  height:45px;
  display:grid;
  place-items:center;
  padding:0;
  border:2px solid #fff;
  border-radius:50%;
  background:#071a54;
  color:#fff;
  box-shadow:0 8px 22px rgba(5,32,83,.24);
  font:700 30px/1 Arial,sans-serif;
  cursor:pointer;
}
.demo-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  min-width:270px;
  height:58px;
  padding:0 30px;
  border-radius:31px;
  color:#fff;
  background:linear-gradient(100deg,#0c2e8d 0%,#064fbd 48%,#03c3dc 100%);
  box-shadow:0 14px 28px rgba(4,85,158,.25);
  font-size:18px;
  font-weight:900;
}

@media (max-width:760px){
  /* Mobile: título y copy completamente centrados. */
  .copy-column{
    left:14px;
    right:14px;
    top:74px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .hero-title{
    align-items:center;
    text-align:center;
    width:100%;
    font-size:clamp(44px,13.4vw,54px);
    line-height:.91;
    letter-spacing:-.067em;
  }
  .hero-title > span,
  .divina-wrap{margin-inline:auto}
  .moving-halo{left:50%;top:-.18em}
  .hero-subtitle{
    width:100%;
    max-width:345px;
    min-height:4.1em;
    margin:15px auto 0;
    text-align:center;
    font-size:clamp(13px,4vw,16px);
    line-height:1.28;
  }
  .visual-column{top:307px;bottom:64px}
  .price-orb{width:118px;top:52%}
  .launch-label{font-size:6.8px;margin-bottom:6px}
  .price-orb strong{font-size:27px}
  .price-orb small{font-size:7.7px;margin-top:6px}
  .rubric-label{
    min-height:20px;
    bottom:-4px;
    padding:4px 7px;
    font-size:7.8px;
    box-shadow:0 5px 12px rgba(18,79,109,.1);
  }
  .hero-actions{bottom:9px}
  .action{height:41px;font-size:10.5px}
  .demo-modal{width:94vw}
  .demo-video{border-radius:14px}
  .demo-close{top:-14px;right:-8px;width:38px;height:38px;font-size:25px}
  .demo-cta{min-width:210px;height:48px;font-size:15px}
}

@media (max-width:360px){
  .hero-title{font-size:42px}
  .hero-subtitle{font-size:12.5px;max-width:305px;min-height:4.4em}
  .visual-column{top:282px;bottom:58px}
  .price-orb{width:108px}
  .price-orb strong{font-size:25px}
  .rubric-label{font-size:7px;padding:3px 6px}
}

/* Ajuste final de separación en desktop para que copy, etiquetas y CTA nunca se pisen. */
@media (min-width:761px){
  .hero-subtitle{width:min(510px,36vw)}
  .slot-3{left:41.5%}
  .slot-5{bottom:18%}
  .slot-6{bottom:15%}
}
.demo-modal::backdrop{background:transparent!important;backdrop-filter:none!important}


/* ===== Pulido final: espaciado, nubes, cargas y demo ===== */

/* Más aire entre los tres renglones del título. */
.hero-title{
  line-height:.98;
  row-gap:.055em;
}

/* Nubes adicionales usando los mismos recortes de alta calidad. */
.cloud-mid-left{
  left:-4vw;
  top:51vh;
  width:min(14vw,205px);
  opacity:.48;
  transform:rotate(2deg);
}
.cloud-mid-right{
  right:-3vw;
  top:29vh;
  width:min(12vw,176px);
  opacity:.46;
  transform:rotate(-3deg);
}
.cloud-bottom-center{
  left:42%;
  bottom:-8vh;
  width:min(27vw,390px);
  opacity:.42;
  transform:translateX(-50%) scale(.82);
}
.soft-cloud-c{left:8%;top:38%;transform:scale(.6);opacity:.24;animation-delay:-4s}
.soft-cloud-d{right:6%;top:61%;transform:scale(.7);opacity:.28;animation-delay:-11s}

/* Carga progresiva: cada bloque entra con fundido y desplazamiento suave. */
@keyframes pageReveal{
  from{opacity:0}
  to{opacity:1}
}
@keyframes fadeRise{
  from{opacity:0;transform:translateY(18px);filter:blur(7px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes fadeDrop{
  from{opacity:0;transform:translateY(-14px);filter:blur(6px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes cloudReveal{
  from{opacity:0;filter:blur(10px);transform:scale(.92)}
  to{filter:blur(0)}
}
@keyframes orbReveal{
  from{opacity:0;transform:translate(-50%,-50%) scale(.82);filter:blur(8px)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
}
@keyframes actionsReveal{
  from{opacity:0;transform:translateX(-50%) translateY(16px);filter:blur(6px)}
  to{opacity:1;transform:translateX(-50%) translateY(0);filter:blur(0)}
}
body{animation:pageReveal .48s ease both}
.brand{animation:fadeDrop .8s cubic-bezier(.2,.78,.2,1) .08s both}
.top-cta{animation:fadeDrop .8s cubic-bezier(.2,.78,.2,1) .18s both}
.hero-title>span:nth-child(1){animation:fadeRise .82s cubic-bezier(.2,.78,.2,1) .24s both}
.hero-title>span:nth-child(2){animation:fadeRise .82s cubic-bezier(.2,.78,.2,1) .35s both}
.hero-title>span:nth-child(3){animation:fadeRise .82s cubic-bezier(.2,.78,.2,1) .46s both}
.hero-subtitle{animation:fadeRise .9s cubic-bezier(.2,.78,.2,1) .58s both}
.price-orb{animation:orbReveal .95s cubic-bezier(.2,.78,.2,1) .68s both}
.hero-actions{animation:actionsReveal .9s cubic-bezier(.2,.78,.2,1) .82s both}
.cloud-img{animation:cloudReveal 1.35s ease both}
.cloud-top-left{animation-delay:.05s}
.cloud-top-right{animation-delay:.14s}
.cloud-mid-left{animation-delay:.23s}
.cloud-mid-right{animation-delay:.31s}
.cloud-bottom-left{animation-delay:.16s}
.cloud-bottom-center{animation-delay:.38s}
.cloud-bottom-right{animation-delay:.27s}
.soft-cloud{
  animation:softCloudDrift 18s ease-in-out infinite alternate, pageReveal 1.4s ease both;
}
.sky-glow{animation:pageReveal 1.2s ease .05s both}

/* El reflejo del logo pasa exactamente cada cinco segundos. */
.brand::after{animation:logoReflection 5s ease-in-out infinite}

/* Demo: fondo oscuro con desenfoque, manteniendo el video limpio y centrado. */
.demo-modal::backdrop{
  background:rgba(1,10,34,.72)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
.demo-modal[open]{animation:demoDialogReveal .34s ease both}
.demo-modal[open] .demo-stage{animation:demoStageReveal .42s cubic-bezier(.2,.78,.2,1) both}
@keyframes demoDialogReveal{from{opacity:0}to{opacity:1}}
@keyframes demoStageReveal{
  from{opacity:0;transform:translateY(18px) scale(.96);filter:blur(5px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}

/* Transiciones finas para todos los controles interactivos. */
a,button,.orbit-slot,.rubric-label,.demo-video,.demo-close,.demo-cta{
  transition-property:transform,opacity,filter,box-shadow,background-color,border-color,color;
  transition-duration:.28s;
  transition-timing-function:ease;
}
.demo-close:hover{transform:scale(1.08) rotate(3deg)}
.demo-video{transition-duration:.42s}

@media (max-width:760px){
  .hero-title{
    line-height:.99;
    row-gap:.075em;
  }
  .visual-column{top:318px}

  /* En mobile también hay más nubes, pero sin tapar el contenido. */
  .cloud-mid-left{display:block;left:-24px;top:48%;width:112px;opacity:.38}
  .cloud-mid-right{display:block;right:-24px;top:35%;width:102px;opacity:.34}
  .cloud-bottom-center{display:block;left:53%;bottom:-28px;width:205px;opacity:.34}
  .soft-cloud{display:block;width:118px;height:38px;filter:blur(10px);opacity:.15}
  .soft-cloud-a{left:5%;top:31%;transform:scale(.5)}
  .soft-cloud-b{right:8%;bottom:22%;transform:scale(.48)}
  .soft-cloud-c{left:28%;top:52%;transform:scale(.42)}
  .soft-cloud-d{right:18%;top:67%;transform:scale(.45)}

  /* En mobile el CTA no usa translateX, por eso su animación tiene versión propia. */
  .hero-actions{animation-name:actionsRevealMobile}
  @keyframes actionsRevealMobile{
    from{opacity:0;transform:translateY(14px);filter:blur(6px)}
    to{opacity:1;transform:translateY(0);filter:blur(0)}
  }
}

@media (max-width:360px){
  .hero-title{line-height:1;row-gap:.07em}
  .visual-column{top:296px}
}

/* ===== Ajustes finales: composición desktop, demo fundido y modo divino ===== */

/* En PC elevamos el bloque de copy para que el subtítulo nunca compita con los CTA. */
@media (min-width:761px){
  .copy-column{
    top:20.8vh;
  }
  .hero-subtitle{
    margin-top:30px;
    min-height:2.8em;
  }

  /* El círculo de precio queda más elegante y liviano sólo en desktop. */
  .price-orb{
    width:clamp(194px,16.4vw,244px);
  }
  .launch-label{
    font-size:clamp(9px,.77vw,12px);
    margin-bottom:9px;
  }
  .price-orb strong{
    font-size:clamp(38px,3.25vw,50px);
  }
  .price-orb small{
    margin-top:12px;
    font-size:clamp(12px,1vw,15px);
  }
}

/* El modal entra y sale como una interfaz nativa, incluido el backdrop. */
.demo-modal{
  opacity:0;
  transition:opacity .36s ease, filter .36s ease;
}
.demo-modal[open]{
  opacity:1;
  animation:demoDialogReveal .36s ease both;
}
.demo-modal[open]::backdrop{
  animation:demoBackdropIn .38s ease both;
}
.demo-modal.closing{
  opacity:0;
  filter:blur(5px);
  animation:demoDialogHide .34s ease both!important;
}
.demo-modal.closing .demo-stage{
  animation:demoStageHide .34s cubic-bezier(.55,0,.8,.2) both!important;
}
.demo-modal.closing::backdrop{
  animation:demoBackdropOut .34s ease both!important;
}
@keyframes demoDialogHide{
  from{opacity:1;filter:blur(0)}
  to{opacity:0;filter:blur(5px)}
}
@keyframes demoStageHide{
  from{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
  to{opacity:0;transform:translateY(12px) scale(.965);filter:blur(5px)}
}
@keyframes demoBackdropIn{
  from{background:rgba(1,10,34,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}
  to{background:rgba(1,10,34,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
}
@keyframes demoBackdropOut{
  from{background:rgba(1,10,34,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  to{background:rgba(1,10,34,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}
}

/* Modo divino: toda la landing se transforma gradualmente en una escena dorada. */
.landing{
  transition:filter 1.45s cubic-bezier(.2,.75,.2,1), background 1.45s ease;
}
.landing::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:60;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 16% 22%, rgba(255,247,190,.78) 0 2%, transparent 15%),
    radial-gradient(circle at 76% 24%, rgba(255,213,75,.54), transparent 28%),
    radial-gradient(circle at 53% 69%, rgba(255,238,156,.38), transparent 34%),
    linear-gradient(118deg, rgba(255,228,92,.15), rgba(255,179,0,.32) 48%, rgba(255,240,166,.18));
  mix-blend-mode:color-dodge;
  transition:opacity 1.45s cubic-bezier(.2,.75,.2,1);
}
body.divine-mode .landing{
  filter:sepia(.82) saturate(2.35) hue-rotate(347deg) brightness(1.08) contrast(1.04);
  background:
    radial-gradient(ellipse at 4% 36%, rgba(255,255,239,.98) 0%, rgba(255,245,190,.9) 26%, transparent 57%),
    radial-gradient(ellipse at 84% 44%, rgba(255,198,41,.76) 0%, rgba(255,218,87,.58) 38%, transparent 72%),
    linear-gradient(110deg,#fff9dd 0%,#ffe898 42%,#ffc93d 72%,#f2a900 100%);
}
body.divine-mode .landing::after{opacity:.94}

/* Capa de chispas: aparece junto al dorado y se apaga suavemente a los 10 s. */
.divine-sparkles{
  position:fixed;
  inset:0;
  z-index:70;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transition:opacity 1.1s ease, visibility 0s linear 1.1s;
}
body.divine-mode .divine-sparkles{
  opacity:1;
  visibility:visible;
  transition:opacity 1.05s ease, visibility 0s linear 0s;
}
.divine-sparkle{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--size);
  height:var(--size);
  opacity:0;
  transform:rotate(45deg) scale(.25);
  filter:drop-shadow(0 0 7px rgba(255,226,99,.95));
  animation:divineTwinkle var(--duration) ease-in-out var(--delay) infinite;
}
.divine-sparkle::before,
.divine-sparkle::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,255,236,.98),transparent);
}
.divine-sparkle::before{width:100%;height:17%}
.divine-sparkle::after{width:17%;height:100%}
@keyframes divineTwinkle{
  0%,100%{opacity:0;transform:rotate(45deg) scale(.25)}
  35%{opacity:.35}
  52%{opacity:1;transform:rotate(45deg) scale(1)}
  68%{opacity:.28}
}

/* La transformación dorada nunca altera el propio video demo. */
.demo-modal,.demo-modal *{filter:none}

@media (max-width:760px){
  /* Conservamos intacto el círculo que ya funcionaba bien en mobile. */
  .price-orb{width:118px}
  .launch-label{font-size:6.8px;margin-bottom:6px}
  .price-orb strong{font-size:27px}
  .price-orb small{font-size:7.7px;margin-top:6px}
}
@media (max-width:360px){
  .price-orb{width:108px}
  .price-orb strong{font-size:25px}
}

/* Backdrop realmente fundido al abrir/cerrar, manteniendo el blur oscuro. */
.demo-modal::backdrop{
  background:rgba(1,10,34,.72)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  transition:background .34s ease,backdrop-filter .34s ease,-webkit-backdrop-filter .34s ease;
}
.demo-modal.closing::backdrop{
  background:rgba(1,10,34,0)!important;
  backdrop-filter:blur(0)!important;
  -webkit-backdrop-filter:blur(0)!important;
}
body.divine-mode .demo-modal::backdrop{
  background:rgba(38,24,0,.64)!important;
  backdrop-filter:blur(12px) sepia(.38) saturate(1.35)!important;
  -webkit-backdrop-filter:blur(12px) sepia(.38) saturate(1.35)!important;
}
@starting-style{
  .demo-modal[open]{opacity:0;filter:blur(5px)}
  .demo-modal[open]::backdrop{
    background:rgba(1,10,34,0)!important;
    backdrop-filter:blur(0)!important;
    -webkit-backdrop-filter:blur(0)!important;
  }
}

/* ===== Último ajuste solicitado: mobile CTA + modo divino legible ===== */
@media (max-width:760px){
  /* Los CTA quedan inmediatamente debajo de las tarjetas, no pegados al borde inferior. */
  .visual-column{bottom:84px}
  .hero-actions{bottom:22px}
}
@media (max-width:360px){
  .visual-column{bottom:76px}
  .hero-actions{bottom:17px}
}

/* El modo divino conserva contraste real: el oro vive en fondo, luces, botones y acentos,
   pero nunca lava el texto ni las etiquetas. */
body.divine-mode .landing{
  filter:none!important;
  background:
    radial-gradient(ellipse at 4% 34%, rgba(255,255,247,.99) 0%, rgba(255,247,203,.96) 24%, transparent 55%),
    radial-gradient(ellipse at 87% 43%, rgba(255,205,62,.86) 0%, rgba(255,224,116,.72) 38%, transparent 72%),
    radial-gradient(circle at 53% 72%, rgba(255,244,190,.78), transparent 38%),
    linear-gradient(112deg,#fffaf0 0%,#ffe8a0 42%,#ffd05c 72%,#eaa000 100%)!important;
}
body.divine-mode .landing::after{
  opacity:.68!important;
  mix-blend-mode:screen!important;
  background:
    radial-gradient(circle at 14% 20%, rgba(255,255,255,.76), transparent 16%),
    radial-gradient(circle at 78% 22%, rgba(255,235,130,.52), transparent 27%),
    radial-gradient(circle at 52% 68%, rgba(255,250,219,.42), transparent 31%),
    linear-gradient(118deg, rgba(255,239,151,.10), rgba(238,169,0,.22) 50%, rgba(255,250,218,.12))!important;
}
body.divine-mode .hero-title,
body.divine-mode .hero-subtitle,
body.divine-mode .launch-label,
body.divine-mode .price-orb strong,
body.divine-mode .price-orb small{
  color:#18224d!important;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
body.divine-mode .divina-wrap em{
  background:linear-gradient(100deg,#8a5200 0%,#d79500 42%,#ffcc42 70%,#9f6100 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.26));
}
body.divine-mode .hero-subtitle strong{
  color:#7a4300!important;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
body.divine-mode .typing-caret{background:#8a5200!important}
body.divine-mode .price-orb{
  background:radial-gradient(circle at 34% 26%,#fffefa 0%,#fff7d7 54%,#f9dc81 100%)!important;
  border-color:rgba(255,255,255,.95)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.42),0 20px 58px rgba(129,79,0,.18),inset 0 -18px 40px rgba(232,173,31,.12)!important;
}
body.divine-mode .rubric-label{
  background:rgba(255,251,229,.96)!important;
  color:#3a2a0a!important;
  border-color:rgba(255,255,255,.98)!important;
  box-shadow:0 7px 18px rgba(109,70,0,.16)!important;
  text-shadow:none!important;
}
body.divine-mode .orbit-slot img{
  filter:drop-shadow(0 17px 16px rgba(121,75,0,.20)) sepia(.12) saturate(1.08)!important;
}
body.divine-mode .top-cta,
body.divine-mode .action-primary,
body.divine-mode .demo-cta{
  background:linear-gradient(102deg,#9c5900 0%,#e3a309 46%,#ffd95a 78%,#fff0a0 100%)!important;
  color:#241700!important;
  box-shadow:0 16px 34px rgba(129,78,0,.28)!important;
}
body.divine-mode .action-secondary{
  background:rgba(255,252,235,.98)!important;
  color:#332100!important;
  border-color:#5b3900!important;
}
body.divine-mode .brand img{
  filter:drop-shadow(0 8px 14px rgba(94,57,0,.10)) sepia(.18) saturate(1.08)!important;
}
body.divine-mode .cloud-img{filter:sepia(.18) saturate(1.12) brightness(1.02)!important}
body.divine-mode .divine-sparkle{z-index:71}

/* Mientras el demo está abierto el backdrop sigue oscuro, pero no ennegrece tanto el contenido dorado. */
body.divine-mode .demo-modal::backdrop{
  background:rgba(35,22,0,.55)!important;
  backdrop-filter:blur(11px) sepia(.25) saturate(1.2)!important;
  -webkit-backdrop-filter:blur(11px) sepia(.25) saturate(1.2)!important;
}

/* ===== Ajuste final solicitado: divino limpio + demo de 20 s ===== */

/* En modo divino, los recortes de nubes originales desaparecen suavemente.
   Así evitamos que sus cajas de imagen se hagan visibles al cambiar a dorado. */
.cloud-img{
  transition:opacity 1.15s ease, filter 1.15s ease;
}
body.divine-mode .cloud-img{
  opacity:0!important;
  filter:none!important;
}

/* Nubes doradas puramente CSS: no tienen caja rectangular y conservan el look celestial. */
.cloud-layer::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(ellipse 180px 72px at 3% 95%, rgba(255,255,255,.98) 0 42%, transparent 70%),
    radial-gradient(ellipse 250px 90px at 14% 101%, rgba(255,255,255,.96) 0 44%, transparent 72%),
    radial-gradient(ellipse 170px 62px at 31% 101%, rgba(255,252,232,.82) 0 44%, transparent 72%),
    radial-gradient(ellipse 210px 74px at 67% 103%, rgba(255,252,230,.76) 0 43%, transparent 72%),
    radial-gradient(ellipse 235px 82px at 92% 99%, rgba(255,255,255,.96) 0 44%, transparent 72%),
    radial-gradient(ellipse 120px 48px at 100% 19%, rgba(255,255,255,.64) 0 42%, transparent 72%),
    radial-gradient(ellipse 110px 42px at 0% 28%, rgba(255,255,255,.68) 0 42%, transparent 72%);
  filter:blur(9px);
  transition:opacity 1.25s ease;
}
body.divine-mode .cloud-layer::before{opacity:1}

/* La luz dorada vive detrás del contenido, no encima del texto ni de las etiquetas. */
body.divine-mode .landing::after{
  z-index:1!important;
  opacity:.78!important;
  mix-blend-mode:screen!important;
}
body.divine-mode .topbar{z-index:30}
body.divine-mode .copy-column{z-index:22}
body.divine-mode .visual-column{z-index:18}
body.divine-mode .hero-actions{z-index:32}

/* Contraste reforzado durante el efecto divino. */
body.divine-mode .hero-title,
body.divine-mode .hero-subtitle{
  color:#111b47!important;
  text-shadow:0 1px 0 rgba(255,255,255,.7),0 3px 18px rgba(111,72,0,.08)!important;
}
body.divine-mode .hero-subtitle strong{
  color:#7d4600!important;
  text-shadow:0 1px 0 rgba(255,255,255,.72)!important;
}
body.divine-mode .rubric-label{
  color:#332000!important;
  background:rgba(255,253,239,.97)!important;
  border:1px solid rgba(255,255,255,.98)!important;
  box-shadow:0 8px 22px rgba(89,56,0,.16)!important;
  backdrop-filter:blur(7px)!important;
}
body.divine-mode .price-orb{
  color:#15204b!important;
  background:radial-gradient(circle at 35% 26%,#fffef8 0%,#fff8dc 58%,#f8df94 100%)!important;
}
body.divine-mode .launch-label,
body.divine-mode .price-orb strong,
body.divine-mode .price-orb small{color:#17234e!important}

/* Chispas más finas: luminosas, pero nunca tapan la interfaz. */
body.divine-mode .divine-sparkles{z-index:16!important}
body.divine-mode .divine-sparkle{
  opacity:.72;
  filter:drop-shadow(0 0 8px rgba(255,231,112,.85));
}

/* El video es la única pieza visual del modal: sin controles nativos ni marco extra. */
.demo-video{
  background:#000;
}

@media (max-width:760px){
  /* El efecto dorado mobile mantiene el mismo fondo continuo, sin recortes rectangulares. */
  body.divine-mode .landing{
    background:
      radial-gradient(ellipse at 4% 18%, rgba(255,255,250,.98) 0%, rgba(255,246,202,.92) 31%, transparent 57%),
      radial-gradient(ellipse at 90% 49%, rgba(255,205,61,.82) 0%, rgba(255,227,124,.64) 43%, transparent 73%),
      linear-gradient(120deg,#fffaf0 0%,#ffeaa7 49%,#f7bb26 100%)!important;
  }
  .cloud-layer::before{
    background:
      radial-gradient(ellipse 108px 45px at 3% 96%, rgba(255,255,255,.98) 0 42%, transparent 72%),
      radial-gradient(ellipse 140px 52px at 29% 102%, rgba(255,255,255,.92) 0 43%, transparent 72%),
      radial-gradient(ellipse 138px 52px at 73% 103%, rgba(255,252,232,.86) 0 43%, transparent 72%),
      radial-gradient(ellipse 112px 44px at 99% 96%, rgba(255,255,255,.95) 0 43%, transparent 72%),
      radial-gradient(ellipse 76px 30px at 101% 24%, rgba(255,255,255,.55) 0 40%, transparent 72%);
    filter:blur(6px);
  }
}

/* ===== Ajuste final: transformación divina más lenta y cinematográfica ===== */
/* La transición se apoya en una capa dorada progresiva para evitar saltos entre gradientes. */
.landing{
  transition:filter 3.8s cubic-bezier(.22,.72,.18,1), background-color 3.8s ease!important;
}
.landing::after{
  z-index:1!important;
  opacity:0!important;
  mix-blend-mode:normal!important;
  background:
    radial-gradient(circle at 16% 22%, rgba(255,255,224,.94) 0%, rgba(255,246,181,.72) 15%, transparent 35%),
    radial-gradient(circle at 78% 23%, rgba(255,205,54,.88) 0%, rgba(255,218,92,.68) 29%, transparent 56%),
    radial-gradient(circle at 54% 70%, rgba(255,238,155,.72) 0%, transparent 40%),
    linear-gradient(116deg, rgba(255,248,211,.72) 0%, rgba(255,219,96,.76) 44%, rgba(236,163,0,.72) 78%, rgba(255,230,132,.64) 100%)!important;
  transition:opacity 3.8s cubic-bezier(.22,.72,.18,1)!important;
}
body.divine-mode .landing::after{opacity:.94!important}

/* Mantener el cielo base estable hace que el cambio a dorado sea un verdadero fundido, no un salto. */
body.divine-mode .landing{
  filter:none!important;
  background:
    radial-gradient(ellipse at 5% 38%, rgba(255,255,255,.98) 0%, rgba(248,252,255,.94) 24%, rgba(232,248,252,.58) 43%, transparent 61%),
    radial-gradient(ellipse at 50% 18%, rgba(255,255,255,.52) 0%, rgba(224,248,251,.43) 40%, transparent 70%),
    radial-gradient(ellipse at 84% 44%, rgba(77,225,217,.58) 0%, rgba(106,229,222,.43) 35%, rgba(177,241,239,.28) 56%, transparent 73%),
    linear-gradient(110deg,#f5fbff 0%,#e8f8fd 38%,#d6f6f4 68%,#a9ede8 100%)!important;
}

/* Todas las piezas visibles acompañan lentamente la transformación. */
.cloud-img,
.cloud-layer::before,
.sky-glow,
.hero-title,
.hero-title em,
.hero-subtitle,
.hero-subtitle strong,
.typing-caret,
.price-orb,
.launch-label,
.price-orb strong,
.price-orb small,
.rubric-label,
.orbit-slot img,
.top-cta,
.action-primary,
.action-secondary,
.demo-cta,
.brand img{
  transition-duration:3.8s!important;
  transition-timing-function:cubic-bezier(.22,.72,.18,1)!important;
}
.cloud-layer::before{transition:opacity 3.8s cubic-bezier(.22,.72,.18,1)!important}
.divine-sparkles{
  transition:opacity 2.8s ease,visibility 0s linear 2.8s!important;
}
body.divine-mode .divine-sparkles{
  transition:opacity 2.8s ease,visibility 0s linear 0s!important;
}

@media (max-width:760px){
  body.divine-mode .landing{
    background:
      radial-gradient(ellipse at 0% 18%, rgba(255,255,255,.98) 0%,rgba(247,252,255,.9) 30%,transparent 54%),
      radial-gradient(ellipse at 88% 52%, rgba(80,228,221,.56) 0%,rgba(124,233,229,.4) 42%,transparent 72%),
      linear-gradient(120deg,#f4fbff 0%,#e8f9fc 48%,#b4efec 100%)!important;
  }
}

/* Mantener los hover rápidos mientras la transformación cromática sigue siendo lenta. */
.top-cta,
.action-primary,
.demo-cta{
  transition:
    transform .24s ease,
    box-shadow .24s ease,
    background 3.8s cubic-bezier(.22,.72,.18,1),
    color 3.8s cubic-bezier(.22,.72,.18,1),
    filter 3.8s cubic-bezier(.22,.72,.18,1)!important;
}
.action-secondary{
  transition:
    transform .24s ease,
    box-shadow .24s ease,
    background 3.8s cubic-bezier(.22,.72,.18,1),
    color 3.8s cubic-bezier(.22,.72,.18,1),
    border-color 3.8s cubic-bezier(.22,.72,.18,1)!important;
}
.rubric-label,
.price-orb,
.hero-title,
.hero-title em,
.hero-subtitle,
.hero-subtitle strong,
.launch-label,
.price-orb strong,
.price-orb small,
.brand img,
.orbit-slot img{
  transition-property:color,background,background-color,border-color,box-shadow,filter,text-shadow,opacity!important;
  transition-duration:3.8s!important;
  transition-timing-function:cubic-bezier(.22,.72,.18,1)!important;
}

/* ===== Reparación definitiva del efecto divino =====
   El dorado se construye como una capa continua y sin bordes por encima del cielo,
   pero por debajo de todo el contenido. Conserva la transformación lenta. */
.landing::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(ellipse at 9% 32%,rgba(255,255,241,.94) 0%,rgba(255,244,190,.80) 27%,transparent 55%),
    radial-gradient(ellipse at 82% 33%,rgba(255,190,22,.90) 0%,rgba(255,212,62,.76) 35%,transparent 67%),
    radial-gradient(circle at 54% 73%,rgba(255,237,137,.72) 0%,rgba(255,208,45,.44) 36%,transparent 62%),
    linear-gradient(112deg,rgba(255,250,220,.95) 0%,rgba(255,226,116,.94) 43%,rgba(247,183,13,.92) 76%,rgba(255,215,75,.90) 100%);
  transition:opacity 3.8s cubic-bezier(.22,.72,.18,1)!important;
}
body.divine-mode .landing::before{opacity:.92!important}

/* La capa superior agrega luz, no el color base. */
.landing::after{
  background:
    radial-gradient(circle at 16% 22%,rgba(255,255,255,.62),transparent 18%),
    radial-gradient(circle at 78% 23%,rgba(255,240,157,.46),transparent 29%),
    radial-gradient(circle at 54% 70%,rgba(255,252,218,.34),transparent 37%)!important;
  mix-blend-mode:screen!important;
  transition:opacity 3.8s cubic-bezier(.22,.72,.18,1)!important;
}
body.divine-mode .landing::after{opacity:.72!important}

/* El cielo original no salta de gradiente: el oro entra y sale únicamente por opacidad. */
body.divine-mode .landing{
  filter:none!important;
  background:
    radial-gradient(ellipse at 5% 38%,rgba(255,255,255,.98) 0%,rgba(248,252,255,.94) 24%,rgba(232,248,252,.58) 43%,transparent 61%),
    radial-gradient(ellipse at 50% 18%,rgba(255,255,255,.52) 0%,rgba(224,248,251,.43) 40%,transparent 70%),
    radial-gradient(ellipse at 84% 44%,rgba(77,225,217,.58) 0%,rgba(106,229,222,.43) 35%,rgba(177,241,239,.28) 56%,transparent 73%),
    linear-gradient(110deg,#f5fbff 0%,#e8f8fd 38%,#d6f6f4 68%,#a9ede8 100%)!important;
}

/* Todo el contenido queda siempre por encima del baño dorado. */
.topbar{z-index:30!important}
.copy-column{z-index:22!important}
.visual-column{z-index:18!important}
.hero-actions{z-index:32!important}
.cloud-layer{z-index:-1!important}
.sky-glow{z-index:-5!important}

/* Alto contraste estable durante todo el efecto divino. */
body.divine-mode .hero-title{color:#101946!important;text-shadow:0 1px 0 rgba(255,255,255,.76),0 4px 20px rgba(91,56,0,.08)!important}
body.divine-mode .hero-subtitle{color:#101946!important;text-shadow:0 1px 0 rgba(255,255,255,.76)!important}
body.divine-mode .hero-subtitle strong{color:#8a4d00!important;text-shadow:0 1px 0 rgba(255,255,255,.82)!important}
body.divine-mode .rubric-label{
  color:#322000!important;
  background:rgba(255,253,239,.98)!important;
  border-color:rgba(255,255,255,.98)!important;
  box-shadow:0 8px 22px rgba(87,54,0,.18)!important;
}
body.divine-mode .price-orb{
  background:radial-gradient(circle at 36% 25%,#fffef8 0%,#fff8d9 58%,#f5d77b 100%)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.55),0 22px 60px rgba(120,73,0,.20),inset 0 -18px 38px rgba(233,173,26,.14)!important;
}
body.divine-mode .launch-label,
body.divine-mode .price-orb strong,
body.divine-mode .price-orb small{color:#142052!important}
body.divine-mode .divina-wrap em{
  background:linear-gradient(100deg,#9a5b00 0%,#d99600 42%,#ffd75d 69%,#9b5b00 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}

/* El modal conserva su blur oscuro, con un matiz cálido cuando el modo divino está activo. */
body.divine-mode .demo-modal::backdrop{
  background:rgba(36,23,0,.60)!important;
  backdrop-filter:blur(12px) sepia(.28) saturate(1.22)!important;
  -webkit-backdrop-filter:blur(12px) sepia(.28) saturate(1.22)!important;
}

@media (max-width:760px){
  .landing::before{
    background:
      radial-gradient(ellipse at 3% 20%,rgba(255,255,244,.94) 0%,rgba(255,245,197,.80) 32%,transparent 57%),
      radial-gradient(ellipse at 90% 46%,rgba(255,192,20,.90) 0%,rgba(255,216,75,.72) 43%,transparent 73%),
      linear-gradient(120deg,rgba(255,250,223,.95) 0%,rgba(255,229,130,.94) 49%,rgba(241,172,5,.92) 100%);
  }
}

/* ===== Ajuste final: mejor legibilidad de “divina” durante el modo dorado ===== */
body.divine-mode .divina-wrap em{
  background:linear-gradient(98deg,#8d5200 0%,#c98800 24%,#ffe18a 52%,#d89a0f 72%,#8d5200 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
  -webkit-text-stroke:1px rgba(118,73,0,.28);
  text-shadow:
    0 1px 0 rgba(255,255,255,.82),
    0 2px 10px rgba(255,220,120,.20),
    0 0 18px rgba(164,110,0,.10)!important;
  filter:drop-shadow(0 1px 2px rgba(255,255,255,.18));
}

/* ===== Demo interactiva Reservhalo · tienda #0 ===== */
.demo-store-modal{width:min(1180px,96vw);max-height:96vh}
.demo-store-stage{gap:0;border-radius:24px;overflow:visible}
.demo-browser-bar{
  width:100%;height:42px;display:flex;align-items:center;gap:7px;padding:0 16px;
  border-radius:22px 22px 0 0;background:rgba(245,250,255,.96);border:1px solid rgba(255,255,255,.78);
  box-shadow:0 -2px 0 rgba(255,255,255,.6) inset;color:#526d93;font-size:11px;font-weight:800;
}
.demo-browser-bar span{width:9px;height:9px;border-radius:50%;background:#d8e2ec}
.demo-browser-bar span:first-child{background:#ff8b8b}.demo-browser-bar span:nth-child(2){background:#ffd55e}.demo-browser-bar span:nth-child(3){background:#72d8a3}
.demo-browser-bar b{margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-store-frame{
  display:block;width:100%;height:min(72vh,760px);min-height:520px;border:0;background:#fff;
  box-shadow:0 28px 80px rgba(5,32,83,.34);border-radius:0 0 22px 22px;
}
.demo-store-footer{display:flex;align-items:center;justify-content:center;gap:18px;width:100%;padding-top:14px}
.demo-store-footer>span{color:#fff;font-size:13px;font-weight:750;text-shadow:0 2px 8px rgba(0,0,0,.28)}
.demo-store-footer .demo-cta{height:48px;min-width:210px;font-size:14px;padding:0 22px}
.demo-store-modal .demo-close{top:-17px;right:-17px}
@media(max-width:760px){
  .demo-store-modal{width:96vw;max-height:96vh}
  .demo-browser-bar{height:34px;border-radius:16px 16px 0 0;padding:0 10px;font-size:9px}
  .demo-browser-bar span{width:7px;height:7px}
  .demo-store-frame{height:78vh;min-height:520px;border-radius:0 0 16px 16px}
  .demo-store-footer{padding-top:9px}.demo-store-footer>span{display:none}
  .demo-store-footer .demo-cta{height:44px;min-width:190px;font-size:13px}
  .demo-store-modal .demo-close{top:-12px;right:-8px;width:38px;height:38px;font-size:26px}
}

/* ===== v3.4 · Demo siempre en tamaño celular ===== */
.demo-store-modal{width:min(430px,94vw)!important;max-width:430px!important;max-height:96vh!important}
.demo-store-stage{width:100%!important;align-items:center!important}
.demo-browser-bar{width:100%!important}
.demo-store-frame{
  width:100%!important;
  height:min(72vh,760px)!important;
  min-height:560px!important;
  max-height:760px!important;
  border-radius:0 0 22px 22px!important;
}
.demo-store-footer{width:100%!important;gap:8px!important}
.demo-store-footer>span{display:none!important}
@media(max-width:520px){
  .demo-store-modal{width:94vw!important}
  .demo-store-frame{height:min(76vh,720px)!important;min-height:510px!important}
}

/* ===== v3.5 · Demo móvil limpio, sin barra de navegador ===== */
.demo-browser-bar{display:none!important}
.demo-store-frame{
  border-radius:24px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:0 28px 80px rgba(5,32,83,.34)!important;
}
@media(max-width:520px){.demo-store-frame{border-radius:20px!important}}

/* ===== v3.6 · versión visible + demo con proporción real de teléfono ===== */
.brand-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  min-width:0;
}
.landing-version{
  display:block;
  margin-top:-2px;
  color:#5a7094;
  font-size:clamp(9px,.68vw,11px);
  font-weight:800;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
  opacity:.82;
  white-space:nowrap;
}
body.divine-mode .landing-version{color:#785300!important;text-shadow:0 1px 5px rgba(255,255,255,.65)}

.demo-store-modal{
  box-sizing:border-box!important;
  width:min(390px,calc(100vw - 40px))!important;
  max-width:390px!important;
  min-width:0!important;
  max-height:calc(100dvh - 24px)!important;
  margin:auto!important;
  padding:0!important;
}
.demo-store-stage{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  gap:10px!important;
}
.demo-store-frame{
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:min(690px,calc(100dvh - 120px))!important;
  min-height:0!important;
  max-height:690px!important;
  aspect-ratio:9/16!important;
  border-radius:26px!important;
  border:1px solid rgba(255,255,255,.82)!important;
  overflow:hidden!important;
  background:#fff!important;
}
.demo-store-footer{
  box-sizing:border-box!important;
  width:100%!important;
  padding-top:4px!important;
}
.demo-store-footer .demo-cta{
  width:min(250px,78%)!important;
  min-width:0!important;
}
.demo-store-modal .demo-close{
  top:-9px!important;
  right:-9px!important;
}
@media(max-width:520px){
  .demo-store-modal{
    width:min(370px,calc(100vw - 24px))!important;
    max-width:370px!important;
  }
  .demo-store-frame{
    height:min(670px,calc(100dvh - 112px))!important;
    border-radius:24px!important;
  }
  .demo-store-modal .demo-close{
    top:-7px!important;
    right:-5px!important;
  }
}

/* v3.6.1 · dimensiones finales del teléfono demo */
.demo-store-modal{
  width:min(360px,calc(100vw - 36px))!important;
  max-width:360px!important;
  max-height:calc(100dvh - 28px)!important;
}
.demo-store-frame{
  height:min(640px,calc(100dvh - 170px))!important;
  max-height:640px!important;
  min-height:0!important;
}
@media(max-width:430px){
  .demo-store-modal{
    width:min(350px,calc(100vw - 22px))!important;
    max-width:350px!important;
  }
  .demo-store-frame{
    height:min(622px,calc(100dvh - 150px))!important;
  }
}