@font-face{font-family:'Lilita One';font-weight:400;font-display:swap;src:url(../fonts/lilita.woff2) format('woff2')}
@font-face{font-family:'Lexend';font-weight:100 900;font-display:swap;src:url(../fonts/lexend.woff2) format('woff2')}
@font-face{font-family:'Andika';font-weight:700;font-display:swap;src:url(../fonts/andika-bold.woff2) format('woff2')}

:root{
  --patio:#E8ECEF; --patio-2:#DCE2E7; --branco:#FFFFFF;
  --tinta:#1E2A44; --tinta-2:#4C5872; --linha:rgba(30,42,68,.14);
  --d1:#FFC21A; --d2:#FF7A1A; --d3:#F2457F; --d4:#1E88E5; --d5:#22A95B;
  --botao:#FFC21A; --botao-ink:#1E2A44;
  --f-display:'Lilita One','Lexend',sans-serif;
  --f-texto:'Lexend',system-ui,sans-serif;
  --f-carta:'Andika','Lexend',sans-serif;
  --raio:16px; --toque:54px;
  --sombra-papel:0 14px 26px -12px rgba(30,42,68,.45),0 2px 5px rgba(30,42,68,.18);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --gutter:20px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--patio);color:var(--tinta);font:400 17px/1.55 var(--f-texto);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* textura de concreto: fixa e sem eventos, para não repintar na rolagem */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .16 0 0 0 0 .27 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,header,footer{position:relative;z-index:1}
::selection{background:var(--d1);color:var(--tinta)}
:focus-visible{outline:3px solid var(--d4);outline-offset:3px;border-radius:8px}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:2px}
img{display:block;max-width:100%;height:auto}

/* ---------- topo ---------- */
.faixa{margin:0;padding:9px var(--gutter);font-size:13px;line-height:1.3;font-weight:500;color:#fff;background:var(--tinta);text-align:center}
.listras{display:grid;grid-template-columns:repeat(5,1fr);height:7px}
.listras i:nth-child(1){background:var(--d1)} .listras i:nth-child(2){background:var(--d2)} .listras i:nth-child(3){background:var(--d3)} .listras i:nth-child(4){background:var(--d4)} .listras i:nth-child(5){background:var(--d5)}
.marca{display:flex;align-items:center;justify-content:center;gap:9px;padding:16px var(--gutter) 0;font:400 22px/1 var(--f-display);color:var(--tinta)}
.marca .degraus{position:relative;width:30px;height:26px;flex:none}
.marca .degraus i{position:absolute;width:8px;height:8px;border-radius:2px}
.marca .degraus i:nth-child(1){left:0;bottom:0;background:var(--d1)} .marca .degraus i:nth-child(2){left:5.5px;bottom:4.5px;background:var(--d2)} .marca .degraus i:nth-child(3){left:11px;bottom:9px;background:var(--d3)} .marca .degraus i:nth-child(4){left:16.5px;bottom:13.5px;background:var(--d4)} .marca .degraus i:nth-child(5){left:22px;bottom:18px;background:var(--d5)}

.heroi{position:relative;padding:18px var(--gutter) 0;max-width:1180px;margin:0 auto;text-align:center}
.heroi h1{margin:0;font:400 clamp(40px,11vw,76px)/1.02 var(--f-display);letter-spacing:-.005em;text-wrap:balance;max-width:13ch;margin-inline:auto}
.heroi h1 .tinta{position:relative;z-index:0;white-space:nowrap;padding:0 .12em}
.heroi h1 .tinta::before{content:"";position:absolute;z-index:-1;inset:.12em -.02em .02em -.04em;background:var(--d1);border-radius:.18em .32em .22em .3em;transform:rotate(-2deg)}
.heroi .apoio{margin:14px auto 0;max-width:34ch;font-size:18px;line-height:1.45;color:var(--tinta-2)}
.heroi .apoio strong{color:var(--tinta);font-weight:600}
.acao{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:20px}
.botao{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--toque);padding:0 28px;border-radius:999px;background:var(--botao);color:var(--botao-ink);font:700 19px/1 var(--f-texto);text-decoration:none;
  box-shadow:0 12px 22px -10px rgba(214,150,0,.75),inset 0 -4px 0 rgba(30,42,68,.16);transition:transform .16s var(--ease-out),box-shadow .2s var(--ease-out)}
.botao img{width:20px;height:20px}
.botao:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.botao:hover{box-shadow:0 16px 26px -10px rgba(214,150,0,.85),inset 0 -4px 0 rgba(30,42,68,.16)}}
.preco-mini{font-size:14px;color:var(--tinta-2)}
.preco-mini b{color:var(--tinta);font-weight:700}

/* ---------- a amarelinha pintada no pátio ---------- */
.chao{position:relative;height:clamp(330px,92vw,520px);margin:6px calc(var(--gutter) * -1) 0;overflow:hidden;perspective:700px}
.chao .riscos{position:absolute;left:50%;bottom:-40px;width:min(300px,78vw);transform:translateX(-50%) rotateX(52deg);transform-origin:50% 100%}
.chao .riscos svg{width:100%;height:auto;overflow:visible}
.casa-num{font:400 70px/1 var(--f-display);paint-order:stroke;stroke:var(--tinta);stroke-width:7px;stroke-linejoin:round;fill:#fff}
.casa-nome{font:400 34px/1 var(--f-display);paint-order:stroke;stroke:var(--tinta);stroke-width:6px;stroke-linejoin:round;fill:#fff}
.pedra{position:absolute;width:13.5vw;max-width:58px;left:calc(50% + 4.4vw);bottom:18vw;filter:drop-shadow(0 8px 6px rgba(30,42,68,.45));transform:rotate(-12deg)}
.pedra-rotulo{position:absolute;left:calc(50% + 23vw);bottom:22vw;font:600 15px/1.15 var(--f-texto);color:var(--tinta);max-width:8ch}
.pedra-rotulo::before{content:"";position:absolute;left:-14px;top:.6em;width:10px;height:2px;background:var(--tinta);border-radius:2px}
.cartas{position:absolute;left:50%;bottom:39vw;width:0;height:0}
.cartas .carta{position:absolute;bottom:0}
.cartas .carta:nth-child(1){left:-152px;transform:rotate(-9deg)}
.cartas .carta:nth-child(2){left:-58px;bottom:22px;transform:rotate(-1deg)}
.cartas .carta:nth-child(3){left:38px;transform:rotate(8deg)}

/* ---------- a carta (mesmo desenho do PDF) ---------- */
.carta{--cor:var(--d3);width:96px;aspect-ratio:63/88;background:#fff;color:var(--tinta);border-radius:9px;box-shadow:var(--sombra-papel);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:10px 6px 9px;
  background-image:linear-gradient(var(--cor),var(--cor));background-size:100% 8px;background-repeat:no-repeat}
.carta img{width:78%;margin-top:6px}
.carta .palavra{font:700 17px/1 var(--f-carta);letter-spacing:.04em}
.carta .palavra em{font-style:normal;color:var(--d3)}
.carta.d1{--cor:var(--d1)} .carta.d2{--cor:var(--d2)} .carta.d4{--cor:var(--d4)} .carta.d5{--cor:var(--d5)}

@media (min-width:900px){
  :root{--gutter:48px}
  .heroi{padding-top:28px}
  .heroi h1{max-width:16ch}
  .heroi .apoio{max-width:44ch;font-size:20px}
  .chao{height:440px;margin:10px auto 0;max-width:900px}
  .chao .riscos{width:340px;bottom:-60px}
  .pedra{left:calc(50% + 22px);bottom:66px;width:58px}
  .pedra-rotulo{left:calc(50% + 92px);bottom:84px}
  .cartas{bottom:150px}
}