/* Acabamento compartilhado das seções e interações. */
:root {
  --raio-painel: 16px;
  --raio-controle: 8px;
  --sombra-painel: 0 12px 36px #1012140b;
}

.btn {
  border: 1px solid transparent;
  border-radius: var(--raio-controle);
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; box-shadow: 0 0 0 6px #b8924a1a; }
.btn:active { transform: translateY(1px); }

/* Fotografias e texto continuam juntos; o estado ativo realça todo o cartão. */
.grade { gap: 14px; }
.grade > li { min-width: 0; }
.card {
  border: 1px solid #ffffff24;
  border-radius: var(--raio-painel);
  box-shadow: var(--sombra-painel);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.card::after { pointer-events: none; }
.card:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; border-color: var(--acento); }
.card:focus-visible img { transform: scale(1.04); }
.card:focus-visible .ir { background: var(--acento); }
.card .ir { transition: background-color .2s ease, transform .2s ease; }
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px #10121424; }
  .btn:active { transform: translateY(1px); }
  .card:hover { transform: translateY(-4px); border-color: var(--acento); box-shadow: 0 14px 32px #10121424, 0 0 0 1px #b8924a30; }
  .card:hover .ir { transform: translate(1px, -1px); }
}
@media (max-width: 719px) {
  .grade { gap: 12px; }
  .card { --altura-foto: clamp(80px, 21vw, 120px); display: grid; grid-template-rows: var(--altura-foto) 1fr; height: 100%; aspect-ratio: auto; }
  .card img { grid-row: 1; height: 100%; min-height: 0; }
  .card .foto-vida, .card .foto-pet { object-position: center 24%; }
  .card .foto-empresarial { object-position: center 60%; }
  .card::after { bottom: auto; height: var(--altura-foto); background: linear-gradient(180deg, transparent 35%, #2e3338b3); }
  .card .txt { position: relative; padding: 12px; align-content: start; background: #2e3338; }
  .card h3 { font-size: .95rem; }
  .card p { font-size: .75rem; line-height: 1.4; }
  .card .ir { top: 9px; right: 9px; width: 28px; height: 28px; }
}

/* A mesma moldura acompanha as fotografias e a credencial pessoal. */
.consorcio { padding: clamp(28px, 4vw, 56px) 0; background: linear-gradient(120deg, var(--bg-2), var(--bg)); }
.consorcio .wrap { padding-left: var(--gutter); padding-right: var(--gutter); align-items: center; }
.consorcio img, .sobre figure img, .contato figure {
  border: 1px solid var(--linha);
  border-radius: var(--raio-painel);
  box-shadow: var(--sombra-painel);
}
.consorcio .txt { padding: 30px 0 0; }
.sobre figure { margin: 0; }
.anos { border: 1px solid var(--linha); border-radius: 12px; box-shadow: 0 8px 24px #10121412; }
.citacao { padding: 18px 22px; border: 1px solid var(--linha); border-left: 3px solid var(--acento); border-radius: 0 12px 12px 0; background: var(--bg-2); }
.contato figure { overflow: hidden; border-color: var(--escuro-borda); box-shadow: 0 20px 44px #00000024; }
@media (min-width: 900px) {
  .consorcio .wrap { gap: 48px; }
  .consorcio .txt { padding: 36px 0; }
}

/* Linha dos quatro passos: vertical no celular, horizontal no desktop. */
.passos { position: relative; gap: 0; }
.passos li {
  position: relative;
  border: 0;
  padding: 0 0 30px;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: minmax(56px, auto) auto;
  column-gap: 18px;
  row-gap: 0;
}
.passos li:last-child { padding-bottom: 0; }
.passos li:not(:last-child)::before,
.passos li:not(:last-child)::after {
  content: ""; position: absolute; z-index: 0;
  left: 27px; top: 28px; bottom: -28px; width: 2px;
  background: var(--linha);
  pointer-events: none;
}
.passos li:not(:last-child)::after {
  background: linear-gradient(var(--acento), #70a8ac);
  transform: scaleY(1); transform-origin: top;
  transition: transform .65s ease;
  transition-delay: var(--passo-atraso, 0ms);
}
.passos .num {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 56px; height: 56px; margin: 0; align-self: start;
  grid-column: 1; grid-row: 1 / span 2;
  border: 1px solid var(--acento); border-radius: 50%;
  background: var(--bg); color: var(--titulo-cor);
  font-size: 1.3rem; line-height: 1;
  box-shadow: 0 0 0 5px #b8924a12;
  transition: border-color .3s ease, box-shadow .3s ease;
  transition-delay: var(--passo-atraso, 0ms);
}
.passos h3, .passos p { position: relative; z-index: 1; grid-column: 2; transition: opacity .45s ease, transform .45s ease; transition-delay: var(--passo-atraso, 0ms); }
.passos h3 { grid-row: 1; align-self: center; }
.passos p { grid-row: 2; padding-top: 4px; }
.js .passos.is-ready li:not(.is-reached) .num { border-color: var(--linha); box-shadow: none; }
.js .passos.is-ready li:not(.is-reached) h3,
.js .passos.is-ready li:not(.is-reached) p { opacity: 0; transform: translateY(8px); }
.js .passos.is-ready li:not(.is-reached)::after { transform: scaleY(0); }
@media (min-width: 900px) {
  .passos { gap: 28px; }
  .passos li { grid-template-columns: minmax(0, 1fr); grid-template-rows: 56px auto 1fr; gap: 14px; padding: 0; }
  .passos .num { grid-row: 1; grid-column: 1; margin-bottom: 4px; }
  .passos h3 { grid-row: 2; grid-column: 1; align-self: start; padding-top: 6px; }
  .passos p { grid-row: 3; grid-column: 1; padding-top: 0; }
  .passos li:not(:last-child)::before,
  .passos li:not(:last-child)::after { left: 28px; right: -56px; top: 27px; bottom: auto; width: auto; height: 2px; }
  .passos li:not(:last-child)::after { background: linear-gradient(90deg, var(--acento), #70a8ac); transform: scaleX(1); transform-origin: left; }
  .js .passos.is-ready li:not(.is-reached)::after { transform: scaleX(0); }
}

/* FAQ e formulário têm estados claros para mouse, toque e teclado. */
.perguntas { display: grid; gap: 12px; border: 0; }
.perguntas details { min-width: 0; border: 1px solid var(--linha); border-radius: 12px; background: var(--bg); box-shadow: 0 4px 16px #10121404; transition: border-color .2s ease, box-shadow .2s ease; }
.perguntas summary { padding: 20px; gap: 16px; border-radius: 12px; }
.perguntas summary:focus-visible { outline-offset: 3px; }
.perguntas .mais { background: var(--bg-2); border-radius: 50%; transition: background-color .2s ease; }
.perguntas details[open] { border-color: var(--acento); box-shadow: inset 3px 0 0 var(--acento), 0 8px 24px #10121408; }
.perguntas details[open] .mais { background: var(--acento); }
.perguntas details[open] .mais::before, .perguntas details[open] .mais::after { background: #101214; }
.perguntas details .resp { padding: 0 20px 22px; }
.perguntas details[open] .resp { animation: resposta-entrando .22s ease-out; }
@keyframes resposta-entrando { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.form { padding: clamp(18px, 3vw, 28px); border: 1px solid var(--escuro-borda); border-radius: var(--raio-painel); background: radial-gradient(ellipse at top right, #b8924a0d, transparent 65%), var(--escuro-2); box-shadow: 0 12px 32px #0000001f; transition: border-color .2s ease; }
.form:focus-within { border-color: var(--acento); }
.form label { min-width: 0; }
.form input, .form select { width: 100%; min-width: 0; border-radius: var(--raio-controle); transition: border-color .2s ease, box-shadow .2s ease; }
.form input:focus, .form select:focus { outline: 2px solid var(--acento); outline-offset: 2px; border-color: var(--acento); box-shadow: 0 0 0 5px #b8924a12; }
.form .btn { width: 100%; justify-self: stretch; padding-left: 16px; padding-right: 16px; }
.form .nota a { color: var(--claro); text-decoration-color: var(--acento); text-underline-offset: 3px; }
.contatos .atendimento { display: inline-flex; align-items: center; gap: 12px; color: var(--claro); font-size: 1.05rem; font-weight: 500; }
.rodape nav .atendimento { display: inline-flex; align-items: center; gap: 8px; color: var(--claro); }

/* As faixas terminam em uma chamada para conversar. */
.marcas-linhas {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}
.marcas-lista li { border: 1px solid #e1ddd4; border-radius: 10px; box-shadow: 0 4px 12px #10121404; }
.marcas-lista li.marca-fundo-escuro { border-color: #202d40; }
.marcas-janela:focus-visible { outline-offset: -3px; }
.parceiros-acao { --btn: #101214; --btn-hover: #24282c; --btn-texto: #f2eee6; display: grid; justify-items: center; gap: 12px; margin-top: 32px; text-align: center; }
.parceiros-acao .btn { max-width: 100%; white-space: normal; line-height: 1.35; padding-top: 14px; padding-bottom: 14px; }
.parceiros-acao p { font-size: .85rem; color: #585e65; }
@media (max-width: 599px) {
  .marcas-linhas { -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
  .parceiros-acao .btn { width: 100%; }
  .perguntas summary { padding: 18px; font-size: 1rem; }
  .perguntas details .resp { padding: 0 18px 20px; }
}
@media (max-width: 899px) {
  .rodape .wrap { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .card, .card img, .card .ir, .passos .num, .passos h3, .passos p,
  .passos li::after, .perguntas details, .perguntas .mais, .perguntas .mais::before,
  .perguntas .mais::after, .form, .form input, .form select { transition: none; }
  .btn:hover, .card:hover, .card:hover img, .card:focus-visible img, .card:hover .ir { transform: none; }
  .perguntas details[open] .resp { animation: none; }
  .js .passos.is-ready li:not(.is-reached) h3, .js .passos.is-ready li:not(.is-reached) p { opacity: 1; transform: none; }
  .js .passos.is-ready li:not(.is-reached)::after { transform: none; }
}