/* Folha própria do tema Rensz. Carregada pela casca do System no , antes das regras do painel de aparência — o que o operador configura vence daqui. Por isso nenhuma regra abaixo mira um elemento com `data-theme-part` acima de 0-1-0, e as variantes de estilo ficam em `:where()`. */ /* Largura é decisão do painel ("Superfície e largura"), não do componente: era a sangria escrita aqui que empurrava o conteúdo pra fora da seção. */ .rensz-card-callout { padding: clamp(2.5rem, 5vw, 5rem) 1rem; background: #050505; color: #fff; } .rensz-card-callout__head { display: grid; grid-template-columns: minmax(0, 270px) minmax(0, 1fr); gap: 2rem; align-items: center; } .rensz-card-callout__brand { display: block; width: min(100%, 265px); height: auto; } /* Quando o componente escolhe o tamanho, escolhe também peso e entrelinha. Só o tamanho vinha daqui e o peso do reset do tema, e o resultado era um título de 57px com peso 400 — combinação que ninguém configurou. Tudo por custom property, então a parte `title` na Aparência continua vencendo. */ .rensz-card-callout__title { max-width: 750px; margin: 0; font-size: var(--rensz-title-size, clamp(2rem, 4vw, 4rem)); font-weight: var(--rensz-title-weight, 700); line-height: var(--rensz-title-line-height, 1.05); } .rensz-card-callout__body { display: flex; gap: 2rem; align-items: end; margin-top: 2.5rem; } .rensz-card-callout__benefits { display: grid; flex: 1; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .rensz-card-callout__benefit { min-width: 0; min-height: 180px; padding: 1.5rem; border: 1px solid #3d3d3d; border-radius: 8px; } /* Escala relativa, não absoluta: o corpo do card acompanha a tipografia global do tema em vez de fixar um tamanho próprio. */ .rensz-card-callout__value { color: #ff6a1a; font-size: 2em; /* Entrelinha de corpo (130%) num número de 32px deixava 20,8px: a linha fica menor que o próprio número. Destaque tem entrelinha de destaque. */ line-height: var(--rensz-value-line-height, 1.1); } .rensz-card-callout__benefit-title { margin: 1rem 0 0.45rem; padding-top: 1rem; border-top: 1px solid #555; font-size: 1em; font-weight: var(--rensz-benefit-title-weight, 600); } .rensz-card-callout__benefit-text { margin: 0; color: #aaa; font-size: 0.85em; } /* O estilo escolhido no setting entra por variável, nunca por regra própria: a regra da variante teria que ser fraca pra perder do painel, e aí perderia também do `a` do reset. A base é a única que pinta, e o painel vence a base. */ .rensz-card-callout__action { display: inline-flex; justify-content: center; gap: 0.5rem; min-width: var(--rensz-action-min-width, 170px); padding: var(--rensz-action-padding, 0.8rem 1rem); border: 1px solid var(--rensz-action-border, transparent); border-radius: 5px; background: var(--rensz-action-background, #fff); color: var(--rensz-action-color, #111); font-weight: 700; text-decoration: var(--rensz-action-decoration, none); } :where(.rensz-card-callout__action--outline) { --rensz-action-border: currentColor; --rensz-action-background: transparent; --rensz-action-color: #fff; } :where(.rensz-card-callout__action--link) { --rensz-action-min-width: 0; --rensz-action-padding: 0; --rensz-action-background: transparent; --rensz-action-color: #fff; --rensz-action-decoration: underline; } @media (max-width: 1023px) { .rensz-card-callout__head { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); } .rensz-card-callout__benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .rensz-card-callout__head { grid-template-columns: minmax(0, 1fr); } .rensz-card-callout__benefits { grid-template-columns: minmax(0, 1fr); } .rensz-card-callout__body { display: block; } .rensz-card-callout__action { width: 100%; margin-top: 1.5rem; } }