/* ==========================================================================
   Máscara "en construcción" (ver js/gate.js)
   Copia de la página que estaba en seiscuatro.es, con un acceso discreto.
   ========================================================================== */

/* con la máscara puesta no se ve ni se usa nada de la web */
html.gated, html.gated body{overflow:hidden;height:100%}
html.gated body > *:not(#gate){display:none !important}
html.gated, html.gated *{cursor:auto !important}
html.gated button, html.gated a{cursor:pointer !important}

#gate{
  position:fixed;inset:0;z-index:20000;
  display:flex;align-items:center;justify-content:center;
  background:#ffffff;
  color:#111111;
  font-family:Arial,sans-serif;
}
.gate-wrap{
  display:flex;flex-direction:column;align-items:center;gap:22px;
  padding:32px;text-align:center;
  opacity:0;
  animation:gateUp .8s ease .1s forwards;
}
@keyframes gateUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.gate-mark{
  width:auto;height:54px;
  animation:gateBreathe 4.5s ease-in-out infinite;
}
@keyframes gateBreathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.04)}
}
.gate-phrase{
  margin:0;
  font-weight:700;font-size:15px;letter-spacing:-0.01em;
  max-width:340px;line-height:1.5;
}
.gate-phrase span{color:#334FB4;font-weight:300}
.gate-loader{
  width:130px;height:3px;
  background:#eceef5;border-radius:999px;
  overflow:hidden;position:relative;
}
.gate-loader::after{
  content:'';position:absolute;top:0;left:0;height:100%;width:38%;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(51,79,180,0) 0%,#334FB4 50%,rgba(51,79,180,0) 100%);
  animation:gateSlide 1.6s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes gateSlide{0%{left:-40%}100%{left:100%}}
.gate-services{
  margin:0;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;
  max-width:320px;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:#999;font-weight:600;
}
.gate-services i{font-style:normal;color:#d5d5d5}
.gate-word{height:22px;width:auto;margin-top:8px}

/* acceso discreto, abajo */
.gate-access{
  position:absolute;left:0;right:0;
  bottom:calc(22px + env(safe-area-inset-bottom,0px));
  display:flex;justify-content:center;
}
.gate-toggle{
  background:none;border:none;padding:8px 12px;
  font:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#c4c4c4;
  transition:color .2s ease;
}
.gate-toggle:hover,.gate-toggle:focus-visible{color:#334FB4;outline:none}
.gate-form{display:flex;gap:8px}
.gate-form[hidden]{display:none}
.gate-form input{
  width:170px;
  font:inherit;font-size:14px;
  padding:10px 12px;
  border:2px solid #d9dcea;border-radius:2px;
}
.gate-form input:focus{outline:none;border-color:#334FB4}
.gate-form button{
  font-family:'Arial Black','Arial Bold',Arial,sans-serif;font-weight:900;font-size:12.5px;
  color:#fff;background:#334FB4;border:none;border-radius:2px;
  padding:0 16px;
}
.gate-form.is-wrong{animation:gateShake .35s ease}
@keyframes gateShake{
  25%{transform:translateX(-6px)}
  50%{transform:translateX(6px)}
  75%{transform:translateX(-3px)}
}
.gate-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  .gate-wrap{opacity:1;animation:none}
  .gate-mark,.gate-loader::after{animation:none}
}