/*
Theme Name: Kadence Child Adiestradores
Template: kadence
Description: Tema hijo de Kadence para adiestradoresde.es
Version: 1.0.9
Text Domain: kadence-child
*/

/*
 * Todos los colores salen de la paleta global de Kadence (Personalizador > Colores):
 * palette1 acción (terracota), palette2 acción hover, palette3 texto fuerte (verde muy oscuro),
 * palette4 verde marca, palette5 texto secundario, palette7 bordes, palette8 fondo suave, palette9 blanco.
 */

:root {
	--radio: 6px;
	--espacio: clamp(1rem, 2.5vw, 1.5rem);
}

/* ---------- Botones de enlace usados por el directorio ---------- */
.boton {
	display: inline-block;
	padding: 0.6em 1.2em;
	border-radius: var(--radio);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.boton--accion {
	background: var(--global-palette1);
	color: var(--global-palette9);
}
.boton--accion:hover,
.boton--accion:focus {
	background: var(--global-palette2);
	color: var(--global-palette9);
}
.boton--secundario {
	border-color: var(--global-palette4);
	color: var(--global-palette4);
	background: transparent;
}
.boton--secundario:hover,
.boton--secundario:focus {
	background: var(--global-palette4);
	color: var(--global-palette9);
}

/* ---------- Hero de la home ---------- */
.hero-inicio {
	padding-block: clamp(1rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2.5rem);
}
.hero-inicio h1 {
	max-width: 22ch;
	margin-bottom: 0.4em;
}
.hero-inicio__entradilla {
	max-width: 52ch;
	font-size: 1.15rem;
	color: var(--global-palette5);
}
ul.selector-ciudad {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.5rem;
	padding: 0;
	list-style: none;
}
.selector-ciudad a {
	display: inline-block;
	padding: 0.5em 1em;
	border: 1px solid var(--global-palette7);
	border-radius: var(--radio);
	background: var(--global-palette9);
	color: var(--global-palette3);
	font-weight: 600;
	text-decoration: none;
}
.selector-ciudad a:hover,
.selector-ciudad a:focus {
	border-color: var(--global-palette4);
}

/* ---------- Franja para empresas (fondo de color, siempre arriba) ---------- */
.franja-empresas {
	padding: var(--espacio) clamp(1rem, 4vw, 2rem);
	border-radius: var(--radio);
	background: var(--global-palette4);
	color: var(--global-palette9);
}
.franja-empresas > .wp-block-group__inner-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.franja-empresas p {
	margin: 0;
	color: inherit;
	font-size: 1.1rem;
}
.franja-empresas strong {
	color: inherit;
}

/* ---------- Bloque de ciudades ---------- */
ul.lista-ciudades {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 0.75rem;
	padding: 0;
	list-style: none;
}
.lista-ciudades a {
	display: block;
	padding: 1rem 1.1rem;
	border: 1px solid var(--global-palette7);
	border-radius: var(--radio);
	color: var(--global-palette3);
	text-decoration: none;
}
.lista-ciudades a:hover,
.lista-ciudades a:focus {
	border-color: var(--global-palette4);
}
.lista-ciudades span {
	display: block;
	font-size: 0.9rem;
	color: var(--global-palette5);
}

/* ---------- Pasos numerados ---------- */
ol.pasos {
	counter-reset: paso;
	padding: 0;
	list-style: none;
}
.pasos li {
	counter-increment: paso;
	position: relative;
	padding-left: 3rem;
	margin-bottom: 1.25rem;
}
.pasos li::before {
	content: counter(paso);
	position: absolute;
	left: 0;
	top: 0;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--global-palette8);
	color: var(--global-palette4);
	font-weight: 700;
	line-height: 2rem;
	text-align: center;
}

/* ---------- Tarjetas de empresa ---------- */
.listado-destacado {
	margin-bottom: 1.5rem;
}
ul.listado-empresas {
	display: grid;
	gap: 1rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}
.tarjeta-empresa {
	padding: var(--espacio);
	border: 1px solid var(--global-palette7);
	border-radius: var(--radio);
	background: var(--global-palette9);
}
.tarjeta-empresa--destacada,
.tarjeta-empresa--libre {
	border: 2px solid var(--global-palette1);
}
.tarjeta-empresa--libre {
	background: var(--global-palette8);
}
.tarjeta-empresa__etiqueta {
	margin: 0 0 0.25rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--global-palette1);
}
.tarjeta-empresa__nombre {
	margin: 0 0 0.25rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--global-palette3);
}
.tarjeta-empresa__zona {
	margin: 0 0 0.5rem;
	font-size: 0.95rem;
	color: var(--global-palette5);
}
.tarjeta-empresa__servicios {
	margin: 0 0 0.75rem;
}
.tarjeta-empresa__datos {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.25rem 1rem;
	margin: 0 0 1rem;
	font-size: 0.95rem;
}
.tarjeta-empresa__datos dt {
	font-weight: 600;
	color: var(--global-palette3);
}
.tarjeta-empresa__datos dd {
	margin: 0;
}
.tarjeta-empresa__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.listado-empresas__aviso {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: var(--espacio);
	border-radius: var(--radio);
	background: var(--global-palette8);
}
.listado-empresas__aviso p {
	margin: 0;
}
.listado-empresas__nota {
	font-size: 0.85rem;
	color: var(--global-palette5);
}

/* ---------- Preguntas frecuentes (bloque Detalles nativo) ---------- */
.preguntas details {
	border-bottom: 1px solid var(--global-palette7);
	padding: 0.9rem 0;
}
.preguntas summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--global-palette3);
}
.preguntas details p {
	margin: 0.6rem 0 0;
}

/* ---------- Caja para empresas ---------- */
.caja-empresas {
	padding: var(--espacio);
	border-radius: var(--radio);
	background: var(--global-palette8);
}
@media (min-width: 1025px) {
	.pagina-ciudad__lateral .caja-empresas {
		position: sticky;
		top: 1.5rem;
	}
}

/* ---------- Página de ciudad: contenido + barra lateral ---------- */
.pagina-ciudad > .wp-block-group__inner-container {
	display: grid;
	gap: 2.5rem;
}
@media (min-width: 1025px) {
	.pagina-ciudad > .wp-block-group__inner-container {
		grid-template-columns: minmax(0, 1fr) 280px;
		align-items: start;
	}
}
@media (max-width: 1024px) {
	/* En móvil la llamada a empresas va dentro del listado, tras la segunda ficha. */
	.pagina-ciudad__lateral {
		display: none;
	}
}
.pagina-ciudad__fecha {
	font-size: 0.9rem;
	color: var(--global-palette5);
}
.rank-math-breadcrumb {
	margin-bottom: 1rem;
	font-size: 0.9rem;
	color: var(--global-palette5);
}

/* ---------- Ritmo vertical de la home ---------- */
.hero-inicio + .franja-empresas {
	margin-top: 0;
}
.entry-content > h2.wp-block-heading {
	margin-top: 2.5em;
}
.entry-content > .caja-empresas {
	margin-top: 2.5rem;
}

/* ---------- Botón «Soy adiestrador» del menú ---------- */
.header-navigation .menu > li.menu-item.menu-soy-empresa > a {
	margin-left: 0.5rem;
	padding: 0.5em 1em;
	border-radius: var(--radio);
	background: var(--global-palette1);
	color: var(--global-palette9);
	font-weight: 600;
}
.header-navigation .menu > li.menu-item.menu-soy-empresa > a:hover,
.header-navigation .menu > li.menu-item.menu-soy-empresa > a:focus {
	background: var(--global-palette2);
	color: var(--global-palette9);
}
/* ---------- Imágenes de cabecera ---------- */
@media (min-width: 900px) {
	.hero-inicio > .wp-block-group__inner-container {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: clamp(2rem, 4vw, 3.5rem);
		align-items: center;
	}
}
.hero-inicio__imagen {
	margin: 0;
}
.hero-inicio__imagen img,
.cabecera-ciudad__imagen img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radio);
	object-fit: cover;
}
.hero-inicio__imagen img {
	aspect-ratio: 4 / 3;
}
.cabecera-ciudad__imagen {
	margin: 0 0 1.5rem;
}
.cabecera-ciudad__imagen img {
	aspect-ratio: 25 / 11;
	max-height: 240px;
}
.lista-ciudades img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 768 / 338;
	object-fit: cover;
	margin-bottom: 0.75rem;
	border-radius: calc(var(--radio) - 2px);
}
/* ---------- Etiquetas de modalidad en las fichas ---------- */
ul.tarjeta-empresa__etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}
.tarjeta-empresa__etiquetas li {
	padding: 0.15em 0.6em;
	border-radius: 999px;
	background: var(--global-palette8);
	color: var(--global-palette4);
	font-size: 0.8rem;
	font-weight: 600;
}

/* ---------- Lista de enlaces a municipios cercanos ---------- */
ul.municipios-cercanos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	list-style: none;
}
.municipios-cercanos li {
	padding: 0.35em 0.8em;
	border: 1px solid var(--global-palette7);
	border-radius: var(--radio);
	font-size: 0.95rem;
}