/* BeachGo — Design System (web) · tokens de beachgo-tokens.css */
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800&display=swap');

:root{
  --primary:#FF9900; --primary-dark:#E68A00; --primary-light:#FFB84D;
  --secondary:#121212;
  --bg:#FAFAFA; --card:#FFFFFF;
  --text-primary:#212121; --text-secondary:#424242; --muted-foreground:#757575;
  --border:#D5D5D5; --card-border:#BDBDBD; --divider:#F5F5F5;
  --success:#4CAF50; --success-light:#E8F5E9; --success-dark:#388E3C;
  --warning-light:#FFF3E0; --warning-dark:#F57C00;
  --radius-card:12px; --radius-button:8px; --radius-lg:20px; --radius-pill:100px;
  --font-sans:'Urbanist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  font-family:var(--font-sans); color:var(--text-primary); background:var(--bg);
  line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--primary-dark);}
.wrap{max-width:860px; margin:0 auto; padding:0 20px; width:100%;}

/* ---- Top bar ---- */
.topbar{
  background:var(--card); border-bottom:1px solid var(--divider);
  position:sticky; top:0; z-index:10;
}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:76px;}
.topbar img{height:48px; width:auto; display:block;}
.topbar nav{display:flex; gap:18px;}
.topbar nav a{
  color:var(--text-secondary); text-decoration:none; font-weight:600; font-size:14px;
  padding:6px 0; border-bottom:2px solid transparent; transition:color .2s,border-color .2s;
}
.topbar nav a:hover,.topbar nav a[aria-current="page"]{color:var(--primary-dark); border-color:var(--primary);}
@media(max-width:560px){ .topbar nav{display:none;} }

/* ---- Page hero ---- */
.phead{
  background:linear-gradient(135deg,#FF9900,#E68A00); color:#fff;
  padding:44px 0 40px;
}
.phead h1{margin:0; font-size:30px; font-weight:800; letter-spacing:-.5px;}
.phead p{margin:8px 0 0; opacity:.95; font-size:15px; font-weight:500;}

/* ---- Content ---- */
main{flex:1; padding:26px 0 64px;}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:30px 32px; margin-top:20px;
}
@media(max-width:560px){ .card{padding:22px 20px;} }
h2{font-size:19px; font-weight:700; margin:28px 0 8px; color:var(--text-primary);}
h2:first-child{margin-top:0;}
h2 .num{color:var(--primary); margin-right:8px;}
h3{font-size:15px; font-weight:700; margin:18px 0 4px;}
p,li{font-size:15px; color:var(--text-secondary);}
strong{color:var(--text-primary);}
ul,ol{padding-left:22px;} li{margin:6px 0;}

table{width:100%; border-collapse:collapse; margin:12px 0; font-size:14px;}
th,td{text-align:left; border:1px solid var(--border); padding:9px 11px; vertical-align:top;}
th{background:#FFF5E6; color:var(--text-primary); font-weight:700;}

.muted{color:var(--muted-foreground); font-size:13px;}
.ph{background:var(--warning-light); color:var(--warning-dark); padding:1px 6px; border-radius:6px; font-family:ui-monospace,monospace; font-size:13px;}

/* callout box */
.box{background:#FFF5E6; border:1px solid #FFE0B2; border-radius:var(--radius-card); padding:16px 18px; margin:16px 0;}
.box p{color:var(--text-primary);}

/* numbered steps */
.steps{counter-reset:step; list-style:none; padding-left:0;}
.steps li{position:relative; padding:8px 0 8px 44px; color:var(--text-primary);}
.steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:7px; width:28px; height:28px;
  background:var(--primary); color:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700;
}

/* primary button */
.btn{
  display:inline-block; background:var(--primary); color:#fff; text-decoration:none;
  padding:13px 24px; border-radius:var(--radius-button); font-weight:700; font-size:15px;
  margin-top:10px; transition:background .2s;
}
.btn:hover{background:var(--primary-dark);}

/* footer */
footer{background:var(--secondary); color:#cfcfcf; padding:28px 0; font-size:13px;}
footer .wrap{display:flex; flex-direction:column; gap:10px; align-items:center; text-align:center;}
footer a{color:#fff; text-decoration:none; margin:0 10px; font-weight:600;}
footer a:hover{color:var(--primary-light);}
footer .legal{color:#9E9E9E; line-height:1.5;}