/* Mejoras de accesibilidad (WCAG 2.1 AA) para vallejo-ros.com - 15-09-2026
   Se carga desde functions/accesibilidad.php, después de todo el CSS del tema.
   Borrar este archivo desactiva solo los estilos (ver RESTAURAR.md). */

/* ---------- Utilidades ---------- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	white-space: nowrap;
	word-wrap: normal !important;
}

/* ---------- Saltar al contenido (2.4.1) ---------- */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: #000;
	color: #fff !important;
	padding: 12px 18px;
	font: 700 16px/1.2 "PT Serif", Georgia, serif;
	text-decoration: underline;
}
.skip-link:focus { left: 16px; top: 16px; }
#contenido { display: block; }
#contenido:focus { outline: none !important; box-shadow: none !important; }

/* ---------- Foco visible (2.4.7): anillo negro con separación blanca, se ve sobre foto y sobre blanco ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
	outline: 3px solid #000 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 5px #fff !important;
}

/* ---------- Logo (antes dentro de un h1): mismo aspecto ---------- */
.inner-header .site-logo {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 33px;
	line-height: 33px;
	font-weight: 700;
	letter-spacing: -1px;
	color: rgb(35, 35, 35);
}
@media handheld, only screen and (max-width: 720px) {
	.inner-header .site-logo { text-align: left; width: 50px; padding: 15px 0; }
}

/* ---------- Título de página (antes h2, ahora h1): mismo aspecto ----------
   El color por página lo sigue poniendo functions/styles.php (h1.page-title);
   :where() deja estas reglas por debajo de esas. */
.section-title h1 {
	width: 75%;
	font-size: 43px;
	line-height: 51px;
	text-decoration: none;
	text-transform: uppercase;
	margin: 0 auto;
	padding: 0 0 5px 0;
	font-weight: 900;
	letter-spacing: -1px;
}
:where(.section-title) h1 { color: #fff; }
.section-title h1:after {
	content: '';
	display: block;
	position: relative;
	width: 45px;
	height: 5px;
	left: 50%;
	margin: 21px 0 0 -22.5px;
}
:where(.section-title) h1:after { background: #fff; }

/* Título de ficha de portfolio (antes h3), mismo aspecto; el color por ficha lo pone styles.php */
.info-box h1.project-title {
	width: 75%;
	font-size: 43px;
	line-height: 51px;
	text-decoration: none;
	text-transform: uppercase;
	margin: 0 auto;
	padding: 0 0 5px 0;
	font-weight: 900;
	letter-spacing: -1px;
}
:where(.info-box) h1.project-title { color: #fff; }
.info-box h1.project-title:after {
	content: '';
	display: block;
	position: relative;
	width: 45px;
	height: 5px;
	left: 50%;
	margin: 21px 0 0 -22.5px;
}
:where(.info-box) h1.project-title:after { background: #fff; }
.content-info-box .info-box h1.project-title {
	width: 100%;
	font-size: 42px;
	line-height: 47px;
	text-align: center;
	margin: 0;
}
.content-info-box .info-box h1.project-title:after { left: 0; margin: 5px auto 0 auto; }
@media only screen and (max-width: 685px) {
	.info-box h1.project-title { font-size: 50px; }
	.info-box h1.project-title:after { width: 40px; margin: 15px 0 0 -22.5px; }
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
	.info-box h1.project-title { width: 90%; }
}

/* Título de entrada del blog (antes h2) */
.post-content h1.post-title {
	margin-bottom: 15px;
	font-size: 25px;
	font-weight: 500;
	line-height: 31px;
	text-transform: uppercase;
	letter-spacing: 0;
	color: #000;
}
.post-share .vr-share-title {
	font-size: 12px;
	line-height: 15px;
	letter-spacing: normal;
	text-transform: none;
	color: rgb(25, 25, 25);
}

/* ---------- Contraste del título y del menú sobre la foto de cabecera (1.4.3) ----------
   accesibilidad.js añade la clase según el color del título y si hay foto de fondo. */
.vr-titulo-claro .section-title .page-title,
.vr-titulo-claro .page-description {
	text-shadow: 0 0 2px rgba(0, 0, 0, .9), 0 0 12px rgba(0, 0, 0, .75);
}
.vr-titulo-oscuro .section-title .page-title,
.vr-titulo-oscuro .page-description {
	text-shadow: 0 0 2px rgba(255, 255, 255, .9), 0 0 12px rgba(255, 255, 255, .75);
}
/* Menú superior: los enlaces eran blancos sobre la foto (o sobre blanco). Fondo negro sólido,
   como el botón "MENU" del propio tema; así el contraste es 21:1 sobre cualquier imagen. */
@media only screen and (min-width: 721px) {
	.navigation > .menu > li > a {
		background-color: #000;
		color: #fff !important;
		padding: 3px 6px;
		text-shadow: none;
	}
	.navigation ul .current-menu-item > a,
	.navigation ul .current_page_item > a { border-bottom-color: #fff !important; }
}
/* Páginas sin foto de cabecera: el título era blanco sobre blanco */
.vr-sin-foto .section-title .page-title,
.vr-sin-foto .page-description,
.vr-sin-foto .page-description p,
.vr-sin-foto .action-scroll a i { color: #000 !important; text-shadow: none !important; }
.vr-sin-foto .section-title h1:after { background: #000 !important; }
.vr-sin-foto .action-scroll { border-color: #000 !important; }

/* ---------- Submenú "Áreas de práctica" abierto con teclado ---------- */
.menu li.vr-open > .sub-menu,
.menu li:focus-within > .sub-menu {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* ---------- Preguntas frecuentes: h3 con botón (antes h4 clicable) ---------- */
h3.wpb_toggle {
	font-size: 25px;
	font-weight: 500;
	line-height: 140%;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	color: rgb(38, 38, 38);
	margin-bottom: 10px;
}
.wpb_toggle_btn {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-transform: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.wpb_toggle_btn:hover { text-decoration: underline; }

/* ---------- Pie: "Síguenos en" (antes h5), mismo aspecto ---------- */
.inner-subfooter .vr-social-title {
	position: absolute;
	bottom: 173px;
	margin: 0 0 0 9px;
	padding: 0;
	font-family: "PT Serif", Georgia, serif;
	font-size: 19px;
	font-weight: 300;
	line-height: 15px;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	color: #3C3C3C;
}
.inner-subfooter .vr-social-title:after {
	content: '';
	display: block;
	width: 19px;
	height: 2px;
	background: #3C3C3C;
	margin-top: 7px;
}
@media handheld, only screen and (min-width: 1024px) and (max-width: 1280px) { .inner-subfooter .vr-social-title { bottom: 190px; } }
@media handheld, only screen and (min-width: 771px) and (max-width: 1000px) { .inner-subfooter .vr-social-title { bottom: 190px; } }
@media handheld, only screen and (max-width: 720px) { .inner-subfooter .vr-social-title { bottom: 175px; } }
@media only screen and (min-width: 0px) and (max-width: 420px) { .inner-subfooter .vr-social-title { display: none; } }

/* ---------- Contraste y tamaño de textos pequeños (1.4.3) ---------- */
.menu-footer li a,
.copy-right { color: #595959; }            /* antes #7E7E7E: 4,06:1 -> 7:1 */
.menu-footer li a { font-size: 12px; }
.copy-right { font-size: 12px; line-height: 16px; }
@media handheld, only screen and (max-width: 1070px) {
	.menu-footer li a { font-size: 11px; }  /* el tema lo bajaba a 9px */
}
.cover-post .the-date,
.post-content ul li a { color: #666; }     /* antes #CFCFCF: 1,56:1 -> 5,7:1 */

/* Listas en páginas de texto (declaración, cookies...): mismo tamaño que los párrafos y viñetas visibles */
.page .block-content > section li { font-size: 15px; line-height: 25px; }
.page .block-content > section > ul,
.page .block-content > section .page-content ul { list-style: disc; padding-left: 1.5em; margin-bottom: 15px; }
.page .block-content > section .page-content ol { list-style: decimal; padding-left: 1.5em; margin-bottom: 15px; }

/* Enlaces dentro del texto: subrayados, no solo por color (1.4.1) */
.wpb_text_column p a,
.wpb_text_column li a,
.page .block-content > section > p a,
.page .block-content > section > ul a,
.page-content a,
.post-excerpt p a { text-decoration: underline; }

/* ---------- Texto del carrusel de portada: gris sobre foto clara (1.4.3) -> fondo claro detrás ----------
   El fondo va en los textos y no en .display-slide: el contenedor se muestra antes que el texto
   al cambiar de imagen y quedaba una caja blanca vacía. */
.display-slide .slide-title,
.display-slide .slide-desc {
	background-color: rgba(255, 255, 255, .92);
	padding: 6px 14px;
}
.display-slide .slide-title,
.display-slide .slide-title a { color: #222; }
.display-slide .slide-desc { color: #333; }

/* Flechas del carrusel: en móvil se ven como texto negro sobre la foto -> fondo negro detrás del texto.
   El tema las mueve a section.content como ul.back-slider-handlers. Cada enlace es una zona de 264x500 px
   (658x500 en escritorio), así que el fondo va en el <span> del texto que crea accesibilidad.js, y solo en móvil. */
@media handheld, only screen and (max-width: 720px) {
	.back-slider-handlers .vr-flex-label {
		display: inline-block;
		background-color: #000;
		color: #fff;
		padding: 4px 10px;
		font-weight: 700;
	}
}

/* ---------- Carrusel de portada: botón de pausa (2.2.2) ---------- */
.vr-slider-toggle {
	position: absolute;
	top: 90px;
	right: 24px;
	z-index: 1000;
	background: #000;
	color: #fff;
	border: 2px solid #fff;
	border-radius: 3px;
	padding: 8px 14px;
	font: 700 13px/1.2 "PT Serif", Georgia, serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
}
.vr-slider-toggle:hover { background: #fff; color: #000; border-color: #000; }

/* ---------- Reducir movimiento (2.3.3) ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}