/* ============================================================
   BPA SOLUCIÓN
   Dirección: "hoja de proceso". No una landing de SaaS: una ficha
   técnica de planta. Papel, filetes de 1px, códigos en monoespaciada,
   esquinas rectas, densidad donde importa y silencio donde no.
   Lo único redondo de la página es el robot: el contraste es a propósito.
   ============================================================ */

:root{
  /* Papel y tinta. Dos tonos de papel para dar ritmo, uno de tinta. */
  --paper:    #F3EEE4;
  --paper-2:  #E8E1D2;
  --ink:      #15120E;
  --ink-2:    #46403A;
  --ink-3:    #8A8175;

  /* Un solo acento. Aparece poco: numeración, estado activo, un CTA. */
  --accent:   #BF4526;

  --rule:     rgba(21,18,14,.18);
  --rule-2:   rgba(21,18,14,.10);
  --rule-d:   rgba(243,238,228,.18);

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --ease: cubic-bezier(.2,.7,.3,1);
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --max: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-variation-settings:'opsz' 14,'SOFT' 0,'WONK' 0;
  font-weight:300;
  font-size:1.02rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{ margin:0; font-weight:400; line-height:1.06; letter-spacing:-.02em; }
p,ul,ol,dl{ margin:0; }
a{ color:inherit; text-decoration:none; }
svg{ display:block; max-width:100%; }

/* Grano: el papel no es plano. */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.4;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

/* ============ NAVEGACIÓN ============ */
.nav{ position:fixed; inset:0 0 auto; z-index:800; transition:background .35s var(--ease); }
.nav.stuck{ background:rgba(243,238,228,.94); backdrop-filter:blur(8px); }
.nav.stuck .nav-in{ border-bottom-color:var(--rule); }
.nav-in{
  max-width:var(--max); margin-inline:auto; padding:1rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border-bottom:1px solid transparent; transition:border-color .35s var(--ease);
}

/* El nombre es la marca: sin mascota al lado que le reste peso. */
.brand{ display:flex; flex-direction:column; line-height:1; }
.brand-text{
  font-size:clamp(1.35rem,2.2vw,1.7rem); letter-spacing:-.02em;
  font-variation-settings:'opsz' 90,'SOFT' 16,'WONK' 1;
}
.brand-text strong{ font-weight:700; }
.brand-text em{ font-style:italic; font-weight:300; }
.brand-sub{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); margin-top:.45rem;
  transition:color .3s var(--ease);
}
.brand:hover .brand-sub{ color:var(--accent); }

.nav-links{ display:flex; align-items:center; gap:1.6rem; }
.nav-links a{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.06em;
  padding-bottom:2px; border-bottom:1px solid transparent;
}
.nav-links a:hover{ border-bottom-color:var(--accent); }
.nav-cta{ color:var(--accent); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:.4rem; cursor:pointer; }
.nav-toggle span{ width:22px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

/* ============ HERO ============ */
.hero{ padding:clamp(7rem,14vh,10rem) var(--gutter) clamp(3rem,7vw,5rem); }
.hero-in{
  max-width:var(--max); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.5rem,4vw,3rem); align-items:center;
}

.tag{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:1.8rem;
}

.hero h1{
  font-size:clamp(2.2rem,4.9vw,4rem);
  font-variation-settings:'opsz' 144,'SOFT' 24,'WONK' 1;
  max-width:15ch;
}
/* El subrayado es a mano alzada, no un borde. Es un detalle de firma. */
.u{
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:100% 3px; background-repeat:no-repeat; background-position:0 92%;
  padding-bottom:.06em;
}

.lede{ max-width:46ch; margin-top:1.6rem; color:var(--ink-2); }

.hero-act{ display:flex; flex-wrap:wrap; align-items:center; gap:1.6rem; margin-top:2.4rem; }

.hero-bot{ justify-self:end; width:100%; max-width:470px; }

/* ============ BOTONES Y ENLACES ============ */
.btn{
  display:inline-block; padding:.85rem 1.5rem;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink); border-radius:2px;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.09em; text-transform:uppercase;
  cursor:pointer; transition:background .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover{ background:var(--accent); border-color:var(--accent); }
.btn-wide{ width:100%; }

.lnk{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.06em;
  border-bottom:1px solid var(--rule); padding-bottom:2px;
  transition:border-color .25s;
}
.lnk:hover{ border-bottom-color:var(--accent); }
.arr{ display:inline-block; transition:transform .3s var(--ease); }
.lnk:hover .arr{ transform:translateY(3px); }

/* ============ RITMO DE BANDAS ============
   No todas respiran igual: la de experiencia es apretada, la del caso
   y la de contacto tienen aire. Eso es el ritmo editorial. */
.band{ padding:clamp(3.5rem,7vw,5.5rem) var(--gutter); }
.band-air{ padding-block:clamp(5.5rem,11vw,9rem); }
.band-tight{ padding-block:clamp(2.2rem,4vw,3rem); }

/* El filete con el código encima: la firma de la página. */
.rule{
  max-width:var(--max); margin:0 auto clamp(2.2rem,4.5vw,3.6rem);
  display:flex; align-items:baseline; gap:1rem;
  border-top:1px solid var(--ink); padding-top:.7rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
}
.rule-n{ color:var(--accent); }
.rule-t{ color:var(--ink-3); }
.rule-dark{ border-top-color:var(--rule-d); }
.rule-dark .rule-t{ color:rgba(243,238,228,.45); }

/* Retícula asimétrica: la columna de la izquierda no es la mitad. */
.sheet{
  max-width:var(--max); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(1.5rem,5vw,4.5rem);
}
/* La columna de contenido siempre es la ancha, aunque la sección no
   traiga encabezado lateral (así todo queda alineado a la misma guía). */
.sheet-main{ grid-column:2; }
.sheet-side{ position:sticky; top:6rem; align-self:start; }
.sheet-side h2{
  font-size:clamp(1.45rem,2.5vw,2rem);
  font-variation-settings:'opsz' 90,'SOFT' 16,'WONK' 1;
}
.sheet-side > p{ margin-top:.9rem; color:var(--ink-3); max-width:34ch; font-size:.96rem; }

.big{ font-size:clamp(1.1rem,1.9vw,1.35rem); line-height:1.5; max-width:52ch; color:var(--ink-2); }

/* ============ 01 · HOY vs ROBOT ============
   El argumento es la longitud: siete pasos contra dos. El vacío
   debajo de la columna del robot es el mensaje. */
.ba{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(1.5rem,4vw,3rem); }
.ba-col{ padding-top:1rem; border-top:1px solid var(--rule); }
.ba-col-bot{ border-top-color:var(--accent); }
.ba-h{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:1.4rem;
}
.ba-h-on{ color:var(--accent); }
.ba-list{ list-style:none; padding:0; counter-reset:ba; }
.ba-list li{
  counter-increment:ba; position:relative; padding:.55rem 0 .55rem 2.4rem;
  border-bottom:1px solid var(--rule-2); font-size:.98rem;
}
.ba-list li::before{
  content:counter(ba,decimal-leading-zero); position:absolute; left:0; top:.62rem;
  font-family:var(--mono); font-size:.68rem; color:var(--ink-3);
}
.ba-col-bot .ba-list li::before{ color:var(--accent); }
.ba-note{ margin-top:1.3rem; font-size:.92rem; color:var(--ink-3); max-width:38ch; font-style:italic; }

/* ============ 02 · ÍNDICE DE SERVICIOS ============
   Filas, no tarjetas. Una tarjeta aquí no aportaría nada. */
.idx{ list-style:none; padding:0; }
.idx li{
  display:grid; grid-template-columns:2.4rem minmax(0,1fr) minmax(0,1.5fr) 4.5rem;
  gap:1rem; align-items:start;
  padding:1.5rem 0; border-top:1px solid var(--rule);
  transition:background .3s var(--ease);
}
.idx li:last-child{ border-bottom:1px solid var(--rule); }
.idx li:hover{ background:rgba(21,18,14,.03); }
.idx-n{ font-family:var(--mono); font-size:.72rem; color:var(--ink-3); padding-top:.35rem; }
.idx li:hover .idx-n{ color:var(--accent); }
.idx h3{ font-size:1.18rem; font-variation-settings:'opsz' 60,'SOFT' 10; }
.idx p{ font-size:.95rem; color:var(--ink-2); }
.idx-meta{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); padding-top:.4rem; text-align:right;
}

/* ============ 03 · LÍNEA ANCLADA ============ */
.dark{ background:var(--ink); color:var(--paper); }
.pin{ height:300vh; position:relative; }
.pin-inner{ position:sticky; top:0; height:100vh; min-height:600px; display:flex; align-items:center; overflow:hidden; }
.pin-wrap{ width:100%; padding-inline:var(--gutter); }
.pin-hint{
  max-width:var(--max); margin:clamp(1.5rem,4vh,2.5rem) auto 0;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(243,238,228,.35); transition:opacity .4s;
}
.pin-hint.done{ opacity:0; }

.line{ position:relative; max-width:var(--max); margin-inline:auto; }
.line-rail{ position:absolute; inset:0 0 auto; top:9px; height:1px; background:var(--rule-d); }
.line-fill{ height:100%; width:0; background:var(--accent); transition:width .15s linear; }

.steps{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:1.6rem; }
.step{ opacity:.25; transition:opacity .5s var(--ease); }
.step.lit{ opacity:1; }
.step-n{
  display:inline-block; font-family:var(--mono); font-size:.68rem;
  background:var(--ink); color:rgba(243,238,228,.4); padding-right:.8rem;
  position:relative; z-index:1;
}
.step.lit .step-n{ color:var(--accent); }
.step h3{ font-size:1.12rem; margin:1.4rem 0 .5rem; font-variation-settings:'opsz' 60,'SOFT' 10; }
.step p{ font-size:.9rem; color:rgba(243,238,228,.55); }

/* ============ 04 · DEFINICIONES ============ */
.defs{ margin-top:2.4rem; }
.defs > div{
  display:grid; grid-template-columns:minmax(0,13rem) minmax(0,1fr); gap:1.5rem;
  padding:1.1rem 0; border-top:1px solid var(--rule);
}
.defs > div:last-child{ border-bottom:1px solid var(--rule); }
dt{ font-size:1.02rem; }
dd{ margin:0; font-size:.94rem; color:var(--ink-2); }

/* ============ 05 · EXPERIENCIA ============ */
.sectores{ font-size:clamp(1.15rem,2.2vw,1.6rem); line-height:1.45; max-width:44ch; font-weight:300; }
.sectores b{ font-weight:600; font-style:italic; }

/* ============ MANIFIESTO ============ */
.manifesto{ background:var(--paper-2); padding:clamp(4.5rem,9vw,7.5rem) var(--gutter); }
.manifesto blockquote{ max-width:var(--max); margin-inline:auto; }
.manifesto p{
  font-size:clamp(1.5rem,3.6vw,2.8rem); line-height:1.2; max-width:20ch;
  font-variation-settings:'opsz' 144,'SOFT' 20,'WONK' 1;
}
.manifesto cite{
  display:block; margin-top:2rem; font-style:normal;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}

/* ============ 06 · LISTA LLANA ============ */
.plain{ list-style:none; padding:0; margin:2rem 0; max-width:44ch; }
.plain li{ padding:.7rem 0; border-top:1px solid var(--rule-2); font-size:.98rem; }
.plain li:first-child{ border-top:0; }
.sheet-main > .btn{ margin-top:1rem; }

/* ============ 07 · PREGUNTAS ============ */
.faq details{ border-top:1px solid var(--rule); }
.faq details:last-child{ border-bottom:1px solid var(--rule); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.15rem 2.5rem 1.15rem 0;
  font-size:1.08rem; position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after,
.faq summary::before{
  content:''; position:absolute; right:.4rem; top:50%; background:var(--ink);
  transition:transform .3s var(--ease), opacity .3s;
}
.faq summary::before{ width:13px; height:1px; }
.faq summary::after{ width:1px; height:13px; right:.95rem; transform:translateY(-6px); }
.faq details[open] summary::after{ opacity:0; }
.faq details[open] summary{ color:var(--accent); }
.faq p{ padding:0 0 1.4rem; max-width:60ch; color:var(--ink-2); font-size:.96rem; }

/* ============ 08 · CONTACTO ============ */
.cnt{ list-style:none; padding:0; margin-top:2.5rem; }
.cnt li{ display:grid; grid-template-columns:5.5rem 1fr; gap:1rem; padding:.7rem 0; border-top:1px solid var(--rule-2); }
.cnt li > span{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding-top:.28rem; }
.cnt a{ border-bottom:1px solid var(--rule); padding-bottom:1px; }
.cnt a:hover{ border-bottom-color:var(--accent); color:var(--accent); }
.cnt em{ font-style:normal; color:var(--ink-2); }

.form{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 1.5rem; align-content:start; }
.f{ display:flex; flex-direction:column-reverse; }
.f-wide{ grid-column:1/-1; }
.f label{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:.45rem;
  transition:color .25s;
}
.f input,.f select,.f textarea{
  font-family:var(--serif); font-size:1rem; font-weight:300; color:var(--ink);
  background:none; border:0; border-bottom:1px solid var(--ink);
  padding:.45rem 0; outline:none; resize:vertical; border-radius:0;
}
.f select{ appearance:none; cursor:pointer; }
.f input:focus,.f select:focus,.f textarea:focus{ border-bottom-color:var(--accent); }
.f:focus-within label{ color:var(--accent); }
.f.err input,.f.err select,.f.err textarea{ border-bottom-color:var(--accent); }
.form .btn{ grid-column:1/-1; }
.f-note{ grid-column:1/-1; font-family:var(--mono); font-size:.66rem; color:var(--ink-3); margin-top:-.6rem; }

/* ============ PIE ============ */
.foot{ background:var(--ink); color:rgba(243,238,228,.6); padding:3rem var(--gutter) 2.5rem; }
.foot-in{
  max-width:var(--max); margin-inline:auto;
  display:grid; grid-template-columns:auto 1fr auto; gap:1rem 2rem; align-items:baseline;
}
.foot-brand{ font-size:1.3rem; color:var(--paper); }
.foot-brand strong{ font-weight:700; }
.foot-brand em{ font-style:italic; font-weight:300; }
.foot-tag{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; }
.foot-nav{ grid-column:1/-1; display:flex; flex-wrap:wrap; gap:1.4rem; padding-top:1.6rem; border-top:1px solid var(--rule-d); }
.foot-nav a{ font-family:var(--mono); font-size:.72rem; }
.foot-nav a:hover{ color:var(--accent); }
.foot-copy{ grid-column:1/-1; font-family:var(--mono); font-size:.66rem; color:rgba(243,238,228,.35); }

/* ============ WHATSAPP ============ */
.wa{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:850;
  display:flex; align-items:center; gap:.5rem;
  padding:.7rem 1rem; border-radius:3px;
  background:#1D7A4B; color:#fff;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em;
  transform:translateY(150%); transition:transform .4s var(--ease), background .25s;
}
.wa.show{ transform:none; }
.wa:hover{ background:#176139; }

/* ============================================================
   ROBOT — la firma de la marca.
   Entra una sola vez y saca el portátil. A partir de ahí repite su
   turno sin parar: abre, escribe el registro de lo que hizo, lo
   confirma, cierra y vuelve a empezar. Como un robot de verdad.

   Guion de cada turno (porcentaje de --rb-seq):
     0–14 %   abre el portátil     · 8–16 % manos al teclado
     16–74 %  escribe el registro
     76–86 %  lo confirma y se alegra
     88–100 % cierra y vuelve a arrancar
   ============================================================ */
.rb{ --rb-seq:9s; width:100%; height:auto; }

.rb-metal   { fill:url(#rbSteel); }
.rb-metal-d,
.rb-ear,
.rb-deck    { fill:url(#rbSteelDark); }
.rb-panel,
.rb-visor   { fill:#262C34; }
.rb-screen  { fill:#10151B; }
.rb-joint   { fill:#3A414B; }
.rb-limb    { fill:none; stroke:url(#rbSteelDark); stroke-width:15; stroke-linecap:round; }
.rb-hand    { fill:url(#rbSteel); }
.rb-keys    { fill:rgba(16,21,27,.5); }
.rb-shadow  { fill:rgba(21,18,14,.13); }
.rb-dot     { fill:rgba(180,188,199,.35); }

.rb-eye  { fill:#F0B33C; }
.rb-eye-l{ transform-origin:196px 88px; }
.rb-eye-r{ transform-origin:244px 88px; }
.rb-mouth{ fill:none; stroke:#B4BCC7; stroke-width:3.4; stroke-linecap:round; transform-origin:220px 108px; }
.rb-ant-stem{ stroke:#3A414B; stroke-width:3.4; stroke-linecap:round; fill:none; }
.rb-ant-dot { fill:var(--accent); }
.rb-led{ fill:#F0B33C; opacity:.75; transform-origin:186px 0; }
.rb-led-2{ fill:#5FA98A; }
.rb-led-3{ fill:var(--accent); }

/* El texto de la pantalla es contenido real, no relleno decorativo. */
.rb-log text{ font-family:var(--mono); font-size:8px; fill:rgba(180,188,199,.8); }
.rb-log-end{ fill:#F0B33C; }
.rb-caret{ fill:#F0B33C; }

/* Estado inicial: robot solo, sin portátil, brazos abajo. */
.rb-stage{ opacity:0; }
.rb-laptop{ opacity:0; }
.rb-lid{ transform-origin:220px 332px; transform:scaleY(.03); }
.rb-arm-l{ transform-origin:148px 178px; transform:rotate(16deg); }
.rb-arm-r{ transform-origin:292px 178px; transform:rotate(-16deg); }
.rb-clip{ transform-origin:142px 250px; transform:scaleY(0); }
.rb-caret{ opacity:0; }

/* Todo arranca cuando el robot está a la vista.
   La llegada pasa una sola vez; el turno de trabajo se repite. */
.rb.on .rb-stage { animation:rbIn  .9s var(--ease) forwards; }
.rb.on .rb-laptop{ animation:rbOut 1.2s var(--ease) .3s forwards; }

.rb.on .rb-lid   { animation:rbLid   var(--rb-seq) var(--ease) 1.6s infinite; }
.rb.on .rb-arm-l { animation:rbArmL  var(--rb-seq) var(--ease) 1.6s infinite; }
.rb.on .rb-arm-r { animation:rbArmR  var(--rb-seq) var(--ease) 1.6s infinite; }
.rb.on .rb-clip  { animation:rbType  var(--rb-seq) steps(5)    1.6s infinite; }
.rb.on .rb-caret { animation:rbCaret .9s steps(2) infinite,
                             rbCaretStep var(--rb-seq) steps(5) 1.6s infinite; }
.rb.on .rb-eye   { animation:rbEye   var(--rb-seq) var(--ease) 1.6s infinite; }
.rb.on .rb-mouth { animation:rbMouth var(--rb-seq) var(--ease) 1.6s infinite; }
.rb.on .rb-bob   { animation:rbBob .26s ease-in-out infinite alternate; }
.rb.on .rb-bob-b { animation-delay:.13s; }
.rb.on .rb-led-1 { animation:rbLed 1.9s var(--ease) infinite; }
.rb.on .rb-led-2 { animation:rbLed 2.6s var(--ease) infinite .3s; }
.rb.on .rb-led-3 { animation:rbLed 1.5s var(--ease) infinite .7s; }

/* Llegada (una vez) */
@keyframes rbIn { from{ opacity:0; transform:translateY(26px);} to{ opacity:1; transform:none;} }
@keyframes rbOut{ from{ opacity:0; transform:translateY(50px);} to{ opacity:1; transform:none;} }

/* Turno de trabajo (en bucle) */
@keyframes rbLid  { 0%{ transform:scaleY(.03);} 10%{ transform:scaleY(1.04);}
                    14%,86%{ transform:scaleY(1);} 96%,100%{ transform:scaleY(.03);} }
@keyframes rbArmL { 0%,6%{ transform:rotate(16deg);} 16%,84%{ transform:rotate(0);}
                    94%,100%{ transform:rotate(16deg);} }
@keyframes rbArmR { 0%,6%{ transform:rotate(-16deg);} 16%,84%{ transform:rotate(0);}
                    94%,100%{ transform:rotate(-16deg);} }
@keyframes rbType { 0%,16%{ transform:scaleY(0);} 74%,86%{ transform:scaleY(1);}
                    92%,100%{ transform:scaleY(0);} }
@keyframes rbCaretStep{ 0%,14%{ opacity:0; transform:translateY(0);} 16%{ opacity:1;}
                        74%{ opacity:1; transform:translateY(48px);}
                        80%,100%{ opacity:0; transform:translateY(48px);} }
@keyframes rbEye  { 0%,34%,36%,60%,62%,74%{ transform:scaleY(1);}
                    35%,61%{ transform:scaleY(.1);}
                    78%,86%{ transform:scaleY(.3);} 90%,100%{ transform:scaleY(1);} }
@keyframes rbMouth{ 0%,74%{ transform:scale(1);} 79%,86%{ transform:scale(1.22);}
                    92%,100%{ transform:scale(1);} }
@keyframes rbBob  { from{ transform:translateY(0);} to{ transform:translateY(4px);} }
@keyframes rbLed  { 0%,100%{ transform:scaleX(.25);} 50%{ transform:scaleX(1);} }
@keyframes rbCaret{ 0%,49%{ opacity:1;} 50%,100%{ opacity:0;} }

/* ============ ENTRADA DE SECCIONES ============
   Solo las secciones, no cada elemento. Un desplazamiento corto. */
[data-reveal]{ opacity:0; transform:translateY(14px); }
[data-reveal].in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }

/* ============ ADAPTACIÓN ============ */
/* Debajo de 1240 la fila no cabe en cuatro columnas: la descripción
   baja bajo el título en vez de encogerse hasta ser ilegible. */
@media (max-width:1240px){
  .idx li{ grid-template-columns:2.2rem minmax(0,1fr) 4.5rem; }
  .idx p{ grid-column:2/3; margin-top:.5rem; }
  .idx-meta{ grid-row:1; grid-column:3; }
}

@media (max-width:1040px){
  .hero-in{ grid-template-columns:1fr; gap:2.5rem; }
  .hero-bot{ justify-self:center; max-width:400px; }
  .hero h1{ max-width:20ch; }
}

@media (max-width:900px){
  .sheet{ grid-template-columns:1fr; gap:2rem; }
  .sheet-main{ grid-column:1; }
  .sheet-side{ position:static; }
  .ba{ grid-template-columns:1fr; gap:2rem; }
  .defs > div{ grid-template-columns:1fr; gap:.3rem; }
  /* Sin anclaje en pantalla chica: atrapar el scroll ahí incomoda.
     Pero la línea no se pierde: gira a vertical y se llena igual
     mientras bajas. La composición cambia, la idea se conserva. */
  .pin{ height:auto !important; }
  .pin-inner{ position:static; height:auto; min-height:0; display:block; padding-block:clamp(3.5rem,8vw,5rem); }
  .pin-hint{ display:none; }

  .line{ padding-left:2.6rem; }
  .line-rail{ inset:.5rem auto .8rem 9px; width:1px; height:auto; }
  .line-fill{ width:100%; height:0; transition:height .15s linear; }

  .steps{ grid-template-columns:1fr; gap:0; }
  .step{ position:relative; padding:1.1rem 0 1.5rem; border-top:1px solid var(--rule-d); }
  .step:first-child{ border-top:0; padding-top:0; }
  .step-n{
    position:absolute; left:-2.6rem; top:1.15rem;
    width:1.1rem; text-align:center; padding:.3rem 0;
  }
  .step:first-child .step-n{ top:0; }
  .step h3{ margin:.1rem 0 .4rem; }
}

@media (max-width:720px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:fixed; inset:0 0 auto; padding:5.5rem var(--gutter) 2rem;
    flex-direction:column; align-items:flex-start; gap:1.1rem;
    background:var(--paper); border-bottom:1px solid var(--rule);
    transform:translateY(-102%); transition:transform .45s var(--ease); z-index:1;
  }
  .nav-links.open{ transform:none; }
  .nav-links a{ font-size:1.15rem; font-family:var(--serif); letter-spacing:0; }
  .brand,.nav-toggle{ position:relative; z-index:2; }
  .idx li{ grid-template-columns:2rem 1fr; }
  .idx-meta{ display:none; }
  .form{ grid-template-columns:1fr; }
  .foot-in{ grid-template-columns:1fr; }
  .wa span{ display:none; }
  .wa{ padding:.85rem; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
  /* El robot se queda en su estado final: portátil abierto y registro escrito. */
  .rb-stage,.rb-laptop{ opacity:1; }
  .rb-lid{ transform:scaleY(1); }
  .rb-arm-l,.rb-arm-r{ transform:none; }
  .rb-clip{ transform:scaleY(1); }
}