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

: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 (nebulosa de la referencia) */
  --violet:      #5B4BE0;
  --violet-soft: rgba(91, 75, 224, .30);
  --teal-soft:   rgba(128, 208, 199, .16);

  /* Superficies */
  --bg:          #05070B;
  --bg-2:        #080B12;
  --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:        1120px;
  --gutter:      clamp(1.25rem, 5vw, 2.5rem);
  --r-lg:        26px;
  --r-md:        16px;
  --r-sm:        12px;

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

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

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

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:4px}

.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;
}

/* ============================================================
   1. Loader animado del logo
   ============================================================ */

.loader{
  position:fixed;inset:0;z-index:300;
  display:grid;place-items:center;
  background:radial-gradient(60% 50% at 50% 45%, #0B1020 0%, var(--bg) 70%);
  animation:loader-out .5s var(--ease) 2.05s forwards;
}
@keyframes loader-out{
  to{opacity:0;visibility:hidden;pointer-events:none}
}
/* La clase la pone el JS cuando la pagina ya cargo: adelanta la salida. */
.loader.is-done{animation:loader-out .45s var(--ease) forwards}

.loader__stage{position:relative;width:min(420px,78vw);display:grid;place-items:center}

/* Anillo orbital */
.loader__ring{
  position:absolute;width:min(340px,64vw);aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.07);
  border-top-color:rgba(128,208,199,.65);
  border-right-color:rgba(91,75,224,.45);
  animation:spin 2.4s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Trazo de pulso que dibuja el ritmo v-i-m */
.loader__pulse{width:100%;height:auto;overflow:visible}
.loader__pulse .trace{
  fill:none;transform-origin:50% 62%;stroke:url(#pulseGrad);stroke-width:6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1200;stroke-dashoffset:1200;
  filter:drop-shadow(0 0 10px rgba(128,208,199,.45));
  animation:draw .85s var(--ease) .05s forwards, trace-out .3s ease .92s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes trace-out{to{opacity:0;transform:scale(1.05)}}

.loader__dot{fill:#EAFBF7;opacity:0;filter:drop-shadow(0 0 8px rgba(128,208,199,.9))}
@supports (offset-path: path("M0 0 L1 1")){
  .loader__dot{
    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:travel .85s var(--ease) .05s forwards;
  }
}
@keyframes travel{
  0%{offset-distance:0%;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{offset-distance:100%;opacity:0}
}

/* Logo: entra con un barrido de mascara y luego un brillo que lo recorre */
.loader__logo{
  position:absolute;width:min(300px,58vw);
  animation:logo-in .6s var(--ease) 1s both;
}
.loader__logo img{width:100%}
@keyframes logo-in{
  from{opacity:0;transform:scale(.94);clip-path:inset(0 100% 0 0)}
  to{opacity:1;transform:scale(1);clip-path:inset(0 0 0 0)}
}
.loader__logo::after{
  /* inset:0 + mask al 100%: la mascara tiene que medir EXACTO lo mismo que la
     imagen de abajo, o el barrido deja un fantasma del logo desplazado. */
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 44%,rgba(255,255,255,.9) 50%,transparent 56%);
  background-size:260% 100%;background-repeat:no-repeat;
  -webkit-mask:url("../img/VIM-Longevity-Logo-final.png") 0 0/100% 100% no-repeat;
  mask:url("../img/VIM-Longevity-Logo-final.png") 0 0/100% 100% no-repeat;
  animation:shine .7s ease 1.5s both;
}
@keyframes shine{
  from{background-position:180% 0;opacity:0}
  30%{opacity:1}
  to{background-position:-80% 0;opacity:0}
}

/* ============================================================
   2. Fondo ambiental: glows, orbitas y destellos
   ============================================================ */

.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:-38%;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:-32%;left:50%;transform:translateX(-50%);
  background:radial-gradient(circle,var(--teal-soft) 0%,transparent 65%);
}
.bg__orbits{
  position:absolute;top:50%;left:50%;
  width:min(1500px,190vw);transform:translate(-50%,-52%);
  opacity:.5;
}
.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
   ============================================================ */

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

.site-header{padding:clamp(1.25rem,3vw,2rem) 0}
.site-header__inner{display:flex;align-items:center;gap:1rem}
.brand{display:inline-flex;align-items:center}
.brand img{width:clamp(132px,14vw,172px)}  /* el lockup trae la bajada LONGEVITY
   en ~#F0F0F0 y muy pequena: por debajo de ~130px de ancho deja de leerse. */
.brand:hover{text-decoration:none;opacity:.85}
.site-header .btn{margin-left:auto}

/* ============================================================
   4. Botones y chips
   ============================================================ */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.4rem;border:1px solid var(--line-strong);border-radius:999px;
  background:var(--card);color:var(--ink);
  font:inherit;font-weight:600;font-size:.925rem;line-height:1;
  cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.btn:hover{background:var(--card-2);border-color:rgba(255,255,255,.28);text-decoration:none}
.btn:active{transform:translateY(1px)}

.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{filter:brightness(1.08);background:var(--brand-grad)}
.btn--send svg{width:20px;height:20px}

.chips{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;border:0;margin:0;padding:0;min-width:0}
.chips__label{font-size:.85rem;color:var(--ink-dim);padding:0;margin-right:.25rem}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.chip span{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem .85rem;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.03);color:var(--ink-soft);
  font-size:.85rem;font-weight:500;transition:all .2s ease;
}
.chip:hover span{border-color:var(--line-strong);color:var(--ink)}
.chip input:checked + span{
  background:#fff;border-color:#fff;color:#0A1116;font-weight:700;
}
.chip input:focus-visible + span{outline:2px solid var(--mint);outline-offset:2px}

/* ============================================================
   5. Hero
   ============================================================ */

.hero{flex:1;display:flex;align-items:center;padding:clamp(2rem,7vh,5rem) 0 clamp(3rem,8vh,5rem)}
.hero__inner{width:100%;text-align:center}

.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  margin:0 0 1.5rem;padding:.4rem .9rem .4rem .7rem;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);
  font-size:.78rem;font-weight:600;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)}}

.hero h1{
  margin:0 0 1.1rem;
  font-size:clamp(2.15rem,1.5rem + 3.6vw,4.15rem);
  font-weight:800;line-height:1.04;letter-spacing:-.035em;
}
.hero h1 em{
  font-style:normal;
  background:var(--brand-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__sub{
  margin:0 auto;max-width:52ch;
  color:var(--ink-soft);font-size:clamp(1rem,.95rem + .35vw,1.185rem);line-height:1.65;
}

/* ============================================================
   6. Caja del formulario (estilo "composer" de la referencia)
   ============================================================ */

.composer{
  position:relative;margin:clamp(2.25rem,5vw,3.25rem) auto 0;
  max-width:720px;text-align:left;
  padding:1.15rem 1.15rem 1rem;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:
    radial-gradient(120% 130% at 50% 120%, rgba(91,75,224,.14) 0%, transparent 60%),
    var(--card);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(12px);
}
.composer__fields{display:grid;gap:.6rem;grid-template-columns:1fr 1fr}
.field{position:relative;display:flex;align-items:center;gap:.6rem;
  padding:.85rem 1rem;border:1px solid transparent;border-radius:var(--r-md);
  background:rgba(255,255,255,.035);transition:border-color .2s ease,background .2s ease}
.field:focus-within{border-color:rgba(128,208,199,.5);background:rgba(255,255,255,.055)}
.field svg{width:17px;height:17px;flex:none;color:var(--ink-dim)}
.field input{
  width:100%;min-width:0;border:0;background:none;padding:0;
  font:inherit;font-size:.975rem;color:var(--ink);
}
.field input::placeholder{color:var(--ink-dim)}
.field input:focus{outline:none}
.field--full{grid-column:1 / -1}

.composer__bar{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.06);
}
.composer__bar .btn--send{margin-left:auto}

.composer__note{
  margin:1.1rem auto 0;max-width:56ch;
  font-size:.82rem;line-height:1.5;color:var(--ink-dim);text-align:center;
}

.form-msg{
  margin:1rem 0 0;padding:.85rem 1rem;border-radius:var(--r-md);
  border:1px solid rgba(128,208,199,.35);background:rgba(128,208,199,.09);
  color:var(--mint);font-size:.9rem;
}
.form-msg[hidden]{display:none}

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

.site-footer{
  padding:1.75rem 0 2rem;border-top:1px solid rgba(255,255,255,.06);
  font-size:.85rem;color:var(--ink-dim);
}
.site-footer__inner{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;align-items:center}
.site-footer p{margin:0}
.site-footer a{color:var(--ink-soft)}
.site-footer a:hover{color:var(--ink)}

/* ============================================================
   8. 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}

/* ============================================================
   9. Entrada del contenido (despues del loader)
   ============================================================ */

.rise{animation:rise .75s var(--ease) both}
.rise--1{animation-delay:1.8s}
.rise--2{animation-delay:1.9s}
.rise--3{animation-delay:2s}
.rise--4{animation-delay:2.1s}
.rise--5{animation-delay:2.2s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Si el JS adelanta el cierre del loader, el contenido no espera. */
.is-loaded .rise{animation-delay:.05s}

/* ============================================================
   12. Secciones de contenido (servicio y oferta)
   ============================================================ */

.section{padding:clamp(3rem,8vw,5.5rem) 0;border-top:1px solid rgba(255,255,255,.06)}
.section__head{max-width:60ch;margin:0 auto clamp(2rem,4vw,3rem);text-align:center}
.section h2{
  margin:0 0 .8rem;
  font-size:clamp(1.6rem,1.25rem + 1.8vw,2.5rem);
  font-weight:800;line-height:1.1;letter-spacing:-.03em;
}
.section h2 em{
  font-style:normal;background:var(--brand-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.section__head p{margin:0;color:var(--ink-soft)}

.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.card{
  padding:1.5rem;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--card);
}
.card h3{margin:0 0 .5rem;font-size:1.075rem;font-weight:700;letter-spacing:-.01em}
.card p{margin:0;color:var(--ink-soft);font-size:.95rem}
.card__num{
  display:inline-grid;place-items:center;width:34px;height:34px;margin-bottom:1rem;
  border-radius:50%;background:rgba(128,208,199,.12);border:1px solid rgba(128,208,199,.28);
  color:var(--mint);font-size:.85rem;font-weight:700;
}

/* Oferta: lo que el visitante recibe si deja sus datos */
.offer{
  max-width:760px;margin:clamp(2rem,4vw,3rem) auto 0;
  padding:clamp(1.5rem,3vw,2.25rem);text-align:center;
  border:1px solid rgba(128,208,199,.3);border-radius:var(--r-lg);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(128,208,199,.12) 0%, transparent 62%),
    var(--card);
}
.offer h3{margin:0 0 .6rem;font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem);font-weight:800;letter-spacing:-.02em}
.offer p{margin:0 auto;max-width:52ch;color:var(--ink-soft)}
.offer .btn{margin-top:1.5rem}
.offer .btn--primary{background:var(--brand-grad);color:#04141A;border:0;font-weight:700}
.offer .btn--primary:hover{filter:brightness(1.08)}

/* Marcador visible de copy pendiente. Se quita al llegar el brief. */
.todo{
  color:#E8C37A;border-bottom:1px dotted rgba(232,195,122,.7);
  font-style:italic;
}
.pending{
  display:inline-block;margin:.75rem auto 0;padding:.35rem .75rem;
  border:1px dashed rgba(232,195,122,.45);border-radius:999px;
  color:#E8C37A;font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}

/* Etiqueta de estado para producto que todavia no se vende */
.badge{
  display:inline-block;margin-left:.5rem;padding:.2rem .55rem;vertical-align:middle;
  border:1px solid rgba(232,195,122,.4);border-radius:999px;
  background:rgba(232,195,122,.1);color:#E8C37A;
  font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}

/* Cuatro segmentos: 2x2 en escritorio para que ninguna tarjeta quede huerfana */
.cards--4{grid-template-columns:1fr}
@media (min-width:720px){.cards--4{grid-template-columns:repeat(2,1fr)}}

/* Como funciona: pasos numerados */
.steps__head{
  margin:clamp(3.5rem,7vw,5rem) 0 0;text-align:center;
  font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);font-weight:800;letter-spacing:-.02em;
}
.steps{
  display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:clamp(1.5rem,3vw,2.25rem);
}
.step{padding-top:1.25rem;border-top:2px solid rgba(128,208,199,.35)}
.step__n{
  display:block;margin-bottom:.6rem;
  color:var(--mint);font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.step h3{margin:0 0 .4rem;font-size:1.05rem;font-weight:700}
.step p{margin:0;color:var(--ink-soft);font-size:.95rem}

/* Aviso legal de producto. Obligatorio: nada de claims medicos sin respaldo. */
.disclaimer{
  max-width:76ch;margin:clamp(2rem,4vw,3rem) auto 0;
  padding:1.1rem 1.25rem;
  border:1px solid var(--line);border-left:3px solid var(--ink-dim);border-radius:var(--r-md);
  background:rgba(255,255,255,.02);
  color:var(--ink-dim);font-size:.83rem;line-height:1.6;text-align:left;
}
.disclaimer strong{color:var(--ink-soft)}

/* El mismo aviso, condensado, en el pie de todas las paginas */
.site-footer__legal{
  margin:0 0 1.25rem;padding-bottom:1.25rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  color:var(--ink-dim);font-size:.78rem;line-height:1.6;max-width:80ch;
}

/* ============================================================
   13. Consentimiento del formulario (requisito A2P 10DLC)
   ============================================================ */

.consent{
  display:flex;gap:.7rem;align-items:flex-start;
  margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.06);
}
.consent input{
  flex:none;width:19px;height:19px;margin:.15rem 0 0;
  accent-color:var(--teal);cursor:pointer;
}
.consent__text{font-size:.8rem;line-height:1.55;color:var(--ink-dim)}
.consent__text a{color:var(--ink-soft);text-decoration:underline}
.consent__text a:hover{color:var(--mint)}
.consent__text strong{color:var(--ink-soft);font-weight:700}

/* ============================================================
   14. 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}

/* ============================================================
   10. Responsive
   ============================================================ */

@media (max-width:640px){
  .legal h1{font-size:1.75rem}
  .card{padding:1.25rem}
  .composer{padding:1rem}
  .composer__fields{grid-template-columns:1fr}
  .composer__bar{gap:.75rem}
  .composer__bar .btn--send{width:46px;height:46px}
  .chips{width:100%}
  .chips__label{width:100%;margin:0 0 .1rem}
  .site-footer__inner{justify-content:center;text-align:center}
}

/* ============================================================
   11. Movimiento reducido (se respeta siempre)
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  .loader{display:none}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .rise{opacity:1;transform:none}
}