@charset "UTF-8";

       :root { --transicion: 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
        body { font-family: 'Segoe UI', sans-serif; margin: 0; background: #f8f8f8; color: #333; }

        .intro { text-align: center; padding: 50px 20px; max-width: 800px; margin: 0 auto; }

        /* CONTENEDOR DE 4 COLUMNAS */
        .exposicion {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 4 columnas fijas */
            gap: 15px;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            transition: all var(--transicion);
        }

        /* CADA FOTO */
        .foto-item {
            position: relative;
            height: 250px;
            overflow: hidden;
            border-radius: 10px;
            cursor: pointer;
            transition: all var(--transicion);
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .foto-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform var(--transicion);
        }

        /* 1. EFECTO AUMENTAR AL PASAR RATÓN */
        .foto-item:hover img {
            transform: scale(1.15);
        }

        /* TEXTO EXPLICATIVO AL PASAR RATÓN */
        .info-overlay {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            color: white;
            padding: 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }

        .foto-item:hover .info-overlay {
            transform: translateY(0);
        }

        /* 2. EFECTO EXPANDIR AL PINCHAR (Ocupa toda la sección) */
        .foto-item.expandida {
            grid-column: 1 / -1; /* Ocupa las 4 columnas */
            height: 600px; /* Altura de detalle */
            z-index: 10;
        }

        /* Evitar que la foto expandida se mueva con el hover */
        .foto-item.expandida:hover img { transform: scale(1); }

        /* Ajuste para móviles */
        @media (max-width: 800px) { .exposicion { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 450px) { .exposicion { grid-template-columns: 1fr; } }