/* Cabecera del sitio · píldora flotante
 * ========================================================================
 * Sustituye al header del Header Builder de Betheme (#mfn-header-template)
 * en todas las páginas. Portado desde la maqueta /preview/home-v2/.
 *
 * Los tokens se declaran en el propio ámbito del header y no en :root: los
 * nombres genéricos (--color-*, --space-*) chocarían con Betheme, Elementor
 * y WooCommerce, que también pintan en esta página.
 *
 * La tipografía es Poppins porque Betheme ya la sirve para todo el sitio
 * (opciones font-menu / font-content), así que aquí no se carga ninguna
 * fuente adicional.
 *
 * El markup de la cuenta y el carrito lo genera TLC_Woo_Checkout (mu-plugin);
 * este fichero solo le da forma. Sus clases (.tlc-header-account,
 * .tlc-account-submenu, .tlc-header-cart, .tlc-cart-count) vienen de allí y
 * no se pueden renombrar sin tocar el mu-plugin.
 * ==================================================================== */

/* 1 · TOKENS ------------------------------------------------------------- */
.th-nav-wrap,
.th-drawer {
	--th-ink: oklch(27.2% 0.050 253.1);        /* #14283f */
	--th-ink-soft: oklch(39.0% 0.044 250.2);   /* #33475c */
	--th-accent: oklch(73.2% 0.161 57.2);      /* #f28a2b */
	--th-accent-deep: oklch(66.7% 0.159 53.9); /* #dd7419 */
	--th-paper: oklch(100% 0 90);
	--th-paper-2: oklch(97.6% 0.005 95.1);
	--th-border: oklch(91.3% 0.011 89.7);
	--th-border-strong: oklch(86.2% 0.015 84.6);
	--th-focus: oklch(27.2% 0.050 253.1);

	--th-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--th-text-sm: 0.875rem;
	--th-text-base: 1rem;

	--th-space-2xs: 0.25rem;
	--th-space-xs: 0.5rem;
	--th-space-sm: 0.75rem;
	--th-space-md: 1rem;
	--th-space-lg: 1.5rem;

	/* Mismo ancho visible que el contenido: la caja de contenido (--th-max de
	 * home-2026.css, 1360px) lleva el canalón DENTRO, así que sus tarjetas
	 * miden 1360 - 2·gutter. La píldora, que ya tiene el canalón fuera
	 * (padding del wrap), se iguala restándolo. */
	--th-gutter: clamp(1.25rem, 4vw, 3rem);
	--th-container: calc(1360px - 2 * var(--th-gutter));

	/* Espacio de flujo que ocupa la píldora (alto + margen superior) con un
	 * respiro: los heros se cuelan por detrás restando esto, para que su
	 * banda de color llegue hasta el borde superior de la página. */
	--th-header-flow: 72px;
	--th-radius-md: 12px;
	--th-radius-pill: 999px;
	--th-rule: 1px solid var(--th-border);

	--th-ease-out: cubic-bezier(.33, 0, .2, 1);
	--th-dur-fast: 120ms;
	--th-dur-mid: 200ms;
	--th-dur-slow: 320ms;

	/* Por encima del contenido, por debajo del popup de acceso y del modal
	 * del bot, que usan z-index de cuatro cifras. */
	--th-z-nav: 200;
	--th-z-drawer: 300;

	/* Sparkles (Lucide) para el CTA compacto del móvil. */
	--th-icon-sparkles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z'/%3E%3Cpath d='M5 3v4'/%3E%3Cpath d='M19 17v4'/%3E%3Cpath d='M3 5h4'/%3E%3Cpath d='M17 19h4'/%3E%3C/svg%3E");
}

/* 2 · EL HEADER DEL TEMA SE RETIRA --------------------------------------- */

/* Betheme sigue imprimiendo su plantilla de cabecera; se oculta en vez de
 * impedir su render porque header.php no ofrece ningún punto de corte: sin
 * plantilla asignada cae en el header clásico, que tampoco queremos. */
#mfn-header-template {
	display: none !important;
}

/* El header llevaba `mfn-header-body-offset`: el JS del tema compensaba su
 * altura con `#Wrapper { padding-top: <altura del header> }`. Oculto mide 0 y
 * el propio JS escribe 0, pero se fija aquí para no depender de que ese script
 * llegue a correr ni de en qué orden lo haga. */
#Wrapper {
	padding-top: 0 !important;
}

/* 3 · PÍLDORA ------------------------------------------------------------ */
.th-nav-wrap {
	position: sticky;
	top: var(--th-space-sm);
	z-index: var(--th-z-nav);
	padding-inline: var(--th-gutter);
	margin-top: var(--th-space-sm);
	font-family: var(--th-font);
}

/* La barra de administración es fixed y taparía la píldora al hacer scroll. */
body.admin-bar .th-nav-wrap {
	top: calc(var(--th-space-sm) + 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .th-nav-wrap {
		top: calc(var(--th-space-sm) + 46px);
	}
}

/* La píldora es sticky y flota sobre el contenido, así que al saltar a un
 * ancla (#packs, #garantias, las de /libros…) el destino se colocaría justo
 * debajo y quedaría tapado. Se compensa la altura de la píldora (58px) más su
 * hueco superior (12px) y un respiro.
 *
 * Va en :target y no en [id] para que solo afecte al destino real del salto y
 * no a cualquier elemento con id de la página. */
:target {
	scroll-margin-top: 86px;
}

/* Los saltos a anclas (#packs, #books…) iban a golpe seco: los suavizaba
 * Elementor, y ya no está. Se hace en CSS, que respeta al usuario que pide
 * menos movimiento. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body.admin-bar :target {
	scroll-margin-top: 118px;
}

.th-nav {
	/* border-box: el max-width debe incluir padding y borde, o la píldora
	 * sale 34px más ancha que las tarjetas del contenido. */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: var(--th-space-lg);
	max-width: var(--th-container);
	margin-inline: auto;
	padding: var(--th-space-xs) var(--th-space-xs) var(--th-space-xs) var(--th-space-lg);
	background: oklch(100% 0 90 / .82);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: var(--th-rule);
	border-radius: var(--th-radius-pill);
}

.th-nav__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--th-space-xs);
	font-weight: 700;
	font-size: var(--th-text-base);
	letter-spacing: -.02em;
	color: var(--th-ink);
	text-decoration: none;
	white-space: nowrap;
}

.th-nav__mark {
	width: 14px;
	height: 18px;
	flex: 0 0 14px;
	background: var(--th-accent);
	clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}

/* Logo de imagen (Personalizar del tema activo, o el de Kadence).
 * Doble clase: el `img:not([src$=".svg"]) { height: auto }` de Betheme gana
 * a una clase sola. */
.th-nav__brand .th-nav__logo {
	display: block;
	height: 30px;
	width: auto;
	flex: 0 0 auto;
}
.th-drawer .th-nav__brand .th-nav__logo {
	height: 34px;
}

/* Logo personalizado (pestaña "Logo Header"): manda su ancho configurado. */
.th-nav__brand .th-nav__logo--custom,
.th-drawer .th-nav__brand .th-nav__logo--custom {
	height: auto;
	max-height: 44px;
	max-width: min(60vw, 320px);
	object-fit: contain;
}

.th-nav__links {
	display: flex;
	gap: var(--th-space-lg);
	margin-left: auto;
	list-style: none;
	margin-block: 0;
	padding: 0;
}

.th-nav__links li {
	margin: 0;
	list-style: none;
}

.th-nav__links a {
	font-size: var(--th-text-sm);
	font-weight: 500;
	color: var(--th-ink-soft);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--th-dur-fast) var(--th-ease-out);
}

.th-nav__links a:hover {
	color: var(--th-ink);
}

.th-nav__actions {
	display: flex;
	align-items: center;
	gap: var(--th-space-2xs);
	margin-left: auto;
}

/* Con la fila de enlaces visible, ella ya empuja; evita el doble margen. */
.th-nav__links ~ .th-nav__actions {
	margin-left: 0;
}

/* 4 · BOTONES ------------------------------------------------------------ */
.th-nav .th-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--th-space-xs);
	min-height: 38px;
	padding: 0 var(--th-space-md);
	border-radius: var(--th-radius-pill);
	border: 1px solid transparent;
	font-family: var(--th-font);
	font-size: var(--th-text-sm);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--th-dur-mid) var(--th-ease-out),
	            border-color var(--th-dur-mid) var(--th-ease-out),
	            color var(--th-dur-mid) var(--th-ease-out),
	            transform var(--th-dur-fast) var(--th-ease-out);
}

.th-nav .th-btn--primary {
	background: var(--th-accent);
	border-color: var(--th-accent);
	color: #fff;
}

.th-nav .th-btn--primary:hover {
	background: var(--th-accent-deep);
	border-color: var(--th-accent-deep);
	color: #fff;
	transform: translateY(-1px);
}

/* 5 · CUENTA Y CARRITO --------------------------------------------------- */

/* El CSS que el mu-plugin trae para estos iconos cuelga de los <li> del menú
 * de Betheme (.tlc-account-menu-item, .mfn-header-tmpl-menu-sidebar), que aquí
 * no existen: la píldora los reviste por su cuenta. */
.th-nav__icon {
	position: relative;
	display: flex;
	align-items: center;
}

.th-nav__icon .tlc-header-account,
.th-nav__icon .tlc-header-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--th-radius-pill);
	color: var(--th-ink-soft);
	text-decoration: none;
	transition: background var(--th-dur-fast) var(--th-ease-out),
	            color var(--th-dur-fast) var(--th-ease-out);
}

.th-nav__icon .tlc-header-account:hover,
.th-nav__icon .tlc-header-cart:hover {
	background: var(--th-paper-2);
	color: var(--th-ink);
}

/* El markup de los dos iconos no es simétrico: en la cuenta el rótulo va
 * dentro de .menu-label y en el carrito, fuera. Sin igualar los envoltorios,
 * uno alinea por baseline y el otro por caja, y los iconos se descuadran
 * verticalmente entre sí. */
.th-nav__icon .label-wrapper,
.th-nav__icon .menu-label {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.th-nav__icon svg {
	width: 22px;
	height: 22px;
	display: block;
	flex: 0 0 22px;
}

/* El markup del mu-plugin acompaña cada icono de su rótulo ("Acceder",
 * "Carrito"). En la píldora no hay sitio y manda el icono; los <a> ya llevan
 * su aria-label, así que quitarlo no deja el icono mudo.
 *
 * El mu-plugin ya lo oculta en global, pero no se depende de eso: es CSS de
 * otro componente, escrito para el header de Betheme. */
.th-nav__icon .tlc-menu-text {
	display: none;
}

/* Ancla del contador, que va posicionado sobre el icono. */
.th-nav__icon .tlc-cart-icon-wrap {
	position: relative;
}

.th-nav__icon .tlc-cart-count {
	position: absolute;
	top: -4px;
	right: -6px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: var(--th-radius-pill);
	background: var(--th-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

.th-nav__icon .tlc-header-cart.tlc-cart-empty .tlc-cart-count {
	display: none;
}

/* Desplegable de cuenta (solo con sesión iniciada) ------------------------ */
.th-nav__icon .tlc-account-submenu {
	position: absolute;
	top: calc(100% + var(--th-space-xs));
	right: 0;
	z-index: 1;
	min-width: 200px;
	margin: 0;
	padding: var(--th-space-2xs);
	list-style: none;
	background: var(--th-paper);
	border: var(--th-rule);
	border-radius: var(--th-radius-md);
	box-shadow: 0 8px 24px oklch(27.2% 0.050 253.1 / .10);

	/* Oculto por defecto: sin esto sería una lista suelta bajo la píldora. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--th-dur-fast) var(--th-ease-out),
	            transform var(--th-dur-fast) var(--th-ease-out),
	            visibility var(--th-dur-fast);
}

.th-nav__icon--account:hover .tlc-account-submenu,
.th-nav__icon--account:focus-within .tlc-account-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.th-nav__icon .tlc-account-submenu li {
	margin: 0;
	list-style: none;
}

.th-nav__icon .tlc-account-submenu a {
	display: block;
	padding: var(--th-space-xs) var(--th-space-sm);
	border-radius: var(--th-radius-md);
	font-size: var(--th-text-sm);
	font-weight: 500;
	color: var(--th-ink-soft);
	text-decoration: none;
	white-space: nowrap;
}

.th-nav__icon .tlc-account-submenu a:hover {
	background: var(--th-paper-2);
	color: var(--th-ink);
}

/* 6 · BURGER ------------------------------------------------------------- */
.th-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: var(--th-radius-pill);
	background: transparent;
	color: var(--th-ink);
	cursor: pointer;
	transition: background var(--th-dur-fast) var(--th-ease-out);
}

.th-burger:hover {
	background: var(--th-paper-2);
}

.th-burger__box {
	display: block;
	width: 18px;
	height: 12px;
	position: relative;
}

.th-burger__box span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--th-dur-mid) var(--th-ease-out),
	            opacity var(--th-dur-fast) var(--th-ease-out);
}

.th-burger__box span:nth-child(1) { top: 0; }
.th-burger__box span:nth-child(2) { top: 5px; }
.th-burger__box span:nth-child(3) { top: 10px; }

.th-burger[aria-expanded="true"] .th-burger__box span:nth-child(1) {
	transform: translateY(5px) rotate(45deg);
}

.th-burger[aria-expanded="true"] .th-burger__box span:nth-child(2) {
	opacity: 0;
}

.th-burger[aria-expanded="true"] .th-burger__box span:nth-child(3) {
	transform: translateY(-5px) rotate(-45deg);
}

/* 7 · DRAWER ------------------------------------------------------------- */
.th-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--th-z-drawer);
	font-family: var(--th-font);
}

.th-drawer[hidden] {
	display: none;
}

.th-drawer__scrim {
	position: absolute;
	inset: 0;
	background: oklch(27.2% 0.050 253.1 / .45);
	opacity: 0;
	transition: opacity var(--th-dur-slow) var(--th-ease-out);
}

.th-drawer__panel {
	position: absolute;
	inset-block: 0;
	right: 0;
	width: min(88vw, 340px);
	display: flex;
	flex-direction: column;
	gap: var(--th-space-lg);
	padding: var(--th-space-lg);
	overflow-y: auto;
	background: var(--th-paper);
	border-left: var(--th-rule);
	transform: translateX(100%);
	transition: transform var(--th-dur-slow) var(--th-ease-out);
}

.th-drawer.is-open .th-drawer__scrim {
	opacity: 1;
}

.th-drawer.is-open .th-drawer__panel {
	transform: translateX(0);
}

.th-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--th-space-md);
}

.th-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: var(--th-radius-pill);
	background: transparent;
	color: var(--th-ink);
	cursor: pointer;
}

.th-drawer__close:hover {
	background: var(--th-paper-2);
}

.th-drawer__links {
	display: flex;
	flex-direction: column;
	gap: var(--th-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.th-drawer__links li {
	margin: 0;
	list-style: none;
}

.th-drawer__links a {
	display: block;
	padding: var(--th-space-sm);
	border-radius: var(--th-radius-md);
	font-size: var(--th-text-base);
	font-weight: 500;
	color: var(--th-ink);
	text-decoration: none;
}

.th-drawer__links a:hover {
	background: var(--th-paper-2);
}

.th-drawer__foot {
	display: flex;
	flex-direction: column;
	gap: var(--th-space-xs);
	margin-top: auto;
	padding-top: var(--th-space-lg);
	border-top: var(--th-rule);
}

/* En el drawer los iconos sí van con su rótulo: hay sitio, y a pelo serían
 * dos siluetas sin explicar.
 *
 * El mu-plugin lo esconde con `.tlc-menu-text{display:none}` sin acotar a
 * nada, y encola su CSS después de este fichero; se recupera aquí. */
.th-drawer__foot .tlc-menu-text {
	display: inline;
}

.th-drawer__foot .tlc-header-account,
.th-drawer__foot .tlc-header-cart {
	display: flex;
	align-items: center;
	gap: var(--th-space-sm);
	padding: var(--th-space-sm);
	border-radius: var(--th-radius-md);
	font-size: var(--th-text-base);
	font-weight: 500;
	color: var(--th-ink);
	text-decoration: none;
}

.th-drawer__foot .tlc-header-account:hover,
.th-drawer__foot .tlc-header-cart:hover {
	background: var(--th-paper-2);
}

/* Misma asimetría de markup que en la píldora: el rótulo de la cuenta cuelga
 * de .menu-label y el del carrito es hermano suyo. Se le da el mismo gap a los
 * dos niveles para que icono y texto se separen igual en ambos. */
.th-drawer__foot .label-wrapper,
.th-drawer__foot .menu-label {
	display: inline-flex;
	align-items: center;
	gap: var(--th-space-sm);
	line-height: 1;
}

.th-drawer__foot svg {
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	display: block;
}

/* Ancla del contador. */
.th-drawer__foot .tlc-cart-icon-wrap {
	position: relative;
}

.th-drawer__foot .tlc-cart-count {
	position: absolute;
	top: -4px;
	right: -6px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: var(--th-radius-pill);
	background: var(--th-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

.th-drawer__foot .tlc-header-cart.tlc-cart-empty .tlc-cart-count {
	display: none;
}

/* Dentro del drawer el desplegable de cuenta no flota: se lista tal cual. */
.th-drawer__foot .tlc-account-submenu {
	display: flex;
	flex-direction: column;
	gap: var(--th-space-2xs);
	margin: 0;
	padding: 0 0 0 var(--th-space-lg);
	list-style: none;
}

.th-drawer__foot .tlc-account-submenu li {
	margin: 0;
	list-style: none;
}

.th-drawer__foot .tlc-account-submenu a {
	display: block;
	padding: var(--th-space-xs) var(--th-space-sm);
	border-radius: var(--th-radius-md);
	font-size: var(--th-text-sm);
	color: var(--th-ink-soft);
	text-decoration: none;
}

.th-drawer__foot .tlc-account-submenu a:hover {
	background: var(--th-paper-2);
	color: var(--th-ink);
}

.th-drawer .th-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--th-space-md);
	border-radius: var(--th-radius-pill);
	border: 1px solid var(--th-accent);
	background: var(--th-accent);
	color: #fff;
	font-family: var(--th-font);
	font-size: var(--th-text-base);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

.th-drawer .th-btn:hover {
	background: var(--th-accent-deep);
	border-color: var(--th-accent-deep);
	color: #fff;
}

/* Congela el fondo mientras el drawer está abierto. */
body.th-drawer-open {
	overflow: hidden;
}

/* 8 · FOCO --------------------------------------------------------------- */
.th-nav a:focus-visible,
.th-nav button:focus-visible,
.th-drawer a:focus-visible,
.th-drawer button:focus-visible {
	outline: 2px solid var(--th-focus);
	outline-offset: 3px;
}

/* 9 · RESPONSIVE --------------------------------------------------------- */
@media (max-width: 1024px) {
	/* La fila de enlaces no cabe en la píldora: pasa al drawer. */
	.th-nav__links {
		display: none;
	}

	.th-burger {
		display: inline-flex;
	}
}

@media (max-width: 767px) {
	.th-nav {
		padding-left: var(--th-space-md);
	}

	.th-nav__brand {
		font-size: var(--th-text-sm);
	}
}

@media (max-width: 600px) {
	/* "Probar Asesor bot" no cabe con texto, pero la conversión no se
	 * esconde: el CTA se compacta a botón-icono redondo con el sparkles.
	 * El rótulo sigue en el DOM (font-size 0) para lectores de pantalla,
	 * y el CTA con texto completo vive también en el drawer.
	 *
	 * Va con `.th-nav` delante para ganarle a `.th-nav .th-btn`. */
	.th-nav .th-nav__cta {
		width: 42px;
		height: 42px;
		min-height: 42px;
		padding: 0;
		border-radius: 50%;
		overflow: hidden;
		font-size: 0;
		gap: 0;
	}
	.th-nav .th-nav__cta::before {
		content: "";
		width: 20px;
		height: 20px;
		flex: none;
		background: #fff;
		-webkit-mask: var(--th-icon-sparkles) center/contain no-repeat;
		mask: var(--th-icon-sparkles) center/contain no-repeat;
	}

	/* Acciones más prietas: cada píxel cuenta en la píldora. */
	.th-nav {
		gap: var(--th-space-sm);
	}
	.th-nav__actions {
		gap: var(--th-space-xs);
	}
}

@media (max-width: 380px) {
	/* En pantallas mini el icono de cuenta cede su sitio: sigue en el
	 * drawer ("Acceder"), y el carrito y el CTA importan más. */
	.th-nav .th-nav__icon--account {
		display: none;
	}
}

/* 10 · MOVIMIENTO REDUCIDO ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.th-nav-wrap *,
	.th-drawer * {
		transition-duration: 1ms !important;
	}
}