/* ==========================================================================
   LETNOVA — Sistema de Marca 2035
   Manual de Imagen / CSS Override (carga al final del enqueue)
   Sobreescribe los tokens base del theme para que TODO herede el
   esquema oscuro + dorado del manual sin tocar files originales.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. OVERRIDE DE TOKENS BASE DEL THEME
   Las variables --ln-white / --ln-light / --ln-secondary se usan en
   components.css y pages.css. Reasignamos sus valores para que todo
   .ln-section, .ln-navbar y .ln-card hereden el esquema 2035.
   -------------------------------------------------------------------------- */
:root {
  /* Mantenemos los tokens originales del theme (blanco real para textos sobre dark).
     NO redefinimos --ln-white ni --ln-light: hay componentes que usan
     `color: var(--ln-white)` esperando texto claro. Cambiarlos rompe la lectura. */
  --ln-primary:      #E2B450;
  --ln-secondary:    #111110;
  --ln-accent:       #C99A3A;
  --ln-secondary-90: rgba(17, 17, 16, 0.92);
  --ln-primary-10:   rgba(226, 180, 80, 0.10);
  --ln-primary-20:   rgba(226, 180, 80, 0.20);

  /* Texto — colores legibles sobre fondo oscuro */
  --ln-text:         #F5F0E8;
  --ln-text-light:   #F5F0E8;
  --ln-text-muted:   rgba(245, 240, 232, 0.72);
  --ln-text-dim:     rgba(245, 240, 232, 0.55);

  /* Tokens nuevos del manual 2035 */
  --ln-gold:         #E2B450;
  --ln-gold-rgb:     226, 180, 80;
  --ln-gold-hover:   #C99A3A;
  --ln-gold-10:      rgba(226, 180, 80, 0.10);
  --ln-gold-20:      rgba(226, 180, 80, 0.20);
  --ln-carbon:       #111110;
  --ln-carbon-alt:   #1A1A19;
  --ln-cream:        #F5F0E8;
  --ln-cream-rgb:    245, 240, 232;
  --ln-border:       rgba(226, 180, 80, 0.18);
  --ln-border-hover: rgba(226, 180, 80, 0.35);

  /* Tipografía oficial 2035: Nunito (H1/H3) + Barlow Condensed (H2) + Inter (body).
     -apple-system como primer fallback para que macOS/iOS rinda en SF Pro de regalo. */
  --ln-font-heading:    'Nunito', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', sans-serif;
  --ln-font-subheading: 'Barlow Condensed', 'Barlow', 'Oswald', sans-serif;
  --ln-font-body:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ln-shadow-gold:  0 4px 20px rgba(226, 180, 80, 0.15);
  --ln-transition:   0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. BASE GLOBAL
   -------------------------------------------------------------------------- */
html, body {
  background-color: var(--ln-carbon) !important;
  color: var(--ln-cream);
}

body {
  font-family: var(--ln-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--ln-gold); color: var(--ln-carbon); }

/* Tipografía global */
h1, .ln-h1, .ln-heading-display, .ln-heading-1, .ln-hero__title {
  font-family: var(--ln-font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ln-cream);
}

h2, .ln-h2, .ln-heading-2, .ln-heading-section, .ln-section__title {
  font-family: var(--ln-font-subheading);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ln-cream);
}

h3, .ln-h3, .ln-heading-3, .ln-section__subtitle, .ln-card__title,
.ln-plan-card__name, .ln-plan__name {
  font-family: var(--ln-font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ln-cream);
}

p, .ln-body, .ln-text-base, .ln-text-lg, .ln-text-md, .ln-lead {
  font-family: var(--ln-font-body);
  color: var(--ln-cream);
}

small, figcaption, .ln-caption, .ln-text-sm {
  color: var(--ln-text-muted);
}

a { color: var(--ln-gold); transition: color var(--ln-transition); }
a:hover, a:focus { color: var(--ln-gold-hover); }

/* --------------------------------------------------------------------------
   3. SECCIONES — todas heredan fondo carbon, texto cream
   -------------------------------------------------------------------------- */
.ln-section {
  background-color: var(--ln-carbon) !important;
  color: var(--ln-cream);
}

.ln-section--light,
.ln-section--alt-light {
  background-color: var(--ln-carbon) !important;
  color: var(--ln-cream) !important;
}

.ln-section--dark,
.ln-section--alt-dark {
  background-color: var(--ln-carbon) !important;
  color: var(--ln-cream) !important;
}

/* Variante alternada con un toque más claro para ritmo visual */
.ln-section--alt {
  background-color: var(--ln-carbon-alt) !important;
}

/* Garantizar legibilidad de texto en TODA seccion */
.ln-section h1, .ln-section h2, .ln-section h3, .ln-section h4,
.ln-section .ln-heading-display, .ln-section .ln-heading-1,
.ln-section .ln-heading-2, .ln-section .ln-heading-3,
.ln-section .ln-heading-section, .ln-section .ln-heading-subsection {
  color: var(--ln-cream) !important;
}

.ln-section p,
.ln-section .ln-text-lg,
.ln-section .ln-text-md,
.ln-section .ln-text-base,
.ln-section li {
  color: var(--ln-cream);
}

/* --------------------------------------------------------------------------
   4. NAVBAR / HEADER
   -------------------------------------------------------------------------- */
.ln-navbar,
.ln-header {
  background-color: var(--ln-secondary-90) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--ln-border);
}

.ln-navbar__menu a,
.ln-navbar__nav a,
.ln-navbar__mobile-menu a {
  color: var(--ln-cream) !important;
  font-family: var(--ln-font-body);
  font-weight: 500;
  transition: color var(--ln-transition);
}

.ln-navbar__menu a:hover,
.ln-navbar__menu a.current-menu-item,
.ln-navbar__menu .current-menu-item > a,
.ln-navbar__nav a:hover {
  color: var(--ln-gold) !important;
}

.ln-navbar__cta {
  background: linear-gradient(135deg, #E2B450 0%, #C99A3A 50%, #E2B450 100%) !important;
  color: var(--ln-carbon) !important;
  border: none !important;
  border-radius: 9999px !important;
  font-weight: 600;
  transition: all var(--ln-transition);
}

.ln-navbar__cta:hover {
  box-shadow: var(--ln-shadow-gold);
  transform: translateY(-1px);
}

/* Logo del header — imagen */
.ln-navbar__logo {
  display: inline-flex;
  align-items: center;
}

.ln-navbar__logo-img {
  height: 38px;
  width: auto;
  display: block;
}

/* Ocultamos el texto "Letnova" cuando hay imagen */
.ln-navbar__logo--has-img .ln-navbar__logo-text {
  display: none;
}

.ln-navbar__toggle-bar {
  background-color: var(--ln-cream);
}

.ln-navbar__mobile {
  background-color: var(--ln-carbon) !important;
}

/* --------------------------------------------------------------------------
   5. HERO
   -------------------------------------------------------------------------- */
.ln-hero {
  background-color: var(--ln-carbon) !important;
  position: relative;
  overflow: hidden;
}

.ln-hero::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -20%;
  width: 60%;
  height: 160%;
  background: radial-gradient(ellipse at center, var(--ln-gold-10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.ln-hero__content,
.ln-hero__title,
.ln-hero__subtitle,
.ln-hero__actions,
.ln-hero__badge,
.ln-hero .ln-heading-display,
.ln-hero .ln-text-lg,
.ln-hero canvas {
  position: relative;
  z-index: 1;
}

.ln-hero__title,
.ln-hero .ln-heading-display {
  color: var(--ln-cream) !important;
}

.ln-hero__subtitle,
.ln-hero .ln-text-lg {
  color: var(--ln-text-muted) !important;
}

.ln-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ln-gold) !important;
  background: var(--ln-gold-10);
  border: 1px solid var(--ln-border);
  border-radius: 9999px;
  padding: 0.5rem 1rem;
}

/* --------------------------------------------------------------------------
   6. BOTONES
   -------------------------------------------------------------------------- */
.ln-btn--gold,
.ln-btn--primary {
  background: linear-gradient(135deg, #E2B450 0%, #C99A3A 50%, #E2B450 100%) !important;
  color: var(--ln-carbon) !important;
  border: none !important;
  font-weight: 600;
}

.ln-btn--gold:hover,
.ln-btn--primary:hover {
  box-shadow: var(--ln-shadow-gold);
  transform: translateY(-2px);
  color: var(--ln-carbon) !important;
}

.ln-btn--outline,
.ln-btn--secondary {
  background: transparent !important;
  color: var(--ln-gold) !important;
  border: 1px solid var(--ln-gold) !important;
  font-weight: 500;
}

.ln-btn--outline:hover,
.ln-btn--secondary:hover {
  background: var(--ln-gold-10) !important;
  color: var(--ln-gold) !important;
}

/* --------------------------------------------------------------------------
   7. CARDS GENERICAS
   -------------------------------------------------------------------------- */
.ln-card,
.ln-before-after,
.ln-step,
.ln-stat,
.ln-stats__item {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ln-border);
  border-radius: 12px;
  color: var(--ln-cream);
  transition: all var(--ln-transition);
}

.ln-card:hover,
.ln-before-after:hover,
.ln-step:hover {
  border-color: var(--ln-border-hover);
  box-shadow: var(--ln-shadow-gold);
  transform: translateY(-2px);
}

.ln-card--glass {
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--ln-border);
  color: var(--ln-cream);
}

.ln-card__title,
.ln-card__heading {
  color: var(--ln-cream);
}

.ln-card__icon,
.ln-step__icon {
  color: var(--ln-gold);
}

/* --------------------------------------------------------------------------
   8. PLAN CARDS (Base / Pro / Elite)
   -------------------------------------------------------------------------- */
.ln-plan-card,
.ln-plan {
  background-color: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid var(--ln-border);
  border-radius: 16px;
  color: var(--ln-cream);
  transition: all var(--ln-transition);
}

.ln-plan-card:hover, .ln-plan:hover {
  border-color: var(--ln-border-hover);
}

.ln-plan-card--pro,
.ln-plan-card--highlighted,
.ln-plan-card--recommended,
.ln-plan--pro {
  border-color: var(--ln-gold) !important;
  box-shadow: 0 0 40px var(--ln-gold-10);
}

.ln-plan-card__name,
.ln-plan__name {
  font-family: var(--ln-font-subheading);
  font-weight: 600;
  color: var(--ln-gold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ln-plan-card__amount,
.ln-plan__price {
  font-family: var(--ln-font-heading);
  font-weight: 700;
  color: var(--ln-cream);
}

.ln-plan-card__setup {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--ln-font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ln-gold);
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   9. STATS / NUMEROS
   -------------------------------------------------------------------------- */
.ln-stats,
.ln-stats-section {
  background-color: var(--ln-carbon-alt) !important;
}

.ln-stats__number,
.ln-stat__number {
  font-family: var(--ln-font-heading);
  font-weight: 700;
  color: var(--ln-gold);
  line-height: 1;
}

.ln-stats__label,
.ln-stat__label {
  color: var(--ln-text-muted);
}

/* --------------------------------------------------------------------------
   10. PROCESO / PASOS
   -------------------------------------------------------------------------- */
.ln-step__title { color: var(--ln-cream); }
.ln-step__time, .ln-step__duration { color: var(--ln-gold); font-weight: 500; }
.ln-step__desc, .ln-step__description { color: var(--ln-text-muted); }

/* --------------------------------------------------------------------------
   11. BEFORE / AFTER (problema-soluci\xF3n del home)
   -------------------------------------------------------------------------- */
.ln-before-after__before,
.ln-before-after__after {
  color: var(--ln-cream);
}

.ln-before-after__tag--before {
  background: rgba(139, 26, 26, 0.18);
  color: #ff8a80;
  border: 1px solid rgba(139, 26, 26, 0.3);
}

.ln-before-after__tag--after {
  background: var(--ln-gold-10);
  color: var(--ln-gold);
  border: 1px solid var(--ln-border);
}

.ln-before-after__arrow { color: var(--ln-gold); }

.ln-before-after__result {
  border-top: 1px solid var(--ln-border);
  color: var(--ln-gold);
}

/* --------------------------------------------------------------------------
   12. TABLA COMPARATIVA
   -------------------------------------------------------------------------- */
.ln-compare,
.ln-pricing-table {
  color: var(--ln-cream);
}

.ln-compare th,
.ln-pricing-table th {
  font-family: var(--ln-font-subheading);
  font-weight: 600;
  color: var(--ln-gold);
  border-bottom: 1px solid var(--ln-gold);
}

.ln-compare td,
.ln-pricing-table td {
  color: var(--ln-cream);
  border-bottom: 1px solid var(--ln-border);
}

/* --------------------------------------------------------------------------
   13. FORMULARIOS
   -------------------------------------------------------------------------- */
.ln-form__label, label {
  font-family: var(--ln-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ln-cream);
  letter-spacing: 0.02em;
}

.ln-form__input, .ln-form__textarea, .ln-form__select,
input[type="text"], input[type="email"], input[type="tel"],
textarea, select {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--ln-border) !important;
  border-radius: 8px;
  color: var(--ln-cream) !important;
  font-family: var(--ln-font-body);
  transition: border-color var(--ln-transition);
}

.ln-form__input:focus, .ln-form__textarea:focus, .ln-form__select:focus,
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ln-gold) !important;
  box-shadow: 0 0 0 3px var(--ln-gold-10);
}

.ln-form__input::placeholder, .ln-form__textarea::placeholder,
input::placeholder, textarea::placeholder {
  color: rgba(245, 240, 232, 0.4);
}

select, .ln-form__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23E2B450' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */
.ln-faq__item { border-bottom: 1px solid var(--ln-border); }
.ln-faq__question {
  font-family: var(--ln-font-heading);
  font-weight: 500;
  color: var(--ln-cream);
}
.ln-faq__question:hover { color: var(--ln-gold); }
.ln-faq__answer { color: var(--ln-text-muted); }

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */
.ln-footer {
  background-color: var(--ln-carbon) !important;
  border-top: 1px solid var(--ln-border);
}

.ln-footer__heading {
  font-family: var(--ln-font-subheading);
  font-weight: 600;
  color: var(--ln-gold) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.ln-footer__link, .ln-footer__links a {
  color: var(--ln-cream);
  transition: color var(--ln-transition);
}

.ln-footer__link:hover, .ln-footer__links a:hover {
  color: var(--ln-gold);
}

.ln-footer__tagline {
  font-family: var(--ln-font-body);
  font-style: italic;
  color: var(--ln-gold) !important;
  letter-spacing: 0.02em;
}

.ln-footer__bottom {
  border-top: 1px solid var(--ln-border);
  color: rgba(245, 240, 232, 0.5);
}

.ln-footer__address,
.ln-footer__copyright {
  color: var(--ln-text-muted);
}

.ln-footer__legal a {
  color: var(--ln-text-muted);
}
.ln-footer__legal a:hover { color: var(--ln-gold); }

/* Logo del footer — imagen */
.ln-footer__logo {
  display: inline-flex;
  align-items: center;
}

.ln-footer__logo-img {
  height: 42px;
  width: auto;
  display: block;
}

.ln-footer__logo--has-img .ln-footer__logo-text {
  display: none;
}

/* --------------------------------------------------------------------------
   16. UTILIDADES
   -------------------------------------------------------------------------- */
.ln-text-gold, .ln-text--gold, .ln-highlight { color: var(--ln-gold) !important; }
.ln-text-cream { color: var(--ln-cream); }
.ln-text-muted { color: var(--ln-text-muted); }
.ln-bg-carbon { background: var(--ln-carbon); }
.ln-bg-gold { background: var(--ln-gold); color: var(--ln-carbon); }

/* --------------------------------------------------------------------------
   17. PASOS / STEPS (Análisis / Montaje / Resultados)
   .ln-steps__number original tenía bg: var(--ln-white) (ahora carbon claro)
   y color: var(--ln-secondary) (carbon) → número invisible.
   Forzamos número dorado sobre fondo carbon-alt con borde dorado.
   -------------------------------------------------------------------------- */
.ln-steps {
  background-color: var(--ln-carbon) !important;
}

.ln-steps__item {
  color: var(--ln-cream);
}

.ln-steps__number {
  background-color: var(--ln-carbon-alt) !important;
  color: var(--ln-gold) !important;
  border: 3px solid var(--ln-gold) !important;
}

.ln-steps__title {
  font-family: var(--ln-font-heading);
  color: var(--ln-cream) !important;
}

.ln-steps__timeline {
  color: var(--ln-gold) !important;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.ln-steps__desc {
  color: var(--ln-text-muted) !important;
}

.ln-steps__item:not(:last-child)::after {
  background-color: var(--ln-border) !important;
}

/* --------------------------------------------------------------------------
   18. TECH CARDS (sección "Cómo generamos resultados")
   .ln-tech-card__title usaba color: var(--ln-white) → ahora carbon (invisible).
   -------------------------------------------------------------------------- */
.ln-tech-card {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--ln-border) !important;
}

.ln-tech-card:hover {
  border-color: var(--ln-gold) !important;
  box-shadow: var(--ln-shadow-gold);
}

.ln-tech-card__title {
  color: var(--ln-cream) !important;
  font-family: var(--ln-font-heading);
}

.ln-tech-card__desc {
  color: var(--ln-text-muted) !important;
}

.ln-tech-card__icon {
  color: var(--ln-gold);
}

/* --------------------------------------------------------------------------
   19. CASE CARDS (sección "Lo que nuestros clientes facturan de más")
   -------------------------------------------------------------------------- */
.ln-case-card {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--ln-border);
  color: var(--ln-cream);
}

.ln-case-card:hover {
  border-color: var(--ln-border-hover);
}

.ln-case-card__title,
.ln-case-card__heading {
  color: var(--ln-cream) !important;
}

.ln-case-card__desc,
.ln-case-card__text,
.ln-case-card__quote {
  color: var(--ln-text-muted);
}

.ln-case-card__metric,
.ln-case-card__number {
  color: var(--ln-gold) !important;
  font-family: var(--ln-font-heading);
}

.ln-case-card__badge {
  background: var(--ln-gold) !important;
  color: var(--ln-carbon) !important;
}

/* --------------------------------------------------------------------------
   20. BEFORE/AFTER (sección problema → solución)
   -------------------------------------------------------------------------- */
.ln-before-after {
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: var(--ln-cream);
}

.ln-before-after__before,
.ln-before-after__after {
  color: var(--ln-cream) !important;
}

.ln-before-after__before p,
.ln-before-after__after p {
  color: var(--ln-cream) !important;
}

.ln-before-after__result {
  color: var(--ln-gold) !important;
}

.ln-before-after__result strong {
  color: var(--ln-gold) !important;
}

/* --------------------------------------------------------------------------
   21. CTA FINAL / SECCIONES PROMINENTES
   -------------------------------------------------------------------------- */
.ln-cta,
.ln-cta-final,
.ln-cta__title,
.ln-cta__subtitle {
  color: var(--ln-cream);
}

/* Cualquier h1/h2/h3 fuera de .ln-section sigue siendo cream sobre body carbon */
body h1, body h2, body h3 {
  color: var(--ln-cream);
}

/* Texto que el theme ponía en --ln-white (blanco real) y que ahora va sobre carbon —
   ya es legible. No cambiamos. */

/* --------------------------------------------------------------------------
   22. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .ln-navbar__logo-img { height: 32px; }
  .ln-footer__logo-img { height: 36px; }
}