/** Shopify CDN: Minification failed

Line 294:0 Unexpected "}"
Line 389:2 Unexpected "}"
Line 440:0 Unexpected "}"

**/
/* ==========================================================
   V-HYDRA VS ISOTÔNICOS
========================================================== */

:root{

  --vhi-purple:#655DC6;
  --vhi-black:#101820;
  --vhi-text:#5F6368;
  --vhi-bg:#ffffff;

}

/* ==========================================================
   BASE
========================================================== */

.vhi{

  background:var(--vhi-bg);
  overflow:hidden;

}

.vhi *{

  box-sizing:border-box;

}

.vhi img{

  display:block;
  width:100%;
  height:auto;

}

.vhi-container{

  width:min(1380px,94%);
  margin:auto;

}

/* ==========================================================
   HERO
========================================================== */

.vhi-hero{

  padding:70px 0 90px;

}

.vhi-hero__grid{

  display:grid;

  grid-template-columns:minmax(420px,560px) minmax(480px,620px);

  justify-content:space-between;

  align-items:center;

  gap:120px;

}

.vhi-hero__content{

  max-width:500px;

}

.vhi-eyebrow{

  display:block;

  margin-bottom:26px;

  color:var(--vhi-purple);

  font-size:14px;

  font-weight:800;

  letter-spacing:.22em;

  text-transform:uppercase;

}

.vhi-hero__title{

  margin:0;

  display:flex;

  flex-direction:column;

  font-size:clamp(62px,6vw,92px);

  font-weight:900;

  line-height:.92;

  letter-spacing:-.05em;

  color:var(--vhi-black);

}

.vhi-hero__title .is-purple{

  color:var(--vhi-purple);

}

.vhi-hero__text{

  margin-top:42px;

  max-width:470px;

  color:var(--vhi-text);

  font-size:22px;

  line-height:1.7;

}

.vhi-hero__media{

  position:relative;

  display:flex;

  justify-content:flex-end;

  align-items:center;

}

.vhi-hero__glow{

  position:absolute;

  left:50%;
  top:50%;

  width:520px;
  height:520px;

  transform:translate(-50%,-50%);

  background:var(--vhi-purple);

  opacity:.18;

  border-radius:50%;

  filter:blur(120px);

}

.vhi-hero__media img{

  position:relative;

  z-index:2;

  width:auto;

  max-width:100%;

  max-height:720px;

  object-fit:contain;

  border-radius:34px;

  box-shadow:
      0 40px 90px rgba(0,0,0,.12);

}

.vhi-scroll{

  display:flex;

  justify-content:center;

  margin-top:70px;

}

.vhi-scroll span{

  width:2px;

  height:80px;

  border-radius:999px;

  background:linear-gradient(
      transparent,
      var(--vhi-purple)
  );

  animation:vhiScroll 2.2s infinite;

}

@keyframes vhiScroll{

  0%{

    transform:translateY(0);

    opacity:.2;

  }

  50%{

    transform:translateY(14px);

    opacity:1;

  }

  100%{

    transform:translateY(0);

    opacity:.2;

  }

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px){

  .vhi-hero{

    padding:60px 0;

  }

  .vhi-hero__grid{

    grid-template-columns:1fr;

    gap:40px;

  }

  .vhi-hero__media{

    order:-1;

  }

  .vhi-hero__title{

    font-size:clamp(46px,11vw,64px);

  }

  font-size:24px;
font-weight:500;

  }

  .vhi-scroll{

    margin-top:40px;

  }

}


/* ==========================================================
   STORY 01
========================================================== */

.vhi-story{

  padding:180px 0;

}

.vhi-story .vhi-container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8rem;
    align-items:center;
}

.vhi-story--reverse .vhi-container{
    direction:rtl;
}

.vhi-story--reverse .vhi-container > *{
    direction:ltr;
}

.vhi-story__title{

  margin:28px 0 42px;

  display:flex;

  flex-direction:column;

  font-size:clamp(56px,5vw,82px);

  font-weight:900;

  line-height:.95;

  letter-spacing:-.05em;

  color:var(--vhi-black);

}

.vhi-story__title .is-purple{

  color:var(--vhi-purple);

}

.vhi-story__text{

  max-width:760px;

}

.vhi-story__text p{

  margin:0 0 28px;

  color:var(--vhi-text);

  font-size:24px;

  line-height:1.8;

}

.vhi-story__image{

  margin-top:90px;

}

.vhi-story__image img{

  width:100%;

  display:block;

  border-radius:34px;

}

@media (max-width:768px){

  .vhi-story{
    padding:90px 0 40px;
}
}

  }

  .vhi-story__title{

    font-size:clamp(42px,10vw,58px);

  }

  .vhi-story__text p{

    font-size:20px;

    line-height:1.7;

  }

  .vhi-story__image{

    margin-top:50px;

  }

  .vhi-story .vhi-container,
.vhi-story--reverse .vhi-container{
    display:flex;
    flex-direction:column;
    gap:2.5rem;
}

.vhi-story--reverse .vhi-container{
    direction:ltr;
}

.vhi-story__content{
    width:100%;
    max-width:100%;
    order:1;
}

.vhi-story__image{
    width:100%;
    max-width:100%;
    order:2;
    margin-top:20px;
}

.vhi-story__image img{
    width:100%;
    display:block;
}

}
/* ==========================================================
   COMPARATIVO
========================================================== */

.vhi-compare{
    padding:20px 0 60px;
    background:#fff;
}

.vhi-compare__title{
    margin:28px 0 60px;
    display:flex;
    flex-direction:column;
    font-size:clamp(56px,5vw,82px);
    font-weight:900;
    line-height:.95;
    letter-spacing:-.05em;
    color:var(--vhi-black);
}

.vhi-compare__title .is-purple{
    color:var(--vhi-purple);
}

.vhi-compare-layout{
    display:flex;
    flex-direction:column;
    gap:20px;
    margin-top:0;
}

.vhi-compare-image{
    display:flex;
    justify-content:center;
    margin-bottom:-360px;
}

.vhi-compare-image img{
    width:100%;
    max-width:520px;
    height:auto;
    display:block;
    transform: translateY(-140px);
}

.vhi-compare-table{
    overflow-x:auto;
}

.vhi-compare-table table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.06);
}

.vhi-compare-table th{
    padding:24px;
    font-size:18px;
    font-weight:800;
    border-bottom:1px solid #ececec;
}

.vhi-compare-table th:first-child,
.vhi-compare-table td:first-child{
    text-align:left;
}

.vhi-compare-table td{
    padding:22px 24px;
    border-bottom:1px solid #efefef;
    text-align:center;
    font-size:17px;
}

.vhi-compare-table td:first-child{
    font-weight:700;
    color:#101820;
}

.winner{
    color:#655DC6;
    font-weight:800;
}

.vhi-compare-table tr:last-child td{
    border-bottom:none;
}

@media (max-width:768px){

    .vhi-compare{
        padding:20px 0 60px;
    }

    .vhi-compare__title{
        font-size:clamp(42px,10vw,58px);
        margin-bottom:40px;
    }

    .vhi-compare-layout{
        gap:30px;
    }

    .vhi-compare-table table{
    width:100%;
    min-width:0;
    table-layout:fixed;
}

.vhi-compare-table th,
.vhi-compare-table td{
    padding:14px 8px;
    font-size:14px;
}

.vhi-compare-table td:first-child,
.vhi-compare-table th:first-child{
    width:42%;
}

} 





.vhi-compare-table th:first-child{
    text-align:left;
}

.vhi-compare-table td{
    padding:22px 28px;
    border-bottom:1px solid #efefef;
    font-size:18px;
}

.vhi-compare-table td:first-child{
    font-weight:700;
    color:#101820;
}

.vhi-compare-table td:nth-child(2),
.vhi-compare-table td:nth-child(3){
    text-align:center;
}

.winner{
    color:#655DC6;
    font-weight:800;
}

.vhi-compare-table tr:last-child td{
    border-bottom:none;
}

@media(max-width:989px){

    .vhi-compare-layout{
        grid-template-columns:1fr;
        gap:40px;
    }

    .vhi-compare-image{
        order:-1;
    }

    .vhi-compare-table{
        overflow-x:auto;
    }

    .vhi-compare-table table{
        min-width:620px;
    }

}

/* ===== TABELA MOBILE ===== */

.vhi-compare-mobile{
    display:none;
}

@media (max-width:768px){

    .vhi-compare-table table{
        display:none;
    }

    .vhi-compare-mobile{
        display:flex;
        flex-direction:column;
        gap:14px;
        margin-top:20px;
    }

    .vhi-row{
        display:grid;
        grid-template-columns:1.4fr 1fr 1fr;
        align-items:center;
        padding:16px 0;
        border-bottom:1px solid #ECECEC;
        column-gap:12px;
    }

    .vhi-row strong{
    background:#F5F2FF;
    color:#655DC6;
    border-radius:12px;
    padding:10px 8px;
    display:block;
    font-weight:800;
}

    .vhi-row span:first-child{
        font-weight:700;
        color:#101820;
        text-align:left;
    }

    .vhi-row strong{
        color:#655DC6;
        font-weight:800;
        text-align:center;
    }

    .vhi-row span:last-child{
    text-align:center;
    color:#6B7280;
}

}
.vhi-row--head{
    padding-bottom:22px;
    border-bottom:2px solid #ECECEC;
}

.vhi-row--head strong{
    color:#101820;
    font-size:18px;
}

.vhi-row--head span:last-child{
    font-weight:700;
}
.vhi-mobile-header{
    display:none;
}

@media (max-width:768px){

    .vhi-mobile-header{

    display:grid;

    grid-template-columns:42% 29% 29%;

    align-items:center;

    padding:0 0 18px;

    margin-bottom:6px;

    border-bottom:2px solid #ECECEC;

}

    .vhi-mobile-header span{

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    font-weight:800;

    color:#101820;

    font-size:16px;

}

.vhi-mobile-header span:nth-child(2){

    color:#101820;

    opacity:.75;

    transform:translateX(10px);

}

.vhi-mobile-header span:nth-child(3){
    color:#655DC6;
    font-size:18px;
    font-weight:900;
}

    .vhi-mobile-header span:first-child{

    justify-content:flex-start;

}

}
/* ==========================================================
   DIVISOR DO COMPARATIVO
========================================================== */

.vhd-divider{
    padding:0 0 28px;
}

.vhd-divider__container{
    max-width:1200px;
    margin:0 auto;
    padding:0 40px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:28px;
}

.vhd-divider__line{
    flex:1;
    height:1px;
    background:rgba(101,93,198,.18);
}

.vhd-divider__title{
    flex-shrink:0;

    color:#655DC6;
    font-size:14px;
    font-weight:800;
    letter-spacing:.35em;
    text-transform:uppercase;
    white-space:nowrap;
}

@media (max-width:768px){

    .vhd-divider{
        padding:0 0 20px;
    }

    .vhd-divider__container{
        padding:0 24px;
        gap:18px;
    }

    .vhd-divider__title{
        font-size:12px;
        letter-spacing:.28em;
    }

}
/* ==========================================================
   DESKTOP POLISH
   NÃO ALTERA O MOBILE
========================================================== */

@media screen and (min-width:1024px){

    /* Container */

    .vhi-container{
        width:min(1260px,90%);
    }

    /* Hero */

    .vhi-hero__grid{
        grid-template-columns:minmax(420px,520px) minmax(420px,540px);
        gap:80px;
    }

    .vhi-hero__content{
        max-width:500px;
    }

    .vhi-hero__title{
        font-size:clamp(54px,5vw,74px);
    }

    .vhi-hero__text{
        font-size:20px;
        max-width:560px;
    }

    .vhi-hero__media img{
        max-height:600px;
    }

    /* Story */

    .vhi-story{
        padding:120px 0;
    }

    .vhi-story .vhi-container{
        gap:5rem;
    }

    .vhi-story__title{
        font-size:clamp(46px,4vw,64px);
    }

    .vhi-story__text p{
        font-size:20px;
        line-height:1.75;
    }

    .vhi-story__image{
        margin-top:60px;
        max-width:520px;
    }

    .vhi-story__image img{
        border-radius:28px;
    }

    /* Comparativo */

    .vhi-compare{
        padding:80px 0;
    }

    .vhi-compare-layout{
        gap:0;
    }

    .vhi-compare-image{
        margin-bottom:-240px;
    }

    .vhi-compare-image img{
        max-width:420px;
        transform:translateY(-90px);
    }

    .vhi-compare-table table{
        max-width:1080px;
        margin:0 auto;
    }

    .vhi-compare-table th{
        padding:18px 20px;
        font-size:17px;
    }

    .vhi-compare-table td{
        padding:16px 20px;
        font-size:16px;
    }

}