/*
 * Mapachio to Woo - frontend.
 * Solo lo estructural: sin colores ni tipografia, para que los botones hereden
 * el estilo del tema o los controles del widget de Elementor.
 */

.mtw-periodos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.mtw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-decoration: none;
}

.mtw-btn__precio {
	font-weight: 600;
}

/* Ancho completo: los botones se reparten la fila o llenan la columna. */
.mtw-periodos.is-stretch .mtw-btn {
	flex: 1 1 0;
	width: 100%;
}

.mtw-precio {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
}

/* El sufijo hereda todo: tamaño y color los manda el botón o el tema. */
.mtw-precio__sufijo {
	font: inherit;
	color: inherit;
}

/* ---------- Acceso a la cuenta ---------- */

.mtw-cuenta-wrap {
	display: flex;
}

.mtw-cuenta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: inherit;
	line-height: 1;
}

.mtw-cuenta__icono {
	display: inline-flex;
	flex: none;
}

.mtw-cuenta__icono .mtw-icon {
	fill: currentColor;
}

/* Solo icono en movil: el texto estorba en una barra apretada. */
@media (max-width: 767px) {
	.mtw-cuenta.is-solo-icono-movil .mtw-cuenta__texto {
		display: none;
	}

	.mtw-cuenta.is-solo-icono-movil {
		gap: 0;
	}
}

/* ---------- Modal para elegir el nombre del dominio ---------- */

.mtw-dom {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(20, 20, 28, .7);
}

.mtw-dom[hidden] {
	display: none;
}

body.mtw-dom-abierto {
	overflow: hidden;
}

.mtw-dom__caja {
	position: relative;
	width: 100%;
	max-width: 520px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 28px;
	border-radius: 14px;
	background: #fff;
	color: #00003D;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}

/*
 * El tema y Elementor pintan todos los <button> del sitio, asi que dentro del
 * modal reseteamos con !important. Todo esta acotado a .mtw-dom: no se escapa.
 */
.mtw-dom button,
.mtw-dom input,
.mtw-buscador .mtw-dom__alt {
	appearance: none !important;
	-webkit-appearance: none !important;
	margin: 0 !important;
	font-family: inherit !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	float: none !important;
	transition: none !important;
}

.mtw-dom .mtw-dom__cerrar {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 34px !important;
	height: 34px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: #00003D !important;
	cursor: pointer;
	opacity: .55;
}

.mtw-dom .mtw-dom__cerrar:hover,
.mtw-dom .mtw-dom__cerrar:focus-visible {
	opacity: 1;
	background: rgba(0, 0, 0, .07) !important;
}

.mtw-dom .mtw-dom__cerrar .mtw-icon {
	fill: currentColor;
}

.mtw-dom__titulo {
	margin: 0 0 6px;
	font-size: 22px;
}

.mtw-dom__bajada {
	margin: 0 0 18px;
	font-size: 14px;
	opacity: .75;
}

.mtw-dom__form {
	display: flex;
	gap: 8px;
}

.mtw-dom__campo {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid #d5d5dd;
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}

.mtw-dom__campo:focus-within {
	border-color: #00003D;
}

.mtw-dom .mtw-dom__input {
	flex: 1 1 auto;
	width: 100% !important;
	height: 46px !important;
	padding: 0 12px !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-size: 15px !important;
	background: transparent !important;
	color: #00003D !important;
	outline: none !important;
}

.mtw-dom__sufijo {
	padding: 0 12px 0 4px;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	opacity: .6;
}

.mtw-dom .mtw-dom__buscar,
.mtw-dom .mtw-dom__continuar {
	height: 46px !important;
	padding: 0 22px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: #FF007C !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	cursor: pointer;
	white-space: nowrap;
}

.mtw-dom .mtw-dom__buscar:hover,
.mtw-dom .mtw-dom__continuar:hover {
	filter: brightness(.88);
	background: #FF007C !important;
}

.mtw-dom .mtw-dom__buscar[disabled],
.mtw-dom .mtw-dom__continuar[disabled] {
	opacity: .45;
	cursor: not-allowed;
}

.mtw-dom__aviso,
.mtw-dom__resultado {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 11px 13px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.35;
}

.mtw-dom__aviso[hidden],
.mtw-dom__resultado[hidden],
.mtw-dom__alternativas[hidden] {
	display: none;
}

.mtw-dom__aviso {
	background: #fdecef;
	color: #a3132f;
}

.mtw-dom__resultado.is-libre {
	background: #e7f6ec;
	color: #14682f;
}

.mtw-dom__resultado.is-tomado {
	background: #fdecef;
	color: #a3132f;
}

.mtw-dom__aviso .mtw-icon,
.mtw-dom__resultado .mtw-icon {
	flex: none;
	fill: currentColor;
}

.mtw-dom__alternativas {
	margin-top: 18px;
}

.mtw-dom__cargando {
	margin: 0 0 10px;
	font-size: 14px;
	opacity: .75;
}

.mtw-dom__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

/*
 * El buscador es mas ancho que el modal. Las columnas salen de variables que
 * fija el propio bloque, asi el shortcode y el widget usan el mismo mecanismo.
 */
.mtw-buscador .mtw-dom__grid {
	grid-template-columns: repeat(var(--mtw-cols, 3), minmax(0, 1fr));
}

@media (max-width: 900px) {
	.mtw-buscador .mtw-dom__grid {
		grid-template-columns: repeat(var(--mtw-cols-tablet, 2), minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.mtw-dom__grid {
		grid-template-columns: 1fr;
	}

	.mtw-buscador .mtw-dom__grid {
		grid-template-columns: repeat(var(--mtw-cols-movil, 1), minmax(0, 1fr));
	}
}

.mtw-dom .mtw-dom__alt,
.mtw-buscador .mtw-dom__alt {
	position: relative;
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100% !important;
	padding: 12px 14px !important;
	border: 1px solid #d5d5dd !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: #00003D !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-align: left !important;
	cursor: pointer;
	transition: transform .2s ease, background-color .2s ease, border-color .2s ease !important;
}

.mtw-dom .mtw-dom__alt-nombre,
.mtw-buscador .mtw-dom__alt-nombre {
	word-break: break-all;
}

.mtw-dom .mtw-dom__alt-icono,
.mtw-buscador .mtw-dom__alt-icono {
	width: 16px;
	height: 16px;
	flex: none;
	fill: currentColor;
	opacity: .55;
	transition: opacity .2s ease;
}

/* El z-index evita que la tarjeta ampliada quede por debajo de su vecina. */
.mtw-dom .mtw-dom__alt:hover,
.mtw-buscador .mtw-dom__alt:hover {
	z-index: 2;
	transform: scale(1.03);
	border-color: #FF007C !important;
	background: #FF007C !important;
	color: #fff !important;
	box-shadow: 0 6px 18px rgba(255, 0, 127, .25) !important;
}

.mtw-dom .mtw-dom__alt:hover .mtw-dom__alt-icono,
.mtw-buscador .mtw-dom__alt:hover .mtw-dom__alt-icono {
	opacity: 1;
}

.mtw-dom .mtw-dom__alt.is-elegido,
.mtw-buscador .mtw-dom__alt.is-elegido {
	border-color: #FF007C !important;
	background: #FF007C !important;
	color: #fff !important;
}

.mtw-dom .mtw-dom__alt.is-elegido .mtw-dom__alt-icono,
.mtw-buscador .mtw-dom__alt.is-elegido .mtw-dom__alt-icono {
	opacity: 1;
}

/* Loader mientras se consultan las alternativas. */
.mtw-dom__cargando-box {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mtw-dom__cargando-box .mtw-dom__cargando {
	margin: 0;
}

.mtw-dom__spinner {
	width: 22px;
	height: 22px;
	flex: none;
	border: 3px solid rgba(0, 0, 0, .12);
	border-top-color: #FF007C;
	border-radius: 50%;
	animation: mtw-dom-spin .8s linear infinite;
}

@keyframes mtw-dom-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mtw-dom__spinner {
		animation-duration: 2.4s;
	}

	.mtw-dom .mtw-dom__alt:hover,
	.mtw-buscador .mtw-dom__alt:hover {
		transform: none;
	}
}

/* Continuar aparece recien cuando hay un dominio libre elegido. */
.mtw-dom__acciones {
	display: flex;
	justify-content: flex-end;
	margin-top: 22px;
}

.mtw-dom__acciones[hidden] {
	display: none;
}

/* Elegir o cambiar el nombre desde el carrito: en su propia linea, como pastilla. */
.mtw-dom-elegir {
	display: inline-flex !important;
	align-items: center;
	gap: 5px;
	margin-top: 8px;
	padding: 4px 10px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
}

.mtw-dom-elegir::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.mtw-dom-elegir.is-pendiente {
	color: #a3132f;
	background: #fdecef;
	border-color: #f2c2cc;
}

.mtw-dom-elegir:not(.is-pendiente) {
	color: #14682f;
	background: #e7f6ec;
	border-color: #bde2ca;
}

.mtw-dom-elegir:hover {
	filter: brightness(.95);
}

/* El nombre del producto en el carrito deja de ser una sola linea. */
.woocommerce-cart .product-name .mtw-dom-elegir {
	display: table !important;
}

@media (max-width: 600px) {
	.mtw-dom__caja {
		padding: 22px 18px;
	}

	.mtw-dom__form {
		flex-direction: column;
	}

	.mtw-dom__buscar {
		width: 100%;
	}

	.mtw-dom__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Buscador de dominios ---------- */

.mtw-buscador {
	padding: 22px;
	border: 1px solid #e3e3ea;
	border-radius: 14px;
	background: #fafafd;
}

.mtw-buscador__titulo {
	margin: 0 0 4px;
	font-size: 19px;
}

.mtw-buscador__texto {
	margin: 0 0 16px;
	font-size: 14px;
	opacity: .75;
}

.mtw-buscador__panel[hidden] {
	display: none;
}

.mtw-buscador__form {
	display: flex;
	gap: 8px;
}

.mtw-buscador__campo {
	display: flex;
	align-items: stretch;
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid #d5d5dd;
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}

.mtw-buscador__campo:focus-within {
	border-color: #00003D;
}

.mtw-buscador .mtw-buscador__input,
.mtw-buscador .mtw-buscador__tld {
	appearance: none !important;
	-webkit-appearance: none !important;
	height: 48px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: #00003D !important;
	font-family: inherit !important;
	font-size: 15px !important;
	box-shadow: none !important;
	outline: none !important;
	min-height: 0 !important;
}

.mtw-buscador .mtw-buscador__input {
	flex: 1 1 auto;
	width: 100% !important;
	min-width: 0;
	padding: 0 14px !important;
}

/* appearance:none borra la flecha nativa: la reponemos como fondo. */
.mtw-buscador .mtw-buscador__tld {
	flex: none;
	max-width: 45%;
	padding: 0 34px 0 14px !important;
	border-left: 1px solid #e3e3ea !important;
	font-weight: 700 !important;
	cursor: pointer;
	background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231a1a1a'%3E%3Cpath d='M12 15l-4.243-4.243 1.415-1.414L12 12.172l2.828-2.829 1.415 1.414z'/%3E%3C/svg%3E") no-repeat right 10px center !important;
	background-size: 18px 18px !important;
}

.mtw-buscador .mtw-buscador__buscar,
.mtw-buscador .mtw-buscador__cta,
.mtw-buscador .mtw-buscador__agregar {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 48px !important;
	margin: 0 !important;
	padding: 0 24px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: #FF007C !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-align: center;
	text-decoration: none !important;
	text-transform: none !important;
	box-shadow: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .2s ease, background-color .2s ease !important;
}

.mtw-buscador .mtw-buscador__buscar:hover,
.mtw-buscador .mtw-buscador__cta:hover,
.mtw-buscador .mtw-buscador__agregar:hover {
	transform: scale(1.03);
	background: #FF007C !important;
}

.mtw-buscador .mtw-buscador__buscar[disabled],
.mtw-buscador .mtw-buscador__agregar[disabled] {
	opacity: .5;
	transform: none;
	cursor: not-allowed;
}

.mtw-buscador .mtw-buscador__agregar {
	height: 40px !important;
	margin-left: auto !important;
	padding: 0 18px !important;
	font-size: 14px !important;
}

.mtw-buscador__aviso,
.mtw-buscador__resultado {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 11px 13px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.35;
}

.mtw-buscador__aviso[hidden],
.mtw-buscador__resultado[hidden],
.mtw-buscador__alternativas[hidden] {
	display: none;
}

.mtw-buscador__aviso {
	background: #fdecef;
	color: #a3132f;
}

.mtw-buscador__aviso .mtw-icon,
.mtw-buscador__resultado .mtw-icon {
	flex: none;
	fill: currentColor;
}

.mtw-buscador__alternativas {
	margin-top: 18px;
}

.mtw-buscador__pie {
	margin: 14px 0 0;
	font-size: 13px;
}

@media (max-width: 600px) {
	.mtw-buscador__form {
		flex-direction: column;
	}

	.mtw-buscador .mtw-buscador__buscar {
		width: 100% !important;
	}

	.mtw-buscador .mtw-buscador__agregar {
		width: 100% !important;
		margin-left: 0 !important;
	}

	.mtw-buscador__resultado {
		flex-wrap: wrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mtw-buscador .mtw-buscador__buscar:hover,
	.mtw-buscador .mtw-buscador__cta:hover,
	.mtw-buscador .mtw-buscador__agregar:hover {
		transform: none;
	}
}

/* Flecha dentro de "Quiero este dominio": indica que al pulsar se selecciona. */
.mtw-buscador .mtw-buscador__agregar {
	gap: 8px;
}

.mtw-buscador .mtw-buscador__agregar .mtw-dom__alt-icono {
	width: 16px;
	height: 16px;
	flex: none;
	fill: currentColor;
	opacity: .9;
}

/* ---------- Avisos flotantes ---------- */

.mtw-toasts {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99990;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: min(380px, calc(100vw - 40px));
	pointer-events: none;
}

.mtw-toast {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 44px 17px 14px;
	border: 1px solid #e6e6ee;
	border-radius: 12px;
	background: #fff;
	color: #00003D;
	box-shadow: 0 14px 34px rgba(20, 20, 40, .16);
	overflow: hidden;
	pointer-events: auto;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .25s ease, transform .25s ease;
}

.mtw-toast.is-visible {
	opacity: 1;
	transform: none;
}

.mtw-toast.is-saliendo {
	opacity: 0;
	transform: translateY(12px);
}

.mtw-toast__icono {
	display: inline-flex;
	flex: none;
	margin-top: 1px;
	color: #14924a;
}

.mtw-toast--error .mtw-toast__icono {
	color: #d61f45;
}

.mtw-toast--info .mtw-toast__icono {
	color: #00003D;
}

.mtw-toast__icono .mtw-icon,
.mtw-toast__cerrar .mtw-icon {
	fill: currentColor;
}

.mtw-toast__texto {
	margin: 0 !important;
	font-size: 14px;
	line-height: 1.45;
	color: inherit;
}

.mtw-toast__accion {
	margin-left: 6px;
	color: #FF007C !important;
	font-weight: 700;
	text-decoration: underline !important;
	white-space: nowrap;
}

.mtw-toast__accion:hover,
.mtw-toast__accion:focus-visible {
	color: #FF007C !important;
}

.mtw-toasts .mtw-toast__cerrar {
	appearance: none !important;
	-webkit-appearance: none !important;
	position: absolute;
	top: 9px;
	right: 9px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 28px !important;
	height: 28px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #00003D !important;
	opacity: .5;
	cursor: pointer;
}

.mtw-toasts .mtw-toast__cerrar:hover,
.mtw-toasts .mtw-toast__cerrar:focus-visible {
	opacity: 1;
	background: rgba(0, 0, 0, .06) !important;
}

/* Barra de tiempo restante: se detiene junto con el temporizador. */
.mtw-toast__barra {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: #FF007C;
	transform-origin: left center;
	animation: mtw-toast-barra var(--mtw-toast-dur, 6s) linear forwards;
}

.mtw-toast.is-pausado .mtw-toast__barra {
	animation-play-state: paused;
}

.mtw-toast--error .mtw-toast__barra {
	display: none;
}

@keyframes mtw-toast-barra {
	from {
		transform: scaleX(1);
	}

	to {
		transform: scaleX(0);
	}
}

/* El bloque Carrito tiene su propio snackbar al quitar: con los toasts activos se oculta para no duplicar. */
.mtw-toasts-on .wc-block-components-notice-snackbar-list {
	display: none !important;
}

@media (max-width: 600px) {
	.mtw-toasts {
		left: 12px;
		right: 12px;
		bottom: 12px;
		width: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mtw-toast,
	.mtw-toast.is-saliendo {
		transform: none;
		transition: opacity .1s linear;
	}

	.mtw-toast__barra {
		display: none;
	}
}

/* ---------- RUC condicional en el checkout clásico ---------- */

/*
 * Oculto mientras no se marque el switch. Se usa :not(.is-visible) para que al
 * mostrarse mande el display del tema y no romper su grilla de form-row.
 */
.mtw-factura-ruc:not(.is-visible) {
	display: none !important;
}

.mtw-factura-switch label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

/* ---------- Modal de dominio vinculado (hosting, correos) ---------- */

/* Mientras se consulta el carrito, el botón no admite otro clic. */
[data-mtw-vincular].is-cargando {
	opacity: .6;
	cursor: progress;
	pointer-events: none;
}

.mtw-vin .mtw-vin__caja {
	max-width: 560px;
}

.mtw-vin .mtw-vin__atras {
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	margin: 0 0 10px !important;
	padding: 4px 8px 4px 2px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: transparent !important;
	color: #6b6b7b !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer;
}

.mtw-vin .mtw-vin__atras[hidden] {
	display: none !important;
}

.mtw-vin .mtw-vin__atras:hover {
	color: #FF007C !important;
}

.mtw-vin__paso {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mtw-vin__paso[hidden] {
	display: none;
}

.mtw-vin__paso.is-entrando {
	animation: mtw-vin-entra .28s cubic-bezier(.22, .61, .36, 1);
}

@keyframes mtw-vin-entra {
	from { opacity: 0; transform: translateX(10px); }
	to { opacity: 1; transform: none; }
}

.mtw-vin__sub {
	margin: 4px 0 0;
	color: #6b6b7b;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.mtw-vin__carrito,
.mtw-vin__lista,
.mtw-vin__opciones {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mtw-vin__carrito[hidden] {
	display: none;
}

/* Tarjeta de opción: icono, texto y flecha. */
.mtw-vin .mtw-vin__opcion {
	display: flex !important;
	align-items: center;
	gap: 14px;
	width: 100% !important;
	padding: 14px 16px !important;
	border: 1px solid #e3e3ea !important;
	border-radius: 12px !important;
	background: #fff !important;
	color: #00003D !important;
	font-size: 15px !important;
	text-align: left;
	cursor: pointer;
	transition: border-color .2s, box-shadow .2s, transform .2s !important;
}

.mtw-vin .mtw-vin__opcion[hidden] {
	display: none !important;
}

.mtw-vin .mtw-vin__opcion:hover,
.mtw-vin .mtw-vin__opcion:focus-visible {
	border-color: #FF007C !important;
	box-shadow: 0 8px 24px rgba(255, 0, 127, .1) !important;
	transform: translateY(-1px);
}

.mtw-vin .mtw-vin__opcion.is-carrito {
	border-color: rgba(0, 0, 61, .18) !important;
	background: rgba(0, 0, 61, .04) !important;
}

.mtw-vin__ico {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: #fff0f7;
	color: #FF007C;
}

.mtw-vin__opcion.is-carrito .mtw-vin__ico {
	background: #fff;
	color: #00003D;
}

.mtw-vin__txt {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mtw-vin__txt strong {
	font-size: 15px;
	word-break: break-word;
}

.mtw-vin__txt small {
	color: #6b6b7b;
	font-size: 13px;
	line-height: 1.4;
}

.mtw-vin__opcion .mtw-dom__alt-icono {
	flex: none;
	width: 18px;
	height: 18px;
	fill: #b5b5c3;
}

.mtw-vin__opcion:hover .mtw-dom__alt-icono {
	fill: #FF007C;
}

/* Ya tengo un dominio. */
.mtw-vin__label {
	font-size: 14px;
	font-weight: 600;
}

.mtw-vin__campo {
	display: flex;
	align-items: stretch;
	border: 1px solid #d5d5dd;
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}

.mtw-vin__campo:focus-within {
	border-color: #00003D;
}

.mtw-vin .mtw-vin__campo input {
	flex: 1 1 auto;
	width: 100% !important;
	height: 46px !important;
	padding: 0 12px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: #00003D !important;
	font-size: 15px !important;
	outline: none !important;
}

.mtw-vin .mtw-vin__campo select {
	flex: none;
	width: auto !important;
	max-width: 48% !important;
	height: 46px !important;
	margin: 0 !important;
	padding: 0 12px !important;
	border: 0 !important;
	border-left: 1px solid #e3e3ea !important;
	border-radius: 0 !important;
	background: #fafafd !important;
	color: #00003D !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	box-shadow: none !important;
	cursor: pointer;
}

.mtw-vin__vista {
	margin: 0;
	color: #6b6b7b;
	font-size: 14px;
}

.mtw-vin__vista[hidden] {
	display: none;
}

.mtw-vin__vista strong {
	color: #00003D;
}

/* Migrar: se destaca como la opción que el equipo necesita saber. */
.mtw-vin__migrar {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border: 1.5px dashed #ffb3d6;
	border-radius: 12px;
	background: #fff7fb;
	cursor: pointer;
	transition: border-color .2s, background-color .2s;
}

.mtw-vin__migrar.is-activo {
	border-style: solid;
	border-color: #FF007C;
	background: #fff0f7;
}

.mtw-vin .mtw-vin__migrar-check {
	flex: none;
	width: 20px !important;
	height: 20px !important;
	margin: 1px 0 0 !important;
	border: 1.5px solid #FF007C !important;
	border-radius: 6px !important;
	background: #fff !important;
	cursor: pointer;
}

.mtw-vin .mtw-vin__migrar-check:checked {
	background: #FF007C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M10 15.1716L19.1924 5.97919L20.6066 7.3934L10 18L3.63604 11.6361L5.05025 10.2218L10 15.1716Z'/%3E%3C/svg%3E") center / 14px no-repeat !important;
}

.mtw-vin__migrar-caja {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mtw-vin__migrar-caja strong {
	color: #00003D;
	font-size: 15px;
}

.mtw-vin__migrar-caja small {
	color: #6b6b7b;
	font-size: 13px;
	line-height: 1.4;
}

.mtw-vin__ws {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 12px;
	background: #e9f9ef;
	animation: mtw-vin-entra .28s cubic-bezier(.22, .61, .36, 1);
}

.mtw-vin__ws[hidden] {
	display: none;
}

.mtw-vin__ws p {
	flex: 1 1 220px;
	margin: 0;
	color: #00003D;
	font-size: 14px;
	line-height: 1.45;
}

.mtw-vin .mtw-vin__ws-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 10px;
	background: #25D366;
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background-color .2s;
}

.mtw-vin .mtw-vin__ws-btn:hover {
	background: #1ebe5b;
}

.mtw-vin .mtw-vin__ws-btn .mtw-icon {
	fill: currentColor;
}

.mtw-vin .mtw-dom__acciones {
	display: flex;
	justify-content: flex-end;
}

.mtw-vin .mtw-dom__acciones[hidden] {
	display: none;
}

@media (max-width: 480px) {
	.mtw-vin .mtw-dom__acciones .mtw-dom__continuar {
		width: 100% !important;
	}

	.mtw-vin .mtw-vin__campo select {
		max-width: 44% !important;
		padding: 0 8px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mtw-vin__paso.is-entrando,
	.mtw-vin__ws {
		animation: none;
	}
}

/* ---------- Modal de dominio vinculado: ancho, texto y móvil ---------- */

/* El tema fuerza nowrap en los botones: las tarjetas deben poder partir su texto. */
.mtw-vin .mtw-vin__caja {
	width: 100%;
	overflow-x: hidden;
}

.mtw-vin .mtw-vin__opcion,
.mtw-vin .mtw-vin__opcion * {
	white-space: normal !important;
	line-height: 1.35 !important;
}

.mtw-vin .mtw-vin__opcion {
	min-width: 0 !important;
	max-width: 100% !important;
	height: auto !important;
}

.mtw-vin .mtw-vin__txt,
.mtw-vin .mtw-vin__txt strong,
.mtw-vin .mtw-vin__txt small {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* El título no pasa por debajo de la X. */
.mtw-vin .mtw-dom__titulo {
	padding-right: 36px;
	font-size: clamp(20px, 5vw, 26px) !important;
	line-height: 1.2 !important;
}

.mtw-vin .mtw-dom__bajada {
	line-height: 1.45;
}

@media (max-width: 600px) {
	/* Hoja que sube desde abajo: más espacio útil y el pulgar llega a todo. */
	.mtw-dom.mtw-vin {
		align-items: flex-end;
		padding: 0;
	}

	.mtw-vin .mtw-vin__caja {
		max-width: none;
		max-height: 92vh;
		padding: 22px 18px calc(18px + env(safe-area-inset-bottom));
		border-radius: 18px 18px 0 0;
		animation: mtw-vin-sube .32s cubic-bezier(.22, .61, .36, 1);
	}

	.mtw-vin .mtw-dom__cerrar {
		top: 14px !important;
		right: 12px !important;
	}

	.mtw-vin .mtw-vin__opcion {
		gap: 12px;
		padding: 12px !important;
	}

	.mtw-vin__ico {
		width: 38px;
		height: 38px;
	}

	.mtw-vin .mtw-vin__txt strong {
		font-size: 15px;
	}

	.mtw-vin .mtw-vin__txt small {
		font-size: 12.5px;
	}

	/* Buscar pasa abajo del campo, a todo el ancho. */
	.mtw-vin .mtw-vin__buscar {
		flex-direction: column;
	}

	.mtw-vin .mtw-vin__buscar .mtw-dom__buscar {
		width: 100% !important;
	}

	.mtw-vin .mtw-vin__ws-btn {
		width: 100%;
		justify-content: center;
	}
}

@keyframes mtw-vin-sube {
	from { transform: translateY(40px); opacity: 0; }
	to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.mtw-vin .mtw-vin__caja {
		animation: none;
	}
}

/* ---------- Modal de dominio vinculado: entrada y salida ---------- */

/* Fondo: fundido. La clase is-visible la pone y la quita el JS; hidden llega al final de la salida. */
.mtw-dom.mtw-vin {
	opacity: 0;
	transition: opacity .32s ease;
}

.mtw-dom.mtw-vin.is-visible {
	opacity: 1;
}

/* Caja: sube y crece un poco al entrar; al salir hace el camino inverso. */
.mtw-vin .mtw-vin__caja {
	opacity: 0;
	transform: translateY(16px) scale(.97);
	transition: transform .32s cubic-bezier(.22, .61, .36, 1), opacity .24s ease;
	animation: none;
	will-change: transform, opacity;
}

.mtw-vin.is-visible .mtw-vin__caja {
	opacity: 1;
	transform: none;
}

/* Opciones escalonadas: la vista entiende el orden antes de leer. */
.mtw-vin .mtw-vin__paso .mtw-vin__opcion {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1), border-color .2s, box-shadow .2s !important;
}

.mtw-vin.is-visible .mtw-vin__paso .mtw-vin__opcion {
	opacity: 1;
	transform: none;
}

.mtw-vin.is-visible .mtw-vin__opcion:nth-child(1) { transition-delay: .08s, .08s, 0s, 0s !important; }
.mtw-vin.is-visible .mtw-vin__opcion:nth-child(2) { transition-delay: .14s, .14s, 0s, 0s !important; }
.mtw-vin.is-visible .mtw-vin__opcion:nth-child(3) { transition-delay: .2s, .2s, 0s, 0s !important; }
.mtw-vin.is-visible .mtw-vin__opcion:nth-child(n+4) { transition-delay: .24s, .24s, 0s, 0s !important; }

.mtw-vin.is-visible .mtw-vin__paso .mtw-vin__opcion:hover,
.mtw-vin.is-visible .mtw-vin__paso .mtw-vin__opcion:focus-visible {
	transform: translateY(-1px);
	transition-delay: 0s !important;
}

@media (max-width: 600px) {
	/* En móvil la hoja entra desde el borde inferior y sale por el mismo lado. */
	.mtw-vin .mtw-vin__caja {
		opacity: 1;
		transform: translateY(100%);
		transition: transform .36s cubic-bezier(.22, .61, .36, 1);
		animation: none;
	}

	.mtw-vin.is-visible .mtw-vin__caja {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mtw-dom.mtw-vin,
	.mtw-vin .mtw-vin__caja,
	.mtw-vin .mtw-vin__paso .mtw-vin__opcion {
		transition: none !important;
	}
}

/* ---------- Selects de extensiones agrupados ---------- */

.mtw-vin .mtw-vin__campo select {
	text-overflow: ellipsis;
}

/* Con precio la etiqueta es más larga: el select gana espacio. */
.mtw-vin .mtw-vin__buscar .mtw-vin__campo select {
	max-width: 60% !important;
}

.mtw-vin .mtw-vin__campo optgroup,
.mtw-buscador__tld optgroup {
	color: #00003D;
	font-weight: 700;
}

.mtw-vin .mtw-vin__campo option,
.mtw-buscador__tld option {
	font-weight: 400;
}

@media (max-width: 600px) {
	/* Campo arriba y select abajo, ambos a todo el ancho. */
	.mtw-vin .mtw-vin__campo {
		flex-wrap: wrap;
	}

	.mtw-vin .mtw-vin__campo input {
		flex-basis: 100%;
	}

	.mtw-vin .mtw-vin__campo select,
	.mtw-vin .mtw-vin__buscar .mtw-vin__campo select {
		flex: 1 1 100%;
		max-width: 100% !important;
		border-top: 1px solid #e3e3ea !important;
		border-left: 0 !important;
	}
}

/* ---------- Modal "Elige tu dominio": select de extensiones agrupado ---------- */

.mtw-dom .mtw-dom__tld-select {
	flex: none;
	width: auto !important;
	max-width: 55% !important;
	height: 46px !important;
	margin: 0 !important;
	padding: 0 12px !important;
	border: 0 !important;
	border-left: 1px solid #e3e3ea !important;
	border-radius: 0 !important;
	background: #fafafd !important;
	color: #00003D !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	box-shadow: none !important;
	text-overflow: ellipsis;
	cursor: pointer;
}

.mtw-dom .mtw-dom__tld-select:disabled {
	cursor: default;
	opacity: .8;
}

.mtw-dom .mtw-dom__tld-select optgroup {
	color: #00003D;
	font-weight: 700;
}

.mtw-dom .mtw-dom__tld-select option {
	font-weight: 400;
}

@media (max-width: 600px) {
	/* Campo, select y botón apilados: la etiqueta con precio se lee completa. */
	.mtw-dom:not(.mtw-vin) .mtw-dom__form {
		flex-direction: column;
	}

	.mtw-dom:not(.mtw-vin) .mtw-dom__campo {
		flex-wrap: wrap;
	}

	.mtw-dom:not(.mtw-vin) .mtw-dom__campo .mtw-dom__input {
		flex-basis: 100%;
	}

	.mtw-dom:not(.mtw-vin) .mtw-dom__tld-select {
		flex: 1 1 100%;
		max-width: 100% !important;
		border-top: 1px solid #e3e3ea !important;
		border-left: 0 !important;
	}

	.mtw-dom:not(.mtw-vin) .mtw-dom__buscar {
		width: 100% !important;
	}
}

/* ---------- Botón de cuenta: hover sin saltos ---------- */

/*
 * El SVG inline movía la línea base y el tema cambia la decoración en hover: el enlace
 * parecía encogerse. Con el icono en bloque y alto propio, solo cambia el color.
 */
.mtw-cuenta {
	vertical-align: middle;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease;
}

.mtw-cuenta:hover,
.mtw-cuenta:focus-visible {
	text-decoration: none !important;
	transform: none !important;
}

.mtw-cuenta__icono {
	line-height: 0;
}

.mtw-cuenta__icono .mtw-icon {
	display: block;
	transition: fill .2s ease;
}

.mtw-cuenta__texto {
	line-height: 1.2;
}

/* Texto que encabeza el paso del dominio propio; cambia según se conecte o se migre. */
.mtw-vin__intro {
	margin: 0;
	color: rgba(0, 0, 61, .7);
	font-size: 14px;
	line-height: 1.5;
}

.mtw-vin__intro:empty {
	display: none;
}

/* ---------- Selects de extensión: flecha propia con aire ---------- */

/*
 * La flecha nativa queda pegada al borde y el texto la roza. Con appearance:none
 * ponemos una propia, con espacio a los dos lados.
 */
.mtw-vin .mtw-vin__campo select,
.mtw-dom .mtw-dom__tld-select,
.mtw-buscador .mtw-buscador__tld {
	appearance: none !important;
	-webkit-appearance: none !important;
	padding-right: 38px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300003D'%3E%3Cpath d='M12 13.1717L16.9497 8.22192L18.3639 9.63614L12 16.0001L5.63605 9.63614L7.05026 8.22192L12 13.1717Z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 18px !important;
	text-overflow: ellipsis;
}

/* El fondo gris del select propio se mantiene junto a la flecha. */
.mtw-vin .mtw-vin__campo select,
.mtw-dom .mtw-dom__tld-select {
	background-color: #fafafd !important;
}

.mtw-buscador .mtw-buscador__tld {
	background-color: #fff !important;
}

@media (max-width: 600px) {
	.mtw-vin .mtw-vin__campo select,
	.mtw-dom:not(.mtw-vin) .mtw-dom__tld-select {
		background-position: right 14px center !important;
	}
}

/*
 * Botones de acción de los tres modales de dominio. En un contenedor flex el botón se encoge por
 * debajo de su texto: con "Buscando…" el contenido quedaba recortado y parecía descentrado.
 * flex: none lo evita, y el centrado va explícito porque el tema alinea a la izquierda.
 */
.mtw-dom .mtw-dom__buscar,
.mtw-dom .mtw-dom__continuar,
.mtw-buscador .mtw-buscador__buscar {
	flex: none !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	text-align: center !important;
	white-space: nowrap;
}

/* La caja del modal simple también necesita el título del campo separado del input. */
.mtw-dom:not(.mtw-vin) .mtw-vin__label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
}