/* ============================================================
 * ALMAJOYA · ESTILOS
 * Editorial claro y premium. Móvil primero.
 * Tipografía: Cormorant Garamond (serif) + Jost (sans).
 * ============================================================ */

:root {
	--aj-marron: #59473A;
	--aj-marron-h: #42342a;
	--aj-hueso: #f4f1ec;
	--aj-hueso-2: #eae5dd;
	--aj-blanco: #ffffff;
	--aj-tinta: #26221e;
	--aj-gris: #8b857d;
	--aj-linea: rgba(38, 34, 30, .13);
	--aj-radio: 25px;
	--aj-radio-sm: 14px;
	--aj-serif: 'Cormorant Garamond', Georgia, serif;
	--aj-sans: 'Jost', 'Segoe UI', sans-serif;
}

/* ============================================================
 * HOME (clases aplicadas a secciones y widgets de Elementor)
 * ============================================================ */

.aj-seccion { background: var(--aj-hueso); }
.aj-seccion--blanca { background: var(--aj-blanco); }

/* Revelado suave al hacer scroll (lo activa almajoya-home.js) */
.aj-reveal { opacity: 0; transform: translateY(34px); transition: opacity 1.1s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.aj-reveal.is-visible { opacity: 1; transform: none; }
.no-js .aj-reveal, .elementor-editor-active .aj-reveal { opacity: 1; transform: none; }

/* Tipos */
.aj-eyebrow .elementor-heading-title,
.aj-eyebrow {
	font-family: var(--aj-sans) !important;
	font-size: .72rem !important;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--aj-gris) !important;
	font-weight: 400 !important;
}

.aj-h1 .elementor-heading-title {
	font-family: var(--aj-serif) !important;
	font-size: clamp(2.9rem, 8vw, 6rem) !important;
	font-weight: 400 !important;
	line-height: .98 !important;
	letter-spacing: -.02em;
	color: var(--aj-tinta) !important;
}
.aj-h1 .elementor-heading-title em { font-style: italic; color: var(--aj-marron); }

.aj-h2 .elementor-heading-title {
	font-family: var(--aj-serif) !important;
	font-size: clamp(2rem, 4.5vw, 3.6rem) !important;
	font-weight: 500 !important;
	line-height: 1.05 !important;
	letter-spacing: -.01em;
	color: var(--aj-tinta) !important;
}
.aj-h2 .elementor-heading-title em { font-style: italic; color: var(--aj-marron); }

.aj-lead, .aj-lead p {
	font-family: var(--aj-sans);
	font-weight: 300;
	font-size: 1.1rem;
	color: var(--aj-gris);
	line-height: 1.7;
}

.aj-big .elementor-heading-title {
	font-family: var(--aj-serif) !important;
	font-size: clamp(1.7rem, 4.5vw, 3.2rem) !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
	color: var(--aj-tinta) !important;
}
.aj-big .elementor-heading-title em { font-style: italic; color: var(--aj-marron); }

/* Botones */
.aj-btn-solid .elementor-button {
	background-color: var(--aj-marron) !important;
	color: #fff !important;
	border-radius: var(--aj-radio) !important;
	font-family: var(--aj-sans) !important;
	font-weight: 400 !important;
	letter-spacing: .04em;
	padding: 17px 40px !important;
	transition: background .35s ease, transform .35s ease !important;
}
.aj-btn-solid .elementor-button:hover { background-color: var(--aj-marron-h) !important; transform: translateY(-2px); }

.aj-btn-ghost .elementor-button {
	background: transparent !important;
	color: var(--aj-tinta) !important;
	border: 1px solid var(--aj-linea) !important;
	border-radius: var(--aj-radio) !important;
	font-family: var(--aj-sans) !important;
	font-weight: 400 !important;
	padding: 16px 36px !important;
	transition: border-color .35s ease, color .35s ease, transform .35s ease !important;
}
.aj-btn-ghost .elementor-button:hover { border-color: var(--aj-marron) !important; color: var(--aj-marron) !important; transform: translateY(-2px); }

/* Pasos del proceso */
.aj-paso { border-top: 1px solid var(--aj-linea); padding-top: 26px; }
.aj-paso-num .elementor-heading-title {
	font-family: var(--aj-serif) !important;
	font-size: 2.3rem !important;
	color: var(--aj-marron) !important;
	font-weight: 400 !important;
}
.aj-paso-titulo .elementor-heading-title {
	font-family: var(--aj-serif) !important;
	font-size: 1.5rem !important;
	font-weight: 500 !important;
	color: var(--aj-tinta) !important;
}

/* Testimonios */
.aj-cita .elementor-heading-title {
	font-family: var(--aj-serif) !important;
	font-style: italic;
	font-weight: 400 !important;
	font-size: clamp(1.4rem, 2.5vw, 1.9rem) !important;
	line-height: 1.45 !important;
	color: var(--aj-tinta) !important;
}
.aj-cita-autor .elementor-heading-title {
	font-family: var(--aj-sans) !important;
	font-size: .78rem !important;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--aj-gris) !important;
	font-weight: 400 !important;
}

/* Colección (placeholder y SureCart) */
.aj-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 40px; max-width: 1240px; margin: 0 auto; }
.aj-product { text-align: center; }
.aj-product__img { aspect-ratio: 3/4; border-radius: 4px; margin-bottom: 20px; transition: transform .5s ease; }
.aj-product:hover .aj-product__img { transform: scale(.97); }
.aj-product__img--1 { background: linear-gradient(155deg, #e7e2d9, #cbc2b3); }
.aj-product__img--2 { background: linear-gradient(155deg, #ecdfc8, #d4b98a); }
.aj-product__img--3 { background: linear-gradient(155deg, #ecdcd2, #d8ac95); }
.aj-product h3 { font-family: var(--aj-serif); font-size: 1.35rem; font-weight: 500; margin: 0 0 6px; color: var(--aj-tinta); }
.aj-price { font-family: var(--aj-sans); color: var(--aj-gris); font-size: .95rem; letter-spacing: .05em; }

/* SureCart hereda el aire editorial */
.aj-surecart { max-width: 1240px; margin: 0 auto; }
.aj-surecart sc-product-item-title, .aj-surecart .sc-product-item-title { font-family: var(--aj-serif) !important; }

/* ============================================================
 * CONFIGURADOR 3D — MÓVIL PRIMERO
 * ============================================================ */

.ajc {
	font-family: var(--aj-sans);
	font-weight: 300;
	color: var(--aj-tinta);
	background: var(--aj-hueso);
	line-height: 1.6;
	max-width: none !important;
}
.ajc *, .ajc *::before, .ajc *::after { box-sizing: border-box; }

/* --- Visor (protagonista) --- */
.ajc-viewer {
	position: sticky;
	top: 0;
	z-index: 5;
	height: 54vh;
	min-height: 340px;
	background: radial-gradient(120% 100% at 50% 0%, #f7f4ef 0%, #e9e3d8 70%, #ddd5c6 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-shadow: 0 18px 40px -22px rgba(38, 34, 30, .35);
}
.ajc-viewer__stage { position: absolute; inset: 0; }
.ajc-viewer__stage canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.ajc-viewer__stage canvas:active { cursor: grabbing; }

.ajc-viewer__hint {
	position: absolute;
	bottom: 12px;
	left: 0; right: 0;
	margin: 0;
	text-align: center;
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--aj-gris);
	pointer-events: none;
}
.ajc-viewer__name {
	position: absolute;
	top: 18px;
	left: 0; right: 0;
	text-align: center;
	font-family: var(--aj-serif);
	font-style: italic;
	font-size: 1.35rem;
	color: var(--aj-marron);
	pointer-events: none;
}
.ajc-viewer__loading {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; gap: 14px;
	align-items: center; justify-content: center;
	color: var(--aj-gris); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase;
}
.ajc-viewer__loading span {
	width: 34px; height: 34px;
	border: 2px solid var(--aj-linea);
	border-top-color: var(--aj-marron);
	border-radius: 50%;
	animation: ajc-girar 1s linear infinite;
}
@keyframes ajc-girar { to { transform: rotate(360deg); } }

/* --- Panel de elecciones --- */
.ajc-panel { padding: 28px 20px 60px; max-width: 680px; margin: 0 auto; }

.ajc-bloque { padding: 26px 0; border-bottom: 1px solid var(--aj-linea); }
.ajc-bloque__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.ajc-num { font-family: var(--aj-serif); font-size: 1.4rem; color: var(--aj-marron); }
.ajc-bloque__head h2 {
	font-family: var(--aj-serif);
	font-size: 1.55rem;
	font-weight: 500;
	margin: 0;
	color: var(--aj-tinta);
}

/* Pestañas de especie */
.ajc-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.ajc-tab {
	font-family: var(--aj-sans);
	font-size: .8rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	background: none;
	border: none;
	border-bottom: 1px solid transparent;
	color: var(--aj-gris);
	padding: 8px 4px;
	cursor: pointer;
	transition: color .3s ease, border-color .3s ease;
}
.ajc-tab.is-active { color: var(--aj-marron); border-bottom-color: var(--aj-marron); }

/* Fichas de modelos: carrusel deslizable con el dedo */
.ajc-chips {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 4px 2px 12px;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--aj-linea) transparent;
}
.ajc-chip {
	flex: 0 0 auto;
	scroll-snap-align: start;
	font-family: var(--aj-sans);
	font-size: .92rem;
	font-weight: 400;
	color: var(--aj-tinta);
	background: var(--aj-blanco);
	border: 1px solid var(--aj-linea);
	border-radius: var(--aj-radio);
	padding: 11px 20px;
	cursor: pointer;
	transition: all .3s ease;
	white-space: nowrap;
}
.ajc-chip:hover { border-color: var(--aj-marron); }
.ajc-chip.is-active { background: var(--aj-marron); color: #fff; border-color: var(--aj-marron); }

/* Acabados */
.ajc-mats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ajc-mat {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--aj-sans);
	background: var(--aj-blanco);
	border: 1px solid var(--aj-linea);
	border-radius: var(--aj-radio-sm);
	padding: 12px 14px;
	cursor: pointer;
	transition: all .3s ease;
	text-align: left;
}
.ajc-mat:hover { border-color: var(--aj-marron); }
.ajc-mat.is-active { border-color: var(--aj-marron); box-shadow: 0 0 0 1px var(--aj-marron); }
.ajc-mat__dot { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; border: 1px solid rgba(38,34,30,.15); }
.ajc-mat__label { font-size: .88rem; font-weight: 400; color: var(--aj-tinta); flex: 1; }
.ajc-mat__precio { font-size: .82rem; color: var(--aj-gris); }
.ajc-mats__nota { margin: 12px 0 0; font-size: .78rem; color: var(--aj-gris); }

/* Cadena */
.ajc-sizes { display: flex; gap: 10px; flex-wrap: wrap; }
.ajc-size {
	font-family: var(--aj-sans);
	font-size: .92rem;
	color: var(--aj-tinta);
	background: var(--aj-blanco);
	border: 1px solid var(--aj-linea);
	border-radius: var(--aj-radio);
	padding: 11px 22px;
	cursor: pointer;
	transition: all .3s ease;
}
.ajc-size small { color: var(--aj-gris); font-size: .78rem; margin-left: 4px; }
.ajc-size:hover { border-color: var(--aj-marron); }
.ajc-size.is-active { background: var(--aj-marron); color: #fff; border-color: var(--aj-marron); }
.ajc-size.is-active small { color: rgba(255, 255, 255, .75); }

/* Resumen */
.ajc-resumen {
	margin-top: 28px;
	padding: 26px;
	background: var(--aj-blanco);
	border: 1px solid var(--aj-linea);
	border-radius: var(--aj-radio-sm);
}
.ajc-resumen__fila { display: flex; justify-content: space-between; padding: 8px 0; color: var(--aj-gris); font-size: .95rem; }
.ajc-resumen__fila strong { color: var(--aj-tinta); font-weight: 500; }
.ajc-resumen__total { border-top: 1px solid var(--aj-linea); margin-top: 8px; padding-top: 16px; }
.ajc-resumen__total strong { font-family: var(--aj-serif); font-size: 1.6rem; color: var(--aj-marron); }
.ajc-btn {
	display: block;
	text-align: center;
	margin-top: 20px;
	background: var(--aj-marron);
	color: #fff !important;
	text-decoration: none !important;
	padding: 17px;
	border-radius: var(--aj-radio);
	font-size: .98rem;
	letter-spacing: .04em;
	transition: background .3s ease, transform .3s ease;
}
.ajc-btn:hover { background: var(--aj-marron-h); transform: translateY(-2px); }
.ajc-nota { margin: 14px 0 0; font-size: .78rem; color: var(--aj-gris); text-align: center; line-height: 1.6; }

/* --- Escritorio: visor a la derecha, panel a la izquierda --- */
@media (min-width: 981px) {
	.ajc { display: grid; grid-template-columns: minmax(420px, 1fr) 1.25fr; align-items: start; }
	.ajc-panel { order: 1; padding: 48px clamp(28px, 4vw, 72px) 90px; max-width: none; }
	.ajc-viewer {
		order: 2;
		height: 100vh;
		position: sticky;
		top: 0;
		box-shadow: none;
	}
	.ajc-mats { grid-template-columns: repeat(3, 1fr); }
	.ajc-viewer__name { font-size: 1.8rem; top: 34px; }
	.ajc-viewer__hint { bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.aj-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}