/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */



/* ... abajo de esto continúa tu CSS normal ... */


 /* --- 1. CONFIGURACIÓN BASE DEL SITIO --- */
body {
    background-image: url("https://zoeling-zephira.neocities.org/fondos/fondo%202.png");
    background-size: cover;
    background-attachment: fixed; /* Mantiene el fondo quieto al hacer scroll */
    font-family: sans-serif;
    max-width: 1200px;            /* Permite que quepan bien las 3 columnas */
    margin: 0 auto;               /* Centra el contenedor principal en la pantalla */
    padding: 20px;
    color: #333;
    line-height: 1.6;
}
body {
    font-family: 'https://zoeling-zephira.neocities.org/fuentes/LEMON.otf', sans-serif;
    font-size: 17px;  /* El tamaño grande que configuramos antes */
    line-height: 1.7;
}



/* Forzar que los textos introductorios del inicio se queden centrados */
header {
    text-align: center;
    margin-bottom: 30px;
}

header h1, header p {
    margin: 5px 0;
}

/* --- 2. CONTENEDOR MAESTRO DE LAS 3 COLUMNAS --- */
.contenedor-principal-web {
    display: flex !important;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;                    /* Espacio de separación entre las columnas */
    width: 100%;
    box-sizing: border-box;
}

/* --- TAMAÑO DE LAS COLUMNAS (Estilo Lazer-Bunny) --- */
.columna-lateral {
    flex: 1;                      /* Columnas laterales más delgadas */
    min-width: 220px;
}

.columna-centro {
    flex: 2;                      /* Columna central el doble de ancha */
    min-width: 400px;
}

/* --- 3. ESTILO VENTANAS RETRO ROSAS --- */
.ventana-retro {
    background-color: #ffffff;    /* Fondo blanco interno */
    border: 2px solid #F0516F;    /* Borde rosa fuerte de los cuadros */
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 2px 2px 0px #f87da0; /* Sombra sólida retro */
    text-align: left !important;  /* FUERZA a que el texto interno vaya a la izquierda */
    margin-bottom: 15px;          /* Espacio si pones una ventana debajo de otra */
}

/* Barra de título rosa de cada bloque */
.barra-titulo {
    background-color: #fcaec1;    /* Rosa pastel de la barra superior */
    color: #ffffff;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    padding: 6px 12px;
    font-size: 19px;
    border-bottom: 2px solid #f87da0;
}

/* Espacio acolchado para los textos dentro de las ventanas */
.contenido-ventana {
    padding: 15px;
    color: #cc4163;               /* Letras en tono rosa oscuro */
    font-size: 17px;
}

/* Estilo para las listas de navegación de la izquierda */
.contenido-ventana ul {
    list-style-type: '➔ ';        /* Flecha clásica retro */
    padding-left: 20px;
    margin-top: 5px;
}

.contenido-ventana li {
    margin-bottom: 8px;
}

.contenido-ventana a {
    color: #ff3366;
    text-decoration: none;
    font-weight: bold;
}

.contenido-ventana a:hover {
    text-decoration: underline;
}

/* --- 4. CAJA ROSA DE ICONOS PRINCIPALES (Dentro de Welcome) --- */
.menu-botones-imagenes {
    display: flex !important;
    justify-content: center;
    align-items: center;    
    gap: 20px;
    background-color: #F03F63;    /* El rosa fresa vibrante */
    max-width: fit-content;
    margin: 15px auto 0 auto;     /* Centra la cajita dentro del bloque Welcome */
    padding: 12px 25px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    border: 2px solid #ffffff;
}

/* Control para que los iconos no se deformen */
.menu-botones-imagenes img {
    width: 40px;                  /* Tamaño de las imágenes pequeñas */
    height: auto;
    display: block;
    transition: transform 0.2s ease;
    cursor: pointer;
}

.menu-botones-imagenes img:hover {
    transform: scale(1.15);       /* Efecto dinámico al pasar el ratón */
}

/* --- 5. RESPONSIVO PARA CELULARES --- */
@media (max-width: 850px) {
    .contenedor-principal-web {
        flex-direction: column;   /* Se apilan verticalmente si la pantalla es pequeña */
    }
    .columna-lateral, .columna-centro {
        width: 100%;
    }
}

 /* --- ESTILO PARA LA FECHA EN UPDATES --- */
.fecha-tag {
    background-color: #F0516F;     /* Fondo rosa fuerte para resaltar */
    color: #ffffff !important;     /* Texto blanco */
    font-family: monospace;        /* Tipografía estilo computadora retro */
    font-size: 11px;               /* Tamaño pequeño y ordenado */
    padding: 2px 6px;              /* Espacio interno para que no se aplaste */
    border-radius: 4px;            /* Bordes ligeramente redondeados */
    margin-right: 5px;             /* Separa la fecha del texto del aviso */
    display: inline-block;         /* Evita que se encime con otras letras */
    font-weight: bold;
}



/* --- ENTRADA USANDO UNA IMAGEN DE MARCO/FONDO --- */
.entrada-imagen-fondo {
    background-image: url("https://zoeling-zephira.neocities.org/imagenes/notas2.png"); 
    
    /* CAMBIO CLAVE: Mantiene la proporción de la imagen para que NO se deforme */
    background-size: contain;       
    background-position: center;
    background-repeat: no-repeat;
    
    margin: 30px auto;                /* Centra la publicación en la pantalla */
    
    /* MEDIDA DE ORO: Como tu imagen es cuadrada, le damos un ancho fijo 
       para controlar exactamente dónde cae el texto adentro */
    width: 600px;                       
    height: 600px;                    /* Al ser fija la altura, el cuadro siempre será una nube perfecta */
    
    box-sizing: border-box;
    text-align: left !important;      
}

/* El espacio interno calibrado para la nube de fresas */
.contenido-texto-interno {
    /* Colchón interno: 110px arriba/abajo y 100px a los lados para no pisar las fresas */
    padding: 110px 100px;               
    color: #cc4163;                   /* Tu color de letra rosa/rojo oscuro es perfecto */
    
    /* Si el texto es más largo que la nube, añade una barra de desplazamiento 
       interna muy tierna para que no se salga de la imagen */
    
}



/* Detalles para los títulos y fechas internos */
.contenido-texto-interno h3 {
    margin-top: 0;
    font-family: 'Courier New', monospace;
    font-size: 19px;
    color: #ff3366;
}

.fecha-imagen {
    font-size: 11px;
    font-weight: bold;
    color: #ff758f;
    display: block;
    margin-bottom: 12px;
    font-family: monospace;
}

.contenido-texto-interno p {
    font-size: 19px;
    line-height: 1.5;
    margin: 0;
}

/* --- CONTROL PARA LA PÁGINA DEL DIARIO --- */
.contenedor-diario {
    max-width: 650px;          /* ¡El freno! Evita que las cajas se estiren a los lados */
    margin: 40px auto;         /* Centra perfectamente el bloque en la pantalla */
    padding: 0 15px;           /* Margen de seguridad para pantallas de celular */
    display: flex;
    flex-direction: column;    /* Pone una entrada debajo de la otra */
    gap: 25px;                 /* Espacio de separación entre cada día */
}

/* Forzar que las ventanas del diario mantengan su tamaño uniforme */
.contenedor-diario .ventana-retro {
    width: 100%;               /* Se adaptan al tamaño del contenedor de 650px */
    box-sizing: border-box;
    margin-bottom: 0;          /* El espacio ahora lo controla el 'gap' de arriba */
}

/* Control para las fotos que subas dentro de tus publicaciones */
.imagen-diario {
    max-width: 100%;           /* Evita que la foto se salga de la caja rosa */
    height: auto;
    border-radius: 6px;        /* Bordes redondeados para tus fotos */
    margin-top: 10px;          /* Separa la foto del texto de arriba */
    border: 2px solid #F0516F; /* Un marco rosa sutil para tus fotos */
}


/* Contenedor exterior para darle orden */
.contenedor-guestbook {
  max-width: 900px;     /* Evita que se estire demasiado en pantallas gigantes */
  margin: 40px auto;    /* Centra el bloque y le da espacio arriba y abajo */
  padding: 0 15px;      /* Pequeño colchón para que no toque los bordes en celulares */
}

/* Título de la sección */
.titulo-guestbook {
  text-align: center;   /* Centra el texto */
  font-family: inherit; /* Mantiene la tipografía que ya usas en tu web */
  margin-bottom: 20px;  /* Separa el título del cuadro de comentarios */
}

/* El cuadro de Atabook estirado y limpio */
.mi-guestbook {
  width: 100%;          /* Ocupa el 100% del ancho disponible */
  height: 650px;        /* Altura ideal para ver varios mensajes sin recortarse */
  display: block;       /* Evita espacios en blanco extraños debajo */
}

body {
  /* Aumenta el tamaño general. El estándar cómodo es entre 16px y 18px */
  font-size: 20px; 
  
  /* ¡MUY IMPORTANTE! Al hacer la letra más grande, necesitas más espacio 
     entre renglones para que las palabras no se choquen entre sí */
  line-height: 1.7; 
  
  /* Opcional: Si las letras de tu fuente están muy pegadas, 
     este comando las separa un poquito horizontalmente */
  letter-spacing: 0.5px; 
}

h1 {
  font-size: 2.5rem; /* El tamaño más grande, ideal para el nombre del blog */
}

h2 {
  font-size: 1.8rem; /* Para subtítulos, como el "¡Firma mi libro de visitas!" */
  margin-top: 30px;  /* Le da espacio arriba para que respire el diseño */
}

/* Prepara el espacio alrededor del Tamagotchi */
.caja-tooltip {
  position: relative;
  display: inline-block;
  text-align: center;
}

/* Diseña el cartelito que aparece abajo */
.caja-tooltip .texto-flotante {
  visibility: hidden;         /* Oculto por defecto */
  opacity: 0;
  width: 120px;               /* Ancho del cartelito */
  
  /* Colores combinados con el Tamagotchi */
  background-color: #fce4ec;  /* Fondo rosa pastel muy tierno */
  color: #c2185b;            /* Letras en rosa oscuro/fucsia para leer bien */
  border: 1px dashed #c2185b; /* Borde punteado estético */
  
  text-align: center;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 13px;            /* Tamaño de letra ideal para notas cortas */
  
  /* Posicionamiento exacto debajo del icono */
  position: absolute;
  z-index: 10;
  top: 48px;                  /* Lo empuja justo debajo de los 40px que mide tu imagen */
  left: 50%;
  transform: translateX(-50%);
  
  /* Transición para que aparezca suavemente */
  transition: opacity 0.2s ease-in-out;
}

/* Hace aparecer el texto mágicamente cuando el usuario pasa el ratón */
.caja-tooltip:hover .texto-flotante {
  visibility: visible;
  opacity: 1;
}

/* Contenedor que centra el bloque en la pantalla */
.contenedor-stamps-pagina {
  max-width: 850px;
  margin: 40px auto;
  padding: 0 20px;
}

/* EL CUADRO DE LA PUBLICACIÓN ROSA PASTEL */
.caja-publicacion-stamps {
  background-color: #fff0f3;      /* Color rosa pastel muy suave y tierno */
  border: 2px dashed #cc4163;     /* Borde punteado con tu color rosa/rojo oscuro característico */
  border-radius: 16px;            /* Esquinas bien redondeadas estilo agenda */
  padding: 40px 30px;             /* Espacio interno para que el contenido no toque los bordes */
  box-shadow: 0 8px 16px rgba(204, 65, 99, 0.1); /* Sombra suave de color rosa transparente */
}

/* Títulos decorados dentro de la publicación */
.titulo-stamps {
  color: #cc4163;
  text-align: center;
  margin-top: 0;
  margin-bottom: 5px;
}

.subtitulo-stamps {
  color: #e57399;                 /* Un rosa intermedio para el texto de subtítulo */
  text-align: center;
  font-size: 14px;
  margin-bottom: 30px;
}

/* La cuadrícula ajustada para tus stamps reales */
.galeria-grid-stamps {
  display: grid;
  /* CAMBIO: Achicamos el espacio de cada celda a 130px para que se junten más */
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); 
  gap: 20px;                      /* Espacio de separación más estrecho y ordenado */
  justify-items: center;          
  max-width: 600px;               /* Centra el grupo para que no se abran de extremo a extremo */
  margin: 0 auto;                 /* Centra la grilla dentro del cuadro rosa */
}

/* Reglas corregidas para que tus imágenes NO se deformen */
.galeria-grid-stamps img {
  width: auto;                    /* ¡CLAVE! Deja que el ancho se adapte solo */
  max-width: 110px;               /* Tamaño máximo para que se vean grandes pero tiernas */
  height: 110px;                  /* Altura fija cuadrada/vertical perfecta para tus diseños */
  
  object-fit: contain;            /* Protege tu dibujo para que JAMÁS se estire o se deforme */
  image-rendering: pixelated;     /* Hace que los píxeles se vean totalmente limpios y definidos */
  
  transition: transform 0.2s ease-in-out;
}

/* El efecto de flotar se mantiene igual de lindo */
.galeria-grid-stamps img:hover {
  transform: scale(1.1) translateY(-3px); 
  cursor: pointer;
}

/* CONTENEDOR FIJO EN LA PANTALLA */
.moneda-flotante-fija {
  position: fixed;   /* CLAVE: Se queda clavado en la pantalla aunque bajes la página */
  top: 25px;         /* Separación desde el borde superior de la ventana */
  right: 25px;       /* Separación desde el borde derecho (cambia a 'left' si la quieres a la izquierda) */
  z-index: 9999;     /* Fuerza a la moneda a estar por encima de los cuadros rosa y las stamps */
}

/* El botón de la moneda limpio */
.moneda-click {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  display: inline-block;
  transition: transform 0.1s ease;
  user-select: none;
}

/* Tamaño de la moneda en la esquina */
.moneda-click img {
  width: 150px;       /* Un tamaño ideal para que decore la esquina sin tapar contenido */
  height: auto;
  display: block;
  image-rendering: pixelated;
  /* Añadimos una sombra rosa tierno para que resalte sobre el fondo de lazos */
  filter: drop-shadow(0px 4px 6px rgba(204, 65, 99, 0.3));
}

/* Efecto al pasar el cursor */
.moneda-click:hover {
  transform: scale(1.15);
}

/* Animación de brinco al cliquear (Modificada para que salte en su lugar fijo) */
.animacion-moneda {
  transform: scale(0.9) translateY(-6px) !important;
}

/* Contenedor central del juego */
.contenedor-gachapon {
  text-align: center;
  max-width: 450px;
  margin: 40px auto;
  background-color: #fff0f3; /* Fondo rosa pastel */
  border: 2px dashed #cc4163;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 6px 12px rgba(204, 65, 99, 0.1);
}

.titulo-gachapon { color: #cc4163; margin-bottom: 0; }
.subtitulo-gachapon { color: #e57399; font-size: 13px; margin-top: 5px; }

/* Contenedor relativo para la máquina y el dulce */
.interfaz-maquina {
  position: relative;
  width: 250px;
  margin: 20px auto;
}

/* Botón transparente para la máquina */
.maquina-btn {
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  transition: transform 0.2s ease;
}
.maquina-btn img {
  width: 200px; /* Ajusta el tamaño de tu máquina en pantalla */
  height: auto;
  image-rendering: pixelated;
}
.maquina-btn:hover { transform: scale(1.03); }

/* Clases utilitarias de ocultar */
.hidden { display: none !important; }

/* El caramelo animado */
.caramelo-animado {
  position: absolute;
  bottom: 10px;
  left: 45%;
  width: 35px;
  height: auto;
  image-rendering: pixelated;
  z-index: 5;
}

/* El cartelito rosa que muestra el mensaje final */
.caja-mensaje-gacha {
  background-color: #ffffff;
  border: 1px solid #cc4163;
  border-radius: 10px;
  padding: 12px 15px;
  margin-top: 15px;
  color: #cc4163;
  font-weight: bold;
  font-size: 15px;
  animation: entradaMensaje 0.3s ease-out forwards;
}

/* --- ANIMACIONES MÁGICAS --- */

/* 1. Agitar la máquina al hacer clic */
.agitar-maquina {
  animation: temblar 0.3s ease-in-out;
}
@keyframes temblar {
  0% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-3px, 1px) rotate(-2deg); }
  40% { transform: translate(3px, -1px) rotate(2deg); }
  60% { transform: translate(-2px, -1px) rotate(-1deg); }
  80% { transform: translate(2px, 1px) rotate(1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* 2. El dulce sale rodando y rebotando de la máquina */
.animar-salida-dulce {
  animation: rodarDulce 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes rodarDulce {
  0% { transform: translateY(-20px) scale(0) rotate(0deg); opacity: 0; }
  50% { transform: translateY(20px) scale(1.2) rotate(180deg); opacity: 1; }
  100% { transform: translateY(40px) scale(1) rotate(360deg); }
}

/* 3. El cartel del mensaje aparece con un suave desvanecido */
@keyframes entradaMensaje {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}