/* ==========================================================
   ACABADO DEL CONFIGURADOR
   ==========================================================
   Se carga después de configurator.css (del plugin) y después de
   phase3.css, así que estas reglas son las últimas que se aplican y
   mandan sobre las anteriores sin necesidad de !important.

   ------------------------------------------------------------------
   Por qué este archivo existe

   Hasta ahora el configurador funcionaba bien pero se veía como un
   formulario: cajas de 1px, texto de .8rem, botones planos, y el
   precio —el dato por el que se entra en esta página— perdido en una
   línea de texto más. Nada estaba roto; solo faltaba el acabado.

   Aquí se hace ese acabado. Y hay una decisión de fondo:

   El plugin ya tiene su propio flujo de pasos —una barra de progreso,
   un contador y los botones Continuar/Regresar— y además, antes, el
   tema montaba encima un segundo índice (pw-rail) con botones para
   saltar a un paso. Ese segundo índice no podía funcionar: el plugin
   oculta todos los pasos menos el activo, así que un enlace a un paso
   oculto no tenía a dónde ir. Dos indicadores de progreso, uno de
   ellos decorativo y otro con botones muertos.

   Aquí se deja uno solo —el del plugin, que es el que sí sigue al
   paso real— y se le da el acabado. El índice que se queda sin uso se
   oculta con display:none en vez de borrarse, para que el JavaScript
   del tema siga siendo inocuo si mañana deja de hacer falta.

   Lo que no se toca: clases, estados, data-roles y el orden de
   carga. Todo eso lo resuelven configurator.js y configurator-ux.js.
   Este archivo solo pinta. */

/* ==========================================================
   1. UNA NAVEGACIÓN, Y QUE FUNCIONE
   ==========================================================
   Aquí hubo dos indicadores de navegación peleándose por lo mismo.

   El plugin trae un asistente de una pantalla: oculta el <fieldset>
   entero de todos los pasos menos el activo y pone Continuar y
   Regresar debajo (configurator.js, pintarFlow). El tema monta encima
   un acordeón: un titular por paso con su número, su nombre y su
   estado, y un cuerpo que se pliega.

   Los dos juntos no podían funcionar, porque el asistente gana: el
   <fieldset> que él oculta se lleva por delante el titular.

   - El titular de un paso que no es el activo quedaba dentro de un
     <fieldset hidden>: ni se veía ni se podía pulsar. Parecía un
     acordeón y no hacía nada. Volver a un paso anterior solo era
     posible con el botón Regresar, que en el teléfono está al final
     del bloque, fuera de la pantalla, y que además se apagaba en
     cuanto el paso actual estaba a medias.
   - El titular del paso activo sí se veía, pero al pulsarlo el
     acordeón se lo volvía a abrir en el acto: el criterio de apertura
     —completo, actual o con el foco dentro— no lo cumplía un paso
     recién pulsado. Tampoco hacía nada.

   Aquí se elige el acordeón y se retira el asistente de la vista.
   Es lo que se pidió: cambiar la madera, el grosor o las medidas
   cuando sea, sin tener que ir a buscar un botón al final.

   La navegación que queda es el titular de cada paso, que ya lleva su
   número, su nombre y su estado. Por eso el índice de fase de arriba
   se retiró también: eran dos formas de llegar al mismo sitio.

   Se retira SOLO de la vista. configurator.js sigue haciendo todo lo
   que le toca —precios, disponibilidad de combinaciones, validación
   del pedido— y eso no se toca. Lo único que deja de hacer es mover
   un contador de posición que ya no significa nada en un acordeón.

   Y se retira con display:none, sin borrar nada del plugin ni de esta
   hoja: si algún día hay que dar marcha atrás, se borran estas tres
   reglas. */
/* El hidden del plugin manda. Su refresh() llama a pintarFlow() en
   cada cambio de opción y ahí es donde decide qué pantalla se ve, así
   que cualquier regla que lo contradiga aquí se convierte en un
   parpadeo en cada pulsación. Con estas tres reglas retiradas, el
   asistente vuelve a ser lo que el plugin ya sabe hacer: una
   diapositiva cada vez. */

/* ==========================================================
   1 BIS. VOLVER A EMPEZAR LAS MEDIDAS
   ==========================================================
   El botón que deshace el bloqueo de la rejilla. Está escondido con
   hidden y lo enseña la JavaScript solo cuando hay una medida marcada,
   porque sin nada marcado no hay nada que deshacer y un botón apagado
   es ruido.

   No es un botón de la barra de acción ni un primaries del tema: es
   una acción secundaria, de contorno, con la misma forma que las
   demás de la familia (.pw-flownext lleva otra, porque esa sí lleva la
   acción principal). */
.pw-medidas-cambiar{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:44px;
	margin:16px 0 0;
	padding:0 20px;
	background:transparent;
	border:1px solid var(--ink);
	border-radius:var(--radius);
	color:var(--ink);
	font-family:var(--font-display);
	font-size:.8rem;
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
	cursor:pointer;
	transition:background var(--p3-dur-2) var(--p3-ease),color var(--p3-dur-2) var(--p3-ease);
}
.pw-medidas-cambiar:hover{background:var(--ink);color:#fff;}
.pw-medidas-cambiar:focus-visible{outline:2px solid var(--mustard-deep);outline-offset:3px;}
.pw-medidas-cambiar[hidden]{display:none;}

/* La pista que explica por qué hay opciones apagadas. Sin ella, media
   rejilla en gris parece un fallo de la web; con ella, es el taller
   diciendo que esa combinación no existe, que es lo que es.

   Va en el mismo tono apagado que las opciones que no tienen precio,
   para que se lea como parte de la rejilla y no como un aviso. */
.pw-medidas-pista.is-error{
	color:var(--danger,#8A2B2B);
	border-color:currentColor;
}
/* El rojo de error se reserva para combinaciones que el servidor no
   tiene; el aviso normal es informativo y va en tinta suave. */
.pw-medidas-pista{color:var(--muted-ink);}

@media (max-width:640px){
	/* Bordes y patas en móvil: una tarjeta debajo de otra, a lo ancho del
	   contenedor.

	   Las dos rejillas van con el mismo formato porque son la misma
	   decisión: una foto grande de un acabado y una nombre debajo. Para
	   eso se comparte el selector en vez de repetir el bloque dos veces:
	   si mañana se mueve un valor, se mueve para las dos.

	   Los selectores llevan DOS clases a propósito (.pw-grid.pw-grid-bordes,
	   0-2-0) para no depender del orden de carga. El plugin trae su
	   .pw-grid-tarifa con una sola clase, y a igual especificidad gana el
	   que se imprime de último. Con dos clases, esta regla gana siempre,
	   se cargue el CSS en el orden que se cargue.

	   minmax(0,1fr) y no 1fr: en un grid, 1fr tiene como mínimo el
	   contenido, así que una palabra larga ensancharía la columna y
	   saldría scroll horizontal. Con minmax(0,1fr) la columna puede
	   encogerse por debajo del texto.

	   El texto se rompía letra por letra por una regla anterior, que
	   autorizaba a partir una palabra en cualquier punto. Ahora solo se
	   parte una palabra que de verdad no cabe, de modo que "Borde plano"
	   y "Borde a 45 grados" salen con las palabras enteras. Y la fuente no
	   se encoge: la tarjeta ya tiene el ancho disponible.

	   La tarjeta ocupa toda la columna y la columna ocupa todo el
	   contenedor. El tope de 460px solo actúa por encima de eso, en
	   pantallas anchas, donde una foto de 600 de alto dejaría de ser
	   una foto de un canto. En un móvil de 320 a 430 es el 100% del
	   espacio, sin huecos.

	   min-width:0 en la tarjeta y en el cuerpo: sin esto, un hijo de un
	   grid se niega a encogerse por debajo de su contenido y empuja la
	   columna. Es la causa habitual del scroll horizontal en móvil.

	   Se reservan 30px de abajo en el cuerpo para la banda "Elegido". Se
	   reservan siempre, no solo al seleccionar, para que el texto no caiga
	   bajo la banda y para que la tarjeta no salte de alto al tocarla. */
	.pw-grid.pw-grid-bordes,
	.pw-grid.pw-grid-patas{
		/* El tope y el centrado los pone LA COLUMNA, no la tarjeta.
		   minmax(0,460px): la columna crece hasta 460 o hasta el ancho
		   del contenedor, lo que llegue primero. justify-content:center
		   la centra cuando sobra. Así todas las tarjetas miden lo mismo,
		   porque miden lo mismo la columna. */
		grid-template-columns:minmax(0,460px);
		justify-content:center;
		gap:20px;
	}
	.pw-grid.pw-grid-bordes .pw-opt,
	.pw-grid.pw-grid-patas .pw-opt{
		/* margin:0 A PROPÓSITO: es lo que arregla la primera tarjeta.

		   Con margin-left/right:auto el ítem del grid deja de estirarse:
		   los márgenes auto mandan y la tarjeta se queda en su ancho de
		   contenido. "Borde plano" no lleva descripción, su contenido es
		   corto, y salía mucho más estrecho que las otras dos. Éstas no
		   se notaban porque su texto largo —«Suplemento sobre el precio
		   de la mesa. +$1,000 MXN»— es más ancho que la pantalla y se
		   pegaba al tope igual.

		   Con margin:0 la tarjeta vuelve a estirarse hasta el borde de la
		   columna, que ya trae el tope de 460. */
		margin:0;
		min-width:0;
		padding:0;
		cursor:pointer;
		-webkit-tap-highlight-color:transparent;
	}
	.pw-grid.pw-grid-bordes .pw-opt-body,
	.pw-grid.pw-grid-patas .pw-opt-body{
		min-width:0;
		padding:14px 16px 30px;
	}
	.pw-grid.pw-grid-bordes .pw-opt-name,
	.pw-grid.pw-grid-patas .pw-opt-name{
		overflow-wrap:break-word;
		hyphens:manual;
		word-break:normal;
		font-size:1.02rem;
		line-height:1.35;
	}
	.pw-grid.pw-grid-bordes .pw-opt-desc,
	.pw-grid.pw-grid-patas .pw-opt-desc{
		overflow-wrap:break-word;
		line-height:1.5;
	}

	/* Estado seleccionado: se ve en la tarjeta entera y no solo en una
	   esquina. Marco de dos píxeles, un halo por fuera y un fondo apenas
	   teñido. La foto se ilumina un poco para que el ojo vaya primero a
	   la imagen, que es lo que hay que mirar. */
	.pw-grid.pw-grid-bordes .pw-opt.pw-selected,
	.pw-grid.pw-grid-patas .pw-opt.pw-selected{
		border-width:2px;
		border-color:var(--ink);
		background:var(--paper-soft);
		box-shadow:0 0 0 3px rgba(17,17,17,.12);
	}
	.pw-grid.pw-grid-bordes .pw-opt.pw-selected .pw-opt-media,
	.pw-grid.pw-grid-patas .pw-opt.pw-selected .pw-opt-media{
		filter:brightness(1.06);
	}
	/* Foco con teclado, para que no se pierda el recorrido sin ratón. */
	.pw-grid.pw-grid-bordes .pw-opt:focus-within,
	.pw-grid.pw-grid-patas .pw-opt:focus-within{
		box-shadow:0 0 0 3px rgba(17,17,17,.28);
	}
	/* Al tocar, la tarjeta baja un pelo: confirma el toque sin esperar a
	   que se vea el nuevo estado. */
	.pw-grid.pw-grid-bordes .pw-opt:active,
	.pw-grid.pw-grid-patas .pw-opt:active{
		transform:translateY(1px);
	}

	/* La banda "Elegido", abajo a la derecha. Abajo a la izquierda caía
	   sobre la foto, que es justo lo que el cliente está mirando. */
	.pw-opt-bordes.pw-selected::after,
	.pw-opt-patas.pw-selected::after{left:auto;right:0;}
}


.pw-medidas-pista{
	margin:14px 0 0;
	font-family:var(--font-body);
	font-size:.82rem;
	line-height:1.5;
	color:var(--muted-ink);
}
.pw-medidas-pista[hidden]{display:none;}

/* ==========================================================
   2. LA BARRA DE PROGRESO
   ==========================================================
   Una fila pequeña con el relleno y el "Paso 3 de 5", en el flujo
   normal de la página y pegada al principio de la diapositiva.

   Antes era position:sticky con la cabecera como referencia, y quedaba
   mal por dos cosas a la vez: ocupaba todo el ancho y se leía como una
   segunda barra de navegación, y al fijarse dependedía de la cadena de
   cajas hasta el body, donde cualquier ancestro con overflow la
   degrada a normal sin avisar. Sin fixed ni sticky no hay nada de eso:
   no se solapa con nada, no salta de sitio y no puede quedar debajo de
   la cabecera. El relleno y el contador los pone el plugin. */
.pw-flow{
	display:flex;
	align-items:center;
	gap:14px;
	width:100%;
	max-width:400px;
	margin:0 0 18px;
	padding:9px 16px;
	list-style:none;
	background:var(--paper-soft);
	border:1px solid var(--line);
	border-radius:99px;
}

.pw-flowbar{
	flex:1 1 auto;
	height:5px;
	border-radius:99px;
	background:var(--line);
	overflow:hidden;
}
.pw-flowbar-fill{
	display:block;
	height:100%;
	border-radius:99px;
	background:linear-gradient(90deg,var(--mustard-deep),var(--mustard));
	transition:width var(--p3-dur-3) var(--p3-ease);
}

.pw-flowcount{
	flex:0 0 auto;
	font-family:var(--font-mono);
	font-size:.66rem;
	font-weight:600;
	letter-spacing:.13em;
	text-transform:uppercase;
	color:var(--muted-ink);
	white-space:nowrap;
	font-variant-numeric:tabular-nums;
}

/* ==========================================================
   3. LA TARJETA DEL PASO
   ==========================================================
   El paso activo es una tarjeta sobre el papel. Se le da borde, aire
   y sombra propia para que se lea como un objeto, no como un tramo
   de página. El borde se engrosa en el paso activo y se vuelve verde
   cuando el paso ya está completo: el color dice el estado, para no
   tener que leerlo. */
.pw-step{
	margin:0 0 26px;
	padding:0;
	border:1px solid var(--line);
	border-radius:var(--radius);
	background:var(--surface);
	overflow:hidden;
	box-shadow:0 14px 34px -28px rgba(17,17,17,.5);
	transition:border-color var(--p3-dur-2) var(--p3-ease);
}
.pw-step[data-pw-state="active"]{border-color:var(--ink);}

/* La entrada de la diapositiva la hace el plugin con .pw-step.is-active,
   que ya viene con su pw-step-in y con el @media que la desactiva si el
   sistema pide menos movimiento. Aquí no se define otra: dos animaciones
   sobre la misma propiedad se pelean por cuál gana, y la que pierda se
   lleva por delante su animation-fill-mode con ella. */


/* El <legend> nativo se queda para lectores de pantalla. Cuando el
   tema monta la cabecera del acordeón, es el botón el que pone el
   nombre visible, y el legend se recorta aquí. */
.pw-step:has(> .pw-step-toggle) > legend{
	position:absolute;
	width:1px;height:1px;
	padding:0;margin:-1px;
	overflow:hidden;
	clip-path:inset(50%);
	white-space:nowrap;
}

.pw-step-head{
	display:flex;
	align-items:center;
	gap:14px;
	padding:16px 18px;
	background:var(--paper-soft);
	border-bottom:1px solid var(--line);
}
.pw-step[data-pw-state="active"] .pw-step-head{
	background:var(--ink);
	border-bottom-color:var(--ink);
}

.pw-step-toggle{
	flex:1 1 auto;
	display:flex;
	align-items:center;
	gap:14px;
	min-height:44px;
	padding:0;
	text-align:left;
	background:none;
	border:0;
	color:var(--ink);
	font-family:var(--font-display);
}
/* Sobre la cabecera negra el texto y el número se invierten, o se
   leerían en negro sobre negro. */
.pw-step[data-pw-state="active"] .pw-step-toggle{color:#fff;}

.pw-step-toggle-num{
	flex:0 0 auto;
	display:flex;
	align-items:center;
	justify-content:center;
	width:28px;height:28px;
	border-radius:50%;
	background:var(--ink);
	color:#fff;
	font-family:var(--font-mono);
	font-size:.74rem;
	font-weight:700;
	font-variant-numeric:tabular-nums;
}
.pw-step[data-pw-state="active"] .pw-step-toggle-num{
	background:var(--mustard);
	color:var(--ink);
}
.pw-step[data-pw-state="done"] .pw-step-toggle-num{
	background:var(--green);
}

.pw-step-toggle-label{
	flex:1 1 auto;
	font-size:1.02rem;
	font-weight:700;
	letter-spacing:-.01em;
	line-height:1.25;
}

.pw-step-toggle-chevron{
	flex:0 0 auto;
	position:relative;
	width:10px;height:10px;
	border-right:1.5px solid currentColor;
	border-bottom:1.5px solid currentColor;
	transform:rotate(45deg) translate(-2px,-2px);
	transition:transform var(--p3-dur-2) var(--p3-ease);
}
.pw-step-toggle[aria-expanded="false"] .pw-step-toggle-chevron{
	transform:rotate(-45deg) translate(-2px,2px);
}
.pw-step-toggle:focus-visible{outline:2px solid var(--mustard-deep);outline-offset:4px;}

.pw-step-status{
	flex:0 0 auto;
	padding:4px 11px;
	border:1px solid var(--line);
	border-radius:99px;
	background:var(--surface);
	font-family:var(--font-mono);
	font-size:.62rem;
	font-weight:600;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--muted-ink);
	white-space:nowrap;
}
.pw-step[data-pw-state="done"] .pw-step-status{
	color:var(--green);
	border-color:color-mix(in srgb, var(--green) 40%, transparent);
}
/* "Ahora" sobre cabecera negra necesita su propio color, o el borde
   claro del chip se pierde contra el fondo. */
.pw-step[data-pw-state="active"] .pw-step-status{
	background:transparent;
	color:var(--mustard);
	border-color:color-mix(in srgb, var(--mustard) 60%, transparent);
}

.pw-step-body{padding:26px 28px 28px;}
.pw-step-body[hidden]{display:none;}
.pw-step-body:not([hidden]){
	animation:p3-rise var(--p3-dur-3) var(--p3-ease) both;
}

/* ==========================================================
   4. EL TÍTULO Y LA AYUDA DEL PASO
   ========================================================== */
.pw-step .pw-step-help{
	margin:0 0 22px;
	font-size:.9rem;
	line-height:1.55;
	color:var(--muted-ink);
	max-width:58ch;
}

.pw-step-sub{
	margin:26px 0 12px;
	font-family:var(--font-mono);
	font-size:.68rem;
	font-weight:600;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--muted-ink);
}
.pw-step-sub:first-child{margin-top:0;}

/* ==========================================================
   5. TARJETAS DE MADERA
   ==========================================================
   La foto va a sangre hasta el borde de la tarjeta y el nombre va en
   una banda blanca debajo. Antes la foto llevaba marco interior y
   radio propio, y con eso parecía una miniatura pegada en una caja. */
.pw-grid{
	grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
	gap:14px;
}
.pw-grid-tarifa{
	grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
	gap:16px;
}

.pw-opt{
	padding:0;
	border:1px solid var(--line);
	border-radius:var(--radius);
	background:var(--surface);
	align-items:stretch;
	text-align:left;
	overflow:hidden;
	box-shadow:0 1px 2px rgba(17,17,17,.03);
	transition:
		border-color var(--p3-dur-2) var(--p3-ease),
		box-shadow var(--p3-dur-2) var(--p3-ease),
		transform var(--p3-dur-2) var(--p3-ease);
}

.pw-opt-media{
	display:block;
	background:var(--paper-soft);
}
.pw-opt-media img{
	display:block;
	width:100%;
	/* 4/3 y no el 16/10 que traía el plugin: las fotos de madera son
	   verticales y a 16/10 se les cortaba media veta. */
	aspect-ratio:4/3;
	object-fit:cover;
	border-radius:0;
}
/* Las fotos de las patas son casi cuadradas y lo que hay que ver es la
   pata entera, de arriba abajo. A 4/3 con cover se le cortaban la parte
   de arriba y la de abajo, que es justo por donde entra la pata.

   Cuadro cuadrado y contain: la foto entra entera y, siendo casi
   cuadrada, no queda bandeja ni se ve menor que antes. El fondo del
   marco se pone claro para que si algún día entra una foto más
   vertical no quede un borde negro. */
/* --------------------------------------------------------------
   Los bordes del canto
   --------------------------------------------------------------
   Tres fotos, y las tres son verticales: 720x1280 y 768x1364, las dos
   9 de 16. A la caja de 4/3 con cover que usan las demás tarjetas, una
   foto así se queda con una franja horizontal: se ve el trozo de en
   medio y se pierden los extremos del canto, que es justo lo que hay
   que enseñar.

   Aquí la caja se pone en la misma proporción que la foto y la imagen
   entra con contain. Con las dos cosas a la vez la foto se ve entera
   en el móvil y en el escritorio, sin recorte y sin bandas, porque la
   proporción de la caja es la de la foto. El contain queda igual: es
   la garantía de que, pase lo que pase con el tamaño, no se recorta.
   -------------------------------------------------------------- */
.pw-grid-bordes{
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:14px;
}
/* Sin tope de ancho, en una columna ancha las tarjetas se estiran a
   más de 500 px de alto y una foto de un canto queda desproporcionada. */
.pw-grid-bordes .pw-opt{max-width:280px;}

.pw-opt-bordes .pw-opt-media img{
	aspect-ratio:9/16;
	object-fit:contain;
	width:100%;
	height:auto;
}
.pw-opt-bordes .pw-opt-media{
	background:var(--paper-soft);
	overflow:hidden;
}
.pw-opt-bordes .pw-ph-fallback{
	aspect-ratio:9/16;
	font-size:1.4rem;
}
.pw-opt-patas .pw-opt-media img{
	aspect-ratio:1/1;
	object-fit:contain;
	width:100%;
	height:auto;
}
.pw-opt-patas .pw-opt-media{
	background:var(--paper-soft);
	overflow:hidden;
}
.pw-opt .pw-ph-fallback{
	aspect-ratio:4/3;
	border-radius:0;
	font-size:2rem;
	color:var(--muted);
}
.pw-opt-nofoto{display:none;}

.pw-opt-body{
	display:block;
	padding:14px 16px 16px;
}
.pw-opt-name{
	display:block;
	margin:0;
	font-family:var(--font-display);
	font-size:.95rem;
	font-weight:700;
	line-height:1.3;
	letter-spacing:-.01em;
	color:var(--ink);
}
.pw-opt-desc{
	display:block;
	margin:4px 0 0;
	font-size:.78rem;
	line-height:1.45;
	color:var(--muted-ink);
}
.pw-grid-tarifa .pw-opt-name{font-size:1.02rem;}
.pw-grid-tarifa .pw-opt-body{padding:16px 18px 18px;}

.pw-opt:hover{
	border-color:var(--ink);
	transform:translateY(-2px);
	box-shadow:0 10px 24px -14px rgba(17,17,17,.34);
}
.pw-opt.pw-selected{
	border-color:var(--ink);
	box-shadow:0 12px 28px -16px rgba(17,17,17,.4);
}

/* La marca de elegido: palomita en negro en la esquina de la foto y
   una banda mostaza abajo con la palabra. Antes era una bolita de
   20px que se confundía con un botón de cerrar. */
.pw-opt.pw-selected::before{
	content:"";
	position:absolute;
	top:0;right:0;
	width:32px;height:32px;
	background:var(--ink);
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12l5 5L20 6' stroke='%23fff' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px 15px no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12l5 5L20 6' stroke='%23fff' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px 15px no-repeat;
}
.pw-opt.pw-selected::after{
	content:"Elegido";
	position:absolute;
	left:0;bottom:0;
	display:flex;
	align-items:center;
	padding:5px 12px;
	background:var(--mustard);
	color:var(--ink);
	font-family:var(--font-mono);
	font-size:.6rem;
	font-weight:600;
	letter-spacing:.1em;
	text-transform:uppercase;
	line-height:1.6;
	-webkit-mask:none;
	mask:none;
}
/* En las tarjetas sin foto la banda de abajo monta sobre la foto, así
   que se le da fondo para que el texto no caiga sobre la veta. */
.pw-opt-nofoto + .pw-opt-body::before{
	content:"";
	display:block;
	height:8px;
	margin:-8px 0 6px;
}

.pw-opt.pw-disabled{
	opacity:.34;
	cursor:not-allowed;
	filter:grayscale(1);
}
.pw-opt.pw-disabled:hover{
	transform:none;
	border-color:var(--line);
	box-shadow:0 1px 2px rgba(17,17,17,.03);
}
.pw-opt:has(input:focus-visible){
	outline:2px solid var(--mustard-deep);
	outline-offset:2px;
}
.pw-opt.pw-just-picked{animation:p3-pick var(--p3-dur-3) var(--p3-ease);}

/* ==========================================================
   6. EL GROSOR
   ==========================================================
   Son dos números, así que el número es la tarjeta. Cifra grande en
   monoespaciada sobre una banda de papel, con la unidad pequeña al
   lado, y al elegir, la banda se pone mostaza. Así la diferencia
   entre 3.5 y 4.5 se ve de un golpe, que es de lo que va el paso. */
.pw-grid-grosores{
	grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	gap:16px;
}
.pw-opt-grosor{
	flex-direction:column;
	align-items:stretch;
	gap:0;
	padding:0;
	text-align:left;
}
.pw-grosor-cifra{
	flex:0 0 auto;
	display:flex;
	align-items:baseline;
	gap:4px;
	padding:22px 18px 18px;
	background:var(--paper-soft);
	border-bottom:1px solid var(--line);
	transition:background var(--p3-dur-2) var(--p3-ease),border-color var(--p3-dur-2) var(--p3-ease);
}
.pw-grosor-num{
	font-family:var(--font-mono);
	font-size:3rem;
	font-weight:800;
	line-height:.9;
	letter-spacing:-.05em;
	color:var(--ink);
	font-variant-numeric:tabular-nums;
}
.pw-grosor-unit{
	font-family:var(--font-display);
	font-size:.78rem;
	font-weight:600;
	color:var(--muted-ink);
}
.pw-opt-grosor .pw-opt-body{padding:16px 18px 18px;}
.pw-opt-grosor .pw-opt-name{margin:0;font-size:.98rem;}
.pw-opt-grosor .pw-opt-desc{margin:6px 0 0;}

.pw-opt-grosor.pw-selected .pw-grosor-cifra{
	background:var(--mustard);
	border-bottom-color:var(--mustard);
}
/* Aquí la banda "Elegido" sobra: el fondo mostaza ya lo dice, y
   además aquí no hay foto y quedaría flotando sobre el texto. */
.pw-opt-grosor.pw-selected::after{content:none;}

/* ==========================================================
   7. LAS MEDIDAS
   ==========================================================
   Este es el paso que más cambia. Antes eran cajitas con un número
   dentro, iguales que los botones del sitio.

   Ahora cada medida es una pieza con la cifra encima y la unidad
   debajo, y el paso se parte en dos columnas: largo a un lado,
   ancho al otro. Al elegir, la casilla se invierte a negro con la
   cifra en blanco y la unidad en mostaza, para que se distinga de
   un vistazo. Las combinaciones que no tienen precio se apagan con
   borde discontinuo y menos contraste, no con opacidad: al 34% el
   número quedaba ilegible en pantallas con brillo alto. */
.pw-axes{
	display:grid;
	grid-template-columns:1fr;
	gap:28px;
}
@media (min-width:700px){
	.pw-axes{grid-template-columns:1fr 1fr;gap:40px;}
}

.pw-axis{
	border:0;
	padding:0;
	margin:0;
	min-width:0;
}
.pw-axis legend{
	font-family:var(--font-mono);
	font-size:.66rem;
	font-weight:600;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--muted-ink);
	padding:0 0 12px;
}

.pw-axis-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(76px,1fr));
	gap:10px;
}

.pw-axis-opt{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:1px;
	min-height:74px;
	padding:10px 6px;
	border:1px solid var(--line);
	border-radius:var(--radius);
	background:var(--surface);
	box-shadow:0 1px 2px rgba(17,17,17,.03);
	transition:
		border-color var(--p3-dur-2) var(--p3-ease),
		background var(--p3-dur-2) var(--p3-ease),
		color var(--p3-dur-2) var(--p3-ease),
		transform var(--p3-dur-2) var(--p3-ease);
}
.pw-axis-val{
	font-family:var(--font-mono);
	font-size:1.3rem;
	font-weight:700;
	line-height:1;
	letter-spacing:-.03em;
	color:var(--ink);
	font-variant-numeric:tabular-nums;
}
.pw-axis-unit{
	font-family:var(--font-display);
	font-size:.62rem;
	font-weight:600;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--muted);
}
.pw-axis-opt:hover{
	border-color:var(--ink);
	transform:translateY(-2px);
	box-shadow:0 8px 18px -12px rgba(17,17,17,.34);
}
.pw-axis-opt.pw-selected{
	background:var(--ink);
	border-color:var(--ink);
	box-shadow:0 10px 22px -14px rgba(17,17,17,.5);
	transform:none;
}
.pw-axis-opt.pw-selected .pw-axis-val{color:#fff;}
.pw-axis-opt.pw-selected .pw-axis-unit{color:var(--mustard);}

.pw-axis-opt.pw-disabled{
	background:var(--paper-soft);
	border-color:var(--line);
	border-style:dashed;
	cursor:not-allowed;
	box-shadow:none;
}
.pw-axis-opt.pw-disabled .pw-axis-val{color:var(--muted);}
.pw-axis-opt.pw-disabled .pw-axis-unit{color:var(--line);}
.pw-axis-opt.pw-disabled:hover{
	transform:none;
	border-color:var(--line);
	box-shadow:none;
}
.pw-axis-opt:has(input:focus-visible){
	outline:2px solid var(--mustard-deep);
	outline-offset:2px;
}

.pw-nota{
	width:100%;
	min-height:56px;
	margin:24px 0 0;
	padding:15px 16px;
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	font-family:var(--font-body);
	font-size:.9rem;
	line-height:1.5;
	color:var(--ink);
	transition:border-color var(--p3-dur-2) var(--p3-ease),box-shadow var(--p3-dur-2) var(--p3-ease);
}
.pw-nota::placeholder{color:var(--muted);}
.pw-nota:focus{
	outline:none;
	border-color:var(--ink);
	box-shadow:0 0 0 3px color-mix(in srgb, var(--mustard) 45%, transparent);
}

.pw-medidas-aviso{
	margin:18px 0 0;
	padding:13px 16px;
	background:color-mix(in srgb, var(--mustard) 18%, var(--paper));
	border:1px solid color-mix(in srgb, var(--mustard-deep) 40%, transparent);
	border-left-width:3px;
	border-radius:var(--radius);
	font-size:.85rem;
	line-height:1.5;
	color:var(--mustard-ink);
}
.pw-species-warn{
	margin:18px 0 0;
	padding:13px 16px;
	background:color-mix(in srgb, var(--mustard) 18%, var(--paper));
	border:1px solid color-mix(in srgb, var(--mustard-deep) 40%, transparent);
	border-left-width:3px;
	border-radius:var(--radius);
	font-size:.85rem;
	line-height:1.5;
	color:var(--mustard-ink);
}

/* ==========================================================
   8. EL RESUMEN Y EL PRECIO
   ==========================================================
   Aquí está el dato por el que se entra en la página, y hasta ahora
   era una línea de texto más.

   El importe se invierte: caja negra, cifra grande en mostaza. Es el
   mismo tratamiento que el botón de comprar que va justo debajo, así
   que se leen como una sola frase: esto es lo que vas a pagar,
   aquí se paga.

   Los datos de arriba van como ficha de dos columnas, con la
   etiqueta en monoespaciada pequeña y la respuesta en display
   grande, que es el criterio que ya usa el resto del sitio para los
   datos técnicos. */
.pw-step-resumen{
	background:var(--paper-soft);
}
.pw-step-resumen .pw-step-body{padding:30px 32px 32px;}

.pw-resumen-title{
	margin:0 0 22px;
	font-family:var(--font-editorial);
	font-weight:400;
	font-size:1.5rem;
	letter-spacing:-.015em;
	color:var(--ink);
}

.pw-resumen-datos{
	display:grid;
	gap:0;
	margin:0 0 26px;
	border-top:1px solid var(--line);
}
.pw-resumen-fila{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:20px;
	padding:13px 0;
	border-bottom:1px solid var(--line);
}
.pw-resumen-fila dt{
	flex:0 0 auto;
	font-family:var(--font-mono);
	font-size:.66rem;
	font-weight:600;
	letter-spacing:.13em;
	text-transform:uppercase;
	color:var(--muted-ink);
}
.pw-resumen-fila dd{
	margin:0;
	font-family:var(--font-display);
	font-size:1rem;
	font-weight:700;
	text-align:right;
	color:var(--ink);
}

.pw-total-resumen{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:20px;
	margin:0;
	padding:24px 26px;
	background:var(--ink);
	border-radius:var(--radius);
	box-shadow:0 16px 34px -20px rgba(17,17,17,.6);
}
.pw-total-resumen .pw-total-label{
	font-family:var(--font-mono);
	font-size:.64rem;
	font-weight:600;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:rgba(255,255,255,.62);
	padding-bottom:4px;
}
.pw-total-resumen .pw-total-amount{
	font-family:var(--font-mono);
	font-size:clamp(1.9rem,3.4vw,2.7rem);
	font-weight:800;
	line-height:.95;
	letter-spacing:-.045em;
	color:var(--mustard);
}
.pw-total-amount.pw-total-bump{animation:p3-bump var(--p3-dur-3) var(--p3-ease);}

.pw-leadtime{
	min-height:1.2em;
	margin:14px 0 0;
	font-family:var(--font-mono);
	font-size:.74rem;
	color:var(--muted-ink);
}
.pw-leadtime-aviso{
	margin:0;
	padding:12px 15px;
	color:var(--mustard-ink);
	background:color-mix(in srgb, var(--mustard) 18%, var(--paper));
	border:1px solid color-mix(in srgb, var(--mustard-deep) 40%, transparent);
	border-radius:var(--radius);
}
.pw-leadtime[hidden],
.pw-leadtime-aviso[hidden]{display:none;}

.pw-precio-nota{
	margin:20px 0 26px;
	font-size:.84rem;
	line-height:1.55;
	color:var(--muted-ink);
	max-width:52ch;
}

/* El botón de comprar, a la altura de la caja del importe para que se
   lean como el final de una frase. */
.pw-submit{
	width:100%;
	min-height:58px;
	margin:26px 0 0;
	padding:0 26px;
	background:var(--mustard);
	border:1px solid var(--mustard);
	border-radius:var(--radius);
	color:var(--ink);
	font-family:var(--font-display);
	font-size:.95rem;
	font-weight:800;
	letter-spacing:.02em;
	cursor:pointer;
	transition:background var(--p3-dur-2) var(--p3-ease),border-color var(--p3-dur-2) var(--p3-ease),color var(--p3-dur-2) var(--p3-ease),transform var(--p3-dur-1) var(--p3-ease),box-shadow var(--p3-dur-2) var(--p3-ease);
	box-shadow:0 10px 26px -14px rgba(122,102,0,.7);
}
.pw-submit:hover:not([disabled]){
	background:var(--ink);
	border-color:var(--ink);
	color:#fff;
	box-shadow:0 14px 30px -14px rgba(17,17,17,.6);
}
.pw-submit:active:not([disabled]){transform:translateY(1px);}
.pw-submit:focus-visible{outline:2px solid var(--mustard-deep);outline-offset:3px;}
.pw-submit[disabled]{
	margin-top:26px;
	background:var(--line);
	border-color:var(--line);
	color:var(--muted-ink);
	box-shadow:none;
	opacity:1;
	cursor:not-allowed;
}
.pw-configurator.is-sending .pw-submit{
	pointer-events:none;
	opacity:.7;
}

.pw-actions{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin:12px 0 0;
}
.pw-actions .button{
	flex:1 1 200px;
	min-height:48px;
	padding:0 18px;
	background:transparent;
	border:1px solid var(--line);
	border-radius:var(--radius);
	color:var(--ink);
	font-family:var(--font-display);
	font-size:.74rem;
	font-weight:700;
	text-align:center;
	text-decoration:none;
	cursor:pointer;
	transition:border-color var(--p3-dur-2) var(--p3-ease),background var(--p3-dur-2) var(--p3-ease);
}
.pw-actions .button:hover{
	background:var(--surface);
	border-color:var(--ink);
}
.pw-actions .button:focus-visible{outline:2px solid var(--mustard-deep);outline-offset:2px;}

/* ==========================================================
   9. LA VISTA PREVIA
   ==========================================================
   Va en la columna estrecha, al lado de los pasos. Pasa a ser una
   tarjeta con sombra propia, con la foto arriba y la tabla de
   proporción debajo. La proporción la calcula el JavaScript con
   aspect-ratio, así que aquí solo se le da forma. */
.pw-preview{
	flex-direction:column;
	align-items:stretch;
	gap:0;
	padding:0;
	margin:0 0 22px;
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:0 18px 40px -28px rgba(17,17,17,.4);
	overflow:hidden;
}
.pw-preview-photo{
	width:100%;
	height:auto;
	aspect-ratio:4/3;
	border:0;
	border-bottom:1px solid var(--line);
}
/* El hueco de la foto tiene proporción fija, así que mientras el
   JavaScript no haya puesto una imagen dentro se ve como un rectángulo
   vacío con borde: un hueco con forma de foto, que es peor que un
   hueco liso porque parece que falta algo. Con :empty desaparece y lo
   que ocupa ese sitio es el nombre de la madera y el dibujo de la
   tabla. */
.pw-preview-photo:empty{display:none;}
.pw-preview-photo img{display:block;width:100%;height:auto;}
.pw-preview-caption{
	flex:1 1 auto;
	padding:16px 18px;
	font-family:var(--font-display);
	font-size:.9rem;
	font-weight:600;
	line-height:1.35;
	color:var(--ink);
}
.pw-preview-dims-caption{
	display:block;
	margin-top:4px;
	font-family:var(--font-mono);
	font-size:.72rem;
	font-weight:400;
	color:var(--muted-ink);
}
.pw-preview-shape{
	flex:0 0 auto;
	display:flex;
	justify-content:center;
	padding:0 18px 18px;
}
.pw-preview-table{
	width:100%;
	max-width:220px;
	padding:10px;
	border:1.5px solid var(--ink);
	border-radius:var(--radius);
	background:var(--paper-soft);
	color:var(--ink);
	font-family:var(--font-mono);
	font-size:.7rem;
	font-weight:600;
	letter-spacing:.04em;
	line-height:1.3;
	text-align:center;
	transition:aspect-ratio var(--p3-dur-3) var(--p3-ease);
}

/* ==========================================================
   10. LA NAVEGACIÓN ENTRE PASOS
   ==========================================================
   Continuar es la acción principal: negra, a la derecha. Regresar es
   secundaria: solo contorno. En el último paso el plugin oculta la
   barra entera, que es lo correcto porque ya no hay a dónde ir. */
.pw-flownav-foot{
	display:flex;
	align-items:center;
	gap:12px;
	margin-top:4px;
}
.pw-flownav-foot.is-last{display:none;}

.pw-flowback{
	flex:0 0 auto;
	min-height:50px;
	padding:0 20px;
	background:transparent;
	border:1px solid var(--line);
	border-radius:var(--radius);
	color:var(--ink);
	font-family:var(--font-display);
	font-size:.82rem;
	font-weight:600;
	cursor:pointer;
	transition:border-color var(--p3-dur-2) var(--p3-ease),background var(--p3-dur-2) var(--p3-ease);
}
.pw-flowback:hover{
	border-color:var(--ink);
	background:var(--surface);
}
.pw-flowback:focus-visible{outline:2px solid var(--mustard-deep);outline-offset:3px;}

.pw-flownav-foot .pw-flownext{
	flex:0 0 auto;
	min-height:50px;
	margin-left:auto;
	padding:0 28px;
	background:var(--ink);
	border:1px solid var(--ink);
	border-radius:var(--radius);
	color:#fff;
	font-family:var(--font-display);
	font-size:.82rem;
	font-weight:700;
	letter-spacing:.02em;
	cursor:pointer;
	box-shadow:0 8px 20px -12px rgba(17,17,17,.55);
	transition:background var(--p3-dur-2) var(--p3-ease),border-color var(--p3-dur-2) var(--p3-ease),color var(--p3-dur-2) var(--p3-ease),transform var(--p3-dur-1) var(--p3-ease);
}
.pw-flownav-foot .pw-flownext:hover:not([disabled]){
	background:var(--mustard);
	border-color:var(--mustard);
	color:var(--ink);
}
.pw-flownav-foot .pw-flownext:active:not([disabled]){transform:translateY(1px);}
.pw-flownav-foot .pw-flownext:focus-visible{outline:2px solid var(--mustard-deep);outline-offset:3px;}
.pw-flownext[disabled],
.pw-flownext.disabled{
	opacity:1;
	background:var(--paper);
	border-color:var(--line);
	color:var(--muted-ink);
	box-shadow:none;
	cursor:not-allowed;
}

/* ==========================================================
   11. LA BARRA DE ABAJO EN MÓVIL
   ==========================================================
   Solo por debajo de 900px, que es donde el resumen queda lejos del
   dedo. El botón NO es una copia del de compra: llama al botón real,
   así que la validación del servidor sigue siendo la que manda. */
.pw-mobile-bar{
	display:none;
	position:fixed;
	left:0;right:0;bottom:0;
	z-index:60;
	align-items:center;
	gap:14px;
	padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));
	background:color-mix(in srgb, var(--paper) 94%, transparent);
	backdrop-filter:blur(10px);
	border-top:1px solid var(--line);
	transition:transform var(--p3-dur-3) var(--p3-ease),opacity var(--p3-dur-2) var(--p3-ease);
}
.pw-bar-away{transform:translateY(110%);opacity:0;pointer-events:none;}

.pw-mobile-bar-info{
	flex:0 0 auto;
	display:flex;
	flex-direction:column;
	line-height:1.2;
}
.pw-mobile-bar-label{
	font-family:var(--font-mono);
	font-size:.62rem;
	font-weight:600;
	letter-spacing:.13em;
	text-transform:uppercase;
	color:var(--muted-ink);
}
.pw-mobile-bar-total{
	font-family:var(--font-mono);
	font-size:1.15rem;
	font-weight:700;
	color:var(--ink);
}
.pw-mobile-bar-btn{
	flex:1 1 auto;
	min-height:52px;
	background:var(--ink);
	border:1px solid var(--ink);
	border-radius:var(--radius);
	color:#fff;
	font-family:var(--font-display);
	font-weight:700;
	font-size:.8rem;
	letter-spacing:.1em;
	text-transform:uppercase;
	cursor:pointer;
	transition:background var(--p3-dur-2) var(--p3-ease),color var(--p3-dur-2) var(--p3-ease);
}
.pw-mobile-bar-btn:hover:not([disabled]){
	background:var(--mustard);
	color:var(--ink);
}
.pw-mobile-bar-btn[disabled]{
	background:var(--line);
	border-color:var(--line);
	color:var(--muted-ink);
	cursor:not-allowed;
}
.pw-mobile-bar-btn:focus-visible{outline:2px solid var(--mustard-deep);outline-offset:2px;}

@media (max-width:899px){
	.pw-mobile-bar{display:flex;}
	/* La barra es fija y ocupa unos 76px. Sin esta holgura taparía el
	   final del formulario: el resumen y el botón real. */
	.pw-configurator{
		--p3-bar-h:76px;
		padding-bottom:var(--p3-bar-h);
	}
	.pw-flow{
		gap:12px;
		padding:10px 14px;
	}
}

/* ==========================================================
   12. PANTALLAS ESTRECHAS
   ==========================================================
   Todo lo demás está en rem y depende del contenedor, así que no
   hace falta nada más. Solo el precio, que en dos columnas con
   "Precio final" y una cifra de 2.7rem no cabe en 320px. */
@media (max-width:640px){
	.pw-step-body{padding:20px 18px 22px;}
	.pw-step-resumen .pw-step-body{padding:22px 18px 24px;}
	.pw-step-head{padding:14px 16px;gap:12px;}
	.pw-step-toggle-label{font-size:.96rem;}

	.pw-total-resumen{
		flex-direction:column;
		align-items:flex-start;
		gap:8px;
		padding:20px;
	}
	.pw-total-resumen .pw-total-label{padding-bottom:0;}
	.pw-resumen-fila{gap:14px;}
	.pw-resumen-fila dd{font-size:.94rem;}

	.pw-grosor-num{font-size:2.6rem;}
	.pw-axis-grid{grid-template-columns:repeat(auto-fit,minmax(68px,1fr));}
	.pw-flownav-foot{flex-wrap:wrap;}
	.pw-flownav-foot .pw-flownext{
		flex:1 1 auto;
		margin-left:0;
	}
	.pw-flowback{flex:1 1 auto;}
}

/* Con movimiento reducido se quitan las elevaciones al pasar el ratón
   y las animaciones, pero no la sombra del estado elegido: esa
   comunica cuál es la opción activa, y sin ella el cliente se queda
   sin saber qué ha escogido. */
@media (prefers-reduced-motion:reduce){
	.pw-opt:hover,
	.pw-axis-opt:hover{transform:none;}
	.pw-opt.pw-just-picked,
	.pw-total-amount.pw-total-bump{animation:none;}
	.pw-step-body:not([hidden]){animation:none;}
	.pw-flowbar-fill{transition:none;}
	.pw-preview-table{transition:none;}
}