:root {
    --wf-purple: #5B4BDB;
    --wf-fuchsia: #F02AA6;
    --wf-deep: #3A2FC9;
    --wf-dark: #1f1a4d;
}

html,
body {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
    scroll-behavior: smooth;
    color: #1a1a1a;
}

.btn-wf {
    background: linear-gradient(90deg, var(--wf-purple), var(--wf-fuchsia));
    border: none;
    color: #fff;
    box-shadow: 0 6px 16px rgba(240, 42, 166, 0.3);
}

.btn-wf:hover {
    filter: brightness(1.05);
    color: #fff;
}

.text-wf {
    color: var(--wf-deep) !important;
}

.bg-wf {
    background: linear-gradient(120deg, var(--wf-purple) 0%, var(--wf-fuchsia) 100%);
}

.badge-wf {
    background: rgba(240, 42, 166, .15);
    color: var(--wf-fuchsia);
}

.hero {
    position: relative;
    overflow: hidden;
    color: #fff;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(1200px 600px at 85% 10%, rgba(255, 255, 255, .18), transparent 55%), radial-gradient(1000px 500px at 10% 90%, rgba(255, 255, 255, .10), transparent 60%);
    pointer-events: none;
}

.hero-img {
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(31, 26, 77, .35);
    transform: rotate(-1.5deg);
}

.logo-wf {
    font-weight: 800;
    letter-spacing: .2px;
    color: #fff;
    text-decoration: none;
}

.nav-link {
    color: #fff !important;
    opacity: .92;
}

.nav-link:hover {
    opacity: 1;
}

.feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(240, 42, 166, .12);
    color: var(--wf-deep);
}

.card-pricing {
    border: 1px solid rgba(91, 75, 219, .12);
    transition: transform .2s ease, box-shadow .2s ease;
    border-radius: 18px;
}

.card-pricing:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(31, 26, 77, .08);
}

.check {
    color: #12b886;
}

.section-label {
    display: inline-block;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .5px;
    text-transform: uppercase;
    background: rgb(99 84 221);
    color: #ffffff;
    padding: .4rem .6rem;
    border-radius: 999px;
}

/* Footer WooFactura (extiende el bg-dark de Bootstrap) */
footer.bg-dark {
    background: var(--wf-dark) !important;
    /* color corporativo oscuro */
    color: #e6e6ff !important;
    /* texto más suave */
}

footer.bg-dark a {
    color: var(--wf-fuchsia) !important;
    /* enlaces fucsia */
    text-decoration: none;
    transition: color .2s ease, opacity .2s ease;
}

footer.bg-dark a:hover {
    color: var(--wf-purple) !important;
    /* hover morado */
    opacity: 0.9;
}

.whatsapp-fab {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1050;
    background: #25D366;
    color: #fff;
    border-radius: 999px;
    padding: 12px 16px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}

.hero-bullets li::marker {
    color: #fff;
}

.shadow-soft {
    box-shadow: 0 12px 40px rgba(31, 26, 77, .08);
}

.gradient-text {
    background: linear-gradient(90deg, #fff, #ffe1f2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media (max-width: 576px) {
    .hero-img {
        margin-top: 1.5rem;
    }

    .display-5 {
        font-size: 2rem;
    }
}
/* Card de blog */
.card-post {
    border: 1px solid rgba(91, 75, 219, .12);
    /* línea sutil en tono marca */
    border-radius: 18px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
    background: #fff;
}

.card-post:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(31, 26, 77, .08);
}

/* Imagen superior de la card */
.card-post img {
    width: 100%;
    height: 200px;
    /* altura fija para uniformidad */
    object-fit: cover;
    /* recorte limpio */
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}

/* Contenido */
.card-post .card-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
}

.card-post .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: .5rem;
    color: #1a1a1a;
}

.card-post .card-text {
    font-size: .95rem;
    color: #444;
    margin-bottom: 1rem;
    flex-grow: 1;
}

/* Meta info: vistas, tiempo lectura */
.card-post .card-meta {
    font-size: .8rem;
    color: #6c757d;
    display: flex;
    justify-content: space-between;
    margin-bottom: .75rem;
}

/* Botón leer más */
.card-post .btn {
    align-self: flex-start;
    font-size: .85rem;
    font-weight: 500;
    border-radius: 8px;
}

/*Estilos para la página de post individual */

  .partner-promo {
      background: linear-gradient(135deg, #f8f9fa 0%, #eef2ff 100%);
  }

  .partner-promo h5 {
      color: #2b2b2b;
  }

  .partner-promo .btn {
      border-radius: 30px;
      font-weight: 600;
  }

  .post-body {
      text-align: justify;
      line-height: 1.8;
      font-size: 1.05rem;
  }

  .post-body img {
      max-width: 100%;
      height: auto;
      border-radius: 0.5rem;
      margin: 1rem 0;
  }

  .post-body p {
      margin-bottom: 1.2rem;
  }

  .post-body h2,
  .post-body h3,
  .post-body h4 {
      margin-top: 2rem;
      margin-bottom: 1rem;
      font-weight: 600;
  }

  /* Rating */
  .stars {
      font-size: 1.8rem;
      color: #ddd;
      cursor: pointer;
  }

  .stars .star.active {
      color: #ffc107;
  }

  /* Toast animado */
  .rating-toast {
      position: fixed;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      background: #198754;
      color: #fff;
      padding: 12px 20px;
      border-radius: 30px;
      font-size: 1rem;
      font-weight: bold;
      display: none;
      opacity: 0;
      z-index: 9999;
      box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
      animation: fadeInOut 3s ease forwards;
  }

  @keyframes fadeInOut {
      0% {
          opacity: 0;
          transform: translateX(-50%) translateY(20px);
      }

      10% {
          opacity: 1;
          transform: translateX(-50%) translateY(0);
      }

      90% {
          opacity: 1;
      }

      100% {
          opacity: 0;
          transform: translateX(-50%) translateY(20px);
      }
  }

  @media (max-width: 768px) {
      .blog-post {
          padding: 0 1rem;
      }

      .post-body {
          font-size: 1rem;
          line-height: 1.7;
      }

      .stars {
          font-size: 1.6rem;
      }
  }