:root{
    --bg:#08090b;
    --bg-alt:#0e1013;
    --surface:#15171b;
    --surface-2:#1b1e23;
    --border: rgba(255,255,255,0.09);
    --border-strong: rgba(255,255,255,0.16);
    --ink:#f2f3f5;
    --muted:#98a0a8;
    --muted-2:#6f7680;
    --steel:#c7ccd2;
    --blue:#2f7fe0;
    --blue-light:#5b9cf0;
    --blue-dim: rgba(47,127,224,0.14);
    --blue-dim-strong: rgba(47,127,224,0.28);
    --radius: 3px;
    --font-display: 'Space Grotesk', 'Arial Narrow', Arial, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  html{ scroll-padding-top: 84px; scroll-behavior: smooth; }
  *,*::before,*::after{ box-sizing: inherit; }
  body{
    margin:0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ color: inherit; }
  .wrap{ max-width: 1180px; margin: 0 auto; padding: 0 28px; }
  section{ position: relative; }
  ::selection{ background: var(--blue-dim-strong); color: #fff; }
  :focus-visible{ outline: 2px solid var(--blue-light); outline-offset: 3px; }

  /* ---------- Header ---------- */
  header{
    position: sticky; top:0; z-index: 50;
    padding-top: env(safe-area-inset-top, 0px);
    background: rgba(8,9,11,0.86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    height:76px;
  }
  .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
  .brand img{ height:34px; width:auto; }
  .brand-word{ font-family: var(--font-display); font-weight:700; font-size:1.28rem; letter-spacing:-0.01em; }
  .brand-word b{ color: var(--blue); font-weight:700; }
  nav.links{ display:flex; align-items:center; gap:34px; }
  nav.links a{ text-decoration:none; color: var(--steel); font-size:0.95rem; font-weight:500; transition: color .15s ease; }
  nav.links a:hover{ color: var(--ink); }
  .nav-right{ display:flex; align-items:center; gap:18px; }
  .lang-toggle{
    display:flex; border:1px solid var(--border-strong); border-radius: 999px; overflow:hidden;
    font-family: var(--font-display); font-size:0.78rem; font-weight:600;
  }
  .lang-toggle button{
    background:transparent; border:none; color: var(--muted); padding:7px 13px; cursor:pointer;
    font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing:.02em;
  }
  .lang-toggle button.active{ background: var(--blue); color:#fff; }
  .btn{
    display:inline-flex; align-items:center; gap:8px; justify-content:center;
    padding: 13px 22px; border-radius: var(--radius); font-weight:600; font-size:0.95rem;
    text-decoration:none; cursor:pointer; border:1px solid transparent; transition: all .15s ease;
    font-family: var(--font-body);
  }
  .btn-primary{ background: var(--blue); color:#fff; }
  .btn-primary:hover{ background: var(--blue-light); }
  .btn-ghost{ background:transparent; color: var(--ink); border-color: var(--border-strong); }
  .btn-ghost:hover{ border-color: var(--blue); color: var(--blue-light); }
  .btn-sm{ padding: 9px 16px; font-size: 0.86rem; }
  .menu-toggle{ display:none; background:none; border:none; color:var(--ink); }

  /* ---------- Hero ---------- */
  .hero{
    padding: 76px 0 88px;
    border-bottom: 1px solid var(--border);
    overflow:hidden;
  }
  .hero .wrap{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap:56px; align-items:center; }
  .eyebrow-line{ display:flex; align-items:center; gap:10px; color: var(--muted); font-size:0.86rem; margin-bottom:22px; }
  .eyebrow-line .dot{ width:6px; height:6px; background: var(--blue); border-radius:50%; }
  h1{
    font-family: var(--font-display); font-weight:700; letter-spacing:-0.01em;
    font-size: clamp(2.3rem, 4.4vw, 3.5rem); line-height:1.06; margin:0 0 22px;
  }
  h1 .accent{ color: var(--blue); }
  .hero-sub{ color: var(--muted); font-size:1.1rem; max-width: 46ch; margin: 0 0 34px; }
  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 34px; }
  .trust-row{ display:flex; flex-wrap:wrap; gap: 26px; }
  .trust-item{ display:flex; align-items:center; gap:9px; color: var(--steel); font-size:0.88rem; }
  .trust-item svg{ flex-shrink:0; }

  .hero-art{ position:relative; }
  .skyline-frame{
    background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
    border:1px solid var(--border); border-radius: 6px; padding: 34px 30px 0;
    overflow:hidden; height: 420px; position:relative;
  }
  .skyline-frame svg{ width:100%; height:auto; position:absolute; bottom:0; left:0; }
  .skyline-frame .badge{
    position:absolute; top:20px; right:20px; background: var(--surface-2);
    border:1px solid var(--border-strong); border-radius: var(--radius);
    padding: 8px 12px; font-size:0.76rem; color: var(--steel); font-family: var(--font-display); font-weight:600;
  }
  .bld{ transform-origin: bottom; animation: rise .8s cubic-bezier(.2,.8,.2,1) both; }
  .bld.b1{ animation-delay: .05s; } .bld.b2{ animation-delay: .16s; } .bld.b3{ animation-delay: .27s; }
  .bld.b4{ animation-delay: .38s; } .bld.b5{ animation-delay: .46s; } .bld.b6{ animation-delay: .55s; }
  .roofline{ opacity:0; animation: fadeUp .7s ease .7s both; }
  @keyframes rise{ from{ transform: scaleY(0); opacity:0; } to{ transform: scaleY(1); opacity:1; } }
  @keyframes fadeUp{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce){
    .bld, .roofline{ animation: none !important; opacity:1 !important; transform:none !important; }
  }

  /* ---------- Section headers ---------- */
  .section-pad{ padding: 92px 0; }
  .section-head{ max-width: 640px; margin-bottom: 52px; }
  .section-head .kicker{ color: var(--blue-light); font-family: var(--font-display); font-weight:600; font-size:0.86rem; margin-bottom:12px; }
  .section-head h2{ font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight:700; letter-spacing:-0.01em; margin:0 0 14px; }
  .section-head p{ color: var(--muted); font-size:1.03rem; margin:0; }

  /* ---------- Services ---------- */
  .services{ background: var(--bg-alt); border-bottom:1px solid var(--border); }
  .service-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1px; background: var(--border); border:1px solid var(--border); }
  .service-card{ background: var(--bg-alt); padding: 34px 30px; }
  .service-icon{ width:44px; height:44px; border:1px solid var(--border-strong); border-radius: var(--radius); display:flex; align-items:center; justify-content:center; margin-bottom:20px; color: var(--blue-light); }
  .service-card h3{ font-family: var(--font-display); font-size:1.12rem; font-weight:600; margin: 0 0 10px; }
  .service-card p{ color: var(--muted); font-size:0.93rem; margin:0; }
  .service-card .more{ display:inline-block; margin-top:14px; color: var(--blue-light); font-size:0.9rem; font-weight:600; text-decoration:none; }
  .service-card .more:hover{ text-decoration:underline; }

  /* ---------- Drone ---------- */
  .drone{ border-bottom:1px solid var(--border); }
  .drone .service-card{ background: var(--bg); }
  .form-status{ margin-top:12px; font-size:0.9rem; text-align:center; min-height:1.2em; }
  .form-status.ok{ color:#5fd08a; } .form-status.err{ color:#f08a8a; }
  .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

  /* ---------- Why / for-whom ---------- */
  .why .wrap{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; }
  .diff-list{ list-style:none; margin: 0; padding:0; display:flex; flex-direction:column; gap: 22px; }
  .diff-list li{ display:flex; gap:14px; align-items:flex-start; }
  .diff-list .check{ flex-shrink:0; width:22px; height:22px; border-radius:50%; background: var(--blue-dim); color: var(--blue-light); display:flex; align-items:center; justify-content:center; margin-top:2px; }
  .diff-list strong{ display:block; font-size:1rem; margin-bottom:3px; }
  .diff-list span{ color: var(--muted); font-size:0.92rem; }

  .property-index{ border:1px solid var(--border); border-radius:6px; overflow:hidden; }
  .property-row{ display:flex; align-items:center; gap:18px; padding: 20px 24px; border-bottom:1px solid var(--border); }
  .property-row:last-child{ border-bottom:none; }
  .property-row .num{ font-family: var(--font-display); color: var(--muted-2); font-weight:600; font-size:0.85rem; width:24px; }
  .property-row .icon{ color: var(--blue-light); flex-shrink:0; }
  .property-row .label{ font-weight:600; font-size:0.98rem; }
  .property-row .sub{ color: var(--muted); font-size:0.85rem; margin-top:2px; }

  /* ---------- Area band ---------- */
  .area-band{ background: var(--surface); border-bottom:1px solid var(--border); padding: 46px 0; }
  .area-band .wrap{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; justify-content:space-between; }
  .area-left{ display:flex; align-items:center; gap:16px; }
  .area-left svg{ color: var(--blue-light); flex-shrink:0; }
  .area-left p{ margin:0; color: var(--steel); font-size:1rem; max-width: 56ch; }
  .area-left strong{ color: var(--ink); }

  /* ---------- Contact ---------- */
  .contact{ background: linear-gradient(180deg, var(--bg) 0%, #0a1420 100%); }
  .contact .wrap{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; }
  .contact-info h2{ font-family: var(--font-display); font-size: clamp(1.7rem,3vw,2.3rem); font-weight:700; letter-spacing:-0.01em; margin:0 0 16px; }
  .contact-info p{ color: var(--muted); font-size:1.02rem; margin:0 0 30px; max-width:44ch; }
  .contact-methods{ display:flex; flex-direction:column; gap:18px; }
  .contact-method{ display:flex; align-items:center; gap:14px; text-decoration:none; color: var(--ink); }
  .contact-method .m-icon{ width:42px; height:42px; border:1px solid var(--border-strong); border-radius:50%; display:flex; align-items:center; justify-content:center; color: var(--blue-light); flex-shrink:0; }
  .contact-method .m-label{ font-size:0.8rem; color: var(--muted); }
  .contact-method .m-value{ font-weight:600; font-size:1.02rem; }

  form.quote{ background: var(--surface); border:1px solid var(--border); border-radius:8px; padding: 32px; }
  form.quote .field{ margin-bottom:18px; }
  form.quote label{ display:block; font-size:0.84rem; color: var(--muted); margin-bottom:7px; }
  form.quote input, form.quote select, form.quote textarea{
    width:100%; background: var(--bg-alt); border:1px solid var(--border-strong); border-radius: var(--radius);
    color: var(--ink); padding: 12px 14px; font-family: var(--font-body); font-size:0.95rem;
  }
  form.quote textarea{ resize: vertical; min-height:90px; }
  form.quote input:focus, form.quote select:focus, form.quote textarea:focus{ border-color: var(--blue); }
  form.quote button{ width:100%; margin-top:6px; }
  .form-note{ font-size:0.78rem; color: var(--muted-2); margin-top:12px; text-align:center; }

  /* ---------- Footer ---------- */
  footer{ padding: 44px 0 calc(34px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--border); }
  footer .wrap{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; }
  .footer-brand{ display:flex; align-items:center; gap:10px; }
  .footer-brand img{ height:22px; width:auto; }
  .footer-brand span{ font-family: var(--font-display); font-weight:600; font-size:0.95rem; color: var(--steel); }
  footer .fine{ color: var(--muted-2); font-size:0.82rem; }
  footer .foot-links{ display:flex; gap:22px; flex-wrap:wrap; }
  footer .foot-links a{ color: var(--muted); font-size:0.86rem; text-decoration:none; }
  footer .foot-links a:hover{ color: var(--ink); }

  /* ---------- Responsive ---------- */
  @media (max-width: 900px){
    nav.links{ display:none; }
    .hero .wrap{ grid-template-columns: 1fr; }
    .hero-art{ order:-1; }
    .service-grid{ grid-template-columns: 1fr 1fr; }
    .why .wrap{ grid-template-columns:1fr; gap:40px; }
    .contact .wrap{ grid-template-columns:1fr; gap:40px; }
    footer .wrap{ flex-direction:column; align-items:flex-start; }
  }
  @media (max-width: 560px){
    .wrap{ padding: 0 20px; }
    .nav{ gap:12px; }
    .brand{ gap:8px; min-width:0; flex-shrink:1; }
    .brand img{ height:28px; }
    .brand-word{ font-size:1.12rem; white-space:nowrap; }
    .nav-right{ gap:10px; flex-shrink:0; }
    .nav-right .btn-sm{ display:none; }
    .lang-toggle button{ padding:6px 10px; }
    .service-grid{ grid-template-columns: 1fr; }
    .nav{ height:68px; }
    .hero{ padding: 46px 0 56px; }
    .section-pad{ padding: 64px 0; }
    .area-band .wrap{ flex-direction:column; align-items:flex-start; }
    .skyline-frame{ height:300px; }
  }

  .page-hero{ padding: 70px 0 60px; border-bottom:1px solid var(--border); }
  .page-hero h1{ max-width: 20ch; }
  .crumbs{ font-size:0.82rem; color: var(--muted-2); margin-bottom:18px; }
  .crumbs a{ color: var(--muted); text-decoration:none; }
  .inc-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:1px; background: var(--border); border:1px solid var(--border); }
  .inc{ background: var(--bg-alt); padding: 26px 26px; }
  .inc h3{ font-family: var(--font-display); font-size:1.05rem; margin:0 0 8px; }
  .inc p{ color: var(--muted); font-size:0.93rem; margin:0; }
  .chips{ display:flex; flex-wrap:wrap; gap:10px; }
  .chip{ border:1px solid var(--border-strong); border-radius:999px; padding:8px 14px; font-size:0.9rem; color: var(--steel); }
  .faq details{ border-bottom:1px solid var(--border); padding: 18px 0; }
  .faq summary{ cursor:pointer; font-weight:600; font-size:1.02rem; list-style:none; }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary::after{ content:"+"; float:right; color: var(--blue-light); font-weight:700; }
  .faq details[open] summary::after{ content:"–"; }
  .faq p{ color: var(--muted); margin: 10px 0 0; }
  .cta-band{ background: linear-gradient(180deg, var(--bg) 0%, #0a1420 100%); padding: 72px 0; border-top:1px solid var(--border); }
  .cta-band h2{ font-family: var(--font-display); font-size: clamp(1.6rem,3vw,2.1rem); margin:0 0 12px; }
  .cta-band p{ color: var(--muted); margin:0 0 26px; max-width:52ch; }
  @media (max-width: 700px){ .inc-grid{ grid-template-columns:1fr; } }

  /* ---------- Service pages: foto de fondo suave ---------- */
  .page-hero{ position:relative; overflow:hidden; }
  .svc-hero{ display:block; }
  .svc-hero > div{ position:relative; z-index:1; }
  .svc-figure{ position:absolute; inset:0; margin:0; z-index:0; pointer-events:none; }
  .svc-figure img{ display:block; width:100%; height:100%; object-fit:cover; opacity:.22;
    filter: grayscale(.35) saturate(.8) brightness(.85);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 35%, #000 75%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 35%, #000 75%); }
  .svc-figure::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(47,127,224,.06), transparent 60%); }
  @media (max-width: 900px){
    .svc-figure img{ opacity:.16;
      -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 60%, transparent 100%);
              mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 60%, transparent 100%); }
  }
  .chip-link{ text-decoration:none; transition: border-color .2s, color .2s; }
  .chip-link:hover{ border-color: var(--blue); color:#fff; }