/* Alerta Bets landing page. Mobile first; desktop layout from 900px. */
:root{
  --paper:#F4F6F5;
  --card:#FFFFFF;
  --ink:#13213A;
  --muted:#56627A;
  --line:#D5DCD9;
  --signal:#F4B400;
  --go:#0B6B57;
  --err:#B42318;
  --display:"Archivo","Arial Narrow",Arial,sans-serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.55 var(--body);padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:var(--go);text-underline-offset:2px}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* Notice strip */
.notice{background:var(--signal);color:var(--ink);padding-top:env(safe-area-inset-top,0px)}
.notice p{margin:0;padding:10px 0;font-weight:600;font-size:.9375rem;line-height:1.35;display:flex;gap:10px;align-items:flex-start}
.notice .dot{flex:0 0 10px;height:10px;margin-top:5px;border-radius:50%;background:var(--ink)}
@media (prefers-reduced-motion:no-preference){.notice .dot{animation:pulse 1.8s ease-in-out infinite}}
@keyframes pulse{50%{opacity:.25}}

header.top{display:flex;justify-content:space-between;align-items:center;padding:16px 0 4px}
.brand{font:800 1.125rem/1 var(--display);font-stretch:75%;letter-spacing:.01em;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px}
.brand i{display:inline-block;width:22px;height:8px;border-radius:4px;background:var(--signal);box-shadow:inset 0 0 0 2px var(--ink)}
.age{font-size:.8125rem;font-weight:700;border:2px solid var(--ink);border-radius:999px;padding:2px 9px}

.layout{display:grid;gap:28px;padding:18px 0 40px}
h1{font:800 clamp(2.5rem,11vw,4.4rem)/.94 var(--display);font-stretch:75%;letter-spacing:-.01em;margin:0 0 14px;text-wrap:balance}
.lede{margin:0;max-width:34em;color:var(--muted);font-size:1.0625rem}
.updated{margin:14px 0 0;font-size:.875rem;color:var(--muted)}

/* Form */
.form-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 18px 18px}
.form-card h2{font:700 1.375rem/1.2 var(--display);font-stretch:75%;margin:0 0 4px}
.form-card .sub{margin:0 0 18px;color:var(--muted);font-size:.9375rem}
.fine{margin:12px 0 0;font-size:.8125rem;color:var(--muted)}


/* Content sections */
section.block{padding:34px 0;border-top:1px solid var(--line)}
section.block h2{font:800 clamp(1.75rem,7vw,2.4rem)/1 var(--display);font-stretch:75%;margin:0 0 18px}
.timeline{list-style:none;margin:0;padding:0;counter-reset:step}
.timeline li{position:relative;padding:0 0 22px 34px}
.timeline li::before{content:"";position:absolute;left:6px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2.5px solid var(--muted)}
.timeline li::after{content:"";position:absolute;left:13.5px;top:24px;bottom:0;width:2px;background:var(--line)}
.timeline li:last-child::after{display:none}
.timeline li[data-state="done"]::before{background:var(--ink);border-color:var(--ink)}
.timeline li[data-state="now"]::before{background:var(--signal);border-color:var(--ink);width:16px;height:16px;left:4px;top:6px}
.timeline .when{display:block;font-weight:700;font-size:.9375rem}
.timeline li.is-today .when::after{content:" hoje";background:var(--signal);border-radius:4px;padding:0 6px;margin-left:6px;font-size:.8125rem}
.timeline p{margin:2px 0 0;color:var(--muted)}

.options{display:grid;gap:0;margin:0;padding:0;list-style:none}
.options li{padding:16px 0;border-bottom:1px solid var(--line)}
.options li:first-child{padding-top:0}
.options h3{font:700 1.0625rem/1.3 var(--body);margin:0 0 4px}
.options p{margin:0;color:var(--muted)}

details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:16px 36px 16px 0;font-weight:600;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);transition:transform .15s}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details p{margin:0 0 16px;color:var(--muted)}

.help{background:var(--ink);color:#fff;border-radius:16px;padding:22px 18px;margin:8px 0 0}
.help h2{color:#fff}
.help p{margin:0 0 10px;color:#D9DEE8}
.help a{color:var(--signal)}
.help .big{font:800 2.2rem/1 var(--display);font-stretch:75%;color:var(--signal);text-decoration:none}

footer{padding:28px 0 110px;font-size:.8125rem;color:var(--muted);border-top:1px solid var(--line)}
footer p{margin:0 0 8px}

/* Sticky CTA (mobile) */
.sticky{position:fixed;left:0;right:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(244,246,245,.96);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .2s;z-index:10}
.sticky.show{transform:none}
.sticky a{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:12px;background:var(--ink);color:#fff;font-weight:700;text-decoration:none}
@media (prefers-reduced-motion:reduce){.sticky{transition:none}}

@media (min-width:900px){
  .layout{grid-template-columns:1fr 400px;gap:56px;align-items:start;padding-top:36px}
  .intro{grid-column:1;grid-row:1}
  .form-card{grid-column:2;grid-row:1 / span 2;position:sticky;top:20px;padding:26px 24px 22px}
  .content{grid-column:1;grid-row:2}
  .layout{row-gap:8px}
  .sticky{display:none}
  footer{padding-bottom:40px}
}

/* Privacy section */
.privacy{font-size:.9375rem}
.privacy h3{font:700 1rem/1.3 var(--body);margin:18px 0 4px}
.privacy p{margin:0 0 8px;color:var(--muted)}

/* LanderLab Form element inside the form card.
   Scoped to #cadastro so it wins over generic form styles; fine-tune further in the Style Manager. */
#cadastro form{display:flex;flex-direction:column;gap:14px;margin:0}
#cadastro form label{display:block;font:600 .9375rem/1.4 var(--body);color:var(--ink)}
#cadastro form input[type="text"],
#cadastro form input[type="email"],
#cadastro form input[type="tel"],
#cadastro form input[type="number"],
#cadastro form select,
#cadastro form textarea{width:100%;min-height:52px;margin-top:6px;padding:14px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:400 16px/1.2 var(--body);box-sizing:border-box;-webkit-appearance:none;appearance:none}
#cadastro form input:focus,#cadastro form select:focus{outline:none;border-color:var(--ink)}
#cadastro form input:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
#cadastro form input:user-invalid{border-color:var(--err)}
#cadastro form input::placeholder{color:#8A93A6}
#cadastro form input[type="checkbox"]{width:22px;height:22px;margin:0 10px 0 0;accent-color:var(--ink);vertical-align:-5px;flex:0 0 22px}
#cadastro form button,#cadastro form input[type="submit"]{width:100%;min-height:56px;margin-top:6px;border:0;border-radius:12px;background:var(--ink);color:#fff;font:700 1.0625rem/1.2 var(--body);cursor:pointer}
#cadastro form button:active{transform:translateY(1px)}
#cadastro .fine a{color:var(--go)}
#cadastro form label:has(input[type="checkbox"]){display:flex;align-items:flex-start;gap:10px;font-weight:400;line-height:1.45}
#cadastro form label:has(input[type="checkbox"]) input{margin:1px 0 0}