/* ============================================================================
TERRANOVA - Folha de estilos
Paleta oficial (Guia de Identidade Visual 2025). Para usar a paleta
alternativa do briefing, troque --navy por #0D1B3E e --accent por #21C1E0.
========================================================================== */
:root {
--navy: #050658; /* Azul Marinho TerraNova - dominante */
--navy-2: #0D078C; /* Azul Escuro TerraNova */
--blue: #0019D1; /* Azul TerraNova */
--accent: #2681FF; /* Azul Claro TerraNova - CTAs, dados, pins */
--ink: #3A3D7A;
--gray: #6B6E9E;
--line: #DCDFEA;
--bg: #FFFFFF;
--bg-alt: #F3F4F8;
--radius: 0;
--radius-lg: 0;
--shadow: none;
--font: "Segoe UI", system-ui, Roboto, Arial, sans-serif;
--container: 1200px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font);
color: var(--ink);
background: var(--bg);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
ul { list-style: none; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
/* ---------- Acessibilidade ---------- */
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 200;
background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
html { scroll-behavior: auto; }
}
/* ---------- Tipografia ---------- */
h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; color: var(--navy); }
h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); letter-spacing: -0.02em; font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); letter-spacing: -0.015em; max-width: 26ch; }
h3 { font-size: 1.15rem; }
.kicker {
text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem;
font-weight: 600; color: var(--accent); margin-bottom: 12px;
}
.kicker-light { color: var(--accent); }
.lead { font-size: 1.12rem; color: var(--gray); max-width: 68ch; margin: 16px 0 0; }
.lead-light { color: #C9CDF2; }
.fine-print { font-size: 0.8rem; color: var(--gray); margin-top: 20px; }
/* ---------- Botões ---------- */
.btn {
display: inline-block; border: 1px solid transparent; border-radius: 14px;
font: 600 0.95rem var(--font); padding: 12px 26px; cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
text-align: center;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: var(--navy); }
.btn-primary:hover { background: var(--blue); color: #fff; }
.btn-navy { background: var(--navy); color: #fff; margin-top: 28px; }
.btn-navy:hover { background: var(--navy-2); }
.btn-outline-light { border-color: rgba(255,255,255,0.5); color: #fff; }
.btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.btn-ghost { color: var(--navy); border-color: var(--line); background: transparent; }
.btn-ghost:hover { border-color: var(--navy); }
.btn-sm { padding: 8px 16px; font-size: 0.85rem; }
.btn-lg { padding: 15px 34px; font-size: 1rem; }
.text-link { font-weight: 600; color: var(--blue); display: inline-block; margin-top: 12px; }
.text-link::after { content: " →"; transition: margin-left 0.2s; }
.text-link:hover::after { margin-left: 4px; }
/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 3px; color: var(--navy); }
.logo-mark { display: inline-flex; align-items: baseline; gap: 3px; }
.logo-img { height: 26px; width: auto; display: block; }
.site-footer .logo-img { height: 30px; }
.logo-word { font: 700 1.3rem var(--font); letter-spacing: 0.3em; }
/* Símbolo (arco) substitui o "A" final: azul institucional sobre fundo claro */
.logo-symbol { width: 1.24em; height: 1.24em; fill: var(--navy-2); transform: translateY(0.12em); }
.logo-light { color: #fff; }
.logo-light .logo-symbol { fill: #fff; } /* footer/áreas escuras: logo todo branco */
/* ---------- Header ---------- */
.site-header {
position: sticky; top: 0; z-index: 100;
background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 28px; height: 72px; }
.main-nav { margin-left: 24px; } /* menu junto ao logo (à esquerda) */
.header-actions { margin-left: auto; } /* idiomas + CTA empurrados p/ a direita */
.main-nav > ul { display: flex; gap: 4px; flex-wrap: nowrap; }
.main-nav a { white-space: nowrap; }
.main-nav a {
display: block; padding: 10px 12px; color: var(--ink);
font-size: 0.92rem; font-weight: 500; border-radius: 8px;
}
.main-nav a:hover { color: var(--blue); background: var(--bg-alt); }
.has-sub { position: relative; }
.submenu {
position: absolute; top: 100%; left: 0; min-width: 300px;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 8px;
opacity: 0; visibility: hidden; transform: translateY(6px);
transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.has-sub:hover .submenu, .has-sub:focus-within .submenu {
opacity: 1; visibility: visible; transform: translateY(0);
}
.submenu a { font-weight: 400; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.lang-switch { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.lang-switch button {
border: 0; background: transparent; font: 600 0.75rem var(--font);
padding: 6px 9px; cursor: pointer; color: var(--gray);
}
.lang-switch button.active { background: var(--navy); color: #fff; }
.nav-toggle { display: none; border: 0; background: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--navy); margin: 5px 0; transition: 0.2s; }
/* ---------- Hero ---------- */
.hero {
position: relative; overflow: hidden; color: #fff;
background: linear-gradient(150deg, var(--navy) 55%, var(--navy-2) 100%);
}
.hero-bg { position: absolute; inset: 0; }
.hero-grid { width: 100%; height: 100%; }
.hero-glow {
position: absolute; right: -10%; top: -30%; width: 60%; height: 120%;
background: radial-gradient(closest-side, rgba(38,129,255,0.22), transparent 70%);
}
/* Ondas de degradê azul animadas (movimento tipo bandeira) - intensidade média-alta */
.hero-wave {
position: absolute; inset: -25%;
background: linear-gradient(115deg,
rgba(38,129,255,0) 12%, rgba(38,129,255,0.42) 34%,
rgba(13,7,140,0) 52%, rgba(38,129,255,0.34) 70%, rgba(38,129,255,0) 88%);
background-size: 230% 230%;
animation: hero-wave 13s ease-in-out infinite;
}
.hero-wave-2 {
background: radial-gradient(48% 58% at 68% 42%, rgba(0,25,209,0.55), rgba(0,25,209,0) 70%);
background-size: 190% 190%;
animation: hero-wave-2 18s ease-in-out infinite;
opacity: 1;
}
@keyframes hero-wave {
0% { background-position: 0% 50%; }
50% { background-position: 100% 42%; }
100% { background-position: 0% 50%; }
}
@keyframes hero-wave-2 {
0% { background-position: 18% 28%; }
50% { background-position: 82% 72%; }
100% { background-position: 18% 28%; }
}
/* Fibras: curvas com "pacotes" de luz correndo (dados na fibra óptica) */
.hero-fibers { position: absolute; inset: 0; width: 100%; height: 100%; }
.fiber { fill: none; stroke: rgba(38,129,255,0.18); stroke-width: 1.4; }
.fiber-b { stroke: rgba(38,129,255,0.14); }
.fiber-c { stroke: rgba(38,129,255,0.12); }
/* Feixe que engrossa e afina, correndo pela fibra */
.streak { fill: url(#streakGrad); }
/* Símbolo oficial no hero (estático, sem animação) */
.hero-logo {
position: absolute; right: 7%; top: 50%; transform: translateY(-50%);
height: 60%; max-height: 360px; width: auto; opacity: 0.95; pointer-events: none;
}
@media (max-width: 900px) { .hero-logo { right: 2%; height: 42%; opacity: 0.55; } }
@media (max-width: 620px) { .hero-logo { right: -4%; top: 16%; height: 130px; opacity: 0.28; transform: none; } }
.pulse-line { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 6s ease-out infinite; }
.pulse-line-2 { animation-delay: 1.6s; }
@keyframes draw { 0% { stroke-dashoffset: 1400; } 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
.hero-content { position: relative; padding: 128px 24px 136px; max-width: var(--container); }
.hero-kicker {
text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8rem;
color: var(--accent); font-weight: 600; margin-bottom: 20px;
}
.hero h1 { color: #fff; max-width: 17ch; }
.hero-sub { font-size: 1.15rem; color: #C9CDF2; max-width: 58ch; margin: 22px 0 36px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
/* ---------- Métricas ---------- */
.metrics { background: var(--bg); border-bottom: 1px solid var(--line); }
.metrics-grid {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
padding: 44px 0; text-align: center;
}
.metrics-grid-4 { grid-template-columns: repeat(4, 1fr); }
.metrics-grid-3 { grid-template-columns: repeat(3, 1fr); }
.metric-value {
font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; color: var(--navy);
display: block; line-height: 1.2;
}
.metric-value .ph { /* placeholder {{...}} ainda não preenchido */
font-size: 0.9rem; color: var(--accent); background: rgba(38,129,255,0.08);
border: 1px dashed var(--accent); border-radius: 6px; padding: 3px 8px;
letter-spacing: 0.02em; white-space: nowrap;
}
.metric-label { font-size: 0.85rem; color: var(--gray); display: block; margin-top: 6px; }
/* ---------- Seções e cards ---------- */
.section { padding: 104px 0; }
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--navy); color: #fff; }
.section-dark h2 { color: #fff; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cards-grid { display: grid; gap: 20px; margin-top: 48px; }
.cards-5 { grid-template-columns: repeat(5, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.card-cta { display: flex; flex-direction: column; align-items: flex-start; }
.card-cta .btn { margin-top: auto; }
.card-cta p { margin-bottom: 22px; }
.investor-card h3 { color: var(--blue); }
.investor-logo { height: 34px; width: auto; max-width: 200px; margin-bottom: 16px; object-fit: contain; }
.card {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
padding: 28px 24px; transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: transparent; }
.card h3 { margin-bottom: 10px; }
.card p { font-size: 0.92rem; color: var(--gray); }
.card-icon {
width: 44px; height: 44px; border-radius: 10px; margin-bottom: 18px;
background: rgba(38,129,255,0.1); color: var(--blue);
display: grid; place-items: center;
}
.card-icon svg { width: 22px; height: 22px; fill: currentColor; }
.check-list { margin: 24px 0 8px; }
.check-list li { padding-left: 30px; position: relative; margin-bottom: 12px; color: var(--ink); }
.check-list li::before {
content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 16px;
border-radius: 50%; background: var(--accent);
clip-path: none;
}
.check-list li::after {
content: ""; position: absolute; left: 4px; top: 11.5px; width: 8px; height: 4px;
border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
/* ---------- Split (texto + visual) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
/* ---------- Speed-to-Power ---------- */
.stp-chart {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
padding: 36px 32px; box-shadow: var(--shadow);
}
.stp-chart-title { font-size: 0.95rem; color: var(--gray); font-weight: 600; margin-bottom: 26px; }
.stp-row { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; margin-bottom: 20px; }
.stp-label { font-size: 0.9rem; color: var(--ink); }
.stp-track { background: var(--bg-alt); border-radius: 999px; height: 34px; overflow: hidden; }
.stp-bar {
height: 100%; width: 0; border-radius: 999px;
display: flex; align-items: center; justify-content: flex-end; padding-right: 14px;
color: #fff; font-weight: 700; font-size: 0.85rem;
transition: width 1.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.visible .stp-bar { width: var(--w); }
.stp-bar-tn { background: linear-gradient(90deg, var(--blue), var(--accent)); }
.stp-bar-mkt { background: #9CA3AF; }
.stp-scale {
display: flex; justify-content: space-between; margin: 4px 0 0 164px;
font-size: 0.72rem; color: var(--gray);
}
.stp-note { font-size: 0.8rem; color: var(--gray); margin-top: 18px; }
/* ---------- Grid de Diferenciais (estilo Omnia, marca TERRANOVA) ---------- */
.diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.diff-card {
display: flex; gap: 16px; align-items: flex-start; padding: 24px;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
.diff-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: transparent; }
.diff-ic {
flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
background: rgba(38,129,255,0.1); color: var(--blue); display: grid; place-items: center;
}
.diff-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; }
.diff-card h3 { font-size: 1rem; margin-bottom: 4px; }
.diff-card p { font-size: 0.86rem; color: var(--gray); }
/* ---------- "Por que a TERRANOVA" (banda escura) ---------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; }
.why-item { border-top: 2px solid var(--accent); padding-top: 18px; }
.why-item h3 { color: #fff; font-size: 1.1rem; }
.why-item p { color: #C9CDF2; font-size: 0.92rem; margin-top: 8px; }
/* ---------- Newsletter ---------- */
.newsletter-inner { display: flex; justify-content: space-between; align-items: center; gap: 36px; flex-wrap: wrap; }
.newsletter-text h2 { color: #fff; }
.newsletter-text p { color: #C9CDF2; margin-top: 8px; max-width: 46ch; }
.newsletter-form { display: flex; gap: 10px; flex: 1 1 360px; max-width: 540px; flex-wrap: wrap; }
.newsletter-form input {
flex: 1 1 220px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.08);
color: #fff; border-radius: 12px; padding: 14px 16px; font: 400 0.95rem var(--font);
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.6); }
.newsletter-feedback { flex-basis: 100%; font-size: 0.85rem; font-weight: 600; color: #AFCBFF; margin-top: 4px; min-height: 1em; }
/* ---------- Cartão de Energia ---------- */
.energy-card {
background: linear-gradient(150deg, var(--navy), var(--navy-2)); color: #fff;
border-radius: var(--radius); padding: 40px 36px; box-shadow: var(--shadow);
}
.energy-badge {
width: 52px; height: 52px; border-radius: 12px; margin-bottom: 22px;
background: rgba(38,129,255,0.2); color: var(--accent); display: grid; place-items: center;
}
.energy-badge svg { width: 26px; height: 26px; }
.energy-card h3 { color: #fff; margin-bottom: 10px; }
.energy-card p { color: #C9CDF2; font-size: 0.98rem; }
.energy-note { font-size: 0.82rem; color: rgba(255,255,255,0.55); margin-top: 18px; border-top: 1px solid rgba(255,255,255,0.14); padding-top: 16px; }
/* ---------- Campi / Presença (cards em seção escura) ---------- */
.sites-grid { margin-top: 44px; }
.site-card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); display: flex; flex-direction: column; }
.site-card:hover { border-color: transparent; box-shadow: 0 8px 28px rgba(0,0,0,0.25); }
.site-head { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.site-headtxt { flex: 1 1 auto; min-width: 0; }
.flag { flex: 0 0 auto; width: 36px; height: 26px; border-radius: 5px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.flag svg { width: 100%; height: 100%; display: block; }
.site-card .site-country { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.site-card .site-status { flex: 0 0 auto; align-self: flex-start; font-size: 0.72rem; font-weight: 600; border-radius: 999px; padding: 3px 12px; background: rgba(38,129,255,0.18); color: #AFCBFF; white-space: nowrap; }
.site-card h3 { color: #fff; font-size: 1.3rem; margin: 1px 0 0; }
.site-cap { font-size: 1.6rem; font-weight: 700; color: var(--accent); margin: 4px 0 10px; }
.site-sol { color: rgba(255,255,255,0.92); font-weight: 600; font-size: 0.9rem; margin-bottom: 10px; }
.site-card p { color: #C9CDF2; font-size: 0.88rem; }
.map-placeholder-sm { min-height: 120px; margin-top: 26px; }
/* ---------- Mapa LATAM ---------- */
/* Bloco reservado para o mapa (inserir depois) */
.map-placeholder {
margin-top: 48px; border: 1.5px dashed rgba(255,255,255,0.28); border-radius: var(--radius-lg);
background: rgba(255,255,255,0.04); min-height: 300px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
text-align: center; padding: 48px 24px;
}
.map-placeholder-ic { width: 56px; height: 56px; color: var(--accent); }
.map-placeholder-ic svg { width: 100%; height: 100%; }
.map-placeholder p { color: rgba(255,255,255,0.65); font-size: 0.95rem; }
.map-wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; margin-top: 48px; align-items: stretch; }
.map-canvas { position: relative; }
#latam-map { width: 100%; height: auto; max-height: 640px; display: block; }
.map-land path { fill: rgba(255, 255, 255, 0.07); stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; }
.map-disclaimer { font-size: 0.72rem; color: rgba(255,255,255,0.45); margin-top: 4px; }
.map-pin { cursor: pointer; }
.map-pin circle.ring {
fill: none; stroke-width: 2; opacity: 0.55;
transform-origin: center; transform-box: fill-box;
animation: ping 2.6s ease-out infinite;
}
@keyframes ping { 0% { transform: scale(0.6); opacity: 0.7; } 80% { transform: scale(2.1); opacity: 0; } 100% { opacity: 0; } }
.map-pin circle.core { stroke: #fff; stroke-width: 1.5; transition: r 0.15s; }
.map-pin:hover circle.core, .map-pin.active circle.core { r: 9; }
.map-pin text {
fill: rgba(255,255,255,0.85); font: 600 11px var(--font);
paint-order: stroke; stroke: var(--navy); stroke-width: 3px; stroke-linejoin: round;
}
.map-pin[data-status="operacional"] circle { fill: var(--accent); stroke-color: var(--accent); }
.map-pin[data-status="operacional"] circle.ring { stroke: var(--accent); fill: none; }
.map-pin[data-status="foco"] circle.core { fill: var(--accent); }
.map-pin[data-status="foco"] circle.ring { stroke: var(--accent); fill: none; }
.map-pin[data-status="desenvolvimento"] circle.core { fill: #7DA9FF; }
.map-pin[data-status="desenvolvimento"] circle.ring { stroke: #7DA9FF; fill: none; }
.map-pin[data-status="landbank"] circle.core { fill: #fff; }
.map-pin[data-status="landbank"] circle.ring { stroke: #fff; fill: none; }
.map-panel {
background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius); padding: 30px; display: flex; flex-direction: column;
}
.map-legend { margin-bottom: 22px; }
.map-legend li { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 0.9rem; color: #C9CDF2; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot-op { background: var(--accent); }
.dot-dev { background: #7DA9FF; }
.dot-lb { background: #fff; }
.map-panel-empty p { color: rgba(255,255,255,0.6); font-size: 0.9rem; }
.map-panel-detail h3 { color: #fff; font-size: 1.4rem; }
.map-panel-detail .site-country {
display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.site-status {
display: inline-block; font-size: 0.75rem; font-weight: 600; border-radius: 999px;
padding: 3px 12px; margin: 10px 0 18px; background: rgba(38,129,255,0.18); color: #AFCBFF;
}
.site-facts { border-top: 1px solid rgba(255,255,255,0.12); }
.site-facts div { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
.site-facts dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); }
.site-facts dd { font-size: 0.92rem; color: rgba(255,255,255,0.9); margin-top: 2px; }
.site-facts .ph {
color: var(--accent); border: 1px dashed var(--accent); border-radius: 6px;
padding: 1px 8px; font-size: 0.8rem; background: rgba(38,129,255,0.08);
}
.map-panel-detail .btn { margin-top: 22px; align-self: flex-start; }
/* ---------- Liderança ---------- */
.leader-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.leader-card {
border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
padding: 0 0 22px; text-align: center; cursor: pointer;
transition: box-shadow 0.25s, transform 0.25s; font: inherit;
}
.leader-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.leader-photo {
width: 100%; aspect-ratio: 1; border-radius: var(--radius) var(--radius) 0 0;
background: linear-gradient(150deg, var(--navy), var(--navy-2));
display: grid; place-items: center; color: #fff; font-size: 2.2rem; font-weight: 700;
margin-bottom: 16px; object-fit: cover;
}
.leader-card h3 { font-size: 1rem; padding: 0 12px; }
.leader-card p { font-size: 0.82rem; color: var(--gray); padding: 0 12px; }
.leader-card .text-link { font-size: 0.82rem; }
/* ---------- Parceiros ---------- */
.logo-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 44px; }
.logo-slot {
height: 76px; border: 1px dashed var(--line); border-radius: 10px; background: #fff;
display: grid; place-items: center; color: var(--gray); font-size: 0.75rem;
padding: 8px; text-align: center;
}
.logo-slot img { max-height: 44px; filter: grayscale(1); opacity: 0.75; transition: 0.2s; }
.logo-slot:hover img { filter: none; opacity: 1; }
/* ---------- Notícias ---------- */
.news-card { display: flex; flex-direction: column; }
.news-meta { display: flex; gap: 10px; align-items: center; font-size: 0.75rem; color: var(--gray); margin-bottom: 12px; }
.news-tag {
background: rgba(38,129,255,0.1); color: var(--blue); font-weight: 600;
border-radius: 999px; padding: 2px 10px;
}
.news-card h3 { font-size: 1.02rem; }
.news-card .text-link { margin-top: auto; padding-top: 14px; }
/* ---------- CTA final / formulário ---------- */
.cta-final { background: linear-gradient(150deg, var(--navy) 50%, var(--navy-2)); }
.cta-final .split { align-items: start; }
.contact-form {
background: #fff; border-radius: var(--radius); padding: 36px; box-shadow: var(--shadow);
}
.form-row { margin-bottom: 18px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.contact-form input, .contact-form select, .contact-form textarea {
width: 100%; border: 1px solid var(--line); border-radius: 12px;
padding: 12px 15px; font: 400 0.95rem var(--font); color: var(--ink); background: #fff;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(38,129,255,0.15);
}
.form-consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 22px; }
.form-consent input { width: auto; margin-top: 5px; }
.form-consent label { font-weight: 400; font-size: 0.8rem; color: var(--gray); }
.form-feedback { margin-top: 14px; font-size: 0.9rem; font-weight: 600; color: var(--blue); }
.form-feedback.error { color: #B42318; }
/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: #C9CDF2; }
.footer-grid {
display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding: 72px 24px 48px;
}
.footer-brand p { font-size: 0.9rem; margin: 18px 0; max-width: 30ch; }
.social-link { color: var(--accent); font-weight: 600; font-size: 0.9rem; }
.site-footer h4 {
color: #fff; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 16px;
}
.site-footer ul li { margin-bottom: 10px; }
.site-footer ul a { color: #C9CDF2; font-size: 0.9rem; }
.site-footer ul a:hover { color: #fff; }
.lang-switch-footer { margin-top: 20px; border-color: rgba(255,255,255,0.25); width: fit-content; }
.lang-switch-footer button { color: #C9CDF2; }
.lang-switch-footer button.active { background: var(--accent); }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.12); padding-top: 24px; padding-bottom: 32px;
font-size: 0.8rem; color: rgba(255,255,255,0.5);
}
/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(5,6,88,0.55); backdrop-filter: blur(3px); }
.modal-card {
position: relative; background: #fff; border-radius: var(--radius); max-width: 560px;
width: calc(100% - 40px); max-height: 85vh; overflow: auto; padding: 40px; box-shadow: var(--shadow);
}
.modal-close {
position: absolute; top: 14px; right: 18px; border: 0; background: none;
font-size: 1.8rem; color: var(--gray); cursor: pointer; line-height: 1;
}
.modal-card .cargo { color: var(--accent); font-weight: 600; font-size: 0.9rem; margin: 4px 0 18px; }
.modal-card .bio { color: var(--gray); font-size: 0.95rem; }
/* ---------- Cookie banner ---------- */
.cookie-banner {
position: fixed; bottom: 20px; left: 20px; right: 20px; z-index: 140;
max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow);
padding: 20px 24px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { font-size: 0.85rem; color: var(--gray); flex: 1 1 320px; }
.cookie-actions { display: flex; gap: 10px; }
/* ---------- Animações on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }
/* ---------- Modo revisão (?review=1): destaca o que falta de conteúdo ---------- */
.review-flag { outline: 3px dashed #E11414 !important; outline-offset: 4px; position: relative; }
.review-flag::before {
content: "captar com a área"; position: absolute; top: -13px; left: 10px; z-index: 20;
background: #E11414; color: #fff; font: 700 12px/1.5 var(--font); padding: 2px 10px;
border-radius: 5px; letter-spacing: 0.01em; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.review-flag.review-dark::before { top: -13px; }
/* ---------- Cabeçalho com bandeira (páginas internas) ---------- */
.dc-head { display: flex; align-items: center; gap: 14px; }
.dc-head h2 { margin: 0; }
/* ---------- Listas de conteúdo (páginas internas) ---------- */
.doc-list { margin: 20px 0 0; }
.doc-list li { position: relative; padding-left: 26px; margin-bottom: 12px; color: var(--ink); font-size: 0.98rem; }
.doc-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.doc-list li strong { color: var(--navy); }
/* ---------- Página interna (stubs) ---------- */
.page-hero { background: linear-gradient(150deg, var(--navy) 55%, var(--navy-2)); color: #fff; padding: 96px 0 72px; }
.page-hero h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.8rem); }
.page-hero p { color: #C9CDF2; max-width: 60ch; margin-top: 16px; font-size: 1.05rem; }
.page-body { padding: 72px 0 104px; }
.page-body .placeholder-block {
border: 1px dashed var(--line); border-radius: var(--radius); background: var(--bg-alt);
padding: 40px; color: var(--gray); margin-top: 28px;
}
/* ============================================================================
RESPONSIVO (mobile-first via breakpoints descendentes)
========================================================================== */
@media (max-width: 1080px) {
.cards-5 { grid-template-columns: repeat(3, 1fr); }
.leader-grid { grid-template-columns: repeat(2, 1fr); }
.logo-strip { grid-template-columns: repeat(3, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
/* menu mobile (hambúrguer) - breakpoint elevado p/ caber rótulos longos (ES/EN)
e manter o header uniforme em todos os idiomas e páginas */
.nav-toggle { display: block; }
.main-nav {
display: none; position: absolute; top: 72px; left: 0; right: 0;
background: #fff; border-bottom: 1px solid var(--line); padding: 12px 24px 20px;
max-height: calc(100vh - 72px); overflow: auto;
}
.main-nav.open { display: block; }
.main-nav > ul { flex-direction: column; gap: 0; flex-wrap: nowrap; }
.submenu {
position: static; opacity: 1; visibility: visible; transform: none;
box-shadow: none; border: 0; padding-left: 16px; min-width: 0;
}
.header-actions .btn-ghost { display: none; }
}
@media (max-width: 900px) {
.split, .map-wrap { grid-template-columns: 1fr; gap: 40px; }
.cards-4, .cards-3, .cards-2 { grid-template-columns: repeat(2, 1fr); }
.diff-grid, .why-grid { grid-template-columns: repeat(2, 1fr); }
.metrics-grid, .metrics-grid-4, .metrics-grid-3 { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
.newsletter-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 620px) {
.section { padding: 72px 0; }
.hero-content { padding: 88px 24px 96px; }
.cards-5, .cards-4, .cards-3, .cards-2 { grid-template-columns: 1fr; }
.diff-grid, .why-grid { grid-template-columns: 1fr; }
.metrics-grid, .metrics-grid-4, .metrics-grid-3 { grid-template-columns: repeat(3, 1fr); }
.leader-grid { grid-template-columns: 1fr 1fr; }
.logo-strip { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr; gap: 32px; }
.form-row-2 { grid-template-columns: 1fr; }
.header-actions .btn-primary { display: none; }
.header-inner { gap: 10px; }
.logo-word { font-size: 1.05rem; letter-spacing: 0.18em; }
.site-header .logo-img { height: 20px; }
.stp-row { grid-template-columns: 1fr; gap: 6px; }
.stp-scale { margin-left: 0; }
}
/* =========================================================================
PESSOAS (People) - faixa GPTW na home, selo e página de Pessoas
========================================================================= */
/* Faixa de confiança GPTW na home */
.trust-strip { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; }
.trust-inner { display: flex; align-items: center; gap: 26px; }
.trust-txt { flex: 1 1 auto; min-width: 0; }
.trust-txt h2 { font-size: 1.28rem; line-height: 1.3; margin: 0 0 4px; color: var(--navy); }
.trust-txt p { margin: 0; color: var(--muted, #6B7280); font-size: 0.98rem; }
.trust-cta { flex: 0 0 auto; margin-top: 0 !important; }
/* Selo GPTW - usa a arte oficial (img); se ausente, mostra fallback estilizado */
.gptw-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 74px; height: 74px; border-radius: 16px; overflow: hidden; text-decoration: none; }
.gptw-badge img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gptw-seal { display: none; flex-direction: column; align-items: center; justify-content: center;
width: 100%; height: 100%; background: #0b0c10; color: #fff; border-radius: 16px; line-height: 1; }
.gptw-badge--fallback .gptw-seal { display: flex; }
.gptw-seal b { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.03em; }
.gptw-seal i { font-style: normal; font-size: 0.58rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin-top: 4px; }
.gptw-badge--lg { width: 108px; height: 108px; border-radius: 20px; }
.gptw-badge--lg .gptw-seal b { font-size: 1.5rem; }
.gptw-badge--lg .gptw-seal i { font-size: 0.68rem; margin-top: 6px; }
/* Página Pessoas - cartão de certificações */
.people-certs .cert-card { display: flex; align-items: center; gap: 26px;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 30px; box-shadow: var(--shadow); }
.people-certs .cert-card h2 { font-size: 1.35rem; margin: 0 0 6px; color: var(--navy); }
.people-certs .cert-card p { margin: 0 0 6px; }
/* CTA horizontal (vagas / código de ética) */
.people-cta { flex-direction: row !important; align-items: center; justify-content: space-between; gap: 24px; }
.people-cta h3 { margin: 0 0 4px; }
.people-cta p { margin: 0 !important; }
.people-cta .btn { margin-top: 0 !important; flex: 0 0 auto; }
@media (max-width: 760px) {
.trust-inner { flex-wrap: wrap; gap: 16px; }
.trust-txt { flex: 1 1 100%; order: 2; }
.trust-cta { order: 3; }
.people-cta { flex-direction: column !important; align-items: flex-start; }
.people-certs .cert-card { flex-direction: column; align-items: flex-start; }
}
/* GPTW por país - selos oficiais (SVG) na home e cartões por país na página Pessoas */
.trust-badges { display: flex; gap: 12px; align-items: center; flex: 0 0 auto; text-decoration: none; }
.gptw-badge-img { height: 66px; width: auto; display: block; border-radius: 5px; }
.cert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 10px; }
.cert-country { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px 28px; box-shadow: var(--shadow); }
.cert-flag { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--navy); font-weight: 700; font-size: 1.18rem; }
.cert-flag .flag svg { width: 30px; height: 21px; display: block; border-radius: 3px; }
.cert-badge { width: 132px; height: auto; }
.cert-stat { flex: 1 1 190px; display: flex; flex-direction: column; }
.cert-stat b { font-size: 2.7rem; line-height: 1; color: var(--accent); font-weight: 800; }
.cert-stat span { margin-top: 8px; color: #101828; font-size: 0.98rem; line-height: 1.5; }
.cert-src { flex: 1 1 100%; margin: 0; color: #6B7280; font-size: 0.82rem; }
@media (max-width: 760px) {
.cert-grid { grid-template-columns: 1fr; }
.trust-badges { order: 1; }
}
/* Mapa original da América Latina (SVG, sem licença) - seção Presença */
.tn-map { margin: 44px auto 0; max-width: 560px; }
.tn-map svg { width: 100%; height: auto; display: block; }
.tn-land path { fill: url(#tnLandGrad); stroke: rgba(122,162,255,0.55); stroke-width: 1.5; }
.tn-map-label { fill: #e6ecff; font-family: 'Segoe UI', Arial, sans-serif; font-size: 17px; font-weight: 700; letter-spacing: 0.02em; }
.tn-pin circle:first-child { transform-box: fill-box; transform-origin: center; animation: tnpulse 2.4s ease-in-out infinite; }
@keyframes tnpulse { 0%,100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.95; transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .tn-pin circle:first-child { animation: none; } }
/* =========================================================================
DARK MODE - ativado por [data-theme="dark"] no (toggle no header)
Identidade preservada: navy/azul da marca; superfícies escuras neutras-azuladas.
========================================================================= */
.theme-toggle { border: 1px solid var(--line); background: transparent; color: var(--navy); width: 34px; height: 30px;
border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .ic-sun { display: none; }
[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
[data-theme="dark"] {
--bg: #050658; /* fundo base (navy quase preto) */
--bg-alt: #0D078C; /* seções alternadas */
--ink: #C9CDF2; /* texto */
--gray: #9FA8E8; /* texto secundário */
--line: rgba(255,255,255,0.12);
--shadow: 0 8px 28px rgba(0,0,0,0.45);
color-scheme: dark;
}
[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: #FFFFFF; }
[data-theme="dark"] a { color: #2681FF; }
[data-theme="dark"] .text-link { color: #2681FF; }
[data-theme="dark"] .kicker { color: #2681FF; }
/* header */
[data-theme="dark"] .site-header { background: rgba(11,14,34,0.92); border-bottom-color: var(--line); }
[data-theme="dark"] .main-nav a { color: var(--ink); }
[data-theme="dark"] .main-nav a:hover { color: #fff; background: rgba(255,255,255,0.08); }
[data-theme="dark"] .submenu, [data-theme="dark"] .main-nav { background: #0D078C; border-color: var(--line); }
[data-theme="dark"] .lang-switch { border-color: var(--line); }
[data-theme="dark"] .lang-switch button { color: var(--gray); }
[data-theme="dark"] .lang-switch button.active { background: var(--accent); color: #fff; }
[data-theme="dark"] .theme-toggle { color: #FFFFFF; }
[data-theme="dark"] .nav-toggle span { background: #FFFFFF; }
[data-theme="dark"] .logo { color: #fff; }
[data-theme="dark"] .logo-symbol { fill: #fff; }
/* superfícies */
[data-theme="dark"] .card, [data-theme="dark"] .diff-card, [data-theme="dark"] .investor-card,
[data-theme="dark"] .cert-country, [data-theme="dark"] .energy-card, [data-theme="dark"] .modal-card,
[data-theme="dark"] .placeholder-block { background: #0D078C; border-color: var(--line); }
[data-theme="dark"] .card p, [data-theme="dark"] .diff-card p { color: var(--gray); }
[data-theme="dark"] .trust-strip, [data-theme="dark"] .trust-line, [data-theme="dark"] .eco-badges { background: #0D078C; border-color: var(--line); }
[data-theme="dark"] .trust-txt h2, [data-theme="dark"] .trust-line p { color: #FFFFFF; }
[data-theme="dark"] .card-eco { border-top-color: var(--accent); }
[data-theme="dark"] .section-eco { background: linear-gradient(180deg, #0D078C 0%, var(--bg) 60%); }
[data-theme="dark"] .investor-logo { background: #fff; border-radius: 8px; padding: 6px; }
[data-theme="dark"] .site-country, [data-theme="dark"] .cert-flag { color: #FFFFFF; }
[data-theme="dark"] .doc-list li::before { color: var(--accent); }
[data-theme="dark"] .doc-list strong { color: #FFFFFF; }
[data-theme="dark"] .eco-ic { background: rgba(38,129,255,0.16); color: #2681FF; }
[data-theme="dark"] .eco-tag { background: rgba(38,129,255,0.16); color: #9FA8E8; }
/* botões */
[data-theme="dark"] .btn-ghost { color: #FFFFFF; border-color: rgba(255,255,255,0.28); }
[data-theme="dark"] .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.06); }
[data-theme="dark"] .btn-navy { background: var(--accent); }
[data-theme="dark"] .btn-navy:hover { background: var(--blue); }
/* formulário / newsletter / cookies */
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
background: #141A3F; color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .contact-form label, [data-theme="dark"] .form-consent label { color: var(--ink); }
[data-theme="dark"] .cookie-banner { background: #0D078C; color: var(--ink); border-color: var(--line); }
/* mapa e cards de campi (seção já escura) - apenas contraste fino */
[data-theme="dark"] .section-dark { background: #050658; }
[data-theme="dark"] .page-hero { background: linear-gradient(150deg, #050658 55%, var(--navy-2)); }
/* mapa geográfico - nota de projeção */
.tn-map-src { fill: rgba(200,214,255,0.55); font-family: "Segoe UI", Arial, sans-serif; font-size: 10px; }
.tn-map-label { font-size: 15px; }
/* =========================================================================
V1.2 - ícones discretos · quebra de texto · dark mode (formulário e contraste) · mapa
========================================================================= */
/* ícones decorativos dos cards ocultos (visual mais sóbrio/institucional) */
.card-ic, .diff-ic, .energy-badge { display: none !important; }
.diff-card { gap: 0; }
/* quebra de texto mais elegante */
h1, h2, h3 { text-wrap: balance; }
p, .lead, li { text-wrap: pretty; }
h2 { max-width: 30ch; }
.site-headtxt h3, .card h3 { text-wrap: balance; }
/* mapa - rótulos */
.tn-map-label { font-size: 14px; font-weight: 700; fill: #F2F5FF; paint-order: stroke; stroke: rgba(5,6,88,0.85); stroke-width: 3px; stroke-linejoin: round; }
.tn-map-country { font-size: 11px; font-weight: 600; fill: #B9C8FF; letter-spacing: 0.04em; paint-order: stroke; stroke: rgba(5,6,88,0.85); stroke-width: 3px; stroke-linejoin: round; }
.tn-land path { stroke: rgba(160,190,255,0.7); stroke-width: 1.2; }
/* DARK - formulário de contato */
[data-theme="dark"] .contact-form { background: #0D078C; border: 1px solid var(--line); box-shadow: none; }
[data-theme="dark"] .contact-form input, [data-theme="dark"] .contact-form select, [data-theme="dark"] .contact-form textarea {
background: #0F1330; color: var(--ink); border: 1px solid rgba(255,255,255,0.18); }
[data-theme="dark"] .contact-form input::placeholder, [data-theme="dark"] .contact-form textarea::placeholder { color: rgba(232,236,255,0.45); }
[data-theme="dark"] .contact-form label, [data-theme="dark"] .form-consent label { color: var(--ink); }
[data-theme="dark"] .form-feedback { color: #2681FF; }
[data-theme="dark"] .form-feedback.error { color: #FF8A8A; }
[data-theme="dark"] .contact-form select option { background: #050658; color: var(--ink); }
/* DARK - contraste de textos que usavam navy/blue/gray fixos */
[data-theme="dark"] .investor-card h3 { color: #2681FF; }
[data-theme="dark"] .doc-list li, [data-theme="dark"] .check-list li { color: var(--ink); }
[data-theme="dark"] .doc-list li strong { color: #FFFFFF; }
[data-theme="dark"] .news-tag { background: rgba(38,129,255,0.18); color: #9FA8E8; }
[data-theme="dark"] .news-meta, [data-theme="dark"] .metric-label, [data-theme="dark"] .fine-print,
[data-theme="dark"] .leader-card p, [data-theme="dark"] .modal-card .bio, [data-theme="dark"] .cookie-banner p,
[data-theme="dark"] .stp-chart-title, [data-theme="dark"] .stp-note { color: var(--gray); }
[data-theme="dark"] .stp-label { color: var(--ink); }
[data-theme="dark"] .site-status { background: rgba(38,129,255,0.18); color: #9FA8E8; }
[data-theme="dark"] .trust-txt h2, [data-theme="dark"] .people-certs .cert-card h2, [data-theme="dark"] .cert-flag { color: #FFFFFF; }
[data-theme="dark"] .cert-stat span { color: var(--ink); }
[data-theme="dark"] .cert-src { color: var(--gray); }
[data-theme="dark"] .logo { color: #fff; }
[data-theme="dark"] .placeholder-block, [data-theme="dark"] .page-body .placeholder-block { color: var(--gray); }
[data-theme="dark"] .card h3, [data-theme="dark"] .diff-card h3, [data-theme="dark"] .why-item h3 { color: #FFFFFF; }
[data-theme="dark"] .split-text .kicker, [data-theme="dark"] .kicker { color: #2681FF; }
/* =====================================================================
V1.3 - home enxuta (investidores compacto, responsabilidade) + contato compacto
===================================================================== */
.inv-compact { padding: 64px 0; }
.inv-strip { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center; }
.inv-strip .kicker { margin-bottom: 8px; }
.inv-strip h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 10px; }
.inv-strip .lead { margin-bottom: 12px; font-size: 1.05rem; }
.inv-strip-logos { display: flex; gap: 44px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.inv-strip-logos img { height: 40px; width: auto; max-width: 220px; object-fit: contain; }
[data-theme="dark"] .inv-strip-logos img { filter: brightness(0) invert(1); opacity: .92; }
.resp-split { align-items: start; }
.resp-list { margin: 8px 0 0; }
.resp-list li { margin-bottom: 18px; font-size: 1.02rem; }
.resp-list li strong { color: var(--navy); }
[data-theme="dark"] .resp-list li strong { color: var(--ink); }
#esg .split-text .btn { margin-top: 8px; }
.cta-compact { padding: 72px 0; }
.cta-compact .split { align-items: center; }
.contact-form-compact { padding: 28px; }
.contact-form-compact textarea { min-height: 84px; }
@media (max-width: 900px) {
.inv-strip { grid-template-columns: 1fr; gap: 24px; }
.inv-strip-logos { justify-content: flex-start; gap: 32px; }
.inv-strip-logos img { height: 32px; }
}
/* =====================================================================
V1.4 - hero achatado: título menor, símbolo alinhado à borda do container
(mesma borda direita do botão "Fale conosco" do header)
===================================================================== */
.hero-content { padding: 72px 24px 80px; }
.hero h1 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); max-width: 19ch; }
.hero-kicker { margin-bottom: 14px; }
.hero-sub { font-size: 1.05rem; margin: 16px 0 28px; max-width: 56ch; }
.hero-logo { right: max(24px, calc(50% - var(--container) / 2 + 24px)); height: 64%; max-height: 250px; opacity: 0.96; }
@media (max-width: 900px) { .hero-content { padding: 64px 24px 72px; } .hero-logo { right: 24px; height: 40%; opacity: 0.5; } }
@media (max-width: 620px) { .hero-logo { right: -4%; top: 16%; height: 120px; opacity: 0.28; transform: none; } }
/* V1.4 - canais de ética e fornecedores na seção de contato da home */
.cta-side-links { margin-top: 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cta-side-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); font-weight: 600; margin: 0 0 2px; }
.cta-side-links .btn { min-width: 260px; justify-content: center; }
/* V1.4 - títulos em uma linha sempre que couber; texto de apoio acompanha a largura */
h2 { max-width: none; }
.lead { max-width: 96ch; }
.page-hero p { max-width: 90ch; }
.page-body h2 { text-wrap: pretty; }
/* =====================================================================
V1.5 - campi como legendas dentro do mapa (sem cards)
===================================================================== */
.tn-map { position: relative; max-width: 920px; margin: 40px auto 0; }
.tn-map-callouts { position: absolute; inset: 0; pointer-events: none; }
.map-callout {
position: absolute; width: 30%; min-width: 180px; max-width: 250px; pointer-events: auto;
background: rgba(10,13,60,0.82); border: 1px solid rgba(175,203,255,0.28); border-radius: 12px;
padding: 12px 14px 12px; backdrop-filter: blur(4px); box-shadow: 0 10px 30px rgba(0,0,0,0.35);
transition: border-color .2s, transform .2s;
}
.map-callout:hover { border-color: var(--accent); transform: translateY(-2px); }
.mc-head { display: flex; align-items: center; gap: 8px; }
.mc-head .flag { flex: 0 0 auto; }
.mc-head .flag svg { width: 22px; height: 16px; display: block; border-radius: 2px; }
.mc-city { color: #fff; font-size: 1rem; line-height: 1.2; margin: 0; font-weight: 700; }
.mc-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.mc-country { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.mc-status { font-size: 0.66rem; font-weight: 600; border-radius: 999px; padding: 2px 9px; background: rgba(38,129,255,0.22); color: #CFE0FF; white-space: nowrap; }
.mc-cap { color: #7FB4FF; font-weight: 700; font-size: 0.92rem; margin: 8px 0 2px; line-height: 1.25; }
.mc-sol { color: #C9CDF2; font-size: 0.8rem; margin: 0; line-height: 1.35; }
@media (max-width: 760px) {
.tn-map-callouts { position: static; display: grid; gap: 10px; margin-top: 14px; }
.map-callout { position: static !important; width: auto; max-width: none; min-width: 0; }
.tn-leaders { display: none; }
}
/* V1.5 - canais de Ética e Fornecedores em destaque na seção de contato (home) */
.cta-channels { margin-top: 36px; display: grid; gap: 14px; }
.cta-channels .cta-side-label { margin-bottom: 2px; text-transform: none; letter-spacing: 0; font-size: 1.05rem; color: #fff; font-weight: 600; }
.cta-channel {
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-radius: 14px;
padding: 20px 22px; display: grid; grid-template-columns: 1fr auto; gap: 6px 22px; align-items: center;
}
.cta-channel h3 { color: #fff; font-size: 1.05rem; margin: 0; grid-column: 1; }
.cta-channel p { color: #C9CDF2; font-size: 0.92rem; line-height: 1.5; margin: 0; grid-column: 1; }
.cta-channel .btn { grid-column: 2; grid-row: 1 / 3; white-space: nowrap; }
@media (max-width: 620px) { .cta-channel { grid-template-columns: 1fr; } .cta-channel .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; } }
/* V1.5b - alinhamento dos cards de canais com o formulário (home) */
#contato .split { align-items: stretch; }
#contato .split-text { display: flex; flex-direction: column; }
#contato .cta-channels { flex: 1; display: grid; grid-template-rows: auto 1fr 1fr; gap: 14px; margin-top: 32px; }
#contato .cta-channel { align-content: center; }
#contato .cta-channel .btn { min-width: 200px; justify-content: center; text-align: center; }
@media (max-width: 900px) { #contato .cta-channels { grid-template-rows: auto auto auto; } }
/* V1.6 - Sobre: listas convertidas em cards (leitura mais leve) */
.page-body .cards-grid { margin-top: 28px; }
.page-body .card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.page-body .card p { font-size: 0.95rem; line-height: 1.55; }
.cards-tight { gap: 18px; }
/* V1.7 - Sobre: linha fina azul separando os tópicos */
.page-sections > section + section { border-top: 1px solid #EEF1F6; padding-top: 56px; }
[data-theme="dark"] .page-sections > section + section { border-top-color: rgba(255,255,255,0.08); }
/* V1.8 - respiro entre cards e blocos seguintes nas páginas internas */
.page-body .cards-grid + .placeholder-block, .page-body .cards-grid + .lead, .page-body .cards-grid + .card-cta, .page-body .cards-grid + p { margin-top: 28px; }
/* =====================================================================
V1.9 - HERO conforme referência aprovada: bloco arredondado navy→petróleo,
destaque verde-menta pontual, faixa Energia/Água/Eficiência dentro do hero.
GPTW movida para logo abaixo do header.
===================================================================== */
:root { --mint: #4ED1A1; --hx: max(24px, calc(50% - 576px)); }
.hero {
margin: 20px 24px 0; border-radius: 22px;
background: linear-gradient(120deg, #071233 0%, #0A1F5F 40%, #0B3F6E 72%, #0E6B6E 100%);
box-shadow: 0 20px 60px rgba(5,6,88,0.18);
}
.hero-glow { display: none; }
.hero-content { padding: 72px var(--hx) 48px; max-width: none; }
.hero h1 { font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 700; max-width: 24ch; }
.hero h1 .hl, .hero-sub .hl { color: var(--mint); }
.hero-sub { max-width: 60ch; color: #C9CDF2; }
.hero-ctas .btn { border-radius: 999px; }
.hero-logo { right: var(--hx); top: 40%; height: 48%; max-height: 260px; }
.hero-strip { position: relative; border-top: 1px solid rgba(255,255,255,0.18); padding: 20px var(--hx) 44px; }
.hero-strip-more { display: block; text-align: right; color: #fff; font-weight: 600; font-size: 0.92rem; margin-bottom: 8px; }
.hero-strip-more:hover { color: var(--mint); }
.hero-strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.hero-strip h3 { color: #fff; font-size: 1rem; margin-bottom: 6px; }
.hero-strip p { color: #C9CDF2; font-size: 0.9rem; line-height: 1.55; }
.trust-strip { border-top: 0; }
@media (max-width: 900px) {
.hero { margin: 12px 12px 0; border-radius: 16px; }
.hero-content { padding: 56px 24px 40px; }
.hero-strip { padding: 18px 24px 36px; }
.hero-strip-grid { grid-template-columns: 1fr; gap: 20px; }
.hero-logo { right: 24px; top: 14%; height: 34%; opacity: 0.45; }
}
/* V1.9b - hero de fora a fora (sem quadro); título limitado a 3 linhas; GPTW volta para depois do hero */
.hero { margin: 0; border-radius: 0; box-shadow: none; }
.hero h1 { font-size: clamp(1.9rem, 3.1vw, 2.7rem); max-width: 26ch; text-wrap: balance; }
.trust-strip { border-top: 1px solid var(--line); }
@media (max-width: 900px) { .hero { margin: 0; border-radius: 0; } .hero h1 { font-size: clamp(1.7rem, 6vw, 2.2rem); max-width: none; } }
/* V1.9c - hero sem botões e mais baixo */
.hero-content { padding: 48px var(--hx) 36px; }
.hero-sub { margin: 14px 0 0; }
.hero-logo { top: 38%; height: 52%; max-height: 210px; }
.hero-strip { padding: 14px var(--hx) 32px; }
.hero-strip-more { margin-bottom: 4px; }
@media (max-width: 900px) { .hero-content { padding: 44px 24px 32px; } }
/* V1.9d - ícones de linha (livres, sem fundo) ao lado dos temas da faixa do hero */
.hero-strip h3 { display: flex; align-items: center; gap: 10px; }
.hs-ic { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: var(--mint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block !important; }
/* V1.10 - linha LGPD / segurança da informação no rodapé */
.footer-bottom p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; line-height: 1.6; }
.footer-sep { color: rgba(255,255,255,0.35); }
.footer-lgpd { color: rgba(255,255,255,0.5); flex: 1 1 520px; max-width: 110ch; }
@media (max-width: 700px) { .footer-sep { display: none; } .footer-lgpd { flex-basis: 100%; } }
/* V1.10 - home: texto de proximidade (seção #esg) + página de privacidade */
.resp-text p { font-size: 1.08rem; line-height: 1.75; color: var(--ink); margin-bottom: 16px; }
.resp-text .text-link { margin-top: 4px; }
[data-theme="dark"] .resp-text p { color: var(--ink); }
.priv-body h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.priv-body .lead { color: var(--ink); font-size: 1.05rem; max-width: 90ch; }
.priv-body > section + section { padding-top: 40px; }
/* V1.11 - Data Centers: sub-hero de localidades, introdução das cidades, fecho */
.dc-strip { padding: 30px 0; }
.dc-strip-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr); gap: 16px 48px; align-items: center; }
.dc-strip h2 { font-size: clamp(1.15rem, 1.8vw, 1.45rem); margin: 0; }
.dc-strip p { color: var(--gray); font-size: 0.98rem; line-height: 1.6; margin: 0; }
.dc-city { color: var(--ink); margin-bottom: 18px; }
.dc-city + .lead { color: var(--gray); }
.dc-next h2 { text-align: center; color: var(--navy); font-size: clamp(1.5rem, 2.6vw, 2.1rem); padding: 16px 0 8px; }
[data-theme="dark"] .dc-city { color: var(--ink); }
@media (max-width: 900px) { .dc-strip-inner { grid-template-columns: 1fr; } }
/* V1.12 - topo das páginas internas mais baixo */
.page-hero { padding: 44px 0 36px; }
.page-hero h1 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.page-hero p { margin-top: 10px; font-size: 1rem; }
.priv-body .lead a { color: var(--blue); text-decoration: underline; }
[data-theme="dark"] .priv-body .lead a { color: #9FA8E8; }
/* V1.13 - Declaração de Privacidade */
.decl-entity { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; color: var(--accent); font-weight: 700; margin-bottom: 6px; }
.decl-vig { color: #C9CDF2; }
.ph-date { background: rgba(255,255,255,0.14); border: 1px dashed rgba(255,255,255,0.5); border-radius: 4px; padding: 0 6px; }
.decl h2 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: 14px; }
.decl-body p, .decl-body li { font-size: 1rem; line-height: 1.7; color: var(--ink); }
.decl-body p + p { margin-top: 12px; }
.decl-intro p { font-size: 1.08rem; }
.decl-list { margin: 12px 0; padding-left: 22px; list-style: disc; }
.decl-list li { margin-bottom: 6px; }
.decl-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 18px 0; }
.decl-cat { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; background: var(--bg); }
.decl-cat h3 { font-size: 1rem; color: var(--navy); margin-bottom: 8px; }
.decl-cat p { font-size: 0.92rem; line-height: 1.55; color: #4B5563; }
.decl-cat p + p { margin-top: 6px; }
.decl-cat strong { color: var(--navy); }
.decl-contact { font-style: normal; margin: 14px 0 16px; padding: 16px 18px; border-left: 3px solid var(--accent); background: var(--bg-alt); line-height: 1.6; border-radius: 0 10px 10px 0; }
.decl-body a { color: var(--blue); text-decoration: underline; }
.decl-foot { color: var(--gray); font-size: 0.9rem; }
.priv-body.decl > section + section { padding-top: 32px; }
[data-theme="dark"] .decl-cat { background: var(--bg-alt); }
[data-theme="dark"] .decl-cat p { color: var(--gray); }
[data-theme="dark"] .decl-cat strong, [data-theme="dark"] .decl-cat h3 { color: var(--ink); }
[data-theme="dark"] .decl-body a { color: #9FA8E8; }
@media (max-width: 760px) { .decl-cats { grid-template-columns: 1fr; } }
/* V1.14 - header uniforme em PT/EN/ES: CTA e ações nunca quebram nem encolhem */
.header-actions { flex: 0 0 auto; }
.header-actions .btn { white-space: nowrap; flex: 0 0 auto; }
.header-actions .lang-switch, .header-actions .theme-toggle { flex: 0 0 auto; }
/* V1.14 - hero: título sempre em 2 linhas (quebra explícita), mesma estrutura em PT/EN/ES */
.hero h1 { font-size: clamp(1.8rem, 2.9vw, 2.55rem); max-width: none; white-space: nowrap; text-wrap: initial; }
@media (max-width: 900px) { .hero h1 { white-space: normal; font-size: clamp(1.6rem, 5.6vw, 2.1rem); } .hero h1 br { display: none; } }
/* V1.15 - Sobre: introdução em parágrafos */
.page-body .lead + .lead { margin-top: 14px; }
.sobre-cta { color: var(--navy); font-weight: 600; }
.sobre-cta a { color: var(--blue); text-decoration: underline; }
[data-theme="dark"] .sobre-cta { color: var(--ink); }
[data-theme="dark"] .sobre-cta a { color: #9FA8E8; }
/* V1.15b - Data Centers: próximo horizonte */
.dc-next-sub { text-align: center; color: var(--gray); margin: 0 auto; }
/* V1.16 - textos acompanham a largura dos boxes (sem limite em ch nos blocos de largura total) */
.lead, .page-hero p, .priv-body .lead, .decl-body p, .dc-city, .page-body p { max-width: none; }
.section > .container > .lead, .page-body > section > .lead { max-width: none; }
.hero-sub { max-width: 60ch; } /* hero: coluna de texto ao lado do símbolo */
/* V1.16b - páginas internas: corpo alinhado ao header, ao topo e ao rodapé (mesma margem de 24px do .container) */
.page-body { padding-left: 24px; padding-right: 24px; }
/* V1.17 - Consciência (Sobre) */
#consciencia .text-link { margin-top: 22px; }
/* V1.18 - LinkedIn: ícone no header e chamada no topo de Gente */
.social-toggle { display: inline-grid; place-items: center; width: 34px; height: 30px; border: 1px solid var(--line); border-radius: 8px; color: var(--navy); background: transparent; flex: 0 0 auto; transition: border-color .2s, color .2s; }
.social-toggle svg { width: 15px; height: 15px; fill: currentColor; display: block; }
.social-toggle:hover { border-color: var(--navy); color: var(--blue); }
[data-theme="dark"] .social-toggle { color: var(--ink); border-color: var(--line); }
.page-hero .hero-row { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.page-hero .hero-row-text { min-width: 0; flex: 1 1 auto; }
.li-cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 12px; color: #fff; border: 1px solid rgba(255,255,255,0.4); border-radius: 12px; padding: 12px 16px; font-weight: 600; font-size: 0.95rem; white-space: nowrap; transition: border-color .2s, background .2s; }
.li-cta svg { width: 26px; height: 26px; fill: #fff; flex: 0 0 auto; }
.li-cta:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
@media (max-width: 900px) { .page-hero .hero-row { flex-direction: column; align-items: flex-start; gap: 20px; } .li-cta { white-space: normal; } }
/* =====================================================================
V1.19 - textos justificados em todas as páginas (parágrafos e listas de conteúdo)
===================================================================== */
main p, main li, .decl-body p, .decl-body li, .card p, .diff-card p, .why-item p, .lead, .hero-sub, .hero-strip p, .cta-channel p, .resp-text p, .inv-strip .lead, .trust-strip p, .dc-strip p {
text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty;
}
/* exceções: elementos curtos, centralizados ou de interface */
.dc-next-sub, .cert-country, .cert-country *, .kicker, .hero-kicker, .site-status, .news-meta, .news-tag, .metric-label,
.form-feedback, .form-consent label, .contact-form label, .cookie-banner p, .map-callout, .map-callout p, .mc-meta, .mc-cap, .mc-sol,
.decl-contact, .decl-foot, .decl-vig, .decl-entity, .footer-lgpd, .site-footer p, .site-footer li, .page-hero p, .hero h1, .li-cta span,
.hero-strip-more, .text-link, .btn, .placeholder-block, .cta-side-label, .footer-bottom p, .newsletter-text p {
text-align: left; hyphens: manual; -webkit-hyphens: manual;
}
.dc-next-sub { text-align: center; }
.cert-country, .cert-country * { text-align: center; }
/* V1.19b - "Saiba mais →" da faixa do hero volta à direita */
.hero-strip-more { text-align: right; }
/* =====================================================================
V1.20 - hero: degradê azul em movimento lento; o verde-menta do "conscientemente"
entra ~20% do ciclo e recua (80% do tempo o fundo é só azul). Linhas continuam por cima.
===================================================================== */
.hero {
background: linear-gradient(120deg, #071233 0%, #0A1F5F 35%, #0B3F6E 65%, #0E5F78 85%, #0E6B6E 100%);
background-size: 220% 220%;
animation: heroShift 28s ease-in-out infinite;
}
.hero::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(62% 75% at 80% 62%, rgba(78,209,161,0.62) 0%, rgba(78,209,161,0.22) 38%, rgba(78,209,161,0) 72%);
opacity: 0; animation: heroMint 28s ease-in-out infinite;
}
@keyframes heroShift { 0%, 100% { background-position: 0% 40%; } 50% { background-position: 100% 60%; } }
@keyframes heroMint { 0%, 76% { opacity: 0; } 84% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero, .hero::before { animation: none; } .hero::before { opacity: 0.35; } }
/* V1.19c - dentro dos boxes o texto fica alinhado à esquerda (justificado só nos parágrafos corridos) */
.card p, .card li, .diff-card p, .why-item p, .cta-channel p, .decl-cat p, .investor-card p, .news-card p, .hero-strip p, .map-callout p, .site-card p, .people-cta p, .card-cta p, .energy-card p {
text-align: left; hyphens: manual; -webkit-hyphens: manual;
}
/* V1.21 - logo: a versão em texto só aparece se a imagem falhar (evita o "pisca" texto→imagem ao navegar) */
.logo-mark { display: none; }
.logo-mark.is-fallback { display: inline-flex; }
/* V1.20b - hero: ciclo de 10s; 60% só azul; nos 40% finais o verde-menta surge à direita,
ondula e atravessa para a esquerda, depois recua. */
.hero { animation-duration: 10s; }
.hero::before {
inset: -10% -25%; width: auto;
background: radial-gradient(38% 70% at 72% 55%, rgba(78,209,161,0.62) 0%, rgba(78,209,161,0.24) 40%, rgba(78,209,161,0) 72%);
animation: heroMintTravel 10s ease-in-out infinite;
will-change: transform, opacity;
}
@keyframes heroMintTravel {
0%, 60% { opacity: 0; transform: translate3d(28%, 0, 0); }
66% { opacity: 1; transform: translate3d(16%, -3%, 0); }
76% { opacity: 1; transform: translate3d(2%, 3%, 0); }
86% { opacity: 1; transform: translate3d(-12%, -2%, 0); }
94% { opacity: 0.6; transform: translate3d(-24%, 2%, 0); }
100% { opacity: 0; transform: translate3d(-34%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; transform: none; opacity: 0.3; } }
/* V1.22 - hero: símbolo com topo e base alinhados ao bloco de texto (mesmo eixo do título ao subtítulo) */
.hero-content { position: relative; }
.hero-art { position: absolute; top: 48px; bottom: 36px; right: var(--hx); display: flex; align-items: stretch; pointer-events: none; }
.hero-art .hero-logo { position: static; height: 100%; width: auto; max-height: none; transform: none; opacity: 0.96; }
@media (max-width: 900px) { .hero-art { top: 44px; bottom: 32px; right: 24px; opacity: 0.4; } }
@media (max-width: 620px) { .hero-art { display: none; } }
/* =====================================================================
V1.20c - hero: ciclo de 8s. 50% só azul; nos outros 50% uma onda verde-menta, restrita ao
quarto inferior do hero, surge à direita, ondula e percorre todo o hero até a esquerda.
Enquanto a onda passa, "conscientemente" e "sem perder de vista…" ganham destaque.
===================================================================== */
.hero { animation-duration: 8s; }
.hero::before {
inset: auto -30% 0 -30%; top: auto; height: 26%; width: auto;
background: radial-gradient(34% 120% at 50% 100%, rgba(78,209,161,0.95) 0%, rgba(78,209,161,0.55) 38%, rgba(78,209,161,0.18) 62%, rgba(78,209,161,0) 80%);
mix-blend-mode: screen; opacity: 0;
animation: heroWave 8s ease-in-out infinite;
}
@keyframes heroWave {
0%, 50% { opacity: 0; transform: translate3d(46%, 6%, 0); }
56% { opacity: 1; transform: translate3d(30%, -6%, 0); }
66% { opacity: 1; transform: translate3d(10%, 6%, 0); }
78% { opacity: 1; transform: translate3d(-12%, -6%, 0); }
90% { opacity: 0.9; transform: translate3d(-32%, 5%, 0); }
100% { opacity: 0; transform: translate3d(-48%, 0, 0); }
}
.hero h1 .hl, .hero-sub .hl { animation: hlPulse 8s ease-in-out infinite; }
@keyframes hlPulse {
0%, 50% { color: #4ED1A1; text-shadow: none; }
58% { color: #A3FFD9; text-shadow: 0 0 18px rgba(78,209,161,0.85), 0 0 2px rgba(255,255,255,0.6); }
90% { color: #A3FFD9; text-shadow: 0 0 18px rgba(78,209,161,0.85), 0 0 2px rgba(255,255,255,0.6); }
100% { color: #4ED1A1; text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
.hero::before { animation: none; transform: none; opacity: 0.45; }
.hero h1 .hl, .hero-sub .hl { animation: none; }
}
/* V1.23 - Proximidade: respiro entre título e botão após a saída do lead */
#esg .split-text .btn { margin-top: 26px; }
/* V1.24 - contato da home: 3 canais no espaço dos 2 (mais compactos) */
#contato .cta-channels { grid-template-rows: auto 1fr 1fr 1fr; gap: 10px; }
#contato .cta-channel { padding: 14px 18px; gap: 4px 18px; }
#contato .cta-channel h3 { font-size: 0.98rem; }
#contato .cta-channel p { font-size: 0.86rem; line-height: 1.45; }
#contato .cta-channel .btn { min-width: 176px; padding: 10px 18px; font-size: 0.88rem; }
@media (max-width: 900px) { #contato .cta-channels { grid-template-rows: auto auto auto auto; } }
/* V1.25 - links para os Códigos de Ética nos canais */
.doc-link { display: inline-block; font-size: 0.82rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#contato .cta-channel .doc-link { grid-column: 1; color: #CFE0FF; margin-top: 2px; }
#contato .cta-channel .doc-link:hover { color: #fff; }
#contato .cta-channel .btn { grid-row: 1 / 4; }
.card-cta .doc-link { color: var(--blue); margin: 0 0 18px; }
[data-theme="dark"] .card-cta .doc-link { color: #9FA8E8; }
/* V1.26 - Gente: pilares, depoimentos, benefícios */
.pillars-grid .pillar { position: relative; padding-top: 30px; }
.pillar-n { position: absolute; top: 14px; left: 22px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; color: var(--accent); }
.pillars-grid .pillar h3 { margin-top: 6px; }
.quote-card { display: flex; flex-direction: column; }
.quote-q { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); font-weight: 700; margin-bottom: 10px; }
.quote-text { font-size: 1.05rem; line-height: 1.55; color: var(--navy); font-style: italic; margin: 0 0 14px; }
.quote-text::before { content: "\201C"; } .quote-text::after { content: "\201D"; }
.quote-who { margin-top: auto; font-size: 0.88rem; color: var(--gray); }
[data-theme="dark"] .quote-text { color: var(--ink); }
.card-soon { border-style: dashed; }
.card-soon h3 { color: var(--accent); }
@media (max-width: 1100px) { .pillars-grid { grid-template-columns: repeat(2, 1fr); } }
/* V1.26b - card do Código de Ética (Gente): link + botão */
.cta-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: 0 0 auto; }
.people-cta .cta-actions .doc-link { margin: 0; }
@media (max-width: 700px) { .cta-actions { align-items: flex-start; } }
/* V1.26c - depoimentos e pilares: texto alinhado à esquerda dentro dos boxes */
.quote-card, .quote-card *, .pillar p, .card-soon p, .decl-cat p, .card blockquote, .card .quote-who { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
/* V1.27 - Carreira organizada */
.sub-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gray); font-weight: 700; margin: 30px 0 -12px; text-align: left; }
.page-body .sub-title + .cards-grid { margin-top: 24px; }
.soon-banner { display: grid; grid-template-columns: auto 1fr; gap: 4px 28px; align-items: center; padding: 16px 22px; margin-top: 16px; }
.soon-banner h3 { margin: 0; white-space: nowrap; }
.soon-banner p { margin: 0; }
#carreira .cards-grid .card { display: flex; flex-direction: column; }
@media (max-width: 700px) { .soon-banner { grid-template-columns: 1fr; } }
/* V1.32 - dois consentimentos no formulário da home */
.form-consent + .form-consent { margin-top: 10px; }
/* V1.33 - cultura sem numeração */
.pillars-grid .pillar { padding-top: 28px; }
/* V1.35 - destinatário no formulário compacto */
.form-to { font-size: 0.86rem; color: var(--gray); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); text-align: left; }
.form-to strong { color: var(--navy); }
[data-theme="dark"] .form-to strong { color: var(--ink); }
/* V1.37 - contato da home mais baixo */
#contato.cta-final { padding: 64px 0; }
#contato .contact-form { padding: 26px 28px; }
#contato .form-row { margin-bottom: 12px; }
#contato .contact-form label { margin-bottom: 4px; }
#contato .contact-form input, #contato .contact-form select { padding-top: 9px; padding-bottom: 9px; }
#contato textarea { min-height: 84px; }
#contato .form-consent { margin-top: 8px; }
#contato .form-consent + .form-consent { margin-top: 6px; }
#contato .contact-form .btn-lg { padding: 12px 28px; margin-top: 6px; }
#contato .cta-channels { margin-top: 24px; }
#contato .cta-channel { padding: 12px 16px; }
/* V1.38 - lead do contato em duas linhas fixas */
.cta-final [data-i18n-html="cta.lead"] { text-align: left; }
/* V1.39 - contato da home: as três frases juntas */
#contato .split-text .lead { margin: 12px 0 0; }
#contato .cta-channels { margin-top: 2px; gap: 10px; }
#contato .cta-channels .cta-side-label { margin: 0 0 12px; font-size: 1.05rem; line-height: 1.6; color: #fff; font-weight: 600; text-align: left; }
/* V1.40 - Data Centers: cidade em duas colunas (texto + foto com crédito) e bloco de planos */
.dc-intro-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px; align-items: center; margin-top: 8px; }
.dc-intro-row .dc-city { margin: 0; }
.dc-photo { margin: 0; }
.dc-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; display: block; box-shadow: 0 10px 30px rgba(5,6,88,0.12); }
.dc-photo figcaption { font-size: 0.74rem; color: var(--gray); margin-top: 8px; text-align: right; }
.dc-photo figcaption a { color: var(--gray); text-decoration: underline; }
#campinas .sub-title, #queretaro .sub-title, #allende .sub-title { margin-top: 36px; }
.page-body .sub-title + .lead { margin-top: 16px; }
[data-theme="dark"] .dc-photo img { box-shadow: none; }
@media (max-width: 900px) { .dc-intro-row { grid-template-columns: 1fr; gap: 20px; } .dc-photo figcaption { text-align: left; } }
/* V1.41 - Data Centers: faixa de título, foto larga, texto em duas colunas, planos */
.dc-head-band { background: var(--bg-alt); border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; padding: 18px 24px; margin: 0; }
.dc-head-band h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.dc-banner { margin: 0; }
.dc-banner img { width: 100%; height: auto; aspect-ratio: 16 / 6; object-fit: cover; display: block; border-radius: 0; box-shadow: none; }
.dc-banner figcaption { background: var(--bg-alt); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; padding: 6px 12px; margin: 0; font-size: 0.72rem; color: var(--gray); text-align: right; }
.dc-banner figcaption a { color: var(--gray); text-decoration: underline; }
.dc-city-cols { margin-top: 26px; }
.dc-city-text { column-count: 2; column-gap: 40px; font-size: 1rem; line-height: 1.7; color: var(--ink); text-align: justify; hyphens: auto; -webkit-hyphens: auto; margin: 0; }
#campinas .sub-title, #queretaro .sub-title, #allende .sub-title { margin-top: 30px; }
#campinas .cards-grid .card, #queretaro .cards-grid .card, #allende .cards-grid .card { background: var(--bg-alt); border-color: var(--line); box-shadow: none; }
[data-theme="dark"] .dc-head-band, [data-theme="dark"] .dc-banner figcaption { background: var(--bg-alt); }
@media (max-width: 760px) { .dc-city-text { column-count: 1; } .dc-banner img { aspect-ratio: 4 / 3; } .dc-head-band { padding: 14px 16px; } }
/* V1.42 - topo das páginas internas: frase colada ao título, altura menor */
.page-hero { padding: 30px 0 26px; }
.page-hero p, .page-hero .decl-vig { margin-top: 4px; }
.page-hero .decl-entity { margin-bottom: 2px; }
.page-hero .hero-row { gap: 24px; }
/* V1.45 - Localidades: campus em prosa (2 colunas) e diferenciais da localidade */
.dc-campus-cols { column-count: 2; column-gap: 40px; margin-top: 14px; }
.dc-campus-cols .dc-city-text { column-count: auto; margin: 0 0 12px; break-inside: avoid; }
.dc-city-cols { margin-top: 14px; }
#campinas .sub-title, #queretaro .sub-title, #allende .sub-title { margin-top: 28px; }
#campinas .sub-title + .dc-city-cols, #queretaro .sub-title + .dc-city-cols, #allende .sub-title + .dc-city-cols { margin-top: 14px; }
@media (max-width: 760px) { .dc-campus-cols { column-count: 1; } }
/* V1.46 - Localidades: texto corrido em coluna única */
.dc-block { margin-top: 14px; }
.dc-prose { font-size: 1rem; line-height: 1.7; color: var(--ink); text-align: justify; hyphens: auto; -webkit-hyphens: auto; margin: 0 0 12px; }
.dc-prose:last-child { margin-bottom: 0; }
#campinas .cards-grid, #queretaro .cards-grid, #allende .cards-grid { margin-top: 14px; }
/* =====================================================================
V1.47 - DARK MODE: tudo que é azul (navy/blue) no modo claro vira branco
===================================================================== */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: #fff; }
[data-theme="dark"] a, [data-theme="dark"] .text-link, [data-theme="dark"] .investor-card h3, [data-theme="dark"] .form-feedback,
[data-theme="dark"] .priv-body .lead a, [data-theme="dark"] .decl-body a, [data-theme="dark"] .sobre-cta a, [data-theme="dark"] .card-cta .doc-link,
[data-theme="dark"] .main-nav a:hover, [data-theme="dark"] .social-toggle:hover { color: #fff; }
[data-theme="dark"] .doc-list li strong, [data-theme="dark"] .resp-list li strong, [data-theme="dark"] .decl-cat strong, [data-theme="dark"] .decl-cat h3,
[data-theme="dark"] .trust-txt h2, [data-theme="dark"] .people-certs .cert-card h2, [data-theme="dark"] .cert-flag, [data-theme="dark"] .dc-next h2,
[data-theme="dark"] .sobre-cta, [data-theme="dark"] .quote-text, [data-theme="dark"] .form-to strong, [data-theme="dark"] .metric-value,
[data-theme="dark"] .btn-ghost, [data-theme="dark"] .theme-toggle, [data-theme="dark"] .social-toggle, [data-theme="dark"] .logo { color: #fff; }
[data-theme="dark"] .btn-ghost { border-color: rgba(255,255,255,0.45); }
[data-theme="dark"] .btn-ghost:hover { border-color: #fff; }
[data-theme="dark"] .news-tag, [data-theme="dark"] .card-icon { color: #fff; background: rgba(255,255,255,0.14); }
[data-theme="dark"] .footer-lgpd, [data-theme="dark"] .site-footer a { color: #C9CDF2; }
[data-theme="dark"] .contact-form a, [data-theme="dark"] .form-consent a { color: #fff; }
/* mantém CTAs preenchidos legíveis */
[data-theme="dark"] .btn-primary { color: var(--navy); }
[data-theme="dark"] .btn-primary:hover { color: #fff; }
[data-theme="dark"] .btn-navy { color: #fff; }
/* V1.49 - Localidades: subtítulos em azul (como o título) e um pouco mais afastados do texto acima */
#campinas .sub-title, #queretaro .sub-title, #allende .sub-title { color: var(--navy); font-size: 0.86rem; letter-spacing: 0.12em; margin-top: 34px; }
[data-theme="dark"] #campinas .sub-title, [data-theme="dark"] #queretaro .sub-title, [data-theme="dark"] #allende .sub-title { color: #fff; }
/* V1.50 - Soluções no padrão de Localidades: imagem de fora a fora, texto na margem */
.sol-head-band { display: flex; align-items: center; gap: 14px; border-radius: 14px 14px 0 0; }
.sol-tag { display: inline-grid; place-items: center; min-width: 40px; height: 26px; padding: 0 10px; border-radius: 6px; background: var(--navy); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sol-credit { font-size: 0.72rem; color: var(--gray); text-align: right; margin: 6px 0 0; }
#hyperscale .lead, #cloud .lead, #ia .lead, #edge .lead { margin-top: 18px; }
.page-sections > #hyperscale + section, #cloud, #ia, #edge { }
[data-theme="dark"] .sol-tag { background: #fff; color: var(--navy); }
/* V1.51 - Localidades: selo de status na faixa do título */
.dc-head-band { position: relative; }
.dc-status { margin-left: auto; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.dc-status-dev { background: rgba(38,129,255,0.16); color: #1F6FE0; }
.dc-status-ops { background: rgba(16,150,92,0.16); color: #0E8A55; }
.dc-status-study { background: rgba(107,114,128,0.16); color: #4B5563; }
[data-theme="dark"] .dc-status-dev { background: rgba(127,180,255,0.22); color: #9FA8E8; }
[data-theme="dark"] .dc-status-ops { background: rgba(78,209,161,0.22); color: #2681FF; }
[data-theme="dark"] .dc-status-study { background: rgba(255,255,255,0.14); color: #C9CDF2; }
.dc-prose a { color: var(--blue); text-decoration: underline; }
@media (max-width: 620px) { .dc-head-band { flex-wrap: wrap; } .dc-status { margin-left: 0; } }
/* V1.52 - Soluções: faixa do título acompanha a imagem (de fora a fora), texto na margem */
.sol-banner + .sol-credit { padding: 0; }
/* V1.53 - segundo selo: EM EXPANSÃO */
.dc-head-band .dc-status + .dc-status { margin-left: 8px; }
.dc-status-exp { background: rgba(38,129,255,0.16); color: #1F6FE0; }
[data-theme="dark"] .dc-status-exp { background: rgba(127,180,255,0.22); color: #9FA8E8; }
/* V1.54 - cultura em 4 blocos */
.pillars-grid .pillar p { font-size: 0.93rem; line-height: 1.6; }
@media (max-width: 1100px) { .pillars-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pillars-grid { grid-template-columns: 1fr; } }
/* V1.55 - Soluções no modelo de Localidades (faixa + imagem dentro do container) */
.sol-banner { width: auto; margin: 0; margin-left: 0; }
.sol-banner img { height: auto; aspect-ratio: 16 / 6; }
#hyperscale .lead, #cloud .lead, #ia .lead, #edge .lead { margin-top: 20px; }
/* V1.56 - Soluções: texto de apresentação sobre a imagem */
.sol-media { position: relative; }
.sol-media img { display: block; }
.sol-overlay {
position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 48px 28px 22px;
color: #fff; font-size: clamp(0.95rem, 1.3vw, 1.12rem); line-height: 1.6; text-align: left; max-width: none;
background: linear-gradient(to top, rgba(3,4,58,0.92) 0%, rgba(3,4,58,0.66) 55%, rgba(3,4,58,0) 100%);
}
@media (max-width: 760px) { .sol-overlay { padding: 36px 18px 16px; font-size: 0.92rem; } }
/* V1.58 - Localidades: espaço do subtítulo até o conteúdo igual ao espaço entre os blocos (18px visuais) */
#campinas .sub-title + .cards-grid, #queretaro .sub-title + .cards-grid, #allende .sub-title + .cards-grid,
#campinas .sub-title + .dc-block, #queretaro .sub-title + .dc-block, #allende .sub-title + .dc-block { margin-top: 30px; }
/* V1.62 - bloco de certificação TIA-942 (Localidades) */
.tia-block { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; margin-top: 30px; padding: 20px 24px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; background: var(--bg-alt); }
.tia-badge { display: grid; place-items: center; gap: 2px; padding: 12px 18px; border-radius: 10px; background: var(--navy); color: #fff; text-align: center; }
.tia-badge span { font: 800 1.05rem/1 var(--font); letter-spacing: 0.04em; }
.tia-badge small { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; color: #BFD8FF; }
.tia-text h3 { font-size: 1.05rem; margin: 0 0 6px; }
.tia-text p { font-size: 0.93rem; line-height: 1.6; color: var(--ink); margin: 0; text-align: left; }
.tia-meta { margin-top: 8px !important; font-size: 0.85rem !important; color: var(--gray) !important; }
.tia-text a { color: var(--blue); text-decoration: underline; }
[data-theme="dark"] .tia-badge { background: #fff; color: var(--navy); }
[data-theme="dark"] .tia-badge small { color: var(--blue); }
[data-theme="dark"] .tia-text a { color: #fff; }
@media (max-width: 620px) { .tia-block { grid-template-columns: 1fr; } }
/* V1.63 - selo TIA-942 com a logo */
.tia-badge { background: #fff; color: #111; border: 1px solid var(--line); padding: 14px 18px 10px; min-width: 190px; }
.tia-logo { width: 150px; height: auto; display: block; }
.tia-badge small { color: var(--navy); letter-spacing: 0.08em; margin-top: 6px; }
[data-theme="dark"] .tia-badge { background: #fff; color: #111; border-color: transparent; }
[data-theme="dark"] .tia-badge small { color: var(--navy); }
@media (max-width: 620px) { .tia-badge { justify-self: start; } }
/* V1.65 - item do menu da página atual (destaque leve) */
.main-nav a.is-current { background: rgba(5,6,88,0.06); color: var(--navy); font-weight: 600; }
.main-nav a.is-current:hover { background: rgba(5,6,88,0.09); }
[data-theme="dark"] .main-nav a.is-current { background: rgba(127,180,255,0.16); color: #fff; }
[data-theme="dark"] .main-nav a.is-current:hover { background: rgba(127,180,255,0.22); }
/* V1.67 - header estável em qualquer idioma: logo com espaço reservado e respiro antes do CTA */
.site-header .logo-img { width: 244px; height: 26px; object-fit: contain; object-position: left center; }
.site-header .logo { flex: 0 0 auto; min-width: 244px; }
.header-actions { gap: 10px; }
.header-actions .lang-switch { margin-right: 6px; }
.lang-switch button.active { border-radius: 6px; }
@media (max-width: 1080px) { .site-header .logo-img { width: 200px; } .site-header .logo { min-width: 200px; } }
@media (max-width: 620px) { .site-header .logo-img { width: 168px; } .site-header .logo { min-width: 168px; } }
/* V1.68 - header cabe nos três idiomas (ES é o mais largo) */
.header-inner { column-gap: clamp(14px, 1.8vw, 26px); }
.main-nav { margin-left: 0; min-width: 0; }
.main-nav > ul { gap: 2px; }
.main-nav a { padding: 10px 9px; font-size: 0.9rem; }
@media (max-width: 1180px) { .main-nav a { padding: 10px 7px; font-size: 0.875rem; } }
@media (max-width: 1120px) {
.main-nav { position: absolute; top: 72px; left: 0; right: 0; display: none; background: #fff; border-bottom: 1px solid var(--line); padding: 8px 24px 16px; }
.main-nav.open { display: block; }
.main-nav > ul { flex-direction: column; gap: 2px; }
.nav-toggle { display: block; }
}
/* V1.69 - logo TIA-942 na faixa do título e selo do bloco sem fundo branco */
.dc-tia-mark { height: 26px; width: auto; margin-left: auto; color: var(--navy); }
.dc-head-band .dc-tia-mark + .dc-status { margin-left: 14px; }
[data-theme="dark"] .dc-tia-mark { color: #fff; }
.tia-badge { background: transparent; border: 0; padding: 0 8px 0 0; min-width: 170px; color: var(--navy); }
.tia-logo { width: 158px; }
.tia-badge small { color: var(--gray); }
[data-theme="dark"] .tia-badge { background: transparent; color: #fff; }
[data-theme="dark"] .tia-badge small { color: var(--gray); }
@media (max-width: 760px) { .dc-tia-mark { height: 22px; } }
/* V1.70 - bloco TIA-942 compacto (sem logo interno) */
.tia-block { grid-template-columns: 1fr; gap: 0; padding: 16px 20px; margin-top: 26px; }
.tia-text h3 { font-size: 1rem; margin-bottom: 4px; }
.tia-text p { font-size: 0.9rem; line-height: 1.55; }
.tia-meta { margin-top: 6px !important; font-size: 0.82rem !important; }
/* ==========================================================================
V1.71 (02/10/2026) - legenda de status no mapa, selo colorido e linha de
fechamento da secao Nossos canais.
========================================================================== */
.map-legend {
list-style: none; margin: 18px 0 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 10px 22px;
font-size: 0.8rem; color: #CFE0FF;
}
.map-legend li { display: flex; align-items: center; gap: 7px; }
.ml-dot { width: 9px; height: 9px; border-radius: 999px; flex: 0 0 auto; }
.ml-dot.is-ok { background: #4ED1A1; }
.ml-dot.is-exp { background: #8FE3C4; }
.ml-dot.is-dev { background: #2681FF; }
.ml-dot.is-est { background: #8D96AE; }
.mc-status.is-ok { background: rgba(78, 209, 161, 0.20); color: #9FF0D3; }
.mc-status.is-exp { background: rgba(143, 227, 196, 0.18); color: #BFF2DF; }
.mc-status.is-dev { background: rgba(38, 129, 255, 0.22); color: #CFE0FF; }
.mc-status.is-est { background: rgba(141, 150, 174, 0.22); color: #DCE1EC; }
.gov-close { margin-top: 22px; font-weight: 600; color: var(--navy); }
[data-theme="dark"] .gov-close { color: #FFFFFF; }
@media (max-width: 620px) { .map-legend { gap: 8px 16px; font-size: 0.75rem; } }
/* ==========================================================================
V1.77 - Localidades em faixas de fora a fora: foto de um lado, ficha tecnica
do outro, alternando a cada localidade.
========================================================================== */
.loc-split {
display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
border-top: 1px solid var(--line);
}
.loc-split .dc-photo { margin: 0; position: relative; min-height: 560px; }
.loc-split .dc-photo img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; display: block; }
.loc-split .dc-photo figcaption {
position: absolute; left: 0; bottom: 0; margin: 0; padding: 6px 14px;
background: rgba(5,6,88,.62); color: #C9CDF2; font-size: .68rem; border-radius: 0 8px 0 0;
}
.loc-split .dc-photo figcaption a { color: rgba(255,255,255,.92); }
.ls-texto { padding: 60px 56px; }
.loc-split.is-inv .dc-photo { order: 2; }
.loc-split.is-inv .ls-texto { order: 1; padding-left: max(24px, calc((100vw - 1200px) / 2)); }
.loc-split:not(.is-inv) .ls-texto { padding-right: max(24px, calc((100vw - 1200px) / 2)); }
.ls-texto, .ls-texto p, .ls-texto li, .ls-dif span { text-align: left; }
.ls-cid { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.ls-cid h2 { margin: 0; font-size: 1.85rem; }
.ls-cid .flag { width: 26px; height: 19px; flex: 0 0 auto; }
.ls-cid .flag svg { width: 100%; height: 100%; border-radius: 3px; }
.ls-nums {
display: flex; flex-wrap: wrap; gap: 18px 32px;
padding: 20px 0; margin: 0 0 6px;
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ln-item .ln-rot {
display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
font-weight: 700; color: var(--gray); margin-bottom: 6px;
}
.ln-val { font-size: 1.7rem; font-weight: 700; color: var(--navy); line-height: 1; letter-spacing: -.02em; }
.ln-val small { font-size: .72rem; font-weight: 600; color: var(--gray); letter-spacing: 0; }
.ln-val.is-txt { font-size: 1.02rem; letter-spacing: 0; }
[data-theme=dark] .ln-val { color: #fff; }
.ls-texto .sub-title { margin: 24px 0 10px; }
.ls-texto .dc-prose { margin: 0 0 4px; }
.ls-dif { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; }
.ls-dif b { display: block; color: var(--navy); font-size: .92rem; margin-bottom: 3px; }
.ls-dif span { color: var(--gray); font-size: .87rem; }
[data-theme=dark] .ls-dif b { color: #fff; }
.ls-texto .tia-block { margin: 22px 0 0; }
.loc-fecho { text-align: center; padding: 84px 0; border-top: 1px solid var(--line); }
.loc-fecho, .loc-fecho h2, .loc-fecho p { text-align: center; }
.loc-fecho h2 { margin: 0 0 8px; }
.loc-fecho p { margin: 0; color: var(--gray); }
@media (max-width: 900px) {
.loc-split { grid-template-columns: 1fr; }
.loc-split .dc-photo, .loc-split .dc-photo img { min-height: 300px; }
.loc-split.is-inv .dc-photo { order: 0; }
.loc-split .ls-texto, .loc-split.is-inv .ls-texto, .loc-split:not(.is-inv) .ls-texto {
order: 1; padding: 40px max(24px, calc((100vw - 1200px) / 2));
}
}
@media (max-width: 620px) {
.ls-dif { grid-template-columns: 1fr; }
.ls-nums { gap: 16px 24px; }
.ln-val { font-size: 1.5rem; }
}
/* ==========================================================================
V1.78 - Solucoes com o mesmo jogo de Localidades: faixa de fora a fora,
imagem de um lado e informacao do outro, alternando.
========================================================================== */
.sol-split .sol-tag {
display: inline-block; background: var(--navy); color: #fff;
font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
padding: 4px 10px; border-radius: 6px;
}
[data-theme="dark"] .sol-split .sol-tag { background: var(--accent); }
.sol-split .ls-cid { margin-bottom: 16px; }
.sol-split .ls-cid h2 { font-size: 1.8rem; }
.sol-lead {
font-size: 1.06rem; color: var(--ink); margin: 0 0 24px;
padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
[data-theme="dark"] .sol-lead { color: #C9CDF2; }
.sol-split .dc-photo figcaption {
position: absolute; left: 0; bottom: 0; margin: 0; padding: 6px 14px;
background: rgba(5,6,88,.62); color: #C9CDF2;
font-size: .68rem; border-radius: 0 8px 0 0;
}
/* ==========================================================================
V1.80 - Localidades: nome, selos e numeros sobre a imagem. A coluna de texto
fica so com Contexto, Infraestrutura e Diferenciais, e a faixa encolhe.
========================================================================== */
.loc-split .dc-photo, .loc-split .dc-photo img { min-height: 480px; }
.ls-dados {
position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
justify-content: flex-end; padding: 36px 40px 46px;
background: linear-gradient(180deg, rgba(5,6,88,0) 28%, rgba(5,6,88,.42) 56%, rgba(5,6,88,.88) 100%);
}
.ls-dados .ls-cid { margin-bottom: 14px; }
.ls-dados .ls-cid h2 { color: #fff; font-size: 1.8rem; }
.ls-dados .dc-status {
background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(175,203,255,.45);
}
.ls-dados .dc-tia-mark { filter: brightness(0) invert(1); opacity: .94; height: 24px; }
.ls-dados .ls-nums {
border-top: 1px solid rgba(255,255,255,.28); border-bottom: 0;
padding: 16px 0 0; margin: 0; gap: 14px 30px;
}
.ls-dados .ln-rot { color: #BFD3FF; }
.ls-dados .ln-val { color: #fff; font-size: 1.5rem; }
.ls-dados .ln-val small { color: #C9CDF2; }
.ls-dados .ln-val.is-txt { font-size: .98rem; }
.loc-split .dc-photo figcaption { z-index: 3; }
@media (max-width: 1180px) {
.ls-dados { padding: 28px 28px 40px; }
.ls-dados .ls-cid h2 { font-size: 1.5rem; }
.ls-dados .ln-val { font-size: 1.3rem; }
}
@media (max-width: 900px) {
.loc-split .dc-photo, .loc-split .dc-photo img { min-height: 420px; }
}
@media (max-width: 620px) {
.ls-dados { padding: 24px 20px 36px; }
.ls-dados .ls-nums { gap: 12px 20px; }
.ls-dados .ln-val { font-size: 1.2rem; }
}
/* V1.80a - a legenda da imagem nao encosta nos numeros */
.ls-dados { padding-bottom: 62px; }
@media (max-width: 620px) { .ls-dados { padding-bottom: 52px; } }
/* V1.80b - o selo TIA e um ![]()
dentro do : a regra da foto (100% x 100%,
min-height 480) estava pegando ele tambem e ele tomava a imagem inteira. */
.loc-split .dc-photo img { width: 100%; height: 100%; min-height: 480px; object-fit: cover; display: block; }
.loc-split .dc-photo .ls-dados img,
.loc-split .dc-photo img.dc-tia-mark {
width: auto; height: 24px; min-height: 0; object-fit: contain; display: inline-block;
margin-left: 6px; flex: 0 0 auto;
}
.ls-dados .ls-cid .dc-status { margin-left: 0; }
.ls-dados .ls-cid .dc-status:first-of-type { margin-left: auto; }
.ls-dados .ls-cid .dc-status + .dc-status { margin-left: 8px; }
/* V1.80c - amarracao entre imagem e texto: a coluna de texto abre com a bandeira
e o nome da cidade, e ganha uma linha de destaque na borda que encosta na foto. */
.ls-kicker {
display: flex; align-items: center; gap: 10px; margin: 0 0 22px;
font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
font-weight: 700; color: var(--accent);
}
.ls-kicker .flag { width: 22px; height: 16px; flex: 0 0 auto; }
.ls-kicker .flag svg { width: 100%; height: 100%; border-radius: 3px; }
.ls-texto .sub-title { font-size: .72rem; }
.loc-split:not(.is-inv) .ls-texto { border-left: 3px solid var(--accent); }
.loc-split.is-inv .ls-texto { border-right: 3px solid var(--accent); }
[data-theme="dark"] .ls-kicker { color: #9FA8E8; }
@media (max-width: 900px) {
.loc-split:not(.is-inv) .ls-texto, .loc-split.is-inv .ls-texto {
border-left: 0; border-right: 0; border-top: 3px solid var(--accent);
}
}
/* ==========================================================================
V1.81 - Localidades e Solucoes mais leves. Mesma estrutura, menos peso:
rotulos em caixa baixa, sem barras azuis, degrade mais suave sobre a foto,
diferenciais em uma coluna corrida e bloco da TIA sem caixa.
========================================================================== */
/* rotulos: de caixa alta espacada para texto normal, em navy */
.ls-texto .sub-title {
text-transform: none; letter-spacing: 0; font-size: .96rem; font-weight: 600;
color: var(--navy); margin: 28px 0 8px;
}
.ls-texto .sub-title:first-of-type { margin-top: 0; }
[data-theme="dark"] .ls-texto .sub-title { color: #fff; }
/* a amarracao com a foto fica so no nome, discreto */
.ls-kicker {
text-transform: none; letter-spacing: 0; font-size: .92rem; font-weight: 600;
color: var(--gray); margin: 0 0 26px;
}
.ls-kicker .flag { width: 20px; height: 14px; }
.loc-split:not(.is-inv) .ls-texto, .loc-split.is-inv .ls-texto { border: 0; }
@media (max-width: 900px) {
.loc-split:not(.is-inv) .ls-texto, .loc-split.is-inv .ls-texto { border: 0; }
}
/* diferenciais: uma coluna, titulo corrido na frase */
.ls-dif { grid-template-columns: 1fr; gap: 10px; }
.ls-dif li { line-height: 1.6; }
.ls-dif b { display: inline; color: var(--ink); font-weight: 600; font-size: .92rem; }
.ls-dif b::after { content: ". "; }
.ls-dif span { font-size: .92rem; color: var(--gray); }
[data-theme="dark"] .ls-dif b { color: #fff; }
/* sobre a foto: degrade mais baixo e rotulos menores */
.ls-dados {
background: linear-gradient(180deg, rgba(5,6,88,0) 42%, rgba(5,6,88,.32) 66%, rgba(5,6,88,.80) 100%);
}
.ls-dados .ls-cid { margin-bottom: 10px; }
.ls-dados .ls-cid h2 { font-size: 1.55rem; font-weight: 600; }
.ls-dados .ls-nums { border-top: 1px solid rgba(255,255,255,.2); padding-top: 12px; gap: 10px 26px; }
.ls-dados .ln-rot { font-size: .6rem; color: rgba(255,255,255,.68); letter-spacing: .1em; margin-bottom: 4px; }
.ls-dados .ln-val { font-size: 1.3rem; }
.ls-dados .ln-val.is-txt { font-size: .9rem; font-weight: 600; }
.ls-dados .dc-status { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); font-size: .6rem; }
/* certificacao: texto, nao caixa */
.ls-texto .tia-block {
background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0;
padding: 20px 0 0; margin: 26px 0 0;
}
.ls-texto .tia-block h3 { font-size: .96rem; font-weight: 600; color: var(--navy); margin: 0 0 8px; }
[data-theme="dark"] .ls-texto .tia-block h3 { color: #fff; }
/* texto corrido um pouco mais arejado */
.ls-texto { padding: 64px 64px; }
.ls-texto .dc-prose { font-size: .97rem; line-height: 1.7; color: var(--ink); }
[data-theme="dark"] .ls-texto .dc-prose { color: #C9CDF2; }
/* Solucoes: a frase de abertura sem a linha embaixo */
.sol-lead { border-bottom: 0; padding-bottom: 0; margin-bottom: 20px; font-size: 1.02rem; }
.sol-split .ls-cid h2 { font-size: 1.6rem; font-weight: 600; }
.sol-split .sol-tag { background: var(--bg-alt); color: var(--navy); border: 1px solid var(--line); }
[data-theme="dark"] .sol-split .sol-tag { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2); }
@media (max-width: 900px) { .ls-texto { padding: 40px max(24px, calc((100vw - 1200px) / 2)); } }
/* ==========================================================================
V1.88 - Hero com foto (Localidades) e bloco "Nossos campi" na home.
========================================================================== */
.page-hero.has-img { position: relative; overflow: hidden; background: var(--navy); padding: 112px 0 92px; }
.page-hero.has-img .ph-img {
position: absolute; inset: 0;
background-position: center 42%; background-size: cover; background-repeat: no-repeat; opacity: .6;
}
.page-hero.has-img::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(5,6,88,.94) 0%, rgba(5,6,88,.78) 48%, rgba(5,6,88,.38) 100%);
}
.page-hero.has-img .container { position: relative; z-index: 1; }
.page-hero.has-img p { color: #C9CDF2; }
.page-hero .ph-src {
position: absolute; right: 18px; bottom: 10px; z-index: 1;
font-size: .68rem; color: #C9CDF2; letter-spacing: .02em;
}
@media (max-width: 900px) { .page-hero.has-img { padding: 72px 0 60px; } }
.campi-card { display: flex; flex-direction: column; gap: 16px; text-decoration: none; color: inherit; }
.campi-card:hover { border-color: var(--accent); }
.cc-kicker { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--navy); }
.cc-kicker .flag { display: inline-flex; }
.cc-kicker .flag svg { width: 22px; height: 16px; border-radius: 3px; }
.cc-nums { display: grid; gap: 12px; }
.cc-nums .ln-item { display: flex; flex-direction: column; gap: 2px; }
.cc-nums .ln-rot { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gray); }
.cc-nums .ln-val { font-size: 1.3rem; font-weight: 700; color: var(--navy); line-height: 1.15; }
.cc-nums .ln-val small { font-size: .74rem; font-weight: 600; color: var(--gray); margin-left: 2px; }
.cc-nums .ln-val.is-txt { font-size: .95rem; font-weight: 600; }
.cc-more { margin-top: auto; color: var(--accent); font-weight: 600; font-size: .9rem; }
.cc-more::after { content: " \2192"; }
.campi-cta { margin-top: 36px; }
[data-theme="dark"] .cc-kicker, [data-theme="dark"] .cc-nums .ln-val { color: #C9CDF2; }
/* V1.88b - "Nossos campi" dentro da secao do mapa (fundo escuro) */
.campi-sub { margin: 40px 0 0; font-size: 1.05rem; font-weight: 600; color: rgba(255,255,255,.9); }
.section-dark .campi-grid { margin-top: 20px; align-items: start; }
.section-dark .campi-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); box-shadow: none; }
.section-dark .campi-card:hover { border-color: rgba(191,211,255,.7); background: rgba(255,255,255,.08); }
.section-dark .cc-kicker { color: #fff; }
.section-dark .cc-nums .ln-rot { color: rgba(255,255,255,.62); }
.section-dark .cc-nums .ln-val { color: #fff; }
.section-dark .cc-nums .ln-val small { color: #C9CDF2; }
.section-dark .cc-more { color: #BFD3FF; margin-top: 8px; }
.section-dark .campi-cta { margin-top: 28px; }
.section-dark .campi-cta .btn { margin-top: 0; }
/* ==========================================================================
V1.89 - Mapa da home: MW IT por fase dentro do balao. Sem os cards abaixo.
========================================================================== */
.map-callout { max-width: 270px; }
.mc-cap { display: flex; align-items: baseline; gap: 5px; margin: 10px 0 3px; color: #fff; }
.mc-cap .mc-num { font-size: 1.55rem; font-weight: 800; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.mc-cap small, .mc-ph small { font-size: .62rem; font-weight: 700; color: #7FB4FF; letter-spacing: .08em; }
.mc-caps { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0 5px; }
.mc-ph { display: flex; flex-direction: column; }
.mc-ph b { font-size: 1.15rem; font-weight: 800; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.mc-ph b small { margin-left: 3px; }
.mc-ph i { font-style: normal; font-size: .58rem; font-weight: 600; color: rgba(255,255,255,.62); text-transform: uppercase; letter-spacing: .07em; margin-top: 4px; }
.campi-sub, .campi-grid, .campi-card { display: none; }
/* ==========================================================================
V1.90 - Solucoes por modelo de contratacao; landing por campus; mapa compacto.
========================================================================== */
.sol-abre { padding: 56px 0 8px; }
.sol-abre p { max-width: 76ch; font-size: 1.08rem; line-height: 1.7; color: var(--ink); margin: 0; }
[data-theme="dark"] .sol-abre p { color: #C9CDF2; }
.sol-split .sol-tag { min-width: 36px; text-align: center; }
.ls-cta { margin: 28px 0 0; }
.ls-cta .btn { margin-top: 0; }
.form-campus { margin-bottom: 14px; }
/* mapa: fases de San Miguel lado a lado, balao mais baixo */
.mc-caps { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 14px; margin: 10px 0 5px; }
.mc-ph b { font-size: 1.05rem; }
.mc-ph i { font-size: .52rem; margin-top: 3px; }
/* ==========================================================================
V1.91 - Adequacao ao Design System TERRANOVA (manual v1.0). Hero da home intocado.
========================================================================== */
/* tipografia: titulos e numeros em Light, enfase em Semibold; sem italico */
h1, h2 { font-weight: 300; letter-spacing: -0.02em; }
h3, h4 { font-weight: 600; }
.page-hero h1 { font-weight: 300; }
.hero h1 { font-weight: 700; } /* hero da home mantido */
.quote-text { font-style: normal; }
.mc-cap .mc-num, .mc-ph b, .ls-dados .ln-val, .cc-nums .ln-val { font-weight: 300; }
.mc-cap small, .mc-ph small, .ls-dados .ln-val small { font-weight: 600; }
/* rotulo: Azul Energia sobre claro, Azul Luz sobre escuro, traco curto acima */
.kicker { color: var(--blue); letter-spacing: 4px; font-size: 0.78rem; }
.kicker::before { content: ""; display: block; width: 48px; height: 4px; background: var(--accent); margin-bottom: 12px; }
.kicker-light, .section-dark .kicker { color: var(--accent); }
.ls-kicker { color: var(--gray); }
/* alinhamento a esquerda */
.loc-fecho, .loc-fecho h2, .loc-fecho p, .cert-country, .cert-country *, .trust-strip, .dc-next h2, .dc-next-sub { text-align: left; }
.loc-fecho p, .dc-next-sub { margin-left: 0; }
.cert-country { align-items: flex-start; }
/* cor chapada: sem gradiente, sombra ou desfoque fora do hero */
.page-hero, .cta-final, .section-dark, .site-footer { background: var(--navy); }
.site-header { box-shadow: none; border-bottom: 1px solid var(--line); }
main :not(.hero):not(.hero *), .site-footer * { box-shadow: none; }
.card, .quote-card, .investor-card, .news-card, .diff-card, .energy-card { box-shadow: none; border: 1px solid var(--line); }
.map-callout { background: var(--navy-2); backdrop-filter: none; box-shadow: none; border: 1px solid rgba(255,255,255,.18); }
.map-callout:hover { border-color: var(--accent); transform: none; }
.mc-status { border-radius: 0; }
.mc-status.is-ok { background: var(--accent); color: var(--navy); }
.mc-status.is-exp { background: var(--blue); color: #fff; }
.mc-status.is-dev { background: transparent; color: #C9CDF2; border: 1px solid #9FA8E8; }
.mc-status.is-est { background: transparent; color: #9FA8E8; border: 1px solid #7F88E0; }
.ml-dot.is-ok { background: var(--accent); } .ml-dot.is-exp { background: var(--blue); }
.ml-dot.is-dev { background: transparent; border: 1px solid #9FA8E8; } .ml-dot.is-est { background: #7F88E0; }
.stp-bar-tn { background: var(--accent); }
/* cantos retos, como nos modelos do manual */
.btn, .card, .map-callout, .dc-status, .sol-tag, .tia-badge, .quote-card, .campi-card,
input, select, textarea, .cookie-banner, .form-row input, .nav-pill, .lang-switch, .lang-switch a, .lang-switch button { border-radius: 0; }
.ls-dados .dc-status, .mc-status, .lang-switch * { border-radius: 0 !important; }
/* Localidades e Solucoes: foto com corte do Λ, dados em bloco chapado ao lado */
.loc-split .dc-photo, .loc-split .dc-photo img { min-height: 440px; }
.loc-split:not(.is-inv) .dc-photo { clip-path: polygon(0 0, 100% 0, calc(100% - 64px) 100%, 0 100%); }
.loc-split.is-inv .dc-photo { clip-path: polygon(64px 0, 100% 0, 100% 100%, 0 100%); }
.loc-split .dc-photo::after, .loc-split .dc-photo::before { display: none; }
.ls-dados {
position: static; inset: auto; display: block; z-index: auto;
background: var(--navy); color: #fff; padding: 28px 32px 26px; margin: -64px -64px 32px;
}
.ls-dados .ls-cid { margin-bottom: 14px; }
.ls-dados .ls-cid h2 { color: #fff; font-size: 1.7rem; font-weight: 300; }
.ls-dados .ls-nums { border-top: 1px solid rgba(255,255,255,.22); padding-top: 14px; margin: 0; }
.ls-dados .ln-rot { color: #9FA8E8; } .ls-dados .ln-val { color: #fff; } .ls-dados .ln-val small { color: #C9CDF2; }
.loc-split .dc-photo figcaption { background: var(--navy); color: #C9CDF2; border-radius: 0; }
@media (max-width: 1180px) { .ls-dados { margin: -48px -48px 28px; } }
@media (max-width: 900px) {
.loc-split .dc-photo, .loc-split.is-inv .dc-photo, .loc-split:not(.is-inv) .dc-photo { clip-path: none; }
.loc-split .dc-photo, .loc-split .dc-photo img { min-height: 320px; }
.ls-dados { margin: -28px -24px 24px; padding: 22px 24px; }
}
/* hero de Localidades: texto em Azul Noite a esquerda, foto a direita com corte */
.page-hero.has-img { padding: 96px 0 84px; }
.page-hero.has-img::after { display: none; }
.page-hero.has-img .ph-img { left: auto; right: 0; width: 46%; opacity: 1; clip-path: polygon(72px 0, 100% 0, 100% 100%, 0 100%); }
.page-hero.has-img .container { max-width: var(--container); }
.page-hero.has-img h1, .page-hero.has-img p { max-width: 48%; }
@media (max-width: 900px) {
.page-hero.has-img .ph-img { position: relative; width: 100%; height: 220px; clip-path: none; margin-top: 28px; }
.page-hero.has-img h1, .page-hero.has-img p { max-width: none; }
.page-hero.has-img { padding: 56px 0 0; }
.page-hero .ph-src { position: static; display: block; padding: 6px 24px 10px; background: var(--navy); }
}
/* elementos fixos: barra de marca e linha de cores */
.site-footer .footer-brand .logo { display: none; }
.brand-bar { background: var(--navy-2); }
.brand-bar-in { display: flex; align-items: center; justify-content: space-between; height: 58px; }
.brand-bar-logo { height: 20px; width: auto; }
.brand-bar-site { color: #fff; font-weight: 600; font-size: .9rem; letter-spacing: .02em; }
.linha-cores { display: grid; grid-template-columns: 3fr 2fr 1.4fr 1fr; height: 8px; }
.linha-cores i:nth-child(1) { background: #050658; } .linha-cores i:nth-child(2) { background: #0D078C; }
.linha-cores i:nth-child(3) { background: #0019D1; } .linha-cores i:nth-child(4) { background: #2681FF; }
.footer-bottom { border-bottom: 0; }
/* GPTW: selos originais por idioma */
.gptw-badge-img { height: 150px; width: auto; }
/* V1.91b - newsletter e formularios sem canto redondo; cards da home em 4 colunas */
.site-footer input, .site-footer button, .nl-form input, .nl-form .btn, .contact-form input,
.contact-form select, .contact-form textarea, .contact-form .btn, .cookie-banner .btn { border-radius: 0; }
/* V1.93 - faixa invertida: corte do Λ reto no topo (onde o bloco de dados encosta) e cunha embaixo */
.loc-split.is-inv .dc-photo { clip-path: polygon(0 0, 100% 0, 100% 100%, 64px 100%); }
.ls-dados { margin: -60px -56px 32px; }
@media (max-width: 900px) { .loc-split.is-inv .dc-photo { clip-path: none; } }
/* V1.94 - texto de abertura de Solucoes ocupa a faixa toda; sem justificado (manual); GPTW volta
centralizado nos cards (pedido do Pedro); legenda da foto invertida sai da cunha do corte */
.sol-abre { padding: 56px 0 12px; }
.sol-abre p { max-width: none; }
.dc-prose, .dc-city-text, .sol-abre p, .page-body p, .ls-texto p, .lead, .sol-lead { text-align: left; hyphens: manual; -webkit-hyphens: manual; text-justify: auto; }
.cert-country { align-items: center; }
.cert-country, .cert-country * { text-align: center; }
.loc-split.is-inv .dc-photo figcaption { left: auto; right: 0; border-radius: 0; }
/* V1.96 - baloes do mapa: cartao branco com faixa superior Azul Luz (modelo do manual), mais leve,
posicionado sobre o oceano, sem sobrepor terra, pinos ou outro balao */
.map-callout {
background: #fff; border: 1px solid #DCDFEA; border-top: 4px solid var(--accent);
padding: 14px 18px 14px; width: 30%; min-width: 190px; max-width: 250px;
}
.map-callout:hover { border-color: #DCDFEA; border-top-color: var(--blue); }
.mc-city { color: var(--navy); font-size: .98rem; font-weight: 600; }
.mc-country { color: var(--blue); font-size: .64rem; letter-spacing: 3px; }
.mc-status { font-size: .62rem; padding: 2px 8px; }
.mc-status.is-ok { background: var(--accent); color: var(--navy); border: 0; }
.mc-status.is-exp { background: var(--blue); color: #fff; border: 0; }
.mc-status.is-dev { background: transparent; color: var(--blue); border: 1px solid var(--blue); }
.mc-status.is-est { background: transparent; color: var(--gray); border: 1px solid #DCDFEA; }
.mc-cap, .mc-cap .mc-num, .mc-ph b { color: var(--navy); }
.mc-cap .mc-num { font-size: 1.45rem; }
.mc-cap small, .mc-ph small { color: var(--blue); }
.mc-ph i { color: var(--gray); }
.mc-sol { color: var(--ink); font-size: .78rem; }
.tn-leaders path { stroke: rgba(255,255,255,.55); }
.tn-leaders circle { fill: #fff; }
@media (max-width: 760px) { .map-callout { border-top-width: 4px; } }
/* V1.97 - mapa a esquerda, tres cartoes equidistantes numa coluna a direita; cartao translucido e fino */
.tn-map { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: center; max-width: 1120px; }
.tn-map svg { grid-column: 1; }
.tn-map-callouts { position: static; grid-column: 2; display: flex; flex-direction: column; justify-content: center; gap: 28px; pointer-events: auto; }
.tn-leaders { display: none; }
.map-callout {
position: static !important; width: 100%; min-width: 0; max-width: none;
background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.2); border-top: 1px solid rgba(255,255,255,.2);
padding: 18px 20px 16px; backdrop-filter: none; box-shadow: none; transition: border-color .2s, background .2s;
}
.map-callout:hover { border-color: rgba(191,211,255,.6); border-top-color: rgba(191,211,255,.6); background: rgba(255,255,255,.07); }
.mc-city { color: #fff; font-weight: 600; font-size: 1rem; }
.mc-country { color: #9FA8E8; font-size: .62rem; letter-spacing: 3px; }
.mc-status { font-size: .6rem; padding: 2px 8px; letter-spacing: .02em; }
.mc-status.is-ok { background: var(--accent); color: var(--navy); border: 0; }
.mc-status.is-exp { background: transparent; color: #BFD3FF; border: 1px solid rgba(191,211,255,.6); }
.mc-status.is-dev { background: transparent; color: #C9CDF2; border: 1px solid rgba(255,255,255,.35); }
.mc-status.is-est { background: transparent; color: #9FA8E8; border: 1px solid rgba(255,255,255,.25); }
.mc-cap, .mc-cap .mc-num, .mc-ph b { color: #fff; }
.mc-cap .mc-num { font-size: 1.5rem; font-weight: 300; }
.mc-cap small, .mc-ph small { color: #7FB4FF; }
.mc-ph i { color: rgba(255,255,255,.55); }
.mc-sol { color: #C9CDF2; font-size: .78rem; }
.tn-pin.is-hot circle:first-child { animation: none; transform: scale(1.5); opacity: .95; }
.tn-pin.is-hot circle:last-child { fill: #fff; stroke: var(--accent); }
@media (max-width: 900px) { .tn-map { grid-template-columns: 1fr; gap: 24px; } .tn-map-callouts { grid-column: 1; } }
/* V1.98 - Localidades: a foto avanca para o lado do texto e se desfaz em degrade na diagonal do
corte; no hero a foto cobre a faixa toda e o titulo passa sobre ela ate a borda oposta.
Solucoes (.sol-split) continua com o corte reto. */
.loc-split:not(.sol-split) { position: relative; min-height: 460px; }
.loc-split:not(.sol-split) .dc-photo {
position: absolute; top: 0; bottom: 0; left: 0; width: 68%; margin: 0; min-height: 0;
clip-path: none !important;
-webkit-mask-image: linear-gradient(98deg, #000 0%, #000 68%, rgba(0,0,0,.45) 78%, transparent 92%);
mask-image: linear-gradient(98deg, #000 0%, #000 68%, rgba(0,0,0,.45) 78%, transparent 92%);
}
.loc-split.is-inv:not(.sol-split) .dc-photo {
left: auto; right: 0;
-webkit-mask-image: linear-gradient(262deg, #000 0%, #000 68%, rgba(0,0,0,.45) 78%, transparent 92%);
mask-image: linear-gradient(262deg, #000 0%, #000 68%, rgba(0,0,0,.45) 78%, transparent 92%);
}
.loc-split:not(.sol-split) .dc-photo img { height: 100%; min-height: 0; object-fit: cover; }
.loc-split:not(.sol-split) .ls-texto { position: relative; z-index: 1; }
.loc-split:not(.sol-split) .dc-photo figcaption { z-index: 2; }
/* hero de Localidades: mantido no formato anterior (texto a esquerda, foto a direita com corte) */
@media (max-width: 900px) {
.loc-split:not(.sol-split) { min-height: 0; }
.loc-split:not(.sol-split) .dc-photo { position: relative; width: 100%; -webkit-mask-image: none; mask-image: none; }
.loc-split:not(.sol-split) .dc-photo img { min-height: 320px; }
}
/* V2.00 - legibilidade: a foto avanca menos (62% da faixa) e se desfaz ate 58%; a coluna de texto
recebe um veu branco que comeca transparente na diagonal e fica solido antes do texto */
.loc-split:not(.sol-split) .dc-photo { width: 62%; }
.loc-split:not(.sol-split) .dc-photo,
.loc-split.is-inv:not(.sol-split) .dc-photo {
-webkit-mask-image: linear-gradient(98deg, #000 0%, #000 70%, rgba(0,0,0,.5) 82%, transparent 94%);
mask-image: linear-gradient(98deg, #000 0%, #000 70%, rgba(0,0,0,.5) 82%, transparent 94%);
}
.loc-split.is-inv:not(.sol-split) .dc-photo {
-webkit-mask-image: linear-gradient(262deg, #000 0%, #000 70%, rgba(0,0,0,.5) 82%, transparent 94%);
mask-image: linear-gradient(262deg, #000 0%, #000 70%, rgba(0,0,0,.5) 82%, transparent 94%);
}
.loc-split:not(.sol-split):not(.is-inv) .ls-texto {
padding-left: 72px;
background: linear-gradient(98deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.94) 9%, #fff 16%);
}
.loc-split.is-inv:not(.sol-split) .ls-texto {
padding-right: 72px;
background: linear-gradient(262deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.94) 9%, #fff 16%);
}
.loc-split:not(.sol-split) .ls-texto .dc-prose, .loc-split:not(.sol-split) .ls-dif span { color: var(--ink); }
.loc-split:not(.sol-split) .ls-dif b { color: var(--navy); }
@media (max-width: 900px) {
.loc-split:not(.sol-split):not(.is-inv) .ls-texto, .loc-split.is-inv:not(.sol-split) .ls-texto { background: #fff; padding-left: 24px; padding-right: 24px; }
}
/* V2.01 - com a foto fora do fluxo da grade, a coluna de texto precisa de posicao explicita */
.loc-split:not(.sol-split):not(.is-inv) .ls-texto { grid-column: 2; }
.loc-split.is-inv:not(.sol-split) .ls-texto { grid-column: 1; }
@media (max-width: 900px) { .loc-split:not(.sol-split) .ls-texto { grid-column: 1; } }
/* V2.02 - transicao mais larga: a foto vai ate 66% da faixa e se desfaz entre 47% e 66%;
o veu branco da coluna fica solido so a partir de ~60%, e o texto comeca depois disso */
.loc-split:not(.sol-split) .dc-photo, .loc-split.is-inv:not(.sol-split) .dc-photo { width: 66%; }
.loc-split:not(.sol-split):not(.is-inv) .dc-photo {
-webkit-mask-image: linear-gradient(98deg, #000 0%, #000 71%, rgba(0,0,0,.55) 84%, transparent 100%);
mask-image: linear-gradient(98deg, #000 0%, #000 71%, rgba(0,0,0,.55) 84%, transparent 100%);
}
.loc-split.is-inv:not(.sol-split) .dc-photo {
-webkit-mask-image: linear-gradient(262deg, #000 0%, #000 71%, rgba(0,0,0,.55) 84%, transparent 100%);
mask-image: linear-gradient(262deg, #000 0%, #000 71%, rgba(0,0,0,.55) 84%, transparent 100%);
}
.loc-split:not(.sol-split):not(.is-inv) .ls-texto {
padding-left: 150px;
background: linear-gradient(98deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 12%, rgba(255,255,255,.96) 20%, #fff 26%);
}
.loc-split.is-inv:not(.sol-split) .ls-texto {
padding-right: 150px;
background: linear-gradient(262deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 12%, rgba(255,255,255,.96) 20%, #fff 26%);
}
.loc-split:not(.sol-split):not(.is-inv) .ls-dados { margin-left: -150px; padding-left: 110px; }
.loc-split.is-inv:not(.sol-split) .ls-dados { margin-right: -150px; padding-right: 110px; }
@media (max-width: 1180px) {
.loc-split:not(.sol-split):not(.is-inv) .ls-texto { padding-left: 110px; }
.loc-split.is-inv:not(.sol-split) .ls-texto { padding-right: 110px; }
.loc-split:not(.sol-split):not(.is-inv) .ls-dados { margin-left: -110px; padding-left: 80px; }
.loc-split.is-inv:not(.sol-split) .ls-dados { margin-right: -110px; padding-right: 80px; }
}
@media (max-width: 900px) {
.loc-split:not(.sol-split):not(.is-inv) .ls-texto, .loc-split.is-inv:not(.sol-split) .ls-texto { padding-left: 24px; padding-right: 24px; background: #fff; }
.loc-split:not(.sol-split) .ls-dados { margin: -28px -24px 24px; padding: 22px 24px; }
}
/* V2.03 - veu da coluna de texto horizontal (sem emenda na divisa); a diagonal fica so na foto */
.loc-split:not(.sol-split):not(.is-inv) .ls-texto {
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 11%, rgba(255,255,255,.97) 19%, #fff 24%);
}
.loc-split.is-inv:not(.sol-split) .ls-texto {
background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 11%, rgba(255,255,255,.97) 19%, #fff 24%);
}
@media (max-width: 900px) {
.loc-split:not(.sol-split):not(.is-inv) .ls-texto, .loc-split.is-inv:not(.sol-split) .ls-texto { background: #fff; }
}
/* V2.04 - hero de Localidades mais baixo */
.page-hero.has-img { padding: 52px 0 44px; }
.page-hero.has-img h1 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); max-width: 22ch; }
.page-hero.has-img p { margin-top: 10px; font-size: .98rem; }
@media (max-width: 900px) { .page-hero.has-img { padding: 40px 0 0; } }
/* V2.05 - distribuicao: coluna de texto com 56% da faixa, foto avanca ate 58%, margem interna
menor, sem hifenizacao */
.loc-split:not(.sol-split):not(.is-inv) { grid-template-columns: 44fr 56fr; }
.loc-split.is-inv:not(.sol-split) { grid-template-columns: 56fr 44fr; }
.loc-split:not(.sol-split) .dc-photo, .loc-split.is-inv:not(.sol-split) .dc-photo { width: 58%; }
.loc-split:not(.sol-split):not(.is-inv) .dc-photo {
-webkit-mask-image: linear-gradient(98deg, #000 0%, #000 68%, rgba(0,0,0,.5) 84%, transparent 100%);
mask-image: linear-gradient(98deg, #000 0%, #000 68%, rgba(0,0,0,.5) 84%, transparent 100%);
}
.loc-split.is-inv:not(.sol-split) .dc-photo {
-webkit-mask-image: linear-gradient(262deg, #000 0%, #000 68%, rgba(0,0,0,.5) 84%, transparent 100%);
mask-image: linear-gradient(262deg, #000 0%, #000 68%, rgba(0,0,0,.5) 84%, transparent 100%);
}
.loc-split:not(.sol-split):not(.is-inv) .ls-texto {
padding-left: 110px; padding-right: max(56px, calc((100vw - 1200px) / 2));
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 6%, rgba(255,255,255,.97) 11%, #fff 14%);
}
.loc-split.is-inv:not(.sol-split) .ls-texto {
padding-right: 110px; padding-left: max(56px, calc((100vw - 1200px) / 2));
background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 6%, rgba(255,255,255,.97) 11%, #fff 14%);
}
.loc-split:not(.sol-split):not(.is-inv) .ls-dados { margin-left: -110px; padding-left: 84px; margin-right: 0; }
.loc-split.is-inv:not(.sol-split) .ls-dados { margin-right: -110px; padding-right: 84px; margin-left: 0; }
.ls-texto, .ls-texto * { hyphens: manual; -webkit-hyphens: manual; }
.ls-texto .dc-prose, .ls-dif span { max-width: 62ch; }
@media (max-width: 1180px) {
.loc-split:not(.sol-split):not(.is-inv) .ls-texto { padding-left: 90px; }
.loc-split.is-inv:not(.sol-split) .ls-texto { padding-right: 90px; }
.loc-split:not(.sol-split):not(.is-inv) .ls-dados { margin-left: -90px; padding-left: 64px; }
.loc-split.is-inv:not(.sol-split) .ls-dados { margin-right: -90px; padding-right: 64px; }
}
@media (max-width: 900px) {
.loc-split:not(.sol-split):not(.is-inv), .loc-split.is-inv:not(.sol-split) { grid-template-columns: 1fr; }
.loc-split:not(.sol-split):not(.is-inv) .ls-texto, .loc-split.is-inv:not(.sol-split) .ls-texto { padding-left: 24px; padding-right: 24px; background: #fff; }
.loc-split:not(.sol-split) .ls-dados { margin: -28px -24px 24px; padding: 22px 24px; }
}
/* V2.06 - hero de todas as paginas internas com a mesma altura (248px) e o mesmo titulo */
.page-hero, .page-hero.has-img { min-height: 248px; box-sizing: border-box; display: flex; align-items: center; padding: 40px 0 36px; }
.page-hero .container { width: 100%; }
.page-hero h1, .page-hero.has-img h1 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 300; max-width: 24ch; margin: 0; }
.page-hero p, .page-hero.has-img p { margin-top: 10px; font-size: .98rem; max-width: 60ch; }
.page-hero.has-img p { max-width: 48%; }
@media (max-width: 900px) {
.page-hero, .page-hero.has-img { min-height: 0; padding: 36px 0 32px; }
.page-hero.has-img { padding-bottom: 0; }
}
/* ==========================================================================
V2.07 - Secao Presenca (handoff WEBSITE REVIEW): mapa real a esquerda, cards a direita.
Cores: tokens do manual TERRANOVA (Azul Noite, Azul Luz, #C9CDF2, #9FA8E8).
========================================================================== */
#mapa { padding: 72px 0 64px; }
.pres-title { font-weight: 300; max-width: 24ch; letter-spacing: -.015em; line-height: 1.1; font-size: clamp(30px, 4vw, 48px); margin-top: 20px; }
.pres-title strong { font-weight: 600; }
.pres-lead { margin-top: 18px; font-size: 17px; line-height: 1.55; color: #C9CDF2; max-width: 62ch; }
.pres-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; margin-top: 56px; align-items: stretch; }
.pres-map { position: relative; min-height: 560px; overflow: hidden; border: 1px solid rgba(255,255,255,.07); background: var(--navy); }
.pres-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pres-base path { fill: #0D078C; fill-opacity: .55; stroke: var(--navy); stroke-width: .8; }
.pres-focus path { fill: #0D078C; stroke: var(--accent); stroke-width: 1; }
.pres-dots path { stroke: none; }
.pres-halo { fill: var(--accent); fill-opacity: .18; }
.pres-pin { fill: var(--navy); stroke: #DDEBFA; stroke-width: 1.6; transition: r .18s ease; }
.mk.is-op .pres-pin { fill: var(--accent); }
.mk text { fill: #E6EEF8; font-size: 12px; font-weight: 600; dominant-baseline: middle; paint-order: stroke; stroke: var(--navy); stroke-width: 4px; stroke-linejoin: round; font-family: var(--font); }
.mk { cursor: default; }
.pres-legend { position: absolute; left: 20px; bottom: 18px; display: flex; gap: 20px; font-size: 12px; color: #9FA8E8; }
.pres-legend > span { display: flex; align-items: center; gap: 7px; }
.pres-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.pres-legend i.is-op { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.pres-legend i.is-dev { background: transparent; border: 1.5px solid #9FA8E8; }
.pres-cards { display: flex; flex-direction: column; gap: 14px; }
.pres-card { flex: 1; position: relative; padding: 22px 24px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.pres-card:hover, .pres-card.on { transform: translateY(-2px); border-color: rgba(38,129,255,.55); background: rgba(38,129,255,.08); }
.pres-head { display: flex; align-items: center; gap: 12px; }
.pres-head .flag { flex: none; }
.pres-head .flag svg { width: 26px; height: 18px; display: block; box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
.pres-city { font-size: 18px; font-weight: 600; line-height: 1.2; white-space: nowrap; color: #fff; }
.pres-country { font-size: 11px; letter-spacing: .18em; color: #9FA8E8; text-transform: uppercase; margin-top: 2px; }
.pres-status { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
.pres-pill { font-size: 11px; font-weight: 600; padding: 4px 9px; border: 1px solid; white-space: nowrap; }
.pres-pill.is-ok { color: var(--navy); background: var(--accent); border-color: var(--accent); }
.pres-pill.is-exp, .pres-pill.is-dev, .pres-pill.is-est { color: #BFD3FF; border-color: rgba(191,211,255,.4); background: rgba(38,129,255,.16); }
.pres-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); }
.pres-stat { min-width: 0; }
.pres-stat .n { white-space: nowrap; font-size: 28px; font-weight: 300; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; }
.pres-stat .n small { font-size: 12px; font-weight: 600; color: #7FB4FF; margin-left: 5px; letter-spacing: .04em; }
.pres-stat .l { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #9FA8E8; margin-top: 7px; line-height: 1.4; }
.pres-note { margin: 14px 0 0; font-size: 13px; color: #C9CDF2; }
.pres-credit { margin-top: 14px; font-size: 12px; color: #7F88E0; }
#mapa .campi-cta { margin-top: 28px; }
@media (max-width: 900px) {
.pres-grid { grid-template-columns: 1fr; gap: 28px; }
.pres-map { min-height: 460px; }
#mapa { padding: 48px 0; }
}
/* desativa estilos do mapa anterior que ainda existam */
.tn-map, .tn-map-callouts, .map-callout, .map-legend { all: revert; }
/* V2.08 - Presenca: mapa preenche a caixa (viewBox 1:1); cabecalho do card quebra linha em vez de
vazar; estatistica unica ocupa a largura toda */
.pres-head { flex-wrap: wrap; row-gap: 10px; }
.pres-city { white-space: normal; }
.pres-pill { font-size: 10.5px; }
.pres-stats { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
/* V2.09 - Presenca: as tres fases de San Miguel cabem numa linha */
.pres-stats { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px; }
.pres-stat .n { font-size: 26px; }
/* ==========================================================================
V2.11 - Localidades no layout do mock: faixa escura, foto + legenda geografica, coluna com
eyebrow, titulo, pill, ficha, secoes e diferenciais em cards 2x2.
========================================================================== */
.loc-band { display: grid; grid-template-columns: 1fr 1fr; background: var(--navy); color: #fff; min-height: 700px; }
.loc-band.is-inv .lb-photo { order: 2; }
.lb-photo { position: relative; margin: 0; min-height: 420px; overflow: hidden; }
.lb-photo img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block; }
.lb-geo { position: absolute; left: 24px; bottom: 18px; display: flex; align-items: center; gap: 10px; font-size: .68rem; font-weight: 700; letter-spacing: .16em; color: #fff; text-transform: uppercase; text-shadow: 0 1px 2px rgba(5,6,88,.6); }
.lb-geo i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.lb-src { position: absolute; right: 16px; bottom: 18px; margin: 0; font-size: .68rem; color: #C9CDF2; background: rgba(5,6,88,.7); padding: 4px 10px; border-radius: 0; }
.lb-text { padding: 56px max(48px, calc((100vw - 1200px) / 2)) 56px 64px; }
.loc-band.is-inv .lb-text { padding: 56px 64px 56px max(48px, calc((100vw - 1200px) / 2)); }
.lb-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #7FB4FF; }
.lb-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--accent); }
.lb-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.lb-head .flag svg { width: 28px; height: 20px; display: block; }
.lb-head h2 { margin: 0; color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 300; letter-spacing: -.015em; line-height: 1.15; max-width: none; }
.lb-head h2 strong { font-weight: 600; }
.lb-head .dc-status { font-size: .66rem; font-weight: 600; letter-spacing: .02em; text-transform: none; padding: 4px 11px; border-radius: 20px; background: rgba(38,129,255,.16); color: #BFD3FF; border: 1px solid rgba(191,211,255,.4); }
.lb-head .dc-status-ops, .lb-head .dc-status.is-ok { background: var(--accent); color: var(--navy); border-color: var(--accent); }
.lb-head .dc-tia-mark { height: 22px; width: auto; filter: brightness(0) invert(1); opacity: .9; }
.lb-nums { display: flex; flex-wrap: wrap; gap: 18px 44px; margin: 20px 0 26px; border: 0; padding: 0; }
.lb-nums .ln-item { display: flex; flex-direction: column; gap: 6px; }
.lb-nums .ln-rot { font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #7FB4FF; }
.lb-nums .ln-val { font-size: 2rem; font-weight: 300; line-height: 1; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lb-nums .ln-val small { font-size: .74rem; font-weight: 600; color: #7FB4FF; margin-left: 5px; letter-spacing: .04em; }
.lb-nums .ln-val.is-txt { font-size: 1.7rem; font-weight: 300; }
.lb-k { margin: 22px 0 8px; font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #7FB4FF; }
.lb-text .dc-prose { color: #C9CDF2; font-size: .95rem; line-height: 1.6; margin: 0; max-width: 64ch; text-align: left; }
.lb-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.lb-card { padding: 16px 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); }
.lb-card h4 { margin: 0 0 6px; font-size: .88rem; font-weight: 600; color: #fff; }
.lb-card p { margin: 0; font-size: .8rem; line-height: 1.5; color: #C9CDF2; }
.lb-text .tia-block { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.lb-text .tia-block h3 { color: #fff; font-size: .95rem; }
.lb-text .tia-block p, .lb-text .tia-block li { color: #C9CDF2; font-size: .85rem; }
.lb-actions { display: flex; align-items: center; gap: 22px; margin: 28px 0 0; }
.btn-accent { background: var(--accent); color: var(--navy); font-weight: 600; border-color: var(--accent); }
.btn-accent::after { content: " \2192"; white-space: pre; }
.btn-accent:hover { background: #4D96FF; }
.lb-all { color: #C9CDF2; font-size: .85rem; }
.lb-all::before { content: "\2190 "; white-space: pre; }
.lb-all:hover { color: #fff; }
.loc-band + .loc-band { border-top: 1px solid rgba(255,255,255,.08); }
@media (max-width: 1180px) {
.lb-text, .loc-band.is-inv .lb-text { padding: 44px 40px; }
}
@media (max-width: 900px) {
.loc-band { grid-template-columns: 1fr; min-height: 0; }
.loc-band.is-inv .lb-photo { order: 0; }
.lb-photo, .lb-photo img { min-height: 300px; height: 300px; }
.lb-text, .loc-band.is-inv .lb-text { padding: 32px 24px 40px; }
.lb-cards { grid-template-columns: 1fr; }
.lb-actions { flex-wrap: wrap; gap: 14px; }
}
/* V2.12 - Localidades: cards sem justificado; bloco TIA no fundo escuro; cabecalho sem espalhar */
.lb-card p, .lb-card h4, .lb-text .tia-block p, .lb-text .tia-block li { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
.lb-head { justify-content: flex-start; gap: 10px 14px; }
.lb-head .dc-tia-mark { margin-left: 2px; }
.lb-text .tia-block, .lb-text .tia-block .tia-text { background: transparent; border: 0; box-shadow: none; padding-left: 0; padding-right: 0; border-radius: 0; }
.lb-text .tia-block { border-top: 1px solid rgba(255,255,255,.12); padding-top: 18px; margin-top: 22px; }
.lb-text .tia-block h3 { color: #fff; font-size: .95rem; margin: 0 0 8px; }
.lb-text .tia-block p { color: #C9CDF2; font-size: .85rem; line-height: 1.55; }
.lb-text .tia-block strong { color: #fff; }
.lb-text .tia-block a { color: #7FB4FF; text-decoration: underline; }
/* V2.13 - pills do cabecalho juntas */
.lb-head .dc-status { margin-left: 0; }
.lb-head .dc-status + .dc-status { margin-left: 0; }
/* V2.14 - celular: hero com foto empilha (texto, foto, credito) em vez de ficar lado a lado */
@media (max-width: 900px) {
.page-hero.has-img { display: flex; flex-direction: column; align-items: stretch; padding: 36px 0 0; }
.page-hero.has-img .container { order: 1; }
.page-hero.has-img .ph-img { order: 2; position: relative; inset: auto; width: 100%; height: 200px; margin-top: 24px; clip-path: none; opacity: 1; }
.page-hero.has-img .ph-src { order: 3; position: static; display: block; padding: 6px 24px 10px; }
.page-hero.has-img h1, .page-hero.has-img p { max-width: none; }
}
/* mapa da Presenca: rotulos legiveis no celular */
@media (max-width: 600px) { .mk text { font-size: 18px; stroke-width: 5px; } }
/* V2.15 - celular: credito da foto no canto superior, para nao encostar na legenda geografica */
@media (max-width: 900px) { .lb-src { top: 12px; bottom: auto; right: 12px; } .lb-geo { left: 16px; bottom: 14px; font-size: .6rem; } }
/* V2.17 - hero de Localidades: foto com bordas retas (sem o corte diagonal) */
.page-hero.has-img .ph-img { clip-path: none !important; -webkit-mask-image: none; mask-image: none; }
/* V2.18 - Solucoes: cortes em zigue-zague continuo. Faixa normal (foto a esquerda): borda vai do
centro (topo) para centro-64px (base). Faixa invertida (foto a direita) avanca 64px sobre a
coluna de texto e vai de centro-64px (topo) para o centro (base). As pontas se encontram. */
.sol-split:not(.is-inv) .dc-photo { clip-path: polygon(0 0, 100% 0, calc(100% - 64px) 100%, 0 100%) !important; }
.sol-split.is-inv .dc-photo { position: relative; z-index: 1; margin-left: -64px; clip-path: polygon(0 0, 100% 0, 100% 100%, 64px 100%) !important; }
@media (max-width: 900px) {
.sol-split .dc-photo, .sol-split.is-inv .dc-photo { clip-path: none !important; margin-left: 0; }
}
/* ==========================================================================
V2.19 - Localidades: mesmo jogo de imagens de Solucoes (zigue-zague continuo), fundo branco.
Variante escura (Azul Noite, o visual anterior) em [data-theme="dark"].
========================================================================== */
.loc-band { background: #fff; color: var(--ink); min-height: 640px; }
.loc-band + .loc-band { border-top: 0; }
.loc-band:not(.is-inv) .lb-photo { clip-path: polygon(0 0, 100% 0, calc(100% - 64px) 100%, 0 100%); }
.loc-band.is-inv .lb-photo { position: relative; z-index: 1; margin-left: -64px; clip-path: polygon(0 0, 100% 0, 100% 100%, 64px 100%); }
.loc-band.is-inv .lb-geo { left: 88px; }
.lb-eyebrow { color: var(--blue); }
.lb-head { border-bottom-color: var(--line); }
.lb-head h2 { color: var(--navy); }
.lb-head .dc-status { background: transparent; color: var(--blue); border: 1px solid var(--blue); }
.lb-head .dc-status-ops, .lb-head .dc-status.is-ok { background: var(--accent); color: var(--navy); border-color: var(--accent); }
.lb-head .dc-tia-mark { filter: none; opacity: 1; }
.lb-nums .ln-rot, .lb-k { color: var(--blue); }
.lb-nums .ln-val, .lb-nums .ln-val.is-txt { color: var(--navy); }
.lb-nums .ln-val small { color: var(--blue); }
.lb-text .dc-prose { color: var(--ink); }
.lb-card { background: var(--bg-alt); border-color: var(--line); }
.lb-card h4 { color: var(--navy); }
.lb-card p { color: var(--ink); }
.lb-text .tia-block { border-top-color: var(--line); }
.lb-text .tia-block h3, .lb-text .tia-block strong { color: var(--navy); }
.lb-text .tia-block p, .lb-text .tia-block li { color: var(--ink); }
.lb-text .tia-block a { color: var(--blue); }
.lb-all { color: var(--ink); }
.lb-all:hover { color: var(--navy); }
@media (max-width: 900px) {
.loc-band .lb-photo, .loc-band.is-inv .lb-photo { clip-path: none; margin-left: 0; }
.loc-band.is-inv .lb-geo { left: 16px; }
}
/* variante escura */
[data-theme="dark"] .loc-band { background: var(--navy); color: #fff; }
[data-theme="dark"] .loc-band + .loc-band { border-top: 1px solid rgba(255,255,255,.08); }
[data-theme="dark"] .lb-eyebrow, [data-theme="dark"] .lb-nums .ln-rot, [data-theme="dark"] .lb-k, [data-theme="dark"] .lb-nums .ln-val small { color: #9FA8E8; }
[data-theme="dark"] .lb-head { border-bottom-color: rgba(255,255,255,.12); }
[data-theme="dark"] .lb-head h2, [data-theme="dark"] .lb-nums .ln-val, [data-theme="dark"] .lb-card h4,
[data-theme="dark"] .lb-text .tia-block h3, [data-theme="dark"] .lb-text .tia-block strong { color: #fff; }
[data-theme="dark"] .lb-head .dc-status { background: rgba(38,129,255,.16); color: #9FA8E8; border-color: rgba(191,211,255,.4); }
[data-theme="dark"] .lb-head .dc-status-ops { background: var(--accent); color: var(--navy); border-color: var(--accent); }
[data-theme="dark"] .lb-head .dc-tia-mark { filter: brightness(0) invert(1); opacity: .9; }
[data-theme="dark"] .lb-text .dc-prose, [data-theme="dark"] .lb-card p, [data-theme="dark"] .lb-text .tia-block p, [data-theme="dark"] .lb-all { color: #C9CDF2; }
[data-theme="dark"] .lb-card { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .lb-text .tia-block { border-top-color: rgba(255,255,255,.12); }
[data-theme="dark"] .lb-text .tia-block a { color: #9FA8E8; }
[data-theme="dark"] .lb-all:hover { color: #fff; }
/* V2.21 - formulario "fluido" sobre o azul (teste, so em Solucoes: .cta-fluid) */
.cta-final .contact-form { background: transparent; border: 0; box-shadow: none; padding: 0; color: #fff; }
.cta-final .contact-form .form-to { color: #C9CDF2; border-bottom: 1px solid rgba(255,255,255,.16); padding-bottom: 14px; }
.cta-final .contact-form .form-to strong { color: #fff; }
.cta-final .contact-form label { color: #C9CDF2; }
.cta-final .contact-form input:not([type="checkbox"]),
.cta-final .contact-form select,
.cta-final .contact-form textarea {
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22); color: #fff; box-shadow: none;
}
.cta-final .contact-form input::placeholder, .cta-final .contact-form textarea::placeholder { color: rgba(201,205,242,.6); }
.cta-final .contact-form input:not([type="checkbox"]):focus,
.cta-final .contact-form textarea:focus,
.cta-final .contact-form select:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,.09); box-shadow: 0 0 0 3px rgba(38,129,255,.45); }
.cta-final .contact-form input[type="checkbox"] { accent-color: var(--accent); }
.cta-final .form-consent label, .cta-final .form-consent label a { color: #C9CDF2; }
.cta-final .form-feedback { color: #C9CDF2; }
/* V2.22 - linha fina separando o bloco de contato do mapa do site (paginas internas; na home a
newsletter ja tem essa linha) */
.site-footer > .footer-grid:first-child { border-top: 1px solid rgba(255,255,255,0.12); }
/* ==========================================================================
V2.23 - Modo escuro alinhado ao manual: Azul Noite de fundo, Azul Profundo nas secoes
alternadas, texto #C9CDF2, apoio #9FA8E8, links e destaques Azul Luz. Hero da home intocado.
========================================================================== */
[data-theme="dark"] {
--bg: #050658; --bg-alt: #0D078C; --ink: #C9CDF2; --gray: #9FA8E8;
--line: rgba(255,255,255,0.14); --shadow: none; color-scheme: dark;
}
[data-theme="dark"] body { background: #050658; color: #C9CDF2; }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: #fff; }
[data-theme="dark"] a, [data-theme="dark"] .text-link { color: #7FB4FF; }
[data-theme="dark"] .kicker { color: #9FA8E8; }
[data-theme="dark"] .site-header { background: #050658; border-bottom-color: rgba(255,255,255,.12); }
[data-theme="dark"] .site-header nav a, [data-theme="dark"] .main-nav a { color: #C9CDF2; }
[data-theme="dark"] .site-header nav a:hover, [data-theme="dark"] .main-nav a:hover, [data-theme="dark"] .main-nav a[aria-current] { color: #fff; }
[data-theme="dark"] .page-hero { background: #0D078C; }
[data-theme="dark"] .section-alt, [data-theme="dark"] .trust-strip { background: #0D078C; }
[data-theme="dark"] .card, [data-theme="dark"] .quote-card, [data-theme="dark"] .investor-card, [data-theme="dark"] .news-card,
[data-theme="dark"] .diff-card, [data-theme="dark"] .energy-card, [data-theme="dark"] .cert-country, [data-theme="dark"] .pillar {
background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); color: #C9CDF2;
}
[data-theme="dark"] .card p, [data-theme="dark"] .card li, [data-theme="dark"] .quote-who, [data-theme="dark"] .pillar p { color: #C9CDF2; }
[data-theme="dark"] .quote-text, [data-theme="dark"] .quote-q { color: #fff; }
[data-theme="dark"] .quote-q { color: #9FA8E8; }
/* faixas de Solucoes (fundo branco no claro) */
[data-theme="dark"] .sol-split, [data-theme="dark"] .sol-split .ls-texto { background: #050658; }
[data-theme="dark"] .sol-split .ls-cid h2, [data-theme="dark"] .ls-dif b { color: #fff; }
[data-theme="dark"] .ls-texto .dc-prose, [data-theme="dark"] .ls-dif span, [data-theme="dark"] .sol-lead { color: #C9CDF2; }
[data-theme="dark"] .sol-split .sol-tag { background: transparent; color: #9FA8E8; border-color: rgba(255,255,255,.25); }
/* textos corridos e listas */
[data-theme="dark"] .lead, [data-theme="dark"] .page-body p, [data-theme="dark"] .page-body li, [data-theme="dark"] .dc-prose { color: #C9CDF2; }
[data-theme="dark"] .loc-fecho { border-top-color: rgba(255,255,255,.12); }
[data-theme="dark"] .loc-fecho p, [data-theme="dark"] .dc-next-sub { color: #9FA8E8; }
/* formularios */
[data-theme="dark"] .contact-form:not(.contact-form-compact) { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); }
[data-theme="dark"] .contact-form label, [data-theme="dark"] .form-consent label { color: #C9CDF2; }
[data-theme="dark"] .contact-form input:not([type="checkbox"]), [data-theme="dark"] .contact-form select, [data-theme="dark"] .contact-form textarea {
background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); color: #fff;
}
[data-theme="dark"] .contact-form .form-to { color: #C9CDF2; } [data-theme="dark"] .contact-form .form-to strong { color: #fff; }
/* botoes */
[data-theme="dark"] .btn-navy { background: #2681FF; color: #050658; }
[data-theme="dark"] .btn-ghost { color: #fff; border-color: rgba(255,255,255,.3); }
[data-theme="dark"] .theme-toggle, [data-theme="dark"] .lang-switch { border-color: rgba(255,255,255,.25); color: #fff; }
/* faixa de certificacao / GPTW e investidores */
[data-theme="dark"] .trust-strip h3, [data-theme="dark"] .trust-strip strong { color: #fff; }
[data-theme="dark"] .trust-strip p { color: #C9CDF2; }
/* selos e logos escuros sobre azul */
/* cookies */
[data-theme="dark"] .cookie-banner { background: #0D078C; color: #C9CDF2; border-color: rgba(255,255,255,.14); }
/* V2.25 - escuro: menu do header sem bloco de fundo no desktop (o fundo fica so na gaveta do celular) */
@media (min-width: 1121px) { [data-theme="dark"] .site-header:not(.nav-compact) .main-nav { background: transparent; border: 0; } }
[data-theme="dark"] .main-nav a.is-current { background: rgba(38,129,255,.18); color: #fff; }
/* ==========================================================================
V2.26 - Pagina Operacoes: lista de prioridades e passos do chamado.
========================================================================== */
.op-prio { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); }
.op-prio li { display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.op-prio p { margin: 0; color: var(--ink); }
.op-prio-tag { justify-self: start; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border: 1px solid var(--blue); color: var(--blue); }
.op-prio-1 .op-prio-tag { background: var(--navy); border-color: var(--navy); color: #fff; }
.op-prio-2 .op-prio-tag { background: var(--blue); border-color: var(--blue); color: #fff; }
.op-prio-3 .op-prio-tag { background: transparent; }
.op-prio-4 .op-prio-tag { background: transparent; border-color: var(--line); color: var(--gray); }
.op-steps { list-style: none; counter-reset: op; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 28px 0 0; padding: 0; }
.op-steps li { counter-increment: op; position: relative; padding: 22px 24px 0 0; border-top: 2px solid var(--line); }
.op-steps li::before { content: counter(op, decimal-leading-zero); display: block; font-size: 2rem; font-weight: 300; color: var(--accent); line-height: 1; margin-bottom: 12px; }
.op-steps li::after { content: ""; position: absolute; top: -2px; left: 0; width: 48px; height: 2px; background: var(--accent); }
.op-steps h3 { font-size: 1rem; margin: 0 0 6px; }
.op-steps p { margin: 0; font-size: .92rem; color: var(--ink); }
#organizacao .cards-grid { margin-top: 40px; }
.review-op::before { content: "confirmar com Operações"; }
[data-theme="dark"] .op-prio-1 .op-prio-tag { background: #fff; color: var(--navy); border-color: #fff; }
[data-theme="dark"] .op-prio-3 .op-prio-tag { color: #9FA8E8; border-color: #9FA8E8; }
@media (max-width: 900px) {
.op-prio li { grid-template-columns: 1fr; gap: 10px; }
.op-steps { grid-template-columns: 1fr 1fr; row-gap: 28px; }
}
@media (max-width: 560px) { .op-steps { grid-template-columns: 1fr; } }
/* ==========================================================================
V2.27 - (a) header com encaixe dinamico em qualquer idioma; (b) formulario "fluido"
(sem caixa branca) em todos os blocos de contato: rodape das paginas, home e Fale conosco.
========================================================================== */
.site-header.nav-tight .header-inner { column-gap: 12px; }
.site-header.nav-tight .main-nav a { padding: 10px 6px; font-size: .84rem; }
.site-header.nav-tight .logo-img { width: 196px; }
.site-header.nav-tight .logo { min-width: 196px; }
.site-header.nav-tight .header-actions { gap: 8px; }
.site-header.nav-tight .header-actions .btn { padding: 10px 16px; }
.site-header.nav-compact .nav-toggle { display: block; order: 3; }
.site-header.nav-compact .main-nav {
display: none; position: absolute; top: 72px; left: 0; right: 0; margin: 0;
background: #fff; border-bottom: 1px solid var(--line); padding: 12px 24px 20px;
max-height: calc(100vh - 72px); overflow: auto; z-index: 50;
}
.site-header.nav-compact .main-nav.open { display: block; }
.site-header.nav-compact .main-nav > ul { flex-direction: column; gap: 0; }
.site-header.nav-compact .main-nav a { padding: 12px 8px; font-size: .95rem; }
[data-theme="dark"] .site-header.nav-compact .main-nav { background: #050658; border-bottom-color: rgba(255,255,255,.12); }
.site-header { position: sticky; }
.site-header .header-inner { position: relative; }
/* formulario fluido: escuro tambem sem caixa */
[data-theme="dark"] .cta-final .contact-form, [data-theme="dark"] .cta-final .contact-form:not(.contact-form-compact) { background: transparent; border: 0; padding: 0; }
.cta-final .contact-form select option { color: #050658; background: #fff; }
.cta-final .contact-form .form-row label, .cta-final .contact-form > div > label { color: #C9CDF2; }
/* V2.30 - Operacoes: certificacoes (conquistada x proximo passo) */
.op-cert { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.op-cert-card { padding: 28px 30px; border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; gap: 12px; }
.op-cert-card.is-done { border-top: 4px solid var(--accent); }
.op-cert-card.is-next { border-top: 4px solid var(--line); background: var(--bg-alt); }
.op-cert-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
.op-cert-k { font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); }
.op-cert-card.is-next .op-cert-k { color: var(--gray); }
.op-cert-mark { height: 26px; width: auto; }
.op-cert-iso { font-size: .8rem; font-weight: 600; color: var(--navy); border: 1px solid var(--navy); padding: 4px 10px; letter-spacing: .04em; }
.op-cert-card h3 { margin: 0; font-size: 1.15rem; color: var(--navy); }
.op-cert-card p { margin: 0; color: var(--ink); line-height: 1.6; }
.op-cert-card .text-link { margin-top: auto; }
[data-theme="dark"] .op-cert-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .op-cert-card.is-done { border-top-color: var(--accent); }
[data-theme="dark"] .op-cert-card.is-next { background: rgba(255,255,255,.02); }
[data-theme="dark"] .op-cert-card h3, [data-theme="dark"] .op-cert-iso { color: #fff; border-color: rgba(255,255,255,.5); }
[data-theme="dark"] .op-cert-card p { color: #C9CDF2; }
[data-theme="dark"] .op-cert-k { color: #9FA8E8; }
[data-theme="dark"] .op-cert-mark { filter: brightness(0) invert(1); opacity: .9; }
@media (max-width: 900px) { .op-cert { grid-template-columns: 1fr; } }
/* V2.31 - ISO 27001 em andamento: rotulo em Azul Energia */
.op-cert-card.is-next .op-cert-k { color: var(--blue); }
[data-theme="dark"] .op-cert-card.is-next .op-cert-k { color: #9FA8E8; }
/* V2.32 - Conteudo: Sala de Imprensa */
.press-room { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: center; margin-top: 56px; padding: 40px 44px; border: 1px solid var(--line); border-top: 4px solid var(--accent); background: var(--bg-alt); }
.press-room h2 { margin: 0 0 12px; }
.press-room .press-text p:last-child { margin: 0; color: var(--ink); line-height: 1.65; }
.press-contact dl { margin: 0 0 24px; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; }
.press-contact dt { font-size: .85rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--blue); align-self: center; }
.press-contact dd { margin: 0; font-weight: 600; color: var(--navy); }
.press-contact dd a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.press-contact .btn::after { content: " ↗"; white-space: pre; }
[data-theme="dark"] .press-room { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); border-top-color: var(--accent); }
[data-theme="dark"] .press-room .press-text p:last-child { color: #C9CDF2; }
[data-theme="dark"] .press-contact dt { color: #9FA8E8; }
[data-theme="dark"] .press-contact dd, [data-theme="dark"] .press-contact dd a { color: #fff; }
@media (max-width: 900px) { .press-room { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; } }
/* V2.33 - e-mail da Sala de Imprensa quebra so no celular */
@media (max-width: 560px) { .press-contact dd a { white-space: normal; overflow-wrap: anywhere; } }
/* V2.35 - revisao Maquina: legenda das fotos de Localidades no canto superior (o corte diagonal
escondia a base); canais com Assessoria de imprensa (4 itens) */
.loc-band .lb-src { top: 16px; bottom: auto; right: 16px; left: auto; }
#contato .cta-channels { grid-template-rows: auto repeat(4, 1fr); }
@media (max-width: 900px) { #contato .cta-channels { grid-template-rows: none; } }
#governanca .cards-grid.cards-4 .card-cta .btn { white-space: normal; }
/* V2.37 - contato da home (figura do Pedro, 13/10): cabecalho na largura toda com filete;
abaixo, duas colunas com titulo proprio - canais diretos | formulario das demais areas */
#contato .cta-head { padding-bottom: 22px; margin-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,.28); }
#contato .cta-head h2 { margin: 0; }
#contato .cta-head .lead { margin: 14px 0 0; }
#contato .cta-head .cta-side-label { margin: 8px 0 0; text-transform: none; letter-spacing: 0; font-size: 1.05rem; line-height: 1.6; color: #fff; font-weight: 600; }
#contato .cta-cols { grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: stretch; }
#contato .cta-col-t { margin: 0 0 16px; font-size: 1.2rem; font-weight: 300; text-transform: uppercase; letter-spacing: .02em; line-height: 1.3; color: #fff; }
#contato .cta-channels { margin-top: 0; grid-template-rows: repeat(4, 1fr); gap: 10px; }
#contato .cta-col-form { display: flex; flex-direction: column; }
#contato .cta-col-form .contact-form { padding: 0; }
#contato .cta-col-form .contact-form .btn-lg { align-self: flex-end; }
#contato .cta-col-form .contact-form { display: flex; flex-direction: column; }
@media (max-width: 900px) {
#contato .cta-cols { grid-template-columns: 1fr; gap: 40px; }
#contato .cta-channels { grid-template-rows: none; }
#contato .cta-col-form .contact-form .btn-lg { align-self: flex-start; }
}
@media (max-width: 620px) { #contato .cta-channel .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; } }
/* V2.39 - Sala de Imprensa: rotulo em cima do valor, tudo alinhado a esquerda;
contato da home: Enviar formulario a esquerda */
.press-contact dl { display: block; margin: 0 0 28px; }
.press-contact dt { margin: 0 0 4px; font-size: .85rem; font-weight: 600; color: var(--blue); }
.press-contact dd { margin: 0 0 18px; font-size: 1.05rem; }
.press-contact dd:last-child { margin-bottom: 0; }
.press-contact { justify-self: end; text-align: left; }
#contato .cta-col-form .contact-form .btn-lg { align-self: flex-start; }
@media (max-width: 900px) { .press-contact { justify-self: start; } }
/* V2.43 - newsletter desativada (fica no HTML com hidden, para reativar) */
.newsletter-inner[hidden] { display: none !important; }
/* V2.51 - Banner DCD LATAM Awards 2026 (handoff "Banner DCD Awards"), abaixo do hero da home.
Texto alinhado a grade do site (.container 1200px + 24px); imagem a direita com degrade. */
.tn-dcd-banner {
--tn-navy: #050658; --tn-text: #4B5563; --tn-bg: #F3F4F8; --tn-line: #DCDFEA;
display: flex; align-items: stretch; min-height: 240px; background: var(--tn-bg);
border-top: 1px solid var(--tn-line); border-bottom: 1px solid var(--tn-line); overflow: hidden;
}
.tn-dcd-banner__content {
flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px;
padding: 32px 16px 32px max(24px, calc((100% - 1200px) / 2 + 24px));
}
.tn-dcd-banner__title { margin: 0; font-size: 24px; line-height: 1.3; font-weight: 300; color: var(--tn-navy); text-wrap: pretty; }
.tn-dcd-banner__text { margin: 0; max-width: 620px; font-size: 15px; line-height: 1.55; color: var(--tn-text); text-wrap: pretty; }
.tn-dcd-banner__awards { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 15px; font-weight: 600; color: var(--tn-navy); }
.tn-dcd-banner__awards li::before { content: "• "; }
.tn-dcd-banner__cta { align-self: flex-start; display: inline-flex; align-items: center; height: 36px; padding: 0 20px; margin-top: 4px; background: var(--tn-navy); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; transition: opacity .15s ease; }
.tn-dcd-banner__cta:hover { opacity: .88; color: #fff; }
.tn-dcd-banner__media { position: relative; flex: 0 1 560px; min-width: 300px; }
.tn-dcd-banner__media img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 80%; display: block;
-webkit-mask-image: linear-gradient(270deg, #000 0%, #000 50%, rgba(0,0,0,.7) 65%, rgba(0,0,0,.3) 82%, transparent 100%);
mask-image: linear-gradient(270deg, #000 0%, #000 50%, rgba(0,0,0,.7) 65%, rgba(0,0,0,.3) 82%, transparent 100%);
}
.tn-dcd-banner + .trust-strip { border-top: 0; }
[data-theme="dark"] .tn-dcd-banner { --tn-navy: #fff; --tn-text: #C9CDF2; --tn-bg: #0D078C; --tn-line: rgba(255,255,255,.12); }
[data-theme="dark"] .tn-dcd-banner__cta { background: var(--accent); color: #fff; }
@media (max-width: 768px) {
.tn-dcd-banner { flex-direction: column-reverse; }
.tn-dcd-banner__media { flex: none; min-width: 0; height: 220px; }
.tn-dcd-banner__media img {
-webkit-mask-image: linear-gradient(0deg, transparent 0%, rgba(0,0,0,.4) 18%, #000 40%);
mask-image: linear-gradient(0deg, transparent 0%, rgba(0,0,0,.4) 18%, #000 40%);
}
.tn-dcd-banner__content { padding: 8px 24px 32px; }
.tn-dcd-banner__title { font-size: 21px; }
}
/* V2.51 - Localidades, San Miguel de Allende: bloco de premiacoes no padrao do bloco TIA-942 */
.lb-text .dcd-block { display: grid; grid-template-columns: 88px 1fr; gap: 18px; align-items: start; }
.dcd-selo { width: 88px; height: auto; display: block; }
.dcd-list { margin: 6px 0 0; padding: 0; list-style: none; }
.dcd-list li { font-size: .85rem; font-weight: 600; line-height: 1.6; }
.dcd-list li::before { content: "• "; }
.lb-text .dcd-block .dcd-list li { color: var(--navy); }
[data-theme="dark"] .lb-text .dcd-block .dcd-list li { color: #fff; }
@media (max-width: 420px) { .lb-text .dcd-block { grid-template-columns: 64px 1fr; gap: 14px; } .dcd-selo { width: 64px; } }
.tn-dcd-banner__text, .lb-text .dcd-block p { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
/* V2.53 - banner DCD: a foto termina na margem direita da grade (mesma linha do simbolo do hero e do "Fale conosco"),
sem sangrar ate a borda da tela */
.tn-dcd-banner { padding: 0 max(24px, calc((100% - 1200px) / 2 + 24px)); }
.tn-dcd-banner__content { padding-left: 0; }
@media (max-width: 768px) { .tn-dcd-banner { padding: 0; } .tn-dcd-banner__content { padding-left: 24px; } }
/* V2.54 - San Miguel: no lugar da foto do trofeu, a marca DCD LATAM AWARDS 2026 (tipografica, no azul do site) */
.dcd-mark { width: 96px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 2px; color: var(--navy); text-align: center; }
.dcd-mark-box { display: inline-block; padding: 3px 7px 2px; border: 1.5px solid currentColor; font-weight: 700; font-size: .95rem; letter-spacing: .04em; line-height: 1; }
.dcd-mark-name { font-weight: 600; font-size: .78rem; letter-spacing: .06em; line-height: 1.15; }
.dcd-mark-yr { font-weight: 300; font-size: .9rem; letter-spacing: .08em; line-height: 1; }
[data-theme="dark"] .dcd-mark { color: #fff; }
.lb-text .dcd-block { grid-template-columns: 96px 1fr; }
@media (max-width: 420px) { .lb-text .dcd-block { grid-template-columns: 80px 1fr; } .dcd-mark { width: 80px; } }
/* V2.54 - Localidades: "Em breve, novos horizontes" centralizado */
.loc-fecho, .loc-fecho h2, .loc-fecho p { text-align: center; }
.loc-fecho p { margin-left: auto; margin-right: auto; }
/* V2.55 - banner DCD mais fino (so titulo, premios e botao); faixa do GPTW mais clara, puxando para o branco */
.tn-dcd-banner { min-height: 150px; }
.tn-dcd-banner__content { gap: 10px; padding-top: 22px; padding-bottom: 22px; }
.tn-dcd-banner__title { font-size: 22px; }
.tn-dcd-banner__media { flex-basis: 440px; }
.tn-dcd-banner__media img { object-position: 62% 72%; }
.trust-strip { background: #FAFBFD; }
[data-theme="dark"] .trust-strip { background: #0A0672; }
@media (max-width: 768px) { .tn-dcd-banner__media { height: 170px; } .tn-dcd-banner__content { padding-top: 6px; padding-bottom: 24px; } }
/* V2.56 - cards de noticia com link externo: so a seta diagonal (sem a seta padrao do text-link) */
.news-card .text-link[target="_blank"]::after { content: none; display: none; }
/* V2.58 - noticias: pais de origem do veiculo (bandeira + nome) */
.news-meta { flex-wrap: wrap; row-gap: 6px; }
.news-origin { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--navy); }
.news-flag { display: inline-flex; width: 20px; height: 14px; overflow: hidden; border-radius: 2px; box-shadow: 0 0 0 1px rgba(5,6,88,.12); flex: none; }
.news-flag svg { width: 100%; height: 100%; display: block; }
.news-flag.is-intl { width: 15px; height: 15px; border-radius: 0; box-shadow: none; color: var(--blue); }
[data-theme="dark"] .news-origin { color: #fff; }
[data-theme="dark"] .news-flag { box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
[data-theme="dark"] .news-flag.is-intl { color: #9FA8E8; box-shadow: none; }
/* V2.60 - TODOS os botoes do site com a mesma caixa: 46px de altura, fonte .95rem (15,2px), 26px nas laterais.
Sobrepoe as variantes btn-sm / btn-lg e os ajustes locais (cabecalho, contato da home, faixa GPTW, banner DCD, cookies). */
.btn, .btn.btn-sm, .btn.btn-lg, .tn-dcd-banner__cta,
#contato .cta-channel .btn, #contato .contact-form .btn-lg, .site-header .btn, .trust-strip .btn, .cookie-banner .btn {
min-height: 46px !important; height: auto !important; padding: 10px 26px !important;
font-size: .95rem !important; line-height: 1.2 !important; font-weight: 600;
display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
}
/* V2.61 - mesma caixa tambem na largura: minimo de 200px (texto maior ainda cresce); cabecalho fica fora para nao apertar o menu */
.btn, .tn-dcd-banner__cta, #contato .cta-channel .btn { min-width: 200px !important; }
.site-header .btn { min-width: 0 !important; }
@media (max-width: 420px) { .btn, .tn-dcd-banner__cta { min-width: 0 !important; } }
/* V2.63 - Responsivo (auditoria celular/tablet, 15/10)
1) Celular: o cabecalho nao cabia (logo + LinkedIn + tema + PT/EN/ES + Fale conosco + menu) e gerava rolagem lateral.
LinkedIn e "Fale conosco" saem do cabecalho no celular (seguem no rodape e no bloco de contato de cada pagina). */
@media (max-width: 620px) {
.site-header .header-actions .social-toggle { display: none !important; }
.site-header .header-actions .btn-primary { display: none !important; }
.site-header .logo-img { height: 15px; }
.site-header .header-actions { gap: 6px; }
.site-header .header-actions .lang-switch { margin-right: 0; }
.site-header .lang-switch button { min-width: 30px; height: 36px; padding: 0 6px; }
.site-header .theme-toggle { width: 36px; height: 36px; }
.site-header .nav-toggle { padding: 7px 6px; min-height: 40px; }
}
@media (max-width: 420px) {
.site-header .container, .site-header .header-inner { padding-left: 16px; padding-right: 16px; }
}
/* 2) Botoes dentro de cards: sem a largura minima de 200px (empurrava o 4o card do Sobre para fora no tablet) */
.card .btn, .card-cta .btn, .cards-grid .btn { min-width: 0 !important; max-width: 100%; white-space: normal; }
/* 3) Alvos de toque em telas de toque */
@media (max-width: 1080px) {
.theme-toggle, .social-toggle { min-width: 36px; min-height: 36px; }
.lang-switch button { min-height: 34px; }
.form-consent input[type="checkbox"] { width: 20px; height: 20px; flex: none; }
}
@media (max-width: 620px) { .site-header .logo-img { width: auto !important; max-width: 140px; } .site-header .logo { flex: 0 1 auto; min-width: 0; } }
/* V2.64 - "Fale conosco" como ultimo item do menu, so no celular (no cabecalho ele some abaixo de 620px) */
.main-nav li.nav-cta-mobile { display: none; }
@media (max-width: 620px) {
.main-nav li.nav-cta-mobile { display: block; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.main-nav li.nav-cta-mobile a { color: var(--accent); font-weight: 700; }
}
/* V2.66 - banner DCD empilhado (tablet/celular): a base de 440px virava altura; volta a faixa de 170px */
@media (max-width: 768px) { .tn-dcd-banner__media { flex: none !important; height: 170px; } }
/* ==========================================================================
V2.67 - Publicação (VUCA, 10/2026): altura reservada do cabeçalho injetado,
campo anti-robô do formulário, título principal da página de contato.
========================================================================== */
.site-header { min-height: 73px; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.cta-final .split-text h1 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); letter-spacing: -0.015em; max-width: 30ch; font-weight: 600; color: #fff; }