/* =========================================================
   MCS · Marketing Coaching Service
   Dirección: Editorial Luxury — espresso, crema y oro
   ========================================================= */

/* ---------- Fuentes (alojadas en el sitio, subconjunto latino) ---------- */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../assets/fonts/geist.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../assets/fonts/geist-mono.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/instrument-serif.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/instrument-serif-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #0e0c09;
  --ink-2: #15120d;
  --ink-3: #1d1912;
  --cream: #f3ecdf;
  --cream-2: #e9dfcc;
  --paper-core: #fbf7ef;
  --text-dark: #1a150e;

  --gold-1: #9c6b22;
  --gold-2: #c79a34;
  --gold-3: #ddb968;
  --gold-4: #ebd08a;
  --gold-grad: linear-gradient(120deg, var(--gold-1) 0%, var(--gold-2) 42%, var(--gold-3) 78%, var(--gold-4) 100%);

  --on-dark: rgba(243, 236, 223, 0.94);
  --on-dark-muted: rgba(243, 236, 223, 0.58);
  --on-dark-faint: rgba(243, 236, 223, 0.08);
  --on-paper-muted: rgba(26, 21, 14, 0.62);
  --on-paper-faint: rgba(26, 21, 14, 0.08);

  --f-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-sans: "Geist", "Segoe UI Variable", system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "Cascadia Mono", monospace;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.45, 0, 0.2, 1);

  --r-xl: 2rem;
  --r-bezel: 0.375rem;
  --section-y: clamp(6rem, 12vw, 10.5rem);

  --z-nav: 40;
  --z-menu: 35;
  --z-float: 30;
  --z-grain: 50;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--f-sans);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

/* Film grain — fixed, non-interactive */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
em { font-style: italic; }

::selection { background: var(--gold-3); color: var(--ink); }

:focus-visible {
  outline: 1.5px solid var(--gold-3);
  outline-offset: 3px;
  border-radius: 0.5rem;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 60;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  transition: transform 0.5s var(--ease);
}
.skip:focus { transform: translateY(5rem); }

.container {
  width: min(100% - 3rem, 1320px);
  margin-inline: auto;
}

.section { padding-block: var(--section-y); position: relative; }

.paper {
  background: var(--cream);
  color: var(--text-dark);
}

/* ---------- Type ---------- */
.display,
.title {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.display {
  font-size: clamp(3.6rem, 8.6vw, 9.25rem);
  line-height: 0.9;
}

.title {
  font-size: clamp(2.75rem, 6vw, 5.75rem);
  line-height: 0.95;
}

.title em,
.display em { padding-right: 0.06em; }

.gold-text {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  line-height: 1.6;
  color: var(--on-dark-muted);
  max-width: 34rem;
  font-weight: 300;
}
.paper .lead { color: var(--on-paper-muted); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-paper-muted);
  background: rgba(26, 21, 14, 0.04);
  box-shadow: inset 0 0 0 1px var(--on-paper-faint);
}
.eyebrow--dark {
  color: var(--gold-3);
  background: rgba(221, 185, 104, 0.06);
  box-shadow: inset 0 0 0 1px rgba(221, 185, 104, 0.16);
}

.pulse {
  position: relative;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--gold-3);
}
.pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gold-3);
  animation: pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* ---------- Buttons (island + button-in-button) ---------- */
.btn {
  --mx: 0px;
  --my: 0px;
  --s: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.45rem 0.45rem 0.45rem 1.5rem;
  border: 0;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transform: translate3d(var(--mx), var(--my), 0) scale(var(--s));
  transition: transform 0.7s var(--ease), background-color 0.6s var(--ease), box-shadow 0.6s var(--ease), color 0.6s var(--ease);
}
.btn:active { --s: 0.98; }

.btn__ico {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  transition: transform 0.7s var(--ease), background-color 0.6s var(--ease);
}
.btn__ico svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn:hover .btn__ico { transform: translate(3px, -2px) scale(1.06); }

.btn--gold {
  color: #1c1405;
  background: var(--gold-grad);
  box-shadow: inset 0 1px 0 rgba(255, 246, 220, 0.45), 0 18px 40px -18px rgba(199, 154, 52, 0.55);
}
.btn--gold .btn__ico { background: rgba(28, 20, 5, 0.12); }
.btn--gold:hover { box-shadow: inset 0 1px 0 rgba(255, 246, 220, 0.55), 0 22px 50px -16px rgba(221, 185, 104, 0.6); }

.btn--ghost {
  color: var(--on-dark);
  background: rgba(243, 236, 223, 0.03);
  box-shadow: inset 0 0 0 1px rgba(243, 236, 223, 0.14);
}
.btn--ghost .btn__ico { background: rgba(243, 236, 223, 0.08); }
.btn--ghost:hover { background: rgba(243, 236, 223, 0.07); }

.btn--ink {
  color: var(--cream);
  background: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 40px -20px rgba(14, 12, 9, 0.6);
}
.btn--ink .btn__ico { background: var(--gold-grad); color: #1c1405; }

.btn--sm { padding: 0.3rem 0.3rem 0.3rem 1.1rem; font-size: 0.85rem; gap: 0.6rem; }
.btn--sm .btn__ico { width: 1.95rem; height: 1.95rem; }

/* ---------- Double-bezel ---------- */
.bezel {
  padding: var(--r-bezel);
  border-radius: var(--r-xl);
  background: rgba(243, 236, 223, 0.03);
  box-shadow: inset 0 0 0 1px rgba(243, 236, 223, 0.07);
  height: 100%;
}
.bezel__core {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--r-xl) - var(--r-bezel));
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.06);
}
.paper .bezel {
  background: rgba(26, 21, 14, 0.035);
  box-shadow: inset 0 0 0 1px rgba(26, 21, 14, 0.06);
}
.paper .bezel__core {
  background: var(--paper-core);
  box-shadow: inset 0 1px 1px #fff, 0 40px 80px -40px rgba(80, 55, 15, 0.22);
}

/* ---------- Nav island ---------- */
.nav {
  position: fixed;
  inset: 1.1rem 0 auto;
  z-index: var(--z-nav);
  display: flex;
  justify-content: center;
  padding-inline: 1rem;
  pointer-events: none;
}
.nav__island {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: 0.4rem 0.4rem 0.4rem 1rem;
  border-radius: 999px;
  background: rgba(18, 15, 11, 0.58);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(243, 236, 223, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 20px 50px -25px rgba(0, 0, 0, 0.6);
  transition: transform 0.8s var(--ease), background-color 0.6s var(--ease);
}
.nav.is-scrolled .nav__island { background: rgba(14, 12, 9, 0.78); }

.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand img { width: 2.1rem; height: auto; }
.brand__text {
  display: flex;
  flex-direction: column;
  font-family: var(--f-display);
  font-size: 1.35rem;
  line-height: 0.9;
  letter-spacing: 0.04em;
  color: var(--cream);
}
.brand__text small {
  font-family: var(--f-mono);
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin-top: 0.2rem;
}

.nav__links { display: flex; gap: 0.25rem; }
.nav__links a {
  display: block;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  font-size: 0.86rem;
  color: var(--on-dark-muted);
  transition: color 0.5s var(--ease), background-color 0.5s var(--ease);
}
.nav__links a:hover { color: var(--cream); background: rgba(243, 236, 223, 0.06); }

.burger {
  position: relative;
  width: 2.55rem;
  height: 2.55rem;
  border: 0;
  border-radius: 999px;
  background: rgba(243, 236, 223, 0.07);
  cursor: pointer;
  display: none;
  transition: background-color 0.5s var(--ease);
}
.burger:hover { background: rgba(243, 236, 223, 0.12); }
.burger span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1rem;
  height: 1.5px;
  border-radius: 2px;
  background: var(--cream);
  transition: transform 0.7s var(--ease);
}
.burger span:nth-child(1) { transform: translate(-50%, -4px); }
.burger span:nth-child(2) { transform: translate(-50%, 3px); }
.is-menu-open .burger span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
.is-menu-open .burger span:nth-child(2) { transform: translate(-50%, 0) rotate(-45deg); }

/* ---------- Fullscreen menu ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  align-items: center;
  background: rgba(10, 8, 6, 0.86);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s var(--ease), visibility 0s linear 0.7s;
}
.is-menu-open .menu {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s var(--ease), visibility 0s;
}
.menu__inner { padding-block: 7rem 3rem; }
.menu__list li { overflow: hidden; border-bottom: 1px solid rgba(243, 236, 223, 0.07); }
.menu__list a {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding-block: 0.5rem;
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 9vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  transform: translateY(105%);
  opacity: 0;
  transition: transform 0.9s var(--ease), opacity 0.9s var(--ease), color 0.5s var(--ease);
}
.menu__list a:hover { color: var(--gold-3); }
.menu__list small { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.15em; color: var(--gold-3); }
.menu__list em { color: var(--gold-3); }
.is-menu-open .menu__list a { transform: none; opacity: 1; }
.is-menu-open .menu__list li:nth-child(1) a { transition-delay: 0.1s; }
.is-menu-open .menu__list li:nth-child(2) a { transition-delay: 0.15s; }
.is-menu-open .menu__list li:nth-child(3) a { transition-delay: 0.2s; }
.is-menu-open .menu__list li:nth-child(4) a { transition-delay: 0.25s; }
.is-menu-open .menu__list li:nth-child(5) a { transition-delay: 0.3s; }
.is-menu-open .menu__list li:nth-child(6) a { transition-delay: 0.35s; }
.menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin-top: 2.5rem;
  font-size: 0.9rem;
  color: var(--on-dark-muted);
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.9s var(--ease) 0.35s, transform 0.9s var(--ease) 0.35s;
}
.menu__foot a:hover { color: var(--gold-3); }
.is-menu-open .menu__foot { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 8.5rem 3rem;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(40rem 32rem at 74% 42%, rgba(199, 154, 52, 0.16), transparent 70%),
    radial-gradient(30rem 24rem at 10% 100%, rgba(156, 107, 34, 0.1), transparent 70%);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  align-items: center;
  gap: 3rem;
}

.hero__eyebrow { margin-bottom: 2rem; }
.hero__title { margin-bottom: 2rem; }
.hero__title .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.hero__title .line > span {
  display: block;
  transform: translateY(108%);
  animation: rise 1.3s var(--ease-out) forwards;
}
.hero__title .line:nth-child(2) > span { animation-delay: 0.1s; }
.hero__title .line:nth-child(3) > span { animation-delay: 0.2s; }
@keyframes rise { to { transform: none; } }

.hero__lead,
.hero__cta,
.hero__eyebrow,
.hero__meta {
  opacity: 0;
  animation: fadeUp 1.2s var(--ease-out) forwards;
}
.hero__eyebrow { animation-delay: 0.05s; }
.hero__lead { animation-delay: 0.45s; }
.hero__cta { animation-delay: 0.55s; }
.hero__meta { animation-delay: 0.75s; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(1.5rem); }
  to { opacity: 1; transform: none; }
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; }

.hero__seal {
  position: relative;
  justify-self: center;
  width: min(100%, 34rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  opacity: 0;
  animation: sealIn 1.8s var(--ease-out) 0.2s forwards;
}
@keyframes sealIn {
  from { opacity: 0; transform: scale(0.92) rotate(-8deg); }
  to { opacity: 1; transform: none; }
}

.orbit {
  position: absolute;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(221, 185, 104, 0.14);
}
.orbit--1 { inset: 0; }
.orbit--2 { inset: 11%; box-shadow: inset 0 0 0 1px rgba(221, 185, 104, 0.09); }
.orbit--3 {
  inset: 22%;
  background: radial-gradient(circle, rgba(221, 185, 104, 0.12), rgba(14, 12, 9, 0) 70%);
  box-shadow: none;
}
.orbit--1::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-3);
  box-shadow: 0 0 18px 4px rgba(221, 185, 104, 0.5);
}
.orbit--1 { animation: spin 26s linear infinite; }

.seal {
  position: relative;
  width: 72%;
  aspect-ratio: 1;
  transform: translate3d(var(--px, 0), var(--py, 0), 0);
  transition: transform 1.2s var(--ease);
}
.seal img { position: absolute; inset: 0; width: 100%; height: 100%; }
.seal__ring { animation: spin 90s linear infinite; }
.seal__mark { filter: drop-shadow(0 20px 40px rgba(199, 154, 52, 0.25)); }
@keyframes spin { to { transform: rotate(360deg); } }

.chip {
  position: absolute;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(29, 25, 18, 0.9);
  box-shadow: inset 0 0 0 1px rgba(221, 185, 104, 0.2), 0 16px 30px -18px rgba(0, 0, 0, 0.8);
  animation: float 6s var(--ease-soft) infinite alternate;
}
.chip--a { top: 12%; left: 2%; }
.chip--b { top: 26%; right: -2%; animation-delay: -2s; }
.chip--c { bottom: 12%; left: 12%; animation-delay: -4s; }
@keyframes float {
  from { transform: translateY(-6px); }
  to { transform: translateY(8px); }
}

.hero__meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: clamp(3rem, 7vw, 5.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--on-dark-faint);
}
.hero__meta dt {
  font-family: var(--f-display);
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1;
  color: var(--cream);
  margin-bottom: 0.5rem;
}
.hero__meta dd { font-size: 0.85rem; line-height: 1.45; color: var(--on-dark-muted); max-width: 15rem; }

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden;
  padding-block: 1.6rem;
  background: var(--ink-2);
  border-block: 1px solid var(--on-dark-faint);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
  animation: marquee 48s linear infinite;
}
/* Se detiene al pasar el mouse (o al tocarla en móvil) para poder leerla */
.marquee:hover .marquee__track,
.marquee:active .marquee__track { animation-play-state: paused; }
.marquee span {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 3.2vw, 2.9rem);
  line-height: 1;
  color: var(--cream);
  white-space: nowrap;
}
.marquee em { color: var(--gold-3); }
.marquee i {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--gold-grad);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.7 6 4.9 10.3 11 11-6.1.7-10.3 4.9-11 11-.7-6.1-4.9-10.3-11-11 6.1-.7 10.3-5 11-11Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.7 6 4.9 10.3 11 11-6.1.7-10.3 4.9-11 11-.7-6.1-4.9-10.3-11-11 6.1-.7 10.3-5 11-11Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes marquee { to { transform: translateX(calc(-50% - 1.25rem)); } }

/* ---------- Agencia ---------- */
.statement {
  max-width: 68rem;
  font-family: var(--f-display);
  font-size: clamp(2.1rem, 4.4vw, 4.3rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.statement em { color: var(--gold-1); }
.js .statement .w {
  opacity: 0.14;
  transition: opacity 0.9s var(--ease) calc(var(--i) * 22ms);
}
.js .statement.is-in .w { opacity: 1; }

.about__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
  margin-top: clamp(4rem, 9vw, 7.5rem);
}

.about__visual { position: relative; padding-right: 2rem; }
.bezel--tilt { transform: rotate(-2.5deg); transition: transform 1s var(--ease); height: auto; }
.about__visual:hover .bezel--tilt { transform: rotate(-1deg); }
.about__img { aspect-ratio: 4 / 5; background: #120f0b; }
.about__img img { width: 100%; height: 100%; object-fit: cover; }

.about__text { padding-top: 1rem; }
.about__text > p {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--on-paper-muted);
  max-width: 38rem;
}
.about__text > p + p { margin-top: 1.5rem; }
.about__text strong { color: var(--text-dark); font-weight: 500; }
.about__text em { font-family: var(--f-display); font-size: 1.15em; color: var(--text-dark); }

.values { margin-top: clamp(3rem, 6vw, 5rem); }
.values li {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--on-paper-faint);
  font-family: var(--f-display);
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.values li:last-child { border-bottom: 1px solid var(--on-paper-faint); }
.values span {
  width: 2.5rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--gold-1);
}

/* ---------- Section head ---------- */
.sec-head {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  align-items: end;
  gap: 2rem 4rem;
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}
.sec-head .lead { justify-self: end; }

/* ---------- Services bento ---------- */
.services {
  background:
    radial-gradient(50rem 30rem at 100% 0%, rgba(156, 107, 34, 0.08), transparent 70%),
    var(--ink);
}

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(15rem, auto);
  gap: 1.25rem;
}
.bento__item--a { grid-column: span 7; grid-row: span 2; }
.bento__item--b { grid-column: span 5; }
.bento__item--c { grid-column: span 5; }
.bento__item--d { grid-column: span 5; }
.bento__item--e { grid-column: span 3; }
.bento__item--f { grid-column: span 4; }

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  transition: background-color 0.8s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(28rem 18rem at 100% 0%, rgba(221, 185, 104, 0.12), transparent 70%);
  opacity: 0;
  transition: opacity 0.9s var(--ease);
  pointer-events: none;
}
.bento__item:hover .card::before { opacity: 1; }
.bento__item .bezel { transition: box-shadow 0.8s var(--ease); }
.bento__item:hover .bezel { box-shadow: inset 0 0 0 1px rgba(221, 185, 104, 0.22); }

.card__num {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--gold-3);
}
.card__body { position: relative; }
.card__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2rem, 3vw, 2.7rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--cream);
  margin-bottom: 1.1rem;
}
.bento__item--a .card__title { font-size: clamp(3rem, 6vw, 5.75rem); margin-bottom: 1.5rem; }
.card__lead { color: var(--on-dark-muted); font-weight: 300; max-width: 30rem; margin-bottom: 1.5rem; }
.bento__item--a .card__lead { font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.5; }

.card__watermark {
  position: absolute;
  right: -8%;
  top: 6%;
  width: 64%;
  opacity: 0.05;
  pointer-events: none;
  transition: transform 1.4s var(--ease), opacity 1s var(--ease);
}
.bento__item--a:hover .card__watermark { transform: translate(-2%, 2%) scale(1.03); opacity: 0.09; }

.tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.tags li {
  padding: 0.38rem 0.8rem;
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--on-dark-muted);
  background: rgba(243, 236, 223, 0.04);
  box-shadow: inset 0 0 0 1px rgba(243, 236, 223, 0.08);
}

.media-list li {
  font-family: var(--f-display);
  font-size: 1.55rem;
  line-height: 1.35;
  color: var(--on-dark-muted);
  transition: color 0.5s var(--ease), transform 0.6s var(--ease);
}
.media-list li:hover { color: var(--gold-3); transform: translateX(0.35rem); }

.wave {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 2.5rem;
}
.wave i {
  flex: 1;
  height: 100%;
  border-radius: 2px;
  background: var(--gold-grad);
  opacity: 0.75;
  transform-origin: center;
  transform: scaleY(0.2);
  animation: wave 1.6s var(--ease-soft) infinite alternate;
}
.wave i:nth-child(3n) { animation-duration: 1.1s; }
.wave i:nth-child(3n + 1) { animation-duration: 1.9s; animation-delay: -0.4s; }
.wave i:nth-child(4n) { animation-delay: -0.8s; }
.wave i:nth-child(5n) { animation-duration: 1.3s; animation-delay: -1.1s; }
@keyframes wave {
  from { transform: scaleY(0.15); }
  to { transform: scaleY(1); }
}

/* ---------- Catalog ---------- */
.catalog__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}
.catalog__aside {
  position: sticky;
  top: 8rem;
  display: grid;
  gap: 1.75rem;
  justify-items: start;
}
.catalog__aside .title em { color: var(--gold-1); }

.products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.products__col { display: grid; gap: 1.5rem; align-content: start; }
.products__col--offset { padding-top: 7rem; }

.product .bezel {
  transform: rotate(var(--rot, -1deg));
  transition: transform 1s var(--ease);
}
.products__col .product:nth-child(even) .bezel { --rot: 1.2deg; }
.products__col--offset .product:nth-child(odd) .bezel { --rot: 1deg; }
.products__col--offset .product:nth-child(even) .bezel { --rot: -1.2deg; }
.product:hover .bezel { transform: rotate(0deg) translateY(-6px); }

.product__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #efe6d6;
}
.product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.product:hover .product__media img { transform: scale(1.05); }
.product__media--cut {
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: radial-gradient(circle at 50% 42%, #fffaf0 0%, #eee3cf 72%);
}
.product__media--cut img {
  object-fit: contain;
  filter: drop-shadow(0 24px 24px rgba(80, 55, 15, 0.22));
}

.product__info { padding: 1.4rem 1.5rem 1.6rem; }
.product__tag {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-1);
}
.product h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.85rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}
.product p { font-size: 0.92rem; line-height: 1.55; color: var(--on-paper-muted); }

/* ---------- Method (sticky stack) ---------- */
.method { background: var(--ink); }
.stack { display: grid; gap: 1.5rem; }
.stack__card {
  position: sticky;
  top: calc(6.5rem + var(--i) * 1.4rem);
}
.stack__card .bezel { background: rgba(21, 18, 13, 0.96); }

.step {
  display: grid;
  grid-template-columns: 11rem 1fr auto;
  align-items: center;
  gap: 2rem 3rem;
  min-height: 17rem;
  padding: clamp(1.75rem, 3.5vw, 3rem);
}
.step__num {
  font-family: var(--f-display);
  font-size: clamp(5rem, 9vw, 8.5rem);
  line-height: 0.8;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.step h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--cream);
  margin-bottom: 0.9rem;
}
.step p { color: var(--on-dark-muted); font-weight: 300; max-width: 34rem; }
.step__tags { justify-content: flex-end; max-width: 22rem; }

.step__img {
  width: clamp(12rem, 22vw, 18rem);
  aspect-ratio: 16 / 10;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(243, 236, 223, 0.08);
}
.step__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Contact ---------- */
.contact {
  background:
    radial-gradient(46rem 34rem at 85% 60%, rgba(199, 154, 52, 0.12), transparent 70%),
    var(--ink);
  border-top: 1px solid var(--on-dark-faint);
}
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}
.contact__copy .title { margin-bottom: 1.5rem; }

.contact__list { margin-top: 3rem; display: grid; gap: 1.1rem; }
.contact__list li { display: flex; align-items: center; gap: 1rem; }
.contact__list small {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.contact__list a,
.contact__list span:not(.contact__ico) { color: var(--cream); font-size: 1rem; }
.contact__list a { transition: color 0.5s var(--ease); }
.contact__list a:hover { color: var(--gold-3); }

.contact__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  color: var(--gold-3);
  background: rgba(221, 185, 104, 0.07);
  box-shadow: inset 0 0 0 1px rgba(221, 185, 104, 0.16);
}
.contact__ico svg,
.wa-float svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.form { display: grid; gap: 1.1rem; padding: clamp(1.5rem, 3vw, 2.5rem); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: grid; gap: 0.5rem; }
.field > span {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 0;
  border-radius: 1rem;
  background: rgba(243, 236, 223, 0.04);
  box-shadow: inset 0 0 0 1px rgba(243, 236, 223, 0.08);
  color: var(--cream);
  font-size: 0.95rem;
  outline: none;
  transition: box-shadow 0.5s var(--ease), background-color 0.5s var(--ease);
}
.field textarea { resize: vertical; min-height: 7.5rem; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ddb968' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  padding-right: 2.75rem;
}
.field select option { background: var(--ink-2); color: var(--cream); }
.field input::placeholder,
.field textarea::placeholder { color: rgba(243, 236, 223, 0.3); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  background: rgba(243, 236, 223, 0.06);
  box-shadow: inset 0 0 0 1px rgba(221, 185, 104, 0.55), 0 0 0 4px rgba(221, 185, 104, 0.08);
}
.field.is-invalid input,
.field.is-invalid select { box-shadow: inset 0 0 0 1px rgba(232, 128, 96, 0.7); }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}
.form__hint { font-size: 0.8rem; color: var(--on-dark-muted); max-width: 15rem; }
.form__hint.is-error { color: #eaa28a; }

/* ---------- Location ---------- */
.location__stage { height: auto; }
.location__core {
  position: relative;
  min-height: clamp(30rem, 46vw, 38rem);
  background: #1b1813;
}
.location__map {
  position: absolute;
  inset: 0;
}
.location__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: invert(0.9) hue-rotate(180deg) grayscale(0.55) sepia(0.35) brightness(0.92) contrast(1.05);
}
.location__map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(14, 12, 9, 0.55) 0%, rgba(14, 12, 9, 0) 45%);
  box-shadow: inset 0 0 0 1px rgba(221, 185, 104, 0.1);
  border-radius: inherit;
}

.loc-card {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  width: min(31rem, calc(100% - 2.5rem));
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border-radius: calc(var(--r-xl) - var(--r-bezel) - 0.5rem);
  background: rgba(14, 12, 9, 0.95);
  color: var(--on-dark);
  box-shadow: inset 0 0 0 1px rgba(221, 185, 104, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 40px 70px -30px rgba(0, 0, 0, 0.7);
}
.loc-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-3);
}
.loc-card__eyebrow svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.loc-card__city {
  margin: 0.6rem 0 1.25rem;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--cream);
}

.loc-card__rows { display: grid; }
.loc-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 1rem;
  padding-block: 0.8rem;
  border-top: 1px solid var(--on-dark-faint);
}
.loc-row dt {
  grid-column: 1 / -1;
  margin-bottom: 0.2rem;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.loc-row dd { font-size: 0.92rem; line-height: 1.45; color: var(--cream); }
.loc-row dd a:not(.pill) { transition: color 0.5s var(--ease); }
.loc-row dd a:not(.pill):hover { color: var(--gold-3); }
.loc-row .loc-row__act { justify-self: end; }

.pill {
  justify-self: end;
  padding: 0.35rem 0.8rem;
  border: 0;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-3);
  background: rgba(221, 185, 104, 0.08);
  box-shadow: inset 0 0 0 1px rgba(221, 185, 104, 0.3);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease), transform 0.5s var(--ease);
}
.pill:hover { background: var(--gold-3); color: var(--ink); }
.pill:active { transform: scale(0.96); }
.pill.is-done { background: var(--gold-3); color: var(--ink); }

.loc-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
}
.loc-card__status {
  min-height: 1.2em;
  margin-top: 0.75rem;
  font-size: 0.78rem;
  color: var(--gold-3);
}
.loc-card__status:empty { margin-top: 0; min-height: 0; }

/* ---------- Footer ---------- */
.footer {
  padding-block: 5rem 2rem;
  background: var(--ink);
  border-top: 1px solid var(--on-dark-faint);
  overflow: hidden;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.1fr 1.2fr;
  gap: 2.5rem;
  align-items: start;
}
.footer__brand { display: grid; gap: 1.25rem; justify-items: start; }
.footer__brand p { font-size: 0.88rem; line-height: 1.6; color: var(--on-dark-muted); max-width: 18rem; }
.footer__seal { width: 6.5rem; height: auto; }
.footer__col h4 {
  margin: 0 0 1.1rem;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-3);
}
.footer__links {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
  font-size: 0.9rem;
  font-style: normal;
  line-height: 1.5;
  color: var(--on-dark-muted);
}
.footer__links a { transition: color 0.5s var(--ease); }
.footer__links a:hover { color: var(--gold-3); }
.footer__route { color: var(--gold-3); }

.footer__mega {
  margin-block: clamp(3rem, 6vw, 5rem) 2rem;
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 8.4vw, 7.6rem);
  line-height: 1;
  letter-spacing: -0.025em;
  white-space: nowrap;
  text-align: center;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-top: 1.5rem;
  padding-right: 5rem; /* keep clear of the floating WhatsApp button */
  border-top: 1px solid var(--on-dark-faint);
  font-size: 0.8rem;
  color: var(--on-dark-muted);
}

/* ---------- Floating WhatsApp ---------- */
.wa-float {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: var(--z-float);
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  color: #1c1405;
  background: var(--gold-grad);
  box-shadow: inset 0 1px 0 rgba(255, 246, 220, 0.5), 0 20px 40px -16px rgba(199, 154, 52, 0.6);
  transition: transform 0.9s var(--ease);
  animation: waIn 0.9s var(--ease-out) 1.2s both;
}
@keyframes waIn { from { transform: translateY(6rem); } }
.wa-float svg { width: 1.45rem; height: 1.45rem; stroke-width: 1.5; }
.wa-float:hover { transform: translateY(-3px) scale(1.04); }

/* ---------- Scroll reveal ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(3.5rem);
  filter: blur(8px);
  transition:
    opacity 1s var(--ease-out) var(--d, 0ms),
    transform 1.2s var(--ease-out) var(--d, 0ms),
    filter 1s var(--ease-out) var(--d, 0ms);
}
.js [data-reveal][data-from="top"] { transform: translateY(-3.5rem); }
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* Hero intro: only runs while the hero is in view, so it replays on return */
.js .hero:not(.is-in) .hero__title .line > span,
.js .hero:not(.is-in) .hero__lead,
.js .hero:not(.is-in) .hero__cta,
.js .hero:not(.is-in) .hero__eyebrow,
.js .hero:not(.is-in) .hero__meta,
.js .hero:not(.is-in) .hero__seal { animation: none; }

/* ---------- Pictures (WebP + JPG) ---------- */
.about__img picture,
.product__media picture { display: block; height: 100%; }

/* ---------- Form extras ---------- */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--on-dark-muted);
  cursor: pointer;
}
.check input {
  appearance: none;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0.1rem 0 0;
  border-radius: 0.35rem;
  background: rgba(243, 236, 223, 0.04);
  box-shadow: inset 0 0 0 1px rgba(243, 236, 223, 0.22);
  cursor: pointer;
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.check input:checked {
  background: var(--gold-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1405' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
  box-shadow: none;
}
.check a { color: var(--gold-3); text-decoration: underline; text-underline-offset: 2px; }
.check.is-invalid input,
.field.is-invalid textarea { box-shadow: inset 0 0 0 1px rgba(232, 128, 96, 0.8); }
.form__hint a { color: var(--gold-3); text-decoration: underline; text-underline-offset: 2px; }
.btn:disabled { opacity: 0.7; cursor: progress; }

.form-done {
  display: grid;
  justify-items: start;
  gap: 1rem;
  padding: clamp(2rem, 4vw, 3rem);
  outline: none;
}
.form[hidden],
.form-done[hidden] { display: none; }
.form-done__mark {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  color: #1c1405;
  background: var(--gold-grad);
}
.form-done__mark svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.form-done h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1;
  color: var(--cream);
}
.form-done p { color: var(--on-dark-muted); max-width: 26rem; }
.form-done a { color: var(--gold-3); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Map facade (loads Google Maps on demand) ---------- */
.map-facade {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center end;
  justify-items: center;
  gap: 0.75rem;
  padding: 2rem clamp(2rem, 9vw, 9rem) 2rem 2rem;
  text-align: center;
  background:
    repeating-linear-gradient(28deg, transparent 0 58px, rgba(243, 236, 223, 0.05) 58px 60px),
    repeating-linear-gradient(-62deg, transparent 0 86px, rgba(243, 236, 223, 0.05) 86px 89px),
    linear-gradient(135deg, #211d16, #16130e);
}
.map-facade::before {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  margin-bottom: 0.5rem;
  border-radius: 50%;
  background: var(--gold-3);
  box-shadow: 0 0 0 0.9rem rgba(221, 185, 104, 0.12), 0 0 0 2rem rgba(221, 185, 104, 0.06);
}
.map-facade__btn { font-size: 0.7rem; padding: 0.7rem 1.2rem; }
.map-facade__note { font-size: 0.75rem; color: var(--on-dark-muted); max-width: 17rem; }
.map-facade__note a { color: var(--gold-3); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Footer legal ---------- */
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
}
.footer__legal a,
.footer__legal button {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  transition: color 0.5s var(--ease);
}
.footer__legal a:hover,
.footer__legal button:hover { color: var(--gold-3); }

/* ---------- Cookie notice (slim bar, never covers the hero CTA) ---------- */
.cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 1.25rem;
  z-index: calc(var(--z-nav) + 1);
  width: min(58rem, calc(100% - 11rem));
  margin-inline: auto;
  padding: 0.85rem 0.9rem 0.85rem 1.4rem;
  border-radius: 1.4rem;
  background: rgba(14, 12, 9, 0.96);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: inset 0 0 0 1px rgba(221, 185, 104, 0.2), 0 30px 60px -20px rgba(0, 0, 0, 0.7);
  animation: fadeUp 0.9s var(--ease-out) 0.8s both;
}
.cookies__inner { display: flex; align-items: center; gap: 1.25rem; }
.cookies[hidden] { display: none; }
.cookies__title { flex: none; font-family: var(--f-display); font-size: 1.35rem; line-height: 1.1; color: var(--cream); }
.cookies__text { flex: 1; font-size: 0.8rem; line-height: 1.5; color: var(--on-dark-muted); }
.cookies__text a { color: var(--gold-3); text-decoration: underline; text-underline-offset: 2px; }
.cookies__actions { flex: none; display: flex; gap: 0.5rem; }
.cookies__actions .pill { padding: 0.6rem 1rem; }
.pill--solid { background: var(--gold-3); color: var(--ink); box-shadow: none; }
.pill--solid:hover { background: var(--gold-4); }
.pill--ghost { background: transparent; color: var(--on-dark-muted); box-shadow: inset 0 0 0 1px rgba(243, 236, 223, 0.2); }
.pill--ghost:hover { background: rgba(243, 236, 223, 0.08); color: var(--cream); }

/* ---------- Legal pages & 404 ---------- */
.page-head {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(14, 12, 9, 0.85);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--on-dark-faint);
}
.page-head .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
}

.legal { padding-block: clamp(3.5rem, 8vw, 6rem); }
.legal__inner { max-width: 46rem; }
.legal h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 1.25rem 0 1rem;
}
.legal__meta { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--on-paper-muted); margin-bottom: 2.5rem; }
.legal h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1.1;
  margin: 2.75rem 0 0.9rem;
}
.legal p,
.legal li { color: rgba(26, 21, 14, 0.8); line-height: 1.7; }
.legal p + p { margin-top: 0.9rem; }
.legal ul { display: grid; gap: 0.45rem; margin-top: 0.75rem; padding-left: 1.2rem; list-style: disc; }
.legal a { color: var(--gold-1); text-decoration: underline; text-underline-offset: 2px; }
.legal table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.88rem; }
.legal th,
.legal td { text-align: left; vertical-align: top; padding: 0.7rem 0.75rem 0.7rem 0; border-bottom: 1px solid var(--on-paper-faint); }
.legal th { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--on-paper-muted); }
.legal__table { overflow-x: auto; }
.legal__facts { display: grid; gap: 0; margin-top: 1rem; }
.legal__facts div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding-block: 0.7rem; border-bottom: 1px solid var(--on-paper-faint); }
.legal__facts dt { font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-paper-muted); padding-top: 0.2rem; }

.notfound {
  min-height: calc(100dvh - 4.5rem);
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: 4rem;
  background: radial-gradient(36rem 28rem at 50% 40%, rgba(199, 154, 52, 0.14), transparent 70%);
}
.notfound__num {
  font-family: var(--f-display);
  font-size: clamp(7rem, 22vw, 15rem);
  line-height: 0.8;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.notfound h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1; margin: 1.5rem 0 1rem; }
.notfound .lead { margin: 0 auto 2.25rem; }
.notfound__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; margin-top: 2rem; font-size: 0.9rem; color: var(--on-dark-muted); }
.notfound__links a:hover { color: var(--gold-3); }

.page-foot {
  padding-block: 1.75rem;
  border-top: 1px solid var(--on-dark-faint);
  font-size: 0.8rem;
  color: var(--on-dark-muted);
}
.page-foot .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding-right: 4.5rem; }

@media (max-width: 1100px) {
  .cookies__inner { flex-wrap: wrap; gap: 0.35rem 1rem; }
  .cookies__text { flex: 1 1 100%; order: 2; }
  .cookies__actions { order: 3; margin-top: 0.4rem; }
}

@media (max-width: 900px) {
  .map-facade { position: relative; inset: auto; height: 100%; place-content: center; padding: 2rem; }
}

@media (max-width: 767px) {
  .cookies { left: 0.75rem; right: auto; bottom: 0.75rem; width: calc(100% - 1.5rem - 4.25rem); padding: 0.9rem 1rem; }
  .cookies__title { font-size: 1.2rem; }
  .cookies__actions { width: 100%; }
  .cookies__actions .pill { flex: 1 1 0; padding: 0.65rem 0.4rem; letter-spacing: 0.06em; }
  .legal__facts div { grid-template-columns: 1fr; gap: 0.2rem; }
  .legal table { min-width: 34rem; }
  .page-head .btn { padding-left: 1rem; }
  .page-head .brand__text small { display: none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .burger { display: block; }
  .nav__island { gap: 1rem; }

  .bento__item--a { grid-column: span 12; grid-row: span 1; }
  .bento__item--b,
  .bento__item--c { grid-column: span 6; }
  .bento__item--d { grid-column: span 12; }
  .bento__item--e,
  .bento__item--f { grid-column: span 6; }

  .step { grid-template-columns: 8rem 1fr; }
  .step__tags,
  .step__img { grid-column: 2; justify-content: flex-start; }

  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 1rem; }
  .hero__seal { width: min(78vw, 26rem); order: -1; margin-bottom: 1rem; }
  .hero__meta { grid-template-columns: 1fr 1fr; gap: 1.75rem 1.5rem; }

  .sec-head { grid-template-columns: 1fr; }
  .sec-head .lead { justify-self: start; }

  .about__grid,
  .catalog__grid,
  .contact__grid { grid-template-columns: 1fr; }
  .about__visual { max-width: 28rem; }
  .catalog__aside { position: static; }

  /* Map on top, card below */
  .location__core { min-height: 0; display: flex; flex-direction: column; }
  .location__map { position: relative; inset: auto; height: 22rem; }
  .location__map::after { background: none; }
  .loc-card {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    border-radius: 0;
    box-shadow: none;
  }
}

@media (max-width: 767px) {
  .container { width: min(100% - 2rem, 1320px); }
  .nav { inset: 0.75rem 0 auto; }
  .nav__cta { display: none; }
  .brand__text small { display: none; }
  .nav__island { gap: 2.5rem; padding-left: 1.1rem; }

  .hero { padding-top: 6.5rem; }
  .hide-sm { display: none; }
  .hero__cta .btn { flex: 1 1 100%; justify-content: space-between; }

  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 1rem; }
  .bento__item--a, .bento__item--b, .bento__item--c,
  .bento__item--d, .bento__item--e, .bento__item--f { grid-column: span 1; }

  .bezel--tilt,
  .about__visual:hover .bezel--tilt { transform: none; }
  .about__visual { padding-right: 0; }

  .products { grid-template-columns: 1fr; gap: 1rem; }
  .products__col { gap: 1rem; }
  .products__col--offset { padding-top: 0; }
  .product .bezel,
  .product:hover .bezel { transform: none; }

  .stack__card { position: relative; top: auto; }
  .step { grid-template-columns: 1fr; gap: 1.25rem; min-height: 0; }
  .step__tags, .step__img { grid-column: 1; }
  .step__img { width: 100%; }

  .location__map { height: 18rem; }
  .loc-card__actions .btn { flex: 1 1 100%; justify-content: space-between; }
  .footer__top { grid-template-columns: 1fr; gap: 2rem; }

  .form__row { grid-template-columns: 1fr; }
  .form__foot .btn { width: 100%; justify-content: space-between; }
  .footer__mega { white-space: normal; font-size: 3rem; line-height: 1.02; text-align: left; }
  .wa-float { right: 1rem; bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
  .js .statement .w { opacity: 1; }
}