html {
    margin: 0;
    padding: 0;
	scroll-behavior: smooth;
        background-image: url("img/fondo.jpg");
    background-repeat: repeat;
    }

body{
    margin: 0;
    padding: 0;
	scroll-behavior: smooth;
    background-image: url("img/fondo.jpg");
    background-repeat: repeat;
    }

a{
    text-decoration: none;
}
/* CÓDIGO PARA LOADER INICIAL */

body.loading {
    overflow: hidden;
}

#loader {
    position: fixed;
    inset: 0;
    background: #000; /* your background color */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999; /* very high to stay on top */
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

#loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.spinner {
    width: 60px;
    height: 60px;
    border: 6px solid rgba(122, 0, 244, 0.2);
    border-top: 6px solid rgb(122, 0, 244);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}


@keyframes spin {
    to { transform: rotate(360deg); }
}

/* FIN DE CÓDIGO PARA LOADER INICIAL*/

    .close-btn { position: absolute; top: 10px; right: 15px; font-size: 28px; text-decoration: none; color: #999; }
        .close-btn:hover { color: #333; }

        /* Contenedor de flechas inferiores juntas */
        .nav-container {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 25px;
            width:100%;
        }

        .nav-btn2 {
display: inline-block;
  padding: 2px 23px;
  background: #7436b147;
  color: white;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  transition: 0.3s;
        }

        .nav-btn2:hover {
  background: #7436b180;
            color: white;
        }

.categoriaArticuloMovil{
    font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: bold;
  margin: auto;
  font-size: .8rem;
  line-height: 1.2rem;  
  text-align: center;
  color:white;
background-color: rgba(114, 55, 192, 0.7);
padding-top:5px;
padding-bottom:5px;
padding-right: 10px;
padding-left: 10px;
width: fit-content;

}

.nombreArticuloMovil{
font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  margin: auto;
  font-size: 1.2rem;
  line-height: 1.5rem;
  text-align: center;
  color: #551463;
  padding-top: 5px;
  padding-bottom: 10px;
  padding-left: 1rem;
  padding-right: 1rem;

}

        .botonArticuloMovil{
            display: flex;
            justify-content: center;
            width:fit-content;
            background-color: rgb(211, 0, 40);
            padding:5px 20px 3px 20px;
          text-decoration: none;
        }

        .botonArticuloMovil p{
font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: white;
    font-size: 1.1rem;
    text-align: center;
    margin: 0;
    text-decoration: none;
        }



         /* Overlay de pantalla completa */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100dvh;
            background: rgba(211, 0, 162, 0.2);
            display: none; /* Oculto por defecto */
            justify-content: center;
            align-items: center;
            z-index: 9999;
            backdrop-filter: blur(5px); /* Efecto de desenfoque de fondo */
        }


        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
        }


        /* Enlace de cerrar */
        .close-btn {
position: absolute;
  top: 15px;
  right: 20px;
  font-size: 30px;
  color: #980eca;
  text-decoration: none;
  line-height: 1;
  transition: color 0.2s;
  background-color: rgba(255,255,255,.5);
  border-radius: 50%;
  width: 30px;
        }

        .close-btn:hover {
            color: #ff0000;
        }


#seccion1{
    width:100%;
    display: block;
    background-image: url("img/fondo.jpg");
    background-repeat: repeat;
}

#portada{
    width:100%;
    display: flex;
    flex-wrap: nowrap;
}

#portadaDER img{
width:100%;
}

.botonMenu :hover{
    background-color: #d300a2;
    text-decoration: none;
}

#seccion1Texto{
width:100%;
padding-bottom: 8vh;
}

.imgWholeWidth1{
    width:100%;
    display: flex;
    position: relative;
    flex-wrap: nowrap;
    background-image: url(img/pared1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
}

.imgWholeRemate{
    width:100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column; /* Stacks the images vertically */
    justify-content: space-between; 
    position: absolute;
    height:auto;
    z-index: 10;
    top:0;
    bottom:0;
}

.imgWholeRemate img{
    width:100%;
    position: relative;
    height:auto;
}

.seccion2Texto{
    width:100%;
    display: block;
    background-image: url("img/fondo.jpg");
    background-repeat: repeat;
}

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

.imgWholeWidth2{
    width:100%;
    display: flex;
    flex-wrap: nowrap;
    background-image: url(img/fondo.jpg);
    background-repeat: repeat;

}

.boxSeccion2LateralTopDer img{
    width:80%;
}

.boxSeccion2LateralBttmIzq img{
    width:110%;
}

.imgWholeWidth3{
    width:100%;
    display: flex;
    position: relative;
    flex-wrap: nowrap;
    background-image: url(img/pared2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
}





/* PULSOS */

@-webkit-keyframes pulso1-kf {
  from { opacity: .4; transform: scale(1); }
  to   { opacity: .8;  transform: scale(1.1); }
}
@keyframes pulso1-kf {
  from { opacity: .4; transform: scale(1); }
  to   { opacity: .8;  transform: scale(1.1); }
}

.pulso1 {
    animation: pulso1-kf 2s ease-in-out infinite alternate;
    -webkit-animation: pulso1-kf 2s ease-in-out infinite alternate;
}

@keyframes pulso2-kf {
  from { opacity: .4; transform: scale(1); }
  to   { opacity: .8;  transform: scale(1.1); }
}

@-webkit-keyframes pulso2-kf {
  from { opacity: .4; transform: scale(1); }
  to   { opacity: .8;  transform: scale(1.1); }
}


.pulso2 {
    -webkit-animation: pulso2-kf 3s ease-in-out infinite alternate;
    animation: pulso2-kf 3s ease-in-out infinite alternate;
}


@-webkit-keyframes pulso3-kf {
  from { opacity: .4; transform: scale(1); }
  to   { opacity: .8;  transform: scale(1.1); }
}

@keyframes pulso3-kf {
  from { opacity: .4; transform: scale(1); }
  to   { opacity: .8;  transform: scale(1.1); }
}

.pulso3 {
    -webkit-animation: pulso3-kf 4s ease-in-out infinite alternate;
    animation: pulso3-kf 4s ease-in-out infinite alternate;
}


@-webkit-keyframes pulsoNotas-kf {
  from { opacity: .9; transform: scale(.95); }
  to   { opacity: 1;  transform: scale(1); }
}

@keyframes pulsoNotas-kf {
  from { opacity: .9; transform: scale(.95); }
  to   { opacity: 1;  transform: scale(1); }
}

.pulsoNotas {
    -webkit-animation: pulsoNotas-kf 1.5s ease-in-out infinite alternate;
    animation: pulsoNotas-kf 1.5s ease-in-out infinite alternate;
}

@-webkit-keyframes pulsoBoton-kf {
  from { opacity: .5; transform: scale(1); }
  to   { opacity: 1;  transform: scale(1.1); }
}

@keyframes pulsoBoton-kf {
  from { opacity: .5; transform: scale(1); }
  to   { opacity: 1;  transform: scale(1.1); }
}

.pulsoBoton {
    -webkit-animation: pulsoBoton-kf 1s ease-in-out infinite alternate;
    animation: pulsoBoton-kf 1s ease-in-out infinite alternate;
}


/* SECCION PODCASTS */

#seccionPodcasts{
    width:100%;
    height:auto
}

        .carousel-container {
            position: relative;
            width: 100%;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }


        .nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: #5C00D3;
            color: white;
            border: none;
            padding: 15px;
            cursor: pointer;
            z-index: 10;
        }

        .prev { left: 10px; }
        .next { right: 10px; }


        .botonPodcast{
            background-color: #5C00D3;
            padding:4px 15px 2px 15px;
          text-decoration: none;
        }

        .podcastInfo a:hover{
            background-color: #d300a2;
                      text-decoration: none;
        }



         .atizandoLogo{
            width:100%;
            display: flex;
            justify-content: right;
         }

         .atizandoLogo img{
            width:30%;
            margin-top: -10%;

         }



.footer{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  width:100%;
     background-image: url("img/fondo3.jpg");
    background-repeat: repeat;
    justify-content: center;
    box-shadow: 0px 0px 200px 33px rgba(68, 59, 38, 0.2);
}

#logoAvispaFooter img{
    width:100%;
    height:auto;
}

.caja_tabla_redes2{
	width:100%;
	margin-top:25px;
	margin-bottom:30px;
  display:flex;
  align-items: center;
  justify-content: center;
}

.caja_tabla_redes3{
	width:300px;
	display:flex;
	  align-items: center;
  justify-content: center;
}

.caja_tabla_redes3 div{
	width:50px;
  display:flex;
  align-items: center;
  justify-content: center;
}

.caja_apoyanos{
	width:100%;
	display:flex;
	 align-items: center;
  justify-content: center;
}	

.apoyanos_footer{
	max-width:100%;
	margin: 0 auto;
}

.caja_creditos{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
width:100%;	
}

.creditos2{
	width:100%;
	display:flex;
	flex-wrap:wrap;
	  align-items: center;
  justify-content: center;
  margin-bottom: 35px;
}

.frase_final{
	width:100%;
	display:flex;
		flex-wrap:wrap;
	margin-bottom:20px;
	  align-items: center;
  justify-content: center;
}



  


@media screen and (min-width: 320px){

        .slider {
            display: flex;
            width: 100%;
            transition: transform 0.5s ease-in-out;
        }


.menuContenedor{
    width:100%;
    position: absolute;
    height:auto;
    z-index: 20;
    top:0;
    bottom:0;
    display:grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 15vh;
    margin-bottom: 15vh;
    grid-auto-rows: 1fr;
}


    /*BOTONES MOVILES Y TABLETA*/

#botonManchaDIVM{
    fill:#5C00D3;
    opacity: .8;
    width:33%;

}

#botonManchaDIV5M{
    fill:#5C00D3;
    opacity: .8;
    width:48%;
}

#botonManchaDIV7M{
    fill:#5C00D3;
    opacity: .8;
    width:55%;
}

#botonManchaDIV9M{
    fill:#5C00D3;
    opacity: .8;
    width:42%;
}

#botonManchaDIV10M{
    fill:#5C00D3;
    opacity: .8;
    width:58%;
}

#botonManchaDIV12M{
    fill:#5C00D3;
    opacity: .8;
    width:45%;
}

    /* FIN BOTONES MOVILES Y TABLETA */


/* BOTONES MÓVILES */

.botonContenedor1M{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
position: relative;
  top: 22%;
}

.botonContenedor2M{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: end;
position: relative;
  right: 41%;
  top: 35%;
}

.botonContenedor3M{
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    position: relative;
    width:80%;
  top: 10%;
  left: 20%;
}

.botonContenedor4M{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: start;
position: relative;
  right: 22%;
  top:23%;
}

.botonContenedor5M{
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
position: relative;
width:67%;
  left: 33%;
  top: 25%;
}

.botonContenedor6M{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: start;
position: relative;
  right: -19%;
  top: -1%;
}

.botonContenedor7M{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
position: relative;
  left: 45%;
  top: 57%;
  width:55%;
}

.botonContenedor8M{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: center;
    position: relative;
    top: 18%;
}

.botonContenedor9M{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    position:relative;
    left: 27%;
    top:66%;
    width:73%;
}

.botonContenedor10M{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
position: relative;
width: 50%;
  left: 50%;
  top: 77%;
}

.botonContenedor11M{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: start;
position: relative;
  right: 15%;
  top: 0%;
}

.botonContenedor12M{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
position: relative;
  top: 97%;
  left: 21%;
  width:79%;
}

/* */


            /* Contenedor del contenido flotante */
        .modal-content {
            background: white;
                background-image: url("img/fondoNotas.jpg");
    background-repeat: repeat;
            padding: 19px 5px;
            max-width: 400px;
            width: 97%;
            text-align: center;
            position: relative;
            animation: fadeIn 0.4s ease-out;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
        }

        .contenedorImagenNota{
            width:100%;
            height:auto;
            overflow: hidden;
            margin-bottom: 20px;
        }

        .contenedorImagenNota img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.creditos{
	width:100%;
	display:flex;
	flex-wrap:wrap;
	  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  margin-top: 35px;
}

.caja_creditos img{
width:90%;	
margin-right: 4vw;
margin-bottom: 40px;
}

.creditos_texto_2{
	width:100%;
            font-family: "Roboto Serif", serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            font-size: .9rem;
            line-height: 1.5rem;  
		text-align:center;
color:white;
padding-left: 5%;
padding-right: 5%;
margin-bottom: 40px;
      -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

.creditos_texto_2 p{
margin-top:0;
margin-bottom:10px;
}

.creditos_texto{
            font-family: "Roboto Serif", serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            font-size: 1.1rem;
            line-height: 1.5rem;  
	color:white;
	margin:auto;
    text-align: center;
    padding-left: 5%;
padding-right: 5%;
      -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

.frase_final p{
	text-align:center;
	color:white;
	font-family:sans-serif;
	font-size:.8rem;
	margin:auto;
	line-height:1.6rem;
    padding-left: 5%;
padding-right: 5%;
}

.caja_apoyanos a{
	width:80%;
}

    .caja_logo_footer{
	width:100%;
		display:flex;
	  align-items: center;
  justify-content: center;
  margin-top: 50px;
}

#logoAvispaFooter{
    width:70%;
    height:auto;
}

         .pintaFinal{
            width:100%;
            padding-top: 10vh;
            padding-bottom: 15vh;
            display: flex;
            justify-content: center;
            height: auto;
         }

         .pintaFinal img{
            width:95%;
            height: auto;
         }

        .podcastInfo{
            width:80%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            padding-left: 0%;
        }

        .podcastImg{
            width:100%;
            display: flex;
            justify-content: center;
            margin-right: 0%;
            padding-top: 10px;
            padding-bottom: 10px;
        }

         .podcastImg img{
            width:90%;
            height:auto;
            mix-blend-mode: multiply;
         }

        .child {
            background-image: url(img/fondoPodcast.png);
            min-width: 90%;
            margin: 0 5%; /* Centra el div de 90% dentro del viewport */
            height: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            color: white;
            font-size: 2rem;
            border-radius: 10px;
            background-size: 100% 100%;
            padding-top: 5%;
    padding-bottom: 2%;
        }

#seccionIlustracionMenuMovil{
    width:100%;
    display: flex;
    position: relative;
    flex-wrap: nowrap;
    background-image: url(img/pared3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
}

#seccionIlustracionMenuTableta{
    display: none;
}

#seccionIlustracionMenu{
    width:100%;
    display: none;
    position: relative;
    flex-wrap: nowrap;
    background-image: url(img/pared3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
}

.textoIntroIlustracion{
    width:80%;
    font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  margin:auto;
  font-weight: 700;
  font-style: normal;
  font-size: 1.3rem;
  line-height: 2rem;  
  margin-top: 5vh;
  padding-bottom: 5vh;
  text-align:center;
  
}

#paintholeChiquito{
 float: right; /* Text will wrap on the right side */
  width: 40vw; /* Set dimensions for the image */
  height: auto;
  shape-outside: url("img/paintholeChiquito.png"); /* Reference the same image URL */
  shape-image-threshold: 0; /* Pixels > 50% opacity define the shape boundary */
  shape-margin: 5vw; /* Add some space between the text and the image */
}

#titularPortada{
    display:block;
width:104%;
margin-top: 0vh;
margin-left: -6vw;
}

#titularPortadaCentrado{
    display:none;
width:104%;
margin-top: 0vh;
margin-left: -6vw;
}

#imgPortada3{
 display: block;
    float: right;
    width: 50vw;
    height: auto;
    shape-outside: url("img/imgPortada03.png");
    shape-image-threshold: 0;
    shape-margin: 6vw;
        margin-top: -14vh;
}

#imgPortada2{
    display: none;
 float: right; /* Text will wrap on the right side */
  width: 35vw; /* Set dimensions for the image */
  height: auto;
  shape-outside: url("img/imgPortada02.png"); /* Reference the same image URL */
  shape-image-threshold: 0; /* Pixels > 50% opacity define the shape boundary */
  shape-margin: 10vw; /* Add some space between the text and the image */
}

        .categoriaPodcast{
            font-family: "Bebas Neue", sans-serif;
            font-weight: 400;
            font-style: normal;
            color:#5C00D3;
            font-size: 1.5rem;
            text-align: left;
            margin: 0;
        }

        .tituloPodcast{
            width:100%;
            font-family: "Roboto Serif", serif;
            font-optical-sizing: auto;
            margin:auto;
            font-weight: 500;
            font-style: normal;
            font-size: 1.5rem;
            line-height: 1.8rem;  
            padding-bottom: 2vh;
            text-align:center;
            color:black;
            padding-right: 0%;
        }

        .botonPodcast p{
            font-family: "Bebas Neue", sans-serif;
            font-weight: 400;
            font-style: normal;
            color:white;
            font-size: 1.3rem;
            text-align: center;
            margin:0;
            text-decoration: none;
        }

.boxSeccion2LateralTop{
    width:0%;
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    justify-content:start;
}

.boxSeccion2LateralTop img{
    width:50%;
    display:none;
}

.boxSeccion2LateralBttm{
    width:0%;
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    justify-content: end;
}

.boxSeccion2LateralBttm img{
    width:55%;
    display:none;
}

.credito1{
  width: 100%;
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  font-size: .9rem;
  line-height: 2rem;
  text-align: center;
        -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

.credito2{
  width: 80%;
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  font-size: .9rem;
  line-height: 2rem;
  text-align: center;
  margin: auto;
        -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

.imgWholeWidth2Box{
    width:100%;
    display: flex;
    flex-wrap: nowrap;
    background-image: url(img/cartelesFondo.png);
    background-repeat: no-repeat;
    background-size: 116%;
    background-position: center;
    justify-content: center;
}

.imgWholeWidth2Box img{
    width:100%;
}


.textoSeccion1A{
margin-top: 0;
    margin-left: 8vw;
    margin-right: 8vw;
    margin-bottom: 4vh;
    text-align: justify;
}

.textoSeccion1B{
    margin-top:0;
    margin-left: 8vw;
margin-right: 8vw;
margin-bottom: 4vh;
text-align:justify ;
}

.textoSeccion1C{
    margin-top:0;
    margin-left: 8vw;
margin-right: 8vw;
margin-bottom: 0vh;
text-align:justify ;
}

.boxSeccion2Middle{
    width:100%;
}

.boxSeccion2Middle p{
    width: 84%;
font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  margin: auto;
  font-size: 1.1rem;
  line-height: 2.2rem;  
  margin-top: 5vh;
  margin-bottom: 5vh;
  text-align: justify;
  margin-left: 8%;
    margin-right: 8%;
          -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

.boxSeccion3Middle{
    width:100%;
}

.boxSeccion3Middle p{
    width: 84%;
font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  margin: auto;
  font-size: 1.1rem;
  line-height: 2.2rem;  
  margin-top: 5vh;
  margin-bottom: 5vh;
  text-align: justify;
  margin-left: 8%;
    margin-right: 8%;
          -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}


.boxSeccion2LateralTopDer{
    width:0%;
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    justify-content:end;
}

.boxSeccion2LateralBttmIzq{
    width:0%;
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    justify-content: start;
}

#textoSeccion1{
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  margin: auto;
  font-size: 1rem;
  line-height: 2.2rem;
        -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

#fotoPapel1{
    width:98%;
    margin-top: 7vh;
    margin-bottom: 7vh;
    position: relative;
    top: 1px;
}

#fotoPapelIlustracion{
    width:100%;
    margin-top: 10%;
    margin-bottom: 10%;
    position: relative;
    top: 1px;
}

/*Letras Botones*/

.nombreArticuloLeft{
  width: 100%;
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style:normal;
  margin: auto;
  font-size: .8rem;
  line-height: 1.3rem;  
  text-align: left;
  color:white;
  background-color: #03705E;
  opacity: .8;
  padding-left: 1vw;
  padding-right: 1vw;
  padding-top: 0.5vh;
  padding-bottom: 1vh;
}

.categoriaArticuloLeft{
    width: 100%;
    font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: bold;
  margin: auto;
  font-size: .9rem;
  line-height: 1.2rem;  
  text-align: left;
  color:white;
  background-color: #5C00D3;
  opacity: .8;
  padding-left: 1vw;
  padding-right: 1vw;
    padding-top: 0.5vh;
  padding-bottom: 0.5vh;
    mix-blend-mode: multiply;
}

.nombreArticuloRight{
  width: 100%;
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style:normal;
  margin: auto;
  font-size: .8rem;
  line-height: 1.3rem;  
  text-align: right;
  color:white;
  background-color: #03705E;
  opacity: .8;
  padding-left: 1vw;
  padding-right: 1vw;
  padding-top: 0.5vh;
  padding-bottom: 1vh;
}

.categoriaArticuloRight{
    width: 100%;
    font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: bold;
  margin: auto;
  font-size: .9rem;
  line-height: 1.2rem;  
  text-align: right;
  color:white;
  background-color: #5C00D3;
  opacity: .8;
  padding-left: 1vw;
  padding-right: 1vw;
    padding-top: 0.5vh;
  padding-bottom: 0.5vh;
    mix-blend-mode: multiply;
}

#imgPaintHole1{
 float: left; /* Text will wrap on the right side */
  width: 55%; /* Set dimensions for the image */
  height: auto;
  shape-outside: url("img/paintHole1.png"); /* Reference the same image URL */
  shape-image-threshold: 0; /* Pixels > 50% opacity define the shape boundary */
  shape-margin: 4vw; /* Add some space between the text and the image */
}

#imgPeelIzq1{
    display: block;
 float: left; /* Text will wrap on the right side */
  width: 20%; /* Set dimensions for the image */
  height: auto;
  shape-outside: url("img/peelIzq2.png"); /* Reference the same image URL */
  shape-image-threshold: 0; /* Pixels > 50% opacity define the shape boundary */
  shape-margin: 6vw; /* Add some space between the text and the image */
}

#imgPeelDer1{
    display: block;
 float: right; /* Text will wrap on the right side */
  width:25%; /* Set dimensions for the image */
  height: auto;
  shape-outside: url("img/peelDer2.png"); /* Reference the same image URL */
  shape-image-threshold: 0; /* Pixels > 50% opacity define the shape boundary */
  shape-margin: 6vw; /* Add some space between the text and the image */
}

#imgPinta2{
    display: block;
 float: left; /* Text will wrap on the right side */
  width: 35%; /* Set dimensions for the image */
  height: auto;
  shape-outside: url("img/pinta2B.png"); /* Reference the same image URL */
  shape-image-threshold: 0; /* Pixels > 50% opacity define the shape boundary */
  shape-margin: 5vw; /* Add some space between the text and the image */
}

#imgPinta1{
    display: block;
 float: right; /* Text will wrap on the right side */
  width:33%; /* Set dimensions for the image */
  height: auto;
  shape-outside: url("img/pinta1B.png"); /* Reference the same image URL */
  shape-image-threshold: 0; /* Pixels > 50% opacity define the shape boundary */
  shape-margin: 5vw; /* Add some space between the text and the image */
margin-top: 5%;
}

    #logoAvispaPortada{
        width:33%;
    position: relative; 
    top:19%;
    left:1vw;
    }

 .botonMenu {
    display: none;
    position: relative;
            background-color: #5C00D3;
        top: -8%;
}   
   
 .botonMenu p{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    color:white;
    font-size: 1.2rem;
    text-align: center;
    margin:0;
    text-decoration: none;
    padding:5px 15px 3px 15px;
 }

  .botonMenuTableta {
    display: none;
    position: relative;
            background-color: #5C00D3;
        top: -8%;
}   
   
 .botonMenuTableta p{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    color:white;
    font-size: 1.2rem;
    text-align: center;
    margin:0;
    text-decoration: none;
    padding:5px 15px 3px 15px;
 }

 .botonMenuMovil {
    display: block;
    position: relative;
            background-color: #5C00D3;
        top: -8%;
}   
   
 .botonMenuMovil p{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    color:white;
    font-size: 1.1rem;
    text-align: center;
    margin:0;
    text-decoration: none;
    padding:5px 15px 3px 15px;
 }

#portadaIZQ{
width:100vw;
display: flex;
flex-wrap: wrap;
justify-content: left;
padding-left: 8vw;
}

#portadaDER{
width:40vw;
display: none;
align-items: end;
}

}


@media screen and (min-width: 900px){

  
        .slider {
            display: flex;
            width: 100%;
            transition: transform 0.5s ease-in-out;
        }  
/* BOTON 1 */

.botonContenedor1{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    margin-left: 10%;
}

#botonManchaDIV1:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV1{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV1:hover + #botonNombreArticulo1{
    display: block;
}

#botonNombreArticulo1{
    width:60%;
    height: auto;
    margin-left: 2vw;
    display: none;
}



/* */


/* BOTON 2 */

.botonContenedor2{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: end;
    margin-right: 25%;
}

#botonManchaDIV2:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV2{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV2:hover + #botonNombreArticulo2{
    display: block;
}

#botonNombreArticulo2{
    width:60%;
    height: auto;
    margin-right: 8%;
    display: none;
}



/* */


/* BOTON 3 */

.botonContenedor3{
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    margin-left: 15%;
    position: relative;
    top: 18%;
}

#botonManchaDIV3:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV3{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV3:hover + #botonNombreArticulo3{
    display: block;
}

#botonNombreArticulo3{
    width:60%;
    height: auto;
    margin-right: 8%;
    display: none;
}



/* */




/* BOTON 4 */

.botonContenedor4{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: start;
    margin-right: 15%;
}

#botonManchaDIV4:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV4{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV4:hover + #botonNombreArticulo4{
    display: block;
}

#botonNombreArticulo4{
    width:60%;
    height: auto;
    margin-right: 8%;
    display: none;

}

/* */




/* BOTON 5 */

.botonContenedor5{
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    margin-left: 24%;
}

#botonManchaDIV5:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV5{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV5:hover + #botonNombreArticulo5{
    display: block;
}

#botonNombreArticulo5{
    width:60%;
    height: auto;
    margin-left: 2vw;
    display: none;
}

/* */



/* BOTON 6 */

.botonContenedor6{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: start;
    margin-right: -5%;
    margin-top: -7%;
}

#botonManchaDIV6:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV6{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV6:hover + #botonNombreArticulo6{
    display: block;
}

#botonNombreArticulo6{
    width:50%;
    height: auto;
    margin-right: 8%;
    display: none;

}

/* */



/* BOTON 7 */

.botonContenedor7{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    margin-left: 25%;
}


#botonManchaDIV7:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV7{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV7:hover + #botonNombreArticulo7{
    display: block;
}

#botonNombreArticulo7{
    width:55%;
    height: auto;
    margin-left: 2vw;
    display: none;
}

/* */



/* BOTON 8 */

.botonContenedor8{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: center;
    margin-right: 0%;
    margin-top: -7%;
}

#botonManchaDIV8:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV8{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV8:hover + #botonNombreArticulo8{
    display: block;
}

#botonNombreArticulo8{
    width:50%;
    height: auto;
    margin-right: 8%;
    display: none;

}



/* */


/* BOTON 9 */

.botonContenedor9{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    margin-left: 20%;
}


#botonManchaDIV9:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV9{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV9:hover + #botonNombreArticulo9{
    display: block;
}

#botonNombreArticulo9{
    width:60%;
    height: auto;
    margin-left: 2vw;
    display: none;
}



/* */



/* BOTON 10 */

.botonContenedor10{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    margin-left: 32%;
    margin-top: -3%;
}


#botonManchaDIV10:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV10{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV10:hover + #botonNombreArticulo10{
    display: block;
}

#botonNombreArticulo10{
    width:60%;
    height: auto;
    margin-left: 0vw;
    display: none;
}



/* */



/* BOTON 11 */

.botonContenedor11{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: start;
    margin-right: 7%;
    margin-top: -10%;
}

#botonManchaDIV11:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV11{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV11:hover + #botonNombreArticulo11{
    display: block;
}

#botonNombreArticulo11{
    width:50%;
    height: auto;
    margin-right: 8%;
    display: none;

}

/* */



/* BOTON 12 */

.botonContenedor12{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    margin-left: 30%;
    margin-bottom: -3%;
}

#botonManchaDIV12:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV12{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV12:hover + #botonNombreArticulo12{
    display: block;
}

#botonNombreArticulo12{
    width:60%;
    height: auto;
    margin-left: 0vw;
    display: none;
}


/* */
  
    .menuContenedor{
    width:100%;
    position: absolute;
    height:auto;
    z-index: 20;
    top:0;
    bottom:0;
    display:grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 15vh;
    margin-bottom: 15vh;
    grid-auto-rows: 1fr;
}

    
#seccionIlustracionMenuMovil{
    width:100%;
    display: none;
    position: relative;
    flex-wrap: nowrap;
    background-image: url(img/pared3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
}

#seccionIlustracionTableta{
    width:100%;
    display: none;
    position: relative;
    flex-wrap: nowrap;
    background-image: url(img/pared3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
}

#seccionIlustracionMenu{
    width:100%;
    display: flex;
    position: relative;
    flex-wrap: nowrap;
    background-image: url(img/pared3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
}

.creditos{
	width:100%;
	display:flex;
	flex-wrap:wrap;
	  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  margin-top: 35px;
}

.caja_creditos img{
width:50%;	
margin-right: 4vw;
margin-bottom: 40px;
}

.creditos_texto_2{
	width:100%;
            font-family: "Roboto Serif", serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            font-size: 1rem;
            line-height: 2rem;  
		text-align:center;
color:white;
padding-left: 5%;
padding-right: 5%;
margin-bottom: 40px;
      -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

.creditos_texto_2 p{
margin-top:0;
margin-bottom:0;
}

.creditos_texto{
            font-family: "Roboto Serif", serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            font-size: 1.3rem;
            line-height: 1.5rem;  
	color:white;
	margin:auto;
    text-align: center;
    padding-left: 5%;
padding-right: 5%;
      -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

.frase_final p{
	text-align:center;
	color:white;
	font-family:sans-serif;
	font-size:.9rem;
	margin:auto;
	line-height:1.4rem;
    padding-left: 5%;
padding-right: 5%;
}



.caja_logo_footer{
	width:100%;
		display:flex;
	  align-items: center;
  justify-content: center;
  margin-top: 80px;
}

.caja_apoyanos a{
	width:70%;
}

#logoAvispaFooter{
    width:50%;
    height:auto;
}

         .pintaFinal img{
            width:60%;
            height: auto;
         }

        .pintaFinal{
            width:100%;
            padding-top: 10vh;
            padding-bottom: 15vh;
            display: flex;
            justify-content: center;
            height: auto;
         }

        .podcastInfo{

            padding-top: 0rem;
    padding-bottom: 0srem;
            width:40%;
            display: flex;
            justify-content: left;
            align-items: center;
            flex-wrap: wrap;
            padding-left: 4%;
        }

        .podcastImg{
            width:60%;
            display: flex;
            justify-content: right;
            margin-right: 1%;
            padding-top: 10px;
            padding-bottom: 10px;
        }

         .podcastImg img{
            width:90%;
            height:auto;
            mix-blend-mode: multiply;
         }

        .child {
            background-image: url(img/fondoPodcast.png);
            min-width: 90%;
            margin: 0 5%; /* Centra el div de 90% dentro del viewport */
            height: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
            color: white;
            font-size: 2rem;
            border-radius: 10px;
            background-size: 100% 100%;
            padding-top: 0%;
    padding-bottom: 0%;
        }



.textoIntroIlustracion{
    width:70%;
    font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  margin:auto;
  font-weight: 700;
  font-style: normal;
  font-size: 1.7rem;
  line-height: 3rem;  
  margin-top: 5vh;
  padding-bottom: 5vh;
  text-align:center;
}    

#paintholeChiquito{
 float: right; /* Text will wrap on the right side */
  width: 20vw; /* Set dimensions for the image */
  height: auto;
  shape-outside: url("img/paintholeChiquito.png"); /* Reference the same image URL */
  shape-image-threshold: 0; /* Pixels > 50% opacity define the shape boundary */
  shape-margin: 5vw; /* Add some space between the text and the image */
}

#titularPortada{
    display: block;
width:110%;
margin-top: 0vh;
margin-left: -8vw;
}

#titularPortadaCentrado{
    display: none;
width:110%;
margin-top: 0vh;
margin-left: -8vw;
}

    #imgPortada3{
    display: none;
 float: right; /* Text will wrap on the right side */
  width: 35vw; /* Set dimensions for the image */
  height: auto;
  shape-outside: url("img/imgPortada03.png"); /* Reference the same image URL */
  shape-image-threshold: 0; /* Pixels > 50% opacity define the shape boundary */
  shape-margin: 10vw; /* Add some space between the text and the image */
}

#imgPortada2{
    display: block;
 float: right; /* Text will wrap on the right side */
  width: 35vw; /* Set dimensions for the image */
  height: auto;
  shape-outside: url("img/imgPortada02.png"); /* Reference the same image URL */
  shape-image-threshold: 0; /* Pixels > 50% opacity define the shape boundary */
  shape-margin: 10vw; /* Add some space between the text and the image */
}

        .categoriaPodcast{
            font-family: "Bebas Neue", sans-serif;
            font-weight: 400;
            font-style: normal;
            color:#5C00D3;
            font-size: 1.5rem;
            text-align: left;
            margin: 0;
        }

        .tituloPodcast{
            font-family: "Roboto Serif", serif;
            font-optical-sizing: auto;
            margin:auto;
            font-weight: 500;
            font-style: normal;
            font-size: 1.5rem;
            line-height: 2rem;  
            padding-bottom: 2vh;
            text-align:left;
            color:black;
            padding-right: 4%;
        }

        .botonPodcast p{
            font-family: "Bebas Neue", sans-serif;
            font-weight: 400;
            font-style: normal;
            color:white;
            font-size: 1.3rem;
            text-align: center;
            margin:0;
            text-decoration: none;
        }

.boxSeccion2LateralTop{
    width:20%;
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    justify-content:start;
}

.boxSeccion2LateralTop img{
    width:50%;
    display:block;
}

.boxSeccion2LateralBttm{
    width:20%;
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    justify-content: end;
}

.boxSeccion2LateralBttm img{
    width:55%;
    display:block;
}

.credito1{
  width: 87%;
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  font-size: .9rem;
  line-height: 2rem;
  text-align: right;
        -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

.credito2{
  width: 70%;
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  font-size: .9rem;
  line-height: 2rem;
  text-align: center;
  margin: auto;
        -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

.imgWholeWidth2Box{
    width:100%;
    display: flex;
    flex-wrap: nowrap;
    background-image: url(img/cartelesFondo.png);
    background-repeat: no-repeat;
    background-size: 116%;
    background-position: center;
    justify-content: center;
}

.imgWholeWidth2Box img{
    width:90%;
}

.boxSeccion3Middle p{
    width: 100%;
font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  margin: auto;
  font-size: 1.1rem;
  line-height: 2.2rem;  
  margin-top: 5vh;
  margin-bottom: 5vh;
  text-align: justify;
        -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

.textoSeccion1A{
margin-top:0;
margin-left: 12vw;
margin-right: 20vw;
margin-bottom: 4vh;
text-align:justify ;
}

.textoSeccion1B{
    margin-top:0;
    margin-left: 20vw;
margin-right: 20vw;
margin-bottom: 4vh;
text-align:justify ;
}

.textoSeccion1C{
    margin-top:0;
    margin-left: 20vw;
margin-right: 20vw;
margin-bottom: 0vh;
text-align:justify ;
}

.boxSeccion2Middle{
    width:60%;
}

.boxSeccion2Middle p{
    width: 100%;
font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  margin: auto;
  font-size: 1.1rem;
  line-height: 2.2rem;  
  margin-top: 5vh;
  margin-bottom: 5vh;
  text-align: justify;
  margin-left: 0%;
    margin-right: 0%;
          -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

.boxSeccion3Middle{
    width:60%;
}

.boxSeccion2LateralTopDer{
    width:25%;
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    justify-content:end;
}

.boxSeccion2LateralBttmIzq{
    width:25%;
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    justify-content: start;
}

#textoSeccion1{
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  margin: auto;
  font-size: 1rem;
  line-height: 2.2rem;
        -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

#fotoPapel1{
    width:90%;
    margin-top: 10vh;
    margin-bottom: 10vh;
    position: relative;
    top: 1px;
}

#fotoPapelIlustracion{
    width:90%;
    margin-top: 15vh;
    margin-bottom: 15vh;
    position: relative;
    top: 1px;
}

/*Letras Botones*/

.nombreArticuloLeft{
  width: 100%;
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style:normal;
  margin: auto;
  font-size: .8rem;
  line-height: 1.3rem;  
  text-align: left;
  color:white;
  background-color: #03705E;
  opacity: .8;
  padding-left: 1vw;
  padding-right: 1vw;
  padding-top: 0.5vh;
  padding-bottom: 1vh;
}

.categoriaArticuloLeft{
    width: 100%;
    font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: bold;
  margin: auto;
  font-size: .9rem;
  line-height: 1.2rem;  
  text-align: left;
  color:white;
  background-color: #5C00D3;
  opacity: .8;
  padding-left: 1vw;
  padding-right: 1vw;
    padding-top: 0.5vh;
  padding-bottom: 0.5vh;
    mix-blend-mode: multiply;
}

.nombreArticuloRight{
  width: 100%;
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style:normal;
  margin: auto;
  font-size: .8rem;
  line-height: 1.3rem;  
  text-align: right;
  color:white;
  background-color: #03705E;
  opacity: .8;
  padding-left: 1vw;
  padding-right: 1vw;
  padding-top: 0.5vh;
  padding-bottom: 1vh;
}

.categoriaArticuloRight{
    width: 100%;
    font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: bold;
  margin: auto;
  font-size: .9rem;
  line-height: 1.2rem;  
  text-align: right;
  color:white;
  background-color: #5C00D3;
  opacity: .8;
  padding-left: 1vw;
  padding-right: 1vw;
    padding-top: 0.5vh;
  padding-bottom: 0.5vh;
    mix-blend-mode: multiply;
}

#imgPaintHole1{
 float: left; /* Text will wrap on the right side */
  width: 40%; /* Set dimensions for the image */
  height: auto;
  shape-outside: url("img/paintHole1.png"); /* Reference the same image URL */
  shape-image-threshold: 0; /* Pixels > 50% opacity define the shape boundary */
  shape-margin: 6vw; /* Add some space between the text and the image */
}

#imgPeelIzq1{
    display: none;
 }

#imgPeelDer1{
    display: none;
 }

 #imgPinta2{
    display: none;
 }

#imgPinta1{
    display: none;
}

    #logoAvispaPortada{
        width:30%;
    position: relative; 
    top:19%;
    left:0vw;
    }

 .botonMenu {
    display: block;
    position: relative;
            background-color: #5C00D3;
        top: -8%;
}   
   
 .botonMenu p{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    color:white;
    font-size: 1.1rem;
    text-align: center;
    margin:0;
    text-decoration: none;
    padding:5px 15px 3px 15px;
 }

  .botonMenuTableta {
    display: none;
    position: relative;
            background-color: #5C00D3;
        top: -8%;
}   
   
 .botonMenuTableta p{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    color:white;
    font-size: 1.1rem;
    text-align: center;
    margin:0;
    text-decoration: none;
    padding:5px 15px 3px 15px;
 }


  .botonMenuMovil {
    display: none;
    position: relative;
            background-color: #5C00D3;
        top: -8%;
}  

 .botonMenuMovil p{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    color:white;
    font-size: 1.1rem;
    text-align: center;
    margin:0;
    text-decoration: none;
    padding:5px 15px 3px 15px;
 }


#portadaIZQ{
width:60vw;
display: flex;
flex-wrap: wrap;
justify-content: left;
padding-left: 12vw;
}

#portadaDER{
width:40vw;
display: flex;
align-items: end;
}

}


@media screen and (min-width: 1200px){

.caja_apoyanos a{
	width:40%;
}

#logoAvispaFooter{
    width:30%;
    height:auto;
}


.caja_creditos img{
width:30%;	
margin-right: 4vw;
margin-bottom: 40px;
}

        .categoriaPodcast{
            font-family: "Bebas Neue", sans-serif;
            font-weight: 400;
            font-style: normal;
            color:#5C00D3;
            font-size: 1.6rem;
            text-align: left;
            margin: 0;
        }

        .tituloPodcast{
            font-family: "Roboto Serif", serif;
            font-optical-sizing: auto;
            margin:auto;
            font-weight: 600;
            font-style: normal;
            font-size: 2rem;
            line-height: 2.4rem;  
            padding-bottom: 2vh;
            text-align:left;
            color:black;
            padding-right: 4%;
        }

        .botonPodcast p{
            font-family: "Bebas Neue", sans-serif;
            font-weight: 400;
            font-style: normal;
            color:white;
            font-size: 1.4rem;
            text-align: center;
            margin:0;
            text-decoration: none;
        }

.boxSeccion2LateralTop{
    width:20%;
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    justify-content:start;
}

.boxSeccion2LateralTop img{
    width:35%;
}

.boxSeccion2LateralBttm{
    width:20%;
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    justify-content: end;
}

.boxSeccion2LateralBttm img{
    width:45%;
}

.credito1{
  width: 87%;
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  font-size: 1rem;
  line-height: 2rem;
  text-align: right;
        -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

.credito2{
  width: 70%;
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  font-size: 1rem;
  line-height: 2rem;
  text-align: center;
  margin: auto;
        -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

.imgWholeWidth2Box{
    width:100%;
    display: flex;
    flex-wrap: nowrap;
    background-image: url(img/cartelesFondo.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    justify-content: center;
}

.imgWholeWidth2Box img{
    width:70%;
}

.boxSeccion3Middle p{
    width: 100%;
font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  margin: auto;
  font-size: 1.2rem;
  line-height: 2.2rem;  
  margin-top: 5vh;
  margin-bottom: 5vh;
  text-align: justify;
        -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}


.textoSeccion1A{
margin-top:0;
margin-left: 12vw;
margin-right: 20vw;
margin-bottom: 4vh;
text-align:justify ;
}

.textoSeccion1B{
    margin-top:0;
    margin-left: 20vw;
margin-right: 20vw;
margin-bottom: 4vh;
text-align:justify ;
}

.textoSeccion1C{
    margin-top:0;
    margin-left: 20vw;
margin-right: 20vw;
margin-bottom: 0vh;
text-align:justify ;
}

.boxSeccion2Middle{
    width:60%;
}

.boxSeccion2Middle p{
    width: 100%;
font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  margin: auto;
  font-size: 1.2rem;
  line-height: 2.2rem;  
  margin-top: 5vh;
  margin-bottom: 5vh;
  text-align: justify;
        -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

#textoSeccion1{
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  margin: auto;
  font-size: 1.2rem;
  line-height: 2.2rem;
        -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

#fotoPapel1{
    width:80%;
    margin-top: 15vh;
    margin-bottom: 15vh;
    position: relative;
    top: 1px;
}

#fotoPapelIlustracion{
    width:80%;
    margin-top: 15vh;
    margin-bottom: 15vh;
    position: relative;
    top: 1px;
}

/*Letras Botones*/

.nombreArticuloLeft{
  width: 100%;
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style:normal;
  margin: auto;
  font-size: 1.1rem;
  line-height: 1.3rem;  
  text-align: left;
  color:white;
  background-color: #03705E;
  opacity: .8;
  padding-left: 1vw;
  padding-right: 1vw;
  padding-top: 0.5vh;
  padding-bottom: 1vh;
}

.categoriaArticuloLeft{
    width: 100%;
    font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: bold;
  margin: auto;
  font-size: 1.1rem;
  line-height: 2rem;  
  text-align: left;
  color:white;
  background-color: #5C00D3;
  opacity: .8;
  padding-left: 1vw;
  padding-right: 1vw;
    padding-top: 0vh;
  padding-bottom: 0vh;
    mix-blend-mode: multiply;
}

.nombreArticuloRight{
  width: 100%;
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style:normal;
  margin: auto;
  font-size: 1.1rem;
  line-height: 1.3rem;  
  text-align: right;
  color:white;
  background-color: #03705E;
  opacity: .8;
  padding-left: 1vw;
  padding-right: 1vw;
  padding-top: 0.5vh;
  padding-bottom: 1vh;
    }

    .categoriaArticuloRight{
    width: 100%;
    font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: bold;
  margin: auto;
  font-size: 1.1rem;
  line-height: 2rem;  
  text-align: right;
  color:white;
  background-color: #5C00D3;
  opacity: .8;
  padding-left: 1vw;
  padding-right: 1vw;
      padding-top: 0vh;
  padding-bottom: 0vh;
    mix-blend-mode: multiply;
    }

        /* */
    
    #imgPaintHole1{
 float: left; /* Text will wrap on the right side */
  width: 30%; /* Set dimensions for the image */
  height: auto;
  shape-outside: url("img/paintHole1.png"); /* Reference the same image URL */
  shape-image-threshold: 0; /* Pixels > 50% opacity define the shape boundary */
  shape-margin: 8vw; /* Add some space between the text and the image */
    }
    
    .botonMenu {
    position: relative;
            background-color: #5C00D3;
        top: -10%;
    }

         .botonMenu p{
            font-family: "Bebas Neue", sans-serif;
            font-weight: 400;
            font-style: normal;
            color:white;
            font-size: 1.5rem;
            text-align: center;
            margin:0;
            text-decoration: none;
            padding:5px 15px 3px 15px;
         }

    #logoAvispaPortada{
        width:25%;
    position: relative; 
    top:20%;
    left:0vw;
    }

     .botonMenu {
    position: relative;
            background-color: #5C00D3;
        top: -8%;
}   
   
 .botonMenu p{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    color:white;
    font-size: 1.3rem;
    text-align: center;
    margin:0;
    text-decoration: none;
    padding:5px 15px 3px 15px;
 }

}


@media screen and (min-width: 700px) and (pointer: coarse) {
    

        .slider {
            display: flex;
            width: 94%;
            transition: transform 0.5s ease-in-out;
        }
/* BOTON 1 */

.botonContenedor1{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    margin-left: 5%;
}

#botonManchaDIV1:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV1{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV1:hover + #botonNombreArticulo1{
    display: block;
}

#botonNombreArticulo1{
    width:60%;
    height: auto;
    margin-left: 2vw;
    display: none;
}



/* */


/* BOTON 2 */

.botonContenedor2{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: end;
    margin-right: 25%;
}

#botonManchaDIV2:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV2{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV2:hover + #botonNombreArticulo2{
    display: block;
}

#botonNombreArticulo2{
    width:60%;
    height: auto;
    margin-right: 8%;
    display: none;
}



/* */


/* BOTON 3 */

.botonContenedor3{
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    margin-left: 18%;
    position: relative;
    top: 8%;
}

#botonManchaDIV3:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV3{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV3:hover + #botonNombreArticulo3{
    display: block;
}

#botonNombreArticulo3{
    width:60%;
    height: auto;
    margin-right: 8%;
    display: none;
}



/* */




/* BOTON 4 */

.botonContenedor4{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: start;
    margin-right: 15%;
}

#botonManchaDIV4:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV4{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV4:hover + #botonNombreArticulo4{
    display: block;
}

#botonNombreArticulo4{
    width:60%;
    height: auto;
    margin-right: 8%;
    display: none;

}

/* */




/* BOTON 5 */

.botonContenedor5{
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    margin-left: 24%;
}

#botonManchaDIV5:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV5{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV5:hover + #botonNombreArticulo5{
    display: block;
}

#botonNombreArticulo5{
    width:60%;
    height: auto;
    margin-left: 2vw;
    display: none;
}

/* */



/* BOTON 6 */

.botonContenedor6{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: start;
    margin-right: -14%;
    margin-top: -7%;
}

#botonManchaDIV6:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV6{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV6:hover + #botonNombreArticulo6{
    display: block;
}

#botonNombreArticulo6{
    width:50%;
    height: auto;
    margin-right: 8%;
    display: none;

}

/* */



/* BOTON 7 */

.botonContenedor7{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    margin-left: 25%;
}


#botonManchaDIV7:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV7{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV7:hover + #botonNombreArticulo7{
    display: block;
}

#botonNombreArticulo7{
    width:55%;
    height: auto;
    margin-left: 2vw;
    display: none;
}

/* */



/* BOTON 8 */

.botonContenedor8{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: center;
    margin-right: 0%;
    margin-top: -7%;
}

#botonManchaDIV8:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV8{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV8:hover + #botonNombreArticulo8{
    display: block;
}

#botonNombreArticulo8{
    width:50%;
    height: auto;
    margin-right: 8%;
    display: none;

}



/* */


/* BOTON 9 */

.botonContenedor9{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    margin-left: 20%;
}


#botonManchaDIV9:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV9{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV9:hover + #botonNombreArticulo9{
    display: block;
}

#botonNombreArticulo9{
    width:60%;
    height: auto;
    margin-left: 2vw;
    display: none;
}



/* */



/* BOTON 10 */

.botonContenedor10{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    margin-left: 32%;
    margin-top: -3%;
}


#botonManchaDIV10:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV10{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV10:hover + #botonNombreArticulo10{
    display: block;
}

#botonNombreArticulo10{
    width:60%;
    height: auto;
    margin-left: 0vw;
    display: none;
}



/* */



/* BOTON 11 */

.botonContenedor11{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: start;
    margin-right: 4%;
    margin-top: -4%;
}

#botonManchaDIV11:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV11{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV11:hover + #botonNombreArticulo11{
    display: block;
}

#botonNombreArticulo11{
    width:50%;
    height: auto;
    margin-right: 8%;
    display: none;

}

/* */



/* BOTON 12 */

.botonContenedor12{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    margin-left: 30%;
    margin-bottom: -3%;
}

#botonManchaDIV12:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV12{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV12:hover + #botonNombreArticulo12{
    display: block;
}

#botonNombreArticulo12{
    width:60%;
    height: auto;
    margin-left: 0vw;
    display: none;
}


/* */

.menuContenedor{
    width:100%;
    position: absolute;
    height:auto;
    z-index: 20;
    top:0;
    bottom:0;
    display:grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 14vh;
    margin-bottom: 13vh;
    grid-auto-rows: 1fr;
}


        /*BOTONES MOVILES Y TABLETA*/

#botonManchaDIVM{
    fill:#5C00D3;
    opacity: .8;
    width:20%;

}

#botonManchaDIV5M{
    fill:#5C00D3;
    opacity: .8;
    width:25%;
}

#botonManchaDIV7M{
    fill:#5C00D3;
    opacity: .8;
    width:25%;
}

#botonManchaDIV9M{
    fill:#5C00D3;
    opacity: .8;
    width:25%;
}

#botonManchaDIV10M{
    fill:#5C00D3;
    opacity: .8;
    width:25%;
}

#botonManchaDIV12M{
    fill:#5C00D3;
    opacity: .8;
    width:25%;
}

    /* FIN BOTONES MOVILES Y TABLETA */


/* BOTONES MÓVILES */

.botonContenedor1M{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
position: relative;
  top: 22%;
}

.botonContenedor2M{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: end;
position: relative;
  right: 41%;
  top: 35%;
}

.botonContenedor3M{
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    position: relative;
    width:80%;
  top: 10%;
  left: 20%;
}

.botonContenedor4M{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: start;
position: relative;
  right: 22%;
  top:23%;
}

.botonContenedor5M{
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
position: relative;
width:67%;
  left: 33%;
  top: 25%;
}

.botonContenedor6M{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: start;
position: relative;
  right: -19%;
  top: -1%;
}

.botonContenedor7M{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
position: relative;
  left: 45%;
  top: 57%;
  width:55%;
}

.botonContenedor8M{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: center;
    position: relative;
    top: 18%;
}

.botonContenedor9M{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    position:relative;
    left: 27%;
    top:66%;
    width:73%;
}

.botonContenedor10M{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
position: relative;
width: 50%;
  left: 50%;
  top: 77%;
}

.botonContenedor11M{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: start;
position: relative;
  right: 15%;
  top: 0%;
}

.botonContenedor12M{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
position: relative;
  top: 97%;
  left: 21%;
  width:79%;
}

/* */


    #seccionIlustracionMenuMovil{
    width:100%;
    display: none;
    position: relative;
    flex-wrap: nowrap;
    background-image: url(img/pared3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
}

#seccionIlustracionMenuTableta{
    width:100%;
    display: flex;
    position: relative;
    flex-wrap: nowrap;
    background-image: url(img/pared3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
}

#seccionIlustracionMenu{
    width:100%;
    display: none;
    position: relative;
    flex-wrap: nowrap;
    background-image: url(img/pared3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
}

            /* Contenedor del contenido flotante */
        .modal-content {
            background: white;
                background-image: url("img/fondoNotas.jpg");
    background-repeat: repeat;
            padding: 40px 30px;
            max-width: 400px;
            width: 85%;
            text-align: center;
            position: relative;
            animation: fadeIn 0.4s ease-out;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
        }

        .contenedorImagenNota{
            width:100%;
            height:auto;
            overflow: hidden;
            margin-bottom: 20px;
        }

        .contenedorImagenNota img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.creditos{
	width:100%;
	display:flex;
	flex-wrap:wrap;
	  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  margin-top: 35px;
}

.caja_creditos img{
width:50%;	
margin-right: 4vw;
margin-bottom: 40px;
}

.creditos_texto_2{
	width:100%;
            font-family: "Roboto Serif", serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            font-size: 1rem;
            line-height: 2rem;  
		text-align:center;
color:white;
padding-left: 5%;
padding-right: 5%;
margin-bottom: 40px;
      -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

.creditos_texto_2 p{
margin-top:0;
margin-bottom:0;
}

.creditos_texto{
            font-family: "Roboto Serif", serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            font-size: 1.3rem;
            line-height: 1.5rem;  
	color:white;
	margin:auto;
    text-align: center;
    padding-left: 5%;
padding-right: 5%;
      -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

.frase_final p{
	text-align:center;
	color:white;
	font-family:sans-serif;
	font-size:.9rem;
	margin:auto;
	line-height:1.4rem;
    padding-left: 5%;
padding-right: 5%;
}



.caja_logo_footer{
	width:100%;
		display:flex;
	  align-items: center;
  justify-content: center;
  margin-top: 80px;
}

.caja_apoyanos a{
	width:70%;
}

#logoAvispaFooter{
    width:50%;
    height:auto;
}

         .pintaFinal{
            width:100%;
            padding-top: 5rem;
            padding-bottom: 5rem;
            display: flex;
            justify-content: center;
            height: auto;
         }

         .pintaFinal img{
            width:60%;
            height: auto;
         }

        .podcastInfo{
            padding-top: 2rem;
    padding-bottom: 2rem;
            width:40%;
            display: flex;
            justify-content: left;
            align-items: center;
            flex-wrap: wrap;
            padding-left: 4%;
        }

        .podcastImg{
            width:60%;
            display: flex;
            justify-content: right;
            margin-right: 1%;
            padding-top: 10px;
            padding-bottom: 10px;
        }

         .podcastImg img{
            width:90%;
            height:auto;
            mix-blend-mode: multiply;
         }

        .child {
            background-image: url(img/fondoPodcast.png);
            min-width: 90%;
            margin: 0 5%; /* Centra el div de 90% dentro del viewport */
            height: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
            color: white;
            font-size: 2rem;
            border-radius: 10px;
            background-size: 100% 100%;
            padding-top: 0%;
    padding-bottom: 0%;
        }



.textoIntroIlustracion{
    width:70%;
    font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  margin:auto;
  font-weight: 700;
  font-style: normal;
  font-size: 1.7rem;
  line-height: 2.5rem;  
  margin-top: 5vh;
  padding-bottom: 5vh;
  text-align:center;
}    

#paintholeChiquito{
 float: right; /* Text will wrap on the right side */
  width: 20vw; /* Set dimensions for the image */
  height: auto;
  shape-outside: url("img/paintholeChiquito.png"); /* Reference the same image URL */
  shape-image-threshold: 0; /* Pixels > 50% opacity define the shape boundary */
  shape-margin: 5vw; /* Add some space between the text and the image */
}

#titularPortada{
    display: block;
width:110%;
margin-top: 0vh;
margin-left: -8vw;
}

#titularPortadaCentrado{
    display: none;
width:110%;
margin-top: 0vh;
margin-left: -8vw;
}

    #imgPortada3{
    display: none;
 float: right; /* Text will wrap on the right side */
  width: 35vw; /* Set dimensions for the image */
  height: auto;
  shape-outside: url("img/imgPortada03.png"); /* Reference the same image URL */
  shape-image-threshold: 0; /* Pixels > 50% opacity define the shape boundary */
  shape-margin: 10vw; /* Add some space between the text and the image */
}

#imgPortada2{
    display: block;
 float: right; /* Text will wrap on the right side */
  width: 35vw; /* Set dimensions for the image */
  height: auto;
  shape-outside: url("img/imgPortada02.png"); /* Reference the same image URL */
  shape-image-threshold: 0; /* Pixels > 50% opacity define the shape boundary */
  shape-margin: 10vw; /* Add some space between the text and the image */
}

        .categoriaPodcast{
            font-family: "Bebas Neue", sans-serif;
            font-weight: 400;
            font-style: normal;
            color:#5C00D3;
            font-size: 1.5rem;
            text-align: left;
            margin: 0;
        }

        .tituloPodcast{
            font-family: "Roboto Serif", serif;
            font-optical-sizing: auto;
            margin:auto;
            font-weight: 500;
            font-style: normal;
            font-size: 1.4rem;
            line-height: 1.6rem;  
            padding-bottom: .8rem;
            text-align:left;
            color:black;
            padding-right: 4%;
        }

        .botonPodcast p{
            font-family: "Bebas Neue", sans-serif;
            font-weight: 400;
            font-style: normal;
            color:white;
            font-size: 1.2rem;
            text-align: center;
            margin:0;
            text-decoration: none;
        }

.boxSeccion2LateralTop{
    width:20%;
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    justify-content:start;
}

.boxSeccion2LateralTop img{
    width:50%;
    display:block;
}

.boxSeccion2LateralBttm{
    width:20%;
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    justify-content: end;
}

.boxSeccion2LateralBttm img{
    width:55%;
    display:block;
}

.credito1{
  width: 87%;
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  font-size: .9rem;
  line-height: 2rem;
  text-align: right;
        -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

.credito2{
  width: 70%;
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  font-size: .9rem;
  line-height: 2rem;
  text-align: center;
  margin: auto;
        -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

.imgWholeWidth2Box{
    width:100%;
    display: flex;
    flex-wrap: nowrap;
    background-image: url(img/cartelesFondo.png);
    background-repeat: no-repeat;
    background-size: 116%;
    background-position: center;
    justify-content: center;
}

.imgWholeWidth2Box img{
    width:90%;
}

.boxSeccion3Middle p{
    width: 100%;
font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  margin: auto;
  font-size: 1.05rem;
  line-height: 2.2rem;  
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: justify;
        -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

.textoSeccion1A{
margin-top:0;
margin-left: 20vw;
margin-right: 20vw;
margin-bottom: 2rem;
text-align:justify ;
}

.textoSeccion1B{
    margin-top:0;
    margin-left: 20vw;
margin-right: 20vw;
margin-bottom: 2rem;
text-align:justify ;
}

.textoSeccion1C{
    margin-top:0;
    margin-left: 20vw;
margin-right: 20vw;
margin-bottom: 0vh;
text-align:justify ;
}

.boxSeccion2Middle{
    width:60%;
}

.boxSeccion2Middle p{
    width: 100%;
font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  margin: auto;
  font-size: 1.05rem;
  line-height: 2.2rem;  
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: justify;
  margin-left: 0%;
    margin-right: 0%;
          -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

.boxSeccion3Middle{
    width:60%;
}

.boxSeccion2LateralTopDer{
    width:25%;
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    justify-content:end;
}

.boxSeccion2LateralBttmIzq{
    width:25%;
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    justify-content: start;
}

#textoSeccion1{
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  margin: auto;
  font-size: 1.05rem;
  line-height: 2.2rem;
        -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

#fotoPapel1{
    width:90%;
    margin-top: 10vh;
    margin-bottom: 10vh;
    position: relative;
    top: 1px;
}

#fotoPapelIlustracion{
    width:90%;
    margin-top: 11vh;
    margin-bottom: 10vh;
    position: relative;
    top: 1px;
}

/*Letras Botones*/

.nombreArticuloLeft{
  width: 100%;
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style:normal;
  margin: auto;
  font-size: .8rem;
  line-height: 1.3rem;  
  text-align: left;
  color:white;
  background-color: #03705E;
  opacity: .8;
  padding-left: 1vw;
  padding-right: 1vw;
  padding-top: 0.5vh;
  padding-bottom: 1vh;
}

.categoriaArticuloLeft{
    width: 100%;
    font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: bold;
  margin: auto;
  font-size: .9rem;
  line-height: 1.2rem;  
  text-align: left;
  color:white;
  background-color: #5C00D3;
  opacity: .8;
  padding-left: 1vw;
  padding-right: 1vw;
    padding-top: 0.5vh;
  padding-bottom: 0.5vh;
    mix-blend-mode: multiply;
}

.nombreArticuloRight{
  width: 100%;
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style:normal;
  margin: auto;
  font-size: .8rem;
  line-height: 1.3rem;  
  text-align: right;
  color:white;
  background-color: #03705E;
  opacity: .8;
  padding-left: 1vw;
  padding-right: 1vw;
  padding-top: 0.5vh;
  padding-bottom: 1vh;
}

.categoriaArticuloRight{
    width: 100%;
    font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: bold;
  margin: auto;
  font-size: .9rem;
  line-height: 1.2rem;  
  text-align: right;
  color:white;
  background-color: #5C00D3;
  opacity: .8;
  padding-left: 1vw;
  padding-right: 1vw;
    padding-top: 0.5vh;
  padding-bottom: 0.5vh;
    mix-blend-mode: multiply;
}

#imgPaintHole1{
 float: left; /* Text will wrap on the right side */
  width: 40%; /* Set dimensions for the image */
  height: auto;
  shape-outside: url("img/paintHole1.png"); /* Reference the same image URL */
  shape-image-threshold: 0; /* Pixels > 50% opacity define the shape boundary */
  shape-margin: 6vw; /* Add some space between the text and the image */
}

#imgPeelIzq1{
    display: none;
 }

#imgPeelDer1{
    display: none;
 }

 #imgPinta2{
    display: none;
 }

#imgPinta1{
    display: none;
}

    #logoAvispaPortada{
        width:30%;
    position: relative; 
    top:19%;
    left:0vw;
    }

 .botonMenu {
    display: none;
    position: relative;
            background-color: #5C00D3;
        top: -8%;
}   
   
 .botonMenu p{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    color:white;
    font-size: 1.1rem;
    text-align: center;
    margin:0;
    text-decoration: none;
    padding:5px 15px 3px 15px;
 }

  .botonMenuTableta {
    display: block;
    position: relative;
            background-color: #5C00D3;
        top: -8%;
}   
   
 .botonMenuTableta p{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    color:white;
    font-size: 1.1rem;
    text-align: center;
    margin:0;
    text-decoration: none;
    padding:5px 15px 3px 15px;
 }

  .botonMenuMovil {
    display: none;
    position: relative;
            background-color: #5C00D3;
        top: -8%;
}  

 .botonMenuMovil p{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    color:white;
    font-size: 1.1rem;
    text-align: center;
    margin:0;
    text-decoration: none;
    padding:5px 15px 3px 15px;
 }


#portadaIZQ{
width:60vw;
display: flex;
flex-wrap: wrap;
justify-content: left;
padding-left: 12vw;
}

#portadaDER{
width:40vw;
display: flex;
align-items: end;
}

}


@media screen and (min-width: 650px) and (pointer: coarse) and (orientation: landscape) {
    

        .slider {
            display: flex;
            width: 94%;
            transition: transform 0.5s ease-in-out;
        }
/* BOTON 1 */

.botonContenedor1{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    margin-left: 5%;
}

#botonManchaDIV1:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV1{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV1:hover + #botonNombreArticulo1{
    display: block;
}

#botonNombreArticulo1{
    width:60%;
    height: auto;
    margin-left: 2vw;
    display: none;
}



/* */


/* BOTON 2 */

.botonContenedor2{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: end;
    margin-right: 25%;
}

#botonManchaDIV2:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV2{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV2:hover + #botonNombreArticulo2{
    display: block;
}

#botonNombreArticulo2{
    width:60%;
    height: auto;
    margin-right: 8%;
    display: none;
}



/* */


/* BOTON 3 */

.botonContenedor3{
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    margin-left: 18%;
    position: relative;
    top: 8%;
}

#botonManchaDIV3:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV3{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV3:hover + #botonNombreArticulo3{
    display: block;
}

#botonNombreArticulo3{
    width:60%;
    height: auto;
    margin-right: 8%;
    display: none;
}



/* */




/* BOTON 4 */

.botonContenedor4{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: start;
    margin-right: 15%;
}

#botonManchaDIV4:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV4{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV4:hover + #botonNombreArticulo4{
    display: block;
}

#botonNombreArticulo4{
    width:60%;
    height: auto;
    margin-right: 8%;
    display: none;

}

/* */




/* BOTON 5 */

.botonContenedor5{
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    margin-left: 24%;
}

#botonManchaDIV5:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV5{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV5:hover + #botonNombreArticulo5{
    display: block;
}

#botonNombreArticulo5{
    width:60%;
    height: auto;
    margin-left: 2vw;
    display: none;
}

/* */



/* BOTON 6 */

.botonContenedor6{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: start;
    margin-right: -14%;
    margin-top: -7%;
}

#botonManchaDIV6:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV6{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV6:hover + #botonNombreArticulo6{
    display: block;
}

#botonNombreArticulo6{
    width:50%;
    height: auto;
    margin-right: 8%;
    display: none;

}

/* */



/* BOTON 7 */

.botonContenedor7{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    margin-left: 25%;
}


#botonManchaDIV7:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV7{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV7:hover + #botonNombreArticulo7{
    display: block;
}

#botonNombreArticulo7{
    width:55%;
    height: auto;
    margin-left: 2vw;
    display: none;
}

/* */



/* BOTON 8 */

.botonContenedor8{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: center;
    margin-right: 0%;
    margin-top: -7%;
}

#botonManchaDIV8:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV8{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV8:hover + #botonNombreArticulo8{
    display: block;
}

#botonNombreArticulo8{
    width:50%;
    height: auto;
    margin-right: 8%;
    display: none;

}



/* */


/* BOTON 9 */

.botonContenedor9{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    margin-left: 20%;
}


#botonManchaDIV9:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV9{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV9:hover + #botonNombreArticulo9{
    display: block;
}

#botonNombreArticulo9{
    width:60%;
    height: auto;
    margin-left: 2vw;
    display: none;
}



/* */



/* BOTON 10 */

.botonContenedor10{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    margin-left: 32%;
    margin-top: -3%;
}


#botonManchaDIV10:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV10{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV10:hover + #botonNombreArticulo10{
    display: block;
}

#botonNombreArticulo10{
    width:60%;
    height: auto;
    margin-left: 0vw;
    display: none;
}



/* */



/* BOTON 11 */

.botonContenedor11{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: start;
    margin-right: 4%;
    margin-top: -4%;
}

#botonManchaDIV11:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV11{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV11:hover + #botonNombreArticulo11{
    display: block;
}

#botonNombreArticulo11{
    width:50%;
    height: auto;
    margin-right: 8%;
    display: none;

}

/* */



/* BOTON 12 */

.botonContenedor12{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    margin-left: 30%;
    margin-bottom: -3%;
}

#botonManchaDIV12:hover {
    fill:#d300a2;
    opacity: .8;
} 

#botonManchaDIV12{
    fill:#5C00D3;
    opacity: .8;
}

#botonManchaDIV12:hover + #botonNombreArticulo12{
    display: block;
}

#botonNombreArticulo12{
    width:60%;
    height: auto;
    margin-left: 0vw;
    display: none;
}


/* */

.menuContenedor{
    width:100%;
    position: absolute;
    height:auto;
    z-index: 20;
    top:0;
    bottom:0;
    display:grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 14vh;
    margin-bottom: 13vh;
    grid-auto-rows: 1fr;
}


        /*BOTONES MOVILES Y TABLETA*/

#botonManchaDIVM{
    fill:#5C00D3;
    opacity: .8;
    width:20%;

}

#botonManchaDIV5M{
    fill:#5C00D3;
    opacity: .8;
    width:25%;
}

#botonManchaDIV7M{
    fill:#5C00D3;
    opacity: .8;
    width:25%;
}

#botonManchaDIV9M{
    fill:#5C00D3;
    opacity: .8;
    width:25%;
}

#botonManchaDIV10M{
    fill:#5C00D3;
    opacity: .8;
    width:25%;
}

#botonManchaDIV12M{
    fill:#5C00D3;
    opacity: .8;
    width:25%;
}

    /* FIN BOTONES MOVILES Y TABLETA */


/* BOTONES MÓVILES */

.botonContenedor1M{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
position: relative;
  top: 22%;
}

.botonContenedor2M{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: end;
position: relative;
  right: 41%;
  top: 35%;
}

.botonContenedor3M{
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    position: relative;
    width:80%;
  top: 10%;
  left: 20%;
}

.botonContenedor4M{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: start;
position: relative;
  right: 22%;
  top:23%;
}

.botonContenedor5M{
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
position: relative;
width:67%;
  left: 33%;
  top: 25%;
}

.botonContenedor6M{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: start;
position: relative;
  right: -19%;
  top: -1%;
}

.botonContenedor7M{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
position: relative;
  left: 45%;
  top: 57%;
  width:55%;
}

.botonContenedor8M{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: center;
    position: relative;
    top: 18%;
}

.botonContenedor9M{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    position:relative;
    left: 27%;
    top:66%;
    width:73%;
}

.botonContenedor10M{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
position: relative;
width: 50%;
  left: 50%;
  top: 77%;
}

.botonContenedor11M{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: start;
position: relative;
  right: 15%;
  top: 0%;
}

.botonContenedor12M{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
position: relative;
  top: 97%;
  left: 21%;
  width:79%;
}

/* */


    #seccionIlustracionMenuMovil{
    width:100%;
    display: none;
    position: relative;
    flex-wrap: nowrap;
    background-image: url(img/pared3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
}

#seccionIlustracionMenuTableta{
    width:100%;
    display: flex;
    position: relative;
    flex-wrap: nowrap;
    background-image: url(img/pared3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
}

#seccionIlustracionMenu{
    width:100%;
    display: none;
    position: relative;
    flex-wrap: nowrap;
    background-image: url(img/pared3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
}

            /* Contenedor del contenido flotante */
        .modal-content {
            background: white;
                background-image: url("img/fondoNotas.jpg");
    background-repeat: repeat;
            padding: 40px 30px;
            max-width: 400px;
            width: 85%;
            text-align: center;
            position: relative;
            animation: fadeIn 0.4s ease-out;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
        }

        .contenedorImagenNota{
            width:100%;
            height:auto;
            overflow: hidden;
            margin-bottom: 20px;
        }

        .contenedorImagenNota img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.creditos{
	width:100%;
	display:flex;
	flex-wrap:wrap;
	  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  margin-top: 35px;
}

.caja_creditos img{
width:50%;	
margin-right: 4vw;
margin-bottom: 40px;
}

.creditos_texto_2{
	width:100%;
            font-family: "Roboto Serif", serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            font-size: 1rem;
            line-height: 2rem;  
		text-align:center;
color:white;
padding-left: 5%;
padding-right: 5%;
margin-bottom: 40px;
      -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

.creditos_texto_2 p{
margin-top:0;
margin-bottom:0;
}

.creditos_texto{
            font-family: "Roboto Serif", serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            font-size: 1.3rem;
            line-height: 1.5rem;  
	color:white;
	margin:auto;
    text-align: center;
    padding-left: 5%;
padding-right: 5%;
      -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

.frase_final p{
	text-align:center;
	color:white;
	font-family:sans-serif;
	font-size:.9rem;
	margin:auto;
	line-height:1.4rem;
    padding-left: 5%;
padding-right: 5%;
}



.caja_logo_footer{
	width:100%;
		display:flex;
	  align-items: center;
  justify-content: center;
  margin-top: 80px;
}

.caja_apoyanos a{
	width:70%;
}

#logoAvispaFooter{
    width:50%;
    height:auto;
}

         .pintaFinal{
            width:100%;
            padding-top: 5rem;
            padding-bottom: 5rem;
            display: flex;
            justify-content: center;
            height: auto;
         }

         .pintaFinal img{
            width:60%;
            height: auto;
         }

        .podcastInfo{
            padding-top: 2rem;
    padding-bottom: 2rem;
            width:40%;
            display: flex;
            justify-content: left;
            align-items: center;
            flex-wrap: wrap;
            padding-left: 4%;
        }

        .podcastImg{
            width:60%;
            display: flex;
            justify-content: right;
            margin-right: 1%;
            padding-top: 10px;
            padding-bottom: 10px;
        }

         .podcastImg img{
            width:90%;
            height:auto;
            mix-blend-mode: multiply;
         }

        .child {
            background-image: url(img/fondoPodcast.png);
            min-width: 90%;
            margin: 0 5%; /* Centra el div de 90% dentro del viewport */
            height: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
            color: white;
            font-size: 2rem;
            border-radius: 10px;
            background-size: 100% 100%;
            padding-top: 0%;
    padding-bottom: 0%;
        }



.textoIntroIlustracion{
    width:70%;
    font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  margin:auto;
  font-weight: 700;
  font-style: normal;
  font-size: 1.7rem;
  line-height: 2.5rem;  
  margin-top: 5vh;
  padding-bottom: 5vh;
  text-align:center;
}    

#paintholeChiquito{
 float: right; /* Text will wrap on the right side */
  width: 20vw; /* Set dimensions for the image */
  height: auto;
  shape-outside: url("img/paintholeChiquito.png"); /* Reference the same image URL */
  shape-image-threshold: 0; /* Pixels > 50% opacity define the shape boundary */
  shape-margin: 5vw; /* Add some space between the text and the image */
}

#titularPortada{
    display: block;
width:110%;
margin-top: 0vh;
margin-left: -8vw;
}

#titularPortadaCentrado{
    display: none;
width:110%;
margin-top: 0vh;
margin-left: -8vw;
}

    #imgPortada3{
    display: none;
 float: right; /* Text will wrap on the right side */
  width: 35vw; /* Set dimensions for the image */
  height: auto;
  shape-outside: url("img/imgPortada03.png"); /* Reference the same image URL */
  shape-image-threshold: 0; /* Pixels > 50% opacity define the shape boundary */
  shape-margin: 10vw; /* Add some space between the text and the image */
}

#imgPortada2{
    display: block;
 float: right; /* Text will wrap on the right side */
  width: 35vw; /* Set dimensions for the image */
  height: auto;
  shape-outside: url("img/imgPortada02.png"); /* Reference the same image URL */
  shape-image-threshold: 0; /* Pixels > 50% opacity define the shape boundary */
  shape-margin: 10vw; /* Add some space between the text and the image */
}

        .categoriaPodcast{
            font-family: "Bebas Neue", sans-serif;
            font-weight: 400;
            font-style: normal;
            color:#5C00D3;
            font-size: 1.5rem;
            text-align: left;
            margin: 0;
        }

        .tituloPodcast{
            font-family: "Roboto Serif", serif;
            font-optical-sizing: auto;
            margin:auto;
            font-weight: 500;
            font-style: normal;
            font-size: 1.4rem;
            line-height: 1.6rem;  
            padding-bottom: .8rem;
            text-align:left;
            color:black;
            padding-right: 4%;
        }

        .botonPodcast p{
            font-family: "Bebas Neue", sans-serif;
            font-weight: 400;
            font-style: normal;
            color:white;
            font-size: 1.2rem;
            text-align: center;
            margin:0;
            text-decoration: none;
        }

.boxSeccion2LateralTop{
    width:20%;
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    justify-content:start;
}

.boxSeccion2LateralTop img{
    width:50%;
    display:block;
}

.boxSeccion2LateralBttm{
    width:20%;
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    justify-content: end;
}

.boxSeccion2LateralBttm img{
    width:55%;
    display:block;
}

.credito1{
  width: 87%;
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  font-size: .9rem;
  line-height: 2rem;
  text-align: right;
        -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

.credito2{
  width: 70%;
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  font-size: .9rem;
  line-height: 2rem;
  text-align: center;
  margin: auto;
        -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

.imgWholeWidth2Box{
    width:100%;
    display: flex;
    flex-wrap: nowrap;
    background-image: url(img/cartelesFondo.png);
    background-repeat: no-repeat;
    background-size: 116%;
    background-position: center;
    justify-content: center;
}

.imgWholeWidth2Box img{
    width:90%;
}

.boxSeccion3Middle p{
    width: 100%;
font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  margin: auto;
  font-size: 1.05rem;
  line-height: 2.2rem;  
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: justify;
        -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

.textoSeccion1A{
margin-top:0;
margin-left: 20vw;
margin-right: 20vw;
margin-bottom: 2rem;
text-align:justify ;
}

.textoSeccion1B{
    margin-top:0;
    margin-left: 20vw;
margin-right: 20vw;
margin-bottom: 2rem;
text-align:justify ;
}

.textoSeccion1C{
    margin-top:0;
    margin-left: 20vw;
margin-right: 20vw;
margin-bottom: 0vh;
text-align:justify ;
}

.boxSeccion2Middle{
    width:60%;
}

.boxSeccion2Middle p{
    width: 100%;
font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  margin: auto;
  font-size: 1.05rem;
  line-height: 2.2rem;  
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: justify;
  margin-left: 0%;
    margin-right: 0%;
          -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

.boxSeccion3Middle{
    width:60%;
}

.boxSeccion2LateralTopDer{
    width:25%;
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    justify-content:end;
}

.boxSeccion2LateralBttmIzq{
    width:25%;
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    justify-content: start;
}

#textoSeccion1{
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  margin: auto;
  font-size: 1.05rem;
  line-height: 2.2rem;
        -webkit-hyphens: auto;
    -ms-hyphens: auto;    
    hyphens: auto;  
}

#fotoPapel1{
    width:90%;
    margin-top: 10vh;
    margin-bottom: 10vh;
    position: relative;
    top: 1px;
}

#fotoPapelIlustracion{
    width:90%;
    margin-top: 11vh;
    margin-bottom: 10vh;
    position: relative;
    top: 1px;
}

/*Letras Botones*/

.nombreArticuloLeft{
  width: 100%;
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style:normal;
  margin: auto;
  font-size: .8rem;
  line-height: 1.3rem;  
  text-align: left;
  color:white;
  background-color: #03705E;
  opacity: .8;
  padding-left: 1vw;
  padding-right: 1vw;
  padding-top: 0.5vh;
  padding-bottom: 1vh;
}

.categoriaArticuloLeft{
    width: 100%;
    font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: bold;
  margin: auto;
  font-size: .9rem;
  line-height: 1.2rem;  
  text-align: left;
  color:white;
  background-color: #5C00D3;
  opacity: .8;
  padding-left: 1vw;
  padding-right: 1vw;
    padding-top: 0.5vh;
  padding-bottom: 0.5vh;
    mix-blend-mode: multiply;
}

.nombreArticuloRight{
  width: 100%;
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style:normal;
  margin: auto;
  font-size: .8rem;
  line-height: 1.3rem;  
  text-align: right;
  color:white;
  background-color: #03705E;
  opacity: .8;
  padding-left: 1vw;
  padding-right: 1vw;
  padding-top: 0.5vh;
  padding-bottom: 1vh;
}

.categoriaArticuloRight{
    width: 100%;
    font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: bold;
  margin: auto;
  font-size: .9rem;
  line-height: 1.2rem;  
  text-align: right;
  color:white;
  background-color: #5C00D3;
  opacity: .8;
  padding-left: 1vw;
  padding-right: 1vw;
    padding-top: 0.5vh;
  padding-bottom: 0.5vh;
    mix-blend-mode: multiply;
}

#imgPaintHole1{
 float: left; /* Text will wrap on the right side */
  width: 40%; /* Set dimensions for the image */
  height: auto;
  shape-outside: url("img/paintHole1.png"); /* Reference the same image URL */
  shape-image-threshold: 0; /* Pixels > 50% opacity define the shape boundary */
  shape-margin: 6vw; /* Add some space between the text and the image */
}

#imgPeelIzq1{
    display: none;
 }

#imgPeelDer1{
    display: none;
 }

 #imgPinta2{
    display: none;
 }

#imgPinta1{
    display: none;
}

    #logoAvispaPortada{
        width:30%;
    position: relative; 
    top:19%;
    left:0vw;
    }

 .botonMenu {
    display: none;
    position: relative;
            background-color: #5C00D3;
        top: -8%;
}   
   
 .botonMenu p{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    color:white;
    font-size: 1.1rem;
    text-align: center;
    margin:0;
    text-decoration: none;
    padding:5px 15px 3px 15px;
 }

  .botonMenuTableta {
    display: block;
    position: relative;
            background-color: #5C00D3;
        top: -8%;
}   
   
 .botonMenuTableta p{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    color:white;
    font-size: 1.1rem;
    text-align: center;
    margin:0;
    text-decoration: none;
    padding:5px 15px 3px 15px;
 }

  .botonMenuMovil {
    display: none;
    position: relative;
            background-color: #5C00D3;
        top: -8%;
}  

 .botonMenuMovil p{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    color:white;
    font-size: 1.1rem;
    text-align: center;
    margin:0;
    text-decoration: none;
    padding:5px 15px 3px 15px;
 }


#portadaIZQ{
width:60vw;
display: flex;
flex-wrap: wrap;
justify-content: left;
padding-left: 12vw;
}

#portadaDER{
width:40vw;
display: flex;
align-items: end;
}

}