/* ================================================================
   FIREX PANAMÁ — DESIGN SYSTEM
   main.css — shared across all pages
================================================================ */

/* ----------------------------------------------------------------
   TOKENS
---------------------------------------------------------------- */
:root {
  --bg-base:    #1e1c1a;
  --bg-surface: #2a2724;
  --bg-raised:  #363230;
  --bg-overlay: #423e3a;

  --text-1: #e8e0d4;
  --text-2: #c4b9ae;
  --text-3: #b5ada5;
  --text-4: #8a807a;

  --ember:      #d9532c;
  --ember-deep: #b8431e;
  --ember-soft: rgba(217,83,44,0.10);
  --ember-glow: rgba(217,83,44,0.05);

  --line:        rgba(232,224,212,0.10);
  --line-med:    rgba(232,224,212,0.16);
  --line-strong: rgba(232,224,212,0.26);

  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-accent:  'Instrument Serif', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-body:    -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --fs-display: clamp(52px, 7.5vw, 100px);
  --fs-h1:      clamp(38px, 5vw, 68px);
  --fs-h2:      clamp(28px, 3.6vw, 50px);
  --fs-h3:      clamp(20px, 2.4vw, 30px);

  --container: 1240px;
  --gutter:    clamp(20px, 4vw, 56px);
  --section-y: clamp(72px, 10vw, 132px);

  --r-1: 3px;
  --r-2: 8px;
  --r-3: 16px;

  --ease-out: cubic-bezier(0.22,1,0.36,1);
  --dur-fast: 130ms;
  --dur-base: 210ms;
  --dur-slow: 380ms;
}

/* ----------------------------------------------------------------
   RESET + BASE
---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  background: var(--bg-base);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
ul, ol { list-style: none; }
input, textarea, select {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-1);
  background: transparent;
  border: none;
  outline: none;
}

/* ----------------------------------------------------------------
   GRAIN OVERLAY
---------------------------------------------------------------- */
.grain {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  background-size: 400px 400px;
}

/* ----------------------------------------------------------------
   TYPOGRAPHY
---------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--text-1);
  font-variation-settings: 'opsz' 144;
  text-wrap: balance;
}
p { color: var(--text-2); line-height: 1.72; }

.accent-italic {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--ember);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ember);
}

/* ----------------------------------------------------------------
   LAYOUT UTILITIES
---------------------------------------------------------------- */
.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { padding: var(--section-y) 0; }
.section--surface { background: var(--bg-surface); }
.section--raised  { background: var(--bg-raised); }

.section-header { margin-bottom: clamp(40px, 5vw, 64px); }
.section-header .eyebrow { margin-bottom: 14px; display: block; }
.section-header h2 { font-size: var(--fs-h2); max-width: 22ch; }
.section-header p  { font-size: 16px; color: var(--text-2); margin-top: 14px; max-width: 52ch; }

/* ----------------------------------------------------------------
   LANG VISIBILITY
---------------------------------------------------------------- */
html[lang="en"] .lang-es { display: none !important; }
html[lang="es"] .lang-en { display: none !important; }

/* ----------------------------------------------------------------
   EMERGENCY BAR
---------------------------------------------------------------- */
.emerg-bar {
  background: var(--ember);
  padding: 10px var(--gutter);
  position: relative;
  z-index: 200;
}
.emerg-bar__inner {
  max-width: var(--container); margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.emerg-bar__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.9);
  animation: blink 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }
.emerg-bar__label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.emerg-bar__sep { color: rgba(255,255,255,0.35); }
.emerg-bar__phone {
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  color: #fff; letter-spacing: 0.06em;
  transition: opacity var(--dur-fast);
}
.emerg-bar__phone:hover { opacity: 0.75; }

/* ----------------------------------------------------------------
   NAV
---------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  transform: translateZ(0);
  background: rgba(30,28,26,0.90);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.nav.scrolled {
  border-bottom-color: var(--line);
  background: rgba(30,28,26,0.97);
}
.nav__inner {
  max-width: var(--container); margin: 0 auto;
  padding: 0 var(--gutter); height: 64px;
  display: flex; align-items: center; gap: 32px;
}
.nav__brand {
  display: flex; align-items: baseline; gap: 8px;
  flex-shrink: 0; text-decoration: none;
}
.nav__brand-name {
  font-family: var(--font-display);
  font-weight: 300; font-size: 22px;
  color: var(--text-1); letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 144;
  line-height: 1;
}
.nav__brand-name b { color: var(--ember); font-weight: 300; }
.nav__brand-sub {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-4); line-height: 1;
}
.nav__links {
  display: flex; gap: 28px; flex: 1; justify-content: center;
}
.nav__links a {
  font-family: var(--font-mono); font-size: 10px; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3);
  transition: color var(--dur-base);
  white-space: nowrap;
  position: relative; padding-bottom: 2px;
}
.nav__links a::after {
  content: '';
  position: absolute; bottom: -2px; left: 0;
  width: 0; height: 1px; background: var(--ember);
  transition: width var(--dur-slow) var(--ease-out);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--text-1); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { width: 100%; }
@media (max-width: 900px) { .nav__links { display: none; } }
.nav__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin-left: auto; }

/* Mobile menu toggle */
.nav__burger {
  display: none; background: none; border: none;
  width: 24px; height: 18px; position: relative;
  flex-direction: column; justify-content: space-between;
}
@media (max-width: 900px) { .nav__burger { display: flex; } }
.nav__burger span {
  display: block; width: 100%; height: 1.5px;
  background: var(--text-2);
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-base);
}
.nav__burger.open span:nth-child(1) { transform: translateY(8.25px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-8.25px) rotate(-45deg); }

/* Mobile nav drawer */
.nav__mobile {
  display: none; position: absolute; top: 64px; left: 0; right: 0;
  background: rgba(30,28,26,0.98); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  padding: 24px var(--gutter) 32px;
  flex-direction: column; gap: 0;
}
.nav__mobile.open { display: flex; }
.nav__mobile a {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-2); padding: 14px 0;
  border-bottom: 1px solid var(--line);
  transition: color var(--dur-fast);
}
.nav__mobile a:hover { color: var(--text-1); }
.nav__mobile .btn { margin-top: 20px; align-self: flex-start; }

/* Lang toggle */
.lang-toggle {
  display: flex; background: var(--bg-raised);
  border-radius: 999px; padding: 3px; gap: 2px;
  border: 1px solid var(--line-med);
}
.lang-toggle button {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.10em; border: none; background: transparent;
  color: var(--text-4); padding: 5px 12px; border-radius: 999px;
  transition: background var(--dur-base), color var(--dur-base);
}
.lang-toggle button.active { background: var(--text-1); color: var(--bg-base); }

/* ----------------------------------------------------------------
   BUTTONS
---------------------------------------------------------------- */
.btn {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: var(--r-1);
  transition: background var(--dur-base), color var(--dur-base),
              border-color var(--dur-base), transform var(--dur-fast);
  white-space: nowrap; text-decoration: none;
}
.btn:active { transform: scale(0.97); }
.btn--ember { background: var(--ember); color: #fff; }
.btn--ember:hover {
  background: var(--ember-deep);
  box-shadow: 0 0 28px rgba(217,83,44,0.45), 0 4px 14px rgba(0,0,0,0.30);
}
.btn--outline {
  background: transparent; color: var(--text-1);
  border: 1px solid var(--line-strong);
}
.btn--outline:hover { border-color: var(--text-2); background: var(--line); }
.btn--lg { font-size: 11px; padding: 14px 28px; }
.btn--xl { font-size: 11px; padding: 17px 34px; }
.btn--ghost {
  background: transparent; color: var(--text-2);
  border: 1px solid var(--line);
  padding: 8px 18px;
}
.btn--ghost:hover { color: var(--text-1); border-color: var(--line-med); }
.btn .arr { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }

/* ----------------------------------------------------------------
   MARQUEE
---------------------------------------------------------------- */

.marquee-wrapper {
  position: absolute;
  bottom: 20px;
  left: 0; right: 0;
  padding: 0 clamp(20px, 5vw, 72px);
  z-index: 4;
  pointer-events: none;
}
.marquee-section {
  background: rgba(0, 0, 0, 0.80);
  border: none;
  border-radius: 100px;
  padding: 18px 0;
  overflow: hidden;
  pointer-events: auto;
}
.marquee-fade {
  height: 280px;
  margin-top: -60px;
  pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(200, 80, 10, 0.55) 20%,
    rgba(130, 45, 6, 0.28) 32%,
    transparent 42%);
}
.marquee-track {
  display: flex; animation: marquee 42s linear infinite;
  white-space: nowrap; will-change: transform;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-25%)} }
.marquee-item {
  display: inline-flex; align-items: center;
  gap: 20px; padding: 0 36px; flex-shrink: 0;
}
.marquee-item__text {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.20em; text-transform: uppercase; color: var(--text-1);
  text-shadow: 0 0 18px rgba(0,0,0,0.75);
}
.marquee-item__dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--ember); opacity: 0.7; flex-shrink: 0;
}

/* ----------------------------------------------------------------
   HERO (Homepage)
---------------------------------------------------------------- */
.hero {
  padding-top: clamp(32px, 4vw, 52px);
  padding-bottom: 0;
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  min-height: clamp(680px, 90vh, 1060px);
  display: flex;
  flex-direction: column;
}

/* Flame — absolute, centered at bottom, behind everything */
.hero-flame {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: clamp(200px, 26vw, 380px);
  z-index: 0;
  pointer-events: none;
}
.hero-flame__glow {
  position: absolute;
  bottom: -16px; left: 50%;
  transform: translateX(-50%);
  width: 75%; height: 110px;
  background: radial-gradient(ellipse, rgba(217,83,44,0.65) 0%, rgba(180,60,18,0.22) 52%, transparent 72%);
  filter: blur(24px);
  border-radius: 50%;
  animation: glowPulse 3.6s ease-in-out infinite;
}
.hero-flame__svg { width: 100%; height: auto; display: block; }

/* Flame tongue animations (orange palette) */
.hfl { transform-origin: 100px 420px; }
.hfl-far { animation: hflSwayL  5.0s ease-in-out infinite; }
.hfl-ml  { animation: hflSwayL  4.2s ease-in-out infinite 0.2s; }
.hfl-mr  { animation: hflSwayR  3.8s ease-in-out infinite 0.4s; }
.hfl-m   { animation: hflSway   3.4s ease-in-out infinite 0.1s; }
.hfl-mb  { animation: hflSwayL  2.9s ease-in-out infinite 0.6s; }
.hfl-c   { animation: hflSway   2.4s ease-in-out infinite 0.8s; }

@keyframes hflSway {
  0%,100% { transform: skewX(0deg)    scaleX(1);    }
  28%     { transform: skewX(-3.5deg) scaleX(0.96); }
  58%     { transform: skewX(2.5deg)  scaleX(1.03); }
  82%     { transform: skewX(-1deg)   scaleX(0.99); }
}
@keyframes hflSwayL {
  0%,100% { transform: skewX(-2deg) scaleX(1);    }
  32%     { transform: skewX(-6deg) scaleX(0.94); }
  68%     { transform: skewX(2deg)  scaleX(1.04); }
}
@keyframes hflSwayR {
  0%,100% { transform: skewX(2deg)  scaleX(1);    }
  38%     { transform: skewX(7deg)  scaleX(0.94); }
  72%     { transform: skewX(-1deg) scaleX(1.04); }
}
@keyframes glowPulse {
  0%,100% { opacity:0.75; transform:translateX(-50%) scale(1);    }
  50%     { opacity:1;    transform:translateX(-50%) scale(1.15); }
}

/* Hero ember particles */
.hero-flame__embers {
  position: absolute;
  bottom: 40px; left: 0; right: 0;
  height: 340px; pointer-events: none;
}
.hero-flame__embers .ember {
  position: absolute; bottom: 0;
  border-radius: 50%; opacity: 0;
}
.hero-flame__embers .e1 { left:42%; width:4px; height:4px; background:#e86420; box-shadow:0 0 7px #e86420; animation:riseL 2.8s ease-out infinite 0s;   }
.hero-flame__embers .e2 { left:55%; width:3px; height:3px; background:#f09030; box-shadow:0 0 5px #f09030; animation:riseR 3.3s ease-out infinite 0.6s;  }
.hero-flame__embers .e3 { left:47%; width:5px; height:5px; background:#d9532c; box-shadow:0 0 9px #d9532c; animation:riseL 2.5s ease-out infinite 1.1s;  }
.hero-flame__embers .e4 { left:61%; width:3px; height:3px; background:#e87030; box-shadow:0 0 5px #e87030; animation:riseR 3.6s ease-out infinite 1.8s;  }
.hero-flame__embers .e5 { left:36%; width:4px; height:4px; background:#d04020; box-shadow:0 0 6px #d04020; animation:riseR 2.9s ease-out infinite 0.4s;  }
.hero-flame__embers .e6 { left:57%; width:3px; height:3px; background:#f08020; box-shadow:0 0 5px #f08020; animation:riseL 3.1s ease-out infinite 2.1s;  }
.hero-flame__embers .e7 { left:44%; width:4px; height:4px; background:#e06030; box-shadow:0 0 6px #e06030; animation:riseR 2.6s ease-out infinite 0.9s;  }
.hero-flame__embers .e8 { left:52%; width:3px; height:3px; background:#b8431e; box-shadow:0 0 5px #b8431e; animation:riseL 3.4s ease-out infinite 1.5s;  }

/* ---- Hero fire surround ---- */
.hero-fire-wrap {
  position: absolute; inset: 0;
  z-index: 2; pointer-events: none;
  mix-blend-mode: screen;
}
.hfw { position: absolute; border-radius: 50%; }

/* Left wing — huge, hotspot near center so it reaches across */
.hfw-l {
  left: -35%; top: 15%;
  width: 80%; height: 85%;
  background: radial-gradient(ellipse at 76% 72%,
    rgba(255,120,25,0.95) 0%,
    rgba(240,75,12,0.58) 22%,
    rgba(195,42,6,0.22) 48%,
    transparent 68%);
  filter: blur(72px);
  animation: fwL 5s ease-in-out infinite;
}

/* Right wing — mirror */
.hfw-r {
  right: -35%; top: 15%;
  width: 80%; height: 85%;
  background: radial-gradient(ellipse at 24% 72%,
    rgba(255,120,25,0.95) 0%,
    rgba(240,75,12,0.58) 22%,
    rgba(195,42,6,0.22) 48%,
    transparent 68%);
  filter: blur(72px);
  animation: fwR 5s ease-in-out infinite 1.4s;
}

/* Base — wide squat ellipse at bottom, bridges wings and adds depth */
.hfw-bot {
  bottom: -6%; left: 50%;
  transform: translateX(-50%);
  width: 120%; height: 55%;
  background: radial-gradient(ellipse at 50% 82%,
    rgba(255,100,18,0.80) 0%,
    rgba(220,60,8,0.46) 28%,
    rgba(160,32,4,0.18) 55%,
    transparent 74%);
  filter: blur(55px);
  animation: fwBot 6s ease-in-out infinite 0.6s;
}

/* Ember particles */
.hfw-ember { position: absolute; border-radius: 50%; opacity: 0; }
.fe1  { left:10%; bottom:25%; width:3px; height:3px; background:#ff8c20; box-shadow:0 0 6px #ff8c20; animation:feRiseL 3.2s ease-out infinite 0s;   }
.fe2  { left:22%; bottom:20%; width:4px; height:4px; background:#ffaa35; box-shadow:0 0 8px #ffaa35; animation:feRiseR 2.8s ease-out infinite 0.5s;  }
.fe3  { left:37%; bottom:15%; width:3px; height:3px; background:#ff7018; box-shadow:0 0 6px #ff7018; animation:feRiseL 3.6s ease-out infinite 1.0s;  }
.fe4  { left:50%; bottom:10%; width:5px; height:5px; background:#ffb830; box-shadow:0 0 10px #ffb830;animation:feRiseR 2.4s ease-out infinite 0.2s;  }
.fe5  { left:63%; bottom:15%; width:3px; height:3px; background:#ff7018; box-shadow:0 0 6px #ff7018; animation:feRiseR 3.8s ease-out infinite 1.4s;  }
.fe6  { left:76%; bottom:20%; width:4px; height:4px; background:#ff9525; box-shadow:0 0 7px #ff9525; animation:feRiseL 3.0s ease-out infinite 0.7s;  }
.fe7  { left:88%; bottom:25%; width:3px; height:3px; background:#ff8c20; box-shadow:0 0 6px #ff8c20; animation:feRiseR 2.9s ease-out infinite 1.8s;  }
.fe8  { left:6%;  bottom:38%; width:2px; height:2px; background:#ffcc44; box-shadow:0 0 5px #ffcc44; animation:feRiseR 4.0s ease-out infinite 0.9s;  }
.fe9  { left:93%; bottom:38%; width:2px; height:2px; background:#ffcc44; box-shadow:0 0 5px #ffcc44; animation:feRiseL 3.5s ease-out infinite 2.2s;  }
.fe10 { left:46%; bottom:6%;  width:4px; height:4px; background:#ff6010; box-shadow:0 0 9px #ff6010; animation:feRiseL 2.6s ease-out infinite 1.6s;  }
.fe11 { left:16%; bottom:32%; width:2px; height:2px; background:#ffcc44; box-shadow:0 0 5px #ffcc44; animation:feRiseR 3.4s ease-out infinite 0.3s;  }
.fe12 { left:31%; bottom:42%; width:3px; height:3px; background:#ff9030; box-shadow:0 0 6px #ff9030; animation:feRiseL 2.9s ease-out infinite 1.2s;  }
.fe13 { left:42%; bottom:22%; width:2px; height:2px; background:#ffdd55; box-shadow:0 0 7px #ffdd55; animation:feRiseR 3.1s ease-out infinite 0.8s;  }
.fe14 { left:55%; bottom:28%; width:3px; height:3px; background:#ff8020; box-shadow:0 0 6px #ff8020; animation:feRiseL 3.7s ease-out infinite 2.0s;  }
.fe15 { left:68%; bottom:35%; width:2px; height:2px; background:#ffbb40; box-shadow:0 0 5px #ffbb40; animation:feRiseR 2.7s ease-out infinite 0.4s;  }
.fe16 { left:80%; bottom:30%; width:3px; height:3px; background:#ff7520; box-shadow:0 0 6px #ff7520; animation:feRiseL 3.3s ease-out infinite 1.5s;  }
.fe17 { left:3%;  bottom:50%; width:2px; height:2px; background:#ffcc44; box-shadow:0 0 4px #ffcc44; animation:feRiseR 4.2s ease-out infinite 1.0s;  }
.fe18 { left:96%; bottom:48%; width:2px; height:2px; background:#ffcc44; box-shadow:0 0 4px #ffcc44; animation:feRiseL 3.9s ease-out infinite 2.5s;  }
.fe19 { left:27%; bottom:48%; width:2px; height:2px; background:#ff9535; box-shadow:0 0 5px #ff9535; animation:feRiseR 3.0s ease-out infinite 0.6s;  }
.fe20 { left:72%; bottom:52%; width:2px; height:2px; background:#ff9535; box-shadow:0 0 5px #ff9535; animation:feRiseL 3.2s ease-out infinite 1.9s;  }
.fe21 { left:48%; bottom:38%; width:3px; height:3px; background:#ffaa30; box-shadow:0 0 7px #ffaa30; animation:feRiseR 2.5s ease-out infinite 0.7s;  }
.fe22 { left:19%; bottom:55%; width:2px; height:2px; background:#ffdd55; box-shadow:0 0 5px #ffdd55; animation:feRiseL 4.4s ease-out infinite 1.3s;  }
.fe23 { left:58%; bottom:18%; width:4px; height:4px; background:#ff6810; box-shadow:0 0 8px #ff6810; animation:feRiseR 2.6s ease-out infinite 2.3s;  }
.fe24 { left:84%; bottom:44%; width:2px; height:2px; background:#ffcc44; box-shadow:0 0 4px #ffcc44; animation:feRiseR 3.8s ease-out infinite 0.2s;  }

@keyframes fwL {
  0%,100% { opacity:.80; transform:translate(0,0)       scale(1);    }
  35%     { opacity:1;   transform:translate(18px,-20px) scale(1.06); }
  70%     { opacity:.68; transform:translate(-10px,12px) scale(0.95); }
}
@keyframes fwR {
  0%,100% { opacity:.80; transform:translate(0,0)        scale(1);    }
  35%     { opacity:1;   transform:translate(-18px,-20px) scale(1.06); }
  70%     { opacity:.68; transform:translate(10px,12px)  scale(0.95); }
}
@keyframes fwBot {
  0%,100% { opacity:.78; transform:translateX(-50%) scaleX(1);    }
  50%     { opacity:1;   transform:translateX(-50%) scaleX(1.08); }
}
@keyframes feRiseL {
  0%   { opacity:0;   transform:translateY(0)      translateX(0)     scale(1);   }
  15%  { opacity:.95; }
  80%  { opacity:.5;  }
  100% { opacity:0;   transform:translateY(-200px) translateX(-16px) scale(0.3); }
}
@keyframes feRiseR {
  0%   { opacity:0;   transform:translateY(0)      translateX(0)    scale(1);   }
  15%  { opacity:.95; }
  80%  { opacity:.5;  }
  100% { opacity:0;   transform:translateY(-200px) translateX(16px) scale(0.3); }
}

/* Gradient veil: dark at top (text reads clearly), transparent at bottom to reveal flame */
.hero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--bg-base) 0%,
    var(--bg-base) 22%,
    rgba(30,28,26,0.92) 42%,
    rgba(30,28,26,0.44) 60%,
    rgba(30,28,26,0.12) 78%,
    transparent 92%
  );
}

/* Single-column layout, content occupies top portion leaving flame visible at bottom */
.hero__inner {
  display: block;
  padding-bottom: clamp(90px, 14vw, 200px);
}
.hero__content { max-width: none; }

.hero__eyebrow {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
}
.hero__eyebrow-line { width: 28px; height: 1px; background: var(--ember); flex-shrink: 0; }
.hero__display {
  font-size: clamp(66px, 9.5vw, 134px); line-height: 0.96;
  letter-spacing: -0.03em; margin-bottom: 26px;
  font-variation-settings: 'opsz' 144;
}
.hero__lead {
  font-size: 17px; color: var(--text-2); line-height: 1.72;
  max-width: 48ch; margin-bottom: 40px;
}
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 52px; }
.hero__stats {
  display: flex; border-top: 1px solid var(--line);
  padding-top: 32px; gap: 0;
}
.hero__stat { flex: 1; padding: 0 24px; border-right: 1px solid var(--line); }
.hero__stat:first-child { padding-left: 0; }
.hero__stat:last-child  { border-right: none; }
.hero__stat-num {
  font-family: var(--font-display); font-size: clamp(26px, 3vw, 40px);
  font-weight: 300; color: var(--text-1); line-height: 1;
  font-variation-settings: 'opsz' 144; margin-bottom: 6px;
}
.hero__stat-label {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3);
}

/* Hero visual column — flame */
.hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: visible;
  min-height: 460px;
}
@media (max-width: 900px) { .hero__visual { display: none; } }

/* ---- Flame scene ---- */
.flame-scene {
  position: relative;
  width: 220px;
  height: 400px;
}
.flame-glow {
  position: absolute;
  bottom: -12px; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 90px;
  background: radial-gradient(ellipse, rgba(190,35,18,0.55) 0%, rgba(120,18,10,0.18) 55%, transparent 72%);
  filter: blur(20px);
  border-radius: 50%;
  animation: glowPulse 3.6s ease-in-out infinite;
}
.flame-svg {
  width: 220px; height: 400px;
  display: block;
}
/* Each flame path animates around the base centre */
.fl { transform-origin: 100px 355px; }
.fl-ol { animation: flameSwayL 4.2s ease-in-out infinite; }
.fl-or { animation: flameSwayR 3.8s ease-in-out infinite 0.35s; }
.fl-m  { animation: flameSway  3.4s ease-in-out infinite 0.1s; }
.fl-mb { animation: flameSwayL 2.9s ease-in-out infinite 0.55s; }
.fl-c  { animation: flameSway  2.4s ease-in-out infinite 0.75s; }

@keyframes flameSway {
  0%,100% { transform: skewX(0deg)    scaleX(1);    }
  28%     { transform: skewX(-3.5deg) scaleX(0.96); }
  58%     { transform: skewX(2.5deg)  scaleX(1.03); }
  82%     { transform: skewX(-1deg)   scaleX(0.99); }
}
@keyframes flameSwayL {
  0%,100% { transform: skewX(-2deg)  scaleX(1);    }
  32%     { transform: skewX(-6deg)  scaleX(0.94); }
  68%     { transform: skewX(1.5deg) scaleX(1.04); }
}
@keyframes flameSwayR {
  0%,100% { transform: skewX(2deg)   scaleX(1);    }
  38%     { transform: skewX(6.5deg) scaleX(0.94); }
  72%     { transform: skewX(-1deg)  scaleX(1.04); }
}
@keyframes glowPulse {
  0%,100% { opacity: 0.75; transform: translateX(-50%) scale(1);    }
  50%     { opacity: 1;    transform: translateX(-50%) scale(1.14); }
}

/* Embers */
.embers {
  position: absolute;
  bottom: 40px; left: 0; right: 0;
  height: 360px;
  pointer-events: none;
}
.ember {
  position: absolute; bottom: 0;
  border-radius: 50%; opacity: 0;
}
.e1 { left:42%; width:4px; height:4px; background:#e86420; box-shadow:0 0 6px #e86420; animation: riseL 2.8s ease-out infinite 0s; }
.e2 { left:55%; width:3px; height:3px; background:#f09030; box-shadow:0 0 5px #f09030; animation: riseR 3.3s ease-out infinite 0.6s; }
.e3 { left:47%; width:5px; height:5px; background:#cc3020; box-shadow:0 0 8px #cc3020; animation: riseL 2.5s ease-out infinite 1.1s; }
.e4 { left:61%; width:3px; height:3px; background:#e87030; box-shadow:0 0 5px #e87030; animation: riseR 3.6s ease-out infinite 1.8s; }
.e5 { left:36%; width:4px; height:4px; background:#d04020; box-shadow:0 0 6px #d04020; animation: riseR 2.9s ease-out infinite 0.4s; }
.e6 { left:57%; width:3px; height:3px; background:#f08020; box-shadow:0 0 5px #f08020; animation: riseL 3.1s ease-out infinite 2.1s; }
.e7 { left:44%; width:4px; height:4px; background:#e06030; box-shadow:0 0 6px #e06030; animation: riseR 2.6s ease-out infinite 0.9s; }
.e8 { left:52%; width:3px; height:3px; background:#cc2a18; box-shadow:0 0 5px #cc2a18; animation: riseL 3.4s ease-out infinite 1.5s; }

@keyframes riseL {
  0%   { opacity:0;   transform:translateY(0)      translateX(0);     }
  12%  { opacity:1;                                                    }
  85%  { opacity:0.5;                                                  }
  100% { opacity:0;   transform:translateY(-310px) translateX(-22px); }
}
@keyframes riseR {
  0%   { opacity:0;   transform:translateY(0)      translateX(0);    }
  12%  { opacity:1;                                                   }
  85%  { opacity:0.5;                                                 }
  100% { opacity:0;   transform:translateY(-310px) translateX(26px); }
}
.hero__photo {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.7) saturate(0.8);
}
.hero__photo-fallback {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 35% 65%, rgba(217,83,44,0.22) 0%, transparent 55%),
    linear-gradient(150deg, #2d2926 0%, #1e1c1a 55%, #363230 100%);
}
.hero__visual-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(232,224,212,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,224,212,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
}
.hero__photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(30,28,26,0.15) 0%, rgba(30,28,26,0.4) 100%);
}
.hero__visual-readings {
  position: absolute; top: 28px; right: 22px;
  display: flex; flex-direction: column; gap: 8px; z-index: 2;
}
.hero__reading {
  background: rgba(30,28,26,0.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line-med); border-radius: var(--r-2);
  padding: 9px 14px; display: flex; align-items: center; gap: 10px;
}
.hero__reading-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.hero__reading-dot--active {
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74,222,128,0.6);
  animation: blink 2s ease-in-out infinite;
}
.hero__reading-dot--warn { background: var(--ember); }
.hero__reading-label {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3);
}
.hero__reading-val {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-1); margin-left: auto; padding-left: 10px;
}
.hero__visual-badge {
  position: absolute; bottom: 22px; left: 22px; right: 22px; z-index: 2;
  background: rgba(30,28,26,0.88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line-med); border-radius: var(--r-2);
  padding: 18px 20px;
}
.hero__visual-badge-tag {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ember); margin-bottom: 6px;
}
.hero__visual-badge-val {
  font-family: var(--font-display); font-size: 17px; font-weight: 300;
  color: var(--text-1); font-variation-settings: 'opsz' 144; line-height: 1.3;
}
.live-dot {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: #4ade80; margin-left: 8px;
  vertical-align: middle; box-shadow: 0 0 8px rgba(74,222,128,0.5);
  animation: blink 1.4s ease-in-out infinite;
}

/* ----------------------------------------------------------------
   SECTORS GRID (homepage)
---------------------------------------------------------------- */
.sectors-editorial {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 300px 240px;
  gap: 3px;
  border-radius: var(--r-3); overflow: hidden;
}
.sectors-editorial > .sector-cell--industrial  { grid-column: 1 / 3; grid-row: 1; }
.sectors-editorial > .sector-cell--comercial   { grid-column: 3;     grid-row: 1; }
.sectors-editorial > .sector-cell--marino      { grid-column: 1;     grid-row: 2; }
.sectors-editorial > .sector-cell--residencial { grid-column: 2 / 4; grid-row: 2; }

@media (max-width: 860px) {
  .sectors-editorial {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 240px 200px 200px;
  }
  .sector-cell--industrial  { grid-column: 1 / 3; grid-row: 1; }
  .sector-cell--comercial   { grid-column: 1;     grid-row: 2; }
  .sector-cell--marino      { grid-column: 2;     grid-row: 2; }
  .sector-cell--residencial { grid-column: 1 / 3; grid-row: 3; }
}
@media (max-width: 500px) {
  .sectors-editorial { grid-template-columns: 1fr; grid-template-rows: auto; }
  .sector-cell { grid-column: 1 !important; grid-row: auto !important; min-height: 200px; }
}

.sector-cell {
  position: relative; overflow: hidden;
  background: var(--bg-raised); cursor: pointer;
}
.sector-cell__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease-out);
  filter: brightness(0.82) saturate(0.95);
}
.sector-cell:hover .sector-cell__photo { transform: scale(1.04); }

.sector-cell__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,12,10,0.82) 0%, rgba(14,12,10,0.08) 60%);
}
.sector-cell__content {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: clamp(20px, 2.5vw, 32px);
}
.sector-cell__label {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ember); margin-bottom: 10px; display: block;
}
.sector-cell__name {
  font-family: var(--font-display); font-weight: 300;
  color: var(--text-1); font-variation-settings: 'opsz' 144;
  line-height: 1.1; margin-bottom: 12px;
  font-size: clamp(22px, 2.2vw, 30px);
}
.sector-cell--industrial .sector-cell__name { font-size: clamp(28px, 3.2vw, 44px); }
.sector-cell__desc { display: none; }
.sector-cell__link {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ember); display: flex; align-items: center; gap: 6px;
  transition: gap var(--dur-base) var(--ease-out);
}
.sector-cell:hover .sector-cell__link { gap: 10px; }

/* ----------------------------------------------------------------
   SERVICES GRID (homepage)
---------------------------------------------------------------- */
.services-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 16px;
  background: transparent; border: none; border-radius: 0; overflow: visible;
}
@media (max-width: 900px)  { .services-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 500px)  { .services-grid { grid-template-columns: 1fr; } }

.service-cell {
  background: var(--bg-raised); padding: 32px 28px 28px;
  border-radius: var(--r-1);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ember);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none;
  transition: background var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base);
}
.service-cell:hover {
  background: var(--bg-surface);
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(217,83,44,0.18);
  border-left-color: var(--ember);
}
.service-cell__icon {
  width: 36px; height: 36px; color: var(--ember);
  margin-bottom: 18px; opacity: 0.8; flex-shrink: 0;
  transition: opacity var(--dur-base);
}
.service-cell:hover .service-cell__icon { opacity: 1; }
.service-cell__title {
  font-family: var(--font-display); font-size: 18px; font-weight: 300;
  color: var(--text-1); margin-bottom: 8px;
  font-variation-settings: 'opsz' 144; line-height: 1.25;
}
.service-cell__desc { font-size: 13px; color: var(--text-2); line-height: 1.6; flex: 1; }

/* ----------------------------------------------------------------
   WHY-FIREX PILLARS
---------------------------------------------------------------- */
.pillars {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 0; border: 1px solid var(--line); border-radius: var(--r-2);
  overflow: hidden;
}
@media (max-width: 860px) { .pillars { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .pillars { grid-template-columns: 1fr; } }

.pillar {
  padding: clamp(28px, 3vw, 40px) clamp(20px, 2.5vw, 32px);
  border-right: 1px solid var(--line);
}
.pillar:last-child { border-right: none; }
@media (max-width: 860px) {
  .pillar:nth-child(2) { border-right: none; }
  .pillar { border-bottom: 1px solid var(--line); }
  .pillar:nth-child(3), .pillar:nth-child(4) { border-bottom: none; }
}
.pillar__num {
  font-family: var(--font-display); font-size: clamp(32px, 4vw, 54px);
  font-weight: 300; color: var(--text-1); line-height: 1;
  font-variation-settings: 'opsz' 144; margin-bottom: 12px;
}
.pillar__label {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ember); margin-bottom: 8px; display: block;
}
.pillar__desc { font-size: 13px; color: var(--text-2); line-height: 1.65; }

/* ----------------------------------------------------------------
   PROJECT CARDS (homepage featured)
---------------------------------------------------------------- */
.projects-featured {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3px;
  border-radius: var(--r-3); overflow: hidden;
}
@media (max-width: 860px) { .projects-featured { grid-template-columns: 1fr; } }

.projects-featured__stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.project-card-feat {
  overflow: hidden;
  background: #0d0c0a; cursor: pointer;
  text-decoration: none; display: flex;
  flex-direction: column;
}
.projects-featured__stack .project-card-feat { flex: 1; }

.project-card-feat__visual {
  position: relative;
  overflow: hidden;
  background: #000;
  flex-shrink: 0;
}
.project-card-feat--large .project-card-feat__visual        { flex: 1 1 0%; min-height: 260px; }
.project-card-feat--large .project-card-feat__body          { flex: 0 0 auto; }
.project-card-feat:not(.project-card-feat--large) .project-card-feat__visual { height: 200px; }
@media (max-width: 860px) {
  .project-card-feat--large .project-card-feat__visual,
  .project-card-feat:not(.project-card-feat--large) .project-card-feat__visual { height: 240px; }
}

.project-card-feat__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(0.82) saturate(0.90);
  transition: filter .55s ease, transform .65s ease;
  will-change: transform, filter;
}
.project-card-feat:hover .project-card-feat__photo {
  filter: brightness(0.96) saturate(1.06);
  transform: scale(1.05);
}
.project-card-feat__body {
  padding: 18px 20px 22px 26px;
  flex: 1;
  background: #0d0c0a;
  position: relative;
}
.project-card-feat__body::before {
  content: '';
  position: absolute;
  left: 0; top: 18px; bottom: 18px;
  width: 2px;
  background: #1e1c18;
  transition: background .4s ease;
}
.project-card-feat:hover .project-card-feat__body::before { background: var(--ember); }
.project-card-feat__badge {
  display: block;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: oklch(64% .16 38);
  margin-bottom: 8px;
}
.project-card-feat__location {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: oklch(46% .015 60); margin-bottom: 10px;
}
.project-card-feat__title {
  font-family: var(--font-display); font-weight: 300;
  color: var(--text-1); font-variation-settings: 'opsz' 144; line-height: 1.28;
}
.project-card-feat--large .project-card-feat__title { font-size: clamp(18px, 1.8vw, 24px); }
.project-card-feat__title { font-size: 17px; }

/* Standard project card (grid) */
.project-card {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--r-3); overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-out), border-color var(--dur-base);
  text-decoration: none; display: block;
}
.project-card:hover {
  transform: translateY(-5px);
  border-color: rgba(217,83,44,0.28);
  box-shadow: 0 14px 44px rgba(0,0,0,0.40);
}
.project-card__thumb {
  aspect-ratio: 16/10; position: relative; overflow: hidden;
}
.project-card__photo {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
  filter: brightness(0.65) saturate(0.75);
}
.project-card:hover .project-card__photo { transform: scale(1.05); }
.project-card__fallback {
  position: absolute; inset: 0;
}
.project-card__grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(232,224,212,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,224,212,0.04) 1px, transparent 1px);
  background-size: 22px 22px;
}
.project-card__badge {
  position: absolute; top: 14px; left: 14px;
  background: rgba(30,28,26,0.82); backdrop-filter: blur(4px);
  border: 1px solid var(--line-med); border-radius: var(--r-1);
  padding: 5px 11px;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ember);
}
.project-card__body { padding: 22px 22px 26px; }
.project-card__location {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 8px;
}
.project-card__title {
  font-family: var(--font-display); font-size: 19px; font-weight: 300;
  color: var(--text-1); font-variation-settings: 'opsz' 144;
  margin-bottom: 8px; line-height: 1.2;
}
.project-card__desc { font-size: 13px; color: var(--text-2); line-height: 1.6; }
.project-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.project-card__tag {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-4); background: var(--bg-overlay);
  border: 1px solid var(--line); border-radius: var(--r-1); padding: 3px 8px;
}

/* Thumb color variants */
.thumb--1 { background: linear-gradient(145deg,#2a1f18 0%,#3d2820 50%,#1e1c1a 100%); }
.thumb--2 { background: linear-gradient(145deg,#1a1e2a 0%,#202538 50%,#1e1c1a 100%); }
.thumb--3 { background: linear-gradient(145deg,#221e14 0%,#352e18 50%,#1e1c1a 100%); }
.thumb--4 { background: linear-gradient(145deg,#1e2520 0%,#262e28 50%,#1e1c1a 100%); }
.thumb--5 { background: linear-gradient(145deg,#2a1f26 0%,#38243a 50%,#1e1c1a 100%); }
.thumb--6 { background: linear-gradient(145deg,#1a2226 0%,#1e2c34 50%,#1e1c1a 100%); }

/* ----------------------------------------------------------------
   BRANDS LOGO WALL
---------------------------------------------------------------- */
.brands-wall {
  display: flex; flex-wrap: nowrap;
  justify-content: center; align-items: center;
  gap: 0; padding: 36px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: transparent; border-radius: 0; overflow: visible;
}

.brand-item {
  display: flex; align-items: center;
  padding: 4px 0;
  position: relative; overflow: visible;
  cursor: default;
}

/* Ember dot separator between items (same as before, just bigger) */
.brand-item + .brand-item::before {
  content: '·';
  font-size: 26px; line-height: 1;
  color: var(--ember); opacity: 0.5;
  padding: 0 20px;
  flex-shrink: 0;
  position: static;
}

/* Logo: full colour always, scale up on hover */
.brand-logo {
  height: 48px; width: auto; max-width: 190px;
  object-fit: contain; display: block;
  opacity: 0.82;
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity   0.3s var(--ease-out);
  will-change: transform;
}
.brand-item:hover .brand-logo {
  opacity: 1;
  transform: scale(1.12) translateY(-3px);
}

/* Staggered entrance when the section scrolls into view */
@keyframes logoFadeUp {
  from { opacity: 0; transform: translateY(18px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.brands-wall.visible .brand-item {
  animation: logoFadeUp 0.55s var(--ease-out) both;
}
.brands-wall.visible .brand-item:nth-child(1) { animation-delay: 0.05s; }
.brands-wall.visible .brand-item:nth-child(2) { animation-delay: 0.13s; }
.brands-wall.visible .brand-item:nth-child(3) { animation-delay: 0.21s; }
.brands-wall.visible .brand-item:nth-child(4) { animation-delay: 0.29s; }
.brands-wall.visible .brand-item:nth-child(5) { animation-delay: 0.37s; }
.brands-wall.visible .brand-item:nth-child(6) { animation-delay: 0.45s; }
.brands-wall.visible .brand-item:nth-child(7) { animation-delay: 0.53s; }

@media (max-width: 700px) {
  .brands-wall { padding: 24px 0; }
  .brand-item + .brand-item::before { padding: 0 12px; font-size: 20px; }
  .brand-logo { height: 34px; max-width: 130px; }
}

/* ----------------------------------------------------------------
   TESTIMONIAL
---------------------------------------------------------------- */
.testimonial-block {
  padding: var(--section-y) 0;
  position: relative; overflow: hidden;
}
.testimonial-block::before { content: none; }
.testimonial-block__inner {
  max-width: 680px; margin: 0 auto; text-align: center;
  position: relative; padding-top: 40px;
}
.testimonial-block__inner::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 40px; height: 2px; background: var(--ember);
}
.testimonial-block__mark { display: none; }
.testimonial-block__quote {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(18px, 2.2vw, 26px); color: var(--text-1);
  line-height: 1.6; letter-spacing: -0.01em;
  font-weight: 300; font-variation-settings: 'opsz' 144;
  margin-bottom: 32px;
}
.testimonial-block__attr {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-2);
}
.testimonial-block__attr span { color: var(--text-2); }

/* ----------------------------------------------------------------
   BLOG CARDS
---------------------------------------------------------------- */
.blog-list {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-2); overflow: hidden;
}
@media (max-width: 860px) { .blog-list { grid-template-columns: 1fr; } }

.blog-card {
  background: var(--bg-surface); padding: 32px 28px;
  display: flex; flex-direction: column;
  transition: background var(--dur-base);
  text-decoration: none;
}
.blog-card:hover { background: var(--bg-raised); }
.blog-card__meta {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 16px;
}
.blog-card__date {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; color: var(--text-4);
}
.blog-card__cat {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ember); background: var(--ember-soft);
  padding: 3px 8px; border-radius: var(--r-1);
}
.blog-card__title {
  font-family: var(--font-display); font-size: 19px; font-weight: 300;
  color: var(--text-1); font-variation-settings: 'opsz' 144;
  line-height: 1.25; margin-bottom: 12px; flex: 1;
}
.blog-card__excerpt { font-size: 13px; color: var(--text-2); line-height: 1.65; margin-bottom: 20px; }
.blog-card__read {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-4); margin-top: auto;
  display: flex; align-items: center; gap: 6px;
  transition: color var(--dur-fast), gap var(--dur-base) var(--ease-out);
}
.blog-card:hover .blog-card__read { color: var(--ember); gap: 10px; }

/* ----------------------------------------------------------------
   CTA SECTION
---------------------------------------------------------------- */
.cta-section {
  padding: var(--section-y) 0;
  position: relative; overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute; bottom: -10%; left: 50%; transform: translateX(-50%);
  width: 90%; height: 100%;
  background: radial-gradient(ellipse, rgba(217,83,44,0.14) 0%, transparent 68%);
  pointer-events: none;
}
.cta-section__inner {
  text-align: center; max-width: 680px;
  margin: 0 auto; position: relative; z-index: 1;
}
.cta-section h2 { font-size: var(--fs-h2); margin-bottom: 18px; }
.cta-section p { font-size: 16px; color: var(--text-2); margin-bottom: 40px; max-width: 50ch; margin-left: auto; margin-right: auto; }
.cta-section__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-section__emergency {
  margin-top: 48px; padding-top: 36px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
}
.cta-section__emergency-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-4);
}
.cta-section__phone {
  font-family: var(--font-mono); font-size: 18px;
  font-weight: 500; color: var(--text-1); letter-spacing: 0.04em;
}
.cta-section__phone:hover { color: var(--ember); }

/* ----------------------------------------------------------------
   FOOTER
---------------------------------------------------------------- */
.footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--line);
  padding: clamp(48px, 6vw, 72px) 0 36px;
}
.footer__inner {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
  margin-bottom: 48px;
}
@media (max-width: 900px) { .footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer__inner { grid-template-columns: 1fr; gap: 32px; } }

.footer__brand-name {
  font-family: var(--font-display); font-weight: 300; font-size: 26px;
  color: var(--text-1); letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 144; margin-bottom: 4px; line-height: 1;
}
.footer__brand-name b { color: var(--ember); font-weight: 300; }
.footer__brand-sub {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-4); margin-bottom: 16px;
}
.footer__brand-desc { font-size: 13px; color: var(--text-3); line-height: 1.7; max-width: 26ch; }
.footer__contact-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.footer__contact-item {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-3); display: flex; align-items: center; gap: 8px;
  transition: color var(--dur-fast);
}
.footer__contact-item:hover { color: var(--text-1); }
.footer__col-title {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 16px;
}
.footer__links { display: flex; flex-direction: column; gap: 10px; }
.footer__links a {
  font-size: 14px; color: var(--text-3);
  transition: color var(--dur-fast);
}
.footer__links a:hover { color: var(--text-1); }
.footer__bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex; justify-content: space-between;
  align-items: center; gap: 16px; flex-wrap: wrap;
}
.footer__copy {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; color: var(--text-4);
}
.footer__certs { display: flex; gap: 8px; flex-wrap: wrap; }
.footer__cert {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-4); border: 1px solid var(--line-med);
  border-radius: var(--r-1); padding: 4px 10px;
}

/* ----------------------------------------------------------------
   WHATSAPP FAB
---------------------------------------------------------------- */
.wa-fab {
  position: fixed; bottom: 28px; right: 28px; z-index: 300;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px rgba(37,211,102,0.35), 0 2px 6px rgba(0,0,0,0.35);
  opacity: 0; transform: scale(0.5) translateY(20px);
  transition: opacity 0.4s var(--ease-out),
              transform 0.65s cubic-bezier(0.34,1.56,0.64,1);
  text-decoration: none;
}
.wa-fab.visible { opacity: 1; transform: scale(1) translateY(0); }
.wa-fab:hover   { transform: scale(1.08) !important; }
.wa-fab svg { width: 28px; height: 28px; fill: white; }
.wa-fab__pulse {
  position: absolute; inset: 0; border-radius: 50%;
  background: #25D366; z-index: -1;
  animation: wa-pulse 2.6s ease-out infinite;
}
@keyframes wa-pulse { 0%{transform:scale(1);opacity:.35} 100%{transform:scale(1.8);opacity:0} }

/* ----------------------------------------------------------------
   PAGE HERO (narrow — used on interior pages)
---------------------------------------------------------------- */
.page-hero {
  padding: clamp(52px, 7vw, 88px) 0 clamp(44px, 6vw, 72px);
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.page-hero::after {
  content: '';
  position: absolute; top: -40%; right: -5%;
  width: 50%; height: 180%;
  background: radial-gradient(ellipse at 60% 40%, rgba(217,83,44,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 1; max-width: 760px; }
.page-hero .eyebrow { margin-bottom: 18px; display: flex; align-items: center; gap: 14px; }
.page-hero .eyebrow::before { content: ''; display: block; width: 24px; height: 1px; background: var(--ember); flex-shrink: 0; }
.page-hero h1 { font-size: var(--fs-h1); margin-bottom: 20px; }
.page-hero__lead { font-size: 17px; color: var(--text-2); max-width: 56ch; line-height: 1.72; }
.page-hero__actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.page-hero__badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.compliance-badge {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ember); background: var(--ember-soft);
  border: 1px solid rgba(217,83,44,0.25); border-radius: var(--r-1);
  padding: 5px 12px;
}

/* ----------------------------------------------------------------
   SERVICE DETAIL COMPONENTS
---------------------------------------------------------------- */
/* Two-col editorial layout */
.editorial-two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 860px) { .editorial-two-col { grid-template-columns: 1fr; gap: 40px; } }

.pull-quote {
  font-family: var(--font-accent); font-style: italic;
  font-size: clamp(20px, 2.4vw, 27px); color: var(--text-2);
  line-height: 1.4; letter-spacing: -0.01em;
  border-left: 2px solid var(--ember);
  padding-left: 24px; margin-bottom: 24px;
}
.body-prose p + p { margin-top: 18px; }
.body-prose p { font-size: 15px; color: var(--text-2); line-height: 1.78; }

/* Checklist rows */
.checklist { display: flex; flex-direction: column; }
.checklist__item {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.checklist__item:last-child { border-bottom: none; }
.checklist__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ember); flex-shrink: 0; margin-top: 6px;
}
.checklist__title {
  font-family: var(--font-display); font-size: 16px; font-weight: 300;
  color: var(--text-1); font-variation-settings: 'opsz' 144;
  margin-bottom: 4px;
}
.checklist__desc { font-size: 13px; color: var(--text-2); line-height: 1.6; }

/* Standards panel */
.standards-panel {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--r-2); overflow: hidden;
}
.standards-panel__item {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  transition: background var(--dur-base);
}
.standards-panel__item:last-child { border-bottom: none; }
.standards-panel__item:hover { background: var(--bg-overlay); }
.standards-panel__code {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--ember); min-width: 80px; flex-shrink: 0;
}
.standards-panel__name { font-size: 13px; color: var(--text-2); flex: 1; }
.standards-panel__check {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ember-soft); border: 1px solid rgba(217,83,44,0.25);
  display: flex; align-items: center; justify-content: center;
}
.standards-panel__check svg { width: 9px; height: 9px; stroke: var(--ember); stroke-width: 2.5; fill: none; }

/* Process steps (vertical) */
.process-steps { display: flex; flex-direction: column; position: relative; }
.process-steps::before {
  content: ''; position: absolute;
  top: 0; bottom: 0; left: 20px; width: 1px;
  background: var(--line);
}
.process-step { padding: 0 0 36px 56px; position: relative; }
.process-step:last-child { padding-bottom: 0; }
.process-step__num {
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-surface); border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  color: var(--ember); letter-spacing: 0.06em;
  transition: background var(--dur-base), border-color var(--dur-base);
}
.process-step:hover .process-step__num { background: var(--ember-soft); border-color: rgba(217,83,44,0.3); }
.process-step__title {
  font-family: var(--font-display); font-size: 18px; font-weight: 300;
  color: var(--text-1); font-variation-settings: 'opsz' 144;
  margin-bottom: 6px; margin-top: 8px;
}
.process-step__desc { font-size: 13px; color: var(--text-2); line-height: 1.65; }

/* Maintenance table */
.maint-table {
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden;
}
.maint-table th {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-4); background: var(--bg-raised);
  padding: 12px 16px; text-align: left;
  border-bottom: 1px solid var(--line-med);
}
.maint-table td {
  font-size: 13px; color: var(--text-2);
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.maint-table tr:last-child td { border-bottom: none; }
.maint-table tr:hover td { background: var(--bg-raised); }

/* Agent comparison table */
.compare-table { overflow-x: auto; }
.compare-table table {
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--line);
}
.compare-table th {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3); background: var(--bg-raised);
  padding: 14px 16px; text-align: left;
  border-bottom: 1px solid var(--line-med);
  border-right: 1px solid var(--line);
}
.compare-table th:first-child { color: var(--text-4); }
.compare-table th.col-ember { color: var(--ember); background: var(--ember-soft); }
.compare-table td {
  font-size: 13px; color: var(--text-2);
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line); vertical-align: top;
}
.compare-table td:first-child {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.10em; color: var(--text-4);
  background: var(--bg-surface);
}
.compare-table tr:last-child td { border-bottom: none; }
.compare-table .cell--good { color: #4ade80; }
.compare-table .cell--warn { color: var(--ember); }

/* ----------------------------------------------------------------
   FAQ ACCORDION
---------------------------------------------------------------- */
.faq-list {
  display: flex; flex-direction: column;
  counter-reset: faq-counter;
  gap: 6px;
}
.faq-item {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  position: relative;
  overflow: hidden;
  transition: background var(--dur-base), border-color var(--dur-base), box-shadow var(--dur-base);
}
.faq-item.open {
  background: var(--bg-raised);
  border-color: rgba(217,83,44,0.30);
  box-shadow: 0 0 0 1px rgba(217,83,44,0.10);
}
.faq-item::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--ember);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.26s var(--ease-out);
  border-radius: 0 2px 2px 0;
}
.faq-item.open::before { transform: scaleX(1); }
.faq-trigger {
  counter-increment: faq-counter;
  width: 100%; background: none; border: none; text-align: left;
  padding: 22px 20px;
  display: flex; align-items: center;
  justify-content: space-between; gap: 16px; cursor: pointer;
  transition: padding var(--dur-base);
}
.faq-item.open .faq-trigger { padding-left: 24px; }
.faq-trigger::before {
  content: counter(faq-counter, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.10em;
  color: var(--ember); flex-shrink: 0;
  opacity: 0.55;
  transition: opacity var(--dur-base); min-width: 30px;
}
.faq-item.open .faq-trigger::before { opacity: 1; }
.faq-trigger__q {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 300; color: var(--text-2);
  font-variation-settings: 'opsz' 144; line-height: 1.35;
  transition: color var(--dur-base); flex: 1;
}
.faq-item.open .faq-trigger__q { color: var(--text-1); }
.faq-trigger:hover .faq-trigger__q { color: var(--text-1); }
.faq-trigger__icon {
  width: 30px; height: 30px; flex-shrink: 0;
  position: relative; border-radius: 50%;
  background: var(--bg-overlay); color: var(--text-3);
  border: 1px solid var(--line-med);
  transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base), transform var(--dur-base);
}
.faq-item.open .faq-trigger__icon {
  background: var(--ember); color: #fff; border-color: var(--ember);
  transform: rotate(45deg);
}
.faq-trigger__icon::before,
.faq-trigger__icon::after {
  content: ''; position: absolute; background: currentColor; border-radius: 1px;
}
.faq-trigger__icon::before { width: 12px; height: 1.5px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.faq-trigger__icon::after  { width: 1.5px; height: 12px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.faq-body {
  overflow: hidden; max-height: 0;
  transition: max-height 0.38s var(--ease-out);
}
.faq-body__inner {
  padding: 0 20px 24px 60px;
  font-size: 14px; color: var(--text-2); line-height: 1.80; max-width: 66ch;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.faq-body__inner p + p { margin-top: 10px; }

/* ----------------------------------------------------------------
   SERVICE VISUAL BANNER (replaces placeholder images)
---------------------------------------------------------------- */
.svc-visual {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(120px, 220px) 1fr;
  margin-bottom: clamp(28px,4vw,44px);
}
.svc-visual::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -52deg,
    transparent, transparent 48px,
    rgba(232,224,212,0.018) 48px, rgba(232,224,212,0.018) 49px
  );
  pointer-events: none;
}
@media (max-width: 540px) {
  .svc-visual { grid-template-columns: 1fr; }
  .svc-visual__left { border-right: none; border-bottom: 1px solid var(--line); }
}
.svc-visual__left {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(20px,2.5vw,32px);
  border-right: 1px solid var(--line);
  position: relative; z-index: 1;
  background: linear-gradient(135deg, var(--bg-raised) 0%, var(--bg-surface) 100%);
}
.svc-visual__abbr {
  font-family: var(--font-display); font-variation-settings: 'opsz' 144;
  font-weight: 300; line-height: 1; letter-spacing: -0.025em;
  font-size: clamp(28px,4vw,52px); color: var(--ember);
}
.svc-visual__norm {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-4); margin-top: 10px; display: block;
}
.svc-visual__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  position: relative; z-index: 1;
}
.svc-visual__stat {
  padding: clamp(16px,2vw,26px);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 6px;
}
.svc-visual__stat:last-child { border-right: none; }
.svc-visual__stat-val {
  font-family: var(--font-display); font-variation-settings: 'opsz' 144;
  font-weight: 300; font-size: clamp(22px,2.8vw,38px);
  color: var(--text-1); line-height: 1;
}
.svc-visual__stat-label {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-4);
}
.svc-visual__tag {
  display: inline-block; width: fit-content;
  padding: 3px 9px;
  background: var(--ember-soft);
  border: 1px solid rgba(217,83,44,.22);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ember);
  margin-bottom: 6px;
}

/* ----------------------------------------------------------------
   ABOUT / NOSOTROS
---------------------------------------------------------------- */
.about-two-col {
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; align-items: start;
}
@media (max-width: 900px) { .about-two-col { grid-template-columns: 1fr; gap: 48px; } }
.about-sticky { position: sticky; top: 100px; }
.about-tagline {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--fs-h3); color: var(--text-1);
  font-variation-settings: 'opsz' 144; line-height: 1.3;
  margin-top: 16px; margin-bottom: 16px;
}
.about-body { font-size: 15px; color: var(--text-3); line-height: 1.75; max-width: 40ch; }
.about-creds { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.about-cred {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; color: var(--text-3);
}
.about-cred-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ember); flex-shrink: 0; }

/* Timeline */
.timeline { display: flex; flex-direction: column; position: relative; }
.timeline::before {
  content: ''; position: absolute;
  top: 0; bottom: 0; left: 0; width: 1px; background: var(--line);
}
.timeline__item { padding: 0 0 40px 36px; position: relative; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: ''; position: absolute;
  left: -4px; top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg-surface); border: 1.5px solid var(--line-strong);
  transition: border-color var(--dur-base), background var(--dur-base);
}
.timeline__item:hover::before { border-color: var(--ember); background: var(--ember); }
.timeline__year {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; color: var(--ember); margin-bottom: 6px;
}
.timeline__title {
  font-family: var(--font-display); font-size: 18px; font-weight: 300;
  color: var(--text-1); font-variation-settings: 'opsz' 144; margin-bottom: 6px;
}
.timeline__desc { font-size: 13px; color: var(--text-3); line-height: 1.62; }

/* Leadership card */
.leadership-card {
  display: flex; gap: 24px; align-items: flex-start;
  padding: 28px; background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: var(--r-3);
}
@media (max-width: 560px) { .leadership-card { flex-direction: column; } }
.leadership-card__photo {
  width: 100px; height: 100px; border-radius: var(--r-2);
  object-fit: cover; flex-shrink: 0; background: var(--bg-overlay);
}
.leadership-card__name {
  font-family: var(--font-display); font-size: 22px; font-weight: 300;
  color: var(--text-1); font-variation-settings: 'opsz' 144; margin-bottom: 4px;
}
.leadership-card__title {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ember); margin-bottom: 12px;
}
.leadership-card__bio { font-size: 14px; color: var(--text-3); line-height: 1.68; }

/* ----------------------------------------------------------------
   CONTACT & FORMS
---------------------------------------------------------------- */
.contact-paths {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 0;
  border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden;
}
@media (max-width: 860px) { .contact-paths { grid-template-columns: 1fr; } }

.contact-path {
  padding: clamp(28px, 3.5vw, 44px); border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.contact-path:last-child { border-right: none; }
@media (max-width: 860px) {
  .contact-path { border-right: none; border-bottom: 1px solid var(--line); }
  .contact-path:last-child { border-bottom: none; }
}
.contact-path__icon { color: var(--ember); margin-bottom: 20px; opacity: 0.75; }
.contact-path__title {
  font-family: var(--font-display); font-size: 22px; font-weight: 300;
  color: var(--text-1); font-variation-settings: 'opsz' 144;
  margin-bottom: 10px;
}
.contact-path__desc { font-size: 14px; color: var(--text-3); line-height: 1.65; flex: 1; margin-bottom: 24px; }
.contact-path__phone {
  font-family: var(--font-mono); font-size: 22px; font-weight: 500;
  color: var(--text-1); letter-spacing: 0.04em; margin-bottom: 8px;
  transition: color var(--dur-fast);
}
.contact-path__phone:hover { color: var(--ember); }
.contact-path__wa {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #25D366; margin-top: 8px;
  transition: opacity var(--dur-fast);
}
.contact-path__wa:hover { opacity: 0.75; }

/* Form fields */
.field { margin-bottom: 20px; }
.field__label {
  display: block; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-4); margin-bottom: 8px;
}
.field__input,
.field__textarea,
.field__select {
  width: 100%; padding: 13px 16px;
  background: var(--bg-raised); border: 1px solid var(--line-med);
  border-radius: var(--r-2); color: var(--text-1);
  font-family: var(--font-body); font-size: 15px;
  transition: border-color var(--dur-base), background var(--dur-base);
}
.field__select {
  appearance: none;
  -webkit-appearance: none;
}
.field__input::placeholder,
.field__textarea::placeholder { color: var(--text-4); }
.field__input:focus,
.field__textarea:focus,
.field__select:focus {
  border-color: var(--ember); background: var(--bg-overlay); outline: none;
}
.field__textarea { resize: vertical; min-height: 120px; line-height: 1.6; }

/* Step form */
.step-form { max-width: 640px; margin: 0 auto; }
.step-progress {
  display: flex; align-items: center; gap: 0;
  margin-bottom: 48px;
}
.step-progress__item {
  display: flex; align-items: center; flex: 1; gap: 0;
}
.step-progress__dot {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-4); background: var(--bg-base);
  transition: background var(--dur-base), border-color var(--dur-base), color var(--dur-base);
}
.step-progress__dot.active { background: var(--ember); border-color: var(--ember); color: #fff; }
.step-progress__dot.done { background: var(--ember-soft); border-color: rgba(217,83,44,0.4); color: var(--ember); }
.step-progress__line { flex: 1; height: 1px; background: var(--line-med); transition: background 0.3s ease; }
.step-progress__line.done,
.step-progress__line.active { background: rgba(217,83,44,0.4); }
.step-progress__label {
  font-family: var(--font-mono); font-size: 8px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-4); margin-top: 6px;
  text-align: center; position: absolute; white-space: nowrap;
}
.step-progress__item { position: relative; }

.step-panel { display: none; }
.step-panel.active { display: block; }

/* Selection tiles (for form step 1) */
.selection-tiles {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 12px;
  margin-bottom: 28px;
}
@media (max-width: 560px) { .selection-tiles { grid-template-columns: 1fr; } }
.selection-tile {
  padding: 22px 20px; border: 1px solid var(--line-med);
  border-radius: var(--r-2); cursor: pointer;
  transition: border-color var(--dur-base), background var(--dur-base);
  display: flex; align-items: flex-start; gap: 14px;
}
.selection-tile:hover { border-color: var(--line-strong); background: var(--bg-raised); }
.selection-tile.selected { border-color: rgba(217,83,44,0.6); background: var(--ember-soft); box-shadow: 0 0 0 1px rgba(217,83,44,0.18) inset; }
.selection-tile__icon { color: var(--ember); opacity: 0.72; flex-shrink: 0; margin-top: 2px; }
.selection-tile.selected .selection-tile__icon { opacity: 1; }
.selection-tile__name {
  font-family: var(--font-display); font-size: 17px; font-weight: 300;
  color: var(--text-1); font-variation-settings: 'opsz' 144; margin-bottom: 4px;
}
.selection-tile__desc { font-size: 12px; color: var(--text-3); line-height: 1.5; }
.selection-tile.selected .selection-tile__desc { color: var(--text-2); }

/* Service checkboxes */
.service-checks { display: flex; flex-direction: column; gap: 0; }
.service-check {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--r-1); cursor: pointer;
  transition: background var(--dur-fast);
}
.service-check:hover { background: var(--bg-raised); }
.service-check__box {
  width: 18px; height: 18px; border-radius: 3px;
  border: 1px solid var(--line-strong); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-base), border-color var(--dur-base);
}
.service-check input:checked + .service-check__label .service-check__box,
.service-check.checked .service-check__box {
  background: var(--ember); border-color: var(--ember);
}
.service-check.checked .service-check__box::after {
  content: '';
  display: block;
  width: 9px; height: 5px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}
.service-check__label {
  font-size: 14px; color: var(--text-2);
}
.service-check.checked .service-check__label { color: var(--text-1); }

/* Emergency form */
.emergency-page {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg-base);
}
.emergency-main {
  flex: 1; display: flex; flex-direction: column;
  justify-content: center; padding: clamp(40px, 6vw, 72px) var(--gutter);
}
.emergency-phone-block { margin-bottom: 40px; }
.emergency-phone-block__label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--text-4); margin-bottom: 12px; display: block;
}
.emergency-phone-block__number {
  font-family: var(--font-display); font-size: clamp(48px, 8vw, 96px);
  font-weight: 300; color: var(--text-1); line-height: 1;
  letter-spacing: -0.03em; font-variation-settings: 'opsz' 144;
  text-decoration: none; display: block;
  transition: color var(--dur-fast);
}
.emergency-phone-block__number:hover { color: var(--ember); }

/* ----------------------------------------------------------------
   NORMATIVA PAGE
---------------------------------------------------------------- */
.normativa-table-wrap { overflow-x: auto; }
.normativa-table {
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--line);
}
.normativa-table th {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-4); background: var(--bg-raised);
  padding: 14px 16px; text-align: left;
  border-bottom: 1px solid var(--line-med);
  border-right: 1px solid var(--line);
}
.normativa-table td {
  font-size: 13px; color: var(--text-2);
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line); vertical-align: top;
  line-height: 1.5;
}
.normativa-table td:last-child, .normativa-table th:last-child { border-right: none; }
.normativa-table tr:hover td { background: var(--bg-raised); }
.normativa-table .code-cell {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ember); font-weight: 500; white-space: nowrap;
}

/* Lead magnet */
.lead-magnet {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: clamp(28px, 3.5vw, 44px);
  position: relative; overflow: hidden;
}
.lead-magnet::before {
  content: '';
  position: absolute; bottom: 0; right: 0;
  width: 60%; height: 60%;
  background: radial-gradient(ellipse at 80% 100%, rgba(217,83,44,0.07) 0%, transparent 70%);
}
.lead-magnet__preview {
  background: var(--bg-surface); border: 1px solid var(--line-med);
  border-radius: var(--r-2); padding: 20px; margin-bottom: 20px;
  position: relative; overflow: hidden;
}
.lead-magnet__preview::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(transparent, var(--bg-raised));
}
.lead-magnet__form { display: flex; gap: 10px; flex-wrap: wrap; }
.lead-magnet__email {
  flex: 1; min-width: 220px; padding: 12px 16px;
  background: var(--bg-surface); border: 1px solid var(--line-med);
  border-radius: var(--r-1); color: var(--text-1);
  font-family: var(--font-body); font-size: 14px;
  transition: border-color var(--dur-base);
}
.lead-magnet__email:focus { border-color: var(--ember); outline: none; }
.lead-magnet__email::placeholder { color: var(--text-4); }

/* ----------------------------------------------------------------
   SECTOR DETAIL
---------------------------------------------------------------- */
.risks-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 12px;
}
@media (max-width: 640px) { .risks-grid { grid-template-columns: 1fr; } }
.risk-item {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--r-2); padding: 22px 20px;
  transition: border-color var(--dur-base);
}
.risk-item:hover { border-color: var(--line-med); }
.risk-item__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ember); margin-bottom: 14px;
}
.risk-item__title {
  font-family: var(--font-display); font-size: 17px; font-weight: 300;
  color: var(--text-1); font-variation-settings: 'opsz' 144; margin-bottom: 6px;
}
.risk-item__desc { font-size: 13px; color: var(--text-2); line-height: 1.6; }

/* ----------------------------------------------------------------
   SCROLL REVEAL
---------------------------------------------------------------- */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 90ms; }
.reveal-d2 { transition-delay: 180ms; }
.reveal-d3 { transition-delay: 270ms; }
.reveal-d4 { transition-delay: 360ms; }
.reveal-d5 { transition-delay: 450ms; }

/* ----------------------------------------------------------------
   HERO WORD / LINE REVEAL (page-load, CSS-only)
---------------------------------------------------------------- */
@keyframes hero-line-up {
  from { opacity: 0; transform: translateY(32px) skewY(1.5deg); }
  to   { opacity: 1; transform: translateY(0)    skewY(0deg); }
}
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-reveal {
  display: inline-block;
  opacity: 0;
  animation: hero-line-up 0.85s var(--ease-out) forwards;
}
.hero-reveal--d1 { animation-delay: 0.08s; }
.hero-reveal--d2 { animation-delay: 0.22s; }
.hero-reveal--d3 { animation-delay: 0.36s; }
.hero-reveal--d4 { animation-delay: 0.50s; }
.hero-eyebrow-reveal {
  display: inline-flex; align-items: center; gap: 14px;
  opacity: 0;
  animation: hero-fade-up 0.7s var(--ease-out) 0.05s forwards;
}
.hero-lead-reveal {
  opacity: 0;
  animation: hero-fade-up 0.7s var(--ease-out) 0.5s forwards;
}
.hero-ctas-reveal {
  opacity: 0;
  animation: hero-fade-up 0.6s var(--ease-out) 0.62s forwards;
}
.hero-stats-reveal {
  opacity: 0;
  animation: hero-fade-up 0.6s var(--ease-out) 0.75s forwards;
}

/* ----------------------------------------------------------------
   SERVICE PAGE HERO — CSS-only auto-animate (covers all svc-hero pages)
---------------------------------------------------------------- */
.svc-hero .breadcrumb {
  animation: hero-fade-up 0.55s var(--ease-out) both;
}
.svc-hero h1 {
  animation: hero-line-up 0.90s var(--ease-out) 0.12s both;
}
.svc-hero p {
  animation: hero-fade-up 0.70s var(--ease-out) 0.28s both;
}
.svc-hero .page-hero__actions {
  animation: hero-fade-up 0.60s var(--ease-out) 0.40s both;
}
.svc-hero .page-hero__badges {
  animation: hero-fade-up 0.60s var(--ease-out) 0.48s both;
}
.svc-hero .svc-specs-strip {
  animation: hero-fade-up 0.65s var(--ease-out) 0.38s both;
}

/* cert & normativa heroes */
.cert-hero__inner > *,
.norm-hero__inner > * {
  animation: hero-fade-up 0.70s var(--ease-out) both;
}
.cert-hero h1,
.norm-hero h1 {
  animation: none;
}

/* ----------------------------------------------------------------
   SECTOR INTERIOR HERO — CSS-only auto-animate (covers all 4 sector pages)
----------------------------------------------------------------- */
.sector-hero__tag {
  animation: hero-fade-up 0.55s var(--ease-out) both;
}
.sector-hero__title {
  animation: none;
}
.sector-hero__lead {
  animation: hero-fade-up 0.70s var(--ease-out) 0.28s both;
}
.sector-hero__stats {
  animation: hero-fade-up 0.60s var(--ease-out) 0.42s both;
}
.sub-sectors {
  animation: hero-fade-up 0.60s var(--ease-out) 0.42s both;
}

/* ----------------------------------------------------------------
   PROJECT DETAIL HERO — CSS-only auto-animate (pd-hero pages)
----------------------------------------------------------------- */
.pd-hero__num {
  animation: hero-fade-up 0.50s var(--ease-out) both;
}
.pd-hero__tag {
  animation: hero-fade-up 0.55s var(--ease-out) 0.10s both;
}
.pd-hero__title {
  animation: hero-line-up 0.90s var(--ease-out) 0.18s both;
}
.pd-hero__loc {
  animation: hero-fade-up 0.60s var(--ease-out) 0.36s both;
}

/* ----------------------------------------------------------------
   PROJECTS & BLOG HERO — CSS-only auto-animate
----------------------------------------------------------------- */
.projects-hero__eyebrow {
  animation: hero-fade-up 0.55s var(--ease-out) both;
}
.projects-hero__title {
  animation: none;
}
.projects-hero__count {
  animation: hero-fade-up 0.60s var(--ease-out) 0.30s both;
}
.blog-hero .eyebrow {
  animation: hero-fade-up 0.55s var(--ease-out) both;
}
.blog-hero__title {
  animation: none;
}
.blog-hero__lead {
  animation: hero-fade-up 0.70s var(--ease-out) 0.30s both;
}

/* ----------------------------------------------------------------
   SECTOR CELL REVEAL ANIMATION (stagger children)
---------------------------------------------------------------- */
@keyframes sector-slide-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sectors-editorial.visible .sector-cell {
  animation: sector-slide-in 0.65s var(--ease-out) both;
}
.sectors-editorial.visible .sector-cell:nth-child(1) { animation-delay: 0.05s; }
.sectors-editorial.visible .sector-cell:nth-child(2) { animation-delay: 0.15s; }
.sectors-editorial.visible .sector-cell:nth-child(3) { animation-delay: 0.25s; }
.sectors-editorial.visible .sector-cell:nth-child(4) { animation-delay: 0.35s; }

/* ----------------------------------------------------------------
   LOGO
---------------------------------------------------------------- */
.nav__logo {
  height: 26px; width: auto;
  display: block;
}
.footer__logo {
  height: 22px; width: auto;
  display: block;
  margin-bottom: 4px;
}

/* ----------------------------------------------------------------
   SECTION TRANSITIONS — gradient fade at top/bottom of surface sections
---------------------------------------------------------------- */
.section--surface {
  background: var(--bg-surface);
  background-image:
    linear-gradient(to bottom, rgba(30,28,26,0.55) 0%, transparent 72px),
    linear-gradient(to top, rgba(30,28,26,0.55) 0%, transparent 72px);
}
.section--raised {
  background: var(--bg-raised);
  background-image:
    linear-gradient(to bottom, rgba(30,28,26,0.4) 0%, transparent 60px),
    linear-gradient(to top, rgba(30,28,26,0.4) 0%, transparent 60px);
}

/* ----------------------------------------------------------------
   RISK ITEM HOVER EMBER GLOW
---------------------------------------------------------------- */
.risk-item {
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.risk-item:hover {
  border-color: rgba(217,83,44,0.25);
  box-shadow: 0 8px 28px rgba(0,0,0,0.30);
}

/* ----------------------------------------------------------------
   CONTACT PATH HOVER LIFT
---------------------------------------------------------------- */
.contact-path {
  transition: background var(--dur-base);
}

/* ----------------------------------------------------------------
   HERO STAT LABEL UPGRADE
---------------------------------------------------------------- */
.hero__stat-label { color: var(--text-3); }

/* ----------------------------------------------------------------
   TIMELINE HOVER ARC
---------------------------------------------------------------- */
.timeline__desc { font-size: 13px; color: var(--text-2); line-height: 1.62; }

/* ----------------------------------------------------------------
   ABOUT BODY READABLE
---------------------------------------------------------------- */
.about-body { font-size: 15px; color: var(--text-2); line-height: 1.75; max-width: 40ch; }
.leadership-card__bio { font-size: 14px; color: var(--text-2); line-height: 1.68; }

/* ----------------------------------------------------------------
   MISC UTILITIES
---------------------------------------------------------------- */
.ember { color: var(--ember); }
.text-mono {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.divider { border: none; border-top: 1px solid var(--line); margin: 0; }
.map-embed {
  width: 100%; aspect-ratio: 16/7;
  border: 1px solid var(--line); border-radius: var(--r-2);
  overflow: hidden; background: var(--bg-raised);
}
.map-embed iframe { width: 100%; height: 100%; border: none; filter: grayscale(0.5) invert(0.85) hue-rotate(180deg); }

/* ================================================================
   MOBILE — HERO & GLOBAL TOUCH-UPS
   Primary breakpoint: 600px  (phones portrait)
   Secondary:          400px  (very small phones)
================================================================ */

@media (max-width: 600px) {

  /* --- HERO --- */
  .hero {
    min-height: 100svh;
    padding-top: clamp(24px, 4vw, 36px);
  }

  .hero__display {
    font-size: clamp(42px, 12vw, 64px);
    line-height: 0.98;
    margin-bottom: 18px;
  }

  .hero__lead {
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 28px;
    max-width: 100%;
  }

  /* Stack CTAs full-width */
  .hero__ctas {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 36px;
  }
  .hero__ctas .btn {
    width: 100%;
    justify-content: center;
  }

  /* Tighten stats row — 3 stats still fit side by side */
  .hero__stats {
    padding-top: 20px;
  }
  .hero__stat {
    padding: 0 10px;
  }
  .hero__stat:first-child { padding-left: 0; }
  .hero__stat-num {
    font-size: clamp(20px, 6vw, 28px);
  }
  .hero__stat-label {
    font-size: 8px;
    letter-spacing: 0.10em;
  }

  /* Give marquee room — reduce bottom padding */
  .hero__inner {
    padding-bottom: clamp(70px, 12vw, 120px);
  }

  /* Fire blobs: softer on mobile — less visual noise, better perf */
  .hfw-l, .hfw-r {
    opacity: 0.65;
    filter: blur(52px);
  }
  .hfw-bot {
    opacity: 0.60;
    filter: blur(34px);
  }

  /* Hide most ember particles; keep first 8 for ambience */
  .hfw-ember:nth-child(n+9) { display: none; }

  /* Tighten marquee pill */
  .marquee-wrapper {
    padding: 0 clamp(12px, 3vw, 28px);
    bottom: 14px;
  }
  .marquee-section {
    padding: 13px 0;
  }
  .marquee-item {
    gap: 14px;
    padding: 0 22px;
  }
  .marquee-item__text {
    font-size: 9px;
    letter-spacing: 0.16em;
  }
  .marquee-item svg,
  .marquee-item img {
    width: 14px;
    height: 14px;
  }

  /* --- NAV mobile button sizing --- */
  .nav__burger {
    width: 40px;
    height: 40px;
  }
}

/* Very small phones */
@media (max-width: 400px) {
  .hero__display {
    font-size: clamp(38px, 13vw, 52px);
  }

  /* 3-column stats → 2+1 stacked layout */
  .hero__stats {
    flex-wrap: wrap;
    gap: 16px 0;
  }
  .hero__stat {
    flex: 0 0 50%;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 0 0 14px 0;
  }
  .hero__stat:last-child {
    flex: 0 0 100%;
    border-bottom: none;
    padding-bottom: 0;
  }

  /* Slim down section vertical rhythm */
  :root {
    --section-y: clamp(52px, 8vw, 96px);
    --gutter: 18px;
  }
}