: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;
  /* Las fotos propias del slide (assets/img/hero/, 1920 × 640) traen el sujeto compuesto hacia
     el 70 % del ancho: al 72 % se ve completo en móvil (~1:1) y en laptops de 1366 px. */
  background-position: 72% 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: #091759; 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); }
.footer-legal { font-size: 0.8125rem; color: rgba(255,255,255,.6); margin-top: 8px; }
.footer-legal a { color: rgba(255,255,255,.6); text-decoration: none; }
.footer-legal a:hover { color: var(--igd-acento); }
.footer-legal span { padding: 0 8px; opacity: .5; }

/* -- Aviso de cookies (popup modal) -- */
.cookie-overlay {
  position: fixed; inset: 0; z-index: 1080;
  background: rgba(9,23,89,.55);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.cookie-banner {
  width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--igd-azul); color: rgba(255,255,255,.9);
  border: 1px solid rgba(113,155,226,.3);
  border-radius: 4px; box-shadow: 0 24px 60px rgba(0,0,0,.4);
  padding: 28px;
}
.cookie-banner a { color: var(--igd-acento); }
.cookie-banner-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cookie-banner-header .bi { color: var(--igd-acento); font-size: 1.3rem; }
.cookie-banner-header h5 { color: #fff; }
.cookie-banner-texto { font-size: 0.9rem; line-height: 1.6; color: rgba(255,255,255,.85); }

.cookie-prefs { margin: 18px 0; display: flex; flex-direction: column; gap: 14px; }
.cookie-pref-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px; border: 1px solid rgba(113,155,226,.25); border-radius: 4px;
}
.cookie-pref-texto strong { color: #fff; font-size: 0.875rem; }
.cookie-pref-texto p { color: rgba(255,255,255,.7); }
.cookie-pref-row input[type="checkbox"] { flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--igd-acento); }

.cookie-banner-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cookie-banner-botones .btn { flex: 1 1 auto; }

.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%);
}
/* Fotos propias (assets/img/hero/, 1920 × 640, sujeto hacia el 70 % del ancho) a todo el ancho.
   El hero interno es más bajo que el slide y recorta arriba y abajo; al 30 % vertical se ven
   completos la cámara, la punta de la torre y la estación FIRE (centrado los cortaba). */
.hero-pagina--foto-derecha { background-position: 72% 30%; }
/* Escritorio (hero de páginas internas): el texto ocupa la mitad izquierda,
   así que la foto se dibuja solo del 25 % hacia la derecha (su centro cae en el 62.5 %, fuera
   del texto) y el primer cuarto queda en degradado azul; el borde izquierdo de la foto se
   desvanece con mask-image para que no haya costura. La URL sigue en el style inline: el
   contenedor la pinta a tamaño 0 y ::before la hereda con `inherit`. ::after es el degradado
   que funde el cuarto azul con la foto. No lo usan el carrusel del home ni los heroes con
   .hero-pagina--foto-derecha: sus fotos propias ya vienen con el sujeto a la derecha y van a
   todo el ancho. */
@media (min-width: 992px) {
  .hero-pagina:not(.hero-pagina--foto-derecha) {
    background-color: #0A1A63;
    background-size: 0 0;
  }
  .hero-pagina:not(.hero-pagina--foto-derecha)::before {
    left: 25%;
    background: inherit;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%);
            mask-image: linear-gradient(90deg, transparent 0, #000 20%);
  }
  .hero-pagina:not(.hero-pagina--foto-derecha)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(9,23,89,1) 0%, rgba(13,34,120,.9) 25%, rgba(13,34,120,.72) 42%, rgba(13,34,120,.32) 70%, rgba(13,34,120,.18) 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); }