@font-face{font-family:Satoshi;src:url('assets/Satoshi-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:Satoshi;src:url('assets/Satoshi-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;}

  :root{
    --bg:#F8F3ED;
    --bg-alt:#F1EBE4;
    --ink:#3F3437;
    --muted:#736469;
    --line:rgba(63,52,55,.18);
    --line-strong:#355C7D;
    --accent:#355C7D;
    --ease:cubic-bezier(.16,.8,.24,1);
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html{
    scroll-behavior:smooth;
  }

  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Satoshi',-apple-system,sans-serif;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  ::selection{background:var(--ink);color:var(--bg);}

  h1,h2,h3,.display{
    font-family:'Satoshi',sans-serif;
    font-weight:700;
    letter-spacing:-0.02em;
  }

  .mono{
    font-family:'Satoshi',monospace;
    font-weight:700;
    letter-spacing:0.04em;
    text-transform:uppercase;
  }

  a{color:inherit;text-decoration:none;}

  /* ---------- Nav ---------- */
  nav{
    position:fixed;
    top:0;left:0;right:0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:28px 48px;
    z-index:100;
    background:rgba(248,243,237,.94);
    backdrop-filter:blur(14px);
    color:var(--ink);
    border-bottom:1px solid rgba(63,52,55,.08);
  }
  .nav-logo{
    font-size:14px;
    font-weight:700;
    letter-spacing:0.02em;
  }
  .nav-cta{
    font-size:12px;
    font-family:'Satoshi',monospace;
    letter-spacing:0.06em;
    text-transform:uppercase;
    border:1px solid currentColor;
    padding:8px 18px;
    border-radius:100px;
    transition:opacity .4s var(--ease);
  }
  .nav-cta:hover{opacity:.6;}

  section{
    position:relative;
    width:100%;
    padding:160px 48px;
    z-index:2;
  }

  .section-inner{
    max-width:1040px;
    margin:0 auto;
  }

  .divider{
    height:1px;
    background:var(--line);
    width:100%;
  }

  .eyebrow{
    font-size:12px;
    color:var(--muted);
    margin-bottom:24px;
    display:flex;
    align-items:center;
    gap:12px;
  }
  .eyebrow::before{
    content:'';
    width:24px;
    height:1px;
    background:var(--ink);
    display:inline-block;
  }

  /* ---------- Reveal on scroll ---------- */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity 1s var(--ease), transform 1s var(--ease);
  }
  .reveal.is-visible{
    opacity:1;
    transform:translateY(0);
  }
  .reveal-delay-1{transition-delay:.08s;}
  .reveal-delay-2{transition-delay:.16s;}
  .reveal-delay-3{transition-delay:.24s;}
  .reveal-delay-4{transition-delay:.32s;}

  /* ---------- Hero ---------- */
  .hero{
    height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0 24px;
    background:var(--bg);
  }
  .hero-name{
    font-size:clamp(64px,13vw,220px);
    line-height:0.92;
    font-weight:700;
    letter-spacing:-0.04em;
    color:var(--ink);
    opacity:0;
    transform:translateY(18px) scale(.98);
    animation:heroIn 1.4s var(--ease) .2s forwards;
  }
  @keyframes heroIn{
    to{opacity:1;transform:translateY(0) scale(1);}
  }
  .hero-sub{
    margin-top:28px;
    font-size:15px;
    color:var(--muted);
    max-width:420px;
    line-height:1.6;
    opacity:0;
    animation:fadeUp 1.2s var(--ease) 1s forwards;
  }
  @keyframes fadeUp{
    from{opacity:0;transform:translateY(12px);}
    to{opacity:1;transform:translateY(0);}
  }
  .hero-scroll{
    position:absolute;
    bottom:48px;
    left:50%;
    transform:translateX(-50%);
    font-size:11px;
    color:var(--muted);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    opacity:0;
    animation:fadeUp 1.2s var(--ease) 1.6s forwards;
  }
  .hero-scroll-line{
    width:1px;
    height:32px;
    background:var(--line);
    position:relative;
    overflow:hidden;
  }
  .hero-scroll-line::after{
    content:'';
    position:absolute;
    top:-100%;
    left:0;
    width:100%;
    height:100%;
    background:var(--ink);
    animation:scrollDrip 1.8s ease-in-out infinite;
  }
  @keyframes scrollDrip{
    0%{top:-100%;}
    60%{top:100%;}
    100%{top:100%;}
  }

  /* ---------- Section 2: Qué hacemos ---------- */
  .what-heading{
    font-size:clamp(30px,4.4vw,52px);
    line-height:1.1;
    max-width:640px;
    margin-bottom:20px;
  }
  .what-text{
    font-size:16px;
    color:var(--muted);
    max-width:480px;
    line-height:1.7;
    margin-bottom:88px;
  }

  .flow{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:0;
  }
  .flow-step{
    display:flex;
    align-items:center;
  }
  .flow-label{
    font-size:15px;
    padding:10px 22px;
    border:1px solid var(--line);
    border-radius:100px;
    white-space:nowrap;
    transition:border-color .5s var(--ease), background .5s var(--ease), color .5s var(--ease);
  }
  .flow-label:hover{
    border-color:var(--ink);
    background:var(--ink);
    color:var(--bg);
  }
  .flow-arrow{
    width:28px;
    height:1px;
    background:var(--line);
    margin:0 2px;
  }

  .what-footer{
    margin-top:72px;
    font-size:16px;
    max-width:520px;
    line-height:1.7;
    padding-top:40px;
    border-top:1px solid var(--line);
  }

  /* ---------- Section 3: Planes ---------- */
  .plans-heading{
    font-size:clamp(30px,4.4vw,52px);
    max-width:600px;
    margin-bottom:88px;
    line-height:1.1;
  }
  .plans-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
    border:1px solid var(--line);
  }
  .plan-card{
    padding:48px 36px;
    border-right:1px solid var(--line);
    display:flex;
    flex-direction:column;
    transition:transform .6s var(--ease), background .6s var(--ease), color .6s var(--ease);
  }
  .plan-card:last-child{border-right:none;}
  .plan-card.featured{
    background:var(--accent);
    color:var(--bg);
    transform:translateY(-16px);
  }
  .plan-card.featured .plan-line{background:rgba(255,255,255,.2);}
  .plan-card.featured .plan-desc{color:rgba(248,243,237,.85);}
  .plan-tag{
    font-size:11px;
    padding-bottom:28px;
    color:var(--muted);
  }
  .plan-card.featured .plan-tag{color:rgba(248,243,237,.8);}
  .plan-name{
    font-size:24px;
    margin-bottom:20px;
  }
  .plan-stats{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-bottom:20px;
  }
  .plan-stat{
    font-size:13px;
    letter-spacing:.02em;
  }
  .plan-stat b{
    font-family:'Satoshi',sans-serif;
    font-weight:700;
    margin-right:6px;
  }
  .plan-line{
    width:32px;
    height:1px;
    background:var(--line);
    margin-bottom:20px;
  }
  .plan-desc{
    font-size:14px;
    color:var(--muted);
    line-height:1.7;
    margin-bottom:28px;
  }
  .plan-features{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:13px;
    padding-top:26px;
    margin-top:auto;
    border-top:1px solid var(--line);
  }
  .plan-card.featured .plan-features{border-top-color:rgba(255,255,255,.18);}
  .plan-features li{
    position:relative;
    padding-left:20px;
    font-size:13px;
    line-height:1.5;
    color:var(--muted);
  }
  .plan-card.featured .plan-features li{color:rgba(248,243,237,.85);}
  .plan-features li::before{
    content:'';
    position:absolute;
    left:0;
    top:7px;
    width:8px;
    height:1px;
    background:var(--ink);
    opacity:.5;
  }
  .plan-card.featured .plan-features li::before{
    background:#fff;
    opacity:.6;
  }

  /* ---------- Section 4: Proceso ---------- */
  .process-heading{
    font-size:clamp(30px,4.4vw,52px);
    max-width:600px;
    margin-bottom:100px;
    line-height:1.1;
  }
  .timeline{
    position:relative;
  }
  .timeline-line{
    position:absolute;
    left:36px;
    top:0;
    width:1px;
    height:100%;
    background:var(--line);
  }
  .timeline-fill{
    position:absolute;
    left:36px;
    top:0;
    width:1px;
    height:0%;
    background:var(--ink);
    transition:height .2s linear;
  }
  .t-step{
    display:flex;
    gap:36px;
    padding:28px 0;
    align-items:baseline;
  }
  .t-num{
    font-size:12px;
    color:var(--muted);
    width:72px;
    flex-shrink:0;
  }
  .t-content{
    font-size:19px;
    line-height:1.5;
    max-width:560px;
    padding-bottom:4px;
    border-bottom:1px solid var(--line);
    padding-bottom:28px;
  }
  .t-step:last-child .t-content{border-bottom:none;}

  /* ---------- Section 5: Contacto ---------- */
  .contact-section{
    background:var(--bg-alt);
  }
  .contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
  }
  .contact-heading{
    font-size:clamp(30px,4.4vw,52px);
    line-height:1.1;
    margin-bottom:24px;
  }
  .contact-text{
    font-size:16px;
    color:var(--muted);
    max-width:380px;
    line-height:1.7;
  }
  .contact-meta{
    margin-top:64px;
    display:flex;
    flex-direction:column;
    gap:8px;
    font-size:14px;
    color:var(--muted);
  }

  .field{
    position:relative;
    margin-bottom:34px;
  }
  .field input,
  .field textarea{
    width:100%;
    border:none;
    border-bottom:1px solid var(--line);
    background:transparent;
    font-family:'Satoshi',sans-serif;
    font-size:16px;
    padding:10px 0;
    color:var(--ink);
    outline:none;
    transition:border-color .4s var(--ease);
    resize:none;
  }
  .field input:focus,
  .field textarea:focus{
    border-color:var(--ink);
  }
  .field label{
    position:absolute;
    top:10px;
    left:0;
    font-size:16px;
    color:var(--muted);
    pointer-events:none;
    transition:all .3s var(--ease);
  }
  .field input:focus ~ label,
  .field input:not(:placeholder-shown) ~ label,
  .field textarea:focus ~ label,
  .field textarea:not(:placeholder-shown) ~ label{
    top:-14px;
    font-size:11px;
    letter-spacing:.04em;
    text-transform:uppercase;
    font-family:'Satoshi',monospace;
  }

  .submit-btn{
    margin-top:12px;
    padding:16px 40px;
    background:var(--accent);
    color:var(--bg);
    border:none;
    border-radius:100px;
    font-family:'Satoshi',monospace;
    font-size:12px;
    letter-spacing:.06em;
    text-transform:uppercase;
    cursor:pointer;
    transition:opacity .4s var(--ease), transform .4s var(--ease);
  }
  .submit-btn:hover{opacity:.75;transform:translateY(-2px);}
  .submit-btn:disabled{opacity:.5;cursor:default;transform:none;}
  .form-status{
    margin-top:16px;
    font-size:13px;
    color:var(--muted);
    min-height:18px;
  }

  footer{
    padding:40px 48px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12px;
    color:var(--muted);
    border-top:1px solid var(--line);
    background:var(--bg-alt);
  }

  @media (min-width:1600px){
    section{padding:200px 64px;}
    .section-inner{max-width:1220px;}
    .hero-name{font-size:clamp(90px,13vw,280px);}
    .hero-sub{font-size:17px;max-width:460px;}
    .what-heading,.plans-heading,.process-heading,.contact-heading{font-size:clamp(38px,4.4vw,64px);}
    .what-text,.contact-text{font-size:18px;max-width:520px;}
    .what-footer{font-size:18px;max-width:580px;}
    .flow-label{font-size:17px;padding:12px 26px;}
    .plan-name{font-size:28px;}
    .plan-desc{font-size:15px;}
    .plan-stat{font-size:14px;}
    .plan-features li{font-size:14px;}
    .t-content{font-size:22px;max-width:620px;}
    .t-num{font-size:13px;}
    .eyebrow{font-size:13px;}
    .nav-logo{font-size:15px;}
    .nav-cta{font-size:13px;padding:9px 20px;}
    .field input,.field textarea{font-size:18px;}
    .contact-meta{font-size:15px;}
  }

  @media (max-width:860px){
    section{padding:100px 24px;}
    .plans-grid{grid-template-columns:1fr;}
    .plan-card{border-right:none;border-bottom:1px solid var(--line);}
    .plan-card.featured{transform:translateY(0);}
    .contact-grid{grid-template-columns:1fr;gap:56px;}
    nav{padding:22px 24px;}
    .flow-arrow{display:none;}
    .flow{flex-direction:column;align-items:flex-start;gap:12px;}
    .flow-step{width:100%;}
  }

  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
    html{scroll-behavior:auto;}
  }

/* Nueva identidad visual de VTX Studio */
body{letter-spacing:0;}
h1,h2,h3,.display{font-weight:700;letter-spacing:-.02em;}
nav{padding-top:18px;padding-bottom:18px;}
.nav-logo{display:block;line-height:0;}
.nav-logo img{width:106px;height:auto;}
.nav-cta{color:var(--accent);border-color:var(--accent);font-weight:700;}
.nav-cta:hover{opacity:1;background:var(--accent);color:var(--bg);}
.hero{height:100svh;min-height:580px;}
.hero-name{line-height:0;width:min(72vw,760px);}
.hero-name img{display:block;width:100%;height:auto;}
.hero-sub{margin-top:36px;font-size:17px;max-width:410px;}
.hero-scroll{font-size:12px;}
.eyebrow{color:var(--accent);}
.eyebrow::before{background:var(--accent);}
.flow-label:hover{background:var(--accent);border-color:var(--accent);}
.timeline-fill{background:var(--accent);}
.plan-card.featured{transform:none;position:relative;top:-16px;}
.contact-meta a{text-decoration:underline;text-underline-offset:5px;}
.field input:focus,.field textarea:focus{border-color:var(--accent);}
.form-status{line-height:1.5;}
:focus-visible,.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:5px;}
.featured :focus-visible{outline-color:var(--bg);}
.skip-link{position:fixed;top:8px;left:12px;z-index:200;padding:12px 18px;background:var(--ink);color:var(--bg);transform:translateY(-150%);}
.skip-link:focus{transform:translateY(0);}
.reveal{opacity:1;transform:none;}
.js-reveal .reveal:not(.is-visible){opacity:0;transform:translateY(28px);}
section{scroll-margin-top:90px;}
@media(min-width:1600px){.hero-name{width:min(72vw,880px);}.nav-logo img{width:116px;}}
@media(max-width:860px){.plan-card.featured{top:0;}.nav-logo img{width:92px;}nav{padding-top:14px;padding-bottom:14px;}.hero-name{width:min(84vw,650px);}.hero-sub{font-size:16px;max-width:320px;} .hero{min-height:540px;}}
@media(max-width:480px){.t-step{gap:14px;}.t-num{width:54px;}.timeline-line,.timeline-fill{left:25px;}.t-content{font-size:17px;}footer{padding:28px 24px;gap:16px;flex-wrap:wrap;}.plan-card{padding:38px 28px;}}
@media(prefers-reduced-motion:reduce){.hero-name,.hero-sub,.hero-scroll,.js-reveal .reveal:not(.is-visible){opacity:1;transform:none;}.hero-scroll{transform:translateX(-50%);}.hero-scroll-line::after{animation:none;top:0;}}

/* Entrada del logo: zoom y letras que convergen, solo en la portada. */
.hero-name{opacity:1;transform:none;animation:none;}
.hero-logo{display:block;width:100%;height:auto;overflow:visible;transform-origin:50% 50%;animation:vtx-logo-zoom 2.4s cubic-bezier(.22,1,.36,1) .12s both;}
.hero-letter-v{--intro-shift:-14px;animation:vtx-letter-gather 2.4s cubic-bezier(.22,1,.36,1) .12s both;}
.hero-letter-x{--intro-shift:14px;animation:vtx-letter-gather 2.4s cubic-bezier(.22,1,.36,1) .12s both;}
.hero-signature{animation:vtx-signature-in 1.2s ease .4s both;}
@keyframes vtx-logo-zoom{0%{opacity:0;transform:scale(.68);}12%{opacity:1;}100%{opacity:1;transform:scale(1);}}
@keyframes vtx-letter-gather{from{transform:translateX(var(--intro-shift));}to{transform:translateX(0);}}
@keyframes vtx-signature-in{from{opacity:0;}to{opacity:1;}}
@media(prefers-reduced-motion:reduce){.hero-logo,.hero-letter,.hero-signature{animation:none!important;opacity:1;transform:none;}}

/* La cabecera aparece al terminar de bajar la portada. */
.site-nav{opacity:0;visibility:hidden;transform:translateY(-100%);pointer-events:none;transition:opacity .28s ease,transform .38s var(--ease),visibility .28s;}
.site-nav.is-visible{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
#que-hacemos{scroll-margin-top:0;}
@media(prefers-reduced-motion:reduce){.site-nav{transition:none;}}