/* ===== Tema Beach Tênis — mobile-first, moderno e profissional ===== */
:root{
  /* Gradiente do topo */
  --hero-a:#FDE68A;   /* sol */
  --hero-b:#FDBA74;   /* pôr-do-sol */
  --hero-c:#60A5FA;   /* céu/mar */

  /* Card / tipografia */
  --card-bg: rgba(255,255,255,.9);
  --card-br: 18px;
  --card-shadow: 0 18px 40px rgba(2,8,23,.10);
  --text:#0B1220;

  /* Botões (uma cor só) */
  --btn-bg: linear-gradient(135deg,#2563EB,#1E40AF);
  --btn-bg-hover: linear-gradient(135deg,#1D4ED8,#1E3A8A);
  --btn-shadow: 0 10px 22px rgba(2,8,23,.12);

  /* Logos */
  --logos-bg:#fff;
  --logo-h: 120px;
}

/* ===== RESET / BASE ===== */
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ===== ESTRUTURA ===== */
.bt-wrap{min-height:100dvh; display:flex; flex-direction:column;}
.container{width:100%; max-width:600px; margin:12px auto 16px; padding:10px;}

/* ===== HERO ===== */
.bt-hero{
  background:linear-gradient(180deg,var(--hero-a),var(--hero-b) 40%,var(--hero-c) 100%);
  color:#0b1220;
  padding:22px 14px 18px;
  text-align:center;
}
.bt-emoji{font-size:40px; line-height:1;}
.bt-title{margin:6px 0 0; font-size:clamp(20px,5vw,26px); font-weight:900; letter-spacing:.2px;}
.bt-sub{margin:6px auto 0; max-width:560px; font-size:13px; opacity:.9;}

/* ===== CARD ===== */
.bt-card{
  background:var(--card-bg);
  border-radius:var(--card-br);
  box-shadow:var(--card-shadow);
  padding:16px;
  backdrop-filter:blur(6px);
}

/* ===== HEADERS COMPACTOS ===== */
.h-sm{margin:0 0 8px; font-size:18px; font-weight:800;}
.h-xs{margin:0 0 10px; font-size:16px; font-weight:800;}
.p-xs{margin:0 0 10px; font-size:13px; opacity:.85;}

/* ===== INPUTS ===== */
label{display:block; margin:8px 0 6px; font-weight:600;}
.req{color:#d00; margin-left:4px;}
input[type=text],input[type=tel]{
  width:100%;
  padding:12px 10px;
  border:1px solid #E5E7EB;
  border-radius:12px;
  font-size:15px;
  background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input[type=text]:focus,input[type=tel]:focus{
  outline:3px solid rgba(96,165,250,.25);
  border-color:#2563EB;
}

/* ===== GRID DE BOTÕES (2 por linha) ===== */
.step-cta{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-top:10px;
}
.two-col{ grid-template-columns:1fr 1fr; }

/* ===== BOTÕES MENORES ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  padding:12px 14px;
  border:0;
  border-radius:9999px;
  font-weight:700;
  font-size:15px;
  color:#fff;
  text-align:center;
  cursor:pointer;
  background:var(--btn-bg);
  box-shadow:var(--btn-shadow);
  transition:transform .05s ease, filter .1s ease, background .2s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{ background:var(--btn-bg-hover); filter:brightness(.98); }
.btn:active{ transform:translateY(1px) scale(.985); }
.btn span{ filter:drop-shadow(0 1px 0 rgba(0,0,0,.25)); }

/* variação menor extra (ainda mais compacta, se precisar) */
.btn-sm{
  padding:10px 12px;
  font-size:14px;
  line-height:1.15;
}

/* Botão branco secundário */
.btn-outline{
  background:#fff !important;
  color:#2563EB !important;
  border:1px solid #BFDBFE !important;
  box-shadow:none !important;
}

/* ===== TEXTO DE NOTA ===== */
.bt-note{margin-top:8px; font-size:11.5px; opacity:.75; text-align:center;}

/* ===== LOGO ÚNICA CENTRALIZADA ===== */
.brand-split.single{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  background:var(--logos-bg);
  display:flex;
  justify-content:center;
  align-items:center;
  padding:28px 0;
  border-top:1px solid rgba(0,0,0,0.05);
  border-bottom:1px solid rgba(0,0,0,0.05);
}
.brand-center{text-align:center;}
.brand-center img{
  display:block;
  margin:0 auto;
  max-width:clamp(180px,58vw,380px);
  height:auto;
  max-height:var(--logo-h);
  object-fit:contain;
  filter:brightness(1);
}

/* ===== MOBILE TWEAKS ===== */
@media (max-width:420px){
  .container{padding:8px;}
  .bt-card{padding:14px;}
  .two-col{gap:8px;}
}