/*
 * Tarjeta Samsung con el diseño V3 — 0.1.101.11 (alternativa A compacta, bloque de precios como V3).
 * Complemento de oferta.css (que aporta la tarjeta V3: cabecera, imagen, título, botones). Solo define lo propio de
 * Samsung: caja de imagen estable, recuadros de precio por tienda (Normal / Estudiantes) y la fila de variantes.
 * Prefijo propio .omx-sam3-*; no toca samsung.css ni oferta.css. Colores fijos (negro, blanco y amarillo).
 *
 * Recuadro de precio (misma distribución que el bloque negro de una oferta V3):
 *   arriba:  «HASTA» (solo si el precio depende de cupones) · nombre de la ruta (Normal / Estudiantes) a la derecha
 *   abajo:   precio final · porcentaje amarillo a la derecha
 *   borde:   etiqueta «Mejor precio» (solo cuando se comparan dos rutas disponibles con un mejor único)
 * Estados:
 *   .is-mejor  fondo negro = ruta con el mejor precio disponible (no depende de lo que el usuario seleccione).
 *   .is-sel    anillo amarillo + palomita en la esquina = ruta seleccionada (a la que lleva «Ver en Samsung»).
 *   (ninguno)  fondo blanco con borde y texto negros = ruta disponible sin seleccionar.
 *   .is-off    gris con borde punteado = ruta registrada y agotada.
 * 0.1.101.9: los recuadros van SIEMPRE apilados (Normal arriba, Estudiantes abajo), en móvil y escritorio.
 */

.omx-sam3 {
	--s3-ink: #1a1a1a;
	--s3-yellow: #ffc400;
	--s3-off-bg: #f1f1f3;
	--s3-off-ink: #5b5b60;
	--s3-off-line: #8a8a90;
}

.omx-sam3-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------- imagen estable */

/* Caja cuadrada de proporción fija: la foto se ajusta dentro (sin recorte) y no cambia la altura de la tarjeta. */
.omx-oferta-card.omx-sam3 .omx-oferta-card__media {
	align-items: center;
	padding: 10px 6px 34px;
}

.omx-sam3__img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 150px;
	aspect-ratio: 1 / 1;
}

.omx-oferta-card.omx-sam3 .omx-sam3__img .omx-oferta-card__img {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: contain;
}

/* «hace X»: usa tal cual el estilo de las tarjetas de ofertas V3 (.omx-oferta-card__hace de oferta.css); sin reglas propias. */

/* ---------------------------------------------------------------- precios */

/* Lo interactivo va por encima del enlace que cubre toda la tarjeta (título::after, z-index 1). */
.omx-sam3 .omx-sam3-precio,
.omx-sam3 .omx-sam3-fila {
	position: relative;
	z-index: 2;
	pointer-events: none;
}

.omx-sam3 .omx-sam3-precio {
	container-type: inline-size;
	margin-top: 4px;
}

.omx-sam3 .omx-sam3-bloques > *,
.omx-sam3 .omx-sam3-vars > * {
	pointer-events: auto;
}

.omx-sam3-bloques {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.omx-sam3-b {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	margin: 0;
	padding: 6px 11px 7px 10px;
	border: 2px solid var(--s3-ink);
	border-radius: 10px;
	background: #ffffff;
	color: var(--s3-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.omx-sam3-b__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px;
	min-height: 13px;
}

.omx-sam3-b__hasta {
	color: var(--s3-off-ink);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.omx-sam3-b__l {
	margin-left: auto;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.03em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}

.omx-sam3-b__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}

.omx-sam3-b__m {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.omx-sam3-b__p {
	flex: 0 0 auto;
	padding: 1px 6px;
	border-radius: 7px;
	background: var(--s3-yellow);
	color: #1a1a1a;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.3;
}

/* «Mejor precio»: pestaña amarilla centrada sobre el borde superior (el borde queda detrás), sin ocupar otra línea. */
.omx-sam3-b__tab {
	position: absolute;
	top: -9px;
	left: 50%;
	z-index: 2;
	transform: translateX(-50%);
	padding: 0 7px;
	border-radius: 5px;
	background: var(--s3-yellow);
	color: #1a1a1a;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 14px;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Palomita de la ruta seleccionada: en la esquina superior derecha. */
.omx-sam3-b__ck {
	position: absolute;
	top: -9px;
	right: -9px;
	z-index: 1;
	display: none;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: 2px solid var(--s3-ink);
	border-radius: 50%;
	background: var(--s3-yellow);
	color: var(--s3-ink);
}

.omx-sam3-b__ck svg {
	width: 11px;
	height: 11px;
}

/* Mejor precio: fondo negro (independiente de la selección). */
.omx-sam3-b.is-mejor {
	background: var(--s3-ink);
	color: #ffffff;
}

.omx-sam3-b.is-mejor .omx-sam3-b__hasta {
	color: var(--s3-yellow);
}

/* Ruta seleccionada: anillo amarillo + palomita. */
.omx-sam3-b.is-sel {
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px var(--s3-yellow);
}

.omx-sam3-b.is-sel .omx-sam3-b__ck {
	display: inline-flex;
}

/* Registrada y agotada. */
.omx-sam3-b.is-off {
	border: 2px dashed var(--s3-off-line);
	background: var(--s3-off-bg);
	color: var(--s3-off-ink);
	cursor: default;
}

.omx-sam3-b.is-off .omx-sam3-b__row {
	justify-content: flex-start;
}

.omx-sam3-b.is-off .omx-sam3-b__m {
	font-size: 14px;
	font-weight: 700;
}

.omx-sam3-b:focus-visible,
.omx-sam3-var:focus-visible {
	outline: 3px solid var(--s3-ink);
	outline-offset: 3px;
}

/* Columna muy angosta (320 px): precio y porcentaje un poco más compactos para que nada se corte con ninguna tipografía. */
@container (max-width: 200px) {
	.omx-sam3-b {
		padding: 6px 9px 7px 8px;
	}

	.omx-sam3-b__row {
		gap: 4px;
	}

	.omx-sam3-b__m {
		font-size: 19px;
	}

	.omx-sam3-b__p {
		padding: 1px 5px;
		font-size: 11px;
	}
}

/* Precio de lista tachado bajo los recuadros: gris oscuro (contraste suficiente sobre blanco). */
.omx-oferta-card.omx-sam3 .omx-oferta-card__refs {
	margin-top: 2px;
}

.omx-oferta-card.omx-sam3 .omx-oferta-card__ref s,
.omx-oferta-card.omx-sam3 .omx-oferta-card__ref-lista,
.omx-oferta-card.omx-sam3 .omx-oferta-card__ref-lista s {
	color: #55555a;
}

/* -------------------------------------------------------------- variantes */

/* Fila independiente a todo el ancho, después del bloque principal y antes de los botones. Sin encabezado. */
.omx-sam3-fila {
	padding: 6px 12px 10px;
}

.omx-sam3-vars {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}

.omx-sam3-var {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	margin: 0;
	padding: 0 10px;
	border: 1.5px solid var(--s3-ink);
	border-radius: 999px;
	background: #ffffff;
	color: var(--s3-ink);
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.omx-sam3-var.is-sel {
	background: var(--s3-yellow);
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--s3-ink);
}

.omx-sam3-var.is-off {
	border: 1.5px dashed var(--s3-off-line);
	background: var(--s3-off-bg);
	color: var(--s3-off-ink);
	text-decoration: line-through;
}

.omx-sam3-var.is-off.is-sel {
	background: var(--s3-off-bg);
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--s3-ink);
}

/* ---------------------------------------------------------------- botones */

/* Mismo ancho y alto, distribuidos de forma simétrica (mitad exacta, sin depender del borde de cada uno). */
.omx-sam3 .omx-oferta-card__acciones {
	gap: 8px;
}

.omx-oferta-card.omx-sam3 .omx-oferta-card__btn--cta,
.omx-oferta-card.omx-sam3 .omx-oferta-card__btn--detalles {
	flex: 0 0 calc(50% - 4px);
	min-width: 0;
	min-height: 40px;
}

/* ---------------------------------------------------------------- escritorio */

@media (min-width: 640px) {
	.omx-oferta-card.omx-sam3 .omx-oferta-card__media {
		padding: 14px 12px 36px;
	}

	.omx-sam3__img {
		max-width: 190px;
	}

	.omx-sam3-b {
		padding: 8px 12px 9px;
	}

	.omx-sam3-b__hasta,
	.omx-sam3-b__l {
		font-size: 11.5px;
	}

	.omx-sam3-b__m {
		font-size: 25px;
	}

	.omx-sam3-b__p {
		font-size: 13px;
	}

	.omx-sam3-fila {
		padding: 6px 16px 12px;
	}
}

/* ==========================================================================
 * 0.1.101.11: ficha individual Samsung con el diseño V3 (alcance .omx-sam3f).
 * Reutiliza omx-fo-* (ficha de ofertas) y los recuadros de precio de las tarjetas.
 * ========================================================================== */

.omx-ficha--v3 .omx-sam3f {
	max-width: 980px;
	margin: 0 auto;
}

.omx-sam3f .omx-fo-cab {
	margin-bottom: 10px;
}

.omx-sam3f button.omx-fo-cab__compartir {
	cursor: pointer;
}

.omx-sam3f__media {
	position: relative;
	min-height: 220px;
}

.omx-sam3f__zoom {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: zoom-in;
}

.omx-sam3f__lupa {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #1a1a1a;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
	pointer-events: none;
}

.omx-sam3f .omx-fo-info {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.omx-sam3f .omx-sam3-precio {
	padding: 0;
}

.omx-sam3f__vars {
	min-width: 0;
}

.omx-sam3f .omx-fo-cta--top {
	display: none;
}

.omx-sam3f .omx-fo-cta--fin {
	display: flex;
}

/* Panel «Cómo conseguir este precio» */
.omx-sam3f__panel.omx-sam-panel {
	margin: 0;
	padding: 6px 0 2px;
	border-top: 0;
}

.omx-sam3f .omx-sam-paso {
	margin-bottom: 14px;
}

.omx-sam3f .omx-sam-paso__num {
	background: var(--fo-yellow, #ffc400);
	color: #1a1a1a;
	font-weight: 800;
}

.omx-sam3f .omx-sam-paso__titulo {
	font-weight: 700;
	color: #1a1a1a;
}

.omx-sam3f .omx-sam-cupones {
	gap: 8px;
}

.omx-sam3f button.omx-cod {
	width: 100%;
	margin: 0;
	padding: 0;
	font: inherit;
	text-align: left;
}

.omx-sam3f button.omx-cod.is-personal .omx-cod__ver {
	font-style: italic;
}

.omx-sam3f .omx-sam-aviso {
	border-radius: 10px;
}

.omx-sam3f .omx-sam-eco-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	margin-left: 8px;
	padding: 0 12px;
	border: 1.5px solid #c98a00;
	border-radius: 10px;
	background: #ffffff;
	color: #5a4300;
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
}

/* Regalo: recuadro único con «Sujeto a disponibilidad» como texto secundario */
.omx-sam3f-regalo {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 6px 0 12px;
	padding: 10px 12px;
	border: 1px solid #f0d98a;
	border-radius: 12px;
	background: #fff6d6;
	color: #5a4300;
}

.omx-sam3f-regalo__c {
	min-width: 0;
}

.omx-sam3f-regalo__c p {
	margin: 0;
}

.omx-sam3f-regalo__t {
	font-size: 13px;
	font-weight: 800;
}

.omx-sam3f-regalo__l {
	margin-top: 2px;
	font-size: 14px;
	font-weight: 700;
	color: #1a1a1a;
	overflow-wrap: anywhere;
}

.omx-sam3f-regalo__s {
	margin-top: 4px;
	font-size: 11.5px;
	color: #6b5200;
}

.omx-sam3f .omx-sam-bloque-titulo {
	margin: 10px 0 6px;
	font-weight: 800;
}

.omx-sam3f__seguir {
	margin: 14px 0 0;
	text-align: center;
	font-size: 13.5px;
	font-weight: 700;
}

.omx-sam3f__seguir a {
	color: inherit;
	text-decoration: underline;
}

@media (min-width: 900px) {
	.omx-sam3f .omx-fo-top {
		grid-template-columns: 300px minmax(0, 1fr);
		align-items: start;
		gap: 22px;
		padding: 20px;
	}

	.omx-sam3f .omx-fo-cta--top {
		display: flex;
		max-width: 320px;
	}

	.omx-sam3f .omx-fo-cta--fin {
		display: none;
	}

	.omx-sam3f .omx-sam3-precio {
		max-width: 460px;
	}

	.omx-sam3f .omx-fo-escs {
		max-width: 700px;
	}

	.omx-sam3f__seguir {
		text-align: left;
	}
}

/* ==========================================================================
 * 0.1.103: ficha Samsung D2-B (solo con .omx-sam3f--d2, es decir, estructura compartida activa para administradores).
 * Desglose en UNA columna también en escritorio, cabecera negra de precios, flecha solo antes del pago,
 * regalo con pestaña «Sujeto a disponibilidad», nota independiente y miniguía visual.
 * ========================================================================== */
.omx-sam3f--d2 .omx-fo-escs { max-width: none; }
.omx-sam3f--d2 .omx-fo-esc { overflow: hidden; }
.omx-sam3f--d2 .omx-fo-esc__cab:empty { display: none; }
.omx-sam3f--d2 .omx-fo-esc__cuerpo { padding: 12px; }
.omx-sam3f--d2 .omx-sam3f__panel.omx-sam-panel { padding: 0; }
.omx-sam3f--d2 .omx-sam-paso__sub { display: block; margin: 3px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: #6b675f; }
.omx-sam3f--d2 .omx-sam-paso__enlace { display: inline-block; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: #7a5c00; text-decoration: underline; }
.omx-sam3f--d2 .omx-sam-paso__cuerpo .omx-fo-item { padding: 6px 0; }
.omx-sam3f--d2 .omx-sam-paso__cuerpo .omx-fo-sep { margin: 2px 0; }
.omx-sam3f--d2 .omx-fo-sep--paso { margin: 8px 0; }
.omx-sam3f--d2 .omx-fo-sep--paso span { background: #fff; border-color: #111; color: #111; }
.omx-sam3f--d2 .omx-sam-eco-btn { margin-left: auto; flex: 0 0 auto; }
.omx-sam3f--d2 .omx-sam-paso__cuerpo .omx-fo-item { width: 100%; }
.omx-sam3f--d2 .omx-fo-item__txt { flex: 1 1 auto; min-width: 0; }
.omx-sam3f--d2 .omx-sam3f-regalo--tab { position: relative; margin-top: 16px; }
.omx-sam3f--d2 .omx-sam3f-regalo__tag { position: absolute; top: -9px; right: 12px; padding: 1px 8px; border-radius: 999px; background: #fff; border: 1px solid #e0c56a; font-size: 10.5px; font-weight: 700; line-height: 1.5; color: #6b5200; }
.omx-sam3f--d2 .omx-sam-aviso--nota { margin-top: 10px; }
.omx-sam3f--d2 .omx-fo-uno { margin-top: 12px; }
.omx-sam3f--d2 .omx-fo-uno .omx-fo-item { padding: 6px 0; }

/* Miniguía: sección independiente, fuera de «Cómo conseguir este precio». */
.omx-fo-guia { margin: 14px 0 0; padding: 12px; border: 1px solid #e5e5e7; border-radius: 14px; background: #fff; }
.omx-fo-guia[hidden] { display: none; }
.omx-fo-guia__t { margin: 0 0 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #6b675f; }
/* 0.1.120: una sola fila. Verbo arriba, icono, nombre abajo. Con 2–4 pasos el nombre completo; con 5 o más (clase --corto) el abreviado.
   Las flechas son adorno (::after), no ocupan columna. Solo en pantallas muy angostas con 5+ pasos la fila se desplaza. */
.omx-fo-guia__ol { display: flex; align-items: flex-start; justify-content: center; margin: 0; padding: 0; list-style: none; }
.omx-fo-guia__it { position: relative; display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.omx-fo-guia__v { font-size: 10px; font-weight: 800; line-height: 12px; letter-spacing: .05em; text-transform: uppercase; color: #1a1a1a; white-space: nowrap; }
.omx-fo-guia__txt { font-size: 10.5px; font-weight: 700; line-height: 1.2; color: #4a4a4a; white-space: nowrap; }
.omx-fo-guia__ol--n4 .omx-fo-guia__txt { font-size: 10px; }
.omx-fo-guia__ol--corto .omx-fo-guia__v { letter-spacing: .02em; }
.omx-fo-guia__ol--n2 .omx-fo-guia__txt, .omx-fo-guia__ol--n3 .omx-fo-guia__txt { font-size: 12px; }
.omx-fo-guia__it .omx-fo-ico { width: 34px; height: 34px; }
.omx-fo-guia__it .omx-fo-ico svg { width: 17px; height: 17px; }
.omx-fo-guia__it:not(:last-child)::after { content: "›"; position: absolute; right: -4px; top: 24px; font-size: 18px; line-height: 1; color: #8a8578; }
.omx-fo-guia__c { display: none; }
.omx-fo-guia__ol--corto .omx-fo-guia__l { display: none; }
.omx-fo-guia__ol--corto .omx-fo-guia__c { display: inline; }
/* El nombre completo se cambia por el abreviado cuando no cabe (4 pasos bajo 400 px, 3 pasos bajo 340 px). */
@media (max-width: 399px) { .omx-fo-guia__ol--n4 .omx-fo-guia__l { display: none; } .omx-fo-guia__ol--n4 .omx-fo-guia__c { display: inline; } }
@media (max-width: 339px) { .omx-fo-guia__ol--n3 .omx-fo-guia__l { display: none; } .omx-fo-guia__ol--n3 .omx-fo-guia__c { display: inline; } }
/* Solo si ni abreviada cabe (6 pasos bajo 350 px, 5 pasos bajo 330 px): la fila se desplaza, con el borde derecho atenuado como pista. */
@media (max-width: 349px) {
	.omx-fo-guia__ol--n6 { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); }
	.omx-fo-guia__ol--n6 .omx-fo-guia__it { flex: 0 0 56px; scroll-snap-align: start; }
}
@media (max-width: 329px) {
	.omx-fo-guia__ol--n5 { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); }
	.omx-fo-guia__ol--n5 .omx-fo-guia__it { flex: 0 0 56px; scroll-snap-align: start; }
}
@media (min-width: 600px) {
	.omx-fo-guia__it .omx-fo-ico { width: 48px; height: 48px; }
	.omx-fo-guia__it .omx-fo-ico svg { width: 20px; height: 20px; }
	.omx-fo-guia__v { font-size: 11px; line-height: 14px; }
	.omx-fo-guia__txt, .omx-fo-guia__ol--n2 .omx-fo-guia__txt, .omx-fo-guia__ol--n3 .omx-fo-guia__txt { font-size: 12px; }
	.omx-fo-guia__it:not(:last-child)::after { top: 33px; right: -5px; }
}
@media (min-width: 900px) { .omx-fo-guia__txt, .omx-fo-guia__ol--n2 .omx-fo-guia__txt, .omx-fo-guia__ol--n3 .omx-fo-guia__txt { font-size: 13px; } .omx-fo-guia__v { font-size: 12px; } }

.omx-sam3f--d2 .omx-fo-uno__nota{margin:6px 0 0;font-size:.75rem;color:#6b7280;line-height:1.35}