/* Cabecera de Bendita Tecnologia. Se carga en todas las paginas.
   Los desplegables son <details> nativos: la cabecera no necesita JavaScript. */

:root {
	--bt-bg: #ffffff;
	/* El fondo del sitio. Las cajas —tarjetas, paneles, la cabecera— siguen
	   siendo blancas: es el contraste entre las dos lo que las hace ver. */
	--bt-fondo: #e1e6ea;
	--bt-surface-2: #f1f3f7;
	--bt-border: #e5e8ef;
	--bt-text: #1a1d24;
	--bt-muted: #6b7280;
	--bt-accent: #0066ff;
	--bt-accent-dark: #1236c4;
	--bt-accent-light: #e5efff;
	--bt-radius-sm: 8px;
	--bt-head-alto: 64px;
}

/* Astra no pinta el fondo con `body` sino con una clase que le cuelga al body
   —.ast-page-builder-template en las paginas, .ast-separate-container en el
   resto—, y una clase le gana a `html body`. El [class] suma lo justo para
   pasarla sin recurrir a !important, que despues no hay como levantar. */
html body[class] {
	background-color: var(--bt-fondo);
}

.bt-wrap {
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: 16px;
}

.bt-head {
	background: var(--bt-bg);
	font-size: 14px;
	line-height: 1.4;
}

.bt-head a {
	text-decoration: none;
	color: inherit;
}

.bt-ico {
	flex: 0 0 auto;
	display: block;
}

/* ---------- fila 1: utilidades ---------- */

.bt-head__top {
	background: var(--bt-surface-2);
	border-bottom: 1px solid var(--bt-border);
	color: var(--bt-muted);
	font-size: 12.5px;
}

.bt-head__top-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 36px;
	flex-wrap: wrap;
}

.bt-head__mini {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}

.bt-head__mini a:hover,
.bt-head__mini a:focus-visible {
	color: var(--bt-accent);
}

.bt-head__claim {
	margin: 0;
}

/* ---------- fila 2: logo, menu, destacado ---------- */

.bt-head__main {
	border-bottom: 1px solid var(--bt-border);
}

.bt-head__main-in {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: var(--bt-head-alto);
}

.bt-head__brand {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.bt-head__brand img,
.bt-head__brand .custom-logo {
	display: block;
	height: auto;
	max-height: 46px;
	width: auto;
}

.bt-head__name {
	font-weight: 700;
	font-size: 18px;
	color: var(--bt-text);
}

.bt-head__nav {
	display: none;
	margin-inline: auto;
}

.bt-menu {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bt-menu > li {
	position: relative;
}

.bt-menu > li > a {
	display: block;
	padding: 10px 12px;
	font-weight: 600;
	color: var(--bt-text);
	border-radius: var(--bt-radius-sm);
}

.bt-menu > li > a:hover,
.bt-menu > li > a:focus-visible,
.bt-menu > li.current-menu-item > a {
	color: var(--bt-accent);
	background: var(--bt-accent-light);
}

/* submenus: se abren al pasar el puntero y tambien con teclado */
.bt-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	min-width: 220px;
	max-height: 70vh;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius-sm);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .1);
	list-style: none;
	margin: 0;
	padding: 6px;
	display: none;
}

.bt-menu > li:hover > .sub-menu,
.bt-menu > li:focus-within > .sub-menu {
	display: block;
}

.bt-menu .sub-menu a {
	display: block;
	padding: 8px 12px;
	border-radius: 6px;
	color: var(--bt-text);
}

.bt-menu .sub-menu a:hover,
.bt-menu .sub-menu a:focus-visible {
	background: var(--bt-accent-light);
	color: var(--bt-accent);
}

.bt-head__promo {
	display: none;
	align-items: center;
	gap: 10px;
	color: var(--bt-accent);
	flex: 0 0 auto;
}

.bt-head__promo-txt {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.bt-head__promo-t {
	font-weight: 700;
	font-size: 13.5px;
}

.bt-head__promo-s {
	font-size: 12px;
	color: var(--bt-muted);
}

/* ---------- menu movil ---------- */

.bt-burger {
	margin-left: auto;
	flex: 0 0 auto;
}

.bt-burger__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius-sm);
	color: var(--bt-text);
	cursor: pointer;
	list-style: none;
}

.bt-burger__btn::-webkit-details-marker {
	display: none;
}

.bt-burger[open] .bt-burger__btn {
	color: var(--bt-accent);
	border-color: var(--bt-accent);
}

/* Con el panel en posicion absoluta, el navegador lo sigue midiendo aunque el
   <details> este cerrado: su submenu se iba a 506 px y en pantallas de 320
   aparecia scroll horizontal (en la portada y los listados no se notaba porque
   esos contenedores recortan con overflow-x). */
.bt-burger:not([open]) .bt-burger__panel {
	display: none;
}

.bt-burger__panel {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 40;
	background: #fff;
	border-bottom: 1px solid var(--bt-border);
	box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
	padding: 12px 16px 18px;
	max-height: 78vh;
	overflow-y: auto;
}

.bt-menu--movil {
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
}

.bt-menu--movil > li > a {
	padding: 12px 10px;
	border-bottom: 1px solid var(--bt-border);
	border-radius: 0;
}

.bt-menu--movil .sub-menu {
	position: static;
	display: block;
	border: 0;
	box-shadow: none;
	max-height: 260px;
	padding: 4px 0 8px 12px;
	margin: 0;
}

.bt-menu--movil .sub-menu a {
	padding: 8px 10px;
	color: var(--bt-muted);
}

.bt-head__mini--movil {
	margin-top: 14px;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
}

/* ---------- fila 3: marcas y buscador ---------- */

.bt-head__bar {
	background: var(--bt-accent-dark);
	color: #fff;
}

.bt-head__bar-in {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 54px;
}

.bt-dept {
	display: none;
	position: relative;
	flex: 0 0 auto;
}

.bt-dept__btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 18px;
	height: 44px;
	/* Mismo redondeo que el buscador: convivian una pildora y un rectangulo. */
	background: rgba(255, 255, 255, .14);
	border-radius: 100px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
}

.bt-dept__btn::-webkit-details-marker {
	display: none;
}

.bt-dept[open] .bt-dept__btn {
	background: rgba(255, 255, 255, .22);
}

.bt-dept__list {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 30;
	/* Tres columnas en rejilla, no en multicolumna: con dos columnas las
	   cuarenta marcas pasaban de 70vh y, al toparse con ese alto, el
	   multicolumna seguia armando columnas hacia el costado —de ahi la barra
	   horizontal—. En rejilla lo que no entra sigue hacia abajo. */
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 2px;
	min-width: 384px;
	max-height: 70vh;
	overflow-y: auto;
	background: #fff;
	color: var(--bt-text);
	border-radius: var(--bt-radius-sm);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
	list-style: none;
	margin: 0;
	padding: 6px;
}

.bt-dept__list a {
	display: block;
	padding: 7px 12px;
	border-radius: 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bt-dept__list a:hover,
.bt-dept__list a:focus-visible {
	background: var(--bt-accent-light);
	color: var(--bt-accent);
}

.bt-search {
	display: flex;
	align-items: center;
	height: 44px;
	flex: 1 1 auto;
	min-width: 0;
	background: #fff;
	border-radius: 100px;
	/* Lo de adentro tiene caja cuadrada: sin recortar, su fondo blanco tapaba la
	   curva izquierda de la pildora y el borde se veia en escuadra. Ademas se le
	   deja aire a la curva. */
	overflow: hidden;
	padding-left: 6px;
	/* Sobre el azul, la pildora plana se veia pegada al fondo. */
	box-shadow: 0 2px 8px rgba(4, 20, 80, .22);
}

/* Doble clase a proposito: Astra estiliza `input[type="search"]` —borde gris,
   esquinas de 4 px, fondo y sombra propios— y ese selector le gana a una clase
   sola, asi que dentro de la pildora se dibujaba una segunda caja. */
.bt-search .bt-search__input {
	flex: 1 1 auto;
	min-width: 0;
	align-self: stretch;
	height: auto;
	border: 0;
	border-radius: 100px 0 0 100px;
	box-shadow: none;
	padding: 0 8px 0 18px;
	font: inherit;
	line-height: 1.3;
	color: var(--bt-text);
	background: transparent;
}

.bt-search .bt-search__input::placeholder {
	color: #9aa1ac;
	opacity: 1;
}

.bt-search .bt-search__input:focus {
	outline: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
}

/* El foco se marca en la pildora entera, no en un rectangulo suelto adentro. */
.bt-search:focus-within {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .55), 0 2px 8px rgba(4, 20, 80, .22);
}

/* Astra da a todos los <button> su propio padding y borde redondeado: se anulan
   para dibujarlo a mano. Era un bloque casi negro de lado a lado de la pildora:
   sobre la barra azul quedaba como un parche, y los angulos del rectangulo
   contra la curva de la pildora dejaban dos cunas blancas. Ahora es un circulo
   azul encajado adentro, del color de la marca. */
.bt-search__btn {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-height: 0;
	margin: 0 4px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	line-height: 0;
	background: var(--bt-accent);
	color: #fff;
	cursor: pointer;
	transition: background .15s;
}

.bt-search__btn:hover,
.bt-search__btn:focus-visible {
	background: var(--bt-accent-dark);
}

.bt-head__atajos {
	display: none;
	gap: 18px;
	flex: 0 0 auto;
	font-weight: 600;
	white-space: nowrap;
}

.bt-head__atajos a:hover,
.bt-head__atajos a:focus-visible {
	text-decoration: underline;
}

/* ---------- adaptaciones ---------- */

@media (max-width: 767px) {
	.bt-head__top-in {
		justify-content: center;
	}

	.bt-head__mini:not(.bt-head__mini--movil) {
		display: none;
	}
}

@media (min-width: 768px) {
	.bt-dept,
	.bt-head__atajos {
		display: flex;
	}

}

@media (min-width: 993px) {
	.bt-head__nav {
		display: block;
	}

	.bt-head__promo {
		display: flex;
	}

	.bt-burger {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bt-head * {
		transition: none !important;
	}
}

/* ---------- flechas que inyecta Astra en el menu ---------- */

/* Astra agrega un <button class="ast-menu-toggle"> para desplegar submenus con su
   propio JavaScript. Esta cabecera no carga ese script (los submenus se abren por
   :hover en escritorio y quedan siempre visibles en el panel movil), asi que el
   boton es inerte y solo ensucia. */
.bt-head .ast-menu-toggle {
	display: none;
}

/* La flecha que va dentro del enlace si sirve en escritorio como senal de que hay
   submenu; en el panel movil el submenu ya esta desplegado y sobra. */
.bt-head .dropdown-menu-toggle {
	display: inline-flex;
	align-items: center;
	margin-left: 6px;
	pointer-events: none;
}

.bt-head .dropdown-menu-toggle .ast-arrow-svg {
	width: 11px;
	height: auto;
	fill: currentColor;
}

.bt-menu--movil .dropdown-menu-toggle {
	display: none;
}

.bt-menu .sub-menu .dropdown-menu-toggle {
	display: none;
}

/* Astra decora ademas cada enlace de submenu con una flecha suelta antes del texto
   (span.ast-icon hijo directo del enlace). Ahi no significa nada: se saca. */
.bt-head .sub-menu a > .ast-icon.icon-arrow {
	display: none;
}

/* Reemplaza el style="display:none" que WordPress pone en el enlace de cancelar
   respuesta de los comentarios. */
.bt-oculto {
	display: none;
}

/* Utilidades para el contenido de las notas, en reemplazo de estilos inline. */
.bt-centrado {
	text-align: center;
}

.bt-centrado--aire {
	text-align: center;
	margin: 24px 0;
}

.bt-img-suave {
	border-radius: 6px;
	max-width: 100%;
	height: auto;
}

/* ---------- descripcion desplegable de categoria (plugin metaseo) ----------
   El plugin imprime estas reglas como <style> en wp_head. Se trasladan aca y el
   gancho se desengancha en functions.php, para no dejar CSS dentro del HTML. */

.mseo-cat-desc__more {
	margin-top: .2em;
}

.mseo-cat-desc__more > summary {
	list-style: none;
	display: block;
	width: fit-content;
	margin: 1.1em auto 0;
	padding: .55em 1.5em;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: var(--bt-accent);
	font-weight: 600;
	font-size: .9em;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	transition: background .15s ease, color .15s ease;
}

.mseo-cat-desc__more > summary::-webkit-details-marker {
	display: none;
}

.mseo-cat-desc__more > summary::marker {
	content: "";
}

.mseo-cat-desc__more > summary:hover {
	background: var(--bt-accent);
	color: #fff;
	border-color: var(--bt-accent);
}

.mseo-cat-desc__more > summary::before {
	content: "";
	display: inline-block;
	width: .5em;
	height: .5em;
	margin-right: .55em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-.15em) rotate(45deg);
	transition: transform .2s ease;
	vertical-align: middle;
}

.mseo-cat-desc__more[open] > summary::before {
	transform: translateY(.1em) rotate(-135deg);
}

.mseo-cat-desc__hide {
	display: none;
}

.mseo-cat-desc__more[open] .mseo-cat-desc__show {
	display: none;
}

.mseo-cat-desc__more[open] .mseo-cat-desc__hide {
	display: inline;
}

.mseo-cat-desc__rest {
	margin-top: .6em;
}

/* ---------- el hueco bajo la cabecera ---------- */

/* Astra abre el contenido con 4em (64 px) de margen arriba de #primary, y en
   la nota encima se sumaban los 24 px de la foto destacada: la pagina
   arrancaba casi 90 px mas abajo de la cabecera. Se deja una linea de aire.
   Van dos ids para ganarle al margen del tema y a la variante de 60 px que su
   CSS dinamico aplica por encima de 1200 px; el margen de abajo no se toca,
   que es el que separa del pie. */
#content #primary {
	margin-top: 7px;
	/* Debajo de 922 px el aire no viene del margen sino de un padding de
	   58 px sobre #primary; hay que apagar los dos. */
	padding-top: 0;
}