/* Aizen Agency. Hoja principal. */
:root{
  --bg:#070D1A; --bg-2:#0B1322; --bg-3:#111B2E; --bg-4:#17233A;
  --ink:#F3F6FB; --ink-2:#BAC4D4; --ink-3:#95A1B5;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.20);
  --accent:#1E6BFF; --accent-hover:#1A5EE6; --accent-press:#1550C4; --accent-ink:#7FAEFF; --focus:#6FA3FF;
  --sp-a:#0066FF; --sp-b:#00D4FF; --sp-c:#00FF88; --sp-d:#7B61FF;
  --danger:#FF9B93;
  --paper:#F4F6FA;
  --r-panel:28px; --r-input:12px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --w:1180px;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);
  font-family:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:1.0625rem;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  accent-color:var(--accent);caret-color:var(--accent);scrollbar-color:#2A3650 var(--bg)}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3{font-weight:600;text-wrap:balance}
p{text-wrap:pretty}
.skip{position:absolute;left:16px;top:-48px;background:var(--accent);color:#fff;padding:10px 14px;border-radius:999px;z-index:100;font-weight:500}
.skip:focus{top:12px}
.wrap{width:min(var(--w),100% - 2*clamp(20px,5vw,48px));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Firma: espectro de scroll */
.spectrum{position:fixed;top:0;left:0;width:100%;height:2px;z-index:70;
  background:linear-gradient(90deg,var(--sp-a),var(--sp-b),var(--sp-c));
  transform-origin:left center;transform:scaleX(1);pointer-events:none}
@supports (animation-timeline: scroll()){
  .spectrum{animation-name:spectrum-grow;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(root)}
  @keyframes spectrum-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* Navegación */
.nav{position:fixed;top:0;left:0;right:0;height:56px;z-index:60;
  background:rgba(7,13,26,.76);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--line)}
.nav-in{height:100%;display:flex;align-items:center;justify-content:space-between;position:relative}
.wordmark{font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;display:inline-flex;align-items:baseline;gap:.35em}
.wordmark span{font-weight:400;color:var(--ink-2)}
.links{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:2rem;font-size:.9375rem;color:var(--ink-2)}
.links a{position:relative;padding:6px 0;transition:color 160ms ease}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 220ms var(--ease-out)}
.links a[data-active="true"]{color:var(--ink)}
.links a[data-active="true"]::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){.links a:hover{color:var(--ink)}}
.nav-right{display:flex;align-items:center;gap:.75rem}
.menu-btn{display:none;background:none;border:1px solid var(--line-2);color:var(--ink);font:inherit;font-size:.9375rem;padding:7px 14px;border-radius:999px;cursor:pointer;transition:transform 160ms var(--ease-out)}
.menu-btn:active{transform:scale(.97)}
.menu{display:none;position:fixed;top:64px;right:clamp(20px,5vw,48px);z-index:65;background:var(--bg-3);border:1px solid var(--line-2);border-radius:16px;padding:8px;min-width:210px;
  transform-origin:top right;transform:scale(.96);opacity:0;transition:transform 180ms var(--ease-out),opacity 180ms var(--ease-out);
  box-shadow:0 20px 50px -20px rgba(3,8,20,.8)}
.menu a{display:block;padding:12px 14px;border-radius:10px;font-size:1rem}
.menu a:hover{background:rgba(255,255,255,.06)}
.menu[data-open="true"]{display:block;transform:scale(1);opacity:1}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;white-space:nowrap;
  background:var(--accent);color:#fff;font-weight:500;font-size:.9375rem;line-height:1;
  padding:12px 20px;border-radius:999px;border:0;cursor:pointer;font-family:inherit;
  transition:background-color 160ms ease,transform 160ms var(--ease-out),box-shadow 200ms ease;will-change:transform}
.btn:active{transform:scale(.97);background:var(--accent-press)}
.btn[disabled]{opacity:.6;cursor:default}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--accent-hover);box-shadow:0 10px 30px -10px rgba(30,107,255,.55)}}
.btn.lg{font-size:1.0625rem;padding:15px 26px}
.btn.ghost{background:none;border:1px solid var(--line-2);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.btn.ghost:hover{background:rgba(255,255,255,.06);box-shadow:none}}
.link{display:inline-flex;align-items:center;gap:.3em;color:var(--accent-ink);font-weight:500;transition:gap 160ms var(--ease-out)}
.link svg{width:.7em;height:.7em;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.link:hover{gap:.5em}}

/* Hero */
.hero{position:relative;padding-top:calc(56px + clamp(56px,8vw,96px));text-align:center;overflow:hidden}
.field{position:absolute;inset:0 0 auto 0;height:min(78vh,760px);z-index:0;pointer-events:none;
  contain:strict;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%)}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.375rem);line-height:1.02;letter-spacing:-.032em;max-width:30ch;margin-inline:auto}
.hero h1 .w{display:inline-block;animation:rise 520ms var(--ease-out) both;animation-delay:calc(var(--i) * 45ms)}
.hero-sub{font-size:clamp(1.125rem,1.6vw,1.3125rem);color:var(--ink-2);max-width:42ch;margin:1.5rem auto 0;animation:rise 520ms var(--ease-out) both;animation-delay:280ms}
.hero-cta{display:flex;justify-content:center;align-items:center;gap:1.75rem;margin-top:2.25rem;flex-wrap:wrap;animation:rise 520ms var(--ease-out) both;animation-delay:340ms}
@keyframes rise{from{transform:translateY(10px)}to{transform:none}}
.hero-visual{margin-top:clamp(48px,6vw,80px);border-radius:var(--r-panel);overflow:hidden;aspect-ratio:16/9;position:relative;background:var(--bg-3)}
.hero-visual img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;animation:settle 1200ms var(--ease-out) both;will-change:transform}
.hero-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,13,26,.05) 55%,rgba(7,13,26,.55) 100%);pointer-events:none}
@keyframes settle{from{transform:scale(1.04)}to{transform:scale(1)}}
/* Cuando la animación de entrada termina, se libera la capa reservada. */
.hero-visual img{animation-fill-mode:both}

/* Secciones */
section{padding-block:clamp(80px,10vw,136px)}
h2{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.06;letter-spacing:-.028em;max-width:22ch}
.lede{font-size:clamp(1.0625rem,1.4vw,1.25rem);color:var(--ink-2);max-width:56ch;margin-top:1.1rem}
h3{font-size:1.375rem;letter-spacing:-.015em;line-height:1.3}

/* Paneles de servicio */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(40px,5vw,64px)}
.tile{position:relative;overflow:hidden;border-radius:var(--r-panel);background:var(--bg-2);padding:clamp(28px,3.5vw,44px);min-height:460px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;transition:transform 400ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.tile:hover{transform:translateY(-4px)}}
.tile h3{font-size:clamp(1.5rem,2.2vw,1.9rem);letter-spacing:-.022em}
.tile p{color:var(--ink-2);margin-top:.8rem;max-width:40ch}
.tile p strong{color:var(--ink);font-weight:500}
.tile .link{margin-top:1.2rem}
.tile.glow::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 55% at 12% 100%,rgba(0,102,255,.42),transparent 70%),radial-gradient(45% 45% at 40% 108%,rgba(0,212,255,.22),transparent 70%),radial-gradient(35% 35% at 66% 112%,rgba(0,255,136,.16),transparent 70%)}
.tile.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;z-index:-2;opacity:.5}
.tile.photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,13,26,.25),rgba(7,13,26,.94) 68%)}
.bonus{margin-top:16px;border-radius:var(--r-panel);background:var(--bg-2);padding:clamp(28px,3.5vw,44px);display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
.bonus p{font-size:clamp(1.125rem,1.7vw,1.4375rem);letter-spacing:-.012em;max-width:38ch;line-height:1.35}
.bonus .t{font-size:clamp(3rem,6vw,5.5rem);font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}

/* Cuatro áreas */
.pin-wrap{position:relative}
.pin{position:sticky;top:56px;min-height:calc(100vh - 56px);min-height:calc(100dvh - 56px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center;padding-block:clamp(48px,6vw,80px)}
.areas{display:grid;gap:0}
.area{border-top:1px solid var(--line);padding:1.35rem 0 1.5rem;display:grid;grid-template-columns:72px 1fr;gap:1rem;align-items:baseline}
.area .n{font-size:clamp(2.25rem,3.5vw,3rem);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--hue);font-variant-numeric:tabular-nums}
.area h3{font-size:1.25rem}
.area p{color:var(--ink-2);margin-top:.35rem;max-width:34ch}
.area:nth-child(1){--hue:#5B9BFF}.area:nth-child(2){--hue:#3FDDFF}.area:nth-child(3){--hue:#3DF3A0}.area:nth-child(4){--hue:#A48CFF}
@supports (animation-timeline: scroll()){
  @media (min-width:901px){
    .pin-wrap{height:300vh;view-timeline-name:--areas;view-timeline-axis:block}
    .area{opacity:.34;animation:light linear both;animation-timeline:--areas}
    .area:nth-child(1){animation-range:contain 0% contain 8%}
    .area:nth-child(2){animation-range:contain 25% contain 33%}
    .area:nth-child(3){animation-range:contain 50% contain 58%}
    .area:nth-child(4){animation-range:contain 75% contain 83%}
    @keyframes light{from{opacity:.34}to{opacity:1}}
  }
}

/* Caso y demo */
.case{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.case .txt p{color:var(--ink-2);margin-top:1.1rem;max-width:48ch}
.case .status{margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--line);color:var(--ink);max-width:48ch}
.case .status b{font-weight:500}
.demo{border-radius:var(--r-panel);background:var(--bg-2);border:1px solid var(--line);padding:22px;display:grid;gap:14px;min-height:480px;align-content:start}
.demo-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.875rem;color:var(--ink-3);padding-bottom:12px;border-bottom:1px solid var(--line)}
.demo-head b{color:var(--ink);font-weight:500}
.thread{display:grid;gap:10px;align-content:start}
.msg{max-width:82%;padding:11px 14px;border-radius:18px;line-height:1.4;font-size:.9875rem;transform-origin:bottom left;animation:pop 260ms var(--ease-out) both}
.msg.in{background:var(--bg-4);border-bottom-left-radius:6px;justify-self:start}
.msg.out{background:var(--accent);color:#fff;border-bottom-right-radius:6px;justify-self:end;transform-origin:bottom right}
.msg small{display:block;margin-top:4px;font-size:.75rem;opacity:.8}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
.typing{display:inline-flex;gap:4px;padding:14px 16px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-2);animation:blink 900ms ease-in-out infinite}
.typing i:nth-child(2){animation-delay:150ms}.typing i:nth-child(3){animation-delay:300ms}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:.9375rem;color:var(--ink);background:none;border:1px solid var(--line-2);padding:9px 14px;border-radius:999px;cursor:pointer;transition:border-color 160ms ease,background-color 160ms ease,transform 160ms var(--ease-out)}
.chip:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.chip:hover{border-color:var(--accent-ink);background:rgba(30,107,255,.16)}}
.notice{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:.9375rem;color:var(--ink-3);display:flex;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap}
.notice[data-on="true"]{color:#3DF3A0}
.notice button{font:inherit;font-size:.875rem;color:var(--ink-2);background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* Bloque claro */
.paper{background:var(--paper);--ink:#0B1322;--ink-2:#46536B;--ink-3:#5B697F;--line:rgba(11,19,34,.14);--line-2:rgba(11,19,34,.24);--bg-3:#fff;--accent-ink:#0F4FD8;--danger:#B32318;--focus:#0F4FD8;color:var(--ink);color-scheme:light}
.paper ::selection{background:var(--accent);color:#fff}
.paper + .paper{padding-top:0}
.steps{margin-top:clamp(40px,5vw,64px)}
.step{display:grid;grid-template-columns:200px 1fr;gap:1.5rem;padding:1.75rem 0;border-top:1px solid var(--line)}
.step .t{font-size:1.5rem;font-weight:600;letter-spacing:-.025em;line-height:1.3}
.step h3{font-size:1.1875rem}
.step p{color:var(--ink-2);margin-top:.4rem;max-width:56ch}
.honest{margin-top:2.5rem;font-size:clamp(1.125rem,1.7vw,1.4375rem);letter-spacing:-.012em;max-width:38ch;line-height:1.35}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,56px) clamp(40px,5vw,80px);margin-top:clamp(40px,5vw,64px)}
.faq h3{font-size:1.125rem}
.faq p{color:var(--ink-2);margin-top:.5rem;max-width:46ch}

/* Contacto y formulario */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:start}
.contact .lede{margin-bottom:1.75rem}
.after{margin-top:1rem;color:var(--ink-3);font-size:.9375rem}
form{display:grid;gap:1.1rem}
label{display:grid;gap:.45rem;font-size:.9375rem;font-weight:500}
input,textarea{font:inherit;color:var(--ink);background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r-input);padding:12px 14px;width:100%;transition:border-color 160ms ease,box-shadow 160ms ease}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(30,107,255,.3)}
textarea{min-height:110px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{display:none;color:var(--danger);font-size:.875rem;font-weight:400}
label[data-invalid="true"] input,label[data-invalid="true"] textarea{border-color:var(--danger)}
label[data-invalid="true"] .err{display:block}
.form-error{color:var(--danger);font-size:.9375rem;padding:.75rem .9rem;border:1px solid var(--danger);border-radius:var(--r-input);background:rgba(255,155,147,.08)}
.form-error a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.form-foot{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.form-foot small{color:var(--ink-3)}
.form-foot a{text-decoration:underline;text-underline-offset:3px}
.sent{display:none;padding:1.25rem 1.35rem;border:1px solid var(--line-2);border-radius:16px;background:var(--bg-3)}
.sent b{font-weight:500;display:block;margin-bottom:.25rem}
form[data-sent="true"]{display:none}
form[data-sent="true"] + .sent{display:block}

/* Pie */
footer{border-top:1px solid var(--line);padding:3rem 0 2.5rem;color:var(--ink-2);font-size:.9375rem}
.foot{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2rem}
.foot a{transition:color 160ms ease}
@media (hover:hover) and (pointer:fine){.foot a:hover{color:var(--ink)}}
.foot ul{list-style:none;display:grid;gap:.5rem}
.foot-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--line);color:var(--ink-3);font-size:.875rem}
.foot-bottom a{text-decoration:underline;text-underline-offset:3px}

/* Cookies */
.cookies{position:fixed;left:clamp(16px,4vw,28px);right:clamp(16px,4vw,28px);bottom:clamp(16px,4vw,28px);z-index:80;max-width:620px;
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:20px;padding:22px 24px;
  box-shadow:0 24px 70px -24px rgba(3,8,20,.9);display:none}
.cookies[data-show="true"]{display:block;animation:cookie-in 320ms var(--ease-out) both}
@keyframes cookie-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cookies h2{font-size:1.0625rem;letter-spacing:-.01em;max-width:none}
.cookies p{color:var(--ink-2);font-size:.9375rem;margin-top:.4rem}
.cookies p a{text-decoration:underline;text-underline-offset:3px}
.cookies .row{display:flex;gap:.6rem;margin-top:1.1rem;flex-wrap:wrap}

/* Páginas de texto */
.doc{padding-top:calc(56px + clamp(48px,6vw,80px))}
.doc .wrap{max-width:74ch}
.doc h1{font-size:clamp(2rem,4vw,3rem);line-height:1.06;letter-spacing:-.03em}
.doc .updated{color:var(--ink-3);font-size:.9375rem;margin-top:.75rem}
.doc h2{font-size:1.375rem;letter-spacing:-.015em;margin-top:2.75rem;max-width:none}
.doc p,.doc li{color:var(--ink-2);margin-top:.9rem}
.doc ul{margin-top:.5rem;padding-left:1.2rem;display:grid;gap:.3rem}
.doc li{margin-top:0}
.doc strong{color:var(--ink);font-weight:500}
.doc a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.doc .scroll-x{overflow-x:auto;margin-top:1.25rem;-webkit-overflow-scrolling:touch}
.doc table{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:34rem}
.doc th,.doc td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--line);vertical-align:top}
.doc th{color:var(--ink);font-weight:500}
.doc td{color:var(--ink-2)}
@media (max-width:640px){
  .doc .scroll-x{border:1px solid var(--line);border-radius:14px;padding:0 .6rem}
  .doc table{min-width:32rem}
}

/* 404 */
.oops{min-height:calc(100dvh - 56px);display:grid;align-items:center;padding-top:56px}
.oops h1{font-size:clamp(2.25rem,5vw,3.75rem);line-height:1.04;letter-spacing:-.032em;max-width:18ch}
.oops p{color:var(--ink-2);font-size:clamp(1.0625rem,1.4vw,1.25rem);margin-top:1.1rem;max-width:46ch}
.oops .row{display:flex;gap:1rem;margin-top:2rem;flex-wrap:wrap;align-items:center}
.oops .paths{margin-top:2.75rem;padding-top:1.5rem;border-top:1px solid var(--line);display:flex;gap:1.5rem;flex-wrap:wrap;color:var(--ink-2)}

@media (max-width:900px){
  .links{display:none}
  .menu-btn{display:inline-flex}
  .nav .btn{display:none}
  .tiles,.pin,.case,.faq,.contact,.foot{grid-template-columns:1fr}
  .tile{min-height:360px}
  .bonus{grid-template-columns:1fr}
  .hero-visual{aspect-ratio:4/5}
  .pin{position:static;min-height:0;padding-block:0;gap:2rem}
  .step{grid-template-columns:1fr;gap:.5rem}
  .demo{min-height:420px}
  .cookies{padding:20px}
}
html.static .pin-wrap{height:auto}
html.static .area{animation:none;opacity:1}
html.static .pin{position:static;min-height:0}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero h1 .w,.hero-sub,.hero-cta,.hero-visual img,.msg,.cookies[data-show="true"]{animation:none}
  .spectrum{animation:none;transform:scaleX(1)}
  .area{animation:none;opacity:1}
  .menu{transition:opacity 120ms ease}
  .tile{transition:none}
  .typing i{animation:none;opacity:.6}
}