/*
Theme Name: A.TELA
Theme URI: https://a-tela.com.br
Author: A.TELA
Author URI: https://www.instagram.com/a.tela_/
Description: Tema institucional de uma pagina para o A.TELA - espaco de dia (estudio para locacao audiovisual) e a noite (festas e eventos), no Centro Historico de Sao Paulo.
Version: 1.0
Requires at least: 5.0
Requires PHP: 7.0
License: Uso exclusivo do A.TELA
Text Domain: atela
*/


  :root{
    /* DIA palette */
    --dia-bg:#f3ece1;
    --dia-bg2:#eae0d0;
    --dia-text:#2b2119;
    --dia-muted:#6b5d4f;
    --dia-accent:#7a2e2e;
    /* NOITE palette */
    --noite-bg:#0c0710;
    --noite-bg2:#160c1f;
    --noite-text:#f4eef8;
    --noite-muted:#b9a9c9;
    --noite-accent1:#a855f7;
    --noite-accent2:#ec4899;
    --noite-accent3:#3b82f6;
    --radius:2px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter', sans-serif;
    background:var(--dia-bg);
    color:var(--dia-text);
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3,.serif{ font-family:'Playfair Display', serif; }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  section{ padding:110px 6vw; }
  .eyebrow{
    text-transform:uppercase;
    letter-spacing:.2em;
    font-size:.72rem;
    font-weight:600;
    opacity:.7;
    margin-bottom:18px;
    display:inline-block;
  }
  .container{ max-width:1240px; margin:0 auto; }

  /* NAV */
  nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 6vw;
    background:rgba(243,236,225,.85);
    backdrop-filter:blur(10px);
    transition:background .4s, color .4s;
  }
  nav.dark{ background:rgba(12,7,16,.8); color:var(--noite-text); }
  .logo{ font-family:'Playfair Display', serif; font-weight:700; font-size:1.5rem; letter-spacing:.05em; }
  .nav-links{ display:flex; gap:34px; font-size:.85rem; font-weight:500; }
  .nav-links a{ opacity:.75; transition:opacity .2s; }
  .nav-links a:hover{ opacity:1; }
  .nav-toggle{ display:none; }
  .menu-btn{ display:none; background:none; border:none; font-size:1.6rem; cursor:pointer; color:inherit; }

  /* HERO */
  .hero{
    min-height:100vh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    padding:140px 6vw 80px;
    position:relative;
    background:linear-gradient(180deg, var(--dia-bg) 0%, var(--dia-bg2) 100%);
    overflow:hidden;
  }
  .hero-split{
    position:absolute; inset:0; display:flex; z-index:0; opacity:.16;
  }
  .hero-split div{ flex:1; background-size:cover; background-position:center; }
  .hero-split .d{ background-image:url('https://lh3.googleusercontent.com/d/1-8XFuhk6vTutxg95hLAPhajqy9IxpArH=w1200'); }
  .hero-split .n{ background-image:url('https://lh3.googleusercontent.com/d/1TtIEEdjIZcA3cZDmn2ovXw1lT3PCLoTH=w1200'); filter:saturate(1.3) contrast(1.1); }
  .hero-content{ position:relative; z-index:1; max-width:820px; }
  .hero h1{ font-size:clamp(3rem, 9vw, 6.5rem); line-height:.95; letter-spacing:-.01em; }
  .hero p.tagline{ font-size:clamp(1.05rem,2vw,1.35rem); margin-top:22px; color:var(--dia-muted); font-weight:400; }
  .hero-address{ margin-top:14px; font-size:.85rem; letter-spacing:.05em; text-transform:uppercase; opacity:.6; }
  .hero-ctas{ display:flex; gap:18px; margin-top:44px; flex-wrap:wrap; justify-content:center; }
  .btn{
    padding:15px 34px; border-radius:var(--radius); font-size:.85rem; font-weight:600;
    letter-spacing:.06em; text-transform:uppercase; cursor:pointer; border:1.5px solid currentColor;
    transition:all .25s;
  }
  .btn-dia{ background:var(--dia-text); color:var(--dia-bg); border-color:var(--dia-text); }
  .btn-dia:hover{ background:transparent; color:var(--dia-text); }
  .btn-noite{ background:transparent; color:var(--dia-text); }
  .btn-noite:hover{ background:var(--dia-text); color:var(--dia-bg); }
  .press-badge{
    margin-top:50px; font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; opacity:.55;
  }

  /* SOBRE */
  .sobre .container{ max-width:820px; text-align:center; margin-left:auto; margin-right:auto; }
  .sobre h2{ font-size:clamp(2rem,4vw,2.8rem); margin-bottom:34px; }
  .sobre p{ font-size:1.08rem; color:var(--dia-muted); margin-bottom:20px; }
  .sobre-facts{
    display:flex; justify-content:center; gap:50px; margin-top:60px; flex-wrap:wrap;
  }
  .sobre-facts div{ text-align:center; }
  .sobre-facts strong{ display:block; font-family:'Playfair Display',serif; font-size:1.8rem; }
  .sobre-facts span{ font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; opacity:.6; }

  /* DIA / NOITE SECTIONS */
  .split-section{ position:relative; }
  .split-section.noite{
    background:radial-gradient(ellipse at top, var(--noite-bg2) 0%, var(--noite-bg) 60%);
    color:var(--noite-text);
  }
  .split-header{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:50px; }
  .split-header h2{ font-size:clamp(2.4rem,5vw,3.6rem); }
  .split-header p{ max-width:380px; font-size:.98rem; }
  .split-section.noite .split-header p{ color:var(--noite-muted); }
  .split-section:not(.noite) .split-header p{ color:var(--dia-muted); }

  .gallery{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-auto-rows:220px;
    gap:14px;
  }
  .gallery a{ overflow:hidden; border-radius:var(--radius); position:relative; cursor:zoom-in; }
  .gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
  .gallery a:hover img{ transform:scale(1.08); }
  .gallery .tall{ grid-row:span 2; }
  .gallery .wide{ grid-column:span 2; }

  .noite .gallery a{ box-shadow:0 0 0 1px rgba(255,255,255,.06); }

  /* INSTALACOES */
  .instalacoes{ background:var(--dia-bg2); }
  .inst-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:36px; margin-top:50px; }
  .inst-card{ border-top:2px solid var(--dia-accent); padding-top:16px; }
  .inst-card h3{ font-size:1.05rem; margin-bottom:8px; }
  .inst-card p{ font-size:.92rem; color:var(--dia-muted); }

  /* CONTATO */
  .contato{ background:var(--noite-bg); color:var(--noite-text); }
  .contato-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; }
  .contato h2{ font-size:clamp(2.2rem,4.5vw,3rem); margin-bottom:24px; }
  .contato-info p{ color:var(--noite-muted); margin-bottom:10px; font-size:.98rem; }
  .contato-info .addr{ font-size:1.1rem; color:var(--noite-text); margin:20px 0; }
  .socials{ display:flex; gap:16px; margin-top:30px; }
  .socials a{ border:1px solid var(--noite-muted); padding:10px 20px; border-radius:var(--radius); font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; transition:.2s; }
  .socials a:hover{ background:var(--noite-text); color:var(--noite-bg); }

  form{ display:flex; flex-direction:column; gap:16px; }
  form input, form select, form textarea{
    background:transparent; border:none; border-bottom:1px solid var(--noite-muted);
    color:var(--noite-text); padding:12px 4px; font-family:'Inter',sans-serif; font-size:.95rem;
  }
  form select option{ color:#000; }
  form ::placeholder{ color:var(--noite-muted); }
  form input:focus, form select:focus, form textarea:focus{ outline:none; border-color:var(--noite-text); }
  form textarea{ resize:vertical; min-height:90px; }
  form .btn{ align-self:flex-start; margin-top:10px; background:var(--noite-accent1); border-color:var(--noite-accent1); color:#fff; }
  form .btn:hover{ background:transparent; color:var(--noite-text); border-color:var(--noite-text); }
  .form-note{ font-size:.75rem; color:var(--noite-muted); margin-top:6px; }

  footer{
    background:var(--noite-bg); color:var(--noite-muted); text-align:center;
    padding:40px 6vw 50px; font-size:.8rem; border-top:1px solid rgba(255,255,255,.08);
  }

  /* Lightbox */
  .lightbox{
    position:fixed; inset:0; background:rgba(5,3,7,.94); z-index:999;
    display:none; align-items:center; justify-content:center; padding:5vw;
  }
  .lightbox.active{ display:flex; }
  .lightbox img{ max-height:88vh; max-width:100%; border-radius:2px; }
  .lightbox-close{ position:absolute; top:26px; right:34px; color:#fff; font-size:2rem; cursor:pointer; background:none; border:none; }

  @media (max-width:900px){
    .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; }
    .gallery .wide{ grid-column:span 2; }
    .contato-grid{ grid-template-columns:1fr; gap:44px; }
    .nav-links{
      position:fixed; top:0; right:0; height:100vh; width:min(300px,80vw);
      background:var(--dia-bg); flex-direction:column; justify-content:center; align-items:flex-start;
      padding:40px; gap:26px; transform:translateX(100%); transition:transform .3s; font-size:1.05rem;
    }
    nav.dark .nav-links{ background:var(--noite-bg); }
    .nav-links.open{ transform:translateX(0); }
    .menu-btn{ display:block; }
  }