/* ========= Overrides Bootstrap: secondary siempre gris ========= */
:root,
[data-bs-theme="dark"] {
  /* Gris Bootstrap clásico */
  --bs-secondary: #6c757d;
  --bs-secondary-rgb: 108, 117, 125;

  /* Extras por compatibilidad con utilidades nuevas */
  --bs-secondary-color: #6c757d;
  --bs-secondary-text-emphasis: #6c757d;
}

/* Fallback defensivo (si algún tema lo pisa) */
.text-secondary { color: #6c757d !important; }

:root{
  --tejne-purple:#6A1B9A;
  --tejne-green:#0B8652;
}

/* Evitar que Bootstrap afecte el bloque del logo */
.navbar .navbar-brand{
  align-items:center;
  gap:.5rem;
}

.logo-tejne{
  position:relative;
  display:inline-block;
  white-space:nowrap;
  flex:0 0 auto;
  line-height:1;
}

.logo-tejne .title{
  position:relative;
  z-index:2;
  font-weight:800;
  font-size:clamp(1.25rem, 2.6vw, 1.9rem);
  letter-spacing:.5px;
  color:var(--tejne-purple, #6A1B9A) !important;
  margin:0;
  /* Contorno blanco simulado con sombras múltiples */
  text-shadow:
  -1px -1px 0 #fff,
  1px -1px 0 #fff,
  -1px  1px 0 #fff,
  1px  1px 0 #fff;
}

/* Swoosh */
.logo-tejne .swoosh{
  position:absolute;
  left:2%;
  right:16%;
  bottom:-.2em;
  height:.22em;
  background:var(--tejne-green, #0B8652);
  border-radius:999px;
  transform:skewX(-12deg);
  z-index:1;
  pointer-events:none;
  /* Contorno blanco */
  box-shadow:
  -1px -1px 0 #fff,
  1px -1px 0 #fff,
  -1px  1px 0 #fff,
  1px  1px 0 #fff;
}

/* Flecha */
.logo-tejne .arrow{
  position:absolute;
  right:-1em;
  top:50%;
  transform:translateY(-45%);
  width:0; height:0;
  border-left:.9em solid var(--tejne-green, #0B8652);
  border-top:.55em solid transparent;
  border-bottom:.55em solid transparent;
  z-index:2;
  pointer-events:none;
  /* Contorno blanco usando filter drop-shadow */
  filter:
  drop-shadow(-1px -1px 0 #fff)
  drop-shadow( 1px -1px 0 #fff)
  drop-shadow(-1px  1px 0 #fff)
  drop-shadow( 1px  1px 0 #fff);
}

/* Opcional: compactar en pantallas muy chicas */
@media (max-width:420px){
  .logo-tejne .swoosh{ right:20%; height:.18em; }
  .logo-tejne .arrow{
    right:-.8em;
    border-left-width:.75em;
    border-top-width:.45em;
    border-bottom-width:.45em;
  }
}


/* Paleta base */
:root{
  --tejne-purple:#6A1B9A;
  --tejne-green:#0B8652;
  --ink:#0e1116;
  --muted:#5b6370;
  --surface:#0f1115;         /* para nav/footer */
  --card:#f7f8fa;            /* tarjetas claras */
  --line:#e7e9ee;
}

/* Body claro */
html, body { background:#fff; color:var(--ink); }

/* Nav/Footer oscuros: aseguran contraste y enlaces legibles */
.navbar, footer {
  background: var(--surface);
  color: #f8f9fa;
}
.navbar .nav-link { color: rgba(255,255,255,.85); }
.navbar .nav-link.active,
.navbar .nav-link.show { color:#fff; }

/* Dropdown en nav oscuro: mejor legibilidad */
.navbar .dropdown-menu {
  border: 1px solid rgba(255,255,255,.08);
  background: #fff; /* menú claro sobre nav oscuro */
}

/* Hero claro */
.hero { background:#fff; }
.eyebrow{
  color:var(--tejne-green);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.75rem
}
.underline-green { box-shadow: inset 0 -10px 0 rgba(11,134,82,.18) }

/* Tarjetas claras */
.card-soft{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:1rem;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card-soft:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.07) }

/* Texto atenuado propio (no depende de .text-secondary) */
.muted { color:var(--muted) }

/* Banda CTA (blanca con acento) */
.band{
  background:linear-gradient(180deg,#ffffff,#fbfcff);
  border:1px solid var(--line);
  border-radius:1rem;
}

/* Botones */
.btn-cta{ background:var(--tejne-green); border:none; color:#fff }
.btn-cta:hover{ filter:brightness(1.05) }
.btn-outline-dark:hover{ background:#0e1116; color:#fff }

/* Utilidades */
.ratio-21x9{ aspect-ratio:21/9 }