/* =========================================================
   SOMOS – CSS DESDE CERO
   Logos Hub Informático
   Desktop First · Estable · Sin espacios fantasma
========================================================= */

/* =========================
   RESET / BASE
========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  background-color: #020617;
  color: #e5e7eb;
  font-family: "Open Sans", sans-serif;
}

/* Accesibilidad SEO */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* =========================================================
   HERO / IDENTIDAD
========================================================= */
.hub-identity {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 80px);
  justify-content: center;
  text-align: center;
  background: url("../images/heros/hero-somos.webp") center / cover no-repeat;
}

.hub-identity::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.72);
}

.hub-identity .container {
  position: relative;
  z-index: 2;
}

.hub-logo {
  max-width: 260px;
  width: 100%;
  height: auto;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.45));
}

.hub-title {
  font-size: 3.4rem;
  font-weight: 700;
  margin: 0;
  color: #ffffff;
}

.hub-subtitle {
  max-width: 720px;
  margin: 1rem auto 0;
  font-size: 1.25rem;
  line-height: 1.6;
  color: #cbd5e1;
}




.hub-logo{
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* =========================================================
   SERVICIOS
========================================================= */
.section-servicios {
  padding: 4rem 0;
}

.services-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.cards-servicios {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 2.5rem;
}

.card-servicio {
  position: relative;
  height: 360px;
  border-radius: 18px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  color: inherit;
  transition: transform .35s ease, box-shadow .35s ease;
}

.card-servicio::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(2,6,23,.95),
    rgba(2,6,23,.35)
  );
}

.card-servicio:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(0,0,0,.45);
}

.card-servicio .info-card {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: 2.2rem;
}

.card-servicio .name {
  font-size: 2.2rem;
  font-weight: 600;
  color: #ffffff;
}

/* =========================================================
   COMUNIDAD
========================================================= */
.section-comunidad {
  padding: 4rem 0;
}

.proyectos-comunidad {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 3rem;
  align-items: center;
}

.media-comunidad {
  height: 360px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 28px 55px rgba(0,0,0,.45);
}

.media-comunidad img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info-comunidad p,
.info-comunidad li {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #e5e7eb;
}

.info-comunidad ul {
  margin: 1.2rem 0 1.6rem;
  padding-left: 1.5rem;
}

.btn-mas-informacion {
  background: #13E8A5;
  color: #020617;
  border: none;
  padding: 1.05rem 2.4rem;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
}

.btn-mas-informacion:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* =========================================================
   PROYECTOS / GALERÍA
========================================================= */
.section-proyectos {
  padding: 4rem 0;
}

.galeria-masonry {
  max-width: 1200px;
  margin: 0 auto;
  column-width: 260px;
  column-gap: 1.5rem;
}

.galeria-masonry figure {
  break-inside: avoid;
  margin-bottom: 1.5rem;
  border-radius: 14px;
  overflow: hidden;
}

.galeria-masonry img {
  width: 100%;
  display: block;
}


/* ===============================
   RESPALDO / CERTIFICACIONES
   FIX REAL: alturas estables + imágenes contenidas
================================ */

/* Sección: SIN márgenes raros */
.section-respalda{
  padding: 1.25rem 0 2.5rem;
  margin: 0 !important;
}

/* Contenedor centrado */
.logos-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
  overflow: hidden;
}

/* Altura estable del carrusel (clave) */
.logos-respalda{
  width: 100%;
  height: 120px;           /* altura real del bloque */
  display: block;
}

/* Slick estructura: que no invente alturas */
.logos-respalda .slick-list{
  height: 120px;
}

.logos-respalda .slick-track{
  height: 120px;
  display: flex !important;     /* alinea slides en una fila */
  align-items: center;          /* centra vertical */
}

/* Slide: caja fija, nunca crece */
.logos-respalda .slide,
.logos-respalda .slick-slide{
  height: 120px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Imagen: entra en la caja sin deformarse */
.logos-respalda img{
  max-height: 78px;       /* controla el tamaño real del logo */
  max-width: 180px;       /* evita que uno gigante empuje todo */
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  opacity: .92;
  transform: translateZ(0);
  transition: transform .25s ease, opacity .25s ease;
}

.logos-respalda img:hover{
  opacity: 1;
  transform: scale(1.04);
}

/* Responsive: baja altura del carrusel */
@media (max-width: 992px){
  .logos-respalda,
  .logos-respalda .slick-list,
  .logos-respalda .slick-track,
  .logos-respalda .slide,
  .logos-respalda .slick-slide{
    height: 105px !important;
  }

  .logos-respalda img{
    max-height: 64px;
    max-width: 160px;
  }
}

@media (max-width: 576px){
  .logos-respalda,
  .logos-respalda .slick-list,
  .logos-respalda .slick-track,
  .logos-respalda .slide,
  .logos-respalda .slick-slide{
    height: 95px !important;
  }

  .logos-respalda img{
    max-height: 56px;
    max-width: 140px;
  }
}


/* ===============================
   CÓMO TRABAJAMOS
================================ */
.section-como-trabajamos {
  padding: 4rem 0;
  background: #020617;
}

.section-como-trabajamos .lead {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #e5e7eb;
}

.section-como-trabajamos p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #cbd5e1;
}


/* ===============================
   CTA SUAVE
================================ */
.cta-suave {
  padding: 3rem 0 2.5rem;
  text-align: center;
}

.cta-suave .cta-text {
  max-width: 720px;
  margin: 0 auto 1rem;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #cbd5e1;
}

.cta-suave .cta-link {
  font-weight: 600;
  color: #13E8A5;
  text-decoration: none;
}

.cta-suave .cta-link:hover {
  text-decoration: underline;
}


/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 992px) {
  .hub-title { font-size: 2.8rem; }
  .hub-subtitle { font-size: 1.1rem; }

  .cards-servicios {
    grid-template-columns: 1fr;
  }

  .proyectos-comunidad {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .media-comunidad {
    height: 300px;
  }

  .info-comunidad ul {
    text-align: left;
    display: inline-block;
  }
}

@media (max-width: 576px) {
  .hub-title { font-size: 2.2rem; }
  .title-main { font-size: 2.2rem; }
}