@import url("variables.css");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Dsignes';
}

html,
body {
  overflow-x: hidden;
  width: 100%;
  font-family: 'Dsignes'
}
html {
  scroll-behavior: smooth;
}

.nav {
  display: flex;
  background-color: white;
  padding: 5px 10px 5px 10px;
  margin: 0;
  width: 100vw;
  justify-content: space-around;
  align-items: center;
  align-content: center;
  position: fixed;
  border-bottom: 1px solid gainsboro;
  z-index: 2;
}

#containerLogo {
  display: flex;
}

#containerLogo img {
  height: 50px;
}

.listMenu {
  display: flex;
  background-color: var(--blanco);
  padding: 4px;
  text-align: center;
}

.menuLinks {
  display: flex;
  list-style: none;
  gap: 30px;
  flex-direction: row;
  text-align: center;
}

.linksNavbar {
  text-decoration: none;
  color: var(--negro);
  font-size: 1rem;
  transition: color 0.3s ease, border-bottom 0.3s ease;
}

.linksNavbar.active-link {
  color: var(--primary);
  font-weight: bold;
  border-bottom: 2px solid var(--primary);
}


.containerSocialNetworks {
  width: 100px;
  height: 35px;
}

.menuButton {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
}

.language-selector {
  position: relative;
  display: inline-block;
  z-index: 1000;
}

.language-current {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-color, #ffffff);
  border: 1px solid var(--border-color, #e1e5e9);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 70px;
}

.language-current:hover {
  background: var(--hover-bg, #f8f9fa);
  box-shadow:0 4px 10px rgba(0, 0, 0, 0.1);
}

.language-current img {
  width: 20px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}

.language-arrow {
  font-size: 12px;
  color: var(--text-muted, #6c757d);
  margin-left: auto;
  transition: transform 0.2s ease;
}

.language-selector.active .language-arrow {
  transform: rotate(180deg);
}

.language-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-color, #ffffff);
  border: 1px solid var(--border-color, #e1e5e9);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
}

.language-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.language-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  position: relative;
}

.language-option:hover {
  background: var(--hover-bg, var(--primaryMoreLight));
}

.language-option img {
  width: 20px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}

.language-option span:not(.checkmark) {
  font-size: 14px;
  color: var(--text-color, #333);
  flex: 1;
}

.language-option .checkmark {
  font-size: 14px;
  color: var(--primary, #007bff);
  font-weight: bold;
  margin-left: auto;
  display: none;
}

.language-option.selected .checkmark {
  display: inline-block;
}

.language-option.selected {
  background: var(--primarySelected,rgba(0, 38, 255, 0.1));
  color: var(--primary);
}

.language-option.selected span:not(.checkmark) {
  color: var(--primary);
  font-weight: 500;
}

@media (max-width: 768px) {
  .language-selector {
    width: 100%;
    max-width: 150px;
  }

  .language-current {
    width: 100%;
    justify-content: space-between;
  }

  .language-dropdown {
    left: 0;
    right: 0;
    width: 100%;
    min-width: 150px;
  }
  .language-dropdown {

    min-width: 120px;

  }
}

.nav-right-section {
  display: flex;
  align-items: center;
  gap: 15px;
}
@media (max-width: 768px) {
  nav {
    justify-content: space-between;
  }

  .menuLinks {
    display: flex;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    width: 100%;
    flex-direction: column;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
    padding: 0;
    align-items: center;
    gap: 30px;
    justify-content: center;
  }

  #containerLogo {
    margin-right: auto;
  }

  .listMenu {
    display: flex;
    text-align: end;
  }

  .menuButton {
    display: flex;
    padding-right: 15px;
    font-size: 26px;
  }

  .menuLinks.show {
    display: flex;
    background-color: var(--blanco);
    max-height: 300px;
    align-items: center;
    gap: 30px;
    padding: 30px;
    justify-content: center;
    opacity: 1;
    border-bottom: 1px solid gainsboro;
  }
  .linksNavbar.active-link {
    border-bottom: 2px solid var(--primary);
    padding: 0.5rem 1rem;
  }
}
 /* -----------------Hasta aquí estilos de la Navbar-------------------------- */
#hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100vh;
  background: linear-gradient(rgba(47, 24, 101, 0.7) 0%, rgba(35, 44, 73, 0.75) 45%, #2f1b50 100%), url('/images/hero-bg.jpg') no-repeat center center/cover;
  color: var(--blanco);
  padding: 20px;
}

.hero-content h1 {
  font-size: 6rem;
  margin-bottom: 10px;
  max-width: 900px;
}

.hero-content p {
  font-size: 1.5rem;
  margin-top: 30px;
  margin-bottom: 40px;
}

.hero-button {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--blanco);
  background-color: var(--secondary);
  border-radius: 5px;
  text-decoration: none;
  transition: background 0.3s ease-in-out;
  border: 2px solid var(--secondary);
}

.hero-button:hover {
  background-color: var(--secondaryMoreLight);
  color: var(--secondary);
  border: 2px solid var(--secondary);
}


@media (max-width: 768px) {
  #hero {
    height: 88vh;
    padding: 40px;
  }

  .hero-content h1 {
    font-size: 3.3rem;
  }

  .hero-content p {
    font-size: 1.2rem;
  }

  .hero-button {
    font-size: 1rem;
    padding: 8px 16px;
  }
}


#clients-carousel {
  text-align: center;
  padding: 20px 0;
  background-color: var(--secondary);
}



.clients-swiper {
  width: 87%;
  max-width: 900px;
  margin: 0 auto;
  padding-top: 5em;
}

.swiper-slide img {
  max-width: 140px;
  height: auto;
}


@media (max-width: 768px) {
  .swiper-slide img {
    max-width: 100px;
  }
}

/* -----------------------------------------------Finaliza Carrousel------------------------------ */


.beneficios-section {
  padding:0 1.3em;
  padding-top: 5em;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 65.1%, #FFF 100%), linear-gradient(90deg, rgba(67, 165, 255, 0.20) 0.3%, rgba(242, 163, 255, 0.20) 99.77%);
}

.beneficios-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

.beneficios-title {
  font-size: 2.5em;
  margin-bottom: 10px;
  color: var(--boton);
  text-align: center;
}

.beneficios-subtitle {
  font-size: 1.2em;
  color: var(--primary);
  font-weight: 500;
  margin-top: 20px;
  margin-bottom: 30px;
}

.beneficios-cta {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--boton);
  color: var(--blanco);
  text-decoration: none;
  border-radius: 8px;
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 60px;
  border: 2px solid var(--boton);
  transition: background-color 0.3s ease;
}

@media (hover: hover) {
  .beneficios-cta:hover {
    background-color: var(--primaryMoreLight);
    color: var(--primary);
    border: 2px solid var(--primary);
  }
}

.beneficios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 30px;
}

.beneficio-card {
  background-color: var(--grisCard);
  border: 2px solid var(--secondaryMoreLight);
  border-radius: 12px;
  padding: 20px 10px;
  box-shadow: 0 12px 18px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.beneficio-icon-wrapper {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: var(--secondary);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.beneficio-icon {
  font-size: 40px !important;
  color: var(--blanco);
  line-height: 1;
}


.beneficio-titulo {
  font-size: 1em;
  color: var(--boton);
  margin-bottom: 10px;
  font-weight: 500;
}

.beneficio-desc {
  color: var(--grisOscuro);
  font-size: 1em;
  line-height: 1.5;
  max-width: 170px;
  text-align: center;

}

@media (max-width: 768px) {
  .beneficios-cta:hover {
    background-color: var(--primaryMoreLight);
    color: var(--primary);
    border: 2px solid var(--primary);
  }
  .beneficio-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 15px;
    min-width: 280px;
    min-height: auto;
    padding: 15px;
  }

  .beneficio-icon-wrapper {
    width: 60px;
    height: 60px;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .beneficio-icon {
    font-size: 32px !important;
  }

  .beneficio-contenido {
    flex: 1;
  }

  .beneficio-titulo {
    font-size: 1.2em;
    margin-bottom: 5px;
  }

  .beneficio-desc {
    font-size: 1.1em;
  }

  .beneficios-title {
    max-width: 300px;
    margin: auto;
  }
  .beneficios-section {
    padding-top: 2em;
  }
}


.seccion-productos {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 60px 0;
  align-items: center;
  gap: 40px;
  max-width: 1000px;
  margin: auto;
}

.contenido-texto {
  flex: 1;
  min-width: 300px;
}

.contenido-texto h2 {
  font-size: 2.5rem;
  color: var(--boton);
  margin-bottom: 30px;
}

.contenido-texto p {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 30px;
  color: var(--primary);
}

.btn-cta {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  background-color: var(--secondary);
  color: var(--blanco);
  font-weight: bold;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.3s ease;
  border: 2px solid var(--secondary);
}

.btn-cta:hover {
  background-color: var(--secondaryMoreLight);
  color: var(--secondary);
  border: 2px solid var(--secondary);
}

.contenido-carrusel {
  flex: 1;
  min-width: 300px;
}

.productos-swiper .swiper-slide {
  text-align: center;

}

.productos-swiper img {
  width: 100%;
  max-width: 250px;
  height: auto;
}

.productos-swiper p {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--primary);
  padding: 0px 10px 10px;
}

@media (max-width: 768px) {
  .seccion-productos {
    padding: 60px 40px;
  }

  .productos-swiper img {
    width: 100%;
    max-width: 200px;
    height: auto;

  }

  .productos-swiper p {
    font-size: 1.1rem;
    color: #434142;
    padding: 0px 10px 10px;
  }
}

/*---------------------------------------------- Estilos del -------------------------------------------footer */

.footer {
  background-color: var(--primary);
  color: white;
  font-size: 14px;
  padding: 2rem 1rem;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6rem;
  padding: 0 20px;
  margin: 0 auto;
}

.footer-column-address {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-left: 30px;
}

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding-left: 20px;
  margin-top: 40px;
}

.linksLegal{
  padding: 40px;
}

.footer-logo {
  width: 120px;
  display: flex;
  align-items: start;
}

.footer-heading {
  display: flex;
  text-align: center;
  color: #20A29A;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 5px;
}


.address-text {
  color: white;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column ul li {
  margin-bottom: 0.5rem;
}

.footer-column ul li a {
  color: #f9f9f9;
  text-decoration: none;
}

.footer-column ul li a:hover {
  text-decoration: underline;
}

.footer-social {
  margin-top: 10px;
}

.footer-social a {
  margin-right: 0.5rem;
}


.linksSiteFooter {
  justify-items: center;
  align-items: center;
}

.footer-logos {
  display: flex;
  flex-direction: column;

  margin-top: 0.2rem;
  align-items: start;
}

.footer-logo-box img {
  width: 180px;
}

@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .footer-column {
    padding-left: 0;
    margin: 0;
    box-sizing: border-box;

  }

  .footer-logo-box img {
    width: 155px;
  }

  .linksSiteFooter {
    display: flex;
    justify-items: center;
    margin-top: 15px;
  }

  .footer-column-address {
    padding-left: 0;
  }

}

/* --------------------------------------------------Hasta aqui estilos del footer--------------------------------------------  */


.page-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  margin-top: 65px;
  min-height: 250px;
  width: 100%;
  overflow: hidden;
  --bg-position-y: center;
  background-color: #20A29A;
}

.page-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(47, 24, 101, 0.6) 100%, #2f1b50 100%), var(--bg-image);
  background-repeat: no-repeat;
  background-position: center var(--bg-position-y);
  background-size: cover;
}

.page-header .container {
  display: flex;
  position: relative;

}

.page-header-content {
  display: flex;
  flex-direction: column;
  align-items: center;

  max-width: 800px;
  padding: 0 20px;
}

.page-header h1 {
  margin: 0 0 10px;
  font-size: 55px;
  text-shadow: 1px 1px 3px rgba(47, 24, 101, 0.6);
  text-align: center;
}

.page-header p {
  margin: 0;
  font-size: 24px;
  text-align: center;
}

/*------------------------------------------------------- Hasta aquí los estilos de banners ------------*/

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  padding: 3rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.card {
  width: min(260px, 100%);
  margin: auto;
  background-color: #f4f5f2;
  text-align: center;
  border-top-left-radius: 4rem;
  border: 2px solid var(--blanco);
  position: relative;
  border: 1px solid gainsboro;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


.card__body {
  padding: 1rem;
  max-width: 25ch;
  height: 250px;
  margin: auto;
}

.card__icon {
  margin-top: 1rem;

}

.card__title {
  font-weight: 600;
  color: var(--primary);
  font-size: 1.1rem;
  margin-block: 1.5rem 0.75rem;
}

.card__paragraph {
  color: var(--grisOscuro);
  font-size: 0.875rem;
}


.card__ribbon {
  margin-top: 1.5rem;
  display: grid;
  place-items: center;
  height: 50px;
  background-color: var(--primary);
  position: relative;
  width: 110%;
  left: -5%;
  top: 10px;
  border-radius: 0 0 2rem 2rem;
}

.card__ribbon::after,
.card__ribbon::before {
  content: "";
  position: absolute;
  width: 20px;
  aspect-ratio: 1/1;
  bottom: 100%;
  z-index: -2;
  background-color: var(--primary);
}

.card__ribbon::before {
  left: 0;
  transform-origin: left bottom;
  transform: rotate(45deg);
}

.card__ribbon::after {
  right: 0;
  transform-origin: right bottom;
  transform: rotate(-45deg);
}

.card__ribbon-label {
  display: block;
  width: 84px;
  aspect-ratio: 1/1;
  background-color: var(--blanco);
  position: relative;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 8px solid var(--primary);
  display: grid;
  place-items: center;
  font-weight: 900;
  line-height: 1;
  font-size: 1.5rem;
}

.card__ribbon-label::before,
.card__ribbon-label::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  bottom: 50%;
}

.card__ribbon-label::before {
  right: calc(100% + 4px);
  border-bottom-right-radius: 20px;
  box-shadow: 5px 5px 0 var(--primary);
}

.card__ribbon-label::after {
  left: calc(100% + 4px);
  border-bottom-left-radius: 20px;
  box-shadow: -5px 5px 0 var(--primary);
}

/* ---------------------------Hasta aqui los estilos de las Cards de servicio-------------- */

.containerHeroServices {
  width: 100vw;
  background-color: #20A29A;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: 40px;
  margin-bottom: 60px;
}

.heroServices {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto;

  padding: 4rem 2rem;
  min-height: 80vh;
  gap: 6rem;
  background-color: var(--grisCard);
  flex-wrap: wrap;
  max-width: 1200px;
  border-radius: 40px;
}

.hero__text {
  max-width: 400px;
  height: 250px;
  background-color: #f0f0f0;
  border-radius: 54% 100% 46% 74% / 38% 62% 42% 78%;
}

.hero__text h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  text-align: center;
  color: var(--boton);
}

.hero__text p {
  font-size: 1.4rem;
  color: var(--primary);
  font-weight: bold;
  text-align: center;
  max-width: 500px;
}

.hero__image-container {
  position: relative;
  flex: 1 1 400px;
  height: 400px;
  overflow: hidden;
  border-radius: 1rem;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 0;
}

.hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 768px) {
  .heroServices {
    flex-direction: column;
    text-align: center;
    padding: 2rem 1rem;
    gap: 1em;
  }

  .hero__image-container {
    order: 2;
    width: 100%;
    height: 300px;
    margin-top: 1rem;
  }

  .hero__text {
    height: 200px;
  }

  .hero__text h1 {
    font-size: 2.5rem;
  }

  .hero__text p {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--primary);
  }
}

/* ------------------------- Hasta aqui los estilos del hero de servicios ------------------------------*/

.timeline-container {
  padding: 2rem;
  max-width: 1200px;
  margin: auto;
  margin-bottom: 70px;
  background-color: var(--primaryMoreLight);
  border-radius: 70px 0px 70px 70px;
  box-shadow: 5px 5px 5px 0px rgba(148, 141, 178, 0.3);
}

.timeline-title {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 2rem;
  color: var(--grisOscuro);
}

.timeline {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: 2rem 0;
  z-index: 1;
  align-items: flex-start;
}

.timeline-item {
  text-align: center;
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 200px;
}

.timeline-circle {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--blanco);
  border: 4px solid var(--secondary);
  font-weight: bold;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  font-size: 1.2rem;
  line-height: 1;
}

.timeline-line {
  position: absolute;
  height: 6px;
  background: linear-gradient(to right, var(--primary), var(--primaryLight), var(--secondary), var(--secondaryLight));
  top: 27px;
  left: 50%;
  right: -50%;
  z-index: 1;
}

.timeline-item:last-child .timeline-line {
  display: none;
}

.timeline-content {
  margin-top: 1.5rem;
  max-width: 200px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 120px;
}

.timeline-content h3 {
  margin: 0.5rem 0;
  line-height: 1.3;
  font-size: 1.1rem;
  font-weight: 600;
}

.timeline-content p {
  font-size: 0.95rem;
  color: var(--grisOscuro);
  line-height: 1.4;
  margin: 0.5rem 0;
  text-align: center;
  min-height: 60px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

@media (max-width: 768px) {
  .timeline-container {
    margin-bottom: 40px;
    width: 90%;
    padding: 1.5rem;
  }

  .timeline {
    flex-direction: column;
    align-items: stretch;
    position: relative;
  }

  .timeline-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    position: relative;
    margin-bottom: 2rem;
    min-height: auto;
    text-align: left;
  }

  .timeline-line {
    position: absolute;
    width: 6px;
    height: calc(100% + 2rem);
    top: 60px;
    left: 27px;
    right: auto;
    background: linear-gradient(to bottom, var(--primary), var(--primaryLight), var(--secondary), var(--secondaryLight));
    z-index: 0;
  }

  .timeline-item:last-child .timeline-line {
    display: none;
  }

  .timeline-circle {
    width: 50px;
    height: 50px;
    font-size: 1rem;
    border: 3px solid var(--secondary);
    position: relative;
    left: 0;
    top: 0;
    margin-right: 1.5rem;
    flex-shrink: 0;
  }

  .timeline-content {
    margin-top: 0;
    margin-left: 0;
    max-width: none;
    flex: 1;
    min-height: auto;
    align-items: flex-start;
  }

  .timeline-content h3 {
    margin: 0 0 0.5rem 0;
    text-align: left;
  }

  .timeline-content p {
    font-size: 0.9rem;
    text-align: left;
    min-height: auto;
    align-items: flex-start;
  }
}

* {
  box-sizing: border-box;
}

@media (min-width: 769px) {
  .timeline-container {
    transform: scale(1);
    transform-origin: center;
  }
}

@media (min-width: 1400px) {
  .timeline-container {
    max-width: 1400px;
  }

  .timeline-content {
    max-width: 250px;
  }
}

/*---------------------------- Hasta aqui estilos de la linea de tiempo -------------------------- */

.hero-servicios {
  padding: 60px 20px;
  background-color: var(--blanco);
}

.hero-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
  position: relative;
}

.hero-texto h1 {
  font-size: 2.8em;
  color: var(--boton);
  margin-bottom: 10px;
  line-height: 1.2;
}

.hero-texto h2 {
  font-size: 1.5em;
  color: var(--boton);
  margin-bottom: 20px;
  background-color: var(--grisCard);
  padding: 20px;
  padding-left: 30px;
  border-radius: 54% 100% 46% 74% / 38% 62% 42% 78%;
}

.hero-texto p {
  font-size: 1.1em;
  color: var(--grisOscuro);
  margin-bottom: 30px;
  font-weight: 500;
}

.btn-hero {
  background-color: var(--boton);
  color: var(--blanco);
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background 0.3s;
  display: inline-block;
}

.btn-hero:hover {
  background-color: #360061;
}

.hero-imagen {
  position: relative;
  width: 100%;
}

.hero-imagen img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  z-index: 1;
  position: relative;
  display: block;
}

.fondo-superpuesto {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 100%;
  height: 100%;
  background-color: var(--blanco);
  border-radius: 20px;
  transform: rotate(-2deg);
  z-index: 0;
}

.hero-beneficios {
  margin: 1.5rem 0;
}

.beneficio-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.8rem;
  padding: 10px 0;
}

.beneficio-item .material-icons {
  margin-right: 10px;
  color: var(--secondary);
  flex-shrink: 0;
  font-size: 35px;
}

.beneficio-item p {
  margin: 0;
  line-height: 1.4;
}


@media screen and (max-width: 1024px) {
  .hero-container {
    gap: 40px;
  }

  .hero-texto h1 {
    font-size: 2.4em;
  }
}

@media screen and (max-width: 768px) {
  .hero-servicios {
    padding: 40px 20px;
  }

  .hero-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .hero-texto {
    order: 1;
    text-align: center;
  }

  .hero-imagen {
    order: 0;
    max-width: 80%;
    margin: 0 auto;
  }

  .fondo-superpuesto {
    top: -15px;
    left: -15px;
  }

  .beneficio-item {
    text-align: left;
    justify-content: flex-start;
  }
}

@media screen and (max-width: 480px) {
  .hero-servicios {
    padding: 30px 15px;
  }

  .hero-texto h1 {
    font-size: 2em;
  }

  .hero-texto h2 {
    font-size: 1.3em;
  }

  .hero-imagen {
    max-width: 100%;
  }

  .fondo-superpuesto {
    top: -10px;
    left: -10px;
  }
}

/*-------------- Hasta aqui el hero de-------------------- productos */

.box {
  background-color: var(--blanco);
  border-radius: 10px;
}

.boxBackground {
  padding-bottom: 100px;
  padding-top: 100px;
}

.box h2,
.box h3,
.box img {
  max-width: 100%;
  word-break: break-word;
}

.producto-box1 {
  background-color: var(--blanco);
  box-shadow: 0px 14px 18px -3px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.producto-box2 {
  background-color: var(--secondary);
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.box2,
.box2 h2 {
  display: flex;
  align-items: center;
}

.box2 {
  color: var(--blanco);
  justify-content: center;
  padding: 1em;
}

.box3 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  background-color: var(--grisCard);
  color: var(--grisOscuro);
  border: 1px solid var(--gris);
  border-radius: 10px;
  padding: 10px;
  min-height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0px 20px 15px -10px rgba(0, 0, 0, 0.1);
}

.btn-producto1 {
  background-color: var(--secondary);
  color: var(--blanco);
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background 0.3s;
  width: 100%;
  max-width: 150px;
  box-sizing: border-box;
  text-align: center;
  margin-right: 30px;
  align-self: flex-end;
}

.box4 img {
  width: 100%;
  height: 11.25em;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

.box5 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}


.grid-container {
  display: grid;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3em;
  gap: 1.5em;
  border-radius: 10px;
  background-color: var(--blanco);
  border: 3px solid var(--secondaryLight);
  box-sizing: border-box;
  grid-template-columns: 1fr 1fr 2fr 1fr;
  grid-template-areas:
    "box-1 box-1 box-2 box-2 "
    "box-1 box-1 box-3 box-3"
    "box-1 box-1 box-3 box-3"
    "box-4 box-5 box-3 box-3";
}

.bentoLogo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
}

.bentoLogo img {
  width: 40%;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
}

.icono-contenedor {
  display: inline-flex;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  background-color: var(--secondary);
  color: white;
  justify-content: center;
  padding: 0.6rem;
  align-items: center;
}

.icono-contenedor .material-symbols-outlined {
  font-size: 1.5em;
  line-height: 1;
}

[class^="paragraph"] {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: 5px;
}

[class^="paragraph"] img {
  display: none;
}

@media (max-width: 768px) {

  .bentoLogo img {
    width: 80%;
  }

  .grid-container {
    display: grid;
    margin: 0 auto;
    margin-top: 20px;
    padding: 1em;
    gap: 0.5em;
    padding-top: 30px;
    grid-template-columns: 50px 75px 100px 75px;
    grid-template-areas:
      "box-1 box-1 box-2 box-2"
      "box-3 box-3 box-3 box-3"
      "box-3 box-3 box-3 box-3"
      "box-4 box-4 box-4 box-4";
  }


  .box3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;

    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }

  [class^="paragraph"] {
    margin-bottom: 10px;
  }

  .btn-producto1 {
    max-width: 100%;
    width: fit-content;
    align-self: flex-end;
    margin: 0;
  }

  .box2 {
    font-size: 12px;
    text-align: center;
  }

  .boxBackground {
    padding: 10px;
  }
}
@media (max-width: 1024px) {
  .bentoLogo img {
    width: 60%; 
    max-width: 280px; 
  }

  .grid-container {
    padding: 2em; 
    gap: 1em; 
    padding-top: 30px;

    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "box-1 box-1" 
      "box-2 box-2" 
      "box-3 box-3" 
      "box-4 box-5"; 
  }

  .box3 {
    padding: 1rem;
    justify-content: flex-start;
    height: auto;
  }

  [class^="paragraph"] {
    margin-bottom: 0.8em;
    font-size: 0.95em; 
  }

  .btn-producto1 {
    max-width: 180px; 
    align-self: center;
    margin: 15px auto 0 auto; 
    padding: 10px 20px; 
    font-size: 0.9em;
  }

  .box2 {
    font-size: 1.1em; 
    text-align: center;
    padding: 15px; 
  }

  .boxBackground {
    padding: 15px; 
  }

  .box4 img,
  .box5 img {
    height: 9em; 
  }
}

/* hasta aqui el bento grid */

.infoSection {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--grisCard);
  height: 700px;
  padding: 5em;
}

.containerContacto {
  display: flex;
  justify-content: space-between;
  height: 500px;
  background-color: #f0f2ff;
  padding: 2em;
  border-radius: 54% 83% 34% 100% / 36% 48% 42% 53%;
  gap: 2em;
}

.emailContacto {
  font-size: 1.5em;
}

.emailContacto a {
  text-decoration: none;
  color: var(--primary);
  font-weight: 500;
}

.izquierdo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  width: 60%;
  padding: 2em;
  gap: 1em;
}


.contactoTitulo {
  font-size: 3.5em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.contactoDescripcion {
  font-size: 1.5em;
  color: var(--grisOscuro);
}

.redesSociales {
  display: flex;
  gap: 1em;
  margin-top: 1.5em;
}

.iconoRed {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: var(--secondary);
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.iconoRed:hover {
  transform: scale(1.1);
}

.iconoRed img {
  width: 30px;
  height: 30px;
}

.derecho {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--secondaryLight);
  height: 100%;
  width: 75%;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  background: linear-gradient(45deg, rgb(48, 35, 174) 0%, rgb(255, 0, 153) 100%) rgb(255, 0, 153);
  overflow: hidden;

}

.imagenContacto {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media screen and (max-width: 1024px) {
  .infoSection {
    height: auto;
    padding: 3em 2em;
  }

  .containerContacto {
    flex-direction: column;
    align-items: center;
    height: auto;
    padding: 2em 1.5em;
    border-radius: 30px;
    gap: 2em;
  }

  .izquierdo {
    width: 100%;
    padding: 1.5em;
    align-items: center;
    text-align: center;
  }

  .contactoTitulo {
    font-size: 2.5em;
  }

  .contactoDescripcion,
  .emailContacto {
    font-size: 1.2em;
  }

  .redesSociales {
    justify-content: center;
  }

  .derecho {
    width: 100%;
    height: auto;
    border-radius: 30px;
  }

  .imagenContacto {
    width: 80%;
    height: auto;
  }
}

@media screen and (max-width: 600px) {
  .contactoTitulo {
    font-size: 2em;
  }

  .contactoDescripcion,
  .emailContacto {
    font-size: 1.4em;
  }

  .iconoRed {
    width: 40px;
    height: 40px;
  }

  .iconoRed img {
    width: 20px;
    height: 20px;
  }
}

/* -------------Hasta aqui info de correo -----------------------*/
.containerMap {
  max-width: 1200px;
  height: 500px;
  margin: auto;
  margin-top: 80px;
  margin-bottom: 80px;
  border-radius: 8px;
  box-sizing: border-box;
  background-color: var(--secondaryMoreLight);
}

.boxTotalMap {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  align-items: stretch;
}

.infoOffice {
  flex: 1 1 300px;
  padding: 1.5em;
  height: 500px;
  background-color: var(--grisCard);
  border-radius: 8px 45px 45px 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.infoOffice .title {
  color: var(--primary);
  margin-bottom: 1em;
}

.ImageOffice {
  border-radius: 6px;
  overflow: hidden;
}

.ImageOffice img {
  display: block;
  width: 100%;
  height: auto;
}

.boxMap {
  flex: 1 1 400px;
  height: 500px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.boxMap iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

@media (max-width: 768px) {
  .containerMap {
    padding-bottom: 2em;
    margin-bottom: 120px;
  }

  .boxTotalMap {
    flex-direction: column;
    margin-bottom: 50px;
  }

  .infoOffice {
    border-radius: 8px;
    margin-bottom: 1.5em;
  }


  .infoOffice,
  .boxMap {
    width: 100%;

  }

  .boxMap iframe {
    height: 200px;
  }
}

/* Hasta aqui los estilos del mapa */
.sobreSection {
  background-color: var(--fondoClaro);
  padding: 5em 2em;
}

.sobreContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3em;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.sobreTexto {
  flex: 1;
  min-width: 300px;
}

.sobreTitulo {
  font-size: 3em;
  margin-bottom: 0.5em;
  color: var(--primary);
}

.sobreDescripcion {
  font-size: 1.2em;
  line-height: 1.6;
  color: var(--grisOscuro);
}

.sobreImagenes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  flex: 1;
  min-width: 300px;
}

.columna1 img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-top: 5em;
}

.columna2 {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.columna2 img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

@media screen and (max-width: 768px) {
  .sobreContainer {
    flex-direction: column;
    text-align: center;
  }

  .sobreImagenes {
    grid-template-columns: 1fr;
  }

  .columna2 {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .columna1 img {
    width: 90%;
    margin-top: 0;
  }

  .columna2 img {
    width: 90%;
  }
}
/* Hasta aqui estilos del hero Sobre Nosotros */
.historiaSection {
  display: flex;
  padding: 5em 2em;
  background-color: var(--grisCard);
  text-align: center;
  justify-content: center;
}

.historiaTitulo {
  font-size: 2.5em;
  font-weight: bold;
  margin-bottom: 0.5em;
  color: var(--primary);
  max-width: 1000px;
}

.historiaDescripcion {
  font-size: 1.2em;
  color: var(--grisOscuro);
  margin-bottom: 2em;
  max-width: 1000px;
  background-color: var(--grisCard);
  border-radius: 54% 100% 46% 74% / 38% 62% 42% 78%;
}

.historiaCards {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: auto;
  gap: 2em;
}

.cardHistoria {
  background-color: var(--blanco);
  padding: 1.5em;
  flex: 1;
  min-width: 250px;
  max-width: 300px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  border-radius: 12px;
  border: 1px solid var(--secondaryMoreLight);
}

.cardAnio {
  font-size: 2.5em;
  font-weight: bold;
  margin-bottom: 1em;
  color: var(--primary);
}

.cardTexto {
  font-size: 1em;
  color: var(--grisOscuro);
}

.cardLinea {
  width: 60px;
  height: 5px;
  background-color: var(--secondary);
  margin: 1.5em auto 0;
  border-radius: 10px;
}
@media screen and (max-width: 768px){
  .historiaSection {
    padding: 1em 2em;
    margin-bottom: 2em;
  }
}

 .cards-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: auto;
  padding: 4em 2em;
  background-color: var(--grisCard);
}


.service-card {
  background-color: var(--blanco);
  padding-top: 1.2em;
  flex: 1;
  min-width: 280px;
  max-width: 320px;
  box-shadow: 0 16px 24px rgba(0,0,0,0.1);
  border-radius: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 2px solid var(--secondaryMoreLight);

}

.service-card__icon-wrapper {
  width: 70px;
  height: 70px;
  background-color: var(--secondary);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 1.5em auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.service-card__icon {
  font-size: 40px !important;
  color: var(--blanco);
  line-height: 1;
}

.service-card__title {
  font-size: 1.4em;
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 0.5em;
}


.service-card__text {
  font-size: 1.2em;
  color: var(--grisOscuro);
  line-height: 1.6;
  margin-bottom: 1.2em;
  flex-grow: 1;
  text-align: center;
  padding: 0px 15px;
}


.service-card__image {
  margin-top: auto;
  width: 100%;
  border-radius: 40px 0px 8px 8px;
  overflow: hidden;
}

.service-card__image img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease-in-out;
}

.service-card:hover .service-card__image img {
  transform: scale(1.05);
}


@media (max-width: 768px) {
  .cards-grid {
    padding: 3em 1em;
    gap: 1.5em;
  }

  .service-card {
    min-width: 90%;
    max-width: 400px;
  }

  .service-card:hover .service-card__image img {
    transform: none;
  }
}
/* hasta aqui estilos de historia */

.pilaresSection {
  padding: 5em 2em;
  background-color: var(--grisFondo);
  text-align: center;
}

.pilaresTitulo {
  font-size: 3em;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.5em;
}

.pilaresDescripcion {
  font-size: 1.3em;
  color: var(--grisOscuro);
  margin-bottom: 2em;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.pilaresGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2em;
}

.pilarCard {
  background-color: #fff;
  border-radius: 1.5em;
  padding: 2em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--secondaryMoreLight);
}

.iconoCard {
  width: 60px;
  height: 60px;
  background-color: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 1em;
}
.iconoCard span.material-symbols-outlined {
  font-size: 40px;
  color: var(--blanco);
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 40;
}

.pilarTitulo {
  font-size: 1.5em;
  font-weight: 600;
  margin-bottom: 0.5em;
  color: var(--primary);
}

.pilarTexto {
  font-size: 1em;
  color: var(--grisOscuro);
  margin-bottom: 1em;
}

.pilarLinea {
  width: 50px;
  height: 4px;
  background-color: var(--secondary);
  border-radius: 5px;
  margin-top: auto;
}
 /* Hasta aqui carta de los pilares */

/* --------------- SMART MEDICAL CODEX ----------- */
.hero-section-smc {
  padding-top: 5rem;
  padding-bottom: 5rem;
  background: linear-gradient(270deg, var(--blanco) 0%, var(--secondaryMoreLight) 50%, var(--grisCard) 100%);
  background-size: 400% 400%;
  animation: gradientBG 20s ease infinite;
}
@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


.hero-container-smc {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.hero-content-wrapper-smc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}

.hero-text-column-smc {
  text-align: center;
  width: 100%;
}

.hero-title-smc {
  font-size: 2.25rem;
  line-height: 1.25;
  font-weight: 800;
  color: var(--boton);
  margin-bottom: 1.5rem;
}

.hero-title-smc .text-secondary-highlight {
  color: var(--secondary);
}

.hero-subtitle-smc {
  font-size: 1.125rem;
  color: var(--primary);
  font-weight: 500;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5rem;
}

.hero-image-column-smc {
  width: 100%;
  display: flex;
  justify-content: center;
}

.hero-image-container-smc {
  overflow: hidden;
  height: 250px;
  position: relative;
  width: 100%;
  max-width: 28rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  border-radius: 31% 100% 31% 96% / 95% 49% 42% 22%;
}

.hero-image-container-smc img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero-image-container-smc::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(
    to bottom right,
    rgba(var(--primary-rgb), 0.4),
    rgba(var(--secondaryMoreLight-rgb), 0.3)
  );
  pointer-events: none;
  border-radius: inherit;
}

.btn {
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: inline-block;
  text-decoration: none;
  padding: 0.625rem 1.25rem;
}

.btn:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
  background-color: var(--secondary);
  color: var(--blanco);
  font-size: 1.125rem;
  padding: 0.625rem 1.25rem;
}

.btn-secondary:hover {
  filter: brightness(110%);
}


@media (min-width: 640px) {
  .hero-container-smc {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .hero-title-smc {
    font-size: 3rem;
  }
}

@media (min-width: 768px) {
  .hero-section-smc {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .hero-content-wrapper-smc {
    flex-direction: row;
  }

  .hero-text-column-smc {
    text-align: left;
    width: 50%;
  }

  .hero-subtitle-smc {
    margin-left: 0;
    margin-right: 0;
    font-size: 1.25rem;
  }

  .hero-image-column-smc {
    width: 50%;
    justify-content: flex-end;
  }

  .hero-image-container-smc {
    height: 400px;
    max-width: 32rem;
  }
}

@media (min-width: 1024px) {
  .hero-container-smc {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .hero-title-smc {
    font-size: 3.75rem;
  }
}

.about-section-smc {
  background-color: var(--blanco);
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.about-container-smc {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
}

@media (min-width: 640px) {
  .about-container-smc {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .about-container-smc {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.about-title-smc {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--blueSMC);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

@media (min-width: 640px) {
  .about-title-smc {
    font-size: 3rem;
  }
}

.about-description-smc {
  font-size: 1.125rem;
  color: var(--grisFondo);
  max-width: 50rem;
  margin: 0 auto;
  line-height: 1.7;
}
@media (min-width: 768px) {
  .about-description-smc {
    font-size: 1.25rem;
  }
}
/* Hasta aqui la descripcion de SMC */
.features-section-smc {
  padding: 5rem 1rem;
  background-color: var(--grisCard);
}

.features-container-smc {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.features-title-smc {
  font-size: 2.5rem;
  color: var(--boton);
  font-weight: 800;
  margin-bottom: 1rem;
}

.features-description-smc {
  font-size: 1.125rem;
  color: var(--primary);
  font-weight: 500;
  margin-bottom: 3rem;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

.features-grid-smc {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: 1100px;
  margin: auto;
}

.feature-card-smc {
  background: var(--blanco);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  text-align: left;
  transition: transform 0.3s ease;
  border: 2px solid var(--blueSMCLight);
}

.feature-icon-smc {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--blanco);
}
.feature-icon-smc span.material-symbols-rounded{
  font-size: 2rem;
}

.icon-neurology { background-color: var(--primary); }
.icon-schedule { background-color: var(--secondary); }
.icon-shield_lock { background-color: var(--blueSMC); }
.icon-stacked_line_chart { background-color: var(--yellowKloudoop); }
.icon-settings { background-color: var(--grisTres); }
.icon-support_agent { background-color: var(--redAnalytic); }

.feature-card-title-smc {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--boton);
}

.feature-card-description-smc {
  font-size: 1rem;
  color: var(--grisTres);
  text-align: center;
}
/* ------------------hasta aqui beneficios de SMC ---------*/
.modalidades-section {
  display: flex;
  padding: 4rem 0;
  background-color: var(--blanco);
  justify-content: center;
  justify-items: center;
}
.modalidades-container {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  justify-items: center;
  align-items: center;
}
.modalidades-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: var(--boton);
  text-align: center;
}
.modalidades-subtitle {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--negro);
  text-align: center;
  margin-bottom: 2rem;
}
.modalidades-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 768px) {
  .modalidades-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.modalidad-card {
  padding: 2rem;
  border-width: 4px;
  border-style: solid;
  border-radius: 16px;
}
.modalidad-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  text-align: center;
}
.modalidad-desc {
  color: var(--grisTres);
  margin-bottom: 1.5rem;
  text-align: center;
  font-size: 1rem;
}
.modalidad-steps {
  display: flex;
  justify-content: center;
  text-align: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
}
.modalidad-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
}
.icon-bg {
  width: 4.5rem;
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
}

.icon-bg .material-symbols-outlined {
  font-size: 2.5rem;
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48;
}


.step-label {
  font-size: 1rem;
  max-width: 90px;
  color: var(--grisOscuro);
  font-weight: 500;
  margin-top: 0.7rem;
  margin-bottom: 0.5rem;
  text-align: center;
}
.modalidad-note {
  font-size: 1rem;
  font-style: italic;
  font-weight: 500;
  color: var(--grisOscuro);
  text-align: center;
}

@media (max-width: 480px) {
  .modalidad-steps{
    gap: 1em;
  }
  .modalidad-card {
    padding: 1rem;
    max-width: 96dvw;
  }
  .modalidades-title {
    font-size: 1.8rem;
    max-width: 100dvw;
  }
  .modalidades-subtitle {
    font-size: 1.2rem;
    padding: 0 1rem;
    max-width: 100dvw;
  }
  .modalidad-title {
    font-size: 1.3rem;
  }
  .modalidad-desc {
    font-size: 0.95rem;
  }
  .modalidad-note {
    font-size: 0.95rem;
  }
  .icon-bg {
    width: 3.5rem;
    height:3.5rem;
  }

  .icon-bg .material-symbols-outlined {
    font-size: 2rem;
  }
  .step-label {
    font-size: 0.9rem;
  }
}

.modalidad-interactiva {
  border-color: var(--secondaryLight);
}
.modalidad-interactiva .modalidad-title {
  color: var(--primary);
}
.modalidad-interactiva .icon-bg {
  background-color: var(--primary);
}
.modalidad-interactiva .material-symbols-outlined {
  color: var(--blanco);
}

.modalidad-integrado {
  border-color: var(--primaryLight);
}
.modalidad-integrado .modalidad-title {
  color: var(--secondary);
}
.modalidad-integrado .icon-bg {
  background-color: var(--secondary);
}

.modalidad-integrado .material-symbols-outlined {
  color: var(--blanco);
}
/* Hasta aqui estilos de las modalidades */
.sistema-ia-section {
  background: linear-gradient(to right, var(--primaryMoreLight), var(--blueSMCLight));
  color: var(--);
  padding: 4rem 1rem;
}

.sistema-ia-container {
  max-width: 1200px;
  margin: 0 auto;
}

.sistema-ia-title {
  font-size: 2.25rem;
  font-weight: bold;
  color: var(--blueSMC);
  margin-bottom: 1rem;
  text-align: center;
}

.sistema-ia-description {
  font-size: 1.125rem;
  color: var(--blueSMC);
  margin-bottom: 3rem;
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.sistema-ia-content {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  align-items: center;
  max-width: 900px;
  margin: auto;
}



.sistema-ia-image img {
  border-radius: 1rem;
  max-width: 100%;
  width: 450px;
  height: auto;
}

.sistema-ia-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--secondary);
}

.sistema-ia-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.5rem;
}

.sistema-ia-item .icon {
  font-size: 2rem;
  background-color: var(--secondary);
  color: var(--blanco);
  padding: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.sistema-ia-item-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  width: fit-content;
  border-radius: 50px;
}

.sistema-ia-item-desc {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--blueSMC);
}

@media (max-width: 480px){
  .sistema-ia-image img {
    width: 300px;
  }
  .sistema-ia-description{
    margin-bottom: 0;
  }
  .sistema-ia-content{
    gap:0;
  }
  .sistema-ia-item-title{
    margin: auto;
    margin-bottom: 0.4em;
  }
  .sistema-ia-container{
    text-align:start ;
  }
}

@media (min-width: 1024px) {
  .sistema-ia-content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
/* ---------- Hasta aqui los estilos de los sistemas SMC */
.requerimientos-section {
  padding: 4rem 0;
  background-color: var(--grisCard);
}

.requerimientos-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.section-title {
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1rem;
  color: var(--blueSMC);
}

.section-subtitle {
  font-size: 1.2rem;
  text-align: center;
  margin-bottom: 3rem;
  color: var(--blueSMC);
  font-weight: 500;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.requerimientos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  justify-items: center;
}

@media (min-width: 1024px) {
  .requerimientos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.requerimientos-bloque {
  padding: 1rem;
}

.requerimientos-heading {
  font-size: 2rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
  color: var(--blueSMC);
}

.icon-title {
  font-size: 2rem;
  margin-right: 0.5rem;
}

.requerimientos-list {
  list-style: none;
  padding: 0;
}

.requerimientos-list li {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  color: var(--boton);
  font-size: 1.2em;
}

.check-icon {
  color: var(--secondary);
  font-size: 1.5rem;
  margin-right: 0.5rem;
}
@media (max-width: 480px){
  .requerimientos-section {
    padding:1em 0;

  }
}
/* --------------Hasta aqui la seccion de Requerimientos*/
.contacto-section {
  padding: 5rem 0;
  background-color: var(--blueSMCLight);
  text-align: center;
}

.contacto-container {
  max-width: 768px;
  margin: 0 auto;
  padding: 0 1rem;
}

.contacto-title {
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--boton);
  margin-bottom: 1.5rem;
}

.contacto-subtitle {
  font-size: 1.5rem;
  color: var(--boton);
  margin-bottom: 2.5rem;
}

.btn-cta {
  font-size: 1.2rem;
}
@media (max-width: 480px){

}
/* hasta aqui los estilos de banner SMC */
.customers-section {
  background-color: var(--blanco);
  padding: 2rem 1rem;
  text-align: center;
}

.customers-container {
  max-width: 1200px;
  margin: 0 auto;
}

.customers-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: var(--negro);
}

.customers-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  align-items: center;
  min-height: 105px;
}

.logo-item img {
  height: 80px;
  object-fit: contain;
  display: block;
}

/* hasta aqui estilos de colaboradores */

.smc-customers-section {
  background-color: var(--grisCard);
  padding: 2rem 1rem;
  text-align: center;
}

.smc-customers-container {
  max-width: 1200px;
  margin: 0 auto;
}

.smc-customers-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: var(--negro);
}

.smc-customers-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  align-items: center;
  min-height: 105px;
}

.smc-logo-item img {
  height: 9vh;
  object-fit:contain ;
  display: block;
}
/* --------------- Estilos de la Avisos legales ------------ */
.legal-text-section {
  background-color: #f9f9f9;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 800px;
  margin: auto;
  text-align: center;
  min-height: 700px;
}

.legal-text-section h3 {
  margin-top: 1em;
  color: var(--boton);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.legal-text-section h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--boton);
}
.legal-text-section li {
padding: 0px 20px;
margin-left: 10px;
}

.legal-text-section p {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  max-width: 550px;
  margin: auto;
  margin-top: 20px;
}


.legal-subtitles li {
  margin: 0.5rem 0;
}
.legal-text strong {
  font-size: 1.1em;
  font-weight: bold;
}
/* --------------- Termina estilos de la Avisos legales ------------ */
/* ------------Notificación de cookies ----------------*/
.cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color:var(--grisCard); 
  color: var(--primary); 
  padding: 15px 20px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0; 
  visibility: hidden; 
  transform: translateY(100%); 
  transition: all 0.5s ease-out; 
}

.cookie-consent-banner.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); 
}

.cookie-consent-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px; 
  text-align: center;
  width: 100%;
}

.cookie-consent-content p {
  margin: 0 0 15px 0; 
  line-height: 1.5;
  font-size: 0.95em;
}

.cookie-consent-buttons {
  display: flex;
  gap: 15px; 
  flex-wrap: wrap; 
  justify-content: center;
}

.cookie-consent-accept-button,
.cookie-consent-more-info {
  background-color:var(--secondary);
  border: 1px solid var(--secondary);
  color: var(--blanco);
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9em;
  text-decoration: none;
  transition: background-color 0.3s ease;
  white-space: nowrap; 
}

.cookie-consent-accept-button:hover,
.cookie-consent-more-info:hover {
  background-color: var(--secondaryMoreLight);
  border: 1px solid var(--secondary);
  background-color: var(--blanco);
  color: var(--secondary); 
}


@media (max-width: 600px) {
  .cookie-consent-banner {
      padding: 10px;
  }

  .cookie-consent-content p {
      font-size: 0.9em;
  }

  .cookie-consent-buttons {
      flex-direction: column; 
      width: 100%;
  }

  .cookie-consent-accept-button,
  .cookie-consent-more-info {
      width: 100%; 
      text-align: center;
  }
}