/* Dreams House – ventana de video del portafolio */
.dhv-card { cursor: pointer; }
.dhv-card:focus-visible { outline: 2px solid #1e293b; outline-offset: 3px; }
.dhv-card a[href*="youtu"] { color: inherit !important; text-decoration: none !important; pointer-events: none; }

.dhv {
	position: fixed; inset: 0; z-index: 100000;
	display: flex; align-items: center; justify-content: center;
	padding: 1rem; box-sizing: border-box;
	opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
}
.dhv.is-open { opacity: 1; visibility: visible; }
.dhv__backdrop { position: absolute; inset: 0; background: rgba(2, 6, 23, .88); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dhv__box {
	position: relative; width: min(1100px, 100%, calc((100vh - 7rem) * 16 / 9));
	transform: scale(.96); transition: transform .3s ease;
}
.dhv.is-open .dhv__box { transform: none; }
.dhv__frame {
	position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
	background: #000; border-radius: .5rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5);
}
/* El reproductor es más alto que la caja: la barra de título y el logo de YouTube quedan fuera de vista */
.dhv__frame iframe, .dhv__frame .dhv__player {
	position: absolute; left: 0; top: -72px; width: 100%; height: calc(100% + 144px); border: 0;
}
/* Capa encima del video: evita que aparezcan los controles de YouTube y muestra los nuestros */
.dhv__shield {
	position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
	background: #000; cursor: pointer; transition: background-color .3s ease;
}
.dhv__shield.is-playing { background: transparent; }
.dhv__shield.is-paused { background: rgba(0, 0, 0, .78); }
.dhv__shield.is-ended { background: #000; }
.dhv__icon {
	width: 4.5rem; height: 4.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .35); color: #fff;
	transition: opacity .25s ease, transform .25s ease;
}
.dhv__icon svg { width: 1.75rem; height: 1.75rem; }
.dhv__shield.is-playing .dhv__icon, .dhv__shield.is-loading .dhv__icon { opacity: 0; transform: scale(.9); }
.dhv__spinner {
	position: absolute; width: 2.5rem; height: 2.5rem; border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .2); border-top-color: #fff; animation: dhv-spin .8s linear infinite; opacity: 0;
}
.dhv__shield.is-loading .dhv__spinner { opacity: 1; }
/* Aviso de "sin sonido" (tocando el video se activa) */
.dhv__muted {
	position: absolute; right: .75rem; bottom: .75rem; width: 2.25rem; height: 2.25rem; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); color: #fff;
	opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.dhv__muted svg { width: 1.1rem; height: 1.1rem; }
.dhv__shield.is-muted .dhv__muted { opacity: 1; }
@keyframes dhv-spin { to { transform: rotate(360deg); } }

.dhv__close {
	position: absolute; top: -3.25rem; right: 0; z-index: 3;
	width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; transition: background-color .2s ease;
}
.dhv__close:hover, .dhv__close:focus-visible { background: rgba(255, 255, 255, .25); outline: none; }
.dhv__close svg { width: 1.5rem; height: 1.5rem; }
html.dhv-lock, html.dhv-lock body { overflow: hidden; }

@media (max-width: 767px) {
	.dhv { padding: .75rem; }
	.dhv__frame { border-radius: .375rem; }
	.dhv__frame iframe, .dhv__frame .dhv__player { top: -60px; height: calc(100% + 120px); }
	.dhv__icon { width: 3.5rem; height: 3.5rem; }
	.dhv__icon svg { width: 1.4rem; height: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { .dhv, .dhv__box { transition: none; } }