body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 14% 6%, rgba(245, 200, 107, .20), transparent 30rem),
        radial-gradient(circle at 88% 14%, rgba(199, 255, 107, .13), transparent 34rem),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 15px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, .022) 0 2px, transparent 2px 15px),
        linear-gradient(150deg, #0a0805 0%, #100d09 30%, #0b0e12 62%, #0d1013 100%);
      min-height: 100vh;
    }

.hero-actions, .card-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.paypal-box { margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, .14); }

.paypal-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.paypal-amount {
      flex: 1 1 100px;
      min-width: 90px;
      min-height: 44px;
      border-radius: 10px;
      padding: 10px 12px;
      border: 1px solid rgba(255, 255, 255, .16);
      background: rgba(255, 255, 255, .05);
      color: var(--ink);
    }

.paypal-amount::placeholder { color: var(--muted); }

.btn-paypal {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      border-radius: 10px;
      padding: 12px 16px;
      border: 0;
      background: #ffc439;
      color: #05101a;
      font-weight: 900;
      cursor: pointer;
      transition: transform .18s ease;
    }

.btn-paypal:hover { transform: translateY(-2px); }

.btn-whatsapp {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      min-height: 44px;
      border-radius: 10px;
      padding: 12px 16px;
      border: 0;
      background: #25d366;
      color: #05230f;
      font-weight: 900;
      cursor: pointer;
      transition: transform .18s ease;
    }

.btn-whatsapp:hover { transform: translateY(-2px); }

.whatsapp-box { margin-top: 10px; }

.paypal-note { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.4; }

.card-img { width: 100%; height: 230px; object-fit: cover; object-position: top; border-radius: 10px; margin-bottom: 16px; display: block; border: 1px solid rgba(255,255,255,.1); cursor: zoom-in; }

.pattern-card-visual { position: relative; height: 230px; overflow: hidden; margin-bottom: 16px; border: 1px solid rgba(103,232,249,.24); border-radius: 10px; background: linear-gradient(90deg, transparent 49.7%, rgba(255,255,255,.11) 50%, transparent 50.3%), linear-gradient(transparent 49.7%, rgba(255,255,255,.11) 50%, transparent 50.3%), repeating-linear-gradient(0deg, rgba(103,232,249,.07) 0 1px, transparent 1px 18px), repeating-linear-gradient(90deg, rgba(103,232,249,.07) 0 1px, transparent 1px 18px), linear-gradient(145deg, #16243a, #090d18); }
.pattern-card-visual::before { content: ""; position: absolute; left: 18%; top: 14%; width: 44%; height: 72%; border: 3px solid #67e8f9; border-radius: 42% 20% 32% 18% / 20% 18% 48% 44%; transform: rotate(-7deg); box-shadow: 18px 12px 0 -14px #c7ff6b; }
.pattern-card-visual::after { content: "PATRÓN  1:1"; position: absolute; right: 8%; bottom: 10%; padding: 8px 10px; border-radius: 8px; color: #06101a; background: #c7ff6b; font-size: 12px; font-weight: 950; letter-spacing: .08em; }
html[lang="en"] .pattern-card-visual::after { content: "PATTERN  1:1"; }
.pattern-card-visual span { position: absolute; right: 9%; top: 13%; max-width: 8rem; color: #dffaff; font-size: 13px; font-weight: 850; line-height: 1.4; text-align: right; }
.pattern-quote { margin-top: 14px; padding: 14px; border: 1px dashed rgba(199,255,107,.35); border-radius: 10px; color: #dce9f7; background: rgba(199,255,107,.06); line-height: 1.55; }

.product-thumbs {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 7px;
      margin: -6px 0 16px;
    }

.product-thumbs button {
      aspect-ratio: 1;
      min-width: 0;
      padding: 0;
      overflow: hidden;
      border: 2px solid transparent;
      border-radius: 8px;
      background: rgba(255, 255, 255, .06);
      cursor: pointer;
    }

.product-thumbs button:hover,
.product-thumbs button:focus-visible,
.product-thumbs button.is-active {
      border-color: var(--cyan);
      outline: none;
    }

.product-thumbs img { width: 100%; height: 100%; display: block; object-fit: cover; }

.product-video { margin-top: 16px; }

.product-video video {
      width: 100%;
      aspect-ratio: 1;
      display: block;
      object-fit: cover;
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 12px;
      background: #02060d;
    }

.product-video small { display: block; margin-top: 9px; color: var(--muted); font-size: 12px; }

.ruler-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }

.ruler-video { position: relative; min-width: 0; }

.ruler-videos video {
      display: block;
      width: 100%;
      aspect-ratio: 9 / 16;
      object-fit: cover;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, .1);
      background: #02060d;
    }

.ruler-video-play {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      transform: translate(-50%, -50%);
      border: 2px solid rgba(255, 255, 255, .9);
      border-radius: 50%;
      background: rgba(7, 17, 29, .82);
      color: #fff;
      font-size: 24px;
      line-height: 1;
      padding: 0 0 0 3px;
      cursor: pointer;
      box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
      transition: transform .18s ease, background .18s ease;
    }

.ruler-video-play:hover,
.ruler-video-play:focus-visible {
      transform: translate(-50%, -50%) scale(1.08);
      background: rgba(7, 17, 29, .96);
      outline: 3px solid var(--cyan);
      outline-offset: 3px;
    }

.ruler-video.is-playing .ruler-video-play { display: none; }

.ruler-videos-label { grid-column: 1 / -1; margin: 4px 0 0; color: var(--muted); font-size: 12px; }

.img-modal {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(4, 6, 12, .88);
      backdrop-filter: blur(6px);
      padding: 24px;
    }

.img-modal.open { display: flex; }

.img-modal img {
      max-width: min(94vw, 720px);
      max-height: 90vh;
      width: auto;
      height: auto;
      object-fit: contain;
      border-radius: 12px;
      box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
    }

.img-modal-close {
      position: fixed;
      top: 18px;
      right: 22px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, .25);
      background: rgba(255, 255, 255, .1);
      color: var(--ink);
      font-size: 22px;
      line-height: 1;
      display: grid;
      place-items: center;
      cursor: pointer;
    }

.img-modal-close:hover { background: rgba(255, 255, 255, .2); }

.bubble-cta { display: inline-flex; margin-top: 10px; padding: 8px 14px; min-height: auto; font-size: 13px; }

.alt-flag:hover,
    .alt-flag:focus-visible {
      width: 180px;
      box-shadow: 0 22px 55px rgba(199, 255, 107, .28);
    }

.alt-flag:hover .call-flag-text,
    .alt-flag:focus-visible .call-flag-text {
      flex-basis: 108px;
      width: 108px;
      white-space: normal;
      line-height: 1.15;
    }

.store-flag {
      top: calc(48% + 148px);
      background: linear-gradient(135deg, var(--cyan), #c9fff5);
    }

.store-flag:hover,
    .store-flag:focus-visible {
      width: 154px;
      box-shadow: 0 22px 55px rgba(103, 232, 249, .28);
    }

.store-flag:hover .call-flag-text,
    .store-flag:focus-visible .call-flag-text {
      flex-basis: 82px;
      width: 82px;
      white-space: normal;
      line-height: 1.15;
    }

.classes-flag {
      top: calc(48% + 148px);
      background: linear-gradient(135deg, var(--gold), #ffe9b8);
    }

.classes-flag:hover,
    .classes-flag:focus-visible {
      width: 154px;
      box-shadow: 0 22px 55px rgba(245, 200, 107, .28);
    }

.classes-flag:hover .call-flag-text,
    .classes-flag:focus-visible .call-flag-text {
      flex-basis: 82px;
      width: 82px;
      white-space: normal;
      line-height: 1.15;
    }

@media (max-width: 960px) {
      .hero-grid, .split, .assistant, .seo-grid { grid-template-columns: 1fr; }
    }

@media (max-width: 640px) {
      .call-flag {
        top: auto;
        right: 0;
        bottom: 16px;
        width: 58px;
        min-height: 58px;
        padding: 0;
        justify-content: center;
        gap: 8px;
        border-radius: 999px;
        border-right: 1px solid rgba(255, 255, 255, .35);
        transform: none;
        transition: width .2s ease, padding .2s ease, border-radius .2s ease;
      }
      .call-flag .call-flag-text {
        display: none;
        flex: 0 0 auto;
        width: auto;
        opacity: 0;
        visibility: hidden;
        transform: none;
        white-space: nowrap;
      }
      .call-flag.is-open {
        width: auto;
        padding: 10px 14px;
        justify-content: flex-start;
        border-radius: 999px 0 0 999px;
      }
      .call-flag.is-open .call-flag-text {
        display: block;
        opacity: 1;
        visibility: visible;
      }
      .alt-flag {
        top: auto;
        bottom: 82px;
      }
      .alt-flag.is-open {
        bottom: 76px;
      }
      .store-flag {
        top: auto;
        bottom: 148px;
      }
      .store-flag.is-open {
        bottom: 142px;
      }
      .store-flag .call-flag-text {
        white-space: normal;
        max-width: 130px;
        line-height: 1.15;
      }
      .classes-flag {
        top: auto;
        bottom: 148px;
      }
      .classes-flag.is-open {
        bottom: 142px;
      }
      .classes-flag .call-flag-text {
        white-space: normal;
        max-width: 130px;
        line-height: 1.15;
      }
    }