/* ═══════════════════════════════════════════════════════════════════════════
   video-short.css — Transotel.Web
   Ubicacion: wwwroot/css/video-short.css
   LOTE V1 · Short de YouTube en la portada (seccion "Cómo funciona")

   Solo lo carga Index.cshtml, y solo cuando hay foto activa para el video
   (clave home.video.poster en «Imágenes de páginas»).

   No redefine nada de site.css, home.css ni home-reserva.css: todas las
   reglas cuelgan de .video-short.

   Colores de marca: #008572 fondos · #dfbb3e botones
   ═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
   1. TARJETA
   Movil: el video arriba y el texto debajo. Desde 768px, en dos columnas.
   ─────────────────────────────────────────────────────────────────────────── */
.video-short {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
    max-width: 860px;
    margin: 2.5rem auto 0;
    padding: 1.25rem;
    background: #ffffff;
    border: 1px solid #d3e8e4;
    border-radius: 16px;
    text-align: left;
}

@media (min-width: 768px) {

    .video-short {
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 2.5rem;
        padding: 2rem 2.5rem;
    }
}


/* ───────────────────────────────────────────────────────────────────────────
   2. MARCO VERTICAL (9:16) CON LA FOTO Y EL BOTON DE PLAY
   ─────────────────────────────────────────────────────────────────────────── */
.video-short-marco {
    position: relative;
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #00594c;
    border-radius: 20px;
    box-shadow: 0 18px 40px -20px rgba(0, 89, 76, 0.6);
}

/* Navegadores sin aspect-ratio (iOS 14 y anteriores) */
@supports not (aspect-ratio: 9 / 16) {

    .video-short-marco::before {
        content: "";
        display: block;
        padding-top: 177.78%;
    }
}

.video-short-play {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

.video-short-play img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* Sombra suave abajo para que la duracion se lea sobre cualquier foto */
.video-short-play::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30%;
    background: linear-gradient(to top, rgba(0, 38, 33, 0.55), rgba(0, 38, 33, 0));
    pointer-events: none;
}

.video-short-icono {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    background: #dfbb3e;
    color: #3f2d00;
    font-size: 1.5rem;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    transition: transform 0.18s ease, background 0.18s ease;
}

/* El triangulo de play pesa a la izquierda: se centra a ojo */
.video-short-icono i {
    margin-left: 4px;
}

.video-short-play:hover .video-short-icono,
.video-short-play:focus-visible .video-short-icono {
    background: #f0cf5c;
    transform: scale(1.08);
}

.video-short-play:focus-visible {
    outline: 3px solid #dfbb3e;
    outline-offset: -3px;
}

.video-short-duracion {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 1;
    padding: 0.15rem 0.5rem;
    background: rgba(0, 0, 0, 0.62);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    border-radius: 6px;
}

/* El reproductor que pone video-short.js en lugar del boton */
.video-short-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* ───────────────────────────────────────────────────────────────────────────
   3. TEXTO (figcaption)
   ─────────────────────────────────────────────────────────────────────────── */
.video-short-texto {
    min-width: 0;
    margin: 0;
}

.video-short-texto h3 {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    line-height: 1.3;
}

.video-short-pie {
    max-width: 60ch;
    margin: 0 0 1rem;
    font-size: 1rem;
    line-height: 1.6;
    color: #34454a;
}

.video-short-ia {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 1rem;
    padding: 0.3rem 0.75rem;
    background: #e6f3f1;
    color: #00594c;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 999px;
}

.video-short-ia i {
    color: #008572;
}

/* Lo que dice el video, plegado */
.video-short-transcripcion {
    margin: 0 0 1rem;
    border-top: 1px solid #e1eeeb;
    border-bottom: 1px solid #e1eeeb;
}

.video-short-transcripcion summary {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0;
    color: #00594c;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.video-short-transcripcion summary::-webkit-details-marker {
    display: none;
}

.video-short-transcripcion summary::marker {
    content: "";
}

.video-short-transcripcion summary:hover span {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.video-short-transcripcion summary:focus-visible {
    outline: 2px solid #dfbb3e;
    outline-offset: 2px;
    border-radius: 4px;
}

.video-short-chevron {
    margin-left: auto;
    font-size: 0.75rem;
    transition: transform 0.18s ease;
}

.video-short-transcripcion[open] .video-short-chevron {
    transform: rotate(180deg);
}

.video-short-transcripcion p {
    max-width: 62ch;
    margin: 0 0 0.9rem;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #34454a;
}

.video-short-privacidad {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    margin: 0 0 0.4rem;
    font-size: 0.82rem;
    color: #5b6b70;
}

.video-short-privacidad i {
    color: #c4302b;
}

.video-short-enlace {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #00735f;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.video-short-enlace:hover,
.video-short-enlace:focus {
    color: #00594c;
}

.video-short-enlace:focus-visible {
    outline: 2px solid #dfbb3e;
    outline-offset: 2px;
    border-radius: 3px;
}


/* ───────────────────────────────────────────────────────────────────────────
   4. IMPRESION Y MOVIMIENTO REDUCIDO
   ─────────────────────────────────────────────────────────────────────────── */
@media print {

    .video-short-marco,
    .video-short-privacidad,
    .video-short-enlace {
        display: none;
    }

    .video-short {
        display: block;
        border: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .video-short-icono,
    .video-short-chevron {
        transition: none;
    }

    .video-short-play:hover .video-short-icono,
    .video-short-play:focus-visible .video-short-icono {
        transform: none;
    }
}