/*
 * sections.css — Estilos de todas as seções de conteúdo:
 *   #hero · #sobre · #como · #ben · #cta
 */

/* ═══════════════════════════════════════════════════════
   #HERO — Fundo carvão, tipografia dominante,
   elementos circulares que remetem ao símbolo do logo
═══════════════════════════════════════════════════════ */
#hero {
  min-height: 100vh;
  background: var(--dark-section);
  display:    flex;
  align-items:center;
  padding:    140px 0 100px;
  position:   relative;
  overflow:   hidden;
}

/* Grade sutil de fundo */
.hero-grid-bg {
  position:         absolute;
  inset:            0;
  pointer-events:   none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .02)  1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
  background-size: 52px 52px;
}

/*
 * Orbs decorativos — referência direta aos dois arcos
 * do logo (âmbar superior + verde inferior)
 */
.hero-orb {
  position:       absolute;
  border-radius:  50%;
  pointer-events: none;
}
.hero-orb-amber {
  width:      640px;
  height:     640px;
  top:       -180px;
  right:     -180px;
  background: radial-gradient(circle, rgba(245, 185, 66, .13) 0%, transparent 65%);
  animation:  drift 10s ease-in-out infinite;
}
.hero-orb-green {
  width:      480px;
  height:     480px;
  bottom:    -120px;
  left:      -100px;
  background: radial-gradient(circle, rgba(168, 207, 90, .10) 0%, transparent 60%);
  animation:  drift-rev 13s ease-in-out infinite;
}

/*
 * Símbolo SVG decorativo — reproduz visualmente
 * os dois arcos do logotipo no canto direito do hero
 */
.hero-symbol {
  position:       absolute;
  right:          6%;
  top:            50%;
  transform:      translateY(-50%);
  width:          min(420px, 40vw);
  opacity:        .10;
  pointer-events: none;
  animation:      rotate-slow 60s linear infinite;
}

/* Conteúdo de texto — lado esquerdo */
.hero-content {
  position:  relative;
  z-index:   2;
  max-width: 640px;
}

.hero-h1 {
  font-family:    var(--f-display);
  font-size:      clamp(38px, 5.5vw, 66px);
  font-weight:    800;
  line-height:    1.09;
  color:          #fff;
  margin-bottom:  22px;
  letter-spacing: -.025em;
}
.hero-h1 .word-amber { color: var(--amber); }
.hero-h1 .word-green { color: var(--green); }

.hero-desc {
  font-size:     18px;
  font-weight:   300;
  color:         rgba(255, 255, 255, .58);
  line-height:   1.82;
  margin-bottom: 38px;
  max-width:     500px;
}

.hero-buttons {
  display:   flex;
  gap:       14px;
  flex-wrap: wrap;
}

/* Tagline de rodapé do hero */
.hero-tagline {
  display:        flex;
  align-items:    center;
  gap:            10px;
  margin-top:     48px;
  font-family:    var(--f-display);
  font-size:      12px;
  font-weight:    500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, .28);
}
.hero-tagline::before,
.hero-tagline::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: rgba(255, 255, 255, .1);
  max-width:  60px;
}

/* ═══════════════════════════════════════════════════════
   #SOBRE — Fundo cinza característico do site original
═══════════════════════════════════════════════════════ */
#sobre {
  padding:  112px 0;
  background: var(--bg-main);
  position: relative;
  overflow: hidden;
}

/* Texto watermark decorativo */
#sobre::after {
  content:             'CONEXA';
  position:            absolute;
  right:              -40px;
  top:                 50%;
  transform:           translateY(-50%);
  font-family:         var(--f-display);
  font-size:           200px;
  font-weight:         800;
  color:               transparent;
  -webkit-text-stroke: 1.5px rgba(44, 44, 44, .04);
  pointer-events:      none;
  user-select:         none;
  line-height:         1;
}

.sobre-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   72px;
  align-items:           center;
}

/* Card institucional escuro — lado esquerdo */
.sobre-card {
  background:    var(--charcoal);
  border-radius: var(--r-lg);
  padding:       48px;
  position:      relative;
  overflow:      hidden;
}

/* Degradê cônico no canto — referência aos dois arcos */
.sobre-card::before {
  content:       '';
  position:      absolute;
  top:           0;
  right:         0;
  width:         200px;
  height:        200px;
  background:    conic-gradient(
    from 200deg,
    rgba(245, 185, 66, .18),
    rgba(168, 207, 90, .12),
    transparent 60%
  );
  border-radius: 0 var(--r-lg) 0 100%;
  pointer-events:none;
}

.sobre-eyebrow {
  font-family:    var(--f-display);
  font-size:      11px;
  font-weight:    300;
  color:          rgba(255, 255, 255, .38);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom:  18px;
}

.sobre-card h3 {
  font-family:   var(--f-display);
  font-size:     24px;
  font-weight:   700;
  color:         #fff;
  line-height:   1.3;
  margin-bottom: 16px;
}
.sobre-card h3 .ca { color: var(--amber); }
.sobre-card h3 .cg { color: var(--green); }

.sobre-card p {
  font-size:   15px;
  color:       rgba(255, 255, 255, .5);
  line-height: 1.82;
}

/* Badge flutuante "anos de experiência" */
.sobre-badge {
  position:      absolute;
  bottom:       -22px;
  right:         32px;
  border-radius: var(--r-md);
  padding:       18px 22px;
  box-shadow:    var(--sh-lg);
  /* Gradiente dos dois arcos do logo */
  background:    linear-gradient(135deg, var(--amber), var(--green));
}
.badge-number {
  font-family: var(--f-display);
  font-size:   36px;
  font-weight: 800;
  color:       var(--charcoal);
  line-height: 1;
}
.badge-label {
  font-size:   11px;
  font-weight: 600;
  color:       rgba(44, 44, 44, .65);
  margin-top:  4px;
  line-height: 1.3;
}

/* Texto institucional — lado direito */
.sobre-text { padding-bottom: 28px; }
.sobre-text p {
  font-size:     16px;
  font-weight:   300;
  color:         var(--text-soft);
  line-height:   1.88;
  margin-bottom: 18px;
}
.sobre-text p strong {
  color:       var(--charcoal);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════
   #COMO — Fundo branco, etapas com ícones numerados
═══════════════════════════════════════════════════════ */
#como {
  padding:    112px 0;
  background: var(--bg-white);
}

.como-header {
  text-align:    center;
  margin-bottom: 68px;
}
.como-header .section-lead {
  margin: 0 auto;
  text-align: center;
}

/* Grid de 4 etapas */
.steps-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   0;
  position:              relative;
}

/* Linha conectora entre os ícones */
.steps-grid::before {
  content:    '';
  position:   absolute;
  top:        44px;
  left:       calc(12.5% + 18px);
  right:      calc(12.5% + 18px);
  height:     1.5px;
  background: linear-gradient(
    to right,
    var(--amber),
    var(--green-light),
    rgba(168, 207, 90, .1)
  );
  z-index: 0;
}

.step-item {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  padding:         0 16px;
  position:        relative;
  z-index:         1;
}

/* Círculo numerado */
.step-circle {
  width:         88px;
  height:        88px;
  position:      relative;
  margin-bottom: 26px;
}

.step-ring {
  position:      absolute;
  inset:         0;
  border:        2px solid var(--gray-200);
  border-radius: 50%;
  transition:    border-color var(--t);
}
.step-item:hover .step-ring { border-color: var(--amber); }

.step-core {
  position:        absolute;
  inset:           8px;
  border-radius:   50%;
  background:      var(--charcoal);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  gap:             1px;
  transition:      background var(--t);
}
.step-item:hover .step-core { background: var(--amber); }
.step-item:hover .step-core svg   { color: var(--charcoal) !important; }
.step-item:hover .step-core .step-num { color: rgba(44, 44, 44, .55) !important; }

.step-num {
  font-family:    var(--f-display);
  font-size:      10px;
  font-weight:    600;
  color:          rgba(255, 255, 255, .35);
  letter-spacing: .06em;
  transition:     color var(--t);
}

.step-item h3 {
  font-family:   var(--f-display);
  font-size:     15px;
  font-weight:   700;
  color:         var(--charcoal);
  margin-bottom: 9px;
  line-height:   1.3;
}
.step-item p {
  font-size:   14px;
  color:       var(--gray-600);
  line-height: 1.68;
}

/* ═══════════════════════════════════════════════════════
   #BEN — Fundo carvão escuro, cards de benefícios
═══════════════════════════════════════════════════════ */
#ben {
  padding:  112px 0;
  background: var(--dark-section);
  position: relative;
  overflow: hidden;
}

/* Grade de fundo sutil */
#ben::before {
  content:          '';
  position:         absolute;
  inset:            0;
  pointer-events:   none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: 48px 48px;
}

.ben-header {
  text-align:    center;
  margin-bottom: 64px;
  position:      relative;
  z-index:       1;
}
.ben-header .section-lead {
  margin:     0 auto;
  text-align: center;
}

/* Grid de 3 colunas */
.ben-cards {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   20px;
  position:              relative;
  z-index:               1;
}

/* Card base */
.ben-card {
  background:    rgba(255, 255, 255, .04);
  border:        1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r-lg);
  padding:       36px 30px;
  position:      relative;
  overflow:      hidden;
  transition:
    background   var(--t),
    border-color var(--t),
    transform    var(--t);
}

/* Barra superior colorida no hover */
.ben-card::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     2.5px;
  opacity:    0;
  transition: opacity var(--t);
}
.ben-card.amber-top::before { background: linear-gradient(90deg, var(--amber), transparent); }
.ben-card.green-top::before { background: linear-gradient(90deg, var(--green), transparent); }
.ben-card.dual-top::before  { background: linear-gradient(90deg, var(--amber), var(--green)); }

.ben-card:hover {
  background:   rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .14);
  transform:    translateY(-5px);
}
.ben-card:hover::before { opacity: 1; }

/* Ícone do card */
.ben-icon {
  width:           52px;
  height:          52px;
  border-radius:   var(--r-md);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-bottom:   20px;
  transition:      background var(--t), border-color var(--t);
}
.ben-icon.amber {
  background: rgba(245, 185, 66, .1);
  border:     1px solid rgba(245, 185, 66, .2);
  color:      var(--amber);
}
.ben-icon.green {
  background: rgba(168, 207, 90, .1);
  border:     1px solid rgba(168, 207, 90, .2);
  color:      var(--green);
}
.ben-card:hover .ben-icon.amber {
  background:   rgba(245, 185, 66, .18);
  border-color: var(--amber);
}
.ben-card:hover .ben-icon.green {
  background:   rgba(168, 207, 90, .18);
  border-color: var(--green);
}

.ben-card h3 {
  font-family:   var(--f-display);
  font-size:     17px;
  font-weight:   700;
  color:         #fff;
  margin-bottom: 10px;
  line-height:   1.3;
}
.ben-card p {
  font-size:   14px;
  color:       rgba(255, 255, 255, .4);
  line-height: 1.74;
}

/* Card de destaque — gradiente do logo */
.ben-card.featured {
  background:   linear-gradient(145deg, var(--amber), var(--green));
  border-color: transparent;
}
.ben-card.featured h3 { color: var(--charcoal); }
.ben-card.featured p  { color: rgba(44, 44, 44, .65); }
.ben-card.featured .ben-icon {
  background:   rgba(44, 44, 44, .12);
  border-color: rgba(44, 44, 44, .18);
  color:        var(--charcoal);
}
.ben-card.featured::before  { display: none; }
.ben-card.featured:hover    { transform: translateY(-5px); border-color: transparent; }

/* ═══════════════════════════════════════════════════════
   #CTA FINAL — Fundo carvão com manchas de cor do logo
═══════════════════════════════════════════════════════ */
#cta {
  padding:    100px 0;
  text-align: center;
  background: linear-gradient(130deg, var(--charcoal) 0%, #2E2E2E 40%, #1E1E1E 100%);
  position:   relative;
  overflow:   hidden;
}

/* Mancha âmbar */
#cta::before {
  content:        '';
  position:       absolute;
  top:           -80px;
  left:           50%;
  transform:      translateX(-60%);
  width:          700px;
  height:         700px;
  background:     radial-gradient(circle, rgba(245, 185, 66, .08) 0%, transparent 60%);
  pointer-events: none;
}

/* Mancha verde */
#cta::after {
  content:        '';
  position:       absolute;
  bottom:        -100px;
  right:          0;
  width:          500px;
  height:         500px;
  background:     radial-gradient(circle, rgba(168, 207, 90, .07) 0%, transparent 60%);
  pointer-events: none;
}

.cta-inner {
  position:  relative;
  z-index:   1;
  max-width: 600px;
  margin:    0 auto;
}

.cta-title {
  font-family:    var(--f-display);
  font-size:      clamp(26px, 3.8vw, 46px);
  font-weight:    800;
  color:          #fff;
  line-height:    1.15;
  margin-bottom:  18px;
  letter-spacing: -.022em;
}
.cta-title .ca { color: var(--amber); }
.cta-title .cg { color: var(--green); }

.cta-desc {
  font-size:     17px;
  color:         rgba(255, 255, 255, .5);
  line-height:   1.75;
  margin-bottom: 38px;
}

.cta-buttons {
  display:         flex;
  gap:             14px;
  justify-content: center;
  flex-wrap:       wrap;
}

/* ═══════════════════════════════════════════════════════
   #EVENTOS — Fundo branco, seção dedicada ao serviço
   de captação de convidados para eventos corporativos
   e de networking
═══════════════════════════════════════════════════════ */
#eventos {
  padding:    112px 0;
  background: var(--bg-white);
  position:   relative;
  overflow:   hidden;
}

/* Marca d'água decorativa discreta */
#eventos::before {
  content:             'EVENTOS';
  position:            absolute;
  left:               -30px;
  top:                 50%;
  transform:           translateY(-50%);
  font-family:         var(--f-display);
  font-size:           180px;
  font-weight:         800;
  color:               transparent;
  -webkit-text-stroke: 1.5px rgba(44, 44, 44, .04);
  pointer-events:      none;
  user-select:         none;
  line-height:         1;
}

/* Layout principal: texto à esquerda, cards à direita */
.eventos-grid {
  display:               grid;
  grid-template-columns: 1fr 1.4fr;
  gap:                   72px;
  align-items:           start;
}

/* ── Coluna de texto ── */
.eventos-intro p {
  font-size:     16px;
  font-weight:   300;
  color:         var(--text-soft);
  line-height:   1.85;
  margin-bottom: 18px;
}
.eventos-intro p strong {
  color:       var(--charcoal);
  font-weight: 700;
}

/* Destaques de formato: pills horizontais */
.eventos-tags {
  display:   flex;
  gap:       10px;
  flex-wrap: wrap;
  margin-top:28px;
}
.eventos-tag {
  display:       inline-flex;
  align-items:   center;
  gap:           7px;
  padding:       9px 16px;
  border-radius: var(--r-xl);
  font-family:   var(--f-display);
  font-size:     13px;
  font-weight:   600;
  letter-spacing:.02em;
  transition:    transform var(--t), box-shadow var(--t);
}
.eventos-tag:hover {
  transform:  translateY(-2px);
  box-shadow: var(--sh-sm);
}
.eventos-tag.amber {
  background: var(--amber-pale);
  color:      var(--amber-dark);
  border:     1px solid rgba(245, 185, 66, .3);
}
.eventos-tag.green {
  background: var(--green-pale);
  color:      var(--green-dark);
  border:     1px solid rgba(168, 207, 90, .3);
}
.eventos-tag.dark {
  background: rgba(44, 44, 44, .06);
  color:      var(--charcoal);
  border:     1px solid rgba(44, 44, 44, .1);
}

/* CTA inline na coluna de texto */
.eventos-cta-inline {
  display:     flex;
  gap:         12px;
  flex-wrap:   wrap;
  margin-top:  36px;
}

/* ── Coluna de cards de serviço ── */
.eventos-cards {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   16px;
}

.ev-card {
  background:    var(--bg-main);
  border:        1px solid var(--gray-200);
  border-radius: var(--r-lg);
  padding:       28px 24px;
  position:      relative;
  overflow:      hidden;
  transition:
    border-color var(--t),
    transform    var(--t),
    box-shadow   var(--t),
    background   var(--t);
}
.ev-card:hover {
  border-color: var(--amber);
  transform:    translateY(-4px);
  box-shadow:   var(--sh-md);
  background:   var(--bg-white);
}

/* Linha de acento superior */
.ev-card::before {
  content:       '';
  position:      absolute;
  top:           0; left: 0; right: 0;
  height:        3px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  opacity:       0;
  transition:    opacity var(--t);
}
.ev-card.ev-amber::before { background: var(--amber); }
.ev-card.ev-green::before { background: var(--green); }
.ev-card:hover::before    { opacity: 1; }

/* Card de destaque — ocupa as 2 colunas */
.ev-card.ev-full {
  grid-column:   span 2;
  background:    var(--charcoal);
  border-color:  transparent;
  display:       flex;
  align-items:   center;
  gap:           28px;
}
.ev-card.ev-full:hover {
  background:   var(--charcoal-mid);
  border-color: var(--amber);
  transform:    translateY(-4px);
}
.ev-card.ev-full::before {
  background: linear-gradient(90deg, var(--amber), var(--green));
}
.ev-card.ev-full:hover::before { opacity: 1; }

.ev-full-icon {
  width:           64px;
  height:          64px;
  flex-shrink:     0;
  background:      linear-gradient(135deg, var(--amber), var(--green));
  border-radius:   var(--r-md);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--charcoal);
}

.ev-full-text h3 {
  font-family:   var(--f-display);
  font-size:     18px;
  font-weight:   700;
  color:         #fff;
  margin-bottom: 8px;
  line-height:   1.3;
}
.ev-full-text p {
  font-size:   14px;
  color:       rgba(255, 255, 255, .5);
  line-height: 1.72;
}

/* Ícone dos cards normais */
.ev-icon {
  width:           44px;
  height:          44px;
  border-radius:   10px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-bottom:   16px;
  transition:      background var(--t), border-color var(--t);
}
.ev-icon.amber {
  background: var(--amber-pale);
  border:     1px solid rgba(245, 185, 66, .25);
  color:      var(--amber-dark);
}
.ev-icon.green {
  background: var(--green-pale);
  border:     1px solid rgba(168, 207, 90, .25);
  color:      var(--green-dark);
}
.ev-card:hover .ev-icon.amber { background: rgba(245, 185, 66, .2); }
.ev-card:hover .ev-icon.green { background: rgba(168, 207, 90, .2); }

.ev-card h3 {
  font-family:   var(--f-display);
  font-size:     15px;
  font-weight:   700;
  color:         var(--charcoal);
  margin-bottom: 8px;
  line-height:   1.3;
}
.ev-card p {
  font-size:   13px;
  color:       var(--gray-600);
  line-height: 1.68;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVO — SEÇÕES
═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .sobre-grid    { grid-template-columns: 1fr; }
  .sobre-badge   { bottom: 16px; }
  .ben-cards     { grid-template-columns: repeat(2, 1fr); }
  .steps-grid    { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .steps-grid::before { display: none; }
  .hero-symbol   { opacity: .06; width: 30vw; }
  .eventos-grid  { grid-template-columns: 1fr; }
  /* Em tablet os cards de eventos ficam em 2 colunas,
     mas o ev-full sempre ocupa linha inteira */
  .eventos-cards { grid-template-columns: repeat(2, 1fr); }
  .ev-card.ev-full { grid-column: span 2; }
}

@media (max-width: 768px) {
  .ben-cards     { grid-template-columns: 1fr; }
  .steps-grid    { grid-template-columns: 1fr; }
  .hero-symbol   { display: none; }
  /* Mobile: todos os cards em coluna única,
     ev-full perde o span e vira card normal */
  .eventos-cards           { grid-template-columns: 1fr; }
  .ev-card.ev-full         { grid-column: span 1; flex-direction: column; align-items: flex-start; }
  .ev-card.ev-full .ev-full-icon { width: 52px; height: 52px; }
}

@media (max-width: 480px) {
  .hero-buttons,
  .cta-buttons,
  .eventos-cta-inline { flex-direction: column; }
}