/* =========================================================
   CONTAINERS
   ========================================================= */
.container,
.container-social {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(var(--space-sm), 3vw, var(--space-md));
}

/* =========================================================
   SECTIONS
   ========================================================= */
.section,
.section-ajudar,
.section-fiscal,
.secao-premios {
  padding: clamp(var(--space-lg), 5vw, var(--space-xl)) 0;
}

.section--escura {
  background-color: var(--color-primary-50) !important;
}


.section {
  background-color: var(--surface-base);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md2);
  margin: var(--space-xs) auto;
  border: var(--border-width) solid var(--color-border-light);
  max-width: var(--max-width);
  transition: var(--transition-base);
}

.section:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.section--alt {
  background-color: var(--color-primary-700) !important;
  border-radius: var(--radius-lg);
}

.amigo-comprometido {
  color: var(--color-primary-300) !important;
}

.section-subtitle {
  color: var(--color-primary-100) !important;

}

/* =========================================================
   SECTION HEADERS
   ========================================================= */
.section-header,
.section-ajudar-header {
  text-align: center;
  margin-bottom: clamp(var(--space-md), 4vw, var(--space-xl));
}

.section-title,
.section-ajudar-title,
.section-fiscal-title {
  font-family: var(--font-display);
  font-size: var(--h2);
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
  font-weight: var(--peso-bold);
  text-align: center;
  line-height: var(--line-compact);
  letter-spacing: var(--letter-tight);
}

.section-subtitle,
.section-ajudar-subtitle,
.section-ajudar-header__subtitle {
  font-family: var(--font-body);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  font-weight: var(--peso-light);
  max-width: var(--largura-texto);
  margin: 0 auto;
  line-height: var(--line-relaxed);
}

.intro {
  font-family: var(--font-body);
  text-align: center;
  font-size: var(--text-lg);
  max-width: 900px;
  margin: 0 auto var(--space-lg);
  color: var(--color-text-secondary);
  line-height: var(--line-base);
}

/* =========================================================
   CARDS
   ========================================================= */
.card,
.card-ajudar,
.card-premios,
.card-fiscal,
.benefit-card-fiscal {
  background-color: var(--color-primary-100);
  border: var(--border-width) solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-md), 3vw, var(--space-lg));
  box-shadow: var(--shadow-md);
  transition: var(--transition-base);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card:hover,
.card-ajudar:hover,
.card-premios:hover,
.card-fiscal:hover,
.benefit-card-fiscal:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary-300);
}

.card:focus-within {
  outline: var(--border-focus-width) solid var(--color-primary-700);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus);
}

a.card {
  display: block;
  text-decoration: none;
  color: inherit;
}


.card-azul-escuro {
  background-color: var(--color-primary-900);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-md), 3vw, var(--space-lg));
  box-shadow: var(--shadow-md);
  transition: var(--transition-base);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-fiscal {
  background: var(--color-primary-100);
  border-color: var(--color-border);
}

.card-fiscal:hover {
  border-color: var(--color-primary-700);
}

.benefit-card-fiscal {
  background: var(--surface-elevated);
}


.secao-premios--escura .card-premios,
.secao-premios--media .card-premios {
  background-color: var(--bg-card-glass);
  backdrop-filter: blur(10px);
  border: var(--border-width) solid rgba(255, 255, 255, 0.3);
}



.card h1,
.card h2,
.card h3,
.card h4 {
  text-align: center;
  margin-bottom: calc(var(--spacing-sm) * 0.75);
}

/* =========================================================
   CARD ICONS
   ========================================================= */
.card-icon,
.card__icone,
.card-ajudar__icon,
.card-premios__icone,
.card-fiscal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
  flex-shrink: 0;
}


.card__icone,
.card-ajudar__icon {
  font-size: clamp(2.5rem, 5vw, 3rem);
  color: var(--color-primary-700);
  text-align: center;
}


.card-premios__icone {
  width: clamp(2.5rem, 5vw, 3rem);
  height: clamp(2.5rem, 5vw, 3rem);
  background: var(--gradient-icon);
  border-radius: 50%;
  color: var(--surface-base);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: var(--peso-bold);
}


.card-fiscal-icon {
  width: clamp(60px, 10vw, 70px);
  height: clamp(60px, 10vw, 70px);
  background: var(--gradient-icon-dark);
  border-radius: 50%;
  color: var(--surface-base);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: var(--peso-bold);
  margin: 0 auto var(--space-md);
}

.card-premios__top-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}

/* =========================================================
   CARD CONTENT
   ========================================================= */
.card-title-escuro,
.card-title-claro {
  font-family: var(--font-display);
  font-size: var(--h4);
  margin-bottom: var(--space-sm);
  font-weight: var(--peso-bold);
  line-height: var(--line-compact);
  text-align: center;
  letter-spacing: var(--letter-tight);
}

.card-title-escuro {
  color: var(--color-primary-300);
}

.card-title-claro {
  color: var(--color-primary-100);
}

.card-premios p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--line-relaxed);
  font-weight: var(--peso-light);
}


.card-premios p:not(:last-child) {
  margin-bottom: 0.5rem;
}

.card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);

}

.card__footer {
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: var(--border-width) solid var(--color-border-light);
  text-align: "center" !important;
}

.card-fiscal h4 {
  font-family: var(--font-display);
  margin-bottom: var(--space-sm);
  font-size: var(--h4);
  color: var(--color-text-primary);
  font-weight: var(--peso-bold);
}

/* =========================================================
   GRID
   ========================================================= */
.grid {
  display: grid;
  gap: clamp(var(--space-md), 3vw, var(--space-lg));
}

.grid--2cols {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.grid--3cols {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}


.card-grid--2col {
  grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
}


.card-ajudar-grid,
.cards-fiscal-grid {
  margin-top: var(--space-lg);
}

.cards-fiscal-grid {
  margin-top: var(--space-xl);
}

/* =========================================================
   Outros
   ========================================================= */
.secao-premios {
  border-radius: var(--radius-lg);
}

.secao-premios--escura {
  background: var(--gradient-primary-azul);
  color: var(--color-primary-100);
}

.secao-premios--media {
  background-color: var(--color-primary-500);
  color: var(--surface-base);
}

.secao-premios--escura h1,
.secao-premios--escura h2,
.secao-premios--escura h3,
.secao-premios--escura h4,
.secao-premios--media h1,
.secao-premios--media h2,
.secao-premios--media h3,
.secao-premios--media h4 {
  font-family: var(--font-display);
  letter-spacing: var(--letter-tight);
}


.container-premios-texto {
  font-family: var(--font-display);
  max-width: var(--largura-texto);
  margin: 0 auto var(--space-lg);
  text-align: center;
  font-size: var(--h2);
  line-height: var(--line-compact);
  color: var(--color-text-primary);
}

.container-premios-texto-claro {
  color: var(--color-primary-100);
  text-align: center;
  margin-bottom: 0px;
}


.citacao-premios {
  font-family: var(--font-body);
  font-size: var(--h4);
  font-style: italic;
  font-weight: var(--peso-light);
  border-left: var(--border-quote) solid var(--color-primary-300);
  padding-left: clamp(var(--space-sm), 2vw, var(--space-md));
  margin: var(--space-lg) auto;
  max-width: var(--largura-texto);
  color: var(--color-primary-100);
  line-height: var(--line-relaxed);
}

/* =========================================================
   BENEFITS LIST
   ========================================================= */
.benefit-card-fiscal h3 {
  font-family: var(--font-display);
  margin-bottom: var(--space-md);
  color: var(--color-primary-700);
  font-size: var(--h3);
  font-weight: var(--peso-bold);
  letter-spacing: var(--letter-tight);
}

.benefit-card-fiscal ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.benefit-card-fiscal li {
  font-family: var(--font-body);
  padding: var(--space-xs) 0;
  padding-left: var(--space-lg);
  position: relative;
  font-size: var(--text-sm);
  line-height: var(--line-base);
  color: var(--color-text-secondary);
}

.benefit-card-fiscal li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-primary-700);
  font-weight: var(--peso-bold);
  font-size: 1.125rem;
}

/* =========================================================
   SOCIAL LINKS
   ========================================================= */
.container-social {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(var(--space-sm), 2vw, var(--space-md));
  justify-content: center;
  align-items: center;
}

.container-social a {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  font-weight: var(--peso-bold);
  transition: var(--transition-base);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  border: var(--border-width) solid transparent;
}

.container-social a:hover {
  color: var(--color-primary-700);
  background-color: var(--bg-hover-light);
  border-color: var(--color-primary-300);
  text-decoration: none;
  transform: translateY(-2px);
}

/* =========================================================
   UTILITIES
   ========================================================= */
/* Seção sem padding */
.section--no-padding-top {
  padding-top: 0;
}

.section--no-padding-bottom {
  padding-bottom: 0;
}

/* Card sem hover */
.card--static:hover {
  transform: none;
  box-shadow: var(--shadow-md);
}

/* Alinhamento de texto */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}


.mb-lg {
  margin-bottom: var(--space-lg);
}

.mb-xl {
  margin-bottom: var(--space-xl);
}


.p-lg {
  padding: var(--space-lg);
}

.p-xl {
  padding: var(--space-xl);
}

/* =========================================================
   ESTADOS E ACESSIBILIDADE
   ========================================================= */

.card--disabled {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}


.card--loading {
  position: relative;
  overflow: hidden;
}

.card--loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: loading 1.5s infinite;
}

@keyframes loading {
  to {
    left: 100%;
  }
}


*:focus-visible {
  outline: var(--border-focus-width) solid var(--color-primary-700);
  outline-offset: 2px;
}



/* =========================================================
   AMIGO COMPROMETIDO
   ========================================================= */

.flex-ajudar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}

/* Lado Esquerdo */
.amigo-lado-esquerdo {
  width: 100%;
}

/* Lado Direito */
.amigo-lado-direito {
  width: 100%;
}

/* Card */
.section-ajudar .card-ajudar {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  background: var(--color-primary-100);
  box-sizing: border-box;
}

.section-ajudar .card-ajudar__icon {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 1rem;
  color: var(--color-primary-700);
}

.section-ajudar .card-title-claro {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--color-primary-900);
}

.section-ajudar .card-text {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: var(--color-text-secondary);
}

.section-ajudar .list-check {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  text-align: center !important;
}

.section-ajudar .list-check li {
  padding: 0.5rem 0 0.5rem 1.75rem;
  position: relative;
  color: var(--color-text-secondary);
}

.section-ajudar .list-check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-primary-700);
  font-weight: bold;
  font-size: 1.2rem;
}

.section-ajudar .btn--ajudar {
  display: block;
  width: 100%;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 8px;
  background: var(--color-primary-700);
  color: white;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.section-ajudar .btn--ajudar:hover {
  background: var(--color-primary-800);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}


.amigo-lado-direito img {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  height: auto;
  border-radius: 12px;
  display: block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* DESKTOP: 50/50 lado a lado */
@media (min-width: 992px) {
  .flex-ajudar {
    flex-direction: row;
    gap: 3rem;
    align-items: stretch;
  }

  .amigo-lado-esquerdo,
  .amigo-lado-direito {
    width: 50%;
    flex: 0 0 50%;
  }

  .section-ajudar .card-ajudar {
    max-width: none;
    margin: 0;
  }

  .amigo-lado-direito img {
    max-width: none;
    width: 100%;
    height: 100%;
    max-height: 500px;
    object-fit: cover;
  }
}