/* Vôlei de Praia (viniciusrossato.com/volei-praia/): the colors come from the game's own sunset
   (indigo sky, pink, peach, sand) with the VINI JOGA yellow and Fredoka. */

:root {
  --noite: #1b1838;
  --noite-2: #241f4a;
  --noite-3: #312a62;
  --rosa: #e7a1b6;
  --pessego: #ffd3a8;
  --areia: #f0dcb4;
  --areia-2: #e3c48e;
  --tinta-areia: #2b1d0c;
  --sol: #ffd23f;
  --sol-escuro: #f08a3c;
  --azul: #1f7ae0;
  --texto: #fff7ec;
  --texto-2: #d8d2ee;

  --display: "Fredoka", "Segoe UI", system-ui, sans-serif;
  --body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;

  --gutter: clamp(16px, 5vw, 48px);
  --pad: max(var(--gutter), calc((100% - 1240px) / 2));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--noite); color: var(--texto); font: 400 17px/1.55 var(--body); overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--sol); outline-offset: 3px; border-radius: 6px; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 20; padding: 10px 16px; border-radius: 999px; background: var(--sol); color: var(--noite); font-weight: 600; text-decoration: none; }
.pular:focus { top: 12px; }

/* ---- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 2px solid transparent; font: 600 17px/1 var(--body); text-decoration: none; transition: transform .15s ease, background-color .15s, border-color .15s, color .15s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn-sol { background: var(--sol); color: var(--noite); }
.btn-sol:hover { background: #ffdf6e; }
.btn-vidro { border-color: #ffffff6b; color: var(--texto); background: #1b183840; }
.btn-vidro:hover { border-color: var(--sol); color: var(--sol); }

/* ---- top bar over the art */
.barra { position: absolute; z-index: 5; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px var(--pad); }
.voltar { font: 600 15px/1 var(--body); text-decoration: none; padding: 10px 14px; border-radius: 999px; background: #1b18388c; }
.voltar:hover { background: #1b1838cc; }
.marca img { width: 92px; }

/* ---- opening: the art, title over the sky on wide screens */
.abertura { position: relative; display: grid; min-height: min(100svh, max(620px, 56.25vw)); align-items: center; background: var(--noite); isolation: isolate; }
.abertura-arte { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.abertura::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #1b1838e0 0%, #1b1838a6 28%, #1b183800 58%), linear-gradient(0deg, #1b1838 0%, #1b183800 12%); }
/* The text stays over the sky and the net, left of the attacker (about half of the art). */
.abertura-texto { display: grid; gap: 18px; justify-items: start; max-width: min(600px, 47vw); padding: 110px var(--pad) 72px; }
.selo { font: 600 13px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; background: #ffd23f24; color: var(--sol); }
.titulo { display: grid; gap: 6px; }
.t1 { font: 700 clamp(64px, 9.6vw, 140px)/.86 var(--display); text-transform: uppercase; color: #fff; text-shadow: 0 .055em 0 var(--sol-escuro), 0 .12em .3em #0006; }
.t2 { font: 700 clamp(26px, 3.4vw, 50px)/1 var(--display); text-transform: uppercase; letter-spacing: .3em; color: var(--sol); text-shadow: 0 2px 10px #0007; }
.chamada { font: 600 clamp(24px, 2.4vw, 32px)/1.15 var(--display); }
.lead { color: var(--texto-2); max-width: 32em; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* ---- sections */
.cabeca { display: grid; gap: 8px; margin-bottom: clamp(26px, 4vw, 44px); }
.cabeca h2, .saber h2 { font: 700 clamp(38px, 5vw, 60px)/1 var(--display); color: var(--sol); }
.sub { color: var(--texto-2); max-width: 46em; }

.baixar { padding: clamp(56px, 8vw, 100px) var(--pad); background: var(--noite); }
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 16px; }
.cartao { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 24px; border-radius: 22px; background: var(--noite-2); border: 1px solid #ffffff1c; }
.cartao h3 { font: 600 28px/1.1 var(--display); }
.cartao p { color: var(--texto-2); }
.cartao .ficha { font: 600 14px/1.4 var(--body); color: #b9b1dd; font-variant-numeric: tabular-nums; }
.cartao .btn { margin-top: auto; align-self: stretch; }
.icone { width: 52px; height: 52px; fill: none; stroke: var(--sol); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cartao.sugerido { border-color: var(--sol); box-shadow: 0 0 0 1px var(--sol), 0 30px 60px -30px #ffd23f55; }
.para-voce { position: absolute; top: 18px; right: 18px; padding: 6px 10px; border-radius: 999px; background: var(--sol); color: var(--noite); font: 600 12px/1 var(--body); letter-spacing: .04em; }

.jeitos { padding: clamp(56px, 8vw, 100px) var(--pad); background: linear-gradient(170deg, var(--noite-2) 0%, #4a3a7e 55%, #a9668f 100%); }
.jeitos-lista { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; counter-reset: jeito; }
.jeitos-lista li { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 20px; background: #1b18385c; border: 1px solid #ffffff1f; counter-increment: jeito; }
.jeitos-lista h3 { font: 600 23px/1.15 var(--display); }
.jeitos-lista h3::before { content: counter(jeito); display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 10px; border-radius: 50%; background: var(--sol); color: var(--noite); font-size: 17px; vertical-align: 3px; }
.jeitos-lista p { color: #efe9ff; }
.cena { width: 100%; max-width: 220px; height: auto; aspect-ratio: 16 / 9; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cena .onda { stroke: var(--sol); stroke-dasharray: 4 5; }

.movimentos { padding: clamp(56px, 8vw, 100px) var(--pad); background: linear-gradient(180deg, var(--areia) 0%, var(--areia-2) 100%); color: var(--tinta-areia); }
.movimentos .cabeca h2 { color: var(--noite); }
.movimentos .sub { color: #5a4321; }
.mov-lista { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.mov-lista li { display: grid; justify-items: center; text-align: center; gap: 6px; }
.mov-lista img { height: clamp(200px, 22vw, 290px); width: auto; }
.mov-lista h3 { font: 700 24px/1.1 var(--display); color: var(--noite); }
.mov-lista p { font-size: 15px; line-height: 1.35; max-width: 13em; }
.mov-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin-top: clamp(28px, 4vw, 44px); }
.mov-extra p { padding: 16px 18px; border-radius: 16px; background: #fff8ea99; border: 1px solid #c9a46a66; }
.mov-extra b { color: var(--noite); }

.tela { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: clamp(56px, 8vw, 100px) var(--pad); background: var(--noite); }
.tela figure { display: grid; gap: 12px; }
.tela img { width: 100%; border-radius: 16px; box-shadow: 0 30px 60px -30px #000c; }
.tela figcaption { color: var(--texto-2); font-size: 15px; }

.saber { padding: clamp(48px, 7vw, 84px) var(--pad); background: var(--noite-2); }
.saber h2 { margin-bottom: 22px; }
.saber ul { display: grid; gap: 12px; padding: 0; list-style: none; max-width: 52em; }
.saber li { position: relative; padding-left: 26px; color: var(--texto-2); }
.saber li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--sol); }

.rodape { display: grid; justify-items: center; gap: 10px; padding: 44px var(--pad) 52px; background: #13112a; text-align: center; color: var(--texto-2); font-size: 15px; }
.rodape img { width: 120px; }
.rodape a { color: var(--sol); }

/* ---- tablet */
@media (max-width: 1000px) {
  .mov-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
}

/* ---- phone: the art on top, the title below it */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .marca img { width: 72px; }
  .abertura { min-height: 0; display: block; }
  .abertura-arte { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 3; object-position: 55% 42%; }
  .abertura::before { background: linear-gradient(0deg, #1b1838 0%, #1b183800 20%); height: calc(100vw * 3 / 4); bottom: auto; }
  .abertura-texto { max-width: none; padding: 0 var(--pad) 48px; margin-top: -26px; }
  .voltar { font-size: 14px; padding: 8px 12px; }
  .t1 { font-size: clamp(64px, 20vw, 96px); }
  .t2 { font-size: clamp(22px, 6.6vw, 34px); letter-spacing: .26em; }
  .acoes .btn { flex: 1 1 auto; }
  .mov-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mov-lista img { height: 200px; }
  .tela { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}