/* ============================================================ * REDISEÑO 2026 — hoja de estilos de vista previa * Todo lo que hay aquí SOLO se aplica cuando el tiene la * clase .preview-2026 (activada con ?preview=2026) * Verificado contra código real del artefacto + capturas de pantalla. * ============================================================ */ /* ---------- Tokens base ---------- */ body.preview-2026 { --naranja-2026: #FF5533; --tinta-2026: #1E1E1E; --fondo-2026: #F2F2F2; --morado-oscuro-2026: #55226A; --font-mono: 'Atkinson Hyperlegible Mono', monospace; --font-body-2026: 'Atkinson Hyperlegible', sans-serif; background: var(--fondo-2026); } /* ---------- Botones ---------- Regla de contraste confirmada por captura: el botón principal usa el color que NO sea el del fondo de la sección donde está — nunca el mismo tono sobre sí mismo. Por eso hay una variante --sobre-naranja y --sobre-morado, además de la normal. */ body.preview-2026 .btn { border-radius: 999px; min-height: 56px; padding: 16px 38px; font-family: var(--font-body-2026); font-weight: 700; font-size: 18px; letter-spacing: -0.005em; border: none; display: inline-flex; align-items: center; justify-content: center; transition: background 0.16s, color 0.16s; } body.preview-2026 .btn--primary { background: var(--naranja-2026); color: #FFFFFF; } body.preview-2026 .btn--primary:hover { background: #6A2B85; } /* Sobre fondo naranja (hero) — el primario pasa a morado */ body.preview-2026 .hero .btn--primary, body.preview-2026 [style*="background: #FF5533"] .btn--primary { background: #6A2B85; } body.preview-2026 .hero .btn--primary:hover { background: var(--naranja-2026); } body.preview-2026 .btn--outline { background: transparent; color: var(--tinta-2026); border: 3px solid var(--tinta-2026); padding: 13px 35px; } body.preview-2026 .btn--outline:hover { background: var(--tinta-2026); color: #FFFFFF; } /* Outline sobre fondo naranja (hero) — se queda en blanco, no en tinta */ body.preview-2026 .hero .btn--outline { color: #FFFFFF; border-color: #FFFFFF; } body.preview-2026 .hero .btn--outline:hover { background: #FFFFFF; color: var(--naranja-2026); } /* ---------- Badges / stickers ---------- */ body.preview-2026 .sticker { font-family: var(--font-mono); font-weight: 500; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 999px; padding: 8px 18px; border: none; } body.preview-2026 .sticker--naranja { background: var(--naranja-2026); color: #FFFFFF; } body.preview-2026 .sticker--morado { background: #6A2B85; color: #FFFFFF; } body.preview-2026 .sticker--blanco { background: #FFFFFF; color: var(--tinta-2026); border: 2px solid var(--tinta-2026); } body.preview-2026 .sticker--directo { display: inline-flex; align-items: center; gap: 9px; } body.preview-2026 .sticker--directo::before { content: ''; width: 9px; height: 9px; border-radius: 999px; background: currentColor; animation: tf-blink 1.1s steps(1) infinite; } @keyframes tf-blink { 50% { opacity: 0.2; } } /* ---------- Barra de frecuencia (NUEVA — ver HTML abajo) ---------- */ body.preview-2026 .freq-bar { background: #6A2B85; color: #FFFFFF; padding: 12px 40px; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; } body.preview-2026 .freq-bar__dot { display: inline-flex; align-items: center; gap: 9px; } body.preview-2026 .freq-bar__dot::before { content: ''; width: 9px; height: 9px; border-radius: 999px; background: var(--naranja-2026); animation: tf-blink 1.1s steps(1) infinite; } body.preview-2026 .freq-bar__detail { color: rgba(255,255,255,0.75); } /* ---------- Header ---------- */ body.preview-2026 .site-header { position: sticky; top: 0; z-index: 100; background: var(--naranja-2026); border-bottom: 3px solid var(--tinta-2026); padding: 14px 40px; } body.preview-2026 .site-header__logo { font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 700; font-size: 26px; letter-spacing: -0.04em; color: #FFFFFF; } body.preview-2026 .site-nav a { font-family: var(--font-body-2026); font-weight: 700; font-size: 16px; color: #FFFFFF; letter-spacing: -0.005em; border-bottom: 3px solid transparent; padding-bottom: 6px; } body.preview-2026 .site-nav a:hover, body.preview-2026 .site-nav a.is-active { border-bottom-color: #FFFFFF; } body.preview-2026 .site-header__cta { background: #6A2B85; color: #FFFFFF; border: none; } body.preview-2026 .site-header__cta:hover { background: #FFFFFF; color: var(--naranja-2026); } /* Botón "Directo" — confirmado por captura: SIEMPRE tinta oscura, no morado */ body.preview-2026 #player-toggle-header, body.preview-2026 .site-header__directo { background: var(--tinta-2026); color: #FFFFFF; border: none; border-radius: 999px; padding: 14px 26px; font-family: var(--font-body-2026); font-weight: 700; font-size: 17px; display: inline-flex; align-items: center; gap: 10px; } body.preview-2026 .site-header__directo:hover { background: #FFFFFF; color: var(--tinta-2026); } body.preview-2026 .site-header__socials a { color: #FFFFFF; } body.preview-2026 .site-header__socials a:hover { color: var(--tinta-2026); } /* ---------- Reproductor fijo — píldora centrada, confirmado por captura ---------- */ body.preview-2026 .mini-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: transparent; border: none; padding: 14px 40px 18px; } body.preview-2026 .mini-player__inner { display: flex; align-items: center; gap: 22px; max-width: 1280px; margin: 0 auto; background: var(--tinta-2026); border: 3px solid var(--tinta-2026); border-radius: 999px; padding: 12px 26px 12px 12px; box-shadow: 0 8px 0 rgba(0,0,0,0.25); } body.preview-2026 .mini-player__play { width: 68px; height: 68px; border-radius: 999px; background: var(--naranja-2026); color: #FFFFFF; border: none; transition: background 0.16s, color 0.16s; } body.preview-2026 .mini-player__play:hover { background: #FFFFFF; color: var(--naranja-2026); } body.preview-2026 #player-nowplaying { font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.035em; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.preview-2026 .mini-player__volume-slider { accent-color: var(--naranja-2026); } body.preview-2026 .mini-player__equalizer { display: flex; align-items: flex-end; gap: 4px; height: 28px; } body.preview-2026 .mini-player__equalizer span { width: 4px; background: #FFFFFF; border-radius: 2px; height: 6px; } body.preview-2026 .mini-player:has(#player-toggle[aria-pressed="true"]) .mini-player__equalizer span { animation: tf-eq 0.9s ease-in-out infinite; } body.preview-2026 .mini-player__equalizer span:nth-child(1) { animation-delay: 0s; } body.preview-2026 .mini-player__equalizer span:nth-child(2) { animation-delay: 0.2s; } body.preview-2026 .mini-player__equalizer span:nth-child(3) { animation-delay: 0.4s; } @keyframes tf-eq { 0%, 100% { height: 6px; } 50% { height: 26px; } } /* ---------- Cabecera de sección — patrón repetido en todo el sitio: eyebrow mono + h2 gigante + borde inferior negro grueso + enlace naranja ---------- */ body.preview-2026 .section__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; border-bottom: 4px solid var(--tinta-2026); padding-bottom: 18px; margin-bottom: 34px; flex-wrap: wrap; } body.preview-2026 .section__eyebrow { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: #6A2B85; display: block; margin-bottom: 12px; } body.preview-2026 .section__title { margin: 0; font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 700; font-size: 70px; line-height: 0.93; letter-spacing: -0.04em; } body.preview-2026 .section__more { font-family: var(--font-body-2026); font-weight: 700; font-size: 19px; color: var(--naranja-2026); padding-bottom: 8px; } body.preview-2026 .section__more:hover { color: #6A2B85; } /* ---------- Tarjetas de evento (Próximos eventos, Home) ---------- */ body.preview-2026 .event-card { background: #FFFFFF; border: 3px solid var(--tinta-2026); border-radius: 20px; padding: 24px; } body.preview-2026 .event-card__date { background: var(--naranja-2026); color: #FFFFFF; border-radius: 14px; } body.preview-2026 .event-card__type { background: #FFFFFF; border: 2px solid var(--tinta-2026); border-radius: 999px; font-family: var(--font-mono); text-transform: uppercase; } body.preview-2026 .event-card__badge { background: #6A2B85; color: #FFFFFF; font-family: var(--font-mono); text-transform: uppercase; } /* ---------- Tarjetas genéricas blancas (Noticias, Programas...) ---------- */ body.preview-2026 .card, body.preview-2026 .news-card { background: #FFFFFF; border: 3px solid var(--tinta-2026); border-radius: 26px; padding: 28px 30px 30px; } body.preview-2026 .card__badge { background: var(--naranja-2026); color: #FFFFFF; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 999px; padding: 8px 16px; display: inline-block; } body.preview-2026 .card__title { font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -0.035em; } body.preview-2026 .card__date { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: #6A2B85; } /* ---------- "Confían en nosotros" (NUEVO — grid estático, no carrusel, ver nota importante en el mensaje) ---------- */ body.preview-2026 .brands-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; } body.preview-2026 .brands-grid__item { background: #FFFFFF; border: 3px solid var(--tinta-2026); border-radius: 24px; height: 150px; display: flex; align-items: center; justify-content: center; padding: 26px; transition: transform 0.16s; } body.preview-2026 .brands-grid__item:hover { transform: translateY(-6px); } body.preview-2026 .brands-grid__item img { max-width: 100%; max-height: 82px; width: auto; height: auto; object-fit: contain; } body.preview-2026 .brands-grid__cta { cursor: pointer; background: var(--naranja-2026); border: 3px solid var(--tinta-2026); border-radius: 24px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #FFFFFF; text-decoration: none; } body.preview-2026 .brands-grid__cta:hover { background: #6A2B85; } body.preview-2026 .brands-grid__cta-title { font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 700; font-size: 26px; letter-spacing: -0.035em; text-align: center; } body.preview-2026 .brands-grid__cta-sub { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.85); } /* ---------- Banner de anuncio con rayas diagonales ---------- */ body.preview-2026 .ad-banner { background: repeating-linear-gradient(135deg, #FFFFFF 0 22px, #F7F0FA 22px 44px); border: 4px dashed #6A2B85; border-radius: 26px; padding: 34px 38px; } body.preview-2026 .ad-banner:hover { border-color: var(--naranja-2026); } body.preview-2026 .ad-banner__title { font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 700; font-size: 40px; letter-spacing: -0.04em; color: var(--tinta-2026); } /* ---------- Footer ---------- */ body.preview-2026 .site-footer { background: #6A2B85; color: #FFFFFF; padding: 80px 40px 40px; margin-top: 96px; } body.preview-2026 .site-footer__col-title { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--naranja-2026); } body.preview-2026 .site-footer a { color: #FFFFFF; } body.preview-2026 .site-footer a:hover { color: var(--naranja-2026); } body.preview-2026 .site-footer__wordmark { font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 700; font-size: 90px; line-height: 0.9; letter-spacing: -0.04em; } body.preview-2026 .site-footer__legal { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.6); border-top: 2px solid rgba(255,255,255,0.25); }