/* ═══════════════════════════════════════════════════════════════
   Codec Pro
═══════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Codec Pro";
  src: url("/fonts/codec-pro/CodecPro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Codec Pro";
  src: url("/fonts/codec-pro/CodecPro-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Codec Pro";
  src: url("/fonts/codec-pro/CodecPro-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════
   Tokens — paleta exata do app Planimani
═══════════════════════════════════════════════════════════════ */
:root {
  /* Cores principais do app */
  --pink:       #F579B2;
  --pink-dark:  #E9559F;
  --pink-faint: #FEF0F8;   /* Color(0xFFFEF0F8) */

  /* Fundo exato do app */
  --bg:         #F6F2F4;   /* Color(0xFFF6F2F4) */

  /* Texto exato do app */
  --text:       #2D1A23;   /* Color(0xFF2D1A23) */
  --text-muted: #888888;   /* Color(0xFF888888) */
  --text-soft:  #555555;

  /* Superfície (cards, botões) */
  --surface:    #FFFFFF;
  --border:     rgba(0, 0, 0, 0.07);

  /* Sombras — muito sutis, como no app */
  --shadow-sm:  0 1px 4px  rgba(0, 0, 0, 0.05);
  --shadow-md:  0 2px 12px rgba(0, 0, 0, 0.07);
  --shadow-btn: 0 3px 10px rgba(245, 121, 178, 0.28);

  /* Raios — alinhados com os do app */
  --r-card:   18px;
  --r-btn:    14px;
  --r-logo:   20px;
  --r-pill:   999px;

  --font:   "Codec Pro", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --max-w:  460px;
}

/* ═══════════════════════════════════════════════════════════════
   Reset
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  color: var(--text);
  /* Fundo idêntico ao app — flat, sem gradiente chamativo */
  background-color: var(--bg);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

a { color: inherit; text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════
   Layout
═══════════════════════════════════════════════════════════════ */
.pl-page {
  width: 100%;
  max-width: var(--max-w);
  padding: 28px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   Cabeçalho — compacto, como app bar do app
═══════════════════════════════════════════════════════════════ */
.pl-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 2px 4px;
}

.pl-logo-img {
  width: 54px;
  height: 54px;
  border-radius: var(--r-logo);
  background: var(--surface);
  padding: 6px;
  flex-shrink: 0;
  object-fit: contain;
  box-shadow: var(--shadow-md);
}

.pl-brand-texts {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pl-brand-name {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pink-dark);
}

.pl-brand-tagline {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   Card principal — card de app, não bloco promocional
═══════════════════════════════════════════════════════════════ */
.pl-card {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 22px 20px 20px;
  text-align: center;
  box-shadow: var(--shadow-md);
}

.pl-card-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.pl-card-handle {
  margin: 5px 0 13px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-muted);
}

.pl-card-bio {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-soft);
}

.pl-card-bio strong {
  color: var(--text);
  font-weight: 600;
}

/* Chips — pequenos e discretos como Chip do Flutter */
.pl-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 15px;
}

.pl-tag {
  font-size: 10.5px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--pink-faint);
  color: var(--pink-dark);
  border: 1px solid rgba(233, 85, 159, 0.16);
}

/* ═══════════════════════════════════════════════════════════════
   Botões — linguagem de FilledButton / card do app
═══════════════════════════════════════════════════════════════ */
.pl-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Botão base — white card, como ListTile do app */
.pl-link-button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-btn);
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: opacity 0.14s ease, box-shadow 0.14s ease;
  -webkit-tap-highlight-color: transparent;
}

.pl-link-button:hover {
  opacity: 0.82;
}

.pl-link-button:active {
  opacity: 0.65;
  box-shadow: none;
}

/* Ícone do botão — muito sutil */
.pl-btn-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(245, 121, 178, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
}

.pl-btn-label {
  flex: 1;
  text-align: left;
}

/* Textos empilhados — CTA principal */
.pl-btn-texts {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.pl-btn-main {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
}

.pl-btn-sub {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.75;
  line-height: 1;
}

/* CTA principal — FilledButton do app */
.pl-link-primary {
  background: var(--pink);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-btn);
  padding: 15px 16px;
  font-weight: 700;
}

.pl-link-primary .pl-btn-icon {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.pl-link-primary .pl-btn-label,
.pl-link-primary .pl-btn-texts,
.pl-link-primary .pl-btn-main,
.pl-link-primary .pl-btn-sub {
  color: #fff;
}

.pl-link-primary:hover {
  opacity: 0.90;
}

/* ═══════════════════════════════════════════════════════════════
   Redes sociais — minimalista
═══════════════════════════════════════════════════════════════ */
.pl-social {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}

.pl-social-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 11px 18px;
  border-radius: var(--r-btn);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--pink-dark);
  box-shadow: var(--shadow-sm);
  transition: opacity 0.14s ease;
  -webkit-tap-highlight-color: transparent;
  min-width: 76px;
  cursor: pointer;
}

.pl-social-btn:hover { opacity: 0.75; }
.pl-social-btn:active { opacity: 0.5; }

.pl-social-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   Rodapé
═══════════════════════════════════════════════════════════════ */
.pl-footer {
  text-align: center;
  padding-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pl-footer p {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

.pl-footer-sub {
  font-size: 10px !important;
  opacity: 0.6;
  letter-spacing: 0.03em;
}

/* ═══════════════════════════════════════════════════════════════
   Desktop — mantém sensação mobile-first
═══════════════════════════════════════════════════════════════ */
@media (min-width: 600px) {
  .pl-page {
    padding: 40px 0 56px;
  }
  .pl-card {
    padding: 26px 24px 22px;
  }
}