/*
Theme Name: Autotech Digital Blog V3
Theme URI: https://autotechdigital.com.br/
Author: Autotech Digital
Description: Tema editorial do Blog Autotech Digital, inspirado no layout aprovado e preparado para posts, categorias, busca e comentários do WordPress.
Version: 3.0.0
Text Domain: autotech-blog
*/


    :root {
      --bg: #f5f6f8;
      --paper: #ffffff;
      --text: #0e1525;
      --muted: #667085;
      --line: #e8eaf0;
      --blue: #3b0d4f;
      --blue-2: #5a176f;
      --soft-blue: #f2e8f5;
      --shadow: 0 18px 50px rgba(16, 24, 40, .08);
      --radius: 24px;
      --radius-sm: 16px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: "Inter", sans-serif;
      color: var(--text);
      background: var(--paper);
    }

    img { display: block; width: 100%; object-fit: cover; }
    a { color: inherit; text-decoration: none; }
    button, input, select { font: inherit; }

    .page-shell {
      width: 100%;
      min-height: 100vh;
      margin: 0;
      background: #fff;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      overflow: hidden;
    }

    .container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }

    header {
      position: sticky;
      top: 0;
      z-index: 30;
      background: rgba(255,255,255,.88);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(232,234,240,.8);
    }

    .navbar {
      width: calc(100% - 64px);
      max-width: none;
      min-height: 82px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: auto minmax(280px, 520px) auto;
      align-items: center;
      gap: 32px;
    }

    .brand-wrap {
      justify-self: start;
      display: flex;
      align-items: center;
      min-width: 190px;
    }

    .header-search {
      width: 100%;
      justify-self: center;
    }

    .header-search .search-box {
      width: 100%;
      min-width: 0;
      background: #fff;
      border-color: #e4dce8;
    }

    .header-search .search-box:focus-within {
      border-color: var(--blue-2);
      box-shadow: 0 0 0 3px rgba(90, 23, 111, .10);
    }

    .header-search .search-icon {
      color: var(--blue-2);
    }

    .brand {
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
    }

    .brand-logo {
      width: 184px;
      height: 44px;
      object-fit: contain;
      object-position: left center;
    }

    nav { display: flex; align-items: center; gap: 28px; justify-self: end; }
    nav a { font-size: 14px; font-weight: 600; color: #394150; }
    nav a:hover { color: var(--blue); }

    .nav-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 11px 18px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--blue), var(--blue-2));
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      box-shadow: 0 8px 22px rgba(59, 13, 79, .20);
    }

    .menu-toggle {
      display: none;
      border: 0;
      background: transparent;
      cursor: pointer;
      font-size: 24px;
    }

    .hero { padding: 86px 0 44px; }
    .eyebrow {
      width: fit-content;
      padding: 7px 10px;
      border-radius: 999px;
      background: var(--soft-blue);
      color: #3b0d4f;
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 18px;
    }

    .hero-top {
      display: flex;
      justify-content: space-between;
      gap: 30px;
      align-items: end;
      margin-bottom: 34px;
    }

    .hero h1 {
      margin: 0;
      font-size: clamp(34px, 4.4vw, 56px);
      line-height: .98;
      letter-spacing: -.06em;
      max-width: 760px;
    }

    .hero-copy {
      max-width: 420px;
      color: var(--muted);
      line-height: 1.7;
      font-size: 15px;
      padding-bottom: 8px;
    }

    .featured {
      min-height: 500px;
      border-radius: 28px;
      overflow: hidden;
      position: relative;
      isolation: isolate;
      box-shadow: var(--shadow);
    }

    .featured img { height: 500px; }
    .featured::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 32%, rgba(4, 10, 22, .88) 100%);
      z-index: 1;
    }

    .featured-content {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      padding: 34px;
      color: #fff;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px;
      align-items: end;
    }

    .featured-content h2 {
      margin: 0 0 10px;
      max-width: 760px;
      font-size: clamp(26px, 3.2vw, 44px);
      line-height: 1.06;
      letter-spacing: -.045em;
    }

    .featured-content p { margin: 0; color: rgba(255,255,255,.78); max-width: 690px; line-height: 1.55; }

    .meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 20px;
      font-size: 12px;
      color: rgba(255,255,255,.78);
    }

    .avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: linear-gradient(135deg, #eadcf0, #5a176f);
      border: 2px solid rgba(255,255,255,.7);
    }

    .feature-arrow {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.38);
      display: grid;
      place-items: center;
      font-size: 22px;
      backdrop-filter: blur(8px);
    }

    .toolbar {
      margin: 42px 0 28px;
      display: block;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line);
    }

    .categories { display: flex; gap: 8px; flex-wrap: wrap; }
    .chip {
      border: 0;
      background: transparent;
      color: #667085;
      padding: 9px 12px;
      border-radius: 999px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      transition: .2s ease;
    }
    .chip:hover, .chip.active { background: var(--soft-blue); color: var(--blue-2); }

    .search-box {
      min-width: 300px;
      height: 44px;
      border: 1px solid var(--line);
      border-radius: 999px;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 0 16px;
      background: white;
    }
    .search-box input { width: 100%; border: 0; outline: 0; color: var(--text); }
    .search-box span { color: #8a94a6; }

    .content-grid {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 42px;
      padding-bottom: 82px;
    }

    .posts-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 28px 22px;
    }

    .post-card {
      transition: transform .2s ease;
      cursor: pointer;
    }
    .post-card:hover { transform: translateY(-4px); }

    .post-image {
      height: 220px;
      overflow: hidden;
      border-radius: 20px;
      margin-bottom: 16px;
      background: #eef0f3;
    }
    .post-image img { height: 100%; transition: transform .4s ease; }
    .post-card:hover .post-image img { transform: scale(1.03); }

    .kicker {
      color: #3b0d4f;
      font-weight: 700;
      font-size: 11px;
      margin-bottom: 9px;
    }

    .post-card h3 {
      margin: 0 0 8px;
      font-size: 20px;
      letter-spacing: -.03em;
      line-height: 1.18;
    }
    .post-card p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .post-footer {
      margin-top: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: #7c8494;
    }

    aside { display: flex; flex-direction: column; gap: 22px; }

    .side-card {
      border: 1px solid var(--line);
      border-radius: 22px;
      padding: 22px;
      background: #fff;
    }
    .side-card h3 { margin: 0 0 16px; font-size: 18px; letter-spacing: -.025em; }

    .news-today {
      padding: 0;
      overflow: hidden;
    }
    .news-today img { height: 190px; }
    .news-today .inner { padding: 20px; }
    .news-badge {
      width: fit-content;
      background: #0e1525;
      color: #fff;
      border-radius: 999px;
      padding: 6px 9px;
      font-size: 10px;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .comment {
      display: grid;
      grid-template-columns: 36px 1fr;
      gap: 10px;
      padding: 14px 0;
      border-bottom: 1px solid var(--line);
    }
    .comment:last-child { border-bottom: 0; padding-bottom: 0; }
    .comment .avatar { width: 36px; height: 36px; border: 0; }
    .comment strong { display: block; font-size: 12px; margin-bottom: 4px; }
    .comment p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

    .newsletter {
      background: linear-gradient(140deg, #16051e 0%, #2b0a39 58%, #4b125e 100%);
      color: white;
      border: 0;
    }
    .newsletter p { color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.55; }
    .newsletter-form { display: flex; gap: 8px; margin-top: 14px; }
    .newsletter-form input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      border-radius: 12px;
      padding: 12px;
    }
    .newsletter-form button {
      border: 0;
      border-radius: 12px;
      background: #fff;
      color: #0e1525;
      padding: 0 13px;
      font-weight: 800;
      cursor: pointer;
    }

    .empty-state {
      grid-column: 1 / -1;
      border: 1px dashed #cfd5df;
      border-radius: 18px;
      padding: 38px;
      text-align: center;
      color: var(--muted);
      display: none;
    }

    .solutions-cta {
      padding: 0 0 72px;
    }

    .solutions-cta-card {
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 32px;
      padding: 46px 50px;
      border-radius: 28px;
      color: #fff;
      background:
        radial-gradient(circle at 12% 20%, rgba(255,255,255,.14), transparent 28%),
        linear-gradient(135deg, #1d0628 0%, #3b0d4f 52%, #5a176f 100%);
      box-shadow: 0 24px 60px rgba(69, 22, 91, .18);
    }

    .solutions-cta-card::after {
      content: "";
      position: absolute;
      width: 260px;
      height: 260px;
      right: -80px;
      top: -110px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: 0 0 0 42px rgba(255,255,255,.035), 0 0 0 84px rgba(255,255,255,.025);
      pointer-events: none;
    }

    .solutions-cta-copy { position: relative; z-index: 1; max-width: 760px; }
    .solutions-cta-copy span {
      display: inline-block;
      margin-bottom: 12px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: rgba(255,255,255,.72);
    }
    .solutions-cta-copy h2 {
      margin: 0 0 12px;
      font-size: clamp(28px, 3.2vw, 42px);
      line-height: 1.05;
      letter-spacing: -.045em;
    }
    .solutions-cta-copy p {
      margin: 0;
      max-width: 650px;
      font-size: 14px;
      line-height: 1.65;
      color: rgba(255,255,255,.76);
    }
    .solutions-cta-button {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-width: 210px;
      padding: 15px 20px;
      border-radius: 999px;
      background: #fff;
      color: #3b0d4f;
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
      transition: transform .2s ease, box-shadow .2s ease;
      box-shadow: 0 12px 30px rgba(20, 5, 28, .16);
    }
    .solutions-cta-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 34px rgba(20, 5, 28, .22);
    }

    footer {
      border-top: 1px solid var(--line);
      padding: 30px 0;
      color: var(--muted);
      font-size: 12px;
    }
    .footer-inner { display: flex; justify-content: space-between; gap: 20px; align-items: center; }

    .toast {
      position: fixed;
      right: 26px;
      bottom: 26px;
      background: #0e1525;
      color: white;
      padding: 14px 18px;
      border-radius: 14px;
      font-size: 13px;
      box-shadow: var(--shadow);
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
      transition: .25s ease;
      z-index: 100;
    }
    .toast.show { opacity: 1; transform: translateY(0); }

    @media (max-width: 980px) {
      .navbar { width: calc(100% - 40px); grid-template-columns: auto minmax(220px, 1fr) auto; gap: 20px; }
      .brand-wrap { min-width: 160px; }
      .hero-top { grid-template-columns: 1fr; display: grid; }
      .hero-copy { max-width: 720px; }
      .content-grid { grid-template-columns: 1fr; }
      aside { display: grid; grid-template-columns: repeat(3, 1fr); }
      .news-today img { height: 140px; }
    }

    @media (max-width: 760px) {
      .page-shell { width: 100%; margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
      .container { width: min(100% - 28px, 1180px); }
      .navbar { width: calc(100% - 28px); min-height: 70px; grid-template-columns: auto 1fr auto; gap: 12px; }
      .brand-wrap { min-width: 0; }
      .header-search { display: none; }
      nav {
        position: absolute;
        top: 70px;
        left: 14px;
        right: 14px;
        display: none;
        background: white;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 18px;
        box-shadow: var(--shadow);
      }
      nav.open { display: flex; }
      nav a { padding: 13px 12px; }
      .nav-cta { margin-top: 6px; }
      .menu-toggle { display: block; }
      .hero { padding-top: 50px; }
      .hero h1 { font-size: 40px; }
      .featured, .featured img { height: 430px; min-height: 430px; }
      .featured-content { grid-template-columns: 1fr; padding: 24px; }
      .feature-arrow { display: none; }
      .toolbar { align-items: stretch; flex-direction: column; }
      .search-box { min-width: 0; width: 100%; }
      .posts-grid { grid-template-columns: 1fr; }
      .post-image { height: 240px; }
      aside { grid-template-columns: 1fr; }
      .news-today img { height: 220px; }
      .solutions-cta { padding-bottom: 48px; }
      .solutions-cta-card { grid-template-columns: 1fr; padding: 34px 26px; }
      .solutions-cta-button { width: 100%; min-width: 0; }
      .footer-inner { flex-direction: column; align-items: flex-start; }
    }
  

/* WordPress integration */
body.admin-bar header { top: 32px; }
.custom-logo { width: 184px; height: 44px; object-fit: contain; object-position: left center; }
.menu-principal-container ul,
#mainNav ul { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 28px; }
#mainNav li { margin: 0; }
#mainNav .menu-item a { font-size: 14px; font-weight: 600; color: #394150; }
#mainNav .current-menu-item > a,
#mainNav .menu-item a:hover { color: var(--blue); }
.wp-post-image { width: 100%; height: 100%; object-fit: cover; }
.featured-placeholder,
.post-image-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg,#f3edf6,#d9c3e2); }
.featured a { display: block; color: inherit; }
.category-link { display: inline-flex; }
.pagination { margin-top: 34px; display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers { padding: 10px 13px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 700; }
.pagination .current { background: var(--soft-blue); color: var(--blue); border-color: transparent; }
.article-shell { padding: 70px 0 80px; }
.article-head { max-width: 880px; margin: 0 auto 34px; text-align: center; }
.article-head h1 { margin: 12px 0 18px; font-size: clamp(38px,5.4vw,68px); line-height: 1.02; letter-spacing: -.055em; }
.article-meta { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:13px; }
.article-cover { max-width: 1080px; height: min(62vw, 600px); margin: 0 auto 42px; border-radius: 28px; overflow:hidden; background:#f0edf2; }
.article-content { max-width: 760px; margin: 0 auto; font-size: 17px; line-height: 1.85; color:#273142; }
.article-content h2,.article-content h3 { color:var(--text); letter-spacing:-.03em; line-height:1.15; margin-top:1.8em; }
.article-content img { border-radius: 18px; height:auto; }
.article-content a { color:var(--blue); text-decoration:underline; }
.article-footer { max-width: 760px; margin: 44px auto 0; padding-top: 24px; border-top: 1px solid var(--line); }
.comments-area { max-width: 760px; margin: 48px auto 0; }
.comment-list { padding-left: 22px; }
.comment-list li { margin-bottom: 18px; }
.comment-form input,.comment-form textarea { width:100%; border:1px solid var(--line); border-radius:14px; padding:12px 14px; }
.comment-form .submit { width:auto; background:linear-gradient(135deg,var(--blue),var(--blue-2)); color:#fff; border:0; border-radius:999px; padding:12px 18px; font-weight:800; cursor:pointer; }
.archive-head { padding: 70px 0 26px; }
.archive-head h1 { margin:0 0 10px; font-size:clamp(38px,5vw,60px); letter-spacing:-.05em; }
.archive-head p { color:var(--muted); max-width:680px; line-height:1.65; }
.results-wrap { padding-bottom: 80px; }
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:782px){ body.admin-bar header{top:46px;} }
@media (max-width:760px){
  #mainNav ul{flex-direction:column;align-items:stretch;gap:0;}
  .custom-logo{width:150px;height:38px;}
  .article-head{text-align:left;}
  .article-meta{justify-content:flex-start;}
  .article-cover{height:330px;border-radius:20px;}
}


/* V2 — auxiliares de edição */
.featured-placeholder {
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: linear-gradient(135deg, #f2e8f5, #ffffff);
  color: #3b0d4f;
  font-weight: 700;
}