/* Estilos compartidos por las paginas principales (home, servicios, enfoque,
   equipo, contacto). Extraido del <style> que vivia inline en index.html:
   con 5 paginas usando el mismo diseno, un fichero cacheable es mejor que
   duplicar ~9 KB de CSS en cada respuesta. */
  @font-face{font-family:"Hanken Grotesk";src:url("/assets/fonts/hanken-grotesk-v12-latin_latin-ext-regular.woff2") format("woff2");font-weight:400;font-display:swap}
  @font-face{font-family:"Hanken Grotesk";src:url("/assets/fonts/hanken-grotesk-v12-latin_latin-ext-500.woff2") format("woff2");font-weight:500;font-display:swap}
  @font-face{font-family:"Hanken Grotesk";src:url("/assets/fonts/hanken-grotesk-v12-latin_latin-ext-700.woff2") format("woff2");font-weight:700;font-display:swap}
  /* Respaldo con metricas ajustadas a Hanken Grotesk: evita el reflow al
     intercambiar la fuente. No afecta al render final, solo al momento del swap. */
  @font-face{font-family:"Hanken Fallback";src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans");size-adjust:96.33%;ascent-override:103.8%;descent-override:31.45%;line-gap-override:0%}
  :root{
    --bg:#0a0e13;
    --bg-elev:#0f1620;
    --line:#22303d;
    --line-soft:#1a2630;
    --text:#e8eef4;
    --muted:#9aa9b8;
    --brand:#00aeef;
    --brand-quiet:#5fc7ef;
    --r:8px;
    --maxw:1080px;
    --font:"Hanken Grotesk","Hanken Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color-scheme:dark;
    /* Tokens de movimiento (subconjunto de la skill transitions-dev: solo los
       que se usan aqui, no el fichero de tokens completo de las 32 transiciones) */
    --t-dur-open:250ms;   /* --duration-fast */
    --t-dur-close:150ms;  /* --duration-quick */
    --t-ease:cubic-bezier(0.22,1,0.36,1);  /* --ease-smooth-out */
    --t-blur:2px;         /* --blur-small */
  }
  *,*::before,*::after{box-sizing:border-box}
  html{scrollbar-color:var(--line) transparent;scrollbar-width:thin}
  body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);
    font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  h1,h2,h3{margin:0;line-height:1.1;font-weight:700;letter-spacing:-0.021em;text-wrap:balance}
  h1{font-size:clamp(2.4rem,5vw,3.45rem);line-height:1.07}
  h2{font-size:clamp(1.85rem,4vw,2.35rem)}
  h3{font-size:1.22rem;letter-spacing:-0.015em}
  .svc-item h3,.member h3,.principle h3,.process li h3{font-weight:500}
  p,li{text-wrap:pretty}
  p{margin:0}
  ::selection{background:color-mix(in oklab,var(--brand) 30%,var(--bg));color:var(--text)}
  :focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r)}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,40px)}
  .muted{color:var(--muted)}
  @media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}

  /* header */
  header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
  .nav .logo{height:28px;width:auto}
  .nav-links{display:flex;gap:26px;font-size:.94rem}
  .nav-links a{color:var(--muted);transition:color .15s}
  .nav-links a:hover{color:var(--text)}
  .nav-right{display:flex;align-items:center;gap:12px}
  .btn{display:inline-block;padding:11px 20px;border-radius:var(--r);font-weight:600;font-size:.94rem;
    border:1px solid transparent;transition:background .15s,border-color .15s,color .15s;cursor:pointer}
  .btn-primary{background:var(--brand);color:#04222c}
  .btn-primary:hover{background:color-mix(in oklab,var(--brand) 86%,white)}
  .btn-ghost{background:transparent;border-color:var(--line);color:var(--text)}
  .btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
  .menu-toggle{display:none;background:transparent;border:1px solid var(--line);border-radius:var(--r);
    width:40px;height:40px;padding:0;align-items:center;justify-content:center;color:var(--text);cursor:pointer}
  .menu-toggle svg{width:20px;height:20px}
  @media(max-width:820px){
    .nav-links{position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:0;
      background:var(--bg);border-bottom:1px solid var(--line);padding:6px clamp(20px,5vw,40px) 14px}
    .nav-links a{padding:12px 0;border-top:1px solid var(--line-soft);font-size:1rem}
    .nav-links a:first-child{border-top:0}
    /* Panel reveal (transitions-dev), adaptado: visibility con retardo en vez
       de display:none, para que la transicion se vea Y los enlaces queden
       fuera del orden de tabulacion/lectores de pantalla mientras esta cerrado
       (opacity sola no lo logra: seguirian siendo alcanzables por teclado). */
    header:not([data-open]) .nav-links{
      opacity:0;transform:translateY(-6px);filter:blur(var(--t-blur));
      visibility:hidden;pointer-events:none;
      transition:opacity var(--t-dur-close) var(--t-ease),
        transform var(--t-dur-close) var(--t-ease),
        filter var(--t-dur-close) var(--t-ease),
        visibility 0s linear var(--t-dur-close);
    }
    header[data-open] .nav-links{
      opacity:1;transform:translateY(0);filter:blur(0);
      visibility:visible;pointer-events:auto;
      transition:opacity var(--t-dur-open) var(--t-ease),
        transform var(--t-dur-open) var(--t-ease),
        filter var(--t-dur-open) var(--t-ease),
        visibility 0s linear 0s;
    }
    @media(prefers-reduced-motion:reduce){
      header:not([data-open]) .nav-links,header[data-open] .nav-links{transition:none}
    }
    .menu-toggle{display:inline-flex}
    .nav-right .btn-primary{display:none}
  }

  /* hero */
  .hero{padding:clamp(70px,10vw,112px) 0 clamp(56px,8vw,80px)}
  .hero-inner{max-width:860px}
  .hero-logo{height:clamp(48px,7vw,68px);width:auto;margin-bottom:32px}
  .hero p.lead{margin-top:22px;font-size:1.16rem;color:var(--muted);max-width:60ch}
  .hero-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
  .audience{margin-top:40px;padding-top:24px;border-top:1px solid var(--line-soft);
    font-size:.95rem;color:var(--muted);max-width:70ch}
  .audience b{color:var(--text);font-weight:600}

  /* sections */
  section.block{padding:clamp(64px,9vw,92px) 0;border-top:1px solid var(--line)}
  .sec-head{max-width:46ch;margin-bottom:clamp(32px,5vw,52px)}
  .sec-head p{margin-top:14px;color:var(--muted);font-size:1.04rem}

  /* band: el diferenciador */
  .band{background:var(--bg-elev);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .band .wrap{padding:56px clamp(20px,5vw,40px);display:grid;
    grid-template-columns:1.25fr 1fr;gap:clamp(28px,5vw,52px);align-items:start}
  .band p{margin-top:14px;color:var(--muted);font-size:1.04rem}
  .band-list{margin:0;padding:0;list-style:none;display:grid;gap:0}
  .band-list li{padding:12px 0;border-top:1px solid var(--line-soft);font-weight:600}
  .band-list li:first-child{border-top:0;padding-top:0}
  @media(max-width:760px){.band .wrap{grid-template-columns:1fr;gap:24px}}

  /* servicios: cuatro ventanas 2x2 (del sitio original) -- sin iconos, sin flotado, sin radio blando */
  .svc{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,20px)}
  .svc-card{position:relative;background:var(--bg-elev);border:1px solid var(--line);border-radius:6px;
    padding:clamp(22px,2.6vw,30px);transition:border-color .16s}
  .svc-card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--brand);
    border-radius:6px 6px 0 0;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
  .svc-card:hover,.svc-card:focus-within{border-color:var(--brand-quiet)}
  .svc-card:hover::before,.svc-card:focus-within::before{transform:scaleX(1)}
  .svc-card h3{margin:0 0 8px;font-size:1.1rem;font-weight:500;transition:color .16s}
  .svc-card:hover h3,.svc-card:focus-within h3{color:var(--brand-quiet)}
  .svc-card > p{color:var(--muted);font-size:.96rem;max-width:44ch}
  .svc-card .diff-note{color:var(--muted);font-size:.9rem;margin-top:8px;padding-left:12px;
    border-left:1px solid var(--brand);max-width:44ch}
  .svc-card ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:.93rem}
  .svc-card li{position:relative;padding-left:16px;color:var(--text)}
  .svc-card li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--brand)}
  @media(max-width:720px){.svc{grid-template-columns:1fr}}

  /* enfoque */
  .approach-head{max-width:58ch;margin-bottom:clamp(24px,3.5vw,36px)}
  .approach-head p{margin-top:16px;color:var(--muted);font-size:1.08rem}

  /* el proceso: tres partes, en orden, sin números -- con un momento de revelado */
  .process{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);position:relative}
  .process::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--brand);
    transform-origin:left}
  .process.js-reveal::before{transform:scaleX(0);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  .process.js-reveal.in::before{transform:scaleX(1)}
  .process li{padding:22px 24px 0 0;border-top:1px solid var(--line)}
  .process li + li{padding-left:24px;border-left:1px solid var(--line-soft)}
  .process li h3{transition:color .16s}
  .process li:hover h3{color:var(--brand-quiet)}
  .process li h3{margin:0 0 8px;font-size:1.12rem;font-weight:500}
  .process li p{color:var(--muted);font-size:.97rem;max-width:36ch}
  @media(max-width:720px){
    .process{grid-template-columns:1fr}
    .process li{border-left:0;padding:18px 0 0}
    .process li + li{border-left:0;padding-left:0;border-top:1px solid var(--line-soft)}
  }
  @media(prefers-reduced-motion:reduce){
    .process.js-reveal::before{transform:none;transition:none}
  }

  .principles{margin-top:clamp(34px,5vw,52px);padding-top:clamp(22px,3vw,30px);border-top:2px solid var(--line)}
  .principles-lead{color:var(--muted);font-size:.92rem;margin:0 0 clamp(18px,2.5vw,24px)}
  .principle{padding:clamp(16px,2.2vw,22px) 0;border-top:1px solid var(--line-soft);max-width:66ch}
  .principle:first-of-type{border-top:0;padding-top:2px}
  .principle h3{margin:0 0 6px;font-size:1.06rem;font-weight:500}
  .principle p{color:var(--muted);font-size:.96rem}

  .enfoque-cta{margin-top:clamp(36px,5vw,48px);justify-self:start}

  /* equipo */
  .team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,36px)}
  @media(max-width:820px){.team{grid-template-columns:1fr;gap:24px}}
  .member .avatar{width:76px;height:76px;border-radius:50%;object-fit:cover;
    border:1px solid var(--line);margin-bottom:14px}
  .member h3{margin:0}
  .member .role{font-size:.88rem;font-weight:600;color:var(--brand-quiet);margin:6px 0 10px}
  .member p{font-size:.94rem;color:var(--muted);max-width:40ch}

  /* contacto */
  .contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,48px)}
  @media(max-width:820px){.contact{grid-template-columns:1fr}}
  .contact .intro p{color:var(--muted);margin-top:12px;max-width:42ch}
  .contact .mail{margin-top:20px;font-weight:600}
  .contact .mail a:hover{color:var(--brand)}
  .social{margin-top:16px;font-size:.9rem;color:var(--muted)}
  .social a{color:var(--brand-quiet)}
  form{display:grid;gap:16px}
  label{font-size:.86rem;color:var(--muted);display:grid;gap:6px}
  input,textarea,select{font:inherit;font-size:.96rem;color:var(--text);background:var(--bg-elev);
    caret-color:var(--brand);border:1px solid var(--line);border-radius:var(--r);padding:11px 14px;width:100%}
  select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
  input:focus,textarea:focus,select:focus{border-color:var(--brand);outline:none}
  textarea{min-height:128px;resize:vertical}
  .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
  .consent{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:var(--muted)}
  .consent input{width:auto;margin-top:3px}
  .consent a{color:var(--brand-quiet)}
  button[type=submit]{background:var(--brand);color:#04222c;border:0;border-radius:var(--r);
    padding:12px 22px;font:inherit;font-weight:650;cursor:pointer;justify-self:start}
  button[type=submit]:hover{background:color-mix(in oklab,var(--brand) 86%,white)}
  button[type=submit][disabled]{opacity:.6;cursor:progress}
  /* Text states swap (transitions-dev), para el mensaje de estado del formulario */
  .form-msg{font-size:.9rem;min-height:1.2em;
    transform:translateY(0);filter:blur(0);opacity:1;
    transition:transform var(--t-dur-close) ease-in-out,
      filter var(--t-dur-close) ease-in-out,
      opacity var(--t-dur-close) ease-in-out}
  .form-msg.is-exit{transform:translateY(-4px);filter:blur(var(--t-blur));opacity:0}
  .form-msg.is-enter-start{transform:translateY(4px);filter:blur(var(--t-blur));opacity:0;transition:none}
  @media(prefers-reduced-motion:reduce){.form-msg{transition:none}}

  /* footer */
  footer{border-top:1px solid var(--line);padding:40px 0;color:var(--muted);font-size:.9rem}
  .foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
  .foot img{height:24px;width:auto;opacity:.85}
  .foot .legal{display:flex;align-items:center;gap:16px}
  .foot .legal a:hover{color:var(--text)}
  .foot .ig{display:inline-flex}
  .foot .ig svg{width:19px;height:19px}