/* Avonlea Systems: tokens y componentes. Fuente de los valores: BRAND.md. */
:root{
  --canvas:#fffaf0; --surface-soft:#faf5e8; --surface-card:#f5f0e0; --surface-strong:#ebe6d6;
  --ink:#0a0a0a; --body:#3a3a3a; --muted:#6f6a5c; --hairline:#eae5d9;
  --link:#4f46e5; --accent:#6366f1; --pink:#ff4d8b;
  --measure:37rem;
  color-scheme:light;
}
@font-face{font-family:"Inter";src:url("/assets/inter-latin.3100e775.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:107.4%;ascent-override:90.2%;descent-override:22.48%;line-gap-override:0%}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--canvas);color:var(--body);font-family:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
h1,h2,h3{color:var(--ink)}
ul,ol{padding:0}
a{color:var(--link)}
[hidden]{display:none!important}
[id]{scroll-margin-top:1.5rem}
:where(a,button,summary,input,textarea):focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:4px}
.wrap{max-width:64rem;margin:0 auto;padding:0 1.5rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:40;padding:.75rem 1rem;background:var(--ink);color:var(--canvas);border-radius:0 0 8px 0;text-decoration:none;font-weight:600}
.skip:focus{left:0}

/* Tipografía */
.display{font-size:clamp(2.25rem,6vw,3.25rem);line-height:1.05;font-weight:700;letter-spacing:-.04em}
.h2{max-width:46rem;font-size:clamp(1.5rem,3.5vw,1.875rem);line-height:1.15;font-weight:700;letter-spacing:-.03em}
.h3{font-size:1.25rem;line-height:1.3;font-weight:600;letter-spacing:-.02em}
.lede{max-width:var(--measure);font-size:1.1875rem;color:var(--body)}
.prose{max-width:var(--measure)}
.label{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8125rem}
.eyebrow{display:flex;align-items:center;gap:.625rem;color:var(--muted);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.eyebrow-dot{flex:none;fill:var(--pink)}

/* Símbolo y separador */
.mark{display:block;flex:none}
.mark .stroke{stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;fill:none}
.mark .dot{fill:var(--pink)}
/* Separador: el latido sobre una línea fina. Con línea de tiempo de vista, el trazo se dibuja al entrar en pantalla
   y las líneas se abren desde el latido; sin ella (o con movimiento reducido) queda dibujado. */
.rule{display:flex;align-items:center;gap:1rem;margin:5rem 0 0;color:var(--ink)}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:var(--hairline)}
.rule::before{transform-origin:right}
.rule::after{transform-origin:left}
.rule-beat{display:block;flex:none}
.rule-beat .stroke{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.rule-beat .dot{fill:var(--pink);transform-box:fill-box;transform-origin:center}

/* Cabecera */
.top{padding:1rem 0}
.top-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem 1rem}
.brand{display:flex;align-items:center;gap:.5rem;color:var(--ink);text-decoration:none}
.brand span{font-size:1.125rem;font-weight:600;letter-spacing:-.035em}
.topnav{display:none;gap:1.5rem}
.topnav a{position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font-size:.9375rem;font-weight:500;text-decoration:none;transition:color .2s}
.topnav a:hover,.topnav a[aria-current]{color:var(--ink)}
/* Página actual: el punto de la marca bajo el enlace. */
.topnav a[aria-current]::after{content:"";position:absolute;left:50%;bottom:4px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--pink)}
.top-actions{display:flex;align-items:center;gap:.5rem}
.langs{display:flex;align-items:center;font-size:.875rem;font-weight:600;color:var(--muted)}
.langs a{display:inline-flex;align-items:center;min-height:44px;padding:0 .5rem;color:var(--muted);text-decoration:none}
.langs a:hover,.langs a[aria-current]{color:var(--ink)}
.nav-cta{display:none;align-items:center;gap:.5rem;min-height:44px;padding:0 .9rem;border:1px solid var(--muted);border-radius:9px;color:var(--ink);font-size:.9375rem;font-weight:600;text-decoration:none;transition:background-color .2s,border-color .2s}
.nav-cta:hover{background:var(--surface-strong);border-color:var(--ink)}
.nav-dot{flex:none;width:7px;height:7px;fill:var(--pink)}
@media (prefers-reduced-motion:no-preference){.nav-cta:hover .nav-dot,.nav-cta:focus-visible .nav-dot{animation:beat 1.6s linear infinite}}
/* Menú móvil: <details> nativo, se abre sin JS; el panel cuelga de la cabecera fija. */
.menu summary{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--muted);border-radius:9px;color:var(--ink);list-style:none;cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu summary:hover{background:var(--surface-strong)}
.menu .icon-close,.menu[open] .icon-open{display:none}
.menu[open] .icon-close{display:block}
.menu-panel{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;max-height:calc(100vh - 4.75rem);max-height:calc(100dvh - 4.75rem);overflow-y:auto;padding:.25rem 1.5rem 1.5rem;border-bottom:1px solid var(--hairline);background:var(--canvas)}
.menu-panel a:not(.btn){display:flex;align-items:center;justify-content:space-between;min-height:48px;border-bottom:1px solid var(--hairline);color:var(--ink);font-size:1.0625rem;font-weight:600;text-decoration:none}
.menu-panel a[aria-current]::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--pink)}
@media (prefers-reduced-motion:no-preference){.menu[open] .menu-panel{animation:drop .22s cubic-bezier(.2,.7,.2,1)}}
.menu-panel .btn{margin-top:1.25rem}
@media (max-width:819px){
  .top{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--hairline);background:var(--canvas)}
  [id]{scroll-margin-top:6rem}
}
@media (max-width:389px){
  .top-in{gap:.25rem .5rem}
  .brand span{font-size:1rem}
  .top-actions{gap:.25rem}
  .langs a{padding:0 .375rem}
}
@media (min-width:820px){.topnav{display:flex}.nav-cta{display:inline-flex}.menu{display:none}}

/* Botones: primario en tinta, secundario con borde. La flecha avanza al pasar el cursor; el clic hunde un píxel. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;min-height:48px;padding:0 1.5rem;border:1px solid transparent;border-radius:12px;font:inherit;font-size:.9375rem;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s,transform .12s}
.btn .arrow{flex:none;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.btn:hover .arrow,.btn:focus-visible .arrow{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.65;cursor:progress}
.btn-primary{background:var(--ink);color:var(--canvas);box-shadow:0 1px 2px rgba(10,10,10,.12),0 8px 20px -12px rgba(10,10,10,.6)}
.btn-primary:hover{background:#2a2a2e;box-shadow:0 1px 2px rgba(10,10,10,.12),0 12px 24px -12px rgba(10,10,10,.7)}
.btn-ghost{background:transparent;border-color:var(--muted);color:var(--ink)}
.btn-ghost:hover{background:var(--surface-strong);border-color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
/* Enlace «ver más»: subrayado que crece y flecha que avanza. */
.more{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;color:var(--link);font-weight:600;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 10px)/0 1.5px no-repeat;transition:background-size .3s}
.more:hover,.more:focus-visible{background-size:calc(100% - 28px) 1.5px}
.more .arrow{flex:none;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.ext{display:inline-block;margin-left:.25rem;vertical-align:-1px}
.more:hover .arrow,.more:focus-visible .arrow{transform:translateX(4px)}


/* Capítulos */
.chapter{padding-top:4rem}
.chapter .eyebrow{margin-bottom:1rem}
.chapter .lede,.chapter .prose{margin-top:1rem}
.closing{max-width:var(--measure);margin-top:2rem}


/* Tarjetas y rejillas */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1.25rem;margin-top:2rem}
.card{padding:1.75rem;border:1px solid var(--hairline);border-radius:16px;background:var(--surface-soft)}
.card .label{display:block;margin-bottom:.75rem}
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1.75rem 2.5rem;margin-top:2.5rem}
.feat h3{margin-bottom:.375rem;font-size:1rem;font-weight:600}
.feat p{font-size:.9375rem}

/* Pasos (método, flujo, latido) */
.steps{margin-top:2rem;list-style:none}
.step{display:grid;grid-template-columns:11rem 1fr;gap:2rem;padding:1.75rem 0;border-top:1px solid var(--hairline)}
.step:last-child{border-bottom:1px solid var(--hairline)}
.step-name{font-size:1rem;font-weight:600}
.step .meta{margin-top:.75rem;color:var(--muted)}
@media (max-width:640px){.step{grid-template-columns:1fr;gap:.5rem}}


/* Pie */
.foot{border-top:1px solid var(--hairline);background:var(--surface-soft)}
.foot-in{display:flex;flex-wrap:wrap;gap:2rem 3rem;justify-content:space-between;padding-block:2.5rem}
.foot-title{margin-bottom:.35rem;color:var(--muted);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.foot-list{list-style:none}
.foot-list+.foot-title{margin-top:1rem}
.foot a{display:block;padding:.4rem 0;color:var(--muted);font-size:.9375rem;text-decoration:none}
.foot a:hover{color:var(--ink);text-decoration:underline}
.foot-brand{display:flex;align-items:center;gap:.5rem;color:var(--ink);font-weight:600}
.entity{max-width:22rem;margin-top:.5rem;color:var(--muted);font-size:.875rem}
.foot-base{padding-block:0 2rem;color:var(--muted);font-size:.8125rem}
.foot-base a{display:inline;padding:0;font-size:inherit}

/* Documento legal y 404 */
.doc{max-width:44rem;margin:0 auto;padding:2rem 1.5rem 5rem}
.doc h1{margin:1rem 0 1.5rem;font-size:clamp(1.75rem,4vw,2.25rem);line-height:1.15;letter-spacing:-.03em}
.doc h2{margin:2.5rem 0 .75rem;font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
.doc p,.doc ul{margin:1rem 0}
.doc ul{padding-left:1.35rem}
.table-scroll{margin:1.25rem 0;overflow-x:auto}
.table-scroll:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:4px}
.doc table{width:100%;min-width:40rem;border-collapse:collapse;font-size:.9375rem}
.doc th,.doc td{padding:.6rem .75rem;border-bottom:1px solid var(--hairline);text-align:left;vertical-align:top}
.doc th{color:var(--ink);font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase}
.doc code{padding:1px 6px;border-radius:6px;background:var(--surface-strong);color:var(--ink);font-size:.9em}
/* 404: la línea plana (muted) recupera el latido (tinta) y el punto vuelve a latir. Sin movimiento, se ve completa. */
.notfound{max-width:56rem;margin:0 auto;padding:4rem 1.5rem 5rem}
.flatline{display:block;max-width:100%;height:auto;margin-bottom:2.5rem;color:var(--ink)}
.flatline path{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.flatline .flat{stroke:var(--muted)}
.flatline .pulse{stroke:currentColor}
.flatline .dot{fill:var(--pink);transform-box:fill-box;transform-origin:center}
.notfound-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:3rem}
.notfound .prose{margin-top:.75rem}
.notfound .btn-row{margin-top:1.5rem}
.notfound-links{margin-top:1.5rem;list-style:none;border-top:1px solid var(--hairline)}
.notfound-links a{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:48px;border-bottom:1px solid var(--hairline);color:var(--ink);font-weight:600;text-decoration:none}
.notfound-links .arrow{flex:none;color:var(--muted);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.notfound-links a:hover .arrow,.notfound-links a:focus-visible .arrow{color:var(--ink);transform:translateX(4px)}
@media (prefers-reduced-motion:no-preference){
  .flatline path{stroke-dasharray:1;animation:draw .9s cubic-bezier(.4,0,.2,1) both}
  .flatline .pulse{animation-duration:.45s;animation-delay:.9s}
  .flatline .dot{animation:pop .4s cubic-bezier(.2,.7,.2,1) 1.35s both,beat 1.6s linear 1.75s 3}
}

/* Migas y encabezado de las páginas de profundidad */
.crumbs{padding-top:1.25rem}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 .5rem;list-style:none;font-size:.875rem}
.crumbs li{display:flex;align-items:center;gap:.5rem}
.crumbs li+li::before{content:"/";color:var(--muted)}
.crumbs a{display:inline-flex;align-items:center;min-height:32px;color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs a[aria-current]{color:var(--ink);font-weight:600}
.page-head{padding-top:2.5rem}
.page-head .display{max-width:52rem;margin-top:1.25rem;font-size:clamp(2rem,5vw,2.875rem);line-height:1.08}
.page-head .lede{margin-top:1.5rem}

/* Cierre de las páginas de profundidad: siguiente página y banda de contacto */
.next{margin-top:6rem;border-top:1px solid var(--hairline);background:var(--surface-soft)}
.next-link{display:flex;align-items:center;gap:1.25rem;padding:2rem 0;border-bottom:1px solid var(--hairline);color:var(--ink);text-decoration:none}
.next-link .label{flex:none}
.next-name{flex:1;font-size:clamp(1.5rem,4vw,2.25rem);font-weight:700;letter-spacing:-.035em;line-height:1.1}
.next-link .arrow{flex:none;width:32px;height:20px;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.next-link:hover .arrow,.next-link:focus-visible .arrow{transform:translateX(8px)}
.next-link:hover .next-name{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.next-cta{padding:4.5rem 0;text-align:center;color:var(--ink)}
.next-cta .mark{margin:0 auto 1.25rem}
.next-cta .h2,.next-cta .lede{margin-inline:auto}
.next-cta .lede{margin-top:.75rem}
.next-cta .btn-row{justify-content:center}

/* Movimiento compartido. Toda animación decorativa queda dentro de prefers-reduced-motion: no-preference. */
@keyframes beat{0%,40%,100%{opacity:.35}55%{opacity:1}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes blip{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
/* Dibujo al entrar en vista: un trazo con pathLength="1" y la clase .draw se dibuja mientras entra en pantalla. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .draw,.rule-beat .stroke{stroke-dasharray:1;animation:draw linear both;animation-timeline:view();animation-range:entry 0% contain 15%}
    .rule::before,.rule::after{animation:grow-x linear both;animation-timeline:view();animation-range:entry 0% contain 10%}
    .rule-beat .dot{animation:pop linear both;animation-timeline:view();animation-range:contain 5% contain 20%}
  }
}

/* Transición entre páginas del mismo sitio (navegadores con View Transitions entre documentos). */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
.top{view-transition-name:top}
::view-transition-old(root){animation:.18s ease-in both vt-out}
::view-transition-new(root){animation:.28s cubic-bezier(.2,.7,.2,1) both vt-in}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

/* Portada: hero con el ciclo, brecha, cómo trabajamos, soluciones, equipo, preguntas y contacto. Movimiento: una sola
   secuencia orquestada (el ciclo del hero); al desplazarse solo se dibujan datos. Toda animación decorativa vive dentro
   de prefers-reduced-motion: no-preference; sin ella, cada diagrama se ve completo y quieto. */

/* Hero */
.hero{display:grid;gap:3rem;align-items:center;padding-top:3rem}
@media (min-width:960px){.hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:2.5rem;padding-top:4.5rem}}
.hero .display{margin-top:1.25rem}
.hero .lede{margin-top:1.5rem}
.hero-ind{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:2.25rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none}
.chips li{padding:.3rem .85rem;border:1px solid var(--hairline);border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.875rem}

/* Ciclo: anillo de 112 alrededor de (240,180). El punto orbita con el <g> que rota sobre el centro del anillo. */
.cycle{width:100%;max-width:34rem;margin:0 auto}
.cycle-svg{display:none;width:100%;height:auto}
.cycle-track{fill:none;stroke:var(--surface-strong);stroke-width:1.5}
.cycle-core{fill:var(--surface-soft);stroke:var(--hairline);stroke-width:1.5}
.cycle-arc{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round}
.cycle-head{fill:var(--accent)}
.cycle-name,.cycle-center,.cycle-sub{font-family:"Inter","Inter Fallback",system-ui,sans-serif}
.cycle-name{fill:var(--ink);font-size:18px;font-weight:700;letter-spacing:-.02em}
.cycle-center{fill:var(--ink);font-size:14px;font-weight:700}
.cycle-sub{fill:var(--muted);font-size:11px;font-weight:500}
.cycle-mark path{fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.cycle-mark circle,.cycle-dot{fill:var(--pink)}
.cycle-blip{display:none;fill:none;stroke:var(--pink);stroke-width:2}
.cycle-orbit{transform-box:view-box;transform-origin:240px 180px}
/* Retardos de cada paso: --d, la carga; --l, el paso del punto (un latido de 1,6 s por cuarto de vuelta). */
.cs1{--d:.2s;--l:1.2s}.cs2{--d:.5s;--l:2.1s}.cs3{--d:.8s;--l:3s}.cs4{--d:1.1s;--l:3.9s}

/* Línea de tiempo vertical (ciclo en móvil y pasos del contacto): riel en índigo y un nodo por paso. */
.tl{position:relative;display:grid;gap:1.125rem;padding-left:2.25rem;list-style:none}
.tl::before{content:"";position:absolute;left:8.5px;top:.75rem;bottom:.75rem;width:3px;border-radius:2px;background:var(--accent);transform-origin:top}
.tl>li{position:relative}
.tl>li::before{content:"";position:absolute;left:-2.25rem;top:.3rem;width:1.25rem;height:1.25rem;border:3px solid var(--accent);border-radius:50%;background:var(--tl-bg,var(--canvas))}
.cycle-list strong{display:block;color:var(--ink);font-size:1.0625rem}
.cycle-list span,.cycle-memo span span{color:var(--muted);font-size:.9375rem}
.cycle-memo{display:flex;gap:.875rem;align-items:center;margin-top:1.25rem;padding:1rem 1.125rem;border:1px solid var(--hairline);border-radius:14px;background:var(--surface-soft);color:var(--ink)}
.cycle-memo strong{display:block}
@media (min-width:720px){.cycle-svg{display:block}.cycle-list,.cycle-memo{display:none}}

@keyframes h-in{from{opacity:0}}
@keyframes h-grow{from{opacity:0;transform:scale(.85)}}
@keyframes h-gy{from{transform:scaleY(0)}}
@keyframes h-orbit{to{transform:rotate(1turn)}}
@keyframes h-lit{0%,2%,28%,100%{stroke-width:5}7%,20%{stroke-width:8.5}}
@keyframes h-lit-t{0%,2%,28%,100%{fill:var(--ink)}7%,20%{fill:var(--link)}}
@media (prefers-reduced-motion:no-preference){
  .hero .eyebrow-dot{animation:beat 1.6s linear 3}
  .cycle-track{animation:h-in .4s both}
  .cycle-arc{stroke-dasharray:1;animation:draw .45s cubic-bezier(.4,0,.2,1) var(--d) both,h-lit 3.6s linear var(--l) 1}
  .cycle-head,.cycle-core,.cycle-mark circle,.cycle-dot,.cycle-blip{transform-box:fill-box;transform-origin:center}
  .cycle-head{animation:pop .35s calc(var(--d) + .38s) both}
  .cycle-name{animation:h-in .4s calc(var(--d) + .2s) both,h-lit-t 3.6s linear var(--l) 1}
  .cycle-core{animation:h-grow .5s cubic-bezier(.2,.7,.2,1) .9s both}
  .cycle-center,.cycle-sub{animation:h-in .5s 1.2s both}
  .cycle-mark path{stroke-dasharray:1;animation:draw .5s 1.1s both}
  .cycle-mark circle{animation:pop .35s 1.55s both}
  .cycle-dot{animation:pop .4s .8s both}
  /* Una vuelta de 3,6 s (0,9 s por paso) que termina a los 4,8 s, bajo el límite de 5 s de WCAG 2.2.2; el punto queda
     arriba, entre Repetir y Medir. */
  .cycle-orbit{animation:h-orbit 3.6s linear 1.2s 1}
  .cycle-blip{display:block;opacity:0;animation:blip .9s ease-out 1.38s 4}
  .cycle-list::before{animation:h-gy 1.2s cubic-bezier(.4,0,.2,1) .2s both}
  .cycle-list>li::before{animation:pop .35s calc(var(--d) + .25s) both}
}

/* La brecha */
.gap-fig{margin-top:2rem}
.bars{margin-top:.75rem;border-top:1px solid var(--hairline);list-style:none}
.bar{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:.4rem 1.25rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--hairline)}
.bar-value{grid-row:1/span 2;color:var(--ink);font-size:2rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.bar-label{color:var(--body)}
/* clip y no hidden: un contenedor con overflow hidden sería el desplazador de la línea de tiempo de vista. */
.bar-track{position:relative;display:block;height:10px;border-radius:5px;background:var(--surface-strong);overflow:hidden;overflow:clip}
.bar-fill{position:relative;display:block;height:100%;border-radius:5px;background:var(--accent)}
.bar-ghost,.gap-key{background:repeating-linear-gradient(-45deg,var(--accent) 0 1.5px,transparent 0 5px) var(--surface-strong)}
.bar-ghost{position:absolute;top:0;bottom:0;left:0;border-radius:0 5px 5px 0}
.gap-note{grid-column:2;display:flex;align-items:center;gap:.625rem;color:var(--ink);font-size:.9375rem;line-height:1.35}
.gap-note strong{font-size:1.25rem;letter-spacing:-.02em}
.gap-pad{display:none;flex:none}
.gap-key{flex:none;width:1.75rem;height:10px;border-radius:5px}
@media (min-width:640px){.gap-pad{display:block;margin-right:-.625rem}}
.gap-fig+.prose{margin-top:2rem}
.callout{max-width:var(--measure);margin-top:2rem;padding:1.25rem 1.5rem;border-left:3px solid var(--accent);border-radius:0 12px 12px 0;background:var(--surface-card)}
.sources{margin-top:1rem;color:var(--muted);font-size:.875rem}

/* Cómo trabajamos: trazo horizontal desde 820 px; debajo, riel vertical con un latido por pilar. */
.ap{margin-top:2.75rem}
.ap-trace{display:none;width:100%;height:auto}
.ap-line,.ap-beat{fill:none;stroke:var(--accent);stroke-linecap:round;stroke-linejoin:round}
.ap-line{stroke-width:7.5}
.ap-dot{fill:var(--pink)}
.ap-list{display:grid;gap:2.25rem;list-style:none}
.ap-item{position:relative;padding-left:3rem}
.ap-item::before{content:"";position:absolute;left:14px;top:2.5rem;bottom:-2.25rem;width:4px;background:var(--accent);transform-origin:top}
.ap-item:last-child::before{bottom:21px;border-radius:0 0 2px 2px}
.ap-item:last-child::after{content:"";position:absolute;left:11px;bottom:8px;width:10px;height:10px;border-radius:50%;background:var(--pink)}
.ap-beat{position:absolute;left:0;top:-.25rem;stroke-width:4}
.ap-name{margin-top:.25rem;color:var(--ink);font-size:1.5rem;font-weight:700;letter-spacing:-.035em;line-height:1.15}
.ap-title{margin-top:.75rem;font-size:1.0625rem;font-weight:600;letter-spacing:-.015em;line-height:1.35}
.ap-text{margin-top:.5rem;font-size:.9375rem}
.ap .more{margin-top:.5rem}
@media (min-width:820px){
  .ap-trace{display:block}
  .ap-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:1rem}
  .ap-item{padding:0 2.25rem 0 0}
  .ap-item::before,.ap-item::after,.ap-beat{display:none}
}

/* Soluciones */
.sol-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1.25rem;margin-top:2.5rem;list-style:none}
.sol-card{display:flex;flex-direction:column;gap:.75rem;padding:1.75rem;border:1px solid var(--hairline);border-radius:16px;background:var(--surface-soft)}
.sol-name{font-size:1.5rem;font-weight:700;letter-spacing:-.035em;line-height:1.1}
.sol-line{color:var(--ink);font-weight:600;line-height:1.4}
.sol-body{font-size:.9375rem}
.sol-note{color:var(--muted);font-size:.8125rem}
.sol-card .more{margin-top:auto}
.more .ext{margin:0}
@media (prefers-reduced-motion:no-preference){
  .more .ext{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
  .more:hover .ext,.more:focus-visible .ext{transform:translate(2px,-2px)}
}
.picto{padding:1rem 1.125rem 1.125rem;border:1px solid var(--hairline);border-radius:12px;background:var(--canvas)}
.picto-title{color:var(--ink);font-size:.8125rem;font-weight:600;line-height:1.4}
.picto-row{display:flex;justify-content:space-between;gap:1rem;max-width:13rem;margin-top:.625rem;font-size:.8125rem}
.picto-n{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.picto-people{display:block;width:100%;max-width:13rem;height:auto}
.picto-people use{fill:var(--muted)}
.picto-people .picto-plus{fill:var(--accent)}
.picto-brace{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* Equipo */
.tm{display:grid;gap:2.5rem;margin-top:2.5rem}
@media (min-width:960px){.tm{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3.5rem}}
.tm-people{display:grid;gap:1rem;list-style:none}
.tm-person{display:flex;gap:1rem;padding:1.25rem;border:1px solid var(--hairline);border-radius:16px;background:var(--surface-soft)}
.tm-avatar{display:grid;place-items:center;flex:none;width:3.25rem;height:3.25rem;border-radius:50%;background:var(--link);color:var(--canvas);font-weight:700;letter-spacing:.02em}
.tm-name{font-size:1.125rem;font-weight:700;letter-spacing:-.02em}
.tm-role{color:var(--muted);font-size:.9375rem}
.tm-sum{margin-top:.5rem;font-size:.9375rem}
.tm-list{margin-top:.75rem;border-top:1px solid var(--hairline);list-style:none}
.tm-list li{padding:1rem 0;border-bottom:1px solid var(--hairline)}
.tm-list h3{font-size:1rem;font-weight:600}
.tm-list p{font-size:.9375rem}
.tm-more{margin-top:1.5rem}

/* Preguntas */
@media (min-width:960px){.faq-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:3rem;align-items:start}}
.faq{margin-top:2rem;border-top:1px solid var(--hairline);interpolate-size:allow-keywords}
@media (min-width:960px){.faq{margin-top:0}}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{position:relative;display:flex;align-items:center;min-height:44px;padding:1.25rem 3rem 1.25rem 0;color:var(--ink);font-size:1.0625rem;font-weight:600;line-height:1.4;list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:.5rem;top:50%;width:14px;height:2px;margin-top:-1px;border-radius:1px;background:var(--muted)}
.faq summary::after{transform:rotate(90deg)}
.faq [open] summary::before,.faq [open] summary::after{transform:rotate(180deg);background:var(--ink)}
.faq summary:hover::before,.faq summary:hover::after{background:var(--ink)}
.faq summary:focus-visible{outline-offset:-2px}
.faq details p{max-width:var(--measure);padding-bottom:1.5rem}
@media (prefers-reduced-motion:no-preference){
  .faq summary::before,.faq summary::after{transition:transform .3s cubic-bezier(.2,.7,.2,1),background-color .2s}
  .faq details::details-content{block-size:0;overflow:clip;transition:block-size .3s cubic-bezier(.2,.7,.2,1),content-visibility .3s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}

/* Contacto */
.closer{--tl-bg:var(--surface-soft);margin-top:5rem;padding:4.5rem 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:var(--surface-soft)}
.ct{display:grid;gap:2.5rem}
@media (min-width:960px){.ct{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4rem;align-items:start}.ct-intro{position:sticky;top:2rem}}
.ct-intro{color:var(--ink)}
.ct-intro .mark{margin-bottom:1.25rem}
.ct-intro .lede{margin-top:.75rem}
.ct-steps{margin-top:2rem}
.ct-steps>li:first-child::before{border-color:var(--pink);background:var(--pink)}
.ct-step{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .625rem;color:var(--ink)}
.ct-step strong{font-size:1.0625rem}
.ct-step .mono{color:var(--link)}
.ct-step+p{font-size:.9375rem}

/* Formulario: estados visibles, foco claro y controles de 48 px. */
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:1.25rem;padding:1.25rem;border:1px solid var(--hairline);border-radius:16px;background:var(--canvas)}
@media (min-width:480px){.form{padding:2rem}}
.form-note,.field-wide,.consent,.form-actions,.cf-turnstile,.form .status{grid-column:1/-1}
.form-note{color:var(--muted);font-size:.875rem}
.field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.form label{color:var(--ink);font-size:.9375rem;font-weight:600}
.form :is(input[type=text],input[type=email],input[type=tel],textarea){width:100%;min-height:48px;padding:.75rem 1rem;border:1px solid var(--muted);border-radius:12px;background:var(--canvas);color:var(--ink);font:inherit;transition:border-color .15s,box-shadow .15s}
.form textarea{min-height:9rem;resize:vertical}
.form ::placeholder{color:var(--muted);opacity:1}
.form :is(input,textarea):hover{border-color:var(--ink)}
.form :is(input,textarea):focus-visible{border-color:var(--link);outline-offset:1px}
.form :is(input,textarea)[aria-invalid=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.consent input[aria-invalid=true]{outline:2px solid var(--ink);outline-offset:2px}
.err{display:flex;gap:.4rem;align-items:flex-start;color:var(--ink);font-size:.875rem;font-weight:600}
.field-foot{display:flex;gap:1rem;align-items:flex-start}
.f-count{margin-left:auto;color:var(--muted);font-size:.8125rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.f-count.is-near{color:var(--ink);font-weight:600}
.consent{display:flex;gap:.75rem;align-items:flex-start}
.consent input{flex:none;width:1.375rem;height:1.375rem;margin:.15rem 0 0;accent-color:var(--link)}
.consent label{font-weight:400}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.btn-pulse{display:none;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-send[aria-busy=true]{opacity:1}
.btn-send[aria-busy=true] .arrow{display:none}
.btn-send[aria-busy=true] .btn-pulse{display:block}
.status{display:flex;gap:.75rem;align-items:flex-start;padding:1rem 1.25rem;border:1px solid var(--muted);border-radius:12px;background:var(--surface-card);color:var(--ink)}
.status[role=status]{border-color:var(--accent);background:var(--surface-soft)}
.ico{flex:none;width:20px;height:20px;margin-top:.15rem;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.err .ico{width:16px;height:16px}
.ico .ico-dot{fill:var(--pink);stroke:none}
.ico-ok{color:var(--accent)}
@media (prefers-reduced-motion:no-preference){
  .btn-send[aria-busy=true] .btn-pulse path{stroke-dasharray:1;animation:draw 1.6s linear infinite}
  .ico-ok path{stroke-dasharray:1;animation:draw .5s .15s both}
}

/* Al entrar en vista: crecen las barras, aparece el punto al final del trazo y se dibujan los rieles. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .bar-fill,.bar-ghost{transform-origin:left;animation:grow-x linear both;animation-timeline:view();animation-range:entry 0% contain 15%}
    .bar-ghost{animation-range:contain 0% contain 15%}
    .ap-dot,.picto-plus{transform-box:fill-box;transform-origin:center;animation:pop linear both;animation-timeline:view();animation-range:contain 10% contain 25%}
    .ap-item::before,.ct-steps::before{animation:h-gy linear both;animation-timeline:view();animation-range:entry 0% contain 20%}
  }
}

/* Página Método (prefijo mt-). La columna móvil del latido (mt-spine, mt-vb) la usa también Signos vitales. */
.mt-vb,.mt-trace,.vs-wave{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.mt-vb .dot,.mt-trace .dot,.vs-wave .dot{fill:var(--pink);stroke:none}
.mt-trace,.vs-wave{display:none;width:100%;height:auto}
@media (max-width:719px){
  .mt-spine{position:relative;padding-left:3.75rem}
  .mt-spine::before{content:"";position:absolute;left:28px;top:0;bottom:0;width:4px;border-radius:2px;background:var(--accent)}
  .mt-spine>li{position:relative}
  .mt-phase,.vs-beat{min-height:6rem}
  .mt-vb{position:absolute;left:-3.75rem;top:50%;margin-top:-48px;background:var(--canvas)}
}
@media (min-width:720px){.mt-vb{display:none}.mt-trace,.vs-wave{display:block}}

/* Carriles. Escritorio: seis columnas; cada fase ocupa dos y cada compuerta queda sobre su borde (1/3 y 2/3), así los
   latidos de ecg_path(3) caen en 1/6, 1/2 y 5/6, bajo cada fase. Móvil: la banda es la columna de la izquierda. */
.mt-lanes{margin-top:3rem}
.mt-flow{list-style:none}
.mt-phase{display:flex;flex-direction:column;justify-content:center}
.mt-phase a{display:block;padding:.5rem 0;color:var(--ink);text-decoration:none}
.mt-phase a:hover .mt-name{text-decoration:underline;text-underline-offset:4px}
.mt-name{display:block;font-size:1.25rem;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.mt-gate{display:flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.8125rem;font-weight:600}
.mt-dia{flex:none;fill:var(--canvas);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.mt-band{position:relative;margin-top:1rem;padding-left:3.75rem}
.mt-band::before{content:"";position:absolute;left:25px;top:.55rem;width:10px;height:10px;border-radius:50%;background:var(--pink)}
.mt-band-name{color:var(--ink);font-weight:600}
.mt-band-text{max-width:var(--measure);margin-top:.35rem;font-size:.9375rem}
@media (min-width:720px){
  .mt-flow{display:grid;grid-template-columns:repeat(6,1fr);text-align:center}
  .mt-flow::before{content:"";grid-area:2/2/3/6;height:2px;background:var(--ink)}
  .mt-phase{position:relative;grid-row:1;justify-content:flex-end;padding:0 .75rem 1.25rem}
  .mt-phase::after{content:"";position:absolute;left:50%;bottom:0;width:2px;height:1rem;margin-left:-1px;background:var(--ink)}
  .mt-p0{grid-column:1/3}.mt-p1{grid-column:3/5}.mt-p2{grid-column:5/7}
  .mt-gate{grid-row:2;flex-direction:column;margin-top:-12px}
  .mt-g1{grid-column:2/4}.mt-g2{grid-column:4/6}
  .mt-band{overflow:hidden;overflow:clip;margin-top:1.25rem;padding:1rem 0 1.5rem;border-radius:16px;background:var(--surface-card)}
  .mt-band::before{content:none}
  .mt-band p{padding:0 1.5rem}
  .mt-band-name{margin-top:.5rem}
}
/* Secuencia de carga: la línea del proceso avanza, las compuertas aparecen, el pulso se dibuja y su punto late. */
@media (prefers-reduced-motion:no-preference) and (min-width:720px){
  .mt-flow::before{transform-origin:left;animation:grow-x .8s .1s cubic-bezier(.4,0,.2,1) both}
  .mt-dia{animation:pop .45s .45s both}
  .mt-g2 .mt-dia{animation-delay:.75s}
  .mt-trace path{stroke-dasharray:1;animation:draw 1.8s .5s cubic-bezier(.45,0,.25,1) both}
  .mt-trace .dot{transform-box:fill-box;transform-origin:center;animation:pop .4s 2.2s both,beat 1.6s 2.6s linear 3}
}

/* Fases: el rombo de la compuerta marca el paso de una a la siguiente. */
.mt-steps .step{position:relative}
.mt-steps .step+.step::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border:2px solid var(--ink);background:var(--canvas);transform:rotate(45deg)}
.mt-steps .step-name{font-size:1.25rem;letter-spacing:-.02em;line-height:1.3}
.mt-steps .label{display:block;margin:1.25rem 0 .25rem}
.mt-steps .step-name .label{margin-top:0}
.mt-chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none}
.mt-chips li{padding:.25rem .75rem;border:1px solid var(--hairline);border-radius:999px;background:var(--surface-soft);color:var(--ink);font-size:.875rem}

/* Capacidades: el índigo marca la parte del ícono que es dato. */
.mt-caps{display:grid;gap:1.25rem;margin-top:2.5rem;list-style:none}
@media (min-width:560px){.mt-caps{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.mt-caps{grid-template-columns:repeat(4,1fr)}}
.mt-cap.card{padding:1.5rem}
.mt-icon{display:block;margin-bottom:1rem;fill:none;stroke:var(--ink);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.mt-icon .ac{stroke:var(--accent)}
.mt-icon .fl{fill:var(--ink);stroke:none}
.mt-icon .fa{fill:var(--accent);stroke:none}
.mt-icon .mt-mask{fill:var(--surface-soft)}
.mt-dots{stroke-dasharray:0 7}
.mt-cap h3{font-size:1.125rem;font-weight:700;letter-spacing:-.02em}
.mt-tech{margin:.25rem 0 .75rem;color:var(--muted)}
.mt-cap p:last-child{font-size:.9375rem}

/* Piloto: escala, barras y tramos comparten columnas (filas, en móvil); cada tramo ocupa sus semanas (--n). */
.mt-tl{margin-top:2.5rem}
.mt-tl ol,.mt-bars{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;list-style:none}
.mt-weeks{margin-top:.5rem;color:var(--muted);text-align:center}
.mt-bars{height:14px;margin:.5rem 0 1rem}
.mt-bars span{margin:0 2px;border-radius:4px;background:var(--accent)}
.mt-bars span,.mt-segs li{grid-column:span var(--n)}
.mt-segs li{padding-right:1rem}
.mt-segs strong{display:block;color:var(--ink);font-size:.9375rem;line-height:1.35}
.mt-segs .mono{color:var(--muted)}
.mt-s1{--n:1}.mt-s2{--n:2}.mt-s3{--n:3}.mt-s4{--n:4}.mt-s5{--n:5}.mt-s6{--n:6}
.mt-s7{--n:7}.mt-s8{--n:8}.mt-s9{--n:9}.mt-s10{--n:10}.mt-s11{--n:11}.mt-s12{--n:12}
@media (max-width:639px){
  .mt-tl{display:grid;grid-template-columns:1.5rem 12px 1fr;column-gap:.75rem}
  .mt-tl .label{grid-column:1/-1;margin-bottom:.5rem}
  .mt-tl ol,.mt-bars{grid-auto-flow:row;grid-auto-rows:2.25rem;height:auto;margin:0}
  .mt-weeks li{line-height:2.25rem;text-align:right}
  .mt-bars span,.mt-segs li{grid-column:auto;grid-row:span var(--n)}
  .mt-bars span{margin:2px 0}
  .mt-segs li{padding:.4rem 0 0}
}
@keyframes mt-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes mt-wipe-y{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){.mt-bars{animation:mt-wipe linear both;animation-timeline:view();animation-range:entry 20% contain 20%}}
  @media (prefers-reduced-motion:no-preference) and (max-width:639px){.mt-bars{animation-name:mt-wipe-y;animation-range:entry 0% contain 30%}}
}

/* Observaciones: rótulo de lectura propia con borde punteado; las tres convergen en la conclusión. */
.mt-own{display:inline-block;margin-top:1.25rem;padding:.25rem .75rem;border:1px dashed var(--muted);border-radius:999px;color:var(--muted);font-size:.875rem}
.mt-obs{display:grid;margin-top:2rem;border-top:1px solid var(--hairline);list-style:none}
.mt-obs li{padding:1.25rem 0}
.mt-obs li+li{border-top:1px solid var(--hairline)}
.mt-obs h3{font-size:1.0625rem;font-weight:600;line-height:1.35}
.mt-obs p{margin-top:.5rem;font-size:.9375rem}
.mt-comb{display:none;width:100%;height:56px;fill:none;stroke:var(--muted);stroke-width:1.5}
.mt-comb path{vector-effect:non-scaling-stroke}
.mt-conclusion,.mt-rules li,.vs-closing{color:var(--ink);font-size:1.125rem;font-weight:600;line-height:1.45}
@media (min-width:720px){
  .mt-obs{grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--hairline)}
  .mt-obs li{padding:1.5rem}
  .mt-obs li+li{border-top:0;border-left:1px solid var(--hairline)}
  .mt-comb{display:block}
  .mt-conclusion{margin:1rem auto 0;text-align:center}
}

/* Reglas: no son una secuencia, sin números. */
.mt-rules{display:grid;gap:1.75rem 2.5rem;margin-top:2rem;list-style:none}
@media (min-width:640px){.mt-rules{grid-template-columns:1fr 1fr}}
.mt-rules li{padding-top:1rem;border-top:2px solid var(--ink)}

/* Página Signos vitales (prefijo vs-). El trazo del latido, la columna móvil y el cierre están en method.css. */
/* Anatomía del agente: el nodo con el símbolo y sus cuatro partes, unidas por trazos de tinta. */
.vs-def{display:grid;gap:2rem;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--hairline)}
@media (min-width:820px){.vs-def{grid-template-columns:1fr 1fr;gap:3rem;align-items:center}}
.vs-def-text{max-width:var(--measure);margin-top:.75rem;color:var(--ink);font-size:1.125rem}
.vs-anat{display:grid;grid-template-columns:3.5rem 2.5rem 1fr;align-items:center}
.vs-hub{display:grid;place-items:center;height:3.5rem;border:2px solid var(--ink);border-radius:50%;color:var(--ink)}
.vs-spokes{width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:1.5}
.vs-spokes path{vector-effect:non-scaling-stroke}
.vs-parts{display:grid;gap:.75rem;list-style:none}
.vs-parts li{padding:.75rem 1rem;border:1px solid var(--hairline);border-radius:12px;background:var(--surface-soft);color:var(--ink);font-weight:600;line-height:1.35}

/* Monitor: panel de tinta. Banda del rango, línea índigo que se dibuja al entrar en vista y el punto fuera de rango,
   rosado, con su pulso de señal. Crema con opacidad .7 y .82 sobre tinta: 9,4:1 y 12,7:1. */
.vs-monitor{margin-top:2rem;padding:1rem;border-radius:20px;background:var(--ink);color:var(--canvas)}
.vs-legend{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;padding:.25rem .5rem 1rem;font-size:.875rem}
.vs-legend span{display:inline-flex;align-items:center;gap:.5rem}
.vs-legend span::before{content:"";width:20px;height:10px;border-block:1px dashed var(--accent);background:rgba(99,102,241,.3)}
.vs-legend .vs-k-out::before{width:10px;border:0;border-radius:50%;background:var(--pink)}
.vs-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr));gap:1px;overflow:hidden;overflow:clip;border-radius:12px;background:rgba(255,250,240,.14);list-style:none}
.vs-tile{padding:1.25rem;background:var(--ink)}
.vs-tile .vs-tag{color:inherit;opacity:.7}
.vs-tile h3{margin-top:.25rem;color:var(--canvas);font-size:1.0625rem;font-weight:600}
.vs-tile p{opacity:.82;font-size:.9375rem}
.vs-spark{display:block;width:100%;height:auto;margin:.75rem 0;overflow:visible;background:linear-gradient(rgba(255,250,240,.06) 1px,transparent 1px) 0 0/100% 25%}
.vs-range{fill:var(--accent);fill-opacity:.3}
.vs-edge{fill:none;stroke:var(--accent);stroke-width:.6;stroke-dasharray:2 2}
.vs-line{fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.vs-out{fill:var(--pink)}
.vs-ring{fill:none;stroke:var(--pink);stroke-width:.8;opacity:0;transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .vs-ring{animation:blip 1.8s 1.2s ease-out 2}
  .vs-tile:nth-child(2n) .vs-ring{animation-delay:1.65s}
  .vs-tile:nth-child(3n) .vs-ring{animation-delay:2.1s}
}
/* En cada fila, las trazas se dibujan de izquierda a derecha. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .vs-tile:nth-child(3n+2) .draw{animation-range:entry 10% contain 15%}
    .vs-tile:nth-child(3n) .draw{animation-range:entry 20% contain 25%}
  }
}

/* Cómo late: un tiempo bajo cada latido; en móvil, la columna vertical. */
.vs-ecg{margin-top:2.5rem}
.vs-beats{list-style:none}
.vs-beat{display:flex;flex-direction:column;justify-content:center;padding:1rem 0}
.vs-beat h3{font-size:1.125rem;font-weight:700;letter-spacing:-.02em}
.vs-beat p{margin-top:.25rem;font-size:.9375rem}
@media (min-width:720px){
  .vs-beats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:.75rem;text-align:center}
  .vs-beat{display:block;padding:0 .75rem}
}

/* Página 2ndBrain: escena antes y después, tubería, capas, niveles de acceso y conexión. Índigo para los trazos de datos,
   tinta para nodos y compuertas. Los trazos que se dibujan al hacer scroll llevan .draw (site.css). */

/* Red de tres fuentes (escena y conexión): fuentes de 52 px con 10 px de separación, trazos de 48 × 176 px, nodo */
.bn-net{display:grid;grid-template-columns:minmax(0,1.25fr) 48px minmax(0,1fr);align-items:center;max-width:30rem;margin-top:1rem}
.bn-src{display:grid;gap:10px;list-style:none}
.bn-src li{display:flex;align-items:center;min-height:52px;padding:.25rem .625rem;border-radius:10px;background:var(--surface-card);color:var(--ink);font-size:.875rem;line-height:1.25}
.bn-wires{display:block;fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.bn-loose{stroke:var(--muted);stroke-dasharray:0 7}
.bn-loose .bn-ends{stroke-dasharray:none;stroke-width:7}
.bn-hub{display:flex;align-items:center;justify-content:center;min-height:52px;padding:.5rem .375rem;border:2px solid var(--ink);border-radius:12px;background:var(--ink);color:var(--canvas);font-size:.875rem;font-weight:700;line-height:1.25;text-align:center}
.bn-void{border-style:dashed;border-color:var(--muted);background:none}
.bn-down{grid-column:3;position:relative;display:flex;justify-content:center;min-height:1.75rem;padding:.5rem 0}
.bn-down::before{content:"";position:absolute;top:0;bottom:0;left:50%;margin-left:-1.5px;border-left:3px solid var(--accent)}
.bn-down.is-cut::before{bottom:45%;border-left:3px dotted var(--muted)}
.bn-tag{position:relative;padding:.125rem .5rem;border:1.5px solid var(--accent);border-radius:6px;background:var(--canvas);color:var(--link);font-weight:600}
.bn-end{grid-column:1/-1;display:flex;align-items:center;gap:.625rem;padding:.75rem 1rem;border:1.5px solid var(--ink);border-radius:12px;background:var(--canvas);color:var(--ink);font-size:.9375rem;font-weight:600;line-height:1.35}
.bn-end.is-cut{border-style:dashed;border-color:var(--muted);color:var(--muted)}
.bn-end svg{flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* Un lunes cualquiera: la pregunta arriba, un lado por escenario */
.bn-scene{margin-top:2.5rem}
.bn-ask{display:flex;align-items:center;gap:.75rem;padding:.875rem 1.125rem;border-radius:12px;background:var(--ink);color:var(--canvas);font-size:.9375rem}
.bn-ask::before{content:"";flex:none;width:.5rem;height:1.1em;background:var(--accent)}
.bn-sides{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));gap:1.25rem;margin-top:1.25rem}
.bn-side{padding:1.25rem 1rem;border:1px solid var(--hairline);border-radius:16px}
.bn-side.is-joined{background:var(--surface-soft)}
.bn-story{margin-top:1.25rem;font-size:.9375rem}

/* Tubería: riel continuo, nodos con el estado del trabajo y la compuerta humana al final */
.bn-pipe{margin-top:2.5rem;list-style:none}
.bn-pipe>li{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:1.25rem;padding-bottom:2.25rem}
.bn-pipe>li:last-child{padding-bottom:0}
.bn-pipe>li:not(:last-child)::before{content:"";position:absolute;left:14.5px;top:16px;bottom:-16px;border-left:3px solid var(--accent)}
.bn-pipe>li:nth-child(3)::before{border-left-style:dashed}
.bn-pipe h3{font-size:1.0625rem;font-weight:600;line-height:2rem}
.bn-pipe p{max-width:var(--measure)}
.bn-node{position:relative;grid-row:1/span 2;justify-self:center;width:22px;height:22px;margin-top:5px;border:3px solid var(--accent);border-radius:50%;background:var(--canvas)}
.bn-pipe>li:first-child .bn-node{background:var(--accent)}
.bn-pipe>li:nth-child(3) .bn-node{border-style:dashed}
.bn-gate{display:grid;place-items:center;width:32px;height:32px;margin:0;border:0;border-radius:8px;background:var(--ink)}
.bn-gate svg{fill:none;stroke:var(--canvas);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.bn-console{position:relative;grid-column:2;margin-top:1.25rem;border:1px solid var(--hairline);border-radius:12px;background:var(--surface-card)}
.bn-console::before{content:"";position:absolute;top:1.3rem;right:100%;width:calc(1.25rem + 16px);border-top:3px solid var(--accent)}
.bn-console .label{padding:.75rem 1rem;border-bottom:1px solid var(--hairline)}
.bn-console ul{list-style:none}
.bn-console li{display:flex;gap:.75rem;padding:.625rem 1rem;color:var(--ink)}
.bn-console li+li{border-top:1px solid var(--hairline)}
.bn-console li::before{content:"";flex:none;width:3px;height:1em;margin-top:.2em;border-radius:2px;background:var(--accent)}
@media (min-width:720px){
  .bn-pipe>li{grid-template-columns:32px 10rem minmax(0,1fr)}
  .bn-pipe>li>p{grid-column:3;grid-row:1;padding-top:.2rem}
  .bn-console{grid-column:2/-1}
}

/* Memoria y control: capas en vista explotada, niveles de acceso concéntricos y el resto de los componentes */
.bn-core{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:2.5rem 3.5rem;margin-top:2.5rem}
.bn-core h3{font-size:1.25rem;letter-spacing:-.02em}
.bn-core h3+p{margin-top:.5rem}
.bn-layers{margin-top:1.25rem;list-style:none}
.bn-layers li{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:1.25rem;padding-bottom:1.25rem}
.bn-layers li:not(:last-child)::before,.bn-layers li:not(:last-child)::after{content:"";position:absolute;top:20px;bottom:-20px;left:1.5px;border-left:1.5px dashed var(--muted)}
.bn-layers li:not(:last-child)::after{left:69.5px}
.bn-layers strong{display:block;color:var(--ink)}
.bn-plate{position:relative;z-index:1;fill:var(--accent);fill-opacity:.14;stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.bn-layers li:nth-child(2) .bn-plate{fill-opacity:.45}
.bn-layers li:nth-child(3) .bn-plate{fill-opacity:1}
.bn-rings{max-width:24rem;margin-top:1.5rem}
.bn-rings ol{display:grid;margin-top:.75rem;list-style:none;text-align:center;color:var(--ink);font-size:.875rem;font-weight:600}
.bn-rings li{grid-area:1/1;padding:.5rem 1rem;border:2px solid var(--accent);border-radius:20px;background:var(--surface-soft)}
.bn-rings li:nth-child(2){margin:2.5rem 1.5rem 1.5rem;border-radius:15px;background:var(--surface-card)}
.bn-rings li:nth-child(3){margin:5rem 3rem 3rem;border-color:var(--ink);border-radius:10px;background:var(--ink);color:var(--canvas)}
.bn-rest{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:0 3.5rem;margin-top:3rem;list-style:none}
.bn-rest li{padding:1.25rem 0;border-top:1px solid var(--hairline)}
.bn-rest h3{font-size:1rem;font-weight:600}
.bn-rest p{margin-top:.25rem;font-size:.9375rem}

/* Conexión: el diagrama y su leyenda lado a lado en pantallas anchas */
.bn-link{display:grid;gap:2rem 3.5rem;align-items:center;margin-top:2.5rem}
.bn-link .bn-net{margin-top:0}
.bn-link .closing{margin-top:0}
@media (min-width:900px){.bn-link{grid-template-columns:minmax(0,30rem) minmax(0,1fr)}}

/* El conector que baja del nodo crece después de que los trazos llegan a él. */
@keyframes bn-grow{from{transform:scaleY(0)}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .bn-net{view-timeline:--net}
    .bn-down:not(.is-cut)::before{transform-origin:top;animation:bn-grow linear both;animation-timeline:--net;animation-range:cover 32% cover 44%}
  }
}

/* Página Nosotros: socios, principios, el símbolo anotado y los datos de la firma. */

/* Socios: dos columnas editoriales con una regla de tinta arriba, sin tarjetas */
.ab-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:3rem 4rem;margin-top:3.5rem}
.ab-person{padding-top:1.5rem;border-top:2px solid var(--ink)}
.ab-who{display:flex;align-items:center;gap:1rem}
.ab-avatar{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:50%;background:var(--ink);color:var(--canvas);font-weight:700;letter-spacing:.02em}
.ab-name{font-size:1.375rem;line-height:1.2;letter-spacing:-.025em}
.ab-role{color:var(--muted);font-size:.9375rem}
.ab-rows{margin-top:1.25rem}
.ab-rows div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.25rem 1rem;padding:.75rem 0;border-top:1px solid var(--hairline)}
.ab-rows dt{padding-top:.2rem;color:var(--link);font:.75rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;text-transform:uppercase}
.ab-rows dd{overflow-wrap:anywhere}
.ab-rows address{font-style:normal}
.ab-rows a{display:inline-flex;align-items:center;min-height:44px;margin:-8.5px 0}
@media (max-width:479px){.ab-rows div{grid-template-columns:1fr}}
.ab-brings{margin-top:1rem;padding:1rem 1.25rem;border-left:3px solid var(--accent);border-radius:0 12px 12px 0;background:var(--surface-card)}
.ab-brings strong{color:var(--ink)}

/* Principios */
.ab-tenets{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:2rem 3rem;margin-top:2.5rem;list-style:none}
.ab-tenets li{padding-top:1.25rem;border-top:1px solid var(--hairline)}
.ab-icon{display:block;margin-bottom:1rem;fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.ab-icon .ac{stroke:var(--accent)}
.ab-icon .acf{fill:var(--accent);stroke:none}
.ab-tenets h3{font-size:1.0625rem;font-weight:600}
.ab-tenets p{margin-top:.375rem;font-size:.9375rem}

/* El símbolo anotado: lámina y leyenda lado a lado en pantallas anchas */
.ab-sym{display:grid;gap:2rem 3.5rem;align-items:center;margin-top:2.5rem}
@media (min-width:820px){.ab-sym{grid-template-columns:minmax(0,26rem) minmax(0,1fr)}}
.ab-sym svg{display:block;width:100%;max-width:26rem;height:auto}
.sym-frame{fill:var(--surface-soft);stroke:var(--hairline);stroke-width:1.5}
.sym-axis{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:4 6}
.sym-line,.sym-hl{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.sym-line{stroke:var(--ink)}
.sym-hl{stroke:var(--accent);opacity:0}
.sym-dot{fill:var(--pink);transform-box:fill-box;transform-origin:center}
.sym-cota{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.sym-label{fill:var(--ink);font:700 22px "Inter","Inter Fallback",system-ui,sans-serif}
.ab-parts{list-style:none}
.ab-parts li{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:1rem;align-items:baseline;padding:1rem 0;border-top:1px solid var(--hairline)}
.ab-key{color:var(--ink);font-size:1.5rem;font-weight:700;letter-spacing:-.03em;line-height:1}

/* Datos de la firma */
.ab-facts{max-width:40rem;margin-top:2rem}

/* Secuencia del símbolo, atada al paso de la lámina por la pantalla: el trazo se dibuja; el pico (A), el valle (V) y
   la diagonal compartida (AV) se resaltan en índigo uno tras otro mientras se dibuja su cota; al final el punto aparece
   y late. Sin línea de tiempo de vista o con movimiento reducido, la lámina queda completa y quieta. Cada trazo parte
   invisible: algunos motores pintan el remate redondeado de un trazo con el desplazamiento igual a su largo. */
@keyframes ab-draw{0%{opacity:0;stroke-dashoffset:1}1%{opacity:1}to{opacity:1;stroke-dashoffset:0}}
@keyframes ab-flash{0%{opacity:0;stroke-dashoffset:1}8%,75%{opacity:1}50%{stroke-dashoffset:0}to{opacity:0;stroke-dashoffset:0}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .ab-sym svg{view-timeline:--sym}
    .sym-line,.sym-hl,.sym-cota{stroke-dasharray:1}
    .sym-line,.sym-cota{animation:ab-draw linear both;animation-timeline:--sym}
    .sym-hl{animation:ab-flash linear both;animation-timeline:--sym}
    .sym-line{animation-range:cover 8% cover 28%}
    .sym-a{animation-range:cover 28% cover 38%}
    .sym-v{animation-range:cover 36% cover 46%}
    .sym-av{animation-range:cover 44% cover 54%}
    .sym-p{animation-range:cover 52% cover 56%}
    .sym-dot{animation:pop linear both,beat 1.6s linear 3;animation-timeline:--sym,auto;animation-range:cover 54% cover 58%,normal}
  }
}

.w-23{width:23%}
.w-39{width:39%}
.w-62{width:62%}
.w-88{width:88%}