/* ==========================================================================
   Cotizador online (/calculadora-impresion-3d/) — Fase UX/UI.
   Namespace .quote-* para no chocar con nada existente. Reutiliza tokens,
   .button, .container, .faq-list/.faq-item y el patrón de "isla oscura"
   (--color-on-dark / --color-on-dark-muted) que ya usan el loader y
   .calculator__viewer.
   ========================================================================== */

/* ---------- Hero oscuro ---------- */

.quote-hero {
	background: var(--color-black);
	color: var(--color-on-dark);
	/* Menos que --space-12 (y bien menos abajo que arriba) a propósito: que
	   se alcance a ver el inicio del cotizador (el uploader) sin necesidad
	   de scroll, para que quede claro adónde lleva la sección oscura. */
	padding-block: var(--space-6) var(--space-3);
	overflow: hidden;
}

.quote-hero__inner {
	display: grid;
	gap: var(--space-8);
	align-items: center;
}

.quote-hero__eyebrow {
	color: var(--color-accent);
}

.quote-hero__title {
	display: flex;
	flex-direction: column;
	font-size: var(--text-h1);
	line-height: 1.05;
	margin-block: var(--space-2) var(--space-3);
	color: var(--color-on-dark);
}

.quote-hero__title-accent {
	color: var(--color-accent);
}

.quote-hero__text {
	max-width: 46ch;
	color: var(--color-on-dark-muted);
	font-size: var(--text-lead);
	margin-bottom: var(--space-3);
}

.quote-hero__benefits {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-2) var(--space-4);
	list-style: none;
	padding: 0;
	max-width: 480px;
}

.quote-hero__benefits li {
	position: relative;
	padding-left: 1.3em;
	font-size: 0.9rem;
	color: var(--color-on-dark-muted);
}

.quote-hero__benefits li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-accent);
}

.quote-hero__visual {
	position: relative;
	min-height: 260px;
	display: none;
}

.quote-hero__svg {
	width: 100%;
	height: auto;
	max-width: 420px;
	margin-inline: auto;
	display: block;
}

.quote-hero__shadow {
	fill: rgba(255, 99, 0, 0.12);
}

.quote-hero__face {
	stroke: var(--color-light-gray);
	stroke-width: 1.5;
	stroke-linejoin: round;
}

.quote-hero__face--top {
	fill: var(--color-graphite);
}

.quote-hero__face--left {
	fill: var(--color-black);
}

.quote-hero__face--right {
	fill: #141414;
}

.quote-hero__hole {
	fill: var(--color-black);
	stroke: var(--color-accent);
	stroke-width: 1.5;
}

.quote-hero__dims line {
	stroke: var(--color-accent);
	stroke-width: 1;
	opacity: 0.7;
}

.quote-hero__label {
	position: absolute;
	font-family: var(--font-display);
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	color: var(--color-on-dark);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	padding: 0.3em 0.6em;
	border-radius: var(--radius-sm);
	white-space: nowrap;
}

.quote-hero__label--dim {
	top: 8%;
	left: 4%;
	color: var(--color-accent);
	background: none;
	border: none;
	font-style: italic;
	font-family: var(--font-body);
}

.quote-hero__label--stl {
	bottom: 30%;
	right: 4%;
}

.quote-hero__label--3mf {
	bottom: 18%;
	right: 14%;
}

.quote-hero__label--note {
	top: 4%;
	right: 2%;
	font-family: var(--font-body);
	font-style: italic;
	color: var(--color-on-dark-muted);
	background: none;
	border: none;
	transform: rotate(-3deg);
}

@media (min-width: 900px) {
	.quote-hero__inner {
		grid-template-columns: 1.1fr 1fr;
	}

	.quote-hero__visual {
		display: block;
	}
}

/* ---------- Indicador de etapas ---------- */

.quote-stages {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	list-style: none;
	padding: 0;
	margin: var(--space-4) 0;
}

.quote-stages__step {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	font-family: var(--font-display);
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

.quote-stages__step span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1.5px solid var(--color-border);
	font-size: 0.8rem;
}

.quote-stages__step.is-active {
	color: var(--color-text);
	font-weight: 600;
}

.quote-stages__step.is-active span {
	border-color: var(--color-accent);
	background: var(--color-accent);
	color: var(--color-black);
}

/* ---------- Layout principal ---------- */

.quote-layout {
	display: grid;
	gap: var(--space-6);
	align-items: start;
	padding-bottom: var(--space-16);
}

.quote-main__title {
	font-size: var(--text-h3);
	margin-bottom: var(--space-1);
}

.quote-main__lead {
	color: var(--color-text-muted);
	max-width: 60ch;
	margin-bottom: var(--space-2);
}

/* ---------- Zona de carga ---------- */

.quote-upload {
	border: 1.5px dashed var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-6) var(--space-4);
	text-align: center;
	cursor: pointer;
	transition: border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}

.quote-upload:hover,
.quote-upload:focus-visible,
.quote-upload.is-dragover {
	border-color: var(--color-accent);
	background: color-mix(in srgb, var(--color-accent) 4%, transparent);
	outline: none;
}

.quote-upload__icon {
	width: 40px;
	height: 40px;
	margin-inline: auto;
	margin-bottom: var(--space-2);
	fill: none;
	stroke: var(--color-mid-gray);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.quote-upload.is-dragover .quote-upload__icon {
	stroke: var(--color-accent);
}

.quote-upload__title {
	font-family: var(--font-display);
	font-weight: 600;
	margin-bottom: 2px;
}

.quote-upload__hint {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	margin-bottom: var(--space-2);
}

.quote-upload__formats {
	font-size: 0.8rem;
	color: var(--color-text-muted);
	margin-bottom: var(--space-3);
}

.quote-upload__formats-soon {
	opacity: 0.7;
}

.quote-upload__button {
	pointer-events: none;
}

.quote-upload__error {
	margin-top: var(--space-2);
	padding: var(--space-2) var(--space-3);
	background: color-mix(in srgb, var(--color-accent) 8%, transparent);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-sm);
	color: var(--color-accent-text);
	font-size: 0.9rem;
}

/* ---------- Pantalla de "procesando" (isla oscura + jueguito) ----------
   Hoy simula el análisis (setTimeout); cuando exista slicing real en
   servidor, esta misma pantalla se queda mientras se espera la respuesta. */

.quote-processing {
	margin-top: var(--space-4);
	padding: var(--space-4) var(--space-3);
	background: var(--color-graphite);
	color: var(--color-on-dark);
	border-radius: var(--radius-md);
	text-align: center;
}

.quote-processing__game {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
	margin-bottom: var(--space-3);
}

.quote-processing__game canvas {
	width: 100%;
	max-width: 300px;
	aspect-ratio: 300 / 340;
	background: color-mix(in srgb, var(--color-white) 4%, transparent);
	border-radius: var(--radius-sm);
	touch-action: none;
	cursor: none;
}

.quote-processing__score {
	font-family: var(--font-display);
	font-size: 0.8rem;
	color: var(--color-on-dark-muted);
	font-variant-numeric: tabular-nums;
}

.quote-processing__title {
	font-family: var(--font-display);
	font-weight: 600;
	margin-bottom: var(--space-2);
}

.quote-processing__title span {
	color: var(--color-accent);
}

.quote-processing__bar {
	height: 4px;
	border-radius: 2px;
	background: color-mix(in srgb, var(--color-white) 12%, transparent);
	overflow: hidden;
	margin-bottom: var(--space-2);
}

.quote-processing__bar span {
	display: block;
	height: 100%;
	width: 0%;
	background: var(--color-accent);
}

.quote-processing__hint {
	font-size: 0.8rem;
	color: var(--color-on-dark-muted);
}

/* ---------- Lista de piezas ---------- */

.quote-pieces {
	margin-top: var(--space-6);
}

.quote-pieces__header {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-3);
}

.quote-pieces__count {
	font-family: var(--font-display);
	font-weight: 600;
}

.quote-pieces__actions {
	display: flex;
	gap: var(--space-3);
}

.quote-text-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-accent-text);
	cursor: pointer;
}

.quote-text-button svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.quote-text-button--muted {
	color: var(--color-text-muted);
}

.quote-configure-all {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	margin-bottom: var(--space-3);
}

.quote-configure-all__title {
	font-weight: 600;
	margin-bottom: var(--space-2);
}

.quote-configure-all__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.quote-configure-all__fields label {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-mid-gray);
}

.quote-configure-all__fields select {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 0.6em;
	border: 1px solid var(--color-light-gray);
	background: var(--color-bg);
	font-family: var(--font-body);
}

.quote-configure-all__buttons {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.quote-piece-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.quote-piece {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	transition: box-shadow var(--motion-fast) var(--ease-standard);
	/* El layout de la fila depende del ancho de la TARJETA, no del de la
	   ventana (con el resumen al lado la tarjeta es bastante más angosta que
	   la pantalla) — ver los @container de más abajo. */
	container-type: inline-size;
	container-name: quote-piece;
}

.quote-piece.is-new {
	animation: di3d-quote-piece-in 320ms var(--ease-standard);
}

@keyframes di3d-quote-piece-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.quote-piece__row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"thumb info toggle"
		"fields fields fields"
		"price price delete";
	gap: var(--space-2) var(--space-3);
	align-items: center;
	padding: var(--space-3);
}

.quote-piece__thumb {
	grid-area: thumb;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	flex: none;
}

.quote-piece__thumb svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: var(--color-mid-gray);
	stroke-width: 1.4;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.quote-piece__info {
	grid-area: info;
	min-width: 0;
}

.quote-piece__name {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.quote-piece__dims {
	font-size: 0.8rem;
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
}

.quote-piece__toggle {
	grid-area: toggle;
	background: none;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform var(--motion-fast) var(--ease-standard);
}

.quote-piece__toggle svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: var(--color-text);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.quote-piece__toggle[aria-expanded="true"] {
	transform: rotate(180deg);
	border-color: var(--color-accent);
}

.quote-piece__fields {
	grid-area: fields;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2) var(--space-3);
}

.quote-piece__field--qty {
	grid-column: 1 / -1;
}

.quote-piece__field label {
	display: block;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-mid-gray);
	margin-bottom: 3px;
}

.quote-piece__field select {
	width: 100%;
	padding: 0.5em;
	border: 1px solid var(--color-light-gray);
	background: var(--color-bg);
	font-family: var(--font-body);
	font-size: 0.85rem;
}

.quote-piece__stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--color-light-gray);
}

.quote-piece__stepper button {
	width: 40px;
	height: 44px;
	background: var(--color-bg);
	border: 0;
	font-size: 1rem;
	cursor: pointer;
	color: var(--color-text);
}

.quote-piece__stepper span {
	min-width: 28px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.quote-piece__price {
	grid-area: price;
	font-family: var(--font-display);
	font-weight: 600;
	justify-self: end;
}

.quote-piece__price-unit {
	display: block;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 0.75rem;
	color: var(--color-text-muted);
	text-align: right;
}

.quote-piece__delete {
	grid-area: delete;
	justify-self: end;
	background: none;
	border: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-mid-gray);
	cursor: pointer;
}

.quote-piece__delete svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.quote-piece__delete:hover {
	color: var(--color-accent-text);
}

/* Panel desplegable de una pieza ("Opciones avanzadas"): relleno y
   orientación apilados a la izquierda; a la derecha, la caja de comentarios
   ocupa el alto de ambos. En mobile todo se apila en una sola columna. */

.quote-piece__expand {
	border-top: 1px solid var(--color-border);
	padding: var(--space-3);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
}

.quote-piece__expand-title {
	font-family: var(--font-display);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-accent-text);
	margin: 0;
}

.quote-piece__advanced {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2) var(--space-3);
	width: 100%;
}

.quote-piece__advanced label {
	display: block;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-mid-gray);
}

.quote-piece__advanced select,
.quote-piece__advanced textarea {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 0.5em;
	border: 1px solid var(--color-light-gray);
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 0.85rem;
	text-transform: none;
	letter-spacing: normal;
}

.quote-piece__advanced textarea {
	resize: vertical;
	min-height: 96px;
	line-height: 1.4;
}

.quote-piece__advanced textarea::placeholder {
	color: var(--color-text-muted);
}

@media (min-width: 640px) {
	.quote-piece__advanced {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"infill notes"
			"orientation notes";
	}

	.quote-piece__adv-field--infill {
		grid-area: infill;
	}

	.quote-piece__adv-field--orientation {
		grid-area: orientation;
	}

	.quote-piece__adv-field--notes {
		grid-area: notes;
		display: flex;
		flex-direction: column;
	}

	.quote-piece__adv-field--notes textarea {
		flex: 1 1 auto;
		min-height: 96px;
	}
}

/* Mientras el corte del relleno elegido no ha llegado (ver quote-app.js). */

.quote-piece.is-pending .quote-piece__price > span:first-child {
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--color-text-muted);
	animation: di3d-quote-pending 1.2s ease-in-out infinite;
}

@keyframes di3d-quote-pending {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.4;
	}
}

@media (prefers-reduced-motion: reduce) {
	.quote-piece.is-pending .quote-piece__price > span:first-child {
		animation: none;
	}
}

.quote-duplicate-hint {
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-3);
}

.quote-duplicate-hint__title {
	font-weight: 600;
	margin-bottom: 2px;
}

.quote-duplicate-hint__text {
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

/* Tarjeta mediana (tablet, o desktop con el resumen al lado): dos líneas —
   arriba nombre, precio y botones; abajo material, color y cantidad. */
@container quote-piece (min-width: 520px) {
	.quote-piece__row {
		grid-template-columns: auto 1fr auto auto auto;
		grid-template-areas:
			"thumb info price delete toggle"
			". fields fields fields fields";
	}

	.quote-piece__fields {
		display: flex;
		gap: var(--space-3);
	}

	.quote-piece__field {
		min-width: 110px;
	}
}

/* Tarjeta ancha (ej. desktop de 1440px con el resumen al lado): todo en una
   sola línea, como el diseño original. "delete" y "toggle" son celdas
   distintas — antes eliminar compartía la celda "toggle" y los dos botones
   quedaban uno encima del otro (el de desplegar tapaba al de eliminar). El
   espacio entre columnas baja un escalón para que el nombre no se quede sin
   lugar con la columna extra. */
@container quote-piece (min-width: 900px) {
	.quote-piece__row {
		grid-template-columns: auto 1.4fr auto auto auto auto auto auto;
		grid-template-areas: "thumb info fields fields fields price delete toggle";
		column-gap: var(--space-2);
	}
}

/* ---------- Resumen (sidebar) ---------- */

.quote-summary {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.quote-summary__card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	box-shadow: 0 20px 40px -28px rgba(10, 10, 10, 0.25);
}

.quote-summary__card h2 {
	font-size: 1.15rem;
	margin-bottom: 2px;
}

.quote-summary__meta {
	color: var(--color-text-muted);
	font-size: 0.85rem;
	margin-bottom: var(--space-3);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.quote-summary__rows {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin-bottom: var(--space-3);
}

.quote-summary__rows > div {
	display: flex;
	justify-content: space-between;
	font-size: 0.9rem;
}

.quote-summary__rows dt {
	color: var(--color-text-muted);
}

.quote-summary__rows dd {
	font-variant-numeric: tabular-nums;
}

.quote-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-block: var(--space-3);
	border-top: 1px solid var(--color-border);
	margin-bottom: var(--space-1);
}

.quote-summary__total strong {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-variant-numeric: tabular-nums;
}

.quote-summary__disclaimer {
	font-size: 0.75rem;
	color: var(--color-text-muted);
	margin-bottom: var(--space-3);
}

.quote-summary__cta {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-bottom: var(--space-2);
}

.quote-summary__cta[aria-disabled="true"] {
	opacity: 0.5;
	pointer-events: none;
}

.quote-summary__save {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-bottom: var(--space-3);
}

.quote-summary__payments {
	text-align: center;
	font-size: 0.72rem;
	color: var(--color-text-muted);
}

.quote-summary__b2b {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
}

.quote-summary__b2b-title {
	font-family: var(--font-display);
	font-weight: 600;
	margin-bottom: var(--space-1);
}

.quote-summary__b2b-text {
	font-size: 0.85rem;
	color: var(--color-text-muted);
	margin-bottom: var(--space-3);
}

@media (min-width: 1024px) {
	.quote-layout {
		grid-template-columns: 1fr 360px;
	}

	.quote-summary {
		position: sticky;
		top: calc(var(--space-8) + 72px);
	}
}

/* ---------- Barra fija de resumen (solo mobile/tablet) ----------
   Debajo de 1024px el resumen deja de ser sticky y vive al final de la
   lista de piezas — sin esto, para pagar habría que bajar toda la lista.
   Se muestra/oculta vía JS (quote-app.js) según si hay piezas cargadas. */

.quote-mobile-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-3);
	padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
	background: var(--color-white);
	border-top: 1px solid var(--color-border);
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
}

.quote-mobile-bar[hidden] {
	display: none;
}

.quote-mobile-bar__info {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	min-width: 0;
}

.quote-mobile-bar__count {
	font-size: 0.72rem;
	color: var(--color-text-muted);
}

.quote-mobile-bar__total {
	font-family: var(--font-display);
	font-size: 1.1rem;
}

.quote-mobile-bar__cta {
	flex: none;
	padding-block: 0.7em;
}

body.has-quote-mobile-bar {
	padding-bottom: 64px;
}

@media (min-width: 1024px) {
	.quote-mobile-bar {
		display: none !important;
	}

	body.has-quote-mobile-bar {
		padding-bottom: 0;
	}
}

/* ---------- Sección B2B oscura ---------- */

.quote-b2b {
	background: var(--color-graphite);
	color: var(--color-on-dark);
	padding-block: var(--space-12);
}

.quote-b2b__inner {
	display: grid;
	gap: var(--space-6);
	align-items: center;
}

.quote-b2b__eyebrow {
	color: var(--color-accent);
}

.quote-b2b__title {
	display: flex;
	flex-direction: column;
	font-size: var(--text-h2);
	margin-block: var(--space-2) var(--space-3);
	color: var(--color-on-dark);
}

.quote-b2b__title-accent {
	color: var(--color-accent);
}

.quote-b2b__lead {
	color: var(--color-on-dark-muted);
	max-width: 52ch;
	margin-bottom: var(--space-4);
}

.quote-b2b__benefits {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
	list-style: none;
	padding: 0;
	margin-bottom: var(--space-4);
}

.quote-b2b__benefits h3 {
	font-size: 1rem;
	color: var(--color-on-dark);
	margin-bottom: 2px;
}

.quote-b2b__benefits p {
	font-size: 0.85rem;
	color: var(--color-on-dark-muted);
}

.quote-b2b__media img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	display: block;
}

@media (min-width: 640px) {
	.quote-b2b__benefits {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1024px) {
	.quote-b2b__inner {
		grid-template-columns: 1.1fr 1fr;
	}
}

/* ---------- FAQ ---------- */

.quote-faq__header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}

.quote-faq__all {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-accent-text);
	white-space: nowrap;
}

.quote-faq__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2);
}

@media (min-width: 768px) {
	.quote-faq__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-2) var(--space-4);
	}
}

/* ---------- Toast (feedback de CTAs sin backend todavía) ---------- */

.quote-toast {
	position: fixed;
	left: 50%;
	bottom: var(--space-4);
	transform: translate(-50%, 12px);
	background: var(--color-black);
	color: var(--color-on-dark);
	padding: 0.85em 1.4em;
	border-radius: var(--radius-pill);
	font-size: 0.9rem;
	box-shadow: 0 16px 32px -16px rgba(10, 10, 10, 0.4);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--motion-medium) var(--ease-standard), transform var(--motion-medium) var(--ease-standard);
	z-index: 200;
	max-width: calc(100vw - var(--space-6));
	text-align: center;
}

.quote-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}