/*
Theme Name: MSG Print
Theme URI: https://msgprintbr.com.br/
Author: MSG Print
Author URI: https://msgprintbr.com.br/
Description: Tema institucional MSG Print — comunicação visual e gráfica. Identidade visual própria construída a partir das cores, fotos e informações reais da empresa. Portfólio, Serviços, Diferenciais e Depoimentos totalmente gerenciáveis pelo painel, Personalizador para contato/redes/cores/botões, formulário com envio via WhatsApp e e-mail, e páginas Início, Quem Somos, Projetos e Contatos.
Version: 2.2.0
Requires at least: 5.9
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: msgprint
*/

/* =========================================================
   TOKENS
   ========================================================= */
:root{
  --bg:#FAF8F3; --surface:#FFFFFF; --surface-2:#F0EBDF;
  --ink:#15131C; --ink-soft:#58545F; --ink-faint:#8D8991;
  --primary:#150875; --accent:#E8490A; --accent-2:#C98A1F;
  --line:#E6E0D2; --wa1:#0B8F3B; --wa2:#063D1C;
  --shadow: 0 1px 2px rgba(21,19,28,.05), 0 14px 30px -16px rgba(21,19,28,.22);
  --radius:5px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#100F16; --surface:#17151F; --surface-2:#1D1B27;
    --ink:#F3F1EA; --ink-soft:#AFACB6; --ink-faint:#726F7C;
    --primary:#584CFF; --accent:#FF6B35; --accent-2:#E3A73A;
    --line:#2A2833; --wa1:#17C964; --wa2:#0B7A3B;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#100F16; --surface:#17151F; --surface-2:#1D1B27;
  --ink:#F3F1EA; --ink-soft:#AFACB6; --ink-faint:#726F7C;
  --primary:#584CFF; --accent:#FF6B35; --accent-2:#E3A73A;
  --line:#2A2833; --wa1:#17C964; --wa2:#0B7A3B;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'Work Sans',-apple-system,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:'Big Shoulders Display',Impact,sans-serif; font-weight:800; line-height:.96; letter-spacing:.005em; margin:0; text-transform:uppercase; text-wrap:balance}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
.wrap{max-width:1220px; margin-inline:auto; padding-inline:20px}
@media (min-width:640px){ .wrap{padding-inline:28px} }
section{padding-block:64px}
@media (min-width:900px){ section{padding-block:104px} }
:focus-visible{outline:2.5px solid var(--accent-2); outline-offset:2px}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important} }
.skip-link{position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--bg); padding:12px 18px; z-index:100}
.skip-link:focus{left:12px; top:12px}

.eyebrow{display:inline-flex; align-items:center; gap:9px; font-family:'IBM Plex Mono'; font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); font-weight:500}
.eyebrow::before{content:"";width:20px;height:2px;background:var(--accent); flex:none}
.sec-head{max-width:660px; margin-block-end:46px}
.sec-head h2{font-size:clamp(30px,4.6vw,46px); margin-block-start:14px}
.sec-head p{font-family:'Work Sans'; text-transform:none; color:var(--ink-soft); font-size:16px; margin-block-start:14px; line-height:1.6}

.btn{display:inline-flex; align-items:center; gap:10px; padding:15px 26px; font-family:'IBM Plex Mono'; font-size:13.5px; font-weight:500; border-radius:3px; border:1.5px solid transparent; cursor:pointer; white-space:nowrap; letter-spacing:.01em}
.btn svg{flex:none}
.btn-primary{background:linear-gradient(180deg,var(--wa1),var(--wa2)); color:#fff}
.btn-primary:hover{filter:brightness(1.08)}
.btn-outline{border-color:var(--ink); color:var(--ink)}
.btn-outline:hover{background:var(--ink); color:var(--bg)}
.btn-ghost{border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{padding:10px 16px; font-size:12.5px}

/* =========================================================
   HEADER
   ========================================================= */
header.site{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav-row{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:12px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand img{height:63px; width:auto}
.brand-logo{display:flex; align-items:center}
.brand-name{font-family:'Big Shoulders Display'; font-weight:800; font-size:19px; letter-spacing:.01em}
.brand-name span{color:var(--accent)}
.links{display:none; gap:30px; font-size:14.5px; font-weight:600; list-style:none; margin:0; padding:0}
.links li{list-style:none; margin:0; padding:0}
.links a{position:relative; padding-block:4px; white-space:nowrap; text-decoration:none}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.links a:hover::after,.links a.current::after{transform:scaleX(1)}
@media (min-width:960px){ .links{display:flex} }
.header-actions{display:flex; align-items:center; gap:14px}
@media (max-width:520px){ .header-actions .btn-primary{padding:12px 14px} .header-actions .btn-label{display:none} }
.menu-btn{display:inline-flex; background:none; border:1.5px solid var(--line); border-radius:4px; padding:8px; cursor:pointer; color:var(--ink)}
@media (min-width:960px){ .menu-btn{display:none} }
#mobile-menu{display:none; border-top:1px solid var(--line); padding:16px 0 20px}
#mobile-menu.open{display:block}
#mobile-menu ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px}
#mobile-menu li{list-style:none; margin:0; padding:0}
#mobile-menu a{display:block; font-size:15.5px; font-weight:700; text-transform:uppercase; font-family:'IBM Plex Mono'; letter-spacing:.02em; text-decoration:none}

/* =========================================================
   HERO (home)
   ========================================================= */
.hero{padding-block:56px 68px}
@media (min-width:900px){ .hero{padding-block:70px 90px} }
.hero-grid{display:grid; gap:48px; align-items:center; grid-template-columns:1fr}
@media (min-width:980px){ .hero-grid{grid-template-columns:1.08fr .92fr; gap:56px} }
.hero h1{font-size:clamp(36px,6vw,62px)}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero .lede{font-family:'Work Sans'; font-size:17px; line-height:1.65; color:var(--ink-soft); max-width:52ch; margin-block-start:22px; text-transform:none}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-block-start:28px}
.trust-row{display:flex; flex-wrap:wrap; gap:24px; margin-block-start:34px; padding-block-start:24px; border-top:1px solid var(--line)}
.trust-item b{font-family:'Big Shoulders Display'; font-size:25px; color:var(--ink); display:block; font-weight:800}
.trust-item span{font-family:'IBM Plex Mono'; font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em}
.hero-visual{position:relative}
.hero-photo{position:relative; border-radius:6px; overflow:hidden; box-shadow:var(--shadow); transform:rotate(1.2deg); border:6px solid var(--surface); max-width:480px; margin-inline:auto}
.hero-photo img{aspect-ratio:4/3; object-fit:cover; width:100%}
.hero-chip{position:absolute; left:8%; bottom:-16px; background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:3px; font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.03em; box-shadow:var(--shadow); transform:rotate(-2deg); max-width:80%}
.hero-blob{position:absolute; inset:auto 0 -10% auto; width:65%; aspect-ratio:1; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%); z-index:-1}

/* =========================================================
   SERVICES
   ========================================================= */
.services{background:var(--surface); border-block:1px solid var(--line)}
.svc-grid{display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line)}
@media (min-width:640px){ .svc-grid{grid-template-columns:1fr 1fr} }
@media (min-width:980px){ .svc-grid{grid-template-columns:repeat(3,1fr)} }
.svc-card{background:var(--surface); padding:0; display:flex; flex-direction:column}
.svc-photo{width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--surface-2)}
.svc-body{padding:22px 24px 26px; display:flex; flex-direction:column; gap:12px; flex:1}
.svc-card h3{font-family:'Work Sans'; text-transform:none; font-weight:700; font-size:18px; letter-spacing:0; margin:0}
.svc-card p{margin:0; color:var(--ink-soft); font-size:14.5px; line-height:1.55}
.svc-tag{margin-block-start:auto; padding-block-start:8px; font-family:'IBM Plex Mono'; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-2)}

/* =========================================================
   DIFERENCIAIS + STATS
   ========================================================= */
.why-grid{display:grid; gap:44px; grid-template-columns:1fr}
@media (min-width:860px){ .why-grid{grid-template-columns:1fr 1fr; gap:50px} }
.diff-list{display:flex; flex-direction:column; gap:26px}
.diff-item{display:flex; gap:16px}
.diff-check{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--accent-2); color:var(--accent-2); display:flex;align-items:center;justify-content:center; margin-block-start:2px}
.diff-item h3{font-family:'Work Sans'; text-transform:none; font-weight:700; font-size:16px; margin-block-end:5px}
.diff-item p{margin:0; color:var(--ink-soft); font-size:14px; line-height:1.6}
.stat-box{background:var(--ink); color:var(--bg); border-radius:6px; padding:36px 32px; display:grid; grid-template-columns:1fr 1fr; gap:26px; width:100%}
.stat b{font-family:'Big Shoulders Display'; font-size:clamp(32px,4vw,44px); color:var(--accent); display:block; font-weight:800}
.stat span{font-family:'IBM Plex Mono'; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:color-mix(in srgb, var(--bg) 65%, transparent)}

/* =========================================================
   PORTFOLIO (teaser + full grid)
   ========================================================= */
.portfolio{background:var(--surface); border-block:1px solid var(--line)}
.pf-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-block-end:40px}
.pf-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
@media (min-width:700px){ .pf-grid{grid-template-columns:repeat(4,1fr)} }
.pf-card{position:relative; border-radius:5px; overflow:hidden; aspect-ratio:4/5; display:block; cursor:pointer; border:none; padding:0; background:none; width:100%}
.pf-card img{width:100%; height:100%; object-fit:cover; transition:transform .3s}
.pf-card:hover img{transform:scale(1.05)}
.pf-cap{position:absolute; left:0; right:0; bottom:0; padding:14px; background:linear-gradient(0deg, rgba(0,0,0,.78), transparent); color:#fff; font-family:'IBM Plex Mono'; font-size:10.5px; letter-spacing:.03em; text-align:left}

/* Projetos page: filters + thumbnail grid */
.pf-filters{display:flex; flex-wrap:wrap; gap:10px; margin-block-end:36px}
.pf-filter{font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:.03em; padding:9px 16px; border-radius:100px; border:1.5px solid var(--line); background:none; color:var(--ink-soft); cursor:pointer}
.pf-filter.active,.pf-filter:hover{border-color:var(--ink); color:var(--ink)}
.pf-masonry{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
@media (min-width:640px){ .pf-masonry{grid-template-columns:repeat(3,1fr)} }
@media (min-width:980px){ .pf-masonry{grid-template-columns:repeat(4,1fr)} }
.pf-masonry .pf-card{aspect-ratio:4/5}
.pf-empty{color:var(--ink-faint); font-size:14.5px; padding-block:40px; text-align:center}

/* lightbox */
.lb-overlay{position:fixed; inset:0; background:rgba(10,9,14,.92); z-index:200; display:none; align-items:center; justify-content:center; padding:24px}
.lb-overlay.open{display:flex}
.lb-box{max-width:min(1000px,92vw); max-height:88vh; display:flex; flex-direction:column; gap:14px; align-items:center}
.lb-box img{max-height:76vh; width:auto; max-width:100%; border-radius:4px; box-shadow:var(--shadow)}
.lb-cap{color:#fff; font-family:'IBM Plex Mono'; font-size:13px; text-align:center}
.lb-close,.lb-prev,.lb-next{position:fixed; background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.25); color:#fff; width:44px;height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer}
.lb-close{top:20px; right:20px}
.lb-prev{left:20px; top:50%; translate:0 -50%}
.lb-next{right:20px; top:50%; translate:0 -50%}
@media (max-width:640px){ .lb-prev,.lb-next{width:38px;height:38px} }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.test-grid{display:grid; grid-template-columns:1fr; gap:18px}
@media (min-width:820px){ .test-grid{grid-template-columns:repeat(3,1fr)} }
.test-card{border:1.5px dashed var(--line); border-radius:6px; padding:26px 22px; min-height:170px; display:flex; flex-direction:column; gap:14px}
.test-quote{color:var(--ink-faint); font-size:13.5px; line-height:1.6; font-style:italic; flex:1; margin:0}
.test-who-row{display:flex; align-items:center; gap:10px}
.test-avatar{width:34px; height:34px; border-radius:50%; object-fit:cover; flex:none}
.test-who{font-family:'IBM Plex Mono'; font-size:11px; color:var(--ink-faint)}

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band{background:var(--primary); color:#fff; text-align:center}
.cta-band h2{color:#fff; font-size:clamp(28px,5vw,48px)}
.cta-band p{font-family:'Work Sans'; text-transform:none; color:color-mix(in srgb,#fff 75%, transparent); font-size:16px; margin-block:16px 28px}
.cta-band .eyebrow{color:#fff}
.cta-band .eyebrow::before{background:#fff}

/* =========================================================
   ABOUT / QUEM SOMOS
   ========================================================= */
.about-hero{padding-block:56px 20px}
.about-lede{font-size:17px; line-height:1.65; color:var(--ink-soft); max-width:64ch; margin-block-start:18px}
.about-photos{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-block-start:40px}
.about-photos img{aspect-ratio:1; object-fit:cover; border-radius:5px}
.about-body{display:grid; gap:44px; grid-template-columns:1fr}
@media (min-width:900px){ .about-body{grid-template-columns:1fr 1fr} }
.about-copy p{color:var(--ink-soft); font-size:16px; line-height:1.75; margin-block-end:18px}
.about-copy p:last-child{margin-block-end:0}
.about-stat-strip{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
@media (min-width:640px){ .about-stat-strip{grid-template-columns:repeat(4,1fr)} }
.about-stat{background:var(--surface-2); border-radius:6px; padding:24px 18px; text-align:center}
.about-stat b{font-family:'Big Shoulders Display'; font-size:34px; color:var(--accent); display:block; font-weight:800}
.about-stat span{font-family:'IBM Plex Mono'; font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint)}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-hero{padding-block:56px 20px}
.contact-grid{display:grid; gap:44px; grid-template-columns:1fr}
@media (min-width:960px){ .contact-grid{grid-template-columns:.95fr 1.05fr; gap:60px} }
.info-card{background:var(--surface-2); border-radius:8px; padding:32px 28px; display:flex; flex-direction:column; gap:22px}
.info-row{display:flex; align-items:flex-start; gap:14px}
.info-icon{flex:none; width:38px; height:38px; border-radius:50%; background:var(--ink); color:var(--accent); display:flex; align-items:center; justify-content:center}
.info-icon svg{width:17px;height:17px}
.info-row .lbl{font-family:'IBM Plex Mono'; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-block-end:3px}
.info-row .val{font-size:15px; font-weight:600}
.social-row{display:flex; gap:10px; margin-block-start:4px}
.social-row a{width:38px;height:38px;border-radius:50%; border:1.5px solid var(--line); display:flex;align-items:center;justify-content:center; transition:border-color .15s, background .15s}
.social-row a:hover{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent)}
.social-row svg{width:16px;height:16px}
.map-embed{border-radius:6px; overflow:hidden; border:1px solid var(--line); margin-block-start:22px}
.map-embed iframe{width:100%; height:220px; border:0; display:block}

form.quote{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:30px 26px; display:flex; flex-direction:column; gap:16px}
.field{display:flex; flex-direction:column; gap:7px}
.field label{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint)}
.field input, .field select, .field textarea{
  background:var(--bg); border:1.5px solid var(--line); border-radius:4px; padding:12px 13px; color:var(--ink); font-family:'Work Sans'; font-size:14.5px;
}
.field textarea{resize:vertical; min-height:90px}
form.quote .btn-primary{width:100%; padding-block:15px; justify-content:center}
.msgprint-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.qf-status{margin:0; font-size:13.5px; text-align:center; padding:10px 12px; border-radius:4px}
.qf-status.ok{background:color-mix(in srgb, var(--wa1) 16%, transparent); color:var(--ink)}
.qf-status.err{background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--ink)}
.hours-row{display:flex; justify-content:space-between; font-size:13.5px; color:var(--ink-soft); padding-block:6px; border-bottom:1px dashed var(--line)}
.hours-row:last-child{border-bottom:none}

/* =========================================================
   SINGLE PROJETO
   ========================================================= */
.single-hero img{width:100%; max-height:520px; object-fit:cover; border-radius:6px}
.single-meta{display:flex; flex-wrap:wrap; gap:14px; margin-block-start:18px}
.single-tag{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.05em; text-transform:uppercase; background:var(--surface-2); padding:6px 12px; border-radius:100px; color:var(--ink-soft)}
.single-body{max-width:74ch; font-size:16px; line-height:1.75; color:var(--ink-soft); margin-block-start:24px}
.related-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-block-start:20px}
@media (min-width:700px){ .related-grid{grid-template-columns:repeat(4,1fr)} }

/* =========================================================
   FOOTER
   ========================================================= */
footer.site{background:var(--ink); color:var(--bg); padding-block:56px 26px}
.foot-grid{display:grid; grid-template-columns:1fr; gap:36px; padding-block-end:34px; border-bottom:1px solid color-mix(in srgb, var(--bg) 18%, transparent)}
@media (min-width:760px){ .foot-grid{grid-template-columns:1.3fr 1fr 1fr 1fr} }
.foot-brand img{height:63px; width:auto; filter:brightness(1.1)}
.foot-desc{font-size:13.5px; color:color-mix(in srgb, var(--bg) 65%, transparent); line-height:1.6; margin-block-start:14px; max-width:34ch}
.foot-col h4{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:color-mix(in srgb, var(--bg) 55%, transparent); margin-block-end:14px}
.foot-col a{display:block; font-size:14px; color:color-mix(in srgb, var(--bg) 82%, transparent); margin-block-end:10px}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding-block-start:22px; font-family:'IBM Plex Mono'; font-size:11.5px; color:color-mix(in srgb, var(--bg) 50%, transparent)}

/* =========================================================
   WHATSAPP FLOAT
   ========================================================= */
.wa-float{position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:60; width:56px; height:56px; border-radius:50%; background:linear-gradient(180deg,var(--wa1),var(--wa2)); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px -8px rgba(0,0,0,.45); animation:wa-pulse 2.6s infinite}
.wa-float svg{width:27px;height:27px}
@keyframes wa-pulse{ 0%,100%{box-shadow:0 10px 26px -8px rgba(0,0,0,.45), 0 0 0 0 rgba(11,143,59,.5)} 50%{box-shadow:0 10px 26px -8px rgba(0,0,0,.45), 0 0 0 10px rgba(11,143,59,0)} }

/* generic content page */
.content-page{padding-block:70px; max-width:780px}
.content-page h1{font-size:clamp(30px,4.4vw,44px); margin-block-end:24px}
.content-page .body{color:var(--ink-soft); font-size:16px; line-height:1.75}

/* WP core */
.alignwide{max-width:1220px; margin-inline:auto}
.alignfull{width:100%}
.screen-reader-text{position:absolute; left:-9999px}