Spanisch- und ICT-Tools für Lehren und Lernen

.booking-card { display: inline-flex; align-items: center; gap: 20px; background-color: #ffffff; border: 1px solid #e8e8e8; padding: 12px 12px 12px 24px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); font-family: 'Roboto Serif', Georgia, serif; max-width: fit-content; } .select-box { display: flex; flex-direction: column; min-width: 200px; } .select-box label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: #888; margin-bottom: 4px; } .premium-select { appearance: none; -webkit-appearance: none; border: none; background: transparent; font-family: 'Roboto Serif', Georgia, serif; font-size: 16px; font-weight: 400; color: #222; cursor: pointer; padding-right: 35px; outline: none; width: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c22e85' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; } .button-group { display: flex; gap: 12px; } /* ESTILO BASE (BLOQUEADO/INACTIVO) */ .btn-action { text-decoration: none; padding: 14px 24px; border-radius: 8px; font-weight: 600; font-size: 16px; display: flex; align-items: center; white-space: nowrap; transition: all 0.3s ease; background-color: #f9f9f9; color: #d0d0d0; border: 1px solid #eee; pointer-events: none; } /* ACTIVACIÓN BOTÓN MAGENTA */ .btn-main.active { background-color: #c22e85; color: white; border-color: #c22e85; pointer-events: auto; } /* ACTIVACIÓN BOTÓN PROGRAMA */ .btn-outline.active { background-color: transparent; color: #333; border: 1px solid #cccccc; pointer-events: auto; } .btn-main.active:hover { background-color: #a0256d; transform: translateY(-1px); } .btn-outline.active:hover { border-color: #333; background-color: #f9f9f9; } .arrow { margin-left: 8px; font-size: 16px; } @media (max-width: 768px) { .booking-card { flex-direction: column; align-items: stretch; max-width: 100%; padding: 20px; } .button-group { flex-direction: column; } .btn-action { justify-content: center; } } document.addEventListener('DOMContentLoaded', function() { const selector = document.getElementById('duration-select'); const bookBtn = document.getElementById('submit-btn'); const downloadBtn = document.getElementById('download-btn'); // CONFIGURACIÓN DE ENLACES DE RESERVA const bookingLinks = { "1-week": "https://clicih.my.site.com/?serviceintegrationcode=PEPSC31", "2-weeks": "https://clicih.my.site.com/?serviceintegrationcode=PEPSC32" }; selector.addEventListener('change', function() { const selectedValue = this.value; if (bookingLinks[selectedValue]) { // Actualizamos solo el link de reserva bookBtn.href = bookingLinks[selectedValue]; // Activamos ambos botones visualmente bookBtn.classList.add('active'); downloadBtn.classList.add('active'); } }); });