/* Este a Oeste • Conexiones — custom styles layered on Tailwind Play CDN */

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { -webkit-font-smoothing: antialiased; }

/* Hebrew / RTL: swap body font to a Hebrew-native face and mirror layout */
html[lang="he"] { font-family: "Heebo", "Inter", system-ui, sans-serif; }
html[lang="he"] .font-head { font-family: "Heebo", "Space Grotesk", sans-serif; font-weight: 700; }
/* Latin brand text stays LTR (correct letter order) even inside the RTL page.
   The hero title also aligns to the right edge so it lines up with the
   surrounding Hebrew content instead of floating left. */
html[dir="rtl"] .wordmark { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] [data-t="hero.title"] { direction: ltr; unicode-bidi: isolate; text-align: right; }

/* ---------- Header ----------
 * Header is transparent over the dark hero at the top of the page, then gains a
 * light background once scrolled. Text colour flips to stay readable in both. */
#header.scrolled {
  background: rgba(251, 250, 248, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 1px 0 rgba(11, 42, 74, 0.08);
}

/* Wordmark */
.wordmark { color: #fff; transition: color .2s; }
#header.scrolled .wordmark { color: #0B2A4A; }
.wordmark .dot { color: #D62839; }

/* Desktop nav links */
.nav-link { color: rgba(255,255,255,.82); transition: color .15s; }
.nav-link:hover { color: #fff; }
#header.scrolled .nav-link { color: rgba(11,42,74,.7); }
#header.scrolled .nav-link:hover { color: #D62839; }

/* Hamburger */
#menuBtn { color: #fff; transition: color .2s; }
#header.scrolled #menuBtn { color: #0B2A4A; }

/* Mobile dropdown (always on white panel) */
.mobile-link { padding: .6rem .25rem; color: rgba(11,42,74,.8); border-radius: .5rem; }
.mobile-link:hover { background: rgba(11,42,74,.04); color: #D62839; }

/* ---------- Buttons ---------- */
.btn-primary, .btn-ghost, .btn-on-terracotta, .btn-wa {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.15rem; border-radius: .6rem;
  font-weight: 600; font-size: .9rem; line-height: 1; white-space: nowrap;
  transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn-lg { padding: .85rem 1.5rem; font-size: .98rem; }
.btn-primary { background: #D62839; color: #fff; box-shadow: 0 6px 18px -6px rgba(214,40,57,.6); }
.btn-primary:hover { background: #B21F2D; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }
.btn-on-terracotta { background: #fff; color: #0B2A4A; }
.btn-on-terracotta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(0,0,0,.35); }
.btn-wa { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }
.btn-wa:hover { background: rgba(255,255,255,.24); }

/* ---------- Hero ---------- */
.hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 60% at 78% 20%, rgba(214,40,57,.22), transparent 60%),
    radial-gradient(55% 55% at 12% 85%, rgba(29,78,216,.28), transparent 60%);
}
.flight-path { animation: dash 22s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -320; } }
@media (prefers-reduced-motion: reduce) { .flight-path { animation: none; } }
.node-label {
  position: absolute; font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  color: rgba(255,255,255,.85); background: rgba(255,255,255,.08);
  padding: .2rem .55rem; border-radius: 999px; backdrop-filter: blur(4px);
}

/* ---------- Cards (What we do) ---------- */
.card {
  background: #fff; border: 1px solid rgba(11,42,74,.08); border-radius: .9rem;
  padding: 1.5rem; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(11,42,74,.35); border-color: rgba(214,40,57,.35); }
.card-icon {
  width: 2.75rem; height: 2.75rem; border-radius: .7rem; margin-bottom: 1rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(29,78,216,.1); color: #1D4ED8;
}
.card-title { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.05rem; margin-bottom: .4rem; }
.card-desc { color: rgba(11,42,74,.62); font-size: .92rem; line-height: 1.55; }

/* ---------- Sector cards ---------- */
.sector-card {
  border-radius: .9rem; padding: 1.6rem; text-align: center;
  background: linear-gradient(180deg, #fff, #f5f7fa);
  border: 1px solid rgba(11,42,74,.07); transition: transform .15s, box-shadow .15s;
}
.sector-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(11,42,74,.3); }
.sector-icon {
  width: 3.25rem; height: 3.25rem; border-radius: 999px; margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(214,40,57,.1); color: #D62839;
}
.sector-title { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.1rem; margin-bottom: .4rem; }
.sector-desc { color: rgba(11,42,74,.6); font-size: .88rem; line-height: 1.5; }

/* ---------- Two-sided ---------- */
.two-col {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 1rem; padding: 2rem;
}
.bullet { display: flex; gap: .7rem; align-items: flex-start; color: rgba(255,255,255,.85); font-size: .95rem; line-height: 1.5; }
.tick {
  flex: none; margin-top: .28rem; width: 1rem; height: 1rem; border-radius: 999px;
  background: #D62839;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/70% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/70% no-repeat;
}

/* ---------- How it works ---------- */
.step { position: relative; text-align: center; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 999px; margin-bottom: 1rem;
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.15rem;
  color: #fff; background: #0B2A4A;
}
.step-title { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.1rem; margin-bottom: .35rem; }
.step-desc { color: rgba(11,42,74,.6); font-size: .9rem; line-height: 1.5; max-width: 15rem; margin: 0 auto; }

/* ---------- Language switcher ---------- */
.lang-btn { padding: .3rem .55rem; border-radius: 999px; transition: all .15s; color: rgba(11,42,74,.55); }
.lang-btn:hover { color: #0B2A4A; }
.lang-btn.active { background: #fff; color: #0B2A4A; box-shadow: 0 1px 3px rgba(11,42,74,.18); }

/* Header switcher: light over the hero, dark once scrolled */
#header .lang-switch { background: rgba(255,255,255,.15); transition: background .2s; }
#header.scrolled .lang-switch { background: rgba(11,42,74,.06); }
#header .lang-btn { color: rgba(255,255,255,.75); }
#header .lang-btn:hover { color: #fff; }
#header .lang-btn.active { background: rgba(255,255,255,.92); color: #0B2A4A; box-shadow: none; }
#header.scrolled .lang-btn { color: rgba(11,42,74,.55); }
#header.scrolled .lang-btn:hover { color: #0B2A4A; }
#header.scrolled .lang-btn.active { background: #fff; color: #0B2A4A; box-shadow: 0 1px 3px rgba(11,42,74,.18); }

/* Footer switcher (always on dark) */
.lang-btn-dark { color: rgba(255,255,255,.6); }
.lang-btn-dark:hover { color: #fff; }
.lang-btn-dark.active { background: rgba(255,255,255,.22); color: #fff; box-shadow: none; }