/* ==========================================================================
   MELLOKIN COMPONENTS - CABEÇALHO, HERO SWIPE DEMO, GRID, STICKERS & FOOTER
   Estilo Oficial Mellokin - Fredoka, Nunito, Cantos Orgânicos e Tons Pastéis
   ========================================================================== */

/* 1. CABEÇALHO (SITE HEADER) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255, 250, 240, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 2px dashed rgba(217, 207, 180, 0.6);
  height: 78px;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}

.site-header .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

.brand, .site-logo {
  font: 700 24px/1 var(--font-display);
  color: var(--ink);
  align-items: center;
  gap: 12px;
  display: inline-flex;
  text-decoration: none;
}

.brand img, .site-logo img {
  border-radius: 13px 17px 13px 18px;
  box-shadow: 0 4px rgba(69, 75, 71, 0.15);
  width: 42px;
  height: 42px;
  object-fit: cover;
}

.desktop-nav {
  justify-content: center;
  align-items: center;
  gap: 24px;
  display: flex;
}

.desktop-nav a, .nav-link {
  color: #69716b;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 10px;
  transition: color var(--transition-bounce), background-color var(--transition-bounce);
}

.desktop-nav a:hover, .nav-link:hover, .desktop-nav a.active, .nav-link.active {
  color: var(--mint-dark);
  background: rgba(117, 210, 192, 0.15);
}

.header-cta {
  color: var(--mint-dark);
  background: #e2f1e9;
  border: 2px solid rgba(23, 104, 95, 0.15);
  border-radius: 12px 16px 12px 17px;
  justify-self: end;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 900;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform var(--transition-bounce), background var(--transition-bounce);
}

.header-cta:hover {
  background: #d0ebd9;
  transform: translateY(-2px);
}

.header-actions-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-toggle-btn {
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid var(--border-color);
  border-radius: 11px 15px 12px 16px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  transition: transform var(--transition-bounce), background var(--transition-bounce);
}

.theme-toggle-btn:hover {
  background: #ffffff;
  transform: translateY(-2px);
}

.mobile-menu-btn {
  display: none;
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid var(--border-color);
  border-radius: 11px 14px 12px 15px;
  width: 42px;
  height: 42px;
  font-size: 20px;
  font-weight: 900;
  color: var(--ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* 2. HERO SECTION (COM MENTA POÁ & DEMO DE SWIPE) */
.hero {
  background: radial-gradient(circle at 18px 18px, rgba(255, 255, 255, 0.24) 2px, transparent 2.4px) 0 0/36px 36px, var(--mint);
  border-radius: 0 0 54px 54px;
  min-height: 720px;
  padding: 64px max(24px, 50vw - 590px) 82px;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  align-items: center;
  gap: clamp(36px, 5vw, 76px);
  position: relative;
  overflow: hidden;
}

.hero-copy {
  z-index: 2;
  position: relative;
}

.hero h1 {
  font: 700 clamp(44px, 5.2vw, 68px)/0.96 var(--font-display);
  letter-spacing: -0.04em;
  color: #173d38;
  text-wrap: balance;
  margin: 0;
}

.hero h1 span {
  color: #17685f;
  text-decoration: underline wavy rgba(255, 255, 255, 0.6) 4px;
}

.hero-lead {
  color: #24504a;
  max-width: 580px;
  margin: 22px 0 0;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.6;
}

.hero-lead strong {
  color: #123d37;
  font-weight: 900;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.hero-proof span {
  color: #1f5049;
  background: rgba(255, 255, 255, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 11px 16px 12px 17px;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 900;
  display: inline-flex;
}

.hero-proof b {
  color: #17685f;
  font-size: 15px;
}

.hero-search-box {
  margin-top: 26px;
  max-width: 520px;
  position: relative;
}

.hero-search-input {
  width: 100%;
  height: 54px;
  background: #FFFFFF;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 18px 24px 19px 25px;
  padding: 0 20px 0 48px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(23, 104, 95, 0.15);
  outline: none;
  transition: transform var(--transition-bounce), box-shadow var(--transition-bounce);
}

.hero-search-input:focus {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(23, 104, 95, 0.22);
}

.hero-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--mint-deep);
  pointer-events: none;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

.hero-categories-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.hero-cat-tag {
  background: rgba(255, 255, 255, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 10px 14px 11px 15px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
  color: #174f48;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all var(--transition-bounce);
}

.hero-cat-tag:hover {
  background: #FFFFFF;
  color: var(--mint-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(23, 104, 95, 0.15);
}

/* Card de Destaque no Hero do Blog */
.spotlight-card {
  background: #FFFFFF;
  border: 4px solid rgba(255, 255, 255, 0.95);
  border-radius: 30px 42px 32px 45px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(23, 104, 95, 0.22);
  display: flex;
  flex-direction: column;
  position: relative;
  transform: rotate(0.8deg);
  transition: transform var(--transition-bounce), box-shadow var(--transition-bounce);
  max-width: 480px;
}

.spotlight-card:hover {
  transform: translateY(-4px) rotate(0deg);
  box-shadow: 0 26px 60px rgba(23, 104, 95, 0.28);
}

.spotlight-thumb {
  height: 220px;
  position: relative;
  overflow: hidden;
  border-radius: 26px 38px 0 0;
}

.spotlight-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.spotlight-card:hover .spotlight-thumb img {
  transform: scale(1.05);
}

.spotlight-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.spotlight-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.spotlight-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-light);
}

.spotlight-title {
  font: 700 22px/1.2 var(--font-display);
  color: var(--ink);
  margin-bottom: 10px;
}

.spotlight-title a:hover {
  color: var(--mint-dark);
}

.spotlight-excerpt {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 18px;
  flex-grow: 1;
}

.spotlight-footer {
  border-top: 2px dashed var(--border-color);
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Seção do App abaixo dos artigos */
.app-section-wrapper {
  background: #e1f3ec;
  border-radius: 48px;
  padding: 80px max(24px, 50vw - 590px);
  margin: 60px 0;
  position: relative;
  overflow: hidden;
}

/* 3. SHOWCASE DO SWIPE DEMO NO HERO / APP SECTION */
.hero-visual {
  place-items: center;
  min-height: 550px;
  display: grid;
  position: relative;
}

.hero-visual::before {
  content: "";
  border: 4px dashed rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  width: min(510px, 95%);
  height: 390px;
  position: absolute;
  transform: rotate(-14deg);
}

.swipe-showcase {
  z-index: 1;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: rgba(57, 150, 137, 0.26);
  border: 4px solid rgba(255, 255, 255, 0.45);
  border-radius: 36px 49px 39px 52px;
  width: min(100%, 480px);
  padding: 16px 20px 18px;
  position: relative;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5);
}

.swipe-demo-heading {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  display: flex;
}

.demo-direction {
  letter-spacing: 0.02em;
  border-radius: 11px 15px 12px 17px;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  font-size: 10px;
  font-weight: 900;
  display: inline-flex;
}

.demo-direction b {
  font-size: 16px;
  line-height: 0.7;
}

.demo-direction.care {
  color: #7b312b;
  background: rgba(255, 217, 211, 0.85);
  border: 2px solid rgba(255, 255, 255, 0.6);
}

.demo-direction.good {
  color: #185c53;
  background: rgba(218, 244, 232, 0.85);
  border: 2px solid rgba(255, 255, 255, 0.6);
}

.demo-phone {
  background: #fef9ed;
  border: 8px solid rgba(255, 255, 255, 0.92);
  border-radius: 38px 46px 40px 49px;
  width: min(100%, 360px);
  margin: 0 auto;
  padding: 16px 14px 15px;
  transform: rotate(1.2deg);
  box-shadow: 0 24px 60px rgba(33, 91, 83, 0.28), inset 0 0 0 2px rgba(88, 78, 53, 0.05);
}

.demo-phone-bar {
  color: #74776f;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 34px;
  font-size: 10px;
  font-weight: 900;
}

.demo-phone-bar img {
  border-radius: 10px 13px 11px 14px;
  box-shadow: 0 3px rgba(69, 75, 71, 0.1);
  width: 32px;
  height: 32px;
}

.demo-phone-bar small {
  color: #9b8e73;
  letter-spacing: 0.12em;
  justify-self: end;
  font-size: 8px;
}

.demo-child-switcher {
  background: #f2ecdd;
  border-radius: 20px 25px 21px 27px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: 10px;
  padding: 5px;
}

.demo-child {
  color: #8d8778;
  border-radius: 15px 19px 16px 20px;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  display: flex;
  cursor: pointer;
  transition: all 0.2s ease;
}

.demo-child.active {
  color: #554b36;
  background: #ffe8a7;
  box-shadow: 0 4px 10px rgba(123, 94, 27, 0.12);
}

.demo-child > span {
  width: 30px;
  height: 30px;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  place-items: center;
  display: grid;
  overflow: hidden;
  flex: none;
}

.demo-child > span img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.demo-child p strong {
  font-size: 10px;
  display: block;
}

.demo-child p small {
  font-size: 8px;
  display: block;
}

.swipe-track {
  isolation: isolate;
  background: linear-gradient(90deg, #f7cec8 0 49%, #ceeae0 51% 100%);
  border-radius: 27px 34px 29px 37px;
  height: 290px;
  margin-top: 8px;
  position: relative;
  overflow: hidden;
}

.swipe-track::after {
  content: "";
  z-index: -1;
  background: repeating-linear-gradient(rgba(94, 87, 68, 0.2) 0 5px, transparent 5px 11px);
  width: 2px;
  height: 74%;
  position: absolute;
  top: 13%;
  left: calc(50% - 1px);
}

.swipe-outcome {
  z-index: 0;
  opacity: 0.15;
  color: #FFFFFF;
  text-align: center;
  will-change: transform, opacity;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 46%;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
}

.swipe-outcome span {
  width: 46px;
  height: 46px;
  font: 800 24px var(--font-display);
  border: 4px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.swipe-outcome strong {
  font: 700 13px/1.1 var(--font-display);
}

.outcome-care {
  color: #913e35;
  animation: 8s cubic-bezier(0.32, 0.72, 0, 1) infinite both careReveal;
  left: 0;
}

.outcome-good {
  color: #1e796e;
  animation: 8s cubic-bezier(0.32, 0.72, 0, 1) infinite both goodReveal;
  right: 0;
}

.swipe-behavior-card {
  z-index: 2;
  text-align: center;
  transform-origin: 50% 92%;
  will-change: transform, opacity;
  background: #fffaf0 radial-gradient(circle at 14px 14px, rgba(113, 178, 157, 0.1) 1.5px, transparent 1.8px) 0 0/28px 28px;
  border: 4px solid rgba(255, 255, 255, 0.9);
  border-radius: 25px 33px 27px 36px;
  flex-direction: column;
  align-items: center;
  width: calc(100% - 26px);
  height: 268px;
  padding: 16px 14px;
  animation: 8s cubic-bezier(0.32, 0.72, 0, 1) infinite both heroSwipeCard;
  display: flex;
  position: absolute;
  top: 11px;
  left: 13px;
  box-shadow: 0 14px 34px rgba(79, 69, 47, 0.18);
}

.behavior-meta {
  color: #a49983;
  letter-spacing: 0.12em;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 8px;
  font-weight: 900;
  display: flex;
}

.behavior-meta span {
  background: #eee8d9;
  border-radius: 8px 11px 9px 12px;
  padding: 4px 7px;
}

.behavior-avatar {
  width: 48px;
  height: 48px;
  border: 4px solid #FFFFFF;
  border-radius: 50%;
  place-items: center;
  margin-top: 14px;
  display: grid;
  overflow: hidden;
  box-shadow: 0 4px rgba(70, 63, 50, 0.1);
}

.behavior-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swipe-behavior-card > p {
  color: #6c6d66;
  margin: 12px 0 0;
  font-size: 11px;
  font-weight: 800;
}

.swipe-behavior-card h3 {
  color: #494a45;
  font: 700 28px/1 var(--font-display);
  margin: 2px 0 0;
}

.swipe-behavior-card > small {
  color: #99917f;
  margin-top: 6px;
  font-size: 9px;
}

.behavior-photo {
  color: #887e69;
  border: 2px dashed #c9bea7;
  border-radius: 11px 15px 12px 16px;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 10px;
  font-size: 9px;
  font-weight: 900;
  display: inline-flex;
}

.behavior-photo span {
  color: #d0a12b;
}

.swipe-hand {
  z-index: 4;
  color: #8d6b16;
  background: #fff1b9;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 13px 18px 14px 19px;
  place-items: center;
  width: 50px;
  height: 30px;
  animation: 8s cubic-bezier(0.32, 0.72, 0, 1) infinite both heroSwipeHand;
  display: grid;
  position: absolute;
  bottom: 16px;
  right: calc(50% - 25px);
  box-shadow: 0 6px 12px rgba(80, 67, 34, 0.16);
}

.swipe-hand span {
  font-size: 18px;
  font-weight: 900;
}

.demo-phone-foot {
  text-align: center;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: 10px;
}

.demo-phone-foot span b {
  color: #4e625d;
  font-size: 10px;
  display: block;
}

.demo-phone-foot span small {
  color: #a09682;
  margin-top: 1px;
  font-size: 8px;
  display: block;
}

.demo-phone-foot i {
  background: #d6ccb6;
  width: 1px;
  height: 24px;
}

.demo-controls {
  color: #1f554e;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 12px 5px 0;
  font-size: 10px;
  font-weight: 900;
  display: flex;
}

.demo-controls button {
  color: #255c55;
  cursor: pointer;
  min-height: 28px;
  font: 900 10px var(--font-body);
  background: rgba(255, 255, 255, 0.25);
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 9px 13px 10px 14px;
  padding: 0 10px;
  transition: all 0.2s ease;
}

.demo-controls button:hover {
  background: rgba(255, 255, 255, 0.45);
}

.is-paused .swipe-behavior-card,
.is-paused .swipe-outcome,
.is-paused .swipe-hand {
  animation-play-state: paused;
}

@keyframes heroSwipeCard {
  0%, 13%, 40%, 56%, 84%, 100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
  22%, 30% {
    opacity: 0.86;
    transform: translate(62%) rotate(7deg);
  }
  65%, 73% {
    opacity: 0.86;
    transform: translate(-62%) rotate(-7deg);
  }
}

@keyframes heroSwipeHand {
  0%, 13%, 40%, 56%, 84%, 100% {
    opacity: 1;
    transform: translate(0, 0);
  }
  22%, 30% {
    opacity: 0.9;
    transform: translate(78px, -6px);
  }
  65%, 73% {
    opacity: 0.9;
    transform: translate(-78px, -6px);
  }
}

@keyframes goodReveal {
  0%, 13%, 40%, 100% {
    opacity: 0.12;
    transform: translate(10px) scale(0.96);
  }
  21%, 31% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes careReveal {
  0%, 56%, 84%, 100% {
    opacity: 0.12;
    transform: translate(-10px) scale(0.96);
  }
  64%, 74% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

/* 4. TRILHA DAS FAIXAS ETÁRIAS (JOURNEY PATH SECTION) */
.journey-section {
  background: #e1f3ec;
  padding: 90px 0 110px;
  overflow: hidden;
  position: relative;
}

.section-heading {
  max-width: 680px;
}

.section-heading h2 {
  font: 700 clamp(36px, 4.5vw, 54px)/1.02 var(--font-display);
  letter-spacing: -0.035em;
  margin: 0;
}

.section-heading > p:last-child {
  color: var(--muted);
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.6;
}

.section-heading.centered {
  text-align: center;
  margin-inline: auto;
}

.section-heading.centered > p:last-child {
  margin-inline: auto;
}

.journey-path {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
  position: relative;
}

.journey-path::before {
  content: "";
  border-top: 4px dashed rgba(35, 141, 129, 0.4);
  border-radius: 50%;
  width: calc(100% - 90px);
  height: 74px;
  position: absolute;
  top: -30px;
  left: 45px;
  transform: rotate(-1deg);
}

.journey-card {
  z-index: 1;
  background: var(--paper);
  border: 4px solid rgba(255, 255, 255, 0.85);
  border-radius: 29px 38px 31px 41px;
  flex-direction: column;
  min-height: 310px;
  padding: 26px 22px;
  display: flex;
  position: relative;
  box-shadow: 0 16px 36px rgba(55, 98, 87, 0.08);
  transition: transform var(--transition-bounce), box-shadow var(--transition-bounce);
}

.journey-card:nth-child(2n) {
  margin-top: 40px;
  transform: rotate(1.1deg);
}

.journey-card:nth-child(odd) {
  transform: rotate(-0.7deg);
}

.journey-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 22px 48px rgba(55, 98, 87, 0.14);
}

.journey-number {
  background: var(--mint-dark);
  color: #FFFFFF;
  width: 34px;
  height: 34px;
  font: 700 13px var(--font-display);
  border: 4px solid #e1f3ec;
  border-radius: 50%;
  place-items: center;
  display: grid;
  position: absolute;
  top: -17px;
  left: 22px;
}

.journey-icon {
  width: 56px;
  height: 56px;
  font: 700 26px var(--font-display);
  border-radius: 20px 26px 21px 28px;
  place-items: center;
  margin: 12px 0 22px;
  display: grid;
}

.journey-card.mint .journey-icon {
  color: #238d81;
  background: #d5efe6;
}

.journey-card.yellow .journey-icon {
  color: #956f11;
  background: #fff0b9;
}

.journey-card.coral .journey-icon {
  color: #b6574d;
  background: #ffe1dc;
}

.journey-card.lilac .journey-icon {
  color: #6753b1;
  background: #e9e3ff;
}

.journey-card h3 {
  font: 600 22px/1.1 var(--font-display);
  margin: 0;
}

.journey-card p {
  color: var(--muted);
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.55;
}

.path-arrow {
  color: rgba(35, 141, 129, 0.5);
  font-size: 24px;
  font-weight: 900;
  position: absolute;
  top: 45px;
  right: -30px;
  transform: rotate(4deg);
}

/* 5. GRID DE ARTIGOS DO BLOG (ESTILO EDITORIAL COM BORDAS ORGÂNICAS) */
.blog-feed-section {
  padding: 100px 0 120px;
  background-color: var(--paper);
}

.filters-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 36px 0 48px;
}

.filter-pill {
  background: #FFFFFF;
  border: 2px solid var(--border-color);
  border-radius: 12px 17px 13px 18px;
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  cursor: pointer;
  transition: all var(--transition-bounce);
}

.filter-pill:hover {
  border-color: var(--mint-deep);
  color: var(--mint-dark);
  transform: translateY(-2px);
}

.filter-pill.active {
  background: var(--sun);
  color: #765a13;
  border-color: #f7ca54;
  box-shadow: 0 6px 14px rgba(255, 213, 107, 0.3);
  transform: translateY(-2px);
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 28px;
}

.article-card {
  background: #FFFFFF;
  border: 3px solid rgba(255, 255, 255, 0.95);
  border-radius: 26px 36px 28px 38px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 12px 32px rgba(81, 73, 53, 0.08);
  transition: transform var(--transition-bounce), box-shadow var(--transition-bounce);
}

.article-card:nth-child(even) {
  transform: rotate(0.4deg);
}

.article-card:nth-child(odd) {
  transform: rotate(-0.4deg);
}

.article-card:hover {
  transform: translateY(-6px) rotate(0deg) scale(1.01);
  box-shadow: 0 20px 48px rgba(81, 73, 53, 0.14);
}

.article-card-thumb {
  position: relative;
  height: 210px;
  overflow: hidden;
  border-radius: 22px 32px 0 0;
}

.article-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.article-card:hover .article-card-thumb img {
  transform: scale(1.06);
}

.article-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.article-card-body {
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.article-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-light);
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 10px;
}

.article-card-title {
  font: 700 21px/1.2 var(--font-display);
  color: var(--ink);
  margin-bottom: 10px;
  transition: color var(--transition-bounce);
}

.article-card:hover .article-card-title {
  color: var(--mint-dark);
}

.article-card-excerpt {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 20px;
  flex-grow: 1;
}

.article-card-footer {
  border-top: 2px dashed var(--border-color);
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.earned-sticker-pill {
  background: #fff0b5;
  color: #816113;
  border-radius: 8px 12px 9px 13px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.read-more-link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 900;
  color: var(--mint-dark);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.read-more-link:hover {
  color: var(--mint-deep);
  transform: translateX(3px);
}

/* 6. MURAL DE STICKERS DE INCENTIVO */
.stickers-section {
  padding: 110px 0 120px;
  background: var(--cream);
  border-top: 2px dashed var(--line);
  border-bottom: 2px dashed var(--line);
}

.stickers-grid-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
}

.sticker-guidance {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.sticker-guidance article {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: start;
  gap: 14px;
}

.sticker-guidance article > span {
  width: 34px;
  height: 34px;
  color: var(--mint-dark);
  font: 700 13px var(--font-display);
  background: #dcefe7;
  border-radius: 10px 14px 11px 15px;
  place-items: center;
  display: grid;
}

.sticker-guidance p {
  color: #7b796f;
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.5;
}

.sticker-guidance strong {
  color: var(--ink);
}

.sticker-board {
  background: #f5edd9;
  border: 5px solid #FFFFFF;
  border-radius: 30px 41px 33px 44px;
  padding: 28px;
  transform: rotate(1deg);
  box-shadow: 0 24px 60px rgba(76, 67, 44, 0.15);
}

.sticker-board-title {
  border-bottom: 2px dashed #d1c4a8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 0 4px 16px;
}

.sticker-board-title span {
  color: #93856c;
  letter-spacing: 0.14em;
  font-size: 10px;
  font-weight: 900;
}

.sticker-board-title b {
  color: #766b54;
  font-size: 12px;
}

.sticker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.sticker-card {
  border: 3px solid #FFFFFF;
  border-radius: 18px 24px 20px 26px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 105px;
  padding: 10px 6px;
  display: flex;
  box-shadow: 0 6px 14px rgba(81, 69, 45, 0.08);
  transition: transform var(--transition-bounce);
}

.sticker-card:hover {
  transform: translateY(-4px) scale(1.05);
}

.sticker-card > span {
  width: 44px;
  height: 44px;
  font: 700 22px var(--font-display);
  border: 3px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.sticker-card strong {
  color: #625e52;
  text-align: center;
  font-size: 10px;
}

.sticker-card.yellow { color: #956c0b; background: #ffe69a; }
.sticker-card.mint { color: #26776d; background: #d9eee6; }
.sticker-card.coral { color: #a34c44; background: #ffdcd5; }
.sticker-card.lilac { color: #634fb5; background: #e5dfff; }
.sticker-card.blue { color: #3d6e9a; background: #dceafa; }
.sticker-card.green { color: #607a23; background: #e1efbd; }
.sticker-card.sun { color: #aa7810; background: #fff0bb; }
.sticker-card.rose { color: #955577; background: #f3dbe7; }

.sticker-board > aside {
  background: #fffaf0;
  border-radius: 16px 22px 18px 24px;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 14px 16px;
}

.sticker-board > aside > span {
  background: var(--sun);
  color: #825f0d;
  border-radius: 15px 19px 16px 21px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 22px;
  display: grid;
}

.sticker-board > aside p {
  color: #776f60;
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
}

.sticker-board > aside b {
  color: #5a5448;
  display: block;
}

/* 7. DEMONSTRAÇÃO DE HISTÓRICO COM LINHA DO TEMPO */
.history-section {
  background: #dff2ea;
  padding: 100px 0 120px;
}

.history-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
  margin-top: 50px;
}

.history-phone {
  background: #fbf6e9;
  border: 8px solid rgba(255, 255, 255, 0.95);
  border-radius: 39px 50px 42px 54px;
  padding: 26px 22px 30px;
  position: relative;
  box-shadow: 0 28px 72px rgba(48, 96, 83, 0.18), inset 0 0 0 2px rgba(90, 79, 52, 0.05);
}

.timeline-feed {
  display: grid;
  gap: 14px;
  margin: 20px 0 0 12px;
  padding-left: 24px;
  position: relative;
}

.timeline-feed::before {
  content: "";
  background: repeating-linear-gradient(#b9d4cb 0 9px, transparent 9px 16px);
  border-radius: 99px;
  width: 4px;
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 0;
}

.timeline-card {
  background: #FFFFFF;
  border: 3px solid #FFFFFF;
  border-radius: 23px 31px 25px 34px;
  display: grid;
  grid-template-columns: 150px 1fr;
  min-height: 165px;
  position: relative;
  box-shadow: 0 10px 24px rgba(78, 70, 50, 0.08);
}

.timeline-marker {
  z-index: 2;
  background: var(--mint-deep);
  border: 4px solid #dff2ea;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 24px;
  left: -33px;
  box-shadow: 0 0 0 3px #FFFFFF;
}

.timeline-card.care .timeline-marker {
  background: var(--coral);
}

.timeline-card > img {
  object-fit: cover;
  border-radius: 20px 0 0 31px;
  width: 100%;
  height: 100%;
}

.timeline-content {
  padding: 14px 16px;
}

.timeline-content h3 {
  font: 600 16px/1.15 var(--font-display);
  margin: 6px 0 4px;
}

.timeline-content > p {
  color: #817a6d;
  font-size: 11px;
  line-height: 1.4;
  margin: 0;
}

/* 8. CARD DE TICKET COM FITAS ADESIVAS */
.detail-ticket {
  background: #f3ead4;
  border: 5px solid #FFFFFF;
  border-radius: 31px 43px 34px 46px;
  padding: 34px 30px 28px;
  position: relative;
  transform: rotate(1.5deg);
  box-shadow: 0 22px 55px rgba(78, 69, 46, 0.12);
}

.detail-ticket::before, .detail-ticket::after {
  content: "";
  background: rgba(255, 255, 255, 0.75);
  border-radius: 4px;
  width: 44px;
  height: 15px;
  position: absolute;
  top: -9px;
}

.detail-ticket::before {
  left: 36px;
  transform: rotate(-5deg);
}

.detail-ticket::after {
  right: 38px;
  transform: rotate(5deg);
}

.ticket-label {
  color: #a47a20;
  letter-spacing: 0.15em;
  font-size: 10px;
  font-weight: 900;
}

.detail-ticket h3 {
  font: 600 28px var(--font-display);
  margin: 6px 0 20px;
}

.ticket-row {
  border-top: 2px dashed var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
}

.ticket-row > span {
  background: var(--paper);
  width: 38px;
  height: 38px;
  color: var(--mint-deep);
  border-radius: 14px 18px 14px 19px;
  place-items: center;
  font-size: 18px;
  font-weight: 900;
  display: grid;
  flex: none;
}

/* 9. SEÇÃO DE CONVERSÃO FINAL & APP DOWNLOAD */
.final-cta {
  background: var(--sun);
  border: 5px solid rgba(255, 255, 255, 0.85);
  border-radius: 32px 44px 35px 47px;
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 24px;
  margin: 90px auto;
  padding: 34px 36px;
  box-shadow: 0 16px rgba(233, 222, 198, 0.8);
}

.final-cta img {
  border-radius: 22px 28px 23px 30px;
  box-shadow: 0 6px 14px rgba(105, 78, 15, 0.15);
  width: 76px;
  height: 76px;
}

.final-cta h2 {
  font: 700 clamp(26px, 3.5vw, 38px)/1.05 var(--font-display);
  margin: 0;
}

.final-cta p {
  color: #6d624b;
  margin: 6px 0 0;
  font-size: 14px;
}

/* 10. RODAPÉ (FOOTER) */
footer, .site-footer {
  border-top: 2px dashed var(--line);
  padding: 36px 0;
  background-color: var(--paper);
}

footer .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

footer p {
  color: #8b8273;
  margin: 0;
  font-size: 13px;
  font-weight: 800;
}

footer .footer-links {
  justify-self: end;
  display: flex;
  gap: 16px;
}

footer .footer-links a {
  color: var(--mint-dark);
  font-size: 13px;
  font-weight: 800;
}

footer .footer-links a:hover {
  text-decoration: underline;
}

/* 11. ESPAÇO PUBLICITÁRIO ADSENSE LIMPO */
.adsense-card {
  background: var(--paper);
  border: 2px dashed var(--border-color-strong);
  border-radius: 20px 26px 21px 28px;
  padding: 20px;
  text-align: center;
  margin: 32px 0;
}

.adsense-card-label {
  color: var(--text-light);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

/* 12. RESPONSIVIDADE */
@media (max-width: 980px) {
  .desktop-nav {
    display: none;
  }
  .mobile-menu-btn {
    display: flex;
  }
  .site-header .container {
    grid-template-columns: 1fr auto;
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-top: 48px;
  }
  .journey-path {
    grid-template-columns: repeat(2, 1fr);
  }
  .journey-card:nth-child(2n) {
    margin-top: 20px;
  }
  .path-arrow {
    display: none;
  }
  .stickers-grid-layout, .history-layout {
    grid-template-columns: 1fr;
  }
  .final-cta {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .final-cta img {
    margin: 0 auto;
  }
  .final-cta .primary-button {
    margin: 0 auto;
  }
  footer .container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 16px;
  }
  footer .footer-links {
    justify-self: center;
  }
}

@media (max-width: 600px) {
  .hero {
    border-radius: 0 0 34px 34px;
    min-height: auto;
    padding: 38px 16px 54px;
  }
  .hero h1 {
    font-size: clamp(36px, 11vw, 46px);
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .journey-path {
    grid-template-columns: 1fr;
  }
  .journey-path::before {
    display: none;
  }
  .journey-card, .journey-card:nth-child(2n), .journey-card:nth-child(odd) {
    margin-top: 0;
    transform: none;
  }
  .articles-grid {
    grid-template-columns: 1fr;
  }
  .sticker-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .timeline-card {
    grid-template-columns: 1fr;
  }
  .timeline-card > img {
    border-radius: 20px 20px 0 0;
    height: 160px;
  }
  .timeline-marker {
    left: -28px;
  }
}