/* ENLACE PRO · página de mantenimiento */
:root{
  --azul:#0a5cff;        /* azul eléctrico del logo */
  --azul-claro:#1aa7ff;  /* azul tecnológico */
  --azul-prof:#0537b8;
  --negro:#0d0d0f;
  --blanco:#ffffff;
  --gris:#4a5365;
  --ease:cubic-bezier(.22,.8,.26,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--negro);background:var(--blanco);
  overflow-x:hidden;position:relative;
  background-image:
    radial-gradient(120% 70% at 50% -10%,rgba(26,167,255,.20),transparent 60%),
    radial-gradient(60% 50% at 100% 40%,rgba(10,92,255,.08),transparent 70%),
    radial-gradient(60% 50% at 0% 70%,rgba(26,167,255,.08),transparent 70%);
}
.skip{position:absolute;left:-999px;top:8px;background:var(--negro);color:#fff;padding:10px 14px;border-radius:8px;z-index:20}
.skip:focus{left:8px}

#red{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* formas geométricas inspiradas en el eslabón del logo */
.fondo{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.forma{position:absolute;color:var(--azul);opacity:.10}
.forma-a{width:min(70vw,640px);top:6%;left:-18%;transform:rotate(-8deg);animation:flota 14s ease-in-out infinite}
.forma-b{width:min(60vw,520px);bottom:18%;right:-16%;transform:rotate(10deg) scaleX(-1);color:var(--azul-claro);animation:flota 17s ease-in-out infinite reverse}
@keyframes flota{50%{translate:0 -18px}}

/* cabecera: el logo es el protagonista */
.cabecera{position:relative;z-index:2;width:100%;display:flex;justify-content:center;
  padding:calc(env(safe-area-inset-top) + clamp(20px,4vh,44px)) 20px 0}
.logo-wrap{position:relative;width:clamp(150px,34vw,250px);aspect-ratio:1}
.logo{position:relative;z-index:2;width:100%;height:100%;display:block;
  filter:drop-shadow(0 18px 34px rgba(10,92,255,.28));
  animation:logo-in 1.3s var(--ease) both}
.halo{position:absolute;inset:-22%;z-index:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(26,167,255,.55),rgba(10,92,255,.14) 55%,transparent 72%);
  filter:blur(8px);animation:pulso 5s ease-in-out infinite}
.orbita{position:absolute;inset:-12%;width:124%;height:124%;z-index:1;animation:gira 26s linear infinite}
@keyframes logo-in{from{opacity:0;transform:translateY(14px) scale(.86);filter:blur(10px) drop-shadow(0 0 0 transparent)}}
@keyframes pulso{50%{opacity:.6;transform:scale(1.06)}}
@keyframes gira{to{transform:rotate(360deg)}}

/* hero */
.hero{position:relative;z-index:2;flex:1;width:100%;max-width:960px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(26px,5vh,52px) 22px clamp(28px,5vh,48px)}
.titulo{font-family:"Unbounded","Manrope",system-ui,sans-serif;font-weight:800;
  line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
.linea{display:block;opacity:0;transform:translateY(22px);animation:entra 1s var(--ease) forwards}
.l1{font-size:clamp(1.12rem,4.6vw,2.15rem);color:var(--negro);animation-delay:.55s}
.l2{font-size:clamp(1.65rem,7.4vw,3.6rem);margin-top:.18em;animation-delay:.8s;
  background:linear-gradient(100deg,var(--azul-prof),var(--azul) 45%,var(--azul-claro));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@keyframes entra{to{opacity:1;transform:none}}

.pronto{margin-top:clamp(18px,3vh,28px);font-family:"Unbounded",sans-serif;font-weight:700;
  font-size:clamp(.9rem,3.3vw,1.3rem);letter-spacing:.14em;color:var(--negro);
  opacity:0;animation:entra 1s var(--ease) 1.1s forwards}
.pronto span{position:relative;display:inline-block;padding:.5em 1.2em;border-radius:999px;
  border:1px solid rgba(10,92,255,.28);background:rgba(255,255,255,.7);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 0 0 6px rgba(26,167,255,.07),0 8px 24px rgba(10,92,255,.10)}
.barra{display:block;position:relative;width:min(240px,60%);height:3px;margin-top:18px;border-radius:3px;
  background:rgba(10,92,255,.14);overflow:hidden;opacity:0;animation:entra 1s var(--ease) 1.25s forwards}
.barra::after{content:"";position:absolute;inset:0;width:40%;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--azul-claro),var(--azul),transparent);
  animation:carga 2.4s ease-in-out infinite}
@keyframes carga{from{transform:translateX(-110%)}to{transform:translateX(280%)}}

.texto{margin-top:clamp(18px,3vh,26px);max-width:34em;font-size:clamp(.98rem,2.9vw,1.14rem);
  line-height:1.65;color:var(--gris);opacity:0;animation:entra 1s var(--ease) 1.4s forwards}

/* botón WhatsApp */
.boton{position:relative;overflow:hidden;isolation:isolate;
  margin-top:clamp(24px,4vh,36px);display:inline-flex;align-items:center;justify-content:center;gap:14px;
  min-height:62px;padding:16px 34px;max-width:100%;border-radius:16px;
  font-family:"Unbounded",sans-serif;font-weight:700;font-size:clamp(.78rem,3.2vw,.98rem);letter-spacing:.04em;
  color:#fff;text-decoration:none;
  background:linear-gradient(120deg,var(--azul-prof),var(--azul) 55%,var(--azul-claro));
  box-shadow:0 14px 34px rgba(10,92,255,.38),inset 0 1px 0 rgba(255,255,255,.35);
  opacity:0;animation:entra 1s var(--ease) 1.6s forwards,brilla 3.6s ease-in-out 2.8s infinite;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .35s}
.boton::before{content:"";position:absolute;top:0;bottom:0;width:45%;left:-60%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);
  transition:left .7s var(--ease)}
.boton .wa{width:28px;height:28px;flex:none;transition:transform .35s var(--ease)}
.boton:hover,.boton:focus-visible{transform:translateY(-4px);filter:saturate(1.1);
  box-shadow:0 20px 44px rgba(10,92,255,.5),0 0 0 6px rgba(26,167,255,.18),inset 0 1px 0 rgba(255,255,255,.4)}
.boton:hover::before,.boton:focus-visible::before{left:120%}
.boton:hover .wa{transform:scale(1.14) rotate(-6deg)}
.boton:active{transform:translateY(-1px) scale(.99)}
.boton:focus-visible,.web:focus-visible,.pie a:focus-visible{outline:3px solid var(--azul-claro);outline-offset:4px}
@keyframes brilla{50%{box-shadow:0 14px 40px rgba(26,167,255,.55),inset 0 1px 0 rgba(255,255,255,.35)}}

/* información inferior */
.info{position:relative;z-index:2;width:100%;text-align:center;padding:8px 22px clamp(34px,6vh,60px)}
.web{display:inline-block;font-family:"Unbounded",sans-serif;font-weight:700;
  font-size:clamp(1rem,4vw,1.35rem);color:var(--azul);text-decoration:none;
  padding:6px 4px;border-bottom:2px solid rgba(10,92,255,.25);transition:border-color .3s,color .3s}
.web:hover{color:var(--azul-prof);border-color:var(--azul)}
.lema{margin-top:16px;font-weight:700;font-size:clamp(.7rem,2.6vw,.88rem);letter-spacing:.2em;
  color:var(--negro);text-wrap:balance;line-height:1.7}

/* footer */
.pie{position:relative;z-index:2;width:100%;color:#fff;
  background:linear-gradient(180deg,#0d0d0f,#07122e);
  border-top:2px solid transparent;border-image:linear-gradient(90deg,transparent,var(--azul-claro),var(--azul),transparent) 1;
  padding:34px 22px calc(26px + env(safe-area-inset-bottom))}
.pie-in{max-width:960px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.marca{font-family:"Unbounded",sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:.06em}
.pie-lema{font-size:.72rem;letter-spacing:.2em;color:#b9c6e4;line-height:1.7}
.pie a{color:var(--azul-claro);text-decoration:none;transition:color .3s}
.pie a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.pie-web{font-weight:700;font-size:.95rem}
.copy{margin-top:14px;padding-top:16px;width:100%;border-top:1px solid rgba(255,255,255,.12);
  font-size:.78rem;line-height:1.7;color:#93a0bf}

/* pantallas grandes: todo cabe sin scroll cuando hay altura suficiente */
@media (min-width:900px){.hero{padding-top:clamp(24px,4vh,44px)}}
@media (max-height:640px) and (orientation:landscape){.logo-wrap{width:120px}.titulo .l1{font-size:1.05rem}.titulo .l2{font-size:1.5rem}}
@media (max-width:380px){.boton{padding:14px 20px;gap:10px}.lema,.pie-lema{letter-spacing:.12em}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
  .linea,.pronto,.barra,.texto,.boton{opacity:1;transform:none}
}