* {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    .kag-cards-demo {
      font-family: Poppins, Arial, Helvetica, sans-serif;
      background: #f4f4f4;
      color: #222;
    }

    body.modal-open {
      overflow: hidden;
    }

    .hero {
      background: #971616;
      color: white;
      text-align: center;
      padding: 55px 20px 45px;
    }

    .hero h1 {
      margin: 0 0 10px;
      font-size: var(--kag-font-h1);
      font-weight: 600;
      text-transform: uppercase;
    }

    .hero h2 {
      margin: 0 0 15px;
      font-size: var(--kag-font-h2);
      font-weight: 600;
    }

    .hero p {
      margin: 5px 0;
      color: #ddd;
    }

    .steps {
      border-bottom: 1px solid #791212;
      background: #971616;
      position: sticky;
      top: 70px;
      z-index: 99;
    }

    .steps-inner {
      display: flex;
      align-items: stretch;
      justify-content: center;
      max-width: 1350px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .steps a {
      position: relative;
      flex: 0 0 auto;
      padding: .8rem 1rem;
      color: #fff;
      font-weight: 600;
      font-size: .8rem;
      text-transform: uppercase;
      text-decoration: none;
      white-space: nowrap;
      opacity: .72;
      transition: color .2s ease, opacity .2s ease, background-color .2s ease;
    }

    .steps a:hover,
    .steps a:focus,
    .steps a.active {
      color: #fff;
      opacity: 1;
      background: rgba(255,255,255,.12);
      text-decoration: none;
    }

    .steps a.active::after {
      content: '';
      position: absolute;
      right: 1rem;
      bottom: 0;
      left: 1rem;
      height: 3px;
      background: #fff;
    }

    .scroll-section {
      scroll-margin-top: 135px;
    }

    .layout {
      max-width: 1350px;
      margin: 35px auto;
      padding: 0 20px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 30px;
    }

    .content {
      min-width: 0;
    }

    .section-title {
      text-align: center;
      margin: 45px 0 25px;
    }

    .content > .section-title:first-child {
      margin-top: 10px;
    }

    .section-title small {
      display: block;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: #777;
      margin-bottom: 8px;
    }

    .section-title h2 {
      margin: 0;
      font-size: var(--kag-font-h2);
      font-weight: 600;
    }

    .product {
      background: white;
      border-radius: 12px;
      padding: 28px;
      margin-bottom: 25px;
      box-shadow: 0 3px 12px rgba(0,0,0,.08);
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 30px;
      align-items: center;
    }

    .product img,
    .card img {
      width: 100%;
      border-radius: 8px;
      background: #eee;
      display: block;
    }

    .product > img {
      aspect-ratio: 1;
      object-fit: cover;
      object-position: center;
    }

    .badge {
      display: inline-block;
      width: fit-content;
      max-width: 100%;
      align-self: flex-start;
      background: #971616;
      color: white;
      padding: 6px 10px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .product h3 {
      font-size: var(--kag-font-h3);
      font-weight: 600;
      margin: 5px 0 12px;
    }

    .product p,
    .card p {
      line-height: 1.55;
      color: #555;
    }

    .price {
      display: block !important;
      margin-top: 20px;
    }

    .old-price {
      text-decoration: line-through;
      color: #999;
      font-size: 18px;
      margin-right: 8px;
    }

    .new-price {
      font-size: 32px;
      font-weight: bold;
      color: #971616;
    }

    .saving {
      display: block !important;
      width: 100%;
      margin-top: 6px;
      font-weight: bold;
      color: #198754;
    }

    /* INFORMACIÓN EXTRA: DESPLEGABLE */

    .product-details {
      margin-top: 0;
      font-size: 14px;
    }

    .product-details-links {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem 1.25rem;
      margin-top: 15px;
    }

    .product-details-link {
      display: inline-block;
      color: #333;
      font-size: 14px;
      font-weight: bold;
      text-decoration: underline;
    }

    .product-details-link:hover,
    .product-details-link:focus {
      color: #971616;
    }

    .product-details summary {
      cursor: pointer;
      font-weight: bold;
      text-decoration: underline;
      color: #333;
      display: inline-block;
    }

    .details-content {
      margin-top: 12px;
      padding: 15px;
      background: #f6f6f6;
      border-radius: 6px;
      line-height: 1.55;
      color: #555;
    }

    .kag-heavenfall-details {
      align-items: flex-start;
    }

    .kag-heavenfall-details .more-info-button {
      margin-top: 0;
    }

    .kag-heavenfall-details .product-details {
      flex: 0 1 auto;
    }

    .kag-heavenfall-details .product-details.is-open {
      flex: 1 1 100%;
    }

    .kag-details-toggle {
      width: fit-content;
      padding: 0;
      border: 0;
      background: transparent;
      color: #333;
      font-size: 14px;
      font-weight: bold;
      text-decoration: underline;
      cursor: pointer;
    }

    .details-close-label,
    .product-details.is-open .details-open-label {
      display: none;
    }

    .product-details.is-open .details-close-label {
      display: inline;
    }

    .kag-details-panel {
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transform: translateY(-6px);
      transition: max-height .45s ease, opacity .3s ease, transform .3s ease;
    }

    .product-details.is-open .kag-details-panel {
      opacity: 1;
      transform: translateY(0);
    }

    /* INFORMACIÓN EXTRA: MODAL */

    .more-info-button {
      margin-top: 10px;
      padding: 0;
      border: 0;
      background: transparent;
      color: #333;
      font-weight: bold;
      text-decoration: underline;
      cursor: pointer;
      font-size: 14px;
    }

    .kag-demo-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.72);
      z-index: 10000;
      padding: 25px;
      align-items: center;
      justify-content: center;
    }

    .kag-demo-modal-overlay.active {
      display: flex;
    }

    .kag-demo-modal {
      width: min(720px, 100%);
      max-height: 85vh;
      overflow-y: auto;
      background: white;
      border-radius: 12px;
      padding: 30px;
      position: relative;
      box-shadow: 0 10px 40px rgba(0,0,0,.35);
    }

    .kag-detail-preview-modal {
      position: relative;
      width: min(1320px, 96vw);
      max-width: 1320px;
      max-height: 94vh;
      padding: 0;
      overflow-y: auto;
      border-radius: 14px;
      background: #f4f4f4;
    }

    .kag-detail-preview-modal .kag-demo-modal-close {
      position: sticky;
      z-index: 10;
      top: 14px;
      float: right;
      margin: 14px 14px -52px 0;
      border: 1px solid #ddd;
      background: #fff;
      box-shadow: 0 3px 12px rgba(0,0,0,.12);
    }

    .kag-product-detail-in-modal .kag-detail-container {
      max-width: 1240px !important;
      padding-right: 32px;
      padding-left: 32px;
    }

    .kag-product-detail-in-modal .thumb-gallery-detail:not(.owl-loaded) {
      display: block;
    }

    .kag-product-detail-in-modal .thumb-gallery-detail:not(.owl-loaded) > div:not(:first-child),
    .kag-product-detail-in-modal .thumb-gallery-thumbs:not(.owl-loaded) > div:not(:first-child) {
      display: none;
    }

    .kag-product-detail-in-modal .thumb-gallery-detail:not(.owl-loaded) img {
      display: block;
      width: 100%;
      height: auto;
    }

    @media (max-width: 575.98px) {
      .kag-demo-modal-overlay {
        padding: 8px;
      }

      .kag-detail-preview-modal {
        width: 100%;
        max-height: 97vh;
      }

      .kag-product-detail-in-modal .kag-detail-container {
        padding-right: 16px;
        padding-left: 16px;
      }
    }

    .kag-demo-modal h2 {
      margin: 0 40px 15px 0;
    }

    .kag-demo-modal p {
      line-height: 1.6;
      color: #555;
    }

    .kag-demo-modal-close {
      position: absolute;
      top: 14px;
      right: 18px;
      border: 0;
      background: transparent;
      font-size: 30px;
      cursor: pointer;
      line-height: 1;
    }

    /* SELECTOR DE CANTIDAD */

    .purchase-controls {
      margin-top: 20px;
    }

    .quantity-label {
      display: block;
      font-size: 12px;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 8px;
      color: #666;
    }

    .quantity-selector {
      display: inline-flex;
      align-items: center;
      border: 1px solid #ccc;
      border-radius: 7px;
      overflow: hidden;
      background: white;
    }

    .quantity-selector button {
      width: 42px;
      height: 42px;
      border: 0;
      background: #971616;
      color: white;
      font-size: 22px;
      cursor: pointer;
    }

    .quantity-selector button:hover {
      background: #791212;
    }

    .quantity-selector button:disabled {
      background: #aaa;
      cursor: not-allowed;
    }

    .quantity-selector input {
      width: 52px;
      height: 42px;
      border: 0;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      background: white;
      color: #222;
      appearance: textfield;
      -moz-appearance: textfield;
    }

    .quantity-selector input::-webkit-outer-spin-button,
    .quantity-selector input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .limit {
      display: block;
      margin-top: 8px;
      font-size: 12px;
      color: #8a5a00;
      font-weight: bold;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .card {
      background: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 3px 12px rgba(0,0,0,.07);
    }

    .card h3 {
      margin-bottom: 8px;
      font-weight: 600;
    }

    .cards .card > .badge {
      order: -2;
      margin-bottom: 12px;
    }

    .cards .card > img {
      order: -1;
      margin-bottom: 12px;
    }

    .card .new-price {
      font-size: 24px;
    }

    .pack {
      background: #fff;
      color: #222;
      padding: 38px;
      border: 1px solid #e1e1e1;
      border-top: 4px solid #971616;
      border-radius: 14px;
      margin: 35px 0;
      text-align: center;
      box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
    }

    .pack .badge {
      background: #971616;
      color: #fff;
      font-size: 14px;
    }

    .pack h2 {
      font-size: var(--kag-font-h2);
      font-weight: 600;
      margin: 10px 0;
    }

    .pack .pack-image {
      display: block;
      width: min(100%, 560px);
      height: auto;
      margin: 24px auto;
      border-radius: 10px;
    }

    .pack p {
      color: #555;
      line-height: 1.5;
    }

    .pack ul {
      list-style: none;
      padding: 0;
      color: #333;
      line-height: 1.9;
    }

    .pack .comparison {
      margin: 25px auto;
      max-width: 420px;
      padding: 20px;
      border: 1px solid #ddd;
      border-top: 3px solid #971616;
      background: #f6f6f6;
      border-radius: 8px;
    }

    .pack .new-price {
      color: #971616;
      font-size: 38px;
    }

    .pack .saving {
      color: #971616;
      font-size: 18px;
    }

    .pack .quantity-label {
      color: #666;
    }

    .pack .quantity-selector {
      border-color: #ccc;
    }

    .guide {
      background: white;
      padding: 30px;
      border-radius: 12px;
      margin-top: 35px;
      box-shadow: 0 3px 12px rgba(0,0,0,.07);
    }

    .guide h2 {
      text-align: center;
      margin-top: 0;
      font-weight: 600;
    }

    .guide-options {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
    }

    .guide-option {
      border: 1px solid #ddd;
      padding: 18px;
      border-radius: 8px;
    }

    .guide-option strong {
      display: block;
      margin-bottom: 7px;
      font-size: 17px;
    }

    .cart {
      position: sticky;
      top: 135px;
      background: white;
      padding: 25px;
      border-radius: 12px;
      box-shadow: 0 3px 15px rgba(0,0,0,.12);
      height: fit-content;
    }

    .cart h2 {
      margin-top: 0;
      font-weight: 600;
    }

    .cart-empty {
      color: #888;
      font-size: 14px;
      line-height: 1.5;
    }

    .cart-line {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin: 13px 0;
      font-size: 14px;
    }

    .cart-line span:first-child {
      flex: 1;
    }

    .cart-total {
      border-top: 2px solid #971616;
      margin-top: 20px;
      padding-top: 20px;
      font-size: 20px;
      font-weight: bold;
      display: flex;
      justify-content: space-between;
    }

    .cart-saving {
      color: #198754;
      font-weight: bold;
      margin: 15px 0;
    }

    .shipping {
      font-size: 13px;
      color: #777;
      margin: 15px 0;
      line-height: 1.45;
    }

    .checkout {
      width: 100%;
      margin-top: 24px;
      padding: 15px;
      background: #971616;
      color: white;
      border: 0;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
      font-weight: bold;
    }

    .checkout:disabled {
      background: #aaa;
      cursor: not-allowed;
    }

    @media (max-width: 950px) {
      .layout {
        grid-template-columns: 1fr;
      }

      .cart {
        position: static;
      }

      .product {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 600px) {
      .cards,
      .guide-options {
        grid-template-columns: 1fr;
      }

      .hero h1 {
        font-size: var(--kag-font-h1);
      }

      .steps {
        top: 70px;
      }

      .steps-inner {
        justify-content: flex-start;
        overflow-x: auto;
        padding: 0 8px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }

      .steps-inner::-webkit-scrollbar {
        display: none;
      }

      .steps a {
        padding: .75rem .85rem;
        font-size: .74rem;
      }

      .scroll-section {
        scroll-margin-top: 55px;
      }

      .product,
      .card,
      .pack,
      .guide,
      .cart {
        border-radius: 8px;
      }
    }

    /* Sticky aplicado al aside para que también funcione en Safari/iPad. */
    @media (min-width: 768px) {
      .layout > aside {
        position: sticky;
        top: 135px;
        align-self: start;
      }

      .cart {
        position: static;
      }
    }

    /* En tablet la cesta sigue siendo lateral y sticky. */
    @media (min-width: 768px) and (max-width: 950px) {
      .layout {
        grid-template-columns: minmax(0, 1fr) 280px;
      }

      .layout > aside {
        position: sticky;
        top: 135px;
        align-self: start;
      }

      .cart {
        position: static;
      }
    }