/* =========================================================
   VIDEOS DEL CANAL

   Misma fila desplazable que la seccion de proyectos: el ancho de la
   tarjeta va en porcentaje del visor, asi que el numero visible sale
   del tamano de pantalla y no hay nada que recalcular por guion.
   Tres en escritorio.
========================================================= */

.chyt{
    padding:52px 0 56px;
    background:#f7f9fc;
    font-family:Inter,Montserrat,Arial,sans-serif;
}

.chyt-wrap{
    width:min(1240px,100%);
    margin:0 auto;
    padding:0 24px;
}

.chyt-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:22px;
}

.chyt-head h2{
    margin:0;
    color:#07150d;
    font-size:clamp(23px,2.1vw,29px);
    font-weight:600;
    letter-spacing:-.7px;
    line-height:1.18;
}

.chyt-flechas{ display:flex; gap:8px; }

.chyt-flecha{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:1px solid #dce3ea;
    border-radius:50%;
    background:#ffffff;
    color:#030e30;
    font-size:20px;
    line-height:1;
    cursor:pointer;
    transition:background .2s, border-color .2s, opacity .2s;
}

.chyt-flecha:hover{ background:#eef2f8; border-color:#b7c7d8; }
.chyt-flecha:disabled{ opacity:.32; cursor:default; }

.chyt-visor{ overflow:hidden; }

.chyt-pista{
    display:flex;
    gap:20px;
    overflow-x:auto;
    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;
    padding-bottom:6px;
    scrollbar-width:none;
}

.chyt-pista::-webkit-scrollbar{ display:none; }

.chyt-card{
    flex:0 0 calc((100% - 2 * 20px) / 3);
    min-width:0;
    overflow:hidden;
    border:1px solid #dce3ea;
    border-radius:16px;
    background:#ffffff;
    scroll-snap-align:start;
}

/* La miniatura es un boton: hasta que se pulsa no hay iframe. */
.chyt-media{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:16/9;
    padding:0;
    border:0;
    overflow:hidden;
    background:#0b1224;
    cursor:pointer;
}

.chyt-media img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .4s ease;
}

.chyt-media:hover img{ transform:scale(1.04); }

/* Aro fino en vez de circulo macizo: sobre una foto pesa menos y deja
   ver el fotograma, que es lo que invita a pulsar. */
.chyt-play{
    position:absolute;
    left:50%;
    top:50%;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:1.5px solid rgba(255,255,255,.9);
    border-radius:50%;
    background:rgba(10,18,36,.28);
    color:#ffffff;
    transform:translate(-50%,-50%);
    box-shadow:0 6px 18px rgba(3,14,48,.22);
    backdrop-filter:blur(3px);
    transition:transform .25s ease, background .25s ease, border-color .25s ease;
}

.chyt-media:hover .chyt-play{
    transform:translate(-50%,-50%) scale(1.08);
    border-color:#ffffff;
    background:rgba(10,18,36,.44);
}

.chyt-play svg{ width:16px; height:16px; margin-left:2px; }

/* ---------- ULTIMO SUBIDO ---------- */

.chyt-nuevo{
    position:absolute;
    top:10px;
    left:10px;
    z-index:2;
    padding:4px 10px;
    border-radius:999px;
    background:#FFC400;
    color:#111827;
    font-size:10px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.chyt-marco{
    width:100%;
    aspect-ratio:16/9;
    display:block;
    border:0;
    background:#000;
}

.chyt-cuerpo{ padding:14px 15px 16px; }

.chyt-titulo{
    display:-webkit-box;
    overflow:hidden;
    margin:0;
    color:#0f172a;
    font-size:14.5px;
    font-weight:600;
    line-height:1.35;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

.chyt-fecha{
    margin:8px 0 0;
    color:#64748b;
    font-size:12px;
    font-weight:450;
}

@media(max-width:1000px){
    .chyt-card{ flex-basis:calc((100% - 20px) / 2); }
}

@media(max-width:700px){
    .chyt{ padding:38px 0 40px; }
    .chyt-wrap{ padding:0 14px; }
    .chyt-pista{ gap:14px; }
    .chyt-card{ flex-basis:86%; }
    .chyt-flechas{ display:none; }
}