/*
Theme Name: Vilarts
Theme URI: https://vilarts.com.br
Author: Vilarts
Author URI: https://vilarts.com.br
Description: Tema proprio da Vilarts. Landing de pagina unica, sem dependencia de plugin ou page builder, CSS enxuto e focado em performance.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vilarts
*/

:root{
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
    --ink:#140806;
    --ink-2:#42160b;
    --red:#cc1d24;
    --red-light:#e8484f;
    --red-deep:#99151b;
    --gray:#665f5f;
    --white:#ffffff;
    --font-head:'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --font-body:'Inter', 'Helvetica Neue', Arial, sans-serif;
  }
  html{scroll-padding-top:env(safe-area-inset-top,0px); scroll-behavior:smooth;}
  *,*::before,*::after{box-sizing:inherit;}
  body{
    margin:0;
    background:var(--white);
    color:var(--ink);
    font-family:var(--font-body);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  img,svg{max-width:100%;display:block;}
  a{color:inherit;}
  a:focus-visible, button:focus-visible{outline:2px solid var(--red); outline-offset:3px;}
  .wrap{max-width:1100px; margin:0 auto; padding:0 24px;}

  header{padding:28px 0 20px;}
  .nav{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;}
  .logo{display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:700; font-size:1.35rem; letter-spacing:-0.01em;}
  .logo-mark{width:34px; height:34px; border-radius:6px;}
  .nav-links{display:flex; gap:28px; list-style:none; margin:0; padding:0; flex-wrap:wrap;}
  .nav-links a{text-decoration:none; font-size:0.95rem;}
  .nav-links a:hover{color:var(--red);}

  .btn{
    display:inline-block; font-family:var(--font-head); font-weight:600; font-size:0.95rem;
    padding:12px 22px; border-radius:2px; text-decoration:none; border:1px solid transparent;
    transition:background-color .15s ease, border-color .15s ease;
  }
  .btn-primary{background:var(--red); color:var(--white);}
  .btn-primary:hover{background:var(--red-deep);}
  .btn-outline{background:transparent; color:var(--white); border-color:rgba(255,255,255,.35);}
  .btn-outline:hover{border-color:var(--white);}

  .hero{
    background-image: url('https://vilarts.com.br/wp-content/uploads/2026/10/hero-background.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--ink);
    color:var(--white);
    padding:88px 0 96px;
  }
  .hero h1{
    font-family:var(--font-head); font-weight:700;
    font-size:clamp(2.4rem, 5.6vw, 4.2rem);
    line-height:1.06; letter-spacing:-0.01em; margin:0 0 28px; max-width:14ch;
  }
  .hero p{font-size:1.15rem; color:rgba(255,255,255,.78); max-width:52ch; margin:0 0 36px;}
  .hero-actions{display:flex; align-items:center; gap:24px; flex-wrap:wrap;}

  section.light{padding:88px 0;}
  h2{
    font-family:var(--font-head); font-weight:600; font-size:clamp(1.7rem,3vw,2.2rem);
    margin:0 0 48px; letter-spacing:-0.01em;
  }

  .services{border-top:1px solid #e5e0e0;}
  .service-row{
    display:grid; grid-template-columns:1fr 1.4fr; gap:32px;
    padding:32px 0; border-bottom:1px solid #e5e0e0; align-items:baseline;
  }
  .service-row h3{font-family:var(--font-head); font-weight:600; font-size:1.4rem; margin:0;}
  .service-row p{margin:0; color:var(--gray); max-width:48ch;}

  .diff-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-left:-24px;}
  .diff-item{padding:0 24px; border-left:3px solid var(--red);}
  .diff-item:first-child{padding-left:24px;}
  .diff-item h3{font-family:var(--font-head); font-weight:600; font-size:1.15rem; margin:0 0 10px;}
  .diff-item p{margin:0; color:var(--gray);}

  .about{display:grid; grid-template-columns:1.25fr .75fr; gap:56px; align-items:center;}
  .about-mark{aspect-ratio:4/3; background:var(--red); overflow:hidden;}
  .about-mark img{width:100%; height:100%; object-fit:contain; display:block;}
  .about h2{margin-bottom:24px;}
  .about p{color:var(--gray); margin:0 0 16px; max-width:50ch;}
  .about p:last-child{margin-bottom:0;}

  .contact{
    background: radial-gradient(120% 140% at 85% 30%, var(--ink-2) 0%, var(--ink) 55%, #050201 100%);
    color:var(--white); padding:96px 0 48px;
  }
  .contact h2{color:var(--white); margin-bottom:20px;}
  .contact > .wrap > p{font-size:1.1rem; color:rgba(255,255,255,.78); max-width:48ch; margin:0 0 40px;}
  .contact-actions{display:flex; gap:20px; flex-wrap:wrap; margin-bottom:72px;}

  footer{
    border-top:1px solid rgba(255,255,255,.14); padding-top:24px;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
    font-size:.85rem; color:rgba(255,255,255,.6);
  }

  @media (prefers-reduced-motion: no-preference){
    .hero h1, .hero p, .hero-actions{animation:rise .7s ease both;}
    .hero p{animation-delay:.08s;}
    .hero-actions{animation-delay:.16s;}
    @keyframes rise{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}
  }

  @media (max-width: 860px){
    .service-row{grid-template-columns:1fr; gap:8px;}
    .diff-grid{grid-template-columns:1fr; gap:32px; margin-left:0;}
    .diff-item{border-left:none; border-top:3px solid var(--red); padding:20px 0 0;}
    .diff-item:first-child{padding-left:0;}
    .about{grid-template-columns:1fr;}
    .about-mark{aspect-ratio:16/9; order:-1;}
    section.light{padding:64px 0;}
    .hero{padding:64px 0 72px; background-position:20% center;}
    .nav-links a{display:inline-block; padding:12px 0;}
    .nav-links{gap:28px 24px;}
    .lead-form{max-width:none;}
  }
  /* --- WordPress --- */
  .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;
  }
  .skip-link:focus{
    position:fixed; top:12px; left:12px; z-index:9999;
    width:auto; height:auto; clip:auto; margin:0;
    background:var(--red); color:var(--white);
    padding:12px 20px; font-family:var(--font-head); font-weight:600;
    text-decoration:none;
  }
  .admin-bar header{padding-top:60px;}

  /* --- Nosso time --- */
  .team{background:#120807; padding:88px 0; overflow:hidden;}
  .team .wrap{position:relative;}
  .team-eyebrow{margin:0 0 12px; color:var(--red-light); font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;}
  .team-title{margin:0 0 64px; color:var(--white); font-size:56px; font-weight:800; line-height:1.1;}
  .team-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0;}
  .team-item{padding:0 24px;}
  .team-item:first-child{padding-left:0;}
  .team-item+.team-item{border-left:2px solid var(--red); padding-right:0;}
  .team-photo-wrap{position:relative;}
  .team-photo{position:relative; z-index:1; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:4px;}
  .team-letter{position:absolute; z-index:0; left:50%; top:50%; transform:translate(-50%,-50%); font-family:var(--font-head); font-size:1200px; font-weight:800; line-height:1; color:rgba(204,29,36,.16); filter:blur(30px); pointer-events:none; user-select:none;}
  .team-name{display:flex; align-items:center; gap:12px; margin:24px 0 0; color:var(--white); font-size:28px; font-weight:700;}
  .team-name::before{content:""; flex:none; width:4px; height:28px; border-radius:2px; background:var(--red);}
  .team-role{margin:4px 0 0 16px; color:var(--red-light); font-size:15px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;}
  .team-bio{margin:16px 0 0 16px; color:rgba(255,255,255,.78); font-size:16px; line-height:1.6;}

  @media (max-width: 860px){
    .team{padding:64px 0;}
    .team-title{font-size:36px; margin-bottom:40px;}
    .team-grid{grid-template-columns:1fr; gap:48px;}
    .team-item{padding:0;}
    .team-item+.team-item{border-left:none; border-top:2px solid var(--red); padding-top:48px;}
    .team-letter{font-size:620px;}
    .team-photo{aspect-ratio:1/1;}
  }

  /* --- Formulario de contato --- */
  .lead-form{max-width:560px; margin:0 0 72px; display:grid; gap:18px;}
  .lead-form .field{display:grid; gap:8px;}
  .lead-form label{font-family:var(--font-head); font-weight:600; font-size:.9rem; color:#ece5e2;}
  .lead-form input,
  .lead-form textarea{
    width:100%; box-sizing:border-box;
    background:#1c100d; color:var(--white);
    border:1px solid rgba(255,255,255,.14); border-radius:2px;
    padding:12px 14px;
    font-family:var(--font-body); font-size:1rem; line-height:1.4;
    transition:border-color .15s ease;
  }
  .lead-form input::placeholder,
  .lead-form textarea::placeholder{color:#c6bbb5; opacity:1;}
  .lead-form input:focus,
  .lead-form textarea:focus{outline:none; border-color:var(--red);}
  .lead-form textarea{min-height:130px; resize:vertical;}
  .lead-form button{justify-self:start; margin-top:6px; cursor:pointer;}
  .lead-form .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

  .lead-msg{
    margin:0 0 24px; padding:14px 16px; border-radius:2px;
    border-left:3px solid var(--red); background:rgba(255,255,255,.06);
    color:var(--white); font-size:1rem; max-width:560px;
  }
  .lead-msg--ok{border-left-color:#3ba55d;}


  /* ============================================================
     Ajustes mobile  |  v1.8.0
     ============================================================ */

  /* --- Botao hamburguer (oculto no desktop) --- */
  .nav-toggle{display:none; background:none; border:0; padding:0; cursor:pointer;}

  @media (max-width:860px){

    /* Header: cabia 4 linhas, agora cabe 1 */
    header{padding:12px 0 10px;}
    .admin-bar header{padding-top:58px;}
    .nav{flex-wrap:nowrap; gap:12px; align-items:center;}
    .logo{font-size:1.05rem; gap:8px; flex:0 0 auto; position:relative; z-index:80;}
    .logo-mark{width:28px; height:28px;}

    .nav-toggle{
      display:flex; align-items:center; justify-content:center;
      width:44px; height:44px; margin-left:auto; position:relative; z-index:80;
    }
    .nav-toggle-bars,
    .nav-toggle-bars::before,
    .nav-toggle-bars::after{
      display:block; width:24px; height:2px; background:var(--ink);
      transition:transform .2s ease, opacity .2s ease;
    }
    .nav-toggle-bars::before,
    .nav-toggle-bars::after{content:''; position:absolute; left:10px;}
    .nav-toggle-bars::before{transform:translateY(-7px);}
    .nav-toggle-bars::after{transform:translateY(7px);}
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent;}
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:rotate(45deg);}
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:rotate(-45deg);}

    /* Menu em tela cheia */
    #menu-principal{
      position:fixed; inset:0; z-index:70;
      background:var(--white);
      display:flex; align-items:center; justify-content:center;
      transform:translateX(100%); transition:transform .25s ease;
      visibility:hidden;
    }
    body.nav-open #menu-principal{transform:translateX(0); visibility:visible;}
    body.nav-open{overflow:hidden;}
    #menu-principal .nav-links{flex-direction:column; align-items:center; gap:26px; padding:0;}
    #menu-principal .nav-links a{font-size:1.3rem; font-family:var(--font-head); font-weight:600; padding:8px 0;}

    /* CTA do header: oculto no mobile a pedido. O hero ja tem o botao. */
    .nav-cta{display:none;}

    /* Hero: titulo quebrava em 5 linhas */
    /* Sem foto no mobile: a imagem e horizontal e nao enquadra bem em tela estreita. */
    .hero{
      padding:48px 0 56px;
      background-image: radial-gradient(130% 120% at 80% 20%, var(--ink-2) 0%, var(--ink) 55%, #050201 100%);
      background-position:center;
      background-size:cover;
    }
    .hero h1{font-size:clamp(1.9rem,7.6vw,2.5rem); line-height:1.12; max-width:18ch; margin-bottom:18px; text-wrap:balance;}
    .hero p{font-size:1rem; margin-bottom:26px;}
    .hero-actions{display:flex; flex-direction:column; align-items:stretch; gap:12px;}
    .hero-actions .btn{width:100%; text-align:center; padding:14px 20px;}

    /* Buracos verticais */
    section.light{padding:48px 0;}
    h2{margin-bottom:22px;}
    .team{padding:48px 0;}
    .team-title{font-size:30px; margin-bottom:28px;}
    .team-grid{gap:36px;}
    .team-item + .team-item{padding-top:36px;}
    .contact{padding:56px 0 32px;}
    .contact > .wrap > p{margin-bottom:24px;}
    .contact-actions{margin-bottom:36px; flex-direction:column; align-items:stretch;}
    .contact-actions .btn{width:100%; text-align:center;}

    /* Bloco vermelho do V consumia uma tela inteira */
    .about-mark{
      aspect-ratio:auto; height:160px; width:100%; max-width:none;
      order:-1; margin:0 auto 16px; border-radius:4px;
    }
    .about-mark img{object-fit:contain; padding:14px;}

    /* 16px evita o zoom automatico do navegador no foco */
    .lead-form input, .lead-form textarea, .lead-form select{font-size:16px;}

    footer{font-size:.8rem;}
  }

  /* --- Contraste: o site vende acessibilidade, entao tem que passar em 4.5:1 --- */
  :root{--gray:#4f4a4a;}
  .hero p, .contact > .wrap > p{color:rgba(255,255,255,.88);}
  footer{color:rgba(255,255,255,.75);}


  /* --- Redes sociais no rodape --- */
  .social-link{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; margin:-11px 0;
    color:rgba(255,255,255,.75);
    transition:color .15s ease;
  }
  .social-link:hover,
  .social-link:focus-visible{color:var(--red-light);}
  @media (max-width:860px){
    footer{flex-direction:column; align-items:flex-start; gap:10px;}
    .footer-links{gap:14px; margin:6px 0 0 -11px;}
  }


  /* --- Paginas internas --- */
  .page-content{padding:72px 0 88px;}
  .page-title{
    font-family:var(--font-head); font-weight:700;
    font-size:clamp(1.9rem,4vw,2.6rem); line-height:1.1;
    margin:0 0 32px; letter-spacing:-0.01em;
  }
  .page-body{max-width:68ch;}
  .page-body h2{
    font-size:1.25rem; font-family:var(--font-head); font-weight:600;
    margin:40px 0 12px; padding-top:20px; border-top:2px solid var(--red);
  }
  .page-body p, .page-body li{color:var(--gray); line-height:1.65;}
  .page-body ul{padding-left:20px;}
  .page-body li{margin-bottom:8px;}
  .page-body a{color:var(--red); text-decoration:underline;}
  .page-back{margin-top:48px;}
  .page-back a{color:var(--red); font-weight:600; text-decoration:none;}

  /* --- Aceite da politica no formulario --- */
  .lead-form .field.consent{display:flex; gap:10px; align-items:flex-start;}
  .consent input[type="checkbox"]{width:20px; height:20px; margin:2px 0 0; flex:0 0 auto; accent-color:var(--red);}
  .consent label{font-family:var(--font-body); font-weight:400; font-size:.9rem; color:#ece5e2; line-height:1.5;}
  .consent a{color:var(--red-light);}

  /* --- Links do rodape --- */
  .footer-links{display:flex; align-items:center; gap:18px;}
  .footer-links a{color:rgba(255,255,255,.75); font-size:.85rem; text-decoration:none;}
  .footer-links a:hover{color:var(--red-light);}

  @media (max-width:860px){
    .page-content{padding:48px 0 64px;}
    .page-body h2{margin-top:32px;}
  }