/* HERO */
  


.hero {
  background: linear-gradient(180deg, var(--blue-main), var(--blue-soft));
  color: white;
  position: relative;
  padding: 2rem 0rem 7rem 0rem;
}

.hero-card p{ 
  padding-top: 10px;
}


.hero_h1{
  display: inline;
  width: fit-content;
  text-align: center;
  font-size: var(--textExtaLg);
  margin-bottom: 1rem;
}


/*crear pseudo elemento a la derecha de h1*/
/* Regla común para ambas comillas */
.hero_h1::before,
.hero_h1::after {
    font-family: serif; /* Las fuentes con serif suelen tener comillas más elegantes */
    font-size: 5rem;    /* Tamaño gigante */
    position: absolute;
    color: #ffffff;     /* Un color llamativo (ajústalo a tu paleta) */
    opacity: 0.3;       /* Un toque de transparencia las hace ver más modernas */
    line-height: 1;
}

/* Comilla de apertura */
.hero_h1::before {
    content: '“';
    /* left: 20px; */
}


/* Comilla de cierre */
.hero_h1::after {
    content: '”';
    /* right: -10px;
    bottom: -40px; */
}



.hero-content h2 {
  text-align: center;
  font-size: var(--textMd);
  margin-bottom: 0rem;
}

.hero-content p {
  text-align: center;
  font-size: var(--textMd);
  margin-bottom: 2rem;
}



.btn-primary {
  background: white;
  color: var(--blue-dark);
  padding: 0.9rem 1.6rem;
  text-decoration: none;
  font-weight: 600;
  border-radius: 6px;
}

  .sellos-content{
    margin-top: 10px;
  }

.figsello {
  max-width: 1100px;
  min-width: 320px;
  /*gap: 10px;*/ /* Espacio entre imágenes */
  width: 100%; /* El figure ocupa todo el ancho disponible */
}

.figsello img {
    width: var(--wlogo);
    height: auto;
    margin: 0px var(--marglogo);
}

/*afectar al primer elemento img de .figsello */
.figsello > img:first-child {
    margin-left: 0;
}
.figsello > img:last-child {
    margin-right: 0;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
}

@media (max-width: 480px){

  .hero_h1{
    font-size: var(--textMd);
  }

  .hero_h1::before,
  .hero_h1::after {
    font-size: var(--textExtaLg);
  }

  .hero-card{ 
    background-color: rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 14px;
  }
  .hero-content p {
    margin-bottom: 0rem;
  }
  .figsello img {
    width: 28%;
    margin: 0px 1%;
  }


}