/* SATA - cabecera de la tienda.
   Sistema visual de SATA CORP: tinta #070b14, panel #111a2c, borde #1e2a42,
   verde #00d68f, cian #3ab7f0. La misma de satasports.com para que la tienda
   se lea como parte del grupo y no como otra casa. */

.sata-cab {
	--v: #00d68f;
	--c: #3ab7f0;
	--tinta: #070b14;
	--borde: #1e2a42;
	--texto: #e8edf7;
	--suave: #8496b3;
	position: relative;
	background: var(--tinta);
	color: var(--texto);
	border-bottom: 1px solid var(--borde);
	z-index: 60;
}

/* el fondo grafico: rejilla tenue + dos halos, como el hero de la portada */
.sata-cab__fondo {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(560px 200px at 12% -40%, rgba(0, 214, 143, .16), transparent 70%),
		radial-gradient(520px 200px at 88% -30%, rgba(58, 183, 240, .13), transparent 70%),
		linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px) 0 0 / 100% 34px,
		linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px) 0 0 / 34px 100%;
	mask-image: linear-gradient(#000 55%, transparent);
	-webkit-mask-image: linear-gradient(#000 55%, transparent);
}

/* ------------------------------- fila 1 ---------------------------------- */

.sata-cab__fila {
	position: relative;
	display: flex;
	align-items: center;
	gap: 26px;
	min-height: 78px;
	padding-top: 12px;
	padding-bottom: 12px;
}

.sata-cab__logo {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none !important;
	flex: 0 0 auto;
}

.sata-cab__logo svg { display: block; border-radius: 9px; }

.sata-cab__marca {
	font-weight: 800;
	font-size: 19px;
	letter-spacing: .02em;
	color: var(--texto);
	white-space: nowrap;
	line-height: 1;
}

.sata-cab__marca b { color: var(--v); font-weight: 800; }

/* -------------------------------- buscador -------------------------------- */

.sata-cab__buscar {
	position: relative;
	flex: 1 1 auto;
	max-width: 560px;
	margin: 0;
	display: flex;
	align-items: center;
}

.sata-cab__buscar .sata-i {
	position: absolute;
	left: 15px;
	color: var(--suave);
	pointer-events: none;
	transition: color .18s;
}

.sata-cab__buscar input[type="search"] {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 16px 12px 44px;
	background: rgba(255, 255, 255, .045);
	border: 1px solid var(--borde);
	border-radius: 11px;
	color: var(--texto);
	font-size: 14.5px;
	line-height: 1.3;
	outline: none;
	transition: border-color .18s, background .18s, box-shadow .18s;
}

.sata-cab__buscar input::placeholder { color: #6c7d99; }

.sata-cab__buscar input:focus {
	border-color: rgba(0, 214, 143, .55);
	background: rgba(0, 214, 143, .06);
	box-shadow: 0 0 0 3px rgba(0, 214, 143, .12);
}

.sata-cab__buscar:focus-within .sata-i { color: var(--v); }

/* el boton no hace falta a la vista: se envia con Enter */
.sata-cab__buscar button {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* -------------------------------- acciones -------------------------------- */

.sata-cab__acciones {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-left: auto;
	flex: 0 0 auto;
}

.sata-cab__corp {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--suave) !important;
	text-decoration: none !important;
	font-size: 13.5px;
	font-weight: 500;
	white-space: nowrap;
	transition: color .18s;
}

.sata-cab__corp:hover { color: var(--texto) !important; }

.sata-cab__wa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--v);
	color: #04241a !important;
	text-decoration: none !important;
	font-weight: 700;
	font-size: 14.5px;
	padding: 11px 18px;
	border-radius: 999px;
	white-space: nowrap;
	transition: background .16s, transform .16s;
}

.sata-cab__wa:hover { background: #1ae8a2; transform: translateY(-1px); }

/* --------------------------- la tira de categorias ------------------------ */

.sata-tira {
	position: relative;
	border-top: 1px solid var(--borde);
	background: rgba(17, 26, 44, .55);
}

.sata-tira__pista {
	display: flex;
	align-items: stretch;
	gap: 2px;
	overflow-x: auto;
	scrollbar-width: none;
}

.sata-tira__pista::-webkit-scrollbar { display: none; }

.sata-tira__i {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 14px;
	color: #9fb0cb !important;
	text-decoration: none !important;
	font-size: 13.6px;
	font-weight: 600;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color .16s, background .16s, border-color .16s;
}

.sata-tira__i svg { color: #62789a; transition: color .16s; }

.sata-tira__i:hover {
	color: #fff !important;
	background: rgba(255, 255, 255, .04);
}

.sata-tira__i:hover svg { color: var(--v); }

.sata-tira__i em {
	font: 600 .72rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-style: normal;
	color: #5b6f8f;
}

.sata-tira__i.es-actual {
	color: var(--v) !important;
	border-bottom-color: var(--v);
	background: rgba(0, 214, 143, .07);
}

.sata-tira__i.es-actual svg,
.sata-tira__i.es-actual em { color: var(--v); }

/* ------------------------------ el contacto ------------------------------- */

/* Debajo de la tira: direccion y horario. Datos de negocio local, que es de lo
   que vive un escaparate ([[tienda-modo-escaparate]]). Con iconos SVG. */
.sata-cab__info {
	position: relative;
	border-top: 1px solid var(--borde);
	font-size: 12.8px;
	color: var(--suave);
}

.sata-cab__info .col-full {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 22px;
	padding-top: 9px;
	padding-bottom: 9px;
}

.sata-cab__info a,
.sata-cab__info span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--suave) !important;
	text-decoration: none !important;
}

.sata-cab__info a:hover { color: var(--v) !important; }
.sata-cab__info svg { color: #5b6f8f; }

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

@media (max-width: 900px) {
	.sata-cab__corp { display: none; }
	.sata-cab__wa span { display: none; }
	.sata-cab__wa { padding: 11px; border-radius: 50%; }
}

@media (max-width: 700px) {

	.sata-cab__fila {
		flex-wrap: wrap;
		gap: 12px;
		min-height: 0;
	}

	.sata-cab__buscar {
		order: 3;
		flex: 1 0 100%;
		max-width: none;
	}

	.sata-cab__marca { font-size: 17px; }
	.sata-tira__i { padding: 11px 12px; font-size: 13px; }
	.sata-tira__i em { display: none; }
}

/* ====================== ALINEACION: el clearfix de .col-full ============== */

/* ⚠️ LA TRAMPA. Storefront le pone a `.col-full` un clearfix con ::before y
   ::after. Al convertir ese contenedor en FLEX, los dos pseudoelementos pasan
   a ser ITEMS de ancho cero — y cada `gap` del contenedor aparece como un
   desfase por delante del primer hijo real.
   Se veia exacto: el logo iba 26 px dentro (gap:26), la tira 2 (gap:2) y la
   linea de contacto 22 (gap:6px 22px). */
.sata-cab__fila::before,  .sata-cab__fila::after,
.sata-tira__pista::before, .sata-tira__pista::after,
.sata-cab__info .col-full::before, .sata-cab__info .col-full::after {
	content: none !important;
}

/* ⚠️ Y el padding de `.col-full` va en `em`, asi que cambia con el tamano de
   letra del bloque: la linea de contacto (12.8px) daba 33.5 px en vez de 41.9
   y se salia 8 px a la izquierda. En `rem` no depende del contexto. */
.sata-cab .col-full {
	padding-left: 2.618rem;
	padding-right: 2.618rem;
}

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

/* Quedaban 146 px de blanco entre la cabecera y el titulo del catalogo. */
.sata-con-nav .site-content { padding-top: 2.2em; }
.woocommerce .site-content,
.woocommerce-page .site-content { padding-top: 2.2em; }

/* La cabecera del tema es ahora solo un envoltorio: su padding y su margen
   sobran, porque el aire lo pone .sata-cab. Eran 108 de los 143 px muertos. */
.site-header {
	padding: 0 !important;
	margin-bottom: 0 !important;
	border-bottom: 0 !important;
	background: transparent !important;
}