/* ============================================
   Imágenes de fondo para proyectos DTA - Generadas por IA
   ============================================ */

/* Alumbrado Público - Calle urbana con farolas inteligentes */
.project-card:nth-child(1) {
    background: linear-gradient(135deg, rgba(26, 54, 93, 0.9), rgba(44, 83, 131, 0.8)),
                url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 250"><defs><linearGradient id="sky" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:%230a1929;stop-opacity:1"/><stop offset="100%" style="stop-color:%231a365d;stop-opacity:1"/></linearGradient></defs><rect width="400" height="250" fill="url(%23sky)"/><rect x="0" y="180" width="400" height="70" fill="%232d3748"/><rect x="50" y="120" width="8" height="60" fill="%23e2e8f0"/><rect x="48" y="110" width="12" height="15" fill="%23fbbf24"/><rect x="150" y="130" width="8" height="50" fill="%23e2e8f0"/><rect x="148" y="120" width="12" height="15" fill="%23fbbf24"/><rect x="250" y="125" width="8" height="55" fill="%23e2e8f0"/><rect x="248" y="115" width="12" height="15" fill="%23fbbf24"/><rect x="350" y="135" width="8" height="45" fill="%23e2e8f0"/><rect x="348" y="125" width="12" height="15" fill="%23fbbf24"/><circle cx="54" cy="117" r="20" fill="%23fef3c7" opacity="0.3"/><circle cx="154" cy="127" r="18" fill="%23fef3c7" opacity="0.3"/><circle cx="254" cy="122" r="19" fill="%23fef3c7" opacity="0.3"/><circle cx="354" cy="132" r="17" fill="%23fef3c7" opacity="0.3"/></svg>');
    background-size: cover;
    background-position: center;
    color: white;
}

/* Tránsito Inteligente - Intersección con semáforos */
.project-card:nth-child(2) {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(16, 185, 129, 0.8)),
                url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 250"><defs><linearGradient id="road" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:%23374151;stop-opacity:1"/><stop offset="100%" style="stop-color:%23111827;stop-opacity:1"/></linearGradient></defs><rect width="400" height="250" fill="%23e5e7eb"/><rect x="0" y="100" width="400" height="50" fill="url(%23road)"/><rect x="175" y="0" width="50" height="250" fill="url(%23road)"/><rect x="60" y="60" width="15" height="40" fill="%23f3f4f6"/><rect x="58" y="58" width="19" height="8" fill="%23dc2626"/><rect x="58" y="68" width="19" height="8" fill="%23fbbf24"/><rect x="58" y="78" width="19" height="8" fill="%2322c55e"/><rect x="325" y="60" width="15" height="40" fill="%23f3f4f6"/><rect x="323" y="58" width="19" height="8" fill="%23dc2626"/><rect x="323" y="68" width="19" height="8" fill="%23fbbf24"/><rect x="323" y="78" width="19" height="8" fill="%2322c55e"/><rect x="60" y="150" width="15" height="40" fill="%23f3f4f6"/><rect x="58" y="148" width="19" height="8" fill="%23dc2626"/><rect x="58" y="158" width="19" height="8" fill="%23fbbf24"/><rect x="58" y="168" width="19" height="8" fill="%2322c55e"/><rect x="325" y="150" width="15" height="40" fill="%23f3f4f6"/><rect x="323" y="148" width="19" height="8" fill="%23dc2626"/><rect x="323" y="158" width="19" height="8" fill="%23fbbf24"/><rect x="323" y="168" width="19" height="8" fill="%2322c55e"/><line x1="200" y1="0" x2="200" y2="95" stroke="%23fbbf24" stroke-width="2" stroke-dasharray="5,5"/><line x1="200" y1="155" x2="200" y2="250" stroke="%23fbbf24" stroke-width="2" stroke-dasharray="5,5"/><line x1="0" y1="125" x2="170" y2="125" stroke="%23fbbf24" stroke-width="2" stroke-dasharray="5,5"/><line x1="230" y1="125" x2="400" y2="125" stroke="%23fbbf24" stroke-width="2" stroke-dasharray="5,5"/></svg>');
    background-size: cover;
    background-position: center;
    color: white;
}

/* IoT Gateway - Dispositivos conectados y ondas */
.project-card:nth-child(3) {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.9), rgba(124, 58, 237, 0.8)),
                url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 250"><defs><radialGradient id="signal"><stop offset="0%" style="stop-color:%23a78bfa;stop-opacity:0.8"/><stop offset="100%" style="stop-color:%237c3aed;stop-opacity:0"/></radialGradient></defs><rect width="400" height="250" fill="%23111827"/><circle cx="200" cy="125" r="30" fill="%23a78bfa"/><circle cx="200" cy="125" r="50" fill="url(%23signal)"/><circle cx="200" cy="125" r="70" fill="url(%23signal)"/><circle cx="200" cy="125" r="90" fill="url(%23signal)"/><rect x="80" y="110" width="20" height="30" fill="%2360a5fa" rx="3"/><rect x="300" y="105" width="20" height="35" fill="%2360a5fa" rx="3"/><rect x="120" y="160" width="25" height="25" fill="%2334d399" rx="3"/><rect x="255" y="65" width="25" height="25" fill="%2334d399" rx="3"/><rect x="50" y="70" width="18" height="18" fill="%23f59e0b" rx="3"/><rect x="332" y="162" width="18" height="18" fill="%23f59e0b" rx="3"/><circle cx="90" cy="125" r="3" fill="%23fbbf24"/><circle cx="310" cy="122" r="3" fill="%23fbbf24"/><circle cx="132" cy="172" r="3" fill="%23fbbf24"/><circle cx="267" cy="77" r="3" fill="%23fbbf24"/><circle cx="59" cy="79" r="3" fill="%23fbbf24"/><circle cx="341" cy="171" r="3" fill="%23fbbf24"/></svg>');
    background-size: cover;
    background-position: center;
    color: white;
}

/* Alertas Tempranas - Sistema meteorológico */
.project-card:nth-child(4) {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.8)),
                url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 250"><defs><linearGradient id="sky" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:%23fbbf24;stop-opacity:0.3"/><stop offset="100%" style="stop-color:%23f59e0b;stop-opacity:0.5"/></linearGradient></defs><rect width="400" height="250" fill="url(%23sky)"/><path d="M50 180 Q100 120 150 180 T250 180 T350 180" stroke="%231e293b" stroke-width="3" fill="none"/><path d="M80 140 Q120 100 160 140 T240 140 T320 140" stroke="%231e293b" stroke-width="2" fill="none"/><circle cx="100" cy="80" r="25" fill="%23fbbf24" opacity="0.8"/><circle cx="200" cy="60" r="30" fill="%23f59e0b" opacity="0.7"/><circle cx="300" cy="90" r="22" fill="%23fbbf24" opacity="0.9"/><path d="M320 150 L325 140 L330 150 L325 160 Z" fill="%23dc2626"/><path d="M120 170 L125 160 L130 170 L125 180 Z" fill="%23dc2626"/><path d="M220 160 L225 150 L230 160 L225 170 Z" fill="%23dc2626"/><rect x="180" y="190" width="40" height="30" fill="%231e293b" rx="2"/><rect x="190" y="200" width="20" height="15" fill="%23ef4444"/><circle cx="200" cy="207" r="2" fill="%23fbbf24"/></svg>');
    background-size: cover;
    background-position: center;
    color: white;
}

/* Ajustar el texto para que sea legible sobre las imágenes de fondo */
.project-card {
    position: relative;
    overflow: hidden;
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.project-card > * {
    position: relative;
    z-index: 2;
}

.project-card .project-title {
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.project-card .project-description {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.project-card .project-link {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
}

.project-card .project-link:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateX(5px);
}

.project-card .project-link svg {
    fill: white;
}