:root{
  --azul:#004987;
  --azul-oscuro:#0c5599;
  --texto:#1d2125;
  --gris:#5d6570;
  --borde:#dee2e6;
  --fondo:#f2f2f2;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fondo);
  color:var(--texto);
  font-family:"Open Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:2.5rem 1rem 3rem;
}
.card{
  background:#fff;
  border:1px solid var(--borde);
  border-radius:.5rem;
  box-shadow:0 .5rem 1rem rgb(0 0 0 / .15);
  width:100%;
  max-width:460px;
  padding:2rem;
}
.logo{
  display:block;
  width:100%;
  margin:0 auto 1rem;
}
h1{
  font-size:1.35rem;
  font-weight:700;
  margin:0 0 .35rem;
  text-align:center;
}
.subtitulo{
  color:var(--gris);
  font-size:.9rem;
  text-align:center;
  margin:0 0 1.5rem;
}
.pregunta{
  font-size:1.05rem;
  font-weight:600;
  margin:0 0 1rem;
}
.opciones{display:flex;flex-direction:column;gap:.6rem}
button.opcion{
  display:block;
  width:100%;
  text-align:left;
  background:#fff;
  border:1px solid var(--azul);
  color:var(--azul);
  border-radius:.25rem;
  padding:.7rem .9rem;
  font:inherit;
  font-weight:600;
  cursor:pointer;
}
button.opcion small{display:block;font-weight:400;color:var(--gris)}
button.opcion:hover{background:var(--azul);color:#fff}
button.opcion:hover small{color:rgba(255,255,255,.85)}
a.boton{
  display:block;
  text-align:center;
  background:var(--azul);
  color:#fff;
  border-radius:.25rem;
  padding:.7rem 1rem;
  font-weight:600;
  text-decoration:none;
  margin-top:1.4rem;
}
a.boton:hover{background:var(--azul-oscuro)}
.aviso{
  border-left:3px solid var(--azul);
  padding:0 0 0 1rem;
}
.aviso p{margin:0 0 .5rem}
.aviso p:last-child{margin-bottom:0}
.motivo{
  font-size:.85rem;
  color:var(--gris);
  margin:.85rem 0 0;
}
.destino{
  margin:1.1rem 0 0;
  text-align:center;
}
.destino .etiqueta{
  display:block;
  font-size:.85rem;
  color:var(--gris);
  margin-bottom:.35rem;
}
.destino .url{
  display:block;
  word-break:break-all;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.95rem;
  color:var(--gris);
}
.destino .url b{color:var(--texto);font-weight:700}
.verificar{
  margin:.85rem 0 0;
  font-size:.85rem;
  color:var(--gris);
}
.verificar strong{color:var(--texto)}
.consulta{
  margin-top:1.5rem;
  padding-top:1rem;
  border-top:1px solid var(--borde);
  font-size:.85rem;
  color:var(--gris);
}
.consulta a{color:var(--azul)}
.pie{
  margin-top:1.5rem;
  padding-top:1rem;
  border-top:1px solid var(--borde);
  display:flex;
  justify-content:space-between;
  gap:1rem;
  font-size:.88rem;
}
.pie button{
  background:none;
  border:none;
  color:var(--azul);
  font:inherit;
  cursor:pointer;
  padding:0;
  text-decoration:underline;
}
.pie button[hidden]{display:none}
.advertencia{
  margin:1.25rem 0 0;
  font-size:.8rem;
  line-height:1.45;
  color:var(--gris);
}
.advertencia strong{color:var(--texto)}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px}