*{margin:0;padding:0;box-sizing:border-box}
body{
  min-height:100vh;
  font-family:"Arial",sans-serif;
}

.bg{
  position:fixed;inset:-6px;z-index:-2;
  background-image:url('../img/Fondo.webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:blur(4px);
}

.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem 2rem;
  background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.12);
}

.nav::after{
  content:"";
  position:absolute;inset:auto 0 0 0;height:15%;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.5) 60%,rgba(0,0,0,.9) 100%);
  pointer-events:none;
}

.nav-logo{height:52px;width:auto}

.nav-right{position:relative;display:flex;align-items:center;gap:1rem}

.callout{
  position:absolute;right:15px;top:calc(100% + 48px);
  display:flex;align-items:center;gap:.6rem;
  background:rgba(255,255,255,.96);
  color:#000;
  font-size:.8rem;
  line-height:1.45;
  padding:.6rem 1rem;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  max-width:280px;
  animation:bob 1.6s ease-in-out infinite;
}
.callout svg{flex-shrink:0;color:#000;transform:rotate(-135deg)}
.callout p{font-weight:300;text-align:justify}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media (prefers-reduced-motion: reduce){
  .callout{animation:none}
}

.nav-menu{display:flex;list-style:none}
.nav-menu a{
  display:inline-block;
  font-family:"Arial Black","Arial",sans-serif;
  font-size:.85rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#000;
  text-decoration:none;
  border:1px solid rgba(0,0,0,.6);
  border-radius:999px;
  padding:.6rem 1.4rem;
  transition:background .25s,color .25s;
}
.nav-menu a:hover{background:#000;color:#fff}
.nav-menu a:focus-visible{outline:3px solid #072b4a;outline-offset:3px;border-radius:999px}
.nav-menu a:focus-visible:enabled:hover{background:#fff;color:#000}

.pronto{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
}
.pronto p{
  font-family:"Arial Black","Arial",sans-serif;
  font-size:clamp(2rem,6vw,4rem);
  letter-spacing:.35em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 4px 24px rgba(0,0,0,.5);
  padding:1rem 1.5rem;
}

@media (max-width:640px){
  .nav{flex-direction:column;gap:.6rem;padding:.8rem 1rem}
  .pronto p{letter-spacing:.18em}
  .callout{display:none}
}