/*
Theme Name: Caminito
Description: Tema editorial para catálogo de artículos, pensado primero para el celular. Acompaña al plugin Caminito Catálogo.
Author: Kanari Hirosi
Version: 1.9.0
Requires at least: 6.1
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: caminito
*/

/* ---------------------------------------------------------------
   Criterio de diseño — registro editorial

   Caminito es una editorial, y el sitio se ve como tal: tipografía con
   serifas para los títulos, papel cálido en vez de blanco frío, etiquetas
   en versalitas espaciadas, filetes finos y mucho aire.

   Las serifas son de sistema (Georgia y equivalentes). No cargamos fuentes
   externas: en el celular cada fuente es una descarga más y una demora antes
   de que se lea el primer título. Bien compuesta, Georgia se ve mejor que una
   tipografía de moda mal cargada.

   El color sigue viniendo de las fotos. La interfaz aporta el papel, la tinta
   y un solo acento —el de la marca, que el cliente elige desde el panel—.
   Sin modo oscuro a propósito: las fotos son de estudio sobre fondo blanco.
   --------------------------------------------------------------- */

:root {
	--cm-paper: #f7f5f1;
	--cm-paper-deep: #f1eee7;
	--cm-surface: #ffffff;
	--cm-ink: #1a1917;
	--cm-ink-soft: #58544c;
	--cm-muted: #8f8a80;
	--cm-line: #e6e1d7;
	--cm-line-strong: #d6d0c3;

	/* Lo cambia el cliente desde Artículos → 🎨 Marca. */
	--cm-accent: #2f6b4f;
	--cm-accent-soft: rgba(47,107,79,.10);
	--cm-whatsapp: #22c55e;

	--cm-serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
	--cm-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--cm-radius: 4px;
	--cm-max: 1280px;
	--cm-shadow: 0 20px 50px rgba(26,25,23,.10);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--cm-paper);
	color: var(--cm-ink);
	font-family: var(--cm-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; text-underline-offset: 3px; }

h1, h2, h3 {
	margin: 0 0 .4em;
	font-family: var(--cm-serif);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -.015em;
}

.cm-wrap {
	width: 100%;
	max-width: var(--cm-max);
	margin: 0 auto;
	padding-left: 22px;
	padding-right: 22px;
}

@media (min-width: 768px) { .cm-wrap { padding-left: 44px; padding-right: 44px; } }

.cm-skip { position: absolute; left: -9999px; }
.cm-skip:focus {
	left: 12px; top: 12px; z-index: 100;
	background: var(--cm-surface); padding: 12px 18px; box-shadow: var(--cm-shadow);
}

/* Etiqueta en versalitas: el recurso que más "editorial" aporta por su peso. */
.cm-eyebrow {
	font-family: var(--cm-sans);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cm-muted);
}

/* ---------------------------------------------------------------
   Encabezado
   --------------------------------------------------------------- */

.cm-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(247,245,241,.86);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--cm-line);
}

body.admin-bar .cm-header { top: 32px; }

.cm-header__inner {
	display: flex;
	transition: min-height .38s cubic-bezier(.2,.8,.2,1), padding .38s cubic-bezier(.2,.8,.2,1);
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: 72px;
	padding-top: 14px;
	padding-bottom: 14px;
}

.cm-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--cm-ink);
	font-family: var(--cm-serif);
	font-size: 1.35rem;
	font-weight: 400;
	letter-spacing: -.02em;
	line-height: 1.05;
}

.cm-brand img { max-height: 42px; width: auto; }
/* El cliente pidió ver la marca más grande. El logo es circular y con fondo
   transparente, así que puede crecer sin ensuciar el encabezado.
   En reposo se muestra grande; al bajar, el encabezado se compacta solo, para
   no comerse la pantalla mientras se recorre el catálogo. */
.cm-brand--logo img {
	max-height: 88px;
	transition: max-height .38s cubic-bezier(.2,.8,.2,1);
}

.cm-header.is-scrolled .cm-brand--logo img { max-height: 44px; }

@media (min-width: 768px) {
	.cm-brand--logo img { max-height: 118px; }
	.cm-header.is-scrolled .cm-brand--logo img { max-height: 52px; }
}

.cm-brand__tag {
	display: block;
	margin-top: 5px;
	font-family: var(--cm-sans);
	font-size: .625rem;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--cm-muted);
}

/* ---------------------------------------------------------------
   Redes
   --------------------------------------------------------------- */

.cm-social { display: flex; align-items: center; gap: 10px; }

.cm-social__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid var(--cm-line-strong);
	color: var(--cm-ink);
	text-decoration: none;
	font-size: .8125rem;
	font-weight: 560;
	transition: background .3s ease, border-color .3s ease, color .3s ease;
}

.cm-social__btn:hover { background: var(--cm-ink); border-color: var(--cm-ink); color: var(--cm-paper); }

.cm-social__label { display: none; }

.cm-social--footer .cm-social__btn {
	width: auto;
	height: 44px;
	padding: 0 22px;
	border-radius: 999px;
}
.cm-social--footer .cm-social__label { display: inline; letter-spacing: .04em; }

.cm-social--fixed {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(16px + env(safe-area-inset-bottom));
	z-index: 50;
	display: flex;
	gap: 8px;
	padding: 8px;
	border-radius: 999px;
	background: rgba(255,255,255,.9);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border: 1px solid var(--cm-line);
	box-shadow: var(--cm-shadow);
}

.cm-social--fixed .cm-social__btn { width: 46px; height: 46px; border: 0; }

.cm-social--fixed .cm-social__btn--whatsapp { background: var(--cm-whatsapp); color: #06310f; }
.cm-social--fixed .cm-social__btn--whatsapp:hover { background: #16a34a; color: #fff; }

@media (min-width: 768px) { .cm-social--fixed { display: none; } }

/* ---------------------------------------------------------------
   Portada — titular grande, con aire
   --------------------------------------------------------------- */

.cm-hero {
	padding-top: clamp(44px, 9vw, 120px);
	padding-bottom: clamp(20px, 4vw, 44px);
	border-bottom: 1px solid var(--cm-line);
	margin-bottom: clamp(28px, 5vw, 56px);
}

.cm-hero h1 {
	font-size: clamp(2.5rem, 8.5vw, 5.5rem);
	line-height: .98;
	letter-spacing: -.035em;
	margin-bottom: .28em;
	text-wrap: balance;
}

.cm-hero p {
	margin: 0;
	max-width: 44ch;
	color: var(--cm-ink-soft);
	font-size: clamp(1rem, 2vw, 1.1875rem);
	line-height: 1.6;
	text-wrap: pretty;
}

.cm-section-title {
	display: flex;
	align-items: center;
	gap: 16px;
	font-family: var(--cm-sans);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cm-ink);
	margin: clamp(44px, 6vw, 80px) 0 clamp(18px, 2.5vw, 28px);
}

.cm-section-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--cm-line);
}

/* ---------------------------------------------------------------
   Filtro de líneas
   --------------------------------------------------------------- */

.cm-filter {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 4px 22px 20px;
	margin: 0 -22px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
}

@media (min-width: 768px) { .cm-filter { padding-left: 44px; padding-right: 44px; margin: 0 -44px; } }

.cm-filter::-webkit-scrollbar { display: none; }

.cm-chip {
	flex: 0 0 auto;
	scroll-snap-align: start;
	padding: 10px 18px;
	border-radius: 999px;
	background: transparent;
	border: 1px solid var(--cm-line-strong);
	color: var(--cm-ink-soft);
	text-decoration: none;
	font-size: .8125rem;
	font-weight: 560;
	letter-spacing: .02em;
	white-space: nowrap;
	transition: color .3s ease, border-color .3s ease, background .3s ease;
}

.cm-chip:hover { color: var(--cm-ink); border-color: var(--cm-ink); }

.cm-chip.is-active {
	background: var(--cm-ink);
	border-color: var(--cm-ink);
	color: var(--cm-paper);
}

/* ---------------------------------------------------------------
   Grilla
   --------------------------------------------------------------- */

.cm-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(26px, 4vw, 56px) clamp(14px, 2.4vw, 32px);
	padding-bottom: 8px;
	list-style: none;
	margin: 0;
}

@media (min-width: 640px)  { .cm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cm-card { background: transparent; border: 0; }

.cm-card__link { display: block; text-decoration: none; color: inherit; }

/*
 * El marco no lleva relleno y la foto se amplía un poco por encima del
 * cuadro. Las fotos de Caminito ya vienen con bastante blanco alrededor: si
 * además les agregamos padding, el producto queda diminuto y perdido en el
 * medio. Ampliar y recortar sólo se come ese blanco sobrante.
 */
.cm-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: linear-gradient(168deg, #ffffff 0%, #fdfbf8 55%, #f8f5ef 100%);
	border: 0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(26,25,23,.04),
		0 12px 28px -16px rgba(26,25,23,.16);
	transition: box-shadow .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
}

.cm-card:hover .cm-card__media {
	transform: translateY(-6px);
	box-shadow:
		0 2px 4px rgba(26,25,23,.05),
		0 34px 60px -22px rgba(26,25,23,.30);
}

.cm-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform: scale(1.14);
	transition: transform .8s cubic-bezier(.2,.8,.2,1);
}

.cm-card:hover .cm-card__media img { transform: scale(1.22); }

.cm-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--cm-paper-deep);
}

.cm-card__line {
	margin: 18px 0 5px;
	font-family: var(--cm-sans);
	font-size: .625rem;
	font-weight: 600;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--cm-muted);
	transition: color .4s ease;
}

.cm-card:hover .cm-card__line { color: var(--cm-accent); }

.cm-card__title {
	font-family: var(--cm-serif);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.22;
	letter-spacing: -.015em;
	margin: 0 0 3px;
	color: var(--cm-ink);
}

/* Cuando el artículo no tiene línea, el título recupera el aire de arriba. */
.cm-card__media + .cm-card__title { margin-top: 18px; }

/* El filete que se dibuja bajo el título al pasar por la tarjeta. Va sobre
   el <span> y no sobre el <h3>: un elemento en línea permite que la línea
   mida lo que mide el texto, y el bloque conserva sus márgenes. */
.cm-card__title span {
	display: inline;
	background-image: linear-gradient(var(--cm-ink), var(--cm-ink));
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .45s cubic-bezier(.2,.8,.2,1);
}

.cm-card:hover .cm-card__title span { background-size: 100% 1px; }

.cm-card__price {
	margin: 8px 0 0;
	font-family: var(--cm-sans);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cm-accent);
}

.cm-empty {
	background: var(--cm-surface);
	border: 1px solid var(--cm-line);
	border-radius: var(--cm-radius);
	padding: clamp(48px, 9vw, 96px) 28px;
	text-align: center;
	color: var(--cm-ink-soft);
}

.cm-empty p { margin: 0 0 .6em; }
.cm-empty p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------
   Ficha del artículo
   --------------------------------------------------------------- */

.cm-single {
	padding-top: clamp(20px, 3vw, 40px);
	padding-bottom: clamp(48px, 8vw, 96px);
}

.cm-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: clamp(20px, 3.5vw, 40px);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cm-muted);
	text-decoration: none;
	transition: color .3s ease;
}

.cm-back:hover { color: var(--cm-ink); }

.cm-single__grid { display: grid; gap: clamp(28px, 5vw, 40px); }

@media (min-width: 900px) {
	.cm-single__grid {
		grid-template-columns: 1.2fr 1fr;
		gap: clamp(48px, 6vw, 96px);
		align-items: start;
	}
	.cm-single__col { position: sticky; top: 88px; }
}

.cm-single__media {
	background: var(--cm-surface);
	border: 1px solid var(--cm-line);
	border-radius: var(--cm-radius);
	overflow: hidden;
	padding: clamp(20px, 4vw, 56px);
}

.cm-single__title {
	font-size: clamp(1.875rem, 5vw, 3.25rem);
	line-height: 1.02;
	letter-spacing: -.03em;
	margin-bottom: .35em;
	text-wrap: balance;
}

.cm-single__price {
	font-family: var(--cm-sans);
	font-size: 1.375rem;
	font-weight: 620;
	letter-spacing: -.01em;
	color: var(--cm-accent);
	margin: 0 0 22px;
}

.cm-single__desc {
	color: var(--cm-ink-soft);
	font-size: 1.0625rem;
	line-height: 1.75;
	max-width: 56ch;
}
.cm-single__desc p { margin: 0 0 1.15em; }
.cm-single__desc img { margin: 1.5em 0; border-radius: var(--cm-radius); }

.cm-lines { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }

.cm-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	padding: 18px 34px;
	border-radius: 999px;
	background: var(--cm-ink);
	color: var(--cm-paper);
	font-family: var(--cm-sans);
	font-weight: 600;
	font-size: .875rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	margin: 6px 0 30px;
	transition: background .3s ease, transform .3s ease;
}

.cm-cta:hover { background: var(--cm-whatsapp); color: #06310f; }
.cm-cta:active { transform: translateY(1px); }

@media (min-width: 600px) { .cm-cta { width: auto; } }

.cm-related { margin-top: clamp(56px, 9vw, 112px); }

/* ---------------------------------------------------------------
   Paginación
   --------------------------------------------------------------- */

.cm-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	padding: clamp(36px, 6vw, 64px) 0;
}

.cm-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid var(--cm-line-strong);
	text-decoration: none;
	font-size: .875rem;
	font-weight: 560;
	color: var(--cm-ink-soft);
	transition: color .3s ease, border-color .3s ease;
}

.cm-pagination .page-numbers:hover { color: var(--cm-ink); border-color: var(--cm-ink); }

.cm-pagination .page-numbers.current {
	background: var(--cm-ink);
	border-color: var(--cm-ink);
	color: var(--cm-paper);
}

/* ---------------------------------------------------------------
   Pie
   --------------------------------------------------------------- */

.cm-footer {
	margin-top: clamp(56px, 9vw, 120px);
	padding-top: clamp(40px, 6vw, 72px);
	padding-bottom: calc(clamp(40px, 6vw, 72px) + 80px);
	border-top: 1px solid var(--cm-line);
	color: var(--cm-ink-soft);
}

@media (min-width: 768px) { .cm-footer { padding-bottom: clamp(40px, 6vw, 72px); } }

.cm-footer a { color: var(--cm-ink); text-decoration: none; }
.cm-footer a:hover { text-decoration: underline; }

.cm-footer__inner { display: grid; gap: 28px; }

@media (min-width: 768px) {
	.cm-footer__inner { grid-template-columns: 1fr auto; align-items: center; }
}

.cm-footer__name {
	font-family: var(--cm-serif);
	font-size: 1.75rem;
	font-weight: 400;
	letter-spacing: -.02em;
	color: var(--cm-ink);
}

.cm-footer__data { margin: 12px 0 0; font-size: .9375rem; line-height: 1.9; }

.cm-footer__legal {
	margin-top: clamp(32px, 5vw, 56px);
	padding-top: 22px;
	border-top: 1px solid var(--cm-line);
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cm-muted);
}

/* ---------------------------------------------------------------
   Accesibilidad
   --------------------------------------------------------------- */

a:focus-visible,
.cm-card__link:focus-visible,
.cm-chip:focus-visible,
.cm-social__btn:focus-visible,
.cm-cta:focus-visible {
	outline: 2px solid var(--cm-accent);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* Referencia / SKU en la ficha del artículo. Va chico y en versalitas: es un
   dato de servicio para quien va a pedir, no un titular. */
.cm-single__sku {
	margin: -.2em 0 18px;
	font-family: var(--cm-sans);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cm-muted);
}

.cm-header.is-scrolled .cm-header__inner {
	min-height: 58px;
	padding-top: 8px;
	padding-bottom: 8px;
}

/* Portada: primera línea como frase de marca, el resto como descripción. */
.cm-hero__lead {
	margin: 0;
	max-width: 30ch;
	color: var(--cm-ink);
	font-family: var(--cm-serif);
	font-size: clamp(1.25rem, 3.2vw, 1.875rem);
	line-height: 1.25;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.cm-hero__desc {
	margin: .85em 0 0;
	max-width: 52ch;
	color: var(--cm-ink-soft);
	font-size: clamp(.9375rem, 1.6vw, 1.0625rem);
	line-height: 1.65;
	text-wrap: pretty;
}

/* Miniaturas de la galería */
.cm-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

.cm-thumb {
	width: 72px;
	height: 72px;
	padding: 4px;
	border: 1px solid var(--cm-line);
	border-radius: 10px;
	background: var(--cm-surface);
	cursor: pointer;
	overflow: hidden;
	transition: border-color .3s ease, transform .3s ease;
}

.cm-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.cm-thumb:hover { border-color: var(--cm-line-strong); transform: translateY(-2px); }
.cm-thumb.is-active { border-color: var(--cm-accent); }
.cm-thumb:focus-visible { outline: 2px solid var(--cm-accent); outline-offset: 3px; }