/* ===== TIPOGRAFIAS PROPIAS — generado, no editar a mano.
   Reemplaza a la hoja externa de Google Fonts. ===== */

/* Fraunces 400 italic — latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fraunces-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

/* Fraunces 400 italic — latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fraunces-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

/* Fraunces 500 italic — latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/fraunces-500-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

/* Fraunces 500 italic — latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/fraunces-500-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

/* Fraunces 400 normal — latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fraunces-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

/* Fraunces 400 normal — latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fraunces-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

/* Fraunces 500 normal — latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/fraunces-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

/* Fraunces 500 normal — latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/fraunces-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

/* Fraunces 600 normal — latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/fraunces-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

/* Fraunces 600 normal — latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/fraunces-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

/* IBM Plex Mono 400 normal — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

/* IBM Plex Mono 400 normal — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

/* IBM Plex Mono 500 normal — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

/* IBM Plex Mono 500 normal — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

/* Inter 400 normal — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

/* Inter 400 normal — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

/* Inter 500 normal — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

/* Inter 500 normal — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

/* Inter 600 normal — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

/* Inter 600 normal — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

/* Inter 700 normal — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

/* Inter 700 normal — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

/* Hoja de estilos principal de Sinergius */
/* ============================================================
     1. DESIGN TOKENS — cooperative / editorial identity
     Sage-green backdrop, forest-green accent, serif display with
     italic emphasis, warm and institutional rather than "startup SaaS".
     ============================================================ */
  :root{
    /* Color */
    --bg:            #F4F7F1;
    --bg-alt:        #EBF0E5;
    --bg-deep:       #1C3320;
    --ink:           #1A1F1A;
    --ink-soft:      #57634F;
    --ink-faint:     #93A08B;
    --line:          #DDE5D4;
    --line-soft:     #E9EEE2;
    --primary:       #2F5233;
    --primary-deep:  #1E3821;
    --primary-tint:  #E2EBDA;
    --blue-accent:   #3E77C4;
    --blue-soft:     #E7EEF8;
    --yellow-accent: #E3AE3F;
    --green:         #4C8556;
    --green-soft:    #E3EEDB;
    --white:         #FFFFFF;

    /* Type */
    --font-display: 'Fraunces', serif;
    --font-body:    'Inter', sans-serif;
    --font-mono:    'IBM Plex Mono', monospace;

    /* Layout */
    --max-w: 1200px;
    --pad: clamp(20px, 5vw, 64px);
    --section-space: clamp(72px, 10vw, 128px);
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;

    /* Motion */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* ============================================================
     2. RESET
     ============================================================ */
  *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  }
  body{
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
    overflow-x:hidden;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
  ul{ list-style:none; }
  :focus-visible{ outline:2px solid var(--primary); outline-offset:3px; border-radius:4px; }

  h1,h2,h3{ font-family:var(--font-display); color:var(--ink); letter-spacing:-0.01em; font-weight:500; }
  h1 em, h2 em, h3 em{ font-style:italic; font-weight:500; color:var(--primary); }
  .container{ max-width:var(--max-w); margin:0 auto; padding-inline:var(--pad); }
  section{ padding-block:var(--section-space); position:relative; }

  /* Reusable eyebrow — small caps label, letter-spaced, sans — matches the
     reference identity's quiet "QUIÉNES SOMOS" style rather than a mono/UI tag. */
  .eyebrow{
    display:inline-block;
    font-family:var(--font-body); font-size:12.5px; font-weight:600; letter-spacing:0.16em;
    text-transform:uppercase; color:var(--primary); margin-bottom:20px;
  }

  .section-head{ max-width:640px; margin-bottom:56px; }
  .section-head.center{ margin-inline:auto; text-align:center; }
  .section-head h2{ font-size:clamp(28px, 3.6vw, 44px); line-height:1.15; }
  .section-head p.lead{ margin-top:18px; color:var(--ink-soft); font-size:17px; line-height:1.65; }

  /* Dot-grid texture — the recurring signature motif, echoing the reference's
     soft stippled backdrop; used behind hero-style sections. */
  .dot-texture{
    position:absolute; inset:0; pointer-events:none;
    background-image:radial-gradient(rgba(26,31,26,0.16) 1px, transparent 1.4px);
    background-size:22px 22px;
    -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 0%, #000 40%, transparent 92%);
            mask-image:radial-gradient(ellipse 75% 65% at 50% 0%, #000 40%, transparent 92%);
  }
  .dot-texture.light{
    background-image:radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1.4px);
  }

  /* ============================================================
     3. BUTTONS — solid pill primary, outline pill secondary
     ============================================================ */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 28px; border-radius:100px; font-weight:600; font-size:15px;
    transition:transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease);
    white-space:nowrap;
  }
  .btn-primary{
    background:var(--primary);
    color:#fff;
    box-shadow:0 10px 24px -10px rgba(47,82,51,0.55);
  }
  .btn-primary:hover{ background:var(--primary-deep); transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(47,82,51,0.6); }
  .btn-ghost{
    background:transparent; color:var(--ink); border:1.5px solid var(--line);
  }
  .btn-ghost:hover{ border-color:var(--primary); color:var(--primary); transform:translateY(-2px); }
  .btn-lg{ padding:19px 40px; font-size:16.5px; }

  /* ============================================================
     4. NAV
     ============================================================ */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:18px var(--pad);
    display:flex; align-items:center; justify-content:space-between;
    transition:background 0.4s var(--ease), box-shadow 0.4s var(--ease), padding 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
  }
  .nav.scrolled{
    background:rgba(244,247,241,0.8);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    box-shadow:0 1px 0 var(--line);
    padding-block:12px;
  }
  .logo{
    font-family:var(--font-display); font-weight:600; font-size:21px; letter-spacing:-0.01em;
    display:flex; align-items:center; gap:10px;
  }
  .logo-mark{
    height:28px; width:auto; flex-shrink:0; display:flex; align-items:center;
  }
  .logo-mark img{ height:100%; width:auto; display:block; }
  .nav-links{ display:flex; align-items:center; gap:8px; }
  .nav-links a{
    font-size:14.5px; font-weight:500; color:var(--ink-soft);
    transition:color 0.25s var(--ease); padding:8px 16px; border-radius:100px;
  }
  .nav-links a:hover{ color:var(--ink); }
  .nav-links a.active{ color:var(--ink); text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--primary); }
  .nav-cta{ display:flex; align-items:center; gap:18px; }
  .nav-cta .btn-ghost{ border-color:var(--line); padding:11px 24px; font-size:14px; }

  @media (max-width:860px){
    .nav-links{ display:none; }
  }

  /* ============================================================
     5. SCROLL-REVEAL UTILITY
     ============================================================ */
  .reveal{
    opacity:0; transform:translateY(28px);
    transition:opacity 0.9s var(--ease), transform 0.9s var(--ease);
  }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }
  .reveal-delay-1{ transition-delay:0.08s; }
  .reveal-delay-2{ transition-delay:0.16s; }
  .reveal-delay-3{ transition-delay:0.24s; }
  .reveal-delay-4{ transition-delay:0.32s; }

  /* ============================================================
     6. HERO
     ============================================================ */
  .hero{
    padding-top:clamp(140px, 18vw, 200px);
    padding-bottom:var(--section-space);
    overflow:hidden;
    background:radial-gradient(ellipse 90% 60% at 30% 0%, #EEF3E7, var(--bg) 65%);
  }
  .hero-grid{
    display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center;
    position:relative; z-index:1;
  }
  .hero-copy h1{
    font-size:clamp(36px, 4.8vw, 62px); line-height:1.1; font-weight:500;
  }
  .hero-copy p.lead{
    margin-top:26px; font-size:18px; line-height:1.65; color:var(--ink-soft); max-width:480px;
  }
  .hero-actions{ display:flex; gap:14px; margin-top:38px; flex-wrap:wrap; }
  .hero-trust{
    margin-top:44px; display:flex; align-items:center; gap:14px;
    font-size:12.5px; letter-spacing:0.04em; color:var(--ink-faint); font-weight:500;
  }
  .hero-trust .dot-row{ display:flex; gap:5px; }
  .hero-trust .dot-row span{ width:5px; height:5px; border-radius:50%; background:var(--ink-faint); display:block; }

  /* Hero mockup — an original illustrative "territorial panel" UI */
  .hero-visual{ position:relative; }
  .mock-window{
    background:var(--white);
    border-radius:var(--radius-lg);
    border:1px solid var(--line);
    box-shadow:0 30px 70px -24px rgba(28,51,32,0.18), 0 4px 14px -4px rgba(28,51,32,0.06);
    overflow:hidden;
    transform:rotate(0.4deg);
    animation:float 7s ease-in-out infinite;
  }
  @keyframes float{
    0%,100%{ transform:translateY(0) rotate(0.4deg); }
    50%{ transform:translateY(-12px) rotate(0deg); }
  }
  .mock-topbar{
    display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--line-soft);
  }
  .mock-topbar .dots{ display:flex; gap:6px; }
  .mock-topbar .dots span{ width:9px; height:9px; border-radius:50%; background:var(--line); }
  .mock-topbar .title{ margin-left:8px; font-size:11.5px; color:var(--ink-faint); letter-spacing:0.03em; font-weight:500; }
  .mock-body{ display:grid; grid-template-columns:120px 1fr; min-height:340px; }
  .mock-side{ background:var(--bg-alt); padding:18px 14px; display:flex; flex-direction:column; gap:10px; border-right:1px solid var(--line-soft); }
  .mock-side-item{
    display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-soft); font-weight:500;
    padding:8px 9px; border-radius:8px;
  }
  .mock-side-item.active{ background:var(--white); color:var(--primary); box-shadow:0 1px 3px rgba(28,51,32,0.1); }
  .mock-side-item i{ width:7px; height:7px; border-radius:2px; background:currentColor; opacity:0.7; flex-shrink:0; }
  .mock-map{
    position:relative; padding:20px; overflow:hidden;
    background:
      linear-gradient(rgba(47,82,51,0.05), rgba(47,82,51,0.05)),
      repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(26,31,26,0.045) 28px),
      repeating-linear-gradient(90deg, transparent, transparent 27px, rgba(26,31,26,0.045) 28px);
  }
  .mock-map svg{ position:absolute; inset:0; width:100%; height:100%; }
  .mock-card{
    position:absolute; background:rgba(255,255,255,0.92); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,0.6); border-radius:12px; padding:10px 12px;
    box-shadow:0 12px 30px -10px rgba(28,51,32,0.25);
    font-size:11px;
  }
  .mock-card .label{ color:var(--ink-faint); font-size:9.5px; letter-spacing:0.04em; text-transform:uppercase; font-weight:600; }
  .mock-card .bar-track{ width:74px; height:5px; background:var(--line-soft); border-radius:3px; margin-top:6px; overflow:hidden; }
  .mock-card .bar-fill{ height:100%; border-radius:3px; background:linear-gradient(90deg, var(--primary), var(--green)); }
  .bar-fill--coverage{ width:72%; }
  .mock-status{ color:var(--ink); font-weight:600; margin-top:4px; }
  .mock-card--1{ top:24px; right:22px; animation:drift 6s ease-in-out infinite; }
  .mock-card--2{ bottom:26px; left:34px; animation:drift 6s ease-in-out infinite 1.4s; }
  @keyframes drift{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

  .glow{
    position:absolute; width:420px; height:420px; border-radius:50%;
    background:radial-gradient(circle, rgba(47,82,51,0.14), transparent 70%);
    filter:blur(10px); z-index:-1;
  }
  .glow--hero{ top:-120px; right:-100px; }

  @media (max-width:920px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero-copy p.lead{ max-width:none; }
  }

  /* ============================================================
     7. EL PROBLEMA
     ============================================================ */
  .problem{ background:var(--bg-alt); }
  .problem-layout{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
  .problem-title{ font-size:clamp(28px,3.6vw,42px); line-height:1.2; }
  .problem-copy{ color:var(--ink-soft); font-size:16.5px; line-height:1.7; margin-top:20px; max-width:480px; }
  .scatter{ position:relative; height:340px; }
  .scatter-item{
    position:absolute; background:var(--white); border:1px solid var(--line);
    border-radius:12px; padding:12px 14px; box-shadow:0 10px 24px -10px rgba(28,51,32,0.12);
    font-size:12px; font-weight:500; color:var(--ink-soft);
    display:flex; align-items:center; gap:8px;
    transition:transform 0.4s var(--ease);
  }
  .scatter-dot{ width:16px; height:16px; border-radius:4px; flex-shrink:0; }
  .scatter-dot--blue{ background:var(--blue-accent); }
  .scatter-dot--green{ background:var(--green); }
  .scatter-dot--forest{ background:var(--primary); }
  .scatter-dot--yellow{ background:var(--yellow-accent); }
  .scatter-item:nth-child(1){ top:0; left:6%; transform:rotate(-6deg); }
  .scatter-item:nth-child(2){ top:14%; right:4%; transform:rotate(4deg); }
  .scatter-item:nth-child(3){ top:46%; left:0; transform:rotate(3deg); }
  .scatter-item:nth-child(4){ top:52%; right:12%; transform:rotate(-4deg); }
  .scatter-item:nth-child(5){ bottom:0; left:22%; transform:rotate(5deg); }
  .scatter-center{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:86px; height:86px; border-radius:50%;
    background:linear-gradient(135deg, var(--primary), var(--green));
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 20px 40px -14px rgba(47,82,51,0.5);
  }
  .scatter-center svg{ width:34px; height:34px; }

  .callout{
    font-family:var(--font-display); font-style:italic; font-weight:500;
    font-size:clamp(22px, 2.6vw, 30px);
    line-height:1.35; color:var(--primary); border-left:3px solid var(--primary);
    padding-left:22px; margin-top:28px;
  }

  @media (max-width:920px){
    .problem-layout{ grid-template-columns:1fr; }
    .scatter{ order:-1; height:280px; }
  }

  /* ============================================================
     8. NUESTRA SOLUCIÓN — 3 column
     ============================================================ */
  .solution-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
  .solution-card{
    background:var(--white); border:1.5px solid var(--line); border-radius:var(--radius-md);
    padding:36px 30px; transition:transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  }
  .solution-card:hover{ transform:translateY(-6px); box-shadow:0 24px 48px -20px rgba(28,51,32,0.14); border-color:var(--primary); }
  .icon-tile{
    width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    margin-bottom:22px; background:var(--primary-tint);
  }
  .icon-tile svg{ width:23px; height:23px; }
  .solution-card h3{ font-size:20px; margin-bottom:10px; font-weight:600; font-family:var(--font-body); letter-spacing:-0.01em; }
  .solution-card p{ color:var(--ink-soft); font-size:15px; line-height:1.6; }

  @media (max-width:860px){ .solution-cols{ grid-template-columns:1fr; } }

  /* ============================================================
     9. QUÉ PERMITE HACER — 8 card grid
     ============================================================ */
  .capabilities{ background:var(--bg-alt); }
  .cap-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  .cap-card{
    background:var(--white); border:1.5px solid var(--line); border-radius:var(--radius-sm);
    padding:26px 22px; transition:transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
  }
  .cap-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px -16px rgba(28,51,32,0.16); border-color:var(--primary); }
  .cap-card .icon-tile{ width:42px; height:42px; border-radius:50%; margin-bottom:16px; }
  .cap-card .icon-tile svg{ width:18px; height:18px; }
  .cap-card h4{ font-family:var(--font-body); font-size:15.5px; font-weight:600; color:var(--ink); }

  @media (max-width:920px){ .cap-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .cap-grid{ grid-template-columns:1fr; } }

  /* ============================================================
     10. ÁREAS DE APLICACIÓN — large illustrated cards
     ============================================================ */
  .areas-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
  .area-card{
    position:relative; border-radius:var(--radius-md); overflow:hidden;
    padding:30px; min-height:180px; display:flex; flex-direction:column; justify-content:flex-end;
    border:1.5px solid var(--line);
    transition:transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  }
  .area-card:hover{ transform:translateY(-5px); box-shadow:0 24px 48px -20px rgba(28,51,32,0.16); border-color:var(--primary); }
  .area-card .area-shape{ position:absolute; inset:0; opacity:0.9; }
  .area-card h4{ position:relative; font-size:19px; color:var(--ink); font-weight:600; font-family:var(--font-body); }
  .area-card .tag{
    position:relative; font-size:10.5px; letter-spacing:0.08em; font-weight:600;
    text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px;
  }
  .area-card--catastro{ background:#EDF2E7; }
  .area-card--agua{ background:#E8EFF7; }
  .area-card--electricidad{ background:#FBF3E3; }
  .area-card--alumbrado{ background:#EEF0E4; }
  .area-card--arbolado{ background:#E6EFDF; }
  .area-card--caminos{ background:#F2ECE1; }
  .area-card--vial{ background:#EAEEE3; }
  .area-card--ambiente{ background:#E4EEE0; }

  @media (max-width:760px){ .areas-grid{ grid-template-columns:1fr; } }

  /* ============================================================
     11. RESULTADOS
     ============================================================ */
  .results{ background:var(--bg-alt); }
  .results-layout{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:60px; align-items:center; }
  .results-title{ font-size:clamp(26px,3.2vw,38px); line-height:1.2; margin-bottom:28px; }
  .benefit-list{ display:flex; flex-direction:column; gap:4px; }
  .benefit-row{
    display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--line);
  }
  .benefit-row:last-child{ border-bottom:none; }
  .benefit-check{
    width:26px; height:26px; border-radius:50%; background:var(--green-soft); color:var(--primary);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .benefit-check svg{ width:14px; height:14px; }
  .benefit-row span{ font-size:15.5px; font-weight:500; color:var(--ink); }

  .results-mock{
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
    box-shadow:0 30px 60px -26px rgba(28,51,32,0.18); padding:26px; position:relative;
  }
  .results-mock .rm-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
  .results-mock .rm-head .title{ font-size:11.5px; color:var(--ink-faint); font-weight:600; }
  .rm-chart{ display:flex; align-items:flex-end; gap:10px; height:150px; padding-bottom:14px; border-bottom:1px solid var(--line-soft); }
  .rm-bar{ flex:1; border-radius:6px 6px 0 0; background:linear-gradient(180deg, var(--green), var(--primary)); position:relative; }
  .rm-bar.alt{ background:linear-gradient(180deg, #7FA9E0, var(--blue-accent)); }
  .rm-bar--38{ height:38%; }
  .rm-bar--45{ height:45%; }
  .rm-bar--50{ height:50%; }
  .rm-bar--58{ height:58%; }
  .rm-bar--65{ height:65%; }
  .rm-bar--70{ height:70%; }
  .rm-bar--80{ height:80%; }
  .rm-legend{ display:flex; justify-content:space-between; margin-top:14px; font-size:10px; color:var(--ink-faint); font-weight:600; }

  @media (max-width:920px){ .results-layout{ grid-template-columns:1fr; } .results-mock{ order:-1; } }

  /* ============================================================
     12. POR QUÉ SINERGIUS — 2x2, one featured
     ============================================================ */
  .why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
  .why-card{ background:var(--white); border:1.5px solid var(--line); border-radius:var(--radius-md); padding:40px; transition:border-color 0.3s var(--ease), transform 0.3s var(--ease); }
  .why-card:hover{ transform:translateY(-4px); }
  .why-card.featured{ border-color:var(--primary); background:var(--primary-tint); }
  .why-card .num{ font-family:var(--font-display); font-style:italic; font-size:15px; color:var(--primary); margin-bottom:16px; display:block; }
  .why-card h3{ font-size:21px; margin-bottom:12px; font-weight:600; font-family:var(--font-body); letter-spacing:-0.01em; }
  .why-card p{ color:var(--ink-soft); font-size:15px; line-height:1.65; }

  @media (max-width:760px){ .why-grid{ grid-template-columns:1fr; } }

  /* ============================================================
     13. SOBRE SINERGIUS
     ============================================================ */
  .about{ background:var(--bg-alt); position:relative; overflow:hidden; }
  .about-inner{ max-width:720px; margin:0 auto; text-align:center; position:relative; z-index:1; }
  .about-inner h2{ font-size:clamp(26px, 3.2vw, 40px); line-height:1.25; margin-bottom:28px; }
  .about-inner p{ color:var(--ink-soft); font-size:17px; line-height:1.75; margin-bottom:18px; }

  /* ============================================================
     14. CTA FINAL
     ============================================================ */
  .cta-final{
    background:var(--bg-deep); border-radius:var(--radius-lg);
    margin-inline:var(--pad); padding:clamp(56px,9vw,110px) clamp(24px,6vw,60px);
    text-align:center; position:relative; overflow:hidden;
  }
  .cta-final .glow{ background:radial-gradient(circle, rgba(76,133,86,0.35), transparent 70%); top:-140px; left:50%; transform:translateX(-50%); width:600px; height:600px; }
  .cta-final h2{
    position:relative; color:#fff; font-size:clamp(26px, 4vw, 44px); line-height:1.3; letter-spacing:-0.01em;
  }
  .cta-final h2 em{ color:#B9D9BC; }
  .cta-final h2 span{ display:block; color:rgba(255,255,255,0.55); }
  .cta-final h2 span.impact{ color:#fff; }
  .cta-final .btn{ position:relative; margin-top:44px; }
  .cta-final .btn-primary{ background:#fff; color:var(--primary-deep); box-shadow:0 10px 24px -10px rgba(0,0,0,0.4); }
  .cta-final .btn-primary:hover{ background:#EFF6EF; }
  .contact-section{ padding-block:64px; }

  /* ============================================================
     15. FOOTER
     ============================================================ */
  footer{ padding:56px var(--pad) 40px; }
  .footer-inner{
    max-width:var(--max-w); margin:0 auto; display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:20px; padding-top:32px; border-top:1px solid var(--line);
  }
  .footer-inner p{ font-size:13px; color:var(--ink-faint); }
  .footer-links{ display:flex; gap:26px; }
  .footer-links a{ font-size:13.5px; color:var(--ink-soft); }
  .footer-links a:hover{ color:var(--primary); }
  .footer-logo{ font-size:16px; }
  .footer-logo-mark{ height:20px; width:auto; }

  /* ============================================================
     16. MODAL — "Solicitar una reunión" form
     ============================================================ */
  .modal-overlay{
    position:fixed; inset:0; z-index:200;
    background:rgba(26,31,26,0.55);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center;
    padding:24px;
    opacity:0; visibility:hidden;
    transition:opacity 0.35s var(--ease), visibility 0.35s var(--ease);
  }
  .modal-overlay.is-open{ opacity:1; visibility:visible; }
  .modal{
    background:var(--white); border-radius:var(--radius-lg);
    width:100%; max-width:520px; max-height:90vh; overflow-y:auto;
    padding:clamp(28px,4vw,44px);
    box-shadow:0 40px 90px -30px rgba(0,0,0,0.4);
    transform:translateY(16px) scale(0.98); opacity:0;
    transition:transform 0.4s var(--ease), opacity 0.4s var(--ease);
  }
  .modal-overlay.is-open .modal{ transform:translateY(0) scale(1); opacity:1; }
  .modal-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:8px; }
  .modal-head h3{ font-size:26px; line-height:1.25; font-weight:500; }
  .modal-head p{ margin-top:10px; color:var(--ink-soft); font-size:14.5px; line-height:1.6; }
  .modal-close{
    flex-shrink:0; width:36px; height:36px; border-radius:50%; background:var(--bg-alt);
    display:flex; align-items:center; justify-content:center; transition:background 0.25s var(--ease);
  }
  .modal-close:hover{ background:var(--line); }
  .modal-close svg{ width:16px; height:16px; }

  .form-grid{ display:grid; gap:16px; margin-top:26px; }
  .form-trap{
    position:absolute; left:-10000px; top:auto;
    width:1px; height:1px; overflow:hidden;
  }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .field label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:7px; }
  .field input, .field select, .field textarea{
    width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--line);
    font-family:var(--font-body); font-size:14.5px; color:var(--ink); background:var(--bg);
    transition:border-color 0.25s var(--ease);
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-color:var(--primary); background:var(--white);
  }
  .field textarea{ resize:vertical; min-height:88px; font-family:var(--font-body); }
  .modal-submit{ width:100%; margin-top:6px; }
  .modal-submit:disabled{ cursor:wait; opacity:0.72; transform:none; }
  .form-status{ min-height:20px; font-size:13px; line-height:1.5; text-align:center; }
  .form-status:empty{ display:none; }
  .form-status.is-pending{ color:var(--ink-soft); }
  .form-status.is-error{ color:#A13030; }
  .modal-note{ margin-top:14px; font-size:12.5px; color:var(--ink-faint); text-align:center; line-height:1.5; }

  .modal-success{ text-align:center; padding:20px 0 4px; }
  .modal-success .icon-tile{ background:var(--green-soft); margin:0 auto 20px; width:64px; height:64px; }
  .modal-success .icon-tile svg{ width:28px; height:28px; }
  .modal-success h3{ font-size:24px; margin-bottom:10px; }
  .modal-success p{ color:var(--ink-soft); font-size:15px; line-height:1.6; max-width:360px; margin-inline:auto; }
  .modal-done{ margin-top:24px; }

  /* ============================================================
     17. RESPONSIVE FINE-TUNING
     ============================================================ */
  @media (max-width:640px){
    :root{ --section-space: 64px; }
    .hero-actions{ flex-direction:column; align-items:stretch; }
    .hero-actions .btn{ width:100%; }
    .mock-body{ grid-template-columns:90px 1fr; }
    .form-row{ grid-template-columns:1fr; }
  }