/* INSOSA — capa de página sobre el sistema de diseño Industry.
   Toda color/tipografía/espaciado viene de los tokens del sistema.
   Aquí solo vive el andamiaje de página: rejilla, ritmo vertical y
   los objetos de plano (placa de especificación, celdas, figuras). */
@import url('_ds/industry-17f38780-c5c7-4545-8077-13ba5d835072/styles.css');

:root {
  --leading: 24px;
  --half: 12px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 62ch;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; text-wrap: pretty; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--color-accent); color: var(--color-bg);
  padding: var(--space-2) var(--space-4); font-family: var(--font-heading);
}
.skip:focus { left: 0; }

/* — cabecera — */
.site-head { border-bottom: 1px solid var(--color-divider); }
.site-head .nav {
  max-width: 1200px; margin: 0 auto; flex-wrap: wrap;
  padding: var(--space-3) var(--edge); row-gap: var(--space-2);
}
.nav-brand { letter-spacing: 0.04em; text-decoration: none; }
.nav-brand small {
  display: block; font-family: var(--font-body); font-weight: 400;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.site-head .nav a:not(.nav-brand):not(.btn) { font-size: 13.5px; white-space: nowrap; }
.site-head .nav a[aria-current='page'] { color: var(--color-accent-700); }
.site-head .btn { white-space: nowrap; }

/* — menú desplegable de servicios — */
.nav-dropdown { position: relative; display: inline-flex; }
.nav-drop-toggle {
  font-family: var(--font-body); font-size: 13.5px; line-height: 1;
  white-space: nowrap; background: none; border: 0; padding: 0; margin: 0;
  color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
.nav-drop-toggle:hover,
.nav-dropdown:hover .nav-drop-toggle,
.nav-dropdown:focus-within .nav-drop-toggle { color: var(--color-accent-700); }
.nav-drop-toggle .caret { font-size: 9px; transition: transform 0.18s ease; }
.nav-dropdown:hover .caret,
.nav-dropdown:focus-within .caret,
.nav-drop-toggle[aria-expanded='true'] .caret { transform: rotate(180deg); }

.nav-menu {
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 30;
  min-width: 208px; display: flex; flex-direction: column;
  background: var(--color-neutral-100); border: 1px solid var(--color-divider);
  padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--color-text) 40%, transparent);
}
.nav-dropdown:hover .nav-menu,
.nav-dropdown:focus-within .nav-menu,
.nav-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.site-head .nav .nav-menu a:not(.nav-brand):not(.btn) {
  font-size: 13.5px; line-height: var(--leading); padding: 8px 12px;
  text-decoration: none; color: var(--color-text);
  border-left: 2px solid transparent; transition: color 0.12s ease, background 0.12s ease;
}
.site-head .nav .nav-menu a:hover,
.site-head .nav .nav-menu a:focus {
  color: var(--color-accent-700); background: var(--color-neutral-200);
  border-left-color: var(--color-accent-700);
}
@media (max-width: 720px) {
  .nav-menu { position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; min-width: 0; margin-top: var(--space-2); }
  .nav-menu:not(.open) { display: none; }
  .nav-dropdown { display: block; width: 100%; }
}

/* — rótulos con regla dibujada — */
.kicker {
  display: block; font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  color: var(--color-accent-700); font-feature-settings: "tnum" 1;
  margin: 0 0 var(--half);
}
.caption-rule {
  height: 1px; border: 0; background: var(--color-divider);
  margin: 0 0 calc(var(--leading) - var(--half));
}

/* — encabezado de página — */
.page-head { padding: calc(2.5 * var(--leading)) 0 calc(1.5 * var(--leading)); }
.page-head.hero { padding-top: calc(3.5 * var(--leading)); }
.display {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: clamp(42px, 5.85vw, 79px);
  letter-spacing: 0.01em; text-transform: uppercase; margin: 0;
  margin-left: -0.052em; text-box: trim-both cap alphabetic;
}
.display .line { display: block; }
h1.page-title {
  font-size: clamp(34px, 4.2vw, 54px); line-height: 1.06;
  letter-spacing: 0.01em; text-transform: uppercase; margin: 0;
  margin-left: -0.052em; max-width: 26ch; text-box: trim-both cap alphabetic;
}
.lede {
  font-size: 17px; line-height: var(--leading); max-width: var(--measure);
  margin: calc(1.5 * var(--leading) - 1cap) 0 0; text-box: trim-both cap alphabetic;
}
.cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }
.crumbs {
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding-top: var(--leading);
}
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--color-accent-700); }

/* — secciones — */
.section { padding: calc(2 * var(--leading)) 0; }
.section > h2, .prose h2 {
  font-size: clamp(26px, 2.6vw, 34px); line-height: calc(1.5 * var(--leading));
  letter-spacing: 0.02em; text-transform: uppercase; margin: 0;
  text-box: trim-both cap alphabetic;
}
.prose { max-width: var(--measure); }
.prose h2 { margin-top: calc(1.5 * var(--leading)); }
.prose h3 {
  font-size: 20px; line-height: var(--leading); letter-spacing: 0.02em;
  text-transform: uppercase; margin: calc(1.5 * var(--leading)) 0 0;
  text-box: trim-both cap alphabetic;
}
.prose p, .prose li {
  font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.prose p { margin: calc(var(--leading) - 1cap) 0 0; }
.prose ul { margin: var(--half) 0 0; padding-left: var(--leading); }
.prose li { margin-top: 4px; }
.prose li::marker { color: var(--color-accent-700); }
.prose strong { color: var(--color-text); }

/* — celdas de alambre — */
.cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); }
.cells.two { grid-template-columns: repeat(2, 1fr); }
.cells.four { grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.4vw, 32px); }
.cell {
  position: relative; border: 1px solid var(--color-divider);
  padding: var(--leading); display: flex; flex-direction: column;
}
.cell > .corner, .plate > .corner, .fig > .corner {
  position: absolute; width: 15px; height: 15px; pointer-events: none;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.cell > .corner::before, .plate > .corner::before, .fig > .corner::before {
  content: ""; position: absolute; left: 7px; top: 0; width: 1px; height: 100%; background: currentColor;
}
.cell > .corner::after, .plate > .corner::after, .fig > .corner::after {
  content: ""; position: absolute; top: 7px; left: 0; width: 100%; height: 1px; background: currentColor;
}
.cell > .corner.tl, .plate > .corner.tl, .fig > .corner.tl { top: -8px; left: -8px; }
.cell > .corner.tr, .plate > .corner.tr, .fig > .corner.tr { top: -8px; right: -8px; }
.cell > .corner.bl, .plate > .corner.bl, .fig > .corner.bl { bottom: -8px; left: -8px; }
.cell > .corner.br, .plate > .corner.br, .fig > .corner.br { bottom: -8px; right: -8px; }
.cell .num {
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--color-accent-700); font-feature-settings: "tnum" 1;
  margin-bottom: var(--half);
}
.cell h2, .cell h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 21px; line-height: var(--leading); letter-spacing: 0.02em;
  text-transform: uppercase; margin: 0; text-box: trim-both cap alphabetic;
}
.cell p {
  font-size: 15px; line-height: var(--leading); margin: calc(var(--leading) - 1cap) 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  text-box: trim-both cap alphabetic;
}
.cell ul { margin: var(--half) 0 0; padding-left: 18px; font-size: 14px; line-height: 22px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.cell ul li::marker { color: var(--color-accent-700); }
.cell .cell-link { margin-top: auto; padding-top: var(--leading); font-size: 14px;
  font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase; text-decoration: none; color: var(--color-accent-700); }
.cell .cell-link:hover { text-decoration: underline; }

/* — placa de especificación — */
.plate { position: relative; border: 1px solid var(--color-divider); }
.title-block { display: flex; flex-wrap: wrap; align-items: stretch;
  border-bottom: 1px solid var(--color-divider); }
.title-block > span {
  padding: var(--half) var(--leading); font-size: 13px; line-height: var(--leading);
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  font-feature-settings: "tnum" 1;
}
.tb-title { flex: 1; min-width: 16ch; }
.tb-cell { border-left: 1px solid var(--color-divider); white-space: nowrap;
  color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.spec { table-layout: fixed; }
.spec col.c-num { width: calc(3 * var(--leading)); }
.spec col.c-prop { width: 34%; }
.spec col.c-val { width: 22%; }
.spec th, .spec td { padding: var(--half) var(--leading) var(--half) 0; vertical-align: middle; }
.spec th:first-child, .spec td:first-child { padding-left: var(--leading); }
.spec th { font-size: 13px; line-height: var(--half); font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.spec td { font-size: 15px; line-height: var(--leading); }
.spec .s-num { font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--color-accent-700); font-feature-settings: "tnum" 1; }
.spec .s-val { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 22px; line-height: var(--leading); letter-spacing: 0.02em;
  font-feature-settings: "tnum" 1; white-space: nowrap; }
.spec .s-rem { color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.spec tbody tr:last-child td { border-bottom: 0; }
.spec tbody tr:hover { background: none; }
.plate-note { margin: 0; padding: var(--half) var(--leading);
  border-top: 1px solid var(--color-divider); font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent); }

/* — hero de página: banda de foto a todo el ancho del contenedor — */
.page-banner {
  position: relative; margin: var(--leading) 0 0;
  border: 1px solid var(--color-divider); overflow: hidden;
  background: var(--color-surface);
}
.page-banner img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 7; object-fit: cover;
}
/* Viñeta inferior: asienta la foto y sostiene el pie sin taparla. */
.page-banner::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(to top,
    color-mix(in srgb, #10161c 78%, transparent), transparent);
  pointer-events: none;
}
.page-banner figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: var(--leading) clamp(16px, 3vw, 32px);
  color: #fff; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
}
.page-banner figcaption b { font-weight: 700; letter-spacing: 0.04em; }
.page-banner figcaption span {
  display: block; text-transform: none; letter-spacing: 0.01em;
  font-size: 14px; margin-top: 3px;
  color: color-mix(in srgb, #fff 82%, transparent);
}
/* Marca de imagen ilustrativa — honestidad: no es obra documentada. */
.page-banner .ilustrativa {
  position: absolute; top: 0; right: 0; z-index: 1;
  padding: 5px 10px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  background: color-mix(in srgb, #10161c 62%, transparent); color: #fff;
}
@media (max-width: 720px) {
  .page-banner img { aspect-ratio: 4 / 3; }
  .page-banner figcaption { font-size: 11.5px; }
}

/* — galería de proyectos: masonry por columnas, sin recortar la foto — */
.gallery { columns: 3 260px; column-gap: clamp(16px, 2.4vw, 28px); margin-top: var(--leading); }
.gallery > figure {
  break-inside: avoid; margin: 0 0 clamp(16px, 2.4vw, 28px);
  border: 1px solid var(--color-divider); background: var(--color-surface);
}
.gallery img { display: block; width: 100%; height: auto; }
.gallery figcaption {
  padding: var(--half) var(--half) calc(var(--half) + 2px);
  border-top: 1px solid var(--color-divider);
  font-size: 13px; line-height: 1.45;
}
.gallery figcaption b {
  display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase;
}
.gallery figcaption span { color: color-mix(in srgb, var(--color-text) 68%, transparent); }

/* — figuras / fotografía — */
.fig { position: relative; margin: 0; }
.fig image-slot { width: 100%; display: block; }
.fig > img { display: block; width: 100%; height: auto; }
.split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--leading) clamp(24px, 5vw, 80px); align-items: center; }
.split.text-right > .fig { order: -1; }

/* — preguntas frecuentes — */
.faq { max-width: 74ch; border-top: 1px solid var(--color-divider); margin-top: var(--leading); }
.faq-item { border-bottom: 1px solid var(--color-divider); }

/* Acordeón nativo: <details>/<summary>. Cero JavaScript, accesible por
   teclado, y el texto de la respuesta sigue en el DOM para el JSON-LD. */
.faq-item > summary {
  display: flex; align-items: baseline; gap: var(--half);
  padding: var(--leading) 0; cursor: pointer; list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover h3 { color: var(--color-accent-700); }
.faq-item > summary:focus-visible {
  outline: 2px solid var(--color-accent-600); outline-offset: 3px;
}
.faq-item h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 21px; line-height: calc(var(--leading) + 2px); letter-spacing: 0.01em;
  margin: 0; max-width: 46ch; flex: 1;
  transition: color .12s;
}
/* Indicador +/− dibujado en CSS, alineado a la primera línea del título. */
.faq-item > summary::after {
  content: ""; flex: none; align-self: start;
  width: 15px; height: 15px; margin-top: 5px; position: relative;
  background:
    linear-gradient(var(--color-accent-700), var(--color-accent-700)) center/100% 1.5px no-repeat,
    linear-gradient(var(--color-accent-700), var(--color-accent-700)) center/1.5px 100% no-repeat;
  transition: transform .18s ease, opacity .18s;
}
/* Abierto = menos. Se apaga la barra vertical dejando solo la horizontal;
   sin rotate, porque rotar la que queda la volvía vertical otra vez. */
.faq-item[open] > summary::after {
  background: linear-gradient(var(--color-accent-700), var(--color-accent-700)) center/100% 1.5px no-repeat;
  opacity: .6;
}
.faq-item p { font-size: 15.5px; line-height: var(--leading);
  margin: 0 0 var(--leading); padding-right: calc(15px + var(--half));
  color: color-mix(in srgb, var(--color-text) 82%, transparent); max-width: 70ch; }

/* Entrada de la respuesta: NO se toca la altura del <details>.
   Animar block-size sobre ::details-content dejaba el contenido clipeado
   (medido: el <p> ocupaba 96px y el <details> se quedaba en 75) — el
   acordeón nativo ya funciona solo, así que aquí solo se le da una
   aparición suave que no interviene el layout. */
.faq-item[open] > p { animation: faq-in .22s ease both; }
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item[open] > p { animation: none; }
  .faq-item > summary::after { transition: none; }
}

/* ═══ hero con recorrido por scroll (solo portada) ═══════════════════════
   Tres pantallas de scroll ancladas: el scroll mueve el currentTime del
   video y la chispa SVG en paralelo. Ver hero-fly.js. */
.hero-fly { position: relative; height: 300vh; background: #0c1116; }
.hero-fly-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; grid-template-rows: 1fr auto;
}
.hero-fly video, .hero-fly .hero-fly-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.hero-fly video { opacity: 0; transition: opacity .4s ease; }
.hero-fly[data-mode="video"] video { opacity: 1; }
.hero-fly[data-mode="video"] .hero-fly-poster { opacity: 0; }
.hero-fly .hero-fly-poster { transition: opacity .4s ease; }

/* Chispa de entrada: foto fija encima del media que se sostiene al inicio y
   se desvanece al empezar a scrollear (la opacidad la maneja hero-fly.js).
   Sin JS queda visible = hero fijo con energía. */
.hero-fly .hero-fly-intro {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
  pointer-events: none; will-change: opacity;
}

/* Lienzo de respaldo: congela el último frame del video antes de que Safari lo
   descarte en segundo plano, para que al volver NUNCA se vea negro. La
   opacidad la maneja hero-fly.js (0 normalmente, 1 mientras repinta). */
.hero-fly .hero-fly-freeze {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; opacity: 0;
  transition: opacity .25s ease; pointer-events: none;
}

/* Cortinas: fuertes arriba (nav) y abajo (titular), liviana al centro
   para no matar el recorrido. */
.hero-fly-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(to bottom, color-mix(in srgb, #0c1116 72%, transparent), transparent 22%),
    linear-gradient(to top, color-mix(in srgb, #0c1116 88%, transparent), transparent 46%),
    color-mix(in srgb, #0c1116 11%, transparent);
}
/* El bloque anclado mide 100vh pero arranca DEBAJO del header (flujo
   normal), así que en scroll 0 sus últimos píxeles caen bajo el pliegue y el
   titular se corta. Ese alto NO es constante: ~59px en escritorio y ~130px
   en móvil cuando el nav se envuelve. hero-fly.js lo mide y publica
   --head-h; acá se reserva exactamente eso más un respiro. El 96px de
   respaldo cubre el caso sin JS. */
.hero-fly-body {
  position: relative; z-index: 3; align-self: end;
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: 0 var(--edge) calc(var(--head-h, 96px) + 1.5 * var(--leading));
  color: #fff;
}
.hero-fly-body .kicker { color: var(--color-accent-300); }
.hero-fly-body .display, .hero-fly-body h1 {
  color: #fff; max-width: 22ch;
  text-shadow: 0 2px 22px color-mix(in srgb, #000 55%, transparent);
}

/* La chispa: capa vectorial encima del video. */
.hero-fly .spark {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 2; pointer-events: none;
}
.hero-fly .spark-path { fill: none; stroke: none; }
.hero-fly .spark-guide {
  fill: none; stroke: color-mix(in srgb, var(--color-accent-300) 26%, transparent);
  stroke-width: 1.5; stroke-dasharray: 5 7;
}
.hero-fly .spark-trail {
  fill: none; stroke: #8ad4ff; stroke-width: 2.6; stroke-linecap: round;
  filter: drop-shadow(0 0 7px #4aa9ff) drop-shadow(0 0 20px #2b7fd4);
}
.hero-fly .spark-pulse {
  fill: #eaf7ff;
  filter: drop-shadow(0 0 9px #7cc8ff) drop-shadow(0 0 26px #3d95e0);
}

/* Barra de escenas: píldora oscura con blur — una pista clara desaparece
   contra los tableros grises. */
.hero-fly-scenes {
  position: absolute; right: var(--edge); top: 50%; transform: translateY(-50%);
  z-index: 3; display: flex; flex-direction: column; gap: var(--half);
}
.hero-fly-scenes span {
  display: flex; align-items: center; gap: var(--half);
  font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase;
  color: color-mix(in srgb, #fff 55%, transparent);
  background: color-mix(in srgb, #0c1116 48%, transparent);
  backdrop-filter: blur(6px);
  padding: 6px 11px; transition: color .25s;
}
.hero-fly-scenes span::before {
  content: ""; width: 16px; height: 1.5px; background: currentColor; flex: none;
  transition: width .25s, background .25s;
}
.hero-fly-scenes span[data-on] { color: #fff; }
.hero-fly-scenes span[data-on]::before { width: 26px; background: var(--color-accent-300); }

/* Tarjeta blanca que monta sobre el borde: aquí bajan bajada y botones,
   porque encima del recorrido solo debe ir el titular. */
.hero-fly-card {
  position: relative; z-index: 4;
  max-width: 1200px; margin: calc(-2.5 * var(--leading)) auto 0;
  padding: 0 var(--edge);
}
.hero-fly-card > div {
  background: var(--color-bg); border: 1px solid var(--color-divider);
  padding: calc(1.5 * var(--leading)) clamp(20px, 3vw, 40px);
}
.hero-fly-card .lede { margin-top: 0; }

@media (max-width: 860px) {
  /* En móvil corre el video vertical liviano. 160vh dejaba el recorrido
     resuelto en tres deslizadas — 260vh le da espacio para leerse. */
  .hero-fly { height: 260vh; }
  .hero-fly-scenes { display: none; }
}
/* Con "reducir movimiento" NO se desarma el hero: el recorrido lo controla
   el dedo del usuario 1:1 y se detiene cuando él se detiene. Lo que se quita
   es la INERCIA (ver hero-fly.js) y el crecimiento del destello, que es
   movimiento que sigue solo. Desarmarlo entero dejaba una foto muerta. */
@media (prefers-reduced-motion: reduce) {
  .hero-fly .spark-pulse { filter: drop-shadow(0 0 7px #7cc8ff); }
}

/* — hero cinematográfico: foto a todo el ancho con el titular encima — */
/* Con foto el encabezado respira solo: se recorta el aire de arriba. */
.page-head:has(.hero-card) { padding-top: var(--leading); }
.page-head.hero:has(.hero-card) { padding-top: var(--leading); }
.hero-card {
  position: relative; margin: var(--leading) 0 0;
  border: 1px solid var(--color-divider); overflow: hidden;
  background: var(--color-neutral-900); isolation: isolate;
}
.hero-card > img {
  display: block; width: 100%; height: 100%; position: absolute; inset: 0;
  object-fit: cover; z-index: -1;
}
/* Reserva la caja antes de que cargue la imagen: sin salto de layout. */
.hero-card { aspect-ratio: 21 / 9; min-height: 380px; }
.hero-card.tall { aspect-ratio: 16 / 9; }
/* Cortina: oscurece de abajo hacia arriba para que el titular siempre lea. */
.hero-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top,
      color-mix(in srgb, #0c1116 92%, transparent) 0%,
      color-mix(in srgb, #0c1116 68%, transparent) 32%,
      color-mix(in srgb, #0c1116 18%, transparent) 62%,
      transparent 88%),
    linear-gradient(to right,
      color-mix(in srgb, #0c1116 42%, transparent), transparent 58%);
}
.hero-card > .hero-body {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(24px, 4vw, 56px);
  color: #fff;
}
.hero-card .kicker { color: var(--color-accent-300); margin-bottom: var(--half); }
.hero-card h1, .hero-card .display {
  color: #fff; max-width: 24ch;
  text-shadow: 0 2px 18px color-mix(in srgb, #000 45%, transparent);
}
/* Subtitular opcional sobre la foto, indentado a la derecha. */
.hero-card .hero-sub {
  margin: var(--leading) 0 0 auto; max-width: 46ch; text-align: left;
  font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, #fff 88%, transparent);
  border-left: 2px solid var(--color-accent-400); padding-left: var(--leading);
}
.hero-card .ilustrativa {
  position: absolute; top: 0; right: 0; z-index: 1;
  padding: 6px 11px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  background: color-mix(in srgb, #0c1116 62%, transparent); color: #fff;
}
/* Bajada + botones: fuera de la foto, debajo. */
.hero-below { padding: calc(1.5 * var(--leading)) 0 0; }
.hero-below .lede { margin-top: 0; }

@media (max-width: 860px) {
  .hero-card, .hero-card.tall { aspect-ratio: 4 / 5; min-height: 0; }
  .hero-card .hero-sub { margin-left: 0; padding-left: var(--half); }
}

/* — banda de cierre — */
.closer { padding: calc(2.5 * var(--leading)) 0 calc(3 * var(--leading));
  border-top: 1px solid var(--color-divider); }
.closer h2 { font-size: clamp(26px, 2.8vw, 36px); line-height: calc(1.5 * var(--leading));
  letter-spacing: 0.02em; text-transform: uppercase; margin: 0; max-width: 30ch;
  text-box: trim-both cap alphabetic; }
.closer p { font-size: 15.5px; line-height: var(--leading); max-width: var(--measure);
  margin: calc(var(--leading) - 1cap) 0 0;
  color: color-mix(in srgb, var(--color-text) 80%, transparent); }

/* — formulario — */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  max-width: 620px; }
.form-grid .field.wide { grid-column: 1 / -1; }
.form-grid .actions { grid-column: 1 / -1; display: flex; gap: var(--space-3);
  flex-wrap: wrap; align-items: center; }
.form-note { font-size: 12.5px; line-height: 19px; grid-column: 1 / -1;
  color: color-mix(in srgb, var(--color-text) 62%, transparent); margin: 0; }
.contact-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--leading) clamp(24px, 5vw, 72px); align-items: start; }
.dl-nap { margin: 0; font-size: 15px; line-height: var(--leading); }
.dl-nap dt { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  margin-top: var(--leading); }
.dl-nap dt:first-child { margin-top: 0; }
.dl-nap dd { margin: 2px 0 0; }

/* — pie — */
.site-foot { border-top: 1px solid var(--color-divider); margin-top: calc(2 * var(--leading)); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.4fr));
  gap: var(--leading) clamp(20px, 3vw, 48px); padding: calc(2 * var(--leading)) 0; }
.foot-grid h2 { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  margin: 0 0 var(--half); color: color-mix(in srgb, var(--color-text) 60%, transparent);
  font-family: var(--font-body); font-weight: 600; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 6px; font-size: 14px; }
.foot-grid a { color: inherit; text-decoration: none; }
.foot-grid a:hover { color: var(--color-accent-700); text-decoration: underline; }
.foot-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px; letter-spacing: 0.04em; }
.foot-grid p { font-size: 13.5px; line-height: 21px; margin: var(--half) 0 0; max-width: 34ch;
  color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.foot-legal { border-top: 1px solid var(--color-divider); padding: var(--leading) 0;
  font-size: 12.5px; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6);
  color: color-mix(in srgb, var(--color-text) 62%, transparent); }

@media (max-width: 980px) {
  .cells, .cells.two, .cells.four { grid-template-columns: repeat(2, 1fr); gap: calc(var(--leading) + 16px); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .contact-cols { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cells, .cells.two, .cells.four { grid-template-columns: 1fr; }
  .split, .form-grid { grid-template-columns: 1fr; }
  .split.text-right > .fig { order: 0; }
  .page-head.hero { padding-top: calc(2 * var(--leading)); }
  .tb-title { flex-basis: 100%; border-bottom: 1px solid var(--color-divider); }
  .title-block > .tb-cell { padding-inline: var(--half); flex: 1 0 auto; }
  .tb-title + .tb-cell { border-left: 0; padding-left: var(--leading); }
  .spec thead { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; }
  .spec, .spec tbody, .spec td { display: block; }
  .spec tr { display: grid; grid-template-columns: max-content 1fr;
    column-gap: var(--half); row-gap: var(--half); align-items: baseline;
    padding: var(--leading);
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
  .spec tr:last-child { border-bottom: 0; }
  .spec th, .spec td { padding: 0; border: 0; }
  .spec th:first-child, .spec td:first-child { padding-left: 0; }
  .spec .s-num { grid-column: 1; }
  .spec .s-prop { grid-column: 2; }
  .spec .s-val, .spec .s-rem { grid-column: 1 / -1; }
}