@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Great+Vibes&family=Orbitron:wght@400;700&display=swap');

/* Fonte caligráfica custom - substitua ../fonts/dkc-forever.woff2 se fornecer o arquivo */
@font-face {
  font-family: 'DKC Forever';
  src: url('../fonts/dkc-forever.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: #111;
  line-height: 1.6;
  background: var(--page-bg);
  background-color: var(--page-bg-color);
  overflow-x: hidden;
}

:root {
  --primary-color: #d32f2f;
  --primary-dark: #b71c1c;
  --secondary-color: #ffffff;
  --dark-bg: #ffffff;
  --text-light: rgba(0,0,0,0.6);
  /* vertical red gradient for page background; use --page-bg-color as solid fallback */
  --page-bg: linear-gradient(180deg, #b30000 0%, #8a0000 100%);
  --page-bg-color: #b30000;
  --border-radius: 8px;

  /* layout helpers */
  --container-max: 1200px;
}

.container {
  width: min(92%, var(--container-max));
  max-width: var(--container-max);
  margin: auto;
  padding: 0 clamp(16px, 2vw, 24px);
}

@media (min-width: 1400px){
  :root{ --container-max: 1280px }
}

@media (min-width: 1700px){
  :root{ --container-max: 1400px }
}

/* ===== HEADER ===== */
.header {
  background: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  width: 100%;
  padding: 12px 0;
  box-shadow: none;
}

/* Constrain header logo size to avoid overflow (fixes large/broken logo) */
.header .logo,
.header > .container .logo {
  max-height: 56px;
  width: auto;
  display: block;
}

@media (max-width: 480px) {
  .header .logo { max-height: 44px }
}

/* Full hero without header (like reference) */
.full-hero{
  background: url("https://megavidrospremium.com.br/assets/Foto-1.jpeg") center/cover no-repeat;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.full-hero .overlay{
  position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.55),rgba(0,0,0,0.55));z-index:1;pointer-events:none
}

.hero-content.center{
  position:relative;z-index:2;color:var(--secondary-color);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:40px 10px;
}

.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

.hero-logo{max-width:140px;width:auto;height:auto;margin-bottom:8px;filter:brightness(1);background:rgba(255,255,255,0.06);padding:12px;border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,0.25);}
.hero-title{font-family:'Orbitron', 'Great Vibes', sans-serif;font-size:44px;color:var(--secondary-color);max-width:900px;text-transform:uppercase;letter-spacing:1px;margin:6px 0;text-shadow:0 6px 22px rgba(0,0,0,0.5)}
.hero-sub{color:rgba(255,255,255,0.92);max-width:720px;font-size:16px;margin-bottom:10px}
.hero-ctas{margin-top:14px}

/* button primary (uses primary color variable) */
.btn-primary{background:var(--primary-color);color:var(--secondary-color);padding:14px 22px;border-radius:8px;font-weight:700;text-decoration:none}

@media (max-width: 900px){
  .hero-title{font-size:30px}
  .hero-logo{max-width:120px}
}

/* ===== LOCALIZAÇÃO (2 MAPAS) ===== */
.locations-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 18px;
}

.location-card{
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 12px 34px rgba(0,0,0,0.10);
  transition: transform .18s ease, box-shadow .18s ease;
}

.location-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(0,0,0,0.14);
}

.location-title{
  font-size: 18px;
  margin: 0 0 6px;
  color: var(--primary-dark);
  letter-spacing: .2px;
}

.location-address{
  color: rgba(0,0,0,0.72);
  margin: 0 0 12px;
  line-height: 1.6;
}

.map-embed{
  width:100%;
  height:0;
  padding-bottom:56%;
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.08);
}

.map-embed iframe{
  border:0;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.location-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  margin-top: 12px;
  font-weight: 900;
  color: #fff;
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  box-shadow: 0 10px 22px rgba(211,47,47,0.22);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.location-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(211,47,47,0.28);
  filter: brightness(1.02);
}

@media (max-width: 900px){
  .locations-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 480px){
  .hero-title{font-size:22px}
  .hero-sub{font-size:14px}
  .hero-logo{max-width:100px}
  .hero-content.center{padding:20px}
}


.header a:hover:not(.btn) {
  color: var(--primary-color);
}

.btn {
  background: var(--primary-color);
  color: white;
  padding: 10px 20px;
  border-radius: var(--border-radius);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  display: inline-block;
}

.btn:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(211, 47, 47, 0.3);
}

.btn-primary {
  background: var(--primary-color);
  padding: 12px 30px;
  font-size: 14px;
}

.btn-primary:hover {
  background: var(--primary-dark);
}

.btn-small {
  padding: 8px 16px;
  font-size: 12px;
}

.btn-whatsapp {
  background: var(--primary-color);
  gap: 10px;
  display: inline-flex;
  align-items: center;
}

.btn-whatsapp:hover {
  background: var(--primary-dark);
}

/* ===== HERO ===== */
.hero {
  height: 100vh;
  position: relative;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/*
  FIX (Hostinger/mobile):
  O formulário usa <section class="hero hero-form">.
  A classe .hero define height: 100vh e overflow: hidden, o que corta o conteúdo quando o
  formulário fica maior que a tela (muito comum no mobile).
*/
.hero.hero-form{
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
}

@media (max-width: 920px){
  .hero.hero-form{ align-items: flex-start; }
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(211,47,47,0.35), rgba(211,47,47,0.15));
  z-index: 2;
  pointer-events: none;
}

.hero-content {
  position: relative;
  text-align: center;
  color: white;
  z-index: 3;
  max-width: 600px;
  animation: fadeInUp 1s ease;
}

/* ===== HERO FORM (VIDEO BACKGROUND + PROFESSIONAL FORM) ===== */
.hero-form{
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  position: relative;
  padding: clamp(64px, 6vh, 96px) 0 clamp(44px, 5vh, 76px);
}

.hero-form::before,
.hero-form::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

.hero-form::before{
  /* brand glow + soft light, cleaner than texture */
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(211,47,47,0.65), rgba(211,47,47,0.00) 62%),
    radial-gradient(800px 520px at 86% 12%, rgba(255,255,255,0.14), rgba(255,255,255,0.00) 60%);
}

.hero-form::after{
  /* vignette to focus on center */
  background: radial-gradient(900px 540px at 50% 45%, rgba(0,0,0,0.05), rgba(0,0,0,0.62));
}

.hero-form .hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  filter: saturate(1.16) contrast(1.12) brightness(0.78);
  transform: scale(1.02);
  pointer-events: none;
}
.hero-form .hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.38));
  pointer-events: none;
}

.hero-form .container{ position:relative; z-index:2 }

.hero-form .form-wrapper{ position:relative; max-width: 1120px; margin: 0 auto }

.hero-form .side-back{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: rgba(255,255,255,0.95);
  font-weight: 800;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(10px);
  transition: all .18s ease;
  width: fit-content;
  margin-bottom: 16px;
}

.hero-form .side-back:hover{ transform: translateY(-1px); background: rgba(0,0,0,0.26) }

.hero-form .form-card-split{
  display:grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  border-radius: 20px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(14px);
}

.hero-form .form-side{
  padding: clamp(18px, 2.2vw, 42px) clamp(18px, 2.2vw, 40px);
  color: #fff;
  background:
    radial-gradient(700px 220px at 20% 0%, rgba(255,255,255,0.16), rgba(255,255,255,0.00) 70%),
    linear-gradient(145deg, rgba(211,47,47,0.92), rgba(138,0,0,0.92));
}

.hero-form .form-title{ margin: 6px 0 10px; font-size: clamp(24px, 2.2vw, 38px); line-height: 1.15; letter-spacing: .2px; font-weight: 800 }
.hero-form .form-lead{ margin: 0 0 18px; color: rgba(255,255,255,0.92); font-size: clamp(13px, 1.1vw, 15px); line-height: 1.6 }

.hero-form .trust-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px }
.hero-form .trust-item{ display:flex; align-items:center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,0.16); border: 1px solid rgba(255,255,255,0.14); font-weight: 700; font-size: 13px }
.hero-form .trust-item i{ color: rgba(255,255,255,0.95) }

.hero-form .side-note{ margin-top: 16px; color: rgba(255,255,255,0.90); font-size: 13px }
.hero-form .side-link{ color: #fff; font-weight: 800; text-decoration: underline }

.hero-form .form-main{
  padding: clamp(18px, 2.2vw, 42px) clamp(18px, 2.2vw, 40px);
  background: rgba(255,255,255,0.98);
  color: #111;
}

.hero-form .form-row{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px }
.hero-form .field{ display:flex; flex-direction:column; gap: 8px }
.hero-form .field-full{ margin-top: 2px }

.hero-form .form-label{ font-weight: 800; font-size: 13px; color: rgba(17,17,17,0.78) }

.hero-form .form-input{
  width:100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(17,17,17,0.14);
  background: #F7F7F8;
  color: #111;
  font-size: 15px;
  outline: none;
  transition: all .18s ease;
}

.hero-form textarea.form-input{ resize: vertical; min-height: 110px }
.hero-form .form-input::placeholder{ color: rgba(17,17,17,0.45) }
.hero-form .form-input:focus{ border-color: rgba(211,47,47,0.60); box-shadow: 0 0 0 4px rgba(211,47,47,0.16); background: #fff }
.hero-form select.form-input{ cursor: pointer }

.hero-form .input-hint{ margin-top: -2px; font-size: 12px; color: rgba(17,17,17,0.55) }

.hero-form .form-actions{ display:flex; gap: 12px; margin-top: 6px }
.hero-form .form-actions .btn{ width: 100%; padding: 14px 18px; font-weight: 900; border-radius: 14px }
.hero-form .form-actions .btn-primary{ background: linear-gradient(135deg, #d32f2f, #8a0000) }
.hero-form .form-actions .btn-primary:hover{ background: linear-gradient(135deg, #b71c1c, #6f0000) }

.hero-form .form-feedback{ display:none; margin-top: 12px; padding: 12px 14px; border-radius: 12px; font-weight: 800; border: 1px solid transparent }
.hero-form .form-feedback.visible{ display:block }
.hero-form .form-feedback[data-type="success"]{ background: #ECFDF3; color: #065F46; border-color: rgba(6,95,70,0.18) }
.hero-form .form-feedback[data-type="error"]{ background: #FEF2F2; color: #7F1D1D; border-color: rgba(127,29,29,0.18) }

.hero-form .small{ font-size: 12px; margin-top: 10px }
.hero-form .muted{ color: rgba(17,17,17,0.60) }

.hero-form .form-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.hero-form .small-logo img{
  max-height: 46px;
  width: auto;
  display:block;
}

.hero-form .back-link{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: rgba(17,17,17,0.75);
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(17,17,17,0.10);
  background: rgba(255,255,255,0.70);
  transition: all .18s ease;
}

.hero-form .back-link:hover{
  transform: translateY(-1px);
  color: #111;
  border-color: rgba(17,17,17,0.18);
}

.hero-form .form-card h2{
  color: #111;
  text-align: left;
  margin: 10px 0 6px;
  font-size: 28px;
  letter-spacing: 0.2px;
}

.hero-form .form-card .section-subtitle{
  text-align: left;
  color: rgba(17,17,17,0.70);
  margin: 0 0 14px;
  font-size: 14px;
}

.hero-form .form-highlights{
  list-style:none;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0 0 18px;
}

.hero-form .form-highlights li{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(211,47,47,0.08);
  border: 1px solid rgba(211,47,47,0.16);
  color: rgba(17,17,17,0.85);
  font-weight: 600;
  font-size: 12px;
}

.hero-form .form-highlights i{ color: var(--primary-color) }

.hero-form .form-row{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 12px }
@media (max-width: 820px){ .hero-form .form-row{ grid-template-columns: 1fr } }

.hero-form .field{ display:flex; flex-direction:column; gap: 8px }
.hero-form .form-label{ font-weight: 700; font-size: 13px; color: rgba(17,17,17,0.78) }

.hero-form .form-input{
  width:100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(17,17,17,0.14);
  background: rgba(255,255,255,0.98);
  color: #111;
  font-size: 15px;
  outline: none;
  transition: all .18s ease;
}

.hero-form .form-input::placeholder{ color: rgba(17,17,17,0.45) }

.hero-form .form-input:focus{
  border-color: rgba(211,47,47,0.55);
  box-shadow: 0 0 0 4px rgba(211,47,47,0.18);
}

.hero-form select.form-input{ cursor: pointer }

.hero-form .form-actions{ display:flex; gap: 12px; margin-top: 6px }
.hero-form .form-actions .btn{ width: 100%; padding: 14px 18px; font-weight: 800 }

.hero-form .form-feedback{
  display:none;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 700;
  border: 1px solid transparent;
}

.hero-form .form-feedback.visible{ display:block }
.hero-form .form-feedback[data-type="success"]{ background: #ECFDF3; color: #065F46; border-color: rgba(6,95,70,0.18) }
.hero-form .form-feedback[data-type="error"]{ background: #FEF2F2; color: #7F1D1D; border-color: rgba(127,29,29,0.18) }

.hero-form .small{ font-size: 12px; margin-top: 10px }
.hero-form .muted{ color: rgba(17,17,17,0.60) }

/* Accessibility helper (kept for other pages) */
.sr-only{ position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap }

@media (max-width:480px){
  .hero-form{ padding: 86px 0 44px }
  .hero-form .form-side,
  .hero-form .form-main{ padding: 18px }
  .hero-form .form-title{ font-size: 24px }
  .hero-form .trust-grid{ grid-template-columns: 1fr }
}

@media (max-width:920px){
  .hero-form .form-card-split{ grid-template-columns: 1fr }
  .hero-form .form-row{ grid-template-columns: 1fr }
  .hero-form .form-wrapper{ display:flex; flex-direction:column; gap: 10px }
}


.hero-content h2 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 1.2;
}

.hero-content p {
  font-size: 18px;
  margin-bottom: 30px;
  font-weight: 300;
}

/* ===== SECTIONS ===== */
.section {
  padding: 80px 0;
  position: relative;
}

.section h2 {
  font-family: 'Orbitron', 'DKC Forever', 'Great Vibes', cursive;
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 15px;
  text-align: center;
  color: var(--secondary-color); /* títulos brancos por padrão (bom para fundo vermelho) */
  letter-spacing: 0.6px;
}

/* Se a seção tiver fundo claro, usar título escuro */
.section.bg-light h2,
.bg-light h2 {
  color: var(--primary-dark);
}

.section-subtitle {
  text-align: center;
  color: rgba(255,255,255,0.9); /* subtítulo claro por padrão para contraste em vermelho */
  font-size: 16px;
  margin-bottom: 50px;
  font-weight: 300;
}

/* manter subtítulos escuros quando a seção for clara */
.section.bg-light .section-subtitle,
.bg-light .section-subtitle {
  color: var(--text-light);
}

.bg-light {
  background: var(--secondary-color);
}

.bg-dark {
  background: var(--dark-bg);
  color: white;
}

.bg-dark h2 {
  color: white;
}

.bg-dark .section-subtitle {
  color: rgba(255, 255, 255, 0.7);
}

/* ===== SOBRE ===== */
.about-text {
  max-width: 800px;
  margin: 0 auto 60px;
  font-size: 16px;
  color: rgba(255,255,255,0.92);
  line-height: 1.8;
}

/* Em seções claras, manter o texto escuro */
.section.bg-light .about-text,
.bg-light .about-text {
  color: #111;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  margin-top: 60px;
}

.stat {
  text-align: center;
  padding: 30px;
}

.stat-number {
  font-size: 36px;
  font-weight: 700;
  color: var(--primary-color);
  margin: 10px 0;
}

/* ===== GRID SERVIÇOS ===== */
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 50px;
}

@media (max-width: 980px){
  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Quando houver quantidade ímpar (ex.: 9), centraliza o último card no layout de 2 colunas */
  .grid > .card:last-child:nth-child(odd){
    grid-column: 1 / -1;
    justify-self: center;
    width: min(560px, 100%);
  }
}

@media (max-width: 600px){
  .grid{ grid-template-columns: 1fr; gap: 18px; }
  .grid > .card:last-child:nth-child(odd){
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }
}

.card {
  background: #fff;
  padding: 40px 30px;
  text-align: center;
  border-radius: var(--border-radius);
  transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.04);
}

.bg-light .card {
  background: white;
}

.card i {
  font-size: 40px;
  color: var(--primary-color);
  margin-bottom: 20px;
  display: block;
}

.card h3 {
  margin: 15px 0;
  font-size: 18px;
  font-weight: 600;
}

.card p {
  color: var(--text-light);
  font-size: 14px;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(211, 47, 47, 0.15);
}

/* ===== PORTFÓLIO ===== */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 50px 0;
}

/* Carrossel (mostra 3 por vez no desktop; 2/1 em telas menores via JS) */
.portfolio-carousel{
  --spv: 3;
  --gap: 18px;
  margin: 50px 0;
  position: relative;
}

.portfolio-viewport{
  overflow: hidden;
  border-radius: calc(var(--border-radius) + 6px);
}

.portfolio-track{
  display: flex;
  gap: var(--gap);
  will-change: transform;
  transition: transform 320ms ease;
}

.portfolio-slide{
  flex: 0 0 calc((100% - (var(--gap) * (var(--spv) - 1))) / var(--spv));
}

.portfolio-carousel .carousel-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.28);
  color: rgba(255,255,255,0.95);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 3;
  transition: transform .16s ease, background .16s ease;
}

.portfolio-carousel .carousel-btn:hover{
  transform: translateY(-50%) scale(1.04);
  background: rgba(0,0,0,0.38);
}

.portfolio-carousel .carousel-btn.prev{ left: -10px }
.portfolio-carousel .carousel-btn.next{ right: -10px }

.portfolio-carousel .carousel-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.18);
}

.carousel-dots{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.carousel-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.12);
  cursor: pointer;
  padding: 0;
}

.carousel-dot[aria-current="true"]{
  background: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.92);
}

.portfolio-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  cursor: pointer;
  height: clamp(220px, 22vw, 320px);
}

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

.portfolio-item:hover img {
  transform: scale(1.05);
}

@media (max-width: 520px){
  .portfolio-carousel{ --gap: 14px }
  .portfolio-carousel .carousel-btn{ width: 40px; height: 40px }
  .portfolio-carousel .carousel-btn.prev{ left: -6px }
  .portfolio-carousel .carousel-btn.next{ right: -6px }
}

.portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

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

.portfolio-cta {
  text-align: center;
  margin-top: 60px;
  padding: 40px;
  background: var(--secondary-color);
  border-radius: var(--border-radius);
}

.portfolio-cta p {
  font-size: 18px;
  margin-bottom: 20px;
  font-weight: 500;
}

/* ===== MODAL ===== */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.modal-content {
  position: relative;
  width: 90%;
  max-width: 900px;
}

.modal img {
  width: 100%;
  border-radius: var(--border-radius);
  animation: zoomIn 0.3s ease;
}

.modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  color: white;
  font-size: 36px;
  cursor: pointer;
  font-weight: 300;
}

/* ===== DIFERENCIAIS ===== */
.diferenciais-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-top: 50px;
}

.diferencial {
  text-align: center;
  padding: 30px;
}

.diferencial-icon {
  width: 80px;
  height: 80px;
  background: var(--primary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 32px;
}

.diferencial h3 {
  font-size: 18px;
  margin: 15px 0;
  font-weight: 600;
}

.diferencial p {
  color: var(--text-light);
  font-size: 14px;
}

/* ===== DEPOIMENTOS ===== */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 50px;
}

.testimonial {
  background: var(--secondary-color);
  padding: 30px;
  border-radius: var(--border-radius);
  border-left: 4px solid var(--primary-color);
}

.stars {
  color: #ffc107;
  margin-bottom: 15px;
  font-size: 14px;
}

.testimonial p {
  font-style: italic;
  margin: 15px 0;
  color: #333;
}

.testimonial span {
  color: var(--text-light);
  font-size: 14px;
  font-weight: 600;
}

/* ===== FORM ===== */
.contato-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 50px;
  align-items: center;
}

/* ===== CONTATO (HOME) ===== */
#contato .contato-wrapper{
  gap: 24px;
  align-items: stretch;
  grid-template-columns: 1fr;
  justify-items: center;
}

#contato .contato-card{
  width: 100%;
  max-width: 1120px;
  padding: clamp(18px, 2.2vw, 32px);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.22);
}

#contato .contato-card-wide{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(16px, 2vw, 26px);
}

#contato .contato-right{
  padding-left: clamp(16px, 2vw, 26px);
  border-left: 1px solid rgba(255,255,255,0.14);
}

#contato .contato-title{
  margin: 0 0 10px;
  font-size: clamp(16px, 1.2vw, 20px);
  font-weight: 800;
  color: rgba(255,255,255,0.95);
}

#contato .contato-mini{
  margin: 6px 0 14px;
  color: rgba(255,255,255,0.88);
  font-size: clamp(13px, 1.05vw, 15px);
}

#contato .contato-points{
  list-style: none;
  padding: 0;
  margin: 14px 0 18px;
  display: grid;
  gap: 10px;
}

#contato .contato-points li{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.16);
  color: rgba(255,255,255,0.92);
  font-weight: 700;
  font-size: 13px;
}

#contato .contato-points i{ color: rgba(255,255,255,0.95) }

#contato .contato-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

#contato .contato-actions .btn{ text-align: center }

.btn-ghost{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.22);
}

.btn-ghost:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.30);
}

#contato .contato-note{
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.78);
}

#contato .contato-meta{
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

#contato .contato-meta-item{
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(255,255,255,0.90);
  font-weight: 700;
  font-size: 13px;
}

#contato .contato-meta-item a{ color: rgba(255,255,255,0.95); text-decoration: underline }

@media (max-width: 768px){
  #contato .contato-card-wide{ grid-template-columns: 1fr }
  #contato .contato-right{ padding-left: 0; border-left: none; border-top: 1px solid rgba(255,255,255,0.14); padding-top: 18px }
}

@media (max-width: 420px){
  .whatsapp-float{
    right: 14px;
    bottom: 14px;
    padding: 13px;
    font-size: 22px;
  }
}

#formContato {
  display: grid;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

input,
textarea {
  padding: 15px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--border-radius);
  font-family: 'Montserrat', sans-serif;
  background: #fff;
  color: #111;
  font-size: 14px;
  transition: all 0.3s ease;
}

.formulario-page input::placeholder,
.formulario-page textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.formulario-page input:focus,
.formulario-page textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  background: rgba(255, 255, 255, 0.15);
}

button {
  padding: 15px;
  border: none;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  font-weight: 600;
}

/* ===== FORMULÁRIO PÁGINA ===== */
.formulario-page .container { max-width: 900px; }
.formulario-page .formulario { display:flex;flex-direction:column;gap:16px;max-width:720px;margin:0 auto; }
.formulario-page .form-input { width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(0,0,0,0.08);font-size:15px;background:#fff;color:#111;box-shadow:0 6px 18px rgba(0,0,0,0.06); }
.formulario-page .form-input::placeholder { color: rgba(0,0,0,0.5); }
.formulario-page .formulario select.form-input { appearance:none }
.formulario-page .formulario .btn-primary { padding:12px 28px; align-self:flex-start }
.formulario-page .logo { max-height:48px }

/* Evita que o header fixo sobreponha o conteúdo do formulário */
.formulario-page { padding-top: 90px; }

/* estilo específico da página de formulário - card central sobre imagem */
.formulario-page {
  background: linear-gradient(180deg, rgba(179,0,0,0.95) 0%, rgba(140,0,0,0.85) 100%), url("https://megavidrospremium.com.br/assets/Foto-1.jpeg") center/cover no-repeat;
  position: relative;
  color: var(--secondary-color);
}
.formulario-page .container { padding: 60px 0; }
.formulario-page .form-card {
  max-width: 460px;
  margin: 0 auto;
  /* card adapted from reference (keeps site look) */
  width: 100%;
  max-width: 480px;
  padding: 34px 28px;
  border-radius: 16px;

  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.06);
}
.formulario-page .form-card h2 { font-family: 'Orbitron', sans-serif; color: var(--secondary-color); font-size:28px; margin-bottom:6px; }
.formulario-page .form-card .section-subtitle { color: rgba(255,255,255,0.85); margin-bottom:18px }

/* inputs styled like the reference but using the site's color variables */
.formulario-page .form-card .form-input,
.formulario-page .form-card input.form-input,
.formulario-page .form-card textarea.form-input,
.formulario-page .form-card select.form-input {
  width: 100%;
  padding: 14px 18px;
  font-size: 1rem;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  margin-bottom: 12px;
  transition: 0.25s;
  box-shadow: none;
}

.formulario-page .form-card .form-input::placeholder { color: rgba(255, 255, 255, 0.6); }

.formulario-page .form-card .form-input:focus {
  outline: none;
  border-color: var(--primary-color);
  background: rgba(255, 255, 255, 0.12);
  transform: scale(1.02);
}

.formulario-page .form-card select.form-input option { background: rgba(0,0,0,0.6); color: #fff }

/* botão full-width com degradê usando variáveis */
.formulario-page .form-card .btn-primary {
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: var(--secondary-color);
  border: none;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: 0.25s;
  margin-top: 10px;
}

.formulario-page .form-card .btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}

@media (max-width: 768px){
  .formulario-page .form-card { margin: 20px; padding: 24px }
  .formulario-page .form-card h2 { font-size:22px }
}

/* contato wrapper CTA variant */
.contato-cta { display:flex;flex-direction:column;gap:14px;align-items:flex-start }
.contato-cta .about-text { margin:0; color:var(--secondary-color); }
.section.bg-light .contato-cta .about-text { color:#111 }

@media (max-width:768px){
  .contato-wrapper{grid-template-columns:1fr}
  .contato-cta{align-items:center;text-align:center}
}

.contato-info {
  text-align: center;
}

.contato-info h3 {
  margin-bottom: 30px;
  font-size: 18px;
}

.contato-info .btn-whatsapp {
  font-size: 16px;
  padding: 15px 30px;
}

/* ===== FOOTER ===== */
footer {
  background: #fff;
  color: #111;
  padding: 40px 0 0;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-bottom: 20px;
}

.footer-section h4 {
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 600;
}

.footer-section p {
  color: rgba(0,0,0,0.7);
  font-size: 14px;
  line-height: 1.6;
}

.social-links-footer a {
  margin-right: 14px;
  color: var(--primary-color);
  font-size: 20px;
  text-decoration: none;
}

.social-links-footer a:hover {
  color: var(--primary-dark);
}

.footer-section ul {
  list-style: none;
}

.footer-section ul li {
  margin-bottom: 10px;
}

.footer-section a {
  color: rgba(0,0,0,0.7);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-section a:hover {
  color: var(--primary-color);
}

.footer-bottom {
  text-align: center;
  padding: 20px;
  border-top: 4px solid var(--primary-color);
  color: var(--primary-color);
  font-size: 14px;
}

/* ===== WHATSAPP FLUTUANTE ===== */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #25d366;
  color: white;
  padding: 15px;
  border-radius: 50%;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  z-index: 999;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}

/* ===== ANIMAÇÕES ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes zoomIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ===== RESPONSIVO ===== */
@media (max-width: 768px) {
  .header nav ul {
    gap: 15px;
  }

  .header a {
    font-size: 12px;
  }

  .hero-content h2 {
    font-size: 32px;
  }

  .hero-content p {
    font-size: 16px;
  }

  .hero-content h2{
    font-family:'Orbitron',sans-serif;
  }

  .section {
    padding: 60px 0;
  }

  .section h2 {
    font-size: 28px;
  }

  .contato-wrapper {
    grid-template-columns: 1fr;
  }

  .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-section ul,
  .footer-section {
    text-align: center;
  }

  .footer-section ul li {
    margin: 8px 0;
  }
}