@charset "UTF-8";

/* LADO A LADO segue o mesmo vocabulário da prévia aprovada: section-intro,
   duel-card e cards-cinza. O componente continua usando os seletores antigos
   em paralelo para não romper tracking nem a projeção da API. */
.lado-a-lado{color:var(--ink)}
.lado-a-lado .duels-intro{max-width:940px;margin-bottom:var(--space-intro-content)}
.lado-a-lado .duels-intro>p:not(.eyebrow){max-width:730px}
.lado-a-lado .duels-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.lado-a-lado .duel-card{--duel-model-font-size:clamp(1rem,1.6vw,1.3125rem)}
.lado-a-lado .duel-card{position:relative;display:flex;min-width:0;min-height:328px;flex-direction:column;overflow:hidden;padding:26px 22px 21px;border:1px solid #f8f8f8;border-radius:18px;background:#f8f8f8;color:var(--ink)}
.lado-a-lado h3.duel-topic{display:block;min-height:30px;margin:0 0 8px;color:#626870;font-size:10px;font-weight:740;letter-spacing:.15em;line-height:1.5;text-transform:uppercase;white-space:nowrap}
.lado-a-lado .duel-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:start;isolation:isolate;min-height:193px;margin:0 -12px 13px}
.lado-a-lado .duel-side{position:relative;display:grid;grid-template-rows:132px auto;min-width:0;height:auto}
.lado-a-lado .duel-side:before{position:absolute;top:17px;left:7%;z-index:0;width:86%;height:99px;border-radius:8px;background:var(--duel-side-bg);content:"";transform:skewY(-10deg)}
.lado-a-lado .duel-side-1:before{transform:skewY(10deg)}
.lado-a-lado .duel-photo{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;height:132px;min-width:0;overflow:visible;background:transparent;border:0;border-radius:0}
.lado-a-lado .duel-side img{position:relative;z-index:1;width:110%;max-width:110%;height:105px;object-fit:contain;filter:none;mix-blend-mode:normal}
.lado-a-lado .duel-side-1 img{transform:scaleX(-1)}
.lado-a-lado .duel-name{position:relative;z-index:1;display:block;min-width:0;line-height:1.12;text-align:left}
.lado-a-lado .duel-side-0 .duel-name{padding-left:12px;padding-right:6px}
.lado-a-lado .duel-side-1 .duel-name{padding-right:12px;padding-left:6px}
.lado-a-lado .duel-side-1 .duel-name{text-align:right}
.lado-a-lado .duel-brand{display:block;margin:0 0 8px;color:#646b73;font-size:10px;font-weight:650;letter-spacing:.03em;line-height:1.15;text-transform:uppercase;white-space:nowrap}
.lado-a-lado .duel-model{display:block;min-width:0;margin:0;color:var(--ink);font-size:var(--duel-model-font-size);font-weight:750;letter-spacing:-.035em;line-height:1.12;white-space:nowrap;overflow:visible}
.lado-a-lado .duel-vs-flat{position:absolute;top:66px;left:50%;z-index:5;display:block;width:49px;height:49px;overflow:visible;pointer-events:none;transform:translate(-50%,-50%) rotate(-8deg);filter:none}
.lado-a-lado .duel-link{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:auto;padding:14px 0 0;border-top:0;color:var(--duel-link-color,#075fcb);font-size:15px;line-height:1.35}
.lado-a-lado .duel-link span{color:inherit}
.lado-a-lado .duel-link span,.lado-a-lado .lado-a-lado__compare-link span{font-size:21px;line-height:1}
.lado-a-lado .lado-a-lado__compare-link{display:inline-flex;align-items:center;gap:12px;margin-top:30px;padding:6px 0;color:#075fcb;font-size:15px;font-weight:690;line-height:1.35}
.lado-a-lado .lado-a-lado__compare-link:hover,.lado-a-lado .lado-a-lado__card-cta:hover{text-decoration:underline;text-underline-offset:5px}

@media(max-width:1060px){
  .lado-a-lado .duels-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
}

@media(max-width:700px){
  .lado-a-lado .duels-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .lado-a-lado .lado-a-lado__card--desktop-only{display:none}
  .lado-a-lado .duel-card{min-height:0;padding:23px 22px 18px;border-radius:18px}
  .lado-a-lado h3.duel-topic{min-height:0;margin-bottom:5px}
  .lado-a-lado .duel-stage{min-height:193px;margin-bottom:12px}
  .lado-a-lado .duel-card{--duel-model-font-size:clamp(.94rem,4.9vw,1.3125rem)}
  .lado-a-lado .lado-a-lado__compare-link{margin-top:30px}
}

@media(max-width:370px){
  .lado-a-lado .duel-card{padding-inline:16px}
  .lado-a-lado .duel-stage{margin-inline:-9px}
  .lado-a-lado .duel-side-0 .duel-name{padding-left:9px}
  .lado-a-lado .duel-side-1 .duel-name{padding-right:9px}
  .lado-a-lado .duel-card{--duel-model-font-size:.9rem}
}

@media(prefers-reduced-motion:reduce){
  .lado-a-lado .lado-a-lado__compare-link,.lado-a-lado .lado-a-lado__card-cta{text-decoration:none}
}

/* Desktop: largura útil, imagens proporcionais e altura só do conteúdo. */
/* Ampliação aprovada do VS principal é carregada antes deste complemento. */
@media(min-width:701px){
  .lado-a-lado.section-shell,
  .compare-page-section ~ .lado-a-lado.section-shell,
  .compare-page-section[data-product-count="0"] ~ .lado-a-lado.section-shell{--duels-edge:32px;width:calc(100vw - 2 * var(--duels-edge));max-width:none;margin-left:calc(50% - 50vw + var(--duels-edge));margin-right:0}
  .lado-a-lado .duel-card{container-type:inline-size;aspect-ratio:auto;min-height:0}
  .lado-a-lado .duel-stage{min-height:0}
  .lado-a-lado .duel-side{grid-template-rows:39.2857cqw auto}
  .lado-a-lado .duel-side::before{top:5.0595cqw;height:29.4643cqw}
  .lado-a-lado .duel-photo{height:39.2857cqw}
  .lado-a-lado .duel-side img{height:31.25cqw}
  .lado-a-lado .duel-vs-flat{top:19.6429cqw;width:14.5833cqw;height:14.5833cqw}
}
@media(min-width:1061px){.lado-a-lado.section-shell,
  .compare-page-section ~ .lado-a-lado.section-shell,
  .compare-page-section[data-product-count="0"] ~ .lado-a-lado.section-shell{--duels-edge:46px}}

/* Complemento 13:36: cards mobile usam toda a largura útil da tela. */
@media(max-width:700px){
  .lado-a-lado.section-shell,
  .compare-page-section ~ .lado-a-lado.section-shell,
  .compare-page-section[data-product-count="0"] ~ .lado-a-lado.section-shell{
    width:calc(100vw - 40px);max-width:none;margin-left:calc(50% - 50vw + 20px);margin-right:0;
  }
  .lado-a-lado .duels-grid{width:100%;max-width:none}
}

/* 14/10, 01:27 — aprovado na home e no COMPARE vazio.
   O título principal e a introdução mantêm o comportamento original. */
.lado-a-lado .lado-a-lado__compare-action{
  display:flex;justify-content:flex-start;margin-top:30px;
}
.lado-a-lado .lado-a-lado__compare-link.button{
  gap:16px;padding:15px 26px;margin:0;max-width:100%;
  background:var(--blue);color:#fff;font-size:1rem;font-weight:680;
  line-height:normal;text-align:center;text-decoration:none;
}
.lado-a-lado .lado-a-lado__compare-link.button span{
  flex:none;font-size:inherit;line-height:normal;
}
.lado-a-lado .lado-a-lado__compare-link.button:hover{
  background:#0755c4;text-decoration:none;
}
@media(max-width:700px){
  .lado-a-lado .lado-a-lado__compare-link.button{width:100%}
}
@media(min-width:1061px){
  /* Container do próprio card; referência: 387,33px úteis em 1440px. */
  .lado-a-lado h3.lado-a-lado__reason,
  .lado-a-lado .lado-a-lado__brand{
    font-size:clamp(.625rem,2.581756cqw,1.5rem);
  }
  .lado-a-lado .duel-card{
    --duel-model-font-size:max(clamp(1rem,1.6vw,1.3125rem),clamp(1rem,5.421687cqw,3.15rem));
  }
  .lado-a-lado .lado-a-lado__card-cta{
    font-size:clamp(.9375rem,3.872633cqw,2.25rem);
  }
  .lado-a-lado .lado-a-lado__card-cta span{
    font-size:clamp(1.3125rem,5.421687cqw,3.15rem);
  }
}

/* 14/10, 04:35 — Respiro nomes → CTA aprovado na home e no COMPARE vazio. */
/* Desktop/tablet: 13px após o stage + 14px antes do CTA = 27px → 54px. */
.lado-a-lado .duel-link{padding-top:41px}
@media(max-width:700px){
  /* 14/10, 05:01 — aprovado: sem sobra do palco abaixo dos nomes;
     margem de 12px + padding de 42px = intervalo de 54px, como no desktop. */
  .lado-a-lado .duel-stage{min-height:0}
  .lado-a-lado .duel-link{padding-top:42px}
}

/* 14/10, 06:35 — aprovado: laterais textuais alinhadas à arte e gaps expansíveis. */
.lado-a-lado h3.duel-topic,
.lado-a-lado .duel-link{margin-inline:calc(3.5% - 11.16px)}
.lado-a-lado .duel-link{width:auto}
.lado-a-lado .duel-side-0 .duel-name{padding-left:7%}
.lado-a-lado .duel-side-1 .duel-name{padding-right:7%}
@media(max-width:370px){
  .lado-a-lado h3.duel-topic,
  .lado-a-lado .duel-link{margin-inline:calc(3.5% - 8.37px)}
}
@media(min-width:1061px){
  .lado-a-lado .duels-grid{gap:clamp(24px,calc((100vw - 92px)*24/1348),57.6px)}
}
/* Mesmo fundo e contorno dos cards de produto; seção permanece branca. */
.lado-a-lado .duel-card{background:#f8f8f8;border-color:#f2f3f4}

/* 16/10,00:54 — placeholders aprovados; não são produtos/pares do catálogo. */
.lado-a-lado .duel-placeholder{position:relative;display:flex;min-width:0;min-height:328px;flex-direction:column;overflow:hidden;padding:26px 22px 21px;border:1px solid #f2f3f4;border-radius:18px;background:#f8f8f8;color:var(--ink)}
.lado-a-lado .duel-placeholder[hidden],
.lado-a-lado .lado-a-lado__compare-action[hidden]{display:none}
.lado-a-lado .duel-placeholder .placeholder-add{width:14.790731cqw;height:14.790731cqw;max-width:none;max-height:none;flex:none;color:var(--ink);overflow:visible}
.lado-a-lado .lado-a-lado__placeholder-cta:hover{text-decoration:underline;text-underline-offset:5px}
.lado-a-lado .duel-placeholder button.duel-link{appearance:none;background:none;border:0;font-family:inherit;text-align:left;cursor:pointer}
@media(min-width:701px){
  .lado-a-lado .duel-placeholder{container-type:inline-size;aspect-ratio:auto;min-height:0}
}
@media(min-width:1061px){
  .lado-a-lado h3.duel-placeholder-topic{font-size:clamp(.625rem,2.581756cqw,1.5rem)}
  .lado-a-lado .lado-a-lado__placeholder-cta{font-size:clamp(.9375rem,3.872633cqw,2.25rem)}
  .lado-a-lado .lado-a-lado__placeholder-cta span{font-size:clamp(1.3125rem,5.421687cqw,3.15rem)}
}

/* 16/10, 09:27 — janela pessoal aprovada; editoriais e COMPARE não são paginados. */
.lado-a-lado[data-discover-pagination="true"] [data-discover-page-hidden]{display:none!important}
.discover-comparisons-controls{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:32px}
.lado-a-lado .discover-comparisons-controls .lado-a-lado__compare-action{justify-content:center;align-self:stretch;margin-top:0}
.discover-comparisons-count{margin:0;color:#626870;font-size:14px;line-height:1.4;text-align:center}
.discover-load-comparisons.button{display:flex;align-items:center;justify-content:center;min-width:260px;max-width:100%;margin:0;padding:15px 24px;font-size:16px;font-weight:690;line-height:1.2;cursor:pointer}
.discover-manage-comparisons{display:inline-flex;align-items:center;justify-content:center;gap:12px;margin:0;padding:0;border:0;background:none;font:inherit;font-size:16px;font-weight:690;line-height:1.4;color:#17191b;cursor:pointer;text-decoration:none}
.discover-manage-comparisons span{font-size:22px;line-height:1}
.discover-manage-comparisons:hover{color:var(--blue,#0668e8)}
.discover-manage-comparisons:focus-visible{outline:2px solid var(--blue,#0668e8);outline-offset:4px}
@media(max-width:700px){.discover-load-comparisons.button{width:100%;min-width:0}.discover-manage-comparisons{font-size:15px}.discover-comparisons-controls{gap:20px;margin-top:28px}}