:root{
      --green-900:#0a6b2d;
      --green-700:#0e8a3a;
      --green-500:#1fb05a;
      --text:#0f172a;
      --muted:#64748b;
      --bg:#f6f8fb;
      --card:#ffffff;
      --border:rgba(15,23,42,.10);
      --shadow:0 18px 50px rgba(2, 6, 23, .10);
      --radius:18px;
    }
    body{
      color:var(--text);
      background:
        radial-gradient(900px 420px at 20% 10%, rgba(31,176,90,.16), transparent 60%),
        radial-gradient(900px 420px at 90% 30%, rgba(10,107,45,.18), transparent 60%),
        linear-gradient(180deg, #ffffff, var(--bg));
    }
    .navbar{
      background: rgba(255,255,255,.85) !important;
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
    }
    /* =========================
      Navbar - Logo SERLEYCON
      ========================= */
    .navbar .navbar-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0;
    }

    .navbar-logo {
      display: block;
      height: 40px;       /* desktop */
      width: auto;
      max-width: 180px;
      object-fit: contain;
    }

    /* Ajuste responsive */
    @media (max-width: 991.98px) {
      .navbar-logo {
        height: 34px;     /* móvil/tablet */
        max-width: 160px;
      }
    }
    .brand{
      font-weight: 900;
      letter-spacing: -0.02em;
    }
    .hero{
      padding: 54px 0 28px;
    }
    .hero-card{
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 26px;
      position: relative;
      overflow: hidden;
    }
    .hero-card:before{
      content:"";
      position:absolute; inset:-2px;
      background: linear-gradient(90deg, var(--green-900), var(--green-500), #8ed9aa);
      height: 10px;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border:1px solid rgba(31,176,90,.25);
      background:rgba(31,176,90,.08);
      border-radius:999px;
      color:var(--green-900);
      font-weight:700;
      font-size:13px;
    }
    .dot{
      width:9px; height:9px; border-radius:50%;
      background:var(--green-700);
      box-shadow:0 0 0 4px rgba(31,176,90,.18);
    }
    .hero h1{
      margin: 14px 0 10px;
      font-size: clamp(28px, 3.2vw, 44px);
      line-height: 1.1;
      letter-spacing: -0.03em;
      font-weight: 900;
    }
    .hero p{ color: var(--muted); font-size: 16px; margin: 0 0 14px; }
    .hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }
    .btn-primary{
      background: linear-gradient(135deg, var(--green-900), var(--green-500));
      border:0;
      box-shadow: 0 10px 24px rgba(14,138,58,.25);
      border-radius: 14px;
      font-weight: 800;
      padding: 12px 14px;
    }
    .btn-ghost{
      border-radius: 14px;
      font-weight: 800;
      padding: 12px 14px;
      border:1px solid rgba(15,23,42,.15);
      background:#fff;
      color: var(--green-900);
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    .section{ padding: 34px 0; }
    .section-alt{ background: rgba(245,247,250,.65); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .section-title{ font-weight: 900; letter-spacing: -0.02em; margin: 0 0 6px; }
    .section-subtitle{ color: var(--muted); margin: 0 0 16px; }
    .page-title{ font-weight: 900; letter-spacing: -0.02em; margin: 0 0 10px; }
    .card{
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: 0 8px 26px rgba(2, 6, 23, .06);
    }
    .field label{ font-size:12px; color:var(--muted); font-weight:800; margin-bottom:6px; }
    .field input, .field textarea{
      border-radius: 12px;
      border: 1px solid rgba(15,23,42,.18);
      background: #fbfcff;
    }
    .grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    @media(max-width: 768px){
      .grid-2{ grid-template-columns: 1fr; }
    }

    /* =========================
   SERLEYCON - Imágenes Home
   ========================= */
.hero--bg{
  position: relative;
  padding: 68px 0 36px;
  overflow: hidden;
}
.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.02);
}
.hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(2,6,23,.72), rgba(2,6,23,.30), rgba(2,6,23,.10));
}
.hero-card--on-bg{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
}

.work-card{
  overflow:hidden;
}
.work-card__img{
  height: 210px;
  width: 100%;
  background:#fbfcff;
  border-bottom: 1px solid var(--border);
}
.work-card__img img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.work-card__img-placeholder{
  height:210px;
  display:grid;
  place-items:center;
  color:var(--muted);
}
.work-card__meta{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.work-card__title{
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.work-card__desc{
  margin: 8px 0 0;
  color: var(--muted);
}

.service-card{
  overflow:hidden;
}
.service-card__img{
  height: 150px;
  width: 100%;
  background:#fbfcff;
  border-bottom: 1px solid var(--border);
}
.service-card__img img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.service-card__title{
  font-weight:900;
  letter-spacing:-0.02em;
}
.service-card__desc{
  margin: 8px 0 0;
  color: var(--muted);
}

.about-card{
  overflow:hidden;
}
.about-card__img{
  height: 200px;
  width: 100%;
  background:#fbfcff;
  border-bottom: 1px solid var(--border);
}
.about-card__img img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}