/* =========================================================
   SIPCI — Inicio (específico de esta página)
   Requiere que /css/base.css se cargue antes que este archivo.

   Índice:
     1. Hero con foto de fondo + badges de confianza
     2. Eyebrow / acentos de texto
     3. Encabezado de sección con enlace "ver todo"
     4. Tarjeta de servicio (icono circular)
     5. Franja de estadísticas
     6. Galería de proyectos con desplazamiento
     7. Banda CTA con patrón
   ========================================================= */

/* 1. Hero con foto de fondo a todo lo ancho ------------------- */
/* .hero--fondo se agrega sobre la base .hero de base.css: la foto
   cubre toda la sección y un degradado oscuro mantiene el texto legible. */
.hero-visual { position: absolute; inset: 0; z-index: 0; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-visual::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,45,86,.94) 0%, rgba(8,45,86,.86) 38%, rgba(8,45,86,.55) 68%, rgba(8,45,86,.35) 100%);
}

.badges-confianza { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.badges-confianza li { display: flex; align-items: center; gap: var(--sp-2); font-size: .9rem; font-weight: 500; color: #E4EBF5; }
.badge-icono {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center; color: var(--dorado-secundario); flex-shrink: 0;
}

/* 2. Eyebrow / acentos de texto -------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-1); font-family: var(--fuente-mono); font-weight: 500;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dorado-secundario); margin-bottom: var(--sp-2);
}
.eyebrow--azul { color: var(--azul-primario-hover); }
.acento { color: var(--dorado-secundario); }
.acento--azul { color: var(--azul-primario); }

/* 3. Encabezado de sección con enlace "ver todo" ------------------ */
.encabezado-seccion { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.encabezado-seccion__texto { max-width: 640px; }
.encabezado-seccion__enlace { font-weight: 600; white-space: nowrap; }

/* 4. Tarjeta de servicio con icono circular ------------------------- */
.tarjeta-servicio {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: var(--sp-4); box-shadow: var(--sombra); display: flex; flex-direction: column; gap: var(--sp-2);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.tarjeta-servicio:hover { transform: translateY(-3px); box-shadow: var(--sombra-hover); }
.tarjeta-servicio h3 a { color: var(--tinta); transition: color var(--transicion); }
.tarjeta-servicio h3 a:hover { color: var(--azul-primario-hover); }
.tarjeta-servicio__icono {
  position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--azul-primario);
  color: var(--blanco); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-1);
  transition: transform var(--transicion);
}
.tarjeta-servicio:hover .tarjeta-servicio__icono { transform: scale(1.06); }
.tarjeta-servicio__icono::after {
  content: ""; position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--dorado-secundario); border: 2px solid var(--blanco);
}
.tarjeta-servicio__enlace { font-weight: 600; margin-top: auto; }

/* 5. Franja de estadísticas ---------------------------------------- */
.franja-stats { background: var(--azul-marino); color: var(--blanco); }
.franja-stats .contenedor { padding-top: var(--sp-5); padding-bottom: var(--sp-5); display: grid; gap: var(--sp-4); grid-template-columns: 1fr; text-align: center; }
@media (min-width: 768px) { .franja-stats .contenedor { grid-template-columns: repeat(4, 1fr); text-align: left; } }
.stat__numero { font-family: var(--fuente-mono); font-size: 1.9rem; font-weight: 500; color: var(--dorado-secundario); }
.stat__label { font-size: .9rem; color: #C9D6E8; }
.stat--ubicacion { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; }
.stat--ubicacion svg { color: var(--dorado-secundario); flex-shrink: 0; }

/* 6. Galería de proyectos con desplazamiento ------------------------- */
.galeria-envoltura { position: relative; }
.galeria { display: flex; gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-2); scrollbar-width: none; }
.galeria::-webkit-scrollbar { display: none; }
.galeria__item { scroll-snap-align: start; flex: 0 0 240px; }
.galeria__visual {
  aspect-ratio: 4 / 3; border-radius: var(--radio); background: linear-gradient(160deg, var(--azul-primario-tint), var(--blanco));
  border: 1px solid var(--linea); display: flex; align-items: center; justify-content: center; color: var(--azul-primario); margin-bottom: var(--sp-2);
}
.galeria__visual svg { width: 40%; height: 40%; }
.galeria__titulo { font-weight: 600; font-size: .95rem; }
.galeria__sub { color: var(--pizarra); font-size: .85rem; }
.galeria-controles { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); justify-content: flex-end; }
.galeria-boton {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linea); background: var(--blanco);
  color: var(--azul-primario-hover); display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color var(--transicion), border-color var(--transicion);
}
.galeria-boton:hover { background: var(--azul-primario-tint); }
.galeria-boton:disabled { opacity: .35; cursor: default; background: var(--blanco); }

/* 7. Banda CTA con patrón -------------------------------------------- */
.banda-cta { position: relative; background: linear-gradient(120deg, var(--azul-marino) 0%, var(--azul-marino-mid) 100%); color: var(--blanco); overflow: hidden; }
.banda-cta::before {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.16) 1.5px, transparent 1.5px); background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to right, transparent, black 55%); mask-image: linear-gradient(to right, transparent, black 55%);
}
.banda-cta__contenido { position: relative; display: grid; gap: var(--sp-5); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1024px) { .banda-cta__contenido { grid-template-columns: 1.1fr 1fr auto; } }
.banda-cta h2 { color: var(--blanco); }
.banda-cta p { color: #C9D6E8; }
.banda-cta__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.banda-cta__items li { display: flex; align-items: center; gap: var(--sp-2); font-size: .9rem; }
.banda-cta__items svg { color: var(--dorado-secundario); flex-shrink: 0; }