/* ═══════════════════════════════════════════════════════════
   index.css — Estilos exclusivos de la página de inicio
   Pilares · About · Divisor · CTA
═══════════════════════════════════════════════════════════ */

/* ── Sección Pilares ────────────────────────────────────── */
.pilares-wrap { background: var(--color-surface); }

.pilares {
  max-width: var(--max-w);
  margin:    0 auto;
  padding:   64px 24px 60px;
  display:   grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 48px;
}

.pilar {
  display:        flex;
  flex-direction: column;
  align-items:    center;
}

.pilar__badge {
  display:        inline-block;
  background:     var(--color-accent);
  color:          #000;
  font-size:      1.1rem;
  font-weight:    700;
  letter-spacing: .04em;
  padding:        5px 16px;
  border-radius:  4px;
  margin-bottom:  16px;
  transform:      skewY(-3deg);
}

.pilar__badge span {
  display:   inline-block;
  transform: skewY(3deg);
}

.pilar__titulo {
  font-size:     1.05rem;
  font-weight:   700;
  color:         var(--color-text);
  line-height:   1.35;
  margin-bottom: 8px;
  text-align:    center;
}

.pilar__desc {
  font-size:   .88rem;
  color:       var(--color-muted);
  line-height: 1.55;
  text-align:  center;
}

/* ── Sección About ──────────────────────────────────────── */
.about-wrap { background: #e8e7de; }

.about {
  max-width:   var(--max-w);
  margin:      0 auto;
  padding:     64px 24px 56px;
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         48px;
  align-items: start;
}

.about__heading {
  font-size:      clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight:    300;
  color:          var(--color-primary);
  line-height:    1.2;
  letter-spacing: -.01em;
  text-align: center;
}

.about__text {
  font-size:   .92rem;
  color:       var(--color-muted);
  line-height: 1.7;
}

/* ── Divisor en V ───────────────────────────────────────── */
.divider-v {
  padding-top: 20px;
}

.divider-v svg { display: block; width: 100%; overflow: visible; }

.divider-v polyline { stroke: var(--color-primary); }

/* ── CTA Cartilla ───────────────────────────────────────── */
.cta-section {
  padding:        64px 24px 72px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            16px;
}

.cta-btn {
  display:        inline-block;
  background:     var(--color-secondary);
  color:          #fff;
  font-family:    var(--font);
  font-size:      1.4rem;
  font-weight:    700;
  letter-spacing: .01em;
  padding:        20px 52px;
  border-radius:  8px;
  transition:     background .2s;
  text-align:     center;
}

.cta-btn:hover { background: #023d30; text-decoration: none; color: #fff; }

.cta-hint {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   .88rem;
  color:       var(--color-muted);
}

.cta-hint__icon {
  width:           22px;
  height:          22px;
  border:          1.5px solid var(--color-muted);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       .75rem;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 720px) {
  .pilares        { grid-template-columns: 1fr; gap: 36px; padding: 48px 24px; }
  .about          { grid-template-columns: 1fr; gap: 28px; padding: 48px 24px 40px; }
  .about__heading { text-align: left; }
  .cta-section    { padding: 40px 24px 48px; }
  .cta-btn        { font-size: 1.1rem; padding: 16px 32px; width: 100%; text-align: center; }
}