/*
Project: Ruben Cardozo Personal Site
Base: v2base visual system
File: assets/css/ruben-v2base-site.css
v0.4.8
Generated: 2026-04-29T14:42:39Z
Description: Capa visual propia sobre el template v2base. Mantiene su lenguaje visual y lo adapta al sitio personal.
*/

:root {
  --rc-purple: #8750f7;
  --rc-purple-dark: #2a1454;
  --rc-cyan: #38bdf8;
  --rc-panel: rgba(255,255,255,.04);
  --rc-border: rgba(255,255,255,.10);
}

.rc-logo-box {
  display: flex;
  align-items: center;
}

.rc-logo-text {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rc-purple), var(--rc-cyan));
  color: #fff !important;
  font-weight: 800;
  letter-spacing: -.06em;
  font-size: 18px;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(135,80,247,.25);
}

.rc-footer-logo {
  margin-inline: auto;
}

.header-menu ul li a {
  white-space: nowrap;
}

.rc-hero-section .hero-title {
  letter-spacing: -0.06em;
}

.rc-portrait-card {
  min-height: 420px;
  border-radius: 38px;
  border: 1px solid rgba(135,80,247,.35);
  background:
    radial-gradient(circle at 30% 20%, rgba(135,80,247,.42), transparent 34%),
    radial-gradient(circle at 80% 80%, rgba(56,189,248,.18), transparent 30%),
    linear-gradient(145deg, rgba(42,20,84,.85), rgba(15,7,21,.92));
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  transform: rotate(4deg);
  box-shadow: 0 24px 80px rgba(0,0,0,.32);
}

.rc-portrait-card::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
}

.rc-portrait-card span {
  font-size: clamp(4rem, 12vw, 9rem);
  font-weight: 900;
  letter-spacing: -.1em;
  color: rgba(255,255,255,.94);
  text-shadow: 0 20px 60px rgba(0,0,0,.4);
}

.rc-portrait-card small {
  position: absolute;
  bottom: 30px;
  color: rgba(255,255,255,.72);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
}

.rc-panel-card,
.rc-module-card {
  display: block;
  height: 100%;
  padding: 28px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(135,80,247,.18), transparent 36%),
    rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.rc-panel-card:hover,
.rc-module-card:hover {
  transform: translateY(-6px);
  border-color: rgba(135,80,247,.55);
  background:
    radial-gradient(circle at top left, rgba(135,80,247,.26), transparent 36%),
    rgba(255,255,255,.06);
}

.rc-panel-card h3,
.rc-module-card h3 {
  margin: 18px 0 12px;
  color: #fff;
  font-size: 24px;
  letter-spacing: -.03em;
}

.rc-panel-card p,
.rc-module-card p {
  color: var(--tj-grey-2, #b7b4c7);
  margin: 0;
}

.rc-chip {
  display: inline-flex;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(135,80,247,.16);
  color: var(--rc-purple);
  border: 1px solid rgba(135,80,247,.28);
  font-weight: 700;
  font-size: 13px;
}

.rc-card-grid {
  row-gap: 24px;
}

.rc-lifestyle-row {
  row-gap: 22px;
}

.rc-lifestyle-row .skill-inner {
  min-height: 130px;
  display: grid;
  place-items: center;
}

.rc-lifestyle-row .skill-inner p {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  text-transform: lowercase;
}

.rc-playground-section {
  background: var(--tj-black-2, #050709);
}

.rc-module-card {
  padding: 0;
  overflow: hidden;
  text-decoration: none;
}

.rc-module-preview {
  height: 190px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid rgba(255,255,255,.1);
  position: relative;
  overflow: hidden;
}

.rc-module-preview::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.1);
}

.rc-preview-update {
  background:
    radial-gradient(circle at 30% 20%, rgba(135,80,247,.36), transparent 38%),
    linear-gradient(135deg, rgba(56,189,248,.12), transparent),
    rgba(255,255,255,.03);
}

.rc-preview-update span {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 8px solid rgba(255,255,255,.16);
  border-top-color: var(--rc-purple);
  z-index: 1;
}

.rc-preview-grid {
  background:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    rgba(255,255,255,.03);
  background-size: 28px 28px;
}

.rc-preview-grid span {
  z-index: 1;
  font-size: 34px;
  color: rgba(255,255,255,.45);
}

.rc-module-body {
  padding: 24px;
}

.rc-module-body strong {
  display: inline-flex;
  margin-top: 18px;
  color: var(--rc-purple);
}

.rc-disabled {
  opacity: .65;
}

.contact-info-list .text-box a[href="#"] {
  pointer-events: none;
}

@media (max-width: 767px) {
  .rc-portrait-card {
    min-height: 260px;
    margin: 24px 0;
    transform: none;
  }
}



/*
Project: Ruben Cardozo Personal Site
File: assets/css/ruben-v2base-site.css
v0.4.8
Generated: 2026-04-29T14:42:39Z
Description: Base modular con themes y componentes reutilizables.
*/

/* Theme tokens */
html[data-theme="dark"] {
  --rc-bg: #050709;
  --rc-surface: rgba(255,255,255,.04);
  --rc-text: #ffffff;
  --rc-muted: #b7b4c7;
  --rc-purple: #8750f7;
  --rc-cyan: #38bdf8;
  --rc-border: rgba(255,255,255,.10);
}

html[data-theme="light"] {
  --rc-bg: #f7f5ff;
  --rc-surface: rgba(255,255,255,.78);
  --rc-text: #140c1c;
  --rc-muted: #4b5563;
  --rc-purple: #6d28d9;
  --rc-cyan: #0284c7;
  --rc-border: rgba(20,12,28,.12);
}

html[data-theme="space"] {
  --rc-bg: #020617;
  --rc-surface: rgba(15,23,42,.76);
  --rc-text: #e0f2fe;
  --rc-muted: #93a4b8;
  --rc-purple: #7c3aed;
  --rc-cyan: #22d3ee;
  --rc-border: rgba(125,211,252,.16);
}

html[data-theme="light"] body {
  background: radial-gradient(circle at top, #ffffff 0%, #f7f5ff 58%, #eef0f7 100%);
  color: var(--rc-text);
}

html[data-theme="space"] body {
  background:
    radial-gradient(circle at 20% 0%, rgba(124,58,237,.34), transparent 38%),
    radial-gradient(circle at 82% 24%, rgba(34,211,238,.14), transparent 30%),
    #020617;
}

.rc-site-header {
  transition: background .2s ease, border-color .2s ease;
}

.rc-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.rc-theme-toggle {
  min-width: 106px;
  gap: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rc-theme-toggle span:first-child {
  font-size: 16px;
  line-height: 1;
}

.rc-back-to-top {
  border: 1px solid rgba(135,80,247,.34);
  background: linear-gradient(135deg, rgba(135,80,247,.96), rgba(56,189,248,.8));
  color: #fff;
  display: grid;
  place-items: center;
}

.rc-back-to-top span {
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.rc-topic-link {
  color: inherit;
  text-decoration: none;
}

.rc-topic-link:hover {
  color: inherit;
}

.rc-inline-action {
  display: inline-flex;
  margin-top: 10px;
  color: var(--rc-purple);
  font-weight: 800;
}

html[data-theme="light"] .rc-panel-card,
html[data-theme="light"] .rc-module-card,
html[data-theme="light"] .rc-topic-page-card {
  background: rgba(255,255,255,.86);
  border-color: rgba(20,12,28,.12);
}

html[data-theme="light"] .rc-panel-card h3,
html[data-theme="light"] .rc-module-card h3,
html[data-theme="light"] .rc-topic-page-card h3 {
  color: var(--rc-text);
}

html[data-theme="light"] .rc-panel-card p,
html[data-theme="light"] .rc-module-card p,
html[data-theme="light"] .rc-topic-page-card p {
  color: var(--rc-muted);
}

/* Topic pages */
.rc-page-hero {
  padding: 180px 0 80px;
}

.rc-page-kicker {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--rc-purple);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.rc-page-title {
  font-size: clamp(3rem, 8vw, 6.2rem);
  line-height: .9;
  letter-spacing: -.075em;
  margin-bottom: 24px;
}

.rc-page-lead {
  max-width: 760px;
  color: var(--rc-muted);
  font-size: 1.1rem;
  line-height: 1.75;
}

.rc-topic-page-card {
  height: 100%;
  padding: 28px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(135,80,247,.18), transparent 36%),
    rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
}

.rc-topic-page-card h3 {
  color: #fff;
  margin-bottom: 12px;
}

.rc-topic-page-card p {
  color: var(--rc-muted);
  margin: 0;
}

@media (max-width: 991px) {
  .rc-header-actions .tj-btn-primary {
    display: none;
  }

  .rc-theme-toggle {
    min-width: auto;
    padding-left: 14px;
    padding-right: 14px;
  }
}



/*
Project: Ruben Cardozo Personal Site
File: assets/css/ruben-v2base-site.css
v0.4.8
Generated: 2026-04-29T14:42:39Z
Description: Tokens de theme, layout modular, back-to-top y componentes reutilizables.
*/

html[data-theme="dark"] {
  --rc-bg: #050709;
  --rc-surface: rgba(255,255,255,.04);
  --rc-text: #ffffff;
  --rc-muted: #b7b4c7;
  --rc-purple: #8750f7;
  --rc-cyan: #38bdf8;
  --rc-border: rgba(255,255,255,.10);
}

html[data-theme="light"] {
  --rc-bg: #f7f5ff;
  --rc-surface: rgba(255,255,255,.78);
  --rc-text: #140c1c;
  --rc-muted: #4b5563;
  --rc-purple: #6d28d9;
  --rc-cyan: #0284c7;
  --rc-border: rgba(20,12,28,.12);
}

html[data-theme="space"] {
  --rc-bg: #020617;
  --rc-surface: rgba(15,23,42,.76);
  --rc-text: #e0f2fe;
  --rc-muted: #93a4b8;
  --rc-purple: #7c3aed;
  --rc-cyan: #22d3ee;
  --rc-border: rgba(125,211,252,.16);
}

html[data-theme="light"] body {
  background: radial-gradient(circle at top, #ffffff 0%, #f7f5ff 58%, #eef0f7 100%);
  color: var(--rc-text);
}

html[data-theme="space"] body {
  background:
    radial-gradient(circle at 20% 0%, rgba(124,58,237,.34), transparent 38%),
    radial-gradient(circle at 82% 24%, rgba(34,211,238,.14), transparent 30%),
    #020617;
}

.rc-inner-content {
  padding-top: 120px;
}

.rc-site-header .header-menu ul li a.active {
  color: var(--rc-purple);
}

.rc-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rc-theme-toggle {
  min-width: 104px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.rc-back-to-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 99;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(135,80,247,.34);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rc-purple), var(--rc-cyan));
  color: #fff;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}

.rc-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.rc-back-to-top span {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.rc-topic-link {
  color: inherit;
  text-decoration: none;
}

.rc-topic-link:hover {
  color: inherit;
}

.rc-inline-action {
  display: inline-flex;
  margin-top: 10px;
  color: var(--rc-purple);
  font-weight: 800;
}

.rc-page-hero {
  padding: 60px 0 80px;
}

.rc-page-kicker {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--rc-purple);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.rc-page-title {
  font-size: clamp(3rem, 8vw, 6.2rem);
  line-height: .9;
  letter-spacing: -.075em;
  margin-bottom: 24px;
}

.rc-page-lead {
  max-width: 760px;
  color: var(--rc-muted);
  font-size: 1.1rem;
  line-height: 1.75;
}

.rc-topic-page-card {
  height: 100%;
  padding: 28px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(135,80,247,.18), transparent 36%),
    rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
}

.rc-topic-page-card h3 {
  color: #fff;
  margin-bottom: 12px;
}

.rc-topic-page-card p {
  color: var(--rc-muted);
  margin: 0;
}

.fake-update-screen {
  min-height: calc(100vh - 120px);
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 30% 0%, rgba(135,80,247,.45), transparent 38%),
    radial-gradient(circle at 80% 80%, rgba(56,189,248,.18), transparent 30%),
    transparent;
  color: #fff;
}

.back-link {
  position: fixed;
  top: 110px;
  left: 24px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 10px 16px;
  text-decoration: none;
  background: rgba(255,255,255,.06);
}

.update-card {
  width: min(100%, 620px);
  text-align: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 30px;
  background: rgba(255,255,255,.06);
  padding: clamp(34px, 7vw, 68px);
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
}

.update-spinner {
  width: 96px;
  height: 96px;
  margin: 0 auto 28px;
  border: 9px solid rgba(255,255,255,.18);
  border-top-color: var(--rc-purple);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.update-kicker {
  color: var(--rc-purple);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.update-card h1 {
  font-size: clamp(2.2rem, 7vw, 4.6rem);
  margin: 0 0 16px;
  letter-spacing: -.07em;
}

.progress-line {
  height: 10px;
  margin: 30px 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  overflow: hidden;
}

.progress-line span {
  display: block;
  height: 100%;
  width: 37%;
  background: linear-gradient(90deg, var(--rc-purple), var(--rc-cyan));
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

html[data-theme="light"] .rc-panel-card,
html[data-theme="light"] .rc-module-card,
html[data-theme="light"] .rc-topic-page-card {
  background: rgba(255,255,255,.86);
  border-color: rgba(20,12,28,.12);
}

html[data-theme="light"] .rc-panel-card h3,
html[data-theme="light"] .rc-module-card h3,
html[data-theme="light"] .rc-topic-page-card h3 {
  color: var(--rc-text);
}

html[data-theme="light"] .rc-panel-card p,
html[data-theme="light"] .rc-module-card p,
html[data-theme="light"] .rc-topic-page-card p {
  color: var(--rc-muted);
}



/*
Project: Ruben Cardozo Personal Site
File: assets/css/ruben-v2base-site.css
v0.4.8
Generated: 2026-04-29T14:42:39Z
Description: Fix visual 040: themes reales, secciones sin franjas blancas y cards visibles.
*/

:root,
html[data-theme="dark"] {
  --rc-bg: #050709;
  --rc-bg-2: #0f0715;
  --rc-section: #050709;
  --rc-section-alt: #0f0715;
  --rc-surface: rgba(255,255,255,.055);
  --rc-surface-strong: rgba(255,255,255,.085);
  --rc-text: #ffffff;
  --rc-muted: #b7b4c7;
  --rc-heading: #ffffff;
  --rc-purple: #8750f7;
  --rc-cyan: #38bdf8;
  --rc-border: rgba(255,255,255,.12);
  --rc-shadow: 0 24px 80px rgba(0,0,0,.35);
}

html[data-theme="light"] {
  --rc-bg: #f6f3ff;
  --rc-bg-2: #ffffff;
  --rc-section: #f6f3ff;
  --rc-section-alt: #ffffff;
  --rc-surface: rgba(255,255,255,.88);
  --rc-surface-strong: rgba(255,255,255,.96);
  --rc-text: #140c1c;
  --rc-muted: #4b5563;
  --rc-heading: #140c1c;
  --rc-purple: #6d28d9;
  --rc-cyan: #0284c7;
  --rc-border: rgba(20,12,28,.13);
  --rc-shadow: 0 24px 70px rgba(20,12,28,.12);
}

html[data-theme="space"] {
  --rc-bg: #020617;
  --rc-bg-2: #07111f;
  --rc-section: #020617;
  --rc-section-alt: #07111f;
  --rc-surface: rgba(15,23,42,.78);
  --rc-surface-strong: rgba(15,23,42,.92);
  --rc-text: #e0f2fe;
  --rc-muted: #93a4b8;
  --rc-heading: #f8fafc;
  --rc-purple: #7c3aed;
  --rc-cyan: #22d3ee;
  --rc-border: rgba(125,211,252,.16);
  --rc-shadow: 0 24px 80px rgba(0,0,0,.42);
}

html,
body {
  background: var(--rc-bg) !important;
  color: var(--rc-text) !important;
}

body {
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--rc-purple) 28%, transparent), transparent 34%),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--rc-cyan) 14%, transparent), transparent 32%),
    linear-gradient(180deg, var(--rc-bg), var(--rc-bg-2)) !important;
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 18% 0%, rgba(109,40,217,.13), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(2,132,199,.10), transparent 32%),
    linear-gradient(180deg, #ffffff, #f6f3ff) !important;
}

html[data-theme="space"] body {
  background:
    radial-gradient(circle at 18% 0%, rgba(124,58,237,.34), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(34,211,238,.16), transparent 32%),
    linear-gradient(180deg, #020617, #07111f) !important;
}

.hero-section,
.services-section,
.portfolio-section,
.resume-section,
.skills-section,
.testimonial-section,
.blog-section,
.contact-section,
.tj-footer-area,
.rc-playground-section,
.rc-inner-content,
.site-content {
  background: transparent !important;
}

.services-section,
.portfolio-section,
.resume-section,
.skills-section,
.testimonial-section,
.blog-section,
.contact-section {
  position: relative;
  z-index: 1;
}

.services-section::before,
.portfolio-section::before,
.resume-section::before,
.skills-section::before,
.testimonial-section::before,
.blog-section::before,
.contact-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rc-section);
  opacity: .58;
  z-index: -1;
}

.portfolio-section::before,
.skills-section::before,
.contact-section::before {
  background: var(--rc-section-alt);
  opacity: .48;
}

html[data-theme="light"] .services-section::before,
html[data-theme="light"] .portfolio-section::before,
html[data-theme="light"] .resume-section::before,
html[data-theme="light"] .skills-section::before,
html[data-theme="light"] .testimonial-section::before,
html[data-theme="light"] .blog-section::before,
html[data-theme="light"] .contact-section::before {
  opacity: .82;
}

.section-title,
.hero-title,
.hero-sub-title,
.resume-title,
.service-title,
.rc-page-title,
.rc-panel-card h3,
.rc-module-card h3,
.rc-topic-page-card h3,
.update-card h1 {
  color: var(--rc-heading) !important;
}

.section-header p,
.hero-content-box .lead,
.resume-item .institute,
.rc-panel-card p,
.rc-module-card p,
.rc-topic-page-card p,
.rc-page-lead,
.update-card p {
  color: var(--rc-muted) !important;
}

html[data-theme="light"] .intro_text svg text {
  stroke: rgba(109,40,217,.11) !important;
}

.rc-site-header {
  background: color-mix(in srgb, var(--rc-bg) 78%, transparent) !important;
  border-bottom: 1px solid var(--rc-border);
  backdrop-filter: blur(18px);
}

.header-menu ul li a,
.header-info-list ul li a {
  color: var(--rc-text) !important;
}

.header-menu ul li a:hover,
.header-menu ul li a.active {
  color: var(--rc-purple) !important;
}

.rc-theme-toggle {
  border-color: var(--rc-border) !important;
  color: #fff !important;
}

html[data-theme="light"] .rc-theme-toggle {
  color: var(--rc-text) !important;
  background: var(--rc-surface) !important;
}

.rc-panel-card,
.rc-module-card,
.rc-topic-page-card,
.resume-item,
.skill-item .skill-inner,
.contact-form-box {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--rc-purple) 18%, transparent), transparent 36%),
    var(--rc-surface) !important;
  border: 1px solid var(--rc-border) !important;
  box-shadow: var(--rc-shadow) !important;
  color: var(--rc-text) !important;
}

.resume-item:hover,
.skill-item .skill-inner:hover,
.rc-panel-card:hover,
.rc-module-card:hover,
.rc-topic-page-card:hover {
  border-color: color-mix(in srgb, var(--rc-purple) 60%, var(--rc-border)) !important;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--rc-purple) 26%, transparent), transparent 36%),
    var(--rc-surface-strong) !important;
}

.service-item {
  background: var(--rc-surface) !important;
  border: 1px solid var(--rc-border) !important;
  border-radius: 18px;
  margin-bottom: 12px;
  overflow: hidden;
}

.service-item.current,
.service-item:hover {
  background: var(--rc-surface-strong) !important;
}

.services-widget .active-bg {
  display: none !important;
}

.rc-topic-link {
  color: var(--rc-text) !important;
}

.skill-item .skill-inner p {
  color: var(--rc-text) !important;
}

.form_group input,
.form_group textarea,
.form_group select {
  background: var(--rc-surface) !important;
  border-color: var(--rc-border) !important;
  color: var(--rc-text) !important;
}

.form_group input::placeholder,
.form_group textarea::placeholder {
  color: var(--rc-muted) !important;
}

.contact-info-list .text-box p {
  color: var(--rc-muted) !important;
}

.contact-info-list .text-box a {
  color: var(--rc-text) !important;
}

.rc-back-to-top {
  position: fixed !important;
  right: 30px !important;
  bottom: 30px !important;
  z-index: 999 !important;
  width: 48px !important;
  height: 48px !important;
  border: 1px solid color-mix(in srgb, var(--rc-purple) 55%, transparent) !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--rc-purple), var(--rc-cyan)) !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}

.rc-back-to-top.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.rc-back-to-top span {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.fake-update-screen {
  min-height: calc(100vh - 120px);
  background: transparent !important;
}

.back-link {
  color: var(--rc-text) !important;
  background: var(--rc-surface) !important;
  border-color: var(--rc-border) !important;
}

.update-card {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--rc-purple) 20%, transparent), transparent 36%),
    var(--rc-surface) !important;
  border: 1px solid var(--rc-border) !important;
  color: var(--rc-text) !important;
}

.rc-inner-content {
  padding-top: 120px;
}

.rc-page-hero {
  padding-top: 40px;
}



/*
Project: Ruben Cardozo Personal Site
File: assets/css/ruben-v2base-site.css
v0.4.8
Generated: 2026-04-29T14:42:39Z
Description: Theme segmented control, topics independientes y header fixed configurable.
*/

.rc-theme-selector {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--rc-border);
  border-radius: 999px;
  background: var(--rc-surface);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.rc-theme-option {
  width: 38px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--rc-text);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: background .18s ease, transform .18s ease, color .18s ease;
}

.rc-theme-option:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--rc-purple) 18%, transparent);
}

.rc-theme-option.is-active {
  background: linear-gradient(135deg, var(--rc-purple), var(--rc-cyan));
  color: #fff;
}

.rc-header-fixed {
  position: sticky !important;
  top: 0;
}

.rc-header-static {
  position: relative !important;
}

.rc-topics-section {
  background: transparent !important;
}

.rc-posts-section {
  background: transparent !important;
}

.rc-post-grid {
  row-gap: 24px;
}

.rc-post-card {
  display: block;
  height: 100%;
  padding: 28px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--rc-purple) 18%, transparent), transparent 36%),
    var(--rc-surface) !important;
  border: 1px solid var(--rc-border) !important;
  box-shadow: var(--rc-shadow) !important;
  color: var(--rc-text) !important;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.rc-post-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--rc-purple) 60%, var(--rc-border)) !important;
}

.rc-post-card h3 {
  color: var(--rc-heading) !important;
  margin: 16px 0 10px;
}

.rc-post-card p {
  color: var(--rc-muted) !important;
  margin: 0;
}

.rc-post-card .rc-chip {
  margin-bottom: 4px;
}

@media (max-width: 991px) {
  .rc-theme-selector {
    margin-right: 8px;
  }

  .rc-theme-option {
    width: 34px;
    height: 32px;
  }
}




/*
Project: Ruben Cardozo Personal Site
File: assets/css/ruben-v2base-site.css
v0.4.8
Generated: 2026-04-29T14:42:39Z
Description: Fix 042: header fixed config visible and light-mode menu contrast.
*/

/* Header behavior from config/site.php */
.rc-site-header.rc-header-fixed {
  position: sticky !important;
  top: 0 !important;
}

.rc-site-header.rc-header-static {
  position: relative !important;
  top: auto !important;
}

/* Light mode header contrast */
html[data-theme="light"] .rc-site-header {
  background: rgba(255, 255, 255, .92) !important;
  border-bottom: 1px solid rgba(20, 12, 28, .12) !important;
  box-shadow: 0 14px 40px rgba(20, 12, 28, .08);
}

html[data-theme="light"] .header-menu ul li a,
html[data-theme="light"] .header-info-list ul li a {
  color: #140c1c !important;
}

html[data-theme="light"] .header-menu ul li a:hover,
html[data-theme="light"] .header-menu ul li a.active {
  color: #6d28d9 !important;
}

html[data-theme="light"] .menu-bar button span {
  background-color: #140c1c !important;
}

html[data-theme="light"] .rc-logo-text {
  color: #ffffff !important;
}

html[data-theme="light"] .rc-theme-selector {
  background: rgba(255,255,255,.94) !important;
  border-color: rgba(20,12,28,.14) !important;
}

html[data-theme="light"] .rc-theme-option {
  color: #140c1c !important;
}

html[data-theme="light"] .rc-theme-option.is-active {
  color: #ffffff !important;
}

/* Dark/space remain readable */
html[data-theme="dark"] .rc-site-header,
html[data-theme="space"] .rc-site-header {
  background: rgba(5, 7, 9, .82) !important;
}

html[data-theme="dark"] .header-menu ul li a,
html[data-theme="space"] .header-menu ul li a,
html[data-theme="dark"] .header-info-list ul li a,
html[data-theme="space"] .header-info-list ul li a {
  color: #ffffff !important;
}




/*
Project: Ruben Cardozo Personal Site
File: assets/css/ruben-v2base-site.css
v0.4.8
Generated: 2026-04-29T14:42:39Z
Description: Fix 043: sticky real, light mobile menu contrast, switch light/dark y logo flat.
*/

/* Force sticky behavior when config says fixed */
.rc-site-header.rc-header-fixed {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  z-index: 999 !important;
  width: 100% !important;
}

.rc-site-header.rc-header-static {
  position: relative !important;
  top: auto !important;
}

body.absolute_header {
  padding-top: 0 !important;
}

/* Logo */
.rc-logo-box {
  display: flex !important;
  align-items: center !important;
}

.rc-logo-link {
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  text-decoration: none;
}

.rc-logo-svg {
  width: 56px;
  height: 56px;
  display: block;
  filter: drop-shadow(0 14px 26px rgba(135,80,247,.24));
}

.rc-logo-text {
  display: none !important;
}

/* Light/dark switch */
.rc-theme-switch {
  width: 88px;
  height: 44px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--rc-border);
  background: var(--rc-surface);
  box-shadow: 0 12px 34px rgba(0,0,0,.16);
  cursor: pointer;
}

.rc-theme-switch__icon {
  position: relative;
  z-index: 2;
  width: 28px;
  display: grid;
  place-items: center;
  font-size: 17px;
  line-height: 1;
}

.rc-theme-switch__thumb {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rc-purple), var(--rc-cyan));
  box-shadow: 0 8px 18px rgba(0,0,0,.24);
  transition: transform .22s ease;
  z-index: 1;
}

.rc-theme-switch.is-dark .rc-theme-switch__thumb {
  transform: translateX(44px);
}

.rc-theme-switch.is-light .rc-theme-switch__thumb {
  transform: translateX(0);
}

/* Hide old segmented selector if browser cached old markup */
.rc-theme-selector {
  display: none !important;
}

/* Header contrast */
html[data-theme="light"] .rc-site-header {
  background: rgba(255, 255, 255, .94) !important;
  border-bottom: 1px solid rgba(20, 12, 28, .12) !important;
  box-shadow: 0 14px 40px rgba(20, 12, 28, .08);
}

html[data-theme="dark"] .rc-site-header {
  background: rgba(5, 7, 9, .86) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

html[data-theme="light"] .header-menu ul li a,
html[data-theme="light"] .header-info-list ul li a {
  color: #140c1c !important;
}

html[data-theme="light"] .header-menu ul li a:hover,
html[data-theme="light"] .header-menu ul li a.active {
  color: #6d28d9 !important;
}

html[data-theme="dark"] .header-menu ul li a,
html[data-theme="dark"] .header-info-list ul li a {
  color: #ffffff !important;
}

html[data-theme="dark"] .header-menu ul li a:hover,
html[data-theme="dark"] .header-menu ul li a.active {
  color: #8750f7 !important;
}

html[data-theme="light"] .menu-bar button span {
  background-color: #140c1c !important;
}

html[data-theme="dark"] .menu-bar button span {
  background-color: #ffffff !important;
}

/* Mobile menu overlay fixes */
@media (max-width: 991px) {
  .header-menu {
    background: rgba(42, 20, 84, .98) !important;
  }

  html[data-theme="light"] .header-menu {
    background: linear-gradient(180deg, #ffffff, #f6f3ff) !important;
  }

  html[data-theme="dark"] .header-menu {
    background: linear-gradient(180deg, #160827, #2a1454) !important;
  }

  html[data-theme="light"] .header-menu ul li a {
    color: #f5f3ff !important;
    background: rgba(109,40,217,.92);
    border-radius: 18px;
  }

  html[data-theme="light"] .header-menu ul li a.active,
  html[data-theme="light"] .header-menu ul li a:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #6d28d9, #0284c7);
  }

  html[data-theme="dark"] .header-menu ul li a {
    color: #ffffff !important;
  }

  .header-menu ul li a {
    text-align: center;
  }

  .rc-header-actions .tj-btn-primary {
    display: none;
  }
}

/* Remove space remnants */
html[data-theme="space"] {
  --rc-bg: #050709;
  --rc-bg-2: #0f0715;
  --rc-section: #050709;
  --rc-section-alt: #0f0715;
  --rc-surface: rgba(255,255,255,.055);
  --rc-surface-strong: rgba(255,255,255,.085);
  --rc-text: #ffffff;
  --rc-muted: #b7b4c7;
  --rc-heading: #ffffff;
  --rc-purple: #8750f7;
  --rc-cyan: #38bdf8;
  --rc-border: rgba(255,255,255,.12);
  --rc-shadow: 0 24px 80px rgba(0,0,0,.35);
}




/*
Project: Ruben Cardozo Personal Site
File: assets/css/ruben-v2base-site.css
v0.4.8
Generated: 2026-04-29T14:42:39Z
Description: Fix 044: header fixed real, menú mobile light sólido y footer light oscuro.
*/

/* Header fixed/static: override template scroll behavior */
.rc-site-header.rc-header-fixed,
.tj-header-area.rc-site-header.rc-header-fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.rc-site-header.rc-header-static,
.tj-header-area.rc-site-header.rc-header-static {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
}

body.absolute_header {
  padding-top: 0 !important;
}

.rc-site-header.rc-header-fixed + .site-content,
body:has(.rc-site-header.rc-header-fixed) .site-content {
  padding-top: 96px;
}

.rc-site-header.sticky,
.rc-site-header.header-sticky,
.rc-site-header.sticky-out {
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Light desktop header */
html[data-theme="light"] .rc-site-header {
  background: rgba(255,255,255,.94) !important;
  border-bottom: 1px solid rgba(20,12,28,.12) !important;
  box-shadow: 0 14px 40px rgba(20,12,28,.08);
}

html[data-theme="light"] .header-menu > nav > ul > li > a,
html[data-theme="light"] .header-info-list ul li a {
  color: #140c1c !important;
}

html[data-theme="light"] .header-menu > nav > ul > li > a:hover,
html[data-theme="light"] .header-menu > nav > ul > li > a.active {
  color: #6d28d9 !important;
}

/* Mobile menu: no line-only look; solid purple panel + white links */
@media (max-width: 991px) {
  html[data-theme="light"] .header-menu,
  html[data-theme="light"] .header-menu.open,
  html[data-theme="light"] .header-menu.menu-open,
  html[data-theme="light"] .header-menu.active {
    background: linear-gradient(180deg, #2a1454 0%, #160827 100%) !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 24px 70px rgba(42,20,84,.28) !important;
  }

  html[data-theme="light"] .header-menu ul,
  html[data-theme="light"] .header-menu nav {
    background: transparent !important;
  }

  html[data-theme="light"] .header-menu ul li {
    border-color: rgba(255,255,255,.08) !important;
  }

  html[data-theme="light"] .header-menu ul li a,
  html[data-theme="light"] .header-menu > nav > ul > li > a {
    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html[data-theme="light"] .header-menu ul li a:hover,
  html[data-theme="light"] .header-menu ul li a.active,
  html[data-theme="light"] .header-menu > nav > ul > li > a:hover,
  html[data-theme="light"] .header-menu > nav > ul > li > a.active {
    color: #ffffff !important;
    background: rgba(135,80,247,.28) !important;
  }

  html[data-theme="light"] .menu-bar button span {
    background-color: #140c1c !important;
  }
}

/* Footer light mode */
html[data-theme="light"] .tj-footer-area,
html[data-theme="light"] .rc-site-footer {
  background: #ffffff !important;
  color: #140c1c !important;
  border-top: 1px solid rgba(20,12,28,.10);
}

html[data-theme="light"] .footer-menu ul li a,
html[data-theme="light"] .copy-text p,
html[data-theme="light"] .tj-footer-area p,
html[data-theme="light"] .tj-footer-area a {
  color: #140c1c !important;
}

html[data-theme="light"] .footer-menu ul li a:hover {
  color: #6d28d9 !important;
}

html[data-theme="dark"] .footer-menu ul li a,
html[data-theme="dark"] .copy-text p,
html[data-theme="dark"] .tj-footer-area p,
html[data-theme="dark"] .tj-footer-area a {
  color: #ffffff !important;
}




/*
Project: Ruben Cardozo Personal Site
File: assets/css/ruben-v2base-site.css
v0.4.8
Generated: 2026-04-29T14:42:39Z
Description: Estilos Resume y Portfolio profesional.
*/

.rc-resume-hero .button-box {
  gap: 12px;
}

.rc-impact-card {
  height: 100%;
  min-height: 170px;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 28px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--rc-purple) 22%, transparent), transparent 38%),
    var(--rc-surface) !important;
  border: 1px solid var(--rc-border) !important;
  box-shadow: var(--rc-shadow) !important;
}

.rc-impact-card strong {
  display: block;
  color: var(--rc-heading);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: .9;
  letter-spacing: -.07em;
}

.rc-impact-card span {
  color: var(--rc-muted);
  font-weight: 700;
}

.rc-detail-sidebar,
.rc-detail-block {
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--rc-purple) 18%, transparent), transparent 36%),
    var(--rc-surface) !important;
  border: 1px solid var(--rc-border) !important;
  box-shadow: var(--rc-shadow) !important;
  color: var(--rc-text) !important;
}

.rc-detail-sidebar {
  position: sticky;
  top: 130px;
  padding: 28px;
}

.rc-detail-sidebar h3,
.rc-detail-block h2 {
  color: var(--rc-heading) !important;
}

.rc-detail-sidebar p,
.rc-detail-block p,
.rc-detail-sidebar li,
.rc-detail-block li {
  color: var(--rc-muted) !important;
}

.rc-detail-sidebar ul,
.rc-detail-block ul {
  padding-left: 18px;
  margin-bottom: 0;
}

.rc-detail-block {
  padding: 30px;
  margin-bottom: 20px;
}

.rc-detail-block h2 {
  margin: 16px 0 12px;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -.045em;
}

.rc-detail-block li + li {
  margin-top: 8px;
}

html[data-theme="light"] .rc-impact-card,
html[data-theme="light"] .rc-detail-sidebar,
html[data-theme="light"] .rc-detail-block {
  background: rgba(255,255,255,.9) !important;
}

@media (max-width: 991px) {
  .rc-detail-sidebar {
    position: relative;
    top: auto;
    margin-bottom: 24px;
  }
}




/*
Project: Ruben Cardozo Personal Site
File: assets/css/ruben-v2base-site.css
Version: v0.4.8
Generated: 2026-04-29T14:42:39Z
Description: PlayGround index basado en framework root.
*/

.rc-playground-grid {
  row-gap: 24px;
}

.rc-playground-index-card {
  position: relative;
  min-height: 240px;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--rc-purple) 20%, transparent), transparent 38%),
    var(--rc-surface) !important;
  border: 1px solid var(--rc-border) !important;
  box-shadow: var(--rc-shadow) !important;
  color: var(--rc-text) !important;
  text-decoration: none !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.rc-playground-index-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, color-mix(in srgb, var(--rc-cyan) 18%, transparent), transparent 40%);
  opacity: 0;
  transition: opacity .2s ease;
}

.rc-playground-index-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--rc-purple) 60%, var(--rc-border)) !important;
  box-shadow: 0 28px 86px rgba(0,0,0,.36) !important;
}

.rc-playground-index-card:hover::before {
  opacity: 1;
}

.rc-playground-index-card > * {
  position: relative;
  z-index: 1;
}

.rc-playground-card-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 26px;
}

.rc-playground-index-card h3 {
  color: var(--rc-heading) !important;
  margin: 0 0 10px;
  font-size: 24px;
  letter-spacing: -.035em;
}

.rc-playground-index-card p {
  color: var(--rc-muted) !important;
  line-height: 1.55;
  margin: 0 0 20px;
}

.rc-playground-index-card .rc-chip {
  width: fit-content;
  margin-top: auto;
}

.rc-playground-index-card.rc-disabled {
  cursor: default;
  opacity: .62;
}

.rc-playground-index-card.rc-disabled:hover {
  transform: none;
}

html[data-theme="light"] .rc-playground-card-icon {
  background: rgba(109,40,217,.08);
  border-color: rgba(109,40,217,.14);
}