/* ============================================================
   VIM Longevity: hoja de estilos
   Tema oscuro. Paleta derivada del logo oficial (degradado menta ->
   teal profundo, muestreado del PNG) sobre casi negro con nebulosa
   indigo, al estilo de la referencia del cliente.

   OJO al cachear: el .htaccess marca los assets como immutable por un
   ano, asi que cada cambio aqui necesita subir el ?v= de los enlaces
   en los cuatro HTML. Si no, el navegador sirve la hoja vieja.
   ============================================================ */

:root{
  /* Marca: muestreado de assets/img/VIM-Longevity-Logo-final.png */
  --mint:        #80D0C7;
  --teal:        #4B94A2;
  --deep:        #1E6082;
  --brand-grad:  linear-gradient(100deg, var(--mint), var(--teal) 55%, var(--deep));

  /* Ambiente */
  --violet:      #5B4BE0;
  --violet-soft: rgba(91, 75, 224, .30);
  --teal-soft:   rgba(128, 208, 199, .16);

  /* Superficies */
  --bg:          #05070B;
  --card:        rgba(255,255,255,.038);
  --card-2:      rgba(255,255,255,.06);
  --line:        rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.16);

  /* Texto */
  --ink:         #F4F7FA;
  --ink-soft:    #97A3B4;
  --ink-dim:     #6B7688;

  --font:        "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap:        1160px;
  --gutter:      clamp(1.25rem, 5vw, 2.5rem);
  --r-lg:        26px;
  --r-md:        16px;
  --header-h:    76px;

  --ease:        cubic-bezier(.22,.68,0,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}

body{
  margin:0;min-height:100vh;
  font-family:var(--font);
  font-size:clamp(.975rem,.93rem + .2vw,1.0625rem);
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Sin palabras huerfanas: el navegador reparte las lineas del titular en vez
   de dejar una sola palabra colgando abajo. En parrafos, 'pretty' solo evita
   la ultima linea de una palabra sin recomponer el resto. Donde no haya
   soporte, los   del HTML pegan las dos ultimas palabras. */
h1,h2,h3,.eyebrow{text-wrap:balance}
p,li,figcaption{text-wrap:pretty}

img,svg{display:block;max-width:100%;height:auto}
a{color:var(--mint);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

.skip{position:absolute;left:-9999px;top:0;background:var(--deep);color:#fff;padding:.75rem 1rem;z-index:400}
.skip:focus{left:.5rem;top:.5rem}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============================================================
   2. Fondo ambiental
   ============================================================ */

.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg::before,.bg::after{content:"";position:absolute;border-radius:50%;filter:blur(70px)}
.bg::before{
  width:min(1100px,140vw);aspect-ratio:1;top:-42%;left:50%;transform:translateX(-50%);
  background:radial-gradient(circle,var(--violet-soft) 0%,transparent 62%);
}
.bg::after{
  width:min(760px,110vw);aspect-ratio:1;bottom:-34%;left:50%;transform:translateX(-50%);
  background:radial-gradient(circle,var(--teal-soft) 0%,transparent 65%);
}
.bg__orbits{
  position:absolute;top:38%;left:50%;width:min(1500px,190vw);
  transform:translate(-50%,-50%);opacity:.45;
}
.bg__star{
  position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:.5;
  box-shadow:0 0 8px 2px rgba(255,255,255,.35);
  animation:twinkle 4s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:.18;transform:scale(.8)}50%{opacity:.85;transform:scale(1.15)}}

/* ============================================================
   3. Cabecera pegada
   ============================================================ */

.page{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh}

.site-header{
  position:sticky;top:0;z-index:120;
  background:rgba(5,7,11,.82);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(140%);
}
.site-header__inner{
  display:flex;align-items:center;gap:clamp(.75rem,2vw,2rem);
  min-height:var(--header-h);
}
.brand{display:inline-flex;align-items:center;flex:none}
/* El lockup trae la bajada LONGEVITY en ~#F0F0F0 y muy pequena:
   por debajo de ~130px de ancho deja de leerse. */
.brand img{width:clamp(132px,13vw,164px)}
.brand:hover{text-decoration:none;opacity:.85}

.site-nav{margin-left:auto;display:flex;align-items:center;gap:1.75rem}
.site-nav a{color:var(--ink-soft);font-size:.925rem;font-weight:600}
.site-nav a:hover{color:var(--ink);text-decoration:none}
@media (max-width:860px){.site-nav{display:none}}

.site-header .btn{margin-left:auto;flex:none}
.site-nav ~ .btn{margin-left:0}

/* ============================================================
   4. Botones
   ============================================================ */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.5rem;border:1px solid var(--line-strong);border-radius:999px;
  background:var(--card);color:var(--ink);
  font:inherit;font-weight:600;font-size:.94rem;line-height:1;text-align:center;
  cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .15s ease,filter .2s ease;
}
.btn:hover{background:var(--card-2);border-color:rgba(255,255,255,.3);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px;flex:none}

.btn--primary{background:var(--brand-grad);border-color:transparent;color:#04141A;font-weight:700}
.btn--primary:hover{background:var(--brand-grad);filter:brightness(1.09)}

.btn--send{width:52px;height:52px;padding:0;border:0;border-radius:50%;
  background:var(--brand-grad);color:#04141A;box-shadow:0 8px 24px rgba(75,148,162,.4)}
.btn--send:hover{background:var(--brand-grad);filter:brightness(1.08)}
.btn--send svg{width:20px;height:20px}

/* Enlace con flecha que avanza al pasar el raton */
.arrow{
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--mint);font-size:.9rem;font-weight:700;
}
.arrow:hover{text-decoration:none}
.arrow svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.arrow:hover svg{transform:translateX(4px)}

/* ============================================================
   5. Pagina coming soon

   Una sola pantalla centrada. El logo se anima con el mismo trazo de
   pulso que tenia el loader: dibuja el ritmo v-i-m, se disuelve y la
   marca entra con barrido de mascara mas un brillo. Todo con
   animation-fill-mode both, asi que sin JS queda visible igual.
   ============================================================ */

.soon{
  flex:1;display:grid;place-items:center;
  padding:clamp(2.5rem,8vh,5rem) 0 clamp(3rem,8vh,5rem);
}
.soon__inner{text-align:center;max-width:760px}

/* ---------- Logo animado ---------- */

.soon__logo{
  position:relative;display:grid;place-items:center;
  width:min(420px,82vw);margin:0 auto clamp(2rem,4vw,2.75rem);
}
.soon__logo::before{
  content:"";position:absolute;width:110%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(128,208,199,.14) 0%,transparent 65%);
  filter:blur(28px);
}
.soon__pulse{width:100%;height:auto;overflow:visible}

/* La animacion del logo es UN SOLO ciclo de 15 s que se repite entero, que es
   lo que pidio el cliente: el pulso se dibuja, el logo entra, y a los ~11,5 s
   el logo se desvanece y todo vuelve a empezar.
   Todas las piezas (trazo, punto, marca y brillo) comparten duracion de 15 s y
   se ordenan con porcentajes, no con retardos, para que no se desincronicen
   nunca. Referencia en milisegundos del ciclo: 150 dibujo, 1150 pulso
   completo, 1450 fin de la pausa, 1550 entra la marca, 1900 trazo disuelto,
   2200 brillo, 14300 la marca empieza a irse, 14700 fuera. Un ms = 1/150 %.
   El trazo NO se redibuja encima de la marca: la marca ya se ha ido cuando el
   trazo vuelve, porque superponerlos cruzaba las letras y quedaba sucio. */
.soon__pulse .trace{
  fill:none;transform-origin:50% 62%;
  stroke:url(#pulseGrad);stroke-width:7.5;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:690;stroke-dashoffset:690;
  filter:drop-shadow(0 0 16px rgba(128,208,199,.6));
  animation:trace-loop 15s linear infinite both;
}
@keyframes trace-loop{
  0%{stroke-dashoffset:690;opacity:1;transform:none}
  1%{stroke-dashoffset:690;opacity:1;transform:none;
     animation-timing-function:cubic-bezier(.36,0,.2,1)}
  7.7%{stroke-dashoffset:0;opacity:1;transform:none}
  9.7%{stroke-dashoffset:0;opacity:1;transform:none}
  12.7%{stroke-dashoffset:0;opacity:0;transform:scale(1.04)}
  13%{stroke-dashoffset:690;opacity:0;transform:none}
  100%{stroke-dashoffset:690;opacity:0;transform:none}
}
/* El punto de luz recorre el trazo en cada pasada */
.soon__dot{fill:#F2FFFB;opacity:0;filter:drop-shadow(0 0 12px rgba(128,208,199,1))}
@supports (offset-path: path("M0 0 L1 1")){
  .soon__dot{
    r:6;
    offset-path:path("M6 78 L64 78 C78 78 80 122 100 122 S122 78 136 78 L150 78 L162 18 L174 96 L184 78 C196 78 200 34 216 34 C232 34 236 78 248 78 C260 78 264 34 280 34 C296 34 300 78 312 78 L414 78");
    animation:dot-loop 15s linear infinite both;
  }
}
@keyframes dot-loop{
  0%{offset-distance:0%;opacity:0}
  1%{offset-distance:0%;opacity:0;animation-timing-function:cubic-bezier(.36,0,.2,1)}
  1.8%{opacity:1}
  7%{opacity:1}
  7.7%{offset-distance:100%;opacity:0}
  100%{offset-distance:100%;opacity:0}
}
/* La marca entra cuando el trazo se esta disolviendo, se queda casi 12 s y se
   va con el mismo gesto con el que se disuelve el trazo, para que el ciclo
   siguiente arranque limpio. */
.soon__mark{
  position:absolute;width:min(340px,68vw);
  animation:mark-loop 15s linear infinite both;
}
@keyframes mark-loop{
  0%{opacity:0;transform:scale(.96);clip-path:inset(0 100% 0 0)}
  10.3%{opacity:0;transform:scale(.96);clip-path:inset(0 100% 0 0);
        animation-timing-function:cubic-bezier(.36,0,.2,1)}
  14.7%{opacity:1;transform:scale(1);clip-path:inset(0 0 0 0)}
  95.3%{opacity:1;transform:scale(1);clip-path:inset(0 0 0 0)}
  98%{opacity:0;transform:scale(1.03);clip-path:inset(0 0 0 0)}
  100%{opacity:0;transform:scale(.96);clip-path:inset(0 100% 0 0)}
}

/* Brillo que recorre la marca justo despues de que entra, una vez por ciclo.
   inset y mask al 100%: la mascara tiene que medir EXACTO lo mismo que la
   imagen, o deja un fantasma desplazado. */
.soon__logo::after{
  content:"";position:absolute;width:min(340px,68vw);aspect-ratio:713/310;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.92) 50%,transparent 58%);
  background-size:260% 100%;background-repeat:no-repeat;
  -webkit-mask:url("../img/ViM-Logo-final.png") 0 0/100% 100% no-repeat;
  mask:url("../img/ViM-Logo-final.png") 0 0/100% 100% no-repeat;
  animation:shine-loop 15s ease infinite both;
}
@keyframes shine-loop{
  0%,14.7%{background-position:180% 0;opacity:0}
  16.3%{opacity:1}
  20%{background-position:-80% 0;opacity:0}
  100%{background-position:-80% 0;opacity:0}
}

/* ---------- Texto y acciones ---------- */

.soon .eyebrow{animation:rise .6s var(--ease) .55s both}
.soon h1{
  margin:0 0 1.1rem;
  font-size:clamp(1.85rem,1.35rem + 2.6vw,3.1rem);
  font-weight:800;line-height:1.08;letter-spacing:-.035em;
  animation:rise .6s var(--ease) .65s both;
}
.soon h1 em{
  font-style:normal;background:var(--brand-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.soon__sub{
  margin:0 auto;max-width:56ch;color:var(--ink-soft);
  font-size:clamp(1rem,.95rem + .3vw,1.125rem);
  animation:rise .6s var(--ease) .75s both;
}
/* ---------- Bloque del formulario ---------- */

.soon__form{
  max-width:660px;margin:clamp(2.5rem,5vw,3.5rem) auto 0;
  animation:rise .6s var(--ease) .85s both;
}
.soon__form h2{
  margin:0 0 .6rem;
  font-size:clamp(1.35rem,1.15rem + .9vw,1.85rem);
  font-weight:800;line-height:1.15;letter-spacing:-.02em;
}
.soon__form > p{
  margin:0 auto clamp(1.5rem,3vw,2rem);max-width:52ch;
  color:var(--ink-soft);font-size:.975rem;
}

/* Guardas contra form_embed.js, que pisa los estilos inline del iframe.
   OJO: aqui NO va min-height. Su script calcula la altura real del
   formulario y la pone en el style inline (unos 673px en escritorio y
   1066 en movil); si le forzamos una altura minima mayor, queda un hueco
   muerto debajo. La unica reserva de espacio es el atributo height del
   HTML, que evita el salto de layout en la primera pintura. */
.ghl-embed iframe{
  display:block!important;
  width:100%!important;
  border:0!important;
  border-radius:15px!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  position:static!important;
  left:auto!important;
  background:transparent!important;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  margin:0 0 1.35rem;padding:.4rem .95rem .4rem .7rem;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);
  font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}
.eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--mint);box-shadow:0 0 0 4px rgba(128,208,199,.18);
  animation:beat 2.2s ease-in-out infinite;
}
@keyframes beat{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ============================================================
   6. Botones que se leen como enlaces

   Los CTA que antes iban al formulario ahora abren el chat, asi que son
   <button> y hay que quitarles los estilos por defecto.
   ============================================================ */


.arrow,.link-btn{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.link-btn{color:var(--ink-soft);text-align:left}
.link-btn:hover{color:var(--ink);text-decoration:underline}

/* ============================================================
   7. Pie
   ============================================================ */

.site-footer{
  margin-top:auto;padding:clamp(2.5rem,5vw,3.5rem) 0 2rem;
  border-top:1px solid var(--line);font-size:.9rem;color:var(--ink-soft);
}
.site-footer__grid{
  display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-bottom:2.5rem;
}
.site-footer h3{
  margin:0 0 .9rem;color:var(--ink);
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.55rem}
.site-footer a{color:var(--ink-soft)}
.site-footer a:hover{color:var(--ink)}
.site-footer p{margin:0 0 .5rem}
.site-footer__brand img{width:150px;margin-bottom:1rem}
.site-footer__legal{
  padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.06);
  color:var(--ink-dim);font-size:.78rem;line-height:1.6;
}
.site-footer__bottom{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;align-items:center;
  margin-top:1.25rem;color:var(--ink-dim);font-size:.82rem;
}
.site-footer__bottom p{margin:0}
@media (max-width:640px){
  .site-footer__bottom{justify-content:center;text-align:center}
}

/* ============================================================
   8. Paginas legales
   ============================================================ */

.legal{padding:clamp(2rem,5vw,3.5rem) 0 clamp(3rem,7vw,5rem)}
.legal__inner{max-width:760px;margin-inline:auto}
.legal h1{margin:0 0 .5rem;font-size:clamp(1.9rem,1.4rem + 2.2vw,3rem);font-weight:800;line-height:1.1;letter-spacing:-.03em}
.legal__date{margin:0 0 2.5rem;color:var(--ink-dim);font-size:.875rem}
.legal h2{
  margin:2.5rem 0 .75rem;font-size:1.2rem;font-weight:700;letter-spacing:-.01em;
  padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.07);
}
.legal h3{margin:1.75rem 0 .5rem;font-size:1rem;font-weight:700}
.legal p,.legal li{color:var(--ink-soft);font-size:.975rem;line-height:1.7}
.legal p{margin:0 0 1rem}
.legal ul{margin:0 0 1rem;padding-left:1.25rem}
.legal li{margin-bottom:.5rem}
.legal strong{color:var(--ink);font-weight:700}
.legal a{text-decoration:underline}
.legal__callout{
  margin:0 0 2rem;padding:1.15rem 1.25rem;
  border:1px solid rgba(128,208,199,.28);border-left:3px solid var(--mint);
  border-radius:var(--r-md);background:rgba(128,208,199,.07);
}
.legal__callout p{margin:0;color:var(--ink)}
.legal__toc{
  margin:0 0 2.5rem;padding:1.15rem 1.25rem;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);
}
.legal__toc p{margin:0 0 .6rem;color:var(--ink);font-weight:700;font-size:.9rem}
.legal__toc ol{margin:0;padding-left:1.25rem}
.legal__toc li{margin-bottom:.3rem;font-size:.9rem}
@media (max-width:640px){.legal h1{font-size:1.75rem}}

/* Pagina de error */
.error{flex:1;display:grid;place-items:center;text-align:center;padding:clamp(3rem,10vh,6rem) 0}
.error h1{font-size:clamp(2rem,1.5rem + 2.5vw,3.25rem);font-weight:800;letter-spacing:-.03em;margin:0 0 .75rem}
.error p{color:var(--ink-soft);margin:0 auto 2rem;max-width:44ch}

/* Marcador visible de dato pendiente del cliente */
.todo{color:#E8C37A;border-bottom:1px dotted rgba(232,195,122,.7);font-style:italic}

/* ============================================================
   10. Movimiento reducido: se respeta siempre
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  /* Sin animacion, todo tiene que quedar en su sitio y visible */
  .soon__mark,.soon .eyebrow,.soon h1,.soon__sub,.soon__form{
    opacity:1;transform:none;clip-path:none
  }
  .soon__pulse,.soon__logo::after{display:none}
}