/* Natal em Travessas — identidade caseira de Natal: papel creme, kraft, fita adesiva, letra de mão. */
:root{
  --creme:#fbf5ea; --papel:#fffaf1; --kraft:#d9b98c; --kraft2:#c9a473;
  --vermelho:#b8282e; --vermelho2:#8f1d22; --pinho:#1f4a38; --pinho2:#16372a;
  --ouro:#c99a3b; --choco:#3a2418; --tx:#2f2219; --tx2:#6b5646; --linha:#ead9bf;
  --sombra:0 10px 30px rgba(58,36,24,.12); --r:18px;
  --serif:"Fraunces",Georgia,serif; --sans:"Nunito",system-ui,-apple-system,sans-serif; --mao:"Caveat",cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important} /* modal/toast escondidos não podem bloquear o toque */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--tx);background:var(--creme);line-height:1.55;font-size:17px;
  background-image:radial-gradient(rgba(201,154,59,.07) 1px,transparent 1px);background-size:18px 18px}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1080px,100%);margin:0 auto;padding:0 16px}
.estreito{width:min(720px,100%);margin:0 auto;padding:0 16px}

/* tipografia */
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.12;color:var(--choco);letter-spacing:-.01em}
h1{font-size:clamp(32px,7vw,54px)}
h2{font-size:clamp(27px,5.4vw,40px)}
h3{font-size:clamp(20px,3.6vw,24px)}
.mao{font-family:var(--mao);font-weight:600;color:var(--vermelho);font-size:1.25em;line-height:1}
.olho{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--pinho)}
.olho::before{content:"";width:18px;height:2px;background:var(--vermelho)}
.sub{color:var(--tx2);font-size:18px}
em.dest{font-style:normal;background:linear-gradient(transparent 60%,rgba(201,154,59,.35) 60%)}

/* logo */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.logo svg{width:44px;height:44px;flex:none}
.logo .t{display:flex;flex-direction:column;line-height:.9}
.logo .t1{font-family:var(--mao);font-size:22px;color:var(--vermelho);font-weight:700}
.logo .t2{font-family:var(--serif);font-size:25px;font-weight:800;color:var(--pinho);letter-spacing:-.02em}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;border:0;cursor:pointer;
  background:var(--vermelho);color:#fff;font:800 18px/1.15 var(--sans);padding:19px 28px;border-radius:999px;
  box-shadow:0 6px 0 var(--vermelho2),0 14px 28px rgba(184,40,46,.28);transition:transform .12s,box-shadow .12s;text-align:center}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--vermelho2),0 8px 16px rgba(184,40,46,.25)}
.btn.verde{background:var(--pinho);box-shadow:0 6px 0 var(--pinho2),0 14px 28px rgba(31,74,56,.28)}
.btn.claro{background:var(--papel);color:var(--choco);box-shadow:0 4px 0 var(--linha)}
.btn.cheio{width:100%}
.btn[disabled]{opacity:.6;pointer-events:none}
.seguro{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:13.5px;color:var(--tx2);font-weight:700}

/* elementos "feitos à mão" */
.fita{position:absolute;width:110px;height:30px;background:rgba(201,154,59,.45);top:-12px;left:50%;transform:translateX(-50%) rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.polaroid{position:relative;background:#fff;padding:12px 12px 46px;border-radius:4px;box-shadow:var(--sombra);transform:rotate(-1.6deg)}
.polaroid img{border-radius:2px;width:100%;aspect-ratio:4/5;object-fit:cover}
.polaroid .leg{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-family:var(--mao);font-size:24px;color:var(--choco)}
.cartao{background:var(--papel);border:1px solid var(--linha);border-radius:var(--r);box-shadow:var(--sombra)}
.xadrez{background-color:var(--vermelho);background-image:linear-gradient(90deg,rgba(255,255,255,.22) 50%,transparent 50%),linear-gradient(rgba(255,255,255,.22) 50%,transparent 50%);background-size:22px 22px}
.faixa-xadrez{height:12px}
.selo{display:inline-flex;align-items:center;gap:6px;background:var(--pinho);color:#fff;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:800}

section{padding:56px 0}
@media(min-width:900px){section{padding:84px 0}body{font-size:18px}}
