/* ============================================================================
   Porto di Vino — home nova (handoff "Nova Home", Home 1, Figma 1920px).

   Os tamanhos são max(mínimo, valor do Figma × --e). --e é FIXO por faixa de
   largura (26/10/2026: antes era vw, que anulava o zoom do navegador — a janela
   "alargava" e tudo crescia de volta). Dentro de cada faixa o zoom funciona como
   no resto do site. Tudo fica sob .pdv-home para não vazar. Header e rodapé
   continuam no header.master.
   ========================================================================= */

:root {
    --ph-vinho: #620205;
    --ph-vermelho: #BE2128;
    --ph-vermelho-escuro: #990002;
    --ph-cta: #FF001E;
    --ph-creme: #F5F3E6;
    --ph-laranja: #F38300;
}

/* A home ocupa a largura toda da janela, saindo do container-xxl do master. */
body:has(.pdv-home) { overflow-x: hidden; }

/* A faixa de "área" do header.master (imagem por página) não existe no design da home:
   o hero vem logo abaixo do menu. Some a imagem e a altura, mas fica o margin-top,
   que no mobile é o espaço do menu fixo. */
body:has(.pdv-home) .header { padding-top: 0 !important; background: none; margin-bottom: 0 !important; }
body:has(.pdv-home) .header .conteudo { display: none; }

/* Escala da faixa = largura onde a faixa começa ÷ 1920 (o layout sempre cabe). */
.pdv-home { --e: 0.3; }
@media (min-width: 768px)  { .pdv-home { --e: 0.4; } }
@media (min-width: 992px)  { .pdv-home { --e: 0.517; } }
@media (min-width: 1200px) { .pdv-home { --e: 0.625; } }
@media (min-width: 1366px) { .pdv-home { --e: 0.711; } }
@media (min-width: 1440px) { .pdv-home { --e: 0.75; } }
@media (min-width: 1600px) { .pdv-home { --e: 0.833; } }
@media (min-width: 1680px) { .pdv-home { --e: 0.875; } }
@media (min-width: 1920px) { .pdv-home { --e: 1; } }

.pdv-home {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    font-family: Montserrat, -apple-system, "Helvetica Neue", Arial, sans-serif;
    color: #000;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

/* site.css tem "* { font-family: montserrat-medium; font-size: 14px }": sem isto todo
   <strong>/<span> sem classe própria cai para 14px. As regras abaixo (mesma
   especificidade, declaradas depois) seguem valendo. */
.pdv-home * { box-sizing: border-box; font-family: inherit; font-size: inherit; }
.pdv-home h2, .pdv-home h3, .pdv-home p { font-family: inherit; color: inherit; }
.pdv-home a { text-decoration: none; }
.pdv-home button { font-family: inherit; }

.pdv-home > section,
.pdv-home > .ph-todos { max-width: 1920px; margin-left: auto; margin-right: auto; }
.pdv-home > section.ph-bleed { max-width: none; }

.ph-titulo { margin: 0; font-weight: 400; font-size: max(28px, calc(75.28px * var(--e))); line-height: 1.05; text-align: center; text-wrap: balance; }
.ph-titulo strong { font-weight: 700; }

/* Painéis das abas: só o ativo aparece. */
.pdv-home [data-painel] { display: none; }
.pdv-home [data-painel].is-ativo { display: block; }

/* ------------------------------------------------------------------ Hero */
.ph-hero { position: relative; background: var(--ph-creme); }
/* Acima de 1920px o banner para de crescer (a arte é 1920 de largura) e fica centralizado no creme. */
.ph-hero #divBanner { max-width: 1920px; margin: 0 auto; }
.ph-hero .carousel-item img { display: block; width: 100%; height: auto; }

.ph-hero__seta {
    position: absolute; bottom: max(16px, calc(30px * var(--e))); z-index: 3;
    width: max(32px, calc(46px * var(--e))); height: max(32px, calc(46px * var(--e)));
    border: 0; padding: 0; border-radius: 50%; cursor: pointer;
    background: url('/img/home/arrow.png') center / contain no-repeat;
}
.ph-hero__seta--prev { left: max(12px, calc(60px * var(--e))); transform: scaleX(-1); }
.ph-hero__seta--next { right: max(12px, calc(60px * var(--e))); }

.ph-hero .ph-hero__dots { bottom: max(24px, calc(40px * var(--e))); margin: 0; gap: 10px; }
.ph-hero .ph-hero__dots [data-bs-target] {
    width: 10px; height: 10px; margin: 0; padding: 0;
    border: 1px solid var(--ph-vinho); border-radius: 50%;
    background: transparent; opacity: 1; text-indent: 0;
}
.ph-hero .ph-hero__dots .active { background: var(--ph-vinho); }

/* -------------------------------------------------------- Escolha o plano */
.ph-planos {
    padding: max(40px, calc(72px * var(--e))) max(16px, calc(222px * var(--e))) max(48px, calc(64px * var(--e)));
    display: flex; flex-direction: column; align-items: center; gap: max(24px, calc(40px * var(--e)));
}
.ph-planos__caixa-wrap { width: 100%; position: relative; }

.ph-planos__abas {
    display: flex; flex-wrap: wrap; justify-content: center; gap: max(8px, calc(16px * var(--e)));
    position: relative; z-index: 1; padding: 0 max(0px, calc(60px * var(--e)));
}
.ph-planos__aba {
    flex: 1 1 140px; max-width: 280px; min-height: max(44px, calc(60px * var(--e)));
    border-radius: 8px; border: 2px solid var(--cor); background: #fff; color: #000;
    font-weight: 400; font-size: max(11px, calc(22.36px * var(--e))); line-height: 0.95; text-transform: uppercase;
    cursor: pointer; padding: 6px 10px;
}
.ph-planos__aba.is-ativo { background: var(--cor); color: #fff; }

.ph-planos__caixa {
    margin-top: calc(-1 * max(22px, calc(30px * var(--e))));
    border: 1px solid #000; border-radius: max(10px, calc(20px * var(--e)));
    padding: max(40px, calc(64px * var(--e))) max(18px, calc(58px * var(--e))) max(24px, calc(44px * var(--e)));
}
.pdv-home .ph-planos__painel.is-ativo {
    display: flex; flex-wrap: wrap; gap: max(20px, calc(60px * var(--e))); align-items: center; justify-content: space-between;
}
.ph-planos__info { flex: 1 1 360px; display: flex; flex-direction: column; gap: max(10px, calc(20px * var(--e))); }
.ph-planos__info h3 { margin: 0; font-weight: 500; font-size: max(20px, calc(36.74px * var(--e))); }
.ph-planos__info p { margin: 0; font-weight: 300; font-size: max(16px, calc(30px * var(--e))); line-height: 0.94; max-width: 620px; text-wrap: pretty; }
/* Preço: "Valor das garrafas" riscado + caixa "Valor Assinante" na cor do plano (referência do Afonso, 20/10). */
.ph-planos__preco { display: flex; flex-direction: column; align-items: flex-start; gap: max(6px, calc(12px * var(--e))); margin-top: 6px; }
.ph-planos__garrafas { font-weight: 400; font-size: max(16px, calc(26px * var(--e))); line-height: 1.1; }
.ph-planos__garrafas s { text-decoration-thickness: 1.5px; }
.ph-planos__assinante {
    border: 2px solid var(--cor); padding: max(6px, calc(10px * var(--e))) max(12px, calc(18px * var(--e)));
    font-weight: 700; font-size: max(18px, calc(31px * var(--e))); line-height: 1.1;
}

.ph-planos__lado { flex: 1 1 360px; max-width: 620px; display: flex; flex-direction: column; gap: max(14px, calc(22px * var(--e))); }
.ph-planos__beneficios {
    background: rgba(245, 243, 230, 0.76); border-radius: max(10px, calc(20px * var(--e)));
    padding: max(16px, calc(30px * var(--e))) max(16px, calc(36px * var(--e)));
    display: flex; flex-direction: column; gap: max(10px, calc(18px * var(--e)));
    font-size: max(13px, calc(24.78px * var(--e))); line-height: 1.15;
}
.ph-planos__beneficios strong { font-weight: 700; }
.ph-planos__beneficios span { font-weight: 400; font-size: 0.86em; }
.ph-planos__cta {
    display: flex; align-items: center; justify-content: center; min-height: max(44px, calc(60px * var(--e)));
    border-radius: 999px; background: var(--cor); color: #fff;
    font-weight: 500; font-size: max(15px, calc(24px * var(--e))); text-transform: uppercase;
}
.ph-planos__cta:hover { opacity: 0.88; color: #fff; }
.ph-planos__ctas { display: flex; flex-wrap: wrap; gap: max(10px, calc(20px * var(--e))); }
.ph-planos__ctas .ph-planos__cta { flex: 1 1 180px; }

/* ------------------------------------------- Banners Sommelier / Eventos */
/* --sobra: o que passa de 1920px, dividido pelos dois lados (0 até 1920). O fundo creme ocupa a
   largura toda; imagem, degradê e texto ficam dentro dos 1920px centrais (como no protótipo). */
.ph-banner { position: relative; background: var(--ph-creme); overflow: hidden; display: flex; align-items: center; --sobra: max(0px, calc((100% - 1920px) / 2)); }
.ph-banner .ph-banner__img { right: var(--sobra); }
.ph-banner::after { left: var(--sobra) !important; right: var(--sobra) !important; }
.ph-banner .ph-banner__texto { margin-left: var(--sobra); }
.ph-banner--sommelier { min-height: max(380px, calc(512px * var(--e))); }
.ph-banner--eventos { min-height: max(380px, calc(489px * var(--e))); }

.ph-banner__img { position: absolute; top: 0; bottom: 0; right: 0; width: min(100%, 1100px); background-size: cover; background-position: center right; background-repeat: no-repeat; }
.ph-banner::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--ph-creme) 0%, var(--ph-creme) 42%, rgba(245, 243, 230, 0) 66%);
}
.ph-banner__texto {
    position: relative; z-index: 1;
    padding: max(40px, calc(75px * var(--e))) max(24px, calc(140px * var(--e)));
    display: flex; flex-direction: column; gap: max(24px, calc(50px * var(--e))); max-width: 920px;
}
.ph-banner--sommelier h2 { margin: 0; font-weight: 400; font-size: max(32px, calc(65.17px * var(--e))); line-height: 1.08; text-wrap: balance; }
.ph-banner--sommelier h2 strong { font-weight: 700; }
.ph-banner--eventos .ph-banner__texto { gap: max(18px, calc(30px * var(--e))); padding-left: max(24px, calc(134px * var(--e))); padding-right: max(24px, calc(134px * var(--e))); }
.ph-banner--eventos h2 { margin: 0; font-size: max(28px, calc(61px * var(--e))); line-height: 0.95; text-transform: uppercase; }
.ph-banner--eventos h2 span { display: block; font-weight: 400; }
.ph-banner--eventos h2 strong { display: block; font-weight: 700; }
.ph-banner--eventos p { margin: 0; font-weight: 400; font-size: max(16px, calc(31px * var(--e))); line-height: 1.05; max-width: 720px; text-wrap: pretty; }

.ph-banner__btn {
    align-self: flex-start; display: flex; align-items: center; gap: max(10px, calc(14px * var(--e)));
    background: var(--ph-cta); color: #fff; border-radius: 999px;
    padding: max(10px, calc(17px * var(--e))) max(36px, calc(78px * var(--e)));
    font-weight: 800; font-size: max(18px, calc(36.9px * var(--e))); line-height: 1; text-transform: uppercase;
}
.ph-banner__btn--whats { padding: max(10px, calc(14.7px * var(--e))) max(22px, calc(36.5px * var(--e))); font-size: max(15px, calc(29.39px * var(--e))); line-height: 0.87; }
.ph-banner__btn--whats img { width: max(34px, calc(60.23px * var(--e))); height: auto; }
.ph-banner__btn:hover { background: var(--ph-vermelho); color: #fff; }

/* ------------------------------------------------------- Vitrine com abas */
.ph-vitrine {
    padding: max(40px, calc(75px * var(--e))) max(16px, calc(140px * var(--e))) max(48px, calc(76px * var(--e)));
    display: flex; flex-direction: column; align-items: center; gap: max(20px, calc(34px * var(--e)));
}
.ph-vitrine__abas {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 40vw), 1fr));
    gap: max(6px, calc(10px * var(--e))); width: 100%; max-width: 1300px;
}
.ph-vitrine__aba {
    min-height: max(40px, calc(75px * var(--e))); border-radius: max(8px, calc(15.31px * var(--e)));
    border: 1px solid var(--ph-vinho); background: #fff; color: #000;
    font-weight: 400; font-size: max(14px, calc(36.74px * var(--e))); line-height: 1; text-transform: uppercase;
    cursor: pointer; padding: 4px 10px;
}
.ph-vitrine__aba.is-ativo { background: var(--ph-vinho); color: #fff; font-weight: 600; }
.ph-vitrine__secao { margin: 0; font-weight: 500; font-size: max(15px, calc(24px * var(--e))); text-align: center; }
.ph-vitrine .ph-painel { width: 100%; }

/* Carrossel horizontal com scroll-snap: 4 cards visíveis (3 no "Vinhos do mês"). */
.ph-carrossel {
    --gap: max(16px, calc(32px * var(--e)));
    display: grid; grid-auto-flow: column;
    grid-auto-columns: max(min(220px, 44vw), calc((100% - 3 * var(--gap)) / 4));
    gap: var(--gap); width: 100%; padding-top: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.ph-carrossel::-webkit-scrollbar { display: none; }
.ph-carrossel--mes {
    --gap: max(12px, calc(24px * var(--e)));
    grid-auto-columns: max(min(200px, 44vw), calc((100% - 2 * var(--gap)) / 3));
    padding-top: 0;
}

/* ------------------------------------------------------- Vinhos do mês */
.ph-mes {
    padding: max(40px, calc(56px * var(--e))) max(16px, calc(121px * var(--e))) max(24px, calc(40px * var(--e)));
    display: flex; flex-wrap: wrap; gap: max(24px, calc(65px * var(--e))); align-items: center;
}
.ph-mes__lado { flex: 1 1 360px; max-width: 726px; display: flex; flex-direction: column; gap: max(16px, calc(32px * var(--e))); }
.ph-mes__abas { display: grid; grid-template-columns: 1fr 1fr; gap: max(6px, calc(10px * var(--e))); }
.ph-mes__aba {
    min-height: max(40px, calc(68px * var(--e))); border-radius: 5px; border: 2px solid var(--cor);
    background: #fff; color: var(--ph-vinho);
    font-weight: 400; font-size: max(14px, calc(32.8px * var(--e))); line-height: 0.95; text-transform: uppercase;
    cursor: pointer; padding: 4px 8px;
}
.ph-mes__aba.is-ativo { background: var(--cor); color: #fff; font-weight: 600; }

.ph-mes__quadro {
    background: var(--ph-vinho); min-height: max(180px, calc(293px * var(--e)));
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: max(20px, calc(43px * var(--e))) max(24px, calc(60px * var(--e)));
}
.pdv-home .ph-mes__titulo.is-ativo {
    display: block; border-left: 2.85px solid #fff; padding-left: max(10px, calc(17px * var(--e)));
    color: #fff; font-size: max(24px, calc(52.09px * var(--e))); line-height: 1; text-transform: uppercase;
}
.ph-mes__titulo strong { font-weight: 600; }
.ph-mes__titulo span { font-weight: 300; }
.ph-mes__titulo:hover { color: #fff; }
.ph-mes__taca {
    width: max(48px, calc(95.74px * var(--e))); aspect-ratio: 95.744 / 207.22; flex-shrink: 0; background: var(--ph-laranja);
    -webkit-mask: url('/img/home/glass.svg') center / contain no-repeat; mask: url('/img/home/glass.svg') center / contain no-repeat;
}
.ph-mes__produtos { flex: 1 1 520px; min-width: 0; }

/* ------------------------------------------------- Mostrar todos */
.ph-todos { display: flex; justify-content: center; padding: max(12px, calc(20px * var(--e))) 16px max(32px, calc(46px * var(--e))); }
.ph-todos a {
    background: var(--ph-cta); color: #fff; border-radius: 75.76px;
    padding: max(12px, calc(17.8px * var(--e))) max(24px, calc(46px * var(--e)));
    font-weight: 700; font-size: max(16px, calc(35.65px * var(--e))); line-height: 1; text-align: center; text-transform: uppercase;
}
.ph-todos a:hover { background: var(--ph-vermelho); color: #fff; }

/* ------------------------------------------------- Dicas e curiosidades */
.ph-dicas {
    padding: 0 max(16px, calc(153px * var(--e))) max(48px, calc(90px * var(--e)));
    display: flex; flex-direction: column; align-items: center; gap: max(24px, calc(60px * var(--e)));
}
.ph-dicas .ph-titulo { font-size: max(32px, calc(70px * var(--e))); line-height: 1; }
.ph-dicas__lista {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(280px, 72vw), 1fr);
    gap: max(16px, calc(30px * var(--e))); width: 100%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.ph-dicas__lista::-webkit-scrollbar { display: none; }
.ph-dica {
    scroll-snap-align: start; background: var(--ph-creme);
    padding: max(16px, calc(19.7px * var(--e))) max(16px, calc(19.7px * var(--e))) max(20px, calc(22px * var(--e)));
    display: flex; flex-direction: column; gap: max(14px, calc(23px * var(--e)));
}
.ph-dica__img { display: block; aspect-ratio: 341.636 / 256; background: #fff center / cover no-repeat; }
.ph-dica__corpo { display: flex; flex-direction: column; gap: max(10px, calc(15px * var(--e))); padding: 0 max(4px, calc(10px * var(--e))); flex: 1; }
.ph-dica__corpo h3 { margin: 0; font-weight: 600; font-size: max(18px, calc(21px * var(--e))); line-height: 0.95; text-transform: lowercase; }
.ph-dica__corpo p { margin: 0; font-weight: 300; font-size: max(14px, calc(17px * var(--e))); line-height: 1; text-align: justify; flex: 1; }
.ph-dica__btn {
    align-self: flex-start; min-width: min(100%, 223px); text-align: center; margin-top: 6px;
    background: var(--ph-vermelho); color: #fff; border-radius: 98px; padding: max(8px, calc(11px * var(--e))) 20px;
    font-weight: 500; font-size: max(17px, calc(24px * var(--e))); line-height: 1;
}
.ph-dica__btn:hover { background: var(--ph-vinho); color: #fff; }

/* "Ver todas as dicas" (pedido do Afonso 23/10): mesmo desenho do "Mostrar todos os produtos", no vermelho da marca. */
.ph-dicas__todos {
    background: var(--ph-vermelho); color: #fff; border-radius: 75.76px;
    padding: max(12px, calc(17.8px * var(--e))) max(24px, calc(46px * var(--e)));
    font-weight: 700; font-size: max(16px, calc(28px * var(--e))); line-height: 1; text-align: center; text-transform: uppercase;
}
.ph-dicas__todos:hover { background: var(--ph-vinho); color: #fff; }

/* ------------------------------------------------- Card de produto da home */
.pdv-hcard {
    scroll-snap-align: start; position: relative;
    display: flex; flex-direction: column; align-items: center; gap: max(8px, calc(14px * var(--e)));
    text-align: center;
}
.pdv-hcard__off {
    position: absolute; top: 0; left: max(0px, calc(20px * var(--e))); z-index: 1;
    background: var(--ph-cta); color: var(--ph-creme); text-align: left;
    font-weight: 800; font-size: max(12px, calc(24.32px * var(--e))); line-height: 0.8;
    padding: 5px 34px 5px 14px; clip-path: polygon(0 0, 100% 0, 78% 50%, 100% 100%, 0 100%);
}
.pdv-hcard__foto { height: max(200px, calc(316px * var(--e))); width: 100%; }
.pdv-hcard__foto a { display: flex; height: 100%; width: 100%; align-items: flex-end; justify-content: center; }
.pdv-hcard__img { max-height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.15)); }

.pdv-hcard__nome {
    margin: 6px 0 0; min-height: 2.2em;
    font-family: inherit; font-weight: 500; font-size: max(12px, calc(20px * var(--e))); line-height: 1.1; text-transform: uppercase;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pdv-hcard__nome a { color: #000; }
.pdv-hcard__nome a:hover { color: var(--ph-vermelho); }

.pdv-hcard__precos { font-weight: 400; font-size: max(14px, calc(25.86px * var(--e))); line-height: 1.1; text-transform: uppercase; }
.pdv-hcard__precos strong { font-weight: 700; }
.pdv-hcard__precos--promo { display: flex; flex-direction: column; align-items: center; gap: 8px; text-transform: none; }
.pdv-hcard__de { font-size: max(14px, calc(31.17px * var(--e))); }
.pdv-hcard__de small { font-size: 0.64em; }
.pdv-hcard__por {
    display: flex; align-items: center; gap: max(8px, calc(18px * var(--e)));
    border: 1px solid #000; padding: max(4px, calc(8px * var(--e))) max(8px, calc(16px * var(--e)));
}
.pdv-hcard__por small { font-size: max(11px, calc(20px * var(--e))); }
.pdv-hcard__por strong { font-weight: 700; font-size: max(16px, calc(32px * var(--e))); color: var(--ph-cta); }

.pdv-hcard__acoes { display: flex; flex-direction: column; gap: max(6px, calc(10px * var(--e))); width: min(100%, 260px); }
.pdv-hbtn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    border: 0; cursor: pointer; color: #fff; border-radius: 49.46px;
    padding: max(6px, calc(10px * var(--e))) 8px;
    font-size: max(10px, calc(16.96px * var(--e))); line-height: 1.1; text-transform: uppercase;
}
.pdv-hbtn--add { background: var(--ph-vermelho); font-weight: 600; }
.pdv-hbtn--add:hover { background: var(--ph-vermelho-escuro); }
.pdv-hbtn--add[disabled] { opacity: 0.5; cursor: default; }
.pdv-hbtn--whats { background: var(--ph-vinho); font-weight: 500; border-radius: 48px; padding: max(5px, calc(9px * var(--e))) 10px; line-height: 1; text-align: left; }
.pdv-hbtn--whats:hover { background: #3C0002; color: #fff; }
.pdv-home .pdv-hbtn--whats { color: #fff; }
.pdv-hbtn__wa {
    width: max(16px, calc(27px * var(--e))); height: max(16px, calc(27px * var(--e))); flex-shrink: 0; background: #fff;
    -webkit-mask: url('/img/home/wa-small.svg') center / contain no-repeat; mask: url('/img/home/wa-small.svg') center / contain no-repeat;
}

/* Cards menores do "Vinhos do mês" */
.ph-carrossel--mes .pdv-hcard { gap: max(6px, calc(12px * var(--e))); }
.ph-carrossel--mes .pdv-hcard__foto { height: max(180px, calc(288px * var(--e))); }
.ph-carrossel--mes .pdv-hcard__nome { font-size: max(11px, calc(18.83px * var(--e))); line-height: 1.05; min-height: 2.1em; }
.ph-carrossel--mes .pdv-hcard__precos { font-weight: 300; font-size: max(12px, calc(19px * var(--e))); }
.ph-carrossel--mes .pdv-hcard__acoes { width: min(100%, 191px); gap: 6px; }
.ph-carrossel--mes .pdv-hbtn { border-radius: 34.8px; font-weight: 600; }
.ph-carrossel--mes .pdv-hbtn--add { background: var(--ph-vermelho-escuro); padding: 8px 6px; font-size: max(9px, calc(11.93px * var(--e))); }
.ph-carrossel--mes .pdv-hbtn--add:hover { background: var(--ph-vinho); }
.ph-carrossel--mes .pdv-hbtn--whats { background: var(--ph-laranja); padding: 4px 6px; font-size: max(9px, calc(12px * var(--e))); text-align: center; }
.ph-carrossel--mes .pdv-hbtn--whats:hover { background: #E27900; }
.ph-carrossel--mes .pdv-hbtn__wa { display: none; }

/* ------------------------------------------------- Mobile */
@media (max-width: 819.98px) {
    .ph-banner__img { opacity: 0.35; }
    .ph-mes__lado, .ph-mes__produtos { flex-basis: 100%; max-width: none; }
}