/* Vethos IA — landing de pre-lanzamiento
   Paleta oficial: navy #072040 / #072540, cian #07c7f2 / #05dbf2 */

:root{
  --navy-abyss:#041220;
  --navy:#072040;
  --navy-700:#072540;
  --cyan:#07c7f2;
  --cyan-bright:#05dbf2;
  --white:#ffffff;
  --ink:#0d1b26;
  --ink-soft:#56656f;
  --ink-faint:#8996a1;
  --on-dark:#ffffff;
  --on-dark-soft:#a9c6dc;
  --on-dark-faint:#7d9db8;
  --glass:rgba(255,255,255,0.07);
  --glass-line:rgba(255,255,255,0.14);
  --wa:#25d366;
  --wa-deep:#0f7a41;
  --danger:#ff8a8a;

  --font-ui:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"Cascadia Code","Consolas","SF Mono",monospace;

  --radius-sm:9px;
  --radius-md:15px;
  --radius-lg:20px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-ui);
  line-height:1.55;
  color:var(--on-dark);
  background:var(--navy-abyss);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
h1,h2,h3{margin:0;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}

.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;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--white);color:var(--navy);
  padding:10px 16px;border-radius:0 0 var(--radius-sm) 0;
  font-weight:600;text-decoration:none;
}
.skip-link:focus{left:0;}

.page{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  background:
    radial-gradient(1100px 720px at 74% 6%, rgba(7,199,242,0.22), transparent 62%),
    radial-gradient(820px 620px at 6% 86%, rgba(5,219,242,0.10), transparent 58%),
    linear-gradient(168deg, #041220 0%, #072040 30%, #08355c 62%, #0a4c78 100%);
}
.wrap{
  position:relative;z-index:1;
  max-width:1160px;margin:0 auto;
  padding-left:clamp(1.1rem,3.5vw,2.6rem);
  padding-right:clamp(1.1rem,3.5vw,2.6rem);
}

/* ---------- barra superior ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:clamp(1.1rem,2.4vw,1.7rem);
  padding-bottom:clamp(0.9rem,2vw,1.4rem);
}
.logo{height:clamp(58px,6vw,72px);width:auto;}
.badge{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:0.13em;text-transform:uppercase;color:#d6f4ff;
  background:var(--glass);border:1px solid var(--glass-line);
  padding:7px 15px;border-radius:999px;white-space:nowrap;
  backdrop-filter:blur(6px);
}
.badge .live{
  width:6px;height:6px;border-radius:50%;background:var(--cyan-bright);
  box-shadow:0 0 0 3px rgba(5,219,242,0.22), 0 0 12px rgba(5,219,242,0.9);
}

/* ---------- rejilla principal ---------- */
.stage{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);
  column-gap:clamp(1.4rem,3vw,2.8rem);
  row-gap:clamp(1.4rem,3vw,2.4rem);
  align-items:start;
  padding-top:clamp(0.5rem,1.5vw,1.4rem);
  padding-bottom:clamp(2rem,4vw,3.2rem);
}
/* El HTML va en orden de celular (texto, video, formulario, foto).
   En pantalla grande se recolocan a mano para no depender de ese orden. */
.stage > .copy     {grid-column:1;grid-row:1;align-self:center;}
.stage > .portrait {grid-column:2;grid-row:1;align-self:center;}
.stage > .video    {grid-column:1;grid-row:2;}
.stage > .form-card{grid-column:2;grid-row:2;}

@media (max-width:880px){
  .stage{display:flex;flex-direction:column;align-items:stretch;}
  .stage > .copy,
  .stage > .video,
  .stage > .form-card,
  .stage > .portrait{
    width:100%;align-self:stretch;flex:0 0 auto;
    grid-column:auto;grid-row:auto;
  }
  .stage > .copy{order:1;}
  .stage > .video{order:2;}
  .stage > .form-card{order:3;}
  .stage > .portrait{order:4;aspect-ratio:5/4;border-radius:var(--radius-md);}
  .portrait img{object-position:50% 30%;}
  .portrait-ring{border-radius:var(--radius-md);}
}

/* ---------- texto principal ---------- */
.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:0.15em;text-transform:uppercase;color:#6fd9f5;
  margin-bottom:1.1rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--cyan);border-radius:2px;flex:none;}

h1{
  font-family:var(--font-display);
  font-size:clamp(31px,5.4vw,58px);
  line-height:1.06;font-weight:700;letter-spacing:-0.028em;
  margin-bottom:1.15rem;text-wrap:balance;
}
.hl{color:var(--cyan-bright);text-shadow:0 0 34px rgba(5,219,242,0.45);}

.lede{
  font-size:clamp(15px,1.5vw,18.5px);line-height:1.62;
  color:var(--on-dark-soft);margin-bottom:1.6rem;max-width:52ch;
}
.lede b{color:var(--white);font-weight:600;}

.chips{display:flex;flex-wrap:wrap;gap:9px;}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;color:#d9ecf8;
  background:var(--glass);border:1px solid var(--glass-line);
  padding:9px 14px;border-radius:10px;backdrop-filter:blur(6px);
}
.chip svg{width:15px;height:15px;color:var(--cyan);flex:none;stroke-width:2;}

/* ---------- retrato ---------- */
.portrait{
  position:relative;margin:0;
  border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:4/5;isolation:isolate;
}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;}
.portrait::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 50% 40%, transparent 26%, rgba(8,53,92,0.30) 62%, rgba(4,18,32,0.86) 100%),
    linear-gradient(0deg, rgba(4,18,32,0.92) 0%, transparent 34%);
}
.portrait-ring{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,0.16);
}
.portrait-glow{
  position:absolute;inset:-14% -10% -6%;z-index:0;border-radius:50%;
  background:radial-gradient(circle, rgba(7,199,242,0.26), transparent 62%);
  filter:blur(28px);
}
.portrait-cap{
  position:absolute;z-index:3;
  left:clamp(0.9rem,2vw,1.3rem);right:clamp(0.9rem,2vw,1.3rem);
  bottom:clamp(0.9rem,2vw,1.2rem);
  display:flex;align-items:center;gap:10px;
}
.pulse{
  width:32px;height:32px;border-radius:50%;flex:none;
  background:rgba(5,219,242,0.16);border:1px solid rgba(5,219,242,0.42);
  display:flex;align-items:center;justify-content:center;color:var(--cyan-bright);
}
.pulse svg{width:16px;height:16px;stroke-width:2;}
.portrait-cap b{display:block;font-size:12.5px;font-weight:700;color:#fff;line-height:1.25;}
.portrait-cap small{
  display:block;font-family:var(--font-mono);font-size:10.5px;
  color:#8fd9ef;letter-spacing:0.05em;text-transform:uppercase;
}

/* ---------- video ---------- */
.video{
  position:relative;border-radius:var(--radius-md);overflow:hidden;
  background:linear-gradient(155deg,rgba(4,18,32,0.86),rgba(10,76,120,0.55));
  aspect-ratio:16/10;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--glass-line);
  box-shadow:0 18px 44px -16px rgba(2,10,20,0.72);
}
/* Al reproducir, el cuadro toma la proporción real del video (16:9)
   para que no se recorte ni queden franjas negras. */
.video.reproduciendo{aspect-ratio:16/9;}

.wavebg{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:clamp(4px,0.9vw,9px);padding:0 6%;opacity:0.34;
}
.wavebg span{flex:1;max-width:11px;background:var(--cyan);border-radius:99px;}
.video-glow{
  position:absolute;width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(7,199,242,0.34),transparent 66%);filter:blur(8px);
}
.play{
  position:relative;
  width:clamp(60px,7vw,78px);height:clamp(60px,7vw,78px);
  border-radius:50%;background:var(--white);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 30px rgba(2,10,20,0.62);
  transition:transform 180ms cubic-bezier(0.16,1,0.3,1);
}
.play:hover{transform:scale(1.06);}
.play:focus-visible{outline:3px solid var(--cyan-bright);outline-offset:4px;}
.play svg{width:24px;height:26px;margin-left:4px;fill:var(--navy);stroke:none;}
.video-label{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:clamp(0.9rem,1.6vw,1.15rem) clamp(1rem,2vw,1.4rem);
  background:linear-gradient(0deg,rgba(3,13,24,0.92),transparent);
}
.video-label b{font-size:clamp(12.5px,1.3vw,14.5px);font-weight:600;color:#fff;}
.video-label span{
  font-family:var(--font-mono);font-size:11px;color:#8fd9ef;
  letter-spacing:0.04em;white-space:nowrap;
}

.video-modal{
  width:min(1100px,92vw);border:none;padding:0;background:transparent;
  color:var(--on-dark);overflow:visible;
}
.video-modal::backdrop{background:rgba(3,11,20,0.88);backdrop-filter:blur(4px);}
.video-holder video{width:100%;border-radius:var(--radius-md);display:block;background:#000;}
.video-close{
  position:absolute;top:-46px;right:0;
  width:36px;height:36px;border-radius:50%;cursor:pointer;
  background:var(--glass);border:1px solid var(--glass-line);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.video-close svg{width:18px;height:18px;stroke-width:2.2;}
.video-close:focus-visible{outline:3px solid var(--cyan-bright);outline-offset:3px;}

/* ---------- formulario ---------- */
.form-card{
  background:var(--white);color:var(--ink);
  border-radius:var(--radius-md);
  padding:clamp(1.2rem,2.2vw,1.7rem);
  box-shadow:0 24px 56px -18px rgba(2,10,20,0.62), 0 2px 4px rgba(2,10,20,0.20);
}
.form-head{
  display:flex;align-items:flex-start;gap:11px;
  padding-bottom:1.05rem;margin-bottom:1.05rem;
  border-bottom:1px solid rgba(7,32,64,0.08);
}
.form-mark{
  width:36px;height:36px;border-radius:var(--radius-sm);flex:none;
  background:linear-gradient(140deg,var(--cyan-bright),var(--cyan));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px -3px rgba(7,199,242,0.6);
}
.form-mark svg{width:18px;height:18px;fill:#04121f;stroke:none;}
.form-head h2{
  font-family:var(--font-display);font-size:clamp(17px,1.8vw,20px);
  font-weight:700;letter-spacing:-0.015em;color:var(--navy);margin-bottom:2px;
}
.form-head p{font-size:12.5px;color:var(--ink-faint);line-height:1.45;}

.fields{display:flex;flex-direction:column;gap:9px;}
.field{position:relative;}
.field .ico{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;pointer-events:none;color:var(--ink-faint);
}
.field .chev{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;pointer-events:none;color:var(--ink-faint);stroke-width:2.2;
}
.field input,.field select{
  width:100%;height:46px;
  font-family:var(--font-ui);font-size:14.5px;color:var(--ink);
  background:#fbfcfd;border:1px solid rgba(7,32,64,0.12);
  border-radius:var(--radius-sm);padding:0 14px 0 40px;appearance:none;
  transition:border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.field input::placeholder{color:var(--ink-faint);}
.field select{cursor:pointer;padding-right:38px;color:var(--ink);}
.field select:invalid{color:var(--ink-faint);}
.field input:hover,.field select:hover{border-color:rgba(7,32,64,0.22);background:#fff;}
.field input:focus,.field select:focus{
  outline:none;background:#fff;border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(7,199,242,0.18);
}
.field.invalid input,.field.invalid select{
  border-color:#e05252;box-shadow:0 0 0 3px rgba(224,82,82,0.14);
}

.consent{display:flex;align-items:flex-start;gap:9px;margin:11px 0 13px;cursor:pointer;}
.consent input{width:17px;height:17px;margin:2px 0 0;accent-color:var(--cyan);flex:none;cursor:pointer;}
.consent span{font-size:12.5px;line-height:1.45;color:var(--ink-soft);}
.consent a{color:var(--navy);font-weight:600;text-underline-offset:2px;}
.consent.invalid span{color:#c23b3b;}

.form-error{
  font-size:12.5px;line-height:1.45;color:#c23b3b;
  background:#fdeced;border:1px solid rgba(194,59,59,0.22);
  border-radius:var(--radius-sm);padding:9px 12px;margin-bottom:11px;
}

.submit{
  width:100%;height:52px;
  font-family:var(--font-ui);font-size:14.5px;font-weight:700;
  letter-spacing:0.055em;text-transform:uppercase;color:#04121f;
  background:linear-gradient(135deg,var(--cyan-bright),var(--cyan));
  border:none;border-radius:var(--radius-sm);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 8px 22px -8px rgba(7,199,242,0.85);
  transition:filter 160ms ease, transform 120ms ease, box-shadow 160ms ease;
}
.submit:hover:not(:disabled){filter:brightness(1.07);box-shadow:0 12px 28px -8px rgba(7,199,242,0.95);}
.submit:active:not(:disabled){transform:translateY(1px);}
.submit:focus-visible{outline:3px solid var(--navy);outline-offset:3px;}
.submit:disabled{cursor:progress;filter:saturate(0.55) brightness(0.98);}
.submit-arrow{width:17px;height:17px;stroke-width:2.2;transition:transform 180ms cubic-bezier(0.16,1,0.3,1);}
.submit:hover:not(:disabled) .submit-arrow{transform:translateX(4px);}

.secure{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:11.5px;color:var(--ink-faint);margin-top:11px;
}
.secure svg{width:13px;height:13px;stroke-width:2;}

.form-done{text-align:center;padding:0.6rem 0 0.2rem;}
.done-mark{
  width:52px;height:52px;border-radius:50%;margin:0 auto 0.9rem;
  background:#e6faf1;border:1px solid rgba(18,140,74,0.28);
  display:flex;align-items:center;justify-content:center;color:#0f7a41;
}
.done-mark svg{width:24px;height:24px;stroke-width:2.4;}
.form-done h3{
  font-family:var(--font-display);font-size:19px;font-weight:700;
  color:var(--navy);margin-bottom:5px;
}
.form-done p{font-size:13.5px;color:var(--ink-soft);line-height:1.55;}

/* ---------- contacto ---------- */
.contact{
  margin-top:1.1rem;padding-top:1.1rem;
  border-top:1px solid rgba(7,32,64,0.08);text-align:center;
}
.contact > p{font-size:13px;color:var(--ink-soft);margin-bottom:10px;}
.wa{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;height:48px;
  font-size:14px;font-weight:600;color:#0b3d22;
  background:#e8fbef;border:1px solid rgba(18,140,74,0.28);
  border-radius:var(--radius-sm);text-decoration:none;
  transition:background 150ms ease, border-color 150ms ease;
}
.wa:hover{background:#d6f7e2;border-color:rgba(18,140,74,0.48);}
.wa:focus-visible{outline:3px solid var(--wa);outline-offset:3px;}
.wa-icon{
  width:26px;height:26px;border-radius:50%;background:var(--wa);flex:none;
  display:flex;align-items:center;justify-content:center;
}
.wa-icon svg{width:15px;height:15px;fill:#fff;stroke:none;}
.wa b{display:block;font-weight:700;font-size:13.5px;line-height:1.2;}
.wa small{display:block;font-family:var(--font-mono);font-size:11px;color:var(--wa-deep);letter-spacing:0.02em;}

.mail{
  display:inline-flex;align-items:center;gap:7px;margin-top:11px;
  font-size:12.5px;font-weight:500;color:var(--ink-soft);
  text-decoration:none;border-bottom:1px solid rgba(7,32,64,0.16);padding-bottom:1px;
  transition:color 140ms ease, border-color 140ms ease;
}
.mail:hover{color:var(--navy);border-color:var(--cyan);}
.mail:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:3px;}
.mail svg{width:15px;height:15px;color:var(--ink-faint);flex:none;}

/* ---------- beneficios ---------- */
.benefits-band{
  border-top:1px solid rgba(255,255,255,0.09);
  border-bottom:1px solid rgba(255,255,255,0.09);
  background:rgba(4,18,32,0.24);
}
.benefits{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));
  gap:clamp(1rem,2.4vw,2.2rem);
  padding-top:clamp(1.6rem,3vw,2.4rem);
  padding-bottom:clamp(1.6rem,3vw,2.4rem);
}
.benefit{display:flex;align-items:flex-start;gap:13px;}
.benefit-ico{
  width:42px;height:42px;border-radius:11px;flex:none;
  background:rgba(7,199,242,0.13);border:1px solid rgba(7,199,242,0.32);
  display:flex;align-items:center;justify-content:center;color:var(--cyan-bright);
}
.benefit-ico svg{width:20px;height:20px;}
.benefit b{
  display:block;font-size:14.5px;font-weight:700;color:#fff;
  letter-spacing:-0.01em;margin-bottom:2px;
}
.benefit > span > span{display:block;font-size:13px;line-height:1.5;color:var(--on-dark-soft);}

/* ---------- pie ---------- */
.foot{
  padding-top:clamp(1.7rem,3vw,2.4rem);
  padding-bottom:clamp(1.9rem,3.4vw,2.8rem);
  text-align:center;
}
.foot h2{
  font-family:var(--font-display);font-size:clamp(16px,1.9vw,21px);
  font-weight:700;letter-spacing:-0.015em;color:#fff;margin-bottom:5px;
}
.foot > p{font-size:13.5px;color:var(--on-dark-soft);}
.legal{margin-top:1.1rem;font-size:12px;color:var(--on-dark-faint);}
.legal a{color:var(--on-dark-soft);text-underline-offset:2px;}
.legal a:hover{color:var(--cyan-bright);}

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