.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Oswald";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Oswald";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Barlow";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Barlow";--e-global-typography-accent-font-weight:600;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================
   ESPERANZA TATTOO - patch de correcao (Fluxxo, 05/09/2026)
   Prefixo "body" em tudo: o tema Astra ganha na especificidade.
   ========================================================== */

:root{
  --display: "Oswald", "Arial Narrow", Arial, sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* --- 1. Tipografia: antes eram 4 pilhas de sistema; o H1 caia em Arial --- */
html body,
body .eyebrow, body .btn,
body .esp-btn-ghost .elementor-button, body .esp-btn-dark .elementor-button,
body .esp-header nav.links, body .hero-stats, body .hero-media-caption,
body .pillar-num, body .esp-portfolio .card figcaption,
body .esp-service .list b, body .about-badge .sub, body .esp-tcard .who,
body .esp-footer h5, body .foot-bottom,
body .elementor-widget-text-editor, body .elementor-widget-text-editor p{
  font-family: var(--body);
}

body .display,
body .esp-h2 .elementor-heading-title,
body .esp-h3 .elementor-heading-title,
body .hero-stats div strong, body .about-credits div strong, body .esp-step .n{
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
}
body .eyebrow{ font-weight: 600; letter-spacing: 0.22em; }

/* --- 2. Escala. Ha DOIS tipos de titulo: h*.display (widget HTML)
       e .esp-h* .elementor-heading-title (widget Heading). --- */
body h1.display, body .esp-hero .display{
  font-size: clamp(40px, 7vw, 72px); line-height: 1.0; text-wrap: balance;
}
body h2.display, body .esp-h2 .elementor-heading-title{
  font-size: clamp(30px, 4.4vw, 48px); line-height: 1.0; text-wrap: balance;
}
body h3.display, body .pillar-body h3, body .esp-h3 .elementor-heading-title{
  font-size: 24px; line-height: 32px; text-wrap: balance;
}
html body{ font-size: 16px; line-height: 24px; }
body .esp-lead p{ font-size: 18px; line-height: 28px; }
body .elementor-widget-text-editor p{ text-wrap: pretty; }

/* --- 3. Fundo chapado: tinha dois radial-gradient no body --- */
html body{ background-image: none; }
body::after{
  content:""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- 4. Movimento: tinha 283 elementos em "all" e 0.2s linear --- */
body .btn,
body .esp-btn-ghost .elementor-button,
body .esp-btn-dark .elementor-button{
  transition: background-color 200ms var(--ease),
              border-color 200ms var(--ease),
              color 200ms var(--ease),
              transform 200ms var(--ease);
}
body .btn:active,
body .esp-btn-ghost .elementor-button:active,
body .esp-btn-dark .elementor-button:active{ transform: scale(0.96); }

body .esp-portfolio .card img{ transition: transform 700ms var(--ease); }
body .esp-portfolio .card:hover img{ transform: scale(1.03); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* --- 5. Foco visivel: nao existia --- */
body a:focus-visible, body button:focus-visible,
body .elementor-button:focus-visible, body summary:focus-visible{
  outline: 2px solid var(--gold-2);
  outline-offset: 3px;
  border-radius: 2px;
}
html{ scroll-behavior: smooth; }

/* --- 6. Cores fora da marca: havia um azul #046BD2 e um cinza #334155 --- */
body a:not(.btn):not(.elementor-button){ color: var(--gold-2); text-underline-offset: 3px; }


/* ==========================================================
   correcoes de mobile (testado a 375px)
   ========================================================== */
@media (max-width: 767px){

  /* Portfolio: 3 dos 16 cards sao .tall (retrato 1:2, 668px).
     Os outros 13 sao quadrados de 335px - mexer neles ESTICA.
     Por isso so .tall. object-fit: cover ja preserva o enquadramento. */
  body .esp-portfolio .card.tall{ aspect-ratio: 4 / 5; }

  /* Alvos de toque. O FAQ estava com 24px de altura. */
  body .faq-item summary{
    min-height: 44px; display: flex; align-items: center; padding-block: 10px;
  }
  body .btn,
  body .esp-btn-ghost .elementor-button,
  body .esp-btn-dark .elementor-button,
  body .elementor-button{
    min-height: 48px; display: inline-flex; align-items: center; justify-content: center;
  }
  body .esp-header nav.links a{
    min-height: 44px; display: inline-flex; align-items: center;
  }

  /* CTAs do hero na largura toda: mais facil com o polegar. */
  body .esp-hero .btn{ width: 100%; }
}


/* ==========================================================
   Botao "ver mais" do portfolio (depende do snippet em
   Elementor -> Custom Code)
   ========================================================== */
body .esp-portfolio .card.oculto{ display: none !important; }

body .esp-portfolio .ver-mais{
  display: none;
  margin: 20px auto 0;
  cursor: pointer;
  font-family: var(--body);
  font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  min-height: 48px; padding: 0 26px; border-radius: 2px;
  background: transparent; border: 1px solid var(--rule); color: var(--paper);
  transition: background-color 200ms var(--ease),
              border-color 200ms var(--ease),
              color 200ms var(--ease),
              transform 200ms var(--ease);
}
body .esp-portfolio .ver-mais:hover{ border-color: var(--gold); color: var(--gold); }
body .esp-portfolio .ver-mais:active{ transform: scale(0.96); }

@media (max-width: 767px){
  body .esp-portfolio .ver-mais{ display: block; width: 100%; }
}


/* ==========================================================
   Menu mobile: painel compacto abaixo do header.
   ATENCAO: o bottom:auto e obrigatorio. A versao anterior
   usava inset:0, que fixa tambem o bottom — sem sobrescrever,
   o painel estica ate o fim da tela e vira uma pagina.
   Depende do snippet no widget HTML da pagina.
   ========================================================== */
.esp-burger{ display:none; position:relative; width:44px; height:44px; flex:0 0 44px;
  align-items:center; justify-content:center; background:transparent; border:0; cursor:pointer; padding:0; }
.esp-burger span{ position:absolute; display:block; width:22px; height:2px; background:var(--paper); border-radius:2px;
  transition: transform 300ms var(--ease), opacity 180ms var(--ease); }
.esp-burger span:nth-child(1){ transform: translateY(-7px); }
.esp-burger span:nth-child(3){ transform: translateY(7px); }
.esp-burger[aria-expanded="true"] span:nth-child(1){ transform: rotate(45deg); }
.esp-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.esp-burger[aria-expanded="true"] span:nth-child(3){ transform: rotate(-45deg); }
.esp-burger:focus-visible{ outline:2px solid var(--gold-2); outline-offset:3px; }

#esp-menu{
  position: fixed;
  top: calc(var(--header-h, 81px) + 8px);
  left: 12px; right: 12px; bottom: auto;
  height: auto;
  max-height: calc(100dvh - var(--header-h, 81px) - 24px);
  overflow-y: auto;
  z-index: 200;
  display: block;
  padding: 6px;
  background: rgba(1,1,1,0.94);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--rule);
  border-radius: 2px;
  box-shadow: 0 24px 48px -24px rgba(0,0,0,0.9);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 220ms var(--ease);
}
#esp-menu.aberto{ opacity:1; visibility:visible; transform:none; }

#esp-menu a.item{
  display:flex; align-items:center; min-height:48px; padding:0 12px;
  font-family: var(--body); font-size:15px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--paper); text-decoration:none;
  border-bottom:1px solid rgba(184,133,24,0.14);
  opacity:1; transform:none;
  transition: color 200ms var(--ease), background-color 200ms var(--ease);
}
#esp-menu a.item:last-of-type{ border-bottom:0; }
#esp-menu a.item:hover{ color:var(--gold-2); background-color:rgba(184,133,24,0.06); }
#esp-menu a.item:active{ background-color:rgba(184,133,24,0.12); }

#esp-menu .menu-cta{
  display:flex; width:100%; margin-top:6px;
  align-items:center; justify-content:center; min-height:48px;
  opacity:1; transform:none;
}

@media (max-width:767px){ .esp-burger{ display:flex; } }
@media (min-width:768px){ #esp-menu{ display:none; } }



/* ==========================================================
   Ajustes no botao flutuante nativo (Elementor Pro).
   Dois defeitos que os controles do widget nao resolvem:
   1) o logo tem proporcao 3,25:1 e o avatar e um circulo de
      75px com object-fit:cover, entao o logo saia cortado
      no meio e ilegivel;
   2) o texto do CTA herdava --gold-2 sobre fundo --gold,
      dando contraste 1,46:1. Com preto vai a 6,37:1.
      Precisa de !important: a regra
      "body a:not(.btn):not(.elementor-button)" la em cima
      alcanca esse link.
   ========================================================== */
body .e-contact-buttons__profile-image-el{
  object-fit: contain !important;
  padding: 6px;
  background: var(--ink-2);
}
body .e-contact-buttons__send-cta{ color: var(--ink) !important; }
body .e-contact-buttons__send-cta svg{ fill: var(--ink) !important; }/* End custom CSS */