/*
 * Arridal - identidad visual tomada de arridal.com/ig.
 *
 * Se carga DESPUES de main.css y redefine los tokens (--ap-*) y las piezas
 * que main.css pinta con colores fijos. Paleta: verde de marca, papel,
 * salvia y oro; detalles de confeccion (puntadas, ojal, etiqueta, tijeras).
 * Tipografia: Cinzel para titulos, sistema para texto.
 */

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

:root {
	--verde: #063d21;
	--verde-2: #0b4f2c;
	--verde-3: #12663b;
	--verde-osc: #042816;
	--salvia: #c4cec7;
	--salvia-osc: #889e8f;
	--crema: #f6f3ea;
	--papel: #fbf9f3;
	--oro: #d9ae54;
	--oro-2: #f1d48b;
	--oro-ink: #3b2f0b;
	--tinta: #1d2b23;
	--tinta-2: #2a4a37;
	--tinta-3: #4a5d51;
	--wa: #25d366;
	--wa-osc: #1eb956;
	--puntada: rgba(246, 243, 234, 0.32);
	--puntada-papel: rgba(6, 61, 33, 0.28);
	--sombra: 0 14px 34px rgba(0, 0, 0, 0.32);

	/* Superficies */
	--ap-black: var(--verde);
	--ap-ink: var(--verde-2);
	--ap-surface: var(--verde-2);
	--ap-surface-2: var(--verde-3);
	--ap-surface-3: var(--verde-3);

	/* Lineas */
	--ap-line: rgba(246, 243, 234, 0.16);
	--ap-line-strong: rgba(246, 243, 234, 0.36);
	--ap-line-soft: rgba(246, 243, 234, 0.1);

	/* Texto */
	--ap-white: var(--crema);
	--ap-mist-2: var(--salvia);
	--ap-mist: var(--salvia);
	--ap-steel: #a9b9ae;

	/* Acento (antes rojo): oro */
	--ap-red: var(--oro);
	--ap-red-soft: rgba(217, 174, 84, 0.16);
	--ap-red-line: rgba(217, 174, 84, 0.45);
	--ap-red-ink: var(--oro-2);

	/* Tipografia */
	--ap-font-display: "Cinzel", Georgia, "Times New Roman", serif;
	--ap-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ap-font-condensed: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ap-font-mono: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Escala: Cinzel es ancha, se baja un poco la de titulos */
	--ap-fs-h3: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
	--ap-fs-h2: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
	--ap-fs-h1: clamp(1.8rem, 1.3rem + 2.2vw, 3rem);

	/* Ritmo */
	--ap-radius: 14px;
	--ap-radius-lg: 22px;
	--ap-section-y: clamp(56px, 7vw, 112px);

	/* Sombras */
	--ap-shadow-card: 0 18px 34px rgba(0, 0, 0, 0.3);
	--ap-shadow-lift: 0 24px 44px rgba(0, 0, 0, 0.4);
}

@supports (color: color-mix(in srgb, red 50%, white)) {
	:root {
		--ap-red-ink: var(--oro-2);
	}
}

/* =========================================================================
   2. Base: fondo verde con patron de costura
   ====================================================================== */

html,
body.ap-theme {
	overflow-x: clip;
}

body.ap-theme {
	color: var(--crema);
	/* Fondo del catálogo (2026-10-06): verde liso de la marca con una luz
	   suave arriba y más profundo abajo; sin el patrón de costura. */
	background-color: var(--verde);
	background-image:
		radial-gradient(ellipse 90% 55% at 50% -8%, rgba(18, 102, 59, 0.85), transparent 70%),
		linear-gradient(180deg, var(--verde-2) 0%, var(--verde) 38%, var(--verde-osc) 100%);
	background-attachment: fixed;
	letter-spacing: 0;
}

h1,
h2,
h3,
.h1,
.h2,
.h3 {
	font-family: var(--ap-font-display);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: none;
}

h4 {
	font-family: var(--ap-font-body);
	font-weight: 800;
}

:focus-visible {
	outline: 3px solid var(--oro);
	outline-offset: 3px;
}

::selection {
	background: var(--oro);
	color: var(--oro-ink);
}

/* Los titulos en mayusculas de main.css pasan a Cinzel con mayuscula inicial */
.ap-section__title,
.ap-hero__title,
.ap-authority__title,
.ap-cta__title,
.ap-page-hero__title,
.ap-shop-hero__title,
.ap-404__title,
.ap-empty__title,
.ap-pillar__title,
.ap-comments__title,
.ap-prose h2,
.ap-prose h3,
.ap-theme .single-product div.product .product_title,
.ap-theme .woocommerce-tabs .panel h2,
.ap-theme .related.products > h2,
.ap-theme .upsells.products > h2 {
	text-transform: none;
	letter-spacing: 0.06em;
	line-height: 1.12;
}

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

/* Antetitulo: oro, espaciado, sin rayita */
.ap-eyebrow {
	font-weight: 800;
	font-size: 0.72rem;
	letter-spacing: 0.3em;
	color: var(--oro);
}

.ap-eyebrow__mark {
	width: 18px;
	height: 2px;
	border-top: 2px dashed var(--oro);
	background: none;
}

.ap-section__subtitle {
	color: var(--salvia);
}

.ap-link-arrow {
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--crema);
	border-bottom: 1.5px dashed var(--puntada);
}

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

/* Botones con puntada (como los enlaces de /ig) */
.ap-btn {
	border-radius: var(--ap-radius);
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: none;
	font-size: 0.95rem;
	padding: 14px 22px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
	overflow: visible;
}

.ap-btn::before {
	display: none;
}

.ap-btn::after {
	content: "";
	position: absolute;
	inset: 5px;
	border: 1.5px dashed rgba(246, 243, 234, 0.35);
	border-radius: calc(var(--ap-radius) - 4px);
	pointer-events: none;
	transition: border-color 0.2s;
}

.ap-btn:hover,
.ap-btn:focus-visible {
	transform: translateY(-3px);
}

.ap-btn:hover::after,
.ap-btn:focus-visible::after {
	border-color: var(--oro);
}

.ap-btn--primary {
	background: linear-gradient(135deg, var(--oro-2), var(--oro));
	color: var(--oro-ink);
}

.ap-btn--primary::after {
	border-color: rgba(43, 34, 10, 0.35);
}

.ap-btn--primary:hover {
	color: var(--oro-ink);
	background: linear-gradient(135deg, #f7df9f, #e2b860);
}

.ap-btn--primary:hover::after {
	border-color: rgba(43, 34, 10, 0.6);
}

.ap-btn--ghost {
	background: var(--verde-2);
	color: var(--crema);
	border-color: transparent;
}

.ap-btn--ghost:hover {
	background: var(--verde-3);
	border-color: transparent;
	color: var(--crema);
}

.ap-btn--compact {
	border: 0;
	background: var(--verde-2);
	color: var(--crema);
}

.ap-btn--compact:hover {
	background: var(--verde-3);
	color: var(--crema);
}

/* WhatsApp: verde WhatsApp, letras blancas (en cualquier fondo) */
.ap-btn--wa,
.ap-btn--wa.ap-btn--ghost,
.ap-btn--wa.ap-btn--primary,
.ap-btn--wa.ap-btn--compact {
	background: var(--wa);
	color: #fff;
}

.ap-btn--wa::after {
	border-color: rgba(255, 255, 255, 0.55) !important;
}

.ap-btn--wa:hover,
.ap-btn--wa.ap-btn--ghost:hover,
.ap-btn--wa.ap-btn--primary:hover {
	background: var(--wa-osc);
	color: #fff;
}

.ap-btn--sm {
	padding: 11px 16px;
	font-size: 0.85rem;
}

.ap-btn--lg {
	padding: 17px 28px;
	font-size: 1.02rem;
}

.ap-btn__arrow,
.ap-link-arrow span[aria-hidden],
.ap-search__submit span[aria-hidden] {
	font-family: var(--ap-font-body);
}

/* Distintivos: sellos redondos */
.ap-badge {
	border: 0;
	border-radius: 999px;
	padding: 6px 11px;
	font-weight: 800;
	font-size: 0.66rem;
	letter-spacing: 0.08em;
	background: var(--verde);
	color: var(--crema);
	backdrop-filter: none;
}

.ap-badge--destacado {
	background: var(--oro);
	color: var(--oro-ink);
}

.ap-badge--agotado {
	background: var(--salvia-osc);
	color: var(--tinta);
}

/* Estado vacio: etiqueta de papel */
.ap-empty {
	border: 0;
	border-radius: var(--ap-radius-lg);
	background: var(--papel);
	color: var(--tinta-2);
	box-shadow: var(--sombra);
}

.ap-empty::after {
	content: "";
	position: absolute;
	inset: 10px;
	border: 2px dashed var(--puntada-papel);
	border-radius: 15px;
	pointer-events: none;
}

.ap-empty__title {
	color: var(--verde);
}

.ap-empty__text {
	color: var(--tinta-2);
}

.ap-empty__mark {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--verde);
	border: 6px solid var(--oro);
}

/* Buscador */
.ap-search {
	border: 0;
	border-radius: 999px;
	background: var(--papel);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.ap-search:focus-within {
	box-shadow: 0 0 0 3px var(--oro);
}

.ap-search__input {
	color: var(--verde);
	font-weight: 600;
}

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

.ap-search__submit {
	background: var(--verde);
	color: var(--crema);
	padding-inline: 22px;
}

.ap-search__submit:hover {
	background: var(--verde-3);
	color: var(--crema);
}

/* Las reticulas tecnicas desaparecen */
.ap-page-hero__grid,
.ap-shop-hero__grid,
.ap-404__grid,
.ap-hero__layer--grid {
	display: none;
}

.ap-progress__bar {
	background: var(--oro);
}

/* =========================================================================
   4. Header
   ====================================================================== */

.ap-header {
	background: rgba(6, 61, 33, 0.82);
	backdrop-filter: blur(12px) saturate(120%);
	border-bottom: 1.5px dashed var(--puntada);
}

.ap-header.is-stuck {
	background: rgba(6, 61, 33, 0.96);
	border-bottom-color: var(--puntada);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

/* Barra superior: sello oro */
.ap-topbar {
	background: linear-gradient(90deg, var(--oro-2), var(--oro) 40%, var(--oro));
	color: var(--oro-ink);
	border-bottom: 0;
	font-weight: 800;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
}

.ap-topbar__dot {
	width: 8px;
	height: 8px;
	background: var(--verde);
	box-shadow: 0 0 0 2px rgba(59, 47, 11, 0.25);
}

.ap-topbar__aside {
	color: var(--oro-ink);
}

.ap-brand__logo-img {
	max-height: 54px;
}

.ap-brand__mark {
	background: var(--oro);
	border-radius: 50%;
	clip-path: none;
	border: 5px solid var(--papel);
	box-shadow: 0 0 0 2px var(--oro);
}

.ap-brand__name {
	font-family: var(--ap-font-display);
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--crema);
}

.ap-brand__tagline {
	color: var(--salvia);
	letter-spacing: 0.1em;
	font-weight: 700;
}

.ap-nav__list a {
	font-weight: 800;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--salvia);
}

.ap-nav__list a::after {
	height: 0;
	border-top: 2px dashed var(--oro);
	background: none;
}

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

.ap-burger {
	border: 1.5px dashed var(--puntada);
	border-radius: 12px;
}

.ap-burger__line {
	background: var(--crema);
}

/* Menu movil */
.ap-mobile-nav {
	background: var(--verde);
	background-image: linear-gradient(180deg, var(--verde-2) 0%, var(--verde) 45%, var(--verde-osc) 100%);
	padding-top: 150px;
}

.ap-mobile-nav__list {
	border-top: 1.5px dashed var(--puntada);
}

.ap-mobile-nav__list li {
	border-bottom: 1.5px dashed var(--puntada);
}

.ap-mobile-nav__list a {
	font-family: var(--ap-font-display);
	font-weight: 700;
	font-size: 1.2rem;
	letter-spacing: 0.1em;
	text-transform: none;
	color: var(--crema);
}

.ap-mobile-nav__list .sub-menu a {
	font-family: var(--ap-font-body);
	font-weight: 700;
	color: var(--salvia);
}

/* =========================================================================
   5. Hero: mesa de costura + etiqueta de papel + lamina de producto
   ====================================================================== */

.ap-hero {
	background: none;
	min-height: 0;
	padding-block: clamp(20px, 4vh, 56px) clamp(56px, 8vh, 96px);
}

.ap-hero__layer--vignette,
.ap-hero__layer--glow,
.ap-hero__layer--wedge,
.ap-hero__layer--photo,
.ap-hero__ghost,
.ap-hero__scanline {
	display: none;
}

/* Mesa de costura (cinta, tijeras, carrete, hilo) encima de la etiqueta */
.ap-hero__mesa {
	display: block;
	width: min(100%, 560px);
	height: auto;
	aspect-ratio: 800 / 330;
	margin: 0 auto -6px;
	filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.08));
}

.ap-hero__copy {
	position: relative;
	max-width: 620px;
	margin-inline: auto;
	text-align: center;
	background:
		repeating-linear-gradient(45deg, rgba(6, 61, 33, 0.025) 0 2px, transparent 2px 6px),
		var(--papel);
	color: var(--verde);
	border-radius: 20px;
	padding: 44px 22px 34px;
	box-shadow: var(--sombra);
	margin-top: 16px;
}

/* costura y ojal de la etiqueta */
.ap-hero__copy::before {
	content: "";
	position: absolute;
	inset: 10px;
	border: 2px dashed rgba(6, 61, 33, 0.4);
	border-radius: 13px;
	pointer-events: none;
}

.ap-hero__copy::after {
	content: "";
	position: absolute;
	top: -16px;
	left: 50%;
	width: 32px;
	height: 32px;
	margin-left: -16px;
	border-radius: 50%;
	background: var(--verde);
	border: 6px solid var(--oro);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.ap-hero__eyebrow {
	justify-content: center;
	color: var(--salvia-osc);
	letter-spacing: 0.3em;
	margin-bottom: 10px;
}

.ap-hero__eyebrow .ap-eyebrow__mark {
	display: none;
}

.ap-hero__title {
	font-size: var(--ap-fs-h1);
	letter-spacing: 0.12em;
	line-height: 1.08;
	max-width: none;
	margin-inline: auto;
	margin-bottom: 0.4em;
	color: var(--verde);
}

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

.ap-hero__text {
	color: var(--tinta-2);
	font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.08rem);
	margin-inline: auto;
	margin-bottom: 24px;
}

.ap-hero__actions {
	justify-content: center;
	gap: 12px;
	margin-bottom: 0;
}

/* Fichas (sellos) bajo el texto */
.ap-hero__specs {
	max-width: none;
	border: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
}

.ap-hero__spec {
	border: 0;
	padding: 7px 12px;
	gap: 6px;
	border-radius: 999px;
	background: var(--verde);
	color: var(--crema);
}

.ap-hero__spec dt,
.ap-hero__spec dd {
	color: inherit;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

/* Lamina del producto protagonista */
.ap-hero__stage {
	perspective: none;
}

.ap-hero__product {
	width: min(100%, 440px);
	aspect-ratio: auto;
	display: block;
	background: var(--papel);
	border-radius: var(--ap-radius-lg);
	padding: 10px 10px 16px;
	box-shadow: 0 18px 34px rgba(0, 0, 0, 0.42);
	transform-style: flat;
}

.ap-hero__product::before {
	content: "";
	position: absolute;
	inset: 7px;
	border: 1.5px dashed rgba(6, 61, 33, 0.22);
	border-radius: 17px;
	pointer-events: none;
	z-index: 2;
}

.ap-hero__product::after,
.ap-hero__halo {
	display: none;
}

.ap-hero__product-link {
	display: block;
	height: auto;
	border-radius: 15px;
	overflow: hidden;
	background: #b9c6bd;
	position: relative;
}

.ap-hero__product-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	filter: none;
}

.ap-hero__product-link::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse at 50% 42%, transparent 55%, rgba(6, 61, 33, 0.22));
	box-shadow: inset 0 0 0 1px rgba(6, 61, 33, 0.12);
}

.ap-hero__product--plate .ap-hero__product-img {
	background: #fff;
}

/* Etiqueta colgante con nombre y codigo */
.ap-hero__tag {
	position: static;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	margin: 12px 6px 0;
	padding: 0;
	border: 0;
	background: none;
	backdrop-filter: none;
	font-family: var(--ap-font-body);
	font-weight: 800;
	font-size: 0.95rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--verde);
	max-width: none;
}

.ap-hero__tag-dot {
	display: none;
}

.ap-hero__tag-sku {
	font-family: var(--ap-font-display);
	font-weight: 700;
	color: var(--verde);
	flex: none;
}

.ap-hero__abstract-ring {
	border-color: var(--puntada-papel);
}

.ap-hero__abstract-bolt {
	background: radial-gradient(circle at 35% 30%, var(--verde-3), var(--verde) 70%);
	clip-path: none;
	border-radius: 50%;
	box-shadow: 0 0 0 5px var(--papel), 0 0 0 7px var(--oro);
}

/* Indicador de scroll */
.ap-hero__scroll {
	display: none;
}

/* =========================================================================
   6. Cinta metrica (marquee)
   ====================================================================== */

.ap-marquee {
	border: 0;
	background:
		repeating-linear-gradient(90deg, rgba(6, 61, 33, 0.55) 0 1.5px, transparent 1.5px 12px) top / 100% 7px no-repeat,
		repeating-linear-gradient(90deg, rgba(6, 61, 33, 0.55) 0 2px, transparent 2px 60px) top / 100% 13px no-repeat,
		var(--crema);
	padding-block: 20px 12px;
	-webkit-mask-image: none;
	mask-image: none;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.ap-marquee__item {
	font-weight: 800;
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	color: var(--verde);
}

.ap-marquee__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--oro);
	transform: none;
	box-shadow: 0 0 0 2px var(--verde);
}

/* =========================================================================
   7. Categorias: laminas de papel
   ====================================================================== */

.ap-cat__link {
	border: 0;
	border-radius: var(--ap-radius-lg);
	background: var(--papel);
	box-shadow: var(--ap-shadow-card);
	min-height: 240px;
}

.ap-cat__link::before {
	display: none;
}

.ap-cat__link::after {
	content: "";
	position: absolute;
	inset: 7px;
	border: 1.5px dashed rgba(6, 61, 33, 0.25);
	border-radius: 17px;
	pointer-events: none;
	z-index: 4;
}

.ap-cat__link:hover,
.ap-cat__link:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--ap-shadow-lift);
}

.ap-cat__link {
	display: flex;
	flex-direction: column;
}

/* La foto deja de ser fondo: es una lamina enmarcada arriba de la tarjeta */
.ap-cat__media {
	position: relative;
	inset: auto;
	flex: none;
	aspect-ratio: 16 / 10;
	margin: 10px 10px 0;
	border-radius: 15px;
	background: #b9c6bd;
}

.ap-cat--lead .ap-cat__media {
	flex: 1 1 auto;
	min-height: 0;
	aspect-ratio: 4 / 3;
}

.ap-cat__img {
	opacity: 1;
	filter: none;
	transform: scale(1.02);
}

.ap-cat__link:hover .ap-cat__img {
	opacity: 1;
	filter: none;
	transform: scale(1.07);
}

.ap-cat__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse at 50% 42%, transparent 55%, rgba(6, 61, 33, 0.22));
	box-shadow: inset 0 0 0 1px rgba(6, 61, 33, 0.12);
}

.ap-cat__pattern {
	background-image: url("../img/patron.svg");
	background-color: var(--salvia);
	opacity: 1;
	filter: invert(1) opacity(0.5);
}

.ap-cat__body {
	position: static;
	margin-top: 0;
	padding: 16px 20px 22px;
	background: none;
	gap: 4px;
}

/* el numero como etiqueta cosida */
.ap-cat__index {
	position: absolute;
	left: 20px;
	top: 20px;
	z-index: 3;
	font-weight: 800;
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	background: var(--verde);
	color: var(--crema);
	padding: 7px 10px 7px 20px;
	border-radius: 4px 8px 8px 4px;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.ap-cat__index::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-radius: 50%;
	background: var(--papel);
}

.ap-cat__name {
	font-family: var(--ap-font-display);
	font-weight: 700;
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.45rem);
	letter-spacing: 0.06em;
	text-transform: none;
	color: var(--verde);
}

.ap-cat__desc {
	color: var(--tinta-2);
	font-size: 0.88rem;
}

.ap-cat__count {
	color: var(--tinta-3);
	font-weight: 800;
	letter-spacing: 0.1em;
	font-size: 0.7rem;
}

.ap-cat__arrow {
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px dashed rgba(6, 61, 33, 0.35);
	background: rgba(251, 249, 243, 0.96);
	color: var(--verde);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
	font-weight: 800;
}

.ap-cat__link:hover .ap-cat__arrow {
	background: var(--verde);
	border-color: rgba(246, 243, 234, 0.5);
	color: var(--crema);
	transform: scale(1.08);
}

/* =========================================================================
   8. Sobre Arridal (pilares como pasos)
   ====================================================================== */

.ap-section--authority {
	background: none;
}

.ap-authority__stripe {
	display: none;
}

.ap-authority__text {
	color: var(--salvia);
}

.ap-pillars {
	border: 0;
	position: relative;
}

.ap-pillars::before {
	content: "";
	position: absolute;
	left: 21px;
	top: 28px;
	bottom: 28px;
	border-left: 2px dashed var(--oro);
	opacity: 0.7;
}

.ap-pillar {
	border: 0;
	padding: 12px 0;
	align-items: flex-start;
	gap: 16px;
}

.ap-pillar__index {
	width: 44px;
	height: 44px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 50%;
	padding: 0;
	background: var(--papel);
	color: var(--verde);
	font-family: var(--ap-font-display);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0;
	box-shadow: 0 0 0 4px var(--verde), 0 0 0 6px var(--oro);
	position: relative;
	z-index: 1;
}

.ap-pillar__title {
	font-family: var(--ap-font-body);
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: 0;
	margin-top: 10px;
	margin-bottom: 0.15em;
	color: var(--crema);
}

.ap-pillar__text {
	color: var(--salvia);
	font-size: 0.92rem;
}

.ap-partner-logo__label {
	color: var(--salvia-osc);
}

/* =========================================================================
   9. CTA final: etiqueta de papel
   ====================================================================== */

.ap-section--cta {
	padding-inline: var(--ap-gutter);
}

.ap-cta {
	max-width: 760px;
	margin-inline: auto;
	border: 0;
	border-radius: 20px;
	background:
		repeating-linear-gradient(45deg, rgba(6, 61, 33, 0.025) 0 2px, transparent 2px 6px),
		var(--papel);
	color: var(--verde);
	box-shadow: var(--sombra);
	padding-block: clamp(48px, 6vw, 80px);
	overflow: visible;
}

.ap-cta::before {
	content: "";
	position: absolute;
	inset: 10px;
	border: 2px dashed rgba(6, 61, 33, 0.4);
	border-radius: 13px;
	pointer-events: none;
}

.ap-cta::after {
	content: "";
	position: absolute;
	top: -16px;
	left: 50%;
	width: 32px;
	height: 32px;
	margin-left: -16px;
	border-radius: 50%;
	background: var(--verde);
	border: 6px solid var(--oro);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.ap-cta__glow,
.ap-cta__hazard {
	display: none;
}

.ap-cta__title {
	color: var(--verde);
	max-width: 22ch;
}

.ap-cta__text {
	color: var(--tinta-2);
}

.ap-cta__note {
	color: var(--tinta-3);
}

/* =========================================================================
   10. Cabeceras de tienda y pagina
   ====================================================================== */

.ap-page-hero,
.ap-shop-hero {
	background: none;
	border-bottom: 0;
	padding-block: clamp(36px, 5vw, 72px) clamp(20px, 3vw, 36px);
}

.ap-page-hero__title,
.ap-shop-hero__title {
	font-size: var(--ap-fs-h1);
	color: var(--crema);
}

.ap-page-hero__text,
.ap-shop-hero__text {
	color: var(--salvia);
}

.ap-breadcrumb {
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--salvia-osc);
}

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

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

.ap-crumb-sep {
	color: var(--salvia-osc);
}

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

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

.ap-prose blockquote {
	border-inline-start: 2px dashed var(--oro);
	color: var(--crema);
}

.ap-post {
	border: 0;
	border-radius: var(--ap-radius-lg);
	background: var(--papel);
	color: var(--tinta);
	box-shadow: var(--ap-shadow-card);
}

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

.ap-post__excerpt,
.ap-post__meta {
	color: var(--tinta-2);
}

/* Paginacion: fichas con puntada */
.ap-pagination .page-numbers,
.woocommerce-pagination .page-numbers {
	border: 1.5px dashed var(--puntada);
	border-radius: 999px;
	font-weight: 800;
	color: var(--crema);
}

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

.ap-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers.current {
	background: var(--papel);
	border-color: var(--papel);
	color: var(--verde);
}

/* 404 */
.ap-404 {
	background: none;
}

.ap-404__hazard {
	background-image: repeating-linear-gradient(90deg, var(--oro) 0 14px, transparent 14px 28px);
	height: 3px;
}

.ap-404__code {
	-webkit-text-stroke: 1px var(--puntada);
}

/* =========================================================================
   11. WooCommerce: laminas de producto
   ====================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border: 0;
	border-radius: var(--ap-radius);
	background: var(--papel);
	color: var(--tinta);
	box-shadow: var(--ap-shadow-card);
}

.woocommerce-result-count {
	color: var(--salvia);
	font-weight: 700;
	letter-spacing: 0.08em;
}

.woocommerce-ordering select,
.ap-theme select {
	border: 0;
	border-radius: 999px;
	background: var(--papel);
	color: var(--verde);
	font-weight: 800;
	font-size: 0.85rem;
	text-transform: none;
	letter-spacing: 0;
	padding: 10px 18px;
}

.ap-shop__body > ul.products {
	border-top: 1.5px dashed var(--puntada);
}

.ap-theme ul.products li.product {
	border: 0;
	border-radius: var(--ap-radius-lg);
	background: var(--papel);
	color: var(--tinta);
	box-shadow: var(--ap-shadow-card);
	padding-bottom: 6px;
}

.ap-theme ul.products li.product::after {
	content: "";
	position: absolute;
	inset: 7px;
	border: 1.5px dashed rgba(6, 61, 33, 0.22);
	border-radius: 17px;
	pointer-events: none;
	z-index: 4;
}

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

.ap-card__media {
	margin: 10px 10px 0;
	border-radius: 15px;
	aspect-ratio: 1 / 1;
	background: #b9c6bd;
	box-shadow: none;
}

.ap-card__media img,
.ap-theme ul.products li.product .ap-card__media img {
	width: 100%;
	height: 100%;
	padding: 0;
	object-fit: cover;
	filter: none;
}

.ap-card__media::after {
	background: radial-gradient(ellipse at 50% 42%, transparent 55%, rgba(6, 61, 33, 0.22));
	box-shadow: inset 0 0 0 1px rgba(6, 61, 33, 0.12);
}

.ap-card__scan {
	display: none;
}

.ap-card__badges {
	top: 12px;
	left: 12px;
	z-index: 3;
}

.ap-theme ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--ap-font-body);
	font-weight: 800;
	font-size: 1.02rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--verde);
	padding: 14px 18px 0;
}

.ap-card__meta {
	font-weight: 800;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: var(--tinta-3);
	margin-top: 4px;
}

.ap-card__cat {
	color: var(--verde-3);
}

.ap-card__sku {
	font-family: var(--ap-font-display);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.ap-specs--card .ap-spec {
	border-top: 1.5px dashed rgba(6, 61, 33, 0.18);
}

.ap-specs--card .ap-spec__k {
	color: var(--tinta-3);
	font-weight: 800;
	letter-spacing: 0.08em;
}

.ap-specs--card .ap-spec__v {
	color: var(--verde);
	font-weight: 800;
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	text-transform: none;
}

.ap-theme ul.products li.product .price {
	color: var(--verde);
	font-family: var(--ap-font-display);
}

.ap-price--ask,
.ap-theme ul.products li.product .price .ap-price--ask {
	font-family: var(--ap-font-body);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--tinta-3);
}

.ap-theme ul.products li.product .price del {
	color: var(--tinta-3);
}

/* Boton de la tarjeta: "pedir" por WhatsApp */
.ap-theme ul.products li.product .ap-btn--wa {
	border-radius: 999px;
	padding: 11px 16px;
	font-size: 0.9rem;
	box-shadow: 0 6px 14px rgba(37, 211, 102, 0.35);
}

.ap-theme ul.products li.product .ap-btn--wa::after {
	border-radius: 999px;
}

.ap-theme ul.products li.product .onsale,
.ap-theme .product .onsale {
	border-radius: 999px;
	background: var(--oro);
	color: var(--oro-ink);
	font-weight: 800;
}

.ap-theme ul.products li.product .button,
.ap-theme ul.products li.product .added_to_cart {
	border-radius: 999px;
	background: var(--verde-2);
	color: var(--crema);
	font-weight: 800;
	text-transform: none;
}

.ap-card--out-of-stock .ap-card__media img {
	filter: grayscale(1);
}

.ap-theme ul.products li.product-category h2 {
	font-family: var(--ap-font-display);
	color: var(--verde);
	text-transform: none;
	letter-spacing: 0.06em;
}

/* Ficha de producto */
.ap-theme .single-product div.product .woocommerce-product-gallery {
	border: 0;
	border-radius: var(--ap-radius-lg);
	background: var(--papel);
	padding: 10px;
	box-shadow: var(--ap-shadow-card);
	position: relative;
}

.ap-theme .single-product div.product .woocommerce-product-gallery::after {
	content: "";
	position: absolute;
	inset: 7px;
	border: 1.5px dashed rgba(6, 61, 33, 0.22);
	border-radius: 17px;
	pointer-events: none;
	z-index: 4;
}

.ap-theme .woocommerce-product-gallery__wrapper {
	background: #b9c6bd;
	border-radius: 15px;
	overflow: hidden;
}

.ap-theme .woocommerce-product-gallery__wrapper img {
	padding: 0;
	filter: none;
}

.ap-theme .single-product div.product .product_title {
	color: var(--crema);
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem);
}

/*
 * main.css escribe ".ap-theme .single-product": las dos clases van en <body>,
 * asi que la retícula de la ficha nunca se aplicaba. Se corrige aqui.
 */
.ap-theme.single-product div.product {
	display: grid;
	gap: clamp(28px, 4vw, 56px);
	margin-bottom: clamp(48px, 6vw, 88px);
}

.ap-theme.single-product div.product .price,
.ap-theme.single-product div.product .summary .ap-price--ask {
	display: block;
	font-size: 0.85rem;
	color: var(--salvia);
	margin-bottom: 18px;
}

.ap-theme .woocommerce-product-details__short-description {
	color: var(--salvia);
}

.ap-theme .product_meta {
	border-top: 1.5px dashed var(--puntada);
	color: var(--salvia-osc);
	font-weight: 700;
	letter-spacing: 0.06em;
}

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

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

.ap-theme .stock {
	font-weight: 800;
	letter-spacing: 0.08em;
}

.ap-theme .stock.in-stock {
	color: var(--oro-2);
}

/* Tabla de especificaciones de la ficha: papel */
.ap-specs--single {
	border: 0;
	border-radius: var(--ap-radius);
	background: var(--papel);
	color: var(--tinta);
	box-shadow: var(--ap-shadow-card);
	overflow: hidden;
}

.ap-specs--single .ap-spec {
	border-top: 1.5px dashed rgba(6, 61, 33, 0.18);
}

.ap-specs--single .ap-spec__k {
	color: var(--tinta-3);
	font-weight: 800;
	letter-spacing: 0.08em;
}

.ap-specs--single .ap-spec__v {
	color: var(--verde);
	font-weight: 800;
	text-transform: none;
	letter-spacing: 0;
}

/* Bloque de consulta: etiqueta de papel */
.ap-consult {
	position: relative;
	border: 0;
	border-radius: 20px;
	background:
		repeating-linear-gradient(45deg, rgba(6, 61, 33, 0.025) 0 2px, transparent 2px 6px),
		var(--papel);
	color: var(--tinta);
	box-shadow: var(--sombra);
	padding-top: 34px;
}

.ap-consult::before {
	content: "";
	position: absolute;
	inset: 10px;
	border: 2px dashed rgba(6, 61, 33, 0.35);
	border-radius: 13px;
	pointer-events: none;
}

.ap-consult::after {
	content: "";
	position: absolute;
	top: -14px;
	left: 50%;
	width: 28px;
	height: 28px;
	margin-left: -14px;
	border-radius: 50%;
	background: var(--verde);
	border: 5px solid var(--oro);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.ap-consult__row {
	border-bottom: 1.5px dashed rgba(6, 61, 33, 0.18);
}

.ap-consult__row dt {
	color: var(--tinta-3);
	font-weight: 800;
	letter-spacing: 0.08em;
}

.ap-consult__row dd {
	color: var(--verde);
	font-weight: 800;
	text-transform: none;
	letter-spacing: 0;
}

.ap-consult__row dd.is-ok {
	color: var(--verde-3);
}

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

.ap-consult__hint {
	color: var(--tinta-3);
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}

.ap-consult__hint--warn {
	color: #9a3b1f;
}

.ap-consult__action .ap-btn {
	border-radius: 999px;
}

.ap-consult__action .ap-btn::after {
	border-radius: 999px;
}

/* Pestanas como fichas (selectores con div.product para ganar al CSS de WooCommerce) */
.ap-theme div.product .woocommerce-tabs {
	border-top: 1.5px dashed var(--puntada);
	padding-top: clamp(32px, 4vw, 56px);
	margin-bottom: clamp(40px, 5vw, 72px);
}

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

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

.ap-theme div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 1.5px dashed var(--puntada);
	border-radius: 999px;
	background: none;
	box-shadow: none;
}

.ap-theme div.product .woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 18px;
	font-weight: 800;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.86rem;
	color: var(--crema);
	text-decoration: none;
	text-shadow: none;
}

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

.ap-theme div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--verde);
}

.ap-theme .woocommerce-tabs .panel {
	color: var(--crema);
}

.ap-theme .shop_attributes th,
.ap-theme .shop_attributes td {
	border: 1px dashed var(--puntada);
}

.ap-theme .shop_attributes th {
	color: var(--salvia);
	font-weight: 800;
	letter-spacing: 0.08em;
}

.ap-theme .related.products,
.ap-theme .upsells.products {
	border-top: 1.5px dashed var(--puntada);
}

/* Sello de representacion (vacio en Arridal, por si acaso) */
.ap-seal {
	border: 1.5px dashed var(--puntada);
	border-radius: 999px;
	background: none;
	color: var(--salvia);
}

.ap-seal__mark {
	border-color: var(--oro);
}

/* Boton flotante de WhatsApp (como en /ig) */
.ap-wa-float {
	right: max(16px, env(safe-area-inset-right));
	bottom: max(18px, env(safe-area-inset-bottom));
	width: 60px;
	height: 60px;
	padding: 0;
	justify-content: center;
	border-radius: 50%;
	background: var(--wa);
	color: #fff;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

.ap-wa-float svg {
	width: 30px;
	height: 30px;
}

.ap-wa-float:hover {
	background: var(--wa-osc);
	color: #fff;
}

.ap-wa-float__text {
	display: none !important;
}

/* Formularios */
.ap-theme input[type="text"],
.ap-theme input[type="email"],
.ap-theme input[type="tel"],
.ap-theme input[type="url"],
.ap-theme input[type="password"],
.ap-theme input[type="search"],
.ap-theme input[type="number"],
.ap-theme textarea {
	border: 0;
	border-radius: 12px;
	background: var(--papel);
	color: var(--verde);
	padding: 12px 14px;
	font: inherit;
}

.comment-form label,
.ap-theme .form-row label {
	color: var(--salvia);
	font-weight: 800;
	letter-spacing: 0.06em;
}

.ap-theme .woocommerce-form-login,
.ap-theme .woocommerce-form-register,
.ap-theme .woocommerce-MyAccount-navigation,
.ap-theme .woocommerce-MyAccount-content,
.ap-theme .cart-collaterals,
.ap-theme .woocommerce-cart-form,
.ap-theme .woocommerce-checkout {
	color: var(--crema);
}

.ap-theme .woocommerce-MyAccount-navigation ul li a {
	color: var(--crema);
}

.ap-theme .button,
.ap-theme button.button,
.ap-theme input[type="submit"] {
	border: 0;
	border-radius: 999px;
	background: var(--verde-2);
	color: var(--crema);
	font-weight: 800;
	padding: 12px 20px;
	cursor: pointer;
}

.ap-theme .button:hover,
.ap-theme button.button:hover,
.ap-theme input[type="submit"]:hover {
	background: var(--verde-3);
	color: var(--crema);
}

/* =========================================================================
   12. Footer: linea de corte con tijeras y firma
   ====================================================================== */

.ap-footer {
	background: var(--verde-osc);
	padding-top: clamp(64px, 8vw, 104px);
}

.ap-footer__rule {
	top: 0;
	height: 60px;
	background: none;
	opacity: 1;
	overflow: hidden;
	pointer-events: none;
}

.ap-footer__rule::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	border-top: 2px dashed rgba(196, 206, 199, 0.45);
}

.ap-footer__rule::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 84px;
	height: 44px;
	transform: translateY(-46%);
	background: url("../img/tijeras.svg?v=3d1") left center / contain no-repeat;
	animation: ap-recorrer 9s linear infinite;
}

@keyframes ap-recorrer {
	from {
		left: -10px;
	}

	to {
		left: calc(100% - 74px);
	}
}

.ap-footer__pitch {
	color: var(--salvia);
}

.ap-footer__title {
	color: var(--oro);
	font-weight: 800;
	letter-spacing: 0.26em;
}

.ap-footer__list a {
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.95rem;
	color: var(--crema);
}

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

.ap-footer__address {
	color: var(--salvia);
}

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

.ap-footer__line--muted,
.ap-footer__text--muted {
	color: var(--salvia-osc);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

.ap-footer__bottom {
	border-top: 1.5px dashed var(--puntada);
}

.ap-footer__copy {
	font-family: var(--ap-font-display);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.2em;
	color: var(--salvia);
	text-transform: uppercase;
}

.ap-footer__legal a {
	color: var(--salvia-osc);
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}

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

.ap-footer__note {
	color: var(--salvia-osc);
}

.ap-widget__title {
	color: var(--oro);
	font-weight: 800;
}

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

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

/* Widgets por defecto de WordPress (Archivos, Categorias) en el footer */
.ap-footer .widget h2,
.ap-footer .widget h3,
.ap-footer .widget .wp-block-heading {
	font-family: var(--ap-font-body);
	font-weight: 800;
	font-size: 0.75rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--oro);
	margin: 0 0 12px;
}

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

/* =========================================================================
   13. Responsive
   ====================================================================== */

@media (min-width: 620px) {
	.ap-wa-float {
		padding: 0;
		border-radius: 50%;
	}
}

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

	.ap-theme.single-product div.product > .woocommerce-tabs,
	.ap-theme.single-product div.product > .related,
	.ap-theme.single-product div.product > .upsells,
	.ap-theme.single-product div.product > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.ap-theme.single-product div.product .woocommerce-product-gallery {
		position: sticky;
		top: 96px;
	}

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

	.ap-hero__copy {
		text-align: left;
		margin-inline: 0;
		padding: 46px 40px 38px;
	}

	.ap-hero__copy::after {
		left: 50%;
	}

	.ap-hero__eyebrow,
	.ap-hero__actions,
	.ap-hero__specs {
		justify-content: flex-start;
	}

	.ap-hero__title,
	.ap-hero__text {
		margin-inline: 0;
	}

	.ap-hero__mesa {
		margin-inline: 0;
	}

}

@media (prefers-reduced-motion: reduce) {
	.ap-footer__rule::after {
		animation: none;
		left: 24px;
	}
}

/* =========================================================================
   14. Cordillera de fondo en la portada
   Capa fija a pantalla completa detrás de todo (también tras la cabecera
   translúcida). arridal.js escribe --ap-montana (0 → 1) al bajar: la montaña
   se desvanece, se desenfoca y sube un poco; al volver arriba reaparece.
   ====================================================================== */

body.home::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: url("../img/montana-movil.webp?v=1") center top / cover no-repeat;
	opacity: calc(1 - var(--ap-montana, 0) * 1.25);
	transform: translate3d(0, calc(var(--ap-montana, 0) * -60px), 0) scale(calc(1 + var(--ap-montana, 0) * 0.08));
	transform-origin: 50% 25%;
	will-change: opacity, transform;
}

@media (min-width: 700px) {
	body.home::before {
		background-image: url("../img/montana.webp?v=1");
	}
}

@media (min-width: 1024px) {
	body.home::before {
		filter: blur(calc(var(--ap-montana, 0) * 10px));
	}

	/* aire arriba para que la cima se vea entre la cabecera y las tarjetas */
	body.home .ap-hero {
		padding-top: clamp(56px, 9vh, 120px);
	}
}

/* En la portada el patrón de costura se apaga sobre la montaña y vuelve al bajar */
body.home.ap-theme {
	background-color: var(--verde);
}

@media (prefers-reduced-motion: reduce) {
	body.home::before {
		transform: none;
		filter: none;
	}
}

/* =========================================================================
   15. Acabado sobrio (revisión): menos adorno, más aire y jerarquía.
   Va al final y manda sobre las secciones anteriores.
   ====================================================================== */

/* Botones limpios: sin puntada interior, radio contenido, sombra suave */
.ap-btn::after {
	display: none;
}

.ap-btn {
	border-radius: 12px;
	padding: 14px 24px;
	font-weight: 700;
	letter-spacing: 0.01em;
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6);
}

.ap-btn--primary {
	background: linear-gradient(180deg, #ead08a, var(--oro));
	color: var(--oro-ink);
}

.ap-btn--primary:hover {
	background: linear-gradient(180deg, #f1dc9c, #e0b85c);
}

.ap-btn--lg {
	padding: 16px 30px;
	font-size: 1rem;
}

/* Cabecera: línea fina, barra superior discreta */
.ap-header,
.ap-header.is-stuck {
	border-bottom: 1px solid rgba(246, 243, 234, 0.12);
	background: rgba(4, 40, 22, 0.78);
	backdrop-filter: blur(14px) saturate(120%);
}

.ap-topbar {
	background: rgba(3, 26, 14, 0.9);
	color: var(--oro-2);
	font-weight: 700;
	font-size: 0.68rem;
	letter-spacing: 0.16em;
}

.ap-topbar__dot {
	background: var(--oro);
	box-shadow: none;
	width: 6px;
	height: 6px;
}

.ap-topbar__aside {
	color: var(--salvia);
}

.ap-nav__list a::after {
	border-top: 2px solid var(--oro);
}

.ap-burger {
	border: 1px solid rgba(246, 243, 234, 0.28);
}

.ap-mobile-nav__list,
.ap-mobile-nav__list li {
	border-color: rgba(246, 243, 234, 0.14);
	border-style: solid;
}

/* ---- Portada: cordillera atmosférica con luz cálida ---- */
body.home::before {
	background:
		linear-gradient(180deg, rgba(4, 40, 22, 0.35) 0%, rgba(6, 61, 33, 0.05) 30%, rgba(6, 61, 33, 0.35) 62%, var(--verde) 92%),
		radial-gradient(60% 45% at 62% 30%, rgba(217, 174, 84, 0.16), transparent 70%),
		url("../img/montana-movil.webp?v=2") center top / cover no-repeat;
	opacity: calc(1 - var(--ap-montana, 0) * 1.25);
}

@media (min-width: 700px) {
	body.home::before {
		background-image:
			linear-gradient(180deg, rgba(4, 40, 22, 0.35) 0%, rgba(6, 61, 33, 0.05) 30%, rgba(6, 61, 33, 0.35) 62%, var(--verde) 92%),
			radial-gradient(60% 45% at 62% 30%, rgba(217, 174, 84, 0.16), transparent 70%),
			url("../img/montana.webp?v=2");
	}
}

/* ---- Hero: texto directo sobre el fondo, sin etiqueta de papel ---- */
.ap-hero {
	padding-block: clamp(40px, 9vh, 96px) clamp(64px, 10vh, 120px);
}

.ap-hero__mesa {
	display: none;
}

.ap-hero__copy {
	background: none;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	margin-top: 0;
	color: var(--crema);
	text-align: left;
	max-width: 600px;
	margin-inline: 0;
}

.ap-hero__copy::before,
.ap-hero__copy::after {
	display: none;
}

.ap-hero__eyebrow {
	justify-content: flex-start;
	color: var(--oro);
	font-size: 0.72rem;
	letter-spacing: 0.32em;
	margin-bottom: 18px;
}

.ap-hero__eyebrow .ap-eyebrow__mark {
	display: inline-block;
	width: 26px;
	border-top: 1px solid var(--oro);
	opacity: 0.8;
}

.ap-hero__title {
	font-size: clamp(2.1rem, 1.3rem + 3vw, 3.9rem);
	letter-spacing: 0.05em;
	line-height: 1.06;
	color: var(--crema);
	margin-inline: 0;
	margin-bottom: 0.5em;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

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

.ap-hero__text {
	color: var(--salvia);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
	line-height: 1.6;
	max-width: 46ch;
	margin-inline: 0;
	margin-bottom: 30px;
}

.ap-hero__actions {
	justify-content: flex-start;
	gap: 14px;
}

/* WhatsApp en el hero: contorno fino, el verde solo en el icono */
.ap-hero .ap-btn--wa,
.ap-hero .ap-btn--wa.ap-btn--ghost {
	background: rgba(246, 243, 234, 0.06);
	border: 1px solid rgba(246, 243, 234, 0.28);
	color: var(--crema);
	box-shadow: none;
}

.ap-hero .ap-btn--wa:hover {
	background: rgba(246, 243, 234, 0.12);
	border-color: rgba(246, 243, 234, 0.5);
	color: var(--crema);
}

.ap-hero .ap-btn--wa .ap-btn__icon,
.ap-hero .ap-btn--wa svg {
	color: var(--wa);
}

/* Cifras de confianza bajo los botones */
.ap-hero__specs {
	justify-content: flex-start;
	gap: 0;
	margin-top: 40px;
	border-top: 1px solid rgba(246, 243, 234, 0.14);
	padding-top: 22px;
	max-width: 560px;
}

.ap-hero__spec {
	flex: 1 1 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 0 18px 0 0;
	border-radius: 0;
	background: none;
	color: var(--crema);
}

.ap-hero__spec + .ap-hero__spec {
	padding-left: 18px;
	border-left: 1px solid rgba(246, 243, 234, 0.14);
}

.ap-hero__spec dt {
	order: 2;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--salvia-osc);
	text-transform: uppercase;
}

.ap-hero__spec dd {
	order: 1;
	font-family: var(--ap-font-display);
	font-weight: 700;
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.45rem);
	letter-spacing: 0.04em;
	color: var(--oro-2);
	text-transform: none;
	text-align: left;
}

/* Lámina del producto: marco de vidrio, sombra honda y halo cálido */
.ap-hero__stage {
	position: relative;
}

.ap-hero__stage::before {
	content: "";
	position: absolute;
	inset: -12% -8%;
	background: radial-gradient(50% 50% at 55% 50%, rgba(217, 174, 84, 0.22), transparent 70%);
	filter: blur(10px);
	pointer-events: none;
}

.ap-hero__product {
	width: min(100%, 460px);
	padding: 10px;
	border-radius: 28px;
	background: rgba(246, 243, 234, 0.08);
	border: 1px solid rgba(246, 243, 234, 0.18);
	backdrop-filter: blur(10px);
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.ap-hero__product::before {
	display: none;
}

.ap-hero__product-link {
	border-radius: 20px;
	background: #b9c6bd;
}

.ap-hero__product-img {
	aspect-ratio: 4 / 5;
}

.ap-hero__product-link::after {
	background: linear-gradient(180deg, transparent 55%, rgba(4, 40, 22, 0.55) 100%);
	box-shadow: none;
}

.ap-hero__tag {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 26px;
	margin: 0;
	z-index: 2;
	color: var(--crema);
	font-size: 0.92rem;
	font-weight: 700;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

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

/* ---- Cinta: franja discreta ---- */
.ap-marquee {
	background: rgba(3, 26, 14, 0.55);
	border-top: 1px solid rgba(217, 174, 84, 0.3);
	border-bottom: 1px solid rgba(217, 174, 84, 0.3);
	padding-block: 14px;
	box-shadow: none;
	backdrop-filter: blur(6px);
}

.ap-marquee__item {
	color: var(--salvia);
	font-size: 0.78rem;
	letter-spacing: 0.18em;
}

.ap-marquee__dot {
	width: 5px;
	height: 5px;
	box-shadow: none;
}

/* ---- Tarjetas: puntada apenas insinuada, sin ojales ---- */
.ap-cat__link::after,
.ap-theme ul.products li.product::after,
.ap-theme.single-product div.product .woocommerce-product-gallery::after {
	border: 1px dashed rgba(6, 61, 33, 0.14);
}

.ap-cta::before,
.ap-consult::before {
	border: 1px dashed rgba(6, 61, 33, 0.18);
}

.ap-cta::after,
.ap-consult::after,
.ap-empty::after {
	display: none;
}

.ap-cat__link,
.ap-theme ul.products li.product {
	box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.7);
}

.ap-cat__arrow {
	border: 1px solid rgba(6, 61, 33, 0.25);
}

.ap-theme ul.products li.product .ap-btn--wa {
	box-shadow: 0 10px 20px -12px rgba(37, 211, 102, 0.6);
}

/* ---- Pie: línea fina, sin tijeras ---- */
.ap-footer__rule {
	height: 1px;
	overflow: visible;
}

.ap-footer__rule::before {
	border-top: 1px solid rgba(246, 243, 234, 0.14);
}

.ap-footer__rule::after {
	display: none;
}

.ap-footer {
	padding-top: clamp(56px, 7vw, 88px);
}

.ap-footer__bottom {
	border-top: 1px solid rgba(246, 243, 234, 0.12);
}

.ap-link-arrow {
	border-bottom: 1px solid rgba(246, 243, 234, 0.3);
}

@media (min-width: 1024px) {
	body.home .ap-hero {
		min-height: calc(100svh - 108px);
		padding-top: clamp(48px, 7vh, 96px);
	}

	.ap-hero__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: clamp(48px, 6vw, 96px);
	}

	.ap-hero__stage {
		justify-content: flex-end;
	}
}

@media (max-width: 1023px) {
	.ap-hero__copy {
		text-align: center;
		margin-inline: auto;
	}

	.ap-hero__eyebrow,
	.ap-hero__actions {
		justify-content: center;
	}

	.ap-hero__title,
	.ap-hero__text {
		margin-inline: auto;
	}

	.ap-hero__specs {
		margin-inline: auto;
	}

	.ap-hero__spec {
		align-items: center;
	}

	.ap-hero__spec dd {
		text-align: center;
	}

	.ap-hero__product {
		margin-inline: auto;
	}
}

/* Móvil: la cima no debe competir con el titular; velo más oscuro arriba */
@media (max-width: 699px) {
	body.home::before {
		background-image:
			linear-gradient(180deg, rgba(3, 26, 14, 0.6) 0%, rgba(4, 40, 22, 0.45) 40%, rgba(6, 61, 33, 0.55) 65%, var(--verde) 90%),
			url("../img/montana-movil.webp?v=2");
		background-position: center top;
		background-size: cover;
	}

	.ap-hero__spec dd {
		font-size: 1.05rem;
	}

	.ap-hero__spec dt {
		font-size: 0.6rem;
		letter-spacing: 0.12em;
	}

	.ap-hero__spec + .ap-hero__spec {
		padding-left: 12px;
	}

	.ap-hero__spec {
		padding-right: 12px;
	}
}

/* =========================================================================
   16. Cordillera fotográfica en capas (portada)
   Reemplaza la montaña pintada de las secciones 14/15. Tres capas fijas
   (cielo + todo, montañas, bosque) de la foto "Majestuosa cordillera"
   separadas por profundidad: al mover el puntero y al bajar la página cada
   una se desplaza a distinta velocidad (parallax 2.5D) y el conjunto se
   desvanece hacia el verde de marca. Velo degradado para no saturar.
   ====================================================================== */

body.home::before {
	display: none;
}

.ap-cordillera {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	background: var(--verde-osc);
	opacity: calc(1 - var(--ap-montana, 0) * 1.2);
	perspective: 1200px;
}

.ap-cordillera__capa {
	--prof: 1;
	position: absolute;
	inset: -7%;
	background-position: center 36%;
	background-size: cover;
	background-repeat: no-repeat;
	will-change: transform;
	transform:
		translate3d(
			calc(var(--ap-px, 0) * var(--prof) * -1.1px),
			calc(var(--ap-py, 0) * var(--prof) * -0.7px - var(--ap-montana, 0) * var(--prof) * 5px),
			0
		)
		scale(calc(1 + var(--ap-montana, 0) * var(--prof) * 0.004));
	transform-origin: 50% 40%;
}

/* lejos → cerca */
.ap-cordillera__capa--fondo {
	--prof: 3;
	background-image: url("../img/cordillera-fondo-movil.webp?v=1");
	filter: saturate(0.92);
}

.ap-cordillera__capa--montana {
	--prof: 9;
	background-image: url("../img/cordillera-montana-movil.webp?v=1");
}

.ap-cordillera__capa--bosque {
	--prof: 20;
	background-image: url("../img/cordillera-bosque-movil.webp?v=1");
	filter: brightness(0.94) contrast(1.04);
}

/* Velo: oscurece arriba (cabecera y titular), funde abajo con el verde,
   halo cálido sobre la cumbre y viñeta en los bordes. Es lo que evita que
   la foto sature la página. */
.ap-cordillera::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(3, 26, 14, 0.62) 0%, rgba(4, 40, 22, 0.42) 30%, rgba(6, 61, 33, 0.5) 62%, var(--verde) 92%),
		radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(3, 26, 14, 0.5) 100%),
		radial-gradient(55% 40% at 50% 28%, rgba(217, 174, 84, 0.14), transparent 70%);
}

@media (min-width: 700px) {
	.ap-cordillera__capa {
		background-position: center 42%;
	}

	.ap-cordillera__capa--fondo {
		background-image: url("../img/cordillera-fondo.webp?v=1");
	}

	.ap-cordillera__capa--montana {
		background-image: url("../img/cordillera-montana.webp?v=1");
	}

	.ap-cordillera__capa--bosque {
		background-image: url("../img/cordillera-bosque.webp?v=1");
	}

	.ap-cordillera::after {
		background:
			linear-gradient(90deg, rgba(4, 40, 22, 0.5) 0%, rgba(4, 40, 22, 0.15) 45%, transparent 70%),
			linear-gradient(180deg, rgba(3, 26, 14, 0.45) 0%, rgba(4, 40, 22, 0.08) 28%, rgba(6, 61, 33, 0.38) 62%, var(--verde) 92%),
			radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(3, 26, 14, 0.5) 100%),
			radial-gradient(50% 40% at 60% 30%, rgba(217, 174, 84, 0.16), transparent 70%);
	}
}

@media (min-width: 1024px) {
	.ap-cordillera {
		filter: blur(calc(var(--ap-montana, 0) * 8px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.ap-cordillera__capa {
		transform: none;
		will-change: auto;
	}

	.ap-cordillera {
		filter: none;
	}
}

/* =========================================================================
   17. Scroll estable (2026-10-05)
   - Cabecera: sticky con top negativo = alto de la barra superior
     (--ap-topbar-h, la escribe main.js). La barra superior se va sola al
     bajar y la cabecera queda pegada SIN sacar nada del flujo. Antes, al
     pegarse ocultaba la barra (display:none) y bajaba el alto del menu: la
     pagina saltaba ~60px, el anclaje de scroll de Chrome lo compensaba, se
     despegaba y volvia a empezar -> cabecera parpadeando y scroll a tirones.
   - Fotos de categorias y productos: sin zoom ni elevacion al pasar el
     cursor (al bajar con la rueda las tarjetas crecian bajo el puntero).
   - Cordillera: sin desenfoque animado (muy caro en GPU) y oculta cuando ya
     se desvanecio (clase is-oculta, arridal.js).
   ====================================================================== */

.ap-header {
	top: calc(-1 * var(--ap-topbar-h, 52px));
}

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

.ap-topbar {
	transition: none;
}

.ap-header__inner,
.ap-header.is-stuck .ap-header__inner {
	min-height: 72px;
	transition: none;
}

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

/* Tarjetas quietas: solo cambia la sombra */
.ap-cat__img,
.ap-cat__link:hover .ap-cat__img,
.ap-cat__link:focus-visible .ap-cat__img,
.ap-theme ul.products li.product .ap-card__media img,
.ap-theme ul.products li.product:hover .ap-card__media img {
	transform: none;
	transition: opacity 300ms var(--ap-ease), filter 300ms var(--ap-ease);
}

.ap-cat__link:hover,
.ap-cat__link:focus-visible,
.ap-theme ul.products li.product:hover {
	transform: none;
}

.ap-cat__link:hover .ap-cat__arrow {
	transform: none;
}

/* Cordillera: sin blur animado; invisible cuando ya se fundio con el verde */
@media (min-width: 1024px) {
	.ap-cordillera {
		filter: none;
	}
}

.ap-cordillera {
	perspective: none;
}

.ap-cordillera.is-oculta {
	visibility: hidden;
}

/* Cordillera liviana: sin filtros por capa (cada filtro es una pasada extra
   de GPU a pantalla completa) y desvanecido POR CAPA en vez de en el grupo
   (la opacidad sobre el grupo obliga a componer las tres capas en una
   textura intermedia en cada frame). Medido: frames >50 ms al bajar despacio
   por el hero, 69 -> 37 (sin cordillera: 10). */
.ap-cordillera {
	opacity: 1;
}

.ap-cordillera__capa {
	filter: none;
	opacity: calc(1 - var(--ap-montana, 0) * 1.2);
}

/* =========================================================================
   18. Catalogo por categorias (portada): lista de lineas + cuadricula
   ====================================================================== */

.ap-catalogo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
	align-items: start;
}

/* --- Lista (movil: fila deslizable de fichas) --- */

.ap-catalogo__lista {
	min-width: 0;
}

.ap-catalogo__rotulo {
	margin: 0 0 10px;
	font-family: var(--ap-font-display);
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--oro-2);
}

/* Movil: todas las lineas a la vista, en fichas que van saltando de fila. */
.ap-catalogo__opciones {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0 0 6px;
	list-style: none;
}

.ap-catalogo__item {
	flex: 0 0 auto;
	max-width: 100%;
}

.ap-catalogo__opcion {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 8px 14px 8px 12px;
	border: 1px solid var(--ap-line-strong);
	border-radius: 999px;
	background: rgba(246, 243, 234, 0.06);
	color: var(--crema);
	font-family: var(--ap-font-body);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.1;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms ease;
	-webkit-tap-highlight-color: transparent;
}

.ap-catalogo__opcion:hover,
.ap-catalogo__opcion:focus-visible {
	border-color: var(--oro);
	background: rgba(217, 174, 84, 0.14);
	color: var(--crema);
	text-decoration: none;
}

.ap-catalogo__opcion:focus-visible {
	outline: 2px solid var(--oro-2);
	outline-offset: 2px;
}

.ap-catalogo__opcion.is-activa {
	border-color: var(--oro);
	background: var(--oro);
	color: var(--oro-ink);
}

.ap-catalogo__num {
	display: none;
}

.ap-catalogo__cant {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba(246, 243, 234, 0.14);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.ap-catalogo__opcion.is-activa .ap-catalogo__cant {
	background: rgba(59, 47, 11, 0.16);
	color: var(--oro-ink);
}

/* --- Panel de productos --- */

.ap-catalogo__panel {
	min-width: 0;
	transition: opacity 200ms ease;
}

.ap-catalogo__panel.is-cargando .ap-catalogo__grid {
	opacity: 0.45;
	pointer-events: none;
}

.ap-catalogo__grid {
	transition: opacity 220ms ease;
}

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

.ap-catalogo__titulo {
	margin: 0;
	font-family: var(--ap-font-display);
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.7rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--crema);
}

.ap-catalogo__resumen {
	margin: 0;
	font-size: 0.82rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--salvia);
}

/* En la portada la cuadricula va con margen corto: el pie ya separa. */
.ap-theme .ap-catalogo ul.products {
	margin-bottom: 0;
}

.ap-catalogo__vacio {
	margin: 0;
	padding: 28px 20px;
	border: 1.5px dashed var(--puntada);
	border-radius: var(--ap-radius-lg);
	color: var(--salvia);
	text-align: center;
}

.ap-catalogo__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	margin-top: clamp(20px, 3vw, 32px);
}

.ap-catalogo__pie .ap-link-arrow {
	margin-left: auto;
}

/* .ap-btn fija display:inline-flex y pisaria el atributo hidden. */
.ap-catalogo__mas[hidden] {
	display: none;
}

/* Dos columnas ya desde moviles medianos: la tarjeta aguanta y la pagina
   no se hace eterna. Por debajo de 360 se queda a una. */
@media (min-width: 360px) {
	.ap-theme .ap-catalogo ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

@media (min-width: 768px) {
	.ap-theme .ap-catalogo ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}
}

/* --- Escritorio: lista vertical fija a la izquierda --- */
@media (min-width: 1024px) {
	.ap-catalogo {
		grid-template-columns: 272px minmax(0, 1fr);
		gap: 36px;
	}

	.ap-catalogo__lista {
		position: sticky;
		top: calc(var(--ap-header-h, 72px) + 24px);
		padding: 18px 16px 16px;
		border-radius: var(--ap-radius-lg);
		background: var(--papel);
		box-shadow: var(--ap-shadow-card);
	}

	.ap-catalogo__lista::after {
		content: "";
		position: absolute;
		inset: 7px;
		border: 1.5px dashed rgba(6, 61, 33, 0.2);
		border-radius: 17px;
		pointer-events: none;
	}

	.ap-catalogo__rotulo {
		margin: 0 8px 10px;
		color: var(--tinta-3);
	}

	.ap-catalogo__opciones {
		display: block;
		padding: 0;
	}

	.ap-catalogo__item + .ap-catalogo__item {
		border-top: 1px dashed rgba(6, 61, 33, 0.18);
	}

	.ap-catalogo__opcion {
		display: grid;
		grid-template-columns: 28px minmax(0, 1fr) auto;
		align-items: center;
		gap: 10px;
		width: 100%;
		min-height: 48px;
		padding: 10px 10px 10px 8px;
		border: 0;
		border-radius: 10px;
		background: transparent;
		color: var(--tinta);
		font-size: 0.98rem;
		white-space: normal;
	}

	.ap-catalogo__opcion:hover,
	.ap-catalogo__opcion:focus-visible {
		background: rgba(6, 61, 33, 0.07);
		color: var(--verde);
	}

	.ap-catalogo__opcion.is-activa {
		background: var(--verde);
		color: var(--crema);
	}

	.ap-catalogo__num {
		display: block;
		font-family: var(--ap-font-display);
		font-size: 0.74rem;
		letter-spacing: 0.08em;
		color: var(--tinta-3);
	}

	.ap-catalogo__opcion.is-activa .ap-catalogo__num {
		color: var(--oro-2);
	}

	.ap-catalogo__cant {
		background: rgba(6, 61, 33, 0.1);
		color: var(--tinta-2);
	}

	.ap-catalogo__opcion.is-activa .ap-catalogo__cant {
		background: rgba(217, 174, 84, 0.22);
		color: var(--oro-2);
	}

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

@media (min-width: 1400px) {
	.ap-catalogo {
		grid-template-columns: 300px minmax(0, 1fr);
		gap: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ap-catalogo__opcion,
	.ap-catalogo__panel,
	.ap-catalogo__grid {
		transition: none;
	}
}

/* =========================================================================
   19. Ajustes responsive (2026-10-05): cifras del hero en movil, pista de
   desplazamiento en la fila de lineas y tarjetas estrechas legibles.
   ========================================================================= */

/* Cifras del hero: en movil cada dato ocupa lo que necesita, sin partirse,
   y la fila deja libre la esquina del boton flotante de WhatsApp. */
@media (max-width: 699px) {
	.ap-hero__specs {
		flex-wrap: nowrap;
		justify-content: flex-start;
		max-width: none;
		margin-inline: 0;
		padding-right: 72px;
	}

	.ap-hero__spec {
		flex: 0 1 auto;
		min-width: 0;
		align-items: flex-start;
		padding-right: 14px;
	}

	.ap-hero__spec + .ap-hero__spec {
		padding-left: 14px;
	}

	.ap-hero__spec dd {
		white-space: nowrap;
		text-align: left;
		font-size: 1rem;
	}

	.ap-hero__spec dt {
		white-space: nowrap;
	}
}

/* Pantallas angostas: "Mayor y detal" y las otras dos cifras caben en una
   fila sin pisar el boton flotante. */
@media (max-width: 429px) {
	.ap-hero__spec dd {
		font-size: 0.88rem;
		letter-spacing: 0.02em;
	}

	.ap-hero__spec dt {
		font-size: 0.56rem;
	}

	.ap-hero__spec {
		padding-right: 10px;
	}

	.ap-hero__spec + .ap-hero__spec {
		padding-left: 10px;
	}
}

/* Tarjetas de producto a dos columnas en pantallas estrechas: las filas
   Tallas/Color se apilan y el aviso de disponibilidad no se parte raro. */
.ap-theme ul.products li.product .price .ap-price--ask {
	display: block;
	line-height: 1.35;
}

@media (max-width: 479px) {
	.ap-theme ul.products li.product .ap-specs--card .ap-spec {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		padding: 6px 0;
	}

	.ap-theme ul.products li.product .ap-specs--card .ap-spec__v {
		text-align: start;
	}

	.ap-theme ul.products li.product .price .ap-price--ask {
		font-size: 0.72rem;
		letter-spacing: 0.02em;
	}

	.ap-theme ul.products li.product .woocommerce-loop-product__title {
		font-size: 0.95rem;
		line-height: 1.25;
	}
}

/* =========================================================================
   20. Sección de catálogo: cordillera completa de fondo + catálogos en PDF
   - La foto va en un ::before FIJO a la pantalla y la sección la recorta
     con clip-path: se ve la cordillera entera mientras se recorre la
     sección (también en iOS, donde background-attachment: fixed falla).
   - Velo verde para que las láminas de papel y el texto sigan legibles;
     los bordes superior e inferior funden con el verde de las secciones
     vecinas.
   ====================================================================== */
.ap-section--catalogo {
	position: relative;
	isolation: isolate;
	clip-path: inset(0);
	background: transparent;
}

.ap-section--catalogo::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(180deg, rgba(4, 40, 22, 0.66) 0%, rgba(4, 40, 22, 0.38) 38%, rgba(4, 40, 22, 0.46) 70%, rgba(4, 40, 22, 0.62) 100%),
		url("../img/cordillera-fondo-movil.webp?v=1") center 38% / cover no-repeat;
	background-color: var(--verde-osc);
	pointer-events: none;
}

.ap-section--catalogo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, var(--verde) 0, rgba(6, 61, 33, 0.82) 110px, rgba(6, 61, 33, 0) 420px),
		linear-gradient(0deg, var(--verde) 0, rgba(6, 61, 33, 0) 180px);
	pointer-events: none;
}

@media (min-width: 700px) {
	.ap-section--catalogo::before {
		background-image:
			linear-gradient(180deg, rgba(4, 40, 22, 0.6) 0%, rgba(4, 40, 22, 0.32) 35%, rgba(4, 40, 22, 0.42) 70%, rgba(4, 40, 22, 0.6) 100%),
			url("../img/cordillera-fondo.webp?v=1");
		background-position: center 45%;
	}
}

/* Títulos de la sección sobre la nieve: sombra suave para que se lean */
.ap-section--catalogo .ap-section__title,
.ap-section--catalogo .ap-section__subtitle,
.ap-section--catalogo .ap-eyebrow,
.ap-section--catalogo .ap-pdfs__rotulo,
.ap-section--catalogo .ap-catalogo__rotulo,
.ap-section--catalogo .ap-catalogo__titulo,
.ap-section--catalogo .ap-catalogo__resumen {
	text-shadow: 0 1px 2px rgba(3, 26, 14, 0.7), 0 0 18px rgba(3, 26, 14, 0.55);
}

.ap-section--catalogo .ap-section__subtitle {
	color: var(--crema);
}

/* Fichas de líneas en móvil/tablet: translúcidas sobre la foto. En
   escritorio la lista de papel conserva su estilo. */
@media (max-width: 1023px) {
	.ap-section--catalogo .ap-catalogo__opcion {
		background: rgba(4, 40, 22, 0.55);
		backdrop-filter: blur(2px);
	}

	.ap-section--catalogo .ap-catalogo__opcion.is-activa {
		background: var(--oro);
		color: var(--verde-osc);
	}
}

/* --- Catálogos en PDF --- */
.ap-pdfs {
	margin: 0 0 34px;
}

.ap-pdfs__rotulo {
	margin: 0 0 12px;
	font-family: var(--ap-font-display);
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--oro-2);
}

.ap-pdfs__lista {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ap-pdfs__item {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 14px;
	padding: 12px;
	border-radius: 16px;
	background: var(--papel);
	color: var(--tinta);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.ap-pdfs__portada {
	display: block;
	aspect-ratio: 520 / 735;
	border-radius: 8px;
	overflow: hidden;
	background: var(--salvia);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

.ap-pdfs__portada img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ap-pdfs__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.ap-pdfs__tipo {
	margin: 0;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tinta-3);
}

.ap-pdfs__titulo {
	margin: 0;
	font-family: var(--ap-font-display);
	font-size: 1.05rem;
	line-height: 1.2;
	color: var(--verde);
}

.ap-pdfs__nota {
	margin: 0;
	font-size: 0.82rem;
	color: var(--tinta-2);
}

.ap-pdfs__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	padding-top: 10px;
}

.ap-pdfs__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 38px;
	padding: 8px 14px;
	border: 1px solid var(--verde);
	border-radius: 999px;
	background: var(--verde);
	color: var(--crema);
	font-size: 0.86rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.ap-pdfs__btn:hover,
.ap-pdfs__btn:focus-visible {
	background: var(--verde-osc);
	color: var(--oro-2);
	text-decoration: none;
}

.ap-pdfs__btn--sec {
	background: transparent;
	color: var(--verde);
}

.ap-pdfs__btn--sec:hover,
.ap-pdfs__btn--sec:focus-visible {
	background: rgba(6, 61, 33, 0.08);
	color: var(--verde);
}

@media (min-width: 600px) {
	.ap-pdfs__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.ap-pdfs__item {
		grid-template-columns: 108px minmax(0, 1fr);
		padding: 14px;
	}

	.ap-pdfs__titulo {
		font-size: 1.15rem;
	}
}

@media (min-width: 1024px) {
	.ap-pdfs {
		margin-bottom: 40px;
	}
}


/* 21. Instagram en el pie ------------------------------------------------- */
.ap-footer__social { margin: 14px 0 0; }
.ap-footer__ig {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
  color: inherit; text-decoration: none; font-size: .95rem; line-height: 1;
  transition: border-color .2s ease, color .2s ease;
}
.ap-footer__ig svg { flex-shrink: 0; }
.ap-footer__ig:hover, .ap-footer__ig:focus-visible { color: var(--ap-oro, #D9AE54); border-color: var(--ap-oro, #D9AE54); }