/* ════════════════════════════════════════════════════════════════════════════
   AIM ÆGIS · marketing-light.css — TEMA CLARO de la web pública.
   Lo carga SOLO templates/marketing/_shell.html (la web). El producto usa
   base.html y NO carga este archivo → el producto queda intacto por construcción.
   Re-tematiza el lienzo oscuro+oro a papel cálido + oro domado, sin tocar
   marketing.css ni tokens.css. Reversible: basta quitar el <link> de _shell.
   ════════════════════════════════════════════════════════════════════════════ */

.mkt{
  /* --- Lienzo claro cálido (papel hueso) --- */
  --m-bg:        #F6F3EB;
  --m-bg-2:      #F1ECE1;
  --m-bg-3:      #ECE6D9;
  --m-surface:   #FFFFFF;
  --m-surface-2: #FBF8F1;
  --m-border:    rgba(60,46,18,0.13);
  --m-border-2:  rgba(60,46,18,0.22);

  /* --- Texto: grafito cálido (AA sobre hueso) --- */
  --m-fg:        #1C1A14;
  --m-fg-dim:    rgba(28,24,16,0.72);
  --m-fg-faint:  rgba(28,24,16,0.55);

  /* --- Oro DOMADO: profundo para texto/acentos (AA), claro para fondos/realces --- */
  --m-gold:      #7E6630;  /* AA 4.94 sobre marfil (antes 8A6D33 = 4.3, suspenso marginal) */
  --m-gold-br:   #9A7C3C;
  --m-gold-deep: #6E5627;
  --m-gold-glow: rgba(154,124,60,0.16);

  /* --- Señales (más profundas para contraste sobre claro) --- */
  --m-green:     #1C7A4D;
  --m-red:       #B23B33;

  background: var(--m-bg);
  color: var(--m-fg);
}

.mkt ::selection{ background: var(--m-gold); color:#fff; }

/* Foco accesible: el anillo claro no se ve sobre papel → usar el oro profundo */
.mkt a:focus-visible,
.mkt button:focus-visible,
.mkt [tabindex]:focus-visible,
.mkt .m-btn:focus-visible,
.mkt details > summary:focus-visible { outline-color: var(--m-gold-deep); }

/* Skip link */
.mkt .m-skip{ background: var(--m-gold); color:#fff; }

/* Barra de progreso de scroll (definida en tokens.css con el oro): ya hereda --accent;
   forzamos coherencia con el oro de marketing */
.mkt .scroll-progress{ background: linear-gradient(90deg, var(--m-gold-deep), var(--m-gold) 55%, var(--m-gold-br)); box-shadow:0 0 14px var(--m-gold-glow); }

/* --- Botón primario: fondo oro cálido + texto oscuro (contraste alto sobre claro) --- */
.mkt .m-btn-primary{
  background: linear-gradient(180deg,#D9BE73,#B9933F); color:#2A2010;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 8px 22px rgba(154,124,60,.22);
}
.mkt .m-btn-primary:hover{
  background: linear-gradient(180deg,#E3CA84,#C39E48); color:#2A2010;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 12px 30px rgba(154,124,60,.30);
}
.mkt .m-btn-ghost{ background: var(--m-surface); }

/* --- Texto realzado dorado: usar el oro profundo legible, no el claro --- */
.mkt .m-gold{ color: var(--m-gold); }

/* --- Tarjetas: sombra suave cálida + borde definido (sobre claro) --- */
.mkt .m-card{ box-shadow:0 1px 2px rgba(60,45,20,.05), 0 14px 40px rgba(80,55,20,.08); }

/* ════════ CAMPO ÁUREO en claro ════════
   El shader WebGL vuelve, rediseñado para el tema claro (marketing-aurora.js:
   pan de oro bajo vitela). En <768px se apaga (batería) y queda este mismo
   campo estático de CSS como fallback — también para reduce-motion y sin WebGL. */
@media (max-width: 767.98px){ .mkt canvas.m-aurora{ display:none !important; } }
.mkt .m-aurora-wrap::before{
  background:
    radial-gradient(62% 80% at 80% 10%, rgba(201,169,97,0.22), transparent 62%),
    radial-gradient(54% 64% at 96% 52%, rgba(154,124,60,0.12), transparent 66%),
    radial-gradient(60% 70% at 8% 92%, rgba(28,122,77,0.06), transparent 66%),
    var(--m-bg);
}
/* Velo de legibilidad: claro (el texto encima es oscuro) en vez de negro */
.mkt .m-aurora-veil{
  background: linear-gradient(180deg, rgba(246,243,235,0) 0%, rgba(246,243,235,0.10) 45%, rgba(246,243,235,0.66) 100%);
}
.mkt .m-hero-spot{ background: radial-gradient(500px circle at var(--mx,50%) var(--my,30%), rgba(154,124,60,0.10), transparent 55%); }

/* ════════ NAV / menús con fondos antes negros → papel claro ════════ */
.mkt .m-nav.scrolled{ background: rgba(247,244,236,0.80); border-bottom-color: var(--m-border); }
@media (max-width:860px){
  .mkt .m-nav-links{ background: rgba(247,244,236,0.98); border-bottom-color: var(--m-border); }
}

/* ════════ Bandas con fondo antes negro ════════ */
.mkt .m-marquee-section{ background: rgba(60,45,20,0.045); }
.mkt .m-marquee-item{ background: rgba(255,255,255,0.62); }

/* ════════ Inputs ════════ */
.mkt .m-input{ background:#FFFFFF; }
.mkt .m-input:focus{ background:#FFFFFF; border-color: var(--m-gold); }
.mkt input.is-invalid, .mkt textarea.is-invalid, .mkt select.is-invalid{ background: rgba(178,59,51,0.05); }

/* Badge "agente en línea": el verde profundo y su halo, legibles sobre claro */
.mkt .m-live-badge{ border-color: rgba(28,122,77,0.35); background: rgba(28,122,77,0.06); color: var(--m-fg); }
.mkt .m-live-badge:hover{ border-color: rgba(28,122,77,0.6); background: rgba(28,122,77,0.12); }
.mkt .m-live-dot{ background:#1C7A4D; }