/* =====================================================================
   megafire — portada "Cabina 2"
   ---------------------------------------------------------------------
   AUTOCONTENIDO A PROPOSITO. Todo cuelga de .cab2, un contenedor propio:
   ninguna regla del padre alcanza a estos bloques y la portada no
   necesita un solo !important.

   Geometria medida en el navegador, no a ojo:
     visor 500px de alto FIJO   (con alto automatico el panel lo estira y
                                 el arte cambia de forma entre diapositivas)
     arte 2.5fr / panel 1.07fr  -> arte ~790x500 (1.59)
     titulo SIEMPRE 2 lineas    (uno largo desbordaba el panel; uno corto
                                 movia todo lo de abajo al rotar)
     nada se encoge             (si un bloque cede, termina dibujado
                                 encima del de al lado)
   ===================================================================== */

.cab2 {
	--w:       1280px;
	--bg:      #12151b;
	--surface: #1b2029;
	--surf2:   #222833;
	--line:    #2f3746;
	--text:    #e7dcc2;
	--muted:   #9aa0ad;
	--oro:     #d9a441;
	--oro2:    #8d6a24;
	--grad:    linear-gradient(180deg, #e9bb5e, #c08f2c);

	color: var(--text);
	font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	padding-bottom: 60px;
}
.cab2 *, .cab2 *::before, .cab2 *::after { box-sizing: border-box; }
.cab2 a { text-decoration: none; color: inherit; }
.cab2 img { max-width: 100%; }
.cab2 button { font: inherit; border-radius: 0; }

/* contenedor unico: todas las franjas usan el mismo */
.cab2__in { max-width: var(--w); margin: 0 auto; padding: 0 24px; }

/* --------------------------------------------------------------- */
/* 1. Entrada: titulo enmarcado + caja de bajada                    */
/* --------------------------------------------------------------- */
.cab2__cab { max-width: 1020px; margin: 24px auto 22px; }
.cab2__tb {
	padding: 18px 20px 16px;
	border: 1px solid var(--line);
	border-left: 4px solid var(--oro);
	background: linear-gradient(135deg, rgba(217,164,65,.07), transparent 34%), rgba(27,32,41,.8);
	box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 14px 28px rgba(0,0,0,.2);
}
.cab2__tb h1 {
	margin: 0; text-align: center; color: #fff;
	font-size: clamp(26px, 4.2vw, 44px); line-height: 1.06;
	font-weight: 900; letter-spacing: -.5px;
	text-shadow: 0 3px 0 rgba(0,0,0,.5);
}
.cab2__db {
	margin-top: 10px; padding: 12px 16px;
	border: 1px solid var(--line); background: rgba(27,32,41,.55);
}
.cab2__db p {
	max-width: 860px; margin: 0 auto; text-align: center;
	color: var(--muted); font-size: 13px; line-height: 1.62;
}

/* --------------------------------------------------------------- */
/* 2. Carrusel: flecha | visor | flecha como COLUMNAS de la rejilla */
/* --------------------------------------------------------------- */
/* Siendo columnas, las flechas nunca se montan sobre el arte ni se
   salen del contenedor, y en movil desaparecen solas. */
.cab2__sl {
	display: grid; grid-template-columns: 44px minmax(0,1fr) 44px;
	align-items: center; gap: 10px;
}
.cab2__nav {
	width: 44px; height: 52px; display: grid; place-items: center;
	padding: 0; cursor: pointer; color: var(--text);
	background: rgba(34,40,51,.75); border: 1px solid var(--line);
	transition: color .18s, background .18s, border-color .18s, transform .18s;
}
.cab2__nav svg { width: 20px; height: 20px; }
.cab2__nav:hover { color: #1a1408; background: var(--grad); border-color: #f0cd82; transform: scale(1.04); }

.cab2__vp {
	position: relative; height: 500px; overflow: hidden;
	border: 1px solid var(--oro2); background: #0e1117;
	box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 18px 38px rgba(0,0,0,.26);
}
/* remaches de forja en las cuatro esquinas */
.cab2__rm {
	position: absolute; inset: 0; z-index: 9; pointer-events: none;
	background-repeat: no-repeat;
	background-image:
		radial-gradient(circle at 7px 7px, #5a6478 1.6px, transparent 1.7px),
		radial-gradient(circle at calc(100% - 7px) 7px, #5a6478 1.6px, transparent 1.7px),
		radial-gradient(circle at 7px calc(100% - 7px), #5a6478 1.6px, transparent 1.7px),
		radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #5a6478 1.6px, transparent 1.7px);
}
.cab2__s {
	position: absolute; inset: 0; opacity: 0; visibility: hidden;
	transform: translateX(12px); pointer-events: none;
	transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.cab2__s.on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }

.cab2__m {
	display: grid;
	grid-template-columns: minmax(0,2.5fr) minmax(310px,1.07fr);
	grid-template-rows: 500px; height: 500px;
}
.cab2__art { position: relative; display: block; overflow: hidden; background: #0e1117; }
.cab2__art::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(90deg, transparent 64%, rgba(9,11,15,.42)),
		linear-gradient(0deg, rgba(9,11,15,.2), transparent 34%);
}
.cab2__art img {
	width: 100%; height: 100%; display: block; object-fit: cover;
	opacity: .95; transform: scale(1.01);
	transition: transform .3s ease, filter .3s ease;
}
.cab2__art:hover img { transform: scale(1.035); filter: brightness(.93); }
/* respaldo: sin galeria se usa la imagen del post, que suele ser
   caratula -> entera sobre un desenfoque de si misma */
.cab2__art--alta img { object-fit: contain; }
.cab2__blur {
	position: absolute; inset: -22px; background-size: cover; background-position: center;
	filter: blur(24px) saturate(.7); opacity: .45;
}

.cab2__pan {
	position: relative; display: flex; flex-direction: column;
	min-width: 0; min-height: 0; overflow: hidden; padding: 20px;
	background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%), rgba(24,28,37,.96);
	border-left: 1px solid rgba(217,164,65,.22);
}
.cab2__pan::before {
	content: ""; position: absolute; top: 0; left: -1px;
	width: 3px; height: 68px; background: var(--grad);
}
/* Arriba va SOLO la chapa dorada. Con dos, la segunda no entraba, bajaba
   a otro renglon y el panel la comprimia hasta quedar bajo el titulo. */
.cab2__chs { flex: 0 0 auto; min-height: 25px; display: flex; align-items: center; margin: 0 0 8px; }
.cab2__ch {
	min-height: 25px; padding: 5px 8px;
	font-size: 9.5px; line-height: 15px; font-weight: 800;
	letter-spacing: .4px; text-transform: uppercase;
	border: 1px solid rgba(255,255,255,.14);
	box-shadow: 2px 2px 0 rgba(0,0,0,.34);
	max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cab2__ch--oro { color: #1a1408; background: var(--grad); border-color: #f0cd82; }
.cab2__ch--dato {
	color: var(--text); background: var(--surf2); border-color: #39424f;
	min-height: 20px; padding: 3px 7px; font-size: 9px; line-height: 14px;
}
/* El titulo SIEMPRE 2 lineas: uno largo desbordaba el panel (500px sin
   holgura) y uno corto movia todo lo de abajo al cambiar de diapositiva. */
.cab2__tit {
	flex: 0 0 auto; margin: 0 0 5px; color: #fff;
	font-size: clamp(19px, 1.7vw, 26px); line-height: 1.06;
	font-weight: 900; letter-spacing: -.3px; overflow-wrap: break-word;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; min-height: 2.12em;
}
.cab2__tit a:hover { color: var(--oro); }
/* nowrap: si envuelve suma 19px y el panel recorta el boton de abajo */
.cab2__meta {
	flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
	font-size: 11.5px; color: #6e7687; margin: 0 0 9px;
}
.cab2__meta > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cab2__meta b { color: var(--oro); font-weight: 700; }
.cab2__meta .cab2__ch { flex: 0 0 auto; max-width: 52%; }
.cab2__desc {
	flex: 0 0 auto; margin: 0 0 9px; color: rgba(255,255,255,.75);
	font-size: 13px; line-height: 1.55;
	display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.cab2__mini { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 7px; }
.cab2__mini span {
	display: block; position: relative; aspect-ratio: 16/9; overflow: hidden;
	background: #0e1117; border: 1px solid rgba(47,55,70,.9);
	transition: transform .18s, border-color .18s;
}
.cab2__mini img {
	width: 100%; height: 100%; display: block; object-fit: cover;
	opacity: .8; transform: scale(1.01); transition: transform .2s, opacity .2s;
}
.cab2__mini span:hover { border-color: rgba(217,164,65,.65); transform: translateY(-2px); }
.cab2__mini span:hover img { opacity: 1; transform: scale(1.045); }
.cab2__cta {
	flex: 0 0 auto; margin-top: auto; align-self: flex-start;
	min-height: 42px; min-width: 145px;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 10px 15px; color: #1a1408; background: var(--grad);
	border: 1px solid #f0cd82;
	font-size: 11px; line-height: 1; font-weight: 800;
	letter-spacing: .45px; text-transform: uppercase;
	box-shadow: 4px 4px 0 #0e1117;
	transition: transform .18s, box-shadow .18s, filter .18s;
}
.cab2__cta svg { width: 15px; height: 15px; }
.cab2__cta:hover { filter: brightness(1.07); transform: translateY(-2px); box-shadow: 5px 5px 0 #0e1117; }

.cab2__dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.cab2__dots button {
	width: 20px; height: 5px; padding: 0; border: 0; background: #39424f; cursor: pointer;
	transition: width .18s, background .18s, transform .18s;
}
.cab2__dots button:hover { background: rgba(217,164,65,.6); transform: translateY(-1px); }
.cab2__dots button.on { width: 31px; background: var(--grad); }

/* --------------------------------------------------------------- */
/* 3. Franja con carril horizontal (recien llegados / blog)         */
/* --------------------------------------------------------------- */
.cab2__fr { margin: 40px 0 0; }
.cab2__fh { max-width: 850px; margin: 0 auto 20px; text-align: center; }
.cab2__fh h2 {
	margin: 0; color: #fff; font-size: clamp(26px, 4vw, 42px); line-height: 1;
	font-weight: 900; letter-spacing: -.5px; text-shadow: 0 3px 0 rgba(0,0,0,.7);
}
.cab2__fh p { max-width: 720px; margin: 10px auto 0; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.52; }
.cab2__fbt {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 40px; margin-top: 15px; padding: 10px 15px;
	color: #1a1408; background: var(--grad); border: 1px solid #f0cd82;
	font-size: 11px; line-height: 1; font-weight: 800;
	letter-spacing: .45px; text-transform: uppercase;
	box-shadow: 4px 4px 0 #0e1117; transition: transform .18s, filter .18s;
}
.cab2__fbt:hover { filter: brightness(1.07); transform: translateY(-2px); }

.cab2__sh { position: relative; }
/* la barra de desplazamiento se oculta: la del navegador es blanca y
   gorda y afeaba la franja. scroll-snap mantiene el encaje. */
.cab2__vpf {
	width: 100%; overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x mandatory; overscroll-behavior-inline: contain;
	scrollbar-width: none; padding: 2px 2px 13px;
}
.cab2__vpf::-webkit-scrollbar { display: none; }
.cab2__tk { display: flex; gap: 18px; width: max-content; min-width: 100%; }
.cab2__card {
	flex: 0 0 calc((min(1232px, 100vw - 48px) - 54px) / 4);
	width: calc((min(1232px, 100vw - 48px) - 54px) / 4);
	scroll-snap-align: start; min-width: 0; display: block;
	background: var(--surface); border: 1px solid var(--line); overflow: hidden;
	box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 10px 24px rgba(0,0,0,.26);
	transition: transform .22s, border-color .22s;
}
.cab2__card:hover { transform: translateY(-5px); border-color: rgba(217,164,65,.6); }
/* display:block obligatorio: es un <span> dentro del <a>, y en un elemento
   inline el navegador ignora aspect-ratio (salia 0.83 en vez de 1.6) */
.cab2__cim { display: block; position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden; background: #0e1117; }
.cab2__cim img {
	display: block; width: 100%; height: 100%; object-fit: cover;
	transform: scale(1.01); filter: brightness(.9);
	transition: transform .28s, filter .28s;
}
.cab2__card:hover .cab2__cim img { transform: scale(1.055); filter: brightness(1); }
.cab2__cmt {
	position: absolute; top: 10px; left: 10px; right: 10px; z-index: 4;
	display: flex; align-items: flex-start; gap: 6px; pointer-events: none;
}
.cab2__cmt span {
	min-height: 25px; display: inline-flex; align-items: center; padding: 5px 8px;
	color: #fff; background: rgba(9,11,15,.86); border: 1px solid rgba(255,255,255,.14);
	font-size: 9.5px; line-height: 1; font-weight: 800;
	letter-spacing: .35px; text-transform: uppercase;
	box-shadow: 2px 2px 0 rgba(0,0,0,.34);
}
.cab2__peso { margin-left: auto; color: var(--oro); background: rgba(6,9,13,.9); }
.cab2__fmt--pc  { background: #2b3a52; }
.cab2__fmt--apk { background: #2f5137; }
.cab2__fmt--mod { background: #6b3f1d; }
.cab2__cnb { display: block; padding: 12px 11px 13px; text-align: center; }
.cab2__cnb b {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--text); min-height: 2.6em;
}
.cab2__cnb em { display: block; margin-top: 5px; font-style: normal; font-size: 10.5px; color: #6e7687; }
.cab2__card:hover .cab2__cnb b { color: var(--oro); }

.cab2__ff {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
	width: 42px; height: 42px; display: grid; place-items: center;
	padding: 0; cursor: pointer; color: #1a1408; background: var(--grad);
	border: 1px solid #f0cd82; box-shadow: 3px 3px 0 #0e1117;
	transition: filter .18s, opacity .18s;
}
.cab2__ff svg { width: 19px; height: 19px; }
.cab2__ff:hover { filter: brightness(1.08); }
.cab2__ff--p { left: -11px; }
.cab2__ff--n { right: -11px; }
.cab2__ff:disabled { opacity: .2; pointer-events: none; box-shadow: none; }

/* --------------------------------------------------------------- */
/* 4. Catalogo                                                      */
/* --------------------------------------------------------------- */
.cab2__cat { margin: 44px 0 0; }
.cab2__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.cab2__grid .cab2__card { flex: none; width: auto; }

/* --------------------------------------------------------------- */
/* Adaptacion a pantallas chicas                                    */
/* --------------------------------------------------------------- */
@media (max-width: 1100px) {
	.cab2__grid { grid-template-columns: repeat(4, 1fr); }
	.cab2__card { flex-basis: calc((100vw - 48px - 36px) / 3); width: calc((100vw - 48px - 36px) / 3); }
	.cab2__grid .cab2__card { width: auto; }
}
@media (max-width: 980px) {
	.cab2__sl { grid-template-columns: 1fr; }
	.cab2__nav { display: none; }
	.cab2__vp, .cab2__m { height: 700px; }
	.cab2__m { grid-template-columns: 1fr; grid-template-rows: 350px minmax(0,1fr); }
	.cab2__art { height: 350px; }
	.cab2__pan { border-left: 0; border-top: 1px solid rgba(217,164,65,.22); }
	.cab2__pan::before { top: -1px; left: 0; width: 68px; height: 3px; }
}
@media (max-width: 760px) {
	.cab2__grid { grid-template-columns: repeat(2, 1fr); }
	.cab2__card { flex-basis: calc((100vw - 48px - 18px) / 2); width: calc((100vw - 48px - 18px) / 2); }
	.cab2__grid .cab2__card { width: auto; }
	.cab2__ff { display: none; }
	}
@media (max-width: 640px) {
	.cab2__tb { padding: 15px 14px 13px; }
	.cab2__db { padding: 10px 12px; margin-top: 8px; }
}
@media (max-width: 480px) {
	.cab2__grid { grid-template-columns: 1fr; }
	.cab2__card { flex-basis: 78vw; width: 78vw; }
	.cab2__grid .cab2__card { width: auto; }
	.cab2__vp, .cab2__m { height: 650px; }
	.cab2__m { grid-template-rows: 270px minmax(0,1fr); }
	.cab2__art { height: 270px; }
}
@media (prefers-reduced-motion: reduce) {
	.cab2__s, .cab2__art img, .cab2__mini img, .cab2__mini span,
	.cab2__cim img, .cab2__card { transition: none; }
	.cab2__s { transform: none; }
}

/* =====================================================================
   CABECERA "Cabina 2" — una sola fila
   ---------------------------------------------------------------------
   Marcado en header-default.php, con clases cab2hd__* propias. Los
   selectores con "html #header" son para ganarle al TEMA PADRE, que pone
   #header{position:fixed;height:60px} y maqueta el menu con flotantes.
   ===================================================================== */
:root {
	--cab-bg:   #12151b;
	--cab-line: #2f3746;
	--cab-text: #e7dcc2;
	--cab-mut:  #9aa0ad;
	--cab-oro:  #d9a441;
	--cab-oro2: #8d6a24;
	--cab-grad: linear-gradient(180deg, #e9bb5e, #c08f2c);
}

/* banda solida de lado a lado, con filo dorado abajo */
html #header.cab2hd {
	/* relative + z-index: el desenfoque (backdrop-filter) la vuelve una capa
	   propia; sin posicion, el contenido de abajo tapaba los submenus */
	position: relative;
	z-index: 100;
	display: block;
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: #0f1218;
	border: 0;
	border-bottom: 1px solid var(--cab-oro2);
	border-radius: 0;
	box-shadow: 0 1px 0 rgba(0,0,0,.55);
	backdrop-filter: none;
	overflow: visible;
}
html #header.cab2hd .cab2hd__in {
	/* border-box obligatorio: el .container del padre usa content-box, asi
	   que los 24px de relleno se SUMABAN al ancho y la fila salia 1320 en
	   vez de 1280 -> la cabecera quedaba 20px descuadrada respecto a la
	   portada (medido). */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 22px;
	width: 100%;
	max-width: 1280px;
	min-height: 62px;
	margin: 0 auto;
	padding: 0 24px;
	float: none;
}
html #header.cab2hd .cab2hd__in::after { content: ""; display: table; clear: both; }

/* El logo va suelto, sin recuadro. La placa de forja con borde y remaches
   lo resaltaba de mas y se veia raro sobre la banda. */
.cab2hd__placa {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
}
.cab2hd__placa a { display: block; line-height: 0; }
/* px_logo() imprime <img> si hay logo cargado, y el nombre del sitio si no:
   la placa tiene que quedar bien en los dos casos */
.cab2hd__placa img { display: block; max-height: 34px; width: auto; max-width: 190px; object-fit: contain; }
.cab2hd__placa a { color: var(--cab-text); font-size: 15px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

/* menu: el padre lo maqueta con flotantes -> flex */
html #header.cab2hd nav { float: none; margin: 0; }
html #header.cab2hd nav ul.menu {
	display: flex; align-items: center; flex-wrap: wrap;
	gap: 2px; margin: 0; padding: 0; list-style: none; float: none;
}
html #header.cab2hd nav ul.menu > li { float: none; margin: 0; position: relative; }
html #header.cab2hd nav ul.menu > li > a {
	display: block;
	padding: 20px 13px;
	color: #cfd4dd;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	border-bottom: 2px solid transparent;
	background: none;
}
html #header.cab2hd nav ul.menu > li > a:hover,
html #header.cab2hd nav ul.menu > li.cab2-activo > a {
	color: var(--cab-oro);
	border-bottom-color: var(--cab-oro);
	background: none;
}
/* Submenus OCULTOS por defecto.
   Esto era un bug visible: al pasar el menu a flex se perdio la regla del
   padre que los escondia, y un desplegable quedaba pintado debajo de la
   cabecera (la franja con barras grises). Se muestran al pasar el raton o
   al enfocar con el teclado. */
html #header.cab2hd nav ul.menu ul.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 40;
	min-width: 210px;
	display: none;
	margin: 0;
	list-style: none;
}
html #header.cab2hd nav ul.menu > li:hover > ul.sub-menu,
html #header.cab2hd nav ul.menu > li:focus-within > ul.sub-menu { display: block; }
html #header.cab2hd nav ul.menu ul.sub-menu ul.sub-menu { top: 0; left: 100%; }
html #header.cab2hd nav ul.menu ul.sub-menu li { position: relative; }

html #header.cab2hd nav ul.menu ul.sub-menu {
	background: #0f1218;
	border: 1px solid var(--cab-line);
	border-radius: 0;
	padding: 4px 0;
}
/* el padre pinta cada enlace con fondo #1d222d, esquinas y hover blanco:
   aqui se definen TODOS esos valores para que no se cuele nada */
html #header.cab2hd nav ul.menu ul.sub-menu > li > a {
	display: block; min-width: 190px; margin: 0; padding: 9px 16px 9px 14px;
	color: var(--cab-mut); font-size: 12.5px; line-height: 1.4; text-align: left;
	background: none; border: 0; border-left: 2px solid transparent; border-radius: 0;
	transition: color .15s, background-color .15s, border-color .15s;
}
html #header.cab2hd nav ul.menu ul.sub-menu > li > a:hover,
html #header.cab2hd nav ul.menu ul.sub-menu > li.cab2-activo > a {
	color: var(--cab-oro); background: rgba(217,164,65,.08); border-left-color: var(--cab-oro);
}

/* buscador */
.cab2hd__buscar {
	flex: 0 1 300px;
	min-width: 180px;
	margin-left: auto;
	display: flex;
	align-items: center;
	border: 1px solid var(--cab-line);
	background: #0e1219;
}
.cab2hd__buscar > svg { flex: 0 0 auto; width: 16px; height: 16px; margin: 0 6px 0 10px; color: var(--cab-mut); }
.cab2hd__buscar input {
	flex: 1; min-width: 0;
	background: none; border: 0; outline: none; box-shadow: none;
	color: var(--cab-text); font-size: 13px; padding: 8px 10px 8px 2px;
	height: auto;
}
.cab2hd__buscar input::placeholder { color: #6e7687; }

/* boton */
.cab2hd__cta {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 36px; padding: 8px 15px;
	color: #1a1408; background: var(--cab-grad);
	border: 1px solid #f0cd82;
	font-size: 11.5px; line-height: 1; font-weight: 800;
	letter-spacing: .09em; text-transform: uppercase;
	transition: filter .18s, transform .18s;
}
.cab2hd__cta:hover { color: #1a1408; filter: brightness(1.07); transform: translateY(-1px); }

/* ---------------------------------------------------------------
   Cabecera: retoques sobre el marcado del padre.
   Los iconos del padre son de FontAwesome por CDN, que el host bloquea:
   salian cuadraditos rotos. Se dibujan con CSS.
   --------------------------------------------------------------- */
/* flechita de los menus con desplegable (en vez del icono roto) */
html #header.cab2hd nav ul.menu > li > a::before,
html #header.cab2hd nav ul.menu > li > ul.sub-menu::before { content: none; display: none; }
html #header.cab2hd nav ul.menu > li.menu-item-has-children > a::after {
	content: ""; position: static; display: inline-block;
	width: 0; height: 0; margin-left: 7px; vertical-align: middle;
	border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor;
	font-size: 0; background: none;
}
html #header.cab2hd nav a { text-decoration: none; box-shadow: none; }
/* el padre fija una altura al nav: aqui 62 (70 en movil) y centrado */
html #header.cab2hd nav { display: flex; align-items: center; height: 62px; }
@media (max-width: 900px) { html #header.cab2hd nav { height: 70px; } }
/* cabecera un punto mas oscura, sin la raya dorada, menu apagado */
html #header.cab2hd { background: rgba(8,9,14,.72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 0; box-shadow: none; }
html #header.cab2hd nav ul.menu > li > a { color: #8b93a7; }
html #header.cab2hd nav ul.menu { user-select: none; }
@media (min-width: 901px) {
	html #header.cab2hd nav ul.menu > li { display: flex; align-items: center; margin-right: 2px; }
	html #header.cab2hd nav ul.menu > li > a { display: inline-flex; align-items: center; line-height: 1.2; }
}

/* boton del menu movil: <i class="fa fa-bars"> sin FontAwesome -> tres rayas en CSS */
html #header.cab2hd nav .menu-open { position: relative; display: none; width: 42px; height: 42px; cursor: pointer; }
html #header.cab2hd nav .menu-open i { font-size: 0; }
html #header.cab2hd nav .menu-open i::before {
	content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 22px; height: 2px; background: #fff;
	box-shadow: 0 -7px 0 #fff, 0 7px 0 #fff;
}

/* menu movil deslizable */
html #menu-mobile { background: #0f1218; border-right: 1px solid var(--cab-line); }
html #menu-mobile ul li a { color: var(--cab-mut); border-top-color: rgba(255,255,255,.04); border-bottom-color: #07090d; }
html #menu-mobile ul li a:hover { color: var(--cab-oro); }
html #menu-mobile .menu-item-has-children > i { position: relative; width: 14px; display: inline-block; font-size: 0; }
html #menu-mobile .menu-item-has-children > i::before {
	content: ""; position: absolute; left: 2px; top: 50%; width: 7px; height: 7px;
	border-right: 2px solid var(--cab-oro); border-bottom: 2px solid var(--cab-oro);
	transform: translateY(-65%) rotate(45deg);
}

/* el padre reserva sitio arriba para su cabecera fija; con la banda en el
   flujo normal esa compensacion sobra */
html body .wrapper-inside { padding-top: 0; }

@media (max-width: 1100px) {
	html #header.cab2hd nav ul.menu > li > a { padding: 18px 9px; font-size: 11px; }
	.cab2hd__buscar { flex-basis: 220px; }
}
@media (max-width: 900px) {
	/* en movil el menu de escritorio se esconde y manda el boton */
	html #header.cab2hd nav ul.menu { display: none; }
	html #header.cab2hd nav .menu-open { display: flex; align-items: center; justify-content: center; }
	html #header.cab2hd .cab2hd__in { flex-wrap: wrap; gap: 12px; padding: 10px 16px; }
	.cab2hd__buscar { order: 3; flex: 1 1 100%; margin-left: 0; }
	.cab2hd__cta { order: 2; margin-left: auto; }
}

/* =====================================================================
   PIE "Cabina 2"
   ---------------------------------------------------------------------
   Marcado en footer-default.php, clases cab2ft__*. Cuatro columnas y una
   barra inferior, con el mismo filo dorado que la cabecera pero arriba.
   ===================================================================== */
html #footer.cab2ft {
	width: 100%;
	margin: 56px 0 0;
	padding: 0;
	background: #0c0e15;
	border: 0;
	border-top: 1px solid #212533;
	color: #8b93a7;
}
.cab2ft__in {
	box-sizing: border-box;
	max-width: 1280px;
	margin: 0 auto;
	padding: 34px 24px 0;
}
.cab2ft__g {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 30px;
	padding-bottom: 28px;
}
.cab2ft__marca p {
	margin: 12px 0 0;
	max-width: 330px;
	font-size: 12.5px;
	line-height: 1.7;
	color: #6e7687;
}
.cab2ft__logo { display: inline-block; line-height: 0; }
.cab2ft__logo img { display: block; max-height: 32px; width: auto; max-width: 180px; }
.cab2ft__t {
	margin-bottom: 12px;
	color: var(--cab-oro);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.cab2ft__l { display: grid; gap: 8px; }
/* con #footer: el padre pinta "#footer a" de blanco */
.cab2ft__l a { font-size: 12.5px; }
html #footer.cab2ft a { color: #8b93a7; }
html #footer.cab2ft a:hover { color: var(--cab-oro); }
.cab2ft__l em { font-style: normal; font-size: 10.5px; color: #575f6d; }

.cab2ft__b {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 14px 0 18px;
	border-top: 1px solid var(--cab-line);
	font-size: 11.5px;
	color: #6e7687;
}
.cab2ft__b p { margin: 0; }
.cab2ft__mn {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 0 auto;
	padding: 0;
	list-style: none;
}
.cab2ft__mn a { font-size: 11.5px; color: #6e7687; }
.cab2ft__mn a:hover { color: var(--cab-oro); }

@media (max-width: 900px) {
	.cab2ft__g { grid-template-columns: 1fr 1fr; gap: 24px; }
	.cab2ft__marca { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
	.cab2ft__g { grid-template-columns: 1fr; }
	.cab2ft__mn { margin-left: 0; }
}

/* --------------------------------------------------------------- */
/* Paginacion del catalogo                                          */
/* --------------------------------------------------------------- */
.cab2__pag {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
	margin-top: 26px;
}
.cab2__pag .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--muted);
	font-size: 13px;
	font-weight: 700;
	transition: border-color .18s, color .18s;
}
.cab2__pag .page-numbers:hover { border-color: var(--oro); color: var(--oro); }
.cab2__pag .page-numbers.current {
	background: var(--grad);
	border-color: #f0cd82;
	color: #1a1408;
}
.cab2__pag .page-numbers.dots {
	border-color: transparent;
	background: none;
	min-width: 20px;
	padding: 0;
}