/* ----- Steps -------------------------------------------------------------------- */
.steps {
	height: 84px;
	box-shadow: 0px 2px 4px rgba(45, 18, 65, 0.15);
}
.steps .logo-wom {
	width: 50px;
}
.steps-wrap .step-item {
	display: none;
}
.steps-wrap[data-step="1"] .step-1,
.steps-wrap[data-step="2"] .step-2,
.steps-wrap[data-step="3"] .step-3,
.steps-wrap[data-step="4"] .step-4 {
	display: block;
}
.steps-wrap:not([data-step="1"]) .info2x1-dark, .steps-wrap:not([data-step="1"]) .link-back, .steps-wrap[data-step="4"] .detail {
	display: none !important;
}
@media (min-width: 768px) {
	.steps-wrap {
		background-color: #fff;
		max-width: 1024px;
		box-shadow: 0px 24px 48px rgba(56, 20, 81, 0.15);
		border-radius: 8px;
	}
	.steps {
		height: 100px;
	}
	.steps .logo-wom {
		width: 80px;
	}
	.box-body-steps {
		width: 388px;
	}
	.steps-wrap[data-step="4"] .box-body-steps {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}
/* ----- Steps -------------------------------------------------------------------- */

/* ----- Step 01 ------------------------------------------------------------------ */
.box-info {
	height: 230px;
	transition: height .2s ease-in-out;
}
.box-info.hidden, .box-info h4 {
	height: 40px;
}
.box-info .arrow {
	transition: transform .2s ease-in-out;
}
.box-info.hidden .arrow {
	transform: rotate(180deg);
}
.persona .empresa, .empresa .persona {
	display: none;
}
.err-twice {
	background-color: #CCC4D2;
	height: 25px;
	width: 258px;
	border-radius: 5px;
	top: calc(100% + 17px);
	left: 30%;
	pointer-events: none;
	opacity: 0;
}
.err-twice.show {
	opacity: 1;
	left: calc(50% - 133px);
}
.err-twice::before {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 9px 8px 9px;
	border-color: transparent transparent #ccc4d2 transparent;
	position: absolute;
	bottom: 100%;
	left: 18px;
}
.box-agent .data-agent {
	display: none;
}
.box-agent.show .data-agent {
	/* max-height: 500px; */
	display: block;
}
.box-agent .bt-min-agent, .box-agent.show .bt-add-agent {
	display: none;
}
.box-agent.show .bt-min-agent {
	display: flex;
}
.box-agent h3 {
	border-bottom: 1px solid #8D94A5;
}
.bt-agent {
	height: 40px;
	background-color: #7c6c8a !important;
	transition: background-color .28s ease-in-out;
}
.bt-agent:hover {
	background-color: #574466 !important;
}
.bt-agent > span:first-of-type {
	height: 21px;
	width: 21px;
	border: 1px solid #574466;
}
/* ----- Step 01 ------------------------------------------------------------------ */

/* ----- Step 02 ------------------------------------------------------------------ */
.box-plan {
	box-shadow: 0px 6px 12px rgba(56, 20, 81, 0.15);
}
.box-plan:last-of-type {
	margin-bottom: 0 !important;
}
.box-plan header > div:first-of-type {
	height: 52px;
	margin-bottom: 6px;
}
.box-plan .mensual {
	height: 14px;
}
.box-plan.no-offer .mensual span {
	display: none;
}
.box-plan .text-porta span:last-of-type, .box-plan.box-promo .text-porta span:first-of-type {
	display: none;
}
.box-plan.box-promo .text-porta span:last-of-type {
	display: inline-block;
}

.wom .box-linea .input-group-elements.box-radio {
	height: auto !important;
}
.box-plan .input-group-elements input[type="text"], .box-plan .select-sort .select-dropdown {
	box-shadow: none !important;
}
.box-plan .box-lineas {
	border: 1px dashed #C9CFD7;
	border-radius: 4px;
	height: 36px;
}
.box-plan:not(.repeat) .info-repeat {
	display: none !important;
}
.msj-promo {
	width: auto;
	height: 24px;
	/* display: none !important; */
}
/* .box-plan.box-promo .msj-promo {
	display: flex !important;
} */
.msj-promo::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 100%;
	right: 18px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 8px 8px 8px;
	border-color: transparent transparent #E92070 transparent;
}
.msj-line {
	height: 24px;
	background-color: #CCC4D2;
}
.msj-line::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 100%;
	left: 8px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 8px 8px 8px;
	border-color: transparent transparent #ccc4d2 transparent;
}
.msj-line.msj-new::before {
	left: 88px;
}
.box-linea:not(:first-of-type) {
	margin-top: 16px;
	padding-top: 16px;
	position: relative;
}
.box-linea:not(:first-of-type):before {
	content: '';
	display: block;
	height: 1px;
	width: calc(100% + 20px);
	background-color: #B3A6BA;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.box-plan .fields, .box-plan .msj-porta, .box-plan .msj-new, .box-plan[data-port="linea-nueva"] .fields, .box-plan[data-port="portabilidad"] .msj-new {
	display: none;
}
.box-plan[data-port="portabilidad"] .fields {
	display: block;
}
.box-plan[data-port="portabilidad"] .msj-porta, .box-plan[data-port="linea-nueva"] .msj-new {
	display: flex;
}
/* ----- Step 02 ------------------------------------------------------------------ */

/* ----- Step 04 ------------------------------------------------------------------ */
.icheck {
	height: 52px;
	width: 52px;
	border: 2px solid #7FBF40;
}
.box-smry > article::after {
	content: '';
	display: block;
	height: 1px;
	background-color: #C9CFD7;
	margin: 16px 0;
}
.box-smry > article:last-of-type::after {
	display: none;
}
.box-total {
	height: 42px;
}
.box-total p:first-of-type::before {
	content: '';
	display: block;
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4.5px 0 4.5px 6px;
	border-color: transparent transparent transparent #e92070;
}
.box-despatch {
	border: 1px solid #B3A6BA;
	border-radius: 10px;
}
.box-resumen[data-disc1="0"][data-disc2="0"] .nooffer,
.box-resumen:not([data-disc1="0"][data-disc2="0"]) .r-total-after {
	display: none !important;
}
@media (min-width: 768px) {
	.box-total {
		border: 1px solid #E92070;
	}
}
/* ----- Step 04 ------------------------------------------------------------------ */

/* ----- Detalle de contratación -------------------------------------------------- */
.detail {
	padding: 2px;
	border-radius: 8px 8px 0 0;
	border-top: 1px solid #C9CFD7;
	box-shadow: 0px 5px 10px rgba(45, 18, 65, 0.15);
}
.detail::before {
	content: '';
	display: block;
	position: absolute;
	bottom: calc(100% - 0px);
	right: calc(50% - 19px);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 19px 14px 19px;
	border-color: transparent transparent #C9CFD7 transparent;
}
.detail::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 100%;
	right: calc(50% - 17px);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 17px 13px 17px;
	border-color: transparent transparent #fff transparent;
}
.detail hr.sep {
	border-top: 1px solid #C9CFD7;
}
.detail hr.sep::before {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 12px 0 12px;
	border-color: #C9CFD7 transparent transparent transparent;
	position: absolute;
	top: 0;
	left: calc(50% - 12px);
}
.detail hr.sep::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 12px 0 12px;
	border-color: #ffffff transparent transparent transparent;
	position: absolute;
	top: -1px;
	left: calc(50% - 12px);
}
.detail .box-detail > li::before {
	content: '●';
	color: #e92070;
	font-size: 10px;
	position: absolute;
	top: 6px;
	left: 0;
}
.detail[data-disc="0"] .box-ahorro,
.detail[data-disc="0"] .box-detail,
.detail[data-disc="0"] .sep,
.detail[data-disc="0"] .tmensual,
.detail[data-disc="0"] .promo,
.detail[data-disc1="0"][data-disc2="0"] .tmensual,
.detail[data-disc1="0"][data-disc2="0"] .box-disc,
.detail[data-disc1="0"] .disc1,
.detail[data-disc2="0"] .disc2 {
	display: none !important;
}
@media (min-width: 768px) {
	.detail {
		border-radius: 8px;
	}
	.detail::before, .detail::after {
		display: none !important;
	}
	.detail > div {
		border-radius: 8px;
	}
}
/* ----- Detalle de contratación -------------------------------------------------- */

/* ----- Helpers ------------------------------------------------------------------ */
.spinner-wom {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: conic-gradient(#0000 10%,#FF127A);
	-webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 0);
	animation: sw1 1s infinite linear;
}
@keyframes sw1 {to{transform: rotate(1turn)}}
.btn.btn-c {
	font-size: 16px;
	font-weight: 700;
	width: 280px;
	height: 44px;
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.bullet-honey li::before, .p-bulltet-honey::before {
	content: '';
	display: inline-block;
	height: 7px;
	width: 7px;
	background-color: #5F4278;
	border-radius: 10px;
	position: absolute;
	left: 0;
	top: 7px;
}
.m-alert {
	background-color: #FFF2D3;
	border: 1px solid #E9AC20;
}
.m-alert .close-alert:hover {
	opacity: .8;
}
.m-info {
	background-color: #E6E2E8;
	border: 1px solid #574466;
}
.info {
	background: #E6E2E8;
	border: 1px solid #CCC4D2;
}
.wom .text-balckpearl {
	color: #0E141D !important;
}
.wom .mw-320-px {
	max-width: 320px;
}
.wom .mw-356-px {
	max-width: 356px;
}
.wom .mw-450-px {
	max-width: 450px;
}
.wom .separator {
	border-top: 1px solid #D4D4E6;
	border-bottom: 1px solid #fff;
}
.input-active .input-group-example, .input-filled .input-group-example {
	opacity: 0;
}
.wom .input-group-example {
	top: 2px;
}
/* ----- Helpers ------------------------------------------------------------------ */

