/* =========================================================
   FIO10 JEANS — ESTILOS BASE DA LANDING PAGE
   Cole no <head> do site (antes deste arquivo):

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@600;700;800&family=Urbanist:wght@400;500;700&display=swap" rel="stylesheet">
   ========================================================= */

:root {
  /* Cores principais */
  --fio-azul: #1D274A;          /* Azul Marinho Fio10 */
  --fio-vermelho: #D10A0F;      /* Vermelho Costura */

  /* Cores de apoio */
  --fio-azul-noite: #0E1736;    /* rodapé, fundos profundos */
  --fio-branco: #FFFFFF;
  --fio-nevoa: #F4F5F8;         /* fundo de seções alternadas */
  --fio-linha: #E4E5E9;         /* bordas e divisórias */
  --fio-grafite: #404041;       /* texto principal */
  --fio-cinza: #6B7080;         /* texto secundário */

  /* Estados (passar o mouse) */
  --fio-vermelho-hover: #A7080C;
  --fio-azul-hover: #161D38;

  /* Só para o botão de WhatsApp */
  --fio-whatsapp: #25D366;

  /* Fontes */
  --fonte-titulo: 'Rubik', system-ui, sans-serif;
  --fonte-texto: 'Urbanist', system-ui, sans-serif;

  /* Cantos */
  --raio-p: 8px;
  --raio-m: 14px;
  --raio-g: 28px;

  /* Espaçamentos (base 8) */
  --esp-1: 8px;  --esp-2: 16px; --esp-3: 24px; --esp-4: 32px;
  --esp-6: 48px; --esp-8: 64px; --esp-12: 96px;

  /* Gradiente da marca (igual à capa da identidade) */
  --gradiente-marca: radial-gradient(circle at 50% 45%, #1D274A 0%, #0E1736 100%);
}

/* ---------- Tipografia ---------- */
body { font-family: var(--fonte-texto); font-size: 16px; line-height: 1.6; color: var(--fio-grafite); }
h1, h2, h3 { font-family: var(--fonte-titulo); color: var(--fio-azul); margin: 0 0 .4em; }
h1 { font-weight: 800; font-size: 36px; line-height: 1.05; letter-spacing: -0.01em; }
h2 { font-weight: 700; font-size: 30px; line-height: 1.1; }
h3 { font-weight: 600; font-size: 21px; line-height: 1.2; }
.rotulo { font-family: var(--fonte-texto); font-weight: 700; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--fio-vermelho); }
.lead { font-weight: 500; font-size: 18px; line-height: 1.5; }
.preco { font-family: var(--fonte-titulo); font-weight: 800; font-size: 26px; color: var(--fio-azul); }

@media (min-width: 1024px) {
  body { font-size: 18px; }
  h1 { font-size: 64px; }
  h2 { font-size: 44px; }
  h3 { font-size: 26px; }
  .rotulo { font-size: 14px; }
  .lead { font-size: 22px; }
  .preco { font-size: 32px; }
}

/* ---------- Layout ---------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.secao { padding: var(--esp-8) 0; }
.secao--nevoa { background: var(--fio-nevoa); }
.secao--azul { background: var(--gradiente-marca); color: #fff; }
@media (min-width: 1024px) { .container { padding: 0 40px; } .secao { padding: var(--esp-12) 0; } }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 28px; border-radius: var(--raio-m);
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 16px; text-decoration: none;
  border: 2px solid transparent; cursor: pointer; transition: background .2s, color .2s; }
.btn--primario { background: var(--fio-vermelho); color: #fff; }
.btn--primario:hover { background: var(--fio-vermelho-hover); }
.btn--secundario { background: transparent; color: var(--fio-azul); border-color: var(--fio-azul); }
.btn--secundario:hover { background: var(--fio-azul); color: #fff; }
.btn--claro { background: #fff; color: var(--fio-azul); }
.btn--whatsapp { background: var(--fio-whatsapp); color: var(--fio-azul); }
@media (min-width: 1024px) { .btn { height: 52px; font-size: 18px; } }

/* ---------- Costura (linha tracejada da marca) ---------- */
.costura { height: 2px; background: repeating-linear-gradient(90deg, var(--fio-vermelho) 0 28px, transparent 28px 52px); }
.costura--vertical { width: 2px; height: 100%; background: repeating-linear-gradient(180deg, var(--fio-vermelho) 0 28px, transparent 28px 52px); }

/* ---------- Bolso (selo com 3 tracinhos em cima, igual ao "10" da logo) ---------- */
.bolso { position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 56px; padding: 8px 14px; margin-top: 10px;
  background: var(--fio-vermelho); color: #fff;
  font-family: var(--fonte-titulo); font-weight: 800;
  border-radius: 0 0 12px 12px; }
.bolso::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 3px;
  background: linear-gradient(90deg, var(--fio-vermelho) 0 22%, transparent 22% 39%,
    var(--fio-vermelho) 39% 61%, transparent 61% 78%, var(--fio-vermelho) 78% 100%); }

/* ---------- Cards ---------- */
.card { background: #fff; border: 1px solid var(--fio-linha); border-radius: var(--raio-g); overflow: hidden; }
.card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }

/* ---------- Foto com texto por cima ---------- */
.overlay-foto { background: linear-gradient(90deg, rgba(14,23,54,.88) 0%, rgba(14,23,54,.25) 65%); }

/* ---------- Faixa de textura jeans ---------- */
.faixa-jeans { background: url("../imagens/textura-jeans.jpg") repeat; }

/* ---------- Botão flutuante de WhatsApp ---------- */
.whats-flutuante { position: fixed; right: 20px; bottom: 20px; width: 60px; height: 60px; border-radius: 50%;
  background: var(--fio-whatsapp); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(14,23,54,.3); z-index: 99; }