/* ==========================================================================
   QRPatitas — REPRODUCTOR DE VIDEO (ronda 69)
   ==========================================================================

   POR QUE ESTE ARCHIVO EXISTE APARTE Y NO DENTRO DE style.css
   ----------------------------------------------------------
   style.css tiene un gemelo minificado, style.min.css, que lleva escrito en su
   primera linea el sha256 de su fuente, y un guardian (ronda 58) que lo
   recalcula y se pone rojo si no coinciden. Tocar style.css obliga a regenerar
   el minificado con su sello y a subir el cache-bust, y equivocarse ahi deja al
   sitio sirviendo el CSS de la ronda anterior SIN dar ningun error visible.

   Este componente es autonomo y no comparte una sola regla con el resto de la
   hoja, asi que vive en su propio archivo: cero riesgo sobre el sello, cero
   cache-bust que subir, y solo lo cargan las tres paginas que lo usan.

   TECNICA: FACHADA (facade), NO IFRAME DIRECTO
   --------------------------------------------
   Aqui no hay ningun <iframe> hasta que la persona pulsa play. Lo que se pinta
   es una miniatura con un boton encima; el iframe lo crea video.js en el clic.
   Tres motivos, y el tercero es el que decidio:

     1. Un <iframe> de YouTube arrastra cerca de medio megabyte de JavaScript
        de terceros ANTES de que nadie haya pedido ver nada. En una pagina con
        dos videos, eso es un megabyte que paga todo el que entra. Esta pagina
        viene de tres rondas de trabajo de PageSpeed; meter eso ahi seria
        deshacerlo.
     2. Sin iframe no hay cookies de YouTube hasta el clic.
     3. Es lo unico que permite cumplir "cuando empieza uno se calla el otro"
        SIN cargar la API de YouTube. Quien crea el reproductor es nuestro
        codigo, asi que sabe exactamente cuando empieza cada uno.

   FORMATO: los dos videos son Shorts, o sea verticales 9:16. Se respeta esa
   proporcion en vez de meterlos en una caja 16:9 con franjas negras a los
   lados, que es lo que pasa cuando se reutiliza el componente de video normal.
   ========================================================================== */

.qrp-videos {
    margin: 2.5rem auto 0;
    max-width: 1000px;
}

.qrp-videos__titulo {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
    text-align: center;
}

.qrp-videos__ayuda {
    margin: 0 auto 1.4rem;
    max-width: 46ch;
    text-align: center;
    font-size: 0.92rem;
    opacity: 0.75;
}

/* Rejilla: dos columnas en escritorio, una en movil. Se usa auto-fit con un
   minimo, y no un @media, para que con UN solo video (preguntas y afiliados)
   la tarjeta no se estire a lo ancho de la pagina: max-width la contiene. */
.qrp-videos__rejilla {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    justify-content: center;
}

.qrp-videos--uno .qrp-videos__rejilla {
    max-width: 340px;
    margin: 0 auto;
}

.qrp-video {
    background: #11161d;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.qrp-video__marco {
    position: relative;
    width: 100%;
    /* 9:16, la proporcion real de un Short. */
    aspect-ratio: 9 / 16;
    background: #000;
}

.qrp-video__marco iframe,
.qrp-video__portada {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* La portada es un <button>, no un <div>: se alcanza con el tabulador y se
   dispara con Enter o barra espaciadora sin escribir una sola linea de codigo
   de teclado. Un div con onclick deja fuera a quien no usa raton. */
.qrp-video__portada {
    display: block;
    padding: 0;
    cursor: pointer;
    background-color: #000;
    background-position: center;
    background-size: cover;
    /* La miniatura de un Short es 16:9 con franjas: se recorta al centro para
       que llene el marco vertical sin deformarse. */
    background-repeat: no-repeat;
}

.qrp-video__velo {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0.45) 60%,
        rgba(0, 0, 0, 0.72) 100%);
    transition: background 0.18s ease;
}

.qrp-video__portada:hover .qrp-video__velo,
.qrp-video__portada:focus-visible .qrp-video__velo {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0.35) 60%,
        rgba(0, 0, 0, 0.62) 100%);
}

.qrp-video__portada:focus-visible {
    outline: 3px solid #f5c542;
    outline-offset: -3px;
}

.qrp-video__play {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #f5c542;
    color: #1a1205;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    /* El triangulo se desplaza un pelo a la derecha porque su centro visual no
       coincide con su caja: centrado "de verdad" se ve descentrado. */
    padding-left: 5px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    transition: transform 0.18s ease;
}

.qrp-video__portada:hover .qrp-video__play,
.qrp-video__portada:focus-visible .qrp-video__play {
    transform: scale(1.08);
}

.qrp-video__etiqueta {
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
    padding: 0 1rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.qrp-video__pie {
    padding: 0.75rem 0.9rem;
    font-size: 0.86rem;
    line-height: 1.35;
    opacity: 0.85;
}

/* Igual que el resto del sitio: quien pide menos movimiento no recibe ninguno.
   El bloque existe porque las transiciones de arriba, aunque cortas, son
   movimiento; el proyecto ya respeta esta preferencia en el tutorial. */
@media (prefers-reduced-motion: reduce) {
    .qrp-video__velo,
    .qrp-video__play {
        transition: none;
    }
    .qrp-video__portada:hover .qrp-video__play,
    .qrp-video__portada:focus-visible .qrp-video__play {
        transform: none;
    }
}


/* ==========================================================================
   RONDA 86, PUNTO 10 — LA PÁGINA ¿VIDEOTUTORIALES?
   ==========================================================================
   Cuatro videos HORIZONTALES, uno debajo del otro, cada uno a todo el ancho.

   POR QUÉ NO ES UNA CUADRÍCULA. El dueño la descartó él mismo tras probarla:
   «en celular se veían muy pequeños». Cuatro videos en 2×2 en una pantalla de
   390px dan un reproductor de 180px de ancho, en el que no se lee ni el texto
   que sale en pantalla. Uno debajo de otro cada uno mide el ancho completo.

   PROPORCIÓN 16:9, no la 9:16 de arriba: los de la portada son Shorts
   verticales y estos son videotutoriales grabados en horizontal. Meterlos en
   la caja vertical los dejaría con dos franjas negras enormes.

   ANCHO: contenedor centrado con máximo de lectura en computadora (una línea
   de video de 1600px obliga a mover la cabeza), y de BORDE A BORDE en celular,
   que es donde cada píxel cuenta.
   ========================================================================== */

.qrp-videos--columna {
    max-width: 900px;
}

.qrp-videos--columna .qrp-videos__rejilla {
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
}

.qrp-videos--columna .qrp-video__marco {
    /* 16:9. Se declara aquí y no en el marco general para no tocar los Shorts
       de la portada, que siguen en 9:16. */
    aspect-ratio: 16 / 9;
}

/* ==========================================================================
   RONDA 87, PUNTO 6 — EL TÍTULO, AHORA CON SU PROPIO FONDO
   ==========================================================================
   Antes era texto --verde-oscuro suelto, apoyado en el fondo de la página. Un
   texto sin fondo propio hereda el que le toque, y ahí ya no hay contraste
   medido sino contraste con suerte: sobre la crema de la página se leía, sobre
   la selección del navegador no, y encima quedaba pegado a la miniatura del
   vídeo sin separarse de ella.

   Ahora el título es una BANDA con fondo propio: teal oscuro macizo y texto
   blanco. Contraste medido 11.6:1 (#ffffff sobre #1a4750), y ya no depende de
   lo que haya detrás. Es además lo que el dueño pidió —«colores más llamativos
   y que contrasten con su fondo»— y sirve de barra de título del reproductor
   que va justo debajo, así que se lee como una sola pieza.
   ========================================================================== */
.qrp-videos--columna .qrp-video__titulo {
    margin: 0;
    padding: .7rem .9rem;
    border-radius: 12px 12px 0 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    background: var(--verde-oscuro, #1a4750);
    color: #ffffff;
}

/* La selección dentro de la banda se invierte: sobre teal oscuro el dorado
   general dejaría texto oscuro sobre oscuro otra vez. Aquí fondo blanco y
   texto teal, 11.6:1 en el otro sentido. */
.qrp-videos--columna .qrp-video__titulo::selection {
    background: #ffffff;
    color: var(--verde-oscuro, #1a4750);
}
.qrp-videos--columna .qrp-video__titulo::-moz-selection {
    background: #ffffff;
    color: var(--verde-oscuro, #1a4750);
}

/* El marco pierde su redondeo de arriba para encajar bajo la banda. */
.qrp-videos--columna .qrp-video__titulo + .qrp-video__marco {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.qrp-videos__aviso {
    margin: .8rem auto 1.6rem;
    padding: .7rem .9rem;
    max-width: 900px;
    border: 2px solid var(--dorado, #f0a132);
    border-radius: 10px;
    background: #fffaf0;
    font-size: .88rem;
    color: var(--verde-oscuro, #1a4750);
}

/* De borde a borde en celular: se anulan los márgenes laterales del contenedor
   de la página para que el video use el ancho físico completo. */
@media (max-width: 640px) {
    .qrp-videos--columna {
        margin-left: calc(-1 * var(--margen-lateral-movil, 1rem));
        margin-right: calc(-1 * var(--margen-lateral-movil, 1rem));
        max-width: none;
    }
    .qrp-videos--columna .qrp-video__marco {
        border-radius: 0;
    }
    .qrp-videos--columna .qrp-videos__rejilla {
        gap: 1.6rem;
    }
    .qrp-videos--columna .qrp-video__titulo,
    .qrp-videos--columna .qrp-video__pie {
        padding-left: var(--margen-lateral-movil, 1rem);
        padding-right: var(--margen-lateral-movil, 1rem);
    }
}