/* BDM Ingenieros — sistema visual (ver Marca/Manual_de_marca_BDM.html) */
:root {
  --navy-950: #0B1C2A;
  --navy-900: #0F2537;
  --navy-700: #1B3B54;
  --navy-500: #2F5B7C;
  --navy-100: #E3EBF1;
  --copper: #C25A24;
  --copper-600: #B4521F;
  --copper-700: #A84A1B;
  --copper-300: #E8946A;
  --paper: #F6F4F0;
  --concrete: #ECE8E1;
  --line: #DAD5CC;
  --ink: #14202B;
  --muted: #55616C;
  --white: #FFFFFF;

  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --brand: 'Cinzel', 'Times New Roman', serif;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 4px;
  --header-h: 72px;
  --shadow: 0 1px 2px rgb(15 37 55 / .06), 0 8px 24px rgb(15 37 55 / .06);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--paper); text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--copper-700); text-underline-offset: 3px; }
a:hover { color: var(--navy-700); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--navy-900); color: #fff; padding: 8px 14px; }
.skip:focus { left: 8px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 820px; }
.mono { font-family: var(--mono); letter-spacing: .02em; }
.small { font-size: 13px; }
.muted { color: var(--muted); }

/* ---------- Tipografía de sección ---------- */
.eyebrow { font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--copper-700); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.eyebrow-light { color: var(--copper-300); }
.h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 600; color: var(--navy-900); }
.h2 { font-size: clamp(27px, 3.4vw, 40px); font-weight: 600; color: var(--navy-900); max-width: 22ch; }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--muted); max-width: 62ch; }
.section-lead { color: var(--muted); max-width: 64ch; margin-bottom: 40px; }
.fig { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 10px 0 0; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: var(--radius); font: 600 16px/1 var(--font); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s; }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 15px; }
.btn-primary { background: var(--copper-600); color: #fff; }
.btn-primary:hover { background: var(--copper-700); color: #fff; }
.btn-ghost { border-color: var(--navy-700); color: var(--navy-700); background: transparent; }
.btn-ghost:hover { background: var(--navy-700); color: #fff; }
.btn-ghost-light { border-color: rgb(255 255 255 / .6); color: #fff; background: transparent; }
.btn-ghost-light:hover { background: #fff; color: var(--navy-900); }
.btn-whatsapp { background: #25D366; color: #0B1C2A; }
.btn-whatsapp:hover { background: #1EBE5A; color: #0B1C2A; }
.wa-icon { width: 20px; height: 20px; flex: none; }
.wa-link { display: inline-flex; align-items: center; gap: 8px; }
.wa-link .wa-icon { color: #25D366; width: 18px; height: 18px; }
.wa-link .ig-icon { color: #E1306C; width: 18px; height: 18px; }
.wa-float { position: fixed; left: 20px; bottom: 20px; z-index: 60; width: 52px; height: 52px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 6px 20px rgb(11 28 42 / .3); transition: transform .2s; }
.svc-local { font-size: 14.5px; color: var(--muted); margin: -6px 0 22px; }
.svc-local a { color: var(--copper-700); }
.footer-local { color: var(--copper-300); }
.chips { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips a { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 99px; text-decoration: none; color: var(--navy-900); background: #fff; }
.chips a:hover { border-color: var(--copper); color: var(--copper-700); }
.comuna-list { columns: 2; column-gap: 24px; }
.wa-float:hover { transform: scale(1.06); color: #fff; }
.wa-float .wa-icon { width: 28px; height: 28px; }
.link-arrow { font-weight: 600; color: var(--copper-700); text-decoration: none; white-space: nowrap; }
.link-arrow::after { content: " →"; transition: margin .15s; }
a:hover .link-arrow::after, .link-arrow:hover::after { margin-left: 4px; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--navy-700); --iso-bg: var(--white); }
.iso { width: 46px; height: 46px; flex: none; }
.iso-node { fill: var(--iso-bg); }
.logo-word { display: flex; flex-direction: column; line-height: 1; }
.logo-bdm { font-family: var(--brand); font-weight: 700; font-size: 27px; color: var(--copper); letter-spacing: .02em; }
.logo-sub { font-family: var(--brand); font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; margin-top: 3px; }
.logo-sub span:first-child { color: var(--navy-700); }
.logo-sub span:last-child { color: var(--copper-700); }
.logo-light { color: #fff; --iso-bg: var(--navy-950); }
.logo-light .logo-sub span:first-child { color: #fff; }
.logo-light .logo-bdm, .logo-light .logo-sub span:last-child { color: var(--copper-300); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / .96); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.site-header.scrolled { border-color: var(--line); box-shadow: 0 2px 12px rgb(15 37 55 / .06); }
.header-row { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 24px; }
.brand { text-decoration: none; }
.main-nav { display: flex; align-items: center; gap: 28px; flex: 1; }
.nav-list { display: flex; justify-content: center; gap: clamp(16px, 3vw, 44px); list-style: none; margin: 0 auto; padding: 0; }
.has-menu { position: relative; }
.nav-top { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; font-weight: 500; font-size: 15.5px; color: var(--ink); border-radius: var(--radius); text-decoration: none; }
.nav-top:hover, .nav-top[aria-expanded="true"], .has-menu:focus-within > .nav-top { color: var(--navy-900); background: var(--paper); }
.nav-top.is-current { color: var(--copper-700); }
.nav-top:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .2s; }
.nav-top[aria-expanded="true"] .chev { transform: rotate(180deg); }
.submenu { list-style: none; margin: 0; padding: 8px; position: absolute; top: calc(100% + 6px); left: 0; min-width: 260px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s, transform .18s, visibility .18s; z-index: 60; }
.submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.has-menu:hover > .submenu, .has-menu:focus-within > .submenu, .nav-top[aria-expanded="true"] + .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu a { display: block; padding: 9px 12px; border-radius: 3px; color: var(--ink); text-decoration: none; font-size: 15px; }
.submenu a:hover, .submenu a[aria-current="page"] { background: var(--paper); color: var(--copper-700); }
.submenu .submenu-all { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--copper-700); border-bottom: 1px solid var(--line); border-radius: 0; margin-bottom: 4px; }
.menu-btn { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; position: relative; }
.bars, .bars::before, .bars::after { position: absolute; left: 11px; width: 22px; height: 2px; background: var(--navy-900); transition: transform .2s, opacity .2s; }
.bars { top: 21px; } .bars::before { content: ""; top: -7px; left: 0; } .bars::after { content: ""; top: 7px; left: 0; }
.menu-open .bars { background: transparent; }
.menu-open .bars::before { transform: translateY(7px) rotate(45deg); }
.menu-open .bars::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .menu-btn { display: block; }
  .main-nav { position: fixed; inset: var(--header-h) 0 auto 0; background: #fff; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 24px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; }
  .menu-open .main-nav { transform: none; opacity: 1; visibility: visible; }
  .main-nav { max-height: calc(100svh - var(--header-h)); overflow-y: auto; }
  .nav-list { flex-direction: column; gap: 0; margin: 0; }
  .nav-top { display: flex; justify-content: space-between; width: 100%; box-sizing: border-box; padding: 15px 0; font-size: 17px; border-bottom: 1px solid var(--line); border-radius: 0; background: none !important; }
  .submenu { position: static; min-width: 0; border: 0; box-shadow: none; padding: 4px 0 10px 12px; opacity: 1; visibility: visible; transform: none; display: none; }
  .has-menu:hover > .submenu, .has-menu:focus-within > .submenu { display: none; }
  .nav-top[aria-expanded="true"] + .submenu { display: block; }
  .submenu a { padding: 10px 0; font-size: 16px; }
  .main-nav .btn { margin-top: 18px; }
}

/* ---------- Migas ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 18px 0 0; margin: 0; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--copper-700); }

/* ---------- Hero portada (loop de fotos de terreno, estilo limpio) ---------- */
.hero { position: relative; height: calc(100svh - var(--header-h)); min-height: 520px; max-height: 900px; color: #fff; background: var(--navy-950); overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide { opacity: 0; transform: scale(1.06); transition: opacity 1.6s ease, transform 8s linear; }
.slide.is-active { opacity: 1; transform: scale(1); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(11 28 42 / .55) 0%, rgb(11 28 42 / .25) 38%, rgb(11 28 42 / 0) 60%, rgb(11 28 42 / .25) 100%); }
.hero-inner { position: relative; text-align: center; padding-top: clamp(40px, 9vh, 96px); }
.hero-title { font-size: clamp(26px, 3.3vw, 48px); font-weight: 500; line-height: 1.12; letter-spacing: -.015em; max-width: none; margin: 0 auto; text-shadow: 0 2px 24px rgb(11 28 42 / .35); }
.hero-title em { font-style: normal; color: var(--copper-300); }
.hero-kicker { display: block; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .2em; line-height: 1.9; text-transform: uppercase; margin-bottom: 18px; color: #fff; }
.hero-credit { position: absolute; left: var(--gutter); bottom: 18px; margin: 0; max-width: 46ch; font-size: 10px; letter-spacing: .04em; color: rgb(255 255 255 / .7); opacity: 0; transition: opacity .25s; }
.hero-credit.is-active { opacity: 1; transition: opacity .8s .6s; }
.slide-dots { position: absolute; right: calc(var(--gutter) + 76px); bottom: 30px; display: flex; gap: 8px; }
.slide-dots span { width: 24px; height: 2px; background: rgb(255 255 255 / .4); transition: background .4s, width .4s; }
.slide-dots span.is-active { background: #fff; width: 40px; }

/* ---------- Secciones ---------- */
.section { padding: clamp(64px, 9vw, 112px) 0; }
.section-alt { background: var(--concrete); }
.section-dark { background: var(--navy-900); color: rgb(255 255 255 / .86); }
.section-dark .h2 { color: #fff; }
.section-dark .fig { color: rgb(255 255 255 / .55); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.section-head .h2 { margin: 0; }
.page-head { padding: clamp(40px, 7vw, 88px) 0 clamp(32px, 5vw, 56px); border-bottom: 1px solid var(--line); background: linear-gradient(var(--paper), var(--paper)), var(--paper); position: relative; }
.page-head::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgb(27 59 84 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(27 59 84 / .05) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg, transparent, #000 60%); }
.page-head .wrap { position: relative; z-index: 1; }
.page-center { text-align: center; border: 0; }
.page-center .lead, .page-center .h1 { margin-left: auto; margin-right: auto; }
.page-center .hero-actions { justify-content: center; }
.iso-lg { width: 72px; height: 72px; color: var(--navy-700); margin: 0 auto 24px; --iso-bg: var(--paper); }

/* Servicios */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.svc-card { background: var(--paper); padding: 32px 28px 28px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; min-height: 260px; transition: background .2s; position: relative; }
.section-alt .svc-card { background: var(--concrete); }
.svc-card:hover { background: #fff; }
.svc-card::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--copper); transition: width .25s; }
.svc-card:hover::before { width: 100%; }
.svc-num { color: var(--copper-700); font-size: 13px; margin-bottom: 28px; }
.svc-card h3 { font-size: 22px; color: var(--navy-900); }
.svc-card p { color: var(--muted); font-size: 15.5px; flex: 1; }
.svc-grid-compact .svc-card { min-height: 0; }
.svc-grid-compact .svc-card p { display: none; }
.svc-grid-auto { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); background: none; border: 0; gap: 16px; }
.svc-grid-auto .svc-card { border: 1px solid var(--line); border-radius: var(--radius); }

/* Método */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; counter-reset: s; }
.steps-4 { grid-template-columns: repeat(4, 1fr); }
.steps li { padding: 24px 24px 8px 0; border-top: 2px solid var(--navy-700); position: relative; }
.steps li + li { padding-left: 24px; }
.steps li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--navy-700); }
.steps li + li::before { left: 24px; }
.section-alt .steps li::before { background: var(--concrete); }
.step-n { color: var(--copper-700); font-size: 13px; }
.steps h3 { font-size: 20px; margin: 8px 0; color: var(--navy-900); }
.steps p { color: var(--muted); font-size: 15.5px; }

/* Casos */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1080px) { .case-grid { grid-template-columns: 1fr 1fr; } }
.case-card { padding: clamp(24px, 3vw, 36px); border: 1px solid rgb(255 255 255 / .16); border-radius: var(--radius); background: rgb(255 255 255 / .03); }
.case-tag { color: var(--copper-300); text-transform: uppercase; letter-spacing: .1em; }
.case-card h3 { color: #fff; font-size: clamp(21px, 2vw, 25px); margin: 10px 0 0; }
.case-card > p:not(.case-tag):not(.case-links) { color: rgb(255 255 255 / .75); font-size: 15.5px; }
.case-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; }
.case-links .link-arrow, .link-light { color: var(--copper-300); }
.case-note { color: rgb(255 255 255 / .5); margin: 24px 0 0; }
.spec { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 20px 0; border-top: 1px solid rgb(255 255 255 / .18); }
.spec div { padding: 12px 12px 12px 0; border-bottom: 1px solid rgb(255 255 255 / .18); }
.spec dt { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: rgb(255 255 255 / .55); }
.spec dd { margin: 4px 0 0; color: #fff; font-weight: 500; }

/* En terreno (video + dron en vuelo) */
.field-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; margin-bottom: clamp(24px, 3vw, 40px); }
.field-head .section-lead { margin-bottom: 0; }
.field-flight { width: 100%; height: auto; overflow: visible; color: var(--navy-700); }
.ff-path { fill: none; stroke: var(--navy-500); stroke-opacity: .5; stroke-width: 1.4; stroke-dasharray: 2 7; stroke-linecap: round; animation: ff-dash 1.2s linear infinite; }
.ff-ground { fill: none; stroke: var(--navy-700); stroke-opacity: .35; stroke-width: 1.4; }
.ff-points path { fill: var(--copper); opacity: .85; }
.ff-body { fill: none; stroke: var(--navy-900); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ff-rotor { fill: var(--navy-500); fill-opacity: .35; animation: m-rotor .12s linear infinite alternate; transform-box: fill-box; transform-origin: center; }
.ff-cam { fill: var(--copper); }
.ff-cone { fill: var(--copper); opacity: .12; animation: ff-scan 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: top center; }
@keyframes ff-dash { to { stroke-dashoffset: -18; } }
@keyframes ff-scan { 0%, 100% { opacity: .06; transform: scaleX(.8); } 50% { opacity: .18; transform: scaleX(1.1); } }
.field-media { position: relative; }
.field-video { width: 100%; aspect-ratio: 21/9; object-fit: cover; border-radius: var(--radius); background: var(--navy-900); display: block; }
.field-rec { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .14em; color: #fff; background: rgb(11 28 42 / .55); padding: 6px 10px; border-radius: 99px; backdrop-filter: blur(4px); }
.field-rec i { width: 8px; height: 8px; border-radius: 50%; background: #E5484D; animation: ff-blink 1.4s steps(2) infinite; }
@keyframes ff-blink { 50% { opacity: .2; } }
.field-steps { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--navy-700); }
.field-steps li { padding: 18px 20px 0 0; }
.field-steps li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.field-steps .mono { color: var(--copper-700); font-size: 13px; }
.field-steps strong { display: block; font-size: 19px; color: var(--navy-900); margin: 6px 0 4px; }
.field-steps p { margin: 0; color: var(--muted); font-size: 15px; }

/* Guías */
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.guide-card { display: flex; flex-direction: column; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s; }
.guide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--ink); }
.guide-card .mono { color: var(--copper-700); text-transform: uppercase; letter-spacing: .1em; }
.guide-card h3 { font-size: 20px; margin-top: 12px; color: var(--navy-900); }
.guide-card p { color: var(--muted); font-size: 15px; flex: 1; }

/* FAQ */
.faq { border-top: 1px solid var(--line); margin-top: 24px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; font-weight: 600; font-size: 18px; color: var(--navy-900); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font: 400 26px/1 var(--mono); color: var(--copper); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding-bottom: 20px; margin: 0; max-width: 70ch; }

/* CTA */
.cta-band { background: var(--navy-950); color: rgb(255 255 255 / .82); padding: clamp(56px, 7vw, 88px) 0; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border: 1px solid rgb(232 148 106 / .25); border-radius: 50%; box-shadow: 0 0 0 60px rgb(232 148 106 / .04), 0 0 0 120px rgb(232 148 106 / .03); }
.cta-row { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; position: relative; }
.cta-band h2 { color: #fff; font-size: clamp(26px, 3vw, 36px); font-weight: 600; max-width: 24ch; }
.cta-band p { max-width: 56ch; margin: 0; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Páginas de servicio ---------- */
.svc-hero { padding: clamp(32px, 5vw, 64px) 0 clamp(48px, 7vw, 88px); border-bottom: 1px solid var(--line); }
.svc-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.svc-figure { margin: 0; }
.svc-figure img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); background: var(--concrete); }
.what-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.what { padding-top: 20px; border-top: 2px solid var(--copper); }
.what h3 { font-size: 19px; color: var(--navy-900); }
.what p { color: var(--muted); font-size: 15.5px; }
.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.checks { list-style: none; padding: 0; margin: 24px 0 0; }
.checks li { position: relative; padding: 12px 0 12px 36px; border-bottom: 1px solid var(--line); }
.checks li::before { content: ""; position: absolute; left: 4px; top: 19px; width: 14px; height: 8px; border-left: 2px solid var(--copper); border-bottom: 2px solid var(--copper); transform: rotate(-45deg); }
.checks-sm li { font-size: 15px; padding: 8px 0 8px 30px; }
.checks-sm li::before { top: 14px; }
.norms { background: var(--navy-900); color: #fff; padding: 28px; border-radius: var(--radius); }
.norms .mono { text-transform: uppercase; letter-spacing: .12em; color: var(--copper-300); }
.norms ul { list-style: none; padding: 0; margin: 12px 0 0; }
.norms li { padding: 10px 0; border-bottom: 1px solid rgb(255 255 255 / .14); font-family: var(--mono); font-size: 14px; }

/* ---------- Artículos (guías) ---------- */
.article-head { padding-top: clamp(32px, 5vw, 64px); }
.article-head .meta { color: var(--muted); margin-top: 20px; }
.article-figure { margin: 32px auto 0; }
.article-figure img { width: 100%; border-radius: var(--radius); background: #fff; }
.article-grid { display: grid; grid-template-columns: minmax(0, 760px) 300px; gap: 64px; justify-content: center; padding-top: 48px; padding-bottom: 32px; }
.article-aside { position: relative; }
.aside-card { position: sticky; top: calc(var(--header-h) + 24px); padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 20px; }
.aside-card .mono { color: var(--copper-700); text-transform: uppercase; letter-spacing: .1em; }
.aside-card h2 { font-size: 20px; color: var(--navy-900); }
.aside-card p { color: var(--muted); font-size: 15px; }
.contact-aside .aside-card { position: static; }
.aside-lead { font-size: 15px; color: var(--muted); margin: 10px 0 0; }
.prose { font-size: 17.5px; }
.prose h2 { font-size: clamp(23px, 2.4vw, 28px); color: var(--navy-900); margin: 1.8em 0 .6em; }
.prose h2:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--copper); }
.prose strong { color: var(--navy-900); }
.table-wrap { overflow-x: auto; margin: 1.2em 0 1.6em; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--navy-900); color: #fff; font-weight: 500; font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; }
tbody tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 600; color: var(--navy-900); white-space: nowrap; }

/* ---------- Formulario ---------- */
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label { font-weight: 600; font-size: 15px; color: var(--navy-900); }
.opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea { font: inherit; font-size: 16px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy-500); outline: 2px solid rgb(47 91 124 / .2); outline-offset: 0; }
.form .btn { justify-self: start; }
.hp { position: absolute; left: -9999px; }
.contact-list { list-style: none; padding: 0; margin: 12px 0 0; }
.contact-list li { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; overflow-wrap: anywhere; }
.contact-list span { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding-top: 3px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-950); color: rgb(255 255 255 / .7); padding: 72px 0 0; font-size: 15px; border-top: 3px solid var(--copper); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.footer-brand a { text-decoration: none; }
.footer-brand p { margin-top: 20px; max-width: 34ch; }
.footer-brand .mono { color: rgb(255 255 255 / .45); }
.footer-h { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--copper-300); margin-bottom: 16px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer a { color: rgb(255 255 255 / .82); text-decoration: none; overflow-wrap: anywhere; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 24px; padding-bottom: 32px; border-top: 1px solid rgb(255 255 255 / .12); font-size: 13.5px; color: rgb(255 255 255 / .5); }
.footer-base p { margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .svc-grid:not(.svc-grid-auto), .guide-grid { grid-template-columns: repeat(2, 1fr); }
  .what-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-4 { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .steps li:nth-child(3) { padding-left: 0; } .steps li:nth-child(3)::before { left: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .article-grid { grid-template-columns: 1fr; gap: 24px; }
  .aside-card { position: static; }
}
@media (max-width: 860px) {
  .svc-hero-grid, .two-col, .contact-grid, .case-grid, .field-head { grid-template-columns: 1fr; }
  .field-steps { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .field-steps li:nth-child(3) { padding-left: 0; border-left: 0; }
  .field-video { aspect-ratio: 16/10; }
}
@media (max-width: 600px) {
  body { font-size: 16.5px; }
  .svc-grid, .guide-grid, .what-grid, .steps-4, .footer-grid, .field-row { grid-template-columns: 1fr; }
  .steps li, .steps li + li { padding-left: 0; } .steps li + li::before { left: 0; }
    .wa-float { left: 14px; bottom: 14px; width: 52px; height: 52px; }
  .hero-actions .btn, .cta-actions .btn { width: 100%; }
  .iso { width: 40px; height: 40px; }
  .logo-bdm { font-size: 23px; }
  .logo-sub { font-size: 9px; }
    .contact-list li { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } .slide { transform: none; } }
@media print { .site-header, .site-footer, .cta-band, .menu-btn, .wa-float { display: none; } body { background: #fff; } }

/* ---------- Modelo interactivo (indicadores + escena) ---------- */
.model { background: var(--navy-950); color: rgb(255 255 255 / .8); padding: clamp(64px, 9vw, 112px) 0 clamp(48px, 7vw, 88px); }
.model-title { font-size: clamp(32px, 4.4vw, 54px); font-weight: 400; color: #fff; letter-spacing: -.02em; max-width: 20ch; }
.model-title strong { font-weight: 600; }
.model-lead { max-width: 54ch; font-size: 18px; color: rgb(255 255 255 / .7); }
.model-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 44px 0 0; border-top: 1px solid rgb(255 255 255 / .14); }
.model-stats > div { display: flex; flex-direction: column; padding: 22px 24px 4px 0; }
.model-stats > div + div { padding-left: 24px; border-left: 1px solid rgb(255 255 255 / .14); }
.model-stats dd { order: -1; margin: 0 0 10px; font-size: clamp(44px, 5vw, 60px); font-weight: 300; line-height: 1; color: var(--copper-300); }
.model-stats dt { font-size: 15px; font-weight: 500; color: #fff; line-height: 1.35; }
.model-stats dd.stat-note { order: 0; margin: 4px 0 0; font-size: 13.5px; font-weight: 400; line-height: 1.4; color: rgb(255 255 255 / .7); }
.model-stage { margin-top: clamp(32px, 5vw, 56px); }
.model-svg { display: block; width: 100%; height: auto; color: #fff; touch-action: pan-y; user-select: none; }
.model-svg text { font-family: var(--mono); }
.m-tag { font-size: 11px; fill: rgb(255 255 255 / .5); letter-spacing: .06em; }
.m-hud-l { font-size: 10px; letter-spacing: .14em; fill: rgb(255 255 255 / .5); }
.m-hud-v { font-size: 18px; fill: #fff; }
.m-chart-bg { fill: rgb(255 255 255 / .03); stroke: rgb(255 255 255 / .12); }
.m-chart-axis { stroke: rgb(255 255 255 / .2); fill: none; }
.m-chart { fill: none; stroke: var(--copper-300); stroke-width: 1.4; }
.m-marker { fill: var(--copper-300); }
.m-terrain { fill: none; stroke: rgb(255 255 255 / .75); stroke-width: 1.6; }
.m-fill { fill: rgb(255 255 255 / .03); }
.m-strata-line { stroke: rgb(255 255 255 / .2); fill: none; }

/* Escenas: solo se ve la activa */
.m-scene { opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s; }
.model[data-active="topografia"] [data-scene="topografia"],
.model[data-active="suelos"] [data-scene="suelos"],
.model[data-active="estructura"] [data-scene="estructura"],
.model[data-active="hidraulica"] [data-scene="hidraulica"],
.model[data-active="datos"] [data-scene="datos"] { opacity: 1; visibility: visible; transition: opacity .5s; }

/* 01 Topografía */
.m-points circle { fill: var(--copper-300); opacity: .75; }
.m-st-legs { fill: none; stroke: #C9CDD2; stroke-width: 1.6; stroke-linecap: round; }
.m-st-solid { fill: #E8C24A; stroke: #0F2537; stroke-width: .8; }
.m-st-screen { fill: #0F2537; }
.m-st-lens { fill: #0F2537; stroke: #E8C24A; stroke-width: 1; }
.m-pole-rod { fill: none; stroke: #fff; stroke-width: 2.6; }
.m-pole-band { fill: none; stroke: #D9473A; stroke-width: 2.6; stroke-dasharray: 6 6; }
.m-pole-bubble { fill: #7FD28A; stroke: #0F2537; stroke-width: .8; }
.m-pole-holder { fill: #C9CDD2; }
.m-prism { fill: #E8C24A; stroke: #0F2537; stroke-width: 1; }
.m-prism-in { fill: #9FD3EA; }
.m-beam { stroke: #F27A5E; stroke-width: 1.2; stroke-dasharray: 5 4; opacity: 0; transition: opacity .2s; }
.m-beam.on { opacity: .9; animation: m-flow .5s linear infinite; }
.m-shots path { fill: none; stroke: #E8C24A; stroke-width: 1.8; }
.m-shots text { font-size: 10px; fill: #E8C24A; letter-spacing: .06em; }
.m-key text { font-size: 11.5px; fill: rgb(255 255 255 / .6); letter-spacing: .04em; }
.m-key-dot { fill: var(--copper-300); }
.m-key-cross { fill: none; stroke: #E8C24A; stroke-width: 1.8; }
.m-drone { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.m-drone circle { fill: var(--copper-300); stroke: none; }
.m-rotor { fill: rgb(255 255 255 / .3); stroke: none; animation: m-rotor .12s linear infinite alternate; transform-box: fill-box; transform-origin: center; }
.m-trail { fill: none; stroke: rgb(255 255 255 / .45); stroke-width: 1; stroke-dasharray: 1 5; }
.m-contour { fill: none; stroke: var(--copper-300); stroke-width: 1.2; stroke-dasharray: 600; stroke-dashoffset: 600; }
.model[data-active="topografia"] .m-contour { animation: m-draw 2.4s ease-out forwards; }

/* 02 Geociencias: secuencia por fases (data-phase) */
.m-geophones path { stroke: rgb(255 255 255 / .6); }
.m-geophones circle { fill: var(--copper-300); opacity: .5; }
.m-soil[data-phase="3"] .m-geophones circle { animation: m-blink .6s ease-in-out infinite; }
.m-hammer { stroke: #E8C24A; stroke-width: 2; fill: none; }
.m-waves circle { fill: none; stroke: var(--copper-300); stroke-opacity: 0; transform-box: fill-box; transform-origin: center; }
.m-soil[data-phase="3"] .m-waves circle { animation: m-wave 2s ease-out infinite; }
.m-bore { stroke: rgb(255 255 255 / .75); stroke-width: 2; fill: none; }
.m-pit-hole { fill: var(--navy-950); }
.m-pit-wall { fill: none; stroke: rgb(255 255 255 / .75); stroke-width: 1.4; }
.m-pit-spoil { fill: rgb(255 255 255 / .14); }
.m-pit-sample rect { fill: #E8C24A; }
.m-pit-sample, .m-spt, .m-pit-depth, .m-result { opacity: 0; transition: opacity .4s; }
.m-pit-sample.on, .m-spt.on, .m-soil:not([data-phase="1"]) .m-pit-depth, .m-soil[data-phase="4"] .m-result { opacity: 1; }
.m-rig path { fill: none; stroke: #E8C24A; stroke-width: 1.6; stroke-linejoin: round; }
.m-rig-hammer { fill: #E8C24A; }
.m-step { font-size: 11px; letter-spacing: .12em; fill: rgb(255 255 255 / .3); transition: fill .3s; }
.m-step.done { fill: rgb(255 255 255 / .6); }
.m-step.on { fill: var(--copper-300); }
.m-vs-line { fill: none; stroke: var(--copper-300); stroke-width: 2; stroke-dasharray: 900; stroke-dashoffset: 900; }
.m-soil[data-phase="3"] .m-vs-line, .m-soil[data-phase="4"] .m-vs-line { animation: m-draw 2s ease-out forwards; }

/* 03 Estructura */
.m-footings rect { fill: rgb(255 255 255 / .14); stroke: rgb(255 255 255 / .55); }
.m-axis { stroke: rgb(255 255 255 / .16); stroke-dasharray: 10 4 2 4; fill: none; }
.m-axis-b { fill: none; stroke: rgb(255 255 255 / .5); }
.m-axis-t { font-size: 11px; fill: rgb(255 255 255 / .75); }
.m-ghost { fill: none; stroke: rgb(255 255 255 / .22); stroke-width: 1; stroke-dasharray: 4 4; }
.m-col { fill: none; stroke: #CFE9F5; stroke-width: 3.2; stroke-linecap: square; transition: stroke .25s; }
.m-beams { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: square; }
.m-wall { fill: rgb(207 233 245 / .12); stroke: rgb(207 233 245 / .5); stroke-width: 1; }
.m-forces { fill: none; stroke: var(--copper-300); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-v1 { fill: none; stroke: var(--copper-300); stroke-width: 6; stroke-linecap: square; opacity: 0; transition: opacity .4s; }
.m-loads { fill: none; stroke: #9FD3EA; stroke-width: 1.2; }
.m-loads, .m-forces, .m-forces-t, .m-design, .m-detail, .m-elev, .m-info { opacity: 0; transition: opacity .4s; }
.m-struct[data-phase="1"] .m-loads,
.m-struct[data-phase="2"] .m-forces, .m-struct[data-phase="2"] .m-forces-t,
.m-struct[data-phase="3"] .m-design,
.m-struct[data-phase="4"] .m-detail, .m-struct[data-phase="4"] .m-elev, .m-struct[data-phase="4"] .m-v1,
.m-struct[data-phase="1"] [data-info="1"], .m-struct[data-phase="2"] [data-info="2"],
.m-struct[data-phase="3"] [data-info="3"], .m-struct[data-phase="4"] [data-info="4"] { opacity: 1; }
.m-ok { fill: #7FC8A9; }
.m-detail-c { fill: rgb(255 255 255 / .06); stroke: #fff; stroke-width: 1.4; }
.m-detail-e { fill: none; stroke: var(--copper-300); stroke-width: 1.6; stroke-dasharray: 520; stroke-dashoffset: 520; }
.m-struct[data-phase="4"] .m-detail-e { animation: m-draw 1.2s .2s ease-out forwards; }
.m-detail-b { fill: #E8C24A; }
.m-elev-col { fill: rgb(255 255 255 / .1); stroke: rgb(255 255 255 / .5); }
.m-elev-bar { fill: none; stroke: #E8C24A; stroke-width: 2; stroke-dasharray: 340; stroke-dashoffset: 340; }
.m-elev-bar2 { stroke-width: 2.6; }
.m-elev-st { fill: none; stroke: var(--copper-300); stroke-width: 1.1; stroke-dasharray: 28; stroke-dashoffset: 28; }
.m-struct[data-phase="4"] .m-elev-bar { animation: m-draw 1s ease-out forwards; }
.m-struct[data-phase="4"] .m-elev-st { animation: m-draw .25s ease-out forwards; }
.m-detail-l { fill: none; stroke: rgb(255 255 255 / .45); }
.m-detail-t { fill: rgb(255 255 255 / .8); }
.m-bar-bg { fill: rgb(255 255 255 / .12); }
.m-bar { fill: var(--copper-300); }

/* 04 Hidráulica (red tipo EPANET) */
.m-block { fill: rgb(255 255 255 / .035); stroke: rgb(255 255 255 / .08); }
.m-pipe { fill: none; stroke: rgb(111 179 210 / .3); stroke-width: 4; stroke-linecap: round; }
.m-pipe-main { stroke: rgb(111 179 210 / .5); stroke-width: 7; }
.m-flow { fill: none; stroke: #CFE9F5; stroke-width: 1.2; stroke-dasharray: 3 11; stroke-linecap: round; }
.m-node { stroke: var(--navy-950); stroke-width: 2; transition: fill .3s; }
.m-node-p { font-size: 10.5px; fill: #fff; font-family: var(--mono); paint-order: stroke; stroke: var(--navy-950); stroke-width: 4px; }
.m-tank { fill: rgb(255 255 255 / .04); stroke: #9FD3EA; stroke-width: 1.6; }
.m-tank-roof { stroke: #9FD3EA; stroke-width: 3; fill: none; }
.m-tank-water { fill: rgb(111 179 210 / .55); transition: y .3s, height .3s; }
.m-tank-tick { stroke: rgb(255 255 255 / .45); }
.m-hydrant path { stroke: #E8946A; stroke-width: 2; fill: none; }
.low-pressure [data-pmin] { fill: var(--copper-300); }
.m-divider { stroke: rgb(255 255 255 / .12); stroke-dasharray: 2 6; fill: none; }
.m-ground-fill { fill: rgb(255 255 255 / .03); }
.m-ud { stroke: rgb(255 255 255 / .35); stroke-dasharray: 3 4; fill: none; }
.m-sewer-pipe { fill: rgb(255 255 255 / .04); stroke: rgb(255 255 255 / .6); stroke-width: 1.2; }
.m-sewer-water { fill: rgb(201 178 138 / .55); }
.m-sewer-flow { fill: none; stroke: #EADBC0; stroke-width: 1.4; stroke-dasharray: 3 11; stroke-linecap: round; }
.m-manhole { fill: var(--navy-950); stroke: rgb(255 255 255 / .7); stroke-width: 1.2; }
.low-velocity [data-vel] { fill: var(--copper-300); }

/* 05 Ciencia de datos y SIG */
.m-orbit { fill: none; stroke: rgb(255 255 255 / .25); stroke-dasharray: 2 6; }
.m-sat { fill: none; stroke: #fff; stroke-width: 1.4; }
.m-panel { fill: rgb(111 179 210 / .35); }
.m-swath { fill: var(--copper-300); opacity: .1; }
.m-raster rect { fill: transparent; fill-opacity: .85; transition: fill .7s; }
[data-var="elev"] .k0 { fill: #1E4A66; } [data-var="elev"] .k1 { fill: #2F6F7E; } [data-var="elev"] .k2 { fill: #7FA88A; } [data-var="elev"] .k3 { fill: #C9B27A; } [data-var="elev"] .k4 { fill: #E8D9B5; }
[data-var="slope"] .k0 { fill: #3F8F55; } [data-var="slope"] .k1 { fill: #8DBA5A; } [data-var="slope"] .k2 { fill: #E3D45A; } [data-var="slope"] .k3 { fill: #E8944A; } [data-var="slope"] .k4 { fill: #D2453A; }
[data-var="geol"] .k0 { fill: #7FB3D5; } [data-var="geol"] .k1 { fill: #C9B27A; } [data-var="geol"] .k2 { fill: #9C8A6E; } [data-var="geol"] .k3 { fill: #9A7AA8; } [data-var="geol"] .k4 { display: none; }
[data-var="veg"] .k0 { fill: #7A6646; } [data-var="veg"] .k1 { fill: #B0A65E; } [data-var="veg"] .k2 { fill: #86AE6C; } [data-var="veg"] .k3 { fill: #4E8A55; } [data-var="veg"] .k4 { fill: #2E6A41; }
[data-var="clima"] .k0 { fill: #DCEBF3; } [data-var="clima"] .k1 { fill: #A9CDE2; } [data-var="clima"] .k2 { fill: #6FA8CB; } [data-var="clima"] .k3 { fill: #3F7FAE; } [data-var="clima"] .k4 { fill: #24578A; }
[data-var="risk"] .k0 { fill: #1E4A66; } [data-var="risk"] .k1 { fill: #2F6F7E; } [data-var="risk"] .k2 { fill: #D9C35A; } [data-var="risk"] .k3 { fill: #D9933F; } [data-var="risk"] .k4 { fill: #C9503A; }
.m-legend-ramp rect { transition: fill .45s; }
.m-parcel-bg { fill: rgb(255 255 255 / .03); }
.m-raster { shape-rendering: crispEdges; }
.m-contour-minor { fill: none; stroke: rgb(255 255 255 / .13); stroke-width: .8; }
.m-contour-major { fill: none; stroke: rgb(255 255 255 / .3); stroke-width: 1.1; }
.m-parcel { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.m-vertex { fill: var(--navy-950); stroke: #fff; stroke-width: 1.2; }
.m-vertex-t { font-size: 9.5px; }
.m-stream-bank { fill: none; stroke: rgb(111 179 210 / .18); stroke-width: 10; stroke-linecap: round; }
.m-stream { fill: none; stroke: #8CC8E4; stroke-width: 1.8; stroke-linecap: round; }
.m-stream-t { fill: #9FD3EA; }
.m-road { fill: none; stroke: rgb(255 255 255 / .28); stroke-width: 5; }
.m-north path { fill: #fff; }
.m-stack text { font-size: 10px; }
.m-scale path { fill: none; stroke: rgb(255 255 255 / .6); }
.m-stack path { fill: rgb(255 255 255 / .04); stroke: rgb(255 255 255 / .3); transition: fill .4s, stroke .4s; }
.m-stack .on path { fill: rgb(232 148 106 / .2); stroke: var(--copper-300); }
.m-stack .on text { fill: var(--copper-300); }

.model-legend { list-style: none; padding: 6px 0; margin: 0; border-top: 1px solid rgb(255 255 255 / .14); border-bottom: 1px solid rgb(255 255 255 / .14); display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px 16px; }
.model-legend button { all: unset; cursor: pointer; display: flex; gap: 10px; align-items: baseline; padding: 10px 0; font-size: 14.5px; color: rgb(255 255 255 / .75); transition: color .2s; }
.model-legend button .mono { font-size: 11px; color: rgb(255 255 255 / .65); }
.model-legend button:hover, .model-legend button:focus-visible, .model-legend button[aria-selected="true"] { color: var(--copper-300); }
.model-legend button:focus-visible { outline: 2px solid var(--copper-300); outline-offset: 4px; }
.model-caption { min-height: 3.2em; margin: 14px 0 8px; color: rgb(255 255 255 / .7); max-width: 70ch; }
.model-caption a { color: var(--copper-300); white-space: nowrap; }
@keyframes m-flow { to { stroke-dashoffset: -32; } }
@keyframes m-rotor { from { transform: scaleX(1); } to { transform: scaleX(.35); } }
@keyframes m-wave { 0% { transform: scale(.3); stroke-opacity: .8; } 100% { transform: scale(9); stroke-opacity: 0; } }
@keyframes m-draw { to { stroke-dashoffset: 0; } }
@keyframes m-blink { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* ---------- Planimetría ---------- */
.plan-grid { display: grid; grid-template-columns: 1.08fr 1fr; grid-template-rows: auto auto; gap: 20px; align-items: stretch; }
.plan { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 12px 10px; text-decoration: none; transition: box-shadow .2s; }
.plan:hover { box-shadow: var(--shadow); }
.plan img { width: 100%; height: auto; min-height: 0; flex: 1; object-fit: contain; object-position: top; }
.plan-main { grid-row: span 2; }
.plan .fig { margin-top: 8px; }

@media (max-width: 1080px) {
  .model-legend { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .model-stats { grid-template-columns: 1fr; }
  .model-stats > div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgb(255 255 255 / .14); }
  .model-legend { grid-template-columns: 1fr 1fr; }
  .plan-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .plan-main { grid-row: auto; }
  .m-tag { display: none; }
}
@media (max-width: 480px) {
  .model-legend { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .m-flow, .m-rotor, .ff-path, .ff-rotor, .ff-cone, .field-rec i { animation: none; } }

/* ---------- Páginas legales ---------- */
.legal h2 { font-size: 21px; margin-top: 2em; }
.legal li { margin-bottom: .6em; }
.legal-sign { display: flex; align-items: center; gap: 16px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.legal-iso { width: 52px; height: 52px; color: var(--navy-700); --iso-bg: var(--paper); flex: none; }
.legal-sign p { margin: 0; }
.legal-sign-name { font-weight: 600; color: var(--navy-900); font-size: 17px; }
.legal-sign .mono { color: var(--muted); }

/* ---------- Galería de referencia en servicios ---------- */
.section-tight { padding-top: 0; }
.svc-figure-contain img { object-fit: contain; background: #fff; border: 1px solid var(--line); padding: 8px; }
.ref-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.ref { margin: 0; }
.ref a { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; transition: box-shadow .2s; }
.ref a:hover { box-shadow: var(--shadow); }
.ref img { width: 100%; aspect-ratio: 4/3; object-fit: contain; }

/* ---------- Mapa de cobertura (franja de contacto) ---------- */
.cta-map { position: relative; margin-top: clamp(36px, 5vw, 56px); padding-top: 28px; border-top: 1px solid rgb(255 255 255 / .12); }
.cta-map-cap { margin: 0 0 18px; color: rgb(255 255 255 / .75); max-width: 70ch; }
.cta-map-cap .mono { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--copper-300); margin-right: 10px; }
.cl-wrap { display: grid; grid-template-columns: 700fr 334fr; align-items: center; }
.cl-map, .cl-inset { display: block; width: 100%; height: auto; overflow: visible; }
.cl-dots circle { fill: #fff; opacity: .3; animation: cl-sweep 7s ease-in-out infinite; animation-delay: calc(var(--d) * 3.2s); }
.cl-dots circle.ar { fill: var(--copper-300); opacity: 1; animation: none; }
.cl-band { fill: rgb(232 148 106 / .07); stroke: rgb(232 148 106 / .4); stroke-dasharray: 3 5; }
.cl-pulse { fill: none; stroke: var(--copper-300); stroke-width: 1.5; animation: cl-pulse 2.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.cl-pulse-2 { animation-delay: 1.3s; }
.cl-core { fill: var(--copper-300); stroke: var(--navy-950); stroke-width: 2; }
.cl-label { font: 500 11px var(--mono); letter-spacing: .14em; fill: var(--copper-300); }
.cl-sub { font: 13px var(--font); fill: rgb(255 255 255 / .65); }
.cl-ticks path { stroke: rgb(255 255 255 / .25); fill: none; }
.cl-ticks text { font: 10px var(--mono); fill: rgb(255 255 255 / .45); text-anchor: middle; }
.cl-end { font: 10px var(--mono); letter-spacing: .14em; fill: rgb(255 255 255 / .45); }
@keyframes cl-sweep { 0%, 30%, 100% { opacity: .28; } 12% { opacity: .95; } }
@keyframes cl-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(5.5); opacity: 0; } }
.cl-lead { fill: none; stroke: rgb(232 148 106 / .5); stroke-width: 1; stroke-dasharray: 3 4; }
.cl-box rect { fill: rgb(255 255 255 / .02); stroke: rgb(232 148 106 / .5); stroke-width: 1; }
.cl-north { fill: rgb(255 255 255 / .6); }
.cl-rdots circle { fill: #fff; opacity: .2; }
.cl-city circle { fill: var(--navy-950); stroke: #fff; stroke-width: 1.3; }
.cl-city text { font: 10px var(--font); fill: rgb(255 255 255 / .8); }
.cl-capital text { font: 600 10.5px var(--mono); letter-spacing: .1em; fill: var(--copper-300); }
@media (max-width: 760px) {
  .cl-wrap { grid-template-columns: 1fr; gap: 20px; }
  .cl-lead { display: none; }
  .cl-inset { max-width: 420px; }
}
@media (max-width: 480px) { .cl-ticks text, .cl-end { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .cl-dots circle, .cl-pulse { animation: none; } }

/* ---------- Láminas técnicas de las guías ---------- */
.fx { display: block; width: 100%; height: auto; background: #fff; border-radius: var(--radius); font-family: var(--mono); }
.fx-frame { fill: none; stroke: var(--navy-700); stroke-width: 1.2; }
.fx-frame-in { fill: none; stroke: var(--navy-700); stroke-width: .5; }
.fx-title rect { fill: none; stroke: var(--navy-700); }
.fx-title path { stroke: var(--navy-700); stroke-width: .6; fill: none; }
.fx-t1 { font-size: 14px; font-weight: 600; fill: var(--navy-900); letter-spacing: .06em; }
.fx-t2 { font-size: 9px; fill: var(--muted); letter-spacing: .08em; }
.fx-h { font-size: 12px; font-weight: 500; fill: var(--navy-900); letter-spacing: .12em; }
.fx-li { font-size: 13px; font-family: var(--font); font-weight: 600; fill: var(--navy-900); }
.fx-lc { font-size: 12px; font-family: var(--font); fill: var(--muted); }
.fx-lu { font-size: 9px; fill: var(--muted); letter-spacing: .1em; }
.fx-note { font-size: 10px; fill: var(--muted); letter-spacing: .08em; }
.fx-wall { stroke: var(--navy-700); stroke-width: 2; }
.fx-joint { stroke: #c9c3b8; stroke-width: 1; fill: none; }
.fx-open { fill: #fff; stroke: var(--navy-700); stroke-width: 2; }
.fx-lintel { fill: var(--navy-700); opacity: .85; }
.fx-found { fill: #e9e6e0; stroke: var(--navy-700); stroke-width: 1.5; }
.fx-ground { stroke: var(--navy-700); stroke-width: 1.5; }
.fx-hatch { stroke: var(--navy-500); stroke-opacity: .35; }
.fx-soilbox { stroke: none; }
.fx-crack { fill: none; stroke: var(--copper); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.fx-crack.fx-thin { stroke-width: 2; }
.fx-craze { fill: none; stroke: var(--copper); stroke-width: 1; opacity: .8; }
.fx-leader { stroke: var(--navy-700); stroke-width: .8; stroke-dasharray: 3 3; }
.fx-tag { fill: var(--navy-900); }
.fx-tag-l { font-size: 12px; font-weight: 600; fill: #fff; text-anchor: middle; }
.fx-u-alta { fill: var(--copper); } .fx-u-media { fill: #D9A55A; } .fx-u-baja { fill: #9aa5ae; }
.fx-move { stroke: var(--copper); stroke-width: 2; }
.fx-arrowhead { fill: var(--copper); }
.fx-arrowhead-c { fill: var(--navy-700); }
.fx-plate { fill: #f6f4f0; stroke: var(--navy-700); }
.fx-plate-2 { fill: rgb(255 255 255 / .6); }
.fx-tick { stroke: var(--navy-700); stroke-width: .8; }
.fx-cross { stroke: var(--copper); stroke-width: 1.5; }
.fx-utm path { stroke: var(--navy-500); stroke-opacity: .18; }
.fx-utm text { font-size: 9px; fill: var(--muted); text-anchor: middle; }
.fx-ct { fill: none; stroke: #b9874f; stroke-width: .9; opacity: .75; }
.fx-ct-i { stroke-width: 1.8; opacity: 1; }
.fx-ct-l { font-size: 10px; fill: #8a5a2b; }
.fx-road { fill: none; stroke: var(--navy-700); stroke-width: 1.4; }
.fx-bldg { stroke: var(--navy-700); stroke-width: 1.4; }
.fx-lot { fill: none; stroke: var(--navy-900); stroke-width: 1.6; stroke-dasharray: 14 4 3 4; }
.fx-v { fill: #fff; stroke: var(--navy-900); stroke-width: 1.4; }
.fx-vl { font-size: 10px; fill: var(--navy-900); letter-spacing: .06em; }
.fx-dim { font-size: 11px; fill: var(--navy-900); }
.fx-flight { fill: none; stroke: var(--copper); stroke-width: 1; stroke-dasharray: 6 4; opacity: .8; }
.fx-photo { fill: var(--copper); }
.fx-pt { fill: var(--navy-900); }
.fx-ptl { font-size: 9px; fill: var(--navy-700); }
.fx-st { fill: none; stroke: var(--navy-900); stroke-width: 1.6; }
.fx-sight { stroke: var(--navy-500); stroke-width: .9; stroke-dasharray: 2 4; }
.fx-gnss { fill: #fff; stroke: var(--navy-900); stroke-width: 1.6; }
.fx-north { fill: var(--navy-900); }
.fx-sb { fill: var(--navy-900); stroke: var(--navy-900); }
.fx-sb-w { fill: #fff; }

.footer-addr { display: flex; align-items: center; gap: 10px; margin-top: 16px; color: rgb(255 255 255 / .82); }
.footer-addr svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--copper-300); stroke-width: 1.8; }

/* ---------- Pines sobre la imagen satelital de la portada ---------- */
.slide.no-zoom { transform: none; }
.hero-pins { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.hero-pins.is-active { opacity: 1; visibility: visible; transition: opacity 1s .6s, visibility 0s; }
.hp-city circle { fill: var(--navy-950); stroke: #fff; stroke-width: 2.6; }
.hp-city text { font: 500 21px var(--font); fill: #fff; paint-order: stroke; stroke: rgb(11 28 42 / .75); stroke-width: 5px; stroke-linejoin: round; }
.hp-core { fill: var(--copper-300); stroke: var(--navy-950); stroke-width: 3; }
.hp-pulse { fill: none; stroke: var(--copper-300); stroke-width: 2.5; animation: cl-pulse 2.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.hp-pulse-2 { animation-delay: 1.3s; }
.hp-capital text { font: 600 22px var(--mono); letter-spacing: .12em; fill: var(--copper-300); paint-order: stroke; stroke: rgb(11 28 42 / .8); stroke-width: 5px; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .hp-pulse { animation: none; } }

/* ---------- Quiénes somos ---------- */
.firma-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.firma .lead { color: var(--ink); }
.firma p:not(.eyebrow):not(.lead) { color: var(--muted); max-width: 60ch; }
.firma-fig { margin: 0; }
.firma-fig svg { display: block; width: 100%; height: auto; }
.fm-halo { fill: #fff; stroke: var(--line); }
.fm-iso { color: var(--navy-700); --iso-bg: #fff; }
.fm-iso .iso-node { fill: #fff; }
.fm-lead { fill: none; stroke: var(--copper); stroke-width: 1; stroke-dasharray: 3 3; }
.fm-dot { fill: var(--copper); }
.fm-n { font: 500 14px var(--mono); letter-spacing: .14em; fill: var(--copper-700); }
.fm-d { font: 600 18px var(--font); fill: var(--navy-900); }
@media (max-width: 860px) { .firma-grid { grid-template-columns: 1fr; } }

.fx-pat { fill: none; stroke: var(--navy-500); stroke-opacity: .45; stroke-width: 1; }
.fx-patd { fill: var(--navy-500); fill-opacity: .45; }
.fx-stratum { stroke: var(--navy-700); stroke-width: .8; }
.fx-sline { stroke: var(--navy-700); stroke-width: 1.2; }
.fx-stag { font-size: 13px; font-weight: 600; fill: var(--navy-900); }
.fx-layer { fill: none; stroke: var(--navy-900); stroke-width: 1; }
.fx-layer-r { stroke-width: 1.8; }
.fx-conn { stroke: var(--navy-500); stroke-opacity: .5; stroke-width: .8; stroke-dasharray: 3 3; fill: none; }
.fx-foot { stroke: var(--copper); stroke-width: .9; stroke-dasharray: 5 4; fill: none; }
.fx-sat { fill: #fff; stroke: var(--navy-900); stroke-width: 1.4; }
.fx-sat-p { fill: #9FC3DC; stroke: var(--navy-900); stroke-width: 1; }
.fx-model { stroke: var(--copper); stroke-width: 1.6; fill: none; }
.fx-model-box { fill: #f6f4f0; stroke: var(--navy-700); stroke-width: .8; }
.fx-bus { fill: none; stroke: var(--copper); stroke-width: 1.4; }
.fx-li-s { font-size: 12px; }
.fx-band { fill: var(--navy-500); fill-opacity: .08; }
.fx-axis { stroke: var(--navy-700); stroke-width: 1; fill: none; }
.fx-sp { fill: none; stroke-width: 2.2; stroke-linejoin: round; }
.fx-sp-veg { stroke: #3F8F55; } .fx-sp-soil { stroke: #B5874F; } .fx-sp-water { stroke: #3F7FAE; }
.fx-sp-l { font-size: 10px; font-family: var(--mono); }
.fx-sp-veg-t { fill: #2E6A41; }
.fx-axis-l { stroke: var(--navy-500); stroke-opacity: .35; stroke-dasharray: 12 4 2 4; fill: none; }
.fx-axis-c { fill: #fff; stroke: var(--navy-900); stroke-width: 1.2; }
.fx-axis-n { font-size: 12px; font-weight: 600; fill: var(--navy-900); text-anchor: middle; }
.fx-elem { fill: #e9e6e0; stroke: var(--navy-700); stroke-width: 1.2; }
.fx-col { stroke: var(--navy-900); stroke-width: 5; fill: none; }
.fx-beam { stroke: var(--navy-900); stroke-width: 7; fill: none; }
.fx-beam-hl { stroke: var(--copper); stroke-width: 7; fill: none; }
.fx-q { fill: none; stroke: var(--navy-500); stroke-width: 1; }
.fx-load { stroke: var(--copper); stroke-width: 2; fill: none; }
.fx-load-b { stroke-width: 2.6; }
.fx-sup { fill: #fff; stroke: var(--navy-900); stroke-width: 1.2; }
.fx-base { stroke: var(--navy-700); stroke-width: 1; fill: none; }
.fx-diag-m { fill: rgb(194 90 36 / .14); stroke: var(--copper); stroke-width: 1.6; }
.fx-diag-v { fill: rgb(63 127 174 / .14); stroke: #3F7FAE; stroke-width: 1.6; }
.fx-dl { font-size: 11px; font-family: var(--mono); fill: var(--navy-900); }
.fx-sec { fill: #f1eee8; stroke: var(--navy-900); stroke-width: 1.4; }
.fx-sec-e { fill: none; stroke: var(--copper); stroke-width: 1.4; }
.fx-bar { fill: var(--navy-900); }
.fx-ok { fill: #2E7D4F; font-weight: 600; }
.fx-num { fill: var(--copper); font-family: var(--mono); font-weight: 600; }
.fx-grid { stroke: var(--navy-500); stroke-opacity: .12; fill: none; }
.fx-spec-c { fill: none; stroke: #8796a3; stroke-width: 1.4; }
.fx-spec-d { stroke: var(--copper); stroke-width: 3; }
.fx-spec-l { font-size: 11px; font-family: var(--mono); font-weight: 600; fill: #6b7884; }
.fx-spec-dl { fill: var(--copper); }
.fx-period { stroke: var(--navy-900); stroke-width: 1; stroke-dasharray: 4 4; fill: none; }
.fx-period-p { fill: #fff; stroke: var(--copper); stroke-width: 2.4; }
.fx-zone { stroke: #fff; stroke-width: 2; }
.fx-zone-0 { fill: rgb(194 90 36 / .16); } .fx-zone-1 { fill: rgb(217 165 90 / .16); } .fx-zone-2 { fill: rgb(135 150 163 / .14); }
.fx-sea { stroke: #3F7FAE; stroke-width: 3; }
.fx-profile { fill: none; stroke: var(--navy-900); stroke-width: 1.8; stroke-linejoin: round; }
.fx-row-bg { fill: rgb(194 90 36 / .1); }
.fx-ghost-l { fill: none; stroke: var(--navy-500); stroke-opacity: .45; stroke-dasharray: 4 4; } .fx-sp-soil-t { fill: #8A5A2B; } .fx-sp-water-t { fill: #24578A; }
.fx-depth path { stroke: var(--navy-700); stroke-width: 1; fill: none; }
.fx-depth text { font-size: 10px; fill: var(--muted); }
.fx-nf { stroke: #2f7fb5; stroke-width: 1.6; stroke-dasharray: 8 4; fill: none; }
.fx-nf-sym { fill: #2f7fb5; }
.fx-proj { fill: rgb(27 59 84 / .04); stroke: var(--navy-500); stroke-dasharray: 5 4; }
.fx-footing { fill: #d9d4cb; stroke: var(--navy-900); stroke-width: 1.4; }
.fx-bulb { fill: none; stroke: var(--copper); stroke-width: 1; stroke-dasharray: 3 3; }
.fx-pit { fill: rgb(194 90 36 / .12); stroke: var(--copper); stroke-width: 1.4; }
.fx-bore { stroke: var(--navy-900); stroke-width: 3; }
.fx-bore-t { stroke: var(--navy-900); stroke-width: 1.4; }
.fx-spt { font-size: 10px; fill: var(--navy-900); }
.fx-geo path { stroke: var(--navy-700); stroke-width: 1.2; }
.fx-geo circle { fill: var(--copper); }
.fx-dimline { stroke: var(--copper); stroke-width: 1.2; fill: none; }

/* ---------- Visor de imágenes con zoom ---------- */
.zoomable { cursor: zoom-in; }
.zoomable:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; }
.ref a, .plan, .svc-figure, .article-figure, .firma-fig { position: relative; }
.ref a::after, .plan::after, .svc-figure::after, .article-figure::after, .firma-fig::after {
  content: ""; position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; pointer-events: none;
  background: rgb(11 28 42 / .72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center / 18px no-repeat;
  opacity: 0; transition: opacity .2s;
}
.ref a:hover::after, .plan:hover::after, .svc-figure:hover::after, .article-figure:hover::after, .firma-fig:hover::after { opacity: 1; }
@media (hover: none) { .ref a::after, .plan::after, .svc-figure::after, .article-figure::after, .firma-fig::after { opacity: .85; width: 30px; height: 30px; } }
.zm-open, .zm-open body { overflow: hidden; }
.zm { position: fixed; inset: 0; z-index: 200; background: #08121c; display: flex; flex-direction: column; }
.zm[hidden] { display: none; }
.zm-stage { flex: 1; position: relative; overflow: hidden; display: grid; place-items: center; touch-action: none; cursor: zoom-in; }
.zm.is-zoomed .zm-stage { cursor: grab; }
.zm.is-zoomed .zm-stage:active { cursor: grabbing; }
.zm-content { transform-origin: center center; will-change: transform; display: grid; place-items: center; max-width: 94vw; max-height: calc(100svh - 92px); }
.zm-content img { display: block; max-width: 94vw; max-height: calc(100svh - 92px); width: auto; height: auto; object-fit: contain; user-select: none; background: #fff; }
.zm-content .zm-svg { display: block; width: min(94vw, calc((100svh - 92px) * 1.66)); height: auto; max-height: calc(100svh - 92px); background: #fff; border-radius: 4px; }
.zm-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--gutter); border-top: 1px solid rgb(255 255 255 / .12); }
.zm-cap { margin: 0; color: rgb(255 255 255 / .75); font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zm-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.zm-tools button { all: unset; cursor: pointer; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 20px; border: 1px solid rgb(255 255 255 / .25); }
.zm-tools button:hover, .zm-tools button:focus-visible { border-color: var(--copper-300); color: var(--copper-300); }
.zm-tools .zm-close { margin-left: 8px; background: rgb(255 255 255 / .08); }
.zm-level { min-width: 52px; text-align: center; color: rgb(255 255 255 / .7); font-family: var(--mono); font-size: 12px; }
@media (max-width: 600px) { .zm-cap { display: none; } .zm-bar { justify-content: center; } }