/* =====================================================================
   ESTILO EM CARTOES (card-y) — todas as paginas do site publico.

   Carregado DEPOIS de style.css/layout.css, que ficam identicos aos do
   vanilla. Tudo que muda no visual mora aqui.

   Regras do usuario (14/09/2026):
   - Fundo so em DUAS cores: o cream da landing (#F7EEDB) e o azul oficial
     da Landmark (#1C3AA8). Nada de branco, cream-deep, verde ou navy escuro.
   - As secoes deixam de ser faixas de largura inteira: cada uma vira um
     cartao arredondado, solto sobre o fundo cream.
   ===================================================================== */

:root {
  --lm-azul-oficial: #1C3AA8;
  --lm-bg-landing: #F7EEDB;

  /* Os tokens do style.css apontam para as duas cores permitidas: assim
     botoes, marcos, pills e textos que ja usam os tokens seguem sozinhos. */
  --lm-navy: var(--lm-azul-oficial);
  --lm-navy-soft: var(--lm-azul-oficial);
  --lm-cream: var(--lm-bg-landing);
  --lm-cream-deep: var(--lm-bg-landing);
  --lm-white: var(--lm-bg-landing);
  --lm-evergreen: var(--lm-azul-oficial);
  --surface-canvas: var(--lm-bg-landing);
  --surface-canvas-alt: var(--lm-bg-landing);
  --surface-hover: var(--lm-bg-landing);
  --text-heading: var(--lm-azul-oficial);

  /* Cor do texto de paragrafo da landing: o proprio azul, mais claro. O
     preto/cinza do vanilla destoava do azul dos titulos. Tres tons, do
     corpo ao apagado, todos saindo do mesmo azul. */
  --text-body: color-mix(in srgb, var(--lm-azul-oficial) 75%, transparent);
  --text-muted: color-mix(in srgb, var(--lm-azul-oficial) 62%, transparent);
  --text-subtle: color-mix(in srgb, var(--lm-azul-oficial) 45%, transparent);
  --border-hairline: color-mix(in srgb, var(--lm-azul-oficial) 18%, transparent);
  --border-soft: color-mix(in srgb, var(--lm-azul-oficial) 10%, transparent);

  /* Fonte da landing em TODO o site (pedido de 14/09/2026). ABeeZee so tem
     peso 400: os negritos (500/600) do layout caem nele sozinhos. */
  --font-display: "ABeeZee", system-ui, sans-serif;
  --font-body: "ABeeZee", system-ui, sans-serif;
  --font-editorial: "ABeeZee", system-ui, sans-serif;

  /* O cartao: cream sobre cream so se separa por sombra e um fio de azul. */
  --card-raio: clamp(20px, 2.4vw, 32px);
  --card-fio: 1px solid rgba(28, 58, 168, 0.10);
  --card-sombra: 0 1px 2px rgba(28, 58, 168, 0.06), 0 22px 50px -30px rgba(28, 58, 168, 0.40);
  --card-vao: clamp(14px, 2vw, 28px);
  --card-largura: min(1180px, calc(100% - 32px));
  --card-pad-y: clamp(var(--space-12), 6vw, var(--space-20));
  --card-pad-x: clamp(var(--space-5), 4.5vw, var(--space-16));
}

body { background: var(--lm-bg-landing); }

/* ---- Cabecalho: vidro no mesmo cream ---- */
.lm-header { background: rgba(247, 238, 219, 0.85); }
@media (max-width: 720px) {
  .lm-header__menu { background: rgba(247, 238, 219, 0.97); }
}

/* ---- As secoes viram cartoes ---- */
.lm-cta,
.lm-prova,
.lm-quem,
.lm-tile,
.lm-metodo,
.lm-compromisso,
.lm-depos2,
.lm-faq2,
.lm-contact,
.lm-consulta__capa,
.lm-consulta__bloco,
.lm-consulta__fechamento,
.lm-footer {
  width: var(--card-largura);
  max-width: none;
  margin: 0 auto var(--card-vao);
  padding: var(--card-pad-y) var(--card-pad-x);
  border-radius: var(--card-raio);
  background: var(--lm-bg-landing);
  border: var(--card-fio);
  box-shadow: var(--card-sombra);
  overflow: hidden;
}

/* Cartoes azuis: os que ja eram escuros no vanilla, mais o rodape. */
.lm-tile--navy,
.lm-compromisso,
.lm-footer {
  background: var(--lm-azul-oficial);
  border-color: transparent;
  box-shadow: 0 24px 60px -30px rgba(28, 58, 168, 0.65);
}
.lm-tile--navy .lm-eyebrow,
.lm-tile--navy .lm-tile__paraquem { color: rgba(247, 238, 219, 0.62); }
.lm-tile--navy .lm-tile__body { color: rgba(247, 238, 219, 0.82); }

/* O "quem somos" tinha grade propria com max-width; como cartao, a largura e a do cartao. */
.lm-quem { gap: clamp(var(--space-8), 5vw, var(--space-16)); }
.lm-quem--sem-foto { max-width: none; }

/* A faixa de prova, antes uma linha solta, vira um cartao compacto. */
.lm-prova { padding-block: clamp(var(--space-8), 4vw, var(--space-12)); }

/* ---- Servicos com imagem: texto e foto lado a lado dentro do cartao ---- */
.lm-tile__media { border-radius: calc(var(--card-raio) - 8px); }
@media (min-width: 900px) {
  .lm-tile:not(.lm-tile--sem-midia) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    text-align: left;
    gap: clamp(var(--space-8), 4vw, var(--space-16));
  }
  .lm-tile:not(.lm-tile--sem-midia) .lm-tile__head { justify-items: start; }
  .lm-tile:not(.lm-tile--sem-midia) .lm-tile__media {
    max-width: none;
    height: 100%;
    min-height: 340px;
    aspect-ratio: auto;
  }
  /* Alterna o lado da foto, para a sequencia de cartoes nao ficar uma coluna so. */
  .lm-tile--navy:not(.lm-tile--sem-midia) .lm-tile__head { order: 2; }
}

/* Paragrafos que o layout.css pintava com a tinta preta direto (sem token). */
.lm-quem__corpo,
.lm-tile--cream .lm-tile__body,
.lm-tile--cream-deep .lm-tile__body,
.lm-consulta__intro,
.lm-consulta__texto,
.lm-consulta__lista li,
.lm-consulta__passo-texto,
.lm-consulta__faq-r,
.lm-consulta__pagamento { color: var(--text-body); }

/* ---- Depoimentos em DESTAQUE (15/09/2026) ----
   Um depoimento grande por vez: foto vertical INTEIRA a esquerda, citacao
   a direita, miniaturas verticais embaixo para trocar. Ver o comentario do
   partial site/partials/depoimentos.blade.php. */
.lm-depos2 {
  display: grid;
  gap: clamp(var(--space-5), 2.5vw, var(--space-8));
}
.lm-depos2__titulo {
  margin: 0;
  font: var(--weight-regular) clamp(1.5rem, 3.2vw, 2.4rem)/1.2 var(--font-display);
  letter-spacing: var(--tracking-display);
  color: var(--lm-azul-oficial);
  text-align: center;
  text-wrap: balance;
}
/* Todos os depoimentos na mesma celula: o palco fica com a altura do maior
   e o card nao pula de tamanho quando o destaque troca. O escondido continua
   ocupando lugar, so invisivel. */
.lm-depos2__palco { width: 100%; max-width: 980px; margin-inline: auto; display: grid; }

.lm-depo2 {
  grid-area: 1 / 1;
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--space-6), 4vw, var(--space-12));
  animation: lm-depo2-entra 480ms var(--ease-out) both;
}
.lm-depo2[hidden] { display: grid; visibility: hidden; animation: none; }
@keyframes lm-depo2-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* O quadro: vertical 2:3. A foto e `contain` — nunca corta. Por tras, a
   mesma foto desfocada cobre o quadro: foto vertical nem mostra o fundo,
   foto deitada ganha um fundo da propria cor em vez de tarja vazia. */
.lm-depo2__quadro {
  position: relative;
  /* 3:4 e 240px (= 320px de altura): a foto era o que dava a altura do
     card (2:3 e 320px = 480px). Retrato 2:3 ainda aparece inteiro, com uma
     faixa fina da propria foto desfocada dos lados. */
  aspect-ratio: 3 / 4;
  width: 240px;
  justify-self: end;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--card-raio);
  background: color-mix(in srgb, var(--lm-azul-oficial) 14%, var(--lm-bg-landing));
  box-shadow: 0 30px 60px -34px rgba(28, 58, 168, 0.6);
}
.lm-depo2__quadro::before {
  content: "";
  position: absolute;
  inset: -24px;
  z-index: -1;
  background: var(--foto, none) center / cover no-repeat;
  filter: blur(22px) saturate(0.9);
  opacity: 0.55;
}
.lm-depo2__foto {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.lm-depo2__inicial {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: var(--weight-regular) clamp(3rem, 8vw, 5rem)/1 var(--font-display);
  color: var(--lm-azul-oficial);
}

/* A citacao: em corpo grande, sem caixa — e o que a pessoa veio ler. */
.lm-depo2__corpo { margin: 0; display: grid; gap: var(--space-4); text-align: left; }
.lm-depo2__aspas { width: clamp(26px, 2.6vw, 34px); height: auto; color: var(--lm-azul-oficial); opacity: 0.22; }
.lm-depo2__texto {
  margin: 0;
  font: var(--weight-regular) clamp(1.1rem, 1.9vw, 1.4rem)/1.45 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--lm-azul-oficial);
  text-wrap: pretty;
}
/* O corpo acompanha o tamanho do texto: frase curta ganha destaque, relato
   longo fica em corpo de leitura e cabe ao lado da foto. */
.lm-depo2--curto .lm-depo2__texto { font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.35; }
.lm-depo2--longo .lm-depo2__corpo { gap: var(--space-3); }
.lm-depo2--longo .lm-depo2__texto { font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.55; letter-spacing: 0; }
.lm-depo2__quem {
  display: grid;
  gap: 2px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-hairline);
}
.lm-depo2__nome { font: var(--weight-regular) var(--text-md)/1.3 var(--font-body); color: var(--lm-azul-oficial); }
.lm-depo2__caminho { font-size: var(--text-sm); color: var(--text-muted); }

/* ---- Miniaturas: verticais tambem, com a barrinha do tempo ---- */
.lm-depos2__trilho {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  overflow-x: auto;
  /* overflow-x:auto tambem recorta em cima e embaixo. A miniatura ativa sobe
     3px e ganha um anel de 4px: sao 7px para fora dela. Com folga de 4px
     o topo saia cortado — agora sobra espaco. */
  padding: 8px;
  scrollbar-width: none;
}
.lm-depos2__trilho::-webkit-scrollbar { display: none; }
.lm-depos2__mini {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  aspect-ratio: 2 / 3;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--lm-azul-oficial) 14%, var(--lm-bg-landing));
  color: var(--lm-azul-oficial);
  font: var(--weight-regular) 1.1rem/1 var(--font-display);
  cursor: pointer;
  opacity: 0.5;
  filter: grayscale(1);
  transition: opacity var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.lm-depos2__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lm-depos2__mini:hover { opacity: 0.85; }
.lm-depos2__mini[aria-selected="true"] {
  opacity: 1;
  filter: none;
  transform: translateY(-3px);
  box-shadow: 0 0 0 2px var(--lm-bg-landing), 0 0 0 4px var(--lm-azul-oficial);
}
.lm-depos2__mini:focus-visible { outline: 2px solid var(--lm-azul-oficial); outline-offset: 4px; }
.lm-depos2__mini-barra {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--lm-azul-oficial);
  transform: scaleX(0);
  transform-origin: left;
}
.lm-depos2__mini.is-contando .lm-depos2__mini-barra { animation: lm-depos2-conta 8s linear forwards; }
.lm-depos2.is-pausado .lm-depos2__mini-barra,
.lm-depos2.is-escolhido .lm-depos2__mini-barra { animation-play-state: paused; }
.lm-depos2.is-escolhido .lm-depos2__mini-barra { display: none; }
@keyframes lm-depos2-conta { to { transform: scaleX(1); } }

/* ---- Celular: foto em cima (menor), citacao embaixo ---- */
@media (max-width: 760px) {
  .lm-depo2 { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .lm-depo2__quadro { width: min(200px, 60%); margin-inline: auto; justify-self: center; }
  .lm-depo2__corpo { text-align: center; justify-items: center; }
  .lm-depos2__trilho { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .lm-depo2 { animation: none; }
}

/* ---- Perguntas frequentes (acordeao da landing) ---- */
.lm-faq2 {
  display: grid;
  justify-items: center;
  gap: clamp(var(--space-8), 4vw, var(--space-12));
}
.lm-faq2__titulo {
  margin: 0;
  font: var(--weight-regular) clamp(1.5rem, 3.2vw, 2.4rem)/1.2 var(--font-display);
  letter-spacing: var(--tracking-display);
  color: var(--lm-azul-oficial);
  text-align: center;
  text-wrap: balance;
}
.lm-faq2__lista { width: 100%; max-width: 720px; display: grid; }
.lm-faq2__item { border-top: 1px solid var(--border-hairline); }
.lm-faq2__item:last-child { border-bottom: 1px solid var(--border-hairline); }
.lm-faq2__q {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font: var(--weight-regular) clamp(1rem, 2.2vw, 1.15rem)/1.4 var(--font-display);
  color: var(--lm-azul-oficial);
  text-align: left;
  cursor: pointer;
}
.lm-faq2__q::-webkit-details-marker { display: none; }
.lm-faq2__q::marker { content: ""; }
.lm-faq2__q:focus-visible { outline: 2px solid var(--lm-azul-oficial); outline-offset: 3px; }
.lm-faq2__seta { width: 20px; height: 20px; flex: none; transition: transform var(--dur-fast) var(--ease-out); }
.lm-faq2__item[open] .lm-faq2__seta { transform: rotate(180deg); }
.lm-faq2__a {
  margin: 0;
  padding: 0 0 var(--space-6);
  max-width: 62ch;
  font: var(--weight-regular) clamp(0.95rem, 2vw, 1.05rem)/1.6 var(--font-body);
  color: var(--text-body);
  text-align: left;
  text-wrap: pretty;
}

/* ---- Chamada final: marca no azul oficial ---- */
.lm-contact__mark { height: clamp(96px, 12vw, 140px); }

/* ---- Rodape: cartao azul, texto cream (mesma pele da landing) ---- */
.lm-footer { margin-bottom: 16px; color: var(--lm-bg-landing); }
.lm-footer__inner { max-width: 1000px; }
.lm-footer__credencial,
.lm-footer__credencial a,
.lm-footer__credencial span,
.lm-footer__col a,
.lm-footer__col span { color: var(--lm-bg-landing); }
.lm-footer__col-title { color: var(--lm-bg-landing); opacity: .55; }
.lm-footer__legal,
.lm-footer__copy,
.lm-footer__sep { color: rgba(247, 238, 219, 0.62); }
.lm-footer__grid,
.lm-footer__bottom { border-top-color: rgba(247, 238, 219, 0.22); }

/* ---- WhatsApp flutuante: no azul oficial, com aro cream para destacar ---- */
.lm-whatsapp {
  background: var(--lm-azul-oficial);
  color: var(--lm-bg-landing);
  box-shadow: 0 0 0 4px rgba(247, 238, 219, 0.92), 0 14px 30px -8px rgba(28, 58, 168, 0.5);
}
.lm-whatsapp:hover,
.lm-whatsapp:focus-visible { background: var(--lm-azul-oficial); color: var(--lm-bg-landing); filter: brightness(1.12); }

/* ---- Botao: mesmo azul no hover, so a sombra cresce ---- */
.lm-btn:hover { filter: brightness(1.12); }

/* ---- Pagina da consulta: a capa e o primeiro cartao ---- */
.lm-consulta { padding-top: clamp(var(--space-8), 4vw, var(--space-12)); }

@media (max-width: 720px) {
  .lm-tile, .lm-quem, .lm-compromisso,
  .lm-consulta__capa, .lm-consulta__fechamento {
    padding-left: var(--card-pad-x);
    padding-right: var(--card-pad-x);
  }
}

/* ---- Quem somos: texto longo com "Ler a historia completa" ----
   O comeco fica sempre a vista; o resto abre num <details> dentro do mesmo
   cartao. O botao vem ANTES do resto no HTML, mas com o cartao aberto ele
   desce para o fim (flex + order), onde "Mostrar menos" faz sentido. */
.lm-quem__mais { display: flex; flex-direction: column; gap: var(--space-4); }
.lm-quem__mais-botao {
  order: 2;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 6px 14px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  font: var(--weight-regular) var(--text-sm)/1.2 var(--font-body);
  color: var(--lm-azul-oficial);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.lm-quem--sem-foto .lm-quem__mais-botao { margin-inline: auto; }
.lm-quem__mais-botao:hover { border-color: var(--lm-azul-oficial); }
.lm-quem__mais-botao:focus-visible { outline: 2px solid var(--lm-azul-oficial); outline-offset: 3px; }
.lm-quem__mais-botao::-webkit-details-marker { display: none; }
.lm-quem__mais-botao::marker { content: ""; }
.lm-quem__mais-botao svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.lm-quem__mais[open] .lm-quem__mais-botao svg { transform: rotate(180deg); }
.lm-quem__mais-fechar,
.lm-quem__mais[open] .lm-quem__mais-abrir { display: none; }
.lm-quem__mais[open] .lm-quem__mais-fechar { display: inline; }
/* Um <p> por paragrafo do painel, com respiro entre eles. */
.lm-quem__corpo p { margin: 0 0 0.85em; }
.lm-quem__corpo p:last-child { margin-bottom: 0; }
.lm-quem__corpo--resto { order: 1; }
.lm-quem--sem-foto .lm-quem__corpo { margin-inline: auto; }