/* ==========================================================================
   V7 Solucoes Digitais — Folha de estilo principal
   Extraida do template-modelo.html na Etapa 3, SEM alteracao de valores.
   Unica mudanca: as 6 regras .slide-N .slide-bg foram removidas — a imagem de
   fundo de cada slide agora vem do content.json, aplicada inline pelo index.php.
   A fonte Inter e carregada por assets/css/fonts.css.
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #0a0e17;
  color: #ffffff;
  overflow-x: hidden;
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Gradient Text */
.gradient-text {
  background: linear-gradient(135deg, #00B4DB, #00F5A0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-blue {
  background: linear-gradient(135deg, #0052D4, #00B4DB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 20px max(40px, calc((100% - 1400px) / 2 + 40px));
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.4s ease;
  background: transparent;
}

.header.scrolled {
  background: rgba(10, 14, 23, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 212, 255, 0.1);
  padding: 16px max(40px, calc((100% - 1400px) / 2 + 40px));
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-text {
  font-size: 20px;
  font-weight: 700;
}

.logo-subtitle {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  margin-top: -4px;
  transition: color 0.3s;
}

.header.scrolled .logo-subtitle {
  color: #6B7280;
}

.nav {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-link {
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s;
}

.nav-link:hover {
  color: #ffffff;
}

.header.scrolled .nav-link {
  color: #9CA3AF;
}

.header.scrolled .nav-link:hover {
  color: #ffffff;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #0052D4, #00B4DB);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 180, 219, 0.3);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 180, 219, 0.5);
}

.btn-secondary {
  padding: 18px 36px;
  background: transparent;
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 14px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: rgba(0, 212, 255, 0.1);
  border-color: rgba(0, 212, 255, 0.5);
}

.btn-large {
  padding: 18px 36px;
  font-size: 16px;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 180, 219, 0.4);
}

/* Banner Slider */
.banner-slider {
  position: relative;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
}

.slides-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
  z-index: 2;
}

.slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(10, 14, 23, 0.92) 0%, rgba(10, 14, 23, 0.75) 50%, rgba(10, 14, 23, 0.85) 100%);
}

.slide-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
}

.hero-glow-1 {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 82, 212, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 2;
}

.hero-glow-2 {
  position: absolute;
  bottom: 20%;
  right: 10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 2;
}

.banner-content {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 120px 40px 80px;
  max-width: 1400px;
  margin: 0 auto;
}

.banner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  width: 100%;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 100px;
  margin-bottom: 32px;
}

.hero-badge-dot {
  width: 8px;
  height: 8px;
  background: #00F5A0;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.hero-badge-text {
  font-size: 13px;
  color: #00D4FF;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

.hero-title {
  font-size: 68px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 24px;
}

.hero-description {
  font-size: 18px;
  color: #9CA3AF;
  line-height: 1.7;
  margin-bottom: 40px;
  max-width: 500px;
}

.hero-description strong {
  color: #ffffff;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  margin-bottom: 60px;
}

.hero-tech {
  margin-top: 40px;
}

.hero-tech-label {
  font-size: 12px;
  color: #9CA3AF;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hero-tech-list {
  display: flex;
  gap: 24px;
}

.hero-tech-item {
  font-size: 14px;
  color: #D1D5DB;
  font-weight: 500;
}

.slider-dots {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 20;
}

.slider-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.slider-dot.active {
  background: linear-gradient(135deg, #00B4DB, #00F5A0);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}

.slider-arrows {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 20;
  pointer-events: none;
}

.slider-arrow {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.3);
  color: #00D4FF;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
}

.slider-arrow:hover {
  background: rgba(0, 212, 255, 0.2);
  border-color: rgba(0, 212, 255, 0.5);
  transform: scale(1.1);
}

/* Stats */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.stat-card {
  padding: 32px;
  background: linear-gradient(135deg, rgba(0, 82, 212, 0.1), rgba(0, 212, 255, 0.05));
  border: 1px solid rgba(0, 212, 255, 0.15);
  border-radius: 24px;
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
}

.stat-value {
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #9CA3AF;
}

/* Section Common */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.3), transparent);
}

.section-header {
  text-align: center;
  margin-bottom: 80px;
}

.section-label {
  font-size: 13px;
  color: #00D4FF;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 600;
}

.section-title {
  font-size: 48px;
  font-weight: 800;
  margin-top: 16px;
  color: #ffffff;
}

.section-subtitle {
  font-size: 18px;
  color: #9CA3AF;
  margin-top: 16px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Services Section */
.services {
  padding: 120px 40px;
  background: #0a0e17;
  position: relative;
}

.services-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.service-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s ease;
}

.service-card:hover {
  border-color: rgba(0, 212, 255, 0.4);
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.service-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.service-card:hover .service-image img {
  transform: scale(1.1);
}

.service-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 14, 23, 0.8) 100%);
}

.service-content {
  padding: 28px;
}

.service-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #ffffff;
}

.service-desc {
  font-size: 14px;
  color: #9CA3AF;
  line-height: 1.6;
}

/* About Section */
.about {
  padding: 120px 40px;
  background: linear-gradient(180deg, #0a0e17, #0d1321);
  position: relative;
}

.about-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  pointer-events: none;
}

.about-content {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
  position: relative;
  z-index: 10;
}

.about-description {
  font-size: 16px;
  color: #9CA3AF;
  line-height: 1.8;
  margin-bottom: 20px;
}

.about-tech-tags {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.tech-tag {
  padding: 10px 20px;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 100px;
  font-size: 13px;
  color: #00D4FF;
  font-weight: 500;
}

.about-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-rings {
  position: relative;
  width: 400px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ring-outer {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 50%;
  animation: ring-rotate 20s linear infinite;
}

.ring-inner {
  position: absolute;
  width: 75%;
  height: 75%;
  border: 1px solid rgba(0, 212, 255, 0.15);
  border-radius: 50%;
  animation: ring-rotate 15s linear infinite reverse;
}

@keyframes ring-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.ring-center {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, rgba(0, 82, 212, 0.2), rgba(0, 212, 255, 0.1));
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 60px rgba(0, 212, 255, 0.2);
}

/* Portfolio / Cases Section */
.portfolio {
  padding: 120px 40px;
  background: #0a0e17;
  position: relative;
  overflow: hidden;
}

.portfolio-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(0, 82, 212, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.portfolio-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  position: relative;
  z-index: 10;
}

.portfolio-card {
  position: relative;
  border-radius: 24px;
  border: 1px solid rgba(0, 212, 255, 0.15);
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
  group: portfolio-card;
}

.portfolio-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.portfolio-card:hover img {
  transform: scale(1.1);
}

.portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(10, 14, 23, 0.6) 0%, rgba(10, 14, 23, 0.98) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
}

.portfolio-card:hover .portfolio-overlay {
  opacity: 1;
}

.portfolio-category {
  font-size: 12px;
  color: #00D4FF;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.portfolio-title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.portfolio-desc {
  font-size: 14px;
  color: #9CA3AF;
  margin-bottom: 16px;
}

.portfolio-stats {
  display: flex;
  gap: 24px;
}

.portfolio-stat {
  display: flex;
  flex-direction: column;
}

.portfolio-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #00F5A0;
}

.portfolio-stat-label {
  font-size: 11px;
  color: #6B7280;
  text-transform: uppercase;
}

.portfolio-card-featured {
  grid-column: span 2;
  aspect-ratio: 2/1;
}

/* Testimonials Section */
.testimonials {
  padding: 120px 40px;
  background: linear-gradient(180deg, #0d1321, #0a0e17);
  position: relative;
  overflow: hidden;
}

.testimonials-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.06;
  pointer-events: none;
}

.testimonials-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.testimonials-slider {
  position: relative;
  overflow: hidden;
}

.testimonials-track {
  display: flex;
  transition: transform 0.5s ease;
}

.testimonial-card {
  min-width: 100%;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.testimonial-content {
  padding: 48px;
  background: linear-gradient(135deg, rgba(0, 82, 212, 0.1), rgba(0, 212, 255, 0.05));
  border: 1px solid rgba(0, 212, 255, 0.15);
  border-radius: 32px;
  position: relative;
}

.testimonial-quote-icon {
  position: absolute;
  top: -20px;
  left: 40px;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #0052D4, #00B4DB);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 180, 219, 0.3);
}

.testimonial-quote-icon svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}

.testimonial-text {
  font-size: 22px;
  line-height: 1.7;
  color: #E5E7EB;
  margin-bottom: 32px;
  margin-top: 24px;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.testimonial-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(0, 212, 255, 0.3);
}

.testimonial-author-info {
  flex: 1;
}

.testimonial-author-name {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.testimonial-author-role {
  font-size: 14px;
  color: #9CA3AF;
}

.testimonial-company {
  text-align: right;
}

.testimonial-company-logo {
  font-size: 24px;
  font-weight: 800;
  color: #4B5563;
}

.testimonial-visual {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.testimonial-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.testimonial-metric {
  padding: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.testimonial-metric:hover {
  border-color: rgba(0, 212, 255, 0.3);
  transform: translateY(-4px);
}

.testimonial-metric-value {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 4px;
}

.testimonial-metric-label {
  font-size: 13px;
  color: #9CA3AF;
}

.testimonials-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 48px;
}

.testimonials-dots {
  display: flex;
  gap: 10px;
}

.testimonial-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.testimonial-dot.active {
  width: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, #00B4DB, #00F5A0);
}

.testimonial-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.2);
  color: #00D4FF;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-arrow:hover {
  background: rgba(0, 212, 255, 0.2);
  border-color: rgba(0, 212, 255, 0.4);
}

/* FAQ Section */
.faq {
  padding: 120px 40px;
  background: #0a0e17;
  position: relative;
}

.faq-container {
  max-width: 900px;
  margin: 0 auto;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item:hover {
  border-color: rgba(0, 212, 255, 0.2);
}

.faq-item.active {
  border-color: rgba(0, 212, 255, 0.3);
  background: linear-gradient(135deg, rgba(0, 82, 212, 0.08), rgba(0, 212, 255, 0.03));
}

.faq-question {
  width: 100%;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.faq-question-text {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  flex: 1;
}

.faq-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 82, 212, 0.2), rgba(0, 212, 255, 0.1));
  border: 1px solid rgba(0, 212, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.faq-item.active .faq-icon {
  background: linear-gradient(135deg, #0052D4, #00B4DB);
  border-color: transparent;
}

.faq-icon svg {
  width: 20px;
  height: 20px;
  stroke: #00D4FF;
  transition: transform 0.3s ease;
}

.faq-item.active .faq-icon svg {
  stroke: #fff;
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-item.active .faq-answer {
  max-height: 300px;
}

.faq-answer-content {
  padding: 0 32px 28px 32px;
  font-size: 16px;
  color: #9CA3AF;
  line-height: 1.8;
}

/* Pilares Section */
.pilares {
  padding: 120px 40px;
  background: linear-gradient(180deg, #0a0e17, #0d1321);
  position: relative;
  overflow: hidden;
}

.pilares-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, rgba(0, 82, 212, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.pilares-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.pilares-intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}

.pilares-intro-text {
  font-size: 18px;
  color: #9CA3AF;
  line-height: 1.7;
}

.pilares-intro-text strong {
  color: #00D4FF;
}

.pilares-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 16px;
}

.pilar-card {
  background: linear-gradient(180deg, rgba(0, 82, 212, 0.1), rgba(0, 212, 255, 0.02));
  border: 1px solid rgba(0, 212, 255, 0.1);
  border-radius: 20px;
  padding: 28px 20px;
  text-align: center;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.pilar-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0052D4, #00B4DB);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pilar-card:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 212, 255, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.pilar-card:hover::before {
  opacity: 1;
}

.pilar-number {
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 16px;
  opacity: 0.15;
  line-height: 1;
}

.pilar-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: rgba(0, 212, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.15);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.pilar-card:hover .pilar-icon {
  background: rgba(0, 212, 255, 0.1);
  border-color: rgba(0, 212, 255, 0.3);
  transform: scale(1.05);
}

.pilar-icon svg {
  transition: all 0.3s ease;
}

.pilar-card:hover .pilar-icon svg {
  stroke: #00F5A0;
}

.pilar-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.pilar-subtitle {
  font-size: 12px;
  color: #00D4FF;
  font-style: italic;
  margin-bottom: 12px;
}

.pilar-desc {
  font-size: 13px;
  color: #9CA3AF;
  line-height: 1.6;
}

/* Pilares mobile */
@media (max-width: 1200px) {
  .pilares-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .pilar-card:last-child {
    grid-column: 2 / 4;
  }
}

@media (max-width: 768px) {
  .pilares {
    padding: 80px 20px;
  }

  .pilares-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .pilar-card {
    padding: 20px 16px;
  }

  .pilar-card:last-child {
    grid-column: span 2;
  }

  .pilar-number {
    font-size: 32px;
  }

  .pilar-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  .pilar-title {
    font-size: 16px;
  }

  .pilar-desc {
    font-size: 12px;
  }
}

/* Contact Section */
.contact {
  padding: 120px 40px;
  background: linear-gradient(180deg, #0d1321, #0a0e17);
  position: relative;
  overflow: hidden;
}

.contact-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.08;
  pointer-events: none;
}

.contact-glow-1 {
  position: absolute;
  top: -20%;
  left: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 82, 212, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.contact-glow-2 {
  position: absolute;
  bottom: -20%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.contact-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: stretch;
}

.contact-info {
  display: flex;
  flex-direction: column;
}

.contact-info-card {
  background: linear-gradient(135deg, rgba(0, 82, 212, 0.1), rgba(0, 212, 255, 0.05));
  border: 1px solid rgba(0, 212, 255, 0.15);
  border-radius: 28px;
  padding: 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.contact-info-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #fff;
}

.contact-info-subtitle {
  font-size: 15px;
  color: #9CA3AF;
  margin-bottom: 36px;
  line-height: 1.6;
}

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
}

.contact-method {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.contact-method:hover {
  background: rgba(0, 212, 255, 0.05);
  border-color: rgba(0, 212, 255, 0.2);
  transform: translateX(8px);
}

.contact-method-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(0, 82, 212, 0.2), rgba(0, 212, 255, 0.1));
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-method-icon svg {
  width: 22px;
  height: 22px;
  stroke: #00D4FF;
  fill: none;
  stroke-width: 2;
}

.contact-method-content {
  flex: 1;
}

.contact-method-label {
  font-size: 13px;
  color: #6B7280;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.contact-method-value {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.contact-method-value a {
  color: #fff;
  transition: color 0.2s;
}

.contact-method-value a:hover {
  color: #00D4FF;
}

.contact-social {
  margin-top: auto;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.contact-social-label {
  font-size: 13px;
  color: #6B7280;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.contact-social-links {
  display: flex;
  gap: 12px;
}

.social-link {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.social-link:hover {
  background: linear-gradient(135deg, #0052D4, #00B4DB);
  border-color: transparent;
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 180, 219, 0.3);
}

.social-link svg {
  width: 20px;
  height: 20px;
  fill: #9CA3AF;
  transition: fill 0.3s;
}

.social-link:hover svg {
  fill: #fff;
}

.contact-form-card {
  background: linear-gradient(135deg, rgba(0, 82, 212, 0.08), rgba(0, 212, 255, 0.03));
  border: 1px solid rgba(0, 212, 255, 0.12);
  border-radius: 28px;
  padding: 48px;
  position: relative;
  overflow: hidden;
}

.contact-form-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0052D4, #00B4DB, #00F5A0);
}

.form-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #fff;
}

.form-subtitle {
  font-size: 15px;
  color: #9CA3AF;
  margin-bottom: 32px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  position: relative;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #9CA3AF;
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  padding: 16px 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: all 0.3s ease;
}

.form-input:focus {
  border-color: rgba(0, 212, 255, 0.5);
  background: rgba(0, 212, 255, 0.03);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}

.form-input::placeholder {
  color: #4B5563;
}

.form-textarea {
  resize: none;
  min-height: 140px;
}

.form-select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 48px;
}

.form-select option {
  background: #0a0e17;
  color: #fff;
}

.btn-submit {
  width: 100%;
  padding: 18px;
  margin-top: 8px;
  font-size: 16px;
}

.form-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.form-footer svg {
  width: 16px;
  height: 16px;
  stroke: #00F5A0;
  fill: none;
}

.form-footer-text {
  font-size: 13px;
  color: #6B7280;
}

/* Footer */
.footer {
  padding: 60px 40px;
  background: #050810;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-logo-text {
  font-size: 16px;
  font-weight: 600;
}

.footer-copyright {
  font-size: 14px;
  color: #4B5563;
}

.footer-social {
  display: flex;
  gap: 20px;
}

.footer-social a {
  color: #4B5563;
  font-size: 14px;
  transition: color 0.2s;
}

.footer-social a:hover {
  color: #00D4FF;
}

/* Responsive */
@media (max-width: 1200px) {
  .banner-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .stats-grid {
    max-width: 500px;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-content {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .about-visual {
    order: -1;
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .portfolio-card-featured {
    grid-column: span 2;
  }

  .testimonial-card {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .header {
    padding: 16px 20px;
  }

  .nav {
    display: none;
  }

  .banner-slider {
    min-height: 100vh;
  }

  .banner-content {
    padding: 100px 20px 60px;
  }

  .hero-title {
    font-size: 38px;
  }

  .hero-buttons {
    flex-direction: column;
  }

  .slider-arrows {
    display: none;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .stat-card {
    padding: 20px;
  }

  .stat-value {
    font-size: 32px;
  }

  .services {
    padding: 80px 20px;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .section-title {
    font-size: 32px;
  }

  .about {
    padding: 80px 20px;
  }

  .logo-rings {
    width: 280px;
    height: 280px;
  }

  .ring-center {
    width: 140px;
    height: 140px;
  }

  .portfolio {
    padding: 80px 20px;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-card-featured {
    grid-column: span 1;
    aspect-ratio: 4/3;
  }

  .testimonials {
    padding: 80px 20px;
  }

  .testimonial-content {
    padding: 32px;
  }

  .testimonial-text {
    font-size: 18px;
  }

  .testimonial-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .faq {
    padding: 80px 20px;
  }

  .faq-question {
    padding: 20px;
  }

  .faq-question-text {
    font-size: 16px;
  }

  .contact {
    padding: 80px 20px;
  }

  .contact-info-card {
    padding: 28px;
  }

  .contact-form-card {
    padding: 28px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer {
    padding: 40px 20px;
  }

  .footer-content {
    flex-direction: column;
    gap: 24px;
    text-align: center;
  }
}

/* ==========================================================================
   ADICOES DA ETAPA 4 — correcoes estruturais
   Tudo daqui pra baixo NAO existia no template-modelo.html.
   Foi acrescentado para resolver duas falhas do modelo original:
     1. nao havia menu nenhum em telas <= 768px (a .nav some e nao ha hamburguer)
     2. o formulario era falso (so dava alert, nao enviava e-mail)
   Segue a mesma linguagem visual do site: vidro escuro, borda ciano, gradiente.
   ========================================================================== */

/* ---------- Botao hamburguer ---------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 120;
}

.nav-toggle:hover {
  background: rgba(0, 212, 255, 0.08);
  border-color: rgba(0, 212, 255, 0.4);
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(135deg, #00B4DB, #00F5A0);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle.aberto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.aberto span:nth-child(2) { opacity: 0; }
.nav-toggle.aberto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Painel lateral do menu ---------- */
.nav-mobile {
  position: fixed;
  top: 0;
  right: 0;
  width: min(320px, 85vw);
  height: 100%;
  z-index: 115;
  padding: 96px 28px 40px;
  background: rgba(10, 14, 23, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid rgba(0, 212, 255, 0.15);
  transform: translateX(100%);
  transition: transform 0.35s ease;
  overflow-y: auto;
}

.nav-mobile.aberto { transform: translateX(0); }

.nav-mobile-link {
  display: block;
  padding: 15px 0;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: color 0.3s ease, padding-left 0.3s ease;
}

.nav-mobile-link:hover {
  color: #00F5A0;
  padding-left: 8px;
}

.nav-mobile .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 28px;
}

/* ---------- Fundo escurecido atras do painel ---------- */
.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 110;
  background: rgba(3, 6, 12, 0.7);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.nav-overlay.aberto {
  opacity: 1;
  visibility: visible;
}

/* Trava a rolagem do site enquanto o menu estiver aberto */
body.menu-aberto { overflow: hidden; }

@media (max-width: 768px) {
  .nav-toggle { display: flex; }
}

/* ---------- Mensagem de retorno do formulario ---------- */
.form-alerta {
  display: none;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
}

.form-alerta.visivel { display: flex; }

.form-alerta.ok {
  background: rgba(0, 245, 160, 0.08);
  border: 1px solid rgba(0, 245, 160, 0.3);
  color: #00F5A0;
}

.form-alerta.erro {
  background: rgba(255, 87, 87, 0.08);
  border: 1px solid rgba(255, 87, 87, 0.3);
  color: #FF8A8A;
}

/* ---------- Botao de envio durante o carregamento ---------- */
.btn-submit.enviando {
  opacity: 0.65;
  pointer-events: none;
}

.btn-submit.enviando::after {
  content: '';
  width: 16px;
  height: 16px;
  margin-left: 10px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: girando 0.7s linear infinite;
}

@keyframes girando {
  to { transform: rotate(360deg); }
}

/* Campo isca anti-spam — invisivel para pessoas, visivel para robos */
.campo-isca {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   AJUSTES FEITOS DEPOIS QUE O SITE JA ESTAVA NO AR (22/07/2026)
   Pedidos do usuario, aplicados por ele no servidor e replicados aqui.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Logo do cabecalho encolhe pela metade quando a pagina rola.
   105px parado  ->  52.5px depois de rolar.
   O 105 vem do index.php (funcao logo). Se aquele numero mudar, o 52.5 daqui
   precisa mudar junto — sao 50% dele.
   Vale para <img> (logo enviado pelo painel) e para <svg> (simbolo original).
   -------------------------------------------------------------------------- */
.header .logo img,
.header .logo > svg {
  transition: width 0.4s ease, height 0.4s ease;
}

.header.scrolled .logo img,
.header.scrolled .logo > svg {
  width: 52.5px;
  height: 52.5px;
}

/* ==========================================================================
   FAIXA DE CLIENTES — bloco novo, criado em 22/07/2026
   Logos rolando em looping infinito, logo abaixo do Portfolio.
   Feito 100% em CSS: nao usa JavaScript nem biblioteca externa.
   ========================================================================== */

.clientes {
  position: relative;
  padding: 70px 0;
  background: #0a0e17;
  overflow: hidden;
}

/* Janela que recorta a faixa. As mascaras deixam os logos surgirem e
   desaparecerem suavemente nas laterais, em vez de sumirem num corte seco. */
.clientes-janela {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

/* A faixa contem a lista de logos DUAS vezes. Ela anda 50% da propria largura,
   ou seja, exatamente uma copia — por isso o recomeco e imperceptivel. */
.clientes-faixa {
  display: flex;
  align-items: center;
  width: max-content;
  animation-name: correClientes;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* a duracao vem do content.json, aplicada inline pelo index.php */
}

.clientes-faixa:hover {
  animation-play-state: paused;
}

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

.cliente-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 45px;
}

.cliente-item img {
  height: 52px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Modo monocromatico: pinta todo logo de branco, independente da cor original.
   E o que faz logos coloridos de clientes conviverem num site escuro.
   Ao passar o mouse, o logo volta a cor real. */
.clientes-faixa.mono .cliente-item img {
  filter: brightness(0) invert(1);
  opacity: 0.55;
}

.clientes-faixa.mono .cliente-item img:hover {
  filter: none;
  opacity: 1;
}

.clientes-faixa:not(.mono) .cliente-item img {
  opacity: 0.7;
}

.clientes-faixa:not(.mono) .cliente-item img:hover {
  opacity: 1;
}

/* Quando ha titulo, ele precisa de respiro antes da faixa */
.clientes .section-header {
  margin-bottom: 50px;
}

/* Quem pediu pra reduzir animacao no sistema nao deve ver nada se mexendo */
@media (prefers-reduced-motion: reduce) {
  .clientes-faixa {
    animation: none;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px 0;
  }
}

@media (max-width: 768px) {
  .clientes {
    padding: 50px 0;
  }
  .cliente-item {
    padding: 0 28px;
  }
  .cliente-item img {
    height: 38px;
    max-width: 150px;
  }
}

/* ==========================================================================
   PAGINAS LEGAIS + BANNER DE COOKIES — criados em 22/07/2026
   Politica de Privacidade, Termos de Uso e Politica de Cookies (pagina.php)
   e o aviso de consentimento de cookies (index + paginas).
   ========================================================================== */

/* ---- Layout das paginas de texto ---- */
.legal-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 160px 40px 100px;
  min-height: 70vh;
}

.legal-inner .section-label {
  display: inline-block;
  margin-bottom: 16px;
}

.legal-title {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 12px;
}

.legal-updated {
  font-size: 14px;
  color: #6B7280;
  margin-bottom: 40px;
}

.legal-intro {
  font-size: 18px;
  color: #D1D5DB;
  line-height: 1.8;
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.legal-section {
  margin-bottom: 36px;
}

.legal-section h2 {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 14px;
}

.legal-text {
  font-size: 16px;
  color: #9CA3AF;
  line-height: 1.85;
}

.legal-text strong {
  color: #ffffff;
  font-weight: 600;
}

.legal-outras {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.legal-outras a {
  padding: 10px 20px;
  border: 1px solid rgba(0, 212, 255, 0.25);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #00D4FF;
  transition: all 0.3s ease;
}

.legal-outras a:hover {
  background: rgba(0, 212, 255, 0.1);
  border-color: rgba(0, 212, 255, 0.5);
}

/* Links legais no rodape do site */
.footer-legal {
  max-width: 1400px;
  margin: 24px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.footer-legal a {
  font-size: 13px;
  color: #6B7280;
  transition: color 0.3s ease;
}

.footer-legal a:hover {
  color: #00D4FF;
}

/* ---- Banner de consentimento de cookies ---- */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 150%);
  width: min(920px, calc(100% - 32px));
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 26px;
  background: rgba(15, 23, 42, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-banner.visivel {
  transform: translate(-50%, 0);
}

.cookie-texto {
  flex: 1;
  font-size: 14px;
  color: #C7CDD6;
  line-height: 1.6;
}

.cookie-texto a {
  color: #00D4FF;
  text-decoration: underline;
  white-space: nowrap;
}

.cookie-botoes {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.cookie-btn {
  padding: 11px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.cookie-recusar {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: #C7CDD6;
}

.cookie-recusar:hover {
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}

.cookie-aceitar {
  background: linear-gradient(135deg, #0052D4, #00B4DB);
  border: none;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 180, 219, 0.35);
}

.cookie-aceitar:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(0, 180, 219, 0.5);
}

@media (max-width: 768px) {
  .legal-wrap {
    padding: 130px 20px 70px;
  }
  .legal-title {
    font-size: 32px;
  }
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    bottom: 12px;
    padding: 18px 20px;
  }
  .cookie-botoes {
    justify-content: stretch;
  }
  .cookie-btn {
    flex: 1;
  }
}

/* ==========================================================================
   AJUSTES DE MOBILE — 22/07/2026
   Correcoes pedidas apos analise do site no ar:
     1. Portfolio "mudo" no celular (texto do case so aparecia no hover)
     2. Logo grande demais no topo do celular
     3. Tecnologias do banner vazando numa linha so
   Bloco no FIM do arquivo de proposito: nao altera nenhuma regra existente,
   so acrescenta. Tudo dentro de @media (max-width: 768px) — desktop intocado.
   ========================================================================== */
@media (max-width: 768px) {

  /* 1. PORTFOLIO — no celular nao existe "passar o mouse", entao a tarja com
     categoria, titulo, descricao e metricas fica sempre visivel. */
  .portfolio-card .portfolio-overlay {
    opacity: 1;
  }

  /* 2. LOGO DO TOPO — menor no celular. Parado fica 60px (a barra deixa de
     ocupar ~137px e passa a ~92px). Ao rolar, a regra .header.scrolled ja
     existente e mais especifica e reduz para 52.5px normalmente. */
  .header .logo img,
  .header .logo > svg {
    width: 60px;
    height: 60px;
  }

  /* 3. TECNOLOGIAS DO BANNER — podem quebrar em mais de uma linha em vez de
     vazar pela borda em telas estreitas. */
  .hero-tech-list {
    flex-wrap: wrap;
    gap: 12px 20px;
  }
}

/* ==========================================================================
   AJUSTES DE MOBILE — RODADA 2 (22/07/2026)
   Corrige: (1) logo/header por cima do texto do hero, (2) card de depoimento
   cortado no topo e mal contido, (3) bloco de contato vazando pela direita.
   Bloco no FIM do arquivo, dentro de @media 768px — nao altera regra existente
   e nao afeta desktop.
   ========================================================================== */
@media (max-width: 768px) {

  /* 1. HERO — o conteudo (badge+titulo+descricao+botoes+tecnologias+4 stats)
     era centralizado numa tela de altura fixa; empilhado no celular fica alto
     demais e o topo subia pra tras do header. Agora o hero cresce com o
     conteudo, alinha ao topo e comeca abaixo do header. */
  .banner-slider {
    height: auto;
    min-height: 100vh;
  }
  .banner-content {
    height: auto;
    min-height: 100vh;
    align-items: flex-start;
    padding: 115px 20px 60px;
  }

  /* 2. DEPOIMENTOS — o icone de aspas fica -20px acima do card e era cortado
     pelo overflow do slider; o padding-top dá o espaco. O card sem padding
     lateral proprio (o .testimonials ja tem 20px) centraliza melhor, e as
     metricas com menos padding evitam apertar/vazar. */
  .testimonials-slider {
    padding-top: 28px;
  }
  .testimonial-card {
    padding: 0;
  }
  .testimonial-metric {
    padding: 18px;
  }

  /* 3. CONTATO — no mobile ficou com 40px lateral (resto do site usa 20px) e o
     e-mail longo vazava por falta de quebra de linha. */
  .contact {
    padding: 80px 20px;
  }
  .contact-info-card,
  .contact-form-card {
    padding: 28px;
  }
  .contact-method-value,
  .contact-method-value a {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}