body {
             cursor: url('Imagenes/sc-cursor.svg'), auto;
        background-image: url('Imagenes/sabrina5.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
 
    }
    h1 {font-style: italic; color: black;}
    h2 {font-style: italic; color: blue;}
    a {font-style: italic; color:red;}
    a:hover {font-style: italic; color: blue;}

.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#f3f2ee;
	color:#000;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}
.float:hover {
	text-decoration: none;
	color: #FFF;
  background-color:#1ab152;
    
    animation: shake 1s;

 
  animation-iteration-count: infinite;
}

.my-float{
	margin-top:16px;
}
.facebook-float {
    bottom: 130px; 
}
.instagram-float {
    bottom: 220px;
}
.tiktok-float {
    bottom: 310px;
}

.pulse {
  animation: pulse-animation 2s infinite;
  
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px #08100bfa rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

@keyframes shake {
  0% { transform: skewX(-15deg); }
  5% { transform: skewX(15deg); }
  10% { transform: skewX(-15deg); }
  15% { transform: skewX(15deg); }
  20% { transform: skewX(0deg); }
  100% { transform: skewX(0deg); }
}

.index2 {
  width: 100%;
  height: 420px;
}
/*en Ios se le conoce como ScrollView*/
.img2{
  display: flex;             
  overflow-x: auto;     
  overflow-y: hidden;       
  gap: 40px;               
  padding: 10px;
  scroll-behavior: smooth; 
}

.img2::-webkit-scrollbar {
  height: 8px;          
}

.img2::-webkit-scrollbar-thumb {
  background: turquoise;         
  border-radius: 10px;
}

.my-button {
    background: none;   
    border: none;      
    padding: 0;         
    cursor: url('Imagenes/sc-cursor.svg'), auto;    
    text-align: center;
}

.my-button h4 {
    margin: 0;
    background: transparent; 
    color: black; 
}

        .my-button2 {
            background-color: rgb(0, 50, 250);
            color: black;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            margin-top: 20px;
                     cursor: url('Imagenes/sc-cursor.svg'), auto;
        }

        .my-button2:hover {
            background-color: rgb(255, 0, 0);
            color: white;
                     cursor: url('Imagenes/sc-cursor.svg'), auto;
        }

.img5{
  display: flex;             
  overflow-x: auto;     
  overflow-y: hidden;       
  gap: 40px;               
  padding: 10px;
  scroll-behavior: smooth; 
  cursor: url('Imagenes/sc-cursor.svg'), auto;
}
.img5 h4 {
  font-size: 24px; 
  color: yellow;
}

.img5::-webkit-scrollbar {
  height: 8px;          
}

.img5::-webkit-scrollbar-thumb {
  background: transparent;         
  border-radius: 10px;
}

.Autor {
  text-align: center;
  font-size: 26px;
  color: chartreuse;
}
.Autor2 {
  text-align: center;
  font-size: 26px;
  color: yellow;
}

.Titulo {
  text-align: center;
  font-size: 43px;
  color: rgb(255, 0, 0);
}

.cursor {
         cursor: url('Imagenes/sc-cursor.svg'), auto;
}

.confeti {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
}



   #anuncio {
      display: flex; /* se muestra al cargar */
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.6);
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }

    /* Contenedor del anuncio */
    #anuncio .contenido {
      background: #fff;
      padding: 20px;
      border-radius: 10px;
      max-width: 500px;
      width: 90%;
      text-align: center;
      position: relative;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }

    /* Botón de cerrar (X) */
    #anuncio .cerrar {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 20px;
      cursor: pointer;
      border: none;
      background: none;
      font-weight: bold;
    }

    #anuncio img {
      width: 100%;
      height: auto;
      border-radius: 8px;
    }