/* Cotizador guiado (/cotizador/). Se encola solo en esa pagina, despues de ob-child
   (ver functions.php). Orden de las reglas igual al que tenian en style.css. */

@media (max-width: 781px) {
	/* .ob-cot-wrap (cotizador) is the same shape as .ob-product above: .alignfull
	   with no background of its own (only vertical padding), wrapping a plain
	   #ob-cotizador-app div with no align class. At desktop it's recentered by
	   Gutenberg's "constrained" layout (max-width:960px + auto margins), so it
	   never touches the viewport edge and any overflow is invisible slack. At
	   mobile the app IS the full width (960px doesn't constrain a narrower
	   viewport, and .ob-cot-wrap itself has no horizontal padding of its own),
	   so it inherits the exact same negative-margin/asymmetric-body-padding
	   break-out bug — clipping the H1 question and intro copy on both edges. */
	.ob-cot-wrap {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* ==========================================================================
   COTIZADOR GUIADO  (patterns/cotizador.php + assets/cotizador.js)
   Herramienta de descubrimiento para el familiar que compra con miedo a
   equivocarse. Tokens de marca, touch targets >=44px, cuerpo >=16px (público
   adulto mayor). Coral solo en CTA. Recomienda modelos REALES del catálogo.
   ========================================================================== */
#ob-cotizador-app {
	color: var(--ob-grafito);
	font-size: 16px;
	line-height: 1.6;
}

/* Barra de pasos */
.ob-cot-head {
	position: sticky;
	top: 0;
	z-index: 5;
	background: #fff;
	border-bottom: 1px solid var(--ob-linea);
	margin: 0 -18px 26px;
}

/* Mobile override for the -18px break-out above. MUST live here, AFTER the
   unconditional rule: both are specificity 0-1-0, and the unconditional
   `margin` shorthand above sets margin-left/right too — so with equal
   specificity, whichever declaration comes LATER in source order wins,
   regardless of which one sits inside a media query. An earlier attempt put
   this override inside the `@media (max-width:781px)` block up near
   .ob-cot-wrap (source position ~350 lines above this point) and it was
   dead code: getComputedStyle(.ob-cot-head).marginLeft at 375px still read
   "-18px", not "-16px" — the later unconditional rule silently won every
   time. Confirmed fixed the same way: computed marginLeft/marginRight now
   read "-16px" at ≤781px.
   -18px assumed a horizontal padding on #ob-cotizador-app that never
   existed (grep confirms no rule ever set it) — the sticky steps pill row
   was just overflowing 18px past its real container on both sides. Now
   that .ob-cot-wrap above has a real, local (non-viewport-relative) 16px
   padding, -16px matches it exactly so the pill row's white background
   sits flush instead of overshooting. */
@media (max-width: 781px) {
	.ob-cot-head {
		margin-left: -16px;
		margin-right: -16px;
	}
}

.ob-cot-steps {
	display: flex;
	max-width: 960px;
	margin: 0 auto;
	padding: 14px 18px;
	gap: 8px;
}
.ob-cot-stp {
	flex: 1;
	text-align: center;
	font-size: 13px;
	color: var(--ob-gris);
	font-weight: 600;
	position: relative;
	padding-top: 26px;
}
.ob-cot-stp::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--ob-linea);
}
.ob-cot-stp.done::before {
	content: '✓';
	background: var(--ob-verde);
	border-color: var(--ob-verde);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-size: 13px;
}
.ob-cot-stp.active::before {
	background: var(--ob-azul);
	border-color: var(--ob-azul);
}
.ob-cot-stp.active {
	color: var(--ob-azul);
}

/* Pasos */
.ob-cot-step {
	display: none;
}
.ob-cot-step.show {
	display: block;
	animation: obCotFade 0.25s ease;
}
@keyframes obCotFade {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ob-cot-step.show { animation: none; }
}
.ob-cot-q {
	text-align: center;
	font-size: 27px;
	margin: 0 0 8px;
	color: var(--ob-azul);
}
.ob-cot-sub {
	text-align: center;
	color: var(--ob-gris);
	margin: 0 auto 16px;
	max-width: 560px;
}
/* Micro-refuerzo de confianza: baja la fricción de arrancar el cotizador. */
.ob-cot-reassure {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 10px;
	margin: 0 auto 24px;
}
.ob-cot-reassure span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ob-verde-osc);
	background: #E1F5EE;
	padding: 6px 14px;
	border-radius: 999px;
}
.ob-cot-hint {
	text-align: center;
	color: var(--ob-gris);
	font-size: 15px;
	margin-top: 18px;
}

/* Tarjetas de uso (paso 0) */
.ob-cot-cards {
	display: grid;
	/* Grilla fluida: 3 columnas en desktop, 2 en tablet, 1 en mobile. Cards más
	   chicas = paso 0 más liviano y dinámico (adiós "bloques grandes"). */
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
}
.ob-cot-c {
	display: block;
	width: 100%;
	text-align: left;
	background: #fff;
	border: 2px solid var(--ob-linea);
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.18s, transform 0.18s;
	font: inherit;
	color: inherit;
	padding: 0;
}
.ob-cot-c:hover {
	border-color: var(--ob-verde);
	box-shadow: 0 12px 28px rgba(20, 69, 122, 0.14);
	transform: translateY(-3px);
}
.ob-cot-c:focus-visible {
	outline: 3px solid var(--ob-azul);
	outline-offset: 2px;
}
.ob-cot-c.sel {
	border-color: var(--ob-azul);
	box-shadow: 0 8px 24px rgba(20, 69, 122, 0.15);
}
.ob-cot-c-ph {
	height: 128px;
	/* Fondo tintado suave: el producto POP-ea en vez de flotar sobre blanco. */
	background: linear-gradient(180deg, #fff 0%, var(--ob-gris-cl) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	border-bottom: 1px solid var(--ob-linea);
}
.ob-cot-c-ph img {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}
.ob-cot-ph0 {
	color: #cbd5e0;
	font-size: 13px;
	text-align: center;
}
.ob-cot-c-tx {
	display: block;
	padding: 14px 16px;
}
.ob-cot-c-tt {
	display: block;
	font-size: 17px;
	color: var(--ob-grafito);
	font-weight: 700;
}
.ob-cot-c-d {
	display: block;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ob-gris);
	margin-top: 5px;
}
.ob-cot-c-tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: var(--ob-verde-osc);
	background: #E1F5EE;
	padding: 3px 10px;
	border-radius: 20px;
	margin-top: 10px;
}
/* Pulso del catálogo: badge "N modelos para vos" (inyectado por JS). El
   catálogo REACCIONA a cada opción desde el primer paso. */
.ob-cot-c-count {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--ob-azul);
}
.ob-cot-c-count svg { color: var(--ob-verde); flex: 0 0 14px; }
.ob-cot-c-count b { font-weight: 800; }
/* Puerta del indeciso: tarjeta de ayuda, tintada en azul de marca para leerse
   como "el que no sabe, por acá" y no como otra silla más. */
.ob-cot-c-help {
	border-color: var(--ob-azul);
	background: #F7FAFD;
	text-decoration: none;
}
.ob-cot-c-ph-help {
	color: var(--ob-azul);
	background: linear-gradient(180deg, #F7FAFD 0%, #E6EFF8 100%);
}

/* Contador del total del surtido, arriba de las cards (inyectado por JS). */
.ob-cot-pulse {
	text-align: center;
	font-size: 15px;
	color: var(--ob-gris);
	background: var(--ob-gris-cl);
	border-radius: 12px;
	padding: 12px 18px;
	margin: 0 auto 20px;
	max-width: 620px;
}
.ob-cot-pulse b { color: var(--ob-azul); font-weight: 800; }

/* Opciones (paso 1). auto-fit y no repeat(3): las preguntas tienen 2, 3 o 4
   opciones — el 3 fijo dejaba un huérfano solo abajo con 4 (peso, asiento)
   y un hueco con 2 (critique 2026-07-27, consistencia). */
.ob-cot-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
}
.ob-cot-opt {
	display: block;
	width: 100%;
	background: #fff;
	border: 2px solid var(--ob-linea);
	border-radius: 12px;
	padding: 18px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
	font: inherit;
	color: inherit;
	min-height: 44px;
}
.ob-cot-opt:hover {
	border-color: var(--ob-verde);
}
.ob-cot-opt:focus-visible {
	outline: 3px solid var(--ob-azul);
	outline-offset: 2px;
}
.ob-cot-opt.sel {
	border-color: var(--ob-azul);
	background: var(--ob-gris-cl);
}
.ob-cot-opt .ic {
	display: block;
	font-size: 30px;
}
.ob-cot-opt .tt {
	display: block;
	font-size: 16px;
	color: var(--ob-grafito);
	font-weight: 700;
	margin-top: 6px;
}
.ob-cot-opt .d {
	display: block;
	font-size: 14px;
	color: var(--ob-gris);
	margin-top: 4px;
}
/* Contador de modelos por preferencia (paso 1, inyectado por JS). */
.ob-cot-opt-n {
	display: inline-block;
	margin-top: 10px;
	font-size: 14px;
	font-weight: 800;
	color: var(--ob-azul);
	background: var(--ob-gris-cl);
	padding: 3px 10px;
	border-radius: 999px;
}
.ob-cot-opt.sel .ob-cot-opt-n { background: #fff; }
.ob-cot-talle {
	background: var(--ob-gris-cl);
	border-radius: 12px;
	padding: 14px 16px;
	margin-top: 18px;
	font-size: 14px;
	color: var(--ob-gris);
}
.ob-cot-talle b {
	color: var(--ob-azul);
}

/* Navegación */
.ob-cot-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 28px;
	gap: 12px;
}
.ob-cot-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--ob-coral);
	/* Texto grafito en reposo (5.6:1), blanco solo en hover sobre coral-osc: mismo patron que style.css:112. */
	color: var(--ob-grafito);
	border: none;
	border-radius: 10px;
	padding: 13px 26px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	text-decoration: none;
	min-height: 48px;
	transition: background 0.15s;
}
.ob-cot-btn:hover {
	background: var(--ob-coral-osc);
	color: #fff;
}
.ob-cot-btn.ghost {
	background: #fff;
	color: var(--ob-azul);
	border: 2px solid var(--ob-linea);
}
.ob-cot-btn.ghost:hover {
	background: var(--ob-gris-cl);
	color: var(--ob-azul);
}
.ob-cot-btn.wa {
	background: #0E7A3E;
	/* Blanco sobre verde 5.4:1 — el grafito base del boton coral daria 2.4:1 aca. */
	color: #fff;
}
.ob-cot-btn.wa:hover {
	background: #0A6533;
	color: #fff;
}

/* Resultado: tarjetas de modelos reales */
.ob-cot-rhead {
	text-align: center;
	margin-bottom: 22px;
}
.ob-cot-rhead h2 {
	font-size: 27px;
	color: var(--ob-azul);
}
.ob-cot-rhead p {
	color: var(--ob-gris);
	max-width: 620px;
	margin: 6px auto 0;
}
/* La cantidad real define el layout: con 1-2 modelos las columnas se ajustan
   y se centran — una tarjeta sola en una grilla de tres se leía "no tengo
   más" en vez de "esta es la tuya" (critique 2026-07-27). */
.ob-cot-models {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 340px));
	justify-content: center;
	gap: 16px;
}

/* Modo protagonista (un solo modelo): tarjeta horizontal con foto grande.
   El estado de 1 resultado es el MÁS frecuente en las ramas reales — se
   diseña como veredicto, no como grilla vacía. */
.ob-cot-models.solo {
	grid-template-columns: minmax(0, 680px);
}
.ob-cot-models.solo .ob-cot-m {
	flex-direction: row;
	align-items: stretch;
}
.ob-cot-models.solo .ob-cot-m .ob-cot-ph {
	height: auto;
	min-height: 240px;
	flex: 0 0 44%;
}
.ob-cot-models.solo .ob-cot-b {
	flex: 1;
	justify-content: center;
}

/* Echo del caso sobre el veredicto: lo elegido, en humano, con salida para
   cambiar UNA respuesta (no rehacer todo). */
.ob-cot-echo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 14px;
	margin-bottom: 12px;
}
.ob-cot-echo-tx {
	font-size: 14px;
	font-weight: 600;
	color: var(--ob-gris);
	background: var(--ob-gris-cl);
	border-radius: 999px;
	padding: 8px 16px;
}
.ob-cot-echo-edit {
	font: 700 13px/1 Montserrat, -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--ob-azul);
	background: #fff;
	border: 2px solid var(--ob-linea);
	border-radius: 999px;
	padding: 0 16px;
	min-height: 44px;
	cursor: pointer;
	transition: border-color .18s var(--ob-ease), background .18s var(--ob-ease);
}
.ob-cot-echo-edit:hover {
	border-color: var(--ob-azul);
	background: var(--ob-gris-cl);
}

/* La línea del asesor en cada tarjeta: qué distingue a ESTE modelo. Verde =
   confianza (nunca coral: no es una acción). */
.ob-cot-why {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ob-verde-osc);
	background: #e1f5ee;
	border-radius: 8px;
	padding: 7px 10px;
	margin: 2px 0 6px;
}
.ob-cot-m {
	background: #fff;
	border: 1px solid var(--ob-linea);
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
}
.ob-cot-m .ob-cot-ph {
	height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	background: #fff;
	border-bottom: 1px solid var(--ob-linea);
}
.ob-cot-m .ob-cot-ph img {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}
.ob-cot-b {
	padding: 14px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.ob-cot-sku {
	font-family: monospace;
	font-size: 12px;
	color: var(--ob-gris);
}
.ob-cot-m h3 {
	font-size: 15px;
	color: var(--ob-grafito);
	font-weight: 700;
	margin: 3px 0 8px;
	line-height: 1.3;
}
.ob-cot-m h3 a {
	color: inherit;
	text-decoration: none;
}
.ob-cot-m h3 a:hover {
	color: var(--ob-azul);
}
/* 15px, no 13: acá viven la capacidad y la medida del asiento — la info que
   decide el calce, para un público que sesga a baja visión (critique 2026-07-27). */
.ob-cot-spec {
	font-size: 15px;
	color: var(--ob-gris);
	margin-bottom: 3px;
}
.ob-cot-spec b {
	color: var(--ob-grafito);
}
/* Aviso de medida aproximada: no es un error ni una oferta — azul de marca
   sobre gris suave, nunca coral (coral = acción). */
.ob-cot-warn {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ob-grafito);
	background: var(--ob-gris-cl);
	border-left: 3px solid var(--ob-azul);
	border-radius: 6px;
	padding: 8px 10px;
	margin: 4px 0 6px;
}
/* Salida a las reforzadas bajo un resultado de una sola silla. */
.ob-cot-alt {
	display: flex;
	justify-content: center;
	margin-top: 16px;
}
.ob-cot-pr {
	font-size: 21px;
	font-weight: 800;
	color: var(--ob-azul);
	margin-top: 8px;
}
.ob-cot-cuo {
	font-size: 13px;
	color: var(--ob-verde-osc);
}
.ob-cot-cons {
	font-size: 15px;
	font-weight: 700;
	color: var(--ob-coral-osc);
	margin-top: 8px;
}
.ob-cot-add {
	/* Es un <a> (CTA con href real): display y color van con el id de la app
	   más abajo para ganarle al CSS de enlaces de Kadence, que carga después. */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
	width: 100%;
	margin-top: 12px;
	background: var(--ob-azul);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 12px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	min-height: 44px;
	transition: background 0.15s;
}
.ob-cot-add:hover {
	background: var(--ob-azul-osc);
}
#ob-cotizador-app .ob-cot-add,
#ob-cotizador-app .ob-cot-add:hover,
#ob-cotizador-app .ob-cot-add:focus-visible {
	color: #fff;
	text-decoration: none;
}
#ob-cotizador-app .ob-cot-add:focus-visible {
	outline: 3px solid var(--ob-azul);
	outline-offset: 2px;
}
.ob-cot-add[aria-disabled="true"] {
	opacity: 0.7;
	cursor: progress;
}
.ob-cot-add.wa {
	background: #0E7A3E;
}
.ob-cot-add.wa:hover {
	background: #0A6533;
}

/* Cross-sell almohadones */
.ob-cot-cross {
	background: #fff;
	border: 1px solid var(--ob-linea);
	border-radius: 16px;
	padding: 20px;
	margin-top: 22px;
}
.ob-cot-cross h3 {
	font-size: 18px;
	color: var(--ob-grafito);
	font-weight: 700;
}
.ob-cot-cross-sub {
	color: var(--ob-gris);
	font-size: 14px;
	margin-top: 4px;
}
.ob-cot-cross-lst {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	margin-top: 14px;
}
.ob-cot-alm {
	border: 1px solid var(--ob-linea);
	border-radius: 10px;
	padding: 10px 8px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s;
	text-decoration: none;
	display: block;
}
.ob-cot-alm:hover {
	border-color: var(--ob-verde);
}
.ob-cot-alm img {
	height: 64px;
	object-fit: contain;
	max-width: 100%;
}
.ob-cot-alm .n {
	display: block;
	font-size: 14px;
	color: var(--ob-grafito);
	margin: 6px 0 3px;
	line-height: 1.25;
	min-height: 30px;
}
.ob-cot-alm .p {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--ob-azul);
}
.ob-cot-extra {
	margin-top: 14px;
	font-size: 13px;
	color: var(--ob-gris);
}
.ob-cot-extra b {
	color: var(--ob-coral-osc);
}
.ob-cot-chip {
	display: inline-block;
	background: var(--ob-gris-cl);
	color: var(--ob-azul);
	font-weight: 700;
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 20px;
	margin: 2px;
}
/* Chip que abre la ficha (ramas consultivas con producto en Woo): se lee y se
   toca como un enlace. Sin botón de comprar — el cierre sigue siendo el asesor. */
.ob-cot-chip--link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 8px 16px;
	margin: 4px;
	font-size: 14px;
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--ob-azul);
	transition: background .15s ease, box-shadow .15s ease;
}
.ob-cot-chip--link:hover,
.ob-cot-chip--link:focus-visible {
	background: var(--ob-gris-cl);
	box-shadow: 0 2px 8px rgba(20, 69, 122, .18);
}
.ob-cot-chip-arrow {
	font-size: 18px;
	line-height: 1;
}

/* Confianza + postural */
.ob-cot-conf {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
	font-size: 14px;
	color: var(--ob-gris);
	margin-top: 22px;
}
.ob-cot-quote {
	background: #fff;
	border-radius: 18px;
	padding: 34px;
	text-align: center;
	box-shadow: 0 10px 30px rgba(20, 69, 122, 0.1);
}
.ob-cot-quote .ic {
	font-size: 46px;
}
.ob-cot-quote h2 {
	color: var(--ob-grafito);
	margin: 10px 0;
}
.ob-cot-quote p {
	color: var(--ob-gris);
	max-width: 560px;
	margin: 0 auto 18px;
}
.ob-cot-quote-cta {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}
/* Captura de lead en el resultado: activo propio, gancho de asesoramiento */
.ob-cot-lead {
	max-width: 560px;
	margin: 26px auto 0;
	padding: 20px 22px;
	background: var(--ob-gris-cl);
	border: 1px solid var(--ob-linea);
	border-radius: 14px;
	text-align: left;
}
.ob-cot-lead-tx b {
	display: block;
	color: var(--ob-grafito);
	font-size: 16px;
	margin-bottom: 4px;
}
.ob-cot-lead-tx span {
	display: block;
	color: var(--ob-gris);
	font-size: 14px;
	margin-bottom: 14px;
}
.ob-cot-lead-field {
	margin-top: 10px;
}
.ob-cot-lead-field:first-of-type {
	margin-top: 0;
}
.ob-cot-lead-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--ob-gris);
	margin-bottom: 4px;
}
.ob-cot-lead-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.ob-cot-lead input {
	flex: 1 1 200px;
	min-height: 48px;
	padding: 12px 14px;
	font-size: 16px;
	font-family: inherit;
	border: 2px solid var(--ob-linea);
	border-radius: 10px;
	background: #fff;
	color: var(--ob-grafito);
}
.ob-cot-lead input:focus {
	outline: none;
	border-color: var(--ob-azul);
	box-shadow: 0 0 0 3px rgba(20, 69, 122, 0.15);
}
.ob-cot-lead-row .ob-cot-btn {
	flex: 0 0 auto;
}
.ob-cot-lead-name {
	width: 100%;
}
/* Honeypot: presente en el DOM pero invisible y fuera del tab (no display:none,
   para que el bot lo complete y lo delatemos). */
.ob-cot-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.ob-cot-lead-msg {
	font-size: 14px;
	margin-top: 8px;
}
.ob-cot-lead-msg.err {
	color: #D63638;
	font-weight: 600;
}
.ob-cot-lead-ok {
	/* verde-osc (no verde) para pasar contraste como texto sobre blanco. */
	color: var(--ob-verde-osc, #17695A);
	font-weight: 700;
	font-size: 16px;
	text-align: center;
	padding: 6px 0;
}
/* Lista de modelos posturales pediátricos (solo nombres, sin specs) */
.ob-cot-quote-list {
	max-width: 620px;
	margin: 0 auto 20px;
	text-align: center;
}
.ob-cot-quote-list .lbl {
	display: block;
	font-weight: 600;
	color: var(--ob-gris);
	font-size: 14px;
	margin-bottom: 10px;
}

/* Asesor real, siempre visible */
.ob-cot-advisor {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	background: var(--ob-gris-cl);
	border: 1px solid var(--ob-linea);
	border-radius: 16px;
	padding: 18px 22px;
	margin-top: 30px;
}
.ob-cot-advisor-tx b {
	display: block;
	color: var(--ob-grafito);
	font-size: 16px;
}
.ob-cot-advisor-tx span {
	display: block;
	color: var(--ob-gris);
	font-size: 14px;
	margin-top: 2px;
}

@media (max-width: 760px) {
	.ob-cot-cards {
		grid-template-columns: 1fr;
	}
	/* auto-fit también acá: el `1fr 1fr` fijo reintroducía en mobile el mismo
	   huérfano que el auto-fit de desktop resuelve. El mínimo de 140px deja 2
	   columnas a 375px (4 opciones = 2+2, sin huérfano) y 3 en tablet. */
	.ob-cot-row {
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	}
	/* Con TRES opciones, dos columnas siempre dejan una suelta abajo. Apiladas a
	   ancho completo se leen mejor que tres apretadas —el público sesga adulto
	   mayor— y desaparece el hueco. `:has()` degrada solo: sin soporte quedan
	   las 2 columnas de arriba, que es el comportamiento actual. */
	.ob-cot-row:has(> .ob-cot-opt:nth-child(3):last-child) {
		grid-template-columns: 1fr;
	}
	.ob-cot-models {
		grid-template-columns: 1fr;
	}
	/* En mobile el modo protagonista se apila: foto arriba, texto abajo. */
	.ob-cot-models.solo .ob-cot-m {
		flex-direction: column;
	}
	.ob-cot-models.solo .ob-cot-m .ob-cot-ph {
		min-height: 190px;
		flex: none;
	}
	.ob-cot-cross-lst {
		grid-template-columns: 1fr 1fr;
	}
	.ob-cot-q,
	.ob-cot-rhead h2 {
		font-size: 23px;
	}
	.ob-cot-advisor {
		flex-direction: column;
		align-items: flex-start;
	}
	.ob-cot-advisor .ob-cot-btn {
		width: 100%;
	}
}

/* ==========================================================================
   MOBILE: la primera opcion entra en la primera pantalla (t20, Ola 2)
   Medido a 375x812: la primera tarjeta de uso arrancaba en y=739 (solo 16 px
   visibles sobre ~643 utiles). La intro (cabecera de pasos, pregunta, bajada,
   chips y el contador "Tenemos N modelos") gastaba ~490 px antes de la primera
   decision. Se compacta el ritmo vertical SIN sacar contenido ni bajar cuerpo
   de 16 px. Va al final del archivo: misma especificidad que las reglas base,
   gana por orden. Desktop (>=761 px) no cambia.
   ========================================================================== */
@media (max-width: 760px) {
	/* Arriba de la barra de pasos se apilaban 40 px del <main> (.ob-page) + 18 px
	   del wrap: ~58 px de aire vacio debajo del header. Aca queda 8 + 6.
	   !important porque ambos paddings vienen inline de la plantilla/pattern.
	   cotizador.css solo carga en /cotizador/, no afecta otras paginas. */
	.ob-page {
		padding-top: 8px !important;
	}
	.ob-cot-wrap {
		padding-top: 6px !important;
	}
	.ob-cot-steps {
		padding-top: 8px;
		padding-bottom: 8px;
	}
	.ob-cot-head {
		margin-bottom: 12px;
	}
	.ob-cot-q {
		margin-bottom: 6px;
	}
	.ob-cot-sub {
		margin: 0 auto 10px;
		line-height: 1.5;
	}
	/* Chips: los 3 en el menor alto posible. Antes el <span> del icono recibia
	   tambien el estilo de pastilla (selector `.ob-cot-reassure span`) y cada
	   chip quedaba con una pastilla dentro de otra, 46 px de alto. */
	.ob-cot-reassure {
		width: 100%;
		margin: 0 0 12px;
		gap: 6px 8px;
	}
	.ob-cot-reassure span {
		padding: 4px 12px;
		line-height: 1.4;
	}
	.ob-cot-reassure span span {
		padding: 0;
		background: none;
		border-radius: 0;
	}
	/* El contador del surtido es contexto, no decision: pasa debajo de las
	   opciones (antes empujaba la primera tarjeta ~115 px hacia abajo). Solo el
	   paso 0 pasa a columna flex para poder reordenar sin tocar el JS. */
	.ob-cot-step[data-step="0"].show {
		display: flex;
		flex-direction: column;
	}
	/* Orden del paso 0: pregunta y bajada (0) → opciones (1) → chips de confianza (3) →
	   pulso (4) → pista (5) → Volver (6, solo en la pantalla de sillas). */
	.ob-cot-step[data-step="0"] .ob-cot-cards {
		order: 1;
	}
	.ob-cot-step[data-step="0"] .ob-cot-reassure {
		order: 3;
		margin: 14px 0 0;
	}
	.ob-cot-step[data-step="0"] .ob-cot-hint {
		order: 5;
	}
	.ob-cot-step[data-step="0"] .ob-cot-nav {
		order: 6;
	}
	.ob-cot-step[data-step="0"] .ob-cot-pulse {
		order: 4;
		width: 100%;
		margin: 14px auto 0;
		box-sizing: border-box;
	}
}

/* ==========================================================================
   MOBILE (<=760px): paso 0 en filas compactas y resultado con el veredicto
   corto arriba (etapa 1 de la reestructura, 2026-10-04)
   Medido a 375x812 en produccion: el paso 0 medía ~3.000 px (7 tarjetas de
   300-335 px) y en el resultado el primer CTA quedaba en y=962-1106 tras ~110
   palabras de veredicto. Ahora: miniatura a la izquierda + titulo y bajada a
   la derecha (~88-104 px de alto, target >=48 px) para que entren 4+ opciones
   en la primera pantalla, y 1-2 oraciones antes de la primera tarjeta con el
   detalle plegado. OJO cascada: style.css fija font-size 16px con
   "body .ob-cot-c-d"; el prefijo #ob-cotizador-app (1-0-0) le gana a eso Y a
   Kadence, que carga despues de este archivo. Desktop (>=761px) no cambia.
   ========================================================================== */
@media (max-width: 760px) {
	#ob-cotizador-app .ob-cot-cards {
		gap: 10px;
	}
	#ob-cotizador-app .ob-cot-c {
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr);
		align-items: stretch;
		min-height: 88px;
		border-radius: 14px;
	}
	#ob-cotizador-app .ob-cot-c:hover {
		transform: none;
	}
	#ob-cotizador-app .ob-cot-c-ph {
		height: auto;
		min-height: 88px;
		padding: 6px;
		border-bottom: 0;
		border-right: 1px solid var(--ob-linea);
	}
	#ob-cotizador-app .ob-cot-c-ph img {
		max-height: 80px;
	}
	#ob-cotizador-app .ob-cot-c-ph-help svg {
		width: 40px;
		height: 40px;
	}
	#ob-cotizador-app .ob-cot-c-tx {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 10px 12px;
		min-width: 0;
	}
	#ob-cotizador-app .ob-cot-c-tt {
		font-size: 17px;
		line-height: 1.25;
	}
	#ob-cotizador-app .ob-cot-c-d {
		font-size: 16px;
		line-height: 1.3;
		margin-top: 3px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	/* La puerta del indeciso lleva una bajada más larga: tres líneas. */
	#ob-cotizador-app .ob-cot-c-help .ob-cot-c-d {
		-webkit-line-clamp: 3;
	}
	/* Etiqueta y contador de modelos: contexto, no decision. Salen de la fila
	   (el contador total vive en el pulso de abajo). */
	#ob-cotizador-app .ob-cot-c-tag,
	#ob-cotizador-app .ob-cot-c-count {
		display: none;
	}

	/* Resultado: foto mas baja, cuerpo >= 16 px y areas tactiles de 44 px. */
	#ob-cotizador-app .ob-cot-m .ob-cot-ph {
		height: 120px;
		padding: 8px;
	}
	#ob-cotizador-app .ob-cot-models.solo .ob-cot-m .ob-cot-ph {
		min-height: 140px;
	}
	#ob-cotizador-app .ob-cot-m h3 {
		font-size: 16px;
	}
	/* El titulo-enlace medía 20 px de alto: el area tactil crece con padding y un
	   margen negativo igual, sin mover nada del layout. */
	#ob-cotizador-app .ob-cot-m h3 a {
		display: block;
		padding: 12px 0;
		margin: -12px 0;
	}
	#ob-cotizador-app .ob-cot-spec {
		font-size: 16px;
	}
	#ob-cotizador-app .ob-cot-why,
	#ob-cotizador-app .ob-cot-warn {
		font-size: 16px;
	}
	#ob-cotizador-app .ob-cot-add {
		min-height: 48px;
		font-size: 16px;
	}
	#ob-cotizador-app .ob-cot-alm {
		min-height: 44px;
	}
	/* Veredicto corto (1-2 oraciones) + detalle plegado. */
	#ob-cotizador-app .ob-cot-rhead {
		margin-bottom: 14px;
	}
	#ob-cotizador-app .ob-cot-rhead p {
		font-size: 16px;
		line-height: 1.5;
	}
	#ob-cotizador-app .ob-cot-more {
		margin-top: 6px;
	}
	#ob-cotizador-app .ob-cot-more > summary {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 4px;
		font-size: 16px;
		font-weight: 700;
		color: var(--ob-azul);
		cursor: pointer;
		list-style: none;
		text-decoration: underline;
		text-underline-offset: 3px;
	}
	#ob-cotizador-app .ob-cot-more > summary::-webkit-details-marker {
		display: none;
	}
	#ob-cotizador-app .ob-cot-more > summary:focus-visible {
		outline: 3px solid var(--ob-azul);
		outline-offset: 2px;
	}
	#ob-cotizador-app .ob-cot-more[open] > summary {
		margin-bottom: 2px;
	}
	/* Chips de confianza del paso 0: debajo de las opciones. */
	#ob-cotizador-app .ob-cot-step[data-step="0"] .ob-cot-reassure {
		justify-content: flex-start;
	}
}

/* En escritorio el detalle del veredicto va siempre abierto: el resumen sobra. */
@media (min-width: 761px) {
	.ob-cot-more > p {
		margin-top: 6px;
	}
}

/* ==========================================================================
   Resultado, etapa 1b (2026-10-04): tarjeta compacta + veredicto corto en celular;
   3 columnas en escritorio. Objetivo medido: a 375x812 con scroll 0, el CTA de la
   primera tarjeta termina antes de y=740 (hay una barra inferior fija en y=755).
   ========================================================================== */
.ob-cot-bt { display: block; }

/* Escritorio: el detalle del veredicto va DEBAJO de las tarjetas (abierto) para que
   el CTA de la primera fila quede sobre el pliegue; la grilla usa las columnas
   que hay: 3 con tres tarjetas, 2 con dos. */
@media (min-width: 761px) {
	.ob-cot-hide-m { display: inline; }
	.ob-cot-more { max-width: 620px; margin: 22px auto 0; }
	.ob-cot-more > summary { display: block; font-weight: 700; color: var(--ob-azul); }
}
@media (min-width: 1000px) {
	.ob-cot-models.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ob-cot-models.n3 .ob-cot-m .ob-cot-ph { height: 130px; }
	.ob-cot-models.n2 { grid-template-columns: repeat(2, minmax(0, 340px)); }
}

@media (max-width: 760px) {
	.ob-cot-hide-m { display: none; }
	/* Echo en UNA línea: el resumen se corta con puntos y "Cambiar" queda al lado. */
	#ob-cotizador-app .ob-cot-echo {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 8px;
		margin-bottom: 4px;
	}
	#ob-cotizador-app .ob-cot-echo-tx {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 15px;
		padding: 8px 12px;
	}
	#ob-cotizador-app .ob-cot-echo-edit {
		flex: 0 0 auto;
		font-size: 15px;
		min-height: 44px;
		padding: 0 14px;
	}
	#ob-cotizador-app .ob-cot-rhead { text-align: left; margin-bottom: 10px; }
	#ob-cotizador-app .ob-cot-rhead h2 { font-size: 20px; line-height: 1.25; margin: 2px 0 4px; }
	#ob-cotizador-app .ob-cot-rhead p { margin: 0; max-width: none; }
	#ob-cotizador-app .ob-cot-models,
	#ob-cotizador-app .ob-cot-models.solo { gap: 12px; }
	/* Tarjeta compacta: foto chica a la izquierda; nombre, precio y datos a la
	   derecha; el aviso y el CTA, a ancho completo debajo. */
	#ob-cotizador-app .ob-cot-m,
	#ob-cotizador-app .ob-cot-models.solo .ob-cot-m {
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr);
		column-gap: 10px;
		align-items: start;
		padding: 10px;
	}
	#ob-cotizador-app .ob-cot-m .ob-cot-ph,
	#ob-cotizador-app .ob-cot-models.solo .ob-cot-m .ob-cot-ph {
		grid-column: 1;
		grid-row: 1;
		height: 96px;
		min-height: 0;
		padding: 4px;
		border: 1px solid var(--ob-linea);
		border-radius: 10px;
	}
	#ob-cotizador-app .ob-cot-b { display: contents; }
	#ob-cotizador-app .ob-cot-bt { grid-column: 2; grid-row: 1; min-width: 0; }
	#ob-cotizador-app .ob-cot-b > .ob-cot-warn,
	#ob-cotizador-app .ob-cot-b > .ob-cot-add { grid-column: 1 / -1; }
	#ob-cotizador-app .ob-cot-b > .ob-cot-warn { margin: 8px 0 0; }
	#ob-cotizador-app .ob-cot-b > .ob-cot-add { margin-top: 8px; }
	#ob-cotizador-app .ob-cot-sku { display: none; }
	#ob-cotizador-app .ob-cot-m h3 { margin: 0 0 4px; }
	#ob-cotizador-app .ob-cot-why { padding: 4px 8px; margin: 0 0 4px; }
	#ob-cotizador-app .ob-cot-spec { margin-bottom: 0; }
	#ob-cotizador-app .ob-cot-pr { margin-top: 4px; font-size: 20px; }
	#ob-cotizador-app .ob-cot-cuo { display: none; }
	#ob-cotizador-app .ob-cot-more { margin: 14px 0 0; }
}

@media (max-width: 760px) {
	/* Barra de pasos en una sola fila baja (antes ~64 px): circulo y rotulo lado a lado. */
	#ob-cotizador-app .ob-cot-steps { padding: 4px 16px; gap: 6px; }
	#ob-cotizador-app .ob-cot-stp {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		padding-top: 0;
		min-height: 32px;
		font-size: 14px;
	}
	#ob-cotizador-app .ob-cot-stp::before {
		position: static;
		transform: none;
		width: 20px;
		height: 20px;
		flex: 0 0 20px;
	}
	#ob-cotizador-app .ob-cot-head { margin-bottom: 8px; }
	#ob-cotizador-app .ob-cot-m,
	#ob-cotizador-app .ob-cot-models.solo .ob-cot-m { padding: 8px; }
	#ob-cotizador-app .ob-cot-b > .ob-cot-warn { margin-top: 6px; padding: 6px 10px; }
	#ob-cotizador-app .ob-cot-b > .ob-cot-add { margin-top: 6px; }
}

/* ==========================================================================
   Etapa 2 (2026-10-04): paso previo "¿Qué necesitás?", ramas de andador, cama
   y grúa. El prefijo #ob-cotizador-app le gana a Kadence (carga despues).
   ========================================================================== */
/* Preguntas de tipo con titulos largos ("Se cansa y quiere poder sentarse en el
   camino"): en celular una opcion por fila, no dos columnas apretadas. */
@media (max-width: 760px) {
	.ob-cot-row.stack {
		grid-template-columns: 1fr;
	}
	#ob-cotizador-app .ob-cot-row.stack .ob-cot-opt {
		text-align: left;
		padding: 14px 16px;
	}
}
.ob-cot-row.stack .ob-cot-opt .tt {
	font-size: 17px;
	line-height: 1.3;
}
.ob-cot-row.stack .ob-cot-opt .d {
	font-size: 15px;
}

/* Avisos fijos del resultado (pasillos, cama sin colchon, alquiler): siempre a la
   vista, 16 px, con la misma gramatica que .ob-cot-warn (azul de marca sobre gris). */
.ob-cot-notes {
	margin: 16px 0 4px;
	display: grid;
	gap: 8px;
}
.ob-cot-notes p {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ob-grafito);
	background: var(--ob-gris-cl);
	border-left: 3px solid var(--ob-azul);
	border-radius: 6px;
	padding: 10px 14px;
}
#ob-cotizador-app .ob-cot-notes a {
	display: inline-block;
	padding: 12px 2px;
	margin: -12px 0;
	color: var(--ob-azul);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
#ob-cotizador-app .ob-cot-notes a:focus-visible {
	outline: 3px solid var(--ob-azul);
	outline-offset: 2px;
}

/* "¿Qué necesitás?" en celular: las CINCO opciones (4 puertas + "No estoy seguro") tienen que
   entrar en la primera pantalla de 375x812, con el header fijo y la barra inferior (y=755).
   Filas un poco mas bajas que las de "como se mueve" (miniatura 64 px, padding justo);
   el texto sigue en 16 px y cada fila >= 44 px de alto tactil. */
@media (max-width: 760px) {
	#ob-cotizador-app .ob-cot-step[data-sub="need"] .ob-cot-cards {
		gap: 6px;
	}
	#ob-cotizador-app .ob-cot-step[data-sub="need"] .ob-cot-sub {
		margin-bottom: 4px;
	}
	#ob-cotizador-app .ob-cot-step[data-sub="need"] .ob-cot-c {
		min-height: 72px;
	}
	#ob-cotizador-app .ob-cot-step[data-sub="need"] .ob-cot-c-ph {
		min-height: 68px;
		padding: 3px;
	}
	#ob-cotizador-app .ob-cot-step[data-sub="need"] .ob-cot-c-ph img {
		max-height: 62px;
	}
	#ob-cotizador-app .ob-cot-step[data-sub="need"] .ob-cot-c-tx {
		padding: 6px 12px;
	}
	#ob-cotizador-app .ob-cot-step[data-sub="need"] .ob-cot-c-d {
		line-height: 1.25;
	}
	#ob-cotizador-app .ob-cot-step[data-sub="need"] .ob-cot-c-ph-help svg {
		width: 36px;
		height: 36px;
	}
}

/* Escritorio: las cinco puertas del paso previo en 3 + 2 con la segunda fila CENTRADA
   (la grilla auto-fit las dejaba alineadas a la izquierda, con la última coja). */
@media (min-width: 761px) {
	.ob-cot-step[data-sub="need"] .ob-cot-cards {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.ob-cot-step[data-sub="need"] .ob-cot-c {
		flex: 0 0 calc((100% - 28px) / 3);
		width: auto;
	}
}