/* Generado por build-servicios.py: no editar a mano. Compartido con la landing (desde arcilla.html) + servicios.src.css + procesos.src.css */
/* ============ Tokens (Pulso Design System, versión arcilla) ============ */
:root{
  --terracotta-100:#F6E3DA;--terracotta-200:#E9C1B1;--terracotta-300:#D99A83;--terracotta-400:#C97A60;--terracotta-500:#B85C45;--terracotta-600:#9E4A35;--terracotta-700:#7F3A29;--terracotta-800:#5C2A1D;--terracotta-900:#3A1810;
  --cream-50:#FBF7F1;--cream-100:#F5EDE2;--cream-200:#ECDFCF;--cream-300:#DFCDB7;
  --hero-cream:#EEE0CD;--hero-home:#F5E7D8;--band-cream:#F1EAE0;--card-cream:#F3E6D3;
  --sand:#E8D5BC;--olive:#6B7A3D;--ochre:#D19A3B;
  --ink:#22140F;--ink-soft:#5A463E;--ink-muted:#725C53;
  --white:#FFFFFF;
  --text-body:var(--ink);--text-muted:var(--ink-soft);--text-subtle:var(--ink-muted);--text-brand:var(--terracotta-500);
  --text-on-dark:var(--cream-50);--text-on-dark-muted:var(--terracotta-100);
  --border-subtle:rgba(34,20,15,.12);
  --action:var(--terracotta-600);--action-hover:var(--terracotta-700);--warn:#A8523C;
  --shadow-float:0 24px 60px rgba(34,20,15,.25);
  --ease-out:cubic-bezier(.2,.7,.2,1);--ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:160ms;--dur-base:280ms;--dur-slow:600ms;
  --font-display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --font-body:"Onest","Helvetica Neue",Arial,sans-serif;
  --text-xs:12px;--text-sm:14px;--text-md:16px;--text-lg:18px;--text-xl:22px;--text-2xl:28px;--text-3xl:36px;--text-4xl:48px;--text-5xl:64px;
  --leading-tight:1.02;--leading-snug:1.12;--leading-normal:1.5;--leading-relaxed:1.65;
  --tracking-display:-0.03em;--tracking-caps:0.08em;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;
  --container-max:1200px;--container-pad:clamp(20px,5vw,64px);
  --nav-h:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
html,body{margin:0}
body{background:var(--white);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-md);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--terracotta-500)}a:hover{color:var(--terracotta-700)}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--terracotta-500);outline-offset:3px}
.sr{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.sr:focus{left:16px;top:16px;width:auto;height:auto;padding:8px 12px;background:var(--white);z-index:100;border-radius:8px}

/* ============ Primitives ============ */
.section{padding:var(--space-9) var(--container-pad);background:var(--white);color:var(--text-body)}
.section.terracotta{background:var(--terracotta-600);color:var(--text-on-dark)}
.inner{max-width:var(--container-max);margin:0 auto}
.h2{margin:0;font-family:var(--font-display);font-weight:600;font-size:var(--text-4xl);line-height:var(--leading-snug);letter-spacing:var(--tracking-display);color:var(--text-body);max-width:720px;text-wrap:balance}
.p{margin:0;font-size:var(--text-lg);line-height:var(--leading-relaxed);color:var(--text-muted);max-width:620px}
.eyebrow{font-size:var(--text-xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;font-weight:500;color:var(--text-brand)}
/* Logo (propuesta "latido", 23 sep 2026): la palabra en barro, p larga y l alta (aparte: unida a la u se leía "puso"); en el menú la l late una vez al cargar. Fuente del dibujo: The Pulso/logo-explorations/latido/fuente/web.py */
.logo{display:inline-flex;align-items:center;color:var(--terracotta-600);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
.logo:hover{color:var(--terracotta-700)}
.logo svg{display:block;height:32px;width:auto;overflow:visible}
.foot-brand .logo{align-self:flex-start}
.foot-brand .logo svg{height:44px}
.logo-lat{transform-box:fill-box;transform-origin:50% 100%}
.nav .logo-lat{animation:latido .9s cubic-bezier(.3,.7,.3,1) .35s both}
@keyframes latido{0%{transform:scaleY(.85)}55%{transform:scaleY(1.05)}100%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.nav .logo-lat{animation:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 20px;font-family:var(--font-body);font-weight:500;font-size:var(--text-md);border-radius:8px;border:1px solid transparent;cursor:pointer;background:var(--action);color:var(--cream-50);transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);text-decoration:none}
.btn:hover{background:var(--action-hover)}
.btn:active{transform:translateY(1px)}
.btn.sm{height:36px;padding:0 14px;font-size:var(--text-sm)}
.btn.lg{height:54px;padding:0 26px;font-size:var(--text-lg)}
.btn.pill{border-radius:999px}
.btn.secondary{background:var(--cream-100);color:var(--text-body)}.btn.secondary:hover{background:var(--cream-200)}
.btn.inverse{background:var(--ink);color:var(--cream-50)}.btn.inverse:hover{background:#3A2A24}
.icon{width:1em;height:1em;flex:none}

/* ============ Nav ============ */
.nav{position:absolute;left:0;right:0;top:0;z-index:20;padding:0 var(--container-pad);background:transparent;transition:background .25s}
.nav.scrolled{position:fixed;background:rgba(255,255,255,.96)}
@media (hover:hover) and (pointer:fine){.nav.scrolled{background:rgba(255,255,255,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}}
.nav-in{max-width:var(--container-max);margin:0 auto;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid rgba(34,20,15,.14)}
.nav.scrolled .nav-in{border-bottom-color:var(--border-subtle)}
.nav-links{display:flex;gap:36px;align-self:stretch}
.nav-tab{display:flex;align-items:center;font-size:var(--text-sm);font-weight:500;color:var(--text-muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s}
.nav-tab[aria-current="page"]{color:var(--text-body);border-bottom-color:var(--ink)}
.nav-tab:hover{color:var(--text-body);border-bottom-color:var(--terracotta-300)}

.nav-actions{display:flex;align-items:center;gap:10px}
.nav-menu-btn{display:none;width:40px;height:40px;border-radius:999px;border:1px solid rgba(34,20,15,.16);background:rgba(255,255,255,.7);color:var(--text-body);cursor:pointer;place-items:center;padding:0}
.nav-menu-btn .icon{width:18px;height:18px}
.nav-menu-btn .i-close,.nav-menu-btn[aria-expanded="true"] .i-open{display:none}
.nav-menu-btn[aria-expanded="true"] .i-close{display:block}
.nav-panel{display:none}
@media (max-width:900px){
  .nav-menu-btn{display:grid}
  .nav.open{background:var(--white)}
  .nav-panel:not([hidden]){display:flex;flex-direction:column;max-width:var(--container-max);margin:0 auto;padding:4px 0 20px}
  .nav-panel a{padding:14px 0;border-bottom:1px solid var(--border-subtle);font-family:var(--font-display);font-weight:600;font-size:24px;letter-spacing:-.02em;color:var(--text-body);text-decoration:none}
  .nav-panel a[aria-current="page"]{color:var(--text-brand)}
}

/* CTA píldora: texto en mayúsculas + círculo relleno con flecha diagonal. Tamaños sm (nav), md (hero), lg (cierre). */
.cta-pill{display:inline-flex;align-items:center;gap:18px;padding:9px 9px 9px 28px;border-radius:999px;background:var(--action);color:#FBF7F1;font-family:var(--font-body);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;line-height:1;border:0;cursor:pointer;text-align:left;white-space:nowrap;text-decoration:none;transition:transform .25s,background .25s}
.cta-pill:hover{background:var(--action-hover)}
.cta-pill:focus-visible{outline:2px solid var(--terracotta-500);outline-offset:4px}
.cta-pill .arr{width:42px;height:42px;border-radius:999px;background:#FBF7F1;color:var(--action);display:grid;place-items:center;flex:none;transition:transform .25s var(--ease-out)}
.cta-pill .arr .icon{width:18px;height:18px}
.cta-pill:hover .arr{transform:rotate(45deg)}
.cta-pill.sm{gap:10px;padding:5px 5px 5px 16px;font-size:12px}
.cta-pill.sm .arr{width:28px;height:28px}
.cta-pill.sm .arr .icon{width:13px;height:13px}
.cta-pill.lg{gap:20px;padding:10px 10px 10px 32px;font-size:16px}
.cta-pill.lg .arr{width:48px;height:48px}
.cta-pill.lg .arr .icon{width:20px;height:20px}
.cta-pill.inverse{background:var(--ink);color:var(--cream-50)}
.cta-pill.inverse:hover{background:#3A2A24}
.cta-pill.inverse .arr{background:var(--cream-50);color:var(--ink)}
/* Botones con texto largo ("Hablemos de tus procesos", "Revisemos cómo trabaja tu firma"): nunca más anchos que la
   pantalla; en celular angosto el texto pasa a dos líneas en vez de salirse del margen (21 sep). */
.cta-pill{max-width:100%}
@media (max-width:420px){.cta-pill:not(.sm){white-space:normal;line-height:1.25}}
.hero-cta{justify-self:start;box-shadow:0 20px 40px -24px rgba(92,42,29,.6)}
.hero-cta:hover{transform:translateY(-2px)}
/* Botones con el círculo que viaja (.cta-reveal): los del principio y del cierre de las tres páginas (22 sep, Pato).
   La cápsula tiene su tamaño final desde el primer cuadro: el círculo real (.arr) se queda en su lugar, invisible,
   sosteniendo el ancho y el alto; lo que viaja es una copia idéntica dibujada con ::after, que arranca pegada a la
   izquierda con la flecha mirando a la derecha, llega encima del real y ahí gira hasta la diagonal de siempre. El texto
   aparece justo detrás, con un recorte que se abre al mismo ritmo. Arranca cuando cta-reveal.js pone .rev-on (el del
   principio al cargar, el del cierre al entrar en pantalla); al terminar pone .rev-done y se ve el círculo real, así
   el hover y el foco siguen como siempre. Con movimiento reducido no se anima nada. */
.cta-reveal{--rev-dur:1.8s;--rev-delay:.35s;--rev-ease:cubic-bezier(.33,0,.2,1);--rev-c:42px;--rev-in:9px;--rev-ico:18px;
  --rev-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239E4A35' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E")}
.cta-reveal.lg{--rev-c:48px;--rev-in:10px;--rev-ico:20px}
.cta-reveal.inverse{--rev-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322140F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E")}
@media (max-width:520px){.cta-reveal.hero-cta{--rev-c:38px;--rev-in:8px}}
@media (prefers-reduced-motion:no-preference){
  .js .cta-reveal{position:relative}
  .js .cta-reveal:not(.rev-done) .arr{visibility:hidden}
  .js .cta-reveal:not(.rev-done)>span:first-child{clip-path:inset(0 100% 0 0)}
  .js .cta-reveal:not(.rev-done)::after{
    content:"";position:absolute;top:50%;left:var(--rev-in);width:var(--rev-c);height:var(--rev-c);margin-top:calc(var(--rev-c) / -2);
    border-radius:999px;background:#FBF7F1 var(--rev-arrow) center/var(--rev-ico) var(--rev-ico) no-repeat;pointer-events:none;transform:rotate(45deg)
  }
  .js .cta-reveal.rev-on:not(.rev-done)>span:first-child{animation:rev-txt var(--rev-dur) var(--rev-ease) var(--rev-delay) both}
  .js .cta-reveal.rev-on:not(.rev-done)::after{
    animation:rev-arr var(--rev-dur) var(--rev-ease) var(--rev-delay) both,
              rev-rot .45s cubic-bezier(.34,1.4,.64,1) calc(var(--rev-delay) + var(--rev-dur)) both
  }
}
@keyframes rev-txt{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rev-arr{from{left:var(--rev-in)}to{left:calc(100% - var(--rev-in) - var(--rev-c))}}
@keyframes rev-rot{from{transform:rotate(45deg)}to{transform:rotate(0)}}

/* ============ Cierre + pie ============ */
/* Cierre 160px más alto que la pantalla (18 sep, Pato): más aire blanco entre el botón y el paisaje; título y botón
   con 144px arriba (pedido de Pato, en dos pasos: 80 y luego 64 más). */
.closing{position:relative;min-height:calc(100vh + 160px);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:var(--white)}
.closing picture{display:contents}
.closing picture source{display:none}
.closing-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;border-radius:50% 50% 0 0 / 14% 14% 0 0}
/* Home: paisaje del valle, panorámico. En escritorio la imagen se ve siempre completa a todo el ancho (nunca se
   agranda ni se recortan los costados). footer-valle.webp tiene la imagen original (1891x831) y abajo 250px más de suelo
   (las últimas filas en espejo, estiradas y desenfocadas). Normalmente esa extensión queda fuera; si en pantallas
   angostas la esfera quedaría detrás de la tarjeta del pie, el JS agranda la caja por abajo (--valle-h), la imagen sube
   y asoma esa extensión en los costados, al lado de la tarjeta. */
/* Aclarado pedido por Pato (18 sep): un poco más de luz y algo menos de contraste. */
.closing-media.valle{filter:brightness(1.12) contrast(.94);border-radius:0;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 32%);mask-image:linear-gradient(180deg,transparent 0%,#000 32%)}
/* Sin borde (18 sep, Pato: "no quiero ver una línea"): el paisaje del home no lleva el arco y su cielo se disuelve
   en blanco hacia arriba con una máscara, así no se ve ningún corte. */
@media (min-width:901px){.closing-media.valle{top:auto;bottom:0;height:var(--valle-h,43.9vw);object-fit:cover;object-position:50% 0;background:#9A3313}}
.closing-fade{position:absolute;inset:0;background:linear-gradient(180deg,var(--white) 0%,var(--white) 30%,rgba(255,255,255,.92) 40%,rgba(255,255,255,0) 55%);pointer-events:none}
.closing-top{position:relative;padding:144px var(--container-pad) 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.closing-top .h2{font-size:clamp(32px,4.2vw,56px);line-height:var(--leading-tight);max-width:880px}
.closing-top .h2 b{font-weight:600;color:var(--text-brand)}
.closing-bottom{position:relative;padding:0 var(--container-pad) 0}
.footer{max-width:960px;margin:0 auto}
.foot{background:var(--cream-100);color:var(--text-body);border-radius:24px 24px 0 0;padding:clamp(32px,4vw,56px) clamp(24px,4vw,56px);display:grid;grid-template-columns:2fr repeat(3,1fr);gap:var(--space-6)}
.foot-brand{display:flex;flex-direction:column;gap:12px}
.foot-brand small{font-size:var(--text-sm);color:var(--text-subtle)}
.foot-tag{margin:0;font-size:var(--text-sm);line-height:1.5;color:var(--text-muted);max-width:32ch;text-wrap:pretty}
.foot-col{display:flex;flex-direction:column;gap:12px}
.foot-col .foot-h{margin:0;font-size:var(--text-xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;font-weight:600;white-space:nowrap}
.foot-col a{color:var(--text-body);text-decoration:none;font-size:var(--text-md);opacity:.8}
.foot-col a:hover{opacity:1;color:var(--text-brand)}
.foot-col a{overflow-wrap:break-word}
.foot-btn{background:none;border:0;padding:0;text-align:left;cursor:pointer;color:var(--text-body);font:inherit;font-size:var(--text-md);opacity:.8}
.foot-btn:hover{opacity:1;color:var(--text-brand)}
/* Pie en tablet y celular (una sola regla para home, Procesos y Legal; 21 sep, Pato: "dos columnas para que quede
   menos alto"). Marca, línea y © arriba a todo el ancho; Servicios, Diagnóstico y Contacto en dos columnas.
   Cada link es un blanco táctil de 36px de alto; los largos pasan a dos renglones en vez de cortarse. */
@media (max-width:900px){
  .foot{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--space-5);row-gap:var(--space-5)}
  .foot-brand{grid-column:1/-1;gap:8px}
  .foot-col{gap:0}
  .foot-col .foot-h{margin-bottom:4px}
  .foot-col a,.foot-btn{display:flex;align-items:center;min-height:36px;line-height:1.3}
}
@media (max-width:520px){
  .foot{column-gap:var(--space-4);padding:28px 20px 32px}
  .foot-col a,.foot-btn{font-size:15px}
}
/* Celulares de 320-360px: un poco menos de margen y letra 14px para que "hi@thepulso.com" entre en su columna. */
@media (max-width:360px){
  .foot{column-gap:12px;padding-left:16px;padding-right:16px}
  .foot-col a,.foot-btn{font-size:14px}
}

/* ============ Diálogo y toast ============ */
.dlg{border:0;padding:0;background:transparent;max-width:min(440px,calc(100vw - 32px));width:100%}
dialog:not([open]){display:none}
.dlg::backdrop{background:rgba(34,20,15,.45);backdrop-filter:blur(2px)}
.dlg-panel{background:var(--white);color:var(--text-body);border-radius:16px;box-shadow:var(--shadow-float);padding:28px;display:flex;flex-direction:column;gap:20px;font-family:var(--font-body)}
.dlg-head{display:flex;justify-content:space-between;align-items:center}
.dlg-head h2{margin:0;font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);letter-spacing:-0.02em}
.dlg-x{background:transparent;border:0;width:36px;height:36px;border-radius:8px;display:grid;place-items:center;cursor:pointer;color:var(--text-muted)}
.dlg-x:hover{background:var(--cream-100);color:var(--text-body)}
.dlg-x .icon{width:18px;height:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:var(--text-sm);font-weight:500;color:var(--text-body)}
.field input{height:44px;padding:0 14px;border-radius:8px;border:1px solid rgba(34,20,15,.5);background:var(--white);font:inherit;font-size:var(--text-md);color:var(--text-body)}
.field input::placeholder{color:var(--text-subtle)}
.field input:focus{outline:2px solid var(--terracotta-500);outline-offset:0;border-color:transparent}
.field input,.field textarea{font:inherit;font-size:var(--text-md);color:var(--text-body)}
.field textarea{min-height:88px;padding:10px 14px;border-radius:8px;border:1px solid rgba(34,20,15,.5);background:var(--white);resize:vertical;line-height:1.45}
.field input:focus,.field textarea:focus{outline:2px solid var(--terracotta-500);outline-offset:0;border-color:transparent}
.field .opt{font-weight:400;color:var(--text-subtle)}
.field [aria-invalid="true"]{border-color:var(--warn)}
.dlg-fields{display:flex;flex-direction:column;gap:14px}
.dlg-panel{max-height:calc(100dvh - 32px);overflow:auto}
.dlg-err{margin:-6px 0 0;font-size:var(--text-sm);color:var(--warn)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.7;cursor:progress}
/* Vacío queda en la página (para que el aviso se anuncie al escribirlo) pero sin ocupar lugar. */
.dlg-err:empty{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Campo trampa para robots: fuera de la vista y del teclado. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.dlg-foot{display:flex;justify-content:flex-end;gap:10px}
.toast{position:fixed;right:24px;bottom:24px;z-index:200;max-width:min(360px,calc(100vw - 48px));background:var(--white);color:var(--text-body);border-radius:12px;box-shadow:var(--shadow-float);padding:14px 14px 14px 16px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;transform:translateY(12px);opacity:0;visibility:hidden;transition:opacity .25s var(--ease-out),transform .25s var(--ease-out),visibility 0s .25s;pointer-events:none}
.toast.show{opacity:1;transform:none;visibility:visible;transition-delay:0s;pointer-events:auto}
.toast .tdot{width:10px;height:10px;border-radius:50%;background:var(--olive);margin-top:5px}
.toast b{display:block;font-size:var(--text-sm);font-weight:600}
.toast p{margin:2px 0 0;font-size:13px;color:var(--text-muted);line-height:1.4}
.toast button{background:transparent;border:0;cursor:pointer;color:var(--text-subtle);width:28px;height:28px;border-radius:6px;display:grid;place-items:center}
.toast button:hover{background:var(--cream-100);color:var(--text-body)}
.toast button .icon{width:16px;height:16px}


/* Estilos propios de la página de servicio "Automatización de procesos".
   Los bloques compartidos con la landing (tokens, primitivas, nav, píldora CTA, cierre, pie, diálogo y aviso)
   se copian desde arcilla.html al armar: python3 build-servicios.py → arcilla-assets/servicios.css */

/* ============ Hero de servicio ============ */
.s-hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav-h) + var(--space-6)) var(--container-pad) clamp(40px,5vw,72px);background:linear-gradient(180deg,var(--hero-cream) 0%,var(--hero-cream) 90%,var(--white) 100%);overflow:hidden}
.s-hero .inner{width:100%;display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:clamp(32px,4vw,64px);align-items:center}
.s-hero-copy{display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.s-h1{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(40px,5.2vw,80px);line-height:.98;letter-spacing:-.04em;color:var(--text-body);text-wrap:balance}
.s-h1 b{font-weight:700;color:var(--terracotta-500)}
.s-lead{margin:0;font-size:var(--text-xl);line-height:var(--leading-relaxed);color:var(--text-muted);max-width:560px;text-wrap:pretty}
.s-lead.narrow{max-width:520px}
.s-hero-media{aspect-ratio:4/5;border-radius:28px;overflow:hidden;background:var(--card-cream);box-shadow:0 30px 60px -40px rgba(92,42,29,.45)}
.s-hero-media video,.s-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Pantallas de escritorio bajas (22 sep, Pato): la imagen 4:5 es la que marca el alto del hero y el texto se centra
   contra ella, así el botón quedaba debajo del borde. Se acota su ancho por el alto de pantalla (el alto la sigue):
   entra entera debajo del menú, con 16px de aire, y título, texto y botón suben con ella. Si ya entraba, no cambia. */
@media (min-width:901px) and (max-height:860px){
  .s-hero-media{justify-self:end;width:100%;max-width:calc((100vh - var(--nav-h) - var(--space-6) - 16px) * .8)}
}

/* ============ Paso (imagen cuadrada a un lado, texto + lista al otro) ============ */
.paso{--pad:clamp(24px,4vh,40px);padding:var(--pad) var(--container-pad);background:var(--white)}
.paso.cream{background:var(--hero-cream)}
.paso .inner{min-height:calc(100vh - 2 * var(--pad));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.paso-img{min-width:0;display:flex;align-items:center;justify-content:center}
.paso-img img{max-width:100%;max-height:calc(100vh - 2 * var(--pad));width:auto;height:auto;aspect-ratio:1/1;border-radius:24px}
.paso-copy{display:flex;flex-direction:column;gap:clamp(16px,2.6vh,28px);min-width:0}
.paso-head{display:flex;flex-direction:column;gap:10px}
.num{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:500;font-size:13px;letter-spacing:-.03em;color:var(--text-brand)}
.num i{width:10px;height:10px;border-radius:999px;background:var(--terracotta-500)}
.paso .h2{font-size:clamp(28px,3vw,42px);line-height:var(--leading-tight);max-width:640px}
.paso .p{font-size:var(--text-md);max-width:560px;text-wrap:pretty}
.p.strong{color:var(--text-body)}
.sintomas{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr;border-top:1px solid var(--border-subtle)}
.sintomas li{display:flex;align-items:center;gap:14px;padding:8px 0;border-bottom:1px solid var(--border-subtle);font-size:15px;line-height:1.3;color:var(--text-body)}
.sintomas .ib{width:28px;height:28px;border-radius:9px;background:#F6EEE2;color:var(--terracotta-600);display:grid;place-items:center;flex:none}
.sintomas .ib .icon{width:13px;height:13px}
.sintomas .n{font-family:var(--font-display);font-size:12px;font-weight:500;letter-spacing:-.02em;color:var(--text-subtle);flex:none;width:22px}

/* ============ Cómo trabajamos (5 pasos unidos por una línea que se dibuja) ============ */
.ct{padding:var(--space-8) var(--container-pad) var(--space-9);background:#F6F0E6}
.ct .inner{display:flex;flex-direction:column;gap:var(--space-7)}
.ct-head{display:flex;flex-direction:column;gap:16px;align-items:flex-start;max-width:720px}
.ct-head .h2{font-size:clamp(32px,3.6vw,48px);line-height:var(--leading-tight);max-width:none}
.ct-head .p{max-width:600px;text-wrap:pretty}
.ct-track{position:relative}
.ct-line-h{position:absolute;left:0;top:0;width:100%;height:60px;overflow:visible;pointer-events:none}
/* Vertical (celular): va del centro del primer nodo al centro del último. servicios.js mide los nodos y pone top/height; esto es el respaldo sin JS. */
.ct-line-v{display:none;position:absolute;left:24px;top:26px;width:4px;height:calc(100% - 52px);pointer-events:none}
.ct-draw{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 2.6s cubic-bezier(.4,0,.2,1)}
.ct-track.on .ct-draw{stroke-dashoffset:0}
.ct-steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:20px;position:relative}
.ct-step{display:flex;flex-direction:column;align-items:center;text-align:center}
.ct-node{width:60px;height:60px;border-radius:999px;display:grid;place-items:center;position:relative;z-index:1;background:linear-gradient(160deg,#F9F2E8,#EADBC6);box-shadow:inset 1px 1px 2px rgba(255,255,255,.9),inset -1px -2px 3px rgba(120,70,45,.18),0 1px 0 rgba(255,255,255,.8),0 6px 14px -8px rgba(92,42,29,.35);color:#B7A492;transition:color .5s var(--d),box-shadow .5s var(--d)}
.ct-node .icon{width:24px;height:24px}
.ct-track.on .ct-node{color:var(--terracotta-600);box-shadow:inset 1px 1px 2px rgba(255,255,255,.9),inset -1px -2px 3px rgba(120,70,45,.22),0 0 0 3px #F6F0E6,0 0 0 5px var(--terracotta-500),0 8px 16px -8px rgba(92,42,29,.4)}
.ct-text{margin-top:22px;display:flex;flex-direction:column;gap:8px;align-items:center;transition:opacity .7s var(--d),transform .7s var(--d)}
.js .ct-track:not(.on) .ct-text{opacity:0;transform:translateY(10px)}
.ct-text .n{font-family:var(--font-display);font-weight:500;font-size:12px;letter-spacing:.06em;color:var(--terracotta-600)}
.ct-text h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:22px;line-height:1.1;letter-spacing:-.02em;color:var(--text-body)}
.ct-text p{margin:0;font-size:15px;line-height:var(--leading-relaxed);color:var(--text-muted);max-width:210px;text-wrap:pretty}

/* Cierre y pie: idénticos al home (vienen del bloque compartido de arcilla.html, sin ajustes propios). */

/* ============ Movimiento reducido ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ct-draw,.ct-node,.ct-text,.toast,.cta-pill,.cta-pill .arr,.btn{transition:none}
  .js .ct-track:not(.on) .ct-text{opacity:1;transform:none}
  .cta-pill:hover .arr{transform:none}.hero-cta:hover,.btn:active{transform:none}
}

/* ============ Responsive ============ */
@media (max-width:900px){
  .nav-links{display:none}
  .s-hero{min-height:auto}
  .s-hero .inner{grid-template-columns:1fr}
  .paso .inner{min-height:auto;grid-template-columns:1fr}
  /* En celular primero el texto y después la imagen: pasos de Procesos y, en Legal, "Entendemos" (21 sep, Pato). */
  .paso.texto-primero .paso-img{order:1}
  .closing{min-height:0;gap:var(--space-7)}
}
@media (max-width:768px){
  .ct{padding-left:24px;padding-right:24px}
  .ct-line-h{display:none}
  .ct-line-v{display:block}
  .ct-steps{grid-template-columns:1fr;row-gap:44px}
  .ct-step{flex-direction:row;align-items:flex-start;text-align:left;gap:20px}
  .ct-node{width:52px;height:52px;flex:none}
  .ct-track.on .ct-node{box-shadow:inset 1px 1px 2px rgba(255,255,255,.9),inset -1px -2px 3px rgba(120,70,45,.22),0 0 0 3px #F6F0E6,0 0 0 5px var(--terracotta-500)}
  .ct-text{margin-top:0;align-items:flex-start}
  .ct-text h3{font-size:24px}
  .ct-text p{font-size:17px;max-width:none}
}
@media (max-width:600px){
  .paso-img img{max-height:none;width:100%}
}
@media (max-width:520px){
  .hero-cta{font-size:13px;letter-spacing:.05em;padding:8px 8px 8px 20px;gap:12px}
  .hero-cta .arr{width:38px;height:38px}
}

/* Estilos solo de Procesos (build-servicios.py los suma a arcilla-assets/servicios.css; Legal no los carga).
   Recorrido "Cómo trabajamos" + banda Capacidad, del handoff design_handoff_pulso_recorrido (21 sep 2026).
   La mecánica (paso activo, barra del rail, vira de colores, animación de barras) está en arcilla-assets/servicios.js. */

/* ============ Pasos apilados (22 sep, Pato) ============
   Los tres pasos ("Analizamos cómo funciona tu operación", "Diseñamos una forma de trabajar", "Implementamos la
   solución") son tarjetas que se van clavando una sobre otra mientras se baja, igual que "Qué analizamos" en la página
   de Diagnóstico. Antes esta sección trababa la página y los pasaba de costado (.hscroll, con puntitos): eso se
   eliminó, ahora el scroll es normal.

   Por qué la mecánica está copiada acá y no compartida: el CSS de Diagnóstico vive dentro de arcilla.html, que es a la
   vez la fuente del artefacto, así que tocarlo cambiaría esa página; y la tarjeta de la home tiene contenido propio
   (número, título, intro, lista e imagen), no la tarjeta con tabla de Diagnóstico. Lo que se copia es la mecánica de
   .analysis/.card de arcilla.html, que es esta:
   1) Cada tarjeta queda fija debajo del menú con un escaloncito (--i * --stack-step), así se ven los bordes de las que
      quedaron atrás.
   2) Ninguna tarjeta es más alta que el lugar que tiene (se acota la imagen), así cada una se ve entera.
   3) Entre tarjeta y tarjeta hay un tramo de scroll (--stack-dwell) en el que la ya fijada queda quieta y entera antes
      de que la siguiente la tape; subiendo pasa lo mismo al revés. Después de la última queda el mismo tramo.
   A diferencia de Diagnóstico acá no hay título fijo arriba de la pila, así que tampoco hace falta el riel medido por
   JS: la posición sale del alto del menú (--nav-h) y todo es CSS.
   En celular (<=900px) o con movimiento reducido: una debajo de la otra, sin efecto, con la imagen después del texto
   (como venía). */
.pilas{
  --card-pad:clamp(22px,3vw,44px);--stack-air:24px;--stack-step:14px;--stack-dwell:clamp(120px,22vh,220px);
  --stack-last-off:calc((var(--stack-n,3) - 1) * var(--stack-step));
  padding:var(--space-8) var(--container-pad) var(--space-9);background:var(--white)
}
.pilas .stack{max-width:var(--container-max);margin:0 auto;display:flex;flex-direction:column}
/* El paso deja de ser una sección a pantalla completa y pasa a ser una tarjeta. */
.pilas .paso{padding:var(--card-pad);border-radius:24px;background:var(--cream-100)}
.pilas .paso.t2{background:var(--terracotta-100)}
.pilas .paso.t3{background:var(--sand)}
.pilas .paso+.paso{margin-top:16px}
.pilas .paso .inner{min-height:0}
/* El recuadro del ícono era crema sobre blanco; sobre las tarjetas crema/arena se perdía. */
.pilas .sintomas .ib{background:rgba(255,255,255,.78)}

/* Pantallas de escritorio bajas (menos de 860px visibles): la tarjeta se compacta para entrar entera. */
@media (min-width:901px) and (max-height:860px){
  .pilas{--card-pad:clamp(18px,2.4vw,32px);--stack-air:16px}
  .pilas .paso .inner{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,3vw,48px)}
  .pilas .paso-copy{gap:12px}
  .pilas .paso .h2{font-size:clamp(24px,2.4vw,34px)}
  .pilas .paso-head{gap:6px}
  .pilas .sintomas li{padding:5px 0;font-size:14px}
  .pilas .sintomas .ib{width:24px;height:24px}
}
/* El apilado necesita alto de pantalla: con menos de 620px visibles las tarjetas quedan una debajo de otra (scroll
   normal, como en celular), así nunca se corta nada (22 sep, Pato). */
@media (min-width:901px) and (min-height:620px) and (prefers-reduced-motion:no-preference){
  .pilas .paso{position:sticky;top:calc(var(--nav-h) + var(--stack-air) + var(--i,0) * var(--stack-step));box-shadow:0 -1px 0 rgba(34,20,15,.06),0 -14px 30px -18px rgba(34,20,15,.3)}
  .pilas .paso+.paso{margin-top:var(--stack-dwell)}
  .pilas .stack::after{content:"";flex:none;height:var(--stack-dwell)}
  /* La imagen se acota para que la tarjeta entera entre en la pantalla, con aire abajo. */
  .pilas .paso-img img{max-height:calc(100vh - var(--nav-h) - 2 * var(--stack-air) - var(--stack-last-off) - 2 * var(--card-pad))}
  /* Tarjeta del alto de la pantalla (22 sep, Pato: "es más chica que el resto"): ocupa todo el lugar debajo del menú,
     menos el aire y el escalón de las de atrás, y la imagen toma más ancho que el texto. */
  /* Las tres del mismo alto exacto (22 sep, Pato): si una era más alta que la de adelante, asomaba por abajo. Con
     pantallas muy bajas el alto no baja de 600px, así el contenido más largo (siete síntomas) sigue entrando. */
  .pilas .paso{height:calc(100vh - var(--nav-h) - 2 * var(--stack-air) - var(--stack-last-off));display:flex;align-items:center;overflow:hidden}
  .pilas .paso .inner{width:100%;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .pilas .paso-img img{width:100%;height:auto;object-fit:cover}
}

/* ============ Recorrido ============
   Dos ramas:
   - Clavada (escritorio >=880px de ancho y >=620px de alto, con JS y sin movimiento reducido): la sección mide N*100+60 vh; adentro, un bloque
     sticky de una pantalla muestra un paso a la vez. servicios.js marca el paso activo (.on) y, en el último paso,
     pisa las variables --rc-* para virar de crema a terracota (#B85C45 = fondo de la banda Capacidad: sin costura).
   - Apilada (celular, pantalla de menos de 620px de alto, movimiento reducido o sin JS): los cuatro pasos uno debajo del otro, sin rail, con un
     gradiente fijo que reproduce el vira; el último paso usa los colores terracota. */
.rc{
  --rc-bg:#F6F0E6;--rc-ink:#22140F;--rc-muted:#6F5B4E;--rc-accent:#9E4A35;--rc-faint:#8A7466;
  --rc-hair:#E2D6C5;--rc-esq:#DCC8B2;--rc-foto:#EADDCA;
  background:#F6F0E6;
  padding:var(--space-8) max(24px,var(--container-pad)) var(--space-9);color:var(--rc-ink)
}
.rc-grid{max-width:var(--container-max);margin:0 auto;display:flex;flex-direction:column;gap:40px}
.rc-head{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.rc-eyebrow{font-size:var(--text-xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;font-weight:500;color:var(--rc-accent)}
.rc-head h2{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(26px,2.4vw,40px);line-height:var(--leading-tight);letter-spacing:var(--tracking-display);color:var(--rc-ink);text-wrap:balance}
.rc-head p{margin:0;font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--rc-muted);max-width:340px;text-wrap:pretty}
.rc-rail,.rc-frame-bg,.rc-of{display:none}
.rc-step{display:flex;flex-direction:column;gap:16px}
.rc-frame{position:relative;aspect-ratio:4/5;overflow:hidden}
.rc-step .rc-foto{width:100%;max-width:380px;border-radius:20px;background:var(--rc-foto)}
.rc-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rc-text{display:flex;flex-direction:column;gap:10px}
.rc-count{font-family:var(--font-display);font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--rc-accent)}
.rc-text h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:26px;line-height:1.1;letter-spacing:-.02em;color:var(--rc-ink)}
.rc-text p{margin:0;font-size:16px;line-height:var(--leading-relaxed);color:var(--rc-muted);text-wrap:pretty}
.rc-esq-wrap{margin-top:6px}
.rc-esq{display:block;width:100%;max-width:220px;height:auto;overflow:visible;color:var(--rc-accent)}
.rc-esq .f{stroke:var(--rc-esq)}
.rc-esq .ff{fill:var(--rc-esq)}
/* Apilada: el último paso va sobre terracota pleno (21 sep, Pato: en celular "Medimos" caía sobre el degradé y se leía mal).
   El fondo es un pseudo-elemento a todo el ancho que baja hasta el final de la sección y empalma con la banda Capacidad. */
.rc-step:last-child{position:relative;isolation:isolate;padding-top:48px}
.rc-step:last-child::before{content:"";position:absolute;z-index:-1;top:0;bottom:calc(-1 * var(--space-9));left:calc(-1 * max(24px,var(--container-pad)));right:calc(-1 * max(24px,var(--container-pad)));background:linear-gradient(180deg,#F6F0E6 0,#B85C45 44px,#B85C45 100%)}
.rc-step:last-child{--rc-ink:#FBF7F1;--rc-muted:#FBF7F1;--rc-accent:#FBF7F1;--rc-esq:rgba(251,247,241,.45);--rc-foto:rgba(251,247,241,.14)}

/* La versión clavada necesita alto de pantalla: con menos de 620px visibles queda apilada (scroll normal, como en
   celular), así nada queda tapado por el menú. servicios.js usa la misma condición (22 sep, Pato). */
@media (min-width:880px) and (min-height:620px) and (prefers-reduced-motion:no-preference){
  /* Ancla y acomodo: #como-trabajamos lleva justo al comienzo del recorrido (anula el scroll-padding del menú). */
  .js .rc{
    --rc-esq:#C3B2A0;
    height:calc(var(--rc-n) * 100vh + 60vh);padding:0;scroll-margin-top:calc(-1 * var(--nav-h));
    background:var(--rc-bg);transition:background-color .12s linear
  }
  .js .rc-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding:0 var(--container-pad);box-sizing:border-box;overflow:hidden}
  .js .rc-grid{width:100%;display:grid;grid-template-columns:minmax(0,26fr) minmax(0,40fr) minmax(0,34fr);gap:clamp(20px,2.6vw,52px);align-items:center}
  .js .rc-lead{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:clamp(24px,4vh,44px)}
  /* Los pasos se superponen en la misma celda: fotos en la columna 2, textos en la 3 (la celda toma el alto del mayor). */
  .js .rc-step{display:contents}
  .js .rc-step:last-child{--rc-ink:inherit;--rc-muted:inherit;--rc-accent:inherit;--rc-esq:inherit;--rc-foto:inherit}
  .js .rc-step:last-child{padding-top:0}
  .js .rc-step:last-child::before{content:none}
  .js .rc-frame{grid-column:2;grid-row:1;justify-self:stretch;width:100%;max-width:none;max-height:calc(100vh - 96px);border-radius:22px}
  .js .rc-frame-bg{display:block;background:var(--rc-foto)}
  .js .rc-step .rc-foto{background:none;opacity:0;transform:scale(1.03);transition:opacity .55s ease,transform .9s ease}
  .js .rc-step.on .rc-foto{opacity:1;transform:none}
  .js .rc-text{grid-column:3;grid-row:1;min-height:300px;gap:18px;justify-content:center;opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform 1.1s ease;pointer-events:none}
  .js .rc-step.on .rc-text{opacity:1;transform:none;pointer-events:auto}
  .js .rc-of{display:inline}
  .js .rc-count{letter-spacing:.1em}
  .js .rc-text h3{font-size:clamp(30px,3.4vw,46px);line-height:1.05;letter-spacing:-.03em}
  .js .rc-text p{font-size:var(--text-lg);max-width:420px}
  .js .rc-esq-wrap{margin-top:10px;padding-top:22px;border-top:1px solid var(--rc-hair)}

  /* Rail: botones reales. El título activo crece con transform (no con font-size) para no recalcular el diseño. */
  .js .rc-rail{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border-top:1px solid var(--rc-hair)}
  .rc-rail li{position:relative;border-bottom:1px solid var(--rc-hair)}
  .rc-rail button{appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;font:inherit;color:inherit;cursor:pointer;display:flex;align-items:baseline;gap:14px;padding:11px 0;width:100%;box-sizing:border-box;text-align:left}
  .rc-rail button:focus-visible{outline:2px solid var(--rc-accent);outline-offset:3px;border-radius:4px}
  .rc-rn{font-family:var(--font-display);font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--rc-faint);transition:color .4s}
  .rc-rt{display:inline-block;font-family:var(--font-display);font-weight:500;font-size:18px;letter-spacing:-.02em;line-height:1.15;color:var(--rc-faint);transform-origin:0 75%;transition:color .4s,transform .4s}
  .rc-rail li.done .rc-rt{color:var(--rc-muted)}
  .rc-rail li.on .rc-rn{color:var(--rc-accent)}
  .rc-rail li.on .rc-rt{color:var(--rc-ink);font-weight:600;transform:scale(1.1667)}
  .rc-rail button:hover .rc-rt{color:var(--terracotta-500)}
  /* Barra de progreso: scaleX. En el paso activo la mueve el scroll (servicios.js, sin transición). */
  .rc-bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--rc-accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s;pointer-events:none}
  .rc-rail li.done .rc-bar{transform:scaleX(1)}
  .rc-rail li.on .rc-bar{transition:none}
}
/* Pantallas de escritorio bajas: la foto (centrada en la pantalla entera) se acota para no meterse debajo del menú
   fijo: mismo aire arriba y abajo, cada uno un poco más que el menú (22 sep, Pato). */
@media (min-width:880px) and (min-height:620px) and (max-height:860px) and (prefers-reduced-motion:no-preference){
  .js .rc-frame{max-height:calc(100vh - 2 * var(--nav-h) - 8px)}
}

/* ============ Capacidad (antes/después sin cifras, imagen a sangre) ============ */
.cap2{position:relative;overflow:hidden;background:var(--terracotta-500);color:var(--text-on-dark);padding:var(--space-8) var(--container-pad) var(--space-9)}
.cap2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:clamp(32px,5vw,72px);align-items:center}
.cap2-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:30px}
.cap2 h2{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(34px,4vw,56px);line-height:var(--leading-tight);letter-spacing:var(--tracking-display);color:var(--text-on-dark);max-width:560px;text-wrap:balance}
.cap2 h2 .l1{color:var(--terracotta-100)}  /* 22 sep, Pato: con el 200 se leía muy clarito */
.cap2-copy>p{margin:0;font-size:var(--text-lg);line-height:var(--leading-relaxed);color:var(--text-on-dark);max-width:520px}
.cap2-cmp{display:flex;flex-direction:column;gap:18px;max-width:540px}
.cap2-legend{display:flex;gap:22px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--text-on-dark)}
.cap2-legend span{display:inline-flex;align-items:center;gap:8px}
.cap2-legend i{width:16px;height:6px;border-radius:3px}
.cap2 .antes{background:#4A2117}  /* 22 sep, Pato: con crema al 30% casi no se veían */
.cap2 .despues{background:#FBF7F1}
.cap2-cmp ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.cap2-cmp li{display:grid;grid-template-columns:minmax(0,148px) minmax(0,1fr);align-items:center;gap:18px;padding-top:12px;border-top:1px solid rgba(251,247,241,.18)}
.cap2-eje{font-size:15px;font-weight:500;line-height:1.2;color:var(--text-on-dark)}
.cap2-bars{display:flex;flex-direction:column;gap:6px}
/* Las barras crecen desde la izquierda al entrar en pantalla (una vez). scaleX en vez de width: no recalcula el diseño. */
.cap2-bar{display:block;height:7px;border-radius:4px;transform-origin:0 50%;transition:transform .9s cubic-bezier(.4,0,.2,1)}
.cap2-bar.antes{transition-delay:calc(.1s + var(--i) * .09s)}
.cap2-bar.despues{transition-delay:calc(.3s + var(--i) * .09s)}
.js .cap2:not(.on) .cap2-bar{transform:scaleX(0)}
/* Foto ensanchada a la izquierda con fondo liso (img-balanza-sangre-ext.webp, 22 sep): el degradé que la funde con la
   banda cae sobre ese fondo agregado y no sobre la esfera, que en la foto original estaba pegada al borde. La caja mide
   lo que la foto a toda la altura de la banda (ancho automático), con tope para pantallas muy anchas. */
.cap2-sangre{position:absolute;right:0;top:0;bottom:0;width:auto;max-width:62%}
.cap2-sangre img{width:auto;height:100%;max-width:none;object-fit:cover;object-position:100% 55%;display:block}
/* Borde de arriba esfumado (22 sep, Pato): la foto arranca en el borde de la banda y su parte alta es más oscura que el
   terracota, así que se veía un corte entre el recorrido y la banda. En celular es una caja redondeada y no hace falta. */
@media (min-width:901px){.cap2-sangre img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%)}}
.cap2-fade{position:absolute;inset:0;background:linear-gradient(90deg,#B85C45 0%,rgba(184,92,69,.55) 14%,rgba(184,92,69,0) 29%)}

@media (prefers-reduced-motion:reduce){
  .cap2-bar{transition:none}
  .js .cap2:not(.on) .cap2-bar{transform:none}
}
@media (max-width:900px){
  .cap2-grid{grid-template-columns:1fr}
  .cap2-sangre{position:relative;width:100%;height:320px;border-radius:20px;overflow:hidden}
  .cap2-sangre{max-width:none}
  .cap2-sangre img{width:100%;object-position:78% 55%}
}