/* --------------------- */
/* RESET BÁSICO          */
/* --------------------- */
* {
    margin: 0;                   /* remove margens padrões do navegador */
    padding: 0;                  /* remove espaçamentos padrões do navegador */
    box-sizing: border-box;      /* inclui bordas/padding no cálculo total */
    font-family: "Poppins", sans-serif; /* fonte padrão */
}

/* --------------------- */
/* LOGO DO TOPO          */
/* --------------------- */
.logo {
  margin-top: 30px; /* Espaçamento para descer a logo do topo */
}

/* --------------------- */
/* BODY (ESTRUTURA GERAL)*/
/* --------------------- */
body {
    padding: 30px 80px;  /* espaço interno lateral e superior */
    overflow-x: hidden;  /* impede barra de rolagem horizontal */
}

/* --------------------- */
/* CONTEÚDO PRINCIPAL    */
/* --------------------- */
.conteudo {
    display: flex;                /* organiza texto + círculo em linha */
    align-items: center;          /* alinha verticalmente */
    justify-content: space-between; /* distribui espaço */
    flex-wrap: wrap;              /* quebra linha em telas pequenas */
    position: relative;           /* base para posicionamento */
}

/* --------------------- */
/* CAIXA DE TEXTO        */
/* --------------------- */
.caixa-texto {
    flex: 1;            /* ocupa espaço flexível */
    min-width: 300px;   /* largura mínima */
    max-width: 600px;   /* largura máxima */
    z-index: 2;         /* garante que fique na frente do círculo */
}

/* --------------------- */
/* ESTILO DE TÍTULOS E TEXTOS */
/* --------------------- */
h1 {
    font-size: 60px;
    font-weight: bold;
}

span {
    color: #017143;     /* cor verde Starbucks */
    font-size: 70px;
    font-weight: 900;   /* bem destacado */
}

p {
    font-size: 16px;
    margin-top: 15px;   /* distância do título */
}

/* --------------------- */
/* BOTÃO                 */
/* --------------------- */
button {
    background-color: #017143;   /* cor principal */
    color: #fff;                 /* texto branco */
    border: none;                /* sem borda */
    padding: 10px 20px;          /* espaço interno */
    border-radius: 40px;         /* bordas arredondadas */
    cursor: pointer;             /* cursor de mãozinha */
    margin-top: 30px;            /* espaçamento abaixo do parágrafo */
    transition: 
        transform 0.2s ease,     /* suaviza o efeito de escala */
        opacity 0.2s ease,       /* suaviza a opacidade */
        background-color 0.2s ease; /* suaviza mudança de cor */
}

/* Efeito ao passar o cursor */
button:hover {
    background-color: #0a4844; /* escurece */
    transform: scale(1.05);   /* cresce levemente */
    opacity: 0.9;             /* fica um pouco mais transparente */
}

/* Efeito ao clicar */
button:active {
    transform: scale(0.95);  /* botão “afunda” */
    opacity: 0.8;            /* escurece mais */
}

/* --------------------- */
/* CÍRCULO PRINCIPAL     */
/* --------------------- */
.circulo {
    position: relative;             /* base para centralização */
    width: 400px;                   /* tamanho fixo */
    height: 400px;
    border-radius: 50%;             /* formato de círculo */
    background: #017143;            /* cor inicial */
    display: flex;                  /* centraliza o copo */
    align-items: center;
    justify-content: center;
    z-index: 1;                     /* fica atrás do texto */
    transition: background 0.5s ease, transform 0.5s ease; /* efeito suave */
}

/* --------------------- */
/* COPO STARBUCKS        */
/* --------------------- */
.copo-starbucks {
    width: 200px;                   /* tamanho padrão */
    transition: transform 0.5s ease; /* suaviza a animação */
}

/* Animação do copo (ao trocar imagem) */
.animar-copo {
    transform: scale(1.1); /* cresce levemente e volta ao normal */
}

/* --------------------- */
/* MENU DE COPINHOS      */
/* --------------------- */
.menu {
    display: flex;
    justify-content: center;
    margin-top: 5px;
    z-index: 2;
}

.botao-menu {
    width: 50px;
    cursor: pointer;
    margin: 0 10px;               /* espaço entre miniaturas */
    transition: transform 0.5s;   /* efeito suave */
}

/* Efeito ao passar o cursor nos copinhos */
.botao-menu:hover {
    transform: translateY(-10px); /* sobe o copinho */
}

/* --------------------- */
/* RESPONSIVIDADE        */
/* --------------------- */

/* Até 860px -> centraliza e ajusta copo */
@media (max-width: 860px) {
    .conteudo {
        justify-content: center;   /* centraliza os elementos */
    }

    .copo-starbucks {
        width: 150px;              /* reduz o copo */
    }
}

/* Até 720px -> centraliza círculo e ajusta tamanho */
@media (max-width: 720px) {
    .conteudo {
        display: flex;              /* garante flex container */
        flex-direction: column;     /* organiza itens em coluna */
        align-items: center;        /* centraliza horizontal */
        justify-content: center;    /* centraliza vertical */
        text-align: center;         /* centraliza textos */
    }

    .circulo {
        width: 250px;   
        height: 250px;
        margin: 20px auto;          /* centraliza horizontalmente */
        position: relative;         /* mantém no fluxo */
        transform: none;            /* remove translate que quebrava */
    }

    .copo-starbucks {
        width: 160px;               /* reduz um pouco o copo */
    }
}

/* Até 480px -> layout mobile */
@media (max-width: 480px) {
    body {
        padding: 20px 10px;
    }

    h1 {
        font-size: 36px;
    }

    span {
        font-size: 42px;
    }

    .circulo {
        width: 200px;
        height: 200px;
    }

    .copo-starbucks {
        width: 120px;
    }

    .botao-menu {
        width: 40px;
        margin: 0 5px;
    }
}