/* =========================================================================
   LP COLCHÃO 2026
   Carregado automaticamente pelo tema a partir do nome do template.

   Medidas e cores tiradas do próprio render do Figma (frame 140:288, 1440px):
   container de 1240px, fundo #eeeeee, tipografia Khand.
   ========================================================================= */

.lpc {
    --azul:        #287ec1;  /* C_02 — barra de topo, pílula Solteiro, cupom */
    --azul-escuro: #12507d;  /* C_03 — títulos, barra de benefícios, blocos  */
    --azul-medio:  #326ea0;  /* C_01 — rodapé                                */
    --laranja:     #ee7e23;  /* C_12 */
    --teal:        #489291;  /* C_04 */
    --roxo:        #6374b9;  /* C_21 */
    --indigo:      #4c558e;  /* pílula King                                  */
    --uva:         #5f439a;  /* etiqueta Rebouças                            */
    --salmao:      #f47a56;  /* C_15 */
    --amarelo:     #fcbb18;  /* C_11 */
    --lima:        #b3c551;  /* C_08 — círculo do Trissino                   */
    --verde-wa:    #2fad73;  /* C_06 */

    --azul-ciello: #21527c;  /* C_AZUL — títulos de ofertas/favoritos e do formulário */

    --texto:   #373737;
    --suave:   #6f6f6f;
    --campo:   #e5e5e5;      /* fundo dos campos do formulário */
    --fundo:   #eeeeee;
    --fundo-produtos: #e6e7e9;  /* faixa de ofertas e favoritos */
    --trilho:  #e1e3e5;      /* trilho da barra do carrossel */
    --claro:   #f2f2f2;
    --branco:  #ffffff;

    --container: 1240px;
    --raio: 16px;
    --sombra: 0 6px 18px rgba(0, 0, 0, .10);

    background-color: var(--fundo);
    color: var(--texto);
    font-family: 'Khand', sans-serif;
    overflow-x: hidden;
}

.lpc *,
.lpc *::before,
.lpc *::after { box-sizing: border-box; }

.lpc :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, figure) {
    margin: 0;
    padding: 0;
    color: inherit;
}

.lpc :where(ul, ol) { list-style: none; }
.lpc :where(a) { color: inherit; text-decoration: none; }
.lpc :where(img) { display: block; max-width: 100%; height: auto; }

.lpc__container {
    width: 100%;
    max-width: calc(var(--container) + 40px);
    margin-inline: auto;
    padding-inline: 20px;
}

.lpc-secao { padding: 90px 0; }

.lpc-titulo {
    margin: 0 0 22px;
    font-size: 37px;
    font-weight: 700;
    line-height: 1.19;
    color: var(--azul-escuro);
}

.lpc-titulo--centro { text-align: center; }

/* "Pra quem" em laranja dentro do título */
.lpc-titulo em { font-style: normal; color: var(--laranja); }

/* Botões ------------------------------------------------------------------ */

.lpc-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 0 30px;
    border-radius: 999px;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: filter .2s ease, transform .15s ease;
}

.lpc-btn:hover,
.lpc-btn:focus-visible { filter: brightness(.97); transform: translateY(-1px); text-decoration: none; }

.lpc-btn--whats { background-color: var(--verde-wa); color: var(--branco); }
.lpc-btn--whats:hover,
.lpc-btn--whats:focus-visible { color: var(--branco); }

.lpc-btn .lpc-icone { flex-shrink: 0; }

/* -------------------------------------------------------------------------
   BARRA DE TOPO
   ------------------------------------------------------------------------- */

.lpc-topo {
    background-color: var(--azul);
    color: var(--branco);
}

.lpc-topo__interno {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    font-size: 19px;
    font-weight: 500;
}

/* -------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------- */

.lpc-hero {
    position: relative;
    height: 600px;
    color: var(--branco);
}

/* A foto já vem recortada no enquadramento do Figma (2.4:1), então aqui é só
   preencher. */
.lpc-hero__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* O Figma escurece a foto uniformemente em ~23% (medido comparando o render
   com a arte original). */
.lpc-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, .23);
}

.lpc-hero__grade {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 40px;
    align-items: center;
    height: 100%;
}

.lpc-hero__texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    padding: 51px 0 80px;
}

.lpc-hero__logo { display: block; width: 149px; }
.lpc-hero__logo img { width: 100%; }

.lpc-hero__titulo {
    margin: auto 0 19px;
    font-size: 71px;
    font-weight: 700;
    line-height: 1;
    color: var(--branco);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

.lpc-hero__chamada {
    max-width: 520px;
    margin-bottom: 34px;
    font-size: 26px;
    font-weight: 300;
    line-height: 1.31;
    color: var(--branco);
    text-shadow: 0 1px 10px rgba(0, 0, 0, .6), 0 0 26px rgba(0, 0, 0, .35);
}

/* -------------------------------------------------------------------------
   FORMULÁRIO (Contact Form 7 + comportamento do jsform.js do tema)
   ------------------------------------------------------------------------- */

.lpc-hero__form .c-form__box {
    padding: 31px 20px;
    border-radius: var(--raio);
    background-color: var(--claro);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    color: var(--texto);
}

.lpc-hero__form h6 {
    margin: 0 0 27px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    color: var(--azul-ciello);
}

.lpc-hero__form .wpcf7 form > p { margin: 0; }
.lpc-hero__form .hidden-fields-container { display: none; }

.lpc-hero__form fieldset {
    margin: 0 0 8px;
    padding: 0;
    border: 0;
}

.lpc-hero__form fieldset:last-of-type { margin-bottom: 0; }

/* O Contact Form 7 envolve o conteúdo de cada fieldset num <p>: é ele que
   ancora o rótulo sobreposto ao campo. */
.lpc-hero__form fieldset > p { position: relative; margin: 0; }
.lpc-hero__form .wpcf7-form-control-wrap { display: block; }

/* Rótulo dos selects — no design ele fica visível, acima do campo. */
.lpc-hero__form fieldset h6 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.25;
    text-align: left;
    color: var(--texto);
}

.lpc-hero__form input[type="text"],
.lpc-hero__form input[type="email"],
.lpc-hero__form input[type="tel"],
.lpc-hero__form select,
.lpc-hero__form textarea {
    width: 100%;
    min-height: 37px;
    padding: 6px 12px;
    border: 0;
    border-radius: 4px;
    background-color: var(--campo);
    font-family: inherit;
    font-size: 18px;
    line-height: 1.35;
    color: var(--texto);
    appearance: none;
}

.lpc-hero__form textarea { height: 60px; min-height: 60px; resize: vertical; }

.lpc-hero__form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23373737' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.lpc-hero__form input:focus,
.lpc-hero__form select:focus,
.lpc-hero__form textarea:focus {
    outline: 0;
    border-color: var(--azul);
}

/* O CF7 imprime o <label> depois do campo: ele vira o texto dentro do campo. */
.lpc-hero__form fieldset > p > label {
    position: absolute;
    left: 13px;
    top: 6px;
    font-size: 18px;
    line-height: 1.35;
    color: var(--texto);
    pointer-events: none;
    transition: opacity .15s ease;
}

.lpc-hero__form fieldset.focused > p > label { opacity: 0; }

.lpc-hero__form .error:empty { display: none; }

.lpc-hero__form .error {
    margin-top: 3px;
    font-size: 14px;
    line-height: 1.2;
    color: #c0392b;
}

.lpc-hero__form .error-alert input,
.lpc-hero__form .error-alert textarea { border-color: #c0392b; }

.lpc-hero__form .btn {
    display: block;
    width: 100%;
    min-height: 43px;
    margin-top: 0;
    padding: 0 20px;
    border: 0;
    border-radius: 6px;
    background-color: var(--azul);
    font-family: inherit;
    font-size: 22px;
    font-weight: 600;
    color: var(--branco);
    cursor: pointer;
    transition: filter .2s ease;
}

.lpc-hero__form .btn:hover:not([disabled]) { filter: brightness(.93); }
.lpc-hero__form .btn[disabled] { background-color: #bebebe; cursor: not-allowed; }

.lpc-hero__form .wpcf7-spinner { display: block; margin: 8px auto 0; }

.lpc-hero__form .wpcf7-response-output {
    margin: 12px 0 0;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.3;
}

/* -------------------------------------------------------------------------
   BARRA DE BENEFÍCIOS
   ------------------------------------------------------------------------- */

.lpc-beneficios {
    background-color: var(--azul-escuro);
    color: var(--branco);
}

/* No Figma as divisórias caem em 370 / 720 / 1070: quatro colunas iguais
   ocupando a largura toda da tela, com 20px de folga — não o container. */
.lpc-beneficios .lpc__container { max-width: none; }

.lpc-beneficios__lista {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    min-height: 80px;
}

.lpc-beneficios__lista li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 26px;
    font-weight: 500;
    color: #f2f2f2;
}

.lpc-beneficios__lista li + li { border-left: 1px solid rgba(255, 255, 255, .28); }
.lpc-beneficios__lista img { flex-shrink: 0; }

/* -------------------------------------------------------------------------
   PRA QUEM É O COLCHÃO
   ------------------------------------------------------------------------- */

.lpc-praquem { padding: 118px 0 119px; }

.lpc-praquem__grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 610px;
    gap: 69px;
    align-items: center;
}

/* O título ocupa 556px; o parágrafo quebra antes, em 500px. */
.lpc-praquem__texto p {
    max-width: 500px;
    font-size: 21px;
    font-weight: 300;
    line-height: 1.57;
}

.lpc-praquem__foto img {
    width: 100%;
    aspect-ratio: 610 / 473;
    object-fit: cover;
    border-radius: 24px;
}

/* -------------------------------------------------------------------------
   POR QUE COMPRAR
   ------------------------------------------------------------------------- */

.lpc-porque { padding: 17px 0 55px; }

.lpc-porque__grade {
    display: grid;
    grid-template-columns: minmax(0, 648px) minmax(0, 1fr);
    align-items: start;
    gap: 84px;
}

.lpc-porque .lpc-titulo { margin-bottom: 58px; }

/* No Figma a arte das camadas sangra pela esquerda: o corte fica à esquerda e
   a borda direita do desenho é que encosta no texto. */
.lpc-porque__foto img {
    width: 100%;
    aspect-ratio: 648 / 774;
    object-fit: cover;
    object-position: right center;
}

.lpc-porque__conteudo {
    max-width: 640px;
    padding: 35px 20px 0 0;
}

.lpc-porque__lista { display: grid; gap: 50px; padding-left: 21px; }

.lpc-porque__item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; }

.lpc-porque__icone {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--branco);
}

/* Os PNGs do Figma vêm coloridos; no design o glifo é branco sobre o círculo. */
.lpc-porque__icone img { width: 26px; max-height: 26px; object-fit: contain; filter: brightness(0) invert(1); }

.lpc-porque__icone--amarelo { background-color: var(--amarelo); }
.lpc-porque__icone--teal    { background-color: var(--teal); }
.lpc-porque__icone--salmao  { background-color: var(--salmao); }
.lpc-porque__icone--roxo    { background-color: var(--roxo); }

.lpc-porque__item h3 {
    margin: 0 0 16px;
    font-size: 27px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--texto);
}

.lpc-porque__item p {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.2;
}

/* -------------------------------------------------------------------------
   NOITES DE CONFORTO
   ------------------------------------------------------------------------- */

.lpc-noites {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 550px;
    padding: 90px 0;
    background-color: var(--azul-escuro);
    background-position: center;
    background-size: cover;
    color: var(--branco);
}

.lpc-noites__interno { position: relative; z-index: 2; }
.lpc-noites__titulo, .lpc-noites__texto { max-width: 620px; }

.lpc-noites__titulo {
    margin: 0 0 22px;
    font-size: 45px;
    font-weight: 700;
    line-height: 1.12;
    color: var(--branco);
}

/* "com o colchão certo": laranja com contorno branco, como no design. */
.lpc-noites__titulo em {
    display: block;
    font-style: normal;
    font-size: 51px;
    color: var(--laranja);
    -webkit-text-stroke: 12px var(--branco);
    paint-order: stroke fill;
}

.lpc-noites__texto {
    max-width: 570px;
    margin-bottom: 30px;
    font-size: 22px;
    font-weight: 300;
    line-height: 1.18;
    color: var(--branco);
}

/* -------------------------------------------------------------------------
   TAMANHOS
   ------------------------------------------------------------------------- */

.lpc-tamanhos { padding: 0 0 67px; }

.lpc-tamanhos__grade {
    display: flex;
    gap: 60px;
    justify-content: space-between;
    margin-left: 7vw;
    margin-right: 0;
    padding-right: 0;
    align-items: start;
    /* No Figma os cartões sobem 29px sobre a foto de destaque. */
    margin-bottom: -180px;
}

/* O texto não é centralizado na altura da foto: começa 93px abaixo do topo. */
.lpc-tamanhos__texto { padding-top: 93px; }
.lpc-tamanhos .lpc-titulo { margin-bottom: 40px; }

.lpc-tamanhos__texto p {
    max-width: 540px;
    font-size: 22px;
    font-weight: 300;
    line-height: 1.27;
}

/* A foto sangra até a borda direita da tela, como no Figma. */
.lpc-tamanhos__destaque {
    display: flex;
    justify-content: flex-end;
}

.lpc-tamanhos__destaque img {
    width: 757px;
    object-fit: cover;
}

/* Fecho da seção, centralizado abaixo dos cartões. */
.lpc-tamanhos__fecho {
    max-width: 1000px;
    margin: 41px auto 0;
    font-size: 24px;
    font-weight: 300;
    line-height: 1.25;
    text-align: center;
    color: var(--texto);
}

/* -------------------------------------------------------------------------
   CARROSSEL
   ------------------------------------------------------------------------- */

.lpc-carrossel { position: relative; }

.lpc-carrossel__pista {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 295px;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 24px;
}

.lpc-carrossel__pista::-webkit-scrollbar { display: none; }
.lpc-carrossel__pista.is-arrastando { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.lpc-carrossel__pista > * { scroll-snap-align: start; }

/* O JS já barra o dragstart, que resolve em Chrome e Firefox; isto é para o
   Safari, que ignora aquele preventDefault em imagem. Sem os dois, pegar em
   cima da foto começa o arraste nativo do navegador e a pista trava. */
.lpc-carrossel__pista img,
.lpc-carrossel__pista a {
    -webkit-user-drag: none;
}

/* Barra de rolagem do carrossel: trilho de 300x8 centralizado. */
.lpc-carrossel__barra {
    position: relative;
    width: 300px;
    height: 8px;
    margin: 68px auto 0;
    border-radius: 999px;
    background-color: var(--trilho);
    cursor: pointer;
}

.lpc-carrossel__progresso {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 999px;
    background-color: var(--azul);
    transition: left .15s ease, width .15s ease;
}

.lpc-carrossel__seta {
    position: absolute;
    top: calc(50% - 24px);
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    opacity: .85;
    transition: opacity .2s ease;
}

.lpc-carrossel__seta:hover { opacity: 1; }
.lpc-carrossel__seta img { width: 13px; }
.lpc-carrossel__seta--antes  { left: -46px; }
.lpc-carrossel__seta--depois { right: -46px; }
.lpc-carrossel__seta--depois img { transform: scaleX(-1); }
.lpc-carrossel__seta[disabled] { opacity: .45; cursor: default; }

/* Cartões de tamanho ------------------------------------------------------ */

.lpc-tamanho {
    position: relative;
    display: block;
    padding-bottom: 25px;
    text-decoration: none;
}

.lpc-tamanho__foto {
    display: block;
    overflow: hidden;
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}

.lpc-tamanho__foto img {
    width: 100%;
    aspect-ratio: 295 / 325;
    object-fit: cover;
    transition: transform .4s ease;
}

.lpc-tamanho:hover .lpc-tamanho__foto img { transform: scale(1.04); }

.lpc-tamanho__nome {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    min-width: 200px;
    min-height: 50px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--branco);
    white-space: nowrap;
}

.lpc-tamanho__nome--azul    { background-color: var(--azul); }
.lpc-tamanho__nome--laranja { background-color: var(--laranja); }
.lpc-tamanho__nome--teal    { background-color: var(--teal); }
.lpc-tamanho__nome--indigo  { background-color: var(--indigo); }

/* -------------------------------------------------------------------------
   OFERTAS E FAVORITOS
   ------------------------------------------------------------------------- */

/* No Figma a faixa de ofertas + favoritos tem um cinza um pouco mais escuro
   que o resto da página. */
.lpc-produtos {
    padding: 65px 0;
    background-color: var(--fundo-produtos);
}

/* Só fecha curta quando há outra seção de produtos logo adiante, porque aí as
   duas são o mesmo bloco visual. A regra antiga era `+ .lpc-produtos`, que dava
   a folga à segunda — e com os favoritos desligados sobrava só a de ofertas,
   terminando curta. O `:has` inverte: quem encurta é a de cima. */
.lpc-produtos:has(~ .lpc-produtos) { padding-bottom: 37px; }

/* Estes dois títulos usam o azul C_AZUL, não o mesmo das outras seções. */
.lpc-produtos .lpc-titulo { margin-bottom: 50px; color: var(--azul-ciello); }

/* Card de 295, como nos outros carrosséis da página.
   Antes era `(100% - 60px) / 4`, que espremia exatamente quatro cards na
   largura do container — servia quando as ofertas eram os quatro fixos do
   Figma. Agora elas vêm do WooCommerce e a quantidade varia, então a pista
   passa a rolar de verdade em vez de dividir o que houver por quatro. */
.lpc-produtos__pista {
    padding-bottom: 0;
}

.lpc-produto { display: block; text-decoration: none; color: inherit; }

.lpc-produto__foto {
    display: block;
    overflow: hidden;
    margin-bottom: 14px;
    border-radius: var(--raio);
}

.lpc-produto__foto img {
    width: 100%;
    aspect-ratio: 295 / 325;
    object-fit: cover;
    transition: transform .4s ease;
}

.lpc-produto:hover .lpc-produto__foto img { transform: scale(1.04); }

.lpc-produto__nome {
    margin: 0 0 4px;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--texto);
}

.lpc-produto__preco {
    font-size: 21px;
    font-weight: 300;
    line-height: 1.2;
    color: var(--texto);
}

/* -------------------------------------------------------------------------
   BLOCOS DE PRODUTO (Cremona / Trissino)
   ------------------------------------------------------------------------- */

.lpc-blocos { padding: 68px 0 40px; }

.lpc-bloco {
    display: grid;
    grid-template-columns: 655px minmax(0, 1fr);
    align-items: center;
    gap: 114px;
    min-height: 500px;
    padding: 0 90px 0 0;
    border-radius: 40px;
    overflow: hidden;
    background-color: var(--azul-escuro);
    color: var(--branco);
}

/* Abas --------------------------------------------------------------------- */

.lpc-colchoes__abas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 26px;
}

.lpc-colchoes__aba {
    min-height: 44px;
    padding: 0 26px;
    border: 2px solid #c9ccd0;
    border-radius: 999px;
    background: none;
    font-family: inherit;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #7c8288;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.lpc-colchoes__aba:hover { color: var(--azul-escuro); border-color: var(--azul-escuro); }

.lpc-colchoes__aba.is-ativa {
    border-color: transparent;
    color: var(--branco);
}

.lpc-colchoes__aba--azul.is-ativa    { background-color: var(--azul); }
.lpc-colchoes__aba--teal.is-ativa    { background-color: var(--teal); }
.lpc-colchoes__aba--roxo.is-ativa    { background-color: var(--roxo); }
.lpc-colchoes__aba--laranja.is-ativa { background-color: var(--laranja); }

.lpc-bloco + .lpc-bloco { margin-top: 41px; }

/* O quadro inteiro é link para o produto: sem sublinhado, e a foto responde ao
   passar o mouse, como nos cards de produto. */
.lpc-bloco { text-decoration: none; }
.lpc-bloco__foto img { transition: transform 0.35s ease; }
.lpc-bloco:hover .lpc-bloco__foto img { transform: scale(1.03); }

.lpc-bloco--invertido {
    grid-template-columns: minmax(0, 1fr) 581px;
    gap: 113px;
    padding: 0 0 0 83px;
}

.lpc-bloco--invertido .lpc-bloco__foto { order: 2; }
.lpc-bloco--invertido .lpc-bloco__texto { order: 1; }

.lpc-bloco__foto img { width: 100%; aspect-ratio: 655 / 500; object-fit: contain; }
.lpc-bloco__foto--lima img { aspect-ratio: 581 / 500; }

/* O texto do bloco fica um pouco acima do centro, como no Figma. */
.lpc-bloco__texto { padding-bottom: 44px; }

.lpc-bloco__texto h2 {
    margin: 0 0 14px;
    font-size: 37px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--branco);
}

.lpc-bloco__texto p {
    font-size: 22px;
    font-weight: 300;
    line-height: 1.18;
    color: #e6e7e9;
}

/* -------------------------------------------------------------------------
   CUPOM
   ------------------------------------------------------------------------- */

.lpc-cupom { padding: 68px 0 32px; text-align: center; }

.lpc-cupom__titulo {
    margin: 0 0 36px;
    font-size: 37px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--laranja);
}

.lpc-cupom p {
    margin-bottom: 34px;
    font-size: 23px;
    font-weight: 300;
    line-height: 1.43;
}

.lpc-cupom p strong { font-weight: 700; }

.lpc-cupom__code {
    min-height: 70px;
    margin-top: 0;
    padding: 0 34px;
    border: 0;
    border-radius: 999px;
    background-color: var(--azul);
    font-family: inherit;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--branco);
    cursor: pointer;
    transition: filter .2s ease, transform .15s ease;
}

.lpc-cupom__code:hover { filter: brightness(.93); transform: translateY(-1px); }

/* Precisa vencer ".lpc-cupom p", que tem especificidade maior. */
.lpc-cupom p.lpc-cupom__aviso {
    min-height: 24px;
    margin: 10px 0 0;
    font-size: 17px;
    color: var(--verde-wa);
}

/* -------------------------------------------------------------------------
   LOJAS
   ------------------------------------------------------------------------- */

.lpc-lojas { padding: 22px 0 160px; }
.lpc-lojas .lpc-titulo { margin-bottom: 63px; }

.lpc-lojas__grade {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 80px;
}

.lpc-loja { position: relative; }

/* A foto virou o link para a página da loja. O bloco é para a âncora ocupar a
   caixa da imagem, e não a linha de texto que ela seria por padrão. */
.lpc-loja__foto {
    display: block;
    border-radius: var(--raio);
    overflow: hidden;
    aspect-ratio: 400/300;
    object-fit: cover;
}

.lpc-loja__foto img { transition: transform 0.35s ease; }
.lpc-loja__foto:hover img { transform: scale(1.04); }

.lpc-loja img {
    width: 100%;
    object-fit: cover;
    border-radius: var(--raio);
}

.lpc-loja__tag {
    position: absolute;
    left: 21px;
    bottom: -20px;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--branco);
}

.lpc-loja__tag a { display: grid; place-items: center; opacity: .95; }
.lpc-loja__tag a:hover { opacity: 1; }

.lpc-loja__tag--laranja { background-color: var(--laranja); }
.lpc-loja__tag--amarelo { background-color: var(--amarelo); }
.lpc-loja__tag--roxo    { background-color: var(--roxo); }
.lpc-loja__tag--teal    { background-color: var(--teal); }
.lpc-loja__tag--uva     { background-color: var(--uva); }
.lpc-loja__tag--salmao  { background-color: var(--salmao); }

/* -------------------------------------------------------------------------
   RODAPÉ
   ------------------------------------------------------------------------- */

.lpc-rodape {
    padding: 109px 0 95px;
    background-color: var(--azul-medio);
    color: var(--branco);
}

.lpc-rodape__grade {
    display: grid;
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
    gap: 33px;
    align-items: center;
}

.lpc-rodape__logo { width: 321px; }

.lpc-rodape__citacao {
    position: relative;
    max-width: 670px;
    margin: 0;
    padding-left: 34px;
    font-size: 24px;
    font-weight: 300;
    line-height: 1.46;
}

.lpc-rodape__citacao::before {
    content: '“';
    position: absolute;
    left: -13px;
    top: -18px;
    font-size: 58px;
    line-height: 1;
    opacity: .75;
}

.lpc-rodape__sociais {
    display: flex;
    justify-content: flex-end;
    margin-top: 63px;
}

.lpc-rodape__sociais ul {
    display: flex;
    gap: 18px;
    align-items: center;
}

.lpc-rodape__sociais h6 { display: none; }
.lpc-rodape__sociais img { width: 22px; }


/* =========================================================================
   RESPONSIVO
   ========================================================================= */

@media (max-width: 1299px) {
    .lpc-praquem__grade,
    .lpc-tamanhos__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 40px; }
    .lpc-carrossel__seta--antes  { left: -12px; }
    .lpc-carrossel__seta--depois { right: -12px; }
    .lpc-bloco { padding-inline: 40px 40px; border-radius: 40px; }
    .lpc-bloco--invertido { padding-inline: 40px; }
}

@media (max-width: 1023px) {
    .lpc-secao { padding: 60px 0; }
    .lpc-titulo { font-size: 28px; }

    .lpc-hero { height: auto; }
    .lpc-hero__grade { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 40px; }
    .lpc-hero__texto { padding: 0; }
    .lpc-hero__titulo { margin-top: 26px; font-size: 44px; }
    .lpc-hero__chamada { font-size: 20px; }
    .lpc-hero__form { max-width: 460px; }

    .lpc-beneficios__lista { grid-template-columns: repeat(2, 1fr); }
    .lpc-beneficios__lista li { padding: 14px 10px; font-size: 18px; }
    .lpc-beneficios__lista li:nth-child(odd) { border-left: 0; }
    .lpc-beneficios__lista li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .28); }

    .lpc-praquem { padding: 60px 0; }
    .lpc-praquem__grade,
    .lpc-tamanhos__grade,
    .lpc-porque__grade,
    .lpc-rodape__grade { grid-template-columns: minmax(0, 1fr); gap: 32px; }

    /* Estas duas grades são filhas diretas da <section>, e não do
       .lpc__container — por isso não herdam os 20px de folga lateral dele. No
       desktop isso é de propósito (as fotos sangram até a borda), mas
       empilhado o texto ficava encostado nos dois lados da tela.

       A folga vai no bloco de texto, e não na grade, para as fotos manterem o
       sangramento. */
    .lpc-porque__conteudo {
        padding: 0 20px 20px;
    }

    .lpc-tamanhos__texto {
        padding-inline: 20px;
    }

    .lpc-porque__lista { padding-left: 0; }
    .lpc-tamanhos__texto { padding-top: 0; }
    .lpc-tamanhos__grade { margin-bottom: 32px; }
    .lpc-tamanhos .lpc-titulo { margin-bottom: 22px; }
    .lpc-bloco__texto { padding-bottom: 0; }
    .lpc-rodape__citacao { font-size: 20px; }
    .lpc-beneficios .lpc__container { max-width: calc(var(--container) + 40px); }
    .lpc-porque__foto { max-width: 520px; margin-inline: auto; }
    .lpc-tamanhos__destaque { margin-right: 0; }

    .lpc-noites__titulo { font-size: 30px; }
    .lpc-noites__titulo em { font-size: 34px; -webkit-text-stroke-width: 2px; }

    .lpc-produtos__pista { grid-auto-columns: minmax(0, calc((100% - 16px) / 2)); }
    .lpc-tamanhos__fecho { margin-top: 40px; font-size: 20px; }

    .lpc-bloco,
    .lpc-bloco--invertido {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        padding: 30px;
        border-radius: 28px;
    }

    .lpc-bloco--invertido .lpc-bloco__foto { order: 0; }
    .lpc-bloco--invertido .lpc-bloco__texto { order: 0; }

    .lpc-lojas__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 60px; }
    .lpc-rodape__logo { width: 190px; }
    .lpc-rodape__sociais { justify-content: center; }
}

@media (max-width: 599px) {
    .lpc-titulo { font-size: 26px; }
    .lpc-hero__titulo { font-size: 36px; }
    .lpc-hero__chamada { font-size: 18px; }
    .lpc-btn { font-size: 18px; min-height: 48px; padding: 0 22px; }

    .lpc-beneficios__lista { grid-template-columns: minmax(0, 1fr); }
    .lpc-beneficios__lista li { border-left: 0; }
    .lpc-beneficios__lista li + li { border-top: 1px solid rgba(255, 255, 255, .28); }

    .lpc-praquem__texto p { font-size: 18px; }
    .lpc-carrossel__pista { grid-auto-columns: 240px; }
    .lpc-carrossel__seta { display: none; }
    .lpc-produtos__pista { grid-auto-columns: 240px; }
    .lpc-lojas__grade { grid-template-columns: minmax(0, 1fr); }
    .lpc-cupom__code { font-size: 20px; padding: 0 26px; }

    /* ---------------------------------------------------------------------
       Tipografia que tinha ficado no tamanho de mesa

       Estes cinco não tinham nenhuma regra abaixo de 1023, então chegavam ao
       celular com o corpo do desenho de 1440 — os dois de 37px ocupavam quase
       três linhas cada num aparelho de 390.
       --------------------------------------------------------------------- */

    .lpc-bloco__texto h2 { font-size: 26px; margin-bottom: 10px; }
    .lpc-cupom__titulo   { font-size: 26px; margin-bottom: 22px; }
    .lpc-porque__item h3 { font-size: 21px; margin-bottom: 10px; }
    .lpc-porque__item p  { font-size: 18px; }
    .lpc-produto__nome   { font-size: 20px; }
    .lpc-produto__preco  { font-size: 18px; }

    /* O contorno de 12px foi desenhado para 51px de corpo; proporcional ao
       tamanho daqui, senão engole a própria letra. */
    .lpc-noites__titulo    { font-size: 26px; }
    .lpc-noites__titulo em { font-size: 29px; -webkit-text-stroke-width: 6px; }

    /* Ícone do item da lista menor, para o texto ao lado ganhar largura. */
    .lpc-porque__item { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; }
    .lpc-porque__icone { width: 38px; height: 38px; }
    .lpc-porque__lista { gap: 34px; }

    /* ---------------------------------------------------------------------
       Alvos de toque

       O formulário é o objetivo da página inteira e chegava com campos de 37px
       de altura — abaixo dos 44 que iOS e Android pedem para o dedo acertar de
       primeira.
       --------------------------------------------------------------------- */

    .lpc-hero__form input[type="text"],
    .lpc-hero__form input[type="email"],
    .lpc-hero__form input[type="tel"],
    .lpc-hero__form select { min-height: 46px; }

    .lpc-hero__form .btn { min-height: 50px; }

    /* Os dois ícones da etiqueta da loja têm 15px de desenho. Em vez de
       aumentá-los (o que estouraria a pílula), a área de toque cresce por
       fora, sem mexer no layout.

       O vão sobe de 9 para 18 junto: com 9, as duas áreas se encostariam e
       tocar à direita do pino abriria o WhatsApp. */
    .lpc-loja__tag { gap: 18px; }
    .lpc-loja__tag a { position: relative; }

    .lpc-loja__tag a::after {
        content: '';
        position: absolute;
        inset: -13px -8px;
    }

    /* ---------------------------------------------------------------------
       A seção de tamanhos é flex, não grid

       As regras de `grid-template-columns` nas quebras acima não fazem efeito
       nela — por isso texto e foto continuavam lado a lado no celular, com a
       margem de 7vw ainda empurrando tudo para a direita.
       --------------------------------------------------------------------- */

    .lpc-tamanhos__grade {
        flex-direction: column;
        gap: 24px;
        margin-left: 0;
        margin-bottom: -60px;
    }

    /* ---------------------------------------------------------------------
       Corpo de texto

       Estes seis não tinham regra abaixo de 1023 e chegavam ao celular com o
       corpo do desenho de 1440 — parágrafos de 22 e 23px.
       --------------------------------------------------------------------- */

    .lpc-bloco__texto p,
    .lpc-noites__texto,
    .lpc-tamanhos__texto p,
    .lpc-cupom p { font-size: 17px; line-height: 1.38; }

    .lpc-tamanhos__fecho { font-size: 16px; margin-top: 26px; }

    .lpc-rodape__citacao { font-size: 16px; padding-left: 26px; }
    .lpc-rodape__citacao::before { font-size: 44px; top: -12px; left: -6px; }

    /* ---------------------------------------------------------------------
       Espaçamentos

       Os vãos e as folgas foram desenhados para 1440. O pior era o vão de
       114px entre a foto e o texto do bloco, que sozinho esticava o quadro
       além de uma tela inteira.
       --------------------------------------------------------------------- */

    .lpc-bloco,
    .lpc-bloco--invertido { gap: 20px; padding: 22px; border-radius: 22px; }
    .lpc-bloco + .lpc-bloco { margin-top: 20px; }

    .lpc-secao { padding: 46px 0; }
    .lpc-noites { padding: 54px 0; }

    .lpc-titulo { margin-bottom: 24px; }
    .lpc-porque .lpc-titulo { margin-bottom: 28px; }
    .lpc-produtos .lpc-titulo { margin-bottom: 24px; }
    .lpc-cupom__titulo { margin-bottom: 18px; }
    .lpc-cupom p { margin-bottom: 20px; }

    .lpc-carrossel__barra { margin-top: 30px; }
    .lpc-lojas__grade { row-gap: 46px; }

    .lpc-rodape { padding: 50px 0 42px; }
    .lpc-rodape__grade { gap: 22px; }
    .lpc-rodape__logo { width: 150px; }
    .lpc-rodape__sociais { margin-top: 30px; }
}