/* RSJ · plantillas v3 · hoja de los tutoriales en vídeo (paquete rsj_tutoriales_v1.0, maqueta v0.3 aprobada por Miguel el 25/10/2026).
   Primero, los módulos de la biblioteca que usa la página, sin cambios (copias de blog.css y contacto.css): breadcrumbs, card-producto y faqs.
   Después, lo propio de esta parte (no viene de la biblioteca), con los tokens del libro de estilo v0.21 de comun.css: fondo de la página con
   la veladura #ECEFE8 (decisión de Miguel) y los bloques en blanco con borde. Un solo color de acción; pastillas seleccionadas en texto
   secundario, nunca en verde; sin sombras salvo la barra fija de móvil; nada pulsable por debajo de 44 × 44. */
/* ===== biblioteca: breadcrumbs (sin cambios) ===== */
/* RSJ · breadcrumbs (migas de pan) · v1.0 (validado por Miguel el 08/10/2026). Biblioteca de módulos. Ficha v0.4. Texto 14 en text-muted, la página actual
   en ink; separador «/» decorativo. Si no cabe en móvil, pasa a la línea siguiente. El JSON-LD BreadcrumbList lo genera el servidor. */
.m-migas{padding-block:var(--s-16);font-size:var(--fs-aux)}
.m-migas ol{display:flex;flex-wrap:wrap;gap:var(--s-8);margin:0;padding:0;list-style:none}
.m-migas li{display:flex;gap:var(--s-8);color:var(--color-text-muted)}
.m-migas li+li::before{content:"/";color:var(--color-border-strong)}
.m-migas a{display:inline-flex;align-items:center;min-height:var(--h-touch-min);margin-block:calc(-1*var(--s-12));color:var(--color-text-muted)}
.m-migas a:hover{color:var(--color-ink)}
.m-migas [aria-current]{color:var(--color-ink);font-weight:var(--fw-medium)}

/* ===== biblioteca: card-producto (sin cambios) ===== */
/* RSJ · card-producto · v1.0 (validado por Miguel el 08/10/2026). Biblioteca de módulos. Libro §8.1 (K1, maqueta validada): móvil horizontal
   con foto de 96 px; vertical desde 768. Foto, nombre, formato, precio por unidad (cantidad mínima), precio por envase,
   aviso de tramos (si los hay), botón de 48 px a todo el ancho y disponibilidad (aviso-stock) debajo. Sin sombra. */
.m-card{display:grid;grid-template-columns:var(--card-thumb) minmax(0,1fr);gap:var(--s-12);align-items:start;padding:var(--s-12);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.m-card__foto{display:block;text-decoration:none;border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden;background:var(--color-surface)}
.m-card__foto img{width:100%;aspect-ratio:1;object-fit:contain}
.m-card__sinfoto{aspect-ratio:1;display:grid;place-items:center;padding:var(--s-4);background:var(--color-surface-soft);color:var(--color-text-muted);font-size:var(--fs-badge);font-weight:var(--fw-semibold);text-align:center;line-height:1.3}
.m-card__datos{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
.m-card__nombre{font-size:var(--fs-body);font-weight:var(--fw-semibold);line-height:var(--lh-h3)}
.m-card__nombre a{color:var(--color-ink);text-decoration:none}
.m-card__nombre a:hover{color:var(--color-ink);text-decoration:underline}
.m-card__fmt,.m-card__envase{font-size:var(--fs-aux);font-weight:var(--fw-medium);color:var(--color-text-muted)}
.m-card__precio{margin-top:var(--s-4);font-size:var(--fs-price);font-weight:var(--fw-bold);line-height:var(--lh-tight);color:var(--color-action);font-variant-numeric:tabular-nums}
.m-card__precio small{font-size:var(--fs-aux);font-weight:var(--fw-medium);color:var(--color-text-muted)}
.m-card__tramo{font-size:var(--fs-aux);font-weight:var(--fw-medium);color:var(--color-action)}
.m-card__accion{margin-top:var(--s-8)}
.m-card__accion .btn{width:100%;padding-inline:var(--s-12)}
.m-card__off{margin-top:var(--s-8);font-size:var(--fs-aux);font-weight:var(--fw-semibold);color:var(--color-text-muted)}
.m-card .m-stock{margin-top:var(--s-12)}
@media (min-width:768px){
 .m-card{display:flex;flex-direction:column;height:100%}
 .m-card__foto{width:100%}
 .m-card__datos{flex:1}
 .m-card__accion{margin-top:auto;padding-top:var(--s-12)}
}
/* v1.1 (validado por Miguel el 09/10/2026; portada de campaña): línea «Se suele vender a X €/unidad» con el precio sugerido (PDC-H2), solo si la plantilla la pide */
.m-card__reventa{margin-top:var(--s-4);padding:var(--s-4) var(--s-8);border-radius:var(--radius-sm);background:var(--color-action-soft);font-size:var(--fs-aux);color:var(--color-ink)}
.m-card__reventa b{color:var(--color-action)}
/* ===== biblioteca: faqs (sin cambios) ===== */
/* RSJ · faqs (B03, + acordeón) · v1.0 (validado por Miguel el 08/10/2026). Biblioteca de módulos. <details>/<summary> nativos: sin JS, accesibles y
   todo el texto en el HTML (bueno para buscadores). Home v0.12: punto de marca a la izquierda, chevron-down de Lucide a la derecha,
   abierta con fondo surface-soft y filete de marca. Animación de 150 ms solo donde el navegador sabe animar la altura. */
.m-faqs{border-top:1px solid var(--color-border)}
.m-faqs__p{border-bottom:1px solid var(--color-border)}
.m-faqs__p summary{position:relative;min-height:var(--h-touch-min);padding:var(--s-16) var(--s-48) var(--s-16) var(--s-32);font-weight:var(--fw-semibold);list-style:none;cursor:pointer}
.m-faqs__p summary::-webkit-details-marker{display:none}
.m-faqs__p summary::before{content:"";position:absolute;left:var(--s-12);top:calc(var(--s-16) + .6em);width:var(--s-8);height:var(--s-8);border-radius:50%;background:var(--color-brand-600)}
.m-faqs__p summary svg{position:absolute;right:var(--s-12);top:calc(var(--s-16) + .1em);width:var(--icon-sm);height:var(--icon-sm);color:var(--color-brand-600);transition:transform 150ms var(--ease)}
.m-faqs__p[open]{background:var(--color-surface-soft);box-shadow:inset 3px 0 0 var(--color-brand-600)}
.m-faqs__p[open] summary svg{transform:rotate(180deg)}
.m-faqs__r{padding:0 var(--s-48) var(--s-16) var(--s-32)}
.m-faqs__r p{max-width:75ch}
@supports (interpolate-size:allow-keywords){.m-faqs{interpolate-size:allow-keywords}.m-faqs__p::details-content{block-size:0;overflow:hidden;transition:block-size 150ms var(--ease),content-visibility 150ms allow-discrete}.m-faqs__p[open]::details-content{block-size:auto}}

/* ===== aviso de estado para quien tiene la sesión del panel (copia de corporativa-legal.css, sin cambios) ===== */
.v3-aviso-estado{display:flex;gap:var(--s-8);align-items:flex-start;padding:var(--s-8) var(--s-16);font-size:var(--fs-aux);border-bottom:1px solid var(--color-border)}.v3-aviso-estado svg{flex:none;width:var(--icon-sm);height:var(--icon-sm);margin-top:2px}.v3-aviso-estado p{margin:0}.v3-aviso-estado--b{background:var(--color-warning-soft)}.v3-aviso-estado--r{background:var(--color-surface-soft)}

/* ===== tutoriales (no viene de la biblioteca) ===== */
body{background:#ECEFE8}
.tut{--tut-page:#ECEFE8;display:grid;gap:var(--section-gap);padding-bottom:var(--s-80)}
.tut [hidden]{display:none!important}
.tut-ic{width:var(--icon-sm);height:var(--icon-sm);flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tut-blk{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--s-24)}
@media (max-width:767.98px){.tut-blk{padding:var(--s-16)}}
.tut-sec{display:grid;gap:var(--s-24);min-width:0}
.tut-lab{font-size:var(--fs-badge);font-weight:var(--fw-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted)}
.tut-lab--marca{color:var(--color-brand-600)}
.tut-sh{display:flex;justify-content:space-between;align-items:end;gap:var(--s-12);flex-wrap:wrap}
.tut-sh h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:var(--fw-bold)}
.tut-sh p{margin:var(--s-4) 0 0;color:var(--color-text-muted)}
/* hero */
.tut-hero{display:grid;gap:var(--s-12)}
.tut-hero h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:var(--fw-bold)}
.tut-hero p{margin:0;max-width:68ch;color:var(--color-text-muted)}
.tut-hero .tut-hero__sub{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-semibold);color:var(--color-brand-600)}
/* miniatura y reproductor (16:9, radio 8, borde; sin texto dentro) */
.tut-thumb{display:block;aspect-ratio:16/9;border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden;background:var(--color-surface-soft)}
.tut-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tut-thumb--sin,.tut-player__btn{background:linear-gradient(140deg,var(--color-action-soft),var(--color-surface-soft) 60%,var(--color-brand-100))}
.tut-player{position:relative;aspect-ratio:16/9;border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden;background:var(--color-surface-soft)}
.tut-player__btn{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;display:grid;place-items:center}
.tut-player__btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tut-player__play{position:relative;width:64px;height:64px;border-radius:50%;background:var(--overlay);color:var(--color-surface);display:grid;place-items:center}
.tut-player__play .tut-ic{width:28px;height:28px;margin-left:4px;fill:currentColor}
.tut-player__btn:hover .tut-player__play{background:var(--color-ink)}
.tut-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tut-meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-4) var(--s-8);margin:0;font-size:var(--fs-aux);font-weight:var(--fw-medium);color:var(--color-text-muted)}
/* destacado + caja de botones */
.tut-feat{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s-24);align-items:start}
@media (max-width:1023.98px){.tut-feat{grid-template-columns:1fr}}
.tut-feat__info{display:grid;gap:var(--s-12);min-width:0}
.tut-feat__t{margin:0;font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-semibold)}
.tut-feat__t a{display:inline-flex;align-items:center;min-height:var(--h-touch-min);color:var(--color-ink);text-decoration:none}
.tut-feat__t a:hover{text-decoration:underline}
.tut-feat__d{margin:0;color:var(--color-text-muted)}
.tut-cta{display:grid;gap:var(--s-12);padding:var(--s-16);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-action-soft);min-width:0}
.tut-cta__t{margin:0;font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-semibold)}
.tut-cta__s{margin:0;font-size:var(--fs-aux);font-weight:var(--fw-medium);color:var(--color-text-muted)}
.tut-cta .btn{width:100%}
.tut-cta__3{margin:0;text-align:center;font-size:var(--fs-aux)}
.tut-cta__3 a,.tut-barra__extra{display:inline-flex;align-items:center;min-height:var(--h-touch-min);color:var(--color-action);font-weight:var(--fw-semibold);text-decoration:none}
.tut-cta__3 a:hover,.tut-barra__extra:hover{text-decoration:underline}
/* buscador y pastillas */
.tut-filtros{gap:var(--s-16)}
.tut-buscar{position:relative}
.tut-buscar .tut-ic{position:absolute;left:var(--s-12);top:50%;transform:translateY(-50%);color:var(--color-text-muted)}
.tut-in{width:100%;min-width:0;min-height:var(--h-btn);padding:var(--s-8) var(--s-12);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-surface);font:inherit;color:var(--color-ink)}
.tut-buscar .tut-in{padding-left:calc(var(--s-12) + var(--icon-sm) + var(--s-8))}
.tut-chips{display:flex;flex-wrap:wrap;gap:var(--s-8)}
.tut-chip{display:inline-flex;align-items:center;gap:var(--s-4);min-height:var(--h-touch-min);padding:0 var(--s-16);border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);background:var(--color-surface);font:inherit;font-size:var(--fs-aux);font-weight:var(--fw-medium);color:var(--color-ink);cursor:pointer}
.tut-chip small{font-size:var(--fs-badge);opacity:.8}
.tut-chip[aria-pressed="true"]{background:var(--color-text-muted);border-color:var(--color-text-muted);color:var(--color-surface)}
/* tarjetas de vídeo (blanco, borde 1, radio 12, padding 12, sin sombra; hover borde fuerte) */
.tut-grid,.tut-camino,.tut-mini{list-style:none;margin:0;padding:0}
.tut-grid{display:grid;grid-template-columns:1fr;gap:var(--s-16)}
@media (min-width:768px){.tut-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-24)}}
@media (min-width:1024px){.tut-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tut-camino{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:var(--s-16);overflow-x:auto;padding-bottom:var(--s-8);overscroll-behavior-x:contain}
.tut-card{min-width:0}
.tut-card a{display:grid;gap:var(--s-8);align-content:start;height:100%;padding:var(--s-12);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-ink);text-decoration:none}
.tut-card a:hover{border-color:var(--color-border-strong)}
.tut-card h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-semibold)}
@media (min-width:1024px){.tut-card h3{font-size:18px}}
.tut-card p{margin:0}
.tut-card a>p:last-child{font-size:var(--fs-aux);font-weight:var(--fw-medium);color:var(--color-text-muted)}
.tut-vacio{padding:var(--s-24);border:1px dashed var(--color-border-strong);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-text-muted)}
.tut-vacio a{color:var(--color-action);font-weight:var(--fw-semibold)}
/* productos (card-producto de la biblioteca) */
.tut-prods{display:grid;grid-template-columns:1fr;gap:var(--s-16)}
@media (min-width:768px){.tut-prods{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-24)}}
@media (min-width:1024px){.tut-prods{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tut-vp .tut-prods{grid-template-columns:1fr}
@media (min-width:768px){.tut-vp .tut-prods{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* calculadora y formulario */
.tut-banda{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-32)}
.tut-banda--una{grid-template-columns:1fr}
@media (max-width:767.98px){.tut-banda{grid-template-columns:1fr}}
.tut-banda__col{display:grid;gap:var(--s-12);align-content:start;min-width:0;scroll-margin-top:calc(var(--header-h) + var(--s-16))}
.tut-banda h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:var(--fw-bold)}
.tut-banda p{margin:0;color:var(--color-text-muted)}
.tut-form{display:grid;gap:var(--s-8)}
.tut-form__l{font-size:var(--fs-aux);font-weight:var(--fw-semibold)}
.tut-form .btn{margin-top:var(--s-8)}
.tut-check{display:flex;gap:var(--s-12);align-items:flex-start;min-height:var(--h-touch-min);font-size:var(--fs-aux);font-weight:var(--fw-medium);color:var(--color-text-muted);cursor:pointer}
.tut-check input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--color-action)}
.tut-ok{display:flex;gap:var(--s-8);align-items:center;margin:0;font-weight:var(--fw-semibold);color:var(--color-action)}
/* preguntas: la pregunta es un H3 dentro del summary */
.m-faqs__p summary h3{display:inline;font-size:inherit;font-weight:inherit;line-height:inherit}
.m-faqs__r p{margin:0;color:var(--color-text-muted)}
/* página de vídeo */
.tut-vp{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:var(--s-32);align-items:start}
@media (max-width:1023.98px){.tut-vp{grid-template-columns:1fr}}
.tut-vp__main{display:grid;gap:var(--s-16);min-width:0}
.tut-vp__main h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:var(--fw-bold)}
.tut-vp__main h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:var(--fw-bold);margin-bottom:var(--s-8)}
.tut-vp__main>p{margin:0}
.tut-pasos{margin:0;padding-left:var(--s-24);display:grid;gap:var(--s-4)}
.tut-trans{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-soft)}
.tut-trans summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s-12);min-height:var(--h-touch-min);padding:var(--s-8) var(--s-16);font-weight:var(--fw-semibold);list-style:none;cursor:pointer}
.tut-trans summary::-webkit-details-marker{display:none}
.tut-trans[open] summary .tut-ic{transform:rotate(180deg)}
.tut-trans div{padding:0 var(--s-16) var(--s-16);color:var(--color-text-muted)}
.tut-next{display:grid;grid-template-columns:140px minmax(0,1fr);gap:var(--s-16);align-items:center;padding:var(--s-12);border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-ink);text-decoration:none}
.tut-next:hover{background:var(--color-action-soft)}
.tut-next__t{display:grid;gap:var(--s-4);min-width:0}
.tut-next__t b{font-size:18px;line-height:var(--lh-h3);font-weight:var(--fw-semibold)}
.tut-next__go{display:inline-flex;align-items:center;gap:var(--s-4);font-size:var(--fs-aux);font-weight:var(--fw-semibold);color:var(--color-action)}
@media (max-width:559.98px){.tut-next{grid-template-columns:1fr}}
.tut-vp__side{display:grid;gap:var(--s-24);min-width:0}
.tut-vp__side h2{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-semibold);margin-bottom:var(--s-12)}
.tut-mini{display:grid;gap:var(--s-12)}
.tut-mini a{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--s-12);align-items:center;min-height:var(--h-touch-min);color:var(--color-ink);text-decoration:none;font-size:var(--fs-aux);font-weight:var(--fw-semibold)}
.tut-mini a:hover span:last-child{text-decoration:underline}
/* barra fija de móvil (lo único con sombra: flota) */
.tut-barra{display:none}
@media (max-width:767.98px){
  .tut-barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 var(--s-12);position:sticky;bottom:0;z-index:var(--z-sticky);padding:var(--s-8) var(--gutter) calc(var(--s-8) + env(safe-area-inset-bottom,0px));background:var(--color-surface);border-top:1px solid var(--color-border);box-shadow:0 -4px 12px rgba(29,36,32,.08)}
  .tut-barra .btn{flex:1 1 100%}
}