/*
Theme Name:     20Falar — Kadence Child
Theme URI:      https://20falar.com.br
Template:       kadence
Author:         20Falar Studio
Author URI:     https://20falar.com.br
Description:    Child theme do Kadence com a identidade visual editorial/neon sutil do 20Falar. Dual-light ambient, glow em texto, tipografia Fraunces + Inter + JetBrains Mono, seções customizadas via shortcodes e Kadence Blocks.
Version:        1.0.0
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    twentyfalar
*/

/* ============================================================
   20FALAR — design tokens
   ============================================================ */
:root {
  --tf-bg:        #07060b;
  --tf-bg-2:      #0d0a13;
  --tf-bg-3:      #15111d;
  --tf-paper:     #f1ece4;
  --tf-dim:       #8a7e8f;
  --tf-blue:      #3b6bff;
  --tf-blue-soft: #5c8fff;
  --tf-magenta:      #d8265e;
  --tf-magenta-soft: #ff3d77;
  --tf-rule: rgba(241,236,228,0.1);
  --tf-glow-strength: .65;
}

/* ============================================================
   Base — applied site-wide
   ============================================================ */
body.wp-site-blocks,
body {
  background: var(--tf-bg) !important;
  color: var(--tf-paper) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 900px 600px at 12% 18%,
      color-mix(in oklch, var(--tf-blue) calc(var(--tf-glow-strength) * 32%), transparent),
      transparent 60%),
    radial-gradient(ellipse 900px 700px at 88% 70%,
      color-mix(in oklch, var(--tf-magenta) calc(var(--tf-glow-strength) * 30%), transparent),
      transparent 60%),
    radial-gradient(ellipse 600px 800px at 50% 105%,
      color-mix(in oklch, var(--tf-magenta) calc(var(--tf-glow-strength) * 20%), transparent),
      transparent 60%);
  filter: blur(30px);
  animation: tfDrift 22s ease-in-out infinite alternate;
}
@keyframes tfDrift {
  0% { transform: translate(-1%, 0); }
  100% { transform: translate(2%, -1%); }
}

body::after {
  content: ''; position: fixed; inset: 0; z-index: 220; pointer-events: none;
  opacity: .28; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/></svg>");
}
body.tf-no-grain::after { display: none; }

.site, .site-container, #wrapper, main { position: relative; z-index: 2; }

/* ============================================================
   Typography
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.entry-title, .site-title, .page-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 300;
  color: var(--tf-paper);
  letter-spacing: -0.025em;
  line-height: 1.02;
  font-variation-settings: "opsz" 144;
}
h1 em, h2 em, h3 em, h4 em {
  font-style: italic;
  color: var(--tf-magenta-soft);
  text-shadow: 0 0 18px color-mix(in oklch, var(--tf-magenta) 60%, transparent);
}

p, li, td, th, blockquote {
  color: color-mix(in oklch, var(--tf-paper) 80%, transparent);
}

a { color: var(--tf-magenta-soft); transition: color .25s; }
a:hover { color: var(--tf-blue-soft); }

::selection { background: var(--tf-magenta); color: var(--tf-paper); }

/* ============================================================
   Kadence header — dark + neon accent
   ============================================================ */
.site-header, .site-main-header-wrap,
#main-header, .kadence-nav-innerwrap {
  background: transparent !important;
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
}
body.tf-nav-scrolled .site-header {
  background: rgba(7,6,11,.72) !important;
  backdrop-filter: blur(14px);
  border-bottom-color: var(--tf-rule);
}
.site-header-inner-wrap, .header-main-wrap { padding: 8px 0; }

.site-branding .site-title a {
  font-family: 'Fraunces', serif !important;
  font-size: 28px;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--tf-paper) !important;
}
.site-branding .site-title a::first-letter {
  /* aproximação visual: "2" como itálico neon */
  font-style: italic;
  color: var(--tf-magenta-soft);
  text-shadow: 0 0 12px color-mix(in oklch, var(--tf-magenta) 70%, transparent);
}

.main-navigation .menu > li > a,
.header-navigation .menu > li > a {
  color: var(--tf-paper) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: 400;
  padding: 10px 0 !important;
  margin: 0 18px !important;
  position: relative;
}
.main-navigation .menu > li > a::after {
  content: ''; position: absolute; left: 0; bottom: 2px;
  width: 0; height: 1px; background: var(--tf-magenta);
  box-shadow: 0 0 8px var(--tf-magenta);
  transition: width .35s;
}
.main-navigation .menu > li > a:hover,
.main-navigation .menu > li.current-menu-item > a { color: var(--tf-magenta-soft) !important; }
.main-navigation .menu > li > a:hover::after,
.main-navigation .menu > li.current-menu-item > a::after { width: 100%; }

/* Header button — "Fale comigo" */
.header-button, .header-cta a,
.kadence-header-button {
  padding: 10px 22px !important;
  font-size: 11px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  color: var(--tf-paper) !important;
  border: 1px solid var(--tf-magenta) !important;
  border-radius: 999px !important;
  transition: all .3s;
  box-shadow: 0 0 0 0 transparent;
}
.header-button:hover, .header-cta a:hover, .kadence-header-button:hover {
  background: var(--tf-magenta) !important;
  box-shadow: 0 0 28px color-mix(in oklch, var(--tf-magenta) 70%, transparent) !important;
}

/* ============================================================
   Buttons — generic (Kadence + Gutenberg)
   ============================================================ */
.wp-block-button__link,
.kadence-btn,
button, input[type="submit"], .button {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  padding: 17px 28px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--tf-magenta), color-mix(in oklch, var(--tf-magenta) 70%, var(--tf-blue))) !important;
  color: var(--tf-paper) !important;
  border: 1px solid var(--tf-magenta-soft) !important;
  box-shadow: 0 10px 40px -8px color-mix(in oklch, var(--tf-magenta) 70%, transparent) !important;
  transition: all .3s;
  cursor: pointer;
}
.wp-block-button__link:hover, .kadence-btn:hover,
button:hover, input[type="submit"]:hover, .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 48px -6px color-mix(in oklch, var(--tf-magenta) 85%, transparent) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  border-color: var(--tf-rule) !important;
  box-shadow: none !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--tf-blue-soft) !important;
  box-shadow: 0 0 24px -4px color-mix(in oklch, var(--tf-blue) 50%, transparent) !important;
}

/* ============================================================
   Forms
   ============================================================ */
input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], textarea, select {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--tf-rule) !important;
  color: var(--tf-paper) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  padding: 10px 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  transition: border-color .3s;
}
input:focus, textarea:focus, select:focus {
  border-bottom-color: var(--tf-magenta-soft) !important;
  box-shadow: 0 1px 0 0 var(--tf-magenta-soft) !important;
}
label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--tf-dim) !important;
}

/* ============================================================
   Content utility classes — use in Gutenberg "Additional CSS class"
   ============================================================ */
.tf-serif { font-family: 'Fraunces', Georgia, serif !important; }
.tf-mono  {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  color: var(--tf-dim);
}
.tf-mono b, .tf-mono strong { color: var(--tf-magenta-soft); font-weight: 400; }

.tf-kicker {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px;
  color: var(--tf-blue-soft) !important;
  letter-spacing: .3em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
}
.tf-kicker::before, .tf-kicker::after {
  content: ''; width: 28px; height: 1px; background: var(--tf-blue);
  box-shadow: 0 0 8px var(--tf-blue-soft);
}

.tf-neon-magenta {
  color: var(--tf-magenta-soft) !important;
  text-shadow:
    0 0 8px var(--tf-magenta-soft),
    0 0 24px var(--tf-magenta),
    0 0 48px color-mix(in oklch, var(--tf-magenta) 60%, transparent);
}
.tf-neon-blue {
  color: var(--tf-blue-soft) !important;
  font-style: italic;
  text-shadow:
    0 0 10px var(--tf-blue-soft),
    0 0 28px color-mix(in oklch, var(--tf-blue) 60%, transparent);
}

.tf-hero-title {
  font-size: clamp(56px, 8.8vw, 136px) !important;
  line-height: .92 !important;
  letter-spacing: -0.035em !important;
  font-weight: 300 !important;
}

.tf-strike {
  position: relative; display: inline-block;
}
.tf-strike::after {
  content: ''; position: absolute; left: -4%; right: -4%;
  top: 52%; height: 3px;
  background: var(--tf-magenta);
  box-shadow: 0 0 14px var(--tf-magenta);
  transform: scaleX(0); transform-origin: left;
  animation: tfStrike 1.3s .5s cubic-bezier(.7,.1,.3,1) forwards;
}
@keyframes tfStrike { to { transform: scaleX(1); } }

.tf-border-accent {
  border-left: 2px solid var(--tf-magenta);
  padding-left: 22px;
  box-shadow: -14px 0 40px -20px var(--tf-magenta);
}

.tf-section-head {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: baseline; gap: 30px;
  border-bottom: 1px solid var(--tf-rule);
  padding-bottom: 22px; margin-bottom: 60px !important;
}
.tf-section-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--tf-blue-soft);
  letter-spacing: .24em; text-transform: uppercase;
}
.tf-section-num::before { content: '✦ '; color: var(--tf-magenta-soft); }
.tf-section-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--tf-dim);
  letter-spacing: .28em; text-transform: uppercase;
}

/* Card stats / KPI */
.tf-kpi {
  padding: 28px 4px;
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--tf-magenta), var(--tf-blue)) 1;
  position: relative;
}
.tf-kpi::before {
  content: ''; position: absolute;
  top: -6px; left: 0; width: 10px; height: 10px;
  background: var(--tf-magenta); border-radius: 50%;
  box-shadow: 0 0 14px var(--tf-magenta);
  animation: tfPulse 2s infinite;
}
@keyframes tfPulse { 50% { opacity: .4; } }
.tf-kpi .tf-kpi-num {
  font-family: 'Fraunces', serif !important;
  font-weight: 300;
  font-size: clamp(56px, 7vw, 112px);
  line-height: .9;
  color: var(--tf-paper);
  letter-spacing: -.035em;
}
.tf-kpi .tf-kpi-num em {
  font-style: italic; color: var(--tf-magenta-soft);
  text-shadow: 0 0 20px color-mix(in oklch, var(--tf-magenta) 50%, transparent);
}
.tf-kpi .tf-kpi-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: color-mix(in oklch, var(--tf-paper) 75%, transparent);
  margin-top: 14px; max-width: 240px;
}

/* Marquee wrapper — use [tf_marquee] shortcode */
.tf-marquee {
  border-top: 1px solid color-mix(in oklch, var(--tf-magenta) 25%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--tf-magenta) 25%, transparent);
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--tf-blue) 8%, transparent),
    color-mix(in oklch, var(--tf-magenta) 10%, transparent));
  overflow: hidden; padding: 24px 0; margin: 40px 0;
}
.tf-marquee-track {
  display: flex; gap: 60px; white-space: nowrap;
  animation: tfScroll 42s linear infinite;
  font-family: 'Fraunces', serif;
  font-style: italic; font-weight: 300;
  font-size: 42px; color: var(--tf-paper);
}
.tf-marquee-track span { display: inline-flex; align-items: center; gap: 60px; }
.tf-marquee-track .sep {
  color: var(--tf-magenta-soft);
  text-shadow: 0 0 12px var(--tf-magenta);
  font-style: normal; font-size: 14px;
}
@keyframes tfScroll { to { transform: translateX(-50%); } }

/* Portrait frame with dual light halo — use class "tf-portrait-frame" */
.tf-portrait-frame {
  position: relative; border-radius: 4px; overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow:
    0 0 80px -20px var(--tf-blue),
    0 40px 120px -30px var(--tf-magenta),
    inset 0 0 100px rgba(0,0,0,.4);
}
.tf-portrait-frame::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg,
    color-mix(in oklch, var(--tf-blue) 20%, transparent) 0%,
    transparent 45%,
    color-mix(in oklch, var(--tf-magenta) 22%, transparent) 100%);
  mix-blend-mode: color-dodge;
}
.tf-portrait-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.05); }

/* Portfolio figure hover */
.tf-port {
  position: relative; overflow: hidden;
  background: var(--tf-bg-2);
  border: 1px solid var(--tf-rule);
  transition: all .4s;
}
.tf-port:hover {
  border-color: color-mix(in oklch, var(--tf-magenta) 60%, transparent);
  box-shadow:
    0 0 40px -8px color-mix(in oklch, var(--tf-magenta) 50%, transparent),
    0 0 60px -20px color-mix(in oklch, var(--tf-blue) 50%, transparent);
  transform: translateY(-4px);
}
.tf-port img { transition: all .6s; filter: saturate(.9) contrast(1.1); }
.tf-port:hover img { filter: saturate(1.05) contrast(1.12); transform: scale(1.05); }

/* Quote block */
.tf-quote-mark {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 220px; line-height: .8;
  color: var(--tf-magenta);
  text-shadow:
    0 0 30px var(--tf-magenta),
    0 0 60px color-mix(in oklch, var(--tf-magenta) 60%, transparent);
}

/* CTA form container */
.tf-form-card {
  border: 1px solid color-mix(in oklch, var(--tf-magenta) 40%, var(--tf-rule));
  padding: 40px 34px 34px;
  background: rgba(13,10,19,.55);
  backdrop-filter: blur(8px);
  box-shadow:
    0 0 60px -15px color-mix(in oklch, var(--tf-magenta) 50%, transparent),
    0 0 80px -25px color-mix(in oklch, var(--tf-blue) 50%, transparent);
  position: relative;
}
.tf-form-card::before {
  content: '✦ TRANSMITIR';
  position: absolute; top: -10px; left: 24px;
  background: var(--tf-bg);
  padding: 0 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--tf-magenta-soft);
  letter-spacing: .3em;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer, #colophon {
  background: var(--tf-bg-2) !important;
  border-top: 1px solid color-mix(in oklch, var(--tf-magenta) 25%, var(--tf-rule)) !important;
  color: var(--tf-paper);
}
.site-footer h4, .site-footer .widget-title {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: .3em !important;
  text-transform: uppercase !important;
  color: var(--tf-blue-soft) !important;
  font-weight: 500 !important;
}
.site-footer h4::before, .site-footer .widget-title::before {
  content: '✦ '; color: var(--tf-magenta-soft);
}
.site-footer a { color: var(--tf-paper) !important; }
.site-footer a:hover { color: var(--tf-magenta-soft) !important; }
.site-footer .site-info, .footer-credits {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--tf-dim) !important;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .tf-section-head { grid-template-columns: 1fr; gap: 10px; }
  .tf-marquee-track { font-size: 28px; gap: 40px; }
  .tf-marquee-track span { gap: 40px; }
}