:root {
      --purple-dark: #210037;
      --purple-primary: #4b1778;
      --purple: #6f36c7;
      --violet: #9256e8;
      --lavender: #f4effa;
      --white: #ffffff;
      --soft-gray: #f7f6f9;
      --text-dark: #171323;
      --text-muted: #625a70;
      --border: #e9e2f1;
      --shadow: 0 18px 45px rgba(33, 0, 55, .10);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text-dark);
      background: var(--white);
      line-height: 1.65;
      padding-top: 88px;
    }

    h1, h2, h3, h4, .navbar-brand {
      font-family: "Montserrat", system-ui, sans-serif;
      letter-spacing: 0;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; height: auto; }

    .site-header {
      background: rgba(255, 255, 255, .94);
      border-bottom: 1px solid rgba(75, 23, 120, .10);
      backdrop-filter: blur(16px);
    }

    .navbar { min-height: 88px; }
    .logo-img { width: 240px; max-height: 72px; object-fit: contain; }

    .nav-link {
      color: #31263f;
      font-weight: 600;
      font-size: .95rem;
      padding: .75rem .85rem !important;
    }

    .nav-link:hover, .nav-link.active { color: var(--purple); }

    .btn-alpha {
      --bs-btn-bg: var(--purple-primary);
      --bs-btn-border-color: var(--purple-primary);
      --bs-btn-hover-bg: var(--purple-dark);
      --bs-btn-hover-border-color: var(--purple-dark);
      --bs-btn-color: #fff;
      --bs-btn-hover-color: #fff;
      border-radius: 999px;
      font-weight: 700;
      padding: .9rem 1.25rem;
      box-shadow: 0 12px 26px rgba(75, 23, 120, .18);
    }

    .btn-outline-alpha {
      --bs-btn-color: var(--purple-primary);
      --bs-btn-border-color: rgba(75, 23, 120, .25);
      --bs-btn-hover-bg: var(--purple-primary);
      --bs-btn-hover-border-color: var(--purple-primary);
      --bs-btn-hover-color: #fff;
      border-radius: 999px;
      font-weight: 700;
      padding: .9rem 1.25rem;
    }

    .section-padding { padding: 92px 0; }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      color: var(--purple);
      background: rgba(146, 86, 232, .11);
      border: 1px solid rgba(146, 86, 232, .18);
      border-radius: 999px;
      padding: .45rem .85rem;
      font-weight: 800;
      font-size: .78rem;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .section-title {
      color: var(--purple-dark);
      font-size: clamp(2rem, 4vw, 3.15rem);
      line-height: 1.12;
      font-weight: 800;
      margin: 1rem 0;
    }

    .section-lead {
      color: var(--text-muted);
      font-size: 1.08rem;
      max-width: 760px;
    }

    .hero {
      position: relative;
      overflow: hidden;
      min-height: calc(100vh - 88px);
      display: flex;
      align-items: center;
      background:
        linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .84) 48%, rgba(244, 239, 250, .1) 100%),
        url("../images/banner.jpg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .hero h1 {
      color: var(--purple-dark);
      font-size: clamp(1.85rem, 3vw, 3.35rem);
      line-height: 1.14;
      font-weight: 800;
      margin: 1.1rem 0 1.2rem;
    }

    .hero p {
      color: var(--text-muted);
      font-size: clamp(1.02rem, 1.6vw, 1.2rem);
      max-width: 680px;
    }

    .hero-visual {
      position: relative;
      min-height: 560px;
      border-radius: 36px 36px 120px 36px;
      background:
        linear-gradient(135deg, rgba(33, 0, 55, .18), rgba(111, 54, 199, .45)),
        url("../img/hero-alpha-consulting.jpg");
      background-size: cover;
      background-position: center;
      box-shadow: var(--shadow);
      overflow: hidden;
      isolation: isolate;
    }

    .hero-visual::before {
      content: "Imagen placeholder: img/hero-alpha-consulting.jpg";
      position: absolute;
      inset: 24px;
      display: grid;
      place-items: center;
      color: rgba(255, 255, 255, .88);
      border: 1px dashed rgba(255, 255, 255, .55);
      border-radius: 26px 26px 92px 26px;
      text-align: center;
      font-weight: 700;
      padding: 2rem;
      z-index: 1;
    }

    .trust-strip {
      display: inline-flex;
      flex-wrap: wrap;
      gap: .55rem;
      align-items: center;
      margin-top: 2rem;
      padding: .85rem 1rem;
      border-radius: 999px;
      background: rgba(255, 255, 255, .80);
      border: 1px solid rgba(75, 23, 120, .12);
      color: var(--purple-primary);
      font-weight: 700;
      box-shadow: 0 12px 34px rgba(33, 0, 55, .07);
    }

    .image-placeholder {
      min-height: 410px;
      border-radius: 32px;
      background:
        linear-gradient(135deg, rgba(75, 23, 120, .86), rgba(146, 86, 232, .74)),
        var(--lavender);
      color: #fff;
      display: grid;
      place-items: center;
      text-align: center;
      padding: 2rem;
      font-weight: 800;
      box-shadow: var(--shadow);
    }

    .section-image {
      width: 100%;
      min-height: 410px;
      border-radius: 32px;
      object-fit: cover;
      box-shadow: var(--shadow);
      display: block;
    }

    .section-image-sm {
      min-height: 220px;
    }

    .map-image {
      object-fit: contain;
      background: #fff;
    }

    .service-card, .value-card, .benefit-card, .city-chip {
      border: 1px solid var(--border);
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 14px 35px rgba(33, 0, 55, .06);
    }

    .service-card {
      height: 100%;
      padding: 2rem;
      transition: transform .25s ease, box-shadow .25s ease;
    }

    .service-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow);
    }

    .icon-box {
      width: 54px;
      height: 54px;
      display: inline-grid;
      place-items: center;
      border-radius: 16px;
      color: #fff;
      background: linear-gradient(135deg, var(--purple-primary), var(--violet));
      font-size: 1.45rem;
      margin-bottom: 1.15rem;
    }

    .service-card h3, .value-card h3 { color: var(--purple-dark); font-size: 1.2rem; font-weight: 800; }

    .service-list {
      padding-left: 0;
      margin: 1.2rem 0 1.4rem;
      list-style: none;
    }

    .service-list li {
      display: flex;
      gap: .55rem;
      color: var(--text-muted);
      margin-bottom: .55rem;
    }

    .service-list i { color: var(--purple); flex: 0 0 auto; margin-top: .18rem; }

    .soft-section { background: var(--soft-gray); }

    .wellness-map {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.4rem;
      align-items: stretch;
      margin-top: 2.2rem;
    }

    .wellness-node {
      min-height: 235px;
      border-radius: 999px;
      border: 1px solid rgba(111, 54, 199, .18);
      background: rgba(255, 255, 255, .88);
      display: grid;
      place-items: center;
      text-align: center;
      padding: 2rem;
      box-shadow: 0 14px 38px rgba(33, 0, 55, .07);
    }

    .wellness-center {
      grid-column: 1 / -1;
      width: 170px;
      height: 170px;
      display: grid;
      place-items: center;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      background: linear-gradient(135deg, var(--purple-dark), var(--purple));
      font-family: "Montserrat", sans-serif;
      font-weight: 800;
      box-shadow: 0 20px 46px rgba(33, 0, 55, .22);
      padding: 1.25rem;
      margin: 0 auto .4rem;
    }

    .benefit-card {
      padding: 1.25rem;
      display: flex;
      gap: .85rem;
      align-items: center;
      font-weight: 800;
      color: var(--purple-dark);
    }

    .dark-section {
      color: #fff;
      background:
        radial-gradient(circle at 92% 12%, rgba(146, 86, 232, .34), transparent 30%),
        linear-gradient(135deg, var(--purple-dark), #35104f 58%, #180026);
    }

    .dark-section .section-title, .dark-section .section-lead { color: #fff; }
    .dark-section .section-lead { opacity: .82; }

    .problem-flow {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 1rem;
      margin-top: 2.5rem;
    }

    .problem-step {
      position: relative;
      min-height: 132px;
      display: grid;
      place-items: center;
      align-content: center;
      gap: .75rem;
      text-align: center;
      padding: 1.25rem 1rem;
      border-radius: 8px;
      background: rgba(255, 255, 255, .09);
      border: 1px solid rgba(255, 255, 255, .16);
      font-weight: 800;
    }

    .problem-step img {
      width: 64px;
      height: 64px;
      object-fit: contain;
      display: block;
    }

    .problem-step span {
      display: block;
      line-height: 1.25;
    }

    .problem-step:not(:last-child)::after {
      content: "\F138";
      font-family: "bootstrap-icons";
      position: absolute;
      right: -1.1rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--violet);
      font-size: 1.35rem;
      z-index: 2;
    }

    .big-statement {
      font-family: "Montserrat", sans-serif;
      font-size: clamp(2rem, 4vw, 4rem);
      font-weight: 800;
      margin-top: 2.2rem;
    }

    .value-card { height: 100%; padding: 1.8rem; }

    .feature-card {
      align-self: stretch;
    }

    .alpha-modal {
      border: 0;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 24px 70px rgba(33, 0, 55, .22);
    }

    .alpha-modal .modal-header,
    .alpha-modal .modal-footer {
      border-color: var(--border);
      padding: 1.5rem;
    }

    .alpha-modal .modal-body {
      padding: 1.5rem;
    }

    .alpha-modal .modal-title {
      color: var(--purple-dark);
      font-family: "Montserrat", sans-serif;
      font-size: clamp(1.45rem, 3vw, 2.25rem);
      font-weight: 800;
      line-height: 1.15;
    }

    .modal-feature {
      height: 100%;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 1.25rem;
      background: var(--soft-gray);
    }

    .modal-feature i {
      color: var(--purple);
      font-size: 1.6rem;
      margin-bottom: .75rem;
      display: inline-block;
    }

    .modal-feature h3 {
      color: var(--purple-dark);
      font-size: 1.05rem;
      font-weight: 800;
      margin-bottom: .45rem;
    }

    .modal-feature p {
      color: var(--text-muted);
      margin-bottom: 0;
    }

    .recruitment-highlight {
      border-radius: 28px;
      background: linear-gradient(135deg, var(--lavender), #fff);
      border: 1px solid var(--border);
      padding: clamp(1.5rem, 4vw, 3rem);
    }

    .city-chip {
      padding: .75rem 1rem;
      color: var(--purple-primary);
      font-weight: 800;
      text-align: center;
    }

    .map-placeholder {
      min-height: 320px;
      border-radius: 28px;
      background:
        linear-gradient(135deg, rgba(75, 23, 120, .90), rgba(146, 86, 232, .76)),
        var(--lavender);
      color: #fff;
      display: grid;
      place-items: center;
      padding: 2rem;
      text-align: center;
      font-weight: 800;
    }

    .cta-panel {
      border-radius: 28px;
      padding: clamp(2rem, 5vw, 4.2rem);
      background:
        radial-gradient(circle at 86% 8%, rgba(255, 255, 255, .18), transparent 24%),
        linear-gradient(135deg, var(--purple-dark), var(--purple-primary) 58%, #36105a);
      color: #fff;
      box-shadow: var(--shadow);
    }

    .metric {
      min-height: 98px;
      border-radius: 8px;
      padding: 1rem;
      background: rgba(255, 255, 255, .10);
      border: 1px solid rgba(255, 255, 255, .18);
      display: flex;
      align-items: center;
      gap: .75rem;
      font-weight: 800;
    }

    .site-footer {
      background: #12001f;
      color: rgba(255, 255, 255, .78);
      padding: 70px 0 28px;
    }

    .site-footer h3 {
      color: #fff;
      font-size: 1rem;
      margin-bottom: 1rem;
    }

    .footer-logo { width: 190px; filter: brightness(0) invert(1); }

    .footer-links {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    .footer-links li { margin-bottom: .55rem; }
    .footer-links a:hover { color: #fff; }

    .footer-social {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 1.25rem;
    }

    .footer-social a {
      width: 50px;
      height: 50px;
      display: inline-grid;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      background: rgba(255, 255, 255, .10);
      border: 1px solid rgba(255, 255, 255, .18);
      font-size: 1.35rem;
      transition: background .2s ease, transform .2s ease;
    }

    .footer-social a:hover {
      background: var(--purple);
      transform: translateY(-2px);
    }

    .whatsapp-float {
      position: fixed;
      right: 22px;
      bottom: 22px;
      width: 60px;
      height: 60px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      background: #25d366;
      font-size: 1.75rem;
      box-shadow: 0 14px 30px rgba(37, 211, 102, .35);
      z-index: 1040;
      animation: floatPulse 2.8s ease-in-out infinite;
    }

    @keyframes floatPulse {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
    }

    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .7s ease, transform .7s ease;
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 991.98px) {
      body { padding-top: 78px; }
      .navbar { min-height: 78px; }
      .logo-img { width: 198px; }
      .hero { min-height: auto; padding: 64px 0; }
      .hero-visual { min-height: 420px; margin-top: 2rem; }
      .section-padding { padding: 70px 0; }
      .wellness-map { grid-template-columns: 1fr; }
      .wellness-center { margin: 0 auto; order: -1; }
      .wellness-node { min-height: 190px; border-radius: 28px; }
      .problem-flow { grid-template-columns: 1fr; }
      .problem-step:not(:last-child)::after {
        content: "\F128";
        right: auto;
        left: 50%;
        top: auto;
        bottom: -1.35rem;
        transform: translateX(-50%);
      }
    }

    @media (max-width: 575.98px) {
      .trust-strip { border-radius: 18px; }
      .hero .d-flex.gap-3 { flex-direction: column; align-items: stretch; }
      .btn-alpha, .btn-outline-alpha { width: 100%; }
      .image-placeholder, .map-placeholder { min-height: 280px; }
      .whatsapp-float { width: 54px; height: 54px; right: 16px; bottom: 16px; }
    }

.section-intro { max-width: 820px; }
.section-intro-narrow { max-width: 780px; }
.section-intro-wide { max-width: 860px; }
.image-placeholder-sm { min-height: 220px; }

/* ==========================================================================
   BLOG ALPHA CONSULTING STYLES
   ========================================================================== */

.hero-blog {
  min-height: auto;
  padding: 56px 0 36px;
  background: linear-gradient(180deg, rgba(244, 239, 250, 0.75) 0%, #ffffff 100%);
  border-bottom: 1px solid var(--border);
}

.category-pills-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--purple) transparent;
  padding-bottom: 6px;
}

.category-pills-scroll::-webkit-scrollbar {
  height: 4px;
}

.category-pills-scroll::-webkit-scrollbar-thumb {
  background: var(--purple);
  border-radius: 4px;
}

.category-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--border);
  color: var(--text-dark);
  font-weight: 600;
  font-size: 0.88rem;
  white-space: nowrap;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(33, 0, 55, 0.03);
}

.category-pill:hover {
  border-color: var(--purple);
  color: var(--purple);
  transform: translateY(-1px);
}

.category-pill.active {
  background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(111, 54, 199, 0.3);
}

.category-pill.active .badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}

.search-group .form-control {
  border-radius: 0;
  border-color: var(--border);
  padding: 0.75rem 1rem;
}

.search-group .input-group-text {
  border-color: var(--border);
  border-radius: 999px 0 0 999px;
}

.search-group .btn-alpha {
  border-radius: 0 999px 999px 0;
}

/* Blog Cards */
.blog-card {
  background: #ffffff;
  border: 1px solid var(--border);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(33, 0, 55, 0.1) !important;
}

.blog-card-img-wrapper {
  height: 220px;
  background: var(--soft-gray);
}

.blog-card-img {
  height: 220px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog-card:hover .blog-card-img {
  transform: scale(1.05);
}

.category-badge-overlay {
  top: 14px;
  left: 14px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.4rem 0.85rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  color: #fff;
  z-index: 2;
}

.blog-card-title {
  color: var(--purple-dark);
  line-height: 1.35;
  transition: color 0.2s ease;
}

.blog-card-title a {
  color: var(--purple-dark);
}

.blog-card:hover .blog-card-title a {
  color: var(--purple);
}

.blog-card-excerpt {
  line-height: 1.6;
}

.read-more-link {
  transition: transform 0.2s ease;
}

.blog-card:hover .read-more-link {
  transform: translateX(4px);
}

/* Public Pagination */
.blog-pagination .page-link {
  color: var(--purple-dark);
  border-color: var(--border);
  padding: 0.6rem 1rem;
  font-weight: 600;
  border-radius: 8px;
  margin: 0 3px;
}

.blog-pagination .page-item.active .page-link {
  background: var(--purple-primary);
  border-color: var(--purple-primary);
  color: #fff;
}

.blog-pagination .page-link:hover {
  background: var(--lavender);
  color: var(--purple);
}

/* CTA Blog Box */
.cta-blog-box {
  background: linear-gradient(135deg, var(--purple-dark) 0%, var(--purple-primary) 50%, var(--purple) 100%);
  box-shadow: 0 20px 45px rgba(33, 0, 55, 0.2);
}

/* Single Article Body Styling */
.article-header {
  background: linear-gradient(180deg, var(--lavender) 0%, #ffffff 100%);
}

.article-main-title {
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  line-height: 1.18;
  font-weight: 800;
}

.article-content-body {
  color: #272033;
  line-height: 1.85;
}

.article-content-body p {
  margin-bottom: 1.5rem;
}

.article-content-body h2 {
  color: var(--purple-dark);
  font-size: 1.85rem;
  font-weight: 800;
  margin-top: 2.75rem;
  margin-bottom: 1.15rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--lavender);
}

.article-content-body h3 {
  color: var(--purple-primary);
  font-size: 1.45rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.article-content-body blockquote {
  border-left: 4px solid var(--purple);
  background: var(--lavender);
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
  border-radius: 0 16px 16px 0;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--purple-dark);
  font-weight: 500;
}

.article-content-body ul, .article-content-body ol {
  padding-left: 1.5rem;
  margin-bottom: 1.75rem;
}

.article-content-body li {
  margin-bottom: 0.6rem;
}