.heroul {
  margin-bottom: 35px!important;
}

.heroul li{
  font-size: 18px;
  }

  .txtlittle{
    font-size: 14px;
    color: #52479E;
    font-style: italic;
    font-weight: bold;
    margin-top: 20px;
    fo
  }

.sub-serv{
  font-size: 20px;
  color: #52479E;
  text-align: center;
  font-style: italic;
  margin-bottom: 50px;
}

.serv-hr{

  border: 1px solid #D9E1F0;
  height: 1px;
  width: 100%; /* Ancho opcional */
  margin: 20px auto; /* Centrado y espacio */
}



.compromiso-title{
  color:#403780;
  font-size: 40px;
  text-align: center;
}



.compromiso-5{
  color: #8520CC;
  font-size: 18px;
  line-height: 1.0em!important;
  text-align: center;}

.compromiso-3{
  color:#8520CC;
  font-size: 40px;
  font-style: italic;
  line-height: 1.0em;
  text-transform: none!important;
  text-decoration-line: underline;
}

.service-prioridad{
    display: flex;
    align-items: end;
    gap: 20px;
}


.li-prioridad li{
  color: #403780;
  font-size: 18px;
  /*list-style-position: inside;*/
  /*list-style-image: url('images/check-circle-outline.png')!important;*/
}

#secmotion{
  background-color: #52479E;
  padding-top: 35px;
  padding-bottom: 35px;
}

#secmotion h2{
  color: #fff;
  text-align: center;
}

#secmotion h3{
  color: #D89FFF;
  text-align: center;
  font-size: 22px;
  text-transform: none!important;
  font-weight: normal!important;
}

#cta-serv{
  background-color: #52479E;
  border-top: 5px solid #D89FFF;
  padding-top: 80px;
  padding-bottom: 80px;
}

.servexp ul{
  list-style: none;
}

.servexp li{
  color: #403780;
  font-weight: bold;
  background-image: url('images/check-circle-outline.png');
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 30px;
  line-height: 1.8em;
}

.servexp li::marker{
  height: 5px!important;
}

.cta-servtitle{
  font-size: 60px;
  color: #fff;
  font-weight: bold;
  line-height: 1.0em;
  text-align: center;
}

.pwhite{
  color:#fff;
  font-size: 22px;
  text-align: center;
}

.cta-btserv{
  align-items: center;
  max-width:300px;
  min-width: 200px;
  margin-left: auto;
  margin-right: auto;
}

.cta-btserv a{
  background-color: #fff;
  padding: 20px;
  border-radius: 60px;
  color: #52479E;

}

.form-serv {
    background-color: #FFF;
    padding: 30px;
    border-radius: 10px;
    color: #333;

    align-items: center;
}

.form-serv p{
  text-align: center;
}

.form-serv label {
    display: block;
    margin-bottom: 5px;
    color: #6a0dad;
}

.form-serv input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.btn-submit {
    background-color: #6a0dad!important;
    color: #fff;
    width: 100%;
    padding: 10px;
}

.mockups-serv{
  width: 100%;
  /*border-radius: 15px;
  margin-top: 50px;
  box-shadow: 0 4px 8px 0 #E6E6F8;*/
}

.serv-ctas {
    justify-content: center;
    max-width:350px;
    min-width: 200px;
    margin-left: auto;
    margin-right: auto;
}

.separ{
  max-width:500px;
  margin-top: 50px;
  margin-bottom: 50px;
  margin-left:  auto;
  margin-right: auto;
  border: none;             /* Quita borde predeterminado */
  height: 1px;              /* Grosor de la línea */
  background-color: #52479E;

}

.fotoproy{
  width: 100%;    /* La imagen llena el ancho del contenedor */
  height: auto;   /* La altura se ajusta proporcionalmente */
  display: block; /* Elimina espacios en blanco inferiores */
}


.textfooter{
  color: #52479E;
  font-size: 13px;

}

.textfooter a{
  color: #fff;
  text-align: center;
}

.card{
    background: #EEF2FA;
    border: 1px solid #D9E1F0;
    border-radius: 28px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;
    padding:30px;
    align-items: center;

}

/* Hover suave de toda la card */
.card:hover{
    transform: translateY(-4px);
    box-shadow: 0 4px 8px 0 #E6E6F8;
}

.secthanks{
  margin-top: 0px;
}

.imgthanks img{
  max-width: 200px;
  height: auto;
  margin-top: 25px;
}

.secthanks h1{
  color: #52479E;
  text-align: center;
}

.secthanks h2{
  font-size: 28px;
}

.secthanks h3{
  font-size: 24px;
  color:#52479E;
  text-transform: none!important;
}

.secthanks p{
  margin-bottom: 25px;
}

.secthanks a{
  color:#8520CC;
}

.titcomplet{
  font-size: 36px;
  color: #52479E;
  text-align: center;
}

.cards{
  background: #EEF2FA;
  border: 1px solid #D9E1F0;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  padding: 15px;
  margin-bottom: 20px;
}

.cards ol{
  margin-left: 20px;
  margin-bottom: 20px;
}


/* ==========================================
   SERVICES SECTION
========================================== */

#servicios{
    padding-bottom: 90px;
}

.service-card{
    background: #EEF2FA;
    border: 1px solid #D9E1F0;
    border-radius: 28px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;

}

/* Hover suave de toda la card */
.service-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 4px 8px 0 #E6E6F8;
}

/* ==========================================
   IMAGE
========================================== */

.service-image-wrapper{
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    margin: 20px 20px 0 20px;
    height: 250px;
}

/* IMPORTANTE:
   El zoom SOLO afecta a la imagen */
.service-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    transition: transform 0.6s ease;
}

/* Zoom In */
.service-card:hover .service-image{
    transform: scale(1.08);
}

/* ==========================================
   ICON
========================================== */

.service-icon{
    position: absolute;
    /*top: 18px;
    left: 18px;
    z-index: 3;*/
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
    0 4px 10px rgba(0,0,0,0.08);
}

/* El icono NO recibe zoom */
.service-icon img{
    width: 26px;
    height: 26px;
}

/* ==========================================
   CONTENT
========================================== */

.service-content{
    padding: 30px;
}

.service-title{
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    line-height: 1.15em;
    font-weight: bold;
    color: #3F3A89;
    margin-bottom: 20px;
    text-transform: none!important;
}

/* ==========================================
   INCLUDES
========================================== */

.service-includes h4{
    color: #8D0BE8;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 18px;
}

.service-includes ul{
    padding-left: 22px;
}

.service-includes li{
    margin-bottom: 12px;
    font-size: 18px;
}

/* ==========================================
   FOOTER
========================================== */

.service-footer{
    display: flex;
    align-items: end;
    gap: 20px;
    margin-top: 30px;
}

.service-ideal{
    display: block;
    font-size: 16px;
    color: #52479E;
    line-height: 0.6em;
    font-weight: bold;
}

.service-ideal em{
    font-style: italic;
}

.service-price h4{
    display: block;
    font-size: 14px;
    letter-spacing: 2px;
    color: #A1A4BC;
    margin-bottom: 5px;
}

.service-price strong{
    font-size: 26px;
    line-height: 1.1em;
    color: #3F3A89;
}

.service-link{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #8D0BE8;
    font-weight: 700;
    font-size: 20px;
    transition: all 0.3s ease;

}

.link-consulta{
  margin-left: 20px;
}

.link-consulta a{
  text-align: right;
}

.service-link img{
    transition: transform 0.3s ease;
}

.service-link:hover img{
    transform: translateX(4px);
}

/* Seccion Hook*/

#hook{
  padding-top: 80px;
  padding-bottom: 80px;
}

#hook h2{
  font-size: 38px;
  color: #52479E;
  margin-bottom: 10px;
  text-align: center;
}

#hook h3{
  color: #403780;
  font-size: 22px;
  text-transform: none!important;
  font-weight: bold!important;
  margin-bottom: 0px!important;
}

#hook h5{
  font-size: 18px;
  font-style: italic;
  color:#8520CC;
  text-align: center;
  margin-bottom: 30px;
}

#hook ol{
  padding-left: 45px;
  padding-right: 20px;
  padding-bottom: 25px;
  padding-top: 25px;
}

/****/

.btn-agenda{
  max-width: 700px;
  background-color: #52479E;
  color: #fff;
  border-radius: 50px;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 4px 8px 0 #CCCDE7;
}

.serv-ctas ul{

}

.serv-ctas li{
  font-size: 16px;
  margin-top: 15px;
  font-style: italic;
  list-style: none;
padding-left: 25px;
  line-height: 1.2em;
  background-image: url('images/check-circle-outline.png');
  background-position: left;
  background-repeat: no-repeat;
}

/* Contenedor principal */
.contenedor-acordeon {
  /*max-width: 600px;*/
  margin: 2rem auto;

}

/* Estilo para cada elemento details */
details {
  /*background-color: #CCCDE7;*/
  border: 1px solid #CCCDE7;
  border-radius: 8px;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Título del acordeón */
summary {
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  background-color: #E6E6F8;
  outline: none;
  transition: background-color 0.3s ease;
  background-image: url('images/icon-arrow.png');
  background-position: right 20px center;
  background-repeat: no-repeat;
  list-style: none; /* Oculta la flecha por defecto en algunos navegadores */
}

/* Agrega un efecto hover al título */
summary:hover {
  background-color: #F5F9FF;
}

/* Oculta la flecha por defecto en Chrome/Safari */
summary::-webkit-details-marker {
  display: none;
}

/* Contenido dentro del acordeón */
details p {
  padding: 1.2rem;
  margin: 0;
  color: #403780;
  line-height: 1.2;
}
details::details-content {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease, content-visibility 0.3s ease allow-discrete;
}

details[open]::details-content {
  opacity: 1;
  transform: translateY(0);
}

.mailto{
  color: #8520CC;
}

.mailto:hover{
  color: #403780;
}
/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 768px){

    .service-card{
        margin-bottom: 25px;
    }

    .service-title{
        font-size: 28px;
    }

    .service-description{
        font-size: 17px;
    }

    .service-footer{
        flex-direction: column;
        align-items: flex-start;
    }

    .service-price strong{
        font-size: 28px;
    }

    .service-image-wrapper{
        height: 220px;
    }

}