.tutoriales-main { background: #f7fbfc; }
.tutoriales-hero { background: #0f5975; }
.tutoriales-hero picture, .tutoriales-hero img { display: block; width: 100%; }
.tutoriales-hero img { height: auto; }
.tutoriales-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tutoriales-section { padding: 54px 0 64px; }
.tutoriales-intro { margin-bottom: 34px; padding: 28px 30px; border-left: 5px solid #46c5cb; background: #eaf5f6; }
.tutoriales-intro h2 { margin: 0 0 11px; color: #155d75; font-size: 27px; }
.tutoriales-intro p { max-width: 770px; margin: 0; color: #4e717e; font-size: 16px; line-height: 1.6; }
.tutoriales-list { display: grid; gap: 18px; }
.tutoriales-item { display: grid; grid-template-columns: minmax(250px, 40%) 1fr; overflow: hidden; background: #fff; border: 1px solid #d4e4e8; box-shadow: 0 5px 15px rgba(17, 90, 112, .09); }
.tutoriales-video { position: relative; aspect-ratio: 16 / 9; background: #0c536e; }
.tutoriales-video iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.tutoriales-info { display: flex; flex-direction: column; justify-content: center; padding: 27px 30px; }
.tutoriales-info h3 { margin: 0 0 8px; color: #155d75; font-size: 22px; }
.tutoriales-info p { margin: 0; color: #63808a; font-size: 15px; line-height: 1.55; }
.tutoriales-info::before { content: 'VIDEO TUTORIAL'; margin-bottom: 8px; color: #2f98a5; font-size: 11px; font-weight: 700; letter-spacing: .09em; }
@media (max-width: 767px) {
    .tutoriales-section { padding-top: 32px; }
    .tutoriales-intro { padding: 23px 20px; }
    .tutoriales-intro h2 { font-size: 23px; }
    .tutoriales-item { grid-template-columns: 1fr; }
    .tutoriales-info { padding: 22px 20px; }
    .tutoriales-info h3 { font-size: 20px; }
}