:root {
      /* ── PALETA ─────────────────────────────── */
      --white:       #FFFFFF;   /* fundo */
      --surface:     #f2f0f4;   /* segunda seção */
      --title:       #3d2057;   /* título */
      --accent:      #a84dd6;   /* destaque */
      --btn:         #54ad61;   /* botão */

      /* ── DERIVADAS ──────────────────────────── */
      --accent-soft: #f6eefb;
      --accent-tint: #ecdff6;
      --accent-dark: #913bb9;
      --accent-deep: #9b54bf;   /* fundo da seção de benefícios */

      /* vermelho de alerta — só na tarja de estoque */
      --alert:       #e11d48;
      --alert-tint:  #ffe3e8;
      --alert-bg:    #fff5f6;
      --alert-line:  #ffd4dc;
      --grad-alert:  linear-gradient(135deg, #e11d48 0%, #f43f5e 100%);
      --text:        #41374a;
      --text-muted:  #80748a;
      --border:      #e4dfe8;
      --border-soft: #ece7ef;

      --font-display: 'Raleway', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

      --grad-accent: linear-gradient(135deg, #a84dd6 0%, #c37ae5 100%);
      --grad-btn:    linear-gradient(135deg, #54ad61 0%, #469753 100%);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-body);
      font-weight: 400;
      background: var(--white);
      color: var(--text);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* ── BARRA DE CONTAGEM REGRESSIVA ───────── */
    .countdown-bar {
      background: var(--accent);
      color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px 14px;
      padding: 10px 16px;
    }
    .countdown-label {
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      line-height: 1.3;
    }
    .countdown-timer {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .cd-box {
      background: var(--white);
      color: var(--accent);
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      min-width: 34px;
      padding: 4px 6px;
      border-radius: 6px;
      text-align: center;
      line-height: 1.2;
    }
    .cd-sep { font-weight: 800; opacity: 0.7; }

    /* ── HERO ───────────────────────────────── */
    .hero {
      background: var(--white);
      color: var(--text);
      text-align: center;
      padding: 40px 24px 48px;
      position: relative;
      overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 0%, rgba(168, 77, 214,0.10) 0%, transparent 65%);
      pointer-events: none;
    }
    .hero > * { position: relative; }
    .hero h1 {
      font-family: var(--font-display);
      font-size: clamp(28px, 7.4cqw, 42px);
      font-weight: 600;
      line-height: 1.22;
      margin-bottom: 14px;
      color: var(--title);
      text-wrap: balance;
    }
    .hero h1 em {
      font-style: italic;
      color: var(--accent);
    }
    .hero p.hero-sub {
      font-size: 18px;
      font-weight: 400;
      color: var(--text-muted);
      line-height: 1.6;
      max-width: 380px;
      margin: 0 auto 28px;
    }

    .hero-media {
      width: 100%;
      max-width: 400px;
      margin: 0 auto 28px;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 18px 44px rgba(61, 32, 87,0.16);
      aspect-ratio: 1/1;
      background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent-tint) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .hero-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* ── BOTÃO CTA ──────────────────────────── */
    .btn-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      max-width: 400px;
      background: var(--grad-btn);
      color: var(--white);
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.02em;
      padding: 17px 28px;
      border-radius: 100px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      box-shadow: 0 8px 28px rgba(84,173,97,0.38);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      animation: btn-pulse 1.6s ease-in-out infinite;
    }
    @keyframes btn-pulse {
      0%, 100% { transform: scale(1);    box-shadow: 0 8px 28px rgba(84,173,97,0.38); }
      50%      { transform: scale(1.04); box-shadow: 0 12px 40px rgba(84,173,97,0.55); }
    }
    .btn-cta:hover { box-shadow: 0 12px 36px rgba(84,173,97,0.50); }
    .btn-cta:active { transform: scale(0.99); }
    .btn-cta .arrow { font-size: 18px; }
    .btn-cta.large { font-size: 17px; padding: 19px 28px; }

    /* ── SEÇÃO GENÉRICA ─────────────────────── */
    .section { padding: 64px 24px; }

    .section-label {
      font-family: var(--font-display);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 12px;
    }
    .section-logo {
      height: 20px;
      width: auto;
      display: block;
      margin: 0 auto 14px;
    }
    .section-title {
      font-family: var(--font-display);
      font-size: 32px;   /* padrão único de título de seção */
      font-weight: 600;
      line-height: 1.24;
      color: var(--title);
      margin-bottom: 14px;
      text-wrap: balance;
    }
    .section-title em { font-style: italic; color: var(--accent); }
    .section-desc {
      font-size: 18px;
      font-weight: 400;
      color: var(--text-muted);
      line-height: 1.65;
      max-width: 380px;
      margin-left: auto;
      margin-right: auto;
    }

    /* ── SEÇÕES DE FEATURE (texto → CTA → mídia) ── */
    .feature-section {
      padding: 60px 24px;
      background: var(--white);
    }
    .feature-section.bg-alt { background: var(--surface); }

    .feature-inner {
      max-width: 440px;
      margin: 0 auto;
      text-align: center;
    }
    .feature-media {
      width: 100%;
      margin-top: 34px;
      border-radius: 20px;
      overflow: hidden;
      aspect-ratio: 1/1;
      background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent-tint) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 12px 40px rgba(61, 32, 87,0.12);
    }
    .feature-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .feature-cta { margin-top: 26px; }

    /* ── SEÇÃO ROSA (destaque) ──────────────── */
    /* ── DISCRETO DE VERDADE (fundo #f2f0f4) ── */
    .discreet-section {
      background: var(--surface);
      padding: 64px 24px 0;   /* sem respiro embaixo: o recorte encosta na borda */
      text-align: center;
    }
    /* label, título e descrição já vêm nas cores certas do padrão global */

    .discreet-inner { max-width: 440px; margin: 0 auto; }

    /* foto recortada (fundo transparente): flutua direto sobre o fundo,
       sem moldura. A sombra segue o contorno via drop-shadow. */
    .accent-media {
      width: 100%;
      max-width: 360px;
      margin: 24px auto 0;
    }
    .accent-media img {
      width: 100%;
      height: auto;
      display: block;
      filter: drop-shadow(0 14px 26px rgba(61, 32, 87, 0.20));
    }
    .discreet-section .btn-cta { margin-top: 30px; }

    /* ── BENEFÍCIOS (fundo #9b54bf) ─────────── */
    .benefits-section {
      background: var(--accent-deep);
      padding: 64px 24px;
      text-align: center;
    }
    .benefits-section .section-label { color: rgba(255,255,255,0.80); }
    .benefits-section .section-title { color: var(--white); }
    .benefits-section .section-title em { color: var(--accent-soft); }
    .benefits-section .section-desc { color: rgba(255,255,255,0.85); }
    .benefits-inner { max-width: 440px; margin: 0 auto; }
    .benefits-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 28px;
    }
    .benefit-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      text-align: center;
      gap: 10px;
      background: var(--white);
      border-radius: 16px;
      padding: 20px 12px;
      box-shadow: 0 6px 18px rgba(61, 32, 87,0.16);
    }
    .benefit-icon {
      font-size: 28px;
      line-height: 1;
    }
    .benefit-item h4 {
      font-family: var(--font-display);
      font-size: 13.5px;
      font-weight: 600;
      color: var(--title);
      line-height: 1.35;
      text-wrap: balance;
    }
    .benefits-section .btn-cta { margin-top: 30px; }

    /* ── REVIEWS ────────────────────────────── */
    .reviews-section {
      padding: 64px 24px;
      background: var(--white);
      text-align: center;
    }
    /* vídeo + slider dividem o espaço (2 colunas no desktop) */
    .reviews-layout {
      display: grid;
      gap: 30px;
      justify-items: center;
      max-width: 440px;
      margin: 30px auto 0;
    }
    .review-video {
      position: relative;
      width: 100%;
      max-width: 440px;   /* alinha com a largura do slider abaixo */
      margin: 0 auto;
      aspect-ratio: 16/9;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 12px 40px rgba(61, 32, 87,0.18);
    }
    .review-video iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: none;
    }
    /* slider de depoimentos */
    .reviews-slider {
      width: 100%;
      max-width: 440px;
      /* sem isso o min-width:auto de grid item trava a largura no
         min-content dos cards (que não encolhem) e estoura a tela */
      min-width: 0;
    }
    .reviews-track {
      display: flex;
      align-items: stretch;
      gap: 14px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
      /* respiro pra sombra dos cards não ser cortada pelo overflow */
      padding: 8px 0 16px;
    }
    .reviews-track::-webkit-scrollbar { display: none; }

    /* card compacto: thumbnail vertical à esquerda, texto à direita.
       Assim a imagem aparece sem comer meia dobra do celular. */
    .review-card {
      flex: 0 0 100%;
      scroll-snap-align: center;
      display: flex;
      flex-direction: row;
      align-items: stretch;
      text-align: left;
      overflow: hidden;
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: 18px;
      box-shadow: 0 10px 30px rgba(61, 32, 87,0.10);
    }
    /* campo de imagem do depoimento (print de conversa, foto…) */
    .review-media {
      flex: 0 0 142px;
      align-self: stretch;
      overflow: hidden;
      background: linear-gradient(150deg, var(--accent-soft) 0%, var(--accent-tint) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .review-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .review-body {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0;
      padding: 20px 18px 18px;
    }
    @media (max-width: 359px) {
      .review-media { flex-basis: 112px; }
    }
    .stars {
      color: var(--accent);
      font-size: 15px;
      letter-spacing: 2px;
      margin-bottom: 10px;
    }
    .slider-dots {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      margin-top: 18px;
    }
    .slider-dots .dot {
      width: 8px;
      height: 8px;
      padding: 0;
      border: none;
      border-radius: 100px;
      background: var(--accent-tint);
      cursor: pointer;
      transition: width 0.25s ease, background 0.25s ease;
    }
    .slider-dots .dot.is-active {
      width: 24px;
      background: var(--accent);
    }
    .review-text {
      font-size: 14.5px;
      color: var(--text);
      line-height: 1.65;
      margin-bottom: 14px;
    }
    .review-foot {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: auto;
      padding-top: 12px;
      border-top: 1px solid var(--border-soft);
    }
    .reviewer-label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-muted);
    }
    .reviewer-label .check {
      width: 14px;
      height: 14px;
      min-width: 14px;
      border-radius: 50%;
      background: var(--btn);
      color: var(--white);
      font-size: 9px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    /* ── TARJA DE ESTOQUE (bloco de preço) ──── */
    .stock-alert {
      position: relative;
      margin: 18px 18px 16px;
      padding: 13px 14px 14px;
      background: var(--alert-bg);
      border: 1px solid var(--alert-line);
      border-radius: 12px;
      text-align: left;
    }
    .stock-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      font-family: var(--font-display);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--alert);
    }
    .stock-title {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }
    /* pontinho pulsando = "isso aqui está ao vivo" */
    .stock-live {
      width: 7px;
      height: 7px;
      min-width: 7px;
      border-radius: 50%;
      background: var(--alert);
      animation: stock-blink 1.5s ease-in-out infinite;
    }
    @keyframes stock-blink {
      0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(225,29,72,0.55); }
      50%      { opacity: 0.5; box-shadow: 0 0 0 5px rgba(225,29,72,0); }
    }
    .stock-count {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--text);
      letter-spacing: 0.06em;
      white-space: nowrap;
    }
    /* o número vira uma pastilha vermelha — é o que precisa saltar */
    .stock-count strong {
      display: inline-block;
      min-width: 30px;
      padding: 3px 8px 4px;
      border-radius: 7px;
      background: var(--alert);
      color: var(--white);
      font-size: 16px;
      font-weight: 800;
      line-height: 1.1;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }
    /* a pastilha "salta" no instante em que cai uma unidade */
    .stock-count strong.pop { animation: stock-pop 0.8s ease-out; }
    @keyframes stock-pop {
      0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(225,29,72,0.55); }
      30%  { transform: scale(1.35); box-shadow: 0 0 0 10px rgba(225,29,72,0); }
      100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(225,29,72,0); }
    }

    .stock-bar {
      height: 10px;
      border-radius: 100px;
      background: var(--alert-tint);
      overflow: hidden;
    }
    .stock-bar span {
      display: block;
      height: 100%;
      width: 27%;               /* atualizado pelo JS conforme o estoque cai */
      border-radius: 100px;
      background: var(--grad-alert);
      transition: width 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    /* barra pisca junto com a queda */
    .stock-bar.flash { animation: stock-flash 0.8s ease-out; }
    .stock-bar.flash span { animation: stock-fill 0.8s ease-out; }
    @keyframes stock-flash {
      0%, 100% { background: var(--alert-tint); }
      30%      { background: #ffc2cd; }
    }
    @keyframes stock-fill {
      0%, 100% { filter: brightness(1); }
      30%      { filter: brightness(1.35); }
    }

    /* "−1" que sobe e some a cada baixa */
    .stock-menos {
      position: absolute;
      top: -6px;
      right: 12px;
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 800;
      color: var(--alert);
      pointer-events: none;
      animation: stock-menos 1.2s ease-out forwards;
    }
    @keyframes stock-menos {
      0%   { opacity: 0; transform: translateY(6px); }
      20%  { opacity: 1; transform: translateY(-2px); }
      100% { opacity: 0; transform: translateY(-22px); }
    }

    @media (prefers-reduced-motion: reduce) {
      .stock-bar span { transition: none; }
      .stock-live,
      .stock-count strong.pop,
      .stock-bar.flash,
      .stock-bar.flash span,
      .stock-menos { animation: none; }
      .stock-menos { display: none; }
    }

    /* ── O QUE VOCÊ VAI RECEBER + PREÇO ─────── */
    .offer-card {
      margin: 32px auto 0;
      max-width: 400px;
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: 24px;
      overflow: hidden;
      position: relative;
      z-index: 1;
      box-shadow: 0 20px 50px rgba(61, 32, 87,0.14);
    }
    .offer-card-body {
      padding: 28px 26px 26px;
      text-align: center;
    }
    .receive-title {
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 22px;
    }
    .receive-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: fit-content;
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
    }
    .receive-list li {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      text-align: left;
    }
    .receive-list .item-icon {
      width: 26px;
      height: 26px;
      min-width: 26px;
      border-radius: 50%;
      background: var(--grad-accent);
      color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      box-shadow: 0 4px 14px rgba(168, 77, 214,0.30);
    }
    .receive-list .item-text {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--title);
      letter-spacing: 0.01em;
    }
    .receive-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--accent-tint), transparent);
      margin: 22px 0 16px;
    }
    .receive-por {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 20px;
      font-weight: 600;
      color: var(--accent);
      text-align: center;
      margin-bottom: 4px;
    }

    /* ── OFERTA ─────────────────────────────── */
    .offer-section {
      background: var(--surface);
      color: var(--text);
      padding: 64px 24px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .offer-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 100%, rgba(168, 77, 214,0.10) 0%, transparent 65%);
      pointer-events: none;
    }
    .offer-section > * { position: relative; }

    .gift-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--accent-soft);
      border: 1px solid var(--accent-tint);
      color: var(--accent);
      font-family: var(--font-display);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      padding: 8px 20px;
      border-radius: 100px;
      margin-bottom: 22px;
    }

    .price-box-image {
      width: 100%;
      aspect-ratio: 3/2;   /* sos.webp é 481×320 */
      background: var(--white);   /* mesmo fundo do card; a imagem tem alfa */
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .price-box-image img {
      width: 100%;
      height: 100%;
      /* contain: mostra o produto inteiro. A imagem tem alfa e o fundo
         do bloco é branco, então a sobra nas laterais é invisível. */
      object-fit: contain;
      display: block;
    }
    .price-highlight {
      display: flex;
      justify-content: center;
      align-items: baseline;
      gap: 2px;
      margin-top: -8px;
      margin-bottom: 2px;
    }
    .price-prefix { font-family: var(--font-display); font-size: 18px; color: var(--accent); font-weight: 700; }
    .price-value {
      font-family: var(--font-display);
      font-size: 72px;
      font-weight: 800;
      color: var(--accent);
      line-height: 1;
    }
    .price-cents { font-family: var(--font-display); font-size: 32px; color: var(--accent); font-weight: 700; }
    .price-pix {
      font-size: 13px;
      color: var(--text-muted);
      font-weight: 500;
      margin-top: 6px;
      margin-bottom: 18px;
    }

    .trust-row {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
      margin-top: 22px;
      flex-wrap: wrap;
    }
    .trust-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--text-muted);
    }
    .trust-item span { font-size: 16px; }

    /* ── GARANTIA ───────────────────────────── */
    .guarantee-section {
      padding: 56px 24px;
      background: var(--white);
      text-align: center;
    }
    .guarantee-section h3 {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 700;
      color: var(--title);
      margin-bottom: 12px;
    }
    .guarantee-section p {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.65;
      max-width: 340px;
      margin: 0 auto;
    }

    /* ── FOTO EQUIPE ────────────────────────── */
    .guarantee-photo {
      max-width: 640px;
      margin: 16px auto 0;
      border-radius: 20px;
      overflow: hidden;
      aspect-ratio: 845 / 960;
      box-shadow: 0 8px 28px rgba(61, 32, 87,0.12);
    }
    .guarantee-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top;
      display: block;
    }

    /* ── WIDGETS RECLAME AQUI ───────────────── */
    .ra-widgets {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      max-width: 640px;
      margin: 28px auto 0;
      text-align: left;
    }
    @media not all {
      .ra-widgets { gap: 16px; }
    }
    .ra-card {
      border-radius: 18px;
      padding: 22px 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      color: #1F2430;
      box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    }
    .ra-card.ra-reputation { background: #F5F8E6; }
    .ra-card.ra-position   { background: #E4F0E7; }
    .ra-q { font-size: 14px; color: #2A2F3A; }
    .ra-head { display: flex; align-items: center; gap: 14px; }
    .ra-face { flex-shrink: 0; }
    .ra-title {
      font-family: var(--font-display);
      font-size: 19px;
      font-weight: 700;
      line-height: 1.25;
      color: #14181F;
    }
    .ra-badge-pos {
      width: 56px;
      height: 56px;
      min-width: 56px;
      border-radius: 12px;
      background: #9BDCB1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: 800;
      color: #10251A;
    }
    .ra-body { font-size: 12.5px; line-height: 1.55; color: #262B33; }
    .ra-body strong { font-weight: 800; }
    @media all {
      .ra-card { padding: 16px 14px; gap: 12px; }
      .ra-q { font-size: 12px; }
      .ra-head { gap: 10px; }
      .ra-face { width: 42px; height: 42px; }
      .ra-title { font-size: 15px; }
      .ra-badge-pos { width: 44px; height: 44px; min-width: 44px; font-size: 19px; }
      .ra-body { font-size: 11px; }
    }

    /* ── FAQ ────────────────────────────────── */
    .faq-section {
      padding: 64px 24px;
      background: var(--surface);
    }
    .faq-list {
      margin-top: 28px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-width: 560px;
      margin-left: auto;
      margin-right: auto;
    }
    .faq-item {
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: 14px;
      overflow: hidden;
    }
    .faq-question {
      width: 100%;
      background: none;
      border: none;
      padding: 18px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      cursor: pointer;
      text-align: left;
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 600;
      color: var(--title);
    }
    .faq-question .chevron {
      width: 24px;
      height: 24px;
      min-width: 24px;
      border-radius: 50%;
      background: var(--accent-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: var(--accent);
      transition: transform 0.25s ease;
    }
    .faq-item.open { border-color: var(--accent-tint); }
    .faq-item.open .chevron { transform: rotate(180deg); background: var(--accent); color: var(--white); }
    .faq-answer {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.65;
      padding: 0 20px;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease, padding 0.3s ease;
    }
    .faq-item.open .faq-answer {
      max-height: 220px;
      padding: 0 20px 18px;
    }

    /* ── INFO DE COMPRA ─────────────────────── */
    .purchase-info {
      background: var(--white);
      padding: 56px 24px;
    }
    .purchase-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 26px;
      max-width: 560px;
      margin-left: auto;
      margin-right: auto;
    }
    .purchase-card {
      background: var(--surface);
      border: 1px solid var(--border-soft);
      border-radius: 18px;
      padding: 22px 16px;
      text-align: center;
    }
    .purchase-card .p-icon { font-size: 28px; margin-bottom: 10px; }
    .purchase-card h4 {
      font-family: var(--font-display);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--title);
      margin-bottom: 6px;
    }
    .purchase-card p { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

    /* ── FOOTER ─────────────────────────────── */
    footer {
      background: var(--title);
      color: rgba(255,255,255,0.55);
      text-align: center;
      padding: 36px 24px;
      font-size: 12px;
      line-height: 1.8;
    }
    footer a { color: rgba(255,255,255,0.72); text-decoration: none; }
    footer a:hover { color: var(--white); }
    footer .footer-brand {
      font-family: var(--font-display);
      font-size: 18px;
      color: var(--white);
      font-weight: 800;
      letter-spacing: 0.1em;
      margin-bottom: 16px;
    }
    .footer-divider {
      height: 1px;
      background: rgba(255,255,255,0.12);
      margin: 20px 0;
    }

    /* ── UTILITY ────────────────────────────── */
    .text-center { text-align: center; }
    .mt-8  { margin-top: 8px;  }
    .mt-16 { margin-top: 16px; }
    .mt-24 { margin-top: 24px; }
    .mt-32 { margin-top: 32px; }

    @media not all {
      .discreet-section,
      .benefits-section,
      .section,
      .offer-section,
      .reviews-section,
      .guarantee-section,
      .faq-section,
      .purchase-info,
      .feature-section {
        padding-left: clamp(48px, 12cqw, 180px);
        padding-right: clamp(48px, 12cqw, 180px);
      }
      .offer-card { max-width: 420px; }
    }


    html { background: #eeedf1; scrollbar-width: none; }
    html::-webkit-scrollbar { display: none; }
    body { max-width: 390px; margin-inline: auto; container-type: inline-size; }
    .hero-media img { object-fit: contain; }
    a:focus-visible, button:focus-visible { outline: 3px solid #3d2057; outline-offset: 4px; }
    @media (max-width: 430px) { html { background: #fff; } }