/* A mesma margem fluida alinha cabeçalho, destaque, catálogo e rodapé. */
.wrap {
  width: 100%;
  max-width: 2112px;
  padding-inline: clamp(20px, 4vw, 96px);
}

.product-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: clamp(18px, 1.4vw, 28px);
}

.catalog-tools .search-field {
  max-width: 440px;
}

.product-card, .product-body, .hero-copy, .faq-list {
  min-width: 0;
}

@media (min-width: 1100px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: clamp(40px, 5vw, 112px);
    padding-top: 26px;
    padding-bottom: 30px;
  }

  .hero h1 {
    font-size: clamp(42px, 3vw, 56px);
    letter-spacing: -.045em;
  }

  .hero-description {
    max-width: 52ch;
    margin-top: 16px;
    font-size: clamp(15px, .9vw, 17px);
    line-height: 1.5;
  }

  .hero-badge {
    margin-bottom: 12px;
  }

  .hero-visual {
    margin-block: 0;
  }

  .hero-image {
    height: clamp(260px, 34vh, 340px);
    aspect-ratio: auto;
    max-height: 340px;
    object-fit: cover;
  }

  .hero-actions {
    margin-top: 18px;
  }

  .visual-tag {
    left: clamp(24px, 2vw, 40px);
    bottom: 14px;
    padding: 10px 16px;
    border-radius: 14px;
  }

  .sample-key {
    font-size: 16px;
    line-height: 1.4;
  }

  .header-search {
    width: clamp(256px, 20vw, 340px);
  }

  .faq-section {
    grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr);
    gap: clamp(40px, 7vw, 128px);
  }

  .faq-list p {
    max-width: 78ch;
  }

  .access-surface {
    padding: clamp(30px, 2.5vw, 48px);
  }

  .access-surface h2 {
    font-size: clamp(22px, 1.7vw, 30px);
  }
}

@media (max-width: 720px) {
  .wrap {
    padding-inline: 20px;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
  }
}

@media (max-width: 450px) {
  .product-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Filtros do catálogo na linha de ferramentas, à esquerda. */
.catalog-tools .category-list{justify-content:flex-start;min-width:0;flex-wrap:wrap}.catalog-tools .catalog-meta{margin-left:auto}
@media(max-width:720px){.catalog-tools .catalog-meta{margin-left:0;width:100%}.catalog-tools .category-list{width:100%}}

.catalog-section{padding-top:32px}.catalog-section .section-heading h2{margin-top:0}
@media(max-width:720px){.catalog-section{padding-top:24px}}

/* Categoria legivel e acao de compra explicita nos cards. */
.product-card .card-top{justify-content:flex-start;margin-bottom:14px}
.product-card .category-badge-row{flex:none;padding:8px 3px 0;min-width:0}
.product-card .product-category{display:inline-flex;flex:0 1 auto;max-width:100%;min-width:0;padding:0;border:1px solid #a2fce23d;border-radius:8px;background:linear-gradient(115deg,#14547d 0%,#126f78 52%,#178667 100%);color:#effffc;font-size:12px;font-weight:700;line-height:1.35;letter-spacing:.6px;text-transform:uppercase;text-align:left;box-shadow:inset 0 1px 0 #ffffff1a,0 3px 8px #00000020}
.product-card .category-badge-content{display:flex;align-items:center;gap:7px;min-width:0;padding:5px 10px 5px 6px}
.product-card .category-badge-symbol{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;border:1px solid #a2fce235;border-radius:5px;background:#ffffff0c;color:#b1ffe8}
.product-card .category-badge-symbol svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.product-card .product-category-label{min-width:0;overflow-wrap:anywhere}

.product-card .card-bottom{align-items:center;flex-wrap:wrap;gap:14px}.product-card .card-bottom>div{flex:1 1 auto}
.product-card .buy-button{width:auto;min-width:116px;height:44px;min-height:44px;border-radius:11px;padding:10px 15px;gap:8px;font-size:14px;white-space:nowrap;flex-shrink:0}
.product-card .buy-button svg{width:17px;height:17px;stroke-width:1.8}
.product-card .buy-button:disabled{background:transparent;color:var(--muted);border-color:var(--line);box-shadow:none;min-width:128px}

/* Controle de fechamento do checkout com alinhamento vetorial e alvo de toque. */
:is(#checkout-dialog,.store-checkout-swal) .checkout-close{display:inline-flex;align-items:center;justify-content:center;gap:10px;top:16px;right:18px;width:auto;min-width:104px;height:44px;padding:10px 14px;border:1px solid #6be4ca55;border-radius:13px;background:linear-gradient(145deg,#234353,#142c3d);box-shadow:0 4px 14px #04111c44,inset 0 1px 0 #d4fff00c;color:#d7f6ed;font-size:13px;font-weight:600;line-height:1;cursor:pointer;transition:background .18s,border-color .18s,box-shadow .18s}
:is(#checkout-dialog,.store-checkout-swal) .checkout-close svg{display:block;width:18px;height:18px;stroke-width:2;stroke-linecap:round;flex-shrink:0}
:is(#checkout-dialog,.store-checkout-swal) .checkout-close:hover{background:linear-gradient(145deg,#2a554f,#183c40);border-color:#74edce;box-shadow:0 4px 18px #04111c55,0 0 0 3px #57daba12;color:#c9ffe9}
:is(#checkout-dialog,.store-checkout-swal) .checkout-close:focus-visible{outline:2px solid #9ef8d7;outline-offset:3px}
:is(#checkout-dialog,.store-checkout-swal) .checkout-close:active{box-shadow:inset 0 2px 5px #04111c44}
@media(max-width:720px){:is(#checkout-dialog,.store-checkout-swal) .checkout-close{top:14px;right:14px;min-width:96px;height:44px;padding-inline:12px}:is(#checkout-dialog,.store-checkout-swal) .checkout-summary>.eyebrow{padding-right:110px;min-height:30px}}
@media(prefers-reduced-motion:reduce){:is(#checkout-dialog,.store-checkout-swal) .checkout-close{transition:none}}

/* A imagem do checkout mantém sua proporção, sem quadro ou fundo. */
:is(#checkout-dialog,.store-checkout-swal) .checkout-art{position:relative;width:100%;height:auto;aspect-ratio:auto;max-height:none;min-height:0;margin:25px 0 22px;overflow:visible;border:0;border-radius:0;background:transparent}
:is(#checkout-dialog,.store-checkout-swal) .checkout-art img{position:static;inset:auto;display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain;object-position:center;margin:0;border:0;border-radius:0;background:transparent}
@media(max-width:720px){:is(#checkout-dialog,.store-checkout-swal) .checkout-art{margin-top:18px;margin-bottom:18px}}

/* Aviso de acesso e saldo logo após a ação de criar o pedido. */
:is(#checkout-dialog,.store-checkout-swal) .checkout-key-warning{display:flex;align-items:flex-start;gap:12px;margin:15px 0 0;padding:16px;border:1px solid #e8bd6859;border-left:3px solid #f5c56b;border-radius:12px;background:#10232f;color:#f3f7fa;text-align:left;font-size:15px;font-weight:500;line-height:1.6;box-shadow:0 4px 16px #06121d18}
:is(#checkout-dialog,.store-checkout-swal) .checkout-key-warning .warning-emoji{display:block;flex:0 0 26px;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;font-size:25px;font-style:normal;line-height:1.25;margin-top:2px}

/* Checkout: readable delivery content and a distinct order total. */
:is(#checkout-dialog,.store-checkout-swal) .delivery-note{display:inline-flex;max-width:100%;margin-top:22px;padding:10px 14px;border:1px solid #70e5bf66;border-left:3px solid #79efc1;border-radius:12px;background:linear-gradient(125deg,#21534c,#163a41);color:#d5ffeb;box-shadow:0 4px 16px #04141c1a;font-size:16px;font-weight:600;line-height:1.45;overflow-wrap:anywhere}
:is(#checkout-dialog,.store-checkout-swal) .delivery-note[hidden]{display:none}
:is(#checkout-dialog,.store-checkout-swal) #checkout-delivery{white-space:pre-wrap}
:is(#checkout-dialog,.store-checkout-swal) .summary-total{position:relative;isolation:isolate;gap:10px;margin-top:24px;padding:21px 22px 23px;border:1px solid #7de8bf80;border-radius:18px;background:linear-gradient(135deg,#22564d,#153741 75%);box-shadow:0 12px 28px #03151d30,0 0 26px #61e8b917,inset 0 1px 0 #ceffe51f;color:#e4f6ed}
:is(#checkout-dialog,.store-checkout-swal) .summary-total::before{content:'';position:absolute;top:0;left:22px;right:22px;height:2px;background:linear-gradient(90deg,transparent,#b5ffda,transparent)}
:is(#checkout-dialog,.store-checkout-swal) .summary-total>span{font-size:13px;font-weight:600;line-height:1.4;letter-spacing:.07em;text-transform:uppercase;color:#e0f3e9}
:is(#checkout-dialog,.store-checkout-swal) .summary-total strong{font:clamp(38px,4vw,48px)/1.15 var(--display);letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:#b6ffda;text-shadow:0 0 24px #82f5bd24;overflow-wrap:anywhere}
@media(max-width:720px){:is(#checkout-dialog,.store-checkout-swal) .summary-total{padding:19px 18px 21px}:is(#checkout-dialog,.store-checkout-swal) .delivery-note{font-size:16px}}

.product-card .card-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:14px 10px}.product-card .card-bottom>div{min-width:0;width:auto}.product-card .card-bottom>.buy-button{grid-column:2;justify-self:end;align-self:end}.product-card.is-wallet-topup .card-bottom>div{grid-column:1/-1}

:is(#checkout-dialog,.store-checkout-swal) #checkout-title{font-size:clamp(22px,2vw,26px);line-height:1.32;letter-spacing:-.018em;text-align:left;text-wrap:balance;white-space:normal;word-break:normal;overflow-wrap:anywhere;margin-top:18px}
:is(#checkout-dialog,.store-checkout-swal) #checkout-description{font-size:14px;line-height:1.85;color:#b8cbd0;text-align:justify;text-align-last:left;text-justify:inter-word;white-space:pre-line;word-break:normal;overflow-wrap:anywhere;letter-spacing:normal;margin-top:16px}

/* Descrição contida e resumo financeiro junto à ação de compra. */
:is(#checkout-dialog,.store-checkout-swal) .checkout-art{margin-top:0}
:is(#checkout-dialog,.store-checkout-swal) .checkout-payment-summary{margin-top:22px;padding-top:18px;border-top:1px solid #77cdb82e;min-width:0}
:is(#checkout-dialog,.store-checkout-swal) .checkout-payment-summary .checkout-price-breakdown{margin-top:0}
:is(#checkout-dialog,.store-checkout-swal) .checkout-payment-summary .summary-total{margin-top:16px}
:is(#checkout-dialog,.store-checkout-swal) .checkout-payment-summary .small-note{margin-top:12px}
/* Cabeçalho do produto integrado às duas colunas do checkout. */
:is(#checkout-dialog,.store-checkout-swal) .checkout-product-heading{grid-column:1/-1;padding:25px 70px 23px 30px;border-bottom:1px solid #78cdb52e;background:#173240}
:is(#checkout-dialog,.store-checkout-swal) .checkout-product-heading #checkout-title{margin:0;font-size:clamp(21px,2vw,27px);line-height:1.35;text-wrap:pretty;text-align:left}
:is(#checkout-dialog,.store-checkout-swal) #checkout-description{margin-top:20px;text-align:left;white-space:normal;line-height:1.75}
:is(#checkout-dialog,.store-checkout-swal) #checkout-description:empty{display:none}
.product-rich-description{overflow-wrap:anywhere;word-break:normal}
.product-rich-description p,.product-rich-description ul,.product-rich-description ol,.product-rich-description blockquote{margin:0 0 14px}
.product-rich-description ul,.product-rich-description ol{padding-left:24px}
.product-rich-description li{margin:5px 0}
.product-rich-description h1,.product-rich-description h2,.product-rich-description h3,.product-rich-description h4{font-size:1.2em!important;line-height:1.4;margin:18px 0 10px!important}
.product-rich-description img{max-width:100%;height:auto;border-radius:8px}
.product-rich-description a{color:#8eeacc;text-decoration:underline;overflow-wrap:anywhere}
.product-rich-description table{width:100%;table-layout:fixed;border-collapse:collapse;margin:12px 0}
.product-rich-description th,.product-rich-description td{border:1px solid #78bfa747;padding:8px;overflow-wrap:anywhere}
.product-rich-description pre{white-space:pre-wrap;overflow-wrap:anywhere}
.product-rich-description blockquote{border-left:3px solid #69d3b9;padding-left:14px}
@media(max-width:720px){:is(#checkout-dialog,.store-checkout-swal) .checkout-product-heading{padding:24px 62px 22px 25px}}
/* O CSS do documento da descrição fica dentro da sua própria árvore visual. */
.product-description-document{display:block;position:relative;contain:layout paint;isolation:isolate;min-width:0;max-width:100%;color:inherit}
/* Três posições fixas: categoria à esquerda, velocidade ao centro e servidor à direita. */
.product-card .category-badge-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:5px;min-height:42px;padding:8px 3px 0}
.product-card .category-badge-row>.product-category{grid-column:1;justify-self:start;min-width:0;max-width:100%}
.product-card .category-badge-row>.product-category .product-category-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.15px}
.product-card .category-badge-row>.product-category .category-badge-content{gap:4px;padding:5px 6px 5px 4px}
.product-card .category-badge-row>.product-server-badge{grid-column:3;justify-self:end;margin-left:0}
/* Modelo variant-1 fornecido pelo usuário, mantendo a posição central no card. */
.product-card .category-badge-row>.product-speed-badge{grid-column:2;justify-self:center}
.product-speed-badge{--accent:#ff8757;--rgb:255,135,87;position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:8px;width:134px;height:31px;min-height:31px;padding:5px 11px 5px 36px;border-radius:9px;white-space:nowrap;font:780 11px/1.1 var(--sans);letter-spacing:.01em;box-sizing:border-box;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease,color .25s ease;cursor:default;overflow:hidden;color:#f8fbff;background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 28px rgba(2,8,25,.28),inset 0 1px 0 rgba(255,255,255,.05);-webkit-font-smoothing:antialiased}
.product-speed-badge--fast{--accent:#47b8ff;--rgb:71,184,255}.product-speed-badge--moderate{--accent:#ffc86a;--rgb:255,200,106}.product-speed-badge--slow{--accent:#ff738f;--rgb:255,115,143}
.product-speed-badge::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(var(--rgb),.18),transparent 54%);z-index:0}
.product-speed-badge .speed-sigil{position:absolute;left:-16px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:62px;height:62px;color:var(--accent);opacity:.72;z-index:1;filter:none}
.product-speed-badge .speed-emoji{display:block;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;font-size:38px;line-height:1;filter:saturate(1.2) brightness(1.08)}
.product-speed-badge .speed-label{position:relative;z-index:2;transform:translateX(3px)}

.product-speed-badge:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(2,8,25,.34),0 0 0 1px rgba(var(--rgb),.2) inset}
@media(min-width:481px) and (max-width:760px){.product-speed-badge{width:120px;gap:5px;font-size:10px;padding:4px 9px 4px 32px;min-height:31px}.product-speed-badge .speed-sigil{width:54px;height:54px}.product-speed-badge .speed-emoji{font-size:34px}.product-card .category-badge-row>.product-server-badge{padding-inline:5px;gap:4px;font-size:10px}}
@media(min-width:451px) and (max-width:580px){.product-speed-badge{width:86px;min-height:31px;padding:3px 7px 3px 22px;gap:4px;font-size:9px}.product-speed-badge .speed-label{white-space:normal;text-align:center}.product-speed-badge .speed-sigil{width:50px;height:50px}.product-speed-badge .speed-emoji{font-size:30px}.product-speed-badge .speed-sigil{left:-18px}.product-card .category-badge-row>.product-server-badge{padding-inline:3px;gap:3px;font-size:8px}.product-card .category-badge-row>.product-server-badge svg{width:10px;height:10px}}
@media(prefers-reduced-motion:reduce){.product-speed-badge,.product-speed-badge *,.product-speed-badge::before,.product-speed-badge::after{animation:none!important;transition:none!important}.product-speed-badge:hover{transform:none}}