:root{
  --brand-blue:#1e56a6;
  --brand-blue-strong:#0842c8;
  --brand-blue-dark:#074bac;
  --brand-charcoal:#2b2b2d;
  --surface:#f4f7fb;
  --surface-2:#e9eef5;
  --line:rgba(30,86,166,.16);
  --text-soft:rgba(43,43,45,.74);
}

*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0}
body{
  overflow:hidden;
  background:var(--surface);
  background-image:url('/assets/fondo.webp');
  background-image:image-set('/assets/fondo.webp' 1x, '/assets/fondo.png' 1x);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--brand-charcoal);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* =========================
   LOADER
   ========================= */
.loader{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  background-image:url('/assets/fondo.webp');
  background-image:image-set('/assets/fondo.webp' 1x, '/assets/fondo.png' 1x);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  transition:
    opacity 900ms cubic-bezier(.77,0,.18,1),
    visibility 900ms;
}
.loader.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.loader-core{
  position:relative;
  z-index:3;
  width:min(260px,58vw);
  display:grid;
  place-items:center;
}
.loader-logo{
  display:block;
  width:58%;
  height:auto;
  filter:
    drop-shadow(0 18px 34px rgba(30,86,166,.16))
    drop-shadow(0 0 28px rgba(30,86,166,.08));
  animation:loaderFloat 2.7s ease-in-out infinite;
}
.loader-progress{
  width:72%;
  height:2px;
  margin-top:26px;
  overflow:hidden;
  background:rgba(30,86,166,.10);
  border-radius:999px;
}
.loader-progress span{
  display:block;
  width:0%;
  height:100%;
  background:linear-gradient(90deg,var(--brand-blue),var(--brand-blue-strong));
  box-shadow:0 0 14px rgba(8,66,200,.28);
}
.loader-orbit{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(30,86,166,.10);
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.orbit-a{
  width:min(430px,78vw);
  aspect-ratio:1;
  animation:spin 16s linear infinite;
}
.orbit-b{
  width:min(330px,60vw);
  aspect-ratio:1;
  border-color:rgba(43,43,45,.08);
  border-style:dashed;
  animation:spinReverse 12s linear infinite;
}
.loader-sheen{
  position:absolute;
  inset:-20%;
  background:linear-gradient(
    110deg,
    transparent 42%,
    rgba(255,255,255,.55) 50%,
    transparent 58%
  );
  transform:translateX(-120%);
  animation:sheen 2.7s ease-in-out infinite;
  pointer-events:none;
}

@keyframes loaderFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-7px) scale(1.012)}
}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes spinReverse{to{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes sheen{
  0%{transform:translateX(-120%)}
  52%,100%{transform:translateX(120%)}
}

/* =========================
   LANDING
   ========================= */
.landing{
  position:fixed;
  inset:0;
  opacity:0;
  visibility:hidden;
  display:grid;
  place-items:center;
  background-image:url('/assets/fondo.webp');
  background-image:image-set('/assets/fondo.webp' 1x, '/assets/fondo.png' 1x);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  transition:
    opacity 1000ms cubic-bezier(.2,.8,.2,1),
    visibility 1000ms;
}
.landing.is-visible{
  opacity:1;
  visibility:visible;
}
.grid{
  position:absolute;
  inset:0;
  opacity:.42;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at center,black 0%,rgba(0,0,0,.55) 42%,transparent 82%);
  pointer-events:none;
}
.ambient{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(55px);
  mix-blend-mode:multiply;
}
.ambient-one{
  width:34vw;height:34vw;
  left:-14vw;top:8vh;
  background:rgba(30,86,166,.07);
}
.ambient-two{
  width:30vw;height:30vw;
  right:-12vw;bottom:-8vh;
  background:rgba(43,43,45,.05);
}

.scene{
  position:relative;
  z-index:2;
  width:min(940px,84vw);
  display:grid;
  place-items:center;
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform 140ms ease-out;
}
.landing-logo{
  position:relative;
  z-index:2;
  display:block;
  width:min(470px,72vw);
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
  filter:
    drop-shadow(0 28px 45px rgba(43,43,45,.13))
    drop-shadow(0 0 30px rgba(30,86,166,.12));
  animation:heroBreath 5.2s ease-in-out infinite;
}
.logo-halo{
  position:absolute;
  width:min(600px,84vw);
  aspect-ratio:1.8;
  border-radius:50%;
  border:1px solid rgba(30,86,166,.10);
  box-shadow:
    0 0 0 26px rgba(30,86,166,.025),
    0 0 0 52px rgba(30,86,166,.018);
  filter:blur(.2px);
  animation:halo 5.5s ease-in-out infinite;
}

@keyframes heroBreath{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-5px) scale(1.008)}
}
@keyframes halo{
  0%,100%{transform:scale(.96);opacity:.66}
  50%{transform:scale(1.02);opacity:1}
}

/* =========================
   SEO
   ========================= */
.seo-h1{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* =========================
   CONTACTOS
   ========================= */
.contact-bar{
  position:absolute;
  z-index:10;
  left:50%;
  bottom:max(116px,calc(94px + env(safe-area-inset-bottom)));
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  width:min(92vw,760px);
}
.contact-link{
  color:var(--brand-charcoal);
  text-decoration:none;
  font-size:clamp(.76rem,1.3vw,.9rem);
  font-weight:600;
  letter-spacing:.01em;
  opacity:.84;
  transition:
    color .25s ease,
    opacity .25s ease,
    transform .25s ease;
}
.contact-link:hover,
.contact-link:focus-visible{
  color:var(--brand-blue-dark);
  opacity:1;
  transform:translateY(-1px);
}
.contact-separator{
  width:1px;
  height:18px;
  background:rgba(43,43,45,.20);
}

/* =========================
   MÓVIL
   ========================= */
@media (max-width:700px){
  .loader-core{width:min(220px,62vw)}
  .loader-logo{width:62%}
  .orbit-a{width:82vw}
  .orbit-b{width:64vw}
  .scene{width:94vw}
  .landing-logo{width:min(470px,86vw)}
  .logo-halo{width:100vw}
  .contact-bar{
    width:92vw;
    gap:13px;
    bottom:calc(112px + env(safe-area-inset-bottom));
  }
  .contact-link{
    font-size:.72rem;
    text-align:center;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}
