/* ===== sección 1: fondo bicolor que termina en blanco ===== */
.hero-list{
  /* puedes ajustar estos dos colores “claros” si quieres otro matiz */
  --celeste-claro:#c6e7f8;

  --verde:#7cb928;
  --verde-claro:#d3f3b2;
  --alto: 95vh;
  --der: #c6e7f8;

  --izq:#d3f3b2;
  min-height: var(--alto);
  padding: clamp(28px, 6vw, 56px) 0;

  /* Capa 1: cortina vertical a blanco (suave) */
  /* Capa 2: gradiente diagonal izq→der (paleta) */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.10) 25%,
      rgba(255,255,255,.25) 50%,
      rgba(255,255,255,.55) 75%,
      #ffffff 100%
    ),
    linear-gradient(80deg, var(--izq) 0%, var(--der) 100%);
  background-repeat: no-repeat;
}


@media (max-width:640px){
  .hero-list{ --alto: 520px; }
}

/* ===== layout interno en 2 columnas ===== */
.hero-list__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 28px);
  display: grid;
  grid-template-columns: 1.1fr .9fr;     /* texto | imagen */
  grid-auto-rows: auto;
  align-items: start;
  column-gap: clamp(20px, 5vw, 56px);
  row-gap: clamp(12px, 2.2vw, 22px);
}

/* Fila 1: título (col 1) */
.hero-title{
  grid-column: 1;
  margin: 0;
  color: var(--azul-texto, #314e9d);
  font-weight: 800;
  line-height: 1.12;
  font-size: clamp(28px, 3.6vw, 44px);
  margin-bottom: 0;
}

/* Fila 1: línea verde en la columna de la imagen, a la altura del título */
.accent-line{
  grid-column: 2;
  align-self: start;                 /* se alinea con el inicio del título */
  justify-self: end;
  width: min(220px, 35%);
  height: 6px;
  background: var(--verde, #7cb928);
  border-radius: 6px;
  margin-top: clamp(6px, .8vw, 10px); /* fino ajuste vertical */
}

/* Fila 2: párrafo (col 1) */
.hero-parrafo{
  grid-column: 1;
  margin-top: 60px;              /* ajusta el espacio entre título y párrafo */
  margin-left: 0px;
  margin-right: 100px;
  font-size: clamp(10px, 1.2vw, 16px);
  line-height: 1.6;
  max-width: 56ch;
  color: #2a2f3a;
}

/* Fila 2: imagen (col 2) */
.hero-media{
  grid-column: 2;
  margin: 0;
  align-self: start;                 /* queda alineada a la altura del párrafo */
  justify-self: end;
}
.hero-media img{
  display: block;
  width: min(520px, 100%);
  height: auto;
  border-radius: 14px;
  border: 4px solid var(--naranja, #f8ad26); /* marco naranja como la referencia */
  box-shadow: var(--shadow, 0 4px 12px rgba(0,0,0,.06));
}

/* ===== responsive ===== */
@media (max-width: 960px){
  .hero-list__inner{
    grid-template-columns: 1fr;      /* apila */
  }
  .accent-line{
    justify-self: start;             /* la línea queda arriba a la izquierda */
    width: 160px;
    margin-top: 8px;
  }
  .hero-media{
    justify-self: start;
    margin-top: 8px;
  }
}

/* ===== ¿Cómo ayudamos? (iconos + texto, SIN fondo) ===== */
.servicios-grid{
  background: none;
  padding: clamp(28px, 6vw, 56px) 0;
}

.servicios-grid__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 28px);
}

/* Chip “¿Cómo ayudamos?” */
.servicios-chip{
  display: inline-block;
  background: var(--celeste, #44a4dc);
  color: #fff;
  font-weight: 800;
  padding: 10px 16px;
  border-radius: 999px;
  margin-bottom: clamp(18px, 3vw, 28px);
}

/* Grid de 3 tarjetas */
.servicios-cards{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 48px);
  margin: 0;
  padding: 0;
  align-items: start;
  text-align: center;
}

/* Ícono */
.servicio__icono{
  width: clamp(90px, 12vw, 140px);
  height: auto;
  display: block;
  margin: 0 auto clamp(12px, 1.6vw, 16px);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.06));
}

/* Título bajo el ícono */
.servicio__titulo{
  margin: 0;
  font-size: clamp(14px, 1.2vw, 16px);
  letter-spacing: .4px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--azul-texto, #314e9d);
}

/* Texto descriptivo corto */
.servicio__texto{
  margin: 6px auto 0;
  max-width: 34ch;
  font-size: clamp(12px, 1.05vw, 15px);
  line-height: 1.55;
  color: #2a2f3a;
}

.sec-subtitle{
  margin: 0 0 18px;
  font-size: clamp(22px, 2.6vw, 32px);
}

.chip{
  background: var(--celeste);
  color:#fff;
  padding: 10px 18px;
  border-radius: 999px;
  display:inline-block;
}

/* Responsive */
@media (max-width: 960px){
  .servicios-cards{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .servicios-cards{ grid-template-columns: 1fr; }
  .servicio__icono{ width: clamp(90px, 28vw, 130px); }
  .servicio__texto{ max-width: 40ch; }
}