/* =========================================================
   CARTÃO DE VISITA — CONSULTÓRIO DE FISIOTERAPIA
   Paleta e medidas centralizadas aqui nas variáveis.
   ========================================================= */
:root {
  --teal-950: #06201f;
  --teal-900: #0a2b29;
  --teal-700: #115049;
  --teal-500: #1c7d70;
  --mint: #5ee0c4;
  --mint-soft: #9ff0de;
  --sand: #f4f1ea;
  --ink: #0c2a27;
  --muted: #64756f;
  --line: rgba(12, 42, 39, .14);

  --card-w: 340px;  /* 90 mm */
  --card-h: 189px;  /* 50 mm */

  /* Ajustáveis pelo painel (estilo.js) */
  --fonte-site: "Manrope", "Segoe UI", system-ui, Arial, sans-serif;
  --escala-texto: 1;
  --cor-texto: #0c2a27;
  --zoom-cartoes: 1.45;
  --escala-figuras: 1.2;
  --espaco-topo: 76px;
  --espaco-cartoes: 36px;
  --desloc-titulo-x: 0px;
  --desloc-titulo-y: 0px;
  --desloc-cartoes-x: 0px;
  --desloc-cartoes-y: 0px;
  --desloc-botoes-x: 0px;
  --desloc-botoes-y: 0px;

  /* Títulos: fonte, tamanho e cor individuais */
  --escala-kicker: 1;
  --escala-titulo: 1;
  --escala-sub: 1;
  --espaco-antes-titulo: 6px;
  --espaco-antes-sub: 5px;
  --espaco-apos-sub: 38px;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  font-family: var(--fonte-site);
  color: var(--ink);
  background:
    radial-gradient(1100px 620px at 10% -15%, #ffffff 0%, transparent 60%),
    linear-gradient(180deg, #efece5, #e6e2d9);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Página ---------- */
.page {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  padding: var(--espaco-topo) 24px 68px;
}

/* ---------- Fundo: figuras da marca (canvas) ---------- */
.figuras {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- Fundo de folhas ---------- */
.folhas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.page__head {
  text-align: center;
  margin-bottom: var(--espaco-apos-sub);
  transform: translate(var(--desloc-titulo-x), var(--desloc-titulo-y));
}

/* O painel pode esconder o cabeçalho inteiro */
[hidden] {
  display: none !important;
}

/* Cor dos botões da barra (os títulos têm cor própria) */
.barra-topo .btn {
  color: var(--cor-texto);
}

.page__kicker {
  margin: 0;
  font-family: var(--fonte-kicker, var(--fonte-site));
  font-size: calc(11px * var(--escala-texto) * var(--escala-kicker));
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cor-kicker, var(--cor-texto));
}

.page__head h1 {
  margin: var(--espaco-antes-titulo) 0 var(--espaco-antes-sub);
  font-family: var(--fonte-titulo, var(--fonte-site));
  font-size: clamp(
    calc(27px * var(--escala-texto) * var(--escala-titulo)),
    calc(4vw * var(--escala-texto) * var(--escala-titulo)),
    calc(38px * var(--escala-texto) * var(--escala-titulo))
  );
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--cor-titulo, var(--cor-texto));
}

.page__sub {
  margin: 0;
  font-family: var(--fonte-sub, var(--fonte-site));
  font-size: calc(14px * var(--escala-texto) * var(--escala-sub));
  color: var(--cor-sub, var(--cor-texto));
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  color: #eafaf6;
  background: linear-gradient(160deg, var(--teal-700), var(--teal-900));
  border: 0;
  border-radius: 999px;
  padding: 11px 24px;
  cursor: pointer;
  box-shadow: 0 12px 26px -14px rgba(6, 32, 31, .85);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.btn--ghost {
  color: var(--teal-700);
  background: transparent;
  border: 1px solid rgba(17, 80, 73, .32);
  box-shadow: none;
}

.btn--ghost:hover {
  background: rgba(17, 80, 73, .07);
  filter: none;
  box-shadow: none;
}

.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 16px 30px -14px rgba(6, 32, 31, .9);
}

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

/* Botão de som (mudo / ligado) */
.btn--som {
  gap: 8px;
  padding: 11px 18px;
}

.btn__icone {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}

.btn--som .icone--mudo {
  display: none;
}

.btn--som[aria-pressed="true"] .icone--ligado {
  display: none;
}

.btn--som[aria-pressed="true"] .icone--mudo {
  display: block;
}

.btn--som[aria-pressed="true"] {
  color: var(--muted);
  border-color: rgba(17, 80, 73, .18);
}

/* Barra fixa no canto superior direito (imprimir + som) */
.barra-topo {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translate(var(--desloc-botoes-x), var(--desloc-botoes-y));
}

.btn--topo {
  padding: 9px 16px;
  font-size: calc(12px * var(--escala-texto));
  background: rgba(250, 249, 245, .8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px -16px rgba(6, 32, 31, .65);
}

.btn--topo:hover {
  background: rgba(255, 255, 255, .96);
  transform: translateY(-1px);
}

@media (max-width: 620px) {
  .barra-topo {
    top: 12px;
    right: 12px;
    gap: 6px;
  }

  .btn--topo {
    padding: 9px;
  }

  /* No celular ficam só os ícones */
  .barra-topo .btn__rotulo,
  .barra-topo [data-texto-som] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------- Cartões ---------- */
.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espaco-cartoes);
  perspective: 1100px;
  perspective-origin: 50% 40%;
  transform: translate(var(--desloc-cartoes-x), var(--desloc-cartoes-y));
}

/* Variáveis animáveis: permitem compor a flutuação com a inclinação do mouse */
@property --flutuar-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --flutuar-r {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --inclinacao-x {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --inclinacao-y {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --profundidade {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --deslocamento-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --escala {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

@property --arrasto-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --arrasto-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --giro-arrasto {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.card {
  position: relative;
  flex: 0 0 auto;
  width: var(--card-w);
  height: var(--card-h);
  overflow: hidden;
  overflow-wrap: break-word;
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(6, 32, 31, .06),
    0 calc(24px + var(--profundidade, 0px)) calc(44px + var(--profundidade, 0px) * 1.15) -22px rgba(6, 32, 31, .55),
    0 3px 10px rgba(6, 32, 31, .08);
  transform:
    translate3d(
      calc(var(--deslocamento-x, 0px) + var(--arrasto-x, 0px)),
      calc(var(--flutuar-y, 0px) + var(--arrasto-y, 0px)),
      0
    )
    rotateZ(calc(var(--flutuar-r, 0deg) + var(--giro-arrasto, 0deg)))
    rotateX(var(--inclinacao-x, 0deg))
    rotateY(var(--inclinacao-y, 0deg))
    translateZ(var(--profundidade, 0px))
    scale(var(--escala, 1));
  transform-style: preserve-3d;
  animation: flutuar 7.5s ease-in-out infinite;
  animation-delay: var(--atraso, 0s);
  transition:
    box-shadow .4s ease,
    --inclinacao-x .45s ease,
    --inclinacao-y .45s ease,
    --profundidade .45s ease,
    --deslocamento-x .6s ease,
    --escala .45s ease,
    --arrasto-x .68s cubic-bezier(.18, 1.42, .32, 1),
    --arrasto-y .68s cubic-bezier(.18, 1.42, .32, 1),
    --giro-arrasto .68s cubic-bezier(.18, 1.42, .32, 1);
  will-change: transform;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

/* Cartão na mão: sem transição, acompanha o mouse exatamente */
.card.is-arrastando {
  cursor: grabbing;
  z-index: 6;
  animation-play-state: paused;
  transition: none;
}

.card.is-soltando {
  z-index: 6;
}

/* No painel o cartão é só pré-visualização: não se arrasta */
.painel .card {
  cursor: default;
}

/* Brilho que acompanha o cursor, como uma luz na superfície */
.card__brilho {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: var(--brilho-opacidade, 0);
  background: radial-gradient(
    260px 260px at var(--brilho-x, 50%) var(--brilho-y, 50%),
    rgba(255, 255, 255, .2),
    rgba(255, 255, 255, 0) 68%
  );
  transition: opacity .35s ease;
}

/* Texto que nem no tamanho mínimo caberia: corta com reticências */
.is-cortado {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Deixa os textos encolherem dentro das caixas flex */
.brand__name,
.back__name,
.contacts li span,
.front__role,
.back__name,
.brand__name strong,
.brand__name small,
.back__name strong,
.back__name small {
  min-width: 0;
}

.card--back .card__brilho {
  background: radial-gradient(
    260px 260px at var(--brilho-x, 50%) var(--brilho-y, 50%),
    rgba(28, 125, 112, .12),
    rgba(28, 125, 112, 0) 68%
  );
}

/* Cada cartão flutua em um ritmo diferente */
.cards .card:nth-child(2n) {
  --atraso: -2.4s;
  animation-duration: 8.6s;
}

.cards .card:nth-child(3n) {
  --atraso: -4.1s;
  animation-duration: 9.4s;
}

@keyframes flutuar {
  0%,
  100% {
    --flutuar-y: -7px;
    --flutuar-r: -0.5deg;
  }

  50% {
    --flutuar-y: 7px;
    --flutuar-r: 0.5deg;
  }
}

.card:hover {
  --profundidade: 22px;
  --escala: 1.018;
}

.card:focus-visible {
  outline: 2px solid var(--teal-500);
  outline-offset: 4px;
}

/* Quem prefere menos animação vê os cartões parados */
@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
    transition: box-shadow .3s ease;
  }
}

/* =========================================================
   FRENTE
   ========================================================= */
.card--front {
  display: flex;
  flex-direction: column;
  padding: 18px 20px 16px;
  color: #eaf7f3;
  background:
    radial-gradient(120% 95% at 100% 0%, rgba(94, 224, 196, .18), transparent 55%),
    radial-gradient(95% 85% at 0% 100%, rgba(28, 125, 112, .5), transparent 62%),
    linear-gradient(150deg, #0e3733 0%, #0a2b29 48%, #06201f 100%);
}

/* Textura de pontos, esmaecendo para o canto inferior esquerdo */
.card--front::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .12) .7px, transparent .8px);
  background-size: 10px 10px;
  opacity: .55;
  -webkit-mask-image: radial-gradient(120% 110% at 100% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(120% 110% at 100% 0%, #000 0%, transparent 72%);
  pointer-events: none;
}

/* Fio interno sutil */
.card--front::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, .09);
  pointer-events: none;
}

.front__rings {
  position: absolute;
  width: 200px;
  height: 200px;
  right: -78px;
  bottom: -104px;
  border-radius: 50%;
  border: 1px solid rgba(94, 224, 196, .28);
  box-shadow:
    0 0 0 18px rgba(94, 224, 196, .07),
    0 0 0 42px rgba(94, 224, 196, .04);
  pointer-events: none;
}

.brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
}

.brand__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--mint);
  border: 1px solid rgba(94, 224, 196, .55);
  background: radial-gradient(circle at 32% 26%, rgba(94, 224, 196, .3), rgba(94, 224, 196, .05));
  box-shadow: 0 0 18px rgba(94, 224, 196, .18);
}

.brand__mark svg {
  width: 16px;
  height: 16px;
}

.brand__name {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand__name strong {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.brand__name small {
  margin-top: 3px;
  font-size: 6px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(234, 247, 243, .55);
}

.front__body {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-bottom: 13px;
}

.front__eyebrow {
  margin: 0 0 5px;
  font-size: 6.4px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mint);
}

.front__person {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.015em;
}

.front__role {
  margin: 4px 0 0;
  font-size: 7.4px;
  letter-spacing: .02em;
  color: rgba(234, 247, 243, .62);
}

.front__foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.chip {
  padding: 3px 7px;
  font-size: 6px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(234, 247, 243, .8);
  border: 1px solid rgba(234, 247, 243, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
}

/* =========================================================
   VERSO
   ========================================================= */
.card--back {
  display: flex;
  flex-direction: column;
  padding: 16px 18px 0;
  color: var(--ink);
  background:
    radial-gradient(100% 90% at 100% 0%, rgba(94, 224, 196, .18), transparent 58%),
    linear-gradient(160deg, #fbf9f4 0%, var(--sand) 55%, #efeade 100%);
}

.card--back::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(17, 80, 73, .16) .6px, transparent .7px);
  background-size: 9px 9px;
  opacity: .5;
  -webkit-mask-image: radial-gradient(90% 90% at 100% 0%, #000 0%, transparent 62%);
          mask-image: radial-gradient(90% 90% at 100% 0%, #000 0%, transparent 62%);
  pointer-events: none;
}

.back__rings {
  position: absolute;
  width: 150px;
  height: 150px;
  right: -50px;
  top: -66px;
  border-radius: 50%;
  border: 1px solid rgba(17, 80, 73, .14);
  box-shadow:
    0 0 0 14px rgba(17, 80, 73, .05),
    0 0 0 32px rgba(17, 80, 73, .03);
  pointer-events: none;
}

.back__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

.brand__mark--sm {
  width: 22px;
  height: 22px;
  color: #e9fbf6;
  border: 0;
  background: linear-gradient(150deg, var(--teal-500), var(--teal-900));
  box-shadow: 0 4px 10px -5px rgba(6, 32, 31, .9);
}

.brand__mark--sm svg {
  width: 12px;
  height: 12px;
}

.back__name {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.back__name strong {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.back__name small {
  font-size: 5.6px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.back__tag {
  width: 54px;
  margin-left: auto;
  font-size: 5.2px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .12em;
  text-align: right;
  text-transform: uppercase;
  color: var(--teal-500);
}

/* Contatos */
.contacts {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 14px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.contacts li {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 7px;
  line-height: 1.2;
  color: #2a423e;
}

.contacts li.is-wide {
  grid-column: 1 / -1;
}

.icon {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  stroke-width: 1.7;
  color: var(--teal-500);
}

.back__note {
  position: relative;
  z-index: 1;
  margin: 10px 0 0;
  padding-left: 8px;
  font-size: 6.2px;
  line-height: 1.45;
  color: var(--muted);
  border-left: 2px solid rgba(94, 224, 196, .75);
}

/* Rodapé do verso (sangra até as bordas) */
.back__foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: auto -18px 0;
  padding: 7px 16px;
  font-size: 6.2px;
  color: #dcf6ef;
  background: linear-gradient(100deg, var(--teal-900), var(--teal-950));
}

.back__hours {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(220, 246, 239, .82);
}

.back__hours .icon {
  width: 8px;
  height: 8px;
  color: var(--mint);
}

.back__cta {
  font-size: 5.8px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--mint);
  white-space: nowrap;
}

/* ---------- Dica abaixo dos cartões ---------- */
.hint {
  margin: 34px 0 0;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
  color: var(--muted);
}

.hint code {
  padding: 1px 6px;
  font-size: 12px;
  border-radius: 5px;
  color: var(--teal-700);
  background: rgba(17, 80, 73, .08);
}

.hint a {
  font-weight: 700;
  color: var(--teal-700);
  text-underline-offset: 3px;
}

/* ---------- Cartões maiores em telas grandes ---------- */
@media (min-width: 1024px) {
  .page {
    /* acompanha o tamanho escolhido para os cartões */
    max-width: max(880px, calc(340px * var(--zoom-cartoes) * 2 + var(--espaco-cartoes) + 48px));
  }

  .page .card {
    zoom: var(--zoom-cartoes);
  }
}

/* ---------- Ajustes de tela pequena ---------- */
@media (max-width: 760px) {
  .page {
    padding-top: max(var(--espaco-topo), 62px);
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 52px;
  }
}

@media (max-width: 400px) {
  .page { padding-left: 16px; padding-right: 16px; padding-bottom: 44px; }
  .card { zoom: .9; }
}

@media (max-width: 350px) {
  .card { zoom: .8; }
}

/* =========================================================
   IMPRESSÃO — A4, cores fiéis, cartões no tamanho real
   ========================================================= */
@media print {
  @page {
    size: A4;
    margin: 10mm;
  }

  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body {
    background: #fff;
  }

  .page {
    max-width: none;
    padding: 0;
  }

  /* Posições e tamanhos do painel não valem na impressão */
  .page__head,
  .cards,
  .barra-topo {
    transform: none !important;
  }

  .page .card {
    zoom: 1 !important;
  }

  .no-print {
    display: none !important;
  }

  .folhas {
    display: none !important;
  }

  .figuras {
    display: none !important;
  }

  .cards {
    justify-content: flex-start;
    gap: 6mm;
  }

  .card {
    zoom: 1 !important;
    border-radius: 0;
    box-shadow: none;
    transition: none;
    transform: none !important;
    animation: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .card__brilho {
    display: none !important;
  }

  .card:hover {
    box-shadow: none;
  }
}