/* ============================================================
   SitePronto — Estilos Globais
   ============================================================ */

/* === Reset & Base === */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sp-font);
  font-size: var(--sp-fs-base);
  font-weight: var(--sp-fw-regular);
  line-height: 1.6;
  color: var(--sp-gray-700);
  background: var(--sp-white);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* === Acessibilidade === */
.sp-skip {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--sp-wine);
  color: var(--sp-white);
  padding: 0.5rem 1rem;
  border-radius: var(--sp-radius-sm);
  z-index: 10000;
  font-weight: var(--sp-fw-semibold);
  transition: top 0.2s;
}

.sp-skip:focus {
  top: 0.5rem;
}

:focus-visible {
  outline: 2px solid var(--sp-wine);
  outline-offset: 2px;
}

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

/* === Container === */
.sp-container {
  width: 100%;
  max-width: var(--sp-container-max);
  margin-inline: auto;
  padding-inline: var(--sp-container-px);
}

/* === Tipografia === */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--sp-fw-extrabold);
  line-height: 1.2;
  color: var(--sp-black);
}

h1 { font-size: var(--sp-fs-3xl); margin-bottom: 1rem; }
h2 { font-size: var(--sp-fs-2xl); margin-bottom: 0.75rem; }
h3 { font-size: var(--sp-fs-xl); margin-bottom: 0.5rem; }
h5 { font-size: var(--sp-fs-md); }

.sp-eyebrow {
  display: inline-block;
  font-size: var(--sp-fs-xs);
  font-weight: var(--sp-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sp-wine);
  margin-bottom: 0.5rem;
}

.sp-eyebrow + h2 { margin-top: 0; }

.sp-eyebrow--light {
  color: var(--sp-cream);
}

.sp-trail {
  color: var(--sp-wine);
  position: relative;
}

.sp-trail::after {
  content: '';
  position: absolute;
  bottom: 0.15em;
  left: 0;
  width: 100%;
  height: 0.35em;
  background: var(--sp-cream-deep);
  z-index: -1;
  border-radius: 2px;
}

.sp-lead {
  font-size: var(--sp-fs-md);
  color: var(--sp-gray-500);
  max-width: 42rem;
  margin-bottom: 2rem;
}

.sp-section-head .sp-lead {
  margin-bottom: 0.75rem;
}

.sp-section-head--center {
  text-align: center;
}

.sp-section-head--center .sp-lead {
  margin-inline: auto;
}

.sp-xs  { font-size: var(--sp-fs-xs); }
.sp-small { font-size: var(--sp-fs-sm); }
.sp-muted { color: var(--sp-gray-400); }

.mb-0 { margin-bottom: 0 !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 2rem !important; }
.text-center { text-align: center; }

/* === Seções === */
.sp-section {
  padding-block: var(--sp-section-py);
}

.sp-section--cream {
  background: var(--sp-cream);
}

.sp-section--cream-deep {
  background: var(--sp-cream-deep);
}

.sp-section--wine {
  background: var(--sp-wine);
  color: var(--sp-white);
}

.sp-section--wine h2,
.sp-section--wine h3 {
  color: var(--sp-white);
}

.sp-section--wine .sp-trail {
  color: var(--sp-gold-light);
}

.sp-section--wine .sp-trail::after {
  background: rgba(255,255,255,0.15);
}

.sp-section--wine .sp-lead,
.sp-section--wine .sp-eyebrow {
  color: var(--sp-cream);
}

/* === Grids === */
.sp-grid {
  display: grid;
  gap: 1.5rem;
}

.sp-grid--2 {
  grid-template-columns: 1fr;
}

.sp-grid--3 {
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .sp-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 52rem) {
  .sp-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   HEADER
   ============================================================ */

.sp-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
  border-bottom: 1px solid var(--sp-gray-100);
  padding-block: 0.75rem;
  transition: box-shadow var(--sp-transition), border-color var(--sp-transition), background-color var(--sp-transition);
}

.sp-header.is-scrolled {
  background: rgba(255,255,255,0.97);
  border-bottom-color: transparent;
  box-shadow: var(--sp-shadow);
}

.sp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* === Logo === */
.sp-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  flex-shrink: 0;
}

.sp-logo img {
  height: 4rem;
  width: auto;
}

.sp-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.sp-logo__name {
  font-size: var(--sp-fs-lg);
  font-weight: var(--sp-fw-extrabold);
  color: var(--sp-black);
}

.sp-logo__name em {
  font-style: normal;
  color: var(--sp-wine);
}

.sp-logo__tld {
  font-size: var(--sp-fs-xs);
  font-weight: var(--sp-fw-medium);
  color: var(--sp-gray-400);
  letter-spacing: 0.04em;
}

/* === Navegação === */
.sp-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.sp-nav__link {
  font-size: var(--sp-fs-sm);
  font-weight: var(--sp-fw-medium);
  color: var(--sp-gray-600);
  padding: 0.5rem 0.75rem;
  border-radius: var(--sp-radius-sm);
  transition: color var(--sp-transition), background var(--sp-transition);
}

.sp-nav__link:hover,
.sp-nav__link[aria-current="page"] {
  color: var(--sp-wine);
  background: var(--sp-cream);
  transform: translateY(-1px);
}

.sp-nav__toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.75rem;
  color: var(--sp-gray-600);
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
}

/* Mobile */
@media (max-width: 51.99rem) {
  .sp-nav__toggle {
    display: block;
  }

  .sp-nav {
    display: flex;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--sp-white);
    border-bottom: 2px solid var(--sp-gray-100);
    padding: 1rem var(--sp-container-px);
    gap: 0.25rem;
    box-shadow: var(--sp-shadow-lg);
    transform: translateY(-0.5rem);
    transition: opacity var(--sp-transition), transform var(--sp-transition), visibility var(--sp-transition);
  }

  .sp-nav.is-open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
  }

  .sp-nav__link {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: var(--sp-fs-base);
  }
}

/* ============================================================
   BOTÕES
   ============================================================ */

.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--sp-font);
  font-size: var(--sp-fs-sm);
  font-weight: var(--sp-fw-semibold);
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--sp-radius);
  cursor: pointer;
  transition: transform var(--sp-transition), background-color var(--sp-transition), color var(--sp-transition), border-color var(--sp-transition), box-shadow var(--sp-transition);
  text-align: center;
}

.sp-btn:hover {
  transform: translateY(-2px);
}

.sp-btn:active {
  transform: translateY(0) scale(0.97);
}

.sp-btn--primary {
  background: var(--sp-wine);
  color: var(--sp-white);
  border-color: var(--sp-wine);
}

.sp-btn--primary:hover {
  background: var(--sp-wine-light);
  border-color: var(--sp-wine-light);
  box-shadow: 0 0.75rem 1.5rem rgba(92,32,39,0.2);
}

.sp-btn--outline {
  background: transparent;
  color: var(--sp-wine);
  border-color: var(--sp-wine);
}

.sp-btn--outline:hover {
  background: var(--sp-wine);
  color: var(--sp-white);
}

.sp-btn--light {
  background: var(--sp-white);
  color: var(--sp-wine);
  border-color: var(--sp-white);
}

.sp-btn--light:hover {
  background: var(--sp-cream);
  border-color: var(--sp-cream);
}

.sp-btn--ghost-light {
  background: transparent;
  color: var(--sp-white);
  border-color: rgba(255,255,255,0.4);
}

.sp-btn--ghost-light:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--sp-white);
}

.sp-btn--sm {
  font-size: var(--sp-fs-xs);
  padding: 0.5rem 1rem;
}

.sp-btn--block {
  width: 100%;
}

/* ============================================================
   HERO
   ============================================================ */

.sp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3rem, 8vw, 6rem);
  background:
    radial-gradient(circle at 83% 22%, rgba(196,150,60,0.18), transparent 25%),
    radial-gradient(circle at 15% 85%, rgba(92,32,39,0.08), transparent 32%),
    var(--sp-cream);
}

.sp-hero::before,
.sp-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

.sp-hero::before {
  width: 26rem;
  height: 26rem;
  top: -13rem;
  right: -8rem;
  border: 1px solid rgba(92,32,39,0.12);
}

.sp-hero::after {
  width: 18rem;
  height: 18rem;
  left: -9rem;
  bottom: -10rem;
  background: rgba(255,255,255,0.55);
}

.sp-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 7vw, 5rem);
  align-items: center;
}

.sp-hero h1 {
  font-size: var(--sp-fs-hero);
  margin-bottom: 1rem;
}

.sp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.sp-hero__assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  font-size: var(--sp-fs-xs);
  color: var(--sp-gray-500);
}

.sp-hero__assurance span {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.sp-hero__assurance i {
  color: var(--sp-wine);
  font-size: 0.9em;
}

.sp-hero__art {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: clamp(20rem, 50vw, 32rem);
  perspective: 1000px;
}

.sp-hero__glow {
  position: absolute;
  width: 75%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(196,150,60,0.18);
  filter: blur(2.5rem);
  transform: translate3d(0, 1.5rem, -2rem);
  pointer-events: none;
}

.sp-browser-card {
  position: relative;
  z-index: 1;
  width: min(100%, 32rem);
  overflow: hidden;
  border: 0.5rem solid rgba(255,255,255,0.84);
  border-radius: 1.25rem;
  background: var(--sp-white);
  box-shadow: 0 2rem 4rem rgba(61,21,26,0.2), 0 0 0 1px rgba(92,32,39,0.1);
  transform: rotate(2deg);
  transition: transform 0.45s var(--sp-ease-out), box-shadow 0.45s var(--sp-ease-out);
}

[data-sp-tilt]:hover .sp-browser-card {
  box-shadow: 0 2.5rem 5rem rgba(61,21,26,0.25), 0 0 0 1px rgba(92,32,39,0.14);
}

.sp-browser-card__bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  height: 1.8rem;
  padding-inline: 0.65rem;
  background: var(--sp-white);
}

.sp-browser-card__bar span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--sp-cream-deep);
}

.sp-browser-card__bar span:first-child { background: #d77c72; }
.sp-browser-card__bar span:nth-child(2) { background: var(--sp-gold-light); }
.sp-browser-card__bar span:nth-child(3) { background: #91ad83; }

.sp-browser-card__bar small {
  margin-left: 0.5rem;
  color: var(--sp-gray-400);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
}

.sp-browser-card__screen {
  position: relative;
  aspect-ratio: 1.17 / 1;
  overflow: hidden;
  background: var(--sp-wine-dark);
}

.sp-browser-card__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: saturate(0.82) contrast(1.04);
}

.sp-browser-card__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(61,21,26,0.12), rgba(61,21,26,0.72));
}

.sp-browser-card__copy {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 9%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--sp-white);
}

.sp-browser-card__eyebrow {
  margin-bottom: 0.4rem;
  color: var(--sp-gold-light);
  font-size: 0.65rem;
  font-weight: var(--sp-fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sp-browser-card__copy strong {
  max-width: 13rem;
  color: var(--sp-white);
  font-size: clamp(1.2rem, 3vw, 2rem);
  line-height: 1.05;
}

.sp-browser-card__line {
  display: block;
  width: 3.2rem;
  height: 0.2rem;
  margin-top: 0.9rem;
  border-radius: 999px;
  background: var(--sp-gold-light);
}

.sp-hero__floating {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 999px;
  background: rgba(255,255,255,0.88);
  box-shadow: var(--sp-shadow-lg);
  color: var(--sp-wine);
  font-size: var(--sp-fs-xs);
  font-weight: var(--sp-fw-semibold);
  backdrop-filter: blur(0.6rem);
  transition: transform 0.45s var(--sp-ease-out);
}

.sp-hero__floating i { color: var(--sp-gold); }
.sp-hero__floating--one { top: 15%; right: 0; }
.sp-hero__floating--two { bottom: 14%; left: 0; }

@media (min-width: 52rem) {
  .sp-hero__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   STATS
   ============================================================ */

.sp-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  text-align: center;
}

.sp-stat__value {
  display: block;
  font-size: var(--sp-fs-2xl);
  font-weight: var(--sp-fw-extrabold);
  color: var(--sp-gold-light);
  margin-bottom: 0.25rem;
}

.sp-stat__label {
  font-size: var(--sp-fs-sm);
  opacity: 0.85;
}

@media (min-width: 40rem) {
  .sp-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   CARDS & BENEFÍCIOS
   ============================================================ */

.sp-card {
  background: var(--sp-white);
  border: 1px solid var(--sp-gray-100);
  border-radius: var(--sp-radius-lg);
  padding: 1.5rem;
  transition: transform 0.45s var(--sp-ease-out), box-shadow 0.45s var(--sp-ease-out), border-color var(--sp-transition);
}

.sp-card:hover {
  box-shadow: var(--sp-shadow-hover);
  border-color: rgba(92,32,39,0.22);
}

.sp-card--featured {
  border-color: var(--sp-wine);
  border-width: 2px;
  position: relative;
}

.sp-card__badge {
  display: inline-block;
  font-size: var(--sp-fs-xs);
  font-weight: var(--sp-fw-semibold);
  background: var(--sp-gold);
  color: var(--sp-white);
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}

.sp-card__price {
  margin-bottom: 0.75rem;
}

.sp-card__price strong {
  font-size: var(--sp-fs-xl);
  font-weight: var(--sp-fw-extrabold);
  color: var(--sp-wine);
}

.sp-card__price span {
  display: block;
  font-size: var(--sp-fs-xs);
  color: var(--sp-gray-400);
  margin-top: 0.15rem;
}

.sp-card__name {
  margin-bottom: 0.75rem;
}

.sp-card__summary {
  color: var(--sp-gray-500);
  font-size: var(--sp-fs-sm);
}

.sp-card__foot {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--sp-gray-100);
}

.sp-benefit {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.sp-benefit__icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sp-cream);
  color: var(--sp-wine);
  border-radius: var(--sp-radius);
  font-size: 1.25rem;
}

.sp-benefit h3 {
  margin-bottom: 0.5rem;
}

.sp-benefit p {
  font-size: var(--sp-fs-sm);
  color: var(--sp-gray-500);
  margin-bottom: 0;
}

/* ============================================================
   STEPS (Como funciona)
   ============================================================ */

.sp-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  counter-reset: step;
}

.sp-step {
  position: relative;
  padding: 1.5rem;
  background: var(--sp-white);
  border: 1px solid var(--sp-gray-100);
  border-radius: var(--sp-radius-lg);
  counter-increment: step;
  transition: transform 0.4s var(--sp-ease-out), box-shadow 0.4s var(--sp-ease-out), border-color var(--sp-transition);
}

.sp-step:hover {
  border-color: rgba(92,32,39,0.2);
  box-shadow: var(--sp-shadow);
}

.sp-step::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--sp-wine);
  color: var(--sp-white);
  border-radius: 50%;
  font-size: var(--sp-fs-sm);
  font-weight: var(--sp-fw-extrabold);
  margin-bottom: 1rem;
}

.sp-step h3 {
  margin-bottom: 0.5rem;
}

.sp-step p {
  color: var(--sp-gray-500);
  font-size: var(--sp-fs-sm);
  margin-bottom: 0.75rem;
}

.sp-step__time {
  display: inline-block;
  font-size: var(--sp-fs-xs);
  font-weight: var(--sp-fw-semibold);
  color: var(--sp-wine);
  background: var(--sp-cream);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
}

@media (min-width: 40rem) {
  .sp-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 52rem) {
  .sp-steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================================
   FAQ (Accordion)
   ============================================================ */

.sp-faq {
  max-width: 48rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sp-faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  font-family: var(--sp-font);
  font-size: var(--sp-fs-base);
  font-weight: var(--sp-fw-semibold);
  color: var(--sp-black);
  background: var(--sp-white);
  border: 1px solid var(--sp-gray-100);
  border-radius: var(--sp-radius);
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: border-color var(--sp-transition), background var(--sp-transition);
}

.sp-faq__trigger:hover {
  border-color: var(--sp-gray-200);
}

.sp-faq__trigger i {
  font-size: 1.25rem;
  transition: transform var(--sp-transition);
  flex-shrink: 0;
  color: var(--sp-wine);
}

.sp-faq__trigger[aria-expanded="true"] {
  background: var(--sp-cream);
  border-color: var(--sp-wine);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.sp-faq__trigger[aria-expanded="true"] i {
  transform: rotate(45deg);
}

.sp-faq__panel {
  max-height: 0;
  overflow: hidden;
  padding: 0 1.25rem;
  background: var(--sp-white);
  border: 1px solid transparent;
  border-top: none;
  border-bottom-left-radius: var(--sp-radius);
  border-bottom-right-radius: var(--sp-radius);
  font-size: var(--sp-fs-sm);
  color: var(--sp-gray-500);
  opacity: 0;
  transition: max-height 0.35s var(--sp-ease-out), opacity var(--sp-transition), padding 0.35s var(--sp-ease-out), border-color var(--sp-transition);
}

.sp-faq__panel p { margin-bottom: 0; }

.sp-faq__panel.is-open {
  max-height: 20rem;
  padding-bottom: 1.25rem;
  border-color: var(--sp-wine);
  opacity: 1;
}

/* ============================================================
   CTA
   ============================================================ */

.sp-cta {
  text-align: center;
  padding: clamp(2rem, 5vw, 3rem);
  background: var(--sp-wine);
  border-radius: var(--sp-radius-xl);
  color: var(--sp-white);
}

.sp-cta h2 {
  color: var(--sp-white);
  margin-bottom: 0.75rem;
}

.sp-cta p {
  color: var(--sp-cream);
  margin-bottom: 1.5rem;
  font-size: var(--sp-fs-md);
}

.sp-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* ============================================================
   FOOTER
   ============================================================ */

.sp-footer {
  background: var(--sp-black);
  color: var(--sp-gray-300);
  padding-block: clamp(2rem, 5vw, 3rem);
  font-size: var(--sp-fs-sm);
}

.sp-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.sp-footer__grid h5 {
  color: var(--sp-white);
  font-size: var(--sp-fs-sm);
  margin-bottom: 0.75rem;
}

.sp-footer__grid ul {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.sp-footer__grid a {
  color: var(--sp-gray-400);
  transition: color var(--sp-transition);
}

.sp-footer__grid a:hover {
  color: var(--sp-white);
}

.sp-footer .sp-logo__name {
  color: var(--sp-white);
}

.sp-footer .sp-logo__name em {
  color: var(--sp-gold-light);
}

.sp-footer .sp-logo__tld {
  color: var(--sp-gray-400);
}

.sp-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: var(--sp-fs-xs);
  color: var(--sp-gray-400);
}

@media (min-width: 40rem) {
  .sp-footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

/* === Social === */
.sp-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.sp-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  color: var(--sp-gray-300);
  font-size: 1.1rem;
  transition: background var(--sp-transition), color var(--sp-transition);
}

.sp-social a:hover {
  background: var(--sp-wine);
  color: var(--sp-white);
}

/* ============================================================
   TABELAS
   ============================================================ */

.sp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sp-fs-sm);
}

.sp-table caption {
  text-align: left;
  margin-bottom: 0.5rem;
}

.sp-table thead {
  border-bottom: 2px solid var(--sp-gray-200);
}

.sp-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-weight: var(--sp-fw-semibold);
  color: var(--sp-black);
  font-size: var(--sp-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.sp-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--sp-gray-100);
}

.sp-table tbody tr:hover {
  background: var(--sp-gray-50);
}

/* ============================================================
   LISTAS
   ============================================================ */

.sp-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.sp-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--sp-fs-sm);
}

.sp-list li i {
  flex-shrink: 0;
  margin-top: 0.2em;
}

.sp-list i.bi-check-lg,
.sp-list i.bi-check-circle-fill {
  color: var(--sp-wine);
}

.sp-list--out i.bi-dash-circle {
  color: var(--sp-gray-400);
}

.sp-list strong {
  font-weight: var(--sp-fw-semibold);
}

/* ============================================================
   FORMULÁRIO
   ============================================================ */

.sp-field {
  margin-bottom: 1rem;
}

.sp-label {
  display: block;
  font-size: var(--sp-fs-sm);
  font-weight: var(--sp-fw-medium);
  color: var(--sp-black);
  margin-bottom: 0.35rem;
}

.sp-input,
.sp-textarea {
  display: block;
  width: 100%;
  font-family: var(--sp-font);
  font-size: var(--sp-fs-base);
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--sp-gray-200);
  border-radius: var(--sp-radius);
  background: var(--sp-white);
  color: var(--sp-black);
  transition: border-color var(--sp-transition), box-shadow var(--sp-transition);
}

.sp-input:focus,
.sp-textarea:focus {
  outline: none;
  border-color: var(--sp-wine);
  box-shadow: 0 0 0 3px rgba(92,32,39,0.1);
}

.sp-textarea {
  min-height: 7rem;
  resize: vertical;
}

.sp-error {
  display: none;
  font-size: var(--sp-fs-xs);
  color: #d32f2f;
  margin-top: 0.25rem;
}

.sp-error.is-visible {
  display: block;
}

.sp-input[aria-invalid="true"],
.sp-textarea[aria-invalid="true"] {
  border-color: #d32f2f;
}

/* === Checkbox === */
.sp-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--sp-fs-sm);
  cursor: pointer;
}

.sp-check input[type="checkbox"] {
  margin-top: 0.2em;
  accent-color: var(--sp-wine);
}

/* === Honeypot === */
.sp-honeypot {
  position: absolute;
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ============================================================
   PORTFÓLIO
   ============================================================ */

.sp-work {
  background: var(--sp-white);
  border: 1px solid var(--sp-gray-100);
  border-radius: var(--sp-radius-lg);
  overflow: hidden;
  transition: transform 0.45s var(--sp-ease-out), box-shadow 0.45s var(--sp-ease-out), border-color var(--sp-transition);
}

.sp-work:hover {
  border-color: rgba(92,32,39,0.22);
  box-shadow: var(--sp-shadow-hover);
}

.sp-work__thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--sp-gray-100);
}

.sp-work__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88);
  transition: transform 0.7s var(--sp-ease-out), filter 0.7s var(--sp-ease-out);
}

.sp-work:hover .sp-work__thumb img {
  transform: scale(1.08);
  filter: saturate(1.08) contrast(1.03);
}

.sp-work__tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  font-size: var(--sp-fs-xs);
  font-weight: var(--sp-fw-semibold);
  background: var(--sp-wine);
  color: var(--sp-white);
  padding: 0.2rem 0.6rem;
  border-radius: var(--sp-radius-sm);
}

.sp-work__body {
  padding: 1rem;
}

.sp-work__body h3 {
  font-size: var(--sp-fs-base);
  margin-bottom: 0.5rem;
}

.sp-work__body p {
  font-size: var(--sp-fs-sm);
  color: var(--sp-gray-500);
  margin-bottom: 0;
}

/* ============================================================
   DEMO NOTE
   ============================================================ */

.sp-demo-note {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: var(--sp-cream);
  border: 1px solid var(--sp-cream-deep);
  border-radius: var(--sp-radius);
  padding: 1rem 1.25rem;
  font-size: var(--sp-fs-sm);
  color: var(--sp-gray-600);
}

.sp-demo-note i {
  font-size: 1.25rem;
  color: var(--sp-wine);
  flex-shrink: 0;
  margin-top: 0.1em;
}

/* ============================================================
   STICKY CTA (Mobile)
   ============================================================ */

.sp-sticky-cta {
  display: none;
}

@media (max-width: 51.99rem) {
  .sp-sticky-cta {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--sp-white);
    padding: 0.5rem var(--sp-container-px);
    border-top: 1px solid var(--sp-gray-100);
    z-index: 900;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  }

  body {
    padding-bottom: 4.5rem;
  }
}

/* ============================================================
   LINK ARROW
   ============================================================ */

.sp-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: var(--sp-fw-semibold);
  color: var(--sp-wine);
  transition: gap var(--sp-transition);
}

.sp-link-arrow:hover {
  gap: 0.65rem;
}

/* ============================================================
   REVEAL (Scroll Animation)
   ============================================================ */

.sp-reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.6s var(--sp-ease-out), transform 0.6s var(--sp-ease-out);
}

.sp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   INTERAÇÕES DE CURSOR
   ============================================================ */

.sp-cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(196,150,60,0.13), transparent 68%);
  filter: blur(0.2rem);
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 0.25s ease;
  mix-blend-mode: multiply;
}

.sp-cursor-glow.is-active { opacity: 1; }

[data-sp-tilt] {
  --sp-tilt-x: 0deg;
  --sp-tilt-y: 0deg;
  transform: perspective(1000px) rotateX(var(--sp-tilt-x)) rotateY(var(--sp-tilt-y));
  transform-style: preserve-3d;
  will-change: transform;
}

[data-sp-tilt].is-tilting {
  transition: transform 0.12s linear;
}

/* ============================================================
   UTILITÁRIOS
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .sp-header,
  .sp-footer,
  .sp-sticky-cta,
  .sp-cta {
    display: none;
  }
}