/* =================================================================
   ALL OFFICE SOLUTIONS — "Tinta & Precisión"
   Print-craft meets premium-tech · CMYK ink, registration marks
   ================================================================= */

:root{
  /* --- Ink & paper --- */
  --ink:        #0B0B0E;
  --ink-2:      #121218;
  --ink-3:      #1B1B23;
  --paper:      #F4F1E9;
  --paper-2:    #EAE5D8;
  --paper-ink:  #1A1712;

  /* --- Signal / CMYK --- */
  --red:        #F22428;   /* exact AOS brand red (sampled from logo) */
  --red-deep:   #D2140A;
  --cyan:       #14C4E8;
  --magenta:    #F0359B;
  --yellow:     #FFC42B;

  /* --- Text --- */
  --fg:         #F4F1E9;
  --fg-dim:     rgba(244,241,233,.62);
  --fg-faint:   rgba(244,241,233,.34);
  --line:       rgba(244,241,233,.14);

  /* --- Type --- */
  --display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --body:    "Instrument Sans", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  /* --- Metrics --- */
  --pad: clamp(20px, 5vw, 96px);
  --maxw: 1520px;
  --ease: cubic-bezier(.19,1,.22,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--body);
  background:var(--ink);
  color:var(--fg);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img,svg{ display:block; max-width:100%; }
::selection{ background:var(--red); color:#fff; }

/* =================================================================
   ATMOSPHERE — grain + drifting CMYK ink
   ================================================================= */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ink-field{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; filter:blur(20px); }
.ink{
  position:absolute; border-radius:50%;
  mix-blend-mode:screen; opacity:.5;
  will-change:transform;
}
.ink--c{ width:44vw; height:44vw; background:radial-gradient(circle,var(--cyan),transparent 62%);    top:-8vw; left:-6vw;  animation:drift1 26s var(--ease) infinite alternate; }
.ink--m{ width:40vw; height:40vw; background:radial-gradient(circle,var(--magenta),transparent 62%); top:6vw;  right:-10vw; animation:drift2 32s var(--ease) infinite alternate; }
.ink--y{ width:34vw; height:34vw; background:radial-gradient(circle,var(--yellow),transparent 60%);  bottom:-8vw; left:14vw; animation:drift3 30s var(--ease) infinite alternate; opacity:.32; }
.ink--r{ width:30vw; height:30vw; background:radial-gradient(circle,var(--red),transparent 60%);     bottom:2vw; right:8vw;  animation:drift1 24s var(--ease) infinite alternate-reverse; }
@keyframes drift1{ to{ transform:translate(8vw,10vh) scale(1.2); } }
@keyframes drift2{ to{ transform:translate(-10vw,8vh) scale(1.15); } }
@keyframes drift3{ to{ transform:translate(12vw,-8vh) scale(1.25); } }

/* =================================================================
   CUSTOM CURSOR — registration mark
   ================================================================= */
.cursor{
  position:fixed; top:0; left:0; z-index:9000; pointer-events:none;
  width:44px; height:44px; transform:translate(-50%,-50%);
  mix-blend-mode:difference; opacity:0;
  transition:opacity .3s;
}
.cursor__reg{ width:100%; height:100%; fill:none; stroke:#fff; stroke-width:1; opacity:.85;
  transition:transform .35s var(--ease); }
.cursor__dot{ position:absolute; top:50%; left:50%; width:4px; height:4px; border-radius:50%;
  background:#fff; transform:translate(-50%,-50%); }
.cursor.is-hot .cursor__reg{ transform:scale(1.7) rotate(45deg); }
.cursor.is-hot .cursor__dot{ background:var(--red); }
body.cursor-ready .cursor{ opacity:1; }
@media (hover:none){ .cursor{ display:none; } }

/* =================================================================
   PRELOADER
   ================================================================= */
.preloader{
  position:fixed; inset:0; z-index:9500; background:var(--ink);
  display:flex; align-items:flex-end; justify-content:center; padding:0 var(--pad) 8vh;
  transition:transform 1s var(--ease); will-change:transform;
}
.preloader.done{ transform:translateY(-101%); }
.preloader__inner{ width:100%; max-width:var(--maxw); }
.preloader__marks{ display:flex; gap:4px; height:5px; margin-bottom:22px; }
.pl-bar{ flex:1; transform:scaleX(0); transform-origin:left; }
.pl-bar--c{ background:var(--cyan);    animation:plfill .7s .05s var(--ease) forwards; }
.pl-bar--m{ background:var(--magenta); animation:plfill .7s .18s var(--ease) forwards; }
.pl-bar--y{ background:var(--yellow);  animation:plfill .7s .31s var(--ease) forwards; }
.pl-bar--k{ background:var(--fg);      animation:plfill .7s .44s var(--ease) forwards; }
@keyframes plfill{ to{ transform:scaleX(1); } }
.preloader__row{ display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--mono); font-size:clamp(12px,1.4vw,15px); letter-spacing:.04em; text-transform:uppercase; }
.preloader__label{ color:var(--fg-dim); }
.preloader__count{ font-size:clamp(40px,9vw,120px); font-family:var(--display); font-weight:800; letter-spacing:-.03em; }

/* =================================================================
   NAV
   ================================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:800;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--pad); gap:24px;
  transition:transform .5s var(--ease), background .4s, backdrop-filter .4s, padding .4s;
}
.nav.hide{ transform:translateY(-110%); }
.nav.solid{ background:rgba(11,11,14,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); padding-top:14px; padding-bottom:14px; }

.brand{ display:flex; align-items:center; gap:12px; }
.brand__logo{ height:38px; width:auto; display:block; transition:height .4s var(--ease); }
.nav.solid .brand__logo{ height:34px; }
.brand__mark{ width:30px; height:30px; color:var(--red); }
.brand__mark svg{ fill:none; stroke:currentColor; stroke-width:1.6; width:100%; height:100%;
  transition:transform .6s var(--ease); }
.brand:hover .brand__mark svg{ transform:rotate(90deg); }
.brand__type{ font-family:var(--display); font-weight:700; font-size:18px; line-height:.95; letter-spacing:-.02em; }
.brand__type span{ display:block; color:var(--fg-dim); font-weight:600; }

.nav__links{ display:flex; gap:34px; margin-left:auto; }
.nav__links a{ font-size:14px; font-weight:500; color:var(--fg-dim); position:relative; padding:4px 0; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--red); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); }
.nav__links a:hover{ color:var(--fg); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__actions{ display:flex; align-items:center; gap:14px; }

.nav__burger{ display:none; width:40px; height:40px; background:none; border:1px solid var(--line);
  border-radius:50%; cursor:pointer; position:relative; }
.nav__burger span{ position:absolute; left:11px; width:18px; height:1.6px; background:var(--fg);
  transition:.35s var(--ease); }
.nav__burger span:nth-child(1){ top:16px; } .nav__burger span:nth-child(2){ top:22px; }
.nav__burger.open span:nth-child(1){ top:19px; transform:rotate(45deg); }
.nav__burger.open span:nth-child(2){ top:19px; transform:rotate(-45deg); }

/* ---------- buttons ---------- */
.btn{ position:relative; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-weight:600; font-size:15px; letter-spacing:.01em;
  padding:14px 24px; border-radius:100px; cursor:pointer; white-space:nowrap;
  transition:transform .5s var(--ease), background .35s, color .35s, border-color .35s; }
.btn__arrow{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .4s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(4px); }
.btn--solid{ background:var(--red); color:#fff; }
.btn--solid:hover{ background:#fff; color:var(--ink); }
.btn--line{ border:1px solid var(--line); color:var(--fg); }
.btn--line:hover{ border-color:var(--fg); background:var(--fg); color:var(--ink); }
.btn--ghost{ color:var(--fg); border:1px solid var(--line); padding:10px 20px; font-size:14px; }
.btn--ghost:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.btn--lg{ padding:20px 34px; font-size:17px; }
/* Portal Clientes — acceso de clientes EXISTENTES. Se diferencia a propósito
   del CTA comercial (Cotizar → rojo = negocio nuevo): cian = utilidad/cuenta,
   para que un cliente que viene a pedir tóner lo encuentre de una. */
.btn--portal{ color:var(--fg); border:1px solid rgba(20,196,232,.45); background:rgba(20,196,232,.09);
  padding:10px 18px; font-size:14px; }
.btn--portal:hover{ background:var(--cyan); border-color:var(--cyan); color:var(--ink); }
.btn__user{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }

/* ---------- mobile drawer ---------- */
.drawer{
  position:fixed; inset:0; z-index:790; background:var(--ink-2);
  display:flex; flex-direction:column; justify-content:center; gap:6px; padding:24px var(--pad);
  overflow-y:auto; overscroll-behavior:contain;
  transform:translateY(-100%); transition:transform .6s var(--ease); }
.drawer:not(.open){ visibility:hidden; }
.drawer.open{ visibility:visible; }
.drawer.open{ transform:translateY(0); }
.drawer a{ font-family:var(--display); font-weight:700; font-size:clamp(34px,9vw,60px);
  letter-spacing:-.03em; padding:8px 0; border-bottom:1px solid var(--line); }
.drawer a:last-child{ border:none; }
.drawer__cta{ color:var(--red)!important; margin-top:14px; }

/* =================================================================
   SECTION PRIMITIVES
   ================================================================= */
section{ position:relative; z-index:2; }
.sec-head{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.sec-kicker{ display:inline-block; font-family:var(--mono); font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--red); margin-bottom:22px; }
.sec-kicker--red{ color:var(--red); }
.sec-title{ font-family:var(--display); font-weight:700; letter-spacing:-.035em; line-height:.98;
  font-size:clamp(34px,6.2vw,88px); max-width:16ch; }
.outline{ color:transparent; -webkit-text-stroke:1.4px var(--fg); text-stroke:1.4px var(--fg); }
.kinetic{ position:relative; color:var(--red); font-style:italic; }
.kinetic::after{ content:""; position:absolute; left:-2%; right:-2%; bottom:.08em; height:.09em;
  background:var(--red); transform:scaleX(0); transform-origin:left; }
.in .kinetic::after{ animation:underline .8s .3s var(--ease) forwards; }
@keyframes underline{ to{ transform:scaleX(1); } }

/* =================================================================
   HERO
   ================================================================= */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; }
.hero__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(11,11,14,.86) 0%, rgba(11,11,14,.72) 32%, rgba(11,11,14,.46) 48%, rgba(11,11,14,.16) 64%, transparent 78%),
    linear-gradient(0deg, rgba(11,11,14,.44) 0%, transparent 20%),
    linear-gradient(180deg, rgba(11,11,14,.52) 0%, transparent 16%); }

.hero__content{ position:relative; z-index:2; width:100%;
  padding:120px var(--pad) 96px; }
.hero__content > *{ max-width:660px; }

.hero__eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono);
  font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-dim);
  border:1px solid var(--line); border-radius:100px; padding:9px 16px;
  background:rgba(11,11,14,.4); backdrop-filter:blur(4px); }
.hero__eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:#22C55E;
  box-shadow:0 0 0 0 #22C55E; animation:pulseG 2.4s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(242,36,40,.5);} 70%{ box-shadow:0 0 0 9px rgba(242,36,40,0);} }

.hero__title{ font-family:var(--display); font-weight:800; letter-spacing:-.04em; line-height:.96;
  font-size:clamp(38px,5.6vw,78px); margin:22px 0 0; }

.hero__lead{ font-size:clamp(16px,1.5vw,20px); color:var(--fg-dim); margin-top:24px; }
.hero__lead strong{ color:var(--fg); font-weight:600; }

.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

.hero__stats{ display:flex; flex-wrap:wrap; gap:clamp(22px,4vw,54px); max-width:680px;
  margin-top:clamp(34px,4.5vw,52px); padding-top:26px; border-top:1px solid var(--line); }
.hstat__num{ display:block; font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(26px,3vw,40px); line-height:1; }
.hstat__label{ display:block; margin-top:6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--fg-faint); }

.hero__scroll{ position:absolute; left:var(--pad); bottom:24px; z-index:2; display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-faint); }
.hero__scroll-line{ width:52px; height:1px; background:var(--line); position:relative; overflow:hidden; }
.hero__scroll-line::after{ content:""; position:absolute; inset:0; width:40%; background:var(--red);
  animation:scrollline 2.2s var(--ease) infinite; }
@keyframes scrollline{ 0%{ transform:translateX(-100%);} 100%{ transform:translateX(280%);} }

/* =================================================================
   MARQUEE
   ================================================================= */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:26px 0; overflow:hidden; background:var(--ink-2); }
.marquee__track{ display:flex; width:max-content; animation:marq 26s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{ font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(30px,5vw,62px); display:flex; align-items:center; padding-right:.35em; white-space:nowrap; }
.marquee__track i{ color:var(--red); font-style:normal; margin:0 .5em; font-size:.4em; transform:translateY(-.25em); }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* =================================================================
   STATS
   ================================================================= */
.stats{ max-width:var(--maxw); margin:0 auto; padding:clamp(60px,9vw,120px) var(--pad);
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.stat{ padding:26px 0; border-top:1px solid var(--line); }
.stat__num{ display:block; font-family:var(--display); font-weight:800; letter-spacing:-.04em;
  font-size:clamp(46px,7vw,96px); line-height:1; }
.stat__label{ display:block; margin-top:10px; font-size:14px; color:var(--fg-dim); }

/* =================================================================
   SERVICIOS
   ================================================================= */
.services{ padding:clamp(50px,8vw,100px) 0 clamp(70px,10vw,140px); }
.services .sec-head{ margin-bottom:clamp(40px,6vw,80px); }
.svc-list{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  border-top:1px solid var(--line); }
.svc{ position:relative; display:grid; grid-template-columns:90px 1.1fr 1.4fr auto;
  align-items:center; gap:30px; padding:clamp(26px,3.4vw,44px) 0;
  border-bottom:1px solid var(--line); transition:padding .5s var(--ease); }
.svc::before{ content:""; position:absolute; left:calc(var(--pad)*-1); right:calc(var(--pad)*-1);
  top:0; bottom:0; background:var(--ink-2); opacity:0; transition:opacity .5s var(--ease); z-index:-1; }
.svc:hover{ padding-left:clamp(14px,2vw,32px); }
.svc:hover::before{ opacity:1; }
.svc__idx{ font-family:var(--mono); font-size:15px; color:var(--fg-faint); }
.svc__name{ font-family:var(--display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(30px,4.4vw,62px); line-height:.95; transition:color .4s; }
.svc__desc{ font-size:15px; color:var(--fg-dim); max-width:44ch; }
.svc__tags{ font-family:var(--mono); font-size:12px; letter-spacing:.03em; color:var(--fg-faint);
  display:block; margin-top:12px; }
.svc__go{ font-size:30px; color:var(--fg-faint); transition:transform .5s var(--ease), color .4s; justify-self:end; }
.svc:hover .svc__go{ transform:translate(8px,-8px); }
/* accent per card */
.svc[data-accent="c"]:hover .svc__name{ color:var(--cyan); }    .svc[data-accent="c"]:hover .svc__go{ color:var(--cyan); }
.svc[data-accent="m"]:hover .svc__name{ color:var(--magenta); } .svc[data-accent="m"]:hover .svc__go{ color:var(--magenta); }
.svc[data-accent="y"]:hover .svc__name{ color:var(--yellow); }  .svc[data-accent="y"]:hover .svc__go{ color:var(--yellow); }
.svc[data-accent="r"]:hover .svc__name{ color:var(--red); }     .svc[data-accent="r"]:hover .svc__go{ color:var(--red); }

/* =================================================================
   SOLUCIONES / SEGMENTOS  (paper section)
   ================================================================= */
.segments{ background:var(--paper); color:var(--paper-ink); border-radius:clamp(24px,4vw,60px) clamp(24px,4vw,60px) 0 0;
  padding:clamp(60px,9vw,130px) 0; }
.sec-head--light .sec-kicker{ color:var(--red-deep); }
.sec-head--light .sec-title{ color:var(--paper-ink); }
.segments .sec-head{ margin-bottom:clamp(40px,6vw,72px); }
.seg-grid{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
/* escalera ascendente: casa → oficina → producción (rompe la fila de 3 iguales
   y refuerza el salto de escala del titular) */
.seg{ --lift:0px; position:relative; background:#fff; border-radius:22px; padding:30px 28px 28px;
  overflow:hidden; display:flex; flex-direction:column;
  transform:translateY(var(--lift));
  box-shadow:0 1px 0 rgba(26,23,18,.05), 0 18px 40px -28px rgba(26,23,18,.28);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease); }
.seg--office{ --lift:-22px; }
.seg--prod{   --lift:-44px; }
.seg:hover{ transform:translateY(calc(var(--lift) - 8px));
  box-shadow:0 1px 0 rgba(26,23,18,.05), 0 34px 64px -30px rgba(26,23,18,.4); }
.seg__top{ display:flex; align-items:center; justify-content:space-between; }
.seg__no{ width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  font-family:var(--display); font-weight:800; font-size:20px; color:#fff; }
.seg--home .seg__no{ background:var(--cyan); } .seg--office .seg__no{ background:var(--magenta); } .seg--prod .seg__no{ background:var(--red); }
.seg__chip{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(26,23,18,.5); }
.seg__title{ font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(40px,5vw,64px); line-height:.95; margin:20px 0 12px; }
.seg__text{ font-size:15px; color:rgba(26,23,18,.68); max-width:34ch; }
.seg__list{ margin-top:auto; padding-top:22px; display:flex; flex-direction:column; gap:8px; }
.seg__list li{ font-size:14px; padding-left:20px; position:relative; color:rgba(26,23,18,.85); }
.seg__list li::before{ content:""; position:absolute; left:0; top:8px; width:8px; height:8px;
  border:1.4px solid currentColor; border-radius:50%; opacity:.6; }

/* foto del equipo — fondo blanco puro: funde con la tarjeta, el producto flota */
.seg__shot{ margin:14px -6px 2px; }
.seg__shot img{ width:100%; height:auto; display:block;
  transition:transform .7s var(--ease); will-change:transform; }
.seg:hover .seg__shot img{ transform:translateY(-6px) scale(1.03); }

/* =================================================================
   POR QUÉ
   ================================================================= */
.why{ padding:clamp(70px,10vw,140px) 0; }
.why .sec-head{ margin-bottom:clamp(44px,6vw,80px); }
.why-grid{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.feat{ background:var(--ink); padding:36px 30px 40px; transition:background .5s var(--ease); }
.feat:hover{ background:var(--ink-2); }
.feat__icon{ width:52px; height:52px; display:grid; place-items:center; border:1px solid var(--line);
  border-radius:14px; margin-bottom:60px; color:var(--red); transition:.5s var(--ease); }
.feat__icon svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.feat:hover .feat__icon{ background:var(--red); border-color:var(--red); color:#fff; transform:translateY(-4px); }
.feat h3{ font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:-.02em; margin-bottom:12px; }
.feat p{ font-size:14.5px; color:var(--fg-dim); }

/* =================================================================
   CANON BAND
   ================================================================= */
.canon{ position:relative; overflow:hidden; margin:0 var(--pad); border-radius:clamp(24px,4vw,44px);
  background:linear-gradient(150deg,#160404,#0B0B0E 60%); border:1px solid rgba(255,59,33,.22); }
.canon__reg{ position:absolute; top:-30px; right:-30px; width:clamp(160px,26vw,360px); color:rgba(255,59,33,.16); }
.canon__reg svg{ fill:none; stroke:currentColor; stroke-width:1; width:100%; height:100%; }
/* split asimétrico: la prueba (foto) a la izquierda, el argumento a la derecha —
   zig-zag respecto al hero, que va texto-izquierda/foto-derecha */
.canon__inner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto;
  padding:clamp(50px,7vw,96px) clamp(28px,5vw,80px);
  display:grid; grid-template-columns:1fr 1.06fr; gap:clamp(32px,4vw,64px); align-items:stretch; }
.canon__shot{ position:relative; margin:0; border-radius:clamp(14px,1.6vw,20px); overflow:hidden;
  height:100%; min-height:clamp(320px,34vw,540px);
  border:1px solid rgba(244,241,233,.14);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.9), 0 0 0 1px rgba(242,36,40,.1); }
.canon__shot img{ width:100%; height:100%; display:block; object-fit:cover; object-position:38% center;
  transition:transform .9s var(--ease); }
.canon__shot:hover img{ transform:scale(1.035); }
.canon__cap{ position:absolute; left:0; right:0; bottom:0; padding:26px 18px 12px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.82);
  background:linear-gradient(0deg, rgba(11,11,14,.85), transparent); }
.canon__title{ font-family:var(--display); font-weight:800; letter-spacing:-.035em; line-height:.95;
  font-size:clamp(36px,4.4vw,64px); margin:18px 0 22px; }
.canon__red{ color:var(--red); }
.canon__lead{ font-size:clamp(15px,1.15vw,18px); color:var(--fg-dim); max-width:52ch; }
.canon__lead strong{ color:var(--fg); font-weight:600; }
.canon__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  margin-top:clamp(30px,3.4vw,44px); padding-top:28px; border-top:1px solid var(--line); }
.canon__pt-num{ display:block; font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(30px,2.9vw,42px); color:var(--red); line-height:1; }
.canon__pt-txt{ display:block; margin-top:12px; font-size:14.5px; color:var(--fg-dim); max-width:30ch; }

/* =================================================================
   CTA
   ================================================================= */
.cta{ max-width:var(--maxw); margin:0 auto; padding:clamp(80px,13vw,180px) var(--pad);
  text-align:center; }
.cta__kick{ font-family:var(--mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--red); margin-bottom:26px; }
.cta__title{ font-family:var(--display); font-weight:800; letter-spacing:-.04em; line-height:.94;
  font-size:clamp(44px,9vw,140px); }
.cta__title span{ display:block; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin:clamp(36px,5vw,56px) 0 22px; }
.cta__note{ font-size:14px; color:var(--fg-dim); }

/* =================================================================
   FOOTER
   ================================================================= */
.footer{ border-top:1px solid var(--line); padding:clamp(50px,7vw,90px) var(--pad) 34px;
  max-width:var(--maxw); margin:0 auto; position:relative; z-index:2; }
.footer__big{ display:flex; flex-direction:column; line-height:.86; margin-bottom:clamp(44px,6vw,80px); }
.footer__word{ font-family:var(--display); font-weight:800; letter-spacing:-.04em;
  font-size:clamp(48px,15vw,220px); }
.footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px;
  padding-bottom:40px; border-bottom:1px solid var(--line); }
.footer__h{ display:block; font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg-faint); margin-bottom:16px; }
.footer__col a{ display:block; font-size:15px; color:var(--fg-dim); padding:5px 0; transition:color .3s; }
.footer__col a:hover{ color:var(--red); }
.footer__brands{ font-size:15px; color:var(--fg-dim); line-height:1.7; }
.footer__base{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  margin-top:26px; font-size:13px; color:var(--fg-faint); }
.footer__tag{ font-style:italic; }

/* =================================================================
   REVEAL ANIMATIONS
   ================================================================= */
[data-reveal]{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
.hero__title .line [data-reveal]{ transform:translateY(100%); }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width:1080px){
  .svc{ grid-template-columns:70px 1fr auto; }
  .svc__desc, .svc__tags{ grid-column:2 / -1; }
  .svc__desc{ margin-top:6px; }
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .canon__inner{ grid-template-columns:1fr; gap:34px; }
  .canon__shot{ order:2; }            /* en estrecho: primero el argumento, luego la prueba */
  .canon__body{ order:1; }
  .canon__grid{ grid-template-columns:repeat(3,1fr); gap:18px; }
}
@media (max-width:560px){
  .canon__grid{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
  .nav .btn--ghost{ display:none; }
  /* El acceso al portal SÍ sobrevive en móvil (es donde el cliente pide tóner
     desde el teléfono), pero compacto: solo el icono junto a la hamburguesa. */
  .btn__portal-txt{ display:none; }
  .nav .btn--portal{ padding:10px 12px; }
  .hero__foot{ grid-template-columns:1fr; align-items:start; gap:26px; }
  .hero__cta{ justify-content:flex-start; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:0 24px; }
  .seg-grid{ grid-template-columns:1fr; }
  .seg, .seg--office, .seg--prod{ --lift:0px; }   /* sin escalera en móvil */
}
@media (max-width:560px){
  .why-grid{ grid-template-columns:1fr; }
  .svc{ grid-template-columns:1fr; gap:10px; }
  .svc__idx{ position:absolute; top:22px; right:0; }
  .svc__go{ display:none; }
  .footer__cols{ grid-template-columns:1fr; gap:24px; }
  .footer__base{ flex-direction:column; }
  .cursor{ display:none; }
}

/* motion-reduce */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  [data-reveal]{ opacity:1; transform:none; }
  .ink,.marquee__track{ animation:none; }
}

/* =================================================================
   ASISTENTE VIRTUAL
   ================================================================= */
.assistant{ position:fixed; right:clamp(14px,2.4vw,28px); bottom:clamp(18px,3vw,32px); z-index:900;
  display:flex; flex-direction:column; align-items:flex-end; pointer-events:none; }
.assistant.chatting .asst-fab, .assistant.chatting .asst-bubble{ opacity:0; pointer-events:none; transform:translateY(10px); }

/* floating avatar button */
.asst-fab{ position:relative; width:clamp(64px,7vw,80px); height:clamp(64px,7vw,80px);
  padding:0; border:2.5px solid var(--red); border-radius:50%; background:var(--ink-2); cursor:pointer; overflow:visible;
  box-shadow:0 14px 34px -8px rgba(0,0,0,.65), 0 0 0 5px rgba(242,36,40,.14); pointer-events:auto;
  animation:asstFloat 5.5s ease-in-out infinite; transition:transform .45s var(--ease), opacity .4s, box-shadow .4s; }
.asst-fab img{ width:100%; height:100%; display:block; object-fit:cover; border-radius:50%; }
.asst-fab:hover{ transform:translateY(-5px) scale(1.06); box-shadow:0 20px 44px -8px rgba(0,0,0,.7), 0 0 0 7px rgba(242,36,40,.22); }
@keyframes asstFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-7px);} }
.asst-fab__status{ position:absolute; top:-1px; right:-1px; width:15px; height:15px; border-radius:50%;
  background:#22c55e; border:2.5px solid var(--ink); box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:pulseG 2.4s infinite; }
@keyframes pulseG{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.55);} 70%{ box-shadow:0 0 0 9px rgba(34,197,94,0);} }

/* speech bubble */
.asst-bubble{ position:relative; margin:0 8px 14px 0; max-width:236px; background:#fff; color:#141018;
  padding:13px 34px 13px 15px; border-radius:16px 16px 4px 16px; font-size:14.5px; font-weight:600; line-height:1.35;
  box-shadow:0 16px 34px -12px rgba(0,0,0,.65); pointer-events:auto;
  opacity:0; transform:translateY(10px) scale(.94); transform-origin:bottom right;
  transition:opacity .5s var(--ease), transform .5s var(--ease); }
.asst-bubble.show{ opacity:1; transform:none; cursor:pointer; animation:bubblePop .6s var(--ease); }
@keyframes bubblePop{ 0%{ transform:translateY(10px) scale(.9);} 60%{ transform:translateY(-3px) scale(1.03);} 100%{ transform:none;} }
.asst-bubble::after{ content:""; position:absolute; right:24px; bottom:-6px; width:14px; height:14px; background:#fff; transform:rotate(45deg); }
.asst-bubble__x{ position:absolute; top:5px; right:7px; width:20px; height:20px; border:none; background:none; color:#b0b0b0; font-size:17px; line-height:1; cursor:pointer; border-radius:50%; }
.asst-bubble__x:hover{ color:var(--red); }

/* chat panel */
.asst-panel{ position:fixed; right:clamp(12px,2.4vw,26px); bottom:clamp(12px,2.4vw,22px); z-index:950;
  width:min(384px, calc(100vw - 24px)); height:min(566px, calc(100dvh - 40px));
  background:var(--ink-2); border:1px solid var(--line); border-radius:22px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 44px 100px -30px rgba(0,0,0,.85);
  opacity:0; transform:translateY(22px) scale(.97); transform-origin:bottom right; pointer-events:none;
  transition:opacity .4s var(--ease), transform .45s var(--ease); }
.asst-panel.open{ opacity:1; transform:none; pointer-events:auto; }

.asst-head{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(242,36,40,.14), transparent); }
.asst-head__av{ width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:50% 22%; border:1px solid var(--line); background:var(--ink-3); }
.asst-head__meta{ display:flex; flex-direction:column; line-height:1.25; }
.asst-head__name{ font-family:var(--display); font-weight:700; font-size:15.5px; letter-spacing:-.01em; }
.asst-head__status{ font-size:11px; color:var(--fg-dim); display:flex; align-items:center; gap:6px; }
.asst-head__status::before{ content:""; width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 6px #22c55e; }
.asst-head__x{ margin-left:auto; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:none; color:var(--fg-dim); font-size:17px; cursor:pointer; transition:.3s; }
.asst-head__x:hover{ background:var(--red); border-color:var(--red); color:#fff; }

.asst-body{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; scrollbar-width:thin; }
.asst-msg{ max-width:84%; padding:10px 13px; border-radius:15px; font-size:14px; line-height:1.45; word-wrap:break-word;
  animation:msgIn .35s var(--ease); }
@keyframes msgIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.asst-msg--bot{ align-self:flex-start; background:var(--ink-3); border:1px solid var(--line); color:var(--fg); border-bottom-left-radius:4px; }
.asst-msg--user{ align-self:flex-end; background:var(--red); color:#fff; border-bottom-right-radius:4px; }
.asst-msg a{ color:inherit; text-decoration:underline; }
.asst-msg--bot a{ color:var(--red); }
.asst-typing{ align-self:flex-start; display:flex; gap:5px; padding:13px 15px; background:var(--ink-3); border:1px solid var(--line); border-radius:15px; border-bottom-left-radius:4px; }
.asst-typing span{ width:6px; height:6px; border-radius:50%; background:var(--fg-faint); animation:typing 1.2s infinite; }
.asst-typing span:nth-child(2){ animation-delay:.18s; } .asst-typing span:nth-child(3){ animation-delay:.36s; }
@keyframes typing{ 0%,60%,100%{ transform:translateY(0); opacity:.4;} 30%{ transform:translateY(-4px); opacity:1;} }

.asst-chips{ display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px; }
.asst-chip{ font-family:var(--mono); font-size:11.5px; letter-spacing:.02em; padding:6px 12px; border:1px solid var(--line);
  border-radius:100px; background:none; color:var(--fg-dim); cursor:pointer; transition:.3s; }
.asst-chip:hover{ border-color:var(--red); color:var(--fg); }

.asst-input{ display:flex; gap:8px; padding:12px 12px 6px; border-top:1px solid var(--line); }
.asst-input input{ flex:1; background:var(--ink); border:1px solid var(--line); border-radius:100px; padding:11px 16px;
  color:var(--fg); font-family:var(--body); font-size:14px; outline:none; transition:border-color .3s; }
.asst-input input::placeholder{ color:var(--fg-faint); }
.asst-input input:focus{ border-color:var(--red); }
.asst-input button{ width:42px; height:42px; border-radius:50%; background:var(--red); border:none; color:#fff; cursor:pointer;
  display:grid; place-items:center; flex-shrink:0; transition:.3s; }
.asst-input button:hover{ background:#fff; color:var(--ink); }
.asst-foot{ text-align:center; font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--fg-faint); padding:2px 0 9px; }

@media (max-width:560px){
  .asst-fab{ width:60px; height:60px; }
  .asst-fab__status{ width:13px; height:13px; }
  .asst-panel{ width:calc(100vw - 20px); height:min(74dvh, calc(100dvh - 96px)); right:10px; bottom:10px; }
}
@media (prefers-reduced-motion:reduce){
  .asst-fab{ animation:none; } .asst-fab__status{ animation:none; }
}

/* =================================================================
   CRÉDITO ANTÜ INTELLIGENCE (footer)
   ================================================================= */
.footer__antu{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:9px;
  margin-top:26px; padding-top:22px; border-top:1px solid var(--line);
  font-size:12px; color:var(--fg-faint); }
.footer__antu-link{ display:inline-flex; align-items:center; gap:8px; font-weight:500; color:var(--fg-dim); transition:color .3s; }
.footer__antu-link:hover{ color:var(--red); }
.footer__antu-logo{ height:20px; width:auto; display:block; }
.footer__antu-ig{ display:inline-flex; align-items:center; color:var(--fg-dim); margin-left:2px; transition:color .3s; }
.footer__antu-ig:hover{ color:var(--red); }
.footer__antu-ig svg{ width:16px; height:16px; }