/* ============================================================
DARIPE SEMIJOIAS — CAMADA PREMIUM (redesign visual)
------------------------------------------------------------
Tudo abaixo é ADITIVO: nenhuma cor de --root foi alterada, nenhum
seletor usado pelo JS (main.js, loja.js, produtos.js) foi removido
ou renomeado. Esta camada só refina tipografia, profundidade,
movimento e microinterações por cima do que já existia acima.
Respeita prefers-reduced-motion para quem prefere menos animação.
============================================================ */

:root{
--ouro-vivo: color-mix(in srgb, var(--ouro) 82%, #ffffff 18%);
--sombra-suave: 0 4px 14px rgba(107,76,71,.07);
--sombra-forte: 0 24px 60px rgba(107,76,71,.16);
--borda-vidro: rgba(255,255,255,.55);
--transicao-suave: cubic-bezier(.22,.85,.32,1.1);
}

*{-webkit-tap-highlight-color: transparent;}

::selection{background: var(--ouro); color:#fff;}

html{scroll-padding-top:90px;}

body{
background-image:
radial-gradient(circle at 12% 8%, rgba(177,119,113,.06), transparent 42%),
radial-gradient(circle at 92% 4%, rgba(177,119,113,.05), transparent 38%);
background-attachment:fixed;
}

/* Barra de rolagem elegante (navegadores que suportam) */
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:var(--creme);}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--ouro), var(--ouro-escuro)); border-radius:20px; border:2px solid var(--creme);}
* { scrollbar-color: var(--ouro) var(--creme); scrollbar-width: thin; }

:focus-visible{outline:2px solid var(--ouro-escuro); outline-offset:3px; border-radius:4px;}

/* ---------- Tipografia com escala fluida ---------- */
.titulo-secao{
font-size: clamp(1.7rem, 1.35rem + 1.6vw, 2.5rem);
letter-spacing:.2px;
}
.hero h1{
font-size: clamp(2.1rem, 1.5rem + 3vw, 3.4rem);
letter-spacing:-.5px;
}
.linha-ouro{
position:relative;
overflow:hidden;
background: linear-gradient(90deg, var(--ouro-escuro), var(--ouro), var(--ouro-escuro));
background-size:200% 100%;
animation: brilhoLinha 3.5s ease-in-out infinite;
}
@keyframes brilhoLinha{
0%,100%{background-position:0% 50%;}
50%{background-position:100% 50%;}
}

/* ---------- Header: mais "flutuante" ao rolar ---------- */
header{
transition: box-shadow .35s var(--transicao-suave), background-color .35s ease, border-color .35s ease;
}
header.rolado{
background: rgba(250,243,233,.85);
box-shadow: 0 10px 30px rgba(107,76,71,.10);
border-bottom-color: transparent;
}
.logo{transition:transform .3s var(--transicao-suave);}
.logo:hover{transform: translateY(-1px) scale(1.015);}
.logo img{transition:transform .4s var(--transicao-suave), box-shadow .4s ease; box-shadow:0 0 0 0 rgba(177,119,113,0);}
.logo:hover img{transform:rotate(-4deg); box-shadow:0 4px 16px rgba(177,119,113,.35);}

.pulso-clique{animation: pulsoClique .4s ease;}
@keyframes pulsoClique{
0%{opacity:1;}
50%{opacity:.35;}
100%{opacity:1;}
}

/* ---------- Botões: brilho deslizante + resposta ao toque ---------- */
.btn{position:relative; overflow:hidden; isolation:isolate; transition: transform .3s var(--transicao-suave), box-shadow .3s var(--transicao-suave), background-color .3s ease;}
.btn::before{
content:"";
position:absolute; inset:0;
background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%);
transform: translateX(-120%);
transition: transform .7s ease;
z-index:1;
pointer-events:none;
}
.btn:hover::before{transform: translateX(120%);}
.btn:active{transform: translateY(0) scale(.97) !important;}
.btn-primario{background-image: linear-gradient(135deg, var(--preto), var(--preto-suave));}
.btn-secundario:hover{box-shadow:0 8px 20px rgba(177,119,113,.22);}

/* ---------- Hero: profundidade e movimento sutil ---------- */
.hero{
background:
radial-gradient(circle at 85% 15%, rgba(177,119,113,.14), transparent 50%),
radial-gradient(circle at 8% 90%, rgba(177,119,113,.10), transparent 45%),
var(--creme);
}
.hero-tag{
box-shadow: 0 6px 18px rgba(177,119,113,.15);
animation: flutuarSuave 4.5s ease-in-out infinite;
}
.hero-visual{position:relative;}
.hero-visual::before{
content:"";
position:absolute;
width:120%; height:120%;
left:50%; top:50%;
transform:translate(-50%,-50%);
background: conic-gradient(from 0deg, transparent, rgba(177,119,113,.16), transparent 30%);
border-radius:50%;
animation: girarLento 14s linear infinite;
z-index:0;
}
.circulo-hero{position:relative; z-index:1; transition: transform .5s var(--transicao-suave), box-shadow .5s ease;}
.circulo-hero:hover{transform: scale(1.03) rotate(1deg); box-shadow:0 30px 60px rgba(107,76,71,.22), 0 0 0 10px rgba(177,119,113,.14);}
.selo-flutuante{animation: flutuarSuave 5s ease-in-out infinite; backdrop-filter: blur(6px); background: rgba(255,255,255,.82); border-color: var(--borda-vidro);}
.selo-2{animation-delay:.6s;}

@keyframes flutuarSuave{
0%,100%{transform: translateY(0);}
50%{transform: translateY(-8px);}
}
@keyframes girarLento{
from{transform:translate(-50%,-50%) rotate(0deg);}
to{transform:translate(-50%,-50%) rotate(360deg);}
}

/* ---------- Cards: elevação, brilho de borda e zoom de imagem ---------- */
.card-produto, .card-info, .card-depoimento{
transition: transform .4s var(--transicao-suave), box-shadow .4s var(--transicao-suave), border-color .4s ease;
}
.card-produto:hover, .card-depoimento:hover{
border-color: var(--ouro);
box-shadow: var(--sombra-forte);
}
.imagem-produto{overflow:hidden;}
.imagem-produto img{transition: transform .6s var(--transicao-suave);}
.card-produto:hover .imagem-produto img{transform: scale(1.08);}
.selo-produto{animation: flutuarSuave 3.2s ease-in-out infinite;}
.preco-atual{position:relative;}
.card-info .icone{transition: transform .4s var(--transicao-suave);}
.card-info:hover .icone{transform: scale(1.12) rotate(-4deg);}

.filtro-btn{transition: transform .25s var(--transicao-suave), background-color .2s ease, border-color .2s ease, color .2s ease;}
.filtro-btn:hover{transform: translateY(-2px);}
.filtro-btn.ativo{box-shadow:0 6px 16px rgba(177,119,113,.25);}

/* ---------- Elementos que entram suavemente ao aparecer na tela ---------- */
@media (prefers-reduced-motion: no-preference){
[data-revelar]{
opacity:0;
transform: translateY(26px);
transition: opacity .7s var(--transicao-suave), transform .7s var(--transicao-suave);
}
[data-revelar].visivel{opacity:1; transform:none;}
[data-revelar-grade] > *{
opacity:0;
transform: translateY(22px);
transition: opacity .55s var(--transicao-suave), transform .55s var(--transicao-suave);
}
[data-revelar-grade].visivel > *{opacity:1; transform:none;}
[data-revelar-grade].visivel > *:nth-child(1){transition-delay:.03s;}
[data-revelar-grade].visivel > *:nth-child(2){transition-delay:.09s;}
[data-revelar-grade].visivel > *:nth-child(3){transition-delay:.15s;}
[data-revelar-grade].visivel > *:nth-child(4){transition-delay:.21s;}
[data-revelar-grade].visivel > *:nth-child(5){transition-delay:.27s;}
[data-revelar-grade].visivel > *:nth-child(6){transition-delay:.33s;}
[data-revelar-grade].visivel > *:nth-child(n+7){transition-delay:.36s;}
}

/* ---------- Modais: vidro fosco moderno ---------- */
.modal-fundo{backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);}
.modal-conta{box-shadow: var(--sombra-forte); border:1px solid var(--linha);}
.painel-carrinho{box-shadow:-20px 0 50px rgba(107,76,71,.18);}

/* ---------- Botão WhatsApp: pulso vivo, chamando atenção ---------- */
.whats-flutuante{
box-shadow:0 10px 26px rgba(107,76,71,.30), 0 0 0 0 rgba(156,95,89,.45);
animation: pulsoWhats 2.8s ease-out infinite;
}
@keyframes pulsoWhats{
0%{box-shadow:0 10px 26px rgba(107,76,71,.30), 0 0 0 0 rgba(156,95,89,.45);}
70%{box-shadow:0 10px 26px rgba(107,76,71,.30), 0 0 0 14px rgba(156,95,89,0);}
100%{box-shadow:0 10px 26px rgba(107,76,71,.30), 0 0 0 0 rgba(156,95,89,0);}
}

/* ---------- Redução de movimento: desliga tudo que for supérfluo ---------- */
@media (prefers-reduced-motion: reduce){
.linha-ouro, .hero-tag, .hero-visual::before, .circulo-hero, .selo-flutuante,
.selo-produto, .whats-flutuante, .pulso-clique{animation:none !important;}
.btn::before{display:none;}
}

/* ---------- Galeria de fotos da página do produto (miniaturas) ---------- */
.detalhe-produto-galeria{display:flex; flex-direction:column; gap:14px;}
.detalhe-produto-miniaturas{
display:flex;
gap:10px;
}
.miniatura-produto{
width:72px;
height:72px;
flex:0 0 72px;
padding:0;
border-radius:10px;
overflow:hidden;
border:2px solid var(--linha, #e4d9d3);
background:var(--creme, #f6efe9);
cursor:pointer;
transition:border-color .2s ease, transform .2s ease;
}
.miniatura-produto img{width:100%; height:100%; object-fit:cover; display:block;}
.miniatura-produto:hover{transform:translateY(-2px);}
.miniatura-produto.ativa{border-color:var(--ouro, #b17771);}

@media (max-width:640px){
.miniatura-produto{width:60px; height:60px; flex-basis:60px;}
}

/* ---------- Galeria de fotos no card do catálogo (pré-visualização) ---------- */
.imagem-produto.galeria-card{position:relative; overflow:hidden; padding:0;}
.foto-card{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; opacity:0; transition:opacity .35s ease;
}
.foto-card.ativa{opacity:1;}
.dots-card{
position:absolute; bottom:10px; left:0; right:0;
display:flex; justify-content:center; gap:6px; z-index:3;
}
.dot-card{
width:8px; height:8px; border-radius:50%;
background:rgba(255,255,255,.6); border:1px solid rgba(0,0,0,.15);
cursor:pointer; transition:background-color .2s ease, transform .2s ease;
}
.dot-card:hover{transform:scale(1.2);}
.dot-card.ativo{background:var(--ouro, #b17771); border-color:var(--ouro, #b17771);}

/* ---------- Estoque / esgotado / encomenda ---------- */
.selo-produto.selo-esgotado{background:#7d6a63;}
.aviso-esgotado{color:#c0392b; font-weight:600; font-size:.9rem; margin:6px 0;}
.aviso-estoque-baixo{color:#a87c1c; font-weight:600; font-size:.9rem; margin:6px 0;}
.caixa-encomenda{
background:var(--creme, #f6efe9); border:1px solid var(--linha, #e4d9d3);
border-radius:14px; padding:18px 20px; margin:16px 0 10px;
display:flex; flex-direction:column; gap:10px;
}
.caixa-encomenda h3{margin:0; font-size:1.05rem;}
.caixa-encomenda p{margin:0; font-size:.85rem; color:var(--cinza, #a89187);}
.caixa-encomenda input, .caixa-encomenda textarea{
width:100%; padding:10px 14px; border:1px solid var(--linha, #e4d9d3);
border-radius:8px; font-family:inherit; font-size:.9rem;
}
.caixa-encomenda textarea{min-height:64px;}

/* ---------- Avisos/textos extras do site (cadastrados no admin) ---------- */
.secao-avisos{padding-top:0;}
.grade-avisos{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px;}
.card-aviso{
background:linear-gradient(135deg, var(--creme, #f6efe9), #fff);
border:1px solid var(--linha, #e4d9d3); border-radius:14px;
padding:20px 22px; box-shadow:var(--sombra-suave);
}
.card-aviso h3{margin:0 0 8px; font-size:1rem; color:var(--ouro-escuro, #6b4c47);}
.card-aviso p{margin:0; font-size:.88rem; color:var(--preto, #6b4c47);}

/* ---------- Escolha de transportadora no checkout ---------- */
.lista-transportadoras{display:flex; flex-direction:column; gap:8px;}
.opcao-transportadora{
display:grid;
grid-template-columns:auto 1fr auto auto;
align-items:center;
gap:10px;
padding:10px 12px;
border:1.5px solid var(--linha, #e4d9d3);
border-radius:10px;
cursor:pointer;
transition:border-color .2s ease, background-color .2s ease;
}
.opcao-transportadora:hover{border-color:var(--ouro, #b17771);}
.opcao-transportadora.selecionada{border-color:var(--ouro, #b17771); background:var(--creme, #f6efe9);}
.opcao-transportadora input[type="radio"]{margin:0; accent-color:var(--ouro, #b17771);}
.opcao-transportadora-nome{font-size:.85rem; font-weight:600;}
.opcao-transportadora-prazo{font-size:.78rem; color:var(--cinza, #a89187);}
.opcao-transportadora-preco{font-size:.85rem; font-weight:600; white-space:nowrap;}
.btn:disabled{opacity:.5; cursor:not-allowed; pointer-events:none;}