* {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

        }



        .footer-section {

            width: 100vw;

            background: linear-gradient(135deg, #1a2a6c, #2c3e8f, #4a6fc1);

            color: white;

            padding: 60px 20px 30px;

            position: relative;

            overflow: hidden;

        }



        .footer-section::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%231a2a6c" fill-opacity="0.2" d="M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,192C672,181,768,139,864,138.7C960,139,1056,181,1152,197.3C1248,213,1344,203,1392,197.3L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');

            background-size: cover;

            background-position: center;

            z-index: 0;

        }



        .footer-container {

            max-width: 1200px;

            margin: 0 auto;

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

            gap: 40px;

            position: relative;

            z-index: 1;

        }



        .footer-info {

            display: flex;

            flex-direction: column;

        }



        .footer-logo {

            margin-bottom: 25px;

        }



        .footer-logo h2 {

            font-size: 2rem;

            margin-bottom: 10px;

            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);

        }



        .footer-logo h3 {

            font-size: 1.5rem;

            color: #a3c4ff;

            font-weight: 500;

            margin-bottom: 5px;

        }



        .footer-divider {

            width: 80px;

            height: 4px;

            background: linear-gradient(to right, #ff7e5f, #feb47b);

            margin: 15px 0;

            border-radius: 2px;

        }



        .contact-info {

            margin-top: 20px;

        }



        .contact-item {

            display: flex;

            align-items: flex-start;

            margin-bottom: 15px;

        }



        .contact-icon {

            width: 40px;

            height: 40px;

            background: rgba(255, 255, 255, 0.1);

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            margin-right: 15px;

            flex-shrink: 0;

        }



        .contact-text {

            flex: 1;

        }



        .contact-text p {

            margin-bottom: 5px;

            line-height: 1.5;

        }



        .footer-links {

            display: flex;

            flex-direction: column;

        }



        .links-title {

            font-size: 1.5rem;

            margin-bottom: 25px;

            position: relative;

            padding-bottom: 10px;

        }



        .links-title::after {

            content: '';

            position: absolute;

            bottom: 0;

            left: 0;

            width: 50px;

            height: 3px;

            background: #feb47b;

            border-radius: 2px;

        }



        .social-links {

            display: flex;

            gap: 15px;

            margin-bottom: 30px;

        }



        .social-link {

            width: 50px;

            height: 50px;

            background: rgba(255, 255, 255, 0.1);

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 1.3rem;

            transition: all 0.3s ease;

            color: white;

            text-decoration: none;

        }



        .social-link:hover {

            background: #feb47b;

            transform: translateY(-5px);

        }



        .website-links {

            display: flex;

            flex-direction: column;

            gap: 12px;

        }



        .website-link {

            color: #a3c4ff;

            text-decoration: none;

            display: flex;

            align-items: center;

            transition: all 0.3s ease;

            padding: 8px 0;

            border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        }



        .website-link i {

            margin-right: 10px;

            font-size: 1.1rem;

        }



        .website-link:hover {

            color: #feb47b;

            transform: translateX(5px);

        }



        .footer-media {

            display: flex;

            flex-direction: column;

        }



        .media-title {

            font-size: 1.5rem;

            margin-bottom: 25px;

            position: relative;

            padding-bottom: 10px;

        }



        .media-title::after {

            content: '';

            position: absolute;

            bottom: 0;

            left: 0;

            width: 50px;

            height: 3px;

            background: #feb47b;

            border-radius: 2px;

        }



        .media-container {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 20px;

        }



        .media-item {

            border-radius: 10px;

            overflow: hidden;

            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);

            transition: transform 0.3s ease;

            height: 180px;

            position: relative;

        }



        .media-item:hover {

            transform: translateY(-5px);

        }



        .map-placeholder, .infra-placeholder {

            width: 100%;

            height: 100%;

            background: rgba(255, 255, 255, 0.1);

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            text-align: center;

            padding: 15px;

        }



        .map-placeholder i, .infra-placeholder i {

            font-size: 2.5rem;

            margin-bottom: 10px;

            color: #a3c4ff;

        }



        .media-label {

            font-size: 0.9rem;

            color: #a3c4ff;

        }



        .footer-bottom {

            max-width: 1200px;

            margin: 50px auto 0;

            padding-top: 20px;

            border-top: 1px solid rgba(255, 255, 255, 0.1);

            text-align: center;

            position: relative;

            z-index: 1;

            font-size: 0.9rem;

            color: #a3c4ff;

        }



        /* Responsive */

        @media (max-width: 992px) {

            .footer-container {

                grid-template-columns: 1fr 1fr;

            }

            

            .footer-media {

                grid-column: span 2;

            }

        }



        @media (max-width: 768px) {

            .footer-container {

                grid-template-columns: 1fr;

                gap: 30px;

            }

            

            .footer-media {

                grid-column: span 1;

            }

            

            .media-container {

                grid-template-columns: 1fr;

            }

            

            .media-item {

                height: 200px;

            }

        }



        @media (max-width: 480px) {

            .footer-section {

                padding: 40px 15px 20px;

            }

            

            .footer-logo h2 {

                font-size: 1.7rem;

            }

            

            .footer-logo h3 {

                font-size: 1.3rem;

            }

            

            .social-links {

                justify-content: center;

            }

        }



        /* Animaciones */

        @keyframes fadeInUp {

            from {

                opacity: 0;

                transform: translateY(30px);

            }

            to {

                opacity: 1;

                transform: translateY(0);

            }

        }



        .footer-info, .footer-links, .footer-media {

            animation: fadeInUp 0.6s ease forwards;

            opacity: 0;

        }



        .footer-links {

            animation-delay: 0.2s;

        }



        .footer-media {

            animation-delay: 0.4s;

        }






                .iframe-container {
            position: relative;
            width: 100%;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
            background: white;
            padding: 8px;
        }

        .iframe-wrapper {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
            border-radius: 15px;
            overflow: hidden;
        }

        .iframe-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 12px;
        }

        /* Efectos adicionales */
        .iframe-container::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
            border-radius: 22px;
            z-index: -1;
            animation: borderGlow 3s ease infinite;
        }

        @keyframes borderGlow {
            0%, 100% { opacity: 0.8; }
            50% { opacity: 0.4; }
        }

        /* Responsive para móviles */
        @media (max-width: 768px) {
            .title h1 {
                font-size: 2rem;
            }
            
            .title p {
                font-size: 1rem;
            }
            
            .iframe-container {
                border-radius: 15px;
                padding: 6px;
            }
            
            .iframe-wrapper {
                border-radius: 12px;
            }
        }

        @media (max-width: 480px) {
            .title h1 {
                font-size: 1.7rem;
            }
            
            .iframe-container {
                border-radius: 12px;
                padding: 4px;
            }
            
            .iframe-wrapper {
                border-radius: 10px;
            }
        }