/* ============================================================
   ProDesign — Precision Engineering Catalog design system
   Own-world tokens: Velocity Orange + Precision Blue,
   Space Grotesk / Space Mono, hairline + reticle motif.
   ============================================================ */

@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/space-grotesk-var.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/space-mono-400.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/space-mono-700.woff2') format('woff2');
}

:root{
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-mono:'Space Mono', ui-monospace, monospace;

  /* Emil Kowalski's recommended curves — used everywhere instead of bare ease/ease-in */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Light scene: engineering bay at midday — clean, cool-white, blueprint clarity */
  --c-bg:#f6f7fb;
  --c-bg-raised:#ffffff;
  --c-bg-sunken:#eef0f8;
  --c-ink:#0e1220;
  --c-ink-soft:#4a5169;
  --c-ink-faint:#8890a8;
  --c-line:#dfe2ee;
  --c-line-strong:#c7cbdd;
  --c-primary:#ff5f00;
  --c-primary-ink:#ffffff;
  --c-primary-soft:#fff1e6;
  --c-secondary:#2733e0;
  --c-secondary-ink:#ffffff;
  --c-secondary-soft:#eaecff;
  --c-scrim:rgba(14,18,32,.55);
  --shadow-panel:0 1px 2px rgba(14,18,32,.04), 0 12px 32px -12px rgba(14,18,32,.14);
  --shadow-raised:0 2px 6px rgba(14,18,32,.06), 0 24px 48px -20px rgba(14,18,32,.22);
  color-scheme: light;
}

html.dark{
  /* Dark scene: inspection bay at night, work-light glow on navy-black */
  --c-bg:#0a0b12;
  --c-bg-raised:#13141e;
  --c-bg-sunken:#000103;
  --c-ink:#f3f4fb;
  --c-ink-soft:#a8adc4;
  --c-ink-faint:#6b7089;
  --c-line:rgba(255,255,255,.09);
  --c-line-strong:rgba(255,255,255,.16);
  --c-primary:#ff7a26;
  --c-primary-ink:#0a0b12;
  --c-primary-soft:rgba(255,122,38,.12);
  --c-secondary:#6d78ff;
  --c-secondary-ink:#0a0b12;
  --c-secondary-soft:rgba(109,120,255,.14);
  --c-scrim:rgba(0,1,3,.6);
  --shadow-panel:0 1px 2px rgba(0,0,0,.4), 0 20px 44px -16px rgba(0,0,0,.65);
  --shadow-raised:0 2px 8px rgba(0,0,0,.5), 0 32px 64px -20px rgba(0,0,0,.75);
  color-scheme: dark;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{ overflow-x:hidden; }

body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-ink);
  font-family:var(--font-display);
  -webkit-font-smoothing:antialiased;
  transition:background-color .35s var(--ease-out), color .35s var(--ease-out);
}

::selection{ background:var(--c-primary); color:var(--c-primary-ink); }

::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:var(--c-bg-sunken); }
::-webkit-scrollbar-thumb{ background:var(--c-line-strong); border-radius:99px; border:3px solid var(--c-bg-sunken); }
::-webkit-scrollbar-thumb:hover{ background:var(--c-ink-faint); }
html{ scrollbar-color:var(--c-line-strong) var(--c-bg-sunken); }

:focus-visible{
  outline:2px solid var(--c-primary);
  outline-offset:3px;
  border-radius:2px;
}

.font-mono{ font-family:var(--font-mono); }

.material-symbols-outlined{
  font-size:20px; line-height:1; display:inline-flex; flex-shrink:0;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 20;
}

/* ---------- Reticle / corner-bracket motif (signature of this world) ---------- */
.reticle{ position:relative; }
.reticle::before,
.reticle::after,
.reticle .rb-tl,
.reticle .rb-tr,
.reticle .rb-bl,
.reticle .rb-br{ content:''; position:absolute; width:18px; height:18px; pointer-events:none; }
.reticle::before{ top:-1px; left:-1px; border-top:2px solid var(--c-primary); border-left:2px solid var(--c-primary); z-index:2; }
.reticle::after{ bottom:-1px; right:-1px; border-bottom:2px solid var(--c-primary); border-right:2px solid var(--c-primary); z-index:2; }
.reticle .rb-tr{ top:-1px; right:-1px; border-top:2px solid var(--c-secondary); border-right:2px solid var(--c-secondary); z-index:2; }
.reticle .rb-bl{ bottom:-1px; left:-1px; border-bottom:2px solid var(--c-secondary); border-left:2px solid var(--c-secondary); z-index:2; }
.reticle::before,.reticle::after,.reticle .rb-tr,.reticle .rb-bl{
  transition:transform .22s var(--ease-out);
}
/* Corners snap outward on hover — a focus-lock read on the world's own reticle motif */
.card-focus:hover::before{ transform:translate(-3px,-3px); }   /* top-left */
.card-focus:hover::after{ transform:translate(3px,3px); }      /* bottom-right */
.card-focus:hover .rb-tr{ transform:translate(3px,-3px); }     /* top-right */
.card-focus:hover .rb-bl{ transform:translate(-3px,3px); }     /* bottom-left */

.blueprint-grid{
  background-image:
    linear-gradient(var(--c-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-line) 1px, transparent 1px);
  background-size:32px 32px;
}

/* ---------- Panels & hairline surfaces (replaces uniform shadow cards) ---------- */
.panel{
  background:var(--c-bg-raised);
  border:1px solid var(--c-line);
  box-shadow:var(--shadow-panel);
}

.spec-row{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.55rem 0;
  border-top:1px solid var(--c-line);
  font-family:var(--font-mono);
  font-size:.8rem;
}
.spec-row:first-of-type{ border-top:none; }
.spec-row dt{ color:var(--c-ink-faint); text-transform:uppercase; letter-spacing:.04em; }
.spec-row dd{ margin:0; color:var(--c-ink); font-weight:700; text-align:right; }

/* ---------- Hero measurement ping (signature motion, bounded) ---------- */
@keyframes ping-soft{
  0%{ transform:scale(.85); opacity:.9; }
  70%{ transform:scale(2.2); opacity:0; }
  100%{ transform:scale(2.2); opacity:0; }
}
.measure-pt{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--c-primary); }
.measure-pt::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:1.5px solid var(--c-primary);
  animation:ping-soft 2.6s cubic-bezier(.22,.61,.36,1) infinite;
}

/* ---------- Panel hover lift (signature interaction) ---------- */
.panel{ transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out); }
article.panel:hover, .wrap-photo:hover{ transform:translateY(-3px); border-color:var(--c-line-strong); box-shadow:var(--shadow-raised); }
.wrap-photo{ transition:transform .3s var(--ease-out); }

/* ---------- Nav scrim (appears once scrolled) ---------- */
.nav-scrim{ background:transparent; border-bottom:1px solid transparent; }
[data-site-nav].is-scrolled .nav-scrim{
  background:color-mix(in srgb, var(--c-bg) 85%, transparent);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--c-line);
}

/* ---------- Mobile nav collapse (grid-rows trick: animates to auto-height with no JS measuring) ---------- */
.mobile-menu{
  display:grid; grid-template-rows:0fr;
  max-height:calc(100svh - 4rem); overflow:hidden;
  transition:grid-template-rows .4s var(--ease-out);
}
.mobile-menu.is-open{ grid-template-rows:1fr; overflow-y:auto; }
.mobile-menu-inner{ min-height:0; opacity:0; transform:translateY(-6px); transition:opacity .3s var(--ease-out), transform .3s var(--ease-out); }
.mobile-menu.is-open .mobile-menu-inner{ opacity:1; transform:translateY(0); transition-delay:.08s; }

/* ---------- Hamburger → X morph ---------- */
.hamburger-bars{ position:relative; width:18px; height:2px; display:inline-block; }
.hamburger-bars span{
  position:absolute; left:0; top:0; width:100%; height:2px; border-radius:2px;
  background:currentColor;
  transition:transform .3s var(--ease-out), opacity .2s var(--ease-out);
}
.hamburger-bars span:nth-child(1){ transform:translateY(-6px); }
.hamburger-bars span:nth-child(2){ transform:translateY(0); }
.hamburger-bars span:nth-child(3){ transform:translateY(6px); }
.hamburger[aria-expanded="true"] .hamburger-bars span:nth-child(1){ transform:translateY(0) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger-bars span:nth-child(2){ opacity:0; transform:translateY(0) scaleX(0); }
.hamburger[aria-expanded="true"] .hamburger-bars span:nth-child(3){ transform:translateY(0) rotate(-45deg); }

/* ---------- Nav underline ---------- */
.nav-link{ position:relative; }
.nav-link::after{
  content:''; position:absolute; left:0; right:100%; bottom:-4px; height:2px;
  background:var(--c-primary); transition:right .3s var(--ease-out);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after{ right:0; }

/* ---------- Logo hover ---------- */
.logo-link img{ transition:transform .3s var(--ease-out); }
.logo-link:hover img{ transform:scale(1.08) rotate(-4deg); }

/* Small Argentina flag beside the "ProDesign" wordmark — sized/spaced to the
   wordmark's own capital-letter proportions (cap-height / "P" width), so it
   scales correctly wherever the wordmark itself is used at a different size. */
.logo-flag{
  display:inline-block; height:.72em; width:auto; margin-left:.6em; vertical-align:middle;
  border-radius:1px; box-shadow:0 0 0 1px var(--c-line);
}

/* ---------- Spec row hover: highlights the value being scanned (transform/color only) ---------- */
.spec-row{ transition:background-color .2s var(--ease-out); }
.spec-row:hover{ background-color:var(--c-bg-sunken); }
.spec-row dt, .spec-row dd{ transition:transform .2s var(--ease-out), color .2s var(--ease-out); }
.spec-row:hover dt{ transform:translateX(2px); }
.spec-row:hover dd{ transform:translateX(-2px); color:var(--c-primary); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:700; font-size:.95rem; letter-spacing:.01em;
  padding:.85rem 1.6rem; border-radius:.4rem;
  transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background-color .2s var(--ease-out), border-color .2s var(--ease-out);
  cursor:pointer; border:1px solid transparent;
  position:relative; overflow:hidden; isolation:isolate;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{ background:var(--c-primary); color:var(--c-primary-ink); box-shadow:0 10px 24px -10px color-mix(in srgb, var(--c-primary) 65%, transparent); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -12px color-mix(in srgb, var(--c-primary) 70%, transparent); }
.btn-ghost{ background:transparent; color:var(--c-ink); border-color:var(--c-line-strong); }
.btn-ghost:hover{ border-color:var(--c-secondary); color:var(--c-secondary); transform:translateY(-2px); }

/* Sheen sweep on hover — one-shot, not looping */
.btn::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  transform:translateX(-120%); transition:transform .55s cubic-bezier(.4,0,.2,1);
}
.btn:hover::after{ transform:translateX(120%); }
.btn-ghost::after{ background:linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--c-secondary) 16%, transparent) 50%, transparent 60%); }

/* ---------- Theme toggle ---------- */
.theme-toggle{
  position:relative; width:52px; height:28px; min-width:52px; border-radius:99px;
  border:1px solid var(--c-line-strong); background:var(--c-bg-sunken);
  cursor:pointer; flex-shrink:0; overflow:hidden; padding:0;
}
.theme-toggle .knob{
  position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%;
  background:var(--c-primary); transition:transform .35s cubic-bezier(.65,0,.35,1);
  display:flex; align-items:center; justify-content:center;
}
html.dark .theme-toggle .knob{ transform:translateX(24px); }
.theme-toggle .knob .material-symbols-outlined{ font-size:14px; color:var(--c-primary-ink); }

/* ---------- Portfolio photo frames ---------- */
.wrap-photo{ position:relative; overflow:hidden; background:var(--c-bg-sunken); }
.wrap-photo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(88%) contrast(1.05);
  transition:transform .4s var(--ease-out), filter .5s var(--ease-out);
}
.wrap-photo:hover img{ transform:scale(1.04); filter:grayscale(0%) contrast(1); }

/* An uploaded replacement photo whose proportions don't match the frame gets the
   whole image visible (letterboxed), instead of an unpredictable cover-crop. */
.media-contain{ object-fit:contain !important; background:var(--c-bg-sunken); }
.wrap-photo .sw-label{
  position:absolute; inset:auto 0 0 0; padding:.85rem 1rem; z-index:1;
  background:linear-gradient(0deg, var(--c-scrim), transparent);
}

/* ---------- Placeholder badge ---------- */
.placeholder-tag{
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.2rem .5rem; border:1px dashed var(--c-line-strong); border-radius:.3rem; color:var(--c-ink-faint);
}

@media (min-width:768px){
  .measure-line{ position:relative; }
  .measure-line::before{
    content:''; position:absolute; top:50%; left:0; right:0; height:1px;
    background:repeating-linear-gradient(90deg, var(--c-line-strong) 0 6px, transparent 6px 12px);
    z-index:-1;
  }
}

/* ============================================================
   Motion — entrances, hero carousel, hover microinteractions
   Jakub-weighted polish (blur+opacity+translateY enters, subtle
   exits) with Jhey-weighted signature touches (reticle snap,
   carousel tilt). Nav/forms stay Emil-restrained: fast, no bounce.
   ============================================================ */

/* ---------- Hero: one-time page-load entrance (no JS dependency) ----------
   Left column content slides in from off-screen left, the carousel from
   off-screen right — both with a pronounced decelerating "braking" ease-out.
   Title, paragraph and each button animate as separate beats, not one unit. */
@keyframes hero-in-left{
  from{ opacity:0; transform:translateX(-110px); filter:blur(5px); }
  to{ opacity:1; transform:translateX(0); filter:blur(0); }
}
@keyframes hero-in-right{
  from{ opacity:0; transform:translateX(110px); filter:blur(5px); }
  to{ opacity:1; transform:translateX(0); filter:blur(0); }
}
.hero-in-left{ animation-name:hero-in-left; animation-timing-function:var(--ease-out); animation-fill-mode:both; }
.hero-in-right{ animation-name:hero-in-right; animation-timing-function:var(--ease-out); animation-fill-mode:both; }

/* ---------- Scroll-triggered reveals (progressive enhancement: no-js = always visible) ---------- */
.js [data-reveal]{ --reveal-delay:calc(var(--ri, 0) * 65ms); }

.js [data-reveal="fade-up"]{
  opacity:0; transform:translateY(16px); filter:blur(4px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out), filter .6s var(--ease-out);
  transition-delay:var(--reveal-delay);
}
.js [data-reveal="scale-blur"]{
  opacity:0; transform:scale(.94); filter:blur(6px);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out), filter .55s var(--ease-out);
  transition-delay:var(--reveal-delay);
}
.js [data-reveal="split-left"]{
  opacity:0; transform:translateX(-22px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.js [data-reveal="split-right"]{
  opacity:0; transform:translateX(22px);
  transition:opacity .6s var(--ease-out) .1s, transform .6s var(--ease-out) .1s;
}
.js [data-reveal="split-right"] .form-field{
  opacity:0; transform:translateY(10px);
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.js [data-reveal="split-right"].is-in .form-field{ opacity:1; transform:none; }
.form-field:nth-of-type(1){ transition-delay:.22s; }
.form-field:nth-of-type(2){ transition-delay:.28s; }
.form-field:nth-of-type(3){ transition-delay:.34s; }
.form-field:nth-of-type(4){ transition-delay:.40s; }
.form-field:nth-of-type(5){ transition-delay:.46s; }
.js [data-reveal="step"]{
  opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay:var(--reveal-delay);
}
.js [data-reveal="step"] .measure-line::before{
  clip-path:inset(0 100% 0 0);
  transition:clip-path .5s var(--ease-out);
  transition-delay:calc(var(--reveal-delay) + 120ms);
}
.js [data-reveal].is-in{
  opacity:1; transform:none; filter:blur(0);
}
.js [data-reveal="step"].is-in .measure-line::before{ clip-path:inset(0 0 0 0); }

/* ---------- Service card hover: subtle lift + icon pop (in addition to .panel's lift) ---------- */
.card-focus .material-symbols-outlined{ transition:transform .3s var(--ease-out); }
.card-focus:hover .material-symbols-outlined{ transform:scale(1.15) rotate(-4deg); }

/* ---------- Process step hover: measurement point pops once ---------- */
.step-focus{ transition:transform .25s var(--ease-out); }
.step-focus:hover{ transform:translateY(-2px); }
.step-focus:hover .measure-pt{ animation:measure-pop .35s var(--ease-out); }
.step-focus:hover .font-mono{ color:var(--c-primary); }
@keyframes measure-pop{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.6); }
  100%{ transform:scale(1); }
}

/* ---------- Hero carousel ---------- */
.hero-carousel{
  --tilt-x:0deg; --tilt-y:0deg;
  isolation:isolate;
  transform:perspective(1400px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition:transform .3s var(--ease-out);
}
.hero-slide{
  position:absolute; inset:0; margin:0; opacity:0;
  transition:opacity 1s var(--ease-in-out);
}
.hero-slide.is-active{ opacity:1; }
.hero-slide img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1);
}
.hero-slide.is-active img{
  transform:scale(1.08);
  transition:transform 6.5s linear;
}
.hero-carousel-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, rgba(6,7,12,.65) 0%, rgba(6,7,12,.05) 40%, transparent 60%);
}
.carousel-ig-tag{
  position:absolute; top:14px; right:14px; z-index:3;
  display:inline-flex; align-items:center; gap:.35rem;
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:.03em;
  padding:.35rem .65rem; border-radius:99px;
  background:rgba(8,9,16,.5); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:#fff; border:1px solid rgba(255,255,255,.25);
  transition:background-color .2s var(--ease-out), transform .25s var(--ease-out);
}
.carousel-ig-tag .material-symbols-outlined{ font-size:14px; }
.carousel-ig-tag:hover{ background:var(--c-primary); transform:translateY(-1px); }

.carousel-controls{
  position:absolute; left:0; right:0; bottom:14px; z-index:3;
  display:flex; align-items:center; justify-content:center; gap:14px;
}
.carousel-arrow{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,9,16,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:#fff; border:1px solid rgba(255,255,255,.25);
  transition:background-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.carousel-arrow .material-symbols-outlined{ font-size:18px; }
.carousel-arrow:hover{ background:var(--c-primary); transform:scale(1.08); }
.carousel-dots{ display:flex; align-items:center; gap:8px; }
.carousel-dot{
  position:relative; width:20px; height:16px; padding:0; border:none; background:transparent; flex-shrink:0;
}
.carousel-dot::before{
  content:''; position:absolute; left:50%; top:50%; width:20px; height:7px;
  margin:-3.5px 0 0 -10px; border-radius:99px;
  background:rgba(255,255,255,.45);
  transform:scaleX(.35);
  transition:background-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.carousel-dot.is-active::before{ background:var(--c-primary); transform:scaleX(1); }

@media (hover:none){
  .hero-carousel{ transform:none !important; }
}

/* ============================================================
   Header additions — partner mark, social icon, WhatsApp chip
   ============================================================ */
.partner-divider{
  width:1px; align-self:stretch; margin:0 .9rem;
  background:var(--c-line-strong);
}
.partner-mark{ display:flex; align-items:center; gap:.5rem; }
.partner-mark img{ height:44px; width:auto; display:block; }
.partner-mark .partner-slot{
  min-width:128px; height:44px;
}
@media (max-width:640px){ .partner-divider, .partner-mark{ display:none; } }

.icon-pill{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  border:1px solid var(--c-line-strong); color:var(--c-ink-soft);
  transition:transform .2s var(--ease-out), background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.icon-pill:hover{ transform:translateY(-2px); background:var(--c-primary); border-color:var(--c-primary); color:var(--c-primary-ink); }
.icon-pill.is-accent{ background:var(--c-primary-soft); border-color:transparent; color:var(--c-primary); }
.icon-pill.is-accent:hover{ background:var(--c-primary); color:var(--c-primary-ink); }

.header-phone{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:.8rem; color:var(--c-ink-soft);
  transition:color .2s var(--ease-out);
}
.header-phone:hover{ color:var(--c-primary); }
.header-phone .material-symbols-outlined{ font-size:17px; }
@media (max-width:1280px){ .header-phone.is-compact span.phone-num{ display:none; } }

/* ============================================================
   Floating WhatsApp button
   ============================================================ */
.whatsapp-float{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#ffffff; border:1px solid rgba(37,211,102,.25);
  box-shadow:0 10px 24px -8px rgba(37,211,102,.45), var(--shadow-raised);
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.whatsapp-float:hover{ transform:translateY(-3px) scale(1.04); }
.whatsapp-float:active{ transform:translateY(0) scale(.97); }
.whatsapp-float img{ width:34px; height:34px; display:block; }
@media (max-width:640px){
  .whatsapp-float{ right:14px; bottom:14px; width:52px; height:52px; }
  .whatsapp-float img{ width:30px; height:30px; }
}

/* ============================================================
   Tecnologías — machine catalog cards (reuses .panel/.reticle/.card-focus)
   ============================================================ */
.machine-card-media{
  position:relative; overflow:hidden; border-radius:.75rem;
  aspect-ratio:4/3; background:var(--c-bg-sunken);
}
.machine-card-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .4s var(--ease-out);
}
.machine-card:hover .machine-card-media img{ transform:scale(1.035); }

/* ============================================================
   Nosotros — editorial two-block layout, deliberately distinct
   from the panel/reticle vocabulary used elsewhere
   ============================================================ */
.about-block{ display:grid; gap:2.5rem; align-items:center; }
@media (min-width:900px){
  .about-block{ grid-template-columns:1fr 1fr; gap:3.5rem; }
  .about-block.is-reverse .about-block-media{ order:2; }
  .about-block.is-reverse .about-block-text{ order:1; }
}
.about-block-media{ position:relative; }
.about-collage{ position:relative; aspect-ratio:2/1; }
.about-collage img{
  position:absolute; border-radius:1rem; object-fit:cover;
  box-shadow:var(--shadow-panel);
}
.about-collage img:first-child{
  width:72%; height:78%; top:0; left:0; z-index:1;
}
.about-collage img:last-child{
  width:58%; height:52%; right:0; bottom:0; z-index:2;
  border:4px solid var(--c-bg);
}
.about-block-text .accent-rule{
  width:46px; height:3px; background:var(--c-primary); border-radius:99px; margin-bottom:1.25rem;
}
.about-block-text h3{ font-size:1.25rem; font-weight:700; letter-spacing:-0.01em; }
.about-block-text p{ margin-top:1rem; color:var(--c-ink-soft); line-height:1.7; text-align:justify; }

/* ============================================================
   Image lightbox / zoom-and-pan viewer
   ============================================================ */
[data-zoomable]{ cursor:zoom-in; }
.lightbox{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,7,12,.92);
  opacity:0; visibility:hidden;
  transition:opacity .25s var(--ease-out), visibility 0s linear .25s;
}
.lightbox.is-open{ opacity:1; visibility:visible; transition:opacity .25s var(--ease-out); }
.lightbox-stage{
  position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; touch-action:none;
}
.lightbox-stage img{
  max-width:92vw; max-height:88vh; width:auto; height:auto;
  user-select:none; -webkit-user-drag:none;
  will-change:transform;
  transition:transform .15s var(--ease-out);
}
.lightbox-stage.is-panning img{ transition:none; }
.lightbox-close{
  position:absolute; top:18px; right:18px; z-index:2;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25);
  color:#fff; transition:background-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.lightbox-close:hover{ background:var(--c-primary); transform:rotate(90deg); }
.lightbox-hint{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:2;
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:.03em; color:rgba(255,255,255,.65);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  padding:.35rem .75rem; border-radius:99px; pointer-events:none;
}
@media (max-width:640px){ .lightbox-hint{ display:none; } }