:root{
  --bg:#06070a;
  --bg-soft:#0a0c11;
  --panel:#10131a;
  --panel-2:#151923;
  --text:#f7f7f4;
  --muted:#9a9fab;
  --line:rgba(255,255,255,.085);

  --orange:#ff7b21;
  --amber:#ffad27;
  --yellow:#ffd54f;
  --lime:#b7d957;
  --green:#3bd07e;
  --wa:#25d366;

  --radius:30px;
  --shadow:0 35px 100px rgba(0,0,0,.42);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"DM Sans",sans-serif;
  background:
    radial-gradient(circle at 10% 0%,rgba(255,113,28,.12),transparent 28%),
    radial-gradient(circle at 88% 18%,rgba(255,164,35,.06),transparent 28%),
    var(--bg);
  color:var(--text);
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background:
    radial-gradient(circle at 0% 12%,rgba(105,48,18,.22),transparent 25%),
    radial-gradient(circle at 100% 75%,rgba(25,55,43,.10),transparent 30%);
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
::selection{background:var(--orange);color:#111}

.noise{
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.9'/%3E%3C/svg%3E");
}

#cursor{
  position:fixed;
  width:12px;height:12px;border-radius:50%;
  background:var(--orange);
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:10000;
  mix-blend-mode:difference;
}

/* HERO */
.hero{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  align-items:center;
  padding:118px 7vw 55px;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 88% 20%,rgba(255,151,38,.085),transparent 30%),
    linear-gradient(90deg,rgba(6,7,10,.90) 0%,rgba(6,7,10,.74) 40%,rgba(6,7,10,.18) 72%,rgba(6,7,10,.04) 100%);
}

#bottleScene{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

/* Foto real del envase, con la misma puesta en escena (glow + sombra)
   que la botella abstracta que reemplaza, para no romper el clima del hero. */
.hero-bottle{
  position:absolute;
  z-index:3;
  right:9%;
  top:50%;
  width:clamp(240px,23vw,360px);
  transform:translateY(-46%);
  display:grid;
  place-items:center;
  pointer-events:none;
}

.hero-bottle__glow{
  position:absolute;
  width:165%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,122,29,.38),rgba(49,118,255,.16) 46%,transparent 72%);
  filter:blur(34px);
  animation:heroBottleGlow 7s ease-in-out infinite;
}

.hero-bottle__img{
  position:relative;
  z-index:1;
  width:100%;
  height:auto;
  filter:drop-shadow(0 32px 48px rgba(0,0,0,.55));
  animation:heroBottleFloat 6.5s ease-in-out infinite;
  will-change:transform;
}

@keyframes heroBottleFloat{
  0%,100%{transform:translateY(0) rotate(-1.1deg)}
  50%{transform:translateY(-14px) rotate(1.1deg)}
}

@keyframes heroBottleGlow{
  0%,100%{opacity:.7;transform:scale(1)}
  50%{opacity:1;transform:scale(1.07)}
}

.hero-content{
  position:relative;
  z-index:4;
  max-width:780px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 13px;
  border-radius:100px;
  border:1px solid rgba(255,168,44,.22);
  background:rgba(255,122,29,.07);
  color:#ffc259;
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-size:.7rem;
  font-weight:800;
  margin-bottom:24px;
}
.eyebrow-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 14px var(--orange);
}

h1{
  font-family:"Manrope";
  font-size:clamp(4rem,7.15vw,8.15rem);
  line-height:.89;
  font-weight:800;
  letter-spacing:0;
}

.hero-line{display:block;overflow:hidden}
.hero-line>span{display:block}

.gradient-word{
  background:linear-gradient(90deg,var(--orange),var(--yellow) 55%,var(--lime));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-description{
  max-width:600px;
  margin-top:30px;
  color:#a3a7b0;
  line-height:1.72;
  font-size:1.02rem;
}
.hero-description strong{color:#fff}

.hero-buttons{
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:32px;
  flex-wrap:wrap;
}
.btn-main,.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 22px;
  border-radius:16px;
  font-weight:800;
  border:0;
}
.btn-main{
  background:linear-gradient(135deg,var(--orange),var(--yellow));
  color:#13100b;
  box-shadow:0 15px 44px rgba(255,122,31,.22);
}
.btn-secondary{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.11);
  color:#e5e7eb;
}

.product-badge{
  position:absolute;
  z-index:6;
  background:rgba(14,16,21,.74);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(16px);
  box-shadow:0 18px 45px rgba(0,0,0,.26);
}
.spf-badge{
  right:6.4%;
  top:42%;
  width:120px;height:120px;
  border-radius:50%;
  display:grid;
  place-items:center;
  text-align:center;
}
.spf-badge strong{
  font-family:"Manrope";
  color:var(--yellow);
  font-size:1.8rem;
  line-height:1;
}
.spf-badge small{
  display:block;
  margin-top:6px;
  color:#8e939d;
  font-size:.54rem;
  text-transform:uppercase;
  letter-spacing:1px;
}
.wa-badge{
  right:21%;
  bottom:10.5%;
  border-radius:16px;
  padding:13px 15px;
  display:flex;
  align-items:center;
  gap:10px;
}
.wa-icon{
  width:36px;height:36px;border-radius:11px;
  display:grid;place-items:center;
  background:var(--wa);
  color:#062415;
  font-weight:900;
}
.wa-badge small{
  display:block;
  color:#7c818b;
  font-size:.6rem;
  margin-bottom:2px;
}
.wa-badge strong{font-size:.81rem}

.scroll-indicator{
  position:absolute;
  z-index:6;
  left:50%;bottom:20px;
  transform:translateX(-50%);
  color:#616671;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:.6rem;
  text-align:center;
}
.scroll-indicator::after{
  content:"";
  display:block;
  width:1px;height:35px;
  margin:9px auto 0;
  background:linear-gradient(var(--orange),transparent);
}

/* PRESENTACIÓN DEMOSTRATIVA DE LA MARCA */
.project-intro{
  padding:clamp(72px,9vw,128px) 0;
  overflow:hidden;
  background:
    radial-gradient(circle at 16% 52%,rgba(82,28,139,.22),transparent 32%),
    radial-gradient(circle at 84% 35%,rgba(255,123,33,.14),transparent 30%),
    #08090d;
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
}

.project-intro__card{
  display:grid;
  grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);
  gap:clamp(42px,7vw,96px);
  align-items:center;
  padding:clamp(28px,5vw,66px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:clamp(26px,4vw,46px);
  background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  box-shadow:0 36px 100px rgba(0,0,0,.35);
  backdrop-filter:blur(18px);
}

.project-intro__visual{
  position:relative;
  display:grid;
  place-items:center;
  min-width:0;
}

.project-intro__visual img{
  position:relative;
  z-index:1;
  display:block;
  width:min(100%,390px);
  height:auto;
  filter:drop-shadow(0 28px 45px rgba(0,0,0,.38));
}

.project-intro__glow{
  position:absolute;
  width:86%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,183,40,.2),rgba(79,29,142,.12) 48%,transparent 72%);
  filter:blur(18px);
}

.project-intro__kicker{
  margin-top:22px;
  color:#ffbf56;
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.project-intro__content h2{
  max-width:720px;
  margin-top:12px;
  font:800 clamp(2.35rem,5vw,5.6rem)/.98 "Manrope",sans-serif;
  letter-spacing:-.045em;
}

.project-intro__description{
  max-width:650px;
  margin-top:25px;
  color:#aaafb9;
  font-size:clamp(.96rem,1.35vw,1.08rem);
  line-height:1.75;
}

.project-intro__description strong{color:#fff}

.project-intro__pillars{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:27px;
}

.project-intro__pillars span{
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:#d7d9df;
  font-size:.72rem;
  font-weight:700;
}

.project-intro__cta{margin-top:30px}

@media(max-width:820px){
  .project-intro__card{
    grid-template-columns:1fr;
    text-align:center;
  }
  .project-intro__visual img{width:min(78vw,330px)}
  .project-intro__content .section-tag,
  .project-intro__pillars{justify-content:center}
  .project-intro__description{margin-left:auto;margin-right:auto}
}

@media(max-width:520px){
  .project-intro__card{padding:30px 20px}
  .project-intro__content h2{font-size:clamp(2.15rem,12vw,3.5rem)}
  .project-intro__cta{width:100%}
}

/* SOL + CONTENIDO ORIGINAL EN UNA MISMA ESCENA */
.solar-intro{
  min-height:92vh;
  position:relative;
  overflow:hidden;
  background:transparent;
  border:0;
  margin-top:-2px;
  display:flex;
  align-items:center;
  isolation:isolate;
}


.solar-intro::after{
  content:"";
  position:absolute;
  top:-180px;
  left:0;
  width:100%;
  height:360px;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(6,7,10,0) 0%,
      rgba(6,7,10,.08) 24%,
      rgba(6,7,10,.03) 58%,
      rgba(6,7,10,0) 100%
    );
}

#sunScene{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
  filter:saturate(1.08) brightness(1.06);
}

.solar-vignette{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 19% 54%,rgba(6,7,10,.66) 0 18%,rgba(6,7,10,.28) 34%,transparent 52%),
    radial-gradient(ellipse at 83% 55%,rgba(6,7,10,.56) 0 16%,rgba(6,7,10,.23) 33%,transparent 50%),
    radial-gradient(circle at center,transparent 0 28%,rgba(6,7,10,.04) 42%,rgba(6,7,10,.30) 100%);
}

.solar-content{
  position:relative;
  z-index:3;
  padding-top:78px;
  padding-bottom:72px;
}

.solar-intro .intro-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:90px;
  align-items:center;
  min-height:620px;
}

.solar-intro .intro-right{
  padding-top:18px;
}

.solar-intro .section-title{
  text-shadow:0 4px 12px rgba(0,0,0,.85),0 16px 45px rgba(0,0,0,.52);
}

.solar-intro .section-description{
  color:#b0b3bb;
  text-shadow:0 2px 8px rgba(0,0,0,.95),0 6px 22px rgba(0,0,0,.65);
}

.solar-intro .stats{
  margin-top:28px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}

.solar-intro .stat{
  padding:16px 0;
  border-top:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(4px);
}

.solar-intro .stat-number{
  font-family:"Manrope";
  font-size:2.5rem;
  color:#fff1c9;
  letter-spacing:0;
  text-shadow:0 4px 18px rgba(0,0,0,.4);
}

.solar-intro .stat-label{
  color:#90949d;
  font-size:.75rem;
  margin-top:6px;
}

/* TICKER */
.marquee{
  overflow:hidden;
  padding:17px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#080a0d;
}
.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee 27s linear infinite;
}
.marquee-item{
  display:flex;
  gap:34px;
  margin-right:34px;
  color:#686d77;
  align-items:center;
  text-transform:uppercase;
  letter-spacing:1.7px;
  font-size:.68rem;
  font-weight:700;
}
.marquee-item span{color:var(--orange)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* GENERIC */
section{position:relative}
.wrap{
  width:min(1180px,calc(100% - 44px));
  margin:auto;
}
.section-tag{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--orange);
  text-transform:uppercase;
  letter-spacing:1.8px;
  font-size:.7rem;
  font-weight:800;
  margin-bottom:19px;
}
.section-tag::before{
  content:"";
  width:28px;height:1px;
  background:var(--orange);
}
.section-title{
  font-family:"Manrope";
  font-size:clamp(2.8rem,5vw,5.7rem);
  line-height:.96;
  letter-spacing:0;
}
.section-description{
  color:var(--muted);
  max-width:590px;
  margin-top:23px;
  line-height:1.78;
  font-size:1.02rem;
}

/* FEATURES */
.features{padding:40px 0 145px}
.feature-grid{
  margin-top:60px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px;
}
.feature-card{
  position:relative;
  min-height:410px;
  overflow:hidden;
  padding:32px;
  border-radius:29px;
  background:linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.08);
  transition:.35s;
}
.feature-card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,142,40,.26);
}
.feature-card.large{grid-column:span 7}
.feature-card.small{grid-column:span 5}
.feature-card h3{
  position:relative;
  z-index:2;
  font-family:"Manrope";
  font-size:1.9rem;
  letter-spacing:0;
}
.feature-card p{
  position:relative;
  z-index:2;
  max-width:440px;
  margin-top:13px;
  color:#8c919b;
  line-height:1.65;
}
.feature-number{
  position:absolute;
  top:26px;right:27px;
  color:#5d626b;
  font-size:.68rem;
}
.feature-sun{
  position:absolute;
  right:-110px;bottom:-115px;
  width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff2aa,#ffc137 30%,#ff7825 60%,#9b250b);
  box-shadow:0 0 100px rgba(255,110,23,.15);
}
.molecule{
  position:absolute;
  right:32px;bottom:30px;
  width:250px;height:250px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:50%;
}
.molecule::before,.molecule::after{
  content:"";
  position:absolute;
  border-radius:50%;
}
.molecule::before{
  width:48px;height:48px;
  top:60px;left:30px;
  background:linear-gradient(145deg,#fff4c8,#c49a52);
}
.molecule::after{
  width:27px;height:27px;
  right:45px;bottom:43px;
  background:var(--green);
}
.wa-big{
  position:absolute;
  right:35px;bottom:35px;
  width:100px;height:100px;
  border-radius:30px;
  background:var(--wa);
  display:grid;place-items:center;
  color:#072816;
  font-size:2.2rem;
  font-weight:900;
  box-shadow:0 18px 55px rgba(37,211,102,.18);
}

/* WHATSAPP */
.whatsapp-section{
  padding:125px 0;
  overflow:hidden;
  background:
    radial-gradient(circle at 85% 25%,rgba(53,211,121,.09),transparent 27%),
    linear-gradient(180deg,#0a0c10,#10150f);
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.whatsapp-grid{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:80px;
  align-items:center;
}
.whatsapp-section .section-tag{color:#6ce697}
.whatsapp-section .section-tag::before{background:#6ce697}
.steps{
  margin-top:34px;
  display:flex;
  flex-direction:column;
  gap:15px;
}
.step{
  display:flex;
  align-items:center;
  gap:13px;
  color:#d9dcd6;
  font-size:.9rem;
}
.step-number{
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(104,227,146,.22);
  color:#6fe397;
  font-size:.65rem;
}

.phone-wrap{
  min-height:680px;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1200px;
}
.phone{
  width:330px;height:660px;
  padding:9px;
  border-radius:48px;
  background:#080a09;
  box-shadow:0 55px 100px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.10);
  transform:rotateY(-9deg) rotateX(3deg) rotateZ(3deg);
  transition:.5s;
}
.phone:hover{transform:none}
.screen{
  height:100%;
  border-radius:40px;
  overflow:hidden;
  background:#0d1712;
}
.wa-header{
  height:84px;
  padding:28px 15px 12px;
  display:flex;
  gap:10px;
  align-items:center;
  background:#202c27;
}
.wa-avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--yellow),var(--orange));
  display:grid;place-items:center;
  color:#3f230e;
}
.wa-header strong{font-size:.8rem}
.wa-header small{
  display:block;
  color:#91a097;
  font-size:.58rem;
  margin-top:2px;
}
.chat{padding:24px 12px}
.wa-date{
  width:max-content;
  margin:0 auto 20px;
  padding:6px 10px;
  border-radius:7px;
  background:#1b2720;
  color:#94a098;
  font-size:.57rem;
}
.message{
  width:89%;
  padding:12px 12px 9px;
  border-radius:10px 10px 10px 2px;
  background:#202d26;
  color:#e5eae7;
  font-size:.7rem;
  line-height:1.55;
  opacity:0;
  transform:translateY(20px);
}
.message strong{color:#f3d66b}
.message-time{
  display:block;
  text-align:right;
  color:#849189;
  font-size:.49rem;
  margin-top:4px;
}
.phone-sun{
  width:130px;height:130px;border-radius:50%;
  margin:42px auto 0;
  background:radial-gradient(circle at 35% 30%,#fff7bc,#ffc84a 38%,#ef7526 78%);
  box-shadow:0 0 65px rgba(255,155,48,.22);
  animation:pulse 3s ease-in-out infinite;
}
@keyframes pulse{
  50%{transform:scale(1.06);box-shadow:0 0 85px rgba(255,155,48,.34)}
}

/* RECORDATORIO */
.reminder-section{padding:145px 0}
.reminder-header{
  max-width:900px;
  margin:auto;
  text-align:center;
}
.reminder-header .section-tag{justify-content:center}
.reminder-card{
  max-width:1080px;
  margin:65px auto 0;
  padding:38px;
  border-radius:34px;
  display:grid;
  grid-template-columns:1fr .85fr;
  gap:45px;
  background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.08);
}
.form-label{
  display:block;
  color:#7a808a;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:9px;
}
.input-wrap{margin-bottom:19px}
.input{
  width:100%;
  padding:16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:#fff;
  outline:none;
}
.input:focus{border-color:rgba(255,137,38,.62)}
.time-picker{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}
.time-option{
  padding:13px 7px;
  border-radius:12px;
  text-align:center;
  border:1px solid rgba(255,255,255,.09);
  color:#8d929d;
  cursor:pointer;
}
.time-option.active,.time-option:hover{
  background:linear-gradient(135deg,var(--orange),var(--yellow));
  color:#13110d;
  border-color:transparent;
}
.preview-card{
  padding:26px;
  border-radius:24px;
  background:#11151a;
  border:1px solid rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
}
.preview-top{
  display:flex;align-items:center;justify-content:space-between;
}
.preview-label{
  color:#767c87;
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:1px;
}
.live{color:#6fe594;font-size:.62rem}
.preview-main{margin:auto 0}
.preview-main small{color:#777d87}
.preview-main h3{
  font-family:"Manrope";
  font-size:3.6rem;
  letter-spacing:0;
  margin-top:5px;
}
.preview-main p{
  color:#949aa4;
  margin-top:5px;
}
.status-line{
  height:4px;
  border-radius:30px;
  background:#252931;
  overflow:hidden;
  margin-top:28px;
}
.status-fill{
  height:100%;
  width:66%;
  background:linear-gradient(90deg,var(--orange),var(--yellow));
  animation:fill 4s ease-in-out infinite alternate;
}
@keyframes fill{from{width:35%}to{width:80%}}


/* ============================================================
   POLISH V14 — RAYOS UV SUTILES
============================================================ */
.uv-ray-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
  opacity:.45;
  mix-blend-mode:screen;
}

.uv-beam{
  position:absolute;
  left:50%;
  top:50%;
  width:48vw;
  max-width:760px;
  height:1px;
  transform-origin:0 50%;
  background:
    linear-gradient(
      90deg,
      rgba(255,196,67,.0),
      rgba(255,174,43,.22) 28%,
      rgba(255,218,95,.08) 60%,
      transparent
    );
  filter:blur(.2px);
}

.uv-beam:nth-child(1){transform:rotate(14deg);animation:uvPulse 6s ease-in-out infinite}
.uv-beam:nth-child(2){transform:rotate(48deg);animation:uvPulse 7.2s ease-in-out infinite .6s}
.uv-beam:nth-child(3){transform:rotate(112deg);animation:uvPulse 6.7s ease-in-out infinite 1.2s}
.uv-beam:nth-child(4){transform:rotate(155deg);animation:uvPulse 8s ease-in-out infinite .9s}
.uv-beam:nth-child(5){transform:rotate(205deg);animation:uvPulse 7.5s ease-in-out infinite 1.8s}
.uv-beam:nth-child(6){transform:rotate(254deg);animation:uvPulse 6.4s ease-in-out infinite 1.1s}
.uv-beam:nth-child(7){transform:rotate(302deg);animation:uvPulse 8.2s ease-in-out infinite 2.1s}

@keyframes uvPulse{
  0%,100%{opacity:.18;transform-origin:0 50%}
  50%{opacity:.72}
}

/* ============================================================
   CÓMO FUNCIONA
============================================================ */
.how-section{
  padding:125px 0 140px;
  position:relative;
  overflow:hidden;
}

.how-section::before{
  content:"";
  position:absolute;
  width:520px;height:520px;
  border-radius:50%;
  right:-220px;top:-120px;
  background:radial-gradient(circle,rgba(255,126,31,.10),transparent 68%);
  pointer-events:none;
}

.how-head{
  max-width:820px;
  margin:auto;
  text-align:center;
}

.how-head .section-tag{
  justify-content:center;
}

.how-grid{
  margin-top:58px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  position:relative;
}

.how-grid::before{
  content:"";
  position:absolute;
  left:16%;
  right:16%;
  top:55px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,173,39,.30),rgba(183,217,87,.24),transparent);
  z-index:0;
}

.how-card{
  min-height:330px;
  position:relative;
  z-index:1;
  padding:30px;
  border-radius:27px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  transition:transform .35s ease,border-color .35s ease,background .35s ease;
}

.how-card:hover{
  transform:translateY(-7px);
  border-color:rgba(255,149,47,.27);
  background:
    linear-gradient(145deg,rgba(255,255,255,.066),rgba(255,255,255,.022));
}

.how-step{
  width:50px;height:50px;
  border-radius:17px;
  display:grid;
  place-items:center;
  font-family:"Manrope";
  font-weight:800;
  color:#12100b;
  background:linear-gradient(135deg,var(--orange),var(--yellow));
  box-shadow:0 14px 38px rgba(255,124,30,.18);
  margin-bottom:42px;
}

.how-card:nth-child(3) .how-step{
  background:linear-gradient(135deg,var(--yellow),var(--lime));
}

.how-card h3{
  font-family:"Manrope";
  font-size:1.55rem;
  letter-spacing:0;
}

.how-card p{
  margin-top:12px;
  color:#8f949e;
  line-height:1.65;
  font-size:.9rem;
}

.how-mini{
  position:absolute;
  right:24px;
  bottom:22px;
  color:rgba(255,255,255,.035);
  font-family:"Manrope";
  font-size:4.7rem;
  font-weight:800;
  letter-spacing:0;
  user-select:none;
}

/* ============================================================
   BLOQUE DE LANZAMIENTO / CONFIANZA
============================================================ */
.launch{
  padding:0 0 115px;
}

.launch-card{
  position:relative;
  overflow:hidden;
  padding:34px 38px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(circle at 0% 50%,rgba(255,127,30,.09),transparent 30%),
    radial-gradient(circle at 100% 50%,rgba(64,207,124,.07),transparent 28%),
    rgba(255,255,255,.025);
  display:grid;
  grid-template-columns:1fr auto;
  gap:32px;
  align-items:center;
}

.launch-title{
  font-family:"Manrope";
  font-size:1.75rem;
  letter-spacing:0;
}

.launch-copy{
  color:#858b95;
  margin-top:7px;
  font-size:.88rem;
  line-height:1.55;
  max-width:650px;
}

.launch-status{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.status-pill{
  padding:10px 13px;
  border-radius:100px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.035);
  color:#b7bbc3;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:700;
  white-space:nowrap;
}

.status-pill.active{
  color:#10150e;
  background:linear-gradient(135deg,var(--yellow),var(--lime));
  border-color:transparent;
}

.launch-progress{
  grid-column:1/-1;
  height:3px;
  background:rgba(255,255,255,.055);
  border-radius:100px;
  overflow:hidden;
  position:relative;
}

.launch-progress::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:38%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--orange),var(--yellow),var(--lime));
  animation:launchGlow 3.2s ease-in-out infinite alternate;
}

@keyframes launchGlow{
  from{filter:brightness(.88);opacity:.75}
  to{filter:brightness(1.35);opacity:1}
}


/* CTA */
.cta{padding:0 0 80px}
.cta-box{
  min-height:620px;
  border-radius:42px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:45px;
  position:relative;
  background:
    radial-gradient(circle at 50% 110%,#ffad39 0%,#df6523 24%,#361d12 48%,#0a0b0f 72%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
}
.cta-box::before{
  content:"";
  position:absolute;
  width:550px;height:550px;
  bottom:-420px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.19);
}
.cta-content{position:relative;z-index:2;max-width:880px}
.cta h2{
  font-family:"Manrope";
  font-size:clamp(3rem,5.8vw,6.6rem);
  line-height:.92;
  letter-spacing:0;
}
.cta p{
  max-width:550px;
  margin:23px auto 0;
  color:#a9a7a0;
  line-height:1.7;
}
.cta .btn-main{margin-top:28px}

footer{
  width:min(1180px,calc(100% - 44px));
  margin:auto;
  padding:25px 0 42px;
  display:flex;
  justify-content:space-between;
  color:#646a74;
  font-size:.72rem;
}
.footer-links{display:flex;gap:24px}

@media(max-width:1050px){
  #cursor{display:none}
  .nav-links{display:none}

  .hero{
    grid-template-columns:1fr;
    padding-top:145px;
    min-height:940px;
  }
  .hero::before{
    background:linear-gradient(180deg,rgba(6,7,10,.97),rgba(6,7,10,.62));
  }
  .hero-content{
    margin:auto;
    text-align:center;
  }
  .hero-description{
    margin-left:auto;margin-right:auto;
  }
  .hero-buttons{justify-content:center}
  .spf-badge{right:5%;top:61%}
  .wa-badge{right:13%;bottom:10%}
  .hero-bottle{
    right:9%;
    top:74%;
    bottom:auto;
    transform:translateY(-50%);
    width:clamp(95px,12vw,130px);
  }

  .solar-intro{min-height:92vh}
  .solar-intro .intro-grid{grid-template-columns:1fr;min-height:auto;gap:40px}
  .solar-intro .intro-right{padding-top:0}
  .solar-vignette{background:linear-gradient(180deg,rgba(6,7,10,.72),rgba(6,7,10,.30) 45%,rgba(6,7,10,.60))}

  .intro-grid,.whatsapp-grid,.reminder-card{
    grid-template-columns:1fr;
  }
  .intro-right{padding-top:0}
  .feature-card.large,.feature-card.small{
    grid-column:span 12;
  }

  .how-grid{grid-template-columns:1fr}
  .how-grid::before{display:none}
  .launch-card{grid-template-columns:1fr}
  .launch-status{justify-content:flex-start}

}

@media(max-width:680px){
  nav{top:8px;width:calc(100% - 16px)}
  .login{display:none}
  .register{padding:10px 13px}

  .hero{
    padding:126px 18px 40px;
    min-height:880px;
  }
  h1{
    font-size:clamp(3.2rem,16vw,5rem);
    letter-spacing:0;
  }
  .hero-buttons{flex-direction:column}
  .btn-main,.btn-secondary{width:100%}

  .spf-badge{
    width:96px;height:96px;
    right:7px;top:61%;
  }
  .wa-badge{
    right:7px;
    bottom:11%;
  }

  .solar-intro{min-height:auto}
  .solar-content{padding-top:72px;padding-bottom:65px}
  .solar-intro .intro-grid{grid-template-columns:1fr;gap:35px;min-height:auto}
  .solar-intro .stats{grid-template-columns:1fr}
  .solar-vignette{background:rgba(6,7,10,.48)}

  .wrap{width:calc(100% - 30px)}
  .intro{padding-top:105px}
  .stats{grid-template-columns:1fr}
  .section-title{letter-spacing:0}

  .feature-card{
    min-height:370px;
    padding:26px;
  }

  .phone-wrap{min-height:620px}
  .phone{
    width:300px;height:610px;
    transform:none;
  }

  .time-picker{grid-template-columns:1fr}
  .reminder-card{padding:20px}

  .cta-box{
    min-height:540px;
    padding:30px 20px;
  }
  .cta h2{letter-spacing:0}

  footer{
    flex-direction:column;
    gap:18px;
  }
}

/* ============================================================
   MOBILE REAL — <= 680px
============================================================ */
@media(max-width:680px){

  html,body{
    width:100%;
    overflow-x:hidden;
  }

  body{
    background:
      radial-gradient(circle at 20% 0%,rgba(255,113,28,.10),transparent 28%),
      #06070a;
  }

  nav{
    top:8px;
    left:8px;
    right:8px;
    width:auto;
    transform:none;
    padding:10px 11px;
    border-radius:18px;
  }

  .logo{
    font-size:.92rem;
    gap:8px;
  }

  .logo-symbol{
    width:30px;
    height:30px;
  }

  .nav-links,
  .login{
    display:none !important;
  }

  .register{
    padding:9px 11px;
    border-radius:12px;
    font-size:.7rem;
    white-space:nowrap;
  }

  /* HERO */
  .hero{
    min-height:100svh;
    height:auto;
    display:block;
    padding:102px 18px 28px;
    overflow:hidden;
  }

  .hero::before{
    background:
      linear-gradient(
        180deg,
        rgba(6,7,10,.94) 0%,
        rgba(6,7,10,.83) 45%,
        rgba(6,7,10,.30) 68%,
        rgba(6,7,10,.06) 100%
      );
  }

  .hero-content{
    width:100%;
    max-width:none;
    text-align:left;
    margin:0;
    position:relative;
    z-index:7;
  }

  .eyebrow{
    margin-bottom:18px;
    padding:7px 11px;
    font-size:.59rem;
    letter-spacing:1.15px;
  }

  h1{
    font-size:clamp(3.2rem,16vw,4.85rem);
    line-height:.90;
    letter-spacing:0;
    max-width:100%;
  }

  .hero-description{
    max-width:100%;
    margin-top:20px;
    font-size:.88rem;
    line-height:1.62;
    padding-right:4px;
  }

  .hero-buttons{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
    margin-top:22px;
    width:100%;
  }

  .btn-main,
  .btn-secondary{
    width:100%;
    min-height:48px;
    padding:13px 15px;
    border-radius:14px;
    font-size:.82rem;
  }

  /* Reserva una zona visual exclusiva para botella */
  #bottleScene{
    position:relative;
    display:block;
    width:100%;
    height:430px;
    margin-top:-10px;
    z-index:3;
  }

  #bottleScene canvas{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }

  .hero-bottle{
    z-index:4;
    left:50%;
    right:auto;
    top:34px;
    bottom:auto;
    transform:translateX(-50%);
    width:clamp(140px,38vw,190px);
  }

  .product-badge{
    position:absolute;
    z-index:8;
  }

  .spf-badge{
    width:84px;
    height:84px;
    right:13px;
    top:auto;
    bottom:158px;
  }

  .spf-badge strong{
    font-size:1.3rem;
  }

  .spf-badge small{
    font-size:.46rem;
  }

  .wa-badge{
    right:auto;
    left:14px;
    bottom:72px;
    padding:11px 12px;
    max-width:185px;
  }

  .wa-icon{
    width:31px;
    height:31px;
    border-radius:10px;
  }

  .wa-badge small{
    font-size:.52rem;
  }

  .wa-badge strong{
    font-size:.70rem;
  }

  .scroll-indicator{
    display:none;
  }

  /* SOL + INTRO */
  .solar-intro{
    min-height:auto;
    display:block;
    padding:0;
    margin-top:0;
  }

  #sunScene{
    position:absolute;
    inset:0;
    min-height:100%;
  }

  .solar-content{
    padding:82px 18px 72px;
  }

  .solar-intro .intro-grid{
    display:block;
    min-height:700px;
  }

  .solar-intro .intro-right{
    padding-top:260px;
  }

  .solar-intro .section-title{
    font-size:clamp(2.8rem,13vw,4.25rem);
    line-height:.95;
    letter-spacing:0;
    max-width:95%;
  }

  .solar-intro .section-description{
    max-width:100%;
    font-size:.88rem;
    line-height:1.62;
  }

  .solar-intro .stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:25px;
  }

  .solar-intro .stat{
    min-width:0;
    padding:14px 0;
  }

  .solar-intro .stat-number{
    font-size:2rem;
  }

  .solar-intro .stat-label{
    font-size:.66rem;
    line-height:1.35;
  }

  .solar-vignette{
    background:
      radial-gradient(circle at 50% 37%,transparent 0 18%,rgba(6,7,10,.08) 36%,rgba(6,7,10,.52) 72%),
      linear-gradient(180deg,rgba(6,7,10,.48),rgba(6,7,10,.10) 36%,rgba(6,7,10,.58) 70%,rgba(6,7,10,.85));
  }

  .uv-ray-overlay{
    opacity:.25;
  }

  .uv-beam{
    width:80vw;
  }

  /* TICKER */
  .marquee{
    padding:13px 0;
  }

  .marquee-item{
    gap:22px;
    margin-right:22px;
    font-size:.58rem;
    letter-spacing:1.2px;
  }

  /* GENERALES */
  .wrap{
    width:auto;
    margin:0;
    padding-left:18px;
    padding-right:18px;
  }

  .section-tag{
    font-size:.61rem;
    letter-spacing:1.4px;
    margin-bottom:15px;
  }

  .section-title{
    font-size:clamp(2.65rem,12vw,4rem);
    line-height:.96;
    letter-spacing:0;
  }

  .section-description{
    font-size:.88rem;
    line-height:1.65;
  }

  /* FEATURES */
  .features{
    padding:88px 0 100px;
  }

  .feature-grid{
    display:block;
    margin-top:38px;
  }

  .feature-card{
    min-height:330px;
    padding:24px;
    border-radius:23px;
    margin-bottom:13px;
  }

  .feature-card h3{
    font-size:1.45rem;
    line-height:1.08;
  }

  .feature-card p{
    font-size:.84rem;
    line-height:1.55;
    padding-right:4px;
  }

  .feature-sun{
    width:230px;
    height:230px;
    right:-85px;
    bottom:-90px;
  }

  .molecule{
    width:175px;
    height:175px;
    right:18px;
    bottom:12px;
  }

  .wa-big{
    width:75px;
    height:75px;
    border-radius:22px;
    right:22px;
    bottom:22px;
    font-size:1.65rem;
  }

  /* WHATSAPP */
  .whatsapp-section{
    padding:90px 0;
  }

  .whatsapp-grid{
    display:block;
  }

  .steps{
    margin-top:26px;
  }

  .phone-wrap{
    min-height:auto;
    margin-top:48px;
    padding:0 4px;
  }

  .phone{
    width:min(300px,88vw);
    height:590px;
    transform:none !important;
  }

  .phone:hover{
    transform:none !important;
  }

  /* CÓMO FUNCIONA */
  .how-section{
    padding:90px 0 105px;
  }

  .how-head{
    text-align:left;
  }

  .how-head .section-tag{
    justify-content:flex-start;
  }

  .how-grid{
    display:block;
    margin-top:36px;
  }

  .how-grid::before{
    display:none;
  }

  .how-card{
    min-height:275px;
    padding:24px;
    margin-bottom:13px;
    border-radius:23px;
  }

  .how-step{
    margin-bottom:28px;
  }

  .how-card h3{
    font-size:1.35rem;
  }

  /* RECORDATORIO */
  .reminder-section{
    padding:90px 0;
  }

  .reminder-header{
    text-align:left;
  }

  .reminder-header .section-tag{
    justify-content:flex-start;
  }

  .reminder-card{
    display:block;
    width:auto;
    margin:38px 0 0;
    padding:19px;
    border-radius:24px;
  }

  .time-picker{
    grid-template-columns:1fr;
  }

  .preview-card{
    margin-top:18px;
    min-height:280px;
  }

  .preview-main h3{
    font-size:3rem;
  }

  /* LAUNCH */
  .launch{
    padding-bottom:90px;
  }

  .launch-card{
    display:block;
    padding:24px;
    border-radius:23px;
  }

  .launch-title{
    font-size:1.45rem;
    line-height:1.08;
  }

  .launch-copy{
    font-size:.82rem;
  }

  .launch-status{
    justify-content:flex-start;
    margin-top:24px;
    gap:7px;
  }

  .status-pill{
    font-size:.58rem;
    padding:8px 10px;
  }

  .launch-progress{
    margin-top:24px;
  }

  /* CTA */
  .cta{
    padding-bottom:55px;
  }

  .cta .wrap{
    padding-left:12px;
    padding-right:12px;
  }

  .cta-box{
    min-height:500px;
    padding:34px 18px;
    border-radius:28px;
  }

  .cta h2{
    font-size:clamp(3rem,13vw,4.5rem);
    letter-spacing:0;
  }

  .cta p{
    font-size:.86rem;
    line-height:1.62;
  }

  /* FOOTER */
  footer{
    width:auto;
    margin:0;
    padding:25px 18px 38px;
    display:block;
    text-align:left;
  }

  .footer-links{
    margin-top:16px;
    gap:17px;
    flex-wrap:wrap;
  }
}

/* Telefonos muy angostos */
@media(max-width:390px){
  h1{
    font-size:3.15rem;
  }

  .hero{
    padding-left:15px;
    padding-right:15px;
  }

  #bottleScene{
    height:390px;
  }

  .spf-badge{
    bottom:145px;
  }

  .wa-badge{
    bottom:62px;
  }

  .solar-content{
    padding-left:15px;
    padding-right:15px;
  }

  .solar-intro .intro-right{
    padding-top:230px;
  }

  .wrap{
    padding-left:15px;
    padding-right:15px;
  }

  .phone{
    width:286px;
    height:570px;
  }
}


/* ============================================================
   MOBILE V16 — orden y composicion corregidos
============================================================ */
@media(max-width:680px){

  /* Titulo y botones siempre antes de la botella */
  .hero{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto;
    column-gap:10px;
    row-gap:0;
    min-height:auto;
    padding:102px 18px 34px;
  }

  .hero-content{
    grid-column:1 / -1;
    grid-row:1;
    order:unset;
    position:relative;
    z-index:8;
    margin:0;
    text-align:left;
  }

  .hero-buttons{
    margin-bottom:18px;
  }

  /* La botella queda debajo de todo el contenido principal */
  #bottleScene{
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
    height:410px;
    margin:0;
    position:relative;
    z-index:3;
    overflow:visible;
  }

  #bottleScene canvas{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }

  /* Comparte la misma celda del grid que #bottleScene, superpuesta */
  .hero-bottle{
    position:relative;
    grid-column:1 / -1;
    grid-row:2;
    justify-self:center;
    align-self:center;
    z-index:4;
    top:auto;left:auto;right:auto;bottom:auto;
    transform:none;
    width:clamp(180px,48vw,240px);
  }

  /* Los badges dejan de flotar y pasan a una fila propia */
  .product-badge{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    z-index:8;
    margin:0 !important;
    transform:none !important;
  }

  .spf-badge{
    grid-column:1;
    grid-row:3;
    justify-self:stretch;
    align-self:stretch;
    width:auto;
    height:auto;
    min-height:82px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:14px 10px;
  }

  .spf-badge strong{
    font-size:1.45rem;
  }

  .spf-badge small{
    font-size:.48rem;
  }

  .wa-badge{
    grid-column:2;
    grid-row:3;
    justify-self:stretch;
    align-self:stretch;
    max-width:none;
    min-height:82px;
    border-radius:18px;
    padding:13px 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
  }

  .wa-badge strong{
    font-size:.72rem;
    line-height:1.2;
  }

  .wa-badge small{
    font-size:.50rem;
  }

  .wa-icon{
    flex:0 0 auto;
  }

  /* Evitar que cualquier animacion de escritorio mueva los badges */
  .spf-badge,
  .wa-badge{
    animation:none !important;
  }

  /* SOL: titulo, espacio visual para el sol, texto y stats */
  .solar-intro{
    min-height:auto;
    overflow:hidden;
  }

  .solar-content{
    padding:74px 18px 68px;
  }

  .solar-intro .intro-grid{
    display:block;
    min-height:0;
  }

  .solar-intro .intro-grid > div:first-child{
    position:relative;
    z-index:4;
  }

  .solar-intro .intro-right{
    padding-top:360px !important;
    position:relative;
    z-index:4;
  }

  .solar-intro .section-title{
    max-width:100%;
  }

  /* Sol centrado en la franja libre entre titulo y texto */
  #sunScene{
    top:185px;
    bottom:auto;
    height:520px;
    overflow:hidden;
  }

  #sunScene canvas{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }

  .solar-vignette{
    background:
      linear-gradient(
        180deg,
        rgba(6,7,10,.72) 0%,
        rgba(6,7,10,.18) 22%,
        rgba(6,7,10,.08) 47%,
        rgba(6,7,10,.52) 72%,
        rgba(6,7,10,.92) 100%
      );
  }

  /* Rayos UV un poco mas discretos en telefono */
  .uv-ray-overlay{
    opacity:.18;
  }

  /* Los botones del hero ya no pueden quedar tapados */
  .hero-buttons,
  .hero-buttons *{
    position:relative;
    z-index:10;
  }
}

@media(max-width:390px){
  #bottleScene{
    height:370px;
  }

  .spf-badge,
  .wa-badge{
    min-height:76px;
  }

  #sunScene{
    top:175px;
    height:480px;
  }

  .solar-intro .intro-right{
    padding-top:330px !important;
  }
}


/* ============================================================
   MOBILE V17 — SOL RESTAURADO AL ESTILO V15
   Mantiene el hero corregido de V16.
============================================================ */
@media(max-width:680px){

  /* La escena solar vuelve a ocupar una gran zona vertical,
     como en las capturas que se veian mejor. */
  .solar-intro{
    min-height:auto;
    display:block;
    padding:0;
    overflow:hidden;
  }

  .solar-content{
    padding:82px 18px 72px;
  }

  .solar-intro .intro-grid{
    display:block;
    min-height:700px;
  }

  .solar-intro .intro-grid > div:first-child{
    position:relative;
    z-index:4;
  }

  /* Dejamos una gran franja libre para que el sol respire */
  .solar-intro .intro-right{
    padding-top:260px !important;
    position:relative;
    z-index:4;
  }

  .solar-intro .section-title{
    font-size:clamp(2.8rem,13vw,4.25rem);
    line-height:.95;
    letter-spacing:0;
    max-width:95%;
  }

  .solar-intro .section-description{
    max-width:100%;
    font-size:.88rem;
    line-height:1.62;
  }

  .solar-intro .stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:25px;
  }

  .solar-intro .stat{
    min-width:0;
    padding:14px 0;
  }

  .solar-intro .stat-number{
    font-size:2rem;
  }

  .solar-intro .stat-label{
    font-size:.66rem;
    line-height:1.35;
  }

  /* El canvas vuelve a comportarse como fondo de toda la seccion,
     no como una franja recortada. */
  #sunScene{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    overflow:hidden;
  }

  #sunScene canvas{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }

  .solar-vignette{
    background:
      radial-gradient(
        circle at 50% 37%,
        transparent 0 18%,
        rgba(6,7,10,.08) 36%,
        rgba(6,7,10,.52) 72%
      ),
      linear-gradient(
        180deg,
        rgba(6,7,10,.48),
        rgba(6,7,10,.10) 36%,
        rgba(6,7,10,.58) 70%,
        rgba(6,7,10,.85)
      );
  }

  .uv-ray-overlay{
    opacity:.25;
  }

  .uv-beam{
    width:80vw;
  }
}

@media(max-width:390px){
  .solar-content{
    padding-left:15px;
    padding-right:15px;
  }

  .solar-intro .intro-right{
    padding-top:230px !important;
  }
}