*{margin:0;padding:0;box-sizing:border-box}
:root{
  --navy:#071a2b;
  --navy2:#0d2a43;
  --blue:#153f60;
  --yellow:#f6b900;
  --yellow2:#ffc928;
  --yellow-soft:#fff8df;
  --bg:#f5f7fb;
  --surface:#ffffff;
  --surface2:#f8fafc;
  --line:#dce4eb;
  --line2:#c7d3dd;
  --text:#10202f;
  --muted:#68798a;
  --green:#20b967;
  --red:#e45b5b;
  --shadow:0 14px 40px rgba(15,37,55,.08);
  --shadow-soft:0 7px 22px rgba(15,37,55,.06);
}

html{scroll-behavior:smooth}

body{
  font-family:Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
}

a{text-decoration:none;color:inherit}
button,input,select{font:inherit}
.container{width:min(1420px,93%);margin:0 auto}


/* =========================================================
   HEADER
========================================================= */

.header{
  position:sticky;
  top:0;
  z-index:50;
  background: #FFF9E8;
  backdrop-filter:blur(14px);
  border-bottom: 1px solid #F3E3B3;
}

.header-inner{
  height:82px;
  display:grid;
  grid-template-columns:300px 1fr auto;
  align-items:center;
  gap:28px;
}

.logo{
  display:flex;
  align-items:center;
  gap:13px;
}

.logo-copy strong{
  display:block;
  color:var(--navy);
  font-size:28px;
  font-weight:900;
  letter-spacing:-1px;
}

.logo-copy small{
  display:block;
  margin-top:3px;
  color:#8f6b00;
  font-size:11px;
  font-weight:700;
}

.nav{
  display:flex;
  justify-content:center;
  gap:29px;
  font-size:14px;
}

.nav a{
  height:82px;
  display:flex;
  align-items:center;
  color:#334759;
  border-bottom:3px solid transparent;
}

.nav a:hover,
.nav a.active{
  color:var(--navy);
  border-color:var(--yellow);
}

.login{
  border:1px solid var(--navy);
  color:var(--navy);
  border-radius:25px;
  padding:10px 22px;
  font-weight:800;
  background:#fff;
}


/* =========================================================
   PATA
========================================================= */

.paw-logo{
  width:45px;
  height:49px;
  display:block;
  position:relative;
  transform:rotate(-6deg);
}

.paw-logo i{
  position:absolute;
  background:var(--yellow);
  display:block;
}

.paw-logo .toe{
  width:11px;
  height:15px;
  border-radius:60%;
}

.paw-logo .t1{
  left:3px;
  top:11px;
  transform:rotate(-28deg);
}

.paw-logo .t2{
  left:14px;
  top:1px;
  transform:rotate(-8deg);
}

.paw-logo .t3{
  left:28px;
  top:2px;
  transform:rotate(10deg);
}

.paw-logo .t4{
  left:37px;
  top:14px;
  transform:rotate(28deg);
}

.paw-logo .pad{
  width:29px;
  height:25px;
  left:10px;
  top:22px;
  border-radius:55% 55% 65% 65%;
}


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

.hero{
  background:
    radial-gradient(
      circle at 79% 20%,
      rgba(246,185,0,.18),
      transparent 18%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7f9fc 100%
    );

  border-bottom:1px solid var(--line);
  padding:58px 0 24px;
}

.hero-grid{
  display:grid;
  grid-template-columns:52% 48%;
  align-items:center;
  min-height:485px;
}

.hero-left{
  padding:0 18px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 12px;
  border-radius:999px;
  background:var(--yellow-soft);
  color:#765900;
  font-size:13px;
  font-weight:900;
  margin-bottom:17px;
}

.hero-left h1{
  max-width:730px;
  color:var(--navy);
  font-size:clamp(48px,4.7vw,72px);
  line-height:1.02;
  letter-spacing:-2.6px;
}

.hero-left h1 span{
  color:#d79f00;
}

.hero-left>p{
  max-width:720px;
  margin-top:20px;
  color:#526679;
  font-size:17px;
  line-height:1.55;
}


/* =========================================================
   BUSCAS
========================================================= */

.search{
  max-width:700px;
  min-height:62px;
  display:grid;
  grid-template-columns:54px 1fr auto;
  align-items:center;
  border:1px solid var(--line2);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}

.search-main{
  margin-top:28px;
}

.search input{
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  padding:0 10px;
  font-size:15px;
}

.search input::placeholder{
  color:#91a0ac;
}

.field-icon{
  display:grid;
  place-items:center;
  font-size:20px;
  color:#6e8090;
}

.search button{
  height:48px;
  margin-right:7px;
  border-radius:12px;
  padding:0 31px;
  font-weight:900;
  cursor:pointer;
}

.search-main button{
  border:0;
  background:var(--yellow2);
  color:var(--navy);
}

.search-secondary{
  box-shadow:none;
  background:#fbfcfe;
}

.search-secondary button{
  border:1px solid var(--navy);
  background:#fff;
  color:var(--navy);
}

.or{
  max-width:700px;
  display:flex;
  align-items:center;
  gap:15px;
  margin:13px 0;
  color:#8594a0;
  font-size:13px;
}

.or:before,
.or:after{
  content:"";
  height:1px;
  background:var(--line);
  flex:1;
}

.hero-trust{
  display:flex;
  flex-wrap:wrap;
  gap:17px;
  margin-top:20px;
  color:#5f7181;
  font-size:12px;
  font-weight:700;
}


/* =========================================================
   MASCOTE HERO
   CORRIGIDO PARA NÃO CORTAR RABO/PATAS
========================================================= */

.hero-right{
  min-height:465px;
  display:flex;
  justify-content:center;
  align-items:flex-end;

  /* segurança para não cortar o mascote */
  overflow:visible;
}

.mascot-wrap{
  position:relative;

  width:600px;
  max-width:100%;
  height:465px;

  display:flex;
  justify-content:center;
  align-items:flex-end;

  /*
   * IMPORTANTE:
   * não recortar partes transparentes do PNG.
   */
  overflow:visible;

  /*
   * cria uma margem de segurança dos lados
   * e embaixo para rabo/patas.
   */
  padding:0 28px 10px;
}

.mascot-glow{
  position:absolute;
  width:390px;
  height:390px;
  bottom:18px;
  border-radius:50%;

  background:
    radial-gradient(
      circle,
      #fff4c4 0%,
      rgba(255,246,204,.55) 42%,
      rgba(255,255,255,0) 72%
    );
}

.mascot{
  position:relative;
  z-index:2;

  /*
   * era 435px.
   * diminuímos um pouco para o PNG inteiro
   * permanecer dentro da área útil.
   */
  width:410px;

  max-width:calc(100% - 30px);
  max-height:440px;
  height:auto;

  object-fit:contain;
  object-position:center bottom;

  background:transparent;

  filter:
    drop-shadow(
      0 20px 24px rgba(30,48,63,.12)
    );
}


/* =========================================================
   BALÃO DO MASCOTE
========================================================= */

.speech{
  position:absolute;
  z-index:5;
  right:5px;
  top:55px;

  width:260px;
  padding:20px;

  border:1px solid var(--yellow);
  border-radius:21px;

  background:#fff;
  color:var(--text);

  box-shadow:var(--shadow);

  opacity:0;

  transform:
    translateX(-8px)
    translateY(5px);

  transition:.22s ease;

  pointer-events:none;
}

.speech:before{
  content:"";
  position:absolute;

  left:-15px;
  top:83px;

  width:24px;
  height:24px;

  background:#fff;

  border-left:1px solid var(--yellow);
  border-bottom:1px solid var(--yellow);

  transform:rotate(45deg);
}

.speech strong{
  font-size:16px;
  line-height:1.4;
  color:var(--navy);
}

.speech p{
  margin-top:11px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}

.speech b{
  color:#a97900;
}

.mascot-wrap:hover .speech{
  opacity:1;
  transform:translateX(0) translateY(0);
}


/* =========================================================
   FEATURES
========================================================= */

.features{
  padding:22px 0;
}

.feature-box{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow-soft);
}

.feature{
  min-height:108px;
  display:flex;
  align-items:center;
  gap:17px;
  padding:23px 27px;
  position:relative;
}

.feature:not(:last-child):after{
  content:"";
  position:absolute;
  right:0;
  top:24%;
  width:1px;
  height:52%;
  background:var(--line);
}

.feature-icon{
  min-width:45px;
  width:45px;
  height:45px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:var(--yellow-soft);
  color:#b88600;
  font-size:23px;
  font-weight:900;
}

.feature strong{
  display:block;
  color:var(--navy);
  font-size:12px;
}

.feature span{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}


/* =========================================================
   CONTEÚDO
========================================================= */

.dashboard{
  padding:2px 0 22px;
}

.dashboard-grid{
  display:grid;
  grid-template-columns:1.9fr .9fr;
  gap:20px;
}

.offers-panel,
.how{
  border:1px solid var(--line);
  border-radius:19px;
  background:linear-gradient(145deg, #FFF9E8 0%, #FFFFFF 100%);
  box-shadow:var(--shadow-soft);
}

.offers-panel{
  padding:23px;
}

.panel-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:19px;
}

.section-kicker{
  display:block;
  margin-bottom:5px;
  color:#a07800;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.2px;
}

.panel-title h2,
.how h2{
  color:var(--navy);
  font-size:19px;
}

.panel-title a{
  color:#9d7500;
  font-size:12px;
  font-weight:900;
}


/* =========================================================
   CARDS
========================================================= */

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.card{
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  padding:14px;
  transition:.18s ease;
}

.card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

.card-link{
  display:block;
}

.product-visual{
  height:145px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#f6f8fa;
  border-radius:12px;
  margin-bottom:13px;
}

.product-visual img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#fff;
  border-radius:12px;
}

.product-placeholder{
  font-size:48px;
}

.store{
  display:block;
  color:#7a8996;
  font-size:10px;
  font-weight:700;
  margin-bottom:5px;
}

.card h3{
  min-height:36px;
  color:var(--navy);
  font-size:13px;
  line-height:1.3;
}

.old-price{
  display:block;
  margin-top:8px;
  color:#9ba7b0;
  text-decoration:line-through;
}

.price{
  margin-top:4px;
  color:#bd8800;
  font-size:21px;
  font-weight:900;
}

.card-info>small{
  font-size:9px;
  color:#788792;
}

.card-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:13px 0 10px;
}

.badge{
  padding:6px 8px;
  border-radius:20px;
  font-size:8px;
  font-weight:900;
}

.badge.real{
  background:#dff7e9;
  color:#08713b;
}

.badge.bom{
  background:#fff0b6;
  color:#725200;
}

.badge.neutro{
  background:#e7edf2;
  color:#4b6172;
}

.badge.ruim{
  background:#fde3e3;
  color:#9d3030;
}

.score{
  width:51px;
  height:51px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:4px solid var(--green);
  color:var(--navy);
}

.score.bom{
  border-color:var(--yellow);
}

.score.neutro{
  border-color:#8195a4;
}

.score.ruim{
  border-color:var(--red);
}

.score b{
  font-size:16px;
}

.score small{
  font-size:7px;
  color:#7e8b95;
}

.card p{
  font-size:10px;
  line-height:1.4;
  color:#566979;
}

.history{
  display:block;
  margin-top:4px;
  color:#82909b;
  font-size:9px;
}

.card-cta{
  display:inline-block;
  margin-top:13px;
  color:#8c6900;
  font-size:10px;
  font-weight:900;
}


/* =========================================================
   COMO FUNCIONA
========================================================= */

.how{
  position:relative;

  /*
   * Mantemos hidden porque o card possui
   * cantos arredondados.
   *
   * O mascote agora fica INTEIRO dentro dele.
   */
  overflow:hidden;

  min-height:405px;

  /*
   * espaço inferior reservado ao mascote
   */
  padding:24px 25px 140px;
}

.how-content{
  position:relative;
  z-index:2;
  max-width:340px;
}

.step{
  display:grid;
  grid-template-columns:43px 1fr;
  gap:13px;
  margin-top:20px;
}

.step-num{
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--yellow-soft);
  border:1px solid var(--yellow);
  color:#936d00;
  font-weight:900;
}

.step strong{
  color:var(--navy);
  font-size:12px;
}

.step p{
  margin-top:4px;
  color:var(--muted);
  font-size:10px;
  line-height:1.4;
}


/* =========================================================
   MASCOTE COMO FUNCIONA
   CORRIGIDO
========================================================= */

.mascote-como-funciona{
  position:absolute;

  /*
   * ANTES:
   * right:-7px;
   * bottom:-5px;
   *
   * Isso colocava pedaços do PNG para fora
   * do card e o overflow:hidden os cortava.
   */

  right:18px;
  bottom:14px;

  width:190px;
  height:auto;

  /*
   * não limitar a altura artificialmente
   */
  max-height:none;

  object-fit:contain;
  object-position:center;

  background:transparent;

  pointer-events:none;
}


/* =========================================================
   SAFE
========================================================= */

.safe{
  padding-bottom:30px;
}

.safe-box{
  min-height:82px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:25px;
  padding:16px 25px;
  border:1px solid var(--line);
  border-radius:17px;
  background:linear-gradient(90deg,#fff,#fffaf0);
  box-shadow:var(--shadow-soft);
}

.safe-copy{
  display:flex;
  align-items:center;
  gap:14px;
}

.safe-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:var(--navy);
  color:var(--yellow);
  font-weight:900;
}

.safe-copy strong{
  display:block;
  color:var(--navy);
  font-size:13px;
}

.safe-copy small{
  display:block;
  margin-top:4px;
  color:var(--muted);
}

.safe-stats{
  display:flex;
  gap:34px;
}

.safe-stats span{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.safe-stats strong{
  color:var(--navy);
  font-size:13px;
}

.safe-stats small{
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
}


/* =========================================================
   EMPTY
========================================================= */

.empty-state{
  min-height:200px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  border:1px dashed var(--line2);
  border-radius:14px;
  color:var(--muted);
  text-align:center;
}

.empty-state strong{
  color:var(--navy);
}


/* =========================================================
   FOOTER
========================================================= */

.footer{
  padding:27px 0;
  background:#fff;
  border-top:1px solid var(--line);
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:#71818e;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--navy);
}

.footer-paw{
  font-size:19px;
}


/* =========================================================
   PÁGINAS INTERNAS
========================================================= */

.page-shell{
  padding:35px 0 55px;
}

.page-title{
  color:var(--navy);
  font-size:30px;
  margin-bottom:18px;
}

.page-lead{
  color:var(--muted);
  line-height:1.5;
  margin-bottom:20px;
}

.simple-panel{
  border:1px solid var(--line);
  border-radius:17px;
  background:#fff;
  box-shadow:var(--shadow-soft);
  padding:22px;
}

.simple-form{
  display:grid;
  gap:12px;
}

.simple-form label{
  display:grid;
  gap:6px;
  color:#607384;
  font-size:12px;
}

.simple-form input,
.simple-form select{
  width:100%;
  border:1px solid var(--line2);
  border-radius:12px;
  background:#fff;
  color:var(--text);
  padding:13px;
  outline:none;
}

.simple-form input:focus,
.simple-form select:focus{
  border-color:#dfad12;
}

.simple-form button,
.page-btn{
  border:0;
  border-radius:12px;
  background:var(--yellow);
  color:var(--navy);
  padding:13px 20px;
  font-weight:900;
  cursor:pointer;
  display:inline-block;
}

.simple-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:20px;
}

.notice{
  padding:12px;
  border-radius:10px;
  margin-bottom:14px;
}

.notice.ok{
  border:1px solid var(--green);
  background:#e8f8ef;
  color:#12623a;
}

.notice.error{
  border:1px solid var(--red);
  background:#fdeeee;
  color:#8d3333;
}

.history-list{
  display:grid;
  gap:8px;
  margin-top:14px;
}

.history-row{
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding:9px 0;
  font-size:12px;
}

.analysis-summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:18px 0;
  padding:16px;
  border:1px solid var(--line);
  border-radius:13px;
}

.analysis-summary.real{
  border-color:var(--green);
  background:#f3fcf7;
}

.analysis-summary.bom{
  border-color:var(--yellow);
  background:#fffaf0;
}

.analysis-summary.ruim{
  border-color:var(--red);
  background:#fff5f5;
}

.analysis-score-big{
  font-size:34px;
  font-weight:900;
  color:var(--navy);
}

.search-results-count{
  margin-top:22px;
  color:var(--muted);
  font-size:13px;
}


/* =========================================================
   RESPONSIVO
========================================================= */

@media(max-width:1120px){

  .header-inner{
    grid-template-columns:250px 1fr auto;
  }

  .nav{
    gap:17px;
    font-size:12px;
  }

  .hero-grid{
    grid-template-columns:1fr;
  }

  .hero-right{
    min-height:390px;
  }

  .dashboard-grid{
    grid-template-columns:1fr;
  }
}


@media(max-width:820px){

  .header-inner{
    grid-template-columns:1fr auto;
  }

  .nav{
    display:none;
  }

  .feature-box{
    grid-template-columns:repeat(2,1fr);
  }

  .cards{
    grid-template-columns:1fr;
  }

  .safe-box{
    grid-template-columns:1fr;
  }

  .safe-stats{
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  .footer-inner{
    flex-direction:column;
    align-items:flex-start;
  }

  .simple-grid{
    grid-template-columns:1fr;
  }
}


@media(max-width:560px){

  .logo-copy small{
    display:none;
  }

  .hero{
    padding-top:38px;
  }

  .hero-left{
    padding:0;
  }

  .hero-left h1{
    font-size:42px;
  }

  .search{
    grid-template-columns:45px 1fr;
    height:auto;
    padding-bottom:7px;
  }

  .search button{
    grid-column:1/-1;
    width:calc(100% - 14px);
    margin:0 7px;
  }

  .feature-box{
    grid-template-columns:1fr;
  }

  .feature:not(:last-child):after{
    display:none;
  }

  .hero-right{
    min-height:320px;
    overflow:visible;
  }

  .mascot-wrap{
    height:330px;
    padding:0 15px 8px;
    overflow:visible;
  }

  .mascot{
    width:290px;
    max-width:calc(100% - 20px);
    height:auto;
  }

  .speech{
    right:0;
    top:20px;
    width:215px;
  }

  .how{
    padding-bottom:130px;
  }

  .mascote-como-funciona{
    /*
     * também mantém o mascote inteiro
     * no celular.
     */
    width:150px;
    right:14px;
    bottom:12px;
  }
}