/* ===== Reset y base ===== */
*{
  box-sizing:border-box;
  font-family:'Poppins',system-ui,sans-serif;
}

:root{
  --bg1:#3f155f;
  --bg2:#240a36;
  --panel:#1d0a2bcc;
  --field:#2d1445;
  --border:#5b2f80;
  --cyan:#b978f0;
  --pur:#964bcd;
  --lil:#e4d2fc;
  --coral:#f4a0c8;
  --text:#ffffff;
  --muted:#bfa8da;
}

html{
  scroll-padding-top:env(safe-area-inset-top,0px);
}

body{
  margin:0;
  color:var(--text);
  background-color:#2a0e3d;
  background-image:
    radial-gradient(70% 45% at 88% 0,rgba(170,95,235,.6),transparent 70%),
    radial-gradient(65% 40% at 0 100%,rgba(145,72,210,.55),transparent 70%),
    linear-gradient(180deg,var(--bg1) 0%,#2c0f42 50%,var(--bg2) 100%);
  background-attachment:fixed;
  min-height:100%;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

/* Refuerzo de la fuente en elementos de formulario, que a veces
   ignoran el * en algunos navegadores */
button,input,select,textarea{
  font-family:'Poppins',system-ui,sans-serif;
}

h1,h2,h3{
  font-family:'Poppins',system-ui,sans-serif;
  margin:0;
  font-weight:700;
}

/* ===== Layout ===== */
.wrap{
  max-width:880px;
  margin:0 auto;
  padding:56px 20px 80px;
}

header{
  text-align:center;
  margin-bottom:36px;
}

.logo{
  display:block;
  width:min(240px,62%);
  height:auto;
  margin:0 auto;
}

.tagline{
  color:var(--muted);
  margin-top:10px;
  font-size:1rem;
  line-height:1.5;
}

/* ===== Tabs ===== */
.tabs{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:28px;
  flex-wrap:wrap;
}

.tab{
  padding:10px 20px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#1d0a2b;
  color:var(--muted);
  font-size:.92rem;
  cursor:pointer;
  font-weight:500;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}

.tab.active{
  border-color:var(--pur);
  color:#fff;
  background:var(--pur);
}

/* ===== Grid de proyectos ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px;
  margin-top:30px;
}

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}

.card:hover,
.card:focus-visible{
  transform:translateY(-6px) scale(1.02);
  border-color:var(--cyan);
  box-shadow:0 14px 30px rgba(150,75,205,.4);
  outline:none;
}

.thumb{
  height:130px;
  overflow:hidden;
  background:#140a1f;
  border-bottom:1px solid var(--border);
}

.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:none;
  transition:transform .35s ease,filter .35s ease;
}

.card:hover .thumb img{
  transform:scale(1.08);
  filter:none;
}

.card-body{
  padding:14px 16px;
}

.status{
  display:inline-block;
  font-size:.72rem;
  font-weight:600;
  padding:3px 10px;
  border-radius:999px;
  margin-bottom:8px;
}

.status.done{
  background:rgba(228,210,252,.14);
  color:var(--lil);
}

.status.wip{
  background:rgba(244,160,200,.14);
  color:var(--coral);
}

.card-title{
  font-size:1rem;
  font-weight:600;
}

.card-type{
  color:var(--muted);
  font-size:.85rem;
  margin-top:2px;
}

.hidden{
  display:none;
}

/* ===== CTA ===== */
.cta-row{
  text-align:center;
  margin:44px 0;
}

.cta{
  display:inline-block;
  padding:14px 28px;
  border-radius:999px;
  border:1px solid var(--pur);
  background:var(--pur);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:.95rem;
  transition:background .2s ease,color .2s ease;
}

.cta:hover{
  background:#a65fdc;
  color:#fff;
}

/* ===== Formulario ===== */
.form-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:18px;
  padding:30px;
}

.form-card h2{
  font-size:1.4rem;
  text-align:center;
}

.form-sub{
  text-align:center;
  color:var(--muted);
  font-size:.9rem;
  margin-top:6px;
  margin-bottom:26px;
}

label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.92rem;
  font-weight:500;
  margin-bottom:10px;
}

input[type=text],
input[type=url]{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--field);
  color:var(--text);
  font-size:.95rem;
  margin-bottom:6px;
}

.opt{
  display:block;
  width:100%;
  text-align:left;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--field);
  color:var(--text);
  margin-bottom:10px;
  cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease;
}

.opt strong{
  display:block;
  font-size:.95rem;
}

.opt span{
  display:block;
  color:var(--muted);
  font-size:.82rem;
  margin-top:2px;
}

.opt.sel{
  border-color:var(--cyan);
  background:rgba(150,75,205,.26);
  box-shadow:0 0 0 1px var(--cyan) inset;
}

.btn{
  width:100%;
  padding:14px;
  border-radius:10px;
  border:none;
  background:var(--pur);
  color:#fff;
  font-weight:700;
  font-size:.95rem;
  cursor:pointer;
  margin-top:6px;
  transition:opacity .2s ease;
}

.btn:hover{
  opacity:.9;
}

.btn.wa{
  background:linear-gradient(90deg,var(--pur),var(--cyan));
  color:#fff;
  border:none;
}

.step{
  display:none;
}

.step.active{
  display:block;
}

.checkline{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  color:var(--lil);
  font-size:.9rem;
}

@media(max-width:520px){
  .wrap{padding:36px 14px 60px;}
  .logo{width:min(200px,62%);}
}