/* ==========================================================================
   ITSAR • APP + LANDING THEME (Bootstrap 5 companion)
   - Premium, moderno, responsive
   - Landing (full screen hero + swiper autoplay + cards)
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root{
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted:#64748b;
  --border:#e5e7eb;

  --primary:#2563eb;
  --primary-2:#1d4ed8;

  --danger:#dc2626;

  --radius:18px;
  --shadow: 0 14px 40px rgba(2,6,23,.10);
  --shadow-soft: 0 10px 26px rgba(2,6,23,.08);

  --nav-h: 78px;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: var(--nav-h);
}
a{ color: inherit; text-decoration: none; }
img{ max-width:100%; height:auto; display:block; }

/* Focus moderno */
:where(button,[type="button"],[type="submit"],a,input,select,textarea):focus-visible{
  outline: 3px solid rgba(37,99,235,.25);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}

/* ---------- Navbar ---------- */
.itsar-nav{
  background: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(229,231,235,.8);
}
.navbar-brand{ letter-spacing:-.02em; }
.fw-black{ font-weight: 900 !important; }

.itsar-logo{
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.navbar .nav-link{
  padding: .5rem .9rem;
  border-radius: 999px;
  font-weight: 800;
  color: rgba(15,23,42,.72) !important;
}
.navbar .nav-link:hover{
  background: rgba(37,99,235,.08);
  color: rgba(15,23,42,.92) !important;
}
.navbar .nav-link.active{
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(37,99,235,.22);
}

/* ---------- Hero (FULL SCREEN) ---------- */
.hero-wrapper{
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(1200px 520px at 18% 18%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(900px 480px at 88% 18%, rgba(29,78,216,.16), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f4f7ff 100%);
}
.hero-content{
  position: relative;
  z-index: 2;
  padding: 48px 0;
}

#canvaEngine{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.30;
}

.hero-badge{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(37,99,235,.18);
  background: rgba(255,255,255,.75);
  box-shadow: var(--shadow-soft);
  font-weight: 800;
  color: rgba(15,23,42,.85);
}
.hero-badge i{ color: var(--primary); }

.hero-title{
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.hero-gradient{
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-card{
  border-radius: var(--radius);
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(229,231,235,.9);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.hero-card-top{
  display:flex;
  gap: .75rem;
  padding: 16px;
  border-bottom: 1px solid rgba(229,231,235,.9);
}
.hero-mini-stat{
  flex:1;
  border-radius: 16px;
  background: rgba(37,99,235,.06);
  border: 1px solid rgba(37,99,235,.14);
  padding: 14px;
}
.hero-mini-stat strong{
  display:block;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.hero-mini-stat span{
  display:block;
  margin-top: 2px;
  color: rgba(15,23,42,.65);
  font-weight: 700;
  font-size: .9rem;
}
.hero-card-body{
  padding: 18px;
}

/* ---------- Sections ---------- */
.section-space{
  padding: 72px 0;
}
.section-soft{
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(246,247,251,.95));
  border-top: 1px solid rgba(229,231,235,.85);
  border-bottom: 1px solid rgba(229,231,235,.85);
}

/* ---------- Swiper Careers ---------- */
.swiper-carreras{
  padding: 18px 8px 52px;
}
.swiper-carreras .swiper-pagination-bullet{
  opacity: .35;
}
.swiper-carreras .swiper-pagination-bullet-active{
  opacity: 1;
}

.swiper-carreras .swiper-button-next,
.swiper-carreras .swiper-button-prev{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(229,231,235,.9);
  box-shadow: var(--shadow-soft);
}
.swiper-carreras .swiper-button-next:after,
.swiper-carreras .swiper-button-prev:after{
  font-size: 16px;
  font-weight: 900;
  color: rgba(15,23,42,.85);
}

/* ---------- Career Card ---------- */
.card-carrera{
  height: 100%;
  display:flex;
  flex-direction: column;
  border-radius: var(--radius);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(229,231,235,.9);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card-carrera:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.card-img-box{
  height: 320px; /* 🔥 más alto */
  width:100%;
  overflow:hidden;
  background: #e9eefc;
}
@media (max-width: 576px){
  .card-img-box{ height: 260px; }
}
.card-img-box img{
  width:100%;
  height:100%;
  object-fit: cover;
}
.card-info{
  padding: 18px;
}

/* ---------- Misión / Visión cards ---------- */
.mv-card{
  border-radius: var(--radius);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(229,231,235,.9);
  box-shadow: var(--shadow-soft);
  padding: 22px;
}
.mv-icon{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  margin-bottom: 12px;
}
.mv-icon i{
  font-size: 20px;
  color: var(--primary);
}

/* ---------- Footer ---------- */
.site-footer{
  background: #0b1220;
  color: rgba(255,255,255,.92);
}
.footer-link{
  color: rgba(255,255,255,.75);
  font-weight: 700;
}
.footer-link:hover{ color: #fff; }
.footer-social{
  color: rgba(255,255,255,.80);
}
.footer-social:hover{ color: #fff; }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.10);
}

/* ---------- Bootstrap polishing ---------- */
.btn{
  font-weight: 800;
  letter-spacing: -0.01em;
}
.btn-primary{
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border: 0;
  box-shadow: 0 14px 30px rgba(37,99,235,.24);
}
.btn-primary:hover{
  filter: brightness(0.98);
  transform: translateY(-1px);
}