/* =========================================================================
   Refinamientos visuales — auditoría 2026-09-06
   -------------------------------------------------------------------------
   Capa que se carga la última, sobre el CSS original del tema. No sustituye
   nada del tema: solo ajusta acabados. Para revertirlo basta con borrar este
   fichero (el sitio vuelve al aspecto anterior sin más cambios).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Sobreimpresión de las miniaturas
   El tema teñía las fotos de rojo plano (#ff0000 al 70 %) al pasar el ratón:
   tapaba la imagen justo cuando el visitante quiere verla. Se sustituye por
   un degradado oscuro que deja respirar la fotografía y mantiene el texto
   perfectamente legible. El rojo del tema se conserva como acento fino.
   ---------------------------------------------------------------------- */
.one_third.gallery3 .mask,
.one_half.gallery2 .mask,
.one_fourth.gallery4 .mask,
.one_third .mask,
.one_half .mask,
.one_fourth .mask {
	background: linear-gradient(to top,
		rgba(8, 8, 10, 0.88) 0%,
		rgba(8, 8, 10, 0.55) 45%,
		rgba(8, 8, 10, 0.15) 100%) !important;
	background-color: transparent !important;
	transition: opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

/* Línea de acento inferior: recupera el rojo del tema sin tapar la foto. */
.one_third.gallery3 .mask::after,
.one_half.gallery2 .mask::after,
.one_fourth.gallery4 .mask::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: #ff0000;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s;
}
.one_third.gallery3:hover .mask::after,
.one_half.gallery2:hover .mask::after,
.one_fourth.gallery4:hover .mask::after {
	transform: scaleX(1);
}

/* -------------------------------------------------------------------------
   2. Zoom de la imagen
   Pasaba de 1 a 1.2 (un 20 %): a ese tamaño una miniatura de 310 px se ve
   claramente pixelada. Un 6 % da la misma sensación de profundidad sin
   degradar la imagen, y con una curva de aceleración más natural.
   ---------------------------------------------------------------------- */
.one_third.gallery3 .one_third_img,
.one_half.gallery2 .one_half_img,
.one_fourth.gallery4 .one_fourth_img,
.one_third_img, .one_half_img, .one_fourth_img, .portfolio_img {
	transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
	            filter     0.45s ease !important;
	will-change: transform;
	backface-visibility: hidden;
}
.one_third.gallery3:hover .one_third_img,
.one_half.gallery2:hover .one_half_img,
.one_fourth.gallery4:hover .one_fourth_img {
	transform: scale(1.06) !important;
}

/* Miniaturas de las galerías tipo mosaico. */
.portfolio_img { transition: transform 0.6s cubic-bezier(0.22,0.61,0.36,1), filter 0.4s ease; }
a:hover > .portfolio_img,
.gallery_wrapper a:hover .portfolio_img { transform: scale(1.03); filter: brightness(1.06); }

/* -------------------------------------------------------------------------
   3. Tipografía de los rótulos
   Títulos con más aire entre letras y mejor suavizado: en mayúsculas y sobre
   fondo oscuro el texto se lee bastante mejor.
   ---------------------------------------------------------------------- */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.one_third.gallery3 h5,
.one_half.gallery2 h5,
.one_fourth.gallery4 h5,
.mask h5 {
	letter-spacing: 0.12em !important;
	font-weight: 600 !important;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

h1.cufon, h2.cufon, .page_title, #page_caption h1 {
	letter-spacing: 0.06em;
}

/* Botón "View Project": contorno fino en vez de bloque macizo. */
.mask .button.white {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.75) !important;
	letter-spacing: 0.14em;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}
.mask .button.white:hover {
	background: #ffffff !important;
	border-color: #ffffff !important;
	color: #111 !important;
}

/* -------------------------------------------------------------------------
   4. Navegación
   ---------------------------------------------------------------------- */
#main_menu > li > a,
.nav > li > a {
	transition: color 0.25s ease, opacity 0.25s ease;
}

.social_wrapper ul li a img {
	opacity: 0.55;
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.social_wrapper ul li a:hover img {
	opacity: 1;
	transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
   5. Accesibilidad
   El tema no marcaba el foco del teclado: quien navega con tabulador no veía
   dónde estaba. :focus-visible solo se muestra con teclado, nunca al hacer
   clic con el ratón, así que no altera el aspecto para el resto.
   ---------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid #ff2b2b;
	outline-offset: 3px;
	border-radius: 2px;
}

/* Área táctil mínima cómoda en móvil para los iconos sociales. */
@media (max-width: 767px) {
	.social_wrapper ul li a {
		display: inline-block;
		padding: 10px;
	}
}

/* -------------------------------------------------------------------------
   6. Respeto por las preferencias de movimiento
   Quien tenga activado "reducir movimiento" en su sistema (por mareos o
   fotosensibilidad) no recibe animaciones.
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}