/* Cute Polka Dotted Pink Bow Tie Ribbon - https://www.cursors-4u.com/cursor/cute-poka-dotted-pink-bow-tie-ribbon */
body, head {
  cursor: url('https://cdn.cursors-4u.net/previews/cute-polka-dotted-pink-bow-tie-ribbon-6be1a190-32.webp') 32 32, auto !important;
}
/* End www.Cursors-4U.com Code */

a {
  color: #82654F; 
}



body {

 font-family: "Butterfly Kids", cursive ;
background-image: url("tumblr_3c91602721c7cd98b3d041237d5f3126_11f88ff9_250.gif");
 
}


* {
    box-sizing: border-box;
}

.box{
background-color: #FFFFFF;
  
  max-width: 1090px;
   margin: 100px auto;
   display: grid;

grid-template-columns: 250px 2fr 250px;
    gap: 5px;



background-clip: padding-box; 
border: 40px solid transparent; 
border-image: url('24.png') 17 round;
}





.header, .columna1, .columna2, .columna3, .footer, .barrita-texto{
  border: black 0px solid;

}


.header {
  grid-row: 1 / 2;
  grid-column: 1 / -1;
  height: max-content;
}

.header img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ✨ Hace que la imagen cubra todo el espacio sin deformarse ✨ */
  object-position: center; /* Centra la parte visible de la imagen */
  display: block;
}

/* 👇 Nueva regla para la barrita de texto 👇 */
.barrita-texto {
  grid-row: 2 / 3;
  grid-column: 1 / -1; /* Ocupa todo el ancho */
  height: max-content;
}

.columna1 {
  grid-row: 3 / 4;
  grid-column: 1 / 2;
  height: max-content;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;



}

.columna2 {
  grid-row: 3 / 4; /* Desplazado a la fila 3 */
  grid-column: 2 / 3;
  height: max-content;
}

.columna3 {
  grid-row: 3 / 4; /* Desplazado a la fila 3 */
  grid-column: 3 / 4;
  height: max-content;
}

.footer {
  grid-row: 4 / 5; /* Desplazado a la fila 4 */
  grid-column: 1 / -1;
  height: max-content;
}


.navegacion {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  
  background-image: url("1132444268818780468.jpg");
  background-size: 110px;
  
  /* Evita que el fondo pastel invada el espacio transparente del borde */
  background-clip: padding-box; 
  
  border: 20px solid transparent; 
  border-image: url('Untitled823-20250926185109.png') 100 round;
  
  /* ¡LA MAGIA AQUÍ! Empuja la imagen del borde hacia afuera. 
     Puedes subir o bajar este número en px hasta que quede perfecto */
  border-image-outset: 7px; 
  
  display: flex;
  flex-direction: column;
  gap: 1px;
  background-color: #FFDEEB;
}

.navegacion-y-foto, .ul-navegacion{
margin-bottom: 0px; /* Controla exactamente cuántos píxeles de espacio quieres abajo */
  margin-top: 0;
}






.ul-navegacion ul {
      font-size: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}





.navegacion li{
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 30px; /* Espacio para que quepa el iconito */
  min-height: 30px;
  margin-bottom: 8px; /* Un poquito de espacio entre líneas */

}


.navegacion-y-foto{
  flex-direction: column;
  display: flex; /* ¡Sin esta línea, el gap es invisible! */
  align-items: center;
  gap: 1px;
}
.navegacion-y-foto h1{
  margin: 0;
}

.personal-botn{
      
      display: flex;          /* Activa el modo Flexbox */
  justify-content: center; /* Centra el contenido horizontalmente */
  align-items: center;     /* Centra el contenido verticalmente */
  flex-direction: column;
}

.personal-botnn{
  position: relative;
  display: table;       /* Cambia a 'table' para que se adapte exactamente al ancho de la foto */
  margin: 0 auto;       /* Esto centra la foto y su texto de forma horizontal automáticamente */
}


.boton-ft{
    align-items: center;
  display: block; 
  margin: 0 auto; 
}

.personal-text{
  position: absolute; /* Prepara el texto para moverse libremente */
  top: 50%; /* Mueve el texto al centro vertical */
  left: 50%; /* Mueve el texto al centro horizontal */
  transform: translate(-50%, -50%); /* Centra el texto exactamente sobre su propio punto medio */
  color: #8F776D; /* Cambia el color del texto a blanco para que se note */
  font-size: 30px; /* Ajusta el tamaño del texto */
  font-weight: bold;
  
  background-color: none;
  
  
text-align: center; /* Centra el texto */
  background-image: none; /* Asegura que no aparezca ninguna imagen de fondo */
  padding-left: 0 !important; /* Elimina el espacio de la imagen */
  margin-left: 0 !important; /* Elimina el margen izquierdo para que el centro sea exacto */
}

.blog{
    margin-left: 5px;
background-image: url('tumblr_0d515ed8bda84c205f8a4d12706dc326_df9729e4_75.gif');
}
.sobre-mi{
    margin-left: 5px;
  background-image: url('tumblr_e92faaa73a5e298688dd90e09d8299cc_df72eef8_75.gif');
}
.dibujos{
    margin-left: 5px;
  background-image: url('tumblr_39c9b42f61f13919e7b4e63703ec022e_e2b41376_75.gif');
}
.reseñas{
    margin-left: 5px;
  background-image: url('tumblr_a291955e3214d5268eddb0f7aa15ed9b_4f393860_75.gif');
}
.juegos{
    margin-left: 5px;
  background-image: url('tumblr_ad05091a1c668a0777f44a3433c33c08_e82ad7d1_75.gif');
}


.barrita-texto{
  border: 1px solid white;



  display: flex;
  justify-content: center; /* Centra de izquierda a derecha */
  align-items: center;     /* Centra de arriba a abajo */
  height: 100px;  
}




    html,
    body {
     overflow: auto;
      font-size: 15px;
  overflow-x: hidden; /* 🚨 CORTA cualquier cosa que intente ensanchar la página hacia los lados */
  width: 100vw;       /* Obliga a la página a no pasarse del ancho exacto de tu monitor */

    }






.contador-visitantes{
    flex-direction: column;
  display: flex;
  gap: 1px;
  
    align-items: center; 
  margin: 0 auto;
  
  
  
 background-image: url('788.gif');
 background-position: center;
  width: 205px;
  

background-clip: padding-box; 
border: 22px solid transparent; 
border-image: url('tumblr_3985f34f195d44bc85ebeea931c9dfe2_2f2fb0e1_400.gif') 55 round;
  
  

}


.visitantes-totales, .visitantes-enlinea{
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 1px;
}




 #container {
      overflow: scroll;
      overflow-x: hidden;
      height: 15em;
      padding: 1rem;
    }

    ::-webkit-scrollbar {
      width: 16px;
    }

    ::-webkit-scrollbar:horizontal {
      height: 17px;
    }

    ::-webkit-scrollbar-corner {
      background: #eee;
    }

    ::-webkit-scrollbar-track:vertical {
      background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
    }

    ::-webkit-scrollbar-track:horizontal {
      background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
    }

    ::-webkit-scrollbar-thumb {
      border: 1.5px solid #888;
      border-radius: 3px;
      box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
      background-color: #eee;
    }

    ::-webkit-scrollbar-thumb:vertical {
      background: url("https://i.imgur.com/bfyvjnx.png") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb);
    }

    ::-webkit-scrollbar-thumb:horizontal {
      background: url("https://i.imgur.com/tqe4SxM.png") no-repeat 50%, linear-gradient(180deg, #eee 45%, #ddd 0, #bbb);
    }

    ::-webkit-scrollbar-button:horizontal:end:increment,
    ::-webkit-scrollbar-button:horizontal:start:decrement,
    ::-webkit-scrollbar-button:vertical:end:increment,
    ::-webkit-scrollbar-button:vertical:start:decrement {
      display: block;
    }

    ::-webkit-scrollbar-button:vertical {
      height: 17px;
    }

    ::-webkit-scrollbar-button:vertical:start:decrement {
      background: white;
      background-image: url("https://i.imgur.com/EFnEMEb.png");
      background-repeat: no-repeat;
      background-position: center;
      -moz-background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

    ::-webkit-scrollbar-button:vertical:start:increment {
      display: none;
    }

    ::-webkit-scrollbar-button:vertical:end:decrement {
      display: none;
    }

    ::-webkit-scrollbar-button:vertical:end:increment {
      background: white;
      background-image: url("https://i.imgur.com/xuIt6Lc.png");
      background-repeat: no-repeat;
      background-position: center;
      -moz-background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }


.welcome{
  flex-direction: column;
  display: flex;
  gap: 1px;
}




.welcome-lazitos{
    position: relative;
  
  width: 100%;
  max-width: 500px;
  
  
    display: flex; /* Pone los elementos lado a lado */


  margin-top: 1px;

  justify-content: center; /* ✨ Centra todo el grupo en medio de la página ✨ */
  align-items: center;     /* Alinea las imágenes y el texto verticalmente */
  gap: 15px;
}








.contenedor-doble lazo-div{
  justify-content: center;   

}





.contenedor-doble {
  display: flex;
  flex-wrap: wrap;            /* ✨ El truco: permite que salten a la siguiente línea si no caben ✨ */
  justify-content: center; 
  align-items: center; 
  gap: 25px; 
  
  width: 100%; 
  padding: 10px; 
  box-sizing: border-box;     /* Asegura que el padding no haga crecer la caja más del 100% */
}

/* Agrega esto para proteger los iframes */
.contenedor-doble iframe {
  max-width: 100%;    /* Mantenemos esto para que no rompan la caja en pantallas chiquitas */
}

.guestbook {
 text-align: center;
}

.texto-guestbook {
  font-size: 35px;
  margin: 0 0 5px 0; /* El último número (10px) controla el espacio que hay ENTRE el texto y el iframe */
  padding: 0;
}


.gifipet-ññ{
width: 210px;
height:220px ;
}

.gifipet{

  width: 100%;       /* Se ajusta al 100% del ancho del div */
  height: 100%;      /* Se ajusta al 100% del alto del div */
  border: none;  
}


.atabook{
  height: 322px;
  width: 200px;
}



.strawpage{
  width: 300px;
height: 200px;
}


.chat{
              /*(c) solielios*/
border-width:12px;
border-style:solid;
border-image: url("https://i.imgur.com/Kh6qtcn.png") 11 fill round;         
    
}






.caja-stamps-interior {
    background-color: #ffffff;
    border-radius: 0px;
    padding: 15px 0px; 
    text-align: center;
    box-sizing: border-box;
    overflow: hidden; 

    /* ✨ EL CANDADO DE MIMI PARA DETENER EL ZOOM ✨ */
    min-width: 0; 
    max-width: 100%;
    width: 508px !important;
    
    
background-clip: padding-box;    
border: 20px solid transparent; 
border-image: url('24.png') 16 round;
  }

.carrusel-stamps-ventana {
    /* ✨ CAMBIO: Ahora solo ocupa el 100% normal, sin sumas ni márgenes negativos ✨ */
    width: 100% !important; 
    margin: 0 !important; 
    
    box-sizing: border-box;
    overflow: hidden;
    background: #ffffff;
    border-top: 0px dashed #f391a9;
    border-bottom: 0px dashed #f391a9;
    border-left: none !important;
    border-right: none !important;
    border-radius: 5px; 
    padding: 10px 0;
    display: flex;
    align-items: center;
  }

  /* LA TIRA HORIZONTAL EN MOVIMIENTO */
  .fila-stamps-animada {
    display: flex;
    gap: 12px;
    width: max-content;
    animation: deslices-stamps 10s linear infinite;
  }

  /* ESTILO DE CADA STAMP */
  .fila-stamps-animada img {
    width: 88px;
    height: 31px;
    image-rendering: pixelated;
    border: 1px solid #222222;
    flex-shrink: 0;
  }

  /* Detiene el carrusel al pasar el cursor */
  .carrusel-stamps-ventana:hover .fila-stamps-animada {
    animation-play-state: paused;
  }

  /* ANIMACIÓN INFINITA */
  @keyframes deslices-stamps {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }


.columna1, .columna2, .columna3 {
  border: black 0px solid;
  height: max-content;
  min-width: 0; /* ✨ Evita que las columnas se estiren por culpa de contenidos largos ✨ */
}





.me-seccion{
border-radius: 20px;
  background-color: #FFFFFF;
  
  
  
    background-clip: padding-box;
border: 20px solid transparent; 
border-image: url('ppnu.png') 200 round;
  
  
  
  flex-direction: column;
  display: flex;
  gap: 1px;
}

.me-seccion p{
  text-align: center;
  margin-bottom: 3px; /* Espacio debajo del párrafo */
}

.fondo-welcome2{
    justify-content: center; 
}




.fluttershy{
display: block; 
  margin: 0 auto; 
           /*(c) solielios*/
border-width:12px;
border-style:solid;
border-image: url("https://i.imgur.com/Kh6qtcn.png") 11 fill round;         
    
}



  
/* === EL CONTENEDOR PRINCIPAL === */
  #reproductor-musical {
    position: relative;
     justify-content: center;
    width: 200px; /* Ancho suficiente para la portada y el CD asomándose */
    height: 100px;
    cursor: pointer; /* Cambia el ratón a una manito al pasar por encima */
  }

  /* === LA PORTADA DEL ÁLBUM === */
  .cover-album {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: black;
    z-index: 999; /* Mantiene la portada por encima del CD */
    border-radius: 3px; /* Un toque opcional para suavizar los bordes */
  }

  /* === EL DISCO CD === */
  .disco-cd {
    position: absolute;
    width: auto;
    height: 90px;
    left: 55px; /* Distancia a la que se asoma el CD por la derecha */
    top: 5px;   /* Centra el CD verticalmente respecto a la portada */
    z-index: 800; /* Lo esconde detrás de la portada */
    
    /* Animación limpia y moderna */
    animation: girar-cd 4s linear infinite; 
  }

  /* === EFECTO HOVER (Pausa el CD al pasar el cursor) === */
  #reproductor-musical:hover .disco-cd {
    animation-play-state: paused;
  }

  /* === LA ANIMACIÓN DE GIRO === */
  @keyframes girar-cd {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  
  
  .footer{
    height: 100px;
  }