/* Link na bio Studio Side — tokens e layout.
   Medidas do Canva da Dani (360px de largura), com tipografia ampliada para leitura no celular. */

@font-face { font-family: 'Raleway'; src: url('../fonts/raleway-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('../fonts/raleway-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('../fonts/raleway-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --c-bg: #ffffff;
  --c-ink: #232624;        /* título do Canva */
  --c-text: #6b6b6b;       /* Canva usa #7f7f7f (3,9:1); escurecido para AA */
  --c-line: #000000;       /* borda dos botões e ícones */
  --c-page: #f4f0ea;       /* fundo quente atrás do cartão, no computador */

  --f-display: 'Raleway', system-ui, sans-serif;
  --f-text: 'Inter', system-ui, sans-serif;

  --fs-title: 2.25rem;       /* "Studio Side" — Canva ~36px */
  --fs-display: 2rem;        /* "Prazer, somos Dany e Cauê" — Canva ~34px */
  --fs-display-sm: 1.625rem; /* frase de fechamento — Canva ~26px */
  --fs-question: 1.0625rem;  /* "Vamos dar início…" — Canva ~15px */
  --fs-button: 0.9375rem;    /* botões — Canva ~11,5px */
  --fs-text: 0.875rem;       /* texto corrido — Canva ~10,5px */
  --fs-tagline: 0.6875rem;   /* PROJETO + GESTÃO + TURNKEY — Canva ~11px */

  --col-max: 420px;
  --gutter: 10%;             /* Canva: 36px em 360 */
  --btn-h: 52px;             /* Canva: 42px; subiu para alvo de toque */
  --gap: 12px;               /* Canva: 11px entre botões */
  --space-block: 44px;       /* Canva: 42px entre blocos */
  --radius-control: 14px;
  --radius-photo: 16px;
  --border: 1.5px solid var(--c-line);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-bg); color: var(--c-ink); font-family: var(--f-text); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; }
::selection { background: var(--c-ink); color: var(--c-bg); }
:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }

.page { max-width: var(--col-max); margin-inline: auto; padding-bottom: var(--space-block); }

/* 1–3. Capa, identidade e ícones */
.hero { text-align: center; }
.hero__img { width: 100%; }
.hero__title { margin: 4px 0 0; font-family: var(--f-display); font-weight: 700; font-size: var(--fs-title); line-height: 1.1; letter-spacing: -0.01em; }
.hero__tagline { margin: 8px 0 0; padding-left: 0.42em; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-tagline); letter-spacing: 0.42em; text-transform: uppercase; color: var(--c-text); }
.text { font-size: var(--fs-text); line-height: 1.5; color: var(--c-text); text-align: justify; hyphens: auto; hyphenate-limit-chars: 8 4 4; }
.name { hyphens: none; } /* nome próprio não leva hífen de quebra */
.hero__bio { margin: 16px var(--gutter) 0; }
.social { display: flex; justify-content: center; gap: 20px; margin-top: 24px; }
.social__link { display: grid; place-items: center; width: 48px; height: 48px; border: var(--border); border-radius: 50%; color: var(--c-line); transition: background-color .2s, color .2s; }

/* 4–9. Blocos */
.block { margin: var(--space-block) var(--gutter) 0; }
.question { margin: 0 0 16px; padding-inline-start: 4px; font-family: var(--f-display); font-weight: 800; font-size: var(--fs-question); line-height: 1.3; }
/* "Conheça alguns dos nossos projetos" mede 17,6em: 4,4vw mantém uma linha só, como no Canva */
.question--center { padding-inline-start: 0; text-align: center; font-size: min(var(--fs-question), 4.4vw); }

.card { display: block; overflow: hidden; border: var(--border); border-radius: var(--radius-control); text-decoration: none; }
.card__img { width: 100%; aspect-ratio: 870 / 465; object-fit: cover; }
.card__label, .button { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-button); }
.card__label { display: flex; align-items: center; min-height: var(--btn-h); padding: 0 20px; transition: background-color .2s, color .2s; }
.buttons { display: grid; gap: var(--gap); margin: var(--gap) 0 0; padding: 0; list-style: none; }
.button { display: flex; align-items: center; min-height: var(--btn-h); padding: 0 20px; border: var(--border); border-radius: var(--radius-control); text-decoration: none; transition: background-color .2s, color .2s; }

/* Preenchimento preto: resposta ao toque no celular; hover só onde existe mouse
   (no touch o hover "gruda" depois do toque) */
.button:active, .card:active .card__label, .social__link:active { background: var(--c-line); color: var(--c-bg); }
@media (hover: hover) {
  .button:hover, .card:hover .card__label, .social__link:hover { background: var(--c-line); color: var(--c-bg); }
}

.videos { display: grid; gap: 24px; }
.video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: var(--radius-photo); overflow: hidden; background: #000; cursor: pointer; }
.video img, .video iframe { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
/* play no canto superior direito: o centro das capas tem o título do vídeo */
.video__play { position: absolute; top: 12px; right: 12px; width: 40px; height: 28px; border-radius: 8px; background: #ff0000; box-shadow: 0 2px 8px rgb(0 0 0 / 0.25); }
.video__play::after { content: ''; position: absolute; inset: 0; width: 0; height: 0; margin: auto; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #ffffff; transform: translateX(1px); }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 0; padding: 0; list-style: none; }
.grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-photo); }

/* Títulos acompanham a largura para manter as quebras do Canva:
   "somos Dany e Cauê" (9,3em) em 1 linha; a frase de fechamento em 3 */
.display { margin: 0 0 28px; font-family: var(--f-display); font-weight: 700; font-size: min(var(--fs-display), 8.3vw); line-height: 1.15; text-align: center; text-wrap: balance; }
.display--sm { margin-bottom: 16px; font-size: min(var(--fs-display-sm), 6.2vw); }
.about__img { width: 100%; border-radius: 14px 14px 34px 34px; }
.about__text { margin-top: 28px; }
.about__text p { margin: 0 0 1.1em; }
.closing__text { margin: 0; }
.closing .button { margin-top: 24px; }

/* Rodapé e barra de cookies */
.footer { padding: 0 16px 24px; text-align: center; font-size: 0.75rem; }
.footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--c-text); }
.consent { position: fixed; inset: auto 0 0 0; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: var(--border); background: var(--c-bg); font-size: 0.8125rem; }
.consent[hidden] { display: none; }
body:has(.consent:not([hidden])) { padding-bottom: 72px; } /* a barra fixa não cobre o último botão */
.consent p { margin: 0; }
.consent p a { display: inline-flex; align-items: center; min-height: 44px; } /* alvo de toque */
.consent__ok { min-width: 64px; min-height: 44px; border: var(--border); border-radius: var(--radius-control); background: var(--c-line); color: var(--c-bg); font: 800 var(--fs-button) var(--f-display); cursor: pointer; }

/* Computador e tablet: a coluna vira um cartão sobre fundo quente. No celular nada muda. */
@media (min-width: 600px) {
  :root { --col-max: 460px; }
  body { background: var(--c-page); }
  .page, .policy {
    margin-block: 48px 16px;
    overflow: hidden;
    border-radius: 24px;
    background: var(--c-bg);
    box-shadow: 0 16px 48px rgb(35 38 36 / 0.10), 0 2px 6px rgb(35 38 36 / 0.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}