/* =============================
   SUPER RESPONSIVE — Gabriel MR
   Foco em mobile first, tipografia fluida,
   grids elásticos, navegação sem hambúrguer.
   Só responsividade (sem estilos base).
============================= */

/* ---------- Preferências do usuário ---------- */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }

    html {
        scroll-behavior: auto !important;
    }
}

/* ---------- Utilidades globais ---------- */
img {
    max-width: 100%;
    height: auto;
}

.wrap {
    width: min(1120px, 92vw);
    margin-inline: auto;
}

.space {
    height: clamp(16px, 4vw, 28px);
}

.section-title {
    line-height: 1.15;
}

.section-sub {
    max-width: 70ch;
}

/* Botões mais "tocáveis" no mobile */
.btn {
    min-height: 44px;
    padding: 0.8rem 1.2rem;
}

/* ---------- Header / Topbar ---------- */
.site {
    position: sticky;
    top: 0;
    z-index: 50;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(10px, 2vw, 32px);
    padding: clamp(10px, 2.4vw, 18px) 0;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    white-space: nowrap;
}

.brand .muted {
    opacity: .7;
    font-size: clamp(.78rem, 1.6vw, .9rem);
}

/* Menu sem hambúrguer: quebra linha quando faltar espaço */
nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(.4rem, 1.8vw, 1.1rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

nav a {
    display: inline-block;
    padding: .4rem .6rem;
    border-radius: 10px;
}

/* ---------- HERO ---------- */
.hero {
    display: grid;
    place-items: center;
    text-align: center;
    min-height: min(72vh, 860px);
    padding: 8vh 0;
}

.hero .inner {
    width: min(980px, 92vw);
    margin-inline: auto;
}

.hero .eyebrow {
    letter-spacing: .18em;
    font-size: clamp(.65rem, 1.4vw, .8rem);
    opacity: .7;
}

.hero .title {
    font-size: clamp(1.8rem, 6vw, 3.8rem);
    margin: .6rem 0 .4rem;
}

.hero .subtitle {
    font-size: clamp(1rem, 2.6vw, 1.25rem);
    opacity: .85;
}

.hero .cta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.1rem;
}

/* ---------- SOBRE & MEDIDAS ---------- */
.about {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(18px, 3vw, 36px);
    align-items: start;
}

.about .portrait {
    max-width: 560px;
    border-radius: 14px;
    overflow: hidden;
}

.measures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem 1rem;
}

.measure b {
    font-weight: 600;
}

/* ---------- FILTROS (chips) ---------- */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .6rem;
    margin: 1rem 0 1.1rem;
}

.chip {
    padding: .5rem .85rem;
    border-radius: 999px;
    font-size: clamp(.85rem, 2.2vw, .95rem);
}

/* ---------- GALERIA ---------- */
.gallery {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(10px, 1.6vw, 16px);
}

.card {
    grid-column: span 4;
    border-radius: 12px;
    overflow: hidden;
}

.card.wide {
    grid-column: span 6;
}

.card.tall img {
    aspect-ratio: 3/4;
    object-fit: cover;
}

.card img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.cap {
    padding: .6rem .75rem;
    font-size: .9rem;
    opacity: .85;
}

.divider {
    height: 1px;
    background: currentColor;
    opacity: .12;
    margin: clamp(18px, 3vw, 28px) 0;
}


/* ---------- Logos de clientes ---------- */
.logos {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(8px, 1.6vw, 14px);
    align-items: center;
}

.logo-card {
    min-height: 60px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    padding: .6rem;
}

/* ---------- Polaroids ---------- */
.polaroids {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 2.2vw, 18px);
    align-items: start;
}

.polaroid {
    background: rgba(255, 255, 255, .04);
    padding: .6rem;
    border-radius: 10px;
    transform: rotate(var(--r, 0deg));
}

.polaroid p {
    text-align: center;
    margin-top: .4rem;
    font-size: .9rem;
}

/* ---------- Compcard ---------- */
.compcard .compcard-box {
    padding: clamp(10px, 2vw, 16px);
    border-radius: 14px;
}

.compgrid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(10px, 1.6vw, 16px);
}

.compcard .card {
    grid-column: span 4;
    border-radius: 12px;
    overflow: hidden;
}

.compcard .card img {
    width: 100%;
    display: block;
}

/* ---------- Contato / Social ---------- */
#contato .social,
.foot .social {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem 1.2rem;
}

.icon {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
}

/* ---------- Footer ---------- */
footer .foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(14px, 2.4vw, 22px) 0;
}

footer small {
    opacity: .7;
}

/* =============================
   BREAKPOINTS
============================= */

/* >= 1440px (refino desktop grande) */
@media (min-width: 1440px) {
    .hero {
        min-height: 78vh;
    }

    .gallery {
        gap: 18px;
    }
}

/* <= 1200px */
@media (max-width: 1200px) {
    .about {
        grid-template-columns: 1fr 1fr;
    }

    .gallery .card {
        grid-column: span 6;
    }

    /* 2 colunas */
    .gallery .card.wide {
        grid-column: span 12;
    }

    /* ocupa a linha */
    .logos {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* <= 992px (tablets landscape) */
@media (max-width: 992px) {
    .topbar {
        flex-wrap: wrap;
    }

    .brand {
        order: 0;
    }

    nav {
        order: 1;
        width: 100%;
    }

    nav ul {
        justify-content: center;
    }

    .about {
        grid-template-columns: 1fr;
    }

    .about .portrait {
        justify-self: center;
    }

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

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

    .logos {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* <= 768px (tablets / celulares grandes) */
@media (max-width: 768px) {
    .hero {
        padding: 6vh 0;
        min-height: auto;
    }

    .hero .cta {
        width: 100%;
        justify-content: center;
    }

    .btn {
        width: auto;
    }

    .measures {
        grid-template-columns: 1fr 1fr;
        gap: .5rem .8rem;
    }

    .section-title {
        font-size: clamp(1.2rem, 4.8vw, 1.6rem);
    }

    .gallery {
        gap: 12px;
    }

    .gallery .card,
    .gallery .card.wide {
        grid-column: span 12;
    }

    /* 1 coluna */
    .cap {
        font-size: .85rem;
    }

    .compgrid .card {
        grid-column: span 12 !important;
    }

    /* compcard empilhado */
    #contato .social .icon span {
        font-size: .95rem;
    }

    footer .foot {
        flex-direction: column;
        align-items: flex-start;
        gap: .6rem;
    }
}

/* <= 560px (celulares) */
@media (max-width: 560px) {
    .topbar {
        gap: .6rem;
    }

    nav ul {
        gap: .35rem .5rem;
    }

    nav a {
        padding: .35rem .55rem;
    }

    .brand span:not(.muted) {
        font-size: clamp(1rem, 4.6vw, 1.15rem);
    }

    .hero .title {
        font-size: clamp(1.6rem, 8.2vw, 2.2rem);
    }

    .hero .subtitle {
        font-size: clamp(.95rem, 3.8vw, 1.05rem);
    }

    .measures {
        grid-template-columns: 1fr;
    }

    .polaroids {
        grid-template-columns: 1fr;
    }

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

    /* Aumenta área de toque dos chips e links sociais */
    .chip,
    .icon {
        padding: .6rem .7rem;
    }
}

/* <= 400px (telinhas) */
@media (max-width: 400px) {
    .wrap {
        width: 92vw;
    }

    .brand .muted {
        display: none;
    }

    /* economiza espaço */
    .btn {
        width: 100%;
        text-align: center;
    }

    nav a {
        font-size: .92rem;
    }
}

/* ---------- Pequenos refinamentos de foco ---------- */
a:focus-visible,
button:focus-visible {
    outline: 2px dashed currentColor;
    outline-offset: 3px;
}

/* ---------- Correções óticas ---------- */
.card img {
    aspect-ratio: auto;
}

.polaroid img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== Menu Hambúrguer ===== */
.menu-toggle {
    display: none;
    position: relative;
    width: 42px;
    height: 38px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 10px;
}

.menu-toggle .bar {
    display: block;
    width: 24px;
    height: 2px;
    margin: 5px auto;
    background: currentColor;
    transition: transform .25s ease, opacity .2s ease, width .2s ease;
}

/* Estado ativo (anima X) */
.menu-toggle.is-open .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-open .bar:nth-child(2) {
    opacity: 0;
    width: 0;
}

.menu-toggle.is-open .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Nav colapsável */
nav ul#main-menu {
    display: flex;
    gap: clamp(.4rem, 1.8vw, 1.1rem);
    list-style: none;
    margin: 0;
    padding: 0;
    transition: max-height .3s ease, opacity .2s ease;
}

/* Mobile */
@media (max-width: 992px) {
    .menu-toggle {
        display: block;
    }

    /* empilha o menu e colapsa por altura */
    nav {
        width: 100%;
    }

    nav ul#main-menu {
        flex-direction: column;
        gap: .6rem;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        padding: 0;
        margin-top: .4rem;
        border-radius: 12px;
    }

    nav ul#main-menu.is-open {
        max-height: 480px;
        /* suficiente para todos os links */
        opacity: 1;
        padding: .6rem 0;
    }

    /* área de toque maior nos links */
    nav a {
        padding: .6rem .8rem;
        display: block;
    }
}

/* Desktop volta ao normal */
@media (min-width: 993px) {
    nav ul#main-menu {
        max-height: none !important;
        opacity: 1 !important;
    }
}

/* ---------- GALERIA RESPONSIVA (2 por linha) ---------- */
@media (max-width: 768px) {
    .gallery {
        grid-template-columns: repeat(12, 1fr); /* mantém grid de 12 colunas */
    }

    .card {
        grid-column: span 6; /* 2 fotos por linha */
    }

    .card.wide,
    .card.tall {
        grid-column: span 6; /* força todas a terem o mesmo tamanho */
    }

    .card img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}