/*===============================================================
  GTR — "INSTRUMENTO"  ·  Dark cinematic premium layer  ·  v4
  Loads AFTER main.css / services.css / certifications.css.

  HOME (body.premium-dark): full dark, instrument-grade experience —
  kinetic hero, wireframe-globe atmosphere, film grain, duotone
  photography, custom cursor, magnetic CTAs, credential marquee.

  INNER PAGES keep their existing light system; only the photographic
  service / cert hero rules at the very bottom apply to them.
===============================================================*/

/*===============================================================
  DARK TOKENS  (scoped — never leak to inner light pages)
===============================================================*/
.premium-dark {
  /* Deep ROYAL-BLUE base — brand-forward (blue predominant, not black) */
  --bg:        #07193b;
  --bg-2:      #0a2150;
  --surface:   #0e2a63;
  --surface-2: #163c84;
  --line:      rgba(130, 175, 235, 0.20);
  --line-soft: rgba(130, 175, 235, 0.11);

  --text:      #f3f7fe;   /* white-dominant typography */
  --text-dim:  rgba(228, 238, 253, 0.78);   /* AA on --bg */
  --text-mute: rgba(228, 238, 253, 0.62);   /* AA on --bg for small labels */

  --cy:        #5bbef0;   /* celeste — minor instrument accent */
  --cy-soft:   #93d6f8;
  --eco:       #34cf9e;   /* environmental green — eco band only */
  --red:       #ff2f3e;   /* brand RED — primary accent */
  --red-soft:  #ff6168;

  --r-xl: 28px;
  color: var(--text);
  background: var(--bg);
}

/* base surfaces / typography flips under dark scope */
.premium-dark { background: var(--bg); }
.premium-dark h1,
.premium-dark h2,
.premium-dark h3,
.premium-dark h4 { color: var(--text); }

.premium-dark ::selection { background: var(--cy); color: var(--bg); }

/* accessible focus ring on dark + screen-reader utility */
.premium-dark :focus-visible { outline: 2px solid var(--cy-soft); outline-offset: 3px; }
.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;
}

/* kill the light page wash + grid ghost from main.css */
.premium-dark body::before,
body.premium-dark::before { display: none; }

/*===============================================================
  ATMOSPHERE  ·  animated mesh + film grain  (fixed, behind all)
===============================================================*/
.premium-dark .fx-atmos {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(960px 720px at 82% 4%,  rgba(45, 115, 225, 0.30), transparent 60%),
    radial-gradient(820px 680px at 6% 94%,  rgba(210, 32, 56, 0.12), transparent 62%),
    radial-gradient(760px 600px at 50% 50%, rgba(16, 48, 110, 0.55), transparent 72%),
    var(--bg);
}
.premium-dark .fx-atmos::after {
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(closest-side, rgba(60,130,235,0.12), transparent 70%);
  filter: blur(30px);
  animation: atmosDrift 26s ease-in-out infinite alternate;
}
@keyframes atmosDrift {
  from { transform: translate3d(-6%, -4%, 0) scale(1); }
  to   { transform: translate3d(8%, 6%, 0) scale(1.18); }
}

/* film grain — static SVG noise, zero runtime cost */
.premium-dark .fx-grain {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* thin scroll-progress bar */
.premium-dark .fx-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--cy), var(--eco), var(--red));
  z-index: 1300;
  pointer-events: none;
}

/*===============================================================
  HEADER  ·  dark glass
===============================================================*/
.premium-dark .header {
  background: rgba(8, 15, 28, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
          backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid transparent;
}
.premium-dark .header.scrolled {
  background: rgba(7, 12, 22, 0.86);
  border-bottom-color: var(--line-soft);
}
/* logo sits on a clean light badge so the real brand mark reads on dark */
.premium-dark .nav__logo {
  background: #f3f7fd;
  padding: 7px 14px;
  border-radius: 12px;
  box-shadow: 0 3px 14px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.6);
}
.premium-dark .nav__logo::after { display: none; }
.premium-dark .nav__logo:hover { background: #ffffff; transform: translateY(-1px); }
.premium-dark .nav__logo-img { filter: none; }
.premium-dark .nav__link { color: var(--text-dim); }
.premium-dark .nav__link:hover { color: var(--text); }
.premium-dark .nav__link.active { color: var(--cy-soft); }
.premium-dark .nav__link::after { background: var(--red); }
.premium-dark .nav__toggle { color: var(--text); }
@media (max-width: 768px) {
  .premium-dark .nav__menu { background: var(--bg-2); }
  .premium-dark .nav__close { color: var(--text); }
}

/*===============================================================
  HERO  ·  cinematic, kinetic, NO bounce / NO chips
===============================================================*/
.premium-dark .hero {
  min-height: 100svh;
  background: transparent;
  padding: 10rem 0 6rem;
}
/* remove main.css grid + ghost "15" */
.premium-dark .hero::before,
.premium-dark .hero::after { display: none !important; }
.premium-dark .hero__shape { display: none !important; }

.premium-dark .hero__container {
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s-5);
  align-items: center;
}

/* wireframe globe canvas — echo of the logo, very faint */
.premium-dark .hero__globe {
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: min(80vh, 760px);
  height: min(80vh, 760px);
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 78%);
          mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 78%);
}

.premium-dark .hero__content { position: relative; z-index: 2; animation: none; }

.premium-dark .hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cy-soft);
  margin-bottom: var(--s-4);
}
.premium-dark .hero__eyebrow::before {
  content: '';
  width: 34px; height: 1px;
  background: linear-gradient(90deg, var(--red), transparent);
}

.premium-dark .hero__title {
  font-size: clamp(2.9rem, 6.6vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin-bottom: var(--s-4);
  text-transform: none;
}
.premium-dark .hero__title .line {
  display: block;
  overflow: hidden;
}
.premium-dark .hero__title .line > span {
  display: block;
  transform: translateY(110%);
  animation: lineRise 1s var(--ease) forwards;
}
.premium-dark .hero__title .line:nth-child(1) > span { animation-delay: 0.15s; }
.premium-dark .hero__title .line:nth-child(2) > span { animation-delay: 0.30s; }
.premium-dark .hero__title em {
  font-style: italic;
  color: transparent;
  background: linear-gradient(100deg, var(--red), var(--red-soft));
  -webkit-background-clip: text;
          background-clip: text;
  position: relative;
}
@keyframes lineRise { to { transform: translateY(0); } }

.premium-dark .hero__lede {
  max-width: 46ch;
  color: var(--text-dim);
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: var(--s-4);
  opacity: 0;
  animation: fadeUp 0.9s var(--ease) 0.55s forwards;
}

.premium-dark .hero__actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
  opacity: 0;
  animation: fadeUp 0.9s var(--ease) 0.7s forwards;
}

.premium-dark .hero__meta {
  display: flex;
  gap: var(--s-5);
  opacity: 0;
  animation: fadeUp 0.9s var(--ease) 0.85s forwards;
}
.premium-dark .hero__meta > div { position: relative; }
.premium-dark .hero__meta > div + div::before {
  content: '';
  position: absolute;
  left: calc(var(--s-5) / -2);
  top: 4px; bottom: 4px;
  width: 1px;
  background: var(--line);
}
.premium-dark .hero__meta dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.02em;
}
.premium-dark .hero__meta dd {
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--text-mute);
  letter-spacing: 0.04em;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* hero media — duotone, full-height, clip reveal, scroll parallax (no float) */
.premium-dark .hero__visual {
  position: relative;
  height: clamp(440px, 60vh, 660px);
  z-index: 1;
  animation: none;
}
.premium-dark .hero__media {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 50px 100px -40px rgba(0,0,0,0.8);
  clip-path: inset(0 0 0 0);
  animation: mediaReveal 1.2s var(--ease) 0.2s both;
}
@keyframes mediaReveal {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.premium-dark .hero__media-img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(0.92);
  transform: translateY(var(--media-shift, 0));
  will-change: transform;
}
/* duotone: navy multiply on shadows + celeste screen on highlights */
.premium-dark .hero__media::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(150deg, #0a2c52, #05101f);
  mix-blend-mode: multiply;
}
.premium-dark .hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(150deg, rgba(79,184,232,0.35), rgba(47,198,154,0.10) 60%, transparent);
  mix-blend-mode: screen;
  pointer-events: none;
}
/* measurement frame + scanning line */
.premium-dark .hero__frame {
  position: absolute; inset: 0;
  z-index: 3;
  pointer-events: none;
}
.premium-dark .hero__frame::before { /* corner ticks via gradient borders */
  content: '';
  position: absolute; inset: 14px;
  border-radius: 18px;
  background:
    linear-gradient(var(--cy), var(--cy)) left top / 22px 1px no-repeat,
    linear-gradient(var(--cy), var(--cy)) left top / 1px 22px no-repeat,
    linear-gradient(var(--cy), var(--cy)) right top / 22px 1px no-repeat,
    linear-gradient(var(--cy), var(--cy)) right top / 1px 22px no-repeat,
    linear-gradient(var(--cy), var(--cy)) left bottom / 22px 1px no-repeat,
    linear-gradient(var(--cy), var(--cy)) left bottom / 1px 22px no-repeat,
    linear-gradient(var(--cy), var(--cy)) right bottom / 22px 1px no-repeat,
    linear-gradient(var(--cy), var(--cy)) right bottom / 1px 22px no-repeat;
  opacity: 0.7;
}
.premium-dark .hero__frame::after { /* slow scan line */
  content: '';
  position: absolute;
  left: 14px; right: 14px;
  height: 1px;
  top: 14px;
  background: linear-gradient(90deg, transparent, rgba(127,208,242,0.85), transparent);
  box-shadow: 0 0 14px rgba(79,184,232,0.6);
  animation: scan 5.5s var(--ease-smooth) infinite;
}
@keyframes scan {
  0%, 100% { top: 14px; opacity: 0; }
  8%       { opacity: 1; }
  50%      { top: calc(100% - 14px); opacity: 1; }
  58%      { opacity: 0; }
}
.premium-dark .hero__coord {
  position: absolute;
  z-index: 4;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: rgba(127,208,242,0.85);
  pointer-events: none;
}
.premium-dark .hero__coord--tl { top: 26px; left: 26px; }
.premium-dark .hero__coord--br { bottom: 26px; right: 26px; text-align: right; }

.premium-dark .hero__scroll {
  position: absolute;
  left: 50%; bottom: 1.6rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-mute);
  z-index: 2;
}
.premium-dark .hero__scroll span::before {
  content: '';
  display: inline-block;
  width: 30px; height: 1px;
  margin-right: 0.6rem;
  vertical-align: middle;
  background: var(--cy);
  animation: scrollLine 2.4s var(--ease) infinite;
  transform-origin: left center;
}
@keyframes scrollLine {
  0%, 100% { transform: scaleX(0.4); opacity: 0.5; }
  50%      { transform: scaleX(1);   opacity: 1; }
}

/*===============================================================
  CREDENTIAL MARQUEE  (replaces the trust strip)
===============================================================*/
.premium-dark .trust-strip {
  background: var(--bg-2);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 0;
  overflow: hidden;
}
.premium-dark .trust-strip::before { display: none; }
.premium-dark .marquee {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.premium-dark .marquee__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0;
  padding: 1.15rem 0;
  white-space: nowrap;
  animation: marquee 38s linear infinite;
}
.premium-dark .marquee:hover .marquee__track { animation-play-state: paused; }
.premium-dark .marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0 2.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--text-dim);
}
.premium-dark .marquee__item svg { color: var(--cy); flex-shrink: 0; }
.premium-dark .marquee__item::after {
  content: '';
  width: 5px; height: 5px;
  margin-left: 2.4rem;
  border-radius: 50%;
  background: var(--red);
}
@keyframes marquee { to { transform: translateX(-50%); } }

/*===============================================================
  SECTION HEADERS / GENERIC TEXT under dark
===============================================================*/
.premium-dark .section-header__label { color: var(--cy-soft); }
.premium-dark .section-header__title { color: var(--text); }
.premium-dark .section-header__description { color: var(--text-dim); }

/*===============================================================
  SERVICES  ·  refined dark duotone tiles
===============================================================*/
.premium-dark .services-overview { padding-top: var(--s-6); }
.premium-dark .services-grid {
  gap: var(--s-3);
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.premium-dark .service-card {
  min-height: 380px;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  overflow: hidden;
  justify-content: flex-end;
  box-shadow: 0 30px 60px -40px rgba(0,0,0,0.8);
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.premium-dark .service-card > .service-card__bg { /* lazy-loaded photo layer, duotone */
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
}
.premium-dark .service-card__bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.62);
  transform: scale(1.06);
  transition: transform 1s var(--ease), filter .6s var(--ease);
}
.premium-dark .service-card::before { /* navy scrim + counter */
  content: counter(service, decimal-leading-zero);
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(5,9,15,0.10) 0%, rgba(5,9,15,0.55) 46%, rgba(5,9,15,0.96) 100%),
    linear-gradient(150deg, rgba(10,44,82,0.55), transparent 60%);
  color: var(--text-mute);
  font-family: var(--font-display);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  padding: var(--s-3);
  text-align: right;
  transition: background .5s var(--ease);
}
.premium-dark .service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(79,184,232,0.5);
  box-shadow: 0 50px 90px -40px rgba(0,0,0,0.9), 0 0 0 1px rgba(79,184,232,0.18);
}
.premium-dark .service-card:hover .service-card__bg img { transform: scale(1.12); filter: grayscale(0.55) contrast(1.05) brightness(0.72); }
.premium-dark .service-card:hover::before {
  background:
    linear-gradient(180deg, rgba(5,9,15,0.05) 0%, rgba(5,9,15,0.45) 45%, rgba(5,9,15,0.95) 100%),
    linear-gradient(0deg, rgba(239,59,70,0.25), transparent 42%);
}
.premium-dark .service-card > * { position: relative; z-index: 1; }
.premium-dark .service-card__icon {
  width: 54px; height: 54px;
  color: var(--text);
  border: 1px solid rgba(127,208,242,0.45);
  background: rgba(127,208,242,0.08);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  margin-bottom: auto;
}
.premium-dark .service-card:hover .service-card__icon {
  color: var(--bg); background: var(--cy); border-color: var(--cy);
  transform: rotate(-4deg) scale(1.05);
}
.premium-dark .service-card__title {
  color: var(--text);
  margin-top: var(--s-3);
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}
.premium-dark .service-card__description {
  color: var(--text-dim);
  max-height: 0; opacity: 0; overflow: hidden;
  transform: translateY(6px);
  transition: max-height .6s var(--ease), opacity .4s var(--ease), transform .4s var(--ease);
}
.premium-dark .service-card:hover .service-card__description,
.premium-dark .service-card:focus-within .service-card__description {
  max-height: 9rem; opacity: 1; transform: none; margin-top: 0.5rem;
}
.premium-dark .service-card__link { color: var(--cy-soft); margin-top: var(--s-3); }
.premium-dark .service-card:hover .service-card__link { color: var(--red-soft); gap: 0.7rem; }

/*===============================================================
  ECO BAND  ·  dark, integrated
===============================================================*/
.premium-dark .eco-band {
  position: relative;
  margin: var(--s-7) 0;
  padding: var(--s-7) 0;
  overflow: hidden;
  isolation: isolate;
  color: var(--text);
}
.premium-dark .eco-band::after {
  content: '';
  position: absolute; inset: 0; z-index: -2;
  background-image: url('../images/photos/env-bg.jpg');
  background-image: image-set(url('../images/photos/env-bg.avif') type('image/avif'), url('../images/photos/env-bg.webp') type('image/webp'), url('../images/photos/env-bg.jpg') type('image/jpeg'));
  background-size: cover; background-position: center;
  filter: grayscale(0.4) brightness(0.6) contrast(1.05);
  transform: scale(1.04);
  animation: ecoDrift 26s ease-in-out infinite alternate;
}
.premium-dark .eco-band::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, rgba(5,9,15,0.95) 0%, rgba(8,18,34,0.86) 42%, rgba(20,78,62,0.5) 100%);
}
@keyframes ecoDrift { from { transform: scale(1.04) translateY(0); } to { transform: scale(1.12) translateY(-14px); } }

.premium-dark .eco-band__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--s-6);
  align-items: center;
}
.premium-dark .eco-band__label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--eco);
  margin-bottom: var(--s-2);
}
.premium-dark .eco-band__label::before { content: ''; width: 26px; height: 1px; background: var(--eco); }
.premium-dark .eco-band__title {
  color: var(--text);
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.08;
  margin-bottom: var(--s-3);
  max-width: 16ch;
}
.premium-dark .eco-band__title em { color: var(--eco); font-style: italic; }
.premium-dark .eco-band__text {
  color: var(--text-dim);
  font-size: 1.075rem;
  line-height: 1.75;
  max-width: 52ch;
}
.premium-dark .eco-band__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}
.premium-dark .eco-stat {
  padding: var(--s-3);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.premium-dark .eco-stat:hover { transform: translateY(-4px); border-color: var(--eco); background: rgba(47,198,154,0.08); }
.premium-dark .eco-stat__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.02em;
}
.premium-dark .eco-stat__num span { color: var(--eco); }
.premium-dark .eco-stat__label { margin-top: 0.4rem; font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.35; }

/*===============================================================
  CTA  ·  dark with photo
===============================================================*/
.premium-dark .cta-card {
  background: linear-gradient(150deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
}
.premium-dark .cta-card > * { position: relative; z-index: 2; }
.premium-dark .cta-card::before { z-index: 3; background: var(--red); }
.premium-dark .cta-card::after {
  background-image:
    radial-gradient(600px 300px at 110% 0%, rgba(255,47,62,0.18), transparent 60%),
    url('../images/photos/cta-bg.jpg');
  background-image:
    radial-gradient(600px 300px at 110% 0%, rgba(255,47,62,0.18), transparent 60%),
    image-set(url('../images/photos/cta-bg.avif') type('image/avif'), url('../images/photos/cta-bg.webp') type('image/webp'), url('../images/photos/cta-bg.jpg') type('image/jpeg'));
  background-size: auto, cover;
  background-position: center, center;
  filter: grayscale(1) brightness(0.5);
  opacity: 1; mix-blend-mode: normal; z-index: 0;
}
.premium-dark .cta-veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(5,9,15,0.96) 0%, rgba(5,9,15,0.84) 42%, rgba(5,9,15,0.55) 100%);
  border-radius: inherit; pointer-events: none;
}
.premium-dark .cta-card__title { color: var(--text); }
.premium-dark .cta-card__description { color: var(--text-dim); }

/*===============================================================
  CONTACT  ·  dark
===============================================================*/
.premium-dark .contact { background: var(--bg-2); }
.premium-dark .contact::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(700px 500px at 100% 0%, rgba(47,130,190,0.10), transparent 60%);
  pointer-events: none;
}
.premium-dark .contact > .container { position: relative; z-index: 1; }
.premium-dark .contact__title { color: var(--text); }
.premium-dark .contact__description { color: var(--text-dim); }
.premium-dark .contact__detail { border-color: var(--line-soft); }
.premium-dark .contact__detail:first-child { border-top-color: var(--line-soft); }
.premium-dark .contact__detail-icon { border-color: rgba(127,208,242,0.4); color: var(--cy-soft); }
.premium-dark .contact__detail:hover .contact__detail-icon { background: var(--cy); color: var(--bg); }
.premium-dark .contact__detail-label { color: var(--text-mute); }
.premium-dark .contact__detail-value { color: var(--text); }
.premium-dark a.contact__detail-value:hover { color: var(--cy-soft); }
.premium-dark .contact__detail-note { color: var(--text-mute); }
.premium-dark .contact__social-label { color: var(--text-mute); }
.premium-dark .contact__social-link { background: var(--surface); border-color: var(--line); color: var(--text); }
.premium-dark .contact__social-link:hover { background: var(--cy); color: var(--bg); border-color: var(--cy); }
.premium-dark .contact__social-note { color: var(--text-mute); }
.premium-dark .contact__form-wrapper {
  background: var(--surface);
  border: 1px solid var(--line);
}
.premium-dark .form-label { color: var(--text-dim); }
.premium-dark .form-input, .premium-dark .form-textarea {
  background: rgba(255,255,255,0.03);
  border-color: var(--line);
  color: var(--text);
}
.premium-dark .form-input::placeholder, .premium-dark .form-textarea::placeholder { color: var(--text-mute); }
.premium-dark .form-input:focus, .premium-dark .form-textarea:focus {
  border-color: var(--cy);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 0 3px rgba(79,184,232,0.18);
}
.premium-dark select.form-input option { background: var(--surface); color: var(--text); }
.premium-dark .form-note { color: var(--text-mute); }
.premium-dark .contact__form .btn--primary { background: var(--cy); color: var(--bg); }
.premium-dark .contact__form .btn--primary::before { background: var(--text); }

/*===============================================================
  FOOTER  ·  deeper dark
===============================================================*/
.premium-dark .footer { background: var(--bg); border-top: 1px solid var(--line-soft); }
.premium-dark .footer::before { color: rgba(255,255,255,0.025); }
.premium-dark .footer__logo { background: #f3f7fd; padding: 8px 15px; border-radius: 12px; }
.premium-dark .footer__logo:hover { background: #ffffff; }
.premium-dark .footer__logo-img { filter: none; }
.premium-dark .footer__description { color: var(--text-dim); }
.premium-dark .footer__list li,
.premium-dark .footer__list a { color: var(--text-dim); }
.premium-dark .footer__list a:hover { color: var(--cy-soft); }
.premium-dark .footer__copyright { color: var(--text-mute); }   /* AA on --bg */

/* developer signature — Auratech™, in GTR's own visual language */
.premium-dark .footer__bottom { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.premium-dark .footer__credit {
  font-size: var(--fs-sm);
  color: var(--text-mute);
  display: inline-flex; align-items: center; gap: 0.4rem;
  flex-wrap: wrap; justify-content: center; text-align: center;
}
.premium-dark .footer__credit a {
  color: var(--cy-soft); font-weight: 600;
  position: relative; transition: color var(--dur) var(--ease);
}
.premium-dark .footer__credit a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform var(--dur) var(--ease);
}
.premium-dark .footer__credit a:hover { color: var(--text); }
.premium-dark .footer__credit a:hover::after { transform: scaleX(1); transform-origin: left center; }
.premium-dark .footer__heart { color: var(--red); display: inline-block; animation: heartbeat 2s ease-in-out infinite; }
.premium-dark .footer__credit-sub { color: var(--text-mute); opacity: 0.85; }
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.3); }
  24% { transform: scale(1); }
  36% { transform: scale(1.18); }
  48% { transform: scale(1); }
}

/*===============================================================
  BUTTONS  ·  refined for dark
===============================================================*/
.premium-dark .btn--primary { background: var(--red); color: #fff; }
.premium-dark .btn--primary::before { background: var(--text); }
.premium-dark .btn--primary:hover { color: var(--bg); }
.premium-dark .btn--secondary { color: var(--text); border-color: rgba(243,247,254,0.4); }
.premium-dark .btn--secondary::before { background: var(--text); }
.premium-dark .btn--secondary:hover { color: var(--bg); border-color: var(--text); }
.premium-dark .btn--light { background: var(--text); color: var(--bg); }
.premium-dark .btn--light::before { background: var(--red); }
.premium-dark .btn--light:hover { color: #fff; }
/* contact form keeps a distinct white primary so the red CTA isn't duplicated in the dark panel */
.premium-dark .contact__form .btn--primary { background: var(--text); color: var(--bg); }
.premium-dark .contact__form .btn--primary::before { background: var(--red); }
.premium-dark .contact__form .btn--primary:hover { color: #fff; }

/* magnetic wrapper */
.btn-magnetic { display: inline-flex; will-change: transform; }

/*===============================================================
  REVEAL — refined (overrides main.css distances, no bounce)
===============================================================*/
.premium-dark .reveal { transform: translateY(30px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.premium-dark .reveal.is-visible { transform: none; }

/*===============================================================
  RESPONSIVE
===============================================================*/
@media screen and (max-width: 992px) {
  .premium-dark .hero__container { grid-template-columns: 1fr; }
  .premium-dark .hero__visual { height: 380px; order: -1; margin-bottom: var(--s-3); }
  .premium-dark .hero__globe { width: 120vw; height: 120vw; right: -30%; top: 30%; opacity: 0.3; }
  .premium-dark .eco-band__grid { grid-template-columns: 1fr; gap: var(--s-4); }
}
@media screen and (max-width: 768px) {
  .premium-dark .hero { padding: 8rem 0 4rem; }
  .premium-dark .hero__meta { gap: var(--s-4); flex-wrap: wrap; }
  .premium-dark .service-card { min-height: 320px; }
  .premium-dark .service-card__description { max-height: 9rem; opacity: 1; transform: none; margin-top: 0.5rem; }
  .premium-dark .eco-band::after { background-attachment: scroll; }
  .premium-dark .hero__coord { display: none; }
}
@media (min-width: 993px) and (hover: hover) {
  .premium-dark .eco-band::after { background-attachment: fixed; }
}

/*===============================================================
  REDUCED MOTION
===============================================================*/
@media (prefers-reduced-motion: reduce) {
  .premium-dark .hero__title .line > span { transform: none; animation: none; }
  .premium-dark .hero__lede, .premium-dark .hero__actions, .premium-dark .hero__meta { opacity: 1; animation: none; }
  .premium-dark .hero__media { clip-path: none; animation: none; }
  .premium-dark .fx-atmos::after, .premium-dark .hero__frame::after,
  .premium-dark .marquee__track, .premium-dark .eco-band::after,
  .premium-dark .hero__scroll span::before,
  .premium-dark .service-hero__media, .premium-dark .service-hero__media-frame::after,
  .premium-dark .footer__heart { animation: none !important; }
}

/*===============================================================
  INNER PAGES (light) — photographic service / cert heroes
  (unscoped: applies to servicios/*.html and certificaciones.html)
===============================================================*/
.service-hero--photo {
  color: var(--paper);
  background: linear-gradient(150deg, var(--primary) 0%, var(--ink) 100%);
  isolation: isolate;
}
.service-hero--photo::before {
  opacity: 0.12 !important;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 90%);
          mask-image: linear-gradient(to bottom, black, transparent 90%);
}
.service-hero--photo::after {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--hero-img);
  background-size: cover; background-position: center;
  z-index: -2;
  -webkit-mask-image: linear-gradient(105deg, transparent 0%, transparent 38%, rgba(0,0,0,0.85) 100%);
          mask-image: linear-gradient(105deg, transparent 0%, transparent 38%, rgba(0,0,0,0.85) 100%);
  opacity: 0.9;
}
.service-hero--photo .service-hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(8,19,37,0.92) 0%, rgba(8,19,37,0.72) 45%, rgba(8,19,37,0.30) 100%);
  pointer-events: none;
}
.service-hero--photo .breadcrumb { color: rgba(245,248,252,0.7); }
.service-hero--photo .breadcrumb a { color: var(--paper); }
.service-hero--photo .breadcrumb a:hover { color: var(--accent-400); }
.service-hero--photo .breadcrumb span:last-child { color: var(--celeste-400); }
.service-hero--photo .service-hero__title { color: var(--paper); }
.service-hero--photo .service-hero__description { color: rgba(245,248,252,0.85); }
.service-hero--photo .service-hero__icon {
  background: rgba(255,255,255,0.1);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25);
}

.cert-hero__photo {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('../images/photos/svc-certificaciones.jpg');
  background-image: image-set(url('../images/photos/svc-certificaciones.avif') type('image/avif'), url('../images/photos/svc-certificaciones.webp') type('image/webp'), url('../images/photos/svc-certificaciones.jpg') type('image/jpeg'));
  background-size: cover; background-position: center right;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 42%, rgba(0,0,0,0.9) 100%);
          mask-image: linear-gradient(100deg, transparent 0%, transparent 42%, rgba(0,0,0,0.9) 100%);
  opacity: 0.55; pointer-events: none;
}
.cert-hero--photo::before { z-index: 1; }
.cert-hero--photo .container { z-index: 2; }

/*===============================================================
  INNER PAGES — DARK theme (servicios/*.html + certificaciones.html
  carry <body class="premium-dark">). Flip every light surface.
===============================================================*/
/* generic text */
.premium-dark .service-section p,
.premium-dark .iso-main-card__description,
.premium-dark .iso-main-card__subtitle,
.premium-dark .other-cert-card p,
.premium-dark .timeline-item__content p,
.premium-dark .requirement-item p,
.premium-dark .process-step__content p { color: var(--text-dim); }

/* SERVICE PAGES ----------------------------------------------- */
.premium-dark .service-section {
  background: var(--surface);
  border-color: var(--line);
}
.premium-dark .service-section:hover { border-color: rgba(91,190,240,0.5); }
.premium-dark .service-section h2,
.premium-dark .service-section h3,
.premium-dark .service-section h4 { color: var(--text); }
.premium-dark .service-list li { color: var(--text); border-bottom-color: var(--line-soft); }

.premium-dark .subsection-card {
  background: var(--bg-2);
  border-color: var(--line);
  border-top-color: var(--cy);
}
.premium-dark .subsection-card:hover { border-top-color: var(--red); }
.premium-dark .subsection-card h4 { color: var(--cy-soft); }
.premium-dark .subsection-card li { color: var(--text-dim); }

.premium-dark .sidebar-card { background: var(--surface); border-color: var(--line); }
.premium-dark .sidebar-card h3 { color: var(--text); }
.premium-dark .sidebar-card p { color: var(--text-dim); }
.premium-dark .sidebar-card--highlight { background: linear-gradient(150deg, var(--surface-2), var(--bg-2)); }
.premium-dark .sidebar-card--highlight h3 { color: var(--text); }
.premium-dark .sidebar-card--highlight p { color: var(--text-dim); }
.premium-dark .sidebar-card--highlight .btn--primary { background: var(--red); color: #fff; }
.premium-dark .sidebar-card--highlight .btn--primary::before { background: var(--text); }
.premium-dark .sidebar-links a { color: var(--text-dim); }
.premium-dark .sidebar-links a:hover { background: var(--surface-2); color: var(--text); }
.premium-dark .sidebar-contact svg { background: var(--surface-2); color: var(--cy-soft); }
.premium-dark .sidebar-contact__label { color: var(--text-mute); }
.premium-dark .sidebar-contact__value { color: var(--text); }
.premium-dark .sidebar-contact__value:hover { color: var(--cy-soft); }

.premium-dark .requirement-item { background: var(--surface); border-color: var(--line); border-left-color: var(--cy); }
.premium-dark .requirement-item h4 { color: var(--cy-soft); }
.premium-dark .process-step { background: var(--surface); border-color: var(--line); }
.premium-dark .process-step__content h4 { color: var(--text); }
.premium-dark .iso-grid .iso-card { background: var(--surface-2); }

/* CERTIFICATIONS PAGE ----------------------------------------- */
.premium-dark .iso-certifications,
.premium-dark .cert-process { background: transparent; }
.premium-dark .other-certifications,
.premium-dark .cert-cta { background: var(--bg-2); }

.premium-dark .iso-main-card { background: var(--surface); border-color: var(--line); }
.premium-dark .iso-main-card::before { color: rgba(130,175,235,0.10); }
.premium-dark .iso-main-card:hover { border-color: rgba(91,190,240,0.55); }
.premium-dark .iso-main-card:hover::before { color: rgba(255,47,62,0.18); }
.premium-dark .iso-main-card__icon { background: var(--surface-2); color: var(--red-soft); }
.premium-dark .iso-main-card__title { color: var(--text); }
.premium-dark .iso-main-card__benefits li { color: var(--text-dim); }

.premium-dark .other-certifications h2 { color: var(--text); }
.premium-dark .other-cert-card { background: var(--surface); border-color: var(--line); }
.premium-dark .other-cert-card:hover { border-color: rgba(91,190,240,0.55); }
.premium-dark .other-cert-card h3 { color: var(--text); }

.premium-dark .process-timeline::before {
  background: repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 10px);
}
.premium-dark .timeline-item__number { background: var(--surface-2); color: var(--red-soft); box-shadow: 0 0 0 6px var(--bg); }
.premium-dark .timeline-item:hover .timeline-item__number { background: var(--red); color: #fff; }
.premium-dark .timeline-item__content { background: var(--surface); border-color: var(--line); }
.premium-dark .timeline-item:hover .timeline-item__content { border-color: rgba(91,190,240,0.55); }
.premium-dark .timeline-item__content h3 { color: var(--text); }

.premium-dark .cert-cta__card { background: linear-gradient(150deg, var(--surface), var(--bg-2)); box-shadow: 0 40px 80px -40px rgba(0,0,0,0.7); }
.premium-dark .cert-cta__card h2 { color: var(--text); }
.premium-dark .cert-cta__card p { color: var(--text-dim); }
.premium-dark .cert-cta__card .btn--light { background: var(--red); color: #fff; }
.premium-dark .cert-cta__card .btn--light::before { background: var(--text); }
.premium-dark .cert-cta__card .btn--light:hover { color: var(--bg); }

/* cert hero (dark already) — align number ghost + photo to blue tokens */
.premium-dark .cert-hero { background: linear-gradient(150deg, var(--surface), var(--bg)); }
.premium-dark .cert-hero__badge { background: rgba(255,47,62,0.12); border-color: rgba(255,47,62,0.3); color: var(--red-soft); }
.premium-dark .cert-hero__badge::before { background: var(--red); box-shadow: 0 0 0 4px rgba(255,47,62,0.25); }

/* Cert hero → two-column photo panel (consistent with the service heroes) */
.premium-dark .cert-hero--photo .cert-hero__photo { display: none; } /* photo now lives in the panel */
.premium-dark .cert-hero--photo::after { display: none; }            /* drop the giant "ISO" ghost; the panel takes the right */
.premium-dark .cert-hero--photo .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-areas: "content media";
  align-items: center;
  gap: 0 var(--s-6);
}
.premium-dark .cert-hero--photo .cert-hero__content { grid-area: content; max-width: none; }
@media (max-width: 992px) {
  .premium-dark .cert-hero--photo .container {
    grid-template-columns: 1fr;
    grid-template-areas: "content" "media";
    gap: var(--s-4) 0;
  }
}

/* 404 error hero */
.premium-dark .error-hero::before { opacity: 0.12 !important; }
.premium-dark .error-hero__code { color: var(--text); }
.premium-dark .error-hero__title { color: var(--text); }
.premium-dark .error-hero__description { color: var(--text-dim); }

/* Legal pages (privacidad.html, etc.) */
.premium-dark .legal-hero {
  padding: 9rem 0 var(--s-4);
  background: linear-gradient(150deg, var(--surface-2) 0%, var(--bg) 100%);
  position: relative; isolation: isolate;
}
.premium-dark .legal-hero__title { color: var(--text); font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -0.03em; margin-top: var(--s-2); }
.premium-dark .legal-hero__updated { color: var(--text-mute); font-size: var(--fs-sm); margin-top: 0.5rem; }
.premium-dark .legal { padding: var(--s-6) 0 var(--s-7); }
.premium-dark .legal__prose { max-width: 760px; }
.premium-dark .legal__prose h2 {
  color: var(--text); font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  margin: var(--s-5) 0 var(--s-2); padding-left: 1rem; position: relative;
}
.premium-dark .legal__prose h2::before {
  content: ''; position: absolute; left: 0; top: 0.2em; bottom: 0.2em;
  width: 4px; border-radius: 2px; background: var(--red);
}
.premium-dark .legal__prose p { color: var(--text-dim); line-height: 1.8; margin-bottom: var(--s-2); }
.premium-dark .legal__prose strong { color: var(--text); font-weight: 600; }
.premium-dark .legal__prose ul { margin: var(--s-2) 0; display: flex; flex-direction: column; gap: 0.5rem; }
.premium-dark .legal__prose li {
  color: var(--text-dim); line-height: 1.6; padding-left: 1.5rem; position: relative;
}
.premium-dark .legal__prose li::before {
  content: ''; position: absolute; left: 0; top: 0.6em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--cy);
}
.premium-dark .legal__prose a { color: var(--cy-soft); font-weight: 600; }
.premium-dark .legal__prose a:hover { color: var(--text); }
.premium-dark .legal__back { margin-top: var(--s-5); }

/* service-hero--photo under dark: align to blue surface gradient */
.premium-dark .service-hero--photo { background: linear-gradient(150deg, var(--surface-2) 0%, var(--bg) 100%); }
.premium-dark .service-hero--photo .service-hero__veil {
  background: linear-gradient(120deg, rgba(7,25,59,0.96) 0%, rgba(7,25,59,0.80) 55%, rgba(7,25,59,0.55) 100%);
}

/*===============================================================
  SERVICE HERO — two-column with duotone photo panel
  (reuses each page's --hero-img; no extra requests)
===============================================================*/
.premium-dark .service-hero--photo::after { display: none; } /* drop faint full-bleed photo; it now lives in the panel */
.premium-dark .service-hero--photo .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-areas: "crumb crumb" "content media";
  align-items: center;
  gap: 0 var(--s-6);
}
.premium-dark .service-hero--photo .breadcrumb { grid-area: crumb; }
.premium-dark .service-hero--photo .service-hero__content { grid-area: content; max-width: none; }

.premium-dark .service-hero__media {
  grid-area: media;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 44px 90px -42px rgba(0,0,0,0.75);
  animation: mediaReveal 1s var(--ease) 0.1s both;
}
.premium-dark .service-hero__media::before { /* photo — bright base so the subject stays legible */
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--hero-img);
  background-size: cover; background-position: center;
  filter: grayscale(0.55) contrast(1.02) brightness(1.06) saturate(1.05);
  transform: scale(1.04);
}
.premium-dark .service-hero__media::after { /* blue veil (normal blend → keeps detail) */
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(150deg, rgba(20,58,120,0.40) 0%, rgba(7,18,42,0.62) 100%),
    radial-gradient(120% 90% at 75% 25%, transparent 40%, rgba(7,18,42,0.45) 100%);
}
.premium-dark .service-hero__media-frame { /* subtle cool top-light + measurement frame */
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(150deg, rgba(91,190,240,0.14), transparent 55%);
}
.premium-dark .service-hero__media-frame::before { /* corner ticks */
  content: '';
  position: absolute; inset: 14px; border-radius: 16px;
  background:
    linear-gradient(var(--cy), var(--cy)) left top / 20px 1px no-repeat,
    linear-gradient(var(--cy), var(--cy)) left top / 1px 20px no-repeat,
    linear-gradient(var(--cy), var(--cy)) right top / 20px 1px no-repeat,
    linear-gradient(var(--cy), var(--cy)) right top / 1px 20px no-repeat,
    linear-gradient(var(--cy), var(--cy)) left bottom / 20px 1px no-repeat,
    linear-gradient(var(--cy), var(--cy)) left bottom / 1px 20px no-repeat,
    linear-gradient(var(--cy), var(--cy)) right bottom / 20px 1px no-repeat,
    linear-gradient(var(--cy), var(--cy)) right bottom / 1px 20px no-repeat;
  opacity: 0.6;
}
.premium-dark .service-hero__media-frame::after { /* slow scan line */
  content: '';
  position: absolute; left: 14px; right: 14px; top: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(127,208,242,0.85), transparent);
  box-shadow: 0 0 14px rgba(79,184,232,0.6);
  animation: scan 6s var(--ease-smooth) infinite;
}

@media (max-width: 992px) {
  .premium-dark .service-hero--photo .container {
    grid-template-columns: 1fr;
    grid-template-areas: "crumb" "content" "media";
    gap: var(--s-4) 0;
  }
  .premium-dark .service-hero__media { aspect-ratio: 16 / 9; }
}