/*
 * Anclajes Powers — ONE-KEY™.
 * 1. Bloque de la portada     2. Página /one-key/
 * Colores del sitio: blanco, rojo #db011c, negro. Lo carga mu-plugins/ap-onekey.php.
 */

:root {
	--apok-rojo: var(--color-detalle, #db011c);
	--apok-negro: #111;
	--apok-gris: #f4f5f6;
	--apok-texto: #3a3d42;
}

/* =========================================================================
   1. Bloque de la portada (como en milwaukeetool.com)
   ====================================================================== */

.apok-bloque {
	padding: clamp(28px, 3.5vw, 48px) 0 clamp(40px, 6vw, 88px);
	background: #fff;
	border-top: 1px solid var(--color-borde, #e3e6ea);
	border-bottom: 1px solid var(--color-borde, #e3e6ea);
}

.apok-bloque__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: center;
}

@media (min-width: 900px) {
	.apok-bloque__grid {
		grid-template-columns: 1fr 1fr;
		gap: 56px;
	}
}

.apok-bloque__logo {
	margin: 0 0 18px;
	line-height: 0;
}

.apok-bloque__logo img {
	width: min(300px, 80%);
	height: auto;
}

.apok-bloque__desc {
	max-width: 46ch;
	margin: 0 0 22px;
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.55;
	color: var(--apok-negro);
}

.apok-bloque__login {
	margin: 0 0 22px;
}

.apok-bloque__login a {
	color: var(--apok-rojo);
	font-size: 1.0625rem;
	text-decoration: none;
}

.apok-bloque__login a:hover,
.apok-bloque__login a:focus-visible {
	text-decoration: underline;
}

.apok-bloque__boton,
.apok-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 12px 38px;
	border: 2px solid var(--apok-rojo);
	background: var(--apok-rojo);
	color: #fff !important;
	font-family: var(--ap-font-condensed);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.apok-bloque__boton:hover,
.apok-bloque__boton:focus-visible,
.apok-btn--rojo:hover,
.apok-btn--rojo:focus-visible {
	border-color: var(--apok-negro);
	background: var(--apok-negro);
}

.apok-bloque__foto {
	text-align: center;
}

.apok-bloque__foto img {
	width: min(440px, 100%);
	height: auto;
}

/* Menos aire entre "Ir al catálogo completo" y el bloque ONE-KEY */
.ap-section--products:has(+ .apok-bloque) {
	padding-bottom: clamp(28px, 3.5vw, 48px);
}

/* =========================================================================
   2. Página /one-key/
   ====================================================================== */

.apok {
	overflow-x: clip;
	padding-bottom: 0 !important;
	background: #fff;
	color: var(--apok-texto);
}

.apok .ap-shell {
	max-width: 1240px;
}

.apok h1,
.apok h2,
.apok h3,
.apok h4 {
	color: var(--apok-negro);
}

/* Títulos grandes en itálica gruesa, como el sitio de ONE-KEY */
.apok-h2 {
	max-width: 22ch;
	margin: 0 auto 18px;
	font-family: var(--ap-font-display);
	font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3.25rem);
	font-weight: 400;
	font-style: italic;
	line-height: 1.05;
	text-align: center;
	text-transform: uppercase;
}

.apok-h2--izq {
	margin-left: 0;
	text-align: left;
}

.apok-h3 {
	margin: 0 0 12px;
	font-family: var(--ap-font-condensed);
	font-size: 1.375rem;
	font-weight: 700;
	text-transform: uppercase;
}

.apok-ceja {
	margin: 0 0 10px;
	font-family: var(--ap-font-condensed);
	font-size: 1.0625rem;
	font-weight: 700;
	font-style: italic;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--apok-rojo);
}

.apok-ceja--centro,
.apok-centro {
	text-align: center;
}

.apok-sub {
	max-width: 62ch;
	margin: 0 auto clamp(28px, 4vw, 48px);
	font-size: 1.0625rem;
	line-height: 1.6;
	text-align: center;
}

.apok-sec {
	padding: clamp(56px, 7vw, 104px) 0;
}

.apok-sec--gris {
	background: var(--apok-gris);
}

.apok-enlace {
	color: var(--apok-rojo) !important;
	font-family: var(--ap-font-condensed);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none !important;
}

.apok-enlace:hover,
.apok-enlace:focus-visible {
	text-decoration: underline !important;
}

.apok-botones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 28px 0 20px;
}

.apok-botones--centro {
	justify-content: center;
}

.apok-btn--borde {
	border-color: currentColor;
	background: transparent;
	color: inherit !important;
}

.apok-btn--borde:hover,
.apok-btn--borde:focus-visible {
	border-color: #fff;
	background: #fff;
	color: var(--apok-negro) !important;
}

.apok-tiendas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.apok-tiendas img {
	display: block;
	height: 44px;
	width: auto;
}

.apok-final .apok-tiendas {
	justify-content: center;
}

/* --- 1. Portada oscura con rayas, como el banner del catálogo --- */
.apok-hero {
	padding: clamp(48px, 6vw, 96px) 0 clamp(40px, 5vw, 72px);
	background:
		repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 14px),
		radial-gradient(90% 120% at 30% 0%, #2e3135 0%, #17191b 60%, #0e0f10 100%);
	color: #fff;
}

.apok-hero__grid {
	display: grid;
	gap: 32px;
	align-items: center;
}

@media (min-width: 960px) {
	.apok-hero__grid {
		grid-template-columns: 1.05fr 1fr;
		gap: 48px;
	}
}

.apok-hero__logo {
	width: 200px;
	height: auto;
	margin-bottom: 18px;
}

.apok-hero__titulo {
	margin: 0 0 20px;
	font-family: var(--ap-font-display);
	font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5rem);
	font-weight: 400;
	font-style: italic;
	line-height: 0.98;
	text-transform: uppercase;
	color: #fff !important;
}

.apok-hero__intro {
	max-width: 56ch;
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.86);
}

.apok-hero__foto img {
	display: block;
	width: 100%;
	max-width: 620px;
	height: auto;
	margin: 0 auto;
	filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.5));
}

/* --- 2. Video --- */
.apok-video__grid {
	display: grid;
	gap: 32px;
	align-items: center;
}

@media (min-width: 900px) {
	.apok-video__grid {
		grid-template-columns: 1.15fr 1fr;
		gap: 48px;
	}
}

.apok-video__player {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	object-fit: contain;
}

.apok-nota {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
}

/* --- 3. Pilares --- */
.apok-cuatro {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	margin-top: 36px;
}

@media (min-width: 640px) {
	.apok-cuatro {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.apok-cuatro {
		grid-template-columns: repeat(4, 1fr);
	}
}

.apok-pilar img {
	width: 52px;
	height: 52px;
	margin-bottom: 14px;
}

.apok-pilar h3,
.apok-tarjeta h3,
.apok-herr h3,
.apok-resena h3 {
	margin: 0 0 8px;
	font-family: var(--ap-font-condensed);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
}

.apok-pilar p,
.apok-tarjeta p {
	margin: 0;
	line-height: 1.55;
}

/* --- 4. Historias --- */
.apok-historias__grid {
	display: grid;
	gap: 32px;
	align-items: center;
}

@media (min-width: 900px) {
	.apok-historias__grid {
		grid-template-columns: 1fr 1.1fr;
		gap: 56px;
	}
}

.apok-historias__foto {
	width: 100%;
	height: auto;
}

.apok-cita {
	display: none;
	margin: 0;
}

.apok-cita.is-activa,
html.no-js .apok-cita {
	display: block;
}

.apok-cita blockquote {
	margin: 0 0 14px;
	padding: 0 0 0 18px;
	border-left: 4px solid var(--apok-rojo);
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
	line-height: 1.55;
	color: var(--apok-negro);
}

.apok-cita figcaption {
	padding-left: 22px;
	font-family: var(--ap-font-condensed);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.apok-puntos {
	display: flex;
	gap: 10px;
	margin-top: 24px;
	padding-left: 22px;
}

.apok-puntos button {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 2px solid var(--apok-negro);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.apok-puntos button[aria-selected="true"] {
	border-color: var(--apok-rojo);
	background: var(--apok-rojo);
}

/* --- 5 y 7. Tarjetas con foto --- */
.apok-tarjetas {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px 28px;
}

@media (min-width: 768px) {
	.apok-tarjetas {
		grid-template-columns: repeat(2, 1fr);
	}

	.apok-tarjetas--tres {
		grid-template-columns: repeat(3, 1fr);
	}
}

.apok-tarjeta img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	margin-bottom: 18px;
}

.apok-tarjeta h3 {
	position: relative;
	padding-left: 22px;
}

/* Cuadrito rojo delante del título, como ONE-KEY */
.apok-tarjeta h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.25em;
	width: 12px;
	height: 12px;
	background: var(--apok-rojo);
}

.apok-tarjeta p {
	padding-left: 22px;
}

.apok-tarjeta--foto {
	display: grid;
	place-items: center;
}

.apok-tarjeta--foto img {
	aspect-ratio: auto;
	object-fit: contain;
	max-width: 520px;
	margin: 0;
}

/* --- 6. Rastreo --- */
.apok-tres {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	text-align: center;
}

@media (min-width: 900px) {
	.apok-tres {
		grid-template-columns: repeat(3, 1fr);
		align-items: end;
	}
}

.apok-paso p {
	max-width: 30ch;
	margin: 0 auto 20px;
	line-height: 1.5;
}

.apok-paso strong {
	color: var(--apok-rojo);
}

.apok-paso img {
	width: auto;
	max-width: 100%;
	max-height: 300px;
	margin: 0 auto;
}

.apok-etiquetas {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	margin-top: clamp(48px, 6vw, 80px);
	padding-top: clamp(40px, 5vw, 64px);
	border-top: 1px solid var(--color-borde, #e3e6ea);
	align-items: center;
}

@media (min-width: 900px) {
	.apok-etiquetas {
		grid-template-columns: 1.4fr 1fr 1fr;
	}
}

.apok-etiqueta {
	padding: 20px;
	background: var(--apok-gris);
	text-align: center;
}

.apok-etiqueta img {
	width: 100%;
	max-width: 220px;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	margin: 0 auto 12px;
}

.apok-etiqueta h4 {
	margin: 0;
	font-family: var(--ap-font-condensed);
	font-size: 1.0625rem;
	font-weight: 700;
	text-transform: uppercase;
}

/* --- 8. Herramientas --- */
.apok-herramientas {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

@media (min-width: 1024px) {
	.apok-herramientas {
		grid-template-columns: repeat(4, 1fr);
	}
}

.apok-herr {
	display: flex;
	flex-direction: column;
	padding: 16px;
	border: 1px solid var(--color-borde, #e3e6ea);
	transition: border-color 160ms ease;
}

.apok-herr:hover {
	border-color: var(--apok-rojo);
}

.apok-herr img {
	width: 100%;
	aspect-ratio: 10 / 7;
	object-fit: contain;
	margin-bottom: 12px;
	background: var(--apok-gris);
}

.apok-herr__sku {
	margin: 0 0 4px;
	font-family: var(--ap-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	color: #666;
}

.apok-herr h3 {
	font-size: 1.0625rem;
	flex: 1;
}

/* --- 9. Llamado final: barra roja como la del catálogo --- */
.apok-final {
	padding: clamp(56px, 7vw, 96px) 0;
	background: var(--apok-rojo);
	color: #fff;
	text-align: center;
}

.apok-final .apok-h2 {
	color: #fff;
}

.apok-final .apok-sub {
	color: rgba(255, 255, 255, 0.92);
}

.apok-final .apok-btn--rojo {
	border-color: #fff;
	background: #fff;
	color: var(--apok-rojo) !important;
}

.apok-final .apok-btn--rojo:hover,
.apok-final .apok-btn--rojo:focus-visible {
	border-color: var(--apok-negro);
	background: var(--apok-negro);
	color: #fff !important;
}

/* --- 10. Reseñas --- */
.apok-resena {
	margin: 0;
	padding: 24px;
	background: var(--apok-gris);
}

.apok-resena img {
	width: 96px;
	height: auto;
	margin-bottom: 12px;
}

.apok-resena blockquote {
	margin: 0 0 12px;
	line-height: 1.55;
}

.apok-resena figcaption {
	font-weight: 700;
}

.apok-resenas .apok-centro {
	margin-top: 28px;
}

.apok-legal {
	max-width: 80ch;
	margin: 40px auto 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	text-align: center;
	color: #777;
}

/* Botón de WhatsApp con su ícono */
.apok-btn--wa {
	gap: 10px;
}

.apok-btn--wa .ap-btn__icon {
	width: 20px;
	height: 20px;
	flex: none;
}