/* =============================================================
   /produtos/ — landing pages individuais + index grid
   Usa as variáveis e nav/footer do style.css principal.
   Cada produto tem --accent inline (sobrescreve a paleta cobre)
   ============================================================= */

.product-page main,
.products-index-page main { padding-top: 80px; }

/* ============== Breadcrumb ============== */
.product-breadcrumb{
  max-width:1200px;margin:0 auto;
  padding:18px max(5vw,24px) 0;
  font-size:.78rem;letter-spacing:.05em;
  color:var(--body);
}
.product-breadcrumb a{color:var(--copper-dark);text-decoration:none}
.product-breadcrumb a:hover{text-decoration:underline}
.product-breadcrumb .sep{margin:0 8px;color:var(--copper-light)}

/* ============== Hero ============== */
.product-hero{
  padding:32px max(5vw,24px) 64px;
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--accent,#b87333) 14%, transparent), transparent 55%),
    linear-gradient(135deg, var(--pearl) 0%, var(--pearl-warm) 100%);
}
.product-hero-inner{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
}
.product-hero-img{margin:0;border-radius:24px;overflow:hidden;box-shadow:0 30px 80px rgba(26,43,74,.18)}
.product-hero-img img{display:block;width:100%;height:auto}

.product-code{
  display:inline-block;
  font-size:11px;letter-spacing:2.5px;text-transform:uppercase;font-weight:700;
  color:var(--accent,#b87333);
  background:color-mix(in srgb, var(--accent,#b87333) 12%, #fff);
  padding:6px 12px;border-radius:999px;margin-bottom:18px;
}
.product-hero-copy h1{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.4rem, 4vw, 3.6rem);
  font-weight:500;line-height:1.05;letter-spacing:-.02em;
  margin:0 0 14px;color:var(--ink);
}
.product-headline{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:1.4rem;color:var(--accent,#b87333);
  margin:0 0 24px;line-height:1.4;
}
.product-actives{
  margin:0 0 18px;font-size:.92rem;color:var(--body);
  padding:14px 18px;border-left:3px solid var(--accent,#b87333);
  background:rgba(255,255,255,.5);border-radius:0 8px 8px 0;
}
.product-actives strong{color:var(--ink);font-weight:600;letter-spacing:.5px}
.product-description{
  font-size:1rem;line-height:1.7;color:var(--body);margin:0 0 28px;
}
.product-description strong{color:var(--ink);font-weight:600}

.product-cta-row{display:flex;gap:14px;margin:0 0 24px;flex-wrap:wrap}
.product-cta-row .btn{
  padding:14px 26px;font-size:11.5px;letter-spacing:2px;
  text-transform:uppercase;font-weight:500;
  border-radius:50px;text-decoration:none;
  transition:all 200ms ease;
}
.product-cta-row .btn-copper{
  background:var(--accent,#b87333);color:#fff;border:1px solid var(--accent,#b87333);
}
.product-cta-row .btn-copper:hover{
  filter:brightness(.92);transform:translateY(-1px);
  box-shadow:0 8px 24px color-mix(in srgb, var(--accent,#b87333) 30%, transparent);
}
.product-cta-row .btn-ghost{
  background:transparent;color:var(--ink);border:1px solid var(--line);
}
.product-cta-row .btn-ghost:hover{
  background:#fff;border-color:var(--accent,#b87333);color:var(--accent,#b87333);
}

.product-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.product-tags .tag{
  font-size:.72rem;letter-spacing:.05em;
  padding:4px 12px;border-radius:999px;
  background:rgba(255,255,255,.7);
  border:1px solid color-mix(in srgb, var(--accent,#b87333) 25%, transparent);
  color:color-mix(in srgb, var(--accent,#b87333) 80%, #233026);
  font-weight:600;
}

@media(max-width:920px){
  .product-hero-inner{grid-template-columns:1fr;gap:36px}
  .product-hero-img{max-width:520px;margin:0 auto;width:100%}
}

/* ============== Panfleto desktop-only ============== */
.product-panfleto-section{
  padding:64px max(5vw,24px);
  background:linear-gradient(135deg, #fff 0%, var(--pearl) 100%);
  display:none; /* hidden on mobile by default */
}
@media(min-width:920px){
  .product-panfleto-section{display:block}
}
.product-panfleto-section .container-narrow{text-align:center}
.product-panfleto-section .eyebrow{
  display:block;font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:var(--accent,#b87333);font-weight:700;margin-bottom:14px;
}
.product-panfleto-section h2{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.6rem, 2.4vw, 2.2rem);font-weight:500;
  color:var(--ink);margin:0 0 28px;letter-spacing:-.015em;
}
.product-panfleto-img{
  max-width:920px;width:100%;height:auto;
  border-radius:18px;
  box-shadow:0 30px 80px rgba(26,43,74,.14);
  margin:0 auto;display:block;
}

/* ============== Sections genéricas ============== */
.product-section{
  padding:80px max(5vw,24px);
}
.container-narrow{max-width:880px;margin:0 auto}
.container-narrow .eyebrow{
  display:block;font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:var(--accent,#b87333);font-weight:700;margin-bottom:14px;
}
.container-narrow h2{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.8rem, 3vw, 2.6rem);font-weight:500;
  line-height:1.15;letter-spacing:-.015em;
  margin:0 0 32px;color:var(--ink);
}
.product-section p{font-size:1rem;line-height:1.75;color:var(--body)}

.product-for-whom{background:#fff}
.product-for-whom h2{font-style:italic;font-size:clamp(1.6rem, 2.5vw, 2.2rem)}

/* ============== Benefits grid ============== */
.product-benefits{background:var(--pearl-warm)}
.benefits-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:16px;
}
.benefit{
  background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:24px;
  border-top:3px solid var(--accent,#b87333);
}
.benefit h4{
  font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:600;
  margin:0 0 8px;color:var(--ink);letter-spacing:-.01em;
}
.benefit p{margin:0;font-size:.95rem;line-height:1.6;color:var(--body)}
@media(max-width:680px){.benefits-grid{grid-template-columns:1fr}}

/* ============== Ritual list ============== */
.product-ritual{background:#fff}
.ritual-list{
  list-style:none;padding:0;margin:0 0 24px;
  display:flex;flex-direction:column;gap:14px;
}
.ritual-list li{
  display:grid;grid-template-columns:40px 1fr;gap:18px;
  align-items:flex-start;
  padding:18px 22px;border-radius:14px;
  background:var(--pearl);border:1px solid var(--line-soft);
}
.step-num{
  font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:600;
  width:36px;height:36px;border-radius:50%;
  background:var(--accent,#b87333);color:#fff;
  display:grid;place-items:center;line-height:1;
}
.step-text{font-size:.96rem;line-height:1.6;color:var(--ink)}
.sensorial-note{
  font-size:.92rem;color:var(--body);font-style:italic;
  padding:14px 20px;border-left:3px solid var(--accent,#b87333);
  background:rgba(245,241,234,.5);border-radius:0 8px 8px 0;
}
.sensorial-note strong{color:var(--ink);font-style:normal;font-weight:600}

/* ============== Combos cross-sell ============== */
.product-combos{background:var(--pearl)}
.combos-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
  margin-top:16px;margin-bottom:24px;
}
.combo-card{
  display:grid;grid-template-columns:80px 1fr;gap:18px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:16px;text-decoration:none;color:inherit;
  transition:all 200ms ease;
}
.combo-card:hover{
  border-color:var(--accent,#b87333);transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(184,115,51,.14);
}
.combo-card img{
  width:80px;height:80px;object-fit:contain;background:var(--pearl);border-radius:10px;
}
.combo-code{
  font-size:11px;letter-spacing:2px;color:var(--copper-dark);font-weight:700;
}
.combo-card strong{
  display:block;font-family:'Cormorant Garamond',serif;
  font-size:1.15rem;font-weight:500;color:var(--ink);
  margin:4px 0;letter-spacing:-.01em;
}
.combo-card p{margin:0;font-size:.82rem;color:var(--body);line-height:1.4}
.combos-help{text-align:center;font-size:.95rem;color:var(--body);margin-top:18px}
.combos-help a{color:var(--accent,#b87333);font-weight:600}
@media(max-width:680px){.combos-grid{grid-template-columns:1fr}}

/* ============== CTA final ============== */
.product-cta-final{
  padding:80px max(5vw,24px);
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff;text-align:center;
}
.product-cta-final h2{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.8rem, 3.5vw, 2.8rem);
  color:#fff;line-height:1.15;margin:0 0 14px;font-weight:500;
}
.product-cta-final h2 em{color:var(--accent-hi,#e5a23b);font-style:normal}
.product-cta-final p{
  max-width:600px;margin:0 auto 28px;color:rgba(255,255,255,.85);
  font-size:1.04rem;line-height:1.65;
}
.product-cta-final .btn-copper{
  background:var(--accent,#b87333);color:#fff;border:none;
  padding:16px 32px;font-size:12px;letter-spacing:2.5px;
  text-transform:uppercase;font-weight:600;
  border-radius:50px;text-decoration:none;
  display:inline-block;
  box-shadow:0 10px 30px color-mix(in srgb, var(--accent,#b87333) 30%, transparent);
  transition:all 200ms ease;
}
.product-cta-final .btn-copper:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 38px color-mix(in srgb, var(--accent,#b87333) 50%, transparent);
}

/* ============== Products INDEX page ============== */
.products-hero{
  padding:120px max(5vw,24px) 64px;
  background:
    radial-gradient(circle at 80% 20%, rgba(184,115,51,.10), transparent 50%),
    linear-gradient(135deg, var(--pearl) 0%, var(--cream) 100%);
}
.products-hero .container{max-width:880px;margin:0 auto;text-align:center}
.products-hero .eyebrow{
  display:block;font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:var(--copper-dark);font-weight:700;margin-bottom:18px;
}
.products-hero h1{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.4rem, 5vw, 4rem);font-weight:500;
  line-height:1.05;letter-spacing:-.02em;margin:0 0 22px;color:var(--ink);
}
.products-hero h1 em{color:var(--copper-dark);font-style:italic;font-weight:400}
.products-hero p{font-size:1.06rem;line-height:1.7;color:var(--body);max-width:640px;margin:0 auto}
.products-hero p a{color:var(--copper-dark);font-weight:600}

.products-grid-wrap{padding:64px max(5vw,24px)}
.products-grid-wrap .container{max-width:1200px;margin:0 auto}
.products-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;
}
.product-grid-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  overflow:hidden;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;
  transition:all 280ms ease;
  border-top:3px solid var(--accent,#b87333);
}
.product-grid-card:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 60px color-mix(in srgb, var(--accent,#b87333) 22%, transparent);
}
.product-grid-card-img{aspect-ratio:4/5;overflow:hidden;background:var(--pearl)}
.product-grid-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 400ms ease}
.product-grid-card:hover .product-grid-card-img img{transform:scale(1.03)}
.product-grid-card-body{padding:22px;display:flex;flex-direction:column;flex:1;gap:6px}
.product-grid-card-code{
  font-size:10px;letter-spacing:2px;color:var(--accent,#b87333);font-weight:700;
}
.product-grid-card-body h3{
  font-family:'Cormorant Garamond',serif;font-size:1.45rem;font-weight:500;
  letter-spacing:-.01em;margin:4px 0;color:var(--ink);line-height:1.1;
}
.product-grid-card-actives{
  font-size:.78rem;color:var(--copper-dark);font-weight:600;
  margin:4px 0 8px;letter-spacing:.02em;
}
.product-grid-card-headline{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:.98rem;color:var(--body);margin:0 0 14px;line-height:1.4;flex:1;
}
.product-grid-card-cta{
  font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:600;
  color:var(--accent,#b87333);
}

.products-routine-note{
  padding:80px max(5vw,24px);background:var(--pearl);
}
.products-routine-note .container-narrow{text-align:center}
.products-routine-note h2{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.8rem, 3vw, 2.4rem);font-weight:500;color:var(--ink);
  margin:0 0 18px;letter-spacing:-.01em;
}
.products-routine-note p{font-size:1rem;line-height:1.75;color:var(--body);margin:0 0 18px}
.products-routine-note .quiz-cta-row{margin-top:30px}
.products-routine-note .btn-copper{
  display:inline-block;padding:14px 28px;
  background:var(--copper);color:#fff;border-radius:50px;
  font-size:11.5px;letter-spacing:2px;text-transform:uppercase;font-weight:600;
  text-decoration:none;border:none;
  box-shadow:0 8px 24px rgba(184,115,51,.30);
  transition:all 200ms ease;
}
.products-routine-note .btn-copper:hover{
  transform:translateY(-2px);box-shadow:0 12px 32px rgba(184,115,51,.40);
}