/* ===== Reset mínimo sin selector universal ===== */
html { box-sizing: border-box; }
*:before, *:after { box-sizing: inherit; }

/* ===== Base ===== */
html, body{
  margin:0; padding:0;
  font-family: Inter, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  background:#0b0b0e; color:#f3f3f7;
}
.container{ max-width:900px; margin:0 auto; padding:24px 20px; }

/* ===== Topbar ===== */
.topbar{
  position:relative;
  display:block;
  margin-bottom:16px;
  text-align:center;
}

/* Switch de idioma */
.lang-switch{
  position:absolute; top:0; right:0;
  display:flex; gap:8px;
}
.lang{
  background:#1a1a22; color:#cfd3e0; border:1px solid #2a2a36;
  border-radius:10px; padding:8px 12px; cursor:pointer; font-weight:600;
}
.lang.active{ background:#7c5cff; color:#fff; border-color:#7c5cff; }

/* ===== Marca (logo + IG) ===== */
.brand{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin:0 auto;
}
.logo{
  display:block;
  width:200px !important;
  max-width:85vw;
  height:auto;
}
.ig{
  display:inline-flex; align-items:center; justify-content:center;
  color:#f3f3f7; opacity:.95; text-decoration:none;
}
.ig svg{ display:block; }

/* ===== Card / Form ===== */
.card{
  background:#13131a; border:1px solid #23232d; border-radius:16px;
  padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.wide{ grid-column:span 1; }
.field>span, legend{ font-weight:600; }

.field input, .field textarea{
  background:#0e0e14; border:1px solid #2a2a36; border-radius:12px;
  padding:12px 14px; color:#f3f3f7; outline:none;
}
.field input::placeholder, .field textarea::placeholder{ color:#9aa0a6; }

.checkbox{ display:flex; gap:10px; align-items:flex-start; margin-top:6px; }
.checkbox input{ margin-top:5px; }

.btn{
  margin-top:10px; display:inline-block; border:none; border-radius:12px;
  padding:12px 18px; font-weight:800; cursor:pointer; background:#7c5cff; color:#fff;
}
.btn:active{ transform:translateY(1px); }

.footnote{ opacity:.7; margin-top:8px; }
.footer{ opacity:.6; text-align:center; margin-top:16px; }

/* Enlaces */
a{ color:#9fb4ff; text-decoration:underline; }

/* Radios formato */
.radios{ display:flex; gap:16px; flex-wrap:wrap; }
.radio{
  display:flex; gap:8px; align-items:center; background:#0e0e14;
  border:1px solid #2a2a36; border-radius:10px; padding:10px 12px;
}

/* ===== Ajustes en pantallas grandes ===== */
@media (min-width: 860px){
  .grid{ grid-template-columns:1fr 1fr; }
  .field.wide{ grid-column:span 2; }
  .logo{ width:220px !important; }
}

/* ===== Ajustes móviles (mockup) ===== */
@media (max-width: 859px){
  .topbar{
    padding-top:16px !important;
    text-align:center;
  }

  /* Idiomas centrados arriba */
  .lang-switch{
    position:static !important;
    justify-content:center;
    margin:0 auto 12px;
    display:flex;
    gap:8px;
  }

  /* Logo + IG en fila */
  .brand{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:0 auto;
  }

  .logo{
    width:180px !important;
    max-width:75vw;
    height:auto;
    margin:0;
  }

  .ig svg{
    width:30px;
    height:30px;
  }

  .lang{
    padding:6px 10px;
    font-size:14px;
  }
}