/* ==========================================================================
   Wizard Trees · Home
   Secciones del nodo 18:2. Se carga donde se use alguna (ver inc/enqueue.php).

   Al final del archivo hay un bloque PUENTE GUTENBERG con las correcciones que
   existen solo porque las secciones se editan con bloques nativos.
   ========================================================================== */


/* --- Hueco vertical automatico de Gutenberg ------------------------------------
   Un grupo nativo separa a sus hijos con un margen superior de 24px. Nuestro
   diseno no funciona asi: cada elemento declara su propio margen, sacado del
   nodo de Figma. Con los dos a la vez todo queda 24px mas suelto de lo debido.

   Esta regla tiene que ir AQUI ARRIBA y no en el puente del final, y el motivo
   es la cascada. La de Gutenberg es `:root :where(.is-layout-flow) > *`, que
   pesa (0,1,0). Las del diseno, de clase simple, pesan lo mismo. O sea que
   entre esas tres reglas decide el ORDEN, y el orden que hace falta es:

     1. Gutenberg pone 24px              (hoja de estilos globales, va antes)
     2. esta regla lo quita              (aqui)
     3. el diseno pone el suyo si tiene  (el resto del archivo, va despues)

   Con el mismo peso, ponerla al final la haria ganar tambien a las del diseno.
   Se probo, y la home perdia 336px de alto repartidos por siete secciones: los
   46px sobre la rejilla de categorias, los 44 sobre los estados, los 30 del
   aviso del localizador. Se vio comparando altura por altura contra las
   plantillas viejas.

   El :root y el :where() estan copiados de la regla de Gutenberg a proposito:
   asi pesan exactamente igual y todo depende del orden, que es lo unico que
   aqui se controla. */

:root :where([class*="wt-"].is-layout-flow) > *,
:root :where([class*="wt-"].is-layout-constrained) > * {
	margin-block-start: 0;
}

/* ==========================================================================
   HERO · nodo 18:57
   --------------------------------------------------------------------------
   Escenario de 1440x720 con capas absolutas. Todas las posiciones van en
   PORCENTAJE del escenario, no en pixeles: asi el conjunto escala con el ancho
   en lugar de descuadrarse por debajo de 1440.

   Equivalencias (px del nodo -> % del escenario):
     halo       centro 1140,350     ->  79.17%, 48.61%   75% (ver nota abajo)
     jar Zang    900,120  470x470   ->  62.50%, 16.67%   32.64%
     jar BlackL 1120,300  280x280   ->  77.78%, 41.67%   19.44%
     jar Voodoo  780,400  240x240   ->  54.17%, 55.56%   16.67%
     mascota    1130,430  250x195   ->  78.47%, 59.72%   17.36% x 27.08%
   ========================================================================== */

.wt-hero {
	position: relative;
	overflow: hidden;
	/* Elipse del nodo: radios 1161.3x342.86 centrada en 464.52,630.86 sobre
	   1440x720. En porcentaje escala sola. */
	background:
		radial-gradient(
			ellipse 80.65% 47.62% at 32.26% 87.62%,
			rgba(59, 3, 121, .85) 0%,
			rgba(43, 7, 84, .85) 22.5%,
			rgba(26, 10, 46, .85) 45%,
			var(--wt-bg) 100%
		);
}

/* --- Escenario decorativo -------------------------------------------------- */

.wt-hero__stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.wt-hero__stage > * {
	position: absolute;
}

/* Caja de arte · el sistema de coordenadas del nodo.
   --------------------------------------------------------------------------
   Sin esto, las capas escalaban con el ANCHO (width en % del escenario) pero
   se colocaban sobre el ALTO (top en % del escenario), y el alto del hero es
   fijo porque lo manda el contenido: 720. Por debajo de 1440 cuadraba de
   milagro; por encima, no. Medido a 1920: el bote Zang pasaba de 470 a 622 de
   alto y su base caia en 742, o sea 23 px por debajo del hero. Se veia
   inflado y hundido.

   La caja fija el mismo lienzo que el nodo: 1440 de ancho por el alto del
   hero. Los % de dentro vuelven a significar lo que significan en Figma.

   Va CENTRADA, no anclada a un lado, porque es exactamente lo que hace
   .wt-container con el texto (max-width 1440, margin auto). Asi la relacion
   entre los renders y el titular es la del nodo a cualquier ancho; anclarla a
   la derecha la rompia y abria un hueco en medio.

   El min() conserva el comportamiento de estrechar por debajo de 1440, que es
   el que ya estaba validado en movil. */
.wt-hero__art {
	position: absolute;
	inset-block: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(100%, 1440px);
}

.wt-hero__art > * {
	position: absolute;
}

/* El halo del nodo 19:2 es un circulo con degradado radial. Se reproduce en
   CSS, asi que no hace falta servirlo como archivo.

   Dos cosas que hay que respetar aqui o se ve el borde del circulo:

   1. TAMANO. Sin palabra clave, radial-gradient usa farthest-corner: en una
      caja cuadrada eso es media diagonal (70.7 % del ancho), no medio lado.
      El degradado llegaba a alfa 0 en el 70.7 % pero border-radius: 50 %
      recortaba en el 50 %, o sea que cortaba el halo cuando todavia tenia
      alfa .14. De ahi el canto duro. Con closest-side el 100 % del degradado
      cae justo en el borde del circulo y el recorte deja de existir; el
      border-radius sobra.

   2. CURVA. Tres paradas dan una rampa recta de alfa, y el ojo detecta el
      quiebro de pendiente (bandas de Mach) igual que un canto. Estas paradas
      siguen (1 - r^2)^3, que llega a 0 con pendiente 0: se apaga sin costura.
      El color va derivando de morado claro a morado profundo por el camino.

   3. TAMANO DE CAJA. Como consecuencia del punto 1, la caja ya no puede medir
      los 760 del nodo: con farthest-corner el degradado antiguo alcanzaba 537
      de radio aunque la caja midiera 760, y con closest-side el radio pasa a
      ser medio lado. Para conservar el alcance del diseno la caja se declara a
      1080 (540 de radio). Se ve lo mismo que antes, pero terminado en suave.

   Se coloca por CENTRO, no por esquina, para poder cambiar el radio sin mover
   el halo de sitio. Centro del nodo: 1140,350 sobre 1440x720. */
.wt-hero__halo {
	left: 79.17%;
	top: 48.61%;
	width: 75%;
	aspect-ratio: 1;
	/* El centrado va en la propiedad `translate`, no en `transform`, y esto es
	   deliberado: asi `transform` queda libre para el paralaje del puntero y
	   `scale` para el latido, y las tres cosas se componen sin pisarse. Ademas
	   `translate: -50%` se resuelve sobre la caja SIN escalar, asi que el halo
	   no se descoloca al respirar. */
	translate: -50% -50%;
	background: radial-gradient(
		circle closest-side,
		rgba(177, 106, 255, .550)   0%,
		rgba(169,  99, 245, .534)  10%,
		rgba(161,  92, 236, .487)  20%,
		rgba(152,  85, 226, .414)  30%,
		rgba(144,  78, 217, .326)  40%,
		rgba(136,  72, 207, .232)  50%,
		rgba(128,  65, 197, .144)  60%,
		rgba(120,  58, 188, .073)  70%,
		rgba(111,  51, 178, .026)  80%,
		rgba(103,  44, 169, .004)  90%,
		rgba( 95,  37, 159, 0)    100%
	);
}

/* Grano de dither.
   Un degradado tan grande sobre fondo oscuro se cuantiza a 8 bits en bandas:
   medidas sobre las paradas de arriba salen escalones de 4 px de mediana y de
   hasta 8 en el tramo medio, que es donde el ojo los ve. Mas paradas no
   arreglan esto, porque el problema no es la interpolacion sino el redondeo
   del framebuffer. La solucion de siempre es ruido: rompe el escalon
   repartiendolo. Al 4 % no se lee como textura, solo desaparecen las bandas.

   El SVG va embebido: son ~300 bytes y se dibuja una vez.

   El grano NO puede llegar hasta el borde inferior. El ruido de feTurbulence
   tiene media ~0.5 en color y en alfa, asi que compuesto al 4 % sube el fondo
   unos 2-3 niveles de 8 bits. Sobre #0F0F0F eso es un 15-20 % mas claro, y al
   cortarse justo donde acaba el hero dibujaba una linea horizontal contra la
   seccion siguiente. Por eso va enmascarado: se apaga en el ultimo tramo, que
   es justo donde el fundido ya ha llevado todo al color de fondo y no queda
   degradado que proteger. */
.wt-hero__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: .04;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 94%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 94%);
	pointer-events: none;
}

.wt-hero__jar,
.wt-hero__mascot {
	object-fit: contain;
	height: auto;
}

/* El nodo pone este marco en y=120 (16.67 %) y asi estaba: comprobado por
   correlacion contra el render de Figma, encajaba en 899,119 con r=0.9946.
   El 12.5 % de aqui son 90, o sea 30 px mas arriba que el nodo, a peticion de
   diseno. Es una desviacion deliberada de la maqueta, no una correccion:
   para volver al valor original, 16.67 %. */
.wt-hero__jar--zang {
	left: 62.5%;
	top: 12.5%;
	width: 32.64%;
	aspect-ratio: 1;
}

.wt-hero__jar--blacklight {
	left: 77.78%;
	top: 41.67%;
	width: 19.44%;
	aspect-ratio: 1;
	opacity: .9;
}

.wt-hero__jar--voodoo {
	left: 54.17%;
	top: 55.56%;
	width: 16.67%;
	aspect-ratio: 1;
	opacity: .75;
}

.wt-hero__mascot {
	left: 78.47%;
	top: 59.72%;
	width: 17.36%;
	aspect-ratio: 250 / 195;
	/* .85 dejaba la mascota demasiado lavada sobre el fondo. Decision de
	   diseno, el nodo no marca opacidad en esta capa. */
	opacity: .93;
}

/* ==========================================================================
   HERO · movimiento
   --------------------------------------------------------------------------
   Tres efectos que se suman sin pisarse, cada uno en una propiedad distinta:

     translate  -> la levitacion, por CSS (animacion infinita)
     transform  -> el paralaje del puntero, por JS
     scale      -> el latido del halo, por CSS

   Son propiedades independientes y el navegador las compone en el orden
   translate, rotate, scale, transform. Por eso el JS puede escribir `transform`
   a cada frame sin borrar la animacion de levitacion, y al reves.

   Solo transform, translate, scale y opacity: todas se resuelven en el
   compositor, sin recalcular diseno ni repintar.

   Todo el bloque va dentro de no-preference. Quien pida menos movimiento ve el
   hero quieto, no una version degradada. (base.css ademas frena cualquier
   animacion que se escape, pero es mejor no emitirla siquiera.)
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	/* Levitacion. Los periodos son distintos y no multiplos entre si a
	   proposito: si coincidieran, las cuatro capas subirian y bajarian a la vez
	   y se leeria como un bloque que respira, no como objetos flotando.
	   Los retardos negativos arrancan la animacion ya empezada, para que al
	   cargar la pagina no salgan todas del mismo punto. */
	.wt-hero__jar,
	.wt-hero__mascot {
		animation: wt-float var(--wt-float-dur, 7s) ease-in-out var(--wt-float-delay, 0s) infinite;
	}

	.wt-hero__jar--zang       { --wt-float-y: 14px; --wt-float-dur: 7s;   --wt-float-delay: 0s; }
	.wt-hero__jar--blacklight { --wt-float-y: 10px; --wt-float-dur: 8.5s; --wt-float-delay: -2.2s; }
	.wt-hero__jar--voodoo     { --wt-float-y:  8px; --wt-float-dur: 6.5s; --wt-float-delay: -4.1s; }

	/* La mascota es un personaje, no un objeto: ademas de flotar se balancea
	   un poco. Un grado y medio basta; mas y parece que se cae. */
	.wt-hero__mascot {
		--wt-float-y: 12px;
		--wt-float-dur: 5.5s;
		--wt-float-delay: -1.3s;
		animation-name: wt-hover;
	}

	/* El halo late mas lento que todo lo demas para que no se sincronice con
	   ninguna capa. */
	.wt-hero__halo {
		animation: wt-breathe 11s ease-in-out infinite;
	}
}

@keyframes wt-float {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 calc(var(--wt-float-y, 12px) * -1); }
}

@keyframes wt-hover {
	0%, 100% { translate: 0 0;                                  rotate: -1.5deg; }
	50%      { translate: 0 calc(var(--wt-float-y, 12px) * -1); rotate:  1.5deg; }
}

@keyframes wt-breathe {
	0%, 100% { scale: 1;    opacity: .88; }
	50%      { scale: 1.06; opacity: 1; }
}

/* El paralaje lo escribe el JS en `transform`. La transicion hace que la capa
   persiga al puntero con un poco de retraso en vez de pegarse a el: ese retraso
   es justo lo que da la sensacion de peso y de flotar. Tambien resuelve sola la
   vuelta al centro cuando el puntero se va. */
.wt-hero__art > * {
	transition: transform 600ms var(--wt-ease);
}

/* Velo lateral (18:58): oscurece la izquierda para que el texto tenga
   contraste sobre los renders. */
.wt-hero__veil {
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(15, 15, 15, .94) 0%,
		rgba(15, 15, 15, .42) 52%,
		rgba(15, 15, 15, 0) 100%
	);
}

/* Fundido inferior (19:7): cose el hero con la seccion siguiente.

   Las paradas siguen 3t^2-2t^3 en vez de una rampa recta. Una rampa lineal
   arranca con un quiebro de pendiente en su borde superior, y ese quiebro se
   ve como una linea tenue cruzando el hero. Esta curva entra y sale con
   pendiente cero, asi que no tiene ni principio ni final visibles. */
.wt-hero__fade {
	left: 0;
	right: 0;
	top: 69.44%;
	height: 30.56%;
	background: linear-gradient(
		to bottom,
		rgba(15, 15, 15, 0)     0%,
		rgba(15, 15, 15, .028) 10%,
		rgba(15, 15, 15, .104) 20%,
		rgba(15, 15, 15, .216) 30%,
		rgba(15, 15, 15, .352) 40%,
		rgba(15, 15, 15, .500) 50%,
		rgba(15, 15, 15, .648) 60%,
		rgba(15, 15, 15, .784) 70%,
		rgba(15, 15, 15, .896) 80%,
		rgba(15, 15, 15, .972) 90%,
		var(--wt-bg)          100%
	);
}

/* --- Contenido -------------------------------------------------------------
   En el nodo el bloque empieza en y=140 y mide 502 sobre un hero de 720, o sea
   140 arriba y 78 abajo. */

.wt-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: calc(var(--wt-container));
	padding-block: 140px 78px;
}

.wt-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 26px;
	/* 7+1 de borde = los 8 del nodo; igual en los lados. Total 34 de alto. */
	padding: 7px 15px 7px 13px;
	border: 1px solid rgba(177, 106, 255, .45);
	border-radius: var(--wt-radius-pill);
	background: rgba(177, 106, 255, .16);
	color: var(--wt-purple);
	font-family: var(--wt-font-mono);
	font-size: 12px;
	font-weight: var(--wt-weight-bold);
	letter-spacing: 1px;
	line-height: 1.5;
	text-transform: uppercase;
}

/* Punto de 7 px del nodo 18:61: circulo macizo morado, en CSS. */
.wt-hero__eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

/* 84 px es tamano propio del hero, no esta en la escala del sistema.
   El clamp lo hace bajar con el ancho sin romper las dos lineas.

   El tracking va en em a proposito. El nodo dice -2.5px, pero eso es un valor
   pensado para 84 px fijos: con el clamp el titular baja hasta 44 y esos
   -2.5px pasan a ser -.057em, tres veces mas apretado de lo disenado. En em
   se mantiene la proporcion a cualquier ancho.

   El valor es POSITIVO y eso es intencionado. El tracking negativo del nodo
   se ajusto contra Zalando Sans Expanded, que es la sustituta que usa Figma
   porque Monument es de pago. Monument Extended tiene otros espaciados
   laterales y con tracking negativo se apelmaza. Validado en pantalla sobre
   la fuente definitiva: +.01em. */
.wt-hero__title {
	margin: 0 0 22px;
	max-width: 100%;
	font-family: var(--wt-font-display);
	font-size: clamp(2.75rem, 5.85vw, 5.25rem);
	font-weight: 900;
	letter-spacing: .01em;
	line-height: .94;
	text-wrap: initial;
}

.wt-hero__lead {
	max-width: 560px;
	margin: 0 0 34px;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 17px;
	line-height: 1.6;
}

/* El hero usa 14 de hueco entre botones, no los 18 del sistema. */
.wt-hero__ctas {
	gap: 14px;
	margin-bottom: 42px;
}

/* --- KPIs ------------------------------------------------------------------ */

.wt-hero__kpis {
	display: flex;
	flex-wrap: wrap;
	gap: 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wt-kpi {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.wt-kpi__value {
	color: var(--wt-text);
	font-family: var(--wt-font-display);
	font-size: 24px;
	font-weight: var(--wt-weight-bold);
	line-height: 1.1;
}

.wt-kpi__label {
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 11px;
	letter-spacing: .6px;
	line-height: 1.5;
	text-transform: uppercase;
}

/* --- Adaptacion -------------------------------------------------------------
   [PS] El nodo solo define 1440. Al estrechar, los renders invaden el texto:
   primero se aparta el contenido, luego se apaga el escenario. */

@media (max-width: 1100px) {
	.wt-hero__inner { padding-block: 96px 64px; }
	.wt-hero__lead  { max-width: 48%; }
}

@media (max-width: 900px) {
	.wt-hero__stage { opacity: .45; }
	.wt-hero__veil  { background: linear-gradient(to right, rgba(15, 15, 15, .8) 0%, rgba(15, 15, 15, .55) 100%); }
	.wt-hero__lead  { max-width: 560px; }
}

@media (max-width: 600px) {
	.wt-hero__inner { padding-block: 64px 48px; }
	.wt-hero__stage { opacity: .3; }

	.wt-hero__jar--blacklight,
	.wt-hero__jar--voodoo,
	.wt-hero__mascot { display: none; }

	.wt-hero__lead     { font-size: 15px; }
	.wt-hero__kpis     { gap: 24px; }
}

/* ==========================================================================
   CATEGORIAS · nodo 18:87
   --------------------------------------------------------------------------
   Seccion de 1440x1025: cabecera de 122 con el titular a la izquierda y un
   boton terciario abajo a la derecha, hueco de 46, y rejilla de tres tarjetas
   de 410.67 con medianil 24.
   ========================================================================== */

.wt-cats {
	background: var(--wt-bg);
	padding-block: 88px;
}

/* --- Cabecera de seccion (compartida) --------------------------------------
   Identica en categorias (18:88) y drops (20:3), y reaparece mas abajo en el
   nodo 18:2, asi que vive aqui y no dentro de una seccion concreta. La pinta
   template-parts/home/section-head.php.

   items-end en el nodo: el boton se alinea con la BASE del titular, no con su
   caja. */

.wt-shead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wt-space-4);
}

.wt-shead__eyebrow {
	margin: 0 0 12px;
	color: var(--wt-purple);
	font-family: var(--wt-font-mono);
	font-size: 12px;
	font-weight: var(--wt-weight-bold);
	letter-spacing: 2.4px;
	line-height: 1.5;
	text-transform: uppercase;
}

/* 40 px no esta en la escala del sistema (64 / 48 / 32 / 24), es tamano propio
   de titular de seccion. El clamp lo baja con el ancho.

   El tracking sale del token, que ahora es positivo: ver la nota en tokens.css.
   El nodo pide -1px, pero ese valor esta medido sobre Zalando, no sobre
   Monument. */
.wt-shead__title {
	margin: 0;
	max-width: 20ch;
	font-size: clamp(1.75rem, 2.8vw, 2.5rem);
	font-weight: var(--wt-weight-bold);
	line-height: 1.14;
	text-wrap: initial;
}

/* El boton no debe encogerse cuando el titular ocupa mucho. */
.wt-shead__cta {
	flex: 0 0 auto;
}

/* Parrafo a la DERECHA, en lugar del boton (44:7). Lo usa la seccion de video.
   430 de ancho en el nodo; aqui va con maximo para que ceda antes que el
   titular cuando no hay sitio. */
.wt-shead__aside {
	flex: 0 1 430px;
	max-width: 430px;
	margin: 0;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 15px;
	line-height: 1.6;
}

/* Parrafo bajo la cabecera (20:11). Solo lo usa drops de momento. */
.wt-shead__lead {
	max-width: 80ch;
	margin: 14px 0 0;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 14px;
	line-height: 1.5;
}

/* --- Rejilla ---------------------------------------------------------------- */

.wt-cats__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wt-gutter);
	/* El hueco de 46 del nodo 18:94. Va aqui y no en la cabecera porque la
	   cabecera es compartida y cada seccion separa lo suyo. */
	margin: 46px 0 0;
	padding: 0;
	list-style: none;
}

.wt-cat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--wt-bg);
	border: 1px solid var(--wt-border);
	border-radius: 22px;
	overflow: hidden;
	transition:
		border-color var(--wt-dur) var(--wt-ease),
		transform    var(--wt-dur) var(--wt-ease);
}

.wt-cat-card:hover,
.wt-cat-card:focus-within {
	border-color: var(--wt-purple-deep);
}

/* --- Portal ----------------------------------------------------------------
   El nodo lo da como 410.67x510 fijos. Aqui va con relacion de aspecto en vez
   de alto fijo, y esto NO es un capricho: las capas de dentro se dimensionan
   en % del ANCHO y se posicionan en % del ALTO. Con el alto clavado y el ancho
   flexible las dos referencias se separan y la composicion se descuadra, que
   es exactamente el fallo que tenia el hero a partir de 1440. Con la relacion
   de aspecto fija, ancho y alto escalan juntos y los % del nodo siguen siendo
   validos a cualquier tamano de tarjeta.

   616/765 es 410.67/510 simplificado. */
.wt-cat-card__portal {
	position: relative;
	aspect-ratio: 616 / 765;
	background: var(--wt-bg);
	overflow: hidden;
}

.wt-cat-card__portal > * {
	position: absolute;
}

/* Halo (42:5): circulo de 400 a 0,30. Degradado radial, no hace falta el SVG.
   Mismas dos precauciones que el halo del hero, explicadas alli: closest-side
   para que el degradado no se corte, y caida (1-r^2)^3 para que no se vean
   bandas de Mach. Aqui el pico es .3 en vez de .55. */
.wt-cat-card__halo {
	left: 0;
	top: 5.88%;
	width: 97.4%;
	aspect-ratio: 1;
	background: radial-gradient(
		circle closest-side,
		rgba(177, 106, 255, .300)   0%,
		rgba(169,  99, 245, .291)  10%,
		rgba(161,  92, 236, .266)  20%,
		rgba(152,  85, 226, .226)  30%,
		rgba(144,  78, 217, .178)  40%,
		rgba(136,  72, 207, .127)  50%,
		rgba(128,  65, 197, .079)  60%,
		rgba(120,  58, 188, .040)  70%,
		rgba(111,  51, 178, .014)  80%,
		rgba(103,  44, 169, .002)  90%,
		rgba( 95,  37, 159, 0)    100%
	);
}

/* Producto (42:6 / 42:23 / 42:40). Caja cuadrada con object-fit: contain, que
   es como lo resuelve Figma: el render de las semillas es vertical y queda
   centrado dentro del cuadrado, no estirado.

   La sombra va con filter, no con box-shadow: los PNG tienen alfa y la sombra
   tiene que seguir la silueta, no el rectangulo. */
/*
 * Encuadre por defecto del render.
 *
 * -----------------------------------------------------------------------------
 * Por que hay base y no solo reglas por categoria
 * -----------------------------------------------------------------------------
 * Antes esta regla no ponia ni left ni top ni width: la posicion salia UNICA-
 * MENTE de las reglas por slug de aqui abajo. Y el slug lo decide el cliente al
 * crear la categoria en WooCommerce. Creo «Flowers», en plural, que da el slug
 * `flowers` y no casa con `.wt-cat-card--flower`: la imagen se pintaba en
 * position:absolute sin medidas, o sea a tamano natural, y se salia del portal.
 * Las otras dos coincidian por casualidad y por eso solo fallaba una.
 *
 * Con una base, una categoria con cualquier slug se encuadra bien igual. Las
 * reglas por slug quedan como ajuste fino de los tres renders del nodo, no como
 * la unica fuente de la posicion.
 *
 * El 23.7% sale de centrar en el 48.7%, que es donde esta el centro del arco
 * (16.80 + 63.80/2). Las tres tarjetas del nodo centran ahi y solo cambian de
 * anchura.
 */
.wt-cat-card__product {
	left: 23.7%;
	top: 21.5%;
	width: 50%;
	aspect-ratio: 1;
	object-fit: contain;
	filter: drop-shadow(0 16px 34px rgba(0, 0, 0, .55));
}

/* Cada render trae su propio encuadre en el nodo. */
/* En singular y en plural: el nodo dice FLOWER, el cliente creo «Flowers». */
.wt-cat-card--flower .wt-cat-card__product,
.wt-cat-card--flowers .wt-cat-card__product {
	left: 22.16%;
	top: 21.18%;
	width: 53.08%;
}

.wt-cat-card--seeds .wt-cat-card__product {
	left: 25.57%;
	top: 22.35%;
	width: 46.27%;
}

.wt-cat-card--pre-rolls .wt-cat-card__product {
	left: 22.65%;
	top: 21.18%;
	width: 52.11%;
}

/* Base (42:7): elipse de 190x20 a 105,349. Sombra de apoyo bajo el producto. */
.wt-cat-card__base {
	left: 25.57%;
	top: 68.43%;
	width: 46.27%;
	height: 3.92%;
	background: radial-gradient(
		ellipse closest-side,
		rgba(177, 106, 255, .50)  0%,
		rgba(160,  91, 236, .38) 25%,
		rgba(140,  74, 213, .21) 50%,
		rgba(117,  55, 186, .07) 75%,
		rgba( 95,  37, 159, 0)  100%
	);
}

/* Arco (42:8): 262x371 a 69,42. Va POR ENCIMA del producto, como en el nodo:
   las barras del arco cruzan por delante. Mismo archivo en las tres tarjetas. */
.wt-cat-card__arch {
	left: 16.80%;
	top: 8.24%;
	width: 63.80%;
	height: 72.75%;
	object-fit: contain;
}

/* Boton VIEW (42:9): 109x48 a 145,431. Se centra por su eje sobre el arco
   (199.5 de 410.67), no sobre la tarjeta: el arco esta 5 px a la izquierda del
   centro. Asi el boton no se descoloca al estrechar.

   Reaprovecha .wt-btn--primary y solo redefine las variables de la caja: el
   nodo le pone 32 de relleno lateral y 0.6 de tracking, no los del sistema. */
.wt-cat-card__view {
	--wt-btn-pad-y: 12.5px;
	--wt-btn-pad-x: 30.5px;
	--wt-btn-size: 13px;

	left: 48.58%;
	top: 84.51%;
	transform: translateX(-50%);
	letter-spacing: .6px;
	box-shadow: 0 8px 26px rgba(89, 36, 158, .7);
}

.wt-cat-card:hover .wt-cat-card__view {
	filter: brightness(1.12);
}

/* ==========================================================================
   CATEGORIAS · movimiento
   --------------------------------------------------------------------------
   Mismo reparto de propiedades que el hero, por la misma razon: cada efecto en
   una propiedad distinta para que se compongan sin pisarse.

     translate  -> la levitacion del producto (animacion, siempre)
     scale      -> la sombra de la base, sincronizada con el producto
     transform  -> el empujon extra al pasar el raton (transicion)
     filter     -> el encendido del halo

   El detalle que hace creible la levitacion no es el producto subiendo: es que
   la sombra de abajo encoja y se aclare a la vez. Sin eso parece que el
   producto se desliza, no que flota. Por eso base y producto comparten
   duracion y retardo exactos.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	.wt-cat-card__product {
		animation: wt-float var(--wt-lift-dur) ease-in-out var(--wt-lift-delay) infinite;
	}

	.wt-cat-card__base {
		animation: wt-cast var(--wt-lift-dur) ease-in-out var(--wt-lift-delay) infinite;
	}

	/* Periodos distintos y no multiplos entre si: tres tarjetas en fila
	   subiendo a la vez se leen como un carrusel, no como tres objetos. */
	/*
	 * El ritmo va por POSICION en la rejilla, no por categoria. Antes iba por
	 * slug y tenia el mismo fallo que el encuadre: «Flowers» no casaba con
	 * `.wt-cat-card--flower`, se quedaba sin --wt-lift-dur, y una animacion con
	 * duracion invalida no es una animacion lenta, es ninguna animacion. Esa
	 * tarjeta ni levitaba.
	 *
	 * Lo unico que se busca aqui es que las tres no vayan a la vez, y eso
	 * depende de donde esta cada una, no de que vende.
	 */
	.wt-cats__grid > :nth-child(1) { --wt-float-y: 11px; --wt-lift-dur: 6.5s; --wt-lift-delay: 0s; }
	.wt-cats__grid > :nth-child(2) { --wt-float-y:  9px; --wt-lift-dur: 7.5s; --wt-lift-delay: -2.4s; }
	.wt-cats__grid > :nth-child(3) { --wt-float-y: 10px; --wt-lift-dur: 5.8s; --wt-lift-delay: -1.1s; }
}

/* La sombra encoge y se aclara cuando el producto esta arriba. Va en fase con
   wt-float: el 50 % de las dos coincide. */
@keyframes wt-cast {
	0%, 100% { scale: 1;    opacity: 1; }
	50%      { scale: .88;  opacity: .6; }
}

/* --- Al pasar el raton ------------------------------------------------------
   El portal se enciende. El halo crece y sube de brillo, el producto se separa
   un poco mas del suelo y la sombra acompana.

   El halo usa filter: brightness y no opacity a proposito: brightness
   multiplica el color sin tocar el alfa, asi que el halo se enciende sin que
   haya que bajar su estado de reposo, que ya estaba aprobado. */

.wt-cat-card__halo {
	transition:
		scale  700ms var(--wt-ease),
		filter 700ms var(--wt-ease);
}

.wt-cat-card__product,
.wt-cat-card__base,
.wt-cat-card__arch {
	transition: transform 700ms var(--wt-ease);
}

.wt-cat-card:hover .wt-cat-card__halo,
.wt-cat-card:focus-within .wt-cat-card__halo {
	scale: 1.12;
	filter: brightness(1.5) saturate(1.08);
}

.wt-cat-card:hover .wt-cat-card__product,
.wt-cat-card:focus-within .wt-cat-card__product {
	transform: translateY(-7px);
}

.wt-cat-card:hover .wt-cat-card__base,
.wt-cat-card:focus-within .wt-cat-card__base {
	transform: scale(.92);
}

/* El arco crece un pelin para que el portal entero parezca que se acerca. Un
   1.5 % no se percibe como movimiento, solo como que la tarjeta reacciona. No
   se le toca el filtro: el producto lleva su sombra ahi y son la misma capa
   conceptual. */
.wt-cat-card:hover .wt-cat-card__arch,
.wt-cat-card:focus-within .wt-cat-card__arch {
	transform: scale(1.015);
}

/* --- Cuerpo de la tarjeta --------------------------------------------------
   Nodo 42:11: relleno 8 arriba, 26 en los lados y abajo, hueco 9. */

.wt-cat-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 9px;
	padding: 8px 26px 26px;
}

/*
 * En mayusculas desde CSS, no renombrando la categoria.
 *
 * El nodo las pone en caja alta (FLOWER, SEEDS, PRE-ROLLS) y en versalitas
 * quedan mas uniformes, que es lo que pidio el cliente el 2026-09-15. Se hace
 * con text-transform y no escribiendo «FLOWERS» en WooCommerce porque ese mismo
 * nombre sale ademas en las migas, en el archivo de categoria, en el selector de
 * categoria del carrito y en el panel: ahi se quiere «Flowers», no un grito.
 */
.wt-cat-card__title {
	margin: 0;
	font-size: 26px;
	font-weight: var(--wt-weight-bold);
	line-height: var(--wt-lh-tight);
	text-transform: uppercase;
}

.wt-cat-card__title a {
	color: inherit;
	text-decoration: none;
}

/* El enlace del titulo cubre la tarjeta entera, incluido el portal, sin anidar
   un <a> dentro de otro. El CTA de abajo se sube por encima con z-index. */
.wt-cat-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.wt-cat-card__subtitle {
	margin: 0;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 14px;
	line-height: 1.5;
}

.wt-cat-card__meta {
	margin: 0;
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 12px;
	line-height: 1.5;
}

/* El nodo mete un hueco de 12 entre la meta y el CTA, ademas del 9 de la
   columna: 21 en total. Se resuelve con margen para no romper el gap. */
.wt-cat-card__cta {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	color: var(--wt-purple);
	font-family: var(--wt-font-display);
	font-size: 12.5px;
	font-weight: var(--wt-weight-reg);
	letter-spacing: .4px;
	line-height: 1.5;
	text-decoration: none;
	text-transform: uppercase;
}

/* Misma regla que en los botones: el 600 del nodo no existe en Monument y
   caeria en Ultrabold, que a 12.5 px empasta. Ver components.css. */

.wt-cat-card__cta:hover,
.wt-cat-card__cta:focus-visible {
	color: var(--wt-text);
}

.wt-cat-card__arrow {
	font-family: var(--wt-font-mono);
	font-size: 13px;
	transition: transform var(--wt-dur) var(--wt-ease);
}

.wt-cat-card__cta:hover .wt-cat-card__arrow,
.wt-cat-card:hover .wt-cat-card__arrow {
	transform: translateX(3px);
}

/* Area tactil: el CTA mide 19 de alto y el minimo son 44. Se amplia con un
   pseudoelemento en vez de con relleno para no mover la maqueta. */
.wt-cat-card__cta::before {
	content: "";
	position: absolute;
	inset: 50% -8px auto;
	transform: translateY(-50%);
	height: var(--wt-tap-min);
}

/* --- Adaptacion -------------------------------------------------------------
   [PS] El nodo solo define 1440. Tres tarjetas de 410 no caben por debajo de
   ~1000, asi que la rejilla pasa a dos y luego a una. */

@media (max-width: 1100px) {
	.wt-cats__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 782px) {
	.wt-cats { padding-block: 64px; }

	.wt-shead {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wt-space-3);
	}

	/* Apilada deja de tener sentido el ancho fijo del nodo. */
	.wt-shead__aside {
		flex-basis: auto;
		max-width: none;
		width: 100%;
	}

	.wt-cats__grid { margin-top: 32px; }

	/* A una columna la tarjeta se comeria todo el ancho y el portal, que va por
	   relacion de aspecto, creceria hasta 900 y pico de alto. La solucion es
	   ponerle techo a la TARJETA, no tocar el portal: asi la geometria del nodo
	   sigue intacta y no hay que reposicionar ni una capa.

	   El intento anterior fijaba el alto del portal y recolocaba las capas, y
	   no funcionaba: las reglas por tarjeta (.wt-cat-card--flower
	   .wt-cat-card__product) tienen mas especificidad que un .wt-cat-card__product
	   suelto, asi que el centrado no llegaba a aplicarse y el producto quedaba
	   descolocado detras del arco. */
	.wt-cats__grid { grid-template-columns: 1fr; }

	.wt-cat-card {
		max-width: 420px;
		margin-inline: auto;
		width: 100%;
	}
}

/* ==========================================================================
   DROPS · nodo 20:2
   --------------------------------------------------------------------------
   Rejilla de cuatro productos REALES de WooCommerce (302 de ancho, medianil
   24) bajo la cabecera de seccion compartida.

   El relleno vertical es asimetrico a proposito: en el nodo la seccion arranca
   en y=1913 pegada a categorias y su cabecera empieza en y=10, o sea que el
   aire de arriba lo pone el relleno inferior de la seccion anterior. 10 + 96.
   ========================================================================== */

.wt-drops {
	background: var(--wt-bg);
	padding-block: 10px 96px;
}

/*
 * Las columnas las pone el bloque en una variable en linea. Cuatro es el
 * maximo del diseno y lo impone el control del editor; el valor de reserva es
 * por si el atributo no llega, que es lo que pasa en un render antiguo.
 * Las consultas de mas abajo siguen mandando en tablet y movil.
 */
.wt-drops__grid {
	display: grid;
	grid-template-columns: repeat(var(--wt-drops-cols, 4), 1fr);
	gap: var(--wt-gutter);
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

/* --- Tarjeta de producto ---------------------------------------------------
   Se movio a assets/css/components.css el 2026-09-15 con el nombre .wt-pcard.

   Motivo: el catalogo (nodo 23:102) usa EXACTAMENTE la misma tarjeta que esta
   seccion, y home.css no se carga en la tienda, asi que alli se habria quedado
   sin estilos. Ademas .wt-drop nombraba una seccion de la portada y esto es un
   componente que ya sale en dos paginas.

   Aqui se queda solo lo que es de la SECCION: fondo, relleno y rejilla. */

/* --- Adaptacion ------------------------------------------------------------ */

@media (max-width: 1100px) {
	.wt-drops__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 782px) {
	.wt-drops { padding-block: 8px 64px; }
	.wt-drops__grid { margin-top: 32px; gap: var(--wt-space-2); }
}

@media (max-width: 520px) {
	.wt-drops__grid { grid-template-columns: 1fr; }
	.wt-pcard { max-width: 420px; margin-inline: auto; width: 100%; }
}

/* ==========================================================================
   VIDEO DE MARCA · nodo 44:2
   --------------------------------------------------------------------------
   Mismo relleno asimetrico que drops (10 arriba, 96 abajo): el aire superior
   lo pone la seccion anterior.
   ========================================================================== */

.wt-video {
	background: var(--wt-bg);
	padding-block: 10px 96px;
}

/* --- Reproductor -----------------------------------------------------------
   1280x720 en el nodo. Va con relacion de aspecto 16/9 y no con alto fijo, por
   lo mismo que el portal de las tarjetas: si el ancho baja y el alto no, la
   composicion se descuadra. */

/*
 * El hueco entre la cabecera de la seccion y el video.
 *
 * Va en una variable porque hay que declararlo DOS veces: aqui, que es donde
 * vive el diseno, y otra vez en elementor-bridge.css. El motivo esta explicado
 * alli: Elementor pone a cero el margen de cualquier <figure> dentro de un
 * widget, con un selector de (0,4,1) y en una hoja que se encola despues de
 * esta, asi que esta regla por si sola no llega a aplicarse nunca. El puente
 * la repesca leyendo esta misma variable, para que el numero solo se toque en
 * un sitio.
 *
 * 48px arriba es lo que pidio el cliente el 2026-09-17: con los 36px de antes
 * —que ademas no se estaban viendo— el titular quedaba pegado al reproductor.
 * El titular tiene line-height 1.14, asi que los descendentes se comen unos
 * pixeles del hueco y el resultado optico siempre es algo menor que el numero.
 */
.wt-player {
	--wt-player-gap: clamp(28px, 4vw, 48px);

	position: relative;
	margin: var(--wt-player-gap) 0 0;
}

.wt-player__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--wt-border);
	border-radius: 22px;
	background: var(--wt-surface);
	overflow: hidden;
}

.wt-player__poster,
.wt-player__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Velo (44:11): oscurece de arriba abajo para que el play y la barra tengan
   contraste sobre cualquier fotograma. Paradas del nodo: .25 arriba, .15 al
   60 % y .9 abajo. */
.wt-player__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, .25)   0%,
		rgba(0, 0, 0, .15)  60%,
		rgba(8, 8, 13, .90) 100%
	);
	pointer-events: none;
}

/* --- Boton de reproducir ---------------------------------------------------
   104 px en el nodo (44:12), centrado. Circulo con el degradado primario y un
   triangulo hecho con bordes: no hace falta ningun SVG.

   Se dimensiona en % del ancho para que encoja con el reproductor, con un
   minimo para que no baje del area tactil en movil. */

.wt-player__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(64px, 8.125%, 104px);
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-image: var(--wt-grad-primary);
	box-shadow: 0 10px 40px rgba(95, 37, 159, .55);
	transition:
		transform var(--wt-dur) var(--wt-ease),
		filter    var(--wt-dur) var(--wt-ease);
}

/* El triangulo va con clip-path y no con el truco de los bordes: border-width
   NO admite porcentajes, asi que con la caja en % el triangulo salia de tamano
   cero y solo se veia el circulo. Con clip-path escala con el boton.

   El desplazamiento a la derecha compensa el centro optico: un triangulo
   centrado geometricamente se ve corrido hacia la izquierda. */
.wt-player__play::before {
	content: "";
	width: 30%;
	height: 34%;
	margin-left: 8%;
	background: var(--wt-text);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

button.wt-player__play {
	cursor: pointer;
}

button.wt-player__play:hover,
button.wt-player__play:focus-visible {
	filter: brightness(1.12);
	transform: translate(-50%, -50%) scale(1.06);
}

/* Sin archivo el play es un adorno: se atenua para que no invite a pulsarlo. */
.wt-player.is-pending .wt-player__play {
	opacity: .55;
	box-shadow: none;
}

/* --- Barra inferior ---------------------------------------------------------
   44:14. En el nodo va a 31 de los lados y 587 de arriba sobre 720, o sea
   pegada abajo con 31 de margen y 71 de alto. Aqui se ancla abajo. */

.wt-player__bar {
	position: absolute;
	left: 2.42%;
	right: 2.42%;
	bottom: 2.42%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wt-space-3);
	padding: 16px 22px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 16px;
	background: rgba(11, 11, 12, .72);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.wt-player__meta {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.wt-player__label {
	color: var(--wt-text);
	font-family: var(--wt-font-display);
	font-size: 16px;
	font-weight: var(--wt-weight-reg);
	line-height: 1.5;
}

.wt-player__time {
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 12px;
	line-height: 1.5;
}

.wt-player__features {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Etiquetas, no botones: dicen que trae el video. Los controles de verdad los
   pone el reproductor nativo al reproducir. Sin cursor ni hover a proposito,
   para no prometer una interaccion que no existe. */
.wt-player__feature {
	padding: 9px 14px;
	border-radius: var(--wt-radius-pill);
	background: rgba(255, 255, 255, .1);
	color: var(--wt-text);
	font-family: var(--wt-font-mono);
	font-size: 12px;
	line-height: 1.5;
	white-space: nowrap;
}

/* Al reproducir manda el video: fuera poster, velo, play y barra. */
.wt-player.is-playing .wt-player__poster,
.wt-player.is-playing .wt-player__veil,
.wt-player.is-playing .wt-player__play,
.wt-player.is-playing .wt-player__bar {
	display: none;
}

/* --- Adaptacion ------------------------------------------------------------ */

@media (max-width: 900px) {
	.wt-player__features { display: none; }
	.wt-player__bar      { padding: 12px 16px; }
	.wt-player__label    { font-size: 14px; }
}

@media (max-width: 782px) {
	.wt-video  { padding-block: 8px 64px; }
	.wt-player { margin-top: 28px; }

	.wt-player__frame { border-radius: 16px; }
	.wt-player__bar   { border-radius: 12px; }
}

/* ==========================================================================
   CONFIANZA · nodo 20:110
   --------------------------------------------------------------------------
   Banda de 112 de alto a sangre: 34 de relleno arriba y abajo mas 44 de
   contenido (21 del titulo + 5 de hueco + 18 de la nota). Cuatro columnas
   iguales con flex 1.
   ========================================================================== */

/* 33 y no los 34 del nodo: en Figma el trazo va por dentro de la caja, asi que
   33 + 33 de relleno + 44 de contenido + los dos bordes de 1 dan los 112
   exactos. Mismo ajuste que en el eyebrow del hero. */
.wt-trust {
	background: var(--wt-raised);
	border-block: 1px solid var(--wt-border);
	padding-block: 33px;
}

.wt-trust__list {
	display: flex;
	align-items: center;
	gap: var(--wt-gutter);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wt-trust__item {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

/* Regular, no semibold: 14 px es etiqueta de interfaz, no titular, y en
   Monument el 600 cae en Ultrabold. Misma regla que en los botones, ver la
   nota larga en components.css. La jerarquia frente a la nota la dan el color
   y el tamano, no el peso. */
.wt-trust__title {
	color: var(--wt-text);
	font-family: var(--wt-font-display);
	font-size: 14px;
	font-weight: var(--wt-weight-reg);
	letter-spacing: .2px;
	line-height: 1.5;
}

.wt-trust__note {
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 12px;
	line-height: 1.5;
}

/* --- Adaptacion -------------------------------------------------------------
   Cuatro columnas de texto no caben en un movil. Pasan a dos y luego a una
   sola columna apilada, que sigue leyendose como una lista de garantias. */

@media (max-width: 900px) {
	.wt-trust__list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wt-space-3) var(--wt-gutter);
	}
}

@media (max-width: 560px) {
	.wt-trust      { padding-block: 28px; }
	.wt-trust__list { grid-template-columns: 1fr; gap: var(--wt-space-2); }
}

/* ==========================================================================
   LOCALIZADOR · nodo 20:123
   --------------------------------------------------------------------------
   Cabecera con buscador a la derecha, seis tarjetas de estado y un aviso
   morado a ancho completo. Relleno 96 arriba y abajo.
   ========================================================================== */

.wt-locator {
	background: var(--wt-bg);
	padding-block: 96px;
}

/* La cabecera reutiliza .wt-shead pero el bloque derecho no es solo un
   parrafo: lleva parrafo mas buscador, con 16 de hueco (20:128). */
.wt-locator__aside {
	display: flex;
	flex: 0 1 430px;
	flex-direction: column;
	gap: 16px;
	max-width: 430px;
}

.wt-locator__aside .wt-shead__aside {
	flex: 0 0 auto;
	max-width: none;
}

/* --- Buscador ---------------------------------------------------------------
   Campo pildora de 50 de alto mas boton pequeno, con 10 de hueco. */

.wt-locator__search {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
}

/* Se sobrescribe el input global de components.css: aqui es una pildora, no
   una caja con radio de tarjeta. */
.wt-locator__search .wt-locator__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 50px;
	/* 14 + 1 de borde = los 15 del nodo. Trazo por dentro, como siempre. */
	padding: 14px 17px;
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-pill);
	background: var(--wt-fill-subtle);
	color: var(--wt-text);
	font-family: var(--wt-font-mono);
	font-size: 13.5px;
	line-height: 1.5;
}

/* Deshabilitado NO significa apagado visualmente. El campo esta inerte porque
   el buscador todavia no existe, pero la seccion se esta revisando como
   maqueta: si lo grisamos, se lee como un error de diseno. El aviso real va
   en el texto oculto que lo describe y en que no se puede enfocar. */
.wt-locator__search .wt-locator__input:disabled {
	opacity: 1;
	cursor: default;
	-webkit-text-fill-color: var(--wt-text-3);
}

/* El boton del buscador es mas alto que el .wt-btn--sm normal por el hueco
   optico con el campo de 50: el nodo le pone 45 y lo centra. */
.wt-locator__search .wt-btn {
	flex: 0 0 auto;
}

/* Sin destino el boton es un <span>: ni puntero ni hover. */
/*
 * En espera el boton ya NO se atenua. Antes era un <span> decorativo y tenia
 * sentido que se viera apagado; ahora es un boton de verdad que enseña el aviso
 * de que el buscador todavia no funciona. Un control que hace algo se pinta
 * como un control que hace algo.
 */

/* --- Tarjetas de estado -----------------------------------------------------
   198.33x240 en el nodo, seis en fila con 18 de medianil. Van con relacion de
   aspecto en vez de alto fijo para que escalen enteras. */

.wt-locator__states {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 18px;
	margin: 44px 0 0;
	padding: 0;
	list-style: none;
}

.wt-state {
	position: relative;
	aspect-ratio: 595 / 720; /* 198.33 / 240 */
	border-radius: 18px;
	overflow: hidden;
	background: var(--wt-surface);
}

.wt-state__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Velo del nodo 20:138: .05 arriba, .65 al 55 % y .96 abajo. Sirve para que el
   nombre del estado se lea sobre cualquier ilustracion. */
.wt-state__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, .05)    0%,
		rgba(15, 15, 15, .65) 55%,
		rgba(15, 15, 15, .96) 100%
	);
}

.wt-state__text {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wt-state__name {
	color: var(--wt-text);
	font-family: var(--wt-font-display);
	font-size: 16px;
	font-weight: var(--wt-weight-bold);
	line-height: var(--wt-lh-tight);
}

.wt-state__count {
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 11.5px;
	line-height: 1.5;
}

/* --- Aviso final ------------------------------------------------------------
   20:168. Morado al 16 % con borde al 50 %, misma familia que los chips. */

.wt-locator__notice {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 30px;
	/* 19 + 1 de borde = los 20 del nodo. */
	padding: 19px 23px;
	border: 1px solid rgba(95, 37, 159, .5);
	border-radius: 16px;
	background: rgba(95, 37, 159, .16);
}

.wt-locator__notice-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.wt-locator__notice-title {
	margin: 0;
	color: var(--wt-text);
	font-family: var(--wt-font-display);
	font-size: 16px;
	font-weight: var(--wt-weight-reg);
	line-height: 1.5;
}

.wt-locator__notice-body {
	margin: 0;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 13px;
	line-height: 1.5;
}

.wt-locator__notice .wt-btn {
	flex: 0 0 auto;
}

/* --- Adaptacion ------------------------------------------------------------ */

@media (max-width: 1100px) {
	.wt-locator__states { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 782px) {
	.wt-locator { padding-block: 64px; }

	.wt-locator__aside {
		flex-basis: auto;
		max-width: none;
		width: 100%;
	}

	.wt-locator__states {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wt-space-2);
		margin-top: 32px;
	}

	.wt-locator__notice {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 420px) {
	.wt-locator__search { flex-wrap: wrap; }
	.wt-locator__search .wt-btn { width: 100%; }
}

/* ==========================================================================
   MARCA · nodo 21:2
   --------------------------------------------------------------------------
   Dos columnas con 64 de hueco: fotos de 600 fijas a la izquierda y texto
   flexible a la derecha, alineadas al centro vertical.
   ========================================================================== */

.wt-brand {
	background: var(--wt-bg);
	padding-block: 96px;
}

/* flex-wrap y una base real en las dos columnas.
   -----------------------------------------------------------------------------
   Antes esto era un flex de una sola linea con las fotos a 600 fijos y el texto
   a `flex: 1 1 0`. Eso significa que el texto se queda con LO QUE SOBRE, sea lo
   que sea: si el contenedor mide 880 en vez de 1440, sobran 56 px y el parrafo
   se pinta en una tira de una palabra por linea. Pasaba en el editor, donde el
   bloque se encaja al ancho de contenido, pero es un fallo del componente, no
   del editor: cualquier contenedor estrecho lo reproduce.

   Con wrap y una base de 360 en el texto, cuando no caben las dos columnas la
   fila se parte y cada una ocupa el ancho entero. Nunca se aplasta. */
.wt-brand__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 64px;
}

/* --- Fotos ------------------------------------------------------------------
   Dos de 292 con 16 de hueco. Alturas distintas a proposito (420 y 340) y
   centradas entre si: es el desfase del diseno.

   Van con relacion de aspecto para que el par escale junto cuando la columna
   se estrecha, en vez de quedarse con el alto clavado. */

.wt-brand__photos {
	display: flex;
	flex: 1 1 480px;
	align-items: center;
	gap: 16px;
	max-width: 600px;
}

.wt-brand__photo {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
	background: var(--wt-surface);
	aspect-ratio: 292 / 340;
}

.wt-brand__photo--tall {
	aspect-ratio: 292 / 420;
}

/* Se apunta al <img> descendiente y no a una clase suya: el bloque de imagen de
   Gutenberg no deja poner clases en el <img>, solo en el <figure>. Asi la misma
   regla sirve para la plantilla PHP y para el patron. */
.wt-brand__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Texto ------------------------------------------------------------------ */

/* La base de 360 es el ancho por debajo del cual este texto deja de leerse
   bien: si no cabe junto a las fotos, se va a su propia linea. */
.wt-brand__text {
	flex: 1 1 360px;
	min-width: 0;
}

/* El eyebrow del sistema separa 12; aqui el nodo pide 14. */
.wt-brand__eyebrow {
	margin-bottom: 14px;
}

/* El titular de seccion lleva max-width 20ch para que no se estire; aqui la
   columna ya lo limita y el pipe decide donde parte. */
.wt-brand__title {
	max-width: none;
}

.wt-brand__body {
	margin: 20px 0 0;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 16px;
	line-height: 1.7;
}

/* --- Datos ------------------------------------------------------------------
   Tres filas de etiqueta (180 fijos) y valor. Es un <dl>, que es lo que es:
   pares de termino y definicion. */

.wt-brand__facts {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 26px 0 0;
}

.wt-fact {
	display: flex;
	align-items: baseline;
	gap: 14px;
}

/* margin: 0 explicito porque en el patron estas dos son <p>, no <dt>/<dd>:
   Gutenberg no tiene bloque de lista de definiciones, asi que la fila son dos
   parrafos dentro de un grupo. El aspecto es identico; lo que se pierde es la
   semantica de <dl>, y a cambio se gana que marketing pueda editarlo. */
.wt-fact__label {
	flex: 0 0 180px;
	max-width: 180px;
	margin: 0;
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 12.5px;
	line-height: 1.5;
}

.wt-fact__value {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: var(--wt-text);
	font-family: var(--wt-font-mono);
	font-size: 13.5px;
	font-weight: var(--wt-weight-med);
	line-height: 1.5;
}

/* Fila sin dato: el guion se atenua para que no se lea como un valor. */
.wt-fact__value.is-empty {
	color: var(--wt-text-3);
}

.wt-brand__ctas {
	margin-top: 30px;
}

/* --- Adaptacion -------------------------------------------------------------
   Por debajo de 1000 las dos columnas no caben: el texto se queda sin ancho
   util y el parrafo se rompe en tiras. Se apila, con las fotos primero. */

@media (max-width: 1000px) {
	.wt-brand__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}

	.wt-brand__photos {
		flex-basis: auto;
		max-width: none;
	}
}

@media (max-width: 782px) {
	.wt-brand { padding-block: 64px; }

	.wt-brand__body { font-size: 15px; }

	/* La etiqueta de 180 deja el valor sin sitio en movil: pasa a dos lineas. */
	.wt-fact {
		flex-direction: column;
		gap: 2px;
	}

	.wt-fact__label {
		flex-basis: auto;
		max-width: none;
	}
}

/* ==========================================================================
   RESENAS · nodo 35:2
   ========================================================================== */

.wt-reviews {
	background: var(--wt-bg);
	padding-block: 88px;
}

/* El titular de esta seccion es de 36, no de 40 como el resto. */
.wt-reviews__title {
	font-size: clamp(1.625rem, 2.5vw, 2.25rem);
	max-width: 24ch;
}

/* --- Estrellas --------------------------------------------------------------
   Se movieron a assets/css/components.css el 2026-09-15, por lo mismo que la
   tarjeta de producto: las usa tambien la ficha (nodo 24:97) y home.css no se
   carga alli. Sin estilos, .wt-star es un <svg> en display block y las cinco
   estrellas salian en columna. */

/* --- Resumen de la cabecera -------------------------------------------------
   Caja de nota (35:8) mas boton secundario, con 22 de hueco. */

.wt-reviews__summary {
	display: flex;
	align-items: center;
	gap: 22px;
	flex: 0 0 auto;
}

.wt-score {
	display: flex;
	align-items: center;
	gap: 16px;
	/* 23 + 1 de borde = los 24 del nodo; 17 + 1 = los 18. */
	padding: 17px 23px;
	border: 1px solid var(--wt-border);
	border-radius: 16px;
	background: var(--wt-bg);
}

.wt-score__value {
	color: var(--wt-text);
	font-family: var(--wt-font-display);
	font-size: 40px;
	font-weight: var(--wt-weight-bold);
	line-height: 1;
}

.wt-score__detail {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.wt-score__count {
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 12px;
	line-height: 1.5;
}

/* --- Tarjetas ---------------------------------------------------------------
   Tres de 413.33 con 20 de medianil. Relleno 26. */

.wt-reviews__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

.wt-review {
	display: flex;
	flex-direction: column;
	/* 25 + 1 de borde = los 26 del nodo. */
	padding: 25px;
	border: 1px solid var(--wt-border);
	border-radius: 18px;
	background: var(--wt-bg);
}

.wt-review__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wt-space-2);
	margin-bottom: 16px;
}

/* <blockquote> trae margen del navegador; aqui el espaciado lo manda la caja. */
.wt-review__quote {
	margin: 0;
}

.wt-review__title {
	margin: 0;
	color: var(--wt-text);
	font-family: var(--wt-font-display);
	font-size: 17px;
	font-weight: var(--wt-weight-bold);
	letter-spacing: -.2px;
	line-height: 1.25;
}

.wt-review__body {
	margin: 10px 0 0;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 14px;
	line-height: 1.7;
}

/* mt auto alinea los pies de las tres tarjetas aunque el texto mida distinto. */
.wt-review__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wt-space-2);
	margin-top: auto;
	padding-top: 20px;
}

.wt-review__who {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.wt-review__author {
	color: var(--wt-text);
	font-family: var(--wt-font-mono);
	font-size: 13px;
	font-weight: var(--wt-weight-med);
	line-height: 1.5;
}

.wt-review__place {
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 11.5px;
	line-height: 1.5;
}

/* --- Pie de seccion ---------------------------------------------------------- */

.wt-reviews__more {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

/* --- Adaptacion ------------------------------------------------------------ */

@media (max-width: 1100px) {
	.wt-reviews__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 782px) {
	.wt-reviews { padding-block: 64px; }

	.wt-reviews__summary {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wt-space-2);
		width: 100%;
	}

	.wt-reviews__grid {
		grid-template-columns: 1fr;
		margin-top: 32px;
	}
}

@media (max-width: 480px) {
	/* El pie no cabe en una linea con el chip del producto al lado. */
	.wt-review__foot {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}

/* ==========================================================================
   NEWSLETTER · nodo 21:64
   --------------------------------------------------------------------------
   Banda de 240 a sangre con degradado horizontal. El fondo cruza el ancho
   completo y el contenido respeta el margen, como la banda de confianza.
   ========================================================================== */

.wt-news {
	background: linear-gradient(to right, #220D39 0%, var(--wt-bg) 100%);
	padding-block: 72px;
}

.wt-news__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wt-space-5);
}

.wt-news__text {
	flex: 1 1 auto;
	min-width: 0;
}

.wt-news__title {
	margin: 0;
	font-size: 30px;
	font-weight: var(--wt-weight-bold);
	letter-spacing: -.5px;
	line-height: 1.2;
	max-width: none;
}

.wt-news__body {
	max-width: 560px;
	margin: 12px 0 0;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 15px;
	line-height: 1.6;
}

/* --- Formulario -------------------------------------------------------------
   Bloque de 480: campo pildora de 53 mas boton pequeno, y la nota legal
   debajo con 12 de hueco. */

.wt-news__side {
	display: flex;
	flex: 0 1 480px;
	flex-direction: column;
	gap: 12px;
	max-width: 480px;
}

.wt-news__form {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
}

/* Sobrescribe el input global: aqui es pildora y sobre fondo morado, asi que
   el relleno es mas claro que el --wt-fill-subtle del sistema. */
.wt-news__form .wt-news__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 53px;
	/* 15 + 1 de borde = los 16 del nodo; 17 + 1 = los 18. */
	padding: 15px 17px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: var(--wt-radius-pill);
	background: rgba(255, 255, 255, .08);
	color: var(--wt-text);
	font-family: var(--wt-font-mono);
	font-size: 14px;
	line-height: 1.5;
}

.wt-news__form .wt-news__input:focus {
	border-color: var(--wt-purple);
}

/* Igual que en el localizador: inerte no significa apagado. La seccion se
   esta revisando como maqueta y grisar el campo se lee como un error. El
   aviso va en que no se puede enfocar y en el texto oculto que lo describe. */
.wt-news__form .wt-news__input:disabled {
	opacity: 1;
	cursor: default;
	-webkit-text-fill-color: var(--wt-text-3);
}

.wt-news__form .wt-btn {
	flex: 0 0 auto;
}

/* Igual que en el buscador del localizador: en espera el boton sigue siendo un
   boton y no se atenua. */

.wt-news__legal {
	margin: 0;
	color: var(--wt-text-3);
	font-family: var(--wt-font-mono);
	font-size: 11.5px;
	line-height: 1.5;
}

.wt-news__legal a {
	color: var(--wt-text-2);
	text-decoration: underline;
}

.wt-news__legal a:hover,
.wt-news__legal a:focus-visible {
	color: var(--wt-text);
}

/* --- Adaptacion -------------------------------------------------------------
   El degradado horizontal deja de tener sentido cuando las dos columnas se
   apilan: pasa a vertical para que el morado siga estando detras del titular. */

@media (max-width: 900px) {
	.wt-news {
		background: linear-gradient(to bottom, #220D39 0%, var(--wt-bg) 100%);
		padding-block: 56px;
	}

	.wt-news__inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wt-space-4);
	}

	.wt-news__side {
		flex-basis: auto;
		max-width: none;
	}
}

@media (max-width: 440px) {
	.wt-news__form { flex-wrap: wrap; }
	.wt-news__form .wt-btn { width: 100%; }
	.wt-news__title { font-size: 24px; }
}


/* =============================================================================
   PUENTE GUTENBERG
   =============================================================================

   Las secciones se editan con bloques nativos (ver inc/patterns.php) y llevan
   las mismas clases que llevaban las plantillas PHP, asi que el 95 % del CSS de
   arriba funciona igual. Lo que cambia es que Gutenberg mete envoltorios y
   margenes de su cosecha. Eso se corrige aqui, en un bloque aparte y comentado,
   y no repartido por el resto del archivo: si algun dia se abandona Gutenberg,
   se borra esta seccion y no hace falta tocar nada mas.
   ========================================================================== */


/*
 * 1. El hueco vertical automatico de Gutenberg.
 *
 * No esta aqui: esta al principio del archivo, porque tiene que colarse entre
 * la regla de Gutenberg y las del diseno y las tres pesan lo mismo. La
 * explicacion completa, alli.
 */


/*
 * 2. Parrafos que antes eran <span>.
 *
 * Gutenberg no tiene bloque de span, asi que los textos cortos del diseno
 * —cifras del hero, promesas de la banda, autor de una resena— son parrafos, y
 * un parrafo trae el margen inferior de base.css.
 */
.wt-kpi__value,
.wt-kpi__label,
.wt-trust__title,
.wt-trust__note,
.wt-score__value,
.wt-score__count,
.wt-review__author,
.wt-review__place,
p.wt-chip {
	margin: 0;
}


/*
 * 3. Botones.
 *
 * Un boton nativo son tres elementos: .wp-block-buttons > .wp-block-button > a.
 * El que hace de hijo flexible de la seccion es el contenedor, no el enlace, y
 * las reglas de arriba estaban escritas para un <a> suelto.
 *
 * El aspecto del boton en si ya esta puenteado en components.css.
 */
.wp-block-buttons.wt-btn-row {
	gap: 18px;
}

.wp-block-buttons.wt-hero__ctas {
	gap: 14px;
}

.wt-reviews__write,
.wt-locator__notice-cta {
	flex: 0 0 auto;
}


/*
 * 4. La cita de las resenas.
 *
 * El bloque de cita trae su propio margen y, segun el tema global, tambien
 * borde y sangria. Aqui la cita es solo semantica: lo que se ve es la tarjeta.
 */
.wt-review__quote.wp-block-quote {
	margin: 0;
	padding: 0;
	border: 0;
}


/*
 * 5. Secciones que se quedan sin tarjetas.
 *
 * La cabecera de categorias y la de drops viven en la pagina; la rejilla la
 * pinta un bloque dinamico. Si no hay categorias con imagen o no hay productos,
 * el bloque emite una rejilla vacia y marcada, y desde PHP no hay forma de
 * quitar la cabecera que esta por encima.
 *
 * Con :has() se esconde la seccion entera desde el CSS. Un titular
 * «Three ways into the universe» seguido de nada es peor que no tener seccion.
 * En el editor se vuelve a mostrar, que alli hace falta verla (editor.css).
 */
.wt-cats:has(.wt-cats__grid.is-empty),
.wt-drops:has(.wt-drops__grid.is-empty) {
	display: none;
}


/*
 * 5 bis. Avisos de los formularios que aun no estan conectados.
 *
 * Aparecen al pulsar el boton del buscador de tiendas o el de la newsletter
 * mientras no tienen destino. Son hijos de .wt-locator__aside y .wt-news__side,
 * que son columnas flexibles con su propio hueco, asi que no llevan margen.
 *
 * El ambar es el mismo token de «ultimas unidades»: en este sistema ese color
 * ya significa «esto existe pero con una condicion», que es exactamente lo que
 * dice el aviso. No se usa el rojo porque nadie se ha equivocado.
 */
.wt-form-note {
	margin: 0;
	color: var(--wt-stock-low);
	font-family: var(--wt-font-mono);
	font-size: 12.5px;
	line-height: 1.5;
}


/*
 * 6. Avisos del editor.
 *
 * Los emiten los bloques dinamicos cuando se quedan sin datos, y solo dentro
 * del editor: explican por que no se ve nada y donde se arregla. El visitante
 * no los recibe nunca.
 */
.wt-block-notice {
	margin: 24px 0 0;
	padding: 16px 20px;
	border: 1px dashed var(--wt-border-contrast);
	border-radius: 12px;
	color: var(--wt-text-2);
	font-family: var(--wt-font-mono);
	font-size: 13px;
	line-height: 1.6;
}