/* =============================================================
   PIPELINE Design System
   webpersonal/core/static/core/css/pipeline.css
   ============================================================= */

/* ===== Google Fonts ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ===== Custom Properties ===== */
:root {
  /* Backgrounds */
  --pipeline-bg:            #020817;
  --pipeline-bg-secondary:  #0a1628;
  --pipeline-bg-card:       rgba(10, 22, 40, 0.6);
  --pipeline-bg-overlay:    rgba(2, 8, 23, 0.85);

  /* Acentos */
  --pipeline-cyan:          #06b6d4;
  --pipeline-cyan-dim:      rgba(6, 182, 212, 0.15);
  --pipeline-cyan-glow:     rgba(6, 182, 212, 0.35);
  --pipeline-blue:          #2563eb;
  --pipeline-blue-dim:      rgba(37, 99, 235, 0.15);
  --pipeline-green:         #10b981;
  --pipeline-green-dim:     rgba(16, 185, 129, 0.15);
  --pipeline-amber:         #f59e0b;
  --pipeline-amber-dim:     rgba(245, 158, 11, 0.15);

  /* Gradientes */
  --pipeline-grad-primary:  linear-gradient(135deg, #06b6d4 0%, #2563eb 100%);
  --pipeline-grad-subtle:   linear-gradient(135deg, rgba(6,182,212,0.2) 0%, rgba(37,99,235,0.2) 100%);
  --pipeline-grad-top-line: linear-gradient(90deg, #06b6d4, #2563eb, #10b981);

  /* Texto */
  --pipeline-text:          #f0f6ff;
  --pipeline-text-muted:    #7ea8cc;
  --pipeline-text-faint:    #3d6080;

  /* Glassmorphism */
  --pipeline-glass-bg:      rgba(10, 22, 40, 0.55);
  --pipeline-glass-border:  rgba(6, 182, 212, 0.2);
  --pipeline-glass-blur:    16px;
  --pipeline-glass-shadow:  0 8px 32px rgba(2, 8, 23, 0.6), 0 0 0 1px rgba(6, 182, 212, 0.1);

  /* Tipografía */
  --pipeline-font-sans:     'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --pipeline-font-mono:     'JetBrains Mono', 'Courier New', monospace;

  /* Espaciado */
  --pipeline-radius:        8px;
  --pipeline-radius-lg:     12px;
  --pipeline-radius-full:   9999px;

  /* Transiciones */
  --pipeline-transition:    all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== Fondo — grilla de coordenadas con puntos en intersecciones ===== */
.pipeline-bg {
  position: relative;
  background-color: var(--pipeline-bg);
  overflow: hidden;
}

.pipeline-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(6, 182, 212, 0.25) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

.pipeline-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(6, 182, 212, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 182, 212, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* ===== Blobs de glow ambiental ===== */
.pipeline-glow-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.pipeline-glow-blob--cyan {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.18) 0%, transparent 70%);
}

.pipeline-glow-blob--blue {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.14) 0%, transparent 70%);
}

.pipeline-glow-blob--green {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.12) 0%, transparent 70%);
}

/* ===== Tipografía ===== */
.pipeline-font-sans { font-family: var(--pipeline-font-sans); }
.pipeline-font-mono { font-family: var(--pipeline-font-mono); }

.pipeline-heading {
  font-family: var(--pipeline-font-sans);
  font-weight: 700;
  color: var(--pipeline-text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.pipeline-text {
  font-family: var(--pipeline-font-sans);
  color: var(--pipeline-text-muted);
  line-height: 1.7;
}

.pipeline-code {
  font-family: var(--pipeline-font-mono);
  font-size: 0.875em;
  color: var(--pipeline-cyan);
}

/* ===== Cards glassmorphism ===== */
.pipeline-card {
  position: relative;
  background: var(--pipeline-glass-bg);
  backdrop-filter: blur(var(--pipeline-glass-blur));
  -webkit-backdrop-filter: blur(var(--pipeline-glass-blur));
  border: 1px solid var(--pipeline-glass-border);
  border-radius: var(--pipeline-radius-lg);
  box-shadow: var(--pipeline-glass-shadow);
  padding: 28px;
  transition: var(--pipeline-transition);
  overflow: hidden;
}

/* Línea gradiente superior */
.pipeline-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--pipeline-grad-top-line);
  opacity: 0.7;
  transition: opacity 0.25s ease;
}

/* Hover: sube 4px + refuerza borde + intensifica línea */
.pipeline-card:hover {
  transform: translateY(-4px);
  border-color: rgba(6, 182, 212, 0.45);
  box-shadow:
    0 16px 48px rgba(2, 8, 23, 0.7),
    0 0 0 1px rgba(6, 182, 212, 0.25),
    0 0 30px rgba(6, 182, 212, 0.08);
}

.pipeline-card:hover::before {
  opacity: 1;
}

/* Variante sin padding (para imágenes o contenido full-bleed) */
.pipeline-card--flush {
  padding: 0;
}

/* Variante más oscura */
.pipeline-card--dark {
  background: rgba(2, 8, 23, 0.75);
  border-color: rgba(6, 182, 212, 0.12);
}

/* ===== Botones ===== */

/* Primary — gradiente cyan→blue */
.btn-pipeline-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  font-family: var(--pipeline-font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--pipeline-grad-primary);
  border: none;
  border-radius: var(--pipeline-radius-full);
  cursor: pointer;
  text-decoration: none !important;
  transition: var(--pipeline-transition);
  position: relative;
  overflow: hidden;
}

.btn-pipeline-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background 0.2s ease;
  border-radius: inherit;
}

.btn-pipeline-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.45), 0 4px 12px rgba(37, 99, 235, 0.3);
  color: #ffffff !important;
}

.btn-pipeline-primary:hover::after {
  background: rgba(255, 255, 255, 0.08);
}

.btn-pipeline-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Outline — borde cyan, fondo transparente */
.btn-pipeline-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 27px;
  font-family: var(--pipeline-font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pipeline-cyan);
  background: transparent;
  border: 1.5px solid var(--pipeline-cyan);
  border-radius: var(--pipeline-radius-full);
  cursor: pointer;
  text-decoration: none !important;
  transition: var(--pipeline-transition);
}

.btn-pipeline-outline:hover {
  background: var(--pipeline-cyan-dim);
  color: var(--pipeline-cyan) !important;
  box-shadow: 0 0 16px var(--pipeline-cyan-glow);
  transform: translateY(-2px);
}

.btn-pipeline-outline:active {
  transform: translateY(0);
}

/* Ghost — sin borde, texto tenue */
.btn-pipeline-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  font-family: var(--pipeline-font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--pipeline-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--pipeline-radius);
  cursor: pointer;
  text-decoration: none !important;
  transition: var(--pipeline-transition);
}

.btn-pipeline-ghost:hover {
  background: rgba(6, 182, 212, 0.08);
  color: var(--pipeline-text) !important;
}

.btn-pipeline-ghost:active {
  background: rgba(6, 182, 212, 0.14);
}

/* ===== Tags de tecnología ===== */
.tech-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  font-family: var(--pipeline-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: var(--pipeline-radius-full);
  border: 1px solid;
  line-height: 1.4;
  white-space: nowrap;
  transition: var(--pipeline-transition);
}

/* Default — cyan */
.tech-tag,
.tech-tag--cyan {
  color: var(--pipeline-cyan);
  background: var(--pipeline-cyan-dim);
  border-color: rgba(6, 182, 212, 0.3);
}

.tech-tag:hover,
.tech-tag--cyan:hover {
  background: rgba(6, 182, 212, 0.25);
  border-color: rgba(6, 182, 212, 0.55);
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
}

/* Variante azul */
.tech-tag--blue {
  color: #60a5fa;
  background: var(--pipeline-blue-dim);
  border-color: rgba(37, 99, 235, 0.35);
}

.tech-tag--blue:hover {
  background: rgba(37, 99, 235, 0.25);
  border-color: rgba(37, 99, 235, 0.6);
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.2);
}

/* Variante verde */
.tech-tag--green {
  color: var(--pipeline-green);
  background: var(--pipeline-green-dim);
  border-color: rgba(16, 185, 129, 0.3);
}

.tech-tag--green:hover {
  background: rgba(16, 185, 129, 0.25);
  border-color: rgba(16, 185, 129, 0.55);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

/* ===== Badges de status ===== */
.badge-pipeline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--pipeline-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--pipeline-radius-full);
  border: 1px solid;
  line-height: 1.4;
}

/* Punto de status */
.badge-pipeline::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Producción — azul #2563eb */
.badge-produccion {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.35);
}
.badge-produccion::before {
  background: #3B82F6;
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.7);
  animation: pulse-prod 2s ease-in-out infinite;
}
@keyframes pulse-prod {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* Desarrollo — ámbar #f59e0b */
.badge-desarrollo {
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.35);
}
.badge-desarrollo::before {
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.7);
  animation: pipeline-pulse-amber 2s ease-in-out infinite;
}

/* Completado — verde #10b981 */
.badge-completado {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.35);
}
.badge-completado::before {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.7);
}

/* ===== Animaciones ===== */
@keyframes pipeline-pulse-amber {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

@keyframes pipeline-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pipeline-glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(6, 182, 212, 0.2); }
  50%       { box-shadow: 0 0 40px rgba(6, 182, 212, 0.4); }
}

.pipeline-fade-in {
  animation: pipeline-fade-in 0.5s ease forwards;
}

/* ===== Utilidades de layout ===== */
.pipeline-content {
  position: relative;
  z-index: 1;
}

.pipeline-divider {
  border: none;
  border-top: 1px solid rgba(6, 182, 212, 0.12);
  margin: 40px 0;
}

.pipeline-label {
  font-family: var(--pipeline-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pipeline-text-faint);
}

/* ===== Gradient text ===== */
.gradient-main {
  background: linear-gradient(135deg, #2563eb 0%, #06b6d4 50%, #10b981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== Dark-theme protection for Pipeline sections ===== */
/*
 * theme.css aplica `body.dark-theme span { color: #e0e0e0 !important }`
 * que sobreescribe el color cyan inline de spans dentro de .pipeline-bg.
 * Como pipeline.css carga después de theme.css y esta regla tiene mayor
 * especificidad, se restaura el color de acento correcto.
 */
body.dark-theme .pipeline-bg span {
  color: var(--pipeline-cyan) !important;
}

/* ===== Body + HTML background Pipeline ===== */
html.dark-theme {
  background-color: #020817 !important;
}
body.dark-theme {
  background-color: #020817 !important;
}

/* ===== Neutraliza el padding de .content-section en páginas Pipeline ===== */
/*
 * design.css define .content-section { padding: 80px 0 } que genera un
 * espacio vacío entre el masthead y el footer cuando {% block content %}
 * está vacío (home, about, portfolio, contact usan masthead, no content).
 * pipeline.css carga después de design.css, por lo que gana con !important.
 */
.content-section {
  padding: 0 !important;
  min-height: 0 !important;
}

/* ===== design.css overrides ===== */
/*
 * design.css usa `!important` en `footer` y `hr` que aplanan los estilos
 * Pipeline. Como pipeline.css carga después de design.css, las reglas con
 * igual o mayor especificidad + !important aquí ganan por orden de fuente.
 *
 * Nota: <footer> está fuera de .pipeline-bg (es hermano en base.html), por
 * eso se apunta directamente con `footer`. El selector `footer hr` cubre el
 * hr del footer; `.pipeline-bg hr` cubre los hr dentro de secciones Pipeline.
 */

/* Anula margin-bottom de design.css en columnas del footer */
.footer-col {
  margin-bottom: 0 !important;
}

/* Footer: fondo oscuro Pipeline */
footer {
  background-color: var(--pipeline-bg-secondary, #0a1628) !important;
  padding: 0 !important;
}

/* hr del footer únicamente — no afecta hr.srl-hr de títulos de sección */
footer .footer-hr {
  border: none !important;
  border-top: none !important;
  background-image: none;  /* reset por si acaso */
  margin: 0 !important;    /* cada uso define su propio margin inline */
}

/* Línea divisora del footer — gradiente según tema */
footer .footer-hr {
  background: linear-gradient(135deg, #2563eb, #06b6d4, #10b981);
}

/* =============================================================
   TEMA CLARO
   Activado cuando body NO tiene la clase .dark-theme.
   body:not(.dark-theme) tiene especificidad 0-1-1, mayor que
   :root (0-1-0), por lo que sobreescribe todas las custom props.
   ============================================================= */

/* ── Custom properties ── */
body:not(.dark-theme) {
  /* Backgrounds */
  --pipeline-bg:            #EAE3DB;
  --pipeline-bg-secondary:  #E2DBD3;
  --pipeline-bg-card:       rgba(255, 255, 255, 0.50);
  --pipeline-bg-overlay:    rgba(234, 227, 219, 0.85);

  /* Acentos */
  --pipeline-cyan:          #0D6E5B;
  --pipeline-cyan-dim:      rgba(13, 110, 91, 0.08);
  --pipeline-cyan-glow:     rgba(13, 110, 91, 0.18);
  --pipeline-blue:          #1A5276;
  --pipeline-blue-dim:      rgba(26, 82, 118, 0.08);
  --pipeline-green:         #148F63;
  --pipeline-green-dim:     rgba(20, 143, 99, 0.08);
  --pipeline-amber:         #A07820;
  --pipeline-amber-dim:     rgba(160, 120, 32, 0.08);

  /* Gradientes */
  --pipeline-grad-primary:  linear-gradient(135deg, #064E3B 0%, #047857 30%, #059669 60%, #10B981 100%);
  --pipeline-grad-subtle:   linear-gradient(135deg, rgba(13,110,91,0.08) 0%, rgba(20,143,99,0.08) 100%);
  --pipeline-grad-top-line: linear-gradient(90deg, #0D6E5B, #148F63, #1A9F72);

  /* Texto */
  --pipeline-text:          #2A2622;
  --pipeline-text-muted:    #7A746E;
  --pipeline-text-faint:    #918B85;

  /* Glassmorphism */
  --pipeline-glass-bg:      rgba(255, 255, 255, 0.50);
  --pipeline-glass-border:  rgba(0, 0, 0, 0.06);
  --pipeline-glass-blur:    16px;
  --pipeline-glass-shadow:  0 4px 24px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* ── HTML background (cubre overscroll iOS y áreas expuestas de html) ── */
html:not(.dark-theme) {
  background-color: #EAE3DB !important;
}
body:not(.dark-theme) {
  background-color: #EAE3DB !important;
}

/* ── Pipeline-bg background ── */
body:not(.dark-theme) .pipeline-bg {
  background-color: #EAE3DB;
}

/* ── Grid dots — teal oscuro muy sutil ── */
body:not(.dark-theme) .pipeline-bg::before {
  background-image: radial-gradient(circle, rgba(13, 110, 91, 0.12) 1px, transparent 1px);
}
body:not(.dark-theme) .pipeline-bg::after {
  background-image:
    linear-gradient(rgba(13, 110, 91, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 110, 91, 0.05) 1px, transparent 1px);
}

/* ── Glow blobs más sutiles en tema claro ── */
body:not(.dark-theme) .pipeline-glow-blob--cyan {
  background: radial-gradient(circle, rgba(13, 110, 91, 0.07) 0%, transparent 70%);
}
body:not(.dark-theme) .pipeline-glow-blob--blue {
  background: radial-gradient(circle, rgba(26, 82, 118, 0.05) 0%, transparent 70%);
}
body:not(.dark-theme) .pipeline-glow-blob--green {
  background: radial-gradient(circle, rgba(20, 143, 99, 0.05) 0%, transparent 70%);
}

/* ── Pipeline card hover ── */
body:not(.dark-theme) .pipeline-card:hover {
  border-color: rgba(13, 110, 91, 0.22);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.10),
    0 0 0 1px rgba(13, 110, 91, 0.10);
}

/* ── Gradient text ── */
body:not(.dark-theme) .gradient-main {
  background: linear-gradient(135deg, #064E3B 0%, #047857 30%, #059669 60%, #10B981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Hero name "Marcelo" (#hero-first) — mismo gradiente que .gradient-main ── */
body:not(.dark-theme) #hero-first {
  background: linear-gradient(135deg, #064E3B 0%, #047857 30%, #059669 60%, #10B981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Tech tags ── */
body:not(.dark-theme) .tech-tag,
body:not(.dark-theme) .tech-tag--cyan {
  color: #0D6E5B;
  background: rgba(13, 110, 91, 0.08);
  border-color: rgba(13, 110, 91, 0.22);
}
body:not(.dark-theme) .tech-tag:hover,
body:not(.dark-theme) .tech-tag--cyan:hover {
  background: rgba(13, 110, 91, 0.14);
  border-color: rgba(13, 110, 91, 0.38);
  box-shadow: none;
}
body:not(.dark-theme) .tech-tag--blue {
  color: #1A5276;
  background: rgba(26, 82, 118, 0.08);
  border-color: rgba(26, 82, 118, 0.22);
}
body:not(.dark-theme) .tech-tag--blue:hover {
  background: rgba(26, 82, 118, 0.14);
  border-color: rgba(26, 82, 118, 0.38);
  box-shadow: none;
}
body:not(.dark-theme) .tech-tag--green {
  color: #148F63;
  background: rgba(20, 143, 99, 0.08);
  border-color: rgba(20, 143, 99, 0.22);
}

/* ── Badges ── */
body:not(.dark-theme) .badge-produccion {
  color: #1A5276;
  background: rgba(26, 82, 118, 0.10);
  border-color: rgba(26, 82, 118, 0.25);
}
body:not(.dark-theme) .badge-produccion::before {
  background: #1A5276;
  box-shadow: 0 0 5px rgba(26, 82, 118, 0.4);
}
body:not(.dark-theme) .badge-desarrollo {
  color: #7A5C1E;
  background: rgba(160, 120, 32, 0.10);
  border-color: rgba(160, 120, 32, 0.25);
}
body:not(.dark-theme) .badge-desarrollo::before {
  background: #A07820;
  box-shadow: 0 0 5px rgba(160, 120, 32, 0.4);
}
body:not(.dark-theme) .badge-completado {
  color: #148F63;
  background: rgba(20, 143, 99, 0.10);
  border-color: rgba(20, 143, 99, 0.25);
}
body:not(.dark-theme) .badge-completado::before {
  background: #148F63;
  box-shadow: 0 0 5px rgba(20, 143, 99, 0.4);
}

/* ── Botón outline ── */
body:not(.dark-theme) .btn-pipeline-outline {
  color: #0A4F42;
  border: 1.5px solid #0A4F42;
}
body:not(.dark-theme) .btn-pipeline-outline:hover {
  color: #0A4F42 !important;
  background: rgba(10, 79, 66, 0.08);
  box-shadow: 0 0 12px rgba(10, 79, 66, 0.18);
}

/* ── Footer ── */
body:not(.dark-theme) footer {
  background-color: #E2DBD3 !important;
  border-top-color: rgba(0, 0, 0, 0.08);
}
body:not(.dark-theme) footer .footer-hr {
  background: linear-gradient(135deg, #064E3B, #047857, #059669, #10B981);
}
body:not(.dark-theme) .footer-col .fa-envelope {
  color: #EA4335 !important;
}
body:not(.dark-theme) .footer-col .fa-whatsapp {
  color: #25D366 !important;
}
body:not(.dark-theme) .footer-col .fa-github {
  color: #2A2622 !important;
}
body:not(.dark-theme) .footer-col .fa-linkedin {
  color: #0A66C2 !important;
}

/* ── Navbar ── */
body:not(.dark-theme) #mainNav {
  background: rgba(234, 227, 219, 0.82) !important;
  border-bottom-color: rgba(13, 110, 91, 0.12) !important;
}
body:not(.dark-theme) .pipeline-nav-link {
  color: rgba(42, 38, 34, 0.70) !important;
}
body:not(.dark-theme) .pipeline-nav-link:hover {
  color: #0D6E5B !important;
  background: rgba(13, 110, 91, 0.07);
}

/* ── Divider ── */
body:not(.dark-theme) .pipeline-divider {
  border-top-color: rgba(0, 0, 0, 0.08);
}

/* ── ETL Monitor card ── */
body:not(.dark-theme) .etl-card {
  background: rgba(13, 110, 91, 0.06);
  border: 1px solid rgba(13, 110, 91, 0.15);
}
body:not(.dark-theme) .etl-card::before {
  background: linear-gradient(90deg, #0D6E5B, #148F63, #1A9F72);
}
body:not(.dark-theme) .etl-title {
  color: #0D6E5B;
}
body:not(.dark-theme) .etl-step-name {
  color: #148F63;
}
body:not(.dark-theme) .etl-step-pct {
  color: #0D6E5B;
}
body:not(.dark-theme) .etl-bar-track {
  background: rgba(13, 110, 91, 0.08);
}
body:not(.dark-theme) .etl-bar-fill,
body:not(.dark-theme) .etl-bar-fill--green,
body:not(.dark-theme) .etl-bar-fill--cyan,
body:not(.dark-theme) .etl-bar-fill--blue {
  background: #0D6E5B;
}
body:not(.dark-theme) .etl-terminal {
  background: rgba(13, 110, 91, 0.04);
  border-color: rgba(13, 110, 91, 0.12);
}
body:not(.dark-theme) .etl-terminal .t-key   { color: #0D6E5B; }
body:not(.dark-theme) .etl-terminal .t-green  { color: #148F63; }
body:not(.dark-theme) .etl-terminal .t-cyan   { color: #0D6E5B; }
body:not(.dark-theme) .etl-terminal .t-white  { color: rgba(42, 38, 34, 0.80); }

/* ── ETL Terminal v2 ── */
body:not(.dark-theme) .etl-terminal-v2 {
  background: rgba(13, 110, 91, 0.06);
  border-color: rgba(13, 110, 91, 0.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
body:not(.dark-theme) .etlv2-titlebar {
  background: rgba(13, 110, 91, 0.05);
  border-bottom-color: rgba(13, 110, 91, 0.12);
}
body:not(.dark-theme) .etlv2-title {
  color: rgba(13, 110, 91, 0.75);
}
body:not(.dark-theme) .etlv2-prompt    { color: #0D6E5B; }
body:not(.dark-theme) .etlv2-cmd       { color: rgba(42, 38, 34, 0.85); }
body:not(.dark-theme) .etlv2-ts        { color: rgba(42, 38, 34, 0.35); }
body:not(.dark-theme) .etlv2-info      { color: rgba(42, 38, 34, 0.60); }
body:not(.dark-theme) .etlv2-ok        { color: #148F63; }
body:not(.dark-theme) .etlv2-lbl-green { color: #148F63; }
body:not(.dark-theme) .etlv2-lbl-cyan  { color: #0D6E5B; }
body:not(.dark-theme) .etlv2-lbl-blue  { color: #0D6E5B; }
body:not(.dark-theme) .etlv2-divider   { color: rgba(13, 110, 91, 0.22); }
body:not(.dark-theme) .etlv2-ready     { color: #148F63; }

/* ── Contact social icons: borde teal + shadow para visibilidad sobre fondo claro ── */
body:not(.dark-theme) .csi-icon-wrap {
  border: 1.5px solid #0D6E5B;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ── Ícono GitHub: blanco→negro cálido para ser visible sobre fondo beige ── */
body:not(.dark-theme) .ti-brand-github.csi-icon {
  color: #2A2622 !important;
}

/* ── Hero metrics: teal en tema claro (anula inherit!important de span override) ── */
body:not(.dark-theme) .pipeline-bg .so-value {
  color: var(--so-color, #0D6E5B) !important;
}

/* ── Hero underline (línea bajo "MARCELO ZEPEDA") — gradiente esmeralda ── */
body:not(.dark-theme) #hero-underline {
  background: linear-gradient(90deg, #064E3B, #047857, #059669, #10B981);
  box-shadow: 0 0 10px rgba(5, 150, 105, 0.35);
}

/* ── Hero scan line — teal en lugar de cyan ── */
body:not(.dark-theme) #hero-scan-line {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(13, 110, 91, 0.5) 8%,
    #0D6E5B 50%,
    rgba(13, 110, 91, 0.5) 92%,
    transparent 100%
  );
}

/* ── Barras de métricas (so-bar) — esmeralda ── */
body:not(.dark-theme) .so-bar-track {
  background: rgba(13, 110, 91, 0.10);
}
body:not(.dark-theme) .so-bar-fill {
  background: linear-gradient(90deg, #047857, #0D6E5B);
}

/* ── ETL v2: barra de progreso y cursor — teal ── */
body:not(.dark-theme) .etlv2-bar-fill {
  background: #0D6E5B;
}
body:not(.dark-theme) .etlv2-cursor {
  background: #0D6E5B;
}

/* ===== Responsive ===== */
@media (max-width: 767px) {
  .pipeline-card {
    padding: 20px;
  }

  .btn-pipeline-primary,
  .btn-pipeline-outline {
    padding: 10px 20px;
    font-size: 12px;
  }

  /* Oculta franjas entre masthead y footer en mobile */
  .content-section { display: none !important; }
  .section-divider  { display: none !important; }
}

/* ===== Tema claro — overrides mobile ===== */

/* Hamburguesa y controles: bordes/iconos teal en tema claro */
@media (max-width: 991px) {
  body:not(.dark-theme) .navbar-toggler {
    border-color: rgba(13, 110, 91, 0.45) !important;
    color: #0D6E5B !important;
  }

  /* Menú colapsable: fondo beige explícito + borde teal */
  body:not(.dark-theme) #navbarMobile {
    background: rgba(234, 227, 219, 0.98);
    border-top-color: rgba(13, 110, 91, 0.12) !important;
  }

  /* Toggle de tema y selector de idioma en tema claro */
  body:not(.dark-theme) #theme-toggle,
  body:not(.dark-theme) #lang-toggle {
    border-color: rgba(13, 110, 91, 0.45) !important;
    color: #2A2622 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body:not(.dark-theme) #theme-toggle:hover,
  body:not(.dark-theme) #lang-toggle:hover {
    background: rgba(13, 110, 91, 0.08) !important;
    border-color: #0D6E5B !important;
  }
}

/* Fondo beige forzado en mobile para tema claro */
@media (max-width: 768px) {
  html:not(.dark-theme) {
    background-color: #EAE3DB !important;
  }
  body:not(.dark-theme) {
    background-color: #EAE3DB !important;
  }
  body:not(.dark-theme) .pipeline-bg {
    background-color: #EAE3DB !important;
  }
  /* Footer: anula el fallback oscuro de var(--pipeline-bg-secondary, #0a1628)
     cuando el browser mobile no resuelve la custom property en :not() */
  body:not(.dark-theme) footer {
    background-color: #E2DBD3 !important;
  }
}

/* Íconos del footer en mobile: teal en lugar de cyan */
@media (max-width: 768px) {
  body:not(.dark-theme) .footer-col .fa-envelope {
    color: #0D6E5B !important;
  }
  body:not(.dark-theme) .footer-label {
    color: #0D6E5B !important;
  }
}