:root {
  --igd-blanco:       #FFFFFF;
  --igd-fondo-alt:    #F0F2F8;
  --igd-azul:         #0D2278;
  --igd-acento:       #719BE2;
  --igd-texto:        #1A1A2E;
  --igd-texto-sec:    #4A5568;
  --igd-borde:        #E2E8F0;

  --bs-primary:       #0D2278;
  --bs-link-color:    #719BE2;
  --bs-link-hover-color: #0D2278;
  --bs-border-color:  #E2E8F0;
  --bs-body-color:    #1A1A2E;
  --bs-body-bg:       #FFFFFF;
  --bs-body-font-family: 'Inter', sans-serif;
}

/* Tipografía fluida — el tamaño de letra de TODO el sitio (texto en rem, botones,
   labels, tarjetas, footer, etc.) se reduce de forma continua junto con el ancho de
   pantalla, porque hereda de este tamaño base en vez de partir de un valor fijo. */
html { font-size: clamp(14px, 0.13vw + 13.49px, 16px); }

body {
  font-family: 'Inter', sans-serif;
  color: var(--igd-texto);
  background: var(--igd-blanco);
}

/* Encabezados con su propia curva (se reducen más que el texto de cuerpo, como
   corresponde a elementos grandes de impacto visual) */
h1, h2, h3, h4, h5, h6 { font-family: 'Barlow', sans-serif; font-weight: 700; color: var(--igd-azul); }
h1 { font-size: clamp(28px, 4vw, 58px); }
h2 { font-size: clamp(22px, 1.7vw + 16px, 32px); }
h3 { font-size: clamp(20px, 1.3vw + 15px, 28px); }
h4 { font-size: clamp(18px, 1vw + 14px, 24px); }
h5 { font-size: clamp(16px, 0.6vw + 13px, 20px); }
h6 { font-size: clamp(14px, 0.4vw + 12px, 16px); }
.text-tecnico { font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem; color: var(--igd-azul); letter-spacing: .02em; }

/* -- Sección con textura de plano técnico de ingeniería (solo fondos #F0F2F8) -- */
.seccion-alt {
  background-color: var(--igd-fondo-alt);
  position: relative;
  overflow: hidden;
}
.seccion-alt::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    /* cruces de registro en esquinas */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cline x1='20' y1='10' x2='20' y2='30' stroke='%230D2278' stroke-width='1'/%3E%3Cline x1='10' y1='20' x2='30' y2='20' stroke='%230D2278' stroke-width='1'/%3E%3C/svg%3E"),
    /* líneas punteadas diagonales */
    repeating-linear-gradient(45deg, rgba(13,34,120,.08) 0 2px, transparent 2px 14px);
  background-repeat: no-repeat, no-repeat;
  background-position: top 24px left 24px, top right;
  background-size: 40px 40px, 45% 100%;
  opacity: .9;
}
.seccion-alt > * { position: relative; z-index: 1; }

/* -- Botones: radio conservador, sin pill -- */
.btn { border-radius: 4px; font-weight: 500; font-size: 0.9375rem; transition: all .2s ease; }
.btn-primary { background-color: var(--igd-azul); border-color: var(--igd-azul); }
.btn-primary:hover { background-color: var(--igd-acento); border-color: var(--igd-acento); }
.btn-acento { background-color: var(--igd-acento); border-color: var(--igd-acento); color: #fff; }
.btn-acento:hover { background-color: var(--igd-azul); border-color: var(--igd-azul); color: #fff; }
.btn-outline-primary { color: var(--igd-azul); border-color: var(--igd-azul); border-radius: 4px; }
.btn-outline-primary:hover { background-color: var(--igd-azul); border-color: var(--igd-azul); }
.btn-outline-light { border-radius: 4px; }

/* -- Topbar -- */
.topbar { background-color: var(--igd-azul); color: #fff; font-size: 0.8125rem; opacity: 90%; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { color: var(--igd-acento); }
.topbar .bi { color: var(--igd-acento); }

/* -- Navbar -- */
.navbar-igd { background-color: var(--igd-blanco); padding: 0; border-bottom: 1px solid var(--igd-borde); }
.navbar-igd .navbar-brand { padding: 10px 0; display: flex; align-items: center; }
.navbar-igd .nav-link { color: var(--igd-azul); font-weight: 500; padding: 24px 16px !important; }
.navbar-igd .nav-link:hover, .navbar-igd .nav-link.active { color: var(--igd-acento); }
.navbar-igd .navbar-toggler { border-color: var(--igd-borde); }
.navbar-igd .navbar-toggler-icon { filter: invert(13%) sepia(53%) saturate(3000%) hue-rotate(224deg); }
.navbar-igd .btn-primary { background-color: var(--igd-azul); border-color: var(--igd-azul); color: #fff; }
.navbar-igd .btn-primary:hover { background-color: var(--igd-acento); border-color: var(--igd-acento); }

/* -- Hero / Slideshow de servicios --
   Altura con piso (380px) y techo (640px) vía clamp(): entre esos límites escala de forma
   continua y proporcional al ancho de viewport. Es min-height (no height fija) para que si
   en algún ancho el contenido necesita más espacio, el bloque crezca en vez de recortarlo —
   la letra (ver h1/.subheadline) también escala con el ancho para acercarse a ese objetivo
   de altura en vez de depender solo del contenedor. */
.hero-carousel .carousel-item {
  min-height: clamp(380px, 18vw + 300px, 640px);
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-carousel .carousel-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(9,23,89,.88) 0%, rgba(13,34,120,.74) 45%, rgba(13,34,120,.38) 100%);
}
.hero-carousel .carousel-item-content { position: relative; z-index: 2; color: #fff; padding: clamp(24px, 5vw + 5px, 100px) 0; }
.hero-carousel h1 { color: #fff; font-size: clamp(24px, 4vw, 58px); line-height: 1.15; text-shadow: 0 2px 16px rgba(9,23,89,.5); }
.hero-carousel .subheadline { color: rgba(255,255,255,.92); font-size: clamp(14px, 1vw + 8px, 19px); max-width: 620px; text-shadow: 0 1px 10px rgba(9,23,89,.4); }
.hero-carousel .badge-tech { border: 1px solid var(--igd-acento); color: var(--igd-acento); font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; border-radius: 4px; padding: 5px 10px; }
.hero-carousel .badge-servicio {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(113,155,226,.5);
  color: var(--igd-acento); border-radius: 4px; padding: 6px 12px;
  font-size: 0.8125rem; font-weight: 500; margin-bottom: 18px;
}
.hero-carousel .badge-servicio .bi { font-size: 1rem; }

/* Indicadores */
.hero-carousel .carousel-indicators { z-index: 3; bottom: 22px; }
.hero-carousel .carousel-indicators [data-bs-target] {
  width: 34px; height: 3px; border-radius: 2px;
  background-color: rgba(255,255,255,.4); border: 0; opacity: 1;
}
.hero-carousel .carousel-indicators .active { background-color: var(--igd-acento); }

/* Flechas prev/next */
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next { width: 6%; z-index: 3; opacity: .7; }
.hero-carousel .carousel-control-prev:hover,
.hero-carousel .carousel-control-next:hover { opacity: 1; }
.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon { width: 2rem; height: 2rem; }

/* -- Trust bar -- */
.trust-bar { background: var(--igd-fondo-alt); padding: 28px 0; }
.trust-item { display: flex; align-items: center; gap: 10px; color: var(--igd-azul); font-weight: 600; font-size: 0.875rem; }
.trust-item .bi { font-size: 1.375rem; color: var(--igd-acento); }

/* -- Pilares "¿Por qué elegirnos?" -- */
.pilar-icono {
  width: 56px; height: 56px; border-radius: 4px;
  background: var(--igd-azul); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; flex-shrink: 0;
}

/* -- Tarjetas genéricas (servicio / sector) -- */
.card-igd {
  background: #fff;
  border: 1px solid var(--igd-borde);
  border-top: 3px solid var(--igd-azul);
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(13,34,120,.08);
  transition: all .2s ease;
  height: 100%;
}
.card-igd:hover {
  background: var(--igd-fondo-alt);
  border-top-color: var(--igd-acento);
  box-shadow: 0 4px 20px rgba(13,34,120,.15);
  transform: translateY(-3px);
}
.card-igd .card-icono { font-size: 1.875rem; color: var(--igd-azul); }
.card-igd:hover .card-icono { color: var(--igd-acento); }
.card-igd .card-link { color: var(--igd-acento); font-weight: 500; font-size: 0.875rem; text-decoration: none; }
.card-igd .card-link:hover { color: var(--igd-azul); }

/* -- Tarjeta de servicio con imagen (estilo referencia Solartec) -- */
.card-servicio { padding: 0; overflow: visible; }
.card-servicio .card-servicio-img {
  height: 190px;
  background-size: cover;
  background-position: center;
  border-radius: 3px 3px 0 0;
  transition: all .3s ease;
}
.card-servicio:hover .card-servicio-img { filter: saturate(1.15); }
.card-servicio .card-icono-badge {
  width: 60px; height: 60px;
  background: var(--igd-azul);
  color: #fff;
  border: 3px solid #fff;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  position: relative;
  top: -30px; left: 24px;
  margin-bottom: -30px;
  box-shadow: 0 4px 14px rgba(13,34,120,.25);
  transition: all .2s ease;
}
.card-servicio:hover .card-icono-badge { background: var(--igd-acento); }
.card-servicio .card-servicio-body { padding: 0 24px 24px; }

/* -- Placeholder de imagen (contenido pendiente) -- */
.img-placeholder {
  background: repeating-linear-gradient(135deg, #E2E8F0 0 10px, #F0F2F8 10px 20px);
  color: var(--igd-texto-sec);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8125rem; font-family: 'JetBrains Mono', monospace;
  border-radius: 4px;
  min-height: 220px;
  text-align: center;
  padding: 12px;
}

/* -- Mapa de cobertura -- */
.mapa-cobertura-wrap { background: var(--igd-azul); border-radius: 4px; padding: 40px; }
.plaza-badge {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(113,155,226,.4);
  border-radius: 4px;
  padding: 14px 16px;
  color: #fff;
}
.plaza-badge .plaza-nombre { color: var(--igd-acento); font-weight: 600; font-size: 0.9375rem; }
.plaza-badge .plaza-tipo { color: rgba(255,255,255,.75); font-size: 0.8125rem; }

/* -- Banner CTA -- */
.banner-cta { background: var(--igd-azul); border-radius: 4px; }

/* -- Formulario -- */
.form-control, .form-select {
  border-radius: 4px; border-color: var(--igd-borde); font-size: 0.9375rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--igd-acento); box-shadow: 0 0 0 .2rem rgba(113,155,226,.25);
}
.form-label { font-weight: 500; font-size: 0.875rem; color: var(--igd-azul); }

/* -- Footer -- */
footer.footer-igd { background: var(--igd-azul); color: rgba(255,255,255,.85); }
footer.footer-igd h5 { color: #fff; }
footer.footer-igd a { color: rgba(255,255,255,.75); text-decoration: none; }
footer.footer-igd a:hover { color: var(--igd-acento); }
footer.footer-igd .bi { color: var(--igd-acento); }
.footer-bottom { background: #091759; font-size: 0.8125rem; color: rgba(255,255,255,.6); }

.badge-sector {
  background: var(--igd-fondo-alt); color: var(--igd-azul);
  border: 1px solid var(--igd-borde); border-radius: 4px;
  font-weight: 500; font-size: 0.8125rem; padding: 6px 12px;
}

.dato-tecnico { font-family: 'JetBrains Mono', monospace; color: var(--igd-azul); }

/* -- Marquee de logotipos: cinta infinita de derecha a izquierda -- */
.marquee-wrap {
  overflow: hidden;
  position: relative;
  background: var(--igd-fondo-alt);
  padding: 16px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll 34s linear infinite;
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  flex: 0 0 auto;
  height: 92px;
  margin: 0 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.marquee-item img {
  max-width: 260px;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1) opacity(.6);
  transition: filter .2s ease;
}
.marquee-item img:hover { filter: grayscale(0) opacity(1); }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* -- Hero de página interna (servicio / sector): banner estático de una sola imagen,
   mismo lenguaje visual que el carrusel del home pero sin carrusel. -- */
.hero-pagina {
  position: relative;
  min-height: clamp(320px, 12vw + 260px, 460px);
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-pagina::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(9,23,89,.90) 0%, rgba(13,34,120,.78) 50%, rgba(13,34,120,.45) 100%);
}
.hero-pagina .hero-pagina-content { position: relative; z-index: 2; color: #fff; padding: clamp(32px, 5vw, 64px) 0; }
.hero-pagina h1 { color: #fff; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.15; text-shadow: 0 2px 16px rgba(9,23,89,.5); margin-bottom: .75rem; }
.hero-pagina .subheadline { color: rgba(255,255,255,.92); font-size: clamp(15px, .6vw + 12px, 18px); max-width: 680px; text-shadow: 0 1px 10px rgba(9,23,89,.4); }
.hero-pagina .badge-servicio {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(113,155,226,.5);
  color: var(--igd-acento); border-radius: 4px; padding: 6px 12px;
  font-size: 0.8125rem; font-weight: 500; margin-bottom: 18px;
}
.hero-pagina .badge-servicio .bi { font-size: 1rem; }
.hero-pagina .breadcrumb { --bs-breadcrumb-divider-color: rgba(255,255,255,.45); margin-bottom: 16px; }
.hero-pagina .breadcrumb-item, .hero-pagina .breadcrumb-item a { color: rgba(255,255,255,.75); font-size: .8125rem; text-decoration: none; }
.hero-pagina .breadcrumb-item a:hover { color: var(--igd-acento); }
.hero-pagina .breadcrumb-item.active { color: var(--igd-acento); }

/* -- Tarjeta de dato técnico / diferenciador (franja azul destacada) -- */
.franja-diferenciador { background: var(--igd-azul); border-radius: 4px; color: #fff; }
.franja-diferenciador .bi { color: var(--igd-acento); }

/* -- Chips de sector/servicio relacionado (enlazables) -- */
.chip-relacionado {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--igd-azul);
  border: 1px solid var(--igd-borde); border-radius: 4px;
  padding: 8px 14px; font-size: 0.875rem; font-weight: 500;
  text-decoration: none; transition: all .2s ease;
}
.chip-relacionado:hover { background: var(--igd-azul); color: #fff; border-color: var(--igd-azul); }
.chip-relacionado .bi { color: var(--igd-acento); }