:root{
  --navy:#041f33;
  --navy-2:#072f4d;
  --cyan:#2ed2ef;
  --cyan-2:#69e5f5;
  --blue:#0879d6;
  --ink:#102333;
  --muted:#607482;
  --line:#d9e4eb;
  --white:#fff;
  --font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  width:100%;
  min-width:320px;
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-text-size-adjust:100%;
}
body{
  font-family:var(--font);
  color:var(--ink);
  background:#041f33;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,select{font:inherit}
img{display:block;max-width:100%}
a{color:inherit}

.hero{
  position:relative;
  width:100%;
  min-height:0;
  overflow:hidden;
  padding:24px 18px 26px;
  background:
    linear-gradient(90deg,rgba(2,18,31,.91) 0%,rgba(4,31,51,.85) 48%,rgba(4,35,57,.67) 100%),
    url("https://kitsolares.cl/assets/portadas/v237/portada-inicio.webp") center center/cover no-repeat,
    linear-gradient(135deg,#031827,#0879d6);
}
.overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 82% 12%,rgba(46,210,239,.11),transparent 24%),
    linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.20));
}
.page-shell{
  position:relative;
  z-index:1;
  width:min(100%,1180px);
  margin:0 auto;
}
.brand{
  width:min(330px,70vw);
}
.brand img{width:100%;height:auto}
.brand-copy{
  width:min(305px,100%);
  margin:0 0 12px;
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(430px,520px);
  gap:38px;
  align-items:start;
}

.copy{
  min-width:0;
  color:#fff;
  padding-top:8px;
}
.eyebrow{
  margin:0 0 8px;
  color:var(--cyan);
  font-size:.73rem;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.copy h1{
  margin:0;
  max-width:10.5ch;
  font-size:clamp(3.1rem,5.25vw,5.2rem);
  line-height:.96;
  letter-spacing:-.055em;
  text-wrap:balance;
}
.lead{
  margin:17px 0 0;
  max-width:54ch;
  color:rgba(255,255,255,.90);
  font-size:1.02rem;
  line-height:1.48;
}

/* Fixed stage: three cards rotate, but layout never grows or moves. */
.benefits-rotator{
  width:100%;
  max-width:690px;
  margin-top:18px;
}
.benefit-stage{
  position:relative;
  height:116px;
}
.benefit-set{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .38s ease,transform .38s ease;
}
.benefit-set.is-active{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.benefit-card{
  min-width:0;
  min-height:106px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px;
  border:1px solid rgba(46,210,239,.28);
  border-radius:14px;
  background:rgba(2,28,47,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.benefit-card img{
  width:42px;
  height:42px;
  flex:0 0 42px;
  object-fit:contain;
}
.benefit-card strong,
.benefit-card span{display:block}
.benefit-card strong{
  color:#fff;
  font-size:.72rem;
  line-height:1.17;
}
.benefit-card span{
  margin-top:3px;
  color:rgba(255,255,255,.67);
  font-size:.61rem;
  line-height:1.25;
}
.benefit-dots{
  display:flex;
  gap:6px;
  margin-top:8px;
}
.benefit-dot{
  width:8px;
  height:8px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.27);
  cursor:pointer;
  transition:.2s ease;
}
.benefit-dot.is-active{
  width:23px;
  border-radius:999px;
  background:var(--cyan);
}

.form-card{
  width:100%;
  min-width:0;
  padding:21px;
  border-radius:20px;
  background:#fff;
  box-shadow:0 22px 62px rgba(0,0,0,.30);
}
.form-head{
  margin-bottom:15px;
  text-align:center;
}
.form-head>span{
  color:var(--blue);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.form-head h2{
  margin:3px 0 4px;
  font-size:1.55rem;
  line-height:1.05;
  letter-spacing:-.035em;
}
.form-head p{
  margin:0;
  color:var(--muted);
  font-size:.79rem;
}
#leadForm{
  display:grid;
  gap:11px;
  width:100%;
}
.field,.group{
  display:grid;
  gap:6px;
  width:100%;
  min-width:0;
}
.field>span,.field-label{
  color:#314758;
  font-size:.76rem;
  font-weight:800;
}
.field input,.field select,.affix{
  width:100%;
  min-width:0;
  min-height:48px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
  color:var(--ink);
  outline:none;
}
.field input,.field select{
  padding:0 12px;
  font-size:16px;
}
.field input::placeholder{color:#9aa9b5}
.field input:focus,.field select:focus,.affix:focus-within{
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(46,210,239,.14);
}
.segmented{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px;
  padding:4px;
  border-radius:11px;
  background:#edf3f7;
}
.segmented label{position:relative;min-width:0;cursor:pointer}
.segmented input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.segmented span{
  min-height:39px;
  display:grid;
  place-items:center;
  padding:6px 7px;
  border-radius:8px;
  color:#536877;
  font-size:.78rem;
  font-weight:800;
  text-align:center;
}
.segmented input:checked+span{
  color:var(--blue);
  background:#fff;
  box-shadow:0 2px 7px rgba(18,59,86,.10);
}
.affix{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  overflow:hidden;
  padding-left:12px;
}
.affix input{
  width:100%;
  min-width:0;
  min-height:46px;
  padding:0 7px;
  border:0;
  outline:0;
  font-size:16px;
  box-shadow:none!important;
}
.affix>span{
  color:#60717d;
  font-size:.74rem;
  font-weight:800;
}
.affix>span:last-child{padding-right:11px}
.two{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.privacy{
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  gap:8px;
  align-items:start;
}
.privacy input{
  width:17px;
  height:17px;
  margin:2px 0 0;
  accent-color:var(--blue);
}
.privacy span{
  min-width:0;
  color:#667784;
  font-size:.66rem;
  line-height:1.35;
}
.privacy a{color:var(--blue);font-weight:800}
.submit-btn{
  width:100%;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:0 14px;
  border:0;
  border-radius:12px;
  color:#032339;
  background:linear-gradient(135deg,var(--cyan),var(--cyan-2));
  font-size:.98rem;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 11px 25px rgba(10,166,198,.22);
}
.submit-btn:hover{filter:saturate(1.08);transform:translateY(-1px)}
.submit-btn:disabled{opacity:.62;cursor:wait;transform:none}
.form-status{
  display:none;
  padding:9px 10px;
  border-radius:9px;
  font-size:.72rem;
  line-height:1.3;
}
.form-status.is-visible{display:block}
.form-status.success{color:#086b4e;background:#ecfdf3}
.form-status.error{color:#a32d25;background:#fff2f0}

.legal-note{
  margin:14px auto 0;
  max-width:80ch;
  text-align:center;
  color:rgba(255,255,255,.52);
  font-size:.53rem;
  line-height:1.3;
}


.noscript{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:50;
  padding:14px;
  border-radius:12px;
  color:#032339;
  background:var(--cyan);
  text-align:center;
  text-decoration:none;
  font-weight:900;
}

@media(max-width:899px){
  .hero{
    overflow:visible;
    padding:14px 10px 20px;
    background:
      linear-gradient(180deg,rgba(2,18,31,.93) 0%,rgba(3,31,51,.92) 48%,rgba(4,35,57,.96) 100%),
      url("https://kitsolares.cl/assets/portadas/v237/portada-inicio.webp") 52% top/auto 390px no-repeat,
      linear-gradient(135deg,#031827,#0879d6);
  }
  .brand{
    width:min(225px,64vw);
    margin:0 auto 8px;
  }
  .brand-copy{
    margin:0 auto 8px;
  }
  .hero-grid{
    display:block;
  }
  .copy{
    width:100%;
    max-width:580px;
    margin:0 auto;
    padding:0;
    text-align:center;
  }
  .eyebrow{
    margin-bottom:5px;
    font-size:.59rem;
  }
  .copy h1{
    margin:0 auto;
    max-width:12ch;
    font-size:clamp(1.95rem,10vw,2.95rem);
    line-height:.99;
  }
  .lead{
    margin:8px auto 0;
    max-width:39ch;
    font-size:.84rem;
    line-height:1.36;
  }
  .benefits-rotator{
    width:100%;
    max-width:560px;
    margin:11px auto 0;
  }
  .benefit-stage{
    height:218px;
  }
  .benefit-set{
    grid-template-columns:1fr;
    gap:6px;
  }
  .benefit-card{
    min-height:68px;
    padding:8px 10px;
    border-radius:12px;
  }
  .benefit-card img{
    width:34px;
    height:34px;
    flex-basis:34px;
  }
  .benefit-card strong{font-size:.70rem}
  .benefit-card span{font-size:.60rem}
  .benefit-dots{
    justify-content:center;
    margin-top:7px;
  }
  .form-card{
    width:min(100%,560px);
    margin:14px auto 0;
    padding:14px 12px;
    border-radius:16px;
  }
  .form-head{margin-bottom:11px}
  .form-head h2{font-size:1.34rem}
  .form-head p{font-size:.73rem}
  #leadForm{gap:10px}
  .two{grid-template-columns:1fr}
  .field input,.field select,.affix{min-height:48px}
  .segmented span{min-height:38px;font-size:.76rem}
  .privacy span{font-size:.63rem}
  .submit-btn{min-height:51px}
  .legal-note{font-size:.49rem;margin-top:9px}
}

@media(max-width:360px){
  .benefit-stage{height:228px}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}


.form-note{
  margin:2px 0 2px;
  padding:10px 12px;
  border:1px solid rgba(46,210,239,.16);
  border-radius:11px;
  background:#f3fbfe;
  color:#4b6474;
  font-size:.68rem;
  line-height:1.4;
}

.wa-badge{
  width:24px;
  height:24px;
  display:inline-grid;
  place-items:center;
  color:#0b6f56;
}



@media(min-width:900px){
  .brand-copy{
    margin:0 0 12px 0;
  }
}


/* V13 — footer / viewport / slider controls */
html, body{
  min-height:100%;
}
body{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:#041f33;
}
main{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
}
.hero{
  flex:1 0 auto;
}

/* Compact footer: no big block below it */
footer{
  flex:0 0 auto;
  min-height:32px;
  margin:0;
  padding:7px 12px calc(7px + env(safe-area-inset-bottom));
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:4px 10px;
  background:#031827;
  border:0;
  color:rgba(255,255,255,.66);
  font-size:.59rem;
  line-height:1.2;
}
footer strong{
  color:#fff;
  font-size:.60rem;
}
footer span{
  color:rgba(255,255,255,.66);
}

/* Manual carousel navigation */
.benefit-nav{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
}
.benefit-dots{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
}
.benefit-arrow{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(46,210,239,.30);
  border-radius:50%;
  color:#dffaff;
  background:rgba(2,28,47,.62);
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.benefit-arrow:hover{
  background:rgba(46,210,239,.14);
  border-color:rgba(46,210,239,.60);
  transform:translateY(-1px);
}
.benefit-arrow:active{
  transform:scale(.96);
}

/* Mobile: keep footer tiny and make carousel controls easy to tap */
@media(max-width:899px){
  body{
    min-height:100dvh;
  }
  main{
    flex:0 0 auto;
  }
  .hero{
    flex:0 0 auto;
  }
  .benefit-nav{
    justify-content:center;
    gap:10px;
    margin-top:7px;
  }
  .benefit-arrow{
    width:36px;
    height:36px;
    flex-basis:36px;
  }
  .benefit-dot{
    width:9px;
    height:9px;
  }
  .benefit-dot.is-active{
    width:24px;
  }
  footer{
    min-height:30px;
    padding:7px 10px calc(7px + env(safe-area-inset-bottom));
    gap:3px 8px;
    font-size:.56rem;
  }
  footer strong{
    font-size:.57rem;
  }
}

@media(max-width:480px){
  footer{
    flex-direction:column;
    gap:2px;
    text-align:center;
  }
}


/* Variante campaña */

.is-hidden{display:none!important}
#hero-title{max-width:12ch}
@media(max-width:899px){
  #hero-title{font-size:clamp(1.8rem,8.7vw,2.75rem)}
}