/* Depoimentos e cards do Método preservados. */
/* Depoimentos reais: escrita editorial, prints abertos em tamanho original no clique. */
.testimonials{position:relative}
.testimonials:before{content:"";position:absolute;top:0;left:0;right:0;border-top:1px solid var(--line)}
.testimonials-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:44px}
.testimonials-heading h2{margin-top:14px}
.testimonials-heading>p{max-width:410px;margin:0;color:var(--muted);line-height:1.7;font-size:13px}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.testimonial-card{display:flex;flex-direction:column;min-width:0;background:linear-gradient(155deg,#3C3032,#302829);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:25px;transition:transform .3s ease,border-color .3s ease}
.testimonial-card:hover{transform:translateY(-4px);border-color:rgba(111,29,39,.45)}
.testimonial-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:20px}
.testimonial-num{font-size:10px;color:#BFAEA5;font-weight:800;letter-spacing:.13em}
.testimonial-tag{font-size:9px;color:#F5EBDD;font-weight:800;letter-spacing:.1em;text-align:right}
.testimonial-card blockquote{font-size:clamp(17px,1.5vw,22px);font-weight:600;line-height:1.48;letter-spacing:-.035em;margin:26px 0 14px}
.testimonial-context{font-size:11px;color:var(--muted);line-height:1.55;margin:0 0 24px}
.testimonial-proof{position:relative;display:block;overflow:hidden;border-radius:14px;margin-top:auto;border:1px solid rgba(255,255,255,.08);background:#292324;color:white}
.testimonial-proof img{display:block;width:100%;height:172px;object-fit:cover;object-position:center top;transition:transform .3s ease,filter .3s ease}
.testimonial-proof:hover img{transform:scale(1.035)}
.testimonial-proof>span{position:absolute;inset:auto 0 0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:32px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.94));font-size:10px;font-weight:800;letter-spacing:.055em}
.testimonial-proof>span span{font-size:18px;font-weight:400}
.testimonial-bottom{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.testimonial-bottom p{font-size:12px;color:var(--muted);line-height:1.6;max-width:510px;margin:0}
.testimonial-bottom .btn{flex:none}
@media(max-width:990px){.testimonials-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.testimonial-card:last-child{grid-column:1/-1}.testimonial-heading h2{font-size:clamp(35px,6vw,62px)}}
@media(max-width:760px){.hero-word-window{width:9.1ch}.testimonials-heading{display:block}.testimonials-heading>p{margin-top:22px}.testimonials-grid{grid-template-columns:1fr;gap:14px}.testimonial-card:last-child{grid-column:auto}.testimonial-card{padding:22px}.testimonial-card blockquote{font-size:19px}.testimonial-proof img{height:190px}.testimonial-bottom{flex-direction:column;align-items:stretch}.testimonial-bottom .btn{width:100%}.cta-motion .cta-hover-label{font-size:inherit}}
@media(prefers-reduced-motion:reduce){.hero-word{transition:none}.hero-word:not(.is-active){display:none}.cta-motion *,.testimonial-card,.testimonial-proof img{transition:none!important}.cta-motion .cta-dot{display:none}.cta-motion:is(:hover,:focus-visible) .cta-label{opacity:1;transform:none}.cta-motion:is(:hover,:focus-visible) .cta-hover-label{opacity:0}}


/* Ajuste: a classe .reveal.visible anulava transform de hover nos cards.
   Esta camada carregada por último restaura a transição e torna o feedback evidente. */
.intro .feature-card.reveal.visible,
.plans .plan-card.reveal.visible {
  transition: transform .36s cubic-bezier(.2,.8,.2,1), border-color .36s ease, box-shadow .36s ease, background .36s ease;
}
.intro .feature-card::before {
  content:"";position:absolute;top:0;left:0;height:4px;width:0;
  background:linear-gradient(90deg,var(--red),#B97983);
  box-shadow:0 0 22px rgba(111,29,39,.65);
  z-index:1;transition:width .4s cubic-bezier(.16,1,.3,1);
}
.intro .feature-card.reveal.visible:hover,
.intro .feature-card.reveal.visible:focus-within,
.intro .feature-card.reveal.visible:active {
  transform:translateY(-11px) scale(1.025);
  border-color:rgba(111,29,39,.9);
  background:linear-gradient(155deg,rgba(111,29,39,.22),rgba(27,27,31,.94) 60%);
  box-shadow:0 22px 50px rgba(111,29,39,.2),0 0 0 1px rgba(111,29,39,.12);
}
.intro .feature-card:hover::before,
.intro .feature-card:focus-within::before,
.intro .feature-card:active::before {width:100%}
.intro .feature-number {transition:color .32s ease,transform .32s ease,text-shadow .32s ease}
.intro .feature-card:hover .feature-number,
.intro .feature-card:active .feature-number {
  color:var(--red);transform:translateX(5px);
  text-shadow:0 0 24px rgba(111,29,39,.35)
}
.plans .plan-card.reveal.visible:hover,
.plans .plan-card.reveal.visible:focus-within{
  transform:translateY(-9px);
  border-color:rgba(111,29,39,.7);
  box-shadow:0 22px 52px rgba(111,29,39,.13)
}




/* O título conserva sua largura quando a palavra animada troca. */
.hero-word-window{display:inline-block;position:relative;width:9.25ch;max-width:100%;height:1.02em;vertical-align:bottom;overflow:hidden;color:var(--red);white-space:nowrap}
.hero-word{position:absolute;left:0;top:0;width:100%;opacity:0;transform:translateY(115%);pointer-events:none}
.hero-word.is-active{opacity:1;transform:none}

/* HoverButton fiel ao padrão original: ponto expansível, texto sai, texto com seta entra.
   O CSS também funciona em navegadores que informam pointer:coarse e suportam mouse. */
.cta-motion{
  --cta-fill:#6F1D27;
  --cta-contrast:#fff;
  position:relative;isolation:isolate;overflow:hidden;min-width:0;
  border-radius:999px;text-align:center;cursor:pointer;touch-action:manipulation;
  transition:transform .22s ease,box-shadow .22s ease,border-color .23s ease,background-color .1s .18s;
}
.cta-motion.btn-primary,.cta-motion.header-cta,.featured .cta-motion{
  --cta-fill:#fff;--cta-contrast:#171817;
}
.cta-motion>.react-hover-button{
  position:relative;display:inline-flex;justify-content:center;align-items:center;
  min-height:100%;width:100%;gap:8px;box-sizing:border-box;
  font:inherit;letter-spacing:inherit;line-height:1.25;overflow:hidden;border-radius:inherit;
  isolation:isolate;pointer-events:none;
}
.cta-motion .cta-v2-fill{
  position:absolute;z-index:0;inset:0;pointer-events:none;
  background:var(--cta-fill);
  /* O preenchimento começa invisível: o círculo de 4px gerava pontos sobre o texto. */
  clip-path:circle(0px at 20% 50%);
  opacity:0;
  transition:clip-path .45s cubic-bezier(.18,.82,.24,1),opacity .06s ease;
  will-change:clip-path;
}
.cta-motion .cta-v2-normal{
  position:relative;z-index:2;display:inline-block;
  min-width:0;flex:0 1 auto;
  color:inherit;opacity:1;transform:translate3d(0,0,0);
  transition:opacity .20s ease,transform .3s cubic-bezier(.2,.8,.2,1);
}
.cta-motion .cta-v2-hover{
  position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
  gap:9px;padding:0 5px;pointer-events:none;
  opacity:0;transform:translate3d(28px,0,0);
  color:var(--cta-contrast)!important;line-height:1.2;
  transition:opacity .21s .08s ease,transform .32s cubic-bezier(.2,.8,.2,1);
}
.cta-motion .cta-v2-hover span{font:inherit;color:inherit}
.cta-motion .cta-v2-hover-arrow{display:block;flex:0 0 19px;width:19px;height:19px;stroke:currentColor!important;opacity:1!important}
.cta-motion .cta-v2-mobile-arrow{
  position:relative;z-index:2;display:none;flex:0 0 19px;width:19px;height:19px;
  stroke:currentColor;
}
/* Não usar media(hover:hover): no navegador interno pode haver hover com pointer coarse. */
.cta-motion:is(:hover,:focus-visible){
  transform:translateY(-2px);
  background-color:var(--cta-fill)!important;
  border-color:var(--cta-fill)!important;
  box-shadow:0 13px 30px rgba(111,29,39,.22);
}
.cta-motion:is(:hover,:focus-visible) .cta-v2-fill{clip-path:circle(160% at 20% 50%);opacity:1}
.cta-motion:is(:hover,:focus-visible) .cta-v2-normal{opacity:0;transform:translate3d(-26px,0,0)}
.cta-motion:is(:hover,:focus-visible) .cta-v2-hover{
  opacity:1;transform:translate3d(0,0,0);color:var(--cta-contrast)!important;
}
.cta-motion:is(:hover,:focus-visible) .cta-v2-hover-arrow{stroke:var(--cta-contrast)!important}
.cta-motion:focus-visible,.testimonial-proof:focus-visible{outline:2px solid #fff;outline-offset:4px}

/* Mobile: nada de hover preso após o toque, nem duas camadas animadas. */
@media(max-width:760px){
  .hero-word-window{width:9.1ch}
  .cta-motion .cta-v2-fill,.cta-motion .cta-v2-hover{display:none!important}
  .cta-motion .cta-v2-normal{opacity:1!important;transform:none!important;transition:none!important}
  .cta-motion .cta-v2-mobile-arrow{display:block!important;color:inherit!important;opacity:1!important}
  .cta-motion:is(:hover,:focus-visible){transform:none;box-shadow:none}
  .cta-motion.btn-primary:is(:hover,:focus-visible),
  .cta-motion.header-cta:is(:hover,:focus-visible),
  .featured .cta-motion:is(:hover,:focus-visible){
    background-color:var(--red)!important;border-color:var(--red)!important;color:#fff!important
  }
  .cta-motion.btn-ghost:is(:hover,:focus-visible){background-color:rgba(255,255,255,.03)!important;color:#fff!important}
  .cta-motion.plan-btn:is(:hover,:focus-visible){background-color:transparent!important;border-color:var(--line)!important;color:#fff!important}
  .featured .cta-motion.plan-btn:is(:hover,:focus-visible){background-color:var(--red)!important;border-color:var(--red)!important;color:#fff!important}
  .cta-motion:active{transform:scale(.99)}
}
@media(prefers-reduced-motion:reduce){
  .cta-motion,.cta-motion *{animation:none!important;transition:none!important}
  .cta-motion:is(:hover,:focus-visible){transform:none}
}
a:is(.btn,.plan-btn,.header-cta):not(.cta-motion)::after{
  content:"→";display:inline-block;flex:none;margin-left:12px;
  font:normal 20px/1 Arial,sans-serif;color:inherit;vertical-align:middle;
}


/* O CTA principal mantém a legenda + seta em uma linha no desktop. */
@media(min-width:761px){
  .hero-actions .cta-motion.btn-primary{min-width:235px;padding-inline:12px}
  .hero-actions .cta-motion.btn-primary .cta-v2-hover{white-space:nowrap}
  .header-cta.cta-motion{min-width:164px;padding-inline:10px}
  .header-cta.cta-motion .cta-v2-hover{white-space:nowrap}
}


/* v5: correção de rótulos que quebravam e ficavam cortados durante o hover.
   Não altera links, imagem hero ou lógica React. */
@media (min-width: 761px){
  .cta-motion .cta-v2-hover {
    gap:5px;
    padding-inline:0;
    white-space:nowrap;
    box-sizing:border-box;
    flex-wrap:nowrap;
  }
  .cta-motion .cta-v2-hover > span {
    white-space:nowrap;
    flex:0 0 auto;
    display:inline-block;
    line-height:1.2;
  }
  .cta-motion .cta-v2-hover-arrow {
    flex:0 0 19px;
  }
  .header-cta.cta-motion {
    padding-inline:7px;
  }
  /* Evita texto do hover cortado nos CTAs mais compridos. */
  .results .cta-motion.btn-primary,
  .testimonials .cta-motion.btn-primary {
    min-width:max-content;
    padding-inline:18px;
  }
}
/* Nunca renderizar os dois textos ao mesmo tempo no meio da transição. */
.cta-motion .cta-v2-normal {
  transition:opacity .12s ease, transform .26s cubic-bezier(.2,.8,.2,1);
}
.cta-motion .cta-v2-hover {
  transition:opacity .16s ease,transform .30s cubic-bezier(.2,.8,.2,1);
}
.cta-motion:not(:hover):not(:focus-visible) .cta-v2-hover {
  transition:opacity .10s ease,transform .24s ease;
}
@media (min-width:761px){
  .cta-motion:is(:hover,:focus-visible) .cta-v2-hover {
    transition:opacity .18s .13s ease,transform .30s cubic-bezier(.2,.8,.2,1);
  }
}

/* Print real em cima, ação clicável em faixa separada: nenhuma legenda sobre a mensagem. */
.testimonial-proof {
  display:flex;
  flex-direction:column;
}
.testimonial-proof img {
  width:100%;
  height:185px;
  object-fit:cover;
  object-position:center top;
  flex:none;
}
.testimonial-proof > span {
  position:relative;
  inset:auto;
  min-height:42px;
  padding:11px 13px;
  background:#292324;
  line-height:1.35;
  flex:none;
}
.testimonial-proof > span span{font-size:18px}
.testimonial-proof:hover > span {background:#3C3133}
@media (max-width:760px){
  .testimonial-proof img {height:195px}
  .testimonial-proof > span {min-height:44px}
}


/* Reserva espaço real no flex para a seta do hover sem mostrar uma segunda seta. */
@media (min-width:761px){
  .cta-motion .react-hover-button::after{
    content:"";display:block;flex:0 0 26px;height:1px;visibility:hidden;pointer-events:none;
  }
}