/* Ultrapack Extra Sites - estilos dos shortcodes (design system template-planos)
   v0.1.3: botoes do upsell voltam ao tamanho compacto (caixa segue full width). */

.up-sx-offer{width:100%;margin:0 auto;font-family:'Poppins','Segoe UI',sans-serif;color:#565d70}

/* Header da secao */
.up-sx-head{text-align:center;max-width:680px;margin:0 auto 56px}
.up-sx-badge{display:inline-block;background:#fff1ef;color:#f2726a;font:700 12px/1 'Montserrat','Segoe UI',sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;border-radius:999px}
/* Badge de promocao: salmao solido pra separar do "Novo" (que e salmao claro). */
.up-sx-badge--promo{background:#f2726a;color:#fff}
.up-sx-title{font:800 clamp(26px,3.5vw,38px)/1.15 'Montserrat','Segoe UI',sans-serif;color:#1c2030;letter-spacing:-.02em;margin:16px 0 12px}
.up-sx-title em{font-style:normal;color:#f2726a}
.up-sx-headsub{margin:0;font-size:16px;color:#8990a3}

.up-sx-summary{max-width:1040px;margin:0 auto 30px;background:#e7f6ee;color:#24a56b;border-radius:12px;padding:12px 18px;font-size:14px}

/* Cards juntos, bordas arredondadas, com o Permanente SOBREPONDO o Flex
   (mesma linguagem do card destacado da tabela de planos da home). */
.up-sx-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center;max-width:1040px;margin:0 auto}
.up-sx-card{position:relative;z-index:1;background:#fff;border:1px solid #e7e9f1;border-radius:20px;padding:32px 30px;box-shadow:0 10px 35px rgba(28,32,48,.07)}
.up-sx-card--featured{z-index:2;margin:-14px 0 -14px -22px;border:2px solid #8a4f66;background:linear-gradient(180deg,#fff 0%,#fdf7f9 100%);box-shadow:0 14px 30px -12px rgba(138,79,102,.55);padding:38px 32px}
.up-sx-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(100deg,#8a4f66,#4f5a75);color:#fff;font:700 11px/1 'Montserrat','Segoe UI',sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:7px 16px;border-radius:999px;white-space:nowrap}
.up-sx-card h3{font:700 20px/1.2 'Montserrat','Segoe UI',sans-serif;color:#1c2030;margin:0 0 4px}
.up-sx-sub{font-size:13px;color:#8990a3;margin:0 0 18px}

.up-sx-kits{list-style:none;margin:0 0 18px;padding:0}
.up-sx-kits li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #e7e9f1}
.up-sx-kits li:last-child{border-bottom:0}
.up-sx-kit-label{flex:0 0 64px;font:600 13px 'Montserrat','Segoe UI',sans-serif;color:#1c2030}
.up-sx-kit-price{flex:1;font:800 20px 'Montserrat','Segoe UI',sans-serif;color:#1c2030}
.up-sx-card--featured .up-sx-kit-price{color:#8a4f66}
.up-sx-kit-price small{font:500 12px 'Poppins','Segoe UI',sans-serif;color:#8990a3;margin-left:4px}
/* Preco cheio riscado da promo. Peso/tamanho menores que o preco ativo pra
   hierarquia ficar obvia; o del herda o font 800 20px do .up-sx-kit-price. */
.up-sx-kit-was{font-weight:600;font-size:14px;color:#a7adbd;text-decoration:line-through;margin-right:6px;white-space:nowrap}
.up-sx-kit-now{white-space:nowrap}
.up-sx-card--featured .up-sx-kit-was{color:#b596a2}
/* Mesmo riscado dentro dos botoes do upsell (fundo branco e fundo coral). */
.up-sx-opt .up-sx-kit-was{font-size:12.5px;color:#8990a3;margin-right:4px}
.up-sx-opt--coral .up-sx-kit-was{color:#ffd4cf}
.up-sx-buy{flex:0 0 auto;display:inline-block;background:#f2726a;color:#fff!important;text-decoration:none;font:700 12px 'Montserrat','Segoe UI',sans-serif;padding:9px 18px;border-radius:999px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.up-sx-buy:before{content:'+';font-weight:800;font-size:14px;line-height:1;margin-right:6px;vertical-align:-1px}
.up-sx-buy:hover{background:#ef5f56;transform:translateY(-2px);box-shadow:0 10px 35px rgba(28,32,48,.1)}
.up-sx-card--featured .up-sx-buy{background:linear-gradient(100deg,#8a4f66,#4f5a75)}

.up-sx-feats{list-style:none;margin:0;padding:0}
.up-sx-feats li{position:relative;padding:6px 0 6px 22px;font-size:12.5px;color:#565d70}
.up-sx-feats li:before{content:'';position:absolute;left:0;top:11px;width:12px;height:12px;border-radius:50%;background:#e7f6ee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.5 2.5 4.5-5' stroke='%2324a56b' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}

/* Faixa de break-even (full width) */
.up-sx-breakeven{width:100%;margin:72px 0 0;background:linear-gradient(100deg,#8a4f66,#4f5a75);border-radius:20px;color:#fff;padding:28px 36px;display:flex;gap:26px;align-items:center;box-shadow:0 14px 30px -12px rgba(138,79,102,.55);box-sizing:border-box}
.up-sx-breakeven:before{content:'';flex:0 0 52px;width:52px;height:52px;border-radius:50%;background-color:rgba(255,255,255,.14);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:26px}
.up-sx-breakeven-big{font:800 34px/1 'Montserrat','Segoe UI',sans-serif;letter-spacing:-.02em;white-space:nowrap}
.up-sx-breakeven-big small{display:block;font:600 11px/1.4 'Montserrat','Segoe UI',sans-serif;letter-spacing:.1em;text-transform:uppercase;opacity:.75;margin-top:6px}
.up-sx-breakeven p{margin:0;font-size:14px;opacity:.95}
.up-sx-breakeven p strong{color:#ffd9d4}

/* Tabela comparativa */
.up-sx-compare{width:100%;margin:64px 0 0;overflow-x:auto}
.up-sx-compare table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid #e7e9f1;border-radius:20px;overflow:hidden;font-size:13.5px}
.up-sx-compare th,.up-sx-compare td{padding:13px 18px;text-align:left;border-bottom:1px solid #e7e9f1}
.up-sx-compare tr:last-child th,.up-sx-compare tr:last-child td{border-bottom:0}
.up-sx-compare thead th{background:#f6f7fb;font:700 12px 'Montserrat','Segoe UI',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#1c2030}
.up-sx-compare thead th:nth-child(3){color:#8a4f66}
.up-sx-compare tbody th{font:600 12.5px 'Poppins','Segoe UI',sans-serif;color:#1c2030;width:26%;background:#f6f7fb}
.up-sx-compare td{color:#565d70;width:37%}

/* Faixa de regras (full width). margin com !important: o .post-content p
   do Avada (0,1,1) vence a classe solta (0,1,0) e esmagava o margin-top. */
.up-sx-rules{width:100%;margin:64px 0 72px!important;padding:16px 24px;background:#fdf2df;border:1px solid #f5e0bb;border-radius:12px;font-size:12.5px;color:#8a6a2f;box-sizing:border-box}

/* CTA para a pagina de planos (fim da oferta) */
.up-sx-more{text-align:center;margin:44px 0 0;font-size:13px;color:#8990a3;line-height:2.4}
.up-sx-plans-btn{display:inline-block;margin-top:6px;padding:14px 34px;background:linear-gradient(100deg,#8a4f66,#4f5a75);color:#fff!important;text-decoration:none;font:700 13px 'Montserrat','Segoe UI',sans-serif;border-radius:999px;box-shadow:0 14px 30px -12px rgba(138,79,102,.55);transition:transform .2s ease}
.up-sx-plans-btn:hover{transform:translateY(-2px)}

/* Link injetado via JS abaixo da barra de uso de Sites comuns (UAU): usa a
   propria classe .up-sx-buy (pill salmao com "+"), so alinhado a direita e
   sem o "levanta" do hover. O container (.uau-csm-plan-usage-item) e um grid
   item, que estabelece formatting context proprio e ja contem o float. */
.up-sx-usage-link{float:right;margin-top:10px;text-decoration:none!important;transition:all .2s ease}
.up-sx-usage-link:hover{transform:none}

/* Upsell (pagina Gerenciar Sites) - full width; o BLOCO INTEIRO e clicavel
   (link overlay pra pagina Sites Extras); botoes e links internos ficam por
   cima com z-index proprio. */
.up-sx-upsell{position:relative;width:100%;box-sizing:border-box;margin:22px 0;border:2px dashed #ff9a8f;border-radius:16px;padding:22px 26px;background:linear-gradient(180deg,#fff 0%,#fff1ef 140%);font-family:'Poppins','Segoe UI',sans-serif;transition:transform .2s ease,box-shadow .2s ease}
.up-sx-upsell:hover{transform:translateY(-2px);box-shadow:0 10px 35px rgba(28,32,48,.1)}
.up-sx-upsell-link{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;border-radius:16px}
.up-sx-upsell-opts,.up-sx-upsell-cap{position:relative;z-index:2}
.up-sx-upsell h5,.up-sx-upsell > p:not(.up-sx-upsell-cap){position:relative;z-index:0;pointer-events:none}
.up-sx-upsell h5{margin:0 0 4px;font:700 16px 'Montserrat','Segoe UI',sans-serif;color:#1c2030}
.up-sx-upsell p{margin:0 0 14px;font-size:13.5px;color:#565d70}
.up-sx-upsell-opts{display:flex;gap:12px;flex-wrap:wrap}
.up-sx-opt{flex:0 1 auto;min-width:240px;max-width:320px;text-align:center;text-decoration:none;border-radius:12px;padding:14px 26px;font:600 13.5px/1.35 'Montserrat','Segoe UI',sans-serif;border:1px solid #e7e9f1;background:#fff;color:#1c2030!important;transition:transform .2s ease,box-shadow .2s ease}
.up-sx-opt:hover{transform:translateY(-2px);box-shadow:0 10px 35px rgba(28,32,48,.1)}
.up-sx-opt small{display:block;font:400 11.5px 'Poppins','Segoe UI',sans-serif;color:#8990a3;margin-top:3px}
/* Botao da direita em salmao solido (destaque da fileira), radius 12px
   herdado do padrao. */
.up-sx-opt--coral{background:#f2726a;border-color:#f2726a;color:#fff!important}
.up-sx-opt--coral small{color:#ffe2de}
.up-sx-upsell-cap{margin:13px 0 0!important;font-size:11.5px!important;color:#8990a3!important}
.up-sx-upsell-cap a{color:#8a4f66;font-weight:600}

@media (max-width:820px){
  .up-sx-grid{grid-template-columns:1fr;max-width:520px;gap:26px}
  .up-sx-card--featured{margin:0}
  /* A cela de preco sobra com ~105px (label 64px + botao). Com a promo o
     conteudo nao cabe numa linha, entao empilha explicitamente riscado /
     preco / sufixo -- cada um atomico -- em vez de deixar o browser quebrar
     onde der (o que separava o "R$" do numero). */
  .up-sx-kit-price{line-height:1.3}
  .up-sx-kit-price .up-sx-kit-was{display:block;margin-right:0;font-size:13px}
  .up-sx-kit-price small{display:block;margin-left:0}
  .up-sx-breakeven{flex-direction:column;text-align:center;gap:14px}
  .up-sx-breakeven:before{flex:0 0 52px}
}

@media (prefers-reduced-motion:reduce){
  .up-sx-buy,.up-sx-opt{transition:none}
  .up-sx-opt:hover{transform:none}
  /* O botao da barra de uso nao tem movimento nenhum (hover e transform:none),
     so fade de cor/sombra -- entao mantem a transicao SEMPRE, inclusive aqui. */
  .up-sx-usage-link{transition:all .2s ease}
}