.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================================
RAYOSPEDIA — SISTEMA DE DISEÑO
rayospedia.com · academia (Tutor LMS Pro + Bricks)
--------------------------------------------------------------------------
Derivado de la identidad actual de rayospedia.shop:
rojo #FF3232 + negro del logotipo, crema #F9F5F0, tipografÃa Jost, radio 10px.
DÓNDE VA: Bricks → Settings → Custom CSS (global), o un archivo
del child theme encolado. NUNCA en functions.php del tema padre.
REGLA DE USO: ningún color, tamaño o espaciado se escribe a mano en un
elemento. Todo sale de estas variables. Si necesitas un valor que no está
aquÃ, primero se agrega aquÃ.
========================================================================== */
/* --------------------------------------------------------------------------
1. PALETA — MARKETING (modo claro)
-------------------------------------------------------------------------- */
:root {
/* Rojo de marca ---------------------------------------------------------
--rp-red es el color del logo: úsalo en elementos gráficos, iconos,
subrayados, barras de progreso y bordes. NO lo uses como fondo de un
botón con texto blanco: su contraste es 3.6:1 y no cumple WCAG AA.
Para cualquier botón o etiqueta con texto encima, usa --rp-cta (5.0:1). */
--rp-red: #FF3232; /* marca / acento gráfico */
--rp-cta: #D62828; /* botones y CTA (texto blanco, AA) */
--rp-cta-hover: #B01D1D; /* hover / active */
--rp-red-soft: #FFF1F1; /* fondos de badge, alertas suaves */
--rp-red-line: #FFD6D6; /* bordes sobre fondo suave */
/* Neutros ---------------------------------------------------------------- */
--rp-ink: #16181B; /* titulares */
--rp-body: #3A3F46; /* texto corrido */
--rp-muted: #6B7280; /* metadatos, captions, placeholders */
--rp-line: #E5E3E0; /* bordes y separadores */
--rp-surface: #FFFFFF; /* fondo base */
--rp-surface-2: #F9F5F0; /* crema de marca: secciones alternas */
--rp-surface-3: #F4F4F4; /* gris frÃo: cards, inputs */
/* Estados ---------------------------------------------------------------
Deliberadamente NO se usa rojo para "error": el rojo es la marca y si
también significa peligro, el usuario deja de leerlo como marca. */
--rp-ok: #17A34A;
--rp-ok-soft: #ECFDF3;
--rp-warn: #B45309;
--rp-warn-soft: #FFFBEB;
--rp-info: #1D4ED8;
--rp-info-soft: #EFF4FF;
/* Alias semánticos — usa SIEMPRE estos en los componentes, nunca los de
arriba. Esto es lo que hace que el modo aula funcione con un solo cambio. */
--bg: var(--rp-surface);
--bg-raised: var(--rp-surface);
--bg-sunken: var(--rp-surface-3);
--text: var(--rp-ink);
--text-body: var(--rp-body);
--text-muted: var(--rp-muted);
--border: var(--rp-line);
--accent: var(--rp-red);
--accent-cta: var(--rp-cta);
--accent-cta-hv: var(--rp-cta-hover);
--on-accent: #FFFFFF;
/* ------------------------------------------------------------------------
2. TIPOGRAFÃA — Jost para titulares (es la de la marca),
Inter para texto corrido (mucho mejor legibilidad a 16px en lecciones).
Ambas en Google Fonts. Cárgalas con display=swap y solo los pesos
listados: 4 archivos, no 18.
------------------------------------------------------------------------ */
--font-display: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--fw-regular: 400;
--fw-medium: 500;
--fw-semi: 600;
--fw-bold: 700;
/* Escala de 6 pasos, fluida. No inventes tamaños intermedios. */
--fs-1: 0.8125rem; /* 13px · legales, tags */
--fs-2: 0.9375rem; /* 15px · metadatos, UI */
--fs-3: 1.0625rem; /* 17px · cuerpo base */
--fs-4: clamp(1.25rem, 0.9rem + 1vw, 1.5rem); /* h3 · tÃtulos de card */
--fs-5: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); /* h2 · tÃtulos de sección */
--fs-6: clamp(2.25rem, 1.4rem + 3.2vw, 3.5rem); /* h1 · hero */
--lh-tight: 1.12; /* h1 / h2 */
--lh-snug: 1.28; /* h3 / h4 */
--lh-base: 1.65; /* texto corrido */
--lh-loose: 1.75; /* lecciones largas */
--ls-display: -0.02em; /* Jost pide apretar en tamaños grandes */
--ls-eyebrow: 0.14em; /* para el "EXPERTOS EN EDUCACIÓN MÉDICA" en mayúsculas */
--measure: 68ch; /* ancho máximo de un párrafo. Respétalo siempre. */
/* ------------------------------------------------------------------------
3. ESPACIADO — base 8px. Solo estos valores existen.
------------------------------------------------------------------------ */
--sp-1: 0.25rem; /* 4px */
--sp-2: 0.5rem; /* 8px */
--sp-3: 0.75rem; /* 12px */
--sp-4: 1rem; /* 16px */
--sp-5: 1.5rem; /* 24px */
--sp-6: 2rem; /* 32px */
--sp-7: 3rem; /* 48px */
--sp-8: 4rem; /* 64px */
--sp-9: 6rem; /* 96px */
--sp-10: 8rem; /* 128px */
--section-y: clamp(var(--sp-7), 6vw, var(--sp-9)); /* aire vertical de sección */
--gutter: clamp(var(--sp-4), 4vw, var(--sp-6)); /* margen lateral */
--container: 1200px; /* marketing */
--container-wide: 1440px;
--container-read: 760px; /* texto de lección */
/* ------------------------------------------------------------------------
4. FORMA — un solo radio de componente (10px, el de la marca actual).
El pill es solo para badges y avatares.
------------------------------------------------------------------------ */
--radius: 10px;
--radius-sm: 6px; /* inputs, chips pequeños */
--radius-pill: 999px;
--border-w: 1px;
/* Dos sombras. No añadas una tercera. */
--shadow-1: 0 1px 2px rgba(22,24,27,.05), 0 2px 8px rgba(22,24,27,.06);
--shadow-2: 0 12px 32px rgba(22,24,27,.12);
/* ------------------------------------------------------------------------
5. MOVIMIENTO
------------------------------------------------------------------------ */
--ease: cubic-bezier(.2,.7,.3,1);
--dur-fast: 120ms;
--dur: 200ms;
/* Capas */
--z-header: 100;
--z-drawer: 200;
--z-modal: 300;
}
/* --------------------------------------------------------------------------
6. MODO AULA (oscuro)
--------------------------------------------------------------------------
Se activa añadiendo la clase .rp-aula al en lecciones, quizzes y
reproductor. Marketing en claro, aula en oscuro: las imágenes radiológicas
se leen sobre fondo negro y eso es justo lo que impide que el sitio parezca
"otro LMS de plantilla".
Solo se redefinen los alias semánticos. Ningún componente se reescribe.
-------------------------------------------------------------------------- */
.rp-aula {
--bg: #0D0F12; /* casi negro: el gris del negatoscopio */
--bg-raised: #14171C; /* paneles, sidebar, cards */
--bg-sunken: #090B0D; /* marco del reproductor */
--text: #E8EAED;
--text-body: #C7CCD4;
--text-muted: #8A929E;
--border: #272C34;
--accent: #FF4D4D; /* rojo aclarado: sobre negro rinde mejor */
--accent-cta: #E23B3B;
--accent-cta-hv: #FF5757;
--on-accent: #FFFFFF;
--shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
--shadow-2: 0 16px 40px rgba(0,0,0,.55);
color-scheme: dark;
}
/* El área donde va la placa: negro puro y sin filtros. Nunca pongas una
imagen radiológica sobre fondo claro ni le apliques sombra o borde de color. */
.rp-aula .rp-viewer,
.rp-aula .rp-media {
background: #000;
border-radius: var(--radius);
overflow: hidden;
}
/* --------------------------------------------------------------------------
7. BASE
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body {
background: var(--bg);
color: var(--text-body);
font-family: var(--font-text);
font-size: var(--fs-3);
line-height: var(--lh-base);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .rp-display {
font-family: var(--font-display);
color: var(--text);
letter-spacing: var(--ls-display);
margin: 0 0 var(--sp-4);
}
h1 { font-size: var(--fs-6); font-weight: var(--fw-semi); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-5); font-weight: var(--fw-semi); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-4); font-weight: var(--fw-semi); line-height: var(--lh-snug); }
p { max-width: var(--measure); margin: 0 0 var(--sp-4); }
a { color: var(--accent-cta); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* Etiqueta superior en mayúsculas, el recurso tipográfico de la marca */
.rp-eyebrow {
font-family: var(--font-display);
font-size: var(--fs-2);
font-weight: var(--fw-semi);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--accent);
}
.rp-container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.rp-section { padding-block: var(--section-y); }
/* --------------------------------------------------------------------------
8. COMPONENTES BASE
Créalos en Bricks como CLASES GLOBALES con estos nombres. Nunca estilices
un botón dentro de una página: se estiliza la clase, una sola vez.
-------------------------------------------------------------------------- */
/* Botones */
.rp-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
font-family: var(--font-display);
font-size: var(--fs-3);
font-weight: var(--fw-semi);
line-height: 1;
padding: var(--sp-3) var(--sp-5);
min-height: 48px; /* objetivo táctil */
border: var(--border-w) solid transparent;
border-radius: var(--radius);
cursor: pointer;
text-decoration: none;
transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.rp-btn:active { transform: translateY(1px); }
.rp-btn--primary { background: var(--accent-cta); color: var(--on-accent); }
.rp-btn--primary:hover { background: var(--accent-cta-hv); }
.rp-btn--secondary { background: transparent; color: var(--text); border-color: var(--border); }
.rp-btn--secondary:hover { background: var(--bg-sunken); }
.rp-btn--ghost { background: transparent; color: var(--accent-cta); padding-inline: var(--sp-2); }
.rp-btn--lg { font-size: var(--fs-4); padding: var(--sp-4) var(--sp-6); min-height: 56px; }
.rp-btn--full { width: 100%; }
/* Card (base de la card de curso) */
.rp-card {
background: var(--bg-raised);
border: var(--border-w) solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-1);
overflow: hidden;
transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.rp-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.rp-card__media { aspect-ratio: 16 / 10; background: #000; }
.rp-card__body { padding: var(--sp-5); }
.rp-card__title { font-size: var(--fs-4); margin-bottom: var(--sp-2); }
.rp-card__meta { font-size: var(--fs-2); color: var(--text-muted); }
/* Badge */
.rp-badge {
display: inline-flex; align-items: center; gap: var(--sp-1);
font-size: var(--fs-1); font-weight: var(--fw-semi);
letter-spacing: .04em; text-transform: uppercase;
padding: var(--sp-1) var(--sp-3);
border-radius: var(--radius-pill);
background: var(--rp-red-soft); color: var(--rp-cta);
}
.rp-badge--ok { background: var(--rp-ok-soft); color: var(--rp-ok); }
.rp-badge--free { background: var(--rp-info-soft); color: var(--rp-info); }
.rp-aula .rp-badge { background: rgba(255,77,77,.14); color: var(--accent); }
/* Progreso — componente propio; el de Tutor por defecto es lo que delata al plugin */
.rp-progress { height: 6px; border-radius: var(--radius-pill); background: var(--border); overflow: hidden; }
.rp-progress__bar { height: 100%; background: var(--accent); border-radius: inherit; transition: width var(--dur) var(--ease); }
/* Campos */
.rp-field {
width: 100%;
font-family: var(--font-text); font-size: var(--fs-3);
padding: var(--sp-3) var(--sp-4);
min-height: 48px;
color: var(--text);
background: var(--bg);
border: var(--border-w) solid var(--border);
border-radius: var(--radius-sm);
}
.rp-field::placeholder { color: var(--text-muted); }
.rp-field:focus { border-color: var(--accent); }
/* --------------------------------------------------------------------------
9. PUENTE CON TUTOR LMS
--------------------------------------------------------------------------
Tutor trae sus propias variables CSS. En vez de pelear .elementor-kit-6 por .elementor-kit-6,
se reasignan a las tuyas. Verifica los nombres reales en tu instalación
(inspector → :root) y ajusta: cambian entre versiones.
Descomenta cuando tengas Tutor instalado.
-------------------------------------------------------------------------- */
/*
:root {
--tutor-color-primary: var(--accent-cta);
--tutor-color-primary-hover: var(--accent-cta-hv);
--tutor-color-primary-rgb: 214, 40, 40;
--tutor-body-color: var(--text-body);
--tutor-border-color: var(--border);
--tutor-border-radius-6: var(--radius);
--tutor-body-font-family: var(--font-text);
}
.rp-aula {
--tutor-color-white: var(--bg-raised);
--tutor-body-color: var(--text-body);
--tutor-border-color: var(--border);
}
*/
/* --------------------------------------------------------------------------
10. SNIPPET PARA ACTIVAR EL MODO AULA
--------------------------------------------------------------------------
Va en WPCodeBox (PHP), no en functions.php del tema padre.
Confirma los post types de tu versión de Tutor antes de darlo por bueno.
add_filter( 'body_class', function( $classes ) {
if ( is_singular( array( 'lesson', 'tutor_quiz', 'tutor_assignments' ) ) ) {
$classes[] = 'rp-aula';
}
return $classes;
} );
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
11. CARGA DE FUENTES (en el , vÃa Bricks → Custom code)
--------------------------------------------------------------------------
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}/* End custom CSS */