/*
 * Buenos Fashion Aires - home.
 * Se encola SOLO en la portada (ver bfa_enqueue_styles).
 * Sin JS: las animaciones son CSS y solo sobre transform/opacity (no disparan layout).
 */

/* La home maneja sus propios anchos: neutralizamos el padding del contenedor de Kadence. */
.home #inner-wrap > .content-container,
.home .content-area { padding: 0; }
.bfa-home { overflow-x: clip; }
.bfa-home img { max-width: 100%; height: auto; }

/* ---------------- HERO ---------------- */
/*
 * Hero en blanco: el color de la pagina arranca recien en las tarjetas de seccion.
 * Deja respirar al titular y al buscador, que es lo que tiene que verse primero.
 */
.bfa-hero { background: #fff; }
.bfa-hero__inner {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	align-items: center;
	gap: 40px;
	padding-block: 64px;
	min-height: 420px;
}
.bfa-hero__eyebrow {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--bfa-pink-ink);
}
.bfa-hero__title {
	margin: 0 0 18px;
	font-family: var(--bfa-font);
	font-size: clamp(32px, 4.6vw, 56px);
	line-height: 1.08;
	font-weight: 800;
	color: var(--bfa-navy);
	letter-spacing: -.02em;
}
.bfa-hero__text {
	margin: 0 0 28px;
	max-width: 46ch;
	font-size: 17px;
	line-height: 1.65;
	color: #33445A;
}
.bfa-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* ---------------- Tres fichas del hero (una por genero) ---------------- */
/*
 * Reemplazan a la foto decorativa. Son fichas reales sorteadas en cada carga:
 * muestran marca, nombre y para quien es, que es lo que hace entender de entrada
 * que esto es un catalogo de fichas y no una tienda.
 */
.bfa-hero__picks {
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}
.bfa-pick {
	min-width: 0;
	display: block;
	padding: 12px 12px 14px;
	background: #fff;
	border: 1px solid var(--bfa-line);
	border-radius: 11px;
	text-decoration: none;
	/* El mismo par de capas que el resto de las tarjetas (ver bfa-base.css):
	   una corta de contacto y una larga y difusa que la despega. */
	box-shadow:
		0 3px 6px rgba(0, 62, 112, .10),
		0 18px 42px rgba(0, 62, 112, .24);
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.bfa-pick:hover {
	transform: translateY(-7px);
	border-color: var(--bfa-pink);
	box-shadow:
		0 6px 14px rgba(0, 62, 112, .13),
		0 32px 64px rgba(0, 62, 112, .32);
}
.bfa-pick__tag {
	display: inline-block;
	margin-bottom: 10px;
	padding: 3px 9px;
	border-radius: 11px;
	background: var(--bfa-blush);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bfa-pink-ink);   /* 5,07:1 sobre el blush */
}
.bfa-pick__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;          /* alto reservado -> sin CLS */
	padding: 6px;
	overflow: hidden;
}
.bfa-pick__img {
	width: auto; height: auto;
	max-width: 100%; max-height: 100%;
	object-fit: contain;
}
.bfa-pick__brand {
	display: block;
	margin-top: 10px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bfa-pink-ink);
}
.bfa-pick__title {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	line-height: 1.35;
	font-weight: 600;
	color: var(--bfa-ink);
	overflow-wrap: anywhere;
}
.bfa-pick:hover .bfa-pick__title { color: var(--bfa-navy); }

/* ---------------- Buscador: banda horizontal bajo el hero ---------------- */
.bfa-searchbar {
	padding-block: 26px;
	background: var(--bfa-blush);
	border-block: 1px solid var(--bfa-line);
}
/* En horizontal la etiqueta va al lado del campo, no encima. */
.bfa-searchbar .bfa-finder {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 8px 20px;
}
.bfa-searchbar .bfa-finder__label { margin-bottom: 0; white-space: nowrap; }
.bfa-searchbar .bfa-finder__hint { grid-column: 2; margin-top: 4px; }

.bfa-finder__label {
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bfa-navy);
}
/* relative: el panel de sugerencias se ancla acá, al ancho de campo + botón. */
.bfa-finder__row { position: relative; display: flex; gap: 8px; }

/* ---------------- Sugerencias en vivo ---------------- */
.bfa-sugerencias {
	position: absolute;
	z-index: 30;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: min(420px, 62vh);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	border: 1px solid var(--bfa-line);
	border-radius: 11px;
	box-shadow: 0 18px 40px rgba(0, 62, 112, .16);
	text-align: left;
}
.bfa-sug {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 12px;
	border-bottom: 1px solid var(--bfa-line);
	text-decoration: none;
	color: inherit;
}
.bfa-sug:last-of-type { border-bottom: 0; }
.bfa-sug:hover,
.bfa-sug.is-activo { background: var(--bfa-blue); }
/*
 * Selector con el padre a proposito: `.bfa-home img { height: auto }` (0-1-1) le
 * gana a un `.bfa-sug__img` suelto (0-1-0) y la miniatura conservaba su alto
 * natural, estirando cada fila del panel.
 */
.bfa-sugerencias .bfa-sug__img {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	object-fit: contain;   /* la miniatura no se recorta */
	background: #fff;
}
.bfa-sug__txt { min-width: 0; flex: 1 1 auto; }
.bfa-sug__marca {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--bfa-pink-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bfa-sug__nombre {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--bfa-ink);
	overflow-wrap: anywhere;
}
.bfa-sug mark {
	background: transparent;    /* resaltar sin pintar un bloque amarillo */
	color: inherit;
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.bfa-sug__dato {
	flex: 0 0 auto;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--bfa-navy);
	white-space: nowrap;
}
.bfa-sug__todos {
	display: block;
	width: 100%;
	padding: 11px 12px;
	border: 0;
	border-top: 1px solid var(--bfa-line);
	background: var(--bfa-rose);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--bfa-navy);      /* 8,40:1 sobre el rosa claro */
	text-align: center;
	cursor: pointer;
}
.bfa-sug__todos:hover { background: var(--bfa-navy); color: #fff; }
.bfa-sug__vacio,
.bfa-sug__cargando {
	margin: 0;
	padding: 16px 14px;
	font-size: 14px;
	color: var(--bfa-ink-soft);
}
@media (max-width: 520px) {
	.bfa-sug__dato { display: none; }   /* el ancho lo necesita el nombre */
}
.bfa-finder__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;          /* objetivo tactil comodo */
	padding: 0 14px;
	font-size: 16px;           /* menos de 16px hace que iOS haga zoom al enfocar */
	color: var(--bfa-ink);
	background: #fff;
	border: 1px solid #C3CDD8;
	border-radius: 11px;
}
.bfa-finder__input::placeholder { color: var(--bfa-muted); opacity: 1; }
.bfa-finder__input:focus-visible,
.bfa-finder__btn:focus-visible {
	outline: 3px solid var(--bfa-pink-deep);
	outline-offset: 2px;
}
.bfa-finder__btn { flex: 0 0 auto; border: 0; cursor: pointer; }
/* --bfa-muted se cae a 3,66:1 sobre el blush de la banda: va el gris oscuro. */
.bfa-finder__hint { margin: 10px 0 0; font-size: 13px; color: var(--bfa-ink-soft); }
.bfa-finder__hint a { color: var(--bfa-pink-ink); font-weight: 700; text-decoration: none; }
.bfa-finder__hint a:hover { color: var(--bfa-navy); text-decoration: underline; }



/*
 * Bajo ~760px la etiqueta con nowrap dejaria de entrar al lado del campo:
 * el buscador vuelve a apilarse.
 */
@media (max-width: 760px) {
	.bfa-searchbar .bfa-finder { grid-template-columns: 1fr; gap: 8px; }
	.bfa-searchbar .bfa-finder__label { margin-bottom: 2px; white-space: normal; }
	.bfa-searchbar .bfa-finder__hint { grid-column: 1; }
}
@media (max-width: 520px) {
	.bfa-finder__row { flex-wrap: wrap; }
	.bfa-finder__btn { width: 100%; }
}


@media (max-width: 860px) {
	.bfa-hero__inner {
		grid-template-columns: 1fr;
		padding-block: 40px;
		min-height: 0;
		text-align: center;
	}
	.bfa-hero__text { margin-inline: auto; }
	.bfa-hero__cta { justify-content: center; }
	/*
	 * Las tres fichas van DEBAJO del titular en movil (sin order:-1, que era lo
	 * que hacia la foto): primero se entiende de que va el sitio.
	 */
	.bfa-hero__picks { text-align: left; }
}

/* ---------------- Manifiesto ----------------
 * La banda de discurso, en el mismo negro azulado de los heros de ficha, nota y
 * archivo: es el registro "editorial" del sitio y ya está aprendido.
 *
 * La foto va a la izquierda y sangra hasta el borde del contenedor: sin marco ni
 * lámina, porque es una foto de atmósfera y no un producto recortado.
 */
.bfa-manifiesto { background: #0B0F14; }
.bfa-manifiesto__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 54px;
	padding-block: 72px;
}
.bfa-manifiesto__foto { margin: 0; }
.bfa-manifiesto__foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 11px;
}
.bfa-manifiesto__eyebrow {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--bfa-pink);            /* 6,35:1 sobre el negro */
}
.bfa-manifiesto__title {
	margin: 0 0 18px;
	font-size: clamp(30px, 3.8vw, 44px);
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -.02em;
	color: #fff;                       /* 19,22:1 */
}
.bfa-manifiesto__lead {
	margin: 0 0 22px;
	max-width: 48ch;
	font-size: 17px;
	line-height: 1.7;
	color: #C7D8E8;                    /* 11,04:1 */
}
.bfa-manifiesto__lista {
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}
.bfa-manifiesto__lista li {
	position: relative;
	padding-left: 26px;
	font-size: 15px;
	line-height: 1.55;
	color: #fff;
}
/* La barrita del acento, la misma que separa la marca en la tarjeta. */
.bfa-manifiesto__lista li::before {
	content: "";
	position: absolute;
	top: .62em;
	left: 0;
	width: 14px;
	height: 2px;
	background: var(--bfa-blue);
}
.bfa-manifiesto__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* ---- Variantes ----
 * La foto cambia de lado y el fondo alterna, porque cuatro bandas iguales
 * seguidas se leen como relleno. El fondo de cada una se elige por lo que tiene
 * ARRIBA y ABAJO en la página: dos superficies del mismo color pegadas se ven
 * como una sola banda gigante.
 */
.bfa-manifiesto--invertida .bfa-manifiesto__foto { order: 2; }

.bfa-manifiesto--rosa    { background: var(--bfa-blush); }
.bfa-manifiesto--celeste { background: var(--bfa-blue); }

.bfa-manifiesto--claro .bfa-manifiesto__eyebrow { color: var(--bfa-pink-ink); }
.bfa-manifiesto--claro .bfa-manifiesto__title   { color: var(--bfa-navy); }
.bfa-manifiesto--claro .bfa-manifiesto__lead    { color: var(--bfa-ink); }
.bfa-manifiesto--claro .bfa-manifiesto__lista li { color: var(--bfa-ink); }
.bfa-manifiesto--claro .bfa-manifiesto__lista li::before { background: var(--bfa-pink-ink); }

@media (max-width: 900px) {
	.bfa-manifiesto__inner { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 48px; }
	/* En una columna la foto va siempre primero: el `order` de escritorio la
	   mandaba abajo del texto y la banda arrancaba con un muro de letras. */
	.bfa-manifiesto--invertida .bfa-manifiesto__foto { order: 0; }
}

/* ---------------- Tres pasos ---------------- */
.bfa-paso { min-width: 0; }
.bfa-paso__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}
.bfa-paso__media {
	position: relative;
	aspect-ratio: 16 / 10;
	margin-bottom: 16px;
	border-radius: 11px;
	overflow: hidden;
	background: #fff;
}
.bfa-paso__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* El número va sobre la foto, en una pastilla opaca: encima de una foto
   cualquiera un texto suelto no tiene contraste garantizado. */
.bfa-paso__num {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 7px 13px;
	background: var(--bfa-navy);
	border-radius: 11px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .08em;
	color: #fff;                       /* 10,92:1 sobre el navy */
}
.bfa-paso__title {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 800;
	color: var(--bfa-navy);
}
.bfa-paso__texto {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--bfa-ink-soft);
}
/* margin-top auto: el "Leer la nota" queda alineado abajo en las tres. */
.bfa-paso__go {
	margin-top: auto;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--bfa-pink-ink);
}
.bfa-paso__link:hover .bfa-paso__title { color: var(--bfa-pink-ink); }
.bfa-paso__link:hover .bfa-paso__go { text-decoration: underline; }

/* ---------------- Estructura de sección ---------------- */
.bfa-section { padding-block: 56px; }
/*
 * Fondo alterno de las filas por marca: seis secciones seguidas con la misma
 * grilla se leen como un bloque unico. El tinte las separa sin agregar bordes.
 * Rosa claro de la paleta; encima solo va navy (8,40) y --bfa-pink-ink (5,07),
 * que es justo lo que usa el encabezado de seccion. Las tarjetas son blancas.
 */
.bfa-section--tint { background: var(--bfa-rose); }
.bfa-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 26px;
}
.bfa-section__title {
	margin: 0;
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--bfa-navy);
}
.bfa-section--cats .bfa-section__title { text-align: center; }
.bfa-section__sub {
	margin: 8px 0 30px;
	text-align: center;
	color: var(--bfa-muted);
	font-size: 15px;
}
.bfa-section__more {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 700;
	color: var(--bfa-pink-ink);
	text-decoration: none;
}
.bfa-section__more:hover { color: var(--bfa-navy); text-decoration: underline; }

/* ---------------- Tarjetas de sección ---------------- */
.bfa-cats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
/*
 * Cada tarjeta con su tinte, los tres del logo (el verde #E8F0E8 del original no
 * pertenecia a la paleta). La barra superior en el tono saturado remata el bloque.
 * El cuerpo va en --bfa-ink-soft y no en --bfa-muted: el gris medio se cae a 3,66:1
 * sobre el blush, mientras que este se mantiene entre 6,6 y 8,6:1 en los tres.
 */
.bfa-cat {
	min-width: 0;
	display: block;
	padding: 31px 28px 30px;
	border-top: 4px solid var(--bfa-navy);
	border-radius: 11px;
	text-decoration: none;
	color: var(--bfa-ink);
	transition: transform .2s ease;
}
.bfa-cat:hover { transform: translateY(-4px); }
.bfa-cat--a { background: var(--bfa-blush); border-top-color: var(--bfa-pink-deep); }
.bfa-cat--b { background: var(--bfa-blue);  border-top-color: var(--bfa-navy); }
/* El borde era dorado (#C9922F): el unico color del sitio fuera del rosa y el azul. */
.bfa-cat--c { background: var(--bfa-rose);  border-top-color: var(--bfa-pink-ink); }
.bfa-cat__title { margin: 0 0 10px; font-size: 21px; font-weight: 800; color: var(--bfa-navy); }
.bfa-cat__text { margin: 0 0 18px; font-size: 15px; color: var(--bfa-ink-soft); }
.bfa-cat__link { font-size: 14px; font-weight: 700; color: var(--bfa-pink-ink); }

@media (max-width: 780px) {
	.bfa-cats { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------------- Marcas ---------------- */
/*
 * Fondo blanco y no el celeste de antes: el tile de marca ya es blanco, asi que
 * sobre celeste lo que se veia era el recorte de la caja y no la marca. En
 * blanco el tile se funde con la seccion y lo que lo separa es la sombra.
 */
.bfa-section--brands { background: #fff; }
.bfa-brands {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bfa-brands__item { min-width: 0; }
.bfa-brands__item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 84px;
	padding: 12px 10px 14px;
	background: #fff;
	border: 1px solid var(--bfa-line);
	border-radius: 11px;
	text-align: center;
	text-decoration: none;
	/* Mismo par de capas que las cards de perfume y de nota (bfa-base.css). */
	box-shadow:
		0 3px 6px rgba(0, 62, 112, .10),
		0 18px 42px rgba(0, 62, 112, .24);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.bfa-brands__item a:hover {
	border-color: var(--bfa-pink);
	box-shadow:
		0 6px 14px rgba(0, 62, 112, .13),
		0 32px 64px rgba(0, 62, 112, .32);
	transform: translateY(-7px);
}
/*
 * Miniatura del perfume mas reciente de la marca. Caja cuadrada porque el
 * tamano "miniatura" de Ajustes multimedia quedo en 200x200 SIN recorte: las
 * fotos son casi todas verticales y con una caja apaisada se veian cortadas.
 * El alto fijo reserva el espacio -> sin CLS y todos los tiles a la misma altura.
 */
.bfa-brands__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin-bottom: 2px;
}
.bfa-brands__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.bfa-brands__name {
	font-size: 14px;
	font-weight: 700;
	color: var(--bfa-navy);
	overflow-wrap: anywhere; /* marcas largas no rompen la grilla */
}
.bfa-brands__count { font-size: 12px; color: var(--bfa-muted); }

@media (max-width: 1000px) { .bfa-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .bfa-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* La grilla (.bfa-grid) y las dos tarjetas (.bfa-card, .bfa-post) viven en
   bfa-base.css: las usan también las vistas singulares, que no cargan esta
   hoja. */

/* ---------------- Promos ---------------- */
.bfa-promos__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
/*
 * El par mas fuerte de la pagina: rosa profundo y navy, los dos saturados y con
 * texto blanco. Es la forma de meter color intenso sin pelear con la legibilidad
 * (relleno oscuro + texto claro rinde mas contraste que cualquier pastel).
 * Los botones se invierten a blanco, si no quedaban navy sobre navy.
 */
.bfa-promo {
	min-width: 0;
	padding: 44px 36px;
	border-radius: 11px;
}
.bfa-promo--pink { background: var(--bfa-pink-deep); }
.bfa-promo--blue { background: var(--bfa-navy); }
.bfa-promo__title { margin: 0 0 12px; font-size: clamp(20px, 2.2vw, 27px); font-weight: 800; color: var(--bfa-navy); }
.bfa-promo__text { margin: 0 0 22px; max-width: 42ch; color: #33445A; font-size: 15px; line-height: 1.6; }

.bfa-promo--blue .bfa-promo__title,
.bfa-promo--pink .bfa-promo__title { color: #fff; }
.bfa-promo--blue .bfa-promo__text { color: #C7D8E8; }
/* #FBE4EC se quedaba en 4,35:1 sobre el rosa profundo; este llega a 4,81. */
.bfa-promo--pink .bfa-promo__text { color: #FEF2F6; }
.bfa-promo--blue .bfa-btn--dark,
.bfa-promo--pink .bfa-btn--dark { background: #fff; }
.bfa-promo--blue .bfa-btn--dark { color: var(--bfa-navy); }
.bfa-promo--pink .bfa-btn--dark { color: var(--bfa-pink-ink); }
.bfa-promo--blue .bfa-btn--dark:hover { background: var(--bfa-blue); color: var(--bfa-navy); }
.bfa-promo--pink .bfa-btn--dark:hover { background: var(--bfa-blush); color: var(--bfa-pink-ink); }

@media (max-width: 780px) { .bfa-promos__grid { grid-template-columns: 1fr; } }

/* ---------------- Blog ---------------- */
.bfa-section--blog { background: var(--bfa-blush); }

/* ---------------- Cierre ---------------- */
/*
 * Rosa profundo y no navy: el pie del sitio TAMBIEN es navy, asi que el cierre
 * y el footer se fundian en un solo bloque azul de media pantalla y la llamada
 * a la accion desaparecia adentro. En rosa se lee como una banda propia y
 * ademas rima con la de promos, que usa el mismo relleno.
 *
 * Es el unico rosa del sitio que admite texto blanco encima (5,25:1); el del
 * logo da 3,03 y no llega.
 */
.bfa-closing {
	background: var(--bfa-pink-deep);
	color: #fff;
	text-align: center;
	padding-block: 60px;
}
.bfa-closing__title { margin: 0 0 10px; font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; color: #fff; }
/* Blanco puro, no el celeste de antes: sobre el rosa daba 2,4:1. */
.bfa-closing__text { margin: 0 0 24px; color: #fff; font-size: 16px; }
/*
 * El boton era rosa profundo: sobre el mismo rosa desaparecia. Va blanco solido
 * con el rosa oscuro de texto, que es el par de mas contraste disponible.
 */
.bfa-closing .bfa-btn--primary { background: #fff; color: var(--bfa-pink-ink); }
.bfa-closing .bfa-btn--primary:hover { background: var(--bfa-navy); color: #fff; }

/*
 * Renderizado diferido de lo que está bajo el pliegue (web.dev/optimize-inp).
 * contain-intrinsic-size reserva alto estimado para no introducir CLS.
 */
@media (min-width: 861px) {
	.bfa-section--blog,
	.bfa-closing {
		content-visibility: auto;
		contain-intrinsic-size: auto 420px;
	}
}

/* ---------------- Páginas Marcas / Blog ---------------- */
.bfa-hero--slim .bfa-container { padding-block: 44px; }
.bfa-hero--slim .bfa-hero__title { margin-bottom: 12px; }
.bfa-hero--slim .bfa-hero__text { margin-bottom: 0; }

.bfa-alpha {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 34px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--bfa-line);
}
.bfa-alpha a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 38px;   /* objetivo táctil cómodo */
	padding: 0 8px;
	border: 1px solid var(--bfa-line);
	border-radius: 11px;
	font-size: 14px;
	font-weight: 700;
	color: var(--bfa-navy);
	text-decoration: none;
}
.bfa-alpha a:hover { background: var(--bfa-navy); color: #fff; border-color: var(--bfa-navy); }

.bfa-alpha-group { margin-bottom: 40px; scroll-margin-top: 20px; }
.bfa-alpha-group__title {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 800;
	color: var(--bfa-pink-ink);
	border-bottom: 2px solid var(--bfa-blush);
	padding-bottom: 8px;
}

.bfa-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 40px;
}
.bfa-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	padding: 0 12px;
	border: 1px solid var(--bfa-line);
	border-radius: 11px;
	font-weight: 700;
	font-size: 14px;
	color: var(--bfa-navy);
	text-decoration: none;
}
.bfa-pagination .page-numbers.current,
.bfa-pagination .page-numbers:hover { background: var(--bfa-navy); color: #fff; border-color: var(--bfa-navy); }

/* ---------------- Página de búsqueda ---------------- */
/*
 * Titulo mas chico que en la home: aca no es una portada, es un encabezado de
 * resultados y compite con la grilla que viene abajo.
 */
.bfa-searchpage .bfa-hero--slim .bfa-container { padding-block: 34px 26px; }
.bfa-searchpage .bfa-hero__title {
	font-size: clamp(26px, 3.4vw, 38px);
	line-height: 1.2;
}
.bfa-hero__term {
	color: var(--bfa-pink-ink);   /* 7,57:1 sobre blanco */
	overflow-wrap: anywhere;      /* una búsqueda larga no rompe el layout */
}
/* El padding vive en la sección, no en el contenedor. */
.bfa-searchpage .bfa-section { padding-block: 38px 56px; }

/* ---------------- Búsqueda sin resultados ---------------- */
.bfa-vacio {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}
.bfa-vacio__texto {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--bfa-ink-soft);
}
.bfa-vacio__marcas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 0 0 24px;
}
.bfa-vacio__marca {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 14px;
	background: var(--bfa-blue);
	border-radius: 11px;
	font-size: 13px;
	font-weight: 700;
	color: var(--bfa-navy);        /* 7,39:1 sobre el celeste */
	text-decoration: none;
}
.bfa-vacio__marca:hover { background: var(--bfa-navy); color: #fff; }
/* Los dos botones del 404: en el teléfono se apilan sin quedar pegados. */
.bfa-vacio__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: 0;
}

/* En el bloque de cierre del 404 el título va pegado a los chips de marca. */
.bfa-404 .bfa-vacio .bfa-section__title { margin-bottom: 18px; }

@media (prefers-reduced-motion: reduce) {
	.bfa-cat, .bfa-brands__item a, .bfa-card__img, .bfa-card__media, .bfa-pick { transition: none; }
	.bfa-cat:hover, .bfa-brands__item a:hover, .bfa-pick:hover { transform: none; }
	.bfa-card__link:hover .bfa-card__img,
	.bfa-card__link:hover { transform: none; }
}

/* ---------------- Archivo de autor ---------------- */
/*
 * Mismo hero claro que Blog y Marcas, pero a dos columnas para meter la foto.
 * La foto va PRIMERO en el DOM y no despues del texto: en el telefono, cuando
 * la grilla cae a una columna, queda arriba, que es donde se espera un retrato.
 * Asi no hace falta ningun `order`.
 */
.bfa-autor__inner {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	align-items: center;
	gap: 34px;
}
/*
 * Redondo con la foto recortada por el centro. `aspect-ratio: 1` + `object-fit:
 * cover` en vez de dejar que la imagen mande: el `medium` de este sitio no
 * recorta, asi que un retrato apaisado llegaria con otra proporcion y el circulo
 * saldria ovalado.
 */
.bfa-autor__foto {
	width: 190px;
	height: 190px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--bfa-rose);
}
.bfa-autor__foto .bfa-autor__img,
.bfa-autor__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.bfa-autor__texto .bfa-hero__title { margin-bottom: 14px; }
.bfa-autor__texto .bfa-hero__text {
	max-width: 62ch;   /* mas ancho que el hero de la home: aca es una biografia */
	margin-bottom: 18px;
}
/* La tira de datos es la misma de la ficha, pero sobre fondo claro. */
.bfa-autor .bfa-single__datos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bfa-autor .bfa-single__datos li {
	padding: 7px 13px;
	background: transparent;
	border: 1px solid var(--bfa-line);
	border-radius: 11px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--bfa-navy);   /* 10,92:1 sobre blanco */
}

@media (max-width: 720px) {
	.bfa-autor__inner {
		grid-template-columns: 1fr;
		gap: 22px;
		justify-items: center;
		text-align: center;
	}
	.bfa-autor__foto { width: 148px; height: 148px; }
	.bfa-autor__texto .bfa-hero__text { max-width: none; }
	.bfa-autor .bfa-single__datos { justify-content: center; }
}