/* =========================================================
   Pitanga Rosa — Apresentação das páginas digitais
   DESDOBRA · Design & Experiências Digitais
   ========================================================= */

@font-face { font-family: "Instrument Serif"; src: url("assets/fonts/InstrumentSerif-Regular.woff") format("woff"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("assets/fonts/InstrumentSerif-Italic.woff") format("woff"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/fonts/Poppins-Light.woff") format("woff"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/fonts/Poppins-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/fonts/Poppins-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }

:root {
  /* identidade Pitanga Rosa (mesmos valores das páginas Bio Premium) */
  --turquesa: #2E9E9A;
  --turquesa-escuro: #1F6F6C;
  --turquesa-claro: #E3F2F0;
  --offwhite: #FAF7F2;
  --areia: #EFE8DD;
  --tinta: #22302F;
  --tinta-suave: #5E6B69;
  --dourado: #B8955A;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --largura: 460px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  background:
    radial-gradient(110% 55% at 50% 0%, #fff 0%, rgba(255,255,255,0) 70%),
    var(--offwhite);
  color: var(--tinta);
  font: 300 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.page {
  width: 100%;
  max-width: var(--largura);
  min-height: 100svh;
  margin: 0 auto;
  padding: calc(56px + env(safe-area-inset-top)) 24px calc(36px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  text-align: center;
}

/* ---------- marca ---------- */
.brand {
  width: 112px;
  height: 112px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(184,149,90,.38), 0 0 0 7px #fff, 0 0 0 8px rgba(184,149,90,.14), 0 18px 36px -20px rgba(34,48,47,.35);
}
.brand__img { display: block; width: 102px; max-width: none; height: auto; aspect-ratio: 420 / 119; }

/* ---------- títulos ---------- */
.title {
  margin: 42px auto 0;
  max-width: 13ch;
  font: 400 40px/1.06 var(--serif);
  letter-spacing: -.005em;
  color: var(--tinta);
  text-wrap: balance;
}
.title em { font-style: italic; color: var(--turquesa-escuro); }
.subtitle {
  margin: 18px auto 0;
  max-width: 30ch;
  font-size: 14.5px;
  color: var(--tinta-suave);
  text-wrap: balance;
}

/* ---------- seleção ---------- */
.choose { margin-top: 44px; }

.rule { display: flex; justify-content: center; }
.rule span {
  width: 44px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--dourado), transparent);
}

.choose__title {
  margin: 22px 0 22px;
  font: italic 400 19px/1.3 var(--serif);
  color: var(--tinta);
}

.units { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.unit {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 26px 12px 22px;
  border: 1px solid rgba(34,48,47,.10);
  border-radius: 20px;
  background: rgba(255,255,255,.72);
  color: inherit;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 24px -22px rgba(34,48,47,.45);
  transition: border-color .45s var(--ease), background-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
  touch-action: manipulation;
}
.unit__num { font: 400 10px/1 var(--sans); letter-spacing: .32em; color: var(--dourado); }
.unit__name { margin-top: 12px; font: 400 28px/1 var(--serif); color: var(--tinta); transition: color .45s var(--ease); }
.unit__meta { margin-top: 8px; font: 400 9.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--tinta-suave); }
.unit__dot {
  width: 14px; height: 14px; margin-top: 18px;
  border-radius: 50%;
  border: 1px solid rgba(34,48,47,.22);
  position: relative;
  transition: border-color .45s var(--ease);
}
.unit__dot::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--turquesa-escuro);
  transform: scale(0); transition: transform .45s var(--ease);
}

@media (hover: hover) {
  .unit:hover { border-color: rgba(31,111,108,.32); background: #fff; transform: translateY(-2px); }
}
.unit:active { transform: scale(.985); }
.unit[aria-checked="true"] {
  border-color: var(--turquesa-escuro);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(31,111,108,.08), 0 18px 34px -24px rgba(31,111,108,.55);
  transform: none;
}
.unit[aria-checked="true"] .unit__name { color: var(--turquesa-escuro); }
.unit[aria-checked="true"] .unit__dot { border-color: var(--turquesa-escuro); }
.unit[aria-checked="true"] .unit__dot::after { transform: scale(1); }
.unit:focus-visible { outline: 2px solid var(--turquesa); outline-offset: 3px; }

/* ---------- ações ---------- */
.actions {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(8px);
  transition: grid-template-rows .6s var(--ease), opacity .5s var(--ease) .05s, transform .6s var(--ease);
  visibility: hidden;
}
.actions.is-open { grid-template-rows: 1fr; opacity: 1; transform: none; visibility: visible; }
.actions__inner { overflow: hidden; display: grid; gap: 10px; padding: 26px 20px 22px; margin: 0 -20px; }  /* folga para a sombra dos botões não ser cortada */

.actions__url { margin: 0 0 8px; font-size: 12px; letter-spacing: .02em; color: var(--tinta-suave); }
.actions__url span { display: inline-block; transition: opacity .16s ease, transform .16s ease; user-select: all; -webkit-user-select: all; word-break: break-all; }
.actions__url span.is-swapping { opacity: 0; transform: translateY(3px); }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 22px;
  border-radius: 999px;
  font: 500 11.5px/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), transform .2s var(--ease);
}
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn:active { transform: scale(.985); }
.btn:focus-visible { outline: 2px solid var(--turquesa); outline-offset: 3px; }

.btn--primary {
  border: 1px solid var(--turquesa-escuro);
  background: var(--turquesa-escuro);
  color: #fff;
  box-shadow: 0 14px 28px -18px rgba(31,111,108,.85);
}
@media (hover: hover) { .btn--primary:hover { background: #185C59; } }

.btn--ghost {
  border: 1px solid rgba(34,48,47,.18);
  background: rgba(255,255,255,.6);
  color: var(--tinta);
}
@media (hover: hover) { .btn--ghost:hover { border-color: var(--turquesa-escuro); color: var(--turquesa-escuro); background: #fff; } }
.btn--ghost .i-check { display: none; }
.btn--ghost.is-done { border-color: var(--turquesa); color: var(--turquesa-escuro); background: var(--turquesa-claro); }
.btn--ghost.is-done .i-copy { display: none; }
.btn--ghost.is-done .i-check { display: block; }

.actions__status {
  margin: 4px 0 0; min-height: 18px;
  font-size: 11.5px; color: var(--turquesa-escuro);
  opacity: 0; transition: opacity .35s var(--ease);
}
.actions__status.is-visible { opacity: 1; }
.actions__status.is-error { color: var(--tinta-suave); }

.noscript { margin-top: 24px; font-size: 13px; line-height: 2; }
.noscript a { color: var(--turquesa-escuro); }

/* ---------- assinatura ---------- */
.sign {
  margin-top: auto;
  padding-top: 64px;
  display: grid;
  justify-items: center;
  gap: 6px;
}
.sign__mark { font: 500 9px/1 var(--sans); letter-spacing: .5em; margin-right: -.5em; color: var(--tinta); opacity: .55; }
.sign__line { font: italic 400 12.5px/1 var(--serif); color: var(--tinta-suave); opacity: .8; }

/* ---------- entrada suave ---------- */
.js .reveal { opacity: 0; transform: translateY(10px); animation: rise .9s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 110ms + 80ms); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- telas maiores ---------- */
@media (min-width: 640px) {
  :root { --largura: 540px; }
  .page { padding-top: 88px; }
  .title { font-size: 48px; }
  .actions__inner { grid-template-columns: 1fr 1fr; }
  .actions__url, .actions__status { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { animation: none; opacity: 1; transform: none; }
  .unit, .actions, .btn, .unit__dot::after, .actions__url span { transition: none; }
}