/* =========================================================================
   Template Ads — estilos da home (camada 3.1)
   Herda as camadas anteriores (v2, v2.1, v2.2, v3) e ajusta só o necessário:
   mapa causal com 7 nós e bloco de preço em frase.
   ========================================================================= */

/* ---------- 1. Mapa causal com 7 nós ---------- */
/* Só no desktop — sem a media query esta regra vencia a lista vertical
   do celular e deixava cada cartão com ~88 px, cortando o texto. */
@media (min-width: 700px) { .causal-nodes li { width: 29%; } }
@media (min-width: 700px) and (max-width: 1250px) {
  .node-effect { font-size: 14px; }
  .node-causes { font-size: 11.5px; }
}

/* ---------- 2. Bloco de preço → mensalidade sob medida + prazo ---------- */
.preco { display: grid; gap: 10px; }
.preco b { margin-bottom: 2px; }
.preco-valor {
  font-family: inherit; font-size: 15.5px; line-height: 1.4; font-weight: 600; color: #7A2E12;
}
.preco-prazo { font-size: 13px; color: #7A2E12; opacity: 0.85; }

/* ---------- 3. Tela "à la carte" (marcar/desmarcar serviço) ---------- */
.quiz-nota { font-size: 13px; color: var(--text-muted); margin: -10px 0 20px; max-width: 46ch; }
.opt-check { position: relative; }
.opt-check:not(.is-picked) { opacity: 0.5; border-style: dashed; background: transparent; }
.opt-check::before {
  content: "✓"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-weight: 700; color: var(--action); opacity: 0; transition: opacity 0.2s var(--ease);
}
.opt-check.is-picked::before { opacity: 1; }
.opt-check.is-picked { padding-right: 34px; }
.quiz-continue {
  margin-top: 22px; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer;
  background: var(--ink-900); color: var(--paper-100); border: 0; padding: 14px 26px;
  transition: opacity 0.2s var(--ease);
}
.quiz-continue:hover, .quiz-continue:focus-visible { opacity: 0.88; }

/* Cronograma por semanas (v3.1): dois parágrafos no mesmo passo "Como funciona". */
.path-step p + p { margin-top: 12px; }

/* =========================================================================
   Espaço menor entre seções (rolagem mais curta no celular) e mapa causal com nós que flutuam.
   ========================================================================= */

/* ---------- 4. Seções mais próximas (menos rolagem) ---------- */
:root { --section-y: clamp(40px, 5.5vw, 72px); }
.hero { padding-top: clamp(24px, 3.5vw, 44px) !important; }
.section-sub { margin-top: 12px; }
.causal-hint { margin-top: 28px; }
@media (max-width: 699px) {
  :root { --section-y: 34px; }
  .causal-hint { margin-top: 12px; }
}

/* ---------- 5. Mapa causal em ÓRBITA (nós girando em volta do T; texto sempre em pé) ----------
   O anel de nós e as linhas giram juntos em volta do centro; cada nó gira ao contrário
   no mesmo tempo, então o texto fica sempre legível. Começa depois da montagem (2.5s).
   Só no desktop (no celular é lista vertical). Passar o mouse no mapa congela tudo p/ escolher. */
@media (min-width: 700px) and (prefers-reduced-motion: no-preference) {
  /* o anel gira já "encolhido" (scale 0.86) para os nós nunca tocarem a frase de cima */
  .causal { margin-top: 14px; }
  .causal-nodes, .causal-lines {
    transform: scale(0.86); transform-origin: 50% 50%;
    animation: orbit 46s linear infinite; animation-delay: 3.4s;
  }
  .causal .node {
    animation: orbit-counter 46s linear infinite; animation-delay: 3.4s;
    transform-origin: 50% 50%; will-change: transform;
  }
  .causal-core { animation: core-breathe 5s ease-in-out infinite; }
  /* congela a órbita quando o cliente entra no mapa p/ escolher — fica fácil clicar */
  .causal:hover .causal-nodes,
  .causal:hover .causal-lines,
  .causal:hover .node { animation-play-state: paused; }
}
@keyframes orbit         { from { transform: scale(0.86) rotate(0); } to { transform: scale(0.86) rotate(360deg); } }
@keyframes orbit-counter { from { transform: rotate(0); }             to { transform: rotate(-360deg); } }
@keyframes core-breathe {
  0%, 100% { box-shadow: 0 0 0 10px rgba(216, 90, 48, 0.08), 0 24px 48px -22px rgba(44, 44, 42, 0.4); }
  50%      { box-shadow: 0 0 0 16px rgba(216, 90, 48, 0.16), 0 24px 48px -22px rgba(44, 44, 42, 0.4); }
}

/* =========================================================================
   Topo da home: o título aparece na hora, sem tela de entrada.
   ========================================================================= */
.hero h1.h1-ia {
  font-size: clamp(36px, 4.3vw, 58px); line-height: 1.12; max-width: 17ch;
}
.type.is-typing .ch:not(.on) { visibility: hidden; }
.type .caret {
  display: inline-block; width: 0.07em; height: 0.86em; margin-right: -0.07em;
  vertical-align: -0.06em; background: var(--brand);
  animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
/* terminou de digitar: o cursor pisca mais um pouco e some */
.type.is-done .caret { animation: caret-blink 1s steps(1) 3, caret-out 0.4s 3s forwards; }
@keyframes caret-out { to { opacity: 0; } }

/* ---------- Halo, vidro, cards que sobem, faixa ---------- */
/* Halo desfocado atrás do título (sem caixa visível) */
.hero-copy { position: relative; isolation: isolate; }
.hero-copy::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -8%; top: -6%; width: 92%; height: 62%;
  background: radial-gradient(ellipse at 42% 50%, rgba(216, 90, 48, 0.16), rgba(216, 90, 48, 0) 68%);
  filter: blur(28px);
}
/* Vidro só no botão secundário do topo (1 elemento: desfoque pesa em celular fraco) */
.hero-actions .btn-ghost {
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  border-color: rgba(44, 44, 42, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 26px -16px rgba(44, 44, 42, 0.45);
}
.hero-actions .btn-ghost:hover { background: var(--ink-900); }
/* Cards sobem alguns px no hover. "translate" é separado de "transform", então não briga com a órbita do mapa. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .node, .service, .path-card { transition: translate 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
  .node:hover, .service:hover, .path-card:hover { translate: 0 -4px; }
  .service:hover, .path-card:hover { box-shadow: 0 16px 32px -20px rgba(44, 44, 42, 0.45); }
}
/* Faixa rolando: nomes das plataformas, bordas que somem, pausa no mouse */
.faixa { padding: 18px 0 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.faixa-titulo {
  text-align: center; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 var(--gutter) 12px;
}
.faixa-trilho {
  display: flex; width: max-content;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.faixa-lista { display: flex; flex: none; list-style: none; margin: 0; padding: 0; }
.faixa-lista li {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 2vw, 24px);
  color: var(--stone-600); white-space: nowrap; /* 25/09/2026: sem opacity .75 (contraste 3,4:1 → acima de 4,5:1) */ padding: 0 clamp(18px, 2.4vw, 34px);
}
.faixa-lista li::after { content: "·"; margin-left: clamp(18px, 2.4vw, 34px); color: var(--brand); opacity: 0.8; }
@media (prefers-reduced-motion: no-preference) {
  .faixa-trilho { animation: faixa-rola 60s linear infinite; }
  .faixa:hover .faixa-trilho { animation-play-state: paused; }
}
@keyframes faixa-rola { to { transform: translateX(-50%); } }
/* Sem movimento: vira uma linha que quebra, sem máscara e sem a cópia */
@media (prefers-reduced-motion: reduce) {
  .faixa-trilho { width: auto; flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; }
  .faixa-lista { flex-wrap: wrap; justify-content: center; }
  .faixa-lista[aria-hidden="true"] { display: none; }
}
.btn .i-lead { width: 20px; height: 20px; margin-right: 10px; flex: none; }

/* Grade do "buraco de minhoca" parada e discreta, atrás do mapa causal (só desktop). */
.causal-grid { display: none; }
@media (min-width: 700px) {
  .causal-grid {
    display: block; position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1;
    transform: translate(-50%, -50%); pointer-events: none; z-index: 0;
    -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 66%);
            mask-image: radial-gradient(circle, #000 18%, transparent 66%);
  }
  .causal-grid svg { display: block; width: 100%; height: 100%; }
  .causal-grid circle, .causal-grid line {
    fill: none; stroke: var(--coral-500); stroke-width: 1; opacity: 0.28; vector-effect: non-scaling-stroke;
  }
}

/* ---------- Acessibilidade e ajustes de layout ---------- */
/* "Pular para o conteúdo": invisível até receber foco pelo teclado */
.pular {
  position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px;
  background: var(--ink-900); color: var(--paper-100); font-weight: 600; font-size: 15px;
  transition: top 0.2s var(--ease);
}
.pular:focus { top: 12px; outline: 3px solid var(--brand); outline-offset: 2px; }
/* Menu em telas médias (761–960 px): antes sumia sem substituto; agora vira uma linha rolável
   embaixo do logo. No celular (até 760 px) continua escondido — lá existe o botão fixo de diagnóstico. */
@media (min-width: 761px) and (max-width: 960px) {
  header.site .wrap { flex-wrap: wrap; height: auto; padding-top: 12px; row-gap: 2px; }
  nav.main {
    display: flex !important; order: 3; width: 100%; gap: 26px; overflow-x: auto;
    padding: 2px 0 10px; font-size: 14.5px; scrollbar-width: none;
  }
  nav.main::-webkit-scrollbar { display: none; }
}
/* elemento marcado com o atributo hidden fica escondido mesmo se outra regra der display a ele
   (ex.: espaço de depoimento, escondido até existir um depoimento real — 24/09/2026) */
.testimonial-slot[hidden] { display: none !important; }
/* Rodapé (24/09/2026): com o 5º link ("Privacidade") o menu passou da largura do celular (400 px em tela de 375) —
   agora ele quebra em mais de uma linha quando não cabe. */
footer nav { flex-wrap: wrap; row-gap: 10px; }

/* ---------- Seção "Como fazemos" da home (24/09/2026) ----------
   index.html não carrega styles-paginas.css, então repetimos aqui o mesmo padrão .metodo-steps/.metodo-step
   usado nas páginas internas (base do .num-block já vem de styles-v3.css, compartilhada por todo o site). */
.metodo-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; margin-top: 56px; list-style: none; }
.metodo-step { border-top: 1px solid var(--line); padding-top: 24px; }
.metodo-step .num-block { --step-size: 38px; font-size: 18px; }
.metodo-step h3 { font-size: 19px; margin: 18px 0 8px; }
.metodo-step p { color: var(--text-muted); font-size: 15px; }

/* ---------- Bloco "bastidores" da home (24/09/2026): O que você vê × o que fazemos por trás ---------- */
.bastidores { display: grid; grid-template-columns: 1fr 1fr; margin-top: 40px; border: 1px solid var(--line); }
.bastidores-col { padding: 32px 36px; }
.bastidores-vc { background: var(--bg-alt); }
.bastidores-vc p { color: var(--text-muted); font-size: 16px; }
.bastidores-nos { background: var(--surface-inverse); color: var(--text-inverse); }
.bastidores-nos .eyebrow { color: var(--accent-on-dark); }
.bastidores-nos ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 10px; color: var(--text-inverse-muted); font-size: 15px; }
.bastidores-nos strong { color: var(--paper-100); }
.bastidores h3 { font-size: 17px; margin-bottom: 4px; }

@media (max-width: 860px) {
  .metodo-steps, .bastidores { grid-template-columns: 1fr; }
}
/* Home enxuta (25/09/2026): links para o passo a passo de cada serviço, abaixo do quadro "você vê × por trás" */
.bastidores-mais { margin-top: 24px; font-size: 15px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.bastidores-mais .link-arrow { font-weight: 600; }
/* No computador o mapa fica preso ao topo da coluna. Antes ele era centralizado e, enquanto a
   fonte do título carregava (substituta mais larga → texto 704 px em vez de 574 px), descia 24 px e voltava: CLS 0,159. */
@media (min-width: 1100px) { .hero .causal-wrap { align-self: start; } }
/* Fonte substituta com o MESMO tamanho da Source Serif 4. Enquanto a fonte real baixa, o
   navegador usava Georgia, ~20% mais larga no negrito: o título quebrava em mais linhas e a página "pulava" ao trocar.
   size-adjust medido no Chrome (largura Source Serif 4 ÷ Georgia): 400 = 91,6% · 600–800 ≈ 81,3%.
   Teste: bloco do topo com a substituta = 574 px, igual à fonte real (antes 704 px). */
@font-face { font-family: "SS4 Fallback"; src: local("Georgia"); font-weight: 400 500; size-adjust: 91.6%; }
@font-face { font-family: "SS4 Fallback"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 600 900; size-adjust: 81.3%; }
:root { --font-display: 'Source Serif 4', "SS4 Fallback", Georgia, 'Times New Roman', serif; }

/* =========================================================================
   Home: termo explicativo no título, bloco das duas buscas, vitrine em 3 blocos e casos.
   Só reaproveita as cores, fontes e componentes que já existem.
   ========================================================================= */

/* Título maior em texto: tamanho ajustado para a frase nova */
.hero h1.h1-ia { font-size: clamp(32px, 3.5vw, 46px); line-height: 1.14; max-width: 24ch; }

/* Termo "respostas das IAs": botão com sublinhado pontilhado e um "?" — abre no toque, no clique e no teclado */
.termo {
  font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  text-decoration: underline dotted var(--brand); text-decoration-thickness: 0.07em; text-underline-offset: 0.14em;
}
.termo::after {
  content: "?"; content: "?" / "";
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7em; height: 1.7em; margin-left: 0.25em; vertical-align: 1.05em;
  border-radius: 50%; background: var(--ink-900); color: var(--paper-100);
  font-family: var(--font-body); font-size: clamp(11px, 0.34em, 16px); font-weight: 700; line-height: 1; text-decoration: none;
}
.termo:hover { text-decoration-style: solid; }
.termo[aria-expanded="true"]::after { background: var(--action); }
.termo-painel {
  margin-top: 22px; max-width: 56ch; background: #fff; border: 1px solid var(--line);
  border-left: 4px solid var(--brand); padding: 18px 20px 16px;
}
.termo-painel p { font-size: 16px; color: var(--text); }
.termo-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 12px; }
.termo-acoes .link-arrow { font-weight: 600; }
.termo-fechar {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text); background: none;
  border: 1.5px solid var(--ink-900); padding: 0 16px; min-height: 44px; cursor: pointer;
}
.termo-fechar:hover { background: var(--ink-900); color: var(--paper-100); }

.hero-actions { align-items: flex-start; }
.hero-cta-bloco { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hero-mini { font-size: 14px; color: var(--text-muted); }
@media (max-width: 560px) { .hero-cta-bloco, .hero-cta-bloco .btn { width: 100%; align-self: stretch; } }
.hero-proof { max-width: 580px; }
.hero-proof .proof-num small {
  display: block; font-family: var(--font-body); font-size: 11px; font-weight: 600; line-height: 1;
  letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 5px;
}

/* Duas buscas: reaproveita o quadro "você vê × por trás" (duas colunas) */
#duas-buscas { padding-top: 0; scroll-margin-top: 96px; }
#duas-buscas h2 { max-width: 34ch; }
.duas-buscas { margin-top: 36px; }
.duas-buscas .bastidores-col p + p { margin-top: 10px; }
.duas-buscas h3 { font-size: 22px; margin-bottom: 10px; }
.duas-buscas .bastidores-nos p { color: var(--text-inverse-muted); font-size: 16px; }
.duas-buscas .bastidores-col { display: flex; flex-direction: column; }
.duas-buscas .bastidores-col .busca-exemplo {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--stone-300);
  font-family: var(--font-display); font-size: 19px; font-style: italic; color: var(--text);
}
.duas-buscas .bastidores-col > p:nth-last-child(2) { margin-bottom: 20px; }
.busca-exemplo span {
  display: block; margin-bottom: 4px; font-family: var(--font-body); font-size: 12px; font-style: normal; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--action);
}
.duas-buscas .bastidores-nos .busca-exemplo { border-top-color: rgba(246, 244, 238, 0.25); color: var(--paper-100); }
.bastidores-nos .busca-exemplo span { color: var(--accent-on-dark); }

#por-que-existimos .section-sub { max-width: 62ch; }
#por-que-existimos .link-arrow { font-weight: 600; white-space: nowrap; }

/* Vitrine em 3 blocos */
.services .service-wide { grid-column: 1 / -1; }
.service:not(.service-featured) .tag {
  align-self: flex-start; display: inline-block; background: var(--ink-900); color: var(--paper-100);
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 10px;
}
.service-wide h3 { font-size: clamp(24px, 2.6vw, 32px); margin: 14px 0 8px; letter-spacing: -0.01em; }
.service-start { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 32px; align-items: center; }
.service-acao { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.service-mini { font-size: 14px; color: var(--text-muted); }
.service-featured p + p { margin-top: 12px; }
.seo-proof .big { font-size: clamp(48px, 5.5vw, 76px); }
.seo-proof .big .pre {
  display: block; margin-bottom: 8px; font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.2;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-inverse-muted);
}
.service-itens { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 6px; }
.service-itens li { border-top: 1px solid var(--stone-300); padding-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.service-itens strong { font-family: var(--font-display); font-size: 18px; line-height: 1.25; }
.service-itens span { color: var(--text-muted); font-size: 15px; }
.service-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.service-links .link-arrow { padding-top: 0; font-weight: 600; }

/* Casos: três cartões */
.cases-3 { grid-template-columns: repeat(3, 1fr); }
.cases-3 .case { padding: 36px 28px; display: flex; flex-direction: column; }
.cases-3 .case .stat { flex-wrap: wrap; row-gap: 4px; }
.cases-3 .case .link-arrow { margin-top: auto; padding-top: 18px; color: var(--accent-on-dark); font-weight: 600; }
.cases-3 .case p + p { margin-top: 12px; }
.case .stat b.longo { font-size: 34px; }
.case-aviso {
  margin-top: 22px; max-width: 74ch; font-size: 15px; color: var(--text-inverse-muted);
  border-left: 3px solid var(--accent-on-dark); padding-left: 14px;
}
.case-aviso strong { color: var(--paper-100); }
.nota-caso { margin-top: 28px; padding: 24px 28px; border: 1px solid rgba(240, 138, 98, 0.55); color: var(--text-inverse-muted); }
.nota-caso strong { display: block; margin-bottom: 6px; font-family: var(--font-display); font-size: 22px; line-height: 1.25; color: var(--paper-100); }
.nota-caso p { font-size: 16px; }

@media (max-width: 1024px) {
  .cases-3 { grid-template-columns: repeat(2, 1fr); }
  .cases-3 .case:last-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .service-start, .service-itens, .cases-3 { grid-template-columns: 1fr; }
  .cases-3 .case:last-child { grid-column: auto; }
}
@media (max-width: 400px) {
  .hero h1.h1-ia { font-size: 31px; }
  .case .stat b.longo { font-size: 30px; }
}

/* Bloco do fundador (v4d, 13/10/2026): monograma (reusa .num-block) até existir foto; "Fale com o Daniel" no topo
   (criado por v3_1.js só quando CONFIG.WHATSAPP_NUMERO existe). */
.fundador {
  display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center;
  margin-top: 40px; padding: 28px 32px; max-width: 720px;
  border: 1px solid var(--line); background: var(--bg-alt);
}
.fundador-foto { width: 96px; height: 96px; }
.fundador-foto .num-block { --step-size: 96px; font-size: 40px; padding-bottom: 0; }
.fundador-foto img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 6px; }
.fundador-nome { font-size: 24px; line-height: 1.2; margin: 0; }
.fundador-papel { margin: 2px 0 12px; font-size: 15px; font-weight: 600; color: var(--text-muted); }
.fundador-texto p + p { margin-top: 8px; }
.fundador-texto .fundador-direto { margin-top: 12px; font-weight: 600; color: var(--action); }
@media (max-width: 560px) {
  .fundador { grid-template-columns: 1fr; gap: 18px; padding: 24px 20px; }
}
.fale-daniel {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 8px 4px; min-height: 44px;
  font-size: 15px; font-weight: 600; white-space: nowrap; color: var(--action);
  border-bottom: 2px solid transparent; transition: border-color 0.3s var(--ease);
}
.fale-daniel:hover { border-color: currentColor; }
.fale-daniel .i { width: 20px; height: 20px; }
header.site .wrap.com-fale nav.main { margin-left: auto; }
@media (max-width: 400px) {
  .fale-daniel { font-size: 14px; gap: 6px; }
  .fale-daniel .i { width: 18px; height: 18px; }
}
/* v4f (13/10/2026): com o número ligado, o menu desce uma linha entre 961 e 1150 px para o logo não encolher */
@media (min-width: 961px) and (max-width: 1150px) {
  header.site .wrap.com-fale { flex-wrap: wrap; height: auto; padding-top: 12px; row-gap: 2px; }
  header.site .wrap.com-fale nav.main {
    order: 3; width: 100%; margin-left: 0; gap: 26px; overflow-x: auto;
    padding: 2px 0 10px; font-size: 14.5px; scrollbar-width: none;
  }
  header.site .wrap.com-fale nav.main::-webkit-scrollbar { display: none; }
}
@media (max-width: 400px) {
  header.site .wrap.com-fale { gap: 12px; }
  .fale-daniel { padding-left: 0; padding-right: 0; }
}