:root{
  --maxw: 1366px;
  --radius: 18px;
  --blue-700: #004f7a;
  --blue-600: #04679e;
  --blue-500: #0b8dc8;
  --teal-500: #0ea6a6;
  --bg-100: #f6fbfd;
  --ink: #0e1a22;
  --muted: #5b6b76;
  --white: #fff;
  --font-base: Inter;
  --font-head: Poppins;
  --font-size: 16px;
  --header-overlay: url('../img/BannerShopee.jpg');
  --header-text-size: 18px;
  --header-text-weight: 600;
  --header-text-color: #ffffff;
}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font:var(--font-size)/1.5 var(--font-base), system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#fff}
.container{margin-inline:auto;width:100%;max-width:var(--maxw);padding:clamp(16px,2vw,28px)}
.band{width:100%}
.band-header{
  position:relative;color:var(--white);
  background-image:linear-gradient(180deg,var(--blue-600) 0%,var(--blue-500) 60%,var(--teal-500) 100%);
  overflow:hidden;padding:24px 0 12px;
}
.band-header-overlay {
  position: absolute;
  inset: 0;
  background-image: var(--header-overlay);
  background-repeat: no-repeat;
  background-position: center center; /* centraliza */
  background-size: auto;              /* mantém tamanho original do PNG */
  opacity: 1;                         /* 100% visível */
  pointer-events: none;
  z-index: 1;                         /* acima do gradiente */
}

.site-top{position:relative;z-index:1}
.header-grid{position:relative;display:grid;grid-template-columns:30% 70%;align-items:center;gap:24px}
.header-left .logo{height:54px;border-radius:8px}
.header-tagline{margin:0;font-size:var(--header-text-size);font-weight:var(--header-text-weight);color:var(--header-text-color)}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.band-menu{background-image:linear-gradient(180deg,var(--blue-700),var(--blue-600));color:#fff;border-bottom:2px solid rgba(255,255,255,.15)}
.nav{display:flex;justify-content:flex-end;gap:22px;list-style:none;padding:0;margin:0}
.nav a{color:#fff;text-decoration:none;padding:12px 10px;display:block;font-weight:600}
.nav a:hover{opacity:.85}
.section-intro{padding-block:clamp(24px,6vw,60px)}
.intro-wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.intro-media img{width:100%;border-radius:var(--radius)}
.intro-copy h2{margin:0 0 .4rem;font-size:clamp(1.4rem,3vw,2rem);font-family: var(--font-head), var(--font-base), system-ui}
.intro-copy p{color:var(--muted);margin:0 0 1rem}
.btn{background:var(--blue-600);color:#fff;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:700}
.btn:hover{filter:brightness(.95)}
.btn-light{background:#fff;color:var(--blue-700)}
.band-light{background:var(--bg-100)}
.section-title{font-size:clamp(1.6rem,3.1vw,2.2rem);margin:4px 0 14px;font-weight:900;font-family: var(--font-head), var(--font-base), system-ui}
.carousel{position:relative}
.car-btn{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(0,0,0,.35);color:#fff;width:40px;height:48px;border-radius:10px;cursor:pointer;z-index:2}
.car-btn.prev{left:-6px}.car-btn.next{right:-6px}
.car-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*16px)/4);gap:16px;overflow:auto hidden;scroll-snap-type:x mandatory;padding:6px 6px 18px}

/* cart */

/* PRODUCT CARD — ajustes pedidos */



/* sem moldura/alpha, sem corte, altura extra para caber nome+preço */
.product-card{
  position: relative;
  height: 430px;            /* 400px da caixa inclinada + texto */
  background: transparent;  /* remove o fundo "alpha" */
  border-radius: 0;         /* sem moldura arredondada */
  overflow: visible;        /* não cortar a caixa inclinada */
  box-shadow: none;         /* garante sem sombra externa */
}
/* caixa inclinada: 400px de altura, toda visível, sem sombra */
.pc-bg{
  position: absolute;
  inset: auto 0 0 0;
  height: 400px;
  background: url('../img/fundoB_produtos.png') bottom center / contain no-repeat;
  filter: none;             /* remove a sombra */
}
/* imagem do produto: 200x350, centralizada, 15px “para cima” dentro da caixa */
.pc-img{
  position: absolute;
  left: 50%;
  top: 15px;                /* 15px para cima */
  width: 200px;
  height: 350px;
  max-height: none;         /* sobrepõe o valor anterior */
  object-fit: contain;
  transform: translateX(-50%);
}
/* bloco de info logo abaixo da imagem (5px) */
.pc-info{
  position: absolute;
  top: 370px;               /* 350px da imagem + ~5px gap + 15px top */
  bottom: auto;
  left: 16px;
  right: 16px;
  color: #fff;
}
.pc-info h3{
  margin: 5px 0 6px;        /* 5px abaixo da imagem */
  font-size: 1rem;
  line-height: 1.2;
}
/* linha de preço: "de" (1º preço) e "por" (2º preço) */
/* cobre WooCommerce (<del>/<ins>) e seu fallback (.from/.for) */
.price{ margin: 0; }
.price del,
.price .from{
  opacity: .6;              /* 60% alpha no 1º preço (de) */
  margin-right: 8px;
}
.price ins,
.price .for strong{
  font-size: 120%;          /* 20% maior para o preço real (por) */
  font-weight: 700;
  text-decoration: none;
}



.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;list-style:none;padding:18px 0 0;margin:0}
.benefits li{text-align:center;background:#fff;padding:18px;border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.benefits img{height:40px;margin-bottom:8px}
.band-cta{background-image:linear-gradient(90deg,var(--blue-600) 0%,var(--teal-500) 100%);color:#fff}
.cta-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center}
.cta-media img{width:100%;border-radius:var(--radius)}
.cta-copy p{opacity:.95}
.band-footer{background-image:linear-gradient(180deg,var(--blue-700),#052c44);color:#eaf6ff}
.footer-grid{display:grid;grid-template-columns:1.2fr .9fr .9fr;gap:22px;align-items:start}
.logo-footer{height:36px;margin-bottom:8px}
.footer-social .social{display:flex;gap:12px;list-style:none;padding:0;margin:8px 0 0}
/* Hamburger */
.hamburger{display:none;background:transparent;border:0;width:44px;height:44px;border-radius:8px;margin-right:8px}
.hamburger span{display:block;height:3px;margin:6px 8px;background:#fff;border-radius:3px;transition:.2s}
@media (max-width:1200px){
  .car-track{grid-auto-columns:calc((100% - 2*16px)/3)}
  .intro-wrap,.cta-wrap{grid-template-columns:1fr}
}
@media (max-width:900px){
  .header-grid{grid-template-columns:1fr}
  .header-left{justify-self:center}
  .header-right{text-align:center}
}
@media (max-width:780px){
  .nav{justify-content:center;flex-wrap:wrap}
  .car-track{grid-auto-columns:calc((100% - 16px)/2)}
  .benefits{grid-template-columns:1fr;gap:12px}
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .car-track{grid-auto-columns:100%}
  .car-btn{display:none}
  .hamburger{display:inline-flex;align-items:center;justify-content:center}
  .nav{display:none;flex-direction:column;gap:0}
  .nav.is-open{display:flex}
  .nav a{padding:12px 0;border-top:1px solid rgba(255,255,255,.12)}
}

/* === Product image: 400x300, centered, soft shadow underneath === */
.product-card .pc-img{
  width: 400px;
  height: 300px;           /* 400×300 */
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.25)); /* small shadow below */
  z-index: 2;
}

/* Keep the tilted box as background layer */
.product-card .pc-bg{
  z-index: 1;
}

/* Text block INSIDE the tilted box */
.product-card .pc-info{
  position: absolute;
  top: 330px;              /* 20px (top) + 300px (img) + ~10px gap */
  left: 24px;              /* move inside the tilted box edges */
  right: 24px;
  bottom: auto;
  color: #fff;
  z-index: 2;              /* above the background */
}

/* Product name just below the image (5px down) */
.product-card .pc-info h3{
  margin: 5px 0 6px;
  line-height: 1.2;
}