/* ===================================
   VARIAVEIS CSS - Design System
   =================================== */
:root{
  --brand:#ff6a00;
  --brand-2:#ffb100;
  --brand-dark:#f05a28;
  --text:#2b2b2b;
  --muted:#7a7a7a;
  --bg:#ffffff;
  --chip:#e9e9ea;
  --grey-100:#f6f6f7;
  --grey-200:#eeeeef;
  --grey-300:#d9d9db;
  --stroke:#e3e3e6;
  --accent:#ff7a1a;
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

/* ===================================
   RESET - Configurações globais
   =================================== */
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;line-height:1.35}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1120px,92%);margin:auto}
.pill{border-radius:999px}
.btn{
  display:inline-block;padding:.95rem 1.5rem;border-radius:999px;background:var(--accent);color:#fff;
  font-weight:700;letter-spacing:.02em;border:none;box-shadow:0 8px 20px rgba(255,122,26,.35);
  cursor:pointer;transition:all 0.3s ease;
}
.btn:hover{
  transform:scale(1.05);
  box-shadow:0 12px 30px rgba(255,122,26,.5), 0 0 20px rgba(255,122,26,.3);
}
.btn:active{transform:scale(0.98)}
.section{padding:56px 0}

/* ===================================
   HEADER - Cabeçalho fixo
   =================================== */
header{
  border-bottom:1px solid var(--stroke);
  background:#fff;
  position:sticky;top:0;z-index:50;
}
.topbar{display:flex;align-items:center;gap:18px;padding:14px 0}
.logo{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  letter-spacing:.02em;
  height:60px;
  overflow:visible;
}
.logo img{
  height:220px;
  width:auto;
  object-fit:contain;
  margin-top:-90px;
  margin-bottom:-70px;
}
nav{margin-left:auto;display:flex;gap:20px;align-items:center}
nav a{
  font-weight:600;color:#444;padding:8px 16px;border-radius:20px;
  transition:all 0.3s ease;position:relative;text-decoration:none;
}
nav a:hover{
  background:var(--brand);color:#fff;transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(255,106,0,0.3);
}

/* ===================================
   HERO - Banner principal
   =================================== */
.hero{
  width: 100%;
  overflow: hidden;
  position: relative;
}

.hero-banner {
  width: 100%;
  height: auto;
  display: block;
}

/* ===================================
   INTRO - Apresentação empresa
   =================================== */
.intro{padding:32px 0 18px;text-align:center;color:#fff}
.intro p{color:#1f1f1f;margin:16px auto 0;max-width:720px;font-weight:500}

/* Estilo para citação na intro */
.intro-quote{
  color:#1f1f1f;
  margin:16px auto 0;
  max-width:800px;
  font-weight:500;
  font-size:18px;
  line-height:1.6;
  position:relative;
  padding:0;
  border:none;
}

.quote-mark{
  font-size:48px;
  color:var(--brand);
  font-weight:700;
  line-height:1;
  position:relative;
  top:8px;
}

/* ===================================
   CARDS - Cartões de categorias
   =================================== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:26px auto 0;width:min(920px,96%)}
.card{
  background:#fff;border-radius:22px;padding:10px;box-shadow:var(--shadow);position:relative;overflow:hidden;cursor:pointer
}
.card .thumb{height:170px;border-radius:16px;overflow:hidden}
.card h3{
  position:absolute;left:26px;bottom:18px;margin:0;color:#fff;font-weight:800;font-size:26px;text-shadow:0 3px 18px rgba(0,0,0,.35)
}
.chip-canto{
  position:absolute;inset:auto 12px 12px auto;background:#00000033;color:#fff;
  font-weight:700;padding:.2rem .6rem;border-radius:999px;font-size:12px
}

/* ===================================
   OFERTAS - Seção com streamings
   =================================== */
.ofertas-full-width {
  padding: 0;
}

.ofertas-full-width .bloco-cinza {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

.bloco-cinza{
  margin-top:48px;background:#ffffff;border:1px solid #f1f1f3;border-radius:var(--radius-xl);
  padding:60px 0;position:relative;overflow:hidden;
  min-height:auto;
}
.bloco-grid{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  max-width:1000px;margin:0 auto;
}
.poster{
  border-radius:20px;overflow:hidden;box-shadow:var(--shadow);
  height:300px;width:100%;
}
.poster img{
  width:100%;height:100%;object-fit:cover;
}
.bloco-text{
  padding:20px 0;
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:300px;
}
.ofertas-container .bloco-text{
  padding-left:60px;
  max-width:650px;
  margin-left:auto;
  text-align:left;
  overflow:visible;
}
.ofertas-container .content-header h2{
  text-align:right;
}
.ofertas-container .subtitle{
  text-align:right;
}
.ofertas-container .entertainment-benefits h3{
  text-align:right;
}
.ofertas-container .cta-section{
  display:flex;
  justify-content:flex-end;
}

/* Header do conteúdo */
.content-header{
  margin-bottom:30px;
}
.bloco-text h2{
  margin:0 0 16px;font-size:clamp(28px, 4vw, 40px);line-height:1.2;font-weight:800;
}
.bloco-text h2 .t2{color:#ff7a1a}
.subtitle{
  margin:0 !important;font-size:clamp(16px, 2vw, 18px);line-height:1.5;color:#5e5e66 !important;
  max-width:100% !important;
}

/* Seção de benefícios */
.entertainment-benefits{
  margin-bottom:30px;
  width:100%;
  overflow:visible;
}
.entertainment-benefits h3{
  margin:0 0 10px;font-size:clamp(14px, 2vw, 16px);font-weight:700;color:#333;
  text-transform:uppercase;letter-spacing:0.5px;
  text-align:center;
}
.streamings{
  display:flex;align-items:center;justify-content:flex-end;gap:clamp(12px, 2vw, 24px);flex-wrap:nowrap;
  padding:6px 20px;background:rgba(255,255,255,0.8);border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  overflow:visible;
  min-width:100%;
  width:fit-content;
}
.streamings img{
  transition:all 0.3s ease;
  filter:grayscale(100%);
  opacity:0.7;
}
.streamings img:hover{
  transform:scale(1.1);
  filter:grayscale(0%);
  opacity:1;
}

/* Ajustes específicos para logos dos parceiros - tamanhos proporcionais */
/* Compensando espaço em branco nas imagens para equalizar tamanho visual */
.streamings a{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  min-width: fit-content;
}
.streamings img{
  max-width: none;
  min-width: 30px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
  visibility: visible;
}
.streamings img[src*="logo_hbo"]{
  height:clamp(35px, 4.5vw, 48px) !important;
  min-width: 60px;
}
.streamings img[src*="logo_paramount"]{
  height:clamp(24px, 3vw, 32px) !important;
}
.streamings img[src*="LOGO_WATCH"]{
  height:clamp(32px, 4vw, 42px) !important;
}
.streamings img[src*="digilivro_index"]{
  height:clamp(90px, 11vw, 130px) !important;
}
.streamings img[src*="logo_jornalz"]{
  height:clamp(95px, 12vw, 140px) !important;
}

/* Seção de CTAs */
.cta-section{
  margin-top:auto;
}
.cta-row{display:flex;gap:16px;flex-wrap:wrap;}
.btn-outline{
  padding:.9rem 1.4rem;border-radius:999px;border:2px solid var(--brand-dark);color:var(--brand-dark);
  font-weight:800;background:#fff;transition:all 0.3s ease;cursor:pointer;
}
.btn-outline:hover{
  transform:scale(1.05);
  box-shadow:0 8px 25px rgba(240,90,40,.4), 0 0 15px rgba(240,90,40,.2);
  border-color:var(--accent);
}

/* ===================================
   FORMULÁRIO - Contato/orçamento
   =================================== */
.faixa-form{
  margin-top:60px;background:#efeff2;border-radius:28px;padding:50px 40px;border:1px solid var(--stroke)
}
.faixa-form h3{
  text-align:center;margin:0 0 20px;font-size:clamp(28px, 4vw, 40px);line-height:1.2;
  font-family:'Gotham Ultra', 'Gotham', sans-serif;font-weight:800;
}
.faixa-form p{color:var(--muted);text-align:center;margin:0 0 30px;font-size:16px;line-height:1.5}
.form-wrap{
  background:#d8d8de;border-radius:26px;padding:35px 30px;max-width:820px;margin:0 auto;
  box-shadow:inset 0 0 0 1px #cfcfd4
}
.inputs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.inputs .full{grid-column:1/-1}
.input{
  background:#fff;
  border:1px solid #dbdbe2;
  border-radius:999px;
  padding:16px 20px;
  font-family:var(--input-font, 'Gotham', 'Montserrat', sans-serif);
  font-size:15px;
  font-weight:500;
  min-height:20px;
  transition:all 0.3s ease;
}
.input:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(255,106,0,0.1);
}
.select-wrapper{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.select-wrapper label{
  font-family:'Gotham', sans-serif;
  font-size:14px;
  font-weight:600;
  color:#333;
  padding-left:20px;
}
.select-wrapper select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23333' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 20px center;
  padding-right:45px;
  cursor:pointer;
}
.select-wrapper select option{
  padding:10px;
}
.input::placeholder{
  color:#a0a0a6;
  font-family:var(--input-font, 'Gotham', 'Montserrat', sans-serif);
  font-weight:400;
}
.submit{display:flex;justify-content:center;margin-top:24px}

/* ===================================
   APP - Aplicativo móvel
   =================================== */
.app{display:grid;grid-template-columns:1fr 340px;gap:38px;align-items:center}
.app h3{margin:0;font-size:32px}
.app-title{
  font-family:'Gotham Ultra', 'Gotham', sans-serif !important;
  font-size:clamp(32px, 4.5vw, 48px) !important;
  font-weight:800 !important;
  font-style:italic;
  margin:10px 0 20px 0 !important;
  letter-spacing:0.02em;
}
.app-text{
  color:#5e5e66 !important;
  max-width:450px !important;
  font-size:clamp(16px, 2vw, 18px);
  line-height:1.6;
  margin-bottom:25px;
}
.app-content{
  background:rgba(255,255,255,0.85);
  padding:30px;
  border-radius:20px;
  backdrop-filter:blur(5px);
}
.app .sub{color:#7c7c84;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.phone{border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}

/* ===================================
   DEPOIMENTOS - Avaliações clientes
   =================================== */
.depo{margin-top:22px}
.depo h4{text-align:center;margin:0 0 18px;letter-spacing:.08em;color:#808089;font-weight:800}
.cards-depo{
  display: flex;
  gap: 25px;
  animation: testimonialScroll 20s linear infinite;
  white-space: nowrap;
}
.dep-card{
  background: linear-gradient(135deg, #fff 0%, #fafafa 100%);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  width: 320px;
  height: 320px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 1rem;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dep-card::before {
  content: '"';
  position: absolute;
  top: 16px;
  left: 20px;
  font-size: 3rem;
  color: var(--brand);
  font-weight: 800;
  opacity: 0.3;
}

.dep-card p{
  color: #444;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  line-height: 1.5;
  margin: 0;
  font-style: italic;
  font-size: 1.1rem;
  text-align: center;
  align-self: center;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dep-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.dep-user{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}
.dep-user img{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--brand);
}
.dep-user .who{
  font-weight: 700;
  font-size: 1rem;
  color: #333;
  margin: 0;
}
.dep-user .where{
  font-size: 0.85rem;
  color: var(--brand);
  font-weight: 600;
}

/* ===================================
   ICON GRID - Grid decorativo
   =================================== */
.icongrid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin:28px 0 12px;opacity:.9
}
.icongrid .ico{
  height: 50px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--stroke);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.logo-partner {
  font-size: 0.75rem;
  font-weight: 600;
  color: #666;
  text-align: center;
  line-height: 1.2;
}

.icongrid .ico:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border-color: var(--brand);
}

/* ===================================
   SOCIAL ICONS - Ícones de redes sociais
   =================================== */
.social {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.social-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e9e9f3;
  border-radius: 50%;
  transition: all 0.3s ease;
  color: #555;
}

.social-icon:hover {
  background: var(--brand);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(255, 106, 0, 0.3);
}

/* ===================================
   FOOTER - Rodapé com contato e mapa do site
   =================================== */
footer {
  background: #f5f5f7;
  border-top: 1px solid var(--stroke);
  margin-top: 40px;
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-column {
  display: flex;
  flex-direction: column;
}

.footer-description {
  color: #b0b0b0;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 20px;
  max-width: 300px;
}

.footer-title {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #b0b0b0;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
  display: inline-block;
}

.footer-links a:hover {
  color: var(--brand);
  transform: translateX(5px);
}

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-contact li {
  color: #b0b0b0;
  font-size: 14px;
  margin-bottom: 12px;
  line-height: 1.6;
}

.footer-bottom {
  text-align: center;
  padding: 25px 0;
  color: #8a8a93;
  font-size: 14px;
}

.footer-bottom p {
  margin: 5px 0;
}

.footer-dev {
  font-size: 13px;
  margin-top: 8px;
}

.footer-dev a {
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.footer-dev a:hover {
  color: var(--brand-2);
}

/* Footer Logo Override */
footer .logo {
  height: auto;
  overflow: visible;
}

footer .logo img {
  margin-top: 0;
  margin-bottom: 0;
}

/* Estilos antigos para compatibilidade */
.foot {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
  padding: 30px 0;
}

.contact {
  background: #fff;
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
  height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contact .logo {
  height: 40px;
  overflow: visible;
  display: flex;
  align-items: center;
}

.contact .logo img {
  height: 200px;
  width: auto;
  object-fit: contain;
  margin-top: -80px;
  margin-bottom: -80px;
}

.contact .line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  color: #555;
  font-size: 13px;
  line-height: 1.4;
}

.contact .social {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.contact .social .social-icon {
  width: 32px;
  height: 32px;
}

.map {
  background: #e9ecf3;
  border: 1px solid var(--stroke);
  height: 220px;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5c6b82;
}

/* Footer Sitemap */
.footer-sitemap {
  background: #fff;
  border-top: 1px solid var(--stroke);
  padding: 30px 0;
  margin-top: 20px;
}

.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.sitemap-column h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sitemap-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sitemap-column ul li {
  margin-bottom: 8px;
}

.sitemap-column ul li a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
  display: inline-block;
}

.sitemap-column ul li a:hover {
  color: var(--brand);
  transform: translateX(3px);
}

/* ===================================
   RESPONSIVO - Media queries
   =================================== */
@media (max-width:1000px){
  .cards{grid-template-columns:1fr 1fr}
  .bloco-grid{grid-template-columns:1fr;gap:30px;text-align:center;}
  .poster{height:250px;max-width:400px;margin:0 auto;}
  .bloco-text{min-height:auto;padding:30px 20px;}
  .content-header{margin-bottom:25px;}
  .entertainment-benefits{margin-bottom:30px;}
  .app{grid-template-columns:1fr}
  .icongrid{grid-template-columns:repeat(8,1fr)}
  .foot{grid-template-columns:1fr}
  .footer-content{grid-template-columns:1fr 1fr 1fr;gap:30px;}
  .footer-column:first-child{grid-column:1 / -1;}
}

@media (max-width:768px){
  .bloco-cinza{padding:40px 20px;margin-top:30px;}
  .poster{height:200px;max-width:350px;}
  .bloco-text{padding:20px 0;}
  .streamings{gap:15px;padding:12px;justify-content:center;}
  .cta-row{justify-content:center;gap:12px;}
  .entertainment-benefits h3{text-align:center;}
}

@media (max-width:640px){
  .hero h1{font-size:32px}
  .cards{grid-template-columns:1fr}
  .inputs{grid-template-columns:1fr}
  .cards-depo{grid-template-columns:1fr}
  nav{display:none}
  .icongrid{grid-template-columns:repeat(6,1fr)}
  .faixa-form h3{font-size:22px}
  .footer-content{grid-template-columns:1fr;gap:35px;}
  .footer-column:first-child{grid-column:1;}
  .footer-description{max-width:100%;}
  .sitemap-grid{grid-template-columns:1fr;gap:25px;}

  /* CORREÇÃO: Logo do header em mobile */
  .topbar{padding:10px 0;}
  .logo{height:50px;}
  .logo img{
    height:160px;
    margin-top:-60px;
    margin-bottom:-50px;
  }

  /* CORREÇÃO: Intro quote em mobile */
  .intro{padding:24px 16px 16px;}
  .intro-quote{
    font-size:15px;
    line-height:1.5;
    max-width:100%;
    padding:0 8px;
  }
  .quote-mark{
    font-size:32px;
    top:4px;
  }

  /* Seção de entretenimento mobile */
  .bloco-cinza{padding:30px 16px;border-radius:20px;}
  .bloco-grid{gap:20px;max-width:100%;padding:0 8px;}
  .poster{height:180px;max-width:100%;}
  .bloco-text{min-height:auto;padding:20px 0;}
  .content-header{margin-bottom:20px;}
  .entertainment-benefits{margin-bottom:25px;}
  .streamings{
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:flex-start;
    padding:5px 16px;
    overflow:visible;
    gap:12px;
  }
  .streamings img[src*="logo_hbo"]{height:26px;}
  .streamings img[src*="logo_paramount"]{height:18px;}
  .streamings img[src*="LOGO_WATCH"]{height:24px;}
  .streamings img[src*="digilivro_index"]{height:70px;}
  .streamings img[src*="logo_jornalz"]{height:75px;}
  .cta-row{flex-direction:column;align-items:center;gap:10px;}
  .btn, .btn-outline{width:100%;max-width:250px;text-align:center;}

  /* CORREÇÃO: Seção ofertas com mosaico em mobile */
  .mosaico-bg{
    background-size:cover;
    background-position:center center !important;
    opacity:0.15;
  }
  .ofertas-container .bloco-grid{
    grid-template-columns:1fr;
    padding:0 16px;
  }
  .ofertas-container .bloco-text{
    padding:20px 8px;
    padding-left:8px !important;
    margin-left:0 !important;
    max-width:100% !important;
  }
  .ofertas-container .content-header h2,
  .ofertas-container .subtitle,
  .ofertas-container .entertainment-benefits h3{
    text-align:center !important;
  }
  .ofertas-container .cta-section{
    justify-content:center !important;
  }

  /* CORREÇÃO: Seção APP em mobile */
  .app{
    grid-template-columns:1fr;
    padding:30px 16px !important;
    min-height:350px !important;
  }
  .app-bg{
    background-size:contain;
    background-position:center bottom !important;
    opacity:0.2;
  }
  .app > div{
    margin-left:0 !important;
    text-align:center;
  }
  .app h3{font-size:24px;}
  .app p{max-width:100% !important;}
  .app .cta-row{
    flex-direction:column;
    align-items:center;
    gap:12px;
  }
  .app .btn, .app .btn-outline{
    width:100%;
    max-width:280px;
  }

  /* CORREÇÃO: Formulário em mobile */
  .faixa-form{
    margin-top:40px;
    padding:30px 20px;
    border-radius:20px;
  }
  .faixa-form h3{
    font-size:20px;
    line-height:1.3;
  }
  .faixa-form p{
    font-size:14px;
    margin-bottom:20px;
  }
  .form-wrap{
    padding:25px 20px;
    border-radius:20px;
  }
  .input{
    padding:14px 18px;
    font-size:14px;
  }

  /* CORREÇÃO: Footer em mobile */
  .foot{
    grid-template-columns:1fr;
    gap:16px;
    padding:20px 0;
  }
  .contact{
    height:auto;
    min-height:200px;
    padding:16px;
  }
  .contact .logo img{
    height:160px;
    margin-top:-60px;
    margin-bottom:-60px;
  }
  .contact .line{
    font-size:12px;
    margin:3px 0;
  }
  .map{
    height:200px;
  }
  .footer-sitemap{
    padding:20px 0;
  }

  /* CORREÇÃO: Adiciona padding lateral ao container em mobile */
  .container{
    width:min(100%, 94%);
  }

  /* CORREÇÃO: Cards das categorias */
  .cards{
    gap:16px;
    margin-top:20px;
  }
  .card-img-link{
    margin-bottom:16px;
  }
}

/* ===================================
   ANIMAÇÕES - Keyframes
   =================================== */
@keyframes heroShadowFloat {
  0% {
    transform: translate(0px, 0px) scale(1) rotate(0deg);
  }
  25% {
    transform: translate(-40px, 30px) scale(1.1) rotate(2deg);
  }
  50% {
    transform: translate(30px, -20px) scale(0.9) rotate(-1deg);
  }
  75% {
    transform: translate(-20px, -40px) scale(1.05) rotate(1.5deg);
  }
  100% {
    transform: translate(0px, 0px) scale(1) rotate(0deg);
  }
}


@keyframes heroLightFloat {
  0% {
    transform: translate(0px, 0px) scale(1) rotate(0deg);
  }
  30% {
    transform: translate(50px, -30px) scale(1.2) rotate(-2deg);
  }
  60% {
    transform: translate(-30px, 40px) scale(0.8) rotate(1deg);
  }
  100% {
    transform: translate(0px, 0px) scale(1) rotate(0deg);
  }
}

@keyframes heroSlideWave {
  0% {
    transform: translateX(-100px) translateY(0px) scale(1);
    opacity: 0.3;
  }
  25% {
    transform: translateX(0px) translateY(-20px) scale(1.1);
    opacity: 0.6;
  }
  50% {
    transform: translateX(100px) translateY(10px) scale(0.9);
    opacity: 0.4;
  }
  75% {
    transform: translateX(200px) translateY(-10px) scale(1.05);
    opacity: 0.5;
  }
  100% {
    transform: translateX(300px) translateY(0px) scale(1);
    opacity: 0.2;
  }
}

/* Estilos para as imagens dos cards */
.card-img-link {
  display: block;
  width: 100%;
  cursor: pointer;
  transition: transform 0.3s ease;
  margin-bottom: 20px;
}

.card-img {
  width: 100%;
  height: auto;
  filter: grayscale(0%);
  transition: filter 0.3s ease, transform 0.3s ease;
}

.card-img-link:hover .card-img {
  filter: drop-shadow(0 0 2px rgba(255, 106, 0, 0.7)) drop-shadow(0 0 5px rgba(255, 106, 0, 0.3));
  transform: scale(1.05);
}

/* Efeito preto e branco apenas no desktop */
@media (min-width: 1025px) {
  .card-img {
    filter: grayscale(100%) brightness(1.05);
  }

  .card-img-link:hover .card-img,
  .card-img-link:focus .card-img,
  .card-img-link.active .card-img {
    filter: grayscale(0%) brightness(1);
    transform: scale(1.05);
  }

  /* Ajuste da seção ofertas - conteúdo até a borda direita */
  .ofertas-grid-desktop {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 60px 0;
    grid-template-columns: 1fr 1fr;
    display: grid;
    gap: 0;
  }

  .ofertas-text-desktop {
    padding-left: 80px !important;
    padding-right: 120px !important;
    max-width: 700px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

/* Animação de scroll para depoimentos - Loop infinito perfeito */
@keyframes testimonialScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Animação adicional para elementos flutuantes */
@keyframes heroOrb {
  0%, 100% {
    transform: translate(0px, 0px) scale(1);
    opacity: 0.1;
  }
  50% {
    transform: translate(-60px, -80px) scale(1.3);
    opacity: 0.3;
  }
}


/* Animação de pulso de conexão */
@keyframes connectionPulse {
  0% {
    background-position: 0% 0%, 0% 0%;
    opacity: 0.3;
  }
  50% {
    background-position: 100% 0%, 50% 50%;
    opacity: 0.6;
  }
  100% {
    background-position: 200% 0%, 100% 100%;
    opacity: 0.3;
  }
}