/*
 * Buenos Fashion Aires - fichas, notas y páginas.
 * Se encola solo en vistas singulares (ver bfa_enqueue_contenido).
 *
 * Mismo lenguaje que la home: títulos navy, acentos en --bfa-pink-ink, tintes
 * del logo para las superficies y radio de 11px en todo.
 */

/* ---------------- Ancho y aire ---------------- */
/*
 * Sin barra lateral el contenido quedaba a lo ancho de 1200px, ilegible. Se
 * centra y se limita la medida: ~78 caracteres por línea con el cuerpo a 17px.
 */
.single .entry-content-wrap,
.page .entry-content-wrap,
.single .comments-area,
.page .comments-area,
.single .post-navigation,
.single .entry-author {
	max-width: 880px;
	margin-inline: auto;
}
.single .site-main,
.page .site-main { padding-block: 8px 0; }

/*
 * Cabecera de página: Kadence la pinta de #EDF2F7, el gris azulado que ya se
 * sacó del resto del sitio por no salir del logo. Va en blanco con una línea,
 * igual que el hero de la home y el de la búsqueda.
 */
.entry-hero.page-hero-section,
.entry-hero.post-hero-section {
	background: #fff;
	border-bottom: 1px solid var(--bfa-line);
}
.entry-hero .entry-title { color: var(--bfa-navy); }

/* ---------------- Migas ---------------- */
.single .kadence-breadcrumbs,
.page .kadence-breadcrumbs {
	margin-bottom: 18px;
	font-size: 13px;
	color: var(--bfa-muted);
}
.kadence-breadcrumbs a { color: var(--bfa-navy); text-decoration: none; }
.kadence-breadcrumbs a:hover { color: var(--bfa-pink-ink); text-decoration: underline; }

/* ---------------- Encabezado ---------------- */
.bfa-single__eyebrow {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.bfa-single__eyebrow a { color: var(--bfa-pink-ink); text-decoration: none; }
.bfa-single__eyebrow a:hover { text-decoration: underline; }

.single .entry-title,
.page .entry-title {
	margin: 0 0 14px;
	font-size: clamp(28px, 3.6vw, 42px);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--bfa-navy);
}

/* Datos duros del perfume: género, concentración y volumen. */
.bfa-single__datos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}
.bfa-single__datos li {
	padding: 5px 11px;
	background: var(--bfa-blue);
	border-radius: 11px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--bfa-navy);       /* 7,39:1 sobre el celeste */
}

.single .entry-meta,
.page .entry-meta {
	margin-bottom: 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--bfa-line);
	font-size: 13px;
	color: var(--bfa-muted);
}
.single .entry-meta a,
.page .entry-meta a { color: var(--bfa-ink-soft); text-decoration: none; }
.single .entry-meta a:hover,
.page .entry-meta a:hover { color: var(--bfa-pink-ink); text-decoration: underline; }

/* =========================================================================
 * Hero de las vistas singulares: ficha y nota
 *
 * Dos columnas: la foto a la izquierda y el texto a la derecha. Se arma con
 * grilla sobre el encabezado que ya imprime Kadence, así que el orden del DOM
 * (eyebrow, h1, figura, datos, cta, meta) sigue siendo el semántico y
 * la colocación la decide el CSS.
 *
 * `.bfa-hero-oscuro` es lo que comparten las dos: la banda negra a sangre, el
 * texto invertido y la colocación. Lo que cambia (la lámina blanca del producto
 * frente a la foto a sangre de la nota) va en `.bfa-ficha` / `.bfa-nota`.
 * ====================================================================== */
.bfa-hero-oscuro .entry-header.post-title {
	display: grid;
	grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	column-gap: 52px;
	align-items: center;
	margin-bottom: 42px;
	padding: 36px 30px 40px;
	/*
	 * Banda a ancho completo sin salir del contenedor de 880px: la pinta la
	 * sombra extendida y el clip-path le corta el sangrado vertical. Se hace
	 * así y no con `margin-inline: calc(50% - 50vw)` porque 100vw incluye el
	 * ancho de la barra de scroll y aparece scroll horizontal.
	 */
	/*
	 * Negro azulado, no #000: conserva una traza del navy del logo y sobre
	 * pantalla se lee más profundo que el negro plano.
	 */
	background: #0B0F14;
	box-shadow: 0 0 0 100vmax #0B0F14;
	clip-path: inset(0 -100vmax);
}

/* ---- Hero en oscuro: todo el texto se invierte ---- */
.bfa-hero-oscuro .entry-header.post-title .entry-title { color: #fff; }        /* 19,22:1 */
/*
 * Acá sí entra el rosa del logo: sobre blanco da 3,03 y está prohibido para
 * texto, pero sobre este negro da 6,35 y es el acento más fiel a la marca.
 */
.bfa-hero-oscuro .entry-header.post-title .bfa-single__eyebrow a { color: var(--bfa-pink); }
.bfa-hero-oscuro .entry-header.post-title .bfa-single__eyebrow a:hover { color: #fff; }

/* En contorno, no rellenas: pesan menos al lado del titular. */
.bfa-hero-oscuro .entry-header.post-title .bfa-single__datos li {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .28);
	color: var(--bfa-blue);                                          /* 13,00:1 */
}

/* Botón lleno: sobre negro un fantasma se pierde. */
.bfa-ficha .entry-header.post-title .bfa-btn--ghost {
	background: var(--bfa-pink-deep);
	box-shadow: none;
	color: #fff;                                                     /* 5,25:1 */
}
.bfa-ficha .entry-header.post-title .bfa-btn--ghost:hover { background: #fff; color: #0B0F14; }

.bfa-hero-oscuro .entry-header.post-title .entry-meta,
.bfa-hero-oscuro .entry-header.post-title .entry-meta a,
.bfa-hero-oscuro .entry-header.post-title .fechas-articulo,
.bfa-hero-oscuro .entry-header.post-title .kadence-breadcrumbs { color: #B6C2CE; }   /* 10,61:1 */
.bfa-hero-oscuro .entry-header.post-title .kadence-breadcrumbs a,
.bfa-hero-oscuro .entry-header.post-title .entry-meta a { color: var(--bfa-blue); }
.bfa-hero-oscuro .entry-header.post-title .kadence-breadcrumbs a:hover,
.bfa-hero-oscuro .entry-header.post-title .entry-meta a:hover { color: #fff; }
.bfa-hero-oscuro .entry-header.post-title .fechas-articulo .fecha-actualizacion strong { color: #fff; }

/* La foto se despega del negro con sombra, sin borde. */
.bfa-hero-oscuro .entry-header.post-title .bfa-single__foto {
	border-color: transparent;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
/* La banda arranca pegada a la tira de marcas, sin franja blanca arriba. */
.bfa-hero-oscuro .site-main { padding-top: 0; }
.bfa-hero-oscuro .content-area > .content-container { padding-top: 0; }
/* Las migas cruzan las dos columnas, arriba de todo. */
.bfa-hero-oscuro .entry-header.post-title .kadence-breadcrumbs {
	grid-column: 1 / -1;
	grid-row: 1;
	margin-bottom: 22px;
}
/*
 * span 20 y no `1 / -1`: sin filas explícitas, -1 apunta a la línea 2 y la
 * foto ocuparía una sola fila. Las filas de más quedan vacías, no molestan.
 *
 * El panel va BLANCO: las fotos de producto ya vienen sobre fondo blanco (no
 * son PNG con transparencia), así que cualquier tinte dejaba ver el rectángulo
 * de la foto recortado adentro, como una caja dentro de otra.
 */
.bfa-ficha .entry-header.post-title .bfa-single__foto {
	grid-column: 1;
	grid-row: 2 / span 20;
	height: 440px;
	margin: 0;
	padding: 30px;
	background: #fff;
	border: 1px solid var(--bfa-line);
	box-shadow: 0 10px 30px rgba(0, 62, 112, .08);
}
.bfa-hero-oscuro .entry-header.post-title > :not(.bfa-single__foto):not(.kadence-breadcrumbs) { grid-column: 2; }

/* Dentro del hero la línea de fechas va suelta, sin su banda. */
.bfa-hero-oscuro .entry-header.post-title .fechas-articulo {
	justify-content: flex-start;
	margin: 6px 0 0;
	padding: 0;
	border: 0;
	text-align: left;
}

.bfa-hero-oscuro .entry-header.post-title .bfa-single__eyebrow { margin-bottom: 10px; letter-spacing: .2em; }
.bfa-hero-oscuro .entry-header.post-title .entry-title { margin-bottom: 20px; }
.bfa-hero-oscuro .entry-header.post-title .bfa-single__datos { margin-bottom: 22px; }
.bfa-single__cta { margin: 0 0 22px; }
.bfa-single__cta .bfa-btn { font-size: 13px; padding: 12px 22px; }
/* La línea de autor/fecha ya no necesita separador: lo pone el hero. */
.bfa-hero-oscuro .entry-header.post-title .entry-meta {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

/* ---------------- Lo propio de la nota ---------------- */
/*
 * Misma estructura que la ficha: foto a la izquierda, texto a la derecha, misma
 * columna de 420px. Lo único que cambia es el tratamiento de la imagen y el
 * cuerpo del titular.
 *
 * El titular baja de 42 a 34px SOLO acá: en 348px de columna un nombre de
 * perfume entra en dos líneas, pero un titular de nota tiene 90 caracteres y a
 * 42px salía en ocho, con el ":" colgando solo al principio de una.
 */
.bfa-nota .entry-header.post-title .entry-title {
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.2;
	margin-bottom: 18px;
}

/*
 * Sin lámina blanca ni padding, al revés que el perfume: la foto de una nota es
 * una foto, no un producto recortado sobre fondo blanco, así que llena su marco
 * y se recorta al centro.
 */
.bfa-nota .entry-header.post-title .bfa-nota__foto {
	grid-column: 1;
	grid-row: 2 / span 20;           /* mismo motivo que en la ficha: -1 no sirve */
	height: 360px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: transparent;
}
.bfa-nota .entry-header.post-title .bfa-nota__foto .bfa-single__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 900px) {
	.bfa-hero-oscuro .entry-header.post-title {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
		padding-bottom: 28px;
		margin-bottom: 32px;
	}
	/* order -2: la foto usa -1 y si no las migas quedaban debajo de la foto. */
	.bfa-hero-oscuro .entry-header.post-title .kadence-breadcrumbs { grid-row: auto; order: -2; margin-bottom: 16px; }
	.bfa-hero-oscuro .entry-header.post-title .bfa-single__foto {
		grid-column: 1;
		grid-row: auto;              /* vuelve al flujo: foto arriba del texto */
		order: -1;
		height: 320px;
		margin-bottom: 24px;
	}
	.bfa-ficha .entry-header.post-title .bfa-single__foto { padding: 18px; }
	.bfa-nota .entry-header.post-title .bfa-nota__foto { height: 240px; }
	.bfa-hero-oscuro .entry-header.post-title > :not(.bfa-single__foto):not(.kadence-breadcrumbs) { grid-column: 1; }
}

/* ---------------- Foto del perfume ---------------- */
/*
 * Entera y centrada, con el alto limitado: son fotos verticales y a tamaño
 * completo empujaban todo el texto fuera de la primera pantalla. El alto fijo
 * del contenedor además reserva el espacio, así que no hay salto de layout.
 */
.bfa-single__foto {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 400px;
	margin: 0 0 32px;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--bfa-line);
	border-radius: 11px;
}
/* El padre para ganarle a `img { height: auto }` del tema. */
.bfa-single__foto .bfa-single__img {
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}
@media (max-width: 600px) {
	.bfa-single__foto { height: 300px; padding: 12px; }
}

/* ---------------- Tipografía del contenido ---------------- */
.entry-content { color: var(--bfa-ink-soft); }
.entry-content p { font-size: 17px; line-height: 1.75; }
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	color: var(--bfa-navy);
	letter-spacing: -.01em;
	line-height: 1.25;
}
.entry-content h2 {
	margin: 46px 0 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--bfa-blush);
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 800;
}
.entry-content h3 {
	margin: 34px 0 12px;
	font-size: 20px;
	font-weight: 700;
}
.entry-content h4 { margin: 26px 0 10px; font-size: 17px; font-weight: 700; }

.entry-content a { color: var(--bfa-pink-ink); text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:hover { color: var(--bfa-navy); }
.entry-content strong, .entry-content b { color: var(--bfa-ink); font-weight: 700; }

/*
 * Los bloques del pie ("Seguí leyendo" y "Fragancias recomendadas") se imprimen
 * DENTRO de .entry-content, asi que la tipografia del contenido le pisa los
 * colores al componente de tarjeta:
 * `.entry-content h3` (0-1-1) le gana a `.bfa-card__title` (0-1-0) y
 * `.entry-content a` (0-1-1) a `.bfa-card__link` (0-1-0). Con la banda clara no
 * se notaba -- el navy daba 7,39 sobre el celeste -- pero con la banda oscura el
 * titulo quedaba en 1,34:1, invisible. Se le devuelven sus propios colores.
 */
.entry-content .bfa-card__link,
.entry-content .bfa-card__link:hover { color: inherit; text-decoration: none; }
/* Y lo mismo con el tamaño: el h3 del contenido mide 20px y trae 34px de margen
   arriba, así que dentro de una nota la misma tarjeta salía con otra letra y con
   la banda descolocada. */
.entry-content .bfa-card__title { color: #fff; margin: 0; font-size: 16px; line-height: 1.4; }
.entry-content .bfa-card__link:hover .bfa-card__title { color: var(--bfa-blue); }

/* La tarjeta de nota corre la misma suerte: el enlace salía subrayado y en rosa,
   y el título con el cuerpo y el margen de un h2/h3 del contenido. */
.entry-content .bfa-post__link,
.entry-content .bfa-post__link:hover { color: inherit; text-decoration: none; }
.entry-content .bfa-post__title {
	margin: 14px 0 0;
	font-size: 19px;
	line-height: 1.4;
	color: var(--bfa-navy);
}
.entry-content .bfa-post__link:hover .bfa-post__title { color: var(--bfa-pink-ink); }

/* Y el título del bloque, que no es un título del artículo: sin la línea rosa
   del h2 del contenido ni sus 46px de margen. */
.entry-content .bfa-related__title {
	margin: 0 0 22px;
	padding-bottom: 0;
	border-bottom: 0;
	font-size: 21px;
}

.entry-content ul, .entry-content ol { padding-left: 22px; }
.entry-content li { margin-bottom: 7px; font-size: 17px; line-height: 1.7; }
.entry-content ul li::marker { color: var(--bfa-pink-deep); }
.entry-content ol li::marker { color: var(--bfa-pink-ink); font-weight: 700; }

.entry-content blockquote {
	margin: 28px 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--bfa-pink-deep);
	font-size: 18px;
	line-height: 1.65;
	color: var(--bfa-ink);
}
.entry-content blockquote p:last-child { margin-bottom: 0; }

.entry-content img { border-radius: 11px; }
.entry-content figcaption { font-size: 13px; color: var(--bfa-muted); text-align: center; }
.entry-content hr { border: 0; border-top: 1px solid var(--bfa-line); margin: 40px 0; }

/* ---------------- Autor, navegación y comentarios ---------------- */
.single .entry-author {
	margin-top: 40px;
	padding: 22px;
	background: var(--bfa-rose);
	border-radius: 11px;
}
.single .entry-author .author-name,
.single .entry-author h2 { color: var(--bfa-navy); }
.single .entry-author p { color: var(--bfa-ink-soft); font-size: 15px; }

.single .post-navigation { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--bfa-line); }
.single .post-navigation a { color: var(--bfa-navy); text-decoration: none; font-weight: 600; }
.single .post-navigation a:hover { color: var(--bfa-pink-ink); }

.comments-area { margin-top: 44px; }
.comments-area .comment-reply-title,
.comments-area .comments-title {
	font-size: 22px;
	font-weight: 800;
	color: var(--bfa-navy);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	border: 1px solid #C3CDD8;
	border-radius: 11px;
	font-size: 16px;      /* menos de 16px hace que iOS haga zoom al enfocar */
}
.comment-form .submit {
	padding: 13px 26px;
	background: var(--bfa-pink-deep);
	border: 0;
	border-radius: 11px;
	font-weight: 700;
	letter-spacing: .03em;
	color: #fff;
	cursor: pointer;
}
.comment-form .submit:hover { background: var(--bfa-navy); }
/*
 * El asterisco de campo obligatorio venia naranja (#C74417) desde el tema
 * padre: el unico color del sitio que no era ni rosa ni azul. Va en rosa
 * fuerte, que da 5,25 sobre blanco y se sigue leyendo como "atencion".
 * Dos clases para ganarle a la regla del padre, que tiene la misma forma.
 */
.comment-form .required,
.comment-form .required-field-message .required { color: var(--bfa-pink-deep); }

/* =========================================================================
 * Tablas de la ficha
 *
 * Reemplazan al "CSS adicional" del personalizador (12 KB), que se borró. Aquel
 * mezclaba tres épocas: degradados celestes, sombras negras al 40%, radios de
 * 10px y un bloque entero de tablas comparativas que no usaba ninguna ficha.
 *
 * Clases que sí se usan (las 1407): .container, .titulo-columna, .detalles,
 * .table-primary, .responsive-table, .toggle-input, .cta-button, .icono,
 * .table-comprar, .h3-comprar, .h4-comprar. El markup no se tocó.
 * ====================================================================== */

.entry-content .container {
	width: 100%;
	max-width: 100%;
	margin: 0 0 30px;
	padding: 0;
	background: #fff;
	border: 1px solid var(--bfa-line);
	border-radius: 11px;
	overflow: hidden;      /* recorta las esquinas de la tabla al radio */
	text-align: left;
	box-shadow: 0 6px 18px rgba(0, 62, 112, .07);   /* navy, no negro */
}

/*
 * Título de cada bloque de datos: celeste con texto navy (7,39:1) en vez del
 * navy macizo. Pesa menos, deja respirar la tabla y sigue siendo del logo. La
 * barrita rosa es la misma que marca la marca en las cards.
 */
.entry-content .titulo-columna {
	position: relative;
	margin: 0;
	padding: 13px 18px 12px 34px;
	background: var(--bfa-blue);
	border-radius: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--bfa-navy);
}
.entry-content .titulo-columna::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 50%;
	width: 9px;
	height: 2px;
	margin-top: -1px;
	background: var(--bfa-pink-deep);
	border-radius: 11px;
}
.entry-content h3.titulo-columna { margin-top: 0; }
/* Los bloques que siguen al primero llevan línea arriba, para separarlos. */
.entry-content h3.titulo-columna { border-top: 1px solid var(--bfa-line); }

/* Tablas de specs: dos columnas iguales, etiqueta y valor. */
.entry-content table.table-primary,
.entry-content table.responsive-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	table-layout: fixed;       /* sin esto una etiqueta larga se come la fila */
	box-shadow: none;
	font-size: 14px;
}
/*
 * Sin cebra: el contraste lo dan las hairlines, el aire y el peso tipográfico
 * (etiqueta chica y liviana, dato grande y firme). Con rayado y bordes a la vez
 * la tabla se ensuciaba.
 */
.entry-content table.table-primary th,
.entry-content table.table-primary td,
.entry-content table.responsive-table th,
.entry-content table.responsive-table td {
	padding: 13px 18px;
	border: 0;
	border-bottom: 1px solid var(--bfa-line);
	background: transparent;
	text-align: left;
	vertical-align: baseline;
	line-height: 1.5;
	overflow-wrap: anywhere;
}
/* La etiqueta ocupa menos: el dato es lo que se lee. */
.entry-content table.table-primary th,
.entry-content table.responsive-table th {
	width: 44%;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--bfa-muted);      /* 5,47:1 sobre blanco */
}
.entry-content table.table-primary td,
.entry-content table.responsive-table td {
	width: 56%;
	border-left: 1px solid var(--bfa-line);   /* separa las dos columnas */
	font-size: 15px;
	font-weight: 600;
	color: var(--bfa-ink);
}
.entry-content table.table-primary tbody tr:hover,
.entry-content table.responsive-table tbody tr:hover { background: rgba(191, 217, 223, .16); }
.entry-content table.table-primary tbody tr:last-child th,
.entry-content table.table-primary tbody tr:last-child td,
.entry-content table.responsive-table tbody tr:last-child th,
.entry-content table.responsive-table tbody tr:last-child td { border-bottom: 0; }

/* ---- Desplegable "Más detalles" ---- */
.entry-content .detalles { display: block; margin: 0; padding: 0; }
/*
 * El markup del generador mete un <br> y un <p> vacío junto al botón. Con el
 * botón oculto seguían ocupando 59px y quedaba un hueco raro entre la tabla y
 * el bloque siguiente.
 */
.entry-content .detalles > br { display: none; }
.entry-content .detalles > p { margin: 0; }
.entry-content .detalles > p:empty { display: none; }
.entry-content .toggle-input { display: none; }
.entry-content .responsive-table { display: none; opacity: 0; }
.entry-content .toggle-input:checked ~ .responsive-table { display: table; opacity: 1; }
.entry-content .toggle-input:checked ~ h3.responsive-table { display: block; opacity: 1; }

/* Centrado y con línea arriba: cierra el bloque en vez de quedar suelto. */
.entry-content .detalles { border-top: 1px solid var(--bfa-line); }
.entry-content .toggle-input:checked ~ .cta-button { display: none; }
.entry-content .cta-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: fit-content;
	margin: 16px auto;
	padding: 11px 22px;
	background: transparent;
	border-radius: 11px;
	box-shadow: inset 0 0 0 2px var(--bfa-navy);   /* mismo botón fantasma de la home */
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .03em;
	color: var(--bfa-navy);
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}
.entry-content .cta-button:hover { background: var(--bfa-navy); color: #fff; }
.entry-content .toggle-input:checked ~ .cta-button { display: none; }
.entry-content .cta-button .icono { width: 18px; height: 18px; }

/* ---- Tabla de precios ---- */
/*
 * El encabezado son un <h3> y un <h4> hermanos, sin contenedor propio: por eso
 * siguen resueltos con float (80/20) y un clear en la tabla. Cambiarlo pedía
 * tocar el markup de las 1407.
 */
.entry-content .h3-comprar,
.entry-content .h4-comprar {
	margin: 0;
	padding: 11px 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.3;
	color: #fff;
	float: left;
	box-sizing: border-box;
}
.entry-content .h3-comprar { width: 78%; background: var(--bfa-navy); }
.entry-content .h4-comprar { width: 22%; background: var(--bfa-pink-deep); text-align: center; justify-content: center; }

.entry-content .table-comprar {
	clear: both;
	width: 100%;
	margin: 0 0 34px;
	border-collapse: collapse;
	box-shadow: 0 6px 18px rgba(0, 62, 112, .07);
	font-size: 14px;
}
.entry-content .table-comprar th {
	width: auto;
	padding: 11px 14px;
	border-bottom: 1px solid var(--bfa-line);
	background: #fff;
	font-size: 14px;
	font-weight: 500;
	text-align: left;
	line-height: 1.45;
	color: var(--bfa-ink-soft);
	overflow-wrap: anywhere;
}
.entry-content .table-comprar tr:nth-child(even) th { background: rgba(191, 217, 223, .22); }
.entry-content .table-comprar td {
	width: 1%;
	padding: 8px 14px;
	border-bottom: 1px solid var(--bfa-line);
	background: transparent;
	text-align: right;
	white-space: nowrap;
	vertical-align: middle;
}
.entry-content .table-comprar td a {
	display: inline-block;
	padding: 9px 16px;
	background: var(--bfa-pink-deep);
	border-radius: 11px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	color: #fff;                                  /* 5,25:1 sobre el rosa */
	text-decoration: none;
	white-space: nowrap;
}
.entry-content .table-comprar td a:hover { background: var(--bfa-navy); color: #fff; }

/* ---- Tabla vieja de las notas de tecnología (18 posts) ---- */
.entry-content .jgbtablecss {
	width: 100%;
	margin: 0 0 26px;
	border: 1px solid var(--bfa-line);
	border-radius: 11px;
	border-collapse: collapse;
	background: #fff;
	box-shadow: none;
	font-family: inherit;
	font-size: 14px;
}
.entry-content .jgbtablecss thead th {
	padding: 10px 14px;
	background: var(--bfa-blue);
	border: 0;
	border-bottom: 1px solid var(--bfa-line);
	font-size: 12px;
	letter-spacing: .06em;
	color: var(--bfa-navy);
}
.entry-content .jgbtablecss tbody td {
	padding: 10px 14px;
	border: 0;
	border-bottom: 1px solid var(--bfa-line);
	color: var(--bfa-ink-soft);
}
.entry-content .jgbtablecss tbody tr:nth-child(even) { background: rgba(191, 217, 223, .22); }
.entry-content .jgbtablecss tbody tr:hover { background: rgba(191, 217, 223, .35); box-shadow: none; }
.entry-content .jgbtablecss tbody td:first-child { font-weight: 600; color: var(--bfa-navy); }

/* Cualquier tabla se puede desplazar sola en móvil, nunca la página. */
@media (max-width: 640px) {
	.entry-content .container,
	.entry-content .table-comprar { overflow-x: auto; }
	.entry-content .h3-comprar { width: 70%; }
	.entry-content .h4-comprar { width: 30%; }
	.entry-content .table-comprar td a { padding: 8px 12px; }
}

/* ---------------- Fechas del artículo ---------------- */
/* Lo inyecta functions.php. Era una banda gris; ahora una línea discreta. */
.fechas-articulo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 0 26px;
	padding: 9px 12px;
	background: transparent;
	border-block: 1px solid var(--bfa-line);
	font-size: 13px;
	color: var(--bfa-muted);
	text-align: center;
}
.fechas-articulo .fecha-actualizacion strong { color: var(--bfa-navy); font-weight: 700; }

/* ---------------- Etiquetas ---------------- */
.entry-tags a.tag-link {
	background: var(--bfa-blue);
	border: 0;
	color: var(--bfa-navy);
	font-weight: 700;
}
.entry-tags a.tag-link:hover { background: var(--bfa-navy); color: #fff; }