/* Reel de la serie MATERIA PRIMA en la ficha (Klein 04.11.2026). Fondo: hueso arriba que se funde en blanco
 * (David 04.11: el fondo entero saturaba). Play propio en el verde de la casa, sin el degradado negro del
 * navegador. Tono HUESO (David 04.11: "tonos calidos y
 * neutros, un tono hueso"): papel calido, tinta marron oscura, el color de la familia oscurecido para que se lea y
 * el magenta de los botones de la tienda (#ab439e) en la llamada principal. */
/* David 04.11: sin fondo ni borde, el bloque se funde con la ficha; solo el video lleva su tarjeta */
.mcc-reel { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; margin: 0 0 24px; padding: 18px 18px 0 0;
    color: #3a342e; }
.mcc-reel__video { position: relative; flex: 0 0 260px; max-width: 100%; margin: 0 auto; }
.mcc-reel__video video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 10px;
    background: #e9e1d3; box-shadow: 0 4px 18px rgba(80, 60, 30, .14); }
.mcc-reel__info { flex: 1 1 280px; min-width: 0; }
.mcc-reel__serie { margin: 2px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
    color: var(--mcc-reel-tinta, #7a5a2e); }
.mcc-reel .mcc-reel__titulo { margin: 0 0 10px; font-size: 21px; line-height: 1.25; color: #2b2622; text-transform: none; }
.mcc-reel__resumen { margin: 0 0 14px; color: #5e554b; line-height: 1.5; }
.mcc-reel__capitulos-titulo { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #2b2622; }
.mcc-reel__capitulos { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid #e6dccb; }
.mcc-reel__capitulos li { margin: 0; padding: 0; border-bottom: 1px solid #e6dccb; }
.mcc-reel__capitulos button { display: flex; gap: 10px; width: 100%; padding: 8px 6px; border: 0; background: transparent;
    color: #3a342e; text-align: left; font: inherit; line-height: 1.35; cursor: pointer; }
.mcc-reel__capitulos button:hover, .mcc-reel__capitulos button:focus-visible { background: #efe7da; outline: none; }
.mcc-reel__capitulos button span { flex: 0 0 38px; font-variant-numeric: tabular-nums; color: var(--mcc-reel-tinta, #7a5a2e); font-weight: 600; }
.mcc-reel__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.mcc-reel__acciones a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 4px; font-weight: 600; font-size: 14px;
    text-decoration: none; }
.mcc-reel .mcc-reel__ig { background: #ab439e; color: #fff; }
.mcc-reel__ig svg { width: 18px; height: 18px; flex: none; }
.mcc-reel__acciones a:hover { opacity: .9; text-decoration: none; }
@media (max-width: 600px) {
    .mcc-reel { padding: 14px 14px 0 0; gap: 16px; }
    .mcc-reel__video { flex-basis: 100%; max-width: 280px; }
    .mcc-reel .mcc-reel__titulo { font-size: 19px; }
}

/* David 04.11: grande y en el centro, como al principio */
.mcc-reel__play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; padding: 0;
    border: 0; border-radius: 50%; background: rgba(23, 77, 61, .88); box-shadow: 0 4px 14px rgba(23, 77, 61, .3);
    cursor: pointer; transition: transform .15s ease, background .15s ease; }
.mcc-reel__play span { position: absolute; inset: 29% 25% 29% 37%; background: #f6f1e8;
    clip-path: polygon(0 0, 100% 50%, 0 100%); }
.mcc-reel__play:hover, .mcc-reel__play:focus-visible { transform: scale(1.06); background: #174d3d; outline: none; }
.mcc-reel--en-marcha .mcc-reel__play { display: none; }