/* Portada Aura: aura que se mueve, marco de vidrio, menú con pastilla y teléfono que sube. */
.portada{position:relative;min-height:100vh;isolation:isolate}
.aura{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(120deg,#c2361f 0%,#a0245e 40%,#5a2aa8 75%,#3a2fb8 100%)}
.mancha{position:absolute;border-radius:50%;filter:blur(80px);will-change:transform}
.m1{width:62vw;height:62vw;left:-14vw;top:8vh;background:radial-gradient(circle,var(--aura-rojo),transparent 68%);animation:deriva1 22s var(--suave) infinite alternate}
.m2{width:55vw;height:55vw;left:22vw;top:-18vh;background:radial-gradient(circle,var(--aura-magenta),transparent 66%);animation:deriva2 26s var(--suave) infinite alternate}
.m3{width:60vw;height:60vw;right:-16vw;top:6vh;background:radial-gradient(circle,var(--aura-violeta),transparent 66%);animation:deriva3 24s var(--suave) infinite alternate}
.m4{width:46vw;height:46vw;right:4vw;bottom:-22vh;background:radial-gradient(circle,var(--aura-indigo),transparent 66%);animation:deriva1 30s var(--suave) infinite alternate-reverse}
.m5{width:40vw;height:40vw;left:30vw;bottom:-26vh;background:radial-gradient(circle,#ff3fae,transparent 66%);animation:deriva2 28s var(--suave) infinite alternate-reverse}
@keyframes deriva1{to{transform:translate(8vw,6vh) scale(1.12)}}
@keyframes deriva2{to{transform:translate(-6vw,10vh) scale(.9)}}
@keyframes deriva3{to{transform:translate(-9vw,-5vh) scale(1.08)}}
/* la silueta de la referencia es aquí la curva del flujo acumulado: cae y vuelve a subir */
.sombra{position:absolute;left:50%;top:22vh;width:min(1100px,96vw);transform:translateX(-46%);filter:blur(34px);opacity:.92;animation:respira 12s ease-in-out infinite alternate}
@keyframes respira{to{transform:translateX(-44%) scale(1.04) translateY(-2vh)}}
.luz{position:absolute;inset:0;background:radial-gradient(600px circle at var(--mx,50%) var(--my,40%),rgba(255,220,240,.14),transparent 60%)}
.grano{position:absolute;inset:-50%;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.escena{padding-block:28px 80px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.marco{position:relative;max-width:1240px;margin:0 auto;border-radius:44px;overflow:hidden;
  border:1.5px solid rgba(255,235,245,.42);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 30px 80px rgba(255,255,255,.05),0 40px 120px rgba(20,0,30,.45);
  background:linear-gradient(180deg,rgba(20,6,26,.04),rgba(20,6,26,.16));animation:marcoEntra 1.1s var(--suave) both}
@keyframes marcoEntra{from{transform:scale(.975);opacity:0}}

.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:30px 40px 0}
.nav .seg{justify-self:center;animation:caer .9s .25s var(--resorte) both}
.nav .seg>a{padding:10px 20px;font-size:15.5px}
@keyframes caer{from{transform:translateY(-26px);opacity:0}}
.acciones{justify-self:end;display:flex;gap:12px;animation:caer .9s .35s var(--resorte) both}
.hamburguesa{display:none;width:44px;height:44px;border-radius:14px;place-items:center}
.menu-cel{display:none}

.hero{text-align:center;padding:96px 24px 0;max-width:980px;margin:0 auto}
.titulo{margin:0;font-weight:500;font-size:clamp(40px,6.4vw,88px);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.linea{display:block;padding-bottom:.06em;background:linear-gradient(90deg,#ffd6c9 0%,#fff3f6 38%,#fbe9ff 60%,#cdb9ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;animation:revelar 1.1s var(--suave) both}
.linea:nth-child(1){animation-delay:.45s}
.linea:nth-child(2){animation-delay:.62s}
@keyframes revelar{from{opacity:0;transform:translateY(36px);filter:blur(14px)}}
.bajada{margin:26px auto 0;max-width:600px;font-size:clamp(16px,1.6vw,19px);color:rgba(255,240,248,.86);animation:revelar 1s .8s var(--suave) both}
.dominio{display:flex;align-items:center;gap:8px;margin:40px auto 0;max-width:470px;padding:7px 7px 7px 22px;border-radius:20px;text-align:left;animation:revelar 1s .95s var(--suave) both}
.dominio .url{flex:1;min-width:0;font-size:16.5px;white-space:nowrap;overflow:hidden}
.dominio .url i{font-style:normal;color:rgba(255,240,248,.62)}
.dominio .cursor{display:inline-block;width:2px;height:1.1em;margin-left:1px;vertical-align:-3px;background:var(--tinta);animation:titila 1s steps(2) infinite}
@keyframes titila{50%{opacity:0}}
.dominio .btn{padding:12px 20px}
.checks{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;margin:18px 0 0;padding:0;list-style:none;font-size:13.5px;color:rgba(255,240,248,.72);animation:revelar 1s 1.05s var(--suave) both}
.checks li{display:flex;align-items:center;gap:6px}
.checks svg{width:14px;height:14px;color:var(--lima)}

.tel-zona{position:relative;height:380px;margin-top:64px;perspective:1400px}
.telefono{position:absolute;left:50%;top:0;width:350px;height:700px;margin-left:-175px;border-radius:58px;padding:11px;
  background:linear-gradient(145deg,#3a3440,#121016 40%,#2a2530);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),0 -10px 80px rgba(120,40,160,.35),0 30px 80px rgba(0,0,0,.5);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--suave);animation:subeTel 1.4s 1s var(--resorte) both}
@keyframes subeTel{from{translate:0 260px;opacity:0}}
.pantalla-tel{position:relative;height:100%;border-radius:48px;overflow:hidden;padding:18px 22px;
  background:radial-gradient(120% 80% at 10% 10%,#8a2457 0%,transparent 55%),radial-gradient(120% 90% at 100% 20%,#4a24a0 0%,transparent 60%),linear-gradient(180deg,#2a0c2a,#14081c)}
.estado-tel{display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:600;padding:2px 10px 0}
.estado-tel .ic{display:flex;gap:6px;align-items:center}
.isla{position:absolute;left:50%;top:12px;width:112px;height:32px;margin-left:-56px;border-radius:20px;background:#000}
.tel-cab{display:flex;justify-content:space-between;align-items:center;margin-top:26px}
.tel-cab .logo{font-size:19px}
.tel-cab .logo svg{width:26px;height:26px}
.mini-cta{padding:8px 14px;border-radius:11px;font-size:13.5px}
.tel-card{margin-top:22px;border-radius:24px;padding:18px}
.tel-frase{margin:14px 0 2px;font-size:25px;font-weight:500;letter-spacing:-.02em;line-height:1.15}
.tel-num{font-family:var(--mono);font-size:40px;font-weight:500;color:var(--lima);letter-spacing:-.03em;line-height:1.1}
.tel-num small{font-size:14px;color:var(--tenue);font-family:var(--ui);letter-spacing:0;margin-left:6px}
.tel-curva{margin-top:12px}
.tel-curva path.linea-c{stroke-dasharray:420;stroke-dashoffset:420;animation:dibuja 2.2s 2.1s var(--suave) forwards}
@keyframes dibuja{to{stroke-dashoffset:0}}
.tel-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.tel-kpis div{border-radius:14px;padding:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.tel-kpis span{display:block;font-size:11px;color:var(--tenue)}
.tel-kpis b{font-family:var(--mono);font-weight:500;font-size:15px}

.bloque-sec{max-width:1240px;margin:84px auto 0;scroll-margin-top:24px}
.sec-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.sec-cab h2{margin:0;font-size:clamp(28px,3.4vw,42px);font-weight:500;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
.sec-cab p{margin:0;max-width:44ch;color:rgba(255,240,248,.8)}
.grilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tarjeta{border-radius:28px;padding:26px;position:relative;overflow:hidden;transition:transform .45s var(--resorte),border-color .3s}
.tarjeta:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.26)}
.tarjeta .n{font-family:var(--mono);font-size:13px;color:var(--tenue)}
.tarjeta h3{margin:10px 0 6px;font-size:23px;font-weight:500;letter-spacing:-.015em}
.tarjeta p{margin:0;color:var(--tenue);max-width:36ch}
.ilus{height:96px;margin-top:20px;display:flex;align-items:flex-end;gap:10px}
.preg{flex:1;min-width:0;height:36px;border-radius:11px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;padding:0 12px;font-size:13px;color:var(--tenue);white-space:nowrap;overflow:hidden}
.preg b{color:var(--tinta);font-weight:500;margin-left:auto;font-family:var(--mono)}
.fila-robots{display:flex;gap:12px;align-items:flex-end}
.indicadores{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.ind{border-radius:22px;padding:20px}
.ind b{display:block;font-family:var(--mono);font-weight:500;font-size:24px;color:var(--lima);letter-spacing:-.02em}
.ind span{display:block;font-size:15px;font-weight:500;margin:6px 0 4px}
.ind p{margin:0;font-size:13.5px;color:var(--tenue)}
.dentro{border-radius:32px;padding:28px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center}
.mini-lienzo{position:relative;height:260px;border-radius:22px;background:rgba(10,6,14,.55);border:1px solid rgba(255,255,255,.08);
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:20px 20px;overflow:hidden}
.mini-lienzo svg.cables{position:absolute;inset:0;width:100%;height:100%}
.mini-lienzo svg.cables path{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1.5;stroke-dasharray:4 6;animation:fluye 1.6s linear infinite}
@keyframes fluye{to{stroke-dashoffset:-20}}
.mn{position:absolute;display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:14px;background:#16111d;border:1px solid rgba(255,255,255,.1);font-size:13px;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.mn .robot{transform:scale(.8)}
.mn b{font-family:var(--mono);font-weight:500}
.dentro ul{list-style:none;margin:16px 0 22px;padding:0;display:grid;gap:10px;color:rgba(255,240,248,.86)}
.dentro li{display:flex;gap:10px;align-items:flex-start}
.dentro li svg{width:16px;height:16px;color:var(--lima);flex:none;margin-top:4px}
.sello{border-radius:28px;padding:28px;display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.sello .huella{font-family:var(--mono);font-size:14px;padding:10px 14px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.1);color:var(--lima)}
.sello p{margin:0;max-width:62ch;color:rgba(255,240,248,.86)}
.cierre{text-align:center;padding:56px 24px;border-radius:36px}
.cierre h2{margin:0 0 10px;font-size:clamp(28px,3.6vw,46px);font-weight:500;letter-spacing:-.03em}
.cierre p{margin:0 auto 24px;max-width:48ch;color:rgba(255,240,248,.84)}
.pie{max-width:1240px;margin:40px auto 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:rgba(255,240,248,.62);font-size:13px}

@media (max-width:980px){
  .nav{grid-template-columns:1fr auto;padding:22px 22px 0}
  .nav .seg,.acciones .btn-vidrio:not(.hamburguesa){display:none}
  .hamburguesa{display:grid}
  .menu-cel{position:absolute;right:22px;top:78px;z-index:5;flex-direction:column;gap:4px;padding:8px;border-radius:18px;min-width:200px}
  .menu-cel.abierto{display:flex}
  .menu-cel a{padding:11px 14px;border-radius:12px;text-decoration:none}
  .menu-cel a:hover{background:rgba(255,255,255,.08)}
  .hero{padding-top:64px}
  .grilla{grid-template-columns:minmax(0,1fr)}
  .indicadores{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dentro{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .marco{border-radius:30px}
  .acciones .btn-cta{padding:10px 16px}
  .tel-zona{height:330px;margin-top:48px}
  .telefono{scale:.88;transform-origin:50% 0}
  .indicadores{grid-template-columns:minmax(0,1fr)}
  .dominio{padding-left:16px}
  .dominio .url{font-size:15px}
}
/* teléfono angosto: la barra entera cabe dentro del marco (09/11: el ☰ quedaba cortado a 390) */
@media (max-width:480px){
  .nav{padding:18px 14px 0;gap:8px}
  .nav .logo{font-size:20px;gap:8px;min-width:0}
  .nav .logo svg{width:34px;height:34px}
  .acciones{gap:8px}
  .acciones .btn-cta{padding:9px 13px;font-size:14px}
  .hamburguesa{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){ .tel-curva path.linea-c{stroke-dashoffset:0} }