/*
 * /familias/bat-taldea/ — EL BAT TALDEA (08/10/2026).
 *
 * Va encima de page-servicios.css, del que toma las piezas de la casa: el hero crema, las secciones
 * crema/niebla con su costura, los eyebrows, el fade-up y la banda verde del cierre. Aquí solo lo
 * propio: el logo de Bizikasi, el índice, las fichas con icono, la definición, los seis tipos, los
 * ocho pasos y las notas. Tokens de la casa (crema/niebla/bosque/tinta/primario; Anton/Hanken/Space
 * Mono). Sin JS: con o sin él, todo el contenido se ve.
 */

/* -------- HERO: el nombre, el logo y el índice -------- */
.sf-bat-hero .sf-svc-hero__inner { grid-template-columns: 1.25fr 0.75fr; }
.sf-bat-hero__title {
	font-size: clamp(3.2rem, 8.5vw, 6.4rem);
	line-height: 0.95;
}
.sf-bat-hero__kicker {
	margin: 0.8rem 0 0;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-weight: 700;
	font-size: clamp(1.2rem, 2.4vw, 1.55rem);
	line-height: 1.3;
	color: var(--sf-boton); /* el verde del PDF, en su versión AA sobre crema (4,6:1). */
}
.sf-bat-hero .sf-svc-hero__sub { margin-top: 1rem; }
.sf-bat-hero__logo {
	margin: 0;
	justify-self: center;
	width: min(100%, 19rem);
	transform: rotate( -4deg );
}
.sf-bat-hero__img {
	width: 100%;
	height: auto;
	/* La burbuja del logo es blanca: una sombra suave la separa del crema, como la ola verde del PDF. */
	filter: drop-shadow( 0 22px 30px rgba(11, 46, 31, 0.16) );
}

/* El índice: las mismas etiquetas que los eyebrows, como chips que llevan a cada sección. */
.sf-bat-indice { margin-top: clamp(1.4rem, 3.5vh, 2rem); }
.sf-bat-indice__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.sf-bat-indice__a {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	border: 1px solid color-mix( in srgb, var(--wp--preset--color--tinta, #173404) 25%, transparent );
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.sf-bat-indice__a:hover,
.sf-bat-indice__a:focus-visible {
	background-color: var(--wp--preset--color--verde-niebla, #e1f5ee);
	border-color: color-mix( in srgb, var(--wp--preset--color--primario, #00a74d) 60%, transparent );
}

/* -------- PIEZAS COMUNES de la página -------- */
.sf-bat-lead { max-width: 62ch; }
.sf-bat-texto {
	margin: 1rem 0 0;
	max-width: 62ch;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 1.05rem;
	line-height: 1.6;
	color: color-mix( in srgb, var(--wp--preset--color--tinta, #173404) 84%, transparent );
}
.sf-bat-label {
	margin: clamp(1.75rem, 4.5vh, 2.5rem) 0 0;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-weight: 700;
	font-size: 1.08rem;
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}

/* Tarjeta de la casa: crema sobre niebla y niebla sobre crema (la regla de .sf-svc-card). */
.sf-bat-card {
	position: relative;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border-radius: 14px;
	background-color: var(--wp--preset--color--crema, #f7f5ef);
	border: 1px solid color-mix( in srgb, var(--wp--preset--color--tinta, #173404) 12%, transparent );
}
.sf-svc-sec--crema .sf-bat-card { background-color: var(--wp--preset--color--verde-niebla, #e1f5ee); }
.sf-bat-card__t {
	margin: 0.9rem 0 0.5rem;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400;
	line-height: 1.1;
	font-size: clamp(1.2rem, 2vw, 1.5rem);
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	text-wrap: balance;
}
.sf-bat-card__n { color: var(--sf-boton); }
.sf-bat-card__d {
	margin: 0;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 1rem;
	line-height: 1.55;
	color: color-mix( in srgb, var(--wp--preset--color--tinta, #173404) 84%, transparent );
}

/* La ficha del icono: verde bosque con el trazo crema, como las fichas verdes de /familias/. */
.sf-bat-ficha {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2.9rem;
	height: 2.9rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	color: var(--wp--preset--color--crema, #f7f5ef);
}
.sf-bat-icon { width: 1.4rem; height: 1.4rem; }

/* La nota: lo que el PDF señalaba con 👉. La «fuerte», en la banda verde de la casa. */
.sf-bat-nota {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-top: clamp(1.75rem, 4.5vh, 2.5rem);
	padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
	border-radius: 16px;
	background-color: var(--wp--preset--color--verde-niebla, #e1f5ee);
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	max-width: 52rem;
}
.sf-bat-nota--fuerte {
	background-color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	color: var(--wp--preset--color--crema, #f7f5ef);
}
.sf-bat-nota__icon {
	flex: 0 0 auto;
	width: 1.6rem;
	height: 1.6rem;
	margin-top: 0.1rem;
	color: var(--wp--preset--color--primario, #00a74d); /* 4,6:1 sobre el verde bosque. */
}
.sf-bat-nota__body p {
	margin: 0 0 0.6rem;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 1.02rem;
	line-height: 1.6;
}
.sf-bat-nota__body p:last-child { margin-bottom: 0; }
.sf-bat-nota__lead { font-size: 1.15rem !important; font-weight: 500; }
.sf-bat-nota strong {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--primario, #00a74d);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
.sf-bat-nota__grito {
	font-family: var(--wp--preset--font-family--titulos) !important;
	font-size: clamp(1.35rem, 2.6vw, 1.75rem) !important;
	line-height: 1.1 !important;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

/* -------- 01 · Las dos tareas -------- */
.sf-bat-tareas {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

/* -------- 02 · En qué ayuda -------- */
.sf-bat-derecho {
	margin: 0 0 clamp(1.5rem, 4vh, 2.25rem);
	max-width: 40ch;
	padding-left: 1rem;
	border-left: 3px solid var(--wp--preset--color--primario, #00a74d);
	font-family: var(--wp--preset--font-family--cuerpo);
	font-weight: 500;
	font-size: clamp(1.2rem, 2.4vw, 1.5rem);
	line-height: 1.4;
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	text-wrap: pretty;
}
.sf-bat-ayuda {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(0.85rem, 2vw, 1.25rem);
}
.sf-bat-ayuda__item {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	padding: clamp(1.1rem, 2.2vw, 1.4rem);
	border-radius: 14px;
	background-color: var(--wp--preset--color--verde-niebla, #e1f5ee);
}
.sf-bat-ayuda__t {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-weight: 600;
	font-size: 1.04rem;
	line-height: 1.45;
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}

/* -------- 03 · Quién lo forma: solo los cargos -------- */
.sf-bat-equipo {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(0.75rem, 1.8vw, 1.15rem);
}
.sf-bat-equipo__item {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: clamp(1.1rem, 2.2vw, 1.4rem);
	border-radius: 14px;
	background-color: var(--wp--preset--color--crema, #f7f5ef);
	border: 1px solid color-mix( in srgb, var(--wp--preset--color--tinta, #173404) 12%, transparent );
}
.sf-bat-equipo__n {
	font-family: var(--wp--preset--font-family--titulos);
	font-size: clamp(1.9rem, 3.2vw, 2.4rem);
	line-height: 1;
	color: var(--sf-boton);
}
.sf-bat-equipo__cargo {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-weight: 700;
	font-size: 1.08rem;
	line-height: 1.3;
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}

/* -------- 04 · Qué es acoso y qué no -------- */
.sf-bat-acoso {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: start;
	gap: clamp(1.5rem, 4vw, 3rem);
}
.sf-bat-definicion {
	margin: 0;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-weight: 500;
	font-size: clamp(1.25rem, 2.4vw, 1.55rem);
	line-height: 1.45;
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	text-wrap: pretty;
}
/* El subrayado de rotulador: lo que el PDF marcaba en verde. */
.sf-bat-definicion strong {
	font-weight: 700;
	background-image: linear-gradient( transparent 58%, color-mix( in srgb, var(--wp--preset--color--primario, #00a74d) 30%, transparent ) 58% );
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
.sf-bat-acoso__intro {
	margin: 0;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-weight: 700;
	font-size: 1.04rem;
	line-height: 1.45;
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}
.sf-bat-noes {
	list-style: none;
	margin: 1rem 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}
.sf-bat-noes__item {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 1rem;
	line-height: 1.45;
	color: color-mix( in srgb, var(--wp--preset--color--tinta, #173404) 88%, transparent );
}
/* La ✕ del PDF, en rojo apagado: lo único rojo de la página, para que se lea «esto no». */
.sf-bat-noes__x {
	flex: 0 0 auto;
	width: 1.35rem;
	height: 1.35rem;
	padding: 0.2rem;
	margin-top: 0.05rem;
	border-radius: 50%;
	background-color: color-mix( in srgb, #b3261e 12%, transparent );
	color: #b3261e;
	stroke-width: 2.5;
}
.sf-bat-acoso__cierre {
	margin: 0;
	padding-top: 0.85rem;
	border-top: 1px solid color-mix( in srgb, var(--wp--preset--color--tinta, #173404) 14%, transparent );
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 0.98rem;
	line-height: 1.55;
	color: color-mix( in srgb, var(--wp--preset--color--tinta, #173404) 80%, transparent );
}

/* -------- 05 · Los 6 tipos -------- */
.sf-bat-tipos {
	list-style: none;
	margin: clamp(1.5rem, 4vh, 2.25rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2.5vw, 1.5rem);
}
.sf-bat-tipo { display: flex; flex-direction: column; }
.sf-bat-tipo__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.sf-bat-tipo__n {
	font-family: var(--wp--preset--font-family--titulos);
	font-size: clamp(2.2rem, 3.6vw, 2.8rem);
	line-height: 1;
	color: var(--sf-boton);
}
.sf-bat-tipo__k {
	margin: 1.1rem 0 0.5rem;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix( in srgb, var(--wp--preset--color--tinta, #173404) 70%, transparent );
}
.sf-bat-tipo__ej {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.45rem;
}
.sf-bat-tipo__ej li {
	position: relative;
	padding-left: 1.05rem;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 0.97rem;
	line-height: 1.45;
	color: color-mix( in srgb, var(--wp--preset--color--tinta, #173404) 86%, transparent );
}
.sf-bat-tipo__ej li::before {
	content: "";
	position: absolute;
	left: 0.1rem;
	top: 0.55em;
	width: 0.42rem;
	height: 0.42rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primario, #00a74d);
}
.sf-bat-tipo__nota {
	margin: auto 0 0;
	padding-top: 1.1rem;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-weight: 600;
	font-size: 0.98rem;
	line-height: 1.5;
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}
/* La nota se separa con un filete, pegado al pie de la tarjeta (margin auto arriba). */
.sf-bat-tipo__nota::before {
	content: "";
	display: block;
	margin-bottom: 0.85rem;
	border-top: 1px solid color-mix( in srgb, var(--wp--preset--color--tinta, #173404) 14%, transparent );
}

/* -------- 06 · Los 8 pasos -------- */
.sf-bat-pasos {
	list-style: none;
	margin: clamp(1.5rem, 4vh, 2.25rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1rem, 2.2vw, 1.4rem);
}
.sf-bat-paso {
	padding: clamp(1.15rem, 2.2vw, 1.5rem);
	border-radius: 14px;
	background-color: var(--wp--preset--color--verde-niebla, #e1f5ee);
	border: 1px solid color-mix( in srgb, var(--wp--preset--color--tinta, #173404) 10%, transparent );
}
.sf-bat-paso__n {
	display: inline-grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	color: var(--wp--preset--color--crema, #f7f5ef);
	font-family: var(--wp--preset--font-family--titulos);
	font-size: 1.35rem;
	line-height: 1;
}
.sf-bat-paso__t {
	margin: 0.85rem 0 0.45rem;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400;
	font-size: clamp(1.1rem, 1.7vw, 1.3rem);
	line-height: 1.1;
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	text-wrap: balance;
}
.sf-bat-paso__d {
	margin: 0;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 0.97rem;
	line-height: 1.5;
	color: color-mix( in srgb, var(--wp--preset--color--tinta, #173404) 84%, transparent );
}

/* -------- 07 · A quién acudir -------- */
.sf-bat-grito {
	margin: 0 0 1rem;
	max-width: 26ch;
	font-family: var(--wp--preset--font-family--titulos);
	font-size: clamp(1.7rem, 4vw, 2.6rem);
	line-height: 1.06;
	color: var(--sf-boton);
	text-wrap: balance;
}
.sf-bat-canales {
	list-style: none;
	margin: clamp(1.25rem, 3vh, 1.75rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(0.85rem, 2vw, 1.25rem);
}
.sf-bat-canal {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.sf-bat-canal__t {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-weight: 700;
	font-size: 1.08rem;
	line-height: 1.35;
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}
.sf-bat-canales__cierre { margin-top: clamp(1.25rem, 3vh, 1.75rem); }

/* -------- 08 · Familias -------- */
.sf-bat-familias {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2.5vw, 1.5rem);
}

/* -------- CIERRE (verde bosque): la última frase del PDF y el contacto -------- */
.sf-bat-cierre__frase {
	max-width: 30ch;
	margin-inline: auto;
	font-size: clamp(1.55rem, 3.4vw, 2.5rem);
	line-height: 1.12;
}
.sf-bat-cierre__pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 1rem;
}
.sf-bat-cierre__pill {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
	min-height: 3.25rem;
	padding: 0.7rem 1.4rem;
	border-radius: 16px;
	border: 1px solid color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 35%, transparent );
	color: var(--wp--preset--color--crema, #f7f5ef);
	font-family: var(--wp--preset--font-family--cuerpo);
	font-weight: 600;
	font-size: 1.05rem;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.sf-bat-cierre__pill:hover,
.sf-bat-cierre__pill:focus-visible {
	background-color: color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 10%, transparent );
	border-color: color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 65%, transparent );
}
.sf-bat-cierre__pill-label {
	font-family: var(--wp--preset--font-family--etiquetas);
	font-weight: 400;
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: color-mix( in srgb, var(--wp--preset--color--crema, #f7f5ef) 72%, transparent );
}

/* -------- Fade-up escalonado (la utilidad común, con el retraso de cada pieza) -------- */
.sf-js .sf-bat .sf-inview { transition-delay: calc( var(--i, 0) * 0.06s ); }

/* -------- Responsive -------- */
@media (max-width: 1100px) {
	.sf-bat-pasos { grid-template-columns: repeat(2, 1fr); }
	.sf-bat-ayuda,
	.sf-bat-canales { grid-template-columns: repeat(2, 1fr); }
	.sf-bat-equipo { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
	.sf-bat-tipos { grid-template-columns: repeat(2, 1fr); }
	.sf-bat-acoso { grid-template-columns: 1fr; }
	.sf-bat-familias { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
	/* Como el hero de servicios: una columna, y la imagen arriba (aquí el logo, pequeño). La regla
	   de dos columnas de arriba pesa más que la de page-servicios.css, así que se repite aquí. */
	.sf-bat-hero .sf-svc-hero__inner { grid-template-columns: 1fr; }
	.sf-bat-hero__logo { order: -1; width: min(44%, 10.5rem); justify-self: start; transform: rotate( -3deg ); }
	.sf-bat-tareas { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.sf-bat-tipos,
	.sf-bat-pasos,
	.sf-bat-ayuda,
	.sf-bat-canales { grid-template-columns: 1fr; }
	.sf-bat-equipo { grid-template-columns: 1fr; }
	.sf-bat-equipo__item { flex-direction: row; align-items: center; gap: 1rem; }
	.sf-bat-equipo__n { min-width: 2.6rem; }
	.sf-bat-ayuda__item,
	.sf-bat-canal { flex-direction: row; align-items: center; gap: 1rem; }
	.sf-bat-nota { flex-direction: column; gap: 0.75rem; }
	/* Los pasos, con el número al lado del título: ocho tarjetas seguidas piden ir al grano. */
	.sf-bat-paso { display: grid; grid-template-columns: auto 1fr; column-gap: 0.9rem; align-items: start; }
	.sf-bat-paso__n { grid-row: span 2; }
	.sf-bat-paso__t { margin-top: 0.55rem; }
}