:root{
  /* Colores base */
  --navy:#22314b;          /* azul marino principal (texto fuerte / headers) */
  --navy-2:#2c3f5e;        /* marino secundario */
  --teal:#2fc4b6;          /* teal principal (acciones/acentos) */
  --teal-2:#27b0a5;        /* teal hover */
  --cream:#fff6ef;         /* fondo cálido claro */
  --cream-2:#f3e8de;       /* contenedores / bordes suaves */
  --ink:var(--navy);       /* alias de tu “ink” */
  --ink-2:#4a5a73;         /* texto secundario con buen contraste */
  --muted:#6f7b91;         /* texto atenuado */
  --note:#ffffff;          /* tarjetas claras */
  --border:#e6dcd2;        /* borde sutil */
  --glass:rgba(47,196,182,.10); /* vidrio sutil en clave teal */
  --primary:var(--teal);   /* botón principal */
}

/* ===== FONDO GLOBAL Y TEXTO ===== */
body.bg-deep{
  background: radial-gradient(1200px 800px at 50% -10%, var(--cream-2) 0%, var(--cream) 45%, #fff 100%);
  color: var(--ink);
}

.text-muted-strong{ color: var(--ink-2); }

/* ===== HERO ===== */
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.45; filter:saturate(1) contrast(1.05); }
.hero-overlay{ display:none !important; } /* sin velo extra */

header.hero h1{ color: var(--teal) !important; text-shadow: 0 2px 14px rgba(0,0,0,.25); }
header.hero .lead{ color:#ffffff !important; font-weight:800; text-shadow:0 1px 8px rgba(0,0,0,.35); }
header.hero p.text-muted-strong{ color:#eaf2ff !important; font-weight:700; }

/* ===== VIDRIO ===== */
.bg-glass{ background: var(--glass); backdrop-filter: blur(10px); }

/* ===== OFFCANVAS / FORM ===== */
.bg-offcanvas{ background: var(--cream) !important; color: var(--ink) !important; }
.form-label, .form-check-label{ color: var(--ink) !important; font-weight:600; }
.form-control, .form-select{ background:#fff; color:var(--ink); border:1px solid var(--border); }
.form-control::placeholder{ color:#8b93a3; }
.invalid-feedback{ color:#b42318 !important; }

/* ===== BADGE ===== */
.bg-badge{
  background: var(--cream) !important;
  color: var(--teal) !important;
  border: 1px solid var(--cream-2);
  font-weight:700;
}

/* ===== NAV ===== */
.navbar .nav-link{ color:#fff; opacity:.95; font-weight:600; }
.navbar .nav-link:hover{ color:#fff; opacity:1; }
.navbar .btn.btn-primary{ background: var(--teal); border-color: var(--teal); }
.navbar .btn.btn-primary:hover{ background: var(--teal-2); border-color: var(--teal-2); }

@media (max-width: 991px){ .brand-logo{ height:44px; } }

.fw-extrabold{ font-weight:800; }

/* ===== COUNTDOWN ===== */
.countdown{
  display:inline-flex; gap:16px; padding:12px 18px;
  border:1px solid var(--cream-2); border-radius:14px;
  background:#fff; color:var(--ink); font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 16px rgba(34,49,75,.10);
}

/* ===== CARDS ===== */
.card-dark{
  background:#ffffff;
  border:1px solid var(--cream-2); border-radius:16px;
  color: var(--ink);
}
.shadow-soft{ box-shadow: 0 10px 30px rgba(34,49,75,.12); }

.card h3{
  color: var(--ink);
  font-weight:800;
  font-size:1.25rem;
  margin-bottom:10px;
  transition: color .3s ease, text-shadow .3s ease, transform .2s ease;
}
.card h3:hover{ color: var(--teal); transform: translateY(-1px); }

/* ===== TITLES ===== */
.features-title{
  color: var(--ink);
  font-size:1.9rem;
  font-weight:900;
  text-align:center;
  margin:60px 0 30px;
  text-transform:uppercase;
  letter-spacing:1px;
  animation: fadeInUp 1s ease-in-out;
}

.card-dark h3{
  color: var(--ink);
  font-size:1.2rem;
  font-weight:800;
  margin-bottom:12px;
  letter-spacing:.3px;
}

/* ===== ANIM ===== */
@keyframes fadeInUp{ from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }

/* ===== NOTE / ALERT ===== */
.alert.bg-note{
  background:#fff;
  color:var(--ink);
  border-radius:16px; padding:18px 20px;
  border:1px solid var(--cream-2);
}
.text-note{ color: var(--ink-2); }

/* ===== BUTTONS ===== */
.btn-primary{ background: var(--teal); border-color: var(--teal); color:#fff; }
.btn-primary:hover{ background: var(--teal-2); border-color: var(--teal-2); }
.btn-outline-light{ color: var(--teal); border-color: var(--teal); background:transparent; }
.btn-outline-light:hover{ background: var(--teal); color:#fff; border-color: var(--teal); }

.btn-primary-soft{
  background: transparent; color: var(--ink);
  border:1px solid var(--cream-2);
  border-radius:999px; padding:.55rem 1rem; font-weight:800;
}
.btn-primary-soft:hover{ background:#fff; color: var(--ink); }
.btn-cta{
  border-radius:999px; padding:.9rem 1.4rem; font-weight:900;
  color:#fff; background: linear-gradient(180deg, var(--teal), var(--teal-2));
  box-shadow:0 12px 34px rgba(47,196,182,.25);
}
.btn-cta:hover{ transform: translateY(-1px); }

/* ===== FEATURES ===== */
#features .icon-feature{ color: var(--teal); transition: transform .2s ease; }
#features .icon-feature:hover{ transform: scale(1.06); }
#features .feature-heading,
.card.feature h3,
.section-dark h3,
#features h3{
  color: var(--ink) !important;
  font-weight:800 !important;
  text-shadow:none;
  letter-spacing:.3px;
}
#features p{ color: var(--ink-2); font-size:.98rem; line-height:1.55; }
#features .card{ opacity:0; animation: fadeInUp 1s ease forwards; }
#features .col-md-4:nth-child(1) .card{ animation-delay:.2s; }
#features .col-md-4:nth-child(2) .card{ animation-delay:.4s; }
#features .col-md-4:nth-child(3) .card{ animation-delay:.6s; }
#features .icon-feature{ animation: fadeInUp 1s ease forwards; animation-delay:.3s; }

/* ===== MULTI-SELECT ===== */
.ss-multi{ position:relative; }
.ss-multi-toggle{
  background:#fff; border:1px solid var(--cream-2);
  border-radius:.5rem; padding:.55rem .75rem; cursor:pointer; color: var(--ink);
}
.ss-multi-panel{
  position:absolute; top:100%; left:0; right:0;
  background:#fff; border:1px solid var(--cream-2);
  border-radius:.5rem; margin-top:.25rem; padding:.5rem .75rem; display:none; z-index:9999;
  color: var(--ink);
}
.ss-multi-panel.show{ display:block; }
.ss-multi-panel label{
  display:flex; gap:.5rem; align-items:center; margin-bottom:.25rem; font-size:.95rem; color: var(--ink-2);
}

/* ===== SECCIONES ===== */
.section-dark{ background: linear-gradient(180deg, #fff, var(--cream)); }
.section-deep{ background: linear-gradient(180deg, var(--cream), #fff); }

.value-card{
  max-width:980px; padding:2rem; border-radius:14px; margin:0 auto;
  border:1px solid var(--cream-2); background:#ffffff;
  box-shadow: 0 10px 26px rgba(34,49,75,.12);
}

.text-accent{ color: var(--teal) !important; }

/* ===== SOCIAL FLOAT ===== */
.social-float{
  position:fixed; left:18px; bottom:18px; z-index:1040; display:flex; flex-direction:column; gap:10px;
}
.social-float a{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:50%; background:#ffffff; color: var(--teal);
  border:1px solid var(--cream-2);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.social-float a:hover{ background: var(--cream); color: var(--teal-2); }

/* ===== MODALES (incl. contacto / legales) ===== */
.modal-backdrop.show{ background: rgba(0,0,0,.35) !important; }

#premiumModal .modal-content,
#privacyModal .modal-content,
#termsModal .modal-content,
#contactModal .modal-content{
  background: var(--cream) !important; color: var(--ink) !important;
}
#premiumModal .modal-header,
#privacyModal .modal-header,
#termsModal .modal-header,
#contactModal .modal-header{ border-bottom:1px solid rgba(0,0,0,.06); }
#premiumModal .modal-title,
#privacyModal .modal-title,
#termsModal .modal-title,
#contactModal .modal-title{ color: var(--ink) !important; font-weight:900 !important; }
#premiumModal .btn-close,
#privacyModal .btn-close,
#termsModal .btn-close,
#contactModal .btn-close{ filter:none; opacity:.8; }
#premiumModal .btn-close:hover,
#privacyModal .btn-close:hover,
#termsModal .btn-close:hover,
#contactModal .btn-close:hover{ opacity:1; }
#premiumModal .form-check-input{ accent-color: var(--teal); }
#premiumModal #savePremiumBtn{ background: var(--teal) !important; border-color: var(--teal) !important; }
#premiumModal #savePremiumBtn:hover{ background: var(--teal-2) !important; }

/* “Go Premium — $29” */
#premiumModal .btn.btn-outline-light,
#premiumModal + .offcanvas-body .btn.btn-outline-light{
  color: var(--teal) !important; border-color: var(--teal) !important;
}
#premiumModal .btn.btn-outline-light:hover,
#premiumModal + .offcanvas-body .btn.btn-outline-light:hover{
  background: var(--teal) !important; color:#fff !important; border-color: var(--teal) !important;
}

/* ===== TOAST / ÉXITO ===== */
#successMsg.alert{
  background: var(--teal) !important;
  color:#fff !important;
  border:1px solid var(--teal-2) !important;
  text-align:center;
}

/* ===== FOOTER ===== */
.footer-ss{
  background: var(--cream) !important;
  color: var(--ink) !important;
}
.footer-ss .footer-logo{ filter: drop-shadow(0 2px 6px rgba(0,0,0,.08)); }
.footer-ss .btn-link{ color: var(--teal) !important; }
.footer-ss .btn-link:hover{ color: var(--teal-2) !important; text-decoration: underline; }
.footer-ss .footer-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:#fff; border:1px solid var(--cream-2);
  color: var(--teal); margin:0 3px;
}
.footer-ss .footer-icon:hover{ background: var(--cream); color: var(--teal-2); }
.footer-ss .text-white-50, .footer-ss .small{ color: var(--ink-2) !important; }

/* ===== TEXTO GLOBAL ===== */
body, p, .text-muted-strong{ color: var(--ink) !important; }

/* --- NAV: texto oscuro aunque exista .navbar-dark --- */
.navbar.bg-glass{background:rgba(255,255,255,.9)!important;backdrop-filter:blur(10px);border-bottom:1px solid var(--cream-2);}
.navbar.navbar-dark .navbar-brand span,
.navbar .navbar-brand span{color:var(--navy)!important;}
.navbar.navbar-dark .nav-link,
.navbar .nav-link{color:var(--navy)!important;opacity:1!important;}
.navbar.navbar-dark .nav-link:hover,
.navbar .nav-link:hover{color:var(--teal)!important;}
.navbar .navbar-toggler{border-color:rgba(0,0,0,.15)}
.navbar .navbar-toggler-icon{filter:invert(20%) sepia(7%) saturate(700%) hue-rotate(180deg) brightness(90%);}

/* --- HERO: baja velo para que no lave colores --- */
.hero-bg{opacity:.80!important;}

#contactModal .modal-content{background:var(--cream)!important;color:var(--ink)!important;}
#contactModal .modal-header{border-bottom:1px solid var(--cream-2)!important;}
#contactModal .modal-title{color:var(--ink)!important;font-weight:900;}
#contactModal .text-white-50,#contactModal .small,#contactModal .form-text,#contactModal .modal-body p{color:var(--ink-2)!important;}
#contactModal textarea.form-control{background:#fff;color:var(--ink);border:1px solid var(--cream-2);}
#contactModal .btn.btn-primary{background:var(--teal)!important;border-color:var(--teal)!important;}
#contactModal .btn.btn-primary:hover{background:var(--teal-2)!important;border-color:var(--teal-2)!important;}
#contactModal .btn-close{filter:none;opacity:.85;} #contactModal .btn-close:hover{opacity:1;}

/* --- SWEETALERT2 (el cuadro oscuro de “Thanks…”) --- */
.swal2-container.swal2-backdrop-show{background:rgba(9, 197, 225, 0.892)!important;}
.swal2-popup{background:#151515!important;color:var(--ink)!important;border-radius:14px!important;border:1px solid var(--cream-2)!important;box-shadow:0 12px 34px rgba(34,49,75,.18)!important;}
.swal2-title,.swal2-html-container{color:var(--ink)!important;}
.swal2-icon.swal2-success{border-color:var(--teal)!important;color:var(--teal)!important;}
.swal2-styled.swal2-confirm{background:var(--teal)!important;border:0!important;}
.swal2-styled.swal2-confirm:hover{background:var(--teal-2)!important;}

/* --- fallback si usas toast bootstrap en lugar de sweetalert --- */
.toast{background:#fff!important;color:var(--ink)!important;border:1px solid var(--cream-2)!important;}
.toast .toast-header{background:#fff!important;color:var(--ink)!important;}

/* ==== Feature cards con banda superior y sombra más marcada ==== */
.feature-card{
  background:#fff;
  border:1px solid var(--cream-2);
  border-radius:18px;
  box-shadow:0 14px 32px rgba(34,49,75,.14);
  position:relative;
  overflow:hidden;
  opacity:0; animation: fadeInUp .7s ease forwards;
}
.feature-card::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:6px;
  background: linear-gradient(90deg, var(--teal), var(--teal-2));
}
.feature-card.accent-2::before{ filter:saturate(1.15) brightness(1.02); }
.feature-card.accent-3::before{ filter:saturate(1.3) brightness(1.05); }

/* ==== Icono: círculo sólido teal con anillo ==== */
.icon-badge-xl{
  width:78px; height:78px; display:grid; place-items:center;
  margin-inline:auto;
  border-radius:50%;
  background:var(--teal);
  color:#fff;
  box-shadow:
    0 10px 26px rgba(47,196,182,.35),
    inset 0 -6px 12px rgba(0,0,0,.12);
  border:3px solid #fff;
  outline:2px solid var(--teal-2);
  transition: transform .18s ease, box-shadow .18s ease;
}
.icon-badge-xl i{ font-size:30px; line-height:1; }

/* Hover notorio */
.feature-card:hover .icon-badge-xl{
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 16px 36px rgba(47,196,182,.45),
    inset 0 -8px 14px rgba(0,0,0,.14);
}

/* Ajustes de tipografía para más contraste */
#features .feature-heading{
  color: var(--navy) !important;
  font-weight:900 !important;
  letter-spacing:.2px;
  margin-bottom:.35rem;
}
#features p{ color: var(--ink-2); }

/* Escalonado de entrada */
#features .col-md-4:nth-child(1) .feature-card{ animation-delay:.12s; }
#features .col-md-4:nth-child(2) .feature-card{ animation-delay:.28s; }
#features .col-md-4:nth-child(3) .feature-card{ animation-delay:.44s; }

/* --- How it works: icon heart teal --- */
#how .icon-badge-xl{
  background: var(--teal);
  outline: 2px solid var(--teal-2);
  border: 3px solid #fff;
  box-shadow: 0 10px 26px rgba(47,196,182,.35);
}
#how .icon-badge-xl i{
  color: #fff;
  font-size: 32px;
}
#how .feature-card:hover .icon-badge-xl{
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 36px rgba(47,196,182,.45);
}
#how h3{
  color: var(--navy);
  font-weight: 900;
}

/* ===== Maryland note — embellishments ===== */
.note-band{ border:1px solid var(--cream-2); border-radius:16px; }
.note-title{ color: var(--ink); font-size:1.05rem; }
.note-icon{
  display:inline-grid; place-items:center;
  width:44px; height:44px; border-radius:12px;
  background: var(--glass); color: var(--teal);
  border:1px solid var(--cream-2);
  box-shadow: 0 6px 14px rgba(47,196,182,.18);
  font-size:20px;
}
.note-badge{
  background:#fff; color: var(--teal); border:1px solid var(--cream-2);
  font-weight:700; letter-spacing:.2px;
}
.note-chip{
  display:inline-flex; align-items:center; gap:.25rem;
  background:#fff; color: var(--ink);
  border:1px solid var(--cream-2);
  padding:.35rem .6rem; border-radius:999px; font-size:.85rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.note-chip:hover{
  transform: translateY(-1px);
  border-color: rgba(47,196,182,.45);
  box-shadow: 0 6px 16px rgba(34,49,75,.08);
}

/* ===== Employers & CSR Partners ===== */
.partner-logo {
  height: 42px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.1));
}

.feature-bullet {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  color: var(--ink-2);
  font-size: 0.97rem;
}

.feature-bullet i {
  color: var(--teal);
  font-size: 1.15rem;
  background: var(--glass);
  padding: 6px;
  border-radius: 8px;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(47,196,182,.2);
  transition: all 0.2s ease;
}

.feature-bullet:hover i {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(47,196,182,.35);
}

/* ===== LOGO PRINCIPAL (Navbar) ===== */
.navbar-brand img,
.brand-logo {
  height: 60px; /* antes 40px */
  width: auto;
  max-width: 100%;
  transition: all 0.3s ease;
  object-fit: contain;
}

/* Mantiene el menú centrado y evita romper layout */
.navbar {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  align-items: center;
}

/* En pantallas pequeñas el logo se reduce suavemente */
@media (max-width: 991px) {
  .navbar-brand img,
  .brand-logo {
    height: 52px;
  }
}

/* ===== LOGO EN SECCIONES (como Employers & CSR Partners) ===== */
.partner-logo {
  height: 65px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.12));
}

/* Ajuste automático si hay título al lado */
@media (max-width: 768px) {
  .partner-logo {
    height: 58px;
    margin-bottom: 8px;
  }
}

/* ===== Contact Modal (versión clara) ===== */
#contactModal .modal-content {
  background: var(--cream) !important;
  color: var(--ink) !important;
  border: 1px solid var(--cream-2);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(34,49,75,.18);
}

#contactModal .modal-title {
  color: var(--ink);
  font-weight: 900;
}

#contactModal .contact-email {
  color: var(--teal) !important;
  text-decoration: none;
  font-size: 1rem;
  transition: color .3s ease;
}
#contactModal .contact-email:hover {
  color: var(--teal-2) !important;
  text-decoration: underline;
}

#contactModal .form-control {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--cream-2);
}
#contactModal .form-control::placeholder {
  color: #8b93a3;
}
#contactModal .btn-outline-light {
  color: var(--teal);
  border-color: var(--teal);
}
#contactModal .btn-outline-light:hover {
  background: var(--teal);
  color: #fff;
}

.footer-ss .footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--cream-2);
  color: var(--teal);
  margin: 0 3px;
  transition: all 0.3s ease;
}

.footer-ss .footer-icon:hover {
  background: var(--cream);
  color: var(--teal-2);
  transform: translateY(-2px);
}

.navbar .dropdown-menu{border-radius:14px;border:1px solid var(--cream-2);}
.navbar .dropdown-item i{color:var(--teal);}
.navbar .dropdown-item:hover{background:var(--cream);}

/* === HERO fine-tune per John === */
.hero .hero-badge{ transform: translateY(-6px); }
.hero .hero-title{ margin-top:.15rem; }
.hero .hero-tagline{
  margin-top:.25rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ffffff;
  text-shadow:0 1px 8px rgba(0,0,0,.35);
}


/* Mobile: que el tagline siempre se vea y no rompa */
@media (max-width: 575.98px){
  .hero .hero-tagline{ font-size:.95rem; }
  .hero .hero-badge{ transform: translateY(-4px); }
}

/* Tagline en blanco puro */
.hero .hero-tagline {
  color: #ffffff !important;
}

/* --- FIX HERO MOBILE EXACTO COMO LO QUIERES --- */
@media (max-width: 768px) {

  .hero .container {
    padding-top: 10px !important;   /* sube TODO */
    padding-bottom: 0 !important;
  }

  .hero-badge {
    margin-top: 0 !important;       /* badge arriba */
    margin-bottom: 4px !important;
    transform: translateY(-10px);   /* súbelo un poquito */
  }

  .hero-title {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    transform: translateY(-6px);    /* sube ShiftSitter */
  }

  .hero-tagline {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    transform: translateY(-6px);    /* sube tagline */
  }

  #countdown {
    margin-top: 150px !important;    /* countdown MÁS ABAJO */
    margin-bottom: 20px !important;
  }

  .hero {
    height: auto !important;
    min-height: 560px !important;   /* evita el hueco blanco */
  }

}

/* ===== COOKIE BANNER FIX ===== */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #0f172a; /* azul marino sólido */
  padding: 18px 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cookie-inner {
  max-width: 1200px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.cookie-text {
  color: #ffffff !important;
  font-size: 15px;
  line-height: 1.4;
}

/* Buttons */
.cookie-actions .btn {
  font-size: 14px !important;
  padding: 8px 16px !important;
}

.cookie-actions .btn-outline-light {
  border-color: #fff !important;
  color: #fff !important;
}

.cookie-actions .btn-primary {
  background: #00bfa5 !important;
  border-color: #00bfa5 !important;
}

/* Mobile */
@media (min-width: 768px) {
  .cookie-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}