/* =========================================================
   Sky Fit Santa Isabel — estilos do site
   Paleta e tipografia herdadas do site anterior (kit Elementor)
   ========================================================= */

:root {
  --azul: #00326A;
  --azul-esc: #00234B;
  --vermelho: #F71724;
  --vermelho-esc: #CA0A3A;
  --preto: #0A0A0A;
  --texto: #333;
  --cinza: #7A7A7A;
  --borda: #e6e6e6;
  --container: 1140px;
  --fonte: "Exo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --raio: 8px;
  --sombra: 0 4px 18px rgba(0, 0, 0, .08);
  --header-h: 70px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 10px); }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------- Header ---------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--preto);
  border-bottom: 2px solid var(--vermelho);
}

.header__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding: 0 20px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.header__logo img { height: 36px; width: auto; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__list a {
  display: block;
  padding: 7px 20px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}

.nav__list a:hover,
.nav__list a:focus-visible { color: var(--vermelho); }

.nav__list a[aria-current="page"] {
  color: var(--vermelho);
  border-bottom-color: var(--vermelho);
}

.nav__toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--vermelho);
}

.nav__toggle svg { display: block; }

/* ---------------- Hero ---------------- */

.hero { position: relative; background: #eef1f4; line-height: 0; }
.hero img { width: 100%; object-fit: cover; }

/* onda branca na base do hero (shape divider) */
.hero__wave {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  width: 100%;
  height: 60px;
  color: #fff;
  pointer-events: none;
}

/* ---------------- Blocos ---------------- */

.secao { padding: 70px 0; }
.secao--compacta { padding: 50px 0; }

.titulo-secao {
  margin: 0 0 40px;
  font-size: clamp(34px, 5.6vw, 68px);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  text-align: center;
  color: var(--azul);
}

/* ---------------- Planos ---------------- */

.planos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: start;
}

.plano {
  display: flex;
  flex-direction: column;
  min-width: 0; /* impede o texto longo de esticar a coluna do grid */
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
  height: 100%;
}

.plano--destaque { border: 2px solid var(--vermelho); }

/* Todos os cards recebem a faixa. Nos que não são destaque ela fica
   invisível, mas ocupando espaço — assim preço, botão e rodapé caem
   na mesma linha em todos os cards. */
.plano__fita {
  background: var(--vermelho);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 10px;
  margin: 0;
}

.plano__fita--vazia { visibility: hidden; }

.plano__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 20px 0;
  text-align: center;
}

.plano__nome {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  color: #000;
  text-transform: uppercase;
  min-height: 3.45em; /* cabe o nome mais longo, em 3 linhas */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-wrap: break-word;
  hyphens: auto;
}

.plano__preco {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  color: #000;
  line-height: 1;
}

.plano__parcelas { font-size: 24px; font-weight: 700; margin-right: 4px; }
.plano__inteiro { font-size: 56px; font-weight: 700; letter-spacing: -1px; }
.plano__centavos { font-size: 24px; font-weight: 700; }

/* "por mês" e "Economia de..." ocupam a mesma altura,
   mantendo os botões alinhados entre os cards */
.plano__periodo,
.plano__economia {
  margin: 6px 0 0;
  min-height: 1.5em;
  color: var(--cinza);
}

.plano__periodo { font-size: 15px; }
.plano__economia { font-size: 14px; font-weight: 500; }

.plano__cta {
  display: block;
  margin: 18px 0 0;
  padding: 13px 16px;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  border-radius: 5px;
  border: 1px solid var(--vermelho);
  color: #000;
  background: #fff;
  transition: background .2s, color .2s;
}

.plano__cta:hover,
.plano__cta:focus-visible { background: var(--vermelho); color: #fff; }

.plano--destaque .plano__cta { background: var(--vermelho); color: #fff; }
.plano--destaque .plano__cta:hover { background: var(--vermelho-esc); }

/* accordion de benefícios */
.plano__detalhes {
  margin-top: 18px;
  border-top: 1px solid var(--borda);
  text-align: left;
}

.plano__detalhes > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--vermelho);
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.plano__detalhes > summary::-webkit-details-marker { display: none; }

.plano__detalhes > summary::before {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .25s;
  flex: none;
}

.plano__detalhes[open] > summary::before { transform: rotate(45deg); }

.plano__beneficios {
  margin: 0;
  padding: 0 4px 14px 20px;
  font-size: 14px;
  line-height: 1.7;
  color: #444;
}

.plano__beneficios li { margin-bottom: 4px; }

.plano__beneficios strong {
  display: block;
  margin: 10px 0 4px -20px;
  list-style: none;
  font-weight: 600;
  color: var(--azul);
}

.plano__rodape {
  margin-top: auto;
  padding: 14px 20px;
  border-top: 1px solid var(--borda);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: #000;
}

/* ---------------- CTA avaliação ---------------- */

.avaliacao {
  background: linear-gradient(180deg, var(--azul) 0%, var(--azul-esc) 100%);
  border-radius: 14px;
  padding: 56px 44px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items: center;
  color: #fff;
}

.avaliacao__titulo {
  margin: 0;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.avaliacao__linha {
  width: 180px;
  height: 3px;
  background: var(--vermelho);
  border: 0;
  margin: 18px 0;
}

.avaliacao__sub { margin: 0; font-size: 16px; opacity: .95; }

/* card do validador de CPF */
.validador {
  background: #fff;
  border-radius: 14px;
  padding: 30px 26px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
  color: var(--texto);
  text-align: center;
}

.validador__titulo {
  margin: 0 0 18px;
  font-size: 26px;
  font-style: italic;
  font-weight: 600;
  color: var(--azul);
}

.validador input[type="text"] {
  width: 100%;
  padding: 13px 12px;
  font-family: inherit;
  font-size: 16px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: var(--raio);
  outline: 0;
  transition: border-color .2s, box-shadow .2s;
}

.validador input:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(0, 50, 106, .18);
}

.btn-azul {
  width: 100%;
  margin-top: 14px;
  padding: 13px 16px;
  font-size: 16px;
  font-weight: 600;
  font-style: italic;
  color: #fff;
  background: var(--azul-esc);
  border: 0;
  border-radius: var(--raio);
  cursor: pointer;
  transition: background .2s, transform .15s;
}

.btn-azul:hover:not(:disabled) { background: var(--azul); transform: translateY(-1px); }
.btn-azul:disabled { opacity: .65; cursor: progress; }

.validador__msg { margin: 12px 0 0; font-size: 14px; min-height: 20px; }
.validador__msg--erro { color: #cc0000; }
.validador__msg--info { color: #666; }

.spinner {
  display: inline-block;
  width: 15px; height: 15px;
  margin-left: 6px;
  vertical-align: -2px;
  border: 2px solid rgba(0, 50, 106, .25);
  border-left-color: var(--azul);
  border-radius: 50%;
  animation: girar .7s linear infinite;
}

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

.validador__resultado { font-size: 15px; line-height: 1.65; }
.validador__ok { color: #00AD57; font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.validador__aviso { margin-top: 14px; color: #b00; font-weight: 600; }

.btn-secundario {
  width: 100%;
  margin-top: 8px;
  padding: 11px 16px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  background: #e4e4e4;
  border: 0;
  border-radius: var(--raio);
  cursor: pointer;
}

.btn-secundario:hover { background: #d5d5d5; }

.btn-link {
  background: none;
  border: 0;
  margin-top: 10px;
  color: #cc0000;
  font-weight: 600;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------------- Sky Shop ---------------- */

.shop {
  position: relative;
  background: #16214a url("../img/shop-fundo.webp") center/cover no-repeat;
  color: #fff;
  padding: 70px 0;
}

.shop__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
  min-height: 380px;
}

.shop__titulo {
  margin: 0 0 14px;
  font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 800;
  font-style: italic;
  line-height: 1.05;
}

.shop__texto { font-size: 15px; line-height: 1.7; max-width: 34ch; }
.shop__col--dir { justify-self: end; text-align: right; }
.shop__col--dir .shop__texto { margin-left: auto; }

.btn-vermelho {
  display: inline-block;
  margin-top: 18px;
  padding: 13px 40px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--vermelho);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: background .2s, transform .15s;
}

.btn-vermelho:hover { background: var(--vermelho-esc); transform: translateY(-1px); }

/* ---------------- Sobre ---------------- */

.sobre__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.sobre__titulo {
  margin: 0 0 18px;
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 700;
  color: var(--azul);
}

.sobre__texto { margin: 0; font-size: 16px; line-height: 1.75; color: #555; }

.contadores { display: flex; gap: 60px; margin-top: 34px; }
.contador__numero { font-size: clamp(40px, 5vw, 62px); font-weight: 700; color: var(--azul); line-height: 1; }
.contador__rotulo { font-size: 15px; color: #555; margin-top: 4px; }

.faixa { margin-top: 50px; border-radius: var(--raio); overflow: hidden; }

/* ---------------- Áreas ---------------- */

.areas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.area {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--sombra);
  overflow: hidden;
}

.area img { width: 100%; aspect-ratio: 700 / 400; object-fit: cover; }

.area__nome {
  margin: 0;
  padding: 10px 12px;
  background: var(--azul);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

.area__texto {
  margin: 0;
  padding: 16px 18px 22px;
  font-size: 14px;
  line-height: 1.65;
  text-align: center;
  color: #555;
}

/* ---------------- App ---------------- */

.app {
  background: linear-gradient(104deg, var(--vermelho) 0%, var(--vermelho-esc) 100%);
  color: #fff;
  position: relative;
}

.app__grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 50px;
  align-items: end;
}

.app__foto { align-self: end; margin-top: -50px; }
.app__foto img { width: 100%; max-width: 300px; margin-inline: auto; }

.app__conteudo { padding: 60px 0; }

.app__titulo {
  margin: 0 0 12px;
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 700;
  line-height: 1.05;
}

.app__texto { margin: 0 0 22px; font-size: 16px; line-height: 1.6; max-width: 46ch; }

.app__lojas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.app__lojas img { height: 46px; width: auto; }

/* ---------------- Rodapé ---------------- */

.rodape { background: #1c1c1c; color: #d8d8d8; padding: 54px 0 0; font-size: 15px; }

.rodape__grid {
  display: grid;
  grid-template-columns: 200px repeat(4, 1fr);
  gap: 34px;
}

.rodape__logo img { width: 150px; }

.rodape h2 {
  margin: 0 0 14px;
  font-size: 21px;
  font-weight: 700;
  color: var(--vermelho);
}

.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 10px; display: flex; gap: 9px; align-items: flex-start; line-height: 1.5; }
.rodape li svg { flex: none; margin-top: 3px; color: var(--vermelho); }
.rodape a:hover { color: #fff; text-decoration: underline; }

.rodape__base {
  margin-top: 44px;
  padding: 18px 0;
  border-top: 1px solid #333;
  text-align: center;
  font-size: 13px;
  color: #8d8d8d;
}

/* ---------------- Botão WhatsApp flutuante ---------------- */

.zap {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25D366;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  transition: transform .2s;
}

.zap:hover { transform: scale(1.07); }
.zap svg { width: 32px; height: 32px; fill: #fff; }

/* ---------------- Formulário ---------------- */

.pagina-interna { padding: 60px 0 70px; }

.form-card {
  max-width: 620px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 14px;
  box-shadow: var(--sombra);
  padding: 34px 30px;
}

.campo { margin-bottom: 16px; }

.campo label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #444;
}

.campo input {
  width: 100%;
  padding: 12px;
  font-family: inherit;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: var(--raio);
  outline: 0;
  transition: border-color .2s, box-shadow .2s;
}

.campo input:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(0, 50, 106, .15);
}

.campo input[type="file"] { padding: 10px; background: #fafafa; cursor: pointer; }

.campo__dica { margin: 5px 0 0; font-size: 13px; color: var(--cinza); }

.form__msg { margin-top: 16px; font-size: 15px; text-align: center; min-height: 22px; }
.form__msg--ok { color: #00AD57; font-weight: 600; }
.form__msg--erro { color: #cc0000; font-weight: 600; }

/* ---------------- Responsivo ---------------- */

@media (max-width: 1024px) {
  .planos { grid-template-columns: repeat(2, 1fr); }
  .areas { grid-template-columns: repeat(2, 1fr); }
  .rodape__grid { grid-template-columns: 1fr 1fr; }
  .app__grid { grid-template-columns: 260px 1fr; gap: 30px; }
}

@media (max-width: 900px) {
  .nav__toggle { display: block; }

  .nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--preto);
    border-bottom: 2px solid var(--vermelho);
    display: none;
  }

  .nav[data-aberto="true"] { display: block; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0; }

  .nav__list a {
    padding: 13px 24px;
    border-bottom: 0;
    border-left: 3px solid transparent;
  }

  .nav__list a[aria-current="page"] { border-left-color: var(--vermelho); }

  .avaliacao { grid-template-columns: 1fr; padding: 40px 26px; text-align: center; }
  .avaliacao__linha { margin-inline: auto; }
  .sobre__grid { grid-template-columns: 1fr; gap: 34px; }
  .shop__grid { grid-template-columns: 1fr; text-align: center; min-height: 0; }
  .shop__col--dir { justify-self: center; text-align: center; }
  .shop__texto { max-width: none; margin-inline: auto; }
}

@media (max-width: 767px) {
  .secao { padding: 50px 0; }
  .planos { grid-template-columns: 1fr; gap: 20px; max-width: 420px; margin-inline: auto; }
  .areas { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  /* empilhados, os cards não precisam de altura casada */
  .plano__nome { min-height: 0; font-size: 20px; }
  .plano__periodo, .plano__economia { min-height: 0; }
  .plano__fita--vazia { display: none; }
  .contadores { gap: 34px; justify-content: center; text-align: center; }
  .sobre__grid { text-align: center; }
  .sobre__texto { text-align: left; }

  .app__grid { grid-template-columns: 1fr; gap: 0; }
  .app__foto { margin-top: -30px; }
  .app__foto img { max-width: 220px; }
  .app__conteudo { padding: 10px 0 50px; text-align: center; }
  .app__texto { margin-inline: auto; }
  .app__lojas { justify-content: center; }

  .rodape__grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .rodape__logo img { margin-inline: auto; }
  .rodape li { justify-content: center; }

  .hero__wave { height: 28px; }
  .shop { background-position: center top; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}