@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
     
     
     body { 
            font-family: 'Segoe UI', sans-serif; 
            /* REEMPLAZA LA URL POR LA DE TU IMAGEN */
            background-image: linear-gradient(rgba(74, 3, 83, 0.308), rgba(0, 0, 0, 0.753)),  url(''); 
            background-size: cover; 
            background-position: center; 
            background-attachment: fixed; /* Esto hace que el fondo se quede quieto al bajar */
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            padding: 40px 20px; 
            margin: 0; 
            min-height: 100vh;
        }
        
        /* Switch de Moneda */
        .currency-switch { margin-bottom: 40px; display: flex; align-items: center; gap: 15px; background: #fff; padding: 12px 25px; border-radius: 50px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
        .switch { position: relative; display: inline-block; width: 55px; height: 28px; }
        .switch input { opacity: 0; width: 0; height: 0; }
        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #05d44a; transition: .4s; border-radius: 34px; }
        .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
        input:checked + .slider:before { transform: translateX(27px); }
        input:not(:checked) + .slider { background-color: #666; }

        /* Contenedor en Fila */
        .pricing-container { display: flex; flex-direction: row; gap: 20px; justify-content: center; width: 100%; max-width: 1100px; margin-bottom: 50px; }
        
        .plan-card { background: #dfedff; border-radius: 20px; padding: 30px; flex: 1; min-width: 250px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.05); border: 1px solid #eee; display: flex; flex-direction: column; }
        .plan-card.android-plan { border: 2px solid #d41616; background: #dfedff; transform: scale(1.05); z-index: 1; }
        
        .plan-name { font-size: 1.2rem; color: #555; margin-bottom: 15px; font-weight: bold; }
        .price-display { font-size: 2rem; font-weight: 800; color: #1a1a1a; margin-bottom: 20px; }
        .currency-symbol { font-size: 1.2rem; color: #04cf41; margin-right: 3px; }

        .plan-details { list-style: none; padding: 0; margin-bottom: 25px; text-align: left; flex-grow: 1; }
        .plan-details li { margin: 10px 0; color: #555; font-family: "Roboto", sans-serif; font-size: 1.2rem; display: flex; align-items: center; }
        .plan-details li::before { content: "✔"; color: #20ce20; margin-right: 8px; }

        /* Formulario de WhatsApp */
        .contact-form { background: white; padding: 30px; border-radius: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); width: 100%; max-width: 400px; }
        .contact-form h3 { margin-top: 0; color: #333; text-align: center; }
        input, select, textarea { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box; font-family: inherit; }
        .btn-whatsapp { background-color: #47bb6e; color: white; border: none; padding: 15px; width: 100%; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 1rem; transition: 0.3s; }
        .btn-whatsapp:hover { background-color: #128c7e; }

        h4 {
            color: #555;
            background-color: #dfedff;
            border: 2px solid #2cc72c;
            border-radius: 20px;
            padding: 10px;
            
         
            align-content: center;
        }

        /* Responsive para móviles */
        @media (max-width: 850px) {
            .pricing-container { flex-direction: column; align-items: center; }
            .plan-card { width: 100%; max-width: 350px; }
            .plan-card.android-plan { transform: scale(1); }
        }