/* Hallmark · genre: modern-minimal · macrostructure: plantilla del plugin (piel) · design-system: design.md · designed-as-app
 * pre-emit critique: P4 H4 E4 S4 R5 V4 */
/* =========================================================================
 * Ficha de libro · skin Rediseño 2026.
 *
 * Se carga DESPUÉS de book-product.css y de los assets bew-* y alinea la
 * ficha con el sistema de diseño de la portada (home-2026.css): tinta
 * #14283f, naranja #f28a2b, papel #f7f6f2, Poppins, botones píldora y
 * tarjetas planas sin sombra. La estructura y el comportamiento del bloque
 * de compra NO cambian: solo la piel.
 * ========================================================================= */

:root {
	--bew-book-accent: #f28a2b;
	--bew-book-accent-hover: #dd7419;
	--bew-book-dark: #14283f;
	--bew-book-bg: #f7f6f2;
	--bew-book-border: #e7e5de;
	--bew-book-badge: #f28a2b;
	--bew-book-font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--bew-book-font-ui: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Mismo ancho de contenido que el resto del sitio rediseñado. */
.bew-book-product {
	max-width: 1360px;
}

/* ── Bandas de sección: papel arena con filo, como .th-section--alt ─────── */
.bew-book-ficha,
.bew-book-extra,
.bew-book-product .bew-book-reviews {
	background-color: var(--bew-book-bg);
	border-top: 1px solid #ebe9e2;
	border-bottom: 1px solid #ebe9e2;
}

/* ── Titulares con la voz de .th-head__title ────────────────────────────── */
.bew-book-product .bew-book-title,
.bew-book-product .bew-book-section-title,
.bew-book-product .bew-book-related-title {
	color: var(--bew-book-dark);
	font-weight: 700;
	letter-spacing: -.025em;
}
.bew-book-product .bew-book-subtitle {
	color: #33475c;
}

/* ── Botones → píldora plana de la marca ────────────────────────────────── */
.bew-book-product .bew-book-purchase-btn,
.bew-book-product .bew-book-wc-cart .single_add_to_cart_button,
.bew-book-product .bew-book-wc-cart .button,
.bew-book-product .bew-book-extra-card-btn,
.bew-book-product .bew-book-related-btn,
.bew-book-product .bew-book-related-cta-btn,
.bew-book-product .bew-book-gift-access-btn,
.bew-book-product .bew-book-gift-section-btn,
.bew-book-product .bew-book-review-cta-btn,
.bew-book-product .bew-book-review-bonus-block-btn,
.bew-book-product .bew-book-review-bonus-btn,
.bew-book-product .bew-book-bonus-amazon-cta-btn,
.bew-bbs .bew-bbs-main-btn,
.bew-bbs .bew-bbs-option-btn {
	border-radius: 999px;
	font-family: var(--bew-book-font-ui);
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: none;
	box-shadow: none;
}

/* ── Tarjetas y paneles: planos, borde 1px, radio 18 ────────────────────── */
.bew-book-purchase-sidebar {
	background: #fff;
	border: 1px solid var(--bew-book-border);
	border-radius: 18px;
	box-shadow: none;
}
.bew-book-product .bew-book-cover img,
.bew-book-product .bew-book-gallery-thumb img {
	border-radius: 8px;
}
.bew-book-product .bew-book-extra-card,
.bew-book-product .bew-book-review-card {
	border-radius: 18px;
}

/* ── Nav de anclas (bew-anm): chips píldora, fuera el subrayado ─────────── */
/* Los !important son a la fuerza: el CSS del widget marca sus fondos con
 * !important para ganarle a Elementor, y hay que ganarle a él. */
.bew-anm .bew-anm-items {
	gap: 10px;
}
.bew-anm .bew-anm-item {
	background: #fff !important;
	border: 1px solid var(--bew-book-border);
	border-radius: 999px;
	padding: 9px 18px;
	font-weight: 500;
	color: var(--bew-book-dark);
	transition: border-color .2s cubic-bezier(.33, 0, .2, 1), color .2s cubic-bezier(.33, 0, .2, 1), background-color .2s cubic-bezier(.33, 0, .2, 1);
}
.bew-anm--underline .bew-anm-item::after {
	display: none;
}
.bew-anm .bew-anm-item:hover {
	background: #fff !important;
	border-color: var(--bew-book-accent);
	color: var(--bew-book-accent-hover);
}
.bew-anm .bew-anm-item--active,
.bew-anm .bew-anm-item.bew-anm-item--active:hover {
	background: var(--bew-book-dark) !important;
	border-color: var(--bew-book-dark);
	color: #fff;
}
.bew-anm .bew-anm-item:focus-visible {
	outline: 2px solid var(--bew-book-dark);
	outline-offset: 2px;
}

/* ── HERO premium ───────────────────────────────────────────────────────── */
/* Banda cálida a sangre bajo el hero (misma técnica calc(50%-50vw) que usan
 * las demás bandas del plugin) y portada con presencia. */
.bew-book-hero {
	background: linear-gradient(180deg, #faf3ea 0%, #fff 78%);
	border-bottom: 1px solid #ebe9e2;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: calc(50vw - 50%);
	padding-right: calc(50vw - 50%);
	/* La banda cálida llega hasta el borde superior: se cuela por detrás de
	 * la píldora del header (que flota) y devuelve el espacio en padding. */
	margin-top: calc(-1 * var(--th-header-flow, 72px));
	padding-top: calc(2.5em + var(--th-header-flow, 72px));
}
.bew-book-product .bew-book-hero-image img {
	border-radius: 12px;
	box-shadow: 0 30px 60px -30px rgba(20, 40, 63, .45);
}
.bew-book-product .bew-book-title {
	font-size: clamp(1.8rem, 2.6vw, 2.6rem);
	line-height: 1.12;
}

/* ── Chips de datos reales bajo el autor (Idioma · Páginas · Publicación) ─ */
.bew-book-product .bew-book-meta-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	list-style: none;
	margin: 1em 0 0;
	padding: 0;
}
.bew-book-product .bew-book-meta-chip {
	display: inline-flex;
	align-items: baseline;
	gap: .45em;
	padding: .35em .9em;
	background: #fff;
	border: 1px solid var(--bew-book-border);
	border-radius: 999px;
	font-size: .85rem;
	color: var(--bew-book-dark);
}
.bew-book-product .bew-book-meta-chip-label {
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #54718c;
}

/* ── Titulares de sección con subrayado de marca ────────────────────────── */
.bew-book-product .bew-book-section-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	border-radius: 2px;
	background: var(--bew-book-accent);
	margin-top: .4em;
}

/* ── Sidebar de compra premium ──────────────────────────────────────────── */
.bew-book-purchase-sidebar {
	border-color: #ddd9d0;
	padding: 1.8em;
}
.bew-book-product .bew-book-purchase-title {
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #54718c;
}
.bew-book-product .bew-book-purchase-price {
	color: var(--bew-book-dark);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ── Ficha técnica: ítems como tarjetas ─────────────────────────────────── */
.bew-book-product .bew-book-ficha-item {
	background: #fff;
	border: 1px solid var(--bew-book-border);
	border-radius: 12px;
	padding: 1em 1.2em;
}
/* La rejilla base trae gap vertical 0 y las tarjetas salían pegadas. */
.bew-book-product .bew-book-ficha-grid {
	gap: 14px 24px;
}
.bew-book-product .bew-book-ficha-icon {
	color: #c56a15;
}

/* ── Contenido extra y relacionados: tarjetas planas con vida ───────────── */
.bew-book-product .bew-book-extra-card {
	background: #fff;
	border: 1px solid var(--bew-book-border);
	border-radius: 18px;
	padding: 1.6em;
}
.bew-book-product .bew-book-related-card {
	background: #fff;
	border: 1px solid var(--bew-book-border);
	border-radius: 18px;
	padding: 1.2em;
	transition: border-color .2s cubic-bezier(.33, 0, .2, 1), transform .2s cubic-bezier(.33, 0, .2, 1);
}
.bew-book-product .bew-book-related-card:hover {
	border-color: #b9b4a8;
	transform: translateY(-3px);
}
.bew-book-product .bew-book-related-cover img {
	border-radius: 8px;
}
.bew-book-product .bew-book-related-badge {
	background: var(--bew-book-badge);
	border-radius: 999px;
	font-weight: 600;
	letter-spacing: .02em;
}
@media (prefers-reduced-motion: reduce) {
	.bew-book-product .bew-book-related-card:hover {
		transform: none;
	}
}

/* ── Reseñas: tarjetas blancas planas ───────────────────────────────────── */
.bew-book-product .bew-book-review-card,
.bew-book-product .bew-book-review-item {
	background: #fff;
	border: 1px solid var(--bew-book-border);
	border-radius: 18px;
	box-shadow: none;
}
/* El CSS base las trataba como lista con separadores (padding lateral 0 y
 * hilo inferior); al vestirlas de tarjeta, el texto quedaba pegado a los
 * bordes. Aire interior propio y margen entre tarjetas en su lugar. */
.bew-book-product .bew-book-review-item,
.bew-book-product .bew-book-review-item:first-child {
	padding: 20px 22px;
	border-bottom: 1px solid var(--bew-book-border);
	margin-bottom: 12px;
}
.bew-book-product .bew-book-review-item:last-child {
	margin-bottom: 0;
}

/* ── Regalo por reseña: panel cálido integrado ──────────────────────────── */
.bew-book-product .bew-book-gift-section-inner {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #fdf0e0 0%, #fff8ef 55%, #fff 100%);
	border: 1px solid #f0dcc2;
	border-radius: 18px;
	padding: clamp(1.6em, 3vw, 2.6em);
}
/* Motivo de lazo de regalo dibujado en CSS: dos aros discontinuos. */
.bew-book-product .bew-book-gift-section-inner::before,
.bew-book-product .bew-book-gift-section-inner::after {
	content: "";
	position: absolute;
	border: 2px dashed rgba(242, 138, 43, .35);
	border-radius: 50%;
	pointer-events: none;
}
.bew-book-product .bew-book-gift-section-inner::before {
	width: 230px;
	height: 230px;
	top: -110px;
	right: -70px;
}
.bew-book-product .bew-book-gift-section-inner::after {
	width: 120px;
	height: 120px;
	bottom: -55px;
	right: 130px;
}
.bew-book-product .bew-book-gift-section-inner > * {
	position: relative;
	z-index: 1;
}

/* ── Reseñas: pestañas como chips del sistema (fuera el raíl subrayado) ─── */
.bew-book-product .bew-book-reviews-tabs {
	border-bottom: 0;
	gap: 8px;
	flex-wrap: wrap;
	row-gap: 8px;
}
.bew-book-product .bew-book-reviews-tab {
	border: 1px solid var(--bew-book-border);
	border-radius: 999px;
	background: #fff;
	color: var(--bew-book-dark);
	font-weight: 500;
	padding: 9px 18px;
	margin-bottom: 0;
	transition: border-color .2s cubic-bezier(.33, 0, .2, 1), color .2s cubic-bezier(.33, 0, .2, 1), background-color .2s cubic-bezier(.33, 0, .2, 1);
}
.bew-book-product .bew-book-reviews-tab:hover {
	background: #fff;
	border-color: var(--bew-book-accent);
	color: var(--bew-book-accent-hover);
}
.bew-book-product .bew-book-reviews-tab--active,
.bew-book-product .bew-book-reviews-tab--active:hover {
	background: var(--bew-book-dark);
	border-color: var(--bew-book-dark);
	color: #fff;
}
.bew-book-product .bew-book-reviews-tab:focus-visible {
	outline: 2px solid var(--bew-book-dark);
	outline-offset: 2px;
}

/* ── Estrellas de reseña al acento del sistema ──────────────────────────── */
.bew-book-product .bew-book-star--filled,
.bew-book-product .bew-book-star--active,
.bew-book-product .bew-book-star--hover {
	color: var(--bew-book-accent);
}

/* ── Relacionados: misma voz de tarjeta que el catálogo ─────────────────── */
.bew-book-product .bew-book-related-title {
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--bew-book-dark);
	/* Títulos kilométricos (subtítulo incluido): tres líneas y puntos,
	 * como las tarjetas del catálogo /libros. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.bew-book-product .bew-book-related-author {
	font-size: .85rem;
	color: #6a7785;
}

/* ── Nav de anclas: vidrio esmerilado al pegarse, como la píldora ───────── */
.bew-anm .bew-anm-bar {
	background: rgba(255, 255, 255, .9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--bew-book-border);
}

/* ── Precio del sidebar en mono tabular, como las cifras del sistema ────── */
.bew-book-product .bew-book-purchase-price {
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: -.02em;
}

/* ── Autor: retrato con halo de marca ───────────────────────────────────── */
.bew-book-product .bew-book-author-photo img {
	border-radius: 50%;
	border: 3px solid #f4d9bd;
}

/* ── Barra de compra sticky (bew-bbs) ───────────────────────────────────── */
.bew-bbs .bew-bbs-info-title,
.bew-bbs .bew-bbs-info-price {
	color: var(--bew-book-dark);
	font-family: var(--bew-book-font-ui);
}
.bew-bbs .bew-bbs-main-btn {
	background-color: var(--bew-book-accent);
}
.bew-bbs .bew-bbs-main-btn:hover {
	background-color: var(--bew-book-accent-hover);
}
.bew-bbs .bew-bbs-option-btn {
	background-color: var(--bew-book-accent);
}
.bew-bbs .bew-bbs-option-btn:hover {
	background-color: var(--bew-book-accent-hover);
}
/* Barra en vidrio esmerilado, como la píldora del header. */
.bew-bbs .bew-bbs-bar {
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-top: 1px solid var(--bew-book-border);
	box-shadow: none;
}
.bew-bbs .bew-bbs-bar-inner {
	max-width: 1360px;
}
.bew-bbs .bew-bbs-info-title {
	font-weight: 600;
	letter-spacing: -.01em;
}
/* El formato, como chip; el precio, en mono tabular. */
.bew-bbs .bew-bbs-info-format,
.bew-bbs .bew-bbs-option-format {
	font-weight: 500;
	font-size: .8rem;
	color: var(--bew-book-dark);
	background: #fff;
	border: 1px solid var(--bew-book-border);
	border-radius: 999px;
	padding: .3em .95em;
	white-space: nowrap;
}
.bew-bbs .bew-bbs-info-price,
.bew-bbs .bew-bbs-option-price {
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--bew-book-dark);
}
/* Botón de opciones: aro fantasma redondo. */
.bew-bbs .bew-bbs-toggle {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	background: #fff;
	border: 1px solid var(--bew-book-border);
	border-radius: 50%;
	color: var(--bew-book-dark);
	cursor: pointer;
	transition: border-color .2s cubic-bezier(.33, 0, .2, 1), background-color .2s cubic-bezier(.33, 0, .2, 1);
}
.bew-bbs .bew-bbs-toggle:hover {
	border-color: var(--bew-book-dark);
}
.bew-bbs .bew-bbs-toggle svg {
	width: 13px;
	height: 13px;
	fill: currentColor;
}
/* Desplegable como tarjeta del sistema. */
.bew-bbs .bew-bbs-dropdown {
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-top: 1px solid var(--bew-book-border);
	box-shadow: 0 -22px 44px -30px rgba(20, 40, 63, .4);
}
.bew-bbs .bew-bbs-dropdown-inner {
	max-width: 1360px;
}
.bew-bbs .bew-bbs-dropdown-title {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #54718c;
}
.bew-bbs .bew-bbs-option {
	border-bottom: 1px solid var(--bew-book-border);
}

/* =========================================================================
 * MÓVIL PREMIUM (≤767px) — la ficha respira: portada contenida y centrada,
 * cabecera editorial, descripción acotada antes del "Leer más", ficha
 * técnica compacta a dos columnas y chips de anclas deslizables.
 * Solo piel: ninguna estructura ni comportamiento cambia.
 * ========================================================================= */
@media (max-width: 767px) {
	/* Hero: la portada deja de ocupar la pantalla entera; queda centrada
	 * sobre la banda cálida, como objeto de deseo, con el título debajo. */
	.bew-book-hero {
		padding-bottom: 2.2em;
	}
	.bew-book-product .bew-book-hero-image {
		max-width: min(230px, 62vw);
		margin: 0 auto;
	}
	.bew-book-product .bew-book-hero-image img {
		box-shadow: 0 22px 44px -22px rgba(20, 40, 63, .5);
	}
	.bew-book-product .bew-book-gallery {
		justify-content: center;
	}

	/* Cabecera editorial centrada bajo la portada. */
	.bew-book-product .bew-book-title {
		text-align: center;
		font-size: 23px;
		line-height: 1.18;
	}
	.bew-book-product .bew-book-subtitle,
	.bew-book-product .bew-book-author {
		text-align: center;
		font-size: 15px;
	}
	.bew-book-product .bew-book-meta-chips {
		justify-content: center;
	}

	/* Descripción: en móvil el extracto se acota a ~9 líneas con fundido;
	 * "Leer más" sigue mostrando el texto completo (solo se recorta el
	 * estado plegado, nunca el contenido). */
	.bew-book-hero-content .bew-rmt:not(.bew-rmt--expanded) .bew-rmt-excerpt {
		display: -webkit-box;
		-webkit-line-clamp: 9;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* Pestañas de secciones (Ficha técnica · Sobre el autor · Contenido…):
	 * carril a sangre completa con fundido en los bordes. Antes la pestaña
	 * que no cabía quedaba guillotinada contra el borde y parecía rota; el
	 * fundido señala que hay más y se desliza. */
	.bew-anm .bew-anm-bar {
		overflow: hidden;
	}
	.bew-anm .bew-anm-items {
		gap: 8px;
		margin-inline: -16px;
		padding: 14px 16px 16px;
		scroll-padding-inline: 16px;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 34px), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 34px), transparent 100%);
	}
	.bew-anm .bew-anm-item {
		font-size: 14px;
		padding: 8px 14px;
		white-space: nowrap;
	}

	/* Ficha técnica: tabla de especificaciones en filas compactas — icono y
	 * etiqueta a la izquierda, valor alineado a la derecha. En rejilla de dos
	 * columnas los valores largos (ISBN, dimensiones) partían y cada caja
	 * quedaba de una altura distinta. */
	.bew-book-product .bew-book-ficha-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-flow: row;
		gap: 8px;
	}
	.bew-book-product .bew-book-ficha-item {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: .75em 1em;
	}
	.bew-book-product .bew-book-ficha-label-row {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.bew-book-product .bew-book-ficha-value {
		min-width: 0;
		text-align: right;
		overflow-wrap: anywhere;
		font-size: 14px;
		line-height: 1.4;
	}

	/* Relacionados: tarjetas equilibradas, autor discreto. */
	.bew-book-product .bew-book-related-card {
		padding: 1em;
	}
	.bew-book-product .bew-book-related-title {
		font-size: 14px;
	}

	/* La barra de anclas NO se pega en móvil: al hacer scroll convivían dos
	 * barras fijas apiladas (anclas + compra) comiéndose 150px de pantalla.
	 * La de compra manda; las chips siguen disponibles en su sitio del flujo. */
	.bew-book-product .bew-anm-bar.bew-anm--sticky {
		display: none;
	}

	/* Contenido extra: el CSS base deja las tarjetas en columna con gap 0 y
	 * salían pegadas; con la piel de tarjeta (borde+radio) necesitan aire. */
	.bew-book-extra-grid {
		gap: 14px;
	}
}
@media (max-width: 480px) {
	.bew-book-product .bew-book-hero-image {
		max-width: min(210px, 64vw);
	}
	.bew-book-product .bew-book-title {
		font-size: 21px;
	}
}