/* --- ESTILOS GENERALES Y CUERPO --- */
body {
    background-image: url('https://i.pinimg.com/736x/bf/65/6f/bf656f6e123797c07ae832cccb6da55d.jpg');
    /* MS Gothic no es una fuente web-safe. Si el usuario no la tiene, no se verá. 
       Añadimos alternativas como 'Courier New' y 'monospace' */
    font-family: 'MS Gothic', 'Courier New', monospace;
    font-size: 18px;
    color: #333; /* Un color de texto por defecto */
}

a {
    color: pink;
    font-weight: bold;
    text-decoration: none;
}

/* --- CONTENEDOR PRINCIPAL --- */
.container {
    /* Usamos max-width para que sea responsivo. Se encogerá si la pantalla es más pequeña de 650px */
    max-width: 700px;
    /* margin: 15px auto centra el contenedor horizontalmente de forma más simple y robusta */
    margin: 15px auto;
}
/* --- CÓDIGO PARA TENER CORTINA Y PISO JUNTOS --- */

/* 1. Código de la cortina (el que ya tenías) */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 25px; /* Altura de la cortina */
    background-image: url('https://graphic.neocities.org/Bee5.gif');
    background-repeat: repeat-x;
    z-index: 999;
    pointer-events: none;
}

/* 2. Código del piso (el nuevo) */
body::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 36px; /* Altura del piso */
    background-image: url('https://graphic.neocities.org/flw5.gif');
    background-repeat: repeat-x;
    z-index: 999;
    pointer-events: none;
}

/* 3. Y la regla del body con ambos paddings */
body {
    /* ...tus otros estilos de body... */
    padding-top: 25px;    /* Espacio para la cortina */
    padding-bottom: 36px; /* Espacio para el piso */
}

/* --- ENCABEZADO --- */
.header {
    height: 175px;
    margin-bottom: 10px;
    background-image: url('https://i.pinimg.com/736x/f8/46/d3/f846d3ae6a91b3735b3ebb07e147ae2d.jpg');
    background-size: cover; /* 'cover' ajusta la imagen para llenar el espacio sin distorsionarla */
    background-position: center 30%; /* Centra la imagen y la ajusta verticalmente */
    border: 4px solid #FFEBF1; /* Sintaxis correcta del borde */
}


/* --- BARRA DE LINKS --- */

.links {
    text-align: center; /* ¡Esta es la línea mágica! */
    margin-bottom: 10px; 
}

.links a{
  display:inline-block;
background:#FFEBF1; 
font:italic 20px;
padding: 3px; 
padding-left:7px;
padding-right:7px;
letter-spacing:2px;
color:#C5779C;
border-radius:10px;
border:0px solid #48AE47;
line-height:25px;
text-decoration: none;
}
      
.links a:hover {
color:#e8d8dc;
text-decoration: none;}

    

/* --- CONTENIDO PRINCIPAL --- */
.content {
    border-width: 10px;
    border-style: solid;
    border: 4px solid #FFEBF1; /* Sintaxis correcta del borde */
    margin-bottom: 20px;
    padding: 15px;
    background: white;
}

/* Usamos Flexbox para la sección de la imagen y el texto */
.intro-section {
    display: flex; /* Activa Flexbox */
    align-items: center; /* Centra los items verticalmente */
    gap: 15px; /* Espacio entre la imagen y el texto */
    margin-bottom: 20px;
}

.intro-gif {
    width: 200px;
    height: auto;
    /* flex-shrink: 0 evita que la imagen se encoja en pantallas pequeñas */
    flex-shrink: 0; 
}


.main-text {
    text-align: center; /* Centra el texto como lo hacía la etiqueta <center> */
  
  
}
/* --- ESTILOS PARA IMÁGENES FLOTANTES/SOBREPUESTAS --- */

/* 1. Estilos base para todas las imágenes flotantes */
.floating-image {
    position: absolute; /* ¡La clave de todo! La saca del flujo normal. */
    z-index: 10; /* Se asegura de que se muestre por encima de otros elementos. */
    display: block;
    
    /* Pequeña animación para que no sea estática */
    transition: transform 0.3s ease-out;
}

.floating-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* 2. Efecto hover para hacerlas interactivas */
.floating-image:hover {
    transform: scale(1.1) rotate(5deg); /* Crece un poco y rota al pasar el ratón */
    z-index: 11; /* Se pone por encima de otras imágenes flotantes */
}

/* 3. Posicionamiento INDIVIDUAL de cada imagen */

/* Imagen 1 (la de las flores, sobre el header) */
.image-1 {
    width: 150px; /* Tamaño de la imagen */
    top: 120px;   /* Distancia desde la parte superior del .container */
    left: -50px;  /* Distancia desde la izquierda del .container (valor negativo para que "salga") */
    transform: rotate(-15deg); /* Rotación inicial */
}

/* Imagen 2 (la del corazón, sobre la intro) */
.image-2 {
    width: 150px; /* Tamaño */
    bottom: -30px; /* Distancia desde la parte inferior del .intro-section */
    right: 20px;   /* Distancia desde la derecha del .intro-section */
    transform: rotate(10deg); /* Rotación inicial */
}

/* --- AJUSTES NECESARIOS EN LOS CONTENEDORES PADRE --- */
/* Para que el posicionamiento absoluto funcione correctamente,
   los contenedores padre deben tener un 'position' definido. */
   
   
  /* --- ESTILOS PARA LA NUBECITA / TOOLTIP --- */

/* La "nubecita" se crea con el pseudo-elemento ::before */
.floating-image::before {
    content: attr(data-tooltip); /* ¡La magia! Coge el texto del atributo data-tooltip. */
    position: absolute;
    bottom: 105%; /* Se posiciona justo encima de la imagen */
    left: 50%;
    transform: translateX(-50%); /* Truco para centrarlo horizontalmente */
    
    /* Estilo de la nubecita */
    background-color: #ffebf1; /* Fondo rosa pálido */
    color: #c5779c; /* Texto rosa oscuro */
    padding: 8px 12px;
    border-radius: 15px; /* Bordes bien redondeados */
    border: 2px solid #c5779c;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    white-space: nowrap; /* Evita que el texto se parta en varias líneas */
    
    /* Por defecto, está oculta */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* No interfiere con el clic del ratón */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 12; /* Por encima de la imagen */

}

/* --- EFECTO HOVER PARA MOSTRAR LA NUBECITA --- */

/* Cuando pasas el ratón sobre .floating-image, muestra la nubecita y su pico */
.floating-image:hover::before,
.floating-image:hover::after {
    opacity: 1;
    visibility: visible;
}

.container {
    position: relative; /* ¡Muy importante! Para que .image-1 se posicione respecto al container. */
}

.intro-section {
    position: relative; /* ¡Muy importante! Para que .image-2 se posicione respecto a la intro. */
}


/* --- PIE DE PÁGINA --- */
.footer {
    display: flex; /* Usamos Flexbox para alinear los elementos */
    justify-content: space-between; /* Espacia los elementos */
    align-items: center; /* Los alinea verticalmente */
    border: 4px solid #FFEBF1;
    background: white;
    padding: 10px;
    position: relative; /* Necesario para posicionar los GIFs si los quisiéramos encima */
    min-height: 80px; /* Damos una altura mínima para que se vea bien */
}

.footer-gif-left, .footer-gif-right {
    width: 15%; /* Hacemos los GIFs un poco más pequeños */
    max-width: 80px; /* Y les ponemos un tamaño máximo */
}

/* --- DISEÑO RESPONSIVE PARA MÓVILES --- */
@media (max-width: 400px) {
    body {
        font-size: 16px; /* Hacemos la fuente un poco más pequeña en móviles */
    }

    .intro-section {
        flex-direction: column; /* Apila la imagen y el texto uno sobre otro */
        text-align: center;
    }

    .footer {
        flex-direction: column;
        gap: 15px;
    }

    /* Ocultamos los GIFs en pantallas muy pequeñas si queremos */
    .footer-gif-left, .footer-gif-right {
       display: none;
    }
    
    /* --- ESTILOS PARA LA ANIMACIÓN DE BIENVENIDA --- */
.welcome-animation {
    text-align: center;      /* Centra el texto y el cursor */
    padding: 5px 0;
    margin-bottom: 5px;
    font-family: 'Courier New', monospace; /* Una fuente clásica de "máquina de escribir" */
    display: flex; /* Usamos flex para alinear el texto y el cursor en la misma línea */
    justify-content: center;
    align-items: center;
}

#typewriter {
    font-size: 1.5em; /* Un tamaño de letra más grande para el título */
    color: #ff69b4;  /* Un rosa brillante, ¡puedes cambiarlo! */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Sombra para que destaque */
}