/*
 * Anclajes Powers - hoja principal.
 *
 * Orden: tokens, base, utilidades, movimiento, header, hero, secciones,
 * WooCommerce, footer, responsive.
 *
 * Regla de movimiento: los estados iniciales de animacion solo se aplican bajo
 * `html.js .ap-motion`. Sin JavaScript, o con el movimiento desactivado, el
 * documento se pinta directamente en su estado final.
 */

/* =========================================================================
   1. Tokens
   ====================================================================== */

:root {
	/* Superficies */
	--ap-black: #08090a;
	--ap-ink: #0b0d0f;
	--ap-surface: #101316;
	--ap-surface-2: #171b20;
	--ap-surface-3: #1d2228;

	/* Lineas */
	--ap-line: #262c34;
	--ap-line-strong: #565f6d;
	--ap-line-soft: #1a1f25;

	/* Texto */
	--ap-white: #f2f5f8;
	--ap-mist-2: #c2ccd6;
	--ap-mist: #8e9aa7;
	--ap-steel: #7d8b9b;

	/* Accion (el Customizer sobreescribe --ap-red) */
	--ap-red: #db011c;
	--ap-red-soft: rgba(219, 1, 28, 0.16);
	--ap-red-line: rgba(219, 1, 28, 0.42);
	/* Rojo aclarado para texto pequeno sobre negro: el de accion no llega a AA. */
	--ap-red-ink: #e5485c;

	/* Tipografia */
	--ap-font-display: "Anton", Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
	--ap-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--ap-font-condensed: "Barlow Condensed", "Archivo Narrow", "Arial Narrow", system-ui, sans-serif;
	--ap-font-mono: ui-monospace, "Cascadia Mono", "Consolas", "SF Mono", "Roboto Mono", monospace;

	/* Escala tipografica fluida */
	--ap-fs-xs: 0.75rem;
	--ap-fs-sm: 0.8125rem;
	--ap-fs-base: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
	--ap-fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	--ap-fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
	--ap-fs-h2: clamp(1.875rem, 1.4rem + 2.1vw, 3.5rem);
	--ap-fs-h1: clamp(2.375rem, 1.45rem + 3.1vw, 4.5rem);

	/* Ritmo */
	--ap-gutter: 20px;
	--ap-shell: 1320px;
	--ap-shell-wide: 1560px;
	--ap-section-y: clamp(72px, 9vw, 152px);
	--ap-radius: 3px;
	--ap-radius-lg: 6px;

	/* Movimiento */
	--ap-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ap-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ap-dur: 620ms;
	--ap-dur-fast: 240ms;

	/* Sombras */
	--ap-shadow-card: 0 18px 44px -24px rgba(0, 0, 0, 0.9);
	--ap-shadow-lift: 0 30px 70px -34px rgba(0, 0, 0, 0.95);

	/* Intensidad del movimiento (body.ap-motion--* la ajusta) */
	--ap-motion-scale: 1;
}

/* Si el navegador sabe mezclar, el rojo legible sigue al del Personalizador. */
@supports (color: color-mix(in srgb, red 50%, white)) {
	:root {
		--ap-red-ink: color-mix(in srgb, var(--ap-red) 72%, #fff);
	}
}

.ap-motion--subtle {
	--ap-motion-scale: 0.45;
}

.ap-motion--balanced {
	--ap-motion-scale: 0.75;
}

.ap-motion--cinematic {
	--ap-motion-scale: 1;
}

/* =========================================================================
   2. Base
   ====================================================================== */

html {
	scroll-behavior: smooth;
}

body.ap-theme {
	background: var(--ap-black);
	color: var(--ap-mist-2);
	font-family: var(--ap-font-body);
	font-size: var(--ap-fs-base);
	line-height: 1.65;
	letter-spacing: 0.005em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration-color: var(--ap-red-line);
	text-underline-offset: 3px;
}

a:hover {
	text-decoration-color: var(--ap-red-ink);
}

h1,
h2,
h3,
h4 {
	font-family: var(--ap-font-display);
	color: var(--ap-white);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: 0;
	margin: 0 0 0.4em;
	text-wrap: balance;
}

p {
	margin: 0 0 1em;
	text-wrap: pretty;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

:focus-visible {
	outline: 2px solid var(--ap-red);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection {
	background: var(--ap-red);
	color: #fff;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ap-skip-link {
	position: fixed;
	top: -100px;
	left: 16px;
	z-index: 200;
	padding: 12px 18px;
	background: var(--ap-red);
	color: #fff;
	font-family: var(--ap-font-condensed);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	transition: top var(--ap-dur-fast) var(--ap-ease);
}

.ap-skip-link:focus {
	top: 16px;
}

/* Contenedor */
.ap-shell {
	width: min(100% - (var(--ap-gutter) * 2), var(--ap-shell));
	margin-inline: auto;
}

.ap-main {
	display: block;
	min-height: 40vh;
}

.ap-main:focus {
	outline: none;
}

.ap-section {
	position: relative;
	padding-block: var(--ap-section-y);
}

.ap-section + .ap-section {
	padding-top: 0;
}

.ap-section--cats,
.ap-section--products,
.ap-section--authority,
.ap-section--cta {
	padding-top: var(--ap-section-y);
}

/* =========================================================================
   3. Piezas compartidas
   ====================================================================== */

.ap-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	font-family: var(--ap-font-mono);
	font-size: var(--ap-fs-xs);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ap-mist);
}

.ap-eyebrow__mark {
	width: 28px;
	height: 2px;
	background: var(--ap-red);
	flex: none;
}

.ap-section__head {
	max-width: 62ch;
	margin-bottom: clamp(36px, 4vw, 64px);
}

.ap-section__title {
	font-size: var(--ap-fs-h2);
	text-transform: uppercase;
	letter-spacing: -0.02em;
}

.ap-section__subtitle {
	margin: 0;
	color: var(--ap-mist);
	font-size: var(--ap-fs-lg);
	max-width: 54ch;
}

.ap-section__foot {
	margin: clamp(28px, 3vw, 48px) 0 0;
}

.ap-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ap-font-condensed);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: var(--ap-fs-sm);
	color: var(--ap-white);
	text-decoration: none;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--ap-line);
	transition: border-color var(--ap-dur-fast) var(--ap-ease), color var(--ap-dur-fast) var(--ap-ease);
}

.ap-link-arrow span {
	transition: transform var(--ap-dur-fast) var(--ap-ease);
}

.ap-link-arrow:hover {
	color: var(--ap-red);
	border-color: var(--ap-red);
}

.ap-link-arrow:hover span {
	transform: translateX(5px);
}

/* Botones */
.ap-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 24px;
	border: 1px solid transparent;
	border-radius: var(--ap-radius);
	background: none;
	font-family: var(--ap-font-condensed);
	font-size: var(--ap-fs-sm);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: transform var(--ap-dur-fast) var(--ap-ease), border-color var(--ap-dur-fast) var(--ap-ease), color var(--ap-dur-fast) var(--ap-ease), background-color var(--ap-dur-fast) var(--ap-ease);
}

.ap-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: translateY(101%);
	transition: transform 420ms var(--ap-ease);
}

.ap-btn:hover {
	transform: translateY(-2px);
}

.ap-btn:active {
	transform: translateY(0);
}

.ap-btn--primary {
	background: var(--ap-red);
	color: #fff;
}

.ap-btn--primary::before {
	background: #fff;
}

.ap-btn--primary:hover {
	color: var(--ap-black);
}

.ap-btn--primary:hover::before {
	transform: translateY(0);
}

.ap-btn--ghost {
	border-color: var(--ap-line-strong);
	color: var(--ap-white);
	background: rgba(255, 255, 255, 0.015);
}

.ap-btn--ghost::before {
	background: var(--ap-red);
}

.ap-btn--ghost:hover {
	border-color: var(--ap-red);
	color: #fff;
}

.ap-btn--ghost:hover::before {
	transform: translateY(0);
}

.ap-btn--compact {
	min-height: 44px;
	padding: 10px 14px;
	font-size: var(--ap-fs-xs);
	letter-spacing: 0.08em;
	border: 1px solid var(--ap-line);
	color: var(--ap-white);
	width: 100%;
}

.ap-btn--compact::before {
	background: var(--ap-red);
}

.ap-btn--compact:hover {
	border-color: var(--ap-red);
	color: #fff;
}

.ap-btn--compact:hover::before {
	transform: translateY(0);
}

.ap-btn--sm {
	padding: 11px 18px;
	font-size: var(--ap-fs-xs);
}

.ap-btn--lg {
	padding: 18px 32px;
	font-size: var(--ap-fs-base);
}

.ap-btn__icon {
	flex: none;
}

.ap-btn__arrow {
	transition: transform var(--ap-dur-fast) var(--ap-ease);
}

.ap-btn:hover .ap-btn__arrow {
	transform: translateX(4px);
}

/* Distintivos */
.ap-badge {
	display: inline-flex;
	align-items: center;
	padding: 5px 9px;
	font-family: var(--ap-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border: 1px solid var(--ap-line);
	background: rgba(8, 9, 10, 0.86);
	color: var(--ap-mist-2);
	backdrop-filter: blur(6px);
}

.ap-badge--agotado {
	border-color: var(--ap-steel);
	color: var(--ap-mist);
}

.ap-badge--destacado {
	border-color: var(--ap-red-line);
	color: #fff;
	background: var(--ap-red);
}

.ap-badge--pedido {
	border-color: var(--ap-line);
}

/* Estados vacios */
.ap-empty {
	position: relative;
	border: 1px solid var(--ap-line);
	background: linear-gradient(160deg, var(--ap-surface), var(--ap-ink));
	padding: clamp(36px, 5vw, 72px);
	text-align: center;
	max-width: 680px;
	margin-inline: auto;
}

.ap-empty__mark {
	display: block;
	width: 52px;
	height: 3px;
	margin: 0 auto 24px;
	background: var(--ap-red);
}

.ap-empty__title {
	font-size: var(--ap-fs-h3);
	text-transform: uppercase;
}

.ap-empty__text {
	color: var(--ap-mist);
	margin-bottom: 28px;
}

.ap-empty__search {
	max-width: 420px;
	margin: 0 auto 24px;
	text-align: start;
}

.ap-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

/* Buscador */
.ap-search {
	display: flex;
	border: 1px solid var(--ap-line-strong);
	background: var(--ap-ink);
	border-radius: var(--ap-radius);
	overflow: hidden;
}

.ap-search:focus-within {
	border-color: var(--ap-red);
	box-shadow: 0 0 0 2px var(--ap-red-ink);
}

.ap-search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 14px 16px;
	border: 0;
	background: none;
	color: var(--ap-white);
	font: inherit;
}

.ap-search__input::placeholder {
	color: var(--ap-steel);
}

.ap-search__input:focus {
	outline: none;
}

.ap-search__submit {
	flex: none;
	padding: 0 20px;
	border: 0;
	background: var(--ap-red);
	color: #fff;
	font-size: 1.125rem;
	cursor: pointer;
	transition: background-color var(--ap-dur-fast) var(--ap-ease);
}

.ap-search__submit:hover {
	background: #fff;
	color: var(--ap-black);
}

/* Reticula tecnica reutilizable */
.ap-page-hero__grid,
.ap-shop-hero__grid,
.ap-404__grid,
.ap-hero__layer--grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 72px 72px;
	-webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
	mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
}

/* =========================================================================
   4. Movimiento
   ====================================================================== */

/* Estado inicial solo con JS activo y movimiento habilitado. */
html.js .ap-motion [data-ap-reveal] {
	opacity: 0;
	transition:
		opacity var(--ap-dur) var(--ap-ease-out) var(--ap-delay, 0ms),
		transform var(--ap-dur) var(--ap-ease-out) var(--ap-delay, 0ms),
		clip-path var(--ap-dur) var(--ap-ease-out) var(--ap-delay, 0ms);
	will-change: opacity, transform;
}

html.js .ap-motion [data-ap-reveal="up"] {
	transform: translate3d(0, calc(34px * var(--ap-motion-scale)), 0);
}

html.js .ap-motion [data-ap-reveal="left"] {
	transform: translate3d(calc(-26px * var(--ap-motion-scale)), 0, 0);
}

html.js .ap-motion [data-ap-reveal="right"] {
	transform: translate3d(calc(26px * var(--ap-motion-scale)), 0, 0);
}

html.js .ap-motion [data-ap-reveal="scale"] {
	transform: scale(calc(1 - 0.05 * var(--ap-motion-scale)));
}

html.js .ap-motion [data-ap-reveal="clip"] {
	clip-path: inset(0 -12% 100% -12%);
	transform: translate3d(0, calc(18px * var(--ap-motion-scale)), 0);
}

html.js .ap-motion [data-ap-reveal].is-revealed {
	opacity: 1;
	transform: none;
	clip-path: inset(-10% -12% -25% -12%);
	will-change: auto;
}

/* Parallax: el JS escribe --ap-ty / --ap-rot / --ap-tz. */
html.js .ap-motion [data-ap-parallax] {
	transform: translate3d(0, var(--ap-ty, 0px), var(--ap-tz, 0px)) rotate(var(--ap-rot, 0deg));
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	html.js .ap-motion [data-ap-reveal],
	html.js .ap-motion [data-ap-reveal].is-revealed {
		opacity: 1;
		transform: none;
		clip-path: none;
		transition: none;
	}

	html.js .ap-motion [data-ap-parallax] {
		transform: none !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Barra de progreso de lectura */
.ap-progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	height: 2px;
	z-index: 120;
	background: transparent;
	pointer-events: none;
}

.ap-progress__bar {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--ap-red);
	transform: scaleX(var(--ap-read, 0));
	transform-origin: 0 50%;
}

/* =========================================================================
   5. Header
   ====================================================================== */

.ap-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(8, 9, 10, 0.72);
	backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid transparent;
	transition: background-color 300ms var(--ap-ease), border-color 300ms var(--ap-ease);
}

.ap-header.is-stuck {
	background: rgba(8, 9, 10, 0.95);
	border-bottom-color: var(--ap-line-soft);
}

.ap-topbar {
	border-bottom: 1px solid var(--ap-line-soft);
	background: var(--ap-black);
	font-family: var(--ap-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ap-mist);
	transition: height 300ms var(--ap-ease), opacity 300ms var(--ap-ease);
}

.ap-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 34px;
	padding-block: 8px;
}

.ap-topbar p {
	margin: 0;
}

.ap-topbar__text {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.ap-topbar__dot {
	width: 6px;
	height: 6px;
	background: var(--ap-red);
	border-radius: 50%;
	flex: none;
}

.ap-topbar__aside {
	display: none;
	color: var(--ap-mist-2);
}

@media (min-width: 620px) {
	.ap-topbar__aside {
		display: block;
	}
}

.ap-header.is-stuck .ap-topbar {
	display: none;
}

.ap-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 44px);
	min-height: 72px;
	padding-block: 12px;
	transition: min-height 300ms var(--ap-ease);
}

.ap-header.is-stuck .ap-header__inner {
	min-height: 62px;
}

/* Marca */
.ap-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	flex: none;
}

/* CLAUDE.md: anclajes-powers-logo.png es 480x263; nunca por encima de 220px. */
.ap-brand__logo {
	display: block;
	max-width: 220px;
}

.ap-brand__logo-img {
	max-width: 220px;
	width: auto;
	max-height: 56px;
	height: auto;
	object-fit: contain;
}

.ap-header.is-stuck .ap-brand__logo-img {
	max-height: 46px;
}

.ap-brand__mark {
	width: 32px;
	height: 32px;
	flex: none;
	background: var(--ap-red);
	clip-path: polygon(50% 0%, 100% 28%, 100% 72%, 50% 100%, 0% 72%, 0% 28%);
}

.ap-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.ap-brand__name {
	font-family: var(--ap-font-condensed);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ap-white);
}

.ap-brand__tagline {
	font-family: var(--ap-font-mono);
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ap-steel);
}

/* Navegacion */
.ap-nav {
	display: none;
	margin-inline-start: auto;
}

.ap-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.8vw, 30px);
}

.ap-nav__list a {
	display: inline-block;
	padding: 6px 0;
	font-family: var(--ap-font-condensed);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ap-mist-2);
	text-decoration: none;
	position: relative;
}

.ap-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--ap-red);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 300ms var(--ap-ease);
}

.ap-nav__list a:hover,
.ap-nav__list .current-menu-item > a,
.ap-nav__list .current_page_item > a {
	color: var(--ap-white);
}

.ap-nav__list a:hover::after,
.ap-nav__list .current-menu-item > a::after,
.ap-nav__list .current_page_item > a::after {
	transform: scaleX(1);
}

.ap-nav__list .sub-menu {
	display: none;
}

.ap-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-inline-start: auto;
}

.ap-nav + .ap-header__actions {
	margin-inline-start: 0;
}

.ap-header__cta {
	display: none;
}

/* Boton hamburguesa */
.ap-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--ap-line);
	border-radius: var(--ap-radius);
	background: none;
	cursor: pointer;
}

.ap-burger__box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 20px;
}

.ap-burger__line {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--ap-white);
	transition: transform 280ms var(--ap-ease), opacity 200ms var(--ap-ease);
}

.ap-burger[aria-expanded="true"] .ap-burger__line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

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

.ap-burger[aria-expanded="true"] .ap-burger__line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Menu movil */
.ap-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 99;
	background: var(--ap-black);
	overflow-y: auto;
	padding: 100px var(--ap-gutter) 48px;
	opacity: 0;
	transition: opacity 260ms var(--ap-ease);
}

.ap-mobile-nav.is-open {
	opacity: 1;
}

html.no-js .ap-mobile-nav {
	display: none;
}

.ap-mobile-nav__list {
	border-top: 1px solid var(--ap-line-soft);
	margin-bottom: 32px;
}

.ap-mobile-nav__list li {
	border-bottom: 1px solid var(--ap-line-soft);
}

.ap-mobile-nav__list a {
	display: block;
	padding: 18px 4px;
	font-family: var(--ap-font-display);
	font-size: 1.375rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--ap-white);
	text-decoration: none;
}

.ap-mobile-nav__list .sub-menu a {
	font-size: 1rem;
	padding-inline-start: 20px;
	color: var(--ap-mist);
}

.ap-mobile-nav__foot {
	display: grid;
	gap: 16px;
}

/* =========================================================================
   6. Hero
   ====================================================================== */

.ap-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: calc(100svh - 72px);
	padding-block: clamp(40px, 6vh, 84px) clamp(64px, 10vh, 112px);
	overflow: hidden;
	background: radial-gradient(120% 100% at 78% 12%, #16191d 0%, var(--ap-black) 58%);
	isolation: isolate;
}

.ap-hero__layers {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	perspective: 1200px;
}

.ap-hero__layer {
	position: absolute;
	inset: 0;
	display: block;
}

.ap-hero__layer--vignette {
	background:
		radial-gradient(90% 70% at 50% 40%, transparent 30%, rgba(0, 0, 0, 0.55) 100%),
		linear-gradient(180deg, transparent 55%, var(--ap-black) 100%);
	z-index: 3;
}

.ap-hero__layer--glow {
	background: radial-gradient(48% 46% at 72% 40%, var(--ap-red-soft) 0%, transparent 70%);
	filter: blur(6px);
}

.ap-hero__layer--photo {
	background-image: var(--ap-hero-bg, none);
	background-size: cover;
	background-position: center;
	opacity: 0.2;
	filter: grayscale(1) contrast(1.25);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
	mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
}

.ap-hero__layer--wedge {
	inset: -16% -10% -16% 52%;
	background: linear-gradient(112deg, transparent 34%, var(--ap-red) 50%, transparent 66%);
	opacity: 0.2;
	filter: blur(2px);
}

.ap-hero__ghost {
	position: absolute;
	left: -3vw;
	bottom: -2vh;
	font-family: var(--ap-font-display);
	font-size: clamp(6rem, 21vw, 21rem);
	font-weight: 400;
	line-height: 0.78;
	text-transform: uppercase;
	letter-spacing: -0.03em;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.055);
	opacity: 0.9;
	user-select: none;
}

.ap-hero__scanline {
	position: absolute;
	inset-inline: 0;
	height: 180px;
	top: 0;
	background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.022), transparent);
	animation: ap-scan 9s linear infinite;
}

@keyframes ap-scan {
	0% {
		transform: translateY(-20%);
	}

	100% {
		transform: translateY(110vh);
	}
}

.ap-hero__inner {
	display: grid;
	gap: clamp(36px, 6vw, 72px);
	align-items: center;
	width: min(100% - (var(--ap-gutter) * 2), var(--ap-shell-wide));
}

.ap-hero__copy {
	max-width: 62ch;
}

.ap-hero__title {
	font-size: var(--ap-fs-h1);
	text-transform: uppercase;
	letter-spacing: -0.03em;
	line-height: 0.94;
	margin-bottom: 0.34em;
	max-width: 14ch;
}

.ap-hero__title-line {
	display: block;
}

.ap-hero__title-line--accent {
	color: var(--ap-red);
}

.ap-hero__text {
	font-size: var(--ap-fs-lg);
	color: var(--ap-mist);
	max-width: 46ch;
	margin-bottom: 30px;
}

.ap-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 34px;
}

.ap-hero__specs {
	display: grid;
	gap: 0;
	margin: 0;
	border-top: 1px solid var(--ap-line-soft);
	max-width: 520px;
}

.ap-hero__spec {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ap-line-soft);
}

.ap-hero__spec dt {
	font-family: var(--ap-font-mono);
	font-size: var(--ap-fs-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ap-mist);
	margin: 0;
}

.ap-hero__spec dd {
	margin: 0;
	font-family: var(--ap-font-condensed);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ap-white);
	text-align: right;
}

/* Escenario 2.5D */
.ap-hero__stage {
	position: relative;
	perspective: 1100px;
	perspective-origin: 60% 45%;
	display: flex;
	justify-content: center;
}

.ap-hero__product {
	position: relative;
	margin: 0;
	width: min(100%, 560px);
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transform-style: preserve-3d;
}

.ap-hero__halo {
	position: absolute;
	inset: 6%;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(219, 1, 28, 0.2) 0%, transparent 62%);
	filter: blur(28px);
	z-index: 0;
}

.ap-hero__product::after {
	content: "";
	position: absolute;
	inset: 4% 4% auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ap-red-line), transparent);
	top: 50%;
	z-index: 0;
}

.ap-hero__product-link,
.ap-hero__product-img,
.ap-hero__abstract {
	position: relative;
	z-index: 1;
}

.ap-hero__product-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 46px 60px rgba(0, 0, 0, 0.75)) contrast(1.05);
}

.ap-hero__product-link {
	display: block;
	width: 100%;
	height: 100%;
}

/* Figura abstracta cuando aun no hay imagen de producto */
.ap-hero__abstract {
	position: relative;
	width: 72%;
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
}

.ap-hero__abstract-ring {
	position: absolute;
	inset: 0;
	border: 1px solid var(--ap-line);
	border-radius: 50%;
}

.ap-hero__abstract-ring:nth-child(2) {
	inset: 14%;
	border-color: var(--ap-red-line);
	border-style: dashed;
}

.ap-hero__abstract-bolt {
	width: 34%;
	aspect-ratio: 1 / 1;
	background: linear-gradient(150deg, var(--ap-red), #7d0212);
	clip-path: polygon(50% 0%, 100% 28%, 100% 72%, 50% 100%, 0% 72%, 0% 28%);
	box-shadow: 0 30px 60px -24px rgba(219, 1, 28, 0.7);
}

.ap-hero__tag {
	position: absolute;
	left: 0;
	bottom: 2%;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid var(--ap-line);
	background: rgba(8, 9, 10, 0.82);
	backdrop-filter: blur(8px);
	font-family: var(--ap-font-mono);
	font-size: var(--ap-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ap-mist-2);
	z-index: 2;
	max-width: 100%;
}

.ap-hero__tag-dot {
	width: 7px;
	height: 7px;
	flex: none;
	border-radius: 50%;
	background: var(--ap-red);
	box-shadow: 0 0 0 4px var(--ap-red-soft);
}

.ap-hero__tag-sku {
	color: var(--ap-steel);
}

/* Indicador de scroll */
.ap-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	font-family: var(--ap-font-mono);
	font-size: 0.625rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ap-steel);
	z-index: 4;
}

.ap-hero__scroll:hover {
	color: var(--ap-white);
}

.ap-hero__scroll-track {
	position: relative;
	width: 1px;
	height: 44px;
	background: var(--ap-line);
	overflow: hidden;
}

.ap-hero__scroll-dot {
	position: absolute;
	inset-inline: 0;
	height: 14px;
	background: var(--ap-red);
	animation: ap-scroll-dot 2.1s var(--ap-ease) infinite;
}

@keyframes ap-scroll-dot {
	0% {
		transform: translateY(-100%);
	}

	60%,
	100% {
		transform: translateY(320%);
	}
}

/* =========================================================================
   7. Cinta
   ====================================================================== */

.ap-marquee {
	border-block: 1px solid var(--ap-line-soft);
	background: var(--ap-ink);
	overflow: hidden;
	padding-block: 14px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ap-marquee__track {
	display: flex;
	width: max-content;
	animation: ap-marquee 38s linear infinite;
}

.ap-marquee__group {
	display: flex;
	align-items: center;
	gap: 44px;
	padding-inline-end: 44px;
}

.ap-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--ap-font-condensed);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ap-steel);
	white-space: nowrap;
}

.ap-marquee__dot {
	width: 5px;
	height: 5px;
	background: var(--ap-red);
	transform: rotate(45deg);
	flex: none;
}

@keyframes ap-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ap-marquee__track {
		animation: none;
	}

	.ap-hero__scanline,
	.ap-hero__scroll-dot {
		animation: none;
	}
}

/* =========================================================================
   8. Categorias
   ====================================================================== */

.ap-cats {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
}

.ap-cat {
	position: relative;
}

.ap-cat__link {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 220px;
	border: 1px solid var(--ap-line);
	background: linear-gradient(165deg, var(--ap-surface) 0%, var(--ap-ink) 100%);
	text-decoration: none;
	overflow: hidden;
	transition: border-color 360ms var(--ap-ease), transform 360ms var(--ap-ease);
}

.ap-cat__link::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 2px;
	background: var(--ap-red);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 420ms var(--ap-ease);
	z-index: 3;
}

.ap-cat__link:hover,
.ap-cat__link:focus-visible {
	border-color: var(--ap-steel);
	transform: translateY(-3px);
}

.ap-cat__link:hover::before,
.ap-cat__link:focus-visible::before {
	transform: scaleX(1);
}

.ap-cat__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
}

.ap-cat__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.32;
	filter: grayscale(1) contrast(1.15);
	transform: scale(1.04);
	transition: transform 900ms var(--ap-ease), opacity 500ms var(--ap-ease), filter 500ms var(--ap-ease);
}

.ap-cat__link:hover .ap-cat__img {
	transform: scale(1.1);
	opacity: 0.46;
	filter: grayscale(0.4) contrast(1.1);
}

.ap-cat__pattern {
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 12px);
	opacity: 0.85;
}

.ap-cat__body {
	position: relative;
	z-index: 2;
	margin-top: auto;
	padding: 26px 24px 24px;
	background: linear-gradient(180deg, transparent, rgba(8, 9, 10, 0.92) 42%);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ap-cat__index {
	font-family: var(--ap-font-mono);
	font-size: var(--ap-fs-xs);
	letter-spacing: 0.2em;
	color: var(--ap-red);
}

.ap-cat__name {
	font-family: var(--ap-font-display);
	font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--ap-white);
}

.ap-cat__desc {
	color: var(--ap-mist);
	font-size: 0.9375rem;
	line-height: 1.5;
	max-width: 46ch;
}

.ap-cat__count {
	font-family: var(--ap-font-mono);
	font-size: var(--ap-fs-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ap-steel);
	margin-top: 6px;
}

.ap-cat__arrow {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 3;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 1px solid var(--ap-line);
	color: var(--ap-white);
	background: rgba(8, 9, 10, 0.6);
	transition: background-color 320ms var(--ap-ease), border-color 320ms var(--ap-ease), transform 320ms var(--ap-ease);
}

.ap-cat__link:hover .ap-cat__arrow {
	background: var(--ap-red);
	border-color: var(--ap-red);
	transform: translate(3px, -3px);
}

/* =========================================================================
   9. Autoridad
   ====================================================================== */

.ap-section--authority {
	background: linear-gradient(180deg, var(--ap-black) 0%, var(--ap-ink) 46%, var(--ap-black) 100%);
	overflow: hidden;
}

.ap-authority__stripe {
	position: absolute;
	top: 0;
	right: -6%;
	width: 42%;
	height: 100%;
	background-image: repeating-linear-gradient(135deg, var(--ap-red-soft) 0 12px, transparent 12px 34px);
	opacity: 0.5;
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, transparent);
	mask-image: linear-gradient(180deg, transparent, #000 40%, transparent);
	pointer-events: none;
}

.ap-authority {
	position: relative;
	display: grid;
	gap: clamp(36px, 5vw, 80px);
}

.ap-authority__title {
	font-size: var(--ap-fs-h2);
	text-transform: uppercase;
}

.ap-authority__text {
	color: var(--ap-mist);
	font-size: var(--ap-fs-lg);
	max-width: 46ch;
}

.ap-pillars {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--ap-line);
}

.ap-pillar {
	display: flex;
	gap: clamp(16px, 2vw, 32px);
	padding: clamp(22px, 2.6vw, 34px) 0;
	border-bottom: 1px solid var(--ap-line);
}

.ap-pillar__index {
	font-family: var(--ap-font-mono);
	font-size: var(--ap-fs-xs);
	letter-spacing: 0.2em;
	color: var(--ap-red);
	padding-top: 6px;
	flex: none;
}

.ap-pillar__title {
	font-size: var(--ap-fs-h3);
	text-transform: uppercase;
	margin-bottom: 0.3em;
}

.ap-pillar__text {
	margin: 0;
	color: var(--ap-mist);
	max-width: 52ch;
}

/* Logotipo aliado. CLAUDE.md: milwaukee-logo.png es 720x327; tope de 340px. */
.ap-partner-logo {
	display: inline-flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 28px;
}

.ap-partner-logo__label {
	font-family: var(--ap-font-mono);
	font-size: 0.625rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ap-steel);
}

.ap-partner-logo__img {
	max-width: 240px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.ap-partner-logo--lg .ap-partner-logo__img {
	max-width: 340px;
}

/* =========================================================================
   10. CTA final
   ====================================================================== */

.ap-cta {
	position: relative;
	padding-block: clamp(64px, 8vw, 128px);
	background: linear-gradient(140deg, var(--ap-surface-2) 0%, var(--ap-ink) 55%, var(--ap-black) 100%);
	border-block: 1px solid var(--ap-line);
	overflow: hidden;
	text-align: center;
}

.ap-cta__glow {
	position: absolute;
	inset: -40% 20% auto;
	height: 120%;
	background: radial-gradient(50% 50% at 50% 30%, var(--ap-red-soft), transparent 70%);
	pointer-events: none;
}

.ap-cta__hazard {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ap-red-line), transparent);
}

.ap-cta__inner {
	position: relative;
}

.ap-cta__title {
	font-size: var(--ap-fs-h2);
	text-transform: uppercase;
	max-width: 18ch;
	margin-inline: auto;
}

.ap-cta__text {
	color: var(--ap-mist);
	font-size: var(--ap-fs-lg);
	max-width: 52ch;
	margin-inline: auto;
	margin-bottom: 36px;
}

.ap-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

.ap-cta__note {
	margin: 24px 0 0;
	font-family: var(--ap-font-mono);
	font-size: var(--ap-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ap-steel);
}

/* =========================================================================
   11. Cabeceras de pagina y archivo
   ====================================================================== */

.ap-page-hero,
.ap-shop-hero {
	position: relative;
	padding-block: clamp(56px, 8vw, 116px) clamp(36px, 5vw, 64px);
	background: radial-gradient(90% 120% at 20% 0%, var(--ap-surface) 0%, var(--ap-black) 62%);
	border-bottom: 1px solid var(--ap-line-soft);
	overflow: hidden;
}

.ap-page-hero__title,
.ap-shop-hero__title {
	font-size: clamp(2rem, 1.3rem + 3.2vw, 4.25rem);
	text-transform: uppercase;
	letter-spacing: -0.025em;
	margin-bottom: 0.25em;
}

.ap-page-hero__text,
.ap-shop-hero__text {
	color: var(--ap-mist);
	max-width: 60ch;
	margin: 0;
}

.ap-shop-hero__inner,
.ap-page-hero .ap-shell {
	position: relative;
}

.ap-shop-crumbs {
	margin-bottom: 22px;
}

/* Contraste AA: el gris acero no llega a 4.5:1 sobre negro en texto pequeno. */
.ap-breadcrumb {
	font-family: var(--ap-font-mono);
	font-size: var(--ap-fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ap-mist);
}

.ap-breadcrumb a {
	text-decoration: none;
	color: var(--ap-mist-2);
}

.ap-breadcrumb a:hover {
	color: var(--ap-red);
}

.ap-crumb-sep {
	margin-inline: 8px;
	color: var(--ap-line);
}

/* Listado de entradas */
.ap-archive {
	padding-block: clamp(48px, 6vw, 88px);
}

.ap-posts {
	display: grid;
	gap: 20px;
}

.ap-post {
	border: 1px solid var(--ap-line);
	background: var(--ap-surface);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: border-color 320ms var(--ap-ease), transform 320ms var(--ap-ease);
}

.ap-post:hover {
	border-color: var(--ap-steel);
	transform: translateY(-3px);
}

.ap-post__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.ap-post__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.7);
	transition: transform 900ms var(--ap-ease), filter 500ms var(--ap-ease);
}

.ap-post:hover .ap-post__img {
	transform: scale(1.05);
	filter: grayscale(0);
}

.ap-post__body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.ap-post__meta {
	margin: 0;
	font-family: var(--ap-font-mono);
	font-size: var(--ap-fs-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ap-steel);
}

.ap-post__title {
	font-size: var(--ap-fs-h3);
	margin: 0;
}

.ap-post__title a {
	text-decoration: none;
}

.ap-post__title a:hover {
	color: var(--ap-red);
}

.ap-post__excerpt {
	color: var(--ap-mist);
	margin: 0;
	flex: 1;
}

/* Contenido editorial */
.ap-prose {
	max-width: 74ch;
	padding-block: clamp(40px, 5vw, 72px);
	color: var(--ap-mist-2);
}

.ap-section--editorial .ap-prose {
	padding-block: 0;
}

.ap-prose > * + * {
	margin-top: 1.1em;
}

.ap-prose h2 {
	font-size: var(--ap-fs-h2);
	margin-top: 1.6em;
	text-transform: uppercase;
}

.ap-prose h3 {
	font-size: var(--ap-fs-h3);
	margin-top: 1.5em;
}

.ap-prose a {
	color: var(--ap-white);
}

.ap-prose ul,
.ap-prose ol {
	padding-inline-start: 1.2em;
	list-style: revert;
}

.ap-prose li + li {
	margin-top: 0.4em;
}

.ap-prose blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 24px;
	border-inline-start: 2px solid var(--ap-red);
	font-size: var(--ap-fs-lg);
	color: var(--ap-white);
}

.ap-prose code {
	font-family: var(--ap-font-mono);
	font-size: 0.9em;
	background: var(--ap-surface-2);
	padding: 2px 6px;
	border-radius: 2px;
}

.ap-prose pre {
	overflow-x: auto;
	padding: 20px;
	background: var(--ap-surface);
	border: 1px solid var(--ap-line);
}

.ap-prose img {
	border: 1px solid var(--ap-line);
}

.ap-prose table {
	width: 100%;
	border-collapse: collapse;
	display: block;
	overflow-x: auto;
}

.ap-prose th,
.ap-prose td {
	border: 1px solid var(--ap-line);
	padding: 10px 12px;
	text-align: start;
}

.ap-entry__media {
	margin: 0;
	padding-top: clamp(28px, 4vw, 52px);
}

.ap-entry__img {
	width: 100%;
	border: 1px solid var(--ap-line);
}

.ap-entry__tags {
	padding-bottom: clamp(32px, 4vw, 56px);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ap-entry__tags a {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--ap-line);
	font-family: var(--ap-font-mono);
	font-size: var(--ap-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ap-mist);
}

.ap-entry__tags a:hover {
	border-color: var(--ap-red);
	color: var(--ap-white);
}

.ap-postnav {
	display: grid;
	gap: 14px;
	padding-bottom: clamp(48px, 6vw, 88px);
}

.ap-postnav__item {
	display: block;
	padding: 22px;
	border: 1px solid var(--ap-line);
	text-decoration: none;
	transition: border-color 300ms var(--ap-ease);
}

.ap-postnav__item:hover {
	border-color: var(--ap-red);
}

.ap-postnav__label {
	display: block;
	font-family: var(--ap-font-mono);
	font-size: var(--ap-fs-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ap-steel);
	margin-bottom: 6px;
}

.ap-postnav__title {
	font-family: var(--ap-font-display);
	font-size: 1.125rem;
	color: var(--ap-white);
	text-transform: uppercase;
}

.ap-postnav__item--next {
	text-align: end;
}

/* Paginacion */
.ap-pagination,
.woocommerce-pagination {
	margin-top: clamp(40px, 5vw, 72px);
}

.ap-pagination .nav-links,
.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	align-items: center;
	border: 0;
	margin: 0;
	padding: 0;
}

.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
	overflow: visible;
}

.ap-pagination .page-numbers,
.woocommerce-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 12px;
	border: 1px solid var(--ap-line);
	font-family: var(--ap-font-condensed);
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ap-mist-2);
	background: none;
	transition: border-color 260ms var(--ap-ease), color 260ms var(--ap-ease), background-color 260ms var(--ap-ease);
}

.ap-pagination .page-numbers:hover,
.woocommerce-pagination .page-numbers:hover {
	border-color: var(--ap-red);
	color: var(--ap-white);
}

.ap-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers.current {
	background: var(--ap-red);
	border-color: var(--ap-red);
	color: #fff;
}

/* Comentarios */
.ap-comments-wrap {
	padding-block: clamp(32px, 4vw, 64px);
}

.ap-comments__title {
	font-size: var(--ap-fs-h3);
	text-transform: uppercase;
}

.ap-comments__list {
	display: grid;
	gap: 20px;
	margin-bottom: 40px;
}

.ap-comments__list .comment-body {
	border: 1px solid var(--ap-line);
	padding: 20px;
	background: var(--ap-surface);
}

.ap-comments__list .children {
	margin-top: 16px;
	padding-inline-start: clamp(12px, 3vw, 32px);
	display: grid;
	gap: 16px;
}

.ap-comment-form input[type="text"],
.ap-comment-form input[type="email"],
.ap-comment-form input[type="url"],
.ap-comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--ap-line);
	background: var(--ap-ink);
	color: var(--ap-white);
	font: inherit;
	border-radius: var(--ap-radius);
}

.comment-form label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--ap-font-mono);
	font-size: var(--ap-fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ap-steel);
}

.comment-form p {
	margin-bottom: 16px;
}

/* 404 */
.ap-404 {
	position: relative;
	min-height: 70vh;
	display: flex;
	align-items: center;
	padding-block: clamp(72px, 10vw, 140px);
	background: radial-gradient(100% 90% at 70% 10%, var(--ap-surface) 0%, var(--ap-black) 60%);
	overflow: hidden;
}

.ap-404__hazard {
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 6px;
	background-image: repeating-linear-gradient(135deg, var(--ap-red) 0 14px, var(--ap-black) 14px 28px);
}

.ap-404__inner {
	position: relative;
	max-width: 70ch;
}

.ap-404__code {
	font-family: var(--ap-font-display);
	font-size: clamp(6rem, 22vw, 16rem);
	line-height: 0.8;
	margin: 0 0 12px;
	color: transparent;
	-webkit-text-stroke: 1px var(--ap-line);
	letter-spacing: -0.04em;
}

.ap-404__title {
	font-size: var(--ap-fs-h2);
	text-transform: uppercase;
}

.ap-404__text {
	color: var(--ap-mist);
	font-size: var(--ap-fs-lg);
	margin-bottom: 28px;
}

.ap-404__search {
	max-width: 480px;
	margin-bottom: 28px;
}

.ap-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* =========================================================================
   12. WooCommerce
   ====================================================================== */

.ap-main--shop {
	padding-bottom: clamp(64px, 8vw, 120px);
}

.ap-shop__body {
	padding-top: clamp(32px, 4vw, 56px);
}

.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border: 1px solid var(--ap-line);
	border-inline-start: 3px solid var(--ap-red);
	background: var(--ap-surface);
	color: var(--ap-mist-2);
	padding: 16px 20px;
	margin-bottom: 24px;
	list-style: none;
}

/* Barra de ordenacion */
.woocommerce-result-count {
	margin: 0;
	font-family: var(--ap-font-mono);
	font-size: var(--ap-fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ap-mist);
}

.woocommerce-ordering {
	margin: 0;
}

.woocommerce-ordering select,
.ap-theme select {
	padding: 10px 14px;
	border: 1px solid var(--ap-line);
	background: var(--ap-ink);
	color: var(--ap-white);
	font-family: var(--ap-font-condensed);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: var(--ap-radius);
}

/*
 * Barra de resultados y orden. WooCommerce no envuelve estos dos elementos en
 * ningun contenedor propio y el theme no sobreescribe la plantilla, asi que se
 * resuelve con flotantes que la retícula de productos limpia con `clear`.
 * En movil se apilan: a 375 px no caben en una linea sin solaparse.
 */
.ap-main--shop .woocommerce-result-count,
.ap-main--shop .woocommerce-ordering {
	display: block;
	float: none;
	margin: 0 0 12px;
}

.ap-main--shop .woocommerce-ordering select {
	width: 100%;
	min-height: 44px;
}

@media (min-width: 620px) {
	.ap-main--shop .woocommerce-result-count {
		float: left;
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		margin-bottom: 18px;
	}

	.ap-main--shop .woocommerce-ordering {
		float: right;
		margin-bottom: 18px;
	}

	.ap-main--shop .woocommerce-ordering select {
		width: auto;
	}
}

/* Regla fina entre la barra y la retícula, tambien cuando la barra se apila. */
.ap-shop__body > ul.products {
	clear: both;
	border-top: 1px solid var(--ap-line-soft);
	padding-top: clamp(20px, 2.4vw, 32px);
}

/* Reticula de productos (sustituye woocommerce-layout) */
.ap-theme ul.products {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0 0 clamp(32px, 4vw, 56px);
	padding: 0;
	list-style: none;
	clear: both;
}

.ap-theme ul.products::before,
.ap-theme ul.products::after {
	content: none;
}

.ap-theme ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0;
	border: 1px solid var(--ap-line);
	background: linear-gradient(170deg, var(--ap-surface) 0%, var(--ap-ink) 100%);
	overflow: hidden;
	transition: border-color 340ms var(--ap-ease), transform 340ms var(--ap-ease), box-shadow 340ms var(--ap-ease);
}

.ap-theme ul.products li.product:hover {
	border-color: var(--ap-steel);
	transform: translateY(-4px);
	box-shadow: var(--ap-shadow-lift);
}

.ap-theme ul.products li.product > a.woocommerce-LoopProduct-link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

/* Empuja el precio (y con el, el CTA) al pie de la tarjeta. */
.ap-theme ul.products li.product .price {
	margin-top: auto;
}

/*
 * Plato de producto.
 *
 * La imagen puede llegar con fondo blanco, con transparencia o como foto de
 * taller recargada, y el PHP no puede distinguirlas de forma fiable. El
 * tratamiento no depende del fondo:
 *
 * 1. El plato es un degradado claro, no blanco puro, con una vineta que cierra
 *    los bordes: una foto a sangre no deja recuadro sucio y un JPG de fondo
 *    blanco se funde con el.
 * 2. La imagen lleva drop-shadow, que sigue el canal alfa. En un PNG recortado
 *    dibuja la silueta de la herramienta (contraste tanto si es oscura como si
 *    es clara); en una foto rectangular dibuja el canto, y el recorte se lee
 *    como una lamina montada, no como un error de encuadre.
 * 3. Nada de mix-blend-mode: con una foto opaca el resultado seria impredecible.
 */
.ap-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background:
		radial-gradient(122% 108% at 50% 0%, #ffffff 0%, #fbfcfd 46%, #edf0f3 76%, #dbe1e7 100%);
	box-shadow: inset 0 -1px 0 var(--ap-line);
}

.ap-card__media img {
	position: relative;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 7%;
	filter: drop-shadow(0 12px 22px rgba(8, 9, 10, 0.28));
	transition: transform 800ms var(--ap-ease);
}

/* Vineta comun: iguala los tres fondos y despega la imagen del borde. */
.ap-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 24%),
		radial-gradient(116% 82% at 50% 46%, rgba(8, 9, 10, 0) 46%, rgba(8, 9, 10, 0.22) 100%);
}

.ap-theme ul.products li.product:hover .ap-card__media img {
	transform: scale(1.06);
}

.ap-card__badges {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	z-index: 3;
}

.ap-card__scan {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%);
	opacity: 0;
	transform: translateX(-60%);
	transition: opacity 260ms var(--ap-ease), transform 900ms var(--ap-ease);
}

.ap-theme ul.products li.product:hover .ap-card__scan {
	opacity: 0.55;
	transform: translateX(60%);
}

.ap-theme ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--ap-font-condensed);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	color: var(--ap-white);
	padding: 18px 18px 0;
	margin: 0;
}

.ap-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 8px 0 0;
	padding: 0 18px;
	font-family: var(--ap-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ap-mist);
}

.ap-card__cat {
	color: var(--ap-red-ink);
}

.ap-theme ul.products li.product .price {
	display: block;
	margin: 12px 0 0;
	padding: 0 18px;
	font-family: var(--ap-font-display);
	font-size: 1.125rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	color: var(--ap-white);
}

.ap-theme ul.products li.product .price del {
	color: var(--ap-steel);
	font-size: 0.875rem;
	margin-inline-end: 8px;
}

.ap-theme ul.products li.product .price ins {
	text-decoration: none;
}

.ap-price--ask {
	font-family: var(--ap-font-mono);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ap-mist);
}

.ap-theme ul.products li.product .ap-btn--wa {
	margin: 16px 18px 18px;
	width: calc(100% - 36px);
}

.ap-theme ul.products li.product > *:last-child {
	margin-bottom: 18px;
}

.ap-theme ul.products li.product .ap-btn--wa:last-child {
	margin-bottom: 18px;
}

/* El agotado desatura, pero conserva la sombra que da volumen al recorte. */
.ap-card--out-of-stock .ap-card__media img {
	filter: grayscale(1) drop-shadow(0 12px 22px rgba(8, 9, 10, 0.28));
	opacity: 0.62;
}

.ap-theme ul.products li.product .onsale,
.ap-theme .product .onsale {
	position: absolute;
	top: 10px;
	right: 10px;
	left: auto;
	z-index: 2;
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: 5px 9px;
	border-radius: 0;
	background: var(--ap-red);
	color: #fff;
	font-family: var(--ap-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
}

.ap-theme ul.products li.product .button,
.ap-theme ul.products li.product .added_to_cart {
	margin: 16px 18px 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
	border-radius: var(--ap-radius);
	background: var(--ap-surface-3);
	color: var(--ap-white);
	font-family: var(--ap-font-condensed);
	font-weight: 600;
	font-size: var(--ap-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

/* Ficha de producto */
.ap-theme .single-product div.product {
	display: grid;
	gap: clamp(28px, 4vw, 64px);
	margin-bottom: clamp(48px, 6vw, 88px);
}

.ap-theme .single-product div.product::before,
.ap-theme .single-product div.product::after {
	content: none;
}

/* Marco tecnico oscuro; el plato claro lo pone el contenedor de la imagen. */
.ap-theme .single-product div.product .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin: 0;
	border: 1px solid var(--ap-line);
	background: var(--ap-surface);
	padding: 10px;
}

/* Mismo tratamiento agnostico al fondo que en la tarjeta. */
.ap-theme .woocommerce-product-gallery__wrapper {
	position: relative;
	background:
		radial-gradient(122% 108% at 50% 0%, #ffffff 0%, #fbfcfd 46%, #edf0f3 76%, #dbe1e7 100%);
}

.ap-theme .woocommerce-product-gallery__wrapper img {
	padding: 6%;
	filter: drop-shadow(0 14px 26px rgba(8, 9, 10, 0.3));
}

.ap-theme .single-product div.product .summary {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.ap-theme .single-product div.product .product_title {
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
	text-transform: uppercase;
	letter-spacing: -0.025em;
	margin-bottom: 0.3em;
}

.ap-theme .single-product div.product .price {
	font-family: var(--ap-font-display);
	font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem);
	font-weight: 400;
	color: var(--ap-white);
	margin-bottom: 18px;
	display: block;
}

.ap-theme .woocommerce-product-details__short-description {
	color: var(--ap-mist);
	max-width: 60ch;
	margin-bottom: 24px;
}

.ap-theme .product_meta {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--ap-line);
	font-family: var(--ap-font-mono);
	font-size: var(--ap-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ap-steel);
	display: grid;
	gap: 8px;
}

.ap-theme .product_meta a {
	color: var(--ap-mist-2);
	text-decoration: none;
}

.ap-theme .product_meta a:hover {
	color: var(--ap-red);
}

.ap-theme .stock {
	font-family: var(--ap-font-mono);
	font-size: var(--ap-fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 16px;
}

.ap-theme .stock.in-stock {
	color: #6fd18c;
}

.ap-theme .stock.out-of-stock {
	color: var(--ap-mist);
}

/* -------------------------------------------------------------------------
 * Especificaciones de producto
 *
 * Una sola estructura (dl.ap-specs > div.ap-spec > dt.ap-spec__k + dd.ap-spec__v)
 * con dos modificadores: --card en el listado, --single en la ficha.
 * ---------------------------------------------------------------------- */

.ap-specs {
	margin: 0;
}

.ap-specs .ap-spec__k,
.ap-specs .ap-spec__v {
	margin: 0;
}

/* Tarjeta: dos filas como maximo, alineadas con el resto del texto. */
.ap-specs--card {
	display: grid;
	gap: 0;
	margin: 12px 0 0;
	padding: 0 18px;
}

.ap-specs--card .ap-spec {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-top: 1px solid var(--ap-line-soft);
}

.ap-specs--card .ap-spec__k {
	flex: none;
	font-family: var(--ap-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ap-mist);
}

.ap-specs--card .ap-spec__v {
	min-width: 0;
	font-family: var(--ap-font-condensed);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: end;
	color: var(--ap-white);
	overflow-wrap: anywhere;
}

/* Ficha: tabla tecnica completa. */
.ap-specs--single {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin: 0 0 24px;
	border: 1px solid var(--ap-line);
	border-inline-start: 2px solid var(--ap-red);
	background: linear-gradient(160deg, var(--ap-surface) 0%, var(--ap-ink) 100%);
}

.ap-specs--single .ap-spec {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 16px;
	border-top: 1px solid var(--ap-line-soft);
}

.ap-specs--single .ap-spec:first-child {
	border-top: 0;
}

.ap-specs--single .ap-spec__k {
	flex: none;
	font-family: var(--ap-font-mono);
	font-size: var(--ap-fs-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ap-mist);
}

.ap-specs--single .ap-spec__v {
	min-width: 0;
	font-family: var(--ap-font-condensed);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: end;
	color: var(--ap-white);
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
 * Sello de representacion
 *
 * El distintivo es tipografico y geometrico a proposito: no reproduce ningun
 * logotipo ajeno ni sugiere que Anclajes Powers sea la marca.
 * ---------------------------------------------------------------------- */

.ap-seal {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: 100%;
	margin: 22px 0 0;
	padding: 9px 14px;
	border: 1px solid var(--ap-line);
	border-inline-start: 2px solid var(--ap-red);
	background: rgba(255, 255, 255, 0.022);
	font-family: var(--ap-font-mono);
	font-size: var(--ap-fs-xs);
	line-height: 1.45;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ap-mist-2);
}

.ap-seal__mark {
	flex: none;
	width: 10px;
	height: 10px;
	border: 2px solid var(--ap-red);
	border-radius: 50%;
}

.ap-seal__text sup {
	font-size: 0.68em;
	line-height: 0;
	vertical-align: super;
}

.ap-shop-hero .ap-seal {
	margin-top: clamp(20px, 2.6vw, 30px);
}

.ap-theme .single-product div.product .ap-seal {
	margin: 0 0 4px;
}

/* Bloque de consulta */
.ap-consult {
	margin-top: 26px;
	border: 1px solid var(--ap-line);
	background: linear-gradient(160deg, var(--ap-surface) 0%, var(--ap-ink) 100%);
	padding: clamp(20px, 2.4vw, 30px);
}

.ap-consult__specs {
	margin: 0 0 22px;
	display: grid;
	gap: 0;
}

.ap-consult__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--ap-line-soft);
}

.ap-consult__row:last-child {
	border-bottom: 0;
}

.ap-consult__row dt {
	font-family: var(--ap-font-mono);
	font-size: var(--ap-fs-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ap-mist);
	margin: 0;
}

.ap-consult__row dd {
	margin: 0;
	font-family: var(--ap-font-condensed);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ap-white);
	text-align: end;
}

.ap-consult__row dd.is-ok {
	color: #6fd18c;
}

.ap-consult__row dd.is-out {
	color: var(--ap-mist);
}

.ap-consult__action .ap-btn {
	width: 100%;
}

.ap-consult__hint {
	margin: 12px 0 0;
	font-family: var(--ap-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ap-mist);
	text-align: center;
}

.ap-consult__hint--warn {
	color: var(--ap-red);
	text-align: start;
}

/* Pestanas y relacionados */
.ap-theme .woocommerce-tabs {
	border-top: 1px solid var(--ap-line);
	padding-top: clamp(32px, 4vw, 56px);
	margin-bottom: clamp(40px, 5vw, 72px);
}

.ap-theme .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.ap-theme .woocommerce-tabs ul.tabs::before,
.ap-theme .woocommerce-tabs ul.tabs::after {
	content: none;
}

.ap-theme .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 1px solid var(--ap-line);
	border-radius: 0;
	background: none;
}

.ap-theme .woocommerce-tabs ul.tabs li::before,
.ap-theme .woocommerce-tabs ul.tabs li::after {
	content: none;
}

.ap-theme .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 18px;
	font-family: var(--ap-font-condensed);
	font-weight: 600;
	font-size: var(--ap-fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ap-mist);
	text-decoration: none;
}

.ap-theme .woocommerce-tabs ul.tabs li.active {
	border-color: var(--ap-red);
	background: var(--ap-red);
}

.ap-theme .woocommerce-tabs ul.tabs li.active a {
	color: #fff;
}

.ap-theme .woocommerce-tabs .panel {
	color: var(--ap-mist-2);
	max-width: 74ch;
}

.ap-theme .woocommerce-tabs .panel h2 {
	font-size: var(--ap-fs-h3);
	text-transform: uppercase;
}

.ap-theme .shop_attributes th,
.ap-theme .shop_attributes td {
	border: 1px solid var(--ap-line);
	padding: 10px 14px;
	text-align: start;
}

.ap-theme .shop_attributes th {
	font-family: var(--ap-font-mono);
	font-size: var(--ap-fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ap-steel);
	font-weight: 400;
}

.ap-theme .related.products,
.ap-theme .upsells.products {
	border-top: 1px solid var(--ap-line);
	padding-top: clamp(32px, 4vw, 56px);
}

.ap-theme .related.products > h2,
.ap-theme .upsells.products > h2 {
	font-size: var(--ap-fs-h3);
	text-transform: uppercase;
	margin-bottom: 28px;
}

/* Categorias dentro del archivo */
.ap-theme ul.products li.product-category a {
	text-decoration: none;
}

.ap-theme ul.products li.product-category h2 {
	font-family: var(--ap-font-display);
	font-size: 1.125rem;
	text-transform: uppercase;
	padding: 18px;
	margin: 0;
	color: var(--ap-white);
}

/* Boton flotante de WhatsApp */
.ap-wa-float {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 95;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px;
	border-radius: 999px;
	background: var(--ap-red);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.9);
	transition: transform 280ms var(--ap-ease), background-color 280ms var(--ap-ease);
}

.ap-wa-float:hover {
	transform: translateY(-3px);
	background: #fff;
	color: var(--ap-black);
}

.ap-wa-float__text {
	display: none;
	font-family: var(--ap-font-condensed);
	font-weight: 600;
	font-size: var(--ap-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Carga progresiva */
.ap-products__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin-top: clamp(28px, 3vw, 44px);
}

.ap-products.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* =========================================================================
   13. Footer
   ====================================================================== */

.ap-footer {
	position: relative;
	background: var(--ap-black);
	padding-top: clamp(56px, 7vw, 96px);
	margin-top: auto;
}

.ap-footer__rule {
	height: 3px;
	background-image: repeating-linear-gradient(135deg, var(--ap-red) 0 12px, var(--ap-black) 12px 24px);
	opacity: 0.7;
	position: absolute;
	inset-inline: 0;
	top: 0;
}

.ap-footer__grid {
	display: grid;
	gap: clamp(32px, 4vw, 56px);
	padding-bottom: clamp(40px, 5vw, 64px);
}

.ap-footer__pitch {
	color: var(--ap-mist);
	max-width: 40ch;
	margin-top: 18px;
}

.ap-footer__title {
	font-family: var(--ap-font-mono);
	font-size: var(--ap-fs-xs);
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ap-steel);
	margin-bottom: 18px;
}

.ap-footer__list li + li {
	margin-top: 10px;
}

.ap-footer__list a {
	font-family: var(--ap-font-condensed);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ap-mist-2);
	text-decoration: none;
}

.ap-footer__list a:hover {
	color: var(--ap-red);
}

.ap-footer__address {
	font-style: normal;
	display: grid;
	gap: 8px;
	margin-bottom: 22px;
	color: var(--ap-mist);
}

.ap-footer__line a {
	text-decoration: none;
}

.ap-footer__line a:hover {
	color: var(--ap-red);
}

.ap-footer__line--muted {
	color: var(--ap-steel);
	font-family: var(--ap-font-mono);
	font-size: var(--ap-fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ap-footer__text--muted {
	color: var(--ap-steel);
	font-size: 0.875rem;
}

.ap-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 22px;
	border-top: 1px solid var(--ap-line-soft);
}

.ap-footer__copy {
	margin: 0;
	font-family: var(--ap-font-mono);
	font-size: var(--ap-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ap-steel);
}

.ap-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.ap-footer__legal a {
	font-family: var(--ap-font-mono);
	font-size: var(--ap-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ap-steel);
	text-decoration: none;
}

.ap-footer__legal a:hover {
	color: var(--ap-white);
}

.ap-footer__note {
	margin: 0;
	padding-bottom: 32px;
	font-size: 0.75rem;
	line-height: 1.6;
	color: #4c555f;
	max-width: 90ch;
}

.ap-widget__title {
	font-family: var(--ap-font-mono);
	font-size: var(--ap-fs-xs);
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ap-steel);
	margin-bottom: 14px;
}

.ap-widget ul {
	display: grid;
	gap: 8px;
}

.ap-widget a {
	color: var(--ap-mist-2);
	text-decoration: none;
}

.ap-widget a:hover {
	color: var(--ap-red);
}

/* =========================================================================
   14. Responsive
   ====================================================================== */

@media (min-width: 480px) {
	:root {
		--ap-gutter: 24px;
	}

	.ap-posts {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	}

	.ap-theme ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 620px) {
	.ap-cats {
		grid-template-columns: repeat(2, 1fr);
	}

	.ap-postnav {
		grid-template-columns: 1fr 1fr;
	}

	.ap-consult {
		display: grid;
		grid-template-columns: 1fr;
	}

	.ap-wa-float__text {
		display: inline;
	}

	.ap-wa-float {
		padding: 14px 20px;
		border-radius: var(--ap-radius);
	}
}

@media (min-width: 860px) {
	:root {
		--ap-gutter: 32px;
	}

	.ap-header__cta {
		display: inline-flex;
	}

	.ap-authority {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		align-items: start;
	}

	.ap-theme .single-product div.product {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		align-items: start;
	}

	.ap-footer__grid {
		grid-template-columns: 1.4fr 1fr 1.2fr;
	}

	.ap-theme ul.products {
		grid-template-columns: repeat(3, 1fr);
	}

	.ap-footer__col--widgets {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.ap-nav {
		display: block;
	}

	.ap-burger {
		display: none;
	}

	.ap-hero__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	}

	.ap-hero {
		min-height: calc(100svh - 108px);
	}

	.ap-cats {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: minmax(260px, auto);
		gap: 16px;
	}

	.ap-cat--lead {
		grid-column: span 2;
		grid-row: span 2;
	}

	.ap-cat--lead .ap-cat__link {
		min-height: 100%;
	}

	.ap-cat__link {
		min-height: 260px;
	}

	.ap-theme ul.products {
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
	}

	.ap-theme .single-product div.product .woocommerce-product-gallery {
		position: sticky;
		top: 96px;
	}
}

@media (min-width: 1400px) {
	:root {
		--ap-gutter: 48px;
	}

	.ap-cat__link {
		min-height: 300px;
	}

	.ap-hero__product {
		width: min(100%, 640px);
	}
}

@media (min-width: 1800px) {
	:root {
		--ap-shell: 1480px;
		--ap-shell-wide: 1720px;
	}

	.ap-hero__product {
		width: min(100%, 720px);
	}
}

/* Impresion basica */
@media print {
	.ap-header,
	.ap-footer,
	.ap-wa-float,
	.ap-hero__layers,
	.ap-progress,
	.ap-marquee {
		display: none !important;
	}

	body.ap-theme {
		background: #fff;
		color: #000;
	}
}

/* =========================================================================
   15. Salida del hero ligada al scroll
   El JS escribe --ap-hero-p (0 a 1) sobre .ap-hero mientras se abandona la
   primera pantalla; el contenido retrocede en Z y se desvanece.
   ====================================================================== */

html.js .ap-motion .ap-hero__inner,
html.js .ap-motion .ap-hero__ghost {
	transform-origin: 50% 40%;
	will-change: transform, opacity;
}

html.js .ap-motion .ap-hero__inner {
	transform: scale(calc(1 - (0.07 * var(--ap-hero-p, 0) * var(--ap-motion-scale))));
	opacity: calc(1 - (0.9 * var(--ap-hero-p, 0)));
}

html.js .ap-motion .ap-hero__layer--glow {
	opacity: calc(1 - (0.8 * var(--ap-hero-p, 0)));
}

@media (prefers-reduced-motion: reduce) {
	html.js .ap-motion .ap-hero__inner,
	html.js .ap-motion .ap-hero__layer--glow {
		transform: none;
		opacity: 1;
	}
}

/* =========================================================================
   16. Ajustes de integracion 1.0.1
   ====================================================================== */

/*
 * h4 es el unico encabezado que cae por debajo del tamano util de Anton.
 * Barlow Condensed 700 mantiene el registro industrial y se lee a 16-18px.
 */
h4 {
	font-family: var(--ap-font-condensed);
	font-weight: 700;
	letter-spacing: 0.01em;
}

/*
 * Barlow Condensed no incluye U+2190-2193: las flechas caerian por respaldo
 * de glifo a una familia distinta en cada equipo. Se fija explicitamente la
 * display, que si las trae, para que se vean igual en todas partes.
 */
.ap-btn__arrow,
.ap-link-arrow span[aria-hidden],
.ap-search__submit span[aria-hidden] {
	font-family: var(--ap-font-display);
}

/*
 * Objetivos tactiles. WCAG 2.2 SC 2.5.8 pide 24x24 como minimo absoluto; el
 * encargo exige 44x44. Estos enlaces median 14-15px de alto.
 */
.ap-footer__list a,
.ap-footer__legal a,
.ap-breadcrumb a,
.ap-postnav__item,
.ap-theme .product_meta a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Palabras cortas ("Lineas") no llegaban a 44 de ancho con solo la altura. */
.ap-footer__list a,
.ap-footer__legal a {
	min-width: 44px;
}

.ap-footer__list li + li {
	margin-top: 0;
}

.ap-link-arrow {
	min-height: 44px;
}

.ap-brand {
	min-height: 44px;
}

.ap-theme .woocommerce-tabs ul.tabs li a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/*
 * El header fijo con backdrop-filter se recompone en cada scroll. En pantallas
 * pequenas, donde el movil suele ir mas justo, se baja el desenfoque.
 */
@media (max-width: 768px) {
	.ap-header {
		backdrop-filter: blur(8px);
	}
}

/* Sin soporte de `inert`, el panel abierto no debe dejar clicar lo de debajo. */
[inert] {
	pointer-events: none;
}

/*
 * Lamina del protagonista del hero.
 *
 * Solo se activa desde el Personalizador (ap_hero_plate) cuando la foto no
 * tiene fondo transparente. No se puede aplicar siempre: sobre un PNG
 * recortado dibujaria un rectangulo donde no lo habia, que es justo el
 * problema que intenta resolver.
 */
.ap-hero__product--plate .ap-hero__product-img,
.ap-hero__product--plate .ap-hero__product-link {
	background: radial-gradient(122% 108% at 50% 0%, #fff 0%, #dbe1e7 100%);
	border-radius: var(--ap-radius-lg);
	padding: 5%;
	box-shadow: 0 32px 60px -28px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.ap-hero__product--plate .ap-hero__product-link .ap-hero__product-img {
	background: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}