/* =========================================================
   HERO
========================================================= */

.hero{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    align-items:center;

    gap:28px;

    margin-top:18px;

    min-height:78vh;

}


/* =========================================================
   TEXTO
========================================================= */

.hero-copy h1{

    margin:0 0 16px;

    font-size:clamp(2rem,4vw,3.2rem);

    line-height:1.08;

}

.hero-copy p{

    max-width:650px;

    color:var(--muted);

    font-size:1.04rem;

    line-height:1.7;

}


/* =========================================================
   BADGES
========================================================= */

.badge-row{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin:24px 0 20px;

}

.badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    border-radius:999px;

    background:rgba(69,172,171,.14);

    border:1px solid rgba(69,172,171,.22);

    color:var(--text);

    font-size:.94rem;

}


/* =========================================================
   BOTÕES
========================================================= */

.btn-row{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:12px 18px;

    border-radius:999px;

    border:1px solid transparent;

    text-decoration:none;

    font-weight:600;

    transition:

        transform .25s ease,

        box-shadow .25s ease,

        border-color .25s ease;

}

.btn:hover{

    transform:translateY(-2px);

}

.btn-primary{

    color:var(--text);

    background:

        linear-gradient(

            135deg,

            var(--cyan),

            var(--cyan-2)

        );

    box-shadow:

        0 10px 25px rgba(69,172,171,.30);

}

.btn-outline{

    color:var(--text);

    border-color:rgba(255,255,255,.16);

    background:rgba(255,255,255,.04);

}


/* =========================================================
   CARD HERO
========================================================= */

.hero-card{

    padding:24px;

    border-radius:24px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(69,172,171,.27);

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.08),

        0 18px 40px rgba(0,0,0,.24);

    animation:floatCard 5s ease-in-out infinite;

}

.hero-card h3{

    margin:0 0 16px;

    font-size:1.15rem;

}


/* =========================================================
   REVIEW
========================================================= */

.review-carousel{

    position:relative;

    /* Um pouco mais alto que antes pra caber a linha do produto
       (.review-product) sem cortar o texto da avaliação. */
    min-height:270px;

}

.review{

    /* Reserva as bolinhas do carrossel (.review-dots, também
       position:absolute — ver abaixo) numa faixa fixa no rodapé, em
       vez de "inset:0" completo: como os cards ficam empilhados uns
       sobre os outros (só o .active aparece), sem essa reserva as
       bolinhas (que estão fora do fluxo normal por serem irmãs dos
       cards, não filhas) flutuavam no topo, sobrepondo a linha das
       estrelas. */
    position:absolute;

    top:0;
    left:0;
    right:0;
    bottom:34px;

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    transition:

        opacity .5s ease,

        visibility .5s ease;

}

.review.active{

    opacity:1;

    visibility:visible;

}

.review p{

    margin:12px 0;

    line-height:1.7;

    color:var(--text);

    /* Card compacto com altura fixa (ver .review{bottom:34px}) —
       trunca em 2 linhas pra sobrar mais espaço acima do produto
       referenciado (.review-product), que senão fica espremido perto
       das bolinhas do carrossel. O comentário inteiro continua
       legível na página do produto. */
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;

    overflow:hidden;

}

.review-author{

    color:var(--muted);

    font-size:.9rem;

}


/* =========================================================
   PRODUTO AVALIADO
========================================================= */

.review-product{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:14px;

    padding:10px 12px;

    border-radius:var(--radius-sm);

    background:rgba(255,255,255,.04);

    border:1px solid rgba(69,172,171,.18);

    text-decoration:none;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast);

}

.review-product:hover{

    background:rgba(69,172,171,.10);

    border-color:rgba(69,172,171,.35);

}

.review-product img,
.review-product__placeholder{

    flex-shrink:0;

    width:36px;

    height:36px;

    border-radius:10px;

    object-fit:cover;

}

.review-product__placeholder{

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.05);

    color:var(--muted);

}

.review-product__name{

    /* Item de flex container: sem isso, o item não encolhe abaixo do
       tamanho do texto e o nome do produto vaza pra fora do card em
       vez de truncar com reticências. */
    flex:1;
    min-width:0;

    overflow:hidden;

    color:var(--text);

    font-size:.85rem;

    font-weight:600;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.stars{

    display:flex;

    gap:3px;

    /* cor herdada pelos ícones Lucide (stroke/fill = currentColor) */
    color:#FFD54A;

}

.review-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

}

/* Card compacto: fotos menores que na página de produto (ver
   .review-photos em product.css) */
.hero-card .review-photos img{

    width:42px;

    height:42px;

}


/* =========================================================
   DOTS
========================================================= */

.review-dots{

    /* Fora do fluxo normal (irmã dos cards .review, que são todos
       position:absolute) — sem isso, ficava grudada no topo do
       carrossel por falta de conteúdo em fluxo normal acima dela.
       Fixa numa faixa própria no rodapé (ver bottom:34px reservado
       em .review). */
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

}

.dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:rgba(255,255,255,.20);

    transition:.3s ease;

}

.dot.active{

    background:var(--cyan);

    box-shadow:

        0 0 10px rgba(69,172,171,.35);

}