/* =================================================================
   TUTORIALES · carrusel de vídeos nativos
================================================================= */
.tutoriales { background: var(--off-white); width: 100%; max-width: 100vw; overflow-x: hidden; padding: 4rem 5% !important; }
.tutoriales-header { text-align: center; margin-bottom: 2.5rem; }
.tutoriales-header .section-subtitle { margin: 0 auto; }
.tutorial-carousel { position: relative; width: 100%; max-width: 800px; margin: 0 auto; padding: 0 4rem; box-sizing: border-box; }
.tutorial-viewport { width: 100%; overflow: hidden; }
.tutorial-track { display: flex; transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); }
.tutorial-slide { flex: 0 0 100%; width: 100%; padding: 0 0.5rem; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; }
.tutorial-slide video {
    width: auto; max-width: 100%; max-height: 60vh; height: auto;
    display: block; border-radius: 4px; background: #000;
    box-shadow: 0 10px 40px rgba(31,68,72,0.15); margin: 0 auto;
}
.tutorial-info-card { width: 100%; margin-top: 1.2rem; padding: 0 0.5rem; text-align: center; }
.tutorial-info-card h3 { font-family: var(--serif); font-size: 1.6rem; color: var(--teal-dark); margin-bottom: 0.5rem; }
.tutorial-info-card p { font-size: 0.92rem; color: var(--text-soft); line-height: 1.5; max-width: 600px; margin: 0 auto; }
.tutorial-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 50px; height: 50px; border-radius: 50%;
    background: var(--white); border: 2px solid var(--teal-dark);
    color: var(--teal-dark); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s; z-index: 10;
    box-shadow: 0 4px 16px rgba(31,68,72,0.15);
}
.tutorial-arrow:hover { background: var(--teal-dark); color: var(--white); transform: translateY(-50%) scale(1.05); }
.tutorial-arrow.prev { left: 0; }
.tutorial-arrow.next { right: 0; }
.tutorial-arrow svg { width: 22px; height: 22px; }
.tutorial-indicators { display: flex; justify-content: center; gap: 0.6rem; margin-top: 1.2rem; }
.tutorial-indicator { width: 10px; height: 10px; border-radius: 50%; background: rgba(31,68,72,0.25); border: none; cursor: pointer; padding: 0; transition: all 0.3s; }
.tutorial-indicator.active { background: var(--orange); transform: scale(1.3); }
.tutoriales-cta { text-align: center; margin-top: 1.8rem; }

/* Responsive — tutoriales */
@media (max-width: 1024px) {
    .tutorial-carousel { max-width: 90%; padding: 0 3rem; }
}
@media (max-width: 768px) {
    .tutorial-carousel { max-width: 100%; padding: 0 2.8rem; }
    .tutorial-arrow { width: 40px; height: 40px; top: 35%; }
    .tutorial-arrow:hover { transform: translateY(-50%) scale(1.05); }
    .tutorial-indicators { margin-top: 2rem; }
    .tutorial-slide video { max-width: 100%; }
}