/* ==========================================================================
   Grupo Guerrero Contreras — hoja de estilos
   Identidad según Manual_GrupoGuerrero_2026:
     Verde oscuro    Pantone 3537 C  #00491E
     Verde brillante Pantone 2272 C  #009A17
     Blanco #FEFEFE · Negro #000000
     Tipografía del sitio: solo Montserrat (alojada en assets/fonts/)
       Títulos            Black   900
       Subtítulos/etiquetas Bold  700
       Párrafos           Medium  500
   ========================================================================== */

:root {
  /* Marca */
  --g900: #00491e;
  --g600: #009a17;
  /* Derivados de la marca (más oscuros para fondos, más claros para texto sobre verde) */
  --g975: #001a09;
  --g950: #00280f;
  --g800: #00642a;
  --g700: #007a1a;      /* verde legible como texto sobre fondo claro */
  --g400: #3ddc5a;      /* verde luminoso para texto/brillos sobre fondo oscuro */
  --g300: #8ff0a4;
  --g100: #dff1e4;
  --g50:  #f0f8f2;

  --white: #fefefe;
  --ink: #0a2415;       /* texto de cuerpo: verde casi negro */
  --muted: #4a6354;
  --line: rgba(0, 73, 30, .14);
  --line-dark: rgba(255, 255, 255, .16);

  --head: var(--g900);  /* color de títulos; las zonas oscuras lo cambian a blanco */
  --text: var(--ink);

  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(.22, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  --header-h: 88px;
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --r: 22px;            /* "forma G": esquinas redondeadas ... */
  --cut: 26px;          /* ... y esquina inferior izquierda cortada, como el logo */
}

/* Montserrat (licencia OFL) alojada en el proyecto: carga más rápida y sin saltos. Fuente variable: incluye 500, 700 y 900. */
@font-face { font-family: "Montserrat"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("../assets/fonts/Montserrat-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
html.has-splash { overflow: hidden; }
.splash-hold .hero *, .splash-hold .hero *::before, .splash-hold .hero *::after,
.splash-hold .page-hero *, .splash-hold .page-hero *::before, .splash-hold .page-hero *::after { animation-play-state: paused !important; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.72;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure { margin: 0; }
button { font: inherit; color: inherit; }
::selection { background: var(--g600); color: #fff; }
:focus-visible { outline: 2px solid var(--g600); outline-offset: 3px; }
.dark :focus-visible, .hero :focus-visible, .page-hero :focus-visible, .site-footer :focus-visible { outline-color: var(--g400); }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.center { text-align: center; }

.skip-link {
  position: absolute; left: 16px; top: -64px; z-index: 1100;
  padding: .7em 1.2em; background: var(--g600); color: #fff; font-weight: 700; transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* Zonas oscuras: títulos y texto en blanco */
.dark, .hero, .page-hero, .band, .site-footer { --head: #fff; --text: rgba(255, 255, 255, .84); }

/* Iconos (sprite SVG en cada página) */
.i { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Tipografía ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--head);
}
h1.display { font-size: clamp(2.2rem, 5.8vw, 5.2rem); }
h2.display { font-size: clamp(1.7rem, 3.7vw, 3.1rem); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .9em;
  font: 700 .72rem/1 var(--font-body); letter-spacing: .24em; text-transform: uppercase;
  color: var(--g700);
}
.eyebrow::before { content: ""; width: 34px; height: 3px; background: var(--g600); border-radius: 2px; }
.dark .eyebrow, .hero .eyebrow, .page-hero .eyebrow, .band .eyebrow { color: var(--g400); }
.dark .eyebrow::before, .hero .eyebrow::before, .page-hero .eyebrow::before, .band .eyebrow::before { background: var(--g400); }

.lead { font-size: clamp(1.02rem, 1.3vw, 1.18rem); color: var(--muted); max-width: 60ch; line-height: 1.75; }
.dark .lead { color: rgba(255, 255, 255, .78); }
.accent { color: var(--g400); }
.accent-l { color: var(--g600); }

/* Palabras que "suben" al entrar (ver .split en main.js) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .04em .16em; margin: -.06em -.04em -.16em; }
.w > span { display: inline-block; }
.js .split .w > span {
  transform: translateY(118%);
  transition: transform 1.05s var(--ease);
  transition-delay: calc(var(--d, 0s) + var(--i, 0) * .08s);
}
.js .split.is-in .w > span { transform: none; }

/* Aparición genérica */
.js .reveal {
  opacity: 0; translate: 0 34px;
  transition: opacity .9s var(--ease), translate .9s var(--ease);
  transition-delay: var(--d, 0s);
}
.js .reveal.is-in { opacity: 1; translate: 0 0; }

/* ---------- Forma "G": esquinas redondeadas + corte inferior izquierdo ---------- */
.shape-g, .tile, .media, .svc-card, .value-card, .mv-card, .form-card, .logo-slot, .family-tag {
  border-radius: var(--r) var(--r) var(--r) 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.tile { --cut: 12px; border-radius: 14px 14px 14px 0; }
.family-tag { --cut: 16px; --r: 16px; }
.logo-slot { --cut: 18px; --r: 16px; }

/* Fotos que se descubren con una cortina */
.media::after {
  content: ""; position: absolute; inset: -1px; z-index: 3; pointer-events: none;
  background: linear-gradient(160deg, var(--g800), var(--g950));
  transform: scaleY(0); transform-origin: 50% 100%;
}
.js .reveal-clip::after { transform: scaleY(1); transition: transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal-clip.is-in::after { transform: scaleY(0); }
.js .reveal-clip .media-inner { scale: 1.2; transition: scale 1.6s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal-clip.is-in .media-inner { scale: 1; }

/* ---------- Marcador de foto (se reemplaza solo al poner la imagen) ---------- */
.ph {
  position: relative; overflow: hidden;
  background:
    linear-gradient(135deg, rgba(61, 220, 90, .16), transparent 45%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 16px),
    linear-gradient(160deg, var(--g800), var(--g950));
}
.ph::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 48px 48px;
}
.ph::after {
  content: attr(data-label);
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: max-content; max-width: 78%;
  padding: .75em 1.1em; border: 1px dashed rgba(255, 255, 255, .32); border-radius: 8px;
  font: 700 .66rem/1.45 var(--font-body); letter-spacing: .18em; text-transform: uppercase; text-align: center;
  color: rgba(255, 255, 255, .6);
}
.ph:not([data-label])::after { display: none; }
.ph > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }

.media { position: relative; overflow: hidden; aspect-ratio: var(--ar, 4 / 3); background: var(--g900); }
.media-inner { position: absolute; inset: -9% 0; }
/* Foto que se muestra completa: sin margen extra ni parallax */
.media.whole .media-inner { inset: 0; }
.media, .band { view-timeline-name: --par; view-timeline-axis: block; }
@supports (animation-timeline: view()) {
  [data-parallax] { animation: par linear both; animation-timeline: --par; animation-range: cover; }
}
@keyframes par { from { translate: 0 7%; } to { translate: 0 -7%; } }
@keyframes par-soft { from { translate: 0 4.5%; } to { translate: 0 -4.5%; } }

/* ---------- Botones ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .85em;
  padding: 1.15em 1.9em; border: 0; cursor: pointer; isolation: isolate; overflow: hidden;
  border-radius: 12px 12px 12px 0;
  font: 700 .76rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; text-align: center;
  transition: color .35s, box-shadow .4s, translate .4s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: translateX(-101%); transition: transform .55s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:hover { translate: 0 -2px; }
.btn .i { transition: transform .4s var(--ease); }
.btn:hover .i { transform: translateX(5px); }

/* Sobre fondo oscuro: verde luminoso */
.btn-primary { background: var(--g400); color: var(--g950); }
.btn-primary::before { background: #fff; }
.btn-primary:hover { box-shadow: 0 16px 44px -10px rgba(61, 220, 90, .65); }

.btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.btn-ghost::before { background: #fff; }
.btn-ghost:hover { color: var(--g900); }

/* Sobre fondo claro / bloques de color */
.btn-dark { background: var(--g900); color: #fff; }
.btn-dark::before { background: var(--g600); }
.btn-dark:hover { box-shadow: 0 16px 40px -14px rgba(0, 73, 30, .7); }

/* Llamada a la acción sobre la franja verde: botón blanco grande, flecha en círculo, halo y un destello que lo cruza (solo transform) */
.btn-cta {
  padding: 1.1em .95em 1.1em 2.2em; gap: 1.3em; background: #fff; color: var(--g900); font-size: .86rem; letter-spacing: .15em;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, .2), 0 22px 44px -16px rgba(0, 38, 14, .65);
}
.btn-cta::before { background: var(--g900); }
.btn-cta::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 46%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(61, 220, 90, .5), transparent); transform: translateX(-130%) skewX(-18deg); animation: cta-shine 4.8s 1.6s ease-in-out infinite;
}
.btn-cta .i { box-sizing: content-box; width: 1.1em; height: 1.1em; padding: .62em; border-radius: 50%; background: var(--g900); color: #fff; transition: transform .4s var(--ease), background-color .35s, color .35s; }
.btn-cta:hover { color: #fff; box-shadow: 0 0 0 9px rgba(255, 255, 255, .26), 0 26px 50px -16px rgba(0, 38, 14, .75); }
.btn-cta:hover .i { background: var(--g400); color: var(--g950); }
.btn-cta:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
@keyframes cta-shine { 0%, 62% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(330%) skewX(-18deg); } }

.link-arrow {
  display: inline-flex; align-items: center; gap: .7em; color: var(--g900);
  font: 700 .76rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  padding-bottom: .6em; background: linear-gradient(var(--g600), var(--g600)) left bottom / 100% 2px no-repeat;
  transition: background-size .5s var(--ease), color .3s;
}
.link-arrow .i { transition: transform .4s var(--ease); }
.link-arrow:hover { background-size: 35% 2px; color: var(--g700); }
.link-arrow:hover .i { transform: translateX(6px); }
.dark .link-arrow { color: #fff; background-image: linear-gradient(var(--g400), var(--g400)); }
.dark .link-arrow:hover { color: var(--g400); }

/* ---------- Pantalla de entrada (solo la primera visita de la sesión) ---------- */
.splash, .splash-wipe { position: fixed; inset: 0; z-index: 1000; display: none; will-change: transform; }
.has-splash .splash, .has-splash .splash-wipe { display: grid; }
.splash-wipe { z-index: 999; background: var(--g600); transition: transform 1s var(--ease-in-out) .16s; }
.splash {
  place-items: center; background: radial-gradient(60% 55% at 50% 45%, #fff 0%, var(--g50) 62%, var(--g100) 100%);
  transition: transform 1s var(--ease-in-out);
}
.splash.is-leaving, .splash-wipe.is-leaving { transform: translateY(-101%); }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 30px; transition: opacity .35s, translate .6s var(--ease); }
.splash.is-leaving .splash-inner { opacity: 0; translate: 0 -24px; }
.splash-logo { position: relative; width: clamp(150px, 19vw, 220px); animation: splash-in 1s var(--ease) both; }
.splash-logo img { width: 100%; height: auto; }
.splash-logo .shine {
  position: absolute; inset: 0; filter: brightness(2.6) saturate(.35); will-change: clip-path;
  clip-path: polygon(-34% 0, -12% 0, -32% 100%, -54% 100%);
  animation: sheen 1.4s var(--ease-in-out) .6s both;
}
.splash-bar { width: 150px; height: 3px; border-radius: 2px; background: rgba(0, 73, 30, .14); overflow: hidden; animation: fade-in .6s .3s both; }
.splash-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--g900), var(--g400)); transform-origin: left; transform: scaleX(0); }

/* ---------- Barra de progreso + encabezado ---------- */
.progress { position: fixed; inset: 0 0 auto 0; z-index: 200; height: 3px; pointer-events: none; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--g600), var(--g400)); transform-origin: left; transform: scaleX(0); }
@supports (animation-timeline: scroll()) {
  .progress span { animation: grow linear both; animation-timeline: scroll(root); }
}
@keyframes grow { to { transform: scaleX(1); } }

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h); display: flex; align-items: center;
  color: #fff;
  transition: height .45s var(--ease), color .35s;
  view-transition-name: site-header;
}
/* El fondo vive en un pseudo-elemento: backdrop-filter en el propio header encerraría al menú móvil. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -26px rgba(0, 73, 30, .55);
  transition: opacity .4s;
}
.site-header.is-scrolled { height: 72px; color: var(--g900); }
.site-header.is-scrolled::before { opacity: 1; }
.site-header.nav-open { color: #fff; }
.site-header.nav-open::before { opacity: 0; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }

.brand { position: relative; z-index: 2; display: block; height: 50px; transition: height .45s var(--ease); }
.is-scrolled .brand { height: 44px; }
.brand img { height: 100%; width: auto; max-width: none; transition: opacity .35s; }
.brand .logo-dark { position: absolute; left: 0; top: 0; opacity: 0; height: 118%; margin-top: -4%; }
.is-scrolled .brand .logo-light { opacity: 0; }
.is-scrolled .brand .logo-dark { opacity: 1; }
.nav-open .brand .logo-light { opacity: 1 !important; }
.nav-open .brand .logo-dark { opacity: 0 !important; }

.nav-list { display: flex; align-items: center; gap: clamp(16px, 2.3vw, 38px); }
.nav-link {
  position: relative; display: inline-block; padding: .6em 0;
  font: 700 .72rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .9); transition: color .3s;
}
.is-scrolled .nav-link { color: var(--g900); }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--g400);
  transform: scaleX(0); transition: transform .5s var(--ease);
}
.is-scrolled .nav-link::after { background: var(--g600); }
.nav-link:hover, .nav-link[aria-current="page"] { color: #fff; }
.is-scrolled .nav-link:hover, .is-scrolled .nav-link[aria-current="page"] { color: var(--g700); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link.nav-cta {
  padding: 1.05em 1.5em; border-radius: 10px 10px 10px 0; background: var(--g400); color: var(--g950);
  transition: background-color .35s, color .35s, box-shadow .4s;
}
.nav-cta::after { display: none; }
.nav-link.nav-cta:hover, .nav-link.nav-cta[aria-current="page"] { background: #fff; color: var(--g900); box-shadow: 0 10px 30px -10px rgba(61, 220, 90, .7); }
.is-scrolled .nav-link.nav-cta { background: var(--g900); color: #fff; }
.is-scrolled .nav-link.nav-cta:hover, .is-scrolled .nav-link.nav-cta[aria-current="page"] { background: var(--g600); color: #fff; box-shadow: none; }

.nav-toggle { display: none; position: relative; z-index: 2; width: 46px; height: 46px; border: 0; background: transparent; cursor: pointer; }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .5s var(--ease), opacity .3s; }
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-foot { display: none; }

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center;
    padding: calc(var(--header-h) + 10px) var(--gutter) 40px; visibility: hidden; overflow: hidden;
    background: radial-gradient(90% 60% at 100% 0%, rgba(0, 154, 23, .45), transparent 60%), linear-gradient(170deg, var(--g900), var(--g975));
    transform: translate3d(0, -100%, 0); border-radius: 0 0 28px 28px;
    transition: transform .7s var(--ease-in-out), visibility 0s .7s;
  }
  .nav-open .nav { visibility: visible; transform: none; transition: transform .75s var(--ease-in-out); }
  .nav-list { flex-direction: column; align-items: flex-start; gap: .9rem; margin-block: auto; }
  .nav-link { font: 900 clamp(1.55rem, 6.6vw, 2.3rem)/1.15 var(--font-display); letter-spacing: -.01em; color: #fff; }
  .is-scrolled .nav-link, .is-scrolled .nav-link:hover, .is-scrolled .nav-link[aria-current="page"] { color: #fff; }
  .nav-list li { overflow: hidden; padding-block: .1em; }
  .nav-list li > a { transform: translateY(115%); transition: transform .8s var(--ease), color .3s; }
  .nav-open .nav-list li > a { transform: none; transition-delay: calc(.25s + var(--i, 0) * .07s), 0s; }
  .nav-link::after { height: 4px; }
  .nav-link.nav-cta, .is-scrolled .nav-link.nav-cta { padding: .1em 0; border-radius: 0; background: transparent; color: var(--g400); box-shadow: none; }
  .nav-link.nav-cta:hover, .nav-link.nav-cta[aria-current="page"], .is-scrolled .nav-link.nav-cta:hover { background: transparent; color: var(--g400); box-shadow: none; }
  .nav-foot {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-top: 2rem;
    opacity: 0; translate: 0 20px; transition: opacity .6s .55s, translate .8s var(--ease) .55s;
  }
  .nav-open .nav-foot { opacity: 1; translate: 0 0; }
  .nav-foot img { width: 92px; height: auto; }
  .nav-foot p { font-size: .86rem; line-height: 1.7; text-align: right; color: rgba(255, 255, 255, .8); }
  .nav-foot a { color: #fff; font-weight: 700; }
}
body.nav-lock { overflow: hidden; }

/* ---------- Hero (inicio) ---------- */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100svh; display: grid; align-items: center;
  padding: calc(var(--header-h) + 40px) 0 120px;
  color: #fff;
  background:
    radial-gradient(70% 90% at 88% 8%, rgba(0, 154, 23, .55), transparent 60%),
    radial-gradient(80% 80% at 0% 100%, rgba(0, 73, 30, .9), transparent 62%),
    linear-gradient(180deg, var(--g950), var(--g975));
}
.hero-bg { position: absolute; inset: 0; z-index: -5; }
.hero-bg .ph { position: absolute; inset: 0; animation: kenburns 28s ease-in-out infinite alternate; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s; }
.hero-video.is-ready { opacity: 1; }
.hero-shade {
  position: absolute; inset: 0; z-index: -4;
  background:
    linear-gradient(95deg, rgba(0, 26, 9, .94) 0%, rgba(0, 40, 15, .78) 40%, rgba(0, 60, 22, .42) 74%, rgba(0, 40, 15, .6) 100%),
    linear-gradient(0deg, var(--g975) 0%, transparent 28%);
}
.hero-aurora { position: absolute; inset: 0; z-index: -3; pointer-events: none; overflow: hidden; }
.hero-aurora i { position: absolute; border-radius: 50%; opacity: .6; will-change: transform; }
.hero-aurora i:nth-child(1) { width: 46vw; height: 46vw; right: -8vw; top: -14vw; background: radial-gradient(closest-side, rgba(0, 154, 23, .75), transparent); animation: drift 16s ease-in-out infinite alternate; }
.hero-aurora i:nth-child(2) { width: 38vw; height: 38vw; left: -10vw; bottom: -16vw; background: radial-gradient(closest-side, rgba(61, 220, 90, .4), transparent); animation: drift 21s ease-in-out -6s infinite alternate-reverse; }
.hero-spot {
  position: absolute; left: 0; top: 0; z-index: -2; width: 760px; height: 760px; margin: -380px 0 0 -380px; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(61, 220, 90, .16), transparent); will-change: transform; transition: opacity .6s;
}
.hero:hover .hero-spot { opacity: 1; }
.hero-grid {
  position: absolute; inset: 0; z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 72% 45%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse 70% 80% at 72% 45%, #000 0%, transparent 72%);
}
.hero-art {
  position: absolute; z-index: -1; right: max(-1vw, calc((100vw - var(--container)) / 2 - 30px)); bottom: 0; height: 94%; width: auto; aspect-ratio: 860 / 800;
  transition: transform .9s var(--ease); pointer-events: none;
}
/* Pantallas anchas: la grúa dibujada queda centrada en el espacio libre a la derecha del texto */
@media (min-width: 1500px) {
  .hero-art { left: 75.5vw; right: auto; translate: -67.4% 0; }
}
.hero-art path { fill: none; stroke: rgba(255, 255, 255, .42); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.hero-art .hot { stroke: var(--g400); stroke-width: 1.7; filter: drop-shadow(0 0 5px rgba(61, 220, 90, .85)); }
.hero-art .faint { stroke: rgba(255, 255, 255, .2); stroke-width: 1; }
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.6s var(--ease-in-out) forwards; animation-delay: calc(var(--art-d, .5s) + var(--i, 0) * .12s); }
.hero-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pulse { fill: var(--g400); }
.node { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border: 1.2px solid var(--g400); border-radius: 50%; opacity: 0; animation: ring 3s ease-out infinite; animation-delay: var(--d, 0s); }

.sparks { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sparks i {
  position: absolute; bottom: 8%; width: 3px; height: 3px; border-radius: 50%;
  background: var(--g400); box-shadow: 0 0 10px 2px rgba(61, 220, 90, .6); opacity: 0;
  animation: spark var(--t, 9s) linear infinite; animation-delay: var(--dl, 0s); will-change: transform, opacity;
}
.sparks i:nth-child(even) { animation-name: spark-b; }

.hero-content { position: relative; }
.hero-eyebrow { margin-bottom: clamp(18px, 2.4vw, 30px); }
.hero h1 { max-width: 9.5em; }
.hero h1 .accent {
  background: linear-gradient(100deg, var(--g400) 30%, #e8ffee 48%, var(--g400) 66%) 100% 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 4.5s ease-in-out 3.2s 2;
}
.hero-lead {
  margin-top: clamp(22px, 3vw, 38px); max-width: 30ch;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.5; font-weight: 500; color: rgba(255, 255, 255, .9);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 3.6vw, 46px); }

.scroll-cue {
  position: absolute; left: 50%; bottom: 34px; translate: -50% 0; width: 26px; height: 44px;
  border: 1.5px solid rgba(255, 255, 255, .55); border-radius: 16px;
}
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--g400); animation: cue 2s var(--ease-in-out) infinite; }

@media (max-width: 960px) {
  .hero { align-items: end; padding-bottom: 100px; }
  .hero-art { top: calc(var(--header-h) - 10px); bottom: auto; height: 42%; right: -10%; opacity: .75; }
  .hero-shade { background: linear-gradient(0deg, rgba(0, 26, 9, .95) 14%, rgba(0, 40, 15, .5) 100%); }
  .scroll-cue { display: none; }
}
@media (min-width: 641px) and (max-width: 960px) {
  .hero-art { top: calc(var(--header-h) + 6px); height: 54%; right: -3%; opacity: .85; }
}

/* ---------- Cinta de servicios ---------- */
.ticker { overflow: hidden; padding: .62rem 0; background: var(--g600); color: #fff; }
.ticker-track { display: flex; width: max-content; animation: ticker 44s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-group { display: flex; flex: none; }
.ticker-group span {
  padding-left: 4rem;
  font: 900 clamp(.85rem, 1.15vw, 1rem)/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
}

/* ---------- Secciones ---------- */
.section { padding: clamp(76px, 10vw, 150px) 0; position: relative; overflow-x: clip; }
.section.dark {
  background:
    radial-gradient(70% 55% at 85% 0%, rgba(0, 154, 23, .32), transparent 62%),
    radial-gradient(60% 60% at 0% 100%, rgba(0, 100, 42, .6), transparent 65%),
    linear-gradient(180deg, var(--g900), var(--g975));
}
.section.paper { background: var(--g50); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: clamp(36px, 5vw, 68px); }
.section-head .eyebrow { margin-bottom: 1.1rem; }
.section-head.center { flex-direction: column; align-items: center; text-align: center; }
.section-head.center h2 { max-width: 30ch; }

/* ---------- Presentación ---------- */
.intro-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.collage { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; aspect-ratio: 1 / .96; }
.collage::before {
  content: ""; position: absolute; z-index: -1; inset: -22px 22px 22px -22px; background: var(--g600);
  clip-path: polygon(0 0, 55% 0, 55% 4px, 4px 4px, 4px 45%, 0 45%);
}
.collage::after {
  content: ""; position: absolute; z-index: -1; inset: 22px -22px -22px 22px; background: var(--g900);
  clip-path: polygon(100% 100%, 45% 100%, 45% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 55%, 100% 55%);
}
.collage .media { aspect-ratio: auto; height: 100%; }
/* Parallax más suave: menos margen extra, así la foto se recorta menos */
.collage .media-inner { inset: -6% 0; }
.collage [data-parallax] { animation-name: par-soft; }
.collage .c1 { grid-row: 1 / 3; }
.collage .c2 { translate: 0 -16px; }
.collage .c3 { translate: 0 16px; }

.intro-copy .eyebrow { margin-bottom: 1.3rem; }
.intro-copy h2 { margin-bottom: clamp(22px, 2.6vw, 34px); }
.intro-copy .lead { margin-bottom: clamp(26px, 3vw, 40px); }

.pillars { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(64px, 8vw, 110px); border-top: 1px solid var(--line); }
.pillar { position: relative; padding: clamp(28px, 3vw, 46px) clamp(16px, 1.9vw, 30px) 0 0; }
.pillar + .pillar { padding-left: clamp(16px, 1.9vw, 30px); border-left: 1px solid var(--line); }
.pillar::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 4px; background: var(--g600); transition: width .8s var(--ease); }
.pillar + .pillar::before { left: -1px; }
.pillar:hover::before { width: calc(100% + 1px); }
.tile {
  display: grid; place-items: center; flex: none; width: 58px; height: 58px;
  background: var(--g900); color: var(--g400);
  transition: background-color .4s, color .4s, rotate .6s var(--ease);
}
.tile .i { width: 26px; height: 26px; }
.pillar:hover .tile { background: var(--g600); color: #fff; }
.pillar h3 { margin: 1.6rem 0 .7rem; font: 900 clamp(1.05rem, 1.5vw, 1.3rem)/1.15 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; color: var(--g900); }
.pillar p { color: var(--muted); font-size: .95rem; max-width: 34ch; }

/* ---------- Tarjetas de servicios (inicio) ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 24px); }
.svc-card {
  --head: #fff;
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 1 / 1; padding: clamp(22px, 2.4vw, 34px); color: #fff; background: var(--g900);
}
.svc-media { position: absolute; inset: 0; z-index: -3; transition: transform 1.4s var(--ease); }
.svc-card:hover .svc-media { transform: scale(1.08); }
.svc-card::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(0deg, rgba(0, 26, 9, .95) 0%, rgba(0, 40, 15, .5) 52%, rgba(0, 60, 22, .12) 100%);
}
@media (hover: hover) {
  .svc-card::after {
    content: ""; position: absolute; left: 0; top: 0; z-index: -1; width: 520px; height: 520px; opacity: 0; pointer-events: none;
    background: radial-gradient(closest-side, rgba(61, 220, 90, .3), transparent);
    translate: calc(var(--mx, 50%) - 260px) calc(var(--my, 50%) - 260px); transition: opacity .5s;
  }
  .svc-card:hover::after { opacity: 1; will-change: translate; }
}
.svc-top { position: absolute; top: clamp(20px, 2.2vw, 30px); left: clamp(22px, 2.4vw, 34px); right: clamp(22px, 2.4vw, 34px); display: flex; justify-content: space-between; align-items: flex-start; }
.svc-card .tile { background: var(--g600); color: #fff; }
.svc-card:hover .tile { background: var(--g400); color: var(--g950); rotate: -8deg; }
.svc-line { display: block; width: 36px; height: 3px; margin-bottom: 1.1rem; border-radius: 2px; background: var(--g400); transition: width .8s var(--ease); }
.svc-card:hover .svc-line { width: 100%; }
.svc-card h3 { font: 900 clamp(1.1rem, 1.6vw, 1.45rem)/1.12 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; max-width: 13ch; color: #fff; }
.svc-more {
  display: inline-flex; align-items: center; gap: .6em; margin-top: 1rem;
  font: 700 .7rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--g400);
  opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .6s var(--ease);
}
.svc-card:hover .svc-more, .svc-card:focus-visible .svc-more { opacity: 1; transform: none; }
@media (hover: none) { .svc-more { opacity: 1; transform: none; } }

/* ---------- Franja institucional ---------- */
.band { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--g950); padding: clamp(90px, 12vw, 180px) 0; }
.band-bg { position: absolute; inset: -9% 0; z-index: -4; }
.band-shade {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(0, 154, 23, .4), transparent 60%),
    linear-gradient(100deg, rgba(0, 26, 9, .94) 8%, rgba(0, 50, 19, .8) 60%, rgba(0, 40, 15, .9) 100%);
}
.band-lines { position: absolute; inset: 0; z-index: -2; opacity: .6; background: repeating-linear-gradient(115deg, transparent 0 80px, rgba(255, 255, 255, .03) 80px 81px); }
.band-head .eyebrow { margin-bottom: 1.3rem; }
.band-head h2 { max-width: 13ch; }
.band-claims { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 48px); margin-top: clamp(40px, 5vw, 76px); max-width: 960px; }
.claim { padding-left: 1.6rem; border-left: 4px solid var(--g400); border-radius: 2px; }
.claim h3 { font: 900 clamp(1.05rem, 1.7vw, 1.45rem)/1.15 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; color: #fff; }
.claim p { margin-top: .6rem; color: rgba(255, 255, 255, .8); }
.values-row { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: clamp(56px, 7vw, 100px); }
.values-row li { position: relative; padding: 1.5rem 1rem 0 0; font: 900 clamp(.8rem, 1.1vw, .98rem)/1.2 var(--font-display); letter-spacing: .01em; text-transform: uppercase; }
.values-row li::before { content: ""; position: absolute; top: 0; left: 0; right: 1.2rem; height: 1px; background: rgba(255, 255, 255, .3); }
.values-row li::after { content: ""; position: absolute; top: -1px; left: 0; width: 30px; height: 4px; border-radius: 2px; background: var(--g400); }
.values-row .i { display: block; width: 30px; height: 30px; margin-bottom: .85rem; color: var(--g400); stroke-width: 1.6; }

/* ---------- Logos de clientes ---------- */
.logo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 18px); }
.logo-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.logo-slot {
  position: relative; display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 15%;
  background: #fff; box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .4s, translate .6s var(--ease), background-color .4s;
}
.logo-slot img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .55; transition: filter .5s, opacity .5s, transform .6s var(--ease); }
.logo-slot:hover { box-shadow: inset 0 0 0 2px var(--g600), 0 24px 44px -26px rgba(0, 73, 30, .6); translate: 0 -5px; }
.logo-slot:hover img { filter: none; opacity: 1; transform: scale(1.05); }
.logo-slot.is-empty { background: var(--g50); }
.logo-slot.is-empty::after {
  content: attr(data-label); text-align: center;
  font: 700 .62rem/1.4 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); opacity: .8;
}
.clients-cta { margin-top: clamp(36px, 4vw, 60px); text-align: center; }

/* Clientes (inicio): carrusel horizontal continuo con los logos en escala de grises; se pausa al pasar el cursor y a color al señalar uno.
   Cada logo trae su ancho (--w) calculado para que todos tengan un peso visual parecido. Solo anima transform. */
.clients-marquee { position: relative; overflow: hidden; margin-top: clamp(4px, 1vw, 16px); padding: clamp(10px, 1.6vw, 20px) 0; }
.clients-marquee::before, .clients-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: clamp(48px, 12vw, 200px); pointer-events: none; }
.clients-marquee::before { left: 0; background: linear-gradient(90deg, var(--white), rgba(254, 254, 254, 0)); }
.clients-marquee::after { right: 0; background: linear-gradient(270deg, var(--white), rgba(254, 254, 254, 0)); }
.marquee-run { display: flex; width: max-content; will-change: transform; animation: marquee 95s linear infinite; }
.clients-marquee:hover .marquee-run { animation-play-state: paused; }
.marquee-group { display: flex; flex: none; align-items: center; }
.marquee-group li { flex: none; display: grid; place-items: center; height: 100px; padding: 0 clamp(26px, 3.6vw, 56px); }
.marquee-group img { width: calc(var(--w) * 1px * var(--k, 1)); height: auto; filter: grayscale(1) brightness(.84) contrast(1.25); opacity: .8; transition: filter .45s, opacity .45s, transform .5s var(--ease); }
.marquee-group li:hover img { filter: none; opacity: 1; transform: scale(1.08); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 640px) {
  .marquee-group { --k: .8; }
  .marquee-group li { height: 78px; }
}
@media (prefers-reduced-motion: reduce) {
  .clients-marquee { overflow-x: auto; }
  .marquee-run { animation: none; }
  .marquee-group[aria-hidden="true"] { display: none; }
}
/* Clientes (página): los mismos logos en rejilla, con el mismo ajuste de tamaño y filtro */
/* con un número de logos que no llena la última fila, esa fila queda centrada */
.logo-grid.sized { --cols: 5; --gap: clamp(10px, 1.4vw, 18px); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.logo-grid.sized > li { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }
@media (max-width: 1100px) { .logo-grid.sized { --cols: 4; } }
@media (max-width: 640px) { .logo-grid.sized { --cols: 2; } }
.logo-grid.sized .logo-slot img { width: calc(var(--w) * 1px * 1.1); max-width: 100%; height: auto; max-height: 100%; filter: grayscale(1) brightness(.84) contrast(1.25); opacity: .8; }
.logo-grid.sized .logo-slot:hover img { filter: none; opacity: 1; }
@media (max-width: 640px) { .logo-grid.sized .logo-slot { padding: 12%; } .logo-grid.sized .logo-slot img { width: calc(var(--w) * 1px * .8); } }

/* ---------- Encabezado de páginas interiores ---------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background:
    radial-gradient(60% 90% at 90% 0%, rgba(0, 154, 23, .5), transparent 62%),
    radial-gradient(70% 80% at 0% 100%, rgba(0, 73, 30, .9), transparent 62%),
    linear-gradient(180deg, var(--g950), var(--g975));
  padding: calc(var(--header-h) + clamp(64px, 11vw, 150px)) 0 clamp(80px, 11vw, 150px);
}
.page-hero::after {
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: -1px; height: clamp(24px, 4vw, 56px);
  background: var(--white); clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.page-hero-bg { position: absolute; inset: 0; z-index: -4; }
.page-hero-bg .ph { position: absolute; inset: 0; animation: kenburns 26s ease-in-out infinite alternate; }
.page-hero-bg .ph::after { top: calc(var(--header-h) + 26px); translate: -50% 0; }
.page-hero-bg.still .ph, .page-hero-bg.fit-photo .ph { animation: none; }
/* Contacto: collage vertical sobre fondo blanco. En pantallas anchas va a la derecha, a la altura del hero y sin deformarse; el verde de la marca se funde con el blanco y una franja oscura arriba protege el menú */
@media (min-width: 961px) {
  .page-hero-bg.fit-photo .ph { background: #fff; }
  .page-hero-bg.fit-photo .ph::before, .page-hero-bg.fit-photo .ph::after { display: none; }
  .page-hero-bg.fit-photo .ph > img {
    inset: auto 0 0 auto; width: auto; max-width: none; height: calc(100% - 64px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%); mask-image: linear-gradient(90deg, transparent 0, #000 40%);
  }
  .page-hero-bg.fit-photo ~ .hero-aurora, .page-hero-bg.fit-photo ~ .hero-grid { display: none; }
  .page-hero-bg.fit-photo + .page-hero-shade {
    background:
      linear-gradient(180deg, rgba(0, 35, 13, .92) 0, rgba(0, 35, 13, .9) 56px, transparent 150px),
      linear-gradient(100deg, #00300f 0%, #00491e 36%, rgba(0, 105, 38, .78) 54%, rgba(0, 154, 23, 0) 76%);
  }
}
/* Celular: el texto ocupa todo el ancho, así que el collage se mezcla con el verde como un fantasma tonal */
@media (max-width: 960px) {
  .page-hero-bg.fit-photo .ph { background: linear-gradient(160deg, #0c7a2d, #00491e); }
  .page-hero-bg.fit-photo .ph::before, .page-hero-bg.fit-photo .ph::after { display: none; }
  .page-hero-bg.fit-photo .ph > img { mix-blend-mode: multiply; object-position: 70% 20%; filter: contrast(1.5); }
  .page-hero-bg.fit-photo + .page-hero-shade { background: linear-gradient(180deg, rgba(0, 26, 9, .12), rgba(0, 30, 11, .5)); }
}
/* Servicios: la foto mide 1400px de ancho. Por encima de eso se muestra a su tamaño real (sin estirarla, así no se ve borrosa) pegada a la derecha y su borde izquierdo se funde con la misma foto, difuminada, que llena el fondo; así la foto se ve en todo el ancho con el mismo degradado ligero que las demás páginas. Hasta 1400px ocupa todo el ancho. */
@media (min-width: 961px) {
  .page-hero-bg.side-photo .ph::after { display: none; }
  .page-hero-bg.side-photo .ph::before { inset: -40px; background: url("../assets/img/servicios/Principal%20Servicios.jpeg") 50% 40% / cover; filter: blur(24px); }
  .page-hero-bg.side-photo .ph > img { inset: 0 0 0 auto; width: min(100%, 1400px); max-width: none; height: 100%; }
  .page-hero.has-side-photo .lead, .page-hero.has-side-photo h1, .page-hero.has-side-photo .crumbs { text-shadow: 0 2px 22px rgba(0, 26, 9, .6), 0 1px 3px rgba(0, 26, 9, .35); }
}
@media (min-width: 1401px) {
  .page-hero-bg.side-photo .ph > img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%); mask-image: linear-gradient(90deg, transparent 0, #000 40%); }
}
.page-hero-shade { position: absolute; inset: 0; z-index: -3; background: linear-gradient(100deg, rgba(0, 26, 9, .9) 0%, rgba(0, 38, 14, .74) 36%, rgba(0, 45, 17, .34) 68%, rgba(0, 40, 15, .16) 100%); }
.page-hero .hero-aurora { opacity: .45; }
.page-hero .hero-grid { -webkit-mask-image: radial-gradient(ellipse 60% 100% at 85% 40%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 100% at 85% 40%, #000, transparent 75%); }
.page-hero .hero-aurora i:nth-child(1) { width: 40vw; height: 40vw; }
.page-hero-mark { position: absolute; z-index: -1; right: 1vw; bottom: 11%; width: min(40vw, 520px); pointer-events: none; }
.page-hero-mark path { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.page-hero-mark .hot { stroke: var(--g400); stroke-width: 1.6; filter: drop-shadow(0 0 5px rgba(61, 220, 90, .8)); }
.crumbs { display: flex; gap: .7em; margin-bottom: clamp(18px, 2.4vw, 28px); font: 700 .68rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .65); }
.crumbs a { transition: color .3s; }
.crumbs a:hover { color: var(--g400); }
.crumbs span[aria-current] { color: var(--g400); }
.page-hero h1 { max-width: 12em; font-size: clamp(2rem, 5vw, 4.4rem); }
.page-hero .lead { margin-top: clamp(20px, 2.6vw, 32px); font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.5; color: rgba(255, 255, 255, .86); max-width: 34ch; }
.page-hero .lead + .lead { margin-top: .45em; }

/* ---------- Quiénes somos ---------- */
.company-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.company-aside { position: sticky; top: 110px; }
.company-aside .eyebrow { margin-bottom: 1.3rem; }
.company-aside .media { margin-top: clamp(28px, 3.4vw, 48px); }
.company-copy p { color: var(--muted); font-size: 1.05rem; }
.company-copy p + p { margin-top: 1.5em; }
.company-copy .big { color: var(--g900); font: 700 clamp(1.1rem, 1.75vw, 1.5rem)/1.5 var(--font-display); letter-spacing: -.01em; }
.company-copy .big em { font-style: normal; color: var(--g600); }

.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 28px); }
.mv-card { --cut: 34px; position: relative; overflow: hidden; padding: clamp(34px, 4.4vw, 68px); background: rgba(255, 255, 255, .07); box-shadow: inset 0 3px 0 var(--g400), inset 0 0 0 1px rgba(255, 255, 255, .08); isolation: isolate; }
.mv-card::before {
  content: attr(data-ghost); position: absolute; z-index: -1; right: -2%; bottom: -10%;
  font: 900 clamp(5rem, 11vw, 9.5rem)/.8 var(--font-display); text-transform: uppercase; color: rgba(255, 255, 255, .045);
  transition: translate 1.2s var(--ease);
}
.mv-card:hover::before { translate: -3% -3%; }
.mv-card .tile { background: var(--g400); color: var(--g950); margin-bottom: 1.8rem; }
.mv-card h3 { font: 900 clamp(1.6rem, 2.7vw, 2.3rem)/1.05 var(--font-display); letter-spacing: -.015em; text-transform: uppercase; margin-bottom: 1.2rem; color: #fff; }
.mv-card p { color: rgba(255, 255, 255, .85); font-size: 1.02rem; max-width: 52ch; }

.values-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(12px, 1.6vw, 22px); }
.value-card { position: relative; grid-column: span 2; padding: clamp(26px, 2.6vw, 38px); background: #fff; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; transition: translate .6s var(--ease), box-shadow .6s; }
.value-card:nth-child(n+4) { grid-column: span 3; }
.value-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--g600), var(--g400)); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.value-card:hover { translate: 0 -6px; box-shadow: inset 0 0 0 1px transparent, 0 26px 50px -30px rgba(0, 73, 30, .6); }
.value-card:hover::before { transform: scaleX(1); }
.value-card:hover .tile { background: var(--g600); color: #fff; }
.value-card h3 { margin: 1.5rem 0 .6rem; font: 900 clamp(1rem, 1.35vw, 1.2rem)/1.15 var(--font-display); letter-spacing: -.005em; text-transform: uppercase; color: var(--g900); }
.value-card p { color: var(--muted); font-size: .95rem; }

/* ---------- Servicios y alcances ---------- */
.subnav {
  position: sticky; top: 72px; z-index: 50;
  background: rgba(255, 255, 255, .98);
  border-bottom: 1px solid var(--line);
}
.subnav-list { position: relative; display: flex; gap: clamp(6px, 1.4vw, 22px); overflow-x: auto; scrollbar-width: none; padding-block: 6px; }
.subnav-list::-webkit-scrollbar { display: none; }
.subnav a {
  position: relative; display: block; padding: 1em .9em; white-space: nowrap;
  font: 700 .68rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); transition: color .3s;
}
.subnav a::after { content: ""; position: absolute; left: .9em; right: .9em; bottom: 0; height: 3px; border-radius: 2px; background: var(--g600); transform: scaleX(0); transition: transform .5s var(--ease); }
.subnav a:hover, .subnav a.is-active { color: var(--g900); }
.subnav a.is-active::after, .subnav a:hover::after { transform: scaleX(1); }

.family { position: relative; padding: clamp(70px, 9vw, 130px) 0; scroll-margin-top: 110px; overflow: clip; }
.family:nth-of-type(even) { background: var(--g50); }
.family-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 104px); align-items: center; }
.family:nth-of-type(even) .family-media { order: 2; }
.family-media .media { --ar: 4 / 4.4; --cut: 40px; }
/* Mantenimiento y Obra civil: sus fotos son horizontales; en escritorio la columna de la foto es más ancha para que se vean más grandes (el texto cede espacio). En pantallas menores a 1101px queda igual que las demás. */
@media (min-width: 1101px) {
  .family-wide .family-grid { grid-template-columns: 1.35fr .85fr; column-gap: clamp(40px, 4.4vw, 72px); }
  .family-wide:nth-of-type(even) .family-grid { grid-template-columns: .85fr 1.35fr; }
}
.family-media { position: relative; }
/* Foto vertical: se muestra completa, a su proporción, sin pasar de 440px de ancho (así no se estira ni se hace enorme) */
.family-media .media.portrait { width: min(100%, 440px); margin-inline: auto; }
.family-tag {
  position: absolute; z-index: 2; left: 0; top: calc(100% + 18px); display: flex; align-items: center; gap: .9rem; padding: .9rem 1.3rem .9rem .9rem;
  background: var(--g900); color: #fff;
}
.family-tag .tile { width: 46px; height: 46px; background: var(--g400); color: var(--g950); }
.family-tag span { font: 700 .64rem/1.35 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.family:nth-of-type(even) .family-tag { left: auto; right: 0; }
.family-icon { display: block; margin-bottom: 1.5rem; color: rgba(0, 154, 23, .34); }
.family-icon .i { display: block; width: clamp(3.8rem, 7vw, 5.6rem); height: clamp(3.8rem, 7vw, 5.6rem); stroke-width: 1.3; }
.family h2 { margin-bottom: 1.3rem; }
.family .lead { margin-bottom: clamp(24px, 3vw, 36px); }
.scope-title { margin-bottom: .4rem; font: 700 .7rem/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--g700); }
.scope { display: grid; grid-template-columns: 1fr; column-gap: 2rem; border-top: 1px solid var(--line); }
.scope.two { grid-template-columns: 1fr 1fr; }
.scope li { display: flex; align-items: center; gap: .85rem; padding: .85rem 0; border-bottom: 1px solid var(--line); font-weight: 700; font-size: .92rem; line-height: 1.4; color: var(--g900); }
.scope li::before {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--g600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.family-extra { margin-top: clamp(24px, 3vw, 36px); }

.cta-band { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(100deg, var(--g600), #00841a 60%, var(--g800)); color: #fff; padding: clamp(70px, 9vw, 130px) 0; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(-45deg, rgba(0, 40, 15, .08) 0 18px, transparent 18px 36px); }
.cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2.4rem 4rem; }
.cta-inner h2 { color: #fff; font-size: clamp(1.9rem, 4.6vw, 3.9rem); }
.cta-inner p { margin-top: 1.1rem; max-width: 44ch; font-size: clamp(1rem, 1.3vw, 1.18rem); font-weight: 500; color: #fff; text-shadow: 0 1px 0 rgba(0, 40, 15, .25); }

/* ---------- Contacto ---------- */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 6vw, 96px); align-items: start; }
.contact-list { border-top: 1px solid var(--line); }
.contact-item { display: flex; align-items: center; gap: 1.2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); transition: padding-left .5s var(--ease); }
a.contact-item:hover { padding-left: 14px; }
a.contact-item:hover .tile { background: var(--g600); color: #fff; }
.contact-item.addr b { font: 700 .98rem/1.5 var(--font-body); letter-spacing: 0; }
.contact-item small { display: block; margin-bottom: .35rem; font: 700 .66rem/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--g700); }
.contact-item b { display: block; font: 900 clamp(1rem, 1.5vw, 1.3rem)/1.2 var(--font-display); letter-spacing: -.005em; color: var(--g900); overflow-wrap: anywhere; }
.social { display: flex; gap: .8rem; margin-top: 1.8rem; }
.social a { display: inline-flex; align-items: center; gap: .7em; padding: .9em 1.3em; border-radius: 10px 10px 10px 0; box-shadow: inset 0 0 0 1.5px var(--g900); color: var(--g900); font: 700 .72rem/1 var(--font-body); letter-spacing: .15em; text-transform: uppercase; transition: background-color .35s, color .35s; }
.social a:hover { background: var(--g900); color: #fff; }
.contact-logo { width: 110px; height: auto; margin-top: 2.6rem; }

/* Reclutamiento: zona oscura con la G grande y los medios de contacto */
.join-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.join-mark { width: clamp(120px, 15vw, 210px); height: auto; margin-bottom: clamp(24px, 3vw, 40px); }
.join-copy .eyebrow { margin-bottom: 1.1rem; }
.join-copy .lead { margin-top: clamp(18px, 2vw, 26px); max-width: 40ch; }
.join .contact-list, .join .contact-item { border-color: rgba(255, 255, 255, .18); }
.join .contact-item small { color: var(--g400); }
.join .contact-item b { color: #fff; font-size: clamp(.95rem, 1.3vw, 1.15rem); }
.join .tile { background: var(--g400); color: var(--g950); }
.join a.contact-item:hover .tile { background: #fff; color: var(--g900); }

.form-card { --cut: 34px; position: relative; padding: clamp(28px, 4vw, 56px); background: #fff; box-shadow: inset 0 4px 0 var(--g600), 0 40px 80px -50px rgba(0, 73, 30, .6); }
.form-card h2 { margin-bottom: .6rem; font: 900 clamp(1.4rem, 2.2vw, 1.85rem)/1.1 var(--font-display); letter-spacing: -.015em; text-transform: uppercase; color: var(--g900); }
.form-card > p { margin-bottom: 1.8rem; color: var(--muted); font-size: .95rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { position: relative; }
.field.full { grid-column: 1 / -1; }
.field input, .field select, .field textarea {
  width: 100%; padding: 1.55em 1em .6em; border: 1px solid var(--line); border-radius: 10px 10px 10px 0; background: var(--g50);
  font: 500 .98rem/1.4 var(--font-body); color: var(--ink); transition: border-color .3s, background-color .3s, box-shadow .3s;
  appearance: none; -webkit-appearance: none;
}
.field textarea { min-height: 150px; resize: vertical; }
.field select option { font-weight: 500; }
.field select {
  padding-right: 2.6em; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007a1a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1em center; background-size: 18px;
}
.field label {
  position: absolute; left: 1em; top: 1.15em; pointer-events: none; transform-origin: left top;
  font: 500 .95rem/1 var(--font-body); color: var(--muted); transition: transform .3s var(--ease), color .3s;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field.is-select label { transform: translateY(-.85em) scale(.74); color: var(--g700); font-weight: 700; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--g600); background: #fff; box-shadow: 0 0 0 4px rgba(0, 154, 23, .16); }
.field input:user-invalid, .field textarea:user-invalid { border-color: #c0392b; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.4rem; }
.form-actions .btn { background: var(--g900); color: #fff; }
.form-actions .btn::before { background: var(--g600); }
.form-status { font-size: .9rem; color: var(--muted); min-height: 1.4em; }
.form-status.ok { color: var(--g700); font-weight: 700; }
.form-status.err { color: #c0392b; font-weight: 700; }
.form-status { flex: 1 1 260px; }
.form-status a { color: var(--g700); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.form-status.ok { display: flex; align-items: center; gap: .7em; padding: .85em 1.1em; border-radius: 10px 10px 10px 0; background: var(--g50); box-shadow: inset 3px 0 0 var(--g600); }
.form-status.ok::before { content: ""; flex: none; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--g600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 70% no-repeat; }
.field.is-invalid input, .field.is-invalid textarea { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, .12); }
.form-actions .btn[aria-busy="true"] { pointer-events: none; opacity: .75; }
.form-actions .btn[aria-busy="true"] .i { animation: btn-spin .9s linear infinite; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

.map { position: relative; height: clamp(400px, 46vw, 580px); background: var(--g900); overflow: hidden; }
.map-frame { position: absolute; inset: 0; background: radial-gradient(60% 80% at 70% 40%, rgba(0, 154, 23, .35), transparent 70%), linear-gradient(160deg, var(--g800), var(--g975)); }
.map-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .16); }
.map-fallback .i { width: clamp(80px, 12vw, 150px); height: clamp(80px, 12vw, 150px); stroke-width: 1.2; }
.map-frame iframe { position: relative; display: block; width: 100%; height: 100%; border: 0; }
.map-card-wrap { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; pointer-events: none; }
.map-card { --cut: 28px; width: min(400px, 100%); padding: clamp(24px, 3vw, 36px); background: #fff; pointer-events: auto; box-shadow: inset 0 4px 0 var(--g600), inset 0 0 0 1px var(--line); }
.map-card .eyebrow { margin-bottom: .9rem; }
.map-card h2 { font: 900 clamp(1.15rem, 1.7vw, 1.45rem)/1.15 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; color: var(--g900); }
.map-card address { margin: .9rem 0 1.5rem; font-style: normal; font-weight: 500; line-height: 1.7; color: var(--ink); }
.map-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-sm { padding: 1em 1.3em; font-size: .68rem; }
.btn-outline { background: transparent; color: var(--g900); box-shadow: inset 0 0 0 1.5px var(--g900); }
.btn-outline::before { background: var(--g900); }
.btn-outline:hover { color: #fff; }
@media (max-width: 760px) {
  .map { height: auto; display: flex; flex-direction: column; background: var(--g50); }
  .map-frame { position: relative; order: 2; height: 340px; }
  .map-card-wrap { order: 1; height: auto; padding-block: 28px; pointer-events: auto; }
  .map-card { width: 100%; }
}

/* ---------- Pie de página ---------- */
.site-footer { position: relative; overflow: hidden; background: radial-gradient(70% 60% at 100% 0%, rgba(0, 154, 23, .28), transparent 60%), linear-gradient(180deg, var(--g900), var(--g975)); color: rgba(255, 255, 255, .78); padding: clamp(64px, 8vw, 110px) 0 0; isolation: isolate; }
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--g400), var(--g600) 40%, transparent 85%); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.footer-brand { display: flex; align-items: center; gap: 1.6rem; }
.footer-brand img { width: clamp(96px, 9vw, 128px); height: auto; }
.footer-tag { font: 900 clamp(1.1rem, 1.6vw, 1.4rem)/1.15 var(--font-display); letter-spacing: -.005em; text-transform: uppercase; color: #fff; }
.footer-tag small { display: block; margin-top: .7rem; font: 500 .85rem/1.5 var(--font-body); letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .7); }
.footer-col h4 { margin-bottom: 1.2rem; font: 700 .7rem/1 var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--g400); }
.footer-col li + li { margin-top: .7rem; }
.footer-col a { position: relative; font-size: .95rem; transition: color .3s; }
.footer-col a:hover { color: #fff; }
.footer-col a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--g400); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.footer-col a:hover::after { transform: scaleX(1); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem; margin-top: clamp(48px, 6vw, 84px); padding: 1.6rem 0 1.8rem; border-top: 1px solid var(--line-dark); font-size: .85rem; }
.footer-legal { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; font-size: .72rem; letter-spacing: .06em; color: rgba(255, 255, 255, .55); }
.footer-legal a:hover { color: var(--g400); }

/* ---------- Documentos legales (modal del pie de página) ---------- */
html.legal-open { overflow: hidden; padding-right: var(--sbw, 0); }
.legal { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: clamp(12px, 3vw, 40px); border: 0; background: transparent; color: var(--text); overflow: hidden; }
.legal[open] { display: grid; place-items: center; animation: legal-in .45s var(--ease); }
.legal::backdrop { background: rgba(0, 24, 9, .78); animation: fade-in .35s ease; }
.legal-panel {
  --cut: 34px; --r: 22px; display: flex; flex-direction: column; width: min(880px, 100%);
  max-height: calc(100vh - clamp(24px, 6vw, 80px)); max-height: calc(100dvh - clamp(24px, 6vw, 80px));
  background: #fff; box-shadow: inset 0 4px 0 var(--g600);
}
.legal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.4rem; flex: none; padding: clamp(24px, 3vw, 36px) clamp(22px, 3.4vw, 44px) clamp(16px, 2vw, 22px); border-bottom: 1px solid var(--line); }
.legal-head .eyebrow { margin-bottom: .7rem; }
.legal-title { font: 900 clamp(1.05rem, 2.1vw, 1.55rem)/1.15 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; color: var(--g900); }
.legal-close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -4px -6px 0 0; border: 0; border-radius: 12px 12px 12px 0; background: var(--g50); color: var(--g900); cursor: pointer; transition: background-color .3s, color .3s, rotate .5s var(--ease); }
.legal-close:hover { background: var(--g900); color: #fff; rotate: 90deg; }
.legal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(20px, 3vw, 32px) clamp(22px, 3.4vw, 44px) clamp(28px, 4vw, 48px); font-size: .95rem; line-height: 1.75; scrollbar-width: thin; scrollbar-color: var(--g600) transparent; }
.legal-body > :first-child { margin-top: 0; }
.legal-body h3 { margin: 2.1rem 0 .7rem; font: 900 clamp(.95rem, 1.3vw, 1.08rem)/1.3 var(--font-display); letter-spacing: -.003em; text-transform: uppercase; color: var(--g900); }
.legal-body h4 { margin: 1.5rem 0 .5rem; font: 700 .78rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--g700); }
.legal-body p { margin: .75rem 0; color: var(--muted); }
.legal-body .legal-meta { margin-top: 0; font: 700 .7rem/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--g700); }
.legal-body .legal-item { padding-left: 1.1rem; }
.legal-body ul, .legal-body ol { margin: .75rem 0; padding-left: 1.4rem; color: var(--muted); }
.legal-body ul { list-style: disc; }
.legal-body ol { list-style: decimal; }
.legal-body li { margin: .35rem 0; padding-left: .25rem; }
.legal-body li::marker { color: var(--g600); font-weight: 700; }
.legal-body strong { color: var(--g900); font-weight: 700; }
.legal-body a { color: var(--g600); font-weight: 700; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; overflow-wrap: anywhere; transition: color .3s; }
.legal-body a:hover { color: var(--g900); }
.legal-contact { margin: 1.4rem 0 0; padding: 1.2rem 1.4rem; font-style: normal; font-weight: 700; text-align: center; color: var(--muted); background: var(--g50); border-radius: 14px 14px 14px 0; }
.legal-channels { display: grid; gap: 1rem; margin: 1.2rem 0; }
.legal-channel { padding: 1.1rem 1.3rem 1.2rem; background: var(--g50); border-left: 3px solid var(--g600); border-radius: 0 12px 12px 0; }
.legal-body .legal-channel h4 { margin: 0 0 .5rem; font-size: .82rem; letter-spacing: .06em; color: var(--g900); }
.legal-body .legal-channel p { margin: .5rem 0 0; }
.legal-channel-body { display: flex; align-items: flex-start; gap: 1.4rem; }
.legal-channel-text { flex: 1 1 auto; min-width: 0; }
.legal-body .legal-qr { flex: none; display: block; margin-top: .5rem; padding: 8px; background: #fff; border-radius: 12px 12px 12px 0; box-shadow: 0 0 0 1px var(--line); }
.legal-qr img { width: 141px; height: 141px; }
@keyframes legal-in { from { opacity: 0; transform: translateY(22px) scale(.97); } }

/* Secciones fuera de pantalla: se pausan sus animaciones infinitas (ver main.js) */
.is-paused, .is-paused *, .is-paused *::before, .is-paused *::after { animation-play-state: paused !important; }

/* ---------- Transición entre páginas (navegadores compatibles) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .16s ease-out both vt-out; }
::view-transition-new(root) { animation: .32s ease-out both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ---------- Animaciones ---------- */
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.14) translate(-1.5%, -1%); } }
@keyframes drift { to { transform: translate3d(6vw, 4vw, 0) scale(1.15); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4.2); opacity: 0; } }
@keyframes spark { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate3d(30px, -62vh, 0); opacity: 0; } }
@keyframes spark-b { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate3d(-34px, -62vh, 0); opacity: 0; } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(16px); opacity: 0; } 100% { opacity: 0; } }
@keyframes shimmer { 0%, 55% { background-position: 100% 0; } 100% { background-position: -60% 0; } }
@keyframes splash-in { from { opacity: 0; transform: translateY(20px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes sheen { to { clip-path: polygon(112% 0, 134% 0, 114% 100%, 92% 100%); } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .logo-grid.cols-5 { grid-template-columns: repeat(4, 1fr); }
  .values-row { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; }
  .svc-card { aspect-ratio: 1 / 1; }
}
@media (min-width: 961px) and (max-width: 1100px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .pillar { padding-bottom: clamp(28px, 3vw, 40px); }
  .pillar:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pillar:nth-child(odd)::before { left: 0; }
  .pillar:nth-child(n+3) { border-top: 1px solid var(--line); }
  .pillar:nth-child(n+3)::before { top: -1px; }
}
@media (max-width: 960px) {
  :root { --header-h: 76px; }
  .brand { height: 42px; }
  .is-scrolled .brand { height: 38px; }
  .intro-grid, .company-grid, .family-grid, .contact-grid, .join-grid { grid-template-columns: 1fr; }
  .company-aside { position: static; }
  .family:nth-of-type(even) .family-media { order: 0; }
  .family-tag, .family:nth-of-type(even) .family-tag { position: relative; top: auto; left: auto; right: auto; width: fit-content; margin-top: 14px; }
  .pillars { grid-template-columns: 1fr; border-top: 0; margin-top: 56px; }
  .pillar, .pillar + .pillar { padding: 28px 0 28px; border-left: 0; border-top: 1px solid var(--line); }
  .pillar + .pillar::before { left: 0; }
  .pillar::before { top: -1px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .mv-grid, .band-claims { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .value-card, .value-card:nth-child(n+4) { grid-column: auto; }
  .value-card:last-child { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .collage { max-width: 560px; }
  .subnav { top: 68px; }
  .page-hero-shade { background: linear-gradient(180deg, rgba(0, 26, 9, .6), rgba(0, 32, 12, .8)); }
}
@media (max-width: 640px) {
  :root { --header-h: 70px; --r: 18px; --cut: 20px; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc-card { aspect-ratio: 4 / 4.2; }
  .logo-grid, .logo-grid.cols-5 { grid-template-columns: repeat(2, 1fr); }
  .values-row { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: 1fr; }
  .value-card:last-child { grid-column: auto; }
  .form-grid { grid-template-columns: 1fr; }
  .scope.two { grid-template-columns: 1fr; }
  .hero-actions .btn { flex: 1 1 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { flex-direction: column; align-items: flex-start; }
  .cta-inner .btn { width: 100%; }
  .btn-cta { justify-content: space-between; }
  .family-media .media, .mv-card, .form-card { --cut: 24px; }
  .legal-channel-body { flex-direction: column; gap: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .sparks, .hero-aurora { display: none; }
  [data-parallax] { animation: none; }
  .splash, .splash-wipe { display: none !important; }
  .legal::backdrop { animation: none; }
}

/* ---------- Hero del inicio: la grúa arma un edificio de 6 pisos y cada piso enciende un servicio ----------
   Solo la grúa tiene keyframes; piezas, pisos e íconos cambian de estado con clases que pone main.js (sección "Hero: grúa").
   Sin JS o con "reducir movimiento" queda el edificio terminado con los 6 servicios encendidos. */
.build path,.build .ring,.build .snap{fill:none;stroke:rgba(255,255,255,.6);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.build .ghost path{stroke:rgba(255,255,255,.13);stroke-dasharray:3 4}
.build .pile path{stroke:rgba(255,255,255,.38)}
.build .plc path{stroke:rgba(255,255,255,.62)}
.build .hatch{stroke:rgba(255,255,255,.28);stroke-width:1}
.build .acc{stroke:rgba(61,220,90,.8)}
.build .carry path{stroke:rgba(255,255,255,.88)}
.build .carry .acc{stroke:rgba(61,220,90,.95)}
.build .carry .hatch{stroke:rgba(255,255,255,.4)}
.build .sling{stroke:rgba(255,255,255,.5);stroke-width:1}
.build .trolley,.build .hookblk{stroke:rgba(255,255,255,.85);stroke-width:1.4}
.build .cable{fill:rgba(255,255,255,.6);stroke:none}
.build .tag{font:700 7.5px/1 Montserrat,sans-serif;letter-spacing:.16em;fill:rgba(61,220,90,.95);stroke:none}
.build .lit-all{filter:drop-shadow(0 0 5px rgba(61,220,90,.85))}
.build .lit path{stroke:var(--g400);stroke-width:1.7}
.build .ring,.build .snap{stroke:var(--g400);stroke-width:1.4;transform-box:fill-box;transform-origin:center}
.build .load,.build .unfold,.build .cable{transform-box:fill-box;transform-origin:50% 0}
.build .ico{fill:none;stroke:var(--g400);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 4px rgba(61,220,90,.9))}
.build .slab{stroke:rgba(61,220,90,.7)}
.build .pile,.build .carry,.build .snap,.build .ring{opacity:0}
.build .plc{opacity:1}
.build .lit{opacity:.5}
.build .trav{transform:translateX(640px)}
.build .hook{transform:translateY(128px)}
.build .cable{transform:scaleY(128)}
.build.live{animation:fade-in 1.2s ease 2.6s both}
@keyframes rig-x{0%{transform:translateX(640px)}3.7688%{transform:translateX(640px);animation-timing-function:linear}4.441%{transform:translateX(640px);animation-timing-function:cubic-bezier(.45,0,.25,1)}5.8982%{transform:translateX(560px);animation-timing-function:linear}7.8078%{transform:translateX(560px);animation-timing-function:cubic-bezier(.45,0,.25,1)}9.0389%{transform:translateX(720px);animation-timing-function:linear}10.0503%{transform:translateX(720px);animation-timing-function:linear}10.7224%{transform:translateX(720px);animation-timing-function:cubic-bezier(.45,0,.25,1)}12.1796%{transform:translateX(560px);animation-timing-function:linear}14.0892%{transform:translateX(560px);animation-timing-function:cubic-bezier(.45,0,.25,1)}15.3204%{transform:translateX(755px);animation-timing-function:linear}16.3317%{transform:translateX(755px);animation-timing-function:linear}17.0038%{transform:translateX(755px);animation-timing-function:cubic-bezier(.45,0,.25,1)}18.4611%{transform:translateX(560px);animation-timing-function:linear}20.3706%{transform:translateX(560px);animation-timing-function:cubic-bezier(.45,0,.25,1)}21.6018%{transform:translateX(720px);animation-timing-function:linear}22.6131%{transform:translateX(720px);animation-timing-function:linear}23.2852%{transform:translateX(720px);animation-timing-function:cubic-bezier(.45,0,.25,1)}24.7425%{transform:translateX(560px);animation-timing-function:linear}26.652%{transform:translateX(560px);animation-timing-function:cubic-bezier(.45,0,.25,1)}27.8832%{transform:translateX(685px);animation-timing-function:linear}28.8945%{transform:translateX(685px);animation-timing-function:linear}29.5666%{transform:translateX(685px);animation-timing-function:cubic-bezier(.45,0,.25,1)}31.0239%{transform:translateX(560px);animation-timing-function:linear}32.9334%{transform:translateX(560px);animation-timing-function:cubic-bezier(.45,0,.25,1)}34.1646%{transform:translateX(720px);animation-timing-function:linear}35.1759%{transform:translateX(720px);animation-timing-function:linear}35.848%{transform:translateX(720px);animation-timing-function:cubic-bezier(.45,0,.25,1)}37.3053%{transform:translateX(560px);animation-timing-function:linear}39.2148%{transform:translateX(560px);animation-timing-function:cubic-bezier(.45,0,.25,1)}40.446%{transform:translateX(685px);animation-timing-function:linear}41.4573%{transform:translateX(685px);animation-timing-function:linear}42.1294%{transform:translateX(685px);animation-timing-function:cubic-bezier(.45,0,.25,1)}43.5867%{transform:translateX(560px);animation-timing-function:linear}45.4962%{transform:translateX(560px);animation-timing-function:cubic-bezier(.45,0,.25,1)}46.7274%{transform:translateX(720px);animation-timing-function:linear}47.7387%{transform:translateX(720px);animation-timing-function:linear}48.4108%{transform:translateX(720px);animation-timing-function:cubic-bezier(.45,0,.25,1)}49.8681%{transform:translateX(560px);animation-timing-function:linear}51.7776%{transform:translateX(560px);animation-timing-function:cubic-bezier(.45,0,.25,1)}53.0088%{transform:translateX(755px);animation-timing-function:linear}54.0201%{transform:translateX(755px);animation-timing-function:linear}54.6922%{transform:translateX(755px);animation-timing-function:cubic-bezier(.45,0,.25,1)}56.1495%{transform:translateX(560px);animation-timing-function:linear}58.059%{transform:translateX(560px);animation-timing-function:cubic-bezier(.45,0,.25,1)}59.2902%{transform:translateX(720px);animation-timing-function:linear}60.3015%{transform:translateX(720px);animation-timing-function:linear}60.9736%{transform:translateX(720px);animation-timing-function:cubic-bezier(.45,0,.25,1)}62.4309%{transform:translateX(560px);animation-timing-function:linear}64.3405%{transform:translateX(560px);animation-timing-function:cubic-bezier(.45,0,.25,1)}65.5716%{transform:translateX(755px);animation-timing-function:linear}66.5829%{transform:translateX(755px);animation-timing-function:linear}67.255%{transform:translateX(755px);animation-timing-function:cubic-bezier(.45,0,.25,1)}68.7123%{transform:translateX(560px);animation-timing-function:linear}70.6219%{transform:translateX(560px);animation-timing-function:cubic-bezier(.45,0,.25,1)}71.853%{transform:translateX(720px);animation-timing-function:linear}72.8643%{transform:translateX(720px);animation-timing-function:linear}73.5364%{transform:translateX(720px);animation-timing-function:cubic-bezier(.45,0,.25,1)}74.9937%{transform:translateX(560px);animation-timing-function:linear}76.9033%{transform:translateX(560px);animation-timing-function:cubic-bezier(.45,0,.25,1)}78.1344%{transform:translateX(685px);animation-timing-function:linear}79.1457%{transform:translateX(685px);animation-timing-function:linear}79.8178%{transform:translateX(685px);animation-timing-function:cubic-bezier(.45,0,.25,1)}81.2751%{transform:translateX(615.9px);animation-timing-function:linear}83.1847%{transform:translateX(615.9px);animation-timing-function:cubic-bezier(.45,0,.25,1)}84.4158%{transform:translateX(720px);animation-timing-function:linear}85.4271%{transform:translateX(720px);animation-timing-function:linear}86.1809%{transform:translateX(720px);animation-timing-function:cubic-bezier(.45,0,.25,1)}89.4472%{transform:translateX(640px);animation-timing-function:linear}100%{transform:translateX(640px)}}
@keyframes rig-y-hook{0%{transform:translateY(128px)}3.7688%{transform:translateY(128px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}4.554%{transform:translateY(73px);animation-timing-function:linear}5.4523%{transform:translateY(73px);animation-timing-function:cubic-bezier(.45,0,.25,1)}6.5704%{transform:translateY(446px);animation-timing-function:linear}6.7965%{transform:translateY(446px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}7.8078%{transform:translateY(396px);animation-timing-function:linear}9.0389%{transform:translateY(396px);animation-timing-function:cubic-bezier(.45,0,.25,1)}10.0503%{transform:translateY(512px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}10.8354%{transform:translateY(457px);animation-timing-function:linear}11.7337%{transform:translateY(457px);animation-timing-function:cubic-bezier(.45,0,.25,1)}12.8518%{transform:translateY(456px);animation-timing-function:linear}13.0779%{transform:translateY(456px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}14.0892%{transform:translateY(406px);animation-timing-function:linear}15.3204%{transform:translateY(406px);animation-timing-function:cubic-bezier(.45,0,.25,1)}16.3317%{transform:translateY(512px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}17.1168%{transform:translateY(457px);animation-timing-function:linear}18.0151%{transform:translateY(457px);animation-timing-function:cubic-bezier(.45,0,.25,1)}19.1332%{transform:translateY(466px);animation-timing-function:linear}19.3593%{transform:translateY(466px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}20.3706%{transform:translateY(408px);animation-timing-function:linear}21.6018%{transform:translateY(408px);animation-timing-function:cubic-bezier(.45,0,.25,1)}22.6131%{transform:translateY(458px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}23.3982%{transform:translateY(403px);animation-timing-function:linear}24.2965%{transform:translateY(403px);animation-timing-function:cubic-bezier(.45,0,.25,1)}25.4146%{transform:translateY(476px);animation-timing-function:linear}25.6407%{transform:translateY(476px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}26.652%{transform:translateY(408px);animation-timing-function:linear}27.8832%{transform:translateY(408px);animation-timing-function:cubic-bezier(.45,0,.25,1)}28.8945%{transform:translateY(458px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}29.6796%{transform:translateY(403px);animation-timing-function:linear}30.5779%{transform:translateY(403px);animation-timing-function:cubic-bezier(.45,0,.25,1)}31.696%{transform:translateY(486px);animation-timing-function:linear}31.9221%{transform:translateY(486px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}32.9334%{transform:translateY(354px);animation-timing-function:linear}34.1646%{transform:translateY(354px);animation-timing-function:cubic-bezier(.45,0,.25,1)}35.1759%{transform:translateY(404px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}35.9611%{transform:translateY(349px);animation-timing-function:linear}36.8593%{transform:translateY(349px);animation-timing-function:cubic-bezier(.45,0,.25,1)}37.9774%{transform:translateY(496px);animation-timing-function:linear}38.2035%{transform:translateY(496px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}39.2148%{transform:translateY(354px);animation-timing-function:linear}40.446%{transform:translateY(354px);animation-timing-function:cubic-bezier(.45,0,.25,1)}41.4573%{transform:translateY(404px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}42.2425%{transform:translateY(349px);animation-timing-function:linear}43.1407%{transform:translateY(349px);animation-timing-function:cubic-bezier(.45,0,.25,1)}44.2588%{transform:translateY(506px);animation-timing-function:linear}44.4849%{transform:translateY(506px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}45.4962%{transform:translateY(300px);animation-timing-function:linear}46.7274%{transform:translateY(300px);animation-timing-function:cubic-bezier(.45,0,.25,1)}47.7387%{transform:translateY(350px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}48.5239%{transform:translateY(295px);animation-timing-function:linear}49.4221%{transform:translateY(295px);animation-timing-function:cubic-bezier(.45,0,.25,1)}50.5402%{transform:translateY(516px);animation-timing-function:linear}50.7663%{transform:translateY(516px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}51.7776%{transform:translateY(300px);animation-timing-function:linear}53.0088%{transform:translateY(300px);animation-timing-function:cubic-bezier(.45,0,.25,1)}54.0201%{transform:translateY(350px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}54.8053%{transform:translateY(295px);animation-timing-function:linear}55.7035%{transform:translateY(295px);animation-timing-function:cubic-bezier(.45,0,.25,1)}56.8216%{transform:translateY(526px);animation-timing-function:linear}57.0477%{transform:translateY(526px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}58.059%{transform:translateY(246px);animation-timing-function:linear}59.2902%{transform:translateY(246px);animation-timing-function:cubic-bezier(.45,0,.25,1)}60.3015%{transform:translateY(296px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}61.0867%{transform:translateY(241px);animation-timing-function:linear}61.9849%{transform:translateY(241px);animation-timing-function:cubic-bezier(.45,0,.25,1)}63.103%{transform:translateY(536px);animation-timing-function:linear}63.3291%{transform:translateY(536px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}64.3405%{transform:translateY(246px);animation-timing-function:linear}65.5716%{transform:translateY(246px);animation-timing-function:cubic-bezier(.45,0,.25,1)}66.5829%{transform:translateY(296px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}67.3681%{transform:translateY(241px);animation-timing-function:linear}68.2663%{transform:translateY(241px);animation-timing-function:cubic-bezier(.45,0,.25,1)}69.3844%{transform:translateY(546px);animation-timing-function:linear}69.6106%{transform:translateY(546px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}70.6219%{transform:translateY(192px);animation-timing-function:linear}71.853%{transform:translateY(192px);animation-timing-function:cubic-bezier(.45,0,.25,1)}72.8643%{transform:translateY(242px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}73.6495%{transform:translateY(187px);animation-timing-function:linear}74.5477%{transform:translateY(187px);animation-timing-function:cubic-bezier(.45,0,.25,1)}75.6658%{transform:translateY(556px);animation-timing-function:linear}75.892%{transform:translateY(556px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}76.9033%{transform:translateY(192px);animation-timing-function:linear}78.1344%{transform:translateY(192px);animation-timing-function:cubic-bezier(.45,0,.25,1)}79.1457%{transform:translateY(242px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}79.9309%{transform:translateY(187px);animation-timing-function:linear}80.8291%{transform:translateY(187px);animation-timing-function:cubic-bezier(.45,0,.25,1)}81.9472%{transform:translateY(520px);animation-timing-function:linear}82.1734%{transform:translateY(520px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}83.1847%{transform:translateY(148px);animation-timing-function:linear}84.4158%{transform:translateY(148px);animation-timing-function:cubic-bezier(.45,0,.25,1)}85.4271%{transform:translateY(198px);animation-timing-function:cubic-bezier(.45,0,.25,1)}89.4472%{transform:translateY(128px);animation-timing-function:linear}100%{transform:translateY(128px)}}
@keyframes rig-y-cable{0%{transform:scaleY(128)}3.7688%{transform:scaleY(128);animation-timing-function:cubic-bezier(.2,.7,.2,1)}4.554%{transform:scaleY(73);animation-timing-function:linear}5.4523%{transform:scaleY(73);animation-timing-function:cubic-bezier(.45,0,.25,1)}6.5704%{transform:scaleY(446);animation-timing-function:linear}6.7965%{transform:scaleY(446);animation-timing-function:cubic-bezier(.2,.7,.2,1)}7.8078%{transform:scaleY(396);animation-timing-function:linear}9.0389%{transform:scaleY(396);animation-timing-function:cubic-bezier(.45,0,.25,1)}10.0503%{transform:scaleY(512);animation-timing-function:cubic-bezier(.2,.7,.2,1)}10.8354%{transform:scaleY(457);animation-timing-function:linear}11.7337%{transform:scaleY(457);animation-timing-function:cubic-bezier(.45,0,.25,1)}12.8518%{transform:scaleY(456);animation-timing-function:linear}13.0779%{transform:scaleY(456);animation-timing-function:cubic-bezier(.2,.7,.2,1)}14.0892%{transform:scaleY(406);animation-timing-function:linear}15.3204%{transform:scaleY(406);animation-timing-function:cubic-bezier(.45,0,.25,1)}16.3317%{transform:scaleY(512);animation-timing-function:cubic-bezier(.2,.7,.2,1)}17.1168%{transform:scaleY(457);animation-timing-function:linear}18.0151%{transform:scaleY(457);animation-timing-function:cubic-bezier(.45,0,.25,1)}19.1332%{transform:scaleY(466);animation-timing-function:linear}19.3593%{transform:scaleY(466);animation-timing-function:cubic-bezier(.2,.7,.2,1)}20.3706%{transform:scaleY(408);animation-timing-function:linear}21.6018%{transform:scaleY(408);animation-timing-function:cubic-bezier(.45,0,.25,1)}22.6131%{transform:scaleY(458);animation-timing-function:cubic-bezier(.2,.7,.2,1)}23.3982%{transform:scaleY(403);animation-timing-function:linear}24.2965%{transform:scaleY(403);animation-timing-function:cubic-bezier(.45,0,.25,1)}25.4146%{transform:scaleY(476);animation-timing-function:linear}25.6407%{transform:scaleY(476);animation-timing-function:cubic-bezier(.2,.7,.2,1)}26.652%{transform:scaleY(408);animation-timing-function:linear}27.8832%{transform:scaleY(408);animation-timing-function:cubic-bezier(.45,0,.25,1)}28.8945%{transform:scaleY(458);animation-timing-function:cubic-bezier(.2,.7,.2,1)}29.6796%{transform:scaleY(403);animation-timing-function:linear}30.5779%{transform:scaleY(403);animation-timing-function:cubic-bezier(.45,0,.25,1)}31.696%{transform:scaleY(486);animation-timing-function:linear}31.9221%{transform:scaleY(486);animation-timing-function:cubic-bezier(.2,.7,.2,1)}32.9334%{transform:scaleY(354);animation-timing-function:linear}34.1646%{transform:scaleY(354);animation-timing-function:cubic-bezier(.45,0,.25,1)}35.1759%{transform:scaleY(404);animation-timing-function:cubic-bezier(.2,.7,.2,1)}35.9611%{transform:scaleY(349);animation-timing-function:linear}36.8593%{transform:scaleY(349);animation-timing-function:cubic-bezier(.45,0,.25,1)}37.9774%{transform:scaleY(496);animation-timing-function:linear}38.2035%{transform:scaleY(496);animation-timing-function:cubic-bezier(.2,.7,.2,1)}39.2148%{transform:scaleY(354);animation-timing-function:linear}40.446%{transform:scaleY(354);animation-timing-function:cubic-bezier(.45,0,.25,1)}41.4573%{transform:scaleY(404);animation-timing-function:cubic-bezier(.2,.7,.2,1)}42.2425%{transform:scaleY(349);animation-timing-function:linear}43.1407%{transform:scaleY(349);animation-timing-function:cubic-bezier(.45,0,.25,1)}44.2588%{transform:scaleY(506);animation-timing-function:linear}44.4849%{transform:scaleY(506);animation-timing-function:cubic-bezier(.2,.7,.2,1)}45.4962%{transform:scaleY(300);animation-timing-function:linear}46.7274%{transform:scaleY(300);animation-timing-function:cubic-bezier(.45,0,.25,1)}47.7387%{transform:scaleY(350);animation-timing-function:cubic-bezier(.2,.7,.2,1)}48.5239%{transform:scaleY(295);animation-timing-function:linear}49.4221%{transform:scaleY(295);animation-timing-function:cubic-bezier(.45,0,.25,1)}50.5402%{transform:scaleY(516);animation-timing-function:linear}50.7663%{transform:scaleY(516);animation-timing-function:cubic-bezier(.2,.7,.2,1)}51.7776%{transform:scaleY(300);animation-timing-function:linear}53.0088%{transform:scaleY(300);animation-timing-function:cubic-bezier(.45,0,.25,1)}54.0201%{transform:scaleY(350);animation-timing-function:cubic-bezier(.2,.7,.2,1)}54.8053%{transform:scaleY(295);animation-timing-function:linear}55.7035%{transform:scaleY(295);animation-timing-function:cubic-bezier(.45,0,.25,1)}56.8216%{transform:scaleY(526);animation-timing-function:linear}57.0477%{transform:scaleY(526);animation-timing-function:cubic-bezier(.2,.7,.2,1)}58.059%{transform:scaleY(246);animation-timing-function:linear}59.2902%{transform:scaleY(246);animation-timing-function:cubic-bezier(.45,0,.25,1)}60.3015%{transform:scaleY(296);animation-timing-function:cubic-bezier(.2,.7,.2,1)}61.0867%{transform:scaleY(241);animation-timing-function:linear}61.9849%{transform:scaleY(241);animation-timing-function:cubic-bezier(.45,0,.25,1)}63.103%{transform:scaleY(536);animation-timing-function:linear}63.3291%{transform:scaleY(536);animation-timing-function:cubic-bezier(.2,.7,.2,1)}64.3405%{transform:scaleY(246);animation-timing-function:linear}65.5716%{transform:scaleY(246);animation-timing-function:cubic-bezier(.45,0,.25,1)}66.5829%{transform:scaleY(296);animation-timing-function:cubic-bezier(.2,.7,.2,1)}67.3681%{transform:scaleY(241);animation-timing-function:linear}68.2663%{transform:scaleY(241);animation-timing-function:cubic-bezier(.45,0,.25,1)}69.3844%{transform:scaleY(546);animation-timing-function:linear}69.6106%{transform:scaleY(546);animation-timing-function:cubic-bezier(.2,.7,.2,1)}70.6219%{transform:scaleY(192);animation-timing-function:linear}71.853%{transform:scaleY(192);animation-timing-function:cubic-bezier(.45,0,.25,1)}72.8643%{transform:scaleY(242);animation-timing-function:cubic-bezier(.2,.7,.2,1)}73.6495%{transform:scaleY(187);animation-timing-function:linear}74.5477%{transform:scaleY(187);animation-timing-function:cubic-bezier(.45,0,.25,1)}75.6658%{transform:scaleY(556);animation-timing-function:linear}75.892%{transform:scaleY(556);animation-timing-function:cubic-bezier(.2,.7,.2,1)}76.9033%{transform:scaleY(192);animation-timing-function:linear}78.1344%{transform:scaleY(192);animation-timing-function:cubic-bezier(.45,0,.25,1)}79.1457%{transform:scaleY(242);animation-timing-function:cubic-bezier(.2,.7,.2,1)}79.9309%{transform:scaleY(187);animation-timing-function:linear}80.8291%{transform:scaleY(187);animation-timing-function:cubic-bezier(.45,0,.25,1)}81.9472%{transform:scaleY(520);animation-timing-function:linear}82.1734%{transform:scaleY(520);animation-timing-function:cubic-bezier(.2,.7,.2,1)}83.1847%{transform:scaleY(148);animation-timing-function:linear}84.4158%{transform:scaleY(148);animation-timing-function:cubic-bezier(.45,0,.25,1)}85.4271%{transform:scaleY(198);animation-timing-function:cubic-bezier(.45,0,.25,1)}89.4472%{transform:scaleY(128);animation-timing-function:linear}100%{transform:scaleY(128)}}
@keyframes rig-sway{0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}3.7688%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}4.441%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}5%{transform:rotate(-3deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}5.8982%{transform:rotate(2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}6.5704%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}7.8078%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}8.2538%{transform:rotate(3.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}9.0389%{transform:rotate(-2.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}9.6043%{transform:rotate(1.2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}10.0503%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}10.7224%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}11.2814%{transform:rotate(-3deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}12.1796%{transform:rotate(2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}12.8518%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}14.0892%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}14.5352%{transform:rotate(3.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}15.3204%{transform:rotate(-2.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}15.8857%{transform:rotate(1.2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}16.3317%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}17.0038%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}17.5628%{transform:rotate(-3deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}18.4611%{transform:rotate(2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}19.1332%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}20.3706%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}20.8166%{transform:rotate(3.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}21.6018%{transform:rotate(-2.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}22.1671%{transform:rotate(1.2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}22.6131%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}23.2852%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}23.8442%{transform:rotate(-3deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}24.7425%{transform:rotate(2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}25.4146%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}26.652%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}27.098%{transform:rotate(3.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}27.8832%{transform:rotate(-2.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}28.4485%{transform:rotate(1.2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}28.8945%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}29.5666%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}30.1256%{transform:rotate(-3deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}31.0239%{transform:rotate(2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}31.696%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}32.9334%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}33.3794%{transform:rotate(3.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}34.1646%{transform:rotate(-2.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}34.7299%{transform:rotate(1.2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}35.1759%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}35.848%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}36.407%{transform:rotate(-3deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}37.3053%{transform:rotate(2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}37.9774%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}39.2148%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}39.6608%{transform:rotate(3.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}40.446%{transform:rotate(-2.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}41.0113%{transform:rotate(1.2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}41.4573%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}42.1294%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}42.6884%{transform:rotate(-3deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}43.5867%{transform:rotate(2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}44.2588%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}45.4962%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}45.9422%{transform:rotate(3.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}46.7274%{transform:rotate(-2.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}47.2927%{transform:rotate(1.2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}47.7387%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}48.4108%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}48.9698%{transform:rotate(-3deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}49.8681%{transform:rotate(2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}50.5402%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}51.7776%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}52.2236%{transform:rotate(3.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}53.0088%{transform:rotate(-2.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}53.5741%{transform:rotate(1.2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}54.0201%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}54.6922%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}55.2513%{transform:rotate(-3deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}56.1495%{transform:rotate(2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}56.8216%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}58.059%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}58.505%{transform:rotate(3.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}59.2902%{transform:rotate(-2.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}59.8555%{transform:rotate(1.2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}60.3015%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}60.9736%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}61.5327%{transform:rotate(-3deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}62.4309%{transform:rotate(2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}63.103%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}64.3405%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}64.7864%{transform:rotate(3.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}65.5716%{transform:rotate(-2.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}66.1369%{transform:rotate(1.2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}66.5829%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}67.255%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}67.8141%{transform:rotate(-3deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}68.7123%{transform:rotate(2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}69.3844%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}70.6219%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}71.0678%{transform:rotate(3.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}71.853%{transform:rotate(-2.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}72.4183%{transform:rotate(1.2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}72.8643%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}73.5364%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}74.0955%{transform:rotate(-3deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}74.9937%{transform:rotate(2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}75.6658%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}76.9033%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}77.3492%{transform:rotate(3.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}78.1344%{transform:rotate(-2.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}78.6997%{transform:rotate(1.2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}79.1457%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}79.8178%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}80.3769%{transform:rotate(-3deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}81.2751%{transform:rotate(2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}81.9472%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}83.1847%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}83.6307%{transform:rotate(3.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}84.4158%{transform:rotate(-2.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}84.9812%{transform:rotate(1.2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}85.4271%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}86.9347%{transform:rotate(-1.5deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}88.4422%{transform:rotate(0.8deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}90.4523%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}100%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}}
.build.live .trav{animation:rig-x 39.8s linear 3.4s infinite both}
.build.live .hook{animation:rig-y-hook 39.8s linear 3.4s infinite both}
.build.live .cable{animation:rig-y-cable 39.8s linear 3.4s infinite both}
.build.live .load{animation:rig-sway 39.8s linear 3.4s infinite both}
.build.live .pile{opacity:1;transition:opacity .9s ease}
.build.live .plc,.build.live .lit{opacity:0}
.build.live .ico{stroke:rgba(255,255,255,.2);filter:none}
.build.live .slab{stroke:rgba(255,255,255,.14)}
.build.live.pk-0 .pile-0{opacity:0;transition:none}
.build.live .unf-0{transform:scale(0.4286,0.1481)}
.build.live.pk-0 .unf-0{transform:scale(1,1);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.build.live.pk-0:not(.pl-0) .carry-0{opacity:1}
.build.live.pl-0 .plc-0{opacity:1}
.build.live.pl-0 .snap-0{animation:snap .55s ease-out both}
.build.live.pk-1 .pile-1{opacity:0;transition:none}
.build.live .unf-1{transform:scale(0.8571,0.1481)}
.build.live.pk-1 .unf-1{transform:scale(1,1);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.build.live.pk-1:not(.pl-1) .carry-1{opacity:1}
.build.live.pl-1 .plc-1{opacity:1}
.build.live.pl-1 .snap-1{animation:snap .55s ease-out both}
.build.live.pk-2 .pile-2{opacity:0;transition:none}
.build.live .unf-2{transform:scale(0.4286,0.1481)}
.build.live.pk-2 .unf-2{transform:scale(1,1);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.build.live.pk-2:not(.pl-2) .carry-2{opacity:1}
.build.live.pl-2 .plc-2{opacity:1}
.build.live.pl-2 .snap-2{animation:snap .55s ease-out both}
.build.live.pk-3 .pile-3{opacity:0;transition:none}
.build.live .unf-3{transform:scale(0.8571,0.1481)}
.build.live.pk-3 .unf-3{transform:scale(1,1);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.build.live.pk-3:not(.pl-3) .carry-3{opacity:1}
.build.live.pl-3 .plc-3{opacity:1}
.build.live.pl-3 .snap-3{animation:snap .55s ease-out both}
.build.live.pk-4 .pile-4{opacity:0;transition:none}
.build.live .unf-4{transform:scale(0.4286,0.1481)}
.build.live.pk-4 .unf-4{transform:scale(1,1);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.build.live.pk-4:not(.pl-4) .carry-4{opacity:1}
.build.live.pl-4 .plc-4{opacity:1}
.build.live.pl-4 .snap-4{animation:snap .55s ease-out both}
.build.live.pk-5 .pile-5{opacity:0;transition:none}
.build.live .unf-5{transform:scale(0.8571,0.1481)}
.build.live.pk-5 .unf-5{transform:scale(1,1);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.build.live.pk-5:not(.pl-5) .carry-5{opacity:1}
.build.live.pl-5 .plc-5{opacity:1}
.build.live.pl-5 .snap-5{animation:snap .55s ease-out both}
.build.live.pk-6 .pile-6{opacity:0;transition:none}
.build.live .unf-6{transform:scale(0.4286,0.1481)}
.build.live.pk-6 .unf-6{transform:scale(1,1);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.build.live.pk-6:not(.pl-6) .carry-6{opacity:1}
.build.live.pl-6 .plc-6{opacity:1}
.build.live.pl-6 .snap-6{animation:snap .55s ease-out both}
.build.live.pk-7 .pile-7{opacity:0;transition:none}
.build.live .unf-7{transform:scale(0.8571,0.1481)}
.build.live.pk-7 .unf-7{transform:scale(1,1);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.build.live.pk-7:not(.pl-7) .carry-7{opacity:1}
.build.live.pl-7 .plc-7{opacity:1}
.build.live.pl-7 .snap-7{animation:snap .55s ease-out both}
.build.live.pk-8 .pile-8{opacity:0;transition:none}
.build.live .unf-8{transform:scale(0.4286,0.1481)}
.build.live.pk-8 .unf-8{transform:scale(1,1);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.build.live.pk-8:not(.pl-8) .carry-8{opacity:1}
.build.live.pl-8 .plc-8{opacity:1}
.build.live.pl-8 .snap-8{animation:snap .55s ease-out both}
.build.live.pk-9 .pile-9{opacity:0;transition:none}
.build.live .unf-9{transform:scale(0.8571,0.1481)}
.build.live.pk-9 .unf-9{transform:scale(1,1);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.build.live.pk-9:not(.pl-9) .carry-9{opacity:1}
.build.live.pl-9 .plc-9{opacity:1}
.build.live.pl-9 .snap-9{animation:snap .55s ease-out both}
.build.live.pk-10 .pile-10{opacity:0;transition:none}
.build.live .unf-10{transform:scale(0.4286,0.1481)}
.build.live.pk-10 .unf-10{transform:scale(1,1);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.build.live.pk-10:not(.pl-10) .carry-10{opacity:1}
.build.live.pl-10 .plc-10{opacity:1}
.build.live.pl-10 .snap-10{animation:snap .55s ease-out both}
.build.live.pk-11 .pile-11{opacity:0;transition:none}
.build.live .unf-11{transform:scale(0.8571,0.1481)}
.build.live.pk-11 .unf-11{transform:scale(1,1);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.build.live.pk-11:not(.pl-11) .carry-11{opacity:1}
.build.live.pl-11 .plc-11{opacity:1}
.build.live.pl-11 .snap-11{animation:snap .55s ease-out both}
.build.live.pk-12 .pile-12{opacity:0;transition:none}
.build.live.pk-12:not(.pl-12) .carry-12{opacity:1}
.build.live.pl-12 .plc-12{opacity:1}
.build.live.pl-12 .snap-12{animation:snap .55s ease-out both}
@keyframes snap{from{opacity:.95;transform:scale(.6)}to{opacity:0;transform:scale(3)}}
.build.live.fl-0 .ico-0{stroke:var(--g400);filter:drop-shadow(0 0 4px rgba(61,220,90,.9));animation:icopop .8s ease-out both;transition:stroke .4s}
.build.live.fl-0 .slab-0{stroke:rgba(61,220,90,.85);transition:stroke .5s}
.build.live.fl-1 .ico-1{stroke:var(--g400);filter:drop-shadow(0 0 4px rgba(61,220,90,.9));animation:icopop .8s ease-out both;transition:stroke .4s}
.build.live.fl-1 .slab-1{stroke:rgba(61,220,90,.85);transition:stroke .5s}
.build.live.fl-2 .ico-2{stroke:var(--g400);filter:drop-shadow(0 0 4px rgba(61,220,90,.9));animation:icopop .8s ease-out both;transition:stroke .4s}
.build.live.fl-2 .slab-2{stroke:rgba(61,220,90,.85);transition:stroke .5s}
.build.live.fl-3 .ico-3{stroke:var(--g400);filter:drop-shadow(0 0 4px rgba(61,220,90,.9));animation:icopop .8s ease-out both;transition:stroke .4s}
.build.live.fl-3 .slab-3{stroke:rgba(61,220,90,.85);transition:stroke .5s}
.build.live.fl-4 .ico-4{stroke:var(--g400);filter:drop-shadow(0 0 4px rgba(61,220,90,.9));animation:icopop .8s ease-out both;transition:stroke .4s}
.build.live.fl-4 .slab-4{stroke:rgba(61,220,90,.85);transition:stroke .5s}
.build.live.fl-5 .ico-5{stroke:var(--g400);filter:drop-shadow(0 0 4px rgba(61,220,90,.9));animation:icopop .8s ease-out both;transition:stroke .4s}
.build.live.fl-5 .slab-5{stroke:rgba(61,220,90,.85);transition:stroke .5s}
@keyframes icopop{0%{transform:scale(.7)}45%{transform:scale(1.55)}100%{transform:scale(1)}}
.build.live.fin .ring-a{animation:ringx 1.6s ease-out both}
.build.live.fin .ring-b{animation:ringx 1.6s ease-out .35s both}
@keyframes ringx{from{opacity:.85;transform:scale(.3)}to{opacity:0;transform:scale(8)}}
.build.live.fin .lit-0{animation:litup 2.8s ease 0.00s both}
.build.live.fin .lit-1{animation:litup 2.8s ease 0.10s both}
.build.live.fin .lit-2{animation:litup 2.8s ease 0.20s both}
.build.live.fin .lit-3{animation:litup 2.8s ease 0.30s both}
.build.live.fin .lit-4{animation:litup 2.8s ease 0.40s both}
.build.live.fin .lit-5{animation:litup 2.8s ease 0.50s both}
.build.live.fin .lit-6{animation:litup 2.8s ease 0.60s both}
.build.live.fin .lit-7{animation:litup 2.8s ease 0.70s both}
.build.live.fin .lit-8{animation:litup 2.8s ease 0.80s both}
.build.live.fin .lit-9{animation:litup 2.8s ease 0.90s both}
.build.live.fin .lit-10{animation:litup 2.8s ease 1.00s both}
.build.live.fin .lit-11{animation:litup 2.8s ease 1.10s both}
.build.live.fin .lit-12{animation:litup 2.8s ease 1.20s both}
@keyframes litup{0%{opacity:0}18%{opacity:.95}100%{opacity:.5}}
.build.live.out .built{opacity:0;transition:opacity 1.2s ease}
@media (max-width:640px){.hero-art{right:-1.5%}.build .tag{display:none}}