/* ═══════════════════════════════════════════════════════════
   MUNIZ DE HOLANDA ADVOCACIA — Cartão de visitas digital
   Mobile-first. Paleta extraída da arte original.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Paleta — 4 cores, nada além disso */
  --cream:      #EDE5DE;
  --navy:       #001A30;   /* botões e rodapé */
  --navy-logo:  #18213B;   /* azul do logotipo */
  --gold:       #AC7942;   /* bordas, ícones, fios */
  --gold-deep:  #8F713E;

  --serif: "Spectral", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Escala derivada da arte 1080×1920 */
  --gutter: min(7.5vw, 36px);
  --pill-h: clamp(50px, 13vw, 60px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: var(--navy-logo);
  font-family: var(--sans);
  overflow-x: hidden;
  /* Trava a experiência em coluna de celular, inclusive no desktop */
  max-width: 480px;
  margin-inline: auto;
  box-shadow: 0 0 80px rgba(0, 26, 48, .10);
}

@media (min-width: 481px) {
  html { background: #E3D9D1; }
}

/* ─────────── ESTRUTURA ─────────── */

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3.6vw, 18px);
  padding-block: clamp(20px, 6vw, 28px) clamp(18px, 4.5vw, 22px);
  padding-inline: var(--gutter);
  text-align: center;
}

/* ─────────── LOGO ─────────── */

.logo { width: 100%; }

.logo img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin-inline: auto;
}

/* ─────────── FIO VERTICAL DOURADO ─────────── */

.rule {
  display: block;
  width: 1px;
  height: clamp(24px, 7vw, 34px);
  background: linear-gradient(to bottom, rgba(172,121,66,.25), var(--gold) 45%, rgba(172,121,66,.25));
  transform-origin: top center;
}

/* ─────────── TAGLINE ─────────── */

.tagline {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(21px, 6.15vw, 28px);
  line-height: 1.08;
  letter-spacing: -.005em;
  color: var(--navy-logo);
}

/* ─────────── BOTÕES ─────────── */

.links {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(11px, 2.9vw, 14px);
  margin-top: clamp(4px, 2vw, 10px);
}

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: grid;
  grid-template-columns: auto 1px 1fr auto;
  align-items: center;
  gap: clamp(12px, 3.6vw, 18px);

  height: var(--pill-h);
  padding-inline: clamp(16px, 4.6vw, 24px);
  border-radius: 999px;

  background: var(--navy);
  border: 1.5px solid var(--gold);
  box-shadow: 0 3px 14px rgba(0, 26, 48, .16);

  color: #fff;
  text-decoration: none;

  transition: transform .28s cubic-bezier(.22,.9,.3,1),
              box-shadow .28s ease,
              border-color .28s ease;
  will-change: transform;
}

.btn__icon {
  display: grid;
  place-items: center;
  width: clamp(26px, 7.2vw, 34px);
  color: var(--gold);
  transition: transform .35s cubic-bezier(.34,1.4,.5,1);
}
.btn__icon svg { width: 100%; height: auto; display: block; }

.btn__sep {
  width: 1px;
  height: 54%;
  background: var(--gold);
  opacity: .75;
}

.btn__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  font-family: var(--sans);
  color: #fff;
}

.btn__label-main {
  font-weight: 500;
  font-size: clamp(12px, 3.35vw, 15px);
  letter-spacing: .22em;
  text-transform: uppercase;
  /* compensa o letter-spacing à direita para o texto ficar óptico ao centro */
  text-indent: .22em;
  white-space: nowrap;
}

/* Qualificador, só nos dois botões de WhatsApp */
.btn__label-sub {
  font-weight: 600;
  font-size: clamp(9px, 2.5vw, 11px);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-indent: .14em;
  color: var(--gold);
  white-space: nowrap;
}

.btn__chevron {
  display: grid;
  place-items: center;
  width: clamp(8px, 2.3vw, 11px);
  color: var(--gold);
  transition: transform .3s cubic-bezier(.22,.9,.3,1);
}
.btn__chevron svg { width: 100%; height: auto; display: block; }

/* Brilho que atravessa o botão */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(172,121,66,.30) 48%,
    rgba(237,229,222,.16) 52%,
    transparent 62%);
  transform: translateX(-120%);
  pointer-events: none;
}

.btn.is-ready::after { animation: sheen 7s var(--sheen-delay, 0s) infinite; }

@keyframes sheen {
  0%, 62%  { transform: translateX(-120%); }
  86%,100% { transform: translateX(120%); }
}

/* Interação */
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 26, 48, .24);
    border-color: #C89253;
  }
  .btn:hover .btn__chevron { transform: translateX(3px); }
  .btn:hover .btn__icon    { transform: scale(1.09); }
}

.btn:active {
  transform: scale(.975);
  box-shadow: 0 2px 8px rgba(0, 26, 48, .2);
}

.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ─────────── RODAPÉ ─────────── */

.footer {
  background: var(--navy);
  border-top: 2.5px solid var(--gold);
  padding: clamp(14px, 4vw, 20px) var(--gutter) calc(clamp(14px, 4vw, 20px) + env(safe-area-inset-bottom));
  text-align: center;
  color: #fff;
}

.footer__areas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2.6vw, 14px);
  font-weight: 600;
  font-size: clamp(13px, 3.6vw, 16px);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.footer__areas i {
  font-style: normal;
  color: var(--gold);
  font-size: .85em;
  line-height: 1;
}

.footer__legal {
  margin-top: clamp(3px, 1vw, 6px);
  font-weight: 400;
  font-size: clamp(9px, 2.5vw, 11px);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.footer__legal sup { font-size: .8em; }

/* ─────────── ANIMAÇÕES DE ENTRADA ─────────── */

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  animation: rise .85s cubic-bezier(.22,.9,.28,1) var(--d, 0s) forwards;
}

@keyframes rise {
  to { opacity: 1; transform: none; }
}

.js .reveal-rule {
  transform: scaleY(0);
  opacity: 0;
  animation: draw .6s cubic-bezier(.4,0,.2,1) var(--d, 0s) forwards;
}

@keyframes draw {
  0%   { transform: scaleY(0); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}

/* O logo entra com um respiro a mais */
.js .logo.reveal { animation-duration: 1.1s; }
.js .logo img {
  opacity: 0;
  transform: scale(.965);
  animation: logoIn 1.3s cubic-bezier(.2,.8,.25,1) .05s forwards;
}
@keyframes logoIn {
  to { opacity: 1; transform: none; }
}

/* ─────────── ACESSIBILIDADE ─────────── */

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal-rule, .js .logo img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .btn.is-ready::after { animation: none; }
  .btn, .btn__icon, .btn__chevron { transition: none; }
}

/* Telas baixas: comprime os respiros para caber sem rolagem */
@media (max-height: 700px) {
  :root { --pill-h: 48px; }
  .card { gap: 11px; padding-block: 14px 12px; }
  .logo img { max-width: 230px; }
  .rule { height: 18px; }
  .tagline { font-size: clamp(18px, 5.4vw, 22px); }
  .links { gap: 10px; }
  .footer { padding-block: 10px calc(10px + env(safe-area-inset-bottom)); }
  .footer__areas { font-size: 13px; }
}

/* Telas muito baixas (ex.: iPhone SE 1ª geração) */
@media (max-height: 600px) {
  :root { --pill-h: 44px; --gutter: min(6vw, 29px); }
  .card { gap: 8px; padding-block: 10px 8px; }
  .logo img { max-width: 196px; }
  .rule { height: 13px; }
  .tagline { font-size: 16px; }
  .links { gap: 8px; }
  .btn__label-sub { font-size: 8.5px; }
  .footer { padding-block: 7px calc(7px + env(safe-area-inset-bottom)); }
  .footer__areas { font-size: 12px; }
  .footer__legal { font-size: 8.5px; }
}

/* ─────────── AVISO CURTO (fallback do e-mail) ─────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  z-index: 50;

  max-width: calc(100vw - 32px);
  padding: 11px 20px;
  border-radius: 999px;

  background: var(--navy);
  border: 1px solid var(--gold);
  box-shadow: 0 8px 24px rgba(0, 26, 48, .32);

  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  opacity: 0;
  transform: translate(-50%, 10px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}