@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap');

:root {
    --cor1: #CDB4DB;
    --cor2: #FFC8DD;
    --cor3: #FFAFCC;
    --cor4: #BDE0FE;
    --cor5: #A2D2FF;
    --fonte-google: "Hachi Maru Pop", 'Arial','cursive', sans-serif;
}


* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body { 
    background: var(--cor1); 
    text-align: justify; 
    font-family: Arial, sans-serif; 
    min-height: 100vh; 
}

h1 { 
    background: var(--cor2); 
    text-align: center; 
    font: normal 50px var(--fonte-google); 
    padding: 10px; 
}

h2 { 
    background: var(--cor2); 
    text-align: center; 
    font: normal 20px Arial, Helvetica, sans-serif; 
    padding: 5px 0 10px 0; 
}

nav { 
    background: var(--cor2); 
    position: relative; 
}

.nav-links { 
    display: flex; 
    justify-content: center; 
    flex-wrap: nowrap; 
    gap: 15px; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; 
}

.nav-links::-webkit-scrollbar { 
    display: none; 
}

nav a { 
    flex: 0 0 auto; 
    text-decoration: none; 
    color: #000; 
    padding: 10px 15px; 
    border-radius: 5px; 
    font-weight: bold; 
    font-size: 16px; 
    transition: all 0.3s ease; 
}
nav a:hover { 
    background: var(--cor1); 
    transform: scale(1.05); 
}

/* ===== MENU HAMBURGER ===== */
.menu-toggle { 
    display: none; 
    font-size: 28px; 
    padding: 10px 15px; 
    cursor: pointer; }

/* ===== TOOLTIP ===== */
.tooltip-box { 
    display: none; 
    position: absolute; 
    background: var(--cor1); 
    border-radius: 10px; 
    padding: 8px 12px; 
    z-index: 10; 
    width: 200px; 
    text-align: left; 
    top: 100%; 
    left: 50%; 
    transform: translateX(-50%); 
    box-shadow: 0px 4px 12px #00000026; 
    font-family: sans-serif; 
}

.tooltip-box p { 
    font: normal 16px Arial, Helvetica, sans-serif; 
    margin: 0; 
    line-height: 1.4; 
}

.tooltip { 
    visibility: hidden; 
    width: 200px; 
    background: var(--cor1); 
    color: #000; 
    border-radius: 6px; 
    padding: 5px; 
    position: absolute; 
    z-index: 1; 
    text-align: left; 
    bottom: 50%; 
    left: 50%; 
    margin-left: -100px; 
    opacity: 0; 
    transition: opacity 0.3s, transform 0.3s; 
    font-family: sans-serif; 
}

.tooltip::before { 
    content: ""; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    margin-left: -5px; 
    border-width: 5px; 
    border-style: solid; 
    border-color: #333 transparent transparent transparent; 
}

.caixa:hover .tooltip { 
    visibility: visible; 
    opacity: 1; 
    transform: scale(1.1); 
}

/* ===== MAIN / GALERIA ===== */
main { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 30px; 
}

.galeria { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 50px; 
}

.caixa { 
    width: 400px; 
    margin: 0; 
    padding: 0; 
    border-radius: 10px; 
    overflow: hidden; 
    box-shadow: 3px 5px 3px #0000001e; 
    border: 2px solid #000; 
    position: relative; 
    display: inline-block; 
    opacity: 0; 
    transform: translateY(20px); 
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; 
}

.caixa.visible { 
    opacity: 1; transform: translateY(0); 
}

.img-container { 
    width: 100%; height: 300px; background-size: cover; background-position: center; 
}

#c1 .img-container { 
    background-image: url(imagens/dog1.jpg); 
}

#c2 .img-container { 
    background-image: url(imagens/dog2.jpg); 
}

#c3 .img-container { 
    background-image: url(imagens/dog3.jpg); 
}

figcaption { 
    font: bold 20px var(--fonte-google); 
    text-align: center; 
    padding: 12px; 
    background-color: var(--cor1); 
    text-shadow: 2px 2px 4px rgba(0,0,0,0.199); 
    transition: transform 0.3s ease; 
}

footer p { 
    font: bold 17px var(--fonte-google); 
    text-align: center; 
    padding: 40px; 
}

footer a { 
    text-decoration: none; 
    color: #000; 
}

.info {
    font: normal 17px sans-serif;
}

/* ===== RESPONSIVIDADE ===== */
@media(max-width:1366px) { 
    .caixa { 
        width: 320px; 
    } 
}

@media(max-width:1024px) { 
    .caixa { 
        width: 250px; 
        height:250px; 
    } 

    h1 { 
        font-size:40px; 
    } 

    h2 { 
        font-size:18px; 
    } 

    nav a { 
        font-size:14px; 
    } 
}

@media(max-width:768px) {
    .caixa { 
        width: 200px; 
        height: 200px; 
    }

    .img-container { 
        height: 250px; 
    } 

    figcaption { 
        font-size: 18px; 
    }

    h1 { 
        font-size:30px;
    } 

    h2 { 
        font-size:16px; 
    } 

    nav a { 
        font-size:12px; 
        padding:8px; 
    }
    /* Menu hamburger */
    .menu-toggle { 
        display: block; 
    }
    .nav-links { 
        display: none; 
        flex-direction: column; 
        gap: 0;
        width: 100%; 
    }

    .nav-links.show { 
    display: flex; 
    }

    /* Tooltips mobile fixo */
    .tooltip-box { 
    position: fixed; 
    bottom:0; 
    left:0; 
    right:0; 
    border-radius:0; 
    margin:0; 
    padding:12px; 
    font-size:14px; 
    text-align:center; 
    display:none; 
    z-index:9999;
    }
}

@media(max-width:480px) { 
    .caixa { 
        width:100%; 
        max-width:300px; 
        height:auto; 
    } 

    .img-container {
        height:200px;
    } 

    figcaption {
        font-size:16px;
    } 

    h1 {
        font-size:24px;
    } 

    h2 {
        font-size:14px;
    } 

    nav a {
        font-size:14px;
    } 

    footer p {
        font-size:12px;
    } 
}