/* ============================================================
   GHM Satelital — Hoja de estilos
   Basado en el boceto WEB SATELITAL04.pdf
   ============================================================ */

/* Roboto self-hosteada (2026-08-12): fuente VARIABLE v51, un solo woff2 (43 KB)
   cubre los pesos 100-900. Reemplaza a Google Fonts (sin render-blocking externo,
   sin dependencia de terceros; la CSP ya no permite fonts.googleapis/gstatic). */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/roboto-var-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;
}

:root {
  /* GHM 2026 — paleta del nuevo brochure */
  --accent: #fd551d;          /* naranja de marca */
  --accent-bright: #ff6a34;   /* naranja claro para hover/acentos sobre oscuro */
  --accent-ink: #d8430f;      /* naranja-tinta: links sobre fondo claro (AA) */
  --accent-deep: #a22706;     /* naranja profundo: tinte de divisores */
  --ink: #1d1d1b;             /* tinta de texto (negro cálido del brochure) */
  --ink-soft: #3a3a37;
  --muted: #6b6f74;           /* gris de párrafos */
  --muted-2: #9a9ea3;
  --line: #e7e7e3;
  --paper: #ffffff;
  --paper-2: #f4f4f2;         /* off-white cálido para secciones alternas */
  --dark: #00060c;            /* fondo oscuro de portada/divisores/footer */
  --black: #000000;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-frame: clamp(22px, 3vw, 42px); /* marco asimétrico: TR y BL redondeadas */
  --grad-accent: linear-gradient(108deg, #ff6a34 0%, #fd551d 45%, #a22706 100%); /* naranja de marca */
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --font: "Roboto", "Helvetica Neue", Arial, system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; overflow-x: clip; touch-action: pan-y; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* recorta horizontal sin crear scroll-container (no rompe position:sticky) */
  touch-action: pan-y; /* móvil: solo scroll vertical, sin paneo horizontal ni zoom por pellizco */
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.accent { color: var(--accent-ink); }

/* ---------- Tipografía (GHM 2026: display Thin/Light, aireada) ---------- */
h1, h2, h3, h4 { line-height: 1.12; font-weight: 300; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 100; }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
p  { color: var(--muted); font-size: 1.02rem; line-height: 1.4; font-weight: 400; }

.section { padding-block: clamp(64px, 10vw, 130px); }
.section--tight { padding-block: clamp(48px, 7vw, 90px); }

.eyebrow {
  font-size: .8rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}

/* Título de sección unificado (Contacto, Empresas, Conexión, etc.):
   misma familia (Roboto), versión (Light 300), tamaño, color (tinta) y alineado a la izquierda */
.s-title, .shead { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 300; letter-spacing: -.01em; line-height: 1.12; color: var(--ink); text-align: left; }
.chev::before {
  content: ">"; color: var(--accent); font-weight: 500;
  margin-right: .28em; display: inline-block;
}
/* En títulos de sección el ">" cuelga a la izquierda, fuera de la caja de texto:
   la inicial del título queda alineada con el párrafo de abajo (corrección 07-06) */
.s-title.chev, .shead.chev { position: relative; }
.s-title.chev::before, .shead.chev::before { position: absolute; right: 100%; margin-right: .22em; }
/* Énfasis dentro de texto: negrita en tinta (no coloreada), como el brochure */
.lede { font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: 300; line-height: 1.4; color: var(--ink); max-width: 60ch; }
.lede b, .lede strong { font-weight: 700; color: var(--ink); }

/* Botón naranja */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: 14px 26px; border-radius: 999px; font-weight: 500; font-size: .98rem;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease; cursor: pointer;
}
.btn:hover { background: var(--accent-bright); transform: translateY(-2px); box-shadow: 0 10px 26px -8px rgba(253,85,29,.55); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; box-shadow: none; }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-block: 14px; pointer-events: none;
}
.nav .container { pointer-events: none; }
.nav__inner {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between;
  margin-inline: -22px;  /* el fondo se extiende hacia el gutter; el contenido queda alineado con los títulos */
  padding: 12px 22px;
  background: rgba(14, 16, 20, .58); /* +20% de negro respecto del translúcido anterior */
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  transition: background .3s ease, box-shadow .3s ease;
}
.nav.is-scrolled .nav__inner {
  background: rgba(17, 19, 23, .9);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.brand { font-size: 1.18rem; letter-spacing: -.02em; color: #fff; }
.brand b { font-weight: 800; }
.brand span { font-weight: 400; opacity: .92; }
.nav__links { display: flex; gap: 30px; }
/* Links del menú: naranja al hover y naranja fijo en la sección activa. Sin subrayado. */
/* Menú principal en Regular 400; el submenú desplegado va en Light 300 */
.nav__links a {
  color: rgba(255, 255, 255, .82); font-size: .95rem; font-weight: 400;
  position: relative; padding-block: 4px; transition: color .2s;
}
.nav__links a:hover,
.nav__links a.active { color: var(--accent-bright); }
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; }
.nav__toggle span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; transition: transform .3s ease, opacity .2s ease; }
/* Menú abierto: las 3 líneas se transforman en una cruz (X) para cerrar */
.nav__links.open ~ .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__links.open ~ .nav__toggle span:nth-child(2) { opacity: 0; }
.nav__links.open ~ .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Buscador (lupa) en el menú */
/* Selector de idioma (ENG/ESP): más liviano y gris que el resto del nav.
   Nunca se marca .active (lo excluye main.js) aunque coincida el nombre de archivo. */
.nav__links a.nav__lang { font-weight: 300; color: rgba(255,255,255,.5); font-size: .88rem; letter-spacing: .06em; margin-left: 4px; }
/* Página legal (Política de privacidad) — texto largo legible */
.legal { padding: clamp(130px, 17vh, 180px) 0 90px; }
.legal .container { max-width: 840px; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 300; line-height: 1.15; margin-bottom: 6px; }
.legal .updated { color: #777; font-size: .92rem; margin-bottom: 42px; }
.legal h2 { font-size: 1.22rem; font-weight: 500; margin: 38px 0 10px; color: var(--ink); }
.legal p, .legal li { line-height: 1.65; color: #3c3c3a; margin-bottom: 12px; font-size: 1rem; }
.legal ul { list-style: disc; padding-left: 22px; margin-bottom: 14px; }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.footer__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Link "saltar al contenido": invisible hasta que recibe foco con Tab (a11y) */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--accent); color: #fff; padding: 10px 18px; border-radius: 0 0 12px 0; font-weight: 500; }
.skip-link:focus { left: 0; }
.nav__links a.nav__lang:hover { color: var(--accent-bright); }
.nav__search { background: none; border: 0; cursor: pointer; color: rgba(255,255,255,.82); display: grid; place-items: center; padding: 4px; margin-left: 4px; transition: color .2s; }
.nav__search:hover { color: var(--accent-bright); }
.nav__search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

/* "Servicios" expandible en línea (como antes): al pasar el cursor la palabra se
   contrae y aparecen las 3 categorías. Para que NO reaccione errático:
   1) el área de detección del hover es más grande y estable (padding + margin
      negativo → no cambia el layout pero el puntero "cae" en una zona más amplia);
   2) el cierre tiene más gracia (delay .3s) para que un roce breve no lo dispare. */
.nav__svc { position: relative; display: flex; align-items: center;
  padding: 8px 24px; margin: -8px -24px; }
.nav__svc-label {
  display: inline-block; max-width: 90px; overflow: hidden; white-space: nowrap;
  color: rgba(255,255,255,.82); font-size: .95rem; font-weight: 400; padding-block: 4px;
  transition: max-width .5s cubic-bezier(.22,.75,.25,1), opacity .3s ease, color .2s;
}
.nav__svc-label:hover, .nav__svc-label.active { color: var(--accent-bright); }
/* Expansión fluida con desaceleración (curva que arranca y frena suave) */
.nav__svc-items {
  display: flex; align-items: center; max-width: 0; opacity: 0; overflow: hidden;
  white-space: nowrap; transition: max-width .6s cubic-bezier(.22,.75,.25,1), opacity .4s ease;
}
.nav__svc-items a {
  color: rgba(255,255,255,.82); font-size: .95rem; font-weight: 300;
  padding-block: 4px; transition: color .2s;
}
.nav__svc-items a:hover, .nav__svc-items a.active { color: var(--accent-bright); }
.nav__svc-items a + a::before { content: "|"; margin: 0 10px; color: rgba(255,255,255,.35); font-weight: 300; }
@media (min-width: 901px) {
  /* Abierto = hover, foco, o clase .open que pone el JS (hover-intent: se mantiene
     abierto al pasar a "Nosotros" y cierra solo al salir de esa zona). */
  .nav__svc:hover .nav__svc-label,
  .nav__svc.open .nav__svc-label,
  .nav__svc:focus-within .nav__svc-label { max-width: 0; opacity: 0; }
  .nav__svc:hover .nav__svc-items,
  .nav__svc.open .nav__svc-items,
  .nav__svc:focus-within .nav__svc-items { max-width: 560px; opacity: 1; }
}

/* Overlay de búsqueda */
/* Overlay translúcido: se ve la web debajo */
.search { position: fixed; inset: 0; z-index: 120; display: none; padding-top: 14vh; justify-content: center;
  background: rgba(6,8,12,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.search.open { display: flex; }
.search__box { width: 100%; max-width: 640px; padding-inline: var(--gutter); }
.search__field { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid rgba(255,255,255,.35); padding-bottom: 12px; }
.search__field svg { width: 22px; height: 22px; fill: none; stroke: rgba(255,255,255,.7); stroke-width: 2; flex: none; }
.search__field input { flex: 1; background: none; border: 0; outline: none; color: #fff; font: 300 clamp(1.4rem, 3vw, 2.2rem)/1.2 var(--font); }
.search__field input::placeholder { color: rgba(255,255,255,.4); }
.search__close { background: none; border: 0; color: rgba(255,255,255,.7); font-size: 2rem; line-height: 1; cursor: pointer; }
.search__close:hover { color: #fff; }
.search__results { margin-top: 18px; list-style: none; max-height: 60vh; overflow-y: auto; }
.search__results li a { display: block; padding: 12px 4px; color: rgba(255,255,255,.85); border-bottom: 1px solid rgba(255,255,255,.08); transition: color .2s, padding-left .2s; }
.search__results li a:hover { color: var(--accent-bright); padding-left: 10px; }
.search__results .r-cat { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-bright); margin-bottom: 2px; }
.search__empty { color: rgba(255,255,255,.45); padding: 16px 4px; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  color: #fff; overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.55) 100%);
}
/* Bloque del hero alineado a la izquierda (con el logo), no centrado */
.hero__inner { max-width: var(--maxw); }
/* Título display: Thin, con la primera palabra en Regular (firma del brochure) */
.hero__title { font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 100; line-height: 1.08; letter-spacing: -.01em; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero__title b { font-weight: 400; }
.hero h1 { font-weight: 100; }
/* Frase 2 (aparece con los drones): dos líneas naranjas, mismo tamaño, grandes, sin chevron.
   Versión Light, como el resto del sitio. */
.hero__phrase--2 .hero__sub,
.hero__phrase--2 .hero__claim {
  margin: 0; max-width: 900px; color: var(--accent-bright); font-weight: 300;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.14; letter-spacing: -.01em;
  text-shadow: 0 1px 14px rgba(0,0,0,.5);
}
.hero__phrase--2 .hero__claim { margin-top: .15em; font-weight: 400; }
.hero__cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero--short { min-height: 78svh; }
.hero--center { text-align: center; }
.hero--center .hero__inner { margin-inline: auto; }
.hero--center .hero__sub { margin-inline: auto; }

/* ---- Hero secuencia de drone (scroll-scrub sobre canvas) ---- */
/* Altura del hero = distancia de scroll del scrub. Más alto = la secuencia
   "acompaña" el scroll más lento/gradual (149 frames repartidos en ~5 pantallas). */
/* GSAP ScrollTrigger pinea y crea la distancia de scroll; la sección mide 100vh */
.hero--seq { position: relative; height: 100svh; min-height: 0; background: var(--dark); display: block; }
.hero__pin { position: relative; height: 100svh; overflow: hidden; color: #fff; }
/* El canvas mide 120% de alto: al subir con los drones (yPercent -16) sigue cubriendo
   el viewport y no aparece una fila negra en la parte inferior */
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 120%; display: block; background: var(--dark); }
.hero__grad { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,4,10,.35) 0%, rgba(0,4,10,.12) 42%, rgba(0,4,10,.62) 100%); }
/* max-width none: siendo absoluto, el max-width 1180 heredado lo anclaba a la izquierda
   y el título quedaba corrido respecto de la columna de textos/logo */
.hero__pin .hero__inner { position: absolute; inset: 0; display: grid; max-width: none; }
.hero__phrase { grid-row: 1; grid-column: 1; align-self: center; will-change: opacity, transform; }
.hero__phrase--2 { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  /* Reduce motion: hero estático (poster) con ambas frases visibles */
  .hero--seq { height: 100svh; }
  .hero__pin { position: relative; height: 100svh; }
  .hero__pin .hero__inner { display: flex; flex-direction: column; justify-content: center; }
  .hero__phrase { opacity: 1 !important; transform: none !important; }
  .hero__phrase--1 { margin-bottom: 20px; }
}

.scrolldown {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.6); border-radius: 14px;
}
.scrolldown::before {
  content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px;
  background: #fff; border-radius: 2px; transform: translateX(-50%);
  animation: scrolldot 1.6s ease-in-out infinite;
}
@keyframes scrolldot { 0%,100%{opacity:0;transform:translate(-50%,0)} 50%{opacity:1;transform:translate(-50%,10px)} }

/* ============================================================
   BLOQUE SELECTOR (home) — pestañas verticales + imagen
   ============================================================ */
.lead { max-width: 1000px; }
/* Título lead: aireado (Light), énfasis en negrita tinta como el brochure */
.lead h2 {
  font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 300; line-height: 1.14; color: var(--ink);
}
.lead h2 b { font-weight: 700; color: var(--ink); }

/* Contenedor al ancho del bloque del menú (.nav__inner) */
.container--nav { max-width: calc(var(--maxw) + 2 * var(--gutter)); }

/* (El bloque selector de pestañas fue reemplazado por la galería de videos — CORRECCIONES WEB 03) */

/* ============================================================
   BANDA FULL-BLEED con frase
   ============================================================ */
.band {
  position: relative; color: #fff; min-height: 100svh; padding-block: clamp(120px, 18vw, 240px);
  display: flex; align-items: center; overflow: hidden;
}
.band__bg { position: absolute; inset: 0; z-index: -2; }
.band__bg img { width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,8,12,.58) 0%, rgba(6,8,12,.72) 100%); }
/* Banda sin velo (foto del planeta): la imagen se ve limpia, sin gradiente gris encima */
.band--clear::after { content: none; }
/* Frase de la banda: mismo formato que el título del hero (Thin 100 + palabras clave en Regular 400) */
.band p { color: #fff; font-size: clamp(2.3rem, 6vw, 4rem); font-weight: 100; max-width: 1060px; line-height: 1.12; text-shadow: 0 1px 18px rgba(0,0,0,.5); }
.band p b { color: #fff; font-weight: 400; }

/* Fila con frase (Nosotros): letras negras sobre fondo blanco, pantalla entera, tipografía del hero */
.quote-band { background: var(--paper); color: var(--ink); min-height: 100svh; display: flex; align-items: center; padding-block: clamp(76px, 11vw, 150px); }
.quote-band p { color: var(--ink); font-size: clamp(2.4rem, 5.6vw, 4.4rem); font-weight: 100; line-height: 1.12; max-width: 1000px; letter-spacing: -.01em; }
.quote-band p b { font-weight: 400; color: var(--ink); }

/* ============================================================
   GHM 2026 — Banda intro / Bento / Capacidades / Divisor
   ============================================================ */
/* Justificado en altura superior (texto arriba, despejado del menú) */
.intro { position: relative; min-height: 100svh; display: flex; align-items: center; color: #fff; overflow: hidden; }
.intro__bg { position: absolute; inset: 0; z-index: -2; }
.intro__bg img { width: 100%; height: 100%; object-fit: cover; }
/* Móvil (vertical): la foto es 16:9 y solo se ve una franja del centro; las camionetas
   están al 66% del ancho → se desplaza el encuadre para que queden en cuadro. */
@media (max-width: 900px) { .intro__bg img { object-position: 66% 55%; } }
.intro::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,8,16,.62) 0%, rgba(0,8,16,.14) 48%, rgba(0,8,16,.3) 100%); }
/* Texto centrado en la altura de la banda (07-08). El padding simétrico protege
   el texto del nav flotante en pantallas bajas, sin descentrarlo. */
.intro .container { width: 100%; padding-block: clamp(90px, 12vh, 130px); }
/* Mismo formato tipográfico que el título del hero: Thin 100 con palabras clave en Regular 400 */
.intro__text { max-width: 30ch; font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 100; line-height: 1.1; letter-spacing: -.01em; color: #fff; text-shadow: 0 1px 16px rgba(0,0,0,.55); }
@media (min-width: 760px) { .intro__text { max-width: 900px; } } /* mismo ancho que la frase naranja */
.intro__text b { font-weight: 400; }

/* Bento de fotos + tarjetas de texto (composición "modific 06 07"):
   fila 1: terreno 3D (ancha) · card Soporte · equipo+camioneta (alta, 2 filas)
   fila 2: operador · vehículo cenital (ancha)
   fila 3: card Equipo (ancha) · drone paneles · card Flota */
.bento {
  display: grid; gap: 12px;
  grid-template-columns: repeat(4, 1fr);
  /* max: auto → las filas crecen si el texto de una tarjeta no entra (nunca se corta) */
  grid-template-rows: repeat(3, minmax(150px, auto));
  grid-template-areas: "a a s c" "d e e c" "f f b g";
}
/* clip-path refuerza el recorte redondeado: con la imagen transformada (parallax/deriva),
   Chrome a veces pierde el clip del border-radius y las esquinas se ven rectas */
.bento figure { margin: 0; position: relative; overflow: hidden; border-radius: 14px; background: var(--paper-2);
  isolation: isolate; clip-path: inset(0 round 14px); }
/* Imágenes fuera de flujo (absolutas): llenan su celda pero NO inflan la altura
   de las filas auto — así solo el texto de las tarjetas hace crecer la fila. */
.bento img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
/* Animación permanente: deriva lenta tipo Ken Burns, escalonada por figura.
   El hover sube el zoom base (--bz), que la animación lee, así zoom y deriva
   conviven. Con reduced-motion no anima y el hover hace un zoom simple. */
@media (prefers-reduced-motion: no-preference) {
  .bento img { animation: bentoDrift 20s ease-in-out infinite alternate; will-change: transform; }
  .bento__a img { animation-duration: 23s; animation-delay: -4s; }
  .bento__b img { animation-duration: 16s; animation-delay: -9s; }
  .bento__c img { animation-duration: 26s; animation-delay: -6s; }
  .bento__d img { animation-duration: 18s; animation-delay: -12s; }
  .bento__e img { animation-duration: 21s; animation-delay: -2s; }
}
.bento figure:hover img { --bz: 1.13; transform: scale(1.05); }
@keyframes bentoDrift {
  from { transform: scale(var(--bz, 1.05)) translate(0, 0); }
  to   { transform: scale(calc(var(--bz, 1.05) + .07)) translate(-1.6%, -1.4%); }
}
.bento__a { grid-area: a; } .bento__b { grid-area: b; } .bento__c { grid-area: c; }
.bento__d { grid-area: d; } .bento__e { grid-area: e; }
.bento__c img { object-position: 68% 50%; } /* centra al equipo y la camioneta en el recorte alto */

/* Tarjetas de texto dentro del bento */
.bento__card {
  border-radius: 14px; background: #26282c; color: #fff;
  padding: clamp(18px, 2.2vw, 30px);
  display: flex; flex-direction: column; justify-content: flex-start; /* texto justificado arriba */
}
.bento__card--s { grid-area: s; } .bento__card--f { grid-area: f; } .bento__card--g { grid-area: g; }
.bento__card h3 { font-size: 1.3rem; font-weight: 500; color: #fff; margin-bottom: 10px; letter-spacing: 0; line-height: 1.25; }
.bento__card p { color: rgba(255,255,255,.78); font-size: 1.1rem; line-height: 1.5; }

/* Divisor "Servicios" del home: usa los mismos componentes .svc-hero/.svc-tabs
   de las páginas de servicio, para que se vea idéntico scrolleando o entrando al link. */

@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: auto;
    /* foto → texto → foto → texto: "Equipo" queda entre persona (d) y drone (b) */
    grid-template-areas: "a a" "s c" "e e" "d d" "f f" "b b" "g g"; }
  .bento figure { min-height: 44vw; }
  .bento__c { min-height: 0; }
}

/* ============================================================
   TARJETAS Misión / Visión / Valores — letra negra, fondo blanco,
   borde del contenedor negro (correcciones 07-06)
   ============================================================ */
/* Composición 2+1: Misión y Visión arriba, Valores a lo ancho abajo con sus
   valores en 2 columnas. (El 3-columnas dejaba las tarjetas muy altas y vacías.) */
.mvv { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.mvv #valores { grid-column: 1 / -1; }
.mvv #valores .mvv__list { grid-template-columns: 1fr 1fr; gap: 12px 44px; }
.mvv__card {
  border-radius: var(--radius); padding: 34px 30px; min-height: 320px;
  display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink);
  transition: transform .3s ease, box-shadow .3s ease;
}
/* El "levantar al hover" es solo para las cards del grid MVV, NO para el panel del feature (no es un botón) */
.mvv .mvv__card:hover, .mvv .mvv__card:active { background: var(--accent); }
/* Tipografía de los recuadros +5% (corrección 07-06) */
.mvv__card h3 { margin-bottom: 16px; font-weight: 500; line-height: 1.15; color: var(--ink); font-size: clamp(1.37rem, 2.5vw, 1.9rem); }
.mvv__card p { color: var(--ink); font-size: 1.03rem; line-height: 1.33; }
/* Bloque lead "Ofrecemos…" (36pt Medium, interlineado 1.3 en el Illustrator) */
.feature .mvv__card p { font-weight: 500; line-height: 1.3; }

/* Tarjetas del grid MVV: contenido SIEMPRE a la vista (correcciones 06-07) */
.mvv .mvv__card { min-height: clamp(240px, 18vw, 320px); justify-content: flex-start;
  background: #4d4d4d; color: #fff; border-color: transparent;
  transition: background-color .25s ease; }
.mvv .mvv__card h3, .mvv .mvv__card p, .mvv .mvv__card .mvv__list li { color: #fff; }
.mvv #valores { min-height: 0; }
.mvv .mvv__card h3 { margin-bottom: 16px; }
.mvv__list { list-style: none; display: grid; gap: 10px; }
.mvv__list li { color: var(--ink); font-size: .95rem; line-height: 1.3; }
.mvv__list b { font-weight: 600; }

/* ============================================================
   FILA texto+imagen (servicios / nosotros)
   ============================================================ */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 80px); align-items: center; }
.feature--rev .feature__media { order: -1; }
.feature__text h2 span, .feature__text h3 span { display: block; color: var(--accent-ink); }
.feature__text .kicker { font-weight: 500; color: var(--accent-ink); margin-bottom: 10px; }
.feature__text .shead { margin-bottom: 10px; }
.feature__text p { margin-top: 8px; }
/* Marcos de fotos/videos: 4 esquinas redondeadas, como los proyectos con la comunidad.
   clip-path asegura el recorte aunque la imagen interna esté transformada (parallax). */
.feature__media {
  position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3;
  isolation: isolate;
}
/* Bloque "Ofrecemos": imagen + panel pegados, misma altura; esquinas externas redondeadas */
.feature.feature--composite { gap: 0; align-items: stretch; }
.feature.feature--composite .feature__media {
  aspect-ratio: auto; min-height: clamp(320px, 38vw, 460px);
  border-radius: var(--radius) 0 0 var(--radius);
  clip-path: inset(0 round var(--radius) 0 0 var(--radius));
}
.feature.feature--composite .mvv__card {
  border-radius: 0 var(--radius) var(--radius) 0;
  min-height: 100%; justify-content: center;
}
/* Las fotos con marco viven con un parallax interno: main.js setea --par
   según la posición en pantalla; la escala 1.16 evita que asomen los bordes */
.feature__media img {
  position: absolute; left: -20%; top: calc(-20% + var(--par, 0px));
  width: 140%; height: 140%; max-width: none; object-fit: cover;
}
/* Video en loop, mudo y SIN controles (Soporte 24/7): llena el marco redondeado */
.feature__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; pointer-events: none;
}
/* Ventana con el video reproduciéndose (RSE, Nosotros): iframe 16/9 recortado a cubrir */
.feature__media--video { background: #000; }
.feature__media--video iframe {
  position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 16 / 9; height: auto;
  border: 0; transform: translateY(-50%); pointer-events: none;
}
.play {
  position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%;
  background: var(--accent-bright); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 10px 30px rgba(253,85,29,.45); transition: transform .25s;
}
.play:hover { transform: scale(1.08); }
.play::before { content: ""; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; margin-left: 4px; }

/* ---- Lightbox de video ---- */
.vmodal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 5vw, 48px);
  background: rgba(6, 8, 12, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .25s ease;
}
.vmodal.open { opacity: 1; }
.vmodal__frame {
  position: relative; width: min(100%, 1100px); aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg); overflow: hidden; isolation: isolate;
  background: #000; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
  transform: scale(.96); transition: transform .25s ease;
}
.vmodal.open .vmodal__frame { transform: scale(1); }
.vmodal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vmodal__close {
  position: absolute; top: 18px; right: 22px; z-index: 1;
  background: none; border: 0; color: #fff; font-size: 2.4rem; line-height: 1;
  cursor: pointer; opacity: .85; transition: opacity .2s;
}
.vmodal__close:hover { opacity: 1; }

/* ============================================================
   GRID de servicios (3 tarjetas con imagen — selector home)
   ============================================================ */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card-img {
  position: relative; border-radius: var(--radius); overflow: hidden; min-height: 340px;
  display: flex; align-items: flex-end; color: #fff; isolation: isolate;
  border: 2px solid transparent; transition: border-color .25s ease;
}
.card-img.is-active { border-color: var(--accent); }
.card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s ease; }
.card-img::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.78)); }
.card-img:hover img { transform: scale(1.07); }
.card-img__body { padding: 28px; width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.card-img h3 { font-size: 1.5rem; }
/* Botón "+": contorno por defecto, se rellena de azul al pasar el cursor por la card */
.card-img .more {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: transparent; border: 2px solid rgba(255,255,255,.85); color: #fff;
  display: grid; place-items: center; font-size: 1.4rem; font-weight: 400; line-height: 1;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.card-img:hover .more { background: var(--accent); border-color: var(--accent); transform: scale(1.08); }

/* ============================================================
   RSE — carrusel de proyectos
   ============================================================ */
.rse__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 36px; }
.rse__head h2 span { color: var(--accent-ink); display: block; }
.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.project {
  position: relative; border-radius: var(--radius); overflow: hidden; min-height: 280px;
  display: flex; align-items: flex-start; color: #fff; padding: 26px;
  background: #0c1014;
}
.project img { position: absolute; left: -20%; top: calc(-20% + var(--par, 0px));
  width: 140%; height: 140%; max-width: none; object-fit: cover; opacity: .55; z-index: 0; transition: opacity .4s; }
.project:hover img { opacity: .7; }
.project__label { position: relative; z-index: 1; }
.project__tag { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-bright); font-weight: 700; }
.project h3 { position: relative; z-index: 1; margin-top: 4px; font-size: 1.6rem; }

/* ============================================================
   ACTUALIDAD — tarjetas de noticias que se expanden al clic
   ============================================================ */
.news { margin-top: clamp(32px, 4vw, 52px); display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.news-card { position: relative; background: var(--paper); border: 1px solid rgba(0,0,0,.1);
  border-radius: var(--radius); overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
  transition: box-shadow .25s ease, transform .25s ease; }
.news-card:hover { box-shadow: 0 20px 44px -22px rgba(0,0,0,.28); transform: translateY(-3px); }
.news-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.news-card > figure { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); }
.news-card > figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.news-card:hover > figure img { transform: scale(1.05); }
.news-card__body { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 20px 22px 22px; }
.news-card__title { font-size: clamp(1.2rem, 1.9vw, 1.55rem); font-weight: 500; color: var(--ink); line-height: 1.2; }
.news-card__cat { margin-top: 6px; font-size: .8rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
/* Botón "+": por defecto contorno; naranja relleno al hover/abierto; gira a "×" al abrir */
.news-card__more { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.28);
  position: relative; transition: background .25s ease, border-color .25s ease, transform .3s ease; }
.news-card__more::before, .news-card__more::after { content: ""; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 1.7px; background: var(--ink); transform: translate(-50%,-50%); transition: background .25s ease; }
.news-card__more::after { transform: translate(-50%,-50%) rotate(90deg); }
.news-card:hover .news-card__more, .news-card.is-open .news-card__more { background: var(--accent); border-color: var(--accent); }
.news-card:hover .news-card__more::before, .news-card:hover .news-card__more::after,
.news-card.is-open .news-card__more::before, .news-card.is-open .news-card__more::after { background: #fff; }
.news-card.is-open .news-card__more { transform: rotate(45deg); }
/* Panel expandido (una noticia a la vez), a lo ancho de la grilla */
.news-panel { grid-column: 1 / -1; overflow: hidden; max-height: 0; transition: max-height .5s ease; }
.news-panel.open { max-height: 2000px; }
.news-panel__inner { border: 1px solid rgba(0,0,0,.1); border-radius: var(--radius); padding: clamp(28px, 4vw, 48px); background: var(--paper); }
.news-panel__close { float: right; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.2);
  background: none; color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.news-panel__close:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.news-panel__meta { font-size: .82rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); }
.news-panel__title { margin: 6px 0 24px; font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 300; color: var(--ink); line-height: 1.1; }
.news-panel__body { columns: 2; column-gap: 44px; color: var(--ink); font-size: 1rem; line-height: 1.55; }
.news-panel__body p { margin: 0 0 12px; break-inside: avoid; }
.news-panel__img { margin: 28px 0 0; border-radius: var(--radius); overflow: hidden; }
.news-panel__img img { width: 100%; height: auto; display: block; }
@media (max-width: 720px) {
  .news { grid-template-columns: 1fr; }
  .news-panel__body { columns: 1; }
}

/* ============================================================
   CONTACTO + EMPRESAS — una sección = 2 filas
   ============================================================ */
.contact-clients { min-height: 100svh; display: grid; grid-template-rows: 1fr 1fr; }
.cc__row { display: flex; align-items: center; }
.cc__row .container { width: 100%; }
/* Fondo gris sutil en Contacto, un poco más claro que "Empresas" (--paper-2 #f4f4f2) */
.cc__row:first-child { padding-top: clamp(60px, 9vh, 96px); background: #f8f8f7; } /* despeje del menú fijo */
/* La fila de Empresas lleva fondo gris a todo el ancho */
.cc__row--clients { background: var(--paper-2); }
.cc__row .s-title { margin-bottom: clamp(16px, 2.4vh, 30px); }
/* Contacto: cápsulas de Mail y Teléfono; la de Teléfono lleva el botón verde de
   WhatsApp a la derecha (ref. captura). */
.contact__meta { display: flex; flex-wrap: wrap; gap: 16px; max-width: 820px; margin-bottom: clamp(28px, 4vh, 44px); }
.contact__box { flex: 1 1 320px; display: flex; align-items: center; gap: 14px;
  border: 1px solid rgba(0,0,0,.22); border-radius: 14px; padding: 16px 28px;
  color: var(--ink); font-size: 1.02rem; line-height: 1.1; text-decoration: none;
  transition: border-color .2s ease; }
a.contact__box:hover { border-color: var(--ink); }
.contact__box--tel { padding: 6px 6px 6px 28px; justify-content: space-between; }
.contact__box--tel > span { white-space: nowrap; }
/* Botón verde de WhatsApp: toca y abre la app (wa.me) */
.contact__wa { display: inline-flex; align-items: center; gap: 8px; flex: none;
  background: #25D366; color: #fff; border-radius: 10px; padding: 13px 24px;
  font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .2s ease; }
.contact__wa:hover { background: #20bd5a; }
.contact__wa svg { width: 20px; height: 20px; fill: #fff; flex: none; }
.locations { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 26px; max-width: 920px; }
.loc h4 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.loc p { font-size: .9rem; line-height: 1.5; color: var(--muted); }

/* Fila de clientes: título arriba (bajado ~una línea) y logos abajo (subidos);
   los logos se reparten a todo el ancho de la página (margen a izquierda y derecha, no al maxw) */
/* Título + logos agrupados y centrados (antes space-between los pegaba al fondo) */
.cc__row--clients { flex-direction: column; justify-content: center; align-items: stretch;
  gap: clamp(44px, 8vh, 96px);
  padding-block: clamp(64px, 10vh, 100px) clamp(56px, 9vh, 88px); }
.cc__row--clients .s-title { margin-bottom: 0; }
/* flex-end: los logos se alinean por su base (la línea del texto de cada logo),
   no centrados por el alto total del logo */
.clients__strip {
  width: 100%; padding-inline: clamp(24px, 4vw, 72px);
  display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(18px, 2.5vw, 44px);
}
.clients__logo { height: clamp(34px, 4.4vw, 58px); width: auto; filter: grayscale(1); opacity: .6; transition: opacity .25s ease; }
.clients__logo:hover { opacity: 1; }
/* Alineación por línea de base tipográfica (corrección 07-06): cada SVG trae
   distinto aire debajo del texto, así que flex-end solo no alcanza. Estos
   corrimientos (medidos con getBBox sobre cada archivo, en % del alto propio)
   apoyan la base del TEXTO de cada logo sobre la misma línea imaginaria,
   tomando Teck como referencia. Lo que cuelga bajo la base (círculo de
   Fortescue, swoosh de Barrick, firma de McEwen, dirección de SolFrut)
   queda por debajo de la línea, como un descendente. */
/* Glencore: la palabra grande "Glencore" ya apoya su base como Teck (ref), la
   marca chica "Pachón" queda elevada como en el propio logo → sin corrimiento. */
.clients__logo[src*="solfrut"]   { transform: translateY(5.6%); }
.clients__logo[src*="ypf-luz"]   { transform: translateY(2.7%); }
.clients__logo[src*="fortescue"] { transform: translateY(26.7%); }
.clients__logo[src*="mcewen"]    { transform: translateY(7.0%); }
.clients__logo[src*="barrick"]   { transform: translateY(7.3%); }
@media (max-width: 900px) {
  /* Logos de a 2 por fila (grilla 2 col) */
  .clients__strip { display: grid; grid-template-columns: 1fr 1fr; align-items: end;
    justify-items: center; gap: 30px 28px; padding-inline: clamp(20px, 6vw, 48px); }
  .clients__logo { height: 40px; max-width: 100%; }
  /* 7 logos (impar) → el último se centra ocupando las dos columnas */
  .clients__logo:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--dark); color: #fff; padding-top: clamp(64px, 9vw, 110px); overflow: hidden; }
.footer__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
.footer h5 { font-size: 1rem; font-weight: 800; margin-bottom: 22px; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer ul a { color: rgba(255,255,255,.7); font-size: .95rem; transition: color .2s; }
.footer ul a:hover { color: var(--accent-bright); }
/* Misión / Visión / Valores más juntos (van a la misma página de Nosotros) */
.footer__grid > div:first-child ul li:nth-child(3),
.footer__grid > div:first-child ul li:nth-child(4) { margin-top: -8px; }
.footer__social { display: flex; gap: 14px; justify-content: flex-end; }
.footer__social a {
  width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
  background: rgba(255,255,255,.06);
  display: grid; place-items: center; transition: background .2s, border-color .2s;
}
.footer__social a:hover { background: var(--accent-bright); border-color: var(--accent-bright); }
.footer__social svg { width: 20px; height: 20px; fill: #fff; }
@media (max-width: 900px) { .footer__social { justify-content: flex-start; } }
.footer__mail { color: rgba(255,255,255,.8); }
.footer__extra { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; }
.footer__extra a { font-weight: 700; }
.footer__wordmark { margin-top: clamp(40px, 6vw, 80px); }
.footer__wordmark img { display: block; width: 100%; height: auto; }
.footer__legal {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 30px; padding-block: 26px;
  font-size: .82rem; color: rgba(255,255,255,.5);
}

/* ============================================================
   ANIMACIONES de aparición
   ============================================================ */
/* Misma curva y recorrido que la animación de entrada del hero (heroIn) */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
/* Frases principales: fundido + subida más amplios y lentos, y disparados recién
   cuando la frase está bien adentro del viewport (ver observer en main.js),
   para que la entrada se perciba después del encaje de pantalla */
.reveal--phrase { transform: translateY(32px); transition-duration: 1.15s; transition-delay: .12s; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .nav__links {
    position: absolute; top: calc(100% + 10px); right: 0; left: 0;
    flex-direction: column; gap: 4px; padding: 14px;
    background: rgba(17,19,23,.96); border-radius: 14px;
    transform-origin: top; transform: scaleY(0); opacity: 0; transition: .25s;
  }
  .nav__links.open { transform: scaleY(1); opacity: 1; }
  .nav__toggle { display: block; }
  /* En el menú móvil las 3 categorías de Servicios se listan siempre, indentadas */
  .nav__svc { flex-direction: column; align-items: stretch; padding: 0; margin: 0; }
  .nav__svc-label { max-width: none; }
  .nav__svc-items { max-width: none; opacity: 1; overflow: visible; white-space: normal;
    flex-direction: column; align-items: stretch; padding-left: 16px; }
  .nav__svc-items a + a::before { content: none; }
  .feature { grid-template-columns: 1fr; }
  .feature--rev .feature__media { order: 0; }
  /* Bandas full-bleed (Ofrecemos / Equipamiento): alto completo del navegador y
     contenido centrado, como encajan las secciones en la versión desktop */
  .band { min-height: 100svh; }
  /* Composite apilado en mobile: esquinas externas redondeadas */
  .feature.feature--composite .feature__media { aspect-ratio: 4 / 3; min-height: 0; border-radius: var(--radius) var(--radius) 0 0; clip-path: inset(0 round var(--radius) var(--radius) 0 0); }
  .feature.feature--composite .mvv__card { min-height: 0; border-radius: 0 0 var(--radius) var(--radius); padding-block: 32px; }
  .mvv { grid-template-columns: 1fr; }
  .mvv #valores .mvv__list { grid-template-columns: 1fr; }
  .cards3 { grid-template-columns: 1fr; }
  .gallery__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .projects { grid-template-columns: 1fr; }
  .locations { grid-template-columns: repeat(2, 1fr); }
  .contact-clients { grid-template-rows: auto auto; }
  .cc__row { padding-block: 34px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
  .rse__head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .locations { grid-template-columns: 1fr 1fr; }
  .gallery__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   GALERÍA DE VIDEOS (home)
   ============================================================ */
.gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vthumb {
  position: relative; border: 0; padding: 0; cursor: pointer; overflow: hidden;
  border-radius: 14px; /* mismo radio que el bloque del menú */
  aspect-ratio: 16 / 10; background: #0c1014; isolation: isolate;
}
/* zoom base leve: recorta restos de borde de las capturas de video */
.vthumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform .6s ease; }
.vthumb::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.5)); }
.vthumb:hover img { transform: scale(1.1); }
.vthumb .play { position: absolute; inset: 0; margin: auto; z-index: 2; width: 64px; height: 64px; transition: transform .25s ease, background .25s ease; }
.vthumb:hover .play { transform: scale(1.08); }

/* ============================================================
   HERO — animación de entrada + base parallax
   ============================================================ */
.hero__bg { inset: -30px; }            /* margen para el parallax del fondo */
.hero__bg img, .band__bg img { will-change: transform; }

/* --- Fondo vivo: Ken Burns + nubes a la deriva + luces que titilan --- */
.hero__kb { position: absolute; inset: 0; animation: heroKb 28s ease-in-out infinite alternate; will-change: transform; }
.hero__kb img { width: 100%; height: 100%; object-fit: cover; }
@keyframes heroKb {
  from { transform: scale(1) translateX(0); }
  to   { transform: scale(1.07) translateX(-1.4%); }
}
.hero__clouds {
  position: absolute; inset: -12% -25%; pointer-events: none;
  mix-blend-mode: screen; filter: blur(34px); opacity: .55;
}
.hero__clouds::before, .hero__clouds::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(38% 20% at 22% 30%, rgba(255,255,255,.15), transparent 70%),
    radial-gradient(28% 16% at 62% 16%, rgba(255,255,255,.11), transparent 70%),
    radial-gradient(40% 22% at 84% 56%, rgba(255,255,255,.09), transparent 70%);
  animation: cloudsDrift 52s ease-in-out infinite alternate;
}
.hero__clouds::after {
  background:
    radial-gradient(32% 18% at 38% 68%, rgba(255,255,255,.11), transparent 70%),
    radial-gradient(24% 14% at 76% 38%, rgba(255,255,255,.09), transparent 70%);
  animation-duration: 70s; animation-direction: alternate-reverse;
}
@keyframes cloudsDrift { from { transform: translateX(-5%); } to { transform: translateX(5%); } }
.hero__lights { position: absolute; inset: 0; pointer-events: none; }
.hero__lights span {
  position: absolute; left: var(--x); top: var(--y); width: 5px; height: 5px; border-radius: 50%;
  background: #ffd9a0;
  box-shadow: 0 0 10px 2px rgba(255,190,110,.85), 0 0 26px 8px rgba(255,160,70,.35);
  opacity: .2; transform: scale(.7);
  animation: twinkle var(--t, 4.4s) ease-in-out infinite; animation-delay: var(--d, 0s);
}
.hero__lights span:nth-child(3n) { background: #fff3d6; box-shadow: 0 0 10px 2px rgba(255,240,200,.8), 0 0 24px 8px rgba(255,220,150,.3); }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.65); } 50% { opacity: .95; transform: scale(1.15); } }
.hero__inner { will-change: transform; }
.hero__title, .hero .hero__sub { opacity: 0; transform: translateY(26px); animation: heroIn .9s cubic-bezier(.2,.7,.2,1) forwards; }
.hero__title { animation-delay: .15s; }
.hero .hero__sub { animation-delay: .38s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* ============================================================
   BLOQUES a pantalla completa (solo desktop).
   El encaje entre bloques lo hace JS con easing (aceleración/desaceleración)
   — ver "snap suave" en main.js; el nativo de CSS no permite controlar la curva.
   ============================================================ */
@media (min-width: 901px) {
  /* Cada bloque de info ocupa la altura del navegador y encaja (snap suave por JS) */
  .intro, #capacidades, .divider, #equipamiento, .contact-clients { min-height: 100svh; }
  #capacidades, .divider { display: flex; align-items: center; }
  /* El bloque bento se dimensiona por alto para entrar en una pantalla */
  #capacidades { padding-block: clamp(92px, 11vh, 120px); }
  #capacidades .bento { grid-template-rows: repeat(3, minmax(19.5vh, auto)); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__title, .hero .hero__sub { opacity: 1; transform: none; animation: none; }
  .hero__kb, .hero__clouds::before, .hero__clouds::after, .hero__lights span { animation: none; }
}

/* ============================================================
   PÁGINAS DE SERVICIO (slide naranja + info con cards) — GHM 2026
   ============================================================ */
.svc-hero { position: relative; min-height: 100svh; display: flex; align-items: center; color: #fff; overflow: hidden; }
.svc-hero__bg { position: absolute; inset: 0; z-index: -2; }
.svc-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.svc-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(12,3,1,.5), rgba(28,7,1,.5)), linear-gradient(90deg, rgba(162,39,6,.34), transparent 62%); }
/* El ">" cuelga a la izquierda del bloque de texto (el título alinea con las categorías) */
.svc-hero__title { position: relative; font-size: clamp(2.8rem, 8vw, 5.5rem); font-weight: 300; line-height: 1; color: #fff; }
.svc-hero__title.chev::before { position: absolute; right: 100%; margin-right: .18em; color: var(--accent); font-weight: 400; }
/* Categorías en cápsula (ref. servicios.jpg): marco naranja redondeado sobre cada ítem
   + botón circular naranja con "+" a la derecha */
.svc-tabs { margin-top: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.svc-tab { display: inline-flex; align-items: center; gap: .55em; background: transparent; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.35); border-radius: 999px; padding: .14em .18em .14em .8em;
  color: #fff; font-weight: 300; font-size: clamp(1.25rem, 2.4vw, 1.8rem); line-height: 1.15; text-align: left;
  transition: background .25s ease, border-color .2s ease; }
/* Por defecto: SOLO el "+" en naranja, sin círculo relleno (no todo naranja al entrar al sitio) */
.svc-tab::after { content: "+"; flex: none; display: grid; place-items: center;
  width: 1.3em; height: 1.3em; border-radius: 50%;
  background: transparent; color: var(--accent); font-size: .95em; font-weight: 400; line-height: 1;
  transition: background .2s ease, color .2s ease, transform .25s ease; }
/* Hover / foco / activo: el marco se pone naranja, el círculo se rellena y el "+" queda en blanco */
.svc-tab:hover, .svc-tab:focus-visible, .svc-tab.is-active { border-color: var(--accent); }
.svc-tab:hover::after, .svc-tab:focus-visible::after, .svc-tab.is-active::after {
  background: var(--accent-bright); color: #fff; transform: scale(1.07); }

.svc { padding-block: clamp(72px, 10vw, 130px); }
.svc .shead { color: var(--ink); margin-bottom: 18px; }
.svc__lede { max-width: 60ch; font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 300; line-height: 1.4; color: var(--ink); }
.svc__lede b { font-weight: 700; }
.svc-grid { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 2.6vw, 36px); }
/* La imagen interna hace parallax (transform) y al scrollear Chrome pierde el
   recorte redondeado del contenedor (esquinas rectas). La máscara webkit fuerza
   una capa que respeta el border-radius también para el hijo transformado; con
   radial white→black en modo alpha la máscara es 100% opaca → sin desvanecido.
   (Reemplaza al intento con translateZ(0), que no alcanzaba.) */
.svc-card figure { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-2);
  isolation: isolate; clip-path: inset(0 round var(--radius)); }
/* Visión Inteligente y Estudios Geoespaciales: sus fotos (del brochure) son casi
   cuadradas → marco 1:1 para verlas COMPLETAS (en 4:3 se cortaban arriba/abajo,
   p.ej. el drone de Batimetría). Conectividad conserva 4:3 (fotos apaisadas). */
.svc--square .svc-card figure { aspect-ratio: 1 / 1; }
/* Parallax interno GENTIL (07-08, con las fotos ya en alta): overscan 122% (antes
   140% cortaba demasiado) → ~82% visible en reposo, panea vertical con --par (JS).
   SIN transform (aplanaría las esquinas); el movimiento es por 'top'. */
.svc-card img {
  position: absolute; left: -11%; top: calc(-11% + var(--par, 0px));
  width: 122%; height: 122%; max-width: none; object-fit: cover;
}
.svc-card h3 { margin: 16px 0 8px; font-size: 1.12rem; font-weight: 500; color: var(--ink); line-height: 1.25; }
.svc-card p { font-size: .96rem; line-height: 1.55; color: var(--muted); }
/* Nota final: mismo tamaño que el párrafo de apertura (.svc__lede) */
.svc__note { margin-top: clamp(40px, 5vw, 64px); max-width: 62ch; font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 300; line-height: 1.4; color: var(--ink); }
.svc__note b { font-weight: 700; }

@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }