/* =========================================================================
   Infodemencias — correcciones de diseño y accesibilidad
   Se carga después de Divi, así que gana en igualdad de especificidad.
   Los !important marcados son necesarios porque Divi escribe esos colores
   como estilos en línea desde el maquetador.
   ========================================================================= */

:root {
	--infodem-navy:        #003363; /* azul del pie, ya en uso */
	--infodem-navy-dark:   #001842; /* azul de los botones, ya en uso */
	--infodem-link:        #00539C; /* sustituye al azul por defecto de Divi */
	--infodem-link-hover:  #003a6e;
	--infodem-on-navy:     #dce6f5; /* texto sobre fondo azul oscuro */
	--infodem-text:        #2b2b2b;
	--infodem-text-soft:   #4a4a4a;
}


/* -------------------------------------------------------------------------
   1. CONTRASTE DEL PIE DE PÁGINA  —  fallo de accesibilidad actual

   Ahora mismo el pie usa texto #666666 sobre fondo #003363: una ratio de
   contraste de 2,2:1 cuando WCAG AA exige 4,5:1. El menú del pie es
   prácticamente ilegible. Con #dce6f5 sube a ~10:1.
   ---------------------------------------------------------------------- */

#main-footer,
#main-footer p,
#main-footer li,
#main-footer .et_pb_widget,
#footer-info {
	color: var(--infodem-on-navy) !important;
}

#main-footer a,
#footer-info a,
#main-footer .et_pb_widget a,
#main-footer .widget_nav_menu a {
	color: #ffffff !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

#main-footer a:hover,
#footer-info a:hover {
	color: #ffffff !important;
	text-decoration-thickness: 2px;
}


/* -------------------------------------------------------------------------
   2. COLOR DE ENLACE

   El sitio usa el azul por defecto de Divi (#2ea3f2), que sobre blanco da
   2,75:1 — también por debajo de AA. #00539C da 7,7:1 y encaja con el azul
   corporativo que ya usáis.
   ---------------------------------------------------------------------- */

#page-container a:not(.et_pb_button):not(.tutor-btn):not(.wp-block-button__link) {
	color: var(--infodem-link);
}

#page-container a:not(.et_pb_button):not(.tutor-btn):hover {
	color: var(--infodem-link-hover);
}

/* Los enlaces dentro de un párrafo deben distinguirse por algo más que el
   color: obligatorio en WCAG cuando el contraste con el texto es bajo. */
#page-container .et_pb_text p a,
#page-container .entry-content p a {
	text-decoration: underline;
	text-underline-offset: 2px;
}


/* -------------------------------------------------------------------------
   3. TIPOGRAFÍA

   El cuerpo va a 16px con interlineado 32px (ratio 2,0: demasiado aireado,
   separa las líneas de un mismo párrafo tanto como los párrafos entre sí).
   Los H2 van a 26px con interlineado 26px (ratio 1,0: los titulares de dos
   líneas se tocan).

   El público de esta web son cuidadores, familiares y personas mayores.
   Subir el cuerpo a 18px no es cosmético, es funcional.
   ---------------------------------------------------------------------- */

#page-container,
#page-container p,
#page-container li {
	font-size: 18px;
	line-height: 1.65;
	color: var(--infodem-text);
}

#page-container h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.15; }
#page-container h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.25; }
#page-container h3 { font-size: clamp(20px, 2.4vw, 24px); line-height: 1.3;  }

#page-container h1,
#page-container h2,
#page-container h3 {
	color: var(--infodem-navy);
	margin-bottom: 0.5em;
	text-wrap: balance;
}

/* Ancho de línea legible. Por encima de ~75 caracteres el ojo pierde el
   renglón al saltar de línea. */
#page-container .et_pb_text_inner > p,
#page-container .entry-content > p {
	max-width: 68ch;
}

/* Menú principal a 14px: pequeño para la audiencia.

   OJO con los selectores: el encabezado lo genera el Theme Builder de Divi
   (el body lleva la clase `et-tb-has-header`), así que en este sitio NO
   existen `#main-header` ni `#top-menu`, que son los del encabezado clásico.
   Verificado contra el HTML real el 18/08/2026. El marcado es:

     .et-l--header > .et_pb_menu > nav.et-menu-nav > ul.et-menu > li.menu-item > a
*/
.et-l--header .et-menu > li > a,
.et-menu-nav .menu-item > a {
	font-size: 16px;
}


/* -------------------------------------------------------------------------
   4. FOCO VISIBLE PARA TECLADO

   Divi elimina el outline del navegador sin sustituirlo. Ahora mismo, quien
   navega con tabulador no puede saber dónde está. Es un incumplimiento de
   WCAG 2.4.7, y llamativo teniendo instalado un plugin de accesibilidad.
   ---------------------------------------------------------------------- */

#page-container a:focus-visible,
#page-container button:focus-visible,
#page-container input:focus-visible,
#page-container select:focus-visible,
#page-container textarea:focus-visible,
#main-footer a:focus-visible {
	outline: 3px solid #ffb400;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Enlace de salto al contenido, para lectores de pantalla. */
.infodem-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 20px;
	background: var(--infodem-navy);
	color: #fff;
	font-weight: 600;
}
.infodem-skip-link:focus {
	left: 0;
}


/* -------------------------------------------------------------------------
   5. ÁREAS PULSABLES

   Recomendación WCAG 2.2 (2.5.8): mínimo 24x24 px, y 44x44 px es el objetivo
   razonable para dedos poco firmes.
   ---------------------------------------------------------------------- */

#page-container .et_pb_button,
#page-container .tutor-btn,
#page-container button[type="submit"],
#page-container input[type="submit"] {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	border-radius: 6px;
	font-size: 18px;
	line-height: 1.2;
	transition: background-color .15s ease, transform .15s ease;
}

#page-container .et_pb_button:hover {
	transform: translateY(-1px);
}

.et-l--header .et-menu > li > a,
.et-menu-nav .menu-item > a {
	padding-block: 10px;
}


/* -------------------------------------------------------------------------
   6. FORMULARIOS (Contact Form 7)

   Los campos heredan el estilo del navegador y quedan a 13px.
   ---------------------------------------------------------------------- */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
	width: 100%;
	font-size: 17px;
	padding: 12px 14px;
	border: 2px solid #b9c4d4;
	border-radius: 6px;
	background: #fff;
	color: var(--infodem-text);
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
	border-color: var(--infodem-link);
}

.wpcf7 label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--infodem-text);
}


/* -------------------------------------------------------------------------
   7. VÍDEO DE YOUTUBE RESPONSIVO

   El embed de la portada tiene medidas fijas.
   ---------------------------------------------------------------------- */

#page-container .et_pb_video_box iframe,
#page-container .wp-block-embed__wrapper iframe,
#page-container iframe[src*="youtube"] {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}


/* -------------------------------------------------------------------------
   8. DIÁLOGO DE "SPOKEN WORD"

   Sus botones salen sin estilar (borde negro de 2px, 13px, fondo gris del
   sistema) porque el plugin no trae CSS propio.
   ---------------------------------------------------------------------- */

.spoken-word-playback-controls__dialog button {
	min-height: 40px;
	padding: 8px 16px;
	font-size: 15px;
	border: 1px solid var(--infodem-navy);
	border-radius: 6px;
	background: #fff;
	color: var(--infodem-navy);
	cursor: pointer;
}

.spoken-word-playback-controls__dialog button:hover {
	background: var(--infodem-navy);
	color: #fff;
}


/* -------------------------------------------------------------------------
   9. MÓVIL
   ---------------------------------------------------------------------- */

@media (max-width: 780px) {
	#page-container,
	#page-container p,
	#page-container li {
		font-size: 17px;
	}

	#page-container .et_pb_button {
		width: 100%;
		max-width: 360px;
	}

	#page-container .et_pb_section {
		padding-block: 40px;
	}
}


/* -------------------------------------------------------------------------
   10. RESPETAR "REDUCIR MOVIMIENTO"
   ---------------------------------------------------------------------- */

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


/* -------------------------------------------------------------------------
   11. IMPRESIÓN

   Mucha gente cuidadora imprime las fichas de recursos.
   ---------------------------------------------------------------------- */

@media print {
	.et-l--header,
	#main-footer,
	.et-l--footer,
	.et_pb_video,
	.spoken-word-playback-controls__dialog,
	#pojo-a11y-toolbar {
		display: none !important;
	}

	#page-container {
		font-size: 12pt;
		color: #000;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #555;
	}
}