/* =========================================================
   DEM GLOBAL - CORPORATE LANDING
   Bootstrap + Tailwind utilities + CSS personalizado
   ========================================================= */

:root {
  --dem-blue: #071a33;
  --dem-blue-2: #0b315b;
  --dem-blue-3: #145a96;
  --dem-gold: #d7a33a;
  --dem-gold-light: #f2c866;
  --dem-black: #05070a;
  --dem-white: #ffffff;
  --dem-gray: #6c7480;
  --dem-light: #f5f7fa;
  --dem-border: rgba(12, 31, 54, .10);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Montserrat", Arial, sans-serif;
  color: #142033;
  background: #fff;
}

a { text-decoration: none; }

.dem-navbar {
  padding: 12px 0;
  background: rgba(3, 9, 17, .80);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: .3s ease;
}

.dem-navbar.scrolled {
  background: rgba(3, 9, 17, .97);
  padding: 8px 0;
}

.dem-brand {
  gap: 13px;
  min-width: 0;
  margin-right: 1.25rem;
  padding: 0;
}

.navbar-logo {
  width: 68px;
  height: 58px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* Wordmark tipográfico inspirado en los tonos y el acabado del logotipo DEM */
.dem-wordmark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .8);
}

.dem-wordmark-main {
  display: flex;
  align-items: center;
  gap: 1px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.62rem;
  font-weight: 900;
  letter-spacing: .035em;
  line-height: .92;
  -webkit-text-stroke: .35px rgba(0, 0, 0, .55);
}

.wordmark-d, .wordmark-m {
  color: #2479e8;
  background: linear-gradient(180deg, #75b4ff 0%, #287de7 46%, #0750b4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wordmark-e {
  color: #f2ce65;
  background: linear-gradient(180deg, #fff0a7 0%, #e5b83c 55%, #9c6a13 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dem-wordmark-sub {
  margin-top: 3px;
  color: #f3d58b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .085em;
  line-height: 1.05;
}

.dem-wordmark-tag {
  margin-top: 3px;
  color: #f5f5f5;
  font-size: .57rem;
  font-weight: 800;
  letter-spacing: .105em;
  line-height: 1.1;
}

.dem-wordmark-tag i {
  color: var(--dem-gold-light);
  font-style: normal;
}

.dem-wordmark-tag b {
  color: #d7dce4;
  font-weight: 800;
}

.nav-link {
  color: rgba(255,255,255,.78) !important;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.nav-link:hover,
.nav-link.active { color: var(--dem-gold-light) !important; }

.btn-gold {
  background: linear-gradient(135deg, #f0c35c, #c98f24);
  border: 1px solid #e8b948;
  color: #111;
  font-weight: 800;
  box-shadow: 0 10px 30px rgba(211,158,50,.20);
}

.btn-gold:hover {
  background: linear-gradient(135deg, #ffd979, #d89c29);
  color: #050505;
  transform: translateY(-2px);
}

.hero-section {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 80% 20%, rgba(25,104,170,.35), transparent 30%),
    radial-gradient(circle at 20% 70%, rgba(214,157,44,.10), transparent 30%),
    linear-gradient(135deg, #02060b 0%, #071b33 52%, #06101c 100%);
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 60px 60px;
}

.hero-overlay {
  position: absolute;
  width: 650px;
  height: 650px;
  right: -180px;
  top: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20,107,182,.22), transparent 65%);
  filter: blur(10px);
}

.hero-badge,
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--dem-gold-light);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.hero-badge {
  padding: 9px 14px;
  border: 1px solid rgba(215,163,58,.35);
  background: rgba(215,163,58,.08);
  border-radius: 999px;
}

.hero-title {
  max-width: 760px;
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: .98;
  font-weight: 800;
  letter-spacing: -.05em;
}

.hero-title span {
  display: block;
  color: var(--dem-gold-light);
}

.hero-text {
  max-width: 680px;
  color: rgba(255,255,255,.72);
  font-size: 1.05rem;
  line-height: 1.85;
}

.hero-stats { max-width: 650px; }

.stat-item {
  padding-left: 14px;
  border-left: 2px solid rgba(215,163,58,.65);
}

.stat-item strong {
  display: block;
  font-size: .82rem;
  color: #fff;
}

.stat-item span {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.48);
  font-size: .67rem;
}

.hero-logo-card {
  position: relative;
  width: 390px;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 35px;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  box-shadow: 0 40px 100px rgba(0,0,0,.45);
  backdrop-filter: blur(15px);
}

.hero-logo-card img {
  position: relative;
  z-index: 2;
  width: 340px;
  max-width: 90%;
  filter: drop-shadow(0 25px 35px rgba(0,0,0,.55));
}

.hero-glow {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(25,119,205,.20);
  filter: blur(50px);
}

.hero-card-label {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: -5px;
  color: rgba(255,255,255,.45);
  font-size: .62rem;
  letter-spacing: .15em;
  font-weight: 700;
}

.scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: rgba(255,255,255,.45);
  font-size: .58rem;
  letter-spacing: .16em;
}

.scroll-indicator i { color: var(--dem-gold-light); }

.section-padding { padding: 105px 0; }

.section-heading { max-width: 800px; margin: auto; }

.section-title {
  margin-top: 12px;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.045em;
  color: var(--dem-blue);
}

.section-title span { color: var(--dem-blue-3); }

.section-lead {
  max-width: 720px;
  color: var(--dem-gray);
  line-height: 1.8;
  font-size: 1rem;
}

.about-panel {
  padding: 12px;
  border-radius: 28px;
  background: linear-gradient(135deg, #071a33, #0c3765);
  box-shadow: 0 25px 70px rgba(4,21,43,.22);
}

.about-panel-inner {
  min-height: 430px;
  padding: 45px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  background:
    radial-gradient(circle at 80% 20%, rgba(33,135,220,.28), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,.06), transparent);
}

.about-icon,
.global-card-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: #111;
  background: var(--dem-gold-light);
  border-radius: 16px;
  font-size: 1.45rem;
  margin-bottom: 25px;
}

.small-label {
  color: var(--dem-gold-light);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .15em;
}

.about-panel h3 {
  margin: 12px 0;
  font-size: 2.2rem;
  font-weight: 800;
}

.about-panel p {
  max-width: 470px;
  color: rgba(255,255,255,.65);
  line-height: 1.8;
}

.route-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  font-size: .68rem;
  font-weight: 800;
}

.route-line div {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, var(--dem-gold), rgba(255,255,255,.15));
}

.mini-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--dem-border);
  border-radius: 14px;
}

.mini-feature i {
  color: var(--dem-gold);
  font-size: 1.5rem;
}

.mini-feature strong,
.mini-feature small { display: block; }

.mini-feature strong { font-size: .8rem; }

.mini-feature small {
  margin-top: 3px;
  color: var(--dem-gray);
  font-size: .68rem;
}

.services-section { background: var(--dem-light); }

.service-main-card {
  position: relative;
  min-height: 390px;
  padding: 38px;
  overflow: hidden;
  color: #fff;
  border-radius: 25px;
  background:
    radial-gradient(circle at 100% 0%, rgba(37,129,205,.30), transparent 35%),
    linear-gradient(145deg, #061527, #0a2c4f);
  box-shadow: 0 20px 55px rgba(5,22,42,.13);
}

.service-main-card.gold-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(215,163,58,.20), transparent 35%),
    linear-gradient(145deg, #10161e, #1c2631);
}

.service-icon {
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #101820;
  background: var(--dem-gold-light);
  font-size: 1.35rem;
}

.service-number {
  position: absolute;
  top: 28px;
  right: 32px;
  color: rgba(255,255,255,.10);
  font-size: 4rem;
  font-weight: 800;
}

.service-main-card h3 {
  margin-top: 30px;
  font-size: 2rem;
  font-weight: 800;
}

.service-main-card p {
  max-width: 550px;
  color: rgba(255,255,255,.62);
  line-height: 1.75;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 25px;
}

.service-tags span,
.global-pills span {
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: rgba(255,255,255,.70);
  font-size: .65rem;
}

.service-link {
  position: absolute;
  right: 38px;
  bottom: 32px;
  color: var(--dem-gold-light);
  font-size: .75rem;
  font-weight: 800;
}

.service-small-card {
  height: 100%;
  padding: 30px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--dem-border);
  transition: .25s ease;
}

.service-small-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(12,31,54,.10);
}

.service-small-card i {
  color: var(--dem-blue-3);
  font-size: 1.8rem;
}

.service-small-card h4 {
  margin: 18px 0 10px;
  font-size: 1rem;
  font-weight: 800;
}

.service-small-card p {
  color: var(--dem-gray);
  font-size: .82rem;
  line-height: 1.7;
}

.categories-box {
  padding: 35px;
  border-radius: 25px;
  color: #fff;
  background: var(--dem-blue);
}

.categories-box h3 {
  margin-top: 12px;
  font-weight: 800;
}

.categories-box p {
  color: rgba(255,255,255,.55);
  font-size: .82rem;
  line-height: 1.7;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.category-grid span {
  padding: 16px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 13px;
  color: rgba(255,255,255,.72);
  font-size: .72rem;
  background: rgba(255,255,255,.035);
}

.category-grid i {
  margin-right: 8px;
  color: var(--dem-gold-light);
}

.process-section { background: #fff; }

.process-line {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  position: relative;
}

.process-line::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 47px;
  height: 1px;
  background: #dfe4ea;
}

.process-step {
  position: relative;
  z-index: 2;
  text-align: center;
}

.step-number {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  border-radius: 50%;
  color: #fff;
  background: var(--dem-blue);
  border: 5px solid #fff;
  box-shadow: 0 0 0 1px #dfe4ea;
  font-size: .7rem;
  font-weight: 800;
}

.process-step > i {
  color: var(--dem-gold);
  font-size: 1.3rem;
}

.process-step h4 {
  margin: 12px 0 7px;
  font-size: .95rem;
  font-weight: 800;
}

.process-step p {
  max-width: 190px;
  margin: auto;
  color: var(--dem-gray);
  font-size: .72rem;
  line-height: 1.65;
}

.global-section {
  position: relative;
  overflow: hidden;
  padding: 105px 0;
  color: #fff;
  background:
    radial-gradient(circle at 10% 50%, rgba(26,105,174,.25), transparent 30%),
    linear-gradient(135deg, #02060b, #071c34);
}

.global-pattern {
  position: absolute;
  inset: 0;
  opacity: .15;
  background-image:
    linear-gradient(45deg, transparent 49%, rgba(255,255,255,.10) 50%, transparent 51%);
  background-size: 35px 35px;
}

.gold-text { color: var(--dem-gold-light); }

.global-title {
  max-width: 700px;
  margin: 12px 0 20px;
  font-size: clamp(2.3rem, 4vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.04em;
}

.global-title span { color: var(--dem-gold-light); }

.global-section p {
  max-width: 650px;
  color: rgba(255,255,255,.60);
  line-height: 1.8;
}

.global-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}

.global-card {
  padding: 35px;
  border-radius: 25px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  backdrop-filter: blur(12px);
}

.global-card h3 {
  font-weight: 800;
  font-size: 1.5rem;
}

.global-route {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--dem-gold-light);
  font-size: .68rem;
  font-weight: 800;
}

.global-route::before,
.global-route::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(215,163,58,.35);
}

.contact-section { background: #f7f8fa; }

.contact-list {
  display: grid;
  gap: 13px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.contact-item > div {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  color: var(--dem-gold);
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--dem-border);
}

.contact-item small,
.contact-item strong { display: block; }

.contact-item small {
  color: var(--dem-gray);
  font-size: .65rem;
}

.contact-item strong {
  margin-top: 2px;
  color: var(--dem-blue);
  font-size: .78rem;
}

.contact-card {
  padding: 32px;
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 25px 70px rgba(12,31,54,.09);
  border: 1px solid var(--dem-border);
}

.contact-card label {
  display: block;
  margin-bottom: 7px;
  color: #27384d;
  font-size: .68rem;
  font-weight: 800;
}

.contact-card .form-control,
.contact-card .form-select {
  min-height: 49px;
  border-color: #e1e6ec;
  border-radius: 10px;
  font-size: .78rem;
}

.contact-card textarea.form-control { min-height: 130px; }

.dem-footer {
  color: #fff;
  background: #03070c;
}

.footer-logo {
  width: 170px;
  max-height: 100px;
  object-fit: contain;
}

.footer-description {
  max-width: 400px;
  margin-top: 15px;
  color: rgba(255,255,255,.45);
  font-size: .72rem;
  line-height: 1.8;
}

.dem-footer h5 {
  margin-bottom: 18px;
  color: var(--dem-gold-light);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .10em;
}

.dem-footer a {
  display: block;
  margin-bottom: 10px;
  color: rgba(255,255,255,.48);
  font-size: .72rem;
}

.dem-footer a:hover { color: #fff; }

.social-links {
  display: flex;
  gap: 8px;
}

.social-links a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin: 0;
  color: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.30);
  font-size: .6rem;
}

.back-top {
  position: fixed;
  z-index: 1000;
  right: 20px;
  bottom: 20px;
  width: 42px;
  height: 42px;
  display: none;
  border: 0;
  border-radius: 12px;
  color: #111;
  background: var(--dem-gold-light);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.back-top.show { display: grid; place-items: center; }

@media (max-width: 991.98px) {
  .hero-section { min-height: auto; }
  .hero-title { font-size: 3.3rem; }
  .section-padding { padding: 80px 0; }
  .process-line { grid-template-columns: repeat(2, 1fr); gap: 45px 20px; }
  .process-line::before { display: none; }
}

@media (max-width: 1199.98px) {
  .dem-brand { gap: 9px; margin-right: .5rem; }
  .navbar-logo { width: 56px; }
  .dem-wordmark-main { font-size: 1.38rem; }
  .dem-wordmark-sub { font-size: .61rem; letter-spacing: .06em; }
  .dem-wordmark-tag { font-size: .49rem; letter-spacing: .075em; }
}

@media (max-width: 575.98px) {
  .dem-brand { gap: 7px; max-width: calc(100% - 58px); }
  .navbar-logo { width: 48px; height: 48px; }
  .dem-wordmark-main { font-size: 1.25rem; }
  .dem-wordmark-sub { font-size: .53rem; }
  .dem-wordmark-tag { font-size: .43rem; letter-spacing: .045em; }
  .hero-title { font-size: 2.6rem; }
  .hero-text { font-size: .9rem; }
  .section-title { font-size: 2.2rem; }
  .service-main-card { padding: 28px; }
  .service-link { position: static; display: inline-block; margin-top: 22px; }
  .category-grid { grid-template-columns: 1fr; }
  .process-line { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
}