/*
Theme Name: Inovar Marmoraria
Description: Tema one-page para marmoraria. Fotos e textos em Aparencia > Personalizar.
Version: 1.6
Text Domain: inovar-marmoraria
*/

:root{--bg:#f2f2f2;--fg:#111;--green:#2b7bff;--green2:#6db3ff;--dark:#0b0d1a;box-sizing:border-box;}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;background:var(--bg);color:var(--fg)}
header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px 5vw;background:var(--bg);box-shadow:0 2px 10px #0002}
.logo{display:flex;align-items:center;gap:10px;line-height:1}.logo i{width:7px;height:34px;background:linear-gradient(#2b7bff,#0b1b5e);transform:skewY(-12deg)}.logo i+i{width:5px;height:30px}.logo strong{display:block;font-weight:300;font-size:26px;letter-spacing:5px}.logo small{display:block;font-size:11px;letter-spacing:4px;margin-top:3px;border-bottom:3px solid currentColor;padding-bottom:3px}
nav{display:flex;gap:22px;font-size:15px;flex-wrap:wrap}nav a{color:inherit;text-decoration:none}nav a:hover{color:var(--green)}
.hero{min-height:70vh;display:grid;place-items:center;text-align:center;color:#fff;padding:60px 5vw;background:linear-gradient(#000a,#000a),var(--bgimg,linear-gradient(135deg,#1b3fa0,#0a1240 50%,#2b7bff)) center/cover}
.hero h1{font-size:clamp(32px,6vw,64px);margin:0 0 12px;font-weight:300}.hero h1 span{color:var(--green2);font-weight:700}
.btn{display:inline-block;margin-top:18px;background:var(--green);color:#fff;font-weight:700;padding:14px 28px;border-radius:10px;text-decoration:none}
/* SHOWROOM */
.showroom{position:relative;padding:150px 5vw 170px;color:#fff;text-align:center;background:linear-gradient(#000a,#000a),var(--bgimg,linear-gradient(120deg,#16318a,#070b24 40%,#1f5fd6 70%,#0a1240)) center/cover;/* troque pelo fundo: url(foto.jpg) */}
.showroom h2{font-size:clamp(24px,3.4vw,40px);font-weight:300;margin:0 0 60px}.showroom h2 b{color:var(--green2);font-size:1.3em;font-weight:600}
.wave{position:absolute;left:0;width:100%;height:70px;display:block}.wave.top{top:-1px}.wave.bot{bottom:-1px;transform:scaleY(-1)}.wave path{fill:var(--bg)}
.diamonds{display:flex;justify-content:center;align-items:center;max-width:1200px;margin:0 auto}
.dia{flex:0 0 auto;width:min(21vw,290px);aspect-ratio:1;margin-left:calc(min(21vw,290px)*-.25);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:var(--img,linear-gradient(135deg,#bbb,#555)) center/cover;display:grid;place-items:center;font-size:13px;color:#fff;transition:transform .3s}
.dia:first-child{margin-left:0}
.dia:nth-child(odd){transform:translateY(8%)}.dia:nth-child(even){transform:translateY(-14%)}
.dia:hover{transform:scale(1.08);z-index:3}
/* PRODUTOS */
.prod{padding:70px 5vw}.prod h2{font-size:clamp(28px,4vw,48px);font-weight:300;margin:0 0 30px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.flip{perspective:1000px;min-height:330px;cursor:pointer}.flip-in{position:relative;width:100%;height:100%;min-height:330px;transition:transform .7s;transform-style:preserve-3d}.flip:hover .flip-in,.flip:focus .flip-in{transform:rotateY(180deg)}.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:14px}.card{border:3px solid #111;padding:30px;display:flex;flex-direction:column;justify-content:center;text-align:center;color:#fff;background:var(--tex);box-shadow:0 6px 16px #0004}.back{transform:rotateY(180deg);border:3px solid var(--green);background:var(--img) center/cover;display:grid;place-items:center;overflow:hidden;text-decoration:none}.back span{background:#1747a8cc;border:2px solid var(--green);color:#fff;font-weight:700;font-size:14px;padding:6px 14px;border-radius:8px}
.card h3{margin:0 0 14px;font-size:clamp(22px,2.6vw,36px);font-weight:800;text-transform:uppercase;line-height:1.05}
.card p{margin:0;line-height:1.7;font-size:15px}
.t-granito{--tex:radial-gradient(circle at 30% 30%,#2b4fb8,#0d1b5e 60%,#050a24)}
.t-marmore{--tex:linear-gradient(120deg,#000 40%,#222 50%,#000 60%)}
.t-sile{--tex:radial-gradient(circle,#2b7bff,#1747a8)}.t-quartzo{--tex:linear-gradient(135deg,#1f5fd6,#0b1b5e)}
.t-aglo{--tex:linear-gradient(#9fb2d6,#7d92bd)}
.t-dekton{--tex:radial-gradient(circle,#1d1d1d,#0b0b0b)}
.proj{padding:60px 5vw 90px}.proj h2{font-size:clamp(20px,2.4vw,30px);font-weight:300;margin:0 0 22px}.proj h2 b{color:var(--green);font-weight:700;font-size:1.25em}
.carw{position:relative}.car{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.car::-webkit-scrollbar{display:none}
.slide{flex:0 0 calc((100% - 42px)/4);aspect-ratio:1;border:1px solid var(--green);border-radius:12px;scroll-snap-align:start;background:var(--img) center/cover}
.arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;background:none;border:0;color:#fff;font-size:56px;line-height:1;cursor:pointer;text-shadow:0 2px 8px #0009}.prev{left:12px}.next{right:12px}
footer{background:var(--dark);color:#eee;padding:60px 5vw 40px;font-size:15px}footer .logo{color:#fff}
.fgrid{display:grid;grid-template-columns:1fr 1.2fr 1.2fr}.fcol{padding:0 28px}.fcol+.fcol{border-left:1px solid #fff3}.fcol h4{margin:0 0 26px;font-size:18px}
.fi{display:flex;gap:12px;align-items:center;margin-bottom:22px}
.fform{display:grid;grid-template-columns:1fr 1fr;gap:12px}.fform input,.fform textarea{background:#ffffff26;border:0;border-radius:4px;padding:12px;color:#fff;font:inherit;width:100%}.fform textarea{grid-column:1/-1;min-height:130px;resize:vertical}.fform ::placeholder{color:#cfd6e6}.fform button{grid-column:1/-1;background:var(--green);color:#fff;border:0;border-radius:6px;padding:13px;font-weight:700;cursor:pointer}
.copy{text-align:center;font-size:13px;margin-top:40px;opacity:.7}
/* FLUTUANTES */
.libras{position:fixed;right:10px;top:55%;z-index:30;width:50px;height:50px;border-radius:8px;background:#2f7cf6;display:grid;place-items:center;font-size:26px;text-decoration:none}
.zap{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:center;gap:10px;text-decoration:none}
.zap .msg{background:#fff;color:#222;font-size:13px;padding:10px 14px;border-radius:8px;box-shadow:0 2px 10px #0004;max-width:190px}
.zap .ic{width:56px;height:56px;border-radius:50%;background:#25d366;display:grid;place-items:center;font-size:28px;box-shadow:0 2px 10px #0004}
@media(max-width:820px){.slide{flex-basis:calc((100% - 14px)/2)}.fgrid{grid-template-columns:1fr;gap:34px}.fcol{padding:0}.fcol+.fcol{border-left:0}}
@media(max-width:820px){.grid{grid-template-columns:1fr}.zap .msg{display:none}}

.logo-link{color:inherit;text-decoration:none}.custom-logo{max-height:48px;width:auto;display:block}.admin-bar header{top:32px}.wrap{padding:60px 5vw;max-width:900px;margin:0 auto}

/* RESPONSIVO */
html{-webkit-text-size-adjust:100%}body{overflow-x:hidden}img{max-width:100%;height:auto}
.burger{display:none;background:none;border:0;color:inherit;font-size:30px;line-height:1;cursor:pointer;padding:4px 8px}
@media(max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}.slide{flex-basis:calc((100% - 28px)/3)}.fgrid{grid-template-columns:1fr 1fr;row-gap:34px}.fgrid .fcol:first-child{grid-column:1/-1}.fcol:nth-child(2){border-left:0}}
@media(max-width:820px){
header{flex-wrap:wrap;padding:12px 5vw}
.burger{display:block}
header nav{display:none;width:100%;flex-direction:column;gap:0;padding-top:8px}
header.open nav{display:flex}
header nav a{padding:12px 0;border-top:1px solid #8883;font-size:16px}
.showroom{padding:90px 5vw 100px}.showroom h2{margin-bottom:36px}
.wave{height:40px}
.hero{min-height:60vh;padding:50px 6vw}
.prod{padding:50px 5vw}.proj{padding:40px 5vw 70px}
.slide{flex-basis:calc((100% - 14px)/2)}
.fgrid{grid-template-columns:1fr}.fcol,.fcol+.fcol{padding:0;border-left:0}
.libras{width:42px;height:42px;font-size:22px}
.arrow{font-size:44px}
}
@media(max-width:640px){.grid{grid-template-columns:1fr}.flip,.flip-in{min-height:280px}.card{padding:22px}}
@media(max-width:560px){.slide{flex-basis:100%}.fform{grid-template-columns:1fr}.zap .ic{width:50px;height:50px;font-size:24px}}
@media(hover:none){.flip:hover .flip-in,.flip:focus .flip-in{transform:none}.flip.on .flip-in{transform:rotateY(180deg)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ELEMENTOR EDITAVEL */
.ino-showroom{position:relative;overflow:hidden}
.ino-showroom::before,.ino-showroom::after{content:"";position:absolute;left:0;width:100%;height:70px;z-index:1;pointer-events:none;background-size:100% 100%;background-repeat:no-repeat}
.ino-showroom::before{top:-1px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath fill='%23f2f2f2' d='M0 0H1440V25C1200 70 900 -10 600 30C400 55 200 55 0 20Z'/%3E%3C/svg%3E")}
.ino-showroom::after{bottom:-1px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath fill='%23f2f2f2' d='M0 70H1440V50C1150 5 900 70 650 35C400 5 200 30 0 45Z'/%3E%3C/svg%3E")}
.ino-showroom>.elementor-container{position:relative;z-index:2}
.ino-diamonds>.elementor-container{display:flex!important;flex-wrap:nowrap!important;justify-content:center;align-items:center;max-width:1200px;margin:0 auto}
.ino-diamonds>.elementor-container>.elementor-column{flex:0 0 auto!important;width:min(21vw,290px)!important;margin-left:calc(min(21vw,290px)*-.25)!important;transition:transform .3s}
.ino-diamonds>.elementor-container>.elementor-column:first-child{margin-left:0!important}
.ino-diamonds img{width:100%;aspect-ratio:1;object-fit:cover;display:block;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border-radius:0}
.ino-diamonds>.elementor-container>.elementor-column:nth-child(odd){transform:translateY(8%)}
.ino-diamonds>.elementor-container>.elementor-column:nth-child(even){transform:translateY(-14%)}
.ino-diamonds>.elementor-container>.elementor-column:hover{transform:scale(1.08);z-index:3}
.ino-grid>.elementor-widget-wrap,.ino-grid>.elementor-column-wrap>.elementor-widget-wrap{display:grid!important;grid-template-columns:repeat(3,1fr);gap:26px;padding:0!important}
@media(max-width:1000px){.ino-grid>.elementor-widget-wrap,.ino-grid>.elementor-column-wrap>.elementor-widget-wrap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ino-grid>.elementor-widget-wrap,.ino-grid>.elementor-column-wrap>.elementor-widget-wrap{grid-template-columns:1fr}}
.ino-flip{perspective:1000px;cursor:pointer;margin:0!important;width:100%}
.ino-flip>.elementor-container{position:relative;display:block!important;min-height:330px;max-width:none!important;padding:0;transition:transform .7s;transform-style:preserve-3d}
.ino-flip:hover>.elementor-container,.ino-flip:focus-within>.elementor-container{transform:rotateY(180deg)}
.ino-face{position:absolute!important;inset:0;width:100%!important;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-sizing:border-box}
.ino-face>.elementor-element-populated,.ino-face>.elementor-column-wrap,.ino-face>.elementor-widget-wrap{height:100%;box-sizing:border-box}
.ino-back{transform:rotateY(180deg)}
@media(hover:none){.ino-flip:hover>.elementor-container,.ino-flip:focus-within>.elementor-container{transform:none}.ino-flip.on>.elementor-container{transform:rotateY(180deg)}}
.ino-carousel .swiper-slide-image{width:100%;aspect-ratio:1;object-fit:cover}
header nav li{list-style:none;display:contents}