*{ box-sizing: border-box;
    margin: 0;
    padding: 0;}

a { text-decoration: none; color:black;}
li { list-style: none;}
img { max-width:100%;}

html{scroll-behavior: smooth;
  font-size: 62.5%;   
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100, 300, 400, 500, 700, 800, 900;
  font-style: normal;}

body {background-color: #333;}
.onda-blanca {position: absolute; bottom: 0; right: 0; z-index: 20; width: 100%;}
.onda-celeste {position: absolute; bottom: 0; right: 0; width: 100%;}


main {position: relative; width:133rem; background-color: #fff; margin:0 auto; z-index:auto;}
/*.container {display: flex; flex-wrap: wrap; width:90%; margin: 0;}*/
/*#arriba {background-image: url(../img/portada.jpg); background-repeat:no-repeat; width:100%; min-height: 74vh; background-size: contain;;position: relative;}*/
#upward {background-image: url(../img/portada.jpg); background-repeat:no-repeat; width:100%; min-height: 74vh; /*background-size: contain;*/;position: relative;}
img header{width:100%;}

head {position:relative;}
/*h1 {position: absolute; right:24rem; top:14rem;/* background-image: url(../img/caro-von-oertel-logo.png); background-repeat: no-repeat; *//*display:inline-block; width:257px; height: 195px; text-indent: -9999px;}*/
h4 {font-size: 3rem; font-weight: 600;}
/*.tipo {font-size: 2.5rem; line-height: 2.9rem; font-weight: 900; position:absolute; top:37rem; right:13rem; color:black;}*/
.desplegable {font-size: 2rem; padding-bottom:1rem; font-weight:600; border-bottom: 1px solid #000;}
.desplegable strong{font-size: 1.5rem;font-weight:600;}


/*Estilos portada*/
.contenedor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1rem;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}

.imagen-circulo {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.logo3 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  width: 33%;
}

.texto-port {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  font-size: 2.5rem;
  line-height: 2.5rem;
}

@media (max-width: 768px) {
  .contenedor {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    text-align: center;
  }

  .imagen-circulo {
    grid-column: 1 / -1;
  }

  .logo3 {
    grid-column: 1 / -1;
  }

  .texto-port {
    grid-column: 1 / -1;
  }
}
/*FIN Estilos portada*/


.separadora{border-bottom:1px solid black;}

.resaltado{font-weight: 700; color: black; margin: 0;background-image: linear-gradient(transparent 50%,#f7aeaf 50%); width: 30%;}
.resaltado-rosa a{font-weight: 700; color: black; margin: 0;background-image: linear-gradient(transparent 50%,#f7aeaf 50%);}
.resaltado-rose{font-weight: 700; color: black; margin: 0;background-image: linear-gradient(transparent 50%,#f7aeaf 50%);}
.resaltado-celeste a{font-weight: 700; color: black; margin: 0;background-image: linear-gradient(transparent 50%,#c2d1e5 50%);}
.resaltado-celes{font-weight: 700; color: black; margin: 0;background-image: linear-gradient(transparent 50%,#c2d1e5 50%);}
.resaltado-naranja{font-weight: 700; color: black; margin: 0;background-image: linear-gradient(transparent 50%,#f04e26 50%);}
.boton{font-family: "Montserrat", sans-serif; font-size: 2.2rem;float: right; font-weight: 900; border: none; color: #b11f72; padding-top: 1rem; margin: 0;} 
#resaltado-celeste{font-weight: 700; color: black; margin-bottom: 9px; background-image: linear-gradient(transparent 50%,#c2d1e5 50%);}
/* regla para el resaltado de textos, por ejemplo el rosa: 
background-image: linear-gradient(transparent 50%,#f7aeaf 50%);*/

#quien-soy {background-color: #b5b0ad; position: relative; }
#quien-soy section, #ikigai section{width: 95%; /*background-color: aquamarine;*/ margin: 0 auto; display:flex;flex-direction: row;  align-items: flex-end; justify-content: space-around;     position: sticky;
    z-index: 20;}
#quien-soy article, #ikigai article{/*background-color: pink;*/ width: 60%; display: grid; justify-content: space-around; padding-right: 1rem;}



.logos {/*background-color: pink;*/ width: 100%; padding:3% 6%; display: inline-flex;}
.logos ul {display: inline-flex; flex-wrap: wrap; width: 100%; flex-direction: row; padding: 0; justify-content: center; align-items: center;}
.logos li {padding:1%;}
.logos li a{display: inline-block; width: 100%; height: auto;}

#como-te-ayudo {/*background-color:moccasin;*/ min-height: 30rem; margin-top: 25px;}
.blue { font-family: "Montserrat", sans-serif; font-size: 4rem; font-weight: 700; letter-spacing: -1px; color:black; margin: 0; text-align: center;}
.como-te-ayudo {width: 100%; padding:3%; display: inline-flex; text-align: center; color:black;}
.como-te-ayudo ul {display: inline-flex; justify-content: center; width: 100%;padding: 0 5%;}
.como-te-ayudo li {padding:1%; margin:13px; }
.como-te-ayudo li a{display: inline-block; width: 100%; height: auto;}
.como-te-ayudo li h3{ width: 27rem; font-size: 1.6rem;  margin:0 auto;}
.como-te-ayudo li h4{ width: 27rem; font-size: 2.2rem; color: #187de5; font-weight: 900; margin:0 auto;}
.como-te-ayudo li h5{ width: 30rem; font-size: 1.8rem; color: #b11f72; font-weight: 800; margin:0 auto;}
.como-te-ayudo li p{ width: 27rem; font-size: 1.4rem;  margin:0 auto;}
.cto-equipos { width: 27rem; font-size: 1.6rem;  margin:0 auto;font-weight: 900; font-family: "M PLUS Rounded 1c", sans-serif;text-align: center; padding-bottom:5%;}
.sombra-celeste {/*box-shadow: -0.6rem 0.6rem 0 2px #d0dee5;*/ background-color: #c2d0e5; border-radius: 25px;}
.sombra-bermellon {/*box-shadow: -0.6rem 0.6rem 0 2px #ed9e80;*/background-color: #f7aeae; border-radius: 25px;}
#clientes section {width: 100%; /*background-color: aquamarine;*/ margin: 0 auto; padding: 4rem 0;}
#clientes{text-align: center; font-family: "Montserrat", sans-serif; letter-spacing: -1px; min-height: 30rem;}
#clientes h3 {font-size: 4rem; font-weight: 700;}
#clientes h4, #trabajo h4{font-size: 3rem; font-weight: 400;line-height: 3rem;}
#clientes p{font-size: 2rem; font-weight: 700; line-height: 4rem;}
#clientes .h3-ch {font-size: 2.5rem; font-weight: 900; color: #187de5;}

#testimonios h3{color: #b11f72; font-size: 4rem;}
.testimonios-slider li p {display: inline-flex; text-align: center; font-family: "Montserrat", sans-serif; letter-spacing: -1px; font-size: 2rem; line-height: 2.2rem!important; font-weight: 500!important; font-style: oblique; color: grey;padding: 2rem;}
.testimonios-slider strong{display: inline-flex; text-align: center; font-family: "Montserrat", sans-serif; letter-spacing: -1px; font-size: 1.6rem!important; font-weight: 700!important; font-style: oblique; color: #333;}

/*carrousel Testimonios*/
#testimonios {
  text-align: center;
  margin: auto;
  padding: 5rem;
  display: flex;
  justify-content: center; /* centra horizontalmente */
  align-items: center; 
  flex-direction: column;   
}
.carrusel {
  position: relative;
  overflow: hidden;
  width: 80%;
  margin: 0 auto;
}
.testimonios-slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
  padding: 0;
  margin: 0;
  list-style: none;
}
.testimonios-slider li {
  min-width: 100%;
  box-sizing: border-box;
  padding: 20px;
}
button.prev,
button.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
  z-index: 10;
}
button.prev {left: 10px;}
button.next {right: 10px;}
/*FIN carrousel Testimonios*/

#cursos h4 {font-size: 2.5rem; font-weight: 600;  line-height: 3rem;}
.cursos-colum {width: 100%;}
.lista-img {display: flex; list-style: none; padding: 0 10%; margin: 0; justify-content: center;/* gap: 20px; opcional */}
.lista-img li {width: 65% /*muestra solo el 65% */; overflow: hidden /* recorta el resto */; padding: 4%;}
.lista-img h4 {font-size: 3rem; color:#187de5; font-weight: 700;}
.lista-img h5 {font-size: 2rem; font-weight: 700;}
.boton2 {font-size: 2.6rem; font-weight: 700; color: #fff;  border-radius: 2rem; background-color: #187de5;}



#trabajo, #cursos{text-align: center; font-family: "Montserrat", sans-serif; letter-spacing: -1px; min-height: 30rem;}
#trabajo, #como-te-ayudo {background-color: #eee;}
#trabajo h3, #cursos h3 {font-size: 4rem; font-weight: 700;}
#trabajo .image {
    width: 275px;
    height: 240px;
    color: #fff;
    text-align: center;
    line-height: 200px;
    transition: transform 0.3s ease;
  }
  .image:hover {
    transform: translateY(-10px); /* Cambia el valor para ajustar el desplazamiento */
  }

  #galeria {text-align: center; font-family: "Montserrat", sans-serif; letter-spacing: -1px; min-height: 30rem; padding: bottom 5rem;}
  #galeria h3 {font-family: "Montserrat", sans-serif; font-size: 4rem; font-weight: 700; letter-spacing: -1px; padding-top:3rem;}

.txt-compensado{text-align: justify; font-size: 1.6rem; font-weight: 500;}
.txt-compensado strong{font-size: 2.3rem; color: #b11f72; font-weight: 900px;}
.article-img {display: flex; align-items: center; justify-content: flex-end;}

#ikigai {/*background-color: skyblue;*/ min-height: 15rem; min-height: 15rem; text-align:center;}
#ikigai h3 {color:#b11f72; font-family: "Montserrat", sans-serif; font-size: 4rem; font-weight: 700; letter-spacing: -1px; }
#ikigai p {font-family:"Montserrat", sans-serif; font-size: 2.3rem; line-height: 2.5rem; font-weight: 500; letter-spacing: -1px; }


#quien-soy, #ikigai, #trabajo, #cursos, #clientes, #como-te-ayudo, #contacto {padding-bottom:5%; position: sticky; z-index: 20; padding-top: 3%;}

.titulo-der {font-size: 10rem; font-weight: 700; color: black; margin:0; padding-left: 20px; margin-top: -24px; text-align: right}
.titulo {font-size: 10rem; font-weight: 700; color: black; margin:0; padding-left: 20px; margin-top: -24px;}
.titulo-doble {line-height: 6rem;font-size: 5rem; font-weight: 900; color:#b11f72; margin:0; padding-left: 7rem;}

/*Estilos Contacto*/
#contacto {background-color:#fff; display:flex; flex-direction: row; justify-content: space-around; width: 100%; padding: 3rem 5rem;}
.hola{margin-left: 15%; color: black; font-size: 1.8rem; font-weight: 700;}
.hola a{ color:#187de5;}
footer h3 {font-size: 5rem; font-weight: 900; color:#b11f72; margin: 0; text-align: center;}
.hola .bold {font-size: 2.2rem; font-weight: 900;}
.wssp-cto {display: inline-flex; align-items: center; font-weight:700; font-size: 2rem;}
.redes {padding-top: 1.8rem;}
.redes a{margin-right: 2%;}
.letra-chica{font-size:1.3rem; font-style: italic; margin-top:4rem;}
.up {background-image: url(../img/up.png); width:60px; height:60px; position: fixed; bottom: 10px; right: 10px;}
.firma {background-color: #333; width:100%; height:3rem; line-height:3rem; font-size: 1rem; text-align: center; color:#fff;}
.blue-sky {font-weight: 700; color: #187de5 !important;}
.magenta {font-weight: 700; color: #f7aeae !important;}

label,.resp {font-family: "Montserrat", sans-serif; font-size: 1.6rem; color:#000; padding-top: 2rem; font-weight: 700;}
label strong{font-family: "Montserrat", sans-serif; font-size: 1.2rem; color:#000; padding-top: 2rem;}
input {display: inline-block; 
	   width:100%; 
       min-height: 36px;
	   border: 2px solid #187de5;
      -moz-border: 2px solid  #187de5; 
	  -webkit-border: 2px solid  #187de5;
       border-left-color: transparent;
       border-right-color: transparent;
       border-top-color: transparent;
       background:none;}

textarea {font-family: "Montserrat", sans-serif;
          width: 100%; 
	      min-height:130px; 
	      background: none;
	      border: 2px solid  #187de5;
          border-top-color: transparent;
	      -moz-border: 2px solid #187de5; 
	      -webkit-border: 2px solid #187de5;
          }

.contacto-cliente {display:flex; width:50%;}
#contact {width:100%;}
.espero {font-family: "Montserrat", sans-serif;
    color:red;
    font-size: 4rem;
    font-weight: 500;
    padding-top:15rem;}

.arg{font-family: "Montserrat", sans-serif; font-size: 1.6rem; padding-top: 16%; line-height: 2.6rem;}


.clear {clear: both;}

/* M E D I A  Q U E R I E S*/ 
@media screen and (max-width:1630px){
}

@media screen and (max-width:1440px){
}

@media screen and (max-width:1390px){
/*#arriba {background-image: url(../img/portada.jpg); background-repeat:no-repeat; width:100%; min-height: 113vh; /*background-size: contain;*//*;position: relative;}*/
#upward {background-image: url(../img/portada.jpg); background-repeat:no-repeat; width:100%; min-height: 113vh; /*background-size: contain;*/;position: relative;}
}


@media screen and (max-width:1200px){
main {width: 95%; margin: 0 auto;}
#clientes h4, #clientes .h4, #trabajo h4{padding-top: 6rem;}
.logos {padding: 0;}
.texto-port {font-size: 2.3rem;line-height: 2.3rem;}
}

@media screen and (max-width:1024px){
header { min-height: 57vh; background-size: contain;}
/*h1 {margin:0; background-image: url(../img/logo-mobile.png);left:54%; top: 19%;}*/
/*.tipo {font-size: 1.8rem; position: absolute; left:54%; top: 53%; line-height: 1.8rem; width: 100%;}*/
#quien-soy section, #ikigai section{width: 95%;margin: 0 auto; display: inline-flex; flex-direction: column;  align-items: center; justify-content: space-around;}
#quien-soy article,  #ikigai article {width: 85%;}
#contacto {display: flex; flex-direction: column; background-size: cover; background-position: center;}
.article-img {display: flex; align-items: stretch; justify-content: space-around; flex-direction: column; margin-bottom: 4rem;}
.hola {margin-left: 0;}
}

@media screen and (max-width:888px){
.titulo {font-size: 8rem;}
.como-te-ayudo ul {display: inline-flex; justify-content: center; flex-wrap: wrap;}
.como-te-ayudo li {width: 88%; padding: 5%;}
.como-te-ayudo li h3, .como-te-ayudo li h4,  .como-te-ayudo li p {width: 85%; padding: 1%;}
.como-te-ayudo li h3, .como-te-ayudo li p {font-size: 1.9rem;}
.como-te-ayudo li h4, .como-te-ayudo li h5 {font-size: 2.4rem;}
#quien-soy, #ikigai, #trabajo, #cursos, #clientes, #como-te-ayudo, #contacto  {padding-top: 5%;}
.carrusel {position: relative; overflow: hidden; width: 100% !important; margin: 0 auto;}
}


@media screen and (max-width:768px){
   /* #arriba {background-image: url(../img/portada-mobile.jpg); background-repeat:no-repeat; width:100%; min-height: 72vh; /*background-size: contain;*//*}*/
   .texto-port {padding-top: 30rem;font-size: 1.8rem;}
    #upward {background-image: url(../img/portada-mobile.jpg); background-repeat:no-repeat; width:100%; min-height: 72vh; /*background-size: contain;*/}
    /*h1 {margin:0; background-image: url(../img/logo-mobile.png);left:59%;}*/
   /* .tipo {font-size: 2.6rem; position: absolute; left:0%; top: 70%; line-height: 2.9rem; text-align: center;}*/
    .lista-img {display: flex; list-style: none; padding: 0; margin: 0; justify-content: center; flex-direction: column;}
    .lista-img li {margin: 0 auto;}
    .texto-port {padding-top: 40rem;}
    #ikigai{padding: 10%;}
}


@media screen and (max-width:600px){
#quien-soy article{width: 90%; padding: 5%; margin:0 auto;}
#clientes h4, #clientes .h4, #trabajo h4 {padding-top: 1rem;}
.logos {width: 90%; padding: 8%;}
.logos li {padding: 8%;}
#ikigai h3 {line-height: 4rem;}
#trabajo h3 {line-height: 4rem;}
#trabajo {width: 100%!important; padding: 0; margin: 0;}
.footer, #clientes, #trabajo {padding-top: 5rem;}

}

@media screen and (max-width:515px){
#trabajo h3, #clientes h3, .blue {font-size: 3rem; line-height: 4rem;}
#trabajo h3 {padding: 1.3rem;}
#clientes h4, #clientes .h4, #trabajo h4 { padding-top: 2rem; font-size: 2.5rem; line-height: 2.5rem;}
#ikigai { padding: 20%;} 
#clientes p {font-size: 1.5rem;}
}




@media screen and (max-width:414px){
/*#clientes p {width: 300px; padding-top: 2rem;}*/
.texto-port {padding-top: 28rem;font-size: 1.8rem;}
.titulo {font-size: 7rem; padding-bottom: 3rem;}
.titulo-doble {line-height: 6rem; font-size: 5rem; font-weight: 700; color:#b11f72; margin: 0;  padding-left: 20px; padding-bottom: 3rem;}
/*.como-te-ayudo li p {width: 25rem;padding-left: 1rem;}
.como-te-ayudo li h3 {width: 25rem;padding-left: 1rem;}*/
.hola {margin-left: 0; padding-top: 5rem;}
.hola a {font-size: 1.6rem;}
/*#arriba {background-image: url(../img/portada-mobile-414.jpg); background-repeat:no-repeat; width:100%; min-height: 79vh; background-size: cover;}*/
#upward {background-image: url(../img/portada-mobile-414-en.png); background-repeat:no-repeat; width:100%; min-height: 79vh; background-size: cover;}
/*h1 {display: none;}*/
/*.tipo {display: none;}*/
.txt-compensado{text-align: center;}
.blue {line-height: 5rem;}
.como-te-ayudo li {width: 100%;}
.como-te-ayudo li h4, .como-te-ayudo li h5 { font-size: 1.6rem; width:90%;}
.como-te-ayudo li h3, .como-te-ayudo li p {font-size: 1.6rem;}
#clientes h4, #trabajo h4{font-size: 3rem; padding: 0;}
#clientes p{line-height: 2rem;padding-top: 2%;}
#ikigai p {font-size: 1.8rem; padding-top: 2rem;}
#contacto {padding: 3rem;}
}

@media screen and (max-width:376px){
/*#arriba {background-image: url(../img/portada-mobile-372.jpg); background-repeat:no-repeat; width:100%; /*min-height: 81vh;*/ /*background-size: contain;}*/
.texto-port {padding-top: 28rem;font-size: 1.6rem;}
#upward  {background-image: url(../img/portada-mobile-372-en.png); background-repeat:no-repeat; width:100%; /*min-height: 81vh;*/ background-size: contain;}
}