/* ==========================================================================
KS Home — plantillas del nuevo home de Konata Station
Tokens tomados del prototipo (prototipo_ks-home.pdf).
========================================================================== */
/* Iconos del player servidos desde el plugin: el modo invitado de LiteSpeed quita los
enlaces a Google Fonts y el player mostraba "volume_up", "expand_more"... como texto. */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
font-display: block;
src: url(fonts/material-icons.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
/* M PLUS Rounded 1c (latín) también desde el plugin, por el mismo motivo. El resto de alfabetos
(p. ej. japonés en títulos de canciones) sigue viniendo de la hoja de Google 'ksh-fonts'. */
@font-face { font-family: 'M PLUS Rounded 1c'; font-style: normal; font-weight: 400; font-display: swap;
src: url(fonts/mplus-rounded-1c-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'M PLUS Rounded 1c'; font-style: normal; font-weight: 400; font-display: swap;
src: url(fonts/mplus-rounded-1c-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'M PLUS Rounded 1c'; font-style: normal; font-weight: 500; font-display: swap;
src: url(fonts/mplus-rounded-1c-500-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'M PLUS Rounded 1c'; font-style: normal; font-weight: 500; font-display: swap;
src: url(fonts/mplus-rounded-1c-500-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'M PLUS Rounded 1c'; font-style: normal; font-weight: 800; font-display: swap;
src: url(fonts/mplus-rounded-1c-800-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'M PLUS Rounded 1c'; font-style: normal; font-weight: 800; font-display: swap;
src: url(fonts/mplus-rounded-1c-800-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* M PLUS Rounded dibuja «…» con los puntos centrados (estilo japonés): ese único carácter sale de una fuente del
sistema, también en el recorte de textos (text-overflow). Si no hay ninguna, se queda el de M PLUS. */
@font-face { font-family: 'KS Puntos'; font-weight: 100 900; unicode-range: U+2026;
src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Roboto'), local('Roboto-Regular'), local('Segoe UI'), local('DejaVu Sans'); }
:root {
--ksh-font: 'KS Puntos', 'M PLUS Rounded 1c', 'Montserrat', system-ui, sans-serif;
--ksh-font-small: Helvetica, Arial, sans-serif;
--ksh-navy: #0d1b2a;
--ksh-navy-2: #1e2e3e;
--ksh-blue: #1e90ff;
--ksh-pink: #ff9adc;
--ksh-gray: #c5c5c5;
--ksh-hero-from: #f5059b;
--ksh-hero-to: #0a2aa0;
--ksh-dot-1: #00ffb1;
--ksh-dot-2: #b166ff;
--ksh-dot-3: #99f6ff;
--ksh-dot-4: #ff9adc;
--ksh-blue-fill: #1468cc; /* fondo azul con texto blanco: 5,4:1 (#1e90ff quedaba a 3,24:1) */
--ksh-focus: #f5059b; /* anillo de foco: 3,5:1 o más sobre todos los fondos (el rosa pastel quedaba a 1,93:1 sobre blanco) */
--ksh-radius: 16px;
--ksh-gap: 16px;
}
/* ---- Tema oscuro (por defecto) ---- */
html[data-ksh-theme="dark"] {
--ksh-bg: var(--ksh-navy);
--ksh-text: #ffffff;
--ksh-muted: rgba(255, 255, 255, .7);
--ksh-footer-bg: var(--ksh-navy-2);
--ksh-divider: var(--ksh-navy-2);
--ksh-ad-bg: var(--ksh-navy-2);
--ksh-thread-bg: var(--ksh-navy-2);
--ksh-round-bg: #ffffff;
--ksh-round-fg: var(--ksh-blue);
--ksh-social: #ffffff;
--ksh-logo-cut: var(--ksh-navy);
--ksh-show-bg: #ffffff; --ksh-show-fg: var(--ksh-navy);
--ksh-show-alt-bg: var(--ksh-navy-2); --ksh-show-alt-fg: #ffffff;
--ksh-day-bg: #ffffff; --ksh-day-fg: var(--ksh-navy);
--ksh-avatar-bg: var(--ksh-navy-2);
--ksh-clock: var(--ksh-pink);
--ksh-notice-bg: var(--ksh-navy-2);
--ksh-bar-bg: var(--ksh-pink);
--ksh-bar-btn-bg: var(--ksh-navy); --ksh-bar-btn-fg: #ffffff;
--ksh-bar-range-fill: var(--ksh-navy); --ksh-bar-range-track: rgba(13, 27, 42, .25);
--ksh-bar-range-thumb: #ffffff; --ksh-bar-range-thumb-border: var(--ksh-navy);
--ksh-card-bg: var(--ksh-navy-2);
--ksh-input-bg: var(--ksh-navy); --ksh-input-border: rgba(255, 255, 255, .42); /* 3:1 (WCAG 1.4.11) */
--ksh-bar-fg: var(--ksh-navy); /* sobre la barra rosa: el blanco quedaba a 1,93:1 */
--ksh-notice-fg: #ffffff; --ksh-ad-fg: #ffffff;
--ksh-tab-on-bg: rgba(255, 154, 220, .16); /* pestaña activa de Comunidad */
--ksh-gold: #facc15; --ksh-silver: #cbd5e1; --ksh-bronze: #e8a46a; /* puestos 1-3 del Top semana */
color-scheme: dark;
}
/* ---- Tema claro ---- */
html[data-ksh-theme="light"] {
--ksh-blue: #1468cc; /* #1e90ff con texto blanco o sobre blanco quedaba a 3,24:1 */
--ksh-bg: #ffffff;
--ksh-text: var(--ksh-navy);
--ksh-muted: rgba(13, 27, 42, .65);
--ksh-footer-bg: #ffffff;
--ksh-divider: #e4e7eb;
--ksh-ad-bg: #f1f4f8; --ksh-ad-fg: rgba(13, 27, 42, .65);
--ksh-thread-bg: #ffffff;
--ksh-round-bg: var(--ksh-navy);
--ksh-round-fg: #ffffff;
--ksh-social: var(--ksh-navy);
--ksh-logo-cut: #ffffff;
--ksh-show-bg: #f1f4f8; --ksh-show-fg: var(--ksh-navy);
--ksh-show-alt-bg: #fde7f3; --ksh-show-alt-fg: var(--ksh-navy);
--ksh-day-bg: var(--ksh-blue); --ksh-day-fg: #ffffff;
--ksh-avatar-bg: #e9ebee;
--ksh-clock: var(--ksh-navy);
--ksh-notice-bg: #f1f4f8; --ksh-notice-fg: var(--ksh-navy);
--ksh-bar-bg: var(--ksh-blue); --ksh-bar-fg: #ffffff;
--ksh-bar-btn-bg: #ffffff; --ksh-bar-btn-fg: var(--ksh-blue);
--ksh-bar-range-fill: #ffffff; --ksh-bar-range-track: rgba(255, 255, 255, .35);
--ksh-bar-range-thumb: var(--ksh-navy); --ksh-bar-range-thumb-border: #ffffff;
--ksh-card-bg: #f1f4f8;
--ksh-input-bg: #ffffff; --ksh-input-border: #74869c; /* 3:1 sobre blanco y sobre #f1f4f8 */
--ksh-tab-on-bg: var(--ksh-show-alt-bg);
--ksh-gold: #a16207; --ksh-silver: #64748b; --ksh-bronze: #9a5b2a; /* 4,5:1 o más sobre blanco y #f1f4f8 */
color-scheme: light;
}
/* ==========================================================================
Base (aislada del tema)
========================================================================== */
html, body.ksh { margin: 0; padding: 0; }
body.ksh {
background: var(--ksh-bg);
color: var(--ksh-text);
font-family: var(--ksh-font);
font-size: 16px;
line-height: 1.4;
-webkit-font-smoothing: antialiased;
transition: background-color .25s ease, color .25s ease;
}
body.ksh *, body.ksh *::before, body.ksh *::after { box-sizing: border-box; }
body.ksh a { color: inherit; text-decoration: none; }
body.ksh img { max-width: 100%; display: block; }
body.ksh h1 { margin: 0; font-family: var(--ksh-font); }
body.ksh ul { list-style: none; margin: 0; padding: 0; }
body.ksh :focus-visible { outline: 2px solid var(--ksh-focus); outline-offset: 3px; border-radius: 6px; }
.ksh-skip {
position: absolute; left: 12px; top: -60px; z-index: 100;
padding: 8px 14px; border-radius: 8px;
background: var(--ksh-pink); color: var(--ksh-navy) !important; font-weight: 800;
}
.ksh-skip:focus { top: 12px; }
.ksh-icon { width: 1em; height: 1em; flex: none; }
/* ==========================================================================
Marca, menú y cabecera
========================================================================== */
.ksh-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ksh-text); }
.ksh-mark { width: 50px; height: auto; color: currentColor; }
.ksh-mark path { fill: currentColor; }
html[data-ksh-theme="light"] .ksh-brand { color: var(--ksh-blue); }
.ksh-brand__text { font-weight: 800; font-size: 13px; line-height: 1.05; letter-spacing: .02em; }
.ksh-topbar {
display: flex; align-items: center; justify-content: space-between; gap: 24px;
padding: 8px 0 24px;
}
.ksh-nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; }
.ksh-nav__list a {
position: relative; display: block; padding: 8px 0;
font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
}
.ksh-nav__list a::after {
content: ''; position: absolute; left: -14px; right: -14px; bottom: -2px; height: 3px;
border-radius: 3px; background: var(--ksh-pink);
transform: scaleX(0); transition: transform .2s ease;
}
.ksh-nav__list a:hover::after,
.ksh-nav__list .current-menu-item > a::after,
.ksh-nav__list .current_page_item > a::after { transform: scaleX(1); }
.ksh-topbar__actions { display: flex; align-items: center; gap: 8px; }
.ksh-round-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
background: var(--ksh-round-bg); color: var(--ksh-round-fg);
font-size: 20px; cursor: pointer; transition: transform .15s ease;
}
.ksh-round-btn:hover { transform: scale(1.06); }
html[data-ksh-theme="dark"] .ksh-theme-btn__moon,
html[data-ksh-theme="light"] .ksh-theme-btn__sun { display: none; }
.ksh-menu-btn { display: none; }
.ksh-menu-btn__close { display: none; }
body.ksh-menu-open .ksh-menu-btn__open { display: none; }
body.ksh-menu-open .ksh-menu-btn__close { display: block; }
/* ==========================================================================
Banner principal
========================================================================== */
.ksh-hero {
display: grid; grid-template-columns: 1fr 1fr;
border-radius: var(--ksh-radius); overflow: hidden;
aspect-ratio: 2.35 / 1;
box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.ksh-hero__media { position: relative; min-height: 0; }
.ksh-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 30%; }
.ksh-hero__panel {
position: relative; display: flex; align-items: center;
padding: 12% 12% 16%;
background: linear-gradient(90deg, var(--ksh-hero-from), var(--ksh-hero-to));
color: #fff;
}
.ksh-hero__title { font-size: clamp(22px, 2.6vw, 38px); font-weight: 800; line-height: 1.25; color: #fff; }
.ksh-hero__dots { position: absolute; top: 6%; left: 50%; display: flex; gap: 4px; transform: translateX(-10%); }
.ksh-hero__dots i { width: 14px; height: 14px; border-radius: 5px; background: var(--ksh-dot-1); }
.ksh-hero__dots i:nth-child(2) { background: var(--ksh-dot-2); }
.ksh-hero__dots i:nth-child(3) { background: var(--ksh-dot-3); }
.ksh-hero__dots i:nth-child(4) { background: var(--ksh-dot-4); }
.ksh-hero__mark { position: absolute; left: 50%; bottom: 7%; width: 44px; color: #fff; --ksh-logo-cut: var(--ksh-hero-to); }
/* ==========================================================================
Publicidad
========================================================================== */
.ksh-ads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 22px; }
.ksh-ad {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
aspect-ratio: 1.1 / 1; overflow: hidden;
background: var(--ksh-ad-bg); color: var(--ksh-ad-fg);
transition: filter .2s ease;
}
a.ksh-ad:hover { filter: brightness(1.08); }
.ksh-ad__icon { width: 34%; height: auto; transform: rotate(-12deg); }
.ksh-ad__label { font-size: 12px; font-weight: 800; letter-spacing: .03em; }
.ksh-ad--filled img { width: 100%; height: 100%; object-fit: cover; }
/* Inicio sin anuncios: un aviso en vez de tres cajas vacías */
.ksh-ad-cta {
display: flex; align-items: center; gap: 16px; margin-top: 22px; padding: 16px 20px;
border: 1px solid var(--ksh-divider); border-radius: var(--ksh-radius); background: var(--ksh-card-bg); color: var(--ksh-text);
transition: border-color .15s ease;
}
.ksh-ad-cta:hover { border-color: var(--ksh-blue); }
.ksh-ad-cta__icon { flex: none; width: 36px; height: 36px; color: var(--ksh-blue); transform: rotate(-12deg); }
.ksh-ad-cta__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ksh-ad-cta__text strong { font-size: 16px; }
.ksh-ad-cta__text span { font-size: 14px; color: var(--ksh-muted); }
.ksh-ad-cta__go { flex: none; margin-left: auto; padding: 8px 16px; border: 2px solid var(--ksh-blue); border-radius: 999px; font-size: 14px; font-weight: 800; }
/* Móvil: el texto se bajaba bajo el icono y el botón quedaba suelto a 52 px; todo apilado y centrado, como la puerta de Discord */
@media (max-width: 560px) { .ksh-ad-cta { flex-direction: column; align-items: center; gap: 10px; text-align: center; } .ksh-ad-cta__text { align-items: center; } .ksh-ad-cta__go { margin-left: 0; } }
/* Presentación del home (texto para buscadores) y H1 oculto a la vista */
.ksh-about { margin-top: 26px; text-align: center; }
.ksh-about p { max-width: 680px; margin: 0 auto; color: var(--ksh-muted); font-size: 14px; line-height: 1.7; }
.ksh-sr-only {
position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
body.ksh .ksh-lead a { color: var(--ksh-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* ==========================================================================
Comunidad y comentarios
========================================================================== */
.ksh-community-pill-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 26px 0 16px; }
.ksh-community-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 16px; border-radius: 8px;
background: linear-gradient(90deg, #d1009f, #8a2be2 55%, #007d62); /* el verde menta dejaba el blanco a 2,2:1 */
color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .02em;
transition: transform .15s ease;
}
.ksh-community-pill .ksh-icon { font-size: 22px; }
/* Blanco fijo sobre los degradados: «body.ksh a { color: inherit }» le daba el azul marino del tema claro */
body.ksh .ksh-community-pill, body.ksh .ksh-community-banner { color: #fff; }
a.ksh-community-pill:hover { transform: translateY(-2px); }
.ksh-community-pill--join { background: var(--ksh-blue-fill); }
.ksh-comments {
position: relative; display: flex; min-height: clamp(460px, 65vh, 640px); overflow: hidden;
border-radius: var(--ksh-radius);
background: var(--ksh-thread-bg);
}
/* Chat de Discord (WidgetBot): ocupa toda la tarjeta. */
.ksh-comments__chat { display: block; flex: 1; width: 100%; min-height: inherit; border: 0; }
.ksh-community-banner {
position: relative; display: flex; align-items: center; justify-content: center; gap: 8px;
min-height: 84px; padding: 16px; border-radius: 12px; overflow: hidden;
background:
linear-gradient(90deg, rgba(0, 125, 98, .88), rgba(138, 43, 226, .88)),
var(--ksh-community-img) center / cover no-repeat;
color: #fff; font-size: 17px; font-weight: 800; letter-spacing: .02em;
text-shadow: 0 1px 4px rgba(0, 0, 0, .3);
transition: transform .15s ease;
}
.ksh-community-banner .ksh-icon { font-size: 26px; }
a.ksh-community-banner:hover { transform: translateY(-2px); }
/* ==========================================================================
Redes y apps
========================================================================== */
.ksh-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ksh-social a { display: inline-flex; color: var(--ksh-social); font-size: 16px; transition: opacity .15s ease, transform .15s ease; }
.ksh-social a:hover { opacity: .8; transform: translateY(-1px); }
.ksh-social--accent a { color: var(--ksh-blue); font-size: 20px; }
.ksh-social--accent { gap: 20px; }
/* ==========================================================================
Player (solo encaje; el componente mantiene su propio estilo)
========================================================================== */
.ksh-player #ksPlayerRoot { background: transparent !important; }
.ksh-player #ks-themeToggle { display: none !important; } /* el cambio de tema vive en la cabecera */
/* ==========================================================================
Pie
========================================================================== */
.ksh-footer { margin-top: 40px; background: var(--ksh-footer-bg); transition: background-color .25s ease; }
html[data-ksh-theme="light"] .ksh-footer { border-top: 2px solid var(--ksh-divider); }
.ksh-footer__inner { max-width: 1040px; margin: 0 auto; padding: 18px 24px 26px; }
.ksh-footer__links { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 0 20px; }
.ksh-footer__links a { font-family: var(--ksh-font-small); font-size: 13px; opacity: .9; }
.ksh-footer__links a:hover { opacity: 1; text-decoration: underline; }
.ksh-footer__rule {
height: 2px; margin: 14px 0 18px; border-radius: 2px;
background: linear-gradient(90deg, var(--ksh-text) 0 18%, color-mix(in srgb, var(--ksh-text) 45%, transparent) 18% 100%);
}
.ksh-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 20px; }
.ksh-footer__brand .ksh-mark { width: 40px; }
.ksh-footer__brand .ksh-brand__text { font-size: 11px; }
.ksh-footer__copy { margin: 0; font-family: var(--ksh-font-small); font-size: 12px; text-align: center; }
/* Crédito en la misma línea y tamaño que el copyright; el separador se oculta si baja de línea en móvil. */
.ksh-footer__credit { font-size: 12px; white-space: nowrap; }
.ksh-footer__credit::before { content: ' - '; white-space: pre; font-size: 12px; } /* mismo guion que "ksradio.com - Todos…" */
.ksh-footer__credit strong { font-weight: 700; }
.ksh-footer__credit a { color: inherit; text-decoration: none; }
.ksh-footer__credit a:hover, .ksh-footer__credit a:focus-visible { text-decoration: underline; }
.ksh-social--footer { gap: 10px; }
.ksh-social--footer a { font-size: 14px; }
/* Insignia de estado (UptimeRobot) centrada bajo el copyright. */
.ksh-footer__status { margin: 14px 0 0; line-height: 0; }
.ksh-footer__status a { display: block; }
/* El tema fuerza display:block en las imágenes: se centra con margen automático, no con text-align. */
.ksh-footer__status img { display: block; margin: 0 auto; height: 20px; width: auto; opacity: .85; transition: opacity .2s ease; }
.ksh-footer__status a:hover img, .ksh-footer__status a:focus-visible img { opacity: 1; }
/* ==========================================================================
Variante: BARRA LATERAL
========================================================================== */
.ksh--lateral .ksh-shell {
display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0 44px; /* 300 − 28 de padding = player de 272px */
max-width: 1180px; margin: 0 auto; padding: 32px 24px 0;
}
.ksh--lateral .ksh-side {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 26px;
padding-right: 28px;
}
.ksh--lateral .ksh-side::after {
content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 5px; border-radius: 5px;
background: var(--ksh-divider);
}
.ksh--lateral .ksh-side__brand { margin-top: 4px; }
/* Logo de la barra lateral un 20 % mayor (50 → 60 px); texto y separación escalados igual */
.ksh--lateral .ksh-side__brand { gap: 9.6px; }
.ksh--lateral .ksh-side__brand .ksh-mark { width: 60px; }
.ksh--lateral .ksh-side__brand .ksh-brand__text { font-size: 15.6px; }
.ksh--lateral .ksh-side__player { width: 100%; }
.ksh--lateral .ksh-topbar__brand { display: none; }
.ksh--lateral .ksh-topbar { justify-content: flex-end; }
/* El player en columna estrecha: una sola columna y lista de "últimas canciones" integrada. */
.ksh--lateral .ksh-side #ksPlayerRoot .ks-layout { display: block !important; grid-template-columns: 1fr !important; padding: 0 !important; }
.ksh--lateral .ksh-side #ksPlayerRoot .ks-history { display: none !important; }
.ksh--lateral .ksh-side #ksPlayerRoot .ks-mobile-only { display: block !important; }
/* En desktop el player pasa a formato horizontal; en la columna lateral se fuerza su formato vertical (el de móvil). */
.ksh--lateral .ksh-side #ksPlayerRoot .ks-layout { margin: 0 !important; }
.ksh--lateral .ksh-side #ksPlayerRoot .ks-player-card { display: block !important; max-width: 100% !important; text-align: center !important; padding: 14px 12px 22px !important; }
.ksh--lateral .ksh-side #ksPlayerRoot .ks-player-card .ks-player-body { align-items: center !important; width: 100%; min-width: 0; }
.ksh--lateral .ksh-side #ksPlayerRoot .ks-last-tracks { width: 100%; min-width: 0; }
.ksh--lateral .ksh-side #ksPlayerRoot .ks-cover { width: 100% !important; height: auto !important; margin: 0 0 12px !important; }
/* LiteSpeed añade width/height (1344×768) a la portada; entre 900 y 919px el CSS del player no los
anula y la portada se estiraba a 768px de alto. */
.ksh--lateral .ksh-side #ksPlayerRoot .ks-cover img { height: auto !important; aspect-ratio: 1 / 1; }
.ksh--lateral .ksh-side #ksPlayerRoot .ks-badge { align-self: center !important; }
.ksh--lateral .ksh-side #ksPlayerRoot .ks-track-title { font-size: 1rem !important; }
.ksh--lateral .ksh-side #ksPlayerRoot .ks-artist-wrap { justify-content: center !important; max-width: 100% !important; }
.ksh--lateral .ksh-side #ksPlayerRoot .ks-track-artist { max-width: 210px !important; }
.ksh--lateral .ksh-side #ksPlayerRoot .ks-volume-row { justify-content: center !important; margin: 12px 0 18px !important; }
.ksh--lateral .ksh-side #ksPlayerRoot #ks-volume { width: 160px !important; }
.ksh--lateral .ksh-side #ksPlayerRoot .ks-tag { min-width: 0 !important; width: 100% !important; font-size: .72rem !important; padding: .3rem .6rem !important; }
/* ==========================================================================
Variante: PLAYER SUPERIOR
========================================================================== */
.ksh--superior .ksh-shell { max-width: 1040px; margin: 0 auto; padding: 32px 24px 0; }
.ksh--superior .ksh-topbar { padding-bottom: 28px; }
@media (min-width: 900px) { .ksh--superior .ksh-nav { margin-left: auto; } }
.ksh--superior .ksh-player { margin-bottom: 26px; }
.ksh--superior .ksh-ads { gap: 8px; }
.ksh--superior .ksh-bottom {
display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; margin-top: 8px;
}
.ksh--superior .ksh-bottom__aside { display: flex; flex-direction: column; gap: 26px; }
.ksh--superior .ksh-bottom__aside .ksh-social { margin-top: 6px; }
.ksh--superior .ksh-comments { min-height: 520px; }
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 1100px) {
.ksh-nav__list { gap: 6px 18px; }
.ksh-nav__list a { font-size: 12px; }
}
@media (max-width: 899px) {
/* Menú desplegable */
.ksh-menu-btn { display: inline-flex; }
.ksh-topbar { position: relative; flex-wrap: wrap; padding-bottom: 18px; }
.ksh-nav { order: 3; flex-basis: 100%; } /* cómo se abre y cierra: más abajo, con max-height */
.ksh-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 0; border-top: 2px solid var(--ksh-divider); }
.ksh-nav__list a { padding: 12px 4px; font-size: 14px; }
.ksh-nav__list a::after { left: 0; right: auto; width: 40px; }
/* Lateral → una columna: cabecera, player, contenido, redes/apps */
.ksh--lateral .ksh-shell { display: flex; flex-direction: column; padding-top: 20px; }
.ksh--lateral .ksh-side, .ksh--lateral .ksh-main { display: contents; }
.ksh--lateral .ksh-side::after, .ksh--lateral .ksh-side__brand { display: none; }
.ksh--lateral .ksh-topbar { order: 1; justify-content: space-between; }
.ksh--lateral .ksh-topbar__brand { display: inline-flex; }
.ksh--lateral .ksh-side__player { order: 2; margin-bottom: 22px; }
.ksh--lateral .ksh-hero { order: 3; }
.ksh--lateral .ksh-ads, .ksh--lateral .ksh-ad-cta { order: 4; }
.ksh--lateral .ksh-community { order: 5; }
.ksh--superior .ksh-bottom { grid-template-columns: 1fr; }
.ksh--superior .ksh-bottom__aside { order: -1; }
/* Player en móvil: la portada del player ocupa el 100% del ancho; se limita para que
portada + controles quepan en una pantalla. */
body.ksh .ksh-player #ksPlayerRoot .ks-cover {
width: min(62vw, 280px) !important; max-width: 100% !important; height: auto !important;
margin: 0 auto 12px !important;
}
body.ksh .ksh-player #ksPlayerRoot .ks-player-card { padding-top: 8px !important; }
/* minmax(0, 1fr): sin él, el ancho mínimo del logo/imagen ensanchaba la columna y la
diapositiva se cortaba a la derecha. auto 1fr: el alto sobrante del carrusel va al panel,
no a la foto (dejaba una franja vacía bajo la imagen). */
.ksh-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; aspect-ratio: auto; }
.ksh-hero__media { aspect-ratio: 16 / 9; }
.ksh-hero__panel { padding: 44px 28px 60px; }
.ksh-hero__dots { top: 16px; left: auto; right: 20px; transform: none; }
.ksh-hero__mark { bottom: 14px; left: 28px; width: 36px; }
.ksh-footer__bottom { flex-direction: column; text-align: center; }
.ksh-footer__credit { display: block; margin-top: 4px; }
.ksh-footer__credit::before { content: none; }
}
@media (max-width: 560px) {
.ksh--lateral .ksh-shell, .ksh--superior .ksh-shell { padding-left: 16px; padding-right: 16px; }
.ksh-ads { grid-template-columns: 1fr 1fr; }
/* El 3.º va centrado debajo con la misma forma que los otros: una sola imagen sirve siempre, sin recortes */
.ksh-ads > :last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 3px); }
.ksh-ad__icon { width: 26%; }
.ksh-footer__links { justify-content: center; padding: 0; }
.ksh-footer__bottom { padding: 0; }
}
/* ==========================================================================
Página: PROGRAMACIÓN (misma cabecera, pie, tokens y piezas que el home)
========================================================================== */
.ksh--programacion .ksh-shell, .ksh--unete .ksh-shell, .ksh--historia .ksh-shell { max-width: 1040px; margin: 0 auto; padding: 32px 24px 0; }
@media (min-width: 900px) { .ksh--programacion .ksh-nav, .ksh--unete .ksh-nav, .ksh--historia .ksh-nav { margin-left: auto; } }
.ksh--programacion .ksh-main, .ksh--unete .ksh-main, .ksh--historia .ksh-main { max-width: 820px; margin: 0 auto; }
body.ksh--programacion, body.ksh--unete, body.ksh--historia { padding-bottom: 92px; } /* hueco para la barra del player */
.ksh-page-title { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px 0 22px; }
.ksh-page-title h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: .02em; }
.ksh-page-title__mark {
width: 46px; padding: 6px; border-radius: 10px;
background: var(--ksh-blue-fill); color: #fff; --ksh-logo-cut: var(--ksh-blue-fill);
}
.ksh-clock {
display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 0 0 18px;
color: var(--ksh-clock); font-size: 12px; font-weight: 800; letter-spacing: .02em;
}
.ksh-clock .ksh-icon { font-size: 15px; }
.ksh-clock time { font-variant-numeric: tabular-nums; }
/* Día: etiqueta vertical a la izquierda + lista de programas */
.ksh-schedule { display: flex; flex-direction: column; gap: 14px; }
.ksh-schedule__empty { text-align: center; color: var(--ksh-muted); }
.ksh-day { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 14px; }
.ksh-day__label {
align-self: start; display: flex; align-items: center; justify-content: center;
height: 80px; margin: 0; border-radius: 6px;
background: var(--ksh-day-bg); color: var(--ksh-day-fg);
font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.ksh-day__label span { writing-mode: vertical-rl; transform: rotate(180deg); }
.ksh-day__list { display: flex; flex-direction: column; gap: 14px; }
.ksh-show { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 14px; align-items: stretch; }
.ksh-show__avatar {
position: relative; display: block; width: 80px; height: 80px; border-radius: 10px;
background: var(--ksh-avatar-bg);
}
.ksh-show__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.ksh-show__cat {
position: absolute; right: -6px; bottom: -6px;
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; border-radius: 50%;
background: var(--ksh-blue-fill); color: #fff; font-size: 14px;
box-shadow: 0 0 0 2px var(--ksh-bg);
}
.ksh-show__cat--twitch { background: #9146ff; }
/* Programas de Twitch: toda la fila es un enlace al canal (las redes quedan por encima) */
.ksh-show--twitch { position: relative; }
.ksh-show__link { position: absolute; inset: 0; z-index: 2; border-radius: 10px; }
.ksh-show__link:focus-visible { outline: 3px solid #9146ff; outline-offset: 3px; }
.ksh-show--twitch .ksh-show__social { position: relative; z-index: 3; }
/* Avatar enlazado a la tarjeta del locutor en Nuestro Equipo (en Twitch, por encima del enlace de la fila) */
a.ksh-show__avatar { z-index: 3; transition: transform .15s ease; }
a.ksh-show__avatar:hover { transform: scale(1.05); }
a.ksh-show__avatar:focus-visible { outline: 3px solid var(--ksh-blue); outline-offset: 3px; }
.ksh-team-card { scroll-margin-top: 24px; }
.ksh-team-card:target { animation: ksh-team-target 2.4s ease; }
@keyframes ksh-team-target { 0%, 60% { box-shadow: 0 0 0 4px var(--ksh-pink), 0 10px 24px rgba(0, 0, 0, .25); } }
@media (prefers-reduced-motion: reduce) { a.ksh-show__avatar { transition: none; } a.ksh-show__avatar:hover { transform: none; } }
.ksh-show--twitch:hover .ksh-show__card { transform: translateY(-2px); box-shadow: 0 0 0 2px #9146ff, 0 8px 18px rgba(0, 0, 0, .15); }
.ksh-show__card {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
min-height: 80px; padding: 12px 18px; border-radius: 10px;
background: var(--ksh-show-bg); color: var(--ksh-show-fg);
transition: transform .15s ease, box-shadow .15s ease;
}
.ksh-day__list .ksh-show:nth-child(even) .ksh-show__card { background: var(--ksh-show-alt-bg); color: var(--ksh-show-alt-fg); }
.ksh-show__card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .15); }
.ksh-show__info { min-width: 0; }
.ksh-show__title { margin: 0 0 3px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.ksh-show__host { margin: 0; font-size: 11px; opacity: .85; text-transform: uppercase; }
.ksh-show__social { display: flex; gap: 10px; margin-top: 6px; }
.ksh-show__social a { display: inline-flex; color: inherit; font-size: 13px; }
.ksh-show__social a:hover { opacity: .75; }
.ksh-show__time { display: flex; align-items: center; gap: 8px; margin: 0; flex: none; font-size: 12px; font-weight: 800; }
/* En vivo (lo marca el JS con la hora GMT-5) */
.ksh-show__live {
display: none; padding: 2px 8px; border-radius: 999px;
background: #e11d48; color: #fff; font-size: 10px; letter-spacing: .04em;
}
/* Hoy (lo marca el JS): etiqueta "HOY · DÍA" en degradado y tarjetas con borde */
.ksh-day.is-today .ksh-day__label {
height: auto; min-height: 80px; padding: 10px 0;
background: linear-gradient(180deg, var(--ksh-hero-from), #7c3aed); color: #fff; /* --ksh-dot-2 dejaba el blanco a 3,9:1 */
box-shadow: 0 0 14px rgba(245, 5, 155, .45);
}
.ksh-day.is-today .ksh-day__label span::before { content: 'HOY · '; }
.ksh-day.is-today .ksh-show__card { box-shadow: 0 0 0 2px var(--ksh-hero-from); }
.ksh-show.is-live .ksh-show__live { display: inline-block; }
/* Inicio: "En vivo ahora" bajo el slider (solo se ven los programas en vivo) */
.ksh-onair { margin: 22px 0 6px; }
.ksh-onair[hidden] { display: none; }
.ksh-onair__special[hidden], .ksh-onair__special [hidden] { display: none; }
.ksh-onair__art { width: 80px; height: 80px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.ksh-onair__special { box-shadow: 0 0 0 3px #e11d48; }
.ksh-onair .ksh-section-title { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ksh-onair .ksh-show:not(.is-live) { display: none; }
.ksh-onair .ksh-day__list .ksh-show.is-live .ksh-show__card { background: var(--ksh-show-bg); color: var(--ksh-show-fg); box-shadow: 0 0 0 3px #e11d48, 0 8px 22px rgba(225, 29, 72, .25); }
.ksh-onair__dot { width: 10px; height: 10px; border-radius: 50%; background: #e11d48; animation: ksh-onair-pulse 1.4s ease-in-out infinite; }
@keyframes ksh-onair-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, .6); } 50% { box-shadow: 0 0 0 7px rgba(225, 29, 72, 0); } }
@media (prefers-reduced-motion: reduce) { .ksh-onair__dot { animation: none; } }
.ksh-sim-banner { margin: 0 0 14px; padding: 8px 14px; border-radius: 8px; background: #f59e0b; color: #0d1b2a; font-size: 12px; font-weight: 800; text-align: center; }
.ksh-show.is-live .ksh-show__card { box-shadow: 0 0 0 3px var(--ksh-pink); }
/* Aviso "¡Atención!" */
.ksh-notice {
display: flex; align-items: center; gap: 28px; margin: 22px 0 26px; padding: 26px 32px;
border-radius: var(--ksh-radius); background: var(--ksh-notice-bg); color: var(--ksh-notice-fg);
}
.ksh-notice__head { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; font-size: 12px; }
.ksh-notice__icon { font-size: 44px; transform: rotate(-12deg); }
.ksh-notice p { margin: 0; font-size: 14px; line-height: 1.6; text-transform: none; text-align: left; } /* antes un párrafo entero en mayúsculas y justificado */
.ksh-notice--soon { margin-top: 6px; }
.ksh-notice--soon .ksh-notice__icon { transform: none; }
.ksh-notice--soon p { font-size: 15px; font-weight: 500; text-align: left; }
.ksh--programacion .ksh-community-banner { display: none; } /* solo en móvil, como en el prototipo */
/* Barra inferior del player: el mismo [ks_player], reordenado en una fila */
.ksh-player-bar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
background: var(--ksh-bar-bg); color: var(--ksh-bar-fg);
box-shadow: 0 -6px 20px rgba(0, 0, 0, .18);
transition: background-color .25s ease;
}
.ksh-player-bar__inner { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.ksh-player-bar #ksPlayerRoot { background: transparent !important; overflow: visible !important; }
.ksh-player-bar #ksPlayerRoot .ks-layout { display: block !important; margin: 0 !important; padding: 0 !important; }
.ksh-player-bar #ksPlayerRoot .ks-history,
.ksh-player-bar #ksPlayerRoot .ks-last-tracks,
.ksh-player-bar #ksPlayerRoot .ks-signature,
.ksh-player-bar #ksPlayerRoot .ks-theme-toggle,
.ksh-player-bar #ksPlayerRoot .ks-volume-hint { display: none !important; }
.ksh-player-bar #ksPlayerRoot .ks-player-card {
display: flex !important; flex-direction: row !important; align-items: center !important; gap: 16px !important;
max-width: none !important; margin: 0 !important; padding: 8px 0 !important;
background: transparent !important; border: 0 !important; box-shadow: none !important;
text-align: left !important; color: var(--ksh-bar-fg) !important;
}
.ksh-player-bar #ksPlayerRoot .ks-cover {
flex: none !important; width: 60px !important; height: 60px !important; margin: 0 !important;
border-radius: 12px !important; overflow: hidden !important; box-shadow: none !important;
}
.ksh-player-bar #ksPlayerRoot .ks-cover img { width: 100% !important; height: 100% !important; border-radius: 12px !important; }
.ksh-player-bar #ksPlayerRoot .ks-player-body {
display: grid !important; flex: 1 1 auto !important; min-width: 0 !important; width: auto !important;
grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "badge play vol" "info play vol";
align-items: center !important; column-gap: 18px;
}
.ksh-player-bar #ksPlayerRoot .ks-badge { grid-area: badge; justify-self: start; align-self: end; transform: scale(.85); transform-origin: left center; }
.ksh-player-bar #ksPlayerRoot .ks-track-info { grid-area: info; min-width: 0; }
.ksh-player-bar #ksPlayerRoot .ks-track-title { margin: 2px 0 0 !important; font-size: 12px !important; color: var(--ksh-bar-fg) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ksh-player-bar #ksPlayerRoot .ks-artist-wrap { justify-content: flex-start !important; max-width: 100% !important; }
.ksh-player-bar #ksPlayerRoot .ks-track-artist { font-size: 11px !important; color: color-mix(in srgb, var(--ksh-bar-fg) 85%, transparent) !important; }
.ksh-player-bar #ksPlayerRoot .ks-artist-toggle-icon { color: color-mix(in srgb, var(--ksh-bar-fg) 85%, transparent) !important; }
.ksh-player-bar #ksPlayerRoot .ks-controls { grid-area: play; margin: 0 !important; }
.ksh-player-bar #ksPlayerRoot .ks-btn-play {
width: 44px !important; height: 44px !important;
background: var(--ksh-bar-btn-bg) !important; color: var(--ksh-bar-btn-fg) !important;
}
.ksh-player-bar #ksPlayerRoot .ks-btn-play .material-icons { font-size: 24px !important; }
.ksh-player-bar #ksPlayerRoot .ks-volume-row { grid-area: vol; margin: 0 !important; justify-content: flex-start !important; }
.ksh-player-bar #ksPlayerRoot .ks-volume-row .material-icons { color: var(--ksh-bar-fg) !important; }
.ksh-player-bar #ksPlayerRoot #ks-volume {
width: 150px !important;
/* Los colores del slider del player coinciden con el azul/rosa de la barra: se usan los de la barra. */
--ks-range-fill: var(--ksh-bar-range-fill) !important;
--ks-range-track: var(--ksh-bar-range-track) !important;
--ks-range-thumb: var(--ksh-bar-range-thumb) !important;
--ks-range-thumb-border: var(--ksh-bar-range-thumb-border) !important;
}
@media (max-width: 899px) {
.ksh--programacion .ksh-shell, .ksh--unete .ksh-shell, .ksh--historia .ksh-shell { padding-top: 20px; }
.ksh-clock { justify-content: center; }
/* Día: la etiqueta pasa a una pastilla horizontal encima */
.ksh-day { grid-template-columns: 1fr; gap: 8px; }
.ksh-day__label { justify-self: start; height: auto; padding: 4px 12px; font-size: 11px; }
.ksh-day__label span { writing-mode: horizontal-tb; transform: none; }
.ksh-day.is-today .ksh-day__label { min-height: 0; padding: 4px 12px; background: linear-gradient(90deg, var(--ksh-hero-from), #7c3aed); }
.ksh-show { grid-template-columns: 96px minmax(0, 1fr); }
.ksh-show__avatar { width: 96px; height: 96px; }
.ksh-show__card { flex-direction: column; justify-content: center; align-items: center; gap: 6px; text-align: center; min-height: 96px; }
.ksh-show__social { justify-content: center; }
.ksh-show__time { font-size: 11px; font-weight: 500; opacity: .9; }
.ksh--programacion .ksh-community-banner { display: flex; margin-top: 10px; }
.ksh-notice { flex-direction: column; gap: 14px; padding: 24px 22px; }
.ksh-notice p { text-transform: none; text-align: center; font-size: 13px; }
}
@media (max-width: 560px) {
body.ksh--programacion, body.ksh--unete, body.ksh--historia { padding-bottom: 104px; }
.ksh-player-bar__inner { padding: 0 14px; }
.ksh-player-bar #ksPlayerRoot .ks-cover { width: 72px !important; height: 72px !important; }
.ksh-player-bar #ksPlayerRoot .ks-player-body {
grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "badge play" "info play" "vol play";
column-gap: 10px;
}
.ksh-player-bar #ksPlayerRoot #ks-volume { width: 100px !important; }
}
/* ==========================================================================
Página: ÚNETE AL EQUIPO (título, barra y tokens compartidos con Programación)
========================================================================== */
.ksh-lead { max-width: 640px; margin: -8px auto 28px; text-align: center; color: var(--ksh-muted); font-size: 14px; line-height: 1.6; }
.ksh-section-title { margin: 0 0 14px; font-size: 15px; font-weight: 800; letter-spacing: .03em; }
/* Preguntas frecuentes: mismos colores alternos que las tarjetas de la programación */
.ksh-faq { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.ksh-faq__item {
border-radius: 10px; overflow: hidden; background: var(--ksh-card-bg);
transition: box-shadow .25s ease, transform .25s ease;
}
.ksh-faq__item:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0, 0, 0, .15); }
.ksh-faq__item[open]:not(.is-closing) { box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.ksh-faq__item summary {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 14px 18px; cursor: pointer; list-style: none;
background: var(--ksh-show-bg); color: var(--ksh-show-fg);
font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
transition: filter .2s ease;
}
.ksh-faq__item summary:hover { filter: brightness(1.06); }
.ksh-faq__item:nth-of-type(even) summary { background: var(--ksh-show-alt-bg); color: var(--ksh-show-alt-fg); }
.ksh-faq__item summary::-webkit-details-marker { display: none; }
.ksh-faq__item summary:focus-visible { outline: 3px solid var(--ksh-focus); outline-offset: -3px; }
.ksh-faq__chevron { font-size: 18px; transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
.ksh-faq__item[open]:not(.is-closing) .ksh-faq__chevron { transform: rotate(180deg); }
.ksh-faq__answer { box-sizing: border-box; overflow: hidden; padding: 16px 20px 6px; font-size: 14px; line-height: 1.65; }
.ksh-faq__answer p { margin: 0 0 12px; }
.ksh-faq__answer b, .ksh-faq__answer strong { font-weight: 800; }
/* Tarjeta del formulario (Contact Form 7).
body.ksh sube la especificidad: el "CSS adicional" del Personalizador estiliza .datosAplicaLocutor
(fondo y borde casi transparentes, labels con margin-top: 2rem) y carga después que este archivo. */
body.ksh .ksh-form-card { margin-bottom: 28px; padding: 28px 32px; border-radius: var(--ksh-radius); background: var(--ksh-card-bg); }
body.ksh .ksh-form-card__head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; }
body.ksh .ksh-form-card__head .ksh-section-title { margin: 0; }
body.ksh .ksh-form-card__icon { font-size: 26px; color: var(--ksh-blue); transform: rotate(-12deg); }
body.ksh .ksh-form-card .datosAplicaLocutor { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
body.ksh .ksh-form-card .grupo-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; line-height: 1.4; }
body.ksh .ksh-form-card .grupo-campo:has(textarea),
body.ksh .ksh-form-card .camposCondiciones,
body.ksh .ksh-form-card .btnLocutores { grid-column: 1 / -1; }
body.ksh .ksh-form-card label { margin: 0 !important; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
body.ksh .ksh-form-card .wpcf7-form-control-wrap { display: block; }
body.ksh .ksh-form-card .datosAplicaLocutor p { margin: 0; }
body.ksh .ksh-form-card .datosAplicaLocutor br { display: none; }
body.ksh .ksh-form-card input[type="text"], body.ksh .ksh-form-card input[type="email"], body.ksh .ksh-form-card input[type="tel"], body.ksh .ksh-form-card input[type="password"], body.ksh .ksh-form-card select, body.ksh .ksh-form-card textarea {
width: 100%; box-sizing: border-box; padding: 11px 14px;
border: 1px solid var(--ksh-input-border); border-radius: 8px;
background: var(--ksh-input-bg); color: var(--ksh-text);
font: inherit; font-size: 14px;
transition: border-color .15s ease, box-shadow .15s ease;
}
body.ksh .ksh-form-card textarea { min-height: 130px; resize: vertical; }
body.ksh .ksh-form-card input:focus, body.ksh .ksh-form-card select:focus, body.ksh .ksh-form-card textarea:focus {
outline: none; border-color: var(--ksh-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ksh-blue) 30%, transparent);
}
body.ksh .ksh-form-card .camposCondiciones { margin: 4px 0 0; font-size: 12px; line-height: 1.6; text-align: left; color: var(--ksh-muted); }
body.ksh .ksh-form-card .camposCondiciones .wpcf7-list-item { margin: 0; }
body.ksh .ksh-form-card .camposCondiciones label { display: flex; align-items: flex-start; gap: 10px; font-size: inherit; font-weight: 400; letter-spacing: 0; }
body.ksh .ksh-form-card .camposCondiciones input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ksh-blue); }
body.ksh .ksh-form-card .btnLocutores { display: flex; align-items: center; justify-content: center; margin: 6px 0 0; }
body.ksh .ksh-form-card input[type="submit"] {
padding: 12px 34px; border: 0; border-radius: 999px; cursor: pointer;
background: linear-gradient(90deg, #d1009f, #8a2be2 55%, #007d62); /* el verde menta dejaba el blanco a 2,2:1 */
color: #fff; font: inherit; font-size: 14px; font-weight: 800; letter-spacing: .03em;
transition: transform .15s ease, filter .15s ease;
}
body.ksh .ksh-form-card input[type="submit"]:hover { transform: translateY(-2px); filter: brightness(1.05); }
body.ksh .ksh-form-card input[type="submit"]:disabled { opacity: .6; cursor: not-allowed; transform: none; }
body.ksh .ksh-form-card .wpcf7-spinner { margin: 0 0 0 10px; }
body.ksh .ksh-form-card .wpcf7-not-valid-tip { margin-top: 4px; font-size: 12px; color: #ff5c8a; }
/* Avisos de error solo en campos ya tocados o tras intentar enviar; botón inactivo mientras se envía (ks-home.js, initFormGuards). */
body.ksh .wpcf7-form:not(.ksh-tried) .wpcf7-form-control-wrap:not(.ksh-touched) .wpcf7-not-valid-tip { display: none; }
body.ksh .ksh-form-card .wpcf7-form.ksh-sending input[type="submit"] { opacity: .6; cursor: progress; pointer-events: none; transform: none; }
body.ksh .ksh-form-card .wpcf7-response-output { margin: 18px 0 0 !important; padding: 10px 14px !important; border-radius: 8px; font-size: 13px; }
.ksh--unete .ksh-community-banner { margin-bottom: 10px; }
@media (max-width: 699px) {
body.ksh .ksh-form-card { padding: 22px 18px; }
body.ksh .ksh-form-card .datosAplicaLocutor { grid-template-columns: 1fr; }
}
/* ==========================================================================
Página: HISTORIA
========================================================================== */
.ksh--historia .ksh-section-title { text-align: center; margin-bottom: 20px; }
.ksh--historia .ksh-main > section { margin-bottom: 44px; }
/* Entrada al hacer scroll (la activa el JS; sin JS todo se ve) */
.ksh-js [data-ksh-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.ksh-js [data-ksh-reveal].is-visible { opacity: 1; transform: none; }
/* Cifras */
/* body.ksh sube la especificidad: el reset global "body.ksh ul" anula los márgenes. */
body.ksh .ksh-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 48px; }
.ksh-stat {
display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px;
border-radius: 12px; background: var(--ksh-card-bg); text-align: center;
}
.ksh-stat strong {
font-size: 26px; font-weight: 800; line-height: 1.1;
background: linear-gradient(90deg, var(--ksh-hero-from), var(--ksh-blue));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.ksh-stat span { font-size: 11px; font-weight: 500; line-height: 1.35; color: var(--ksh-muted); }
.ksh-stat:nth-child(2) { transition-delay: .08s; }
.ksh-stat:nth-child(3) { transition-delay: .16s; }
.ksh-stat:nth-child(4) { transition-delay: .24s; }
/* Relato */
.ksh-story { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 32px; align-items: center; }
.ksh-story .ksh-section-title { text-align: left; }
.ksh-story__text p { margin: 0 0 14px; font-size: 14px; line-height: 1.75; }
.ksh-story__text p:first-of-type::first-letter {
float: left; margin: 4px 8px 0 0; font-size: 44px; font-weight: 800; line-height: .9; color: var(--ksh-pink);
}
.ksh-story__logo {
margin: 0; padding: 22px; border-radius: var(--ksh-radius); text-align: center;
background: linear-gradient(135deg, var(--ksh-hero-from), var(--ksh-hero-to));
box-shadow: 0 14px 30px rgba(0, 0, 0, .2);
}
.ksh-story__logo img { width: 100%; height: auto; border-radius: 12px; }
.ksh-story__logo figcaption { margin-top: 10px; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #fff; }
/* Evolución del logo: carrusel infinito (la lista está duplicada; se desplaza la mitad y reinicia) */
.ksh-logos__viewport {
overflow: hidden; padding: 6px 0 4px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
body.ksh .ksh-logos__track {
display: flex; gap: 14px; width: max-content; margin: 0; padding: 0; list-style: none;
animation: ksh-logos-marquee 32s linear infinite;
}
.ksh-logos__viewport:hover .ksh-logos__track { animation-play-state: paused; }
@keyframes ksh-logos-marquee { to { transform: translateX(calc(-50% - 7px)); } } /* 7px = medio gap */
.ksh-logos__item { flex: 0 0 150px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
@media (prefers-reduced-motion: reduce) {
.ksh-logos__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
body.ksh .ksh-logos__track { animation: none; }
.ksh-logos__item[aria-hidden="true"] { display: none; }
}
.ksh-logos__img {
display: flex; align-items: center; justify-content: center; width: 100%; height: 110px; padding: 10px; box-sizing: border-box;
border-radius: 12px; background: #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
transition: transform .2s ease;
}
.ksh-logos__img:hover { transform: translateY(-3px); }
.ksh-logos__img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ksh-logos__item span { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--ksh-muted); }
.ksh-logos__item.is-current .ksh-logos__img { box-shadow: 0 0 0 3px var(--ksh-pink), 0 8px 18px rgba(0, 0, 0, .18); }
.ksh-logos__item.is-current span { color: var(--ksh-pink); }
html[data-ksh-theme="light"] .ksh-logos__item.is-current span { color: #c4037b; } /* rosa pastel sobre blanco: 1,77:1 */
/* Línea de tiempo: alterna lados en escritorio */
.ksh-timeline__list { position: relative; margin: 0; padding: 0; list-style: none; }
.ksh-timeline__list::before {
content: ''; position: absolute; top: 6px; bottom: 6px; left: 50%; width: 4px; margin-left: -2px; border-radius: 4px;
background: linear-gradient(var(--ksh-pink), var(--ksh-blue));
}
.ksh-milestone { position: relative; display: flex; width: 50%; padding: 0 34px 18px 0; box-sizing: border-box; }
.ksh-milestone:nth-child(even) { margin-left: 50%; padding: 0 0 18px 34px; }
.ksh-milestone__dot {
position: absolute; top: 16px; right: -8px; width: 16px; height: 16px; border-radius: 50%;
background: var(--ksh-bg); box-shadow: inset 0 0 0 4px var(--ksh-blue);
}
.ksh-milestone:nth-child(even) .ksh-milestone__dot { right: auto; left: -8px; }
.ksh-milestone.is-key .ksh-milestone__dot { background: var(--ksh-pink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ksh-pink) 35%, transparent); }
.ksh-milestone__card {
width: 100%; padding: 12px 16px; border-radius: 10px;
background: var(--ksh-card-bg); transition: transform .2s ease, box-shadow .2s ease;
}
.ksh-milestone__card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .15); }
.ksh-milestone.is-key .ksh-milestone__card { background: var(--ksh-show-bg); color: var(--ksh-show-fg); }
.ksh-milestone time { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--ksh-blue); text-transform: uppercase; }
html[data-ksh-theme="dark"] .ksh-milestone time { color: #4aa3ff; } /* #1e90ff sobre navy-2: 4,28:1 */
.ksh-milestone.is-key time { color: inherit; } /* tarjeta clave: fondo claro en los dos temas */
.ksh-milestone.is-key time { color: inherit; opacity: .85; }
.ksh-milestone p { margin: 0; font-size: 13px; font-weight: 800; line-height: 1.4; }
/* Revista */
.ksh-mags__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ksh-mag {
position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
min-height: 220px; padding: 20px; border-radius: var(--ksh-radius); overflow: hidden; color: #fff;
background: linear-gradient(180deg, rgba(13, 27, 42, .1) 15%, rgba(13, 27, 42, .92) 62%), var(--ksh-mag-img) center / cover no-repeat;
transition: transform .2s ease, box-shadow .2s ease;
}
.ksh-mag:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0, 0, 0, .25); }
.ksh-mag__title { font-size: 18px; font-weight: 800; }
.ksh-mag__vol { font-size: 12px; opacity: .9; }
.ksh-mag__cta { align-self: flex-start; margin-top: 8px; padding: 6px 14px; border-radius: 999px; background: #fff; color: var(--ksh-navy); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
/* Galería + lightbox */
.ksh-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ksh-gallery__thumb { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in; background: var(--ksh-card-bg); }
.ksh-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ksh-gallery__thumb:hover img, .ksh-gallery__thumb:focus-visible img { transform: scale(1.06); }
.ksh-gallery__thumb:focus-visible { outline: 3px solid var(--ksh-focus); outline-offset: 2px; }
.ksh-lightbox { max-width: min(92vw, 900px); max-height: 90vh; padding: 0; border: 0; border-radius: 14px; background: transparent; overflow: visible; }
.ksh-lightbox::backdrop { background: rgba(5, 10, 18, .85); }
.ksh-lightbox img { display: block; max-width: min(92vw, 900px); max-height: 86vh; width: auto; height: auto; border-radius: 14px; }
.ksh-lightbox[open] { animation: ksh-lb-in .25s ease; }
@keyframes ksh-lb-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.ksh-lightbox__btn {
position: absolute; display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
background: #fff; color: var(--ksh-navy); font-size: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}
.ksh-lightbox__close { top: -14px; right: -14px; }
.ksh-lightbox__prev, .ksh-lightbox__next { top: 50%; margin-top: -20px; }
.ksh-lightbox__prev { left: -20px; } .ksh-lightbox__prev .ksh-icon { transform: rotate(90deg); }
.ksh-lightbox__next { right: -20px; } .ksh-lightbox__next .ksh-icon { transform: rotate(-90deg); }
@media (max-width: 899px) {
body.ksh .ksh-stats { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 36px; }
.ksh-stat { padding: 16px 10px; }
.ksh-stat strong { font-size: 24px; white-space: nowrap; }
.ksh-story { grid-template-columns: 1fr; }
.ksh-story__logo { max-width: 220px; margin: 0 auto; order: -1; }
.ksh-timeline__list::before { left: 8px; }
.ksh-milestone, .ksh-milestone:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 14px 32px; }
.ksh-milestone__dot, .ksh-milestone:nth-child(even) .ksh-milestone__dot { left: 2px; right: auto; }
.ksh-mags__grid { grid-template-columns: 1fr; }
.ksh-gallery__grid { grid-template-columns: 1fr 1fr; }
.ksh-lightbox__prev { left: 6px; } .ksh-lightbox__next { right: 6px; } .ksh-lightbox__close { top: 6px; right: 6px; }
}
/* ==========================================================================
Botón "volver arriba" (todas las plantillas)
========================================================================== */
.ksh-to-top {
position: fixed; right: 20px; bottom: 24px; z-index: 60;
width: 44px; height: 44px;
box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
}
.ksh-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.ksh-to-top.is-visible:hover { transform: translateY(-2px); }
.ksh-to-top:focus-visible { outline: 3px solid var(--ksh-focus); outline-offset: 3px; }
.ksh-to-top__icon { transform: rotate(180deg); }
/* Por encima de la barra fija del player */
body:has(.ksh-player-bar) .ksh-to-top { bottom: 96px; }
@media (max-width: 560px) {
.ksh-to-top { right: 14px; bottom: 18px; width: 40px; height: 40px; }
body:has(.ksh-player-bar) .ksh-to-top { bottom: 112px; }
}
@media (prefers-reduced-motion: reduce) {
body.ksh *, body.ksh *::before, body.ksh *::after { transition: none !important; }
}
/* ==========================================================================
Página de texto (política de privacidad, avisos…)
Mismo formato que Únete: contenido centrado y player fijo abajo; cabecera compacta,
índice y tarjeta de lectura.
========================================================================== */
.ksh--pagina .ksh-shell { max-width: 1040px; margin: 0 auto; padding: 32px 24px 0; }
@media (min-width: 900px) { .ksh--pagina .ksh-nav { margin-left: auto; } }
.ksh--pagina .ksh-main { max-width: 820px; margin: 0 auto; }
body.ksh--pagina { padding-bottom: 92px; } /* hueco para la barra del player */
html[data-ksh-theme="dark"] { --ksh-prose-accent: #6cb6ff; --ksh-prose-text: rgba(255, 255, 255, .86); }
html[data-ksh-theme="light"] { --ksh-prose-accent: #1570d6; --ksh-prose-text: #2a3746; }
.ksh-doc-hero {
display: grid; grid-template-columns: 36% 1fr;
min-height: 200px; border-radius: var(--ksh-radius); overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.ksh-doc-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 28%; }
.ksh-doc-hero__panel {
position: relative; display: flex; flex-direction: column; justify-content: center; gap: 8px;
padding: 44px 48px 52px;
background: linear-gradient(90deg, var(--ksh-hero-from), var(--ksh-hero-to));
color: #fff;
}
.ksh-doc-hero .ksh-hero__dots { top: 18px; left: 48px; transform: none; }
.ksh-doc-hero .ksh-hero__mark { left: auto; right: 24px; bottom: 18px; width: 36px; }
.ksh-doc-hero__title { font-size: clamp(24px, 2.6vw, 36px); font-weight: 800; line-height: 1.2; color: #fff; }
.ksh-doc-hero__meta { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .85); }
.ksh-toc { margin: 22px 0 0; border-radius: 12px; background: var(--ksh-card-bg); }
.ksh-toc summary {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 16px 22px; cursor: pointer; list-style: none;
font-size: 14px; font-weight: 800; letter-spacing: .03em;
}
.ksh-toc summary::-webkit-details-marker { display: none; }
.ksh-toc__label small { margin-left: 8px; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--ksh-muted); }
.ksh-toc__chevron { font-size: 20px; transition: transform .2s ease; }
.ksh-toc[open] .ksh-toc__chevron { transform: rotate(180deg); }
.ksh-toc__list {
margin: 0; padding: 4px 22px 20px; list-style: none;
columns: 2; column-gap: 32px;
}
.ksh-toc__item { break-inside: avoid; }
.ksh-toc__item a {
display: block; padding: 5px 0 5px 12px; border-left: 3px solid transparent;
font-size: 13.5px; line-height: 1.35; color: var(--ksh-prose-text);
transition: color .15s ease, border-color .15s ease;
}
.ksh-toc__item a:hover { color: var(--ksh-text); border-left-color: var(--ksh-pink); }
.ksh-toc__item--h2 a { font-weight: 800; color: var(--ksh-text); }
.ksh-toc__item--h4 a { padding-left: 24px; font-size: 13px; color: var(--ksh-muted); }
.ksh-prose {
margin-top: 22px; padding: 44px 52px 48px;
border-radius: var(--ksh-radius); background: var(--ksh-card-bg);
color: var(--ksh-prose-text); font-size: 15.5px; line-height: 1.75;
overflow-wrap: anywhere;
}
.ksh-prose > :first-child { margin-top: 0; }
.ksh-prose p { margin: 0 0 1em; }
.ksh-prose > p, .ksh-prose > ul, .ksh-prose > ol { max-width: 68ch; } /* ~90 caracteres por línea cansaba */
.ksh-prose strong { color: var(--ksh-text); }
.ksh-prose a { color: var(--ksh-prose-accent); text-decoration: underline; text-underline-offset: 3px; }
.ksh-prose a:hover { color: var(--ksh-pink); }
.ksh-prose h2, .ksh-prose h3, .ksh-prose h4, .ksh-prose h5 {
font-family: var(--ksh-font); color: var(--ksh-text); line-height: 1.3; scroll-margin-top: 24px;
}
.ksh-prose h2 {
position: relative; margin: 2.2em 0 .9em; padding-top: 18px;
font-size: 22px; font-weight: 800;
}
.ksh-prose h2::before {
content: ''; position: absolute; top: 0; left: 0; width: 56px; height: 4px; border-radius: 4px;
background: linear-gradient(90deg, var(--ksh-hero-from), var(--ksh-dot-2));
}
.ksh-prose h3 { margin: 1.9em 0 .6em; font-size: 18px; font-weight: 800; color: var(--ksh-prose-accent); }
.ksh-prose h4 { margin: 1.7em 0 .5em; font-size: 16px; font-weight: 800; }
.ksh-prose h5 { margin: 1.4em 0 .4em; font-size: 15px; font-weight: 800; }
.ksh-prose h2 strong, .ksh-prose h3 strong, .ksh-prose h4 strong, .ksh-prose h5 strong { color: inherit; font-weight: inherit; }
.ksh-prose hr { height: 2px; margin: 28px 0; border: 0; border-radius: 2px; background: var(--ksh-divider); }
html[data-ksh-theme="dark"] .ksh-prose hr { background: rgba(255, 255, 255, .12); }
/* body.ksh ul quita viñetas y sangría en todo el sitio; dentro del texto se restauran. */
body.ksh .ksh-prose ul, body.ksh .ksh-prose ol { margin: 0 0 1.1em; padding-left: 1.3em; }
body.ksh .ksh-prose ul { list-style: disc; }
body.ksh .ksh-prose ol { list-style: decimal; }
body.ksh .ksh-prose li { margin: .45em 0; padding-left: .2em; }
body.ksh .ksh-prose li::marker { color: var(--ksh-pink); }
.ksh-prose img { height: auto; border-radius: 10px; }
.ksh-prose table { width: 100%; border-collapse: collapse; margin: 0 0 1em; font-size: 14px; }
.ksh-prose th, .ksh-prose td { padding: 8px 10px; border-bottom: 1px solid var(--ksh-divider); text-align: left; }
@media (max-width: 899px) {
.ksh--pagina .ksh-shell { padding-top: 20px; }
body.ksh--pagina { padding-bottom: 104px; }
.ksh-doc-hero { grid-template-columns: 1fr; min-height: 0; }
.ksh-doc-hero__media { aspect-ratio: 21 / 9; }
.ksh-doc-hero__panel { padding: 40px 24px 52px; }
.ksh-doc-hero .ksh-hero__dots { left: 24px; }
.ksh-toc__list { columns: 1; }
.ksh-prose { padding: 30px 24px 34px; }
}
@media (max-width: 560px) {
.ksh-doc-hero__media { display: none; }
.ksh-prose { padding: 26px 18px 30px; font-size: 15px; }
.ksh-prose h2 { font-size: 20px; }
.ksh-prose h3 { font-size: 17px; }
}
/* ==========================================================================
Carrusel principal del home (cada diapositiva reutiliza .ksh-hero)
========================================================================== */
.ksh-carousel { position: relative; container-type: inline-size; }
.ksh-carousel__viewport { overflow: hidden; border-radius: var(--ksh-radius); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.ksh-carousel__track { display: flex; transition: transform .6s cubic-bezier(.22, .61, .36, 1); touch-action: pan-y; }
.ksh-carousel .ksh-carousel__slide { flex: 0 0 100%; min-width: 0; border-radius: 0; box-shadow: none; }
.ksh-carousel__slide img { -webkit-user-drag: none; user-select: none; }
.ksh-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ksh-hero__cta {
display: inline-flex; align-items: center; padding: 9px 20px; border-radius: 999px;
background: #fff; color: var(--ksh-navy); font-size: 13px; font-weight: 800; letter-spacing: .05em;
box-shadow: 0 6px 16px rgba(0, 0, 0, .18); transition: background-color .2s ease, transform .2s ease;
}
/* Diapositiva de vídeo: el vídeo ocupa el hueco de la imagen; tocarlo (o el altavoz) activa el sonido */
.ksh-hero--video .ksh-hero__media { overflow: hidden; }
/* Su título es más largo que el de las otras diapositivas: en escritorio estiraba la fila y el banner recortaba
el altavoz y el logo. Fila fija a la altura del banner y título algo menor. */
@media (min-width: 900px) {
.ksh-hero--video { grid-template-rows: minmax(0, 1fr); }
.ksh-hero--video .ksh-hero__panel { padding-top: 9%; padding-bottom: 13%; }
.ksh-hero--video .ksh-hero__title { font-size: clamp(20px, 2.1vw, 30px); }
}
/* Absoluto: el vídeo se ajusta al hueco de la diapositiva en vez de estirarlo (antes cortaba el altavoz a >1280 px) */
.ksh-hero__video-wrap { position: absolute; inset: 0; overflow: hidden; background: #0d1b2a; }
.ksh-hero__video-wrap::before {
content: ""; position: absolute; inset: -24px;
background: var(--ksh-poster) center / cover no-repeat; filter: blur(18px) brightness(.6); transform: scale(1.1);
}
.ksh-hero__video { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
.ksh-hero__sound {
position: absolute; right: 12px; bottom: 12px; z-index: 2;
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
background: rgba(13, 27, 42, .72); color: #fff; cursor: pointer;
box-shadow: 0 4px 14px rgba(0, 0, 0, .25); transition: background-color .2s ease, transform .2s ease;
}
.ksh-hero__sound svg { width: 22px; height: 22px; fill: currentColor; }
.ksh-hero__sound:hover, .ksh-hero__sound:focus-visible { background: var(--ksh-pink); transform: scale(1.06); }
.ksh-hero__sound .ksh-hero__sound-on, .ksh-hero__sound[aria-pressed="true"] .ksh-hero__sound-off { display: none; }
.ksh-hero__sound[aria-pressed="true"] .ksh-hero__sound-on { display: block; }
body.ksh a.ksh-hero__cta { color: var(--ksh-navy); } /* body.ksh a { color: inherit } lo dejaba blanco sobre blanco */
body.ksh a.ksh-hero__cta:hover, body.ksh a.ksh-hero__cta:focus-visible { background: var(--ksh-pink); color: var(--ksh-navy); transform: translateY(-2px); }
.ksh-carousel__arrow {
position: absolute; top: 50%; z-index: 2;
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
background: rgba(255, 255, 255, .92); color: var(--ksh-navy); font-size: 22px; cursor: pointer;
box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
opacity: 0; transform: translateY(-50%); transition: opacity .2s ease, background-color .2s ease;
}
.ksh-carousel__arrow--prev { left: 12px; }
.ksh-carousel__arrow--next { right: 12px; }
.ksh-carousel__arrow--prev .ksh-icon { transform: rotate(90deg); }
.ksh-carousel__arrow--next .ksh-icon { transform: rotate(-90deg); }
.ksh-carousel:hover .ksh-carousel__arrow, .ksh-carousel:focus-within .ksh-carousel__arrow { opacity: 1; }
.ksh-carousel__arrow:hover { background: #fff; }
.ksh-carousel__arrow::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; } /* área de toque más amplia */
.ksh-carousel__controls {
position: absolute; right: 18px; bottom: 16px; z-index: 2;
display: flex; align-items: center; gap: 8px;
}
.ksh-carousel__dot {
width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px;
background: rgba(255, 255, 255, .5); cursor: pointer; transition: width .25s ease, background-color .25s ease;
}
.ksh-carousel__dot[aria-current="true"] { width: 26px; background: #fff; }
.ksh-carousel__pause {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
background: rgba(255, 255, 255, .22); color: #fff; font-size: 13px; cursor: pointer;
}
.ksh-carousel__pause:hover { background: rgba(255, 255, 255, .35); }
.ksh-carousel__icon-play { display: none; }
.ksh-carousel[data-paused="user"] .ksh-carousel__icon-play { display: block; }
.ksh-carousel[data-paused="user"] .ksh-carousel__icon-pause { display: none; }
@media (hover: none) { .ksh-carousel__arrow { display: none; } }
@media (max-width: 899px) {
.ksh--lateral .ksh-carousel { order: 3; }
.ksh--lateral .ksh-about { order: 3; } /* mismo orden: va detrás del carrusel por el orden del HTML */
.ksh-carousel__arrow { display: none; }
.ksh-carousel__controls { right: 16px; bottom: 14px; }
.ksh-hero__copy { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .ksh-carousel__track { transition: none; } }
/* Banner estrecho en escritorio (barra lateral con ventana de 900–1100px): el logo chocaba con los
controles y el botón. Se baja a la izquierda, a la altura de los controles, y el banner gana alto. */
@media (min-width: 900px) {
@container (max-width: 720px) {
.ksh-hero { aspect-ratio: 2 / 1; }
.ksh-hero__panel { padding: 40px 12% 60px; }
.ksh-hero__mark { left: 12%; bottom: 16px; width: 34px; }
.ksh-hero__copy { gap: 12px; }
}
}
/* ==========================================================================
Página: CONTACTO (formato de Únete: contenido centrado y player fijo abajo)
========================================================================== */
.ksh--contacto .ksh-shell { max-width: 1040px; margin: 0 auto; padding: 32px 24px 0; }
@media (min-width: 900px) { .ksh--contacto .ksh-nav { margin-left: auto; } }
.ksh--contacto .ksh-main { max-width: 900px; margin: 0 auto; }
body.ksh--contacto { padding-bottom: 92px; } /* hueco para la barra del player */
.ksh-contact { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: stretch; margin-bottom: 28px; }
body.ksh .ksh-contact .ksh-form-card { margin-bottom: 0; }
body.ksh .ksh-contact-form__icon { transform: none; }
/* CF7 envuelve cada campo en */
body.ksh .ksh-contact-form .wpcf7-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
body.ksh .ksh-contact-form .wpcf7-form > p { margin: 0; }
body.ksh .ksh-contact-form .wpcf7-form > p:nth-of-type(n+3),
body.ksh .ksh-contact-form .wpcf7-response-output { grid-column: 1 / -1; }
body.ksh .ksh-contact-form .wpcf7-form > p label { display: flex; flex-direction: column; gap: 6px; }
body.ksh .ksh-contact-form .wpcf7-form > p br { display: none; }
body.ksh .ksh-contact-form .wpcf7-form > p:has(input[type="submit"]) { display: flex; align-items: center; justify-content: center; margin-top: 4px; }
.ksh-contact__aside { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ksh-fb { flex: 1 1 auto; padding: 12px; border-radius: var(--ksh-radius); background: var(--ksh-card-bg); line-height: 0; }
.ksh-channels { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--ksh-radius); background: var(--ksh-card-bg); }
.ksh-channels .ksh-section-title { margin: 0 0 4px; text-align: center; }
.ksh-channel {
display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
background: var(--ksh-bg); transition: transform .15s ease, box-shadow .15s ease;
}
.ksh-channel:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .15); }
.ksh-channel__icon {
display: inline-flex; align-items: center; justify-content: center; flex: none;
width: 40px; height: 40px; border-radius: 10px; color: #fff; font-size: 20px;
}
.ksh-channel__icon--mail { background: linear-gradient(135deg, var(--ksh-hero-from), var(--ksh-hero-to)); }
.ksh-channel__icon--discord { background: #5865f2; }
.ksh-channel__text { display: flex; flex-direction: column; min-width: 0; font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.ksh-channel__text small, .ksh-channels__social small { font-size: 11px; font-weight: 500; letter-spacing: .03em; color: var(--ksh-muted); }
.ksh-channels__social { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 6px; }
@media (max-width: 899px) {
.ksh--contacto .ksh-shell { padding-top: 20px; }
body.ksh--contacto { padding-bottom: 104px; }
.ksh-contact { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
body.ksh .ksh-contact-form .wpcf7-form { grid-template-columns: 1fr; }
body.ksh .ksh-contact-form .wpcf7-form > p:nth-of-type(n+3) { grid-column: auto; }
}
/* ==========================================================================
Página 404 (formato de Programación: contenido centrado y player fijo abajo).
Reutiliza el banner .ksh-hero del home, fuera del carrusel.
========================================================================== */
.ksh--404 .ksh-shell { max-width: 1040px; margin: 0 auto; padding: 32px 24px 0; }
@media (min-width: 900px) { .ksh--404 .ksh-nav { margin-left: auto; } }
.ksh--404 .ksh-main { max-width: 820px; margin: 0 auto; padding-bottom: 40px; }
body.ksh--404 { padding-bottom: 92px; } /* hueco para la barra del player */
.ksh-404 { margin-top: 6px; }
.ksh-404__code { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .18em; color: rgba(255, 255, 255, .85); }
.ksh-404__lead { margin: 28px auto 0; }
@media (max-width: 899px) {
.ksh--404 .ksh-shell { padding-top: 20px; }
body.ksh--404 { padding-bottom: 104px; }
}
/* ---- Fachada del chat de Discord (vista previa ?ksh-chat) ---- */
.ksh-comments--facade { align-items: center; justify-content: center; }
body.ksh .ksh-chat-facade__preview {
position: absolute; inset: 0; margin: 0; padding: 22px 20px; list-style: none;
display: flex; flex-direction: column; gap: 18px; opacity: .5; pointer-events: none;
-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 45%); mask-image: linear-gradient(180deg, #000 0%, transparent 45%);
}
.ksh-chat-facade__preview li { display: flex; gap: 12px; align-items: flex-start; }
.ksh-chat-facade__preview i { flex: none; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--ksh-text) 18%, transparent); }
.ksh-chat-facade__preview span { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.ksh-chat-facade__preview b { display: block; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--ksh-text) 14%, transparent); }
.ksh-chat-facade__preview b:first-child { height: 9px; max-width: 120px; background: color-mix(in srgb, var(--ksh-pink) 45%, transparent); }
.ksh-chat-facade__cta {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
max-width: 300px; padding: 24px; text-align: center;
}
.ksh-chat-facade__icon {
display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%;
background: #5865f2; color: #fff; font-size: 32px; box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}
body.ksh .ksh-chat-facade__title { margin: 6px 0 0; font-family: var(--ksh-font); font-size: 22px; font-weight: 800; color: var(--ksh-text); }
.ksh-chat-facade__text { margin: 0 0 6px; color: var(--ksh-muted); font-size: 15px; line-height: 1.45; }
.ksh-chat-facade__btn { border: 0; cursor: pointer; font-family: inherit; }
.ksh-chat-facade__btn:hover, .ksh-chat-facade__btn:focus-visible { background: var(--ksh-pink); transform: translateY(-2px); }
.ksh-chat-facade__btn:focus-visible { outline: 2px solid var(--ksh-focus); outline-offset: 3px; }
body.ksh .ksh-chat-facade__link { color: var(--ksh-muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
body.ksh .ksh-chat-facade__link:hover { color: var(--ksh-text); }
html[data-ksh-theme="light"] .ksh-chat-facade__btn { background: var(--ksh-navy); color: #fff; }
html[data-ksh-theme="light"] .ksh-chat-facade__btn:hover, html[data-ksh-theme="light"] .ksh-chat-facade__btn:focus-visible { background: var(--ksh-pink); color: var(--ksh-navy); }
@media (prefers-reduced-motion: reduce) { .ksh-chat-facade__btn:hover, .ksh-chat-facade__btn:focus-visible { transform: none; } }
/* ==========================================================================
Contraseña (templates/password.php, formato de la 404) y Reglamento (formato de Contacto).
========================================================================== */
body.ksh .ksh-lock { max-width: 460px; margin: 10px auto 40px; }
body.ksh .ksh-lock__icon { transform: none; }
body.ksh .ksh-lock .post-password-form p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; text-align: center; color: var(--ksh-muted); }
body.ksh .ksh-lock .post-password-form p:last-child { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0; }
body.ksh .ksh-lock .post-password-form label { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; color: var(--ksh-text); }
body.ksh .ksh-lock .post-password-form-invalid-password p { margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; background: color-mix(in srgb, #ff5c8a 18%, transparent); color: var(--ksh-text); font-size: 13px; }
body.ksh .ksh-reg-form .datosAplicaLocutor { grid-template-columns: 1fr; } /* un campo por línea */
body.ksh .ksh-reg-form .camposCondiciones a { color: var(--ksh-blue); text-decoration: underline; }
body.ksh .ksh-reg-form .grupo-campo > label { display: flex; flex-direction: column; gap: 6px; }
body.ksh .ksh-reg-form .ks-recaptcha-aviso { grid-column: 1 / -1; margin: 0; text-align: center; }
.ksh-reg-doc__file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--ksh-bg); }
.ksh-reg-doc__file .ksh-channel__text { flex: 1 1 auto; }
.ksh-reg-doc__version { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--ksh-pink); color: var(--ksh-navy); font-size: 12px; font-weight: 800; }
body.ksh a.ksh-reg-doc__btn {
display: block; padding: 12px 18px; border-radius: 999px; text-align: center;
background: var(--ksh-blue-fill); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .03em;
transition: transform .15s ease, filter .15s ease;
}
body.ksh a.ksh-reg-doc__btn:hover, body.ksh a.ksh-reg-doc__btn:focus-visible { transform: translateY(-2px); filter: brightness(1.08); }
.ksh-reg-doc__internal {
display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 12px;
background: color-mix(in srgb, var(--ksh-pink) 16%, transparent); border: 1px solid color-mix(in srgb, var(--ksh-pink) 45%, transparent);
font-size: 12px; line-height: 1.6; color: var(--ksh-text);
}
.ksh-reg-doc__internal-icon { flex: none; margin-top: 2px; font-size: 16px; color: var(--ksh-hero-from); }
.ksh-reg-doc__note { margin: 0; font-size: 12px; line-height: 1.6; text-align: center; color: var(--ksh-muted); }
@media (max-width: 899px) {
.ksh--reglamento .ksh-contact__aside { order: -1; } /* en una columna, el documento antes que el formulario */
}
/* Aviso de enlace de descarga caducado o no válido (templates/enlace.php) */
.ksh-link-msg { margin: 0 0 18px; font-size: 14px; line-height: 1.6; text-align: center; color: var(--ksh-muted); }
.ksh-link-cta { margin: 0; }
/* ==== Anúnciate ==== */
.ksh-adspaces { margin: 0 0 48px; text-align: center; }
.ksh-adspaces__text { max-width: 640px; margin: 0 auto 4px; color: var(--ksh-muted); font-size: 14px; line-height: 1.6; }
.ksh-adspaces__text strong { color: var(--ksh-text); }
.ksh-adspaces .ksh-ads { max-width: 790px; margin: 16px auto 0; } /* mismo tamaño que en el inicio */
.ksh-adspec__list { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.ksh-adspec__list > div { display: flex; flex-direction: column; gap: 2px; }
.ksh-adspec__list dt { color: var(--ksh-muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ksh-adspec__list dd { margin: 0; font-size: 14px; font-weight: 700; }
.ksh-adspec__note { margin: 4px 0 0; color: var(--ksh-muted); font-size: 12.5px; line-height: 1.55; }
.ksh-adspec__note strong { color: var(--ksh-text); }
/* Colabora (creadores de contenido) */
.ksh-collab { margin: 0 0 40px; text-align: center; }
body.ksh .ksh-collab__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ksh-collab__item {
display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 14px;
border-radius: 12px; background: var(--ksh-card-bg);
}
.ksh-collab__icon { width: 28px; height: 28px; color: var(--ksh-hero-from); }
.ksh-collab__item strong { font-size: 14px; font-weight: 800; }
.ksh-collab__item span { font-size: 12.5px; line-height: 1.45; color: var(--ksh-muted); }
.ksh-collab__note { margin: 14px 0 0; font-size: 13px; color: var(--ksh-muted); }
body.ksh .ksh-collab__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ksh-collab__steps li {
display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 16px;
border-radius: 12px; background: var(--ksh-card-bg);
}
.ksh-collab__num {
display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
background: linear-gradient(135deg, var(--ksh-hero-from), var(--ksh-hero-to)); color: #fff; font-weight: 800;
}
.ksh-collab__steps strong { font-size: 14px; font-weight: 800; }
.ksh-collab__steps li > span:last-child { font-size: 12.5px; line-height: 1.5; color: var(--ksh-muted); }
@media (max-width: 760px) {
body.ksh .ksh-collab__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.ksh .ksh-collab__steps { grid-template-columns: 1fr; }
}
/* ==========================================================================
Nuestro Equipo (templates/equipo.php, includes/equipo.php)
========================================================================== */
.ksh--equipo .ksh-main { max-width: 960px; }
.ksh-team-lead { max-width: 640px; margin: 0 auto 20px; text-align: center; }
.ksh-team-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 26px; }
.ksh-team-filter button {
padding: 7px 16px; border: 2px solid var(--ksh-blue); border-radius: 999px;
background: transparent; color: var(--ksh-text); font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .04em; cursor: pointer;
}
.ksh-team-filter button.is-active { background: var(--ksh-blue-fill); color: #fff; }
.ksh-team-filter button:focus-visible { outline: 3px solid var(--ksh-focus); outline-offset: 2px; }
.ksh-team-block { margin: 0 0 34px; }
.ksh-team-heading { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; font-size: 15px; font-weight: 800; letter-spacing: .08em; }
.ksh-team-heading::before, .ksh-team-heading::after { content: ''; flex: 1; height: 3px; border-radius: 3px; }
.ksh-team-heading::before { background: linear-gradient(90deg, var(--ksh-hero-from), var(--ksh-dot-2)); }
.ksh-team-heading::after { background: linear-gradient(90deg, var(--ksh-dot-2), var(--ksh-hero-to)); }
.ksh-team-block--twitch .ksh-team-heading::before { background: linear-gradient(90deg, #b13cff, #9146ff); }
.ksh-team-block--twitch .ksh-team-heading::after { background: linear-gradient(90deg, #9146ff, #6441a5); }
.ksh-team-block--twitch .ksh-team-heading span { color: #b58cff; }
html[data-ksh-theme="light"] .ksh-team-block--twitch .ksh-team-heading span { color: #6441a5; }
.ksh-team-name { margin: 0 0 2px; font-size: 16px; font-weight: 800; letter-spacing: .02em; }
.ksh-team-role { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #c4037b; } /* --ksh-hero-from sobre la tarjeta blanca: 3,91:1 */
html[data-ksh-theme="light"] .ksh-team-role { color: inherit; opacity: .85; }
.ksh-team-bio {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
margin: 8px 0 0; font-size: 13px; line-height: 1.55; opacity: .85;
}
.ksh-team-bio.is-open { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: hidden; }
.ksh-team-more {
align-self: flex-start; margin: 4px 0 0; padding: 2px 0; border: 0; background: none; color: inherit; cursor: pointer;
font: inherit; font-size: 12px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px;
}
.ksh-team-more[hidden] { display: none; }
.ksh-team-more::after { content: '▾'; display: inline-block; margin-left: 5px; transition: transform .3s ease; }
.ksh-team-more[aria-expanded="true"]::after { transform: rotate(180deg); }
.ksh-team-more:hover { opacity: .75; }
.ksh-team-more:focus-visible { outline: 2px solid var(--ksh-blue); outline-offset: 2px; border-radius: 4px; }
.ksh-team-social { display: flex; gap: 6px; margin: 8px 0 0 -4px; padding: 0; list-style: none; }
.ksh-team-social a { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; color: inherit; font-size: 16px; }
.ksh-team-social a:hover { opacity: .75; }
/* Staff: tarjeta ancha con foto redonda */
.ksh-team-staff { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 560px)); justify-content: center; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ksh-team-staff__card {
display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px;
border-radius: var(--ksh-radius); background: var(--ksh-show-bg); color: var(--ksh-show-fg);
box-shadow: inset 0 0 0 2px rgba(245, 5, 155, .35);
}
.ksh-team-staff__img { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--ksh-avatar-bg); box-shadow: 0 0 0 3px var(--ksh-hero-from), 0 0 0 6px var(--ksh-dot-2); }
.ksh-team-staff__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Locutores: dos columnas en escritorio para una cuadrícula más legible. */
.ksh-team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ksh-team-card {
display: flex; flex-direction: column; width: 100%; max-width: 250px; min-width: 0; justify-self: center; overflow: hidden;
border-radius: var(--ksh-radius); background: var(--ksh-show-bg); color: var(--ksh-show-fg);
transition: transform .15s ease, box-shadow .15s ease;
}
.ksh-team-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.ksh-team-card--twitch { box-shadow: inset 0 0 0 2px #9146ff; }
.ksh-team-card.is-live { box-shadow: 0 0 0 3px #e11d48, 0 8px 22px rgba(225, 29, 72, .25); }
.ksh-team-card__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--ksh-avatar-bg); }
.ksh-team-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ksh-team-card__media::after { content: ''; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, rgba(13, 27, 42, .55)); }
.ksh-team-card__cat {
position: absolute; right: 10px; bottom: 10px; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 50%; background: var(--ksh-blue-fill); color: #fff; font-size: 16px;
}
.ksh-team-card--twitch .ksh-team-card__cat { background: #9146ff; }
.ksh-team-card__live {
display: none; position: absolute; left: 10px; top: 10px; z-index: 1; padding: 3px 10px; border-radius: 999px;
background: #e11d48; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .05em;
}
.ksh-team-card.is-live .ksh-team-card__live { display: inline-block; }
.ksh-team-card__body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.ksh-team-show { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: rgba(30, 144, 255, .14); color: inherit; }
.ksh-team-show:hover { background: rgba(30, 144, 255, .24); }
.ksh-team-card--twitch .ksh-team-show { background: rgba(145, 70, 255, .16); }
html[data-ksh-theme="light"] .ksh-team-show { background: rgba(255, 255, 255, .18); }
.ksh-team-show__title { display: block; font-size: 12px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.ksh-team-show__when { display: block; margin-top: 2px; font-size: 11px; opacity: .8; }
.ksh-team-show__when small { font-size: 11px; }
.ksh-team-join {
margin: 10px 0 26px; padding: 26px 20px; border-radius: var(--ksh-radius); text-align: center;
background: linear-gradient(120deg, rgba(245, 5, 155, .18), rgba(10, 42, 160, .28));
}
.ksh-team-join h2 { margin: 0 0 6px; font-size: 18px; font-weight: 800; letter-spacing: .03em; }
.ksh-team-join p { max-width: 520px; margin: 0 auto; color: var(--ksh-muted); font-size: 14px; }
.ksh-team-join .ksh-community-pill-wrap { margin: 16px 0 0; }
@media (max-width: 768px) {
.ksh-team-grid { grid-template-columns: minmax(0, 420px); justify-content: center; }
.ksh-team-card { max-width: 250px; }
} /* una tarjeta por fila en tablet vertical y móvil */
@media (max-width: 560px) {
.ksh-team-filter button { padding: 6px 12px; font-size: 11px; }
.ksh-team-staff__card { grid-template-columns: 72px minmax(0, 1fr); padding: 14px; }
.ksh-team-staff__img { width: 72px; height: 72px; }
.ksh-team-grid { gap: 16px; }
}
/* Nuestro Equipo: efectos (zoom de la foto, brillo del staff). La entrada es la común del sitio (.ksh-fx). */
.ksh-team-card__media img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.ksh-team-card:hover .ksh-team-card__media img, .ksh-team-card:focus-within .ksh-team-card__media img { transform: scale(1.06); }
.ksh-team-card__cat { transition: transform .3s ease; }
.ksh-team-card:hover .ksh-team-card__cat { transform: scale(1.12) rotate(-8deg); }
.ksh-team-staff__card { transition: transform .15s ease, box-shadow .3s ease; }
.ksh-team-staff__card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 2px rgba(245, 5, 155, .55), 0 10px 26px rgba(245, 5, 155, .18); }
.ksh-team-staff__img { transition: box-shadow .4s ease; }
.ksh-team-staff__card:hover .ksh-team-staff__img { box-shadow: 0 0 0 3px var(--ksh-dot-2), 0 0 0 6px var(--ksh-hero-from), 0 0 18px rgba(177, 102, 255, .55); }
.ksh-team-social a { transition: transform .2s ease, opacity .15s ease; }
.ksh-team-social a:hover { transform: translateY(-2px) scale(1.12); }
@media (prefers-reduced-motion: reduce) {
.ksh-team-card, .ksh-team-staff__card, .ksh-team-card__media img, .ksh-team-card__cat, .ksh-team-social a, .ksh-team-more::after { transition: none; }
.ksh-team-card:hover, .ksh-team-staff__card:hover, .ksh-team-card:hover .ksh-team-card__media img, .ksh-team-card:hover .ksh-team-card__cat, .ksh-team-social a:hover { transform: none; }
}
/* ==========================================================================
Animaciones comunes del sitio
========================================================================== */
/* Entrada al hacer scroll (la clase .ksh-fx la pone el JS solo en lo que aún no se ve) */
.ksh-fx:not(.is-in) { opacity: 0; }
.ksh-fx.is-in { animation: ksh-fx-in .6s cubic-bezier(.2, .7, .2, 1) var(--ksh-fx-delay, 0ms) backwards; }
@keyframes ksh-fx-in {
from { opacity: 0; transform: translateY(24px) scale(.97); }
to { opacity: 1; transform: none; }
}
/* Hover en los elementos clicables que no lo tenían */
a.ksh-ad { transition: filter .2s ease, transform .2s ease; }
a.ksh-ad:hover { transform: translateY(-2px); }
.ksh-collab__item { transition: transform .2s ease, box-shadow .2s ease; }
.ksh-collab__item:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .15); }
/* Menú de móvil: se despliega (alto máximo animado; nav no tiene relleno y la lista tiene borde, por eso no
se usa grid 0fr), los enlaces entran escalonados y el icono gira. visibility: los enlaces cerrados no reciben foco. */
@media (max-width: 899px) {
.ksh-nav {
display: block; max-height: 0; overflow: hidden; visibility: hidden;
transition: max-height .35s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .35s;
}
body.ksh-menu-open .ksh-nav { display: block; max-height: var(--ksh-nav-h, 480px); visibility: visible; transition: max-height .45s cubic-bezier(.2, .7, .2, 1); }
.ksh-nav__list > li { opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease; }
body.ksh-menu-open .ksh-nav__list > li { opacity: 1; transform: none; transition: opacity .35s ease, transform .35s cubic-bezier(.2, .7, .2, 1); }
body.ksh-menu-open .ksh-nav__list > li:nth-child(1) { transition-delay: .05s; }
body.ksh-menu-open .ksh-nav__list > li:nth-child(2) { transition-delay: .1s; }
body.ksh-menu-open .ksh-nav__list > li:nth-child(3) { transition-delay: .15s; }
body.ksh-menu-open .ksh-nav__list > li:nth-child(4) { transition-delay: .2s; }
body.ksh-menu-open .ksh-nav__list > li:nth-child(5) { transition-delay: .25s; }
body.ksh-menu-open .ksh-nav__list > li:nth-child(n+6) { transition-delay: .3s; }
.ksh-menu-btn .ksh-icon { animation: ksh-menu-icon .3s cubic-bezier(.2, .7, .2, 1); }
}
@keyframes ksh-menu-icon { from { opacity: 0; transform: rotate(-90deg) scale(.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.ksh-fx:not(.is-in) { opacity: 1; }
.ksh-fx.is-in { animation: none; }
a.ksh-ad:hover, .ksh-collab__item:hover { transform: none; }
.ksh-nav, body.ksh-menu-open .ksh-nav, .ksh-nav__list > li, body.ksh-menu-open .ksh-nav__list > li { transition: none; }
.ksh-menu-btn .ksh-icon { animation: none; }
}
/* ==========================================================================
Navegación sin recarga (assets/ks-nav.js) y "Seguir escuchando"
========================================================================== */
/* Barra de carga arriba mientras llega la página nueva */
html.ksh-nav-loading::before {
content: ''; position: fixed; top: 0; left: 0; z-index: 100000; width: 100%; height: 3px;
background: linear-gradient(90deg, var(--ksh-hero-from), var(--ksh-dot-2), var(--ksh-blue));
transform-origin: 0 50%; animation: ksh-nav-bar 1.2s cubic-bezier(.2, .7, .2, 1) infinite;
}
@keyframes ksh-nav-bar { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(.85); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
/* Entrada suave del contenido nuevo (el player no se anima: sigue sonando) */
body.ksh-nav-enter .ksh-main, body.ksh-nav-enter .ksh-footer { animation: ksh-nav-in .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes ksh-nav-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ksh-main:focus { outline: none; }
/* Botón flotante "Seguir escuchando" (cuando el navegador no deja reanudar solo) */
.ksh-resume {
position: fixed; left: 50%; bottom: 110px; z-index: 9999; transform: translateX(-50%);
display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 8px; border-radius: 999px;
background: var(--ksh-navy); color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 0 2px var(--ksh-hero-from);
animation: ksh-resume-in .45s cubic-bezier(.2, .7, .2, 1);
}
.ksh-resume__play {
display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 0; border-radius: 999px;
background: linear-gradient(90deg, var(--ksh-hero-from), var(--ksh-dot-2)); color: #fff; cursor: pointer;
font: inherit; font-size: 14px; font-weight: 800; letter-spacing: .03em;
}
.ksh-resume__play:hover { filter: brightness(1.08); }
.ksh-resume__close {
width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer;
font-size: 22px; line-height: 1; opacity: .75;
}
.ksh-resume__close:hover { opacity: 1; }
.ksh-resume button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes ksh-resume-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* En el inicio (player en la columna, sin barra abajo) va más abajo */
body.ksh--lateral .ksh-resume, body.ksh--superior .ksh-resume { bottom: 24px; }
@media (prefers-reduced-motion: reduce) {
html.ksh-nav-loading::before { animation: none; transform: scaleX(.6); }
body.ksh-nav-enter .ksh-main, body.ksh-nav-enter .ksh-footer, .ksh-resume { animation: none; }
}
/* Contacto: tarjeta de Facebook (sustituye al iframe del plugin oficial) */
.ksh-fbcard { display: flex; flex-direction: column; padding: 0; overflow: hidden; line-height: 1.5; }
.ksh-fbcard__cover {
position: relative; height: 96px; flex: none;
background: linear-gradient(135deg, #1877f2, var(--ksh-hero-to));
}
.ksh-fbcard__fb { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; color: #fff; opacity: .9; }
.ksh-fbcard__avatar {
position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%);
display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
background: linear-gradient(135deg, var(--ksh-hero-from), var(--ksh-hero-to)); border: 4px solid var(--ksh-card-bg);
}
.ksh-fbcard__mark { width: 38px; height: auto; color: #fff; }
.ksh-fbcard__body { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; gap: 8px; padding: 44px 22px 24px; text-align: center; }
.ksh-fbcard__title { margin: 0; font-size: 17px; font-weight: 800; }
.ksh-fbcard__text { margin: 0; font-size: 13px; color: var(--ksh-muted); }
.ksh-fbcard__btn {
display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 11px 20px; border-radius: 999px;
background: #1467d6; color: #fff; font-size: 13px; /* #1877f2 con blanco: 4,23:1 */ font-weight: 800; letter-spacing: .03em; text-decoration: none;
transition: transform .15s ease, box-shadow .15s ease;
}
body.ksh .ksh-fbcard__btn { color: #fff; }
.ksh-fbcard__btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(24, 119, 242, .35); }
.ksh-fbcard__btn:focus-visible { outline: 3px solid var(--ksh-blue); outline-offset: 3px; }
.ksh-fbcard__btn .ksh-icon { font-size: 18px; }
/* ==========================================================================
Archivo de programas
========================================================================== */
.ksh-archive-lead { max-width: 720px; }
/* body.ksh sube la especificidad: el reset global "body.ksh ul" anula los márgenes. */
body.ksh .ksh-archive-hosts {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
margin: 28px 0 42px; padding: 0; list-style: none;
}
.ksh-archive-host {
display: flex; height: 100%; flex-direction: column; overflow: hidden; border-radius: var(--ksh-radius);
background: var(--ksh-card-bg); color: inherit; box-shadow: 0 10px 28px rgba(0, 0, 0, .16); text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease;
}
.ksh-archive-host:hover, .ksh-archive-host:focus-visible { transform: translateY(-4px); box-shadow: 0 15px 38px rgba(0, 0, 0, .22); }
.ksh-archive-host:focus-visible { outline: 3px solid var(--ksh-blue); outline-offset: 3px; }
.ksh-archive-host__media { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--ksh-avatar-bg); }
.ksh-archive-host__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.ksh-archive-host:hover .ksh-archive-host__media img { transform: scale(1.05); }
.ksh-archive-host__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 16px 18px 18px; }
.ksh-archive-host__body strong { font-size: 18px; font-weight: 800; }
.ksh-archive-host__body > span:not(.ksh-archive-host__cta) { margin-top: 3px; color: var(--ksh-muted); font-size: 12px; }
.ksh-archive-host__cta { margin-top: 16px; color: var(--ksh-blue); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.ksh-archive-back {
display: inline-flex; align-items: center; gap: 7px; margin: 4px 0 22px; color: var(--ksh-blue);
font-size: 12px; font-weight: 800; letter-spacing: .04em; text-decoration: none;
}
.ksh-archive-back:hover { text-decoration: underline; }
.ksh-archive-profile {
display: flex; align-items: center; gap: 18px; margin-bottom: 26px; padding: 18px 20px; border-radius: var(--ksh-radius);
background: linear-gradient(120deg, rgba(245, 5, 155, .16), rgba(10, 42, 160, .25));
}
.ksh-archive-profile__media { width: 112px; height: 112px; flex: 0 0 112px; overflow: hidden; border-radius: 50%; background: var(--ksh-avatar-bg); }
.ksh-archive-profile__media img { width: 100%; height: 100%; object-fit: cover; }
.ksh-archive-profile p, .ksh-archive-profile h2 { margin: 0; }
.ksh-archive-profile p { color: var(--ksh-blue); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.ksh-archive-profile h2 { font-size: clamp(24px, 4vw, 38px); line-height: 1.15; }
.ksh-archive-profile span { color: var(--ksh-muted); font-size: 13px; }
.ksh-archive-filter {
display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; align-items: end; gap: 12px;
margin: 0 0 22px; padding: 14px 16px; border-radius: var(--ksh-radius); background: var(--ksh-card-bg);
}
.ksh-archive-filter label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ksh-archive-filter label span { color: var(--ksh-muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ksh-archive-filter select, .ksh-archive-filter input {
width: 100%; min-width: 0; height: 40px; box-sizing: border-box; padding: 0 10px;
border: 1px solid var(--ksh-input-border); border-radius: 8px; background: var(--ksh-input-bg); color: var(--ksh-text);
font: inherit; font-size: 14px;
}
.ksh-archive-filter select:focus, .ksh-archive-filter input:focus {
outline: none; border-color: var(--ksh-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ksh-blue) 30%, transparent);
}
.ksh-archive-filter__actions { display: flex; align-items: center; gap: 12px; }
.ksh-archive-filter button {
height: 40px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer; background: var(--ksh-blue-fill); color: #fff;
font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .04em;
}
.ksh-archive-filter button:focus-visible, .ksh-archive-filter__actions a:focus-visible { outline: 3px solid var(--ksh-blue); outline-offset: 3px; }
.ksh-archive-filter__actions a { color: var(--ksh-blue); font-size: 12px; font-weight: 700; white-space: nowrap; }
.ksh-archive-filter__count { margin: -10px 0 16px; color: var(--ksh-muted); font-size: 13px; }
.ksh-archive-recordings { display: grid; gap: 16px; margin: 0 0 42px; padding: 0; list-style: none; }
.ksh-archive-recording {
display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; column-gap: 18px; row-gap: 14px; align-items: start;
padding: 18px; border-radius: var(--ksh-radius); background: var(--ksh-card-bg); box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
transition: box-shadow .2s ease;
}
/* Llegada desde un enlace compartido (#grabacion-): deja aire bajo la cabecera y marca la tarjeta. */
.ksh-archive-recording { scroll-margin-top: 110px; }
.ksh-archive-recording:target { box-shadow: 0 0 0 2px var(--ksh-blue), 0 12px 32px rgba(30, 144, 255, .25); }
.ksh-archive-recording.is-playing { box-shadow: 0 0 0 2px var(--ksh-blue), 0 12px 32px rgba(30, 144, 255, .25); }
.ksh-archive-recording__cover { width: 88px; height: 88px; overflow: hidden; border-radius: 12px; background: var(--ksh-avatar-bg); }
.ksh-archive-recording__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ksh-archive-recording__body { min-width: 0; }
.ksh-archive-recording__len { white-space: nowrap; }
.ksh-archive-toast {
position: fixed; z-index: 9999; left: 50%; bottom: 120px; max-width: calc(100% - 32px); margin: 0; padding: 12px 18px;
border-radius: 999px; background: var(--ksh-navy); color: #fff; font-size: 14px; font-weight: 700;
box-shadow: 0 10px 30px rgba(0, 0, 0, .3); transform: translateX(-50%);
}
.ksh-archive-toast[hidden] { display: none; }
.ksh-archive-recording__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; color: var(--ksh-muted); font-size: 13px; }
.ksh-archive-recording audio { display: block; width: 100%; }
.ksh-archive-recording audio, .ksh-ap { grid-column: 1 / -1; }
.ksh-ap[hidden] { display: none; }
.ksh-ap { display: grid; grid-template-columns: auto auto auto auto minmax(0, 1fr) auto auto 84px; align-items: center; gap: 10px;
padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--ksh-avatar-bg); }
body.ksh .ksh-ap button { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; cursor: pointer; font: inherit; }
body.ksh .ksh-ap__toggle { width: 46px; height: 46px; border-radius: 50%; background: var(--ksh-blue-fill); color: #fff; box-shadow: 0 6px 16px rgba(30, 144, 255, .35); transition: transform .15s ease; }
body.ksh .ksh-ap__toggle:hover { transform: scale(1.06); }
.ksh-ap__toggle svg { width: 22px; height: 22px; }
.ksh-ap__icon-pause, .is-playing .ksh-ap__icon-play { display: none; }
.is-playing .ksh-ap__icon-pause { display: block; }
.is-loading .ksh-ap__toggle { animation: ksh-ap-pulse 1s ease-in-out infinite; }
@keyframes ksh-ap-pulse { 50% { opacity: .55; } }
body.ksh .ksh-ap__skip { min-width: 38px; height: 30px; padding: 0 6px; border-radius: 999px; background: transparent; color: var(--ksh-text); font-size: 12px; font-weight: 800; }
body.ksh .ksh-ap__skip:hover { background: color-mix(in srgb, var(--ksh-blue) 15%, transparent); color: var(--ksh-blue); }
body.ksh .ksh-ap button:focus-visible { outline: 3px solid var(--ksh-blue); outline-offset: 2px; }
/* Las barras no llevan el contorno general del sitio (Chrome lo pinta también al hacer clic): el foco se marca en el tirador. */
body.ksh .ksh-ap input[type="range"]:focus-visible { outline: none; }
body.ksh .ksh-ap input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ksh-blue) 40%, transparent); }
body.ksh .ksh-ap input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ksh-blue) 40%, transparent); }
body.ksh .ksh-ap__mute { width: 32px; height: 32px; border-radius: 50%; background: transparent; color: var(--ksh-text); }
body.ksh .ksh-ap__mute:hover { background: color-mix(in srgb, var(--ksh-blue) 15%, transparent); color: var(--ksh-blue); }
.ksh-ap__mute svg { width: 20px; height: 20px; }
.ksh-ap__icon-muted, .is-muted .ksh-ap__icon-vol { display: none; }
.is-muted .ksh-ap__icon-muted { display: block; }
.ksh-ap__time, .ksh-ap__dur { color: var(--ksh-muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ksh-ap__seek, .ksh-ap__vol { --ksh-ap-fill: 0%; width: 100%; height: 6px; margin: 0; border-radius: 999px; cursor: pointer; -webkit-appearance: none; appearance: none;
background: linear-gradient(90deg, var(--ksh-blue) var(--ksh-ap-fill), color-mix(in srgb, var(--ksh-muted) 30%, transparent) var(--ksh-ap-fill)); }
.ksh-ap__seek::-webkit-slider-thumb, .ksh-ap__vol::-webkit-slider-thumb { width: 16px; height: 16px; border: 3px solid #fff; border-radius: 50%; background: var(--ksh-blue); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); -webkit-appearance: none; appearance: none; }
.ksh-ap__seek::-moz-range-thumb, .ksh-ap__vol::-moz-range-thumb { width: 12px; height: 12px; border: 3px solid #fff; border-radius: 50%; background: var(--ksh-blue); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.ksh-archive-recording h3 { margin: 2px 0 0; font-size: 18px; line-height: 1.25; }
.ksh-archive-demo { display: inline-block; color: #f43f5e; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.ksh-archive-recording__description { margin: 8px 0 0; color: var(--ksh-muted); font-size: 13px; line-height: 1.55; }
.ksh-archive-recording__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; justify-self: end; }
body.ksh .ksh-archive-download, body.ksh .ksh-archive-share { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; padding: 7px 14px; border: 1px solid color-mix(in srgb, var(--ksh-blue) 45%, transparent); border-radius: 999px; color: var(--ksh-blue); font-size: 12px; font-weight: 800; letter-spacing: .03em; text-decoration: none; }
body.ksh .ksh-archive-download:hover, body.ksh .ksh-archive-share:hover { background: var(--ksh-blue-fill); color: #fff; text-decoration: none; }
.ksh-archive-share svg { width: 15px; height: 15px; }
.ksh-archive-download:focus-visible, .ksh-archive-share:focus-visible { outline: 3px solid var(--ksh-blue); outline-offset: 3px; border-radius: 4px; }
.ksh-archive-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: -18px 0 42px; }
.ksh-archive-pages > a, .ksh-archive-pages > span {
display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 12px;
box-sizing: border-box; border-radius: 999px; background: var(--ksh-card-bg); color: var(--ksh-text);
font-size: 13px; font-weight: 800; text-decoration: none;
}
.ksh-archive-pages a:hover { color: var(--ksh-blue); }
.ksh-archive-pages a:focus-visible { outline: 3px solid var(--ksh-blue); outline-offset: 3px; }
.ksh-archive-pages .is-current { background: var(--ksh-blue-fill); color: #fff; }
.ksh-archive-empty { margin: 24px 0 42px; padding: 32px 20px; border-radius: var(--ksh-radius); background: var(--ksh-card-bg); text-align: center; }
.ksh-archive-empty h2 { margin: 0 0 5px; font-size: 18px; }
.ksh-archive-empty p { margin: 0; color: var(--ksh-muted); }
.ksh-archive-empty .ksh-archive-back { margin: 18px 0 0; }
@media (max-width: 768px) {
body.ksh .ksh-archive-hosts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ksh-archive-filter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ksh-archive-filter__actions { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
body.ksh .ksh-archive-hosts { grid-template-columns: minmax(0, 1fr); max-width: 300px; margin-right: auto; margin-left: auto; }
.ksh-archive-profile { align-items: flex-start; padding: 15px; }
.ksh-archive-profile__media { width: 78px; height: 78px; flex-basis: 78px; }
.ksh-archive-filter { grid-template-columns: 1fr 1fr; }
.ksh-archive-filter label:first-child, .ksh-archive-filter__actions { grid-column: 1 / -1; }
.ksh-archive-filter button { flex: 1; }
.ksh-archive-pages__label { display: none; }
.ksh-archive-recording { grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: 12px; padding: 14px; }
body.ksh .ksh-archive-download, body.ksh .ksh-archive-share { width: 36px; height: 36px; padding: 0; font-size: 16px; }
.ksh-archive-download__label { display: none; }
.ksh-archive-recording__weekday { display: none; }
.ksh-archive-recording__cover { width: 64px; height: 64px; border-radius: 10px; }
.ksh-archive-recording h3 { font-size: 16px; }
.ksh-ap {
grid-template-columns: auto auto auto minmax(0, 1fr) auto auto auto; grid-template-areas: "toggle seek seek seek seek seek seek" "toggle back fwd . time dur mute";
column-gap: 6px; row-gap: 4px; padding: 10px 14px 8px 8px; border-radius: 22px;
}
body.ksh .ksh-ap__toggle { grid-area: toggle; width: 50px; height: 50px; margin-right: 6px; }
.ksh-ap__skip[data-ksh-skip^="-"] { grid-area: back; }
.ksh-ap__skip:not([data-ksh-skip^="-"]) { grid-area: fwd; }
.ksh-ap__seek { grid-area: seek; margin: 6px 0; }
.ksh-ap__time { grid-area: time; }
.ksh-ap__dur { grid-area: dur; }
.ksh-ap__dur::before { content: "/ "; }
body.ksh .ksh-ap__mute { grid-area: mute; }
.ksh-ap__vol { display: none; }
}
@media (hover: none) and (pointer: coarse) and (min-width: 481px) {
.ksh-ap { grid-template-columns: auto auto auto auto minmax(0, 1fr) auto auto; }
.ksh-ap__vol { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.ksh-archive-host, .ksh-archive-host__media img, .ksh-archive-recording, body.ksh .ksh-ap__toggle { transition: none; }
.is-loading .ksh-ap__toggle { animation: none; }
.ksh-archive-host:hover, .ksh-archive-host:hover .ksh-archive-host__media img { transform: none; }
}
/* ==========================================================================
Comunidad (home lateral): pestañas Comunidad / Top semana / Peticiones
Hallmark · component: tab strip · genre: playful · theme: tokens del sitio · states: 8 · contrast: pass · v2.0.0
Píldoras de contorno como las de /peticiones/; la activa se colorea (no se desliza: Hallmark prohíbe animar width).
waive 24b: espaciado 6/14/18/26 px, la escala que ya usa toda esta hoja; el bloque sigue al resto del sitio.
========================================================================== */
.ksh-community { display: flex; flex-direction: column; gap: 16px; margin: 26px 0 16px; }
.ksh-tabs { position: relative; display: flex; gap: 8px; padding: 6px; margin: -6px; overflow-x: auto; scrollbar-width: none; } /* relleno: sitio para el anillo de foco */
.ksh-tabs::-webkit-scrollbar { display: none; }
.ksh-tab {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
font: inherit; font-size: 15px; font-weight: 800; color: var(--ksh-muted);
background: transparent; border: 2px solid var(--ksh-input-border); border-radius: 999px; cursor: pointer;
transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .1s ease;
}
.ksh-tab .ksh-icon { font-size: 20px; }
@media (hover: hover) { .ksh-tab:hover, .ksh-tab.is-hover { color: var(--ksh-text); border-color: var(--ksh-muted); } }
.ksh-tab:active, .ksh-tab.is-active { transform: scale(.96); }
.ksh-tab.is-on { color: var(--ksh-text); border-color: var(--ksh-pink); background: var(--ksh-tab-on-bg); }
.ksh-tab[disabled], .ksh-tab.is-disabled { opacity: .55; cursor: not-allowed; transform: none; }
.ksh-tab-panel[hidden] { display: none; }
/* El panel entra desde el lado de la pestaña elegida (solo transform y opacity) */
.ksh-tab-panel.is-in-next { animation: ksh-panel-next .24s cubic-bezier(.2, .7, .2, 1); }
.ksh-tab-panel.is-in-prev { animation: ksh-panel-prev .24s cubic-bezier(.2, .7, .2, 1); }
@keyframes ksh-panel-next { from { opacity: 0; transform: translateX(12px); } }
@keyframes ksh-panel-prev { from { opacity: 0; transform: translateX(-12px); } }
.ksh-top { padding: 20px; border-radius: var(--ksh-radius); background: var(--ksh-card-bg); }
body.ksh .ksh-top__title { margin: 0 0 14px; font-size: 20px; font-weight: 800; line-height: 1.3; }
.ksh-top__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ksh-top__row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border-radius: 12px; background: var(--ksh-bg); }
.ksh-top__pos { flex: 0 0 28px; font-size: 18px; font-weight: 800; color: var(--ksh-muted); }
/* Oro, plata y bronce: el número y la franja izquierda */
.ksh-top__row--1 { box-shadow: inset 3px 0 0 var(--ksh-gold); } .ksh-top__row--1 .ksh-top__pos { color: var(--ksh-gold); }
.ksh-top__row--2 { box-shadow: inset 3px 0 0 var(--ksh-silver); } .ksh-top__row--2 .ksh-top__pos { color: var(--ksh-silver); }
.ksh-top__row--3 { box-shadow: inset 3px 0 0 var(--ksh-bronze); } .ksh-top__row--3 .ksh-top__pos { color: var(--ksh-bronze); }
/* Portada: la busca el JS en el catálogo; mientras, la inicial sobre un cuadro neutro */
.ksh-top__cover { flex: 0 0 44px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--ksh-divider); font-size: 18px; font-weight: 800; color: var(--ksh-muted); }
.ksh-top__song { flex: 1; min-width: 0; }
.ksh-top__song b { display: block; font-size: 16px; overflow-wrap: break-word; }
.ksh-top__song span { display: block; font-size: 14px; color: var(--ksh-muted); }
.ksh-top__count { flex: 0 0 auto; font-size: 14px; color: var(--ksh-muted); }
/* Esqueleto mientras carga (i = puesto, b = canción, s = conteo) */
.ksh-top__row.is-skeleton > * { display: block; height: 16px; border-radius: 6px; background: var(--ksh-divider); animation: ksh-top-pulse 1.2s ease-in-out infinite; }
.ksh-top__row.is-skeleton i { width: 28px; }
.ksh-top__row.is-skeleton b { flex: 1; }
.ksh-top__row.is-skeleton s { width: 64px; }
@keyframes ksh-top-pulse { 50% { opacity: .5; } }
.ksh-top__msg { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--ksh-muted); }
.ksh-top__retry {
margin-top: 12px; min-height: 44px; padding: 0 18px; font: inherit; font-size: 15px; font-weight: 800; color: var(--ksh-text);
background: transparent; border: 2px solid var(--ksh-input-border); border-radius: 999px; cursor: pointer; transition: border-color .2s ease, transform .1s ease;
}
@media (hover: hover) { .ksh-top__retry:hover { border-color: var(--ksh-muted); } }
.ksh-top__retry:active { transform: scale(.96); }
/* Peticiones: la pinta peticiones.js en modo inicio (#ksp-app data-ksp-mode="inicio") con su propio CSS */
@media (min-width: 700px) { .ksh-tabs { justify-content: center; } }
/* Móvil: las tres pestañas se reparten el ancho, sin icono, para que ninguna quede cortada (360 px de ancho útil). */
@media (max-width: 560px) {
.ksh-tab { flex: 1 1 0; justify-content: center; padding: 0 8px; font-size: 14px; }
.ksh-tab .ksh-icon { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ksh-top__row.is-skeleton > *, .ksh-tab-panel.is-in-next, .ksh-tab-panel.is-in-prev { animation: none; } }