/* detail.css — overlay fullscreen para vista de proyecto
   ============================================================
   Se carga junto con cada detail_X.html.
   En Fase 2, este mismo CSS aplica cuando el HTML se inyecta
   en #detail-overlay del index principal.
*/

/* ---- base / reset scoped ---- */
body.detail-body {
	margin: 0;
	padding: 0;
	background: #000;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	overflow: hidden;
	height: 100vh;
	width: 100vw;
}

.detail-container {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* ---- slider ---- */
.detail-slider {
	position: relative;
	width: min(96vw, 1400px);
	height: min(92vh, 900px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.detail-page {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.45s ease;
}

.detail-page.active {
	opacity: 1;
	pointer-events: auto;
}

/* ---- página intro ---- */
.detail-page--intro {
	flex-direction: column;
	text-align: center;
	padding: 2rem;
}

.detail-page--intro .detail-eyebrow {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: clamp(0.6rem, 0.9vw, 0.75rem);
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: #7d090c;   /* mismo rojo que el h3 de las tarjetas exteriores */
	margin: 0 0 1.2rem;
}

.detail-page--intro h2 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: clamp(1.8rem, 2.6vw, 1.8rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 0.5rem;
	line-height: 1;
}

.detail-page--intro h3 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: clamp(0.6rem, 1vw, 0.7rem);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	opacity: 0.7;
	margin: 0 0 2.5rem;
}

.detail-page--intro p {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: clamp(0.8rem, 0.9vw, 0.7rem);
	letter-spacing: 0.1px;
	line-height: 1.75;
	opacity: 0.85;
	max-width: 400px;
	margin: 0 auto;
}

/* ---- páginas de imagen ---- */
.detail-page--image {
	padding: 2rem;
}

.detail-page--image img {
	max-width: 80%;
	max-height: 80%;
	object-fit: contain;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
}

/* ---- flechas laterales ----
   Mismo estilo que #close-section-btn del index (outline blanco, sin fondo).
   El SVG chevron se inyecta desde el HTML; el <span> legacy para caracteres
   queda invisible para no romper HTMLs viejos. */
.detail-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.55);
	color: #fff;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.2s ease, opacity 0.2s ease;
	z-index: 5;
	user-select: none;
	padding: 0;
}

.detail-nav:hover:not(:disabled) {
	border-color: #fff;
}

.detail-nav:disabled {
	opacity: 0.15;
	cursor: default;
}

.detail-nav--prev { left: 24px; }
.detail-nav--next { right: 24px; }

/* oculta el <span> de caracteres (‹ ›) si todavía queda en HTMLs antiguos */
.detail-nav span { display: none; }

/* ---- botón BACK ----
   Reemplaza al ✕ del overlay. Mismo estilo que .section-button (outline rojo,
   hover fill) pero en tamaño fijo — los cqw/cqh no aplican fuera del card 3D. */
.detail-back-btn {
	position: absolute;
	bottom: 66px;
	left: 50%;
	transform: translateX(-50%);
	padding: 0.4rem 1.3rem;
	background: transparent;
	border: 1px solid #7d090c;
	color: #cfcfcf;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 0.55rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s, color 0.25s, border-color 0.25s;
	z-index: 6;
	user-select: none;
}
.detail-back-btn:hover {
	background: #7d090c;
	color: #fff;
}

/* ---- contador superior ---- */
.detail-counter {
	position: absolute;
	top: 32px;   /* arriba del arte, libre del BACK inferior */
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255,255,255,0.4);
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.3em;
	z-index: 5;
	user-select: none;
}

/* ---- modificador: vista de una sola página (contacto) ---- */
.detail-single .detail-nav,
.detail-single .detail-counter { display: none; }

/* ---- página contacto (formulario) ---- */
.detail-page--contact {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 1.5rem;
	max-width: 380px;
	margin: 0 auto;
	gap: 0.8rem;
}

.detail-page--contact h2 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: clamp(1.3rem, 2.4vw, 1.7rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0;
	line-height: 1;
	color: #fff;
}

.detail-form-intro {
	font-family: 'Roboto', 'Montserrat', sans-serif;
	font-weight: 300;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	opacity: 0.7;
	color: #cfcfcf;
	margin: 0 0 0.3rem;
	text-align: center;
}

.detail-form {
	width: 100%;
	max-width: 320px;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.detail-form label {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 0.55rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.55);
}

.detail-form input,
.detail-form textarea {
	background: transparent;
	border: 1px solid #7d090c;
	color: #cfcfcf;
	font-family: 'Roboto', 'Montserrat', sans-serif;
	font-weight: 300;
	font-size: 0.8rem;
	padding: 0.45rem 0.7rem;
	border-radius: 2px;
	outline: none;
	transition: border-color 0.2s ease, background 0.2s ease;
	resize: vertical;
	min-height: 0;
}

.detail-form textarea {
	line-height: 1.4;
}

.detail-form input:focus,
.detail-form textarea:focus {
	border-color: #b41014;
	background: rgba(125, 9, 12, 0.08);
}

.detail-form-submit {
	margin-top: 0.4rem;
	background: transparent;
	border: 1px solid #7d090c;
	color: #cfcfcf;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 0.6rem;
	letter-spacing: 0.22em;
	padding: 0.55rem 1.6rem;
	border-radius: 2px;
	cursor: pointer;
	transition: background 0.25s, color 0.25s, border-color 0.25s;
	align-self: center;
	text-transform: uppercase;
}

.detail-form-submit:hover {
	background: #7d090c;
	color: #fff;
}

.detail-form-submit:disabled {
	opacity: 0.4;
	cursor: default;
}

.detail-form-status {
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	opacity: 0.8;
	min-height: 1.2em;
	margin: 0;
}

.detail-form-status.ok  { color: #8aff8a; }
.detail-form-status.err { color: #ff8a8a; }

/* ---- responsive (placeholder básico, lo ajustamos en mobile) ---- */
@media (max-width: 640px) {
	.detail-nav { width: 40px; height: 40px; }
	.detail-nav--prev { left: 8px; }
	.detail-nav--next { right: 8px; }
	.detail-slider { width: 100vw; height: 100vh; }
	.detail-page--contact { padding: 1rem; }
	/* texto del intro: padding lateral que libere las flechas (40+8+gap ≈ 56px) */
	.detail-page--intro { padding: 2rem 3.5rem; }
	.detail-page--intro p { max-width: 100%; }
	/* imágenes verticales (9:16, 4:5) — cap absoluto al 60% del alto del
	   viewport para que NUNCA tapen el botón BACK ni el contador */
	.detail-page--image {
		padding: 1rem;
	}
	.detail-page--image img {
		max-width: 100%;
		max-height: 50vh;
	}
}

/* ====================================================================
   MODO SCROLL — single column, fluye hacia abajo (estilo página web).
   Activado con .detail-container--scroll. Reemplaza la paginación por
   scroll vertical. Sin flechas, sin contador, solo intro + imágenes
   stackeadas y el back button como icon flotante bottom-center.
==================================================================== */
.detail-container--scroll {
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	overflow-y: auto;
	overflow-x: hidden;
	padding-bottom: 120px;             /* espacio para que el último elemento no choque con el back btn */
	-webkit-overflow-scrolling: touch;
}

/* las pages dejan de ser slides absolute y fluyen como bloques verticales */
.detail-container--scroll .detail-page {
	position: static;
	inset: auto;
	opacity: 1;
	pointer-events: auto;
	transition: none;
	width: 100%;
	max-width: 900px;
	height: auto;
}

/* intro: tipo "interior de página" — texto arriba con padding razonable, NO
   ocupa pantalla completa. Así las imágenes aparecen casi sin scrollear. */
.detail-container--scroll .detail-page--intro {
	flex-direction: column;
	justify-content: flex-start;
	text-align: center;
	padding: 5rem 1.5rem 2rem;
}

/* tipografía del intro en scroll mode — más chica que el modo paginado */
.detail-container--scroll .detail-page--intro h2 {
	font-size: clamp(1.3rem, 2vw, 1.4rem);
}
.detail-container--scroll .detail-page--intro h3 {
	font-size: clamp(0.5rem, 0.85vw, 0.6rem);
	margin: 0 0 1.8rem;
}
.detail-container--scroll .detail-page--intro p,
.detail-container--scroll .detail-page--note p {
	letter-spacing: normal;
	color: #888;
	opacity: 1;
}

/* divisor rojo decorativo después del intro */
.detail-container--scroll .detail-page--intro::after {
	content: '';
	display: block;
	width: 50px;
	height: 1px;
	background: #7d090c;
	margin: 2rem auto 0;
}

/* imágenes: una abajo de otra, centradas, ~70% del ancho. Caption opcional debajo. */
.detail-container--scroll .detail-page--image {
	padding: 0.75rem 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.6rem;
}

/* caption debajo de cada imagen (texto descriptivo: Home, Awards, etc.) */
.detail-caption {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 0.55rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #888;
	text-align: center;
	margin: 0;
	display: block;
}
.detail-container--scroll .detail-page--image img,
.detail-container--scroll .detail-page--image > video {
	max-width: 70%;
	max-height: 60vh;
	width: auto;
	height: auto;
	margin: 0 auto;
	display: block;
	object-fit: contain;
}

/* modifier para imágenes verticales que necesitan más alto/ancho */
.detail-container--scroll .detail-page--image-large img,
.detail-container--scroll .detail-page--image-large > video {
	max-width: 90%;
	max-height: 80vh;
}

/* wrapper alrededor del <video> — el size constraint vive ACÁ (no en el
   video) para que el .video-unmute-btn con position:absolute se ancle al
   borde derecho del video y no al borde del .detail-page--image. */
.detail-container--scroll .detail-page--image .video-wrap {
	position: relative;
	display: block;
	width: fit-content;
	max-width: 70%;
	max-height: 60vh;
	margin: 0 auto;
	line-height: 0;
}
.detail-container--scroll .detail-page--image-large .video-wrap {
	max-width: 90%;
	max-height: 80vh;
}
.video-wrap video {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: inherit;
	object-fit: contain;
	/* stroke gris casi negro: separa el video del fondo del overlay */
	border: 1px solid #2a2a2a;
}

/* página con grid 2x2 de imágenes (mismo ancho que el video) */
.detail-container--scroll .detail-page--grid {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.75rem 1.5rem;
	gap: 0.6rem;
}
.detail-container--scroll .detail-page--grid .grid-2x2,
.detail-container--scroll .detail-page--grid .grid-1x3 {
	display: grid;
	gap: 4px;
	width: 70%;
	max-width: 70%;
	margin: 0 auto;
}
.detail-container--scroll .detail-page--grid .grid-2x2 {
	grid-template-columns: 1fr 1fr;
}
.detail-container--scroll .detail-page--grid .grid-1x3 {
	grid-template-columns: 1fr 1fr 1fr;
}
.detail-container--scroll .detail-page--grid .grid-2x2 img,
.detail-container--scroll .detail-page--grid .grid-1x3 img {
	width: 100%;
	height: auto;
	display: block;
}

/* video dentro de un grid: el .video-wrap (creado por JS) debe llenar la celda
   y descartar los max-width/max-height heredados del modo fuera-de-grid.
   position:relative es CRÍTICO para que el .video-unmute-btn (absolute) se
   ancle al video y no al contenedor del detail. */
.detail-container--scroll .detail-page--grid .video-wrap {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	max-height: none;
	margin: 0;
	line-height: 0;
}
.detail-container--scroll .detail-page--grid .video-wrap video {
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: none;
}

/* CTA inline dentro del intro de un detail (ej: "VIEW" para llevar al
   proyecto live). Mismo lenguaje visual que .section-button del menú. */
.detail-container--scroll .detail-page--intro .detail-action {
	display: inline-block;
	margin-top: 1.2rem;
	padding: 0.55rem 1.6rem;
	border: 1px solid #7d090c;
	background: transparent;
	color: #cfcfcf;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 0.6rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.detail-container--scroll .detail-page--intro .detail-action:hover {
	background: #7d090c;
	color: #fff;
}

/* nota inline: párrafo solo, sin h2/h3 ni divider rojo */
.detail-container--scroll .detail-page--note {
	flex-direction: column;
	justify-content: flex-start;
	text-align: center;
	padding: 2rem 1.5rem;
}
.detail-container--scroll .detail-page--note p {
	font-family: 'Roboto', 'Montserrat', sans-serif;
	font-weight: 300;
	font-size: clamp(0.8rem, 0.9vw, 0.7rem);
	line-height: 1.75;
	max-width: 400px;
	margin: 0 auto;
}

/* botón unmute superpuesto sobre el video. Mismo lenguaje visual que
   #close-section-btn (círculo blur con borde blanco). Se inyecta vía JS,
   se quita al click. */
.video-unmute-btn {
	position: absolute;
	bottom: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	padding: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.55);
	color: #fff;
	border-radius: 50%;
	cursor: pointer;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.2s, background 0.2s, opacity 0.3s;
}
.video-unmute-btn:hover {
	border-color: #fff;
	background: rgba(0, 0, 0, 0.65);
}
.video-unmute-btn svg { display: block; }

.detail-container--scroll .detail-nav,
.detail-container--scroll .detail-counter { display: none; }
.detail-container--scroll .detail-slider { display: contents; }

/* responsive scroll mode */
@media (max-width: 640px) {
	.detail-container--scroll .detail-page--intro {
		padding: 3rem 1rem 1.5rem;
	}
	.detail-container--scroll .detail-page--image {
		padding: 0.5rem 1rem;
	}
	.detail-container--scroll .detail-page--image img,
	.detail-container--scroll .detail-page--image > video {
		max-width: 92%;     /* 70% es muy estrecho en mobile, subimos a 92% */
		max-height: 60vh;
	}
	/* video-wrap: misma anchura que las imágenes en mobile */
	.detail-container--scroll .detail-page--image .video-wrap {
		max-width: 92%;
		max-height: 60vh;
	}
	/* grid 2x2 → columna única en mobile, ancho casi pleno */
	.detail-container--scroll .detail-page--grid {
		padding: 0.5rem 1rem;
	}
	.detail-container--scroll .detail-page--grid .grid-2x2,
	.detail-container--scroll .detail-page--grid .grid-1x3 {
		grid-template-columns: 1fr;
		width: 92%;
		max-width: 92%;
	}
}

/* ====================================================================
   BACK BUTTON estilo icon (modifier .detail-back-btn--icon).
   Mismo lenguaje visual que #close-section-btn: círculo, blur atrás,
   bottom-center, chevron up. Reemplaza al BACK textual en scroll mode.
==================================================================== */
.detail-back-btn--icon {
	position: fixed;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 40px;
	padding: 0;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.55);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 100;
	transition: border-color 0.2s, background 0.2s;
	font-size: 0;   /* esconde cualquier texto residual ("BACK") por si quedara */
	letter-spacing: 0;
}
.detail-back-btn--icon:hover {
	background: rgba(0, 0, 0, 0.55);
	border-color: #fff;
}
.detail-back-btn--icon svg { display: block; }