/* =========================================================
   DESARROLLO – SERVICIO: PÁGINAS WEB
   Archivo exclusivo para:
   /desarrollo/paginas-web
========================================================= */

/* =========================================================
   HERO PRINCIPAL
========================================================= */

.hero-service {
  position: relative;
  min-height: calc(100vh - var(--hub-header-h, 78px));
  display: flex;
  align-items: center;

  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  isolation: isolate;
}

/* Overlay oscuro con profundidad */
.hero-service::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      800px at 50% 30%,
      rgba(19,232,165,0.12),
      transparent 55%
    ),
    linear-gradient(
      to bottom,
      rgba(2,6,23,0.65),
      rgba(2,6,23,0.92)
    );
  z-index: 1;
}

/* Contenido */
.hero-service .container {
  position: relative;
  z-index: 2;
}

.hero-content {
  max-width: 860px;
  margin: 0 auto;
  padding: 6rem 1rem 4.5rem;
  text-align: center;
}

/* Kicker */
.hero-kicker {
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hub-turq);
  margin-bottom: 1.2rem;
  opacity: 0.85;
}

/* Título */
.hero-service h1 {
  font-size: clamp(2.4rem, 4.8vw, 3.4rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 1.6rem;
  color: var(--hub-text-main);
}

/* Subtítulo */
.hero-service p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--hub-text-muted);
  max-width: 720px;
  margin: 0 auto 2.4rem;
}

/* Acciones */
.hero-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Botón principal */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.9rem 2.6rem;
  border-radius: 999px;

  font-weight: 700;
  font-size: 0.95rem;

  background: linear-gradient(
    135deg,
    var(--hub-turq),
    #0fd1a0
  );
  color: #020617;

  box-shadow: 0 14px 40px rgba(19,232,165,0.35);
  transition: transform .25s ease, box-shadow .25s ease;
}

.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(19,232,165,0.45);
}

/* Botón secundario */
.btn-ghost {
  padding: 0.9rem 2.2rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;

  border: 1px solid rgba(255,255,255,0.25);
  color: var(--hub-text-main);
  background: transparent;

  transition: background .25s ease, border-color .25s ease;
}

.btn-ghost:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.4);
}

/* Indicador scroll */
.hero-scroll {
  display: inline-flex;
  margin-top: 3.2rem;
  opacity: 0.55;
}

.hero-scroll .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hub-turq);
  animation: scrollDot 1.8s infinite ease;
}

@keyframes scrollDot {
  0%   { transform: translateY(0); opacity: .3; }
  50%  { transform: translateY(10px); opacity: 1; }
  100% { transform: translateY(0); opacity: .3; }
}

/* =========================================================
   SECCIONES DE TEXTO
========================================================= */

.section-metodologia {
  padding: 2.5rem 1.5rem;
}

.section-metodologia p {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--hub-text-main);
}

.lead-soft {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 1.4rem;
}

/* =========================================================
   DIVISOR
========================================================= */

.hub-section-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,0.12),
    transparent
  );
  margin: 3.5rem 0;
}


/* =========================================================
   DESCRIPCIÓN DEL SERVICIO
========================================================= */

.service-description {
  padding: 4.5rem 1.5rem 3.5rem;
}

.service-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 600;
  margin-bottom: 1.2rem;
  color: var(--hub-text-main);
}

.service-text {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--hub-text-muted);
}



.section-title {
  font-size: 1.8rem;
  font-weight: 600;
}

.scenario {
  padding: 1.2rem 1.4rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  font-size: 0.95rem;
  line-height: 1.6;
}


/* =========================================================
   BLOQUE DE VALOR
========================================================= */

.hub-value-block {
  max-width: 900px;
  margin: 0 auto;
  padding: 3.4rem 3rem;

  background: var(--hub-bg-card);
  border-radius: var(--hub-radius-lg);
  border: 1px solid var(--hub-border-soft);

  backdrop-filter: blur(8px);
}

.hub-value-block h2 {
  text-align: center;
  margin-bottom: 2.2rem;
  font-size: 1.65rem;
  font-weight: 700;
}

.hub-value-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hub-value-block li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.9rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--hub-text-main);
}

.hub-value-block li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0.1rem;
  color: var(--hub-turq);
  font-size: 1.3rem;
}

/* =========================================================
   CTA FINAL
========================================================= */

.section-cta {
  padding: 4.5rem 1.5rem 6rem;
  text-align: center;
}

.cta-text {
  max-width: 640px;
  margin: 0 auto 1.8rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--hub-text-muted);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 992px) {
  .hero-content {
    padding-top: 5.5rem;
  }
}

@media (max-width: 768px) {
  .hero-service h1 {
    font-size: 2.1rem;
  }

  .hero-service p {
    font-size: 0.95rem;
  }

  .hub-value-block {
    padding: 2.4rem 1.9rem;
  }
}