/*
Theme Name: Theme Colour
Theme URI: www.colour.com
Author: Ivan Diaz
Author URI: https://www.linkedin.com/in/ifabridiaz/
Description: Tema personalizado para landing page de colour
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Colour
*/


@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Space+Grotesk:wght@300..700&display=swap');

/* 1. Variables CSS */
:root {
  --color-primario: #3498db;
  --color-secundario: #2ecc71;
  --color-fondo: #f4f4f4;
  --color-acento: #e74c3c;
  --color-texto: #333;
  --fuente-principal: "Space Grotesk", sans-serif;
  --color-rebajado: rgba(255, 255, 255, 0.3);
  --color-background: #131313
}


html {
  box-sizing: border-box;
  font-size: 16px;
}



*,
*:before,
*:after {
  box-sizing: inherit;
}

body,
html {
  font-family: var(--fuente-principal);
  margin: 0;
  padding: 0;

}

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}


.row {
  display: flex;
  flex-wrap: wrap;
width:100%
}

.col-1 {
  width: 8.33%;
  /* 1/12 */
}

.col-2 {
  width: 16.66%;
  /* 2/12 */
}

.col-3 {
  width: 25%;
  /* 3/12 */
}

.col-4 {
  width: 33.33%;
  /* 4/12 */
}

.col-5 {
  width: 41.66%;
  /* 5/12 */
}

.col-6 {
  width: 50%;
  /* 6/12 */
}

.col-7 {
  width: 58.33%;
  /* 7/12 */
}

.col-8 {
  width: 66.66%;
  /* 8/12 */
}

.col-9 {
  width: 75%;
  /* 9/12 */
}

.col-10 {
  width: 83.33%;
  /* 10/12 */
}

.col-11 {
  width: 91.66%;
  /* 11/12 */
}

.col-12 {
  width: 100%;
  /* 12/12 */
}




/* sm: small - desde 480px hasta 767px */
@media screen and (min-width: 30em) {
  .col-sm-1 {
    width: 8.33%;
  }

  .col-sm-2 {
    width: 16.66%;
  }

  .col-sm-3 {
    width: 25%;
  }

  .col-sm-4 {
    width: 33.33%;
  }

  .col-sm-5 {
    width: 41.66%;
  }

  .col-sm-6 {
    width: 50%;
  }

  .col-sm-7 {
    width: 58.33%;
  }

  .col-sm-8 {
    width: 66.66%;
  }

  .col-sm-9 {
    width: 75%;
  }

  .col-sm-10 {
    width: 83.33%;
  }

  .col-sm-11 {
    width: 91.66%;
  }

  .col-sm-12 {
    width: 100%;
  }



}

/* md: medium - desde 768px hasta 991px */
@media screen and (min-width: 48em) {
  .col-md-1 {
    width: 8.33%;
  }

  .col-md-2 {
    width: 16.66%;
  }

  .col-md-3 {
    width: 25%;
  }

  .col-md-4 {
    width: 33.33%;
  }

  .col-md-5 {
    width: 41.66%;
  }

  .col-md-6 {
    width: 50%;
  }

  .col-md-7 {
    width: 58.33%;
  }

  .col-md-8 {
    width: 66.66%;
  }

  .col-md-9 {
    width: 75%;
  }

  .col-md-10 {
    width: 83.33%;
  }

  .col-md-11 {
    width: 91.66%;
  }

  .col-md-12 {
    width: 100%;
  }

}

/* lg: large - desde 992px hasta 1199px */
@media screen and (min-width: 62em) {
  .col-lg-1 {
    width: 8.33%;
  }

  .col-lg-2 {
    width: 16.66%;
  }

  .col-lg-3 {
    width: 25%;
  }

  .col-lg-4 {
    width: 33.33%;
  }

  .col-lg-5 {
    width: 41.66%;
  }

  .col-lg-6 {
    width: 50%;
  }

  .col-lg-7 {
    width: 58.33%;
  }

  .col-lg-8 {
    width: 66.66%;
  }

  .col-lg-9 {
    width: 75%;
  }

  .col-lg-10 {
    width: 83.33%;
  }

  .col-lg-11 {
    width: 91.66%;
  }

  .col-lg-12 {
    width: 100%;
  }
}

/* xl: extralarge - desde 1200px en adelante */
@media screen and (min-width: 75em) {
  .col-xl-1 {
    width: 8.33%;
  }

  .col-xl-2 {
    width: 16.66%;
  }

  .col-xl-3 {
    width: 25%;
  }

  .col-xl-4 {
    width: 33.33%;
  }

  .col-xl-5 {
    width: 41.66%;
  }

  .col-xl-6 {
    width: 50%;
  }

  .col-xl-7 {
    width: 58.33%;
  }

  .col-xl-8 {
    width: 66.66%;
  }

  .col-xl-9 {
    width: 75%;
  }

  .col-xl-10 {
    width: 83.33%;
  }

  .col-xl-11 {
    width: 91.66%;
  }

  .col-xl-12 {
    width: 100%;
  }

  .container {
    /* max-width: 1440px; */
    max-width: 1280px;
  padding-left: 15px;
  padding-right: 15px;  

  }
}

img {
  max-width: 100%;
  height: auto;

}




.backgroudimg {
  background: linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, #131313 100%), url('./assets/images/fondo.svg');
  background-size: cover;
  /* o '100%' si prefieres */
  background-position: top left;
  background-repeat: no-repeat;
  padding-top: 97px;
	min-width: 480px
}

main{
min-width: 480px
}

footer{
min-width:480px
}




/* HEADER */


.header {
  background: rgba(22, 22, 25, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: white;
  height: 97px;
  backdrop-filter: blur(20px);
  /* Desenfoque suave de 20px */
  -webkit-backdrop-filter: blur(20px);
  /* Soporte para navegadores WebKit */
  backdrop-filter: blur(20px);
}

.header {
  position: fixed; /* Fija el encabezado en la parte superior */
  top: 0; /* Asegura que esté en la parte superior */
  left: 0; /* Alineado al borde izquierdo */
  width: 100%; /* Ocupa todo el ancho de la página */
  z-index: 1000; /* Asegura que el encabezado esté por encima de otros elementos */
}

.header .container {
  height: 100%;
}

.header .container .row {
  height: 100%;
  align-items: center;
}

.header__button {
  display: none;
}

.header__nav {
  display: none;
}

.header__hamburger {
  display: flex;
  justify-content: end;
  align-items: center;
}

.header__logo {
  display: flex;
  justify-content: start;
  align-items: center;
}

#hamburgerMenu {
  background: none;
  /* Elimina el fondo */
  border: none;
  /* Elimina el borde */
  padding: 0;
  /* Elimina el relleno interno */
  cursor: pointer;
  /* Muestra un puntero al pasar el mouse */
}

.header__button div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  font-weight: 400;
  color: white;
  padding: 0.5em;
  border: 2px solid white;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  gap: 0.5em;
}






/* COL-MD */
@media screen and (min-width: 75em) {

  .header {
    height: 84px;
  }


  .header__hamburger {
    display: none;
  }

  .header__nav {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 26px;
  }

  .header__nav li {
    list-style: none;
  }


  .header__nav li a {
    color: white;
    list-style: none;
    font-size: 14px;
    font-weight: 700;
    line-height: 17.86px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration: none;

  }


  .buttonli {
    width: 234px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border-radius: 40px;
    border: 1px solid white;
    background-color: transparent;
    transition: all 0.4s ease;
  }



  .buttonli:hover {
    background-color: rgb(255, 255, 255);
    cursor: pointer;
    color: #0094FF;
  }

  .buttonli:hover a {
    color: #0094FF;
  }



.buttonli:hover img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(90%) saturate(800%) hue-rotate(200deg) brightness(90%) contrast(105%);
}



  .header__nav .menu-item  a:hover {
    color: rgb(131, 131, 131);
    ;
  }

  /* 
  .buttonli a:hover {
    color: rgb(0, 102, 255);
    ;
  } */










}


/* HERO SECTION */
.hero {
  color: white;
  height: 794px;
}

.hero .container {
  height: 818px;
}

.hero__content {
  text-align: center;
  display: flex;
  flex-direction: column;
  /* Para apilar los elementos verticalmente */
  justify-content: center;
  /* Centra verticalmente el contenido */
  align-items: center;
  /* Centra horizontalmente el contenido */
  height: 100%;
  /* Para asegurarte de que ocupa toda la altura de su contenedor padre */
}

.hero__subtitle {
  font-size: 1em;
}

.hero__title {
  font-size: 2em;
}

.hero__content .row {
  height: 100%;

}

.hero__button {

  width: 300px;
  height: 60px;
  padding: 20px 24px 20px 24px;
  border-radius: 5px;
  opacity: 0px;
  border: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 20.42px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration: none;
}

.hero-buttoms {
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding-bottom: 60px;
}

.hero-info {
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
}

.hero__button--primary {
  background: linear-gradient(90deg, #F97272 23.13%, #9B66F2 96.46%);
  color: white;
}

.hero__button--secondary {
  background-color: white;
  color: #000;
}

@media screen and (min-width: 75em) {

  .hero-buttoms {
    height: 50%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
  }

  .hero {
    height: 822px;
  }

  .hero__button {
    height: 63px;
    padding: 20px 24px 20px 24px;
    border-radius: 5px;
    opacity: 0px;
    border: none;
    font-size: 18px;
    font-weight: 700;
    line-height: 22.97px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
  }


  .hero__subtitle {
    width: 577px;
    height: 72px;
    font-weight: 700;
    font-size: 1em;
  }

  .hero__title {
    width: 860px;
    font-weight: 400;
    font-size: 56px;
    margin: 0;
  }











}


/* MENU OVERLAY */

.menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-background);
  color: #fff;
  z-index: 1000;
}



.menu-overlay .container {
  height: 100%;
}


.menu-overlay .container .row {
  height: 100%;
  gap: 0;
}

.overlay__header {
  height: 97px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.overlay__main {
  height: 74%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.overlay__footer {
  height: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.overlay__footer p {
  font-size: 14px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: -0.02em;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  margin: 0;
}

.menu-overlay__close {
  color: #fff;
  cursor: pointer;
  width: 25px;
  height: 26px;

}


.menu-overlay__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  list-style: none;
  gap: 12px;
}

.menu-overlay__list li a {
  color: white;
  text-decoration: none;
  font-size: 32px;
  font-weight: 500;
  line-height: 35.2px;
  letter-spacing: -0.05em;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.buttonOver {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  gap: 12px;
  align-items: center;
  border: 1px solid white;
  width: 327px;
  height: 56px;
  border-radius: 40px;
}

.buttonOver a {
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 17.86px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;

}



/* .menu-overlay__list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
} */

/* .menu-overlay__list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.menu-overlay__list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}


.menu-overlay__list li {
  font-size: 32px;
  font-weight: 500;
  line-height: 35.2px;
  letter-spacing: -0.05em;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.menu-overlay__list .buttonOver {
  margin-top: 15px;
  border: 1px solid rgba(255, 255, 255, 1);
  width: 327px;
  height: 56px;
  border-radius: 40px;
  display: flex;
  justify-content: center;
  gap: 12px;
  align-items: center;
}


.menu-overlay__list .buttonOver a {
  font-size: 14px;
  font-weight: 700;
  line-height: 17.86px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}






.menu-overlay__list a {
  text-decoration: none;
  color: #fff;
  font-size: 2rem;
}

.menu-overlay__close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  background: none;
  border: none;
  font-size: 3rem;
  color: #fff;
  cursor: pointer;
} */










main {
  background: var(--color-background);
}

/* MAIN - SECCTION INNOVATION  NOSOTROS*/

.section-innovation {
  color: white;
}

.innovation__content:nth-child(even) {
  text-align: end;
}


.innovation__content {
  font-weight: 400;

}

.innovation__subtitle {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;

  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  width: 160px;
  height: 48px;


  color: var(--color-rebajado);
}

.innovation__title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 32px;
  font-weight: 400;
  line-height: 32.64px;
  letter-spacing: -0.02em;

  text-underline-position: from-font;
  text-decoration-skip-ink: none;

  color: #FFEB69;


  width: 304px;
  height: 99px;


}

.innovation__text {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.02em;

  text-underline-position: from-font;
  text-decoration-skip-ink: none;

}

.section__heading {
  font-size: 0.8em;
  background: linear-gradient(90deg, #F97272 0%, #9B66F2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.innovacion__header {
  display: flex;
  flex-direction: column;
}


.innovacion__content:nth-child(odd) .innovation__info {
  order: -1;
  text-align: start;
  padding-right: 40px;

}



.innovacion__content:nth-child(even) .innovation__info {
  text-align: end;
  padding-left: 40px;
}



.innovacion__content:nth-child(odd) .innovation__info .innovacion__header {
  align-items: start;
}



.innovacion__content:nth-child(even) .innovation__info .innovacion__header {
  align-items: end;
}


.section-innovation .container{
  
}

.innovation__info{
  padding-left: 15px;
  padding-right: 15px;
  background: rgba(22, 22, 25, 0.1);
  backdrop-filter: blur(60px);
  position: relative; /* Permite controlar el z-index */
  z-index: 2; /* Asegura que esté encima de la imagen */
}


.innovacion__img img {
  width: 100%; /* Se ajusta al ancho del contenedor */
  height: auto; /* Mantiene proporciones */
  object-fit: cover;
  display: block; /* Evita espacios extra */
  transform: translateY(-5%); /* Mueve la imagen hacia arriba */
}



@media screen and (min-width: 75em) {


  .innovation__info{
    padding-left: 0;
    
  }
  
  .innovacion__img img {
    height: auto;
    object-fit: cover;
    position: relative;
    transform: translateY(0); /* Mueve la imagen hacia arriba */
  }

  /* Para las secciones impares (imagen primero, texto después) */
  .innovacion__content:nth-child(odd) .innovacion__img {
    order: 1;
  }

  /* Para las secciones pares (texto primero, imagen después) */
  .innovacion__content:nth-child(even) .innovacion__img {
    order: -1;
  }


  .innovation__info {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 1fr auto;
    align-items: start;

  }



  .innovacion__content {
    height: 662px;
    padding-top: 80px;
    padding-bottom: 80px;
  }


  .innovation__subtitle {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    width: 251px;
    height: 24px;




  }

  .innovation__title {

    margin-top: 0;
    font-size: 40px;
    font-weight: 400;
    line-height: 40.8px;
    letter-spacing: -0.02em;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    width: 467px;
    height: 82px;



  }

  .innovation__text {


    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.02em;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;


  }


  .section__heading {


    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.05em;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;


  }






}



/* main section intro */


.section__intro {
  color: white;
}

.intro__content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.intro__text {
  background: linear-gradient(90deg, #FCB5FE 0%, #6C57F1 50%, #FCB5FE 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 24px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.02em;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  height: 280px;
  display: flex;
  align-items: center;
  width: 343px;
}

.intro__text2 {
  color: rgba(255, 255, 255, 0.3);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  height: 72px;
  display: flex;
  align-items: center;
  width: 233px;
}

.section__highlight {
  height: 300px;
  padding: 16px;
  display: flex;
  border: 1px solid rgba(38, 38, 43, 1);
  flex-direction: column;
  justify-content: space-between;
}

.highlight__description {
  font-family: IBM Plex Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.02em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  width: 311px;
  height: 144px;
  margin: 0;
  overflow: hidden;
}

.highlight__title {
  font-family: IBM Plex Sans;
  font-size: 16px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.02em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  width: 311px;
  height: 30px;
  margin: 0;

}

.intro__item {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.custom-divider {
  border: 0;
  border-top: 1px solid var(--color-rebajado);
  /* Ajusta el color y grosor a tu preferencia */
  margin: 0;
  /* Espaciado ajustable */
}





@media screen and (min-width: 75em) {

  .intro__item {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: center; /* Centra verticalmente el contenido en las columnas */
    gap: 16px;
    
  }

  .intro__text {
    font-family: Space Grotesk;
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.02em;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    width: 563px;
    margin: 0;
  }

  .intro__text2 {
    width: 281px;
    font-family: Space Grotesk;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.02em;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin: 0;
    color: white;
    margin-bottom: 35px;

    
  }

  .custom-divider {
    display: none;
  }


  .section__highlight {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: start;
    border: 1px solid rgba(38, 38, 43, 1);
    overflow: hidden;
    transition: background-color 0.3s ease; /* Agrega una transición suave */
    height: 300px;
  }



  .highlight__description {
    font-family: IBM Plex Sans;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.02em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;


    width: 276px;
    height: 168px;





  }

  .highlight__title {
    font-family: IBM Plex Sans;
    font-size: 16px;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: -0.02em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    width: 276px;
    height: 30px;




  }




}




/* main section strategy */

.strategy-section {
  color: white;
  padding-top: 40px;
  padding-bottom: 40px;
}

.strategy-title {
  color: rgba(254, 230, 69, 1);

  font-family: Space Grotesk;
font-size: 32px;
font-weight: 400;
line-height: 32.64px;
letter-spacing: -0.02em;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;

}

.strategy-subtitle {
font-size: 16px;
font-weight: 400;
line-height: 24px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: var(--color-rebajado);


}

.strategy-description {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.02em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;

}

.strategy-main{
  justify-content: center;
}


/* SETEP DE STRATEGY SECTIONS */

.strategy-steps {
 
  width: 343px;
padding-top: 40px;


}

.step-content {
  width: 247px;
height: auto;


  /* Espacio para alinear el contenido al lado de los marcadores */
}


.step {
  position: relative;
  margin-bottom: 40px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.step-title{
font-size: 16px;
font-weight: 700;
line-height: 20.42px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
margin: 0;
}

.step-description{
font-size: 14px;
font-weight: 500;
line-height: 17.86px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: rgba(108, 108, 108, 1);
}

.punto{
  width: 80px;
  display: flex;
  justify-content: center;
}

.step-marker {
  width: 10px;
  height: 10px;
  background-color: black;
  /* Color amarillo */
  border-radius: 100px;
  position: absolute;
  top: -5px;
  z-index: 1;
  box-shadow: 0 0 0 10px #FFD700; /* Simula un borde amarillo de 10px hacia afuera */

  /* Asegura que esté delante de la línea */
}


.step::before {
  content: '';
  position: absolute;
  width: 2px;
  background-color: #fff;
  top: 10px;
  bottom: -1.5em;
  left: 38px;
  z-index: 0;
}

.step:last-child::before {
  bottom: 0;
  /* Asegura que la línea llegue hasta el final */
}

.step:last-child::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 15px;
  background: linear-gradient(to bottom, #fff, transparent);
  left: 38px;
  bottom: -10px;
  z-index: 0;
}







@media screen and (min-width: 75em) {


  .strategy-description {
    padding-right: 5em;
  }

  .strategy-steps {
    padding-top: 3em;
  }


  .strategy-section {
    margin-top: 100px;
    padding-top: 100px;
    border-top: 5px solid;
    border-image-source: linear-gradient(90deg, #FCB5FE 0%, #6C57F1 48.63%, #FCB5FE 100%);
    border-image-slice: 1; /* Indica que se debe usar todo el borde */
  }

    .strategy-title {
      width: 379px;
      font-family: Space Grotesk;
      font-size: 40px;
      font-weight: 400;
      line-height: 40.8px;
      letter-spacing: -0.02em;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
  
  
  
    }
  
    .strategy-subtitle {
      width: 372px;
      font-family: Space Grotesk;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
  
    }

    .step{
      width: 620px;
    }

    .step-content {
      width: 524px;

    
    
      /* Espacio para alinear el contenido al lado de los marcadores */
    }

    .strategy-main{
      justify-content: space-between;
    }

    .strategy-description{
      width: 480px;

      
    }

    .strategy-steps{
      width: auto;
    }


  

}

/* SECCION DE PORTAFOLIO */

.portfolio-header {
  color: white;
}

.service-portfolio .container{
 
}

.portfolio-header{
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 40px;
}

.portfolio-subtitle {
font-size: 16px;
font-weight: 400;
line-height: 24px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: var(--color-rebajado);
}

.portfolio-title {
  font-size: 32px;
  font-weight: 400;
  line-height: 32.64px;
  letter-spacing: -0.02em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  margin-bottom: 0;
}


.service-card {
  background: #0094FF;
  color: white;
  height: 850px;
}

.service-card .service-content{
  width: 100%;
  height: 495px;
  padding: 40px 15px 40px 15px;
}


.service-title {
margin-top: 0;
font-size: 32px;
font-weight: 400;
line-height: 32px;
letter-spacing: -0.02em;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
height: 64px;
overflow: hidden;
text-overflow: ellipsis; /* Muestra los puntos suspensivos (...) */


}
.service-description {
  font-family: Space Grotesk;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.02em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  width: 400px;
  height: 250px;
  overflow: hidden;
  text-overflow: ellipsis; /* Muestra los puntos suspensivos (...) */
}

.service-button {
  width: 343px;
  height: 63px;
  padding: 20px 24px 20px 24px;
  border-radius: 5px;
  border: none;
  
}


/* .service-content .service-content-info{
  height: 399px;
} */

.service-bu {
  display: flex;
  justify-content: center;
}

.service-bu button{
  font-family: Space Grotesk;
font-size: 18px;
font-weight: 700;
line-height: 22.97px;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;

}

.service-button:hover {
  background-color: #f0f0f0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.service-image {
  display: flex;
  justify-content: flex-end; 
  height: 356px; 
}

.service-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}




.service-inte,
.service-info {
  display: none;
}




@media screen and (min-width: 75em) {



  .portfolio-header{
    padding: 0;
    height: 167px;
    margin-bottom: 80px;
  }


  .service-card{
    height: 496px;
    margin-bottom: 15px;
  }

  .service-card .service-content {
    padding: 0;
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 32px 0px 32px 32px;
  }

  .service-image img{
    width: 609px;
    height: 496px;
  }

  .service-image {
    height:100%;
  }



  .service-content-info{
    width: 546px;
  }

   .service-title{
    height: 46px;
    font-family: Space Grotesk;
    font-size: 30px;
    font-weight: 400;
    line-height: 46px;
    letter-spacing: -0.02em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
  }

  .service-description{
    width: 546px;
    height: 200px;
    font-family: Space Grotesk;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.02em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin: 0;
    
  }

  .service-inte,
  .service-info {
  display: block;
  font-family: Space Grotesk;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: -0.02em;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
margin-top: 0;
width: 546px;
height: 24px;
overflow: hidden;
text-overflow: ellipsis;
}

.service-info{
  margin-bottom: 0;
  font-weight: 400;
}

.service-button{
  width: 268px;
height: 63px;
padding: 20px 24px 20px 24px;

border-radius: 5px ;


}

.service-bu{
  justify-content: start;
  width: 546px;
}

  

  .portfolio-subtitle{
    width: 372px;
    height: 24px;
    font-family: Space Grotesk;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-top: 0;
  }

  .portfolio-title{
    width: 521px;
    height: 46px;
    font-family: Space Grotesk;
    font-size: 40px;
    font-weight: 400;
    line-height: 40.8px;
    letter-spacing: -0.02em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin: 0;
  }







}

/* TEAM SECTION */

.team-section {
  background: linear-gradient(to top, transparent,transparent, var(--color-background)),
    url('./assets/images/Vector.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  height: 1043px;
}


.team-section .container{
  
}


.team-photos {
  display: flex;
  justify-content: start;
  align-items: end;
  height: 116px;
  position: relative;
  width: auto;
}

.team-photo {
  width: 60px;
  height: 60px;
  border-radius: 13px;
  box-shadow: 6px 6px 15px 0px rgba(120, 132, 149, 0.15);
  border: 2px solid rgba(255, 255, 255, 1);
  object-fit: cover;
  position: absolute;
  z-index: 1;
  overflow: hidden;
}

.team-photo:nth-child(1) {
  width: 32px;
  height: 32px;
  bottom: 83px;
  left: 44px;
  border-radius: 6px;
}

.team-photo:nth-child(2) {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  bottom: 30px;
  z-index: 4;
}

.team-photo:nth-child(3) {
  z-index: 5;
  left: 42px;
}

.team-photo:nth-child(4) {
  width: 40px;
  /* Aún más pequeño */
  height: 40px;
  left: 79px;
  bottom: 40px;
  z-index: 3;
}

.team-photo:nth-child(5) {
  width: 20px;
  height: 20px;
  left: 81px;
  bottom: 71px;
  z-index: 2;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 1);
}

.team-title {
  width: 312px;
  height: 33px;
  font-family: Space Grotesk;
  font-size: 32px;
  font-weight: 500;
  line-height: 32.64px;
  letter-spacing: -0.02em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: rgba(91, 180, 255, 1);
  margin-bottom: 0;
}

.team-description {
  width: 312px;
  height: 72px;
  font-family: IBM Plex Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.02em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.team-navigation {
  width: 122px;
  height: 56px;
  display: flex;
  justify-content: space-between;
}

.team-navigation img {
  object-fit: cover;
  width: 56px;
  height: 56px;
}


.arrow-button {
  background: none;
  border: none;
  padding: 0;
}

.arrow-button {
  transition: transform 0.3s ease; /* Ajusta la duración y el tipo de transición */
}

.team-intro {
  width: 319px;
  height: 334px;
  margin-top: 25px;
  margin-bottom: 70px;
  padding-left: 15px;
  padding-right: 15px;
}

.profile__content {
  width: 338px;
  height: 532px;
  padding: 16px;
  background: linear-gradient(180deg, #201913, #322001);
  backdrop-filter: blur(200px);
  position: relative;
}

.profile-photo {
  width: 64px;
  height: 64px;
  border-radius: 1000px;
  object-fit: cover;
}

.profile-info {
  padding-top: 15px;
  width: 306px;
  height: 418px;
}

.profile-name {
  font-family: Space Grotesk;
  font-size: 16px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.02em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  width: 306px;
  height: 30px;
  margin: 0;
}

.profile-role {
  width: 306px;
  height: 24px;
  font-family: Space Grotesk;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.02em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  margin: 0;
}

.profile-description {
  font-family: Space Grotesk;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.02em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  width: 306px;
  height: 264px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0;
  margin-top: 10px;
  /* Muestra puntos suspensivos (...) cuando el texto se desborda */
}

.social-links {
  display: flex;
  gap: 16px;
  margin-top: 20px;
  margin-bottom: 15px;
}

.contact-email {
  font-family: Space Grotesk;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.02em;
  text-align: left;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  margin: 0;
}

#cardContainer {
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  overflow-x: auto;
  gap: 15px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.striped-bar {
  margin-top: 40px;
  margin-left: 15px;
  margin-right: 15px;
  height: 2px;
  background-color: rgba(0, 0, 0, 0.5); /* Blanco más opaco */
  position: relative; /* Necesario para posicionar ::after */

}

.striped-bar::after {
  content: '';
  position: absolute;
  top: 0;
  width: var(--progress-width); 
  height: 100%; /* Misma altura que la barra principal */
  background-color: white;

}



@media screen and (min-width: 75em) {

  .team-navigation {
    display: none;
  }

.profile__content {
  min-width: 0;
  background: linear-gradient(90deg, #120e0a, #301F11);
  width: 526px;
  height: 569px;
  padding: 32px 40px 32px 32px;
}


.team-intro {

  width: 522px;
  height: 891px;
  padding-right: 80px;
  padding-left: 0;
  margin-bottom: 0;
  margin-top: 0;
}

.team-title {
  width: 400px;
  height: 41px;
  font-family: Space Grotesk;
  font-size: 40px;
  font-weight: 500;
  line-height: 40.8px;
  letter-spacing: -0.02em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.team-description {
  width: 372px;
  height: auto;
  font-family: IBM Plex Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.02em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  overflow: hidden;
}

#cardContainer{
  padding: 0;
  flex-direction: column;
  padding-top: 25px;
}

.team-section{
  height: auto;
  padding-top: 100px;
  padding-bottom: 100px;
}

.team-section {
  background-size: 50% 100%; /* Ajusta el tamaño de la imagen al 100% de la altura */
  background-position: right center; /* Coloca la imagen en el lado derecho centrada verticalmente */
  background-repeat: no-repeat;
  color: #fff;
}

.profile-description{
  width: 454px;
height: 240px;
font-family: Space Grotesk;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: -0.02em;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;

}

.striped-bar{
  display: none;
}

 


}

/* seccion de contacto */

.contact-section {
  color: white;
  padding-top: 20px;
  padding-bottom: 20px;
}

.contact-container-info {
  height: 570px;
}

.contact-info .title{
  width: 343px;
  height: 66px;
}

.contact-items{
height: 440px;
display: flex;
flex-direction: column;
gap: 24px;
}

.contact-info{
  height: 100%;
  display: flex;
  padding-top: 15px;
  padding-bottom: 15px;
  flex-direction: column;
  justify-content: space-between;
}

.contact-title {
  margin: 0;
  width: 215px;
  height: 66px;
  font-family: Space Grotesk;
  font-size: 32px;
  font-weight: 500;
  line-height: 32.64px;
  letter-spacing: -0.02em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.contact-item {
  height: 92px;
  display: flex;
}

.contact-details {
  width: 277px;
  height: 92px;
}

.contact-icon{
  width: 66px;
  height: 92px;
}

.contact-icon .border {
  width: 48px;
  height: 48px;
  border-radius: 6px ;
  border: 1px solid var(--color-rebajado);
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-icon .border img {
  object-fit: cover;
  width: 26px;
  height: 26px;
}



.contact-link {
  width: 277px;
  height: 18px;
  font-family: Space Grotesk;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.02em;
  text-align: left;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: white;
  white-space: nowrap; /* Previene saltos de línea */
  overflow: hidden; /* Esconde el texto que excede el ancho */
  text-overflow: ellipsis; /* Muestra los puntos suspensivos */
  display: inline-block; /* Asegura que funcione con text-overflow */
}
.contact-subtitle {
  font-family: Space Grotesk;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: -0.02em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  margin-top: 0;
  overflow: hidden;
}

.contact-description {
  width: 230px;
  height: 36px;
  font-family: Space Grotesk;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.02em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: var(--color-rebajado);
  margin: 0;
  overflow: hidden;
}


/* parte de formulario de copntacto */

.contact-container-form {
  height: 975px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.contact-form {
  height:100%;
  padding: 16px;
  background-color: white;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-header{
height: 212px;
display: flex;
flex-direction: column;
justify-content: space-between;
color: black;
}


.form-title {
  width: 255px;
  height: 116px;
  font-size: 32px;
  font-weight: 400;
  line-height: 28.8px;
  letter-spacing: -0.02em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  margin: 0;
}

.form-description {
  width: 311px;
  height: 72px;
  font-family: Space Grotesk;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.02em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;  
  margin: 0;
}

.form-link {
  color: black;
  text-decoration: underline;
}

.contact-form-post{
  height: 646px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  }

.form-group {
  height: 84px;
  padding: 12px 0px 12px 0px;
}

.form-group-check{
  height: 130px;
  padding: 12px 0px 12px 0px;
}


 label {
  font-family: Space Grotesk;
  font-size: 14px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.02em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: black;
}



input[type="text"],
input[type="email"],
input[type="tel"] {
font-family: Space Grotesk;
font-size: 14px;
font-weight: 400;
line-height: 24px;
letter-spacing: -0.02em;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
border: none;
border-bottom: 1px solid #ccc; /* Línea inferior */
outline: none; /* Quitar el borde azul al hacer clic */
width: 100%; /* Ajustar el ancho del input */
padding-bottom: 5px;
}

input[type="text"]::placeholder {
  color: #aaa;
}

.checkbox-group label{
font-family: Space Grotesk;
font-size: 14px;
font-weight: 500;
line-height: 24px;
letter-spacing: -0.02em;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}


input[type="checkbox"] {
  margin-right: 5px;
}

.submit-button {
  width: 180px;
  height: 60px;
  padding: 20px 24px 20px 24px;
  border-radius: 10px;
  display: block;
  color: #fff;
  background-color: #000;
  cursor: pointer;
  transition: background-color 0.3s;
  font-family: Space Grotesk;
  font-size: 16px;
  font-weight: 700;
  line-height: 20.42px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.submit-button:hover {
  background-color: #333;
  /* Fondo gris oscuro al pasar el mouse */
}

.form-title-xl{
  display: none;
}

.wpcf7-response-output{
  color: black;
}


.form-group-s {

  height: 65px;

}



@media screen and (min-width: 75em) {

.form-group-s {

  height: 25px;
 }


  .contact-section {
    color: white;
    padding-top: 0;
    padding-bottom: 20px;
  }

.contact-container-info{
  width: 450px;
  height: 1015px;
}
 
.contact-container-form{
  padding: 100px 0px 0px 0px;
  height: 859px;
  width: 782px;
}

.contact-info {
  justify-content: start;
  padding: 104px 84px 0px 0px;

  gap: 32px;
}

.contact-info .title{
  width: 414px;
  height:82px;  
}

.contact-info .title h2{
  width: 215px;
  height: 82px;
  font-family: Space Grotesk;
  font-size: 40px;
  font-weight: 500;
  line-height: 40.8px;
  letter-spacing: -0.02em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.contact-item {
  width: 370px;
  height: 162px;
  padding: 24px 0px 24px 0px;
  display: flex;
  gap: 12px;
}

.contact-items{
  height: auto;
  display: block;
}

.contact-subtitle{
  width: 304px;
  height: 30px;

  font-family: Space Grotesk;
font-size: 16px;
font-weight: 700;
line-height: 30px;
letter-spacing: -0.02em;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
margin: 0;
}

.contact-description {
  width: 304px;
  height: 48px;

  font-family: Space Grotesk;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: -0.02em;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
margin-bottom: 5px;
}

.contact-link{
  width: 304px;
  height: 24px;
  font-family: Space Grotesk;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.02em;
  text-align: left;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  
  
}

.contact-icon{
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-details{
  height: 114px;
  width:304px;
}


.contact-form{
  width: 782px;
  height: 859px;
  padding: 40px;
}

.form-header{
  width: 702px;
height: 195px;

}

.form-title-xl{
  display: block;
  width: 702px;
height: 123px;
font-family: Space Grotesk;
font-size: 46px;
font-weight: 400;
line-height: 41.4px;
letter-spacing: -0.02em;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
margin: 0;
}

.form-title{
  display: none;
}

.form-description{
  width: 702px;
height: 48px;
gap: 0px;
opacity: 0px;
font-family: Space Grotesk;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: -0.02em;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;

}

.contact-form-post{
  width: 702px;
height: 538px;
}

.form-group-principal{
  display: flex;
  justify-content: space-between;
}


.form-group {
  width: 702px;
  height: 84px;
  padding: 12px 0px 12px 0px;
  border: 2px;
}



.form-group label {
  opacity: 0px;
  font-family: Space Grotesk;
  font-size: 16px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.02em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.form-group-principal .form-group {
  width: 339px;
  height: 84px;
  padding: 12px 0px 12px 0px;
  border: 2px;
}

.form-group-check label {
  opacity: 0px;
  font-family: Space Grotesk;
  font-size: 16px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.02em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.checkbox-group {
  width: 644px;
  height: 60px;
}


.checkbox-group label {
  font-family: Space Grotesk;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: -0.02em;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;

}

.contact-form{
  justify-content: space-evenly;
}



}

/* SECCTION FOOTER */



.footer-section {
  background: linear-gradient(210deg, var(--color-background) 25%,  #D29F9F , #7049F6, #7049F6);
  color: #fff;
  padding-top: 15px;
  padding-bottom: 15px;

}




.links {
  width: 278px;
}


.footer__logo .row {
  width: 343.26px;
  height: 80px;
}


.footer__logo {
  display: flex;
  justify-content: center;
}

.footer__flecha {
  display: flex;
  justify-content: end;
  align-items: center;
}

.footer-links li {
  list-style: none;
  padding-left: 0;
  /* Opcional: elimina el espacio de sangría predeterminado */
}

.footer-links a {
  color: white;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.02em;
  text-align: left;
  text-underline-position: auto;
  text-decoration: underline;
}

.footer-info{
  justify-content: space-between;
  gap: 32px;
}


.links h4 {
  font-family: Space Grotesk;
  font-size: 18px;
  font-weight: 700;
  line-height: 22.97px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  
}

.footer-banner{
  display: flex;
  flex-direction: column;
  gap: 130px;
}







@media screen and (min-width: 75em) {

  .footer__logo{
    justify-content: start;
  }

    .footer-info {
      margin-top: 10em;
    }
  
    .footer__flecha {
      height: 100px;
    }
  
    .footer__flecha img {
      width: 100px;
      height: 100px;
    }
  
    .links {
      width: 50%;
      order: 2;
      display: flex;
      flex-direction: column;
      align-items: end;
    }

    .footer-links{
      width: 539px;
    }

    .footer-contact{
      width: 539px;
    }



    .footer-info{
     gap: 0;
    }






    .footer-banner-end img {

      height: 494px;
    }


  .footer-section {
    background: linear-gradient(200deg, var(--color-background), var(--color-background), var(--color-background), #D29F9F, #7049F6);

  }

  


}


.page-content {
  background-color: #f8f9fa; /* Fondo neutro para destacar el contenido */
  padding: 40px; /* Espaciado interno */
  font-family: 'Georgia', serif; /* Tipografía formal */
  line-height: 1.8; /* Espaciado entre líneas para mayor legibilidad */
  color: #333; /* Color de texto suave */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra para dar un efecto de documento */
  border-radius: 8px; /* Bordes ligeramente redondeados */
  max-width: 800px; /* Ancho máximo para texto fácil de leer */
  margin: 40px auto; /* Centrar el contenido */
}

.page-content h1 {
  font-family: 'Merriweather', serif; /* Tipografía diferente para el título */
  font-size: 2.5rem; /* Tamaño grande para destacar el título */
  color: #222; /* Color más oscuro */
  margin-bottom: 20px; /* Separación del título con el contenido */
  text-align: center; /* Centrar el título */
  border-bottom: 2px solid #e3e3e3; /* Línea inferior para estilo formal */
  padding-bottom: 10px; /* Espaciado debajo del título */
}

.page-content .content {
  font-size: 1.125rem; /* Tamaño de texto cómodo para lectura */
  text-align: justify; /* Alineación justificada para apariencia formal */
  padding-top: 20px; /* Separación inicial del contenido */
}

.page-content .content p {
  margin-bottom: 20px; /* Espaciado entre párrafos */
}

.page-content .content ul,
.page-content .content ol {
  margin: 20px 0;
  padding-left: 40px; /* Sangría para listas */
  font-size: 1.1rem;
}

.page-content .content a {
  color: #0066cc; /* Color azul para enlaces */
  text-decoration: none; /* Sin subrayado por defecto */
  font-weight: bold; /* Destacar enlaces */
}

.page-content .content a:hover {
  text-decoration: underline; /* Subrayado al pasar el mouse */
}

/* Agregar estilo para citas */
.page-content blockquote {
  font-style: italic;
  border-left: 4px solid #ccc; /* Línea vertical decorativa */
  padding-left: 16px;
  color: #555;
  margin: 20px 0;
}

/* Tablas dentro del contenido */
.page-content table {
  width: 100%; /* Que ocupe todo el ancho disponible */
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 1rem;
}

.page-content table th,
.page-content table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

.page-content table th {
  background-color: #f4f4f4; /* Fondo para encabezados */
  font-weight: bold;
}

.page-content img {
  max-width: 100%; /* Asegura que las imágenes sean responsivas */
  height: auto;
  margin: 20px 0;
  display: block;
}