/* ============================================================================
   MYTTA BORDADOS — HOME PREMIUM
   Design system replicado do wireframe de alta fidelidade.
   Carregado por ultimo: sobrescreve site-store-chrome / home-mobile-fluid.
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS -- */
:root {
    /* Paleta oficial (bloco 7 do wireframe) */
    --mt-plum:       #8A6B87;
    --mt-plum-deep:  #6F5370;
    --mt-mauve:      #BFA2B4;
    --mt-lilac:      #D9C7D4;
    --mt-cream:      #F7F4F2;
    --mt-sand:       #ECE7E3;

    --mt-ink:        #2B2230;
    --mt-ink-soft:   #5C5361;
    --mt-muted:      #857C89;
    --mt-line:       rgba(138,107,135,0.16);
    --mt-line-soft:  rgba(138,107,135,0.09);
    --mt-white:      #FFFFFF;

    /* Elevacao */
    --mt-shadow-xs: 0 1px 2px rgba(43,34,48,0.04);
    --mt-shadow-sm: 0 4px 16px rgba(43,34,48,0.05);
    --mt-shadow-md: 0 14px 40px -12px rgba(43,34,48,0.14);
    --mt-shadow-lg: 0 34px 80px -28px rgba(43,34,48,0.28);
    --mt-glow:      0 0 0 1px rgba(138,107,135,0.14), 0 18px 48px -18px rgba(138,107,135,0.42);

    /* Tipografia */
    --mt-serif:  'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --mt-serif-2:'Playfair Display', Georgia, serif;
    --mt-sans:   'Montserrat', 'Inter', system-ui, sans-serif;

    /* Ritmo */
    --mt-shell:  1440px;
    --mt-gutter: clamp(1.15rem, 4vw, 3rem);
    --mt-block:  clamp(3.5rem, 7vw, 7.5rem);

    /* Motion — curvas cinematograficas */
    --mt-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --mt-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
    --mt-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --mt-dur:    0.9s;
}

/* --------------------------------------------------------------- BASE ---- */
body.home-page {
    font-family: var(--mt-sans);
    background: var(--mt-cream);
    color: var(--mt-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.005em;
}
body.home-page ::selection { background: var(--mt-lilac); color: var(--mt-ink); }

.home-page .mt-shell {
    width: 100%;
    max-width: var(--mt-shell);
    margin-inline: auto;
    padding-inline: var(--mt-gutter);
    box-sizing: border-box;
}

/* Cabecalho de secao padronizado (eyebrow + titulo serif + regua) */
.home-page .mt-head { text-align: center; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.home-page .mt-head--left { text-align: left; }
.home-page .mt-eyebrow {
    display: block;
    font-family: var(--mt-sans);
    font-size: clamp(0.6rem, 0.72vw, 0.7rem);
    font-weight: 600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--mt-mauve);
    margin-bottom: 0.9rem;
}
.home-page .mt-title {
    font-family: var(--mt-serif);
    font-weight: 500;
    font-size: clamp(1.9rem, 3.6vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: 0.005em;
    color: var(--mt-plum-deep);
    margin: 0;
}
.home-page .mt-title em { font-style: normal; color: var(--mt-plum); }
.home-page .mt-sub {
    font-size: clamp(0.86rem, 1vw, 0.98rem);
    line-height: 1.7;
    color: var(--mt-muted);
    margin: 0.95rem auto 0;
    max-width: 46ch;
}
.home-page .mt-head--left .mt-sub { margin-inline: 0; }

/* Regua ornamental com losango (repete o detalhe do hero do wireframe) */
.home-page .mt-rule {
    display: flex; align-items: center; justify-content: center;
    gap: 0.75rem; margin: 1.35rem auto 0; width: 132px;
}
.home-page .mt-head--left .mt-rule { margin-inline: 0; justify-content: flex-start; }
.home-page .mt-rule::before,
.home-page .mt-rule::after {
    content: ''; height: 1px; flex: 1;
    background: linear-gradient(90deg, transparent, var(--mt-mauve));
}
.home-page .mt-rule::after { background: linear-gradient(90deg, var(--mt-mauve), transparent); }
.home-page .mt-rule i {
    width: 7px; height: 7px; flex: 0 0 7px;
    transform: rotate(45deg);
    background: var(--mt-plum);
}

/* Titulo legado (pilula dourada) neutralizado */
.home-page .category-section-title {
    display: block; font-family: var(--mt-serif); font-size: clamp(1.9rem, 3.6vw, 3.1rem);
    font-weight: 500; color: var(--mt-plum-deep); text-transform: none; letter-spacing: 0.005em;
    border: 0; padding: 0; border-radius: 0; line-height: 1.08;
}

/* ------------------------------------------------------------- BOTOES ---- */
.home-page .mt-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
    padding: 1.05rem 2.1rem;
    font-family: var(--mt-sans);
    font-size: 0.735rem; font-weight: 600;
    letter-spacing: 0.17em; text-transform: uppercase;
    border-radius: 2px; border: 1px solid transparent;
    cursor: pointer; white-space: nowrap; overflow: hidden; isolation: isolate;
    transition: color .55s var(--mt-ease-out), background-color .55s var(--mt-ease-out),
                border-color .55s var(--mt-ease-out), box-shadow .55s var(--mt-ease-out),
                transform .55s var(--mt-ease-out);
}
/* Preenchimento liquido: pseudo cresce de baixo no hover */
.home-page .mt-btn::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    transform: scaleY(0); transform-origin: bottom;
    transition: transform .6s var(--mt-ease-out);
}
.home-page .mt-btn:hover::before,
.home-page .mt-btn:focus-visible::before { transform: scaleY(1); }
.home-page .mt-btn i { transition: transform .5s var(--mt-ease-out); }
.home-page .mt-btn:hover i { transform: translateX(5px); }
.home-page .mt-btn:active { transform: translateY(1px) scale(0.985); }

.home-page .mt-btn--primary {
    background: var(--mt-plum); color: var(--mt-white);
    box-shadow: 0 14px 32px -16px rgba(111,83,112,0.85);
}
.home-page .mt-btn--primary::before { background: var(--mt-plum-deep); }
.home-page .mt-btn--primary:hover {
    color: var(--mt-white);
    box-shadow: 0 22px 48px -18px rgba(111,83,112,0.95);
}
.home-page .mt-btn--ghost {
    background: transparent; color: var(--mt-plum); border-color: var(--mt-lilac);
}
.home-page .mt-btn--ghost::before { background: var(--mt-plum); }
.home-page .mt-btn--ghost:hover { color: var(--mt-white); border-color: var(--mt-plum); }
.home-page .mt-btn--light {
    background: var(--mt-white); color: var(--mt-plum);
    box-shadow: var(--mt-shadow-sm);
}
.home-page .mt-btn--light::before { background: var(--mt-plum); }
.home-page .mt-btn--light:hover { color: var(--mt-white); }
.home-page .mt-btn--on-dark {
    background: transparent; color: var(--mt-white); border-color: rgba(255,255,255,0.55);
}
.home-page .mt-btn--on-dark::before { background: var(--mt-white); }
.home-page .mt-btn--on-dark:hover { color: var(--mt-plum); border-color: var(--mt-white); }

/* Link com sublinhado que corre da esquerda */
.home-page .mt-link {
    position: relative; display: inline-flex; align-items: center; gap: 0.55rem;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.19em;
    text-transform: uppercase; color: var(--mt-plum); padding-bottom: 0.35rem;
}
.home-page .mt-link::after {
    content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
    background: var(--mt-plum); transform: scaleX(0); transform-origin: right;
    transition: transform .55s var(--mt-ease-out);
}
.home-page .mt-link i { transition: transform .5s var(--mt-ease-out); }
.home-page a:hover .mt-link::after,
.home-page .mt-link:hover::after { transform: scaleX(1); transform-origin: left; }
.home-page a:hover .mt-link i,
.home-page .mt-link:hover i { transform: translateX(6px); }

/* ============================================================ 1. HERO ==== */
/* O hero e um palco de altura definida: a arte do banner e recortada pela
   direita (a esquerda da arte ja traz texto queimado na imagem) e a coluna
   de leitura fica sobre o scrim claro, como no wireframe. */
.home-page .home-hero {
    position: relative;
    width: 100%;
    min-height: clamp(560px, 78vh, 820px);
    display: grid;
    align-items: center;
    isolation: isolate;
    background: var(--mt-sand);
    overflow: hidden;
}
.home-page .home-hero-banner-slot {
    position: absolute; inset: 0; z-index: 0;
    line-height: 0;
}
.home-page .home-hero-banner-slot:not(:empty)::after { display: none; }

/* Faz a arvore do carrossel/banner preencher o palco por inteiro */
.home-page .home-hero-banner-slot > *,
.home-page .home-hero-banner-slot .banner-carousel,
.home-page .home-hero-banner-slot .banner-carousel-viewport,
.home-page .home-hero-banner-slot .banner-carousel-track,
.home-page .home-hero-banner-slot .banner-carousel-track > *,
.home-page .home-hero-banner-slot [data-template-id],
.home-page .home-hero-banner-slot [data-template-id] > div {
    height: 100%; width: 100%;
}
/* Especificidade alta de proposito: home-mobile-fluid.css trava
   height:auto !important em body.home-page ... .home-banner-fullwidth-img. */
body.home-page .home-hero .home-hero-banner-slot img,
body.home-page .home-hero .home-hero-banner-slot .home-banner-fullwidth-img,
body.home-page .home-hero .home-hero-banner-slot video {
    width: 100% !important; height: 100% !important; max-width: none !important;
    object-fit: cover !important;
    object-position: 88% center;
    will-change: transform;
    transform: translate3d(0, var(--mt-hero-shift, 0px), 0) scale(1.06);
    animation: mtKenBurns 22s var(--mt-ease-in-out) infinite alternate;
}
@keyframes mtKenBurns {
    from { transform: translate3d(0, var(--mt-hero-shift, 0px), 0) scale(1.085); }
    to   { transform: translate3d(0, var(--mt-hero-shift, 0px), 0) scale(1.005); }
}

/* Scrim: coluna de leitura clara a esquerda, arte revelada a direita */
.home-page .home-hero::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(96deg,
            rgba(247,244,242,1.00) 0%,
            rgba(247,244,242,1.00) 34%,
            rgba(247,244,242,0.97) 43%,
            rgba(247,244,242,0.72) 52%,
            rgba(247,244,242,0.28) 63%,
            rgba(247,244,242,0.00) 75%);
}
.home-page .home-hero::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 22%;
    z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(247,244,242,0) 0%, var(--mt-cream) 94%);
}

.home-page .home-hero-overlay {
    position: relative; z-index: 2;
    width: 100%;
    display: flex; align-items: center;
    padding-block: clamp(3rem, 6vw, 5rem);
}
.home-page .home-hero-copy {
    width: 100%; max-width: var(--mt-shell);
    margin-inline: auto; padding-inline: var(--mt-gutter);
    box-sizing: border-box;
}

.home-page .home-hero-eyebrow {
    display: block;
    font-size: clamp(0.6rem, 0.75vw, 0.72rem);
    font-weight: 600; letter-spacing: 0.42em; text-transform: uppercase;
    color: var(--mt-ink-soft); margin-bottom: clamp(1rem, 1.6vw, 1.5rem);
}
.home-page .home-hero-title {
    font-family: var(--mt-serif);
    font-weight: 500;
    font-size: clamp(2.5rem, 5.4vw, 5.15rem);
    line-height: 0.98;
    letter-spacing: -0.005em;
    color: var(--mt-ink);
    margin: 0;
}
/* Cada linha e um bloco com mascara — o span interno sobe de baixo na entrada */
.home-page .home-hero-line {
    display: block; overflow: hidden; padding-bottom: 0.06em;
}
.home-page .home-hero-line > span { display: block; }
.home-page .home-hero-line--accent > span { color: var(--mt-plum); }

.home-page .home-hero-rule {
    display: flex; align-items: center; gap: 0.7rem;
    width: clamp(120px, 14vw, 178px);
    margin: clamp(1.35rem, 2.4vw, 2.1rem) 0;
}
.home-page .home-hero-rule::before {
    content: ''; height: 1px; flex: 1;
    background: linear-gradient(90deg, var(--mt-mauve), rgba(191,162,180,0.15));
}
.home-page .home-hero-rule i {
    width: 7px; height: 7px; flex: 0 0 7px; transform: rotate(45deg);
    background: var(--mt-plum);
}
.home-page .home-hero-text {
    font-size: clamp(0.92rem, 1.05vw, 1.06rem);
    line-height: 1.75; color: var(--mt-ink-soft);
    max-width: 32ch; margin: 0 0 clamp(1.8rem, 2.8vw, 2.6rem);
}
.home-page .home-hero-actions { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.home-page .home-hero-actions .mt-btn { padding-block: clamp(0.95rem, 1.2vw, 1.15rem); }

/* Botao "Como funciona" com anel de play pulsante */
.home-page .home-hero-play {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    border: 1px solid currentColor; font-size: 0.55rem; position: relative;
}
.home-page .home-hero-play::after {
    content: ''; position: absolute; inset: -3px; border-radius: 50%;
    border: 1px solid currentColor; opacity: 0;
    animation: mtPlayPulse 2.6s var(--mt-ease-out) infinite;
}
@keyframes mtPlayPulse {
    0%   { transform: scale(0.85); opacity: 0.55; }
    70%  { transform: scale(1.5);  opacity: 0; }
    100% { transform: scale(1.5);  opacity: 0; }
}

/* Dots do carrossel do hero — alinhados a coluna de texto */
.home-page .home-hero-dots-anchor {
    position: absolute; left: 0; right: 0; bottom: clamp(1.4rem, 3.2vw, 3rem);
    z-index: 3; pointer-events: none;
    max-width: var(--mt-shell); margin-inline: auto; padding-inline: var(--mt-gutter);
}
.home-page .home-hero-dots { display: flex; align-items: center; gap: 0.6rem; }
.home-page .home-hero-dots[hidden] { display: none; }
.home-page .home-hero-dot {
    width: 9px; height: 9px; border-radius: 50%; padding: 0; cursor: pointer;
    border: 1px solid var(--mt-mauve); background: transparent;
    pointer-events: auto;
    transition: background-color .45s var(--mt-ease-out), transform .45s var(--mt-ease-out),
                border-color .45s var(--mt-ease-out);
}
.home-page .home-hero-dot:hover { transform: scale(1.25); }
.home-page .home-hero-dot.is-active {
    background: var(--mt-plum); border-color: var(--mt-plum); transform: scale(1.15);
}

/* Faixa de CTA legada abaixo do banner: absorvida pelo overlay */
.home-page .home-hero-cta-row { display: none; }

/* Hero mobile: arte no topo, texto sobre base solida */
@media (max-width: 860px) {
    .home-page .home-hero { min-height: clamp(600px, 92vh, 780px); align-items: end; }
    body.home-page .home-hero .home-hero-banner-slot img,
    body.home-page .home-hero .home-hero-banner-slot .home-banner-fullwidth-img,
    body.home-page .home-hero .home-hero-banner-slot video { object-position: 68% center; }
    .home-page .home-hero::before {
        background: linear-gradient(180deg,
            rgba(247,244,242,0.06) 0%,
            rgba(247,244,242,0.22) 28%,
            rgba(247,244,242,0.86) 44%,
            rgba(247,244,242,0.99) 56%,
            rgba(247,244,242,1) 66%);
    }
    .home-page .home-hero-overlay { padding-bottom: clamp(3.5rem, 9vw, 5rem); }
    .home-page .home-hero-text { max-width: 100%; }
    .home-page .home-hero-actions .mt-btn { flex: 1 1 auto; }
    .home-page .home-hero-dots-anchor { bottom: 1rem; }
    .home-page .home-hero-dots { justify-content: center; }
}
@media (max-width: 480px) {
    .home-page .home-hero-title { font-size: clamp(2.05rem, 11vw, 2.9rem); }
    .home-page .home-hero-eyebrow { letter-spacing: 0.3em; }
}

/* ================================================ 2. NOSSAS TOALHAS ====== */
.home-page .towel-types-section {
    padding: var(--mt-block) 0 calc(var(--mt-block) * 0.75);
    background: var(--mt-cream);
}
.home-page .towel-types-container {
    max-width: var(--mt-shell); padding-inline: var(--mt-gutter);
}
.home-page .towel-types-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.1rem, 2vw, 2rem);
}
.home-page .towel-type-card {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--mt-white);
    border: 1px solid var(--mt-line-soft);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--mt-shadow-sm);
    transition: transform .75s var(--mt-ease-out), box-shadow .75s var(--mt-ease-out),
                border-color .75s var(--mt-ease-out);
}
.home-page .towel-type-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--mt-shadow-lg);
    border-color: var(--mt-lilac);
}
/* Brilho diagonal que cruza o card no hover */
.home-page .towel-type-card::after {
    content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.42) 50%, transparent 62%);
    transform: translateX(-120%);
    transition: transform 1.1s var(--mt-ease-out);
}
.home-page .towel-type-card:hover::after { transform: translateX(120%); }

.home-page .towel-type-img {
    aspect-ratio: 4/3; overflow: hidden; background: var(--mt-sand);
}
.home-page .towel-type-img img {
    width: 100%; height: 100%; object-fit: cover;
    /* placeholder atual reaproveita a arte do banner, que traz texto queimado
       na metade esquerda: enquadra no monograma ate haver foto por tipo */
    object-position: 72% center;
    transform: scale(1.01);
    transition: transform 1.3s var(--mt-ease-out), filter 1.3s var(--mt-ease-out);
}
.home-page .towel-type-card:hover .towel-type-img img {
    transform: scale(1.09); filter: saturate(1.06);
}
.home-page .towel-type-img--contain {
    display: flex; align-items: center; justify-content: center;
}
.home-page .towel-type-img--contain img,
.home-page .towel-type-card:hover .towel-type-img--contain img {
    width: 100%; height: 100%; object-fit: contain; object-position: center;
    transform: none;
}
.home-page .towel-type-body { padding: clamp(1.4rem, 2vw, 2rem); }
.home-page .towel-type-body h3 {
    font-family: var(--mt-serif); font-weight: 400;
    font-size: clamp(1.7rem, 2.2vw, 2.2rem); line-height: 1.05;
    color: var(--mt-ink); margin: 0 0 0.75rem;
}
.home-page .towel-type-kicker {
    display: block; font-family: var(--mt-sans);
    font-size: 0.62rem; font-weight: 600; letter-spacing: 0.28em;
    text-transform: uppercase; color: var(--mt-mauve); margin-bottom: 0.3rem;
}
.home-page .towel-type-body h3 strong { color: var(--mt-plum); font-weight: 500; }
.home-page .towel-type-body p {
    font-size: 0.87rem; line-height: 1.72; color: var(--mt-muted);
    margin: 0 0 1.35rem; max-width: 30ch;
}
.home-page .towel-type-body hr {
    border: 0; height: 1px; background: var(--mt-line); margin: 0 0 1.15rem;
}
@media (max-width: 900px) { .home-page .towel-types-grid { grid-template-columns: 1fr; } }
/* Setas do carrossel de Lavabo/Rosto/Banho: só existem no layout mobile
   (ver home-mobile-fluid.css, <=768px) — acima disso a grade de 3 colunas
   já mostra tudo de uma vez, sem nada pra "passar". */
.home-page .towel-types-carousel-wrapper .carousel-nav-btn { display: none; }

/* ================================================ DEPARTAMENTOS ========== */
.home-page .departments-section {
    background: var(--mt-cream);
    padding: 0 0 calc(var(--mt-block) * 0.5);
}

/* =============================================== 3. PASSO A PASSO ======== */
.home-page .how-it-works-section {
    position: relative;
    padding: var(--mt-block) 0;
    background: var(--mt-cream);
    text-align: center;
    overflow: hidden;
}
/* Monograma gigante em marca d'agua ao fundo */
.home-page .how-it-works-section::before {
    content: ''; position: absolute; z-index: 0;
    right: -6%; top: 50%; width: min(46vw, 620px); aspect-ratio: 1;
    transform: translateY(-50%);
    background: radial-gradient(circle at 50% 50%, rgba(217,199,212,0.30), transparent 62%);
    pointer-events: none;
}
.home-page .how-it-works-container {
    position: relative; z-index: 1;
    max-width: var(--mt-shell); padding-inline: var(--mt-gutter);
}
.home-page .how-it-works-subtitle { display: none; }
/* "Passo a passo" e "Nossas Toalhas" tem o mesmo fundo (--mt-cream) e cada
   uma ja carrega padding-top + padding-bottom de --mt-block (120px no
   desktop) — encostadas, a borda somada vira um vazio de ~250px sem
   nenhuma quebra visual entre elas. Zera o lado que se toca, mantendo o
   respiro (--mt-block) so do lado de fora de cada uma. */
.home-page .how-it-works-section:has(+ .towel-types-section) { padding-bottom: 0; }
.home-page .towel-types-section:has(+ .how-it-works-section) { padding-bottom: 0; }
.home-page .how-it-works-section + .towel-types-section { padding-top: 0; }
.home-page .towel-types-section + .how-it-works-section { padding-top: 0; }
.home-page .how-it-works-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    counter-reset: mtstep;
}
.home-page .how-it-works-step {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: clamp(0.9rem, 1.4vw, 1.35rem);
    text-align: left;
}
/* Fio conector entre os passos */
.home-page .how-it-works-step:not(:last-child)::after {
    content: ''; position: absolute; top: 34px; right: calc(-1 * clamp(0.75rem, 1.5vw, 1.5rem));
    width: clamp(0.75rem, 1.5vw, 1.5rem); height: 1px;
    background: var(--mt-line);
}
.home-page .how-it-works-icon {
    position: relative;
    width: 68px; height: 68px; flex: 0 0 68px;
    border-radius: 50%;
    border: 1px solid var(--mt-lilac);
    display: grid; place-items: center;
    color: var(--mt-plum); font-size: 1.4rem;
    background: var(--mt-white);
    transition: transform .7s var(--mt-ease-out), border-color .7s var(--mt-ease-out),
                box-shadow .7s var(--mt-ease-out), color .7s var(--mt-ease-out);
}
.home-page .how-it-works-icon--logo img { width: 38px; height: 38px; object-fit: contain; }
.home-page .how-it-works-step:hover .how-it-works-icon {
    transform: translateY(-6px) rotate(-4deg);
    border-color: var(--mt-plum);
    box-shadow: var(--mt-glow);
}
/* Anel que se desenha ao passar o mouse */
.home-page .how-it-works-icon::before {
    content: ''; position: absolute; inset: -6px; border-radius: 50%;
    border: 1px solid var(--mt-lilac);
    opacity: 0; transform: scale(0.86);
    transition: opacity .7s var(--mt-ease-out), transform .7s var(--mt-ease-out);
}
.home-page .how-it-works-step:hover .how-it-works-icon::before { opacity: 1; transform: scale(1); }

/* Numeral serif grande — igual ao wireframe (01 02 03 04) */
.home-page .how-it-works-num {
    position: static;
    width: auto; height: auto; border-radius: 0; background: none;
    font-family: var(--mt-serif); font-weight: 300;
    font-size: clamp(2.1rem, 2.8vw, 2.85rem);
    line-height: 1; color: var(--mt-mauve);
    display: block; margin-bottom: 0.45rem;
    transition: color .7s var(--mt-ease-out);
}
.home-page .how-it-works-step:hover .how-it-works-num { color: var(--mt-plum); }
.home-page .how-it-works-step h4 {
    font-family: var(--mt-sans);
    font-size: 0.775rem; font-weight: 600; letter-spacing: 0.13em;
    text-transform: uppercase; color: var(--mt-ink);
    margin: 0 0 0.5rem; line-height: 1.5;
}
.home-page .how-it-works-step p {
    font-size: 0.82rem; line-height: 1.72; color: var(--mt-muted); margin: 0;
}
@media (max-width: 900px) {
    .home-page .how-it-works-grid { grid-template-columns: 1fr 1fr; }
    .home-page .how-it-works-step:not(:last-child)::after { display: none; }
}
@media (max-width: 520px) { .home-page .how-it-works-grid { grid-template-columns: 1fr; } }

/* ================================================= 4. BENEFICIOS ========= */
.home-page .benefits-section {
    padding: var(--mt-block) 0;
    background: var(--mt-sand);
}
.home-page .benefits-container { max-width: var(--mt-shell); padding-inline: var(--mt-gutter); }
.home-page .benefits-grid {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 0;
}
/* Sem cards: itens separados por filete vertical (igual wireframe) */
.home-page .benefit-item {
    position: relative;
    background: transparent; border-radius: 0; box-shadow: none;
    padding: clamp(0.5rem, 1.5vw, 1.25rem) clamp(0.9rem, 1.8vw, 1.85rem);
    text-align: center;
    /* A grade de 5 colunas estica todo mundo pra altura do item mais alto
       (texto da "Toalha Dohler" bem mais longo que os outros) — sem isso os
       itens curtos sobravam com uma faixa em branco enorme so embaixo, em
       vez do respiro ficar distribuido em volta do conteudo. */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.home-page .benefit-item + .benefit-item::before {
    content: ''; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px;
    background: var(--mt-line);
}
.home-page .benefit-icon {
    width: auto; height: auto; border-radius: 0; background: none;
    display: block; margin: 0 auto 1.15rem;
    color: var(--mt-plum); font-size: clamp(1.75rem, 2.3vw, 2.1rem);
    line-height: 1;
    transition: transform .7s var(--mt-ease-out), color .7s var(--mt-ease-out);
}
.home-page .benefit-item:hover .benefit-icon {
    transform: translateY(-8px) scale(1.08); color: var(--mt-plum-deep);
}
.home-page .benefit-item h4 {
    font-family: var(--mt-sans);
    font-size: 0.755rem; font-weight: 600; letter-spacing: 0.13em;
    text-transform: uppercase; color: var(--mt-ink);
    margin: 0 0 0.6rem; line-height: 1.55;
    /* reserva 2 linhas para alinhar as descricoes entre as colunas */
    min-height: calc(2 * 1.55em);
    display: flex; align-items: center; justify-content: center;
}
.home-page .benefit-item p {
    font-size: 0.8rem; line-height: 1.72; color: var(--mt-muted); margin: 0;
}
@media (max-width: 1024px) {
    .home-page .benefits-grid { grid-template-columns: repeat(3, 1fr); row-gap: 2.5rem; }
    .home-page .benefit-item:nth-child(3n+1)::before { display: none; }
}
@media (max-width: 640px) {
    .home-page .benefits-grid { grid-template-columns: 1fr 1fr; row-gap: 2.25rem; }
    .home-page .benefit-item::before { display: none !important; }
    .home-page .benefit-item + .benefit-item::before { display: none; }
}

/* ================================================== 5. PRESENTES ========= */
.home-page .gift-ideas-section {
    padding: var(--mt-block) var(--mt-gutter);
    background: var(--mt-cream);
}
/* grid-template-columns:minmax(240px,300px) 1fr foi desenhado pra 2
   colunas (texto + .gift-ideas-grid de 5 fotos), mas esse grid de fotos
   nunca existiu no HTML (nem existe JS que o preencha) — a 2ª coluna
   (1fr) sempre ficou reservada e vazia, empurrando o texto pro canto
   esquerdo do card em vez de centralizado. Como só sobrou o texto,
   1 coluna centralizada preenchendo a largura toda do card. */
.home-page .gift-ideas-container {
    max-width: var(--mt-shell);
    background: transparent; border-radius: 0; box-shadow: none; padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    gap: clamp(2rem, 4vw, 4.5rem);
}
.home-page .gift-ideas-text {
    width: 100%;
    max-width: 640px;
    text-align: center;
}
.home-page .gift-ideas-text h2 {
    font-family: var(--mt-serif); font-weight: 500;
    font-size: clamp(1.9rem, 3.2vw, 2.9rem); line-height: 1.08;
    color: var(--mt-plum-deep); margin: 0 0 1rem;
}
.home-page .gift-ideas-text p {
    font-size: 0.9rem; line-height: 1.75; color: var(--mt-muted); margin: 0 0 1.75rem;
}
.home-page .gift-ideas-text .mt-btn { margin-inline: auto; }
.home-page .gift-ideas-grid {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: clamp(0.7rem, 1.4vw, 1.35rem);
    flex: none;
}
.home-page .gift-idea-item {
    display: flex; flex-direction: column; gap: 0.85rem; align-items: stretch;
}
/* Wireframe usa retangulo arredondado, nao circulo */
.home-page .gift-idea-img {
    width: 100%; height: auto; aspect-ratio: 1;
    border-radius: 3px; border: 0; overflow: hidden;
    background: var(--mt-sand);
    box-shadow: var(--mt-shadow-xs);
    transition: box-shadow .7s var(--mt-ease-out), transform .7s var(--mt-ease-out);
}
.home-page .gift-idea-img img {
    width: 100%; height: 100%; object-fit: cover;
    object-position: 72% center;
    transition: transform 1.2s var(--mt-ease-out), filter 1.2s var(--mt-ease-out);
}
.home-page .gift-idea-item:hover .gift-idea-img {
    transform: translateY(-7px); box-shadow: var(--mt-shadow-md);
}
.home-page .gift-idea-item:hover .gift-idea-img img { transform: scale(1.1); }
.home-page .gift-idea-item span {
    font-size: 0.655rem; font-weight: 600; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--mt-ink-soft); text-align: center;
    transition: color .5s var(--mt-ease-out);
}
.home-page .gift-idea-item:hover span { color: var(--mt-plum); }
@media (max-width: 1024px) {
    .home-page .gift-ideas-container { grid-template-columns: 1fr; }
    .home-page .gift-ideas-text { max-width: 46ch; }
}
@media (max-width: 640px) {
    .home-page .gift-ideas-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Categorias (departamentos) — mesmo padrao visual dos cards de "Ideias de presente" */
.home-page .departments-carousel {
    grid-auto-columns: calc((100% - 7 * 0.6rem) / 8);
    gap: 1rem 0.6rem;
}
.home-page .department-card {
    align-items: stretch; gap: 0.85rem; transform: none;
}
.home-page .department-card:hover { transform: none; }
.home-page .department-image-container {
    width: 100%; height: auto; aspect-ratio: 1; min-width: 0;
    border-radius: 16px; border: 0; overflow: hidden;
    background: var(--mt-white); box-shadow: var(--mt-shadow-xs);
    margin-bottom: 0;
    transition: box-shadow .7s var(--mt-ease-out), transform .7s var(--mt-ease-out);
}
.home-page .department-image,
.home-page .department-image-container img {
    width: 100%; height: 100%; object-fit: cover; object-position: 72% center; border-radius: 16px;
    transition: transform 1.2s var(--mt-ease-out);
}
.home-page .department-icon-fallback { color: var(--mt-plum); font-size: 1.75rem; }
.home-page .department-card:hover .department-image-container {
    box-shadow: var(--mt-shadow-md); transform: translateY(-7px); border-color: transparent;
}
.home-page .department-card:hover .department-image,
.home-page .department-card:hover .department-image-container img { transform: scale(1.1); }
.home-page .department-name {
    font-size: 0.6rem; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--mt-ink-soft); text-align: center;
    line-height: 1.5; transition: color .5s var(--mt-ease-out); margin: 0;
    padding: 0; border-radius: 0; max-width: none;
    word-break: keep-all; overflow-wrap: normal; hyphens: none;
    overflow: visible; white-space: normal;
}
.home-page .department-card:hover .department-name { color: var(--mt-plum); background: transparent; }
.home-page .carousel-nav-btn { color: var(--mt-plum); border-color: var(--mt-lilac); }
.home-page .carousel-nav-btn:hover { background: var(--mt-plum); color: var(--mt-white); border-color: var(--mt-plum); }

/* ================================================== 6. ORCAMENTO ========= */
.home-page .quote-banner-section {
    padding: 0;
    background: var(--mt-white);
    margin: clamp(1.5rem, 3vw, 2.75rem) 0 !important;
}
.home-page .quote-banner {
    position: relative; isolation: isolate; overflow: hidden;
    max-width: 100%; width: 100%;
    /* Wireframe: faixa clara lilas, nao roxo escuro */
    background: linear-gradient(100deg, var(--mt-sand) 0%, #F3EBF1 46%, var(--mt-lilac) 100%);
    border-radius: 4px;
    box-shadow: var(--mt-shadow-sm);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
    padding: clamp(2rem, 3.6vw, 3.25rem) clamp(1.75rem, 3.6vw, 3.5rem);
}
/* Brilho que varre a faixa lentamente */
.home-page .quote-banner::before {
    content: ''; position: absolute; inset: -40% -10%; z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.55) 50%, transparent 60%);
    animation: mtSheen 7s var(--mt-ease-in-out) infinite;
}
@keyframes mtSheen {
    0%, 62% { transform: translateX(-65%); }
    100%    { transform: translateX(65%); }
}
.home-page .quote-banner-icon {
    width: clamp(76px, 8vw, 108px); height: clamp(76px, 8vw, 108px);
    border-radius: 50%; background: rgba(255,255,255,0.55);
    border: 1px solid rgba(255,255,255,0.85);
    display: grid; place-items: center;
    /* A imagem ocupa a moldura inteira: `overflow: hidden` e quem mantem o
       recorte redondo, no lugar do respiro interno que havia antes. */
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}
.home-page .quote-banner-icon svg,
.home-page .quote-banner-icon img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    border-radius: inherit;
    animation: mtFloat 6s var(--mt-ease-in-out) infinite;
}
@keyframes mtFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}
.home-page .quote-banner-text h3 {
    font-family: var(--mt-serif); font-weight: 500;
    font-size: clamp(1.6rem, 2.8vw, 2.5rem); line-height: 1.1;
    text-transform: none; letter-spacing: 0;
    color: var(--mt-ink); margin: 0 0 0.6rem;
}
.home-page .quote-banner-text p {
    font-size: 0.9rem; line-height: 1.72; color: var(--mt-ink-soft);
    margin: 0; max-width: 52ch;
}
.home-page .quote-banner-btn {
    display: inline-flex; align-items: center; gap: 0.7rem;
    padding: 1.05rem 2.1rem; border-radius: 2px;
    background: var(--mt-plum); color: var(--mt-white);
    font-size: 0.735rem; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 14px 32px -16px rgba(111,83,112,0.85);
    transition: background-color .55s var(--mt-ease-out), transform .55s var(--mt-ease-out),
                box-shadow .55s var(--mt-ease-out);
}
.home-page .quote-banner-btn:hover {
    background: var(--mt-plum-deep); transform: translateY(-3px);
    box-shadow: 0 22px 46px -18px rgba(111,83,112,0.95);
}
.home-page .quote-banner-btn i { font-size: 1.05rem; }
@media (max-width: 900px) {
    .home-page .quote-banner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .home-page .quote-banner-text p { margin-inline: auto; }
}

/* Rodape: regras unificadas em mytta-theme.css (fonte unica do cromo). */

/* ============================================ MOTOR DE ANIMACAO ========== */
/* Estados de entrada aplicados por home-premium-motion.js.
   Sem JS ou sem suporte a IntersectionObserver o conteudo fica visivel. */
.home-page[data-mt-motion="on"] [data-mt-reveal] {
    opacity: 0;
    transform: translate3d(0, var(--mt-reveal-y, 34px), 0) scale(var(--mt-reveal-s, 1));
    filter: blur(var(--mt-reveal-b, 6px));
    transition:
        opacity 1s var(--mt-ease-out) var(--mt-delay, 0ms),
        transform 1.1s var(--mt-ease-out) var(--mt-delay, 0ms),
        filter 1s var(--mt-ease-out) var(--mt-delay, 0ms);
    will-change: opacity, transform, filter;
}
.home-page[data-mt-motion="on"] [data-mt-reveal].is-inview {
    opacity: 1; transform: none; filter: blur(0);
}
/* Variantes */
.home-page[data-mt-motion="on"] [data-mt-reveal="mask"] {
    --mt-reveal-y: 100%; --mt-reveal-b: 0px;
}
.home-page[data-mt-motion="on"] [data-mt-reveal="left"]  { --mt-reveal-y: 0px; transform: translate3d(-42px,0,0); }
.home-page[data-mt-motion="on"] [data-mt-reveal="right"] { --mt-reveal-y: 0px; transform: translate3d(42px,0,0); }
.home-page[data-mt-motion="on"] [data-mt-reveal="zoom"]  { --mt-reveal-y: 18px; --mt-reveal-s: 0.94; }
.home-page[data-mt-motion="on"] [data-mt-reveal="rule"]  {
    --mt-reveal-y: 0px; --mt-reveal-b: 0px;
    transform: scaleX(0); transform-origin: left;
}

/* Acessibilidade: respeita reducao de movimento */
@media (prefers-reduced-motion: reduce) {
    .home-page *,
    .home-page *::before,
    .home-page *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .home-page[data-mt-motion="on"] [data-mt-reveal] {
        opacity: 1 !important; transform: none !important; filter: none !important;
    }
}