/*
Theme Name: DubielTech Elétrica
Theme URI: https://dubieltech.com.br/
Author: DubielTech
Author URI: https://dubieltech.com.br/
Description: Tema leve e responsivo para a DubielTech Elétrica, focado em SEO local para eletricista em Ponta Grossa.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: dubieltech-eletrica
*/

:root {
      --black: #050505;
      --black-2: #111111;
      --white: #ffffff;
      --blue: #1389e8;
      --blue-dark: #0b68b5;
      --orange: #ffb000;
      --gray-50: #f7f8fa;
      --gray-100: #eef1f4;
      --gray-200: #dce1e7;
      --gray-500: #68717c;
      --gray-700: #343a41;
      --max: 1180px;
      --radius: 18px;
      --shadow: 0 18px 50px rgba(0,0,0,.08);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--black);
      background: var(--white);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.6;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

    img, svg { display: block; max-width: 100%; }
    a { color: inherit; }
    button, input, select, textarea { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    :focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }

    .skip-link {
      position: fixed;
      left: 1rem;
      top: -5rem;
      z-index: 999;
      padding: .8rem 1rem;
      border-radius: 10px;
      background: var(--orange);
      color: var(--black);
      font-weight: 900;
      transition: top .2s ease;
    }
    .skip-link:focus { top: 1rem; }

    .container {
      width: min(calc(100% - 2rem), var(--max));
      margin-inline: auto;
    }

    .section { padding: clamp(4rem, 8vw, 7rem) 0; }
    .section--gray { background: var(--gray-50); }
    .section--black { background: var(--black); color: var(--white); }

    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { line-height: 1.08; letter-spacing: -.035em; }
    h1 {
      max-width: 880px;
      margin-bottom: 1.4rem;
      font-size: clamp(2.8rem, 7vw, 5.6rem);
    }
    h2 {
      max-width: 820px;
      margin-bottom: 1rem;
      font-size: clamp(2rem, 4.5vw, 3.7rem);
    }
    h3 { margin-bottom: .65rem; font-size: 1.25rem; }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      margin: 0 0 1rem;
      color: var(--blue-dark);
      font-size: .78rem;
      font-weight: 950;
      letter-spacing: .13em;
      text-transform: uppercase;
    }
    .eyebrow::before {
      content: "";
      width: 28px;
      height: 4px;
      background: var(--orange);
      border-radius: 999px;
    }
    .section--black .eyebrow { color: #8ecbff; }

    .lead {
      max-width: 720px;
      color: #d9dde2;
      font-size: clamp(1.08rem, 2vw, 1.25rem);
    }
    .section-copy {
      max-width: 720px;
      color: var(--gray-500);
      font-size: 1.06rem;
    }
    .section--black .section-copy { color: #b9c0c8; }
    .section-head { margin-bottom: 2.4rem; }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(5,5,5,.96);
      border-bottom: 1px solid rgba(255,255,255,.1);
      backdrop-filter: blur(12px);
    }
    .header-inner {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.2rem;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      line-height: 0;
    }
    .brand-logo {
      width: auto;
      height: 50px;
      object-fit: contain;
    }
    .nav {
      display: flex;
      align-items: center;
      gap: 1.4rem;
    }
    .nav a {
      color: #e3e6e9;
      text-decoration: none;
      font-size: .93rem;
      font-weight: 760;
    }
    .nav a:hover { color: var(--white); }

    .menu-toggle {
      display: none;
      width: 44px;
      height: 44px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 12px;
      background: transparent;
      color: var(--white);
      font-size: 1.35rem;
      cursor: pointer;
    }

    .btn {
      min-height: 52px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .55rem;
      padding: .85rem 1.2rem;
      border: 1px solid transparent;
      border-radius: 12px;
      text-decoration: none;
      font-weight: 900;
      line-height: 1.15;
      cursor: pointer;
      transition: transform .2s ease, background .2s ease, border-color .2s ease;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn--orange { background: var(--orange); color: var(--black); }
    .btn--orange:hover { background: #ffc03d; }
    .btn--blue { background: var(--blue); color: var(--white); }
    .btn--blue:hover { background: var(--blue-dark); }
    .btn--outline {
      border-color: rgba(255,255,255,.24);
      color: var(--white);
      background: transparent;
    }
    .btn--dark { background: var(--black); color: var(--white); }
    .btn--sm { min-height: 43px; padding: .65rem 1rem; font-size: .9rem; }

    .hero {
      padding: clamp(5.2rem, 10vw, 8.4rem) 0 3rem;
      color: var(--white);
      background: var(--black);
    }
    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(290px, .65fr);
      gap: clamp(2rem, 6vw, 5rem);
      align-items: center;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .8rem;
      margin: 2rem 0 1rem;
    }
    .hero-note { color: #929aa3; font-size: .92rem; }

    .hero-panel {
      padding: 1.6rem;
      border: 1px solid #252525;
      border-radius: 22px;
      background: var(--black-2);
    }
    .hero-panel-title {
      margin-bottom: 1.1rem;
      color: var(--white);
      font-size: 1.2rem;
      font-weight: 900;
    }
    .hero-list {
      display: grid;
      gap: .85rem;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .hero-list li {
      display: grid;
      grid-template-columns: 14px 1fr;
      gap: .75rem;
      align-items: start;
      color: #d7dadd;
    }
    .hero-list li::before {
      content: "";
      width: 10px;
      height: 10px;
      margin-top: .45rem;
      border-radius: 50%;
      background: var(--blue);
      box-shadow: 0 0 0 4px rgba(19,137,232,.12);
    }

    .trust-bar {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      margin-top: 3.4rem;
      border-top: 1px solid #272727;
      border-bottom: 1px solid #272727;
    }
    .trust-item {
      padding: 1.2rem 1rem;
      border-right: 1px solid #272727;
    }
    .trust-item:last-child { border-right: 0; }
    .trust-item b {
      display: block;
      color: var(--orange);
      font-size: .75rem;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .trust-item span { color: #e3e6e9; font-weight: 760; }

    .grid { display: grid; gap: 1rem; }
    .services-grid { grid-template-columns: repeat(3, 1fr); }

    .card {
      padding: 1.45rem;
      border: 1px solid var(--gray-200);
      border-radius: var(--radius);
      background: var(--white);
    }
    .service-card {
      min-height: 245px;
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .service-card:hover {
      transform: translateY(-4px);
      border-color: #b9d9f3;
      box-shadow: var(--shadow);
    }
    .service-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 42px;
      height: 32px;
      margin-bottom: 1.2rem;
      padding: 0 .7rem;
      border-radius: 999px;
      background: #eaf5ff;
      color: var(--blue-dark);
      font-size: .78rem;
      font-weight: 950;
      letter-spacing: .08em;
    }
    .card p { color: var(--gray-500); }
    .card ul {
      margin: .9rem 0 0;
      padding-left: 1.15rem;
      color: var(--gray-500);
      font-size: .94rem;
    }

    .problem-grid {
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: clamp(2rem, 6vw, 5rem);
      align-items: center;
    }
    .problem-box {
      padding: clamp(2rem, 5vw, 4rem);
      border-left: 8px solid var(--orange);
      border-radius: 0 20px 20px 0;
      background: var(--black-2);
    }
    .problem-box strong {
      display: block;
      margin-bottom: .8rem;
      color: var(--white);
      font-size: clamp(2rem, 4vw, 3.4rem);
      line-height: 1;
    }
    .problem-box p { margin-bottom: 0; color: #aeb5bd; }

    .warning-list {
      display: grid;
      gap: .75rem;
      margin: 1.8rem 0 2rem;
    }
    .warning {
      display: grid;
      grid-template-columns: 18px 1fr;
      gap: .75rem;
      align-items: center;
      padding: .95rem 1rem;
      border: 1px solid var(--gray-200);
      border-radius: 13px;
      background: var(--white);
      font-weight: 780;
    }
    .warning::before {
      content: "";
      width: 12px;
      height: 12px;
      border-radius: 3px;
      background: var(--orange);
    }

    .steps { grid-template-columns: repeat(4, 1fr); counter-reset: steps; }
    .step {
      position: relative;
      padding-top: 4.2rem;
    }
    .step::before {
      counter-increment: steps;
      content: "0" counter(steps);
      position: absolute;
      top: 1.2rem;
      left: 1.45rem;
      color: var(--blue);
      font-size: 1rem;
      font-weight: 950;
      letter-spacing: .08em;
    }

    .area-grid {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 2rem;
      align-items: start;
    }
    .area-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: .65rem;
    }
    .pill {
      padding: .62rem .85rem;
      border: 1px solid var(--gray-200);
      border-radius: 999px;
      background: var(--white);
      color: var(--gray-700);
      font-size: .91rem;
      font-weight: 760;
    }

    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2rem, 6vw, 5rem);
      align-items: start;
    }
    .about-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .8rem;
    }
    .about-item {
      padding: 1rem;
      border: 1px solid #262626;
      border-radius: 14px;
      background: var(--black-2);
    }
    .about-item b {
      display: block;
      margin-bottom: .25rem;
      color: var(--orange);
    }
    .about-item span { color: #c3c8ce; }

    .quote-layout {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: clamp(2rem, 6vw, 5rem);
      align-items: start;
    }
    .quote-form {
      display: grid;
      gap: 1rem;
      padding: clamp(1.4rem, 4vw, 2.2rem);
      border: 1px solid var(--gray-200);
      border-radius: 20px;
      background: var(--white);
      box-shadow: var(--shadow);
    }
    .field {
      display: grid;
      gap: .4rem;
    }
    .field label {
      color: var(--gray-700);
      font-size: .9rem;
      font-weight: 800;
    }
    .field input,
    .field select,
    .field textarea {
      width: 100%;
      min-height: 50px;
      padding: .8rem .9rem;
      border: 1px solid var(--gray-200);
      border-radius: 10px;
      color: var(--black);
      background: var(--white);
    }
    .field textarea { min-height: 120px; resize: vertical; }
    .form-note { margin: 0; color: var(--gray-500); font-size: .85rem; }

    .faq { max-width: 900px; }
    details { border-bottom: 1px solid var(--gray-200); }
    summary {
      position: relative;
      padding: 1.3rem 2.5rem 1.3rem 0;
      list-style: none;
      cursor: pointer;
      font-size: 1.04rem;
      font-weight: 850;
    }
    summary::-webkit-details-marker { display: none; }
    summary::after {
      content: "+";
      position: absolute;
      right: .4rem;
      top: 1.05rem;
      color: var(--blue);
      font-size: 1.5rem;
    }
    details[open] summary::after { content: "–"; }
    details p { padding: 0 2.5rem 1.4rem 0; color: var(--gray-500); }

    .cta {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 2rem;
      align-items: center;
      padding: clamp(2rem, 5vw, 3.5rem);
      border-radius: 20px;
      background: var(--blue);
      color: var(--white);
    }
    .cta h2 { margin-bottom: .5rem; }
    .cta p { margin-bottom: 0; color: #dcedff; }

    .site-footer {
      padding: 3.5rem 0 7rem;
      background: var(--black);
      color: var(--white);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.2fr .8fr .8fr;
      gap: 2rem;
    }
    .footer-title {
      margin-bottom: .8rem;
      color: var(--orange);
      font-weight: 900;
    }
    .footer-list {
      display: grid;
      gap: .45rem;
      margin: 0;
      padding: 0;
      list-style: none;
      color: #b7bdc4;
    }
    .footer-list a { text-decoration: none; }
    .footer-list a:hover { color: var(--white); }
    .copyright {
      margin-top: 2rem;
      padding-top: 1.4rem;
      border-top: 1px solid #242424;
      color: #818990;
      font-size: .9rem;
    }

    .mobile-bar {
      display: none;
      position: fixed;
      left: .75rem;
      right: .75rem;
      bottom: max(.75rem, env(safe-area-inset-bottom));
      z-index: 120;
      grid-template-columns: .85fr 1.15fr;
      gap: .55rem;
      padding: .5rem;
      border: 1px solid #252525;
      border-radius: 15px;
      background: rgba(5,5,5,.96);
      box-shadow: 0 18px 45px rgba(0,0,0,.25);
      backdrop-filter: blur(12px);
    }
    .mobile-bar .btn {
      min-height: 48px;
      padding: .7rem;
      font-size: .88rem;
    }

    @media (max-width: 960px) {
      .nav {
        position: absolute;
        top: calc(100% + 1px);
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
        background: var(--black);
        border-bottom: 1px solid #252525;
      }
      .nav[data-open="true"] { display: flex; }
      .menu-toggle { display: grid; place-items: center; }
      .header-cta { display: none; }
      .hero-grid,
      .problem-grid,
      .area-grid,
      .about-grid,
      .quote-layout { grid-template-columns: 1fr; }
      .services-grid { grid-template-columns: repeat(2, 1fr); }
      .steps { grid-template-columns: repeat(2, 1fr); }
      .trust-bar { grid-template-columns: repeat(2, 1fr); }
      .trust-item:nth-child(2) { border-right: 0; }
      .trust-item:nth-child(-n+2) { border-bottom: 1px solid #272727; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-grid > :first-child { grid-column: 1 / -1; }
    }

    @media (max-width: 640px) {
      .container { width: min(calc(100% - 1.2rem), var(--max)); }
      .site-header .container { width: min(calc(100% - 1rem), var(--max)); }
      .brand-logo { height: 42px; max-width: 230px; }
      h1 { font-size: clamp(2.55rem, 13vw, 4rem); }
      .hero { padding-top: 4.4rem; }
      .hero-actions { display: grid; }
      .hero-actions .btn { width: 100%; }
      .services-grid,
      .steps,
      .about-list,
      .footer-grid { grid-template-columns: 1fr; }
      .footer-grid > :first-child { grid-column: auto; }
      .trust-bar { grid-template-columns: 1fr; }
      .trust-item,
      .trust-item:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid #272727;
      }
      .trust-item:last-child { border-bottom: 0; }
      .cta { grid-template-columns: 1fr; }
      .cta .btn { width: 100%; }
      .mobile-bar { display: grid; }
      .site-footer { padding-bottom: 8rem; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    }