/* ============================================================
   Casa Lopez — assets/css/pages.css
   Estilos de templates de página y secciones de la home. ~120 KB.
   Cargado condicionalmente (NO en blog/search) — ver inc/enqueue.php.

   ESTRUCTURA:
     - Helpers compartidos: .cl-section-head, .cl-prod-card (home version).
     - Home sections:
       .cl-hero (hero fullscreen + scroll indicator)
       .cl-home-ticker (cinta de texto animada)
       .cl-cats (grilla de 3 categorías)
       .cl-featured (colección destacada — 4 productos)
       .cl-home-story (brand story 2 columnas)
       .cl-quote-strip (frase destacada)
       .cl-split-banners (2 banners 50/50)
       .cl-gc-cta (Gift Cards CTA)
       .cl-home-features (4 features icon+text)
     - Page templates:
       .cl-page-carpincho, .cl-page-gift-cards, .cl-page-regalos-corp,
       .cl-page-ubicacion, .cl-page-faq, .cl-page-trabaja,
       .cl-page-mantenimiento
     - Scroll reveal system: [data-reveal], [data-stagger] con IntersectionObserver.
     - Footer newsletter: .cl-footer-nl, .cl-footer-insta, .cl-footer-bottom.
     - Contacto strip, trust strip, topbar.

   VARIABLES CSS USADAS (de main.css):
     --color-primary, --color-blush, --color-gold, --color-sage,
     --bg-white, --bg-light, --bg-mid, --bg-parch, --bg-dark,
     --font-serif, --font-sans, --container-w, --gap-*, --radius-*,
     --transition-base, --shadow-card

   BREAKPOINTS:
     Hero: tablet 768px, desktop 1024px
     Categories grid: 1 col → 3 col (768px)
     Featured grid: 2 col (480px) → 4 col (1024px)
     Split banners: 1 col → 2 col (768px)
     FAQ accordion: 1 col → 2 col (1024px)

   CÓMO MODIFICAR:
     - Si una sección nueva se agrega a la home: agregar sus estilos aquí con
       comentario de sección, NO en main.css.
     - Ticker speed: buscar animation en .cl-home-ticker__track y editar duration.
     - Scroll reveal: el sistema lee [data-reveal] y [data-stagger] — los estilos
       de transición iniciales y finales están en la sección "Scroll reveal system".
   ============================================================ */

/* ── Shared helpers ── */
.cl-section-head {
	text-align: center;
	margin-bottom: 3rem;
}

.cl-section-head h2 {
	margin-top: 0.5rem;
}

.cl-section-head--row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	text-align: left;
}

.cl-form-row {
	display: grid;
	grid-template-columns: 1fr; /* stacked on mobile */
	gap: 0 1.5rem;
}

@media (min-width: 601px) {
	.cl-form-row { grid-template-columns: 1fr 1fr; }
}

/* ── Stats ── */
.cl-stat {
	text-align: center;
}

.cl-stat__num {
	display: block;
	font-family: var(--font-serif);
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 500;
	color: var(--text-primary);
	line-height: 1;
}

.cl-stat--light .cl-stat__num {
	color: var(--text-white);
}

.cl-stat__label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-top: 0.5rem;
}

.cl-stat--light .cl-stat__label {
	color: rgba(255, 255, 255, 0.6);
}

/* ── Home: Hero ── */
.cl-hero {
	position: relative;
	min-height: min(92vh, 860px);
	display: flex;
	align-items: center;
	background-color: var(--bg-dark);
	overflow: hidden;
}

.cl-hero__bg {
	position: absolute;
	inset: 0;
}

.cl-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
}

.cl-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(28,28,28,0.85) 40%, rgba(28,28,28,0.2));
}

.cl-hero__content {
	position: relative;
	z-index: 1;
}

.cl-hero__copy {
	max-width: clamp(560px, 42vw, 800px);
}

.cl-hero__title {
	font-family: var(--font-serif);
	font-size: var(--fs-hero);
	font-weight: 500;
	color: var(--text-white);
	line-height: 1.1;
	margin: 0.75rem 0 1.25rem;
}

.cl-hero__sub {
	font-size: 1.0625rem;
	color: var(--on-dark-soft);
	margin-bottom: 2rem;
	line-height: 1.7;
}

.cl-hero__ctas {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.cl-hero__scroll {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}

.cl-hero__scroll span {
	display: block;
	width: 1px;
	height: 48px;
	background: linear-gradient(to bottom, transparent, var(--color-blush));
	animation: cl-scroll-line 2s ease-in-out infinite;
	margin: 0 auto;
}

@keyframes cl-scroll-line {
	0%, 100% { opacity: 0; transform: scaleY(0) translateY(-100%); }
	50%       { opacity: 1; transform: scaleY(1) translateY(0); }
}

/* ── Hero: entry sequence ── */
.cl-hero .cl-eyebrow { animation: cl-hero-enter 900ms var(--ease-editorial, cubic-bezier(0.16,1,0.3,1)) both; animation-delay:  200ms; }
.cl-hero__title      { animation: cl-hero-enter 900ms var(--ease-editorial, cubic-bezier(0.16,1,0.3,1)) both; animation-delay:  400ms; }
.cl-hero__sub        { animation: cl-hero-enter 700ms var(--ease-editorial, cubic-bezier(0.16,1,0.3,1)) both; animation-delay:  600ms; }
.cl-hero__ctas       { animation: cl-hero-enter 600ms var(--ease-editorial, cubic-bezier(0.16,1,0.3,1)) both; animation-delay:  800ms; }
.cl-hero__scroll     { animation: cl-hero-enter 500ms var(--ease-editorial, cubic-bezier(0.16,1,0.3,1)) both; animation-delay: 1000ms; }

/* ── Scroll reveal system ── */
[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity   var(--dur-editorial) var(--ease-editorial, cubic-bezier(0.16,1,0.3,1)),
		transform var(--dur-editorial) var(--ease-editorial, cubic-bezier(0.16,1,0.3,1));
	transition-delay: var(--reveal-delay);
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

[data-reveal="fade"] {
	transform: none;
	transition: opacity var(--dur-editorial) var(--ease-editorial, cubic-bezier(0.16,1,0.3,1));
	transition-delay: var(--reveal-delay);
}
[data-reveal="fade"].is-revealed { opacity: 1; }

[data-stagger="1"] { --reveal-delay:   0ms; }
[data-stagger="2"] { --reveal-delay: 100ms; }
[data-stagger="3"] { --reveal-delay: 200ms; }
[data-stagger="4"] { --reveal-delay: 300ms; }
[data-stagger="5"] { --reveal-delay: 400ms; }
[data-stagger="6"] { --reveal-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
	[data-reveal] { transition: opacity 200ms ease; transform: none; }
	[data-reveal="fade"] { transition: opacity 200ms ease; }
}

/* ── Home: Categories ── */
.cl-cats__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 col on mobile */
	gap: 1.25rem;
}

.cl-cats__card {
	position: relative;
	display: block;
	aspect-ratio: 3/4;
	border-radius: var(--radius-card);
	overflow: hidden;
	background-color: var(--bg-dark);
}

.cl-cats__card img,
.cl-cats__img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ease-slow);
}

.cl-cats__img-wrap {
	position: absolute;
	inset: 0;
}

.cl-cats__img-placeholder {
	width: 100%;
	height: 100%;
	background-color: var(--bg-mid);
}

.cl-cats__card:hover .cl-cats__img-wrap img {
	transform: scale(1.04);
}

.cl-cats__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(28,28,28,0.85) 30%, rgba(28,28,28,0.1));
	transition: opacity var(--ease);
}

.cl-cats__card:hover .cl-cats__overlay {
	opacity: 0.9;
}

.cl-cats__text {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 1.5rem 1.25rem;
	z-index: 1;
}

.cl-cats__name {
	font-family: var(--font-serif);
	font-size: 1.75rem;
	font-weight: 500;
	color: var(--text-white);
	margin-bottom: 0.25rem;
}

.cl-cats__sub {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.65);
	letter-spacing: 0.1em;
}

.cl-cats__cta {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-blush);
	transform: translateX(-8px);
	opacity: 0;
	transition: transform var(--ease), opacity var(--ease);
}

.cl-cats__card:hover .cl-cats__cta {
	transform: translateX(0);
	opacity: 1;
}

/* cats: last child full-width on mobile too */
.cl-cats__grid > :last-child {
	grid-column: 1 / -1;
	aspect-ratio: 16/7;
}

@media (min-width: 769px) {
	.cl-cats__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.cl-cats__grid > :last-child {
		grid-column: auto;
		aspect-ratio: 3/4;
	}
}

/* ── Home: Product grid ── */
.cl-prod-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 col on mobile */
	gap: 1rem;
}

.cl-prod-card {
	display: flex;
	flex-direction: column;
	transition: transform var(--dur-standard) var(--ease-out-warm, cubic-bezier(0.22,1,0.36,1));
}
.cl-prod-card:hover {
	transform: translateY(-4px);
}

.cl-prod-card__thumb {
	display: block;
	position: relative;
	/* 1/1 y no 4/5: woocommerce_thumbnail se genera 600x600 (hard crop 1:1).
	   Con una caja 4/5 + object-fit:cover, la imagen cuadrada se estiraba para
	   llenar el alto y perdía el 20% del ancho (10% por lado). */
	aspect-ratio: 1/1;
	overflow: hidden;
	border-radius: var(--radius-card);
	background-color: var(--bg-mid);
}

.cl-prod-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-standard) var(--ease-out-warm, cubic-bezier(0.22,1,0.36,1)),
	            opacity 500ms var(--ease-out-warm, cubic-bezier(0.22,1,0.36,1));
}

.cl-prod-card__thumb:hover .cl-prod-card__img {
	transform: scale(1.03);
}

/* Hover second-image swap — fades in when product has gallery images */
.cl-prod-card__img--alt {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--dur-standard) var(--ease-out-warm, cubic-bezier(0.22,1,0.36,1));
}
.cl-prod-card__thumb:hover .cl-prod-card__img--alt {
	opacity: 1;
}
/* Suppress scale on primary when alt image is present — fade is cleaner */
.cl-prod-card__thumb:has(.cl-prod-card__img--alt):hover .cl-prod-card__img:not(.cl-prod-card__img--alt) {
	transform: none;
}


.cl-prod-card__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.25rem 0.75rem;
	border-radius: var(--radius-pill);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cl-prod-card__badge--sale { background: var(--color-bordeaux); color: #fff; }
.cl-prod-card__badge--new  { background: var(--color-primary);  color: #fff; }


.cl-prod-card__info {
	padding: 0.875rem 0 0;
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Button always pinned to the bottom of the info area */
.cl-prod-card__info .button,
.cl-prod-card__info .cl-btn {
	margin-top: auto;
}

.cl-prod-card__name {
	font-family: var(--font-serif);
	font-size: 1rem;
	font-weight: 500;
	margin-bottom: 0.375rem;
}

.cl-prod-card__name a {
	color: inherit;
	transition: color var(--ease);
}

.cl-prod-card__name a:hover {
	color: var(--text-muted);
}

.cl-prod-card__price {
	font-size: 0.9375rem;
	margin-bottom: 0.5rem;
}

/* Colour / variant count pill — replaces ATC button on variable products */
.cl-prod-card__colors {
	display: block;
	font-size: 0.6875rem;
	font-family: var(--font-sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-top: auto;
	padding-top: 0.25rem;
}

@media (min-width: 641px) {
	.cl-prod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}

@media (min-width: 1025px) {
	.cl-prod-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Home: Brand Story ── */
.cl-story__grid {
	display: grid;
	grid-template-columns: 1fr; /* stacked on mobile */
	gap: 2rem;
	align-items: start;
	margin-bottom: 3rem;
}

.cl-story__stats {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding: 2rem;
	background-color: var(--bg-dark);
	border-radius: var(--radius-card);
}

.cl-story__stats .cl-stat__num { color: var(--color-blush); }
.cl-story__stats .cl-stat__label { color: rgba(255,255,255,.5); }

.cl-story__title {
	font-size: var(--fs-section);
	font-weight: 300;
}

.cl-story__quote {
	background-color: var(--bg-dark);
	padding: 2.5rem;
	border-radius: var(--radius-card);
	text-align: center;
	border-left: none;
}

.cl-story__quote p {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.25rem;
	color: var(--text-white);
	margin-bottom: 1rem;
}

.cl-story__quote cite {
	font-size: 0.75rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-blush);
}

@media (min-width: 769px) {
	.cl-story__grid { grid-template-columns: 1fr 2fr; gap: 4rem; }
}

/* ── Home: Gift Card CTA ──────────────────────────────────────────────
   Rehecha el 2026-08-10. Antes era blanca y plana: pastillas grises inertes,
   dos botones rectangulares y la tarjeta flotando sin fondo. El blush no
   aparecía en ninguna parte, siendo el color de regalo de la marca.

   La pieza es el par de tarjetas: la de atrás con marco blush y la de
   adelante con marco dorado. Dice "hay distintos montos" sin escribirlo, y
   es lo único llamativo de la sección — todo lo demás se mantiene quieto. */
.cl-gc-cta {
	position: relative;
	/* Crema plano, el mismo del formulario de Regalos Corporativos. Antes había
	   acá un degradado radial blush que no se usa en ninguna otra sección del
	   sitio: era un invento de esta franja y desentonaba. El blush entra por
	   la tarjeta de atrás y por los bordes de las pastillas, no por el fondo. */
	background: var(--bg-mid);
	border-block: 1px solid var(--border);
	overflow: hidden;
}

.cl-gc-cta__grid {
	display: grid;
	/* minmax(0,…) y no 1fr a secas: un ítem de grilla no se achica por debajo
	   de su contenido, así que la tarjeta de 384px estiraba la columna y
	   desbordaba el texto y las pastillas en mobile. */
	grid-template-columns: minmax(0, 1fr);
	gap: 3rem;
	align-items: center;
}

.cl-gc-cta__amounts-label {
	margin: 0 0 0.55rem;
	font-family: var(--font-sans);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps-lg);
	text-transform: uppercase;
	color: var(--text-muted);
}

.cl-gc-cta__amounts {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

/* Pastilla de monto: el número en Playfair, no en Lato — es un precio, no una
   etiqueta de interfaz. El borde blush la vuelve elegible a la vista. */
.cl-gc-cta__amounts .cl-pill--link {
	display: inline-block;
	padding: 0.55rem 1.05rem;
	/* blush-dk y no blush: el borde es lo que hace que la pastilla se lea
	   como elegible. Aun así queda en 1.9:1 contra el fondo, lejos del 3:1
	   que pide 1.4.11 — pero un borde blush sobre fondo claro no puede
	   llegar ahí sin salirse de la paleta. Lo que identifica el control es
	   el texto, a 15.7:1, y el foco de teclado usa el anillo global. */
	border: 1px solid var(--color-blush-dk);
	border-radius: 999px;
	background-color: rgba(235, 204, 194, .18);
	font-family: var(--font-serif);
	font-style: italic;
	/* Sin este peso hereda el 700 de .cl-pill, y la itálica de Playfair tiene el
	   eje de 400 a 500: el 700 se recortaba a 500 igual. Queda escrito lo que
	   de verdad se dibuja. */
	font-weight: 500;
	font-size: 1.0625rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--color-primary);
	text-decoration: none;
	transition: background-color var(--ease), border-color var(--ease), transform var(--ease);
}
.cl-gc-cta__amounts .cl-pill--link:hover,
.cl-gc-cta__amounts .cl-pill--link:focus-visible {
	background-color: var(--color-blush);
	border-color: var(--color-blush-dk);
	transform: translateY(-1px);
}

/* El párrafo se volvía MENOS legible cuanto más grande la pantalla, porque no
   tenía tope de ancho: medido en el sitio daba 45 caracteres por línea en
   mobile (bien), 81 en 1440, 89 en tablet y 99 en 1920 — o sea una sola línea
   de 99 caracteres en la pantalla más grande, que es lo más difícil de leer.
   El rango cómodo es 45–75. Con 46ch queda en ~46 en todos los anchos.
   En ch y no en px para que el tope siga a la tipografía si cambia el cuerpo. */
.cl-gc-cta__desc {
	max-width: 46ch;
}

.cl-gc-cta__ctas {
	display: flex;
	gap: 1.25rem 1.75rem;
	flex-wrap: wrap;
	align-items: center;
}

/* Secundario como enlace, no como segunda caja: dos botones del mismo peso
   se anulaban entre sí. */
/* El área de toque se agranda con un pseudo-elemento y NO con padding: medido,
   el enlace daba 242x24, que es exactamente el mínimo de WCAG 2.5.8, sin nada
   de margen. En mobile queda justo debajo de un botón de 48px y es fácil
   errarle. Con inset -10px arriba y abajo llega a 44px, que es lo que
   recomiendan Apple y Google.

   Va por ::before y no por padding porque el filete de :hover es un
   border-bottom: con padding vertical el subrayado se despegaría del texto.
   Los -10px de arriba no pisan el botón: .cl-gc-cta__ctas tiene 1.25rem (20px)
   de separación entre filas, así que el área llega justo al borde. */
.cl-gc-cta__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: color var(--ease), border-color var(--ease);
}
.cl-gc-cta__link::before {
	content: '';
	position: absolute;
	inset: -10px -8px;
}

.cl-gc-cta__link span { transition: transform var(--ease); }
.cl-gc-cta__link:hover,
.cl-gc-cta__link:focus-visible {
	color: var(--color-primary);
	border-bottom-color: var(--color-blush-dk);
}
.cl-gc-cta__link:hover span { transform: translateX(3px); }

/* 768 y no 769: el iPad vertical mide exactamente 768 y quedaba a UN píxel de
   las dos columnas, así que se comía el ancho completo con el texto. */
@media (min-width: 768px) {
	.cl-gc-cta__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
}

/* ── WooCommerce: Shop header ── */
.cl-shop-header {
	position: relative;
	background-color: var(--bg-dark);
	padding: 4rem 0 3.5rem;
	overflow: hidden;
}

@media (min-width: 769px) {
	.cl-shop-header { padding: 6rem 0 5rem; }
}

.cl-shop-header--has-bg {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.cl-shop-header__overlay {
	position: absolute;
	inset: 0;
	background: rgba(28,28,28,.68);
}

.cl-shop-header .cl-container {
	position: relative;
	z-index: 1;
}

.cl-shop-header .woocommerce-breadcrumb,
.cl-shop-header .rank-math-breadcrumb {
	font-size: 0.75rem;
	color: rgba(255,255,255,.45);
	margin-bottom: 0.5rem;
}

.cl-shop-header .woocommerce-breadcrumb a,
.cl-shop-header .rank-math-breadcrumb a {
	color: rgba(255,255,255,.45);
	transition: color var(--ease);
}

.cl-shop-header .woocommerce-breadcrumb a:hover,
.cl-shop-header .rank-math-breadcrumb a:hover {
	color: var(--color-blush);
}

/* Eyebrow del shop header — color blush + spacing del rule (mismo patrón que
 * cl-ct-hero, cl-ub-hero, cl-corp-hero). Bridge editorial entre home y shop.
 * flex-wrap para evitar overflow en mobile cuando el rule + texto exceden viewport. */
.cl-shop-header__eyebrow {
	/* Dorado y no blush: el eyebrow sobre fondo oscuro va en dorado en todo el
	   sitio (ver .cl-eyebrow--gold en main.css). Esta regla lo fijaba por su
	   cuenta y se salteaba el modificador. */
	color: var(--color-gold);
	margin-bottom: 0.875rem;
	justify-content: flex-start;
	flex-wrap: wrap;
	max-width: 100%;
}

.cl-shop-header__title {
	font-family: var(--font-serif);
	font-size: var(--fs-hero);
	font-weight: 400;
	font-style: italic;
	color: var(--text-white);
	margin-top: 0.375rem;
	line-height: 1.1;
	letter-spacing: -0.01em;
	/* Mobile safeguards: min-width:0 permite shrink dentro de flex/grid;
	 * overflow-wrap permite romper palabras largas (ej "Marroquinería"). */
	min-width: 0;
	overflow-wrap: break-word;
	max-width: 100%;
}

/* El <em> hereda italic. Color blush para peso visual del énfasis. */
.cl-shop-header__title em {
	font-style: italic;
	color: var(--color-blush);
}

/* Gold rule debajo del título — eco del cl-sp-info__title del PDP */
.cl-shop-header__title::after {
	content: '';
	display: block;
	width: 2.5rem;
	height: 2px;
	background: var(--color-gold);
	margin-top: 1.25rem;
}

/* ── Category description strip (below hero) ── */
.cl-shop-desc-strip {
	background: var(--bg-parch);
	border-top: 3px solid var(--color-gold);
	border-bottom: 1px solid var(--border);
	padding: 2.5rem 0 2.25rem;
}

.cl-shop-desc-strip__body {
	max-width: 700px;
	padding-left: 1.25rem;
	border-left: 2px solid var(--color-blush);
}

.cl-shop-desc-strip__body p {
	color: var(--text-muted);
	font-size: 0.9rem;
	line-height: 1.78;
	margin: 0 0 0.75rem;
}

.cl-shop-desc-strip__body p:first-child {
	font-family: var(--font-serif);
	font-size: 1.0625rem;
	font-style: italic;
	color: var(--text-primary);
	line-height: 1.6;
	margin-bottom: 1rem;
}

.cl-shop-desc-strip__body p:last-child {
	margin-bottom: 0;
}

/* ── Shop toolbar ── */
.cl-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 0 1rem;
	border-bottom: 1px solid var(--border);
	margin-bottom: 2rem;
}

.cl-shop-toolbar__count .woocommerce-result-count {
	font-size: 0.8125rem;
	color: var(--text-muted);
	margin: 0;
}

.cl-shop-toolbar__order .orderby {
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--border);
	font-size: 0.8125rem;
	font-family: var(--font-sans);
	color: var(--text-primary);
	background: var(--bg-white);
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a9086' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.6rem center;
	padding-right: 2rem;
	cursor: pointer;
	transition: border-color var(--ease);
}

.cl-shop-toolbar__order .orderby:focus {
	border-color: var(--color-blush);
	outline: none;
}

/* Custom sort pills — replace native <select> on archive page */
.cl-shop-toolbar__order {
	display: flex;
	gap: 0.375rem;
	flex-wrap: wrap;
	align-items: center;
}

/* La barra no tenía NINGUNA regla responsiva: era space-between en todos los
   anchos. Medido en la tienda: hasta 860px entra todo en una fila, pero a 768
   las píldoras envuelven a dos filas y el contador se comprime a 92px; a 390
   queda en 47px de ancho y 66px de alto, partido en tres líneas
   ("1–12 de / 56 / piezas"). Por eso se veía encimado.

   Debajo del punto de quiebre se apilan: el contador arriba en una línea, las
   píldoras abajo con todo el ancho disponible. */
@media (max-width: 859px) {
	.cl-shop-toolbar {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.875rem;
	}

	.cl-shop-toolbar__count,
	.cl-shop-toolbar__order {
		width: 100%;
	}

	.cl-shop-toolbar__count .woocommerce-result-count {
		white-space: nowrap;
	}
}
.cl-toolbar-sep {
	display: inline-block;
	width: 1px;
	height: 1.125rem;
	background: var(--border);
	margin: 0 0.25rem;
}
.cl-sort-pill {
	display: inline-flex;
	align-items: center;
	min-height: 44px; /* WCAG 2.5.5 touch target */
	padding: 0.5rem 1rem;
	font-size: 0.6875rem;
	font-family: var(--font-sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	text-decoration: none;
	transition: color var(--ease), border-color var(--ease), background var(--ease);
	white-space: nowrap;
}
.cl-sort-pill:hover {
	color: var(--text-primary);
	border-color: var(--color-primary);
}
.cl-sort-pill.is-active {
	background: var(--color-primary);
	color: var(--text-white);
	border-color: var(--color-primary);
}

/* ── Shop 2-column layout ── */
.cl-shop-layout {
	display: grid;
	grid-template-columns: 1fr; /* sidebar below content on mobile */
	gap: 1.5rem;
	align-items: start;
}

/* Ítems del grid: min-width:0 para que puedan achicarse por debajo de su
   min-content. Sin esto, el nav de pills (flex-wrap:nowrap + white-space:nowrap)
   empuja el track al ancho de TODAS las pills en vez de scrollear, y el sidebar
   se lleva puesto el ancho del contenedor. Medido en mobile 390px: sidebar 490px
   dentro de un contenedor de 358 → scroll horizontal en toda la página. */
.cl-shop-main,
.cl-shop-sidebar {
	min-width: 0;
}

/* ── Category sidebar ── */
.cl-shop-sidebar {
	position: static; /* sidebar scroll on mobile; sticky at 901px+ */
}

.cl-shop-cat-nav__title {
	font-family: var(--font-sans);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps-lg);
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--border);
}

/* mobile: horizontal scrollable pill nav */
.cl-shop-cat-nav__list {
	list-style: none;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 0;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 0.25rem;
	/* El dedo sobre las pills solo mueve la fila de costado; sin esto el default
	   (touch-action:auto) deja que un gesto apenas inclinado scrollee la página.
	   Se resetea a auto en el bloque de 901px+, donde esto pasa a ser una
	   columna vertical y pan-x bloquearía el scroll en pantallas táctiles. */
	touch-action: pan-x;
	overscroll-behavior-x: contain; /* al llegar al tope no encadena a la página */
}

.cl-shop-cat-nav__list::-webkit-scrollbar { display: none; }

/* La fila scrollea de costado pero la barra está oculta, así que no había NINGUNA
   señal de que hubiera más categorías: medido en producción a 390px, 427px de
   contenido en 358px visibles — la última pill quedaba cortada al ras y parecía
   un recorte, no algo arrastrable. El degradado del borde derecho es la misma
   solución que ya usan los thumbnails de la galería.

   Sólo mientras la lista es horizontal: de 901px para arriba pasa a columna. */
@media (max-width: 900px) {
	.cl-shop-cat-nav__list {
		-webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
		        mask-image: linear-gradient(to right, #000 88%, transparent 100%);
	}
}

.cl-shop-cat-nav__item {
	border-bottom: none;
	flex-shrink: 0;
}

.cl-shop-cat-nav__link {
	display: flex;
	align-items: center;
	min-height: 44px; /* WCAG 2.5.5 touch target en mobile horizontal scroll */
	padding: 0.625rem 1rem;
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	color: var(--text-muted);
	border: 1px solid var(--border);
	white-space: nowrap;
	transition: color var(--ease), background var(--ease);
}

.cl-shop-cat-nav__link:hover {
	color: var(--text-primary);
}

.cl-shop-cat-nav__link.is-current {
	background-color: var(--color-primary);
	color: var(--text-white);
	border-color: var(--color-primary);
}

/* sub-cats hidden on mobile horizontal scroll */
.cl-shop-cat-nav__sub { display: none; }

/* En mobile la nav es una fila de píldoras que se scrollea de costado: no hay
   lugar ni sentido para desplegar nada. El botón aparece recién en 901px+. */
.cl-shop-cat-nav__toggle { display: none; }

.cl-shop-cat-nav__sub li { margin: 0; }

.cl-shop-cat-nav__sub-link {
	display: block;
	/* Misma estructura que el enlace padre —filete de estado siempre presente en
	   transparente— con el texto más indentado, para que se lea como un nivel
	   adentro y no como uno arriba. Sin la sangría las hijas arrancaban a la
	   izquierda de su propia categoría. */
	padding: 0.4rem 0.75rem 0.4rem 1.75rem;
	border-left: 2px solid;
	border-left-color: transparent;
	font-size: 0.8125rem;
	color: var(--text-muted);
	transition: color var(--ease), border-color var(--ease);
}

.cl-shop-cat-nav__sub-link:hover,
.cl-shop-cat-nav__sub-link.is-current { color: var(--text-primary); }

.cl-shop-cat-nav__sub-link:hover { border-left-color: var(--border); }

/* La hija seleccionada usa el mismo idioma que la del primer nivel: crema y
   filete dorado, con el filete a la misma altura que el de las padres para que
   los dos niveles compartan el eje. Antes se marcaba sólo con color y peso 600
   —el marcador flojo que el primer nivel dejó de usar en v2.5.3—, así que
   entrar a una subcategoría se sentía como que no había nada seleccionado. */
.cl-shop-cat-nav__sub-link.is-current {
	font-weight: 600;
	background-color: var(--bg-parch);
	border-left-color: var(--color-gold);
}

/* ── Product grid in shop ── */
/* Mobile: 1 columna full-bleed (luxury feel — Polène, Loewe). 2 cols al 165px
 * por imagen apretaba precios y se sentía retail. Una pieza por fila da peso
 * editorial a cada producto.
 * Tablet (481+): 2 cols. Desktop (769+): 3 cols. */
.cl-prod-grid--shop {
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 481px) {
	.cl-prod-grid--shop {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

@media (min-width: 769px) {
	.cl-prod-grid--shop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 901px) {
	.cl-shop-layout {
		grid-template-columns: 216px 1fr;
		gap: 3rem;
	}
	.cl-shop-sidebar {
		position: sticky;
		top: calc(var(--topbar-h) + var(--header-h) + 1.5rem);
	}
	.cl-shop-cat-nav__list {
		flex-direction: column;
		flex-wrap: wrap;
		overflow-x: visible;
		padding-bottom: 0;
		/* Acá ya no es un slider sino una columna: devolver el gesto vertical,
		   si no en pantallas táctiles el dedo sobre las categorías no scrollea. */
		touch-action: auto;
	}
	.cl-shop-cat-nav__item {
		border-bottom: 1px solid var(--border);
		flex-shrink: unset;
	}

	/* La raya separa un ítem del siguiente; en el último no separa de nada y
	   queda colgando bajo la lista. */
	.cl-shop-cat-nav__item:last-child {
		border-bottom: none;
	}

	.cl-shop-cat-nav__item {
		position: relative; /* referencia del botón de desplegar */
	}

	/* Va encima del enlace y no al lado: así el fondo crema del estado activo
	   cubre todo el ancho de la fila. El alto de 40px cubre el renglón entero,
	   de modo que el clic cerca del borde abre en vez de navegar. */
	.cl-shop-cat-nav__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		right: 0;
		width: 2.25rem;
		height: 40px;
		padding: 0;
		background: none;
		border: none;
		color: var(--text-muted);
		cursor: pointer;
		transition: color var(--ease), transform var(--ease);
	}

	.cl-shop-cat-nav__toggle:hover {
		color: var(--text-primary);
	}

	.cl-shop-cat-nav__toggle:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: -2px;
	}

	/* La flecha apunta abajo cuando está cerrado y arriba cuando está abierto. */
	.cl-shop-cat-nav__toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	.cl-shop-cat-nav__toggle svg {
		transition: transform var(--ease);
	}

	/* El JS colapsa con el atributo hidden. Hace falta pisar el display:block de
	   .cl-shop-cat-nav__sub de más abajo, que es más específico que [hidden]. */
	.cl-shop-cat-nav__sub[hidden] {
		display: none;
	}

	/* La rama en la que estás parado: sin esto, entrar a una subcategoría dejaba
	   la lista entera sin ningún padre marcado y no se sabía dónde estabas. Es un
	   estado más suave que el de la activa —texto oscuro, sin fondo ni dorado—
	   porque la que está seleccionada de verdad es la hija. */
	.cl-shop-cat-nav__item.is-open > .cl-shop-cat-nav__link:not(.is-current) {
		color: var(--text-primary);
		font-weight: 600;
	}
	.cl-shop-cat-nav__link {
		/* El padding izquierdo deja lugar al filete de estado, que existe siempre
		   en transparente: así encender la activa o el hover no mueve el texto.
		   Va con border-left-color explícito porque sin él el borde toma
		   currentColor y las cinco categorías se dibujarían con filete gris.
		   El padding derecho reserva el lugar del botón de desplegar, que va
		   encima en posición absoluta para no cortar el fondo del estado. */
		padding: 0.625rem 2.5rem 0.625rem 0.75rem;
		border: none;
		border-left: 2px solid;
		border-left-color: transparent;
		white-space: normal;
	}
	/* Antes el hover corría el texto 0.25rem y el renglón saltaba. Ahora sólo se
	   enciende el filete, que ya ocupaba su lugar. */
	.cl-shop-cat-nav__link:hover {
		border-left-color: var(--border);
		color: var(--text-primary);
	}
	/* La activa se marcaba sólo con color y peso 600, y a simple vista no se
	   distinguía de las otras. Ahora suma fondo crema y filete dorado. El dorado
	   va como trazo y no como texto: sobre claro da 2.42:1 y no se leería. */
	.cl-shop-cat-nav__link.is-current {
		background-color: var(--bg-parch);
		color: var(--text-primary);
		border: none;
		border-left: 2px solid var(--color-gold);
		font-weight: 700;
	}
	.cl-shop-cat-nav__sub { display: block; }
	.cl-prod-grid--shop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Shop pagination ── */
.cl-shop-pagination {
	margin-top: 3rem;
	text-align: center;
}

/* OJO: con type=list, paginate_links genera <ul class="page-numbers"><li><a class="page-numbers">.
   El CSS de celda debe apuntar SOLO a los <a>/<span> dentro de <li> — si se apunta a
   .page-numbers a secas, el propio <ul> (que también lleva esa clase) recibe padding y
   borde de celda y aparece una celda vacía fantasma a la izquierda. */
.cl-shop-pagination .woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	gap: 0;
	list-style: none;
	border: 1px solid var(--border);
	margin: 0;
	padding: 0;
	/* CLAVE: el <ul> también lleva la clase .page-numbers (paginate_links type=list),
	   así que la regla genérica .page-numbers:hover de main.css lo pintaba de NEGRO al
	   pasar el mouse por cualquier celda, y ese negro se veía a través de las celdas
	   transparentes. Fondo blanco fijo (más específico) lo neutraliza. */
	background-color: var(--bg-white);
	/* El <ul> también lleva .page-numbers → hereda height:2.25rem (36px) de main.css.
	   Las celdas miden 40px y, al centrarse en un ul de 36px, sobresalían ~2px arriba
	   y abajo (overflow de las líneas divisorias; las celdas rellenas se veían más
	   grandes). height:auto deja que el ul tome los 40px de las celdas. */
	height: auto;
}

.cl-shop-pagination .woocommerce-pagination li {
	display: inline-flex;
	margin: 0;
}

.cl-shop-pagination .woocommerce-pagination li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 0.75rem;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--text-muted);
	/* border:none anula el borde completo de 1.5px que main.css .page-numbers pone a
	   CADA celda (causaba la doble línea de contorno). Dejamos solo el divisor derecho. */
	border: none;
	border-right: 1px solid var(--border);
	transition: background var(--ease), color var(--ease);
}

.cl-shop-pagination .woocommerce-pagination li:last-child .page-numbers {
	border-right: none;
}

.cl-shop-pagination .woocommerce-pagination li .page-numbers.current {
	background-color: var(--color-primary);
	color: var(--text-white);
}

.cl-shop-pagination .woocommerce-pagination li .page-numbers:hover:not(.current) {
	/* Opción 2: blush (rosa de marca). El background EXPLÍCITO además anula la regla
	   genérica .page-numbers:hover de main.css (que rellenaría de negro). */
	background-color: var(--color-blush);
	color: var(--color-primary);
	box-shadow: none;
}

/* shop responsive: handled inline above in .cl-shop-cat-nav__* base + @media (min-width: 901px) */

/* ── WooCommerce: Single Product ── */

/* Container shared across product sections */
.cl-sp-wrap {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 4vw, 3rem);
}

/* 1. Breadcrumbs */
.cl-sp-breadcrumbs {
	background: #fff;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--border);
}

.cl-sp-breadcrumbs .woocommerce-breadcrumb,
.cl-sp-breadcrumbs .rank-math-breadcrumb {
	font-size: 0.8rem;
	color: var(--text-muted);
	margin: 0;
}

.cl-sp-breadcrumbs .woocommerce-breadcrumb a,
.cl-sp-breadcrumbs .rank-math-breadcrumb a {
	color: var(--text-muted);
	text-decoration: none;
}

.cl-sp-breadcrumbs .woocommerce-breadcrumb a:hover,
.cl-sp-breadcrumbs .rank-math-breadcrumb a:hover {
	color: var(--color-primary);
}

.cl-sp-breadcrumbs .rank-math-breadcrumb p {
	margin: 0;
	display: inline;
}

/* 2. Product section */
.cl-sp-product {
	background: #fff;
	padding: 3rem 0 0;
}

/* WooCommerce needs the .product wrapper; we layer the grid inside it.
 * Specificity (0,3,1) beats woocommerce.css `.woocommerce div.product` (0,2,1). */
.woocommerce .cl-sp-product div.product {
	display: block !important;
	grid-template-columns: none;
}

.cl-sp-product-grid {
	display: grid;
	/* IMPORTANTE: minmax(0,1fr) en vez de 1fr (= minmax(auto,1fr)).
	 * Con auto, el contenido (slide width=755px set por FlexSlider mismeasurement,
	 * SVG de medidas, swatches con widths intrínsecos) empuja la columna MÁS
	 * ANCHA que el track del grid → cl-sp-gallery y cl-sp-info terminaban a 755px
	 * en un viewport de 393px (overflow horizontal).
	 * minmax(0,1fr) permite shrink below content-size → columnas siempre fit. */
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	align-items: start;
	overflow-x: hidden;
}

/* Gallery — vertical thumbnail style (thumbs on the left) */
.cl-sp-gallery {
	position: relative;
	padding-bottom: 3rem;
}

.cl-sp-gallery .woocommerce-product-gallery {
	display: flex;
	flex-direction: row;
	gap: 0.75rem;
	align-items: flex-start;
	width: 100%;
}

/* FlexSlider injects .flex-viewport between the gallery and the figure wrapper;
 * it needs flex: 1 so it (not the figure) fills the available row space.
 * NO height override acá: FlexSlider mide y setea height inline para mostrar
 * UN solo slide. Si forzamos height:auto, el BFC (overflow:hidden) crece para
 * incluir cualquier slide que se haya wrappeado por errores de redondeo en
 * los widths inline → se ven 2+ slides apilados. El JS (fixFlexSliderWidths)
 * arregla los widths para que NO haya wrap. */
.cl-sp-gallery .flex-viewport {
	flex: 1;
	min-width: 0;
	min-height: 320px;
	overflow: hidden;
}

/* Wrapper: flex row evita que slides con width decimal (ej. 1020.32px) se
 * wrappeen a segunda fila cuando N×decimal > wrapper_width. FlexSlider anima
 * via margin-left en el wrapper — no depende de floats para navegar, funciona
 * igual con flex. flex-shrink:0 en cada slide previene que flex los comprima. */
.cl-sp-gallery .woocommerce-product-gallery__wrapper {
	display: flex !important;
	flex-wrap: nowrap !important;
}

/* IMPORTANTE: NO setear width:100% acá. FlexSlider setea inline width:Npx
 * (donde N = num_slides * slide_width) para que los slides floateen en una sola
 * fila y .flex-viewport pueda mostrar uno a la vez con overflow:hidden + transform.
 * Si forzamos width:100%, el wrapper queda del ancho del viewport y los slides
 * se apilan verticalmente (cada uno toma una fila propia). */

/* Zoom trigger icon */
.cl-sp-gallery .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 1rem;
	line-height: 1;
	transition: background 0.2s;
}

.cl-sp-gallery .woocommerce-product-gallery__trigger:hover {
	background: #fff;
}

/* Slide: aspect-ratio:1 fija la altura al ancho del slide (cuadrado).
 * Previene que la galería crezca sin límite cuando:
 *   (a) WC/PhotoSwipe cambia el src al img full-size al cerrar el lightbox
 *   (b) una imagen tiene dimensiones naturales muy altas (portrait extremo)
 * max-width:100vw cap defensivo: FlexSlider puede asignar slide_width =
 * N×viewport en un bucle de re-medición; 100vw asegura que el slide no
 * supere el viewport real. */
.cl-sp-gallery .woocommerce-product-gallery__image {
	aspect-ratio: 1;
	min-height: 320px;
	max-width: 100vw !important;
	flex-shrink: 0;
}

/* Galería de UNA sola imagen: WC no inicializa FlexSlider (no hay .flex-viewport),
 * así que el slide nunca recibe el `width: Npx` inline que FlexSlider le escribe a
 * cada uno. El wrapper igual es display:flex, y con el flex-shrink:0 de arriba el
 * slide se planta en el ancho natural de la imagen: medido en Mochila Rafael,
 * 900px dentro de un contenedor de 640 → la galería desborda (scroll=984 vs
 * client=640) apenas carga la página, sin tocar nada.
 *
 * El flex-shrink:0 de arriba NO se puede sacar: con FlexSlider, el wrapper es una
 * fila larga (2244px para 4 slides) y cada slide tiene width inline exacto; si se
 * encogieran, se rompe el carrusel. Por eso esto se acota a :not(:has(.flex-viewport)),
 * que es precisamente "FlexSlider no arrancó". */
.cl-sp-gallery .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__image {
	flex-shrink: 1;
	min-width: 0;
}

/* Aviso "foto de referencia" — lo inyecta pages.js al final de .cl-sp-gallery cuando
 * el color elegido no tiene foto propia y la galería cae a la del padre (el mismo
 * modelo en otro color). Va pegado a la galería y no al lado del botón de comprar:
 * el malentendido está en la foto, así que la aclaración tiene que estar en la foto. */
.cl-var-noimg {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	/* Tarjeta CENTRADA en la columna: más larga que antes (640) pero no
	   full-bleed; el aire a los costados sale del margin auto. */
	max-width: 640px;
	margin: 1rem auto 0;
	padding: 0.9rem 1rem;
	background: var(--bg-mid);
	border: 1px solid var(--border-blush);
	border-radius: var(--radius-card);
}
.cl-var-noimg[hidden] { display: none; }

.cl-var-noimg__icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--color-blush-dk);
}

.cl-var-noimg__body { flex: 1; min-width: 0; }

.cl-var-noimg__title {
	font-family: var(--font-sans);
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-primary);
	margin: 0 0 0.3rem;
}

.cl-var-noimg__text {
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--text-muted);
	margin: 0 0 0.75rem;
}
.cl-var-noimg__text strong { color: var(--text-primary); font-weight: 700; }

.cl-var-noimg__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px; /* WCAG 2.5.5 touch target */
	padding: 0.6rem 1.1rem;
	font-family: var(--font-sans);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--text-primary);
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-card);
	transition: background var(--ease), color var(--ease);
}
.cl-var-noimg__cta:hover {
	background: var(--color-primary);
	color: var(--text-white);
}
.cl-var-noimg__cta svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Imagen: height:100% llena el cuadrado definido por aspect-ratio del slide.
 * object-fit:contain (heredado de woocommerce.css) muestra la imagen completa
 * sin recorte, con letterboxing si el aspect ratio difiere del cuadro.
 * width:100% — el slide ya tiene max-width:100vw, así que la imagen nunca
 * excede el viewport real (reemplaza el min(100%, 100vw) defensivo anterior). */
.cl-sp-gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	display: block;
}

.cl-sp-gallery .flex-control-nav.flex-control-thumbs {
	flex-shrink: 0;
	width: 72px;
	order: -1;
	display: flex !important;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cl-sp-gallery .flex-control-thumbs li { margin: 0; }

.cl-sp-gallery .flex-control-thumbs img {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: cover;
	border: 2px solid transparent;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.cl-sp-gallery .flex-control-thumbs img:hover { opacity: 0.85; }

.cl-sp-gallery .flex-control-thumbs .flex-active {
	opacity: 1;
	border-color: var(--color-primary);
}

/* Sale badge — offset for vertical thumbs */
.cl-sp-gallery .onsale {
	position: absolute;
	top: 0.75rem;
	left: calc(72px + 0.75rem + 0.75rem);
	z-index: 2;
	background: #8b2635;
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: var(--radius-card);
	margin: 0;
	min-width: 0;
	min-height: 0;
	line-height: 1.4;
}

/* Info column */
.cl-sp-info {
	padding: 3rem 3rem 1.5rem 3.5rem;
	border-left: 1px solid #ede7e3;
}

/* Category eyebrow */
.cl-sp-info__cat {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-blush);
	margin: 0 0 0.75rem;
}

.cl-sp-info__cat a {
	color: inherit;
	text-decoration: none;
}

/* WC Rating */
.cl-sp-info .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.625rem;
}

.cl-sp-info .star-rating {
	color: var(--color-gold);
}

/* Product title */
.cl-sp-info__title {
	font-family: var(--font-serif);
	font-size: clamp(1.6rem, 2.8vw, 2.25rem);
	font-weight: 400;
	color: var(--color-primary);
	margin: 0 0 1.125rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.cl-sp-info__title::after {
	content: '';
	display: block;
	width: 2rem;
	height: 2px;
	background: var(--color-gold);
	margin-top: 0.875rem;
}

/* Short description */
.cl-sp-info__excerpt,
.cl-sp-info .woocommerce-product-details__short-description {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--text-muted);
	margin-bottom: 1.25rem;
}

/* Price */
/* El filete dorado es el acento del bloque de compra. El dorado NO puede ir en
   el número: sobre blanco da 2,42:1 y WCAG pide 3:1 incluso para texto grande.
   Como línea de 1px no hay requisito de contraste de texto, así que ahí sí. Es
   el mismo hilo dorado de los títulos de columna del footer y del mega-menú. */
.cl-sp-info__price {
	padding-bottom: 1.25rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid rgba(201, 160, 96, 0.55);
}

.cl-sp-info__price .price {
	display: block;
	margin-bottom: 0;
}

/* Cuotas sin interés — pegado al precio, arriba del filete dorado.
   El aviso NO va en dorado aunque sea una promo: sobre blanco el dorado no
   llega al contraste mínimo en texto chico, que es la misma razón por la que
   el precio de al lado es --color-primary. La jerarquía la da el tamaño (el
   precio es 24-34px, esto 15px) y el peso del monto, no el color. */
.cl-sp-cuotas {
	margin: .5rem 0 0;
	font-family: var(--font-sans);
	font-size: .9375rem;
	line-height: 1.4;
	color: var(--text-muted);
}

/* El precio duplicado de WooCommerce, abajo del formulario de variaciones.
   Se esconde SÓLO cuando el JS ya movió el precio de arriba a la variante
   elegida (por eso la clase la pone el JS y no está en el PHP): si el script
   no corriera, ese renglón es el único lugar donde se ve el precio exacto. */
.cl-sp-info.cl-precio-sigue-variante .woocommerce-variation-price {
	display: none;
}

.cl-sp-cuotas__monto {
	font-weight: 700;
	color: var(--text-primary);
	/* El monto no se parte al final del renglón: "$44." arriba y "352" abajo
	   se lee como dos números distintos. */
	white-space: nowrap;
}

.cl-sp-info__price .woocommerce-Price-amount,
.cl-sp-info .price .woocommerce-Price-amount {
	font-family: var(--font-serif);
	/* El énfasis viene del tamaño, no del color: sobre blanco el dorado no
	   llega al mínimo de contraste. 26px → 34px. */
	font-size: clamp(1.5rem, 2.4vw, 2.125rem);
	font-weight: 400;
	color: var(--color-primary);
}

.cl-sp-info .price del .woocommerce-Price-amount {
	font-size: 1.1rem;
	color: var(--text-muted);
}

/* Cart form */
.cl-sp-info__cart { margin-bottom: 0.75rem; }

.cl-sp-info .cart {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

/* Uniform spacing inside the variation wrap */
.cl-sp-info .woocommerce-variation {
	margin-bottom: 0;
}

.cl-sp-info .woocommerce-variation-availability {
	margin-bottom: 0.875rem;
}

/* MEDIDAS card */
.cl-sp-info .clh-dims-card {
	margin-top: 1.75rem !important;
	margin-bottom: 0.875rem;
}

/* Variable product: qty + ATC side-by-side; addon fields span full width */
.cl-sp-info .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
}

/* Engraving field full-width row; override inline style="margin:10px 0" from plugin PHP */
.cl-sp-info .clh-engraving-field {
	flex-basis: 100%;
	margin: 0 !important;
}

/* El plugin PW Gift Cards agrega su propio wrapper; forzamos ancho completo */
.cl-sp-info .cart .pw-gift-card-field-wrapper,
.cl-sp-info .cart .pw_gift_cards_field,
.cl-sp-info .cart > p:not(.quantity) {
	flex-basis: 100%;
}

/* Quantity wrapper — flex so −/input/+ sit inline */
.cl-sp-info .quantity {
	display: flex;
	align-items: stretch;
}

/* Quantity input */
.cl-sp-info .quantity .qty {
	width: 64px;
	height: 48px;
	border: 1.5px solid var(--border);
	border-radius: 0;
	text-align: center;
	font-size: 1rem;
	font-family: inherit;
	color: var(--color-primary);
	background: #fff;
	-moz-appearance: textfield;
	appearance: textfield;
	outline: none;
	transition: border-color 0.2s ease;
}

/* Ocultar el spinner nativo ▲▼ del input number (Chrome/Safari) — usamos los
   botones −/+ custom (.cl-qty-btn); el spinner aparecía en hover encima de ellos. */
/* El input de cantidad tenía outline: none en su estado BASE —no en :focus— y
   ninguna regla de foco, así que al llegar con Tab no cambiaba nada: la única
   señal era el anillo blanco del foco global, invisible sobre el fondo blanco
   del campo.
   El aro va hacia ADENTRO (offset negativo) y no por fuera como en el resto del
   sitio: este campo está pegado entre los botones − y + de un control unido, y
   un aro por fuera se montaría encima de los dos. Negro sobre el fondo blanco
   del propio campo da 17:1. */
.cl-sp-info .quantity .qty::-webkit-outer-spin-button,
.cl-sp-info .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* El foco de este campo vive en woocommerce.css, al lado de la regla que le fija
   el borde: la que había acá perdía por especificidad y nunca se aplicaba. */

/* Add to cart button */
.cl-sp-info .single_add_to_cart_button,
.cl-sp-info .cart .button {
	flex: 1;
	min-width: 160px;
	height: 48px;
	white-space: nowrap;
	background: var(--color-primary);
	color: #fff !important;
	border: none;
	border-radius: 0;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--ease), box-shadow var(--ease), transform 0.15s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* El hover era fondo dorado con texto BLANCO: 2,42:1, o sea que pasar el mouse
   por el botón principal lo hacía menos legible que en reposo. Ahora el texto
   va oscuro sobre el dorado — 7,04:1 — que además es como se comporta el botón
   de Gift Card. Sin el glow, descartado en Preguntas Frecuentes. */
.cl-sp-info .single_add_to_cart_button:hover,
.cl-sp-info .cart .button:hover {
	background: var(--color-gold);
	color: var(--color-primary) !important;
	box-shadow: none;
	transform: translateY(-1px);
}

/* El botón dorado en mobile vive en woocommerce.css, no acá: el selector de
   ese archivo (.woocommerce div.product form.cart …) tiene más especificidad y
   pisaba el fondo. Se dejó allá para que las dos declaraciones del botón estén
   juntas y no vuelvan a competir. */
@media (max-width: 768px) {
	.cl-sp-info .single_add_to_cart_button,
	.cl-sp-info .cart .button {
		color: var(--color-primary) !important;
	}
}

/* Variable product — attribute swatches (label stacked above options) */
.cl-sp-info .variations,
.cl-sp-info .variations tbody,
.cl-sp-info .variations tr {
	display: block !important;
	width: 100%;
}
.cl-sp-info .variations tr.cl-cascade-hidden {
	display: none !important;
}

.cl-sp-info .variations {
	margin-bottom: 0; /* flex gap on .cart handles the spacing */
}

.cl-sp-info .variations td,
.cl-sp-info .variations th {
	display: block !important;
	padding: 0;
	width: 100%;
}

.cl-sp-info .variations .label {
	margin-bottom: 0.625rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.cl-sp-info .variations .value {
	margin-bottom: 1rem;
}

/* Fallback: native select if JS hasn't run */
.cl-sp-info .variations select {
	/* Pre-ocultar antes del primer paint — buildSwatches() en pages.js lo pone en
	   display:none inline de todas formas. Evita el flash del select nativo antes
	   de DOMContentLoaded. Los estilos de abajo son fallback si JS no carga. */
	display: none;
	width: 100%;
	border: 1.5px solid var(--border);
	border-radius: 0;
	padding: 0.6rem 0.875rem;
	min-height: 44px;
	font-size: 0.875rem;
	font-family: inherit;
	background: #fff;
	color: var(--color-primary);
	cursor: pointer;
}

.cl-sp-info .reset_variations {
	display: inline-block;
	margin-top: 0.625rem;
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	text-decoration: underline;
	cursor: pointer;
}

/* Swatch pill buttons */
.cl-var-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.25rem;
}

.cl-var-swatch {
	display: inline-flex;
	align-items: center;
	padding: 0.5625rem 1.25rem;
	min-height: 44px;
	border: 1.5px solid var(--border);
	border-radius: 0;
	font-size: 0.8125rem;
	font-family: inherit;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--color-primary);
	background: var(--bg-light);
	cursor: pointer;
	line-height: 1;
	transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.cl-var-swatch:hover {
	border-color: var(--color-gold);
	background: #fff;
	box-shadow: 0 2px 8px rgba(201, 160, 96, 0.12);
}

.cl-var-swatch.is-selected {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: #fff;
	/* Gold ring — luxury "selected" indicator */
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-gold);
}

/* Swatch sin stock — imagen apagada (oscurecida + desaturada) + dot rojo indicador.
 * IMPORTANTE: el mute va en la IMAGEN, no en el botón, porque un filter en el botón
 * apagaría también al dot rojo (los filtros afectan a los hijos). Así el dot queda
 * vívido. Click NO selecciona la variante; abre form de notify-me. */
.cl-var-swatch:disabled,
.cl-var-swatch.is-unavailable,
.cl-var-swatch.is-disabled {
	cursor: pointer;
	position: relative;
}
.cl-var-swatch:disabled .cl-var-swatch__img,
.cl-var-swatch.is-unavailable .cl-var-swatch__img,
.cl-var-swatch.is-disabled .cl-var-swatch__img {
	opacity: 0.85;
	filter: brightness(0.82) grayscale(0.4);
	transition: filter .15s ease, opacity .15s ease;
}

/* Dot rojo "sin stock" — bordó de la paleta, colocado sobre el BOTÓN (no la
 * imagen filtrada) para mantener el rojo vívido. Ring blanco + sombra suave →
 * se ve bien sobre cualquier color, en mobile y desktop. */
.cl-var-swatch:disabled::after,
.cl-var-swatch.is-unavailable::after,
.cl-var-swatch.is-disabled::after {
	content: '';
	position: absolute;
	top: 5px;
	right: 5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color-bordeaux);
	box-shadow: 0 0 0 2px #fff, 0 1px 2px rgba(0,0,0,.3);
	pointer-events: none;
	z-index: 3;
}

/* Hover en disabled: leve lift del botón + la IMAGEN se oscurece más que los
 * disponibles, para que al interactuar NO parezca disponible. El dot rojo queda. */
.cl-var-swatch.is-disabled:hover,
.cl-var-swatch:disabled:hover,
.cl-var-swatch.is-unavailable:hover {
	transform: translateY(-1px);
}
.cl-var-swatch.is-disabled:hover .cl-var-swatch__img,
.cl-var-swatch:disabled:hover .cl-var-swatch__img,
.cl-var-swatch.is-unavailable:hover .cl-var-swatch__img {
	opacity: 1;
	filter: brightness(0.62) grayscale(0.4);
}

/* Pills de TEXTO sin foto agotados: mismo fondo gris que las swatches OOS CON foto,
   para que se lean como el mismo estado. Ese gris (#d1d1d1) es el blanco del producto
   ya oscurecido por el filter brightness(.82) grayscale(.4) de la foto — muestreado del
   render real. Texto muted legible sobre el gris + el punto rojo (::after) carga la
   señal de "sin stock". No usamos filter/opacity en el botón para no apagar ese dot. */
.cl-var-swatch.is-disabled:not(.cl-var-swatch--img),
.cl-var-swatch:disabled:not(.cl-var-swatch--img),
.cl-var-swatch.is-unavailable:not(.cl-var-swatch--img) {
	color: var(--text-muted);
	background: #d1d1d1;
	border-color: var(--border);
}

/* Form inline de notify-me (aparece debajo de los swatches al cliquear OOS) */
.cl-var-notify {
	margin-top: 1rem;
	padding: 1rem 1.125rem;
	background: var(--bg-parch);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	display: none;
	animation: cl-notify-in 0.25s ease-out;
}
/* "Limpiar" link estilo consistente con .reset_variations de WC (ver pages.css:1281) */
.cl-var-notify__close {
	display: inline-block;
	margin-top: 0.625rem;
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	text-decoration: underline;
	cursor: pointer;
}
.cl-var-notify__close:hover {
	color: var(--color-primary);
}
.cl-var-notify.is-active { display: block; }

@keyframes cl-notify-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.cl-var-notify__title {
	font-family: var(--font-serif);
	font-size: 0.9375rem;
	font-weight: 400;
	margin: 0 0 0.625rem;
	color: var(--color-primary);
	line-height: 1.4;
}
.cl-var-notify__title em {
	font-style: italic;
	color: var(--color-primary);
}

.cl-var-notify__row {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.cl-var-notify__input {
	flex: 1;
	min-width: 180px;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	font-size: 0.875rem;
	font-family: var(--font-sans);
	background: #fff;
	outline: none;
}
.cl-var-notify__input:focus {
	border-color: var(--color-primary);
}
.cl-var-notify__btn {
	padding: 0.625rem 1.25rem;
	background: var(--color-primary);
	color: #fff;
	border: none;
	border-radius: var(--radius-card);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.18s ease;
	white-space: nowrap;
}
.cl-var-notify__btn:hover {
	background: var(--color-blush-dk);
}
.cl-var-notify__btn[disabled] {
	opacity: 0.6;
	cursor: wait;
}
.cl-var-notify__msg {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	color: var(--text-muted);
	line-height: 1.4;
}
.cl-var-notify__msg.is-error { color: #b04848; }
.cl-var-notify.is-success .cl-var-notify__row { display: none; }

/* Image variant swatches */
.cl-var-swatch--img {
	padding: 0;
	width: 64px;
	height: 64px;
	overflow: hidden;
	position: relative;
	flex-shrink: 0;
}
/* Variante sin foto en un row con fotos: mostrarla como pill de texto (nombre
   de la variante), a la misma altura que los swatches de imagen, para que el
   cliente pueda elegirla mientras se completan las fotos del catálogo. */
.cl-var-swatches--img .cl-var-swatch:not(.cl-var-swatch--img) {
	height: 64px;
	padding: 0 1.25rem;
	justify-content: center;
}
.cl-var-swatch--img .cl-var-swatch__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.22s ease;
}
.cl-var-swatch--img:hover .cl-var-swatch__img {
	transform: scale(1.06);
}
.cl-var-swatch--img.is-selected {
	background: transparent;
	color: var(--color-primary);
}
.cl-var-swatch__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Tooltip on swatch hover */
.cl-swatch-tip {
	position: fixed;
	transform: translate(-50%, -100%);
	margin-top: -6px;
	background: rgba(28, 28, 28, 0.85);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1;
	padding: 4px 9px;
	border-radius: var(--radius-card);
	white-space: nowrap;
	pointer-events: none;
	z-index: 9999;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.cl-swatch-tip.is-visible { opacity: 1; }
@media (hover: none) { .cl-swatch-tip { display: none; } }

/* Label showing the currently selected attribute value */
.cl-var-selected-label {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-top: 0.375rem;
	min-height: 1.1em;
}

/* Out-of-stock note */
.cl-sp-info .out-of-stock {
	font-size: 0.875rem;
	color: #8b2635;
	font-weight: 600;
}

/* Grabado note */
.cl-sp-info__note {
	font-size: 0.8125rem;
	color: var(--text-muted);
	margin-top: 0.875rem;
}

/* Micro trust bar — debajo del botón ATC */
/* ── Banner de envío gratis ──────────────────────────────────────────
   Va arriba del botón de comprar porque es el único aviso que cambia la
   decisión: hace sumar otro producto para llegar al monto. El filete dorado a
   la izquierda lo separa sin encerrarlo en una caja. */
.cl-sp-ship-hi {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	padding: 0.8rem 0.875rem;
	margin-bottom: 1rem;
	background-color: var(--bg-parch);
	border-left: 2px solid var(--color-gold);
}

.cl-sp-ship-hi svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; color: var(--color-gold); }
.cl-sp-ship-hi strong { display: block; font-size: 0.84375rem; color: var(--color-primary); }
.cl-sp-ship-hi span   { display: block; font-size: 0.78125rem; color: var(--text-muted); margin-top: 2px; line-height: 1.45; }

/* ── Garantías: título + explicación ─────────────────────────────────
   Antes eran líneas sueltas de una sola frase. "Compra protegida" a secas no
   dice nada; la explicación debajo la vuelve concreta. El filete entre ítems
   los separa sin cajas. */
.cl-sp-trust-bar {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
}

.cl-sp-trust-bar li {
	display: flex;
	align-items: flex-start;
	gap: 0.6875rem;
	padding: 0.6875rem 0;
	border-top: 1px solid var(--border);
}

.cl-sp-trust-bar li:first-child { border-top: 0; }

.cl-sp-trust-bar svg {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--text-muted);
}

.cl-sp-trust-bar strong { display: block; font-size: 0.8125rem; color: var(--color-primary); }
.cl-sp-trust-bar span   { display: block; font-size: 0.78125rem; color: var(--text-muted); line-height: 1.5; margin-top: 1px; }

/* YITH Wishlist button — styled as an elegant ghost link */
.yith-wcwl-add-to-wishlist {
	margin-top: 1.375rem;
	text-align: center;
}

.yith-wcwl-add-to-wishlist .add_to_wishlist,
.yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse a,
.yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse a {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-muted);
	text-decoration: none;
	padding: 0.5rem 1.25rem;
	border: 1px solid #d5cdc8;
	border-radius: var(--radius-card);
	background: transparent;
	transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.yith-wcwl-add-to-wishlist .add_to_wishlist:hover,
.yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse a:hover,
.yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse a:hover {
	border-color: var(--color-bordeaux);
	color: var(--color-bordeaux);
	background: rgba(117, 0, 0, 0.03);
}

.yith-wcwl-add-to-wishlist .yith-wcwl-icon,
.yith-wcwl-add-to-wishlist svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	stroke: currentColor;
	fill: none;
}

/* "¡Producto añadido!" feedback state wrapper */
.yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse,
.yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

/* Feedback text (shown after adding) */
.yith-wcwl-add-to-wishlist .feedback {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-gold);
	font-weight: 600;
}

/* ── Lista de Deseos (wishlist page table) ──────────────────────── */

/* Hide YITH's own title — the WordPress page title is already shown */
.yith-wcwl-wishlist-title,
.yith-wcwl-main > h2:first-child {
	display: none;
}

.wishlist_table {
	width: 100%;
	border-collapse: collapse;
	border: none;
	font-size: 0.875rem;
}

.wishlist_table th {
	text-align: left;
	padding: 0.75rem 1rem;
	font-size: 0.625rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--text-muted);
	border-bottom: 2px solid var(--color-primary);
	white-space: nowrap;
	background: transparent;
}

.wishlist_table tbody tr {
	border-bottom: 1px solid var(--border);
	transition: background 0.15s ease;
}

.wishlist_table tbody tr:hover {
	background: var(--bg-light);
}

.wishlist_table td {
	padding: 1.25rem 1rem;
	vertical-align: middle;
	color: var(--color-primary);
}

/* Image */
.wishlist_table .product-thumbnail {
	width: 88px;
	padding-right: 0;
}

.wishlist_table .product-thumbnail img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--radius-card);
	display: block;
}

/* Product name */
.wishlist_table .product-name a {
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
	transition: color 0.15s ease;
}

.wishlist_table .product-name a:hover {
	color: var(--color-gold);
}

.wishlist_table .product-name .variations {
	display: block;
	font-size: 0.8125rem;
	color: var(--text-muted);
	margin-top: 0.375rem;
	line-height: 1.4;
}

/* Price */
.wishlist_table .product-price {
	white-space: nowrap;
	font-weight: 600;
}

/* Stock status */
.wishlist_table .product-stock-status .in-stock {
	color: #2d8a4e;
	font-size: 0.8125rem;
	font-weight: 600;
}

.wishlist_table .product-stock-status .out-of-stock {
	color: #9a9086;
	font-size: 0.8125rem;
}

/* Remove × column */
.wishlist_table .product-remove {
	width: 36px;
	padding-right: 0;
}

.wishlist_table .product-remove a {
	font-size: 1.125rem;
	line-height: 1;
	color: #ccc;
	text-decoration: none;
	display: block;
	text-align: center;
	transition: color 0.15s ease;
}

.wishlist_table .product-remove a:hover {
	color: var(--color-bordeaux);
}

/* Action column: add-to-cart + remove link */
.wishlist_table .product-add-to-cart {
	text-align: right;
}

.wishlist_table .product-add-to-cart .button,
.wishlist_table .product-add-to-cart .add_to_cart_button,
.wishlist_table .product-add-to-cart .product_type_variable {
	display: inline-block !important;
	width: auto !important;
	min-width: 0 !important;
	padding: 0.5625rem 1.125rem;
	background: var(--color-primary);
	color: #fff !important;
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none !important;
	font-weight: 700;
	border-radius: var(--radius-card);
	border: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.18s ease;
}

.wishlist_table .product-add-to-cart .button:hover,
.wishlist_table .product-add-to-cart .add_to_cart_button:hover,
.wishlist_table .product-add-to-cart .product_type_variable:hover {
	background: var(--color-hover);
	color: #fff !important;
}

.wishlist_table .product-add-to-cart .remove_from_wishlist {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.75rem;
	color: var(--text-muted);
	text-decoration: none;
	letter-spacing: 0.03em;
	transition: color 0.15s ease;
}

.wishlist_table .product-add-to-cart .remove_from_wishlist:hover {
	color: var(--color-bordeaux);
}

/* Horizontal scroll on narrow viewports */
@media (max-width: 600px) {
	.yith-wcwl-main {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.wishlist_table th,
	.wishlist_table td {
		padding: 1rem 0.625rem;
	}
	.wishlist_table .product-thumbnail img {
		width: 56px;
		height: 56px;
	}
}

/* 2d. Descripción larga del producto */
.cl-sp-desc {
	padding: 2rem 0 3.5rem;
	border-top: 1px solid var(--border);
}

.cl-sp-desc .cl-product-description {
	max-width: 100%;
}

/* h3 sin depender del wrapper interior (wrapper ahora viene del template) */
.cl-sp-desc h3 {
	font-family: var(--font-serif);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--color-primary);
	margin: 2rem 0 0.375rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-style: normal;
}

.cl-sp-desc h3:first-of-type {
	margin-top: 0;
}

.cl-sp-desc p {
	font-size: 0.9375rem;
	line-height: 1.78;
	color: #4a4540;
	margin: 0 0 0.875rem;
}

.cl-sp-desc .cl-prod-desc__intro {
	font-family: var(--font-serif);
	font-size: 1.0625rem;
	font-style: italic;
	line-height: 1.72;
	color: var(--color-primary);
	margin-bottom: 2rem !important;
}

.cl-sp-desc .cl-prod-desc__closing {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--text-muted);
	margin-top: 2rem !important;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
}

/* EL USO — bloque destacado: negro con acento dorado (mismo esquema que el box
   de grabado y el botón; #1c1c1c). El h3 y el <p> inmediato siguiente forman una
   tarjeta visual continua: título en dorado, texto en claro. */
.cl-sp-desc h3.cl-prod-desc__uso-title {
	background: var(--bg-dark);
	border-left: 3px solid var(--color-gold);
	color: var(--color-gold);
	padding: 1rem 1.25rem 0.5rem;
	margin-top: 2.5rem;
	margin-bottom: 0;
	border-top-right-radius: var(--radius-card);
}

.cl-sp-desc h3.cl-prod-desc__uso-title + p {
	background: var(--bg-dark);
	border-left: 3px solid var(--color-gold);
	color: rgba(255, 255, 255, .75);
	padding: 0.25rem 1.25rem 1rem;
	border-bottom-right-radius: var(--radius-card);
	margin-bottom: 1.5rem;
}

/* 2c. Características del producto */
/* --bg-mid y no --bg-parch: el parch (#f0ede9) tira a gris y era parte de por
   qué la ficha se leía apagada. El mid (#f5efe6) es el crema cálido que ya usa
   Regalos Corporativos. */
.cl-sp-chars {
	background: var(--bg-mid);
	padding: 2.5rem 0;
	/* 3px de dorado macizo era una barra, no un filete: en el resto del sitio
	   el hilo dorado es de 1px. */
	border-top: 1px solid var(--color-gold);
}

/* Craft eyebrow shown in place of empty rating block */
.cl-sp-info__craft-note {
	margin-bottom: 0.5rem;
}

.cl-sp-chars__title {
	font-family: var(--font-serif);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 400;
	color: var(--color-primary);
	margin: 0 0 1.5rem;
}

.cl-sp-chars__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 0;
	overflow: hidden;
}

@media (min-width: 600px) {
	.cl-sp-chars__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.cl-sp-chars__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cl-sp-char {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.875rem 1.125rem;
	border-bottom: 1px solid var(--border);
	border-right: 1px solid var(--border);
}

.cl-sp-char:last-child {
	border-bottom: none;
}

@media (min-width: 600px) {
	.cl-sp-char:nth-child(2n) { border-right: none; }
	.cl-sp-char:nth-last-child(-n+2) { border-bottom: none; }
}

@media (min-width: 900px) {
	.cl-sp-char:nth-child(2n) { border-right: 1px solid var(--border); }
	.cl-sp-char:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
	.cl-sp-char:nth-child(3n) { border-right: none; }
	.cl-sp-char:nth-last-child(-n+3) { border-bottom: none; }
}

.cl-sp-char__label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.cl-sp-char__value {
	font-family: var(--font-serif);
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--color-primary);
	margin: 0;
}

/* 3. USPs */
/* Franja oscura: corta la sucesión de cremas de la ficha y deja que el dorado
   y el blush hagan de acento, que sobre crema quedaban lavados. Los filetes
   claros de arriba y abajo se van: sobre negro no separan nada, sólo marcan
   una costura. */
.cl-sp-usps {
	background: var(--bg-dark);
	padding: 3.25rem 0;
}

.cl-sp-usps__grid {
	display: grid;
	grid-template-columns: 1fr; /* stacked on mobile, 3-col at 769px+ */
	gap: 2rem;
}

.cl-sp-usp {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 1rem;
}

.cl-sp-usp__icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.875rem;
	background: transparent;
	/* 1px y no 1.5: sobre negro el trazo se ve más grueso de lo que mide. */
	border: 1px solid var(--color-gold);
	border-radius: 50%;
	flex-shrink: 0;
}

.cl-sp-usp__icon svg {
	width: 1.25rem;
	height: 1.25rem;
	stroke: var(--color-gold);
}

.cl-sp-usp__title {
	font-family: var(--font-serif);
	font-size: 1rem;
	font-weight: 400;
	color: var(--color-blush);
	margin: 0 0 0.375rem;
}

.cl-sp-usp__desc {
	font-size: 0.875rem;
	/* Misma convención que el footer (main.css:487) para texto secundario
	   sobre fondo oscuro. --text-muted acá sería ilegible. */
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.5;
	margin: 0;
}

/* 4. About */
.cl-sp-about {
	background: #fff;
	padding: 3.25rem 0;
}

.cl-sp-about__grid {
	display: grid;
	grid-template-columns: 1fr; /* stacked on mobile, 2-col at 769px+ */
	gap: 2rem;
}

.cl-sp-about-panel {
	border: 1px solid #e8e0dc;
	overflow: hidden;
}

.cl-sp-about-panel__img {
	width: 100%;
	height: 280px;
	background-size: cover;
	background-repeat: no-repeat;
}

.cl-sp-about-panel__body {
	padding: 1.75rem 2rem;
}

.cl-sp-about-panel__title {
	font-family: var(--font-serif);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--color-primary);
	margin: 0 0 0.875rem;
	line-height: 1.3;
}

.cl-sp-about-panel__text {
	font-size: 0.875rem;
	line-height: 1.75;
	color: var(--text-muted);
	margin: 0;
}

.cl-sp-about-panel__text strong {
	color: var(--color-primary);
	font-weight: 700;
}

/* 5. Related products */
.cl-sp-related {
	background: var(--bg-section, var(--bg-light));
	padding: 3.25rem 0;
	border-top: 1px solid var(--border);
}

.cl-sp-related__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 2rem;
}

.cl-sp-related__title {
	font-family: var(--font-serif);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--color-primary);
	margin: 0;
}

.cl-sp-related__more {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-primary);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
	transition: opacity 0.2s ease;
}

.cl-sp-related__more:hover { opacity: 0.6; }

.cl-sp-related__grid {
	display: grid;
	grid-template-columns: 1fr; /* stacked on mobile, expand at breakpoints */
	gap: 1.25rem;
}

.cl-sp-rel-card {
	display: block;
	text-decoration: none;
	color: var(--color-primary);
	background: #fff;
	border: 1px solid var(--border);
	transition:
		transform     var(--dur-standard) var(--ease-out-warm, cubic-bezier(0.22,1,0.36,1)),
		border-color  var(--dur-standard) var(--ease-out-warm, cubic-bezier(0.22,1,0.36,1));
	overflow: hidden;
}

.cl-sp-rel-card:hover {
	transform: translateY(-4px);
	border-color: var(--color-blush);
}

.cl-sp-rel-card__thumb {
	overflow: hidden;
	aspect-ratio: 1;
	background: #f5f2ef;
}

.cl-sp-rel-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease, opacity 500ms var(--ease-out-warm, cubic-bezier(0.22,1,0.36,1));
}

.cl-sp-rel-card:hover .cl-sp-rel-card__thumb img { transform: scale(1.05); }

.cl-sp-rel-card__body {
	padding: 1rem 1.125rem;
}

.cl-sp-rel-card__name {
	font-family: var(--font-serif);
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--color-primary);
	margin: 0 0 0.375rem;
	line-height: 1.35;
}

.cl-sp-rel-card__price .woocommerce-Price-amount {
	font-size: 0.9375rem;
	color: var(--color-primary);
}

/* Hide old single-product elements (replaced by new layout) */
.cl-prod-breadcrumb,
.cl-single-product__related { display: none; }

/* Single product — mobile-first responsive */
.cl-sp-info {
	padding: 2rem 1.5rem;
	border-left: none;
	border-top: 1px solid var(--border);
	overflow-x: hidden; /* evita que swatches/table desborden el viewport */
	min-width: 0;       /* permite que la columna del grid se comprima */
}
.cl-sp-gallery .woocommerce-product-gallery {
	flex-direction: column;
}
.cl-sp-gallery .flex-control-nav.flex-control-thumbs {
	width: 100%;
	flex-direction: row;
	order: 1;
	flex-wrap: wrap;
}
.cl-sp-gallery .flex-control-thumbs img {
	width: 72px;
	height: 72px;
}
.cl-sp-gallery .onsale { left: 0.75rem; }

@media (min-width: 481px) {
	.cl-sp-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 600px) {
	/* 3+2 layout: 3 items top row, 2 centered below — via 6-col grid with span-2 */
	.cl-sp-usps__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.cl-sp-usp { grid-column: span 2; }
	.cl-sp-usp:nth-child(4) { grid-column: 2 / span 2; }
}

/* Desde 1000px entran las cinco en una fila y desaparece la fila huérfana.
   Abajo de ese ancho el 3+2 sigue siendo mejor que cinco columnas apretadas. */
@media (min-width: 1000px) {
	.cl-sp-usps__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.cl-sp-usp { grid-column: auto; }
	.cl-sp-usp:nth-child(4) { grid-column: auto; }
}

@media (min-width: 769px) {
	.cl-sp-about__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablet: 2-column layout starts at 768px */
@media (min-width: 768px) {
	.cl-sp-product-grid { grid-template-columns: 55% 45%; overflow-x: visible; }
	.cl-sp-info {
		padding: 1.5rem 1.25rem 1.5rem 2rem;
		border-left: 1px solid var(--border);
		border-top: none;
		overflow-x: hidden;
	}
	/* Switch gallery wrapper to block so jQuery .width() measures the column
	 * width (55% of container) and FlexSlider sizes slides correctly. With
	 * flex-direction:column the flex container width was ambiguous and FlexSlider
	 * sometimes sized slides to 100vw, causing slides to overflow into .cl-sp-info. */
	.cl-sp-gallery .woocommerce-product-gallery { display: block; }
	.cl-sp-gallery .flex-control-thumbs img { width: 72px; height: 72px; }
	.cl-sp-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Desktop: wider split, vertical thumbnails, 4-col related */
@media (min-width: 1025px) {
	.cl-sp-usps__grid {
		max-width: var(--container-max);
		margin-inline: auto;
	}
	.cl-sp-product-grid { grid-template-columns: 58% 42%; }
	.cl-sp-info { padding: 3rem 3rem 3rem 3.5rem; }
	/* FlexSlider maneja la altura del viewport via inline height (1 slide alto). */
	/*
	 * Thumbs a la izquierda via position:absolute + padding-left en el contenedor.
	 * Con flex-direction:row FlexSlider medía el contenedor completo (viewport + thumbs),
	 * haciendo los slides más anchos que .flex-viewport. Con display:block + padding-left,
	 * jQuery .width() en el contenedor devuelve el área de contenido que coincide
	 * exactamente con el ancho de .flex-viewport → slides correctos desde el init.
	 */
	.cl-sp-gallery .woocommerce-product-gallery {
		display: block;
		position: relative;
		padding-left: calc(72px + 0.75rem);
	}
	.cl-sp-gallery .flex-control-nav.flex-control-thumbs {
		position: absolute;
		left: 0;
		top: 0;
		width: 72px;
		flex-direction: column;
		order: unset;
		flex-wrap: nowrap;
		max-height: 100%;
		overflow-y: auto;
	}
	.cl-sp-gallery .flex-control-thumbs img { width: 72px; height: 72px; }
	.cl-sp-gallery .onsale { left: calc(72px + 1.5rem); }
	.cl-sp-related__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Wide screens: product container grows with global container */
@media (min-width: 1920px) {
	.cl-sp-wrap { max-width: var(--container-max); }
}

@media (min-width: 2560px) {
	.cl-sp-wrap { max-width: var(--container-max); }
	.cl-hero__copy { max-width: 1100px; }
}

@media (min-width: 3840px) {
	.cl-sp-wrap { max-width: var(--container-max); }
	.cl-hero__copy { max-width: 1400px; }
}

/* -- Pagina Contacto -- */

/* --- 1. HERO --- */
/* El hero era la ÚNICA sección de la página sin contenedor: `display:grid` de
   1fr 1fr sobre todo el ancho de la ventana. A 1920px eso daba dos columnas de
   960 con el título arrancando en x=56 y los datos en x=976, mientras la barra
   de horarios de acá abajo —que sí usa --container-max— arranca en x=80. Nada
   alineaba con nada, y cada mitad quedaba con cientos de píxeles de aire.

   Ahora el fondo sigue siendo a sangre (es una banda oscura, tiene que tocar
   los bordes) pero el CONTENIDO va dentro del mismo contenedor que el resto. */
.cl-ct-hero {
	background: var(--color-primary);
}

.cl-ct-hero__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: clamp(2.5rem, 6vw, 4.5rem) var(--container-pad);
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
}

.cl-ct-hero__left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.cl-ct-hero__eyebrow {
	margin-bottom: 12px;
}

.cl-ct-hero__title {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: var(--fs-title);
	line-height: 1.1;
	color: #fff;
	margin-bottom: 14px;
}

.cl-ct-hero__title em,
.cl-ubi-hero__title em {
	/* El remate en cursiva va en blush, igual que en los otros siete heroes del
	   sitio. Contacto lo tenía en gris y Ubicación en blanco —su h1 ni siquiera
	   tenía clase—, así que eran los dos únicos que se salían del patrón.

	   Blush y no dorado a propósito: el dorado quedó reservado para comercio e
	   interacción (botones, ítem activo del nav, badge del carrito). Si aparece
	   también en los títulos deja de significar "esto se toca". */
	font-style: italic;
	color: var(--color-blush);
}

.cl-ct-hero__desc {
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--on-dark-soft);
	line-height: 1.8;
	max-width: 38ch;
	margin-bottom: 0;
}

/* El WhatsApp deja de ser una fila más de la lista y pasa a ser lo único que se
   toca en la mitad izquierda. Es una ACCIÓN, no un dato: tipografiarlo igual
   que la dirección lo escondía entre datos que no se tocan.

   Lleva el logo adentro, y no es decoración: sin él el botón decía "Iniciá una
   conversación" y no había forma de saber que abría WhatsApp y no un chat del
   sitio. Lo notó Pato. .cl-btn ya es inline-flex con gap .5rem, así que el
   ícono se acomoda solo; lo único que falta es el tamaño, porque el <svg> del
   array viene sin width/height (se los daba el CSS del círculo de la lista). */
.cl-ct-hero__wa {
	margin-top: 28px;
}

.cl-ct-hero__wa svg {
	width: 1.0625rem;
	height: 1.0625rem;
	fill: currentColor;
	flex-shrink: 0;
}

/* ── Los datos ──────────────────────────────────────────────────────
   El separador vertical se fue: era rgba(255,255,255,0.07) —invisible en
   pantalla— y aun así se cobraba 40px de padding. */
.cl-ct-info-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0;
}

.cl-ct-info-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid rgba(255,255,255,0.10);
}

.cl-ct-info-item:last-child { border-bottom: none; }

.cl-ct-info-icon {
	width: 2.625rem;
	height: 2.625rem;
	background: rgba(201,160,96,0.09);
	border: 1px solid rgba(201,160,96,0.32);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cl-ct-info-icon svg {
	width: 1.125rem;
	height: 1.125rem;
	stroke: var(--color-gold);
}

/* El logo de WhatsApp es un glifo SÓLIDO, no un icono de línea como los otros
   tres. Con la regla de arriba le quedaba el relleno oscuro (currentColor
   resolvía a #1c1c1c, negro sobre negro) y sólo el contorno en gold: se veían
   el borde del círculo y el del teléfono de adentro, apretados y empastados.

   Se pinta con fill y sin stroke, que es como ya lo hace el mismo path en
   template-parts/components/wa-cta.php. El selector engancha por el atributo
   fill="currentColor" del <svg>, que es justamente lo que distingue a un glifo
   sólido de un icono de línea en esta lista. */
.cl-ct-info-icon svg[fill="currentColor"] {
	fill: var(--color-gold);
	stroke: none;
	width: 1rem;
	height: 1rem;
}

/* La etiqueta estaba en rgba(255,255,255,0.25) a 9px: medido sobre #1c1c1c da
   2.28:1, cuando WCAG AA pide 4.5:1 para texto chico. Era el peor contraste de
   todo el sitio. A 0.5 da 5.2:1, y un píxel más de cuerpo. */
.cl-ct-info-label {
	font-family: var(--font-sans);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.5);
	margin-bottom: 3px;
}

/* El valor es lo único que la gente vino a buscar. Estaba en 13px contra un
   título de 52px — cuatro veces más grande la palabra "Contacto" que la
   dirección del local. */
.cl-ct-info-val a {
	font-family: var(--font-sans);
	font-size: 15px;
	color: #fff;
	text-decoration: none;
	transition: color 0.2s var(--ease);
}

.cl-ct-info-val a:hover { color: var(--color-blush); }

/* --- 2. HORARIOS --- */
.cl-ct-hours-bar {
	background: var(--bg-mid);
}

.cl-ct-hours-inner {
	display: grid;
	grid-template-columns: 1fr; /* label stacks above cols on mobile */
	gap: 1rem;
	align-items: center;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 1.25rem var(--container-pad);
}

/* El rótulo y el indicador se apilan en su propia columna, a la izquierda de
   los tres bloques de horario. En mobile la barra ya es de una columna, así que
   esto no cambia nada ahí. */
.cl-ct-hours-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}

.cl-ct-hours-head .cl-ubi-live {
	margin-top: 0;
}

.cl-ct-hours-label {
	font-family: var(--font-sans);
	font-size: 9px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--text-muted);
	white-space: nowrap;
}

.cl-ct-hours-cols {
	display: grid;
	grid-template-columns: 1fr; /* stacked on mobile; 3-col at 600px+ */
	gap: 0.75rem;
}

/* En mobile los tres bloques se apilan (grid de 1 columna, más arriba), así que
   acá NO va ni sangría ni separador: el padding-left y el border-right son el
   tratamiento de la fila de 3 columnas y se agregan en el @media de 600px.
   Cuando estaban en la regla base, Sábados y Domingos quedaban 24 px corridos a
   la derecha de Lunes a Viernes, y el borde derecho dejaba una rayita suelta. */
.cl-ct-hours-col {
	padding: 0;
}

.cl-ct-hours-col__name {
	font-family: var(--font-sans);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 3px;
}

.cl-ct-hours-col__time {
	font-family: var(--font-serif);
	font-size: 17px;
	font-weight: 400;
	color: var(--color-primary);
}

.cl-ct-hours-col--closed .cl-ct-hours-col__time {
	font-style: italic;
	opacity: 0.5;
}

/* Feriados note */
.cl-ct-feriados {
	background: var(--bg-mid);
	padding: 10px 56px 20px;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.cl-ct-feriados__icon { flex-shrink: 0; display: flex; align-items: center; opacity: 0.55; }

.cl-ct-feriados__text {
	display: block;
	background: #fff;
	border: 0.5px solid #ede8e2;
	border-left: 2px solid var(--color-blush);
	padding: 10px 16px;
	border-radius: 0 var(--radius-card) var(--radius-card) 0;
	font-family: var(--font-sans);
	font-size: 12px;
	color: var(--text-muted);
	line-height: 1.5;
}

.cl-ct-feriados__text a {
	color: var(--color-primary);
	font-weight: 400;
	text-decoration: none;
}

/* --- 3. MAIN --- */
.cl-ct-main {
	background: var(--bg-light);
	padding: var(--space-section-sm) clamp(1.25rem, 5vw, 4rem);
}

.cl-ct-main-inner {
	display: grid;
	grid-template-columns: 1fr; /* stacked on mobile */
	gap: 0;
	max-width: var(--container-form);
	margin: 0 auto;
	align-items: stretch;
	box-shadow: 0 4px 40px rgba(28,28,28,0.12);
	overflow: hidden;
}

/* Aside oscuro — igual a .cl-jobs-form-sidebar */
.cl-ct-aside {
	position: relative;
	background: var(--color-primary);
	padding: 3rem 2.5rem;
	overflow: hidden;
}

.cl-ct-aside > * { position: relative; z-index: 1; }

/* cl-eyebrow base + --rule + --gold handle font/color/line;
   only the margin and dark-bg opacity override remain */
.cl-ct-aside-eyebrow {
	margin-bottom: 8px;
	/* Dorado, como todos los eyebrows sobre fondo oscuro. Iba en blush al 70%,
	   que además de salirse del patrón bajaba el contraste a 8:1 sin motivo:
	   es un rótulo, no un texto secundario. */
	color: var(--color-gold);
}

.cl-ct-aside-title {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: var(--fs-section-sm);
	line-height: 1.2;
	color: #fff;
	margin-bottom: 10px;
}

.cl-ct-aside-desc {
	font-family: var(--font-sans);
	font-size: 13px;
	color: rgba(255,255,255,0.55);
	line-height: 1.8;
	margin-bottom: 24px;
}

/* Contact cards sobre fondo oscuro */
.cl-ct-clist {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 1.75rem;
}

.cl-ct-ccard {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.0625rem 0;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	text-decoration: none;
	transition: opacity 0.18s ease;
}

.cl-ct-ccard:first-child {
	border-top: 1px solid rgba(255,255,255,0.1);
}

.cl-ct-ccard:hover { opacity: 0.65; }

.cl-ct-ccard__icon {
	width: 2.875rem;
	height: 2.875rem;
	background: rgba(201,160,96,0.1);
	border: 1px solid rgba(201,160,96,0.28);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cl-ct-ccard__icon svg {
	width: 1.25rem;
	height: 1.25rem;
	stroke: var(--color-gold);
}

.cl-ct-ccard__label {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.4);
	margin-bottom: 0.125rem;
}

.cl-ct-ccard__val {
	font-size: 0.875rem;
	font-weight: 500;
	color: #fff;
}

/* Panel del formulario — fondo blanco */
.cl-ct-form-wrap {
	background: #fff;
	overflow: hidden;
}

.cl-ct-form-header {
	background: #fff;
	padding: 2.5rem 2.5rem 1.5rem;
	border-bottom: 1px solid rgba(28,28,28,0.08);
}

.cl-ct-form-header__bar {
	width: 2.5rem;
	height: 2px;
	background: var(--color-gold);
	margin-bottom: 1rem;
}

.cl-ct-form-header__title {
	font-family: var(--font-serif);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--color-primary);
	margin: 0;
}

.cl-ct-form-header__sub {
	font-size: 0.8125rem;
	color: var(--text-muted);
	margin: 0.375rem 0 0;
}

.cl-ct-form-body {
	padding: 2.5rem;
}

/* CF7 overrides — line-bottom inputs (mismo lenguaje que footer newsletter).
 * NOTA: el shortcode CF7 actualmente tiene labels en UPPERCASE literal
 * ("NOMBRE", "TELÉFONO"). Como ya vienen en mayúsculas desde CF7, NO aplicamos
 * text-transform aquí (sería redundante). Si en algún momento cambian a
 * mixed-case desde WP Admin, esta CSS no rompe nada. */

/* Reset margen del <p> wrapper que CF7 inyecta auto en cada campo */
.cl-ct-form-body .wpcf7-form p {
	margin: 0 0 1.375rem 0;
}

.cl-ct-form-body .wpcf7-form label,
.cl-ct-form-body .wpcf7-form .cf7-form-label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps-lg);
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 0.5rem;
	line-height: 1.4;
}

.cl-ct-form-body .wpcf7-form input[type="text"],
.cl-ct-form-body .wpcf7-form input[type="email"],
.cl-ct-form-body .wpcf7-form input[type="tel"],
.cl-ct-form-body .wpcf7-form textarea {
	display: block;
	width: 100%;
	border: none;
	border-bottom: 1.5px solid var(--border);
	border-radius: 0;
	padding: 0.75rem 0;
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-primary);
	background: transparent;
	outline: none;
	box-shadow: none;
	transition: border-color 0.2s ease;
	margin: 0; /* spacing controlado por el <p> wrapper */
}

.cl-ct-form-body .wpcf7-form input::placeholder,
.cl-ct-form-body .wpcf7-form textarea::placeholder {
	color: var(--text-muted);
	opacity: 0.7;
}

/* El foco va en --color-primary y no en blush: es la ÚNICA señal de foco que
   tienen estos campos (las reglas ponen outline: none), y el blush da 1.07:1
   contra el filete en reposo, o sea que el campo enfocado se ve igual que el
   que no lo está. El negro da 12.09:1. WCAG 1.4.11 pide 3:1 para el indicador
   de estado de un control. */
.cl-ct-form-body .wpcf7-form input:focus,
.cl-ct-form-body .wpcf7-form textarea:focus {
	border-color: var(--color-primary);
}

.cl-ct-form-body .wpcf7-form textarea {
	min-height: 110px;
	resize: vertical;
}

.cl-ct-form-body .wpcf7-form input[type="submit"],
/* Sólo maquetación: el aspecto lo pone .cl-btn (main.css). Antes esta regla
   copiaba el botón entero, y con border-radius: var(--radius-card) era el ÚNICO
   botón redondeado de los 14 del sitio. */
.cl-ct-form-body .wpcf7-submit {
	min-width: 200px;
	margin-top: 0.75rem;
}

/* Dorado con texto oscuro: 7.04:1, y es el hover que ya define .cl-btn--primary
   en main.css. Antes cada formulario hacía otra cosa —blush oscuro acá, #2d2520
   en corporativos (que contra #1c1c1c es el mismo negro), y sólo opacity 0.82
   en trabajá y arrepentimiento, o sea nada visible—. */
.cl-ct-form-body .wpcf7-form input[type="submit"]:hover,
.cl-ct-form-body .wpcf7-form input[type="submit"]:focus-visible {
	background: var(--color-gold);
	color: var(--color-primary);
}
.cl-ct-form-body .wpcf7-form input[type="submit"]:active {
	transform: translateY(1px);
}

/* CF7 — estados de validación y respuesta */
.cl-ct-form-body .wpcf7-form input.wpcf7-not-valid,
.cl-ct-form-body .wpcf7-form textarea.wpcf7-not-valid {
	border-bottom-color: var(--color-error);
}

.cl-ct-form-body .wpcf7-not-valid-tip {
	display: block;
	font-size: 0.7rem;
	color: var(--color-error);
	margin-top: 0.3rem;
	font-family: var(--font-sans);
}

.cl-ct-form-body .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: var(--radius-card);
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	line-height: 1.5;
	border: none;
}

/* Envío exitoso */
.cl-ct-form-body .wpcf7-mail-sent-ok {
	background: #f0f7f0;
	border-left: 3px solid #388e3c;
	color: #2e7d32;
}

/* Error de envío / campos inválidos */
.cl-ct-form-body .wpcf7-mail-sent-ng,
.cl-ct-form-body .wpcf7-validation-errors,
.cl-ct-form-body .wpcf7-acceptance-missing {
	background: #fdf2f2;
	border-left: 3px solid var(--color-error);
	color: #922b21;
}

/* Mobile: submit btn full-width para mejor touch target */
@media (max-width: 600px) {
	.cl-ct-form-body .wpcf7-form input[type="submit"],
	.cl-ct-form-body .wpcf7-submit {
		width: 100%;
		min-width: 0;
	}
}

/* --- 4. SOCIAL BAR --- */
/* --- 4. CTA TIENDA --- */
.cl-ct-shop-strip {
	background: var(--color-primary);
	padding: 3rem 0;
	border-top: 3px solid var(--color-blush);
}

.cl-ct-shop-strip .cl-container { text-align: center; }
.cl-ct-shop-strip .cl-eyebrow--rule { margin-bottom: 0.75rem; }

.cl-ct-shop-strip__lead {
	font-family: var(--font-sans);
	font-size: 13px;
	color: rgba(255,255,255,0.55);
	line-height: 1.75;
	max-width: 48ch;
	margin: 0.75rem auto 1.75rem;
}

/* --- RESPONSIVE (mobile-first) --- */
/* base (mobile) styles for contacto are inline above */
@media (min-width: 600px) {
	/* Hours: 3 cols once there's room. Recién acá van en fila, así que recién acá
	   tienen sentido la sangría entre columnas y el separador vertical. */
	.cl-ct-hours-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
	.cl-ct-hours-col { padding: 0 24px 0 0; border-right: 0.5px solid #ede8e2; }
	.cl-ct-hours-col:not(:first-child) { padding-left: 24px; }
	.cl-ct-hours-col:last-child { border-right: none; }
}

@media (max-width: 768px) {
	/* En mobile el botón de WhatsApp ocupa el ancho, como el resto de los CTAs */
	.cl-ct-hero__wa { width: 100%; text-align: center; }
}

@media (min-width: 769px) {
	/* `auto` y no una fracción: con 1.05fr la columna de datos se estiraba a
	   880px y el filete de cada fila cruzaba 400px de vacío hasta el borde.
	   Ahora la lista mide lo que necesita y el filete termina con el texto. */
	.cl-ct-hero__inner {
		grid-template-columns: 1fr auto;
		align-items: center;
	}
	.cl-ct-info-list { width: 30rem; }
	.cl-ct-hours-inner {
		grid-template-columns: auto 1fr;
		gap: 40px;
		padding: 24px 32px;
	}
	.cl-ct-main { padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 5vw, 4rem); }
	/* Misma repartición que la tarjeta de Trabajá con nosotros: son dos páginas
	   hermanas y antes daban 458+642 contra 380+720, o sea formularios de 562 y
	   624px. Con 420+680 y el mismo relleno, los dos formularios miden 600. */
	.cl-ct-main-inner { grid-template-columns: 420px 1fr; gap: 0; }
	.cl-ct-feriados { padding: 10px 32px 20px; flex-direction: row; }
}

@media (min-width: 1025px) {
	.cl-ct-hours-inner { padding: 40px 56px; }
	.cl-ct-main { padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 5vw, 4rem); }
	.cl-ct-feriados { padding: 10px 56px 20px; }
}


/* ── Gift Cards ── */
.cl-gc {
	overflow-x: hidden;
}

/* 1. HERO */
.cl-gc-hero-section {
	background: var(--color-primary);
	padding: var(--space-section-sm) 0;
	color: #fff;
	overflow-x: hidden;
}

.cl-gc-hero-inner {
	max-width: 680px;
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 4vw, 3rem);
	display: grid;
	grid-template-columns: 1fr; /* stacked on mobile */
	gap: 4rem;
	align-items: center;
}

.cl-gc-hero-left {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.cl-gc-hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	/* Dorado y no blush: el eyebrow sobre fondo oscuro va en dorado en todo el
	   sitio (ver .cl-eyebrow--gold en main.css). Esta regla lo fijaba por su
	   cuenta y se salteaba el modificador. */
	color: var(--color-gold);
	margin: 0 0 1.25rem;
}

.cl-gc-hero-eyebrow__rule {
	display: inline-block;
	width: 36px;
	height: 1px;
	/* El filete acompaña al texto del eyebrow, que ahora es dorado. */
	background: var(--color-gold);
	opacity: 0.6;
}

.cl-gc-hero-title {
	font-family: var(--font-serif);
	font-size: var(--fs-hero);
	font-weight: 400;
	line-height: 1.12;
	color: #fff;
	margin: 0 0 1.5rem;
	letter-spacing: -0.01em;
}

.cl-gc-hero-title em {
	font-style: italic;
	color: var(--color-blush);
}

.cl-gc-hero-desc {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--on-dark-soft);
	max-width: 520px;
	margin-bottom: 2.25rem;
}

/* Gift Card Visual */
.cl-gc-hero-right {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 0;
}

.cl-gc-card {
	position: relative;
	width: min(320px, 88vw);
	height: min(200px, calc(88vw * 0.625));
	/* Un punto más clara que la sección, que también es #1c1c1c: si no, la
	   tarjeta desaparece y sólo se ve el marco flotando. Las otras dos van
	   sobre fondo claro y no necesitan esto. */
	background: #252220;
	border: 11px solid var(--color-gold);
	border-radius: 16px;
	padding: 1.15rem 1.35rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.25);
	transform: rotate(-4deg);
	color: var(--text-white);
	overflow: hidden;
}

.cl-gc-card__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.cl-gc-card__brand {
	font-family: var(--font-serif);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--text-white);
}

.cl-gc-card__brand small {
	font-size: 0.6rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.7;
}

.cl-gc-card__footer {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cl-gc-card__name {
	font-family: var(--font-serif);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--text-white);
}

.cl-gc-card__sub {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-gold);
}

/* 2. AMOUNTS SECTION */
.cl-gc-amounts-section {
	background: var(--bg-section);
	padding: var(--space-section-sm) 0;
	overflow-x: hidden;
}

.cl-gc-section-head {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 4vw, 3rem);
	text-align: left;
	margin-bottom: 3rem;
}

/* El blush es un color DE FONDO OSCURO: sobre negro da 11.3:1, pero sobre los
   cremas del sitio queda en 1.4:1 y el eyebrow directamente no se lee. De las
   cuatro secciones de esta página, tres son claras y una oscura, y todas usan
   la misma clase — así que el default va en muted y la oscura lo pisa. */
.cl-gc-eyebrow {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 0.75rem;
}

.cl-gc-steps-section .cl-gc-eyebrow {
	/* Dorado y no blush: el eyebrow sobre fondo oscuro va en dorado en todo el
	   sitio (ver .cl-eyebrow--gold en main.css). Esta regla lo fijaba por su
	   cuenta y se salteaba el modificador. */
	color: var(--color-gold);
}

.cl-gc-section-title {
	font-family: var(--font-serif);
	font-size: var(--fs-section);
	font-weight: 400;
	color: var(--color-primary);
	margin: 0;
	line-height: 1.2;
}

.cl-gc-amounts-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	padding-top: 14px; /* espacio para badge que sobresale del card */
}

.cl-gc-amount-link {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: 1.25rem 0.5rem 1rem;
	border: 1.5px solid var(--border);
	border-radius: var(--radius-card);
	background: #fff;
	text-decoration: none;
	color: var(--color-primary);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	text-align: center;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
}

.cl-gc-amount-link:hover {
	border-color: var(--color-blush);
	box-shadow: 0 8px 28px rgba(235,204,194,.28);
	transform: translateY(-3px);
}

.cl-gc-amount-link--featured {
	border-color: var(--color-blush);
	background: linear-gradient(160deg, #fff 60%, #fdf0ec 100%);
}

.cl-gc-amount-link__badge {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	padding: 2px 10px;
	background: var(--color-blush);
	color: var(--color-primary);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	border-radius: 20px;
	white-space: nowrap;
}

.cl-gc-amount-link__val {
	font-family: var(--font-serif);
	font-size: clamp(1.125rem, 4.5vw, 1.875rem);
	font-weight: 700;
	color: var(--color-primary);
	line-height: 1;
	word-break: break-all;
}

.cl-gc-amount-link__desc {
	font-size: 0.75rem;
	color: var(--text-muted);
	letter-spacing: 0.04em;
}

.cl-gc-amounts-note {
	max-width: var(--container-max);
	margin: 2rem auto 0;
	padding: 0 clamp(1.5rem, 4vw, 3rem);
	font-size: 0.8125rem;
	color: var(--text-muted);
	text-align: center;
}

.cl-gc-amounts-note a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 3. CÓMO FUNCIONA */
.cl-gc-steps-section {
	background: var(--bg-dark);
	padding: var(--space-section-sm) 0;
}

.cl-gc-steps-section .cl-gc-section-title {
	color: var(--text-white);
}

.cl-gc-steps-grid {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 4vw, 3rem);
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}

.cl-gc-step {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
}

.cl-gc-step__num {
	flex-shrink: 0;
	color: var(--color-gold);
	font-family: var(--font-serif);
	font-size: 1.5rem;
	font-style: italic;
	line-height: 1;
	margin-top: 3px;
	min-width: 2rem;
}

.cl-gc-step__title {
	font-family: var(--font-serif);
	font-size: 1.1rem;
	font-weight: 400;
	color: var(--color-blush);
	margin: 0 0 0.5rem;
}

.cl-gc-step__desc {
	font-size: 0.875rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
}

/* 4. DETALLES */
.cl-gc-details-section {
	background: var(--bg-section);
	padding: var(--space-section-sm) 0;
}

.cl-gc-details-grid {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 4vw, 3rem);
	display: grid;
	grid-template-columns: 1fr; /* stacked on mobile */
	gap: 1.5rem;
}

.cl-gc-detail-card {
	padding: 2rem 1.5rem;
	background: #fff;
	border-radius: var(--radius-card);
	border: 1.5px solid var(--border);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.cl-gc-detail-card:hover {
	border-color: var(--color-blush);
	box-shadow: 0 6px 24px rgba(235,204,194,.22);
}

.cl-gc-detail-card__icon {
	display: block;
	font-size: 1.75rem;
	margin-bottom: 1rem;
}

.cl-gc-detail-card__title {
	font-family: var(--font-serif);
	font-size: 1rem;
	font-weight: 400;
	color: var(--color-primary);
	margin: 0 0 0.5rem;
}

.cl-gc-detail-card__desc {
	font-size: 0.8125rem;
	line-height: 1.65;
	color: var(--text-muted);
	margin: 0;
}

/* 5. FAQ */
.cl-gc-faq-section {
	background: #fff;
	padding: var(--space-section-sm) 0;
}

.cl-gc-faq-grid {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 4vw, 3rem);
	display: grid;
	grid-template-columns: 1fr; /* stacked on mobile */
	gap: 1.5rem 3rem;
}

.cl-gc-faq-item {
	padding: 1.5rem 0;
	border-bottom: 1px solid #ede7e3;
}

.cl-gc-faq-item__q {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	font-family: var(--font-serif);
	font-size: 1rem;
	font-weight: 400;
	color: var(--color-primary);
	margin: 0 0 0.75rem;
	line-height: 1.4;
}

.cl-gc-faq-item__bar {
	flexshrink: 0;
	flex-shrink: 0;
	display: inline-block;
	width: 3px;
	height: 18px;
	background: var(--color-blush);
	border-radius: var(--radius-card);
	margin-top: 3px;
}

.cl-gc-faq-item__a {
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--text-muted);
	margin: 0;
	padding-left: calc(0.875rem + 3px);
}

/* 6. CTA FINAL */
.cl-gc-cta-section {
	background: var(--color-primary);
	padding: var(--space-section) clamp(1.5rem, 4vw, 3rem);
	text-align: left;
	color: #fff;
}

.cl-gc-cta-eyebrow {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-blush);
	margin-bottom: 1rem;
}

.cl-gc-cta-title {
	font-family: var(--font-serif);
	font-size: var(--fs-section-lg);
	font-weight: 400;
	color: #fff;
	margin: 0 0 2.25rem;
	line-height: 1.2;
}

.cl-gc-cta-title em {
	font-style: italic;
	color: var(--color-blush);
}

/* Gift cards — mobile-first responsive */
.cl-gc-hero-right { display: none; }

@media (min-width: 769px) {
	.cl-gc-steps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cl-gc-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cl-gc-amounts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
	.cl-gc-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1025px) {
	.cl-gc-hero-inner {
		grid-template-columns: 1fr 420px;
		max-width: var(--container-max);
	}
	.cl-gc-hero-right { display: block; }
	.cl-gc-hero-left { align-items: flex-start; text-align: left; }
	.cl-gc-amounts-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.25rem;
	}
	.cl-gc-amount-link { padding: 2rem 1.5rem 1.75rem; }
	.cl-gc-details-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}



/* Drop zone CV */
.cl-drop-zone {
	position: relative;
	border: 2px dashed var(--border);
	border-radius: var(--radius-card);
	padding: 2.5rem;
	text-align: center;
	cursor: pointer;
	transition: border-color var(--ease), background var(--ease);
}

.cl-drop-zone:hover,
.cl-drop-zone.is-over {
	border-color: var(--color-blush);
	background-color: rgba(235,204,194,0.06);
}

.cl-drop-zone__input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	width: 100%;
	height: 100%;
}

.cl-drop-zone__icon {
	font-size: 2rem;
	display: block;
	margin-bottom: 0.75rem;
}

.cl-drop-zone__text {
	font-weight: 700;
	margin-bottom: 0.25rem;
}

.cl-drop-zone__sub {
	font-size: 0.8125rem;
	color: var(--text-muted);
}

.cl-drop-zone__name {
	font-weight: 700;
	color: var(--color-sage);
	margin-top: 0.5rem;
}


/* ═══════════════════════════════════════════════════════════════
   REGALOS CORPORATIVOS — cl-corp
   ═══════════════════════════════════════════════════════════════ */

/* Shared section helpers — cl-eyebrow base + --rule handle font/line */
.cl-corp-section-ey {
	margin-bottom: 10px;
}

.cl-corp-section-title {
	font-family: var(--font-serif);
	font-size: var(--fs-section-lg);
	font-weight: 400;
	color: var(--color-primary);
	line-height: 1.15;
	text-align: left;
}

.cl-corp-section-title em { font-style: italic; }
.cl-corp-section-title--left { text-align: left; }

/* --- 1. HERO --- */
.cl-corp-hero-section {
	background: var(--color-primary);
	overflow: hidden;
}

.cl-corp-hero-inner {
	display: grid;
	grid-template-columns: 1fr; /* stacked on mobile */
	min-height: auto;
}

.cl-corp-hero-copy {
	padding: clamp(3rem, 7vw, 5rem) clamp(2rem, 6vw, 5rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* cl-eyebrow base + --rule + --gold handle font/color/line */
.cl-corp-eyebrow {
	margin-bottom: 18px;
}

.cl-corp-title {
	font-family: var(--font-serif);
	font-size: var(--fs-hero);
	font-weight: 400;
	line-height: 1.05;
	color: #fff;
	margin-bottom: 20px;
}

.cl-corp-title em {
	font-style: italic;
	color: var(--color-blush);
	display: block;
}

.cl-corp-sub {
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--on-dark-soft);
	line-height: 1.9;
	max-width: 46ch;
}

/* ── Pares de botones del mismo ancho ────────────────────────────────
   Todos los grupos de dos CTAs del sitio, con una sola definición.

   Medidos los 26 grupos de botones que hay en el sitio: siete quedaban con
   anchos distintos entre sí, y el peor —el de "¿No encontrás tu número de
   envío?"— daba 140 y 280 px, o sea el doble. Cada uno era un flex propio
   repetido con pequeñas variantes en seis archivos, y dos ni siquiera tenían
   clase: iban con `style="display:flex..."` escrito en el HTML.

   Grid y no flex: `grid-auto-columns: 1fr` dentro de un contenedor
   `width: fit-content` reparte columnas iguales, y el fr se resuelve al ancho
   del botón más largo. Con flex no se puede, porque .cl-btn tiene
   white-space:nowrap y ninguno se deja achicar por debajo de su texto — un
   flex:1 sólo estira al más corto hasta que empatan por casualidad. */
.cl-btn-duo,
.cl-corp-btns,
.cl-rastreo-help__actions,
.cl-rastreo-cta__actions,
.cl-care-cta__btns,
.cl-carp-cta__btns {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	width: fit-content;
	gap: 1rem;
	/* Estaban centrados con justify-content:center; al pasar a fit-content el
	   centrado tiene que venir del margen. */
	margin-inline: auto;
}

.cl-corp-btns             { gap: 12px; margin-top: 28px; margin-inline: 0; }
.cl-rastreo-help__actions { gap: 0.75rem; margin-bottom: 1.5rem; }
.cl-rastreo-cta__actions  { margin-top: 1.5rem; }

/* En teléfono se apilan, y el ancho lo fija el contenedor para que sigan
   empatados. El tope de 320px es el mismo criterio que el hero de la home:
   un botón a todo el ancho de la pantalla se lee como una barra, no como
   un botón. */
@media (max-width: 640px) {
	.cl-btn-duo,
	.cl-corp-btns,
	.cl-rastreo-help__actions,
	.cl-rastreo-cta__actions,
	.cl-care-cta__btns,
	.cl-carp-cta__btns {
		grid-auto-flow: row;
		width: 100%;
		max-width: 320px;
	}
}

.cl-corp-stats {
	display: flex;
	gap: 0;
	border-top: 1px solid rgba(255,255,255,0.15);
	padding-top: 24px;
	margin-top: 48px;
}

.cl-cs-item {
	flex: 1;
	padding-right: 18px;
	border-right: 1px solid rgba(255,255,255,0.15);
}

.cl-cs-item:first-child { padding-left: 0; }
.cl-cs-item:not(:first-child) { padding-left: 18px; }
.cl-cs-item:last-child { border-right: none; padding-right: 0; }

.cl-cs-n {
	font-family: var(--font-serif);
	font-size: 1.7rem;
	font-weight: 400;
	color: #fff;
	display: block;
	line-height: 1;
}

.cl-cs-l {
	font-family: var(--font-sans);
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.5);
	display: block;
	margin-top: 4px;
}

.cl-corp-hero-media {
	position: relative;
	background: var(--bg-mid);
	overflow: hidden;
}

.cl-corp-hero-media__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 40%;
	display: block;
}

.cl-corp-engraving {
	background: #fff;
	border-top: 1px solid #ede8e2;
	padding: 16px 24px;
	display: flex;
	align-items: center;
	gap: 12px;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

.cl-eng-icon {
	width: 34px;
	height: 34px;
	background: var(--color-primary);
	border: 1px solid rgba(201,160,96,0.35);
	border-radius: var(--radius-card);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cl-eng-icon svg {
	stroke: var(--color-gold);
}

.cl-eng-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.cl-eng-title {
	font-family: var(--font-sans);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--color-primary);
	display: block;
}

.cl-eng-sub {
	font-family: var(--font-sans);
	font-size: 11px;
	color: var(--text-muted);
	display: block;
}

.cl-eng-badge {
	background: var(--color-blush);
	color: #7a3a26;
	font-family: var(--font-sans);
	font-size: 9px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	margin-left: auto;
	white-space: nowrap;
	flex-shrink: 0;
}

/* --- TICKER --- */
.cl-corp-ticker {
	background: var(--color-gold);
	overflow: hidden;
	padding: 10px 0;
	border-top: 1px solid var(--color-gold-hover);
	border-bottom: 1px solid var(--color-gold-hover);
}

.cl-corp-ticker-track {
	display: flex;
	/* 105s y no 35s: la pista pasó de 2 repeticiones a 6, y la velocidad es
	   media_pista/duración. Con 35s el ticker corría tres veces más rápido.
	   1302px/35s = 37px/s → 3905px/105s = 37px/s, misma velocidad de antes. */
	animation: cl-corp-ticker 105s linear infinite;
	width: max-content;
	will-change: transform;
}

@keyframes cl-corp-ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.cl-corp-ticker-track { animation: none; }
}

.cl-cti {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 0 20px;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1rem;
	font-weight: 400;
	color: var(--color-primary);
	white-space: nowrap;
	flex-shrink: 0;
}

.cl-ctd {
	display: inline-block;
	width: 3px;
	height: 3px;
	background: rgba(28,28,28,0.3);
	border-radius: 50%;
	vertical-align: middle;
}

/* --- 2. POR QUE ELEGIRNOS --- */
.cl-corp-why-section {
	background: #fff;
	padding: var(--space-section) clamp(1.25rem, 5vw, 4rem);
}

.cl-why-grid {
	display: grid;
	grid-template-columns: 1fr; /* stacked on mobile */
	gap: 1.5rem;
	max-width: var(--container-max);
	margin: 3rem auto 0;
}

.cl-why-item {
	padding: 2.5rem 2rem;
	border: 1px solid #ede8e2;
	background: #fff;
	position: relative;
	transition: background 0.25s;
	height: 100%;
}

.cl-why-item:hover { background: var(--bg-light); }

.cl-why-item::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: var(--color-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s;
}

.cl-why-item:hover::before { transform: scaleX(1); }

.cl-why-num {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 2.8rem;
	color: rgba(201,160,96,0.2);
	display: block;
	margin-bottom: 12px;
	line-height: 1;
}

.cl-why-title {
	font-family: var(--font-serif);
	font-size: 1.2rem;
	font-weight: 400;
	color: var(--color-primary);
	margin-bottom: 8px;
	line-height: 1.2;
}

.cl-why-text {
	font-family: var(--font-sans);
	font-size: 13px;
	color: var(--text-muted);
	line-height: 1.85;
}

/* --- 3. PRODUCTOS --- */
.cl-corp-products-section {
	background: var(--bg-mid);
	padding: clamp(4rem, 8vw, 6rem) clamp(1.25rem, 5vw, 4rem);
}

.cl-corp-products-grid {
	display: grid;
	grid-template-columns: 1fr 1fr; /* 2-col on mobile */
	gap: 1.5rem;
	max-width: var(--container-max);
	margin: 3rem auto 0;
}

.cl-corp-products-cta { text-align: center; margin-top: 2.5rem; }

/* --- 4. PROCESO --- */
.cl-corp-proceso-section {
	background: var(--color-primary);
	padding: clamp(4rem, 8vw, 6rem) clamp(1.25rem, 5vw, 4rem);
}

.cl-proc-header {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: end;
	/* Centrado a pedido de Pato. Alcanza con el text-align porque el único hijo
	   es .cl-proc-header-left, un flex en columna que por defecto estira a sus
	   hijos a todo el ancho. El eyebrow es aparte: es flex y necesita la clase
	   --center, que además le espeja el filete. */
	text-align: center;
	max-width: var(--container-max);
	margin: 0 auto 3.5rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid rgba(255,255,255,0.07);
}

.cl-proc-header-left { display: flex; flex-direction: column; }

/* cl-eyebrow base + --rule + --gold handle font/color/line */
.cl-proc-eyebrow {
	margin-bottom: 12px;
}

.cl-proc-title {
	font-family: var(--font-serif);
	font-size: var(--fs-section-lg);
	font-weight: 400;
	color: #fff;
	line-height: 1.1;
}

.cl-proc-title em { font-style: italic; color: var(--color-blush); }

.cl-proc-sub {
	/* Apilada bajo el título necesita aire propio: .cl-proc-header-left es un
	   flex en columna sin gap, y el reset de <p> sólo da margin-bottom.
	   El margin-inline es porque tiene max-width: sin él el text-align centra el
	   texto pero la caja de 44ch queda pegada a la izquierda. */
	margin-top: 1.25rem;
	margin-inline: auto;
	font-family: var(--font-sans);
	font-size: 13.5px;
	color: var(--on-dark-soft);
	line-height: 1.85;
	max-width: 44ch;
}

.cl-steps-track {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: var(--container-read);
	margin: 0 auto;
}

.cl-step {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 0;
}

.cl-step-left {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 4px;
}

.cl-step-marker {
	width: 52px;
	height: 52px;
	border: 1.5px solid rgba(255,255,255,0.14);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
	z-index: 2;
	background: var(--color-primary);
	transition: border-color 0.3s;
}

.cl-step:hover .cl-step-marker { border-color: rgba(255,255,255,0.4); }

.cl-step-marker--gold {
	border-color: var(--color-gold);
	background: rgba(201,160,96,0.07);
}

.cl-step-marker--gold .cl-step-num { color: var(--color-gold); }
.cl-step-marker--filled { background: #fff; border-color: #fff; }
.cl-step-marker--filled .cl-step-num { color: var(--color-primary); }

/* ── Contraste del riel de pasos ──────────────────────────────────────────
 * Los cuatro colores de texto de este componente estaban escritos como rgba
 * sueltos y ninguno llegaba al 4,5:1 de WCAG AA sobre el #1c1c1c en el que se
 * dibuja: la etiqueta 2,05:1, el número 3,20:1, el texto 3,54:1 y el chip
 * 3,81:1. Es el componente de "cómo funciona" de SEIS páginas —Gift Cards,
 * Rastreo, Arrepentimiento, Envíos, Regalos Corporativos y la de gracias—,
 * verificado el 2026-08-11: las seis lo pintan sobre rgb(28,28,28), así que
 * el arreglo va acá, en la base, y no página por página.
 * Ahora usan los tokens que ya existían para texto sobre oscuro:
 *   --on-dark-faint (0.46) → 4,56:1   etiqueta, número, chip
 *   --on-dark-soft  (0.75) → 9,98:1   el texto del paso, que es lo que se lee
 * El aro del círculo y el degradado de la línea siguen en rgba: son superficie
 * decorativa, no texto, y el dato lo lleva el número que va adentro. */
.cl-step-num {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 0.95rem;
	color: var(--on-dark-faint);
	line-height: 1;
}

.cl-step-line {
	flex: 1;
	width: 1px;
	background: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
	margin: 5px 0;
	min-height: 40px;
}

.cl-step-body { padding: 2px 0 44px 24px; }
.cl-step--last .cl-step-body { padding-bottom: 0; }

.cl-step-tag {
	font-family: var(--font-sans);
	font-size: 0.5rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--on-dark-faint);
	display: block;
	margin-bottom: 6px;
}

.cl-step-title {
	font-family: var(--font-serif);
	font-size: 1.35rem;
	font-weight: 400;
	color: #fff;
	margin-bottom: 9px;
	line-height: 1.2;
}

.cl-step-text {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: var(--on-dark-soft);
	line-height: 1.85;
	max-width: 56ch;
	margin-bottom: 12px;
}

.cl-step-detail { display: flex; flex-wrap: wrap; gap: 7px; }

.cl-sd-item {
	font-family: var(--font-sans);
	font-size: 0.625rem;
	letter-spacing: 0.06em;
	color: var(--on-dark-faint);
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.1);
	padding: 4px 11px 4px 9px;
	border-radius: var(--radius-card);
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.cl-sd-item::before {
	content: '';
	display: block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--color-gold);
	flex-shrink: 0;
	opacity: 0.7;
}

.cl-proc-cta-wrap { text-align: center; margin-top: 3.5rem; }



/* --- 5. PERSONALIZACION --- */
.cl-corp-custom-section {
	background: var(--bg-light);
	padding: clamp(4rem, 8vw, 6rem) clamp(1.25rem, 5vw, 4rem);
}

.cl-corp-custom-inner {
	display: grid;
	grid-template-columns: 1fr; /* stacked on mobile */
	gap: 3rem;
	max-width: var(--container-max);
	margin: 0 auto;
	/* stretch y no start: las columnas ya medían 616px cada una, pero la caja
	   negra se encogía a su contenido y quedaba en el 76% del alto de la
	   izquierda. Ahora las dos mitades ocupan lo mismo. */
	align-items: stretch;
}

.cl-corp-custom-left .cl-corp-section-title { text-align: left; margin-bottom: 14px; }
.cl-corp-custom-left .cl-corp-section-ey { margin-bottom: 12px; }

.cl-corp-custom-intro {
	font-size: 13.5px;
	color: var(--text-muted);
	line-height: 1.85;
	margin-bottom: 2rem;
}

.cl-custom-list {
	list-style: none;
	padding: 0;
	margin: 1.75rem 0 0;
}

/* Lista con filete, sin numerar ni fichas. Antes cada opción era una tarjeta
   blanca con un romano en oro: numerar prometía una secuencia que no existe
   —se elige lo que se quiere, no se hace una después de otra— y las cuatro
   cajas competían con la caja negra de cotización que va al lado. */
.cl-cli {
	font-family: var(--font-serif);
	font-size: 1.0625rem;
	line-height: 1.35;
	color: var(--color-primary);
	padding: 15px 0;
	border-bottom: 1px solid var(--border);
}

.cl-cli:first-child { padding-top: 0; }

.cl-cli:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.cl-corp-quote-box {
	background: var(--color-primary);
	padding: 3.5rem;
	position: relative;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Ablandado: el bloque negro a media pantalla contra el crema cortaba como
	   un tajo. La sombra cálida lo apoya sobre la página en vez de recortarlo,
	   y el radio le saca el filo a las esquinas — el mismo que usan las gift
	   cards, así que no inventa un lenguaje nuevo. */
	border-radius: 14px;
	box-shadow:
		0 28px 64px rgba(28, 28, 28, .16),
		0 6px 18px rgba(28, 28, 28, .08);
}

.cl-corp-quote-box::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(to right, var(--color-gold), transparent 60%);
	/* Sigue el radio de la caja: si no, el filete asoma por las esquinas. */
	border-radius: 14px 14px 0 0;
}

.cl-corp-quote {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.4rem;
	font-weight: 400;
	color: #fff;
	line-height: 1.5;
	margin-bottom: 18px;
}

.cl-corp-quote em { font-style: normal; color: var(--color-gold); }

.cl-corp-quote-sub {
	font-family: var(--font-sans);
	font-size: 12px;
	color: rgba(255,255,255,0.35);
	line-height: 1.75;
	margin-bottom: 24px;
}

/* --- 6. FORMULARIO --- */
.cl-corp-form-section {
	background: var(--bg-mid);
	padding: clamp(4rem, 8vw, 6rem) clamp(1.25rem, 5vw, 4rem);
}

.cl-corp-form-inner {
	display: grid;
	grid-template-columns: 1fr; /* stacked on mobile */
	gap: 2.5rem;
	/* --container-form (1100) y no --container-max (1440): lo comparten los
	   formularios de Corporativos y Arrepentimiento, que a 1440 quedaban en 826px
	   contra los 600 de Contacto y Trabajá. Así los cuatro viven en el mismo
	   sistema de ancho. */
	max-width: var(--container-form);
	margin: 0 auto;
	align-items: start;
}

.cl-form-aside-corp { padding-top: 0.5rem; }
.cl-form-aside-corp .cl-corp-section-ey { margin-bottom: 10px; }

.cl-corp-form-title {
	font-family: var(--font-serif);
	font-size: var(--fs-section-lg);
	font-weight: 400;
	color: var(--color-primary);
	line-height: 1.1;
	margin-bottom: 12px;
}

.cl-corp-form-title em { font-style: italic; }

.cl-corp-form-sub {
	font-family: var(--font-sans);
	font-size: 13.5px;
	color: var(--text-muted);
	line-height: 1.85;
	margin-bottom: 28px;
}

.cl-promise-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cl-pi { display: flex; align-items: flex-start; gap: 12px; }

.cl-pi-dot {
	width: 20px;
	height: 20px;
	background: var(--color-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 2px;
	font-size: 9px;
	color: #fff;
	font-weight: 700;
}

.cl-pi-dot::after { content: "\2713"; }

.cl-pi-text {
	font-family: var(--font-sans);
	font-size: 13px;
	color: var(--color-primary);
	line-height: 1.6;
}

.cl-corp-form-body {
	background: #fff;
	padding: 2.5rem;
	border: 1px solid #ede8e2;
}

/* ── cl-corp-form-wrap: campos CF7 (regalo individual + regalos corporativos)
   ============================================================ */
.cl-corp-form-wrap {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.cl-cf-label {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.cl-cf-label-text {
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps-lg);
	text-transform: uppercase;
	color: var(--text-muted);
}

.cl-cf-hint {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.625rem;
	opacity: 0.7;
	margin-left: 0.4em;
}

.cl-corp-input,
.cl-corp-select,
.cl-corp-textarea {
	width: 100%;
	padding: 0.75rem 0;
	background: transparent;
	border: none;
	border-bottom: 1.5px solid var(--border);
	color: var(--text-primary);
	font-family: var(--font-sans);
	font-size: 1rem; /* 16px — previene auto-zoom en iOS Safari */
	transition: border-color var(--ease);
	outline: none;
}

.cl-corp-input:focus,
.cl-corp-select:focus,
.cl-corp-textarea:focus {
	border-color: var(--color-primary);
}

.cl-corp-input::placeholder,
.cl-corp-textarea::placeholder {
	color: var(--text-muted);
	opacity: 0.6;
}

.cl-corp-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a7168' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.375rem center;
	padding-right: 1.75rem;
	cursor: pointer;
}

.cl-corp-textarea {
	resize: vertical;
	min-height: 96px;
	padding-top: 0.625rem;
	line-height: 1.6;
}

.cl-cf-row-2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media (min-width: 481px) {
	.cl-cf-row-2 { grid-template-columns: 1fr 1fr; }
}

.cl-corp-btn {
	margin-top: 0.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px; /* WCAG 2.5.5 touch target */
	padding: 0.875rem 2rem;
	background: var(--color-primary);
	color: var(--text-white);
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps-md);
	text-transform: uppercase;
	border: none;
	cursor: pointer;
	transition: background var(--ease), transform var(--ease), box-shadow var(--ease);
}

.cl-corp-btn:hover,
.cl-corp-btn:focus-visible {
	background: var(--color-gold);
	color: var(--color-primary);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}

/* CF7 mensajes de validación y respuesta */
.cl-corp-form-wrap .wpcf7-not-valid-tip {
	font-size: 0.6875rem;
	color: var(--color-bordeaux);
	margin-top: 0.3rem;
	display: block;
}

.cl-corp-form-wrap .wpcf7-response-output {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	font-size: 0.8125rem;
	border-radius: var(--radius-card);
	border: 1px solid;
}

.cl-corp-form-wrap .wpcf7-mail-sent-ok {
	background: rgba(131, 155, 145, 0.12);
	border-color: var(--color-sage);
	color: var(--color-primary);
}

.cl-corp-form-wrap .wpcf7-validation-errors,
.cl-corp-form-wrap .wpcf7-mail-sent-ng {
	background: rgba(117, 0, 0, 0.07);
	border-color: var(--color-bordeaux);
	color: var(--color-bordeaux);
}

/* --- COTIZACIÓN INTERMEDIA (dark strip entre Por qué y Productos) --- */
/* Corp — mobile-first responsive */
@media (min-width: 769px) {
	.cl-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cl-corp-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1025px) {
	.cl-corp-hero-inner { grid-template-columns: 1fr 1fr; min-height: 520px; }
	.cl-corp-hero-media { display: block; min-height: 360px; }
	.cl-why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cl-corp-products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cl-corp-custom-inner { grid-template-columns: 1fr 1fr; gap: 5rem; }
	.cl-corp-form-inner { grid-template-columns: 340px 1fr; gap: 4rem; }
	.cl-corp-form-body { padding: 2.5rem; }
}


/* ── Ubicación ── */
.cl-ubicacion-grid {
	display: grid;
	grid-template-columns: 1fr; /* stacked on mobile */
	gap: 2rem;
	padding-block: 3rem;
}

.cl-ubicacion-list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.cl-ubicacion-list li {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.cl-ubicacion-list__icon {
	font-size: 1.25rem;
	flex-shrink: 0;
	margin-top: 0.125rem;
}

.cl-ubicacion-list strong {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 0.25rem;
}

.cl-ubicacion-list a {
	color: var(--text-primary);
	transition: color var(--ease);
}

.cl-ubicacion-list a:hover {
	color: var(--color-blush);
}

.cl-ubicacion-ctas {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.cl-ubicacion-map {
	border-radius: var(--radius-card);
	overflow: hidden;
}

@media (min-width: 769px) {
	.cl-ubicacion-grid { grid-template-columns: 360px 1fr; gap: 3rem; }
}

/* ═══════════════════════════════════════════════════════════════
   TRABAJÁ CON NOSOTROS — cl-jobs
   ═══════════════════════════════════════════════════════════════ */

/* Wrapper */
.cl-jobs {
	position: relative;
	overflow-x: hidden;
}


.cl-jobs-section-title {
	font-family: var(--font-serif);
	font-size: var(--fs-section-lg);
	font-weight: 400;
	line-height: 1.15;
	color: var(--color-primary);
	margin-bottom: 2rem;
}

.cl-jobs-section-title--light {
	color: #fff;
}

.cl-jobs-section-title em {
	font-style: italic;
	color: var(--color-blush);
}

/* ─── 1. HERO ──────────────────────────────────────────────── */
.cl-jobs-hero {
	display: grid;
	grid-template-columns: 1fr; /* stacked on mobile */
	min-height: auto;
}

.cl-jobs-hero__left {
	position: relative;
	background: var(--bg-light);
	display: flex;
	align-items: center;
	padding: clamp(3rem, 8vw, 7rem) clamp(2rem, 6vw, 5rem);
	z-index: 1;
}

/* Textura grain sobre la mitad izquierda */
.cl-jobs-hero__grain {
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
	pointer-events: none;
	z-index: 0;
}

.cl-jobs-hero__left-inner {
	position: relative;
	z-index: 1;
	max-width: 540px;
}

.cl-jobs-hero__title {
	font-family: var(--font-serif);
	font-size: var(--fs-hero);
	font-weight: 400;
	line-height: 1.1;
	color: var(--color-primary);
	margin-bottom: 1.5rem;
}

.cl-jobs-hero__title em {
	font-style: italic;
	color: var(--color-blush-dk);
}

.cl-jobs-hero__desc {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--text-muted);
	max-width: 440px;
	margin-bottom: 2.5rem;
}



/* Panel decorativo derecho */
.cl-jobs-hero__right {
	position: relative;
	background: var(--color-primary);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	gap: 1.5rem;
}

.cl-jobs-hero__monogram {
	font-family: var(--font-serif);
	font-size: clamp(7rem, 18vw, 14rem);
	font-weight: 700;
	color: rgba(235, 204, 194, 0.08);
	line-height: 1;
	user-select: none;
	animation: cl-spin-slow 60s linear infinite;
}

@keyframes cl-spin-slow {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

.cl-jobs-hero__location {
	position: absolute;
	bottom: 2.5rem;
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: rgba(235, 204, 194, 0.4);
}

/* ─── 2. STATS ─────────────────────────────────────────────── */
.cl-jobs-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2-col on mobile */
	background: var(--color-primary);
}

.cl-jobs-stat {
	padding: 2.5rem 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
	border-right: 1px solid rgba(255,255,255,0.07);
}

.cl-jobs-stat:last-child {
	border-right: none;
}

.cl-jobs-stat__num {
	font-family: var(--font-serif);
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 700;
	color: var(--color-blush);
	line-height: 1;
}

.cl-jobs-stat__label {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.45);
}

/* ─── 3. ÁREAS ─────────────────────────────────────────────── */
.cl-jobs-areas {
	padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 5vw, 4rem);
	background: var(--bg-light);
}

.cl-jobs-areas__head {
	text-align: left;
	margin-bottom: 3.5rem;
}

.cl-jobs-areas__grid {
	display: grid;
	grid-template-columns: 1fr; /* stacked on mobile */
	gap: 1.5rem;
	max-width: var(--container-max);
	margin: 0 auto;
}

.cl-jobs-area-card {
	position: relative;
	background: #fff;
	border: 1px solid rgba(28,28,28,0.08);
	border-radius: var(--radius-card);
	padding: 2rem 1.75rem;
	overflow: hidden;
	transition: box-shadow 0.25s, transform 0.25s;
}

/* Borde superior blush que crece en hover */
.cl-jobs-area-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--color-blush);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cl-jobs-area-card:hover::before {
	transform: scaleX(1);
}

.cl-jobs-area-card:hover {
	box-shadow: 0 8px 32px rgba(28,28,28,0.1);
	transform: translateY(-3px);
}

.cl-jobs-area-card__icon {
	display: block;
	margin-bottom: 1.125rem;
	color: var(--color-blush-dk);
}
.cl-jobs-area-card__icon svg {
	display: block;
	width: 1.625rem;
	height: 1.625rem;
}

.cl-jobs-area-card__title {
	font-family: var(--font-serif);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: 0.625rem;
}

.cl-jobs-area-card__desc {
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--text-muted);
}

/* ─── 4. POR QUÉ ELEGIRNOS ─────────────────────────────────── */
.cl-jobs-why {
	background: var(--color-primary);
	padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 5vw, 4rem);
}

.cl-jobs-why__inner {
	display: grid;
	grid-template-columns: 1fr; /* stacked on mobile */
	gap: 3rem;
	max-width: 1100px;
	margin: 0 auto;
	align-items: center;
}

.cl-jobs-why__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.cl-jobs-why__bullet {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.cl-jobs-why__dot {
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-blush);
	margin-top: 0.5rem;
}

.cl-jobs-why__bullet p {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: rgba(255,255,255,0.65);
}

.cl-jobs-why__bullet strong {
	color: #fff;
	font-weight: 700;
}

.cl-jobs-why__right {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.cl-jobs-feature {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	padding: 1.5rem;
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: var(--radius-card);
	background: rgba(255,255,255,0.03);
	transition: background 0.25s, border-color 0.25s;
}

.cl-jobs-feature:hover {
	background: rgba(235,204,194,0.06);
	border-color: rgba(235,204,194,0.2);
}

.cl-jobs-feature__icon {
	flex-shrink: 0;
	color: var(--color-blush);
}
.cl-jobs-feature__icon svg {
	display: block;
	width: 1.375rem;
	height: 1.375rem;
}

.cl-jobs-feature__title {
	font-family: var(--font-serif);
	font-size: 1.0625rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: 0.375rem;
}

.cl-jobs-feature__desc {
	font-size: 0.875rem;
	line-height: 1.7;
	color: rgba(255,255,255,0.5);
}

/* ─── 5. PROCESO ────────────────────────────────────────────── */
.cl-jobs-proceso {
	padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 5vw, 4rem);
	background: var(--bg-parch);
}

.cl-jobs-proceso__head {
	text-align: left;
	margin-bottom: 3.5rem;
}

.cl-jobs-proceso__steps {
	display: grid;
	grid-template-columns: 1fr; /* stacked on mobile */
	gap: 2rem;
	max-width: 1100px;
	margin: 0 auto;
	position: relative;
}

/* Línea conectora horizontal entre pasos */
.cl-jobs-proceso__steps::before {
	content: '';
	position: absolute;
	top: 2.25rem;
	left: calc(12.5% + 1.5rem);
	right: calc(12.5% + 1.5rem);
	height: 1px;
	background: linear-gradient(to right, var(--color-blush), var(--color-blush-dk));
	z-index: 0;
}

.cl-jobs-step {
	position: relative;
	z-index: 1;
	padding: 0;
	text-align: left;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 1.25rem;
}

.cl-jobs-step__num {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--color-blush);
	font-family: var(--font-serif);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.5rem;
	position: relative;
	z-index: 1;
}

.cl-jobs-step__num--accent {
	background: var(--color-blush);
	border-color: var(--color-blush);
	color: var(--color-primary);
}

.cl-jobs-step--accent .cl-jobs-step__title {
	color: var(--color-blush-dk);
}

.cl-jobs-step__title {
	font-family: var(--font-serif);
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: 0.5rem;
}

.cl-jobs-step__desc {
	font-size: 0.8125rem;
	line-height: 1.7;
	color: var(--text-muted);
}

/* ─── 6. FORMULARIO ─────────────────────────────────────────── */
.cl-jobs-form-section {
	background: var(--bg-light);
	padding: var(--space-section-sm) clamp(1.25rem, 5vw, 4rem);
}

.cl-jobs-form-section__inner {
	display: grid;
	grid-template-columns: 1fr; /* stacked on mobile */
	gap: 0;
	max-width: var(--container-form);
	margin: 0 auto;
	box-shadow: 0 4px 40px rgba(28,28,28,0.12);
	border-radius: var(--radius-card);
	overflow: hidden;
}

/* Sidebar oscuro */
.cl-jobs-form-sidebar {
	position: relative;
	background: var(--color-primary);
	padding: 3rem 2.5rem;
	overflow: hidden;
}

.cl-jobs-form-sidebar__grain {
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
	pointer-events: none;
}

.cl-jobs-form-sidebar > * {
	position: relative;
	z-index: 1;
}

.cl-jobs-form-sidebar__desc {
	font-size: 0.9375rem;
	line-height: 1.75;
	color: rgba(255,255,255,0.55);
	margin-bottom: 2.5rem;
}

/* Trust items */
.cl-jobs-trust {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.cl-jobs-trust__item {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.cl-jobs-trust__num {
	font-family: var(--font-serif);
	font-size: 1.5rem;
	font-weight: 700;
	color: rgba(235,204,194,0.2);
	line-height: 1;
	flex-shrink: 0;
	min-width: 2.25rem;
}

.cl-jobs-trust__title {
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #fff;
	margin-bottom: 0.25rem;
}

.cl-jobs-trust__desc {
	font-size: 0.8125rem;
	line-height: 1.65;
	color: rgba(255,255,255,0.45);
}

/* Cuerpo del formulario */
.cl-jobs-form-body {
	background: #fff;
	padding: 3rem 2.5rem;
}

.cl-jobs-form-body__header {
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid rgba(28,28,28,0.08);
}

.cl-jobs-form-body__header-line {
	width: 2.5rem;
	height: 2px;
	background: var(--color-gold);
	margin-bottom: 1rem;
}

.cl-jobs-form-body__header-title {
	font-family: var(--font-serif);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: 0.375rem;
}

.cl-jobs-form-body__header-sub {
	font-size: 0.8125rem;
	color: var(--text-muted);
}

/* CF7 overrides — mismos que contacto para coherencia visual */
.cl-jobs-form-body__content .wpcf7-form label,
.cl-ct-form-body .wpcf7-form label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps-lg);
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 0.5rem;
}

.cl-jobs-form-body__content .wpcf7-form input[type="text"],
.cl-jobs-form-body__content .wpcf7-form input[type="email"],
.cl-jobs-form-body__content .wpcf7-form input[type="tel"],
.cl-jobs-form-body__content .wpcf7-form input[type="number"],
.cl-jobs-form-body__content .wpcf7-form select,
.cl-jobs-form-body__content .wpcf7-form textarea {
	display: block;
	width: 100%;
	border: none;
	border-bottom: 1.5px solid var(--border);
	border-radius: 0;
	padding: 0.75rem 0;
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-primary);
	background: transparent;
	outline: none;
	box-shadow: none;
	transition: border-color 0.2s ease;
	margin-bottom: 1.375rem;
}

.cl-jobs-form-body__content .wpcf7-form input:focus,
.cl-jobs-form-body__content .wpcf7-form select:focus,
.cl-jobs-form-body__content .wpcf7-form textarea:focus {
	border-color: var(--color-primary);
}

.cl-jobs-form-body__content .wpcf7-form textarea {
	min-height: 90px;
	resize: vertical;
}

.cl-jobs-form-body__content .wpcf7-form input[type="submit"],
/* Sólo maquetación: el aspecto lo pone .cl-btn (main.css). */
.cl-jobs-form-body__content .wpcf7-submit {
	display: flex;
	width: 100%;
	margin-top: 0.5rem;
}

.cl-jobs-form-body__content .wpcf7-form input[type="submit"]:hover,
.cl-jobs-form-body__content .wpcf7-form input[type="submit"]:focus-visible {
	background: var(--color-gold);
	color: var(--color-primary);
}

/* ─── 7. LEGAL ──────────────────────────────────────────────── */
.cl-jobs-legal {
	display: flex;
	flex-direction: column; /* stacked on mobile */
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1.75rem clamp(1.25rem, 5vw, 4rem);
	background: var(--bg-parch);
	border-top: 1px solid rgba(28,28,28,0.06);
}

.cl-jobs-legal__badge {
	flex-shrink: 0;
	padding: 0.25rem 0.625rem;
	background: var(--color-primary);
	color: var(--color-blush);
	font-family: var(--font-sans);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: var(--radius-card);
	white-space: nowrap;
	margin-top: 0.125rem;
}

.cl-jobs-legal__text {
	font-size: 0.75rem;
	line-height: 1.7;
	color: var(--text-muted);
}

.cl-jobs-legal__text a {
	color: var(--color-primary);
	text-decoration: underline;
}

/* ─── RESPONSIVE (mobile-first) ────────────────────────────── */
.cl-jobs-hero__right { min-height: 220px; }
.cl-jobs-hero__monogram { font-size: 8rem; }
.cl-jobs-stat {
	border-right: 1px solid rgba(255,255,255,0.07);
	border-bottom: 1px solid rgba(255,255,255,0.07);
}
.cl-jobs-stat:nth-child(2),
.cl-jobs-stat:nth-child(4) { border-right: none; }
.cl-jobs-stat:nth-child(3),
.cl-jobs-stat:nth-child(4) { border-bottom: none; }
.cl-jobs-form-body { padding: 2rem 1.5rem; }
/* connector line: hidden on mobile (not meaningful in vertical layout) */
.cl-jobs-proceso__steps::before { display: none; }
.cl-jobs-step__num { margin: 0; flex-shrink: 0; }

@media (min-width: 769px) {
.cl-jobs-hero { grid-template-columns: 1fr 1fr; min-height: 90vh; }
	.cl-jobs-hero__right { min-height: auto; }
	.cl-jobs-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cl-jobs-stat { border: none; }
	.cl-jobs-areas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* 2.5rem a los lados, igual que la tarjeta de Contacto: con los 3rem que
	   tenía, el formulario quedaba en 584px contra los 600 de allá. */
	.cl-jobs-form-body { padding: 3rem 2.5rem; }
	.cl-jobs-legal { flex-direction: row; gap: 1.25rem; }
}

@media (min-width: 1025px) {
	.cl-jobs-areas__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cl-jobs-why__inner { grid-template-columns: 1fr 1fr; gap: 5rem; }
	.cl-jobs-form-section__inner { grid-template-columns: 420px 1fr; }
	.cl-jobs-proceso__steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0;
	}
	.cl-jobs-proceso__steps::before { display: block; }
	.cl-jobs-step {
		padding: 0 1.5rem;
		text-align: center;
		flex-direction: column;
		align-items: center;
		gap: 0;
	}
	.cl-jobs-step__num { margin: 0 auto 1.5rem; }
}


/* ── Quantity +/- buttons (single product) ── */
/* Botones − y + que envuelven el input de cantidad en la ficha de producto */
.cl-qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 48px;
	border: 1.5px solid #e0d8d2;
	background: #fff;
	color: var(--color-primary);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cl-qty-btn--minus {
	border-radius: 0;
	border-right: none;
}

.cl-qty-btn--plus {
	border-radius: 0;
	border-left: none;
}

.cl-qty-btn:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

/* Cuando están presentes los botones, el input pierde bordes laterales */
.cl-sp-info .quantity:has(.cl-qty-btn) .qty {
	border-radius: 0;
	border-left: none;
	border-right: none;
}


/* ─────────────────────────────────────────────────────────────── */
/* ── FOOTER: INSTAGRAM FEED ─────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────── */

/* Contenedor principal sobre fondo oscuro */
.cl-footer-insta {
	background: var(--color-primary);
	padding: 3.5rem clamp(1.5rem, 4vw, 3.5rem) 0;
}

/* Cabecera: eyebrow+título a la izq, handle a la der */
.cl-footer-insta__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 1.75rem;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: 0;
}

.cl-footer-insta__heading {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

/* Texto pequeño "Seguinos" encima del título */
.cl-footer-insta__eyebrow {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-blush);
}

/* Título "Instagram" en serif */
.cl-footer-insta__title {
	font-family: var(--font-serif);
	font-size: var(--fs-section);
	font-weight: 400;
	color: #fff;
	margin: 0;
}

/* Handle @casalopezba — link en esquina derecha */
.cl-footer-insta__handle {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-blush);
	text-decoration: none;
	letter-spacing: 0.04em;
	transition: opacity 0.2s ease;
}
.cl-footer-insta__handle:hover { opacity: 0.7; }

/* Grilla de 6 fotos: cada celda ocupa 1/6 del ancho */
.cl-footer-insta__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 col on mobile */
	max-width: var(--container-max);
	margin-inline: auto;
}

/* Cada foto: cuadrada, con overlay de Instagram al hover */
.cl-footer-insta__item {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
}

.cl-footer-insta__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.cl-footer-insta__item:hover .cl-footer-insta__img {
	transform: scale(1.08);
}

/* Overlay oscuro + ícono de Instagram al hacer hover */
.cl-footer-insta__overlay {
	position: absolute;
	inset: 0;
	background: rgba(28,28,28,.55);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.cl-footer-insta__item:hover .cl-footer-insta__overlay { opacity: 1; }

/* Subtítulo debajo de la grilla */
.cl-footer-insta__sub {
	text-align: center;
	font-size: 0.8125rem;
	color: var(--on-dark-soft);
	padding: 1.25rem 0 0;
	max-width: var(--container-max);
	margin-inline: auto;
}

/* Instagram: header stacked on mobile */
.cl-footer-insta__header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }

@media (min-width: 769px) {
	.cl-footer-insta__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.cl-footer-insta__header { flex-direction: row; align-items: center; }
}


/* ─────────────────────────────────────────────────────────────── */
/* ── FOOTER: NEWSLETTER ─────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────── */

/* Franja con fondo levemente más claro que el footer */
.cl-footer-nl {
	background: #252220;
	padding: 3.25rem clamp(1.5rem, 4vw, 3.5rem);
}

/* stacked on mobile, 2-col at 769px+ */
.cl-footer-nl__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: center;
}

/* Eyebrow "Newsletter" */
.cl-footer-nl__eyebrow {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-blush);
	margin-bottom: 0.5rem;
}

/* Título con em en cursiva */
.cl-footer-nl__title {
	font-family: var(--font-serif);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 400;
	color: #fff;
	margin: 0 0 0.625rem;
	line-height: 1.25;
}

.cl-footer-nl__title em { font-style: italic; color: var(--color-blush); }

/* Subtítulo */
.cl-footer-nl__sub {
	font-size: 0.875rem;
	color: var(--on-dark-soft);
	margin: 0;
}

/* Fila input + botón — stacked on mobile, row at 769px+ */
.cl-footer-nl__form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.cl-footer-nl__input {
	height: 48px;
	border: 1.5px solid rgba(255,255,255,.18);
	border-radius: 0;
	background: rgba(255,255,255,.07);
	color: #fff;
	font-size: 0.9375rem;
	font-family: inherit;
	padding: 0 1rem;
	outline: none;
	transition: border-color 0.2s ease;
	width: 100%;
}

.cl-footer-nl__input::placeholder { color: rgba(255,255,255,.35); }
.cl-footer-nl__input:focus { border-color: var(--color-blush); }

.cl-footer-nl__btn {
	height: 48px;
	padding: 0 1.5rem;
	background: var(--color-blush);
	color: var(--color-primary);
	border: none;
	border-radius: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

.cl-footer-nl__btn:hover { opacity: 0.85; }

/* Nota "Podés darte de baja..." */
.cl-footer-nl__note {
	font-size: 0.75rem;
	color: var(--on-dark-faint);
	margin: 0.625rem 0 0;
}

@media (min-width: 769px) {
	.cl-footer-nl__inner { grid-template-columns: 5fr 7fr; gap: 2.5rem; }
	.cl-footer-nl__form { flex-direction: row; gap: 0; }
	.cl-footer-nl__input {
		flex: 1;
		width: auto;
		border-right: none;
		border-radius: 0;
	}
}


/* ─────────────────────────────────────────────────────────────── */
/* ── FOOTER BODY: ACTUALIZACIONES ───────────────────────────── */
/* ─────────────────────────────────────────────────────────────── */

/* Sub "Argentina · Desde 1939" debajo del logo */
.cl-footer__brand-sub {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--on-dark-soft);
	margin: 0.25rem 0 0.875rem;
}

/* Links de contacto en la columna de marca */
.cl-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-top: 1rem;
}

.cl-footer__contact-link {
	font-size: 0.8125rem;
	color: var(--on-dark-soft);
	text-decoration: none;
	transition: color 0.2s ease;
}

.cl-footer__contact-link:hover { color: var(--color-blush); }

/* Barra de dirección + idioma */
.cl-footer__info {
	background: var(--color-primary);
	border-top: 1px solid rgba(255,255,255,.08);
	padding: 1rem clamp(1.5rem, 4vw, 3.5rem);
}

.cl-footer__info-inner {
	max-width: var(--container-max);
	margin-inline: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.cl-footer__info-address {
	font-size: 0.8125rem;
	color: var(--on-dark-soft);
	margin: 0;
}

/* Pills de idioma */
.cl-footer__info-lang { display: flex; gap: 0.5rem; }

.cl-lang-pill {
	padding: 4px 10px;
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 20px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: rgba(255,255,255,.5);
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.cl-lang-pill:hover { border-color: var(--color-blush); color: #fff; }
.cl-lang-active { border-color: var(--color-blush); color: #fff; }


/* ─────────────────────────────────────────────────────────────── */
/* ── HOME: HERO (actualización para bg-image en section) ────── */
/* ─────────────────────────────────────────────────────────────── */

/* La section ahora lleva background-image directamente como style inline.
   Altura fija 600px matching el diseño Flatsome; con fallback via min-height. */
.cl-hero {
	background-size:     cover;
	background-position: 48% 35%;      /* posición de la imagen del hero */
	min-height: 600px;
	align-items: center;
	justify-content: center;
}

/* Overlay uniforme (no el gradiente lateral que había antes) */
.cl-hero__overlay {
	background: rgba(0, 0, 0, 0.45) !important; /* pisa el gradiente anterior */
}

/* Contenido centrado */
.cl-hero__content {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 0 clamp(1.5rem, 5vw, 3rem);
}

/* Bloque de copy centrado, y desde v2.8.4 el texto también.
   Antes el bloque se centraba (justify-content en .cl-hero__content) pero
   adentro todo se alineaba a la izquierda, así que el eyebrow, el titular y la
   bajada arrancaban en el mismo borde y quedaban corridos respecto del logo y
   de los botones —que sí van centrados por su margin-inline: auto—.
   El max-width de 660px es el que evita que la bajada se estire en una línea
   larguísima al centrarla. */
.cl-hero__copy {
	text-align: center;
	max-width: 660px;
}

/* Eyebrow "Buenos Aires · Desde 1939" */
.cl-hero__eyebrow {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--color-blush);
	margin-bottom: 1.25rem;
}

/* Título del hero — cursiva en la segunda línea */
.cl-hero__title {
	/* Decía 300 con el comentario "más ligero que el 500 anterior". Nunca fue
	   más ligero: el eje de Playfair arranca en 400 y el 300 se recortaba ahí.
	   Baja del 500 que heredaba de h1/h2, eso sí. */
	font-weight: 400;
	margin: 0 0 2rem;
}

.cl-hero__title em { color: var(--color-blush); }

/* CTAs
   align-items: stretch (y no center) a propósito: con center cada botón medía
   lo que medía su texto —258 px contra 249 px, medido en el sitio— y como están
   apilados los bordes no coincidían. Los textos salen del Customizer, así que
   un ancho fijo se volvería a descuadrar con el primer cambio de copy. */
.cl-hero__ctas {
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
	width: 100%;
	max-width: 300px;
	margin-inline: auto;    /* se centra el bloque, no cada botón */
}

/* La foto del hero se cambia desde el Customizer: la sombra despega los botones
   del fondo sea cual sea la imagen que haya detrás. */
.cl-hero__ctas .cl-btn {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

.cl-hero__ctas .cl-btn:hover,
.cl-hero__ctas .cl-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}

/* El botón de contorno necesita las DOS sombras en la misma declaración.
   .cl-btn--ghost-white no dibuja su borde con `border` sino con un
   `box-shadow: inset`, y la regla de acá arriba —que tiene más especificidad,
   0-2-0 contra 0-1-0— le pisa la propiedad entera. No la atenúa: box-shadow es
   una sola propiedad, así que la sombra de abajo BORRA el borde. El resultado
   era "Regalar una Gift Card" flotando como texto suelto, sin caja.

   De paso el borde sube de 50% a 85% de blanco, sólo acá: en las otras diez
   franjas oscuras del sitio el fondo es un color plano y con 50% alcanza, pero
   el hero está sobre una foto que se cambia desde el Customizer y una línea de
   1px al 50% se pierde contra cualquier zona clara de la imagen. */
.cl-hero__ctas .cl-btn--ghost-white {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85),
	            0 2px 10px rgba(0, 0, 0, 0.28);
}

.cl-hero__ctas .cl-btn--ghost-white:hover,
.cl-hero__ctas .cl-btn--ghost-white:focus-visible {
	box-shadow: inset 0 0 0 1px var(--color-gold),
	            0 6px 18px rgba(0, 0, 0, 0.32);
}

/* Botón outline blanco */
.cl-hero__btn--outline {
	display: inline-block;
	padding: 14px 36px;
	border: 1.5px solid rgba(255, 255, 255, 0.8);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.cl-hero__btn--outline:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
}

/* Botón link blanco semitransparente */
.cl-hero__btn--link {
	display: inline-block;
	padding: 8px 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.875rem;
	text-decoration: none;
	transition: color 0.2s ease;
}

.cl-hero__btn--link:hover { color: #fff; }

/* ─────────────────────────────────────────────────────────────── */
/* ── HOME: TICKER ────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────── */

.cl-ticker {
	overflow: hidden;
	background: var(--color-primary);
	padding: 13px 0;
	white-space: nowrap;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* El track se anima: dura 30s, 50% de la anchura total (contenido duplicado) */
.cl-ticker__track {
	display: inline-flex;
	animation: cl-ticker-scroll 30s linear infinite;
	will-change: transform;
}

.cl-ticker__item {
	display: inline-flex;
	align-items: center;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

/* Punto separador entre items */
.cl-ticker__dot {
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--color-blush);
	margin: 0 2rem;
	vertical-align: middle;
	flex-shrink: 0;
}

@keyframes cl-ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Pausa la animación si el usuario prefiere movimiento reducido */
@media (prefers-reduced-motion: reduce) {
	.cl-ticker__track { animation: none; }
}

/* ─────────────────────────────────────────────────────────────── */
/* ── HOME: SPLIT BANNERS ─────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────── */

.cl-home-split {
	display: grid;
	grid-template-columns: 1fr; /* stacked on mobile */
}

.cl-home-split__panel {
	position: relative;
	display: block;
	height: 360px; /* shorter on mobile */
	overflow: hidden;
	text-decoration: none;
}

/* Imagen de fondo — separada en __bg para poder hacer zoom sin mover el overlay */
.cl-home-split__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.5s ease;
}

.cl-home-split__panel:hover .cl-home-split__bg {
	transform: scale(1.04);
}

/* Overlay de oscurecimiento (el color viene del style inline en el PHP) */
.cl-home-split__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* Contenido sobre la imagen */
.cl-home-split__content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 2.5rem;
}

.cl-home-split__label {
	display: block;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-blush);
	margin-bottom: 0.75rem;
}

.cl-home-split__title {
	font-family: var(--font-serif);
	font-size: clamp(1.5rem, 2.5vw, 2.125rem);
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
	margin: 0 0 1.25rem;
}

.cl-home-split__cta {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	padding-bottom: 2px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	transition: border-color 0.2s ease, color 0.2s ease;
}

.cl-home-split__panel:hover .cl-home-split__cta {
	border-color: var(--color-blush);
	color: var(--color-blush);
}

@media (min-width: 641px) {
	.cl-home-split { grid-template-columns: 1fr 1fr; }
	.cl-home-split__panel { height: clamp(440px, 38vw, 660px); }
}

/* ─────────────────────────────────────────────────────────────── */
/* ── HOME: FEATURED — cabecera y footer ──────────────────────── */
/* ─────────────────────────────────────────────────────────────── */

/* Fila: título izq + link der */
.cl-featured__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 2rem;
}

.cl-featured__title {
	font-family: var(--font-serif);
	font-size: var(--fs-section);
	font-weight: 400;
	color: var(--color-primary);
	margin: 0;
}

.cl-featured__title em { font-style: italic; }

.cl-featured__link {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.cl-featured__link:hover { color: var(--color-primary); }

/* Botón "ver todo" centrado abajo */
.cl-featured__footer {
	margin-top: 2.5rem;
	text-align: center;
}

/* ─────────────────────────────────────────────────────────────── */
/* ── HOME: QUOTE STRIP ───────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────── */

.cl-home-quote {
	background: var(--color-primary);
	padding: 3.5rem clamp(1.5rem, 5vw, 4rem);
	text-align: center;
}

.cl-home-quote blockquote {
	margin: 0;
	border: none;
	padding: 0;
}

.cl-home-quote__text {
	font-family: var(--font-serif);
	font-size: clamp(1.25rem, 2.5vw, 1.875rem);
	font-weight: 400;
	font-style: italic;
	color: #fff;
	margin: 0 0 0.875rem;
	line-height: 1.5;
	max-width: 720px;
	margin-inline: auto;
}

.cl-home-quote__sub {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────── */
/* ── HOME: BRAND STORY (dark, 2 col) ─────────────────────────── */
/* ─────────────────────────────────────────────────────────────── */

.cl-home-story {
	background: rgb(28, 28, 28);
	padding: var(--space-section) clamp(1.5rem, 4vw, 3.5rem);
}

.cl-home-story__grid {
	max-width: 1100px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr; /* stacked on mobile */
	gap: 2.5rem;
	align-items: center;
}

/* Imagen izquierda */
.cl-home-story__img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius-card);
}

/* Eyebrow "Nuestra historia" */
.cl-home-story__eyebrow {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	/* Dorado y no blush: el eyebrow sobre fondo oscuro va en dorado en todo el
	   sitio (ver .cl-eyebrow--gold en main.css). Esta regla lo fijaba por su
	   cuenta y se salteaba el modificador. */
	color: var(--color-gold);
	margin-bottom: 1rem;
}

.cl-home-story__title {
	font-family: var(--font-serif);
	font-size: var(--fs-section-lg);
	font-weight: 400;
	line-height: 1.15;
	color: #fff;
	margin: 0 0 1.5rem;
}

.cl-home-story__title em {
	font-style: italic;
	color: var(--color-blush);
}

.cl-home-story__text {
	font-size: 1rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 2rem;
}

/* Botón outline blanco */


/* El botón centrado, sólo en mobile. Con la columna apilada quedaba solo,
   pegado al margen izquierdo y con mucho aire vacío a la derecha; centrado
   cierra el bloque. El texto se deja alineado a la izquierda: centrar cuatro
   renglones los vuelve más difíciles de leer.

   width: max-content + margin auto en vez de text-align en el padre, porque
   text-align centraría también el párrafo. */
@media (max-width: 768px) {
	.cl-home-story__body > .cl-btn {
		display: flex;
		width: max-content;
		max-width: 100%;
		margin-inline: auto;
	}
}

@media (min-width: 769px) {
	.cl-home-story__grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

/* ─────────────────────────────────────────────────────────────── */
/* ── HOME: FEATURES GRID ─────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────── */

.cl-home-feats {
	background: rgb(245, 239, 230);
	padding: 80px clamp(1.5rem, 4vw, 3.5rem);
}

.cl-home-feats__title {
	font-family: var(--font-serif);
	font-size: var(--fs-section);
	font-weight: 400;
	color: var(--color-primary);
	text-align: center;
	margin: 0 0 3rem;
}

.cl-home-feats__title em { font-style: italic; }

.cl-home-feats__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2-col on mobile */
	gap: 1.25rem;
	max-width: 1100px;
	margin-inline: auto;
}

.cl-home-feat {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Número romano decorativo */
.cl-home-feat__num {
	font-family: var(--font-serif);
	font-size: 1.375rem;
	font-weight: 400;
	font-style: italic;
	color: var(--color-blush);
	line-height: 1;
}

.cl-home-feat__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-primary);
	margin: 0.25rem 0 0;
	line-height: 1.3;
}

.cl-home-feat__text {
	font-size: 0.9rem;
	line-height: 1.65;
	color: var(--text-muted);
	margin: 0;
}

/* home feats: 2-col base, 4-col at 901px+ */
.cl-home-feats { padding: 40px 1.5rem; }

@media (min-width: 901px) {
	.cl-home-feats { padding: 80px clamp(1.5rem, 4vw, 3.5rem); }
	.cl-home-feats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
}

/* ─────────────────────────────────────────────────────────────── */
/* ── POLÍTICA DE PRIVACIDAD ──────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────── */

/* Hero — misma estructura que las otras páginas legales */
.cl-privacy-hero {
	position: relative;
	height: 300px; /* shorter on mobile */
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background-color: var(--bg-light); /* antes rgb(242,242,242): un gris fuera de paleta */
	background-size: cover;
	background-position: 47% 92%;
	overflow: hidden;
}

.cl-privacy-hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
}

.cl-privacy-hero__content {
	position: relative;
	z-index: 1;
	text-align: left;
	padding: 0 1.5rem 4rem;
}

.cl-privacy-hero__title {
	font-family: var(--font-serif);
	font-size: var(--fs-title);
	font-weight: 400;
	color: #fff;
	margin: 0;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* El remate en cursiva, en blush — el mismo patrón que los otros cinco heroes.
   /envios/ y /pagos/ eran los dos únicos que lo tenían en blanco: la última
   línea no se distinguía del resto del título y el efecto se perdía. Se ve
   ahora que el eyebrow pasó a dorado, porque los tres colores del hero —eyebrow
   dorado, título blanco, remate blush— quedaron a la vista.

   La regla cuelga del título compartido, que además usan /terminos-y-condiciones/
   y /politica-de-privacidad/: verificado que esos dos NO llevan <em>, así que
   no los toca. */
.cl-privacy-hero__title em {
	font-style: italic;
	color: var(--color-blush);
}

@media (min-width: 601px) {
	.cl-privacy-hero { height: 450px; }
}

/* Sección de contenido */
.cl-privacy-body {
	background: #fff;
	padding: 4rem clamp(1.5rem, 5vw, 4rem) 5rem;
}

/* Wrapper interior — ancho de lectura cómodo */
.cl-privacy-wrap {
	max-width: 780px;
	margin-inline: auto;
}

/* Artículo de contenido legal */
.cl-privacy-content {
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--color-primary);
}

/* Título H2 principal */
.cl-privacy-content h2 {
	font-family: var(--font-serif);
	font-size: 1.375rem;
	font-weight: 400;
	color: var(--color-primary);
	margin: 0 0 1.5rem;
	letter-spacing: 0.02em;
}

/* Títulos H3 de cada sección */
.cl-privacy-content h3 {
	font-family: var(--font-serif);
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-primary);
	margin: 2rem 0 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Párrafos y listas */
.cl-privacy-content p   { margin: 0 0 1rem; }
.cl-privacy-content ul  { margin: 0 0 1rem; padding-left: 1.375rem; }
.cl-privacy-content li  { margin-bottom: 0.5rem; }

/* Separadores */
.cl-privacy-content hr {
	border: none;
	border-top: 1px solid var(--border);
	margin: 2rem 0;
}

/* Links internos */
.cl-privacy-link {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.cl-privacy-link:hover { color: var(--text-muted); }

/* Pie de artículo */
.cl-privacy-footer {
	font-size: 0.875rem;
	color: var(--text-muted);
	margin-top: 0.5rem;
}

/* ─────────────────────────────────────────────────────────────── */
/* ── PÁGINA: ENVÍOS Y PAGOS ─────────────────────────────────── */
/* Reutiliza .cl-privacy-hero / .cl-privacy-body / .cl-privacy-  */
/* wrap del bloque legal de arriba. Solo extiende lo necesario.  */
/* ─────────────────────────────────────────────────────────────── */

/* Eyebrow visible sobre fondo oscuro del hero */
.cl-shipping-hero .cl-eyebrow--gold {
	opacity: 0.9;
}

/* Amplía el ancho de lectura respecto a las páginas legales */
.cl-shipping-wrap {
	max-width: var(--container-read);
}

/* Headings de sección — más grandes que los h3 legales */
/* Va en la columna de lectura de 860px, así que usa el paso de subtítulo y no
   el de sección: 36px ahí adentro sería desproporcionado. */
.cl-shipping-h2 {
	font-family: var(--font-serif);
	font-size: var(--fs-sub);
	font-weight: 400;
	color: var(--color-primary);
	margin: 0 0 1.125rem;
	letter-spacing: 0.01em;
}

.cl-shipping-hr {
	border: none;
	border-top: 1px solid var(--border);
	margin: 2.5rem 0;
}

/* ── Stats bar ──────────────────────────────────────────────── */
.cl-ship-stats {
	background: var(--color-primary);
	color: #fff;
}

.cl-ship-stats__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 0 var(--container-pad);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cl-ship-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1.25rem 1rem;
	gap: 0.25rem;
	border-right: 1px solid rgba(255,255,255,.2);
	border-bottom: 1px solid rgba(255,255,255,.2);
}

/* Mobile: 2 columns — border cleanup scoped so it doesn't bleed into desktop */
@media (max-width: 768px) {
	.cl-ship-stats__item:nth-child(2n) { border-right: none; }
	.cl-ship-stats__item:nth-last-child(-n+2) { border-bottom: none; }
	.cl-ship-stats__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.cl-ship-stats__item strong {
	font-family: var(--font-serif);
	font-size: 1.0625rem;
	font-weight: 400;
}

.cl-ship-stats__item span {
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.65;
}

/* Express item: blush accent dot */
.cl-ship-stats__item--express strong::before {
	content: '•';
	color: var(--color-blush);
	margin-right: 0.4em;
	font-family: var(--font-sans);
}

@media (min-width: 769px) {
	.cl-ship-stats__inner { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	/* Shipping page has 4 items — override to 4 columns */
	.cl-shipping-page .cl-ship-stats__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cl-ship-stats__item { border-right: 1px solid rgba(255,255,255,.2); border-bottom: none; }
	.cl-ship-stats__item:last-child { border-right: none; }
}

/* ── Cards de envío ─────────────────────────────────────────── */
.cl-ship-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 1.5rem 0 1.25rem;
}

@media (min-width: 480px) {
	.cl-ship-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.cl-ship-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.cl-ship-card {
	padding: 1.375rem 1.25rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	background: #fff;
}

.cl-ship-card--highlight {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

.cl-ship-card--express {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
	position: relative;
}

.cl-ship-card--express .cl-ship-card__label {
	color: var(--color-blush);
	opacity: 1;
}

.cl-ship-card--express .cl-ship-card__note {
	opacity: 0.65;
}

.cl-ship-card--express .cl-ship-card__cta {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-blush);
	text-decoration: none;
}

.cl-ship-card--express .cl-ship-card__cta:hover {
	opacity: 0.8;
}

.cl-ship-card__label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.6;
	margin: 0 0 0.375rem;
}

.cl-ship-card--highlight .cl-ship-card__label {
	opacity: 0.7;
}

.cl-ship-card__value {
	font-family: var(--font-serif);
	font-size: 1.1875rem;
	font-weight: 400;
	margin: 0 0 0.375rem;
}

.cl-ship-card__note {
	font-size: 0.8125rem;
	opacity: 0.7;
	margin: 0;
	line-height: 1.4;
}

/* ── Métodos de pago ────────────────────────────────────────── */
.cl-ship-methods {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 1.5rem 0;
}

.cl-ship-method {
	display: flex;
	align-items: flex-start;
	gap: 1.125rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--border);
}

.cl-ship-method:first-child {
	border-top: 1px solid var(--border);
}

.cl-ship-method__icon {
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-primary);
	border-radius: var(--radius-card);
}

.cl-ship-method__icon svg {
	width: 1rem;
	height: 1rem;
	stroke: #fff;
}

.cl-ship-method strong {
	display: block;
	font-size: 0.9375rem;
	margin-bottom: 0.25rem;
}

.cl-ship-method p {
	font-size: 0.875rem;
	color: #5a534e;
	margin: 0;
	line-height: 1.6;
}

/* ── Envíos a hoteles ───────────────────────────────────────── */
.cl-ship-hotel {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	margin: 1.25rem 0;
	padding: 1.5rem;
	background: var(--color-primary);
	color: #fff;
	border-radius: var(--radius-card);
}

.cl-ship-hotel__icon {
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: var(--radius-card);
}

.cl-ship-hotel__icon svg {
	width: 1.125rem;
	height: 1.125rem;
	stroke: rgba(255,255,255,0.8);
}

.cl-ship-hotel__eyebrow {
	display: block;
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-blush);
	margin-bottom: 0.375rem;
}

.cl-ship-hotel strong {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: 0.375rem;
}

.cl-ship-hotel p {
	font-size: 0.875rem;
	color: rgba(255,255,255,0.65);
	margin: 0;
	line-height: 1.65;
}

.cl-ship-hotel__link {
	display: inline-block;
	margin-top: 0.625rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-blush);
	text-decoration: none;
}

.cl-ship-hotel__link:hover { opacity: 0.8; }

/* Nota de seguridad bajo los métodos */
.cl-ship-trust-note {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--text-muted);
	margin: 0;
}

.cl-ship-trust-note svg {
	flex-shrink: 0;
	stroke: var(--text-muted);
}

/* ── FAQ ────────────────────────────────────────────────────── */
.cl-ship-faqs {
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
}

.cl-ship-faq {
	border-top: 1px solid var(--border);
	background: transparent;
}

.cl-ship-faq:last-child {
	border-bottom: 1px solid var(--border);
}

.cl-ship-faq summary {
	font-size: 0.9375rem;
	font-weight: 400;
	padding: 1.25rem 0;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	user-select: none;
	color: var(--color-primary);
	letter-spacing: 0.01em;
}

.cl-ship-faq summary::-webkit-details-marker { display: none; }

.cl-ship-faq summary::after {
	content: '';
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23c9a060' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px;
	transition: transform 0.22s ease;
}

.cl-ship-faq[open] summary::after {
	transform: rotate(180deg);
}

.cl-ship-faq p {
	margin: 0;
	padding: 0 2rem 1.375rem 0;
	font-size: 0.9rem;
	color: #5a534e;
	line-height: 1.75;
}

/* ── Pasos de despacho (ol) ─────────────────────────────────── */
.cl-ship-steps {
	list-style: none;
	padding: 0;
	margin: 1.25rem 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	overflow: hidden;
}

.cl-ship-step {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	padding: 1.125rem 1.25rem;
	background: #fff;
	border-bottom: 1px solid var(--border);
}

.cl-ship-step:last-child { border-bottom: none; }

.cl-ship-step__num {
	font-family: var(--font-serif);
	font-size: 1.375rem;
	font-weight: 400;
	color: var(--border);
	flex-shrink: 0;
	line-height: 1.2;
	min-width: 2rem;
}

.cl-ship-step strong {
	display: block;
	font-size: 0.9375rem;
	margin-bottom: 0.2rem;
}

.cl-ship-step p {
	font-size: 0.875rem;
	color: var(--text-muted);
	margin: 0;
	line-height: 1.5;
}

/* ── Financiación flexible (pagos) ──────────────────────────────
   Centrado completo. Estaba a medias: el eyebrow llevaba --center y el párrafo
   y el bloque de cifras tenían `margin: auto`, así que las CAJAS quedaban
   centradas pero el texto adentro seguía alineado a la izquierda —y las tres
   cifras lo forzaban con un `text-align:left` inline—. Leído de corrido, el
   título arrancaba pegado al borde izquierdo debajo de un eyebrow centrado.

   Una sola declaración en el contenedor alcanza para los cinco elementos: el
   h2 y el párrafo la heredan, las cifras la heredan una vez sacado el inline,
   y el botón —que es inline-flex dentro de un bloque— se centra con el mismo
   text-align. Los `margin: auto` que ya estaban se quedan: siguen limitando el
   ancho del párrafo a 52ch y el de las cifras a 520px, que es lo que evita que
   una línea centrada se estire de punta a punta. */
.cl-pagos-cuotas {
	text-align: center;
}

/* ── Trust badges (pagos) ───────────────────────────────────── */
.cl-ship-trust-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 1.25rem 0;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.cl-ship-trust-badge {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	flex: 1 1 50%;
	padding: 1rem 0.875rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-right: 1px solid var(--border);
}

.cl-ship-trust-badge:nth-child(2n) { border-right: none; }
.cl-ship-trust-badge:nth-child(n+3) { border-top: 1px solid var(--border); }

@media (min-width: 600px) {
	.cl-ship-trust-badge { flex-basis: 25%; }
	.cl-ship-trust-badge:nth-child(2n) { border-right: 1px solid var(--border); }
	.cl-ship-trust-badge:nth-child(4n) { border-right: none; }
	.cl-ship-trust-badge:nth-child(n+3) { border-top: none; }
}

.cl-ship-trust-badge svg {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	stroke: var(--color-primary);
}

/* ── Nota envíos internacionales ────────────────────────────── */
.cl-ship-intl-note {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin: 1rem 0;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	background: #faf8f6;
}

.cl-ship-intl-note__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
	background: var(--color-primary);
	border-radius: var(--radius-card);
	margin-top: 0.125rem;
}

.cl-ship-intl-note__icon svg {
	stroke: #fff;
}

.cl-ship-intl-note strong {
	display: block;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.375rem;
}

.cl-ship-intl-note p {
	font-size: 0.9375rem;
	color: var(--text-muted);
	margin: 0;
	line-height: 1.65;
}

/* ── FAQ por categoría ──────────────────────────────────────── */
.cl-faq-section {
	margin-bottom: 2.5rem;
}

.cl-faq-section .cl-eyebrow svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

.cl-faq-cat {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	font-family: var(--font-serif);
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	font-weight: 400;
	color: var(--color-primary);
	margin: 0 0 1.25rem;
	padding-bottom: 1rem;
	/* Era 2px negro. Es el elemento estructural más repetido de la página
	   (uno por categoría), así que es donde el gold rinde más. */
	border-bottom: 2px solid var(--color-gold);
	letter-spacing: 0.01em;
}

.cl-faq-cat__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	/* Mismo tratamiento que los iconos de contacto: tinte y borde en gold
	   en vez del cuadrado negro macizo. */
	background: rgba(201, 160, 96, 0.10);
	border: 1px solid rgba(201, 160, 96, 0.35);
	border-radius: var(--radius-card);
}

.cl-faq-cat__icon svg {
	width: 0.9375rem;
	height: 0.9375rem;
	stroke: var(--color-gold);
}

/* ── Hub de Envíos y Pagos ──────────────────────────────────── */
.cl-hub-intro {
	font-size: 1rem;
	line-height: 1.7;
	margin: 0 0 2rem;
	color: var(--color-primary);
}

.cl-hub-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-bottom: 2.5rem;
}

@media (min-width: 600px) {
	.cl-hub-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cl-hub-card {
	display: flex;
	flex-direction: column;
	padding: 1.75rem 1.5rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	background: #fff;
	text-decoration: none;
	color: var(--color-primary);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cl-hub-card:hover {
	border-color: var(--color-primary);
	box-shadow: 0 4px 16px rgba(0,0,0,.06);
}

.cl-hub-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background: rgba(201, 160, 96, 0.10);
	border: 1px solid rgba(201, 160, 96, 0.30);
	border-radius: 50%;
	margin-bottom: 1rem;
}

.cl-hub-card__icon svg {
	width: 1.25rem;
	height: 1.25rem;
	stroke: var(--color-gold);
}

.cl-hub-card__title {
	font-family: var(--font-serif);
	font-size: 1.1875rem;
	font-weight: 400;
	margin: 0 0 0.5rem;
}

.cl-hub-card__desc {
	font-size: 0.875rem;
	color: var(--text-muted);
	line-height: 1.55;
	margin: 0 0 1.25rem;
	flex-grow: 1;
}

.cl-hub-card__link {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-primary);
}

/* Trust strip del hub */
.cl-hub-trust {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	overflow: hidden;
}

@media (min-width: 769px) {
	.cl-hub-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.cl-hub-trust__item {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 1rem 1.125rem;
	font-size: 0.8125rem;
	font-weight: 600;
	border-right: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	background: #fff;
}

@media (min-width: 769px) {
	.cl-hub-trust__item:last-child { border-right: none; }
	.cl-hub-trust__item { border-bottom: none; }
}

.cl-hub-trust__item:nth-child(2n) { border-right: none; }
.cl-hub-trust__item:nth-last-child(-n+2) { border-bottom: none; }

@media (min-width: 769px) {
	.cl-hub-trust__item:nth-child(2n)        { border-right: 1px solid var(--border); }
	.cl-hub-trust__item:nth-last-child(-n+2) { border-bottom: none; }
}

.cl-hub-trust__item svg {
	width: 1.125rem;
	height: 1.125rem;
	stroke: var(--color-primary);
	flex-shrink: 0;
}

/* ── CTA final ──────────────────────────────────────────────── */
.cl-ship-cta {
	text-align: center;
	padding: 2.5rem 1.5rem;
	background: var(--bg-light);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
}

.cl-ship-cta__heading {
	font-family: var(--font-serif);
	font-size: 1.375rem;
	font-weight: 400;
	margin: 0 0 0.375rem;
}

.cl-ship-cta__sub {
	font-size: 0.875rem;
	color: var(--text-muted);
	margin: 0 0 1.5rem;
}

.cl-ship-cta__btns {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────────── */
/* ── PLUGIN: GRABADO PERSONALIZADO ──────────────────────────── */
/* Estilos para el checkbox de grabado en la ficha de producto.   */
/* Renderizado por el plugin Casa Lopez Helper (engraving-addon). */
/* ─────────────────────────────────────────────────────────────── */

/* ── Grabado láser — checkbox elegante blush/dorado ─────── */

.clh-engraving-field {
	margin: 1rem 0;
	border: 1.5px solid var(--border);
	background: var(--bg-light);
	transition: border-color .3s, background .3s;
}
/* Activado → la card se pone negra con dorado (pedido). */
.clh-engraving-field:has(input:checked) {
	border-color: var(--color-gold);
	background: var(--bg-dark);
}

.clh-engraving-label {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: .875rem;
	align-items: start;
	padding: .875rem 1rem;
	cursor: pointer;
	user-select: none;
}
.clh-engraving-label input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* Custom checkmark box */
.clh-engraving-check {
	width: 20px;
	height: 20px;
	min-width: 20px;
	border: 1.5px solid var(--border);
	display: grid;
	place-items: center;
	margin-top: 2px;
	color: transparent;
	transition: background .25s, border-color .25s, color .25s;
}
.clh-engraving-field:has(input:checked) .clh-engraving-check {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: #fff;
}
.clh-engraving-check svg {
	width: 11px;
	height: 11px;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0;
	transform: scale(.6);
	transition: opacity .2s, transform .2s;
}
.clh-engraving-field:has(input:checked) .clh-engraving-check svg {
	opacity: 1;
	transform: scale(1);
}

.clh-engraving-copy {
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

/* Eyebrow: "GRABADO LÁSER" */
.clh-engraving-eyebrow {
	font-size: .5625rem;
	font-weight: 700;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--color-blush);
	line-height: 1;
}

.clh-engraving-title-row {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
}

.clh-engraving-title {
	font-size: .9375rem;
	font-weight: 700;
	color: var(--text-primary);
	line-height: 1.3;
}

.clh-engraving-price-pill {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	background: var(--color-blush);
	color: var(--text-primary);
	border-radius: 20px;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .04em;
	white-space: nowrap;
	transition: background .3s;
}
.clh-engraving-field:has(input:checked) .clh-engraving-price-pill {
	background: var(--color-gold);
}

/* Con la card en negro, título y sub pasan a claro para leer. El eyebrow
   "GRABADO LÁSER" NO se toca: se mantiene blush a propósito (pedido). */
.clh-engraving-field:has(input:checked) .clh-engraving-title {
	color: #fff;
}
.clh-engraving-field:has(input:checked) .clh-engraving-sub {
	color: rgba(255, 255, 255, .72);
}

.clh-engraving-sub {
	font-size: .8rem;
	color: var(--text-muted);
	line-height: 1.45;
}

/* Dimensiones del producto (bloque de texto simple) */
.clh-product-dimensions {
	margin: 1rem 0;
	font-size: 0.9rem;
	color: var(--color-primary);
}

.clh-product-dimensions p {
	margin: 0.2rem 0;
}

/* Bloque después del summary (donde se insertan dims y grabado vía hooks) */
.cl-sp-after-summary {
	padding-block: 0.5rem;
}

/* ── 25. BLOG ─────────────────────────────────────────────────────── */

/* Grid de posts (index.php / archive.php) */
.cl-posts-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	margin-block: 2.5rem;
}

@media (min-width: 641px) {
	.cl-posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1025px) {
	.cl-posts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tarjeta de post */
.cl-post-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #ede7e3;
	border-radius: var(--radius-card);
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.cl-post-card:hover {
	box-shadow: 0 6px 24px rgba(28, 28, 28, 0.08);
}

.cl-post-card__thumb {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.cl-post-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease, opacity 500ms var(--ease-out-warm, cubic-bezier(0.22,1,0.36,1));
}

.cl-post-card:hover .cl-post-card__thumb img {
	transform: scale(1.04);
}

.cl-post-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.5rem;
	gap: 0.75rem;
}

.cl-post-card__title {
	font-family: var(--font-serif);
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0;
	line-height: 1.35;
}

.cl-post-card__title a {
	color: var(--color-primary);
	text-decoration: none;
}

.cl-post-card__title a:hover {
	color: var(--color-gold);
}

.cl-post-card__excerpt {
	color: var(--text-muted);
	font-size: 0.9rem;
	line-height: 1.65;
	flex: 1;
	margin: 0;
}

/* Post individual (single.php) */
.cl-post__hero {
	margin: 0 0 2rem;
	max-height: 520px;
	overflow: hidden;
}

.cl-post__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cl-post__header {
	margin-bottom: 1.5rem;
	border-bottom: 1px solid #ede7e3;
	padding-bottom: 1.5rem;
}

.cl-post__header h1 {
	font-family: var(--font-serif);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.25;
	margin: 0.5rem 0 0;
}

.cl-post__content {
	max-width: 720px;
	font-size: 1rem;
	line-height: 1.8;
	color: var(--color-primary);
}

.cl-post__content h2,
.cl-post__content h3 {
	font-family: var(--font-serif);
	margin-top: 2rem;
}

.cl-post__content a {
	color: var(--color-primary);
	text-decoration: underline;
	text-decoration-color: var(--color-blush);
	text-underline-offset: 3px;
	transition: text-decoration-color var(--ease);
}

.cl-post__content a:hover {
	text-decoration-color: var(--color-primary);
}

.cl-post__content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-card);
}

/* Encabezado de archive */
.cl-archive__header {
	margin-bottom: 2rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #ede7e3;
}

.cl-archive__header h1 {
	font-family: var(--font-serif);
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin: 0;
}

/* ============================================================
   Home — Ticker (marquee de marca)
   ============================================================ */
.cl-home-ticker {
	background: var(--color-gold);
	border-top: 1px solid var(--color-gold-hover);
	border-bottom: 1px solid var(--color-gold-hover);
	overflow: hidden;
	padding-block: 10px;
}

.cl-home-ticker__track {
	display: flex;
	align-items: center;
	gap: 2.25rem;
	width: max-content;
	/* 90s y no 45s: la pista pasó de 2 repeticiones a 4 y la velocidad es
	   media_pista/duración. 1831px/45s = 41px/s → 3661px/90s = 41px/s. */
	animation: cl-ticker-scroll 90s linear infinite;
	will-change: transform;
}

.cl-home-ticker__item {
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: rgba(28, 28, 28, 0.75);
	white-space: nowrap;
}

.cl-home-ticker__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: rgba(28, 28, 28, 0.35);
	flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
	.cl-home-ticker__track { animation: none; }
}

/* ============================================================
   Home — Split Banners (50/50 destacados)
   ============================================================ */
.cl-split-banners {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.cl-split-banner {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 360px;
	padding: clamp(1.75rem, 4vw, 3rem);
	background-color: var(--bg-mid);
	background-size: cover;
	background-position: center;
	color: var(--text-white);
	overflow: hidden;
	isolation: isolate;
	transition: background-size var(--ease-slow);
}

.cl-split-banner__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(28,28,28,0) 35%, rgba(28,28,28,0.7) 100%);
	transition: background var(--ease-slow);
}

.cl-split-banner--dark .cl-split-banner__overlay {
	background:
		linear-gradient(180deg, rgba(28,28,28,0.35) 0%, rgba(28,28,28,0.85) 100%);
}

.cl-split-banner__copy {
	max-width: 32ch;
}

.cl-split-banner__copy .cl-eyebrow,
.cl-split-banner__copy .cl-eyebrow--gold {
	display: block;
	margin-bottom: 0.75rem;
}

.cl-split-banner__title {
	font-family: var(--font-serif);
	font-size: var(--fs-section-sm);
	font-weight: 400;
	line-height: 1.15;
	color: var(--text-white);
	margin-bottom: 1rem;
}

.cl-split-banner__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-blush);
	padding-bottom: 0.4rem;
	border-bottom: 1.5px solid transparent;
	transition: color var(--ease), border-color var(--ease), transform var(--ease);
}

.cl-split-banner:hover .cl-split-banner__cta,
.cl-split-banner:focus-visible .cl-split-banner__cta {
	color: var(--text-white);
	border-bottom-color: var(--color-blush);
	transform: translateX(4px);
}

.cl-split-banner:hover .cl-split-banner__overlay {
	background:
		linear-gradient(180deg, rgba(28,28,28,0.15) 0%, rgba(28,28,28,0.8) 100%);
}

@media (min-width: 769px) {
	.cl-split-banners { grid-template-columns: 1fr 1fr; }
	.cl-split-banner  { min-height: 480px; }
}

/* ============================================================
   Home — Quote Strip (cita oscura entre secciones)
   ============================================================ */
.cl-quote-strip {
	padding-block: clamp(3rem, 6vw, 5rem);
	position: relative;
}

.cl-quote-strip__inner {
	max-width: 780px;
	text-align: center;
}

.cl-quote-strip__quote {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.375rem, 2.4vw, 2rem);
	line-height: 1.4;
	color: var(--text-white);
	margin: 0;
	position: relative;
	padding-block: 1.5rem;
}

.cl-quote-strip__quote::before,
.cl-quote-strip__quote::after {
	content: '';
	display: block;
	width: 56px;
	height: 1px;
	margin-inline: auto;
	background: var(--line-blush);
}

.cl-quote-strip__quote::before { margin-bottom: 1.5rem; }
.cl-quote-strip__quote::after  { margin-top: 1.5rem; }

.cl-quote-strip__author {
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--color-blush);
	margin: 0;
}

/* ============================================================
   Home — Features (4 USPs)
   ============================================================ */
.cl-home-features {
	background-color: var(--bg-light);
}

.cl-home-features__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem 2rem;
}

.cl-home-feature {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding-inline: 0.5rem;
}

.cl-home-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	/* Dorado RELLENO, no de trazo fino: sobre el crema el dorado da 2,28:1 de
	   contraste y un aro de 1px se pierde. Relleno, el círculo se lee entero y
	   el ícono va en oscuro encima. Los svg son stroke="currentColor", así que
	   color manda sobre el trazo. */
	background-color: var(--color-gold);
	color: var(--color-primary);
	transition: transform var(--ease), background-color var(--ease);
}

.cl-home-feature__icon svg {
	width: 28px;
	height: 28px;
	display: block;
}

/* Sólo el desplazamiento. Sin glow: la sombra difusa de color quedó descartada
   por decisión de Pato cuando se rediseñaron los botones de Preguntas
   Frecuentes. */
.cl-home-feature:hover .cl-home-feature__icon {
	transform: translateY(-2px);
	background-color: var(--color-gold-hover);
}

.cl-home-feature__title {
	font-family: var(--font-serif);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--text-primary);
	margin: 0;
}

.cl-home-feature__desc {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--text-muted);
	margin: 0;
	max-width: 28ch;
}

@media (min-width: 601px) {
	.cl-home-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1025px) {
	.cl-home-features__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
}

/* ═══════════════════════════════════════════════════════════════ */
/* ── PÁGINA: CUERO CARPINCHO ─────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════ */

/* 1. Hero */
.cl-carp-hero {
	position: relative;
	min-height: 88vh;
	display: flex;
	align-items: flex-end;
	background: var(--bg-dark);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.cl-carp-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(10,8,6,0.92) 0%,
		rgba(10,8,6,0.55) 50%,
		rgba(10,8,6,0.25) 100%
	);
}

.cl-carp-hero__content {
	position: relative;
	z-index: 1;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: clamp(3rem, 8vw, 6rem) var(--container-pad);
	width: 100%;
}

.cl-carp-hero__title {
	font-family: var(--font-serif);
	font-size: var(--fs-display);
	font-weight: 400;
	color: #fff;
	line-height: 1;
	letter-spacing: -0.01em;
	margin: 0.5rem 0 1.25rem;
}

.cl-carp-hero__title em {
	font-style: italic;
	color: var(--color-blush);
}

.cl-carp-hero__sub {
	font-size: clamp(1rem, 2vw, 1.25rem);
	color: var(--on-dark-soft);
	margin: 0 0 2rem;
	max-width: 44ch;
	line-height: 1.5;
}



/* 2. Intro */
.cl-carp-intro {
	padding: var(--space-section-lg) var(--container-pad);
	background: #fff;
}

.cl-carp-intro__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem 5rem;
}

@media (min-width: 900px) {
	.cl-carp-intro__inner { grid-template-columns: 1fr 340px; align-items: start; }
}

.cl-carp-intro__title {
	font-family: var(--font-serif);
	font-size: var(--fs-section-lg);
	font-weight: 400;
	color: var(--color-primary);
	margin: 0.5rem 0 1.5rem;
	line-height: 1.2;
}

.cl-carp-intro__text p {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--text-muted);
	margin: 0 0 1.25rem;
}

.cl-carp-intro__text p:last-child { margin-bottom: 0; }

.cl-carp-intro__aside {
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 2px solid var(--color-primary);
}

.cl-carp-fact {
	padding: 1.375rem 0;
	border-bottom: 1px solid var(--border);
}

.cl-carp-fact__n {
	display: block;
	font-family: var(--font-serif);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--color-primary);
	margin-bottom: 0.375rem;
}

.cl-carp-fact__label {
	font-size: 0.8125rem;
	color: var(--text-muted);
	line-height: 1.55;
	margin: 0;
}

/* 3. Características */
.cl-carp-chars {
	padding: var(--space-section-lg) var(--container-pad);
	background: var(--bg-section);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.cl-carp-chars__head {
	max-width: var(--container-max);
	margin-inline: auto;
	margin-bottom: 3rem;
}

.cl-carp-chars__title {
	font-family: var(--font-serif);
	font-size: var(--fs-section-sm);
	font-weight: 400;
	color: var(--color-primary);
	margin: 0.375rem 0 0;
	line-height: 1.25;
}

.cl-carp-chars__title em { font-style: italic; }

.cl-carp-chars__grid {
	max-width: var(--container-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 600px) {
	.cl-carp-chars__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1025px) {
	.cl-carp-chars__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.cl-carp-char {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.cl-carp-char__icon {
	width: 2.75rem;
	height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-primary);
	border-radius: var(--radius-card);
	flex-shrink: 0;
}

.cl-carp-char__icon svg {
	width: 1.25rem;
	height: 1.25rem;
	stroke: #fff;
}

.cl-carp-char__title {
	font-family: var(--font-serif);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--color-primary);
	margin: 0;
	line-height: 1.3;
}

.cl-carp-char__text {
	font-size: 0.9375rem;
	color: var(--text-muted);
	line-height: 1.65;
	margin: 0;
}

/* 4. Premium */
.cl-carp-premium {
	background: var(--color-primary);
	padding: var(--space-section-lg) var(--container-pad);
	color: #fff;
}

.cl-carp-premium__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem 5rem;
}

@media (min-width: 900px) {
	.cl-carp-premium__inner { grid-template-columns: 1fr 1fr; align-items: center; }
}

.cl-carp-premium__title {
	font-family: var(--font-serif);
	font-size: var(--fs-section-lg);
	font-weight: 400;
	color: #fff;
	margin: 0.5rem 0 1.5rem;
	line-height: 1.2;
}

.cl-carp-premium__title em {
	font-style: italic;
	color: var(--color-blush);
}

.cl-carp-premium__text {
	font-size: 1rem;
	line-height: 1.75;
	color: rgba(255,255,255,0.65);
	margin: 0 0 1.125rem;
}

.cl-carp-premium__text:last-child { margin-bottom: 0; }

.cl-carp-blockquote {
	margin: 0;
	padding: 2rem 2rem 2rem 2.5rem;
	border-left: 3px solid var(--color-blush);
	background: rgba(255,255,255,0.04);
}

.cl-carp-blockquote p {
	font-family: var(--font-serif);
	font-size: clamp(1.125rem, 2.5vw, 1.5rem);
	font-weight: 400;
	font-style: italic;
	color: rgba(255,255,255,0.9);
	line-height: 1.5;
	margin: 0 0 1rem;
}

.cl-carp-blockquote footer {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-blush);
}

/* 5. Casa Lopez + Carpincho */
.cl-carp-cl {
	padding: var(--space-section-lg) var(--container-pad);
	background: #fff;
}

.cl-carp-cl__inner {
	max-width: 900px;
	margin-inline: auto;
}

.cl-carp-cl__title {
	font-family: var(--font-serif);
	font-size: var(--fs-section-sm);
	font-weight: 400;
	color: var(--color-primary);
	margin: 0.375rem 0 2rem;
	line-height: 1.25;
}

.cl-carp-cl__title em { font-style: italic; }

.cl-carp-cl__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media (min-width: 769px) {
	.cl-carp-cl__cols { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

.cl-carp-cl__cols p {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--text-muted);
	margin: 0;
}

/* 6. Productos */
.cl-carp-products {
	padding: var(--space-section-lg) var(--container-pad);
	background: var(--bg-section);
	border-top: 1px solid var(--border);
}

.cl-carp-products__head {
	max-width: var(--container-max);
	margin-inline: auto 0;
	margin-bottom: 2.5rem;
}

.cl-carp-products__title {
	font-family: var(--font-serif);
	font-size: var(--fs-section-sm);
	font-weight: 400;
	color: var(--color-primary);
	margin: 0.375rem 0 0;
}

.cl-carp-products .cl-prod-grid {
	max-width: var(--container-max);
	margin-inline: auto;
}

/* 7. CTA */
.cl-carp-cta {
	padding: var(--space-section-lg) var(--container-pad);
	background: var(--bg-dark);
	text-align: left;
}

.cl-carp-cta__inner {
	max-width: 720px;
	margin-inline: auto;
}

.cl-carp-cta__title {
	font-family: var(--font-serif);
	font-size: var(--fs-section);
	font-weight: 400;
	color: #fff;
	margin: 0.5rem 0 1.25rem;
	line-height: 1.25;
}

.cl-carp-cta__sub {
	font-size: 1.0625rem;
	color: rgba(255,255,255,0.6);
	max-width: 52ch;
	margin: 0 auto 2.5rem;
	line-height: 1.65;
}

/* El layout lo define el bloque "Pares de botones del mismo ancho", más arriba. */

/* ═══════════════════════════════════════════════════════════════ */
/* ── PÁGINA: UBICACIÓN ───────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════ */

/* Wrapper de fondo para la sección dos locales */
.cl-ubi-stores-wrap {
	background: var(--bg-parch);
}

/* Dos locales — grid */
.cl-ubi-stores {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	padding: 3rem var(--container-pad);
	max-width: var(--container-max);
	margin-inline: auto;
}

@media (min-width: 769px) {
	.cl-ubi-stores {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
		align-items: start;
	}
}

/* Tarjeta de local */
.cl-ubi-store {
	padding: 2rem 0;
	border-top: 1px solid var(--border);
}

@media (min-width: 769px) {
	.cl-ubi-store {
		padding: 2.5rem 2rem;
		border-top: none;
		border-left: 1px solid var(--border);
	}
	.cl-ubi-store:first-child { border-left: none; padding-left: 0; }
}

.cl-ubi-store--main {
	border-color: var(--color-primary);
}

.cl-ubi-store__head { margin-bottom: 1.5rem; }

.cl-ubi-store__badge {
	display: inline-block;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	background: var(--color-primary);
	color: #fff;
	padding: 0.25rem 0.625rem;
	border-radius: var(--radius-card);
	margin-bottom: 1rem;
}

.cl-ubi-store__badge--ghost {
	background: transparent;
	color: var(--color-primary);
	box-shadow: inset 0 0 0 1.5px var(--color-primary);
}

.cl-ubi-store__num {
	font-family: var(--font-serif);
	font-size: clamp(3rem, 7vw, 5rem);
	font-weight: 400;
	color: var(--color-primary);
	line-height: 1;
	margin: 0 0 0.25rem;
	letter-spacing: -0.02em;
}

.cl-ubi-store__street {
	font-size: 0.9375rem;
	color: var(--text-muted);
	margin: 0;
}

/* Lista de datos del local */
.cl-ubi-store__list {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.cl-ubi-store__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-size: 0.9375rem;
	color: var(--text-muted);
	line-height: 1.5;
}

.cl-ubi-store__list svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	stroke: var(--color-primary);
	margin-top: 0.2rem;
}

.cl-ubi-store__list a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Nota aclaratoria entre los dos locales */
.cl-ubi-note {
	grid-column: 1 / -1;
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	padding: 1.125rem 1.5rem;
	background: var(--bg-section);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	margin-top: 0.5rem;
}

.cl-ubi-note svg {
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
	stroke: var(--color-primary);
	margin-top: 0.125rem;
}

.cl-ubi-note p {
	font-size: 0.9375rem;
	color: var(--text-muted);
	line-height: 1.65;
	margin: 0;
}

/* Mapa */
.cl-ubi-map-wrap {
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.cl-ubi-map-wrap iframe {
	width: 100%;
	height: clamp(220px, 45vw, 480px);
	display: block;
}

/* Cómo llegar — heading */
/* Cómo llegar — heading (parch background) */
/* Heading: centered, restrained size — utility section, not hero */
.cl-ubi-how-head {
	text-align: left;
	max-width: 480px;
	margin-inline: auto;
	margin-bottom: 3rem;
}
.cl-ubi-how-head__title {
	color: var(--color-primary);
	font-size: var(--fs-section-sm);
	font-weight: 400;
	letter-spacing: -0.01em;
	margin: 0.5rem 0 0;
}

/* Cómo llegar — grid, constrained so items don't span 2400px */
.cl-ubi-how {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	max-width: var(--container-max);
	margin-inline: auto;
}

@media (min-width: 600px) {
	.cl-ubi-how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.cl-ubi-how--4col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Cards: refined — sharp corners, thin border, white on parch */
.cl-ubi-how__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.125rem;
	padding: 2.5rem 1.75rem;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
}

/* Hours: gold top accent, very subtle warm tint */
.cl-ubi-how__item--hours {
	border-top: 2px solid var(--color-gold);
	background: rgba(201, 160, 96, 0.03);
}

.cl-ubi-how__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cl-ubi-how__icon svg {
	width: 2.25rem;
	height: 2.25rem;
	stroke: var(--color-gold);
	stroke-width: 1.25;
}

/* Label */
.cl-ubi-how__item strong {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 0;
}
.cl-ubi-how__item--hours strong { color: var(--color-gold); }

/* Body text */
.cl-ubi-how__item p {
	font-size: 0.9375rem;
	color: var(--text-muted);
	line-height: 1.65;
	margin: 0;
}

/* E — "Dom: Cerrado" in blush to signal closure */
.cl-ubi-closed {
	color: var(--color-blush-dk);
}

/* F — Live open/closed badge inside the hours card */
.cl-ubi-live {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	margin-top: 0.625rem;
	padding: 0.2rem 0.625rem;
	border-radius: var(--radius-card);
}
.cl-ubi-live--open {
	background: rgba(52, 168, 83, 0.1);
	color: #1a6e32;
}
.cl-ubi-live--closed {
	background: rgba(201, 160, 96, 0.15);
	/* #8a6530 daba 4.07:1 medido sobre el fondo real de /ubicacion/ y 4.15 sobre
	   el de /contacto/, con texto de 13px: WCAG AA pide 4.5. A 13px negrita NO
	   aplica el umbral de "texto grande" (que arranca en 18.66px en negrita).
	   Este tono es 7% más oscuro, mantiene el matiz dorado y da 4.56 y 4.65.
	   El estado abierto ya pasaba (4.94 / 5.05) y queda igual. */
	color: #805e2d;
}

/* Para turistas — dark section */
.cl-ubi-turistas {
	background: var(--bg-dark);
}

.cl-ubi-turistas__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 2rem;
	max-width: 680px;
	margin-inline: auto;
}

.cl-ubi-turistas__icon {
	width: 130px;
	height: 130px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(201, 160, 96, 0.1);
	border: 1.5px solid rgba(201, 160, 96, 0.3);
	border-radius: 50%;
	margin: 0 auto;
}
.cl-ubi-turistas__icon svg {
	width: 58px;
	height: 58px;
	stroke: var(--color-gold);
}

.cl-ubi-turistas__body h2 {
	color: #fff;
	margin: 0.5rem 0 1rem;
}

.cl-ubi-turistas__lead {
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.7;
	margin: 0;
}

.cl-ubi-turistas__perks {
	list-style: none;
	margin: 1.75rem 0 2rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}
.cl-ubi-turistas__perks li {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.8);
}
.cl-ubi-turistas__perks svg {
	width: 1rem;
	height: 1rem;
	stroke: var(--color-gold);
	flex-shrink: 0;
}

/* Contact section — bottom of ubicacion page */
.cl-ubi-contact-strip {
	background: var(--bg-parch);
	padding: 3.5rem 0;
	text-align: center;
	border-top: 1px solid var(--border);
}
.cl-ubi-contact-strip .cl-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}
.cl-ubi-contact-strip__text {
	font-size: 1rem;
	color: var(--text-muted);
	margin: 0;
	max-width: 420px;
}

/* ─────────────────────────────────────────────────────────────── */
/* ── SHIPPING / PAGOS / FAQ — section redesign additions  ─────── */
/* ─────────────────────────────────────────────────────────────── */

/* Subtitle line in shipping-page heroes */
.cl-shipping-hero__sub {
	color: var(--on-dark-soft);
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	line-height: 1.65;
	max-width: 52ch;
	margin: 1rem auto 0;
}

/* cl-shipping-h2 inherits color on dark sections */
.cl-section--dark .cl-shipping-h2 {
	color: var(--text-white);
}

/* FAQ accordions on dark background (.cl-faq-dark modifier) */
.cl-faq-dark .cl-ship-faq {
	border-top-color: rgba(255, 255, 255, 0.1);
}
.cl-faq-dark .cl-ship-faq:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.cl-faq-dark .cl-ship-faq summary {
	color: rgba(255, 255, 255, 0.88);
}
.cl-faq-dark .cl-ship-faq summary::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	opacity: 0.4;
}
.cl-faq-dark .cl-ship-faq p {
	color: rgba(255, 255, 255, 0.45);
}

/* FAQ hub-nav section header */
.cl-faq-hub-head {
	text-align: left;
	margin-bottom: 2.5rem;
}
.cl-faq-hub-head .cl-eyebrow {
	justify-content: center;
	margin-bottom: 0.75rem;
}
.cl-faq-hub-head h2 {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 400;
	margin: 0;
}

/* ── 404 Page ──────────────────────────────────────────────────── */
.cl-404-hero__inner {
	text-align: center;
	padding-block: clamp(3.5rem, 8vw, 6rem);
}
.cl-404-hero__title {
	font-family: var(--font-serif);
	font-size: var(--fs-title);
	font-weight: 400;
	line-height: 1.15;
	color: var(--text-white);
	margin: 1.25rem auto;
}
.cl-404-hero__title em {
	font-style: italic;
	color: var(--color-blush);
}
.cl-404-hero__sub {
	color: var(--on-dark-soft);
	font-size: .9375rem;
	line-height: 1.75;
	max-width: 50ch;
	margin: 0 auto;
}

/* Body section */
.cl-404-body {
	padding-block: clamp(3rem, 7vw, 5rem);
}
.cl-404-body__inner {
	max-width: 640px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

/* Search */
.cl-404-search {
	display: flex;
	gap: .5rem;
}
.cl-404-search__input {
	flex: 1;
	padding: .75rem 1rem;
	border: 1px solid var(--border);
	border-radius: 0;
	font-family: var(--font-sans);
	font-size: .9375rem;
	color: var(--text-primary);
	background: var(--bg-white);
	outline: none;
	transition: border-color var(--ease);
}
.cl-404-search__input:focus {
	border-color: var(--color-blush);
}
.cl-404-search__input::placeholder {
	color: var(--text-muted);
}

/* Nav links */
.cl-404-nav {
	text-align: center;
}
.cl-404-nav__label {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 1rem;
}
/* Los tres del mismo ancho, como el resto de los grupos de botones del sitio
   (ver "Pares de botones del mismo ancho"). Medidos daban 83, 88 y 111 px: la
   diferencia es chica pero se nota, porque están uno al lado del otro y el ojo
   los compara. Acá el grid reparte tres columnas en vez de dos — el mismo
   mecanismo, sin caso especial. */
.cl-404-nav__links {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	width: fit-content;
	margin-inline: auto;
	gap: .5rem;
}

/* En teléfono NO se apilan: son tres destinos de rescate, y apilados ocupan
   media pantalla en la página donde alguien ya se perdió. Quedan en fila, que
   entra de sobra con etiquetas de una palabra.

   Y NO llevan el tope de 320px de los pares: con tres columnas no alcanza. El
   botón más ancho pide 111px, así que 3×111 más los dos gaps son 349 — dentro
   de 320 el grid comprime dos columnas a 97 y deja la tercera desbordando, que
   es exactamente el problema que este cambio venía a resolver. A 390px de
   pantalla los 349 entran de sobra. */
@media (max-width: 640px) {
	.cl-404-nav__links {
		max-width: 100%;
	}
}

/* WhatsApp CTA strip */
.cl-404-wa {
	padding-block: clamp(2.5rem, 6vw, 4rem);
}
.cl-404-wa__inner {
	text-align: center;
}
.cl-404-wa__text {
	color: rgba(255,255,255,.7);
	font-size: .9375rem;
	line-height: 1.75;
	max-width: 46ch;
	margin: 0 auto 2rem;
}
.cl-404-wa__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
	align-items: center;
}
.cl-404-wa__actions .cl-btn svg {
	vertical-align: middle;
	margin-right: .3rem;
}

@media (max-width: 540px) {
	.cl-404-search { flex-direction: column; }
	.cl-404-wa__actions { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════
   RASTREO DE PEDIDO — page-rastreo.php
   ═══════════════════════════════════════════════════════════════ */


/* ── OCA tracking form — override plugin defaults (incl. inline styles con !important) ── */

/* Título "Número de envío" que el plugin renderiza como h2 */
.cl-rastreo-form__inner .oca-tracking-form-title {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 0.5rem;
}

/* Form en fila: input + botón side by side (search-bar style) */
.cl-rastreo-form__inner form,
.cl-rastreo-form__inner .oca-tracking-form {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 0;
}
.cl-rastreo-form__inner form br,
.cl-rastreo-form__inner .oca-tracking-form br {
	display: none;
}

.cl-rastreo-form__inner label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps-lg);
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 0.5rem;
}

/* Input — flex: 1 para que ocupe el espacio disponible; sin borde derecho */
.cl-rastreo-form__inner input[type="text"],
.cl-rastreo-form__inner .oca-tracking-form-field {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	width: auto !important;
	padding: 0.8125rem 1rem !important;
	border: 1.5px solid var(--color-primary) !important;
	border-right: none !important;
	border-radius: 0 !important;
	font-family: var(--font-sans) !important;
	font-size: 1rem !important;
	color: var(--color-primary) !important;
	background: #fff !important;
	box-sizing: border-box !important;
	margin-bottom: 0 !important;
}
.cl-rastreo-form__inner input[type="text"]:focus-visible,
.cl-rastreo-form__inner .oca-tracking-form-field:focus-visible {
	/* El foco se marca ENGROSANDO el filete desde adentro, no con un aro.

	   Acá había un `outline: 2px solid gold` + `box-shadow: 0 0 0 3px`, que
	   dibujaba un rectángulo dorado alrededor del campo. Dos problemas, los dos
	   los notó Pato: el aro quedaba más bajo que el botón de al lado —el input
	   mide menos alto— así que la barra se veía descalzada, y era el ÚNICO campo
	   del sitio con ese tratamiento. Medido en cinco formularios: contacto,
	   trabajá con nosotros y el login no tienen outline ni sombra al enfocar; el
	   borde se les oscurece y listo. main.css:302 lo dice de frente ("los campos
	   de texto NO llevan aro") y esta regla lo contradecía.

	   El argumento que la justificaba era cierto —este filete ya es negro en
	   reposo, así que oscurecerlo no se ve— pero la salida no era agregar una
	   caja: es un box-shadow INSET, que engrosa el filete hacia adentro sin
	   cambiar el tamaño de la caja ni asomarse fuera del campo. Negro sobre
	   blanco, así que cumple de sobra el 3:1 que pide WCAG 1.4.11 para un
	   indicador de foco (el dorado sobre blanco daba 2.2:1 y no lo cumplía). */
	outline: none !important;
	box-shadow: inset 0 0 0 2px var(--color-primary) !important;
	border-color: var(--color-primary) !important;
}

/* Botón — pega al input, alto idéntico */
.cl-rastreo-form__inner input[type="submit"],
.cl-rastreo-form__inner .oca-tracking-form-submit,
.cl-rastreo-form__inner #update_button {
	flex-shrink: 0 !important;
	min-height: 48px !important;
	padding: 0.75rem 1.75rem !important;
	background: var(--color-primary) !important;
	background-color: var(--color-primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 0 !important;
	font-family: var(--font-sans) !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: var(--ls-caps-md) !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	margin-bottom: 0 !important;
	transition: background 0.18s ease, border-color 0.18s ease;
}
.cl-rastreo-form__inner input[type="submit"]:hover,
.cl-rastreo-form__inner .oca-tracking-form-submit:hover,
.cl-rastreo-form__inner #update_button:hover {
	background: var(--color-gold) !important;
	background-color: var(--color-gold) !important;
	border-color: var(--color-gold) !important;
	/* Texto oscuro sobre el dorado: el botón hereda color:#fff !important del
	   estado normal, y blanco sobre #c9a060 da 2.42:1. En oscuro da 7.04:1. */
	color: var(--color-primary) !important;
}

@media (max-width: 480px) {
	/* Apilados y SEPARADOS. Pegados se leían como un solo bloque: el campo
	   vacío parecía la mitad de arriba del botón, y no se entendía que había
	   que escribir algo antes de tocarlo. En fila el pegado funciona porque se
	   lee como una barra de búsqueda; apilados, no. */
	.cl-rastreo-form__inner .oca-tracking-form {
		flex-direction: column !important;
		gap: 0.75rem !important;
	}
	.cl-rastreo-form__inner input[type="text"],
	.cl-rastreo-form__inner .oca-tracking-form-field {
		border-right: 1.5px solid var(--color-primary) !important;
	}
	.cl-rastreo-form__inner input[type="submit"],
	.cl-rastreo-form__inner .oca-tracking-form-submit,
	.cl-rastreo-form__inner #update_button {
		width: 100% !important;
		text-align: center;
	}
}

/* OCA branch selector (sucursales) */
#oca-branches-selection-wrapper {
	background: #fff;
	border: 1.5px solid var(--border);
	border-radius: 0;
	box-shadow: none;
	padding: 1.25rem;
	margin-top: 1.5rem;
}
#oca-branches-selection-wrapper .oca-select-office-message {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: var(--color-primary);
	margin-bottom: 0.75rem;
}
#oca-branches-selection-wrapper > select {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1.5px solid var(--border);
	background: var(--bg-light);
	border-radius: 0;
	font-family: var(--font-sans);
	font-size: 0.9rem;
	color: var(--color-primary);
}

/* Tracking results */
.cl-rastreo-form__inner .oca-tracking-results,
.cl-rastreo-form__inner table {
	margin-top: 2rem;
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}
.cl-rastreo-form__inner table th,
.cl-rastreo-form__inner table td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--border);
	text-align: left;
}
.cl-rastreo-form__inner table th {
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
	border-bottom-color: var(--color-primary);
}

@media (max-width: 600px) {
	.cl-rastreo-form__inner input[type="submit"],
	.cl-rastreo-form__inner button[type="submit"] {
		width: 100%;
		text-align: center;
	}
}

/* ── PAGE RASTREO — refactor 1.3.31 ─────────────────────────────────
 * Antes: page-rastreo reusaba clases de páginas legales (cl-privacy-hero)
 * y mezclaba 4 namespaces distintos con inline styles. Ahora tiene su
 * propio scope alineado al patrón editorial de page-contacto / page-ubicacion. */

/* Hero con imagen de fondo + dark overlay (mismo lenguaje que cl-shop-header) */
.cl-rastreo-hero {
	position: relative;
	min-height: 360px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--bg-dark);
	overflow: hidden;
	padding: var(--space-section-sm) 0;
}
.cl-rastreo-hero--has-bg {
	background-size: cover;
	background-position: center 70%;
	background-repeat: no-repeat;
}
.cl-rastreo-hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(28, 28, 28, 0.72);
}
.cl-rastreo-hero__content {
	position: relative;
	z-index: 1;
	/* Centrado: la volanta ya lo estaba por el modificador y la bajada por su
	   margin-inline auto — el título era el único que quedaba a la izquierda. */
	text-align: center;
}
.cl-rastreo-hero__eyebrow {
	/* Dorado y no blush: el eyebrow sobre fondo oscuro va en dorado en todo el
	   sitio (ver .cl-eyebrow--gold en main.css). Esta regla lo fijaba por su
	   cuenta y se salteaba el modificador. */
	color: var(--color-gold);
	margin-bottom: 1rem;
}
.cl-rastreo-hero__title {
	font-family: var(--font-serif);
	font-weight: 400;
	font-style: italic;
	font-size: var(--fs-title);
	line-height: 1.15;
	color: var(--text-white);
	margin: 0 0 0.75rem;
}
.cl-rastreo-hero__title em {
	font-style: italic;
	color: var(--color-blush);
}
.cl-rastreo-hero__sub {
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	color: var(--on-dark-soft);
	margin: 0;
	max-width: 520px;
	margin-inline: auto;
	line-height: 1.55;
}
@media (min-width: 768px) {
	.cl-rastreo-hero { min-height: 420px; padding: var(--space-section-sm) 0; }
}

/* Form section (parch) — eyebrow + title + form OCA + hint */
.cl-rastreo-form__eyebrow {
	margin-bottom: 0.875rem;
}
.cl-rastreo-form__title {
	font-family: var(--font-serif);
	font-weight: 400;
	font-style: italic;
	font-size: var(--fs-section);
	line-height: 1.15;
	color: var(--color-primary);
	margin: 0 0 1.75rem;
}
.cl-rastreo-form__title em {
	font-style: italic;
	color: var(--color-primary); /* mismo caso que help__title: gold sobre crema = 2.07:1 */
}
.cl-rastreo-form__hint {
	margin-top: 1.25rem;
	font-size: 0.8125rem;
	color: var(--text-muted);
	line-height: 1.55;
}

/* Steps section (dark) — padding más compacto que el default de cl-section */
.cl-rastreo-steps {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* Steps section (dark) — header + 3 steps */
.cl-rastreo-steps__head {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin-bottom: 3rem;
	/* Columna única centrada: volanta, título y bajada sobre el mismo eje que
	   los pasos. Antes era título a la izquierda y bajada a la derecha. */
	text-align: center;
	justify-items: center;
}
.cl-rastreo-steps__head-left {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.cl-rastreo-steps__title {
	font-family: var(--font-serif);
	font-weight: 400;
	font-style: italic;
	font-size: var(--fs-section);
	line-height: 1.15;
	color: var(--text-white);
	margin: 0.5rem 0 0;
}
.cl-rastreo-steps__title em {
	font-style: italic;
	color: var(--color-blush);
}
.cl-rastreo-steps__sub {
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.6;
	margin: 0;
}
@media (min-width: 768px) {
	.cl-rastreo-steps__head {
		gap: 1.5rem;
	}
}

/* Help section (parch) — eyebrow + title + actions + hours */
.cl-rastreo-help__eyebrow {
	margin-bottom: 0.875rem;
}
.cl-rastreo-help__title {
	font-family: var(--font-serif);
	font-weight: 400;
	font-style: italic;
	font-size: var(--fs-section);
	line-height: 1.15;
	color: var(--color-primary);
	margin: 0 0 1.5rem;
}
.cl-rastreo-help__title em {
	font-style: italic;
	/* Este bloque va sobre crema y el gold daba 2.07:1, por debajo del 3:1 que
	   pide el texto grande. Ninguno de los dos golds de la paleta llega, así que
	   el acento queda a cargo de la itálica sola. (El em del hero sigue en blush:
	   ahí el fondo es oscuro y da 11:1.) */
	color: var(--color-primary);
}
.cl-rastreo-help__copy {
	font-size: 0.9375rem;
	color: var(--text-muted);
	line-height: 1.65;
	margin-bottom: 1.5rem;
}
.cl-rastreo-help > .cl-container {
	text-align: center;
}
/* El layout lo define el bloque "Pares de botones del mismo ancho", más arriba. */
.cl-rastreo-help__hours {
	margin: 0;
	font-size: 0.875rem;
	color: var(--text-muted);
}

/* CTA shop strip — actions row */
.cl-rastreo-cta {
	text-align: center;
}
.cl-rastreo-cta__eyebrow {
	margin-bottom: 0.75rem;
}
/* El layout lo define el bloque "Pares de botones del mismo ancho", más arriba. */

/* ─────────────────────────────────────────────────────────────────────
 * SINGLE PRODUCT — GIFT CARD (1.3.33)
 * Producto sin fotos reales: el thumbnail genérico se repetía 8x. Reemplazamos
 * la galería por un visual que muestra el monto seleccionado y stylizamos el
 * form de PW Gift Cards (TO/FROM/MESSAGE/Other amount) para que matchee la
 * tipografía y los espacios del resto del producto.
 * ─────────────────────────────────────────────────────────────────── */

/* 1. Gallery override — gift card no muestra slider de WC */
.cl-sp-gallery--gift-card {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 0;
	background: transparent;
	min-height: auto;
}
.cl-sp-gallery--gift-card::before { content: none; }

/* 2. Visual del monto: card grande, sin rotation, gradient blush */
.cl-sp-gc-visual {
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
@media (min-width: 992px) {
	.cl-sp-gc-visual {
		position: sticky;
		top: 100px;
	}
}

.cl-sp-gc-visual__card {
	position: relative;
	width: 100%;
	aspect-ratio: 1.6 / 1;
	/* Mismo lenguaje que el mail de gift card: fondo tinta y marco dorado.
	   Antes era un degradado blush que no se parecía a lo que después le
	   llega al destinatario. */
	background: var(--color-primary);
	border: 12px solid var(--color-gold);
	border-radius: 14px;
	padding: clamp(1.15rem, 3.2vw, 1.75rem);
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: 0.75rem;
	box-shadow:
		0 26px 64px rgba(28, 28, 28, .30),
		0 5px 16px rgba(28, 28, 28, .16);
	color: var(--text-white);
	overflow: hidden;
	font-family: var(--font-sans);
}
.cl-sp-gc-visual__head {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
}
.cl-sp-gc-visual__brand {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.cl-sp-gc-visual__brand-name {
	font-family: var(--font-serif);
	font-size: clamp(1rem, 2vw, 1.15rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--text-white);
}
.cl-sp-gc-visual__brand-tag {
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-gold);
	opacity: 1;
}
.cl-sp-gc-visual__eyebrow {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-gold);
	opacity: 1;
	padding: 0.35rem 0.6rem;
	border: 1px solid rgba(201, 160, 96, .55);
	border-radius: 999px;
	white-space: nowrap;
}
.cl-sp-gc-visual__center {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0.25rem;
	min-height: 0;
}
.cl-sp-gc-visual__amount-eyebrow {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	/* .32 daba 2.92:1 sobre #1c1c1c — no llega a 4.5. .55 da 5.98:1. */
	color: rgba(255, 255, 255, .55);
	opacity: 1;
}
.cl-sp-gc-visual__amount {
	font-family: var(--font-serif);
	font-size: clamp(2.5rem, 7vw, 3.75rem);
	font-weight: 500;
	font-style: italic;
	line-height: 1;
	color: var(--text-white);
	letter-spacing: -0.01em;
	transition: opacity 0.2s ease;
}
.cl-sp-gc-visual__amount.is-updating { opacity: 0.4; }
.cl-sp-gc-visual__foot {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
}
.cl-sp-gc-visual__sub {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	/* .32 daba 2.92:1 sobre #1c1c1c — no llega a 4.5. .55 da 5.98:1. */
	color: rgba(255, 255, 255, .55);
	opacity: 1;
}
.cl-sp-gc-visual__hint {
	margin: 0;
	font-size: 0.8125rem;
	font-style: italic;
	color: var(--text-muted);
	text-align: center;
	padding: 0 0.5rem;
}

/* La vigencia: NO en itálica gris como el hint de arriba. Es un dato duro del
   producto —cuánto dura el crédito— y en itálica se leería como una aclaración
   más, del mismo peso que "el monto se actualiza al elegir abajo". En dorado y
   versalita se lee como una característica, que es lo que es. */
.cl-sp-gc-visual__vigencia {
	margin: 0.625rem 0 0;
	text-align: center;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-gold);
}

/* 3. PW Gift Cards form — styling brand-aligned
 * El form viene del plugin PW WooCommerce Gift Cards. Targeteamos sus IDs/clases
 * `pwgc-*` y los pisamos con el lenguaje del resto del single-product (labels en
 * eyebrow, inputs con underline, helper text mute italico). */
.cl-sp-info .cart #pwgc-purchase-container {
	width: 100%;
	margin-top: 1.25rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.cl-sp-info .cart .pwgc-field-container {
	margin-bottom: 0; /* override del inline `margin-bottom: 14px` del plugin */
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.cl-sp-info .cart .pwgc-label {
	display: block;
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin: 0;
}

.cl-sp-info .cart .pwgc-input-text,
.cl-sp-info .cart input#pwgc-custom-amount,
.cl-sp-info .cart input#pwgc-to,
.cl-sp-info .cart input#pwgc-from,
.cl-sp-info .cart textarea#pwgc-message {
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	padding: 0.75rem 0.875rem;
	background: #fff;
	border: 1.5px solid var(--border);
	border-radius: 0;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--color-primary);
	box-shadow: none;
	outline: none;
	transition: border-color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.cl-sp-info .cart .pwgc-input-text:focus,
.cl-sp-info .cart input#pwgc-custom-amount:focus,
.cl-sp-info .cart input#pwgc-to:focus,
.cl-sp-info .cart input#pwgc-from:focus,
.cl-sp-info .cart textarea#pwgc-message:focus {
	border-color: var(--color-primary);
}

.cl-sp-info .cart .pwgc-input-text::placeholder,
.cl-sp-info .cart textarea#pwgc-message::placeholder {
	color: #b3a99b;
	font-style: italic;
}

.cl-sp-info .cart textarea#pwgc-message {
	min-height: 110px;
	resize: vertical;
	line-height: 1.5;
}

.cl-sp-info .cart .pwgc-subtitle {
	font-size: 0.75rem;
	font-style: italic;
	color: var(--text-muted);
	line-height: 1.5;
}

.cl-sp-info .cart .pwgc-subtitle #pwgc-message-characters-remaining {
	font-style: normal;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--color-primary);
}

.cl-sp-info .cart #pwgc-custom-amount-error {
	font-size: 0.75rem;
	font-style: italic;
	color: #b8412b !important; /* sobreescribe inline `color: red` del plugin */
	margin-top: 0.25rem;
}

/* Custom amount: se muestra solo cuando el usuario elige "Other amount" en el
 * dropdown — el plugin togglea la clase pwgc-hidden. */
.cl-sp-info .cart #pwgc-quantity-one-per-recipient .pwgc-label { font-size: 0.6875rem; }

/* Preview del email (PW Gift Cards): probamos mostrarlo en 1.3.35 pero el
 * iframe inline queda vacío y feo (no hay email design configurado en admin
 * para previsualizar). Lo escondemos completo — el destinatario igual recibe
 * un email visualmente correcto del plugin. */
.cl-sp-info .cart #pwgc-form-email-design {
	display: none !important;
}

/* 4. Variations table en gift card — el dropdown "Importe de la Gift Card"
 * matchea el resto de los campos; el label se vuelve eyebrow. */
.cl-sp-info .cart .variations {
	margin: 0 0 1rem;
	border: 0;
}
.cl-sp-info .cart .variations,
.cl-sp-info .cart .variations tbody,
.cl-sp-info .cart .variations tr,
.cl-sp-info .cart .variations th,
.cl-sp-info .cart .variations td {
	display: block;
	border: 0;
	padding: 0;
}
.cl-sp-info .cart .variations th.label {
	margin-bottom: 0.5rem;
}
.cl-sp-info .cart .variations th.label label {
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-primary);
}
.cl-sp-info .cart .variations td.value {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.cl-sp-info .cart .variations td.value select {
	flex: 1;
	min-width: 200px;
	min-height: 44px;
	padding: 0.625rem 2.25rem 0.625rem 0.875rem;
	background-color: #fff;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--color-primary) 50%),
		linear-gradient(135deg, var(--color-primary) 50%, transparent 50%);
	background-position:
		calc(100% - 18px) 50%,
		calc(100% - 13px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	border: 1.5px solid var(--border);
	border-radius: 0;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--color-primary);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	outline: none;
	transition: border-color 0.2s ease;
}
.cl-sp-info .cart .variations td.value select:focus {
	border-color: var(--color-primary);
}
.cl-sp-info .cart .variations td.value a.reset_variations {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-muted);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
	transition: color 0.2s ease;
}
.cl-sp-info .cart .variations td.value a.reset_variations:hover {
	color: var(--color-primary);
}

/* 5. Layout responsive: en mobile el visual queda arriba (orden natural),
 * en desktop fluye en la columna izquierda con sticky. */
@media (max-width: 768px) {
	.cl-sp-gc-visual {
		max-width: 100%;
	}
	.cl-sp-gc-visual__card {
		aspect-ratio: 1.7 / 1;
	}
	.cl-sp-info .cart .variations td.value {
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
	}
	.cl-sp-info .cart .variations td.value a.reset_variations {
		align-self: flex-start;
	}
}

/* ============================================================
 * GIFT CARD BALANCE PAGE  (woocommerce/pw-gift-cards/balance.php)
 * Todos los #pwgc-* IDs son del plugin — los pisamos sin romper
 * el JS de verificación. Las clases .cl-gcb-* son propias.
 * ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */
.cl-gcb-hero {
	background: var(--color-primary);
	padding: 5rem 0 4.5rem;
	overflow: hidden;
}

.cl-gcb-hero__title {
	font-family: var(--font-serif);
	font-size: var(--fs-hero);
	font-weight: 400;
	line-height: 1.12;
	color: #fff;
	margin: 0;
	letter-spacing: -0.01em;
}

.cl-gcb-hero__title em {
	font-style: italic;
	color: var(--color-blush);
}

/* ── Body ─────────────────────────────────────────────────── */
.cl-gcb-body {
	background: #fff;
	padding: 5rem 0 6rem;
}

.cl-gcb-wrap {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
	align-items: center;
}

/* ── Form column ──────────────────────────────────────────── */
.cl-gcb-form-col {
	max-width: 520px;
}

.cl-gcb-form-col__intro {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--text-muted);
	margin: 0 0 2.5rem;
}

.cl-gcb-label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps-lg);
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 0.75rem;
}

.cl-gcb-input-row {
	display: flex;
	gap: 0.75rem;
	align-items: stretch;
}

#pwgc-balance-number {
	flex: 1;
	/* Misma geometría que la barra de rastreo: los dos son el mismo tipo de
	   control —un dato, un botón al lado— y antes medían 56 y 54px. */
	padding: 0.8125rem 1rem;
	border: 1.5px solid var(--color-primary);
	border-radius: var(--radius-card);
	background: transparent;
	font-size: 1rem;
	color: var(--text-primary);
	font-family: var(--font-mono);
	letter-spacing: 0.08em;
	transition: border-color var(--ease);
	min-width: 0;
}

#pwgc-balance-number:focus-visible {
	outline: none;
	border-color: var(--color-primary);
	outline: 2px solid var(--color-gold);
	outline-offset: 0;
	box-shadow: 0 0 0 3px var(--color-primary);
}

#pwgc-balance-number::placeholder {
	color: rgba(0,0,0,.3);
	font-family: var(--font-mono);
	letter-spacing: 0.08em;
}

#pwgc-balance-button {
	cursor: pointer;
	padding: 0.875rem 1.5rem;
	background-color: var(--color-primary);
	color: #fff;
	border: none;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border-radius: 0;
	transition: background-color var(--ease);
	white-space: nowrap;
	flex-shrink: 0;
}

#pwgc-balance-button:hover,
#pwgc-balance-button:focus-visible {
	background-color: var(--color-gold);
	color: var(--color-primary);
}

.cl-gcb-note {
	font-size: 0.75rem;
	color: var(--text-muted);
	margin: 0.625rem 0 0;
	line-height: 1.5;
}

/* ── Result areas ─────────────────────────────────────────── */
#pwgc-balance-error {
	margin-top: 1.25rem;
	font-size: 0.875rem;
	color: var(--color-error);
	min-height: 0;
}

#pwgc-balance-message {
	margin-top: 1.25rem;
	font-size: 0.9375rem;
	color: var(--text-primary);
}

#pwgc-balance-amount {
	margin-top: 1.5rem;
}

#pwgc-balance-amount .pwgc-balance-amount-value,
#pwgc-balance-amount-value {
	display: block;
	font-family: var(--font-serif);
	font-size: clamp(2.25rem, 5vw, 3.25rem);
	font-weight: 400;
	color: var(--color-primary);
	letter-spacing: -0.01em;
	line-height: 1.1;
	margin-bottom: 0.25rem;
}

#pwgc-balance-expiration-date-container {
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	color: var(--text-muted);
	letter-spacing: 0.04em;
}

#pwgc-balance-expiration-date {
	font-weight: 600;
	color: var(--text-primary);
}

/* ── Action buttons (reload / debit) ─────────────────────── */
#pwgc-balance-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

#pwgc-balance-reload,
#pwgc-manual-debit {
	cursor: pointer;
	padding: 0.75rem 1.25rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 0;
	transition: background-color var(--ease), color var(--ease);
	border: 1.5px solid var(--color-primary);
}

#pwgc-balance-reload {
	background-color: transparent;
	color: var(--color-primary);
}

#pwgc-balance-reload:hover,
#pwgc-balance-reload:focus-visible {
	background-color: var(--color-primary);
	color: #fff;
}

#pwgc-manual-debit {
	background-color: var(--color-primary);
	color: #fff;
}

#pwgc-manual-debit:hover,
#pwgc-manual-debit:focus-visible {
	background-color: var(--color-blush);
	color: var(--color-primary);
	border-color: var(--color-blush);
}

/* ── Activity table ───────────────────────────────────────── */
#pwgc-balance-activity {
	margin-top: 2rem;
}

#pwgc-balance-activity table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

#pwgc-balance-activity th {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-muted);
	border-bottom: 1.5px solid var(--border);
	padding: 0.5rem 0.75rem 0.5rem 0;
	text-align: left;
}

#pwgc-balance-activity td {
	padding: 0.75rem 0.75rem 0.75rem 0;
	border-bottom: 1px solid var(--border);
	color: var(--text-primary);
	vertical-align: middle;
}

/* El consumo, en bordó. La clase la pone PW Gift Cards en el importe cuando es
   negativo; sin esto, una carga y un consumo se ven idénticos y lo único que
   los distingue es el signo menos, que en un número largo se pierde. */
#pwgc-balance-activity .pwgc-balance-activity-negative {
	color: var(--color-error);
}

/* ── Visual column ────────────────────────────────────────── */
.cl-gcb-visual-col {
	display: none;
	align-items: center;
	justify-content: center;
	padding: 2rem 0;
}

/* ── Desktop layout ───────────────────────────────────────── */
@media (min-width: 900px) {
	.cl-gcb-wrap {
		grid-template-columns: 1fr 1fr;
		gap: 6rem;
	}

	.cl-gcb-form-col {
		max-width: none;
	}

	.cl-gcb-visual-col {
		display: flex;
	}
}

@media (max-width: 480px) {
	.cl-gcb-input-row {
		flex-direction: column;
	}

	#pwgc-balance-button {
		width: 100%;
	}
}

/* ============================================================
 * ARREPENTIMIENTO (page-arrepentimiento.php)
 * Extiende clases cl-corp — solo overrides necesarios.
 * ============================================================ */

/* Hero — columna única centrada */
.cl-arr-hero { min-height: auto; }

.cl-arr-hero__inner {
	max-width: 780px;
	margin-inline: auto;
	padding: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 5vw, 3rem);
}

.cl-arr-hero__desc {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: var(--on-dark-soft);
	line-height: 1.85;
	max-width: 56ch;
	margin-bottom: 0;
}

.cl-arr-hero__cta { margin-top: 2rem; display: inline-flex; }

/* Stats en fila — 3 columnas bajo el copy */
.cl-arr-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 1px solid rgba(255,255,255,0.15);
	margin-top: 3rem;
	padding-top: 2rem;
}

.cl-arr-stat {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-right: 1.5rem;
	border-right: 1px solid rgba(255,255,255,0.12);
}
.cl-arr-stat:last-child { border-right: none; padding-right: 0; }
.cl-arr-stat:not(:first-child) { padding-left: 1.5rem; }

.cl-arr-stat__n {
	font-family: var(--font-serif);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 400;
	color: #fff;
	line-height: 1;
}

.cl-arr-stat__l {
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	color: rgba(255,255,255,0.45);
	line-height: 1.55;
	max-width: 20ch;
}

@media (max-width: 500px) {
	.cl-arr-stat { padding-right: 0.75rem; }
	.cl-arr-stat:not(:first-child) { padding-left: 0.75rem; }
	.cl-arr-stat__n { font-size: clamp(1.5rem, 8vw, 2.25rem); }
}

/* Placeholder cuando cf7_id = 0 */
.cl-arr-placeholder {
	font-size: 0.8125rem;
	color: #999;
	padding: 1rem;
	border: 1px dashed #ddd;
}

/* ── Formulario CF7 — clases propias cl-arr-* ───────────────── */
.cl-arr-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 2rem;
}

.cl-arr-label {
	display: flex;
	flex-direction: column;
	margin-bottom: 1.375rem;
}

.cl-arr-label--full { grid-column: 1 / -1; }

.cl-arr-label-text {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps-lg);
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 0.5rem;
}

.cl-arr-label-hint {
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	opacity: 0.6;
}

.cl-arr-input,
.cl-arr-select,
.cl-arr-textarea {
	display: block;
	width: 100%;
	border: none;
	border-bottom: 1.5px solid var(--border);
	border-radius: 0;
	padding: 0.75rem 0;
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-primary);
	background: transparent;
	outline: none;
	box-shadow: none;
	transition: border-color 0.2s ease;
}

.cl-arr-input:focus,
.cl-arr-select:focus,
.cl-arr-textarea:focus { border-color: var(--color-primary); }

.cl-arr-input.wpcf7-not-valid,
.cl-arr-textarea.wpcf7-not-valid { border-color: var(--color-error); }

.cl-arr-textarea {
	min-height: 90px;
	resize: vertical;
}

.cl-arr-select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231c1c1c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0 center;
	padding-right: 1.25rem;
	cursor: pointer;
}

.cl-arr-check-wrap {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin-bottom: 1.25rem;
}

/* El checkbox nativo mide 13×13 y es el único control del sitio que se ve como
   lo dibuja el navegador. Se le da el mismo tratamiento que al de "Recordarme"
   de Mi cuenta (woocommerce.css:2417): mismo tamaño, mismo filete, misma tilde.
   No es un problema de área de toque —el <input> va dentro de su <label>, así
   que se puede tocar los 268×82px del texto— sino de terminación. */
.cl-arr-check-wrap input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.125rem;
	border: 1.5px solid var(--border);
	border-radius: var(--radius-card);
	background: #fff;
	cursor: pointer;
	transition: background var(--ease), border-color var(--ease);
	position: relative;
	/* El gap de .wpcf7-list-item separa al <label> de sus hermanos, no al input
	   del texto que tiene al lado adentro del mismo label. */
	margin-right: 0.625rem;
}

.cl-arr-check-wrap input[type="checkbox"]:checked {
	background: var(--color-primary);
	border-color: var(--color-primary);
}

/* La tilde va centrada por transform y no por inset: con inset sobre una caja
   de 18px el trazo se desbordaba por abajo y se leía como un galón, no como un
   tilde. */
.cl-arr-check-wrap input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 46%;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 1.5px 1.5px 0;
	transform: translate(-50%, -50%) rotate(45deg);
}

.cl-arr-check-wrap input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 0;
	box-shadow: 0 0 0 3px var(--color-primary);
}

.cl-arr-check-wrap .wpcf7-list-item {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 0;
}

.cl-arr-check-wrap .wpcf7-list-item-label {
	font-size: 0.8rem;
	color: var(--text-muted);
	line-height: 1.55;
	font-family: var(--font-sans);
}

.cl-arr-check-wrap .wpcf7-list-item-label a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cl-arr-submit { grid-column: 1 / -1; }

/* Sólo maquetación. El aspecto lo pone .cl-btn (main.css), que ya incluye a
   .wpcf7-submit. Esta clase se aplica desde el shortcode del formulario en el
   admin (class:cl-arr-btn), no desde el template — por eso no aparece si uno
   busca class=" en los PHP. */
.cl-arr-btn {
	width: 100%;
}
.cl-arr-btn:hover,
.cl-arr-btn:focus-visible {
	background: var(--color-gold);
	color: var(--color-primary);
}

@media (max-width: 600px) {
	.cl-arr-form { grid-template-columns: 1fr; }
}

@media (min-width: 1025px) {
	.cl-arr-info-panel { display: flex; }
}

.cl-faq-guide-link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 1.25rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-primary);
	text-decoration: none;
	border-bottom: 1px solid var(--color-primary);
	padding-bottom: 0.125rem;
	transition: border-color var(--ease), color var(--ease);
}
/* Era opacity:0.6 — un desvanecido genérico que además baja el contraste del
   texto. Ahora se marca el subrayado en gold y el texto no se toca. */
.cl-faq-guide-link:hover,
.cl-faq-guide-link:focus-visible { border-bottom-color: var(--color-gold); }

/* ═══════════════════════════════════════════════════════════════ */
/* ── PÁGINA: PREGUNTAS FRECUENTES ────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════ */

/* 1. CTA strip — variante clara para romper secuencia oscura antes del footer */
.cl-ct-shop-strip--light {
	background: var(--bg-light);
	border-top: 3px solid var(--border);
}
.cl-ct-shop-strip--light .cl-ct-shop-strip__lead {
	color: var(--text-muted);
}

/* 2. FAQ section category headers */
.cl-faq-section .cl-faq-cat {
	margin-bottom: 1.25rem;
}

/* 3. Accordion open animation */
@keyframes cl-faq-reveal {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}
.cl-ship-faq[open] > p {
	animation: cl-faq-reveal 0.22s ease forwards;
}

/* 4. Grabado dark section */
.cl-faq-grabado-intro {
	color: rgba(255,255,255,0.55);
	max-width: 56ch;
	margin-bottom: 2rem;
	line-height: 1.75;
}

.cl-faq-grabado-cta {
	margin-top: 2.5rem;
	text-align: center; /* quedaba pegado a la izquierda, solo en el ancho */
}

.cl-section--dark .cl-eyebrow--rule {
	margin-bottom: 0.75rem;
}

/* 5. CTA strip button group */
/* Grid en vez de flex: con flex cada botón medía lo que medía su texto
   ("Escribinos por WhatsApp →" contra "Ir a la tienda") y quedaban de
   distinto ancho. Con dos columnas iguales miden lo mismo sin importar el
   texto — el mismo criterio que se aplicó a los CTA del hero. */
.cl-ct-shop-strip__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 15rem));
	gap: 1rem;
	justify-content: center;
}

@media (max-width: 560px) {
	.cl-ct-shop-strip__actions { grid-template-columns: minmax(0, 15rem); }
}

/* ═══════════════════════════════════════════════════════════════ */
/* ── PÁGINA: CUIDADOS DEL CUERO ──────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════ */

.cl-care-hero {
	position: relative;
	min-height: 80vh;
	display: flex;
	align-items: flex-end;
	background: var(--color-primary);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.cl-care-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(10,8,6,0.90) 0%,
		rgba(10,8,6,0.50) 50%,
		rgba(10,8,6,0.20) 100%
	);
}

.cl-care-hero__content {
	position: relative;
	z-index: 1;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: clamp(3rem, 8vw, 6rem) var(--container-pad);
	width: 100%;
}

.cl-care-hero__title {
	font-family: var(--font-serif);
	font-size: var(--fs-display);
	font-weight: 400;
	color: #fff;
	line-height: 1;
	letter-spacing: -0.01em;
	margin: 0.5rem 0 1.25rem;
}

.cl-care-hero__title em {
	font-style: italic;
	color: var(--color-blush);
}

.cl-care-hero__sub {
	font-size: clamp(1rem, 2vw, 1.2rem);
	color: var(--on-dark-soft);
	margin: 0;
	max-width: 48ch;
	line-height: 1.55;
}

/* 2. Intro */
.cl-care-intro {
	padding: var(--space-section-lg) var(--container-pad);
	background: #fff;
}

.cl-care-intro__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem 5rem;
}

@media (min-width: 900px) {
	.cl-care-intro__inner { grid-template-columns: 1fr 340px; align-items: start; }
}

.cl-care-intro__title {
	font-family: var(--font-serif);
	font-size: var(--fs-section-lg);
	font-weight: 400;
	color: var(--color-primary);
	margin: 0.5rem 0 1.5rem;
	line-height: 1.2;
}

.cl-care-intro__text p {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--text-muted);
	margin: 0 0 1.25rem;
}

.cl-care-intro__text p:last-child { margin-bottom: 0; }

.cl-care-intro__nota {
	border-top: 2px solid var(--color-primary);
	padding-top: 1.5rem;
}

.cl-care-intro__nota p {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--text-muted);
	margin: 0.75rem 0 0;
	font-style: italic;
}

.cl-care-intro__firma {
	font-style: normal !important;
	font-size: 0.75rem !important;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary) !important;
	margin-top: 1rem !important;
}

/* 3. Tips generales */
.cl-care-tips {
	padding: var(--space-section-lg) var(--container-pad);
	background: var(--bg-section);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.cl-care-tips__head {
	max-width: var(--container-max);
	margin-inline: auto;
	margin-bottom: 3rem;
}

.cl-care-tips__title {
	font-family: var(--font-serif);
	font-size: var(--fs-section-sm);
	font-weight: 400;
	color: var(--color-primary);
	margin: 0.375rem 0 0;
	line-height: 1.25;
}

.cl-care-tips__title em { font-style: italic; }

.cl-care-tips__grid {
	max-width: var(--container-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 600px) {
	.cl-care-tips__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1025px) {
	.cl-care-tips__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.cl-care-tip {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.cl-care-tip__icon {
	width: 2.75rem;
	height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-primary);
	border-radius: var(--radius-card);
	flex-shrink: 0;
}

.cl-care-tip__icon svg {
	width: 1.25rem;
	height: 1.25rem;
	stroke: #fff;
}

.cl-care-tip__title {
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--color-primary);
	margin: 0;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

.cl-care-tip__text {
	font-size: 0.9375rem;
	color: var(--text-muted);
	line-height: 1.65;
	margin: 0;
}

/* 4. Nunca uses */
.cl-care-nunca {
	background: var(--color-primary);
	padding: var(--space-section-lg) var(--container-pad);
}

.cl-care-nunca__inner {
	max-width: var(--container-read);
	margin-inline: auto;
}

.cl-care-nunca__title {
	font-family: var(--font-serif);
	font-size: var(--fs-section-lg);
	font-weight: 400;
	color: #fff;
	margin: 0.5rem 0 2rem;
	line-height: 1.2;
}

.cl-care-nunca__title em {
	font-style: italic;
	color: var(--color-blush);
}

.cl-care-nunca__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

@media (min-width: 600px) {
	.cl-care-nunca__list { grid-template-columns: 1fr 1fr; }
}

.cl-care-nunca__list li {
	font-size: 1rem;
	color: rgba(255,255,255,0.75);
	padding: 0.875rem 0;
	border-bottom: 1px solid rgba(255,255,255,0.12);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	line-height: 1.4;
}

.cl-care-nunca__list li::before {
	content: '×';
	font-size: 1.25rem;
	color: var(--color-blush);
	flex-shrink: 0;
	font-weight: 300;
}

/* 5. Materiales especiales */
.cl-care-mats {
	padding: var(--space-section-lg) var(--container-pad);
	background: #fff;
}

.cl-care-mats__head {
	max-width: var(--container-max);
	margin-inline: auto;
	margin-bottom: 3rem;
}

.cl-care-mats__title {
	font-family: var(--font-serif);
	font-size: var(--fs-section-sm);
	font-weight: 400;
	color: var(--color-primary);
	margin: 0.375rem 0 0;
	line-height: 1.25;
}

.cl-care-mats__title em { font-style: italic; }

.cl-care-mats__grid {
	max-width: var(--container-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 769px) {
	.cl-care-mats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cl-care-mat {
	border: 1px solid var(--border);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.cl-care-mat__tag {
	display: inline-block;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	/* El texto pasa a muted (el blush sobre blanco daba 1.5:1); el borde SIGUE
	   en blush, así que el acento de marca no se pierde — sólo deja de usarse
	   para algo que hay que poder leer. */
	color: var(--text-muted);
	border: 1px solid var(--color-blush);
	padding: 0.2rem 0.625rem;
	align-self: flex-start;
}

.cl-care-mat__title {
	font-family: var(--font-serif);
	font-size: 1.375rem;
	font-weight: 400;
	color: var(--color-primary);
	margin: 0;
	line-height: 1.2;
}

.cl-care-mat__intro {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--text-muted);
	margin: 0;
	padding-bottom: 0.875rem;
	border-bottom: 1px solid var(--border);
}

.cl-care-mat__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.cl-care-mat__list li {
	font-size: 0.875rem;
	color: var(--text-muted);
	line-height: 1.55;
	padding-left: 1.25rem;
	position: relative;
}

.cl-care-mat__list li::before {
	content: '—';
	position: absolute;
	left: 0;
	color: var(--color-blush);
	font-weight: 300;
}

/* 6. CTA */
.cl-care-cta {
	padding: var(--space-section-lg) var(--container-pad);
	background: var(--color-primary);
	text-align: left;
}

.cl-care-cta__inner {
	max-width: 720px;
	margin-inline: auto;
}

.cl-care-cta__title {
	font-family: var(--font-serif);
	font-size: var(--fs-section);
	font-weight: 400;
	color: #fff;
	margin: 0.5rem 0 1.25rem;
	line-height: 1.25;
}

.cl-care-cta__title em {
	font-style: italic;
	color: var(--color-blush);
}

.cl-care-cta__sub {
	font-size: 1.0625rem;
	color: rgba(255,255,255,0.6);
	max-width: 52ch;
	margin: 0 auto 2.5rem;
	line-height: 1.65;
}

/* El layout lo define el bloque "Pares de botones del mismo ancho", más arriba. */

/* ═══════════════════════════════════════════════════════════════════
   GALERÍA SCROLL-SNAP (refactor sin FlexSlider) — branch gallery-scroll-snap
   Sin theme supports de WC, no hay .flex-viewport ni FlexSlider. El propio
   __wrapper es el carrusel: scroll horizontal nativo + snap. Swipe del browser,
   cero JS de arrastre → sin hueco blanco entre slides.
   ═══════════════════════════════════════════════════════════════════ */
.cl-sp-gallery .woocommerce-product-gallery { display: block; position: relative; }

.cl-sp-gallery .woocommerce-product-gallery__wrapper {
	display: flex !important;
	flex-wrap: nowrap !important;
	width: 100% !important;
	margin: 0 !important;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.cl-sp-gallery .woocommerce-product-gallery__wrapper::-webkit-scrollbar { display: none; }

.cl-sp-gallery .woocommerce-product-gallery__image {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	scroll-snap-align: center;
	aspect-ratio: 1;
	min-height: 0;
	margin: 0 !important;
}
.cl-sp-gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* ── Thumbnails de la galería scroll-snap ────────────────────────── */
.cl-gallery-thumbs {
	display: flex;
	gap: .5rem;
	flex-wrap: nowrap;
	margin-top: .75rem;
	overflow-x: auto;
	scrollbar-width: none;
}
.cl-gallery-thumbs::-webkit-scrollbar { display: none; }
.cl-gallery-thumb {
	flex: 0 0 auto;
	width: 64px; height: 64px;
	padding: 0;
	border: 1.5px solid var(--border);
	background: #fff;
	cursor: pointer;
	transition: border-color .18s ease;
}
.cl-gallery-thumb.is-active { border-color: var(--color-gold); }
.cl-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1; }

/* Desktop: thumbs en columna al costado (izquierda de la foto) */
@media (min-width: 769px) {
	.cl-sp-gallery { display: flex; flex-direction: row; gap: .75rem; align-items: flex-start; }
	.cl-gallery-thumbs {
		order: -1;
		flex-direction: column;
		margin-top: 0;
		flex: 0 0 auto;
		max-height: 560px;
		overflow-y: auto;
		overflow-x: hidden;
	}
	.cl-sp-gallery .woocommerce-product-gallery { flex: 1 1 auto; min-width: 0; }
}

/* ── Zoom dialog (reemplaza PhotoSwipe) ──────────────────────────── */
.cl-gallery-zoom {
	border: none; padding: 0; margin: auto;
	max-width: 96vw; max-height: 96vh;
	background: transparent; overflow: visible;
}
.cl-gallery-zoom::backdrop { background: rgba(0,0,0,.9); }
.cl-gallery-zoom img { display: block; max-width: 96vw; max-height: 92vh; object-fit: contain; margin: auto; }
.cl-gallery-zoom__close {
	position: fixed; top: 1rem; right: 1rem; z-index: 2;
	width: 44px; height: 44px; border: none; border-radius: 50%;
	background: rgba(255,255,255,.92); color: #1c1c1c;
	font-size: 1.6rem; line-height: 1; cursor: pointer;
}

/* Mobile: apilar galería + thumbs en columna (evita que la imagen desborde su
   contenedor y tape los thumbs). */
@media (max-width: 768px) {
	.cl-sp-gallery { display: flex; flex-direction: column; }
	.cl-sp-gallery .woocommerce-product-gallery { width: 100%; height: auto; }
	.cl-sp-gallery .woocommerce-product-gallery__wrapper { height: auto; }
	.cl-gallery-thumbs { order: 0; }
}

/* NOTA sobre el hueco de ~790 px al costado de la ficha en desktop (la columna de
   la galería mide 528 px y la de info 1321 px): NO se arregla poniendo el sticky de
   vuelta. Está desactivado a propósito en woocommerce.css:205-210 —el cartel "foto
   de referencia" vive adentro del contenedor y el sticky lo descoloca—, y esa regla
   gana por especificidad (.woocommerce div.product … = 3 clases + 1 elemento).
   Para reactivarlo hay que sacar el cartel del contenedor primero. */

/* Mobile: la galería NO va sticky (era para el layout de 2 columnas de desktop).
   En una sola columna, el sticky descoloca el flex y los thumbs se superponen a
   la imagen. Specificity match con woocommerce.css:206 (.woocommerce div.product…). */
@media (max-width: 768px) {
	.woocommerce div.product .woocommerce-product-gallery,
	.cl-sp-gallery .woocommerce-product-gallery { position: static; top: auto; }
}

/* Mobile: señal de que la fila de thumbnails tiene MÁS fotos (scrolleable).
   Thumbs un poco más chicos → asoma uno cortado (peek) + fade en el borde derecho. */
@media (max-width: 768px) {
	.cl-gallery-thumb { width: 56px; height: 56px; }
	.cl-gallery-thumbs {
		-webkit-mask-image: linear-gradient(to right, #000 86%, transparent 100%);
		        mask-image: linear-gradient(to right, #000 86%, transparent 100%);
	}
}


/* La rayita del eyebrow, en gold. Es un trazo de 16×1px: no es texto, así que
   no arrastra el problema de contraste del gold sobre fondo claro. */
.cl-faq-hub-head .cl-eyebrow--rule::before,
.cl-faq-hub-head .cl-eyebrow--center.cl-eyebrow--rule::after {
	background: var(--color-gold);
	opacity: 1;
}

/* El eyebrow de la franja final: sobre #1c1c1c el gold da 7:1, así que acá SÍ
   puede ir en texto — al revés que sobre crema, donde da 2.07:1. */
.cl-ct-shop-strip .cl-eyebrow {
	color: var(--color-gold);
}

.cl-ct-shop-strip .cl-eyebrow--rule::before,
.cl-ct-shop-strip .cl-eyebrow--center.cl-eyebrow--rule::after {
	background: var(--color-gold);
	opacity: 1;
}

/* ── Hovers ──────────────────────────────────────────────────────────
   Sobre fondo oscuro la sombra del hover global (.cl-btn:hover, negra al 12%)
   es invisible contra #1c1c1c, así que se anula: deja una sombra que no aporta
   nada. El hover queda en el cambio de color del botón —blush → blush-dk,
   gold → gold-hover, que ya definen las clases base— más 2px de elevación.
   Se probó un halo del color del botón y se descartó. */
.cl-ct-shop-strip .cl-btn:hover,
.cl-ct-shop-strip .cl-btn:focus-visible,
.cl-faq-grabado-cta .cl-btn:hover,
.cl-faq-grabado-cta .cl-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: none;
}

/* El link de las 3 tarjetas no tenía NINGÚN hover. El subrayado en gold: el
   texto se queda en --color-primary, que es lo legible sobre claro. */
.cl-hub-card__link {
	border-bottom: 1px solid transparent;
	padding-bottom: 0.125rem;
	transition: border-color var(--ease);
}

.cl-hub-card:hover .cl-hub-card__link,
.cl-hub-card__link:hover,
.cl-hub-card__link:focus-visible {
	border-bottom-color: var(--color-gold);
}

/* El botón del local secundario replica su cartel: la variante --ghost ya trae
   fondo transparente + filete negro + dorado en hover, sólo se le iguala el
   grosor del filete al del cartel (1.5px contra el 1px del sistema) para que los
   dos se lean como la misma pieza. Va con box-shadow inset y no border —igual
   que el cartel— para que el filete no sume al alto y los dos botones de Maps
   midan lo mismo. */
.cl-ubi-store .cl-btn--ghost {
	box-shadow: inset 0 0 0 1.5px var(--color-primary);
}

.cl-ubi-store .cl-btn--ghost:hover,
.cl-ubi-store .cl-btn--ghost:focus-visible,
.cl-ubi-store .cl-btn--ghost:active {
	box-shadow: inset 0 0 0 1.5px var(--color-gold);
}

/* Timeline centrada: el número va arriba y el texto debajo, en vez del riel
   lateral. Modificador opt-in —hoy sólo Arrepentimiento—: las otras cuatro
   páginas que usan .cl-steps-track (Envíos, Corporativos, Rastreo y la
   thank-you) siguen con el riel. */
.cl-steps-track--center .cl-step {
	grid-template-columns: 1fr;
	justify-items: center;
}

.cl-steps-track--center .cl-step-body {
	padding: 14px 0 42px;
	text-align: center;
	max-width: 46ch;
	margin-inline: auto;
}

.cl-steps-track--center .cl-step-detail {
	justify-content: center;
}

/* En el riel la línea corría al costado del texto; apilada lo cruzaría por el
   medio. Queda como un tramo corto entre el número y su texto, que mantiene el
   ritmo vertical sin pisar nada. */
.cl-steps-track--center .cl-step-line {
	flex: none;
	height: 26px;
	min-height: 0;
}

/* El último paso no emite .cl-step-line (el PHP la omite), así que su círculo
   quedaba a 14px del texto contra los 50px de los otros dos. Se compensa con el
   alto exacto de la línea más sus márgenes: 26 + 5 + 5 = 36. */
.cl-steps-track--center .cl-step--last .cl-step-body {
	padding-top: 50px;
}


/* En un teléfono de 390px, 40px de relleno a cada lado se comen el 20% del
   ancho: el formulario de Contacto quedaba en 270px y a 320px en 200, menos de
   dos tercios de la pantalla. La tarjeta de Trabajá con Nosotros ya baja a
   1.5rem en mobile —.cl-jobs-form-body—; estas dos nunca lo hicieron.
   Va como max-width y no invirtiendo la regla base a propósito: el relleno de
   escritorio es lo que fija los anchos de 600 y 614px que se acomodaron en
   v2.5.1 y v2.5.2, y tocarlo desde abajo los movería. */
@media (max-width: 768px) {
	.cl-ct-form-body,
	.cl-corp-form-body {
		padding: 1.5rem;
	}
}

/* ── Gift card de la home (antes en un <style> inline dentro del template) ──
   Mismo lenguaje que el mail y que las otras dos tarjetas: fondo tinta,
   marco dorado, marca en blanco y bajada en oro. */
.cl-gc-visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem 0.5rem 2rem;
}

/* Tarjeta de atrás: marco blush, apenas asomada. Es la que trae el color de
   regalo de la marca a una sección que era toda tinta y oro. */
.cl-gc-visual__back {
	position: absolute;
	width: min(384px, 100%);
	aspect-ratio: 1.6 / 1;
	border: 12px solid var(--color-blush);
	border-radius: 12px;
	background: var(--bg-parch);
	transform: rotate(-11deg) translate(-34px, 16px);
	box-shadow: 0 16px 42px rgba(217, 176, 163, .40);
}
.cl-gc-visual__card {
	position: relative;
	width: min(384px, 100%);
	aspect-ratio: 1.6 / 1;
	background: var(--color-primary);
	border: 12px solid var(--color-gold);
	border-radius: 12px;
	padding: 1.15rem 1.35rem;
	display: grid;
	grid-template-rows: auto 1fr auto;
	align-content: stretch;
	box-shadow: 0 22px 54px rgba(28, 28, 28, .26), 0 4px 12px rgba(28, 28, 28, .14);
	overflow: hidden;
	position: relative;
	transform: rotate(-3deg);
	transition: transform var(--ease-slow);
}
.cl-gc-cta:hover .cl-gc-visual__card { transform: rotate(-1.5deg) translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
	.cl-gc-visual__card,
	.cl-gc-cta:hover .cl-gc-visual__card { transition: none; transform: rotate(-3deg); }
}
.cl-gc-visual__tag {
	display: block;
	margin-top: 0.28rem;
	font-family: var(--font-sans);
	font-size: 0.5rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-gold);
}
.cl-gc-visual__amount {
	margin: 0;
	align-self: center;
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.9rem, 7.5vw, 2.75rem);
	line-height: 1;
	color: var(--text-white);
	letter-spacing: -0.01em;
}
.cl-gc-visual__brand {
	display: block;
	font-family: var(--font-serif);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--text-white);
}
.cl-gc-visual__sub {
	display: block;
	align-self: end;
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--color-gold);
}

/* Pastilla de monto clickeable (franja de gift cards de la home).
   Antes eran <li> sin enlace: parecían botones y no hacían nada. */
.cl-pill--link {
	display: inline-block;
	text-decoration: none;
	color: inherit;
	transition: background-color var(--ease), color var(--ease), border-color var(--ease);
}
.cl-pill--link:hover,
.cl-pill--link:focus-visible {
	background-color: var(--color-primary);
	color: var(--text-white);
	border-color: var(--color-primary);
}

/* Nota al pie del aside de cotización: la gift card como alternativa para la
   empresa que no sabe qué elegir o tiene el equipo repartido. Separada por un
   filete para que se lea como aparte y no como parte de las promesas. */
.cl-corp-form-alt {
	margin: 1.75rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--border);
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	line-height: 1.7;
	color: var(--text-muted);
}
.cl-corp-form-alt .cl-gc-cta__link {
	margin-top: 0.6rem;
	display: flex;   /* renglón propio: en línea se leía como parte de la frase */
	width: fit-content;
}
/* Cabecera de "¿Cómo funciona?" centrada, para que hable igual que las de
   Regalos Corporativos, Arrepentimiento y Rastreo. */
.cl-gc-section-head--center {
	text-align: center;
}

/* Acceso al formulario al cierre del proceso de Regalos Corporativos.
   Deliberadamente un enlace y no un botón: la sección es oscura y ya trae
   cinco pasos con sus chips; otro bloque sólido competía con el formulario
   que viene abajo. */
.cl-proc-cta {
	margin: 3.25rem 0 0;
	text-align: center;
}

.cl-proc-cta__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	letter-spacing: var(--ls-caps-md);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	padding-bottom: 4px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.22);
	transition: color var(--ease), border-color var(--ease);
}

.cl-proc-cta__link span { transition: transform var(--ease); }

.cl-proc-cta__link:hover,
.cl-proc-cta__link:focus-visible {
	color: var(--color-gold);
	border-bottom-color: var(--color-gold);
}

.cl-proc-cta__link:hover span { transform: translateX(3px); }


/* ── Grabado personalizado: campo de iniciales ──────────────────────────
   El bloque lo emite el plugin (engraving-addon.php) y se despliega al marcar
   el checkbox. Va pegado a la caja del grabado y comparte su lenguaje: fondo
   crema, sin radio, filete fino. */
.clh-engraving-input {
	margin-top: 0.75rem;
	padding: 0.875rem 1rem 1rem;
	background-color: var(--bg-parch);
	border-left: 2px solid var(--color-gold);
}

.clh-engraving-input__label {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps-md);
	text-transform: uppercase;
	color: var(--color-primary);
}

.clh-engraving-input__hint {
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--text-muted);
}

/* Ancho al contenido: son tres letras, un campo de ancho completo mentiría
   sobre cuánto se puede escribir. El monoespaciado y el interletrado las
   separan como se ven grabadas. */
.clh-engraving-input__field {
	width: 7rem;
	padding: 0.625rem 0.75rem;
	font-family: var(--font-sans);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.35em;
	text-align: center;
	text-transform: uppercase;
	color: var(--color-primary);
	background-color: #fff;
	border: 1px solid var(--border);
	border-radius: 0;
}

.clh-engraving-input__field:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 0;
	box-shadow: 0 0 0 3px var(--color-primary);
}

.clh-engraving-custom {
	margin: 0.75rem 0 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--text-muted);
}

.clh-engraving-custom__link {
	color: var(--color-primary);
	text-decoration: underline;
	text-decoration-color: var(--color-blush);
	text-underline-offset: 3px;
}

.clh-engraving-custom__link:hover {
	text-decoration-color: var(--color-primary);
}

/* ── Barra de Filtros y Orden (sólo mobile) ─────────────────────────────
   Reemplaza en pantallas angostas a las píldoras de orden y a la fila
   horizontal de categorías. Aparece sólo hasta 900px, que es el mismo corte
   donde el sidebar deja de ser columna. */
.cl-shop-bar { display: none; }
.cl-shop-panel { display: none; }

@media (max-width: 900px) {
	.cl-shop-bar {
		display: grid;
		grid-template-columns: 1fr 1fr;
		border-top: 1px solid var(--border);
		border-bottom: 1px solid var(--border);
		background: #fff;
		margin-bottom: 1.25rem;
	}

	.cl-shop-bar--solo-orden { grid-template-columns: 1fr; }

	.cl-shop-bar__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		/* 52px: el alto de toque de una barra que se usa con el pulgar. */
		min-height: 52px;
		padding: 0 0.75rem;
		font-family: var(--font-sans);
		font-size: 0.6875rem;
		font-weight: 700;
		letter-spacing: var(--ls-caps-md);
		text-transform: uppercase;
		color: var(--color-primary);
		background: none;
		border: 0;
		cursor: pointer;
	}

	.cl-shop-bar__btn + .cl-shop-bar__btn { border-left: 1px solid var(--border); }
	.cl-shop-bar__btn[aria-expanded="true"] { background-color: var(--bg-parch); }
	.cl-shop-bar__btn svg { width: 14px; height: 14px; flex-shrink: 0; }

	/* Dice cuántos filtros hay puestos sin necesidad de abrir el panel. */
	.cl-shop-bar__badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 17px;
		height: 17px;
		padding: 0 5px;
		background-color: var(--color-primary);
		color: var(--text-white);
		font-size: 0.5625rem;
		letter-spacing: 0;
		border-radius: 9px;
	}

	/* ── Panel ── */
	.cl-shop-panel {
		display: block;
		margin: -1.25rem 0 1.25rem;
		border: 1px solid var(--border);
		border-top: 0;
		background: #fff;
	}

	.cl-shop-panel[hidden] { display: none; }

	.cl-shop-panel__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.875rem 1rem;
		border-bottom: 1px solid var(--border);
	}

	.cl-shop-panel__title {
		font-family: var(--font-sans);
		font-size: 0.625rem;
		font-weight: 700;
		letter-spacing: var(--ls-caps-lg);
		text-transform: uppercase;
		color: var(--text-muted);
	}

	.cl-shop-panel__x {
		min-width: 44px;
		min-height: 44px;
		margin: -0.75rem -0.75rem -0.75rem 0;
		background: none;
		border: 0;
		font-size: 1.0625rem;
		color: var(--text-muted);
		cursor: pointer;
	}

	.cl-shop-panel__opt {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		min-height: 48px;
		padding: 0.75rem 1rem;
		border-bottom: 1px solid var(--border);
		font-size: 0.875rem;
		color: var(--color-primary);
	}

	.cl-shop-panel__opt:last-of-type { border-bottom: 0; }
	.cl-shop-panel__opt small { font-size: 0.75rem; color: var(--text-muted); }
	.cl-shop-panel__opt.is-current { background-color: var(--bg-parch); font-weight: 700; }
	.cl-shop-panel__opt--sub { padding-left: 2rem; font-size: 0.8125rem; color: var(--text-muted); }

	.cl-shop-panel__foot { padding: 0.875rem 1rem; border-top: 1px solid var(--border); }

	.cl-shop-panel__limpiar {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		border: 1px solid var(--border);
		font-family: var(--font-sans);
		font-size: 0.6875rem;
		font-weight: 700;
		letter-spacing: var(--ls-caps-md);
		text-transform: uppercase;
		color: var(--text-muted);
	}

	/* Lo que la barra reemplaza. Se ocultan acá y no se borran del marcado
	   porque en escritorio siguen siendo la interfaz. */
	.cl-shop-toolbar__order { display: none; }
	.cl-shop-cat-nav { display: none; }
}