/* =============================================================================
   INGELASER CNC — Sistema de diseño
   Arquitectura visual adaptada de plat-form.framer.ai · paleta de marca Ingelaser
   Todo funciona abriendo los HTML directamente (file://). Sin dependencias remotas.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* superficies — --ink coincide exactamente con el fondo de los renders de
     máquina, de modo que las imágenes flotan en la página sin costura visible */
  --ink:        #111214;
  --ink-deep:   #0C0D0F;
  --surface:    #1B1C1F;
  --surface-2:  #232427;
  --surface-3:  #2B2C30;
  --line:       #2A2B2F;
  --line-2:     #3A3C41;

  /* texto — todos los tonos verificados contra WCAG AA (4.5:1) sobre --ink
     y sobre --surface-2, que es la superficie más clara del sistema */
  --text:       #EDE6E3;   /* 15,2 : 1 */
  --text-2:     #9A9AA3;   /*  6,7 : 1 */
  --text-3:     #8A8B94;   /*  5,5 : 1 · antes #5E5F67, que sólo daba 2,95 */

  /* acento de marca */
  --red:        #E1251E;
  --red-2:      #FF4133;
  --red-lite:   #FF6F63;   /* variante legible para texto pequeño */
  --red-dim:    rgba(225,37,30,.14);
  --ember:      #FF8A3D;   /* naranja de metal fundido — sólo momentos de corte */

  /* tipografía */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* escala tipográfica — replica la del sistema de referencia:
     desktop / tablet / móvil = 100/80/54 (h1) · 70/52/48 (h2) · 48/32/32 (h3)
     · 35/28/28 (h4) · 21 (body) · 17 · 15 · 13 · 11 (eyebrow) */
  --fs-display: clamp(3.375rem, 7.1vw, 6.25rem);   /*  54 → 100 px */
  --fs-h1:      clamp(3rem, 5.6vw, 5rem);          /*  48 → 80  px */
  --fs-h2:      clamp(3rem, 4.9vw, 4.375rem);      /*  48 → 70  px */
  --fs-h3:      clamp(2rem, 3.4vw, 3rem);          /*  32 → 48  px */
  --fs-h4:      clamp(1.75rem, 2.45vw, 2.1875rem); /*  28 → 35  px */
  --fs-lead:    clamp(1.3125rem, 1.68vw, 1.5rem);  /*  21 → 24  px */
  --fs-body:    clamp(1.0625rem, .55vw + .95rem, 1.3125rem); /* 17 → 21 px */
  --fs-small:   1.0625rem;                          /*  17 px */
  --fs-xs:      .9375rem;                           /*  15 px */
  --fs-tiny:    .8125rem;                           /*  13 px */
  --fs-label:   .6875rem;                           /*  11 px */
  --fs-metric:  clamp(4rem, 8vw, 7.5rem);           /*  64 → 120 px · cifra a pantalla completa */
  --fs-datum:   clamp(2.75rem, 5.4vw, 5.5rem);      /*  44 →  88 px · cifra dentro de una celda
                                                       de la rejilla de 4: por encima de esto
                                                       «±0,03 mm» no cabe entre 1280 y 1600 px */

  /* medidas */
  --shell:      1600px;
  --gutter:     clamp(1.25rem, 3.2vw, 3rem);
  --sec-y:      clamp(4.5rem, 9vw, 6.25rem);        /* 100 px en desktop */
  --sec-y-hero: clamp(5rem, 13vw, 12.5rem);         /* 200 px en desktop */
  --r-chip:     6px;
  --r:          8px;                                /* tarjetas */
  --r-btn:      12px;                               /* botones */
  --r-lg:       12px;
  --r-xl:       20px;

  /* movimiento — curva del sistema de referencia, con ligero rebase */
  --e-out:      cubic-bezier(0,1.03,.56,1);
  --e-io:       cubic-bezier(.65,0,.35,1);
  --t-fast:     .22s var(--e-out);
  --t:          .42s var(--e-out);
  --t-slow:     .9s var(--e-out);

  --header-h:   72px;
}

/* -----------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,*::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(--ink);color:var(--text);
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.6;
  font-weight:400;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--red-2);outline-offset:3px;border-radius:3px}
::selection{background:var(--red);color:#fff}
hr{border:0;border-top:1px solid var(--line);margin:0}

/* -----------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
/* Cualquier destino de ancla debe detenerse por debajo de la cabecera fija.
   Cubre las tres vías: carga en frío con #ancla, clic en un enlace y el botón
   de «atrás» del navegador. */
[id]{scroll-margin-top:calc(var(--header-h) + 1.5rem)}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;padding-block:var(--sec-y)}
.section--tight{padding-block:clamp(3rem,6vw,5.5rem)}
.rule{height:1px;background:var(--line);width:100%}

/* Tres breakpoints, los mismos del sistema de referencia:
   desktop ≥1200 · tablet 810–1199.98 · móvil ≤809.98 */
.grid{display:grid;gap:4px}
.grid--air{gap:clamp(1rem,2vw,1.5rem)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1199.98px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:809.98px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}

/* -----------------------------------------------------------------------------
   4. TIPOGRAFÍA
   -------------------------------------------------------------------------- */
.display{
  font-size:var(--fs-display);line-height:.9;letter-spacing:-.05em;
  font-weight:500;text-wrap:balance;
}
.h1{font-size:var(--fs-h1);line-height:.92;letter-spacing:-.048em;font-weight:500;text-wrap:balance}
.h2{font-size:var(--fs-h2);line-height:.96;letter-spacing:-.045em;font-weight:500;text-wrap:balance}
.h3{font-size:var(--fs-h3);line-height:1.02;letter-spacing:-.038em;font-weight:500;text-wrap:balance}
.h4{font-size:var(--fs-h4);line-height:1.12;letter-spacing:-.03em;font-weight:500}
.h5{font-size:1.3125rem;line-height:1.22;letter-spacing:-.025em;font-weight:500}
.lead{font-size:var(--fs-lead);line-height:1.36;color:var(--text-2);letter-spacing:-.028em;max-width:48ch}
.body{color:var(--text-2);max-width:60ch;line-height:1.5;letter-spacing:-.018em}
.small{font-size:var(--fs-small);color:var(--text-2);line-height:1.5;letter-spacing:-.014em}
.xs{font-size:var(--fs-xs);color:var(--text-2);line-height:1.5}
.tiny{font-size:var(--fs-tiny);color:var(--text-3);line-height:1.5}
/* El rojo de marca da 4,0:1 — suficiente para tipografía grande, no para texto
   corriente. En cuerpo pequeño se usa el tono claro, que da 6,9:1. */
.accent{color:var(--red)}
.small .accent,.xs .accent,.tiny .accent,.body .accent,.card__d .accent,
li .accent,.lead .accent,.h5 .accent,.step__m .accent,.dcell__d .accent{color:var(--red-lite)}
.display .accent,.h1 .accent,.h2 .accent,.h3 .accent{color:var(--red)}
.em{color:var(--text)}

.label{
  font-family:var(--mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);
  display:inline-flex;align-items:center;gap:.55em;
}
.label--red{color:var(--red-lite)}
.label .dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}

.num{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;color:var(--red-lite)}

.mono{font-family:var(--mono);letter-spacing:-.01em;font-variant-ligatures:none}

/* cabecera de sección con marcador numérico, como en el sistema de referencia */
.sec-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:end;margin-bottom:clamp(2.5rem,5vw,4.5rem);
}
@media (max-width:809.98px){.sec-head{grid-template-columns:minmax(0,1fr);gap:1.25rem}}
.sec-head__id{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}
.sec-head__id .bar{height:1px;flex:1;background:var(--line);max-width:120px}

/* -----------------------------------------------------------------------------
   5. BOTONES
   -------------------------------------------------------------------------- */
.btn{
  --btn-bg:var(--red);--btn-fg:#fff;--btn-bd:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.6em;padding:1.15rem 1.75rem;border-radius:var(--r-btn);
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);
  font-size:var(--fs-small);font-weight:500;letter-spacing:-.018em;line-height:1;
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),transform var(--t-fast);
  will-change:transform;
}
.btn:hover{--btn-bg:var(--red-2)}
.btn:active{transform:scale(.97)}
.btn svg{width:1em;height:1em;flex:none}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--text);--btn-bd:var(--line-2)}
.btn--ghost:hover{--btn-bg:var(--surface-2);--btn-bd:var(--text-3)}
/* conmutador de dos estados (gas de asistencia) */
.btn[aria-pressed="true"]{--btn-bg:var(--red);--btn-fg:#fff;--btn-bd:var(--red)}
.btn[aria-pressed="true"]:hover{--btn-bg:var(--red-2);--btn-bd:var(--red-2)}
.btn[aria-pressed="false"]{--btn-fg:var(--text-2)}
.btn--wa{--btn-bg:transparent;--btn-fg:var(--text);--btn-bd:var(--line-2)}
.btn--wa:hover{--btn-bd:#25D366;--btn-fg:#fff;--btn-bg:rgba(37,211,102,.12)}
.btn--lg{padding:1.3rem 2.25rem;font-size:var(--fs-body)}
.btn--sm{padding:.7rem 1.15rem;font-size:var(--fs-tiny);border-radius:var(--r-chip)}
.btn--block{width:100%}

/* enlace con flecha que se desplaza */
.arrow-link{
  display:inline-flex;align-items:center;gap:.6em;font-size:.9375rem;font-weight:500;
  color:var(--text);transition:color var(--t-fast);
}
/* Dos flechas idénticas dentro del círculo: al pasar el cursor, la primera sale
   por la derecha y la segunda entra por la izquierda. Con una sola flecha el
   efecto no existía —las dos reglas de :hover se anulaban entre sí—, así que el
   marcado lleva el SVG duplicado a propósito. */
.arrow-link .ar{
  position:relative;width:1.6em;height:1.6em;border-radius:50%;
  border:1px solid var(--line-2);flex:none;overflow:hidden;
  transition:border-color var(--t-fast),background var(--t-fast);
}
.arrow-link .ar svg{
  position:absolute;top:50%;left:50%;width:.72em;height:.72em;
  transform:translate(-50%,-50%);
  transition:transform .4s var(--e-out);
}
.arrow-link .ar svg:nth-child(2){transform:translate(-50%,-50%) translateX(-180%)}
.arrow-link:hover{color:var(--red-lite)}
.arrow-link:hover .ar{border-color:var(--red);background:var(--red-dim)}
.arrow-link:hover .ar svg:nth-child(1){transform:translate(-50%,-50%) translateX(180%)}
.arrow-link:hover .ar svg:nth-child(2){transform:translate(-50%,-50%) translateX(0)}

/* -----------------------------------------------------------------------------
   6. CABECERA
   -------------------------------------------------------------------------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:80;height:var(--header-h);
  display:flex;align-items:center;
  transition:transform .5s var(--e-out),background .35s ease,border-color .35s ease;
  border-bottom:1px solid transparent;
}
.hdr::before{
  content:'';position:absolute;inset:0;z-index:-1;opacity:0;
  background:rgba(17,18,20,.72);backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  transition:opacity .35s ease;
}
.hdr.is-stuck::before{opacity:1}
.hdr.is-stuck{border-bottom-color:var(--line)}
.hdr.is-hidden{transform:translateY(-101%)}
.hdr__in{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);width:100%}
.brand{display:flex;align-items:center;gap:.7rem;flex:none}
.brand img{height:22px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(.75rem,2vw,1.9rem);margin-left:auto}
.nav a{
  position:relative;font-size:.9375rem;color:var(--text-2);
  transition:color var(--t-fast);padding-block:.35rem;
}
.nav a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--red);transform:scaleX(0);transform-origin:right;
  transition:transform .38s var(--e-out);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.hdr__cta{display:flex;align-items:center;gap:.6rem;flex:none}

.burger{
  display:none;position:relative;width:42px;height:42px;border:1px solid var(--line-2);
  border-radius:999px;flex:none;transition:border-color var(--t-fast),background var(--t-fast);
}
.burger:hover{border-color:var(--text-3);background:var(--surface)}
/* barras posicionadas en absoluto: la X sale exacta al rotar sobre el mismo centro */
.burger span{
  position:absolute;left:50%;top:50%;width:16px;height:1.5px;background:var(--text);
  transform:translate(-50%,-50%) translateY(-4.5px);
  transition:transform .35s var(--e-out);
}
.burger span:last-child{transform:translate(-50%,-50%) translateY(4.5px)}
.burger[aria-expanded="true"] span:first-child{transform:translate(-50%,-50%) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}

@media (max-width:1199.98px){
  .nav,.hdr__cta .btn{display:none}
  .burger{display:grid;margin-left:auto}
}

/* menú móvil */
.drawer{
  position:fixed;inset:0;z-index:79;background:var(--ink-deep);
  padding:calc(var(--header-h) + 2rem) var(--gutter) 2rem;
  display:flex;flex-direction:column;gap:.25rem;
  clip-path:inset(0 0 100% 0);
  /* `visibility` saca los enlaces del orden de tabulación mientras está cerrado:
     con sólo clip-path seguían siendo focalizables e invisibles */
  visibility:hidden;
  /* al abrir, `visibility` cambia en el instante 0 para que el foco pueda
     entrar ya; al cerrar espera a que termine el recorte */
  transition:clip-path .6s var(--e-out),visibility 0s linear .6s;
  overflow-y:auto;
}
.drawer.is-open{
  clip-path:inset(0 0 0 0);visibility:visible;
  transition:clip-path .6s var(--e-out),visibility 0s linear 0s;
}
.drawer a.drawer__link{
  font-size:clamp(1.9rem,7vw,2.75rem);font-weight:500;letter-spacing:-.035em;
  padding-block:.5rem;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--e-out),transform .5s var(--e-out),color var(--t-fast);
}
.drawer.is-open a.drawer__link{opacity:1;transform:none;transition-delay:calc(.06s * var(--i,0) + .08s)}
.drawer a.drawer__link:hover{color:var(--red-lite)}
.drawer a.drawer__link .num{font-size:.6875rem}
.drawer__foot{margin-top:auto;padding-top:2rem;display:grid;gap:.75rem}

/* -----------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero{position:relative;min-height:100svh;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:calc(var(--header-h) + 2rem);overflow:hidden}
@supports (min-height:100svh){.hero{min-height:100svh}}
/* secciones apiladas: el hero queda fijo y el contenido se desliza por encima,
   igual que en el sistema de referencia */
@media (min-width:810px) and (prefers-reduced-motion:no-preference){
  .hero{position:sticky;top:0;z-index:0}
  .ticker,main>section:not(.hero){position:relative;z-index:1;background:var(--ink)}
  .ftr{position:relative;z-index:1}
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero__media::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(17,18,20,.94) 32%, rgba(17,18,20,.45) 62%, rgba(17,18,20,.72) 100%),
    linear-gradient(to top, var(--ink) 2%, rgba(17,18,20,0) 42%);
}
@media (max-width:809.98px){
  .hero__media::after{
    background:
      linear-gradient(180deg, rgba(17,18,20,.86) 0%, rgba(17,18,20,.5) 45%, var(--ink) 92%);
  }
  .hero__media video,.hero__media img{object-position:64% 40%}
}
.hero__in{position:relative;z-index:2;width:100%;padding-bottom:clamp(2rem,5vw,3.5rem)}
.hero__eyebrow{display:flex;align-items:center;gap:.9rem;margin-bottom:clamp(1rem,2.4vw,1.75rem)}
.hero__title{max-width:18ch}
.hero__sub{margin-top:clamp(1.1rem,2.2vw,1.75rem);max-width:46ch}
/* el reparto de los botones vive en §28; aquí sólo el margen superior */
.hero__actions{margin-top:clamp(1.5rem,2.6vw,2.25rem)}
.hero__stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,auto));gap:clamp(1.25rem,4vw,3.5rem);
  margin-top:clamp(1.75rem,3.6vw,3rem);padding-top:clamp(1.25rem,2.4vw,1.75rem);border-top:1px solid var(--line);
  justify-content:start;
}
/* el marcado es <dt> y luego <dd> (orden correcto para lectores de pantalla);
   el orden visual se invierte aquí */
.hero__stats>div{display:flex;flex-direction:column-reverse}
/* pantallas bajas (portátiles de 13", móvil apaisado): comprime el hero */
@media (max-height:820px) and (min-width:810px){
  .hero{--fs-display:clamp(2.75rem,5.4vw,4.5rem)}
  .hero__stats .stat__v{font-size:clamp(1.75rem,3vw,2.5rem)}
}
.stat__v{
  font-size:clamp(1.9rem,4.6vw,4rem);font-weight:500;letter-spacing:-.04em;line-height:1;
  display:flex;align-items:baseline;gap:.12em;flex-wrap:wrap;
}
.stat__v .u{font-size:.36em;color:var(--red-lite);font-family:var(--mono);letter-spacing:0;white-space:nowrap}
.stat__k{margin-top:.5rem;font-size:var(--fs-tiny);color:var(--text-2);line-height:1.35}
@media (max-width:600px){
  .hero__stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
  .stat__v{font-size:1.45rem;gap:.1em}
  .stat__v .u{font-size:.52em}
  .stat__k{font-size:.6875rem;line-height:1.25}
}

/* control de vídeo del hero */
.hero__vctl{
  position:absolute;right:var(--gutter);bottom:clamp(2rem,5vw,3.5rem);z-index:3;
  width:44px;height:44px;border-radius:999px;border:1px solid var(--line-2);
  display:grid;place-items:center;background:rgba(17,18,20,.5);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:border-color var(--t-fast),background var(--t-fast);
}
.hero__vctl:hover{border-color:var(--red);background:var(--red-dim)}
.hero__vctl svg{width:14px;height:14px}
.hero__vctl .ic-pause{display:block}.hero__vctl .ic-play{display:none}
.hero__vctl.is-paused .ic-pause{display:none}.hero__vctl.is-paused .ic-play{display:block}
@media (max-width:600px){.hero__vctl{display:none}}

/* barra de desplazamiento indicativa */
.scroll-hint{
  position:absolute;left:var(--gutter);bottom:clamp(1rem,2.5vw,1.5rem);z-index:3;
  display:flex;align-items:center;gap:.7rem;color:var(--text-3);
}
.scroll-hint .track{width:52px;height:1px;background:var(--line-2);position:relative;overflow:hidden}
.scroll-hint .track::after{
  content:'';position:absolute;inset:0;background:var(--red);
  transform:translateX(-100%);animation:hintSweep 2.6s var(--e-io) infinite;
}
@keyframes hintSweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
@media (max-width:809.98px){.scroll-hint{display:none}}

/* -----------------------------------------------------------------------------
   8. MARQUESINA (ticker)
   -------------------------------------------------------------------------- */
.ticker{
  position:relative;overflow:hidden;border-block:1px solid var(--line);
  padding-block:clamp(1rem,1.8vw,1.35rem);background:var(--ink);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 12.5%,#000 87.5%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 12.5%,#000 87.5%,transparent 100%);
}
.ticker__track{display:flex;width:max-content;will-change:transform}
.ticker__grp{display:flex;align-items:center;gap:clamp(2.5rem,8vw,8.125rem);padding-right:clamp(2.5rem,8vw,8.125rem)}
.ticker__it{
  display:inline-flex;align-items:center;gap:.7rem;white-space:nowrap;
  font-family:var(--mono);font-size:var(--fs-tiny);letter-spacing:.02em;color:var(--text-2);
}
.ticker__it b{color:var(--text);font-weight:500}
.ticker__it::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--red);flex:none}

/* -----------------------------------------------------------------------------
   9. TARJETAS
   -------------------------------------------------------------------------- */
.card{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(1.25rem,2vw,1.75rem);
  transition:border-color var(--t),background var(--t),transform var(--t);
  overflow:hidden;
}
.card::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(225,37,30,.10), transparent 62%);
  opacity:0;transition:opacity .4s ease;
}
.card:hover{border-color:var(--line-2);background:var(--surface-2)}
.card:hover::after{opacity:1}
.card__n{font-family:var(--mono);font-size:var(--fs-label);color:var(--text-3);letter-spacing:.12em}
.card__t{margin-top:.9rem}
.card__d{margin-top:.6rem;color:var(--text-2);font-size:.9375rem;line-height:1.55}

/* tarjeta con fotografía de producto arriba.
   El render llega ya compuesto sobre --ink, así que la imagen se apoya en una
   placa del mismo tono y no necesita recorte ni máscara: no hay costura. */
.cardimg{display:flex;flex-direction:column}
.cardimg>img{
  width:100%;height:auto;display:block;object-fit:contain;
  background:var(--ink);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:1.15rem;
}
.cardimg .card__t{margin-top:.5rem}
/* la lista se alinea abajo para que las tarjetas de una fila casen; el párrafo
   NO, porque con imágenes de distinta proporción abría un hueco en el medio */
.cardimg>ul{margin-top:auto}

/* tarjeta de servicio con icono */
.svc{display:flex;flex-direction:column;gap:1rem;min-height:100%}
.svc__ic{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--line-2);background:var(--ink);color:var(--red-lite);flex:none;
  transition:border-color var(--t),color var(--t),background var(--t);
}
.card:hover .svc__ic{border-color:var(--red);color:#fff;background:var(--red)}
.svc__ic svg{width:20px;height:20px}
.svc ul{margin-top:auto;padding-top:1rem;border-top:1px solid var(--line);display:grid;gap:.4rem}
.svc li{font-size:.8125rem;color:var(--text-3);display:flex;gap:.5rem;align-items:flex-start;line-height:1.45}
.svc li::before{content:'';width:3px;height:3px;border-radius:50%;background:var(--red);margin-top:.55em;flex:none}

/* -----------------------------------------------------------------------------
   10. VISOR DE MÁQUINAS  (lenguaje visual del catálogo)
   -------------------------------------------------------------------------- */
.viewer{position:relative;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--ink);overflow:hidden}
.viewer__top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);
  min-height:clamp(360px,48vw,560px);
}
@media (max-width:1199.98px){.viewer__top{grid-template-columns:minmax(0,1fr)}}

/* la escena necesita altura propia: sus imágenes son absolutas y no la aportan */
.viewer__stage{
  position:relative;overflow:hidden;display:block;padding:clamp(1rem,2vw,2rem);
  min-height:clamp(240px,44vw,560px);
}
@media (max-width:1199.98px){.viewer__stage{aspect-ratio:16/10;min-height:0}}
.viewer__stage::before{
  /* retícula técnica de fondo */
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 78% 72% at 50% 50%,#000 25%,transparent 78%);
  mask-image:radial-gradient(ellipse 78% 72% at 50% 50%,#000 25%,transparent 78%);
}
.viewer__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transform:scale(1.12);transition:opacity .7s var(--e-out),transform 1.1s var(--e-out);
  -webkit-mask-image:radial-gradient(ellipse 92% 90% at 50% 50%,#000 68%,transparent 100%);
  mask-image:radial-gradient(ellipse 92% 90% at 50% 50%,#000 68%,transparent 100%);
  padding:clamp(.25rem,1vw,1rem);
}
/* el render trae margen propio: un ligero acercamiento le da presencia sin recortar */
.viewer__img.is-active{opacity:1;transform:scale(1.07)}

.viewer__side{
  border-left:1px solid var(--line);padding:clamp(1.5rem,2.6vw,2.4rem);
  display:flex;flex-direction:column;gap:1.25rem;background:var(--ink);
}
@media (max-width:1199.98px){.viewer__side{border-left:0;border-top:1px solid var(--line)}}
.viewer__code{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;color:var(--red-lite)}
.viewer__name{margin-top:.55rem}
.viewer__desc{margin-top:.8rem;color:var(--text-2);font-size:.9375rem;line-height:1.6}
.viewer__specs{margin-top:auto;padding-top:1.25rem;border-top:1px solid var(--line);display:grid;gap:.55rem}
/* la tabla del catálogo llega a doce filas y algunos valores son largos
   («Electrohidráulica sincronizada CNC»): la fila envuelve en vez de desbordar */
.viewer__specs div{display:flex;justify-content:space-between;gap:.5rem 1rem;font-size:.8125rem;flex-wrap:wrap}
.viewer__specs dt{color:var(--text-3)}
.viewer__specs dd{margin:0;font-family:var(--mono);color:var(--text);text-align:right;margin-left:auto}

/* índice numerado 01..07 */
.viewer__list{display:grid;gap:.1rem}
.viewer__list button{
  width:100%;display:grid;grid-template-columns:2.6rem minmax(0,1fr) 1rem;align-items:center;
  gap:.75rem;padding:.6rem 0;text-align:left;color:var(--text-3);
  border-bottom:1px solid transparent;transition:color var(--t-fast),border-color var(--t-fast);
  font-size:.9375rem;
}
.viewer__list button .ix{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em}
.viewer__list button .tk{opacity:0;transform:translateX(-6px);transition:opacity var(--t-fast),transform var(--t-fast);color:var(--red-lite)}
.viewer__list button:hover{color:var(--text-2)}
.viewer__list button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--line)}
.viewer__list button[aria-selected="true"] .ix{color:var(--red-lite)}
.viewer__list button[aria-selected="true"] .tk{opacity:1;transform:none}

/* tira inferior de miniaturas técnicas */
.viewer__strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(120px,1fr);border-top:1px solid var(--line);overflow-x:auto;scrollbar-width:thin}
.viewer__strip::-webkit-scrollbar{height:4px}
.viewer__strip::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.thumb{
  position:relative;padding:1rem .75rem 1.15rem;display:grid;gap:.5rem;justify-items:center;
  border-right:1px solid var(--line);background:var(--ink);transition:background var(--t-fast);
}
.thumb:last-child{border-right:0}
.thumb::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--e-out);
}
/* La miniatura es el ALZADO TÉCNICO de la máquina: línea roja sobre transparente,
   derivada por detección de bordes de su propia fotografía. Al ser transparente,
   la celda sí puede cambiar de fondo con el estado (a diferencia de las fotos de
   `.cardimg`, que traen su propio fondo --ink). Apagada se desatura y se aclara
   para que se lea como un plano; activa recupera el rojo de marca. */
.thumb img{
  height:clamp(38px,4.2vw,54px);width:auto;object-fit:contain;
  opacity:.34;filter:grayscale(1) brightness(1.6);
  transition:opacity var(--t-fast),filter var(--t-fast),transform var(--t);
}
.thumb span{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;color:var(--text-3);white-space:nowrap}
.thumb:hover{background:var(--surface)}
.thumb:hover img{opacity:.62;transform:translateY(-2px)}
.thumb[data-active="true"]{background:var(--surface)}
.thumb[data-active="true"]::after{transform:scaleX(1)}
.thumb[data-active="true"] img{opacity:1;filter:none}
.thumb[data-active="true"] span{color:var(--text)}

/* -----------------------------------------------------------------------------
   11. CALCULADORA DE ESPESOR
   -------------------------------------------------------------------------- */
.calc{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(1.5rem,3vw,3rem);align-items:start;
}
@media (max-width:1199.98px){.calc{grid-template-columns:minmax(0,1fr)}}
.calc__panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.25rem,2.4vw,2rem)}
.calc__pw{display:flex;align-items:baseline;gap:.35rem;margin-top:.4rem}
.calc__pw b{font-size:clamp(2.4rem,5.4vw,3.75rem);font-weight:500;letter-spacing:-.045em;line-height:1}
.calc__pw span{font-family:var(--mono);color:var(--red-lite);font-size:1rem}

input[type="range"].slider{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;margin-top:1.5rem;cursor:pointer;
}
input[type="range"].slider::-webkit-slider-runnable-track{height:2px;background:var(--line-2);border-radius:2px}
input[type="range"].slider::-moz-range-track{height:2px;background:var(--line-2);border-radius:2px}
input[type="range"].slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--red);
  border:3px solid var(--ink);margin-top:-8px;box-shadow:0 0 0 1px var(--red),0 0 18px rgba(225,37,30,.55);
  transition:transform .2s var(--e-out);
}
input[type="range"].slider::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:var(--red);border:3px solid var(--ink);
  box-shadow:0 0 0 1px var(--red),0 0 18px rgba(225,37,30,.55);
}
input[type="range"].slider:hover::-webkit-slider-thumb{transform:scale(1.14)}
.calc__ticks{display:flex;justify-content:space-between;margin-top:.6rem}
.calc__ticks span{font-family:var(--mono);font-size:.625rem;color:var(--text-3);letter-spacing:.06em}

.calc__rows{display:grid;gap:.15rem}
.mat{
  display:grid;grid-template-columns:minmax(96px,.34fr) minmax(0,1fr) 5.5rem;
  align-items:center;gap:clamp(.75rem,2vw,1.5rem);
  padding:clamp(.85rem,1.6vw,1.15rem) 0;border-bottom:1px solid var(--line);
}
.mat:last-child{border-bottom:0}
.mat__n{font-size:.9375rem;color:var(--text)}
.mat__n small{display:block;font-family:var(--mono);font-size:.625rem;color:var(--text-3);letter-spacing:.08em;margin-top:.2rem}
/* escala fija 0–60 mm con marcas cada 15 mm, para que el largo de la barra
   se pueda leer como magnitud y no sólo comparar entre materiales */
.calc__scale{
  display:grid;grid-template-columns:minmax(96px,.34fr) minmax(0,1fr) 5.5rem;
  align-items:center;gap:clamp(.75rem,2vw,1.5rem);padding-bottom:.6rem;
}
.calc__scale .ruler{display:flex;justify-content:space-between}
.calc__scale span{font-family:var(--mono);font-size:.625rem;color:var(--text-3);letter-spacing:.06em}
@media (max-width:600px){
  .calc__scale{grid-template-columns:minmax(0,1fr);gap:.35rem}
  .calc__scale>span:first-child,.calc__scale>span:last-child{display:none}
}
.mat__bar{
  position:relative;height:10px;border-radius:3px;background:var(--surface-2);overflow:hidden;
  background-image:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),var(--line-2) calc(25% - 1px),var(--line-2) 25%);
}
.mat__bar i{
  position:absolute;inset:0 auto 0 0;width:0%;border-radius:3px;
  background:linear-gradient(90deg,var(--red) 0%,var(--ember) 100%);
  transition:width .75s var(--e-out);
}
.mat__bar i::after{
  content:'';position:absolute;right:0;top:50%;transform:translate(50%,-50%);
  width:10px;height:10px;border-radius:50%;background:var(--ember);
  box-shadow:0 0 14px 2px rgba(255,138,61,.75);
}
.mat__v{text-align:right;font-family:var(--mono);font-size:1.05rem;color:var(--text);white-space:nowrap}
.mat__v em{font-style:normal;font-size:.7rem;color:var(--text-3);margin-left:.15em}
@media (max-width:600px){
  .mat{grid-template-columns:minmax(0,1fr) 4.5rem;grid-template-areas:"n v" "b b";gap:.5rem .75rem}
  .mat__n{grid-area:n}.mat__v{grid-area:v}.mat__bar{grid-area:b}
}

/* -----------------------------------------------------------------------------
   12. PROCESO (sticky)
   -------------------------------------------------------------------------- */
.proc{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(1.5rem,4vw,5rem);align-items:start}
@media (max-width:1199.98px){.proc{grid-template-columns:minmax(0,1fr)}}
.proc__aside{position:sticky;top:calc(var(--header-h) + clamp(1.5rem,4vw,3rem))}
@media (max-width:1199.98px){.proc__aside{position:static}}
.proc__steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.step{background:var(--ink);padding:clamp(1.4rem,2.6vw,2.25rem);position:relative;transition:background var(--t)}
.step:hover,.step.is-active{background:var(--surface)}
.step__h{display:flex;align-items:baseline;gap:1rem;margin-bottom:.9rem}
.step__i{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;color:var(--red-lite);
  border:1px solid var(--line-2);border-radius:6px;padding:.2rem .5rem;flex:none;
  transition:border-color var(--t),background var(--t),color var(--t);
}
.step.is-active .step__i{border-color:var(--red);background:var(--red);color:#fff}
.step__m{
  margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:.6rem;
}
.step__m b{font-size:1.5rem;font-weight:500;letter-spacing:-.03em;line-height:1}
.step__m span{font-size:.8125rem;color:var(--text-3)}

/* -----------------------------------------------------------------------------
   13. PRECISIÓN / DATOS
   -------------------------------------------------------------------------- */
.dgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media (max-width:1199.98px){.dgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.dgrid{grid-template-columns:minmax(0,1fr)}}
.dcell{background:var(--ink);padding:clamp(1.4rem,2.4vw,2rem);display:grid;gap:.55rem;min-width:0;transition:background var(--t)}
.dcell:hover{background:var(--surface)}
.dcell__v{font-size:var(--fs-datum);font-weight:500;letter-spacing:-.045em;line-height:1;color:var(--text);min-width:0}
.dcell__v .u{font-size:.36em;font-family:var(--mono);color:var(--red-lite);letter-spacing:0;margin-left:.2em}
.dcell__k{font-size:.9375rem;color:var(--text)}
.dcell__d{font-size:.8125rem;color:var(--text-3);line-height:1.5}

/* -----------------------------------------------------------------------------
   14. ACORDEÓN FAQ
   -------------------------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:clamp(1.1rem,2.2vw,1.6rem) 0;text-align:left;
  font-size:clamp(1rem,1.5vw,1.1875rem);font-weight:500;letter-spacing:-.018em;line-height:1.35;
  color:var(--text-2);transition:color var(--t-fast);
}
.faq__q:hover{color:var(--text)}
.faq__i.is-open .faq__q{color:var(--text)}
.faq__pm{position:relative;width:20px;height:20px;flex:none;margin-top:.2em}
.faq__pm::before,.faq__pm::after{
  content:'';position:absolute;left:50%;top:50%;background:var(--text-3);
  transition:transform .4s var(--e-out),background var(--t-fast);
}
.faq__pm::before{width:13px;height:1.5px;transform:translate(-50%,-50%)}
.faq__pm::after{width:1.5px;height:13px;transform:translate(-50%,-50%)}
.faq__i.is-open .faq__pm::before,.faq__i.is-open .faq__pm::after{background:var(--red)}
.faq__i.is-open .faq__pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--e-out)}
.faq__i.is-open .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{padding-bottom:clamp(1.1rem,2.2vw,1.6rem);color:var(--text-2);max-width:68ch;font-size:.9375rem;line-height:1.65}

/* -----------------------------------------------------------------------------
   15. BLOQUE FERIA / CTA
   -------------------------------------------------------------------------- */
.cta{
  position:relative;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;
  background:var(--surface);padding:clamp(2rem,5vw,4.5rem);
}
.cta::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px circle at 88% 8%, rgba(225,37,30,.20), transparent 62%),
             radial-gradient(520px circle at 4% 96%, rgba(255,138,61,.10), transparent 60%);
}
.cta>*{position:relative}
.cta__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.5rem,4vw,4rem);align-items:end}
@media (max-width:809.98px){.cta__grid{grid-template-columns:minmax(0,1fr)}}
.countdown{display:flex;gap:clamp(.75rem,2vw,1.5rem);margin-top:1.5rem}
/* tres estados de la feria: antes (contador), durante (en curso), después */
.cd-during,.cd-after{display:none}
[data-state="during"] .cd-before,[data-state="after"] .cd-before{display:none}
[data-state="during"] .cd-during{display:block}
[data-state="after"] .cd-after{display:block}
.cd{background:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:.85rem 1rem;min-width:74px;text-align:center}
.cd b{display:block;font-size:1.6rem;font-weight:500;letter-spacing:-.04em;line-height:1}
.cd span{font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;color:var(--text-3);text-transform:uppercase}

/* -----------------------------------------------------------------------------
   16. PIE
   -------------------------------------------------------------------------- */
.ftr{border-top:1px solid var(--line);padding-block:clamp(3rem,6vw,5rem) 2rem;background:var(--ink-deep)}
.ftr__top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(1.75rem,3vw,3rem)}
@media (max-width:1199.98px){.ftr__top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.ftr__top{grid-template-columns:minmax(0,1fr)}}
.ftr .ftr-h{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);font-weight:500;margin-bottom:1.1rem}
.ftr ul{display:grid;gap:.6rem}
.ftr a{font-size:.9375rem;color:var(--text-2);transition:color var(--t-fast)}
.ftr a:hover{color:var(--red-lite)}
/* `width:auto` es obligatorio: el <img> trae width="569" como atributo y, si el
   CSS fija sólo la altura, el navegador combina las dos y estira el logo */
.ftr__brand img{height:26px;width:auto;margin-bottom:1.1rem}
.ftr__bot{
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.75rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center;
}

/* -----------------------------------------------------------------------------
   17. FORMULARIO
   -------------------------------------------------------------------------- */
.field{display:grid;gap:.5rem}
.field label{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)}
.field input,.field select,.field textarea{
  width:100%;background:var(--ink);border:1px solid var(--line-2);border-radius:var(--r);
  padding:.9rem 1rem;font-size:.9375rem;color:var(--text);
  transition:border-color var(--t-fast),background var(--t-fast);
}
.field textarea{min-height:130px;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);background:var(--surface)}
.field select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2393939C' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:12px;padding-right:2.5rem}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--red)}
.field__err{font-size:.75rem;color:var(--red-lite);display:none}
.field.has-error .field__err{display:block}
/* la casilla de autorización vive en .check, no en .field: sin esto su error
   nunca se veía y el formulario se negaba a enviarse sin decir por qué */
.check.has-error .field__err{display:block;margin-top:.5rem}
.check.has-error input{border-color:var(--red);box-shadow:0 0 0 3px var(--red-dim)}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.8125rem;color:var(--text-2);line-height:1.5;cursor:pointer}
.check input{appearance:none;width:18px;height:18px;border:1px solid var(--line-2);border-radius:5px;flex:none;margin-top:.1em;background:var(--ink);transition:background var(--t-fast),border-color var(--t-fast)}
.check input:checked{background:var(--red);border-color:var(--red);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M2.5 6.2 4.8 8.5 9.5 3.8'/%3E%3C/svg%3E");background-size:12px;background-position:center;background-repeat:no-repeat}
.check a{color:var(--red-lite);text-decoration:underline;text-underline-offset:2px}
/* aviso dentro del formulario */
.note{
  border:1px solid var(--line);border-left:2px solid var(--red);border-radius:var(--r-chip);
  background:var(--ink);padding:1rem 1.1rem;
}

/* -----------------------------------------------------------------------------
   18. COMPARADOR
   -------------------------------------------------------------------------- */
.cmp{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cmp__head{display:grid;grid-template-columns:minmax(120px,1fr) repeat(2,minmax(0,1.2fr));border-bottom:1px solid var(--line)}
.cmp__head>div{padding:1.1rem clamp(.75rem,1.6vw,1.25rem)}
.cmp__head>div+div{border-left:1px solid var(--line)}
.cmp__row{display:grid;grid-template-columns:minmax(120px,1fr) repeat(2,minmax(0,1.2fr));border-bottom:1px solid var(--line)}
.cmp__row:last-child{border-bottom:0}
.cmp__row>div{padding:.85rem clamp(.75rem,1.6vw,1.25rem);font-size:.8125rem;display:flex;align-items:center}
.cmp__row>div+div{border-left:1px solid var(--line);font-family:var(--mono);color:var(--text)}
.cmp__row>div:first-child{color:var(--text-3)}
.cmp__row:nth-child(odd){background:rgba(255,255,255,.02)}
/* fila con el mismo valor en las dos series */
.cmp__row.is-same>div+div{color:var(--text-2)}
.cmp__row.is-same>div:first-child::after{
  content:'=';margin-left:.6em;color:var(--text-3);font-family:var(--mono);font-size:.85em;
}
.cmp select{width:100%}
/* selector suelto (fuera de .field) — usado en el comparador */
.select{
  width:100%;appearance:none;-webkit-appearance:none;
  background-color:var(--ink);color:var(--text);
  border:1px solid var(--line-2);border-radius:var(--r-chip);
  padding:.7rem 2.25rem .7rem .8rem;font-size:var(--fs-xs);line-height:1.2;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23FF6F63' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:11px;
  transition:border-color var(--t-fast),background-color var(--t-fast);
}
.select:hover{border-color:var(--text-3)}
.select:focus{outline:none;border-color:var(--red);background-color:var(--surface)}
.select option{background:var(--ink);color:var(--text)}

/* -----------------------------------------------------------------------------
   19. ANIMACIONES DE ENTRADA
   -------------------------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .85s var(--e-out),transform .85s var(--e-out);transition-delay:calc(var(--i,0) * 70ms)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
[data-reveal="left"]{transform:translateX(-24px)}
[data-reveal="scale"]{transform:scale(.965)}

/* Revelado de titulares línea a línea.
   El recorte de la animación necesita `overflow:hidden`, pero con interlineados
   de 0,9–0,96 la caja de línea es MÁS BAJA que los glifos: los descendentes
   (g, j, p, q, y) y los acentos de las mayúsculas caían fuera y se cortaban.
   El relleno da aire dentro de la caja y el margen negativo lo devuelve, así
   que el ritmo vertical no cambia ni un píxel. */
.split .ln{
  display:block;
  /* `clip-path` en vez de `overflow:hidden`: recorta la animación por los lados
     y deja 0,3 em de aire arriba y abajo para los descendentes y los acentos,
     SIN afectar al maquetado —el relleno con margen negativo engordaba cada
     titular 53 px por el colapso de márgenes entre líneas. */
  clip-path:inset(-.32em 0 -.32em 0);
}
.split .ln>span{
  display:block;
  transform:translateY(185%);            /* pasa de sobra el borde ampliado del recorte */
  transition:transform 1s var(--e-out);
  transition-delay:calc(var(--l,0) * 85ms);
}
.split.is-in .ln>span{transform:none}

/* titular "cortado por láser": una línea roja barre el texto y lo revela */
.lasercut{position:relative;display:inline-block}
/* el valor por defecto es 100 % (visible): si el script no llega a animar este
   titular, el texto se lee igual. El JS pone 0 % justo antes de barrerlo. */
.lasercut>.txt{
  display:inline-block;
  -webkit-mask-image:linear-gradient(90deg,#000 0 var(--cut,100%),transparent var(--cut,100%) 100%);
  mask-image:linear-gradient(90deg,#000 0 var(--cut,100%),transparent var(--cut,100%) 100%);
  /* Trampa 2 otra vez, por la puerta de al lado. La caja de la máscara es la
     border-box del elemento, y con interlineado 0,96 esa caja es MÁS BAJA que
     los glifos: medido, tipo de 70 px en una caja de 64,8 px. El rabo de la «g»
     de «Traiga» caía fuera de la máscara y se borraba —el cliente lo vio en la
     sección de la feria—. Se agranda la caja arriba y abajo y se cancela el
     efecto en el maquetado con el margen negativo, igual que hace `.split .ln`
     con su clip-path. La máscara es horizontal, así que crecer en vertical no
     altera el barrido del láser. */
  padding:.32em 0;
  margin:-.32em 0;
}
.lasercut>.beam{
  position:absolute;top:-.08em;bottom:-.06em;left:var(--cut,100%);width:2px;
  background:linear-gradient(180deg,transparent,var(--ember),var(--red),var(--ember),transparent);
  box-shadow:0 0 14px 2px rgba(255,138,61,.75);opacity:0;transition:opacity .25s;
  pointer-events:none;
}
.lasercut.is-cutting>.beam{opacity:1}

/* -----------------------------------------------------------------------------
   20. CURSOR (retícula CNC) — sólo puntero fino
   -------------------------------------------------------------------------- */
.reticle{
  position:fixed;top:0;left:0;z-index:200;pointer-events:none;
  width:26px;height:26px;margin:-13px 0 0 -13px;opacity:0;
  transition:opacity .3s ease,width .3s var(--e-out),height .3s var(--e-out),margin .3s var(--e-out);
  mix-blend-mode:screen;
}
.reticle.is-on{opacity:1}
.reticle i{position:absolute;background:var(--red-2);transition:inherit}
.reticle i:nth-child(1){left:50%;top:0;width:1px;height:6px;transform:translateX(-50%)}
.reticle i:nth-child(2){left:50%;bottom:0;width:1px;height:6px;transform:translateX(-50%)}
.reticle i:nth-child(3){top:50%;left:0;height:1px;width:6px;transform:translateY(-50%)}
.reticle i:nth-child(4){top:50%;right:0;height:1px;width:6px;transform:translateY(-50%)}
.reticle b{
  position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;
  border-radius:50%;background:var(--red-2);box-shadow:0 0 8px 1px rgba(255,65,51,.9);
}
.reticle.is-hot{width:46px;height:46px;margin:-23px 0 0 -23px}
.reticle.is-hot i{background:var(--ember)}
@media (hover:none),(pointer:coarse){.reticle{display:none}}

/* -----------------------------------------------------------------------------
   21. MODAL DE VÍDEO
   -------------------------------------------------------------------------- */
.modal{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:var(--gutter);
  background:rgba(8,9,10,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .4s ease;
}
/* `visibility` cambia de golpe (sin transición) para que el foco pueda entrar
   en el mismo fotograma en que se abre */
.modal.is-open{opacity:1;visibility:visible}
.modal__box{width:min(1080px,100%);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);background:#000;transform:scale(.97);transition:transform .5s var(--e-out)}
.modal.is-open .modal__box{transform:none}
.modal__box video{width:100%;display:block}
.modal__x{
  position:absolute;top:var(--gutter);right:var(--gutter);width:44px;height:44px;border-radius:999px;
  border:1px solid var(--line-2);display:grid;place-items:center;background:rgba(17,18,20,.7);
  transition:border-color var(--t-fast),background var(--t-fast);
}
.modal__x:hover{border-color:var(--red);background:var(--red-dim)}
.modal__x svg{width:15px;height:15px}

/* bloque del spot */
.spot{position:relative;isolation:isolate;overflow:hidden}
.spot img{width:100%;height:clamp(320px,42vw,560px);object-fit:cover;object-position:50% 42%}
.spot__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,var(--surface) 4%,rgba(27,28,31,.82) 34%,rgba(27,28,31,.34) 100%),
    linear-gradient(to right,rgba(27,28,31,.86) 0%,rgba(27,28,31,.12) 62%);
}
.spot__ui{
  position:absolute;left:0;bottom:0;padding:clamp(1.5rem,3.5vw,3rem);
  display:grid;gap:clamp(1rem,2vw,1.5rem);max-width:min(46rem,92%);
}
@media (max-width:600px){.spot__ui .h4{font-size:1.35rem}}

/* botón de reproducción del spot */
.play{
  display:inline-flex;align-items:center;gap:.9rem;color:var(--text);
  transition:color var(--t-fast);
}
.play__ic{
  position:relative;width:56px;height:56px;border-radius:999px;flex:none;
  border:1px solid var(--line-2);display:grid;place-items:center;
  transition:border-color var(--t),background var(--t),transform var(--t);
}
/* Aro que late al pasar el cursor. Estaba escrito con transición de opacidad
   0 → 0, así que no se veía nunca; con una animación el pulso sí ocurre y se
   repite mientras el cursor siga encima. `prefers-reduced-motion` lo apaga. */
.play__ic::after{
  content:'';position:absolute;inset:-1px;border-radius:inherit;
  border:1px solid var(--red);opacity:0;
}
.play:hover .play__ic{border-color:var(--red);background:var(--red-dim);transform:scale(1.04)}
.play:hover .play__ic::after{animation:pulsoPlay 1.5s var(--e-out) infinite}
@keyframes pulsoPlay{
  0%   {opacity:.9;transform:scale(1)}
  100% {opacity:0;transform:scale(1.5)}
}
.play__ic svg{width:15px;height:15px;margin-left:2px;color:var(--red-lite)}

/* -----------------------------------------------------------------------------
   22. UTILIDADES
   -------------------------------------------------------------------------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--red);color:#fff;padding:.75rem 1.25rem;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}
.stack{display:grid;gap:clamp(.75rem,1.5vw,1.15rem)}
.row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.mt-a{margin-top:auto}
.hide-sm{display:initial}
@media (max-width:600px){.hide-sm{display:none}}
.noscroll{overflow:hidden}

/* franja diagonal de advertencia industrial — separador de sección */
.hazard{
  height:6px;width:100%;
  background:repeating-linear-gradient(-45deg,var(--red) 0 10px,transparent 10px 20px);
  opacity:.42;
}

/* fondo de retícula técnica reutilizable */
.gridbg{position:relative;isolation:isolate}
.gridbg::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000,transparent 75%);
}

/* -----------------------------------------------------------------------------
   23. MOVIMIENTO REDUCIDO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
  .split .ln>span{transform:none !important}
  .lasercut>.txt{-webkit-mask-image:none;mask-image:none}
  .lasercut>.beam{display:none}
  .reticle{display:none}
  .ticker__track{transform:none !important}
}

/* -----------------------------------------------------------------------------
   24. IMPRESIÓN
   -------------------------------------------------------------------------- */
/* ── planos de servicios ───────────────────────────────────────────────────
   Dibujo de línea isométrico, uno por servicio. Es el mismo idioma que
   img/wire/ —la silueta técnica en rojo— y por eso comparte su lógica: NO es
   decorativo, describe la pieza de la que habla el texto de al lado.

   Van por <img> y no en línea, así que no heredan las variables de color: los
   hex viven en herramientas/planos-servicios.py. Si cambia --red, cambia allí
   y vuelve a generar.

   Llevan width y height como atributos, y aquí width:auto obligatorio junto a
   cualquier alto — es la trampa 3 del CLAUDE.md: un <img> con width de
   atributo y alto por CSS se estira. */
.plano{margin:1.75rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line)}
.plano img{display:block;width:100%;height:auto;max-width:26rem;opacity:.92}
@media (max-width:860px){
  .plano{max-width:17rem}
}
@media print{
  /* el SVG es transparente, así que la línea roja cae sobre el papel blanco y
     se imprime tal cual. Nada de invert() aquí: eso es para las imágenes que
     traen su propio fondo #111214, y le cambiaría el color al trazo. */
  .plano{break-inside:avoid}
  .plano img{opacity:1}
}

@media print{
  /* Se redefinen los tokens, no se parchean dos clases: las superficies oscuras
     viven en una docena de reglas y con el texto en negro quedaban ilegibles.
     Todos los valores verificados a ≥4,5:1 sobre papel blanco. */
  :root{
    --ink:#fff; --ink-deep:#fff; --surface:#fff; --surface-2:#fff; --surface-3:#fff;
    --line:#d4d4d8; --line-2:#a8a8ae;
    --text:#000;        /* 21,0 : 1 */
    --text-2:#444448;   /*  9,7 : 1 */
    --text-3:#55555A;   /*  7,4 : 1 */
    --red:#A31410;      /*  7,9 : 1 */
    --red-2:#A31410; --red-lite:#A31410; --red-dim:transparent; --ember:#8F120E;
  }
  html,body{background:#fff !important;color:#000 !important}
  .hdr,.drawer,.reticle,.modal,.hero__vctl,.scroll-hint,.ticker,
  .hero__media,.hazard,.play,.spot,.viewer__strip{display:none !important}

  /* fondos, sombras y máscaras decorativas fuera */
  main>section:not(.hero),.section,.card,.cta,.step,.dcell,.viewer,.calc__panel,
  .cd,.thumb,.note,.spot__veil{background:#fff !important;box-shadow:none !important}
  .gridbg::before,.viewer__stage::before,.cta::before,.card::after{display:none !important}
  .hero{min-height:0 !important;padding-top:0 !important;position:static !important}
  .lasercut>.txt{-webkit-mask-image:none !important;mask-image:none !important}
  .lasercut>.beam{display:none !important}
  /* la máscara SÍ se conserva: los renders traen fondo oscuro y sin ella
     quedarían como un rectángulo negro de bordes duros sobre el papel */

  /* bordes visibles sobre papel */
  .card,.cta,.viewer,.dgrid,.cmp,.proc__steps,.calc__panel{border-color:#c9c9cf !important}
  .dgrid,.proc__steps{background:#c9c9cf !important}   /* las hairlines de la rejilla */

  /* No se imprime la URL después de cada enlace: en el pie los teléfonos y el
     correo ya están escritos como texto, y las de wa.me son ilegibles en papel. */
  a{text-decoration:none;color:inherit}
  .btn{border:1px solid #a8a8ae !important;background:#fff !important;color:#000 !important}

  [data-reveal],.split .ln>span{opacity:1 !important;transform:none !important}
  .section{padding-block:1.5rem !important;break-inside:avoid}
  .card,.dcell,.step{break-inside:avoid}
}

/* -----------------------------------------------------------------------------
   24. BARRA DE ACCIÓN EN MÓVIL  (v2.0)
   A partir de 1199,98 px la cabecera esconde la navegación y el botón de
   cotizar, y queda sólo la hamburguesa: el sitio se quedaba sin llamada a la
   acción visible durante todo el desplazamiento. Esta barra la devuelve.
   Colores heredados de los botones (mismos tokens ya verificados a ≥4,5:1).
   -------------------------------------------------------------------------- */
.actbar{display:none}
@media (max-width:1199.98px){
  .actbar{
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    /* v2.3: eran 1.45fr 1fr y el botón rojo salía un 45 % más ancho que el
       otro — el cliente lo señaló en la captura. Dos mitades iguales. */
    display:grid;grid-template-columns:1fr 1fr;gap:.5rem;
    padding:.6rem var(--gutter);
    padding-bottom:calc(.6rem + env(safe-area-inset-bottom, 0px));
    background:rgba(17,18,20,.88);border-top:1px solid var(--line);
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
  }
  .actbar>a{
    display:flex;align-items:center;justify-content:center;gap:.5em;
    min-height:48px;padding:.75rem 1rem;border-radius:var(--r-btn);
    font-size:var(--fs-xs);font-weight:500;line-height:1.15;text-align:center;
    border:1px solid transparent;transition:background var(--t-fast),border-color var(--t-fast);
  }
  .actbar>a svg{width:1.05em;height:1.05em;flex:none}
  .actbar__wa{background:var(--red);color:#fff}
  .actbar__wa:hover{background:var(--red-2)}
  .actbar__alt{background:var(--surface-2);color:var(--text);border-color:var(--line-2)}
  .actbar__alt:hover{border-color:var(--text-3)}
  /* que la barra no tape la última línea del pie */
  .ftr{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom, 0px))}
}
@media print{.actbar{display:none !important}}

/* -----------------------------------------------------------------------------
   25. SELECTOR DE MÁQUINA EN CUATRO PREGUNTAS  (v2.1)
   Micro-compromiso: cuatro toques y sale un equipo concreto. Las opciones son
   botones nativos con aria-pressed —no radios— porque hay que poder cambiar de
   idea sin recargar y porque el estado se pinta con el mismo lenguaje que el
   resto de conmutadores del sitio.
   -------------------------------------------------------------------------- */
.quiz{
  border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);
  padding:clamp(1.5rem,3.2vw,2.75rem);
}
.quiz__bar{
  position:relative;height:2px;background:var(--line-2);border-radius:2px;
  margin-bottom:clamp(1.75rem,3vw,2.5rem);overflow:hidden;
}
.quiz__bar>i{
  position:absolute;inset:0 auto 0 0;width:0;background:var(--red);
  transition:width .5s var(--e-out);
}
.quiz__steps{display:grid;gap:clamp(1.25rem,2.5vw,2rem)}
.quiz__q{display:grid;gap:.85rem}
.quiz__q>p{
  font-size:var(--fs-small);color:var(--text);letter-spacing:-.01em;
  display:flex;align-items:baseline;gap:.6rem;
}
.quiz__q>p>span{
  font-family:var(--mono);font-size:var(--fs-label);color:var(--text-3);
  letter-spacing:.08em;flex:none;
}
.quiz__q.is-done>p>span{color:var(--red-lite)}
.quiz__opts{display:flex;flex-wrap:wrap;gap:.5rem}
.quiz__opts button{
  padding:.7rem 1.15rem;border:1px solid var(--line-2);border-radius:999px;
  background:transparent;color:var(--text-2);font-size:var(--fs-xs);line-height:1;
  cursor:pointer;transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast);
}
.quiz__opts button:hover{border-color:var(--text-3);color:var(--text)}
.quiz__opts button[aria-pressed="true"]{
  background:var(--red);border-color:var(--red);color:#fff;
}
.quiz__out{
  margin-top:clamp(1.75rem,3vw,2.5rem);padding-top:clamp(1.75rem,3vw,2.5rem);
  border-top:1px solid var(--line);
}
.quiz__pick{margin-top:1rem;line-height:1}
.quiz__tag{color:var(--text-2);font-size:var(--fs-small);margin-top:.5rem}
.quiz__why{margin-top:1.25rem;max-width:62ch}
.quiz__specs{
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);margin-top:1.75rem;overflow:hidden;
}
.quiz__specs>div{
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  background:var(--surface-2);padding:.85rem 1.15rem;
}
.quiz__specs dt{color:var(--text-3);font-size:var(--fs-tiny)}
.quiz__specs dd{color:var(--text);font-size:var(--fs-tiny);text-align:right}
.quiz__cta{margin-top:1.75rem}
.quiz__nota{margin-top:1.25rem;max-width:62ch}
.quiz__reset{
  margin-top:1.5rem;background:none;border:0;padding:0;cursor:pointer;
  color:var(--text-3);font-size:var(--fs-tiny);text-decoration:underline;
  text-underline-offset:3px;
}
.quiz__reset:hover{color:var(--text)}
@media (max-width:600px){
  .quiz__opts button{flex:1 1 auto;min-width:calc(50% - .25rem)}
}
@media print{
  .quiz__opts button,.quiz__reset{border:1px solid #a8a8ae !important}
  .quiz__bar{display:none}
}
/* Apunte entre paréntesis dentro de una pregunta del selector.
   La pregunta es un contenedor flex, así que el apunte es un elemento flex más:
   sin `flex-wrap` en el padre y sin base del 100 % aquí, en móvil no baja de
   línea y desborda la pantalla (441 px medidos en un viewport de 390).

   ⚠️ v2.3 — el selector iba en `.quiz__aside` a secas y NUNCA se aplicó: cuatro
   líneas más arriba, `.quiz__q>p>span` (0-1-2) le gana a `.quiz__aside` (0-1-0)
   y le impone `flex:none` y la tipografía mono. El desborde no se veía porque el
   único apunte que había —«(habitual, no el récord…)»— medía 291,7 px y cabía
   por 8 px en el contenedor de 300. Al añadir el apunte de la pregunta de
   material saltó: 381,5 px, y con él 426 px de scroll en un viewport de 390.
   Por eso ahora el selector lleva la misma cadena que el que lo pisaba. */
.quiz__q>p{flex-wrap:wrap}
.quiz__q>p>span.quiz__aside{
  flex:1 1 100%;min-width:0;
  font-size:var(--fs-tiny);color:var(--text-3);
  font-family:var(--sans);letter-spacing:normal;
}

/* -----------------------------------------------------------------------------
   26. ENCABEZADO DE PÁGINA A DOS COLUMNAS  (v2.1)
   Los titulares de página llevaban `max-width` en `ch` y quedaban solos en una
   franja de 1600 px: medio ancho de pantalla vacío a la derecha. Aquí el ancho
   del titular lo pone la columna, y la columna de al lado se llena con la
   entradilla y la llamada a la acción. `align-items:end` asienta el texto de
   apoyo sobre la línea base del titular, que es el mismo recurso que ya usa
   `.sec-head` en el resto del sitio.
   -------------------------------------------------------------------------- */
.phero{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(1.75rem,4.5vw,4.5rem);align-items:end;
}
.phero>*{min-width:0}
/* el titular ya no necesita tope propio: lo limita la columna */
.phero .h1{max-width:none}
.phero__aside>*+*{margin-top:1.25rem}
@media (max-width:1023.98px){
  .phero{grid-template-columns:minmax(0,1fr);gap:1.5rem;align-items:start}
  .phero__aside{margin-top:.25rem}
}

/* -----------------------------------------------------------------------------
   27. MATERIAL REAL: TIRA DE MINIATURAS + LUPA  (v2.2)
   Fotos y vídeos de las máquinas ya instaladas, bajo la ficha de su modelo.
   Ojo con la trampa 8: estas SON fotografías de planta, no los renders del
   catálogo — no traen fondo #111214 incrustado, así que aquí sí se recortan con
   `object-fit:cover` y una proporción fija. Por eso llevan clase propia y no
   `.cardimg`, que está pensada para los renders.
   -------------------------------------------------------------------------- */
.real{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.real__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:6px;margin-top:.9rem;
}
.real__it{
  position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r-chip);
  overflow:hidden;border:1px solid var(--line);background:var(--surface-2);
  transition:border-color var(--t-fast),transform var(--t-fast);
}
.real__it img{width:100%;height:100%;object-fit:cover;display:block}
.real__it:hover{border-color:var(--red);transform:translateY(-2px)}
.real__it:focus-visible{outline:2px solid var(--red-lite);outline-offset:2px}
/* distintivo de vídeo */
.real__play{
  position:absolute;inset:auto .35rem .35rem auto;width:26px;height:26px;
  display:grid;place-items:center;border-radius:999px;
  background:rgba(17,18,20,.72);border:1px solid rgba(255,255,255,.28);
}
.real__play svg{width:9px;height:9px;fill:#fff;margin-left:1px}
.real__mas{
  display:grid;place-items:center;font-family:var(--mono);font-size:var(--fs-tiny);
  color:var(--text-2);text-align:center;line-height:1.3;padding:.4rem;
}

/* lupa a pantalla completa */
.lupa{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:clamp(1rem,4vw,3rem);background:rgba(8,9,10,.94);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
}
.lupa.is-open{opacity:1;visibility:visible}
.lupa__box{max-width:min(1200px,92vw);max-height:88vh;display:flex;flex-direction:column;gap:.9rem}
.lupa__media{display:grid;place-items:center;min-height:0}
.lupa__media img,.lupa__media video{
  max-width:100%;max-height:78vh;width:auto;height:auto;display:block;
  border-radius:var(--r);background:#000;
}
.lupa__cap{color:var(--text-2);text-align:center;max-width:72ch;margin:0 auto}
.lupa__x,.lupa__nav{
  position:absolute;display:grid;place-items:center;width:46px;height:46px;
  border-radius:999px;border:1px solid var(--line-2);background:rgba(27,28,31,.9);
  color:var(--text);cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast);
}
.lupa__x:hover,.lupa__nav:hover{border-color:var(--red);background:var(--surface-2)}
.lupa__x{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.lupa__x svg,.lupa__nav svg{width:15px;height:15px}
.lupa__nav--prev{left:clamp(.5rem,2vw,1.75rem);top:50%;transform:translateY(-50%)}
.lupa__nav--next{right:clamp(.5rem,2vw,1.75rem);top:50%;transform:translateY(-50%)}
@media (max-width:600px){
  .real__grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
  .lupa__nav{width:40px;height:40px}
  .lupa__nav--prev{left:.35rem} .lupa__nav--next{right:.35rem}
}
@media (prefers-reduced-motion:reduce){
  .lupa{transition:none}
  .real__it:hover{transform:none}
}
@media print{
  .lupa{display:none !important}
  .real__grid{grid-template-columns:repeat(4,1fr)}
  .real__it{border-color:#c9c9cf !important}
}

/* -----------------------------------------------------------------------------
   28. GRUPOS DE BOTONES  (v2.3)
   El cliente señaló que los botones quedaban «mal distribuidos». Medido con
   qa/botones.js sobre las 5 páginas × 5 anchos: 23 combinaciones con el borde
   derecho dentado. La causa es que `.row` y `.hero__actions` eran flex con
   `flex-wrap`, así que cada botón tomaba su ancho natural; al apilarse en
   columna quedaban de anchos distintos (hasta 77 px de diferencia en
   contacto.html) y, cuando una etiqueta se partía en dos líneas, también de
   alturas distintas.

   Rejilla con `auto-fill` en vez de flex:
   · dos columnas iguales cuando caben  → mismo ancho y misma altura;
   · una columna a lo ancho cuando no   → borde derecho limpio;
   · `auto-fill` (no `auto-fit`) para que un grupo de un solo botón no se
     estire hasta el tope: con `auto-fit` la pista vacía colapsa y el botón
     único se comía los 34 rem enteros.
   El tope de 34 rem evita botones de media pantalla en contenedores anchos.
   -------------------------------------------------------------------------- */
.acts,.hero__actions{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr));
  gap:.75rem;
  align-items:stretch;
  max-width:34rem;
}
.acts>.btn,.hero__actions>.btn{width:100%}

/* Área táctil: `.btn--sm` medía 37,4 px de alto. 44 px es el mínimo cómodo en
   pantalla táctil (WCAG 2.5.5) y no cambia el aspecto en escritorio, porque el
   relleno ya llevaba a los botones normales por encima de esa cifra. */
.btn{min-height:44px}

/* -----------------------------------------------------------------------------
   29. FILA DE TARJETAS CON GALERÍA  (v2.3)
   `.svc` lleva `min-height:100%` y su lista `margin-top:auto`: las tarjetas se
   estiran a la altura de la más alta y las viñetas se pegan al fondo. Funciona
   mientras las tres midan parecido. En la fila de «equipo por pedido» una de
   ellas cuelga una galería de material real y las otras dos se quedaban con un
   vacío de 159 y 182 px en mitad de la tarjeta — el cliente lo señaló en la
   captura de escritorio.

   Cuando la fila lleva galería, cada tarjeta toma su propia altura: el hueco
   desaparece y las viñetas quedan pegadas al texto al que pertenecen. Se acota
   a `.g3` a propósito: las filas de dos columnas del catálogo llevan galería en
   las dos tarjetas y ahí las alturas ya casan.
   -------------------------------------------------------------------------- */
.g3:has(.real){align-items:start}
.g3:has(.real)>.svc{min-height:0}
.g3:has(.real)>.svc ul{margin-top:1.25rem}

/* -----------------------------------------------------------------------------
   30. IMAGEN DE LA SECCIÓN DE FERIA  (v2.3)
   La columna derecha del bloque de la feria sólo llevaba la cuenta atrás y
   dejaba un hueco grande — el cliente lo señaló. La imagen lo ocupa y sostiene
   la cuenta atrás debajo.
   · `width:auto` junto al `height`, o el <img> se deforma (trampa 3).
   · La foto trae su propio fondo oscuro, así que no necesita el `#111214`
     incrustado de la trampa 8; se apoya en el borde y el radio del sistema.
   -------------------------------------------------------------------------- */
.feriapic{
  margin:0 0 clamp(1.5rem,3vw,2.25rem);
  border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;background:var(--ink);
}
.feriapic img{
  display:block;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;
  /* la sala de la foto es más fría que la web: se acerca al gris del sitio */
  filter:saturate(.92) contrast(1.04);
}
@media (max-width:809.98px){
  .feriapic{margin-bottom:1.5rem}
}
@media print{.feriapic{display:none}}