/* ===== Vocalías (voc-) ===== */
.voc-wrap { box-sizing: border-box; max-width: 980px; margin: 0 auto; padding: 32px 16px 48px; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.voc-wrap * { box-sizing: border-box; }
.voc-intro { text-align: center; margin: 0 auto 34px; max-width: 720px; }
.voc-intro h2 { font-size: 2rem; font-weight: 600; letter-spacing: -.01em; color: #33352f; margin: 0 0 10px; }
.voc-intro p { font-size: 1.25rem; font-weight: 400; line-height: 1.6; color: #7b8168; margin: 0; }
.voc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.voc-card { display: flex; align-items: center; gap: 20px; padding: 22px 24px; background: #ffffff; border-radius: 22px; border-top: 5px solid #BEE164; box-shadow: 0 4px 18px rgba(60, 70, 40, .08); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.voc-card:hover, .voc-card:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(60, 70, 40, .16); border-top-color: var(--cofc-verde-medio); outline: none; }
.voc-icon { flex: 0 0 auto; width: 62px; height: 62px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: linear-gradient(135deg, #BEE164 0%, var(--cofc-verde-medio) 100%); box-shadow: 0 3px 8px rgba(154, 180, 89, .35); }
.voc-icon svg { width: 32px; height: 32px; fill: none; stroke: #ffffff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.voc-text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; text-align: left; }
.voc-title { font-size: 1.6rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: #33352f; }
.voc-sub { font-size: 1.1rem; font-weight: 400; color: #7b8168; line-height: 1.35; }
.voc-chevron { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; transition: transform .18s ease; }
.voc-chevron svg { width: 24px; height: 24px; fill: none; stroke: var(--cofc-verde-medio); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.voc-card:hover .voc-chevron { transform: translateX(5px); }
@media (max-width: 781px) { .voc-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .voc-card { gap: 15px; padding: 18px; border-radius: 18px; }
  .voc-icon { width: 54px; height: 54px; border-radius: 14px; }
  .voc-icon svg { width: 28px; height: 28px; }
  .voc-title { font-size: 1.02rem; }
  .voc-sub { font-size: .85rem; }
  .voc-intro h2 { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { .voc-card, .voc-chevron { transition: none; } }