/* Preview · José Luis Saorín. El vídeo manda; la interfaz se aparta.
   Papel crema, tinta, Georgia, un punto de terracota y mucho aire. */

:root {
	--minio: #c1453b;
	--gris-calido: #8c8577;
	--papel: #f4f1ea;
	--tinta: #1a1a1a;
	--terracota: #c8321c;
	--dorado: #e8b41a;
	--filete: #d8d2c4;
	--apagado: #6b6962;
	--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--serif: Georgia, "Times New Roman", serif;
	--cabecera: 3.25rem;
	--margen: clamp(0.75rem, 2.5vw, 2rem);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--serif);
	font-size: 17px;
	line-height: 1.5;
	min-height: 100svh;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
a { color: inherit; text-decoration-color: var(--terracota); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--terracota); }
button, select { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--terracota); outline-offset: 2px; }

/* ── cabecera ── */
.cabecera {
	height: var(--cabecera);
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 var(--margen);
	border-bottom: 0.6px solid var(--filete);
}
.marca { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; font-size: 1.05rem; letter-spacing: 0.01em; }
.punto { width: 0.62rem; height: 0.62rem; border-radius: 50%; background: var(--terracota); display: inline-block; }
.firma { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--apagado); }

/* ── página de vídeo ── */
.sala {
	--reserva: 15.5rem; /* lo que queda fuera del vídeo para que el mando se vea sin desplazarse */
	max-width: 1680px;
	margin: 0 auto;
	padding: var(--margen);
	display: grid;
	grid-template-areas: "escena" "mando" "ficha" "pliego";
	gap: 0.9rem;
}
.es-vertical .sala { --reserva: 14rem; }
.escena { grid-area: escena; margin: 0 auto; width: min(100%, calc((100svh - var(--reserva)) * var(--ar))); min-width: 0; }
.marco { position: relative; aspect-ratio: var(--ar); background: #141210; overflow: hidden; box-shadow: 0 1px 0 var(--filete), 0 18px 40px -28px rgba(26, 26, 26, 0.55); }
.marco video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; background: transparent; }

@media (min-width: 960px) {
	/* vertical en escritorio: el vídeo a toda altura y el mando al lado, en su columna */
	.es-vertical .sala {
		--reserva: calc(var(--cabecera) + 2 * var(--margen) + 1px);
		grid-template-columns: auto minmax(21rem, 27rem);
		grid-template-rows: auto 1fr auto;
		grid-template-areas: "escena mando" "escena ficha" "pliego pliego";
		justify-content: center;
		column-gap: clamp(1.5rem, 3vw, 3rem);
		align-items: start;
	}
	.es-vertical .escena { width: calc((100svh - var(--reserva)) * var(--ar)); max-width: 60vw; }
	.es-vertical .mando { padding-top: 0.2rem; }
	.es-horizontal .sala { --reserva: 13.5rem; }
}

.gran-play {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 4.6rem; height: 4.6rem; border-radius: 50%; border: 0;
	background: rgba(244, 241, 234, 0.92); color: var(--terracota);
	display: grid; place-items: center; cursor: pointer;
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
	transition: opacity 0.25s, transform 0.25s;
}
.gran-play svg { width: 1.9rem; height: 1.9rem; fill: currentColor; margin-left: 0.25rem; }
.gran-play .pausa, .gran-play svg + svg { display: none; }
.reproduciendo .gran-play, .ha-empezado .gran-play { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.9); }

.espera { position: absolute; right: 0.8rem; bottom: 0.8rem; width: 1.3rem; height: 1.3rem; border-radius: 50%;
	border: 2px solid rgba(244, 241, 234, 0.25); border-top-color: var(--terracota); opacity: 0; transition: opacity 0.2s; animation: gira 0.8s linear infinite; }
.marco.esperando .espera { opacity: 1; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ── mando ── */
.mando { grid-area: mando; width: 100%; max-width: 72rem; margin: 0 auto; }
.es-horizontal .mando, .es-horizontal .ficha { width: min(100%, max(36rem, calc((100svh - var(--reserva)) * var(--ar)))); }

.regla { position: relative; height: 2rem; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.regla-pista { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: rgba(26, 26, 26, 0.12); }
.regla:hover .regla-pista, .regla.arrastrando .regla-pista { height: 5px; margin-top: -2.5px; }
.regla-cargado { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(26, 26, 26, 0.18); }
.regla-hecho { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--terracota); }
.regla-tramo { position: absolute; top: -5px; bottom: -5px; background: rgba(232, 180, 26, 0.42); border-left: 1.5px solid var(--tinta); border-right: 1.5px solid var(--tinta); }
.regla-cabezal { position: absolute; top: 0.25rem; bottom: 0.25rem; width: 2px; margin-left: -1px; left: 0; background: var(--tinta); }
.regla-cabezal::before { content: ""; position: absolute; left: -4px; top: -3px; width: 10px; height: 6px; background: var(--tinta); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.regla-globo { position: absolute; bottom: 100%; transform: translateX(-50%); font-family: var(--mono); font-size: 0.72rem; background: var(--tinta); color: var(--papel); padding: 0.1rem 0.4rem; white-space: nowrap; pointer-events: none; }

.botonera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.35rem 0.9rem; margin-top: 0.15rem; }
.grupo { display: flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; }
.b { width: 2.5rem; height: 2.5rem; border: 0; background: transparent; border-radius: 2px; display: grid; place-items: center; cursor: pointer; padding: 0; }
.b svg { width: 1.3rem; height: 1.3rem; fill: var(--tinta); }
.b:hover { background: rgba(26, 26, 26, 0.06); }
.b-play svg:nth-child(2) { display: none; }
.reproduciendo .b-play svg:nth-child(1) { display: none; }
.reproduciendo .b-play svg:nth-child(2) { display: block; }
[data-accion="silencio"][aria-pressed="true"] .onda { opacity: 0.15; }
[data-accion="silencio"][aria-pressed="true"] svg { fill: var(--apagado); }

.codigo { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.98rem; letter-spacing: 0.02em; margin-left: 0.55rem; white-space: nowrap; }
.codigo-total { color: var(--apagado); font-size: 0.8rem; margin-left: 0.45rem; }

.t {
	border: 0.6px solid var(--filete); background: transparent; padding: 0.38rem 0.7rem; border-radius: 2px; cursor: pointer;
	font-size: 0.86rem; line-height: 1.2; white-space: nowrap;
}
.t:hover { border-color: var(--tinta); }
.t[aria-pressed="true"] { background: var(--terracota); border-color: var(--terracota); color: var(--papel); }
.t.marcado { border-color: var(--tinta); box-shadow: inset 0 -2px 0 var(--dorado); }

.selector select {
	-webkit-appearance: none; appearance: none; border: 0.6px solid var(--filete); background: transparent; border-radius: 2px;
	padding: 0.38rem 1.6rem 0.38rem 0.6rem; font-size: 0.86rem; cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, var(--tinta) 50%), linear-gradient(135deg, var(--tinta) 50%, transparent 50%);
	background-position: calc(100% - 0.85rem) 55%, calc(100% - 0.55rem) 55%; background-size: 0.3rem 0.3rem; background-repeat: no-repeat;
}
.selector select:hover { border-color: var(--tinta); }

.pie-mando { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.55rem; flex-wrap: wrap; }
.t-enlace { border-color: var(--tinta); }
.aviso { font-size: 0.85rem; font-style: italic; color: var(--terracota); min-height: 1.2em; }

/* ── ficha ── */
.ficha { grid-area: ficha; width: 100%; max-width: 72rem; margin: 0.6rem auto 2rem; }
.ficha h1 { font-weight: normal; font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.12; letter-spacing: -0.012em; margin: 0 0 0.6rem; }
.ficha .frente { font-style: italic; color: var(--apagado); font-size: 0.7em; }
.datos { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--apagado); margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; }
.datos .sep { color: var(--terracota); }
.nota { font-style: italic; font-size: 1.08rem; max-width: 36rem; margin: 0 0 1.2rem; border-left: 2px solid var(--terracota); padding-left: 0.9rem; }
.descarga { display: inline-flex; align-items: baseline; gap: 0.6rem; font-size: 0.95rem; margin-bottom: 1.4rem; }
.descarga .peso { font-family: var(--mono); font-size: 0.72rem; color: var(--apagado); }
.atajos { font-size: 0.86rem; color: var(--apagado); border-top: 0.6px solid var(--filete); padding-top: 0.7rem; max-width: 30rem; }
.atajos summary { cursor: pointer; }
.atajos dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0.7rem 0 0; }
.atajos dt { font-family: var(--mono); font-size: 0.78rem; color: var(--tinta); }
.atajos dd { margin: 0; }

/* ── el pliego .mesa ── */
.ir-pliego { display: inline-flex; align-items: baseline; gap: 0.6rem; font-size: 0.95rem; margin: 0 0 1.4rem 1.4rem; }
.ir-pliego .peso { font-family: var(--mono); font-size: 0.72rem; color: var(--apagado); }
.pliego { grid-area: pliego; width: 100%; max-width: 72rem; margin: 1rem auto 3rem; border-top: 0.6px solid var(--tinta); padding-top: 1.1rem; scroll-margin-top: 1rem; }
.pliego-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.6rem 1rem; margin-bottom: 0.7rem; }
.pliego-cabeza h2 { font-weight: normal; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; letter-spacing: -0.01em; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 0.8rem; }
.pliego-fichero { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--apagado); }
.pliego-botones { display: flex; align-items: center; gap: 0.4rem; }
.pliego-botones a.t { text-decoration: none; }
.pliego-nota { font-style: italic; margin: 0 0 0.9rem; border-left: 2px solid var(--minio); padding-left: 0.8rem; max-width: 46rem; }
.pliego-texto {
	margin: 0; max-height: min(78vh, 62rem); overflow: auto; -webkit-overflow-scrolling: touch;
	background: #f8f6f0; border: 0.6px solid var(--filete);
	padding: 0.9rem 1rem 0.9rem 0; font-family: var(--mono); font-size: 0.8rem; line-height: 1.62;
	white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; counter-reset: linea; color: var(--tinta);
}
.pliego-texto .l { display: block; position: relative; padding-left: 4.2em; min-height: 1.62em; }
.pliego-texto .l::before {
	counter-increment: linea; content: counter(linea); position: absolute; left: 0; width: 3.1em; text-align: right;
	color: #b9b2a3; font-size: 0.9em; user-select: none; -webkit-user-select: none;
}
.pliego-texto .l:hover { background: rgba(232, 180, 26, 0.09); }
.pliego-carga { font-style: italic; color: var(--apagado); padding-left: 1rem; }
.k-com { color: var(--gris-calido); font-style: italic; }
.k-cab { font-weight: bold; letter-spacing: 0.04em; }
.k-sec { color: var(--terracota); font-weight: bold; letter-spacing: 0.06em; }
.k-esc { color: var(--terracota); letter-spacing: 0.04em; }
.k-marca, .k-id { color: var(--terracota); font-weight: bold; }
.k-manera { font-style: italic; }
.k-ev { color: var(--minio); font-weight: bold; }
.k-dir { color: var(--minio); }
.k-verbo { font-weight: bold; }
.k-pre { color: var(--gris-calido); }
.k-cad { font-style: italic; }
.k-pre .k-cad { color: var(--tinta); }
.k-num { color: var(--terracota); }
.k-sep { color: #b3ab9b; }
.k-arc { color: var(--gris-calido); }
.k-pieza { color: var(--tinta); text-decoration: underline dotted var(--filete); text-underline-offset: 0.2em; }
.l:has(.k-sec) { margin-top: 0.5em; }

/* ── pantalla completa (escritorio y Android; en iOS manda el reproductor del sistema) ── */
.escena:fullscreen, .duo:fullscreen { width: 100vw; height: 100vh; max-width: none; background: #0e0d0c; display: flex; align-items: center; justify-content: center; margin: 0; }
.escena:fullscreen .marco { height: 100vh; width: auto; max-width: 100vw; box-shadow: none; }
.escena:fullscreen .rotulo { display: none; }

/* ── comparar ── */
.sala-comparar { grid-template-areas: "duo" "mando" "ficha"; --reserva: 17rem; }
.duo { grid-area: duo; display: flex; gap: clamp(0.6rem, 1.6vw, 1.4rem); justify-content: center; align-items: flex-start; }
.duo.lado { flex-direction: row; }
.duo.pila { flex-direction: column; align-items: center; }
.duo .escena { margin: 0; --alto: calc(100svh - var(--reserva) - 1.8rem); }
.duo.lado .escena { width: min(calc((100% - 1.4rem) / 2), calc(var(--alto) * var(--ar))); }
.duo.pila .escena { width: min(100%, calc((var(--alto) / 2 - 1.8rem) * var(--ar))); }
.rotulo { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.88rem; height: 1.8rem; overflow: hidden; white-space: nowrap; }
.rotulo .letra { font-family: var(--mono); color: var(--terracota); font-weight: bold; }
.rotulo a { text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.rotulo a { flex: 0 1 auto; min-width: 3em; }
.rotulo-datos { font-family: var(--mono); font-size: 0.7rem; color: var(--apagado); flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.duo:fullscreen { gap: 1rem; padding: 1rem; }
.duo:fullscreen .escena { --alto: calc(100vh - 2rem); }
.pagina-comparar .mando, .pagina-comparar .ficha { max-width: 64rem; }

/* ── portada ── */
.portada { max-width: 1320px; margin: 0 auto; padding: clamp(1.5rem, 6vw, 5rem) var(--margen) 4rem; }
.rotulo-portada { font-weight: normal; font-size: clamp(4.2rem, 15vw, 12rem); line-height: 0.86; letter-spacing: -0.045em; margin: 0 0 1.4rem; position: relative; display: inline-block; }
.rotulo-404 { font-size: clamp(3rem, 11vw, 8rem); }
.punto-grande { display: inline-block; width: 0.2em; height: 0.2em; border-radius: 50%; background: var(--terracota); margin-left: 0.06em; }
.entradilla { font-style: italic; font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--apagado); max-width: 34rem; margin: 0 0 clamp(2.5rem, 6vw, 4.5rem); }
.rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: clamp(1.4rem, 3vw, 2.6rem) clamp(1rem, 2.5vw, 2rem); align-items: end; border-top: 0.6px solid var(--filete); padding-top: 2rem; }
.tarjeta a { display: flex; flex-direction: column; gap: 0.35rem; text-decoration: none; }
.miniatura { position: relative; display: block; aspect-ratio: var(--ar); background: #141210; overflow: hidden; }
.tarjeta.es-vertical .miniatura { width: 62%; }
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s; }
.tarjeta a:hover img { transform: scale(1.025); }
.dur { position: absolute; right: 0.4rem; bottom: 0.4rem; font-family: var(--mono); font-size: 0.7rem; background: var(--papel); padding: 0.05rem 0.35rem; }
.tarjeta-titulo { font-size: 1.12rem; line-height: 1.25; margin-top: 0.3rem; }
.tarjeta a:hover .tarjeta-titulo { color: var(--terracota); }
.tarjeta-fecha { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.05em; color: var(--apagado); }
.vacio { font-size: 1.3rem; border-top: 0.6px solid var(--filete); padding-top: 2rem; }
.vacio span { font-style: italic; color: var(--apagado); font-size: 1rem; }
.volver { font-size: 1.05rem; }
.pie { padding: 2rem var(--margen) 2.5rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--apagado); text-align: right; }
.pie a { text-decoration: none; }

/* ── móvil ── */
@media (max-width: 640px) {
	body { font-size: 16px; }
	.sala { padding: 0.6rem 0.6rem 1.2rem; gap: 0.6rem; --reserva: 13.5rem; }
	.es-vertical .sala { --reserva: 13.8rem; }
	.firma { display: none; }
	.botonera { justify-content: flex-start; }
	.grupo-tramo { order: 3; }
	.grupo-ajustes { margin-left: auto; }
	.codigo { font-size: 0.92rem; margin-left: 0.3rem; }
	.codigo-total { display: none; }
	.t, .selector select { font-size: 0.82rem; padding-top: 0.45rem; padding-bottom: 0.45rem; }
	.sala-comparar { --reserva: 16rem; }
	.rotulo-datos { display: none; }
	.pliego-texto { font-size: 0.74rem; max-height: 72vh; }
	.pliego-texto .l { padding-left: 3.4em; }
	.pliego-texto .l::before { width: 2.5em; }
	.ir-pliego { margin-left: 0; display: flex; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation-duration: 0.01s !important; }
}