@font-face {
  font-family: "Instrument Sans";
  src: url("assets/InstrumentSans-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #171a17;
  --paper: #fff;
  --white: #fff;
  --lime: #d6e653;
  --muted: #656a63;
  --line: #d9dcd5;
  /* Dash: menú y portada blancos, contacto oscuro, verde del logo como acento */
  --grafito: #1e2120;
  --claro: #f4f5f0;
  --gris: #a9ada8;
  --verde-dash: #bbd35b;
  --font: "Instrument Sans", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.refresh-to-top { scroll-behavior: auto; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 3px solid #a5b52d; outline-offset: 4px; }
section[id] { scroll-margin-top: 86px; }
.has-js:not(.page-ready) body { overflow: hidden; }
.motion-ready [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity .75s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.motion-ready [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
.page-ready .hero .eyebrow { animation: enter-up .7s cubic-bezier(.2,.8,.2,1) both; }
.page-ready .hero h1 { animation: enter-up .85s cubic-bezier(.2,.8,.2,1) .08s both; }
.page-ready .hero-description { animation: enter-up .85s cubic-bezier(.2,.8,.2,1) .18s both; }
.page-ready .hero-machine { animation: image-enter 1.1s cubic-bezier(.2,.8,.2,1) .12s both; }
@keyframes enter-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes image-enter { from { opacity: .6; transform: scale(.965); } to { opacity: 1; transform: scale(1); } }

/* First-load brand animation */
.site-loader { display: none; }
.has-js .site-loader { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; overflow: hidden; background: var(--grafito); color: var(--white); transition: transform .75s cubic-bezier(.76,0,.24,1); }
.site-loader.is-exiting { transform: translateY(-101%); }
.loader-brand { position: relative; width: min(460px, 90vw); height: 166px; }
/* One official image supplies both layers. The D opens whole (.loader-relleno closes its notch, on the circle that fits its outer edge) and the rest of the word opens over it. The "a" interlocks with the D, so both polygons follow the empty gap between them (measured on dash-logo.png). */
/* Only transform and opacity, so the browser can run it without the main thread. Nothing heavy may run until .loader-resto ends: script.js holds back the 3D machine, whose first draw stalls the GPU for about 3 s, and nothing on screen may move until it ends (a moving element would show the stall). That is also why the wipe is a window sliding over a counter-sliding image instead of an animated clip-path. */
.loader-name { position: absolute; top: 2px; left: 50%; display: block; width: min(340px, 76vw); transform: translateX(-23%); will-change: transform; }
.loader-name img { display: block; width: 100%; height: auto; }
.loader-d { position: relative; display: block; opacity: 0; transform: scale(.92); transform-origin: 23% 50%; will-change: transform, opacity; }
.loader-d img { clip-path: polygon(0 0, 32.17% 0, 43.08% 9.76%, 47.17% 26.7%, 42.83% 32.6%, 45.29% 45.3%, 42.25% 52.67%, 42.75% 65.19%, 47.92% 77.16%, 35.75% 97.79%, 31.25% 100%, 0 100%); }
.loader-relleno { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--verde-dash); transform-origin: 39.83% 49.63%; will-change: transform; }
.loader-resto { position: absolute; top: 0; bottom: 0; left: 42.5%; width: 57.5%; overflow: hidden; transform: translateX(-100%); will-change: transform; }
.loader-name .loader-resto img { position: absolute; top: 0; left: calc(-42.5% / .575); width: calc(100% / .575); max-width: none; clip-path: polygon(100% 0, 100% 100%, 31.25% 100%, 35.75% 97.79%, 47.92% 77.16%, 42.75% 65.19%, 42.25% 52.67%, 45.29% 45.3%, 42.83% 32.6%, 47.17% 26.7%, 43.08% 9.76%, 32.17% 0); transform: translateX(57.5%); will-change: transform; }
.loader-brand::before { content: ""; position: absolute; top: 50%; left: 50%; width: 560px; height: 560px; margin: -280px 0 0 -280px; background: radial-gradient(closest-side, rgba(187,211,91,.13), rgba(187,211,91,0)); opacity: 0; will-change: transform, opacity; }
.site-loader.is-started .loader-brand::before { animation: loader-brillo 1.6s cubic-bezier(.2,.7,.3,1) both; }
.site-loader.is-started .loader-d { animation: loader-letter .55s cubic-bezier(.2,.8,.2,1) both; }
.site-loader.is-started .loader-name { animation: loader-corrida 1s cubic-bezier(.6,0,.2,1) .7s both; }
.site-loader.is-started .loader-resto { animation: loader-ventana 1s cubic-bezier(.6,0,.2,1) .7s both; }
.site-loader.is-started .loader-resto img { animation: loader-contra 1s cubic-bezier(.6,0,.2,1) .7s both; }
.site-loader.is-started .loader-relleno { animation: loader-muesca .55s cubic-bezier(.6,0,.2,1) .84s both; }
.site-loader.is-started .loader-line { animation: loader-trazo 1s cubic-bezier(.6,0,.2,1) .7s both; }
.site-loader.is-exiting .loader-brand { animation: loader-salida .5s cubic-bezier(.5,0,.8,.4) both; }
@keyframes loader-brillo { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes loader-letter { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes loader-corrida { from { transform: translateX(-23%); } to { transform: translateX(-50%); } }
@keyframes loader-ventana { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes loader-contra { from { transform: translateX(57.5%); } to { transform: translateX(0); } }
@keyframes loader-muesca { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes loader-trazo { from { transform: translateX(-50%) scaleX(0); } to { transform: translateX(-50%) scaleX(1); } }
@keyframes loader-salida { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-34px); } }
.loader-line { position: absolute; bottom: 0; left: 50%; width: min(180px, 45vw); height: 2px; background: var(--lime); transform: translateX(-50%) scaleX(0); transform-origin: center; }

.shell { width: min(100% - 88px, 1320px); margin-inline: auto; }
.section-pad { padding-block: clamp(86px, 8vw, 140px); }
.skip-link { position: absolute; z-index: 100; top: -70px; left: 20px; padding: 12px 18px; background: var(--ink); color: var(--white); }
.skip-link:focus { top: 14px; }

/* Header */
.site-header { position: sticky; z-index: 50; top: 0; background: rgba(255, 255, 255, .94); color: var(--ink); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 88px; gap: 30px; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; gap: 9px; line-height: 1; }
.brand-logo { display: block; width: 140px; height: auto; transition: transform .3s ease; }
.brand:hover .brand-logo { transform: translateY(-2px); }
.brand-mark { display: grid; width: 32px; height: 32px; place-items: center; }
.brand-mark img { width: 100%; height: 100%; }
.brand-name { font-size: 25px; font-weight: 780; letter-spacing: -.065em; }
.brand-name span { font-weight: 420; }
.primary-nav { display: flex; align-items: center; gap: clamp(24px, 3vw, 52px); font-size: 13px; font-weight: 650; }
.nav-overline, .nav-arrow { display: none; }
.primary-nav > a[hidden] { display: none !important; }  /* Catálogo y Aliados, mientras no haya nada cargado */
.primary-nav > a:not(.nav-contact) { padding-block: 15px; transition: opacity .2s ease; }
.primary-nav > a:not(.nav-contact):hover { opacity: .5; }
.nav-contact { display: inline-flex; align-items: center; gap: 33px; min-height: 45px; padding: 0 17px; background: var(--verde-dash); color: var(--ink); transition: background .25s, color .25s; }
.nav-contact:hover { background: var(--ink); color: var(--white); }
.nav-contact .nav-arrow { display: inline; font-size: 17px; }

.nav-direct-contact { display: flex; align-items: center; gap: 9px; margin-left: -22px; }
.nav-direct-contact a { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #c7ccc3; border-radius: 50%; background: transparent; color: var(--ink); transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.nav-direct-contact a:hover { transform: translateY(-3px); border-color: var(--ink); }
.nav-direct-contact .nav-direct-whatsapp { background: #25d366; border-color: #25d366; }
.nav-direct-contact .nav-direct-whatsapp img { width: 20px; height: 20px; }
.nav-direct-contact .nav-direct-instagram img { width: 22px; height: 22px; }
@media (min-width: 761px) { .nav-direct-contact .nav-direct-whatsapp { display: none; } }
.nav-direct-contact span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.whatsapp-float { position: fixed; z-index: 45; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); display: grid; width: 60px; height: 60px; place-items: center; border: 2px solid var(--white); border-radius: 50%; background: #25d366; box-shadow: 0 9px 30px rgba(0,0,0,.21); transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease; }
.whatsapp-float:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 14px 32px rgba(0,0,0,.25); }
.whatsapp-float img { width: 29px; height: 29px; }
body.menu-open .whatsapp-float { opacity: 0; pointer-events: none; transform: translateY(12px); }
.menu-toggle { display: none; }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); min-height: min(720px, calc(100svh - 88px)); padding-block: 32px 45px; gap: clamp(20px, 3vw, 52px); }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: clamp(28px, 5vw, 76px) 0 11px; }
.eyebrow, .section-label, .contact-kicker { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 11px; font-weight: 760; letter-spacing: .15em; line-height: 1.3; }
.eyebrow-line { display: inline-block; width: 28px; height: 1px; background: var(--ink); }
.hero h1 { margin: auto 0 0; font-size: clamp(58px, 6.8vw, 110px); font-weight: 680; letter-spacing: -.085em; line-height: .91; }
.hero h1 span { white-space: nowrap; }
.hero-description { max-width: 470px; margin: 31px 0 0; color: #4c524c; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.48; letter-spacing: -.025em; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 58px; padding: 0 20px; font-size: 14px; font-weight: 680; transition: background .25s ease, color .25s ease, transform .25s ease; }
.button:hover { transform: translateY(-3px); }
.button span { font-size: 20px; font-weight: 400; line-height: 1; }
.button-dark { background: var(--ink); color: var(--white); }
.button-dark:hover { background: var(--lime); color: var(--ink); }
.hero-bottom { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 50px; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.small-cross { color: #8b9b20; font-size: 18px; line-height: .7; }
.hero-visual { position: relative; min-height: 0; }

/* Shared section typography */
.section-label { color: #575d56; white-space: nowrap; }
.section-label span { color: var(--ink); }
.section-heading-grid { display: grid; grid-template-columns: minmax(190px, .4fr) minmax(0, 1fr); gap: 30px; }
.section-heading-grid h2, .categories h2, .technology h2, .contact h2 { margin: 0; font-size: clamp(44px, 5.55vw, 82px); font-weight: 630; letter-spacing: -.075em; line-height: 1.01; }
h2 em { font-style: normal; font-weight: 430; }
.section-lead { max-width: 670px; margin: 30px 0 0; color: #555c54; font-size: clamp(17px, 1.8vw, 23px); line-height: 1.48; letter-spacing: -.025em; }

/* Photography */
.photo-story { display: grid; grid-template-columns: minmax(0, 1.17fr) minmax(0, .7fr); align-items: end; gap: clamp(28px, 7vw, 100px); margin-top: clamp(62px, 8vw, 115px); }
figure { margin: 0; }
.photo-visual { position: relative; }
.photo-wrap { position: relative; overflow: hidden; background: var(--white); }
.photo-wrap::after { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 36%, rgba(255,255,255,.23) 50%, transparent 64%); content: ""; pointer-events: none; transform: translateX(-130%); }
.motion-ready .photo-story [data-reveal].is-visible .photo-wrap::after { animation: photo-sheen 1.35s ease .35s both; }
@keyframes photo-sheen { to { transform: translateX(130%); } }
.photo-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.6,.2,1); }
.motion-ready .photo-story figure[data-reveal] .photo-wrap img { transform: scale(1.065); transition-duration: 1.25s; }
.motion-ready .photo-story figure[data-reveal].is-visible .photo-wrap img { transform: scale(1); }
.motion-ready .photo-story figure[data-reveal].is-visible .photo-wrap:hover img { transform: scale(1.035); }
.motion-ready .photo-story-side[data-reveal] .photo-wrap img { transform: scale(1.065); transition-duration: 1.25s; }
.motion-ready .photo-story-side[data-reveal].is-visible .photo-wrap img { transform: scale(1); }
.motion-ready .photo-story-side[data-reveal].is-visible .photo-wrap:hover img { transform: scale(1.035); }
.photo-wrap:hover img { transform: scale(1.035); }
.photo-story-main .photo-wrap { aspect-ratio: 3 / 4; }
.photo-story-main img { object-position: center; }
.photo-story-side .photo-wrap { aspect-ratio: 3 / 4; }
.photo-story-side img { object-position: center; }
.robotic-ribbon {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center;
  width: 50px; margin: 0; padding: 18px 10px; background: var(--lime); color: var(--ink);
  font-size: clamp(11px, 1vw, 14px); font-weight: 800; letter-spacing: .13em; line-height: 1.2;
  text-align: center; text-transform: uppercase; writing-mode: vertical-rl;
}
.robotic-ribbon-left { left: -64px; transform: rotate(180deg); }
.robotic-ribbon-right { right: -64px; }
/* En PC: las dos máquinas centradas, la blanca más grande, el texto arriba de la chica.
   Los tamaños salen del alto de la pantalla, así entran en cualquier monitor. */
@media (min-width: 761px) {
  .photo-story { display: flex; justify-content: center; align-items: flex-end; gap: clamp(32px, 5vw, 90px); }
  .photo-story-main { flex: none; width: min(calc((100svh - 200px) * .75), 44vw, 620px); }
  .photo-story-side { display: flex; flex: none; flex-direction: column; width: min(calc((100svh - 330px) * .75), 32vw, 440px); }
  .photo-story-side .story-note { max-width: none; margin: 0 0 26px; font-size: clamp(17px, 1.5vw, 24px); }
  .photo-story-side figcaption { flex-direction: column; gap: 4px; }
}
}
.photo-black { background: var(--ink); }
.machine-frame { border: 1px solid #bfc5b8; padding: 7px; background: #f6f6f2; box-shadow: 0 20px 55px rgba(23, 26, 23, .08); }
.machine-frame-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 35px; padding: 0 11px; background: var(--ink); color: var(--paper); font-size: 9px; font-weight: 750; letter-spacing: .12em; white-space: nowrap; }
.machine-frame-top > span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.machine-frame-top i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px rgba(214,230,83,.8); }
.machine-stage { position: relative; height: clamp(340px, 36vw, 500px); overflow: hidden; border-inline: 1px solid #c3c9c0; background: radial-gradient(circle at 51% 38%, #f5f6ef 0%, #e8ebe3 47%, #d9ded5 100%); }
.machine-stage[data-theme="blanco"] { background: radial-gradient(circle at 50% 38%, #d3d8cf 0%, #bfc7bc 52%, #aab5aa 100%); }
.machine-stage[data-theme="champagne"] { background: radial-gradient(circle at 50% 38%, #f6f2e9 0%, #e8e1d3 52%, #d7cdb9 100%); }
.machine-stage::before { position: absolute; inset: 7% 9%; border: 1px solid rgba(83, 98, 75, .13); border-radius: 50%; content: ""; pointer-events: none; }
.machine-viewport { position: absolute; z-index: 2; inset: 0; }
.machine-viewport canvas { width: 100%; height: 100%; }
.machine-fallback { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.machine-stage-message { position: absolute; z-index: 3; right: 0; bottom: 18px; left: 0; color: #687166; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-align: center; text-transform: uppercase; pointer-events: none; }
.machine-stage.is-ready .machine-stage-message { display: none; }
.machine-stage.is-unavailable .machine-fallback { opacity: 1; }
.machine-stage.is-unavailable .machine-viewport { display: none; }
.machine-stage.is-unavailable .machine-stage-message { color: var(--white); text-shadow: 0 1px 4px #000; }
.machine-frame-bottom { display: grid; gap: 12px; padding: 15px 11px 10px; border: 1px solid #c3c9c0; border-top: 0; }
.machine-frame-bottom p { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.machine-frame-bottom p span { font-size: 18px; line-height: .7; }
.machine-themes { display: flex; flex-wrap: wrap; gap: 5px; }
.machine-themes button { min-height: 36px; border: 1px solid #c7ccc3; padding: 0 10px; background: transparent; color: var(--ink); font-size: 10px; font-weight: 700; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.machine-themes button:hover { border-color: var(--ink); }
.machine-themes button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--white); }
.hero-machine { display: flex; flex-direction: column; height: 100%; min-height: 520px; }
.hero-machine .machine-stage { flex: 1 1 auto; height: auto; min-height: 350px; }
.hero-machine .machine-frame-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.hero-machine .machine-fallback { object-position: center 49%; }
.photo-story figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 17px; font-size: 11px; line-height: 1.3; }
.photo-story figcaption span:first-child { font-weight: 760; letter-spacing: .11em; }
.photo-story figcaption span:last-child { color: #70766d; }
.story-note { max-width: 300px; margin: 0 0 clamp(35px, 6vw, 94px); font-size: clamp(19px, 2vw, 26px); line-height: 1.3; letter-spacing: -.035em; }

/* Categories */
.categories { background: var(--white); }
.categories-head { display: grid; grid-template-columns: minmax(190px, .4fr) minmax(0, 1fr); gap: 20px 30px; align-items: start; }
.categories-head h2 { grid-column: 2; }
.categories-head > p:last-child { grid-column: 2; max-width: 570px; margin: 18px 0 0; color: #596058; font-size: 19px; line-height: 1.5; }

/* Technology */
.technology { background: var(--ink); color: var(--white); }
.technology .section-label { color: #a8afa5; }
.technology .section-label span { color: var(--lime); }
.technology-top { display: grid; grid-template-columns: minmax(190px, .4fr) minmax(0, 1fr); align-items: start; gap: 22px 30px; }
.technology-top h2 { grid-column: 2; }
.technology-top > p:last-child { grid-column: 2; max-width: 570px; margin: 18px 0 0; color: #b1b8ae; font-size: 19px; line-height: 1.5; }
.technology h2 em { color: var(--lime); }
.technology-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(70px, 8vw, 120px); border-top: 1px solid #5c635b; }
.technology-grid article { display: flex; flex-direction: column; min-height: 320px; padding: 31px clamp(22px, 3vw, 47px) 0 0; }
.motion-ready .technology-grid article:nth-child(2) { transition-delay: .1s; }
.motion-ready .technology-grid article:nth-child(3) { transition-delay: .2s; }
.technology-grid article + article { border-left: 1px solid #5c635b; padding-left: clamp(22px, 3vw, 47px); }
.tech-symbol { position: relative; display: grid; width: 82px; height: 82px; place-items: start; transition: transform .3s ease; }
.tech-symbol::after { position: absolute; bottom: 0; left: 0; width: 33px; height: 1px; background: var(--lime); content: ""; transition: width .3s ease; }
.tech-symbol svg { width: 70px; height: 70px; stroke: #e5e9e2; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tech-symbol .tech-accent { stroke: var(--lime); }
.technology-grid article:hover .tech-symbol { transform: translateY(-5px); }
.motion-ready .technology-grid article[data-reveal].is-visible .tech-symbol { animation: tech-pop .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes tech-pop { from { opacity: 0; transform: translateY(16px) rotate(-7deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
.technology-grid article:hover .tech-symbol::after { width: 75px; }
.technology-grid article:hover .tech-symbol svg { stroke: var(--lime); }
.tech-number { margin-top: auto; color: #9ca499; font-size: 12px; font-weight: 750; }
.technology-grid h3 { margin: 17px 0 10px; font-size: clamp(23px, 2.4vw, 35px); font-weight: 520; letter-spacing: -.045em; }
.technology-grid p { max-width: 310px; margin: 0; color: #b0b7ad; font-size: 15px; line-height: 1.55; }

/* Contact + footer */
/* Contacto y pie en grafito, como la portada: la página abre y cierra con la paleta de Dash */
.contact { background: var(--grafito); color: var(--claro); }
.contact .section-label { color: var(--gris); }
.contact .section-label span { color: var(--claro); }
.contact h2 em { color: var(--verde-dash); }
.contact .button-dark { background: var(--verde-dash); color: var(--ink); }
.contact .button-dark:hover { background: var(--claro); color: var(--ink); }
.contact .button-outline { border-color: var(--claro); color: var(--claro); }
.contact .button-outline:hover { background: var(--claro); color: var(--ink); }
.contact-grid { display: grid; grid-template-columns: minmax(190px, .4fr) minmax(0, 1fr); gap: 30px; }
.contact-kicker { margin: 0 0 24px; }
.contact-content > p:not(.contact-kicker) { max-width: 570px; margin: 30px 0 0; color: var(--gris); font-size: 18px; line-height: 1.5; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 45px; }
.contact-actions .button span { transition: transform .25s ease; }
.contact-actions .button:hover span { transform: translate(3px, -3px); }
.button-outline { border: 1px solid var(--ink); color: var(--ink); }
.button-outline:hover { background: var(--ink); color: var(--white); }
.contact-email { display: inline-block; margin-top: 55px; border-bottom: 1px solid currentColor; padding-bottom: 5px; font-size: clamp(18px, 2vw, 27px); letter-spacing: -.035em; }
.site-footer { border-top: 1px solid rgba(244, 245, 240, .1); background: var(--grafito); color: var(--claro); }
.footer-main { display: grid; grid-template-columns: 1fr 1fr auto; align-items: start; gap: 30px; min-height: 215px; padding-top: 58px; }
.brand-footer .brand-mark { color: var(--ink); }
.footer-main p { margin: 0; color: #c2c7bf; font-size: 14px; line-height: 1.5; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 19px; }
.footer-links a { display: inline-flex; align-items: center; gap: 9px; border-bottom: 1px solid #aab2a7; padding-bottom: 6px; font-size: 14px; }
.footer-links a:hover { color: var(--verde-dash); }
.footer-links img:not(.footer-instagram) { filter: invert(1); }
.footer-links a span { margin-left: 12px; }
/* Equipos inteligentes: entrega y bucle de colores en video (equipo-animado.js); la foto queda sin video o sin movimiento */
.equipo-animado { background: var(--grafito); }
.equipo-animado video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.equipo-animado.en-colores .equipo-entrega { visibility: hidden; }
.equipo-foto { display: none; }
.equipo-animado.sin-video .equipo-foto { display: block; }
.equipo-animado.sin-video video { display: none; }
/* Experiencia conectada: selector de color y persona que pinta (experiencia-colores.js) */
.photo-story .luxury-colores img { transform: none !important; transition: none; }
.luxury-pintura, .luxury-niebla, .grafitero { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* La máquina queda con aire alrededor y se corre apenas para que el personaje pinte desde el costado */
.luxury-capa { position: absolute; inset: 0; transform: translateY(-7.5%) scale(.82); transition: transform .62s cubic-bezier(.22,1,.36,1); }
.luxury-colores.is-corrida .luxury-capa { transform: translate(15%, -7.5%) scale(.82); }
.luxury-base { position: absolute; inset: 0; }
.luxury-pintura.is-fundiendo { opacity: 0; transition: opacity .35s ease; }
.luxury-selector { position: absolute; z-index: 2; right: 0; bottom: 1.4%; left: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 2px; }
.luxury-color-nombre { order: 1; flex: 0 0 100%; color: var(--ink); font-size: 10px; font-weight: 760; letter-spacing: .1em; line-height: 1.2; text-align: center; text-transform: uppercase; }
.luxury-selector button { position: relative; flex: 0 0 min(46px, 23%); aspect-ratio: 1; border: 0; padding: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.luxury-selector button::before { position: absolute; inset: 15%; border-radius: 50%; content: ""; background: radial-gradient(circle at 33% 26%, rgba(255,255,255,.98) 0 5%, rgba(255,255,255,.45) 13%, rgba(255,255,255,0) 30%), radial-gradient(circle at 42% 36%, var(--clara) 0%, var(--media) 52%, var(--oscura) 100%); box-shadow: inset -3px -5px 9px rgba(0,0,0,.26), inset 3px 3px 6px rgba(255,255,255,.3), 0 6px 11px -2px rgba(20,24,20,.42), 0 1px 2px rgba(20,24,20,.3); transition: transform .32s cubic-bezier(.34,1.7,.5,1), box-shadow .25s ease; }
.luxury-selector button::after { position: absolute; inset: 4%; border: 2px solid var(--ink); border-radius: 50%; content: ""; opacity: 0; transform: scale(.7); transition: opacity .2s ease, transform .32s cubic-bezier(.34,1.7,.5,1); }
.luxury-selector button:hover::before { transform: translateY(-3px) scale(1.14); box-shadow: inset -3px -5px 9px rgba(0,0,0,.26), inset 3px 3px 6px rgba(255,255,255,.3), 0 11px 15px -3px rgba(20,24,20,.42), 0 1px 2px rgba(20,24,20,.3); }
.luxury-selector button:active::before { transform: translateY(1px) scale(.88); transition-duration: .08s; }
.luxury-selector button[aria-pressed="true"]::before { transform: scale(1.04); }
.luxury-selector button[aria-pressed="true"]::after { opacity: 1; transform: scale(1); }
.luxury-selector button:focus-visible { outline: 2px solid var(--ink); outline-offset: -1px; border-radius: 50%; }
/* Las esferas saludan una vez y después laten suave hasta que alguien elige */
.luxury-colores.is-saludando button::before { animation: esfera-salta .62s cubic-bezier(.3,1.5,.5,1) both; }
.luxury-colores.is-saludando button:nth-of-type(2)::before { animation-delay: .1s; }
.luxury-colores.is-saludando button:nth-of-type(3)::before { animation-delay: .2s; }
.luxury-colores.is-saludando button:nth-of-type(4)::before { animation-delay: .3s; }
.luxury-colores.is-saludando:not(.ya-eligio) button[aria-pressed="false"]::before { animation: esfera-salta .62s cubic-bezier(.3,1.5,.5,1) both, esfera-late 3.4s ease-in-out 1.4s infinite; }
.luxury-colores.ya-eligio button::before { animation: none; }
@keyframes esfera-salta { 0% { transform: translateY(0); } 42% { transform: translateY(-9px) scale(1.06); } 72% { transform: translateY(1px) scale(.98); } 100% { transform: translateY(0); } }
@keyframes esfera-late { 0%, 62%, 100% { transform: scale(1); } 76% { transform: scale(1.1); } 88% { transform: scale(.98); } }
.luxury-colores.is-recien::after { animation: photo-sheen 1s ease both !important; }
.allies { background: #f6f7f2; }
.allies-head { display: grid; grid-template-columns: minmax(190px, .42fr) 1fr; gap: 28px; align-items: start; }
.allies-head h2 { margin: 0; font-size: clamp(48px, 6vw, 88px); line-height: .96; letter-spacing: -.075em; }
.allies-head h2 em { font-style: normal; color: #778260; }
.allies-head p:last-child { max-width: 600px; margin: 23px 0 0; color: #4a5149; font-size: 18px; line-height: 1.55; }
.allies-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 48px auto 0; }
.ally-card { display: flex; flex: 0 0 var(--ally-card-width, 100%); min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid #d9ddd5; border-radius: 22px; background: #fff; color: var(--ink); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
a.ally-card:hover, a.ally-card:focus-visible { border-color: #b9c0b2; transform: translateY(-3px); box-shadow: 0 12px 30px rgba(23, 26, 23, .07); }
.ally-card-media { display: grid; aspect-ratio: 16 / 10; place-items: center; overflow: hidden; border-bottom: 1px solid #e9ece4; background: var(--ally-color, #fff); }
.ally-card-media img { width: 100%; height: 100%; object-fit: contain; padding: 14% 16%; }
.ally-card-name { display: flex; justify-content: space-between; gap: 15px; align-items: center; min-height: 62px; padding: 14px 18px; font-size: 17px; font-weight: 660; line-height: 1.2; }
.ally-card-name > span { color: #8b9187; font-weight: 400; transition: transform .25s ease, color .25s ease; }
a.ally-card:hover .ally-card-name > span { color: var(--ink); transform: translate(2px, -2px); }
.allies-empty { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 560px; min-height: 120px; margin: 48px auto 0; padding: 24px; border: 1px dashed #c9cec3; border-radius: 22px; color: #666e62; font-size: 15px; text-align: center; }
.allies-empty::before { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--verde-dash, #bbd35b); content: ""; }
.allies-empty[hidden] { display: none; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 25px; border-top: 1px solid #4c524b; padding-block: 18px 25px; color: #929b91; font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.footer-credit { display: inline-flex; align-items: center; gap: 13px; min-height: 44px; color: #b5beb3; white-space: nowrap; transition: color .25s ease, opacity .25s ease; }
.footer-credit img { display: block; width: 112px; height: auto; }
.footer-credit:hover, .footer-credit:focus-visible { color: var(--white); opacity: .82; }
.footer-credit:focus-visible { outline: 2px solid var(--lime); outline-offset: 5px; }

@media (min-width: 761px) and (max-width: 1100px) {
  .header-inner { gap: 16px; }
  .brand-logo { width: 124px; }
  .primary-nav { gap: 12px; font-size: 12px; }
  .nav-contact { gap: 10px; padding-inline: 12px; }
  .nav-direct-contact { gap: 5px; margin-left: -5px; }
  .nav-direct-contact a { width: 36px; height: 36px; }
}

@media (min-width: 1600px) {
  .hero { min-height: 740px; }
}

@media (max-width: 1100px) {
  .hero { min-height: 600px; }
  .hero h1 { font-size: clamp(53px, 6.8vw, 76px); }
  .hero-machine { min-height: 500px; }
}

@media (max-width: 760px) {
  .shell { width: min(100% - 36px, 600px); }
  .section-pad { padding-block: 74px; }
  .header-inner { min-height: 70px; }
  .brand-name { font-size: 22px; }
  .brand-logo { width: 116px; }
  .brand-mark { width: 29px; height: 29px; font-size: 21px; }
  .menu-toggle { z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 46px; height: 46px; border: 1px solid #c7ccc3; border-radius: 50%; background: transparent; cursor: pointer; transition: border-color .3s ease, background .3s ease; }
  .menu-toggle span { width: 21px; height: 2px; background: var(--ink); transition: transform .3s ease, opacity .2s ease, background .3s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }
  body.menu-open .site-header { background: var(--ink); color: var(--white); border-bottom-color: #444c3f; backdrop-filter: none; }
  body.menu-open .menu-toggle { border-color: var(--lime); background: var(--lime); }
  body.menu-open .menu-toggle span { background: var(--ink); }
  .primary-nav { position: fixed; z-index: 1; top: 70px; right: 0; left: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; height: calc(100svh - 70px); min-height: 0; overflow-x: hidden; overflow-y: auto; padding: clamp(28px, 6vh, 55px) max(18px, calc((100vw - 600px) / 2)) 34px; background: var(--ink); color: var(--white); border-top: 1px solid #444c3f; font-size: 24px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-16px); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1), visibility .35s; }
  .primary-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
  .primary-nav::before { position: absolute; right: -125px; bottom: -160px; width: 360px; height: 360px; border: 1px solid rgba(214,230,83,.16); border-radius: 50%; content: ""; pointer-events: none; }
  .nav-overline { position: relative; display: block; margin-bottom: 20px; color: var(--lime); font-size: 10px; font-weight: 750; letter-spacing: .18em; }
  .primary-nav > a:not(.nav-contact) { position: relative; display: grid; grid-template-columns: 1fr 27px; align-items: center; gap: 10px; min-height: clamp(75px, 13svh, 108px); border-bottom: 1px solid #465044; padding: 0 2px; font-size: clamp(34px, 9vw, 55px); font-weight: 570; letter-spacing: -.07em; transition: color .25s ease; }
  .primary-nav > a:not(.nav-contact):hover { color: var(--lime); opacity: 1; }
  .nav-arrow { display: inline; }
  .nav-arrow { justify-self: end; font-size: 24px; font-weight: 400; }
  .nav-contact { position: relative; display: flex; justify-content: space-between; gap: 15px; width: 100%; min-height: 64px; margin-top: 31px; padding: 0 21px; background: var(--lime); color: var(--ink); font-size: 19px; font-weight: 680; }
  .nav-contact .nav-arrow { font-size: 23px; }
  .nav-contact:hover { background: var(--white); color: var(--ink); }

  .nav-direct-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 24px 0 0; border-top: 1px solid #465044; padding-top: 24px; }
  .nav-direct-contact a { display: flex; justify-content: center; gap: 10px; width: auto; height: 52px; border-color: #596359; border-radius: 3px; background: #252a25; color: var(--white); font-size: 14px; font-weight: 600; }
  .nav-direct-contact a:hover { border-color: var(--claro); }
  .nav-direct-contact .nav-direct-whatsapp { background: #25d366; color: var(--ink); }
  .nav-direct-contact .nav-direct-instagram { grid-column: 1 / -1; align-items: center; }
  .nav-direct-contact span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .whatsapp-float { display: grid; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 56px; height: 56px; }
  .whatsapp-float img { width: 28px; height: 28px; }
  .allies-head { display: block; }
  .allies-head h2 { margin-top: 28px; font-size: clamp(43px, 9vw, 65px); }
  .allies-grid { gap: 10px; margin-top: 32px; }
  .ally-card { border-radius: 17px; }
  .ally-card-name { min-height: 52px; padding: 12px; font-size: 14px; }
  .hero { display: flex; flex-direction: column; min-height: 0; gap: 30px; padding-top: 35px; padding-bottom: 42px; }
  .hero-copy { display: contents; }
  .hero .eyebrow { display: none; }
  .hero h1 { order: 0; margin: 0; font-size: clamp(48px, 9.6vw, 74px); }
  .hero-description { order: 2; max-width: 480px; margin: 0; font-size: 17px; }
  .hero-bottom { display: none; }
  .hero-visual { order: 1; }
  .hero-machine { height: clamp(455px, 98vw, 560px); min-height: 0; }
  .hero-machine .machine-stage { min-height: 0; }
  .section-heading-grid, .categories-head, .technology-top, .contact-grid { display: block; }
  .section-heading-grid h2, .categories h2, .technology h2, .contact h2 { margin-top: 29px; font-size: clamp(41px, 8.7vw, 60px); }
  .section-lead { margin-top: 25px; font-size: 18px; }
  .photo-story { grid-template-columns: 1fr; gap: 40px; margin-top: 56px; }
  .photo-story-main .photo-wrap { aspect-ratio: 3 / 4; }
  .photo-story-side { display: block; }
  .story-note { max-width: 420px; margin: 0 0 26px; font-size: 19px; }
  .photo-visual { display: flex; flex-direction: column; }
  .robotic-ribbon, .robotic-ribbon-left, .robotic-ribbon-right {
    position: static; order: -1; width: 100%; min-height: 44px; padding: 10px 14px;
    font-size: 12px; writing-mode: horizontal-tb; transform: none;
  }
  .photo-story-side .photo-wrap { aspect-ratio: 3 / 4; }
  .photo-story figcaption { flex-direction: column; gap: 4px; }
  .categories-head > p:last-child, .technology-top > p:last-child { margin-top: 25px; font-size: 17px; }
  .technology-grid { grid-template-columns: 1fr; margin-top: 64px; }
  .technology-grid article, .technology-grid article + article { display: grid; grid-template-columns: 70px 1fr; grid-template-rows: auto auto auto; min-height: 180px; gap: 0 18px; padding: 27px 0; border-left: 0; }
  .technology-grid article + article { border-top: 1px solid #5c635b; }
  .tech-symbol { grid-row: 1 / 4; width: 58px; height: 60px; }
  .tech-symbol svg { width: 52px; height: 52px; }
  .tech-number { margin: 0; }
  .technology-grid h3 { margin: 12px 0 5px; }
  .technology-grid p { max-width: 420px; }
  .contact-content > p:not(.contact-kicker) { font-size: 18px; }
  .contact-kicker { margin-top: 38px; }
  .contact-actions { flex-direction: column; align-items: stretch; margin-top: 35px; }
  .contact-email { margin-top: 40px; font-size: 18px; }
  .footer-main { grid-template-columns: 1fr auto; min-height: 0; padding-block: 50px 60px; }
  .footer-main p { grid-column: 1 / -1; grid-row: 2; }
  .footer-bottom { flex-wrap: wrap; gap: 10px 20px; }
  .footer-credit { margin-left: auto; }
}

@media (max-width: 420px) {
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 10px; }
  .footer-credit { margin-left: 0; }
  .hero h1 { font-size: 11.4vw; }
  .hero { gap: 31px; }
  .hero-machine { height: 465px; }
  .hero-machine .machine-frame-bottom { display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .hero-machine .machine-themes { width: 100%; flex-wrap: nowrap; }
  .hero-machine .machine-themes button { flex: 1; min-height: 44px; padding-inline: 5px; }
  .photo-story-side { display: block; }
  .story-note { max-width: 280px; margin-bottom: 26px; }
  .photo-story-side .photo-wrap { aspect-ratio: 3 / 4; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-links { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .motion-ready [data-reveal] { opacity: 1; transform: none; }
}