/* Canil Gelbes Wasser — motion das paginas de filhotes a venda (v40). Prefixo vt- (venta).
   Regras: todo o conteudo esta no HTML e visivel sem JS e sem CSS; movimento so em transform (nunca opacity no conteudo:
   a animacao que nao roda nao pode esconder texto). Pseudo-elementos decorativos podem usar opacity.
   O h1 e a resposta curta (LCP) deslizam no carregamento sem esconder nada. prefers-reduced-motion desliga tudo. */

/* 0) fontes de reserva com a largura da fonte web (size-adjust medido no browser): a troca de fonte nao move o texto */
@font-face{font-family:'Cormorant Garamond Fallback';src:local('Times New Roman'),local('TimesNewRomanPSMT'),local('Times');size-adjust:97%;ascent-override:92%;descent-override:28%}
@font-face{font-family:'Syne Fallback';src:local('Arial'),local('Helvetica');size-adjust:99.2%}
@font-face{font-family:'DM Mono Fallback';src:local('Courier New'),local('CourierNewPSMT'),local('Menlo');size-adjust:100%}
.esc-rotulo,.esc-escada b,.esc-tabela caption,.esc-tabela thead th,.esc-tabela tbody th,.esc-passos li::before,.esc-metodo h2,.ldt-cta,.esc-tabela td::before{font-family:'Syne','Syne Fallback',sans-serif}
.esc-rotulo .esc-data,.esc-tabela td small{font-family:'DM Mono','DM Mono Fallback',monospace}

/* 1) entrada do hero no carregamento (stagger; so transform) */
@media (prefers-reduced-motion:no-preference){
  .vt-hero>*{animation:vt-rise .7s cubic-bezier(.16,1,.3,1) both}
  .vt-hero>:nth-child(2){animation-delay:.06s}
  .vt-hero>:nth-child(3){animation-delay:.14s}
  .vt-hero>:nth-child(4){animation-delay:.22s}
  .vt-hero .b-eyebrow::before,.vt-hero .b-eyebrow::after{animation:vt-grow .8s cubic-bezier(.16,1,.3,1) .25s both}
  .vt-hero .b-eyebrow::before{transform-origin:right center}
  .vt-hero .b-eyebrow::after{transform-origin:left center}
}
@keyframes vt-rise{from{transform:translateY(16px)}to{transform:none}}
@keyframes vt-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* 2) secoes entram com a rolagem (CSS puro onde ha animation-timeline; senao, vt.js marca o que esta abaixo da dobra) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    [data-vt-rv]{animation:vt-rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  }
}
.vt-pre{transform:translateY(14px)}
.vt-in{transform:none;transition:transform .55s cubic-bezier(.16,1,.3,1)}

/* legenda: fora da curva do canto arredondado (o overflow:hidden do esc.css cortava a 1a letra) */
.esc-tabela caption{padding-left:14px;padding-right:14px}

/* 3) tabela das camadas: realce da linha e sublinhado do preco (pseudo-elemento decorativo) */
.vt-camadas,.vt-camadas tbody,.vt-camadas tr,.vt-camadas th,.vt-camadas td{display:block;width:100%}
.vt-camadas{background:transparent;border:0;border-radius:0;overflow:visible}
.vt-camadas caption{display:block;width:100%;padding:0 0 .7rem}
.vt-camadas thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vt-camadas tbody{display:grid;gap:1rem}
@media (min-width:760px){.vt-camadas tbody{grid-template-columns:1fr 1fr}}
.vt-camadas tbody tr{background:#fff;border:1px solid #D9D2C5;border-radius:14px;padding:.5rem 0 .6rem;box-shadow:0 1px 0 rgba(26,24,20,.03);transition:box-shadow .25s cubic-bezier(.2,.8,.2,1),translate .25s cubic-bezier(.2,.8,.2,1)}
.vt-camadas tbody tr:first-child{border-top:1px solid #D9D2C5}
.vt-camadas tbody th{border-top:0;padding:.85rem 1rem .3rem;width:100%;font-size:1rem;color:#1A1814}
.vt-camadas tbody th::before{content:'';display:inline-block;width:22px;height:1.5px;background:#A8842E;vertical-align:middle;margin-right:.6rem}
.vt-camadas td{border-top:0;padding:.35rem 1rem .6rem}
.vt-camadas td::before{content:attr(data-col);display:block;font-family:'Syne','Syne Fallback',sans-serif;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#7D6220;margin-bottom:.15rem}
.vt-camadas tbody tr:hover,.vt-camadas tbody tr:focus-within{box-shadow:inset 3px 0 0 #C9A84C,0 10px 26px rgba(26,24,20,.08);translate:0 -2px}
.vt-camadas tbody th{transition:color .25s}
.vt-camadas tbody tr:hover th{color:#7D6220}
.vt-precio{position:relative;display:inline-block;font-weight:700;color:#1A1814}
.vt-precio::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:2px;background:#C9A84C;transform:scaleX(0);transform-origin:left center}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .vt-precio::after{animation:vt-grow-l linear both;animation-timeline:view();animation-range:entry 20% entry 90%}
  }
}
@media not all and (prefers-reduced-motion:no-preference){.vt-precio::after{transform:scaleX(1)}}
@supports not (animation-timeline: view()){.vt-precio::after{transform:scaleX(1)}}
@keyframes vt-grow-l{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* situacao da camada: ponto que pulsa quando a lista esta aberta */
.vt-status{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;color:#1A1814}
.vt-status::before{content:'';flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#A8842E;position:relative}
.vt-open::before{background:#2E8B57;box-shadow:0 0 0 0 rgba(46,139,87,.45)}
@media (prefers-reduced-motion:no-preference){.vt-open::before{animation:vt-pulse 2.4s cubic-bezier(.2,.8,.2,1) infinite}}
@keyframes vt-pulse{0%{box-shadow:0 0 0 0 rgba(46,139,87,.45)}70%{box-shadow:0 0 0 8px rgba(46,139,87,0)}100%{box-shadow:0 0 0 0 rgba(46,139,87,0)}}

/* 4) cartoes (passos, limite, metodo) e escada: resposta ao toque/hover */
.esc-passos li,.esc-limite,.esc-metodo{transition:translate .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){
  .esc-passos li:hover{translate:0 -2px;box-shadow:0 10px 24px rgba(26,24,20,.07)}
  .esc-passos li:hover::before{background:#C9A84C;color:#0A0A0A}
}
.esc-passos li::before{transition:background .25s,color .25s}
.esc-escada a{transition:translate .2s cubic-bezier(.2,.8,.2,1)}
.esc-escada a:hover{translate:0 -2px}

/* 5) botoes e links de acao */
.vt-cta{position:relative;gap:.6rem;box-shadow:0 0 0 0 rgba(201,168,76,0);transition:background .18s,transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .25s cubic-bezier(.2,.8,.2,1)}
.vt-cta::after{content:'';width:9px;height:9px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.vt-cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(201,168,76,.35)}
.vt-cta:hover::after{transform:translate(4px,0) rotate(45deg)}
.vt-cta:active{transform:translateY(0) scale(.98);box-shadow:0 2px 8px rgba(201,168,76,.25)}
.cta-box p:last-child{margin:1.4rem auto 0;max-width:440px;font-size:.92rem;color:#b8b0a4}
.vt-wa{color:#C9A84C;font-weight:700;text-decoration:underline;text-decoration-color:rgba(201,168,76,.45);text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .25s,color .25s}
.vt-wa:hover,.vt-wa:focus-visible{color:#E2C978;text-decoration-color:#E2C978}
@media (max-width:420px){.vt-cta{padding:.75rem 1.1rem;font-size:.66rem;letter-spacing:.1em;line-height:1.35;text-align:center}}
/* botao flutuante sai da tela (so transform) enquanto o bloco do CTA, que ja tem o WhatsApp, esta visivel; vt.js marca */
.vt-float{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.vt-float-hide{transform:translateY(140%)}
.vt-float-hide::before{animation:none!important}
.b-head-cta{transition:background .2s,transform .18s cubic-bezier(.2,.8,.2,1)}
.b-head-cta:hover{transform:translateY(-1px)}
.b-head-cta:active{transform:scale(.97)}
.vt-link{transition:color .2s}
.vt-link:hover{color:#8A6D24}
/* botao flutuante do WhatsApp: anel decorativo (pseudo-elemento) */
.vt-float{position:fixed}
.vt-float::before{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #25A84C;transform:scale(1);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){.vt-float::before{animation:vt-ring 3.2s cubic-bezier(.2,.8,.2,1) 1.2s infinite}}
@keyframes vt-ring{0%{transform:scale(1);opacity:.55}60%{transform:scale(1.6);opacity:0}100%{transform:scale(1.6);opacity:0}}
.vt-float:active:not(.vt-float-hide){transform:scale(.95)}

/* contraste: rotulos dourados pequenos em tom mais escuro (>= 4,5:1 sobre #F7F4EF e #EFEAE2) */
.esc-metodo h2,.esc-escada b,.ldt-fontes a,.esc-tabela caption,.esc-rotulo,.esc-tabela td::before{color:#7D6220}

/* 6) FAQ: resposta desliza ao abrir (so transform) e chevron ja gira no ldt.css */
@media (prefers-reduced-motion:no-preference){.ldt-faq details[open]>p{animation:vt-rise .35s cubic-bezier(.16,1,.3,1) both}}
.ldt-faq summary{transition:color .2s}
.ldt-faq summary:hover{color:#8A6D24}

/* 7) impressao e reduced-motion: nada se move, nada fica deslocado */
@media print{.vt-hero>*,[data-vt-rv],.vt-pre,.vt-in,.vt-precio::after,.vt-open::before,.vt-float::before,.ldt-faq details[open]>p{animation:none!important;transform:none!important;transition:none!important}}
@media (prefers-reduced-motion:reduce){
  .vt-hero>*,.vt-hero .b-eyebrow::before,.vt-hero .b-eyebrow::after,[data-vt-rv],.vt-precio::after,.vt-open::before,.vt-float::before,.ldt-faq details[open]>p{animation:none!important;transform:none!important}
  .vt-pre{transform:none}
  .vt-float{transition:none}
  .vt-in,.vt-camadas tbody tr,.vt-camadas tbody th,.esc-passos li,.esc-passos li::before,.esc-escada a,.vt-cta,.vt-cta::after,.vt-wa,.b-head-cta,.vt-link,.ldt-faq summary{transition:none}
  .vt-camadas tbody tr:hover,.esc-passos li:hover,.esc-escada a:hover,.vt-cta:hover,.b-head-cta:hover{transform:none;translate:none}
}