/* ============================================================
DARIPE SEMIJOIAS — REFINAMENTO DE UI + MICROINTERAÇÕES (HERO)
------------------------------------------------------------
Módulo 100% ADITIVO.
• Não redefine o reset global, não mexe em tipografia da marca,
não altera a logo, não cria/renomeia IDs.
• Depende apenas das variáveis já existentes em :root
(definidas em css/style.css, que deve ser carregado ANTES
deste arquivo).
• Todas as animações usam só transform/opacity (alta performance).
• Respeita prefers-reduced-motion.
============================================================ */

/* ---------------------------------------------------------------
1) Variável adicional (não substitui nenhuma variável existente)
--------------------------------------------------------------- */
:root{
--texto-hero-contraste: #5a3a34; /* marrom-vinho escuro — alta legibilidade sobre var(--creme) */
}

/* ---------------------------------------------------------------
2) Contraste tipográfico do subtítulo (.hero-tag) e da descrição (.hero p)
--------------------------------------------------------------- */
.hero-tag{
color: var(--texto-hero-contraste);
font-weight: 600;
}
.hero p{
color: var(--texto-hero-contraste);
line-height: 1.75;
font-weight: 450;
}

/* ---------------------------------------------------------------
3) Respiro / espaçamento — sensação de luxo
--------------------------------------------------------------- */
.hero{
padding: 112px 0 100px;
}
.hero .container{
gap: 64px;
}
.hero-tag{
margin-bottom: 24px;
padding: 9px 22px;
}
.hero h1{
margin-bottom: 26px;
letter-spacing: -0.01em;
}
.hero p{
margin-bottom: 40px;
}
.hero-botoes{
gap: 20px;
}

@media (max-width:900px){
.hero{ padding: 72px 0 64px; }
}

/* ---------------------------------------------------------------
4) Badges flutuantes — integração mais refinada
--------------------------------------------------------------- */
.selo-flutuante{
padding: 13px 20px;
border-radius: 14px;
background: rgba(255,255,255,.9);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 14px 34px rgba(107,76,71,.14), 0 0 0 1px rgba(177,119,113,.07);
border: 1px solid rgba(236,214,206,.75);
}
.selo-1{ top:12%; left:2%; }
.selo-2{ bottom:12%; right:2%; }

@keyframes heroSeloEntrada{
from{ opacity:0; transform:translateY(14px); }
to{ opacity:1; transform:translateY(0); }
}
@keyframes heroSeloFlutuar{
0%,100%{ transform:translateY(0); }
50%{ transform:translateY(-6px); }
}

@media (prefers-reduced-motion: no-preference){
.selo-1{
animation:
heroSeloEntrada .6s cubic-bezier(.16,1,.3,1) .35s both,
heroSeloFlutuar 5s ease-in-out 1.1s infinite;
}
.selo-2{
animation:
heroSeloEntrada .6s cubic-bezier(.16,1,.3,1) .55s both,
heroSeloFlutuar 5.6s ease-in-out 1.35s infinite;
}
}

/* ---------------------------------------------------------------
5) Botões principais — feedback físico de clique
--------------------------------------------------------------- */
.btn{
transition:
transform .22s cubic-bezier(.22,.99,.44,1),
box-shadow .22s cubic-bezier(.22,.99,.44,1),
background-color .22s ease,
color .22s ease;
}
.btn:active{
transform: scale(.97);
}
.btn-primario:active{
box-shadow: 0 3px 10px rgba(107,76,71,.16);
}
.btn-whatsapp:active{
box-shadow: 0 3px 10px rgba(107,76,71,.16);
}
.btn-secundario:active{
background: var(--ouro);
color: var(--branco);
}

@media (prefers-reduced-motion: reduce){
.btn, .btn:active{ transition:none; transform:none; }
}

/* ---------------------------------------------------------------
6) Links do menu — sublinhado com origem central + pulso de clique
--------------------------------------------------------------- */
.menu a::after{
left: 50%;
width: 0;
transform: translateX(-50%);
transition: width .24s cubic-bezier(.22,.99,.44,1);
}
.menu a:hover::after{ width:100%; }

.menu a{
transition: opacity .2s cubic-bezier(.22,.99,.44,1);
}
.menu a:active{ opacity:.6; }

/* classe aplicada via js/hero-microinteracoes.js para reforçar o
feedback de clique em telas touch (onde :active nem sempre é
percebido a tempo) */
@keyframes menuLinkPulso{
0%{ opacity:1; }
40%{ opacity:.5; }
100%{ opacity:1; }
}
.menu a.pulso-clique{
animation: menuLinkPulso .3s cubic-bezier(.22,.99,.44,1);
}

@media (prefers-reduced-motion: reduce){
.menu a.pulso-clique{ animation:none; }
}