:root {
            --azul-oscuro: #18263f;
            --azul-claro: #cfdbeb;
            --azul-logo: #1c1e5d;
            --blanco: #ffffff;
            --texto-oscuro: #2c3e50;
            --texto-claro: #f8f9fa;
            --sombra: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .containerprod {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Sección 1: Título Producto */
        .titulo-producto {
            background: linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul-logo) 100%);
            color: var(--blanco);
            padding: 80px 0;
            text-align: center;
        }
        
        .titulo-producto h1 {
            font-size: 2.8rem;
            color: var(--blanco);
            margin-bottom: 20px;
        }
        
        .titulo-producto p {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto;
        }
        
        /* Sección 2: Introducción */
        .intro-section {
            padding: 80px 0;
            background-color: var(--blanco);
        }
        
        .titulo-introductorio {
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
            align-items: center;
        }
        
        .texto-introductorio {
            flex: 1;
            min-width: 300px;
        }
        
        .texto-introductorio p {
            margin-bottom: 20px;
            font-size: 1.1rem;
            color: var(--texto-oscuro);
        }
        
        .imagen-introductorio {
            flex: 1;
            min-width: 300px;
            height: 400px;
            background-image: url('../webp/productos/Tomografo-Radiologo-latino-operando-tomografo.webp');
            background-size: cover;
            background-position: center;
            border-radius: 10px;
            box-shadow: var(--sombra);
        }
        
        .imagen-resonancia {
            flex: 1;
            min-width: 300px;
            height: 400px;
            background-image: url('../webp/productos/Resonancia-magnetica-Radiologa-latina-explicando-procedimiento-de-resonancia.webp');
            background-size: cover;
            background-position: center;
            border-radius: 10px;
            box-shadow: var(--sombra);
        }
        
        .imagen-rayosx {
            flex: 1;
            min-width: 300px;
            height: 400px;
            background-image: url('../webp/productos/Rayos-X-Posicionando-paciente-frente-a-detector-plano-del-equipo-de-Rayos-X.webp');
            background-size: cover;
            background-position: center;
            border-radius: 10px;
            box-shadow: var(--sombra);
        }
        
        .imagen-camillas {
            flex: 1;
            min-width: 300px;
            height: 400px;
            background-image: url('../webp/productos/Camilla-Cama-hospitalaria-electrica.webp');
            background-size: cover;
            background-position: center;
            border-radius: 10px;
            box-shadow: var(--sombra);
        }
        
        .imagen-mastografia {
            flex: 1;
            min-width: 300px;
            height: 400px;
            background-image: url('../webp/productos/Mastografia-Radióloga-latina-utilizando-un-equipo-de-mastografia.webp');
            background-size: cover;
            background-position: center;
            border-radius: 10px;
            box-shadow: var(--sombra);
        }
        
        /* Sección 3: Ventajas y Características */
        .ventajas-section {
            padding: 80px 0;
            background-color: var(--azul-claro);
        }
        
        .ventajas-section h2 {
            text-align: center;
            font-size: 2.5rem;
            color: var(--azul-oscuro);
        }
        
        .grid-ventajas {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
            margin-top: 40px;
        }
        
        .grid-item {
            background-color: var(--blanco);
            border-radius: 10px;
            padding: 0px;
            box-shadow: var(--sombra);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .grid-item img {
            width: 100%;
            border-radius: 8px;
            height: 250px;
            object-fit: cover;
        }
        
        .grid-item p {
            font-size: 1.1rem;
            color: var(--texto-oscuro);
            padding: 20px;
        }
        
        /* Sección 4: Llamado a la Acción */
        .cta-section {
            padding: 100px 0;
            text-align: center;
            background: linear-gradient(rgba(24, 38, 63, 0.8), rgba(24, 38, 63, 0.8)), url('../originales/Productos/Tomografo-revisando-resultados-de-tomografia.jpg') fixed;
            background-size: cover;
            color: var(--blanco);
            position: relative;
        }
        .Resonancia-section {
            padding: 100px 0;
            text-align: center;
            background: linear-gradient(rgba(24, 38, 63, 0.8), rgba(24, 38, 63, 0.8)), url('../webp/productos/Resonancia-magnetica-Tecnico-JH-Mrdilal-Equipment.webp') fixed;
            background-size: cover;
            color: var(--blanco);
            position: relative;
        }
        .Rayosx-section {
            padding: 100px 0;
            text-align: center;
            background: linear-gradient(rgba(24, 38, 63, 0.8), rgba(24, 38, 63, 0.8)), url('../webp/productos/Rayos-X-JH-Medical-Equipment-mostrando-integracion-PACS.webp') fixed;
            background-size: cover;
            color: var(--blanco);
            position: relative;
        }
        .Camilla-section {
            padding: 100px 0;
            text-align: center;
            background: linear-gradient(rgba(24, 38, 63, 0.8), rgba(24, 38, 63, 0.8)), url('../webp/productos/Camilla-mostrando-control-remoto-de-camas-hospitalarias.webp') fixed;
            background-size: cover;
            color: var(--blanco);
            position: relative;
        }
        .Mastografia-section {
            padding: 100px 0;
            text-align: center;
            background: linear-gradient(rgba(24, 38, 63, 0.8), rgba(24, 38, 63, 0.8)), url('../originales/Productos/Mastografia-Especialista-latino-de-JH-Medical-Equipment-asesorando-a-administradora-de-clinica.jpg') fixed;
            background-size: cover;
            color: var(--blanco);
            position: relative;
        }
        
        .cta-content {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }
        
        .cta-section h3 {
            font-size: 2.2rem;
            color: var(--blanco);
            margin-bottom: 20px;
        }
        
        .cta-section p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            color: var(--blanco);
        }
        
        /* Sección 5: Contacto */
        .contacto-section {
            padding: 80px 0;
            text-align: center;
            background-color: var(--blanco);
        }
        
        .btn-contacto {
            display: inline-block;
            background: linear-gradient(to right, var(--azul-logo), var(--azul-oscuro));
            color: var(--blanco);
            padding: 16px 40px;
            border-radius: 50px;
            text-decoration: none;
            font-size: 1.2rem;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: var(--sombra);
        }
        
        .btn-contacto:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        
        /* Responsive Design */
        @media (max-width: 992px) {
            .grid-ventajas {
                grid-template-columns: 1fr;
            }
            
            .titulo-introductorio {
                flex-direction: column;
            }
            
            .imagen-introductorio {
                width: 100%;
                order: -1;
            }
            
            .imagen-resonancia {
                width: 100%;
                order: -1;
            }
            .imagen-rayosx {
                width: 100%;
                order: -1;
            }
            .imagen-camillas {
                width: 100%;
                order: -1;
            }
            
            .imagen-mastografia {
                width: 100%;
                order: -1;
            }
        }
        
        @media (max-width: 768px) {
            .titulo-producto h1 {
                font-size: 2.2rem;
            }
            
            .ventajas-section h2 {
                font-size: 2rem;
            }
            
            .cta-section h3 {
                font-size: 1.8rem;
            }
            
            .grid-item {
                padding: 20px;
            }
        }
        
        /* Mejoras de accesibilidad */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }
        
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }