/*
Theme Name: Inova
Theme URI: https://inovainovando.com.br
Author: Rafael Melo
Description: Tema institucional da Inova Comunicação — agência de conteúdo audiovisual, podcast e campanhas políticas.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: inova
*/

/* ===========================
   TOKENS & RESET
   =========================== */
:root {
    --in-bg:           #0A0A0A;
    --in-bg-soft:      #111111;
    --in-surface:      #181818;
    --in-surface-alt:  #202020;
    --in-yellow:       #EDE000;
    --in-yellow-light: #F5E84A;
    --in-yellow-dim:   rgba(237, 224, 0, 0.12);
    --in-yellow-line:  rgba(237, 224, 0, 0.30);
    --in-ink:          #F5F5F5;
    --in-muted:        #888888;
    --in-line:         rgba(255, 255, 255, 0.07);
    --in-line-strong:  rgba(255, 255, 255, 0.14);
    --in-shadow:       0 24px 60px rgba(0, 0, 0, 0.5);
    --in-radius-lg:    28px;
    --in-radius-md:    20px;
    --in-radius-sm:    14px;
    --in-container:    min(1200px, calc(100% - 40px));
    /* Brand pattern backgrounds */
    --in-pat-dark:     url('images/BG_PRETO.png');
    --in-pat-yellow:   url('images/BG_AMARELO.png');
    --in-pat-light:    url('images/BG_BRANCO.png');
    --surface-0:#050505;
    --surface-1:#0D0D0D;
    --surface-2:#141414;
    --surface-3:#1B1B1B;    
    --surface-light:#F6F6F6;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body{
    margin:0;
    padding:0;

    font-family:"Manrope","Inter",sans-serif;

    color:var(--in-ink);

    background:#0A0A0A;

    overflow-x:hidden;
}

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:#EDE000;

border-radius:50px;

}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }

/* ===========================
   LAYOUT UTILITIES
   =========================== */

.in-section{

position:relative;

overflow:hidden;

}

.in-section::before{

display:none;

}

.in-page { width: 100%; }

.in-section-inner,
.in-footer-inner{

max-width:1720px;

margin:0 auto;

padding-left:clamp(24px,5vw,80px);

padding-right:clamp(24px,5vw,80px);

width:100%;

}

.in-section{

position:relative;

}

.in-section::after{

content:"";

position:absolute;

left:0;
bottom:0;

width:100%;
height:1px;

background:rgba(255,255,255,.08);

}

.in-section>*{

position:relative;

z-index:2;

}

.in-section  { padding: 96px 0; }
.in-section--sm { padding: 64px 0; }

.in-kicker {
    display: inline-block;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: rgba(245, 232, 74, 0.78);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.in-section-head { max-width: 980px; }

.in-section-head h2{

font-size:
clamp(3.8rem,10vw,8.5rem);

font-weight:900;

line-height:.92;

letter-spacing:-.07em;

}

.in-section-head p {
    margin-top: 14px;
    color: var(--in-muted);
    font-size: 1rem;
    line-height: 1.65;
    max-width: 620px;
}

.in-manifesto {
    padding-top: 110px;
}

.in-manifesto-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: start;
}

.in-manifesto-title {
    margin: 14px 0 0;
    font-size: clamp(2.4rem, 5vw, 4.6rem);
    line-height: 0.96;
    letter-spacing: -0.06em;
    text-transform: uppercase;
}

.in-manifesto-copy {
    max-width: 560px;
    justify-self: end;
}

.in-manifesto-copy p {
    margin: 0 0 14px;
    color: var(--in-muted);
    font-size: 1.02rem;
    line-height: 1.8;
}

.in-manifesto-list {
    display: grid;
    gap: 10px;
    margin-top: 26px;
}

.in-manifesto-list span {
    display: block;
    font-size: clamp(1.2rem, 2.4vw, 1.8rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: var(--in-yellow-light);
}

/* ===========================
   OPTIONS / JOURNEY
   =========================== */
.in-options-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 34px;
}

.in-option-tab {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.42);
    font-size: clamp(1.2rem, 2.8vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
    line-height: 1;
}

.in-option-tab:hover {
    color: rgba(245, 232, 74, 0.8);
}

.in-option-tab.is-active {
    background: transparent;
    border-color: transparent;
    color: var(--in-yellow-light);
}

.in-options-panes {
    margin-top: 20px;
}

.in-option-pane {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    border-top: 1px solid var(--in-line-strong);
    border-radius: 0;
    background: transparent;
    padding: 28px 0 0;
}

.in-option-pane.is-active {
    display: grid;
}

.in-option-main h3 {
    margin: 0;
    font-size: clamp(1.4rem, 2.7vw, 2.2rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.in-option-main p {
    margin: 10px 0 0;
    color: var(--in-muted);
    font-size: 1rem;
    line-height: 1.7;
}

.in-option-pane ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.in-option-pane li {
    padding-left: 20px;
    position: relative;
    color: var(--in-muted);
    font-size: 0.93rem;
    line-height: 1.55;
}

.in-option-pane li::before {
    content: "+";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--in-yellow-light);
    font-weight: 800;
}

.in-section-alt{

position:relative;

background:#171717;

}

.in-section-alt::before{

content:"";

position:absolute;

top:-80px;

left:0;

width:100%;

height:80px;

background:#171717;

clip-path:polygon(0 100%,100% 0,100% 100%);

}

.in-section-dark{

background:#111;

}

.in-section-light{

background:#181818;

}

.in-section-accent{

background:

linear-gradient(
90deg,

#111 0%,

#111 82%,

#EDE000 82%,

#EDE000 100%);

}

/* ===========================
   REVEAL ANIMATIONS
   =========================== */
.reveal {
    opacity: 0;
    transform: translateY(34px) scale(0.985);
    filter: blur(6px);
    transition: opacity 1.45s cubic-bezier(0.22, 1, 0.36, 1), transform 1.45s cubic-bezier(0.22, 1, 0.36, 1), filter 1.45s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.38s;
}
.reveal.is-visible { opacity: 1; transform: none; filter: blur(0); }

/* ===========================
   IMPACT BAND
   =========================== */
.in-impact-band {
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    background: transparent;
    padding: 18px 0;
}

.in-black-field {
    width: 100%;
    background: #000;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.in-black-field-inner {
    height: clamp(120px, 20vw, 260px);
}

/* ===========================
   VISUAL REEL
   =========================== */
.in-visual-reel {
    width: 100%;
    padding: 8px 0 22px;
    overflow: hidden;
}

.in-visual-reel-track {
    display: grid;
    grid-template-columns: repeat(10, minmax(220px, 1fr));
    gap: 8px;
    width: 100%;
}

.in-visual-reel-item {
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.in-visual-reel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: saturate(1.04) contrast(1.02);
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.in-visual-reel-item:hover img {
    transform: scale(1.05);
    opacity: 0.9;
}

.in-impact-track {
    display: flex;
    gap: 60px;
    width: max-content;
    animation: in-impact-run 30s linear infinite;
}

.in-impact-track span {
    font-size: clamp(2rem, 6vw, 5.5rem);
    line-height: 0.92;
    letter-spacing: -0.04em;
    font-weight: 900;
    text-transform: uppercase;
    color: rgba(245, 232, 74, 0.9);
    white-space: nowrap;
    animation: in-impact-word-fade 4.8s ease-in-out infinite;
}

.in-impact-track span:nth-child(2n) {
    animation-delay: 0.8s;
}

.in-impact-track span:nth-child(3n) {
    animation-delay: 1.6s;
}

@keyframes in-impact-word-fade {
    0%, 100% { opacity: 0.45; filter: blur(1.4px); }
    50% { opacity: 1; filter: blur(0); }
}

@keyframes in-impact-run {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ===========================
   HEADER / NAV
   =========================== */
.in-site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 90;
    background: transparent;
    transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.in-site-header.is-scrolled{

background:
rgba(12,12,12,.78);

backdrop-filter:
blur(18px)
saturate(180%);

border-bottom:
1px solid rgba(255,255,255,.06);

}

.in-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 88px;
    padding: 18px clamp(20px, 5vw, 80px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.in-site-header.is-scrolled .in-nav,
.in-site-header.is-open .in-nav {
    min-height: 68px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom-color: rgba(0, 0, 0, 0.07);
}

.in-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(1rem, 1.8vw, 1.32rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--in-yellow-light);
    white-space: nowrap;
    transition: color 0.3s ease;
}

.in-brand-logo {
    display: block;
    width: auto;
    height: clamp(38px, 5vw, 52px);
    object-fit: contain;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4));
    transition: height 0.3s ease;
}

.in-site-header.is-scrolled .in-brand-logo,
.in-site-header.is-open .in-brand-logo {
    height: clamp(32px, 4.5vw, 44px);
}

.in-brand span { font-weight: 400; color: var(--in-ink); }
.in-site-header.is-scrolled .in-brand,
.in-site-header.is-open .in-brand { color: #111; }
.in-site-header.is-scrolled .in-brand span,
.in-site-header.is-open .in-brand span { color: #333; }

.in-nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
}

.in-nav-links a {
    position: relative;
    color: rgba(238, 242, 255, 0.75);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.25s ease;
}

.in-nav-links a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -5px;
    width: 100%; height: 2px;
    background: var(--in-yellow);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.in-nav-links a:hover,
.in-nav-links a.is-active { color: var(--in-ink); }
.in-nav-links a:hover::after,
.in-nav-links a.is-active::after { transform: scaleX(1); }

.in-site-header.is-scrolled .in-nav-links a,
.in-site-header.is-open .in-nav-links a { color: #444; }
.in-site-header.is-scrolled .in-nav-links a:hover,
.in-site-header.is-open .in-nav-links a:hover,
.in-site-header.is-scrolled .in-nav-links a.is-active,
.in-site-header.is-open .in-nav-links a.is-active { color: #111; }
.in-site-header.is-scrolled .in-nav-links a::after,
.in-site-header.is-open .in-nav-links a::after { background: var(--in-yellow); }

.in-nav-cta {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 20px;
    border: 1px solid var(--in-yellow-line);
    border-radius: 999px;
    color: var(--in-yellow-light) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}

.in-nav-cta::after { display: none !important; }
.in-nav-cta:hover { background: var(--in-yellow-dim); border-color: var(--in-yellow); }

.in-site-header.is-scrolled .in-nav-cta,
.in-site-header.is-open .in-nav-cta {
    border-color: #111;
    color: #111 !important;
}
.in-site-header.is-scrolled .in-nav-cta:hover,
.in-site-header.is-open .in-nav-cta:hover {
    background: var(--in-yellow);
    border-color: var(--in-yellow);
    color: #111 !important;
}

.in-header-social {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: 8px;
}

.in-header-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--in-muted);
    transition: color 0.25s;
}

.in-header-social a:hover { color: var(--in-yellow); }
.in-site-header.is-scrolled .in-header-social a { color: #94A3B8; }
.in-site-header.is-scrolled .in-header-social a:hover { color: var(--in-yellow); }

.in-menu-toggle {
    display: none;
    width: 44px; height: 44px;
    border: 0; padding: 0;
    background: transparent;
    cursor: pointer;
}

.in-menu-toggle span {
    display: block;
    width: 22px; height: 2px;
    margin: 5px auto;
    background: var(--in-yellow-light);
    transition: transform 0.22s ease, opacity 0.22s ease;
}

.in-site-header.is-scrolled .in-menu-toggle span,
.in-site-header.is-open .in-menu-toggle span { background: #111; }

.in-site-header.is-open .in-menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.in-site-header.is-open .in-menu-toggle span:nth-child(2) { opacity: 0; }
.in-site-header.is-open .in-menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===========================
   HERO (Centralizado & Minimalista)
   =========================== */
.in-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza a estrutura horizontalmente */
    min-height: 100vh;
    overflow: hidden;
}

.in-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* VIDEO HERO */
.in-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    filter: brightness(0.70) saturate(1.1);
}

.in-hero-bg-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, /* Gradiente centralizado para casar com o layout */
    rgba(237,224,0,.12),
    transparent 60%),
    linear-gradient(
    120deg,
    rgba(0,0,0,.92),
    rgba(0,0,0,.65),
    rgba(0,0,0,.92));
    backdrop-filter: blur(2px);
    animation: in-fade-pulse 7s ease-in-out infinite;
}

@keyframes in-fade-pulse {
    0%, 100% { opacity: 0.88; }
    50% { opacity: 1; }
}

.in-hero-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1720px;
    margin: 0 auto;
    padding: 130px clamp(20px, 5vw, 80px) 90px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Alinha o conteúdo interno no centro */
    text-align: center; /* Centraliza as quebras de linha do título */
}

.in-hero-copy { 
    max-width: 1100px; /* Aumentado para dar espaço ao nome em telas grandes */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.in-hero-title {
    margin: 16px 0 0;
    font-size: clamp(4.4rem, 12vw, 11rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.96;
}

.in-hero-dot { color: var(--in-yellow); }

/* Remove visualmente as linhas secundárias e o texto de apoio */
.in-hero-lines,
.in-hero-lead {
    display: none !important;
}

.in-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centraliza os botões de Portfólio e Orçamento */
    gap: 24px; /* Espaçamento sutil extra entre os dois links */
    margin-top: 48px;
}

.in-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: color 0.22s ease, transform 0.22s ease;
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-thickness: 1px;
}

.in-btn-primary {
    background: transparent;
    color: var(--in-yellow-light);
}

.in-btn-primary:hover {
    transform: translateY(-2px);
    color: var(--in-yellow);
}

.in-btn-outline {
    background: transparent;
    color: rgba(255,255,255,0.72);
}

.in-btn-outline:hover {
    background: transparent;
    transform: translateY(-2px);
    color: var(--in-ink);
}

.in-hero-scroll {
    position: absolute;
    bottom: 38px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: rgba(255,255,255,0.4);
    font-size: 1.7rem;
    animation: in-bob 2.6s ease-in-out infinite;
}

@keyframes in-bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(10px); }
}

/* ===========================
   STATS BAR
   =========================== */
.in-stats {
    background: linear-gradient(180deg, #F1E91A 0%, #EDE000 100%);
    color: #111;
}

.in-stats .in-stat-item {
    border-right-color: rgba(0, 0, 0, 0.12);
}

.in-stats .in-stat-number {
    color: #0A0A0A !important;
}

.in-stats .in-stat-label {
    color: #3A3A3A !important;
}

.in-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.in-stat-item {
    padding: 40px 24px;
    text-align: center;
    border-right: 1px solid var(--in-yellow-line);
}

.in-stat-item:last-child { border-right: none; }

.in-stat-number {
    display: block;
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--in-yellow-light);
    line-height: 1;
}

.in-stat-label {
    display: block;
    margin-top: 8px;
    color: var(--in-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ===========================
   ABOUT
   =========================== */
.in-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
    margin-top: 36px;
}

.in-about-card {
    border: 1px solid var(--in-line);
    border-radius: var(--in-radius-lg);
    background: rgba(255, 255, 255, 0.03);
    padding: 36px;
}

.in-about-card h3 {
    margin: 0 0 6px;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.in-about-card .in-kicker { margin-bottom: 18px; }

.in-about-card p {
    margin: 0 0 14px;
    color: var(--in-muted);
    font-size: 0.97rem;
    line-height: 1.82;
}

.in-about-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 24px;
}

.in-fact-card {
    padding: 16px 18px;
    border: 1px solid var(--in-line);
    border-radius: var(--in-radius-sm);
    background: rgba(255,255,255,0.025);
}

.in-fact-card span {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--in-muted);
    margin-bottom: 6px;
}

.in-fact-card strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--in-ink);
}

.in-timeline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.in-timeline-item {
    padding: 22px;
    border: 1px solid var(--in-line);
    border-radius: var(--in-radius-sm);
    background: rgba(255, 255, 255, 0.02);
    transition: border-color 0.25s ease;
}

.in-timeline-item:hover { border-color: var(--in-yellow-line); }

.in-timeline-item h3 {
    margin: 0 0 8px;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--in-yellow-light);
    letter-spacing: -0.03em;
}

.in-timeline-item p {
    margin: 0;
    color: var(--in-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ===========================
   SERVICES GRID
   =========================== */
.in-services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 52px;
}

.in-service-card{
padding:34px 0;
background:transparent;
backdrop-filter:none;
border:0;
border-top:1px solid rgba(255,255,255,.11);
border-radius:0;

transition:
all .35s cubic-bezier(.2,.7,.2,1);

}

.in-service-card:last-child {
    border-bottom: 1px solid rgba(255,255,255,.11);
}

.in-service-index {
    display: block;
    color: rgba(255,255,255,0.2);
    font-size: clamp(2.1rem, 4vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 8px;
}

.in-service-tag {
    display: block;
    margin-bottom: 10px;
    color: rgba(245, 232, 74, 0.82);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.in-service-card:hover{

transform:
translateX(8px);

border-color:
rgba(237,224,0,.35);

}

.in-service-icon {
    font-size: 2.2rem;
    margin-bottom: 16px;
    display: block;
}

.in-service-card h3 {
    margin: 0 0 10px;
    font-size: clamp(1.4rem, 2.3vw, 2.1rem);
    font-weight: 800;
    color: var(--in-ink);
    letter-spacing: -0.03em;
}

.in-service-card p {
    margin: 0;
    color: var(--in-muted);
    font-size: 0.96rem;
    line-height: 1.62;
    max-width: 640px;
}

.in-service-card::before{
display:none;
}

.in-service-card:hover::before{

opacity:1;

}

.in-stat-number{

transition:.4s;

}

.in-stat-item:hover .in-stat-number{

transform:scale(1.08);

}

/* ===========================
   HIGHLIGHT / WHY
   =========================== */
.in-why-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: start;
}

.in-why-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.in-why-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.in-why-item-icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: var(--in-radius-sm);
    border: 1px solid var(--in-yellow-line);
    background: var(--in-yellow-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.in-why-item-body strong {
    display: block;
    font-size: 0.97rem;
    font-weight: 800;
    margin-bottom: 4px;
    color: var(--in-ink);
}

.in-why-item-body p {
    margin: 0;
    color: var(--in-muted);
    font-size: 0.88rem;
    line-height: 1.62;
}

.in-highlight-card{

background:
linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
var(--in-surface);

}

.in-highlight-card h3 {
    margin: 0 0 18px;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--in-yellow-light);
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.in-highlight-card ul {
    margin: 0; padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.in-highlight-card ul li {
    padding-left: 22px;
    position: relative;
    color: var(--in-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.in-highlight-card ul li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--in-yellow);
    font-weight: 700;
}

/* ===========================
   SHOWCASE
   =========================== */
.in-showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 44px;
}

.in-showcase-card {
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
}

.in-showcase-media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #111;
    animation: in-fade-soft 5.4s ease-in-out infinite;
}

@keyframes in-fade-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.9; }
}

.in-showcase-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.in-showcase-card:hover .in-showcase-media img {
    transform: scale(1.04);
}

.in-showcase-body {
    padding: 12px 4px 8px;
}

.in-showcase-body span {
    display: block;
    color: var(--in-yellow-light);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.in-showcase-body p {
    margin: 6px 0 0;
    color: var(--in-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* ===========================
   RECENTS / INSTAGRAM
   =========================== */
.in-recents-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr;
    gap: 24px;
    margin-top: 44px;
}

.in-recent-card {
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
}

.in-recent-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #111;
}

.in-recent-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease;
}

.in-recent-card:hover .in-recent-thumb img {
    opacity: 0.82;
}

.in-recent-thumb span {
    position: absolute;
    left: 14px;
    top: 14px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.65);
    color: var(--in-yellow-light);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.in-recent-body {
    padding: 14px 2px 0;
}

.in-recent-body em {
    display: block;
    color: var(--in-muted);
    font-size: 0.72rem;
    font-style: normal;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.in-recent-body h3 {
    margin: 8px 0 0;
    font-size: 1.08rem;
    line-height: 1.28;
    letter-spacing: -0.02em;
}

.in-recent-body p {
    margin: 8px 0 0;
    color: var(--in-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.in-recents-empty {
    padding: 24px;
    border: 1px dashed var(--in-line-strong);
    border-radius: 22px;
    color: var(--in-muted);
}

/* ===========================
   TRUST / COMPANIES
   =========================== */
.in-trust-marquee {
    overflow: hidden;
    margin-top: 44px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
}

.in-trust-track {
    display: flex;
    width: max-content;
    gap: 18px;
    padding: 20px 0;
    animation: in-trust-move 34s linear infinite;
}

.in-trust-card {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    min-width: 320px;
    min-height: 220px;
    padding: 16px 18px;
    border-radius: 0;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.22);
    box-shadow: none;
    position: relative;
    overflow: hidden;
}

.in-trust-media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.4;
    transform: scale(1.01);
    transition: transform 0.6s ease, opacity 0.6s ease;
}

.in-trust-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.74));
}

.in-trust-card:hover .in-trust-media {
    transform: scale(1.06);
    opacity: 0.55;
}

.in-trust-initials {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, #EDE000, #F5E84A);
    color: #111;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.in-trust-body strong {
    position: relative;
    z-index: 2;
    display: block;
    font-size: 0.95rem;
    line-height: 1.2;
}

.in-trust-body em {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 4px;
    color: var(--in-yellow-light);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.in-trust-body p {
    position: relative;
    z-index: 2;
    margin: 8px 0 0;
    color: var(--in-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

@keyframes in-trust-move {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ===========================
   METHODOLOGY / STEPS
   =========================== */
.in-method-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 52px;
}

.in-method-card {
    padding: 40px 28px;
    border: 1px solid var(--in-line);
    border-radius: var(--in-radius-md);
    background: rgba(255, 255, 255, 0.025);
    position: relative;
    overflow: hidden;
    transition: border-color 0.28s ease;
}

.in-method-card:hover { border-color: var(--in-yellow-line); }

.in-method-number {
    display: block;
    font-size: 4rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: rgba(237, 224, 0, 0.2);
    line-height: 1;
    margin-bottom: 12px;
}

.in-method-card h3 {
    margin: 0 0 12px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--in-ink);
}

.in-method-card p {
    margin: 0;
    color: var(--in-muted);
    font-size: 0.9rem;
    line-height: 1.7;
}

/* ===========================
   CLIENTS MARQUEE
   =========================== */
.in-clients-bar{

    margin:120px 0;

}

.in-clients-title{

    text-align:center;

    font-size:15px;

    text-transform:uppercase;

    letter-spacing:4px;

    color:#777;

    margin-bottom:40px;

}

.in-clients-marquee{

    position:relative;

    overflow:hidden;

    border-top:1px solid #2c2c2c;

    border-bottom:1px solid #2c2c2c;

    background:#111;

    padding:22px 0;

}

.in-clients-marquee-track{

    display:flex;

    width:max-content;

    animation:clientsMove 35s linear infinite;

}

.in-clients-marquee-track span{

    flex:none;

    margin-right:80px;

    font-size:22px;

    font-weight:700;

    color:white;

    white-space:nowrap;

    opacity:.9;

}

@keyframes clientsMove{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

/* ===========================
   QUOTE
   =========================== */
.in-quote-section{

    padding:90px 0;

    background:linear-gradient(135deg, #EDE000 0%, #DCCF00 100%);

}

.in-quote-bar{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.in-quote-bar h2{

    color:#111;

    font-size:clamp(2.4rem,5vw,4rem);

    line-height:1.02;

    margin:18px 0 0;

    letter-spacing:-2px;

}

.in-quote-right p{

    color:#222;

    font-size:1.1rem;

    line-height:1.9;

    margin-bottom:32px;

    max-width:520px;

}

.in-quote-section .in-kicker{

    border-color:rgba(0,0,0,.18);

    color:#111;

    background:rgba(255,255,255,.3);

}

.in-quote-section .in-btn-primary{

    background:#111;

    color:#fff;

}

/* ===========================
   INSTAGRAM / CONTENT GRID
   =========================== */
.in-insta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 52px;
}

.in-insta-card {
    background: var(--in-surface);
    border: 1px solid var(--in-line);
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.in-insta-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(237, 224, 0, 0.15);
}

.in-insta-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.in-insta-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--in-bg);
}

.in-insta-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.in-insta-card:hover .in-insta-thumb img { transform: scale(1.05); }

.in-insta-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), var(--in-surface);
    border-bottom: 1px solid var(--in-line);
}

.in-insta-placeholder span {
    color: var(--in-yellow-light);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    opacity: 0.7;
}

.in-insta-kind {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 3px 10px;
    background: var(--in-yellow);
    color: #111;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 4px;
}

.in-insta-body {
    padding: 22px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.in-insta-date {
    font-size: 0.73rem;
    color: var(--in-muted);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.in-insta-body h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--in-ink);
    line-height: 1.4;
}

.in-insta-body p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--in-muted);
    line-height: 1.6;
    flex: 1;
}

.in-insta-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--in-yellow);
    letter-spacing: 0.04em;
    transition: color 0.2s;
}

.in-insta-card:hover .in-insta-link { color: var(--in-yellow-light); }


/* ===========================
   CONTACT
   =========================== */
.in-contact-center {
    text-align: left;
    max-width: 920px;
    margin: 0;
}

.in-contact-center h2 {
    margin: 14px 0 0;
    font-size: clamp(2rem, 3.8vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.in-contact-center p {
    margin-top: 14px;
    color: var(--in-muted);
    font-size: 1.05rem;
    line-height: 1.78;
}

.in-contact-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 14px;
    margin-top: 36px;
}

.in-contact-info {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 22px;
}

.in-contact-info a {
    color: var(--in-muted);
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.25s;
}

.in-contact-info a:hover { color: var(--in-yellow-light); }

/* ===========================
   FOOTER
   =========================== */
.in-site-footer {
    border-top: 1px solid var(--in-line);
    background: var(--in-surface);
    padding: 40px 0;
}

.in-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 0;
    padding-bottom: 0;
}

.in-footer-brand {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--in-yellow-light);
}

.in-footer-copy {
    margin: 0;
    color: var(--in-muted);
    font-size: 0.82rem;
    text-align: center;
    line-height: 1.6;
}

.in-footer-copy a {
    color: var(--in-yellow);
    font-weight: 600;
    transition: color 0.2s;
}

.in-footer-copy a:hover { color: var(--in-yellow-light); }

.in-about-card{

background:

rgba(255,255,255,.03);

backdrop-filter:
blur(10px);

}

.in-client-badge{

transition:
all .3s;

}

.in-client-badge:hover{

background:#EDE000;

color:#111;

transform:translateY(-3px);

}

/* ===========================
   WHATSAPP FLOAT
   =========================== */
.in-whatsapp-float{

position:fixed;

bottom:30px;

right:30px;

width:62px;

height:62px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#25D366;

color:#fff;

z-index:999;

box-shadow:
0 16px 40px rgba(37,211,102,.35);

transition:.3s;

}

.in-whatsapp-float svg{

width:30px;

height:30px;

display:block;

fill:currentColor;

}

.in-whatsapp-float i{

font-size:30px;

line-height:1;

}

.in-whatsapp-float:hover{

transform:translateY(-4px) scale(1.05);

}

/* ===========================
   MOBILE
   =========================== */
@media (max-width: 900px) {
    .in-menu-toggle { display: flex; flex-direction: column; justify-content: center; }

    .in-nav-links {
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 12px clamp(20px, 5vw, 80px) 24px;
        background: rgba(10, 10, 10, 0.98);
        backdrop-filter: blur(18px);
        display: none;
    }

    .in-site-header.is-open .in-nav-links { display: flex; }

    .in-nav-links a {
        width: 100%;
        padding: 14px 0;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        color: var(--in-ink);
        font-size: 0.82rem;
    }

    .in-nav-links a:last-child { border-bottom: 0; }
    .in-header-social { display: none; }
    .in-about-grid { grid-template-columns: 1fr; }
    .in-manifesto-grid { grid-template-columns: 1fr; }
    .in-manifesto-copy { justify-self: start; max-width: 100%; }
    .in-option-pane { grid-template-columns: 1fr; }
    .in-showcase-grid { grid-template-columns: 1fr; }
    .in-why-grid   { grid-template-columns: 1fr; }
    .in-services-grid { grid-template-columns: 1fr; }
    .in-method-grid   { grid-template-columns: 1fr 1fr; }
    .in-stats-grid    { grid-template-columns: repeat(2, 1fr); }
    .in-insta-grid    { grid-template-columns: 1fr 1fr; }
    .in-timeline      { grid-template-columns: 1fr; }
    .in-recents-grid  { grid-template-columns: 1fr; }
    .in-impact-track span { font-size: clamp(1.8rem, 10vw, 3.4rem); }
    .in-visual-reel-track { grid-template-columns: repeat(5, minmax(180px, 1fr)); }
}

@media (max-width: 580px) {
    .in-services-grid { grid-template-columns: 1fr; }
    .in-method-grid   { grid-template-columns: 1fr; }
    .in-stats-grid    { grid-template-columns: 1fr 1fr; }
    .in-insta-grid    { grid-template-columns: 1fr; }
    .in-about-facts   { grid-template-columns: 1fr; }
    .in-hero-title    { font-size: clamp(2.8rem, 10vw, 4rem); }
    .in-trust-card    { min-width: 280px; }
    .in-option-pane   { padding: 22px; }
}

/* ===========================
   PHILOSOPHY / TRIAD SECTION
   =========================== */
.in-philosophy-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1100px;
    margin: 60px auto;
    padding: 0 20px;
}

/* O Segredo do efeito: quando o mouse entra no container pai, 
   todos os itens reduzem a opacidade e encolhem levemente por padrão */
.in-philosophy-container:hover .in-philosophy-item {
    opacity: 0.35;
    transform: scale(0.96);
    filter: blur(1px);
}

/* O item específico que está com o mouse em cima expande e ganha opacidade total */
.in-philosophy-container .in-philosophy-item:hover {
    opacity: 1;
    transform: scale(1.04);
    filter: blur(0);
}

/* Estrutura base de cada um dos 3 blocos */
.in-philosophy-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 40px;
    border-radius: 6px;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Transição suave e responsiva */
    cursor: pointer;
}

/* Destaque para as palavras-chave principais */
.in-philosophy-keyword {
    margin: 0 0 12px 0;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    color: var(--in-ink);
    line-height: 1;
    transition: color 0.3s ease;
}

/* Quando passa o mouse no bloco, a palavra-chave acende no amarelo do tema */
.in-philosophy-item:hover .in-philosophy-keyword {
    color: var(--in-yellow);
}

/* Texto descritivo interno */
.in-philosophy-text {
    margin: 0;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    color: var(--in-muted);
    line-height: 1.6;
    max-width: 800px;
}

/* Comportamento no Mobile: desativa o efeito de escala para evitar bugs de touch */
@media (max-width: 768px) {
    .in-philosophy-container:hover .in-philosophy-item,
    .in-philosophy-container .in-philosophy-item:hover {
        opacity: 1;
        transform: none;
        filter: none;
    }
    
    .in-philosophy-item {
        padding: 24px;
    }
}