/* ════════════════════════════════════════════════════════════════════
   CAMADA-MED · V84 LIQUID GLASS
   Eleva a vitrine ao padrão das referências iOS Liquid Glass:
   vidro com borda luminosa, refração, profundidade 3D, luz em movimento.
   Identidade congelada: creme #F2E9D8 · petróleo #0E2A24 · ouro #B8862A→#FBEFC4
   Carrega POR ÚLTIMO. Não altera funil, links nem copy.
════════════════════════════════════════════════════════════════════ */

/* ── 1) FUNDO champagne com luz viva ─────────────────────────────── */
body.v70-site{
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,250,235,.9), transparent 60%),
    radial-gradient(900px 500px at 85% 110%, rgba(247,232,198,.8), transparent 65%),
    linear-gradient(175deg, #F4EBD8 0%, #EFE3CB 45%, #EAD9BC 100%) !important;
}

/* ── 2) CARTÕES DE VIDRO (v70-glass) ─────────────────────────────── */
.v70-glass{
  position:relative !important;
  background: linear-gradient(158deg, rgba(255,253,246,.86) 0%, rgba(247,236,212,.72) 55%, rgba(241,226,196,.66) 100%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.18) !important;
  backdrop-filter: blur(20px) saturate(1.18) !important;
  border-radius: 34px !important;
  border: 1px solid rgba(255,255,255,.62) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(184,134,42,.22),
    inset 0 0 44px rgba(255,255,255,.30),
    0 0 0 1px rgba(231,199,102,.38),
    0 14px 44px -14px rgba(122,90,24,.38),
    0 0 52px -8px rgba(251,239,196,.85) !important;
  overflow:hidden !important;
}
/* refração de luz nas quinas (como no vídeo) */
.v70-glass::before{
  content:"" !important; position:absolute !important; inset:0 !important;
  border-radius:inherit !important; pointer-events:none !important;
  background:
    radial-gradient(140px 64px at 10% 0%,  rgba(255,255,255,.85), transparent 72%),
    radial-gradient(190px 80px at 92% 102%, rgba(251,239,196,.70), transparent 72%),
    radial-gradient(120px 50px at 100% 0%, rgba(255,255,255,.45), transparent 70%) !important;
  opacity:.85 !important;
  z-index:0 !important;
}
/* varredura de luz em movimento (o "liquid") */
.v70-glass::after{
  content:"" !important; position:absolute !important; inset:-2px !important;
  border-radius:inherit !important; pointer-events:none !important;
  background: linear-gradient(112deg,
    transparent 34%,
    rgba(255,255,255,.34) 46%,
    rgba(255,247,216,.55) 50%,
    rgba(255,255,255,.34) 54%,
    transparent 66%) !important;
  background-size: 320% 100% !important;
  background-position: 130% 0 !important;
  animation: v84sweep 7s ease-in-out infinite !important;
  opacity:.55 !important;
  z-index:0 !important;
}
@keyframes v84sweep{
  0%, 72%, 100%{ background-position: 130% 0; }
  36%          { background-position: -30% 0; }
}
/* conteúdo acima das camadas de luz */
.v70-glass > *{ position:relative; z-index:1; }

/* ── 3) BOTÃO OURO = pílula de vidro 3D com glow ─────────────────── */
.v70-btn{
  border-radius:999px !important;
  transition: transform .22s cubic-bezier(.2,.9,.3,1.4), box-shadow .22s ease, filter .22s ease !important;
  will-change: transform;
}
.v70-gold-btn{
  background: linear-gradient(163deg, #FDF4CF 0%, #F2DE9A 26%, #DDB456 62%, #B8862A 100%) !important;
  color:#241804 !important;
  border:1px solid rgba(255,255,255,.7) !important;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.95),
    inset 0 -4px 8px rgba(122,84,18,.42),
    0 8px 26px -8px rgba(184,134,42,.72),
    0 0 34px -4px rgba(251,239,196,.95) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.45) !important;
  letter-spacing:.13em !important;
  position:relative !important; overflow:hidden !important;
}
.v70-gold-btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.75) 48%, transparent 62%);
  background-size:280% 100%; background-position:130% 0;
  animation: v84sweep 5.6s ease-in-out infinite;
}
.v70-gold-btn:hover,.v70-gold-btn:focus-visible{
  transform: translateY(-2px) scale(1.015) !important;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.95),
    inset 0 -4px 8px rgba(122,84,18,.42),
    0 14px 34px -8px rgba(184,134,42,.8),
    0 0 48px -2px rgba(251,239,196,1) !important;
}
.v70-gold-btn:active{ transform: translateY(0) scale(.99) !important; }

/* secundário = vidro fosco */
.v70-btn.v70-secondary{
  background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(245,232,206,.4)) !important;
  -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important;
  border:1px solid rgba(255,255,255,.65) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 0 0 1px rgba(184,134,42,.3),
    0 6px 20px -10px rgba(122,90,24,.35) !important;
  color:#20342C !important;
}
.v70-btn.v70-secondary:hover{ transform: translateY(-1px) !important; }

/* ── 4) CHIPS = mini-pílulas de vidro ────────────────────────────── */
.v70-chip, .v73-chips span{
  background: linear-gradient(160deg, rgba(255,255,255,.6), rgba(246,233,206,.42)) !important;
  -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
  border:1px solid rgba(255,255,255,.7) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 1px rgba(184,134,42,.28),
    0 4px 14px -8px rgba(122,90,24,.4) !important;
  border-radius:999px !important;
  color:#3A4A40 !important;
}

/* ── 5) MENU horizontal compacto (mata a pilha vertical mobile) ──── */
.v70-menu{
  display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
  overflow-x:auto !important; -webkit-overflow-scrolling:touch !important;
  gap:8px !important; padding:4px 2px !important;
  scrollbar-width:none !important;
}
.v70-menu::-webkit-scrollbar{ display:none !important; }
.v70-menu a{
  flex:0 0 auto !important; white-space:nowrap !important;
  padding:8px 14px !important; border-radius:999px !important;
  font-size:12px !important; letter-spacing:.06em !important;
  background: rgba(255,255,255,.42) !important;
  border:1px solid rgba(255,255,255,.6) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 0 0 1px rgba(184,134,42,.18) !important;
  color:#2A3B32 !important;
}
.v70-menu a.active{
  background: linear-gradient(160deg,#FBEFC4,#E7C766) !important;
  color:#241804 !important; font-weight:600 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 18px -4px rgba(231,199,102,.9) !important;
}

/* ── 6) PILARES do hero (3 ícones, como na referência) ───────────── */
.v84-pillars{
  display:flex; justify-content:center; gap:8px; flex-wrap:wrap;
  margin:18px 0 4px;
}
.v84-pillars > div{
  flex:1 1 0; min-width:104px; max-width:150px;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:13px 8px;
  background: linear-gradient(160deg, rgba(255,255,255,.5), rgba(246,233,206,.34));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(184,134,42,.22), 0 5px 16px -9px rgba(122,90,24,.4);
}
.v84-pillars svg{
  width:26px; height:26px; stroke:#B8862A; fill:none; stroke-width:1.6;
  filter: drop-shadow(0 1px 2px rgba(184,134,42,.4));
}
.v84-pillars span{
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#4A5A50; text-align:center; line-height:1.35;
}

/* ── 7) DEPOIMENTOS = vidro petróleo escuro (contraste da referência) ── */
.v73-testimonials-section{
  background: linear-gradient(158deg, rgba(14,42,36,.94) 0%, rgba(22,58,48,.92) 55%, rgba(28,70,59,.9) 100%) !important;
  border:1px solid rgba(231,199,102,.4) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(251,239,196,.28),
    inset 0 0 60px rgba(8,26,21,.5),
    0 0 0 1px rgba(184,134,42,.45),
    0 16px 48px -14px rgba(8,26,21,.6),
    0 0 52px -8px rgba(231,199,102,.5) !important;
}
.v73-testimonials-section::before{
  background:
    radial-gradient(160px 70px at 8% 0%,  rgba(251,239,196,.28), transparent 70%),
    radial-gradient(200px 90px at 94% 104%, rgba(231,199,102,.22), transparent 72%) !important;
}
.v73-testimonials-section .v73-section-head h2{ color:#0E2A24 !important; }
.v73-testimonials-section .v73-section-head p{ color:rgba(6,47,40,.78) !important; }
.v73-testimonials-section .v73-section-head span{ color:rgba(109,75,15,.82) !important; }
.v73-testimonials-section .v70-testimonial-text{ color:#EFE6D2 !important; }
.v73-testimonials-section .v70-person b{ color:#FBEFC4 !important; }
.v73-testimonials-section .v70-person small{ color:#B9C7BE !important; }
.v73-testimonials-section .v70-stars{ color:#E7C766 !important; }
.v73-testimonials-section .v70-quote-medal{
  color:#E7C766 !important;
  text-shadow: 0 0 22px rgba(231,199,102,.65) !important;
}
.v73-testimonials-section .v73-testimonial-controls button{
  background: rgba(251,239,196,.12) !important;
  border:1px solid rgba(231,199,102,.45) !important;
  color:#FBEFC4 !important;
  border-radius:999px !important;
  box-shadow: inset 0 1px 0 rgba(251,239,196,.25), 0 0 16px -4px rgba(231,199,102,.5) !important;
}
.v73-testimonials-section .v70-person .badge{
  background: rgba(231,199,102,.14) !important;
  border-color: rgba(231,199,102,.4) !important;
  color:#E7C766 !important;
}

/* ── 8) PREÇO metálico maior ─────────────────────────────────────── */
.v70-price strong{
  font-size: clamp(46px, 11vw, 74px) !important;
  background: linear-gradient(168deg,#8C6A1A 0%, #D9AE4B 34%, #FBEFC4 52%, #D9AE4B 68%, #8C6A1A 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  filter: drop-shadow(0 2px 6px rgba(184,134,42,.35)) !important;
}
.v70-price del{ opacity:.55 !important; }

/* ── 9) COMPACTAÇÃO mobile (menos scroll, mais imersão) ──────────── */
@media (max-width:720px){
  .v70-glass{ border-radius:28px !important; }
  .v70-hero{ padding:26px 20px 24px !important; }
  .v70-hero h1{ font-size: clamp(24px, 6.6vw, 32px) !important; line-height:1.14 !important; }
  .v73-hero-sub{ font-size:14px !important; line-height:1.5 !important; }
  .v75-panel{ margin-bottom:14px !important; }
  .v73-section-head{ margin-bottom:14px !important; }
  section.v70-glass{ padding:24px 18px !important; }
  .v74-included-grid{ gap:10px !important; }
  .v70-mini-card{ padding:16px 15px !important; border-radius:20px !important; }
  .v84-pillars > div{ min-width:96px; padding:11px 6px; }
}

/* mini-cards também em vidro */
.v70-mini-card{
  background: linear-gradient(160deg, rgba(255,255,255,.58), rgba(246,233,206,.4)) !important;
  -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important;
  border:1px solid rgba(255,255,255,.62) !important;
  border-radius:22px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 0 0 1px rgba(184,134,42,.26),
    0 8px 22px -12px rgba(122,90,24,.45) !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
}
.v70-mini-card:hover{
  transform: translateY(-3px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 0 0 1px rgba(184,134,42,.4),
    0 14px 30px -12px rgba(122,90,24,.55),
    0 0 30px -6px rgba(251,239,196,.85) !important;
}

/* ── 10) Acessibilidade: reduz movimento ─────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .v70-glass::after, .v70-gold-btn::after{ animation:none !important; opacity:0 !important; }
  .v70-btn, .v70-mini-card{ transition:none !important; }
}


/* ── 11) MARCA D'ÁGUA: afundada no papel, presente e elegante ────── */
body.v82-vitrine .v73-hero .v73-emboss-mark,
.v73-hero .v73-emboss-mark{
  width: min(440px, 62vw) !important;
  max-width: 440px !important;
  left: 50% !important; right: auto !important;
  top: 50% !important; bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  opacity: .10 !important;
  filter: grayscale(1) sepia(.18) contrast(1.02) brightness(1.04) !important;
  mix-blend-mode: multiply !important;
}
@media (max-width:720px){
  body.v82-vitrine .v73-hero .v73-emboss-mark,
  .v73-hero .v73-emboss-mark{
    width: min(340px, 74vw) !important;
    opacity: .11 !important;
  }
}
