/* Aurea Digital — sito aziendale.
   Da dove viene ogni scelta:
   · carta scura in rilievo, piste grigie e oro, fascio di linee → i post Instagram di Aurea
   · Poppins, oro #C8963E → pagina di accesso del gestionale · Bebas Neue, Space Mono → post e storie Instagram
   · «/>» → il segno dentro la A del logo
   · tipografia enorme, bottone rotondo che gira, frasi a due toni → artegrafstampa.it
   · contatore d'ingresso → obys.agency · numeretti nel menu, logo da bordo a bordo → basement.studio
   · colonne del footer con righe lunghe, coordinate e ora locale → locomotive.ca */

:root {
  --bg: #121212;
  --bg-deep: #0b0b0c;
  --line: rgba(255, 255, 255, .1);
  --gold: #C8963E;
  --gold-logo: #BA9C62;
  --gold-hi: #E7BD6E;
  --text: rgba(255, 255, 255, .93);
  --text-2: rgba(255, 255, 255, .6);
  --text-3: rgba(255, 255, 255, .38);
  --live: #3fb67a;
  --wrap: 1320px;
  --nav-h: 60px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --mono: "Space Mono", ui-monospace, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--bg) url("../assets/texture-carta.webp") repeat;
  background-size: 768px;
  color: var(--text);
  font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
em { font-style: normal; color: var(--gold); }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--gold); color: #111; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; border-radius: 6px; }
.btn:focus-visible, .badge:focus-visible, .social:focus-visible { border-radius: 999px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: 40px; }
.gold { color: var(--gold); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.display { font-family: "Bebas Neue", Poppins, sans-serif; font-weight: 400; letter-spacing: .01em; line-height: .9; text-shadow: 0 6px 0 rgba(0, 0, 0, .55); }

/* ── bottoni ── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: 54px; padding: 0 30px; border-radius: 999px; overflow: hidden; isolation: isolate;
  font: 600 15px/1 Poppins, sans-serif; letter-spacing: .01em; border: 1px solid transparent; cursor: pointer;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.btn::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1; transform: translateY(102%); transition: transform .5s var(--ease); }
.btn:hover::before { transform: none; }
.btn-gold { background: var(--gold); color: #16130d; }
.btn-gold::before { background: #f3dfb4; }
.btn-line { color: var(--gold-hi); border-color: rgba(200, 150, 62, .5); }
.btn-line::before { background: var(--gold); }
.btn-line:hover { color: #16130d; }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }

.link-arrow { color: var(--text-2); font-weight: 500; font-size: 15px; transition: color .25s; }
.link-arrow span { display: inline-block; transition: transform .3s var(--ease); }
.link-arrow:hover { color: var(--gold-hi); }
.link-arrow:hover span { transform: translateX(5px); }

/* ── intro ── */
.intro {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--bg) url("../assets/texture-carta.webp") repeat; background-size: 768px;
  clip-path: inset(0 0 0 0); transition: clip-path 1.05s cubic-bezier(.76, 0, .24, 1);
}
.intro.is-done { clip-path: inset(0 0 100% 0); }
.intro-in { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.intro-in img { width: min(300px, 62vw); opacity: 0; transform: translateY(14px); animation: introUp .9s var(--ease) .1s forwards; }
.intro-in p { color: var(--text-2); opacity: 0; letter-spacing: .5em; animation: introText 1s var(--ease) .5s forwards; }
.intro-count { position: absolute; right: 40px; bottom: 34px; font: 400 clamp(64px, 11vw, 160px)/.8 "Bebas Neue", sans-serif; color: var(--gold); }
.intro-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .06); }
.intro-bar i { display: block; height: 100%; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; }
@keyframes introUp { to { opacity: 1; transform: none; } }
@keyframes introText { to { opacity: 1; letter-spacing: .2em; } }

/* ── cursore ── */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .has-cursor, .has-cursor a, .has-cursor button { cursor: none; }
  .cursor { display: block; position: fixed; inset: 0; z-index: 150; pointer-events: none; }
  .cursor-dot, .cursor-ring { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
  .cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--gold-hi); transition: opacity .3s; }
  .cursor-ring {
    display: grid; place-items: center; width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid rgba(231, 189, 110, .55);
    transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), background .4s, border-color .4s, opacity .3s;
  }
  .cursor-label { font: 600 12px Poppins, sans-serif; color: #16130d; opacity: 0; transition: opacity .25s; white-space: nowrap; }
  .cursor.is-link .cursor-ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(200, 150, 62, .12); border-color: transparent; }
  .cursor.is-label .cursor-ring { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--gold); border-color: transparent; }
  .cursor.is-label .cursor-label { opacity: 1; }
  .cursor.is-label .cursor-dot, .cursor.is-lens .cursor-ring, .cursor.is-lens .cursor-dot { opacity: 0; }
}

/* ── navbar ── */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h); transition: background .35s, border-color .35s, transform .5s var(--ease); border-bottom: 1px solid transparent; }
.nav.is-scrolled { background: rgba(12, 12, 13, .8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.nav-in { height: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: 40px; display: flex; align-items: center; gap: 48px; }
.nav-logo img { height: 30px; width: auto; }
.nav-links { display: flex; align-items: baseline; margin-right: auto; }
.nav-links a { font-size: 14px; color: var(--text-2); transition: color .25s; }
.nav-links a:hover { color: #fff; }
.nav-links sup { font: 400 10px var(--mono); color: var(--gold); margin: 0 26px 0 3px; top: -.7em; }
.nav-actions { display: flex; align-items: center; gap: 22px; }
.nav-status { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-2); }
.nav-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: ping 2.4s infinite; }
.nav-login { min-height: 44px; background: none; border: 0; padding: 6px 8px; font-size: 14px; font-weight: 500; cursor: pointer; }
.nav-login:hover { color: var(--gold-hi); }

.login { position: relative; }
.login-menu { position: absolute; right: -8px; top: calc(100% + 16px); width: 250px; padding: 6px; background: #19191b; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.login-item { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 10px; }
a.login-item:hover { background: rgba(200, 150, 62, .1); }
.login-name { font-size: 15px; color: #fff; }
.login-name b { color: var(--gold); font-weight: 600; }
.login-hint { font-size: 12px; color: var(--text-3); }
.login-item.is-off { opacity: .5; }

.burger { display: none; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: #fff; transition: transform .25s, top .25s; }
.burger span:first-child { top: 15px; }
.burger span:last-child { top: 24px; }
.burger[aria-expanded="true"] span:first-child { top: 19.5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 19.5px; transform: rotate(-45deg); }

/* ── piste, piazzole, fascio di linee ── */
.trace { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: .75; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke .3s, stroke-opacity .3s, stroke-width .3s; }
.trace-strong { stroke-width: 3; stroke-opacity: 1; }
.is-drawn .trace { animation: draw 1.4s cubic-bezier(.6, .1, .2, 1) forwards; }
.is-drawn #p1, .is-drawn #p4, .is-drawn #b2 { animation-delay: .2s; }
.is-drawn #p2, .is-drawn #p5, .is-drawn #b3 { animation-delay: .35s; }
.is-drawn #p3, .is-drawn #p6, .is-drawn #b4 { animation-delay: .5s; }
.is-drawn #b5 { animation-delay: 1s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.pads circle { fill: var(--bg); stroke: var(--gold-logo); stroke-width: 4; transition: fill .3s, stroke .3s; }
.pad-big { fill: var(--gold); }
.pad-ring { fill: none; stroke: var(--gold); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ring 2.4s ease-out infinite; }
@keyframes ring { from { transform: scale(1); opacity: .8; } to { transform: scale(2.4); opacity: 0; } }
.pulses circle { fill: #ffe2a6; filter: drop-shadow(0 0 4px rgba(255, 196, 90, .9)); opacity: 0; transition: opacity .6s 1.6s; }
.is-drawn .pulses circle { opacity: 1; }
.labels text { font: 500 14px Poppins, sans-serif; letter-spacing: .2em; fill: rgba(255, 255, 255, .72); transition: fill .3s; }
.pins rect { fill: var(--gold-logo); opacity: .8; }

.circuit.has-focus .trace { stroke-opacity: .18; }
.circuit.has-focus .trace.is-on { stroke: var(--gold-hi); stroke-opacity: 1; stroke-width: 3.2; }
.circuit.has-focus .labels text { fill: rgba(255, 255, 255, .3); }
.circuit.has-focus .labels text.is-on { fill: var(--gold-hi); }
.pads circle.is-on { fill: var(--gold); stroke: var(--gold-hi); }

.waves { position: absolute; pointer-events: none; overflow: visible; }
.waves path { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.waves path.is-gold { stroke: rgba(200, 150, 62, .5); }

.corner { position: absolute; pointer-events: none; fill: none; z-index: 1; }
.corner path { stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.corner-grey path { stroke: #4a4a4a; }
.corner-grey circle { fill: #4a4a4a; }
.corner-gold path { stroke: var(--gold-logo); stroke-width: 2.4; }
.corner-gold circle { fill: var(--gold-logo); }
.corner circle { opacity: 0; transition: opacity .6s 1.2s; }
.is-ready .corner path { animation: draw 2.2s cubic-bezier(.6, .1, .2, 1) .3s forwards; }
.is-ready .corner circle { opacity: 1; }

/* ── hero ── */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-block: calc(var(--nav-h) + 48px) 100px; overflow: hidden; }
.pcb { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero .waves { top: -5%; right: -4%; width: 58%; height: 112%; }
.corner-grey { top: calc(var(--nav-h) + 20px); left: max(-60px, calc(max(40px, (100vw - var(--wrap)) / 2 + 40px) - 104px)); width: 92px; height: auto; opacity: .75; }
.corner-gold { bottom: 0; left: 0; width: 250px; height: auto; }
.hero-in { position: relative; z-index: 2; }

.prompt { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .14em; color: var(--text-2); opacity: 0; transition: opacity .8s var(--ease) .15s; }
.prompt .gold { font-weight: 700; letter-spacing: 0; }
.caret { color: var(--gold); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.hero-title { margin-top: 26px; font-size: clamp(54px, 9.6vw, 152px); font-weight: 600; letter-spacing: -.045em; line-height: .96; }
.line { display: block; overflow: hidden; padding: .06em 0 .12em; margin: -.06em 0 -.12em; }
.word { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; transform: translateY(115%); transition: transform 1.1s var(--ease), translate .45s var(--ease), color .3s; }
.is-ready .ch { transform: none; }

.hero-rotate { margin-top: 30px; font-size: clamp(22px, 2.4vw, 32px); font-weight: 300; line-height: 1.3; color: var(--text-2); }
.rotator { color: var(--gold); font-weight: 500; }
.hero-sub { margin-top: 16px; max-width: 34em; font-size: 17px; font-weight: 300; color: var(--text-2); }
.hero-cta { margin-top: 38px; display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.hero-rotate, .hero-sub, .hero-cta { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.hero-rotate { transition-delay: .5s; }
.hero-sub { transition-delay: .6s; }
.hero-cta { transition-delay: .7s; }
.is-ready .prompt, .is-ready .hero-rotate, .is-ready .hero-sub, .is-ready .hero-cta { opacity: 1; transform: none; }

/* bottone rotondo che gira */
.badge { position: relative; display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; }
.badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 16s linear infinite; }
.badge text { font: 400 9px var(--mono); letter-spacing: .06em; fill: var(--text-2); }
.badge-arrow { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(200, 150, 62, .5); color: var(--gold-hi); font-size: 20px; transition: background .35s, color .35s, transform .35s var(--ease); }
.badge:hover .badge-arrow { background: var(--gold); color: #16130d; transform: scale(1.12); }
.badge:hover svg { animation-duration: 6s; }
@keyframes spin { to { transform: rotate(360deg); } }
.badge-hero { position: absolute; right: 40px; bottom: 40px; z-index: 3; }

/* ── nastro ── */
.marquee { position: relative; overflow: hidden; border-block: 1px solid var(--line); background: rgba(0, 0, 0, .3); padding-block: 18px; }
.marquee-track { display: flex; align-items: center; gap: 44px; width: max-content; will-change: transform; }
.marquee-track span { font: 400 clamp(46px, 6vw, 92px)/1 "Bebas Neue", sans-serif; letter-spacing: .01em; color: var(--text); white-space: nowrap; }
.marquee-track span.out { color: transparent; -webkit-text-stroke: 1px rgba(200, 150, 62, .8); }
.marquee-track i { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 4px solid var(--gold-logo); }

/* ── sezioni ── */
.sec { position: relative; padding-block: 150px; }

.services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.services-visual { position: sticky; top: calc(var(--nav-h) + 40px); }
.services-visual .display { font-size: clamp(56px, 6.4vw, 108px); }
.circuit { width: 100%; max-width: 560px; height: auto; margin-top: 40px; overflow: visible; }

.service { position: relative; padding: 32px 0; border-bottom: 1px solid var(--line); }
.service:first-child { border-top: 1px solid var(--line); }
.service-tag { display: block; color: var(--gold-logo); font-size: 11px; margin-bottom: 10px; opacity: .75; transition: opacity .3s; }
.service h3 {
  font-size: clamp(30px, 3.2vw, 48px); font-weight: 500; letter-spacing: -.03em;
  background: linear-gradient(90deg, var(--gold-hi) 0 50%, var(--text) 50% 100%); background-size: 200% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: background-position .6s var(--ease), transform .5s var(--ease);
}
.service p { margin-top: 10px; max-width: 30em; color: var(--text-2); font-weight: 300; transition: color .4s; }
.service::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.service:hover::before { transform: scaleX(1); }
.service:hover h3 { background-position: 0 0; transform: translateX(12px); }
.service:hover p { color: var(--text); }
.service:hover .service-tag { opacity: 1; }

/* manifesto */
.manifesto { padding-block: 120px; }
.say { font-size: clamp(34px, 5.2vw, 78px); font-weight: 300; letter-spacing: -.035em; line-height: 1.12; max-width: 16em; }
.say + .say { margin-top: .6em; }
.say:nth-child(2) { margin-left: auto; text-align: right; }
.say strong { font-weight: 600; color: var(--gold); }
.say .w { opacity: .14; transition: opacity .35s linear; }
.say .w.is-on { opacity: 1; }

/* ── la piantina che si apre ── */
.showcase { position: relative; height: 260vh; }
.showcase-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.showcase-title { position: absolute; left: 0; right: 0; top: 12vh; text-align: center; font-size: clamp(72px, 11vw, 190px); z-index: 1; will-change: transform, opacity; }
.showcase-media {
  position: absolute; inset: 0; z-index: 2; overflow: hidden;
  clip-path: inset(40vh 20vw 8vh 20vw round 22px); will-change: clip-path;
}
.showcase-media img { width: 100%; height: 100%; object-fit: cover; object-position: 12% 50%; transform-origin: center; will-change: transform; }
.showcase-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, 0) 38%); opacity: 0; transition: opacity .5s; }
.showcase-caption { position: absolute; left: 40px; bottom: 40px; opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
.showcase.is-open .showcase-shade { opacity: 1; }
.showcase.is-open .showcase-caption { opacity: 1; transform: none; }
.caption-hint { margin-top: 12px; color: var(--gold-hi); }
.lens {
  position: absolute; left: 0; top: 0; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; z-index: 3;
  pointer-events: none; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .4s var(--ease);
  background-repeat: no-repeat; box-shadow: 0 0 0 2px var(--gold), 0 0 0 9px rgba(200, 150, 62, .18), 0 24px 50px rgba(0, 0, 0, .6);
}
.showcase-media.is-lens .lens { opacity: 1; transform: scale(1); }

/* prodotti */
.products { padding-top: 130px; }
.product { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.product + .product { margin-top: 170px; align-items: center; }
.product-next { grid-template-columns: 1.1fr .9fr; }
.wordmark { display: flex; align-items: center; gap: 12px; font-size: clamp(30px, 3vw, 44px); font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.wordmark img { width: 34px; height: auto; }
.wordmark b { color: var(--gold); font-weight: 600; }
.status { display: flex; align-items: center; gap: 10px; color: var(--text-2); }
.wordmark + .status { margin-top: 18px; }
.status i { width: 8px; height: 8px; border-radius: 50%; }
.status-live i { background: var(--live); animation: ping 2.4s infinite; }
.status-soon i { border: 1.5px solid var(--gold); }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(63, 182, 122, .6); } 70% { box-shadow: 0 0 0 8px rgba(63, 182, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(63, 182, 122, 0); } }
.product h3 { margin-top: 26px; font-size: clamp(30px, 3.2vw, 48px); letter-spacing: -.035em; }
.product-text { margin-top: 18px; color: var(--text-2); font-weight: 300; font-size: 17px; max-width: 30em; }
.product-cta { margin-top: 36px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.features li { position: relative; display: flex; align-items: baseline; gap: 22px; padding: 26px 0; border-top: 1px solid var(--line); font-size: clamp(22px, 2.2vw, 32px); font-weight: 500; letter-spacing: -.02em; transition: color .3s, padding-left .5s var(--ease); }
.features li:last-child { border-bottom: 1px solid var(--line); }
.features li .mono { color: var(--gold-logo); font-size: 12px; }
.features li:hover { color: var(--gold-hi); padding-left: 12px; }
.product-diagram svg { width: 100%; height: auto; overflow: visible; }
.labels-left text { font-size: 13px; }

/* contatti */
.contact { overflow: hidden; padding-block: 170px; border-top: 1px solid var(--line); }
.waves-contact { top: -10%; left: -6%; width: 50%; height: 120%; transform: scaleX(-1); opacity: .8; }
.contact-in { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.contact-title { font-size: clamp(54px, 8.6vw, 140px); letter-spacing: -.045em; line-height: .98; }
.contact-sub { margin-top: 28px; font-size: 18px; font-weight: 300; color: var(--text-2); }
.contact-mail { position: relative; display: inline-block; margin-top: 22px; padding-bottom: 6px; font-size: clamp(22px, 2.4vw, 32px); font-weight: 500; letter-spacing: -.02em; color: var(--gold-hi); }
.contact-mail::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(.3); transform-origin: left; transition: transform .6s var(--ease); }
.contact-mail:hover::after { transform: scaleX(1); }
.contact-mail span { display: inline-block; transition: transform .4s var(--ease); }
.contact-mail:hover span { transform: translate(4px, -4px); }
.badge-contact { width: 176px; height: 176px; flex: none; }
.badge-contact .badge-arrow { width: 74px; height: 74px; font-size: 26px; background: var(--gold); color: #16130d; border-color: transparent; }
.badge-contact:hover .badge-arrow { background: #f3dfb4; }

/* ── footer ── */
.foot { position: relative; background: var(--bg-deep); border-top: 1px solid var(--line); padding-top: 110px; overflow: hidden; }
.foot-top { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: end; padding-bottom: 90px; }
.foot-claim { font-size: clamp(44px, 6vw, 96px); font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.foot-reach { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.foot-big-link { position: relative; display: inline-flex; align-items: center; gap: .3em; font-size: clamp(26px, 2.8vw, 42px); font-weight: 500; letter-spacing: -.025em; padding-bottom: 8px; }
.foot-big-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.foot-big-link::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); z-index: 1; }
.foot-big-link:hover::before { transform: scaleX(1); }
.foot-big-link .arrow { color: var(--gold); transition: transform .4s var(--ease); }
.foot-big-link:hover .arrow { transform: translate(4px, -4px); }
.ig { width: .95em; height: .95em; fill: none; stroke: var(--gold); stroke-width: 1.8; }
.ig-dot { fill: var(--gold); stroke: none; }

.foot-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--text-2); }
.foot-h { align-self: stretch; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 500; color: var(--text); }
.foot-col a { position: relative; transition: color .25s, transform .35s var(--ease); }
.foot-col a:hover { color: var(--gold-hi); transform: translateX(4px); }
.foot-col small { margin-left: 6px; font-size: 10px; color: var(--text-3); }
.socials { display: flex; gap: 10px; margin-bottom: 4px; }
.social { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(200, 150, 62, .45); transition: background .3s, border-color .3s; }
.social svg { width: 20px; height: 20px; fill: none; stroke: var(--gold-hi); stroke-width: 1.8; transition: stroke .3s; }
.social .ig-dot { fill: var(--gold-hi); }
.foot-col .social:hover { background: var(--gold); border-color: var(--gold); transform: none; }
.social:hover svg { stroke: #16130d; }
.social:hover .ig-dot { fill: #16130d; }

.foot-meta { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 90px; padding-block: 18px; border-block: 1px solid var(--line); color: var(--text-3); }
.foot-meta b { font-weight: 400; color: var(--gold-hi); margin-left: 8px; }
.to-top { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--text-2); letter-spacing: inherit; text-transform: inherit; transition: color .25s; }
.to-top span { display: inline-block; margin-left: 6px; transition: transform .35s var(--ease); }
.to-top:hover { color: var(--gold-hi); }
.to-top:hover span { transform: translateY(-4px); }

.foot-logo-wrap { max-width: 1680px; margin: 0 auto; padding: 56px 24px 0; }
.foot-logo { display: block; width: 100%; height: auto; overflow: visible; }
.foot-logo .lg-white { fill: #efefef; }
.foot-logo .lg-gold { fill: var(--gold-logo); }
.foot-logo path { transform: translateY(18%); opacity: 0; transition: transform 1.2s var(--ease), opacity 1.2s var(--ease), fill .4s; }
.foot-logo.is-in path { transform: none; opacity: 1; }
.foot-logo.is-in .lg-gold { animation: glow 3.2s ease-in-out 1.6s infinite; }
@keyframes glow { 50% { fill: var(--gold-hi); filter: drop-shadow(0 0 60px rgba(231, 189, 110, .45)); } }

.foot-legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 26px 30px; font-size: 13px; color: var(--text-3); }
.foot-legal-links { display: flex; gap: 24px; }
.foot-legal a:hover { color: var(--gold-hi); }

/* comparsa */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .reveal, .prompt, .hero-rotate, .hero-sub, .hero-cta { opacity: 1; transform: none; transition: none; }
  .ch { transform: none; transition: none; }
  .trace, .corner path { stroke-dashoffset: 0; animation: none !important; }
  .corner circle { opacity: 1; }
  .pulses { display: none; }
  .badge svg, .status-live i, .pad-ring, .caret, .nav-status i { animation: none; }
  .say .w { opacity: 1; }
  .foot-logo path { transform: none; opacity: 1; }
}

/* ── tablet ── */
@media (max-width: 1100px) {
  .nav-status { display: none; }
}
@media (max-width: 1024px) {
  .wrap, .nav-in { padding-inline: 28px; }
  .nav-links { display: none; }
  .nav-in { gap: 16px; justify-content: space-between; }
  .burger { display: block; }
  .nav.is-open { background: var(--bg-deep); }
  .nav.is-open .nav-links { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--bg-deep); border-bottom: 1px solid var(--line); padding: 8px 28px 20px; }
  .nav.is-open .nav-links a { padding: 14px 0; font-size: 18px; color: #fff; border-bottom: 1px solid var(--line); }
  .nav.is-open .nav-links sup { display: none; }

  .hero .waves { width: 80%; opacity: .6; }
  .corner-grey { display: none; }
  .badge-hero { display: none; }
  .services-grid { grid-template-columns: 1fr; gap: 56px; }
  .services-visual { position: static; }
  .circuit { margin-inline: auto; display: block; }

  .showcase { height: auto; padding-top: 110px; }
  .showcase-sticky { position: static; height: auto; overflow: visible; }
  .showcase-title { position: static; font-size: clamp(64px, 14vw, 120px); padding-inline: 28px; }
  .showcase-media { position: relative; inset: auto; margin: 48px 28px 0; clip-path: none; border-radius: 16px; }
  .showcase-media img { height: auto; transform: none !important; }
  .showcase-shade { opacity: 1; }
  .showcase-caption { position: absolute; left: 20px; bottom: 18px; opacity: 1; transform: none; }
  .caption-hint { display: none; }
  .showcase-caption .wordmark { font-size: 22px; gap: 8px; }
  .showcase-caption .wordmark img { width: 22px; }
  .foot-col small { display: block; margin: 2px 0 0; }

  .product, .product-next { grid-template-columns: 1fr; gap: 56px; }
  .product-next .product-diagram { order: 2; }
  .contact-in { flex-direction: column; align-items: flex-start; gap: 56px; }
  .foot-top { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
}

/* ── telefono ── */
@media (max-width: 600px) {
  .wrap, .nav-in { padding-inline: 20px; }
  .nav-demo { display: none; }
  .nav-logo img { height: 26px; }
  .intro-count { right: 20px; bottom: 24px; }
  .hero { padding-block: calc(var(--nav-h) + 56px) 72px; align-items: flex-start; }
  .hero .waves { width: 120%; right: -50%; opacity: .45; }
  .corner-grey { width: 64px; opacity: .55; }
  .corner-gold { width: 150px; }
  .prompt { font-size: 10.5px; letter-spacing: .08em; }
  .hero-title { line-height: 1.1; }
  .hero-sub { font-size: 16px; }
  .sec { padding-block: 96px; }
  .service { padding: 26px 0; }
  .labels text { font-size: 17px; }
  .say:nth-child(2) { text-align: left; }
  .showcase-title { padding-inline: 20px; }
  .showcase-media { margin-inline: 20px; }
  .wordmark { font-size: 26px; }
  .wordmark img { width: 26px; }
  .product + .product { margin-top: 110px; }
  .product-cta .btn { width: 100%; }
  .labels-left text { font-size: 16px; }
  .contact { padding-block: 110px; }
  .badge-contact { width: 150px; height: 150px; }
  .foot { padding-top: 80px; }
  .foot-top { padding-bottom: 64px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-meta { flex-direction: column; align-items: flex-start; }
  .foot-logo-wrap { padding: 40px 12px 0; }
  .foot-legal { flex-direction: column; }
}