/* Página de links · v4 (entrada para dentro na capa, borda fina nos cartões, fundo com grade e traços) */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Fundo: grade fina + traços no estilo da assinatura ---------- */
body {
  position: relative;
  font-family: var(--fonte-texto);
  background-color: var(--fundo);
  background-image:
    linear-gradient(var(--grade-cor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grade-cor) 1px, transparent 1px);
  background-size: var(--grade) var(--grade);
  background-position: center top;
}
body::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/img/tracos-fundo.svg") center top / 100% auto repeat-y;
}
.pagina { position: relative; z-index: 0; }

/* ================= CAPA ================= */
.capa { position: relative; padding: var(--capa-margem) var(--capa-margem) 0; }

.capa__quadro {
  position: relative;
  aspect-ratio: var(--capa-proporcao);
  border-radius: var(--raio);
  border: var(--borda);
  overflow: hidden;
  background: var(--creme-capa);
}
.capa__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* degradê suave por dentro, chegando no tom da borda de baixo */
.capa__quadro::after {
  content: ""; position: absolute; inset: 70% 0 0;
  background: linear-gradient(to bottom, rgb(218 196 167 / 0), rgb(218 196 167 / .4));
}

/* entrada para dentro, no meio da borda de baixo: o bloco é recortado com a curva
   (img/entrada.svg) e o traço fino da borda acompanha a curva por cima */
.capa__quadro {
  -webkit-mask: url("/img/entrada.svg") center bottom / var(--entrada-largura) var(--entrada-altura) no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: url("/img/entrada.svg") center bottom / var(--entrada-largura) var(--entrada-altura) no-repeat exclude, linear-gradient(#000 0 0);
}
.capa__entrada {
  position: absolute; z-index: 2; left: 50%; bottom: 0;
  width: var(--entrada-largura); height: var(--entrada-altura);
  transform: translateX(-50%);
  overflow: visible;
}
.capa__entrada path { fill: none; stroke: rgb(105 49 10 / .16); stroke-width: 1px; vector-effect: non-scaling-stroke; }
/* setinha simples dentro da entrada */
.capa__seta {
  position: absolute; z-index: 3; left: 50%; bottom: calc(var(--entrada-altura) * .2);
  width: .8rem; height: .5rem; transform: translateX(-50%);
  fill: none; stroke: var(--marrom); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}

/* ================= LINKS ================= */
.links {
  display: grid; gap: var(--cartao-espaco);
  width: 100%; max-width: calc(var(--coluna) + var(--capa-margem) * 2);
  margin-inline: auto;
  padding: var(--e-3) var(--capa-margem) var(--e-3);
}

/* ---------- Cartão: foto inteira, borda fina e moldura interna ---------- */
.cartao {
  --cor-logo: var(--branco);
  --moldura: rgb(255 255 255 / .38);
  position: relative; isolation: isolate;
  display: flex; align-items: center;
  height: var(--cartao-altura);
  padding: 0 var(--e-3);
  border-radius: var(--raio);
  border: var(--borda);
  overflow: hidden;
  background: var(--marrom);
}
.cartao--claro { --cor-logo: var(--marrom); --moldura: rgb(105 49 10 / .16); background: var(--creme); }
/* moldura fina por dentro, a 7px da borda */
.cartao::after {
  content: ""; position: absolute; inset: 7px; z-index: 1; pointer-events: none;
  border: 1px solid var(--moldura);
  border-radius: calc(var(--raio) - 7px);
}

.cartao__foto {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 100% 22%;
  transition: transform var(--lento) var(--curva);
}
.cartao__foto--escurece { filter: brightness(.68); }
/* a pessoa recortada por cima da moldura e do logo: dá profundidade */
.cartao__recorte {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 100% 22%;
  transition: transform var(--lento) var(--curva);
}
.cartao > :not(.cartao__foto):not(.cartao__recorte) { position: relative; z-index: 2; }

.cartao__logo {
  display: block;
  width: var(--logo-largura); max-height: 74%;
  background: var(--cor-logo);
  -webkit-mask: var(--logo) left center / contain no-repeat;
          mask: var(--logo) left center / contain no-repeat;
}
.cartao__marca { width: var(--logo-largura); height: auto; max-height: 84%; object-fit: contain; object-position: left center; }
.cartao__marca--3bs { width: calc(var(--logo-largura) * .95); }
.cartao__marca--suica { width: 100%; max-height: none; }
.cartao__marca--mfv { width: min(44%, 14rem); }
.cartao__logo--saara { width: min(44%, 14rem); }

.cartao__pilha { display: grid; justify-items: start; gap: .35rem; width: var(--logo-largura); }
.cartao__pilha .cartao__logo { width: 100%; }
.cartao__pilha--criadora { width: 86%; }  /* maior: a ponta do A passa por trás dela */

.selo {
  padding: .25rem .9rem .3rem;
  border-radius: 999px;
  background: var(--creme); color: var(--marrom);
  font: 800 var(--t-selo)/1.1 var(--fonte-texto); letter-spacing: .14em; text-transform: uppercase;
}

/* risco solto embaixo do Criadora, no traço da assinatura */
.risco { width: 82%; height: auto; overflow: visible; }
.risco path { fill: none; stroke: var(--laranja); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.anim-pronta .risco path { stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.4s var(--curva) .2s; }
.anim-pronta .visivel .risco path { stroke-dashoffset: 0; }

/* texto do grupo: palavras-chave em faixa, quebras pensadas */
.grupo { display: grid; justify-items: start; gap: .3rem; max-width: 74%; font: 500 var(--t-grupo)/1.2 var(--fonte-texto); color: var(--marrom); }
.grupo b {
  display: inline-block;
  padding: .18em .45em .2em;
  border-radius: 4px;
  background: var(--marrom); color: var(--branco);
  font-weight: 800; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
}
.grupo__whats { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.logo-whatsapp { width: 1.35em; height: 1.35em; color: var(--whatsapp); }

.cartao:hover .cartao__foto, .cartao:focus-visible .cartao__foto,
.cartao:hover .cartao__recorte, .cartao:focus-visible .cartao__recorte { transform: scale(1.05); }
.cartao:focus-visible { outline: 2px solid var(--laranja); outline-offset: 3px; }

/* ---------- Mini cartões com a identidade de cada plataforma ---------- */
.mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cartao-espaco); }
.mini__cartao {
  position: relative; overflow: hidden;
  display: grid; align-content: space-between; justify-items: start;
  height: var(--mini-altura);
  padding: var(--e-3) var(--e-2) var(--e-2);
  border-radius: var(--raio);
  transition: filter var(--rapido) var(--curva);
}
.mini__cartao::after {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  border: 1px solid rgb(255 255 255 / .35);
  border-radius: calc(var(--raio) - 7px);
}
/* WhatsApp: verde oficial, texto branco, balão "digitando" e logo grande ao fundo */
.mini__cartao--whatsapp {
  background: var(--whatsapp); color: var(--branco);
  background-image: radial-gradient(circle at 0 100%, var(--whatsapp-teal) 0 62%, transparent 62.5%);
}
.mini__marca-dagua { position: absolute; right: -1.4rem; bottom: -1.6rem; width: 7.5rem; height: 7.5rem; color: rgb(255 255 255 / .16); transform: rotate(-12deg); }
.mini__topo { display: flex; align-items: center; gap: .55rem; }
.mini__logo { width: 2.2rem; height: 2.2rem; flex: none; }
.mini__cartao--whatsapp .mini__logo { color: var(--branco); }
.balao {
  position: relative; display: inline-flex; gap: 3px; align-items: center;
  padding: .45rem .6rem; border-radius: 12px 12px 12px 3px;
  background: var(--branco);
}
.balao i { width: 5px; height: 5px; border-radius: 50%; background: var(--whatsapp-teal); }
.anim-pronta .balao i { animation: digitando 1.2s infinite ease-in-out; }
.anim-pronta .balao i:nth-child(2) { animation-delay: .15s; }
.anim-pronta .balao i:nth-child(3) { animation-delay: .3s; }
@keyframes digitando { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

/* YouTube: fundo escuro do app, play vermelho e a barra de progresso do player */
.mini__cartao--youtube { background: var(--youtube-fundo); color: var(--branco); padding-bottom: 2.1rem; }
.mini__cartao--youtube::after { border-color: rgb(255 255 255 / .14); }
.mini__logo--yt { width: 2.8rem; height: 2rem; }
.progresso {
  position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1.05rem;
  height: 3px; border-radius: 3px; background: rgb(255 255 255 / .25);
}
.progresso i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 62%;
  border-radius: 3px; background: var(--youtube);
}
.progresso i::after {
  content: ""; position: absolute; right: -6px; top: 50%;
  width: 12px; height: 12px; border-radius: 50%; transform: translateY(-50%);
  background: var(--youtube);
}
.mini__texto { position: relative; display: grid; font: 800 var(--t-mini)/1.05 var(--fonte-texto); letter-spacing: -.01em; }
.mini__texto small { font-size: .82em; font-weight: 600; letter-spacing: 0; }
.mini__cartao:hover, .mini__cartao:focus-visible { filter: brightness(1.06); }
.mini__cartao:focus-visible { outline: 2px solid var(--laranja); outline-offset: 3px; }

/* ---------- Rodapé ---------- */
.rodape { padding: var(--e-2) 0 var(--e-1); text-align: center; }
.rodape p { font-size: .72rem; line-height: 1.8; color: var(--texto); }
.rodape__div { display: inline-block; width: 1px; height: .85em; margin: 0 .7em; vertical-align: -.1em; background: var(--areia); }

/* ================= DESKTOP: uma coluna central, capa e cartões na mesma largura ================= */
/* ================= COMPUTADOR: capa larga no topo + cartões em duas colunas ================= */
@media (min-width: 700px) and (max-width: 999px) {
  .capa { max-width: calc(var(--coluna) + var(--capa-margem) * 2); margin-inline: auto; padding-top: var(--e-3); }
}
@media (min-width: 1000px) {
  .capa, .links { max-width: var(--pc-largura); margin-inline: auto; padding-inline: var(--e-4); }
  .capa { padding-top: var(--e-4); }
  .capa__quadro { aspect-ratio: auto; height: var(--pc-capa-altura); }
  .capa__foto { object-position: 50% 4%; }

  .links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pc-espaco);
    padding-top: var(--e-4); padding-bottom: var(--e-4);
  }
  .cartao { height: var(--pc-cartao-altura); }
  .mini { gap: var(--pc-espaco); }
  .mini__cartao { height: var(--pc-cartao-altura); }
  .rodape { grid-column: 1 / -1; padding-top: var(--e-3); }
  .cartao__pilha--criadora { width: 64%; }
  .cartao__pilha:has(.cartao__marca--suica) { width: min(46%, 13rem); }
}