/* =========================================================================
   HOME 2027
   Carregado automaticamente pelo tema a partir do nome do template.
   Tudo escopado em .home2027 para não interferir no restante do site.
   ========================================================================= */

.home2027 {
    /* Paleta — nomes vindos das variáveis do Figma */
    --c-01: #326ea0;
    --c-02: #287ec1;
    --c-03: #12507d;
    --c-04: #489291;
    --c-06: #2fad73; /* verde WhatsApp */
    --c-08: #b3c551;
    --c-11: #fcbb18;
    --c-12: #ee7e23;
    --c-15: #f47a56;
    --c-19: #e6e7e9;
    --c-21: #6374b9;
    --c-azul: #21527c;

    --p-escuro: #373737;
    --p-claro: #f2f2f2;
    --texto: #333333;
    --branco: #ffffff;

    /* Tipografia — no design 2027 tudo é Khand, títulos e corpo. O Roboto
       ficou só como fallback enquanto a fonte não carrega. */
    --fonte-titulo: 'Khand', 'Roboto', sans-serif;
    --fonte-texto: 'Khand', 'Roboto', sans-serif;

    /* Layout */
    --container: 1240px;
    --raio: 20px;      /* cards, banners e blocos */
    --raio-cat: 16px;  /* miniaturas de categoria */
    --gap-secao: 80px;

    background-color: var(--branco);
    color: var(--texto);
    font-family: var(--fonte-texto);
}

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

.home2027 img {
    max-width: 100%;
}

/* O conteúdo tem 1240px no Figma; o padding fica por fora para telas menores. */
.home2027__container {
    width: 100%;
    max-width: calc(var(--container) + 40px);
    margin-inline: auto;
    padding-inline: 20px;
}

.home2027-secao {
    margin-top: var(--gap-secao);
}

.home2027__titulo {
    margin: 0 0 32px;
    font-family: var(--fonte-titulo);
    font-size: 38px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--c-azul);
}

.home2027__titulo--centro {
    text-align: center;
}

.home2027-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 28px;
    border-radius: 8px;
    background-color: var(--c-06);
    color: var(--branco);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: filter 0.2s ease;
}

.home2027-btn:hover,
.home2027-btn:focus {
    filter: brightness(0.93);
    color: var(--branco);
    text-decoration: none;
}

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

.home2027-hero { padding-top: 32px; }

.home2027-hero__box {
    position: relative;
    overflow: hidden;
    border-radius: var(--raio);
    background-color: var(--c-19);
}

.home2027-hero__track {
    display: flex;
    transition: transform 0.45s ease;
}

.home2027-hero__slide {
    flex: 0 0 100%;
    min-width: 100%;
}

.home2027-hero__slide img,
.home2027-hero__slide a {
    display: block;
    width: 100%;
    height: auto;
}

.home2027-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--c-azul);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.home2027-hero__arrow:hover { background-color: var(--branco); }

.home2027-hero__arrow:focus-visible,
.home2027-hero__dot:focus-visible {
    outline: 2px solid var(--c-02);
    outline-offset: 2px;
}

.home2027-hero__arrow--prev { left: 24px; }
.home2027-hero__arrow--next { right: 24px; }

.home2027-hero__dots {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.home2027-hero__dot {
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.home2027-hero__dot.is-active { background-color: var(--branco); }

/* -------------------------------------------------------------------------
   CARROSSEL HORIZONTAL (ofertas, mais vendidos, avaliações)
   ------------------------------------------------------------------------- */

.home2027-carrossel__pista {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
    cursor: grab;
}

/* Durante o arraste o snap atrapalha e o texto não deve ser selecionado. */
.home2027-carrossel__pista.is-arrastando {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

.home2027-carrossel__barra { cursor: pointer; }

.home2027-carrossel__pista::-webkit-scrollbar { display: none; }

.home2027-carrossel__pista > * {
    scroll-snap-align: start;
    flex: 0 0 295px;
}

.home2027-carrossel__barra {
    position: relative;
    width: 525px;
    max-width: 100%;
    height: 8px;
    margin: 32px auto 0;
    border-radius: 4px;
    background-color: var(--c-19);
    overflow: hidden;
}

.home2027-carrossel__progresso {
    position: absolute;
    inset-block: 0;
    left: 0;
    display: block;
    width: 30%;
    border-radius: 4px;
    background-color: var(--c-azul);
    transition: transform 0.15s ease;
}

/* -------------------------------------------------------------------------
   CARD DE PRODUTO
   ------------------------------------------------------------------------- */

.c2027-card {
    display: flex;
    flex-direction: column;
}

.c2027-card__midia {
    position: relative;
    display: block;
    aspect-ratio: 295 / 325;
    overflow: hidden;
    border-radius: var(--raio);
    background-color: var(--p-claro);
}

.c2027-card__midia img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* No design o selo é só o número, grande e amarelo, sobre a foto — sem pílula. */
.c2027-card__selo{
    position: absolute;
    top: 24px;
    left: 26px;
    z-index: 2;
    p {
        font-family: var(--fonte-titulo);
        font-size: 44px;
        font-weight: 700;
        line-height: 1;
        color: var(--c-11);
        padding: 0 2px;
        border-top: 4px solid white;
        background: white;
        text-shadow: 0px 4px 4px #00000040;
    }
} 

.c2027-card__corpo {
    flex: 1 1 auto;
    padding: 20px 0 12px;
}

.c2027-card__titulo {
    margin: 0 0 6px;
    font-family: var(--fonte-titulo);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.15;
}

.c2027-card__titulo a {
    color: var(--p-escuro);
    text-decoration: none;
}

.c2027-card__titulo a:hover { color: var(--c-02); }

.c2027-card__de {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    color: var(--p-escuro);
    opacity: 0.9;
    text-decoration: line-through;
}

.c2027-card__por {
    margin: 6px 0 0;
    font-family: var(--fonte-titulo);
    font-size: 32px;
    font-weight: 700;
    line-height: 32px;
    color: var(--p-escuro);
}

.c2027-card__parcelas {
    margin: 6px 0 0;
    font-family: var(--fonte-titulo);
    font-size: 17px;
    font-weight: 500;
    line-height: 17px;
    color: var(--c-azul);
    opacity: 0.9;
}

.c2027-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 16px;
    border-radius: 30px;
    background-color: var(--c-06);
    color: var(--branco);
    font-family: var(--fonte-titulo);
    font-size: 22px;
    font-weight: 500;
    text-decoration: none;
    transition: filter 0.2s ease;
}

.c2027-card__cta:hover,
.c2027-card__cta:focus {
    filter: brightness(0.93);
    color: var(--branco);
    text-decoration: none;
}

/* Card promocional "Ver todas as OFERTAS"
   Tem a mesma altura da foto dos produtos (325px) — não acompanha o card inteiro. */
.c2027-promo {
    position: relative;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 295 / 325;
    padding: 34px;
    overflow: hidden;
    border-radius: var(--raio);
    background-color: var(--c-01);
    color: var(--branco);
    text-decoration: none;
    transition: filter 0.2s ease;
}

/* Marca d'água a 5%, como no design. O PNG tem o recorte opaco, então a
   transparência vem daqui. Fica atrás do texto por ordem de DOM: a imagem vem
   antes e o texto e a seta são position:relative. O recorte na borda do card
   é o overflow:hidden de .c2027-promo. */
.c2027-promo__marca {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 44%;
    opacity: 0.05;
    pointer-events: none;
}

.c2027-promo:hover { filter: brightness(1.08); color: var(--branco); text-decoration: none; }

.c2027-promo__texto {
    position: relative;
    font-family: var(--fonte-titulo);
    font-size: 36px;
    font-weight: 600;
    line-height: 44px;
}

.c2027-promo__texto strong {
    display: block;
    font-weight: 700;
    color: var(--c-11);
}

.c2027-promo__seta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--branco);
}

/* O ícone do design é uma seta para cima; no card ela aponta para a direita. */
.c2027-promo__seta svg { transform: rotate(90deg); }

/* -------------------------------------------------------------------------
   CATEGORIAS
   ------------------------------------------------------------------------- */

.home2027-categorias__lista {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home2027-categorias__item a {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
}

.home2027-categorias__foto {
    display: block;
    aspect-ratio: 166 / 163;
    overflow: hidden;
    border-radius: var(--raio-cat);
    background-color: var(--p-claro);
}

.home2027-categorias__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.home2027-categorias__item a:hover img { transform: scale(1.05); }

.home2027-categorias__nome {
    font-family: var(--fonte-titulo);
    font-size: 19px;
    font-weight: 500;
    text-align: center;
    color: var(--texto);
}

/* -------------------------------------------------------------------------
   COMO COMPRAR
   ------------------------------------------------------------------------- */

.home2027-passos__lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: passo;
}

/* Metade bloco colorido, metade foto. Sem overflow:hidden aqui — o número
   precisa vazar abaixo da base do card (o recorte fica só em __foto). */
.home2027-passos__item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 260px;
    border-radius: var(--raio);
    background-color: var(--c-12);
}

.home2027-passos__item:nth-child(2) { background-color: var(--c-04); }
.home2027-passos__item:nth-child(3) { background-color: var(--c-21); }

.home2027-passos__conteudo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px 20px 28px 34px;
}

/* A cor precisa ser declarada no próprio h3/p: o style.css global tem
   `h1,h2,h3,h4,h5,h6,p { color:#40364f }`, e valor herdado (do __item)
   sempre perde para uma regra que casa no próprio elemento. */
.home2027-passos__titulo {
    margin: 0 0 16px;
    font-family: var(--fonte-titulo);
    font-size: 28px;
    font-weight: 600;
    line-height: 28px;
    color: var(--branco);
}

.home2027-passos__texto {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: 22px;
    line-height: 22px;
    color: var(--branco);
}

.home2027-passos__foto {
    position: relative;
    overflow: hidden;
    border-radius: 0 var(--raio) var(--raio) 0;
}

.home2027-passos__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Número sobre a foto, uma cor por passo, com contorno claro para separá-lo
   da imagem. Medido no render 1:1 do Figma: a tinta do dígito termina 21px
   ABAIXO da base do card e o contorno tem 12px.
   O bottom negativo compensa a caixa de linha: com font-size 120 e
   line-height 100, a baseline cai a 84,5px do topo da caixa de 100px. */
.home2027-passos__numero {
    position: absolute;
    right: 23px;
    bottom: -36px;
    font-family: var(--fonte-titulo);
    font-size: 120px;
    font-weight: 600;
    line-height: 100px;
    color: var(--c-21);
    /* text-stroke é centrado: 24px = 12px para fora depois que o preenchimento
       cobre a metade de dentro (paint-order). */
    -webkit-text-stroke: 24px #f5f5f5;
    paint-order: stroke fill;
}

.home2027-passos__item:nth-child(2) .home2027-passos__numero { color: var(--c-11); }
.home2027-passos__item:nth-child(3) .home2027-passos__numero { color: var(--c-15); }

/* O título desta seção é 36px no Figma (as outras seções usam 38px). */
.home2027-passos .home2027__titulo {
    margin-bottom: 50px;
    font-size: 36px;
}

.home2027-passos__aviso {
    /* Folga maior que o padrão porque o número vaza abaixo dos cards. */
    margin: 78px 0 0;
    font-family: var(--fonte-titulo);
    font-size: 22px;
    line-height: 1.2;
    text-align: center;
    color: var(--p-escuro);
}

/* -------------------------------------------------------------------------
   EXPLORE POR AMBIENTES
   ------------------------------------------------------------------------- */

.home2027-ambientes__grade {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
}

.home2027-ambientes__item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--raio);
    background-color: var(--p-claro);
    text-decoration: none;
}

.home2027-ambientes__item--1 {
    grid-row: span 2;
    min-height: 550px;
}

.home2027-ambientes__item--2,
.home2027-ambientes__item--3 { min-height: 265px; }

.home2027-ambientes__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.home2027-ambientes__item:hover img { transform: scale(1.04); }

/* As etiquetas são retângulos sem arredondamento no design, em caixa alta
   e uma cor por ambiente. */
.home2027-ambientes__tag {
    position: absolute;
    left: 41px;
    bottom: 42px;
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 0 18px;
    background-color: var(--c-12);
    color: var(--branco);
    font-family: var(--fonte-titulo);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.home2027-ambientes__item--2 .home2027-ambientes__tag,
.home2027-ambientes__item--3 .home2027-ambientes__tag {
    left: 30px;
    bottom: 30px;
    min-height: 50px;
    font-size: 26px;
}

.home2027-ambientes__item--2 .home2027-ambientes__tag { background-color: var(--c-04); }
.home2027-ambientes__item--3 .home2027-ambientes__tag { background-color: var(--c-21); }

/* -------------------------------------------------------------------------
   MAIS DO QUE MÓVEIS
   ------------------------------------------------------------------------- */

.home2027-diferenciais {
    position: relative;
    overflow: hidden; /* segura os grafismos dos cantos */
    padding: 80px 0 104px;
    background-color: var(--c-azul);
    color: var(--c-19);
}

/* Grafismo "LL" nos cantos, a 10% — canto superior direito e inferior
   esquerdo, encostados nas bordas da faixa como no Figma. */
.home2027-diferenciais::before,
.home2027-diferenciais::after {
    content: '';
    position: absolute;
    opacity: 0.1;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.home2027-diferenciais::before {
    top: 0;
    right: 0;
    width: 158px;
    height: 202px;
    background-image: url('../../../public/img/home-2027/diferenciais/grafismo-ll-1.png');
}

.home2027-diferenciais::after {
    bottom: 0;
    left: 0;
    width: 122px;
    height: 145px;
    background-image: url('../../../public/img/home-2027/diferenciais/grafismo-ll-2.png');
    transform: rotate(180deg);
}

.home2027-diferenciais__titulo {
    margin: 0 0 72px;
    font-family: var(--fonte-titulo);
    font-size: 44px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    color: var(--p-claro);
}

/* Segunda linha: 40px, com "para durar." mais pesado que o resto. */
.home2027-diferenciais__titulo span {
    display: inline-block;
    margin-top: 4px;
    font-size: 40px;
    font-weight: 500;
}

.home2027-diferenciais__titulo b { font-weight: 600; }

.home2027-diferenciais__lista {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home2027-diferenciais__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Foto do card. O círculo do ícone fica meio dentro, meio fora da base dela,
   por isso a folga até o título soma o raio (45px) mais os 30px do design. */
.home2027-diferenciais__midia {
    position: relative;
    width: 100%;
    margin-bottom: 75px;
}

.home2027-diferenciais__foto {
    display: block;
    width: 100%;
    aspect-ratio: 295 / 280;
    object-fit: cover;
    border-radius: var(--raio);
}

/* Camada que o Figma aplica só nas fotografias: azul por baixo, preto por
   cima, 20% cada. Sem ela as duas fotos ficam mais claras que as ilustrações. */
.home2027-diferenciais__midia--escurecida::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--raio);
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
        linear-gradient(rgba(50, 110, 160, 0.2), rgba(50, 110, 160, 0.2));
    pointer-events: none;
}

/* Cada card tem a sua cor de círculo no design. */
.home2027-diferenciais__icone {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 1; /* acima da camada de escurecimento */
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: var(--c-04);
    transform: translate(-50%, 50%);
}

.home2027-diferenciais__icone--personalizacao { background-color: var(--c-15); }
.home2027-diferenciais__icone--qualidade      { background-color: var(--c-11); }
.home2027-diferenciais__icone--entrega        { background-color: var(--c-21); }

/* A arte tem 45px e fica centrada no círculo de 90px. */
.home2027-diferenciais__icone-caixa {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 45px;
    height: 45px;
    transform: translate(-50%, -50%);
}

/* Recortes de cada parte dentro da caixa, como vêm do Figma. */
.home2027-diferenciais__icone-parte { position: absolute; }

.home2027-diferenciais__icone-parte img {
    display: block;
    width: 100%;
    height: 100%;
}

.home2027-diferenciais__icone-parte--atendimento-1    { inset: 10.68% 5.23% 9.7% 5.23%; }
.home2027-diferenciais__icone-parte--personalizacao-1 { inset: 7.14% 3.57% 3.57% 10.71%; }
.home2027-diferenciais__icone-parte--qualidade-1      { inset: 4.49% 4.67% 3.55% 4.67%; }
.home2027-diferenciais__icone-parte--entrega-1        { inset: 20.83% 16.7% 45.83% 16.7%; }
.home2027-diferenciais__icone-parte--entrega-2        { inset: 41.67% 8.33% 17.71% 8.33%; }

/* Cor declarada no próprio h3/p: herdada, ela perderia para a regra
   `h1..h6, p` do style.css global. */
.home2027-diferenciais__item-titulo {
    max-width: 250px;
    margin: 0 auto 19px;
    font-family: var(--fonte-titulo);
    font-size: 28px;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: 0.56px;
    color: var(--c-19);
}

.home2027-diferenciais__item-texto {
    max-width: 250px;
    margin: 0 auto;
    font-family: var(--fonte-titulo);
    font-size: 20px;
    line-height: 20px;
    color: var(--c-19);
}

/* -------------------------------------------------------------------------
   CIELLO IMPER
   ------------------------------------------------------------------------- */

/* Faixa de largura total: o banner é o fundo e o gradiente puxa o azul para a
   esquerda. Encosta na seção anterior — no Figma não há folga entre as duas.
   O conteúdo é alinhado por baixo (205px do topo, 77px da base), não centrado. */
.home2027-imper {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 500px;
    padding-bottom: 77px;
    background-color: var(--c-01);
    background-image: var(--imper-bg);
    background-position: center;
    background-size: cover;
    color: var(--c-19);
    aspect-ratio: 144/50;
}

.home2027-imper::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        239.93deg,
        rgba(50, 110, 160, 0) 49.687%,
        rgba(40, 89, 129, 0.271) 65.695%,
        rgba(30, 109, 142, 0.496) 77.755%,
        rgba(12, 144, 166, 0.9) 99.364%
    );
}

.home2027-imper .home2027__container {
    position: relative;
    z-index: 1;
}

.home2027-imper__conteudo {
    max-width: 420px;
}

/* Cor no próprio <p>: herdada, perderia para a regra `h1..h6, p` do
   style.css global. */
.home2027-imper__texto {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: 44px;
    font-weight: 700;
    line-height: 1.05;
    color: var(--c-19);
}

.home2027-imper__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    min-height: 50px;
    margin-top: 27px;
    border-radius: 30px;
    background-color: var(--c-11);
    color: var(--c-03);
    font-family: var(--fonte-titulo);
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
}

.home2027-imper__cta:hover { filter: brightness(0.95); color: var(--c-03); text-decoration: none; }

/* -------------------------------------------------------------------------
   AVALIAÇÕES
   ------------------------------------------------------------------------- */

.home2027-avaliacoes__topo {
    display: grid;
    grid-template-columns: 385px 1fr;
    gap: 40px;
    align-items: start;
}

/* Sem isto o item da grade adota min-width:auto, cresce até caber todos os
   cards (2500px) e o carrossel nunca chega a ter o que rolar. */
.home2027-avaliacoes__topo > * { min-width: 0; }

/* Cards brancos sobre o fundo claro da seção. */
/* Avaliações, clientes e lojas formam um bloco cinza contínuo até o rodapé.
   O espaçamento entre elas vem do padding, não da margem de .home2027-secao —
   com margem, sobrariam faixas brancas separando os cinzas. */
.home2027-avaliacoes,
.home2027-clientes,
.home2027-lojas {
    background-color: var(--p-claro);
}

.home2027-clientes.home2027-secao,
.home2027-lojas.home2027-secao {
    margin-top: 0;
}

.home2027-avaliacoes { padding: 120px 0 0; margin-top:0 }
.home2027-clientes   { padding: 90px 0 0; }
.home2027-lojas      { padding: 130px 0 80px; }

/* O card do design tem 400px — os de produto têm 295. */
.home2027-avaliacoes .home2027-carrossel__pista > * { flex: 0 0 400px; }

/* Barra alinhada à esquerda do carrossel e com a largura de um card. */
.home2027-avaliacoes .home2027-carrossel__barra {
    width: 400px;
    margin: 65px 0 0;
}

.home2027-avaliacao {
    display: flex;
    flex-direction: column;
    min-height: 340px;
    padding: 35px 26px 26px;
    border-radius: var(--raio);
    background-color: var(--branco);
}

.home2027-avaliacao__topo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 19px;
}

.home2027-avaliacao__avatar {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
}

/* Sem foto cadastrada, fica o círculo neutro no lugar. */
.home2027-avaliacao__avatar--vazio {
    display: block;
    background-color: var(--c-19);
}

/* Cores declaradas no próprio elemento: herdadas, perderiam para a regra
   `h1..h6, p` do style.css global. */
.home2027-avaliacao__nome {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: 22px;
    font-weight: 600;
    line-height: 22px;
    color: var(--p-escuro);
}

.home2027-avaliacao__quando {
    margin: 5px 0 0;
    font-family: var(--fonte-titulo);
    font-size: 16px;
    font-weight: 300;
    line-height: 16px;
    color: var(--p-escuro);
}

/* Selo do Google: caixa de 16px com o desenho no recorte que vem do Figma. */
.home2027-avaliacao__google {
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
    height: 16px;
}

.home2027-avaliacao__google img {
    position: absolute;
    top: 6.25%;
    left: 7.81%;
    width: 13.51px;
    height: 13.99px;
}

.home2027-avaliacao__estrelas {
    display: flex;
    gap: 4px; /* 18 + 4 = passo de 22px do design */
    margin-top: 17px;
}

.home2027-avaliacao__estrela {
    position: relative;
    display: block;
    width: 18px;
    height: 17px;
}

.home2027-avaliacao__estrela img {
    position: absolute;
    top: 5.88%;
    left: 2.44%;
    width: 17px;
    height: 16px;
}

/* Notas abaixo de 5 mantêm as cinco posições, com as vazias apagadas. */
.home2027-avaliacao__estrela--vazia { opacity: 0.2; }

.home2027-avaliacao__texto {
    margin: 26px 0 0;
    font-family: var(--fonte-titulo);
    font-size: 20px;
    line-height: 26px;
    color: var(--p-escuro);
}

.home2027-avaliacoes__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 21px;
    margin-top: 86px;
    text-align: center;
}

.home2027-avaliacoes__cta p {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: 24px;
    font-weight: 500;
    line-height: 26px;
    color: var(--p-escuro);
}

/* O botão do design é pílula de 220px, não o retângulo padrão do tema. */
.home2027-avaliacoes__botao {
    width: 220px;
    padding: 0;
    border-radius: 30px;
    font-family: var(--fonte-titulo);
    font-size: 22px;
    font-weight: 500;
}

/* -------------------------------------------------------------------------
   CLIENTES
   ------------------------------------------------------------------------- */

.home2027-clientes .home2027__titulo { margin-bottom: 44px; }

/* O cinza é o placeholder do Figma — sai quando entrarem as fotos reais.
   A largura do card vem da pista do carrossel (295px). */
.home2027-clientes__item {
    position: relative;
    aspect-ratio: 295 / 325;
    overflow: hidden;
    border-radius: var(--raio);
    background-color: #a1a1a1;
}

.home2027-clientes__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

/* O título desta seção é o azul mais escuro, não o das outras. */
.home2027-lojas .home2027__titulo {
    margin-bottom: 60px;
    color: var(--c-03);
}

.home2027-lojas__grade {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* A pílula desce 20px abaixo do card, então a folga entre linhas é maior. */
    gap: 80px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home2027-lojas__item {
    position: relative;
}

.home2027-lojas__foto {
    position: relative;
    display: block;
    aspect-ratio: 400 / 300;
    overflow: hidden;
    border-radius: var(--raio);
    background-color: var(--c-19);
    text-decoration: none;
}

.home2027-lojas__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.home2027-lojas__foto:hover img { transform: scale(1.04); }

/* Pílula montada sobre a base do card, metade dentro e metade fora. */
.home2027-lojas__nome {
    position: absolute;
    left: 20px;
    bottom: -20px;
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 18px;
    border-radius: 5px;
    background-color: var(--c-12);
}

/* A Bebas Neue reserva 8px de descida a 22px que nenhum glifo usa (é toda
   caixa-alta: a tinta vai de 16px acima da linha base a 0 abaixo). Isso deixa
   a tinta 1,5px acima do centro da caixa, independente do line-height, e
   desalinha do ícone ao lado. O Figma alinha pela tinta — daí o empurrão. */
.home2027-lojas__rotulo {
    position: relative;
    top: 1.5px;
    margin-right: 19px;
    font-family: 'Bebas Neue', var(--fonte-titulo);
    font-size: 22px;
    font-weight: 400;
    line-height: 26px;
    color: var(--branco);
    white-space: nowrap;
}

/* Caixa de 20px com o desenho no recorte que vem do Figma. */
.home2027-lojas__icone {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.home2027-lojas__icone + .home2027-lojas__icone { margin-left: 6px; }

.home2027-lojas__icone img {
    position: absolute;
    top: 6.25%;
    left: 12.5%;
    width: 15px;
    height: 17.48px;
}

.home2027-lojas__icone--zap img {
    top: 8.33%;
    left: 8.34%;
    width: 16.67px;
    height: 16.67px;
}

/* Uma cor por loja, repetindo a cada seis — a ordem é a do design. */
.home2027-lojas__item:nth-child(6n+1) .home2027-lojas__nome { background-color: var(--c-12); }
.home2027-lojas__item:nth-child(6n+2) .home2027-lojas__nome { background-color: var(--c-11); }
.home2027-lojas__item:nth-child(6n+3) .home2027-lojas__nome { background-color: var(--c-21); }
.home2027-lojas__item:nth-child(6n+4) .home2027-lojas__nome { background-color: var(--c-04); }
.home2027-lojas__item:nth-child(6n+5) .home2027-lojas__nome { background-color: #5f439a; /* roxo, fora da paleta do tema */ }
.home2027-lojas__item:nth-child(6n)   .home2027-lojas__nome { background-color: var(--c-15); }

/* -------------------------------------------------------------------------
   Responsivo
   ------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .home2027-categorias__lista { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 991px) {
    .home2027 { --gap-secao: 56px; }

    .home2027__titulo { font-size: 30px; }

    .home2027-hero__arrow { width: 44px; height: 44px; }
    .home2027-hero__arrow--prev { left: 12px; }
    .home2027-hero__arrow--next { right: 12px; }

    .home2027-passos__lista,
    .home2027-diferenciais__lista,
    .home2027-lojas__grade { grid-template-columns: repeat(2, 1fr); }

    .home2027-diferenciais__titulo { font-size: 30px; }

    .home2027-ambientes__grade { grid-template-columns: 1fr; }
    .home2027-ambientes__item--1 { grid-row: auto; min-height: 320px; }

    .home2027-imper { min-height: 380px; padding: 48px 0; }
    .home2027-imper__conteudo { max-width: 100%; }

    .home2027-avaliacoes__topo { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .home2027-hero { padding-top: 16px; }
    .home2027-hero__arrow { display: none; }
    .home2027-hero__dots { bottom: 12px; }
    .home2027-hero__dot { width: 10px; height: 10px; }

    .home2027-categorias__lista { grid-template-columns: repeat(2, 1fr); }

    .home2027-passos__lista,
    .home2027-diferenciais__lista,
    .home2027-lojas__grade { grid-template-columns: 1fr; }

    .home2027-carrossel__pista > * { flex-basis: 260px; }

    /* Número reduzido a 60% — as medidas que o posicionam acompanham. */
    .home2027-passos__numero {
        right: 14px;
        bottom: -22px;
        font-size: 72px;
        line-height: 60px;
        -webkit-text-stroke-width: 14px;
    }
}

/* =========================================================================
   MOBILE — medidas do frame de 360px do Figma (338:417)

   Conteúdo de 316px com 22px de margem de cada lado. Este bloco vem depois
   dos anteriores de propósito: com a mesma especificidade, a ordem decide.

   Única diferença combinada com a designer: o banner do topo continua
   horizontal, com a mesma imagem do desktop, só ganhando as margens laterais.
   ========================================================================= */

@media (max-width: 767px) {
    .home2027 { --gap-secao: 56px; }

    .home2027__container { padding-inline: 22px; }

    /* Todos os títulos de seção caem para 20px. */
    .home2027__titulo,
    .home2027-passos .home2027__titulo,
    .home2027-clientes .home2027__titulo,
    .home2027-lojas .home2027__titulo {
        margin-bottom: 24px;
        font-size: 20px;
        line-height: 20px;
    }

    /* ----- Banner do topo: horizontal, com as margens laterais ----- */
    .home2027-hero { padding-top: 16px; }
    .home2027-hero__box { border-radius: var(--raio); }
    .home2027-hero__arrow { width: 30px; height: 30px; }
    .home2027-hero__arrow--prev { left: 9px; }
    .home2027-hero__arrow--next { right: 9px; }
    .home2027-hero__arrow svg { width: 14px; height: 14px; }
    .home2027-hero__dots { bottom: 10px; gap: 6px; }
    .home2027-hero__dot { width: 8px; height: 8px; }

    /* ----- Carrosséis: cards de 150px, dois por tela -----
       min-width:0 porque item de flex assume min-width:auto e o min-content
       da foto e do botão empurrava o card para 183px, ignorando a base. */
    .home2027-carrossel__pista { gap: 16px; }
    .home2027-carrossel__pista > * { flex: 0 0 150px; min-width: 0; }
    .home2027-avaliacoes .home2027-carrossel__pista > * { flex: 0 0 316px; }
    .home2027-clientes .home2027-carrossel__pista > * { flex: 0 0 150px; }

    .home2027-carrossel__barra { width: 100%; margin-top: 20px; }
    .home2027-avaliacoes .home2027-carrossel__barra { width: 100%; margin-top: 20px; }

    /* ----- Card de produto ----- */
    .c2027-card__midia { aspect-ratio: 150 / 170; border-radius: var(--raio-cat); }
    .c2027-card__selo p { font-size: 28px; }
    .c2027-card__titulo { font-size: 16px; line-height: 20px; }
    .c2027-card__de { font-size: 14px; }
    .c2027-card__por { font-size: 22px; line-height: 20px; }
    .c2027-card__parcelas { font-size: 14px; line-height: 17px; }

    /* Botão de 150x48 com o texto quebrando em duas linhas, como no design. */
    .c2027-card__cta {
        width: 100%;
        min-height: 48px;
        padding: 6px 10px 6px 19px;
        border-radius: 30px;
        gap: 8px;
        font-size: 15px;
        line-height: 17px;
        text-align: left;
    }

    /* ----- Categorias: três por linha ----- */
    .home2027-categorias__lista { grid-template-columns: repeat(3, 1fr); gap: 22px 11px; }
    .home2027-categorias__foto { border-radius: var(--raio-cat); }
    .home2027-categorias__nome { font-size: 15px; }

    /* ----- Como comprar ----- */
    .home2027-passos__lista { grid-template-columns: 1fr; gap: 30px; }
    .home2027-passos__item { min-height: 205px; border-radius: var(--raio-cat); }
    .home2027-passos__conteudo { padding: 20px 16px 20px 24px; }
    .home2027-passos__titulo { margin-bottom: 12px; font-size: 20px; line-height: 24px; }
    .home2027-passos__texto { font-size: 15px; line-height: 19px; }
    .home2027-passos__foto { border-radius: 0 var(--raio-cat) var(--raio-cat) 0; }
    .home2027-passos__aviso { margin-top: 48px; font-size: 16px; line-height: 22px; }

    /* Número a 80px: o bottom acompanha a caixa de linha, como no desktop. */
    .home2027-passos__numero {
        right: 12px;
        bottom: -26px;
        font-size: 80px;
        line-height: 100px;
        -webkit-text-stroke-width: 16px;
    }

    /* ----- Explore por ambientes: um por linha, etiqueta dentro da foto ----- */
    .home2027-ambientes__grade { grid-template-columns: 1fr; gap: 12px; }
    .home2027-ambientes__item--1 { grid-row: auto; min-height: 0; }
    .home2027-ambientes__item,
    .home2027-ambientes__item--2,
    .home2027-ambientes__item--3 { min-height: 0; aspect-ratio: 316 / 212; }

    .home2027-ambientes__tag,
    .home2027-ambientes__item--2 .home2027-ambientes__tag,
    .home2027-ambientes__item--3 .home2027-ambientes__tag {
        left: 16px;
        bottom: 15px;
        min-height: 30px;
        padding: 0 10px;
        font-size: 16px;
    }

    /* ----- Mais do que móveis: dois por linha ----- */
    .home2027-diferenciais { padding: 60px 0 72px; }
    .home2027-diferenciais__titulo { margin-bottom: 48px; font-size: 23px; line-height: 22px; }
    .home2027-diferenciais__titulo span { font-size: 20px; }
    .home2027-diferenciais__lista { grid-template-columns: repeat(2, 1fr); gap: 60px 16px; }
    .home2027-diferenciais__midia { margin-bottom: 37px; }
    .home2027-diferenciais__foto { aspect-ratio: 150 / 142; border-radius: var(--raio-cat); }
    .home2027-diferenciais__icone { width: 46px; height: 46px; }
    .home2027-diferenciais__icone-caixa { width: 23px; height: 23px; }
    .home2027-diferenciais__item-titulo { max-width: 150px; margin-bottom: 11px; font-size: 19px; line-height: 24px; }
    .home2027-diferenciais__item-texto { max-width: 140px; font-size: 16px; line-height: 21px; }

    /* Grafismos menores, na proporção do frame mobile. */
    .home2027-diferenciais::before { width: 60px; height: 77px; }
    .home2027-diferenciais::after { width: 60px; height: 77px; }

    /* ----- Ciello Imper: arte vertical própria -----
       A arte é uma composição fechada (título no topo, logo embaixo), então a
       caixa segue a proporção dela em vez de ter altura fixa. Com min-height
       396px o cover cortava em cima e embaixo assim que a tela passava de
       360px de largura — exatamente onde estão o título e o logo. */
    .home2027-imper {
        min-height: 0;
        aspect-ratio: 360 / 396;
        padding-bottom: 90px;
        background-image: var(--imper-bg-mobile, var(--imper-bg));
    }

    /* O gradiente do mobile tem outro ângulo e só duas paradas. */
    .home2027-imper::before {
        background-image: linear-gradient(
            234.36deg,
            rgba(50, 110, 160, 0) 52.457%,
            rgba(12, 144, 166, 0.6) 69.864%
        );
    }

    .home2027-imper__conteudo { max-width: 233px; }
    .home2027-imper__texto { font-size: 20px; }
    .home2027-imper__cta { width: 160px; min-height: 40px; margin-top: 12px; font-size: 16px; }

    /* ----- Avaliações ----- */
    .home2027-avaliacoes__topo { grid-template-columns: 1fr; gap: 24px; }
    .home2027-avaliacoes .home2027__titulo { text-align: center; line-height: 26px; }
    .home2027-avaliacao { min-height: 216px; padding: 28px 21px; border-radius: var(--raio-cat); }
    .home2027-avaliacao__topo { gap: 19px; }
    .home2027-avaliacao__avatar { width: 40px; height: 40px; }
    .home2027-avaliacao__nome { font-size: 17px; line-height: 22px; }
    .home2027-avaliacao__quando { margin-top: 3px; font-size: 14px; line-height: 14px; }
    .home2027-avaliacao__google { width: 13px; height: 13px; }
    .home2027-avaliacao__google img { width: 10.98px; height: 11.37px; }
    .home2027-avaliacao__estrelas { gap: 3px; margin-top: 12px; }
    .home2027-avaliacao__estrela { width: 11px; height: 10px; }
    .home2027-avaliacao__estrela img { width: 10.39px; height: 9.41px; }
    .home2027-avaliacao__texto { margin-top: 18px; font-size: 15px; line-height: 21px; }
    .home2027-avaliacoes__cta { margin-top: 56px; gap: 19px; }
    .home2027-avaliacoes__cta p { max-width: 235px; font-size: 16px; line-height: 22px; }
    .home2027-avaliacoes__botao { width: 150px; min-height: 40px; font-size: 16px; }

    /* ----- Clientes ----- */
    .home2027-clientes__item { aspect-ratio: 150 / 160; border-radius: var(--raio-cat); }

    /* ----- Lojas: um card por linha ----- */
    .home2027-lojas__grade { grid-template-columns: 1fr; gap: 64px 0; }
    .home2027-lojas__foto { aspect-ratio: 316 / 216; border-radius: var(--raio-cat); }
    .home2027-lojas__nome { left: 16px; bottom: -18px; height: 36px; padding: 0 12px; }
    .home2027-lojas__rotulo { margin-right: 14px; font-size: 17px; line-height: 17px; }
    .home2027-lojas__icone { width: 16px; height: 16px; }
    .home2027-lojas__icone img { width: 12px; height: 13.98px; }
    .home2027-lojas__icone--zap img { width: 13.33px; height: 13.33px; }
}

@media (prefers-reduced-motion: reduce) {
    .home2027-hero__track,
    .home2027-carrossel__progresso,
    .home2027 img { transition: none; }
}