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

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

html{font-size: 62.5%; font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 100, 300, 400, 500, 700, 800, 900; font-style: normal;}


body {background-color: #E59310;}
.destacado {display: inline-flex; flex-direction: column; align-items: flex-end; padding-right: 7rem; padding-bottom: 2rem;}
.logos-link {display: inline-flex; align-items: center; margin-left: 1rem;}
.plus {font-family:"M PLUS Rounded 1c", sans-serif; font-size: 2rem; font-weight: 700; letter-spacing: -1px; line-height: 2.4rem;}
.lkdn {padding: 2rem 0 0 1rem;}

main {position: relative; width:125rem; background-color: #fff; margin:0 auto; z-index:auto;}
/*.container {display: flex; flex-wrap: wrap; width:90%; margin: 0;}*/
#arriba {background-image: url(../img/cstalks-latam-portada.png); background-repeat:no-repeat; width:100%;min-height: 69vh; background-size: cover;position: relative;}
#upward {background-image: url(../img/cstalks-latam-portada.png); background-repeat:no-repeat; width:100%; min-height: 69vh;background-size: cover; position: relative;}
#upward-special-offers {background-image: url(../img/cstalks-special-offers.png); background-repeat:no-repeat; width:100%; min-height: 46vh; background-size: contain; }
img header{width:100%;}

head {position:relative;}
h1 {text-indent: -9999px; height: 0;}
.h1-special-offers {text-indent: -9999px; height: 0;}
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; }
.desplegable {font-size: 2rem; padding-bottom:1rem; font-weight:600; border-bottom: 1px solid #000;}
.desplegable strong{font-size: 1.5rem;font-weight:600;}

.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: "M PLUS Rounded 1c", sans-serif; font-size: 2.7rem;float: right; font-weight: 900; border: none; color: #F8B226; padding-top: 1rem; margin: 0; background-color: #fff;} 
#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%);*/

#about-us {background-color: #fff; position: relative; }
#about-us section, #podcast 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;}
#podcast-2 section {width: 95%; margin: 0 auto; display:flex; flex-direction: row;  align-items: center;}
#about-us article, #podcast article, #podcast-2 article {/*background-color: pink;*/ width: 60%; padding-right: 1%;}




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

#other-episodes {background-color: rgba(248, 178, 38, 0.2); min-height: 30rem;}
#books{background-color: rgba(80, 204, 162, 0.2); min-height: 30rem;}
#books a{font-size: 1.6rem; color: #f04e26; font-weight: 800; padding: 0;margin: 0;}
#books img{width: 18%; height: 18%;}
.blue {font-size: 5rem; font-weight: 900; color:#187de5; margin: 0; text-align: center;}
.other-episodes {width: 100%; padding:3%; display: inline-flex; text-align: center; color:black;}
/*.other-episodes ul {display: inline-flex; justify-content: center; width: 100%;padding: 0 5%;}*/
.other-episodes li {padding:1%; margin:13px;}
.other-episodesli a{display: inline-block; width: 100%; height: auto;}
.other-episodes li h3{font-size: 2.2rem; color: #50cca2; font-weight: 900; text-align: left; padding: 1rem; line-height: 2rem;}
.other-episodes li h4{font-size: 2rem; color: black; font-weight: 900; text-align: left; padding: 1rem; line-height: 2.2rem;}
.contiene li h3{font-size: 2.6rem; color:#E59310; font-weight: 900; text-align: left; padding-left: 1rem; line-height: 2.6rem;}
.contiene li h4{font-size: 1.6rem; color: black; font-weight: 700; text-align: left; padding-left: 1rem; line-height: 2.2rem;}
.vli h4{ width: 27rem; font-size: 2.2rem; color: #187de5; font-weight: 900; margin:0 auto;}
.other-episodes li h5{ width: 30rem; font-size: 1.8rem; font-weight: 800; margin:0 auto;}
.other-episodes 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;}
.business {display:inline-flex; padding: 10rem;}
.business ul{display:inline-flex; flex-direction: column; width: 87%;}
.business li{display:inline-flex; flex-direction: row; align-items: flex-start;}
.img {width: 100%; height: auto; object-fit: contain;}
.txt-bsns {padding-left:2rem}
.txt-bsns h3{font-size: 2rem; color:#50cca2; font-weight: 900; text-align: left; line-height: 2.2rem;}
.txt-bsns h4{font-size: 2rem; color: black; font-weight: 700; text-align: left; line-height: 2.2rem;}
.txt-bsns p{font-size: 1.3rem; color: black; font-weight: 700; text-align: left; line-height: 2.2rem;}
.txt-bsns strong{font-size: 1.5rem; color: black; font-weight: 900; text-align: left; line-height: 2.2rem;}
.discounted {background-color: #50cca2; border-radius: 5px; padding:0.5rem;}
.discounted-01 {background-color: rgba(80, 204, 162, 0.4); border-radius: 5px; padding:0.5rem;}
.discounted-02 {background-color: rgba(240, 78, 38, 0.4); border-radius: 5px; padding:0.5rem;}
.discounted-03{background-color: rgba(240, 78, 38, 0.7); border-radius: 5px; padding:0.5rem;}
.discounted-04{background-color: orange; border-radius: 5px; padding:0.5rem;}
.mail a{color:#f04e26;}
.green strong{color: #50cca2;}

.image:hover {transform: translateY(-10px); /* Cambia el valor para ajustar el desplazamiento */}


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


#podcast {background-color: #F8B226; display: inline-flex; width: 100%; justify-content: space-between; align-items: center;}
.izq {padding-left: 13rem;}
.der  {position: absolute; right: 0; top: -30px;}
.button {padding: 2rem 0;}
#podcast h3 {color:black; font-family: "M PLUS Rounded 1c", sans-serif; font-size: 5rem; line-height: 5rem; font-weight: 900; letter-spacing: -1px;text-align: left; padding-top: 7rem;}
#podcast p {font-family:"M PLUS Rounded 1c", sans-serif; font-size: 2.5rem; line-height: 2.5rem; font-weight: 700; letter-spacing: -1px; }
#podcast-2 {background-color: rgba(248, 178, 38, 0.2); display: inline-flex; width: 100%; justify-content: space-between; align-items: center;padding: 2rem;}
.welcome {display: inline-flex; flex-direction: column; align-items: flex-end; padding-right: 7rem; padding-bottom: 2rem;}
.comtiene {display: inline-flex; width: 90%;}
.untercio {display: inline-flex; flex-direction: row;}
.uncuarto {display: inline-flex; flex-direction: column; width: 25%;}
.uncuarto h4{width: 100%; font-size: 1.6rem; color: black; font-weight: 700; text-align: left; line-height: 2.2rem;}
.uncuarto h3{padding-top: 1rem; }
.medio {width: 42%; display: inline-flex; flex-direction: column;}
.medio p{ text-align: left; padding-left: 3rem;}
.medio img{width: 100%; height: auto; object-fit: cover; }
.book-medio {width: 25%; display: inline-flex; flex-direction: row; margin: 10px;}
.book-medio p{ text-align: left; padding-left: 3rem;}
.book-medio img{width: 100%; height: auto;}
.video {border-radius: 15px;}

/*efecto acordeon*/
.appreciation {
    overflow: hidden;
    display: block;
    max-height: 2.4em; /* Aproximadamente dos líneas de texto */
    transition: max-height 0.3s ease-in-out;}
.appreciation.expanded {
    max-height: 1000px; /* Aumentar suficiente para mostrar todo el contenido */}


#about-us, #podcast, #other-episodes, #contacto, #books {padding-bottom:5%; position: sticky; z-index: 20;}
#podcast-2 {padding:5%;}
.break {background-image: url(../img/break-lt.jpg); width:100%; min-height: 17rem; display: flex; background-repeat: no-repeat; justify-content: center; align-items: flex-end; padding-bottom: 3rem;background-size: cover;}

.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: #50cca2; margin:0; padding-left: 20px; margin-top: -24px;}
.titulo-art {font-size: 3rem; font-weight: 900; color: #F8B226; padding-top: 2rem;}
.titulo-doble {line-height: 6rem;font-size: 5rem; font-weight: 900; color:black; margin:0; padding-left: 7rem; padding-top: 3rem; letter-spacing: -2px;}

/*Estilos Contacto*/
#contacto {background-color:#fff; display:flex; flex-direction: row; justify-content: space-around; width: 100%; padding: 3rem 5rem;}
.hola {color: black; font-size: 1.8rem; font-weight: 700;}
.hola a{ color:#F8B226;}
footer {background-color: #fff;}
footer h3 {font-size: 5rem; font-weight: 900; 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-lt.png); width:71px; height:71px; position: fixed; bottom: 180px; right: 20px;}
.ytb {background-image: url(../img/youtube-direct.png); width:70px; height:70px; position: fixed; bottom: 20px; right: 20px;}
.spotify {background-image: url(../img/spotify-direct.png); width:70px; height:70px; position: fixed; bottom: 100px; right: 20px;}
.firma {background-color: #333; width:100%; height:3rem; line-height:3rem; font-size: 1rem; text-align: center; color:#fff;}
.greenwater {font-weight: 700; color: #50cca2!important;}
.magenta {font-weight: 700; color: #f7aeae !important;}
.yellow {font-weight: 700; color: #f8b226 !important;}

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

textarea {font-family: "M PLUS Rounded 1c", sans-serif;
          width: 100%; 
	      min-height:130px; 
	      background: none;
	      border: 2px solid  #F8B226;
          border-top-color: transparent;
	      -moz-border: 2px solid #F8B226; 
	      -webkit-border: 2px solid #F8B226;
          }

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

.talks{font-family: "M PLUS Rounded 1c", sans-serif; font-size: 2rem; 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){
header {min-height: 97vh;}
}

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

@media screen and (max-width:1366px){   /*15" Notebook*/
#upward {min-height: 85vh; }
#upward-special-offers {width: 100%; min-height: 51vh;}
}

@media screen and (max-width:1280px){
#arriba {background-image: url(../img/cstalks-latam-portada.png); background-repeat: no-repeat; width: 100%; min-height: 100vh; background-size: cover;}
#upward {background-image: url(../img/cstalks-latam-portada.png); background-repeat: no-repeat; width: 100%; min-height: 100vh; background-size: cover;}
#upward-special-offers {background-image: url(../img/cstalks-special-offers.png); width: 100%;min-height: 66vh; background-size: contain;}
}

@media screen and (max-width:1200px){
main {width: 95%; margin: 0 auto;}
.logos {padding: 0;}
.uncuarto {display: inline-flex; flex-direction: column; width: 31%;}
}

@media screen and (max-width:1024px){
header { min-height: 57vh; background-size: contain;}
#arriba {min-height: 64vh;}
#upward {min-height: 64vh;}
#upward-special-offers {min-height: 43vh;}
.tipo {font-size: 1.8rem; position: absolute; left:54%; top: 53%; line-height: 1.8rem; width: 100%;}
#about-us section, #podcast section{width: 95%;margin: 0 auto; display: inline-flex; flex-direction: column;  align-items: center; justify-content: space-around;}
#about-us article,  #podcast 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;}
.micro {width: 250px;}
.destacado {display: inline-flex; flex-direction: column; align-items: center;}
#podcast-2 section {width: 100%; margin: 0 auto;  display: flex;  flex-direction: column; align-items: center;}
#podcast-2 article {width: 100%;}
}

@media screen and (max-width:888px){
.titulo {font-size: 8rem;}
.other-episodes ul {display: inline-flex; justify-content: center; flex-wrap: wrap;}
.other-episodes li {width: 88%; padding: 5%;}
.other-episodes li h3, .other-episodes li h4,  .other-episodes li p {width: 85%; padding: 1%;}
.other-episodes li p {font-size: 1.9rem; font-weight: 600;}
.other-episodes li h4, .other-episodes li h5 {font-size: 2.4rem;}
#about-us, #podcast, #other-episodes, #contacto, #books {padding-top: 5%;}
.video {width: 500px;height: 284px;}
.txt {padding: 2rem;}
.business {padding: 2rem;}
.business ul{width:95%;}
.business li{display:inline-flex; flex-direction: column;}
#upward-special-offers {background-image: url(../img/cstalks-special-offers-mobile.png); background-repeat: no-repeat; width: 100%; min-height: 70vh; background-size: contain;}
}


@media screen and (max-width:768px){
    #arriba {background-image: url(../img/portada-mobile.jpg); background-repeat:no-repeat; width:100%; background-size: contain;}
    #upward {background-image: url(../img/portada-mobile-latam.jpg); background-repeat:no-repeat; width:100%; min-height: 100vh; background-size: contain;}
    .tipo {font-size: 2.6rem; position: absolute; left:0%; top: 70%; line-height: 2.9rem; text-align: center;}
    .medio {display: inline-flex; flex-direction: column;}
    .izq { padding-left: 5rem;}
}

@media (max-width: 768px) and (orientation: landscape) {
    #upward {background-image: url(../img/cstalks-latam-portada.png); background-repeat: no-repeat; width: 100%; background-size: contain;}
}

@media screen and (max-width:672px){
.video {width: 400px; height: 227px;}
}
        

@media screen and (max-width:592px){
#podcast {width: 100%; padding: 5%; margin: 0 auto;}
#about-us article{width: 82%; padding: 5%; margin: 0 auto; font-weight: 600;}
.logos {width: 90%; padding: 8%;}
.logos li {padding: 8%;}
#podcast h3 {line-height: 4rem;}
.titulo-doble {line-height: 5rem; font-size: 4.5rem; font-weight: 900; color: black; margin: 0; padding-left: 3rem; padding-top: 3rem; letter-spacing: -2px;}
.micro {width: 150px;}
.izq { padding-left: 1rem;}
#podcast h3 {font-size: 4.3rem;}
.complemento-spotify {width:80%;}
}

@media screen and (max-width:500px){
.video {width: 320px; height: 182px;}
}

@media screen and (max-width:414px){
.titulo {font-size: 7rem; padding-bottom: 3rem;}
#arriba {min-height: 85vh;}
#upward {min-height: 85vh;}
#upward-special-offers {min-height: 51vh;}
.titulo-doble {line-height: 4rem; font-size: 3.5rem; font-weight: 900; margin: 0; padding: 2rem;}
.hola {margin-left: 0; padding-top: 5rem;}
.hola a {font-size: 1.6rem;}
.tipo {display: none;}
.txt-compensado{text-align: center;}
.blue {line-height: 5rem;}
.other-episodes li {padding: 0.5rem; margin: 1px;}
.other-episodes li h4, .other-episodes li h5 { font-size: 1.6rem; width:90%;}
.other-episodes li h3, .other-episodes li p {font-size: 1.6rem;}
#contacto {padding: 3rem;}
}

@media screen and (max-width:384px){
.titulo-art {font-size: 4rem; padding-bottom: 2rem;}
}

@media screen and (max-width: 320px) {
#upward-special-offers {min-height: 54vh;}
}