/* King Pesca — estilos do site (layout + componentes recriados em CSS puro
   a partir dos componentes .jsx do design system oficial: Button, Badge,
   ProductCard, TrustBar, Card, etc.) */

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

html { scroll-behavior: smooth }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-bold);
}
h1, h2 { font-family: var(--font-display) }
h3, h4 { font-family: var(--font-body) }

p { margin: 0 }
img { max-width: 100%; display: block }
button { font: inherit; cursor: pointer }

a { color: var(--text-link); text-decoration: none; transition: color var(--duration-micro) var(--ease-standard) }
a:hover { color: var(--text-link-hover) }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

.kp-link-underline { position: relative }
.kp-link-underline::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--duration-micro) var(--ease-standard);
}
.kp-link-underline:hover::after { transform: scaleX(1) }

.kp-container { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--container-pad) }
@media (max-width: 767px) { .kp-container { padding-inline: var(--container-pad-mobile) } }

.kp-eyebrow {
  font-size: var(--text-caption); font-weight: var(--weight-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted);
}

.kp-section { padding-block: var(--space-4xl) }
.kp-section--alt { background: var(--bg-alt) }
.kp-section--card { background: var(--surface-card); box-shadow: var(--shadow-subtle) }
@media (max-width: 767px) { .kp-section { padding-block: var(--space-2xl) } }

.kp-section-head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl) }
.kp-section-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg) }
.kp-section-head h2 { font-size: var(--text-h2) }
.kp-section-head p { color: var(--text-muted); max-width: 56ch }

/* ================= Fade-up ao rolar ================= */
.kp-reveal {
  opacity: 0;
  transform: translateY(var(--enter-offset));
  transition: opacity var(--duration-enter) var(--ease-entrance),
              transform var(--duration-enter) var(--ease-entrance);
}
.kp-reveal.is-visible { opacity: 1; transform: none }

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

/* ================= Botões / Badges ================= */
.kp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--text-small);
  line-height: 1.2; padding: 12px 24px; border-radius: var(--radius-full); border: 1px solid transparent;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--duration-micro) var(--ease-standard), transform var(--duration-micro) var(--ease-standard);
}
.kp-btn:hover { transform: translateY(var(--lift-hover)) }
.kp-btn--lg { font-size: var(--text-h4); padding: 16px 32px }
.kp-btn--full { width: 100%; padding: 12px 20px }
.kp-btn--primary { background: var(--action-primary-bg); color: var(--action-primary-fg) }
.kp-btn--primary:hover { background: var(--action-primary-bg-hover); color: var(--action-primary-fg) }
.kp-btn--secondary { background: var(--action-secondary-bg); color: var(--action-secondary-fg) }
.kp-btn--secondary:hover { background: var(--action-secondary-bg-hover); color: var(--action-secondary-fg) }
.kp-btn--inverse { background: var(--white); color: var(--navy-900) }
.kp-btn--inverse:hover { background: var(--sand-100); color: var(--navy-900) }
.kp-btn--outline { background: transparent; color: var(--navy-900); border-color: var(--hairline-strong) }
.kp-btn--outline:hover { background: var(--sand-100) }
.kp-btn[disabled] { background: var(--action-disabled-bg); color: var(--action-disabled-fg); cursor: not-allowed; transform: none }

.kp-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-sm);
  font-size: var(--text-caption); font-weight: var(--weight-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
}
.kp-badge--accent { background: var(--accent-100); color: var(--accent-600) }
.kp-badge--navy { background: var(--mint-100); color: var(--navy-900) }
.kp-badge--warning { background: #fbe9d3; color: #a3620f }
.kp-badge--danger { background: #f6dedc; color: var(--danger-500) }
.kp-badge--inverse { background: rgba(255,255,255,0.9); color: var(--navy-900) }

/* ================= Header ================= */
.kp-header { position: sticky; top: 0; z-index: 40; background: var(--navy-900); color: var(--white) }
.kp-header__bar {
  border-bottom: 1px solid var(--hairline-inverse);
  font-size: var(--text-caption); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-inverse-muted);
}
.kp-header__bar .kp-container {
  display: flex; align-items: center; justify-content: space-between; height: 36px; gap: var(--space-md);
}
.kp-header__bar span { display: flex; align-items: center; gap: 6px }
@media (max-width: 640px) { .kp-header__bar span:last-child { display: none } }

.kp-header__main .kp-container { display: flex; align-items: center; gap: var(--space-xl); height: 76px }

.kp-wordmark { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none }
.kp-wordmark span { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.02em }
.kp-wordmark .kp-wordmark__king { color: var(--white) }
.kp-wordmark .kp-wordmark__pesca { color: var(--accent-500) }
.kp-wordmark__badge {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: var(--radius-full); background: var(--accent-500); color: var(--navy-900);
}

.kp-nav { display: flex; gap: var(--space-lg); flex: 1 }
.kp-nav a { font-size: var(--text-small); color: var(--text-inverse-muted) }
.kp-nav a:hover { color: var(--white) }

.kp-nav-toggle {
  display: none; background: transparent; border: 0; color: var(--white); padding: 8px; margin-left: auto;
}

@media (max-width: 900px) {
  .kp-nav {
    position: fixed; inset: 76px 0 auto 0; background: var(--navy-900); flex-direction: column; gap: 0;
    padding: var(--space-md) var(--container-pad-mobile) var(--space-lg);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity var(--duration-micro) var(--ease-standard), transform var(--duration-micro) var(--ease-standard);
    border-bottom: 1px solid var(--hairline-inverse);
  }
  .kp-nav.is-open { opacity: 1; transform: none; pointer-events: auto }
  .kp-nav a { padding: var(--space-sm) 0; border-bottom: 1px solid var(--hairline-inverse) }
  .kp-nav-toggle { display: inline-flex }
}

.kp-header__cta { flex: none }

/* ================= Hero com vídeo controlado por scroll =================
   .kp-hero-scrub é um wrapper "alto" que define a distância de rolagem
   durante a qual o hero fica travado (position: sticky) enquanto o vídeo
   avança/retrocede conforme o usuário rola. Ao passar da altura do
   wrapper, o hero é liberado e a página volta a rolar normalmente. */
.kp-hero-scrub { position: relative; height: 700vh }
.kp-hero-scrub .kp-hero { position: sticky; top: 0; height: 100vh; min-height: 560px; z-index: 1 }

.kp-hero { position: relative; display: flex; align-items: flex-end; overflow: hidden }
.kp-hero__media { position: absolute; inset: 0; background: var(--sand-200) }
.kp-hero__media video { width: 100%; height: 100%; object-fit: cover }
.kp-hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, var(--overlay-dark) 0%, rgba(1,41,95,0.55) 45%, rgba(1,41,95,0.25) 100%);
}
.kp-hero__content { position: relative; width: 100%; padding-block: var(--space-4xl) }
.kp-hero__inner { max-width: 640px; display: grid; gap: var(--space-lg) }
.kp-hero__inner h1 {
  font-size: var(--text-display); color: var(--white); font-weight: 700;
}
.kp-hero__inner p { font-size: var(--text-h4); color: var(--text-inverse-muted); max-width: 44ch }
.kp-hero__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-sm) }
@media (max-width: 640px) { .kp-hero { min-height: 460px } .kp-hero__inner h1 { font-size: var(--text-h1) } }

/* ================= Trust bar ================= */
.kp-trustbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg) }
.kp-trust-item { display: flex; align-items: flex-start; gap: var(--space-md) }
.kp-trust-item .kp-icon { color: var(--accent-600); margin-top: 2px; flex: none }
.kp-trust-item strong { display: block; font-size: var(--text-small); font-weight: var(--weight-semibold); color: var(--text-heading) }
.kp-trust-item span.kp-trust-meta { font-size: var(--text-small); color: var(--text-muted) }
@media (max-width: 767px) { .kp-trustbar { grid-template-columns: 1fr; gap: var(--space-md) } }

/* ================= Categorias ================= */
.kp-tile-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-md) }
.kp-tile {
  position: relative; height: 280px; border-radius: var(--radius-md); overflow: hidden;
  border: 0; padding: 0; background: var(--sand-200);
  box-shadow: var(--shadow-subtle);
  transition: box-shadow var(--duration-medium) var(--ease-standard), transform var(--duration-medium) var(--ease-standard);
}
.kp-tile:hover { box-shadow: var(--shadow-card); transform: scale(var(--scale-card-hover)) }
.kp-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-image) var(--ease-standard);
}
.kp-tile:hover img { transform: scale(var(--scale-image-hover)) }
.kp-tile__overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: var(--space-lg);
  background: linear-gradient(to top, var(--overlay-dark) 0%, rgba(1,41,95,0) 60%);
}
.kp-tile__overlay span { font-family: var(--font-body); font-size: var(--text-h4); font-weight: 600; color: var(--white) }
@media (max-width: 1024px) { .kp-tile-grid { grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 700px) { .kp-tile-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 480px) { .kp-tile-grid { grid-template-columns: 1fr } .kp-tile { height: 200px } }

/* ================= Catálogo / filtros ================= */
.kp-pills { display: flex; gap: var(--space-sm); flex-wrap: wrap; overflow-x: auto; padding-bottom: 4px }
.kp-pill {
  flex: none; padding: 8px 18px; border-radius: var(--radius-full); border: 1px solid var(--hairline-strong);
  background: var(--white); color: var(--text-body); font-size: var(--text-small);
  transition: background-color var(--duration-micro) var(--ease-standard), color var(--duration-micro) var(--ease-standard), border-color var(--duration-micro) var(--ease-standard);
}
.kp-pill:hover { background: var(--sand-100) }
.kp-pill.is-active { background: var(--navy-900); color: var(--white); border-color: var(--navy-900) }

.kp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg) }
@media (max-width: 900px) { .kp-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 600px) { .kp-grid { grid-template-columns: 1fr } }

.kp-card {
  background: var(--surface-card); border-radius: var(--radius-md); box-shadow: var(--shadow-subtle);
  display: flex; flex-direction: column; overflow: hidden;
  transition: box-shadow var(--duration-medium) var(--ease-standard), transform var(--duration-medium) var(--ease-standard);
}
.kp-card:hover { box-shadow: var(--shadow-card); transform: scale(var(--scale-card-hover)) }
.kp-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand-100) }
.kp-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-image) var(--ease-standard) }
.kp-card:hover .kp-card__media img { transform: scale(var(--scale-image-hover)) }
.kp-card__badge { position: absolute; top: var(--space-md); left: var(--space-md) }
.kp-card__scrim { position: absolute; inset: 0; background: var(--overlay-scrim); display: grid; place-items: center }
.kp-card__body { padding: var(--space-md); display: grid; gap: var(--space-sm); flex: 1 }
.kp-card__title {
  font-family: var(--font-body); font-size: var(--text-h4); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading); line-height: var(--leading-tight); color: var(--text-heading);
}
.kp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-sm); margin-top: auto; padding-top: var(--space-sm) }
.kp-price__from { flex-basis: 100%; font-size: var(--text-caption); color: var(--text-muted) }
.kp-price__value { font-family: var(--font-body); font-size: var(--text-h4); font-weight: 700; color: var(--text-price) }
.kp-price__compare { font-size: var(--text-small); color: var(--text-muted); text-decoration: line-through }
.kp-price__installments { font-size: var(--text-caption); color: var(--text-muted) }

.kp-empty {
  text-align: center; color: var(--text-muted); padding: var(--space-2xl);
  background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
}

/* ================= Sobre / Confiança ================= */
.kp-about { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-2xl); align-items: start }
.kp-about__text { display: grid; gap: var(--space-md) }
.kp-about__text p { color: var(--text-body); max-width: 56ch }
.kp-card-panel {
  background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-subtle);
  padding: var(--space-xl); display: grid; gap: var(--space-lg);
}
.kp-info-row { display: flex; align-items: flex-start; gap: var(--space-md) }
.kp-info-row .kp-icon { color: var(--accent-600); flex: none; margin-top: 2px }
.kp-info-row strong { display: block; font-size: var(--text-small); font-weight: 600; color: var(--text-heading) }
.kp-info-row span { font-size: var(--text-small); color: var(--text-muted) }
@media (max-width: 900px) { .kp-about { grid-template-columns: 1fr } }

/* ================= Footer ================= */
.kp-footer {
  background-color: var(--navy-900);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='90' viewBox='0 0 140 90'%3E%3Cg fill='none' stroke='%230B3670' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 45c0-8 7-14 18-14 7 0 12 5 16 14-4 9-9 14-16 14-11 0-18-6-18-14z'/%3E%3Cpath d='M12 38l8 7-8 7'/%3E%3Ccircle cx='47' cy='39' r='1' fill='%230B3670'/%3E%3Cpath d='M90 71c0-8 7-14 18-14 7 0 12 5 16 14-4 9-9 14-16 14-11 0-18-6-18-14z'/%3E%3Cpath d='M82 64l8 7-8 7'/%3E%3Ccircle cx='117' cy='65' r='1' fill='%230B3670'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  color: var(--white); margin-top: var(--space-4xl);
}
.kp-footer__top { padding-block: var(--space-3xl); display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-2xl) }
.kp-footer__brand { display: grid; gap: var(--space-md); align-content: start }
.kp-footer__brand p { font-size: var(--text-small); color: var(--text-inverse-muted); max-width: 34ch }
.kp-footer__badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px }
.kp-footer__col { display: grid; gap: var(--space-md); align-content: start }
.kp-footer__col span.kp-eyebrow { color: var(--accent-500) }
.kp-footer__col a { font-size: var(--text-small); color: var(--text-inverse-muted); width: fit-content }
.kp-footer__col a:hover { color: var(--white) }
.kp-footer__bottom { border-top: 1px solid var(--hairline-inverse) }
.kp-footer__bottom .kp-container {
  min-height: 56px; padding-block: var(--space-md); display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md); flex-wrap: wrap; font-size: var(--text-caption); color: var(--text-inverse-muted);
}
.kp-footer__deco { display: flex; gap: var(--space-sm); color: var(--accent-500); opacity: 0.6 }
@media (max-width: 900px) { .kp-footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-xl) } }
@media (max-width: 560px) { .kp-footer__top { grid-template-columns: 1fr } }

/* ================= Botão flutuante WhatsApp ================= */
.kp-float-whatsapp {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  width: 56px; height: 56px; border-radius: var(--radius-full);
  background: var(--accent-500); color: var(--navy-900); display: grid; place-items: center;
  box-shadow: var(--shadow-elevated);
  transition: background-color var(--duration-micro) var(--ease-standard), transform var(--duration-micro) var(--ease-standard);
}
.kp-float-whatsapp:hover { background: var(--accent-600); color: var(--navy-900); transform: translateY(var(--lift-hover)) }

/* ================= Utilitário: mapa/localização ================= */
.kp-map-frame {
  border: 0; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-md); filter: grayscale(0.15);
}