/*================================================ 
BUNDLE DE ESTILOS DE CORRECCIONES - LATENTE
Combinación de fixes de opacidad, video, móvil y accesibilidad
Versión: 20260302003
================================================*/

/*================================================ 
Fix de Opacidad para Fancybox - Latente
================================================*/

/* Corregir problemas de opacidad en galería */
.fancybox-overlay {
  opacity: 1 !important;
  background: rgba(0, 0, 0, 0.8) !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Fix para iOS y Safari */
@supports (-webkit-touch-callout: none) {
  .fancybox-overlay {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: opacity;
  }
  
  .fancybox-inner {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* Mejorar transiciones de opacidad */
.fancybox-overlay,
.fancybox-inner {
  transition: opacity 0.3s ease-in-out;
  -webkit-transition: opacity 0.3s ease-in-out;
}

/* Fix específico para galería de imágenes */
.portfolio-box {
  opacity: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.portfolio-box:hover {
  opacity: 1;
}

/* Corregir problemas en dispositivos móviles */
@media (max-width: 768px) {
  .fancybox-overlay {
    opacity: 1 !important;
    -webkit-transform: none !important;
    transform: none !important;
  }
  
  .fancybox-effects-d {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Asegurar visibilidad en todos los navegadores */
.fancybox-effects-d img {
  opacity: 1;
  visibility: visible;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/*================================================ 
VIDEO FIXES
================================================*/

/* Estilos corregidos para video en Fancybox */
/* Mantendrá el aspecto original del video sin barras */

.fancybox-inner video {
	max-width: 90vw !important;
	max-height: 90vh !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 auto !important;
}

.fancybox-wrap {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	/* El overlay tiene z-index:18010 — el wrap debe estar por encima */
	z-index: 18020 !important;
}

.fancybox-skin {
	background: rgba(0,0,0,0.9) !important;
	padding: 0 !important;
}

.fancybox-outer {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Ocultar scrollbars */
.fancybox-lock {
	overflow: hidden !important;
}

/* MEJORAS PARA REPRODUCCIÓN DE VIDEOS EN MÓVIL */
/* ============================================= */

/* Estilos específicos para dispositivos móviles - Videos de galería */
@media (max-width: 768px) {
	/* Mejorar la experiencia de video en Fancybox para móvil */
	.fancybox-inner video {
		max-width: 100vw !important;
		max-height: 100vh !important;
		width: 100% !important;
		height: auto !important;
		object-fit: contain !important;
	}
	
	.fancybox-skin {
		background: rgba(0,0,0,1) !important;
		padding: 0 !important;
	}
	
	/* Optimización para iOS Safari */
	.fancybox-inner video {
		-webkit-transform: translateZ(0) !important;
		transform: translateZ(0) !important;
		backface-visibility: hidden !important;
	}
	
	/* Controles de video mejorados para móvil */
	.fancybox-inner video::-webkit-media-controls {
		bottom: 10px !important;
	}
	
	.fancybox-inner video::-webkit-media-controls-panel {
		background: rgba(0,0,0,0.8) !important;
	}
}

/* Estilos específicos para iPhone y dispositivos iOS */
@supports (-webkit-touch-callout: none) {
	@media (max-width: 768px) {
		.fancybox-inner video {
			/* Forzar que el video no entre en fullscreen automáticamente */
			-webkit-video-presentationmode: inline !important;
		}
		
		/* Mejorar los controles táctiles en iOS */
		.fancybox-wrap {
			-webkit-tap-highlight-color: transparent !important;
			-webkit-touch-callout: none !important;
		}
	}
}

/* Estilos específicos para dispositivos Android */
@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 1) {
	.fancybox-inner video {
		/* Optimizaciones específicas para Android */
		will-change: transform !important;
		-webkit-transform: translateZ(0) !important;
		transform: translateZ(0) !important;
	}
}

/* Corrección para video de fondo en iOS/iPhone - POSICIÓN NATURAL */
#home #video_background,
video#video_background {
	-webkit-playsinline: true !important;
	-webkit-transforms: translateZ(0) !important;
	backface-visibility: hidden !important;
	will-change: transform !important;
	/* Posicionamiento que se mueve con el scroll */
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) scale(1.4) !important;
	/* Tamaño responsive que cubre toda la ventana */
	width: 100vw !important;
	height: 100vh !important;
	/* Centrado perfecto del contenido */
	object-fit: cover !important;
	pointer-events: none !important;
	border: none !important;
	opacity: 1 !important;
	object-position: center center !important;
	z-index: -1000 !important;
	bottom: auto !important; /* Override del layout.css */
	/* DESACTIVAR COMPLETAMENTE CUALQUIER PARALLAX pero permitir movimiento normal */
	transform-style: flat !important;
	perspective: none !important;
	transform-origin: center center !important;
	/* Permitir movimiento normal con scroll */
	will-change: auto !important;
}

/* Contenedor del video que se mueve con el scroll */
#home {
	position: relative !important;
	overflow: hidden !important;
	width: 100vw !important;
	height: 100vh !important;
	/* Desactivar cualquier parallax en el contenedor pero permitir movimiento normal */
	transform: none !important;
	transform-style: flat !important;
	perspective: none !important;
}

/* Prevenir pantalla completa en dispositivos móviles */
video::-webkit-media-controls-start-playback-button {
	display: none !important;
}

video::-webkit-media-controls-fullscreen-button {
	display: none !important;
}

/* ESTILOS MEJORADOS PARA VIDEOS EN MÓVIL - THUMBNAILS Y OVERLAY */
/* ============================================================= */

@media (max-width: 768px) {
	/* Mejorar la interacción táctil en thumbnails de video */
	.video-thumbnail-rect {
		-webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
		-webkit-touch-callout: none !important;
		touch-action: manipulation !important;
		position: relative !important;
		cursor: pointer !important;
		pointer-events: auto !important; /* PERMITIR clicks en el thumbnail EN MÓVIL */
		z-index: 10 !important;
	}
	
	.video-overlay-rect {
		-webkit-tap-highlight-color: transparent !important;
		touch-action: manipulation !important;
		transition: all 0.3s ease !important;
		pointer-events: none !important; /* Desactivar clicks en el overlay para que pasen al thumbnail */
	}
	
	/* El botón de play debe ser no clickeable para que el click pase al contenedor */
	.video-play-btn-rect {
		pointer-events: none !important; /* El click lo maneja el thumbnail contenedor */
		z-index: 5 !important;
	}
	
	/* Feedback visual en móvil */
	.video-thumbnail-rect:active {
		opacity: 0.8 !important;
		transform: scale(0.98) !important;
		transition: all 0.1s ease !important;
	}
	
	/* Mejorar visibilidad del botón de play en móvil */
	.video-play-btn-rect,
	.fancybox-button {
		font-size: 14px !important;
		width: 40px !important;
		height: 40px !important;
		line-height: 1 !important;
		background: rgba(0,0,0,0.8) !important;
		color: white !important;
		border: 2px solid white !important;
		border-radius: 50% !important;
		-webkit-tap-highlight-color: transparent !important;
		touch-action: manipulation !important;
		cursor: pointer !important;
		transition: all 0.3s ease !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
		padding: 0 !important;
		margin-left: 1px !important; /* Centrar visualmente el ícono de play */
	}
	
	.video-play-btn-rect:active,
	.fancybox-button:active,
	.video-play-btn-rect:hover,
	.fancybox-button:hover {
		transform: scale(0.95) !important;
		background: rgba(0,0,0,1) !important;
		border-color: rgba(255,255,255,0.9) !important;
		box-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
	}
	
	/* Overlay personalizado para mobile video fullscreen */
	#mobile-video-fullscreen {
		-webkit-tap-highlight-color: transparent !important;
		background: #000 !important;
	}
	
	#mobile-video-fullscreen video {
		/* Fullscreen nativo permitido en móvil */
		width: 100% !important;
		height: 100% !important;
		object-fit: contain !important;
		background: #000 !important;
	}
	
	/* Botón de cerrar mejorado para móvil */
	#mobile-video-fullscreen button {
		-webkit-tap-highlight-color: transparent !important;
		touch-action: manipulation !important;
		font-size: 16px !important;
		font-weight: bold !important;
		width: 36px !important;
		height: 36px !important;
		background: rgba(0,0,0,0.8) !important;
		color: white !important;
		border: 2px solid white !important;
		border-radius: 50% !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		position: absolute !important;
		top: 20px !important;
		right: 20px !important;
		z-index: 10000 !important;
		cursor: pointer !important;
		transition: all 0.3s ease !important;
		line-height: 1 !important;
		padding: 0 !important;
		box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
	}
	
	#mobile-video-fullscreen button:active,
	#mobile-video-fullscreen button:hover {
		background: rgba(0,0,0,1) !important;
		border-color: rgba(255,255,255,0.9) !important;
		transform: scale(0.95) !important;
		box-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
	}
	
	/* Ocultar mensajes de error de video en móvil */
	video::-webkit-media-controls-overlay-enclosure {
		display: none !important;
	}
	
	video::-webkit-media-controls-enclosure {
		background: transparent !important;
	}
	
	/* Prevenir visualización de errores durante limpieza */
	.fancybox-error,
	.video-error {
		display: none !important;
	}
}

/* Asegurar que el video se mueva naturalmente en todos los dispositivos */
@media (max-width: 768px) {
	#home #video_background,
	video#video_background {
		/* Posición que se mueve con el scroll en móviles */
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		min-width: 100vw !important;
		min-height: 100vh !important;
		object-position: center center !important;
		-webkit-playsinline: true !important;
		/* ANULAR PARALLAX PERO PERMITIR MOVIMIENTO NORMAL */
		transform-style: flat !important;
		perspective: none !important;
		will-change: auto !important;
	}
	
	#home {
		width: 100vw !important;
		height: 100vh !important;
		transform: none !important;
		transform-style: flat !important;
		perspective: none !important;
	}
}

/* Media query para pantallas muy pequeñas - MOVIMIENTO NATURAL */
@media (max-width: 480px) {
	#home #video_background,
	video#video_background {
		/* Asegurar cobertura completa con movimiento natural en pantallas pequeñas */
		position: absolute !important;
		transform: translate(-50%, -50%) !important;
		transform-style: flat !important;
		perspective: none !important;
	}
}

/* Media query para pantallas ultra anchas - MOVIMIENTO NATURAL */
@media (min-aspect-ratio: 16/9) {
	#home #video_background,
	video#video_background {
		width: 100vw !important;
		height: auto !important;
		min-height: 100vh !important;
		position: absolute !important;
		transform: translate(-50%, -50%) !important;
		transform-style: flat !important;
		perspective: none !important;
	}
}

/* Media query para pantallas altas - MOVIMIENTO NATURAL */
@media (max-aspect-ratio: 16/9) {
	#home #video_background,
	video#video_background {
		width: auto !important;
		height: 100vh !important;
		min-width: 100vw !important;
		position: absolute !important;
		transform: translate(-50%, -50%) !important;
		transform-style: flat !important;
		perspective: none !important;
	}
}

/* Fix para posicion de X en videos de mobile */
@media (max-width: 768px) {
    .universal-video-overlay.mobile button {
        top: 80px !important;
        right: 15px !important;
        width: 44px !important; /* Aumentar tamaño para que sea más fácil de tocar */
        height: 44px !important;
        background: rgba(0,0,0,0.6) !important;
        border-radius: 50% !important;
        box-sizing: border-box !important;
        line-height: 44px !important; /* Centrar la X verticalmente */
        font-size: 30px !important; /* Aumentar tamaño de la X */
    }
}

/*================================================ 
MOBILE FIXES
================================================*/

/* Mobile fixes and optimizations */
@media (max-device-width: 768px) {
	body, html {
		overflow-y: auto !important;
		overflow-x: hidden !important;
		-webkit-overflow-scrolling: touch !important;
		touch-action: auto !important;
		position: relative !important;
		height: auto !important;
	}
	#about {
		overflow: visible !important;
		touch-action: auto !important;
		position: relative !important;
		height: auto !important;
	}
	.video-sections {
		overflow: visible !important;
		touch-action: auto !important;
		position: relative !important;
		height: auto !important;
	}
	.video-section-3 {
		overflow: visible !important;
		touch-action: auto !important;
		position: relative !important;
		height: auto !important; 
		min-height: auto !important;
		display: none !important; 
	}
	
	@media (max-width: 768px) {
		#map {
			display: none !important;
		}
	}
	
	.no-scroll, .scroll-disabled {
		overflow: auto !important;
	}
	
	.portfolio-wrap {
		-webkit-transform: translateZ(0) !important;
		transform: translateZ(0) !important;
	}
	.portfolio-box a {
		-webkit-tap-highlight-color: transparent !important;
		-webkit-touch-callout: none !important;
		display: block !important;
		position: relative !important;
		cursor: pointer !important;
	}
	.portfolio-box img {
		-webkit-transform: translateZ(0) !important;
		transform: translateZ(0) !important;
		pointer-events: none !important;
		-webkit-user-drag: none !important;
	}
	
	.fancybox-effects-d {
		touch-action: manipulation !important;
		-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
		cursor: pointer !important;
	}
	
	@supports (-webkit-touch-callout: none) {
		.portfolio-box {
			cursor: pointer !important;
		}
		.portfolio-box a {
			display: block !important;
			width: 100% !important;
			height: 100% !important;
			position: relative !important;
		}
		.portfolio-box img {
			pointer-events: none !important;
			-webkit-user-drag: none !important;
		}
	}
}

/* Touch target improvements */
.slimmenu li a {
	min-height: 44px;
	display: flex;
	align-items: center;
	padding: 12px 15px;
}

@media (max-width: 768px) {
	.slimmenu li a {
		min-height: 48px;
		padding: 14px 20px;
		font-size: 16px;
	}
	
	.scroll-btn {
		min-width: 50px !important;
		min-height: 50px !important;
		width: 50px !important;
		height: 50px !important;
	}
}

/* Scroll button animation */
@keyframes pulse {
	0%, 100% {
		transform: translateY(0);
		opacity: 1;
	}
	50% {
		transform: translateY(10px);
		opacity: 0.6;
	}
}

.scroll-btn {
	animation: pulse 2s ease-in-out infinite !important;
}

/* Scroll indicator - solo visible en el home */
.scroll-indicator {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3900;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
}

#home .scroll-indicator {
	opacity: 1;
	visibility: visible;
}

body._loader .scroll-indicator {
	display: none;
}

.scroll-arrow {
	width: 0;
	height: 0;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-top: 12px solid rgba(255, 255, 255, 0.6);
	animation: scrollDown 2s ease-in-out infinite;
}

.scroll-arrow:nth-child(1) {
	animation-delay: 0s;
}

.scroll-arrow:nth-child(2) {
	animation-delay: 0.2s;
}

.scroll-arrow:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes scrollDown {
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}
	50% {
		opacity: 1;
		transform: translateY(0);
	}
	100% {
		opacity: 0;
		transform: translateY(10px);
	}
}

@media (max-width: 768px) {
	.scroll-indicator {
		bottom: 20px;
	}
	
	.scroll-arrow {
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 10px solid rgba(255, 255, 255, 0.6);
	}
}

/* Language selector mobile styles */
@media (max-width: 768px) {
	.lang-menu-item {
		width: 100% !important;
		text-align: center !important;
		margin-top: 10px !important;
	}
	#language-selector-menu {
		margin-left: 0 !important;
		justify-content: center !important;
	}
	#lang-options {
		right: 50% !important;
		transform: translateX(50%) !important;
	}
}

/* Video poster optimization */
#video_background {
	width: 100vw !important;
	height: 177.78vw !important;
	min-height: 100vh !important;
	min-width: 56.25vh !important;
	object-fit: cover !important;
	transform: translate(-50%, -50%) !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	pointer-events: none !important;
}

/*================================================ 
ACCESSIBILITY IMPROVEMENTS
================================================*/

/* Screen reader only content */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Focus visible improvements */
/* Foco con mouse: sin rectángulo visible */
.scroll:focus,
.send_message:focus,
input:focus,
textarea:focus,
button:focus,
a:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Foco con teclado: indicador sutil dorado (accesibilidad) */
.scroll:focus-visible,
.send_message:focus-visible,
input:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(201, 168, 76, 0.7) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Skip navigation for screen readers */
.skip-nav {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  z-index: 10001;
  border-radius: 3px;
}

.skip-nav:focus {
  top: 6px;
}

/* High contrast mode improvements */
@media (prefers-contrast: high) {
  .header-shadow-text {
    opacity: 0.8 !important;
  }
  
  .portfolio-box .mask {
    background: rgba(0, 0, 0, 0.9) !important;
  }
  
  .video-overlay-rect {
    background: rgba(0, 0, 0, 0.9) !important;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  [data-scrollreveal] {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Color scheme preferences */
@media (prefers-color-scheme: dark) {
  /* Mantener el diseño original, solo mejoras menores */
  input, textarea {
    color-scheme: dark;
  }
}

/* Form accessibility improvements */
.error[role="alert"] {
  font-weight: bold;
  color: #d32f2f;
}

.error[aria-live] {
  display: none;
}

.error[aria-live].show {
  display: block;
}

/* Button and interactive element improvements */
button, 
.portfolio-box a,
.video-thumbnail-rect,
.fancybox-effects-d {
  cursor: pointer;
  user-select: none;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Touch target size for mobile */
@media (max-width: 768px) {
  .scroll-btn,
  .video-play-btn-rect,
  .portfolio-box a,
  button,
  .slimmenu a {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Keyboard navigation improvements */
.slimmenu a:focus,
.portfolio-box a:focus {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

/* Loading states for better UX */
.loading {
  position: relative;
  pointer-events: none;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Improve contrast for text over images */
.portfolio-box h4,
.video-info h4 {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* Fix for iOS touch targets */
@supports (-webkit-touch-callout: none) {
  .portfolio-box a,
  .fancybox-effects-d {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
}

/*================================================
FANCYBOX TITLE – caption debajo de la imagen
================================================*/

/* Fancybox title: inyectado vía JS con inline styles */