/* =========================================================
   CLEAR VISION - folha de estilo

   ONDE MEXER:
     1. VARIAVEIS      -> cores do site
     2. BASE           -> reset e fonte
     3. CELULAR        -> medidas tiradas do print mobile  (ate 599px)
     4. TABLET RETRATO -> 600 a 899px
     5. TABLET PAISAGEM-> 900 a 1079px  (vira duas colunas)
     6. PC             -> medidas tiradas do print desktop (1080px +)
     7. POPUP          -> aviso de cookies

   AVISO: os blocos CELULAR e PC batem pixel a pixel com os prints.
   Mudar tamanho de fonte, line-height ou largura ali desalinha o
   resultado. Ajustes livres: blocos 4 e 5 (tablet).
   ========================================================= */


/* ============ 1. VARIAVEIS ============ */
:root{
  --navy:#001E29;      /* fundo escuro do hero            */
  --ouro:#FFC000;      /* 'Tree of Life Herb'             */
  --azul:#1C4577;      /* titulo do card                  */
  --fundo:#D5DCE6;     /* fundo cinza-azulado da pagina   */
}


/* ============ 2. BASE ============ */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--fundo);
  font-family:'Montserrat',Arial,Helvetica,sans-serif;
  color:#000;
}
img{max-width:100%}


/* ============ 3. CELULAR (base) ============ */

/* ---- hero ---- */
.hero{
  background:#00253F;          /* no celular o print mostra o fundo chapado */
  overflow:hidden;
  padding:39px 0 0;
}
.hero-inner{
  position:relative;
  max-width:395px;
  margin:0 auto;
  padding:0 12px;
}
.olho{
  font-size:22px;
  line-height:28px;
  color:#fff;
}
h1{
  font-size:49px;
  line-height:63px;
  font-weight:400;
  color:#fff;
  margin-top:-2px;
}
.ouro{color:var(--ouro)}
.sub{
  font-size:18px;
  line-height:35px;
  font-weight:700;
  color:#fff;
  margin-top:22px;
}
.doutor{
  display:block;
  width:157px;
  margin:38px auto -19px;    /* o -19px corta o medico na base do hero */
}

/* ---- card branco ---- */
.card{
  background:#fff;
  width:calc(100% - 24px);
  max-width:371px;
  margin:0 auto;
  padding:29px 14px 40px;
}
h2{
  font-size:21px;
  line-height:27px;
  font-weight:700;
  color:var(--azul);
  text-align:center;
}
h2 em{font-style:italic}

.logos{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  margin-top:28px;
}
.logos img{width:100px;height:auto}

.colunas{margin-top:30px}
.laser{
  display:block;
  width:100%;
  height:auto;
  margin-bottom:26px;
}
.texto p{
  font-size:18px;
  line-height:24px;
}
.texto p + p{margin-top:20px}


/* ============ 4. TABLET RETRATO (600 a 899) ============ */
@media (min-width:600px){
  .hero{padding-top:44px}
  .hero-inner{max-width:760px;padding:0 30px}
  .olho{font-size:21px;line-height:28px}
  h1{font-size:44px;line-height:57px}
  .sub{font-size:20px;line-height:32px;margin-top:26px}
  .doutor{width:230px;margin:40px auto -28px}

  .card{max-width:760px;padding:44px 40px 56px}
  h2{font-size:25px;line-height:31px}
  .logos{gap:60px;margin-top:34px}
  .logos img{width:150px}
  .colunas{margin-top:38px}
  .laser{max-width:480px;margin:0 auto 30px}
  .texto p{font-size:20px;line-height:26px}
  .texto p + p{margin-top:23px}
}


/* ============ 5. TABLET PAISAGEM (900 a 1079) ============ */
@media (min-width:900px){
  .hero{
    padding-top:48px;
    /* a camada de cima escurece a foto em 65% - foi assim que o
       print do PC ficou identico ao original                     */
    background:
      linear-gradient(rgba(0,30,41,.65),rgba(0,30,41,.65)),
      url(../img/bg1.jpg) center center / cover no-repeat,
      var(--navy);
  }
  .hero-inner{max-width:900px;padding:0 32px}
  .hero-texto{max-width:600px}
  .doutor{
    position:absolute;
    right:24px;
    bottom:-30px;
    width:230px;
    margin:0;
  }

  .card{max-width:900px;padding:46px 50px 56px}
  h2{font-size:26px;line-height:28px}
  .logos{gap:80px;margin-top:30px}
  .logos img{width:170px}
  .colunas{
    display:flex;
    align-items:flex-start;
    gap:26px;
    margin-top:34px;
  }
  .laser{
    flex:0 0 380px;
    width:380px;
    margin:0;
  }
  .texto{flex:1;min-width:0}
  .texto p{font-size:19px;line-height:22px}
  .texto p + p{margin-top:22px}
}


/* ============ 6. PC (1080px +) ============ */
@media (min-width:1080px){
  .hero{
    height:387px;
    padding:52px 0 0;
    /* ordem: escurecimento, foto, cor de base */
    background-position:center center, center -35px, 0 0;
  }
  .hero-inner{
    max-width:1026px;
    height:335px;
    padding:0;
  }
  .hero-texto{max-width:700px}
  .olho{font-size:20px;line-height:26px}
  h1{font-size:44px;line-height:57px;margin-top:-2px}
  .sub{font-size:20px;line-height:32px;margin-top:17px}
  .doutor{
    position:absolute;
    right:50px;
    top:11px;
    bottom:auto;
    width:280px;
  }

  .card{max-width:1026px;padding:43px 60px 60px}
  h2{font-size:27px;line-height:27px}
  .logos{gap:106px;margin-top:19px}
  .logos img{width:188px}
  .colunas{gap:27px;margin-top:32px}
  .laser{flex:0 0 438px;width:438px;max-width:none;margin:0}
  .texto p{font-size:19.85px;line-height:20.5px}
  .texto p + p{margin-top:23px}
}


/* ============ 7. POPUP DE COOKIES ============ */
body.travado{overflow:hidden}       /* trava o scroll com o popup aberto */

.popup{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,20,30,.5);      /* escurecimento do fundo */
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);        /* o blur da pagina atras */
}
.popup[hidden]{display:none}

.popup-box{
  position:relative;
  width:100%;
  max-width:600px;
  background:#fff;
  border-radius:28px;
  padding:38px 34px 34px;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.popup-box h3{
  font-size:34px;
  line-height:1.15;
  font-weight:700;
  color:#0D1226;
}
.popup-box p{
  font-size:19px;
  line-height:1.45;
  margin-top:16px;
  color:#1C2030;
}
.popup-botoes{
  display:flex;
  gap:14px;
  margin-top:26px;
}
.popup-botoes button{
  flex:1;
  padding:18px 20px;
  border:0;
  border-radius:16px;
  font:700 21px/1 'Montserrat',Arial,sans-serif;
  cursor:pointer;
}
.btn-aceitar{background:#1B1C33;color:#fff}
.btn-rejeitar{background:#EFF1F5;color:#0D1226}

@media (max-width:559px){
  .popup-box{padding:32px 22px 26px;border-radius:22px}
  .popup-box h3{font-size:26px}
  .popup-box p{font-size:17px}
  .popup-botoes{gap:10px}
  .popup-botoes button{font-size:17px;padding:16px 10px}
}