:root {
      --brand-dark: #034863;
      --brand-accent: #007699;
      --brand-light: #e6f4f8;
      --text-dark: #0f172a;
      --text-muted: #475569;
    }

    .btn-brand-primary {
      background-color: var(--brand-accent) !important;
      border-color: var(--brand-accent) !important;
      color: #ffffff !important;
      transition: all 0.25s ease;
    }

    .btn-brand-primary:hover {
      background-color: var(--brand-dark) !important;
      border-color: var(--brand-dark) !important;
      transform: translateY(-2px);
    }

    .btn-brand-dark {
      background-color: var(--brand-dark) !important;
      border-color: var(--brand-dark) !important;
      color: #ffffff !important;
      transition: all 0.25s ease;
    }

    .btn-brand-dark:hover {
      background-color: var(--brand-accent) !important;
      border-color: var(--brand-accent) !important;
      transform: translateY(-2px);
    }

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

    .text-brand-dark {
      color: var(--brand-dark) !important;
    }

    .category-card-item {
      transition: all 0.25s ease;
      border: 1px solid transparent;
    }

    .category-card-item:hover {
      background-color: var(--brand-light) !important;
      border-color: rgba(0, 118, 153, 0.2);
    }


    .btn-glow {
        background: rgb(3, 72, 99);
        color: white;

        border: 0;
        border-radius: 50px;

        padding: 12px 30px;

        box-shadow: 0 0 0 rgba(3, 72, 99, 0);

        animation: pulseLight 2s infinite;
    }

    .btn-glow:hover,
    .btn-glow:focus,
    .btn-glow:active {
        background-color: #426280 !important;
        color: #fff !important;
        border-color: #426280 !important;
    }

    @keyframes pulseLight {

        0% {
            box-shadow:
                0 0 0 0 rgba(3, 72, 99, 0.6);
        }

        70% {
            box-shadow:
                0 0 0 14px rgba(3, 72, 99, 0);
        }

        100% {
            box-shadow:
                0 0 0 0 rgba(3, 72, 99, 0);
        }
    }


    .section-label {
        display: inline-flex;
        align-items: center;
        padding: 7px 15px;
        margin-bottom: 18px;
        border-radius: 50px;
        background: rgba(0, 135, 170, .08);
        color: #007f9f;
        font-size: 14px;
        font-weight: 700;
    }

    .home-kit-title {
        max-width: 720px;
        margin-bottom: 25px;
        font-size: clamp(45px, 5vw, 72px);
        line-height: 1.02;
        font-weight: 800;
        letter-spacing: -2px;
        color: #034863;
    }

    .home-kit-title span {
        display: block;
        color: #0087a8;
    }

    .home-kit-description {
        max-width: 720px;
        margin-bottom: 28px;
        color: #34445c;
        font-size: 19px;
        line-height: 1.7;
    }

    .kit-benefits {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
    }

    .kit-benefit {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 17px;
        border-radius: 50px;

        background: #e7f7fb;
        color: #034863;

        font-size: 14px;
        font-weight: 700;

        border: 1px solid rgba(0, 135, 168, .05);

        transition:
            transform .2s ease,
            background-color .2s ease,
            box-shadow .2s ease;
    }

    .kit-benefit i {
        color: #0087a8;
        font-size: 18px;
    }

    .kit-benefit:hover {
        transform: translateY(-3px) !important;
        background: #dff3f8;

        box-shadow:
            0 8px 20px rgba(3, 72, 99, .10);
    }

    .premium-image {
        position: relative;
        display: inline-block;

        border-radius: 28px;
        padding: 6px;

        background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.95),
            rgba(3, 72, 99, 0.18),
            rgba(255, 255, 255, 0.85)
        );

        box-shadow:
            0 25px 60px rgba(3, 72, 99, 0.18),
            0 10px 25px rgba(0, 0, 0, 0.10);

        overflow: hidden;

        transition:
            transform .45s ease,
            box-shadow .45s ease;
    }


    /* Imagen */

    .premium-image img {
        position: relative;
        z-index: 2;

        display: block;
        width: 100%;

        border-radius: 22px;

        transition:
            transform .6s cubic-bezier(.2,.8,.2,1),
            filter .6s ease;
    }


    /* Brillo suave */

    .premium-image::before {
        content: "";

        position: absolute;

        width: 45%;
        height: 180%;

        top: -40%;
        left: -70%;

        z-index: 3;

        background: linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

        transform: rotate(20deg);

        pointer-events: none;

        animation: premiumShine 6s ease-in-out infinite;
    }


    /* Halo inferior */

    .premium-image::after {
        content: "";

        position: absolute;

        left: 12%;
        right: 12%;
        bottom: -25px;

        height: 45px;

        background: rgba(3, 72, 99, 0.25);

        filter: blur(25px);

        border-radius: 50%;

        z-index: 0;

        opacity: .6;
    }


    /* Hover */

    .premium-image:hover {
        transform: translateY(-8px);

        box-shadow:
            0 35px 80px rgba(3, 72, 99, 0.25),
            0 15px 35px rgba(0, 0, 0, 0.12);
    }

    .premium-image:hover img {
        transform: scale(1.025);

        filter:
            brightness(1.03)
            contrast(1.02)
            saturate(1.04);
    }


    /* Flotación */

    @keyframes premiumFloat {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-7px);
        }
    }


    /* Reflejo */

    @keyframes premiumShine {

        0%,
        55% {
            left: -70%;
        }

        75% {
            left: 130%;
        }

        100% {
            left: 130%;
        }
    }

      body {
          background: #f5f6f8;
      }

      .kits-container {
          background: #fff;
          border-radius: 20px;
          padding: 10px 30px;
          box-shadow: 0 8px 25px rgba(0,0,0,.08);
      }

      .kit-item {
          display: flex;
          gap: 15px;
          height: 100%;
          padding: 10px 20px;
      }

      .kit-column:not(:last-child) {
          border-right: 1px solid #ececec;
      }

      /* ICONO */

      .kit-icon {
          width: 58px;
          height: 58px;
          min-width: 58px;

          border-radius: 50%;

          display: flex;
          align-items: center;
          justify-content: center;

          color: white;
          font-size: 27px;
      }

      .genetico {
          background: linear-gradient(
              135deg,
              #18c6c3,
              #00aa99
          );
      }

      .metabolico {
          background: linear-gradient(
              135deg,
              #4d99ff,
              #3269d7
          );
      }

      .prenatal {
          background: linear-gradient(
              135deg,
              #ad78df,
              #8654c4
          );
      }

      .hormonal {
          background: linear-gradient(
              135deg,
              #5bd8b1,
              #39ae8a
          );
      }

      /* CONTENIDO */

      .kit-content {
          flex: 1;
      }

      .kit-title {
          color: #11153d;
          font-weight: 700;
          font-size: 16px;
          margin-bottom: 5px;
      }

      .kit-description {
          color: #696969;
          font-size: 13px;
          line-height: 1.4;
          margin-bottom: 10px;

          min-height: 55px;
      }

      /* PARTE INFERIOR */

      .kit-footer {
          display: flex;
          align-items: center;
          gap: 15px;
      }

      .kit-image {
          width: 65px;
          height: 45px;
          object-fit: contain;
      }

      .kit-link {
          color: #14183f;
          text-decoration: none;
          font-size: 13px;
          font-weight: 700;

          display: inline-flex;
          align-items: center;
          gap: 5px;
      }

      .kit-link:hover {
          color: #00aaa7;
      }


      /*
      Responsive:
      En pantallas pequeñas permite scroll horizontal
      en vez de ponerlos uno debajo del otro.
      */

      @media (max-width: 900px) {

          .kits-row {
              flex-wrap: nowrap;
              overflow-x: auto;
          }

          .kit-column {
              min-width: 280px;
          }

      }