entrada 2
asdfasdfgsdgv fdgfdsgvfdvbfdsvdfvdfscdfsvfdvfdvfdvfdvfdv
Entrada 1
<div class=”canelaradio-player”> <!– ========================================== REPRODUCTOR =========================================== –> <div class=”cr-main”> <div class=”cr-live”> <span class=”cr-live-dot”></span> AL AIRE AHORA </div> <div class=”cr-player-content”> <button class=”cr-play-button” id=”crPlayButton” type=”button” aria-label=”Reproducir” > <span class=”cr-play-icon”>▶</span> <span class=”cr-pause-icon”>❚❚</span> </button> <div class=”cr-info”> <h2 id=”crStationName”> Pichincha 106.5 FM </h2> <p id=”crProgram”> Radiación Temprana </p> <p class=”cr-frequency” id=”crFrequency” > Pichincha 106.5 FM </p> </div> <div class=”cr-volume”> <span class=”cr-volume-icon”> 🔊 </span> <input type=”range” id=”crVolume” min=”0″ max=”1″ step=”0.01″ value=”1″ aria-label=”Volumen” > </div> </div> <div class=”cr-status” id=”crStatus” > Presiona ▶ para escuchar </div> <audio id=”crAudio” preload=”none” ></audio> </div> <!– ========================================== EMISORAS =========================================== –> <div class=”cr-selector”> <div class=”cr-selector-title”> ELIGE TU EMISORA <span>→</span> </div> <div class=”cr-carousel-wrapper”> <button class=”cr-arrow cr-arrow-left” id=”crPrev” type=”button” aria-label=”Emisora anterior” > ‹ </button> <div class=”cr-stations” id=”crStations” ></div> <button class=”cr-arrow cr-arrow-right” id=”crNext” type=”button” aria-label=”Siguiente emisora” > › </button> </div> </div> </div> <style> /* ========================================================= CANELA RADIO ESTILOS GENERALES ========================================================= */ .canelaradio-player { –cr-green: #073f2d; –cr-green-light: #0b523b; –cr-orange: #f5a623; –cr-orange-light: #ffd89c; width: 100vw; max-width: 100vw; /* * ESTA ES LA CLAVE PARA SALIR * DEL CONTENEDOR DE ELEMENTOR */ margin-left: calc(50% – 50vw); margin-right: calc(50% – 50vw); padding: 40px 5%; background: #f5a623; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; overflow: hidden; } /* ========================================================= BOX SIZING ========================================================= */ .canelaradio-player *, .canelaradio-player *::before, .canelaradio-player *::after { box-sizing: border-box; } /* ========================================================= REPRODUCTOR PRINCIPAL ========================================================= */ .cr-main { width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; padding: 28px 32px 22px; background: var(–cr-green); border-radius: 22px; color: white; box-shadow: 0 12px 30px rgba(0,0,0,.10); } /* ========================================================= AL AIRE ========================================================= */ .cr-live { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; color: #e8eee9; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; } .cr-live-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #ff594f; box-shadow: 0 0 0 4px rgba(255,89,79,.12); animation: crPulse 1.7s infinite; } @keyframes crPulse { 0% { box-shadow: 0 0 0 0 rgba(255,89,79,.45); } 70% { box-shadow: 0 0 0 7px rgba(255,89,79,0); } 100% { box-shadow: 0 0 0 0 rgba(255,89,79,0); } } /* ========================================================= CONTENIDO PRINCIPAL ========================================================= */ .cr-player-content { width: 100%; display: flex; align-items: center; gap: 22px; min-width: 0; } /* ========================================================= PLAY ========================================================= */ .cr-play-button { width: 64px; height: 64px; min-width: 64px; flex: 0 0 64px; border: none; border-radius: 50%; padding: 0; background: #f15b3a; color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 23px; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; } .cr-play-button:hover { transform: scale(1.06); background: #ff6845; box-shadow: 0 7px 18px rgba(0,0,0,.18); } .cr-play-icon { display: block; margin-left: 4px; } .cr-pause-icon { display: none; font-size: 17px; } .cr-play-button.playing .cr-play-icon { display: none; } .cr-play-button.playing .cr-pause-icon { display: block; } /* ========================================================= INFORMACIÓN ========================================================= */ .cr-info { flex: 1 1 auto; width: 0; min-width: 0; overflow: hidden; } .cr-info h2 { margin: 0 0 6px; padding: 0; color: white; font-size: 27px; line-height: 1.15; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cr-info p { margin: 0; padding: 0; } #crProgram { color: rgba(255,255,255,.82); font-size: 14px; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cr-frequency { color: rgba(255,255,255,.58); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ========================================================= VOLUMEN ========================================================= */ .cr-volume { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; } .cr-volume-icon { font-size: 18px; } .cr-volume input { width: 100px; max-width: 100px; accent-color: var(–cr-orange); cursor: pointer; } /* ========================================================= ESTADO ========================================================= */ .cr-status { margin-top: 18px; color: rgba(255,255,255,.55); font-size: 12px; } .cr-status.playing { color: #a8e4c5; } /* ========================================================= AUDIO ========================================================= */ #crAudio { display: none; } /* ========================================================= SELECTOR ========================================================= */ .cr-selector { width: 100%; max-width: 1400px; margin: 22px auto 0; } .cr-selector-title { margin-bottom: 12px; color: #17352c; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; } .cr-selector-title span { color: var(–cr-orange); margin-left: 3px; } /* ========================================================= CARRUSEL ========================================================= */ .cr-carousel-wrapper { width: 100%; min-width: 0; display: flex; align-items: center; gap: 8px; } .cr-stations { width: 0; min-width: 0; flex: 1 1 auto; display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 3px 2px 8px; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .cr-stations::-webkit-scrollbar { display: none; } /* ========================================================= BOTONES EMISORAS ========================================================= */ .cr-station { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 12px 20px; border: none; border-radius: 30px; background: #ffe2b4; color: #49331d; font-family: Arial, Helvetica, sans-serif; font-size: 13px; white-space: nowrap; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; } .cr-station span { font-weight: 600; } .cr-station strong { font-weight: 800; } .cr-station:hover { background: #ffd397; transform: translateY(-2px); } .cr-station.active { background: var(–cr-green); color: white; } /* ========================================================= FLECHAS ========================================================= */ .cr-arrow { width: 36px; height: 36px; min-width: 36px; flex: 0 0 36px; border: none; border-radius: 50%; background: var(–cr-green); color: white; display: flex; align-items: center; justify-content: center; font-size: 23px; line-height: 1; cursor: pointer; } .cr-arrow:hover { background: var(–cr-green-light); } /* ========================================================= TABLET ========================================================= */ @media only screen and (max-width: 767px) { /* * FULL WIDTH REAL EN MÓVIL * * El reproductor sale del contenedor * limitado de Elementor. */ .canelaradio-player { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% – 50vw) !important; margin-right: calc(50% – 50vw) !important; padding: 24px 16px !important; overflow: hidden !important; box-sizing: border-box !important; } /* * PLAYER INTERNO */ .cr-main { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 24px 20px 18px; border-radius: 18px; } /* * CONTENIDO */ .cr-player-content { width: 100%; min-width: 0; gap: 14px; } /* * PLAY */ .cr-play-button { width: 58px; height: 58px; min-width: 58px; flex: 0 0 58px; font-size: 19px; } /* * INFORMACIÓN */ .cr-info { width: 0; min-width: 0; flex: 1 1 auto; overflow: hidden; } .cr-info h2 { font-size: 21px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #crProgram { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cr-frequency { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* * OCULTAR VOLUMEN EN CELULAR */ .cr-volume { display: none; } /* * ESTADO */ .cr-status { margin-top: 15px; font-size: 11px; } /* * SELECTOR */ .cr-selector { width: 100%; max-width: none; margin: 20px 0 0; } /* * CARRUSEL */ .cr-carousel-wrapper { width: 100%; min-width: 0; } .cr-stations { width: 0; min-width: 0; flex: 1 1 auto; gap: 8px; overflow-x: