/* ==========================================================================
   Devio Panamá — sistema de diseño
   Pacífico (tinta), marfil (papel) y el aqua del Canal. Tipografía editorial:
   Geist para la voz corporativa, Instrument Serif en cursiva para el acento.
   ========================================================================== */

:root {
  --ink: #06182c;
  --ink-2: #0b2440;
  --ink-3: #12324f;
  --paper: #f3f1ec;
  --paper-2: #e9e5dc;
  --white: #fff;
  --aqua: #13b6c3;
  --aqua-hi: #3cd3da;
  --aqua-deep: #087480;
  --coral: #e5492d;
  --sun: #f2b33d;
  --text: #0b1b2c;
  --muted: #4c5a68;
  --faint: #7c8793;
  --line: rgba(6, 24, 44, 0.13);
  --line-2: rgba(6, 24, 44, 0.24);
  --on-ink: #eef3f6;
  --on-ink-muted: rgba(238, 243, 246, 0.66);
  --on-ink-faint: rgba(238, 243, 246, 0.42);
  --line-dark: rgba(255, 255, 255, 0.13);
  --line-dark-2: rgba(255, 255, 255, 0.26);

  --f-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --gut: clamp(20px, 4vw, 56px);
  --maxw: 1480px;
  --nav-h: 76px;
  --r: 14px;
  --r-lg: 22px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --sec: clamp(88px, 11vw, 168px);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}
@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; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, figure, dl, dd, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
em { font-style: normal; }
::selection { background: var(--aqua); color: var(--ink); }
:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 16px; top: -60px; z-index: 200; padding: 12px 18px;
  background: var(--aqua); color: var(--ink); font-weight: 600; border-radius: 999px;
  transition: top 0.2s var(--ease);
}
.skip:focus { top: 14px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.mono {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.it, h1 em, h2 em, h3 em, .h2 em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.aq { color: var(--aqua-deep); }
.is-dark .aq, [data-nav-dark] .aq { color: var(--aqua-hi); }

/* ---------- botones ---------- */
.btn {
  --bg: var(--ink);
  --fg: var(--white);
  --bd: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 24px 0 26px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bd);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), background-color 0.35s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fill, var(--aqua));
  transform: translateY(101%);
  border-radius: inherit;
  transition: transform 0.5s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--fg-h, var(--ink)); }
.btn .ar { width: 15px; height: 15px; flex: none; transition: transform 0.4s var(--ease); }
.btn:hover .ar { transform: translate(2px, -2px) rotate(45deg); }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn:focus-within:not(:focus-visible):has(input:focus-visible) { outline: 2px solid var(--aqua); outline-offset: 3px; }
.btn--aqua { --bg: var(--aqua); --fg: var(--ink); --fill: var(--white); }
.btn--ink { --bg: var(--ink); --fg: var(--white); --fill: var(--aqua); }
.btn--light { --bg: var(--white); --fg: var(--ink); --fill: var(--aqua); }
.btn--line { --bg: transparent; --fg: currentColor; --bd: currentColor; --fill: var(--ink); --fg-h: var(--white); }
[data-nav-dark] .btn--line, .is-dark .btn--line { --fill: var(--white); --fg-h: var(--ink); }
.btn--wa { --bg: transparent; --fg: var(--on-ink); --bd: var(--line-dark-2); --fill: #25d366; --fg-h: var(--ink); }
.btn--wa svg { width: 20px; height: 20px; }
.btn--sm { min-height: 42px; padding: 0 18px 0 20px; font-size: 14px; }

.link-ar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: gap 0.3s var(--ease), color 0.3s;
}
.link-ar .ar { width: 13px; height: 13px; transition: transform 0.35s var(--ease); }
.link-ar:hover { gap: 12px; }
.link-ar:hover .ar { transform: rotate(45deg); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  white-space: nowrap;
}
.chip svg { width: 11px; height: 11px; }
.chip--glass { background: rgba(6, 24, 44, 0.46); border-color: rgba(255, 255, 255, 0.2); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.chip--net { background: rgba(243, 241, 236, 0.92); border-color: transparent; color: var(--ink); }
.chip--net i { display: block; width: 16px; height: 11px; border-radius: 2px; overflow: hidden; }
.chip--net i svg { width: 100%; height: 100%; }

/* ---------- navegación ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-h);
  color: var(--ink);
  transition: transform 0.5s var(--ease), background-color 0.4s, color 0.4s, box-shadow 0.4s;
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(243, 241, 236, 0.82);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transition: opacity 0.4s, background-color 0.4s, border-color 0.4s;
}
.nav.is-scrolled::before { opacity: 1; }
.nav.on-dark { color: var(--white); }
.nav.on-dark::before { background: rgba(6, 24, 44, 0.72); border-color: var(--line-dark); }
.nav.is-hidden { transform: translateY(-100%); }
.nav-in { position: relative; height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; flex: none; margin-right: auto; --logo-mark: var(--aqua); }
.brand svg { width: 150px; height: 45px; }
.nav.on-dark .brand, body.menu-open .brand { --logo-mark: var(--aqua-hi); }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  position: relative;
  padding: 10px 14px;
  font-size: 14.5px;
  font-weight: 450;
  border-radius: 999px;
  transition: background-color 0.3s;
}
.nav-links a:hover { background: rgba(6, 24, 44, 0.07); }
.nav.on-dark .nav-links a:hover { background: rgba(255, 255, 255, 0.1); }
.nav-links a.is-on::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--aqua);
}
.nav-end { display: flex; align-items: center; gap: 14px; }
.nav-time { display: flex; align-items: center; gap: 8px; color: currentColor; opacity: 0.75; }
.nav-time i { width: 6px; height: 6px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 0 rgba(19, 182, 195, 0.6); animation: ping 2.4s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(19, 182, 195, 0.55); } 80%, 100% { box-shadow: 0 0 0 8px rgba(19, 182, 195, 0); } }
.nav-cta { min-height: 44px; padding: 0 18px 0 20px; font-size: 14px; }
.nav.on-dark .nav-cta { --bg: var(--aqua); --fg: var(--ink); --fill: var(--white); }

.burger { display: none; position: relative; width: 46px; height: 46px; border-radius: 50%; border: 1px solid currentColor; }
.burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; transition: transform 0.45s var(--ease), top 0.45s var(--ease); }
.burger span:first-child { top: 18px; }
.burger span:last-child { top: 26px; }
body.menu-open .burger span:first-child { top: 22px; transform: rotate(45deg); }
body.menu-open .burger span:last-child { top: 22px; transform: rotate(-45deg); }
body.menu-open .nav { color: var(--white); }
body.menu-open .nav::before { opacity: 0; }

.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--nav-h) + 28px) var(--gut) 32px;
  background: var(--ink);
  color: var(--white);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.7s var(--ease-io), visibility 0s 0.7s;
}
body.menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.7s var(--ease-io); }
.menu-links { display: flex; flex-direction: column; }
.menu-links a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  font-size: clamp(34px, 9vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 450;
  border-bottom: 1px solid var(--line-dark);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s, transform 0.6s var(--ease);
}
.menu-links a i { font-family: var(--f-mono); font-style: normal; font-size: 11px; letter-spacing: 0.08em; color: var(--aqua-hi); }
body.menu-open .menu-links a { opacity: 1; transform: none; }
body.menu-open .menu-links a:nth-child(2) { transition-delay: 0.05s; }
body.menu-open .menu-links a:nth-child(3) { transition-delay: 0.1s; }
body.menu-open .menu-links a:nth-child(4) { transition-delay: 0.15s; }
body.menu-open .menu-links a:nth-child(5) { transition-delay: 0.2s; }
body.menu-open .menu-links a:nth-child(6) { transition-delay: 0.25s; }
.menu-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; color: var(--on-ink-muted); font-size: 15px; }
.menu-foot .mono { flex-basis: 100%; }

/* ---------- redes ---------- */
.social { display: flex; flex-wrap: wrap; gap: 8px; }
.social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid currentColor;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.social a:hover { background: var(--aqua); border-color: var(--aqua); color: var(--ink); }
.social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- aparición ---------- */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 1.1s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.js .d1 { transition-delay: 0.08s; }
.js .d2 { transition-delay: 0.16s; }
.js .d3 { transition-delay: 0.24s; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split .nw { white-space: nowrap; }
.js .split .w > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 38ms); }
.js .split.in .w > span { transform: none; }

/* Imagen con cortina de agua: se descubre de abajo hacia arriba */
.tx { position: relative; display: block; overflow: hidden; background: var(--ink-2); }
.tx img, .tx video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.6s var(--ease); }
.tx::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--aqua-hi) 0 2px, var(--ink) 2px);
  transform-origin: top;
  transition: transform 1.1s var(--ease-io);
  pointer-events: none;
}
.js .tx.in::after { transform: scaleY(0); }
.no-js .tx::after { display: none; }
.js .tx.in img, .js .tx.in video, .no-js .tx img { transform: scale(1); }
.tx--empty { display: grid; place-items: center; color: var(--on-ink-faint); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; background: repeating-linear-gradient(135deg, var(--ink-2) 0 14px, var(--ink-3) 14px 15px); }
.tx--empty span { position: relative; z-index: 1; padding: 0 18px; text-align: center; }

.sk { position: relative; overflow: hidden; background: rgba(6, 24, 44, 0.07); border-radius: var(--r); }
[data-nav-dark] .sk { background: rgba(255, 255, 255, 0.07); }
.sk::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: shimmer 1.6s infinite;
}
[data-nav-dark] .sk::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); }
@keyframes shimmer { to { transform: translateX(100%); } }


/* ---------- secciones ---------- */
.section { position: relative; padding-block: var(--sec); }
.is-dark, [data-nav-dark] { background: var(--ink); color: var(--on-ink); }
.sec-idx {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.sec-idx b { font-weight: 500; color: var(--text); white-space: nowrap; }
.sec-idx b::after { content: ""; display: inline-block; width: 28px; height: 1px; margin-left: 12px; vertical-align: middle; background: currentColor; opacity: 0.5; }
[data-nav-dark] .sec-idx, .is-dark .sec-idx { color: var(--on-ink-faint); }
[data-nav-dark] .sec-idx b, .is-dark .sec-idx b { color: var(--aqua-hi); }
.sec-head { display: grid; gap: 26px; margin-bottom: clamp(44px, 6vw, 84px); max-width: 1100px; }
.h2 {
  font-size: clamp(40px, 5.8vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 450;
  text-wrap: balance;
}
.h2 em { letter-spacing: -0.02em; }
.lead { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; color: var(--muted); max-width: 560px; text-wrap: pretty; }
[data-nav-dark] .lead, .is-dark .lead { color: var(--on-ink-muted); }
.lead b { color: var(--text); font-weight: 500; }
[data-nav-dark] .lead b { color: var(--on-ink); }
.sec-more { margin-top: clamp(40px, 5vw, 64px); display: flex; justify-content: center; }

/* ==========================================================================
   HERO — "Aquí el sol sale por el Pacífico"
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--nav-h) + clamp(18px, 3vw, 36px));
  overflow: hidden;
  isolation: isolate;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}
/* Amanecer sobre el Pacífico: cielo marfil con el resplandor del sol junto al horizonte */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(55% 50% at 80% 86%, rgba(242, 179, 61, 0.3), transparent 66%),
    radial-gradient(60% 55% at 12% 0%, rgba(19, 182, 195, 0.1), transparent 62%),
    linear-gradient(180deg, #f8f6f1 0%, var(--paper) 58%, #edf1ee 100%);
}
.hero-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

.hero-meta {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  gap: 12px 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.hero-meta > * { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta b { color: var(--text); font-weight: 500; }
.hero-meta .live i { width: 6px; height: 6px; border-radius: 50%; background: var(--aqua); animation: ping 2.4s infinite; }

.hero-main {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 72px);
  padding-top: clamp(28px, 5vh, 64px);
}
.hero-copy { position: relative; z-index: 2; align-self: end; padding-bottom: clamp(26px, 4.5vh, 52px); }
.hero-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(16px, 2.6vh, 28px); color: var(--aqua-deep); }
.hero-kicker::before { content: ""; width: 34px; height: 1px; background: currentColor; }
.hero-h1 { margin: 0; font: inherit; }
.hero-title {
  display: block;
  font-size: clamp(50px, min(8vw, 11.6vh), 150px);
  line-height: 0.9;
  letter-spacing: -0.058em;
  font-weight: 450;
  color: var(--ink);
}
.hero-title .ln { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero-title .ln > span { display: inline-block; transform: translateY(108%); transition: transform 1.3s var(--ease); }
.hero-title .ln:nth-child(2) > span { transition-delay: 0.1s; }
.hero-title .ln:nth-child(3) > span { transition-delay: 0.2s; }
.is-loaded .hero-title .ln > span, .no-js .hero-title .ln > span { transform: none; }
.hero-title em { color: var(--aqua-deep); letter-spacing: -0.03em; padding-right: 0.04em; }
.hero-side { position: relative; display: flex; flex-direction: column; min-height: 0; }
.hero-foot { position: relative; z-index: 2; display: grid; gap: 22px; max-width: 460px; }
.hero-body { font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.js .hero-foot { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease) 0.5s, transform 1.2s var(--ease) 0.5s; }
.is-loaded .hero-foot { opacity: 1; transform: none; }

/* El sol: un círculo que sale del horizonte; dentro, el video/imagen del CMS */
.hero-sun-wrap { position: relative; flex: 1; min-height: 220px; margin-top: clamp(16px, 3vh, 40px); pointer-events: none; clip-path: inset(-100vh -100vw 0 -100vw); }
.hero-sun {
  position: absolute;
  right: 4%;
  bottom: 0;
  width: min(100%, 520px, 56vh);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  translate: 0 var(--rise, 0px);
  transform: translateY(36%);
  background: radial-gradient(circle at 50% 38%, #ffe7a8 0%, var(--sun) 34%, #ef7a2e 68%, #c9432b 100%);
  box-shadow: 0 0 160px 30px rgba(242, 179, 61, 0.3);
  transition: transform 2.4s var(--ease) 0.15s;
  pointer-events: auto;
}
.js .hero-sun { transform: translateY(104%); }
.is-loaded .hero-sun, .no-js .hero-sun { transform: translateY(36%); }
.hero-sun .tx { position: absolute; inset: 0; background: transparent; }
.hero-sun .tx::after { display: none; }
.hero-sun .tx img, .hero-sun .tx video { transform: none; object-position: var(--fx, 50%) var(--fy, 50%); }
.hero-sun.has-media { background: var(--paper-2); box-shadow: 0 0 0 1px var(--line), 0 30px 100px rgba(8, 116, 128, 0.22); }
.hero-sun.has-media::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(200deg, transparent 50%, rgba(6, 24, 44, 0.35)); }

.hero-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-2);
}
.hero-stats > div { padding: 20px 20px 26px 0; border-right: 1px solid var(--line); }
.hero-stats > div + div { padding-left: 20px; }
.hero-stats > div:last-child { border-right: 0; }
.hero-stats dt { order: 2; margin-top: 6px; color: var(--muted); font-size: 13.5px; line-height: 1.4; max-width: 220px; }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats dd { font-size: clamp(30px, 3.2vw, 48px); line-height: 1; letter-spacing: -0.05em; font-weight: 450; color: var(--ink); font-variant-numeric: tabular-nums; }
.hero-stats dd small { font-family: var(--f-serif); font-style: italic; font-size: 0.72em; color: var(--aqua-deep); margin-left: 2px; letter-spacing: 0; }


/* ==========================================================================
   MANIFIESTO
   ========================================================================== */
.mani-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(24px, 4vw, 64px); }
.mani-side { display: flex; flex-direction: column; gap: 22px; }
.mani-side .mono { color: var(--muted); }
.mani-text {
  font-size: clamp(28px, 3.5vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.035em;
  font-weight: 450;
  text-wrap: pretty;
}
.mani-text em { color: var(--aqua-deep); }
.mani-text .w { transition: color 0.4s linear; }
.js .mani-text.is-scrub .w { color: rgba(11, 27, 44, 0.18); }
.js .mani-text.is-scrub .w.is-lit { color: inherit; }
.js .mani-text.is-scrub em .w.is-lit { color: var(--aqua-deep); }
.mani-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: clamp(48px, 7vw, 96px); border-top: 1px solid var(--line-2); }
.mani-foot > div { padding: 22px 24px 0 0; }
.mani-foot > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.mani-foot h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; display: flex; gap: 10px; align-items: baseline; }
.mani-foot h3 i { font-family: var(--f-mono); font-style: normal; font-size: 11px; color: var(--aqua-deep); font-weight: 500; }
.mani-foot p { color: var(--muted); font-size: 15px; }

/* ==========================================================================
   SERVICIOS DE ALTA GAMA
   ========================================================================== */
.svc-sec { background: var(--white); }
.svc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.svc-head { position: sticky; top: calc(var(--nav-h) + 32px); display: grid; gap: 26px; align-content: start; }
.svc-head .btn { justify-self: start; }
.svc-list { border-top: 1px solid var(--line-2); counter-reset: svc; }
.svc { border-bottom: 1px solid var(--line-2); }
.svc-h { margin: 0; font: inherit; }
.svc-btn {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 26px 0;
  text-align: left;
}
.svc-n { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--faint); align-self: start; padding-top: 12px; }
.svc-t { display: block; font-size: clamp(24px, 2.5vw, 38px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 450; transition: transform 0.5s var(--ease), color 0.3s; }
.svc-d { display: block; margin-top: 8px; color: var(--muted); font-size: 15.5px; max-width: 520px; }
.svc-plus { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); transition: background-color 0.3s, border-color 0.3s, transform 0.5s var(--ease); }
.svc-plus::before, .svc-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; background: currentColor; transition: transform 0.4s var(--ease); }
.svc-plus::after { transform: rotate(90deg); }
.svc-btn:hover .svc-t { transform: translateX(8px); }
.svc-btn:hover .svc-plus { background: var(--aqua); border-color: var(--aqua); }
.svc-btn[aria-expanded="true"] .svc-plus { background: var(--ink); border-color: var(--ink); color: var(--white); transform: rotate(180deg); }
.svc-btn[aria-expanded="true"] .svc-plus::after { transform: rotate(0); }
.svc-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease); }
.svc-more > div { overflow: hidden; }
.svc.is-open .svc-more { grid-template-rows: 1fr; }
.svc-more-in { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; padding: 0 56px 30px 70px; }
.svc-more ul { display: grid; gap: 8px; }
.svc-more li { position: relative; padding-left: 20px; font-size: 15px; }
.svc-more li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 1px; background: var(--aqua-deep); }
.svc-float {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  width: 240px;
  aspect-ratio: 4 / 5;
  border-radius: var(--r);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.85);
  transition: opacity 0.35s, transform 0.5s var(--ease);
  box-shadow: 0 30px 60px rgba(6, 24, 44, 0.25);
}
.svc-float.is-on { opacity: 1; }
.svc-float img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   PORTAFOLIO (home)
   ========================================================================== */
.work-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(44px, 6vw, 84px); }
.work-head .sec-idx { grid-column: 1 / -1; }
.work-side { display: grid; gap: 22px; justify-items: start; }
.work-note { display: flex; align-items: center; gap: 10px; color: var(--on-ink-faint); margin-top: -8px; }
.work-note::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); }

.work-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(36px, 5vw, 72px) clamp(16px, 2vw, 28px); }
.work-grid > .pcard { grid-column: span 6; }
.work-grid > .pcard:nth-child(5n+1) { grid-column: 1 / span 7; }
.work-grid > .pcard:nth-child(5n+2) { grid-column: 9 / span 4; margin-top: clamp(40px, 12vw, 180px); }
.work-grid > .pcard:nth-child(5n+3) { grid-column: 1 / span 4; }
.work-grid > .pcard:nth-child(5n+4) { grid-column: 5 / span 4; margin-top: clamp(20px, 6vw, 90px); }
.work-grid > .pcard:nth-child(5n+5) { grid-column: 9 / span 4; }
.work-grid > .pcard:nth-child(5n+1) .pcard-media { aspect-ratio: 16 / 11; }
.work-grid > .pcard:nth-child(5n+2) .pcard-media { aspect-ratio: 4 / 5; }
.work-empty { grid-column: 1 / -1; padding: 60px 0; color: var(--on-ink-muted); font-size: 18px; border-top: 1px solid var(--line-dark); }
[data-nav-dark] .work-empty { color: var(--on-ink-muted); }

/* tarjeta de proyecto */
.pcard { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pcard-media { position: relative; display: block; aspect-ratio: 4 / 4.4; border-radius: var(--r); overflow: hidden; background: var(--ink-2); }
.pcard-media .tx { position: absolute; inset: 0; }
.pcard-media .tx img, .pcard-media .tx video { transition: transform 1.6s var(--ease), filter 0.6s; }
.pcard:hover .pcard-media .tx.in img, .pcard:hover .pcard-media .tx.in video { transform: scale(1.04); }
.pcard-tags { position: absolute; left: 14px; top: 14px; right: 14px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.pcard-cap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: start; gap: 14px; padding-top: 2px; }
.pcard-n { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--faint); padding-top: 6px; }
[data-nav-dark] .pcard-n { color: var(--on-ink-faint); }
.pcard-title { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 500; text-wrap: balance; }
.pcard-sub { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
[data-nav-dark] .pcard-sub { color: var(--on-ink-muted); }
.pcard-year { font-family: var(--f-mono); font-size: 11px; color: var(--faint); padding-top: 6px; }
[data-nav-dark] .pcard-year { color: var(--on-ink-faint); }
.pcard-go { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); transition: background-color 0.3s, border-color 0.3s, transform 0.5s var(--ease); }
[data-nav-dark] .pcard-go { border-color: var(--line-dark-2); }
.pcard-go .ar { width: 13px; height: 13px; }
.pcard:hover .pcard-go { background: var(--aqua); border-color: var(--aqua); color: var(--ink); transform: rotate(45deg); }
.pcard.sk { background: none; }
.pcard.sk .pcard-media { background: rgba(255, 255, 255, 0.06); }
.pcard.sk .pcard-cap i { display: block; height: 12px; border-radius: 6px; background: rgba(6, 24, 44, 0.08); }
[data-nav-dark] .pcard.sk .pcard-cap i { background: rgba(255, 255, 255, 0.08); }

/* ==========================================================================
   ESCLUSAS — el método, como un barco que sube por el Canal
   ========================================================================== */
.locks { position: relative; height: 420vh; background: var(--paper); }
.locks-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; padding-top: calc(var(--nav-h) + clamp(12px, 3vh, 36px)); }
.locks-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(32px, 5vw, 80px); align-items: end; }
.locks-top .h2 { font-size: clamp(36px, 4.6vw, 76px); }
.locks-top .lead { justify-self: end; }
.locks-stage { position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: center; min-height: 0; }
.locks-steps { position: relative; display: grid; gap: 0; align-self: center; }
.locks-steps li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  color: var(--faint);
  transition: color 0.4s;
}
.locks-steps li:last-child { border-bottom: 1px solid var(--line); }
.locks-steps b { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; padding-top: 7px; }
.locks-steps h3 { font-size: clamp(20px, 1.9vw, 28px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 450; }
.locks-steps p { display: grid; grid-template-rows: 0fr; overflow: hidden; color: var(--muted); font-size: 15px; transition: grid-template-rows 0.6s var(--ease), margin 0.6s var(--ease), opacity 0.4s; opacity: 0; }
.locks-steps p > span { min-height: 0; }
.locks-steps li.is-on { color: var(--text); }
.locks-steps li.is-on b { color: var(--aqua-deep); }
.locks-steps li.is-on p { grid-template-rows: 1fr; margin-top: 6px; opacity: 1; }
.locks-steps li.is-done { color: var(--muted); }
.locks-art { position: relative; height: 100%; max-height: 62vh; min-height: 0; display: flex; align-items: center; }
.locks-art svg { width: 100%; height: 100%; overflow: visible; }
.locks-meter { position: absolute; right: 0; top: 4%; display: grid; justify-items: end; gap: 4px; text-align: right; }
.locks-meter b { font-size: clamp(40px, 5vw, 76px); line-height: 1; font-weight: 450; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.locks-meter span { color: var(--muted); }
.locks-bar { display: flex; gap: 6px; padding-bottom: clamp(18px, 3vh, 32px); margin-right: 170px; }
.locks-bar i { flex: 1; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; position: relative; }
.locks-bar i::after { content: ""; position: absolute; inset: 0; background: var(--aqua); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* elementos del dibujo */
.lk-rock { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.lk-hatch { stroke: rgba(6, 24, 44, 0.18); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lk-water { fill: url(#lk-water-g); }
.lk-surface { fill: none; stroke: var(--aqua-deep); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.lk-sea { fill: url(#lk-sea-g); }
.lk-gate { stroke: var(--ink); stroke-width: 3; stroke-linecap: square; vector-effect: non-scaling-stroke; transition: transform 0.7s var(--ease); transform-box: fill-box; transform-origin: 50% 0; }
.lk-gate.is-open { transform: scaleY(0.08); }
.lk-lbl { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; fill: var(--muted); text-transform: uppercase; }
.lk-dim { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.lk-hull { fill: var(--ink); }
.lk-deck { fill: var(--white); stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lk-box1 { fill: var(--aqua); }
.lk-box2 { fill: var(--coral); }
.lk-box3 { fill: var(--sun); }
.lk-name { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.1em; fill: var(--white); }
.lk-lake-lbl { font-family: var(--f-serif); font-style: italic; font-size: 26px; fill: var(--aqua-deep); }

/* ==========================================================================
   POR QUÉ ELEGIRNOS — ficha técnica
   ========================================================================== */
.why-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 110px); }
.why-left { display: grid; align-content: start; gap: 26px; }
.why-stat { margin-top: clamp(16px, 3vw, 40px); padding: clamp(24px, 3vw, 36px); border-radius: var(--r-lg); background: var(--ink); color: var(--on-ink); display: grid; gap: 10px; position: relative; overflow: hidden; }
.why-stat::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(60, 211, 218, 0.35); box-shadow: 0 0 0 30px rgba(60, 211, 218, 0.05), 0 0 0 60px rgba(60, 211, 218, 0.03); }
.why-stat b { font-size: clamp(64px, 8vw, 120px); line-height: 0.9; letter-spacing: -0.06em; font-weight: 450; }
.why-stat b small { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 0.6em; color: var(--aqua-hi); letter-spacing: 0; }
.why-stat p { color: var(--on-ink-muted); max-width: 300px; }
.why-list { border-top: 1px solid var(--line-2); }
.why-row { display: grid; grid-template-columns: 54px minmax(0, 4fr) minmax(0, 6fr); gap: 16px 24px; padding: 28px 0; border-bottom: 1px solid var(--line-2); align-items: baseline; }
.why-row i { font-family: var(--f-mono); font-style: normal; font-size: 12px; color: var(--faint); }
.why-row h3 { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 450; }
.why-row p { color: var(--muted); font-size: 16px; }
.why-row:hover h3 em { color: var(--aqua-deep); }

/* ==========================================================================
   MOLA DE TU MARCA
   ========================================================================== */
.mola { overflow: hidden; }
.mola-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 90px); align-items: center; }
.mola-copy { display: grid; gap: 24px; align-content: start; }
.mola-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 6px; }
.mola-field { flex: 1 1 240px; display: grid; gap: 8px; }
.mola-field span { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-faint); }
.mola-field input {
  height: 56px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--line-dark-2);
  background: rgba(255, 255, 255, 0.04);
  color: var(--white);
  font-size: 18px;
  letter-spacing: -0.01em;
  outline: none;
  transition: border-color 0.3s, background-color 0.3s;
}
.mola-field input::placeholder { color: var(--on-ink-faint); }
.mola-field input:focus { border-color: var(--aqua-hi); background: rgba(255, 255, 255, 0.07); }
.mola-form .btn { min-height: 56px; }
.mola-palettes { display: flex; flex-wrap: wrap; gap: 8px; }
.mola-pal { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 8px; border-radius: 999px; border: 1px solid var(--line-dark-2); font-size: 13.5px; color: var(--on-ink-muted); transition: border-color 0.3s, color 0.3s, background-color 0.3s; }
.mola-pal i { display: flex; }
.mola-pal i span { width: 10px; height: 22px; }
.mola-pal i span:first-child { border-radius: 11px 0 0 11px; }
.mola-pal i span:last-child { border-radius: 0 11px 11px 0; }
.mola-pal[aria-pressed="true"] { border-color: var(--aqua-hi); color: var(--white); background: rgba(60, 211, 218, 0.1); }
.mola-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.mola-actions .link-ar { color: var(--aqua-hi); }
.mola-note { color: var(--on-ink-faint); font-size: 13.5px; max-width: 480px; }
.mola-panel { position: relative; margin: 0; }
.mola-frame {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #111;
  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.mola-frame canvas { width: 100%; height: 100%; }
.mola-frame.is-sewing canvas { animation: sew 0.7s var(--ease); }
@keyframes sew { from { filter: saturate(0) brightness(1.4); transform: scale(1.02); } to { filter: none; transform: none; } }
.mola-panel figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; color: var(--on-ink-faint); }
.mola-panel figcaption b { color: var(--on-ink); font-weight: 500; }

/* ==========================================================================
   MARCAS
   ========================================================================== */
.logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); }
.logo { display: grid; place-items: center; aspect-ratio: 3 / 2; padding: clamp(14px, 2vw, 30px); border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: var(--paper); transition: background-color 0.4s; }
.logo:hover { background: var(--white); }
.logo img { max-width: 100%; max-height: 72px; object-fit: contain; filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; opacity: 0.82; transition: filter 0.4s, opacity 0.4s; }
.logo:hover img { filter: none; opacity: 1; }
.logos-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 18px; color: var(--muted); }
.logos-count { font-size: 15px; color: var(--text); }
.logos-count b { font-weight: 600; }

/* ==========================================================================
   PRESENCIA REGIONAL
   ========================================================================== */
.region-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.region-copy { display: grid; gap: 26px; align-content: start; }
.mkts { border-top: 1px solid var(--line-dark); }
.mkt { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; padding: 16px 0; border-bottom: 1px solid var(--line-dark); text-align: left; transition: padding 0.4s var(--ease), color 0.3s; color: var(--on-ink-muted); }
.mkt-flag { width: 36px; height: 24px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); }
.mkt-flag svg { width: 100%; height: 100%; }
.mkt-name { font-size: 19px; letter-spacing: -0.02em; color: var(--on-ink); }
.mkt-name small { display: block; font-size: 13.5px; color: var(--on-ink-faint); letter-spacing: 0; margin-top: 2px; }
.mkt-st { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-dark-2); }
.mkt.is-here .mkt-st { background: var(--aqua); border-color: var(--aqua); color: var(--ink); }
.mkt.is-focus { padding-left: 10px; }
.mkt.is-focus .mkt-name { color: var(--aqua-hi); }
.presence { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--on-ink-faint); }
.presence b { color: var(--on-ink-muted); font-weight: 500; }
.zenit { display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: var(--r); border: 1px solid var(--line-dark); }
.zenit img { width: 110px; height: auto; filter: brightness(0) invert(1); opacity: 0.9; }
.zenit small { display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-faint); }
.zenit strong { font-weight: 450; font-size: 15px; color: var(--on-ink-muted); }

.amap { position: relative; aspect-ratio: 1.12; border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(120% 90% at 70% 80%, rgba(19, 182, 195, 0.14), transparent 60%), var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-dark); }
.amap-holder { position: absolute; inset: 0; }
.amap-holder svg { width: 100%; height: 100%; }
.amap .land path, .amap .land { fill: rgba(255, 255, 255, 0.05); stroke: rgba(255, 255, 255, 0.16); stroke-width: 0.5; }
.amap .amk, .amap .amk path { fill: rgba(255, 255, 255, 0.12); stroke: rgba(255, 255, 255, 0.35); cursor: pointer; transition: fill 0.4s; }
.amap .amk.is-focus, .amap .amk.is-focus path { fill: var(--cc, var(--aqua)); fill-opacity: 0.55; }
.amap .amk.is-here, .amap .amk.is-here path { fill: var(--aqua); fill-opacity: 0.85; stroke: var(--aqua-hi); }
.amap .lake, .amap .lake path { fill: var(--ink-2); stroke: rgba(255, 255, 255, 0.12); }
.amap-pin .dot { fill: var(--sun); }
.amap-pin .ping { fill: none; stroke: var(--sun); stroke-width: 0.6; animation: mapping 2.6s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes mapping { from { transform: scale(1); opacity: 1; } to { transform: scale(6); opacity: 0; } }
.amap-route { fill: none; stroke: var(--aqua-hi); stroke-width: 0.7; stroke-dasharray: 2 2.5; opacity: 0.7; }
.amap-tag { position: absolute; left: 18px; top: 18px; color: var(--on-ink-faint); }
.amap-card {
  position: absolute;
  right: 16px;
  top: 16px;
  width: min(320px, calc(100% - 32px));
  padding: 18px 18px 16px;
  border-radius: var(--r);
  background: rgba(6, 24, 44, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-dark);
  display: grid;
  gap: 10px;
}
.amap-card.is-in { animation: cardin 0.6s var(--ease); }
@keyframes cardin { from { opacity: 0; transform: translateY(10px); } }
.amap-top { display: flex; align-items: center; gap: 12px; }
.amap-flag { width: 34px; height: 23px; border-radius: 3px; overflow: hidden; flex: none; }
.amap-flag svg { width: 100%; height: 100%; }
.amap-cn { font-size: 20px; letter-spacing: -0.02em; color: var(--white); }
.amap-badge { margin-left: auto; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-faint); }
.amap-badge.is-here { color: var(--aqua-hi); }
.amap-loc { color: var(--on-ink-muted); font-size: 14px; }
.amap-loc b { display: block; color: var(--on-ink); font-weight: 500; }
.amap-go { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--on-ink-faint); }
.amap-go.is-live { color: var(--aqua-hi); border-bottom: 1px solid currentColor; }
.amap-go .ar { width: 12px; height: 12px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 110px); }
.faq-list { border-top: 1px solid var(--line-2); }
.faq-list details { border-bottom: 1px solid var(--line-2); }
.faq-list summary { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 16px; align-items: center; padding: 24px 0; cursor: pointer; list-style: none; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.25; letter-spacing: -0.025em; font-weight: 450; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 20px; font-weight: 300; transition: transform 0.4s var(--ease), background-color 0.3s; }
.faq-list details[open] summary::after { transform: rotate(45deg); background: var(--aqua); border-color: var(--aqua); }
.faq-list details p { padding: 0 52px 26px 0; color: var(--muted); font-size: 16.5px; max-width: 700px; }

/* ==========================================================================
   BLOG
   ========================================================================== */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px); }
.post { display: flex; flex-direction: column; gap: 14px; }
.post .tx { aspect-ratio: 16 / 11; border-radius: var(--r); }
.post.is-feat { grid-column: span 2; }
.post.is-feat .tx { aspect-ratio: 16 / 9; }
.post-meta { display: flex; gap: 12px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); }
.post-meta b { color: var(--aqua-deep); font-weight: 500; }
.post-t { font-size: clamp(21px, 1.9vw, 28px); line-height: 1.12; letter-spacing: -0.03em; font-weight: 450; text-wrap: balance; }
.post-x { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post .link-ar { align-self: flex-start; margin-top: 4px; }
.blog-empty { grid-column: 1 / -1; display: grid; gap: 18px; justify-items: start; padding: clamp(32px, 6vw, 80px) 0; border-top: 1px solid var(--line-2); }
.blog-empty-n { font-size: clamp(80px, 14vw, 200px); line-height: 0.8; letter-spacing: -0.07em; color: var(--aqua); font-weight: 400; }
.blog-empty h2 { font-size: clamp(30px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 450; max-width: 780px; }
.blog-empty p { color: var(--muted); max-width: 560px; }
.blog-empty-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* ==========================================================================
   CONTACTO + PIE
   ========================================================================== */
.contact { padding-top: var(--sec); overflow: hidden; }
.contact-head { display: grid; gap: 26px; margin-bottom: clamp(44px, 6vw, 80px); }
.contact-head .h2 { font-size: clamp(44px, 7vw, 120px); max-width: 1200px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 100px); align-items: start; }

.cform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.field { display: grid; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field span { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  font-size: 17px;
  outline: none;
  transition: border-color 0.3s;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 92px; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237c8793' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; background-size: 16px; padding-right: 28px; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field select:has(option[value=""]:checked) { color: var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--aqua); }
.was-validated .field input:invalid, .was-validated .field select:invalid { border-color: var(--coral); }
.check { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: var(--muted); cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--aqua); }
.check a { text-decoration: underline; text-underline-offset: 3px; }
.cform-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 6px; }
.cform-msg { font-size: 14.5px; color: var(--muted); }
.cform-msg.is-err { color: var(--coral); }
.cform-msg a { text-decoration: underline; }
.cform-done { display: grid; gap: 18px; justify-items: start; padding: 32px 0; font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.02em; line-height: 1.3; }
.cform-done .ok { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--aqua); color: var(--ink); }
.cform-done .ok svg { width: 26px; height: 26px; }

/* formulario sobre tinta */
.contact .field span { color: var(--on-ink-faint); }
.contact .field input, .contact .field select, .contact .field textarea { border-color: var(--line-dark-2); color: var(--white); }
.contact .field select option { color: var(--ink); }
.contact .field input::placeholder, .contact .field textarea::placeholder { color: rgba(238, 243, 246, 0.32); }
.contact .field select:has(option[value=""]:checked) { color: rgba(238, 243, 246, 0.42); }
.contact .field input:focus, .contact .field select:focus, .contact .field textarea:focus { border-color: var(--aqua-hi); }
.contact .check { color: var(--on-ink-muted); }
.contact .cform-msg { color: var(--on-ink-muted); }
.contact .cform-msg.is-err { color: #ff8a73; }

.contact-info { display: grid; gap: 28px; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-lg); border: 1px solid var(--line-dark); background: rgba(255, 255, 255, 0.025); }
.contact-info > p { color: var(--on-ink-muted); }
.contact-info .btn--wa { justify-self: start; }
.ci-group { display: grid; gap: 6px; justify-items: start; }
.ci-group h3 { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aqua-hi); margin-bottom: 4px; }
.ci-group a:not(.btn), .ci-group span { font-size: 16.5px; color: var(--on-ink); }
.ci-group a:not(.btn):hover { color: var(--aqua-hi); }
.ci-group [data-set="phones"] { display: grid; gap: 4px; }
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid var(--line-dark-2); font-size: 13.5px !important; color: var(--on-ink-muted) !important; transition: border-color 0.3s, color 0.3s; }
.mk-chip i { width: 20px; height: 14px; border-radius: 2px; overflow: hidden; }
.mk-chip i svg { width: 100%; height: 100%; }
a.mk-chip:hover { border-color: var(--aqua-hi); color: var(--white) !important; }
.mk-chip.is-here { border-color: var(--aqua); color: var(--white) !important; }

.foot-word {
  margin-top: clamp(64px, 9vw, 140px);
  font-size: clamp(88px, 21.5vw, 360px);
  line-height: 0.74;
  letter-spacing: -0.075em;
  font-weight: 500;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
  white-space: nowrap;
  user-select: none;
  text-align: center;
  transform: translateY(8%);
}
.foot-word em { -webkit-text-stroke: 0; color: var(--aqua-hi); font-size: 0.9em; letter-spacing: -0.02em; }
.foot-bar { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding: 24px 0 30px; border-top: 1px solid var(--line-dark); color: var(--on-ink-faint); font-size: 14px; }
.foot-bar a:hover { color: var(--aqua-hi); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-zenit { display: inline-flex; align-items: center; gap: 10px; }
.foot-zenit img { width: 70px; filter: brightness(0) invert(1); opacity: 0.7; }

/* ---------- nivel (indicador de progreso) ---------- */
.level {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: rgba(243, 241, 236, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.4s, color 0.4s, border-color 0.4s, opacity 0.4s;
}
.level.is-dark { background: rgba(11, 36, 64, 0.8); color: var(--on-ink); border-color: var(--line-dark); }
.level-gauge { position: relative; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 1px currentColor; }
.level-water { position: absolute; inset: 0; background: var(--aqua); transform: translateY(calc((1 - var(--p, 0)) * 100%)); }
.level-water::before { content: ""; position: absolute; left: -20%; right: -20%; top: -3px; height: 6px; border-radius: 50%; background: var(--aqua-hi); }
.level-lbl { min-width: 60px; }
.level-m { color: var(--aqua-deep); font-variant-numeric: tabular-nums; }
.level.is-dark .level-m { color: var(--aqua-hi); }
body.menu-open .level, .level.is-end { opacity: 0; pointer-events: none; }

.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 74px;
  z-index: 80;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 10px 30px rgba(6, 24, 44, 0.25);
  transition: transform 0.4s var(--ease), background-color 0.3s;
}
.back-to-top svg { width: 18px; height: 18px; }
.back-to-top:hover { background: var(--aqua); color: var(--ink); transform: translateY(-3px); }

/* ---------- cursor con rótulo ---------- */
.cur-lbl {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 300;
  pointer-events: none;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--aqua);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  scale: 0.6;
  transition: opacity 0.25s, scale 0.35s var(--ease);
}
body.cur-has-label .cur-lbl { opacity: 1; scale: 1; }
body.cur-out .cur-lbl { opacity: 0; }

/* ---------- diálogo: solicitar propuesta ---------- */
.appointment {
  width: min(760px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: clamp(24px, 4vw, 44px);
  border: 0;
  border-radius: var(--r-lg);
  background: var(--paper);
  color: var(--text);
  box-shadow: 0 40px 120px rgba(6, 24, 44, 0.45);
  overflow: auto;
}
.appointment::backdrop { background: rgba(6, 24, 44, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.appointment[open] { animation: dlg 0.5s var(--ease); }
@keyframes dlg { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
.appointment-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.appointment-eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aqua-deep); margin-bottom: 8px; }
.appointment h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1; letter-spacing: -0.045em; font-weight: 450; }
.appointment-close { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); font-size: 24px; line-height: 1; transition: background-color 0.3s; }
.appointment-close:hover { background: var(--aqua); border-color: var(--aqua); }
#appointment-description { margin: 12px 0 26px; color: var(--muted); }

/* ==========================================================================
   PÁGINAS INTERNAS
   ========================================================================== */
.page-head { padding-top: calc(var(--nav-h) + clamp(48px, 8vw, 110px)); padding-bottom: clamp(40px, 5vw, 64px); display: grid; gap: 26px; }
.page-h1 { font-size: clamp(50px, 8vw, 138px); line-height: 0.92; letter-spacing: -0.058em; font-weight: 450; max-width: 1240px; text-wrap: balance; }
.page-h1 em { color: var(--aqua-hi); }
.page-head--light .page-h1 em { color: var(--aqua-deep); }
.pf-intro { max-width: 620px; font-size: clamp(17px, 1.4vw, 20px); color: var(--on-ink-muted); }
.page-dark { background: var(--ink); color: var(--on-ink); }
.pf-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; margin-top: 12px; }
.pf-search { flex: 1 1 320px; max-width: 520px; display: grid; gap: 8px; }
.pf-search span { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-faint); }
.pf-search input { height: 54px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line-dark-2); background: rgba(255, 255, 255, 0.04); color: var(--white); outline: none; font-size: 16px; transition: border-color 0.3s; }
.pf-search input:focus { border-color: var(--aqua-hi); }
.pf-search input::placeholder { color: var(--on-ink-faint); }
.pf-clear { color: var(--aqua-hi); font-size: 14px; border-bottom: 1px solid currentColor; padding-bottom: 2px; margin-bottom: 16px; }
.pf-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 22px; border-top: 1px solid var(--line-dark); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-dark-2); font-size: 14px; color: var(--on-ink-muted); transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.tab sup { font-family: var(--f-mono); font-size: 10px; color: var(--on-ink-faint); top: -0.5em; }
.tab:hover { border-color: var(--on-ink-muted); color: var(--white); }
.tab.is-on { background: var(--aqua); border-color: var(--aqua); color: var(--ink); }
.tab.is-on sup { color: var(--ink); }
.pf-count { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-ink-faint); }
.pf-count b { color: var(--white); font-weight: 500; }
.pf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 5vw, 64px) clamp(16px, 2vw, 28px); padding-block: clamp(36px, 5vw, 64px) var(--sec); }
.pf-grid .pcard:nth-child(6n+1), .pf-grid .pcard:nth-child(6n+5) { grid-column: span 2; }
.pf-grid .pcard:nth-child(6n+1) .pcard-media, .pf-grid .pcard:nth-child(6n+5) .pcard-media { aspect-ratio: 16 / 10.4; }
.pf-grid .pcard .pcard-media { aspect-ratio: 4 / 4.6; }
.pf-grid.is-swap .pcard { animation: swap 0.7s var(--ease) both; }
.pf-grid.is-swap .pcard:nth-child(2) { animation-delay: 0.05s; }
.pf-grid.is-swap .pcard:nth-child(3) { animation-delay: 0.1s; }
@keyframes swap { from { opacity: 0; transform: translateY(20px); } }
.pf-empty { grid-column: 1 / -1; padding: 60px 0; display: grid; gap: 10px; color: var(--on-ink-muted); }
.pf-empty h2 { color: var(--white); font-size: clamp(26px, 3vw, 40px); letter-spacing: -0.035em; font-weight: 450; }
.pf-sep { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 28px; align-items: end; padding-top: 26px; border-top: 1px solid var(--line-dark); }
.pf-sep h2 { font-size: clamp(28px, 3.4vw, 52px); line-height: 1; letter-spacing: -0.045em; font-weight: 450; }
.pf-sep p { color: var(--on-ink-muted); max-width: 560px; justify-self: end; }

.cta-band {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  padding: clamp(32px, 5vw, 64px);
  margin-bottom: 32px;
  border-radius: var(--r-lg);
  background: var(--aqua);
  color: var(--ink);
  overflow: hidden;
}
.cta-band::after { content: ""; position: absolute; right: -90px; top: -90px; width: 280px; height: 280px; border-radius: 50%; background: var(--sun); opacity: 0.9; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(36px, 5vw, 76px); line-height: 0.96; letter-spacing: -0.05em; font-weight: 450; max-width: 820px; }
.cta-band p { margin-top: 14px; max-width: 520px; font-size: 17px; color: rgba(6, 24, 44, 0.75); }
.foot-mini { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 26px 0 34px; border-top: 1px solid var(--line-2); color: var(--muted); font-size: 14px; }
.page-dark .foot-mini, .foot-mini.on-dark { border-color: var(--line-dark); color: var(--on-ink-faint); }
.foot-mini a:hover { color: var(--aqua-deep); }
.page-dark .foot-mini a:hover { color: var(--aqua-hi); }

/* detalle de proyecto */
.pj-hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: end; padding-top: calc(var(--nav-h) + clamp(40px, 6vw, 90px)); padding-bottom: clamp(56px, 7vw, 110px); }
.back { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-muted); }
.back .ar { width: 13px; height: 13px; transform: rotate(-135deg); }
.back:hover { color: var(--aqua-hi); }
.pj-copy { display: grid; gap: 22px; align-content: end; justify-items: start; }
.pj-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aqua-hi); }
.pj-kicker .chip--net { height: 26px; }
.pj-title { font-size: clamp(46px, 7vw, 116px); line-height: 0.92; letter-spacing: -0.058em; font-weight: 450; color: var(--white); text-wrap: balance; }
.pj-desc { font-size: clamp(17px, 1.4vw, 20px); color: var(--on-ink-muted); max-width: 580px; }
.pj-meta { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: 0; width: 100%; border-top: 1px solid var(--line-dark); }
.pj-meta > div { padding: 16px 18px 0 0; }
.pj-meta > div + div { padding-left: 18px; border-left: 1px solid var(--line-dark); }
.pj-meta dt { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-faint); }
.pj-meta dd { margin-top: 4px; color: var(--on-ink); }
.pj-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pj-net { font-size: 14px; color: var(--on-ink-faint); max-width: 520px; }
.pj-net a { color: var(--aqua-hi); border-bottom: 1px solid currentColor; }
.pj-media { position: relative; }
.pj-media .tx { aspect-ratio: 4 / 5; border-radius: var(--r-lg); max-height: 76vh; margin-left: auto; }
.pj-media.is-wide .tx { aspect-ratio: 4 / 3.4; }
.pj-media figcaption { display: flex; justify-content: space-between; margin-top: 12px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-faint); }
.pj-media figcaption b { color: var(--aqua-hi); font-weight: 500; }
.pj-body { background: var(--paper); color: var(--text); padding-block: var(--sec); }
.pj-sec { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(24px, 4vw, 64px); }
.pj-sec + .pj-sec { margin-top: var(--sec); }
.pj-sec > .sec-idx { align-self: start; position: sticky; top: calc(var(--nav-h) + 24px); }
.pj-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.pj-duo .pj-h { display: flex; align-items: baseline; gap: 12px; font-size: clamp(28px, 3vw, 44px); line-height: 1; letter-spacing: -0.045em; font-weight: 450; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line-2); }
.pj-duo .pj-h i { font-family: var(--f-mono); font-style: normal; font-size: 11px; letter-spacing: 0.06em; color: var(--aqua-deep); }
.pj-duo p { font-size: 17px; line-height: 1.65; color: var(--muted); white-space: pre-line; }
.pj-gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pj-gal figure { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--ink-2); }
.pj-gal figure:nth-child(4n+1) { grid-column: span 2; }
.pj-gal .tx { aspect-ratio: 4 / 4.2; height: 100%; }
.pj-gal figure:nth-child(4n+1) .tx { aspect-ratio: 16 / 10.4; }
.pj-gal video { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 9 / 12; background: #000; }
.pj-next { position: relative; display: block; margin-top: var(--sec); border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 21 / 8; min-height: 280px; color: var(--white); background: var(--ink); }
.pj-next .tx { position: absolute; inset: 0; }
.pj-next .tx img, .pj-next .tx video { opacity: 0.55; }
.pj-next::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 24, 44, 0.85), transparent 70%); }
.pj-next small, .pj-next strong { position: absolute; left: clamp(20px, 3vw, 40px); z-index: 2; }
.pj-next small { bottom: calc(clamp(20px, 3vw, 40px) + clamp(40px, 5vw, 72px) + 10px); font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aqua-hi); }
.pj-next strong { bottom: clamp(20px, 3vw, 40px); right: clamp(20px, 3vw, 40px); display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; font-size: clamp(34px, 5vw, 72px); line-height: 1; letter-spacing: -0.05em; font-weight: 450; }
.pj-next strong .ar { width: clamp(28px, 3vw, 44px); height: clamp(28px, 3vw, 44px); flex: none; transition: transform 0.5s var(--ease); }
.pj-next:hover strong .ar { transform: rotate(45deg); }
.project-viewer { width: min(1100px, calc(100% - 24px)); padding: 0; border: 0; border-radius: var(--r); background: #000; overflow: visible; }
.project-viewer::backdrop { background: rgba(3, 12, 22, 0.88); }
.project-viewer video { width: 100%; max-height: 86vh; border-radius: var(--r); }
.project-viewer button { position: absolute; right: -8px; top: -52px; width: 44px; height: 44px; border-radius: 50%; background: var(--white); color: var(--ink); font-size: 24px; }
.state { display: grid; gap: 16px; justify-items: start; padding-block: calc(var(--nav-h) + 90px) var(--sec); }
.state h2 { font-size: clamp(38px, 5vw, 76px); line-height: 1; letter-spacing: -0.05em; font-weight: 450; color: var(--white); }
.state p:not(.mono) { color: var(--on-ink-muted); max-width: 520px; }
.state .mono { color: var(--aqua-hi); }

/* artículo */
.article { max-width: 900px; padding-top: calc(var(--nav-h) + clamp(40px, 6vw, 80px)); padding-bottom: var(--sec); display: grid; gap: 22px; }
.article .back { color: var(--muted); }
.article .back:hover { color: var(--aqua-deep); }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); }
.article-meta b { color: var(--aqua-deep); font-weight: 500; }
.article h1 { font-size: clamp(40px, 6vw, 88px); line-height: 0.96; letter-spacing: -0.052em; font-weight: 450; text-wrap: balance; }
.article-x { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; letter-spacing: -0.015em; color: var(--muted); }
.article-by { font-size: 14px; color: var(--faint); }
.article-cover .tx { aspect-ratio: 16 / 9; border-radius: var(--r-lg); }
.article-body { display: grid; gap: 1.2em; font-size: 18.5px; line-height: 1.75; color: #1d2d3d; margin-top: 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tags span { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); }
.article .state h2, .article .state p { color: var(--text); }

/* privacidad */
.legal { max-width: 860px; padding-bottom: var(--sec); display: grid; gap: 18px; }
.legal h2 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.03em; font-weight: 500; margin-top: 26px; }
.legal p, .legal li { color: var(--muted); font-size: 17px; line-height: 1.7; }
.legal ul { display: grid; gap: 6px; padding-left: 20px; list-style: disc; }
.legal a { color: var(--aqua-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .nav-time { display: none; }
  .burger { display: block; }
  .hero-meta { grid-template-columns: repeat(2, auto); }
  .hero-meta > :nth-child(n+3) { display: none; }
  .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  :root { --nav-h: 68px; }
  .brand svg { width: 128px; height: 38px; }
  .hero-main { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
  .hero-side { display: contents; }
  .hero-sun-wrap { order: -1; flex: none; min-height: 0; height: clamp(150px, 26vh, 250px); margin: 0 0 8px; }
  .hero-copy { align-self: start; padding-bottom: 22px; }
  .hero-foot { padding-bottom: 32px; max-width: 560px; }
  .hero-sun { width: min(64vw, 320px); right: 0; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stats > div:nth-child(2) { border-right: 0; }
  .hero-stats > div:nth-child(3) { padding-left: 0; }
  .hero-stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .mani-grid, .svc-grid, .why-grid, .mola-grid, .region-grid, .faq-grid, .contact-grid, .work-head, .locks-top, .pj-hero, .pj-sec { grid-template-columns: minmax(0, 1fr); }
  .svc-head { position: static; }
  .mola-grid { gap: 22px; }
  .mola-copy { display: contents; }
  .mola-copy > .sec-idx { order: 0; }
  .mola-copy > .h2 { order: 1; }
  .mola-copy > .lead { order: 2; }
  .mola-panel { order: 3; margin: 6px 0 4px; }
  .mola-form { order: 4; }
  .mola-palettes { order: 5; }
  .mola-actions { order: 6; }
  .mola-note { order: 7; }
  .mani-foot { grid-template-columns: minmax(0, 1fr); }
  .mani-foot > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; }
  .work-grid > .pcard, .work-grid > .pcard:nth-child(n) { grid-column: span 6; margin-top: 0; }
  .work-grid > .pcard:nth-child(5n+1) { grid-column: 1 / -1; }
  .work-grid > .pcard .pcard-media, .work-grid > .pcard:nth-child(n) .pcard-media { aspect-ratio: 4 / 4.4; }
  .work-grid > .pcard:nth-child(5n+1) .pcard-media { aspect-ratio: 16 / 11; }
  .locks { height: 360vh; }
  .locks-top .lead { justify-self: start; display: none; }
  .locks-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; gap: 18px; }
  .locks-art { order: -1; max-height: 46vh; height: auto; flex-direction: column; align-items: stretch; }
  .locks-art svg { height: auto; max-height: 40vh; overflow: hidden; }
  .locks-meter { position: static; justify-items: start; text-align: left; order: -1; margin-bottom: 10px; grid-auto-flow: column; align-items: baseline; gap: 12px; }
  .locks-bar { margin-right: 0; }
  .locks-steps li { display: none; padding: 10px 0; border: 0; }
  .locks-steps li:last-child { border: 0; }
  .locks-steps li.is-on { display: grid; }
  .locks-meter b { font-size: 36px; }
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post.is-feat { grid-column: 1 / -1; }
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-grid .pcard:nth-child(6n+1), .pf-grid .pcard:nth-child(6n+5) { grid-column: 1 / -1; }
  .pf-sep { grid-template-columns: minmax(0, 1fr); }
  .pf-sep p { justify-self: start; }
  .pj-media .tx { margin-left: 0; max-height: 70vh; }
  .pj-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amap { aspect-ratio: 1; }
}

@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .nav-cta { display: none; }
  .hero-title { font-size: clamp(46px, 13.4vw, 72px); }
  .hero-ctas .btn { flex: 1 1 auto; }
  .hero-stats dd { font-size: 30px; }
  .hero-stats > div { padding: 16px 12px 18px 0; }
  .hero-stats > div + div { padding-left: 12px; }
  .hero-stats > div:nth-child(3) { padding-left: 0; }
  .svc-btn { grid-template-columns: 34px minmax(0, 1fr) 36px; gap: 12px; padding: 22px 0; }
  .svc-plus { width: 36px; height: 36px; }
  .svc-more-in { padding: 0 0 26px 46px; }
  .why-row { grid-template-columns: 34px minmax(0, 1fr); }
  .why-row p { grid-column: 2; }
  .work-grid > .pcard, .work-grid > .pcard:nth-child(n) { grid-column: 1 / -1; }
  .pcard-cap { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pcard-year { display: none; }
  .cform { grid-template-columns: minmax(0, 1fr); }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .posts { grid-template-columns: minmax(0, 1fr); }
  .pf-grid { grid-template-columns: minmax(0, 1fr); }
  .pf-grid .pcard .pcard-media, .pf-grid .pcard:nth-child(n) .pcard-media { aspect-ratio: 4 / 4.2; }
  .pj-meta { grid-template-columns: minmax(0, 1fr); }
  .pj-meta > div + div { padding-left: 0; border-left: 0; }
  .pj-duo { grid-template-columns: minmax(0, 1fr); }
  .pj-gal { grid-template-columns: minmax(0, 1fr); }
  .pj-gal figure:nth-child(4n+1) { grid-column: auto; }
  .pj-next { aspect-ratio: 4 / 3; }
  .faq-list details p { padding-right: 0; }
  .level-lbl { display: none; }
  .level { right: 12px; bottom: 14px; }
  .back-to-top { right: 12px; bottom: 62px; }
  .amap-card { left: 12px; right: 12px; top: 12px; width: auto; }
  .amap-tag { display: none; }
  .foot-word { -webkit-text-stroke-width: 0.6px; }
}

@media (hover: none) {
  .svc-float { display: none; }
}