/* Radio ISA — paleta heredada del logotipo de la iglesia */ /* Radio ISA — paleta heredada del logotipo de la iglesia. Tema claro por defecto; el oscuro entra con data-theme="dark" en . */ :root { --profundo: #26134b; --acento-fijo: #6098cc; /* Tema claro */ --shade: #ffffff; --superficie: #f4f6fa; --elevado: #e8edf5; --panel: rgba(38, 19, 75, 0.04); --barra: rgba(255, 255, 255, 0.9); --linea: rgba(38, 19, 75, 0.14); --texto: #16112c; --tenue: #575c7d; --acento: #2f6fb0; --acento-oscuro: #24568a; --aire: #1f9d5c; --velo-1: rgba(96, 152, 204, 0.14); --velo-2: rgba(38, 19, 75, 0.07); --radio: 18px; color-scheme: light; } [data-theme="dark"] { --shade: #0a0618; --superficie: #120c26; --elevado: #1b1236; --panel: rgba(18, 12, 38, 0.55); --barra: rgba(10, 6, 24, 0.88); --linea: rgba(96, 152, 204, 0.18); --texto: #f4f6fb; --tenue: #a6adc6; --acento: #6098cc; --acento-oscuro: #4581c4; --aire: #35d07f; --velo-1: rgba(38, 19, 75, 0.85); --velo-2: rgba(96, 152, 204, 0.16); color-scheme: dark; } /* La transición se activa recién al primer cambio, para no animar la carga */ html.tema-anim body { transition: background-color 0.3s ease, color 0.3s ease; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; overflow-wrap: break-word; background: var(--shade); color: var(--texto); font-family: Inter, ui-sans-serif, system-ui, sans-serif; line-height: 1.6; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3 { font-family: Archivo, ui-sans-serif, system-ui, sans-serif; font-weight: 700; line-height: 1.02; letter-spacing: -0.01em; text-transform: uppercase; margin: 0; } .eyebrow { font-family: Archivo, sans-serif; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--acento); margin: 0; display: flex; align-items: center; gap: 0.6rem; } /* ---------- Barra superior ---------- */ .barra { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 1.2rem; background: var(--barra); backdrop-filter: blur(14px); border-bottom: 1px solid var(--linea); } .marca { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; min-width: 0; } .marca-emblema { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(96,152,204,0.35)); } .pie-titulo { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--acento); margin: 0 0 0.2rem; } .marca-texto { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; } .marca-texto strong { font-family: Orbitron, sans-serif; font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; } .marca-texto small { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tenue); } .barra-nav { display: flex; gap: 1.3rem; } .barra-nav a { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--texto) 72%, transparent); text-decoration: none; transition: color 0.25s; } .barra-nav a:hover { color: var(--acento); } /* ---------- Reproductor ---------- */ .vivo { position: relative; padding: 3.5rem 1.2rem 4rem; background: radial-gradient(1100px 480px at 15% -10%, var(--velo-1), transparent 70%), radial-gradient(800px 420px at 90% 10%, var(--velo-2), transparent 70%); border-bottom: 1px solid var(--linea); } .vivo-inner { max-width: 900px; margin: 0 auto; } .punto { width: 9px; height: 9px; border-radius: 999px; background: var(--tenue); display: inline-block; flex: none; } .punto.al-aire { background: var(--aire); animation: latido 2.2s ease-out infinite; } @keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--aire) 55%, transparent); } 60% { box-shadow: 0 0 0 12px transparent; } } .titular { font-size: clamp(2.3rem, 7vw, 4.4rem); margin-top: 1.1rem; } .titular span { color: var(--acento); } .bajada { color: var(--tenue); max-width: 44ch; margin: 1.1rem 0 0; } .reproductor { margin-top: 2.2rem; display: flex; align-items: center; gap: 1.1rem; padding: 1.1rem; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); } .caratula { width: 76px; height: 76px; flex: none; border-radius: 12px; object-fit: cover; border: 1px solid var(--linea); background: var(--elevado); } .reproductor-info { flex: 1; min-width: 0; } .etiqueta { margin: 0; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--acento); } .cancion { margin: 0.35rem 0 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oyentes { margin: 0.2rem 0 0; font-size: 0.8rem; color: var(--tenue); } .boton-play { width: 62px; height: 62px; flex: none; border: none; border-radius: 999px; cursor: pointer; background: var(--acento); color: var(--shade); display: grid; place-items: center; transition: background 0.25s, transform 0.25s; } .boton-play:hover { background: var(--texto); transform: scale(1.04); } .boton-play svg { width: 24px; height: 24px; fill: currentColor; grid-area: 1/1; } .icono-pausa, .cargando { display: none; } .boton-play[data-estado="sonando"] .icono-play { display: none; } .boton-play[data-estado="sonando"] .icono-pausa { display: block; } .boton-play[data-estado="cargando"] .icono-play, .boton-play[data-estado="cargando"] .icono-pausa { display: none; } .boton-play[data-estado="cargando"] .cargando { display: block; grid-area: 1/1; width: 22px; height: 22px; border-radius: 999px; border: 2px solid currentColor; border-top-color: transparent; animation: girar 0.8s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } .volumen { display: flex; align-items: center; gap: 0.7rem; margin-top: 1rem; max-width: 260px; } .volumen svg { width: 18px; height: 18px; fill: none; stroke: var(--tenue); stroke-width: 1.6; stroke-linecap: round; } .volumen input { width: 100%; accent-color: var(--acento); } .aviso { color: var(--acento); font-size: 0.85rem; margin-top: 0.9rem; } /* ---------- Secciones ---------- */ .seccion { max-width: 1100px; margin: 0 auto; padding: 3.5rem 1.2rem; } .seccion-cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.8rem; } .seccion h2 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); margin-top: 0.7rem; } .dia-actual { color: var(--tenue); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em; margin: 0; } .nota { color: var(--tenue); font-size: 0.8rem; margin-top: 1.5rem; } /* ---------- Parrilla ---------- */ .parrilla { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; } .bloque { display: grid; grid-template-columns: 6.5rem 1fr auto; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--linea); border-radius: 14px; background: var(--panel); transition: border-color 0.25s, background 0.25s; } .bloque:hover { border-color: color-mix(in srgb, var(--texto) 28%, transparent); } .bloque.pasado { opacity: 0.45; } .bloque.ahora { border-color: rgba(96, 152, 204, 0.55); background: rgba(96, 152, 204, 0.12); } .bloque-hora { font-family: Archivo, sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; } .bloque-titulo { font-family: Archivo, sans-serif; font-weight: 700; text-transform: uppercase; font-size: 1.02rem; } .bloque-detalle { color: var(--tenue); font-size: 0.85rem; margin-top: 0.15rem; } .insignia { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.35rem 0.7rem; border-radius: 999px; white-space: nowrap; border: 1px solid var(--linea); color: var(--tenue); } .insignia.envivo { background: var(--aire); color: #ffffff; border-color: transparent; } .insignia.ahora { background: var(--acento); color: var(--shade); border-color: transparent; } .bloque.continuo { border-style: dashed; background: transparent; } .bloque.continuo .bloque-hora { color: var(--tenue); font-size: 0.85rem; letter-spacing: 0.12em; } .nota a { color: var(--acento); } /* ---------- Tarjeta "al aire" ---------- */ .tarjeta-aire { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.8rem; border: 1px solid rgba(96, 152, 204, 0.45); border-radius: var(--radio); background: linear-gradient(120deg, color-mix(in srgb, var(--acento) 12%, transparent), var(--superficie)); } .tarjeta-aire h3 { font-size: clamp(1.3rem, 3.2vw, 1.9rem); } .tarjeta-aire p { color: var(--tenue); margin: 0.8rem 0 0; max-width: 52ch; } .chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.2rem 0 0; padding: 0; } .chips li { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--linea); color: var(--acento); } /* Ondas animadas */ .tarjeta-aire-marca { display: flex; align-items: flex-end; gap: 6px; height: 74px; flex: none; } .onda { width: 8px; border-radius: 999px; background: var(--acento); height: 100%; transform-origin: bottom; animation: onda 1.1s ease-in-out infinite; } .onda:nth-child(2) { animation-duration: 1.5s; animation-delay: 0.18s; opacity: 0.85; } .onda:nth-child(3) { animation-duration: 0.85s; animation-delay: 0.32s; opacity: 0.7; } .onda:nth-child(4) { animation-duration: 1.3s; animation-delay: 0.1s; opacity: 0.55; } @keyframes onda { 0%, 100% { transform: scaleY(0.28); } 50% { transform: scaleY(1); } } .subtitulo { font-size: 0.72rem; letter-spacing: 0.24em; color: var(--tenue); margin: 2.4rem 0 1rem; } /* ---------- Tarjetas de "cómo escuchar" ---------- */ .tarjetas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .tarjeta { border: 1px solid var(--linea); border-radius: 14px; padding: 1.4rem; background: var(--panel); display: flex; flex-direction: column; } .tarjeta h3 { font-size: 1.05rem; } .tarjeta p { color: var(--tenue); font-size: 0.88rem; margin: 0.7rem 0 0; flex: 1; } .codigo { display: block; margin-top: 0.9rem; padding: 0.65rem 0.8rem; background: var(--shade); border: 1px solid var(--linea); border-radius: 9px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; color: var(--acento); overflow-x: auto; white-space: nowrap; } .enlace-accion { margin-top: 1rem; align-self: flex-start; font-family: inherit; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.65rem 1.2rem; border-radius: 999px; border: 1px solid var(--linea); background: transparent; color: var(--texto); text-decoration: none; cursor: pointer; transition: border-color 0.25s, color 0.25s; } .enlace-accion:hover { border-color: var(--acento); color: var(--acento); } @media (max-width: 640px) { .tarjeta-aire { flex-direction: column; align-items: flex-start; gap: 1.4rem; } .tarjeta-aire-marca { height: 54px; } } /* ---------- Noticias ---------- */ .noticias { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); } .noticia { display: flex; flex-direction: column; border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; background: var(--panel); text-decoration: none; transition: border-color 0.25s, transform 0.25s; } .noticia:hover { border-color: color-mix(in srgb, var(--texto) 28%, transparent); transform: translateY(-2px); } .noticia-img { width: 100%; height: 158px; object-fit: cover; background: var(--elevado); } .noticia-cuerpo { padding: 1.1rem; display: flex; flex-direction: column; flex: 1; } .noticia-meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; } .noticia-fuente { color: var(--acento); font-weight: 700; } .noticia-fecha { color: var(--tenue); } .noticia-titulo { font-family: Archivo, sans-serif; font-weight: 700; font-size: 1.02rem; line-height: 1.25; margin: 0.7rem 0 0; } .noticia-resumen { color: var(--tenue); font-size: 0.86rem; margin: 0.55rem 0 0; flex: 1; } .noticia-leer { margin-top: 0.9rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--acento); } .cargador { color: var(--tenue); } /* ---------- Pie ---------- */ .pie { border-top: 1px solid var(--linea); padding: 2.5rem 1.2rem; } .pie-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .pie-marca { margin: 0; font-family: Orbitron, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.85rem; } .pie-texto { color: var(--tenue); font-size: 0.85rem; margin: 0.6rem 0 0; } .pie-enlaces { display: flex; flex-direction: column; gap: 0.5rem; } .pie-enlaces a { color: var(--tenue); font-size: 0.85rem; text-decoration: none; transition: color 0.25s; } .pie-enlaces a:hover { color: var(--acento); } .pie-credito { max-width: 1100px; margin: 2rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--linea); } .pie-credito a { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--tenue); font-size: 0.75rem; text-decoration: none; transition: color 0.25s; } .pie-credito a:hover { color: var(--acento); } .pie-credito img { width: 26px; height: 26px; border-radius: 7px; } @media (max-width: 640px) { .bloque { grid-template-columns: 5rem 1fr; } .bloque .insignia { grid-column: 2; justify-self: start; } .barra-nav { gap: 0.9rem; } .barra-nav a { font-size: 0.65rem; } .reproductor { flex-wrap: wrap; } .reproductor-info { order: 3; width: 100%; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .punto.al-aire, .cargando, .onda { animation: none; } .noticia:hover, .boton-play:hover { transform: none; } } /* ---------- Botón de tema ---------- */ .boton-tema { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 1px solid var(--linea); border-radius: 999px; background: transparent; color: var(--texto); cursor: pointer; transition: border-color 0.25s, color 0.25s; } .boton-tema:hover { border-color: var(--acento); color: var(--acento); } .boton-tema svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; } .boton-tema .icono-sol { display: none; } [data-theme="dark"] .boton-tema .icono-sol { display: block; } [data-theme="dark"] .boton-tema .icono-luna { display: none; } .barra-derecha { display: flex; align-items: center; gap: 1rem; } @media (prefers-reduced-motion: reduce) { html.tema-anim body { transition: none; } } /* ---------- Móvil ---------- */ /* Hasta 900px la barra pasa a dos filas: marca y tema arriba, menú abajo. "display: contents" deja que los hijos de .barra-derecha se ordenen como si fueran hijos directos de la barra, sin tocar el HTML. */ @media (max-width: 900px) { .barra { flex-wrap: wrap; row-gap: 0.55rem; padding: 0.7rem 1rem; } .barra-derecha { display: contents; } .marca { order: 1; flex: 1 1 auto; } .boton-tema { order: 2; } .barra-nav { order: 3; width: 100%; gap: 1.1rem; padding-top: 0.6rem; border-top: 1px solid var(--linea); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .barra-nav::-webkit-scrollbar { display: none; } .barra-nav a { white-space: nowrap; } } @media (max-width: 560px) { .seccion { padding: 2.6rem 1rem; } .vivo { padding: 2.6rem 1rem 3rem; } .pie { padding: 2rem 1rem; } .marca-emblema { width: 34px; height: 34px; } .marca-texto strong { font-size: 0.82rem; letter-spacing: 0.08em; } .marca-texto small { font-size: 0.52rem; letter-spacing: 0.16em; } .bajada { font-size: 0.95rem; } /* El reproductor se ordena en dos filas para que el título respire */ .reproductor { gap: 0.9rem; padding: 0.9rem; } .caratula { width: 60px; height: 60px; } .boton-play { width: 54px; height: 54px; } .seccion-cabecera { margin-bottom: 1.3rem; } .subtitulo { margin: 1.8rem 0 0.8rem; } .bloque { padding: 0.9rem 1rem; gap: 0.75rem; } .bloque-hora { font-size: 0.95rem; } .bloque-titulo { font-size: 0.95rem; } .bloque-detalle { font-size: 0.8rem; } .tarjeta-aire { padding: 1.3rem; } .tarjeta { padding: 1.15rem; } .noticia-img { height: 140px; } .volumen { max-width: none; } } /* Teléfonos angostos: el subtítulo de la marca es demasiado largo */ @media (max-width: 380px) { .marca-texto small { display: none; } .chips li { font-size: 0.56rem; padding: 0.35rem 0.65rem; } }