:root{
  --azul:#2f80c4;
  --azul-oscuro:#1f5f97;
  --azul-muy-claro:#eaf3fb;
  --fondo:#f2f7fc;
  --texto:#223349;
  --texto-suave:#5b6b7f;
  --borde:#d4e2f0;
  --ok:#2e9e6b;
  --error:#c0392b;
  --radio:14px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--fondo);
  color:var(--texto);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.tarjeta{
  width:100%;
  max-width:440px;
  background:#fff;
  border-radius:var(--radio);
  box-shadow:0 10px 30px rgba(31,95,151,.12);
  overflow:hidden;
}
.encabezado{
  background:var(--azul);
  color:#fff;
  padding:26px 24px 22px;
  text-align:center;
}
.logo-img{
  display:block;
  margin:0 auto 14px;
  width:180px;
  max-width:72%;
  height:auto;
}
.encabezado h1{font-size:19px;margin:0;font-weight:600}
.encabezado p{margin:6px 0 0;font-size:13px;opacity:.9}
.cuerpo{padding:24px}
.intro{font-size:14px;color:var(--texto-suave);margin:0 0 18px;line-height:1.5}
label{display:block;font-size:13px;font-weight:600;margin:0 0 6px;color:var(--texto)}
.campo{margin-bottom:16px}
input,select{
  width:100%;
  padding:12px 13px;
  font-size:15px;
  border:1.5px solid var(--borde);
  border-radius:10px;
  background:#fff;
  color:var(--texto);
  transition:border-color .15s;
}
input:focus,select:focus{outline:none;border-color:var(--azul)}
.boton{
  width:100%;
  padding:13px;
  font-size:16px;
  font-weight:600;
  color:#fff;
  background:var(--azul);
  border:none;
  border-radius:10px;
  cursor:pointer;
  margin-top:4px;
  transition:background .15s;
}
.boton:hover{background:var(--azul-oscuro)}
.pie{
  text-align:center;
  font-size:11px;
  color:var(--texto-suave);
  padding:14px 24px 20px;
  border-top:1px solid var(--borde);
}
.errores{
  background:#fdecea;
  border:1px solid #f5c6c2;
  color:var(--error);
  border-radius:10px;
  padding:10px 12px;
  font-size:13px;
  margin:0 0 16px;
}
.errores ul{margin:4px 0 0;padding-left:18px}
/* Modal de política de privacidad (aparece al entrar) */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,40,70,.78);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:1000;
}
.modal{
  background:#fff;
  border-radius:14px;
  max-width:460px;
  width:100%;
  max-height:88vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.modal-head{background:var(--azul);color:#fff;padding:18px 22px}
.modal-head h2{margin:0;font-size:17px;font-weight:600}
.modal-head p{margin:5px 0 0;font-size:12px;opacity:.9}
.modal-body{padding:18px 22px;overflow-y:auto;font-size:13px;color:var(--texto);line-height:1.55}
.modal-body h3{font-size:13px;margin:14px 0 3px;color:var(--azul-oscuro);font-weight:600}
.modal-body h3:first-child{margin-top:0}
.modal-body p{margin:0 0 8px;color:var(--texto-suave)}
.modal-foot{padding:14px 22px;border-top:1px solid var(--borde)}
.modal-foot .boton{margin-top:0}
body.modal-abierto{overflow:hidden}
.gracias{padding:44px 28px;text-align:center}
.check{
  width:68px;height:68px;border-radius:50%;
  background:var(--azul-muy-claro);color:var(--ok);
  display:flex;align-items:center;justify-content:center;
  font-size:36px;margin:0 auto 20px;font-weight:700;
}
.gracias h2{font-size:21px;margin:0 0 12px;color:var(--texto)}
.gracias p{font-size:14px;color:var(--texto-suave);line-height:1.6;margin:0}