/* =====================================================================
   tutoriales.css: vídeos tutoriales (tutoriales.html). Un menú de pestañas
   y debajo un vídeo grande con sus pasos al lado (debajo, en el móvil).
   ===================================================================== */

/* Ancho máximo del contenido; lo usan también la cabecera y el pie de web.css. */
.pagina-tutoriales{--ancho-pagina:1080px}

.tutoriales{max-width:1080px;margin:0 auto;padding:56px 24px 0}
.tutoriales-titulo{font-family:'Archivo',sans-serif;font-size:clamp(32px,5vw,50px);line-height:1.08;letter-spacing:-1.7px;font-weight:700;margin:0}
.tutoriales-intro{font-size:18px;line-height:1.6;color:rgba(var(--tinta-rgb),.65);margin:14px 0 0;max-width:34em}
.tutoriales-intro a{color:var(--ambar-texto);text-decoration:underline;text-underline-offset:3px}

/* ---------- Menú: píldoras en una cápsula; en el móvil se desliza de lado si no caben ---------- */
.tutoriales-menu{display:flex;gap:4px;width:max-content;max-width:100%;margin-top:30px;padding:4px;border-radius:999px;
  background:rgba(var(--tinta-rgb),.06);overflow-x:auto;scrollbar-width:none}
.tutoriales-menu::-webkit-scrollbar{display:none}
.tutoriales-menu a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;
  font-size:15.5px;font-weight:600;color:rgba(var(--tinta-rgb),.68);white-space:nowrap}
.tutoriales-menu a:hover{color:var(--tinta)}
.tutoriales-menu a[aria-selected="true"]{background:var(--segmento-activo);color:var(--tinta);box-shadow:0 1px 3px rgba(17,18,20,.14)}
.tutoriales-menu a:focus-visible{outline:2px solid var(--ambar-claro);outline-offset:2px}
/* Sin JavaScript no hay pestaña elegida: ninguna resalta. */
html:not(.con-pestanas) .tutoriales-menu a[aria-selected="true"]{background:none;box-shadow:none}

/* ---------- El tutorial: vídeo grande a la izquierda, pasos a la derecha ---------- */
.tutorial{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;margin-top:36px}
.tutorial[hidden]{display:none}
/* Tan alto como deje la pantalla (sin pasarse de 820 px), siempre en 9:16. */
.tutorial-video{display:block;height:min(78vh,820px);width:auto;aspect-ratio:9/16;border-radius:28px;background:var(--hueco-imagen);
  border:1px solid rgba(var(--tinta-rgb),.08);box-shadow:0 30px 60px -30px rgba(23,24,26,.45)}
.tutorial-quien{margin:0;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ambar-texto)}
.tutorial-titulo{margin:8px 0 0;font-family:'Archivo',sans-serif;font-size:clamp(26px,3vw,36px);line-height:1.1;letter-spacing:-.03em;font-weight:700}
.tutorial-pasos{margin:26px 0 0;padding:0;list-style:none;counter-reset:paso;display:flex;flex-direction:column;gap:16px;max-width:30em}
.tutorial-pasos li{counter-increment:paso;position:relative;padding-left:48px;min-height:34px;font-size:17px;line-height:1.55;color:rgba(var(--tinta-rgb),.75)}
.tutorial-pasos li::before{content:counter(paso);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--tarjeta-ambar);color:var(--ambar-texto);font-weight:700;font-size:15px}
.tutorial-pasos b{color:var(--tinta);font-weight:600}

/* En pantallas estrechas, el vídeo arriba a todo lo ancho (sin pasar del alto de la pantalla) y los pasos debajo. */
@media (max-width:760px){
  .tutorial{grid-template-columns:minmax(0,1fr);gap:28px}
  .tutorial-video{width:100%;height:auto;max-height:82vh;margin:0 auto;object-fit:contain}
}