:root {
    /* Cores */
    --cor-primaria-fundo: #030303;
    --cor-secundaria-fundo: rgba(30,30,30,0.8);
    --cor-primaria-texto: #fff;
    --cor-secundaria-texto: #A8A8A8;
    --cor-destaque: #FF8820;

    /* Fontes */
    --fonte-principal: "Inter", sans-serif;

    /* Transições */
    --transicao-suave: .3s;
    --transicao-media: .5s;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--fonte-principal);
}

html, body {
    height: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

section.principal {
    width: 100vw;
    min-height: 100vh; /* Alterado para min-height */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 4vw, 60px);
    background-color: var(--cor-primaria-fundo);
}

.content-mobile{
    display: none;
}

.container-mockup {
    gap: 20px;
    display: flex;
    flex-direction: row;
    width: 100%;
    /* Adicionado para permitir o layout "sanfona" */
    flex-wrap: nowrap;
}

/* Estilo para cada box-mockup */
.box-mockup {
    background-color: #fff;
    border-radius: clamp(20px, 4vw, 40px);
    padding: clamp(0.8rem, 3vw, 6rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    flex-grow: 1;
    width: 25%;
    height: auto;
    min-height: 80vh; /* Altura mínima para o layout de desktop */
    gap: 20px;
}

.criar {
    background-color: var(--cor-secundaria-fundo);
    backdrop-filter: blur(10px);
}

.criar .content {
    border: 1px solid #fff;
    border-radius: clamp(20px, 4vw, 40px);
    padding: clamp(20px, 3vw, 30px);
    width: 100%;
}

.viewer {
    padding: 0;
}

.viewer .content {
    padding: 0;
}

/* Estilo do box-mockup quando ele está colapsado */
.box-mockup.collapsed {
    width: clamp(60px, 5vw, 80px);
    min-width: clamp(60px, 5vw, 80px);
    flex-grow: 0;
    padding: clamp(10px, 2vw, 20px) clamp(5px, 1vw, 10px);
}

/* Esconde o conteúdo e o título quando o box-mockup está colapsado */
.box-mockup.collapsed .content, .box-mockup.collapsed .title {
    display: none;
}

.box-mockup.collapsed .arrow-box {
    transform: rotate(180deg);
    align-self: center;
}
 
/* Estilo para os boxes que não estão colapsados */
.container.has-collapsed .box-mockup:not(.collapsed) {
    flex-grow: 1;
}

.box-mockup.collapsed .box-content, .box-mockup.collapsed .option-group {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
}

.box-mockup.collapsed .arrow-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.arrow-box {
    width: 100%;
    display: flex;
    align-items: right;
    justify-content: center;
    flex-direction: column;
    gap: clamp(5px, 2vw, 20px);
}

.arrow-box img {
    width: clamp(10px, 1.2vw, 12px);
    cursor: pointer;
}

.arrow-box h2 {
    font-weight: normal;
    color: var(--cor-secundaria-texto);
    font-size: clamp(1rem, 1.5vw, 3rem);
}

/* --- ESTILOS ADICIONAIS --- */

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 2vw, 20px);
    height: auto;
    width: 100%;
    height: 100%;
}

.side-buttons {
    display: none;
    gap: 10px;
}

.side-buttons button {
    padding: clamp(8px, 4%, 20px) clamp(10px, 2vw, 20px);
    font-size: clamp(0.6rem, 0.9vw, 1rem);
    border-radius: 100rem;
    cursor: pointer;
    border: 1px solid var(--cor-destaque);
    transition: var(--transicao-suave);
    color: var(--cor-destaque);
    background-color: transparent;
}

.planta {
    background-color: var(--cor-secundaria-fundo);
    backdrop-filter: blur(10px);
    overflow: hidden; /* Adicionado para evitar o corte lateral da planta */
}

.planta-area {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: min-content; /* Garantir que a área ocupe 100% do espaço disponível */
    min-height: min-content;
}

.viewer .content, .planta .content {
    padding: 0;
    overflow: hidden;
}

.planta .content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.planta .content #uv-canvas {
    border-radius: 20px;
    background-color: transparent;
    width: 100%; /* Garantir que a planta ocupe toda a largura */
    height: auto;
    max-width: 100%; /* Impedir que a planta estique mais que o seu contêiner */
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: var(--cor-secundaria-fundo);
    border-radius: 20px;
    padding: clamp(20px, 4vw, 40px);
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    color: var(--cor-primaria-texto);
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2vw, 20px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.close-modal-btn {
    color: var(--cor-secundaria-texto);
    position: absolute;
    top: clamp(10px, 2vw, 20px);
    right: clamp(20px, 3vw, 30px);
    font-size: clamp(24px, 4vw, 28px);
    font-weight: bold;
    cursor: pointer;
}

#model-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.category-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: var(--cor-destaque);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.category-models {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(100px, 15vw, 150px), 1fr));
    gap: clamp(10px, 2vw, 20px);
    padding: 20px 0;
    transition: all 0.5s ease-in-out;
    max-height: 1000px;
    overflow: hidden;
}

.category-models.collapsed {
    max-height: 0;
    padding: 0;
}

.model-card {
    background-color: rgba(0,0,0,0.3);
    border-radius: clamp(8px, 2vw, 10px);
    padding: clamp(8px, 2vw, 10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.model-card:hover {
    background-color: rgba(0,0,0,0.5);
    transform: translateY(-5px);
}

.model-card img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* Controles de Form e Botões */
.option-row {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.option-row .btn-mockup {
    padding: clamp(10px, 2vw, 12px) clamp(15px, 3vw, 20px);
    font-size: clamp(0.6rem, 0.9vw, 1rem);
    border-radius: 100rem;
    cursor: pointer;
    border: 1px solid var(--cor-primaria-texto);
    transition: var(--transicao-suave);
    color: var(--cor-primaria-texto);
}

.option-row label, .option-row h4 {
    color: var(--cor-secundaria-texto);
    font-weight: 500;
}

.option-row select, .option-row input[type="color"] {
    background-color: rgba(0,0,0,0.3);
    border: none;
    border-radius: 8px;
    padding: 10px;
    color: var(--cor-primaria-texto);
    cursor: pointer;
    font-size: clamp(0.8rem, 1vw, 1rem);
}

.option-row input[type="color"] {
    width: clamp(25px, 3vw, 30px);
    height: clamp(25px, 3vw, 30px);
    padding: 0;
    border: 1px solid rgba(255,255,255,0.2);
    display: inline-block;
}

.slider-row {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 20px 0;
}

.slider-row label {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.roughness-slider {
    width: 100%;
    display: flex;
}

.slider-row input[type="range"] {
    flex-grow: 1;
    background: transparent;
    -webkit-appearance: none;
    height: 1px;
    width: 100%;
}

.slider-row input[type="range"]::-webkit-slider-runnable-track {
    background: var(--cor-destaque);
    border-radius: 10px;
    height: 10px;
}

.slider-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 18px;
    width: 18px;
    background: #fff;
    border-radius: 50%;
    margin: -5px 0;
}

.slider-row span {
    color: var(--cor-primaria-texto);
    font-size: clamp(0.7rem, 0.8vw, 0.8rem);
    width: 35px;
}

.upload-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(15px, 3vw, 20px);
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transicao-suave);
    background-color: var(--cor-primaria-texto);
    color: var(--cor-destaque);
}

.upload-box:hover {
    transform: scale(1.05);
}

.upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.upload-label i {
    font-size: clamp(0.6rem, 2vw, 1.5rem);
    color: var(--cor-destaque);
}

.upload-label span {
    margin-top: 10px;
    color: var(--cor-destaque);
    text-align: center;
}

.file-info {
    font-size: clamp(0.7rem, 0.8vw, 0.8rem);
    color: var(--cor-secundaria-texto);
    margin-top: 10px;
    text-align: center;
}

.upload-box input[type="file"] {
    display: none;
}

.main-btn, .action-btn {
    background-color: var(--cor-destaque);
    color: #fff;
    border: none;
    border-radius: 40px;
    padding: 10px 15px;
    cursor: pointer;
    font-size: clamp(0.6rem, 1vw, 1rem);
    transition: var(--transicao-suave);
    width: 100%;
}

.main-btn:hover, .action-btn:hover {
    transform: scale(1.05);
}

.action-btn {
    background-color: transparent;
    border: 1px solid var(--cor-secundaria-texto);
    color: var(--cor-secundaria-texto);
    flex: 1;
}

.action-btn:hover {
    transform: scale(1.05);
}

.option-group {
    border: 1px solid #fff;
    border-radius: 40px;
    padding: clamp(20px, 4vw, 30px);
    width: 100%;
}

.option-group h4 {
    color: var(--cor-primaria-texto);
    font-weight: normal;
    font-size: clamp(0.6rem, 1.2vw, 1.5rem);
    margin-bottom: 10px;
}

.option-group label {
    font-size: clamp(0.6rem, 0.8vw, 1rem);
    color: var(--cor-primaria-texto);
    font-weight: 300;
}

.option-row .download-btn {
    background-color: var(--cor-destaque);
    border: 1px solid var(--cor-destaque);
    width: 100%;
}

.download-btn:hover {
    transform: scale(1.05);
}

.dimensions {
    color: var(--cor-secundaria-texto);
    font-size: clamp(0.8rem, 1vw, 0.9rem);
}

/* Model-Viewer e Controles de Câmera */
model-viewer {
    width: 100%;
    height: 100%;
}

.viewer {
    position: relative;
    padding: 0;
    width: 50%;
    min-height: 80vh;
}

.camera-controls {
    position: absolute;
    bottom: clamp(10px, 2vh, 20px);
    right: clamp(10px, 2vh, 20px);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.camera-btn {
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: clamp(30px, 4vw, 40px);
    height: clamp(30px, 4vw, 40px);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s;
}

.camera-btn:hover {
    background-color: var(--cor-destaque);
}

/* Estilos do seletor de lado (side-selector-ui) */
#side-selector-ui {
    flex-direction: row;
    justify-content: space-around;
}

.side-selector-btn {
    background-color: transparent;
    color: var(--cor-secundaria-texto);
    border: 1px solid var(--cor-secundaria-texto);
    padding: clamp(6px, 1.5vw, 8px) clamp(10px, 2vw, 15px);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: clamp(0.8rem, 1vw, 1rem);
}

.side-selector-btn.active, .side-selector-btn:hover {
    background-color: var(--cor-destaque);
    color: var(--cor-primaria-texto);
    border-color: var(--cor-destaque);
}

/* --- Media Queries para Telas Menores --- */

@media (max-width: 1024px) {


        section.principal {
        display: none;
    }

    .content-mobile{
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--cor-primaria-fundo);
    }

    .content-mobile-wraper{
        padding: 40px;
        width: 80%;
        height: auto;
        border: 1px solid #fff;
        border-radius: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 20px;
    }

    .content-mobile-wraper h2{
        color: var(--cor-primaria-texto);
        font-weight: normal;
        font-size: clamp(1rem, 2vw, 3rem);
        text-align: center;
    }

    .content-mobile-wraper button{
        padding: 2% 40px;
        font-size: clamp(0.8rem, 1.5vw, 2rem);
        border-radius: 100rem;
        cursor: pointer;
        border: 1px solid var(--cor-primaria-texto);
        transition: var(--transicao-suave);
        display: flex;
        align-items: center;
        background-color: #fff;
        color: var(--cor-primaria-fundo);
    }
}