/* ============================================================
   Casa Lopez — assets/css/main.css
   Hoja de estilos principal. Siempre cargada (ver inc/enqueue.php).
   NUNCA condicional — todos los templates dependen de este archivo.

   ESTRUCTURA:
     1. Custom Properties (design tokens): colores, backgrounds, tipografía, espaciado,
        animaciones, z-index, border-radius, sombras.
     2. Reset / base: box-sizing, scroll-behavior, body, headings, links, imágenes.
     3. Utilidades: .cl-container, .cl-section, .cl-eyebrow, .cl-btn, .cl-divider,
        .cl-skeleton, .cl-pill, .cl-badge.
     4. Header: .cl-header, .cl-topbar, .cl-logo, .cl-nav, .cl-lang.
     5. Mega-menu: .cl-mega.
     6. Mini-cart: .cl-mini-cart.
     7. Mobile nav: .cl-mobile-nav.
     8. Footer: .cl-footer, .cl-footer-nl, .cl-footer-insta.
     9. Tipografía de contenido: .cl-prose (páginas de contenido / WP editor).
    10. Clases de accesibilidad: .screen-reader-text, .skip-link.

   VARIABLES CSS USADAS (definidas aquí mismo en :root):
     --color-primary, --color-blush, --color-gold, --color-sage,
     --bg-white, --bg-light, --bg-mid, --bg-parch, --bg-dark, --bg-darkest,
     --font-serif, --font-sans,
     --container-w, --gap-*, --radius-*, --shadow-*

   BREAKPOINTS:
     --bp-sm: 480px, --bp-md: 768px, --bp-lg: 1024px, --bp-xl: 1280px, --bp-2xl: 1440px

   CÓMO MODIFICAR:
     - Colores de marca: editar la sección "Custom Properties" — los cambios se propagan
       automáticamente a todo el tema (CSS custom properties).
     - Paleta Gutenberg: editar editor-color-palette en inc/setup.php (no aquí).
     - Agregar un componente global: añadirlo al final del archivo con comentario de sección.
     - Si se agrega una variable nueva: replicar en editor.css para consistencia en Gutenberg.
   ============================================================ */

/* 1. Custom Properties
   ============================================================ */
:root {
	/* Colores de marca */
	--color-primary:   #1c1c1c;
	--color-hover:     #2d2520;
	--color-blush:     #ebccc2;
	--color-blush-dk:  #d9b0a3;
	--color-sage:      #839b91;
	--color-bordeaux:  #750000;
	/* Se usaba como var(--color-error) en tres lugares, pero el token no
	   existía: el fallback era el color que se pintaba de verdad, y #c0392b es un
	   rojo de paleta genérica que no pertenece a la marca. Se apunta al bordeaux,
	   que ya estaba definido y sin usar. */
	--color-error:     var(--color-bordeaux);
	--color-gold:      #c9a060;
	--color-gold-hover:#b8902a;

	/* Backgrounds */
	--bg-white:        #ffffff;
	--bg-light:        #faf8f5;
	--bg-mid:          #f5efe6;
	--bg-parch:        #f0ede9;
	--bg-dark:         #1c1c1c;
	--bg-newsletter:   #252320;
	--bg-section:      #faf8f5;

	/* Texto */
	--text-primary:    #1c1c1c;
	/* #7a7168 daba 4.19:1 sobre --bg-mid y 4.10:1 sobre --bg-parch: por debajo del
	   4.5:1 que pide WCAG AA para texto chico, y este color es el de casi todas las
	   etiquetas y eyebrows del sitio. #726a61 cumple 4.56:1 sobre los tres cremas y
	   sobre blanco; la diferencia a la vista es de 8 unidades por canal. */
	--text-muted:      #726a61;
	--text-white:      #ffffff;

	/* Texto sobre fondo oscuro.
	 *
	 * --text-muted acá sería ilegible, así que el sitio venía usando blanco con
	 * transparencia. El problema es que lo hacía sin criterio: un escaneo de las
	 * 23 páginas encontró 34 opacidades distintas para el mismo trabajo, y sólo
	 * entre las bajadas de hero había 8 valores (0.36, 0.42, 0.48, 0.5, 0.65,
	 * 0.7, 0.72, 0.75) para el mismo párrafo debajo del mismo título. Se leía
	 * como que unas secciones estaban más apagadas que otras sin razón.
	 *
	 * 0.75 no es un valor nuevo: es el que ya usaban el hero de la home y el
	 * texto secundario del footer. Sobre #1c1c1c da 9,5:1.
	 * --on-dark-faint es el piso, y estuvo en 0.45 hasta el 2026-08-11: sobre
	 * #1c1c1c eso da 4,43:1 y el mínimo de WCAG AA para texto chico es 4,50.
	 * Fallaba por siete centésimas. Con 0.46 da 4,56:1 y pasa. El salto es de
	 * un 1% de opacidad —no se ve— pero arregla de una vez las 11 reglas
	 * que usan el token, no una página a la vez.
	 * Ojo: 4,56 es sobre #1c1c1c, el fondo oscuro del sitio. Sobre un gris más
	 * claro no alcanza; ahí hay que usar --on-dark-soft.
	 */
	--on-dark:         rgba(255, 255, 255, 0.92);
	--on-dark-soft:    rgba(255, 255, 255, 0.75);
	--on-dark-faint:   rgba(255, 255, 255, 0.46);

	/* Bordes */
	--border:          #e0d8cf;
	--border-blush:    #ebccc2;

	/* Tipografías */
	--font-serif:      'Playfair Display', Georgia, 'Times New Roman', serif;
	--font-sans:       'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-mono:       'Courier New', Courier, monospace;

	/* Letter-spacing tokens (solo con text-transform: uppercase) */
	/* ── Escala tipográfica ──────────────────────────────────────────────
	   Antes cada página elegía su propio clamp: siete tamaños de h1 (44, 48,
	   56, 68, 72, 96 y 112 px a 1440) y tres pesos (300, 400 y 700), sin pasos
	   compartidos. Estos cinco escalones salen de los valores que ya existían
	   —no es una escala nueva, es la que había, ordenada—. Un título elige un
	   paso, no un número. */
	--fs-display:      clamp(3rem,     8vw,   6rem);       /* 48 → 96  editorial */
	--fs-hero:         clamp(2.5rem,   6vw,   4.5rem);     /* 40 → 72  portadas */
	--fs-title:        clamp(2rem,     4.5vw, 3.25rem);    /* 32 → 52  páginas de servicio */
	--fs-section-lg:   clamp(2rem,     4vw,   3rem);       /* 32 → 48  sección destacada */
	--fs-section:      clamp(1.75rem,  3.5vw, 2.5rem);     /* 28 → 40  títulos de sección */
	--fs-section-sm:   clamp(1.5rem,   3vw,   2.25rem);    /* 24 → 36  subsección */
	--fs-sub:          clamp(1.375rem, 2.5vw, 1.75rem);    /* 22 → 28  subtítulos */

	/* ── Ritmo vertical ─────────────────────────────────────────────────
	   Había seis valores de padding de sección en desktop y OCHO en móvil,
	   porque varias secciones lo tenían en píxeles fijos y no se achicaban:
	   .cl-gc-*-section en 5rem y .cl-home-story en 100px seguían igual en un
	   teléfono de 390px, mientras el resto bajaba a 48-64. Los tres pasos son
	   responsivos, así que el ritmo se mantiene en los dos extremos. */
	--space-section-lg: clamp(4rem,   9vw, 7rem);          /* 64 → 112  editorial */
	--space-section:    clamp(3rem,   7vw, 6rem);          /* 48 →  96  base */
	--space-section-sm: clamp(2.5rem, 6vw, 5rem);          /* 40 →  80  compacta */

	--ls-caps-sm:      0.12em;   /* etiquetas UI pequeñas, nav icons */
	--ls-caps-md:      0.18em;   /* botones, nav, etiquetas secundarias */
	--ls-caps-lg:      0.26em;   /* eyebrows, etiquetas destacadas */

	/* Layout */
	--container-max:   1440px;
	/* Columna de lectura. Vivía repetida como 860px en cuatro reglas; un párrafo
	   a 1440 no se lee, así que este ancho NO acompaña a --container-max. */
	--container-read:  860px;
	/* Layouts de dos columnas con formulario: contacto y mi cuenta. Crecer con
	   --container-max los deja con un hueco enorme en el medio a 1920, porque el
	   diseño de dos columnas está pensado para un ancho cómodo, no para llenar
	   la pantalla. */
	--container-form:  1100px;
	--container-pad:   clamp(1rem, 4vw, 2.5rem);
	--header-h:        82px;
	--topbar-h:        40px;

	/* Transiciones */
	--ease:            220ms var(--ease-out-warm);
	--ease-slow:       400ms var(--ease-out-warm);

	/* Sistema de motion — duraciones */
	--dur-instant:    80ms;
	--dur-micro:      180ms;
	--dur-base:       300ms;
	--dur-standard:   480ms;
	--dur-slow:       650ms;
	--dur-editorial:  900ms;
	/* Sistema de motion — easings con personalidad */
	--ease-out-warm:  cubic-bezier(0.22, 1, 0.36, 1);  /* enters: rápido inicio, desacelera al llegar */
	--ease-in-warm:   cubic-bezier(0.65, 0, 0.78, 0);  /* exits: lento inicio, acelera al irse */
	--ease-craft:     cubic-bezier(0.34, 1.04, 0.64, 1); /* micro-spring para swatches y badges */
	--ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);   /* scroll reveals: arranque explosivo, cola larga */
	--ease-drawer:    cubic-bezier(0.25, 1, 0.5, 1);   /* drawers: peso que llega y se asienta */

	/* Sombras */
	--shadow-blush:    0 4px 24px rgba(235, 204, 194, 0.25);
	--shadow-gold:     0 4px 24px rgba(201, 160, 96, 0.22);
	--shadow-card:     0 2px 16px rgba(28, 28, 28, 0.08);

	/* Radio */
	/* UN SOLO redondeo para todo el sitio.
	 *
	 * Antes había cinco valores haciendo lo mismo —2px, 3px, 4px, 6px y
	 * --radius-sm— repartidos en 104 reglas. A esas medidas nadie los distingue
	 * de a uno, pero juntos son lo que hace que el sitio no se vea sistemático.
	 *
	 * REGLA: los CONTROLES (botones, campos, selects) van siempre en 0. Las
	 * SUPERFICIES (tarjetas, imágenes, avisos) usan --radius-card. Nada más.
	 *
	 * Para pasar el sitio entero a esquinas rectas alcanza con poner
	 * --radius-card en 0 acá. Es la única perilla.
	 */
	--radius-pill:     999px;
	--radius-card:     6px;
	--radius-sm:       var(--radius-card);   /* alias: quedaba de antes */

	/* Separador ornamental */
	--line-blush:      linear-gradient(to right, transparent, var(--color-blush), transparent);
}

/* 2. Reset & Base
   ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	overflow-x: hidden; /* iOS Safari requires overflow-x on html AND body */
}

body {
	font-family: var(--font-sans);
	font-weight: 400;
	color: var(--text-primary);
	background-color: var(--bg-white);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

img[loading="lazy"]:not(.cl-prod-card__img--alt) {
	opacity: 0;
	transition: opacity 500ms var(--ease-out-warm);
}
img[loading="lazy"]:not(.cl-prod-card__img--alt).cl-img-loaded {
	opacity: 1;
}

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol {
	list-style: none;
}

button,
input,
select,
textarea {
	font: inherit;
	border: none;
	background: none;
	outline: none;
}

button {
	cursor: pointer;
}

/* Selección de texto con color de marca */
::selection {
	background: var(--color-blush);
	color: var(--color-primary);
}

/* Foco de teclado, en dos tonos.
   Antes era un aro blush de 2px, que sobre blanco da 1.51:1 — WCAG 1.4.11 pide
   3:1 para el indicador de estado de un control, y esto es lo que ve quien
   navega con Tab en TODO el sitio.

   Va en dos tonos y no en uno porque el sitio alterna secciones claras y
   oscuras, y ningún color sirve para las dos: el negro da 17:1 sobre blanco y
   1:1 sobre #1c1c1c; el blanco al revés. Ninguno de los tokens de la paleta pasa
   3:1 contra los dos fondos salvo --text-muted (5.32 y 3.21), que además se ve
   apagado para un indicador de foco.

   Entonces: anillo blanco pegado al elemento y aro negro por fuera. Sobre fondo
   claro se ve el negro, sobre fondo oscuro se ve el blanco. Siempre hay uno de
   los dos contra el fondo que toque.

   El box-shadow no es aditivo: si un elemento define el suyo propio en :focus
   —los botones ghost, por ejemplo— gana el más específico y se queda sin el
   anillo blanco, pero conserva el aro negro. */
:focus-visible {
	/* Dorado con un filo oscuro por fuera. El dorado es el color que se ve; el
	   filo es el que cumple: sobre blanco el dorado da 2.42:1 y WCAG 1.4.11 pide
	   3:1, mientras que el filo oscuro da 17:1. Sobre fondo oscuro se invierte
	   —el dorado da 7.04:1 y el filo desaparece—, así que siempre hay una de las
	   dos capas sosteniendo el contraste.
	   El outline se pinta ENCIMA del box-shadow, así que con offset 0 el dorado
	   ocupa los primeros 2px y el filo asoma en el tercero. */
	outline: 2px solid var(--color-gold);
	outline-offset: 0;
	box-shadow: 0 0 0 3px var(--color-primary);
}

/* Los campos de texto NO llevan aro: señalan el foco oscureciendo su propio
   subrayado, que da 12.09:1 y no dibuja ninguna caja alrededor. Es más sutil y
   es el lenguaje que el sitio ya usaba en sus formularios — el cuadrado era un
   agregado de v2.6.2 que resolvía un problema mal diagnosticado.
   Se excluyen los controles que no tienen subrayado que oscurecer —checkbox,
   radio y botones—, que sí necesitan el aro. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: none;
	box-shadow: none;
}

/* 3. Tipografía
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-serif);
	font-weight: 500;
	line-height: 1.2;
	color: var(--text-primary);
}

h1 { font-size: var(--fs-hero); font-weight: 400; }   /* ubicación y el blog caen acá */
h2 { font-size: var(--fs-section); font-weight: 400; }
h3 { font-size: clamp(1.25rem, 2.5vw, 2.25rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p {
	margin-bottom: 1em;
	line-height: 1.7;
}

.cl-eyebrow {
	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);
}

/* Un solo modificador para el eyebrow sobre fondo oscuro, y es DORADO.
   Había dos —--blush y --gold— y hacían casi lo mismo en lugares distintos: 20
   eyebrows sobre fondo oscuro, 9 en dorado y 11 en blush, sin criterio que los
   separara. Se unifican en dorado por decisión de Pato: le da distinción al
   rótulo cuando el fondo es oscuro.

   Medido antes de tocar nada: --blush se usaba SIEMPRE sobre fondo oscuro (los
   eyebrows sobre fondo claro no llevan modificador y salen en --text-muted), así
   que el cambio no deja ningún rótulo ilegible. Contraste sobre #1c1c1c: el
   blush daba 11.32:1 y el dorado da 7.04:1 — baja, pero pasa AA con holgura.

   El remate en cursiva de los h1 sigue en blush: no usa esta clase, va por
   reglas propias. Así queda el patrón de tres colores — eyebrow dorado, título
   blanco, remate blush. */
.cl-eyebrow--gold {
	color: var(--color-gold);
}

.cl-eyebrow--rule {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* --center es la única forma de centrar un eyebrow en el sitio. Antes convivían
   un style inline en 12 lugares y 3 reglas por página, y ninguna contemplaba
   que centrar el flex NO centra el texto: los 16px del filete más los 10 del
   gap entran en el centrado y lo corren 13px a la derecha. Por eso --center
   espeja el filete con un ::after —que además es como se resuelve
   tipográficamente un eyebrow centrado, filete a los dos lados—.
   El ::after se suma a las tres reglas del ::before en vez de repetirlas, para
   que no puedan desincronizarse: comparte el opacity 0.65 y la animación de
   ancho de las secciones con data-reveal. Acotado a --rule, así un eyebrow
   centrado sin filete no estrena uno. */
.cl-eyebrow--center {
	justify-content: center;
}

.cl-eyebrow--rule::before,
.cl-eyebrow--center.cl-eyebrow--rule::after {
	content: '';
	display: block;
	width: 16px;
	height: 1px;
	background: currentColor;
	flex-shrink: 0;
	opacity: 0.65;
}

[data-reveal] .cl-eyebrow--rule::before,
[data-reveal] .cl-eyebrow--center.cl-eyebrow--rule::after {
	width: 0;
	transition: width 500ms var(--ease-out-warm);
	transition-delay: var(--rule-delay, 200ms);
}
[data-reveal].is-revealed .cl-eyebrow--rule::before,
[data-reveal].is-revealed .cl-eyebrow--center.cl-eyebrow--rule::after {
	width: 16px;
}

/* 3b. Tipografía de contenido largo — cl-prose
   ============================================================
   Para páginas de contenido: políticas, nosotros, FAQ, etc.
   Controla medida de línea, escala fluida y espaciado de lectura.
   ============================================================ */
.cl-prose {
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.75;
	max-width: 68ch;
	color: var(--text-primary);
}

.cl-prose p,
.cl-prose li {
	margin-bottom: 1.25em;
}

.cl-prose h2,
.cl-prose h3,
.cl-prose h4 {
	margin-top: 2em;
	margin-bottom: 0.6em;
}

.cl-prose strong { font-weight: 700; }
.cl-prose em     { font-style: italic; }

.cl-prose 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-prose a:hover {
	text-decoration-color: var(--color-primary);
}

/* 4. Layout / Container
   ============================================================ */
.cl-container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.cl-container--narrow {
	max-width: var(--container-read);
}

.cl-section {
	padding-block: var(--space-section);
}

.cl-section--dark {
	background-color: var(--bg-dark);
	color: var(--text-white);
}
.cl-section--dark h1,
.cl-section--dark h2,
.cl-section--dark h3,
.cl-section--dark h4 { color: var(--text-white); }

.cl-section--light {
	background-color: var(--bg-light);
}

.cl-section--mid {
	background-color: var(--bg-mid);
}

.cl-section--parch {
	background-color: var(--bg-parch);
}

/* 5. Botones
   ============================================================

   TRES NIVELES + UNO COMERCIAL. Cada uno dice qué tan fuerte es la acción:

     sólido    la acción principal de la página     Agregar al pedido
     suave     una invitación, no la central        Explorar la colección
     contorno  una salida discreta                  Escribinos
     dorado    la acción comercial                  Finalizar compra

   EL DORADO ES EL COLOR DEL CONTACTO. Los tres primeros viran a dorado al
   tocarlos: un color, un significado, en todo el sitio. El dorado —que ya ES
   dorado— vira a negro, así que los dos intercambian y el cambio siempre se ve.

   POR QUÉ EL TEXTO SIEMPRE OSCURO SOBRE DORADO: blanco sobre #c9a060 da 2,42:1
   y no llega ni al mínimo de texto grande. Oscuro da 7,04:1. Esto ya estaba mal
   en el botón de comprar y en el de la ficha, medido el 2026-08-07.

   :ACTIVE ADEMÁS DE :HOVER. En un teléfono el hover NO EXISTE, así que sin
   esto apretar un botón no daba ninguna respuesta visual — y el teléfono es
   donde más se compra. Con :active el mismo dorado aparece mientras el dedo
   está apoyado, y la regla "el dorado es el color del contacto" funciona igual
   con el mouse que con el pulgar. Antes de esto el sitio no tenía UN SOLO
   :active. El anillo de foco NO lo lleva: ése es exclusivo del teclado.

   MEDIDAS FIJAS: antes el mismo botón negro existía en 34, 43, 48, 49, 50 y 52
   píxeles de alto, y en tres tamaños de letra, porque cada página se hacía el
   suyo. min-height y no height: un botón con texto largo tiene que poder crecer.
   ============================================================ */
/* Los submit de Contact Form 7 y de OCA entran acá a propósito: traían su
   propio estilo copiado del botón (uno con radio de 6px, otro con letra de
   11px), y cada formulario terminaba con un botón distinto. Heredando de .cl-btn
   hay una sola fuente de verdad y no hay que acordarse de mantener cuatro. */
.cl-btn,
#place_order,
.wpcf7-submit,
.oca-tracking-form-submit,
#pwgc-redeem-button,
.woocommerce-checkout .woocommerce-form-login__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.75rem 1.75rem;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps-md);
	text-transform: uppercase;
	text-align: center;
	border: none;
	border-radius: 0;
	cursor: pointer;
	transition: background-color var(--ease), color var(--ease), box-shadow var(--ease);
	white-space: nowrap;
}

/* Foco de teclado: antes NO había ninguno visible. Quien navega con Tab no
   sabía dónde estaba parado.
   Usaba dorado, que sobre blanco da 2.42:1 y tampoco llega a los 3:1 de WCAG
   1.4.11. Ahora repite los dos tonos del foco global —anillo blanco pegado al
   botón, aro negro por fuera— para que se vea igual sobre la franja oscura del
   home que sobre una ficha de producto. */
.cl-btn:focus-visible,
.wpcf7-submit:focus-visible,
.oca-tracking-form-submit:focus-visible {
	/* Dorado con un filo oscuro por fuera. El dorado es el color que se ve; el
	   filo es el que cumple: sobre blanco el dorado da 2.42:1 y WCAG 1.4.11 pide
	   3:1, mientras que el filo oscuro da 17:1. Sobre fondo oscuro se invierte
	   —el dorado da 7.04:1 y el filo desaparece—, así que siempre hay una de las
	   dos capas sosteniendo el contraste.
	   El outline se pinta ENCIMA del box-shadow, así que con offset 0 el dorado
	   ocupa los primeros 2px y el filo asoma en el tercero. */
	outline: 2px solid var(--color-gold);
	outline-offset: 0;
	box-shadow: 0 0 0 3px var(--color-primary);
}

.cl-btn:disabled,
.cl-btn[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

/* ── 1. Sólido — la acción principal ───────────────────────────── */
/* #place_order entra acá y ya no se pinta solo en woocommerce.css. Estaba en
   DORADO en reposo, que es el color al que llega el hover de casi todos los
   demás botones: el más importante del sitio se veía, quieto, igual que
   cualquier otro mientras lo tocás — y su propio hover no tenía a dónde ir.
   Además, al quedar afuera del sistema se redeclaraba entero, con su propio
   letter-spacing y sin :disabled. Entrando al grupo hereda las dos cosas. */
.cl-btn--primary,
#place_order,
.wpcf7-submit,
.oca-tracking-form-submit,
.woocommerce-checkout .woocommerce-form-login__submit {
	background-color: var(--color-primary);
	color: var(--text-white);
}

/* EL FOCO NO REPINTA EL BOTÓN — vale para las seis variantes de acá abajo.
   Hasta acá :focus-visible pintaba exactamente el mismo dorado que :hover, y
   eso traía dos problemas:

   1. Foco y hover eran indistinguibles. Quien llega con Tab veía el botón igual
      que si tuviera el mouse encima, así que el estado no le decía nada nuevo.
   2. Era la última forma de terminar con dos botones dorados juntos: basta con
      tener el foco puesto en uno y pasar el mouse por el de al lado.

   El indicador de foco es el anillo de más arriba (.cl-btn:focus-visible):
   dorado con filo oscuro, pensado para verse sobre fondo claro y oscuro. Con
   eso alcanza; el botón conserva su color de reposo. */
.cl-btn--primary:hover,
#place_order:hover,
#place_order:active,
.wpcf7-submit:hover,
.oca-tracking-form-submit:hover,
.woocommerce-checkout .woocommerce-form-login__submit:hover,
.cl-btn--primary:active,
.wpcf7-submit:active,
.oca-tracking-form-submit:active,
.woocommerce-checkout .woocommerce-form-login__submit:active {
	background-color: var(--color-gold);
	color: var(--color-primary);
}

/* Sobre fondo oscuro el sólido se invierte: blanco. */
/* La variante clara es para cajas oscuras: el panel es tinta, así que un botón
   también en tinta desaparecería dentro de la caja. */
.cl-btn--primary-light {
	background-color: var(--text-white);
	color: var(--color-primary);
}

.cl-btn--primary-light:hover,
.cl-btn--primary-light:active {
	background-color: var(--color-gold);
	color: var(--color-primary);
}

/* ── 2. Suave — la invitación ──────────────────────────────────── */
/* #pwgc-redeem-button ("¿Tenés una gift card?" en el checkout) estaba en la
   variante clara, o sea BLANCO, que es el único color de botón del sitio que no
   sale de la paleta de la marca. Blush cumple la misma función —destacar sobre
   el panel tinta— y además es de la casa. */
.cl-btn--blush,
#pwgc-redeem-button {
	background-color: var(--color-blush);
	color: var(--color-primary);
}

.cl-btn--blush:hover,
.cl-btn--blush:active,
#pwgc-redeem-button:hover,
#pwgc-redeem-button:active {
	background-color: var(--color-gold);
	color: var(--color-primary);
}

/* ── 3. Contorno — la salida discreta ──────────────────────────── */
/* box-shadow inset y no border: así el filete no suma al alto y los tres
   niveles miden exactamente lo mismo. */
.cl-btn--ghost {
	background-color: transparent;
	color: var(--color-primary);
	box-shadow: inset 0 0 0 1px var(--color-primary);
}

.cl-btn--ghost:hover,
.cl-btn--ghost:active {
	background-color: var(--color-gold);
	color: var(--color-primary);
	box-shadow: inset 0 0 0 1px var(--color-gold);
}

.cl-btn--ghost-white {
	background-color: transparent;
	color: var(--text-white);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.cl-btn--ghost-white:hover,
.cl-btn--ghost-white:active {
	background-color: var(--color-gold);
	color: var(--color-primary);
	box-shadow: inset 0 0 0 1px var(--color-gold);
}

/* ── 4. Dorado — la acción comercial ───────────────────────────── */
/* Reservado a lo que mueve la caja: finalizar compra, iniciar sesión, gift
   card. Como ya es dorado, su hover NO puede ser dorado: intercambia a negro.
   Así el dorado sigue siendo el color del contacto sin dejar de ser variante. */
.cl-btn--gold {
	background-color: var(--color-gold);
	color: var(--color-primary);
}

/* ⚠️ El hover del dorado NO puede ser negro. Los botones dorados viven sobre
   secciones negras (Preguntas Frecuentes, el carrito), y negro sobre negro da
   1:1 — el botón literalmente desaparece al pasarle el mouse. Se probó el
   2026-08-07 y lo detectó Pato. Va a dorado oscuro, que sobre negro sigue
   dando ~5,5:1 y sobre claro también se distingue. */
.cl-btn--gold:hover,
.cl-btn--gold:active {
	background-color: var(--color-gold-hover);
	color: var(--color-primary);
}

/* ── Tamaños ───────────────────────────────────────────────────── */
.cl-btn--sm,
#pwgc-redeem-button {
	min-height: 36px;
	padding: 0.5rem 1.25rem;
	font-size: 0.6875rem;
	letter-spacing: var(--ls-caps-sm);
}

/* En táctil el chico crece a 44px. 36 alcanza con un mouse, que apunta con
   precisión; con el pulgar no. 36px pasa el mínimo de WCAG AA (24px) pero queda
   por debajo de los 44 que recomiendan Apple y Material, y acá caen botones que
   se tocan mucho: el "Ver producto" de cada tarjeta de la home entre ellos.
   Medido el 2026-08-08: 8 botones quedaban en 36px a 390 y a 768.

   ⚠️ La señal es `pointer: coarse`, NO el ancho. El primer intento usó
   max-width: 768px y dejaba afuera a las tablets grandes: un iPad Air mide
   820px y un iPad Pro 1024, son táctiles y se quedaban con el botón chico.
   Verificado a 769px, que volvía a 36. El ancho queda igual para ventanas
   angostas de escritorio, pero el que manda es el puntero. */
@media (max-width: 768px), (pointer: coarse) {
	.cl-btn--sm {
		min-height: 44px;
	}
}

.cl-btn--full {
	display: flex;
	width: 100%;
}

/* ── WhatsApp CTA block (.cl-wa-cta) ────────────────────────────────── */
.cl-wa-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

.cl-wa-cta--center {
	align-items: center;
	text-align: center;
}

.cl-wa-cta__text {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--text-muted);
	max-width: 46ch;
}

.cl-wa-cta--dark .cl-wa-cta__text {
	color: rgba(255, 255, 255, 0.75);
}

/* Los dos botones, del mismo ancho. Medidos daban 164 y 280 px en escritorio
   (en teléfono ya empataban, por el bloque de abajo que los estira al 100%).
   Mismo criterio que el resto de los pares del sitio — ver "Pares de botones
   del mismo ancho" en pages.css. */
.cl-wa-cta__actions {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	width: fit-content;
	gap: 0.75rem;
	align-items: center;
}

/* El centrado va por el margen y no por justify-content, porque el contenedor
   ahora mide fit-content. La variante alineada a la izquierda no lleva margen,
   así que sigue pegada al borde. */
.cl-wa-cta--center .cl-wa-cta__actions {
	margin-inline: auto;
}

@media (max-width: 540px) {
	/* grid-auto-flow y no flex-direction: el contenedor pasó a ser grid, y
	   flex-direction sobre un grid no hace absolutamente nada. Al cambiarlo
	   arriba y olvidar esta regla, los botones quedaron en fila y con anchos
	   distintos justo en teléfono, que antes era el único tamaño donde
	   empataban. */
	.cl-wa-cta__actions {
		grid-auto-flow: row;
		width: 100%;
		max-width: 320px;
	}
	.cl-wa-cta__actions .cl-btn {
		width: 100%;
		justify-content: center;
	}
}

/* 6. Formularios
   ============================================================ */
.cl-field {
	position: relative;
	margin-bottom: 1.5rem;
}

.cl-field 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-field input,
.cl-field textarea,
.cl-field select {
	width: 100%;
	padding: 0.75rem 0;
	background: transparent;
	border-bottom: 1.5px solid var(--border);
	color: var(--text-primary);
	transition: border-color var(--ease);
	font-size: 1rem;
	/* Explícito y no heredado: sin esto el alto del campo depende de qué
	   line-height le toque a cada página, y Mi cuenta medía 51px contra los 52
	   del resto. Mismo valor que los campos de Contacto, Trabajá y
	   Arrepentimiento. */
	line-height: 1.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-field input:focus,
.cl-field textarea:focus,
.cl-field select:focus {
	border-color: var(--color-primary);
}

/* Línea animada bajo el input.
 *
 * Dorada y no blush: es el mismo gesto que el mega menú, donde al pasar el
 * mouse el filete de abajo se pone en oro. Blush daba 1.51:1 contra los
 * fondos del sitio y prácticamente no se veía.
 *
 * ⚠️ NO es el indicador de foco. El dorado da 2.42:1 y la norma pide 3:1 para
 * el indicador de estado de un control, así que el que cumple sigue siendo el
 * borde que pasa a tinta (12:1 contra el filete en reposo). Esta línea suma
 * marca, no accesibilidad: si algún día se saca el borde tinta, el foco deja
 * de cumplir. */
/* El censo del 2026-08-11: el filete estaba en 2 de las 6 familias de campos
   del sitio (.cl-field en Mi cuenta y .wpcf7-form-control-wrap en Contacto y
   Trabajá con nosotros), y faltaba en TODO el checkout —que es donde el cliente
   más tiempo pasa escribiendo—. Se suman las dos familias del checkout:
   .woocommerce-input-wrapper (facturación y envío) y las .form-row del
   formulario de login. Quedan sin filete el cupón del carrito, Rastreo y Saldo
   de gift card: esos inputs no tienen ningún contenedor donde colgar el ::after
   y habría que envolverlos, que es marcado de plugin. */
.cl-field::after,
.wpcf7-form-control-wrap::after,
.woocommerce-checkout .woocommerce-input-wrapper::after,
.woocommerce-checkout .woocommerce-form-login .form-row::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background-color: var(--color-gold);
	transition: width var(--ease-slow);
	pointer-events: none;
}

/* CF7 envuelve cada campo en un <span> que por defecto es inline: sin block
   la línea no toma el ancho del campo. El position:relative ya lo trae. */
.wpcf7-form-control-wrap {
	display: block;
}

/* El ::after se posiciona contra su contenedor: sin relative se cuelga del
   primer ancestro posicionado y la línea aparece en cualquier lado. .cl-field
   y .wpcf7-form-control-wrap ya lo traían. */
.woocommerce-checkout .woocommerce-input-wrapper {
	position: relative;
	display: block;
}

.cl-field:focus-within::after,
.wpcf7-form-control-wrap:focus-within::after,
.woocommerce-checkout .woocommerce-input-wrapper:focus-within::after,
.woocommerce-checkout .woocommerce-form-login .form-row:focus-within::after {
	width: 100%;
}

/* 7. Pills / Badges
   ============================================================ */
.cl-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.3rem 0.85rem;
	border-radius: var(--radius-pill);
	border: 1.5px solid var(--border);
	background-color: var(--bg-parch);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps-md);
	text-transform: uppercase;
	color: var(--text-muted);
	white-space: nowrap;
}

.cl-pill--active {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--text-white);
}

.cl-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--radius-pill);
	background-color: var(--color-blush);
	color: var(--color-primary);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
}

/* 8. Separadores ornamentales
   ============================================================ */
.cl-divider {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-block: 1.5rem;
}

.cl-divider::before,
.cl-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--line-blush);
}

.cl-divider__gem {
	width: 8px;
	height: 8px;
	background-color: var(--color-blush);
	transform: rotate(45deg);
	flex-shrink: 0;
}

.cl-line-blush {
	height: 2px;
	background: var(--line-blush);
	border: none;
	margin-block: 2rem;
}

/* 9. Cards
   ============================================================ */
.cl-card {
	border-radius: var(--radius-card);
	overflow: hidden;
	transition: box-shadow var(--ease), border-color var(--ease);
}

.cl-card--bordered {
	border: 1.5px solid var(--border);
}

.cl-card--bordered:hover {
	border-color: var(--color-blush);
	box-shadow: var(--shadow-blush);
}

/* 10. Topbar rotativo
   ============================================================ */
.cl-topbar {
	position: relative;
	height: var(--topbar-h);
	background-color: var(--bg-dark);
	overflow: hidden;
	z-index: 1000;
}

.cl-topbar__track {
	position: relative;
	height: 100%;
}

.cl-topbar__item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	opacity: 0;
	transform: translateY(100%);
	transition: opacity 400ms var(--ease-out-warm), transform 400ms var(--ease-out-warm);
	pointer-events: none;
}

.cl-topbar__item.is-active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.cl-topbar__item.is-leaving {
	opacity: 0;
	transform: translateY(-100%);
}

.cl-topbar__text {
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: var(--ls-caps-md);
	text-transform: uppercase;
	color: var(--text-white);
}

.cl-topbar__dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--color-blush);
	flex-shrink: 0;
}

/* mobile-first: desktop text hidden by default, shown at 641px+ */
.cl-topbar__text--desktop {
	display: none;
}

@media (min-width: 641px) {
	.cl-topbar__text--desktop { display: inline; }
	.cl-topbar__text--mobile  { display: none; }
}

/* 11. Header / Nav
   ============================================================ */
.cl-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background-color: var(--bg-dark);
	height: var(--header-h);
}

.cl-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr; /* hamburger/nav-left | logo | right */
	align-items: end;
	height: 100%;
	padding-inline: var(--container-pad);
	padding-block-end: 0.875rem;
	max-width: var(--container-max);
	margin-inline: auto;
}

/* Logo */
.cl-logo {
	font-family: var(--font-serif);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps-lg);
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	line-height: 1;
}

.cl-logo span {
	display: block;
	font-size: 0.5rem;
	letter-spacing: 0.5em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
	font-family: var(--font-sans);
	font-weight: 400;
	margin-top: 0.4rem;
}

/* Thin rule between wordmark and ARGENTINA */
.cl-logo span::before {
	content: '';
	display: block;
	width: 3.5rem;
	border-top: 0.5px solid rgba(255, 255, 255, 0.35);
	margin: 0 auto 0.4rem;
}

/* Light header variant — activate by adding .cl-header--light to <header> */
.cl-header--light .cl-logo { color: var(--color-primary); }
.cl-header--light .cl-logo span { color: rgba(0, 0, 0, 0.55); }
.cl-header--light .cl-logo span::before { border-top-color: rgba(0, 0, 0, 0.2); }

/* Nav links */
.cl-nav {
	display: flex;
	align-items: center;
}

.cl-nav--left  { justify-content: flex-start; }
.cl-nav--right { justify-content: flex-end; }

.cl-nav__list {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* hidden on mobile, shown at 1025px+ */
.cl-nav--left,
.cl-nav--right {
	display: none;
}

/* El contenedor derecho y los íconos siempre en fila — el media query de 1025px
   solo agrega los estilos de escritorio encima de esto */
.cl-header__right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* gap 0.5rem y no 0: los tres bloques se tocaban. Con el rótulo debajo del
   ícono cada bloque es más ancho, y pegados leían como uno solo —la lupa
   parecía parte de "Mi cuenta"—. */
.cl-header__right-icons {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* En mobile ocultamos Mi Cuenta — está en el nav mobile */
.cl-header__right-icons > a.cl-nav__icon--label {
	display: none;
}

.cl-nav__link {
	position: relative;
	/* padding-block 1rem y no 0.5: el alto clickeable pasa de 28px a 43px dentro
	   de un header de 90px, o sea que antes DOS TERCIOS de la altura del header
	   no respondían al clic. El texto no se mueve —el nav se centra vertical—,
	   sólo crece el área que acepta el puntero.

	   El horizontal baja de 1.25rem a 0.875rem: entre el texto de dos ítems
	   había 20+20+4 = 44px y el nav se leía disperso en pantallas grandes.
	   Ahora son 32px, que sigue siendo cómodo.

	   Va por variable porque el filete del ítem activo (::after, más abajo)
	   tiene que arrancar y terminar EXACTAMENTE en el mismo valor. Estaban
	   escritos a mano en los dos lados y ya se habían desincronizado una vez. */
	--nav-pad-x: 0.875rem;
	padding: 1rem var(--nav-pad-x);
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps-md);
	text-transform: uppercase;
	color: var(--text-white);
	transition: color var(--ease);
	white-space: nowrap;
}

/* Entre 1025 y 1319px la nav no entra y se apretuja contra el logo.
   La causa es la grilla del header: `1fr auto 1fr` obliga a que la columna
   izquierda mida lo mismo que la derecha, así que la nav sólo dispone de
   (ancho − logo) / 2 — unos 372px a 1025px — cuando necesita ~570.

   Se recupera del AIRE, no del contenido: con 5 ítems el padding suma 200px y
   el espaciado de letras otros ~98px, o sea más de la mitad del ancho que
   ocupa la barra. Bajando padding y letter-spacing se ganan ~176px sin acortar
   ninguna etiqueta, sin mover el logo, sin sumar altura y sin achicar la
   tipografía — que a 11px en mayúsculas ya está en el límite de lo legible.

   El corte superior es 1319 y no 1300 para no quedar justo en el ancho de un
   portátil de 1366px, donde la barra ya entra holgada. */
@media (min-width: 1025px) and (max-width: 1319px) {
	.cl-nav__link {
		--nav-pad-x: 0.35rem;
		letter-spacing: 0.09em;
	}

	/* El gap de la lista es de sólo 4px: la separación que se ve entre dos
	   palabras es el padding de los enlaces, no este hueco. Se lleva a cero
	   porque acá cada píxel cuenta, pero aporta 16px en total — el trabajo
	   pesado lo hace el padding de arriba.

	   0.35rem son 5,6px por lado: sumado al padding vertical de 0.5rem, el área
	   clickeable sigue por encima del mínimo cómodo. No bajar más de acá sin
	   probarlo con el mouse: el objetivo empieza a costar. */
	.cl-nav__list {
		gap: 0;
	}
}

.cl-nav__link::after {
	content: '';
	position: absolute;
	/* 0.5rem y no 0: el filete se ancla al PADDING BOX, así que al subir el
	   padding vertical a 1rem se habría despegado 16px del texto. Con 0.5rem
	   conserva exactamente la separación que tenía. */
	bottom: 0.5rem;
	left: var(--nav-pad-x);
	right: var(--nav-pad-x);
	/* 1px y no 2: sobre versalitas de 11px espaciadas, dos píxeles se leen como
	   una barra y no como un subrayado. El filete fino es además el mismo trazo
	   que los títulos de columna del footer y los círculos de las franjas. */
	height: 1px;
	background-color: var(--color-blush);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 300ms var(--ease-out-warm);
}

/* Hover: "estás señalando esto". */
.cl-nav__link:hover,
.cl-nav__link[aria-expanded="true"] {
	color: var(--color-blush);
}

/* Activo: "estás acá". Antes compartía el blush con el hover, así que los dos
   estados se pintaban igual y la barra no decía en qué página estabas salvo
   que movieras el mouse. En dorado se distinguen, y el dorado queda presente
   en la nav en todas las páginas. Se declara también el :hover para que al
   pasar por encima del ítem actual no vuelva a blush. */
.cl-nav__link--active,
.cl-nav__link--active:hover {
	color: var(--color-gold);
}

.cl-nav__link--active::after {
	background-color: var(--color-gold);
}

.cl-nav__link:hover::after,
.cl-nav__link--active::after,
.cl-nav__link[aria-expanded="true"]::after {
	transform: scaleX(1);
}


/* Íconos nav */
.cl-nav__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--text-white);
	transition: color var(--ease);
}

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

.cl-nav__icon svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Carrito con badge */
.cl-nav__cart {
	position: relative;
}

.cl-cart-count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: var(--radius-pill);
	/* Dorada, no blush: es la única señal de la barra que dice "hay algo tuyo
	   acá dentro", y el blush relleno la convertía en el elemento más fuerte
	   del header. En dorado avisa igual sin gritar, y acompaña al resto de los
	   indicadores de estado. */
	background-color: var(--color-gold);
	color: var(--color-primary);
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

/* 12. Megamenú
   ============================================================ */
.cl-mega {
	position: absolute;
	top: calc(var(--topbar-h) + var(--header-h));
	left: 0;
	right: 0;
	background-color: var(--bg-white);
	border-top: none;
	box-shadow: 0 12px 40px rgba(28, 28, 28, 0.16);
	display: none !important; /* hidden on mobile — desktop override at 1025px+ */
	animation: cl-menu-in 0.22s var(--ease-out-warm) both;
	z-index: 800;
}

@media (min-width: 1025px) {
	.cl-mega { display: none !important; }
	.cl-mega.is-open { display: block !important; }
}

.cl-mega__inner {
	display: grid;
	grid-template-columns: 180px 1fr 220px;
	min-height: 400px;
	max-width: var(--container-max);
	margin-inline: auto;
}

/* Columna categorías */
/* La columna izquierda entera: el rail de categorías arriba y el acceso
   corporativo abajo, separados por un filete. El borde y el padding viven acá
   y no en .cl-mega__cats para que la línea divisoria llegue hasta el pie de la
   columna. */
.cl-mega__rail {
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--border);
	padding: 3.25rem 0 2.75rem;
}

.cl-mega__cats {
	border-right: 0;
	padding: 0;
}

.cl-mega__cat {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.5rem;
	cursor: pointer;
	transition: background var(--ease), border-color var(--ease);
	border-right: 3px solid transparent;
}

.cl-mega__cat:hover {
	background-color: var(--bg-light);
	border-right-color: var(--color-blush);
}

/* Dorado = la categoría abierta. Ojo: en este rail el hover SELECCIONA, así que
   el ítem señalado pasa a ser el activo y no son dos estados distintos como en
   la nav de arriba. La regla de :hover queda igual (blush) pero casi no se ve:
   .is-active empata en especificidad y va después, así que gana el dorado. */
.cl-mega__cat.is-active {
	background-color: var(--bg-parch);
	border-right-color: var(--color-gold);
}

.cl-mega__cat-icon {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	transition: color var(--ease);
}

.cl-mega__cat-icon svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cl-mega__cat:hover .cl-mega__cat-icon,
.cl-mega__cat.is-active .cl-mega__cat-icon {
	color: var(--color-primary);
}

/* Tab destacado (Gift Cards) — chip dorado sobre el sidebar. Era blush relleno
   y sobre el crema del rail leía salmón, que es el único punto del sitio donde
   el blush se usaba como fondo saturado. El dorado marca lo destacado, igual
   que en el resto de la nav. */
.cl-mega__cat--highlight .cl-mega__cat-icon {
	background-color: var(--color-gold);
	color: var(--color-primary);
}

.cl-mega__cat--highlight .cl-mega__cat-name {
	color: var(--color-primary);
}

.cl-mega__cat-name {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps-sm);
	text-transform: uppercase;
	flex: 1;
}

.cl-mega__cat-count {
	font-size: 0.625rem;
	color: var(--text-muted);
}

/* Columna subcategorías */
.cl-mega__subs {
	padding: 3.25rem 2.25rem 2rem;
}

.cl-mega__quick {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 2rem;
	flex-wrap: wrap;
}

/* Pills de acceso rápido */
.cl-mega__quick .cl-pill {
	padding: 0.45rem 1.1rem;
}

.cl-mega__quick .cl-pill:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--text-white);
}

.cl-mega__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Sin separación entre filas: los filetes de las tres columnas se alinean y
	   forman renglones continuos, como una lista. La separación lateral sube
	   para que las columnas se lean como columnas y no como una grilla. */
	column-gap: 2.5rem;
	row-gap: 0;
}

/* Los links de categoría son LINKS, no tarjetas. El footer lista exactamente
   este mismo contenido —Mujer, Hombre, Trabajo y Viaje…— como links con filete,
   y es el tratamiento correcto: en todo el sitio no hay una sola caja con
   borde. Encajonados acá, el menú se leía como un formulario de administración.
   Los dos CTA (Ver todo / Comprar Gift Card) sí siguen siendo botones: son
   acciones, no destinos. */
.cl-mega__sub-card {
	display: block;
	padding: 0.8rem 0.25rem;
	border: 0;
	border-bottom: 1px solid var(--border);
	border-radius: 0;
	transition: color var(--ease), border-color var(--ease);
}

.cl-mega__sub-card:hover {
	background-color: transparent;
	border-bottom-color: var(--color-gold);
	color: var(--color-gold);
	/* Sin sombra: el glow de color quedó descartado en Preguntas Frecuentes. */
	box-shadow: none;
}

/* Los dos CTA recuperan la caja que la regla de arriba les saca — pero con el
   lenguaje de botón del resto del sitio, no el suyo propio. .cl-btn (main.css)
   es recto, versalitas, 700 y ancho al contenido; estos eran redondeados de
   6px, en minúsculas y ocupando toda la columna de la grilla. Eso los hacía
   ver como un widget pegado y no como los botones de la tienda. */
.cl-mega__sub-card--dark,
.cl-mega__sub-card--blush {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	justify-self: start;   /* ancho al contenido dentro de la celda del grid */
	padding: 0.75rem 1.75rem;
	border: 1px solid transparent;
	border-radius: 0;
	margin-top: 1.5rem;
	text-align: center;
}

.cl-mega__sub-card--dark .cl-mega__sub-name,
.cl-mega__sub-card--blush .cl-mega__sub-name {
	font-size: 0.75rem;
	letter-spacing: var(--ls-caps-md);
	text-transform: uppercase;
	margin-bottom: 0;
}

.cl-mega__sub-card--blush .cl-mega__sub-count {
	margin-top: 0.2rem;
	font-size: 0.625rem;
	letter-spacing: 0.04em;
}

.cl-mega__sub-card--dark {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--text-white);
}

.cl-mega__sub-card--dark:hover,
.cl-mega__sub-card--dark:focus-visible {
	background-color: var(--color-hover);
	/* Dorado en el texto y el filete: es el mismo gesto que ya hacen las otras
	   tarjetas del megamenú y el enlace corporativo al pasar el mouse. Antes el
	   "Ver todo" sólo aclaraba el fondo y el texto seguía blanco, o sea que era
	   el único elemento del panel que no respondía en oro.
	   Contraste medido: 6.21:1 sobre #2d2520 — pasa 4.5. */
	border-color: var(--color-gold);
	color: var(--color-gold);
}

/* Negro con filete dorado: el label en blush —que sobre negro es el más
   luminoso de los dos, 11,3:1 contra 7,0:1 del dorado, así que la acción manda—
   y el precio en dorado. Usa los tres colores con una jerarquía clara en vez de
   ser un bloque blush plano.
   Sólo aparece en la solapa Gift Cards, nunca junto al "Ver todo" negro, así
   que no se confunden. */
.cl-mega__sub-card--blush {
	background-color: var(--bg-dark);
	border-color: var(--color-gold);
	color: var(--color-blush);
}

.cl-mega__sub-card--blush:hover {
	background-color: var(--color-hover);
	border-color: var(--color-blush);
	color: var(--color-blush);
}

.cl-mega__sub-card--blush .cl-mega__sub-count {
	color: var(--color-gold);
}

/* Panel Gift Cards: comprar (botón) + consultar saldo (link), apilados en una
   sola celda de la grilla de 3 columnas. Sueltos caerían en celdas contiguas y
   desalineados, porque el botón lleva margin-top y el link no. */
.cl-mega__gc-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Secundario a propósito: el filete y el hover en oro son el mismo gesto que el
   resto de los enlaces del panel, sin disputarle el peso al botón de comprar.
   --text-muted da 5.32:1 sobre el fondo blanco del panel. */
.cl-mega__gc-balance {
	/* inline-flex y no inline: así el filete mide lo que mide el texto y no todo
	   el ancho del panel, que es lo que lo volvía un separador en vez de un
	   enlace. `width: max-content` lo blinda por si el contenedor es flex. */
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	width: max-content;
	margin-top: 0.9rem;
	font-size: 0.75rem;
	letter-spacing: var(--ls-caps-md);
	text-transform: uppercase;
	color: var(--text-muted);
	border-bottom: 1px solid var(--border);
	padding-bottom: 0.2rem;
	transition: color var(--ease), border-color var(--ease);
}

/* La flecha se corre 3px al pasar el mouse: es el mismo gesto que .cl-gc-cta__link
   en la sección de Gift Cards del home, así que los dos enlaces discretos del
   sitio se comportan igual. */
.cl-mega__gc-balance span {
	transition: transform var(--ease);
}

.cl-mega__gc-balance:hover,
.cl-mega__gc-balance:focus-visible {
	color: var(--color-gold);
	border-bottom-color: var(--color-gold);
}

.cl-mega__gc-balance:hover span {
	transform: translateX(3px);
}

.cl-mega__sub-name {
	font-size: 0.75rem;
	font-weight: 700;
	margin-bottom: 0.25rem;
}

.cl-mega__sub-count {
	font-size: 0.6875rem;
	color: var(--text-muted);
}

.cl-mega__sub-card--dark .cl-mega__sub-count {
	color: rgba(255, 255, 255, 0.6);
}

/* Acá vivía .cl-mega__corp-link, el acceso a "Regalos corporativos" al pie de
   la columna de categorías del megamenú. Se sacó en v2.7.99: la página pasó al
   menú principal, después de "Contacto". Es una página institucional, no una
   familia de producto, y en el megamenú competía con las tres categorías
   reales. Las reglas se borran con el marcado para no dejar CSS muerto — si
   alguna vez vuelve, se recupera de este commit. */

/* Columna editorial */
.cl-mega__editorial {
	border-left: 1px solid var(--border);
	padding: 3.25rem 2rem 2.75rem;
	display: flex;
	flex-direction: column;
}

.cl-mega__editorial .cl-btn {
	width: 100%;
}

/* Ghost en editorial: borde blush en reposo — distinto del primary dark */
.cl-mega__editorial .cl-btn--ghost {
	box-shadow: inset 0 0 0 2px var(--color-blush);
	color: var(--color-primary);
}

.cl-mega__editorial .cl-btn--ghost:hover,
.cl-mega__editorial .cl-btn--ghost:focus-visible {
	background-color: var(--color-blush);
	color: var(--color-primary);
	box-shadow: inset 0 0 0 2px var(--color-blush);
	transform: translateY(-1px);
}

.cl-mega__ed-img {
	width: 100%;
	aspect-ratio: 4/5;
	object-fit: cover;
	border-radius: var(--radius-card);
	margin-bottom: 1rem;
	background-color: var(--bg-mid);
}

.cl-mega__ed-title {
	font-family: var(--font-serif);
	font-size: 1.125rem;
	margin-bottom: 0.75rem;
}

.cl-mega__ed-ctas {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: auto;
}

/* Trust bar megamenú — full-width (sibling de .cl-mega__inner, no dentro del grid) */
.cl-mega__trust {
	background-color: var(--bg-light);
	border-top: 1px solid var(--border);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding: 0.875rem var(--container-pad);
}

.cl-mega__trust-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.6875rem;
	color: var(--text-muted);
}

.cl-mega__trust-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--color-gold);
	flex-shrink: 0;
}

/* 13. Menú mobile
   ============================================================ */
.cl-mobile-toggle {
	display: flex; /* visible on mobile by default, hidden at 1025px+ */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	justify-self: start;
	gap: 5px;
	width: 44px;
	height: 44px;
}

.cl-mobile-toggle span {
	display: block;
	width: 22px;
	height: 1.5px;
	background-color: var(--text-white);
	transition: transform var(--ease), opacity var(--ease);
}

.cl-mobile-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.cl-mobile-toggle.is-open span:nth-child(2) { opacity: 0; }
.cl-mobile-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Drawer */
/* Mientras el panel está abierto es un modal: nada puede quedar por encima.
   Dos elementos flotantes lo tapaban, los dos con z-index altísimo:

     .ht-ctc            — WhatsApp del plugin click-to-chat   z-index 99999999
     #clh-catalog-banner — banner del Casa Lopez Helper         z-index 99999

   Contra el panel (9999) ganaban ambos, y se comían los links del pie del
   drawer (Regalos Corporativos · Ubicación · Contacto). Es el ítem C2 de
   PRELAUNCH-CHECKLIST, y pasaba también en la tienda, no sólo en catálogo.
   Se apagan mientras dure la apertura en vez de subir el panel a 100000000 y
   seguir la escalada: la clase la pone y la saca initMobileNav() en main.js.

   OJO: los dos selectores son de PLUGINS, no del theme. Si se desinstala
   click-to-chat o cambia el markup del banner, estas reglas quedan inertes —
   no rompen nada, pero hay que revisarlas. */
body.cl-nav-open .ht-ctc,
body.cl-nav-open #clh-catalog-banner { display: none; }

.cl-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	background-color: var(--bg-white);
	transform: translateX(-100%);
	transition: transform 650ms var(--ease-drawer);
	overflow-y: auto;
	padding-bottom: env(safe-area-inset-bottom);
}

.cl-mobile-nav.is-open {
	transform: translateX(0);
}

.cl-mobile-nav__overlay {
	position: fixed;
	inset: 0;
	background: rgba(28, 28, 28, 0.5);
	z-index: 9998;
	opacity: 0;
	pointer-events: none;
	transition: opacity 650ms var(--ease-drawer);
}

.cl-mobile-nav__overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.cl-mobile-nav__account {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--border);
}

/* En modo catálogo esta barra queda sólo con el botón de cerrar (no hay cuenta
   ni pedidos), así que el padding de 1.25rem la dejaba en 73px de alto vacío.
   Se ajusta para que el menú empiece más arriba. */
.cl-mobile-nav__account--catalog {
	padding-block: 0.625rem;
	justify-content: flex-end;
}

/* Aro dorado y no blush: es el mismo criterio que el chip de Gift Cards del
   mega-menú, donde el blush relleno leía salmón. */
.cl-mobile-nav__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--color-gold);
	background-color: transparent;
	color: var(--color-gold);
	flex-shrink: 0;
}

.cl-mobile-nav__avatar svg {
	width: 17px;
	height: 17px;
}

/* El nombre de quien inició sesión: serif itálica, es un nombre propio. */
.cl-mobile-nav__user-name {
	font-family: var(--font-serif);
	font-size: 0.9375rem;
	font-style: italic;
}

/* "Iniciar sesión" NO: es una acción, no un nombre. En serif itálica era el
   único texto del menú fuera de la sans y se leía como una cita. */
.cl-mobile-nav__signin {
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	font-weight: 700;
	font-style: normal;
	letter-spacing: var(--ls-caps-sm);
	text-transform: uppercase;
	color: var(--text-primary);
	transition: color var(--ease);
}

.cl-mobile-nav__signin:hover {
	color: var(--color-gold);
}

.cl-mobile-nav__gender-pills {
	display: flex;
	gap: 0.5rem;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--border);
}

.cl-mobile-nav__items {
	flex: 1;
	padding: 0.75rem 0;
}

.cl-mobile-nav__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.9375rem 1.5rem;
	border-bottom: 1px solid var(--border);
	transition: background var(--ease);
}

.cl-mobile-nav__item:hover {
	background-color: var(--bg-light);
}

.cl-mobile-nav__item-name {
	font-weight: 700;
	font-size: 0.9375rem;
	flex: 1;
}

.cl-mobile-nav__item-arrow {
	flex-shrink: 0;
	color: var(--text-muted);
	transition: transform var(--ease), color var(--ease);
}

.cl-mobile-nav__item:hover .cl-mobile-nav__item-arrow {
	color: var(--color-primary);
	transform: translateX(2px);
}

/* "Estás acá", igual que en la nav de escritorio. El chevron acompaña, pero
   sólo en el ítem activo: si TODOS los chevrons fueran dorados el color dejaría
   de significar algo. */
.cl-mobile-nav__item--active .cl-mobile-nav__item-name,
.cl-mobile-nav__item--active .cl-mobile-nav__item-arrow {
	color: var(--color-gold);
}

.cl-mobile-nav__item-count {
	font-size: 0.6875rem;
	color: var(--text-muted);
}

/* El selector de idioma dentro del cajón mobile.
   El parcial es el mismo del header, pero el header es oscuro y el cajón es
   blanco: .cl-lang-link pinta con --on-dark-faint, así que tal cual venía los
   dos idiomas quedaban casi invisibles. Acá se reescriben nada más que los
   colores y la caja.

   Va al fondo del cajón, debajo de la tarjeta de Gift Cards, y CENTRADO: no es
   una acción de navegación sino un ajuste, así que se lo saca de la columna de
   enlaces —donde alineado a la izquierda leía como un ítem más de la lista— y
   se lo deja como cierre. El padding inferior le da aire contra el borde del
   cajón; el superior es chico porque la tarjeta ya trae su propio margen. */
.cl-mobile-nav__lang {
	display: flex;
	justify-content: center;
	padding: 0.5rem 1.5rem 1.75rem;
}

.cl-mobile-nav__lang .cl-lang {
	gap: 0.5rem;
}

.cl-mobile-nav__lang .cl-lang-link {
	/* 44px: acá es una fila del cajón que se toca con el dedo, no una píldora
	   de barra superior que se apunta con el mouse. */
	min-height: 44px;
	padding: 0.5rem 1rem;
	color: var(--text-muted);
	border-color: var(--border);
}

.cl-mobile-nav__lang .cl-lang-link.active {
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.cl-mobile-nav__highlight {
	margin: 1.25rem 1.5rem;
	padding: 1.125rem 1.25rem;
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-hover) 100%);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: var(--radius-card);
	border: 1px solid rgba(201,160,96,0.35);
	box-shadow: 0 4px 18px rgba(201,160,96,0.15);
	transition: box-shadow var(--ease), transform var(--ease);
}

.cl-mobile-nav__highlight:hover,
.cl-mobile-nav__highlight:focus-visible {
	box-shadow: 0 6px 24px rgba(201,160,96,0.28);
	transform: translateY(-1px);
}

.cl-mobile-nav__highlight .cl-eyebrow {
	color: var(--color-gold);
	letter-spacing: 0.12em;
}

.cl-mobile-nav__highlight svg {
	color: var(--color-gold);
	flex-shrink: 0;
}

.cl-mobile-nav__highlight-title {
	font-family: var(--font-serif);
	font-size: 1.125rem;
	font-weight: 500;
	margin-top: 0.125rem;
	color: #fff;
	letter-spacing: 0.01em;
}

.cl-mobile-nav__footer-links {
	padding: 1rem 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	border-top: 1px solid var(--border);
	margin-top: auto;
}

.cl-mobile-nav__footer-link {
	font-size: 0.75rem;
	color: var(--text-muted);
	letter-spacing: 0.1em;
}

.cl-mobile-nav__item--parent {
	width: 100%;
	background: none;
	border: none;
	border-bottom: 1px solid var(--border);
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	color: inherit;
}

.cl-mobile-nav__item--parent.is-open .cl-mobile-nav__item-arrow {
	transform: rotate(90deg);
	color: var(--color-primary);
}

.cl-mobile-nav__submenu {
	display: flex;
	flex-direction: column;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	background-color: var(--bg-light);
}

.cl-mobile-nav__submenu.is-open {
	max-height: 600px;
}

.cl-mobile-nav__sub-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.8125rem 1.5rem 0.8125rem 2rem;
	font-size: 0.875rem;
	color: var(--text-primary);
	text-decoration: none;
	border-bottom: 1px solid var(--border);
	transition: background var(--ease), color var(--ease);
}

.cl-mobile-nav__sub-item:hover {
	background-color: var(--bg-mid);
	color: var(--color-primary);
}

/* 14. Mini Cart
   ============================================================ */
.cl-mini-cart {
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: 100dvh;
	background-color: var(--bg-white);
	box-shadow: -4px 0 32px rgba(28, 28, 28, 0.12);
	display: flex;
	flex-direction: column;
	z-index: 9990;
	transform: translateX(100%);
	transition: transform 650ms var(--ease-drawer);
	will-change: transform;
	overflow: hidden;
}

@media (min-width: 481px) {
	.cl-mini-cart {
		width: 400px;
	}
}

.cl-mini-cart.is-open {
	transform: translateX(0);
}

.cl-mini-cart__overlay {
	position: fixed;
	inset: 0;
	background: rgba(28, 28, 28, 0.4);
	z-index: 9989;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--ease-slow);
}

.cl-mini-cart__overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.cl-mini-cart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--border);
}

.cl-mini-cart__title {
	font-family: var(--font-serif);
	font-size: 1.25rem;
}

.cl-mini-cart__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--text-muted);
	transition: color var(--ease);
}

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

.cl-mini-cart__body {
	flex: 1;
	overflow-y: auto;
	padding: 1rem 1.5rem;
}

.cl-mini-cart__item {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	gap: 0.75rem;
	padding-block: 1rem;
	border-bottom: 1px solid var(--border);
}

.cl-mini-cart__img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: var(--radius-card);
	background-color: var(--bg-mid);
}

.cl-mini-cart__name {
	font-weight: 700;
	font-size: 0.875rem;
	margin-bottom: 0.2rem;
}

.cl-mini-cart__variant {
	font-size: 0.75rem;
	color: var(--text-muted);
}

.cl-mini-cart__price {
	font-family: var(--font-serif);
	font-size: 0.9375rem;
}

.cl-mini-cart__fee {
	color: var(--text-primary);
	font-weight: 600;
}

.cl-mini-cart__remove {
	font-size: 0.6875rem;
	color: var(--text-muted);
	cursor: pointer;
	transition: color var(--ease);
}

.cl-mini-cart__remove:hover {
	color: var(--color-bordeaux);
}

.cl-mini-cart__qty {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.375rem;
}

.cl-mini-cart__qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	background: none;
	/* --text-body no existe: sin fallback la declaración es inválida y el color se
	   terminaba heredando. Se apunta al token real. */
	color: var(--text-primary);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color var(--ease), color var(--ease);
}

.cl-mini-cart__qty-btn:hover {
	border-color: var(--color-gold);
	color: var(--color-gold);
}

.cl-mini-cart__qty-num {
	min-width: 18px;
	text-align: center;
	font-size: 0.8125rem;
	font-weight: 600;
}

.cl-mini-cart__item.is-removing {
	opacity: 0.4;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.cl-mini-cart__foot {
	padding: 1.25rem 1.5rem;
	border-top: 1px solid var(--border);
}

.cl-mini-cart__subtotal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 1rem;
}

.cl-mini-cart__subtotal-label {
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.cl-mini-cart__subtotal-amount {
	font-family: var(--font-serif);
	font-size: 1.25rem;
}

.cl-mini-cart__engraving-line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 0.75rem;
	font-size: 0.8125rem;
	color: var(--text-muted);
}

.cl-mini-cart__secure {
	text-align: center;
	font-size: 0.6875rem;
	color: var(--text-muted);
	margin-top: 0.75rem;
}

/* 15. Footer
   ============================================================ */
.cl-footer {
	background-color: var(--bg-dark);
	color: var(--text-white);
}

/* Newsletter strip */
.cl-footer__newsletter {
	background-color: var(--bg-newsletter);
	padding: 3rem var(--container-pad);
	border-top: 2px solid var(--color-blush);
}

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

.cl-footer__nl-title {
	font-family: var(--font-serif);
	font-size: 1.5rem;
	margin-bottom: 0.25rem;
}

.cl-footer__nl-sub {
	font-size: 0.875rem;
	color: var(--on-dark-soft);
}

.cl-footer__nl-form {
	display: flex;
	flex-direction: column; /* stacked on mobile, row at 769px+ */
	gap: 0.75rem;
}

.cl-footer__nl-input {
	padding: 0.875rem 1.25rem;
	background-color: rgba(255, 255, 255, 0.08);
	border: 1.5px solid rgba(255, 255, 255, 0.15);
	color: var(--text-white);
	width: 100%; /* full width on mobile, fixed at 769px+ */
	font-size: 0.875rem;
}

.cl-footer__nl-input::placeholder {
	color: var(--on-dark-faint);
}

/* Footer body */
.cl-footer__body {
	padding: 4rem var(--container-pad) 3rem;
}

.cl-footer__body-inner {
	max-width: var(--container-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr; /* single col on mobile, 3-col at 769px+ */
	gap: 2rem;
}

.cl-footer__brand-logo {
	display: block;
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

.cl-footer__brand-tagline {
	font-style: italic;
	font-size: 0.875rem;
	color: var(--on-dark-soft);
	margin-bottom: 1.5rem;
	line-height: 1.65;
}

.cl-footer__socials {
	display: flex;
	gap: 0.75rem;
}

.cl-footer__social-link {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--on-dark-soft);
	font-size: 0.875rem;
	transition: border-color var(--ease), color var(--ease);
}

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

.cl-footer__col-title {
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--color-blush);
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	/* El texto queda en blush —es navegación— y el filete pasa a dorado. Así el
	   hilo fino dorado se repite en todo el sitio: acá, en los círculos de la
	   franja de servicios y en los datos de marca de más abajo. Va al 55% y no
	   al 100%: a ancho completo de columna, el dorado pleno compite con los
	   títulos en vez de subrayarlos. */
	border-bottom: 1px solid rgba(201, 160, 96, 0.55);
}

.cl-footer__col-links {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.cl-footer__col-link {
	font-size: 0.875rem;
	color: var(--on-dark-soft);
	transition: color var(--ease);
}

.cl-footer__col-link:hover {
	color: var(--text-white);
}

/* Trust strip (reemplaza info bar) */
.cl-footer__trust {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding: 2rem var(--container-pad);
	background-color: rgba(0, 0, 0, 0.12);
}

.cl-footer__trust-inner {
	max-width: var(--container-max);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem 2.5rem;
	flex-wrap: wrap;
}

.cl-footer__trust-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.3rem;
}

/* Dorado, y es el único del footer. El resto del chrome —nav, carrito, títulos
   de columna— va en blush: blush es estructura, dorado es contenido. Estos
   cuatro datos son contenido, son la única itálica del bloque, y quedan justo
   arriba de su bajada en blush, que es el mismo par que la franja de servicios
   de la ficha (ícono dorado + título blush). Contraste medido: 7,27:1. */
.cl-footer__trust-val {
	font-family: var(--font-serif);
	font-size: 1rem;
	font-style: italic;
	color: var(--color-gold);
}

.cl-footer__trust-lbl {
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-blush);
}

/* Bottom bar */
.cl-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 1.375rem var(--container-pad) 0;
}

/* Compliance strip: botón de arrepentimiento + sello AFIP */
.cl-footer__compliance {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1rem 1.75rem;
	padding: 0.875rem var(--container-pad) 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.cl-footer__arrepentimiento {
	font-size: 0.6875rem;
	font-family: var(--font-sans);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--on-dark-faint);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-pill);
	padding: 0.35rem 0.9rem;
	transition: color var(--ease), border-color var(--ease);
}
.cl-footer__arrepentimiento:hover {
	color: var(--on-dark-soft);
	border-color: rgba(255, 255, 255, 0.45);
}

.cl-footer__afip-seal {
	display: inline-flex;
	align-items: center;
	opacity: 0.55;
	transition: opacity var(--ease);
	border-radius: var(--radius-card);
	overflow: hidden;
}
.cl-footer__afip-seal:hover { opacity: 0.9; }
.cl-footer__afip-seal img {
	height: 52px;
	width: auto;
	display: block;
}

.cl-footer__bottom-inner {
	max-width: var(--container-max);
	margin-inline: auto;
	display: flex;
	flex-direction: column; /* stacked on mobile, row at 769px+ */
	align-items: center;
	text-align: center;
	gap: 1rem;
}

.cl-footer__copyright {
	font-size: 0.75rem;
	color: var(--on-dark-faint);
}

.cl-footer__legal {
	display: flex;
	gap: 1.25rem;
	list-style: none;
}

/* WP nav menu: ul > li > a */
.cl-footer__legal li {
	list-style: none;
}

.cl-footer__legal li a,
.cl-footer__legal-link {
	font-size: 0.75rem;
	color: var(--on-dark-faint);
	transition: color var(--ease);
}

.cl-footer__legal li a:hover,
.cl-footer__legal-link:hover {
	color: var(--on-dark-soft);
}

/* 16. Lang switcher
   ============================================================ */
.cl-lang {
	display: flex;
	gap: 0.25rem;
	align-items: center;
}

.cl-lang-link {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.6rem;
	border-radius: var(--radius-pill);
	/* El idioma inactivo es texto secundario sobre oscuro, igual que el resto:
	   el activo se distingue por el dorado, no por ser el único legible. */
	color: var(--on-dark-faint);
	transition: color var(--ease), background var(--ease);
	border: 1px solid transparent;
}

.cl-lang-flag {
	font-size: 0.9375rem;
	line-height: 1;
	display: inline-block;
}

.cl-lang-code {
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
}

/* Misma regla que en la nav: el dorado marca dónde estás. Acá es el idioma
   activo, así que las dos señales de "estado actual" de la barra hablan el
   mismo idioma visual. */
.cl-lang-link.active {
	color: var(--color-gold);
	border-color: rgba(201, 160, 96, 0.45);
	background-color: rgba(201, 160, 96, 0.08);
}

.cl-lang-link:hover:not(.active) {
	color: var(--text-white);
	background-color: rgba(255, 255, 255, 0.05);
}

/* Header lang switcher — desktop only (footer shows it on all sizes) */
.cl-header .cl-lang { display: none; }

@media (min-width: 769px) {
	.cl-header .cl-lang {
		display: flex;
		margin-left: 0.875rem;
		padding-left: 0.875rem;
		border-left: 1px solid rgba(255,255,255,0.12);
	}
}

/* 16b. WPML Language Switcher nativo — limitar flags si WPML lo inyecta en menús
   ============================================================ */
.wpml-ls,
.wpml-ls-legacy-list-horizontal,
.wpml-ls-statics-shortcode_actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.wpml-ls-flag,
.wpml-ls img,
.icl_lang_sel_img {
	width: 20px;
	height: auto;
	display: inline-block;
	vertical-align: middle;
}

.wpml-ls-item a {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: color var(--ease);
}

.wpml-ls-item a:hover,
.wpml-ls-item.wpml-ls-current-language a {
	color: var(--text-white);
}

/* 16c. Newsletter strip (cl-footer-nl)
   ============================================================ */
.cl-footer-nl {
	background-color: #252220;
	padding: 3.5rem var(--container-pad);
	border-top: 2px solid var(--color-blush);
}

.cl-footer-nl__inner {
	/* Stacked layout en TODOS los breakpoints — texto arriba, form abajo.
	 * Centrado horizontal, ancho del body (--container-max) para alinear con
	 * footer body y resto del sitio. */
	max-width: var(--container-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: center;
	text-align: center;
}

.cl-footer-nl__text {
	max-width: 640px;
	margin-inline: auto;
}

.cl-footer-nl__form-wrap {
	max-width: 560px;
	margin-inline: auto;
	width: 100%;
}

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

.cl-footer-nl__title {
	font-family: var(--font-serif);
	font-size: 1.625rem;
	font-weight: 400;
	margin-bottom: 0.5rem;
	color: var(--text-white);
}

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

.cl-footer-nl__sub {
	font-size: 0.875rem;
	color: var(--on-dark-soft);
	line-height: 1.65;
}

.cl-footer-nl__form {
	display: flex;
	flex-direction: column; /* stacked on mobile, row at 769px+ */
	gap: 0.5rem;
}

.cl-footer-nl__input {
	padding: 0.875rem 1.25rem;
	background-color: var(--color-blush);
	border: 1.5px solid transparent;
	border-radius: 0;
	color: var(--color-primary);
	width: 100%;
	font-size: 0.875rem;
	font-family: var(--font-sans);
	outline: none;
	transition: border-color var(--ease), background-color var(--ease);
}

.cl-footer-nl__input::placeholder {
	color: rgba(28, 28, 28, 0.45);
}

.cl-footer-nl__input:focus {
	border-color: var(--color-blush-dk);
	outline: none;
}

.cl-footer-nl__btn {
	padding: 0.875rem 1.5rem;
	background-color: var(--color-blush);
	color: var(--color-primary);
	border: none;
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps-md);
	text-transform: uppercase;
	border-radius: 0;
	cursor: pointer;
	transition: background-color var(--ease), color var(--ease);
	white-space: nowrap;
	width: 100%; /* ocupa todo el ancho en mobile */
}

.cl-footer-nl__btn:hover {
	background-color: #d9b0a6;
}

.cl-footer-nl__note {
	margin-top: 0.875rem;
	font-size: 0.6875rem;
	color: var(--on-dark-faint);
	transition: color 0.2s ease;
}
.cl-footer-nl__note.cl-nl-ok  { color: rgba(255, 255, 255, 0.75); font-size: 0.8125rem; }
.cl-footer-nl__note.cl-nl-err { color: #f4a7a0; }

/* 16c. Footer: piezas faltantes
   ============================================================ */
.cl-footer__brand-sub {
	display: block;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps-lg);
	text-transform: uppercase;
	color: var(--color-blush);
	margin-bottom: 0.875rem;
}

.cl-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 1.375rem;
}

.cl-footer__contact-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--on-dark-soft);
	transition: color var(--ease);
	line-height: 1.4;
}

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

.cl-footer__contact-link svg {
	width: 13px;
	height: 13px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}

/* WP nav menu: ul > li > a en columnas del footer */
.cl-footer__col-links li {
	list-style: none;
}

.cl-footer__col-links li a {
	font-size: 0.875rem;
	color: var(--on-dark-soft);
	transition: color var(--ease);
	display: block;
	padding: 0.1rem 0;
}

.cl-footer__col-links li a:hover {
	color: var(--text-white);
}

/* Barra de dirección */
.cl-footer__info-address {
	font-size: 0.8125rem;
	color: var(--on-dark-soft);
	letter-spacing: 0.03em;
	text-align: center;
}

/* 16d. Nav: íconos con etiqueta de texto
   ============================================================ */
.cl-nav__icon--label {
	width: auto;
	min-width: 36px;
	height: auto;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.25rem 0.375rem;
}

/* La etiqueta de texto del ícono ("Carrito") va SÓLO en desktop, y hasta acá
   estaba exactamente al revés: se mostraba en mobile y se escondía en desktop.

   En mobile molestaba dos veces: es donde menos espacio hay, y la palabra le
   suma peso al lado derecho del header —hamburguesa sola a la izquierda contra
   dos íconos MÁS una palabra a la derecha—, con lo cual el logo, que se centra
   por reparto de espacio, quedaba corrido a la izquierda.

   En desktop, en cambio, sobra lugar y la etiqueta sirve: el carrito es el
   único camino al checkout, y un ícono sin rótulo es justo lo que le cuesta
   encontrar a un cliente mayor. */
.cl-header__right-icons .cl-nav__icon-label {
	display: none;
}

.cl-nav__icon-label {
	font-family: var(--font-sans);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps-sm);
	text-transform: uppercase;
	color: inherit;
	white-space: nowrap;
	line-height: 1;
}

/* 17. Barras de progreso (envío gratis)
   ============================================================ */
.cl-ship-bar {
	margin-bottom: 1rem;
}

.cl-ship-bar__msg {
	font-size: 0.75rem;
	text-align: center;
	color: var(--text-muted);
	margin-bottom: 0.5rem;
}

.cl-ship-bar__msg--free {
	color: var(--color-sage);
	font-weight: 700;
}

.cl-ship-bar__track {
	height: 3px;
	background-color: var(--border);
	border-radius: var(--radius-pill);
	overflow: hidden;
}

.cl-ship-bar__fill {
	height: 100%;
	background-color: var(--color-blush);
	border-radius: var(--radius-pill);
	transition: width 600ms var(--ease-out-warm);
}

/* 17. Blog — archive y post cards
   ============================================================ */
.cl-archive__header {
	padding-bottom: 1.75rem;
	border-bottom: 1px solid var(--border);
	margin-bottom: 2.5rem;
}

.cl-archive__header h1 {
	font-family: var(--font-serif);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 400;
	color: var(--color-primary);
	letter-spacing: 0.04em;
}

.cl-posts-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	padding-bottom: 3.5rem;
}

.cl-post-card {
	background: var(--bg-white);
	border: 1px solid var(--border);
	overflow: hidden;
	transition: box-shadow 300ms var(--ease-out-warm);
}

.cl-post-card:hover {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.cl-post-card__thumb {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--bg-mid);
}

.cl-post-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 500ms var(--ease-out-warm);
}

.cl-post-card:hover .cl-post-card__thumb img {
	transform: scale(1.04);
}

.cl-post-card__body {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.cl-post-card__title {
	font-family: var(--font-serif);
	font-size: 1.3125rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--color-primary);
	letter-spacing: 0.01em;
}

.cl-post-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--ease);
}

.cl-post-card__title a:hover {
	color: var(--color-blush-dk);
}

.cl-post-card__excerpt {
	font-size: 0.9375rem;
	color: var(--text-muted);
	line-height: 1.65;
	flex-grow: 1;
}

/* ── Paginación blog ───────────────────────────────────────── */
.nav-links {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	justify-content: center;
	padding: 0 0 3.5rem;
	flex-wrap: wrap;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.5rem;
	border: 1.5px solid var(--border);
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--color-primary);
	text-decoration: none;
	transition: border-color var(--ease), background var(--ease), color var(--ease);
}

/* Página actual: negro (indicador fuerte de "estás acá"). */
.page-numbers.current {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: #fff;
}

/* Hover: blush de marca. Acotado a a.page-numbers (los enlaces) a propósito:
   con paginate_links type=list, el <ul> también lleva la clase .page-numbers, y
   un `.page-numbers:hover` a secas lo pintaba entero al pasar el mouse por cualquier
   celda (bug del fondo que se veía a través de las celdas transparentes). */
a.page-numbers:hover {
	border-color: var(--color-blush);
	background: var(--color-blush);
	color: var(--color-primary);
}

.page-numbers.dots {
	border: none;
	background: none;
}

/* 18. Responsive (mobile-first — base = mobile, enhance up)
   ============================================================ */

/* 769px+ — footer layouts go multi-column */
@media (min-width: 769px) {
	/* Blog 2-column grid */
	.cl-posts-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cl-footer__nl-inner {
		grid-template-columns: 1fr auto;
	}
	.cl-footer__nl-form {
		flex-direction: row;
		gap: 0;
	}
	.cl-footer__nl-input {
		flex: 1;
		min-width: 0;
		border-right: none;
	}

	/* desktop: el inner mantiene single column stacked. Solo el form pasa a row
	 * (input + button uno al lado del otro). */
	.cl-footer-nl__inner {
		gap: 1.75rem;
	}
	.cl-footer-nl__form {
		flex-direction: row;
		gap: 0;
	}
	.cl-footer-nl__input {
		flex: 1;
		min-width: 0;
		background-color: rgba(255, 255, 255, 0.1);
		border: 1.5px solid rgba(235, 204, 194, 0.45);
		border-right: none;
		border-radius: 0;
		color: var(--text-white);
	}
	.cl-footer-nl__input::placeholder {
		color: var(--on-dark-faint);
	}
	.cl-footer-nl__btn {
		width: auto;
		background-color: var(--color-blush);
		color: var(--color-primary);
		border-color: transparent;
	border-radius: 0;
	}

	.cl-footer__body-inner {
		grid-template-columns: 1.6fr 1fr 1fr;
		gap: 3.5rem;
	}
	.cl-footer__trust-inner {
		justify-content: space-around;
		gap: 1.5rem;
	}
	.cl-footer__bottom-inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		text-align: left;
		gap: 1.5rem;
	}
	.cl-footer__bottom-inner .cl-lang { justify-self: center; }
	.cl-footer__bottom-inner > nav { justify-self: end; }
	.cl-footer__compliance {
		justify-content: flex-end;
		gap: 1rem 2rem;
	}
}

/* 1025px+ — desktop header: nav visible, hamburger oculto, cuenta restaurada */
@media (min-width: 1025px) {
	.cl-mobile-toggle { display: none; }
	.cl-nav--left,
	.cl-nav--right {
		display: flex;
	}
	.cl-header__right { gap: 0.25rem; }

	/* Restaurar Mi Cuenta en desktop — oculta en mobile */
	.cl-header__right-icons > a.cl-nav__icon--label {
		display: flex;
	}


}

/* La etiqueta del ícono aparece recién en 1320px, no en 1025.
   El rango 1025–1319 es justo donde el nav ya venía apretado —tiene su propia
   regla más arriba, que le recorta el padding y el interletrado a los links—, y
   los dos rótulos suman más de 100px del lado derecho. Mostrarlos ahí desharía
   ese arreglo. De 1320 para arriba sobra lugar.

   Se sacó además el bloque que forzaba flex-direction: row y 36x36 fijos sobre
   .cl-nav__icon--label: era lo que no dejaba entrar el texto. Sin él el ícono
   vuelve a su forma base —columna, alto automático, ícono arriba y rótulo
   abajo—, que es la que ya se venía usando en mobile y funciona. */
@media (min-width: 1320px) {
	.cl-header__right-icons .cl-nav__icon-label {
		display: block;
	}
}

/* 19. Utilidades
   ============================================================ */

/* Honeypot anti-spam (formulario de newsletter, footer).
   Va en main.css y NO en pages.css a propósito: el footer se renderiza en todas
   las páginas, pero pages.css no se encola en blog/search (ver inc/enqueue.php).
   Si el estilo viviera allí, el campo trampa sería visible en esas páginas.
   Se oculta fuera de viewport en vez de con display:none / visibility:hidden,
   porque muchos bots ignoran los campos ocultos de esa forma y no los completan. */
.cl-hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Variante visually-hidden-focusable: el skip link y otros elementos
   marcados con .sr-only se vuelven visibles al recibir foco. */
.sr-only:focus,
.sr-only:focus-visible {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 9999;
	width: auto;
	height: auto;
	padding: .75rem 1rem;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	background: var(--color-primary);
	/* Decía var(--color-cream, #faf7f4), pero --color-cream sólo existe en
	   editor.css, con scope .editor-styles-wrapper: en el front el token no
	   existe y el que pintaba era el fallback. Se apunta a --bg-light (#faf8f5),
	   que es el mismo crema y sí está en :root. */
	color: var(--bg-light);
	border: 1px solid var(--color-blush);
	font-weight: 700;
	text-decoration: none;
}

/* ── Búsqueda del header ── */

/* Ocultar toggle cuando el form está abierto */
.cl-nav__search-toggle.cl-search--open { display: none; }

/* Mobile: barra full-width que cae bajo el header con animación */
.cl-nav__search {
	display: flex;
	align-items: center;
	position: fixed;
	top: calc(var(--topbar-h) + var(--header-h));
	left: 0;
	right: 0;
	width: 100%;
	padding: 0.875rem var(--container-pad);
	background: #1e1b18;
	border-bottom: 1px solid rgba(235, 204, 194, 0.2);
	border-radius: 0;
	overflow: visible;
	gap: 0.625rem;
	z-index: 850;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	transition: opacity 220ms var(--ease-out-warm), transform 220ms var(--ease-out-warm);
}

/* Estado oculto: anima opacity+translateY en lugar de display:none brusco.
   Selector # supera en especificidad a la regla de clase. */
#cl-nav-search[hidden] {
	display: flex !important;
	opacity: 0;
	transform: translateY(-8px);
	pointer-events: none;
	visibility: hidden;
}

.cl-nav__search input[type="search"] {
	flex: 1;
	width: auto;
	padding: 0.625rem 1rem;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 0;
	color: var(--text-white);
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	outline: none;
	transition: background-color 0.2s, border-color 0.2s;
}

.cl-nav__search input[type="search"]::placeholder {
	color: rgba(255, 255, 255, 0.38);
}

.cl-nav__search input[type="search"]:focus {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--color-blush);
	outline: none;
}

/* Botón lupa mobile */
.cl-nav__search button[type="submit"] {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	color: rgba(255, 255, 255, 0.5);
	background: transparent;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color var(--ease);
}

.cl-nav__search button[type="submit"]:hover {
	color: var(--color-blush);
}

.cl-nav__search button[type="submit"] svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Desktop: inline en el header — input con borde visible */
@media (min-width: 1025px) {
	.cl-nav__search {
		/* relative, no static: el panel de sugerencias cuelga de acá.
		   En mobile NO hace falta —la barra ya es fixed, o sea que ya es
		   contenedor— y ponerlo global le pisaba el fixed y descolocaba la
		   barra entera. No sacar el media query. */
		position: relative;
		top: auto; left: auto; right: auto;
		width: auto;
		padding: 0;
		background: transparent;
		border: none;
		border-bottom: none;
		border-radius: 0;
		gap: 0;
		z-index: auto;
		opacity: 1;
		transform: none;
		pointer-events: auto;
		transition: none;
	}
	/* Restaurar display:none normal en desktop */
	#cl-nav-search[hidden] {
		display: none !important;
		opacity: 1;
		transform: none;
		pointer-events: auto;
		visibility: visible;
	}
	.cl-nav__search input[type="search"] {
		flex: none;
		width: 160px;
		padding: 0.375rem 0.75rem;
		background: rgba(255, 255, 255, 0.07);
		border: 1px solid rgba(255, 255, 255, 0.18);
		border-radius: 0;
		font-size: 0.8125rem;
		letter-spacing: 0.01em;
		transition: width 250ms var(--ease-out-warm), border-color 200ms var(--ease-out-warm), background-color 200ms var(--ease-out-warm);
	}
	.cl-nav__search input[type="search"]:focus {
		width: 220px;
		background: rgba(255, 255, 255, 0.11);
		border-color: var(--color-blush);
	}
	.cl-nav__search button[type="submit"] {
		width: 36px;
		height: 36px;
		color: rgba(255, 255, 255, 0.45);
	}
	.cl-nav__search button[type="submit"]:hover {
		color: var(--color-blush);
	}
}

@media (min-width: 1440px) {
	:root {
		--header-h:      90px;
		--topbar-h:      44px;
		--container-pad: 3rem;
	}
	.cl-mega__inner {
		grid-template-columns: 220px 1fr 280px;
	}
}

@media (min-width: 1600px) {
	:root { --container-max: 1560px; }
}

@media (min-width: 1920px) {
	:root {
		--container-max: 1760px;
		--container-pad: 4rem;
	}
}

@media (min-width: 2560px) {
	:root {
		--container-max: 2400px;
		--container-pad: 4.5rem;
	}
	h1 { font-size: 5.5rem; }
	h2 { font-size: 3.75rem; }
	h3 { font-size: 2.75rem; }
	/* Sólo las secciones de contenido reciben aire extra en pantallas grandes.
	   Las de utilidad conservan su clamp().

	   ⚠️ NO agregar acá secciones a sangre completa. .cl-split-banners estaba
	   en esta lista y no le daba aire: le pintaba dos franjas blancas de 128px
	   arriba y abajo de las fotos, visibles sólo de 2560px para arriba (en un
	   monitor FHD no aparecen, por eso sobrevivió). Reportado por Pato el
	   2026-08-07.

	   Se sacaron también .cl-brand-story, .cl-categories, .cl-sergio,
	   .cl-features y .cl-ticker: esas clases ya no existen en ningún template
	   —hoy son .cl-home-story, .cl-home-features y .cl-home-ticker— así que la
	   regla apuntaba al vacío. No se renombraron a propósito: el ticker es una
	   franja dorada de alto fijo y el padding lo desfiguraría igual que a los
	   banners. Si alguna necesita el aire, agregar la clase real de a una y
	   mirarla a 2560px. */
	.cl-featured,
	.cl-quote-strip { padding-block: 8rem; }
}

@media (min-width: 3840px) {
	:root {
		--container-max: 3200px;
		--container-pad: 5rem;
		--header-h:      88px;
		--topbar-h:      48px;
	}
	h1 { font-size: 7rem; }
	h2 { font-size: 4.75rem; }
	h3 { font-size: 3.5rem; }
	/* Misma advertencia que en el bloque de 2560px: nada a sangre completa. */
	.cl-featured,
	.cl-quote-strip { padding-block: 10rem; }
}

.u-text-serif  { font-family: var(--font-serif); }
.u-text-muted  { color: var(--text-muted); }
.u-text-blush  { color: var(--color-blush); }
.u-text-gold   { color: var(--color-gold); }
.u-italic      { font-style: italic; }
.u-uppercase   { text-transform: uppercase; letter-spacing: var(--ls-caps-md); }
.u-mb-0        { margin-bottom: 0; }
.u-mt-auto     { margin-top: auto; }

/* ── Header modo catálogo ──────────────────────────────────────────────
   MOBILE FIRST. En mobile el header es sólo burger + logo: los links viven en
   el panel lateral (nav-mobile.php, el mismo de la tienda). Antes tenían que
   entrar todos en el ancho de la pantalla —el nav mide 471px en un viewport de
   390px— y por eso desbordaba 254px, con el logo fuera de pantalla.

   El grid es EL MISMO en los dos tamaños (1fr auto 1fr); lo único que cambia
   es qué hijos se muestran: mobile = burger + logo, desktop = nav + logo +
   switcher. Por eso no hace falta reordenar nada ni apilar filas.

   Escrito como min-width y no max-width para que no quede ningún ancho sin
   cubrir: la base gobierna todo lo que esté por debajo del breakpoint. Con
   max-width:767 quedaba 768px —el iPad vertical— sin caer en ninguna rama. */
.cl-header--catalog {
	background: var(--color-primary);
	border-bottom: 1px solid rgba(255,255,255,.08);
	z-index: 200;
	/* En mobile el header NO es sticky: con el banner fijo de catálogo (118px)
	   debajo, un header fijo de 90px se comía el 25% del viewport. */
	position: static;
	/* height:auto anula el alto fijo de --header-h que trae .cl-header (:683).
	   El header normal mete la topbar AFUERA del <header> (header.php:56), pero
	   el de catálogo la mete adentro (header-catalog.php:27), así que necesita
	   34px + 89px = 123px y no los 90px del token: el logo y el nav se salían
	   del fondo oscuro y quedaban pisando el hero. */
	height: auto;
}

.cl-cat-topbar {
	background: var(--color-primary);
	text-align: center;
	padding: 0.5rem 1rem;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	color: rgba(255,255,255,.55);
	text-transform: uppercase;
}

.cl-header__inner--catalog {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	/* height:auto libera el height:100% de .cl-header__inner (:689), que se
	   apoyaba en el alto fijo del header. */
	height: auto;
	padding-block: 0.875rem;
}

.cl-logo--light { color: #fff; }
.cl-logo--light span { color: rgba(255,255,255,.55); }

/* Mobile: ni el nav inline ni el switcher se muestran. Los links del nav están
   en el panel lateral y el switcher, en el footer (que lo muestra en todos los
   tamaños; en el header ya estaba oculto abajo de 769px por :1873).
   .cl-cat-nav--right también lleva la clase .cl-cat-nav, así que hereda este
   display:none y vuelve con el resto en desktop. */
.cl-cat-nav { display: none; align-items: center; }
.cl-cat-nav--right { justify-content: flex-end; }

.cl-cat-nav__list {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.cl-cat-nav__list a {
	display: block;
	padding: 0.4rem 0.75rem;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255,255,255,.7);
	text-decoration: none;
	transition: color 0.2s;
}
.cl-cat-nav__list a:hover,
.cl-cat-nav__list .current-menu-item > a { color: #fff; }

/* Desktop: aparecen el nav y el switcher, se va el burger, y el header pasa a
   sticky. El .cl-mobile-toggle genérico se oculta recién en 1025px (:2373)
   porque el header de la tienda necesita ese breakpoint; el de catálogo tiene
   5 ítems y entra cómodo en 769, así que se oculta acá por su modificador. */
@media (min-width: 769px) {
	.cl-header--catalog {
		position: sticky;
		top: 0;
	}

	.cl-mobile-toggle--catalog { display: none; }

	.cl-cat-nav { display: flex; }
}

/* Ocultar indicadores de venta en home (modo catálogo) */
.cl-catalog-mode .cl-home-ticker,
.cl-catalog-mode .cl-gc-cta { display: none !important; }

/* Footer catálogo — 2 columnas en lugar de 3 */
.cl-footer__body--catalog .cl-footer__body-inner {
	grid-template-columns: 1fr 1fr;
}
@media (max-width: 640px) {
	.cl-footer__body--catalog .cl-footer__body-inner {
		grid-template-columns: 1fr;
	}
}

/* ── Sugerencias del buscador ──────────────────────────────────────────────
   Panel que cuelga del campo del header. Se arma en JS (assets/js/search.js)
   contra un índice que se baja una sola vez.

   Sin radios y con Playfair en el nombre, para que no parezca un widget
   pegado encima del header — que es justo lo que pasa cuando el buscador lo
   pone un plugin con su CSS de fábrica. */
.cl-search-sug {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 60;
	width: min(360px, calc(100vw - 2rem));
	max-height: min(70vh, 460px);
	overflow-y: auto;
	background: var(--bg-white);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card);
}

.cl-search-sug__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 0.875rem;
	border-bottom: 1px solid var(--border);
	text-decoration: none;
	color: var(--text-primary);
	transition: background var(--ease);
}

.cl-search-sug__item:last-of-type {
	border-bottom: none;
}

/* is-active es la fila elegida con las flechas del teclado: tiene que verse
   igual que el hover o la navegación sin mouse queda a ciegas. */
.cl-search-sug__item:hover,
.cl-search-sug__item.is-active {
	background: var(--bg-light);
}

/* El borde no es adorno: las fotos de producto están tomadas sobre fondo claro
   y a 44px sobre el panel blanco se funden hasta parecer que no cargaron. */
.cl-search-sug__img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--bg-light);
	border: 1px solid var(--border);
}

.cl-search-sug__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;   /* sin esto un nombre largo desborda el flex */
}

.cl-search-sug__name {
	font-family: var(--font-serif);
	font-size: 0.9375rem;
	line-height: 1.3;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cl-search-sug__price {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--text-muted);
}

.cl-search-sug__empty {
	margin: 0;
	padding: 1rem 0.875rem;
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	color: var(--text-muted);
}

/* sticky: con 8 resultados la lista scrollea y esta fila quedaba abajo de
   todo, fuera de la vista. Pegada al piso del panel siempre está a mano. */
.cl-search-sug__all {
	position: sticky;
	bottom: 0;
	display: block;
	width: 100%;
	padding: 0.75rem 0.875rem;
	border-top: 1px solid var(--border);
	background: var(--bg-light);
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--ls-caps-sm);
	text-transform: uppercase;
	color: var(--text-primary);
	text-decoration: none;
	text-align: left;
	transition: background var(--ease);
}

.cl-search-sug__all:hover,
.cl-search-sug__all:focus-visible {
	background: var(--bg-mid);
}

/* Hasta 1024 la barra del buscador es fija y ocupa todo el ancho, así que el
   panel se alinea a ella con el mismo margen lateral que el resto del sitio.
   El corte va con el del header (1025), no en 600: entre medio la barra
   también es full-width y el panel quedaba corrido. */
@media (max-width: 1024px) {
	.cl-search-sug {
		left: var(--container-pad);
		right: var(--container-pad);
		width: auto;
	}
}


/* ── Zoom de iOS en formularios ──────────────────────────────────────────
   Safari agranda la página al enfocar un campo cuyo texto mida menos de 16px.
   No se puede desactivar desde el <meta viewport> sin romper también el
   pinch-zoom del usuario, que es un requisito de accesibilidad: la única salida
   real es que ningún campo baje de 16px en pantallas táctiles.

   Va con !important y acotado a (pointer: coarse) a propósito. Hay 16 reglas
   repartidas entre main.css, pages.css y woocommerce.css que fijan tamaños de
   13 a 15px —varias con selectores más específicos que cualquiera razonable
   acá, y dos ya con !important propio—, así que sin !important esto no gana. Y
   en desktop esos tamaños son decisiones de diseño que no se tocan: la regla
   sólo pisa donde el zoom existe.

   Se excluyen botones, checkboxes y radios: no reciben texto tipeado, así que
   no disparan el zoom y agrandarlos sí cambiaría el layout. */
@media (pointer: coarse) {
	input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
	textarea,
	select {
		font-size: 16px !important;
	}
}