:root{
  --color-primary:#F28A1E;
  --color-primary-dark:#D97A1A;
  --color-dark:#222222;
  --color-brown:#4A2E1F;
  --color-bg:#FAFAFA;
  --color-gray:#666666;
  --radius-lg:18px;
  --radius-md:12px;
  --shadow-soft:0 18px 40px rgba(0,0,0,0.08);
  --max-width:1080px
}




@media (prefers-color-scheme:dark){

  /* --- Core tokens (fix: avoid “pure black”, increase tonal separation) --- */
  :root{
    --color-bg:#0b0f14;          /* was #050608 (too black) */
    --color-dark:#f5f7fa;
    --color-gray:#b2bac6;        /* slightly brighter for readability */
    --color-brown:#f3d2aa;

    /* Shadows in dark mode should be subtle; heavy black shadows don't create depth */
    --shadow-soft:0 14px 28px rgba(0,0,0,0.45);
  }

  body{
    background:var(--color-bg);
    color:var(--color-dark);
  }

  header{
    background:rgba(11,15,20,.92);
    border-bottom:1px solid rgba(255,255,255,.08);
    backdrop-filter:saturate(140%) blur(6px);
  }

  /* Keep section backgrounds transparent, but give the page a little structure */
  .cases,.contact,.hero,.problem-grid,.solution,.testimonials,section{
    background:transparent;
  }


  .mobile-menu,
  .mobile-menu a {
    color: var(--color-dark);
  }
  .mobile-menu {
    background: #050608;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.8);
  }
  .mobile-menu .nav-cta {
    background: var(--color-primary);
    color: #fff;
  }

  .badge {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.badge span {
  color: #374151;        /* gris oscuro, legible */
  font-weight: 500;      /* antes 400 o menos */
  letter-spacing: 0.2px;
}


  /* --- Text colors (retain your intent but ensure contrast) --- */
  .case-body,
  .client-review-text,
  .contact p,
  .contact-note,
  .footer-links a,
  .hero-footnote,
  .hero-subtitle,
  .nav-cta,
  .problem-note,
  .process-cta p,
  .section-description,
  .service-intro,
  .service-list,
  .service-result,
  .step-body,
  footer{
    color:var(--color-gray);
  }

  /* --- Cards: main fix (more separation) --- */
  .benefit-card,
  .client-card,
  .hero-card,
  .problem-card,
  .process-step,
  .service-card{
    background:#121826; /* was #101218 (too close to bg) */
    color:var(--color-dark);
    border:1px solid rgba(255,255,255,.14); /* was .10 */
    box-shadow:var(--shadow-soft);
  }

  /* Add subtle hover lift for “shape” (optional but helps perception) */
  .benefit-card:hover,
  .client-card:hover,
  .hero-card:hover,
  .problem-card:hover,
  .process-step:hover,
  .service-card:hover{
    box-shadow:0 18px 40px rgba(0,0,0,0.55);
    border-color:rgba(255,255,255,.18);
    transform:translateY(-1px);
  }

  /* --- Specific elements --- */
  .metric{
    background:#1b2434; /* was #181c26 */
    border:1px solid rgba(255,255,255,.10);
  }

  .solution-card{
    background:#0f1520; /* was #07090d (too black) */
    border:1px solid rgba(255,255,255,.10);
    box-shadow:var(--shadow-soft);
  }

  .cases{
    background:transparent;
  }

  .case-card{
    background:#121a2a; /* was #0c0f17 */
    border-color:rgba(255,255,255,.12); /* was .08 */
    box-shadow:var(--shadow-soft);
  }

  .contact-inner{
    background:#0f1520; /* was #05070c */
    border:1px solid rgba(255,255,255,.10);
    box-shadow:var(--shadow-soft);
  }

  /* CTA chip/button in nav */
  .nav-cta{
    background:#121826; /* was #101218 */
    border-color:rgba(255,255,255,.14);
  }

  .nav-cta:hover{
    border-color:var(--color-primary);
    color:var(--color-primary);
  }

  /* Inputs: slightly brighter backgrounds to read boundaries */
  input,textarea{
    background:rgba(255,255,255,.06); /* was .04 */
    border-color:rgba(255,255,255,.22); /* was .18 */
    color:#ffffff;
  }

  input::placeholder,textarea::placeholder{
    color:#8e97a6; /* slightly brighter than before */
  }

  footer{
    border-top:1px solid rgba(255,255,255,.10);
  }

  .testimonial-placeholder{
    background:#1b1a16; /* slightly more neutral */
    color:var(--color-brown);
    border-color:rgba(255,255,255,.10);
  }

  .client-logo-wrap{
    background:#141c2a; /* was #0f1118 */
    border-color:rgba(255,255,255,.10); /* was .06 */
  }

  .contact-meta{
    color:var(--color-gray);
  }

  .contact-meta a{
    color:#ffffff;
  }

  .case-tag{
    color:#c2c9d6; /* brighter than #aeb2c4 */
  }

  .step-number{
    border-color:rgba(242,138,30,.65);   /* keep brand */
    background:rgba(242,138,30,.16);
    color:var(--color-brown);
  }

  /* --- Pricing section (keep your structure, improve separation) --- */
  .pricing,.pricing-grid{
    background:transparent!important;
  }

  .pricing{
    color:var(--color-dark);
  }

  .pricing .section-title,
  .pricing-title{
    color:var(--color-dark)!important;
  }

  .pricing .section-description,
  .pricing-cta,
  .pricing-intro,
  .pricing-list,
  .pricing-list li,
  .pricing-note{
    color:var(--color-gray)!important;
  }

  .pricing-card{
    background:#121826!important; /* aligned with other cards */
    border:1px solid rgba(255,255,255,.14)!important;
    box-shadow:var(--shadow-soft)!important;
    color:var(--color-dark)!important;
  }

  .pricing-price{
    color:var(--color-primary)!important;
  }
  /* ======================================================
   RESCATE DEL MODO OSCURO (DARK MODE RESCUE)
   Pega esto al final de dark.css para anular el modo claro
   ====================================================== */

/* 1. Devolver el fondo oscuro a las tarjetas y formularios */
.solution-card, 
.case-card, 
.contact-inner, 
.project-card,
.pricing-card {
  background-color: #121826 !important; /* Fondo oscuro */
  border-color: rgba(255,255,255,0.12) !important;
  color: #f5f7fa !important;
}

/* 2. Devolver el color CLARO a los textos de lectura */
.case-body, 
.case-body p, 
.case-body li, 
.contact-left p, 
.contact-list li, 
.contact-note,
.service-list li, 
.problem-list li,
.solution-card p,
.pricing-list li {
  color: #b2bac6 !important; /* Gris claro muy legible */
}

/* 3. Devolver el BLANCO PURO a los títulos y negritas */
.case-title, 
.case-body strong, 
.contact-left h2, 
.contact-right h3, 
.solution-card h3,
.pricing-title,
.pricing-price {
  color: #ffffff !important;
}

/* 4. Arreglar los Inputs (Cajas de texto) para que no sean blancas */
input, textarea {
   background: rgba(255,255,255,0.06) !important;
   border-color: rgba(255,255,255,0.2) !important;
   color: #ffffff !important;
}
input::placeholder, textarea::placeholder {
  color: #888888 !important;
}
/* Arreglar visibilidad del menú hamburguesa en móvil (Modo Oscuro) */
.nav-toggle-line {
  background-color: #ffffff !important; /* Fuerza las líneas a color blanco */
}
}