/*
 * Home (canvas: Main.dc.html, MainMobile.dc.html e HeroCard*.dc.html): estilos copiados do <style>
 * do canvas, sem mudança (DOC-51, DOC-52). O resto está em classes do Tailwind no template.
 */
section[id]{scroll-margin-top:68px}
@media (min-width:1024px){section[id]{scroll-margin-top:72px}}

/* Botões da abertura: variante escura (Main.dc.html) */
.btn--dark{--btn-blue:#00003F}
.btn--dark:not(:hover):not(:focus-visible){border-color:#FFFFFF}
.btn--dark .btn__face{text-shadow:none}

/* Cards que se revelam no hover (Benefícios e Como funciona) */
.hr-card{transition:transform .5s ease-in-out,opacity .5s ease-in-out,filter .5s ease-in-out,box-shadow .5s ease-in-out;box-shadow:0 6px 20px rgba(0,0,63,.06);will-change:transform}
.hr-cards:has(.hr-card:hover) .hr-card:not(:hover){transform:scale(.97);opacity:.6;filter:blur(2px)}
.hr-card:hover{transform:scale(1.05);opacity:1;filter:none;box-shadow:0 18px 40px rgba(0,0,63,.14)}

/* Carrosséis de veículos PF e PJ: 4 cards por vez no desktop, 2 no tablet, 1 no celular */
.vc-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-padding-inline:4px;scrollbar-width:none;padding:8px 4px 28px;margin:-8px -4px -28px}
@media (min-width:1024px){.vc-track{gap:24px}}
.vc-track::-webkit-scrollbar{display:none}
.vc-card{flex:0 0 calc((100% - 72px) / 4);min-width:0;scroll-snap-align:start}
@media (max-width:1024px){.vc-card{flex-basis:calc((100% - 16px) / 2)}}
@media (max-width:640px){.vc-card{flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.vc-track{scroll-behavior:auto}}
.vc-arrow{width:44px;height:44px;border-radius:999px;border:1px solid #C9CFE0;background:#FFFFFF;color:#00003F;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s}
@media (min-width:1024px){.vc-arrow{width:48px;height:48px}}
.vc-arrow:hover,.vc-arrow:focus-visible{border-color:#D60000;color:#D60000}

/* Abertura: marcas d'água do logo no fundo */
.hero-watermarks{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;color:#FFFFFF}
.hero-watermark{position:absolute;height:auto;filter:brightness(0) invert(1);opacity:.045;-webkit-user-select:none;user-select:none}
.hero-icon{position:absolute;opacity:.05}

/* Abertura: carrossel de cards empilhados */
.hero-deck{position:relative;height:440px;margin-top:24px;touch-action:pan-y}
@media (min-width:1024px){.hero-deck{height:520px;margin-top:48px}}
.hero-card{position:absolute;inset:0;border-radius:24px;box-shadow:0 1px 2px rgba(0,0,63,.12),0 30px 60px -30px rgba(0,0,0,.55);transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .4s ease,filter .4s ease;will-change:transform;-webkit-user-select:none;user-select:none}
@media (min-width:1024px){.hero-card{border-radius:28px}}
.hero-card[data-top="1"]{cursor:grab}
.hero-card[data-top="0"]{pointer-events:none}
.hero-card[data-drag="1"]{cursor:grabbing;transition:none}
.hero-card[data-fly="1"]{transition:transform .45s cubic-bezier(.3,.5,.3,1),opacity .45s ease}
.hero-card[data-snap="1"]{transition:none}
.hero-card a,.hero-card img{-webkit-user-drag:none}
.hero-dot span{display:block;width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.45);transition:width .3s ease,background .3s ease}
.hero-dot:hover span{background:rgba(255,255,255,.8)}
.hero-dot[data-on="1"] span{width:24px;background:#FFFFFF}
.hero-dot:focus-visible{outline:2px solid #FFFFFF;outline-offset:-6px;border-radius:999px}
#hero-deck-region:focus-visible{outline:2px solid #FFFFFF;outline-offset:6px;border-radius:24px}
@media (min-width:1024px){#hero-deck-region:focus-visible{outline-offset:8px;border-radius:28px}}
@media (prefers-reduced-motion:reduce){.hero-card,.hero-card[data-fly="1"]{transition:opacity .3s ease}.hero-dot span{transition:none}}
@media (prefers-reduced-motion:reduce){.hr-card{transition:opacity .2s}.hr-cards:has(.hr-card:hover) .hr-card:not(:hover){transform:none;filter:none}.hr-card:hover{transform:none}}

/* Botão do card de destaque (DOC-10): cores originais em repouso; no hover/foco o texto some e o
   círculo branco da seta cresce até encher o botão, mostrando "Abrir oferta". */
.btn-card{position:relative;overflow:hidden;isolation:isolate}
.btn-card__text{margin-right:44px;transition:opacity .5s cubic-bezier(.4,0,.2,1)}
.btn-card__arrow{position:absolute;top:5px;right:5px;bottom:5px;z-index:1;width:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#FFFFFF;color:#00003F;transition:width .5s cubic-bezier(.4,0,.2,1),background-color .5s cubic-bezier(.4,0,.2,1),color .5s cubic-bezier(.4,0,.2,1),transform .15s ease}
.btn-card--night .btn-card__arrow{color:#0A0A0A}
.btn-card:hover .btn-card__text,.btn-card:focus-visible .btn-card__text{opacity:0}
.btn-card:hover .btn-card__arrow,.btn-card:focus-visible .btn-card__arrow{width:calc(100% - 10px)}
.btn-card__label{max-width:0;overflow:hidden;opacity:0;white-space:nowrap;font-weight:700;transition:max-width .5s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),margin .5s cubic-bezier(.4,0,.2,1)}
.btn-card:hover .btn-card__label,.btn-card:focus-visible .btn-card__label{max-width:120px;margin-right:6px;opacity:1}
.btn-card:active .btn-card__arrow{transform:scale(.95)}
.btn-card:focus-visible{outline:2px solid #00003F;outline-offset:2px;box-shadow:0 0 0 2px #FFFFFF}
@media (prefers-reduced-motion:reduce){.btn-card__text,.btn-card__arrow,.btn-card__label{transition:none}}