/* =================== CONFIGURAÇÃO GLOBAL E VARIÁVEIS =================== */
:root{
  --brand:#003399;
  --accent:#ffd801;
  --ink:#0b0f19;
  --bg:#ffffff;
  --muted:#5c6a8a;
  --line:#e6ebf5;
  --whatsapp-green: #25D366;
  --radius: 16px;
  --radius-lg: 22px;
  --container: 1180px;
  --step--1: clamp(.9rem, .85rem + .2vw, 1rem);
  --step-0: clamp(1rem, .95rem + .35vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
  --step-2: clamp(1.6rem, 1.25rem + 1.8vw, 2.4rem);
  --step-3: clamp(2rem, 1.5rem + 3vw, 3rem);
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* =================== RESET E ESTILOS BASE =================== */
*{ box-sizing:border-box }
html{ 
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font: 400 var(--step-0)/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  text-rendering: optimizeLegibility;
}

/* =================== UTILITÁRIOS =================== */
.container{ width:min(100% - 2rem, var(--container)); margin-inline:auto }
.skip{ position:absolute; left:-9999px; top:auto }
.skip:focus{ left:1rem; top:1rem; background:#fff; padding:.5rem .75rem; border:2px solid var(--brand) }

/* =================== HEADER =================== */
.header{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.8);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}
.header__row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 0 }
.brand{ display:flex; align-items:center; gap:.6rem; color:var(--brand); text-decoration:none; font-weight:700 }
.brand img { max-height: 500px; width: auto; }
.nav__toggle{
  display:none;
  background:transparent; border:1px solid var(--line); padding:.55rem .8rem; border-radius:10px;
}
.nav__list{ display:flex; align-items:center; gap:1rem; list-style:none; margin:0; padding:0 }
.nav__list a:not(.btn){
  text-decoration:none; color:#0b0f19; padding:.5rem .75rem; border-radius:10px;
}
.nav__list a:not(.btn):hover{ background:#f5f7ff }
.btn.btn--sm{ padding:.55rem .9rem }

/* =================== HERO / CAROUSEL =================== */
.hero{ position:relative; }
.carousel{ position:relative; overflow:hidden; }
.carousel__track{ display:grid; grid-auto-flow:column; grid-auto-columns:100%; transition:transform .6s ease }
.slide{
  position:relative;
  display:flex; align-items:center;
  min-height: clamp(58vh, 50vh + 18vw, 86vh);
  color:#fff;
  isolation:isolate;
}
.slide::before{
  content:"";
  position:absolute; inset:0; z-index:-2;
  background-image:
    linear-gradient(90deg, rgba(0, 20, 68, 0.45) 0%, transparent 50%),
    var(--img);
  background-size:cover; background-position:center;
  filter:saturate(1.05);
}
.slide:is(.is-active) { }
.slide__grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: min(5vw, 48px);
}
.slide__content h1, .slide__content h2{
  font-size: var(--step-3); line-height:1.1; margin:0 0 .6rem; color:#fff;
  text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
}
.slide__content p{ 
  margin:0 0 1.1rem; color:#eaf0ff; max-width: 52ch;
  text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
}
.cta{ display:flex; gap:.8rem; flex-wrap:wrap }
.carousel__dots{ position:absolute; inset:auto 0 14px; display:flex; gap:.5rem; justify-content:center; z-index:2 }
.carousel__dots button{
  width:9px; height:9px; border-radius:50%; border:0; background:rgba(255,255,255,.5); outline:1px solid #fff;
}
.carousel__dots button[aria-selected="true"]{ background:var(--accent); outline-color:var(--accent) }

/* =================== FAIXA (STRIP) =================== */
.strip{ background:#001d63; color:#fff; }
.strip__row{ display:flex; align-items:center; gap:.9rem; padding:.6rem 0; justify-content:center; font-size:.95rem; flex-wrap: wrap; }
.strip .dot{ width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.3) }

/* =================== SEÇÕES =================== */
.section{ padding: clamp(48px, 6vw, 96px) 0 }
.section--alt{ background: #f8fbff }
.section__head{ text-align:center; margin-bottom: clamp(30px, 4vw, 50px) }
.section__head h2{ font-size: var(--step-2); margin:0 0 .4rem }
.section__head p{ color:var(--muted); margin:0; max-width: 65ch; margin-inline: auto; }
.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: min(4vw, 28px) }

/* =================== ESTILOS DOS CARROSSÉIS DE PLANOS =================== */
.plans-swiper, .plans-swiper-rural {
  width: 100%;
  padding-top: 30px !important;
  padding-bottom: 50px !important;
  position: relative;
}
.swiper-slide {
  transition: transform 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
  transform: scale(0.8);
  filter: blur(2px);
  opacity: 0.7;
  height: auto;
}
.swiper-slide-active {
  transform: scale(1);
  filter: blur(0);
  opacity: 1;
  z-index: 10;
}
.swiper-slide-active .plan-v2 {
  box-shadow: 0 16px 40px rgba(0, 51, 153, 0.2);
}
.plan-v2 {
  background-color: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 32px 24px; display: flex; flex-direction: column; text-align: center;
  position: relative; height: 100%;
}
.plan-v2__name {
  font-size: var(--step-3); font-weight: 900; color: var(--brand);
  margin: 0 0 16px; line-height: 1.1;
}
.plan-v2__price-wrapper { margin-bottom: 24px; }
.plan-v2__pre-text { font-size: var(--step--1); color: var(--muted); margin: 0; }
.plan-v2__price {
  font-size: var(--step-3); font-weight: 800; color: var(--ink); line-height: 1; margin: 4px 0 0;
  display: flex; justify-content: center; align-items: baseline;
}
.plan-v2__currency { font-size: var(--step-0); font-weight: 600; margin-right: 4px; }
.plan-v2__cents { font-size: var(--step-1); }
.plan-v2__period { font-size: var(--step--1); font-weight: 500; color: var(--muted); margin-left: 6px; }
.plan-v2__features {
  list-style: none; padding: 0; margin: 0 0 24px; text-align: left;
  display: flex; flex-direction: column; gap: 12px; flex-grow: 1;
}
.plan-v2__features li { display: flex; align-items: center; gap: 10px; font-size: var(--step-0); color: var(--ink); }
.plan-v2__features svg { width: 20px; height: 20px; fill: var(--brand); flex-shrink: 0; }
.plan-v2__cta-group { display: flex; flex-direction: column; gap: 12px; }
.btn--v2-primary, .btn--v2-whatsapp {
  padding: 1rem 1.5rem; font-size: 1.05rem; font-weight: 700; border-radius: 12px;
  text-decoration: none; display: block; border: 2px solid transparent; transition: all 0.2s ease;
}
.btn--v2-primary { background-color: var(--brand); color: #fff; }
.btn--v2-primary:hover { background-color: #002266; transform: translateY(-2px); }
.btn--v2-whatsapp { background-color: var(--whatsapp-green); color: #fff; }
.btn--v2-whatsapp:hover { background-color: #e6c300; transform: translateY(-2px); }
.plan-v2--featured { border: 2px solid var(--brand); }
.plan-v2__badge {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  background-color: #e6c300; color: #fff; font-weight: 700;
  padding: 8px 18px; border-radius: 999px; font-size: 0.9rem; white-space: nowrap;
}
.swiper-pagination-bullet { background-color: var(--muted); }
.swiper-pagination-bullet-active { background-color: var(--brand); }
.swiper-button-prev, .swiper-button-next {
  color: var(--brand); width: 50px; height: 50px; background-color: #fff;
  border-radius: 50%; box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  top: 50%; transform: translateY(-70%);
}
.swiper-button-prev::after, .swiper-button-next::after { font-size: 20px; font-weight: 900; }

/* =================== OUTRAS SEÇÕES (STREAMING, TELEMEDICINA, ETC) =================== */
.streaming{ display:flex; gap:.8rem; flex-wrap:wrap; justify-content: center; }
.streaming__item{
  background:#fff; border:1px solid var(--line); padding:.6rem 1rem; border-radius:999px; box-shadow: var(--shadow);
}
.tele{ display:grid; grid-template-columns: 1.1fr .9fr; gap: min(4vw, 28px); align-items:center }
.tele__text ul{ padding-left:1.1rem }
.tele__art{ position:relative; min-height:260px; }
.pulse{
  position:absolute; inset:0; border-radius: 24px; background: radial-gradient(circle at 30% 30%, #ffd80155, transparent 40%), #003399;
  border:1px solid rgba(255,255,255,.4); box-shadow: 0 0 0 0 rgba(255,216,1,.5);
  animation: pulse 2.2s infinite cubic-bezier(.66,0,0,1);
}
@keyframes pulse {
  0%{ box-shadow: 0 0 0 0 rgba(255,216,1,.45) }
  70%{ box-shadow: 0 0 0 24px rgba(255,216,1,0) }
  100%{ box-shadow: 0 0 0 0 rgba(255,216,1,0) }
}
.faq{ background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; margin:.6rem 0 }
.faq>summary{ cursor:pointer; font-weight:600 }
.faq>p{ margin:.6rem 0 0 }
.form{ background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow) }
.form label{ display:grid; gap:.35rem }
.form input, .form textarea{
  width:100%; padding:.8rem 1rem; border-radius:12px; border:1px solid var(--line);
  font:inherit; outline-color: var(--brand); background:#fff;
}
.form .full{ grid-column:1/-1 }
.muted{ color:var(--muted); margin:.75rem 0 0 }

/* =================== BOTÕES GERAIS =================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1.1rem; border-radius:12px; text-decoration:none;
  font-weight:700; cursor:pointer;
  background-color: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  box-shadow: 0 10px 20px rgba(0,51,153,.15);
  transition: all .2s ease;
}
.btn:hover{ 
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
  transform: translateY(-2px);
}
.btn:where(:link, :visited) { color: #fff; }
.btn:hover:where(:link, :visited) { color: var(--ink); }
.btn--ghost{
  background-color: transparent;
  color: var(--ink);
  border-color: var(--line);
  box-shadow: none;
}
.hero .btn--ghost{
  background-color: rgba(255,255,255,.12);
  color: #fff;
  border-color: rgba(255,255,255,.35);
  backdrop-filter:saturate(160%) blur(2px);
}
.hero .btn--ghost:hover {
  background-color: rgba(255,255,255,.3);
  border-color: rgba(255,255,255,.5);
  color: #fff;
}

/* =================== FOOTER =================== */
.footer{ background:#001e66; color:#eaf0ff; padding: 48px 0 0; }
.footer__grid{ display:grid; grid-template-columns: 1.2fr .8fr 1fr; gap: 24px; align-items:start; padding-bottom: 48px; }
.footer a{ color:#eaf0ff }
.footer__legal{ font-size:.95rem; color:#cfe0ff }
.footer-credit{
  background: #fff;
  padding: 18px 0;
  text-align: center;
}
.credit-link{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  text-decoration: none;
}
.credit-text{ color: var(--muted); font-weight: 700; font-size: .9rem; }
.credit-logo{ display: block; height: 28px; width: auto; }

/* =================== BOTÃO FLUTUANTE WHATSAPP =================== */
.whatsapp{
  position:fixed; right:16px; bottom:18px; width:58px; height:58px; border-radius:999px;
  background:var(--whatsapp-green); display:grid; place-items:center; box-shadow:0 14px 32px rgba(37,211,102,.35); z-index:50;
}
.whatsapp::after{
  content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 rgba(37,211,102,.4); animation: wping 2.4s infinite;
}
@keyframes wping{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.36) } 70%{ box-shadow:0 0 0 22px rgba(37,211,102,0) } 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0) } }

/* =================== RESPONSIVIDADE =================== */
@media (max-width: 1024px){
  .slide__grid, .tele{ grid-template-columns: 1fr }
  .footer__grid{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 767px) {
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
  .plan-v2 { padding: 24px 20px; }
  .plan-v2__name, .plan-v2__price { font-size: var(--step-2); }
  .plan-v2__cents { font-size: var(--step-0); }
  .plan-v2__currency { font-size: var(--step--1); }
  .btn--v2-primary, .btn--v2-whatsapp { padding: 0.8rem 1.2rem; font-size: 1rem; }
  .plan-v2__badge { padding: 6px 14px; font-size: 0.8rem; top: -14px; }
  .plans-swiper, .plans-swiper-rural { padding-top: 24px !important; padding-bottom: 40px !important; }
}
@media (max-width: 720px){
  .nav__toggle{ display:inline-block }
  .nav__list{
    position:fixed; inset:64px 12px auto 12px; background:#fff; border:1px solid var(--line);
    border-radius:14px; box-shadow: var(--shadow); padding:.6rem; display:none; flex-direction:column; gap:.25rem;
  }
  .nav__list[data-open="true"]{ display:flex }
  .grid-2{ grid-template-columns: 1fr }
  .footer__grid{ grid-template-columns: 1fr; gap: 32px; }
}
/* =================== AJUSTE DE COR: PLANOS RURAIS EM AMARELO =================== */

/* Altera o título do plano (ex: 10 MEGA) para amarelo */
#planos-rurais .plan-v2__name {
  color: var(--accent);
}

/* Altera o ícone de checkmark para amarelo */
#planos-rurais .plan-v2__features svg {
  fill: var(--accent);
}

/* Altera a borda do plano em destaque para amarelo */
#planos-rurais .plan-v2--featured {
  border-color: var(--accent);
}

/* Altera o botão principal para amarelo com texto escuro para melhor leitura */
#planos-rurais .btn--v2-primary {
  background-color: var(--accent);
  color: var(--ink);
}

/* Efeito hover para o botão amarelo (um tom mais escuro) */
#planos-rurais .btn--v2-primary:hover {
  background-color: #e6c300;
  transform: translateY(-2px);
}

/* Altera a cor das setas de navegação para amarelo */
#planos-rurais .swiper-button-prev,
#planos-rurais .swiper-button-next {
  color: var(--accent);
}

/* Altera a cor da bolinha de paginação ativa para amarelo */
#planos-rurais .swiper-pagination-bullet-active {
  background-color: var(--accent);
}
/* =================== Fundo Azul para a Seção de Planos Rurais e Ajustes de Texto =================== */

#planos-rurais {
  background: #003399; /* Cor de fundo solicitada para a seção de Planos Rurais */
}

/* Ajusta as cores do texto para branco dentro da seção de Planos Rurais para legibilidade */
#planos-rurais .section__head h2,
#planos-rurais .section__head p {
  color: #ffffff; /* Títulos e descrições em branco */
}

/* Garante que qualquer outro texto dentro da seção que não esteja nos cards também seja branco/claro */
#planos-rurais p {
  color: #000000; /* Um branco levemente acinzentado para parágrafos */
}

/* Os cards de plano individuais (plan-v2) manterão o fundo branco e o conteúdo colorido como antes */
#planos-rurais .plan-v2 {
  background-color: #ffffff; /* Mantém o fundo branco dos cards */
  border-color: #ffffff; /* Ajusta a borda padrão do card para branco */
}

/* O card em destaque manterá a borda amarela para contrastar com o novo fundo azul */
#planos-rurais .plan-v2--featured {
  border-color: var(--accent); /* Borda amarela */
}

/* As setas de navegação do carrossel rural também devem ser visíveis no fundo azul */
#planos-rurais .swiper-button-prev,
#planos-rurais .swiper-button-next {
  color: var(--accent); /* Mantém as setas amarelas */
  background-color: rgba(255, 255, 255, 0.15); /* Fundo semi-transparente para as setas */
}

/* A paginação do carrossel rural */
#planos-rurais .swiper-pagination-bullet {
  background-color: rgba(255, 255, 255, 0.5); /* Bolinhas de paginação em branco semi-transparente */
}
#planos-rurais .swiper-pagination-bullet-active {
  background-color: var(--accent); /* Bolinha ativa em amarelo */
}

/* Remove a cor de fundo cinza clara para as seções alternativas que agora serão azuis */
/* Importante: Se outras seções usam section--alt e você quer que elas continuem claras,
   você precisará criar uma nova classe para elas ou ajustar este seletor. */
/* Se a seção de telemedicina também deve ser azul, você pode remover o comentário abaixo.
   Se não, e ela usa section--alt, ela também ficará azul. */
/* .section--alt { background: #003399; } */
/* ===== HERO FIX PACK ===== */

/* 1) Garante altura do carrossel (evita virar uma "faixa" branca) */
:root{
  --hero-h: clamp(58vh, 50vh + 18vw, 86vh);
}
.hero .carousel,
.hero .carousel__viewport,
.hero .carousel__track { min-height: var(--hero-h); }
.hero .slide { min-height: var(--hero-h); }

/* 2) Remove aparência padrão dos botões (setas e dots) */
.carousel__arrow,
.carousel__dots button{
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  outline: none;
  background: none;
}

/* 3) Estilo das setas (bonitinhas) */
.carousel__arrow{
  position: absolute; inset-block: 0; margin-block: auto;
  height: 44px; width: 44px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(0,0,0,.25);
  color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer; z-index: 2;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.carousel__arrow:hover{ background: rgba(0,0,0,.4); transform: scale(1.04); border-color: rgba(255,255,255,.7); }
.carousel__arrow.prev{ left: 12px; }
.carousel__arrow.next{ right: 12px; }

/* 4) Dots discretos (e some se não houver) */
.carousel__dots{ position:absolute; left:0; right:0; bottom:14px; display:flex; gap:10px; justify-content:center; z-index:2; }
.carousel__dots:empty{ display:none; }
.carousel__dots button{
  width: 9px; height: 9px; border-radius: 999px;
  background: rgba(255,255,255,.45);
  transition: transform .2s ease, background .2s ease, width .2s ease;
}
.carousel__dots button[aria-selected="true"]{
  background: #ffd801; /* amarelo da marca */
  width: 22px;
}

/* Mobile: se quiser esconder as setas */
@media (max-width: 768px){
  .carousel__arrow{ display:none; }
}
/* --- manter setas do HERO e esconder as do Swiper no HERO --- */
.hero{ position: relative; z-index: 2; }
.hero .swiper-button-prev,
.hero .swiper-button-next{
  display: none !important;   /* some com as bolotas brancas no banner */
}

/* garanta que as setas do Swiper fiquem presas dentro das seções de planos */
#planos-fibra, #planos-rurais{ position: relative; z-index: 1; }
#planos-fibra .swiper-button-prev,
#planos-fibra .swiper-button-next,
#planos-rurais .swiper-button-prev,
#planos-rurais .swiper-button-next{
  display: block;              /* mantém nas seções de planos */
}

/* (opcional) prioridade visual: hero acima de qualquer swiper */
.carousel{ z-index: 3; }
/* === TELEMEDICINA: renderiza a imagem passada em --tele-img === */
.tele__art{
  position: relative;
  min-height: 320px;           /* ajuste se quiser maior */
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;          /* garante camadas internas */
}

/* aplica a imagem */
.tele__art::before{
  content: "";
  position: absolute; inset: 0;
  background-image: var(--tele-img);   /* <<< usa a var do HTML */
  background-size: cover;
  background-position: center;
  filter: saturate(1.05);
  z-index: 0;
}

/* brilho pulsante por cima da foto (sem cobrir com azul sólido) */
.tele .pulse{
  position: absolute; inset: 0;
  border-radius: 24px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,216,1,.35), transparent 45%);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 0 0 0 rgba(255,216,1,.45);
  animation: pulse 2.2s infinite cubic-bezier(.66,0,0,1);
  z-index: 1;                  /* acima da imagem */
}

/* animação (mantida) */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,216,1,.45) }
  70%  { box-shadow: 0 0 0 24px rgba(255,216,1,0) }
  100% { box-shadow: 0 0 0 0 rgba(255,216,1,0) }
}
/* ===== NAV SETAS — PADRONIZAÇÃO PARA OS CARROSSEIS DE PLANOS ===== */

/* Garante que os botões fiquem dentro do carrossel */
#planos-fibra .plans-swiper,
#planos-rurais .plans-swiper-rural{
  position: relative;
}

/* Base: formato, sombra e posição vertical */
#planos-fibra .swiper-button-prev,
#planos-fibra .swiper-button-next,
#planos-rurais .swiper-button-prev,
#planos-rurais .swiper-button-next{
  width: 46px; height: 46px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  top: 50%; transform: translateY(-50%);
  z-index: 5;
}

/* Posição horizontal (um pouco para dentro) */
#planos-fibra .swiper-button-prev,
#planos-rurais .swiper-button-prev{ left: 10px; }
#planos-fibra .swiper-button-next,
#planos-rurais .swiper-button-next{ right: 10px; }

/* Ícone (seta) */
#planos-fibra .swiper-button-prev::after,
#planos-fibra .swiper-button-next::after,
#planos-rurais .swiper-button-prev::after,
#planos-rurais .swiper-button-next::after{
  font-size: 18px; font-weight: 900;
}

/* Cores por seção (contraste ideal) */
#planos-fibra .swiper-button-prev::after,
#planos-fibra .swiper-button-next::after{
  color: var(--brand);         /* Fibra (fundo claro): seta azul */
}
#planos-rurais .swiper-button-prev::after,
#planos-rurais .swiper-button-next::after{
  color: var(--accent);        /* Rural (fundo azul): seta amarela */
}

/* Hover/Focus */
#planos-fibra .swiper-button-prev:hover,
#planos-fibra .swiper-button-next:hover,
#planos-rurais .swiper-button-prev:hover,
#planos-rurais .swiper-button-next:hover{
  transform: translateY(-50%) scale(1.04);
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
}
#planos-fibra .swiper-button-prev:focus-visible,
#planos-fibra .swiper-button-next:focus-visible,
#planos-rurais .swiper-button-prev:focus-visible,
#planos-rurais .swiper-button-next:focus-visible{
  outline: 2px solid rgba(0,0,0,.12);
  outline-offset: 2px;
}

/* Mobile: esconde (se preferir) */
@media (max-width: 767px){
  #planos-fibra .swiper-button-prev,
  #planos-fibra .swiper-button-next,
  #planos-rurais .swiper-button-prev,
  #planos-rurais .swiper-button-next{
    display: none;
  }
}
/* ======== SWIPER ARROWS: RESET + PADRÃO ÚNICO ======== */

/* 0) Garante que só os carrosséis de planos exibam setas */
.hero .swiper-button-prev,
.hero .swiper-button-next { display: none !important; }

/* 1) Reset violento (remove sombras/backs herdados) */
.swiper-button-prev,
.swiper-button-next{
  all: unset;
  position: absolute;
  display: grid !important;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 999px;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  top: 50%; transform: translateY(-50%);
  z-index: 5;
  cursor: pointer;
  backdrop-filter: none !important;
}

/* 2) Posição horizontal padronizada */
#planos-fibra .swiper-button-prev,
#planos-rurais .swiper-button-prev{ left: 12px; }
#planos-fibra .swiper-button-next,
#planos-rurais .swiper-button-next{ right: 12px; }

/* 3) Ícones (usa os default do Swiper via ::after, sem sombras) */
.swiper-button-prev::after,
.swiper-button-next::after{
  content: ""; /* vamos desenhar a seta com bordas (mais nítida) */
  width: 10px; height: 10px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(45deg);
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Específico: esquerda vira "<" */
.swiper-button-prev::after{ transform: rotate(-135deg); }

/* 4) Cores por seção (contraste correto) */
#planos-fibra .swiper-button-prev,
#planos-fibra .swiper-button-next{ color: var(--brand); }   /* azul */
#planos-rurais .swiper-button-prev,
#planos-rurais .swiper-button-next{ color: var(--accent); } /* amarelo */

/* 5) Hover/Focus */
#planos-fibra .swiper-button-prev:hover,
#planos-fibra .swiper-button-next:hover,
#planos-rurais .swiper-button-prev:hover,
#planos-rurais .swiper-button-next:hover{
  transform: translateY(-50%) scale(1.04);
  box-shadow: 0 12px 30px rgba(0,0,0,.16) !important;
}
#planos-fibra .swiper-button-prev:focus-visible,
#planos-fibra .swiper-button-next:focus-visible,
#planos-rurais .swiper-button-prev:focus-visible,
#planos-rurais .swiper-button-next:focus-visible{
  outline: 2px solid rgba(0,0,0,.15);
  outline-offset: 2px;
}

/* 6) Contenção e camada das seções (evita vazar pro hero) */
#planos-fibra, #planos-rurais{ position: relative; z-index: 1; }
#planos-fibra .plans-swiper,
#planos-rurais .plans-swiper-rural{ position: relative; overflow: visible; }

/* 7) Mobile: esconder (se quiser visíveis, remova este bloco) */
@media (max-width: 767px){
  #planos-fibra .swiper-button-prev,
  #planos-fibra .swiper-button-next,
  #planos-rurais .swiper-button-prev,
  #planos-rurais .swiper-button-next{
    display: none !important;
  }
}
/* ===== Alinhamento horizontal das setas aos limites da .container ===== */

/* torna a .container referência de posicionamento */
#planos-fibra .container,
#planos-rurais .container{ position: relative; }

/* move as setas para os limites da .container (e não da seção) */
#planos-fibra .container > .swiper-button-prev,
#planos-rurais .container > .swiper-button-prev{
  left: -12px !important;     /* ajuste fino: -12px “para fora” da borda da container */
  right: auto !important;
  top: 50%; transform: translateY(-50%);
}

#planos-fibra .container > .swiper-button-next,
#planos-rurais .container > .swiper-button-next{
  right: -12px !important;    /* idem no lado direito */
  left: auto !important;
  top: 50%; transform: translateY(-50%);
}

/* opcional: no mobile, suma com as setas */
@media (max-width: 767px){
  #planos-fibra .container > .swiper-button-prev,
  #planos-fibra .container > .swiper-button-next,
  #planos-rurais .container > .swiper-button-prev,
  #planos-rurais .container > .swiper-button-next{
    display: none !important;
  }
}
html, body { overflow-x: hidden; }
@media (max-width: 767px){
  .slide--m2{
    --img: url('/img/mobileslide.png') !important;
  }
}
/* alternância de visibilidade para o slide 2 */
.only-mobile{ display:none; }
.only-desktop{ display:block; }

@media (max-width: 767px){
  .only-mobile{ display:block; }
  .only-desktop{ display:none; }
}

/* garante que o herobanner recorte corretamente */
.carousel,
.carousel__viewport{ overflow: hidden; }
/* ====== HERO ARROWS (prev/next) ====== */
.carousel { --arrow-size: clamp(42px, 6vw, 64px); }

.carousel__arrow{
  position: absolute;
  top: 50%;
  z-index: 3;
  width: var(--arrow-size);
  height: var(--arrow-size);
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85);
  background: rgba(255,255,255,.08);
  backdrop-filter: saturate(160%) blur(4px);
  color: #fff;
  line-height: 1;
  font-size: calc(var(--arrow-size) * .45);
  cursor: pointer;
  transition: .2s ease;
}
.carousel__arrow:hover{ background: rgba(255,255,255,.18); transform: translateY(-50%) scale(1.04); }
.carousel__arrow:active{ transform: translateY(-50%) scale(.98); }
.carousel__arrow.prev{ left: clamp(8px, 2vw, 22px); }
.carousel__arrow.next{ right: clamp(8px, 2vw, 22px); }

/* ====== DOTS (paginador) ====== */
.carousel__dots{
  position: absolute;
  left: 0; right: 0; bottom: clamp(10px, 2.5vw, 18px);
  display: flex; gap: .45rem; justify-content: center; z-index: 3;
}
.carousel__dots button{
  --dot: clamp(9px, 1.2vw, 12px);
  min-width: calc(var(--dot) * 2);
  height: calc(var(--dot) * 2);
  padding: 0 .35rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.1);
  color: #fff;
  font: 700 clamp(10px, 1.2vw, 12px)/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  display: inline-flex; align-items: center; justify-content: center;
  transition: .2s ease;
}
.carousel__dots button[aria-selected="true"]{
  background: var(--accent, #ffd801);
  border-color: var(--accent, #ffd801);
  color: #0b0f19;
}
.carousel__dots button:hover{ filter: brightness(1.08); }
/* ===== FIX definitivo das setas do HERO ===== */
.hero .carousel{ position: relative; }

/* círculo responsivo e imune a estilos externos */
.hero .carousel__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;

  /* tamanho responsivo e círculo perfeito */
  width: clamp(42px, 6vw, 64px);
  aspect-ratio: 1 / 1;      /* garante círculo */
  height: auto;

  /* reset que evita distorções */
  box-sizing: border-box;
  padding: 0;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  backdrop-filter: saturate(160%) blur(4px);

  display: grid;
  place-items: center;
  line-height: 1;
  font-size: clamp(18px, 2.8vw, 26px);
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

/* posicionamento nas laterais */
.hero .carousel__arrow.prev{ left: clamp(8px, 2vw, 22px); }
.hero .carousel__arrow.next{ right: clamp(8px, 2vw, 22px); }

/* efeito */
.hero .carousel__arrow:hover{
  background: rgba(255,255,255,.18);
  transform: translateY(-50%) scale(1.04);
}
.hero .carousel__arrow:active{
  transform: translateY(-50%) scale(.98);
}

/* garante que nada interno capture clique ou deforme */
.hero .carousel__arrow *{ pointer-events: none; }

/* se algum reset global estiver afetando <button>, remove decoração */
.hero .carousel__arrow{
  -webkit-appearance: none;
  appearance: none;
  border-image: initial;
}
/* HERO – setas 100% redondas (override final) */
.hero .carousel__arrow{
  position: absolute;
  /* ZERA qualquer "inset" herdado que estica o botão */
  inset: auto !important;      /* ← limpa top/right/bottom/left herdados */
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%);
  z-index: 5;

  /* círculo responsivo */
  width: clamp(42px, 6vw, 64px) !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  border-radius: 50% !important;

  /* reset para evitar distorções de resets globais */
  box-sizing: border-box;
  padding: 0 !important;
  border: 2px solid rgba(255,255,255,.9) !important;
  background: rgba(255,255,255,.08) !important;
  display: grid !important;
  place-items: center !important;
  line-height: 1 !important;
  font-size: clamp(18px, 2.8vw, 26px) !important;
  color: #fff !important;
  cursor: pointer;
}

/* posicionamento lateral */
.hero .carousel__arrow.prev{ left: clamp(8px, 2vw, 22px) !important; right: auto !important; }
.hero .carousel__arrow.next{ right: clamp(8px, 2vw, 22px) !important; left: auto !important; }

/* efeitos (opcional) */
.hero .carousel__arrow:hover{
  background: rgba(255,255,255,.18);
  transform: translateY(-50%) scale(1.04);
}
.hero .carousel__arrow:active{
  transform: translateY(-50%) scale(.98);
}
.hero .carousel__arrow *{ pointer-events:none; }
/* Logo maior (responsiva) no header */
.header .brand img{
  /* cresce em telas grandes, reduz em telas pequenas */
  height: clamp(60px, 9vw, 110px);
  width: auto;
  max-height: none; /* ignora o max-height antigo */
}
/* Social no rodapé */
.footer__social{
  display:flex; gap:.6rem; align-items:center; justify-content:flex-start;
}
.footer__social .social{
  display:grid; place-items:center;
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
  color:#fff; text-decoration:none;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.footer__social .social:hover{
  background: rgba(255,255,255,.2);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.footer__social svg{
  width:20px; height:20px; fill: currentColor;
}

/* responsivo: empilha bonito no mobile */
@media (max-width: 720px){
  .footer__grid{ gap: 18px; }
  .footer__social{ justify-content:flex-start; }
}