/* Bekho Web — estilos base para las plantillas propias.
   Reutiliza la identidad visual ya existente en el Home actual:
   - Fondo oscuro con haces rojos diagonales (Fondo-Oscuro.png)
   - Tipografía Poppins, títulos livianos (300), mayúsculas, tracking amplio
   - Rojo de marca #DD183B, botones rectangulares (radio chico)
   Se juega con el layout y los componentes nuevos (mapa, filtros, tarjetas),
   pero se mantiene la foto del hero y los fondos del sitio actual. */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Nunito:wght@400;600;700;800&display=swap');

:root {
	--bekho-rojo: #dd183b;
	--bekho-rojo-oscuro: #a81030;
	--bekho-negro: #0c0c0e;
	--bekho-fondo-oscuro-url: url('https://bekhomartialarts.com/wp-content/uploads/2026/05/Fondo-Oscuro.png');
	--bekho-font: 'Nunito', sans-serif;
	--bekho-font-titulo: 'Oswald', sans-serif;
	--bekho-fondo-claro-url: url('https://bekhomartialarts.com/wp-content/uploads/2026/05/Fondo-Claro.png');
}

.bekho-page {
	font-family: var(--bekho-font);
	/* Astra envuelve <main> en un contenedor flex (.ast-container); sin esto
	   main se encoge al ancho de su contenido en vez de llenar la página. */
	width: 100%;
	flex: 1 1 auto;
	max-width: 100%;
	background-color: #fff;
	background-image: var(--bekho-fondo-claro-url);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
@media (max-width: 900px) {
	.bekho-page,
	.bekho-page .bekho-hero,
	.bekho-page .bekho-programa-card { background-attachment: scroll; }
	.bekho-page { background-size: 220% auto; background-position: top right; }
}
/* Tarjetas y bloques opacos para que el texto y las fotos mantengan contraste sobre el fondo con textura */
.bekho-programa-bloque,
.bekho-evento,
.bekho-noticia,
.bekho-programa-habilidades li {
	background-color: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.bekho-page h1, .bekho-page h2, .bekho-page h3 {
	font-family: var(--bekho-font-titulo);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--bekho-negro);
}

.bekho-seccion { max-width: 1180px; margin: 0 auto; padding: 3.5rem 1.25rem; }
.bekho-seccion--angosta { max-width: 820px; }
.bekho-seccion h2 {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 1.7rem;
	border-left: 5px solid var(--bekho-rojo);
	padding-left: .85rem;
	margin: 2.4rem 0 1.1rem;
}
.bekho-seccion h2:first-child { margin-top: 0; }

/* Programas — refresco visual: bloques con acento e íconos, chips de habilidades */
.bekho-programa-bloque {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	background: #faf7f2;
	border-left: 4px solid var(--bekho-rojo);
	border-radius: 6px;
	padding: 1.4rem 1.5rem;
	margin: 1.6rem 0;
}
.bekho-programa-bloque__icono {
	flex: 0 0 auto;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: var(--bekho-rojo);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--bekho-font-titulo);
	font-weight: 700;
	font-size: 1.1rem;
}
.bekho-programa-bloque__texto h2 {
	border-left: none;
	padding-left: 0;
	margin: 0 0 .5rem;
	font-size: 1.25rem;
}
.bekho-programa-bloque__texto p { margin: 0; }

.bekho-programa-habilidades {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	padding: 0;
	margin: 1.2rem 0 0;
}
.bekho-programa-habilidades li {
	background: #fff;
	border: 1.5px solid var(--bekho-rojo);
	color: var(--bekho-negro);
	font-weight: 700;
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .4px;
	padding: .5rem 1rem;
	border-radius: 30px;
}

.bekho-seccion--cta-final {
	background-color: var(--bekho-negro);
	background-image: var(--bekho-fondo-oscuro-url);
	background-size: cover;
	background-position: center;
	text-align: center;
	border-radius: 8px;
	padding: 2.6rem 1.5rem;
}
.bekho-seccion--cta-final .bekho-cta-grupo { margin-top: 0; }

/* Hero oscuro — mismo fondo y tratamiento que usa hoy el Home */
.bekho-hero {
	position: relative;
	text-align: center;
	padding: 5rem 1.25rem 3.5rem;
	min-height: 420px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-image: var(--bekho-fondo-oscuro-url);
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	color: #fff !important;
	overflow: hidden;
}
@media (max-width: 480px) {
	.bekho-hero { min-height: 320px; }
}
.bekho-hero * { color: #fff; }
.bekho-hero__kicker {
	display: block;
	text-transform: uppercase;
	letter-spacing: 4px;
	font-size: .8rem;
	color: #e9e9e9 !important;
	margin-bottom: 1rem;
}
.bekho-hero h1 {
	font-family: var(--bekho-font-titulo);
	font-size: clamp(2.4rem, 6vw, 4.5rem);
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0 0 1rem;
	line-height: 1.05;
	color: #fff !important;
}
.bekho-hero p.bekho-bajada { font-size: 1.15rem; opacity: .85; max-width: 640px; margin: 0 auto; font-weight: 300; color: #fff !important; }
@media (max-width: 480px) {
	.bekho-hero { padding-top: 130px; }
	.bekho-seccion { padding: 2.5rem 1rem; }
	.bekho-contacto__datos { padding: 1.25rem; }
}

/* Hero de Inicio: foto real a la derecha, texto a la izquierda, igual que el Home actual */
.bekho-hero--inicio {
	text-align: left;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 4rem;
	padding: 7.5rem 4rem;
}
.bekho-hero--inicio .bekho-hero__texto { max-width: 560px; }
.bekho-hero--inicio .bekho-hero__foto { flex: 0 0 auto; max-width: 42%; }
.bekho-hero--inicio .bekho-hero__foto img { display: block; max-width: 100%; height: auto; }
.bekho-hero--inicio h1 { text-align: left; }
.bekho-hero--inicio p.bekho-bajada { margin: 0; text-align: left; }
@media (max-width: 900px) {
	.bekho-hero--inicio { flex-direction: row; gap: 1.5rem; padding: 130px 1.25rem 2rem; }
	.bekho-hero--inicio .bekho-hero__texto { max-width: 58%; }
	.bekho-hero--inicio .bekho-hero__foto { max-width: 36%; }
}
@media (max-width: 480px) {
	.bekho-hero--inicio { flex-direction: row; padding: 105px .85rem 1.25rem; gap: .85rem; }
	.bekho-hero h1 { letter-spacing: 1px; }
	.bekho-hero--inicio .bekho-hero__texto { max-width: 56%; }
	.bekho-hero--inicio .bekho-hero__foto { max-width: 40%; }
	.bekho-hero--inicio .bekho-cta-grupo { flex-direction: column; align-items: stretch; }
	.bekho-hero--inicio .bekho-cta-grupo .bekho-boton { text-align: center; font-size: .72rem; padding: .6rem 1rem; }
}

/* Hero con foto lateral, reutilizable en páginas de Programas */
.bekho-hero--conFoto {
	text-align: left;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 4rem;
	padding: 7rem 4rem;
}
.bekho-hero--conFoto .bekho-hero__texto { max-width: 560px; }
.bekho-hero--conFoto .bekho-hero__foto { flex: 0 0 auto; max-width: 30%; }
.bekho-hero--conFoto .bekho-hero__foto img { display: block; max-width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.45)); }
.bekho-hero--conFoto h1 { text-align: left; }
.bekho-hero--conFoto p.bekho-bajada { margin: 0; text-align: left; }
@media (max-width: 900px) {
	.bekho-hero--conFoto { flex-direction: row; gap: 1.5rem; padding: 130px 1.25rem 2rem; min-height: 0; }
	.bekho-hero--conFoto .bekho-hero__texto { max-width: 60%; }
	.bekho-hero--conFoto .bekho-hero__foto { max-width: 34%; }
}
@media (max-width: 480px) {
	.bekho-hero--conFoto { flex-direction: row; gap: .85rem; padding: 105px .85rem 1.25rem; }
	.bekho-hero--conFoto .bekho-hero__texto { max-width: 58%; }
	.bekho-hero--conFoto .bekho-hero__foto { max-width: 38%; }
}

.bekho-cta-grupo { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 1.75rem; }
.bekho-boton {
	display: inline-block; padding: .8rem 1.75rem; border-radius: 3px;
	background: var(--bekho-rojo); color: #fff; text-decoration: none;
	font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: .85rem;
	transition: background .15s ease;
}
.bekho-boton:hover { background: var(--bekho-rojo-oscuro); color: #fff; }
.bekho-boton--secundario { background: transparent; border: 2px solid #fff; color: #fff; }
.bekho-boton--secundario:hover { background: #fff; color: var(--bekho-negro); }
.bekho-boton--deshabilitado { background: #ccc; color: #666; cursor: not-allowed; }

/* Fuera del hero (fondo blanco), el botón secundario usa el rojo como borde */
.bekho-seccion .bekho-boton--secundario { background: transparent; border: 2px solid var(--bekho-rojo); color: var(--bekho-rojo); }
.bekho-seccion .bekho-boton--secundario:hover { background: var(--bekho-rojo); color: #fff; }

.bekho-grid-programas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.bekho-programa-card {
	position: relative; border-radius: 4px; padding: 1.75rem 1.5rem; text-align: center;
	background: var(--bekho-negro); background-image: var(--bekho-fondo-oscuro-url);
	background-size: cover; background-position: center center; background-attachment: fixed; color: #fff; overflow: hidden;
}
.bekho-programa-card * { color: #fff; }
.bekho-programa-card img { max-width: 70%; height: auto; margin: 0 auto 1rem; display: block; }
.bekho-programa-card h3 { margin-top: 0; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; font-size: 1.3rem; color: #fff !important; }
.bekho-programa-card p { opacity: .85; font-size: .9rem; color: #fff !important; }

.bekho-lista-valores { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; list-style: none; padding: 0; }
.bekho-lista-valores li { background: #f7f7f7; border-left: 3px solid var(--bekho-rojo); border-radius: 4px; padding: .75rem 1rem; text-align: center; font-weight: 600; text-transform: uppercase; font-size: .85rem; letter-spacing: 1px; }

/* Academias: filtros + mapa + lista */
.bekho-academias__filtros { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.bekho-campo { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; }
.bekho-campo label { font-weight: 600; text-transform: uppercase; font-size: .75rem; letter-spacing: 1px; }
.bekho-campo select, .bekho-campo input { padding: .5rem .6rem; border-radius: 3px; border: 1px solid #ccc; min-width: 180px; font-family: var(--bekho-font); }
.bekho-campo--busqueda { flex: 1; min-width: 220px; }
.bekho-academias__resultado { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem; }
.bekho-academias__mapa { height: 480px; border-radius: 4px; overflow: hidden; }
.bekho-academias__lista { max-height: 480px; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; padding-right: .25rem; }
.bekho-academia-card { border: 1px solid #eee; border-left: 3px solid var(--bekho-rojo); border-radius: 4px; padding: 1rem 1.2rem; cursor: pointer; }
.bekho-academia-card:hover { background: #fafafa; }
.bekho-academia-card h3 { margin: 0 0 .35rem; text-transform: uppercase; letter-spacing: 1px; }
.bekho-academia-card__instructor { font-weight: 600; margin: 0 0 .35rem; }
.bekho-academia-card__programas { font-size: .85rem; opacity: .75; }
.bekho-academia-card__acciones { display: flex; gap: .5rem; margin-top: .6rem; }
.bekho-academia-card__acciones .bekho-boton { padding: .4rem .9rem; font-size: .75rem; background: var(--bekho-rojo); }
.bekho-sin-resultados { text-align: center; padding: 1.5rem; }
.bekho-cargando { opacity: .6; }

@media (max-width: 780px) {
	.bekho-academias__resultado { grid-template-columns: 1fr; }
	.bekho-academias__mapa { height: 320px; }
}

/* Instructores */
.bekho-instructores__filtros { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.bekho-instructores__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; }
.bekho-instructor-card { border: 1px solid #eee; border-top: 3px solid var(--bekho-rojo); border-radius: 4px; padding: 1rem; text-align: center; }
.bekho-instructor-card img { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; margin-bottom: .6rem; }
.bekho-instructor-card__grado { font-weight: 600; }
.bekho-badge { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: .25rem .7rem; border-radius: 3px; margin-top: .4rem; }
.bekho-badge--autorizado { background: #e6f4ea; color: #1e7e34; }
.bekho-nota-actualizacion { text-align: right; font-size: .8rem; opacity: .6; margin-top: 1rem; }

/* Eventos */
.bekho-eventos__filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.bekho-chip { border: 1px solid #ccc; background: #fff; color: #1a1a1a !important; border-radius: 3px; padding: .5rem 1.2rem; cursor: pointer; text-transform: uppercase; font-size: .8rem; letter-spacing: 1px; font-weight: 600; }
.bekho-chip.is-active { background: var(--bekho-rojo); color: #fff !important; border-color: var(--bekho-rojo); }
.bekho-eventos__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.bekho-evento { display: flex; flex-direction: column; border: 1px solid #eee; border-top: 4px solid var(--bekho-rojo); border-radius: 6px; padding: 1.4rem; background: #fff; transition: box-shadow .15s ease, transform .15s ease; }
.bekho-evento:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
.bekho-evento__fecha { font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--bekho-rojo); font-size: .85rem; margin-bottom: .6rem; text-align: left; }
.bekho-evento__info { display: flex; flex-direction: column; flex: 1; }
.bekho-evento__info h3 { margin: 0 0 .5rem; text-transform: uppercase; font-size: 1.05rem; line-height: 1.3; }
.bekho-evento__lugar { margin: 0 0 .5rem; opacity: .8; font-size: .9rem; }
.bekho-evento__meta { margin: 0 0 .85rem; font-size: .82rem; opacity: .8; display: flex; flex-direction: column; gap: .2rem; }
.bekho-evento__meta strong { color: var(--bekho-negro); font-weight: 600; }
.bekho-evento .bekho-badge { align-self: flex-start; margin: 0 0 .85rem; }
.bekho-evento .bekho-boton, .bekho-evento .bekho-boton--deshabilitado { margin-top: auto; text-align: center; }
.bekho-badge--proximo { background: #fff6da; color: #8a6300; }
.bekho-badge--inscripcion_abierta { background: #e6f4ea; color: #1e7e34; }
.bekho-badge--cerrado, .bekho-badge--finalizado { background: #fdeceb; color: #a81030; }

/* Contorno de la tarjeta según estado del evento */
.bekho-evento--proximo { border-top-color: #f0b400; }
.bekho-evento--inscripcion_abierta { border-top-color: #2f9e44; }
.bekho-evento--cerrado, .bekho-evento--finalizado { border-top-color: #a81030; }

@media (max-width: 480px) {
	.bekho-eventos__lista { grid-template-columns: 1fr; }
}

/* Noticias */
.bekho-noticias__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 1rem; }
.bekho-noticia { border: 1px solid #eee; border-left: 3px solid var(--bekho-rojo); border-radius: 4px; padding: 1.2rem; display: flex; flex-direction: column; gap: .4rem; transition: background .15s ease; }
.bekho-noticia:hover { background: #fafafa; }
.bekho-noticia img { width: 100%; border-radius: 3px; margin-bottom: .5rem; display: block; }
.bekho-noticia__categoria { display: inline-block; text-transform: uppercase; letter-spacing: 1px; font-size: .75rem; font-weight: 600; color: var(--bekho-rojo); }
.bekho-noticia__fecha { font-size: .8rem; opacity: .6; }
.bekho-noticia h2, .bekho-noticia h3 { margin: .3rem 0; text-transform: uppercase; }
.bekho-noticia .bekho-boton { align-self: flex-start; margin-top: .5rem; }

/* Noticia destacada — bloque grande arriba del listado */
.bekho-noticia--destacada { flex-direction: row; align-items: center; gap: 2rem; padding: 0; border-left: none; overflow: hidden; margin-bottom: 1rem; }
.bekho-noticia--destacada .bekho-noticia__img { flex: 0 0 45%; margin: 0; }
.bekho-noticia--destacada .bekho-noticia__img img { width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.bekho-noticia--destacada .bekho-noticia__cuerpo { padding: 1.5rem 2rem 1.5rem 0; }
.bekho-noticia--destacada h2 { font-size: 1.4rem; }
@media (max-width: 700px) {
	.bekho-noticia--destacada { flex-direction: column; }
	.bekho-noticia--destacada .bekho-noticia__cuerpo { padding: 1rem; }
}

/* Contacto */
.bekho-contacto__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.bekho-contacto__datos { background: var(--bekho-negro); background-image: var(--bekho-fondo-oscuro-url); background-size: cover; color: #fff !important; border-radius: 4px; padding: 1.75rem; }
.bekho-contacto__datos * { color: #fff; }
.bekho-contacto__datos h3 { margin-top: 0; text-transform: uppercase; letter-spacing: 1px; color: #fff !important; }
.bekho-contacto__datos .bekho-boton { background: var(--bekho-rojo); }
.bekho-pendiente { color: #f0b84d; font-style: italic; }
@media (max-width: 780px) { .bekho-contacto__grid { grid-template-columns: 1fr; } }


/* Menú principal: ajustar densidad en anchos "squeeze" donde 7 ítems no caben
   en una sola línea antes del breakpoint móvil de Astra (921px), evitando que
   "Contacto" se desborde a una segunda línea. */
@media (min-width: 922px) {
	.main-header-bar-navigation .menu-link {
		padding-left: 9px;
		padding-right: 9px;
		font-size: 15px;
	}
}
@media (min-width: 922px) and (max-width: 1080px) {
	.main-header-bar-navigation .menu-link {
		padding-left: 7px;
		padding-right: 7px;
		font-size: 14px;
	}
}

/* Submenús del header (Organización, Programas): Astra hereda el texto
 * blanco del header transparente y lo aplica también dentro del desplegable,
 * que tiene fondo blanco -> texto invisible. Se corrige con la paleta de marca. */
.main-header-menu .sub-menu {
	background: #fff !important;
	border-top: 3px solid var(--bekho-rojo);
	box-shadow: 0 12px 28px rgba(0,0,0,.14);
	padding: .4rem 0;
}
.main-header-menu .sub-menu li a {
	color: var(--bekho-negro) !important;
	font-size: .85rem;
	letter-spacing: .5px;
	text-transform: uppercase;
	padding: .65rem 1.2rem;
}
.main-header-menu .sub-menu li a:hover,
.main-header-menu .sub-menu li a:focus {
	color: var(--bekho-rojo) !important;
	background: #faf3f4;
}