/* ============================================================
   Rinner Devs — hoja de estilos
   Paleta, tipografía y proporciones fijadas por el manual de marca.
   Todo el movimiento respeta prefers-reduced-motion y funciona sin JS.
   ============================================================ */

:root{
  --navy:#16233A;
  --cream:#F4F1EA;
  --cream-2:#ECE7DC;            /* crema apenas más profunda, para bandas */
  --terra:#E2703A;
  --terra-deep:#A8451A;         /* terracota como texto sobre crema (4.5:1+) */
  --ink:#2C3440;
  --muted:#566277;              /* gris oscurecido: cumple contraste en texto chico */
  --muted-on-navy:#A9B4C7;
  --rule:#DED8CC;
  --rule-navy:rgba(244,241,234,.14);
  --cream-rgb:244,241,234;
  --navy-rgb:22,35,58;
  --terra-rgb:226,112,58;

  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --wordmark:"Fraunces",Georgia,"Times New Roman",serif;   /* solo el logo: tiene semibold real */
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --measure:60ch;
  --pad:clamp(1.25rem,5vw,4rem);
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --barra-h:3.6rem;
}

*,*::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(--cream);color:var(--ink);
  font-family:var(--sans);font-size:clamp(1rem,.97rem + .18vw,1.0625rem);
  line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px;margin:0 auto;padding-inline:var(--pad)}
h1,h2,h3,blockquote{font-family:var(--serif);font-weight:400;margin:0}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
a{color:var(--terra-deep)}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
::selection{background:var(--terra);color:var(--navy)}
:focus-visible{outline:3px solid var(--terra);outline-offset:3px;border-radius:2px}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- marca ---------- */
.mark{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:inherit}
.mark svg{flex:none}
.mark .name{font-family:var(--wordmark);font-weight:600;font-variation-settings:"opsz" 36,"SOFT" 0,"WONK" 1;font-size:1.55rem;line-height:1;color:var(--cream)}
.mark .name em{font-style:normal;color:var(--terra)}
.mark .tag{display:block;font-family:var(--sans);font-size:.72rem;line-height:1.3;color:var(--muted-on-navy);margin-top:.3rem}

/* ---------- botones ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.65rem;
  background:var(--terra);color:var(--navy);
  font-weight:600;font-size:1.0625rem;text-decoration:none;line-height:1;
  padding:.95rem 1.45rem .95rem 1.6rem;border-radius:6px;border:0;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.btn svg{width:1.05em;height:1.05em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.btn:hover{background:var(--cream)}
.btn:hover svg{transform:translateX(2px)}
.btn:active{background:#E6E0D4;transition-duration:.05s}
.btn-ghost{background:transparent;color:var(--cream);border:1px solid rgba(var(--cream-rgb),.35)}
.btn-ghost:hover{background:rgba(var(--cream-rgb),.08);color:var(--cream);border-color:var(--cream)}
.btn-ghost:hover svg{transform:none}
.btn-ghost.ok{border-color:var(--terra);color:var(--terra)}
.btn-ghost .ico-ok{display:none}
.btn-ghost.ok .ico-copiar{display:none}
.btn-ghost.ok .ico-ok{display:block}
.alt{color:#D6DCE6;text-decoration:none;border-bottom:1px solid rgba(214,220,230,.4);padding-bottom:2px;transition:color .2s var(--ease),border-color .2s var(--ease)}
.alt:hover{color:var(--cream);border-bottom-color:var(--terra)}
.actions{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;margin-top:2.4rem}

/* ---------- barra fija (aparece al pasar el encabezado) ---------- */
.barra{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(var(--navy-rgb),.86);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  color:var(--cream);border-bottom:1px solid var(--rule-navy);
  transform:translateY(-105%);transition:transform .5s var(--ease);
}
.barra.visible{transform:none}
.barra .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--barra-h)}
.barra .mark svg{width:26px;height:26px}
.barra .mark .name{font-size:1.15rem}
.barra .btn{padding:.6rem .95rem .6rem 1.1rem;font-size:.92rem}
.progreso{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--terra);transform-origin:left;transform:scaleX(var(--p,0))}
@supports (animation-timeline:scroll()){
  .progreso{animation:progreso linear both;animation-timeline:scroll(root)}
  @keyframes progreso{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* ---------- encabezado ---------- */
.hero{background:var(--navy);color:var(--cream);position:relative;overflow:hidden;isolation:isolate}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:radial-gradient(rgba(var(--cream-rgb),.13) 1px,transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 72% 45%,#000 10%,transparent 72%);
  mask-image:radial-gradient(ellipse 70% 80% at 72% 45%,#000 10%,transparent 72%);
}
.hero::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:min(70vw,820px);aspect-ratio:1;right:-18vw;top:-14vw;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--terra-rgb),.18),transparent 60%);
}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:clamp(1.25rem,3vw,1.9rem)}
.topbar .alt{display:none;font-size:.95rem}
@media (min-width:700px){.topbar .alt{display:inline}}

.hero-grid{
  display:grid;gap:clamp(2.5rem,6vw,4rem);align-items:center;
  padding-block:clamp(2.25rem,6vw,5rem) clamp(3rem,7vw,5.5rem);
}
@media (min-width:920px){.hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}}
.hero h1{
  font-size:clamp(2.5rem,1.35rem + 4.6vw,4.75rem);line-height:1.02;letter-spacing:-.015em;
  max-width:15ch;text-wrap:balance;
}
.hero h1 em{font-style:italic;color:var(--terra)}
.hero h1 .w{display:inline-block}
.hero .lede{max-width:50ch;margin-top:1.6rem;color:#D6DCE6;font-size:clamp(1.03rem,1rem + .35vw,1.2rem)}
.hero .lede,.hero .actions{position:relative}

.hero-fig{position:relative;margin:0;transform:translate3d(var(--px,0),var(--py,0),0);transition:transform .9s var(--ease-out);will-change:transform}
.hero-fig svg{width:100%;height:auto}
.flujo text{font-family:var(--sans);font-size:13px;fill:rgba(var(--cream-rgb),.88);letter-spacing:.005em}
.flujo .caja{fill:rgba(var(--cream-rgb),.035);stroke:rgba(var(--cream-rgb),.22);stroke-width:1}
.flujo .ico{fill:none;stroke:rgba(var(--cream-rgb),.75);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.flujo .via{fill:none;stroke:rgba(var(--cream-rgb),.22);stroke-width:1.2}
.flujo .anillo{fill:none;stroke:rgba(var(--cream-rgb),.85);stroke-width:2}
.flujo .anillo-ext{stroke-dasharray:3 7;stroke-linecap:round;stroke:rgba(var(--cream-rgb),.55);transform-box:fill-box;transform-origin:center}
.flujo .punto{fill:var(--terra)}
.flujo .halo{fill:none;stroke:var(--terra);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.flujo .viajero{fill:var(--terra)}
.flujo .ok{fill:none;stroke:var(--terra);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.flujo .ok-c{fill:none;stroke:rgba(var(--cream-rgb),.35);stroke-width:1}
.flujo .ping{fill:none;stroke:var(--terra);stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center}

/* cinta con las tareas (del copy) al pie del encabezado */
.ticker{border-top:1px solid var(--rule-navy);padding-block:1.05rem;overflow:hidden;position:relative}
.ticker-track{display:flex;width:max-content}
.ticker-copy{display:flex;align-items:center;gap:2.75rem;padding-right:2.75rem;flex:none}
.ticker-copy span{display:flex;align-items:center;gap:2.75rem;color:var(--muted-on-navy);font-size:.92rem;white-space:nowrap}
.ticker-copy i{width:.38rem;height:.38rem;border-radius:50%;background:var(--terra);display:inline-block}

/* ---------- secciones ---------- */
.seccion{padding-block:clamp(4rem,9vw,7.5rem);position:relative}
.seccion + .seccion{border-top:1px solid var(--rule)}
h2{font-size:clamp(2rem,1.4rem + 2.3vw,3.2rem);line-height:1.08;max-width:20ch;letter-spacing:-.01em;text-wrap:balance}
h2::after{content:"";display:inline-block;width:.19em;height:.19em;border-radius:50%;background:var(--terra);margin-left:.12em}
.body{max-width:var(--measure);margin-top:1.5rem}
.cols{display:grid;gap:2.5rem clamp(2.5rem,5vw,5rem)}
@media (min-width:920px){
  .cols{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
  .cols > .intro{position:sticky;top:calc(var(--barra-h) + 2rem);align-self:start}
  .cols-inv{grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:center}
}
.intro .body{margin-top:1.25rem}

/* ilustraciones: trazo de tinta, acento terracota */
.ilu{width:100%;height:auto}
.ilu .l{fill:none;stroke:var(--navy);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ilu .s{stroke:rgba(var(--navy-rgb),.42)}
.ilu .ss{stroke:rgba(var(--navy-rgb),.22)}
.ilu .d{stroke-dasharray:3 4}
.ilu .a{stroke:var(--terra)}
.ilu .fa{fill:var(--terra)}
.ilu .fn{fill:var(--navy)}
.ilu .fs{fill:rgba(var(--navy-rgb),.42)}
.ilu text{font-family:var(--sans);fill:var(--muted);font-size:12px}
.ilu .tx-n{fill:var(--navy)}
.ilu .tx-a{fill:var(--terra-deep)}
.ilu .tx-s{font-size:10.5px}

/* ---------- 2. dónde se van las horas ---------- */
.losses{list-style:none;margin:3rem 0 0;padding:0;display:grid;border-top:1px solid var(--rule)}
@media (min-width:760px){.losses{grid-template-columns:1fr 1fr}}
.loss{padding:2rem 0;border-bottom:1px solid var(--rule);display:grid;gap:1.35rem;align-content:start}
@media (min-width:760px){
  .loss{padding:2.4rem 2.75rem 2.4rem 0}
  .loss:nth-child(2n){padding-left:2.75rem;padding-right:0;border-left:1px solid var(--rule)}
}
.loss figure{margin:0;max-width:280px}
.loss p{margin:0;font-size:1.05rem;max-width:36ch}
.loss p::before{content:"";display:inline-block;width:.45rem;height:.45rem;border-radius:50%;background:var(--terra);margin-right:.7rem;vertical-align:.12em}

/* 2a. copiar de un sistema a otro */
.ilu-copiar .fila{stroke-dasharray:1;stroke-dashoffset:1}
.vista .ilu-copiar .fila{animation:trazo .55s var(--ease) forwards;animation-delay:calc(var(--i)*.32s + .35s)}
.ilu-copiar .alerta{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4)}
.vista .ilu-copiar .alerta{animation:pop .5s var(--ease-out) 2.1s forwards}
.ilu-copiar .puntos circle{opacity:0}
.vista .ilu-copiar .puntos circle{animation:pasar 2.2s linear infinite;animation-delay:calc(var(--i)*.75s + .4s)}

/* 2b. conciliar línea por línea */
.ilu-conciliar .link{stroke-dasharray:1;stroke-dashoffset:1}
.vista .ilu-conciliar .link{animation:trazo .7s var(--ease) forwards;animation-delay:calc(var(--i)*.38s + .3s)}
.ilu-conciliar .err{transition:stroke .4s var(--ease) 2.2s,fill .4s var(--ease) 2.2s}
.vista .ilu-conciliar .err{stroke:var(--terra)}
.vista .ilu-conciliar .err-f{fill:var(--terra)}

/* 2c. los mismos reportes todos los meses */
.ilu-meses .mes{opacity:.22}
.ilu-meses .doc{fill:var(--navy)}
.vista .ilu-meses .mes{animation:aparece .5s var(--ease) forwards;animation-delay:calc(var(--i)*.09s + .2s)}
.vista .ilu-meses .doc{animation:sello 7.2s linear infinite;animation-delay:calc(var(--i)*.6s + 1.5s)}

/* 2d. procesos que dependen de una sola persona */
.vista .ilu-persona .centro{animation:ausencia 6s var(--ease) 1.4s infinite}
.vista .ilu-persona .dep{animation:frenar 6s var(--ease) 1.4s infinite}
.vista .ilu-persona .est{animation:parar 6s var(--ease) 1.4s infinite}

/* ---------- 3. qué hacemos: lista de definición, no tarjetas ---------- */
.services{border-top:1px solid var(--rule)}
.service{
  position:relative;display:grid;grid-template-columns:2.75rem minmax(0,13.5rem) minmax(0,1fr);
  gap:.45rem 1.6rem;padding:1.75rem 1.1rem;margin-inline:-1.1rem;
  border-bottom:1px solid var(--rule);border-radius:12px;
  transition:background .35s var(--ease);
}
.service::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(var(--terra-rgb),.12),transparent 62%);
  opacity:0;transition:opacity .4s var(--ease);
}
.service:hover{background:rgba(var(--navy-rgb),.035)}
.service:hover::before{opacity:1}
.service .ico{width:2.35rem;height:2.35rem;color:var(--navy);margin-top:.15rem}
.service .ico path,.service .ico circle,.service .ico line{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.service .ico{transition:transform .4s var(--ease)}
.service .ico .tz{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke .3s var(--ease)}
.service:hover .ico{transform:translateY(-2px) scale(1.08)}
.service:hover .ico .tz-a{stroke:var(--terra)}
.service h3{font-size:1.55rem;line-height:1.15;position:relative}
.service p{color:var(--muted);margin:0;position:relative}
@media (max-width:760px){
  .service{grid-template-columns:2.35rem minmax(0,1fr);gap:.35rem 1.1rem}
  .service p{grid-column:2}
}

/* ---------- 4. cómo trabajamos: la única secuencia real ---------- */
.metodo-intro .body{margin-top:1.25rem}
.pasos{margin-top:clamp(2.25rem,5vw,3.5rem)}
.pasos-control{display:none}
.js .pasos-control{display:flex;align-items:center;gap:1.1rem;margin-bottom:1.5rem}
.pasos-flecha{
  flex:none;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--rule);background:transparent;
  display:grid;place-items:center;cursor:pointer;color:var(--navy);
  transition:background .25s var(--ease),border-color .25s var(--ease),opacity .25s var(--ease);
}
.pasos-flecha svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pasos-flecha:hover:not(:disabled){background:rgba(var(--navy-rgb),.05);border-color:var(--navy)}
.pasos-flecha:disabled{opacity:.35;cursor:default}
.pasos-pista{position:relative;flex:1;height:.45rem;border-radius:99px;background:var(--rule)}
.pasos-relleno{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0) * 100%);border-radius:inherit;background:var(--terra);transition:width var(--dur,.55s) var(--curva,cubic-bezier(.2,.7,.3,1))}
.pasos-parada{position:absolute;top:50%;left:calc(var(--x,0) * 100%);width:.55rem;height:.55rem;margin:-.275rem 0 0 -.275rem;border-radius:50%;background:#CFC7B8;transition:background .3s var(--ease)}
.pasos-parada.pasada{background:var(--terra-deep)}
.pasos-perilla{
  position:absolute;top:50%;left:calc(var(--p,0) * 100%);width:1.35rem;height:1.35rem;margin:-.675rem 0 0 -.675rem;
  border-radius:50%;background:var(--cream);border:2px solid var(--navy);
  transition:left var(--dur,.55s) var(--curva,cubic-bezier(.2,.7,.3,1));
}

.pasos-lista{list-style:none;margin:0;padding:0;counter-reset:paso;display:grid;gap:1rem}
@media (min-width:900px){.pasos-lista{grid-template-columns:repeat(4,minmax(0,1fr))}}
.paso{
  counter-increment:paso;position:relative;padding:1.5rem 1.4rem 1.7rem;border-radius:12px;
  background:#FAF8F4;border:1.5px solid var(--rule);
  transition:background .45s var(--ease),border-color .45s var(--ease);
}
.js .paso{cursor:pointer}
.paso::before{
  content:counter(paso);display:grid;place-items:center;width:2rem;height:2rem;margin-bottom:1rem;
  border-radius:50%;border:1.5px solid #CFC7B8;font-size:.85rem;font-weight:600;color:var(--muted);
  transition:background .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease);
}
.paso h3{font-size:1.5rem;line-height:1.15;margin-bottom:.45rem;color:var(--navy)}
.paso p{color:var(--muted);margin:0;font-size:.97rem}
.paso.activo{background:#E8E2D5;border-color:var(--navy)}
.paso.activo::before{background:var(--terra);border-color:var(--terra);color:var(--navy)}
.paso:hover:not(.activo){background:#F1EDE5}
.paso:focus-visible{outline:3px solid var(--terra);outline-offset:3px}

/* celular: las tarjetas se deslizan de costado y la barra acompaña */
@media (max-width:899px){
  .js .pasos-lista{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.85rem;
    margin-inline:calc(var(--pad) * -1);padding:0 var(--pad) .5rem;scroll-padding-inline:var(--pad);
    scrollbar-width:none;
  }
  .js .pasos-lista::-webkit-scrollbar{display:none}
  .js .paso{flex:0 0 min(84%,22rem);scroll-snap-align:start}
}

.pledges{display:grid;margin-top:clamp(3rem,6vw,4.5rem);border-top:1px solid var(--rule)}
@media (min-width:640px){.pledges{grid-template-columns:1fr 1fr}}
.pledge{padding:1.75rem 1.5rem 1.75rem 0;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:auto 1fr;gap:.3rem 1.1rem;align-items:start}
@media (min-width:640px){.pledge:nth-child(2n){padding-left:1.5rem;padding-right:0;border-left:1px solid var(--rule)}}
.pledge .ico{
  grid-row:span 2;width:2.7rem;height:2.7rem;border:1px solid var(--terra);border-radius:50%;
  display:grid;place-items:center;color:var(--terra-deep);background:var(--cream);
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.pledge .ico svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pledge:hover .ico{background:var(--terra);color:var(--navy);transform:rotate(-6deg)}
.pledge h3{font-family:var(--sans);font-weight:600;font-size:1.05rem;line-height:1.35;align-self:center}
.pledge p{color:var(--muted);font-size:.97rem;margin:0}

/* ---------- 5. diferencial: el bloque donde se gasta la audacia ---------- */
.stand-sec{background:var(--cream-2);overflow:hidden}
.stand{display:grid;gap:3rem;align-items:center}
@media (min-width:960px){.stand{grid-template-columns:minmax(0,6.5fr) minmax(0,5.5fr)}}
.stand-txt{border-left:4px solid var(--terra);padding-left:clamp(1.25rem,3vw,2.5rem)}
.stand blockquote{
  font-size:clamp(2.4rem,1.3rem + 4.6vw,5.4rem);line-height:1.02;letter-spacing:-.018em;
  max-width:14ch;text-wrap:balance;color:var(--navy);
}
.stand blockquote .w{color:rgba(var(--navy-rgb),.2);transition:color .4s var(--ease)}
.stand blockquote .w.on{color:var(--navy)}
.stand .body{margin-top:1.9rem}
.stand-fig{margin:0}
.ilu-pagos .tok{transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0}
.vista .ilu-pagos .tok{animation:pop .5s var(--ease-out) forwards;animation-delay:calc(var(--i)*.14s + .4s)}
.ilu-pagos .linea-uno{stroke-dasharray:1;stroke-dashoffset:1}
.vista .ilu-pagos .linea-uno{animation:trazo 1.6s var(--ease) .8s forwards}
.ilu-pagos .tok text{font-family:var(--sans);font-size:11px;font-weight:600;fill:var(--cream);text-anchor:middle}
.ilu-pagos .titulo{font-size:13px;font-weight:500;fill:var(--navy)}
.ilu-pagos .nota{font-size:11.5px}

/* ---------- 6. quiénes estamos atrás ---------- */
.hechos{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:1.25rem 2rem;margin-top:2.25rem;padding-top:1.75rem;border-top:1px solid var(--rule)}
.hecho b{display:block;font-family:var(--serif);font-weight:400;font-size:2.1rem;line-height:1;color:var(--navy);letter-spacing:-.01em}
.hecho span{display:block;font-size:.9rem;color:var(--muted);margin-top:.35rem}
.ilu-equipo{margin:0;max-width:540px}
.ilu-equipo .equipo-angosto{display:none}
@media (max-width:560px){
  .ilu-equipo .equipo-ancho{display:none}
  .ilu-equipo .equipo-angosto{display:block;max-width:400px;margin:0 auto}
}
.ilu-equipo .base{fill:none;stroke:rgba(var(--navy-rgb),.22);stroke-width:1.5;stroke-dasharray:2 5;stroke-linecap:round}
.ilu-equipo .traza{fill:none;stroke:var(--terra);stroke-width:2.2;stroke-linecap:round;opacity:0}
.ilu-equipo .orbita{fill:none;stroke:rgba(var(--navy-rgb),.4);stroke-width:1.4;stroke-dasharray:3 7;stroke-linecap:round;transform-box:fill-box;transform-origin:center}
.ilu-equipo .anillo{fill:none;stroke:var(--navy);stroke-width:2.1}
.ilu-equipo .nucleo{fill:var(--terra);transform-box:fill-box;transform-origin:center}
.ilu-equipo .onda{fill:none;stroke:var(--terra);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:center}
.ilu-equipo .satelite{fill:var(--terra)}
.ilu-equipo .pulso{opacity:0}
.ilu-equipo .pulso circle{fill:var(--terra)}
.ilu-equipo .pulso .halo{opacity:.22}
.ilu-equipo .rol rect{fill:var(--cream);stroke:rgba(var(--navy-rgb),.3);stroke-width:1;transition:fill .45s var(--ease),stroke .45s var(--ease)}
.ilu-equipo .rol text{fill:var(--navy);font-size:13px;font-family:var(--sans)}
.ilu-equipo .rol .ico{fill:none;stroke:rgba(var(--navy-rgb),.55);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke .45s var(--ease)}
.ilu-equipo .rol.activo rect{fill:rgba(var(--terra-rgb),.1);stroke:var(--terra)}
.ilu-equipo .rol.activo .ico{stroke:var(--terra-deep);animation:trazo .7s var(--ease) both}

/* ---------- 7. contacto ---------- */
.contact{background:var(--navy);color:var(--cream);position:relative;overflow:hidden;isolation:isolate}
.seccion + .contact{border-top:0}
.contact h2{color:var(--cream)}
.contact .body,.contact .body p{color:#D6DCE6}
.contact .anillos{position:absolute;z-index:-1;right:-6%;top:50%;transform:translateY(-50%);width:min(58vw,600px);pointer-events:none;opacity:.14}
.contact .anillos path{fill:none;stroke:var(--cream);stroke-width:1.2;transform-box:view-box;transform-origin:50px 50px}
.contact .anillos .p{fill:var(--terra)}
.meta{margin-top:2.75rem;display:grid;gap:1.4rem 3rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));max-width:48rem}
.meta > div{display:grid;grid-template-columns:auto 1fr;gap:.1rem .85rem}
.meta svg{grid-row:span 2;width:1.15rem;height:1.15rem;margin-top:.35rem;fill:none;stroke:var(--terra);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.meta dt{font-size:.85rem;color:var(--muted-on-navy)}
.meta dd{margin:0}
.meta .correo-texto{user-select:all}
.meta a{color:var(--cream);text-decoration:none;border-bottom:1px solid rgba(244,241,234,.35);padding-bottom:2px;transition:border-color .2s var(--ease)}
.meta a:hover{border-bottom-color:var(--terra)}

footer{background:var(--navy);color:var(--muted-on-navy);font-size:.88rem;padding-block:2rem 2.5rem;border-top:1px solid var(--rule-navy)}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
footer .mark .name{font-size:1.25rem}
footer .mark .tag{font-size:.7rem}

/* ---------- 390px ---------- */
@media (max-width:480px){
  .hero h1{max-width:12ch}
  .hero-fig{margin-inline:-.6rem}
  .flujo text{font-size:15px}
  .flujo .ok-c,.flujo .ok,.flujo .ping{transform:translateX(7px)}
  .btn{width:100%;justify-content:center}
  .actions{gap:.9rem}
  .barra .btn{width:auto}
  .stand blockquote{max-width:11ch}
  .ilu-pagos{margin-inline:-.25rem}
}

/* ============================================================
   Movimiento. Solo con JS y solo si el visitante no pidió lo contrario:
   sin JS nada se oculta, así que la página nunca queda en blanco.
   ============================================================ */
@keyframes trazo{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes aparece{to{opacity:1}}
@keyframes pasar{0%{opacity:0;transform:translateX(0)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateX(28px)}}
@keyframes sello{0%,3%{fill:var(--terra)}7%,100%{fill:var(--navy)}}
@keyframes ausencia{0%,28%{opacity:1}38%,72%{opacity:.14}84%,100%{opacity:1}}
@keyframes frenar{0%,28%{stroke:rgba(var(--navy-rgb),.42);stroke-dasharray:1 0}38%,72%{stroke:var(--terra);stroke-dasharray:3 4}84%,100%{stroke:rgba(var(--navy-rgb),.42);stroke-dasharray:1 0}}
@keyframes parar{0%,28%{fill:var(--navy)}38%,72%{fill:var(--terra)}84%,100%{fill:var(--navy)}}
@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes girar-inv{to{transform:rotate(-360deg)}}
@keyframes halo{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
@keyframes ping{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(2)}}
@keyframes onda{0%{transform:scale(.92);opacity:.35}50%{opacity:1}100%{transform:scale(1.04);opacity:.35}}
@keyframes palabra{to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:no-preference){
  /* encabezado: el título entra palabra por palabra */
  .js .hero h1 .w{opacity:0;transform:translateY(.55em);animation:palabra .9s var(--ease-out) forwards;animation-delay:calc(var(--i)*55ms + 120ms)}
  .js .hero .lede{animation:rise .8s var(--ease) .45s both}
  .js .hero .actions{animation:rise .8s var(--ease) .6s both}
  .js .hero-fig{animation:rise 1.1s var(--ease) .35s both}
  .js .topbar{animation:rise .7s var(--ease) both}

  /* la ilustración del flujo trabaja sola */
  .flujo .anillo-ext{animation:girar 48s linear infinite}
  .flujo .halo{animation:halo 2.6s ease-out infinite}
  .flujo .ping{animation:ping 2.6s ease-out infinite;animation-delay:var(--t,0s)}

  /* cinta */
  .ticker{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .ticker-track{animation:ticker 46s linear infinite}
  .ticker:hover .ticker-track{animation-play-state:paused}

  /* los iconos de servicios se trazan solos cuando la fila entra */
  .js .service .ico .tz{stroke-dashoffset:1}
  .js .service.vista .ico .tz{animation:trazo 1.1s var(--ease) forwards;animation-delay:calc(var(--d,0ms) + 250ms)}

  /* aparición por scroll, una sola vez */
  .js .reveal{opacity:0;transform:translateY(18px)}
  .js .reveal.vista{opacity:1;transform:none;transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--d,0ms)}
  .js .paso.reveal.vista{transition:opacity .75s var(--ease),transform .75s var(--ease),background .45s var(--ease),border-color .45s var(--ease);transition-delay:var(--d,0ms),var(--d,0ms),0s,0s}
  .js .stand-txt{border-left-color:transparent;transition:border-left-color .5s var(--ease) .15s}
  .js .stand-txt.vista{border-left-color:var(--terra)}

  .ilu-equipo .orbita{animation:girar-inv 60s linear infinite}
  .contact .anillos path{animation:onda 7s var(--ease) infinite}
  .contact .anillos path:nth-child(2){animation-delay:-2.3s}
  .contact .anillos path:nth-child(3){animation-delay:-4.6s}
}
@media (prefers-reduced-motion:reduce){
  .ticker-track{flex-wrap:wrap;width:auto}
  .ticker-copy{flex-wrap:wrap;row-gap:.4rem}
  .ticker-copy + .ticker-copy{display:none}
  .ilu-meses .mes,.ilu-copiar .alerta,.ilu-pagos .tok{opacity:1;transform:none}
  .ilu-copiar .fila,.ilu-conciliar .link,.ilu-pagos .linea-uno{stroke-dashoffset:0}
  .ilu-conciliar .err{stroke:var(--terra)}
  .ilu-conciliar .err-f{fill:var(--terra)}
  .pasos-relleno,.pasos-perilla{transition:none !important}
  .hero-fig{transform:none !important}
  .btn svg{transition:none}
}

/* ============================================================
   Página de contacto
   ============================================================ */
.hero-corto .contacto-intro{padding-block:clamp(2rem,6vw,4.5rem) clamp(3rem,7vw,5rem);max-width:44rem}
.hero-corto h1{font-size:clamp(2.4rem,1.4rem + 4vw,4.2rem);line-height:1.04;letter-spacing:-.015em;max-width:15ch;text-wrap:balance}
.volver{display:inline-flex;align-items:center;gap:.5rem;color:#D6DCE6;text-decoration:none;font-size:.95rem;padding:.4rem 0;border-bottom:1px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease)}
.volver svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.volver:hover{color:var(--cream);border-bottom-color:var(--terra)}
.volver:hover svg{transform:translateX(-2px)}

.contacto-cuerpo{padding-top:0}
.contacto-grid{display:grid;gap:2.5rem;align-items:start}
@media (min-width:920px){.contacto-grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(3rem,6vw,5rem)}}
.tarjeta-form{
  position:relative;background:#FBFAF6;border:1px solid var(--rule);border-radius:14px;
  padding:clamp(1.4rem,4vw,2.5rem);margin-top:clamp(-4rem,-6vw,-2.5rem);
  box-shadow:0 1px 0 rgba(var(--navy-rgb),.04),0 24px 60px -30px rgba(var(--navy-rgb),.35);
}
.contacto-lado{padding-top:clamp(2rem,5vw,3.5rem)}
@media (min-width:920px){.contacto-lado{position:sticky;top:2rem}}
.garantias{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem}
.garantias li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.garantias .ico{width:2.6rem;height:2.6rem;border:1px solid var(--terra);border-radius:50%;display:grid;place-items:center;color:var(--terra-deep)}
.garantias .ico svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.garantia-t{font-family:var(--sans);font-weight:600;font-size:1.02rem;line-height:1.35;margin:0 0 .2rem}
.garantia-t::after{display:none}
.garantias p{margin:0;color:var(--muted);font-size:.96rem}
.agendar-directo{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--rule)}
.agendar-directo p{margin:0 0 .35rem;color:var(--muted);font-size:.95rem}
.enlace-flecha{display:inline-flex;align-items:center;gap:.5rem;color:var(--terra-deep);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(168,69,26,.35);padding-bottom:2px;transition:border-color .2s var(--ease)}
.enlace-flecha svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.enlace-flecha:hover{border-bottom-color:var(--terra-deep)}
.enlace-flecha:hover svg{transform:translateX(2px)}
.datos{margin:2rem 0 0;display:grid;gap:1rem}
.datos dt{font-size:.85rem;color:var(--muted)}
.datos dd{margin:0;color:var(--ink);user-select:all}

/* formulario */
.form{display:grid;gap:1.35rem}
.fila-2{display:grid;gap:1.35rem}
@media (min-width:640px){.fila-2{grid-template-columns:1fr 1fr}}
.campo{display:grid;gap:.4rem;align-content:start;position:relative}
.campo label{font-weight:500;font-size:.95rem;color:var(--navy)}
.opcional{font-weight:400;color:var(--muted)}
.campo input,.campo textarea,.campo select{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--cream);
  border:1px solid #8A8272;border-radius:8px;padding:.8rem .95rem;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.campo textarea{resize:vertical;min-height:8.5rem;line-height:1.55}
.campo input::placeholder,.campo textarea::placeholder{color:var(--muted)}
.campo input:hover,.campo textarea:hover,.campo select:hover{border-color:var(--navy)}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:none;border-color:var(--terra);background:#FFFDF9;box-shadow:0 0 0 4px rgba(var(--terra-rgb),.18)}
.select{position:relative}
.select select{padding-right:2.6rem;cursor:pointer}
.select svg{position:absolute;right:.9rem;top:50%;width:1.1rem;height:1.1rem;transform:translateY(-50%);pointer-events:none;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.error{margin:0;min-height:0;font-size:.88rem;color:var(--terra-deep)}
.error:empty{display:none}
.con-error input,.con-error textarea,.con-error select{border-color:var(--terra-deep)}
.con-error input:focus,.con-error textarea:focus{box-shadow:0 0 0 4px rgba(168,69,26,.16)}

.check{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;font-size:.96rem;color:var(--ink);cursor:pointer;line-height:1.45}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check .caja{width:1.3rem;height:1.3rem;border:1px solid #8A8272;border-radius:5px;background:var(--cream);display:grid;place-items:center;margin-top:.08rem;transition:background .2s var(--ease),border-color .2s var(--ease)}
.check .caja svg{width:.95rem;height:.95rem;fill:none;stroke:var(--cream);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .3s var(--ease)}
.check input:checked + .caja{background:var(--terra-deep);border-color:var(--terra-deep)}
.check input:checked + .caja svg{stroke-dashoffset:0}
.check input:focus-visible + .caja{outline:3px solid var(--terra);outline-offset:2px}

.trampa{position:absolute !important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

.enviar{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:.4rem}
.enviar .btn{min-width:13.5rem;justify-content:center}
.btn .girando{display:none;width:1.05em;height:1.05em;border-radius:50%;border:2px solid rgba(var(--navy-rgb),.25);border-top-color:var(--navy);animation:girar .8s linear infinite}
.btn.enviando .girando{display:inline-block}
.btn.enviando .flecha{display:none}
.btn:disabled{cursor:progress;opacity:.9}
.estado{margin:0;font-size:.93rem;color:var(--muted);flex:1 1 16rem}
.estado:empty{display:none}
.estado.es-error{color:var(--terra-deep)}

.listo{text-align:center;padding:clamp(1.5rem,5vw,3rem) .5rem;outline:none}
.listo-ico{width:4.5rem;height:4.5rem;margin:0 auto 1.2rem}
.listo-ico circle{fill:none;stroke:var(--terra);stroke-width:2.5;stroke-dasharray:176;stroke-dashoffset:176}
.listo-ico path{fill:none;stroke:var(--terra);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40}
.listo.visible .listo-ico circle{transition:stroke-dashoffset .8s var(--ease-out);stroke-dashoffset:0}
.listo.visible .listo-ico path{transition:stroke-dashoffset .5s var(--ease-out) .55s;stroke-dashoffset:0}
.listo h2{font-size:clamp(1.8rem,1.3rem + 1.6vw,2.4rem);margin:0 auto .6rem;max-width:none}
.listo h2::after{display:none}
.listo p{color:var(--muted);max-width:36ch;margin:0 auto 1.6rem}
@media (prefers-reduced-motion:reduce){
  .listo-ico circle,.listo-ico path{stroke-dashoffset:0 !important;transition:none !important}
}
@media (max-width:919px){
  .tarjeta-form{order:-1}
  .contacto-lado{padding-top:.5rem}
}
@media (max-width:480px){
  .enviar .btn{width:100%}
  .tarjeta-form{margin-top:-2rem}
  .volver-mas{display:none}
}

/* ---------- escena de envío: el isotipo lleva el sobre ---------- */
.escena{padding:clamp(1rem,4vw,2rem) 0 .5rem;overflow:hidden}
.escena svg{width:100%;max-width:560px;margin:0 auto;overflow:visible}
.escena .suelo{stroke:var(--rule);stroke-width:1.5}
.escena .sobre .frente,.escena .sobre .solapa,.escena .sobre .solapa-atras{fill:var(--cream);stroke:var(--navy);stroke-width:1.8;stroke-linejoin:round}
.escena .sobre .pliegue{fill:none;stroke:rgba(var(--navy-rgb),.35);stroke-width:1.2;stroke-linejoin:round}
.escena .hoja rect{fill:#FFFFFF;stroke:rgba(var(--navy-rgb),.45);stroke-width:1.2}
.escena .hoja path{fill:none;stroke:rgba(var(--navy-rgb),.35);stroke-width:1.4;stroke-linecap:round}
.escena .sello{fill:var(--terra)}
.escena .solapa,.escena .hoja,.escena .solapa-atras,.escena .sello,
.escena .cuerpo,.escena .inclina,.escena .pierna,.escena .sobre-mano,.escena .polvo circle,.escena .lineas path{transform-box:fill-box}
.escena .solapa{transform-origin:50% 0;transform:scaleY(0)}
.escena .solapa-atras{transform-origin:50% 100%}
.escena .sello{transform-origin:50% 50%;transform:scale(0)}
.escena .sobre{transform-box:view-box;transform-origin:0 0}
.escena .hoja{transform:translateY(-30px)}

.escena #bot{transform:translateX(-70px)}
.escena .inclina{transform-origin:50% 100%}
.escena .cuerpo{transform-origin:50% 100%}
.escena .piel{fill:var(--cream);stroke:var(--navy);stroke-width:2.4}
.escena .anillo{fill:none;stroke:var(--navy);stroke-width:8;stroke-linecap:butt}
.escena .punto{fill:var(--terra)}
.escena .brazo{fill:none;stroke:var(--navy);stroke-width:2.6;stroke-linecap:round}
.escena .pierna{transform-origin:50% 0}
.escena .pierna line{stroke:var(--navy);stroke-width:2.8;stroke-linecap:round}
.escena .pierna ellipse{fill:var(--navy)}
.escena .sobre-mano{opacity:0;transform-origin:50% 50%}
.escena .sobre-mano rect{fill:var(--cream);stroke:var(--navy);stroke-width:1.6}
.escena .sobre-mano path{fill:none;stroke:var(--navy);stroke-width:1.4;stroke-linejoin:round}
.escena .sobre-mano circle{fill:var(--terra)}
.escena .lineas path{fill:none;stroke:var(--terra);stroke-width:2.2;stroke-linecap:round;opacity:0}
.escena .polvo circle{fill:rgba(var(--navy-rgb),.16);opacity:0;transform-origin:50% 50%}

/* caminar y correr: las piernas se alternan, el cuerpo rebota */
@keyframes paso{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}
@keyframes zancada{from{transform:rotate(-42deg)}to{transform:rotate(42deg)}}
@keyframes rebote{from{transform:translateY(0)}to{transform:translateY(-2.5px)}}
@keyframes rebote-fuerte{from{transform:translateY(0)}to{transform:translateY(-5px)}}
@keyframes estela{0%{opacity:0;transform:translateX(8px)}30%{opacity:1}100%{opacity:0;transform:translateX(-10px)}}
.escena .caminando .pierna-a{animation:paso .34s ease-in-out infinite alternate}
.escena .caminando .pierna-b{animation:paso .34s ease-in-out infinite alternate-reverse}
.escena .caminando .cuerpo{animation:rebote .17s ease-in-out infinite alternate}
.escena .corriendo .pierna-a{animation:zancada .15s ease-in-out infinite alternate}
.escena .corriendo .pierna-b{animation:zancada .15s ease-in-out infinite alternate-reverse}
.escena .corriendo .cuerpo{animation:rebote-fuerte .075s ease-in-out infinite alternate}
.escena .corriendo .lineas path{animation:estela .3s linear infinite}
.escena .corriendo .lineas path:nth-child(2){animation-delay:.1s}
.escena .corriendo .lineas path:nth-child(3){animation-delay:.2s}