/*
Theme Name: Karlla Vasco
Theme URI: https://karllavasco.com
Author: David Matheus
Author URI: https://davidmatheus.com.br
Description: Tema de portfólio para Karlla Vasco, tatuadora blackwork. Layout de página única (hero, sobre, portfólio, contato, agenda de turnês, mapa) com efeito de vidro fosco e modais de agendamento via WhatsApp. Conteúdo editável via Portfólio, Turnês e Personalizar > Configurações do site.
Version: 1.7
Requires PHP: 7.4
Requires Plugins: advanced-custom-fields
Text Domain: karlla-vasco
*/

  :root{
    --bg:         #060605;
    --fg:         #efe9dc;
    --fg-soft:    #a49d8d;
    --line:       #2c2924;
    --gray-mat:   #464646;
    --gray-text:  #cfcfcf;
    --gray-dim:   #9a9a9a;
    --panel:      #ffffff;
    --panel-ink:  #131313;
  }

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

  body{
    margin:0;
    background:var(--bg);
    color:var(--fg);
    font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
  }

  a{ color:inherit; }
  img,canvas,svg{ max-width:100%; display:block; }

  h1,h2,h3{ font-family:'Fraunces',Georgia,serif; font-style:normal; text-wrap:balance; margin:0; }

  :focus-visible{ outline:2px solid var(--fg); outline-offset:4px; }

  .wrap{ max-width:1180px; margin:0 auto; padding-inline:clamp(16px,4vw,48px); }

  .eyebrow{
    font-family:'JetBrains Mono',ui-monospace,monospace;
    font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--fg-soft); display:block; margin-bottom:1rem;
  }

  /* ---------- header ---------- */
  header.topbar{
    position:sticky;
    /* Some sites use a fallback of 0px when there's no WP admin bar (visitors não logados).
       Quando ela está logada olhando o site, o WordPress soma uma barra preta fixa de admin
       no topo — sem isso, nosso cabeçalho fosco ficaria "grudado" atrás dela ao rolar a tela
       e pareceria que sumiu. Pro visitante comum (não logado) isso não muda nada. */
    top: var(--wp-admin--admin-bar--height, 0px);
    z-index:20;
    background:rgba(6,6,5,0.6);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    backdrop-filter:blur(14px) saturate(140%);
  }
  .tour-bar{
    padding-block:9px;
    background:rgba(239,233,220,0.24);
  }
  .tour-bar-inner{
    display:flex; align-items:center; gap:0.75em; flex-wrap:wrap;
    font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--fg);
  }
  .tour-label{ color:var(--fg); font-weight:700; font-size:1.05em; letter-spacing:0.1em; }
  .tour-dot{
    width:6px; height:6px; border-radius:50%; background:var(--fg); flex:none;
    animation:pulse 2.6s ease-in-out infinite;
  }
  @keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }
  .topbar-inner{
    max-width:1180px; margin:0 auto; padding:14px clamp(16px,4vw,48px);
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  }
  .logo-slot{ display:flex; align-items:center; text-decoration:none; }
  .logo-slot img{ height:34px; width:auto; }
  .logo-slot .logo-text{
    font-family:'Fraunces',serif; font-weight:600; font-style:normal;
    font-size:1.1rem; letter-spacing:0.01em;
  }
  .header-actions{ display:flex; align-items:center; gap:clamp(14px,3vw,22px); }
  .social-icons{ display:flex; gap:16px; align-items:center; }
  .social-icons a{ opacity:0.75; transition:opacity .15s ease; font-size:16px; }
  .social-icons a:hover{ opacity:1; }
  .btn-agendar{
    /* Sem backdrop-filter própria de propósito: a barra <header> já borra o conteúdo
       da página logo abaixo do menu inteiro (tour-bar + topbar-inner); se o botão
       também borrasse, ele só re-borraria o próprio fundo do menu (double-blur) em
       vez de se misturar com o que está por trás de todo o cabeçalho. */
    font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.09em;
    text-transform:uppercase; text-decoration:none; color:var(--fg);
    display:inline-flex; align-items:center; gap:0.55em;
    background:rgba(239,233,220,0.24);
    padding:0.65em 1.2em; border:1px solid rgba(239,233,220,0.45);
    transition:background .15s ease, border-color .15s ease;
  }
  .btn-agendar:hover{ background:rgba(239,233,220,0.36); border-color:rgba(239,233,220,0.65); }
  .btn-agendar i{ font-size:0.85em; flex:none; }

  /* ---------- hero ---------- */
  .hero{ position:relative; overflow:hidden; padding-block:clamp(64px,14vw,140px); }
  .hero-photo{
    position:absolute; top:0; right:0; bottom:0;
    width:clamp(200px,44vw,620px);
    background-size:cover; background-position:center 18%;
    z-index:0;
    -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 34%);
    mask-image:linear-gradient(to right, transparent 0%, #000 34%);
  }
  @media (max-width:640px){ .hero-photo{ width:52vw; opacity:0.7; } }
  /* Véu fosco->nítido: fica embaçado perto do texto (garante leitura) e vai
     ficando nítido conforme se afasta — pensado pra quando a arte virar foto real. */
  .hero-scrim{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    -webkit-backdrop-filter:blur(26px); backdrop-filter:blur(26px);
    -webkit-mask-image:linear-gradient(to right, #000 0%, #000 34%, transparent 68%);
    mask-image:linear-gradient(to right, #000 0%, #000 34%, transparent 68%);
  }
  .hero-scrim::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(to right, var(--bg) 0%, rgba(6,6,5,0.75) 30%, transparent 66%);
  }
  .hero-inner{ position:relative; z-index:2; max-width:640px; }
  .hero h1{ font-size:clamp(3rem,9vw,5.6rem); font-weight:600; line-height:0.98; }
  .hero p.tagline{
    margin-top:1.4rem; font-size:clamp(1.05rem,2.4vw,1.3rem); color:#d8d2c3;
    max-width:34ch; line-height:1.5;
  }
  .hero .meta{ margin-top:1.6rem; color:var(--fg-soft); font-size:0.95rem; }
  .cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2.4rem; }
  .btn{
    font-family:'JetBrains Mono',monospace; font-size:0.78rem; letter-spacing:0.08em;
    text-transform:uppercase; text-decoration:none;
    display:inline-flex; align-items:center; justify-content:center; gap:0.6em;
    padding:0.95em 1.6em; border:1px solid currentColor; transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .btn.solid, .btn.ghost{
    color:var(--fg);
    background:rgba(239,233,220,0.1);
    -webkit-backdrop-filter:blur(8px) saturate(160%);
    backdrop-filter:blur(8px) saturate(160%);
    border-color:rgba(239,233,220,0.35);
  }
  .btn.solid:hover, .btn.ghost:hover{
    background:rgba(239,233,220,0.22); border-color:rgba(239,233,220,0.6);
  }
  .btn i{ font-size:0.95em; line-height:1; }

  /* ---------- section rhythm ---------- */
  section{ padding-block:clamp(56px,10vw,108px); border-top:1px solid var(--line); }
  .hero{ border-top:none; }

  /* ---------- sobre ---------- */
  .sobre-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(32px,6vw,80px); align-items:start; }
  @media (max-width:760px){ .sobre-grid{ grid-template-columns:1fr; } }
  .sobre h2{ font-size:clamp(1.9rem,4vw,2.6rem); font-weight:600; max-width:14ch; }
  .sobre p.body-copy{ max-width:56ch; margin-top:1.4rem; color:var(--fg-soft); line-height:1.7; font-size:1.02rem; }
  blockquote.pull{
    font-family:'Fraunces',serif; font-weight:300; font-style:normal;
    font-size:clamp(1.3rem,2.8vw,1.8rem); line-height:1.35; margin:0 0 1.8rem; max-width:22ch;
  }
  .spec-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
  .spec-list li{
    display:flex; justify-content:space-between; gap:1rem;
    padding-block:0.7em; border-top:1px solid var(--line);
    font-family:'JetBrains Mono',monospace; font-size:0.78rem; letter-spacing:0.03em;
  }
  .spec-list li:last-child{ border-bottom:1px solid var(--line); }
  .spec-list span:first-child{ color:var(--fg-soft); text-transform:uppercase; letter-spacing:0.1em; }
  .spec-list span:last-child{ text-align:right; }

  /* ---------- portfolio ---------- */
  .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:clamp(28px,5vw,48px); }
  .section-head h2{ font-size:clamp(1.9rem,4vw,2.6rem); font-weight:600; }
  .section-head p{ max-width:32ch; color:var(--fg-soft); font-size:0.95rem; margin:0; }

  .plate-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,32px); }
  @media (max-width:900px){ .plate-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:600px){ .plate-grid{ grid-template-columns:1fr; } }

  .plate{
    background:var(--gray-mat); padding:14px 14px 16px;
    display:flex; flex-direction:column; gap:10px;
    border:none; width:100%; font:inherit; color:inherit; text-align:left; cursor:pointer;
    transition:transform .2s ease;
  }
  .plate:hover, .plate:focus-visible{ transform:translateY(-3px); }
  .plate-num{
    font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:0.08em;
    color:var(--gray-dim);
  }
  .plate-canvas-wrap{ aspect-ratio:1/1; overflow:hidden; background:var(--panel); }
  .plate-canvas-wrap canvas{ width:100%; height:100%; transition:transform .35s ease; }
  .plate:hover .plate-canvas-wrap canvas{ transform:scale(1.06); }
  .plate-caption h3{
    font-family:'Fraunces',serif; font-weight:500; font-style:normal;
    font-size:1rem; color:var(--gray-text); margin-bottom:0.4em;
  }
  .plate-tags{
    font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.03em;
    color:var(--gray-dim); display:flex; flex-wrap:wrap; gap:0.4em 0.8em; text-transform:uppercase;
  }

  /* ---------- contato ---------- */
  .contato h2{ font-size:clamp(2.2rem,5.5vw,3.4rem); font-weight:600; max-width:14ch; }
  .contato p.body-copy{ color:#c8c1b0; max-width:52ch; margin-top:1.2rem; line-height:1.65; }
  .contato-grid{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:clamp(32px,6vw,80px); margin-top:clamp(36px,6vw,56px); }
  @media (max-width:760px){ .contato-grid{ grid-template-columns:1fr; } }
  .contact-links{ list-style:none; margin:0; padding:0; }
  .contact-links li{ border-top:1px solid var(--line); }
  .contact-links li:last-child{ border-bottom:1px solid var(--line); }
  .contact-links a{
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    padding:1.05em 0; text-decoration:none; font-size:1.05rem;
  }
  .contact-left{ display:flex; align-items:center; gap:0.9em; }
  .contact-left i{ font-size:18px; flex:none; opacity:0.85; width:1em; text-align:center; }
  .contact-links a .arrow{ width:16px; height:16px; flex:none; opacity:0.7; transition:transform .15s ease, opacity .15s ease; }
  .contact-links a:hover .arrow{ transform:translate(3px,-3px); opacity:1; }

  /* ---------- agenda ---------- */
  .agenda{ position:relative; overflow:hidden; }
  .agenda-map{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
  .agenda-map svg{ width:100%; height:100%; display:block; }
  .agenda-map .street{ stroke:var(--line); stroke-width:1.5; fill:none; opacity:0.55; }
  .agenda-map .block{ fill:rgba(239,233,220,0.035); stroke:var(--line); stroke-width:1.2; opacity:0.6; }
  @keyframes agenda-dash{ to{ stroke-dashoffset:-42; } }
  /* Pino fica fora do viewBox do mapa de propósito — assim o tamanho dele não depende
     do "slice" do SVG e não engole o texto da lista. Fica discreto (baixa opacidade)
     mas grande, marcando o cruzamento onde fica o estúdio no mapa de fundo. */
  .agenda-pin{
    position:absolute; transform:translate(-50%,-78%);
    width:clamp(140px,15vw,220px); opacity:0.18; pointer-events:none;
  }
  .agenda-pin .pin{ fill:var(--fg); }
  .agenda-pin .pin-hole{ fill:var(--bg); }
  .agenda-map .route{
    stroke:var(--fg); stroke-width:1.6; fill:none; opacity:0.3;
    stroke-linecap:round; stroke-dasharray:3 9;
    animation:agenda-dash 5s linear infinite;
  }
  .agenda-map .route.r2{ animation-duration:6.5s; animation-direction:reverse; }
  .agenda-map .route.r3{ animation-duration:1.6s; stroke-dasharray:5 6; }
  .agenda-map .route.r4{ animation-duration:2.1s; stroke-dasharray:5 6; animation-direction:reverse; }
  @media (max-width:760px){ .agenda-pin{ opacity:0.14; } }
  .agenda .wrap{ position:relative; }
  .agenda h2{ font-size:clamp(1.9rem,4vw,2.6rem); font-weight:600; max-width:16ch; }
  .agenda-list{ list-style:none; margin:clamp(24px,4vw,40px) 0 0; padding:0; max-width:640px; }
  .agenda-item{
    display:flex; flex-direction:column; gap:0.4em; width:100%;
    padding-block:1.15em; border-top:1px solid var(--line);
    background:none; border-left:none; border-right:none; border-bottom:none;
    font:inherit; color:inherit; text-align:left; cursor:pointer;
    transition:background .15s ease, padding-inline .15s ease;
  }
  .agenda-item:last-child{ border-bottom:1px solid var(--line); }
  .agenda-item:hover, .agenda-item:focus-visible{ background:rgba(239,233,220,0.05); padding-inline:0.6em; }
  .agenda-row{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; }
  .agenda-city{ font-family:'Fraunces',serif; font-weight:600; font-style:normal; font-size:1.3rem; }
  .agenda-dates{ font-family:'JetBrains Mono',monospace; font-size:0.82rem; color:var(--fg-soft); letter-spacing:0.03em; white-space:nowrap; }
  .agenda-venue{ font-family:'JetBrains Mono',monospace; font-size:0.74rem; letter-spacing:0.04em; color:var(--fg-soft); text-transform:uppercase; }
  .agenda-note{ margin-top:1.5rem; max-width:52ch; color:var(--fg-soft); font-size:0.88rem; line-height:1.6; }

  /* ---------- mapa ---------- */
  .mapa-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,56px); align-items:center; }
  @media (max-width:760px){ .mapa-grid{ grid-template-columns:1fr; } }
  .mapa h2{ font-size:clamp(1.9rem,4vw,2.6rem); font-weight:600; }
  .mapa address{ font-style:normal; margin-top:1.2rem; color:var(--fg-soft); line-height:1.6; }
  .mapa .btn{ margin-top:1.6rem; }
  .map-illustration{ background:var(--gray-mat); aspect-ratio:4/3; }
  /* Google Maps real. O filtro inverte o mapa claro pra escuro e tira a cor —
     fica preto e branco, no tom do resto do site. */
  .map-embed{
    aspect-ratio:4/3; width:100%; overflow:hidden;
    background:var(--gray-mat); border:1px solid var(--line);
  }
  .map-embed iframe{
    display:block; width:100%; height:100%; border:0;
    filter:invert(0.92) hue-rotate(180deg) grayscale(1) contrast(0.95);
  }

  /* ---------- footer ---------- */
  footer{ padding-block:28px; border-top:1px solid var(--line); }
  .footer-row{
    display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; align-items:center;
  }
  .footer-credit{ margin-top:18px; text-align:center; }
  .footer-credit a{
    font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:0.04em;
    color:var(--fg-soft); text-decoration:none;
  }
  .footer-credit a:hover{ color:var(--fg); text-decoration:underline; }
  footer .brandmark{
    font-family:'Fraunces',serif; font-weight:600; font-style:normal; font-size:0.95rem; text-decoration:none;
  }
  footer p{ margin:0; font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:0.04em; color:var(--fg-soft); text-transform:uppercase; }
  .social-row{ display:flex; gap:16px; align-items:center; }
  .social-row a{ opacity:0.7; transition:opacity .15s ease; font-size:16px; }
  .social-row a:hover{ opacity:1; }

  /* ---------- floating whatsapp ---------- */
  .float-whats{
    position:fixed; right:20px; bottom:20px; z-index:30;
    width:52px; height:52px; border-radius:50%;
    background:rgba(239,233,220,0.16); color:var(--fg);
    -webkit-backdrop-filter:blur(10px) saturate(160%);
    backdrop-filter:blur(10px) saturate(160%);
    border:1px solid rgba(239,233,220,0.4);
    display:flex; align-items:center; justify-content:center;
    text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,0.45);
    transition:transform .15s ease, background .15s ease;
  }
  .float-whats:hover{ transform:scale(1.07); background:rgba(239,233,220,0.28); }
  .float-whats i{ font-size:22px; }
  .float-whats svg{ width:24px; height:24px; }

  /* ---------- modal ---------- */
  .kv-modal-overlay{
    position:fixed; inset:0; z-index:50;
    background:rgba(6,6,5,0.72);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center; padding:24px;
  }
  .kv-modal-overlay[hidden]{ display:none; }
  /* O painel do modal é fosco de verdade: fundo translúcido + blur próprio, deixando
     o site (já borrado pelo overlay atrás) aparecer através dele — igual o header.
     Por isso os botões/close aqui dentro NÃO têm backdrop-filter próprio: eles só
     "mostram" o vidro fosco do modal (que por sua vez mostra o site), em vez de
     dobrar o blur e virar uma caixa opaca. */
  .kv-modal{
    position:relative; display:block; box-sizing:border-box;
    max-width:520px; width:100%; height:auto; max-height:86vh; overflow-y:auto; margin:0;
    background:rgba(6,6,5,0.55);
    -webkit-backdrop-filter:blur(22px) saturate(140%);
    backdrop-filter:blur(22px) saturate(140%);
    border:1px solid rgba(239,233,220,0.35);
    padding:clamp(24px,4vw,40px);
  }
  .kv-modal-close{
    position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(239,233,220,0.1); border:1px solid rgba(239,233,220,0.35); color:var(--fg);
    font-size:1.2rem; line-height:1; cursor:pointer;
  }
  .kv-modal-close:hover{ background:rgba(239,233,220,0.12); }
  .kv-modal-eyebrow{
    font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--fg-soft); display:block; margin-bottom:0.6em;
  }
  .kv-modal h3{ font-family:'Fraunces',serif; font-weight:600; font-style:normal; font-size:1.5rem; margin-bottom:0.9em; max-width:16ch; }
  .kv-modal-canvas-wrap{ width:220px; max-width:100%; aspect-ratio:1/1; background:var(--panel); margin-bottom:1.2rem; overflow:hidden; }
  .kv-modal-canvas-wrap canvas{ width:100%; height:100%; }
  .kv-modal-tags{
    font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.03em;
    color:var(--fg-soft); text-transform:uppercase; display:flex; flex-wrap:wrap; gap:0.4em 0.9em;
    margin-bottom:1.4rem;
  }
  .kv-modal-info{ font-size:0.92rem; color:var(--fg-soft); margin-bottom:1.4rem; line-height:1.6; }
  .kv-modal .btn{
    width:100%;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }

/* ---------- imagens reais (substituem o canvas/base64 do mockup) ---------- */
.hero-photo{ background-size:cover; background-position:center 18%; }
.hero-photo.sem-foto{ background:var(--gray-mat); }
.plate-canvas-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.kv-modal-canvas-wrap img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block; }
.plate-canvas-wrap.sem-foto,
.kv-modal-canvas-wrap.sem-foto{
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.04em;
  color:var(--gray-dim); text-transform:uppercase; text-align:center; padding:1em;
}