@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

:root{
  --glass-bg: rgba(20,20,20,.55);
  --glass-border: rgba(255,255,255,.18);
  --accent: #2d9efb;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:#fff;
  min-height:100dvh;
  background: #0e0e0e url('../assets/bg.jpg') center/cover no-repeat fixed;
}

.container{
  position:relative;
  max-width:980px;
  margin:0 auto;
  padding:40px 16px 60px;
}

.header{
  text-align:center;
  margin-top:10px;
  margin-bottom:20px;
}

.title{
  font-size:32px;
  font-weight:700;
  letter-spacing:.2px;
  text-shadow:0 2px 6px rgba(0,0,0,.6);
}

.subtitle{
  font-size:12px;
  opacity:.85;
  margin-top:6px;
}

.form-card{
  position:relative;
  width:100%;
  max-width:720px;
  margin:0 auto;
  padding:22px 22px 26px;
  border-radius:16px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
}

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

@media (min-width:780px){
  .row.two{ grid-template-columns: 1fr 1fr; }
}

.form-group label{
  font-size:14px;
  font-weight:600;
  margin-bottom:6px;
  display:block;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group select{
  width:100%;
  padding:12px 12px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.35);
  color:#fff;
  outline:none;
}

.small-note{ font-size:12px; opacity:.8; }

.radio-group{
  display:flex; flex-direction:column; gap:6px;
  padding:10px 12px; border:1px dashed rgba(255,255,255,.25);
  border-radius:10px; background:rgba(0,0,0,.2);
}

.radio-group label{ font-weight:400; }

.btn-wrap{ text-align:center; margin-top:18px; }

button[type="submit"]{
  padding:12px 24px;
  border:none; border-radius:999px;
  font-weight:700; letter-spacing:.3px;
  color:white; background:var(--accent);
  box-shadow:0 8px 20px rgba(45,158,251,.35);
  cursor:pointer;
}

.logo-left, .logo-right{
  position:absolute; top:-10px; width:120px; height:auto; opacity:.95;
}
.logo-left{ left:-10px; }
.logo-right{ right:-10px; }

footer{
  margin-top:28px; text-align:center; font-size:11px; opacity:.75;
}

/* --- NUEVO: contenedor para posicionar logos alrededor del card --- */
.card-wrap{
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

/* Mantén tu .form-card como está, pero SIN position relative aquí
   (la posición relativa ya la tendrá .card-wrap). Si lo tenías en .form-card,
   puedes quitarla o dejarla; no afecta mientras .card-wrap sea relative. */

:root{
  --logo-size: 170px;   /* cambia este valor si los quieres más grandes/pequeños */
}

/* Los logos se posicionan respecto a .card-wrap */
.card-wrap{ position: relative; }

/* Reemplaza las reglas anteriores de .logo-left/.logo-right por estas */
.logo-left, .logo-right{
  position: absolute;
  top: 18px;                   /* Alineado con el borde superior del form-card */
  width: var(--logo-size);     /* Mismo tamaño para ambos */
  height: auto;
  opacity: .98;
  z-index: 5;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
  pointer-events: none;
  animation: popIn .6s ease-out .2s forwards;
}

/* Manténlos hacia afuera del card */
.logo-left{  left: -120px; transform: translateY(0); }
.logo-right{ right: -120px; transform: translateY(0); }


/* Responsive: que no estorben en pantallas pequeñas */
@media (max-width: 880px){
  :root{ --logo-size: 130px; }
  .logo-left{  left: -90px; }
  .logo-right{ right: -90px; }
}
@media (max-width: 640px){
  :root{ --logo-size: 100px; }
  .logo-left{  left: -70px; }
  .logo-right{ right: -70px; }
}

/* --- Subtítulo en negro para mejor contraste --- */
.subtitle{
  color: #000 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.form-group input::placeholder{
  color: rgba(255,255,255,.55);
}


@keyframes popIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}