/*
Theme Name: TEC4S
Theme URI: https://tec4s.com.br
Author: TEC4S Soluções em TI
Author URI: https://tec4s.com.br
Description: Tema institucional/blog para a TEC4S — TI gerenciada para PMEs. Layout moderno, responsivo, construído a partir da identidade visual da marca (navy, vermelho e cinza sobre fundo branco).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: tec4s
Tags: blog, e-commerce, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =========================================================
   0. RESET & TOKENS
   ========================================================= */
:root{
  --navy:#0F1B4C;
  --navy-2:#16266B;
  --red:#ED1C24;
  --gray:#6D6E71;
  --gray-light:#EDEEF1;
  --bg:#FFFFFF;
  --bg-tint:#F6F7FA;
  --ink:#10131F;
  --ink-soft:#565A6E;
  --radius:14px;
  --maxw:1180px;
  --chevron: polygon(18% 0%, 100% 0%, 82% 100%, 0% 100%);
}
*,*::before,*::after{box-sizing:border-box;}
body{margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block;}
a{text-decoration:none; color:inherit;}
ul{list-style:none; margin:0; padding:0;}
h1,h2,h3,h4,h5{font-family:'Space Grotesk', sans-serif; color:var(--navy); letter-spacing:-0.01em; margin:0;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.screen-reader-text{position:absolute; left:-9999px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--red);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  font-weight:500;
}
.eyebrow::before{
  content:"";
  width:22px; height:10px;
  background:var(--red);
  clip-path:var(--chevron);
}

/* =========================================================
   1. HEADER
   ========================================================= */
header.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--gray-light);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:76px;}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{height:40px; width:auto;}
.brand .site-title{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; color:var(--navy);}
.nav-links{display:flex; align-items:center; gap:36px;}
.nav-links ul{display:flex; align-items:center; gap:36px;}
.nav-links a{font-size:14.5px; font-weight:500; color:var(--ink); position:relative; padding:6px 0;}
.nav-links a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--red); transition:width .25s ease;}
.nav-links a:hover::after{width:100%;}
.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--navy); color:#fff !important;
  font-size:14px; font-weight:600;
  padding:11px 22px 11px 20px;
  clip-path:var(--chevron);
  transition:background .2s ease;
}
.nav-cta:hover{background:var(--red);}
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:8px;}
.burger span{width:24px; height:2px; background:var(--navy); display:block;}
.mobile-panel{display:none; flex-direction:column; gap:2px; padding:8px 0 20px;}
.mobile-panel a{padding:12px 4px; font-weight:500; border-bottom:1px solid var(--gray-light); display:block;}
.mobile-panel.open{display:flex;}

/* =========================================================
   2. HERO
   ========================================================= */
.hero{position:relative; padding:88px 0 60px; background:linear-gradient(180deg, var(--bg-tint) 0%, #FFFFFF 78%); overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center;}
.hero h1{font-size:clamp(34px, 4.6vw, 54px); line-height:1.08; font-weight:700; margin-bottom:22px;}
.hero h1 em{font-style:normal; color:var(--red);}
.hero p.lead{font-size:17.5px; line-height:1.65; color:var(--ink-soft); max-width:480px; margin-bottom:32px;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:44px;}
.btn{display:inline-flex; align-items:center; gap:10px; font-size:14.5px; font-weight:600; padding:14px 26px 14px 24px; clip-path:var(--chevron); transition:transform .2s ease, background .2s ease;}
.btn-primary{background:var(--red); color:#fff !important;}
.btn-primary:hover{transform:translateX(2px); background:#D0141B;}
.btn-ghost{background:transparent; color:var(--navy) !important; border:1.5px solid var(--navy); clip-path:none; border-radius:8px; padding:12.5px 24px;}
.btn-ghost:hover{background:var(--navy); color:#fff !important;}
.hero-badges{display:flex; flex-wrap:wrap; gap:28px;}
.hero-badges div{font-size:13px; color:var(--ink-soft); display:flex; align-items:center; gap:8px;}
.hero-badges span.dot{width:7px; height:7px; border-radius:50%; background:var(--red);}

.signal-wrap{position:relative; aspect-ratio:1/1; max-width:480px; margin:0 auto;}
.signal-wrap svg{width:100%; height:100%;}
.node{fill:var(--navy);}
.node.active{fill:var(--red);}
.link{stroke:var(--gray); stroke-width:1.4; opacity:0.45;}
.pulse-path{stroke:var(--red); stroke-width:2.4; fill:none; stroke-dasharray:8 10; animation:dash 3.2s linear infinite;}
@keyframes dash{ to{ stroke-dashoffset:-180; } }
.ring{fill:none; stroke:var(--navy); stroke-width:1; opacity:0.12;}

/* =========================================================
   3. STRIP
   ========================================================= */
.strip{background:var(--navy); padding:16px 0;}
.strip .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;}
.strip span{color:#fff; font-family:'JetBrains Mono', monospace; font-size:12.5px; letter-spacing:0.05em; opacity:0.85;}

/* =========================================================
   4. GENERIC SECTIONS
   ========================================================= */
section{padding:96px 0;}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head h2{font-size:clamp(28px,3.4vw,38px); font-weight:700; margin-bottom:14px;}
.section-head p{color:var(--ink-soft); font-size:16px; line-height:1.6; margin:0;}

/* =========================================================
   5. SERVICES
   ========================================================= */
.services-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--gray-light); border:1px solid var(--gray-light);}
.service-card{background:#fff; padding:34px 28px; transition:background .25s ease;}
.service-card:hover{background:var(--bg-tint);}
.service-card .mark{width:30px; height:14px; background:var(--gray); clip-path:var(--chevron); margin-bottom:18px;}
.service-card:nth-child(4n+1) .mark{background:var(--navy);}
.service-card:nth-child(4n+2) .mark{background:var(--red);}
.service-card:nth-child(4n+3) .mark{background:var(--gray);}
.service-card:nth-child(4n+4) .mark{background:var(--navy-2);}
.service-card h3{font-size:19px; margin-bottom:10px;}
.service-card p{font-size:14.5px; color:var(--ink-soft); line-height:1.6; margin:0;}

/* =========================================================
   6. PROCESS
   ========================================================= */
.process{background:var(--bg-tint);}
.process-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:32px; position:relative;}
.process-grid::before{content:""; position:absolute; top:19px; left:6%; right:6%; height:1px; background:repeating-linear-gradient(90deg, var(--gray) 0 6px, transparent 6px 12px); opacity:.5;}
.step{position:relative;}
.step .step-num{width:40px; height:40px; border-radius:50%; background:#fff; border:1.5px solid var(--navy); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk', sans-serif; font-weight:600; color:var(--navy); margin-bottom:20px; position:relative; z-index:2;}
.step:nth-child(1) .step-num{background:var(--navy); color:#fff;}
.step h4{font-size:16.5px; margin-bottom:8px; color:var(--ink);}
.step p{font-size:14px; color:var(--ink-soft); line-height:1.55; margin:0;}

/* =========================================================
   7. CTA BANNER
   ========================================================= */
.cta-banner{background:var(--navy); position:relative; overflow:hidden; padding:70px 0;}
.cta-banner::after{content:""; position:absolute; right:-60px; top:-40px; width:340px; height:200px; background:var(--red); opacity:0.9; clip-path:var(--chevron);}
.cta-banner::before{content:""; position:absolute; right:40px; top:-40px; width:200px; height:200px; background:var(--gray); opacity:0.55; clip-path:var(--chevron);}
.cta-inner{position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;}
.cta-inner h2{color:#fff; font-size:clamp(24px,3vw,32px); max-width:520px;}

/* =========================================================
   8. BLOG / POST CARDS
   ========================================================= */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.post-card{border:1px solid var(--gray-light); border-radius:var(--radius); overflow:hidden; transition:box-shadow .25s ease, transform .25s ease; background:#fff;}
.post-card:hover{box-shadow:0 18px 40px rgba(15,27,76,0.1); transform:translateY(-4px);}
.post-thumb{height:170px; position:relative; background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 60%, var(--gray) 100%); background-size:cover; background-position:center;}
.post-thumb::after{content:""; position:absolute; left:20px; bottom:-14px; width:56px; height:26px; background:var(--red); clip-path:var(--chevron);}
.post-body{padding:26px 22px 22px;}
.post-tag{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--red); letter-spacing:.08em; text-transform:uppercase;}
.post-body h3{font-size:17.5px; margin:12px 0 10px; line-height:1.35;}
.post-body h3 a{color:var(--navy);}
.post-body p{font-size:14px; color:var(--ink-soft); line-height:1.6; margin-bottom:16px;}
.post-meta{font-size:12.5px; color:var(--gray); display:flex; justify-content:space-between;}
.pagination{display:flex; gap:10px; justify-content:center; margin-top:56px;}
.pagination a, .pagination span{padding:10px 16px; border:1px solid var(--gray-light); border-radius:8px; font-size:13.5px; color:var(--navy);}
.pagination .current{background:var(--navy); color:#fff; border-color:var(--navy);}

/* single post / page content */
.single-post, .page-content-wrap{max-width:760px; margin:0 auto; padding:70px 24px;}
.single-post .post-title, .page-content-wrap .page-title{font-size:clamp(28px,4vw,42px); margin-bottom:18px;}
.single-post .post-meta-top{font-family:'JetBrains Mono', monospace; font-size:12.5px; color:var(--red); text-transform:uppercase; letter-spacing:.08em; margin-bottom:20px;}
.single-post .featured-image{margin:32px 0; border-radius:var(--radius); overflow:hidden;}
.entry-content{font-size:16.5px; line-height:1.8; color:var(--ink);}
.entry-content p{margin:0 0 22px;}
.entry-content h2{font-size:26px; margin:40px 0 16px;}
.entry-content h3{font-size:21px; margin:32px 0 14px;}
.entry-content a{color:var(--red); text-decoration:underline;}
.entry-content blockquote{border-left:3px solid var(--red); padding:4px 0 4px 22px; color:var(--ink-soft); font-style:italic; margin:28px 0;}
.entry-content img{border-radius:var(--radius); margin:24px 0;}
.entry-content ul, .entry-content ol{margin:0 0 22px; padding-left:22px;}

/* =========================================================
   9. FOOTER
   ========================================================= */
footer.site-footer{background:#0B1440; padding:64px 0 28px; color:#C7CBE0;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; margin-bottom:48px;}
.footer-grid h5{color:#fff; font-family:'Space Grotesk',sans-serif; font-size:15px; margin-bottom:18px;}
.footer-grid img{height:34px; margin-bottom:16px; filter:brightness(0) invert(1);}
.footer-grid p{font-size:13.5px; line-height:1.7; color:#9EA4C4; max-width:280px; margin:0;}
.footer-links li{margin-bottom:11px;}
.footer-links a{font-size:13.5px; color:#C7CBE0; transition:color .2s ease;}
.footer-links a:hover{color:var(--red);}
.footer-widget select, .footer-widget input{width:100%;}
.newsletter input{width:100%; padding:12px 14px; border-radius:8px; border:1px solid #2A3468; background:#101A4E; color:#fff; font-size:13.5px; margin-bottom:10px;}
.newsletter button{width:100%; padding:12px; background:var(--red); color:#fff; border:none; font-weight:600; font-size:13.5px; clip-path:var(--chevron); cursor:pointer;}
.footer-bottom{border-top:1px solid #232C5C; padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:#7B81A8;}

/* =========================================================
   10. RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .process-grid{grid-template-columns:repeat(2,1fr); row-gap:36px;}
  .process-grid::before{display:none;}
  .blog-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:800px){
  .hero-grid{grid-template-columns:1fr;}
  .signal-wrap{order:-1; max-width:320px;}
}
@media (max-width:720px){
  .nav-links{display:none;}
  .nav-cta{display:none;}
  .burger{display:flex;}
  .services-grid{grid-template-columns:1fr;}
  .process-grid{grid-template-columns:1fr;}
  .blog-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  section{padding:64px 0;}
  .cta-inner{flex-direction:column; align-items:flex-start;}
}

/* =========================================================
   11. WORDPRESS CORE / ACCESSIBILITY DEFAULTS
   ========================================================= */
.alignleft{float:left; margin-right:24px;}
.alignright{float:right; margin-left:24px;}
.aligncenter{display:block; margin:0 auto;}
.wp-caption{max-width:100%;}
.wp-caption-text{font-size:12.5px; color:var(--gray); margin-top:8px;}
a:focus-visible, button:focus-visible, input:focus-visible{outline:2px solid var(--red); outline-offset:2px;}