/* Dokan — ficha de producto. Móvil primero, sin framework ni preprocesador.

   ── CUATRO HERRAMIENTAS VISUALES, Y SOLO UNA ES LA TARJETA ──────────────────────
     1. Secciones completas con cambio de fondo   ← la más fuerte, y no cuesta un byte
     2. Composición editorial en columnas
     3. Filetes y aire
     4. Tarjetas, SOLO donde hay que elegir

   La página alterna ritmos —blanco, crema, banda, verde, blanco, crema— para que no se
   lea como una colección de tarjetas. */

@font-face {
	font-family: "EB Garamond";
	src: url("../assets/fuentes/ebgaramond-600.woff2") format("woff2");
	font-weight: 600; font-style: normal; font-display: swap;
}

/* ── Paleta de Dokan ───────────────────────────────────────────────────────────
   Los cuatro colores salen del producto, de la etiqueta y de la tienda.
   El reparto es intencional y hay que respetarlo, porque es lo que separa «premium»
   de «árbol de Navidad»:  ~60% neutros · ~22% crema · ~13% verde · ~5% dorado.

   El VERDE es el diferenciador: es lo que hace que la página diga Dokan y no «landing
   bonita de cualquier marca premium». El DORADO es solo acento —líneas, iconos,
   números, estrellas, estados elegidos—, nunca fondo dominante ni texto largo. Y el
   verde tiene que existir para que el dorado tenga sentido: sin momentos oscuros, el
   oro se lee como beige. */
:root {
	--negro: #040300;
	--verde: #1f3a32;
	--crema: #eee2d5;
	--crema-suave: #f7f0e8;
	--oro: #d9ab5f;

	--tinta: var(--negro);
	--tinta-suave: #5f5a54;
	--tinta-tenue: #938c83;
	--papel: #fdfcfa;
	--linea: #e4ddd3;
	--marca: var(--negro);
	--acento: #9a7434;

	--sobre-verde: #f2ece3;
	--sobre-verde-tenue: rgba(242, 236, 227, .62);

	--ancho: 34rem;
	--serif: "EB Garamond", ui-serif, Georgia, "Times New Roman", serif;
}

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

/* El desplazamiento a un ancla va animado y no de un salto: de las estrellas del hero a
   las opiniones, y de las promesas a la tienda. El salto seco hace perder la referencia
   —uno no sabe si cambió de página— y la animación enseña el camino.

   Es CSS nativo, sin una línea de JavaScript. Y se apaga para quien pidió reducir
   movimiento en su sistema: el desplazamiento animado es de lo que peor le cae a quien
   tiene sensibilidad vestibular. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* Dokan tiene CSS personalizado en el Customizer con `body { padding-top: 120px }`
   para compensar su header fijo. Se imprime como <style> en el head, así que el filtro
   de inc/assets.php no lo alcanza. Se neutraliza solo esa regla. */
body.dokan { padding-top: 0 !important; }

body {
	margin: 0; background: var(--papel); color: var(--tinta);
	font: 400 1rem/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Restos del tema y los plugins ────────────────────────────────────────────
   Marcado que se imprime en el pie pase lo que pase y que, al haberle filtrado su
   CSS, saldría suelto y sin estilo al final de la página. Es más barato esconderlo
   que perseguir quién lo registra en un sitio con treinta plugins.

   Se esconde por id y clase concretos, NUNCA con una regla amplia: una lista corta y
   explícita se puede auditar; un `[class*=...]` se llevaría algo nuestro algún día. */
#photoswipe-fullscreen-dialog,
.pswp,
.ast-scroll-top,
#ast-scroll-top,
.hfe-scroll-to-top-wrap,
.ehf-scroll-to-top-wrap,
.hfe-reading-progress-bar,
.ast-sticky-add-to-cart,
#pys_ajax_events { display: none !important; }

/* ═══ Franja de valor ══════════════════════════════════════════════════════════
   Delgada y continua, no cuatro cajitas. En celular NO es fija: abajo ya hay una
   barra de compra pegada, y dos elementos fijos en un teléfono se comen la página. */

.franja { background: var(--verde); color: var(--sobre-verde); }
.franja__lista {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	gap: .5rem 1.6rem; margin: 0 auto; padding: .62rem 1rem; max-width: 68rem;
	list-style: none; font-size: .72rem; letter-spacing: .04em;
}
.franja__lista li { position: relative; }
.franja__lista li + li::before { content: "·"; position: absolute; left: -.9rem; color: var(--oro); }
.franja__solo-escritorio { display: none; }

/* ═══ Header ═══════════════════════════════════════════════════════════════════
   La barra NO lleva `backdrop-filter`: cualquier filtro la convierte en bloque
   contenedor de sus hijos `fixed`, y el cajón del menú —que vive dentro para compartir
   fila en escritorio— dejaría de cubrir la pantalla en celular. */

.menu-check, .carro-check { position: absolute; opacity: 0; pointer-events: none; }

.barra {
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
	gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--linea);
	position: sticky; top: 0; z-index: 30; background: var(--papel);
}
.barra__hamb { display: grid; gap: 4px; width: 22px; cursor: pointer; justify-self: start; padding: 4px 0; }
.barra__hamb span { height: 1.5px; background: var(--tinta); border-radius: 2px; }
.barra__logo { grid-column: 2; justify-self: center; line-height: 0; }
.barra__logo img { width: 80px; height: auto; }
.barra__acciones { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: .85rem; }
.barra__red { color: var(--tinta); line-height: 0; display: none; }
.barra__red:hover { color: var(--acento); }
.barra__carrito { display: flex; align-items: center; gap: .35rem; text-decoration: none; color: var(--tinta); font-size: .82rem; position: relative; }
.barra__total .woocommerce-Price-amount { white-space: nowrap; }
.barra__cuenta {
	position: absolute; top: -.35rem; right: -.5rem; min-width: 1.15rem; padding: .05rem .25rem;
	border-radius: 1em; background: var(--verde); color: var(--sobre-verde);
	font-size: .68rem; text-align: center; line-height: 1.5;
}

.panel {
	position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(82vw, 20rem); padding: 1.2rem;
	background: var(--papel); border-right: 1px solid var(--linea);
	transform: translateX(-102%); transition: transform .25s ease;
	display: flex; flex-direction: column; gap: 1.2rem; overflow-y: auto;
}
.menu-check:checked ~ .barra .panel { transform: none; }
.panel__cerrar { align-self: flex-end; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--tinta-suave); padding: 0 .2rem; }
.panel__lista { margin: 0; padding: 0; list-style: none; }
.panel__lista a { display: block; padding: .95rem 0; border-bottom: 1px solid var(--linea); text-decoration: none; color: var(--tinta); font-size: 1rem; letter-spacing: .02em; }
.panel__buscar { display: flex; gap: .4rem; }
.panel__buscar input[type="search"] { flex: 1; min-width: 0; padding: .55rem .7rem; border: 1px solid var(--linea); border-radius: .4rem; font: inherit; font-size: 1rem; background: #fff; } /* 16 px: con menos, el iPhone hace zoom al tocarlo y la página queda más ancha que la pantalla */
.panel__buscar button { padding: .55rem .8rem; border: 0; border-radius: .4rem; background: var(--verde); color: var(--sobre-verde); font: inherit; font-size: .85rem; cursor: pointer; }
.panel__cuenta { color: var(--tinta-suave); font-size: .88rem; text-decoration: none; }
.panel__velo, .carro__velo { position: fixed; inset: 0; background: rgba(4, 3, 0, .4); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.panel__velo { z-index: 35; }
.carro__velo { z-index: 45; }
.menu-check:checked ~ .barra .panel__velo, .carro-check:checked ~ .carro__velo { opacity: 1; pointer-events: auto; }

/* ═══ Galería ══════════════════════════════════════════════════════════════════ */

.galeria__tira {
	display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; margin: 0; overscroll-behavior-x: contain;
}
.galeria__tira::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .galeria__tira { scroll-behavior: auto; } }
.galeria__slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; }
/* Cuadrada: es el recorte nativo de las fotos del catálogo (1254×1254). */
.galeria__img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.galeria__minis { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: .5rem 1.15rem 0; }
.galeria__minis::-webkit-scrollbar { display: none; }
.galeria__minis a { flex: 0 0 3.4rem; line-height: 0; border: 1px solid var(--linea); border-radius: .25rem; overflow: hidden; transition: border-color .15s ease; }
.galeria__minis a:hover { border-color: var(--oro); }
.galeria__minis img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* ── La galería con cartas (DOKAN_GALERIA_NUEVA) ─────────────────────────────────
   En celular la galería es la primera pantalla: lo que no se lea aquí no se lee. Las
   cartas miden lo mismo que una foto —cuadradas— para que deslizar no salte. */

/* Sobre la primera foto: qué es y a qué se parece. El degradado sube desde abajo lo
   justo para que se lea el texto sin apagar el frasco. */
.galeria__slide { position: relative; }
.galeria__portada {
	position: absolute; inset: auto 0 0; padding: 4.5rem 1.15rem 1.2rem; pointer-events: none;
	display: flex; flex-direction: column; gap: .3rem; color: #f7f0e8;
	background: linear-gradient(to top, rgba(10, 7, 4, .86) 0%, rgba(10, 7, 4, .6) 55%, transparent);
}
.galeria__portada-eyebrow { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .17em; color: var(--oro); }
.galeria__portada-titulo { font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 7.4vw, 2.3rem); line-height: 1.08; }
.galeria__portada-texto { font-size: .9rem; line-height: 1.45; max-width: 24rem; opacity: .9; }

.carta {
	aspect-ratio: 1; display: flex; align-items: center; overflow: hidden; isolation: isolate;
	padding: 1.1rem 1.25rem;
}
.carta__in { position: relative; width: 100%; }

/* Las razones: crema, tipografía grande, filetes. Ni iconos ni cajas: se lee en dos
   segundos o no sirve. */
.carta--razones { background: var(--crema-suave); }
.carta__que { margin: 0 0 .7rem; font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 6.2vw, 1.85rem); line-height: 1.08; color: var(--tinta); }
.carta__razones { margin: 0; padding: 0; list-style: none; counter-reset: razon; }
.carta__razones li {
	display: grid; grid-template-columns: 1.8rem 1fr; column-gap: .5rem;
	padding: .55rem 0; border-top: 1px solid var(--linea); counter-increment: razon;
}
.carta__razones li:last-child { border-bottom: 1px solid var(--linea); }
.carta__razones li::before {
	content: "0" counter(razon); grid-row: span 2; padding-top: .3rem;
	font-size: .72rem; font-weight: 600; letter-spacing: .08em; color: var(--acento);
}
.carta__razones strong { font-family: var(--serif); font-weight: 500; font-size: clamp(1.12rem, 4.9vw, 1.5rem); line-height: 1.15; }
.carta__razones span { font-size: .82rem; line-height: 1.35; color: var(--tinta-suave); }

/* «Siente…»: el universo de color de la fragancia, con su firma quieta de fondo. */
.carta--siente {
	--s-fondo: #14100c; --s-luz: #5a4026; --s-trazo: var(--oro); --s-trazo2: #b07a4a; --s-texto: #f3e9dc;
	justify-content: center; text-align: center; color: var(--s-texto);
	background:
		radial-gradient(70% 80% at 50% 100%, color-mix(in srgb, var(--s-luz) 70%, transparent), transparent 70%),
		var(--s-fondo);
}
.carta--siente .eyebrow { color: var(--s-trazo); }
.carta__forma { z-index: -1; opacity: .75; }
.carta__forma path { stroke-dashoffset: 0 !important; }
.carta__forma ellipse { opacity: .3; }
.carta__titulo { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 9.5vw, 3.2rem); line-height: 1.05; }
.carta__boton { margin-top: 1.5rem; }

/* Las miniaturas de las cartas: una palabra sobre su color, del tamaño de las demás. */
.mini-carta {
	display: flex; align-items: center; justify-content: center; aspect-ratio: 1;
	font-size: .52rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; text-decoration: none;
}
.mini-carta--razones { background: var(--crema-suave); color: var(--acento); }
.mini-carta--siente { background: var(--s-fondo, #14100c); color: var(--s-trazo, var(--oro)); }

/* ═══ Hero ═════════════════════════════════════════════════════════════════════ */

.ficha { margin: 0; }
/* `color: var(--tinta)` explícito, para que el hero re-derive su tinta del token. */
.hero { max-width: var(--ancho); margin: 0 auto; color: var(--tinta); }
.hero__datos { padding: 1.4rem 1.15rem 0; }

.titulo { margin: 0 0 .75rem; }
/* El eyebrow dice QUÉ ES («Home Spray · 250 ml»), así que tiene que leerse al primer
   vistazo: más grande y en tinta, no en dorado. Sigue por debajo del nombre. (2026-10-20) */
.titulo__eyebrow { display: block; margin-bottom: .5rem; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--tinta); }
.titulo__nombre { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(2.1rem, 8vw, 2.9rem); line-height: 1.04; }

.linea { margin: 0 0 1.4rem; color: var(--tinta-suave); font-size: 1rem; max-width: 30ch; }
.linea__uso { display: block; margin-top: .35rem; font-size: .82rem; color: var(--tinta-tenue); }

.precio { font-size: 1.35rem; font-weight: 600; margin: 0 0 1.5rem; }
.precio del { color: var(--tinta-tenue); font-weight: 400; font-size: .72em; margin-right: .4em; }
.precio ins { text-decoration: none; }
.precio::after { content: " MXN"; font-size: .6em; font-weight: 400; color: var(--tinta-tenue); letter-spacing: .06em; }

/* ── El descuento: una barra que se desvanece ────────────────────────────────
   El mismo lenguaje de la promoción de la portada: filete dorado a la izquierda y un velo
   dorado que se apaga hacia la derecha, sobre vidrio leve. Va PEGADA bajo el precio y
   junta porcentaje y ahorro: como etiqueta suelta junto a la cifra, se leía despegada. */
.precio-bloque { margin: 0 0 1.5rem; }
.precio-bloque .precio { margin: 0; }
.precio-bloque--oferta .precio ins { font-size: 1.12em; }
.precio__oferta {
	display: inline-flex; align-items: center; gap: .75rem; margin: .5rem 0 0;
	padding: .42rem 3rem .42rem .8rem; border-radius: 2px; border-left: 2px solid var(--oro);
	background: linear-gradient(90deg, rgba(217, 171, 95, .3) 0%, rgba(217, 171, 95, .12) 55%, rgba(217, 171, 95, 0) 100%);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	-webkit-mask-image: linear-gradient(90deg, #000 82%, transparent 100%); mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
}
.precio__pct {
	font-family: var(--serif); font-size: 1.15rem; font-weight: 600; line-height: 1;
	background: linear-gradient(100deg, #9a7434 0%, #c99a4e 35%, #f2dcae 50%, #c99a4e 65%, #9a7434 100%);
	background-size: 250% 100%; background-position: 100% 0;
	-webkit-background-clip: text; background-clip: text; color: transparent;
	animation: promo-brillo 2.2s cubic-bezier(.3, .6, .3, 1) .7s both;
}
.precio__ahorro {
	font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--acento);
	padding-left: .75rem; border-left: 1px solid rgba(154, 116, 52, .35);
}
.precio__ahorro .woocommerce-Price-amount { color: inherit; }
@media (prefers-reduced-motion: reduce) { .precio__pct { animation: none; background-position: 50% 0; } }

.promesas { margin: 0 0 1.7rem; padding: 0; list-style: none; display: grid; gap: .85rem; }
.promesa { display: flex; gap: .7rem; align-items: flex-start; }
.promesa__icono { width: 1.15rem; height: 1.15rem; color: var(--oro); flex: 0 0 auto; margin-top: .12rem; }
.promesa__txt { display: grid; line-height: 1.35; }
.promesa__txt strong { font-size: .92rem; font-weight: 600; }
.promesa__txt span { font-size: .82rem; color: var(--tinta-suave); }
/* «Llega entre…», chiquito bajo el plazo, como Amazon (parts/envio.php). */
.promesa__fecha { margin-top: .1rem; font-size: .76rem; color: var(--acento); }
/* Los enlaces dentro de las promesas salían con el azul por defecto del navegador. */
.promesa__txt a { color: var(--acento); text-decoration-color: rgba(154, 116, 52, .45); text-underline-offset: 2px; }
.promesa__txt a:hover { text-decoration-color: currentColor; }

/* ═══ Cantidades — las únicas tarjetas del hero, porque son lo único elegible ═══
   La cantidad manda y el total va secundario: si los tres totales gritan igual que
   el precio de arriba, la primera pantalla se vuelve cuatro números compitiendo. */

.cantidades { border: 0; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(3, 1fr); }
.cantidades__titulo { padding: 0; margin: 0 0 .7rem; grid-column: 1 / -1; font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--acento); }
.cantidad { display: block; cursor: pointer; }
.cantidad input { position: absolute; opacity: 0; width: 0; height: 0; }
.cantidad__caja {
	display: grid; gap: .22rem; justify-items: center; position: relative;
	padding: 1.05rem .45rem .9rem; text-align: center;
	border: 1px solid rgba(31, 58, 50, .18); border-radius: .4rem; background: #fff;
	transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* La selección lleva halo: un anillo dorado muy tenue por fuera y una sombra baja.
   El borde solo dice «este»; el halo dice «este, y es una buena elección». Es la
   diferencia entre marcar una casilla y elegir algo — y es barata: dos sombras. */
.cantidad input:checked + .cantidad__caja {
	background: var(--verde); border-color: var(--verde); color: var(--sobre-verde);
	box-shadow:
		inset 0 0 0 1px var(--oro),
		0 0 0 1px rgba(217, 171, 95, .6),
		0 0 0 5px rgba(217, 171, 95, .16),
		0 0 22px 2px rgba(217, 171, 95, .34),
		0 8px 22px rgba(31, 58, 50, .3);
}
.cantidad input:focus-visible + .cantidad__caja { outline: 2px solid var(--oro); outline-offset: 2px; }
.cantidad__frascos { display: flex; gap: 2px; height: 1.5rem; color: var(--tinta-tenue); }
.cantidad__frascos svg { height: 100%; width: auto; }
.cantidad input:checked + .cantidad__caja .cantidad__frascos { color: var(--oro); }
/* Tamaños y contraste: estaban a .68rem en gris claro y no se leían. La regla aquí es
   que ningún texto de la caja baje de .78rem ni use el gris más tenue — es un elemento
   que hay que poder comparar de un vistazo, no leer con esfuerzo. */
.cantidad__n { font-size: 1.05rem; font-weight: 600; line-height: 1.1; }
.cantidad__n small { font-weight: 400; font-size: .72em; color: var(--tinta-suave); }
.cantidad__para { font-size: .78rem; line-height: 1.3; color: var(--tinta-suave); }
.cantidad__precio { font-size: .88rem; font-weight: 600; color: var(--tinta); }

/* Sobre el verde, el texto secundario va casi opaco: a 62% se perdía del todo. */
.cantidad input:checked + .cantidad__caja .cantidad__n small,
.cantidad input:checked + .cantidad__caja .cantidad__para { color: rgba(242, 236, 227, .88); }
.cantidad input:checked + .cantidad__caja .cantidad__precio,
.cantidad input:checked + .cantidad__caja .cantidad__precio .woocommerce-Price-amount { color: #fff; }
/* Descuento por piezas (inc/descuentos.php). La escala va en una línea sobre los cuadros;
   en cada cuadro, el porcentaje y el total de lista tachado. El total descontado sigue
   siendo el número que manda: el tachado es contexto, no compite. */
/* La escala, compacta: título y «Ver condiciones» en una línea, los tres escalones en
   otra, el porcentaje junto a su cantidad. Una versión anterior —porcentajes grandes en
   tres columnas— pesaba tanto como los cuadros de abajo y les robaba la atención: la
   escala es contexto de la decisión, no la decisión. */
.escala {
	grid-column: 1 / -1; margin: -.2rem 0 .8rem;
	display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .35rem .8rem;
	padding: .55rem .75rem .6rem; border-radius: .4rem;
	background: var(--crema-suave); border: 1px solid rgba(217, 171, 95, .32);
}
.escala__titulo {
	display: flex; align-items: center; gap: .4rem; margin: 0;
	font-size: .76rem; font-weight: 600; color: var(--tinta);
}
.escala__titulo svg { width: .8rem; height: auto; color: var(--oro); flex: none; }
.escala__pasos {
	grid-column: 1 / -1; grid-row: 2; list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: .2rem 0;
}
.escala__paso { display: flex; align-items: baseline; gap: .28rem; padding: 0 .7rem; white-space: nowrap; }
.escala__paso:first-child { padding-left: 0; }
.escala__paso + .escala__paso { border-left: 1px solid rgba(217, 171, 95, .4); }
.escala__pct { font-size: .84rem; font-weight: 700; color: var(--acento); }
.escala__n { font-size: .74rem; color: var(--tinta-suave); }
.escala__condiciones {
	grid-column: 2; grid-row: 1; justify-self: end;
	font-size: .68rem; color: var(--acento); text-decoration: underline; text-underline-offset: .2em;
	text-decoration-color: rgba(154, 116, 52, .45);
}
.escala__condiciones:hover { text-decoration-color: currentColor; }
/* Bajo el encabezado de una sección (home: «Cinco formas…»; ficha: «¿Cuál es el tuyo?»),
   centrada y un punto más grande. En
   escritorio, todo en una línea: título · escala · a qué aplica · condiciones. */
.escala--seccion { max-width: 44rem; margin: 0 auto 1.8rem; padding: .7rem .95rem .75rem; }
.escala__nota { grid-column: 1 / -1; grid-row: 3; font-size: .7rem; color: var(--tinta-tenue); }
.escala--seccion .escala__titulo { font-size: .84rem; }
.escala--seccion .escala__pct { font-size: .95rem; }
.escala--seccion .escala__n { font-size: .78rem; }
@media (min-width: 46rem) {
	.escala--seccion {
		max-width: none; width: fit-content; grid-template-columns: auto auto auto auto;
		align-items: center; gap: 0 1.3rem; padding: .7rem 1.2rem;
	}
	.escala--seccion .escala__titulo { grid-column: 1; grid-row: 1; }
	.escala--seccion .escala__pasos { grid-column: 2; grid-row: 1; }
	.escala--seccion .escala__nota { grid-column: 3; grid-row: 1; }
	.escala--seccion .escala__condiciones { grid-column: 4; grid-row: 1; }
}

/* En celular los tres escalones no caben en una línea: en vez de saltar el tercero
   (con su filete colgando), tres columnas iguales con la cantidad debajo. */
@media (max-width: 45.999rem) {
	.escala__pasos { display: grid; grid-template-columns: repeat(3, 1fr); }
	.escala__paso { flex-direction: column; align-items: center; gap: 0; padding: 0 .3rem; }
	.escala__paso:first-child { padding-left: .3rem; }
	.escala__n { font-size: .7rem; }
}

/* Los tres cuadros miden lo mismo: el cuadro llena su celda y el pie (porcentaje y
   precio) se va abajo. Sin esto el de 1 pieza, que no lleva descuento, quedaba más bajo. */
.cantidad { display: flex; }
.cantidad__caja { flex: 1; display: flex; flex-direction: column; align-items: center; }
.cantidad__pie { margin-top: auto; display: grid; justify-items: center; gap: .22rem; padding-top: .3rem; }
.cantidad__ahorro {
	margin-top: .15rem; padding: .08rem .45rem; border-radius: 1em;
	background: rgba(217, 171, 95, .2); color: var(--acento);
	font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}
.cantidad input:checked + .cantidad__caja .cantidad__ahorro { background: var(--oro); color: var(--negro); }
.cantidad__precio del { display: block; font-size: .78rem; font-weight: 400; color: var(--tinta-tenue); }
.cantidad__precio del .woocommerce-Price-amount { color: inherit; }
.cantidad input:checked + .cantidad__caja .cantidad__precio del,
.cantidad input:checked + .cantidad__caja .cantidad__precio del .woocommerce-Price-amount { color: rgba(242, 236, 227, .62); }
.libre__ahorro { font-size: .78rem; font-weight: 700; color: var(--acento); }
.libre__lista { font-size: .82rem; color: var(--tinta-tenue); font-variant-numeric: tabular-nums; }

.cantidad__sello {
	position: absolute; top: -.58rem; left: 50%; transform: translateX(-50%); white-space: nowrap;
	padding: .12rem .5rem; border-radius: 1em; background: var(--oro); color: var(--negro);
	font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}

/* ═══ Botón ════════════════════════════════════════════════════════════════════
   Lleva el total de la cantidad elegida: conecta la selección con su consecuencia.
   Se imprimen todos y `:has()` enseña el del radio marcado — sin JavaScript. */

.cta {
	display: flex; align-items: center; justify-content: center; gap: .55rem; width: 100%;
	padding: 1.05rem 1.25rem; border: 0; border-radius: .4rem;
	background: var(--negro); color: #fff; font: inherit; font-weight: 600; font-size: 1rem;
	letter-spacing: .01em; cursor: pointer; text-decoration: none;
}
.cta:hover { background: #241f19; }
/* Mientras se agrega sin recargar: el botón responde al toque pero no admite un segundo. */
.cta--agregando { opacity: .65; cursor: progress; }
.cta__total { display: none; opacity: .68; font-weight: 500; }
.cta__total .woocommerce-Price-amount { color: #fff; }
.cta__total::before { content: "·"; margin-right: .5rem; }
body:has(#form-compra input[value="1"]:checked) .cta .cta__total--1,
body:has(#form-compra input[value="2"]:checked) .cta .cta__total--2,
body:has(#form-compra input[value="3"]:checked) .cta .cta__total--3 { display: inline; }
.agotado { padding: .9rem 1rem; border: 1px solid var(--linea); border-radius: .4rem; color: var(--tinta-suave); font-size: .95rem; }

.pagos { margin-top: .95rem; }
.pagos__marcas { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0; padding: 0; list-style: none; }
.marca { display: grid; place-items: center; height: 1.5rem; padding: 0 .4rem; border: 1px solid var(--linea); border-radius: .25rem; background: #fff; }
.marca svg { height: .8rem; width: auto; display: block; }
.marca--mc svg { height: 1rem; }
.marca--mp img { height: .78rem; width: auto; display: block; }
/* Los meses: una línea con su ícono, sin caja. Arriba de las marcas porque es el
   beneficio; las marcas y el candado contestan otra pregunta («¿es seguro?»). */
.pagos__msi { display: flex; align-items: flex-start; gap: .4rem; margin: 0 0 .6rem; font-size: .8rem; line-height: 1.4; color: var(--tinta-suave); }
.pagos__msi svg { width: .95rem; height: .95rem; flex: none; margin-top: .05rem; color: var(--oro); }
.pagos__msi strong { color: var(--tinta); font-weight: 600; }
.pagos__msi [hidden] { display: none; }
.pagos__seguro { display: flex; align-items: center; gap: .35rem; margin: .55rem 0 0; font-size: .74rem; color: var(--tinta-tenue); }
.pagos__candado { width: .8rem; height: .8rem; color: #2e7d4f; flex: 0 0 auto; }

/* ═══ Sistema de secciones ═════════════════════════════════════════════════════ */

.seccion { padding: 3.4rem 1.15rem; }
.seccion__inner { max-width: 68rem; margin: 0 auto; }
.seccion__inner--angosto { max-width: 42rem; }
.seccion--crema { background: var(--crema-suave); }
.seccion--banda { background: var(--papel); border-block: 1px solid var(--linea); padding-block: 1.7rem; }
.seccion--verde { background: var(--verde); color: var(--sobre-verde); }
.seccion--verde .seccion__entrada { color: var(--sobre-verde-tenue); }

.seccion__cabeza { text-align: center; max-width: 40rem; margin: 0 auto 2.4rem; }
.seccion__cabeza--izq { text-align: left; margin-inline: 0; }
.seccion__titulo { margin: 0 0 .7rem; font-family: var(--serif); font-size: clamp(1.6rem, 5.5vw, 2.15rem); font-weight: 600; line-height: 1.12; }
.seccion__entrada { margin: 0; color: var(--tinta-suave); font-size: 1rem; line-height: 1.6; }

/* El eyebrow dorado es el hilo que cose toda la página. */
.eyebrow { margin: 0 0 .6rem; font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .19em; color: var(--acento); }
.seccion--verde .eyebrow { color: var(--oro); }

/* ═══ Progresión de materiales ═════════════════════════════════════════════════ */

.materiales { list-style: none; margin: 0 0 2.6rem; padding: 0; display: grid; gap: 1.5rem; position: relative; }
.material { display: grid; grid-template-columns: 5.2rem 1fr; column-gap: 1.1rem; align-items: center; }
.material__foto, .material__muestra {
	grid-row: 1 / 4; width: 5.2rem; height: 5.2rem;
	border-radius: .3rem; object-fit: cover;
	box-shadow: inset 0 0 0 1px rgba(4, 3, 0, .08);
}
/* Reserva por si falta la fotografía: el bloque cae a campo de color y no se rompe. */
.material--sandalo   .material__muestra { background: linear-gradient(145deg, #b98b57, #7d5330 60%, #5d3c22); }
.material--cardamomo .material__muestra { background: linear-gradient(145deg, #e0c893, #b2934f 60%, #856a33); }
.material--cuero     .material__muestra { background: linear-gradient(145deg, #6a4a35, #42291b 60%, #2a1810); }
/* Las cremas (2026-11-03): ya tienen foto; el color queda de respaldo. */
.material--frambuesa .material__muestra { background: linear-gradient(145deg, #e0607a, #b02c4a 60%, #7a1630); }
.material--azafran   .material__muestra { background: linear-gradient(145deg, #f0a43a, #c8541e 60%, #8a2f12); }
.material--te-negro  .material__muestra { background: linear-gradient(145deg, #8a6a4a, #4e3522 60%, #2c1c10); }
.material--toronja   .material__muestra { background: linear-gradient(145deg, #ffb59a, #f0715a 60%, #c2443a); }
.material--jengibre  .material__muestra { background: linear-gradient(145deg, #f1d79a, #d8aa58 60%, #a8782e); }
.material__n { grid-column: 2; font-size: .62rem; font-weight: 700; letter-spacing: .17em; color: var(--oro); }
.material__nombre { grid-column: 2; margin: 0; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.12; }
.material__sensacion { grid-column: 2; margin: 0; font-size: .87rem; color: var(--tinta-suave); }

/* ═══ Panel del perfil ═════════════════════════════════════════════════════════ */

.panel-aroma {
	display: grid; gap: 2.2rem; padding: 1.9rem 1.5rem; margin-bottom: 2.4rem;
	background: var(--papel); border: 1px solid var(--linea); border-radius: .4rem;
}
.eje { display: grid; grid-template-columns: 5.6rem 1fr 5.6rem; align-items: center; gap: .75rem; padding: .44rem 0; font-size: .78rem; }
.eje__izq { text-align: right; font-weight: 600; }
.eje__der { color: var(--tinta-tenue); }
.eje__pista { position: relative; height: 2px; background: var(--crema); border-radius: 2px; }
.eje__punto { position: absolute; top: 50%; width: .52rem; height: .52rem; margin: -.26rem 0 0 -.26rem; border-radius: 50%; background: var(--oro); box-shadow: 0 0 0 3px rgba(217, 171, 95, .22); }

.chips__et { margin: 1.2rem 0 .5rem; font-size: .64rem; text-transform: uppercase; letter-spacing: .15em; color: var(--tinta-tenue); }
.chips__et:first-of-type { margin-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.chip { padding: .3rem .72rem; border-radius: 1.2em; font-size: .78rem; }
.chip--si { background: var(--verde); color: var(--sobre-verde); }
.chip--no { border: 1px solid rgba(31, 58, 50, .28); color: var(--tinta-tenue); }

/* ═══ La cita del ambiente — donde la página pasa de informar a emocionar ═══════ */

.cita {
	margin: 0 0 2.2rem; padding: 2.2rem 1.6rem; background: var(--verde);
	color: var(--sobre-verde); border-radius: .4rem; position: relative; overflow: hidden;
}
.cita::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--oro); }
.cita p { margin: 0; font-family: var(--serif); font-size: clamp(1.2rem, 4.4vw, 1.65rem); line-height: 1.38; }

.nota-ref { padding-top: 1.4rem; border-top: 1px solid var(--linea); }
.nota-ref p:last-child { margin: 0; font-size: .85rem; color: var(--tinta-suave); line-height: 1.6; }
.nota-ref strong { color: var(--tinta); }

/* ═══ Banda de specs — una sola banda, no tres cajas ═══════════════════════════ */

.banda { display: grid; gap: 1.1rem; margin: 0; }
.banda__dato { display: flex; gap: .8rem; align-items: center; }
.banda__icono { width: 1.25rem; height: 1.25rem; color: var(--oro); flex: 0 0 auto; }
.banda dt { font-size: .62rem; text-transform: uppercase; letter-spacing: .15em; color: var(--tinta-tenue); }
.banda dd { margin: 0; font-size: .9rem; }

/* La ficha técnica en verde Dokan (2026-10-02): sobre papel, entre el hero y «Siente…»,
   pasaba de largo. En verde se lee como el cierre del hero — los datos duros de lo que
   se acaba de elegir — y el oro de los iconos por fin tiene contra qué brillar. */
.ficha-tec { background: var(--verde); color: var(--sobre-verde); border-block: 0; }
.ficha-tec .banda dt { color: rgba(242, 236, 227, .62); }
.ficha-tec .banda dd { color: var(--sobre-verde); font-weight: 500; }

/* ═══ La tienda, sobre verde — el punto más oscuro, y el que da sentido al oro ══ */

.local__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.local__fotos img { border-radius: .3rem; aspect-ratio: 1; object-fit: cover; }
.local__grande { grid-column: 1 / -1; aspect-ratio: 4 / 3 !important; }
.local__pie { margin-top: 1.8rem; display: grid; gap: 1.1rem; }
.local__google { margin: 0; font-size: .9rem; color: var(--sobre-verde); }
.local__google .estrellas { color: var(--oro); font-size: 1.05rem; margin-right: .2rem; }
.local__google span { color: var(--sobre-verde-tenue); }
.local__dato { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--sobre-verde); }
.local__dato strong { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .15em; color: var(--oro); font-weight: 700; margin-bottom: .15rem; }

.boton-oro { justify-self: start; display: inline-block; padding: .8rem 1.4rem; border-radius: .4rem; background: var(--oro); color: var(--negro); font-size: .88rem; font-weight: 600; text-decoration: none; }
.boton-oro:hover { background: #e4bb78; }
.enlace-oro { font-size: .88rem; color: var(--acento); text-decoration: none; font-weight: 600; }

/* ═══ Opiniones — vuelve el blanco, para respirar ══════════════════════════════ */

.opiniones__grid { display: grid; gap: 2rem; }
.opiniones__cifra { margin: 0; font-family: var(--serif); font-size: 3rem; line-height: 1; font-weight: 600; }
.opiniones__nota .estrellas { margin: .2rem 0 0; color: var(--oro); font-size: 1rem; letter-spacing: .12em; }
.opiniones__total { margin: .25rem 0 0; font-size: .8rem; color: var(--tinta-tenue); }
.opiniones__lista { display: grid; gap: 1.7rem; }
.resena { margin: 0; padding-left: 1.1rem; border-left: 2px solid var(--crema); }
.resena p { margin: 0 0 .5rem; font-size: .93rem; line-height: 1.6; }
.resena cite { font-style: normal; font-size: .78rem; color: var(--tinta-tenue); letter-spacing: .04em; }

/* ═══ FAQ, sin caja exterior ═══════════════════════════════════════════════════ */

.faq { border-bottom: 1px solid var(--linea); }
.faq:first-of-type { border-top: 1px solid var(--linea); }
.faq summary { padding: 1rem 0; cursor: pointer; font-size: .95rem; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--oro); font-size: 1.15rem; line-height: 1; }
.faq[open] summary::after { content: "−"; }
.faq p { margin: -.25rem 0 1.1rem; font-size: .89rem; line-height: 1.6; color: var(--tinta-suave); max-width: 52ch; }

/* ═══ Cierre a dos columnas ════════════════════════════════════════════════════ */

/* ── El cierre ───────────────────────────────────────────────────────────────
   Las preguntas mandan —son lo que la gente busca de verdad al final— y la letra
   chica va al costado, en una columna estrecha que se lee como ficha técnica. */

.cierre__grid { display: grid; gap: 2.8rem; }
.cierre__faq .seccion__titulo { margin-bottom: .4rem; }
.cierre__lado { display: grid; gap: 2rem; align-content: start; }
.cierre__titulo {
	margin: 0 0 .9rem; font-size: .68rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .16em; color: var(--acento);
}
.detalles { margin: 0 0 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.detalles li { position: relative; padding-left: 1.5rem; font-size: .9rem; color: var(--tinta-suave); }
.detalles li::before { content: ""; position: absolute; left: .15rem; top: .45em; width: .45rem; height: .24rem; border-left: 1.6px solid var(--oro); border-bottom: 1.6px solid var(--oro); transform: rotate(-45deg); }
.politica { margin: 0 0 1.2rem; display: grid; gap: 1.05rem; }
.politica__fila dt { font-size: .62rem; text-transform: uppercase; letter-spacing: .14em; color: var(--tinta-tenue); margin-bottom: .2rem; }
.politica__fila dd { margin: 0; display: grid; gap: .1rem; }
.politica__fila dd strong { font-size: .95rem; }
.politica__fila dd span { font-size: .84rem; color: var(--tinta-suave); }

/* ═══ Barra fija de compra ═════════════════════════════════════════════════════ */

.ctafijo {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
	display: flex; align-items: center; gap: .8rem;
	padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
	background: var(--papel); border-top: 1px solid var(--linea); box-shadow: 0 -2px 14px rgba(4, 3, 0, .08);
	/* Entra solo cuando el botón del cuerpo salió de la pantalla (ver parts/cta-fijo.php). */
	transform: translateY(110%); visibility: hidden;
	transition: transform .25s ease, visibility 0s linear .25s;
}
body.ctafijo-visible .ctafijo { transform: none; visibility: visible; transition: transform .25s ease; }
.ctafijo__datos { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.ctafijo__nombre { font-family: var(--serif); font-size: 1.02rem; font-weight: 600; }
.ctafijo__total { display: none; font-size: .82rem; color: var(--tinta-suave); }
.ctafijo__total em { font-style: normal; }
body:has(#form-compra input[value="1"]:checked) .ctafijo__total.cta__total--1,
body:has(#form-compra input[value="2"]:checked) .ctafijo__total.cta__total--2,
body:has(#form-compra input[value="3"]:checked) .ctafijo__total.cta__total--3 { display: block; }
.cta--fijo { width: auto; flex: none; padding: .8rem 1.2rem; border-radius: .4rem; font-size: .95rem; }
.cta--fijo .cta__total { display: none !important; }
body.dokan-ficha .hero { padding-bottom: 2.6rem; }

/* ═══ Cajón del carrito ════════════════════════════════════════════════════════ */

.carro {
	position: fixed; inset: 0 0 0 auto; z-index: 50; width: min(88vw, 23rem);
	display: flex; flex-direction: column; background: var(--papel);
	border-left: 1px solid var(--linea); transform: translateX(102%);
	transition: transform .25s ease; box-shadow: -6px 0 24px rgba(4, 3, 0, .12);
}
.carro-check:checked ~ .carro { transform: none; }
.carro__cabeza { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--linea); }
.carro__titulo { margin: 0; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.carro__cerrar { font-size: 1.7rem; line-height: 1; cursor: pointer; color: var(--tinta-suave); padding: 0 .2rem; }
.carro__cuerpo { flex: 1; overflow-y: auto; padding: 1.1rem 1.2rem; }
.carro__cargando, .carro__vacio { margin: 0; color: var(--tinta-suave); font-size: .9rem; }
.carro__vacio a { color: var(--acento); }
.carro__item { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem 0; border-bottom: 1px solid var(--linea); }
.carro__item:first-child { padding-top: 0; }
.carro__item img { width: 3.6rem; height: 3.6rem; object-fit: cover; border-radius: .3rem; flex: 0 0 auto; }
.carro__datos { flex: 1; min-width: 0; }
.carro__nombre { margin: 0 0 .15rem; font-size: .88rem; line-height: 1.3; }
.carro__linea { margin: 0; font-size: .78rem; color: var(--tinta-tenue); }
.carro__importe { font-size: .88rem; font-weight: 600; white-space: nowrap; }
.carro__pie { padding: 1.1rem 1.2rem calc(1.1rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); }
.carro__desc { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .35rem; font-size: .88rem; color: var(--acento); }
.carro__desc strong { font-weight: 600; white-space: nowrap; }
.carro__subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .2rem; }
.carro__subtotal strong { font-size: 1.15rem; }
.carro__envio { margin: 0 0 .9rem; font-size: .76rem; color: var(--acento); }
.carro__ver { display: block; text-align: center; margin-top: .65rem; font-size: .84rem; color: var(--tinta-suave); }
@media (prefers-reduced-motion: reduce) { .carro, .panel, .carro__velo, .panel__velo { transition: none; } }

/* ═══ Escritorio ═══════════════════════════════════════════════════════════════ */

@media (min-width: 46rem) {
	.franja { position: sticky; top: 0; z-index: 31; }
	.franja__solo-escritorio { display: block; }
	.franja__lista { gap: .5rem 2.2rem; font-size: .75rem; }

	.barra { padding: 1.35rem 2.25rem; top: 2.45rem; }
	.barra__hamb, .panel__cerrar, .panel__buscar, .panel__cuenta, .panel__velo { display: none; }
	.barra__red { display: block; }
	.panel {
		position: static; grid-column: 1; justify-self: start; width: auto; padding: 0;
		transform: none; overflow: visible; border: 0; background: none;
		flex-direction: row; align-items: center; gap: 1.4rem;
	}
	.panel__lista { display: flex; gap: 2.1rem; }
	.panel__lista a { border: 0; padding: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 500; white-space: nowrap; }
	.panel__lista a:hover { color: var(--acento); }

	/* El hero es el único contenedor estrecho. Las secciones de abajo son de ancho
	   completo y llevan su propio fondo. */
	.hero {
		max-width: 68rem; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr;
		gap: 3.5rem; padding: 3rem 1.5rem 4rem;
	}
	/* La galería acompaña mientras se baja por la columna de compra (escala, cantidades,
	   botón), que es más alta: sin esto quedaba un hueco vacío bajo las fotos. */
	.galeria { grid-column: 1; align-self: start; position: sticky; top: calc(var(--alto-header, 7rem) + 1.2rem); }
	.galeria__img { border-radius: .4rem; }
	.galeria__minis { padding: .5rem 0 0; }
	/* El título y la línea ya están en la columna de al lado: encima de la foto, repetían. */
	.galeria__portada { display: none; }
	.carta { border-radius: .4rem; padding: 2.4rem 2.2rem; }
	.hero__datos { grid-column: 2; padding: 0; }
	body.dokan-ficha .hero { padding-bottom: 4rem; }

	.seccion { padding: 5rem 1.5rem; }
	.seccion--banda { padding-block: 2rem; }

	/* Los tres materiales como progresión, enhebrados por una línea dorada. */
	.materiales { grid-template-columns: repeat(3, 1fr); gap: 2.2rem; }
	.material { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: .28rem; position: relative; }
	/* La fotografía toma el ancho de su columna: ahora es el sujeto, no un adorno. */
	.material__foto, .material__muestra {
		grid-row: auto; width: 100%; height: auto; aspect-ratio: 1;
		outline: 7px solid var(--crema-suave); outline-offset: 0;
	}
	.material__n, .material__nombre, .material__sensacion { grid-column: 1; }
	.material__n { margin-top: .85rem; }

	.panel-aroma { grid-template-columns: 1.15fr 1fr; gap: 3.4rem; padding: 2.4rem 2.6rem; }
	.cita { padding: 3rem 3.2rem; }
	/* Cuatro columnas: con tres, el cuarto dato caía solo a una segunda fila y la
	   banda dejaba de ser banda. */
	.banda { grid-template-columns: repeat(4, 1fr); gap: 2.2rem; }
	/* La ficha técnica respira más: es el punto de reposo entre el bloque olfativo y
	   la tienda. */
	.ficha-tec { padding-block: 2.8rem; }

	.local__fotos { grid-template-columns: 1.6fr 1fr; gap: .6rem; }
	/* La grande llena las dos filas de la derecha y no fija su propia proporción: con
	   `3 / 3.4` terminaba antes que las dos de al lado y los bordes de abajo no
	   coincidían. `contain: size` evita que su alto natural estire las filas. */
	.local__grande { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto !important; height: 100%; contain: size; }
	.local__pie { grid-template-columns: repeat(3, auto) 1fr; align-items: center; gap: 2.6rem; }
	.boton-oro { justify-self: end; }

	.opiniones__grid { grid-template-columns: 1fr 2.3fr; gap: 3.5rem; }
	.opiniones__cifra { font-size: 3.6rem; }

	/* Las preguntas ocupan más: son el bloque que se lee, no el que se consulta. */
	.cierre__grid { grid-template-columns: 1.45fr 1fr; gap: 4.5rem; }
	/* Un filete separa la ficha técnica de las preguntas sin meter una caja. */
	.cierre__lado { padding-left: 4.5rem; border-left: 1px solid var(--linea); margin-left: -4.5rem; }

	.ctafijo { display: none; }
}

/* ── Los dos caminos de la política ──────────────────────────────────────────
   Preferencia personal y producto dañado son mundos distintos y el visitante los
   confunde. El filete de color los separa sin necesidad de dos cajas: dorado para
   lo que paga el cliente, verde para lo que cubre Dokan. */

.casos { display: grid; gap: 1.5rem; margin-bottom: 1.2rem; }
.caso { padding-left: 1rem; border-left: 2px solid var(--crema); }
.caso--cliente { border-left-color: var(--oro); }
.caso--dokan { border-left-color: var(--verde); }
.caso__pregunta { margin: 0 0 .3rem; font-size: .92rem; font-weight: 600; }
.caso__que { margin: 0 0 .2rem; font-size: .9rem; }
.caso__cond { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--tinta-suave); }

/* ═══ Pie de página ════════════════════════════════════════════════════════════
   Sobre el verde institucional, cerrando el ritmo. Repite los datos de confianza
   para quien llegó hasta abajo sin comprar, da salida a quien quiere seguir
   navegando, y firma. */

.pie { background: var(--verde); color: var(--sobre-verde); }
.pie__inner {
	max-width: 68rem; margin: 0 auto; padding: 3rem 1.15rem 2.2rem;
	display: grid; gap: 2.2rem;
}
.pie__logo { filter: invert(1) brightness(1.6); width: 84px; }
.pie__lema { margin: .9rem 0 1rem; font-size: .86rem; line-height: 1.5; color: var(--sobre-verde-tenue); }

.pie__redes { display: flex; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.pie__redes a { color: var(--oro); font-size: .8rem; text-decoration: none; letter-spacing: .04em; }
.pie__redes a:hover { text-decoration: underline; }

.pie__titulo {
	margin: 0 0 .8rem; font-size: .66rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .17em; color: var(--oro);
}
.pie__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.pie__lista a { color: var(--sobre-verde); font-size: .88rem; text-decoration: none; }
.pie__lista a:hover { color: var(--oro); }
.pie__dato { margin: 0 0 .5rem; font-size: .86rem; line-height: 1.5; color: var(--sobre-verde-tenue); }
.pie__enlace { color: var(--oro); text-decoration: none; font-size: .86rem; }
.pie__enlace:hover { text-decoration: underline; }

.pie__cierre {
	max-width: 68rem; margin: 0 auto; padding: 1.3rem 1.15rem calc(1.3rem + env(safe-area-inset-bottom));
	border-top: 1px solid rgba(242, 236, 227, .16);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.pie__copy { margin: 0; font-size: .74rem; color: var(--sobre-verde-tenue); }
/* Los medios de pago vuelven a salir aquí, en su versión sobre fondo oscuro. */
.pie__cierre .pagos { margin: 0; }
.pie__cierre .marca { border-color: rgba(242, 236, 227, .25); }
.pie__cierre .pagos__seguro { color: var(--sobre-verde-tenue); }
.pie__cierre .pagos__candado { color: var(--oro); }

/* La barra fija de compra tapa el final del pie en celular. */
body.dokan-ficha .pie__cierre { padding-bottom: 5rem; }

@media (min-width: 46rem) {
	.pie__inner { grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr; gap: 3rem; padding: 4rem 1.5rem 2.5rem; }
	.pie__cierre { padding-inline: 1.5rem; }
	body.dokan-ficha .pie__cierre { padding-bottom: 1.3rem; }
}

/* ═══ Estrellas, en un solo sitio ══════════════════════════════════════════════
   Media estrella incluida: pintar un 4.6 como cinco llenas es redondear a favor, y
   en un bloque cuyo trabajo es dar confianza eso se nota. */

.estrellas { display: inline-flex; gap: .06em; letter-spacing: 0; }
.estrella { color: var(--oro); }
.estrella--vacia { color: rgba(217, 171, 95, .3); }
/* La media se pinta con un degradado cortado justo a la mitad del glifo. */
.estrella--media {
	background: linear-gradient(90deg, var(--oro) 50%, rgba(217, 171, 95, .3) 50%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.seccion--verde .estrella--vacia,
.pie .estrella--vacia { color: rgba(217, 171, 95, .35); }

/* ── La nota del hero: prueba social antes del precio ───────────────────────── */

.nota {
	display: inline-flex; align-items: center; gap: .45rem;
	margin: 0 0 1rem; text-decoration: none; color: var(--tinta-suave); font-size: .84rem;
}
.nota:hover span { color: var(--acento); text-decoration: underline; }
.nota .estrellas { font-size: .95rem; }

/* ── El resumen de calificaciones ────────────────────────────────────────────
   La nota y el reparto, lado a lado. El número solo en una columna dejaba medio
   bloque vacío; el reparto llena ese espacio con lo que de verdad convence — que de
   82 reseñas no hay una sola por debajo de cuatro. */

.resumen {
	display: grid; gap: 1.6rem; align-items: center;
	padding: 1.6rem; margin-bottom: 2.4rem;
	background: var(--crema-suave); border-radius: .4rem;
}
.resumen__nota { text-align: center; }
.resumen__cifra { margin: 0; font-family: var(--serif); font-size: 3.2rem; line-height: 1; font-weight: 600; }
.resumen .estrellas { font-size: 1.1rem; margin-top: .35rem; }
.resumen__total { margin: .4rem 0 0; font-size: .8rem; color: var(--tinta-tenue); }

/* ⚠️ `width: 100%` y `minmax(0, 1fr)` no son adorno: sin ellos la columna de la barra
   se resolvía a CERO ancho y las barras no se veían, aunque el elemento existía con su
   color y su altura. Un `1fr` cuyo contenido no tiene tamaño intrínseco puede colapsar
   cuando el contenedor se mide por su contenido; el `minmax(0, …)` y el ancho explícito
   le dan de dónde agarrarse. */
.reparto { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: .45rem; }
.reparto__fila { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 2rem; align-items: center; gap: .7rem; font-size: .76rem; }
.reparto__et { color: var(--tinta-suave); white-space: nowrap; }
.reparto__pista { display: block; width: 100%; min-width: 4rem; height: .45rem; border-radius: .3rem; background: #e6dbcc; overflow: hidden; }
.reparto__barra { display: block; height: 100%; border-radius: .3rem; background: var(--oro); }
.reparto__n { text-align: right; color: var(--tinta-tenue); font-variant-numeric: tabular-nums; }

/* Cada reseña con su propia calificación. */
.resena .estrellas { font-size: .82rem; margin-bottom: .45rem; }

/* ── Los videos de reseña ───────────────────────────────────────────────────
   Verticales, como se grabaron. En celular se deslizan; en escritorio van los tres.
   `preload="none"`: solo baja el póster (~30 KB) y el video entero únicamente si
   alguien toca play. Precargarlos serían 9 MB que paga todo el mundo para que los
   abra casi nadie. */

.videos {
	list-style: none; margin: 0 0 3rem; padding: 0 0 .5rem;
	display: flex; gap: .8rem; overflow-x: auto; scrollbar-width: none;
	scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
}
.videos::-webkit-scrollbar { display: none; }
.video { flex: 0 0 min(66vw, 15rem); scroll-snap-align: center; }
.video__pieza {
	width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
	border-radius: .4rem; background: var(--negro); display: block;
}
.video__pie { margin: .6rem 0 0; display: grid; gap: .08rem; }
.video__pie strong { font-size: .88rem; font-weight: 600; }
.video__pie span { font-size: .78rem; color: var(--tinta-suave); }

.opiniones__escritas { display: grid; gap: 1.7rem; }
.opiniones__lista { display: grid; gap: 1.7rem; }

/* ── El botón flotante de WhatsApp ──────────────────────────────────────────
   Va sobre la barra de compra y NO encima de la foto, que es lo que hacía el del
   sitio: en la captura del diagnóstico el globo verde tapaba la galería.

   ⚠️ Va en el VERDE DE DOKAN, no en el #25d366 de la app. Ese verde es el del widget
   que trae cualquier plugin y se reconoce como tal; en una página de $1,319 abarata
   justo donde se pide confianza. Lo que hace reconocible el canal es el glifo, y el
   glifo no se toca.

   ⚠️ RECTANGULAR, no redondo, con el mismo .4rem del resto de la página —el botón de
   compra, los cuadros de cantidad, las cards—. El globo circular es la forma delatora
   del widget flotante y no comparte lenguaje con nada más de la ficha; en reposo esto
   es una placa, como las de los medios de pago.

   El texto se ve SIEMPRE, no al pasar el cursor: el 98% del tráfico es celular y ahí
   no hay cursor, así que un rótulo escondido tras el hover no existe para casi nadie.

   No pulsa ni rebota en bucle, que es el otro tic del widget de plugin. */

.wa {
	position: fixed; right: 1rem; z-index: 26;
	bottom: calc(4.6rem + env(safe-area-inset-bottom));
	display: flex; align-items: center; gap: .7rem;
	padding: .5rem .85rem .5rem .55rem;
	border-radius: .4rem;
	background: var(--verde); color: var(--crema);
	border: 1px solid rgba(217, 171, 95, .34);
	box-shadow: 0 6px 20px rgba(17, 32, 27, .3), 0 1px 3px rgba(0, 0, 0, .2);
	text-decoration: none; overflow: hidden;
	transition: opacity .38s, transform .38s cubic-bezier(.22, 1, .36, 1),
	            border-color .42s, box-shadow .42s, background .42s;
}
.wa__icono {
	flex: none; width: 2.3rem; height: 2.3rem; display: grid; place-items: center;
	border-right: 1px solid rgba(217, 171, 95, .22);
}
.wa svg { width: 1.45rem; height: 1.45rem; color: var(--oro); }
.wa__txt { display: grid; gap: .1rem; line-height: 1.15; white-space: nowrap; }
.wa__de {
	font-size: .6rem; font-weight: 600; text-transform: uppercase;
	letter-spacing: .16em; color: var(--oro);
}
.wa__msj { font-size: .84rem; font-weight: 600; letter-spacing: .01em; }
.wa:hover, .wa:focus-visible {
	background: #24443a; border-color: rgba(217, 171, 95, .66);
	box-shadow: 0 10px 26px rgba(17, 32, 27, .34), 0 0 0 4px rgba(217, 171, 95, .12);
}

/* En escritorio se retira mientras el formulario de compra está a la vista: ahí la
   esquina inferior derecha ES la columna de compra. En celular no aplica —el botón se
   apoya sobre la barra fija— y por eso la regla vive dentro del media query. */
/* En la FICHA solo en escritorio: en celular el botón se apoya sobre la barra fija de
   compra y no tapa nada, y esconderlo ahí le quitaría el canal al 98% del tráfico.

   En la PORTADA en todas las anchuras: ahí lo que esquiva es «Ver lo que está en
   oferta», el CTA de la campaña que Dokan paga, y en celular caía justo encima. */
@media (min-width: 46rem) {
	.wa--esperando { opacity: 0; transform: translateY(.7rem) scale(.96); pointer-events: none; }
}
body.dokan-home .wa--esperando { opacity: 0; transform: translateY(.7rem) scale(.96); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
	.wa { transition: none; }
}

/* El destino de un ancla no debe quedar bajo la barra pegajosa. */
#tienda, #opiniones { scroll-margin-top: 4.5rem; }

@media (min-width: 46rem) {
	.videos { justify-content: center; overflow: visible; padding-bottom: 0; }
	.video { flex: 0 0 15rem; }
	/* El resumen manda a lo ancho y los tres testimonios debajo. */
	.resumen { grid-template-columns: auto minmax(0, 1fr); gap: 3.5rem; padding: 2rem 2.6rem; max-width: 42rem; margin-inline: auto; }
	.resumen__nota { text-align: left; padding-right: 3.5rem; border-right: 1px solid var(--linea); }
	.resumen__cifra { font-size: 3.6rem; }
	.opiniones__lista { grid-template-columns: repeat(3, 1fr); gap: 2.2rem; }
	.wa { bottom: 1.5rem; padding: .6rem 1rem .6rem .7rem; gap: .85rem; }
	.wa__icono { width: 2.6rem; height: 2.6rem; }
	.wa svg { width: 1.6rem; height: 1.6rem; }
	.wa__msj { font-size: .9rem; }
	#tienda, #opiniones { scroll-margin-top: 7rem; }
}

/* ── Editar desde el cajón ──────────────────────────────────────────────────── */

.paso { display: flex; align-items: center; gap: .3rem; margin-top: .4rem; }
.paso__b {
	width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
	border: 1px solid var(--linea); border-radius: .25rem; background: #fff;
	font: inherit; font-size: .95rem; line-height: 1; color: var(--tinta); cursor: pointer;
}
.paso__b:hover { border-color: var(--verde); }
.paso__n { min-width: 1.4rem; text-align: center; font-size: .85rem; font-variant-numeric: tabular-nums; }
.carro__quitar {
	margin-left: .5rem; padding: 0; border: 0; background: none;
	font: inherit; font-size: .76rem; color: var(--tinta-tenue); cursor: pointer;
	text-decoration: underline; text-underline-offset: 2px;
}
.carro__quitar:hover { color: #a33; }

/* Mientras viaja la petición, el cuerpo se atenúa y deja de aceptar clics: sin esto,
   tocar «+» tres veces rápido manda tres peticiones que se pisan entre sí. */
.carro__cuerpo--ocupado { opacity: .5; pointer-events: none; }

/* ── La salida para quien necesita más de tres ───────────────────────────────
   Cerrada es solo una invitación, sin cifras: un número con su precio al lado se lee
   como la opción elegida aunque no lo esté, y competía con los cuadros. Abierta se
   pinta como un cuadro seleccionado, para que no quede duda de cuál está activo. */

.libre { margin: 0 0 1.1rem; }
.libre__radio { position: absolute; opacity: 0; width: 0; height: 0; }

.libre__abrir {
	display: block; width: 100%; padding: .7rem .9rem;
	border: 1px dashed var(--linea); border-radius: .4rem; background: none;
	font: inherit; font-size: .82rem; color: var(--tinta-suave); text-align: left; cursor: pointer;
}
.libre__abrir span { color: var(--acento); font-weight: 600; white-space: nowrap; }
.libre__abrir:hover { border-color: var(--acento); }

.libre__panel {
	display: none; align-items: center; gap: .7rem;
	padding: .75rem .9rem;
	border: 1px solid var(--verde); border-radius: .4rem;
	background: var(--verde); color: var(--sobre-verde);
	/* Mismo halo que un cuadro elegido: si esto está activo, tiene que verse tan
	   seleccionado como ellos. */
	box-shadow:
		inset 0 0 0 1px var(--oro),
		0 0 0 1px rgba(217, 171, 95, .6),
		0 0 0 5px rgba(217, 171, 95, .16),
		0 0 22px 2px rgba(217, 171, 95, .34),
		0 8px 22px rgba(31, 58, 50, .3);
}
.libre__et {
	flex: 1; min-width: 4rem;
	font-size: .66rem; text-transform: uppercase; letter-spacing: .14em;
	color: rgba(242, 236, 227, .7);
}
.libre__precio { font-weight: 600; font-variant-numeric: tabular-nums; }

/* La clase la pone el script de cta.php — ver ahí por qué no se usa `:has()`. */
body.cant-libre .libre__abrir { display: none; }
body.cant-libre .libre__panel { display: flex; }

.paso--libre { display: flex; align-items: center; gap: .3rem; }
.paso--libre .paso__b {
	width: 1.7rem; height: 1.7rem;
	border-color: rgba(242, 236, 227, .35); background: none; color: var(--sobre-verde);
}
.paso--libre .paso__b:hover { border-color: var(--oro); color: var(--oro); }
.libre__campo {
	width: 2.4rem; padding: .15rem 0; border: 0; background: none;
	font: inherit; font-size: 1rem; font-weight: 600; color: var(--sobre-verde);
	text-align: center; -moz-appearance: textfield;
}
.libre__campo::-webkit-outer-spin-button,
.libre__campo::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.libre__campo:focus { outline: 0; }

/* Los totales de la cantidad libre, en el botón y en la barra fija.
   La clase la pone el script de cta.php y no `:has()`: al desmarcar el radio desde otro
   del mismo grupo, `:has()` no siempre se reevalúa y el total se quedaba pegado. */
body.cant-libre .cta .cta__total--mas { display: inline; }
body.cant-libre .ctafijo__total.cta__total--mas { display: block; }

/* Con cantidad libre, los totales fijos no deben competir. */
body.cant-libre .cta .cta__total--1,
body.cant-libre .cta .cta__total--2,
body.cant-libre .cta .cta__total--3,
body.cant-libre .ctafijo__total.cta__total--1,
body.cant-libre .ctafijo__total.cta__total--2,
body.cant-libre .ctafijo__total.cta__total--3 { display: none !important; }

/* ═══ El visor de fotos ════════════════════════════════════════════════════════
   Casi negro, mucho aire y la foto COMPLETA. Recortar está bien en la miniatura,
   donde manda la retícula; aquí manda la foto. */

.galeria__img { cursor: zoom-in; }

.visor {
	position: fixed; inset: 0; z-index: 60;
	display: grid; grid-template-rows: auto 1fr;
	/* Fondo OPACO, no translúcido. A 97% se transparentaban el menú y el globo de
	   WhatsApp por detrás, y un visor por el que se lee el menú no se siente de lujo:
	   se siente inacabado. */
	background: #070604;
	opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.visor--abierto { opacity: 1; pointer-events: auto; }
/* Sin esto, deslizar dentro del visor arrastra la página de atrás. */
body.con-visor { overflow: hidden; }

.visor__barra {
	display: flex; align-items: center; justify-content: space-between;
	padding: 1.1rem 1.25rem; padding-top: calc(1.1rem + env(safe-area-inset-top));
}
.visor__cuenta {
	font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
	color: rgba(242, 236, 227, .45);
}
.visor__cuenta b { color: var(--oro); font-weight: 600; }
.visor__cerrar {
	width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
	border: 0; background: none; color: var(--sobre-verde);
	font-size: 1.9rem; line-height: 1; cursor: pointer;
}
.visor__cerrar:hover { color: var(--oro); }

.visor__tira {
	display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
	scrollbar-width: none; overscroll-behavior: contain;
	scroll-behavior: smooth;
	/* Sin `min-height: 0` la fila `1fr` no puede encoger por debajo del contenido y la
	   foto se salía por abajo de la pantalla. */
	min-height: 0;
}
.visor__tira::-webkit-scrollbar { display: none; }
.visor__slide {
	flex: 0 0 100%; scroll-snap-align: center; margin: 0;
	min-width: 0; min-height: 0;
	padding: 0 1.25rem calc(2.5rem + env(safe-area-inset-bottom));
}
/* ⚠️ La foto llena la caja y se ajusta con `object-fit: contain`, en vez de depender de
   `max-height: 100%`. Ese porcentaje solo limita cuando la altura del contenedor es
   definida, y aquí no siempre lo era: la foto se salía por debajo de la pantalla. Con
   `contain` la caja manda y la imagen se mete dentro, pase lo que pase — y no se
   recorta, que es lo que un visor tiene que garantizar. */
.visor__slide img { width: 100%; height: 100%; object-fit: contain; }

.visor__flecha {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 2.8rem; height: 2.8rem; display: none; place-items: center;
	border: 1px solid rgba(242, 236, 227, .2); border-radius: 50%;
	background: none; color: var(--sobre-verde);
	font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.visor__flecha:hover { border-color: var(--oro); color: var(--oro); }
.visor__flecha--izq { left: 1.25rem; }
.visor__flecha--der { right: 1.25rem; }

@media (min-width: 46rem) {
	/* En celular se desliza con el dedo; en escritorio hacen falta las flechas. */
	.visor__flecha { display: grid; }
	.visor__slide { padding: 0 5.5rem 3rem; }
	.visor__barra { padding: 1.5rem 2rem; }
}
@media (prefers-reduced-motion: reduce) {
	.visor { transition: none; }
	.visor__tira { scroll-behavior: auto; }
}

/* ═══ «Siente Sandalwood» — la experiencia olfativa ════════════════════════════
   Hero = comprar · aroma = entender · esto = experimentar.

   ⚠️ Antes vivía en el hero y oscurecía la zona de compra: la experiencia competía con
   el precio y el botón, y el ojo no sabía dónde mirar. Ahora es su propia sección, y al
   tocarla se abre un <dialog> a pantalla completa que es solo del aroma.

   LA PALETA ES DE LA FRAGANCIA, NO DE DOKAN. Llega como variables (`--s-fondo`,
   `--s-luz`, `--s-trazo`, `--s-trazo2`, `--s-texto`) desde `content/`. Fuera de esta
   sección y de la inmersión, la página sigue verde: la marca es constante, cada aroma
   tiene su universo. */

/* ── La sección: el anuncio ───────────────────────────────────────────────── */

.sentir-sec {
	--s-fondo: #14100c; --s-luz: #5a4026; --s-trazo: var(--oro); --s-trazo2: #b07a4a; --s-texto: #f3e9dc;
	position: relative; isolation: isolate; overflow: hidden;
	padding: 4.2rem 1.15rem; text-align: center; color: var(--s-texto);
	background:
		radial-gradient(70% 80% at 50% 100%, color-mix(in srgb, var(--s-luz) 70%, transparent), transparent 70%),
		var(--s-fondo);
}
/* La firma quieta, completa y tenue: se reconoce el universo antes de entrar. */
.sentir-sec__forma { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .7; }
.sentir-sec__forma path { stroke-dashoffset: 0 !important; }
.sentir-sec__forma ellipse { opacity: .3; }
.sentir-sec__inner { max-width: 34rem; }
.sentir-sec__eyebrow { color: var(--s-trazo); }
.sentir-sec__titulo {
	margin: 0; font-family: var(--serif); font-weight: 500;
	font-size: clamp(2.3rem, 9vw, 3.6rem); line-height: 1.05; letter-spacing: -.01em;
}
.sentir-sec__entrada { margin: .9rem auto 0; max-width: 26rem; font-size: .95rem; line-height: 1.6; opacity: .72; }
.sentir-sec__boton {
	display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.9rem; cursor: pointer;
	padding: .95rem 1.7rem; border-radius: 2em; font: inherit; font-size: .9rem; font-weight: 600; letter-spacing: .04em;
	border: 1px solid var(--s-trazo); background: transparent; color: var(--s-texto);
	box-shadow: 0 0 0 0 transparent; transition: background .35s, color .35s, box-shadow .35s;
}
.sentir-sec__boton:hover, .sentir-sec__boton:focus-visible {
	background: var(--s-trazo); color: var(--s-fondo);
	box-shadow: 0 0 32px color-mix(in srgb, var(--s-trazo) 45%, transparent);
}

/* ── La inmersión ─────────────────────────────────────────────────────────── */

html.con-inmersion { overflow: hidden; }

/* Sin marco, sin caja, sin la web detrás: el dialog ES la pantalla. */
.inmersion {
	--s-fondo: #14100c; --s-luz: #5a4026; --s-trazo: var(--oro); --s-trazo2: #b07a4a; --s-texto: #f3e9dc;
	position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none;
	margin: 0; padding: 0; border: 0; overflow: hidden; isolation: isolate;
	background: var(--s-fondo); color: var(--s-texto);
	opacity: 0; transition: opacity .8s ease; cursor: pointer;
}
.inmersion::backdrop { background: var(--s-fondo); }
.inmersion.corre { opacity: 1; }
.inmersion.sale  { opacity: 0; transition-duration: .7s; }

/* La luz: dos focos de su color que derivan a contramano — profundidad sin partículas. */
.inmersion__luz, .inmersion__luz::before { position: absolute; pointer-events: none; }
.inmersion__luz { inset: -20%; z-index: -3;
	background:
		radial-gradient(45% 40% at 30% 70%, color-mix(in srgb, var(--s-luz) 90%, transparent), transparent 70%),
		radial-gradient(50% 45% at 75% 25%, color-mix(in srgb, var(--s-luz) 55%, transparent), transparent 70%);
}
.inmersion__luz::before { content: ""; inset: 0;
	background: radial-gradient(35% 30% at 60% 55%, color-mix(in srgb, var(--s-trazo) 22%, transparent), transparent 70%);
}
.inmersion.corre .inmersion__luz { animation: inm-derivar 9s ease-in-out forwards; }
.inmersion.corre .inmersion__luz::before { animation: inm-derivar 9s ease-in-out reverse forwards; }
@keyframes inm-derivar {
	from { transform: translate3d(-3%, 2%, 0) scale(1); }
	to   { transform: translate3d(3%, -2%, 0) scale(1.12); }
}

/* La materia: las fotos de sus tres notas, desenfocadas. 20% de la mezcla, no más. */
.inmersion__materia { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.inmersion__capa {
	position: absolute; aspect-ratio: 1; border-radius: 50%;
	background: var(--foto) center / cover; filter: blur(26px) saturate(.8);
	opacity: 0; transition: opacity 2.4s ease;
}
.inmersion__capa--corazon { width: 70vmax; left: -22vmax; bottom: -26vmax; }
.inmersion__capa--fondo   { width: 60vmax; right: -24vmax; bottom: -20vmax; }
.inmersion__capa--salida  { width: 34vmax; right: 6vmax; top: -14vmax; }
.inmersion.corre .inmersion__capa { opacity: .2; }
.inmersion.corre .inmersion__capa--fondo  { transition-delay: .6s; }
.inmersion.corre .inmersion__capa--salida { opacity: .12; transition-delay: 1.2s; }

/* ── La firma: la forma de siempre, en el color de la fragancia ──────────── */

.forma { position: absolute; inset: 0; width: 100%; height: 100%; }
.forma path, .forma ellipse { fill: none; }
.forma path { stroke-linecap: round; opacity: var(--o, .3); stroke-dasharray: 2600; stroke-dashoffset: 2600; }
.forma__madre path   { stroke: var(--s-trazo, var(--oro)); stroke-width: 1.3; }
.forma__crecer path  { stroke: var(--s-trazo, var(--oro)); stroke-width: 1.4; stroke-dasharray: 900; stroke-dashoffset: 900; }
.forma__pliegue path { stroke: var(--s-trazo2, #c79a56); stroke-width: 1.9; }
.forma__pulsos ellipse { fill: var(--s-trazo, var(--oro)); stroke: none; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* A pantalla completa los trazos de la ficha se pierden: más cuerpo y más presencia,
   para que la firma sea la atmósfera y no un detalle. La jerarquía de `--o` se conserva. */
.inmersion__forma { z-index: -1; }
.inmersion__forma path { opacity: min(1, calc(var(--o, .3) * 1.7)); }
.inmersion__forma .forma__madre path   { stroke-width: 2.1; }
.inmersion__forma .forma__crecer path  { stroke-width: 2.3; }
.inmersion__forma .forma__pliegue path { stroke-width: 2.8; }
.inmersion.corre .forma__madre path   { animation: trazar 3.8s cubic-bezier(.25, .6, .25, 1) forwards; animation-delay: calc(.2s + var(--i) * .4s); }
.inmersion.corre .forma__crecer path  { animation: trazar 1.8s cubic-bezier(.3, .6, .2, 1) forwards;  animation-delay: calc(.9s + var(--i) * .9s); }
.inmersion.corre .forma__pliegue path { animation: trazar 3.2s cubic-bezier(.25, .6, .25, 1) forwards; animation-delay: calc(1.8s + var(--i) * .35s); }
.inmersion.corre .forma__pulsos ellipse { animation: pulsar 2.6s cubic-bezier(.2, .8, .3, 1) forwards; animation-delay: calc(2.8s + var(--i) * .18s); }
.inmersion.corre .inmersion__forma { animation: inm-respirar 7s ease-in-out forwards; }

@keyframes trazar { to { stroke-dashoffset: 0; } }
@keyframes pulsar {
	0%   { opacity: 0; translate: 0 0; scale: .35; }
	30%  { opacity: .62; scale: 1.15; }
	100% { opacity: .34; translate: var(--dx, 0) var(--dy, 0); scale: 1; }
}
@keyframes inm-respirar { to { transform: scale(1.04); } }

/* ── Las palabras ─────────────────────────────────────────────────────────
   Una a la vez, grandes y solas, al centro. Entran enfocando —desenfoque que se
   aclara y un espaciado que se contrae— y salen igual de despacio. Es lo que separa
   una aparición editorial de un fadeIn() de plantilla. */

.inmersion__texto {
	position: absolute; inset: 0; display: grid; place-items: center;
	padding: 2rem 1.4rem; text-align: center; pointer-events: none;
}
.inmersion__palabra {
	grid-area: 1 / 1; margin: 0;
	font-family: var(--serif); font-weight: 500; text-transform: uppercase;
	font-size: clamp(2.1rem, 10vw, 5.6rem); line-height: 1; letter-spacing: .2em;
	/* El espaciado de la última letra descentra la palabra; esto lo compensa. */
	margin-right: -.2em;
	opacity: 0;
}
.inmersion.corre .inmersion__palabra {
	animation: inm-palabra 1.45s cubic-bezier(.22, .7, .25, 1) forwards;
	animation-delay: calc(1s + var(--i) * 1.3s);
}
@keyframes inm-palabra {
	0%   { opacity: 0; letter-spacing: .62em; filter: blur(12px); }
	30%  { opacity: 1; letter-spacing: .22em; filter: blur(0); }
	72%  { opacity: 1; letter-spacing: .2em;  filter: blur(0); }
	100% { opacity: 0; letter-spacing: .24em; filter: blur(6px); }
}

.inmersion__cierre { grid-area: 1 / 1; display: grid; justify-items: center; gap: 1.1rem; max-width: 34rem; opacity: 0; }
.inmersion.corre .inmersion__cierre { animation: inm-cierre 1.2s ease forwards; animation-delay: 4.9s; }
@keyframes inm-cierre {
	from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
	to   { opacity: 1; transform: none; filter: blur(0); }
}
.inmersion__frase {
	margin: 0; font-family: var(--serif); font-weight: 500;
	font-size: clamp(1.6rem, 6vw, 2.6rem); line-height: 1.28; text-wrap: balance;
}

/* La salida, siempre a la vista pero discreta. */
.inmersion__cerrar {
	position: absolute; top: calc(1rem + env(safe-area-inset-top)); right: 1rem;
	padding: .5rem .8rem; border: 0; background: none; cursor: pointer;
	font: inherit; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--s-texto); opacity: .6;
}
.inmersion__cerrar:hover, .inmersion__cerrar:focus-visible { opacity: 1; }
.inmersion__saltar {
	position: absolute; left: 0; right: 0; bottom: calc(1.4rem + env(safe-area-inset-bottom));
	margin: 0; text-align: center; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
	opacity: 0;
}
.inmersion.corre .inmersion__saltar { animation: inm-pista 3s ease 1.2s forwards; }
@keyframes inm-pista { 0%, 100% { opacity: 0; } 30%, 70% { opacity: .4; } }

/* Con «reducir movimiento»: una composición quieta y elegante, que no se cierra sola. */
@media (prefers-reduced-motion: reduce) {
	.inmersion, .inmersion__capa { transition: none; }
	.inmersion.corre *, .inmersion.corre *::before { animation: none !important; }
	.inmersion.corre .forma path { stroke-dashoffset: 0; }
	.inmersion.corre .forma__pulsos ellipse { opacity: .34; }
	.inmersion.corre .inmersion__palabra { display: none; }
	.inmersion.corre .inmersion__cierre { opacity: 1; }
	.inmersion__saltar { display: none; }
}

@media (min-width: 46rem) {
	.sentir-sec { padding-block: 6rem; }
}

/* ═══ El kit de muestras ═══════════════════════════════════════════════════════
   Va después de la tienda física: primero se invita a venir, y para quien no puede,
   esto es la alternativa.

   ⚠️ La foto SE SALE A SANGRE por el borde derecho. Texto a la izquierda y foto con
   esquinas redondeadas a la derecha es el layout más genérico que existe; una imagen
   que rompe el margen se lee como editorial y le da a la sección su momento. */

.kit { background: var(--crema-suave); overflow: hidden; }
.kit__grid { display: grid; gap: 2rem; align-items: center; }
.kit__foto { margin: 0; }
.kit__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kit__texto .seccion__titulo { margin-bottom: .7rem; max-width: 20ch; text-wrap: balance; }

/* Los nombres en línea, separados por un punto dorado. En pastillas parecían filtros
   de una tienda; así parecen un índice — y son una pieza en vez de cuatro. */
.kit__aromas {
	margin: 1.4rem 0 0; font-size: .86rem; letter-spacing: .04em;
	color: var(--tinta-suave);
}

/* El precio y el botón comparten línea base: es el cierre comercial del bloque y
   funciona mejor junto que como dos piezas apiladas. El filete los separa del texto. */
.kit__cierre {
	display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem;
	margin-top: 1.6rem; padding-top: 1.6rem;
	border-top: 1px solid rgba(31, 58, 50, .16);
}
.kit__precio {
	margin: 0; font-family: var(--serif);
	font-size: 1.75rem; line-height: 1; font-weight: 600; color: var(--tinta);
}

/* Mientras el kit sea propuesta, el botón se ve pero no lleva a ningún lado: un botón
   que no lleva a nada es peor que ninguno. */
.boton-oro--muestra { cursor: default; }

@media (min-width: 46rem) {
	/* ⚠️ La foto toca ARRIBA, ABAJO y la DERECHA de la sección. Sangrando solo por un
	   lado quedaba flotando: ni su borde superior ni el inferior coincidían con nada, y
	   eso se lee como descuido aunque sea deliberado. Tocando tres bordes deja de ser un
	   rectángulo suelto y es un panel.

	   Se consigue quitándole el relleno vertical a la SECCIÓN y dándoselo al texto: así
	   la fila la marca el texto y la foto estira hasta llenarla. Sin posicionamiento
	   absoluto — con `absolute` la foto se montaba encima del texto en cuanto la
	   pantalla se estrechaba. */
	.kit { padding: 0; }
	.kit .seccion__inner { max-width: 68rem; }
	.kit__grid { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: stretch; }
	.kit__texto { align-self: center; padding: 5rem 0; }
	.kit__foto { margin-right: calc(50% - 50vw); }
	.kit__foto img {
		width: 100%; height: 100%; aspect-ratio: auto;
		object-fit: cover; object-position: 42% center; border-radius: 0;
	}
}

/* La salida del hero para quien no se decide. Discreta: quien ya se convenció no la
   mira, y quien duda encuentra un camino que no es cerrar la pestaña. */
.kit-enlace { margin: .9rem 0 0; font-size: .82rem; color: var(--tinta-suave); }
.kit-enlace a { color: var(--acento); text-decoration: none; font-weight: 600; white-space: nowrap; }
.kit-enlace a:hover { text-decoration: underline; text-underline-offset: 2px; }
#kit { scroll-margin-top: 4.5rem; }
@media (min-width: 46rem) { #kit { scroll-margin-top: 7rem; } }

/* ── Cómo se usa ─────────────────────────────────────────────────────────────
   ⚠️ Cuatro datos arriba y tres pasos abajo se veían DESALINEADOS, y el problema no
   era la alineación: era que las dos filas parecían el mismo sistema con distinto
   número de columnas, y eso se lee como tabla rota.

   La solución no es cuadrar las columnas —no hay un cuarto paso que inventar— sino que
   se lean como DOS SISTEMAS DISTINTOS. Arriba, datos: etiqueta chica, icono, dato.
   Abajo, una secuencia: numerales grandes en serif, centrados, unidos por un filete
   dorado. Ya nadie espera que cuadren, porque no son lo mismo. */

/* Los pasos ya no cuelgan de la ficha técnica: son su propia sección, así que ni
   filete de separación ni sangría heredada. */
.uso-sec { padding-block: 2.8rem; }
.eyebrow--centro { text-align: center; }
.uso {
	list-style: none; margin: 1.8rem 0 0; padding: 0;
	display: grid; gap: 1.6rem;
	counter-reset: paso;
}
.uso__paso { display: grid; gap: .45rem; position: relative; }
.uso__n {
	font-family: var(--serif); font-size: 1.85rem; line-height: 1;
	font-weight: 600; color: var(--oro);
}
.uso__txt { font-size: .88rem; line-height: 1.5; color: var(--tinta-suave); max-width: 30ch; }
.uso__txt strong { display: block; color: var(--tinta); font-weight: 600; font-size: .95rem; margin-bottom: .1rem; }

@media (min-width: 46rem) {
	.uso { grid-template-columns: repeat(3, 1fr); gap: 3rem; text-align: center; }
	.uso__paso { justify-items: center; }
	.uso__txt { margin-inline: auto; }

	/* El filete que enhebra los tres pasos: los vuelve una secuencia y no tres
	   columnas sueltas. Se corta antes del último para no salirse del bloque. */
	.uso__paso:not(:last-child)::after {
		content: ""; position: absolute; top: .9rem; left: calc(50% + 1.6rem); right: -3rem;
		height: 1px; background: linear-gradient(90deg, rgba(217, 171, 95, .45), rgba(217, 171, 95, .12));
	}
}

/* ═══ LA PORTADA ═══════════════════════════════════════════════════════════════
   Reutiliza el sistema de secciones de la ficha —.seccion, .seccion__inner, los
   fondos, el eyebrow dorado— y solo añade lo suyo. Eso es lo que permitió levantarla
   en un día: el header, el pie, la tienda, el cajón y el WhatsApp ya existían. */

/* ── El hero: foto a sangre, velo y texto encima ───────────────────────────────
   Antes era texto | foto en dos columnas. Funcionaba pero no impactaba: dos bloques
   del mismo peso compitiendo y ninguno mandando. El impacto está en la escala. */

.hero-portada {
	position: relative; isolation: isolate;
	display: grid; align-items: end;
	min-height: min(78svh, 34rem);
	overflow: hidden; background: var(--verde);
}
.hero-portada__fondo, .hero-portada__fondo img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; display: block; z-index: -2;
}

/* El velo NO es decoración: la foto tiene orquídeas claras y latón brillante justo
   donde cae el texto. Más denso abajo y a la izquierda, abierto a la derecha para
   que la tienda se siga viendo. */
.hero-portada__velo {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(to top, rgba(8, 14, 12, .88) 0%, rgba(8, 14, 12, .55) 42%, rgba(8, 14, 12, .18) 100%),
		linear-gradient(to right, rgba(8, 14, 12, .62) 0%, rgba(8, 14, 12, .12) 62%, rgba(8, 14, 12, 0) 100%);
}

.hero-portada__inner { max-width: 68rem; width: 100%; margin: 0 auto; padding: 2.6rem 1.15rem; }
.hero-portada__texto { max-width: 34rem; color: #fff; }

.hero-portada__eyebrow {
	margin: 0 0 .9rem; font-size: .64rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .22em; color: var(--oro);
}
.hero-portada__titulo {
	margin: 0; font-family: var(--serif);
	font-size: clamp(2.05rem, 8vw, 3.5rem); line-height: 1.05;
	font-weight: 500; letter-spacing: -.02em;
	text-wrap: balance;
}

/* El remate, con filete: el titular plantea y esta línea cierra. */
.hero-portada__sub {
	display: flex; align-items: center; gap: .9rem;
	margin: 1.1rem 0 0; font-family: var(--serif);
	font-size: clamp(1.05rem, 4vw, 1.4rem); font-weight: 500; color: var(--oro);
}
.hero-portada__sub::before {
	content: ""; width: 2.4rem; height: 1px; flex: none;
	background: var(--oro); opacity: .8;
}

.hero-portada__entrada {
	margin: 1.2rem 0 0; max-width: 30rem;
	font-size: .97rem; line-height: 1.6; color: rgba(255, 255, 255, .8);
}
.hero-portada__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 1.9rem; }
.hero-portada__liga {
	color: #fff; font-size: .88rem; font-weight: 600; text-decoration: none;
	border-bottom: 1px solid rgba(217, 171, 95, .75); padding-bottom: .2rem;
}
.hero-portada__liga:hover { color: var(--oro); }

@media (min-width: 46rem) {
	.hero-portada { min-height: min(80svh, 41rem); }
	.hero-portada__inner { padding: 3.4rem 1.15rem; }
}

/* ── Las fragancias elegidas a mano ────────────────────────────────────────── */

.aromas__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }

/* Filas `auto 1fr`: las tarjetas de una fila miden lo mismo, y el alto que le sobra a
   la de menos texto va al cuerpo. Sin esto el grid lo repartía también a la fila de
   la foto, que crecía y enseñaba una franja de fondo bajo la imagen. */
.aroma__liga {
	display: grid; grid-template-rows: auto 1fr; gap: .9rem; height: 100%;
	text-decoration: none; color: inherit;
	padding: .9rem .9rem 1.1rem; border-radius: .4rem;
	background: var(--papel); border: 1px solid var(--linea);
	transition: border-color .25s, box-shadow .25s, transform .25s;
}
.aroma__liga:hover {
	border-color: rgba(217, 171, 95, .55); transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(31, 58, 50, .1);
}

.aroma__foto { position: relative; display: block; background: var(--crema-suave); border-radius: .3rem; overflow: hidden; }
.aroma__foto img { width: 100%; height: auto; display: block; aspect-ratio: 1; object-fit: cover; }
.aroma__sello {
	position: absolute; left: .5rem; top: .5rem;
	padding: .24rem .55rem; border-radius: 1em;
	background: var(--oro); color: var(--negro);
	font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
}

.aroma__cuerpo { display: flex; flex-direction: column; gap: .3rem; }
.aroma__nombre { font-family: var(--serif); font-size: 1.22rem; font-weight: 600; line-height: 1.15; }
.aroma__linea { font-size: .86rem; color: var(--tinta-suave); line-height: 1.45; }

/* El «inspirado en» es lo que traduce el aroma —y el precio— a algo ya conocido. */
.aroma__inspirado {
	margin: .35rem 0 .75rem; font-size: .72rem; letter-spacing: .04em;
	text-transform: uppercase; color: var(--tinta-suave);
}
.aroma__inspirado em { font-style: normal; font-weight: 600; color: var(--acento); }

.aroma__pie {
	display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
	margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--linea);
}
.aroma__precio { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; }
.aroma__precio del { opacity: .45; font-size: .85em; font-weight: 500; margin-right: .3rem; }
.aroma__precio ins { text-decoration: none; }
.aroma__agotado { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-suave); }

/* Dos columnas desde el celular: cinco tarjetas apiladas a una columna son cinco
   pantallas de scroll y nadie compara nada. En dos, se ven juntas y se eligen.
   Con un número impar, la última no se queda huérfana a media fila: ocupa el ancho
   y se acuesta —foto a la izquierda, texto a la derecha—. */
.aromas__lista { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 59.99rem) {
	.aroma:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.aroma:last-child:nth-child(odd) .aroma__liga { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto; align-items: center; }
}
/* Cuatro columnas desde el 2026-10-20: ocho tarjetas cierran dos filas (antes, cinco en una). */
@media (min-width: 60rem) { .aromas__lista { grid-template-columns: repeat(4, 1fr); gap: 1.4rem; } }
.aromas__mas { margin: 2.2rem 0 0; text-align: center; }
.aromas__mas .cta { display: inline-flex; width: auto; padding: .95rem 1.8rem; }

/* ── El testimonio que contesta el precio ──────────────────────────────────── */

.testimonio__cuadro { margin: 0; text-align: center; }
.testimonio__cita {
	margin: 0; font-family: var(--serif);
	font-size: clamp(1.25rem, 4.6vw, 1.7rem); line-height: 1.38; font-weight: 500;
	letter-spacing: -.005em;
}
.testimonio__firma { margin-top: 1.5rem; display: grid; gap: .1rem; font-size: .84rem; }
.testimonio__firma strong { font-weight: 600; }
.testimonio__firma span { color: var(--tinta-suave); }

/* ── El resto del catálogo: renglones, no tarjetas ─────────────────────────── */

.categorias__lista { list-style: none; margin: 0; padding: 0; display: grid; }
.categoria { border-top: 1px solid var(--linea); }
.categoria:last-child { border-bottom: 1px solid var(--linea); }
.categoria a {
	display: flex; align-items: baseline; gap: .9rem;
	padding: 1.05rem .2rem; text-decoration: none; color: inherit;
}
.categoria a:hover .categoria__nombre { color: var(--acento); }
.categoria__nombre { font-family: var(--serif); font-size: 1.14rem; font-weight: 600; transition: color .2s; }
.categoria__nota { flex: 1; font-size: .85rem; color: var(--tinta-suave); }
.categoria__flecha { color: var(--oro); }

/* ── La credencial de Liverpool ────────────────────────────────────────────────
   El fondo es el negro EXACTO del banner original, muestreado del archivo, para que
   el lockup recortado no enseñe su rectángulo. */

.liverpool { background: #060805; color: #f1ece4; padding: 2.2rem 1.15rem; }
.liverpool__inner { max-width: 44rem; margin: 0 auto; text-align: center; display: grid; justify-items: center; gap: .85rem; }
.liverpool__intro {
	margin: 0; font-size: .68rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .24em; color: var(--oro);
}
.liverpool__lockup { width: min(100%, 23rem); height: auto; display: block; }
.liverpool__texto { margin: 0; font-size: .9rem; color: rgba(241, 236, 228, .68); }
/* Filete dorado sobre el negro del banner: es una salida a otra tienda, así que no compite
   con los botones dorados sólidos de compra de la página. */
.liverpool__boton {
	margin-top: .4rem; display: inline-flex; align-items: center; gap: .45rem;
	padding: .7rem 1.3rem; border-radius: .4rem; border: 1px solid rgba(217, 171, 95, .7);
	color: var(--oro); font-size: .86rem; font-weight: 600; text-decoration: none;
	transition: background .3s, color .3s;
}
.liverpool__boton:hover, .liverpool__boton:focus-visible { background: var(--oro); color: #060805; }

@media (min-width: 46rem) {
	.liverpool { padding-block: 2.8rem; }
	.liverpool__lockup { width: 27rem; }
}

/* ── Los recorridos por la tienda ──────────────────────────────────────────────
   Van dentro del bloque verde del local: la foto enseña el lugar y el video lo
   recorre, así que pertenecen a la misma prueba y no a una sección aparte. */

.local__medios { display: grid; gap: 1rem; }
.local__videos {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
}
.local__video { display: grid; grid-template-rows: 1fr auto; gap: .55rem; }
.local__video .video__pieza {
	width: 100%; aspect-ratio: 9 / 16; display: block;
	border-radius: .4rem; background: #000; object-fit: cover;
}
.local__video-pie { margin: 0; font-size: .8rem; color: var(--sobre-verde-tenue); }

@media (min-width: 46rem) {
	/* Fotos a la izquierda, videos a la derecha, y los dos bloques ESTIRADOS a la
	   misma altura: eso es lo que hace que el conjunto se lea como una composición
	   y no como dos cosas apiladas.

	   ⚠️ Solo con videos. En la ficha no los hay, y con estas columnas las fotos se
	   encogían a la izquierda junto a media sección de verde vacío. Sin videos, las
	   fotos toman todo el ancho con su propio acomodo (`.local__fotos`, más arriba). */
	.local__medios--videos { grid-template-columns: 1.5fr 1fr; gap: 1.2rem; align-items: stretch; }
	.local__videos { gap: .9rem; }
	.local__video .video__pieza { aspect-ratio: auto; height: 100%; }
}

/* ── La oferta, al final, con su banner y fecha real ───────────────────────── */

/* La promo en la franja de arriba: mismo tono que el resto de la barra, con el oro
   como única diferencia. Grita y deja de ser una franja de valor. */
.franja__promo a { color: var(--oro); font-weight: 600; text-decoration: none; }
.franja__promo a:hover { text-decoration: underline; }

.oferta__cuantos {
	margin: 1.1rem 0 0; font-size: .86rem; color: var(--sobre-verde-tenue);
}
/* ⚠️ La oferta subió al tercer bloque y tiene que ganarse ese lugar. El banner va con
   filete de oro y halo: sobre el verde institucional, un JPEG claro a secas se ve
   pegado encima; con el halo se integra y además se lee como algo encendido. */
.oferta__banner {
	position: relative; display: block; border-radius: .4rem; overflow: hidden;
	box-shadow:
		0 0 0 1px rgba(217, 171, 95, .5),
		0 0 60px rgba(217, 171, 95, .16),
		0 22px 54px rgba(6, 12, 9, .42);
	transition: box-shadow .45s ease;
}
.oferta__banner:hover {
	box-shadow:
		0 0 0 1px rgba(217, 171, 95, .85),
		0 0 78px rgba(217, 171, 95, .28),
		0 26px 60px rgba(6, 12, 9, .48);
}
.oferta__banner img { width: 100%; height: auto; display: block; }
.oferta__pie {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 1.2rem; margin-top: 1.6rem;
}
/* El reloj: cifras en celdas, no una cadena corrida. «7d 08:28:23» se lee como el
   contador de un plugin; en celdas con su unidad debajo se lee como parte del diseño. */
.reloj { display: grid; gap: .85rem; }
.reloj__pre {
	display: flex; align-items: center; gap: .55rem;
	margin: 0; font-size: .68rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .2em; color: var(--oro);
}

/* El punto en vivo. Es la única animación en bucle de la página y se gana el permiso:
   un contador SIN señal de que corre parece una fecha impresa. Muy sutil y lenta. */
.reloj__punto {
	width: .4rem; height: .4rem; border-radius: 50%; flex: none;
	background: var(--oro); box-shadow: 0 0 0 0 rgba(217, 171, 95, .6);
	animation: latir 2.6s ease-out infinite;
}
@keyframes latir {
	0%   { box-shadow: 0 0 0 0 rgba(217, 171, 95, .55); }
	70%  { box-shadow: 0 0 0 .55rem rgba(217, 171, 95, 0); }
	100% { box-shadow: 0 0 0 0 rgba(217, 171, 95, 0); }
}

.reloj__celdas { display: flex; gap: .55rem; }
.reloj__celda {
	position: relative; display: grid; justify-items: center; gap: .2rem;
	min-width: 4rem; padding: .7rem .4rem .55rem;
	border-radius: .4rem;
	border: 1px solid rgba(217, 171, 95, .42);
	background:
		linear-gradient(180deg, rgba(217, 171, 95, .13), rgba(6, 8, 5, .34) 62%);
	/* El glow: por dentro un filo de luz, por fuera un halo cálido. Es lo que separa
	   un contador de oferta de una tabla de datos. */
	box-shadow:
		inset 0 1px 0 rgba(217, 171, 95, .28),
		0 0 22px rgba(217, 171, 95, .16);
}
.reloj__cifra {
	font-family: var(--serif); font-size: 1.85rem; line-height: 1;
	font-weight: 600; color: var(--oro);
	text-shadow: 0 0 18px rgba(217, 171, 95, .35);
	/* Tabulares: sin esto el ancho baila cada segundo y el ojo lo persigue. */
	font-variant-numeric: tabular-nums;
}
.reloj__unidad {
	font-size: .56rem; text-transform: uppercase; letter-spacing: .14em;
	color: var(--sobre-verde-tenue);
}

@media (prefers-reduced-motion: reduce) {
	.reloj__punto { animation: none; }
}

/* ── El mosaico de categorías ──────────────────────────────────────────────────
   Antes eran cuatro renglones de texto con flecha y se leían como párrafos. En una
   marca que vende por deseo visual, manda la foto. */

.mosaico {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem;
}
.mosaico__pieza--alta { grid-row: span 2; }
.mosaico__pieza--ancha { grid-column: span 2; }

.mosaico__liga {
	position: relative; display: block; height: 100%; min-height: 9rem;
	border-radius: .4rem; overflow: hidden; text-decoration: none; color: #fff;
}
.mosaico__foto {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; display: block;
	transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.mosaico__liga:hover .mosaico__foto { transform: scale(1.04); }

/* Sin velo el texto blanco no se lee: estas cuatro fotos son claras. */
.mosaico__velo {
	position: absolute; inset: 0;
	/* Sube hasta .84 por la foto de los difusores: es casi blanca justo donde va el
	   texto, y con un velo más suave el nombre no se leía. */
	background: linear-gradient(to top, rgba(6, 8, 5, .84) 0%, rgba(6, 8, 5, .42) 42%, rgba(6, 8, 5, 0) 74%);
}
.mosaico__texto { position: absolute; left: 1rem; right: 1rem; bottom: .95rem; display: grid; gap: .1rem; }
.mosaico__nombre { font-family: var(--serif); font-size: 1.16rem; font-weight: 600; line-height: 1.15; }
.mosaico__nota { font-size: .78rem; color: rgba(255, 255, 255, .78); line-height: 1.35; }

@media (min-width: 46rem) {
	.mosaico { grid-template-columns: repeat(4, 1fr); gap: .9rem; grid-auto-rows: 11.5rem; }
	.mosaico__pieza--alta { grid-column: span 2; grid-row: span 2; }
	.mosaico__pieza--ancha { grid-column: span 2; }
	.mosaico__nombre { font-size: 1.32rem; }
}

/* ═══ Los cinco bloques nuevos de la portada ═══════════════════════════════════ */

/* ── ¿Dónde quieres que huela? ─────────────────────────────────────────────────
   Un índice editorial, no una parrilla de tarjetas. Cada renglón lleva LA FOTO DEL
   ESPACIO, que es el punto entero de la sección: aquí el visitante no está imaginando
   el olor, está imaginando SU CASA. Hubo una versión con la firma olfativa detrás del
   renglón y contestaba la pregunta equivocada — sin la imagen del lugar, «La entrada»
   son dos palabras. */

.espacios__lista { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; }
.espacio { border-top: 1px solid var(--linea); }
.espacio:last-child { border-bottom: 1px solid var(--linea); }

.espacio__liga {
	display: grid; grid-template-columns: 6rem auto minmax(0, 1fr);
	align-items: center; gap: .3rem 1rem; padding: 1.1rem .2rem;
	text-decoration: none; color: inherit; transition: background .3s;
}
.espacio__liga:hover { background: rgba(217, 171, 95, .07); }

.espacio__foto {
	grid-row: 1 / 3; display: block; border-radius: .4rem;
	overflow: hidden; background: var(--crema);
}
.espacio__foto img {
	width: 100%; height: 100%; display: block;
	aspect-ratio: 1; object-fit: cover;
	transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.espacio__liga:hover .espacio__foto img { transform: scale(1.05); }

/* El numeral convierte cuatro renglones en una secuencia: el ojo entiende que hay un
   recorrido y no una lista de opciones sueltas. */
.espacio__n {
	grid-row: 1 / 3; align-self: center;
	font-family: var(--serif); font-size: .92rem; font-weight: 600; color: var(--oro);
}
.espacio__cuerpo { display: grid; gap: .25rem; }

/* La escala es lo que impide que esto sea un pie de página. */
.espacio__donde {
	font-family: var(--serif); font-size: clamp(1.3rem, 5vw, 1.9rem);
	line-height: 1.1; font-weight: 500; letter-spacing: -.01em;
}
.espacio__porque { font-size: .86rem; line-height: 1.5; color: var(--tinta-suave); max-width: 34ch; }

.espacio__aroma { grid-column: 2 / -1; display: flex; align-items: baseline; gap: .5rem; margin-top: .45rem; }
.espacio__etiqueta {
	font-size: .58rem; font-weight: 600; text-transform: uppercase;
	letter-spacing: .18em; color: var(--tinta-suave);
}
.espacio__nombre {
	font-size: .94rem; font-weight: 600; color: var(--acento);
	border-bottom: 1px solid rgba(217, 171, 95, .5); padding-bottom: .12rem;
}
.espacio__liga:hover .espacio__nombre { border-bottom-color: var(--oro); }

@media (min-width: 46rem) {
	/* La foto crece y el renglón respira: es lo que separa un índice editorial de una
	   lista con iconitos. */
	.espacio__liga {
		grid-template-columns: 13rem auto minmax(0, 1fr) 14rem;
		gap: 2.2rem; padding-block: 1.2rem;
	}
	.espacio__foto { grid-row: auto; }
	.espacio__foto img { aspect-ratio: 4 / 3; }
	.espacio__n { grid-row: auto; }
	.espacio__porque { max-width: 42ch; }
	.espacio__aroma { grid-column: auto; margin-top: 0; justify-content: flex-end; }
}

/* La garantía, ya dentro del bloque del kit. */
.kit__garantia {
	margin: 1.4rem 0 0; padding: .95rem 1.1rem;
	border: 1px solid rgba(31, 58, 50, .16); border-radius: .4rem;
	background: rgba(31, 58, 50, .035);
	font-size: .84rem; line-height: 1.55; color: var(--tinta-suave);
}
.kit__garantia strong { display: block; color: var(--tinta); font-weight: 600; margin-bottom: .15rem; }
.kit__garantia a { color: var(--acento); font-weight: 600; text-decoration: none; white-space: nowrap; }
.kit__garantia a:hover { text-decoration: underline; }

/* ── Los difusores: el techo del catálogo ──────────────────────────────────── */

.difusores__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.difusor__liga { display: grid; gap: .5rem; text-decoration: none; color: inherit; }
.difusor__foto { display: block; border-radius: .4rem; overflow: hidden; background: rgba(255, 255, 255, .06); }
.difusor__foto img { width: 100%; height: auto; display: block; aspect-ratio: 1; object-fit: cover; }
.difusor__nombre { font-size: .85rem; line-height: 1.3; color: var(--sobre-verde); }
.difusor__precio { font-family: var(--serif); font-size: 1.02rem; font-weight: 600; color: var(--oro); }
.difusor__precio del { opacity: .5; font-size: .82em; margin-right: .25rem; }
.difusor__precio ins { text-decoration: none; }
.difusores__boton { margin-top: 1.8rem; }

@media (min-width: 46rem) {
	.difusores__lista { gap: 1.6rem; max-width: 44rem; }
	.difusor__nombre { font-size: .95rem; }
	.difusor__precio { font-size: 1.2rem; }
}

/* ── Para regalar ──────────────────────────────────────────────────────────── */

.regalo { padding-block: 0; }
.regalo__inner { display: grid; gap: 0; max-width: none; padding: 0; }
.regalo__texto { padding: 3rem 1.15rem; max-width: 68rem; margin: 0 auto; width: 100%; }
.regalo__foto { width: 100%; height: 100%; max-height: 26rem; object-fit: cover; display: block; }
.regalo__cierre { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 1.8rem; }
.regalo__desde { margin: 0; font-family: var(--serif); font-size: 1.5rem; line-height: 1; font-weight: 600; }

@media (min-width: 46rem) {
	/* La foto llega al borde de la pantalla: el regalo es lo más «producto de tienda»
	   de la página y aguanta el encuadre grande. */
	.regalo__inner { grid-template-columns: 1fr 1fr; align-items: stretch; }
	.regalo__texto { padding: 4rem 3rem; margin: 0 0 0 auto; max-width: 34rem; align-content: center; }
	/* ⚠️ Con tope de altura. La foto es 1000×1779 —muy vertical— y sin tope la fila
	   entera medía 71rem: el texto quedaba arriba y debajo colgaba media pantalla de
	   crema vacía. El tope la recorta y el texto se centra contra ella. */
	.regalo__foto { max-height: 30rem; }
}

/* ═══ «¿Cuál es el tuyo?» — la línea, lado a lado ══════════════════════════════
   Renglones con filete, no tarjetas: aquí se compara, no se elige una opción de
   compra. La fragancia actual lleva el filete dorado a la izquierda y no es enlace.
   Sobre papel: viene del verde de la tienda y sigue el crema del kit. */

.comparar__grid { display: grid; gap: 2.4rem; }

/* En celular la lista va PRIMERO: es la respuesta a «¿cuál es el tuyo?». La infografía,
   con su letra chica, es el detalle para quien quiere más, y abierta se lee entera. */
.comparar__ficha { display: block; position: relative; text-decoration: none; order: 2; }
.comparar__ficha img { width: 100%; height: auto; border-radius: .4rem; box-shadow: 0 18px 44px rgba(4, 3, 0, .18); }
.comparar__ampliar {
	display: inline-block; margin-top: .7rem; font-size: .8rem; font-weight: 600;
	color: var(--acento); border-bottom: 1px solid rgba(154, 116, 52, .4);
}

.comparar__lista { list-style: none; margin: 0; padding: 0; display: grid; }
.fragancia { border-top: 1px solid var(--linea); }
.fragancia:last-child { border-bottom: 1px solid var(--linea); }

.fragancia__liga {
	display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto;
	align-items: center; gap: 1rem; padding: 1.1rem .6rem 1.1rem .8rem;
	color: inherit; text-decoration: none; transition: background .25s;
}
a.fragancia__liga:hover { background: rgba(217, 171, 95, .07); }
.fragancia--actual .fragancia__liga { background: var(--crema-suave); box-shadow: inset 3px 0 0 var(--oro); }

.fragancia__foto { width: 4.2rem; height: 4.2rem; object-fit: cover; border-radius: .3rem; }
.fragancia__cuerpo { display: grid; gap: .18rem; }
.fragancia__familia { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--acento); }
.fragancia__nombre { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; line-height: 1.15; }
.fragancia__nombre em {
	margin-left: .45rem; padding: .1rem .45rem; border-radius: 1em; vertical-align: .2em;
	background: var(--verde); color: var(--sobre-verde);
	font: 600 .56rem/1.4 ui-sans-serif, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .1em;
}
.fragancia__frase { font-size: .84rem; line-height: 1.45; color: var(--tinta-suave); }
.fragancia__notas { font-size: .74rem; letter-spacing: .03em; color: var(--tinta-tenue); }

.fragancia__pie { display: grid; justify-items: end; gap: .2rem; text-align: right; }
.fragancia__precio { font-size: .88rem; font-weight: 600; white-space: nowrap; }
.fragancia__precio del { display: block; font-size: .78em; font-weight: 400; color: var(--tinta-tenue); }
.fragancia__precio ins { text-decoration: none; }
.fragancia__ver { color: var(--oro); font-size: 1.1rem; }
.fragancia__agotado { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-tenue); }

/* ── El resto de la colección, en carrusel (2026-10-20) ─────────────────────────
   Scroll horizontal con snap: se desliza con el dedo sin JavaScript. Las cartas no
   llevan caja ni sombra —solo la foto y el texto, como los renglones de arriba—: se
   exploran, no se eligen. La siguiente asoma por la derecha para que se vea que hay más. */

.carrusel { margin-top: 3rem; }
.carrusel__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.carrusel__titulo { margin: 0; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; line-height: 1.2; }
.carrusel__flechas { display: none; gap: .4rem; }
.carrusel__flecha {
	width: 2.4rem; height: 2.4rem; border: 1px solid var(--linea); border-radius: 50%;
	background: var(--papel); color: var(--tinta); font-size: 1rem; cursor: pointer;
	transition: border-color .2s, opacity .2s;
}
.carrusel__flecha:hover:not(:disabled) { border-color: var(--oro); }
.carrusel__flecha:disabled { opacity: .35; cursor: default; }

/* ⚠️ `position: relative` NO es decorativo. El precio de Woo trae un texto para lectores de
   pantalla («El precio original era…») con `position: absolute`; dentro de un scroll SIN
   posicionar, un absoluto se escapa del recorte y se queda en su sitio original —la
   última carta vive a ~2,000 px a la derecha— y ensanchaba la página entera en celular
   (2026-10-20: 375 px de pantalla, 883 de documento). */
.carrusel__pista {
	position: relative;
	display: grid; grid-auto-flow: column; grid-auto-columns: 72%; column-gap: 1rem;
	margin: 0 -1.15rem; padding: 0 1.15rem .4rem; list-style: none;
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scroll-padding-inline: 1.15rem; scrollbar-width: none;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; }

.carta { scroll-snap-align: start; }
.carta__liga { display: grid; gap: .28rem; color: inherit; text-decoration: none; }
.carta__foto { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; border-radius: .35rem; margin-bottom: .55rem; transition: opacity .25s; }
.carta__liga:hover .carta__foto { opacity: .88; }
.carta__familia { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--acento); }
.carta__nombre { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; line-height: 1.15; }
.carta__frase { font-size: .82rem; line-height: 1.45; color: var(--tinta-suave); }
.carta__notas { font-size: .72rem; letter-spacing: .03em; color: var(--tinta-tenue); }
.carta__precio { margin-top: .3rem; font-size: .88rem; font-weight: 600; }
.carta__precio del { font-weight: 400; color: var(--tinta-tenue); margin-right: .3rem; }
.carta__precio ins { text-decoration: none; }

.carrusel__pista-txt { margin: .7rem 0 0; font-size: .74rem; color: var(--tinta-tenue); }
.carrusel--quieto .carrusel__pista-txt { display: none; }

@media (min-width: 46rem) {
	.carrusel__flechas { display: flex; }
	.carrusel--quieto .carrusel__flechas { display: none; }
	.carrusel__pista { grid-auto-columns: calc((100% - 3 * 1.4rem) / 4); column-gap: 1.4rem; margin: 0; padding: 0 0 .4rem; scroll-padding-inline: 0; }
	.carrusel__pista-txt { display: none; }
}

@media (min-width: 46rem) {
	/* La infografía a la izquierda, a su tamaño de lectura; la lista manda a lo ancho. */
	.comparar__grid { grid-template-columns: 22rem minmax(0, 1fr); gap: 4rem; align-items: center; }
	.comparar__ficha { order: 0; }
	.fragancia__liga { grid-template-columns: 5.4rem minmax(0, 1fr) auto; gap: 1.5rem; padding: 1.3rem 1.2rem 1.3rem 1.4rem; }
	.fragancia__foto { width: 5.4rem; height: 5.4rem; }
	.fragancia__nombre { font-size: 1.4rem; }

	/* Sin infografía (2026-11-03): las cercanas en fila, una columna cada una, separadas
	   por un filete y no por cajas. La actual se marca arriba, con la barra dorada. */
	.comparar__grid--fila { grid-template-columns: minmax(0, 1fr); }
	.comparar__grid--fila .comparar__lista { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); border-block: 1px solid var(--linea); }
	.comparar__grid--fila .fragancia { border: 0; }
	.comparar__grid--fila .fragancia + .fragancia { border-left: 1px solid var(--linea); }
	.comparar__grid--fila .fragancia__liga {
		grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start;
		gap: 1rem; height: 100%; padding: 1.6rem 1.4rem 1.5rem;
	}
	.comparar__grid--fila .fragancia--actual .fragancia__liga { box-shadow: inset 0 3px 0 var(--oro); }
	.comparar__grid--fila .fragancia__foto { width: 100%; height: auto; aspect-ratio: 1; }
	.comparar__grid--fila .fragancia__nombre em { display: table; margin: .45rem 0 0; white-space: nowrap; }
	.comparar__grid--fila .fragancia__pie { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; text-align: left; margin-top: auto; }
	.comparar__grid--fila .fragancia__precio del { display: inline; margin-right: .35rem; }
}

/* ═══ LAS PÁGINAS PROPIAS: «Nosotros» y «Cambios y garantías» ═══════════════════
   Mismo sistema que la ficha y la home —secciones a todo el ancho, eyebrow dorado,
   serif para los títulos—. Solo se agrega lo que estas dos páginas tienen de suyo. */

/* ── El hero de «Nosotros»: texto y fachada ────────────────────────────────── */

.presenta { background: var(--verde); color: var(--sobre-verde); overflow: hidden; }
.presenta__inner { display: grid; }
.presenta__foto { margin: 0; order: -1; }
/* Arriba del todo: el letrero «DOKAN» de la fachada es lo que dice dónde estás. */
.presenta__foto img { width: 100%; height: 22rem; object-fit: cover; object-position: center top; }
.presenta__texto { padding: 2.4rem 1.15rem 3rem; }
.presenta .eyebrow { color: var(--oro); }
.presenta__titulo {
	margin: 0; font-family: var(--serif); font-weight: 500;
	font-size: clamp(2.2rem, 8.5vw, 3.6rem); line-height: 1.04; letter-spacing: -.02em;
	text-wrap: balance;
}
.presenta__entrada { margin: 1.3rem 0 0; max-width: 30rem; font-size: 1rem; line-height: 1.6; color: var(--sobre-verde-tenue); }
/* El lema, con el filete del hero de la portada: es la misma voz de marca. */
.presenta__lema {
	display: flex; align-items: center; gap: .9rem; margin: 1.6rem 0 0;
	font-family: var(--serif); font-size: clamp(1.05rem, 3.8vw, 1.3rem); color: var(--oro);
}
.presenta__lema::before { content: ""; width: 2.4rem; height: 1px; flex: none; background: var(--oro); opacity: .8; }

@media (min-width: 46rem) {
	/* La foto toca arriba, abajo y la derecha: como el kit, es panel y no recuadro. */
	/* ⚠️ La altura la manda la FOTO, recortada a cuadrado, con tope de 38rem. La fachada
	   es vertical: a su proporción natural la fila medía casi 1,000 px —dos pantallas—, y
	   con la altura del texto quedaba en 480 y se sentía apretado. El cuadrado da aire
	   sin volver a crecer, y el tope evita que en un monitor grande se dispare. */
	.presenta__inner { grid-template-columns: 1.1fr 1fr; max-width: 68rem; margin: 0 auto; }
	.presenta__texto { align-self: center; padding: 3rem 3.5rem 3rem 1.5rem; }
	/* La celda de la foto mide media pantalla de ancho (llega al borde), así que `54vw`
	   de alto es un casi-cuadrado, un poco vertical para que quepan letrero y puerta. Con `aspect-ratio` + tope, el navegador encogía también el
	   ANCHO y en pantallas grandes la foto dejaba de tocar el borde derecho. */
	.presenta__foto { order: 0; position: relative; margin-right: calc(50% - 50vw); height: min(54vw, 46rem); }
	/* El letrero va arriba y la puerta al 70% de la foto: 12% deja ver los dos. */
	.presenta__foto img { position: absolute; inset: 0; height: 100%; object-position: center 12%; }
}

/* ── La historia ───────────────────────────────────────────────────────────── */

.historia__grid { display: grid; gap: 2.4rem; }
.historia__cifra {
	margin: 0 0 .4rem; font-family: var(--serif); font-weight: 500; line-height: .9;
	font-size: clamp(4.5rem, 20vw, 8rem); color: var(--oro); letter-spacing: -.03em;
}
.historia__p { margin: 1rem 0 0; font-size: .98rem; line-height: 1.7; color: var(--tinta-suave); max-width: 34rem; }
.historia__foto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: .4rem; }

.historia__datos {
	margin: 3rem 0 0; padding-top: 1.8rem; border-top: 1px solid var(--linea);
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem;
}
.historia__datos dt { font-size: .62rem; text-transform: uppercase; letter-spacing: .15em; color: var(--tinta-tenue); }
.historia__datos dd { margin: .15rem 0 0; font-family: var(--serif); font-size: 1.45rem; font-weight: 600; }

@media (min-width: 46rem) {
	.historia__grid { grid-template-columns: 1.25fr 1fr; gap: 5rem; align-items: center; }
	.historia__datos { grid-template-columns: repeat(4, 1fr); }
}

/* ── Los valores: manifiesto corto ─────────────────────────────────────────── */

.valores__lista { list-style: none; margin: 0; padding: 0; }
.valor {
	display: grid; grid-template-columns: 2.4rem 1fr; gap: .2rem 1rem;
	padding: 1.2rem 0; border-top: 1px solid rgba(31, 58, 50, .14);
}
.valor:last-child { border-bottom: 1px solid rgba(31, 58, 50, .14); }
.valor__n { grid-row: 1 / 3; font-family: var(--serif); font-size: .95rem; font-weight: 600; color: var(--acento); padding-top: .3rem; }
.valor__nombre { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; line-height: 1.2; }
.valor__linea { font-size: .9rem; line-height: 1.55; color: var(--tinta-suave); }

@media (min-width: 46rem) {
	.valor { grid-template-columns: 3rem 12rem 1fr; align-items: baseline; padding: 1.4rem 0; }
	.valor__n, .valor__nombre, .valor__linea { grid-row: auto; }
}

/* ── El resumen de la política (en «Nosotros» y en la página de la política) ─ */

.resumen-pol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.resumen-pol__item { border-top: 1px solid var(--linea); }
.resumen-pol__item:last-child { border-bottom: 1px solid var(--linea); }
.resumen-pol__liga {
	display: grid; gap: .2rem; padding: 1.1rem .2rem 1.1rem 1rem;
	color: inherit; text-decoration: none; position: relative;
	box-shadow: inset 2px 0 0 var(--oro); transition: background .25s;
}
.resumen-pol__liga:hover { background: rgba(217, 171, 95, .07); }
.resumen-pol__titulo { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.resumen-pol__texto { font-size: .9rem; color: var(--tinta-suave); line-height: 1.5; }
.respaldo__pie { margin: 2rem 0 0; }

@media (min-width: 46rem) {
	/* Cuatro columnas unidas por filetes: se leen de un golpe, como una ficha técnica. */
	.resumen-pol { grid-template-columns: repeat(4, 1fr); }
	.resumen-pol__item, .resumen-pol__item:last-child { border: 0; }
	.resumen-pol__liga { padding: .4rem 1.4rem .6rem; height: 100%; }
}

/* ── La página de la política ──────────────────────────────────────────────── */

.cabeza__titulo {
	margin: 0 0 1rem; font-family: var(--serif); font-weight: 500;
	font-size: clamp(2rem, 7vw, 3rem); line-height: 1.08; letter-spacing: -.01em; text-wrap: balance;
}

.resumen-sec { padding-block: 2.6rem; }

.politica-sec__grid { display: grid; gap: 2.4rem; }
.indice__lista { margin: 0; padding: 0 0 0 1.2rem; display: grid; gap: .45rem; font-size: .88rem; }
.indice__lista li::marker { color: var(--acento); font-weight: 600; }
.indice__lista a { color: var(--tinta-suave); text-decoration: none; }
.indice__lista a:hover { color: var(--acento); }

.politica { max-width: 42rem; }
.clausula { padding: 2rem 0; border-top: 1px solid var(--linea); scroll-margin-top: 5rem; }
.clausula:first-child { border-top: 0; padding-top: 0; }
.clausula__titulo {
	display: flex; align-items: baseline; gap: .8rem; margin: 0 0 1rem;
	font-family: var(--serif); font-size: 1.4rem; font-weight: 600; line-height: 1.2;
}
.clausula__n { font-size: .95rem; color: var(--acento); min-width: 1.4rem; }
.clausula__p { margin: 0 0 .9rem; font-size: .94rem; line-height: 1.7; color: var(--tinta-suave); }
.clausula__lista { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: .5rem; font-size: .92rem; line-height: 1.6; color: var(--tinta-suave); }
.clausula__lista li::marker { color: var(--oro); }
.politica__cierre {
	margin: 2.4rem 0 0; padding-top: 2rem; border-top: 1px solid var(--linea);
	font-family: var(--serif); font-size: 1.25rem; line-height: 1.45;
}


.contacto__inner { text-align: center; }
.contacto__acciones { display: grid; justify-items: center; gap: 1rem; margin-top: 1.8rem; }
/* `.boton-oro` trae `justify-self` propio (a la derecha en escritorio, por la tienda); aquí va al centro. */
.contacto__acciones .boton-oro { justify-self: center; }
.contacto__tel { color: var(--sobre-verde-tenue); font-size: .88rem; }

@media (min-width: 46rem) {
	/* El índice se queda pegado a la izquierda mientras se lee: es un texto largo y
	   saltar entre secciones es para lo que se viene aquí. */
	.politica-sec__grid { grid-template-columns: 15rem minmax(0, 1fr); gap: 4.5rem; align-items: start; }
	.indice { position: sticky; top: 8rem; }
	.clausula { scroll-margin-top: 8rem; }
}

/* ── «Contacto» ────────────────────────────────────────────────────────────── */

/* Los motivos: la única caja de la página, porque es lo único que se elige. */
.motivos { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.motivo {
	display: grid; gap: .3rem; height: 100%; padding: 1.2rem 1.25rem 1.1rem;
	border: 1px solid var(--linea); border-radius: .4rem; background: #fff;
	color: inherit; text-decoration: none;
	transition: border-color .25s, box-shadow .25s, transform .25s;
}
.motivo:hover, .motivo:focus-visible {
	border-color: rgba(217, 171, 95, .7); transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(31, 58, 50, .1);
}
.motivo__titulo { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.15; }
.motivo__para { font-size: .88rem; line-height: 1.5; color: var(--tinta-suave); }
.motivo__ir { margin-top: .5rem; font-size: .8rem; font-weight: 600; color: var(--acento); }

.otros {
	margin: 2.6rem 0 0; padding-top: 1.8rem; border-top: 1px solid var(--linea);
	display: grid; gap: 1.2rem;
}
.otros dt { font-size: .62rem; text-transform: uppercase; letter-spacing: .15em; color: var(--tinta-tenue); }
.otros dd { margin: .2rem 0 0; display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: 1rem; }
.otros a { color: var(--tinta); text-decoration-color: rgba(154, 116, 52, .45); text-underline-offset: 3px; }
.otros a:hover { color: var(--acento); }

.antes { padding-block: 2.6rem; }
.antes__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.antes__item { display: grid; gap: .2rem; align-content: start; padding-left: 1rem; box-shadow: inset 2px 0 0 var(--oro); }
.antes__item strong { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.antes__item span { font-size: .88rem; color: var(--tinta-suave); }
.antes__item .enlace-oro { margin-top: .2rem; }

@media (min-width: 46rem) {
	/* Cinco motivos: tres arriba y dos abajo a lo ancho. En tres columnas parejas la
	   segunda fila dejaba un hueco y se leía como si faltara uno. */
	.motivos { grid-template-columns: repeat(6, 1fr); gap: 1rem; }
	.motivos > li { grid-column: span 2; }
	.motivos > li:nth-child(n+4) { grid-column: span 3; }
	.otros { grid-template-columns: repeat(3, auto); justify-content: start; gap: 4rem; }
	.antes__lista { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

/* ── La promoción del hero: una barra que se desvanece ───────────────────────
   Va bajo el titular, en el lugar del remate. Rectangular y sin marco completo: un filete
   dorado a la izquierda y un velo dorado que se apaga hacia la derecha, sobre un vidrio
   muy leve. Una píldora con borde leía a botón de plugin y, arriba, saturaba el hero.
   El nombre se ilumina UNA vez al cargar —revelación, no bucle— y otra al pasar el cursor. */

.hero-promo {
	display: inline-flex; align-items: center; gap: .7rem; white-space: nowrap;
	margin: 1.1rem 0 0; padding: .6rem 3.4rem .6rem 1rem;
	text-decoration: none; color: #fff; border-radius: 2px;
	border-left: 2px solid var(--oro);
	background: linear-gradient(90deg, rgba(217, 171, 95, .26) 0%, rgba(217, 171, 95, .1) 55%, rgba(217, 171, 95, 0) 100%);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	-webkit-mask-image: linear-gradient(90deg, #000 82%, transparent 100%); mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
	transition: background .4s;
}
.hero-promo:hover, .hero-promo:focus-visible {
	background: linear-gradient(90deg, rgba(217, 171, 95, .36) 0%, rgba(217, 171, 95, .14) 55%, rgba(217, 171, 95, 0) 100%);
}
.hero-promo__estrella { color: var(--oro); font-size: .8rem; line-height: 1; }
.hero-promo__nombre {
	font-family: var(--serif); font-size: clamp(1.05rem, 4vw, 1.4rem); font-weight: 500; letter-spacing: .01em;
	background: linear-gradient(100deg, #c99a4e 0%, #d9ab5f 30%, #fff1cf 48%, #d9ab5f 66%, #c99a4e 100%);
	background-size: 250% 100%; background-position: 100% 0;
	-webkit-background-clip: text; background-clip: text; color: transparent;
	animation: promo-brillo 2.4s cubic-bezier(.3, .6, .3, 1) .6s both;
}
.hero-promo:hover .hero-promo__nombre { animation: promo-brillo 1.6s cubic-bezier(.3, .6, .3, 1) both; }
.hero-promo__detalle {
	font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .15em;
	color: rgba(255, 255, 255, .82);
}
.hero-promo__extra { display: none; }
.hero-promo__ir { color: var(--oro); transition: transform .3s; }
.hero-promo:hover .hero-promo__ir { transform: translateX(3px); }
@media (min-width: 46rem) {
	.hero-promo { gap: .85rem; padding-right: 4rem; }
	.hero-promo__extra { display: inline; }
}

@keyframes promo-brillo {
	from { background-position: 100% 0; }
	to   { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.hero-promo__nombre, .hero-promo:hover .hero-promo__nombre { animation: none; background-position: 50% 0; }
	.hero-promo { transition: none; }
}
#oferta { scroll-margin-top: 4.5rem; }
@media (min-width: 46rem) { #oferta { scroll-margin-top: 7rem; } }

/* ═══ «Kit de muestras» — PROPUESTA, solo en preview ═══════════════════════════
   Se ve como una ficha de producto más: el mismo hero, las mismas promesas, el mismo
   botón. Lo propio: las cinco muestras, cada una en el color de su «Siente…». */

body.pagina-kit-de-muestras .hero { padding-bottom: 3rem; }
.hero--kit .cta .kit-total { display: inline; }
.kit-incluye-corto { margin: 0 0 1rem; font-size: .8rem; letter-spacing: .04em; color: var(--tinta-suave); }
.kit-aviso {
	margin: .7rem 0 0; padding: .6rem .8rem; border-radius: .4rem;
	background: var(--crema-suave); border: 1px solid var(--linea);
	font-size: .8rem; line-height: 1.45; color: var(--tinta-suave);
}

/* Las muestras: la única fila de «cajas» de la página, porque es lo que se compra. */
.muestras { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(2, 1fr); }
/* Cinco en dos columnas dejaban la última sola: en celular, la quinta va a lo ancho. */
.muestras > .muestra:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 11rem; }
.muestra {
	position: relative; overflow: hidden; display: grid; gap: .25rem; align-content: start;
	min-height: 15rem; padding: 1.1rem 1rem 1rem; border-radius: .4rem; color: #fff;
	background:
		radial-gradient(80% 60% at 70% 100%, color-mix(in srgb, var(--m-luz) 85%, transparent), transparent 75%),
		var(--m-fondo);
}
/* El frasco de muestra, dibujado: vial ámbar con tapa negra. Sin foto que prometer. */
.muestra__frasco {
	width: 1.3rem; height: 4.6rem; margin-bottom: .9rem; border-radius: .25rem .25rem .4rem .4rem;
	background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(255, 255, 255, .18) 40%, rgba(0, 0, 0, .1)),
		linear-gradient(#111 0 1.1rem, color-mix(in srgb, var(--m-trazo) 55%, #7a3f12) 1.1rem);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 0 22px color-mix(in srgb, var(--m-trazo) 25%, transparent);
}
.muestra__familia { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--m-trazo); }
.muestra__nombre { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.1; }
.muestra__frase { font-size: .82rem; line-height: 1.45; color: rgba(255, 255, 255, .8); }
.muestra__notas { font-size: .72rem; color: rgba(255, 255, 255, .55); }
.muestra__ver { margin-top: .5rem; font-size: .75rem; font-weight: 600; color: var(--m-trazo); text-decoration: none; }
.muestra__ver:hover { text-decoration: underline; }

.kit-porque { text-align: center; }
.kit-porque__cita {
	margin: 0 0 1rem; font-family: var(--serif); font-weight: 500;
	font-size: clamp(1.8rem, 6.4vw, 2.8rem); line-height: 1.15; color: var(--sobre-verde); text-wrap: balance;
}

.guia { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.guia__item { display: grid; gap: .25rem; }
.guia__item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: .4rem; margin-bottom: .5rem; }
.guia__donde { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.guia__aroma { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: var(--acento); }
.guia__porque { font-size: .82rem; line-height: 1.45; color: var(--tinta-suave); }

.kit-tienda__inner { display: grid; gap: 1.4rem; }
.kit-tienda .boton-oro { justify-self: start; }

@media (min-width: 46rem) {
	.muestras { grid-template-columns: repeat(5, 1fr); gap: 1rem; }
	.muestra, .muestras > .muestra:last-child:nth-child(odd) { min-height: 19rem; grid-column: auto; }
	.guia { grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
	.kit-tienda__inner { grid-template-columns: 1fr auto; align-items: center; }
	.kit-tienda .boton-oro { justify-self: end; }
}

/* ═══ La pareja sugerida — recuadro compacto (parts/combina.php) ═════════════════
   Recuadro y miniaturas chicas a propósito: con fotos grandes y sin marco, bajo la
   galería se leía como más fotos del producto. Es una oferta que se elige, y las
   cosas que se eligen son las únicas que llevan caja. */

.combina {
	margin: 1.6rem 1.15rem 0; padding: 1rem 1rem 1.05rem;
	background: var(--crema-suave); border: 1px solid rgba(217, 171, 95, .45); border-radius: .5rem;
}
.combina__titulo {
	display: flex; align-items: center; gap: .55rem; margin: 0 0 .8rem;
	font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.15; color: var(--tinta);
}
.combina__sello {
	padding: .14rem .5rem; border-radius: 1em; background: var(--oro); color: var(--negro);
	font-family: ui-sans-serif, system-ui, sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}
.combina__par { display: flex; align-items: center; gap: .5rem; }
.combina__item {
	flex: 1; min-width: 0; display: flex; align-items: center; gap: .55rem;
	color: inherit; text-decoration: none;
}
a.combina__item:hover .combina__nombre { text-decoration: underline; text-underline-offset: .2em; }
.combina__foto { width: 3.6rem; height: 3.6rem; flex: none; object-fit: cover; border-radius: .3rem; display: block; background: #fff; }
.combina__item--esta .combina__foto { box-shadow: 0 0 0 2px var(--oro); }
.combina__datos { display: grid; gap: .05rem; min-width: 0; }
.combina__mas { flex: none; font-family: var(--serif); font-size: 1.4rem; line-height: 1; color: var(--oro); }
.combina__nombre { font-family: var(--serif); font-size: 1.02rem; font-weight: 600; line-height: 1.15; }
.combina__precio { font-size: .76rem; color: var(--tinta-suave); white-space: nowrap; }
.combina__texto { margin: .8rem 0 0; font-size: .84rem; line-height: 1.45; color: var(--tinta-suave); }
.combina__pie {
	display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
	margin-top: .85rem; padding-top: .85rem; border-top: 1px solid rgba(217, 171, 95, .35);
}
.combina__total { display: flex; align-items: baseline; gap: .5rem; margin: 0; }
.combina__total > span { font-size: .8rem; color: var(--tinta-suave); }
.combina__total del { font-size: .85rem; color: var(--tinta-tenue); }
.combina__total del .woocommerce-Price-amount { color: inherit; }
.combina__total strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: var(--tinta); }
.combina__boton {
	padding: .7rem 1.1rem; border-radius: .4rem; cursor: pointer;
	border: 0; background: var(--negro); color: #fff;
	font: inherit; font-size: .9rem; font-weight: 600; transition: background .2s;
}
.combina__boton:hover { background: #241f19; }
.combina__boton[hidden] { display: none; }
/* En celular cada producto va en vertical —miniatura y debajo nombre y precio—: al
   lado no cabía «Sandalwood» en un teléfono de 360 px sin partir la palabra. */
@media (max-width: 45.999rem) {
	.combina__item { flex-direction: column; align-items: flex-start; gap: .4rem; }
	.combina__foto { width: 3.4rem; height: 3.4rem; }
	.combina__mas { align-self: flex-start; margin-top: 1rem; }
	.combina__boton { width: 100%; padding-block: .85rem; }
}
/* En escritorio, una franja horizontal bajo el hero, al ancho del hero: título y razón
   a la izquierda, la pareja al centro, el total y el botón a la derecha. */
@media (min-width: 46rem) {
	.combina {
		max-width: 65rem; margin: -1.5rem auto 3rem; padding: 1.3rem 1.6rem;
		display: grid; grid-template-columns: minmax(0, 1.1fr) auto auto; align-items: center; gap: 0 2.4rem;
	}
	.combina__titulo { grid-column: 1; grid-row: 1; margin: 0; }
	.combina__texto { grid-column: 1; grid-row: 2; margin: .35rem 0 0; }
	.combina__par { grid-column: 2; grid-row: 1 / 3; }
	.combina__item { flex: none; }
	.combina__pie {
		grid-column: 3; grid-row: 1 / 3; margin: 0; padding: 0 0 0 2.4rem; border-top: 0;
		border-left: 1px solid rgba(217, 171, 95, .35);
		flex-direction: column; align-items: flex-start; gap: .6rem;
	}
}
@media (min-width: 46rem) and (max-width: 63.999rem) {
	/* Tableta: no caben tres columnas; el pie baja a su propia fila. */
	.combina { grid-template-columns: minmax(0, 1fr) auto; margin-inline: 1.5rem; }
	.combina__pie { grid-column: 1 / -1; grid-row: 3; flex-direction: row; align-items: center; padding: .9rem 0 0; margin-top: .9rem; border-left: 0; border-top: 1px solid rgba(217, 171, 95, .35); }
}

/* ═══ Carrito y pago ═══════════════════════════════════════════════════════════
   El marcado es de WooCommerce —su carrito y su checkout, tal cual— y aquí solo se
   viste. Todo va bajo `body.dokan-compra` para no alcanzar nada de las fichas.

   El CSS general de Woo se quitó (inc/compra.php), así que lo que no se viste aquí
   sale con el estilo del navegador. Al tocar esto, probar en el carrito VACÍO, con un
   cupón, con un error de validación y con cada medio de pago abierto. */

.dokan-compra .compra { max-width: 68rem; margin: 0 auto; padding: 1.4rem 1rem 3rem; }
.compra__cabeza { margin-bottom: 1.4rem; }
.compra__titulo { margin: .4rem 0 0; font: 600 2rem/1.15 var(--serif); }

.pasos { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin: 0; padding: 0; list-style: none; counter-reset: paso; font-size: .76rem; color: var(--tinta-tenue); }
.pasos li { counter-increment: paso; position: relative; }
.pasos li::before { content: counter(paso) " · "; color: var(--tinta-tenue); }
.pasos li + li::after { content: ""; position: absolute; left: -1rem; top: 50%; width: .6rem; border-top: 1px solid var(--linea); }
.pasos .es-actual { color: var(--tinta); font-weight: 600; }
.pasos .es-actual::before { color: var(--acento); }
.pasos .es-hecho a { color: var(--tinta-suave); }

/* ── Lo genérico de Woo: avisos, campos, botones, tablas ── */
.dokan-compra .woocommerce-notices-wrapper:empty { display: none; }
.dokan-compra .woocommerce-error,
.dokan-compra .woocommerce-info,
.dokan-compra .woocommerce-message {
	margin: 0 0 1rem; padding: .85rem 1rem; list-style: none;
	border: 1px solid var(--linea); border-left: 3px solid var(--oro); border-radius: .35rem;
	background: var(--crema-suave); font-size: .9rem;
}
.dokan-compra .woocommerce-error { border-left-color: #a8322a; background: #fbf1ef; }
.dokan-compra .woocommerce-error li + li { margin-top: .3rem; }
.dokan-compra .woocommerce-NoticeGroup { min-width: 0; overflow-wrap: anywhere; }
.dokan-compra .woocommerce-info a, .dokan-compra .woocommerce-message a { color: var(--acento); }
/* El aviso de PayPal de BeRocket: lo sustituye la barra de meses (parts/compra/msi.php). */
.dokan-compra .woocommerce-info:has(.berocket_cart_notice),
.dokan-compra .berocket_cart_notice { display: none !important; }

.dokan-compra a { color: inherit; }
/* …pero nunca los botones. `.dokan-compra a` pesa más que `.cta`, y «Seguir con el pago»
   del cajón salía en negro sobre negro (2026-10-20). */
.dokan-compra a.cta { color: #fff; }
.dokan-compra table { width: 100%; border-collapse: collapse; }
.dokan-compra th { text-align: left; font-weight: 500; }

.dokan-compra .form-row { margin: 0 0 .9rem; padding: 0; }
.dokan-compra .form-row label { display: block; margin-bottom: .3rem; font-size: .82rem; color: var(--tinta-suave); }
.dokan-compra .form-row .required { color: var(--acento); text-decoration: none; }
.dokan-compra .form-row .optional { color: var(--tinta-tenue); }
.dokan-compra input.input-text,
.dokan-compra textarea,
.dokan-compra select,
.dokan-compra .select2-container .select2-selection--single {
	width: 100%; min-height: 2.9rem; padding: .65rem .8rem;
	border: 1px solid #d3cabd; border-radius: .35rem; background: #fff;
	font: inherit; font-size: 1rem; color: var(--tinta); /* 1rem: con menos, iOS hace zoom al enfocar */
}
.dokan-compra textarea { min-height: 5rem; }
.dokan-compra input.input-text:focus, .dokan-compra textarea:focus, .dokan-compra select:focus { outline: 2px solid var(--oro); outline-offset: 0; border-color: var(--oro); }
.dokan-compra .select2-container .select2-selection--single { display: flex; align-items: center; height: auto; padding: 0 .3rem; }
.dokan-compra .select2-container .select2-selection--single .select2-selection__rendered { padding-left: .5rem; line-height: 1.4; color: var(--tinta); }
.dokan-compra .select2-container .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); }
.dokan-compra .woocommerce-invalid input.input-text, .dokan-compra .woocommerce-invalid .select2-selection { border-color: #a8322a; }
.dokan-compra .woocommerce-input-wrapper { display: block; }

.dokan-compra .button {
	display: inline-flex; align-items: center; justify-content: center; padding: .7rem 1.1rem;
	border: 1px solid var(--tinta); border-radius: .35rem; background: transparent; color: var(--tinta);
	font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; text-decoration: none;
}
.dokan-compra .button:hover { background: var(--crema-suave); }
.dokan-compra .button:disabled, .dokan-compra .button[disabled] { opacity: .45; cursor: default; }
.dokan-compra .checkout-button,
.dokan-compra #place_order {
	width: 100%; padding: 1.05rem 1.25rem; border: 0; background: var(--negro); color: #fff; font-size: 1rem;
}
.dokan-compra .checkout-button:hover, .dokan-compra #place_order:hover { background: #241f19; }

.dokan-compra .woocommerce-Price-amount { white-space: nowrap; }
.dokan-compra .blockUI.blockOverlay { background: var(--papel) !important; }

/* ── La barra de meses ── */
.msi { margin: 0 0 1.1rem; padding: .9rem 1rem; border-radius: .4rem; background: var(--verde); color: var(--sobre-verde); }
.msi__txt { margin: 0 0 .6rem; font-size: .88rem; line-height: 1.45; }
.msi__txt strong { color: var(--oro); font-weight: 600; }
.msi__barra { height: 4px; border-radius: 4px; background: rgba(242, 236, 227, .18); overflow: hidden; }
.msi__barra span { display: block; height: 100%; background: var(--oro); border-radius: 4px; transition: width .4s ease; }
.msi--listo .msi__barra { display: none; }
.msi--listo .msi__txt { margin: 0; }

/* ── Confianza, junto al botón ── */
.confianza { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--linea); }
.confianza__lista { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; font-size: .82rem; color: var(--tinta-suave); }
.confianza__lista li { display: flex; gap: .6rem; align-items: flex-start; }
.confianza__lista svg { flex: 0 0 1.1rem; width: 1.1rem; height: 1.1rem; margin-top: .1rem; color: var(--acento); }
.confianza__lista strong { display: block; color: var(--tinta); font-weight: 600; }
.confianza__enlaces { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 1rem 0 0; font-size: .82rem; }
.confianza__enlaces a { color: var(--acento); }

/* ── El carrito ── */
.compra__woo--carrito .woocommerce { display: grid; gap: 1.6rem; }
.compra__woo--carrito .shop_table.cart thead { display: none; }
.compra__woo--carrito .shop_table.cart tr.cart_item {
	display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; grid-template-areas:
		"foto nombre quitar" "foto precio precio" "foto cantidad subtotal";
	gap: .25rem .9rem; padding: 1rem 0; border-bottom: 1px solid var(--linea);
}
.compra__woo--carrito .shop_table.cart td { display: block; padding: 0; border: 0; }
.compra__woo--carrito td.product-thumbnail { grid-area: foto; }
.compra__woo--carrito td.product-thumbnail img { width: 5rem; height: 5rem; object-fit: cover; border-radius: .35rem; background: var(--crema-suave); }
.compra__woo--carrito td.product-name { grid-area: nombre; font-weight: 600; line-height: 1.35; }
.compra__woo--carrito td.product-name a { text-decoration: none; }
.compra__woo--carrito td.product-name dl.variation { font-weight: 400; font-size: .8rem; color: var(--tinta-tenue); }
.compra__woo--carrito td.product-price { grid-area: precio; font-size: .84rem; color: var(--tinta-suave); }
.compra__woo--carrito td.product-quantity { grid-area: cantidad; align-self: end; }
.compra__woo--carrito td.product-subtotal { grid-area: subtotal; align-self: end; font-weight: 600; }
.compra__woo--carrito td.product-remove { grid-area: quitar; justify-self: end; }
.compra__woo--carrito td.product-remove a.remove {
	display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
	color: var(--tinta-tenue); font-size: 1.2rem; text-decoration: none;
}
.compra__woo--carrito td.product-remove a.remove:hover { background: var(--crema-suave); color: #a8322a; }
/* Woo pone la etiqueta de cada celda en `data-title` para su vista de celular; aquí el
   orden visual ya lo dice. */
.compra__woo--carrito .shop_table.cart td::before { content: none !important; }

.dokan-compra .quantity input.qty {
	width: 4.2rem; min-height: 2.5rem; padding: .4rem; text-align: center;
	border: 1px solid #d3cabd; border-radius: .35rem; font: inherit; font-size: 1rem;
}
/* − y + del carrito (plantillas/compra.php). Del alto del campo y con el borde del mismo
   gris: se leen como una sola pieza. Con ellos el campo se angosta. */
.dokan-compra .quantity:has(.qty-paso) { display: inline-flex; align-items: center; gap: .3rem; }
.dokan-compra .quantity:has(.qty-paso) input.qty { width: 3rem; -moz-appearance: textfield; }
.dokan-compra .quantity input.qty::-webkit-outer-spin-button,
.dokan-compra .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-paso {
	width: 2.5rem; height: 2.5rem; display: grid; place-items: center; flex: none;
	border: 1px solid #d3cabd; border-radius: .35rem; background: #fff;
	font: inherit; font-size: 1.15rem; line-height: 1; color: var(--tinta); cursor: pointer;
	transition: border-color .2s;
}
.qty-paso:hover { border-color: var(--verde); }
.dokan-compra .quantity label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.compra__woo--carrito .shop_table.cart td.actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; padding-top: 1rem; }
.compra__woo--carrito .shop_table.cart tr:has(td.actions) { display: block; }
.compra__woo--carrito .coupon { display: flex; gap: .5rem; flex: 1 1 16rem; }
.compra__woo--carrito .coupon label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.compra__woo--carrito .coupon input.input-text { min-height: 2.6rem; font-size: 1rem; } /* 16 px: con menos, el iPhone hace zoom al tocarlo */
/* Con la actualización automática el botón sobra; sin JavaScript, se queda. */
.carrito-auto .compra__woo--carrito [name="update_cart"] { display: none; }

.compra__woo--carrito .cart-collaterals { min-width: 0; }
.compra__woo--carrito .cart_totals {
	padding: 1.2rem; border-radius: .5rem; background: var(--crema-suave);
}
.compra__woo--carrito .cart_totals > h2 { margin: 0 0 .9rem; font: 600 1.3rem/1.2 var(--serif); }
.dokan-compra .shop_table:not(.cart) th, .dokan-compra .shop_table:not(.cart) td { padding: .55rem 0; border-bottom: 1px solid var(--linea); vertical-align: top; font-size: .92rem; }
.dokan-compra .shop_table:not(.cart) td { text-align: right; }
.dokan-compra .shop_table .order-total th, .dokan-compra .shop_table .order-total td { border-bottom: 0; padding-top: .8rem; font-size: 1.05rem; font-weight: 600; }
.dokan-compra .shop_table .fee td { color: var(--acento); }
.dokan-compra .woocommerce-shipping-methods { margin: 0; padding: 0; list-style: none; }
.dokan-compra .woocommerce-shipping-destination, .dokan-compra .woocommerce-shipping-calculator { font-size: .8rem; color: var(--tinta-tenue); text-align: right; }
.dokan-compra .shipping-calculator-button { color: var(--acento); }
.dokan-compra .shipping-calculator-form { margin-top: .6rem; text-align: left; }
.dokan-compra .wc-proceed-to-checkout { margin-top: 1rem; }
/* Los botones exprés de PayPal y Google Pay que el plugin pone bajo «Finalizar compra». */
.dokan-compra .wc-proceed-to-checkout > * + * { margin-top: .7rem; }

.compra__woo--carrito .cart-empty { padding: 2rem 0 .5rem; font-size: 1.05rem; border: 0; background: none; }
.compra__woo--carrito .return-to-shop .button { background: var(--negro); color: #fff; border-color: var(--negro); }

@media (min-width: 52rem) {
	.compra__woo--carrito .woocommerce { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; column-gap: 2.6rem; }
	.compra__woo--carrito .woocommerce > * { grid-column: 1 / -1; }
	.compra__woo--carrito .woocommerce-cart-form { grid-column: 1; }
	.compra__woo--carrito .cart-collaterals { grid-column: 2; position: sticky; top: 5.5rem; }
	.compra__woo--carrito .shop_table.cart tr.cart_item { grid-template-columns: 6rem minmax(0, 1fr) auto auto; grid-template-areas: "foto nombre cantidad subtotal" "foto precio cantidad subtotal"; align-items: center; }
	.compra__woo--carrito td.product-thumbnail img { width: 6rem; height: 6rem; }
	.compra__woo--carrito td.product-quantity, .compra__woo--carrito td.product-subtotal { align-self: center; }
	.compra__woo--carrito td.product-subtotal { min-width: 5.5rem; text-align: right; }
	.compra__woo--carrito td.product-remove { position: absolute; }
	.compra__woo--carrito .shop_table.cart tr.cart_item { position: relative; padding-right: 2rem; }
	.compra__woo--carrito td.product-remove { right: 0; top: 50%; transform: translateY(-50%); }
}

/* ── El pago ── */
.compra__woo--pago .woocommerce-form-coupon-toggle .woocommerce-info { background: none; border: 0; padding: 0; font-size: .86rem; color: var(--tinta-suave); }
.compra__woo--pago .checkout_coupon { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; padding: 1rem; border: 1px dashed var(--linea); border-radius: .4rem; }
.compra__woo--pago .checkout_coupon p:not(.form-row) { flex-basis: 100%; margin: 0; font-size: .82rem; color: var(--tinta-tenue); }
.compra__woo--pago .checkout_coupon .form-row { margin: 0; }
.compra__woo--pago .checkout_coupon .form-row-first { flex: 1 1 12rem; }
.compra__woo--pago .checkout_coupon .clear { display: none; }

.compra__woo--pago form.checkout { display: grid; gap: 0 2.6rem; }
.compra__woo--pago form.checkout h3 { margin: 0 0 1rem; font: 600 1.3rem/1.2 var(--serif); }
.compra__woo--pago .col2-set .col-2 { margin-top: .6rem; }
.compra__woo--pago .woocommerce-billing-fields__field-wrapper,
.compra__woo--pago .woocommerce-shipping-fields__field-wrapper { display: flex; flex-wrap: wrap; gap: 0 .8rem; }
.compra__woo--pago .form-row { flex: 1 1 100%; }
.compra__woo--pago .form-row-first, .compra__woo--pago .form-row-last { flex: 1 1 calc(50% - .4rem); min-width: 9rem; }
.compra__woo--pago #ship-to-different-address label { display: flex; gap: .5rem; align-items: center; font: 400 .92rem/1.4 inherit; color: var(--tinta); cursor: pointer; }
.compra__woo--pago .woocommerce-additional-fields h3 { font-size: 1.05rem; }

.compra__woo--pago #order_review_heading { margin-top: 1.6rem; }
.compra__woo--pago #order_review { padding: 1.2rem; border-radius: .5rem; background: var(--crema-suave); }
.compra__woo--pago .woocommerce-checkout-review-order-table thead { display: none; }
.compra__woo--pago .woocommerce-checkout-review-order-table td.product-name { text-align: left; }
.resumen__item { display: flex; gap: .7rem; align-items: center; }
.resumen__foto { flex: 0 0 3.2rem; width: 3.2rem; height: 3.2rem; object-fit: cover; border-radius: .3rem; background: #fff; }
.resumen__nombre { line-height: 1.35; }
.compra__woo--pago .product-quantity { font-weight: 400; color: var(--tinta-tenue); white-space: nowrap; }

/* Los medios de pago: cada uno es un renglón que se elige, así que aquí sí van cajas. */
.compra__woo--pago #payment { margin-top: 1.2rem; }
.compra__woo--pago #payment ul.payment_methods { display: grid; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.compra__woo--pago #payment li.wc_payment_method { padding: .8rem .9rem; border: 1px solid var(--linea); border-radius: .4rem; background: #fff; }
.compra__woo--pago #payment li.wc_payment_method:has(> input:checked) { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro); }
.compra__woo--pago #payment li.wc_payment_method > input { accent-color: var(--verde); margin: 0 .5rem 0 0; vertical-align: middle; }
.compra__woo--pago #payment li.wc_payment_method > label { font-weight: 600; font-size: .95rem; cursor: pointer; }
.compra__woo--pago #payment li.wc_payment_method > label img { display: inline-block; max-height: 1.4rem; width: auto; margin-left: .4rem; vertical-align: middle; }
.compra__woo--pago #payment .payment_box { margin-top: .8rem; font-size: .85rem; color: var(--tinta-suave); }
.compra__woo--pago #payment .payment_box p:first-child { margin-top: 0; }
.compra__woo--pago #payment .woocommerce-SavedPaymentMethods { margin: 0 0 .6rem; padding: 0; list-style: none; }
.compra__woo--pago #payment .woocommerce-SavedPaymentMethods:not(:has(li + li)) { display: none; } /* solo «nueva forma de pago»: no hay nada que elegir */
.compra__woo--pago #payment .woocommerce-SavedPaymentMethods-saveNew { font-size: .8rem; }
.compra__woo--pago .woocommerce-terms-and-conditions-wrapper { font-size: .74rem; line-height: 1.5; color: var(--tinta-tenue); }
.compra__woo--pago .woocommerce-privacy-policy-text a { color: var(--tinta-suave); }
.compra__woo--pago .place-order { margin: 1rem 0 0; }

@media (min-width: 52rem) {
	.compra__woo--pago form.checkout { grid-template-columns: minmax(0, 1fr) 25rem; align-items: start; }
	.compra__woo--pago form.checkout > * { grid-column: 1; }
	.compra__woo--pago .pago__izq { grid-row: 1 / span 8; }
	/* El aviso rojo de «faltan datos»: checkout.js de Woo lo antepone como hijo del form.
	   Sin fila propia caía debajo de .pago__izq (fila 9) y el cursor de la cuadrícula ya no
	   regresaba: toda la columna derecha se iba detrás de él, hasta abajo. Va arriba de los
	   datos, y los datos bajan una fila. */
	.compra__woo--pago form.checkout > .woocommerce-NoticeGroup { grid-row: 1; }
	.compra__woo--pago form.checkout:has(> .woocommerce-NoticeGroup) .pago__izq { grid-row: 2 / span 8; }
	.compra__woo--pago #order_review_heading,
	.compra__woo--pago form.checkout > .msi,
	.compra__woo--pago #order_review,
	.compra__woo--pago form.checkout > .confianza { grid-column: 2; }
	.compra__woo--pago #order_review_heading { margin-top: 0; }
}
/* Los totales: columnas fijas. Con el ancho automático, la celda del envío —que trae
   dentro el formulario de «Cambiar dirección»— empujaba la tabla fuera de su caja. */
.dokan-compra .cart_totals .shop_table,
.dokan-compra .woocommerce-checkout-review-order-table { table-layout: fixed; }
.dokan-compra .cart_totals .shop_table th { width: 48%; }
.dokan-compra .woocommerce-checkout-review-order-table tfoot th { width: 48%; }
.dokan-compra .woocommerce-checkout-review-order-table td.product-name { width: 70%; }
/* En el carrito el envío es gratis a todo México: calcularlo por dirección es un paso
   que no cambia nada. La dirección se pide en el pago. */
.compra__woo--carrito .woocommerce-shipping-destination,
.compra__woo--carrito .woocommerce-shipping-calculator { display: none; }
/* Stripe pone un input fuera de pantalla (`#wc-stripe-hidden-style-input`) para copiar
   de él el estilo de los campos de la tarjeta. Sin el CSS de Woo que lo contenía, abría
   un scroll horizontal de 1,100 px. Se recorta en su contenedor —no en el body, que en
   escritorio no lo contenía— y el input queda intacto para que Stripe siga leyéndolo. */
.dokan-compra .wc-upe-form { position: relative; overflow: hidden; }
.dokan-compra .woocommerce-shipping-methods { text-align: right; }
.compra__woo--carrito .coupon .button { white-space: nowrap; }
.dokan-compra .woocommerce-shipping-methods li,
.dokan-compra .woocommerce-shipping-methods label { display: block; text-align: right; }
/* «× 3» lo imprime Woo fuera del nombre: se alinea con el texto, no bajo la foto. */
.compra__woo--pago .woocommerce-checkout-review-order-table td.product-name .product-quantity { display: block; padding-left: 3.9rem; font-size: .82rem; }

/* ── El pago en dos pasos (parts/compra/dos-pasos.php) ──
   En el paso 1 solo se ven nombre, apellidos y correo; lo demás espera. La clase la pone
   el script: sin JavaScript, el formulario sale completo. */
.pago-paso-1 .woocommerce-billing-fields__field-wrapper > .form-row:not(#billing_first_name_field):not(#billing_last_name_field):not(#billing_email_field),
.pago-paso-1 .woocommerce-shipping-fields,
.pago-paso-1 .woocommerce-additional-fields,
.pago-paso-1 #payment { display: none !important; }
.paso-sigue { flex: 1 1 100%; margin: .4rem 0 1rem; }
.paso-sigue p { margin: .5rem 0 0; font-size: .8rem; color: var(--tinta-tenue); text-align: center; }
/* La barra de avance sustituye al título «Facturación y envío», que nombraba el
   formulario en vez de decir cuánto falta. Sin JavaScript no hay barra y el título vuelve. */
.compra__woo--pago .woocommerce-billing-fields:has(.avance) > h3 { display: none; }
.avance { flex: 1 1 100%; margin: 0 0 1.2rem; }
.avance__txt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; margin: 0 0 .5rem; }
.avance__txt strong { font: 600 1.3rem/1.2 var(--serif); }
.avance__txt span { align-self: flex-end; font-size: .8rem; color: var(--acento); }
.avance__barra { height: 6px; border-radius: 6px; background: var(--linea); overflow: hidden; }
.avance__barra span { display: block; height: 100%; border-radius: 6px; background: var(--verde); transition: width .5s ease; }
@media (prefers-reduced-motion: reduce) { .avance__barra span { transition: none; } }

/* El país: solo se envía a México. El campo sigue en el formulario —Woo y Envía lo
   necesitan— pero no se le pregunta a nadie lo que ya sabemos. Si algún día viniera con
   otro país, reaparece. `!important` porque el script de direcciones de Woo le pone
   `display: block` en línea al cargar. */
.dokan-compra #billing_country_field:has(option[value="MX"]:checked),
.dokan-compra #shipping_country_field:has(option[value="MX"]:checked) { display: none !important; }

/* La fecha de entrega. */
.entrega { display: flex; gap: .55rem; align-items: center; margin: 0 0 1.1rem; font-size: .86rem; color: var(--tinta-suave); }
.entrega svg { flex: 0 0 1.25rem; width: 1.25rem; height: 1.25rem; color: var(--acento); }
.entrega strong { color: var(--tinta); font-weight: 600; }
@media (min-width: 52rem) {
	.compra__woo--pago form.checkout > .entrega { grid-column: 2; }
}

/* Los botones exprés de Stripe (Google Pay, Apple Pay, Link), arriba de los datos: quien
   paga así no escribe nada. Su separador «— O —» se vuelve un filete con texto. Stripe
   los muestra y esconde solo (display en línea), según el navegador pueda pagar así. */
.compra__woo--pago #wc-stripe-express-checkout-element { margin: 0 0 .2rem !important; }
/* Su lugar mientras Stripe los carga (plantillas/compra.php): dos barras del alto de sus
   botones, latiendo apenas. En el pago, más el aire de «o llena tus datos». */
.expres-cargando { display: grid; align-content: start; gap: .6rem; margin: 1em 0 0; overflow: hidden; }
.compra__woo--pago .expres-cargando { margin: 0 0 3.3rem; }
.expres-cargando span { height: 48px; border-radius: .35rem; background: var(--linea); opacity: .45; animation: expres-late 1.4s ease-in-out infinite alternate; }
@keyframes expres-late { to { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .expres-cargando span { animation: none; } }
.compra__woo--pago #wc-stripe-express-checkout-button-separator {
	position: relative; margin: 1rem 0 1.3rem !important; font-size: 0; text-align: center;
}
.compra__woo--pago #wc-stripe-express-checkout-button-separator::before {
	content: "o llena tus datos"; position: relative; z-index: 1; padding: 0 .8rem;
	background: var(--papel); font-size: .8rem; color: var(--tinta-tenue);
}
.compra__woo--pago #wc-stripe-express-checkout-button-separator::after {
	content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--linea);
}

/* ═══ LA CATEGORÍA: Home Spray (2026-10-20) ══════════════════════════════════════
   Mismo sistema que la ficha y la home. El hero es la banda verde de la marca con la
   mesa de la tienda; la parrilla, tarjetas sin caja —foto y texto, como «¿Cuál es el
   tuyo?»— porque aquí se explora. La única caja es el filtro, que sí se elige. */

.cat-hero { background: var(--verde); color: var(--sobre-verde); overflow: hidden; }
.cat-hero__inner { display: grid; }
.cat-hero__foto { display: block; order: -1; }
.cat-hero__foto img { width: 100%; height: 14rem; object-fit: cover; object-position: center 60%; display: block; }
.cat-hero__texto { padding: 2.2rem 1.15rem 2.6rem; }
.cat-hero .eyebrow { color: var(--oro); }
.cat-hero__titulo { margin: 0 0 1rem; font-weight: 500; }
.cat-hero__nombre {
	display: block; font-family: var(--serif); font-size: clamp(2.6rem, 11vw, 4.2rem);
	line-height: 1; letter-spacing: -.02em;
}
.cat-hero__sub { display: block; margin-top: .55rem; font-size: clamp(1.02rem, 4.2vw, 1.25rem); line-height: 1.35; color: var(--sobre-verde); }
.cat-hero__entrada { margin: 0 0 1.5rem; max-width: 34rem; font-size: .95rem; line-height: 1.6; color: var(--sobre-verde-tenue); }
.cat-hero__promesas { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; margin: 0 0 1.7rem; padding: 0; list-style: none; font-size: .8rem; line-height: 1.35; }
.cat-hero__promesas li { display: flex; align-items: flex-start; gap: .45rem; }
.cat-hero__promesas svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--oro); }
.cat-hero__promesas a { color: inherit; text-decoration: underline; text-decoration-color: rgba(217, 171, 95, .6); text-underline-offset: .2em; }
.cat-hero__ir {
	display: inline-block; padding: .85rem 1.4rem; border-radius: .35rem;
	background: var(--oro); color: var(--negro); font-weight: 600; font-size: .9rem; text-decoration: none;
	transition: background .2s;
}
.cat-hero__ir:hover { background: #e4bb76; }

/* ── El filtro ── */
.cat-filtro { display: grid; gap: .6rem; margin: 0 0 1.8rem; }
.cat-filtro[hidden] { display: none; }
.cat-filtro__et { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--acento); }
/* En celular los chips se deslizan en una fila: cinco renglones de botones empujarían
   la parrilla una pantalla hacia abajo. */
.cat-filtro__chips { display: flex; gap: .45rem; overflow-x: auto; margin: 0 -1.15rem; padding: 0 1.15rem .2rem; scrollbar-width: none; }
.cat-filtro__chips::-webkit-scrollbar { display: none; }
.cat-chip {
	flex: none; padding: .55rem .95rem; border: 1px solid var(--linea); border-radius: 2em;
	background: var(--papel); color: var(--tinta); font: inherit; font-size: .84rem; cursor: pointer;
	transition: border-color .2s, background .2s;
}
.cat-chip span { margin-left: .2rem; color: var(--tinta-tenue); font-size: .74rem; }
.cat-chip:hover { border-color: var(--oro); }
.cat-chip[aria-pressed="true"] { background: var(--verde); border-color: var(--verde); color: var(--sobre-verde); }
.cat-chip[aria-pressed="true"] span { color: var(--sobre-verde-tenue); }

/* ── La parrilla ── */
.cat-parrilla { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem .9rem; margin: 0; padding: 0; list-style: none; }
.cat-carta { display: flex; flex-direction: column; }
.cat-carta[hidden] { display: none; }
.cat-carta__liga { display: grid; gap: .25rem; color: inherit; text-decoration: none; flex: 1; align-content: start; }
.cat-carta__foto { position: relative; display: block; margin-bottom: .6rem; border-radius: .35rem; overflow: hidden; background: var(--crema-suave); }
.cat-carta__foto img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; transition: transform .5s ease; }
.cat-carta__liga:hover .cat-carta__foto img { transform: scale(1.03); }
.cat-carta__sello {
	position: absolute; top: .55rem; left: .55rem; padding: .22rem .55rem; border-radius: 1em;
	background: var(--oro); color: var(--negro); font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
}
.cat-carta__familia { font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: var(--acento); }
.cat-carta__nombre { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; line-height: 1.12; }
.cat-carta__frase { font-size: .8rem; line-height: 1.45; color: var(--tinta-suave); }
.cat-carta__inspirado { font-size: .76rem; line-height: 1.4; color: var(--tinta-suave); }
.cat-carta__inspirado em { font-style: normal; font-weight: 600; color: var(--tinta); }
.cat-carta__notas { font-size: .7rem; letter-spacing: .03em; color: var(--tinta-tenue); }
.cat-carta__pie { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--linea); }
.cat-carta__precio { font-size: .9rem; font-weight: 600; line-height: 1.25; }
.cat-carta__precio del { display: block; font-size: .78em; font-weight: 400; color: var(--tinta-tenue); }
.cat-carta__precio ins { text-decoration: none; }
.cat-carta__agregar {
	flex: none; padding: .5rem .8rem; border-radius: .3rem; background: var(--negro); color: var(--papel);
	font-size: .78rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .2s;
}
.cat-carta__agregar:hover { background: #241f19; }
.cat-carta__agregar.cta--agregando { opacity: .6; cursor: progress; }
.cat-carta__agotado { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-tenue); }

/* ── Los textiles ── */
.cat-textiles__grid { display: grid; gap: 2rem; }
.cat-textiles__cabeza .seccion__titulo { color: var(--sobre-verde); }
.cat-textiles__texto { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--sobre-verde-tenue); max-width: 34rem; }
.cat-textiles__pasos { display: grid; gap: 1.2rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.cat-textiles__pasos li { display: grid; grid-template-columns: 2.4rem 1fr; column-gap: .6rem; align-items: baseline; padding-bottom: 1.1rem; border-bottom: 1px solid rgba(242, 236, 227, .16); }
.cat-textiles__pasos li:last-child { border-bottom: 0; }
.cat-textiles__n { grid-row: span 2; font-family: var(--serif); font-size: 1.5rem; color: var(--oro); }
.cat-textiles__pasos strong { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.cat-textiles__pasos span:last-child { font-size: .88rem; color: var(--sobre-verde-tenue); }
.cat-textiles__nota { margin: 0; font-size: .78rem; color: var(--sobre-verde-tenue); }

@media (min-width: 46rem) {
	.cat-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: stretch; max-width: none; }
	.cat-hero__foto { order: 0; }
	.cat-hero__foto img { height: 100%; min-height: 34rem; }
	.cat-hero__texto { align-self: center; padding: 4rem 3rem 4rem max(1.15rem, calc((100vw - 68rem) / 2)); }
	.cat-filtro { grid-template-columns: auto 1fr; align-items: center; gap: 1.2rem; }
	.cat-filtro__chips { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
	.cat-parrilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 1.6rem; }
	.cat-textiles__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: center; }
	.cat-textiles__nota { grid-column: 2; }
}
@media (min-width: 64rem) {
	.cat-parrilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* La barra de administrador (solo con sesión) es fija arriba: la franja y el header
   sticky bajan lo que ella mide (46 px en tablet, 32 en escritorio). Bajo 600 px WordPress
   la deja de fijar y se va con el scroll. En escritorio el header ya va bajo la franja
   (top: 2.45rem): se suma, no se reemplaza. */
@media (min-width: 601px) { body.admin-bar .barra { top: 46px; } }
@media (min-width: 46rem) {
	body.admin-bar .franja { top: 46px; }
	body.admin-bar .barra { top: calc(2.45rem + 46px); }
}
@media (min-width: 783px) {
	body.admin-bar .franja { top: 32px; }
	body.admin-bar .barra { top: calc(2.45rem + 32px); }
}

/* ═══ «Compra segura»: la banda de confianza del carrito (2026-10-20) ═══════════════
   La versión en HTML de la imagen de Dokan: verde casi negro, candado dorado, cuatro
   pilares. Va al ancho de la columna del carrito, fuera de la cuadrícula de Woo, como una
   tarjeta oscura: alineada con el carrito y separada del pie, que también es verde. */

.segura { margin-top: 3rem; border-radius: .6rem; background: #0d1a16; color: var(--sobre-verde); position: relative; overflow: hidden; }
.segura::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(60% 90% at 85% 20%, rgba(217, 171, 95, .10), transparent 60%),
	            radial-gradient(50% 80% at 0% 100%, rgba(31, 58, 50, .9), transparent 70%);
}
.segura__inner { position: relative; max-width: 68rem; margin: 0 auto; padding: 2.8rem 1.15rem 2.4rem; }
.segura__cabeza { display: grid; gap: 1.8rem; align-items: center; }
.segura .eyebrow { color: var(--oro); }
.segura__titulo { margin: 0 0 .8rem; font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 6vw, 2.4rem); line-height: 1.1; letter-spacing: -.01em; }
.segura__entrada { margin: 0; max-width: 30rem; font-size: .92rem; line-height: 1.6; color: var(--sobre-verde-tenue); }
.segura__et { margin: 0 0 .6rem; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--oro); }
.segura__pagos .pagos { margin: 0; }
.segura__pagos .marca { border-color: rgba(242, 236, 227, .2); }
.segura__pagos .pagos__seguro { color: var(--sobre-verde-tenue); }
.segura__candado { display: none; width: 7.5rem; height: 7.5rem; color: var(--oro); justify-self: end; }

.segura__pilares { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.2rem; margin: 2.2rem 0 0; padding: 2rem 0 0; list-style: none; border-top: 1px solid rgba(242, 236, 227, .14); }
.segura__pilares li { display: grid; gap: .35rem; align-content: start; }
.segura__pilares svg { width: 1.7rem; height: 1.7rem; color: var(--oro); margin-bottom: .2rem; }
.segura__pilares strong { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.segura__pilares span { font-size: .82rem; line-height: 1.5; color: var(--sobre-verde-tenue); }
.segura__pilares a, .segura__pie a { color: var(--oro); text-decoration: underline; text-underline-offset: .2em; }

.segura__pie { margin: 2rem 0 0; padding-top: 1.4rem; border-top: 1px solid rgba(242, 236, 227, .14); font-size: .84rem; line-height: 1.6; color: var(--sobre-verde-tenue); text-align: center; }

@media (min-width: 46rem) {
	.segura__inner { padding: 3.6rem 2rem 2.8rem; }
	.segura__cabeza { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 2.5rem; }
	.segura__pagos { padding-left: 2.5rem; border-left: 1px solid rgba(242, 236, 227, .18); }
	.segura__candado { display: block; }
	.segura__pilares { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
	.segura__pilares li + li { padding-left: 2rem; border-left: 1px solid rgba(242, 236, 227, .14); }
}

/* ═══ LA TIENDA: /shop/ por secciones (2026-11-03) ═══════════════════════════════
   Una sección por categoría, con fondos alternados para que se lea dónde empieza
   cada una. Arriba, «Compra por categoría»: la cuadrícula con foto, con las piezas del
   mosaico de la home (.mosaico__liga, __foto, __velo, __texto). */
.tienda-cats { padding-bottom: 1.5rem; }
.tienda-cats__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 12.5rem; gap: .7rem; }
.tienda-cats__pieza[hidden] { display: none; }
.tienda-cats__n { margin-top: .35rem; font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: var(--oro); }
.tienda-cats__oferta { margin: 1.2rem 0 0; }
.tienda-nav__oferta { white-space: nowrap; }
.tienda-sec__mas { margin: 2.2rem 0 0; text-align: center; }
.tienda-sec { scroll-margin-top: 4.5rem; }
.tienda-sec[hidden] { display: none; }
.tienda-sec--alterna { background: var(--crema-suave); }
.tienda-sec__cabeza { display: grid; gap: .8rem; margin-bottom: 1.8rem; }
.tienda-sec__cabeza .seccion__titulo { margin: 0; }
.tienda-sec__texto { margin: .5rem 0 0; max-width: 36rem; font-size: .92rem; line-height: 1.6; color: var(--tinta-suave); }
.tienda-sec__ir { justify-self: start; white-space: nowrap; }

@media (min-width: 46rem) {
	.tienda-cats__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 17rem; gap: .9rem; }
	.tienda-cats .mosaico__nombre { font-size: 1.5rem; }
	.tienda-sec__cabeza { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem; }
	.tienda-sec .cat-parrilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
	.tienda-sec .cat-parrilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* La tienda: el hero se compacta (2026-11-03). Es «Compra por categoría»: lo que se
   viene a hacer es elegir, así que la cuadrícula tiene que verse en el primer pantallazo.
   Sin foto (la cuadrícula ya es la imagen), sin el botón de bajar y con las promesas
   en un renglón. */
.categoria-tienda .cat-hero__foto,
.categoria-tienda .cat-hero__ir { display: none; }
.categoria-tienda .cat-hero__inner { grid-template-columns: minmax(0, 1fr); }
.categoria-tienda .cat-hero__texto { padding: 1.6rem 1.15rem 1.5rem; }
.categoria-tienda .cat-hero__titulo { margin-bottom: .6rem; }
.categoria-tienda .cat-hero__entrada { margin-bottom: 1rem; }
.categoria-tienda .cat-hero__promesas { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 0; }
.categoria-tienda .tienda-cats { padding-top: 1.8rem; }
@media (min-width: 46rem) {
	.categoria-tienda .cat-hero__texto { max-width: 72rem; margin: 0 auto; padding: 2.4rem 2rem 2.2rem; width: 100%; box-sizing: border-box; }
	.categoria-tienda .tienda-cats { padding-top: 2.6rem; }
}

/* ═══ «Explora por sensación»: el mapa de aromas de la tienda (2026-11-04) ═══════════
   Un lienzo oscuro que toma la paleta del aroma más cercano a la lente: el fondo y la luz
   cambian de color con transición (por eso --mapa-fondo y --mapa-luz van registradas
   como <color>: sin @property un degradado no se anima). Sin firma: saturaba. Debajo (al lado en escritorio), su tarjeta con precio y «Agregar».
   ⚠️ `touch-action: none` en el lienzo: el dedo explora en vez de mover la página. Por eso
   el lienzo no ocupa todo el alto y deja margen arriba y abajo para hacer scroll. */
@property --mapa-fondo { syntax: '<color>'; inherits: true; initial-value: #16100b; }
@property --mapa-luz   { syntax: '<color>'; inherits: true; initial-value: #3a2a1a; }
@property --mapa-texto { syntax: '<color>'; inherits: true; initial-value: #efe7dc; }

.mapa { background: var(--crema-suave); }
.mapa__cabeza { margin-bottom: 1.4rem; }
.mapa__cabeza .seccion__titulo { margin: 0; }
.mapa__texto { margin: .6rem 0 0; max-width: 34rem; font-size: .92rem; line-height: 1.6; color: var(--tinta-suave); }
/* El marco: el mapa y la tarjeta son UNA pieza (Isma, 2026-11-04: la tarjeta afuera se
   sentía de otro widget). El color del aroma tiñe todo el marco, no solo el plano. */
.mapa__cuerpo {
	display: grid; overflow: hidden; border-radius: .9rem;
	background:
		linear-gradient(to bottom, transparent 35%, color-mix(in srgb, var(--mapa-luz) 30%, transparent)),
		var(--mapa-fondo);
	color: var(--mapa-texto);
	transition: --mapa-fondo 1.6s ease, --mapa-luz 1.6s ease, --mapa-texto 1.6s ease;
	box-shadow: 0 1.2rem 2.4rem -1.6rem rgba(4, 3, 0, .55);
}

.mapa__lienzo {
	--lx: 50%; --ly: 50%;
	position: relative; isolation: isolate;
	aspect-ratio: 1 / 1; max-height: 68vh; width: 100%; margin-inline: auto;
	touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair;
}
/* La luz sigue a la lente y se derrama fuera del plano, sobre la tarjeta: el doble de
   grande que el lienzo por cada lado (inset -100%: tres veces), así que la posición se
   escala a un tercio. El marco la recorta. Sin esto se veía un corte en seco donde
   empieza la tarjeta (con -50% todavía se cortaba en celular, bajo la tarjeta). */
.mapa__luz {
	position: absolute; inset: -100%; z-index: -1; pointer-events: none;
	background: radial-gradient(circle 24rem at calc(var(--lx) / 3 + 33.333%) calc(var(--ly) / 3 + 33.333%), var(--mapa-luz) 0, transparent 100%);
	opacity: .9;
}
.mapa__cartas { position: relative; z-index: 1; }
/* Una retícula finísima y la cruz de los ejes: que se lea «plano», no «fondo». */
.mapa__lienzo::before, .mapa__lienzo::after {
	content: ""; position: absolute; pointer-events: none; z-index: -1;
	background: currentColor; opacity: .07;
}
.mapa__lienzo::before { left: 50%; top: 6%; bottom: 6%; width: 1px; }
.mapa__lienzo::after  { top: 50%; left: 6%; right: 6%; height: 1px; }

.mapa__eje {
	position: absolute; font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
	opacity: .6; pointer-events: none;
}
.mapa__eje--izq { left: .8rem; top: 50%; translate: 0 -150%; }
.mapa__eje--der { right: .8rem; top: 50%; translate: 0 -150%; }
.mapa__eje--arr { top: .8rem; left: 50%; translate: .6rem 0; }
.mapa__eje--aba { bottom: .8rem; left: 50%; translate: .6rem 0; }

.mapa__punto {
	position: absolute; width: 2.2rem; height: 2.2rem; margin: -1.1rem 0 0 -1.1rem; padding: 0;
	border: 0; background: none; cursor: pointer; color: inherit;
}
.mapa__punto::before {
	content: ""; position: absolute; left: 50%; top: 50%; width: .5rem; height: .5rem; translate: -50% -50%;
	border-radius: 50%; background: currentColor; opacity: .55; transition: opacity .3s, scale .3s;
}
/* Las cremas, anillo: se distinguen sin leyenda de colores. */
.mapa__punto--crema::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; width: .6rem; height: .6rem; }
.mapa__punto[aria-pressed="true"]::before { opacity: 1; scale: 1.5; }
.mapa__punto:focus-visible { outline: 1.5px solid currentColor; outline-offset: -.3rem; border-radius: 50%; }

.mapa__lente {
	position: absolute; left: var(--lx); top: var(--ly); width: 4.2rem; height: 4.2rem; margin: -2.1rem 0 0 -2.1rem;
	border-radius: 50%; border: 1px solid currentColor; opacity: .7; pointer-events: none;
	box-shadow: 0 0 2.4rem -.4rem var(--mapa-luz);
	transition: left .45s cubic-bezier(.2, .8, .3, 1), top .45s cubic-bezier(.2, .8, .3, 1), scale .3s;
}
.mapa__lienzo--toca .mapa__lente, .mapa__lienzo--demo .mapa__lente { transition: scale .3s; }
.mapa__lienzo--toca .mapa__lente { scale: 1.25; }
.mapa__lienzo--viaja .mapa__lente-nombre { opacity: 0; }
.mapa__lente-nombre {
	transition: opacity .6s ease;
	position: absolute; bottom: calc(100% + .45rem); left: 0; translate: -50% 0; margin-left: 50%;
	white-space: nowrap; font-family: var(--serif); font-size: 1.15rem; font-style: italic; letter-spacing: .01em;
}

.mapa__cartas {
	padding: 1.1rem 1.15rem 1.3rem; margin: 0 1.15rem;
	border-top: 1px solid color-mix(in srgb, var(--mapa-texto) 14%, transparent);
	padding-inline: 0;
}
.mapa__carta { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; align-items: center; }
.mapa__carta[hidden] { display: none; }
.mapa__foto { display: block; aspect-ratio: 1; border-radius: .55rem; overflow: hidden; background: color-mix(in srgb, var(--mapa-texto) 8%, transparent); }
.mapa__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mapa__tipo { margin: 0 0 .25rem; font-size: .6rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--mapa-texto) 60%, transparent); }
.mapa__nombre { margin: 0; font-family: var(--serif); font-size: 1.5rem; font-weight: 500; line-height: 1.1; }
.mapa__nombre a { color: inherit; text-decoration: none; }
.mapa__como { margin: .2rem 0 0; font-size: .85rem; color: color-mix(in srgb, var(--mapa-texto) 72%, transparent); }
.mapa__palabras { margin: .15rem 0 0; font-family: var(--serif); font-style: italic; font-size: .95rem; }
.mapa__pie { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .7rem; }
.mapa__precio { font-weight: 600; font-size: .95rem; }
.mapa__precio del { font-weight: 400; opacity: .55; margin-right: .3rem; color: inherit; }
.mapa__precio ins { text-decoration: none; }
.mapa__precio .screen-reader-text { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; overflow: hidden; }
.mapa__agregar {
	/* Oro fijo, el de los botones de la marca: no sigue la paleta. Con el color del aroma
	   se iba ajustando 1.6 s en cada cambio y en algunos quedaba casi blanco. */
	padding: .55rem 1.2rem; border: 0; border-radius: .4rem; background: var(--oro); color: var(--negro);
	font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; transition: background-color .2s;
	text-decoration: none; white-space: nowrap;
}
.mapa__agregar:hover { background: #e4bb78; }
.mapa__agregar.cta--agregando { opacity: .6; cursor: progress; }
.mapa__cartas .cat-carta__agotado { color: inherit; opacity: .6; }
.mapa__cerca { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 1rem 0 0; font-size: .75rem; color: color-mix(in srgb, var(--mapa-texto) 65%, transparent); }
.mapa__cerca[hidden] { display: none; }
.mapa__chip {
	padding: .32rem .75rem; border: 1px solid color-mix(in srgb, var(--mapa-texto) 22%, transparent); border-radius: 2rem;
	background: transparent; font: inherit; font-size: .75rem; color: var(--mapa-texto); cursor: pointer; transition: border-color .2s;
}
.mapa__chip:hover { border-color: color-mix(in srgb, var(--mapa-texto) 55%, transparent); }

@media (min-width: 64rem) {
	.mapa__cuerpo { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: stretch; }
	.mapa__lienzo { aspect-ratio: 4 / 3; max-height: none; }
	.mapa__cartas {
		display: flex; flex-direction: column; justify-content: center;
		margin: 2rem 0; padding: 0 2.2rem; border-top: 0;
		border-left: 1px solid color-mix(in srgb, var(--mapa-texto) 14%, transparent);
	}
	.mapa__carta { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
	.mapa__foto { width: 8.5rem; }
	.mapa__nombre { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
	.mapa__cuerpo, .mapa__lente { transition: none; }
}