/* ============================================================
   PÉROLA BEBIDAS — identidade "pérola/nácar": base clara e
   luminosa, dourado extraído da logo real, acentos de nácar
   (rosa e azul suaves). Propositalmente diferente do padrão
   preto+dourado usado em projetos irmãos do mesmo segmento.
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}

:root{
  --pearl:#FAF6EF;
  --pearl-2:#F2E9DA;
  --pearl-3:#E9DAC2;
  --ink:#241F1C;
  --ink-soft:#6E645C;
  --ink-faint:#9A8F85;
  --abyss:#1C1720;
  --abyss-2:#26202D;
  --gold:#AD8447;
  --gold-light:#E8CB99;
  --gold-deep:#8A6A38;
  --rose:#D9AEA5;
  --blue:#A7B9C6;
  --white:#FFFFFF;
  --shadow: 0 24px 60px -30px rgba(35,25,15,.35);
  --radius-soft: 6px;
}

html{scroll-behavior:smooth}

body{
  font-family:'Manrope',sans-serif;
  color:var(--ink);
  background:var(--pearl);
  line-height:1.65;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}

.container{max-width:1220px;margin:0 auto;padding:0 24px}

h1,h2,h3,h4{
  font-family:'Cormorant Garamond',serif;
  font-weight:700;
  color:var(--ink);
  line-height:1.15;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--gold-deep);
  font-size:12px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  margin-bottom:18px;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold)}
.eyebrow--light{color:var(--gold-light)}
.eyebrow--light::before{background:var(--gold-light)}

.section-text{color:var(--ink-soft);font-size:16px;max-width:600px}
.section-text--light{color:rgba(255,255,255,.68)}

.section-head{max-width:680px;margin:0 auto 56px;text-align:center}
.section-head.left{text-align:left;margin:0 0 56px}
.section-head h2{font-size:clamp(28px,4vw,40px);margin-bottom:16px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  border-radius:2px;
  border:1px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space:nowrap;
}
.btn--gold{
  background:linear-gradient(135deg,var(--gold-light) 0%,var(--gold) 100%);
  color:var(--abyss);
  box-shadow:0 14px 30px -12px rgba(173,132,71,.55);
}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(173,132,71,.65)}
.btn--ghost{
  background:transparent;
  color:var(--ink);
  border-color:rgba(36,31,28,.25);
}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold-deep)}
.btn--ghost-light{
  background:transparent;
  color:var(--white);
  border-color:rgba(255,255,255,.3);
}
.btn--ghost-light:hover{border-color:var(--gold-light);color:var(--gold-light)}

/* ============ HEADER ============ */
.header{
  position:sticky;top:0;z-index:200;
  background:rgba(250,246,239,.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(173,132,71,.22);
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;gap:24px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand__logo{height:46px;width:auto}
.brand__name-wrap{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:24px;color:var(--ink);letter-spacing:.5px}
.brand__sub{font-size:9px;letter-spacing:4px;color:var(--gold-deep);font-weight:700;margin-top:2px}

.nav{display:flex;gap:30px}
.nav__link{font-size:13px;font-weight:600;color:var(--ink-soft);letter-spacing:.3px;transition:color .2s}
.nav__link:hover{color:var(--gold-deep)}

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

.nav__toggle{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:38px;height:38px;background:none;border:none;
}
.nav__toggle span{display:block;width:100%;height:2px;background:var(--ink);transition:transform .3s ease, opacity .3s ease}
.nav__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle.is-open span:nth-child(2){opacity:0}
.nav__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============ HERO ============ */
.hero{
  padding:70px 0 90px;
  position:relative;
  background:
    radial-gradient(ellipse 700px 500px at 85% -10%, rgba(217,174,165,.25), transparent 60%),
    radial-gradient(ellipse 600px 500px at -10% 90%, rgba(167,185,198,.2), transparent 60%),
    var(--pearl);
}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero__title{font-size:clamp(32px,5vw,54px);margin-bottom:22px;letter-spacing:.2px}
.hero__title em{font-style:normal;color:var(--gold-deep)}
.hero__text{color:var(--ink-soft);font-size:17px;max-width:520px;margin-bottom:34px}
.hero__actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:8px}

.pillars{
  margin-top:44px;
  display:flex;
  flex-direction:column;
  gap:0;
  border-top:1px solid rgba(173,132,71,.25);
  max-width:480px;
}
.pillar{
  display:flex;align-items:center;gap:16px;
  padding:16px 0;
  border-bottom:1px solid rgba(173,132,71,.25);
}
.pillar__num{
  font-family:'Cormorant Garamond',serif;font-weight:700;
  font-size:20px;color:var(--gold);width:30px;flex-shrink:0;
}
.pillar strong{display:block;font-size:14px;color:var(--ink)}
.pillar span{font-size:13px;color:var(--ink-soft)}

.hero__side{position:relative}
.hero__blob{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:58% 42% 52% 48% / 48% 55% 45% 52%;
  box-shadow:var(--shadow);
  border:1px solid rgba(173,132,71,.3);
}
.hero__blob img{width:100%;height:100%;object-fit:cover}
.hero__badge{
  position:absolute;bottom:-22px;left:-22px;
  background:var(--abyss);
  color:var(--gold-light);
  padding:18px 22px;
  border-radius:4px;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.5);
  max-width:210px;
}
.hero__badge strong{display:block;font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--gold-light)}
.hero__badge span{font-size:12px;color:rgba(255,255,255,.65);line-height:1.5}

/* ============ SOBRE ============ */
.sobre{padding:110px 0;background:var(--pearl-2)}
.sobre__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.sobre__image{
  overflow:hidden;
  border-radius:4px;
  aspect-ratio:4/5;
  box-shadow:var(--shadow);
  position:relative;
}
.sobre__image img{width:100%;height:100%;object-fit:cover}
.sobre__image::after{
  content:"";position:absolute;inset:12px;border:1px solid rgba(232,203,153,.55);pointer-events:none;
}
.sobre h2{font-size:clamp(28px,4vw,40px);margin-bottom:22px}
.sobre p{color:var(--ink-soft);margin-bottom:16px;font-size:16px}
.sobre__features{
  display:grid;grid-template-columns:1fr 1fr;gap:28px;
  margin-top:32px;padding-top:32px;border-top:1px solid rgba(173,132,71,.3);
}
.feature-mini strong{display:block;font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--gold-deep);margin-bottom:4px}
.feature-mini span{font-size:13px;color:var(--ink-soft)}

/* ============ PRODUTOS ============ */
.produtos{padding:110px 0;background:var(--pearl)}
.cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.product-card{
  background:var(--white);
  border:1px solid rgba(173,132,71,.18);
  border-radius:4px;
  overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.product-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:rgba(173,132,71,.4)}
.product-card__image{aspect-ratio:4/3;overflow:hidden}
.product-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.product-card:hover .product-card__image img{transform:scale(1.07)}
.product-card__body{padding:22px 22px 26px}
.product-card h3{font-size:20px;color:var(--ink);margin-bottom:10px}
.product-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.6}

/* ============ DIFERENCIAIS ============ */
.diferenciais{padding:110px 0;background:var(--abyss);color:var(--white);position:relative;overflow:hidden}
.diferenciais::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 600px 400px at 90% 0%, rgba(232,203,153,.08), transparent 60%),
             radial-gradient(ellipse 500px 400px at 0% 100%, rgba(167,185,198,.08), transparent 60%);
}
.diferenciais .section-head, .diferenciais .diff-grid{position:relative;z-index:2}
.diferenciais h2{color:var(--white)}
.diff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.diff-card{
  background:var(--abyss-2);
  border:1px solid rgba(232,203,153,.15);
  border-radius:4px;
  padding:34px 26px;
  transition:transform .3s ease, border-color .3s ease;
}
.diff-card:hover{transform:translateY(-6px);border-color:rgba(232,203,153,.5)}
.diff-card__icon{
  width:52px;height:52px;border-radius:50%;
  border:1.5px solid var(--gold-light);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-light);
  margin-bottom:22px;
  position:relative;
}
.diff-card__icon::after{
  content:"";position:absolute;width:6px;height:6px;border-radius:50%;
  background:var(--gold-light);top:6px;right:8px;
}
.diff-card h3{color:var(--white);font-size:19px;margin-bottom:10px}
.diff-card p{font-size:13.5px;color:rgba(255,255,255,.62)}

/* ============ COMO FUNCIONA ============ */
.como-funciona{padding:110px 0;background:var(--pearl-2)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.step{position:relative;padding:12px 0 0 0}
.step__number{
  display:block;font-family:'Cormorant Garamond',serif;font-weight:700;
  font-size:52px;color:transparent;
  -webkit-text-stroke:1.3px var(--gold);
  margin-bottom:14px;
}
.step h3{font-size:20px;margin-bottom:10px}
.step p{color:var(--ink-soft);font-size:14.5px}

/* ============ CONTATO ============ */
.contato{padding:110px 0;background:var(--pearl)}
.contato__grid{display:grid;grid-template-columns:1fr .85fr;gap:56px;align-items:center}
.contato h2{font-size:clamp(28px,4vw,38px);margin-bottom:16px}
.contact-list{margin:28px 0 32px}
.contact-list li{
  display:flex;gap:16px;align-items:flex-start;
  padding:18px 0;border-bottom:1px solid rgba(173,132,71,.25);
}
.contact-list__icon{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  color:var(--abyss);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.contact-list strong{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-deep);margin-bottom:4px}
.contact-list span{font-size:15px;color:var(--ink)}

.contato__panel{
  background:var(--abyss);
  border-radius:4px;
  padding:48px 34px;
  text-align:center;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.contato__panel::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(232,203,153,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(232,203,153,.06) 1px,transparent 1px);
  background-size:36px 36px;
}
.contato__panel-inner{position:relative;z-index:2}
.contato__panel img{height:120px;margin:0 auto 18px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.4))}
.contato__panel p{color:rgba(255,255,255,.55);font-size:13px;letter-spacing:1px;text-transform:uppercase}

/* ============ FOOTER ============ */
.footer{background:var(--abyss);color:rgba(255,255,255,.6);padding:80px 0 28px;border-top:1px solid rgba(232,203,153,.12)}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;margin-bottom:54px}
.footer__logo{height:78px;margin-bottom:20px}
.footer__brand p{font-size:14px;line-height:1.75}
.footer__col h4{font-family:'Cormorant Garamond',serif;color:var(--gold-light);font-size:16px;margin-bottom:18px;letter-spacing:.5px}
.footer__col a, .footer__col span{display:block;margin-bottom:11px;font-size:13.5px;color:rgba(255,255,255,.6)}
.footer__col a:hover{color:var(--gold-light)}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.1);padding-top:24px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:12px;color:rgba(255,255,255,.4);letter-spacing:.5px;
}

/* ============ FLOAT EMAIL ============ */
.email-float{
  position:fixed;bottom:26px;right:26px;z-index:150;
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  color:var(--abyss);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 16px 34px -10px rgba(173,132,71,.6);
  transition:transform .25s ease;
}
.email-float:hover{transform:scale(1.08)}

/* ============ SCROLL REVEAL ============ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease}
.reveal.is-visible{opacity:1;transform:translateY(0)}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .diff-grid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
}

@media (max-width:900px){
  .nav{
    position:fixed;top:76px;left:0;right:0;bottom:0;
    background:var(--pearl);
    flex-direction:column;gap:0;
    padding:10px 24px 40px;
    transform:translateX(100%);
    transition:transform .35s ease;
    overflow-y:auto;
  }
  .nav.is-open{transform:translateX(0)}
  .nav__link{padding:16px 0;border-bottom:1px solid rgba(173,132,71,.2);font-size:16px}
  .nav__toggle{display:flex}

  .hero__grid, .sobre__grid, .contato__grid{grid-template-columns:1fr}
  .hero__side{order:-1;max-width:420px;margin:0 auto 20px}
  .steps{grid-template-columns:1fr}
}

@media (max-width:560px){
  .header__cta .cta-text{display:none}
  .header__cta{padding:13px}
}

@media (max-width:640px){
  .cards-grid{grid-template-columns:1fr}
  .diff-grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:34px}
  .sobre__features{grid-template-columns:1fr}
  .hero__badge{position:static;margin-top:18px;max-width:none}
  .contato__panel{padding:36px 24px}
}