/* =========================================================
   GÁVIA LINK — COMPONENTS.CSS
   ---------------------------------------------------------
   Componentes reutilizáveis:
   - Marca
   - Eyebrows
   - Títulos de seção
   - Botões
   - Mockup de celular
   - Previews WhatsApp
   - Cards de curadoria
   - Cards de oferta
   - Preços e badges
   - Skeleton loading

   Mobile-first
========================================================= */


/* =========================================================
   01. BRAND
========================================================= */

.brand {
  display: inline-flex;
  align-items: center;

  width: fit-content;
}


.brand__logo {
  display: block;

  width: clamp(145px, 38vw, 190px);

  height: auto;

  object-fit: contain;
}


/* =========================================================
   02. EYEBROW
========================================================= */

.eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: fit-content;

  padding: 0.5rem 0.85rem;

  border: 1px solid rgba(230, 0, 18, 0.12);

  border-radius: var(--radius-pill);

  color: var(--color-wine);

  background-color: rgba(230, 0, 18, 0.055);

  font-size: var(--font-size-xs);
  font-weight: var(--font-bold);

  line-height: 1;

  letter-spacing: 0.06em;

  text-transform: uppercase;
}


/* Variante clara para fundos escuros */

.eyebrow--light {
  color: var(--color-white);

  border-color: rgba(255, 255, 255, 0.2);

  background-color: rgba(255, 255, 255, 0.1);
}


/* =========================================================
   03. SECTION HEADING
========================================================= */

.section-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: var(--space-4);

  max-width: 760px;
}


.section-heading--center {
  align-items: center;

  margin-inline: auto;

  text-align: center;
}


.section-heading h2 {
  max-width: 15ch;
}


.section-heading h2 span {
  color: var(--color-red);
}


.section-heading p {
  max-width: 540px;

  font-size: clamp(1rem,
      2.8vw,
      1.125rem);

  line-height: 1.6;
}


.section-heading--light h2,
.section-heading--light p {
  color: var(--color-white);
}


/* =========================================================
   04. BUTTONS
========================================================= */

.button {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: var(--space-3);

  min-height: 54px;

  padding:
    0.95rem 1.35rem;

  overflow: hidden;

  border: 1px solid transparent;

  border-radius: var(--radius-pill);

  color: var(--color-white);

  background-color: var(--color-red);

  box-shadow:
    0 10px 24px rgba(230, 0, 18, 0.18);

  font-size: 0.95rem;
  font-weight: var(--font-bold);

  line-height: 1.1;

  text-align: center;

  cursor: pointer;

  isolation: isolate;

  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    background-color var(--transition-normal);
}


.button::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  background:
    linear-gradient(120deg,
      rgba(255, 255, 255, 0) 25%,
      rgba(255, 255, 255, 0.15) 48%,
      rgba(255, 255, 255, 0) 70%);

  transform: translateX(-120%);

  transition:
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}


.button__icon {
  display: grid;
  place-items: center;

  flex: 0 0 auto;

  width: 30px;
  height: 30px;

  border-radius: 50%;

  color: var(--color-red);

  background-color: var(--color-white);

  font-size: 1.05rem;
  font-weight: var(--font-bold);

  transition:
    transform var(--transition-normal);
}


/* Primary */

.button--primary {
  color: var(--color-white);

  background:
    linear-gradient(135deg,
      var(--color-red) 0%,
      #D90019 55%,
      var(--color-wine) 145%);
}


/* Secondary */

.button--secondary {
  color: var(--color-wine);

  background-color: var(--color-white);

  border-color: var(--color-border-strong);

  box-shadow: var(--shadow-sm);
}


.button--secondary .button__icon {
  color: var(--color-white);

  background-color: var(--color-wine);
}


/* Large CTA */

.button--large {
  min-height: 60px;

  padding:
    1.05rem 1.6rem;

  font-size: 1rem;
}


/* Full width */

.button--full {
  width: 100%;
}


/* Interactive states */

@media (hover: hover) and (pointer: fine) {

  .button:hover {
    transform: translateY(-2px);

    box-shadow:
      0 15px 32px rgba(230, 0, 18, 0.24);
  }


  .button:hover::before {
    transform: translateX(120%);
  }


  .button:hover .button__icon {
    transform: translateX(3px);
  }

}


.button:active {
  transform: translateY(0) scale(0.985);
}


/* =========================================================
   05. SECTION CTA
========================================================= */

.section-cta {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;

  margin-top: var(--space-8);
}


/* =========================================================
   06. PHONE PREVIEW
========================================================= */

.phone-preview {
  position: relative;

  width: min(100%, 340px);

  margin-inline: auto;
}


.phone-preview__frame {
  position: relative;

  z-index: 2;

  width: 100%;

  padding: 8px;

  overflow: hidden;

  border:
    1px solid rgba(43, 17, 24, 0.1);

  border-radius:
    clamp(28px, 8vw, 42px);

  background:
    linear-gradient(145deg,
      #2C2C2C 0%,
      #0E0E0E 100%);

  box-shadow:
    0 28px 60px rgba(70, 10, 25, 0.2),
    0 8px 20px rgba(70, 10, 25, 0.1);
}


.phone-preview__frame::before {
  content: "";

  position: absolute;

  top: 14px;
  left: 50%;

  z-index: 3;

  width: 28%;
  height: 18px;

  border-radius: var(--radius-pill);

  background-color: #090909;

  transform: translateX(-50%);
}


.phone-preview__image {
  width: 100%;
  height: auto;

  border-radius:
    clamp(22px, 7vw, 34px);

  object-fit: cover;
}


.phone-preview__glow {
  position: absolute;

  inset:
    12% -8% -5%;

  z-index: 0;

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(230, 0, 18, 0.15) 0%,
      rgba(122, 15, 40, 0.08) 42%,
      transparent 72%);

  filter: blur(28px);

  pointer-events: none;
}


/* =========================================================
   07. WHATSAPP SHOWCASE
========================================================= */

.whatsapp-showcase {
  position: relative;

  overflow: hidden;

  border:
    1px solid var(--color-border);

  border-radius: var(--radius-xl);

  background-color: var(--color-white);

  box-shadow: var(--shadow-md);
}


.whatsapp-showcase img {
  width: 100%;
  height: auto;

  object-fit: cover;
}


.whatsapp-showcase--featured {
  box-shadow:
    0 25px 65px rgba(60, 13, 25, 0.13);
}


/* Pequeno detalhe visual */

.whatsapp-showcase::after {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  border-radius: inherit;

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}


/* =========================================================
   08. CURATION STEP
========================================================= */

.curation-step {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: var(--space-3);

  min-width: 0;

  padding:
    1.4rem 1rem;

  border:
    1px solid var(--color-border);

  border-radius: var(--radius-lg);

  background:
    rgba(255, 255, 255, 0.72);

  box-shadow:
    var(--shadow-sm);

  text-align: center;

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  transition:
    transform var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow var(--transition-normal);
}


.curation-step__number {
  position: absolute;

  top: 10px;
  left: 12px;

  color:
    rgba(122, 15, 40, 0.45);

  font-size: 0.67rem;
  font-weight: var(--font-bold);

  letter-spacing: 0.08em;
}


.curation-step__icon {
  display: grid;
  place-items: center;

  width: 48px;
  height: 48px;

  border-radius: var(--radius-md);

  background-color:
    rgba(230, 0, 18, 0.07);

  font-size: 1.45rem;
}


.curation-step__brand-icon {
  width: 42px;
  height: 42px;

  object-fit: contain;
}


.curation-step strong {
  color: var(--color-text-strong);

  font-size: 0.93rem;
  font-weight: var(--font-bold);

  line-height: 1.2;
}


@media (hover: hover) and (pointer: fine) {

  .curation-step:hover {
    transform: translateY(-4px);

    border-color:
      rgba(230, 0, 18, 0.18);

    box-shadow: var(--shadow-md);
  }

}


/* =========================================================
   09. OFFER CARD
   Radar
========================================================= */

.offer-card {
  position: relative;

  display: grid;

  grid-template-columns:
    88px minmax(0, 1fr);

  gap: var(--space-4);

  width: 100%;

  padding: var(--space-3);

  overflow: hidden;

  border:
    1px solid var(--color-border);

  border-radius: var(--radius-lg);

  background:
    rgba(255, 255, 255, 0.94);

  box-shadow: var(--shadow-sm);

  transform: translateZ(0);

  transition:
    transform var(--transition-slow),
    opacity var(--transition-slow),
    box-shadow var(--transition-normal);
}


.offer-card__image {
  position: relative;

  width: 88px;
  height: 88px;

  overflow: hidden;

  border-radius: var(--radius-md);

  background-color:
    var(--color-surface-soft);
}


.offer-card__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


.offer-card__content {
  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 0.4rem;

  min-width: 0;
}


.offer-card__category {
  color: var(--color-wine);

  font-size: 0.68rem;
  font-weight: var(--font-bold);

  letter-spacing: 0.055em;

  text-transform: uppercase;
}


.offer-card__title {
  display: -webkit-box;

  overflow: hidden;

  color: var(--color-text-strong);

  font-size:
    clamp(0.88rem, 3.5vw, 1rem);

  font-weight: var(--font-bold);

  line-height: 1.25;

  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}


.offer-card__meta {
  display: flex;
  align-items: center;

  gap: var(--space-2);

  flex-wrap: wrap;
}


@media (hover: hover) and (pointer: fine) {

  .offer-card:hover {
    box-shadow: var(--shadow-md);
  }

}


/* =========================================================
   10. MARKETPLACE BADGE
========================================================= */

.marketplace-badge {
  display: inline-flex;
  align-items: center;

  gap: 0.35rem;

  width: fit-content;

  padding:
    0.28rem 0.5rem;

  border-radius: var(--radius-pill);

  color: var(--color-text-muted);

  background-color:
    rgba(122, 15, 40, 0.055);

  font-size: 0.68rem;
  font-weight: var(--font-semibold);

  line-height: 1;
}

/* Amazon */

.marketplace-badge--amazon {
  color: #ffffff;
  background-color: #131921;
  border: 1px solid #FF9900;
}


/* Shopee */

.marketplace-badge--shopee {
  color: #ffffff;
  background-color: #EE4D2D;
}


/* =========================================================
   11. DISCOUNT BADGE
========================================================= */

.discount-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: fit-content;

  padding:
    0.35rem 0.55rem;

  border-radius: var(--radius-pill);

  /*
     Verde é utilizado somente como cor funcional
     para desconto / oferta.
  */

  color: #176A39;

  background-color: #EAF7EF;

  font-size: 0.7rem;
  font-weight: var(--font-bold);

  line-height: 1;
}


/* Desconto forte */

.discount-badge--hot {
  color: #FFFFFF;

  background-color: #24894B;
}


/* =========================================================
   12. PRICE
========================================================= */

.offer-price {
  display: flex;
  align-items: baseline;

  gap: var(--space-2);

  flex-wrap: wrap;
}


.offer-price__old {
  color: var(--color-text-muted);

  font-size: 0.75rem;

  text-decoration: line-through;

  opacity: 0.75;
}


.offer-price__current {
  color: var(--color-red);

  font-size:
    clamp(1rem, 4vw, 1.18rem);

  font-weight: var(--font-extrabold);

  letter-spacing: -0.025em;
}


/* =========================================================
   13. MINI BADGE / PILL
========================================================= */

.pill {
  display: inline-flex;
  align-items: center;

  gap: 0.35rem;

  width: fit-content;

  padding:
    0.4rem 0.65rem;

  border-radius: var(--radius-pill);

  color: var(--color-wine);

  background-color:
    rgba(230, 0, 18, 0.06);

  font-size: 0.72rem;
  font-weight: var(--font-semibold);
}


/* =========================================================
   14. ICON BUBBLE
========================================================= */

.icon-bubble {
  display: grid;
  place-items: center;

  width: 46px;
  height: 46px;

  flex: 0 0 auto;

  border-radius: 50%;

  color: var(--color-red);

  background-color:
    rgba(230, 0, 18, 0.07);
}


/* =========================================================
   15. SKELETON
========================================================= */

.skeleton {
  position: relative;

  display: block;

  overflow: hidden;

  border-radius: var(--radius-sm);

  background-color:
    #F3E8E7;
}


.skeleton::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(100deg,
      transparent 20%,
      rgba(255, 255, 255, 0.75) 50%,
      transparent 80%);

  transform: translateX(-100%);

  animation:
    skeleton-shimmer 1.6s infinite;
}


.skeleton--small {
  width: 30%;
  height: 9px;
}


.skeleton--title {
  width: 82%;
  height: 15px;
}


.skeleton--price {
  width: 44%;
  height: 16px;
}


.offer-card--skeleton {
  pointer-events: none;
}


.offer-card--skeleton .offer-card__image {
  background-color:
    #F3E8E7;
}


/* =========================================================
   16. SKELETON ANIMATION
========================================================= */

@keyframes skeleton-shimmer {

  100% {
    transform:
      translateX(100%);
  }

}


/* =========================================================
   17. DIVIDER
========================================================= */

.divider {
  width: 100%;
  height: 1px;

  border: 0;

  background-color:
    var(--color-border);
}


/* =========================================================
   18. STATUS DOT
   Pode ser usado futuramente no Radar
========================================================= */

.status-dot {
  position: relative;

  display: inline-flex;
  align-items: center;

  gap: var(--space-2);

  color: var(--color-text-muted);

  font-size: var(--font-size-xs);
  font-weight: var(--font-semibold);
}


.status-dot::before {
  content: "";

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background-color: var(--color-red);

  box-shadow:
    0 0 0 4px rgba(230, 0, 18, 0.08);
}


/* =========================================================
   19. DESKTOP ENHANCEMENTS
========================================================= */

@media (min-width: 768px) {

  .button {
    min-height: 58px;

    padding-inline:
      1.55rem;

    font-size: 1rem;
  }


  .button--large {
    min-height: 64px;

    padding-inline:
      1.9rem;

    font-size: 1.05rem;
  }


  .phone-preview {
    width: min(100%, 380px);
  }


  .offer-card {
    grid-template-columns:
      108px minmax(0, 1fr);

    gap: var(--space-5);

    padding: var(--space-4);
  }


  .offer-card__image {
    width: 108px;
    height: 108px;
  }


  .curation-step {
    min-height: 150px;

    padding:
      1.7rem 1.25rem;
  }

}


/* =========================================================
   20. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .button::before {
    display: none;
  }


  .skeleton::after {
    display: none;
  }

}