/* === RECURSOS SECTION === */
 .recursos-section {
     margin: 50px auto;
     max-width: 1000px;
     padding: 0 16px;
     text-align: center;
 }

 .recursos-intro {
     font-size: .85rem;
     color: var(--muted, #888);
     margin-bottom: 20px;
 }

 .recursos {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
     gap: 16px;
 }

 .recurso-card {
     background: #0d1312;
     border: 1px solid rgba(0, 229, 255, .15);
     border-radius: 10px;
     padding: 16px 10px;
     display: flex;
     flex-direction: column;
     align-items: center;
     transition: transform .2s ease, border .2s ease, box-shadow .2s ease;
     min-height: 140px;
 }

 .recurso-card:hover {
     transform: translateY(-3px);
     border-color: var(--accent, #00ffae);
     box-shadow: 0 0 10px rgba(0, 229, 255, .2);
 }

 .recurso-icon {
     font-size: 1.6rem;
     margin-bottom: 6px;
     color: var(--accent, #00ffae);
     filter: drop-shadow(0 0 4px rgba(0, 229, 255, .4));
 }

 .recurso-card h3 {
     margin: 4px 0 8px;
     font-size: 1rem;
     color: #fff;
 }

 .recurso-card a {
     text-decoration: none;
     font-weight: bold;
     font-size: .8rem;
     padding: 6px 10px;
     border-radius: 6px;
     background: var(--accent, #00ffae);
     color: #000;
     transition: all .2s ease;
 }

 .recurso-card a:hover {
     background: #000;
     color: var(--accent, #00ffae);
     border: 1px solid var(--accent, #00ffae);
 }

 /* responsivo */
 @media (max-width: 600px) {
     .recurso-card {
         min-height: 120px;
         padding: 12px 8px;
     }

     .recurso-card h3 {
         font-size: .9rem;
     }

     .recurso-card a {
         font-size: .75rem;
         padding: 5px 8px;
     }
 }