/* ==========================================================================
   TECNIAPLICACIONES — COMPONENTES DE PRODUCCIÓN
   Deriva exclusivamente de tokens.css (Capítulo 10). No se declara ningún
   color, tipografía o espaciado fuera del sistema de tokens.
   ========================================================================== */

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-base); font-size: var(--text-base); color: var(--color-text); background: var(--color-bg); line-height: var(--lh-base); }
p { text-align: justify; text-justify: inter-word; hyphens: auto; }
img { display:block; max-width:100%; }

/* Accesibilidad: salto directo al contenido */
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:1000;
  background: var(--color-navy-950); color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-4); font-size: var(--text-sm);
}
.skip-link:focus { left: var(--space-3); top: var(--space-3); }

:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }

.wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding-desktop); }
@media (max-width: 1023px) { .wrap { padding: 0 var(--container-padding-tablet); } }
@media (max-width: 639px)  { .wrap { padding: 0 var(--container-padding-mobile); } }

.eyebrow { font-family: var(--font-base); font-weight: var(--fw-medium); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-steel-700); display:block; margin-bottom: var(--space-2); }
.tech-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-mono); color: var(--color-steel-700); }

.section-pad { padding: var(--space-9) 0; scroll-margin-top: var(--space-7); }
.section-pad--navy { background: var(--color-navy-950); }
.eyebrow--on-dark {
  background: linear-gradient(90deg, #8a6416 0%, #d8a12a 32%, #f0d483 58%, #b3841e 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: var(--color-gold-500);
}
@media (max-width: 1023px) { .section-pad { padding: var(--space-8) 0; } }
@media (max-width: 639px)  { .section-pad { padding: var(--space-7) 0; } }

/* --------------------------------------------------------------------
   MEDIA PLACEHOLDER — reserva visual hasta recibir la biblioteca editorial.
   data-media identifica el slot exacto para facilitar el reemplazo futuro
   por <img> real, sin tocar la estructura del componente.
   -------------------------------------------------------------------- */
.media-placeholder {
  background: repeating-linear-gradient(45deg, var(--color-grey-100), var(--color-grey-100) 10px, var(--color-surface) 10px, var(--color-surface) 20px);
  border: 1px dashed var(--color-grey-300);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color: var(--color-text-muted); padding: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-xs);
}
.media-placeholder[data-ratio="4-3"] { aspect-ratio: 4/3; }
.media-placeholder[data-ratio="1-1"] { aspect-ratio: 1/1; }
.media-placeholder[data-ratio="21-9"] { aspect-ratio: 21/9; }

/* Imagen real — mismo sistema de slots que el placeholder, vía object-fit */
.media-cover { width:100%; height:100%; object-fit:cover; display:block; border:none; }
/* Corrección de bug real (corrección visual mayor): cuando se declara una
   proporción explícita, height:auto deja que aspect-ratio sea la única
   fuente de verdad — height:100% entraba en conflicto porque el
   contenedor (.card) no tiene altura definida, y el navegador terminaba
   usando la relación intrínseca real del archivo en su lugar. */
.media-cover[data-ratio] { height: auto; }
.media-cover[data-ratio="4-3"] { aspect-ratio: 4/3; }
.media-cover[data-ratio="1-1"] { aspect-ratio: 1/1; }
.media-cover[data-ratio="21-9"] { aspect-ratio: 21/9; }

/* --------------------------------------------------------------------
   IMAGE-FRAME — tratamiento visual unificado para toda imagen posterior
   al Hero: mismo universo cromático navy/dorado, ninguna imagen compite
   en luminosidad con el Hero. Envuelve la imagen (no la tarjeta completa)
   para que el overlay cubra solo el área fotográfica.
   -------------------------------------------------------------------- */
.image-frame { position:relative; background:#071a33; }
.image-frame img {
  position:relative; z-index:1;
  filter: saturate(0.85) contrast(1.12) brightness(0.76);
}
.image-frame .image-overlay {
  position:absolute; inset:0; z-index:2;
  background: rgba(11,37,69,0.24);
  mix-blend-mode: multiply;
  pointer-events:none;
}
/* Technical Gold Edge — sistema de coordenadas técnicas fragmentadas.
   Variante A (por defecto): línea superior + tramo inferior-derecho. */
.image-frame::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: -28px; height: 1px;
  background: linear-gradient(90deg, #7a5110 0%, #d8a12a 42%, #f4d77c 52%, #b77b16 68%, transparent 100%);
  z-index: 3;
  pointer-events: none;
}
.image-frame::after {
  content: "";
  position: absolute;
  bottom: -14px; right: 0; width: 1px; height: 14px;
  background: linear-gradient(180deg, #d8a12a 0%, transparent 100%);
  z-index: 3;
  pointer-events: none;
}
/* Variante B — esquina superior derecha + tramo izquierdo inferior */
.image-frame--edge-b::before {
  top: 0; left: auto; right: 0; bottom: auto; height: 1px; width: 40%;
  background: linear-gradient(270deg, #7a5110 0%, #d8a12a 42%, #f4d77c 52%, #b77b16 68%, transparent 100%);
}
.image-frame--edge-b::after {
  bottom: 0; right: auto; left: -22px; top: auto; width: 22px; height: 1px;
  background: linear-gradient(90deg, #d8a12a 0%, transparent 100%);
}
/* Variante C — tramo vertical izquierdo + línea inferior con punto de luz */
.image-frame--edge-c::before {
  top: -18px; left: 0; right: auto; height: 18px; width: 1px;
  background: linear-gradient(180deg, transparent 0%, #d8a12a 100%);
}
.image-frame--edge-c::after {
  bottom: 0; left: 0; right: auto; top: auto; width: 30%; height: 1px;
  background: linear-gradient(90deg, #f4d77c 0%, #d8a12a 55%, transparent 100%);
  box-shadow: 0 0 6px 0 rgba(244,215,124,0.5);
}

/* --------------------------------------------------------------------
   BOTÓN FLOTANTE DE WHATSAPP — navy con borde dorado, sin verde.
   -------------------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  bottom: calc(32px + env(safe-area-inset-bottom));
  right: calc(32px + env(safe-area-inset-right));
  z-index: 200;
  display: flex; align-items: center; gap: 0;
  background: var(--color-navy-900);
  border: 1px solid rgba(216,161,42,0.55);
  color: var(--color-gold-300);
  padding: 12px; border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(7,26,51,0.4);
  transition: background var(--duration-micro) ease, color var(--duration-micro) ease, transform 200ms ease, border-color var(--duration-micro) ease, opacity 200ms ease, padding 180ms ease, gap 180ms ease;
  overflow:hidden;
}
.whatsapp-float:hover, .whatsapp-float:focus-visible { padding: 10px 18px 10px 14px; gap: 10px; }
.whatsapp-float:hover { background: var(--color-gold-500); color: var(--color-navy-950); border-color: var(--color-gold-500); transform: translateY(-2px); }
.whatsapp-float__icon { width: 19px; height: 19px; flex-shrink: 0; opacity:0.9; }
.whatsapp-float__label { font-size: 0.8125rem; font-weight: var(--fw-medium); white-space: nowrap; max-width:0; overflow:hidden; display:inline-block; transition: max-width 180ms ease; }
.whatsapp-float:hover .whatsapp-float__label, .whatsapp-float:focus-visible .whatsapp-float__label { max-width:160px; }
.whatsapp-float__label--short { display:none; }
@media (max-width: 639px) {
  .whatsapp-float {
    bottom: calc(18px + env(safe-area-inset-bottom));
    right: calc(18px + env(safe-area-inset-right));
    padding: 11px; max-width:150px;
  }
  .whatsapp-float__label { font-size:0.75rem; }
}
.text-gold-metal, .text-metallic-gold {
  background: linear-gradient(110deg, #7a5310 0%, #b77b16 18%, #d8a12a 38%, #f5d778 50%, #d8a12a 62%, #a66f13 82%, #6f490d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-gold-500); /* fallback */
}

/* --------------------------------------------------------------------
   SISTEMA DE ACENTOS DORADOS (TEC-FX-01) — lenguaje gráfico reutilizable.
   La sofisticación está en la contención: nunca marco completo.
   -------------------------------------------------------------------- */
.gold-line {
  display:block; height:1px; width:100%;
  background: linear-gradient(90deg, transparent, #8f6514, #d8a12a, #f3c75a, #d8a12a, #8f6514, transparent);
}
.gold-line-glow {
  display:block; height:1px; width:100%; position:relative;
  background: linear-gradient(90deg, transparent, #8f6514 20%, #d8a12a 50%, #8f6514 80%, transparent);
}
.gold-line-glow::after {
  content:""; position:absolute; top:50%; left:50%; width:6px; height:6px; border-radius:50%;
  transform:translate(-50%,-50%);
  background: radial-gradient(circle, #fff1b8 0%, #d8a12a 55%, transparent 78%);
}
.gold-corner { position:relative; }
.gold-corner::before {
  content:""; position:absolute; top:0; left:0; width:36px; height:1px;
  background: linear-gradient(90deg, #d8a12a, transparent);
}
.gold-corner::after {
  content:""; position:absolute; top:0; left:0; width:1px; height:36px;
  background: linear-gradient(180deg, #d8a12a, transparent);
}
.gold-node {
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background: var(--color-gold-500);
  box-shadow: 0 0 5px 0 rgba(216,161,42,0.5);
}
.section-accent { color: var(--color-gold-500); font-family:var(--font-mono); font-size:0.6875rem; letter-spacing:var(--tracking-mono); text-transform:uppercase; }
.metal-caption {
  background: linear-gradient(110deg, #7a5310 0%, #b77b16 22%, #d8a12a 42%, #f5d778 52%, #d8a12a 66%, #8f6418 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--color-gold-500); /* fallback */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.18));
}
.footer-metal, .contact-metal {
  background: linear-gradient(110deg,#7a5310,#b77b16,#d8a12a,#f5d778,#d8a12a,#8f6418);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  letter-spacing: .04em;
  text-shadow:
    0 1px 0 rgba(255,255,255,.16),
    0 -1px 0 rgba(0,0,0,.3),
    0 2px 1px rgba(0,0,0,.35),
    0 4px 8px rgba(0,0,0,.45);
  color: var(--color-gold-500); /* fallback */
}

/* Alias funcionales — nombres exactos del sistema TEC-FX-01 */
.gold-hairline { display:block; height:1px; width:100%; background: linear-gradient(90deg, transparent, #8f6514, #d8a12a, #f3c75a, #d8a12a, #8f6514, transparent); }
.gold-center-glow { display:block; height:1px; width:100%; position:relative; background: linear-gradient(90deg, transparent, #8f6514 20%, #d8a12a 50%, #8f6514 80%, transparent); }
.gold-center-glow::after { content:""; position:absolute; top:50%; left:50%; width:6px; height:6px; border-radius:50%; transform:translate(-50%,-50%); background: radial-gradient(circle, #fff1b8 0%, #d8a12a 55%, transparent 78%); }
.gold-corner-tl { position:relative; }
.gold-corner-tl::before { content:""; position:absolute; top:0; left:0; width:36px; height:1px; background: linear-gradient(90deg, #d8a12a, transparent); }
.gold-corner-tl::after { content:""; position:absolute; top:0; left:0; width:1px; height:36px; background: linear-gradient(180deg, #d8a12a, transparent); }
.gold-corner-br { position:relative; }
.gold-corner-br::before { content:""; position:absolute; bottom:0; right:0; width:36px; height:1px; background: linear-gradient(270deg, #d8a12a, transparent); }
.gold-corner-br::after { content:""; position:absolute; bottom:0; right:0; width:1px; height:36px; background: linear-gradient(0deg, #d8a12a, transparent); }
.gold-node { display:inline-block; width:7px; height:7px; border-radius:50%; background: var(--color-gold-500); box-shadow: 0 0 5px 0 rgba(216,161,42,0.5); }
.gold-image-accent { position:relative; }
.gold-section-divider { display:block; height:1px; width:100%; background: linear-gradient(90deg, transparent, rgba(216,161,42,0.5) 30%, rgba(216,161,42,0.5) 70%, transparent); }
.gold-tech-connector { position:relative; height:1px; background: linear-gradient(90deg, rgba(216,161,42,0.12), rgba(216,161,42,0.55) 12%, rgba(216,161,42,0.55) 88%, rgba(216,161,42,0.12)); }
/* tech-image-frame: variante de acento para imágenes editoriales (idéntica base a .image-frame, se usa como marcador semántico adicional) */
.tech-image-frame { position:relative; }

/* TEC-BG-02 — capa secundaria de ingeniería, solo en zonas de respiración.
   Nunca cubre todo, nunca compromete legibilidad. */
.has-technical-texture { position:relative; }
.has-technical-texture::before {
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: url(../img/tec-bg-02-tecnica.webp);
  background-size: cover; background-repeat:no-repeat;
  opacity: 0.1;
}
.editorial-frame { position:relative; }
.editorial-frame::before {
  content:""; position:absolute; top:-1px; left:-1px; width:44px; height:1px;
  background: linear-gradient(90deg, #d8a12a, transparent); z-index:3; pointer-events:none;
}
.editorial-frame::after {
  content:""; position:absolute; bottom:-1px; right:-1px; width:1px; height:44px;
  background: linear-gradient(180deg, transparent, #d8a12a); z-index:3; pointer-events:none;
}

/* --------------------------------------------------------------------
   SECTION-DARK — fondo navy con profundidad real: degradado radial +
   diagonal + textura técnica sutil. Sustituye el navy plano.
   -------------------------------------------------------------------- */
.section-dark {
  position: relative;
  background:
    radial-gradient(circle at 20% 20%, rgba(28, 58, 99, 0.26), transparent 42%),
    linear-gradient(135deg, #071a33 0%, #0b2545 52%, #06172c 100%);
}
/* Sistema de atmósferas — no repetir el mismo navy plano en cada
   sección. Tres universos que alternan profundidad conceptual. */
.atmosphere-deep {
  position:relative;
  background:
    radial-gradient(ellipse 780px 620px at 88% 82%, rgba(54,94,134,0.16) 0%, rgba(11,37,69,0.05) 45%, transparent 75%),
    linear-gradient(135deg, rgba(6,24,45,0.52) 0%, rgba(11,37,69,0.42) 52%, rgba(8,33,61,0.56) 100%),
    url(../img/texture-navy-gold-02.webp);
  background-size: auto, auto, 100% auto;
  background-position: center, center, top center;
  background-repeat: no-repeat, no-repeat, repeat-y;
}
.atmosphere-corporate {
  position:relative;
  background:
    radial-gradient(ellipse 70% 48% at 50% 42%, rgba(25,66,105,0.32) 0%, rgba(11,37,69,0.12) 48%, transparent 78%),
    linear-gradient(180deg, rgba(10,39,71,0.46) 0%, rgba(13,49,85,0.40) 46%, rgba(7,29,53,0.54) 100%),
    url(../img/texture-navy-gold-03.webp);
  background-size: auto, auto, 100% auto;
  background-position: center, center, top center;
  background-repeat: no-repeat, no-repeat, repeat-y;
}
.atmosphere-mineral {
  position:relative;
  background:
    radial-gradient(ellipse 620px 620px at 68% 45%, rgba(35,78,119,0.18), transparent 68%),
    linear-gradient(150deg, rgba(16,47,80,0.46) 0%, rgba(11,37,69,0.42) 55%, rgba(7,26,51,0.58) 100%),
    url(../img/texture-navy-gold-03.webp);
  background-size: auto, auto, 100% auto;
  background-position: center, center, top center;
  background-repeat: no-repeat, no-repeat, repeat-y;
}
.section-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../img/tec-bg-02-tecnica.webp);
  background-size: 65% auto;
  background-repeat: no-repeat;
  background-position: top right;
  opacity: 0.14;
  pointer-events: none;
}
#methodology.section-dark::before { background-position: bottom left; opacity: 0.12; }
#contact.section-dark::before { background-size: 42% auto; background-position: left center; opacity: 0.10; }
.section-dark > .wrap { position:relative; z-index:1; }
.section-dark::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -120px; height: 240px;
  background: radial-gradient(ellipse at 65% 50%, rgba(18,55,91,0.34), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

/* --------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------- */
.site-header {
  position: relative; z-index: 100;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-grey-200);
  transition: padding var(--duration-fast) var(--ease-precise);
}
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; padding-top: var(--space-3); padding-bottom: var(--space-3); max-width:none; margin:0; padding-left: var(--space-5); }
.site-header.is-scrolled .wrap { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.logo { font-weight: var(--fw-semibold); font-size: var(--text-md); letter-spacing: 0.02em; color: var(--color-text); text-decoration:none; }
.main-nav { display:flex; gap: var(--space-5); align-items:center; }
.main-nav a { color: var(--color-grey-700); text-decoration:none; font-size: var(--text-sm); font-weight: var(--fw-medium); transition: color var(--duration-micro) var(--ease-precise); }
.main-nav a:hover { color: var(--color-steel-700); }
.header-actions { display:flex; align-items:center; gap: var(--space-4); }
.lang-switch { display:flex; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); }
.lang-switch a { color: var(--color-grey-500); text-decoration:none; }
.lang-switch a[aria-current="true"] { color: var(--color-steel-700); font-weight: var(--fw-medium); }

.nav-toggle {
  display:none; background:none; border:none; cursor:pointer; padding: var(--space-2);
  flex-direction:column; gap:5px;
}
.nav-toggle span { display:block; width:22px; height:2px; background: var(--color-navy-900); transition: transform var(--duration-fast) var(--ease-precise), opacity var(--duration-fast) var(--ease-precise); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1023px) {
  .nav-toggle { display:flex; }
  .main-nav {
    position:absolute; top:100%; left:0; right:0;
    background: var(--color-bg); border-bottom: 1px solid var(--color-grey-200);
    flex-direction:column; align-items:flex-start; gap:0;
    max-height:0; overflow:hidden; transition: max-height var(--duration-base) var(--ease-precise);
  }
  .main-nav.is-open { max-height: 400px; }
  .main-nav a { width:100%; padding: var(--space-3) var(--container-padding-tablet); border-bottom: 1px solid var(--color-grey-100); }
}

/* Mobile: el botón persistente del header se retira para evitar overflow
   horizontal — el Hero ya ofrece el mismo CTA y el menú móvil da acceso
   a Contacto. Corrección de QA (Etapa 5), no afecta copy ni decisiones
   de contenido ya aprobadas. */
@media (max-width: 639px) {
  .header-actions .btn-primary,
  .header-actions .btn-gold-outline,
  .header-actions .btn-gold-solid { display:none; }
}

/* Header oscuro — corrección visual mayor: integrado con el hero, ya no
   una franja blanca independiente. */
.site-header--dark {
  background: rgba(7, 26, 51, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(var(--color-gold-500-rgb), 0.15);
}
.logo--full { display:flex; align-items:center; gap: var(--space-3); color: var(--color-text-inverse); }
.logo-mark { width:92px; height:auto; flex-shrink:0; }
.logo-text { display:flex; flex-direction:column; line-height:1.2; }
.logo-name {
  font-weight: var(--fw-semibold); font-size: var(--text-lg); letter-spacing:0.015em;
  color: var(--color-gold-500); /* fallback */
  background: linear-gradient(115deg, #8a6416 0%, #d8a12a 22%, #f0d483 42%, #fff1b8 50%, #f0d483 58%, #d8a12a 78%, #8a6416 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.logo-tagline {
  font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: var(--tracking-mono); text-transform:uppercase;
  color: var(--color-gold-500); /* fallback */
  background: linear-gradient(115deg, #8a6416 0%, #d8a12a 22%, #f0d483 42%, #fff1b8 50%, #f0d483 58%, #d8a12a 78%, #8a6416 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.site-header--dark .main-nav a { color: var(--color-grey-100); }
.site-header--dark .main-nav a:hover { color: var(--color-gold-500); }
.site-header--dark .lang-switch a { color: var(--color-steel-300); }
.site-header--dark .lang-switch a[aria-current="true"] { color: var(--color-gold-500); }
.site-header--dark .nav-toggle span { background: var(--color-text-inverse); }
@media (max-width: 1023px) {
  .site-header--dark .main-nav { background: var(--color-navy-950); border-bottom-color: rgba(var(--color-gold-500-rgb),0.15); }
  .site-header--dark .main-nav a { border-bottom-color: rgba(255,255,255,0.08); }
}
.btn { display:inline-block; text-decoration:none; font-family: var(--font-base); font-size: var(--text-sm); font-weight: var(--fw-medium); padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); cursor:pointer; border: var(--border-width) solid transparent; transition: background var(--duration-micro) var(--ease-precise), color var(--duration-micro) var(--ease-precise), border-color var(--duration-micro) var(--ease-precise), box-shadow var(--duration-micro) var(--ease-precise), transform var(--duration-micro) var(--ease-precise); }
.btn-primary { background: var(--color-navy-900); color: var(--color-text-inverse); }
.btn-primary:hover { background: var(--color-navy-950); box-shadow: inset 0 -1px 0 0 var(--color-steel-500); }
.btn-primary:active { transform: scale(0.985); }
.btn-secondary { background: transparent; color: var(--color-navy-900); border-color: var(--color-grey-300); }
.btn-secondary:hover { border-color: var(--color-steel-500); color: var(--color-steel-700); }
.btn-ghost { background: transparent; color: var(--color-navy-900); padding: var(--space-2) 0; text-decoration: underline; text-decoration-color: var(--color-grey-300); text-underline-offset: 4px; }
.btn-ghost:hover { text-decoration-color: var(--color-steel-500); color: var(--color-steel-700); }

/* Dorado — corrección visual mayor. Reservado a Header/Hero/Nuestra
   Ingeniería según la nueva dirección aprobada; el resto del sitio
   conserva Engineering Blue como color de interacción. */
.btn-gold-outline { background: transparent; color: var(--color-gold-500); border-color: var(--color-gold-500); }
.btn-gold-outline:hover { background: var(--color-gold-500); color: var(--color-navy-950); }
.btn-gold-solid { background: var(--color-gold-500); color: var(--color-navy-950); border-color: var(--color-gold-500); }
.btn-gold-solid:hover { background: var(--color-gold-600); border-color: var(--color-gold-600); }
.btn-gold-solid:active, .btn-gold-outline:active { transform: scale(0.985); }
.btn-ghost-gold { background: transparent; color: var(--color-gold-300); padding: var(--space-2) 0; text-decoration: underline; text-decoration-color: rgba(var(--color-gold-500-rgb),0.4); text-underline-offset: 4px; }
.btn-ghost-gold:hover { text-decoration-color: var(--color-gold-500); color: var(--color-gold-500); }

/* --------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------- */
/* (Sistema de Hero anterior a la fotografía maestra — removido para
   evitar colisión de nombre con el nuevo .hero definitivo, ver más abajo) */

:root { --header-height: 121px; }

/* --------------------------------------------------------------------
   PRIMERA PANTALLA — arquitectura vertical obligatoria: Hero principal
   ≈66% / franja inferior ≈34%, dentro de calc(100vh - header).
   -------------------------------------------------------------------- */
.first-screen { display:grid; grid-template-rows: 2fr 1fr; min-height: calc(100vh - var(--header-height)); }
@media (max-width: 639px) {
  .first-screen { display:block; min-height:auto; }
}

.hero { position:relative; overflow:hidden; min-height:0; }

.hero__media { position:absolute; inset:0; z-index:0; }
.hero__image {
  width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block;
  filter: saturate(0.92) brightness(0.94) contrast(1.05);
}

/* 04 — Tratamiento máximo permitido: tinte translúcido mínimo, nunca
   velo opaco. Único tratamiento cromático global sobre la fotografía. */
.hero__tint {
  position:absolute; inset:0; z-index:1;
  background: rgba(11, 37, 69, 0.16);
  mix-blend-mode: color;
  pointer-events:none;
}

/* Las franjas diagonales CSS se retiraron por completo: generaban una
   acumulación de opacidad que terminaba leyéndose como un bloque
   abstracto gris/azul y sepultaba la fotografía. La imagen 4K ya trae
   su propia composición diagonal integrada — se usa esa. */

/* Gradiente de legibilidad — localizado a la zona de texto, nunca cubre
   la imagen completa. */
.hero__legibility { position:absolute; inset:0; z-index:3; pointer-events:none;
  background: linear-gradient(90deg, rgba(5,20,40,0.30) 0%, rgba(7,28,55,0.16) 42%, rgba(11,37,69,0.10) 100%);
  mix-blend-mode: multiply;
}

/* 3 — reduce específicamente la presencia de las líneas técnicas azules
   del blueprint (zona izquierda de la fotografía) sin tocar las
   diagonales doradas. Capa adicional acotada solo a esa franja. */
.hero__left-control {
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background: linear-gradient(90deg, rgba(7,28,55,0.20) 0%, rgba(7,28,55,0.08) 34%, rgba(7,28,55,0) 40%);
  mix-blend-mode: multiply;
}

/* 6 — Isotipo: ocupa casi todo el alto útil del Hero principal, desde
   justo por encima de la franja inferior hasta un margen de seguridad
   antes del header. Nunca toca ninguno de los dos límites.
   Envuelto en .hero__symbol-wrap porque <img> (elemento reemplazado) no
   admite ::before — necesario para el degradado radial del punto 3. */
.hero__symbol-wrap {
  position:absolute; z-index:5;
  height: calc(100% - 48px);
  right: clamp(22vw, 24vw, 27vw);
  bottom: 12px;
}
.hero__symbol {
  position:relative; z-index:1;
  height:100%; width:auto; display:block;
  filter: drop-shadow(0 10px 24px rgba(7,26,51,0.35));
}
/* Error 2 corregido: la zona de reposo ya NO pertenece a un contenedor
   del tamaño del isotipo (eso producía el rectángulo visible). Ahora es
   una capa sobre el lienzo completo del Hero, con una elipse de tamaño
   EXPLÍCITO (no farthest-corner implícito) para que su límite externo
   sea siempre progresivo y nunca perceptible como figura geométrica.
   La posición se seguirá exactamente al isotipo vía variables CSS,
   overridas por breakpoint. */
:root {
  --symbol-rest-x: 61%;
  --symbol-rest-y: 53%;
}
.hero__media::before {
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background: radial-gradient(ellipse 28% 68% at var(--symbol-rest-x) var(--symbol-rest-y),
    rgba(3,15,31,0.50) 0%, rgba(4,18,36,0.38) 28%, rgba(5,22,43,0.24) 50%, rgba(7,28,55,0.10) 66%, rgba(7,28,55,0) 82%);
}

.hero__content-wrap { position:relative; z-index:4; height:100%; display:grid; grid-template-columns: repeat(12, 1fr); gap: var(--grid-gutter-desktop); align-items:center; padding-left: var(--space-6); max-width:none; margin:0; }
.hero__content {
  position:relative;
  grid-column: 1 / span 6;
  max-width: 620px;
}
.hero__h1 {
  color: var(--color-gold-500); /* fallback si background-clip:text no es soportado */
  font-size: clamp(2.6rem, 3.2vw, 4.25rem); line-height:1.05; letter-spacing:-0.02em; font-weight:600; text-transform:uppercase; margin-bottom: var(--space-4);
  background: linear-gradient(115deg, #8a6416 0%, #d8a12a 22%, #f0d483 42%, #fff1b8 50%, #f0d483 58%, #d8a12a 78%, #8a6416 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__secondary { font-size: clamp(1.45rem, 1.55vw, 2rem); line-height:1.18; font-weight:400; margin-bottom: var(--space-4); }
.hero__secondary .is-gold { color: var(--color-gold-300); }
.hero__secondary .is-white { color: var(--color-text-inverse); }
.hero__support { color: rgba(238,244,248,0.78); font-size:1rem; line-height:1.55; max-width:480px; margin-bottom: var(--space-5); }

/* 1 — reglas diferenciadas y explícitas por rango (colocadas DESPUÉS de
   las reglas base para que realmente las sobrescriban en la cascada):
   1440 conserva encuadre cercano al centro; 1920+ desplaza fondo e
   isotipo hacia la izquierda/centro. */
@media (min-width: 1024px) and (max-width: 1599px) {
  .hero__image { object-position: 50% 50%; }
  .hero__content { max-width: 480px; }
  .hero__symbol-wrap { height: calc(100% - 100px); left: 50%; right:auto; transform: translateX(-50%); }
  :root { --symbol-rest-x: 50%; }
}
@media (min-width: 1600px) {
  .hero__image { object-position: 42% 50%; }
  .hero__symbol-wrap { left: 50%; right:auto; transform: translateX(-50%); }
  :root { --symbol-rest-x: 50%; }
}

@media (max-width: 1023px) {
  .hero__image { object-position: 42% center; }
  .hero__content { grid-column: 1 / span 8; max-width: 360px; }
  .hero__symbol-wrap { height:calc(100% - 180px); left:68%; right:auto; transform:translateX(-50%); }
  :root { --symbol-rest-x: 68%; }
}

@media (max-width: 639px) {
  .hero { min-height:auto; padding-bottom: var(--space-6); }
  .hero__image { object-position: 78% 22%; }
  .hero__legibility { background: linear-gradient(180deg, rgba(7,26,51,0.16) 0%, rgba(7,26,51,0.5) 60%, rgba(7,26,51,0.78) 100%); }
  .hero__content-wrap { display:block; padding-top: var(--space-6); }
  .hero__content { grid-column:auto; max-width:none; padding: 0 var(--space-4); }
  .hero__h1 { font-size: var(--text-xl); line-height: var(--lh-xl); }
  .hero__secondary { font-size: var(--text-lg); line-height: var(--lh-lg); }

  /* 4.1 — el isotipo pasa a flujo normal, inmediatamente después del CTA,
     ya no anclado al fondo de un Hero de altura variable/artificial. */
  .hero__symbol-wrap {
    position:relative; z-index:5; top:auto; transform:translateX(-50%);
    height:min(32vh, 250px); width:fit-content;
    left:49%; right:auto;
    margin: var(--space-6) 0 0; display:block;
  }
  :root { --symbol-rest-x: 49%; --symbol-rest-y: 77%; }
}
@media (max-width: 639px) { .logo-tagline { display:none; } .logo-mark { width:52px; } .logo-name { font-size: var(--text-sm); } }
@media (max-width: 374px) {
  .hero__h1 { font-size: 1.375rem; line-height: 1.65rem; }
  .logo-mark { width:38px; }
  .logo-name { font-size: var(--text-xs); }
  .header-actions { gap: var(--space-2); }
  .lang-switch { gap: 4px; }
}

/* --------------------------------------------------------------------
   FRANJA INFERIOR — dos niveles: capacidades (≈70%) + zócalo técnico
   institucional (≈30%). Ocupa el 1fr restante del first-screen: sin
   vacío navy después.
   -------------------------------------------------------------------- */
.hero-bottom { min-height:0; display:flex; flex-direction:column; background: var(--color-navy-950); }

.hero__capabilities { position:relative; z-index:6; flex: 7 1 0; display:flex; align-items:center; overflow:hidden; }
.hero__capabilities-grid { position:relative; z-index:2; display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); padding-inline: var(--container-padding-desktop); width:100%; }
.capability { display:grid; grid-template-columns: 68px 1fr; column-gap: var(--space-4); align-items:start; padding-right: var(--space-5); min-width:0; }
.capability:not(:last-child) { border-right: 1px solid rgba(216,161,42,0.35); }
.capability__icon { width:68px; height:68px; color: var(--color-gold-500); grid-row: 1 / span 2; transition: color 150ms ease; }
.capability h3 { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--color-gold-300); text-transform:uppercase; letter-spacing:0.05em; margin-bottom: var(--space-1); align-self:end; transition: color 150ms ease; }
.capability p { font-size: var(--text-sm); line-height:1.3; color: rgba(238,244,248,0.68); }
/* 8 — hover: el dorado cede a un azul técnico de contraste controlado,
   nunca glow, nunca sombra, nunca elevación. */
.capability:hover .capability__icon,
.capability:hover h3 { color: var(--color-support-grey); }

/* 08 — Zócalo técnico institucional: contenido real, sin cifras
   inventadas. Más bajo y compacto que la banda de capacidades. */
.hero__closing-band { position:relative; z-index:6; flex: 3 1 0; display:flex; align-items:center; background: linear-gradient(90deg, #06172c 0%, #0b2545 48%, #12345a 100%); border-top: 1px solid rgba(216,161,42,0.15); }
.hero__closing-grid { display:grid; grid-template-columns: repeat(4, 1fr); width:100%; padding-inline: var(--container-padding-desktop); }
.closing-item { padding: 0 var(--space-4); border-left: 1px solid rgba(216,161,42,0.28); }
.closing-item:first-child { border-left:none; padding-left:0; }
.closing-item .num { font-family: var(--font-mono); font-size:0.75rem; letter-spacing:0.08em; color: var(--color-gold-500); margin-right: var(--space-2); transition: color 150ms ease; }
.closing-item .title { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--color-gold-300); text-transform:uppercase; letter-spacing:0.04em; transition: color 150ms ease; }
.closing-item p { font-size: 0.75rem; line-height:1.35; color: rgba(238,244,248,0.68); margin-top: 2px; }
.closing-item:hover .num,
.closing-item:hover .title { color: var(--color-support-grey); }

@media (max-width: 1023px) {
  .hero__capabilities-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); padding-inline: var(--container-padding-tablet); }
  .capability:nth-child(2n) { border-right:none; padding-right:0; }
  .hero__closing-grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-3); padding-inline: var(--container-padding-tablet); }
  .closing-item:nth-child(2n+1) { border-left:none; padding-left:0; }
}
@media (max-width: 639px) {
  .hero-bottom { flex-direction:column; }
  .hero__capabilities { flex:none; padding-block: var(--space-5); }
  .hero__closing-band { flex:none; padding-block: var(--space-4); }
  .hero__capabilities-grid { grid-template-columns: 1fr; padding-inline: var(--container-padding-mobile); gap: var(--space-3); }
  .capability { border-right:none !important; padding-right:0; grid-template-columns: 56px 1fr; }
  .capability__icon { width:56px; height:56px; }
  .hero__closing-grid { grid-template-columns: 1fr; padding-inline: var(--container-padding-mobile); row-gap: var(--space-2); }
  .closing-item { border-left:none !important; padding-left:0; }
}

/* --------------------------------------------------------------------
   NUESTRA INGENIERÍA V2 — sección oscura, fotografía integrada al
   universo azul mediante scrim denso (misma técnica que Compromiso).
   -------------------------------------------------------------------- */
.engineering-v2 {
  position:relative; overflow:hidden; isolation:isolate;
  background: linear-gradient(108deg, #041426 0%, #071d35 34%, #0b2545 66%, #102f50 100%);
}
.engineering-v2-media {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: saturate(0.9) brightness(0.94) contrast(1.04);
}
.engineering-v2-scrim { position:absolute; inset:0; background:
    linear-gradient(90deg, rgba(4,20,38,0.38) 0%, rgba(7,29,53,0.14) 42%, rgba(11,37,69,0.02) 100%);
}
.engineering-v2-accent {
  position:relative; z-index:2; margin-top: var(--space-5); width:150px;
}
/* Eco extremadamente sutil de las diagonales del Hero — no las repite,
   solo insinúa la misma identidad gráfica. */
.engineering-v2::after {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(115deg, rgba(216,161,42,0.05) 0 1px, transparent 1px 160px);
  opacity: 0.06;
}
@media (max-width: 767px) {
  .atmosphere-corporate {
    background:
      radial-gradient(ellipse 100% 34% at 50% 28%, rgba(25,66,105,0.28), transparent 74%),
      linear-gradient(180deg, rgba(10,39,71,0.58) 0%, rgba(13,49,85,0.5) 46%, rgba(7,29,53,0.64) 100%),
      url(../img/texture-navy-gold-03.webp);
    background-size: auto, auto, 100% auto;
    background-position: center, center, top center;
    background-repeat: no-repeat, no-repeat, repeat-y;
  }
  .atmosphere-deep {
    background:
      radial-gradient(ellipse 100% 30% at 78% 88%, rgba(54,94,134,0.20), transparent 72%),
      linear-gradient(180deg, rgba(6,24,45,0.58) 0%, rgba(11,37,69,0.5) 55%, rgba(8,33,61,0.64) 100%),
      url(../img/texture-navy-gold-02.webp);
    background-size: auto, auto, 100% auto;
    background-position: center, center, top center;
    background-repeat: no-repeat, no-repeat, repeat-y;
  }
  .atmosphere-mineral {
    background:
      radial-gradient(ellipse 100% 32% at 62% 40%, rgba(35,78,119,0.20), transparent 72%),
      linear-gradient(180deg, rgba(16,47,80,0.58) 0%, rgba(11,37,69,0.5) 55%, rgba(7,26,51,0.64) 100%),
      url(../img/texture-navy-gold-03.webp);
    background-size: auto, auto, 100% auto;
    background-position: center, center, top center;
    background-repeat: no-repeat, no-repeat, repeat-y;
  }
}
@media (max-width: 767px) {
  .engineering-v2 {
    background: linear-gradient(180deg, #041426 0%, #0b2545 58%, #071d35 100%);
  }
  .engineering-v2-scrim {
    background: linear-gradient(180deg, rgba(4,20,38,0.75) 0%, rgba(7,29,53,0.35) 45%, rgba(11,37,69,0.15) 100%);
  }
}
.engineering-v2-content {
  position:relative; z-index:2;
  padding: var(--space-9) 0;
  max-width:none; margin:0;
  padding-left: 8vw;
  width: 100%;
}
.engineering-v2-content > * { max-width: 480px; }
@media (max-width: 639px) {
  .engineering-v2-content { padding-left: var(--container-padding-mobile); padding-right: var(--container-padding-mobile); }
  .engineering-v2-content > * { max-width: 100%; }
  .engineering-v2-title { font-size: var(--text-xl); line-height: var(--lh-xl); overflow-wrap: break-word; }
}
.engineering-v2-eyebrow { color: var(--color-gold-500); }
.engineering-v2-title { font-size: var(--text-2xl); line-height: var(--lh-2xl); font-weight: var(--fw-semibold); color: var(--color-text-inverse); margin-bottom: var(--space-4); }
.gold-word {
  background: linear-gradient(90deg, #8a6416 0%, #d8a12a 32%, #f0d483 58%, #b3841e 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: var(--color-gold-500);
}
.gold-word--bright {
  background: linear-gradient(100deg, #b77b16 0%, #d8a12a 30%, #fff1b8 50%, #d8a12a 70%, #b77b16 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.engineering-v2-text { font-size: var(--text-md); line-height: var(--lh-md); letter-spacing:0.01em; text-align:justify; text-justify:inter-word; hyphens:auto; color: var(--color-grey-300); margin-bottom: var(--space-5); }
@media (max-width: 639px) { .engineering-v2-content { padding: var(--space-7) var(--container-padding-mobile); } }

/* --------------------------------------------------------------------
   EDITORIAL SECTION
   -------------------------------------------------------------------- */
.editorial { display:grid; grid-template-columns: 7fr 5fr; gap: var(--grid-gutter-desktop); align-items:center; }
@media (max-width: 1023px) { .editorial { grid-template-columns: 1fr; gap: var(--space-5); } }
.editorial.reverse { grid-template-columns: 5fr 7fr; }
@media (max-width: 1023px) { .editorial.reverse { grid-template-columns: 1fr; } }
.editorial.reverse .media-placeholder { order:2; }
@media (max-width: 1023px) { .editorial.reverse .media-placeholder { order:initial; } }
.editorial h2 { font-size: var(--text-xl); line-height: var(--lh-xl); font-weight: var(--fw-semibold); margin-bottom: var(--space-3); }
.editorial p { color: var(--color-grey-700); margin-bottom: var(--space-4); }

/* --------------------------------------------------------------------
   SERVICE CARD — grilla asimétrica 3+2 de Líneas de Negocio
   -------------------------------------------------------------------- */
.capability-toggle { display:none; }
@media (max-width: 639px) {
  .capability-copy {
    overflow:hidden;
    max-height: 4.7em;
    transition: max-height 380ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .capability-copy.is-expanded { max-height: 700px; }
  .capability-toggle {
    display:inline-block; margin-top: var(--space-2);
    background:none; border:none; padding:0 0 3px; appearance:none;
    font-family: var(--font-base); font-size: var(--text-sm); font-weight:600;
    color: var(--color-gold-500);
    border-bottom: 1px solid rgba(216,161,42,0.45);
    cursor:pointer;
  }
  .capability-toggle:hover, .capability-toggle:focus-visible { border-bottom-color: var(--color-gold-500); outline:none; }
}
.card-grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-5); }
.card-grid .card { grid-column: span 4; min-width: 0; }
.card-grid .card--wide { grid-column: span 6; }
@media (max-width: 1023px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid .card { grid-column: span 1; }
  .card-grid .card--wide { grid-column: span 2; }
}
@media (max-width: 639px)  { .card-grid { grid-template-columns: 1fr; } .card-grid .card--wide { grid-column: span 1; } }
@media (max-width: 639px)  { .image-frame::before { right: -8px; } }

.card { border-top: 1px solid rgba(216,161,42,0.28); padding-top: var(--space-4); transition: border-color var(--duration-micro) var(--ease-precise); }
.card:hover { border-top-color: var(--color-gold-500); }
.card .media-placeholder, .card .media-cover, .card .image-frame { margin-bottom: var(--space-3); }
.card .card-category {
  margin-bottom: var(--space-1);
  background: linear-gradient(90deg, #8a6416 0%, #d8a12a 32%, #f0d483 58%, #b3841e 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: var(--color-gold-300);
}
.card h3 {
  font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); margin-bottom: var(--space-2);
  text-transform: uppercase; letter-spacing: 0.01em;
  background: linear-gradient(90deg, #8a6416 0%, #d8a12a 32%, #f0d483 58%, #b3841e 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: var(--color-gold-500);
}
.card p { font-size: var(--text-sm); color: var(--color-grey-300); max-width: 420px; line-height:1.65; letter-spacing:0.01em; text-align:justify; text-justify:inter-word; hyphens:auto; }
/* .card-link: arquitectura preparada para una futura página de detalle por línea de
   negocio. No se renderiza en producción (Etapa 4, corrección de enlaces muertos). */

.card--wide { display:block; }
.card--wide .panel-image { width:100%; margin-bottom: var(--space-4); }
.card--wide .panel-image .media-cover, .card--wide .panel-image .media-placeholder { aspect-ratio: 16/9; height:auto; width:100%; }
.card--wide .card-body { width:100%; }
.card--wide .card-body p { max-width: 560px; line-height:1.65; letter-spacing:0.01em; text-align:justify; text-justify:inter-word; hyphens:auto; }

/* --------------------------------------------------------------------
   METODOLOGÍA — banda documental + timeline responsive
   -------------------------------------------------------------------- */
.documentary-band { position:relative; margin-bottom: var(--space-7); }
.documentary-band .media-placeholder { border:1px dashed var(--color-grey-300); }
.documentary-band .media-cover { display:block; }
.documentary-band .band-caption {
  position:absolute; bottom: var(--space-3); left: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-gold-300);
  background: rgba(7,26,51,0.82); padding: 2px 8px;
}

.methodology {
  position:relative; list-style:none; margin:0; padding-left:0;
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6); padding-top:28px; padding-bottom: var(--space-3);
}
.methodology::before {
  content:"";
  position:absolute; top:6px; left:0; right:0; height:1px;
  background: linear-gradient(90deg, rgba(216,161,42,0.12), rgba(216,161,42,0.5) 12%, rgba(216,161,42,0.5) 88%, rgba(216,161,42,0.12));
  pointer-events:none;
}
.method-step { min-width: 0; position:relative; }
.method-step::before {
  content:"";
  position:absolute; top:0; left:0; width:8px; height:8px; border-radius:50%;
  background: var(--color-gold-500);
  transition: background var(--duration-base) var(--ease-engineering), box-shadow var(--duration-base) var(--ease-engineering);
}
.method-step:hover::before { background: var(--color-steel-300); box-shadow: 0 0 8px rgba(124,160,172,0.55); }
.method-icon {
  display:block; height:92px; width:auto;
  margin: var(--space-3) 0 var(--space-4);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
}
@media (max-width: 639px) { .method-icon { height:72px; } }
.method-title {
  font-weight: var(--fw-semibold); margin-bottom: var(--space-2);
  background: linear-gradient(90deg, #8a6416 0%, #d8a12a 32%, #f0d483 58%, #b3841e 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: var(--color-gold-500);
  transition: color var(--duration-base) var(--ease-engineering);
}
.method-step:hover .method-title { background:none; -webkit-text-fill-color: var(--color-steel-300); color: var(--color-steel-300); }
.method-step:hover .method-icon { color: var(--color-steel-300); }
.method-desc { font-size: var(--text-sm); color: var(--color-grey-300); max-width: 370px; line-height:1.65; letter-spacing:0.01em; text-align:justify; text-justify:inter-word; hyphens:auto; }
.micro-tech, .method-tags, .sector-tags,
.method-microlabel, .sector-capabilities, .sector-detail-list {
  background: linear-gradient(110deg,#7a5310,#d8a12a,#f5d778,#b77b16);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.10), 0 2px 4px rgba(0,0,0,0.45);
  color: var(--color-gold-500);
}
.method-microlabel {
  font-family: var(--font-mono); font-size: 0.6875rem; text-transform:uppercase;
  margin-top: var(--space-3);
}

@media (max-width: 1023px) {
  .methodology { display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); overflow-x:visible; }
  .method-step { min-width: 0; }
}
@media (max-width: 639px) {
  .methodology { display:flex; flex-direction:column; gap: var(--space-5); }
}

/* --------------------------------------------------------------------
   SECTORES — composición editorial arquitectónica (v2)
   Sin tarjetas, sin sombras, sin bordes redondeados, sin fondos por
   sector. Un único plano editorial dividido por líneas de 1px.
   -------------------------------------------------------------------- */

/* Encabezado + fotografía transversal + frase de transición */
.sector-intro { margin-bottom: var(--space-6); }
.sector-intro--panoramic .image-frame { position:relative; }
.sector-intro--panoramic .media-cover, .sector-intro--panoramic .media-placeholder { aspect-ratio: 21/9; height:auto; }
@media (max-width: 767px) { .sector-intro--panoramic .media-cover, .sector-intro--panoramic .media-placeholder { aspect-ratio: 4/3; } }
.sector-intro-caption { padding: var(--space-5) 0 var(--space-8); border-bottom: 1px solid rgba(216,161,42,0.2); margin-bottom: var(--space-7); }
.sector-intro--panoramic .image-frame { position:relative; }
.sector-intro--panoramic .image-frame::before { right: -32px; }
@media (max-width: 639px) { .sector-intro--panoramic .image-frame::before { right: -8px; } }
.sector-detail { display:flex; gap: var(--space-4); align-items:center; padding-left: var(--space-6); border-left: none; position:relative; }
.sector-detail::before {
  content:"";
  position:absolute; top:50%; left:0; width: var(--space-6); height:1px;
  background-image: linear-gradient(90deg, rgba(216,161,42,0.6) 0 6px, transparent 6px 12px);
  background-size: 12px 1px;
}
.sector-detail-image { width:54%; flex-shrink:0; }
.sector-detail-image .media-cover, .sector-detail-image .media-placeholder { aspect-ratio: 3/4; height:auto; }
.sector-detail-title { font-size: var(--text-xl); font-weight: var(--fw-semibold); line-height:1.3; margin-bottom: var(--space-3); }
.sector-detail-list { font-family: var(--font-mono); font-size: var(--text-xs); text-transform:uppercase; }
@media (max-width: 639px) { .sector-detail { flex-direction:column; align-items:flex-start; border-left:none; border-top: 1px solid rgba(216,161,42,0.25); padding-left:0; padding-top: var(--space-4); } .sector-detail-image { width:45%; } }
.sector-transition { font-size: var(--text-md); line-height: var(--lh-md); color: var(--color-grey-300); max-width: 320px; }

/* Retícula 01–06: un único plano continuo, dividido por hairlines */
.sector-matrix { display:grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(216,161,42,0.28); }
@media (max-width: 1023px) { .sector-matrix { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .sector-matrix { grid-template-columns: 1fr; } }

.sector-cell {
  padding: var(--space-6) var(--space-5);
  border-right: 1px solid rgba(216,161,42,0.28);
  border-bottom: 1px solid rgba(216,161,42,0.28);
  position:relative; overflow:hidden;
  scroll-margin-top: var(--space-7);
  display:flex; flex-direction:column;
}
.sector-cell::before {
  content:""; position:absolute; top:0; left: var(--space-5); width:32px; height:1px;
  background: linear-gradient(90deg, #d8a12a, transparent);
  pointer-events:none;
}
.sector-cell::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image: url(../img/tec-bg-02-tecnica.webp);
  background-size:180% auto; background-repeat:no-repeat;
  opacity:0;
}
.sector-matrix .sector-cell:nth-child(2)::after,
.sector-matrix .sector-cell:nth-child(5)::after { opacity:0.08; background-position: top left; }
.sector-matrix .sector-cell:nth-child(4)::after { opacity:0.06; background-position: bottom right; }
.sector-cell > * { position:relative; z-index:1; }
/* Sin borde derecho en la última columna de cada fila */
.sector-matrix .sector-cell:nth-child(3n) { border-right: none; }
@media (max-width: 1023px) { .sector-matrix .sector-cell:nth-child(3n) { border-right: 1px solid rgba(216,161,42,0.28); } .sector-matrix .sector-cell:nth-child(2n) { border-right: none; } }
@media (max-width: 639px)  { .sector-matrix .sector-cell { border-right: none !important; } }

.sector-rule {
  display:block; width: 24px; height: 1px; background: var(--color-gold-500);
  margin-bottom: var(--space-3);
  transition: background var(--duration-base) var(--ease-engineering), width var(--duration-base) var(--ease-engineering);
}
.sector-name {
  font-family: var(--font-base); font-size: var(--text-xl); line-height: var(--lh-xl);
  font-weight: var(--fw-semibold); margin-bottom: var(--space-2);
  background: linear-gradient(90deg, #8a6416 0%, #d8a12a 32%, #f0d483 58%, #b3841e 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: var(--color-gold-300);
  transition: transform var(--duration-base) var(--ease-engineering);
}
.sector-desc { font-size: var(--text-sm); color: var(--color-grey-300); max-width: 340px; line-height:1.55; text-align:justify; text-justify:inter-word; hyphens:auto; }
.sector-capabilities { font-family: var(--font-mono); font-size: 0.6875rem; text-transform:uppercase; margin-top: var(--space-2); max-width:280px; text-align:left; }

/* ===== Hero editorial de sector — fotografía completamente limpia,
   seguida por un bloque editorial independiente. La imagen y el texto
   NUNCA se superponen: son dos elementos consecutivos. ===== */
.sector-editorial-hero { position:relative; scroll-margin-top: var(--space-6); }
.sector-editorial-hero__media {
  position:relative; width:100%;
  overflow:hidden;
}
.sector-editorial-hero__picture,
.sector-editorial-hero__img {
  width:100%; height:100%; display:block;
}
.sector-editorial-hero__img {
  position:absolute; inset:0; object-fit:cover;
  filter: saturate(0.94) contrast(1.03) brightness(0.96);
}
.sector-editorial-hero__picture { position:absolute; inset:0; }
.sector-editorial-hero__picture .sector-editorial-hero__img { position:static; }

/* =========================================================================
   DIRECCIÓN DE FOTOGRAFÍA — sistema definitivo para los seis sectores.
   Cada fotografía cuenta con archivos reales preparados para Desktop/
   Laptop, Tablet y Mobile (servidos vía <picture>), no un recorte
   decidido por CSS. El contenedor usa una proporción predecible por
   punto de quiebre, y no hay zoom artificial en ninguno de los seis.
   ========================================================================= */
.sector-editorial-hero__media { aspect-ratio: 3 / 2; }
@media (max-width: 1023px) { .sector-editorial-hero__media { aspect-ratio: 4 / 3; } }
@media (max-width: 639px)  { .sector-editorial-hero__media { aspect-ratio: 4 / 5; } }
.sector-editorial-hero__img { object-position: center; transform:none; }

/* Institucional: su fotografía se midió considerablemente más clara y
   menos saturada que las otras cinco (toma diurna nublada vs. atardecer/
   noche en el resto). Se mantiene la corrección de color ya aprobada. */
#sector-institucional .sector-editorial-hero__img { filter: saturate(1.55) contrast(1.12) brightness(0.57); }

@media (max-width: 1023px) { .sector-editorial-hero__title { max-width: 90%; } }

.sector-editorial-hero__media::after {
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:6%;
  background: linear-gradient(180deg, transparent, var(--color-navy-950));
  pointer-events:none;
}
.sector-editorial-hero__content { position:relative; background: var(--color-navy-950); padding: 70px 0 var(--space-8); }
/* Selectores defensivos: garantizan texto claro sin importar reglas
   globales de párrafo — nunca negro, nunca azul oscuro. */
.sector-editorial-hero__content,
.sector-editorial-hero__content p,
.sector-editorial-hero__content h2 {
  color: var(--color-text-inverse);
}
.sector-editorial-hero__content .eyebrow { color: var(--color-gold-500); }
.sector-editorial-hero__title {
  font-size: var(--text-2xl); line-height: var(--lh-2xl); font-weight: var(--fw-semibold);
  max-width: 760px; margin: var(--space-3) 0;
  overflow-wrap: break-word;
}
.sector-editorial-hero__lead { max-width: 660px; line-height:1.6; }
@media (max-width: 1023px) { .sector-editorial-hero__title { max-width: 90%; } }
@media (max-width: 639px) {
  .sector-editorial-hero__title { max-width: 100%; font-size: var(--text-xl); line-height: var(--lh-xl); overflow-wrap: break-word; }
  .sector-editorial-hero__lead { max-width: 100%; }
}

/* ===== Contenido editorial posterior al hero — ancho de lectura controlado ===== */
/* Ritmo unificado en los seis capítulos: se anula el padding-top genérico
   heredado de .section-pad (128px, pensado para separación entre grandes
   bloques del sitio, no para una transición interna de capítulo) y se deja
   un único valor de 64px en .sector-editorial-content__inner — coherente
   con el resto del ritmo interno del capítulo (el mismo salto que ya
   existe entre subtítulo y párrafo). */
.sector-editorial-content.section-pad { padding-top: 0; }
.sector-editorial-content__inner { width: min(100% - 48px, 1120px); margin-inline: auto; padding: 64px 0 0; }
.sector-editorial-content__inner .chapter-body { max-width: 820px; }
.sector-editorial-content__inner h3 { color: var(--color-gold-500); font-size: var(--text-xl); line-height:var(--lh-xl); font-weight:var(--fw-semibold); margin: var(--space-7) 0 var(--space-4); overflow-wrap: break-word; }
.sector-editorial-content__inner h3:first-child { margin-top:0; }
.sector-editorial-content__inner p { color: var(--color-grey-300); line-height:1.65; letter-spacing:0.01em; margin-bottom: var(--space-4); max-width:820px; }
@media (max-width: 639px) { .sector-editorial-content__inner p { text-align:left; } }

/* ===== Editorial Navigation Card — componente reutilizable para todos
   los sectores. No es un botón comercial: es una pieza editorial que
   invita a continuar leyendo. ===== */
.sector-nav-card {
  display:flex; flex-direction:column;
  position:relative;
  width:100%; max-width: 400px;
  margin-top: auto;
  padding: 22px var(--space-5);
  border: 1px solid rgba(216,161,42,0.32);
  border-radius: 8px;
  background: rgba(141,169,196,0.05);
  text-decoration:none;
  transition: border-color var(--duration-base) var(--ease-precise), background var(--duration-base) var(--ease-precise), transform var(--duration-base) var(--ease-precise), box-shadow var(--duration-base) var(--ease-precise);
}
.sector-nav-card__title { font-size: var(--text-base); font-weight:700; color: var(--color-gold-500); margin-bottom: var(--space-2); }
.sector-nav-card__desc { font-size: var(--text-sm); color: var(--color-grey-300); line-height:1.5; max-width:92%; min-height: calc(1.5em * 3); }
.sector-nav-card__arrow {
  align-self:flex-end; margin-top: var(--space-4);
  font-size:1.15rem; line-height:1; color: var(--color-gold-500);
  transition: transform 280ms cubic-bezier(0.16,1,0.3,1);
}
.sector-nav-card:hover, .sector-nav-card:focus-visible {
  border-color: rgba(216,161,42,0.6);
  background: rgba(141,169,196,0.09);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.22);
}
.sector-nav-card:focus-visible { outline: 2px solid var(--color-gold-500); outline-offset: 2px; }
.sector-nav-card:hover .sector-nav-card__arrow, .sector-nav-card:focus-visible .sector-nav-card__arrow { transform: translateX(7px); }
@media (max-width: 639px) { .sector-nav-card { max-width:100%; min-width:0; } }


.sector-cell:hover .sector-rule { background: var(--color-steel-300); width: 40px; }
.sector-cell:hover .sector-name { transform: translateX(4px); background:none; -webkit-text-fill-color: var(--color-steel-300); color: var(--color-steel-300); }

/* --------------------------------------------------------------------
   COMMITMENT — full-bleed, scrim denso
   -------------------------------------------------------------------- */
.dark-section { background: var(--color-navy-950); color: var(--color-text-inverse); }
.dark-section .eyebrow { color: var(--color-steel-300); }
.dark-section h2 { font-size: var(--text-2xl); line-height: var(--lh-2xl); font-weight: var(--fw-semibold); max-width: 760px; margin-bottom: var(--space-4); }
.dark-section p { color: var(--color-grey-300); max-width: 620px; line-height:1.65; letter-spacing:0.01em; text-align:justify; text-justify:inter-word; hyphens:auto; }

.commitment-section { position:relative; min-height:60vh; display:flex; align-items:center; overflow:hidden; }
.commitment-section .media-placeholder, .commitment-section .media-cover { position:absolute; inset:0; border:none; aspect-ratio:auto; }
.commitment-scrim { position:absolute; inset:0; background: linear-gradient(90deg, rgba(var(--color-navy-950-rgb),0.4) 0%, rgba(var(--color-navy-950-rgb),0.12) 38%, rgba(var(--color-navy-950-rgb),0.02) 100%); }
.commitment-content {
  position:relative; z-index:2;
  padding: var(--space-9) 0;
  max-width:none; margin:0;
  padding-left: 8vw;
  width:100%;
}
.commitment-content > * { max-width: 460px; }
.commitment-content h2 { max-width:520px; }
@media (max-width: 639px) {
  .commitment-content { padding-left: var(--container-padding-mobile); padding-right: var(--container-padding-mobile); }
  .commitment-content > * { max-width: 100%; }
  .commitment-content h2 { max-width:100%; }
}
.commitment-accent { display:block; margin-top: var(--space-4); width:150px; }
@media (max-width: 1023px) { .commitment-content { padding: var(--space-8) var(--container-padding-tablet); } }
@media (max-width: 639px)  { .commitment-content { padding: var(--space-7) var(--container-padding-mobile); } }

/* --------------------------------------------------------------------
   CONTACT FORM
   -------------------------------------------------------------------- */
/* Firma conceptual vertical — COMPRENDER / DEFINIR / INTERVENIR.
   No es una tarjeta ni una timeline: es una secuencia técnica silenciosa
   que llena el vacío bajo el botón de WhatsApp sin competir con la
   textura de fondo. */
.contact-title-hero {
  font-size: clamp(2rem, 3vw, 3.4rem);
  line-height: 1.05;
  font-weight: 700;
  text-align: left;
  text-shadow:
    0 1px 0 rgba(255,241,184,.35),
    0 2px 3px rgba(143,100,24,.5),
    0 8px 18px rgba(0,0,0,.4);
}
.contact-whatsapp-note { color: var(--color-grey-300); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.contact-signature {
  position:relative;
  margin-top: 44px;
  padding-left: 26px;
  padding-bottom: var(--space-6);
}
.contact-signature__line {
  position:absolute; left:4px; top:8px; bottom:8px; width:1px;
  background: linear-gradient(180deg,
    rgba(216,161,42,0.06) 0%,
    rgba(245,215,120,0.55) 10%,
    rgba(143,100,24,0.4) 28%,
    rgba(216,161,42,0.65) 48%,
    rgba(245,215,120,0.5) 62%,
    rgba(143,100,24,0.4) 80%,
    rgba(216,161,42,0.06) 100%);
}
.contact-signature__step { position:relative; margin-bottom: 44px; }
.contact-signature__step:last-child { margin-bottom:0; }
.contact-signature__node {
  position:absolute; left:-27px; top:9px; width:9px; height:9px; border-radius:50%;
  background: radial-gradient(circle at 32% 28%, #fff8e0 0%, #f5d778 22%, #d8a12a 55%, #8f6418 88%, #6f490d 100%);
  border: 1px solid rgba(111,73,13,0.55);
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.contact-signature__term {
  display:block; font-size: clamp(1.4rem, 1.8vw, 2.1rem); line-height:1.15; font-weight:700; letter-spacing:0.06em;
  text-shadow:
    0 1px 0 rgba(255,241,184,.35),
    0 2px 2px rgba(143,100,24,.55),
    0 6px 14px rgba(0,0,0,.4);
}
.contact-signature__desc {
  display:block; font-size: 1rem; line-height:1.55; color: var(--color-grey-300); margin-top:6px;
}
@media (max-width: 767px) {
  .contact-signature { margin-top: 40px; padding-left:22px; padding-bottom:0; }
  .contact-signature__line { left:3px; top:6px; bottom:6px; }
  .contact-signature__step { margin-bottom: 28px; }
  .contact-signature__node { left:-22px; top:7px; width:8px; height:8px; }
  .contact-signature__term { font-size: 1.2rem; }
  .contact-signature__desc { display:block; font-size:0.8125rem; }
}
.contact-whatsapp-btn {
  display:inline-flex; align-items:center; gap: 10px;
  background: var(--color-navy-950);
  border: 1px solid rgba(216,161,42,0.55);
  border-radius: 999px;
  padding: 8px 22px 8px 8px;
  text-decoration:none;
  margin-bottom: var(--space-6);
  transition: border-color var(--duration-micro) ease, box-shadow var(--duration-micro) ease, transform var(--duration-micro) ease;
}
.contact-whatsapp-btn:hover { border-color: var(--color-gold-500); box-shadow: 0 0 0 1px rgba(216,161,42,0.3), 0 4px 16px rgba(216,161,42,0.18); transform: translateY(-1px); }
.contact-whatsapp-btn__icon-wrap {
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background: radial-gradient(circle, rgba(216,161,42,0.16) 0%, rgba(216,161,42,0.05) 70%, transparent 100%);
  border: 1px solid rgba(216,161,42,0.35);
}
.contact-whatsapp-btn__icon { width:20px; height:20px; color: var(--color-gold-300); flex-shrink:0; opacity:1; }
.contact-whatsapp-btn__label { font-size: var(--text-sm); font-weight:600; }
.contact-grid { display:grid; grid-template-columns: 5fr 7fr; gap: var(--grid-gutter-desktop); }
@media (max-width: 1023px) { .contact-grid { grid-template-columns: 1fr; gap: var(--space-5); } }
.contact-form--panel { background: var(--color-navy-900); padding: var(--space-6); border-radius: var(--radius-sm); border: 1px solid rgba(216,161,42,0.18); }
.form-row { margin-bottom: var(--space-4); }
.form-row label { display:block; font-size: var(--text-sm); color: var(--color-grey-300); margin-bottom: var(--space-2); }
.form-row input, .form-row textarea {
  width:100%; border:none; border-bottom: 1px solid rgba(216,161,42,0.35);
  padding: var(--space-2) 0; font-family: var(--font-base); font-size: var(--text-base);
  background:transparent; color: var(--color-text-inverse); resize:vertical;
  transition: border-color var(--duration-micro) var(--ease-precise);
}
.form-row textarea { min-height: 96px; }
.form-row input:focus, .form-row textarea:focus { border-color: var(--color-gold-500); outline:none; }
.form-row input:invalid:not(:placeholder-shown) { border-color: #ff6b6b; }
.form-message { font-size: var(--text-sm); margin-top: var(--space-3); display:none; }
.form-message.is-visible { display:block; }
.form-message--success { color: var(--color-steel-300); }
.form-message--error { color: #ff6b6b; }

.form-row--checkbox { display:flex; }
.checkbox-label { display:flex; align-items:flex-start; gap: var(--space-3); cursor:pointer; font-size: var(--text-sm); color: var(--color-grey-300); }
.checkbox-label input[type="checkbox"] { margin-top: 3px; width:16px; height:16px; flex-shrink:0; accent-color: var(--color-gold-500); }
.checkbox-label a { color: var(--color-gold-300); text-decoration: underline; text-decoration-color: rgba(216,161,42,0.4); text-underline-offset: 2px; }
.checkbox-label a:hover { text-decoration-color: var(--color-gold-500); }

/* Honeypot antispam — oculto visualmente sin display:none (para que los
   bots que sí lo detectan igual lo completen). Invisible y sin afectar
   el diseño ni el orden de tabulación para personas usando teclado. */
.hp-field { position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }

/* --------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------- */
.site-footer {
  background: linear-gradient(180deg, #071a33 0%, #06172c 100%);
  position:relative;
  padding: var(--space-8) 0 var(--space-6);
}
.site-footer::before {
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(216,161,42,0.5) 20%, rgba(216,161,42,0.7) 50%, rgba(216,161,42,0.5) 80%, transparent);
}
.footer-grid { display:flex; justify-content:space-between; flex-wrap:wrap; gap: var(--space-7); font-size: var(--text-sm); color: var(--color-grey-300); margin-bottom: var(--space-6); }
.footer-grid .tech-label { color: var(--color-grey-300); line-height:1.7; }
.footer-grid a { color: var(--color-grey-300); }
.footer-grid a:hover { color: var(--color-gold-500); }
.footer-col-label { display:block; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--tracking-mono); text-transform:uppercase; color: rgba(216,161,42,0.5); margin-bottom: var(--space-3); }
.footer-logo { font-weight: 700; font-size: var(--text-xl); margin-bottom: var(--space-2); letter-spacing:0.01em; }
@media (max-width: 374px) { .footer-logo { font-size: var(--text-lg); } }
.footer-bottom { border-top: 1px solid rgba(216,161,42,0.14); padding-top: var(--space-4); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
}