/* Linktree — a página (desenho do canvas "Linktree Forever Bond").
   Os tokens e os componentes v2- vêm de /linktree/ds/ (o design system do
   site, sem alterações); aqui só o que é desta página. */

html { scroll-behavior: smooth; }
body.lt { margin: 0; min-height: 100vh; }

/* Uma coluna de telemóvel, centrada num ecrã maior. */
.lt > .lt-announce,
.lt > .lt-header,
.lt > main,
.lt > .lt-footer { max-width: 520px; margin-left: auto; margin-right: auto; }

.lt-announce { display: flex; justify-content: center; align-items: center; gap: 8px; }
.lt-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--inverse-muted); }
.lt-dot.is-open { background: var(--brand-on-inverse); }

.lt-header { display: flex; justify-content: space-between; align-items: center; padding: 14px var(--page-x-mobile); border-bottom: 1px solid var(--line); }
.lt-header .v2-wordmark__name { font-size: 17px; }
.lt-header .v2-wordmark__sub { font-size: 7.5px; margin-top: 5px; }
.lt-lang { gap: 4px; }
.lt-lang .v2-tab { display: inline-flex; align-items: center; height: var(--touch-target); padding: 0 14px; }
.lt-lang .v2-tab[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--on-inverse); }

.lt-nota { margin: 20px var(--page-x-mobile) 0; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--radius-sm); font: 400 14px/1.55 var(--font-sans); color: var(--text-secondary); }
.lt-nota p { margin: 0; }

.lt-sec { padding: 44px var(--page-x-mobile) 0; }
.lt-sec--junto { padding-top: 20px; }
.lt-mb { margin-bottom: 14px; }

.lt-intro { padding-top: 28px; }
.lt-h1 { margin: 10px 0 0; font: 400 38px/1 var(--font-serif); text-transform: uppercase; text-wrap: balance; }
.lt-intro .v2-body { margin: 12px 0 0; }
.lt-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.lt-paths .v2-btn { padding: 0 12px; }

.lt-h3 { margin: 8px 0 0; font: 400 28px/1.05 var(--font-serif); text-transform: uppercase; }
.lt-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 16px; }

.lt-perm { padding-top: 36px; }
.lt-foto { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-lilac); }
.lt-perm .v2-body { margin: 10px 0 18px; }
.lt-cidades { margin: 12px 0 0; font: 500 11px var(--font-sans); letter-spacing: .1em; color: var(--text-secondary); text-align: center; }

/* O online: um bloco branco, com a marca de novidade. */
.lt-online { margin-top: 44px; background: var(--surface-raised); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.lt-online__in { padding: 36px var(--page-x-mobile) 32px; }
.lt-online__top { display: flex; align-items: center; gap: 10px; }
.lt-online .lt-h3 { margin-top: 12px; }
.lt-online .v2-body { margin: 10px 0 18px; }
.lt-badge { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--ink); color: var(--on-inverse); font: 600 10px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; }
.lt-facts { margin: 18px 0 20px; }
.lt-facts .v2-facts__row { grid-template-columns: 112px minmax(0, 1fr); padding: 12px 0; }
.lt-facts .v2-facts__t { font-size: 14px; }
.lt-facts .v2-facts__d { font-size: 13.5px; }

/* A gravação do configurador: as sete cenas da landing /criar-online/, a
   aparecer uma a uma, cada uma com a sua legenda. */
.lt-seq { margin: 0; position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden; background: #f4f1ec; }
.lt-seq__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.lt-seq__img:nth-child(1) { opacity: 1; }
.lt-seq__badge { position: absolute; top: 12px; left: 12px; padding: 6px 10px; border-radius: var(--radius-pill); background: var(--pill-light); font: 500 11px var(--font-sans); color: var(--text-secondary); }
.lt-seq__caps { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 34px; }
.lt-seq__cap { position: absolute; left: 0; bottom: 0; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--overlay-ink); color: var(--on-inverse); font: 500 12.5px var(--font-sans); opacity: 0; }

.lt-seq__img:nth-child(2) { animation: ltImg2 10.5s linear infinite; }
.lt-seq__img:nth-child(3) { animation: ltImg3 10.5s linear infinite; }
.lt-seq__img:nth-child(4) { animation: ltImg4 10.5s linear infinite; }
.lt-seq__img:nth-child(5) { animation: ltImg5 10.5s linear infinite; }
.lt-seq__img:nth-child(6) { animation: ltImg6 10.5s linear infinite; }
.lt-seq__img:nth-child(7) { animation: ltImg7 10.5s linear infinite; }
@keyframes ltImg2 { 0%, 13% { opacity: 0 } 16%, 96% { opacity: 1 } 100% { opacity: 0 } }
@keyframes ltImg3 { 0%, 27% { opacity: 0 } 30%, 96% { opacity: 1 } 100% { opacity: 0 } }
@keyframes ltImg4 { 0%, 41% { opacity: 0 } 44%, 96% { opacity: 1 } 100% { opacity: 0 } }
@keyframes ltImg5 { 0%, 55% { opacity: 0 } 58%, 96% { opacity: 1 } 100% { opacity: 0 } }
@keyframes ltImg6 { 0%, 70% { opacity: 0 } 73%, 96% { opacity: 1 } 100% { opacity: 0 } }
@keyframes ltImg7 { 0%, 84% { opacity: 0 } 87%, 96% { opacity: 1 } 100% { opacity: 0 } }

.lt-seq__cap:nth-child(1) { animation: ltCap1 10.5s step-end infinite; }
.lt-seq__cap:nth-child(2) { animation: ltCap2 10.5s step-end infinite; }
.lt-seq__cap:nth-child(3) { animation: ltCap3 10.5s step-end infinite; }
.lt-seq__cap:nth-child(4) { animation: ltCap4 10.5s step-end infinite; }
.lt-seq__cap:nth-child(5) { animation: ltCap5 10.5s step-end infinite; }
.lt-seq__cap:nth-child(6) { animation: ltCap6 10.5s step-end infinite; }
.lt-seq__cap:nth-child(7) { animation: ltCap7 10.5s step-end infinite; }
@keyframes ltCap1 { 0% { opacity: 1 } 14.3% { opacity: 0 } }
@keyframes ltCap2 { 0% { opacity: 0 } 14.3% { opacity: 1 } 28.6% { opacity: 0 } }
@keyframes ltCap3 { 0% { opacity: 0 } 28.6% { opacity: 1 } 42.9% { opacity: 0 } }
@keyframes ltCap4 { 0% { opacity: 0 } 42.9% { opacity: 1 } 57.1% { opacity: 0 } }
@keyframes ltCap5 { 0% { opacity: 0 } 57.1% { opacity: 1 } 71.4% { opacity: 0 } }
@keyframes ltCap6 { 0% { opacity: 0 } 71.4% { opacity: 1 } 85.7% { opacity: 0 } }
@keyframes ltCap7 { 0% { opacity: 0 } 85.7% { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lt-seq__img, .lt-seq__cap { animation: none !important; }
  .lt-seq__img:nth-child(7), .lt-seq__cap:nth-child(7) { opacity: 1; }
}

/* A diferença */
.lt-compare { width: 100%; border-collapse: collapse; table-layout: fixed; font: 400 13px/1.45 var(--font-sans); }
.lt-compare thead td { width: 84px; }
.lt-compare thead th { padding: 0 0 10px; text-align: left; color: var(--ink); }
.lt-compare tbody th, .lt-compare tbody td { padding: 11px 12px 11px 0; border-top: 1px solid var(--rule); text-align: left; vertical-align: top; }
.lt-compare tbody th { font: 500 11px/1.45 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
.lt-compare tbody td { color: var(--ink); }

/* Onde soldar */
.lt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 8px; }
.lt-head .v2-h2 { font-size: 28px; }
.lt-sec > .v2-body-sm { margin: 8px 0 16px; }
.lt-datas { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule); }
.lt-data { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: var(--touch-target); padding: 16px 0; border-top: 1px solid var(--rule); }
.lt-data:hover .lt-data__accao, .lt-data:hover .lt-data__cidade { color: var(--brand-hover); }
.lt-data:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.lt-data__quando { display: flex; flex-direction: column; gap: 2px; }
.lt-data__dia { font: 400 19px/1 var(--font-serif); }
.lt-data__onde { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lt-data__cidade { font: 400 17px/1.2 var(--font-serif); text-transform: uppercase; }
.lt-data__local { font: 400 13px/1.4 var(--font-sans); color: var(--text-secondary); }
.lt-data__nota { font: 600 12px var(--font-sans); color: var(--ink); }
.lt-data__tag { padding: 6px 12px; font-size: 12px; }
.lt-data__accao { font: 600 13px var(--font-sans); white-space: nowrap; }
.lt-vazio { padding: 16px 0; border-top: 1px solid var(--rule); }

/* O estúdio, esta semana */
.lt-estudio { padding: 26px 22px; gap: 6px; }
.lt-estudio .v2-body-sm { margin: 4px 0 10px; }
.lt-semana { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule); }
.lt-semana li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); font: 400 14px var(--font-sans); color: var(--ink); }
.lt-semana li.is-agora { font-weight: 600; }
.lt-semana__horas { display: flex; flex-direction: column; align-items: flex-end; text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.lt-semana__horas small { font-size: 12px; color: var(--text-tertiary); }
.lt-semana li.is-fechado .lt-semana__horas { color: var(--text-tertiary); }
.lt-estudio__foot { margin-top: 10px; padding-top: 0; border-top: 0; }

/* Mais */
.lt-links .v2-prices__row { min-height: var(--touch-target); padding: 16px 0; }
.lt-links .v2-prices__n { font-size: 17px; }
.lt-seta { font: 500 16px var(--font-sans); }

/* Gift card */
.lt-gift { margin-top: 60px; padding: 48px var(--page-x-mobile); max-width: 520px; margin-left: auto; margin-right: auto; }
.lt-gift__card { max-width: 300px; margin: 0 auto 28px; transform: rotate(-2deg); }
.lt-gift__card .v2-gc__name { font-size: 26px; }
.lt-gift__card .v2-gc__pill { font-size: 20px; }
.lt-gift .v2-h2 { font-size: 28px; margin-top: 10px; }
.lt-gift .v2-body { margin: 12px 0 20px; }

/* Rodapé */
.lt-footer { display: flex; flex-direction: column; gap: 18px; align-items: center; padding: 40px var(--page-x-mobile) 32px; text-align: center; }
.lt-footer .v2-footer__brand { font-size: 18px; }
.lt-footer p { margin: 0; font: 400 13px/1.6 var(--font-sans); color: var(--inverse-tertiary); }
.lt-footer__social { display: flex; gap: 10px; }
.lt-footer .lt-footer__social a { display: inline-flex; color: var(--on-inverse); border-color: var(--rule-inverse); }
.lt-footer .lt-footer__social a:hover { background: var(--on-inverse); color: var(--ink); }
.lt-footer .lt-footer__site { font: 500 12px var(--font-sans); color: var(--inverse-tertiary); }