/* =========================
   IMAGENES
========================= */

.spiderman {
    float: right;                          /* la imagen flota a la derecha y el texto la rodea por la izquierda */
    height: 320px;
    object-fit: cover;                     /* escala la imagen para llenar el área sin deformarla */
    object-position: 0% 0%;               /* muestra la esquina superior izquierda de la imagen */
    padding: 0px 50px;                     /* espacio a los lados de la imagen */
}

/* =========================
   EFECTO HOVER CON IMAGEN
   Muestra una imagen pequeña al pasar el mouse sobre un texto marcado con esta clase
========================= */

.hover_imagen {
    position: relative;                    /* necesario para que la imagen se posicione relativa a esta palabra, no a la página */
    /*border-bottom: 1px dotted currentColor;*/ /* subrayado punteado opcional para indicar que hay algo al hacer hover */
}

    /* La imagen está oculta por defecto */
    .hover_imagen img {
        display: none;                     /* oculta la imagen hasta que se haga hover */
        position: absolute;                /* se posiciona relativa al .hover_imagen que tiene position: relative */
        bottom: 100%;                      /* la coloca encima del texto (100% de la altura del contenedor hacia arriba) */
        left: 50%;                         /* empieza desde el centro horizontal del texto */
        transform: translateX(-50%);       /* retrocede la mitad de su propio ancho para quedar centrada sobre el texto */
        width: 200px;
        height: 200px;
        object-fit: cover;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.4); /* sombra para que la imagen se destaque sobre el contenido */
        z-index: 100;                      /* se pone por encima del texto y otros elementos */
    }

    /* Cuando el mouse está sobre .hover_imagen, muestra la imagen */
    .hover_imagen:hover img {
        display: block;
    }

/* =========================
   EFECTO ZOOM AL HACER HOVER SOBRE UNA IMAGEN
   La imagen se agranda cuando el mouse pasa sobre ella
========================= */

.hover_zoom {
    position: relative;                    /* necesario para que z-index funcione correctamente en el hover */
    display: block;                        /* bloque para poder centrar la imagen con margin: auto */
    line-height: 0;                        /* elimina el espacio extra que el navegador agrega debajo de imágenes inline */
    font-size: 0;                          /* elimina cualquier espacio residual de texto inline */
}

    .hover_zoom img {
        display: block;                    /* necesario para que margin: auto funcione */
        margin: 0 auto;                    /* centra la imagen horizontalmente */
        height: 300px;
        object-fit: cover;
        border-radius: 8px;
        transition: transform 0.3s ease;   /* animación suave al agrandarse */
        transform-origin: center center;   /* la imagen crece desde su centro */
    }

    /* Al hacer hover, la imagen se agranda usando transform para no afectar el layout */
    .hover_zoom:hover img {
        transform: scale(2.3);             /* agranda la imagen al 230% de su tamaño original */
        z-index: 100;                      /* se pone por encima de otros elementos al agrandarse */
        position: relative;                /* necesario para que z-index tenga efecto */
    }

/* =========================
   RESPONSIVO
   Ajustes para pantallas de 768px o menos
========================= */

@media (max-width: 768px) {

    /* La imagen de spiderman deja de flotar en móvil para no apretar el texto */
    .spiderman {
        float: none;                               /* elimina el float */
        display: block;
        width: 100%;                               /* ocupa todo el ancho */
        height: 250px;                             /* altura reducida para móvil */
        padding: 0;                                /* elimina el padding lateral */
        margin-bottom: 20px;                       /* espacio debajo de la imagen */
    }

    .jonathan {
        width: 100%; /* o el ancho que necesites */
        height: auto; /* deja que la altura se calcule automáticamente según las proporciones */
        object-fit: unset; /* elimina cualquier object-fit que pueda estar recortando */
    }

    /* El efecto hover con imagen se desactiva en móvil */
    /* En móvil no hay hover, el mouse no existe, así que este efecto no funciona */
    .hover_imagen img {
        display: none !important; /* fuerza que la imagen nunca aparezca en móvil */
    }

    /* El zoom se reduce en móvil para que la imagen no se salga de la pantalla */
    .hover_zoom:hover img {
        transform: scale(1.5);                     /* zoom más conservador: 150% en lugar de 230% */
    }

}