/* 1. ESTRUTURA BASE */
.modal-overlay-system {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    z-index: 999999; display: none; justify-content: center; align-items: center;
}
.modal-overlay-system.type-splash { background: #fbf6ea; cursor: pointer; display: flex; overflow: hidden; }
.modal-overlay-system.type-lightbox { background: rgba(0,0,0,0.85); backdrop-filter: blur(5px); }

/* 2. CONTAINERS */
.modal-content-wrapper {
    position: relative; width: 96%; height: 98vh;
    background: #000; border-radius: 8px; overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5); border: 2px solid #403f3f;
    transition: all 0.3s ease-in-out;
}

/* TAMANHOS */
.modal-content-wrapper.type-slim { max-width: 600px !important; width: 96% !important; }
.modal-content-wrapper.type-wide { max-width: 99% !important; width: 1300px !important; overflow: hidden !important; }

.modal-content-wrapper.content-block { background: transparent !important; overflow-y: auto; padding: 0; }
.modal-content-wrapper.type-wide.content-block { overflow-y: hidden !important; }

.block-inner-content { width: 100%; height: auto; background: #fff; //padding: 20px; padding: 0;}

/* 3. RESPONSIVIDADE */
@media (max-width: 768px) { 
    .modal-content-wrapper, .modal-content-wrapper.type-wide, .modal-content-wrapper.type-slim { 
        width: 98% !important; height: 98vh !important; max-width: none !important; overflow-y: auto !important; 
    }
	/* 5. VISIBILIDADE DE BLOCOS mobile */
	.hidden-block { display: none !important; }
	.block-inner-content .hidden-block, .block-inner-content .wp-block-stackable { display: block !important; }
}

/* 4. BOTÃO FECHAR (inserir class: .modal-close-btn */
.xfecha{
    position: absolute; top: 12px; right: 15px; width: 35px; height: 35px;
    background: rgba(245, 245, 220, 0.95); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #333; cursor: pointer; z-index: 1000001; font-size: 26px; font-weight: bold;
}
.modal-close-btn {
	    cursor: pointer;
    transition: opacity 0.2s; 
}

/* 5. VISIBILIDADE DE BLOCOS */
.hidden-block { display: none !important; }
.block-inner-content .hidden-block, .block-inner-content .wp-block-stackable { display: block !important; }

/* 6. SPLASH PAGE & KEYFRAMES */
.grao { position: absolute; width: clamp(40px, 8vw, 80px); opacity: 0; }
.grao-1 { top: 15%; left: 10%; transform: rotate(-15deg); animation: fadeInGrao 1s forwards 0.2s, fadeOutGrao 0.8s forwards 2.4s; }
.grao-2 { top: 10%; right: 10%; transform: rotate(20deg); animation: fadeInGrao 1s forwards 0.5s, fadeOutGrao 0.8s forwards 2.7s; }
.grao-3 { bottom: 15%; left: 20%; transform: rotate(45deg); animation: fadeInGrao 1s forwards 0.8s, fadeOutGrao 0.8s forwards 2.2s; }
.sensorial-text { text-align: center; font-size: clamp(2rem, 7vw, 5rem); text-transform: uppercase; }
.texto-normal { font-size: 0.6em; letter-spacing: 0.15em; opacity: 0; animation: fadeIn 0.8s forwards; }
.texto-animado { display: flex; justify-content: center; flex-wrap: wrap; }
.texto-animado span { 
    display: inline-block; 
    animation: sensorialColor 2.8s forwards, aromaDissolve 1.4s forwards; 
    animation-delay: calc(0.6s + var(--i) * 0.08s), calc(2.6s + var(--i) * 0.04s); 
}

@keyframes sensorialColor { 0% { color: #1a1a1a; } 20% { color: #F4E181; } 45% { color: #97D5CC; } 70% { color: #DAA7AC; } 100% { color: #A27635; } }
@keyframes aromaDissolve { 100% { opacity: 0; transform: translateY(-20px); filter: blur(6px); } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes fadeInGrao { to { opacity: 0.6; } }
@keyframes fadeOutGrao { to { opacity: 0; transform: scale(0.8); } }
.fade-out { opacity: 0 !important; transition: opacity 0.8s ease; }