/*
Theme Name: Fases Bioativos
Theme URI: https://fasesbioativos.com.br
Author: Loop Digital
Author URI: https://www.instagram.com/loopdigital.br
Description: Tema exclusivo da Fases Bioativos — home e páginas de produto com conteúdo 100% editável via ACF (banners, preços, descrições, resultados e vídeos).
Version: 1.0.1
Requires PHP: 7.4
License: Proprietary
Text Domain: fases
*/

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:#FEF2EA;font-family:'Inter',sans-serif;color:#3a2730;-webkit-font-smoothing:antialiased;}
::selection{background:#BA6895;color:#fff;}
img{max-width:100%;}
a{color:inherit;}

/* carrosséis horizontais */
.strip{scrollbar-width:none;cursor:grab;}
.strip::-webkit-scrollbar{display:none;}
.strip.dragging{cursor:grabbing;scroll-snap-type:none !important;}

/* animações do export original */
@keyframes annin{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
@keyframes pulsehb{0%,100%{box-shadow:0 8px 24px rgba(73,135,108,.35);}50%{box-shadow:0 8px 34px rgba(73,135,108,.6);}}
.fases-ann{display:inline-block;animation:annin .5s ease;}

/* navegação */
.fases-nav-desktop{display:flex;gap:20px;flex:1;flex-wrap:wrap;margin-left:22px;font-size:14px;font-weight:500;color:#5a3f4d;}
.fases-nav-desktop a{text-decoration:none;color:#5a3f4d;}
.fases-menu-mobile{display:none;border-top:1px solid rgba(186,104,149,.18);background:#FEF2EA;padding:6px 20px 14px;}
.fases-menu-mobile a{display:block;text-decoration:none;padding:13px 4px;font-size:15px;font-weight:500;color:#5a3f4d;border-bottom:1px solid rgba(186,104,149,.12);}
.fases-burger{display:none;cursor:pointer;color:#5a3f4d;align-items:center;}
@media (max-width:819px){
  .fases-nav-desktop{display:none;}
  .fases-burger{display:flex;}
  .fases-menu-mobile.open{display:block;}
}
@media (min-width:820px){
  .fases-menu-mobile{display:none !important;}
}

/* seletor de plano (produto) */
.fases-plan-row{position:relative;display:flex;gap:12px;align-items:center;border-radius:14px;padding:13px 14px;cursor:pointer;border:1.5px solid #ecd9e2;background:#fff;margin-top:10px;transition:border .15s, background .15s;}
.fases-plan-row.selected{border:1.5px solid #BA6895;background:#fdf3f8;}
.fases-plan-radio{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid #d9b3c8;background:#fff;transition:all .15s;}
.fases-plan-row.selected .fases-plan-radio,.fases-plan-card.selected .fases-plan-radio{border:6px solid #BA6895;}
.fases-plan-card{position:relative;flex:1 1 280px;max-width:340px;background:#FEF2EA;border-radius:20px;padding:26px 22px 22px;cursor:pointer;border:2px solid transparent;text-align:left;transition:all .15s;}
.fases-plan-card.selected{border:2px solid #fff;box-shadow:0 18px 44px rgba(0,0,0,.22);transform:translateY(-3px);}

/* galeria do produto */
.fases-thumb{flex:1;aspect-ratio:1/1;border-radius:12px;overflow:hidden;cursor:pointer;border:2px solid transparent;opacity:.75;transition:all .15s;background:#f1e3da;}
.fases-thumb.active{border:2px solid #BA6895;opacity:1;}
.fases-gallery-main img{width:100%;height:100%;object-fit:cover;display:block;}

/* FAQ acordeão */
.fases-faq-item{background:#fff;border-radius:16px;overflow:hidden;margin-bottom:12px;}
.fases-faq-q{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 20px;cursor:pointer;font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;color:#3a2730;}
.fases-faq-q span.plus{flex:none;font-size:20px;color:#BA6895;transition:transform .2s;}
.fases-faq-item.open .fases-faq-q span.plus{transform:rotate(45deg);}
.fases-faq-a{display:none;padding:0 20px 18px;font-size:14.5px;line-height:1.6;color:#5f4a55;}
.fases-faq-item.open .fases-faq-a{display:block;}

/* barra fixa de compra */
.fases-buybar{display:none;}
@media (max-width:819px){
	.fases-buybar{position:fixed;left:0;right:0;bottom:0;z-index:55;background:rgba(254,242,234,.97);backdrop-filter:blur(10px);border-top:1px solid rgba(186,104,149,.25);padding:10px 16px;display:flex;align-items:center;gap:14px;box-shadow:0 -8px 24px rgba(58,39,48,.1);text-decoration:none;transform:translateY(110%);transition:transform .25s ease;}
	.fases-buybar.show{transform:translateY(0);}
}

/* whatsapp flutuante */
.fases-whats{position:fixed;right:18px;bottom:18px;z-index:50;width:54px;height:54px;border-radius:50%;background:#49876C;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(73,135,108,.5);cursor:pointer;animation:floaty 3s ease-in-out infinite;transition:bottom .25s ease;}
.fases-whats.lifted{bottom:88px;}

/* hero slider (home) */
.fases-hero-track{display:flex;transition:transform .65s cubic-bezier(.4,0,.2,1);}
.fases-hero-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:all .2s;}
.fases-hero-dot.active{background:#fff;width:22px;border-radius:6px;}

/* utilidades */
.fases-hide{display:none !important;}

/* barra de cookies (LGPD) */
.fases-cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(58,39,48,.97);backdrop-filter:blur(10px);color:#FEF2EA;padding:14px 20px;display:none;box-shadow:0 -8px 24px rgba(58,39,48,.25);}
.fases-cookiebar.show{display:block;}
.fases-cookiebar-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.fases-cookiebar-text{flex:1 1 320px;min-width:260px;font-size:13.5px;line-height:1.5;}
.fases-cookiebar-text a{color:#ffd9ec;font-weight:600;text-decoration:underline;}
.fases-cookiebar-actions{display:flex;gap:10px;flex:none;}
.fases-cookiebar-accept{border:none;background:#49876C;color:#fff;font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;padding:11px 24px;border-radius:12px;cursor:pointer;}
.fases-cookiebar-decline{border:1.5px solid rgba(254,242,234,.4);background:transparent;color:#FEF2EA;font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;padding:11px 20px;border-radius:12px;cursor:pointer;}

/* corpo dos posts do blog */
.fases-post-body h2{font-family:'Newsreader',serif;font-weight:500;color:#8a3f6b;font-size:1.6rem;margin:1.6em 0 .5em;}
.fases-post-body h3{font-family:'Poppins',sans-serif;font-weight:600;color:#3a2730;font-size:1.2rem;margin:1.4em 0 .4em;}
.fases-post-body p{margin:0 0 1.1em;}
.fases-post-body a{color:#BA6895;font-weight:600;}
.fases-post-body img{border-radius:14px;margin:1em 0;}
.fases-post-body ul,.fases-post-body ol{margin:0 0 1.1em 1.4em;line-height:1.7;}
.fases-post-body blockquote{border-left:3px solid #BA6895;padding-left:18px;margin:1.2em 0;color:#6a4f5b;font-style:italic;}

/* paginação do blog */
.fases-post-body + div .page-numbers,.pagination .page-numbers{display:inline-block;padding:9px 15px;margin:0 3px;border-radius:10px;background:#fff;color:#8a3f6b;text-decoration:none;font-weight:600;font-size:14px;box-shadow:0 4px 12px rgba(58,39,48,.06);}
.page-numbers.current{background:#BA6895;color:#fff;}

/* ============================================
   MOVIMENTO / ANIMAÇÕES (sutis e elegantes)
   ============================================ */

/* aparecer ao rolar — estado inicial */
.fases-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);will-change:opacity,transform;}
.fases-reveal.is-visible{opacity:1;transform:translateY(0);}
/* leve atraso em cascata para grupos de cards */
.fases-reveal.d1{transition-delay:.08s;}
.fases-reveal.d2{transition-delay:.16s;}
.fases-reveal.d3{transition-delay:.24s;}

/* hover nos cards de produto (carrossel da linha, loja) */
#strip-produtos > div,#fases-loja-grid > div{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1);}
#strip-produtos > div:hover,#fases-loja-grid > div:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(58,39,48,.16);}

/* hover nos cards de fase (home) */
a[href] > div[style*="height:28px"]{will-change:transform;}

/* frasco flutuando (destaque + galeria de produto) */
@keyframes fases-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.fases-float{animation:fases-float 4.5s ease-in-out infinite;}

/* números que contam — sem salto de layout */
.fases-count{font-variant-numeric:tabular-nums;}

/* respeitar preferência de menos movimento (acessibilidade) */
@media (prefers-reduced-motion: reduce){
	.fases-reveal{opacity:1 !important;transform:none !important;transition:none !important;}
	.fases-float{animation:none !important;}
	#strip-produtos > div:hover,#fases-loja-grid > div:hover{transform:none;}
}

/* ============================================
   SETAS DOS CARROSSÉIS (padrão do modelo)
   círculo branco pequeno, seta fina e suave
   ============================================ */
.fases-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:50px;height:50px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;box-shadow:0 6px 20px rgba(58,39,48,.2);transition:transform .18s ease,box-shadow .18s ease;}
.fases-arrow:hover{transform:translateY(-50%) scale(1.08);box-shadow:0 8px 26px rgba(58,39,48,.28);}
.fases-arrow svg{width:20px;height:20px;stroke:#3a2730;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.fases-arrow.left{left:-6px;}
.fases-arrow.right{right:-6px;}
@media (max-width:600px){
	.fases-arrow{width:38px;height:38px;}
	.fases-arrow svg{width:16px;height:16px;}
}

/* opções do quiz "Qual cuidado você procura hoje?" */
.fases-quiz-opt{transition:border .15s,background .15s;}
.fases-quiz-opt:hover{border:1.5px solid #BA6895 !important;background:#fdf3f8;}

/* cards "Para qual fase": 4 colunas desktop, 2 no mobile (igual ao design) */
@media (max-width:819px){
	.fases-fase-grid{grid-template-columns:repeat(2,1fr) !important;}
}

/* Loja: 2 colunas no mobile (igual ao design), gap menor */
@media (max-width:819px){
	#fases-loja-grid{grid-template-columns:1fr 1fr !important;gap:11px !important;}
}

/* Setas no espaço colorido, fora dos cards (igual ao design) — desktop.
   O wrapper .position:relative que envolve o carrossel ganha padding lateral,
   criando a faixa onde as setas ficam sem cobrir os cards. */
@media (min-width:820px){
      .fases-carousel{padding-left:82px;padding-right:82px;}
      .fases-arrow.left{left:10px;}
      .fases-arrow.right{right:10px;}
}
@media (max-width:819px){
      .fases-carousel{padding-left:56px;padding-right:56px;}
      .fases-arrow.left{left:4px;}
      .fases-arrow.right{right:4px;}
}

/* seletor 60/90 nos cards da loja */
.fases-seg{flex:1;border:none;border-radius:10px;padding:8px 6px;font-family:'Poppins',sans-serif;font-weight:600;font-size:12.5px;line-height:1.2;cursor:pointer;background:transparent;color:#8a3f6b;transition:background .15s,color .15s,box-shadow .15s;}
.fases-seg.selected{background:#fff;color:#BA6895;box-shadow:0 3px 10px rgba(58,39,48,.12);}

/* blog: hover dos cards e botão Ver mais (referência) */
.fases-blog-card{transition:transform .15s,box-shadow .15s;}
.fases-blog-card:hover{transform:translateY(-4px);box-shadow:0 20px 42px rgba(58,39,48,.14) !important;}
.fases-vermais a{border:1.5px solid #BA6895;background:transparent;color:#8a3f6b;font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;padding:14px 36px;border-radius:14px;text-decoration:none;transition:all .15s;display:inline-block;}
.fases-vermais a:hover{background:#BA6895;color:#fff;}

/* contato: hover dos cards de canal */
.fases-canal{transition:transform .15s,box-shadow .15s;}
.fases-canal:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(58,39,48,.12) !important;}

/* ============================================
   CONTEÚDO DO POST (o que a cliente escreve no editor)
   Estilos automáticos iguais à referência.
   ============================================ */
.fases-post-content{font-size:16px;line-height:1.75;color:#4a3a42;}
.fases-post-content p{margin:0 0 18px;}
.fases-post-content h2{font-family:'Newsreader',serif;font-weight:600;font-size:clamp(1.4rem,3.2vw,1.8rem);line-height:1.2;color:#3a2730;margin:34px 0 14px;}
.fases-post-content h3{font-family:'Newsreader',serif;font-weight:600;font-size:clamp(1.2rem,2.6vw,1.4rem);color:#3a2730;margin:28px 0 12px;}
.fases-post-content strong{color:#3a2730;font-weight:600;}
.fases-post-content a{color:#BA6895;font-weight:600;}
.fases-post-content ul{list-style:none;padding:0;margin:0 0 18px;}
.fases-post-content ul li{position:relative;padding-left:22px;margin-bottom:12px;}
.fases-post-content ul li::before{content:'';position:absolute;left:4px;top:10px;width:7px;height:7px;border-radius:50%;background:#BA6895;}
.fases-post-content ol{padding-left:22px;margin:0 0 18px;}
.fases-post-content ol li{margin-bottom:12px;}
.fases-post-content blockquote{margin:26px 0;padding:4px 0 4px 20px;border-left:3px solid #BA6895;font-family:'Newsreader',serif;font-style:italic;font-size:1.15rem;line-height:1.5;color:#BA6895;}
.fases-post-content blockquote p{margin:0;color:#BA6895;}
.fases-post-content img{max-width:100%;height:auto;border-radius:16px;}
.fases-post-content figure{margin:24px 0;}

/* avaliações: esconder avisos do WordPress (Conectado como..., campos obrigatórios) */
#avaliacoes .logged-in-as,
#avaliacoes .comment-notes,
#avaliacoes .required-field-message{display:none !important;}

/* submenu de produtos no menu mobile (Loja expande) */
.fases-submenu-loja{border-top:1px solid rgba(186,104,149,.12);}
.fases-submenu-loja-titulo{display:flex;align-items:center;justify-content:space-between;padding:13px 4px;font-size:15px;font-weight:600;color:#8a3f6b;cursor:pointer;}
.fases-submenu-loja-titulo svg{transition:transform .2s;}
.fases-submenu-loja.open .fases-submenu-loja-titulo svg{transform:rotate(180deg);}
.fases-submenu-loja-itens{display:none;padding:0 0 8px 14px;}
.fases-submenu-loja.open .fases-submenu-loja-itens{display:block;}
.fases-submenu-loja-itens a{display:block;padding:11px 4px;font-size:14.5px;color:#5a3f4d;text-decoration:none;border-bottom:1px solid rgba(186,104,149,.08);}
.fases-submenu-loja-itens a.fases-submenu-vertodos{color:#BA6895;font-weight:600;border-bottom:none;}

/* "Como usar" (produto): 1 coluna empilhada no mobile */
@media (max-width:819px){
	.fases-comousar-grid{grid-template-columns:1fr !important;}
}

/* corrige campos do formulário de contato estourando pra direita */
#form input, #form textarea, #form button { box-sizing: border-box; }