:root{
  --bg:#eef3fb;
  --bg-warm:#fff3f0;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;
  --shadow:0 18px 40px rgba(15, 23, 42, 0.08);
  --primary:#4f46e5;
  --primaryHover:#4338ca;
  --success:#16a34a;
  --danger:#dc2626;
  --info:#e7f0ff;
  --radius:18px;
}

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1100px 520px at 0% 0%, rgba(79,70,229,0.08), transparent 65%),
    radial-gradient(900px 520px at 100% 0%, rgba(34,197,94,0.08), transparent 60%),
    linear-gradient(180deg, #f6f8ff 0%, #eef3fb 60%, #eef3fb 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.page{min-height:100%; display:flex; flex-direction:column; background: transparent}

.container{
  width:100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 16px;
}

.site-header{
  padding: 18px 0;
  text-align:center;
}

.brand-link{
  display:inline-flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:var(--text);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.brand-logo{
  height: clamp(48px, 6vw, 88px);
  width: auto;
  display:block;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip: rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

.brand-ar{font-weight:900}
.brand-dot{opacity:0.6}

.site-footer{
  padding: 24px 0 40px;
  margin-top:auto;
}
.site-footer .muted{ text-align:center; }

.hero{padding: 14px 0 44px; text-align:center}
.hero-logo-wrap{display:flex; justify-content:center; margin: 6px 0 10px}
.hero-logo{
  height: clamp(120px, 22vw, 240px);
  width:auto;
  display:block;
  filter: drop-shadow(0 14px 28px rgba(15, 23, 42, 0.18));
}
.hero-title{margin: 10px 0 8px; font-size: 44px; letter-spacing:-0.03em}
.hero-subtitle{margin:0; font-size: 18px; color:var(--muted)}
.hero-note{margin: 10px 0 0; color: var(--muted)}
.hero-cta{margin-top: 18px; display:flex; justify-content:center}
.btn-whatsapp{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 999px;
  background: #22c55e;
  color:#fff;
  font-weight: 800;
  text-decoration:none;
  box-shadow: 0 16px 36px rgba(34,197,94,0.25);
}
.btn-whatsapp:hover{filter: brightness(0.95)}
.btn-whatsapp-icon{
  width: 22px;
  height: 22px;
  display:block;
}

.card-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 28px;
}

.card{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  border: 1px solid rgba(226,232,240,0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align:left;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.12);
}

.card-icon{
  width:52px;
  height:52px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  background: rgba(79,70,229,0.10);
}

.card-title{margin: 14px 0 6px; font-size: 22px}
.card-desc{margin: 0 0 14px; color:var(--muted)}

.checklist{margin: 0 0 14px; padding:0; list-style:none}
.checklist li{
  position:relative;
  padding-left: 20px;
  margin: 10px 0;
  color: #1f2937;
  line-height: 1.5;
}
.checklist li::before{
  content:"\2713";
  position:absolute;
  left:0;
  top:0.1em;
  color: var(--success);
  font-weight:700;
  font-size: 16px;
}

.link-cta{
  display:inline-flex;
  gap:8px;
  align-items:center;
  color: var(--primary);
  font-weight: 700;
  text-decoration:none;
}
.link-cta:hover{color: var(--primaryHover)}

.below-hero{margin-top: 22px; text-align:center}

.muted{color:var(--muted)}
.tiny{font-size: 12px}
.mb-2{margin-bottom: 8px}

.back-link{
  display:block;
  max-width: 760px;
  margin: 6px auto 12px;
  padding-left: 4px;
  color: var(--muted);
  text-decoration:none;
  font-weight: 600;
}
.back-link:hover{color: var(--text)}

.form-wrap{padding: 10px 0 46px; background: transparent}
.form-wrap--pink{
  background: linear-gradient(180deg, rgba(255,243,240,0.9) 0%, rgba(255,243,240,0.35) 55%, rgba(255,243,240,0) 100%);
  border-radius: 0;
  padding: 18px 0 46px;
}

.form-card{
  background: var(--card);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 22px;
  border: 1px solid rgba(226,232,240,0.6);
  max-width: 760px;
  margin: 0 auto;
}

.form-header{display:flex; gap: 12px; align-items:center; margin-bottom: 14px}
.form-icon{width:46px; height:46px; border-radius:999px; display:flex; align-items:center; justify-content:center; background: rgba(79,70,229,0.10); font-size: 20px}
.form-title{margin:0; font-size: 26px; letter-spacing:-0.02em}

.form{margin-top: 12px; display:flex; flex-direction:column; gap: 16px}

.field{margin: 0}

label{display:block; font-weight: 700; margin-bottom: 8px}

.req{color: var(--danger)}

input[type="text"], input[type="number"], select, textarea{
  width:100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 12px;
  font-size: 15px;
  outline:none;
  background:#fff;
}

textarea{resize:vertical}

input:focus, select:focus, textarea:focus{border-color: rgba(79,70,229,0.55); box-shadow: 0 0 0 4px rgba(79,70,229,0.12)}

select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'><path fill='%2364748b' d='M1.41 0.59 7 6.17 12.59 0.59 14 2 7 9 -0.01 2z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  padding-right: 36px;
}

input[type="file"]{
  width:100%;
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 10px;
  font-size: 14px;
  background:#fff;
}

input[type="file"]::file-selector-button{
  margin-right: 12px;
  border: 1px solid var(--border);
  background: #f8fafc;
  color: #0f172a;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 700;
  cursor:pointer;
}

input[type="file"]::file-selector-button:hover{
  background: #eef2ff;
  border-color: #c7d2fe;
}

.file-previews{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

  .file-preview{
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    background:#fff;
    display:grid;
    gap:8px;
    position: relative;
  }

.file-preview__thumb{
  width:100%;
  height: 100px;
  object-fit: cover;
  border-radius: 10px;
  background: #f1f5f9;
}

.file-preview__badge{
  width:100%;
  height: 100px;
  border-radius: 10px;
  background: #0f172a;
  color:#fff;
  display:grid;
  place-items:center;
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 12px;
}

  .file-preview__name{
    font-size: 12px;
    color: var(--muted);
    word-break: break-word;
  }

  .file-preview__actions{
    position: absolute;
    top: 8px;
    right: 8px;
  }

  .file-preview__delete{
    border: 1px solid rgba(15, 23, 42, 0.15);
    background: #f8fafc;
    color: #0f172a;
    border-radius: 999px;
    font-size: 11px;
    padding: 4px 8px;
    font-weight: 600;
    cursor: pointer;
  }

  .file-preview__delete:hover,
  .file-preview__delete:focus-visible{
    border-color: rgba(15, 23, 42, 0.35);
    background: #eef2f7;
  }

.grid-2{display:grid; grid-template-columns: 1fr 1fr; gap: 14px}

.radio-row{display:flex; gap: 18px; align-items:center}
.radio{display:flex; align-items:center; gap: 10px; font-weight: 600; color:#111827}
.radio input{transform: scale(1.05)}

.check-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 12px}
.check-card{
  display:flex;
  gap: 10px;
  align-items:center;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 12px;
  background:#fff;
  cursor:pointer;
  user-select:none;
}
.check-card input{transform: scale(1.05)}

.info-box{
  background: var(--info);
  border: 1px solid rgba(99, 102, 241, 0.20);
  border-radius: 12px;
  padding: 14px;
  color:#0f172a;
  font-size: 14px;
  margin: 16px 0;
}

.btn-primary{
  width:100%;
  border: none;
  background: var(--primary);
  color:#fff;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 800;
  cursor:pointer;
}
.btn-primary:hover{background: var(--primaryHover)}
.btn-primary.is-loading{
  opacity: 0.8;
  cursor: not-allowed;
}

.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--border);
  background:#fff;
  color: var(--text);
  border-radius: 14px;
  padding: 12px 14px;
  text-decoration:none;
  font-weight: 800;
}

.alert{
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0;
  font-size: 14px;
}

.alert--error{background: #fff1f2; border: 1px solid rgba(220,38,38,0.25); color:#991b1b}

.error{color: var(--danger); font-size: 12px; margin-top: 6px}

.thank{padding: 26px 0 46px}
.thank-card{max-width: 560px; margin: 0 auto; background: var(--card); border-radius: 22px; box-shadow: var(--shadow); padding: 26px; border: 1px solid rgba(226,232,240,0.6); text-align:center}
.thank-icon{font-size: 34px}
.thank-title{margin: 10px 0 8px; font-size: 28px}
.thank-text{margin: 0 0 18px; color: var(--muted)}
.thank-actions{display:flex; gap: 12px; justify-content:center; flex-wrap: wrap}

.wa-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#fff;
  font-size: 22px;
}

.wa-fab:hover{filter: brightness(0.95)}
.wa-icon{width: 26px; height: 26px; display:block; color:#ffffff}

@media (max-width: 860px){
  .hero-title{font-size: 38px}
}

@media (max-width: 760px){
  .card-grid{grid-template-columns: 1fr}
  .grid-2{grid-template-columns: 1fr}
  .check-grid{grid-template-columns: 1fr}
  .hero-title{font-size: 34px}
  .form-card{padding: 18px}
}